@cashub/ui 0.4.2 → 0.5.0

package/select/SearchBox.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _go = require("react-icons/go");
+
+var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var SearchBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    onClick: handleClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_go.GoSearch, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchInput, _objectSpread({
+      type: "text",
+      ref: ref
+    }, props))]
+  });
+});
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding: var(--spacing-xs);\n\n  > svg {\n    color: var(--font-on-mute);\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--spacing-s) + var(--spacing-xs));\n  }\n"])));
+
+Wrapper.displayName = 'Wrapper';
+
+var SearchInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  color: var(--color-white);\n  border-radius: var(--border-radius-l);\n  border: var(--border-width) solid var(--border-color);\n  outline: none;\n  width: 100%;\n  padding: 10px var(--spacing-s) 10px calc(var(--spacing-s) * 2 + 8px);\n  max-height: 36px;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), (0, _inputPlaceholder.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
+
+SearchInput.displayName = 'SearchInput';
+var _default = SearchBox;
+exports.default = _default;

package/select/Select.js

@@ -0,0 +1,625 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
+
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+
+var _ti = require("react-icons/ti");
+
+var _md = require("react-icons/md");
+
+var _useCustomPopper2 = _interopRequireDefault(require("../utils/hooks/useCustomPopper"));
+
+var _keycode = _interopRequireDefault(require("../utils/aria/keycode"));
+
+var _SelectedSingle = _interopRequireDefault(require("./SelectedSingle"));
+
+var _SelectedMultiple = _interopRequireDefault(require("./SelectedMultiple"));
+
+var _ListBox = _interopRequireDefault(require("./ListBox"));
+
+var _SearchBox = _interopRequireDefault(require("./SearchBox"));
+
+var _Options = _interopRequireDefault(require("./Options"));
+
+var _OptionGroup = _interopRequireDefault(require("./OptionGroup"));
+
+var _Option = _interopRequireDefault(require("./Option"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Select = function Select(_ref) {
+  var options = _ref.options,
+      selected = _ref.selected,
+      onSelect = _ref.onSelect,
+      onDeselect = _ref.onDeselect,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$allowClear = _ref.allowClear,
+      allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+      _ref$allowSearch = _ref.allowSearch,
+      allowSearch = _ref$allowSearch === void 0 ? true : _ref$allowSearch,
+      disabled = _ref.disabled,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      fullWidth = _ref.fullWidth,
+      large = _ref.large,
+      fill = _ref.fill,
+      fillReverse = _ref.fillReverse;
+
+  var _useState = (0, _react.useState)((0, _lodash.default)('select-')),
+      _useState2 = _slicedToArray(_useState, 1),
+      id = _useState2[0];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      display = _useState4[0],
+      setDisplay = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      listBoxElement = _useState6[0],
+      setListBoxElement = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      dropdownElement = _useState8[0],
+      setDropdownElement = _useState8[1];
+
+  var optionsElementRef = (0, _react.useRef)(null);
+  var searchBoxElement = (0, _react.useRef)(null);
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listBoxWidth = _useState10[0],
+      setListBoxWidth = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      optionList = _useState12[0],
+      setOptionList = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      focusedOption = _useState14[0],
+      setFocusedOption = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      selectedOptions = _useState16[0],
+      setSelectedOptions = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(options),
+      _useState18 = _slicedToArray(_useState17, 2),
+      filteredOptions = _useState18[0],
+      setFilteredOptions = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(''),
+      _useState20 = _slicedToArray(_useState19, 2),
+      search = _useState20[0],
+      setSearch = _useState20[1];
+
+  var _useCustomPopper = (0, _useCustomPopper2.default)(listBoxElement, dropdownElement),
+      styles = _useCustomPopper.styles,
+      attributes = _useCustomPopper.attributes,
+      state = _useCustomPopper.state,
+      update = _useCustomPopper.update; // parse all value to string
+  // for subsequently determine whether it is a selected item
+
+
+  var parsedSelected = (0, _react.useMemo)(function () {
+    if (selected || selected === 0) {
+      // multiple value
+      if (Array.isArray(selected) && selected.length > 0) {
+        return selected.map(function (value) {
+          return value.toString();
+        });
+      } // single value
+
+
+      return selected.toString();
+    }
+  }, [selected]); // set focused option
+
+  var handleFocusItem = (0, _react.useCallback)(function (element) {
+    if (!optionsElementRef.current) return;
+    setFocusedOption(element);
+    var container = optionsElementRef.current;
+
+    if (container.scrollHeight > container.clientHeight) {
+      var scrollBottom = container.clientHeight + container.scrollTop;
+      var elementBottom = element.offsetTop + element.offsetHeight;
+
+      if (elementBottom > scrollBottom) {
+        container.scrollTop = elementBottom - container.clientHeight;
+      } else if (element.offsetTop < container.scrollTop) {
+        container.scrollTop = element.offsetTop;
+      }
+    }
+  }, []);
+  var focusFirstItem = (0, _react.useCallback)(function () {
+    var firstItem = dropdownElement.querySelector('[role="option"]');
+
+    if (firstItem) {
+      handleFocusItem(firstItem);
+    }
+  }, [dropdownElement, handleFocusItem]);
+  var setupFocus = (0, _react.useCallback)(function () {
+    if (!dropdownElement) return;
+    var selectedItem = dropdownElement.querySelector('[aria-selected="true"]');
+
+    if (selectedItem) {
+      handleFocusItem(selectedItem);
+    } else if (optionList.length > 0) {
+      focusFirstItem();
+    } else {
+      setFocusedOption(null);
+    }
+  }, [dropdownElement, handleFocusItem, focusFirstItem, optionList]);
+  var findPreviousItem = (0, _react.useCallback)(function (currentItem) {
+    var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
+
+    var currentItemIndex = allItem.indexOf(currentItem);
+    var previousItem = null;
+
+    if (currentItemIndex !== -1 && currentItemIndex > 0) {
+      previousItem = allItem[currentItemIndex - 1];
+    }
+
+    return previousItem;
+  }, [dropdownElement]);
+  var findNextItem = (0, _react.useCallback)(function (currentItem) {
+    var allItem = _toConsumableArray(dropdownElement.querySelectorAll('[role="option"]'));
+
+    var currentItemIndex = allItem.indexOf(currentItem);
+    var nextItem = null;
+
+    if (currentItemIndex !== -1 && currentItemIndex < allItem.length - 1) {
+      nextItem = allItem[currentItemIndex + 1];
+    }
+
+    return nextItem;
+  }, [dropdownElement]);
+  var handleOnSelect = (0, _react.useCallback)(function (e, value) {
+    e.stopPropagation();
+    if (disabled === true) return; //禁按就跳出
+
+    onSelect(value);
+    setSearch('');
+    setDisplay(false);
+  }, [disabled, onSelect]);
+  var handleOnDeselect = (0, _react.useCallback)(function (e, value) {
+    e.stopPropagation();
+    if (disabled === true) return;
+    onDeselect(value);
+  }, [disabled, onDeselect]); // list all selected option
+
+  var selectedItem = (0, _react.useMemo)(function () {
+    if (selectedOptions.length > 0) {
+      if (multiple) {
+        return selectedOptions.map(function (value) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
+            content: value.text,
+            onClick: function onClick(e) {
+              return handleOnDeselect(e, value.id);
+            }
+          }, value.id);
+        });
+      } else {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedSingle.default, {
+          children: selectedOptions[0].text
+        });
+      }
+    } else {
+      return placeholder;
+    }
+  }, [placeholder, handleOnDeselect, multiple, selectedOptions]);
+  var optionItem = (0, _react.useMemo)(function () {
+    if (optionList.length <= 0) return null;
+    return optionList.map(function (option) {
+      if (option.child && option.child.length > 0) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionGroup.default, {
+          "aria-labelledby": option.text,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+            role: "presentation",
+            id: option.text,
+            children: option.text
+          }), option.child.map(function (option) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+              role: "option",
+              tabIndex: "0",
+              id: option.id,
+              onClick: function onClick(e) {
+                return handleOnSelect(e, option.id);
+              },
+              focus: focusedOption && focusedOption.id === option.id.toString(),
+              selected: option.selected,
+              "aria-selected": option.selected,
+              children: option.text
+            }, option.id);
+          })]
+        }, option.text);
+      }
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+        role: "option",
+        tabIndex: "0",
+        id: option.id,
+        onClick: function onClick(e) {
+          return handleOnSelect(e, option.id);
+        },
+        focus: focusedOption && focusedOption.id === option.id.toString(),
+        selected: option.selected,
+        "aria-selected": option.selected,
+        children: option.text
+      }, option.id);
+    });
+  }, [optionList, focusedOption, handleOnSelect]); // show or hide dropdown
+  // and set dropdown width according to listbox current width
+
+  var handleToggle = function handleToggle() {
+    if (disabled === true) return;
+    var tmpDisplay = !display;
+
+    if (!tmpDisplay) {
+      setFocusedOption(null);
+    }
+
+    setDisplay(tmpDisplay);
+    update();
+  }; // handle keyboard interaction
+
+
+  var handleKeyUp = function handleKeyUp(event) {
+    var key = event.keyCode;
+
+    switch (key) {
+      case _keycode.default.ENTER:
+        if (!display) {
+          handleToggle();
+        } else if (focusedOption) {
+          handleOnSelect(event, focusedOption.id);
+        }
+
+        break;
+
+      case _keycode.default.ESCAPE:
+        if (display) {
+          handleToggle();
+        }
+
+        break;
+
+      case _keycode.default.UP:
+        if (!focusedOption) {
+          return;
+        }
+
+        var previousItem = findPreviousItem(focusedOption);
+
+        if (previousItem) {
+          handleFocusItem(previousItem);
+        }
+
+        break;
+
+      case _keycode.default.DOWN:
+        if (!focusedOption) {
+          return;
+        }
+
+        var nextItem = findNextItem(focusedOption);
+
+        if (nextItem) {
+          handleFocusItem(nextItem);
+        }
+
+        break;
+
+      case _keycode.default.END:
+        event.preventDefault();
+        var itemList = dropdownElement.querySelectorAll('[role="option"]');
+
+        if (itemList.length) {
+          handleFocusItem(itemList[itemList.length - 1]);
+        }
+
+        break;
+
+      case _keycode.default.HOME:
+        event.preventDefault();
+        focusFirstItem();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.keyCode;
+
+    switch (key) {
+      case _keycode.default.ENTER:
+      case _keycode.default.ESCAPE:
+      case _keycode.default.UP:
+      case _keycode.default.DOWN:
+      case _keycode.default.END:
+      case _keycode.default.HOME:
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  }; // handle search keyword change
+
+
+  var handleSearchChange = function handleSearchChange(e) {
+    setSearch(e.target.value);
+  }; // determine selected option(s)
+
+
+  (0, _react.useEffect)(function () {
+    if (!options) return;
+    var tmpSelectedOptions = [];
+    options.forEach(function (option) {
+      if (option.child && option.child.length > 0) {
+        option.child.forEach(function (option) {
+          if (multiple && parsedSelected.includes(option.id.toString())) {
+            tmpSelectedOptions.push(option);
+          } else if (parsedSelected === option.id.toString()) {
+            tmpSelectedOptions.push(option);
+          }
+        });
+      } else {
+        if (multiple && parsedSelected.includes(option.id.toString())) {
+          tmpSelectedOptions.push(option);
+        } else if (parsedSelected === option.id.toString()) {
+          tmpSelectedOptions.push(option);
+        }
+      }
+
+      return false;
+    });
+    setSelectedOptions(tmpSelectedOptions);
+  }, [options, parsedSelected, multiple]);
+  (0, _react.useEffect)(function () {
+    if (update) {
+      setTimeout(function () {
+        update();
+      }, 100);
+    }
+  }, [update, listBoxWidth]); // observe element resized
+
+  (0, _react.useEffect)(function () {
+    if (!listBoxElement) return;
+    var resizeObserverInstance = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+
+          if (entry.target) {
+            var borderBoxSize = entry.target.clientWidth;
+            setListBoxWidth(borderBoxSize);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    resizeObserverInstance.observe(listBoxElement);
+    return function () {
+      // unobserve element
+      resizeObserverInstance.unobserve(listBoxElement);
+    };
+  }, [listBoxElement]); // re-setup focus when option list changed and update popper position
+
+  (0, _react.useEffect)(function () {
+    setupFocus();
+    if (update) update();
+  }, [setupFocus, optionList, update]); // parse option list when filtered options change
+
+  (0, _react.useEffect)(function () {
+    if (!filteredOptions) return;
+    setOptionList(filteredOptions.map(function (option) {
+      if (option.child && option.child.length > 0) {
+        return _objectSpread(_objectSpread({}, option), {}, {
+          child: option.child.map(function (option) {
+            var selected = false;
+
+            if (multiple && parsedSelected.includes(option.id.toString())) {
+              selected = true;
+            } else if (parsedSelected === option.id.toString()) {
+              selected = true;
+            }
+
+            return _objectSpread(_objectSpread({}, option), {}, {
+              selected: selected
+            });
+          })
+        });
+      } else {
+        var _selected = false;
+
+        if (multiple && parsedSelected.includes(option.id.toString())) {
+          _selected = true;
+        } else if (parsedSelected === option.id.toString()) {
+          _selected = true;
+        }
+
+        return _objectSpread(_objectSpread({}, option), {}, {
+          selected: _selected
+        });
+      }
+    }));
+  }, [filteredOptions, multiple, parsedSelected]); // filter options on search keyword changed
+
+  (0, _react.useEffect)(function () {
+    var tmpFilteredOptions = [];
+    options.forEach(function (option) {
+      if (option.child && option.child.length > 0) {
+        var tmpFilteredChildOptions = option.child.filter(function (option) {
+          return option.text.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+        });
+
+        if (tmpFilteredChildOptions.length > 0) {
+          tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
+            child: tmpFilteredChildOptions
+          }));
+        }
+      } else if (option.text.toLowerCase().indexOf(search.toLowerCase()) !== -1) {
+        tmpFilteredOptions.push(option);
+      }
+    });
+    setFilteredOptions(tmpFilteredOptions);
+  }, [search, options]);
+  (0, _react.useEffect)(function () {
+    if (display) {
+      setupFocus();
+
+      if (allowSearch) {
+        searchBoxElement.current.focus();
+      }
+    }
+  }, [setupFocus, display, allowSearch]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
+    onOutsideClick: function onOutsideClick() {
+      setDisplay(false);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Combobox, {
+      role: "combobox",
+      tabIndex: "0",
+      "aria-haspopup": "listbox",
+      "aria-expanded": display,
+      "aria-owns": id,
+      ref: setListBoxElement,
+      onClick: handleToggle,
+      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
+      $display: display,
+      disabled: disabled,
+      fullWidth: fullWidth,
+      large: large,
+      $fill: fill,
+      fillReverse: fillReverse,
+      children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+        onClick: function onClick() {
+          onSelect('');
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandArrow, {
+        "aria-haspopup": "listbox",
+        "aria-expanded": display
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, _objectSpread(_objectSpread({
+      role: "listbox",
+      tabIndex: "0",
+      id: id,
+      ref: setDropdownElement,
+      onKeyUp: handleKeyUp,
+      onKeyDown: handleKeyDown,
+      width: listBoxWidth,
+      $display: display,
+      style: styles.popper
+    }, attributes.popper), {}, {
+      placement: state && state.placement,
+      children: [allowSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBox.default, {
+        ref: searchBoxElement,
+        placeholder: "Search",
+        onChange: handleSearchChange,
+        value: search
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Options.default, {
+        ref: optionsElementRef,
+        allowSearch: allowSearch,
+        children: optionItem || /*#__PURE__*/(0, _jsxRuntime.jsx)(Message, {
+          children: "No results found"
+        })
+      })]
+    }))]
+  });
+};
+
+var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--color-white);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled;
+  return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
+}, function (_ref3) {
+  var $display = _ref3.$display;
+  return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled && "cursor: not-allowed;opacity: 0.5;";
+}, function (_ref5) {
+  var fullWidth = _ref5.fullWidth;
+  return fullWidth ? 'width: 100%' : 'max-width: 320px';
+}, function (_ref6) {
+  var large = _ref6.large;
+  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
+}, function (_ref7) {
+  var $fill = _ref7.$fill;
+  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+}, function (_ref8) {
+  var fillReverse = _ref8.fillReverse;
+  return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
+});
+
+Combobox.displayName = 'Combobox';
+var CloseButton = (0, _styledComponents.default)(_md.MdClose)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--color-primary);\n  font-size: var(--font-body1);\n  right: var(--spacing-l);\n\n  ", ";\n"])), _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    right: calc(var(--spacing) + var(--spacing-s));\n  "]))));
+CloseButton.displayName = 'CloseButton';
+var ExpandArrow = (0, _styledComponents.default)(_ti.TiArrowSortedDown)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--color-primary);\n  font-size: var(--font-body1);\n  right: var(--spacing-s);\n"])));
+ExpandArrow.displayName = 'ExpandArrow';
+
+var Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 12px var(--spacing-s);\n"])));
+
+Message.displayName = 'Message';
+var _default = Select;
+exports.default = _default;