@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/select/Select.js

@@ -0,0 +1,811 @@
+import { Fragment, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import OutsideClickHandler from 'react-outside-click-handler';
+import styled from 'styled-components';
+import uniqueId from 'lodash.uniqueid';
+import { TiArrowSortedDown } from 'react-icons/ti/index.esm';
+import { MdClose } from 'react-icons/md/index.esm';
+import { useCustomPopper } from '@cashub/hooks';
+import { KEY_CODE } from '@cashub/utils';
+import media from '../styles/mixin/media';
+import SelectedSingle from './subComponent/SelectedSingle';
+import SelectedMultipleTags from './subComponent/SelectedMultipleTags';
+import SelectedMultipleText from './subComponent/SelectedMultipleText';
+import SelectedMultipleCount from './subComponent/SelectedMultipleCount';
+import ListBox from './subComponent/ListBox';
+import SearchBox from './subComponent/SearchBox';
+import Options from './subComponent/Options';
+import OptionGroup from './subComponent/OptionGroup';
+import Option from './subComponent/Option';
+import Checkbox from './subComponent/Checkbox';
+import Footer from './subComponent/Footer';
+import { IconFigure } from '../figure';
+import { ImageFluid } from '../image';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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
+  } = useTranslation();
+  const [id] = useState(uniqueId('select-'));
+  const [allOptionId] = useState(uniqueId('allOptons-'));
+  const [display, setDisplay] = useState(false);
+  const [comboboxElement, setComboboxElement] = useState(null);
+  const [listBoxElement, setListBoxElement] = useState(null);
+  const optionsElementRef = useRef(null);
+  const searchBoxElement = useRef(null);
+  const [listBoxWidth, setListBoxWidth] = useState(0);
+  const [optionList, setOptionList] = useState([]);
+  const [focusedOption, setFocusedOption] = useState(null);
+  const [isFocusCombobox, setIsFocusCombobox] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const [search, setSearch] = useState('');
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = useCustomPopper(comboboxElement, listBoxElement);
+  const newOptions = useMemo(() => {
+    if (!options) return;
+    const newOptions = options.map(item => {
+      return {
+        isDisable: false,
+        ...item
+      };
+    });
+    if (options.length > 0 && multiple && enableSelectAll) {
+      newOptions.unshift({
+        id: allOptionId,
+        text: t('All')
+      });
+    }
+    return newOptions;
+  }, [options, multiple, enableSelectAll, allOptionId]);
+  const enabledOptions = useMemo(() => {
+    return newOptions.filter(item => !item.isDisable);
+  }, [newOptions]);
+
+  // parse all value to string
+  // for subsequently determine whether it is a selected item
+  const parsedSelected = 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 = 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 = useMemo(() => {
+    if (multiple && displayMode === 'text') {
+      return true;
+    }
+    return false;
+  }, [displayMode, multiple]);
+  const getOptionText = useCallback(option => {
+    return [option.text, option.suffix].filter(text => text || text === 0).join(' ');
+  }, []);
+  const renderOptionContent = useCallback(option => {
+    const text = getOptionText(option);
+    const highlightText = option.highlightText?.toString();
+    if (highlightText && text.includes(highlightText)) {
+      return /*#__PURE__*/_jsx(OptionLabel, {
+        children: text.split(highlightText).map((textPart, index, textParts) => {
+          return /*#__PURE__*/_jsxs(Fragment, {
+            children: [textPart, index < textParts.length - 1 && /*#__PURE__*/_jsx(OptionHighlight, {
+              $color: option.highlightColor,
+              children: highlightText
+            })]
+          }, `${highlightText}-${index}`);
+        })
+      });
+    }
+    return /*#__PURE__*/_jsxs(OptionLabel, {
+      children: [option.text, option.suffix && /*#__PURE__*/_jsxs(OptionBadge, {
+        children: ["\xA0", option.suffix]
+      })]
+    });
+  }, [getOptionText]);
+
+  // set focused option
+  const handleFocusItem = 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 = useCallback(() => {
+    const firstItem = listBoxElement.querySelector('[role="option"]');
+    if (firstItem) {
+      handleFocusItem(firstItem);
+    }
+  }, [listBoxElement, handleFocusItem]);
+  const setupFocus = 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 = 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 = 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 = 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?.child ? targetOption.child.find(_ref4 => {
+      let {
+        id
+      } = _ref4;
+      return id === value;
+    }) : targetOption;
+    if (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 = 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 = 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__*/_jsx(SelectedMultipleText, {
+            children: text
+          });
+        }
+        if (displayMode === 'count') {
+          return /*#__PURE__*/_jsx(SelectedMultipleCount, {
+            placeholder: placeholder,
+            count: selectedOptions.length
+          });
+        }
+        if (selectedOptions[0].id === allOptionId) {
+          return /*#__PURE__*/_jsx(SelectedMultipleTags, {
+            content: renderOptionContent(selectedOptions[0]),
+            onClick: event => handleOnDeselect(event, selectedOptions[0].id),
+            disabled: disabled
+          }, selectedOptions[0].id);
+        }
+        return selectedOptions.map(value => {
+          return /*#__PURE__*/_jsx(SelectedMultipleTags, {
+            content: renderOptionContent(value),
+            onClick: event => handleOnDeselect(event, value.id),
+            disabled: disabled || value.isDisable
+          }, value.id);
+        });
+      }
+      return /*#__PURE__*/_jsxs(SelectedSingle, {
+        children: [selectedOptions[0].icon && /*#__PURE__*/_jsx(Icon, {
+          src: selectedOptions[0].icon
+        }), renderOptionContent(selectedOptions[0])]
+      });
+    }
+    return placeholder;
+  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId, getOptionText, renderOptionContent]);
+  const optionItem = useMemo(() => {
+    if (optionList.length <= 0) return null;
+    return optionList.map(option => {
+      if (option.child && option.child.length > 0) {
+        return /*#__PURE__*/_jsxs(OptionGroup, {
+          "aria-labelledby": option.text,
+          children: [/*#__PURE__*/_jsx(Option, {
+            role: "presentation",
+            id: option.text,
+            children: option.text
+          }), option.child.map(option => {
+            return /*#__PURE__*/_jsxs(Option, {
+              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__*/_jsx(Checkbox, {
+                selected: option.selected,
+                disabled: option.isDisable
+              }), renderOptionContent(option)]
+            }, option.id);
+          })]
+        }, option.text);
+      }
+      return /*#__PURE__*/_jsxs(Option, {
+        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__*/_jsx(Checkbox, {
+          selected: option.selected,
+          disabled: option.isDisable
+        }), option.icon && /*#__PURE__*/_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 KEY_CODE.ENTER:
+        if (!display) {
+          handleToggle();
+        } else if (focusedOption) {
+          if (focusedOption.getAttribute('aria-disabled') === 'true') return;
+          handleOnSelect(event, focusedOption.id);
+        }
+        break;
+      case KEY_CODE.ESCAPE:
+        if (display) {
+          handleToggle();
+        }
+        break;
+      case 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 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 KEY_CODE.END:
+        {
+          event.preventDefault();
+          const itemList = listBoxElement.querySelectorAll('[role="option"]');
+          if (itemList.length) {
+            handleFocusItem(itemList[itemList.length - 1]);
+          }
+          break;
+        }
+      case KEY_CODE.HOME:
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      default:
+        break;
+    }
+  };
+  const handleKeyDown = event => {
+    const key = event.keyCode;
+    switch (key) {
+      case KEY_CODE.ENTER:
+      case KEY_CODE.ESCAPE:
+      case KEY_CODE.UP:
+      case KEY_CODE.DOWN:
+      case KEY_CODE.END:
+      case 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)
+  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]);
+  useEffect(() => {
+    if (update) {
+      setTimeout(() => {
+        update();
+      }, 100);
+    }
+  }, [update, listBoxWidth]);
+
+  // observe element resized
+  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
+  useEffect(() => {
+    setupFocus();
+    if (update) update();
+  }, [setupFocus, optionList, update]);
+
+  // parse option list when filtered options change
+  useEffect(() => {
+    if (!filteredOptions) return;
+    setOptionList(filteredOptions.map(option => {
+      if (option.child && option.child.length > 0) {
+        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 {
+              ...option,
+              selected
+            };
+          })
+        };
+      }
+      let selected = false;
+      if (multiple && selectedAllOptions.includes(option.id.toString())) {
+        selected = true;
+      } else if (selectedAllOptions === option.id.toString()) {
+        selected = true;
+      }
+      return {
+        ...option,
+        selected
+      };
+    }));
+  }, [filteredOptions, multiple, selectedAllOptions]);
+
+  // filter options on search keyword changed
+  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({
+            ...option,
+            child: tmpFilteredChildOptions
+          });
+        }
+      } else if (getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
+        tmpFilteredOptions.push(option);
+      }
+    });
+    setFilteredOptions(tmpFilteredOptions);
+  }, [search, newOptions, getOptionText]);
+  useEffect(() => {
+    if (display) {
+      setupFocus();
+      if (allowSearch) {
+        searchBoxElement.current.focus();
+      }
+    }
+  }, [setupFocus, display, allowSearch]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      flexGrow: flexGrow ? 1 : 0
+    },
+    children: /*#__PURE__*/_jsxs(OutsideClickHandler, {
+      onOutsideClick: () => {
+        setDisplay(false);
+        if (onBlur) onBlur();
+        setIsFocusCombobox(false);
+      },
+      disabled: !isFocusCombobox,
+      children: [/*#__PURE__*/_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__*/_jsx(CloseButton, {
+          onClick: () => {
+            onSelect('');
+          }
+        }), /*#__PURE__*/_jsx(ExpandArrow, {
+          "aria-haspopup": "listbox",
+          "aria-expanded": display
+        })]
+      }), /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(ListBox, {
+        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__*/_jsx(SearchBox, {
+          ref: searchBoxElement,
+          placeholder: "Search",
+          onChange: handleSearchChange,
+          value: search
+        }), /*#__PURE__*/_jsx(Options, {
+          ref: optionsElementRef,
+          allowSearch: allowSearch,
+          children: optionItem || /*#__PURE__*/_jsx(Message, {
+            children: "No results found"
+          })
+        }), footer && /*#__PURE__*/_jsx(Footer, {
+          children: footer
+        })]
+      }), document.body)]
+    })
+  });
+};
+const Icon = _ref5 => {
+  let {
+    src
+  } = _ref5;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconFigure, {
+      size: "medium",
+      children: /*#__PURE__*/_jsx(ImageFluid, {
+        crossOrigin: "anonymous",
+        src: src,
+        alt: "",
+        roundedS: true
+      })
+    }), "\xA0"]
+  });
+};
+const Combobox = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-height: 36px;
+  cursor: pointer;
+  position: relative;
+  background: transparent;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-l);
+  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);
+
+  &:focus {
+    ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return !disabled && `
+        border-color: var(--color-primary);
+        outline: none;
+      `;
+}};
+  }
+
+  ${_ref7 => {
+  let {
+    flexGrow
+  } = _ref7;
+  return !flexGrow && 'min-width: 160px;';
+}}
+
+  ${_ref8 => {
+  let {
+    $display
+  } = _ref8;
+  return $display && `
+      border-color: var(--color-primary);
+      outline: none;
+    `;
+}}
+
+  ${_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 && `
+      height: 40px;
+      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);
+    `;
+}}
+
+  ${_ref13 => {
+  let {
+    $fill
+  } = _ref13;
+  return $fill && `
+      background: var(--color-background2);
+      border-color: transparent;
+    `;
+}}
+
+  ${_ref14 => {
+  let {
+    fillReverse
+  } = _ref14;
+  return fillReverse && `
+      background: var(--color-background1);
+      border-color: transparent;
+    `;
+}}
+`;
+Combobox.displayName = 'Combobox';
+const CloseButton = styled(MdClose)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-primary);
+  font-size: var(--font-body1);
+  right: var(--spacing-l);
+
+  ${media.tablet`
+    right: calc(var(--spacing) + var(--spacing-s));
+  `};
+`;
+CloseButton.displayName = 'CloseButton';
+const ExpandArrow = styled(TiArrowSortedDown)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-primary);
+  font-size: var(--font-body1);
+  right: var(--spacing-s);
+`;
+ExpandArrow.displayName = 'ExpandArrow';
+const Message = styled.p`
+  margin: 0;
+  padding: 12px var(--spacing-s);
+`;
+Message.displayName = 'Message';
+const OptionBadge = styled.span`
+  color: var(--color-danger);
+  font-style: italic;
+`;
+const OptionLabel = styled.div`
+  min-width: 0;
+`;
+const OptionHighlight = styled.span`
+  color: ${_ref15 => {
+  let {
+    $color
+  } = _ref15;
+  return $color || 'var(--color-danger)';
+}};
+`;
+export default Select;