@cashub/ui 0.21.0 → 0.21.1

package/select/Select.js

@@ -4,222 +4,112 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _reactI18next = require("react-i18next");
-
 var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
-
 var _ti = require("react-icons/ti");
-
 var _md = require("react-icons/md");
-
 var _hooks = require("@cashub/hooks");
-
 var _utils = require("@cashub/utils");
-
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
-
 var _SelectedSingle = _interopRequireDefault(require("./subComponent/SelectedSingle"));
-
 var _SelectedMultiple = _interopRequireDefault(require("./subComponent/SelectedMultiple"));
-
 var _ListBox = _interopRequireDefault(require("./subComponent/ListBox"));
-
 var _SearchBox = _interopRequireDefault(require("./subComponent/SearchBox"));
-
 var _Options = _interopRequireDefault(require("./subComponent/Options"));
-
 var _OptionGroup = _interopRequireDefault(require("./subComponent/OptionGroup"));
-
 var _Option = _interopRequireDefault(require("./subComponent/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,
-      _ref$enableSelectAll = _ref.enableSelectAll,
-      enableSelectAll = _ref$enableSelectAll === void 0 ? false : _ref$enableSelectAll,
-      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,
-      onBlur = _ref.onBlur,
-      onSearch = _ref.onSearch;
-
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
-
-  var _useState = (0, _react.useState)((0, _lodash.default)('select-')),
-      _useState2 = _slicedToArray(_useState, 1),
-      id = _useState2[0];
-
-  var _useState3 = (0, _react.useState)((0, _lodash.default)('allOptons-')),
-      _useState4 = _slicedToArray(_useState3, 1),
-      allOptionId = _useState4[0];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      display = _useState6[0],
-      setDisplay = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      comboboxElement = _useState8[0],
-      setComboboxElement = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      listBoxElement = _useState10[0],
-      setListBoxElement = _useState10[1];
-
-  var optionsElementRef = (0, _react.useRef)(null);
-  var searchBoxElement = (0, _react.useRef)(null);
-
-  var _useState11 = (0, _react.useState)(0),
-      _useState12 = _slicedToArray(_useState11, 2),
-      listBoxWidth = _useState12[0],
-      setListBoxWidth = _useState12[1];
-
-  var _useState13 = (0, _react.useState)([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      optionList = _useState14[0],
-      setOptionList = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(null),
-      _useState16 = _slicedToArray(_useState15, 2),
-      focusedOption = _useState16[0],
-      setFocusedOption = _useState16[1];
-
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      isFocusCombobox = _useState18[0],
-      setIsFocusCombobox = _useState18[1];
-
-  var _useState19 = (0, _react.useState)([]),
-      _useState20 = _slicedToArray(_useState19, 2),
-      selectedOptions = _useState20[0],
-      setSelectedOptions = _useState20[1];
-
-  var _useState21 = (0, _react.useState)(options),
-      _useState22 = _slicedToArray(_useState21, 2),
-      filteredOptions = _useState22[0],
-      setFilteredOptions = _useState22[1];
-
-  var _useState23 = (0, _react.useState)(''),
-      _useState24 = _slicedToArray(_useState23, 2),
-      search = _useState24[0],
-      setSearch = _useState24[1];
-
-  var _useCustomPopper = (0, _hooks.useCustomPopper)(comboboxElement, listBoxElement),
-      styles = _useCustomPopper.styles,
-      attributes = _useCustomPopper.attributes,
-      state = _useCustomPopper.state,
-      update = _useCustomPopper.update;
-
-  var newOptions = (0, _react.useMemo)(function () {
+const Select = _ref => {
+  let {
+    options,
+    enableSelectAll = false,
+    selected,
+    onSelect,
+    onDeselect,
+    multiple = false,
+    allowClear = false,
+    allowSearch = true,
+    disabled,
+    placeholder = '',
+    fullWidth,
+    large,
+    fill,
+    fillReverse,
+    onBlur,
+    onSearch
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [id] = (0, _react.useState)((0, _lodash.default)('select-'));
+  const [allOptionId] = (0, _react.useState)((0, _lodash.default)('allOptons-'));
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [comboboxElement, setComboboxElement] = (0, _react.useState)(null);
+  const [listBoxElement, setListBoxElement] = (0, _react.useState)(null);
+  const optionsElementRef = (0, _react.useRef)(null);
+  const searchBoxElement = (0, _react.useRef)(null);
+  const [listBoxWidth, setListBoxWidth] = (0, _react.useState)(0);
+  const [optionList, setOptionList] = (0, _react.useState)([]);
+  const [focusedOption, setFocusedOption] = (0, _react.useState)(null);
+  const [isFocusCombobox, setIsFocusCombobox] = (0, _react.useState)(false);
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)([]);
+  const [filteredOptions, setFilteredOptions] = (0, _react.useState)(options);
+  const [search, setSearch] = (0, _react.useState)('');
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(comboboxElement, listBoxElement);
+  const newOptions = (0, _react.useMemo)(() => {
     if (!options) return;
-
-    var newOptions = _toConsumableArray(options);
-
+    const newOptions = [...options];
     if (options.length > 0 && multiple && enableSelectAll) {
       newOptions.unshift({
         id: allOptionId,
         text: t('All')
       });
     }
-
     return newOptions;
-  }, [options, multiple, enableSelectAll, allOptionId]); // parse all value to string
-  // for subsequently determine whether it is a selected item
+  }, [options, multiple, enableSelectAll, allOptionId]);
 
-  var parsedSelected = (0, _react.useMemo)(function () {
+  // parse all value to string
+  // for subsequently determine whether it is a selected item
+  const parsedSelected = (0, _react.useMemo)(() => {
     if (selected || selected === 0) {
       // multiple value
       if (Array.isArray(selected)) {
-        return selected.map(function (value) {
-          return value.toString();
-        });
-      } // single value
-
+        return selected.map(value => value.toString());
+      }
 
+      // single value
       return selected.toString();
     }
-
     return '';
   }, [selected]);
-  var selectedAllOptions = (0, _react.useMemo)(function () {
+  const selectedAllOptions = (0, _react.useMemo)(() => {
     if (multiple && enableSelectAll && parsedSelected.length + 1 === newOptions.length) {
-      var _selectedAllOptions = _toConsumableArray(parsedSelected);
-
-      _selectedAllOptions.unshift(allOptionId);
-
-      return _selectedAllOptions;
+      const selectedAllOptions = [...parsedSelected];
+      selectedAllOptions.unshift(allOptionId);
+      return selectedAllOptions;
     }
-
     return parsedSelected;
-  }, [multiple, enableSelectAll, newOptions.length, parsedSelected, allOptionId]); // set focused option
+  }, [multiple, enableSelectAll, newOptions.length, parsedSelected, allOptionId]);
 
-  var handleFocusItem = (0, _react.useCallback)(function (element) {
+  // set focused option
+  const handleFocusItem = (0, _react.useCallback)(element => {
     if (!optionsElementRef.current) return;
     setFocusedOption(element);
-    var container = optionsElementRef.current;
-
+    const container = optionsElementRef.current;
     if (container.scrollHeight > container.clientHeight) {
-      var scrollBottom = container.clientHeight + container.scrollTop;
-      var elementBottom = element.offsetTop + element.offsetHeight;
-
+      const scrollBottom = container.clientHeight + container.scrollTop;
+      const elementBottom = element.offsetTop + element.offsetHeight;
       if (elementBottom > scrollBottom) {
         container.scrollTop = elementBottom - container.clientHeight;
       } else if (element.offsetTop < container.scrollTop) {
@@ -227,17 +117,15 @@ var Select = function Select(_ref) {
       }
     }
   }, []);
-  var focusFirstItem = (0, _react.useCallback)(function () {
-    var firstItem = listBoxElement.querySelector('[role="option"]');
-
+  const focusFirstItem = (0, _react.useCallback)(() => {
+    const firstItem = listBoxElement.querySelector('[role="option"]');
     if (firstItem) {
       handleFocusItem(firstItem);
     }
   }, [listBoxElement, handleFocusItem]);
-  var setupFocus = (0, _react.useCallback)(function () {
+  const setupFocus = (0, _react.useCallback)(() => {
     if (!listBoxElement) return;
-    var selectedItem = listBoxElement.querySelector('[aria-selected="true"]');
-
+    const selectedItem = listBoxElement.querySelector('[aria-selected="true"]');
     if (selectedItem) {
       handleFocusItem(selectedItem);
     } else if (optionList.length > 0) {
@@ -246,42 +134,36 @@ var Select = function Select(_ref) {
       setFocusedOption(null);
     }
   }, [listBoxElement, handleFocusItem, focusFirstItem, optionList]);
-  var findPreviousItem = (0, _react.useCallback)(function (currentItem) {
-    var allItem = _toConsumableArray(listBoxElement.querySelectorAll('[role="option"]'));
-
-    var currentItemIndex = allItem.indexOf(currentItem);
-    var previousItem = null;
-
+  const findPreviousItem = (0, _react.useCallback)(currentItem => {
+    const allItem = [...listBoxElement.querySelectorAll('[role="option"]')];
+    const currentItemIndex = allItem.indexOf(currentItem);
+    let previousItem = null;
     if (currentItemIndex !== -1 && currentItemIndex > 0) {
       previousItem = allItem[currentItemIndex - 1];
     }
-
     return previousItem;
   }, [listBoxElement]);
-  var findNextItem = (0, _react.useCallback)(function (currentItem) {
-    var allItem = _toConsumableArray(listBoxElement.querySelectorAll('[role="option"]'));
-
-    var currentItemIndex = allItem.indexOf(currentItem);
-    var nextItem = null;
-
+  const findNextItem = (0, _react.useCallback)(currentItem => {
+    const allItem = [...listBoxElement.querySelectorAll('[role="option"]')];
+    const currentItemIndex = allItem.indexOf(currentItem);
+    let nextItem = null;
     if (currentItemIndex !== -1 && currentItemIndex < allItem.length - 1) {
       nextItem = allItem[currentItemIndex + 1];
     }
-
     return nextItem;
   }, [listBoxElement]);
-  var handleOnSelect = (0, _react.useCallback)(function (event, value) {
+  const handleOnSelect = (0, _react.useCallback)((event, value) => {
     event.stopPropagation();
-    if (disabled === true) return; // 選取選項
-    // 點選 all 全選
+    if (disabled === true) return;
 
+    // 選取選項
+    // 點選 all 全選
     if (multiple) {
       if (value.toString() === allOptionId && selectedAllOptions.length < newOptions.length) {
-        for (var index = 1; index < newOptions.length; index += 1) {
+        for (let index = 1; index < newOptions.length; index += 1) {
           onSelect(newOptions[index].id);
         }
       }
-
       if (value.toString() !== allOptionId && !selectedAllOptions.includes(value.toString())) {
         // 選取一個選項，變成全選
         if (selectedAllOptions.length + 2 === newOptions.length) {
@@ -290,16 +172,15 @@ var Select = function Select(_ref) {
           // 選取特定選項
           onSelect(value);
         }
-      } // 刪除選項
-      // 點選 all 刪除全選
-
+      }
 
+      // 刪除選項
+      // 點選 all 刪除全選
       if (value.toString() === allOptionId && selectedAllOptions.length === newOptions.length) {
-        for (var _index = 0; _index < newOptions.length; _index += 1) {
-          onDeselect(newOptions[_index].id);
+        for (let index = 0; index < newOptions.length; index += 1) {
+          onDeselect(newOptions[index].id);
         }
       }
-
       if (value.toString() !== allOptionId && selectedAllOptions.includes(value.toString())) {
         // 原本是 all 全選後來刪除其中一個選項
         if (selectedAllOptions.length === newOptions.length) {
@@ -309,23 +190,20 @@ var Select = function Select(_ref) {
           onDeselect(value);
         }
       }
-
       setDisplay(true);
     } else {
       onSelect(value);
       setDisplay(false);
     }
-
     comboboxElement.focus();
     setSearch('');
   }, [disabled, onSelect, comboboxElement, selectedAllOptions, onDeselect, newOptions, allOptionId, multiple]);
-  var handleOnDeselect = (0, _react.useCallback)(function (event, value) {
+  const handleOnDeselect = (0, _react.useCallback)((event, value) => {
     event.stopPropagation();
     if (disabled === true) return;
-
     if (multiple) {
       if (value.toString() === allOptionId) {
-        for (var index = 0; index < optionList.length; index += 1) {
+        for (let index = 0; index < optionList.length; index += 1) {
           onDeselect(optionList[index].id);
         }
       } else {
@@ -334,42 +212,36 @@ var Select = function Select(_ref) {
     } else {
       onDeselect(value);
     }
-  }, [disabled, onDeselect, optionList, allOptionId, multiple]); // list all selected option
+  }, [disabled, onDeselect, optionList, allOptionId, multiple]);
 
-  var selectedItem = (0, _react.useMemo)(function () {
+  // list all selected option
+  const selectedItem = (0, _react.useMemo)(() => {
     if (selectedOptions.length > 0) {
       if (multiple) {
         if (selectedOptions[0].id === allOptionId) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
             content: selectedOptions[0].text,
-            onClick: function onClick(event) {
-              return handleOnDeselect(event, selectedOptions[0].id);
-            },
+            onClick: event => handleOnDeselect(event, selectedOptions[0].id),
             disabled: disabled
           }, selectedOptions[0].id);
         }
-
-        return selectedOptions.map(function (value) {
+        return selectedOptions.map(value => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultiple.default, {
             content: value.text,
-            onClick: function onClick(event) {
-              return handleOnDeselect(event, value.id);
-            },
+            onClick: event => handleOnDeselect(event, value.id),
             disabled: disabled
           }, value.id);
         });
       }
-
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedSingle.default, {
         children: selectedOptions[0].text
       });
     }
-
     return placeholder;
   }, [placeholder, handleOnDeselect, multiple, selectedOptions, disabled, allOptionId]);
-  var optionItem = (0, _react.useMemo)(function () {
+  const optionItem = (0, _react.useMemo)(() => {
     if (optionList.length <= 0) return null;
-    return optionList.map(function (option) {
+    return optionList.map(option => {
       if (option.child && option.child.length > 0) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionGroup.default, {
           "aria-labelledby": option.text,
@@ -377,14 +249,12 @@ var Select = function Select(_ref) {
             role: "presentation",
             id: option.text,
             children: option.text
-          }), option.child.map(function (option) {
+          }), option.child.map(option => {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
               role: "option",
               tabIndex: "0",
               id: option.id,
-              onClick: function onClick(event) {
-                return handleOnSelect(event, option.id);
-              },
+              onClick: event => handleOnSelect(event, option.id),
               focus: focusedOption && focusedOption.id === option.id.toString(),
               selected: option.selected,
               "aria-selected": option.selected,
@@ -393,39 +263,34 @@ var Select = function Select(_ref) {
           })]
         }, option.text);
       }
-
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
         role: "option",
         tabIndex: "0",
         id: option.id,
-        onClick: function onClick(event) {
-          return handleOnSelect(event, option.id);
-        },
+        onClick: event => handleOnSelect(event, 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 listbox
-  // and set listbox width according to combobox current width
+  }, [optionList, focusedOption, handleOnSelect]);
 
-  var handleToggle = function handleToggle() {
+  // show or hide listbox
+  // and set listbox width according to combobox current width
+  const handleToggle = () => {
     if (disabled === true) return;
-    var tmpDisplay = !display;
-
+    const tmpDisplay = !display;
     if (!tmpDisplay) {
       setFocusedOption(null);
     }
-
     setDisplay(tmpDisplay);
     update();
-  }; // handle keyboard interaction
-
-
-  var handleKeyUp = function handleKeyUp(event) {
-    var key = event.keyCode;
+  };
 
+  // handle keyboard interaction
+  const handleKeyUp = event => {
+    const key = event.keyCode;
     switch (key) {
       case _utils.KEY_CODE.ENTER:
         if (!display) {
@@ -433,71 +298,53 @@ var Select = function Select(_ref) {
         } else if (focusedOption) {
           handleOnSelect(event, focusedOption.id);
         }
-
         break;
-
       case _utils.KEY_CODE.ESCAPE:
         if (display) {
           handleToggle();
         }
-
         break;
-
       case _utils.KEY_CODE.UP:
         {
           if (!focusedOption) {
             return;
           }
-
-          var previousItem = findPreviousItem(focusedOption);
-
+          const previousItem = findPreviousItem(focusedOption);
           if (previousItem) {
             handleFocusItem(previousItem);
           }
-
           break;
         }
-
       case _utils.KEY_CODE.DOWN:
         {
           if (!focusedOption) {
             return;
           }
-
-          var nextItem = findNextItem(focusedOption);
-
+          const nextItem = findNextItem(focusedOption);
           if (nextItem) {
             handleFocusItem(nextItem);
           }
-
           break;
         }
-
       case _utils.KEY_CODE.END:
         {
           event.preventDefault();
-          var itemList = listBoxElement.querySelectorAll('[role="option"]');
-
+          const itemList = listBoxElement.querySelectorAll('[role="option"]');
           if (itemList.length) {
             handleFocusItem(itemList[itemList.length - 1]);
           }
-
           break;
         }
-
       case _utils.KEY_CODE.HOME:
         event.preventDefault();
         focusFirstItem();
         break;
-
       default:
         break;
     }
   };
-
-  var handleKeyDown = function handleKeyDown(event) {
-    var key = event.keyCode;
-
+  const handleKeyDown = event => {
+    const key = event.keyCode;
     switch (key) {
       case _utils.KEY_CODE.ENTER:
       case _utils.KEY_CODE.ESCAPE:
@@ -507,34 +354,31 @@ var Select = function Select(_ref) {
       case _utils.KEY_CODE.HOME:
         event.preventDefault();
         break;
-
       default:
         break;
     }
-  }; // handle search keyword change
-
+  };
 
-  var handleSearchChange = function handleSearchChange(event) {
+  // handle search keyword change
+  const handleSearchChange = event => {
     if (onSearch) {
       onSearch(event.target.value);
     }
-
     setSearch(event.target.value);
   };
-
-  var handleFocus = function handleFocus(event) {
+  const handleFocus = event => {
     event.preventDefault();
     event.stopPropagation();
     setIsFocusCombobox(true);
-  }; // determine selected option(s)
-
+  };
 
-  (0, _react.useEffect)(function () {
+  // determine selected option(s)
+  (0, _react.useEffect)(() => {
     if (!newOptions) return;
-    var tmpSelectedOptions = [];
-    newOptions.forEach(function (option) {
+    const tmpSelectedOptions = [];
+    newOptions.forEach(option => {
       if (option.child && option.child.length > 0) {
-        option.child.forEach(function (option) {
+        option.child.forEach(option => {
           if (multiple && selectedAllOptions.includes(option.id.toString())) {
             tmpSelectedOptions.push(option);
           } else if (selectedAllOptions === option.id.toString()) {
@@ -548,99 +392,87 @@ var Select = function Select(_ref) {
           tmpSelectedOptions.push(option);
         }
       }
-
       return false;
     });
     setSelectedOptions(tmpSelectedOptions);
   }, [newOptions, selectedAllOptions, multiple]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (update) {
-      setTimeout(function () {
+      setTimeout(() => {
         update();
       }, 100);
     }
-  }, [update, listBoxWidth]); // observe element resized
+  }, [update, listBoxWidth]);
 
-  (0, _react.useEffect)(function () {
+  // observe element resized
+  (0, _react.useEffect)(() => {
     if (!comboboxElement) 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);
-          }
+    const resizeObserverInstance = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.target) {
+          const borderBoxSize = entry.target.clientWidth;
+          setListBoxWidth(borderBoxSize);
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
     });
     resizeObserverInstance.observe(comboboxElement);
-    return function () {
+    return () => {
       // unobserve element
       resizeObserverInstance.unobserve(comboboxElement);
     };
-  }, [comboboxElement]); // re-setup focus when option list changed and update popper position
+  }, [comboboxElement]);
 
-  (0, _react.useEffect)(function () {
+  // re-setup focus when option list changed and update popper position
+  (0, _react.useEffect)(() => {
     setupFocus();
     if (update) update();
-  }, [setupFocus, optionList, update]); // parse option list when filtered options change
+  }, [setupFocus, optionList, update]);
 
-  (0, _react.useEffect)(function () {
+  // parse option list when filtered options change
+  (0, _react.useEffect)(() => {
     if (!filteredOptions) return;
-    setOptionList(filteredOptions.map(function (option) {
+    setOptionList(filteredOptions.map(option => {
       if (option.child && option.child.length > 0) {
-        return _objectSpread(_objectSpread({}, option), {}, {
-          child: option.child.map(function (option) {
-            var selected = false;
-
+        return {
+          ...option,
+          child: option.child.map(option => {
+            let selected = false;
             if (multiple && selectedAllOptions.includes(option.id.toString())) {
               selected = true;
             } else if (selectedAllOptions === option.id.toString()) {
               selected = true;
             }
-
-            return _objectSpread(_objectSpread({}, option), {}, {
-              selected: selected
-            });
+            return {
+              ...option,
+              selected
+            };
           })
-        });
+        };
       }
-
-      var selected = false;
-
+      let selected = false;
       if (multiple && selectedAllOptions.includes(option.id.toString())) {
         selected = true;
       } else if (selectedAllOptions === option.id.toString()) {
         selected = true;
       }
-
-      return _objectSpread(_objectSpread({}, option), {}, {
-        selected: selected
-      });
+      return {
+        ...option,
+        selected
+      };
     }));
-  }, [filteredOptions, multiple, selectedAllOptions]); // filter options on search keyword changed
+  }, [filteredOptions, multiple, selectedAllOptions]);
 
-  (0, _react.useEffect)(function () {
-    var tmpFilteredOptions = [];
-    newOptions.forEach(function (option) {
+  // filter options on search keyword changed
+  (0, _react.useEffect)(() => {
+    const tmpFilteredOptions = [];
+    newOptions.forEach(option => {
       if (option.child && option.child.length > 0) {
-        var tmpFilteredChildOptions = option.child.filter(function (option) {
-          return option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1;
-        });
-
+        const tmpFilteredChildOptions = option.child.filter(option => option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
         if (tmpFilteredChildOptions.length > 0) {
-          tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
+          tmpFilteredOptions.push({
+            ...option,
             child: tmpFilteredChildOptions
-          }));
+          });
         }
       } else if (option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
         tmpFilteredOptions.push(option);
@@ -648,17 +480,16 @@ var Select = function Select(_ref) {
     });
     setFilteredOptions(tmpFilteredOptions);
   }, [search, newOptions]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (display) {
       setupFocus();
-
       if (allowSearch) {
         searchBoxElement.current.focus();
       }
     }
   }, [setupFocus, display, allowSearch]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-    onOutsideClick: function onOutsideClick() {
+    onOutsideClick: () => {
       setDisplay(false);
       if (onBlur) onBlur();
       setIsFocusCombobox(false);
@@ -683,14 +514,14 @@ var Select = function Select(_ref) {
       onFocus: handleFocus,
       placeholder: placeholder,
       children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-        onClick: function onClick() {
+        onClick: () => {
           onSelect('');
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandArrow, {
         "aria-haspopup": "listbox",
         "aria-expanded": display
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, _objectSpread(_objectSpread({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, {
       role: "listbox",
       tabIndex: "0",
       id: id,
@@ -699,8 +530,8 @@ var Select = function Select(_ref) {
       onKeyDown: handleKeyDown,
       width: listBoxWidth,
       $display: display,
-      style: styles.popper
-    }, attributes.popper), {}, {
+      style: styles.popper,
+      ...attributes.popper,
       placement: state && state.placement,
       children: [allowSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBox.default, {
         ref: searchBoxElement,
@@ -714,44 +545,55 @@ var Select = function Select(_ref) {
           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(--font-on-background);\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  ", "\n"])), function (_ref2) {
-  var disabled = _ref2.disabled;
+const 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(--font-on-background);\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  ", "\n"])), _ref2 => {
+  let {
+    disabled
+  } = _ref2;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
-}, function (_ref3) {
-  var $display = _ref3.$display;
+}, _ref3 => {
+  let {
+    $display
+  } = _ref3;
   return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
   return disabled && 'cursor: not-allowed;opacity: 0.5;';
-}, function (_ref5) {
-  var placeholder = _ref5.placeholder;
+}, _ref5 => {
+  let {
+    placeholder
+  } = _ref5;
   return placeholder && 'color: var(--font-on-mute);';
-}, function (_ref6) {
-  var fullWidth = _ref6.fullWidth;
+}, _ref6 => {
+  let {
+    fullWidth
+  } = _ref6;
   return fullWidth ? 'width: 100%' : 'max-width: 320px';
-}, function (_ref7) {
-  var large = _ref7.large;
+}, _ref7 => {
+  let {
+    large
+  } = _ref7;
   return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
-}, function (_ref8) {
-  var $fill = _ref8.$fill;
+}, _ref8 => {
+  let {
+    $fill
+  } = _ref8;
   return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
-}, function (_ref9) {
-  var fillReverse = _ref9.fillReverse;
+}, _ref9 => {
+  let {
+    fillReverse
+  } = _ref9;
   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  "]))));
+const 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"])));
+const 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"])));
-
+const 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;
+var _default = exports.default = Select;