@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/select/Select.js

@@ -0,0 +1,935 @@
+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';
+import { MdClose } from 'react-icons/md';
+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';
+
+const Select = ({
+  options,
+  enableSelectAll = false,
+  selected,
+  onSelect,
+  onDeselect,
+  multiple = false,
+  displayMode = 'tags',
+  allowClear = false,
+  allowSearch = true,
+  disabled,
+  placeholder = '',
+  fullWidth,
+  large,
+  fill,
+  fillReverse,
+  onBlur,
+  onSearch,
+  flexGrow,
+  footer,
+}) => {
+  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 (
+          <OptionLabel>
+            {text.split(highlightText).map((textPart, index, textParts) => {
+              return (
+                <Fragment key={`${highlightText}-${index}`}>
+                  {textPart}
+                  {index < textParts.length - 1 && (
+                    <OptionHighlight $color={option.highlightColor}>
+                      {highlightText}
+                    </OptionHighlight>
+                  )}
+                </Fragment>
+              );
+            })}
+          </OptionLabel>
+        );
+      }
+
+      return (
+        <OptionLabel>
+          {option.text}
+          {option.suffix && <OptionBadge>&nbsp;{option.suffix}</OptionBadge>}
+        </OptionLabel>
+      );
+    },
+    [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(({ id, child }) => id === value || (child && child.find(({ id }) => id === value)));
+      const actualOpt = targetOption?.child ? targetOption.child.find(({ id }) => 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 <SelectedMultipleText>{text}</SelectedMultipleText>;
+        }
+
+        if (displayMode === 'count') {
+          return (
+            <SelectedMultipleCount
+              placeholder={placeholder}
+              firstSelectedText={selectedOptions.length > 0 ? getOptionText(selectedOptions[0]) : ''}
+              count={selectedOptions.length}
+            />
+          );
+        }
+
+        if (selectedOptions[0].id === allOptionId) {
+          return (
+            <SelectedMultipleTags
+              content={renderOptionContent(selectedOptions[0])}
+              key={selectedOptions[0].id}
+              onClick={(event) =>
+                handleOnDeselect(event, selectedOptions[0].id)
+              }
+              disabled={disabled}
+            />
+          );
+        }
+
+        return selectedOptions.map((value) => {
+          return (
+            <SelectedMultipleTags
+              content={renderOptionContent(value)}
+              key={value.id}
+              onClick={(event) => handleOnDeselect(event, value.id)}
+              disabled={disabled}
+            />
+          );
+        });
+      }
+
+      return (
+        <SelectedSingle>
+          {selectedOptions[0].icon && <Icon src={selectedOptions[0].icon} />}
+          {renderOptionContent(selectedOptions[0])}
+        </SelectedSingle>
+      );
+    }
+
+    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 (
+          <OptionGroup aria-labelledby={option.text} key={option.text}>
+            <Option role='presentation' id={option.text}>
+              {option.text}
+            </Option>
+
+            {option.child.map((option) => {
+              return (
+                <Option
+                  role='option'
+                  tabIndex={option.isDisable ? '-1' : '0'}
+                  id={option.id}
+                  key={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}
+                >
+                  {showCheckbox && <Checkbox selected={option.selected} disabled={option.isDisable}/>}
+                  {renderOptionContent(option)}
+                </Option>
+              );
+            })}
+          </OptionGroup>
+        );
+      }
+
+      return (
+        <Option
+          role='option'
+          tabIndex={option.isDisable ? '-1' : '0'}
+          id={option.id}
+          key={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}
+        >
+          {showCheckbox && <Checkbox selected={option.selected} disabled={option.isDisable}/>}
+          {option.icon && <Icon src={option.icon} />}
+          {renderOptionContent(option)}
+        </Option>
+      );
+    });
+  }, [
+    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 (
+    <div
+      style={{
+        flexGrow: flexGrow ? 1 : 0,
+      }}
+    >
+      <OutsideClickHandler
+        onOutsideClick={() => {
+          setDisplay(false);
+          if (onBlur) onBlur();
+          setIsFocusCombobox(false);
+        }}
+        disabled={!isFocusCombobox}
+      >
+        <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}
+        >
+          {selectedItem}
+
+          {selectedOptions.length > 0 &&
+            !multiple &&
+            !disabled &&
+            allowClear && (
+              <CloseButton
+                onClick={() => {
+                  onSelect('');
+                }}
+              />
+            )}
+          <ExpandArrow aria-haspopup='listbox' aria-expanded={display} />
+        </Combobox>
+        {createPortal(
+          <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}
+          >
+            {allowSearch && (
+              <SearchBox
+                ref={searchBoxElement}
+                placeholder='Search'
+                onChange={handleSearchChange}
+                value={search}
+              />
+            )}
+
+            <Options ref={optionsElementRef} allowSearch={allowSearch}>
+              {optionItem || <Message>No results found</Message>}
+            </Options>
+
+            {footer && <Footer>{footer}</Footer>}
+          </ListBox>,
+          document.body,
+        )}
+      </OutsideClickHandler>
+    </div>
+  );
+};
+
+const Icon = ({ src }) => {
+  return (
+    <>
+      <IconFigure size='medium'>
+        <ImageFluid crossOrigin='anonymous' src={src} alt='' roundedS />
+      </IconFigure>
+      &nbsp;
+    </>
+  );
+};
+
+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 {
+    ${({ disabled }) =>
+      !disabled &&
+      `
+        border-color: var(--color-primary);
+        outline: none;
+      `};
+  }
+
+  ${({ flexGrow }) => !flexGrow && 'min-width: 160px;'}
+
+  ${({ $display }) =>
+    $display &&
+    `
+      border-color: var(--color-primary);
+      outline: none;
+    `}
+
+  ${({ disabled }) => disabled && 'cursor: not-allowed;opacity: 0.5;'}
+  ${({ placeholder }) => placeholder && 'color: var(--font-on-mute);'}
+  
+  ${({ fullWidth }) => (fullWidth ? 'width: 100%' : 'max-width: 320px')};
+
+  ${({ large }) =>
+    large &&
+    `
+      height: 40px;
+      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);
+    `}
+
+  ${({ $fill }) =>
+    $fill &&
+    `
+      background: var(--color-background2);
+      border-color: transparent;
+    `}
+
+  ${({ fillReverse }) =>
+    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: ${({ $color }) => $color || 'var(--color-danger)'};
+`;
+
+export default Select;