@storybook/design-system
Version:
Storybook design system
342 lines (296 loc) • 17.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Input = exports.PureInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _theming = require("@storybook/theming");
var _styles = require("./shared/styles");
var _animation = require("./shared/animation");
var _Icon = require("./Icon");
var _Link = require("./Link");
var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));
var _TooltipMessage = require("./tooltip/TooltipMessage");
var _excluded = ["id", "appearance", "className", "error", "errorTooltipPlacement", "hideLabel", "icon", "label", "lastErrorValue", "onActionClick", "orientation", "stackLevel", "startingType", "suppressErrorMessage", "type", "value"],
_excluded2 = ["type", "startFocused"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
// prettier-ignore
var Label = (0, _theming.styled)("label", process.env.NODE_ENV === "production" ? {
target: "e1ye6cr77"
} : {
target: "e1ye6cr77",
label: "Label"
})("font-weight:", function (props) {
return props.appearance !== 'code' && _styles.typography.weight.bold;
}, ";font-family:", function (props) {
return props.appearance === 'code' && _styles.typography.type.code;
}, ";font-size:", function (props) {
return props.appearance === 'code' ? _styles.typography.size.s1 - 1 : _styles.typography.size.s2;
}, "px;line-height:", function (props) {
return props.appearance === 'code' ? 16 : 20;
}, "px;"); // prettier-ignore
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "1ed4kgp",
styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important"
} : {
name: "9k4rx4-LabelWrapper",
styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important;label:LabelWrapper;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var LabelWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1ye6cr76"
} : {
target: "e1ye6cr76",
label: "LabelWrapper"
})("margin-bottom:8px;", function (props) {
return props.hideLabel && _ref3;
}, ";"); // prettier-ignore
var InputEl = (0, _theming.styled)("input", process.env.NODE_ENV === "production" ? {
target: "e1ye6cr75"
} : {
target: "e1ye6cr75",
label: "InputEl"
})("&::placeholder{color:", _styles.color.mediumdark, ";}appearance:none;border:none;box-sizing:border-box;display:block;outline:none;width:100%;margin:0;&[disabled]{cursor:not-allowed;opacity:.5;}&:-webkit-autofill{-webkit-box-shadow:0 0 0 3em ", _styles.color.lightest, " inset;}");
var getStackLevelStyling = function getStackLevelStyling(props) {
var radius = 4;
var stackLevelDefinedStyling = /*#__PURE__*/(0, _theming.css)("position:relative;", props.error && "z-index: 1;", " &:focus{z-index:2;}" + (process.env.NODE_ENV === "production" ? "" : ";label:stackLevelDefinedStyling;"));
switch (props.stackLevel) {
case 'top':
return /*#__PURE__*/(0, _theming.css)("border-top-left-radius:", radius, "px;border-top-right-radius:", radius, "px;border-bottom-left-radius:0;border-bottom-right-radius:0;", stackLevelDefinedStyling, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
case 'middle':
return /*#__PURE__*/(0, _theming.css)("border-radius:0px;margin-top:-1px;", stackLevelDefinedStyling, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
case 'bottom':
return /*#__PURE__*/(0, _theming.css)("border-bottom-left-radius:", radius, "px;border-bottom-right-radius:", radius, "px;border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px;", stackLevelDefinedStyling, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
default:
return /*#__PURE__*/(0, _theming.css)("border-radius:", radius, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
}
}; // prettier-ignore
var _ref = process.env.NODE_ENV === "production" ? {
name: "n9frdv",
styles: "padding-left:30px"
} : {
name: "10pe970-InputWrapper",
styles: "padding-left:30px;label:InputWrapper;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "yp89se",
styles: "left:10px"
} : {
name: "cnipfr-InputWrapper",
styles: "left:10px;label:InputWrapper;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var InputWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1ye6cr74"
} : {
target: "e1ye6cr74",
label: "InputWrapper"
})("display:inline-block;position:relative;vertical-align:top;width:100%;", InputEl, "{position:relative;", function (props) {
return getStackLevelStyling(props);
}, " background:", _styles.color.lightest, ";color:", _styles.color.darkest, ";font-size:", _styles.typography.size.s2, "px;line-height:20px;padding:10px 15px;box-shadow:", _styles.color.border, " 0 0 0 1px inset;", function (props) {
return props.appearance === 'pill' && /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s1, "px;line-height:16px;padding:6px 12px;border-radius:3em;background:transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;"));
}, " ", function (props) {
return props.appearance === 'code' && /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s1 - 1, "px;line-height:16px;font-family:", _styles.typography.type.code, ";border-radius:", _styles.spacing.borderRadius.small, "px;background:", _styles.color.lightest, ";padding:8px 10px;" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;"));
}, ";&:focus{box-shadow:", _styles.color.secondary, " 0 0 0 1px inset;}}", function (props) {
return props.startingType === 'password' && /*#__PURE__*/(0, _theming.css)(InputEl, "{padding-right:52px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;"));
}, " ", function (props) {
return props.icon && /*#__PURE__*/(0, _theming.css)(">svg{transition:all 150ms ease-out;position:absolute;top:50%;", props.appearance === 'pill' || props.appearance === 'code' ? /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s1, "px;height:12px;margin-top:-6px;width:12px;" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;")) : /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s2, "px;height:14px;margin-top:-7px;width:14px;" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;")), " z-index:3;", props.appearance === 'pill' || props.appearance === 'code' ? _ref2 : /*#__PURE__*/(0, _theming.css)("left:", props.appearance === 'tertiary' ? 0 : "15px", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;")), " background:transparent;path{transition:all 150ms ease-out;fill:", _styles.color.mediumdark, ";}}", InputEl, ":focus+svg path{fill:", _styles.color.darker, ";}", InputEl, "{padding-left:40px;", (props.appearance === 'pill' || props.appearance === 'code') && _ref, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;"));
}, " ", function (props) {
return props.error && /*#__PURE__*/(0, _theming.css)(InputEl, "{box-shadow:", _styles.color.red, " 0 0 0 1px inset;&:focus{box-shadow:", _styles.color.red, " 0 0 0 1px inset!important;}}svg{animation:", _animation.jiggle, " 700ms ease-out;path{fill:", _styles.color.red, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:InputWrapper;"));
}, ";"); // prettier-ignore
var InputContainer = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1ye6cr73"
} : {
target: "e1ye6cr73",
label: "InputContainer"
})(function (props) {
return props.orientation === 'horizontal' && /*#__PURE__*/(0, _theming.css)("display:table-row;", LabelWrapper, ",", InputWrapper, "{display:table-cell;}", LabelWrapper, "{width:1px;padding-right:20px;vertical-align:middle;}", InputWrapper, "{width:auto;}" + (process.env.NODE_ENV === "production" ? "" : ";label:InputContainer;"));
}, ";");
var ErrorTooltip = ( /*#__PURE__*/0, _theming.styled)(_WithTooltip["default"], process.env.NODE_ENV === "production" ? {
target: "e1ye6cr72"
} : {
target: "e1ye6cr72",
label: "ErrorTooltip"
})(process.env.NODE_ENV === "production" ? {
name: "1d3w5wq",
styles: "width:100%"
} : {
name: "1d3w5wq",
styles: "width:100%",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var ErrorTooltipMessage = ( /*#__PURE__*/0, _theming.styled)(_TooltipMessage.TooltipMessage, process.env.NODE_ENV === "production" ? {
target: "e1ye6cr71"
} : {
target: "e1ye6cr71",
label: "ErrorTooltipMessage"
})(process.env.NODE_ENV === "production" ? {
name: "1n3xte0",
styles: "width:170px"
} : {
name: "1n3xte0",
styles: "width:170px",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var Action = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1ye6cr70"
} : {
target: "e1ye6cr70",
label: "Action"
})(process.env.NODE_ENV === "production" ? {
name: "75kols",
styles: "position:absolute;right:0;min-width:45px;top:50%;transform:translateY(-50%);font-weight:bold;font-size:11px;z-index:2"
} : {
name: "75kols",
styles: "position:absolute;right:0;min-width:45px;top:50%;transform:translateY(-50%);font-weight:bold;font-size:11px;z-index:2",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var getErrorMessage = function getErrorMessage(_ref4) {
var error = _ref4.error,
value = _ref4.value,
lastErrorValue = _ref4.lastErrorValue;
var errorMessage = typeof error === 'function' ? error(value) : error;
if (lastErrorValue) {
if (value !== lastErrorValue) {
errorMessage = null;
}
}
return errorMessage;
}; // FC<Props & ComponentProps<typeof InputEl>>
var PureInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
var id = _ref5.id,
_ref5$appearance = _ref5.appearance,
appearance = _ref5$appearance === void 0 ? 'default' : _ref5$appearance,
_ref5$className = _ref5.className,
className = _ref5$className === void 0 ? null : _ref5$className,
_ref5$error = _ref5.error,
error = _ref5$error === void 0 ? null : _ref5$error,
_ref5$errorTooltipPla = _ref5.errorTooltipPlacement,
errorTooltipPlacement = _ref5$errorTooltipPla === void 0 ? 'right' : _ref5$errorTooltipPla,
_ref5$hideLabel = _ref5.hideLabel,
hideLabel = _ref5$hideLabel === void 0 ? false : _ref5$hideLabel,
_ref5$icon = _ref5.icon,
icon = _ref5$icon === void 0 ? null : _ref5$icon,
label = _ref5.label,
_ref5$lastErrorValue = _ref5.lastErrorValue,
lastErrorValue = _ref5$lastErrorValue === void 0 ? null : _ref5$lastErrorValue,
_ref5$onActionClick = _ref5.onActionClick,
onActionClick = _ref5$onActionClick === void 0 ? null : _ref5$onActionClick,
_ref5$orientation = _ref5.orientation,
orientation = _ref5$orientation === void 0 ? 'vertical' : _ref5$orientation,
_ref5$stackLevel = _ref5.stackLevel,
stackLevel = _ref5$stackLevel === void 0 ? undefined : _ref5$stackLevel,
_ref5$startingType = _ref5.startingType,
startingType = _ref5$startingType === void 0 ? 'text' : _ref5$startingType,
_ref5$suppressErrorMe = _ref5.suppressErrorMessage,
suppressErrorMessage = _ref5$suppressErrorMe === void 0 ? false : _ref5$suppressErrorMe,
_ref5$type = _ref5.type,
type = _ref5$type === void 0 ? 'text' : _ref5$type,
_ref5$value = _ref5.value,
value = _ref5$value === void 0 ? '' : _ref5$value,
props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded);
var _useState = (0, _react.useState)(getErrorMessage({
error: error,
value: value,
lastErrorValue: lastErrorValue
})),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
errorMessage = _useState2[0],
setErrorMessage = _useState2[1];
var errorId = "".concat(id, "-error");
(0, _react.useEffect)(function () {
setErrorMessage(getErrorMessage({
error: error,
value: value,
lastErrorValue: lastErrorValue
}));
}, [value, error, lastErrorValue]);
var inputEl = /*#__PURE__*/_react["default"].createElement(InputEl, (0, _extends2["default"])({
id: id // Pass the ref to the actual input element so it can be controlled
// externally.
,
ref: ref,
value: value,
type: type,
"aria-describedby": errorId,
"aria-invalid": !!error
}, props));
return /*#__PURE__*/_react["default"].createElement(InputContainer, {
orientation: orientation,
className: className
}, /*#__PURE__*/_react["default"].createElement(LabelWrapper, {
hideLabel: hideLabel
}, /*#__PURE__*/_react["default"].createElement(Label, {
htmlFor: id,
appearance: appearance
}, label)), /*#__PURE__*/_react["default"].createElement(InputWrapper, {
error: errorMessage,
"data-error": errorMessage,
icon: icon,
appearance: appearance,
stackLevel: stackLevel,
startingType: startingType
}, icon && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
icon: icon,
"aria-hidden": true
}), /*#__PURE__*/_react["default"].createElement(ErrorTooltip, {
tabIndex: -1,
placement: errorTooltipPlacement,
trigger: "none",
startOpen: true,
tagName: "div",
hasChrome: !!errorMessage && !suppressErrorMessage,
tooltip: errorMessage && !suppressErrorMessage && /*#__PURE__*/_react["default"].createElement(ErrorTooltipMessage, {
desc: errorMessage
})
}, inputEl), startingType === 'password' && /*#__PURE__*/_react["default"].createElement(Action, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
isButton: true,
tertiary: true,
onClick: onActionClick,
type: "button"
}, type === 'password' ? 'Show' : 'Hide'))));
});
exports.PureInput = PureInput;
var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
var startingType = _ref6.type,
startFocused = _ref6.startFocused,
rest = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
var _useState3 = (0, _react.useState)(startingType),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
type = _useState4[0],
setType = _useState4[1];
var togglePasswordType = (0, _react.useCallback)(function (event) {
// Make sure this does not submit a form
event.preventDefault();
event.stopPropagation();
if (type === 'password') {
setType('text');
return;
}
setType('password');
}, [type, setType]); // Outside refs take precedence
var selfRef = (0, _react.useRef)();
var inputRef = ref || selfRef;
var didFocusOnStart = (0, _react.useRef)(false);
(0, _react.useEffect)(function () {
if (inputRef.current && startFocused && !didFocusOnStart.current) {
inputRef.current.focus();
didFocusOnStart.current = true;
}
}, [inputRef, didFocusOnStart]);
return /*#__PURE__*/_react["default"].createElement(PureInput, (0, _extends2["default"])({
ref: inputRef,
startingType: startingType,
type: type,
onActionClick: togglePasswordType
}, rest));
});
exports.Input = Input;