@wireapp/react-ui-kit 8.9.0 → 8.10.0

package/src/Form/Select.js

@@ -2,289 +2,53 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Select = exports.selectStyle = void 0;
+exports.Select = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = require("@emotion/react");
 
-var _util = require("../util");
-
-var _Input = require("./Input");
-
-var _react2 = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
-var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+var _reactSelect = _interopRequireDefault(require("react-select"));
 
-var _excluded = ["disabled", "markInvalid"],
-    _excluded2 = ["id", "label", "error", "helperText", "options", "value", "onChange", "required", "markInvalid", "dataUieName", "wrapperCSS"];
+var _SelectStyles = require("./SelectStyles");
 
-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); }
+var _SelectComponents = require("./SelectComponents");
 
-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; }
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
-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)."; }
+var _excluded = ["id", "label", "error", "helperText", "dataUieName", "options", "wrapperCSS", "markInvalid", "required", "isMulti"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var ArrowDown = (0, _react.jsx)("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16"
-}, (0, _react.jsx)("path", {
-  d: "M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z"
-}));
-
-var selectStyle = function selectStyle(theme, _ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      markInvalid = _ref.markInvalid,
+var Select = function Select(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      error = _ref.error,
+      helperText = _ref.helperText,
+      dataUieName = _ref.dataUieName,
+      options = _ref.options,
+      _ref$wrapperCSS = _ref.wrapperCSS,
+      wrapperCSS = _ref$wrapperCSS === void 0 ? {} : _ref$wrapperCSS,
+      _ref$markInvalid = _ref.markInvalid,
+      markInvalid = _ref$markInvalid === void 0 ? false : _ref$markInvalid,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$isMulti = _ref.isMulti,
+      isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var error = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  return _objectSpread(_objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, props)), {}, {
-    '&:-moz-focusring': {
-      color: 'transparent',
-      textShadow: '0 0 0 #000'
-    },
-    '&:disabled': {
-      color: theme.Select.disabledColor
-    },
-    appearance: 'none',
-    boxShadow: markInvalid ? "0 0 0 1px ".concat(theme.general.dangerColor) : "0 0 0 1px ".concat(theme.Select.borderColor),
-    cursor: disabled ? 'normal' : 'pointer',
-    fontSize: '16px',
-    fontWeight: 300,
-    paddingRight: '30px',
-    textAlign: 'left',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    marginBottom: error && '8px',
-    '&:invalid, option:first-of-type': {
-      color: theme.general.dangerColor
-    }
-  }, !disabled && {
-    '&:hover': {
-      boxShadow: "0 0 0 1px ".concat(theme.Select.borderColor)
-    },
-    '&:focus, &:active': {
-      boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
-    }
-  }), {}, {
-    '& > svg': {
-      fill: disabled ? theme.Input.placeholderColor : theme.general.color,
-      position: 'absolute',
-      top: '1rem',
-      right: '1rem'
-    }
-  });
-};
-
-exports.selectStyle = selectStyle;
-
-var dropdownStyles = function dropdownStyles(theme, isDropdownOpen) {
-  return {
-    height: isDropdownOpen ? 'auto' : 0,
-    visibility: isDropdownOpen ? 'visible' : 'hidden',
-    margin: '3px 0 0',
-    padding: 0,
-    borderRadius: '10px',
-    border: "1px solid ".concat(theme.general.primaryColor),
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    width: '100%',
-    maxHeight: '240px',
-    overflowY: 'auto',
-    zIndex: 9
-  };
-};
-
-var dropdownOptionStyles = function dropdownOptionStyles(theme, isSelected) {
-  return {
-    background: isSelected ? theme.general.primaryColor : theme.general.backgroundColor,
-    listStyle: 'none',
-    padding: '10px 20px 14px',
-    cursor: 'pointer',
-    fontSize: '16px',
-    fontWeight: 300,
-    lineHeight: '24px',
-    letterSpacing: '0.05px',
-    color: isSelected ? theme.Select.contrastTextColor : theme.general.color,
-    '&:first-of-type': {
-      borderRadius: '10px 10px 0 0'
-    },
-    '&:last-of-type': {
-      borderRadius: '0 0 10px 10px'
-    },
-    '&:not(:last-of-type)': {
-      borderBottom: "1px solid ".concat(theme.Select.borderColor)
-    },
-    '&:not(:first-of-type)': {
-      borderTop: "1px solid ".concat(theme.Select.borderColor)
-    },
-    '&:hover, &:active, &:focus': {
-      background: theme.general.primaryColor,
-      borderColor: theme.general.primaryColor,
-      color: theme.Select.contrastTextColor
-    }
-  };
-};
-
-var filterSelectProps = function filterSelectProps(props) {
-  return (0, _util.filterProps)(props, ['markInvalid']);
-};
-
-var placeholderText = '- Please select -';
-
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
-} : {
-  name: "tvi1yf-Select",
-  styles: "position:relative;label:Select;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa1JXIiwiZmlsZSI6IlNlbGVjdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDE4IFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge0NTU09iamVjdCwganN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7ZmlsdGVyUHJvcHN9IGZyb20gJy4uL3V0aWwnO1xuaW1wb3J0IHtpbnB1dFN0eWxlfSBmcm9tICcuL0lucHV0JztcbmltcG9ydCBSZWFjdCwge1JlYWN0RWxlbWVudCwgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICcuL0lucHV0TGFiZWwnO1xuXG5leHBvcnQgdHlwZSBTZWxlY3RPcHRpb24gPSB7XG4gIHZhbHVlOiBzdHJpbmcgfCBudW1iZXI7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBTZWxlY3RQcm9wczxUIGV4dGVuZHMgU2VsZWN0T3B0aW9uID0gU2VsZWN0T3B0aW9uPiB7XG4gIGlkOiBzdHJpbmc7XG4gIG9uQ2hhbmdlOiAoc2VsZWN0ZWRPcHRpb246IFRbJ3ZhbHVlJ10pID0+IHZvaWQ7XG4gIGRhdGFVaWVOYW1lOiBzdHJpbmc7XG4gIG9wdGlvbnM6IFRbXTtcbiAgdmFsdWU/OiBUIHwgbnVsbDtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGVycm9yPzogUmVhY3RFbGVtZW50O1xuICB3cmFwcGVyQ1NTPzogQ1NTT2JqZWN0O1xufVxuXG5jb25zdCBBcnJvd0Rvd24gPSAoXG4gIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICA8cGF0aCBkPVwiTTcuOTk5NjMgMTIuNTcxMUwxNS42NTY1IDQuOTE0MjFMMTQuMjQyMyAzLjVMNy45OTk2MyA5Ljc0MjY0TDEuNzU2OTkgMy41TDAuMzQyNzczIDQuOTE0MjFMNy45OTk2MyAxMi41NzExWlwiIC8+XG4gIDwvc3ZnPlxuKTtcblxuZXhwb3J0IGNvbnN0IHNlbGVjdFN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wcywgZXJyb3I/OiBib29sZWFuKSA9PiBDU1NPYmplY3QgPSAoXG4gIHRoZW1lLFxuICB7ZGlzYWJsZWQgPSBmYWxzZSwgbWFya0ludmFsaWQsIC4uLnByb3BzfSxcbiAgZXJyb3IgPSBmYWxzZSxcbikgPT4gKHtcbiAgLi4uaW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMpLFxuICAnJjotbW96LWZvY3VzcmluZyc6IHtcbiAgICBjb2xvcjogJ3RyYW5zcGFyZW50JyxcbiAgICB0ZXh0U2hhZG93OiAnMCAwIDAgIzAwMCcsXG4gIH0sXG4gICcmOmRpc2FibGVkJzoge1xuICAgIGNvbG9yOiB0aGVtZS5TZWxlY3QuZGlzYWJsZWRDb2xvcixcbiAgfSxcbiAgYXBwZWFyYW5jZTogJ25vbmUnLFxuICBib3hTaGFkb3c6IG1hcmtJbnZhbGlkID8gYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwuZGFuZ2VyQ29sb3J9YCA6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgY3Vyc29yOiBkaXNhYmxlZCA/ICdub3JtYWwnIDogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIHBhZGRpbmdSaWdodDogJzMwcHgnLFxuICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgdGV4dE92ZXJmbG93OiAnZWxsaXBzaXMnLFxuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICBtYXJnaW5Cb3R0b206IGVycm9yICYmICc4cHgnLFxuICAnJjppbnZhbGlkLCBvcHRpb246Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBjb2xvcjogdGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcixcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXInOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICB9LFxuICAgICcmOmZvY3VzLCAmOmFjdGl2ZSc6IHtcbiAgICAgIGJveFNoYWRvdzogYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gICcmID4gc3ZnJzoge1xuICAgIGZpbGw6IGRpc2FibGVkID8gdGhlbWUuSW5wdXQucGxhY2Vob2xkZXJDb2xvciA6IHRoZW1lLmdlbmVyYWwuY29sb3IsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAnMXJlbScsXG4gICAgcmlnaHQ6ICcxcmVtJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBkcm9wZG93blN0eWxlcyA9ICh0aGVtZTogVGhlbWUsIGlzRHJvcGRvd25PcGVuOiBib29sZWFuKTogQ1NTT2JqZWN0ID0+ICh7XG4gIGhlaWdodDogaXNEcm9wZG93bk9wZW4gPyAnYXV0bycgOiAwLFxuICB2aXNpYmlsaXR5OiBpc0Ryb3Bkb3duT3BlbiA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICBtYXJnaW46ICczcHggMCAwJyxcbiAgcGFkZGluZzogMCxcbiAgYm9yZGVyUmFkaXVzOiAnMTBweCcsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB0b3A6ICcxMDAlJyxcbiAgbGVmdDogMCxcbiAgd2lkdGg6ICcxMDAlJyxcbiAgbWF4SGVpZ2h0OiAnMjQwcHgnLFxuICBvdmVyZmxvd1k6ICdhdXRvJyxcbiAgekluZGV4OiA5LFxufSk7XG5cbmNvbnN0IGRyb3Bkb3duT3B0aW9uU3R5bGVzID0gKHRoZW1lOiBUaGVtZSwgaXNTZWxlY3RlZDogYm9vbGVhbik6IENTU09iamVjdCA9PiAoe1xuICBiYWNrZ3JvdW5kOiBpc1NlbGVjdGVkID8gdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IgOiB0aGVtZS5nZW5lcmFsLmJhY2tncm91bmRDb2xvcixcbiAgbGlzdFN0eWxlOiAnbm9uZScsXG4gIHBhZGRpbmc6ICcxMHB4IDIwcHggMTRweCcsXG4gIGN1cnNvcjogJ3BvaW50ZXInLFxuICBmb250U2l6ZTogJzE2cHgnLFxuICBmb250V2VpZ2h0OiAzMDAsXG4gIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgbGV0dGVyU3BhY2luZzogJzAuMDVweCcsXG4gIGNvbG9yOiBpc1NlbGVjdGVkID8gdGhlbWUuU2VsZWN0LmNvbnRyYXN0VGV4dENvbG9yIDogdGhlbWUuZ2VuZXJhbC5jb2xvcixcbiAgJyY6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcxMHB4IDEwcHggMCAwJyxcbiAgfSxcbiAgJyY6bGFzdC1vZi10eXBlJzoge1xuICAgIGJvcmRlclJhZGl1czogJzAgMCAxMHB4IDEwcHgnLFxuICB9LFxuICAnJjpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyQm90dG9tOiBgMXB4IHNvbGlkICR7dGhlbWUuU2VsZWN0LmJvcmRlckNvbG9yfWAsXG4gIH0sXG4gICcmOm5vdCg6Zmlyc3Qtb2YtdHlwZSknOiB7XG4gICAgYm9yZGVyVG9wOiBgMXB4IHNvbGlkICR7dGhlbWUuU2VsZWN0LmJvcmRlckNvbG9yfWAsXG4gIH0sXG4gICcmOmhvdmVyLCAmOmFjdGl2ZSwgJjpmb2N1cyc6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICBib3JkZXJDb2xvcjogdGhlbWUuZ2VuZXJhbC5wcmltYXJ5Q29sb3IsXG4gICAgY29sb3I6IHRoZW1lLlNlbGVjdC5jb250cmFzdFRleHRDb2xvcixcbiAgfSxcbn0pO1xuXG5jb25zdCBmaWx0ZXJTZWxlY3RQcm9wcyA9IHByb3BzID0+IGZpbHRlclByb3BzKHByb3BzLCBbJ21hcmtJbnZhbGlkJ10pO1xuXG5jb25zdCBwbGFjZWhvbGRlclRleHQgPSAnLSBQbGVhc2Ugc2VsZWN0IC0nO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gPFQgZXh0ZW5kcyBTZWxlY3RPcHRpb24gPSBTZWxlY3RPcHRpb24+KHtcbiAgaWQsXG4gIGxhYmVsLFxuICBlcnJvcixcbiAgaGVscGVyVGV4dCxcbiAgb3B0aW9ucyA9IFtdLFxuICB2YWx1ZSA9IG51bGwsXG4gIG9uQ2hhbmdlLFxuICByZXF1aXJlZCxcbiAgbWFya0ludmFsaWQsXG4gIGRhdGFVaWVOYW1lLFxuICB3cmFwcGVyQ1NTID0ge30sXG4gIC4uLnByb3BzXG59OiBTZWxlY3RQcm9wczxUPikgPT4ge1xuICBjb25zdCBjdXJyZW50T3B0aW9uSWR4ID0gb3B0aW9ucy5maW5kSW5kZXgob3B0aW9uID0+IG9wdGlvbi52YWx1ZSA9PT0gdmFsdWU/LnZhbHVlKTtcbiAgY29uc3Qgc2VsZWN0ZWRPcHRpb24gPSBjdXJyZW50T3B0aW9uSWR4ID09PSAtMSA/IG51bGwgOiBjdXJyZW50T3B0aW9uSWR4O1xuXG4gIGNvbnN0IHNlbGVjdENvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGxpc3RSZWYgPSB1c2VSZWY8SFRNTFVMaXN0RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc0Ryb3Bkb3duT3Blbiwgc2V0SXNEcm9wZG93bk9wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhhc1NlbGVjdGVkT3B0aW9uID0gc2VsZWN0ZWRPcHRpb24gIT09IG51bGw7XG4gIGNvbnN0IGhhc0Vycm9yID0gISFlcnJvcjtcblxuICBjb25zdCBzY3JvbGxUb0N1cnJlbnRPcHRpb24gPSAoaWR4OiBudW1iZXIpID0+IHtcbiAgICBpZiAobGlzdFJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCBsaXN0U2VsZWN0ZWRPcHRpb24gPSBsaXN0UmVmLmN1cnJlbnQuY2hpbGRyZW5baWR4XSBhcyBIVE1MTElFbGVtZW50O1xuICAgICAgY29uc3QgZ2V0WVBvc2l0aW9uID0gbGlzdFNlbGVjdGVkT3B0aW9uICYmIGxpc3RTZWxlY3RlZE9wdGlvbi5vZmZzZXRUb3A7XG5cbiAgICAgIGxpc3RSZWYuY3VycmVudC5zY3JvbGwoe1xuICAgICAgICB0b3A6IGdldFlQb3NpdGlvbiA/PyAwLFxuICAgICAgICBiZWhhdmlvcjogJ3Ntb290aCcsXG4gICAgICB9KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgb25Ub2dnbGVEcm9wZG93biA9ICgpID0+IHNldElzRHJvcGRvd25PcGVuKHByZXZTdGF0ZSA9PiAhcHJldlN0YXRlKTtcblxuICBjb25zdCBvbk9wdGlvblNlbGVjdCA9IChpZHg6IG51bWJlcikgPT4ge1xuICAgIG9uQ2hhbmdlKG9wdGlvbnNbaWR4XS52YWx1ZSk7XG4gICAgc2Nyb2xsVG9DdXJyZW50T3B0aW9uKGlkeCk7XG4gIH07XG5cbiAgY29uc3Qgb25PcHRpb25DaGFuZ2UgPSAoaWR4OiBudW1iZXIpID0+IHtcbiAgICBvbk9wdGlvblNlbGVjdChpZHgpO1xuICAgIHNldElzRHJvcGRvd25PcGVuKGZhbHNlKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVMaXN0S2V5RG93biA9IGUgPT4ge1xuICAgIHN3aXRjaCAoZS5rZXkpIHtcbiAgICAgIGNhc2UgJ0VzY2FwZSc6XG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ0Fycm93VXAnOlxuICAgICAgY2FzZSAnQXJyb3dMZWZ0JzpcbiAgICAgICAgaWYgKCFpc0Ryb3Bkb3duT3Blbikge1xuICAgICAgICAgIHNldElzRHJvcGRvd25PcGVuKHRydWUpO1xuICAgICAgICB9XG5cbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBvbk9wdGlvblNlbGVjdChzZWxlY3RlZE9wdGlvbiAtIDEgPj0gMCA/IHNlbGVjdGVkT3B0aW9uIC0gMSA6IG9wdGlvbnMubGVuZ3RoIC0gMSk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnQXJyb3dEb3duJzpcbiAgICAgIGNhc2UgJ0Fycm93UmlnaHQnOlxuICAgICAgICBpZiAoIWlzRHJvcGRvd25PcGVuKSB7XG4gICAgICAgICAgc2V0SXNEcm9wZG93bk9wZW4odHJ1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGlmIChzZWxlY3RlZE9wdGlvbiA9PT0gbnVsbCkge1xuICAgICAgICAgIG9uT3B0aW9uU2VsZWN0KDApO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIG9uT3B0aW9uU2VsZWN0KHNlbGVjdGVkT3B0aW9uID09PSBvcHRpb25zLmxlbmd0aCAtIDEgPyAwIDogc2VsZWN0ZWRPcHRpb24gKyAxKTtcbiAgICAgICAgfVxuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlEb3duID0gaW5kZXggPT4gZSA9PiB7XG4gICAgc3dpdGNoIChlLmtleSkge1xuICAgICAgY2FzZSAnICc6XG4gICAgICBjYXNlICdTcGFjZUJhcic6XG4gICAgICBjYXNlICdFbnRlcic6XG4gICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgb25PcHRpb25DaGFuZ2UoaW5kZXgpO1xuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVPdXRzaWRlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICBpZiAoc2VsZWN0Q29udGFpbmVyUmVmLmN1cnJlbnQgJiYgIXNlbGVjdENvbnRhaW5lclJlZi5jdXJyZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSkge1xuICAgICAgc2V0SXNEcm9wZG93bk9wZW4oZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZU91dHNpZGVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlT3V0c2lkZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgIG1hcmdpbkJvdHRvbTogbWFya0ludmFsaWQgPyAnMnB4JyA6ICcyMHB4JyxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgJyY6Zm9jdXMtd2l0aGluIGxhYmVsJzoge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcixcbiAgICAgICAgfSxcbiAgICAgICAgLi4ud3JhcHBlckNTUyxcbiAgICAgIH0pfVxuICAgICAgZGF0YS11aWUtbmFtZT17ZGF0YVVpZU5hbWV9XG4gICAgICByZWY9e3NlbGVjdENvbnRhaW5lclJlZn1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtpZH0gaXNSZXF1aXJlZD17cmVxdWlyZWR9IG1hcmtJbnZhbGlkPXttYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e3Bvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICBhcmlhLWFjdGl2ZWRlc2NlbmRhbnQ9e2hhc1NlbGVjdGVkT3B0aW9uID8gdmFsdWUubGFiZWwgOiAnJ31cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtpc0Ryb3Bkb3duT3Blbn1cbiAgICAgICAgICBhcmlhLWhhc3BvcHVwPVwibGlzdGJveFwiXG4gICAgICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtpZH1cbiAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgb25DbGljaz17b25Ub2dnbGVEcm9wZG93bn1cbiAgICAgICAgICBvbktleURvd249e2hhbmRsZUxpc3RLZXlEb3dufVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gc2VsZWN0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgey4uLmZpbHRlclNlbGVjdFByb3BzKHByb3BzKX1cbiAgICAgICAgICBkYXRhLXVpZS1uYW1lPXtkYXRhVWllTmFtZX1cbiAgICAgICAgICB7Li4uKGhhc1NlbGVjdGVkT3B0aW9uICYmIHtcbiAgICAgICAgICAgICdkYXRhLXZhbHVlJzogdmFsdWUudmFsdWUsXG4gICAgICAgICAgfSl9XG4gICAgICAgID5cbiAgICAgICAgICB7aGFzU2VsZWN0ZWRPcHRpb24gPyB2YWx1ZS5sYWJlbCA6IHBsYWNlaG9sZGVyVGV4dH1cbiAgICAgICAgICB7QXJyb3dEb3dufVxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8dWxcbiAgICAgICAgICByZWY9e2xpc3RSZWZ9XG4gICAgICAgICAgcm9sZT1cImxpc3Rib3hcIlxuICAgICAgICAgIGFyaWEtbGFiZWxsZWRieT17aWR9XG4gICAgICAgICAgdGFiSW5kZXg9ey0xfVxuICAgICAgICAgIG9uS2V5RG93bj17aGFuZGxlTGlzdEtleURvd259XG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93blN0eWxlcyh0aGVtZSwgaXNEcm9wZG93bk9wZW4pfVxuICAgICAgICAgIHsuLi4oZGF0YVVpZU5hbWUgJiYge1xuICAgICAgICAgICAgJ2RhdGEtdWllLW5hbWUnOiBgZHJvcGRvd24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBpc1NlbGVjdGVkID0gY3VycmVudE9wdGlvbklkeCA9PSBpbmRleDtcblxuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPGxpXG4gICAgICAgICAgICAgICAga2V5PXtvcHRpb24udmFsdWV9XG4gICAgICAgICAgICAgICAgaWQ9e29wdGlvbi52YWx1ZS50b1N0cmluZygpfVxuICAgICAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxuICAgICAgICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9ezB9XG4gICAgICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlEb3duKGluZGV4KX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBvbk9wdGlvbkNoYW5nZShpbmRleCl9XG4gICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBkcm9wZG93bk9wdGlvblN0eWxlcyh0aGVtZSwgaXNTZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgey4uLihkYXRhVWllTmFtZSAmJiB7XG4gICAgICAgICAgICAgICAgICAnZGF0YS11aWUtbmFtZSc6IGBvcHRpb24tJHtkYXRhVWllTmFtZX1gLFxuICAgICAgICAgICAgICAgICAgJ2RhdGEtdWllLXZhbHVlJzogb3B0aW9uLnZhbHVlLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge29wdGlvbi5sYWJlbH1cblxuICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgPHBcbiAgICAgICAgICAgICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbkJvdHRvbTogMCxcbiAgICAgICAgICAgICAgICAgICAgICBmb250U2l6ZTogJzE0cHgnLFxuICAgICAgICAgICAgICAgICAgICAgIGNvbG9yOiBpc1NlbGVjdGVkID8gdGhlbWUuZ2VuZXJhbC5jb2xvciA6IHRoZW1lLklucHV0LmxhYmVsQ29sb3IsXG4gICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7b3B0aW9uLmRlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L3VsPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtmb250U2l6ZTogJzEycHgnLCBmb250V2VpZ2h0OiA0MDAsIGNvbG9yOiB0aGVtZS5JbnB1dC5sYWJlbENvbG9yLCBtYXJnaW5Ub3A6IDh9KX0+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var Select = function Select(_ref2) {
-  var id = _ref2.id,
-      label = _ref2.label,
-      error = _ref2.error,
-      helperText = _ref2.helperText,
-      _ref2$options = _ref2.options,
-      options = _ref2$options === void 0 ? [] : _ref2$options,
-      _ref2$value = _ref2.value,
-      value = _ref2$value === void 0 ? null : _ref2$value,
-      onChange = _ref2.onChange,
-      required = _ref2.required,
-      markInvalid = _ref2.markInvalid,
-      dataUieName = _ref2.dataUieName,
-      _ref2$wrapperCSS = _ref2.wrapperCSS,
-      wrapperCSS = _ref2$wrapperCSS === void 0 ? {} : _ref2$wrapperCSS,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var currentOptionIdx = options.findIndex(function (option) {
-    return option.value === (value === null || value === void 0 ? void 0 : value.value);
-  });
-  var selectedOption = currentOptionIdx === -1 ? null : currentOptionIdx;
-  var selectContainerRef = (0, _react2.useRef)(null);
-  var listRef = (0, _react2.useRef)(null);
-
-  var _useState = (0, _react2.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isDropdownOpen = _useState2[0],
-      setIsDropdownOpen = _useState2[1];
-
-  var hasSelectedOption = selectedOption !== null;
+  var theme = (0, _react.useTheme)();
   var hasError = !!error;
-
-  var scrollToCurrentOption = function scrollToCurrentOption(idx) {
-    if (listRef.current) {
-      var listSelectedOption = listRef.current.children[idx];
-      var getYPosition = listSelectedOption && listSelectedOption.offsetTop;
-      listRef.current.scroll({
-        top: getYPosition !== null && getYPosition !== void 0 ? getYPosition : 0,
-        behavior: 'smooth'
-      });
-    }
-  };
-
-  var onToggleDropdown = function onToggleDropdown() {
-    return setIsDropdownOpen(function (prevState) {
-      return !prevState;
-    });
-  };
-
-  var onOptionSelect = function onOptionSelect(idx) {
-    onChange(options[idx].value);
-    scrollToCurrentOption(idx);
-  };
-
-  var onOptionChange = function onOptionChange(idx) {
-    onOptionSelect(idx);
-    setIsDropdownOpen(false);
-  };
-
-  var handleListKeyDown = function handleListKeyDown(e) {
-    switch (e.key) {
-      case 'Escape':
-        e.preventDefault();
-        setIsDropdownOpen(false);
-        break;
-
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        if (!isDropdownOpen) {
-          setIsDropdownOpen(true);
-        }
-
-        e.preventDefault();
-        onOptionSelect(selectedOption - 1 >= 0 ? selectedOption - 1 : options.length - 1);
-        break;
-
-      case 'ArrowDown':
-      case 'ArrowRight':
-        if (!isDropdownOpen) {
-          setIsDropdownOpen(true);
-        }
-
-        e.preventDefault();
-
-        if (selectedOption === null) {
-          onOptionSelect(0);
-        } else {
-          onOptionSelect(selectedOption === options.length - 1 ? 0 : selectedOption + 1);
-        }
-
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  var handleKeyDown = function handleKeyDown(index) {
-    return function (e) {
-      switch (e.key) {
-        case ' ':
-        case 'SpaceBar':
-        case 'Enter':
-          e.preventDefault();
-          onOptionChange(index);
-          break;
-
-        default:
-          break;
-      }
-    };
-  };
-
-  var handleOutsideClick = function handleOutsideClick(event) {
-    if (selectContainerRef.current && !selectContainerRef.current.contains(event.target)) {
-      setIsDropdownOpen(false);
-    }
-  };
-
-  (0, _react2.useEffect)(function () {
-    window.addEventListener('click', handleOutsideClick);
-    return function () {
-      window.removeEventListener('click', handleOutsideClick);
-    };
-  }, []);
   return (0, _react.jsx)("div", {
     css: function css(theme) {
       return _objectSpread({
@@ -295,69 +59,28 @@ var Select = function Select(_ref2) {
         }
       }, wrapperCSS);
     },
-    "data-uie-name": dataUieName,
-    ref: selectContainerRef
+    "data-uie-name": dataUieName
   }, label && (0, _react.jsx)(_InputLabel["default"], {
     htmlFor: id,
-    isRequired: required,
-    markInvalid: markInvalid
-  }, label), (0, _react.jsx)("div", {
-    css: _ref3
-  }, (0, _react.jsx)("button", (0, _extends2["default"])({
-    type: "button",
-    "aria-activedescendant": hasSelectedOption ? value.label : '',
-    "aria-expanded": isDropdownOpen,
-    "aria-haspopup": "listbox",
-    "aria-labelledby": id,
+    markInvalid: markInvalid,
+    isRequired: required
+  }, label), (0, _react.jsx)(_reactSelect["default"], (0, _extends2["default"])({
     id: id,
-    onClick: onToggleDropdown,
-    onKeyDown: handleListKeyDown,
-    css: function css(theme) {
-      return selectStyle(theme, props, hasError);
-    }
-  }, filterSelectProps(props), {
-    "data-uie-name": dataUieName
-  }, hasSelectedOption && {
-    'data-value': value.value
-  }), hasSelectedOption ? value.label : placeholderText, ArrowDown), (0, _react.jsx)("ul", (0, _extends2["default"])({
-    ref: listRef,
-    role: "listbox",
-    "aria-labelledby": id,
-    tabIndex: -1,
-    onKeyDown: handleListKeyDown,
-    css: function css(theme) {
-      return dropdownStyles(theme, isDropdownOpen);
-    }
-  }, dataUieName && {
-    'data-uie-name': "dropdown-".concat(dataUieName)
-  }), options.map(function (option, index) {
-    var isSelected = currentOptionIdx == index;
-    return (0, _react.jsx)("li", (0, _extends2["default"])({
-      key: option.value,
-      id: option.value.toString(),
-      role: "option",
-      "aria-selected": isSelected,
-      tabIndex: 0,
-      onKeyDown: handleKeyDown(index),
-      onClick: function onClick() {
-        return onOptionChange(index);
-      },
-      css: function css(theme) {
-        return dropdownOptionStyles(theme, isSelected);
-      }
-    }, dataUieName && {
-      'data-uie-name': "option-".concat(dataUieName),
-      'data-uie-value': option.value
-    }), option.label, option.description && (0, _react.jsx)("p", {
-      css: function css(theme) {
-        return {
-          marginBottom: 0,
-          fontSize: '14px',
-          color: isSelected ? theme.general.color : theme.Input.labelColor
-        };
-      }
-    }, option.description));
-  }))), !hasError && helperText && (0, _react.jsx)("p", {
+    styles: (0, _SelectStyles.customStyles)(theme, markInvalid),
+    components: {
+      DropdownIndicator: _SelectComponents.DropdownIndicator,
+      Option: (0, _SelectComponents.CustomOption)(dataUieName),
+      Menu: (0, _SelectComponents.Menu)(dataUieName),
+      ValueContainer: _SelectComponents.ValueContainer,
+      IndicatorsContainer: _SelectComponents.IndicatorsContainer
+    },
+    hideSelectedOptions: false,
+    isSearchable: false,
+    isClearable: false,
+    closeMenuOnSelect: !isMulti,
+    isMulti: isMulti,
+    options: options
+  }, props)), !hasError && helperText && (0, _react.jsx)("p", {
     css: function css(theme) {
       return {
         fontSize: '12px',

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.tsx"],"names":["ArrowDown","selectStyle","theme","disabled","markInvalid","props","error","color","textShadow","Select","disabledColor","appearance","boxShadow","general","dangerColor","borderColor","cursor","fontSize","fontWeight","paddingRight","textAlign","textOverflow","overflow","whiteSpace","marginBottom","primaryColor","fill","Input","placeholderColor","position","top","right","dropdownStyles","isDropdownOpen","height","visibility","margin","padding","borderRadius","border","left","width","maxHeight","overflowY","zIndex","dropdownOptionStyles","isSelected","background","backgroundColor","listStyle","lineHeight","letterSpacing","contrastTextColor","borderBottom","borderTop","filterSelectProps","placeholderText","id","label","helperText","options","value","onChange","required","dataUieName","wrapperCSS","currentOptionIdx","findIndex","option","selectedOption","selectContainerRef","listRef","setIsDropdownOpen","hasSelectedOption","hasError","scrollToCurrentOption","idx","current","listSelectedOption","children","getYPosition","offsetTop","scroll","behavior","onToggleDropdown","prevState","onOptionSelect","onOptionChange","handleListKeyDown","e","key","preventDefault","length","handleKeyDown","index","handleOutsideClick","event","contains","target","window","addEventListener","removeEventListener","map","toString","description","labelColor","marginTop"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport type {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {inputStyle} from './Input';\nimport React, {ReactElement, useEffect, useRef, useState} from 'react';\nimport InputLabel from './InputLabel';\n\nexport type SelectOption = {\n  value: string | number;\n  label: string;\n  description?: string;\n};\n\nexport interface SelectProps<T extends SelectOption = SelectOption> {\n  id: string;\n  onChange: (selectedOption: T['value']) => void;\n  dataUieName: string;\n  options: T[];\n  value?: T | null;\n  helperText?: string;\n  label?: string;\n  disabled?: boolean;\n  required?: boolean;\n  markInvalid?: boolean;\n  error?: ReactElement;\n  wrapperCSS?: CSSObject;\n}\n\nconst ArrowDown = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n    <path d=\"M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z\" />\n  </svg>\n);\n\nexport const selectStyle: <T>(theme: Theme, props, error?: boolean) => CSSObject = (\n  theme,\n  {disabled = false, markInvalid, ...props},\n  error = false,\n) => ({\n  ...inputStyle(theme, props),\n  '&:-moz-focusring': {\n    color: 'transparent',\n    textShadow: '0 0 0 #000',\n  },\n  '&:disabled': {\n    color: theme.Select.disabledColor,\n  },\n  appearance: 'none',\n  boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,\n  cursor: disabled ? 'normal' : 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  paddingRight: '30px',\n  textAlign: 'left',\n  textOverflow: 'ellipsis',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  marginBottom: error && '8px',\n  '&:invalid, option:first-of-type': {\n    color: theme.general.dangerColor,\n  },\n  ...(!disabled && {\n    '&:hover': {\n      boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,\n    },\n    '&:focus, &:active': {\n      boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n    },\n  }),\n  '& > svg': {\n    fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    position: 'absolute',\n    top: '1rem',\n    right: '1rem',\n  },\n});\n\nconst dropdownStyles = (theme: Theme, isDropdownOpen: boolean): CSSObject => ({\n  height: isDropdownOpen ? 'auto' : 0,\n  visibility: isDropdownOpen ? 'visible' : 'hidden',\n  margin: '3px 0 0',\n  padding: 0,\n  borderRadius: '10px',\n  border: `1px solid ${theme.general.primaryColor}`,\n  position: 'absolute',\n  top: '100%',\n  left: 0,\n  width: '100%',\n  maxHeight: '240px',\n  overflowY: 'auto',\n  zIndex: 9,\n});\n\nconst dropdownOptionStyles = (theme: Theme, isSelected: boolean): CSSObject => ({\n  background: isSelected ? theme.general.primaryColor : theme.general.backgroundColor,\n  listStyle: 'none',\n  padding: '10px 20px 14px',\n  cursor: 'pointer',\n  fontSize: '16px',\n  fontWeight: 300,\n  lineHeight: '24px',\n  letterSpacing: '0.05px',\n  color: isSelected ? theme.Select.contrastTextColor : theme.general.color,\n  '&:first-of-type': {\n    borderRadius: '10px 10px 0 0',\n  },\n  '&:last-of-type': {\n    borderRadius: '0 0 10px 10px',\n  },\n  '&:not(:last-of-type)': {\n    borderBottom: `1px solid ${theme.Select.borderColor}`,\n  },\n  '&:not(:first-of-type)': {\n    borderTop: `1px solid ${theme.Select.borderColor}`,\n  },\n  '&:hover, &:active, &:focus': {\n    background: theme.general.primaryColor,\n    borderColor: theme.general.primaryColor,\n    color: theme.Select.contrastTextColor,\n  },\n});\n\nconst filterSelectProps = props => filterProps(props, ['markInvalid']);\n\nconst placeholderText = '- Please select -';\n\nexport const Select = <T extends SelectOption = SelectOption>({\n  id,\n  label,\n  error,\n  helperText,\n  options = [],\n  value = null,\n  onChange,\n  required,\n  markInvalid,\n  dataUieName,\n  wrapperCSS = {},\n  ...props\n}: SelectProps<T>) => {\n  const currentOptionIdx = options.findIndex(option => option.value === value?.value);\n  const selectedOption = currentOptionIdx === -1 ? null : currentOptionIdx;\n\n  const selectContainerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const hasSelectedOption = selectedOption !== null;\n  const hasError = !!error;\n\n  const scrollToCurrentOption = (idx: number) => {\n    if (listRef.current) {\n      const listSelectedOption = listRef.current.children[idx] as HTMLLIElement;\n      const getYPosition = listSelectedOption && listSelectedOption.offsetTop;\n\n      listRef.current.scroll({\n        top: getYPosition ?? 0,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const onToggleDropdown = () => setIsDropdownOpen(prevState => !prevState);\n\n  const onOptionSelect = (idx: number) => {\n    onChange(options[idx].value);\n    scrollToCurrentOption(idx);\n  };\n\n  const onOptionChange = (idx: number) => {\n    onOptionSelect(idx);\n    setIsDropdownOpen(false);\n  };\n\n  const handleListKeyDown = e => {\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault();\n        setIsDropdownOpen(false);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        onOptionSelect(selectedOption - 1 >= 0 ? selectedOption - 1 : options.length - 1);\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n\n        e.preventDefault();\n        if (selectedOption === null) {\n          onOptionSelect(0);\n        } else {\n          onOptionSelect(selectedOption === options.length - 1 ? 0 : selectedOption + 1);\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleKeyDown = index => e => {\n    switch (e.key) {\n      case ' ':\n      case 'SpaceBar':\n      case 'Enter':\n        e.preventDefault();\n        onOptionChange(index);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handleOutsideClick = (event: MouseEvent) => {\n    if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node)) {\n      setIsDropdownOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('click', handleOutsideClick);\n\n    return () => {\n      window.removeEventListener('click', handleOutsideClick);\n    };\n  }, []);\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n      ref={selectContainerRef}\n    >\n      {label && (\n        <InputLabel htmlFor={id} isRequired={required} markInvalid={markInvalid}>\n          {label}\n        </InputLabel>\n      )}\n\n      <div css={{position: 'relative'}}>\n        <button\n          type=\"button\"\n          aria-activedescendant={hasSelectedOption ? value.label : ''}\n          aria-expanded={isDropdownOpen}\n          aria-haspopup=\"listbox\"\n          aria-labelledby={id}\n          id={id}\n          onClick={onToggleDropdown}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => selectStyle(theme, props, hasError)}\n          {...filterSelectProps(props)}\n          data-uie-name={dataUieName}\n          {...(hasSelectedOption && {\n            'data-value': value.value,\n          })}\n        >\n          {hasSelectedOption ? value.label : placeholderText}\n          {ArrowDown}\n        </button>\n\n        <ul\n          ref={listRef}\n          role=\"listbox\"\n          aria-labelledby={id}\n          tabIndex={-1}\n          onKeyDown={handleListKeyDown}\n          css={(theme: Theme) => dropdownStyles(theme, isDropdownOpen)}\n          {...(dataUieName && {\n            'data-uie-name': `dropdown-${dataUieName}`,\n          })}\n        >\n          {options.map((option, index) => {\n            const isSelected = currentOptionIdx == index;\n\n            return (\n              <li\n                key={option.value}\n                id={option.value.toString()}\n                role=\"option\"\n                aria-selected={isSelected}\n                tabIndex={0}\n                onKeyDown={handleKeyDown(index)}\n                onClick={() => onOptionChange(index)}\n                css={(theme: Theme) => dropdownOptionStyles(theme, isSelected)}\n                {...(dataUieName && {\n                  'data-uie-name': `option-${dataUieName}`,\n                  'data-uie-value': option.value,\n                })}\n              >\n                {option.label}\n\n                {option.description && (\n                  <p\n                    css={(theme: Theme) => ({\n                      marginBottom: 0,\n                      fontSize: '14px',\n                      color: isSelected ? theme.general.color : theme.Input.labelColor,\n                    })}\n                  >\n                    {option.description}\n                  </p>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}
+{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","dataUieName","options","wrapperCSS","markInvalid","required","isMulti","props","theme","hasError","marginBottom","width","color","general","primaryColor","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;AAEA;;;;;;;;AAsBO,IAAMA,MAAuB,GAAG,SAA1BA,MAA0B,OAYjC;AAAA,MAXJC,EAWI,QAXJA,EAWI;AAAA,MAVJC,KAUI,QAVJA,KAUI;AAAA,MATJC,KASI,QATJA,KASI;AAAA,MARJC,UAQI,QARJA,UAQI;AAAA,MAPJC,WAOI,QAPJA,WAOI;AAAA,MANJC,OAMI,QANJA,OAMI;AAAA,6BALJC,UAKI;AAAA,MALJA,UAKI,gCALS,EAKT;AAAA,8BAJJC,WAII;AAAA,MAJJA,WAII,iCAJU,KAIV;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADDC,KACC;AACJ,MAAMC,KAAK,GAAG,sBAAd;AACA,MAAMC,QAAQ,GAAG,CAAC,CAACV,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA;AACHE,QAAAA,YAAY,EAAEN,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHO,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBC,UAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADC;AAHrB,SAMAX,UANA;AAAA,KADP;AASE,qBAAeF;AATjB,KAWGH,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,WAAW,EAAEO,WAAtC;AAAmD,IAAA,UAAU,EAAEC;AAA/D,KACGP,KADH,CAZJ,EAiBE,gBAAC,uBAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,MAAM,EAAE,gCAAaW,KAAb,EAA6BJ,WAA7B,CAFV;AAGE,IAAA,UAAU,EAAE;AACVW,MAAAA,iBAAiB,EAAjBA,mCADU;AAEVC,MAAAA,MAAM,EAAE,oCAAaf,WAAb,CAFE;AAGVgB,MAAAA,IAAI,EAAE,4BAAKhB,WAAL,CAHI;AAIViB,MAAAA,cAAc,EAAdA,gCAJU;AAKVC,MAAAA,mBAAmB,EAAnBA;AALU,KAHd;AAUE,IAAA,mBAAmB,EAAE,KAVvB;AAWE,IAAA,YAAY,EAAE,KAXhB;AAYE,IAAA,WAAW,EAAE,KAZf;AAaE,IAAA,iBAAiB,EAAE,CAACb,OAbtB;AAcE,IAAA,OAAO,EAAEA,OAdX;AAeE,IAAA,OAAO,EAAEJ;AAfX,KAgBMK,KAhBN,EAjBF,EAoCG,CAACE,QAAD,IAAaT,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACQ,KAAD;AAAA,aAAmB;AAACY,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCT,QAAAA,KAAK,EAAEJ,KAAK,CAACc,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACGxB,UADH,CArCJ,EA0CGD,KA1CH,CADF;AA8CD,CA9DM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {useTheme} from '@emotion/react';\nimport React, {FC, ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {CustomOption, DropdownIndicator, IndicatorsContainer, Menu, ValueContainer} from './SelectComponents';\nimport type {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n  value: string | number;\n  label: string;\n  description?: string;\n  isDisabled?: boolean;\n};\n\ninterface SelectProps extends StateManagerProps<Option> {\n  id: string;\n  dataUieName: string;\n  options: Option[];\n  wrapperCSS?: CSSObject;\n  label?: string;\n  helperText?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  required?: boolean;\n  isMulti?: boolean;\n}\n\nexport const Select: FC<SelectProps> = ({\n  id,\n  label,\n  error,\n  helperText,\n  dataUieName,\n  options,\n  wrapperCSS = {},\n  markInvalid = false,\n  required = false,\n  isMulti = false,\n  ...props\n}) => {\n  const theme = useTheme();\n  const hasError = !!error;\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n    >\n      {label && (\n        <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n          {label}\n        </InputLabel>\n      )}\n\n      <ReactSelect\n        id={id}\n        styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n        components={{\n          DropdownIndicator,\n          Option: CustomOption(dataUieName),\n          Menu: Menu(dataUieName),\n          ValueContainer,\n          IndicatorsContainer,\n        }}\n        hideSelectedOptions={false}\n        isSearchable={false}\n        isClearable={false}\n        closeMenuOnSelect={!isMulti}\n        isMulti={isMulti}\n        options={options}\n        {...props}\n      />\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}

package/src/Form/Select.md

@@ -1,34 +1,37 @@
 Demo:
 
 ```js
-import {Fragment, useState} from 'react';
-import {Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
+import {Container, Columns, Column, ErrorMessage, Select} from '@wireapp/react-ui-kit';
 
-const options = [
-  {value: '1', label: 'Option 1'},
-  {value: '2', label: 'Option 2'},
-  {value: '3', label: 'Option 3'},
-  {value: '4', label: 'Option 4'},
+const selectOptions = [
+  {value: '1', label: 'Option 1 long long long long name long name to trunckate this test - should work'},
+  {value: '2', label: 'Option 2 longest name'},
+  {value: '3', label: 'Option 3', description: 'Custom description for select option'},
+  {value: '4', label: 'Option 4', isDisabled: true},
   {value: '5', label: 'Option 5'},
   {value: '6', label: 'Option 6'},
 ];
 
-const [firstSelectOption, setFirstSelectOption] = useState(options[0].value);
-const [secondSelectOption, setSecondSelectOption] = useState(null);
-const [thirdSelectOption, setThirdSelectOption] = useState(null);
-
-<Fragment>
+<Container>
   <Columns>
     <Column>Select</Column>
 
+    <Column>
+      <Select label="Select" id="firstSelect" options={selectOptions} dataUieName="select" />
+    </Column>
+  </Columns>
+
+  <Columns>
+    <Column>MultiSelect</Column>
+
     <Column>
       <Select
         label="Select"
-        id="firstSelect"
-        options={options}
-        value={firstSelectOption ? options.find(option => option.value === firstSelectOption) : null}
-        onChange={setFirstSelectOption}
-        dataUieName="select"
+        id="firstMultiSelect"
+        options={selectOptions}
+        defaultValue={[selectOptions[0], selectOptions[1]]}
+        dataUieName="firstMultipleSelect"
+        isMulti
       />
     </Column>
   </Columns>
@@ -38,10 +41,10 @@ const [thirdSelectOption, setThirdSelectOption] = useState(null);
 
     <Column>
       <Select
-        disabled
+        isDisabled
         label="Disabled select"
         id="disabledSelect"
-        options={options}
+        options={selectOptions}
         onChange={selectedOption => console.log('Selected option', selectedOption)}
         dataUieName="disabled-select"
       />
@@ -56,9 +59,7 @@ const [thirdSelectOption, setThirdSelectOption] = useState(null);
         label="Required select"
         required
         id="requiredSelect"
-        options={options}
-        value={secondSelectOption ? options.find(option => option.value === secondSelectOption) : null}
-        onChange={setSecondSelectOption}
+        options={selectOptions}
         dataUieName="required-select"
       />
     </Column>
@@ -74,12 +75,10 @@ const [thirdSelectOption, setThirdSelectOption] = useState(null);
         id="invalidSelect"
         required
         error={<ErrorMessage>Error message</ErrorMessage>}
-        options={options}
-        value={thirdSelectOption ? options.find(option => option.value === thirdSelectOption) : null}
-        onChange={setThirdSelectOption}
+        options={selectOptions}
         dataUieName="invalid-select"
       />
     </Column>
   </Columns>
-</Fragment>;
+</Container>;
 ```

package/src/Form/SelectComponents.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=SelectComponents.d.js.map

package/src/Form/SelectComponents.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"SelectComponents.d.js"}

package/src/Form/SelectComponents.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { OptionProps, ValueContainerProps } from 'react-select';
+import { MenuProps } from 'react-select/dist/declarations/src/components/Menu';
+import { IndicatorsContainerProps } from 'react-select/dist/declarations/src/components/containers';
+import { Option } from './Select';
+export declare const DropdownIndicator: (props: any) => jsx.JSX.Element;
+export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => jsx.JSX.Element;
+export declare const Menu: (dataUieName: string) => (props: MenuProps) => jsx.JSX.Element;
+export declare const renderValue: (value: any) => any;
+export declare const ValueContainer: ({ children, ...restProps }: ValueContainerProps<Option>) => jsx.JSX.Element;
+export declare const IndicatorsContainer: ({ children, ...restProps }: IndicatorsContainerProps<Option>) => jsx.JSX.Element;