@cashub/ui 0.48.28 → 0.49.0-beta.0

package/select/Select.js

@@ -1,746 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactDom = require("react-dom");
-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 _SelectedMultipleTags = _interopRequireDefault(require("./subComponent/SelectedMultipleTags"));
-var _SelectedMultipleText = _interopRequireDefault(require("./subComponent/SelectedMultipleText"));
-var _SelectedMultipleCount = _interopRequireDefault(require("./subComponent/SelectedMultipleCount"));
-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 _Checkbox = _interopRequireDefault(require("./subComponent/Checkbox"));
-var _Footer = _interopRequireDefault(require("./subComponent/Footer"));
-var _figure = require("../figure");
-var _image = require("../image");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const Select = _ref => {
-  let {
-    options,
-    enableSelectAll = false,
-    selected,
-    onSelect,
-    onDeselect,
-    multiple = false,
-    displayMode = 'tags',
-    allowClear = false,
-    allowSearch = true,
-    disabled,
-    placeholder = '',
-    fullWidth,
-    large,
-    fill,
-    fillReverse,
-    onBlur,
-    onSearch,
-    flexGrow,
-    footer
-  } = _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;
-    const newOptions = options.map(item => {
-      return _objectSpread({
-        isDisable: false
-      }, item);
-    });
-    if (options.length > 0 && multiple && enableSelectAll) {
-      newOptions.unshift({
-        id: allOptionId,
-        text: t('All')
-      });
-    }
-    return newOptions;
-  }, [options, multiple, enableSelectAll, allOptionId]);
-  const enabledOptions = (0, _react.useMemo)(() => {
-    return newOptions.filter(item => !item.isDisable);
-  }, [newOptions]);
-
-  // 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(value => value.toString());
-      }
-
-      // single value
-      return selected.toString();
-    }
-    return '';
-  }, [selected]);
-  const selectedAllOptions = (0, _react.useMemo)(() => {
-    if (multiple && enableSelectAll && parsedSelected.length + 1 === enabledOptions.length) {
-      const selectedAllOptions = [...parsedSelected];
-      selectedAllOptions.unshift(allOptionId);
-      return selectedAllOptions;
-    }
-    return parsedSelected;
-  }, [multiple, enableSelectAll, enabledOptions.length, parsedSelected, allOptionId]);
-  const showCheckbox = (0, _react.useMemo)(() => {
-    if (multiple && displayMode === 'text') {
-      return true;
-    }
-    return false;
-  }, [displayMode, multiple]);
-  const getOptionText = (0, _react.useCallback)(option => {
-    return [option.text, option.suffix].filter(text => text || text === 0).join(' ');
-  }, []);
-  const renderOptionContent = (0, _react.useCallback)(option => {
-    var _option$highlightText;
-    const text = getOptionText(option);
-    const highlightText = (_option$highlightText = option.highlightText) === null || _option$highlightText === void 0 ? void 0 : _option$highlightText.toString();
-    if (highlightText && text.includes(highlightText)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionLabel, {
-        children: text.split(highlightText).map((textPart, index, textParts) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-            children: [textPart, index < textParts.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionHighlight, {
-              $color: option.highlightColor,
-              children: highlightText
-            })]
-          }, "".concat(highlightText, "-").concat(index));
-        })
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionLabel, {
-      children: [option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
-        children: ["\xA0", option.suffix]
-      })]
-    });
-  }, [getOptionText]);
-
-  // set focused option
-  const handleFocusItem = (0, _react.useCallback)(element => {
-    if (!optionsElementRef.current) return;
-    setFocusedOption(element);
-    const container = optionsElementRef.current;
-    if (container.scrollHeight > container.clientHeight) {
-      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) {
-        container.scrollTop = element.offsetTop;
-      }
-    }
-  }, []);
-  const focusFirstItem = (0, _react.useCallback)(() => {
-    const firstItem = listBoxElement.querySelector('[role="option"]');
-    if (firstItem) {
-      handleFocusItem(firstItem);
-    }
-  }, [listBoxElement, handleFocusItem]);
-  const setupFocus = (0, _react.useCallback)(() => {
-    if (!listBoxElement) return;
-    const selectedItem = listBoxElement.querySelector('[aria-selected="true"]');
-    if (selectedItem) {
-      handleFocusItem(selectedItem);
-    } else if (optionList.length > 0) {
-      focusFirstItem();
-    } else {
-      setFocusedOption(null);
-    }
-  }, [listBoxElement, handleFocusItem, focusFirstItem, optionList]);
-  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]);
-  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]);
-  const handleOnSelect = (0, _react.useCallback)((event, value) => {
-    event.stopPropagation();
-    if (disabled === true) return;
-    const targetOption = newOptions.find(_ref2 => {
-      let {
-        id,
-        child
-      } = _ref2;
-      return id === value || child && child.find(_ref3 => {
-        let {
-          id
-        } = _ref3;
-        return id === value;
-      });
-    });
-    const actualOpt = targetOption !== null && targetOption !== void 0 && targetOption.child ? targetOption.child.find(_ref4 => {
-      let {
-        id
-      } = _ref4;
-      return id === value;
-    }) : targetOption;
-    if (actualOpt !== null && actualOpt !== void 0 && actualOpt.isDisable) return;
-
-    // 選取選項
-    // 點選 all 全選
-    if (multiple) {
-      if (value.toString() === allOptionId && selectedAllOptions.length < enabledOptions.length) {
-        for (let index = 1; index < enabledOptions.length; index += 1) {
-          onSelect(enabledOptions[index].id);
-        }
-      }
-      if (value.toString() !== allOptionId && !selectedAllOptions.includes(value.toString())) {
-        // 選取一個選項，變成全選
-        if (selectedAllOptions.length + 2 === enabledOptions.length) {
-          onSelect(value);
-        } else {
-          // 選取特定選項
-          onSelect(value);
-        }
-      }
-
-      // 刪除選項
-      // 點選 all 刪除全選
-      if (value.toString() === allOptionId && selectedAllOptions.length === enabledOptions.length) {
-        for (let index = 0; index < enabledOptions.length; index += 1) {
-          onDeselect(enabledOptions[index].id);
-        }
-      }
-      if (value.toString() !== allOptionId && selectedAllOptions.includes(value.toString())) {
-        // 原本是 all 全選後來刪除其中一個選項
-        if (selectedAllOptions.length === enabledOptions.length) {
-          onDeselect(value);
-        } else {
-          // 刪除特定選項
-          onDeselect(value);
-        }
-      }
-      setDisplay(true);
-    } else {
-      onSelect(value);
-      setDisplay(false);
-    }
-    comboboxElement.focus();
-    setSearch('');
-  }, [disabled, onSelect, comboboxElement, selectedAllOptions, onDeselect, newOptions, allOptionId, multiple, enabledOptions]);
-  const handleOnDeselect = (0, _react.useCallback)((event, value) => {
-    event.stopPropagation();
-    if (disabled === true) return;
-    if (multiple) {
-      if (value.toString() === allOptionId) {
-        for (let index = 0; index < optionList.length; index += 1) {
-          onDeselect(optionList[index].id);
-        }
-      } else {
-        onDeselect(value);
-      }
-    } else {
-      onDeselect(value);
-    }
-  }, [disabled, onDeselect, optionList, allOptionId, multiple]);
-
-  // list all selected option
-  const selectedItem = (0, _react.useMemo)(() => {
-    if (selectedOptions.length > 0) {
-      if (multiple) {
-        if (displayMode === 'text') {
-          let text;
-          if (selectedOptions[0].id === allOptionId) {
-            [{
-              text
-            }] = selectedOptions;
-          } else {
-            text = selectedOptions.map(value => {
-              return getOptionText(value);
-            }).join(', ');
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleText.default, {
-            children: text
-          });
-        }
-        if (displayMode === 'count') {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleCount.default, {
-            placeholder: placeholder,
-            count: selectedOptions.length
-          });
-        }
-        if (selectedOptions[0].id === allOptionId) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
-            content: renderOptionContent(selectedOptions[0]),
-            onClick: event => handleOnDeselect(event, selectedOptions[0].id),
-            disabled: disabled
-          }, selectedOptions[0].id);
-        }
-        return selectedOptions.map(value => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
-            content: renderOptionContent(value),
-            onClick: event => handleOnDeselect(event, value.id),
-            disabled: disabled || value.isDisable
-          }, value.id);
-        });
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedSingle.default, {
-        children: [selectedOptions[0].icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          src: selectedOptions[0].icon
-        }), renderOptionContent(selectedOptions[0])]
-      });
-    }
-    return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId, getOptionText, renderOptionContent]);
-  const optionItem = (0, _react.useMemo)(() => {
-    if (optionList.length <= 0) return null;
-    return optionList.map(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(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
-              role: "option",
-              tabIndex: option.isDisable ? '-1' : '0',
-              id: option.id,
-              onClick: event => !option.isDisable && handleOnSelect(event, option.id),
-              focus: focusedOption && focusedOption.id === option.id.toString(),
-              selected: option.selected,
-              "aria-selected": option.selected,
-              "aria-disabled": option.isDisable,
-              disabled: option.isDisable,
-              children: [showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-                selected: option.selected,
-                disabled: option.isDisable
-              }), renderOptionContent(option)]
-            }, option.id);
-          })]
-        }, option.text);
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
-        role: "option",
-        tabIndex: option.isDisable ? '-1' : '0',
-        id: option.id,
-        onClick: event => !option.isDisable && handleOnSelect(event, option.id),
-        focus: focusedOption && focusedOption.id === option.id.toString(),
-        selected: option.selected,
-        "aria-selected": option.selected,
-        "aria-disabled": option.isDisable,
-        disabled: option.isDisable,
-        children: [showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-          selected: option.selected,
-          disabled: option.isDisable
-        }), option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          src: option.icon
-        }), renderOptionContent(option)]
-      }, option.id);
-    });
-  }, [optionList, focusedOption, handleOnSelect, showCheckbox, renderOptionContent]);
-
-  // show or hide listbox
-  // and set listbox width according to combobox current width
-  const handleToggle = () => {
-    if (disabled === true) return;
-    const tmpDisplay = !display;
-    if (!tmpDisplay) {
-      setFocusedOption(null);
-    }
-    setDisplay(tmpDisplay);
-    update();
-  };
-
-  // handle keyboard interaction
-  const handleKeyUp = event => {
-    const key = event.keyCode;
-    switch (key) {
-      case _utils.KEY_CODE.ENTER:
-        if (!display) {
-          handleToggle();
-        } else if (focusedOption) {
-          if (focusedOption.getAttribute('aria-disabled') === 'true') return;
-          handleOnSelect(event, focusedOption.id);
-        }
-        break;
-      case _utils.KEY_CODE.ESCAPE:
-        if (display) {
-          handleToggle();
-        }
-        break;
-      case _utils.KEY_CODE.UP:
-        {
-          if (!focusedOption) {
-            return;
-          }
-          let previousItem = findPreviousItem(focusedOption);
-          while (previousItem && previousItem.getAttribute('aria-disabled') === 'true') {
-            previousItem = findPreviousItem(previousItem);
-          }
-          if (previousItem) {
-            handleFocusItem(previousItem);
-          }
-          break;
-        }
-      case _utils.KEY_CODE.DOWN:
-        {
-          if (!focusedOption) {
-            return;
-          }
-          let nextItem = findNextItem(focusedOption);
-          while (nextItem && nextItem.getAttribute('aria-disabled') === 'true') {
-            nextItem = findNextItem(nextItem);
-          }
-          if (nextItem) {
-            handleFocusItem(nextItem);
-          }
-          break;
-        }
-      case _utils.KEY_CODE.END:
-        {
-          event.preventDefault();
-          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;
-    }
-  };
-  const handleKeyDown = event => {
-    const key = event.keyCode;
-    switch (key) {
-      case _utils.KEY_CODE.ENTER:
-      case _utils.KEY_CODE.ESCAPE:
-      case _utils.KEY_CODE.UP:
-      case _utils.KEY_CODE.DOWN:
-      case _utils.KEY_CODE.END:
-      case _utils.KEY_CODE.HOME:
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  };
-
-  // handle search keyword change
-  const handleSearchChange = event => {
-    if (onSearch) {
-      onSearch(event.target.value);
-    }
-    setSearch(event.target.value);
-  };
-  const handleFocus = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    setIsFocusCombobox(true);
-  };
-
-  // determine selected option(s)
-  (0, _react.useEffect)(() => {
-    if (!newOptions) return;
-    const tmpSelectedOptions = [];
-    newOptions.forEach(option => {
-      if (option.child && option.child.length > 0) {
-        option.child.forEach(option => {
-          if (multiple && selectedAllOptions.includes(option.id.toString())) {
-            tmpSelectedOptions.push(option);
-          } else if (selectedAllOptions === option.id.toString()) {
-            tmpSelectedOptions.push(option);
-          }
-        });
-      } else {
-        if (multiple && selectedAllOptions.includes(option.id.toString())) {
-          tmpSelectedOptions.push(option);
-        } else if (selectedAllOptions === option.id.toString()) {
-          tmpSelectedOptions.push(option);
-        }
-      }
-      return false;
-    });
-    setSelectedOptions(tmpSelectedOptions);
-  }, [newOptions, selectedAllOptions, multiple]);
-  (0, _react.useEffect)(() => {
-    if (update) {
-      setTimeout(() => {
-        update();
-      }, 100);
-    }
-  }, [update, listBoxWidth]);
-
-  // observe element resized
-  (0, _react.useEffect)(() => {
-    if (!comboboxElement) return;
-    const resizeObserverInstance = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        if (entry.target) {
-          const borderBoxSize = entry.target.clientWidth;
-          setListBoxWidth(borderBoxSize);
-        }
-      }
-    });
-    resizeObserverInstance.observe(comboboxElement);
-    return () => {
-      // unobserve element
-      resizeObserverInstance.unobserve(comboboxElement);
-    };
-  }, [comboboxElement]);
-
-  // 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
-  (0, _react.useEffect)(() => {
-    if (!filteredOptions) return;
-    setOptionList(filteredOptions.map(option => {
-      if (option.child && option.child.length > 0) {
-        return _objectSpread(_objectSpread({}, 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
-            });
-          })
-        });
-      }
-      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
-      });
-    }));
-  }, [filteredOptions, multiple, selectedAllOptions]);
-
-  // filter options on search keyword changed
-  (0, _react.useEffect)(() => {
-    const tmpFilteredOptions = [];
-    newOptions.forEach(option => {
-      if (option.child && option.child.length > 0) {
-        const tmpFilteredChildOptions = option.child.filter(option => getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
-        if (tmpFilteredChildOptions.length > 0) {
-          tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
-            child: tmpFilteredChildOptions
-          }));
-        }
-      } else if (getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
-        tmpFilteredOptions.push(option);
-      }
-    });
-    setFilteredOptions(tmpFilteredOptions);
-  }, [search, newOptions, getOptionText]);
-  (0, _react.useEffect)(() => {
-    if (display) {
-      setupFocus();
-      if (allowSearch) {
-        searchBoxElement.current.focus();
-      }
-    }
-  }, [setupFocus, display, allowSearch]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      flexGrow: flexGrow ? 1 : 0
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-      onOutsideClick: () => {
-        setDisplay(false);
-        if (onBlur) onBlur();
-        setIsFocusCombobox(false);
-      },
-      disabled: !isFocusCombobox,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Combobox, {
-        flexGrow: flexGrow,
-        role: "combobox",
-        tabIndex: "0",
-        "aria-haspopup": "listbox",
-        "aria-expanded": display,
-        "aria-owns": id,
-        ref: setComboboxElement,
-        onClick: handleToggle,
-        onKeyUp: handleKeyUp,
-        onKeyDown: handleKeyDown,
-        $display: display,
-        disabled: disabled,
-        fullWidth: fullWidth,
-        large: large,
-        $fill: fill,
-        fillReverse: fillReverse,
-        onFocus: handleFocus,
-        placeholder: placeholder,
-        children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-          onClick: () => {
-            onSelect('');
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandArrow, {
-          "aria-haspopup": "listbox",
-          "aria-expanded": display
-        })]
-      }), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, _objectSpread(_objectSpread({
-        role: "listbox",
-        tabIndex: "0",
-        id: id,
-        ref: setListBoxElement,
-        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"
-          })
-        }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
-          children: footer
-        })]
-      })), document.body)]
-    })
-  });
-};
-const Icon = _ref5 => {
-  let {
-    src
-  } = _ref5;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_figure.IconFigure, {
-      size: "medium",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
-        crossOrigin: "anonymous",
-        src: src,
-        alt: "",
-        roundedS: true
-      })
-    }), "\xA0"]
-  });
-};
-const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\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\n  ", "\n"])), _ref6 => {
-  let {
-    disabled
-  } = _ref6;
-  return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
-}, _ref7 => {
-  let {
-    flexGrow
-  } = _ref7;
-  return !flexGrow && 'min-width: 160px;';
-}, _ref8 => {
-  let {
-    $display
-  } = _ref8;
-  return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
-}, _ref9 => {
-  let {
-    disabled
-  } = _ref9;
-  return disabled && 'cursor: not-allowed;opacity: 0.5;';
-}, _ref10 => {
-  let {
-    placeholder
-  } = _ref10;
-  return placeholder && 'color: var(--font-on-mute);';
-}, _ref11 => {
-  let {
-    fullWidth
-  } = _ref11;
-  return fullWidth ? 'width: 100%' : 'max-width: 320px';
-}, _ref12 => {
-  let {
-    large
-  } = _ref12;
-  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
-}, _ref13 => {
-  let {
-    $fill
-  } = _ref13;
-  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
-}, _ref14 => {
-  let {
-    fillReverse
-  } = _ref14;
-  return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
-});
-Combobox.displayName = 'Combobox';
-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';
-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';
-const Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 12px var(--spacing-s);\n"])));
-Message.displayName = 'Message';
-const OptionBadge = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: var(--color-danger);\n  font-style: italic;\n"])));
-const OptionLabel = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 0;\n"])));
-const OptionHighlight = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref15 => {
-  let {
-    $color
-  } = _ref15;
-  return $color || 'var(--color-danger)';
-});
-var _default = exports.default = Select;