@artsy/palette 45.13.0 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Select/tokens.js

@@ -0,0 +1,27 @@
+import { themeGet } from "@styled-system/theme-get";
+import { css } from "styled-components";
+export var SELECT_STATES = {
+  default: css(["height:50px;font-size:", ";color:", ";border-color:", ";+ label{color:", ";font-size:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize"), themeGet("textVariants.xs.fontSize"), function (_ref) {
+    var optionSelected = _ref.optionSelected;
+    return optionSelected && css(["+ label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("textVariants.xs.fontSize"));
+  }),
+  focus: css(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}&:has(option[value=\"\"]:checked) + label{text-decoration:underline;}", ""], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize"), function (_ref2) {
+    var optionSelected = _ref2.optionSelected;
+    return !optionSelected && css(["+ label{text-decoration:underline;}"]);
+  }),
+  hover: css(["color:", ";border-color:", ";text-decoration:underline;+ label{color:", ";}&:has(option[value=\"\"]:checked):not(:disabled) + label{color:", ";text-decoration:underline;}", ""], themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("colors.blue100"), function (_ref3) {
+    var optionSelected = _ref3.optionSelected,
+      disabled = _ref3.disabled;
+    return !optionSelected && !disabled && css(["+ label{color:", ";text-decoration:underline;}"], themeGet("colors.blue100"));
+  }),
+  completed: css(["border-color:", ";text-decoration:none;+ label{color:", ";}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.xs.fontSize"), function (_ref4) {
+    var optionSelected = _ref4.optionSelected;
+    return optionSelected && css(["+ label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("textVariants.xs.fontSize"));
+  }),
+  disabled: css(["color:", ";border-color:", ";text-decoration:none;+ label{color:", ";text-decoration:none;}&:not(:has(option[value=\"\"]:checked)) + label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}", ""], themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("colors.mono30"), themeGet("textVariants.xs.fontSize"), function (_ref5) {
+    var optionSelected = _ref5.optionSelected;
+    return optionSelected && css(["+ label{transform:translateY(-150%);font-size:", ";& > span{height:2px;top:50%;}}"], themeGet("textVariants.xs.fontSize"));
+  }),
+  error: css(["color:", ";border-color:", ";+ label{color:", ";}"], themeGet("colors.mono100"), themeGet("colors.red100"), themeGet("colors.red100"))
+};
+//# sourceMappingURL=tokens.js.map

package/dist/esm/elements/Select/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":["themeGet","css","SELECT_STATES","default","_ref","optionSelected","focus","_ref2","hover","_ref3","disabled","completed","_ref4","_ref5","error"],"sources":["../../../../src/elements/Select/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css, ExecutionContext } from \"styled-components\"\nimport { State } from \"./types\"\n\ninterface SelectProps extends ExecutionContext {\n  optionSelected?: boolean\n  disabled?: boolean\n}\n\nexport const SELECT_STATES: Record<State, any> = {\n  default: css`\n    height: 50px;\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:has(option[value=\"\"]:checked) + label {\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      !optionSelected &&\n      css`\n        + label {\n          text-decoration: underline;\n        }\n      `}\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.blue100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: underline;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:has(option[value=\"\"]:checked):not(:disabled) + label {\n      color: ${themeGet(\"colors.blue100\")};\n      text-decoration: underline;\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected, disabled }: SelectProps) =>\n      !optionSelected &&\n      !disabled &&\n      css`\n        + label {\n          color: ${themeGet(\"colors.blue100\")};\n          text-decoration: underline;\n        }\n      `}\n  `,\n  completed: css`\n    border-color: ${themeGet(\"colors.mono60\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    text-decoration: none;\n\n    + label {\n      color: ${themeGet(\"colors.mono30\")};\n      text-decoration: none;\n    }\n\n    &:not(:has(option[value=\"\"]:checked)) + label {\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    // Firefox polyfill for :has\n    ${({ optionSelected }: SelectProps) =>\n      optionSelected &&\n      css`\n        + label {\n          transform: translateY(-150%);\n          font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n          & > span {\n            height: 2px;\n            top: 50%;\n          }\n        }\n      `}\n  `,\n  error: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.red100\")};\n\n    + label {\n      color: ${themeGet(\"colors.red100\")};\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAA0B,mBAAmB;AAQzD,OAAO,IAAMC,aAAiC,GAAG;EAC/CC,OAAO,EAAEF,GAAG,+NAEGD,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,EAK5CA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAI,IAAA;IAAA,IAAGC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDM,KAAK,EAAEL,GAAG,mOACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAI/BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,EAajD,UAAAO,KAAA;IAAA,IAAGF,cAAc,GAAAE,KAAA,CAAdF,cAAc;IAAA,OACjB,CAACA,cAAc,IACfJ,GAAG,yCAIF;EAAA,EACJ;EACDO,KAAK,EAAEP,GAAG,qLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,gBAAgB,CAAC,EAKnC,UAAAS,KAAA;IAAA,IAAGJ,cAAc,GAAAI,KAAA,CAAdJ,cAAc;MAAEK,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IAAA,OAC3B,CAACL,cAAc,IACf,CAACK,QAAQ,IACTT,GAAG,qDAEUD,QAAQ,CAAC,gBAAgB,CAAC,CAGtC;EAAA,EACJ;EACDW,SAAS,EAAEV,GAAG,+LACID,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAKrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAY,KAAA;IAAA,IAAGP,cAAc,GAAAO,KAAA,CAAdP,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDU,QAAQ,EAAET,GAAG,+NACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAI9BA,QAAQ,CAAC,eAAe,CAAC,EAMrBA,QAAQ,CAAC,0BAA0B,CAAC,EASjD,UAAAa,KAAA;IAAA,IAAGR,cAAc,GAAAQ,KAAA,CAAdR,cAAc;IAAA,OACjBA,cAAc,IACdJ,GAAG,wFAGcD,QAAQ,CAAC,0BAA0B,CAAC,CAOpD;EAAA,EACJ;EACDc,KAAK,EAAEb,GAAG,wDACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC;AAGxC,CAAC"}

package/dist/esm/elements/Select/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/elements/Select/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Select/types.ts"],"sourcesContent":["export type State =\n  | \"default\"\n  | \"focus\"\n  | \"hover\"\n  | \"disabled\"\n  | \"error\"\n  | \"completed\"\n"],"mappings":""}

package/dist/esm/elements/SelectInput/SelectInput.js

@@ -0,0 +1,173 @@
+var _excluded = ["className", "enableSearch", "disabled", "dropdownValue", "error", "focus", "hover", "label", "inputValue", "onSelect", "options", "required", "selectWidth", "optionTextMinWidth"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import composeRefs from "@seznam/compose-react-refs";
+import { themeGet } from "@styled-system/theme-get";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { height as systemHeight } from "styled-system";
+import { useContainsFocus, usePosition, useWidthOf } from "../../utils";
+import { Box, splitBoxProps } from "../Box";
+import { Text } from "../Text";
+import { SELECT_INPUT_STATES } from "./tokens";
+import { RequiredField } from "../../shared/RequiredField";
+import { SelectInputList } from "./SelectInputList";
+import { caretMixin } from "../Select";
+import { Clickable } from "../Clickable";
+export var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var className = _ref.className,
+    enableSearch = _ref.enableSearch,
+    disabled = _ref.disabled,
+    dropdownValue = _ref.dropdownValue,
+    error = _ref.error,
+    focus = _ref.focus,
+    hover = _ref.hover,
+    label = _ref.label,
+    inputValue = _ref.inputValue,
+    onSelect = _ref.onSelect,
+    options = _ref.options,
+    required = _ref.required,
+    selectWidth = _ref.selectWidth,
+    optionTextMinWidth = _ref.optionTextMinWidth,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (options.length === 0) {
+    throw new Error("Palette SelectInput requires at least 1 option in the options prop");
+  }
+  var inputRef = useRef(null);
+  var containerRef = useRef(null);
+  var defaultOption = useMemo(function () {
+    return dropdownValue && options.find(function (option) {
+      return option.value === dropdownValue;
+    });
+  }, [dropdownValue, options]);
+  var _splitBoxProps = splitBoxProps(rest),
+    _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+    boxProps = _splitBoxProps2[0],
+    inputProps = _splitBoxProps2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(defaultOption || options[0]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedOption = _useState4[0],
+    setSelectedOption = _useState4[1];
+  var _usePosition = usePosition({
+      position: "bottom",
+      offset: 10,
+      active: open,
+      flip: false
+    }),
+    anchorRef = _usePosition.anchorRef,
+    tooltipRef = _usePosition.tooltipRef;
+  var _useWidthOf = useWidthOf({
+      ref: anchorRef
+    }),
+    width = _useWidthOf.width;
+  var inputName = inputProps.name || "palette-select-input";
+  var handleSelect = function handleSelect(option) {
+    var _inputRef$current;
+    setSelectedOption(option);
+    setOpen(false);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+  };
+  var handleFocusChange = useCallback(function (focused) {
+    if (focused || !open) return;
+    setOpen(false);
+  }, [open]);
+
+  // Handle closing the dropdown when clicking outside of the input
+  // or when focus leaves the input completely
+  var _useContainsFocus = useContainsFocus({
+      onChange: handleFocusChange
+    }),
+    containsFocusRef = _useContainsFocus.ref;
+  var handleClose = function handleClose() {
+    setOpen(false);
+  };
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: composeRefs(containerRef, containsFocusRef),
+    width: "100%",
+    className: className
+  }, boxProps), /*#__PURE__*/React.createElement(SelectInputContainer, {
+    ref: anchorRef,
+    open: open,
+    hover: hover,
+    focus: focus,
+    error: error,
+    disabled: disabled,
+    placeholder: inputProps.placeholder
+  }, /*#__PURE__*/React.createElement(SelectInputSelect, {
+    "data-testid": "country-picker",
+    disabled: disabled,
+    onClick: function onClick() {
+      setOpen(!disabled && !open);
+    },
+    width: selectWidth
+  }, selectedOption.text), /*#__PURE__*/React.createElement(SelectInputInput, _extends({
+    disabled: disabled,
+    ref: composeRefs(inputRef, forwardedRef),
+    required: required,
+    name: inputName,
+    maxLength: 25,
+    placeholder: inputProps.placeholder,
+    value: inputValue
+  }, inputProps)), /*#__PURE__*/React.createElement(SelectInputLabel, {
+    htmlFor: inputName
+  }, label)), open && /*#__PURE__*/React.createElement(SelectInputDropdown, {
+    ref: tooltipRef,
+    role: "listbox",
+    width: width
+  }, /*#__PURE__*/React.createElement(SelectInputList, {
+    options: options,
+    onSelect: handleSelect,
+    onClose: handleClose,
+    enableSearch: enableSearch,
+    optionTextMinWidth: optionTextMinWidth
+  })), required && !(error && typeof error === "string") && /*#__PURE__*/React.createElement(RequiredField, {
+    mt: 0.5,
+    ml: 1,
+    disabled: disabled
+  }), error && typeof error === "string" && /*#__PURE__*/React.createElement(Text, {
+    variant: "xs",
+    mt: 0.5,
+    mr: 1,
+    color: "red100",
+    textAlign: "right"
+  }, error));
+});
+SelectInput.displayName = "SelectInput";
+var SelectInputContainer = styled(Box).withConfig({
+  displayName: "SelectInput__SelectInputContainer",
+  componentId: "sc-dg0cg9-0"
+})(["position:relative;display:flex;flex-direction:row;", ""], function (props) {
+  return css(["", " ", " ", " ", " ", " &:hover{", "}&:focus-within{", " &:has(input:not(:placeholder-shown)){", " ", ";}}&:has(input:not(:placeholder-shown)){", " ", ";}"], SELECT_INPUT_STATES.default, props.hover && SELECT_INPUT_STATES.hover, (props.focus || props.open) && SELECT_INPUT_STATES.focus, props.disabled && SELECT_INPUT_STATES.disabled, props.error && SELECT_INPUT_STATES.error, !props.open && !props.disabled && SELECT_INPUT_STATES.hover, !props.disabled && SELECT_INPUT_STATES.focus, SELECT_INPUT_STATES.active, props.error && SELECT_INPUT_STATES.error, !!props.placeholder && SELECT_INPUT_STATES.completed, props.error && SELECT_INPUT_STATES.error);
+});
+var SelectInputSelect = styled(Clickable).withConfig({
+  displayName: "SelectInput__SelectInputSelect",
+  componentId: "sc-dg0cg9-1"
+})(["", " display:flex;align-items:center;position:relative;min-width:", "px;border:1px solid;border-right:0;padding:0 24px 0 ", ";font-family:", ";border-radius:3px 0 0 3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,border-color 0.25s;height:50px;font-size:", ";color:", ";&:focus{outline:none;text-decoration:underline;color:", ";}"], caretMixin, function (p) {
+  var _p$width;
+  return (_p$width = p.width) !== null && _p$width !== void 0 ? _p$width : 120;
+}, themeGet("space.1"), themeGet("fonts.sans"), themeGet("colors.mono30"), themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.blue100"));
+var SelectInputDropdown = styled(Box).withConfig({
+  displayName: "SelectInput__SelectInputDropdown",
+  componentId: "sc-dg0cg9-2"
+})(["box-shadow:", ";background:", ";z-index:1;padding:", ";"], themeGet("effects.dropShadow"), themeGet("colors.mono0"), themeGet("space.1"));
+var SelectInputInput = styled.input.withConfig({
+  displayName: "SelectInput__SelectInputInput",
+  componentId: "sc-dg0cg9-3"
+})(["width:100%;background-color:", ";padding:0 ", ";appearance:none;outline:none;line-height:1;border:1px solid;border-radius:0 3px 3px 0;transition:color 0.25s,border-color 0.25s;font-family:", ";font-size:", ";color:", ";border-color:", ";", " ::placeholder{color:", ";transition:color 0.25s;}"], themeGet("colors.mono0"), themeGet("space.1"), themeGet("fonts.sans"), themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), systemHeight, themeGet("colors.mono60"));
+var SelectInputLabel = styled.label.withConfig({
+  displayName: "SelectInput__SelectInputLabel",
+  componentId: "sc-dg0cg9-4"
+})(["position:absolute;top:0;left:5px;padding:0 5px;background-color:transparent;transform:translateY(-50%);transition:color 0.25s;font-family:", ";pointer-events:none;font-size:", ";color:", ";&::after{content:\"\";display:block;position:absolute;top:50%;left:0;height:2px;width:100%;background-color:", ";z-index:-1;}"], themeGet("fonts.sans"), themeGet("textVariants.xs.fontSize"), themeGet("colors.mono60"), themeGet("colors.mono0"));
+//# sourceMappingURL=SelectInput.js.map

package/dist/esm/elements/SelectInput/SelectInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.js","names":["composeRefs","themeGet","React","useCallback","useMemo","useRef","useState","styled","css","height","systemHeight","useContainsFocus","usePosition","useWidthOf","Box","splitBoxProps","Text","SELECT_INPUT_STATES","RequiredField","SelectInputList","caretMixin","Clickable","SelectInput","forwardRef","_ref","forwardedRef","className","enableSearch","disabled","dropdownValue","error","focus","hover","label","inputValue","onSelect","options","required","selectWidth","optionTextMinWidth","rest","_objectWithoutProperties","_excluded","length","Error","inputRef","containerRef","defaultOption","find","option","value","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_useState","_useState2","open","setOpen","_useState3","_useState4","selectedOption","setSelectedOption","_usePosition","position","offset","active","flip","anchorRef","tooltipRef","_useWidthOf","ref","width","inputName","name","handleSelect","_inputRef$current","current","handleFocusChange","focused","_useContainsFocus","onChange","containsFocusRef","handleClose","createElement","_extends","SelectInputContainer","placeholder","SelectInputSelect","onClick","text","SelectInputInput","maxLength","SelectInputLabel","htmlFor","SelectInputDropdown","role","onClose","mt","ml","variant","mr","color","textAlign","displayName","withConfig","componentId","props","default","completed","p","_p$width","input"],"sources":["../../../../src/elements/SelectInput/SelectInput.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { useContainsFocus, usePosition, useWidthOf } from \"../../utils\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { InputProps } from \"../Input\"\nimport { Text, TextProps } from \"../Text\"\nimport { SELECT_INPUT_STATES } from \"./tokens\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Option, SelectInputList } from \"./SelectInputList\"\nimport { caretMixin } from \"../Select\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\nexport interface SelectInputProps extends Omit<InputProps, \"onSelect\"> {\n  active?: boolean\n  enableSearch?: boolean\n  disabled?: boolean\n  dropdownValue?: string\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  inputValue?: string\n  label: string\n  onSelect: (option: Option) => void\n  options: Option[]\n  required?: boolean\n  /** Controls the width of the left hand select dropdown UI */\n  selectWidth?: ClickableProps[\"width\"]\n  /** Controls the gap between the text and name labels in select options */\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInput = React.forwardRef<HTMLInputElement, SelectInputProps>(\n  (\n    {\n      className,\n      enableSearch,\n      disabled,\n      dropdownValue,\n      error,\n      focus,\n      hover,\n      label,\n      inputValue,\n      onSelect,\n      options,\n      required,\n      selectWidth,\n      optionTextMinWidth,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    if (options.length === 0) {\n      throw new Error(\n        \"Palette SelectInput requires at least 1 option in the options prop\"\n      )\n    }\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const containerRef = useRef<HTMLDivElement | null>(null)\n\n    const defaultOption = useMemo(\n      () =>\n        dropdownValue &&\n        options.find((option) => option.value === dropdownValue),\n      [dropdownValue, options]\n    )\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [open, setOpen] = useState(false)\n    const [selectedOption, setSelectedOption] = useState(\n      defaultOption || options[0]\n    )\n\n    const { anchorRef, tooltipRef } = usePosition({\n      position: \"bottom\",\n      offset: 10,\n      active: open,\n      flip: false,\n    })\n\n    const { width } = useWidthOf({ ref: anchorRef })\n\n    const inputName = inputProps.name || \"palette-select-input\"\n\n    const handleSelect = (option: Option) => {\n      setSelectedOption(option)\n      setOpen(false)\n      inputRef.current?.focus()\n      onSelect?.(option)\n    }\n\n    const handleFocusChange = useCallback(\n      (focused: boolean) => {\n        if (focused || !open) return\n        setOpen(false)\n      },\n      [open]\n    )\n\n    // Handle closing the dropdown when clicking outside of the input\n    // or when focus leaves the input completely\n    const { ref: containsFocusRef } = useContainsFocus({\n      onChange: handleFocusChange,\n    })\n\n    const handleClose = () => {\n      setOpen(false)\n    }\n\n    return (\n      <Box\n        ref={composeRefs(containerRef, containsFocusRef) as any}\n        width=\"100%\"\n        className={className}\n        {...boxProps}\n      >\n        <SelectInputContainer\n          ref={anchorRef as any}\n          open={open}\n          hover={hover}\n          focus={focus}\n          error={error}\n          disabled={disabled}\n          placeholder={inputProps.placeholder}\n        >\n          <SelectInputSelect\n            data-testid=\"country-picker\"\n            disabled={disabled}\n            onClick={() => {\n              setOpen(!disabled && !open)\n            }}\n            width={selectWidth}\n          >\n            {selectedOption.text}\n          </SelectInputSelect>\n\n          <SelectInputInput\n            disabled={disabled}\n            ref={composeRefs(inputRef, forwardedRef)}\n            required={required}\n            name={inputName}\n            maxLength={25}\n            placeholder={inputProps.placeholder}\n            value={inputValue}\n            {...inputProps}\n          />\n\n          <SelectInputLabel htmlFor={inputName}>{label}</SelectInputLabel>\n        </SelectInputContainer>\n\n        {open && (\n          <SelectInputDropdown\n            ref={tooltipRef as any}\n            role=\"listbox\"\n            width={width}\n          >\n            <SelectInputList\n              options={options}\n              onSelect={handleSelect}\n              onClose={handleClose}\n              enableSearch={enableSearch}\n              optionTextMinWidth={optionTextMinWidth}\n            />\n          </SelectInputDropdown>\n        )}\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} mr={1} color=\"red100\" textAlign=\"right\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelectInput.displayName = \"SelectInput\"\n\ntype ContainerProps = Pick<\n  SelectInputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"placeholder\"\n> & { open: boolean }\n\nconst SelectInputContainer = styled(Box)<ContainerProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) => {\n    return css`\n      ${SELECT_INPUT_STATES.default}\n      ${props.hover && SELECT_INPUT_STATES.hover}\n      ${(props.focus || props.open) && SELECT_INPUT_STATES.focus}\n      ${props.disabled && SELECT_INPUT_STATES.disabled}\n      ${props.error && SELECT_INPUT_STATES.error}\n\n      &:hover {\n        /* Applies hover style if the dropdown is not visible or the input is disabled */\n        ${!props.open && !props.disabled && SELECT_INPUT_STATES.hover}\n      }\n\n      &:focus-within {\n        ${!props.disabled && SELECT_INPUT_STATES.focus}\n\n        &:has(input:not(:placeholder-shown)) {\n          ${SELECT_INPUT_STATES.active}\n          ${props.error && SELECT_INPUT_STATES.error};\n        }\n      }\n\n      &:has(input:not(:placeholder-shown)) {\n        ${!!props.placeholder && SELECT_INPUT_STATES.completed}\n        ${props.error && SELECT_INPUT_STATES.error};\n      }\n    `\n  }}\n`\n\nconst SelectInputSelect = styled(Clickable)<{ disabled?: boolean }>`\n  ${caretMixin}\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-width: ${(p) => p.width ?? 120}px;\n  border: 1px solid;\n  border-right: 0;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 0 24px 0 ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border-radius: 3px 0 0 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, border-color 0.25s;\n  height: 50px;\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  &:focus {\n    outline: none;\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  }\n`\n\nconst SelectInputDropdown = styled(Box)`\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  background: ${themeGet(\"colors.mono0\")};\n  z-index: 1;\n  padding: ${themeGet(\"space.1\")};\n`\n\nconst SelectInputInput = styled.input`\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  outline: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 0 3px 3px 0;\n  transition: color 0.25s, border-color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  border-color: ${themeGet(\"colors.mono30\")};\n  ${systemHeight}\n\n  ::placeholder {\n    color: ${themeGet(\"colors.mono60\")};\n    transition: color 0.25s;\n  }\n`\n\nconst SelectInputLabel = styled.label`\n  position: absolute;\n  top: 0;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n  font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n  color: ${themeGet(\"colors.mono60\")};\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    height: 2px;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono0\")};\n    z-index: -1;\n  }\n`\n"],"mappings":"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"}