@os-design/core 1.0.199 → 1.0.200

package/src/Select/index.tsx

@@ -0,0 +1,970 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';
+import { m, useIsMinWidth } from '@os-design/media';
+import {
+  WithSize,
+  ellipsisStyles,
+  resetButtonStyles,
+  transitionStyles,
+} from '@os-design/styles';
+import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
+
+import {
+  omitEmotionProps,
+  useBrowserLayoutEffect,
+  useEvent,
+  useFontSize,
+  useForwardedRef,
+  useForwardedState,
+  useResizeObserver,
+  useSize,
+} from '@os-design/utils';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { FixedSizeList } from 'react-window';
+import Button from '../Button';
+import { InputContainer } from '../Input';
+import InputSearch, { InputSearchProps } from '../InputSearch';
+import useRWLoadNext from '../List/utils/useRWLoadNext';
+import Menu from '../Menu';
+import MenuItem, { MenuItemProps } from '../MenuItem';
+import { PopoverProps } from '../Popover';
+import Tag from '../Tag';
+import defaultLocale, { SelectLocale } from './utils/defaultLocale';
+
+export interface Option extends MenuItemProps {
+  title?: string;
+}
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'value' | 'defaultValue' | 'onChange' | 'ref'
+>;
+interface BaseSelectProps<T>
+  extends JsxDivProps,
+    WithSize,
+    Pick<PopoverProps, 'placement'> {
+  /**
+   * Options of the select.
+   * @default undefined
+   */
+  options?: Option[];
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * Adds padding to the left component.
+   * It can be useful when passing an icon or text in the left component.
+   * @default false
+   */
+  leftHasPadding?: boolean;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+  /**
+   * Adds padding to the right component.
+   * It can be useful when passing an icon or text in the right component.
+   * @default false
+   */
+  rightHasPadding?: boolean;
+  /**
+   * The placeholder of the select.
+   * @default undefined
+   */
+  placeholder?: string;
+  /**
+   * Whether the search input visible.
+   * @default false
+   */
+  searchVisible?: boolean;
+  /**
+   * Props of the search input.
+   * @default undefined
+   */
+  searchProps?: InputSearchProps;
+  /**
+   * Text displayed when there are no list items.
+   * @default Not found
+   */
+  notFoundText?: string;
+  /**
+   * Whether the border is hidden.
+   * @default false
+   */
+  unbordered?: boolean;
+  /**
+   * Shows the loading status.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Whether the select is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component have a focus.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Whether the component opens the popup list.
+   * @default false
+   */
+  autoOpen?: boolean;
+  /**
+   * Whether the select has the clear button.
+   * @default false
+   */
+  clearVisible?: boolean;
+  /**
+   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.
+   * @default 10
+   */
+  threshold?: number;
+  /**
+   * Defines how many items inside of the visible "window" to render.
+   * @default 6
+   */
+  visibleCount?: number;
+  /**
+   * Defines how many items outside of the visible "window" to render at all times.
+   * @default 10
+   */
+  overscanCount?: number;
+  /**
+   * The max number of options that the user can select. Zero means unlimited.
+   * Works only when multiple is true.
+   * @default 0
+   */
+  maxSelectedItems?: number;
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: SelectLocale;
+  /**
+   * Selected options.
+   * @default undefined
+   */
+  value?: T;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: T;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: T) => void;
+  /**
+   * The callback to load more items.
+   * @default undefined
+   */
+  onLoadNext?: () => void;
+  /**
+   * The event handler that is called whenever a popup closes.
+   * @default undefined
+   */
+  onClose?: () => void;
+}
+export interface SelectNotMultipleProps extends BaseSelectProps<string | null> {
+  /**
+   * Is it possible to select multiple values.
+   * @default false
+   */
+  multiple?: false;
+}
+export interface SelectMultipleProps extends BaseSelectProps<string[]> {
+  /**
+   * Is it possible to select multiple values.
+   * @default false
+   */
+  multiple: true;
+}
+export type SelectProps = SelectNotMultipleProps | SelectMultipleProps;
+
+const selectContainerPaddingStyles = (p) => {
+  const paddingVertical =
+    (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
+
+  return css`
+    padding: calc(${paddingVertical}em - 1px) 0;
+  `;
+};
+
+const selectContainerOpenedStyles = (p) =>
+  p.opened &&
+  !p.unbordered &&
+  css`
+    border-color: ${clr(p.theme.inputFocusColorBorder)};
+    box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};
+  `;
+
+const selectContainerUnborderedStyles = (p) =>
+  p.unbordered &&
+  css`
+    border: 0;
+    box-shadow: none !important;
+    ${transitionStyles('background-color')(p)};
+  `;
+
+const selectContainerUnborderedHoverStyles = (p) =>
+  p.unbordered &&
+  !p.disabled &&
+  css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        background-color: ${clr(p.theme.buttonGhostColorBgHover)};
+      }
+    }
+  `;
+
+interface SelectContainerProps {
+  opened: boolean;
+  unbordered?: boolean;
+  disabled?: boolean;
+}
+export const SelectContainer = styled(
+  InputContainer,
+  omitEmotionProps('opened', 'unbordered', 'disabled')
+)<SelectContainerProps>`
+  cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  height: unset;
+  min-height: ${(p) => p.theme.baseHeight}em;
+
+  ${selectContainerPaddingStyles};
+  ${selectContainerOpenedStyles};
+  ${selectContainerUnborderedStyles};
+  ${selectContainerUnborderedHoverStyles};
+`;
+
+interface SelectMenuProps {
+  width: number;
+}
+const SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`
+  padding-top: 0;
+  padding-bottom: 0;
+  max-height: unset;
+
+  ${m.min.xs} {
+    width: ${(p) => p.width}px;
+  }
+`;
+
+const NotFound = styled.div`
+  height: ${(p) => p.theme.menuItemHeight}em;
+  display: flex;
+  align-items: center;
+
+  padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;
+  color: ${(p) => clr(p.theme.selectNotFoundColorText)};
+`;
+
+const InputSearchContainer = styled.div`
+  padding: ${(p) => p.theme.menuPaddingVertical}em
+    ${(p) => p.theme.inputPaddingHorizontal}em 0;
+`;
+
+export const ToggleContainer = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`;
+
+const toggleContentNotHasLeftStyles = (p) =>
+  !p.hasLeft &&
+  css`
+    padding-left: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+const toggleContentNotHasRightStyles = (p) =>
+  !p.hasRight &&
+  !p.unbordered &&
+  css`
+    padding-right: ${p.theme.inputPaddingHorizontal}em;
+  `;
+
+interface ToggleContentProps {
+  hasLeft?: boolean;
+  hasRight?: boolean;
+  unbordered?: boolean;
+}
+export const ToggleContent = styled(
+  'div',
+  omitEmotionProps('hasLeft', 'hasRight', 'unbordered')
+)<ToggleContentProps>`
+  flex: 1;
+  ${toggleContentNotHasLeftStyles};
+  ${toggleContentNotHasRightStyles};
+  ${ellipsisStyles};
+`;
+
+export const Placeholder = styled.span`
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+  ${ellipsisStyles};
+`;
+
+const titleUnborderedTitleStyles = (p) =>
+  p.unbordered &&
+  css`
+    font-weight: 500;
+    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
+  `;
+
+const titleDisabledStyles = (p) =>
+  p.disabled &&
+  css`
+    color: ${clr(p.theme.inputDisabledColorText)};
+  `;
+
+type TitleProps = Pick<SelectProps, 'disabled' | 'unbordered'>;
+export const Title = styled(
+  'span',
+  omitEmotionProps('disabled', 'unbordered')
+)<TitleProps>`
+  color: ${(p) => clr(p.theme.colorText)};
+  ${titleUnborderedTitleStyles};
+  ${titleDisabledStyles};
+  ${ellipsisStyles};
+`;
+
+type ToggleListItemProps = Pick<SelectProps, 'disabled'>;
+const ToggleListItem = styled(
+  Tag,
+  omitEmotionProps('disabled')
+)<ToggleListItemProps>`
+  // Reset tag styles
+  padding-top: 0;
+  padding-bottom: 0;
+
+  height: ${(p) => p.theme.selectToggleListItemHeight}em;
+  ${titleDisabledStyles};
+`;
+
+const ToggleList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden; // For ellipsis styles
+
+  margin: 0 ${(p) => p.theme.selectToggleListItemGap}em
+    ${(p) => -p.theme.selectToggleListItemGap}em 0;
+
+  & > div {
+    margin: 0 ${(p) => p.theme.selectToggleListItemGap}em
+      ${(p) => p.theme.selectToggleListItemGap}em 0;
+  }
+`;
+
+const DeleteButton = styled.button`
+  ${resetButtonStyles};
+  cursor: pointer;
+  display: inherit;
+  font-size: 1em;
+  margin-left: 0.2em;
+
+  background-color: transparent;
+  color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};
+    }
+  }
+
+  ${transitionStyles('color')};
+`;
+
+const toggleIconUnborderedStyles = (p) =>
+  p.unbordered &&
+  css`
+    padding-top: 0.2em;
+    font-size: 0.8em;
+    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
+  `;
+
+interface ToggleIconContainerProps {
+  unbordered?: boolean;
+  disabled?: boolean;
+}
+export const ToggleIconContainer = styled(
+  'span',
+  omitEmotionProps('unbordered', 'disabled')
+)<ToggleIconContainerProps>`
+  color: ${(p) => clr(p.theme.selectColorIcon)};
+  line-height: 1;
+  ${toggleIconUnborderedStyles};
+`;
+
+export const ClearIcon = styled(CloseCircle)`
+  transform: scale(1.2) !important;
+`;
+
+interface AddonProps {
+  hasPadding: boolean;
+}
+const Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  color: ${(p) => clr(p.theme.inputColorPlaceholder)};
+
+  svg {
+    transform: scale(1.2);
+  }
+`;
+
+export const ToggleLeftAddon = styled(Addon)`
+  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
+  ${(p) =>
+    p.hasPadding &&
+    css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+
+export const ToggleRightAddon = styled(Addon)`
+  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
+  ${(p) =>
+    p.hasPadding &&
+    css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+
+/**
+ * The component that allows to pick a value from predefined options.
+ */
+const Select = forwardRef<HTMLDivElement, SelectProps>(
+  (
+    {
+      options = [],
+      left,
+      leftHasPadding = false,
+      right,
+      rightHasPadding = false,
+      placeholder,
+      searchVisible = false,
+      searchProps = {},
+      notFoundText = 'Not found',
+      unbordered = false,
+      loading = false,
+      disabled = false,
+      autoFocus = false,
+      autoOpen = false,
+      clearVisible = false,
+      threshold = 10,
+      visibleCount = 6,
+      overscanCount = 10,
+      multiple = false,
+      maxSelectedItems = 0,
+      locale = defaultLocale,
+      value,
+      defaultValue,
+      onChange,
+      onLoadNext = () => {},
+      onClose = () => {},
+      onBlur = () => {},
+      size,
+      placement,
+      ...rest
+    },
+    ref
+  ) => {
+    const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+    const [width, setWidth] = useState(0);
+    const inputSearchContainerRef = useRef<HTMLDivElement>(null);
+    const [opened, setOpened] = useState(autoOpen);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [forwardedValue, setForwardedValue] = useForwardedState<any>({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    useEffect(() => {
+      if (autoFocus) containerRef.current?.focus();
+    }, [autoFocus, containerRef]);
+
+    const onCloseRef = useRef(onClose);
+    useEffect(() => {
+      onCloseRef.current = onClose;
+    }, [onClose]);
+
+    useEffect(() => {
+      if (!opened) onCloseRef.current();
+    }, [opened]);
+
+    /**
+     * Detect the width of the container when the select was opened and update
+     * it when either the container size or the window size has been changed.
+     */
+    const resizeHandler = useCallback(() => {
+      window.requestAnimationFrame(() => {
+        if (!opened || !containerRef.current) return;
+        const nextWidth = containerRef.current.getBoundingClientRect().width;
+        if (width === nextWidth) return;
+        setWidth(nextWidth);
+      });
+    }, [opened, containerRef, width]);
+    useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);
+    useResizeObserver(containerRef, resizeHandler);
+    useEvent(
+      (typeof window !== 'undefined' ? window : undefined) as EventTarget,
+      'resize',
+      resizeHandler
+    );
+
+    // Replace the aria-haspopup attribute from menu to listbox
+    useBrowserLayoutEffect(() => {
+      if (!containerRef.current) return;
+      containerRef.current.setAttribute('aria-haspopup', 'listbox');
+    }, []);
+
+    const listBoxId = useMemo(
+      () => `listbox-${Math.random().toString(36).slice(2, 11)}`,
+      []
+    );
+
+    const blurHandler = useCallback(
+      (e) => {
+        if (!opened) onBlur(e);
+      },
+      [onBlur, opened]
+    );
+
+    const onDelete = useCallback(
+      (v: string) => {
+        if (!multiple) return;
+        setForwardedValue((forwardedValue || []).filter((item) => item !== v));
+      },
+      [forwardedValue, multiple, setForwardedValue]
+    );
+
+    const toggleContent = useMemo(() => {
+      if (multiple) {
+        if (!forwardedValue || forwardedValue.length === 0) {
+          return <Placeholder>{placeholder}</Placeholder>;
+        }
+        const items = forwardedValue.map((v) => {
+          const option = (options || []).find((item) => item.value === v);
+          return { title: option ? option.title || '' : '', value: v };
+        });
+        return (
+          <ToggleList>
+            {items.map(({ title, value: v }) => (
+              <ToggleListItem
+                key={v}
+                disabled={disabled}
+                right={
+                  !disabled ? (
+                    <DeleteButton
+                      onClick={(e) => {
+                        onDelete(v);
+                        e.stopPropagation();
+                      }}
+                      onKeyDown={(e) => e.stopPropagation()}
+                      aria-label={`${locale.deleteLabel} ${title}`}
+                      aria-hidden
+                    >
+                      <Close />
+                    </DeleteButton>
+                  ) : undefined
+                }
+                aria-hidden
+              >
+                {title}
+              </ToggleListItem>
+            ))}
+          </ToggleList>
+        );
+      }
+      if (!forwardedValue) {
+        return <Placeholder>{placeholder}</Placeholder>;
+      }
+      const option = (options || []).find(
+        (item) => item.value === forwardedValue
+      );
+      return (
+        <Title disabled={disabled} unbordered={unbordered}>
+          {option ? option.title : ''}
+        </Title>
+      );
+    }, [
+      disabled,
+      forwardedValue,
+      locale.deleteLabel,
+      multiple,
+      onDelete,
+      options,
+      placeholder,
+      unbordered,
+    ]);
+
+    const toggleShowClearButton = useMemo(() => {
+      if (!clearVisible) return false;
+      if (multiple) return forwardedValue && forwardedValue.length > 0;
+      return !!forwardedValue;
+    }, [clearVisible, forwardedValue, multiple]);
+
+    const toggleOnClear = useCallback(() => {
+      setForwardedValue(multiple ? [] : null);
+      if (!containerRef.current) return;
+      containerRef.current.focus();
+    }, [containerRef, multiple, setForwardedValue]);
+
+    const toggleRightValue = useMemo(() => {
+      if (loading) return <Loading />;
+      if (toggleShowClearButton) {
+        return (
+          <Button
+            type='ghost'
+            wide='never'
+            size='small'
+            disabled={disabled}
+            onClick={(e) => {
+              toggleOnClear();
+              e.stopPropagation();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') toggleOnClear();
+              e.stopPropagation();
+            }}
+            aria-label={locale.clearLabel}
+          >
+            <ClearIcon />
+          </Button>
+        );
+      }
+      return (
+        right || (
+          <ToggleIconContainer unbordered={unbordered} disabled={disabled}>
+            {opened ? <Up /> : <Down />}
+          </ToggleIconContainer>
+        )
+      );
+    }, [
+      disabled,
+      loading,
+      locale.clearLabel,
+      opened,
+      right,
+      toggleOnClear,
+      toggleShowClearButton,
+      unbordered,
+    ]);
+
+    const toggleRightHasPaddingValue = useMemo(() => {
+      if (loading) return true;
+      if (toggleShowClearButton) return false;
+      return right ? rightHasPadding : true;
+    }, [loading, right, rightHasPadding, toggleShowClearButton]);
+
+    const onSelect = useCallback(
+      (v: string) => {
+        if (multiple) {
+          // Delete the value because it was already selected
+          if ((forwardedValue || []).includes(v)) {
+            setForwardedValue(
+              (forwardedValue || []).filter((item) => item !== v)
+            );
+            return;
+          }
+
+          // Add a new value if the number of selected items is less than max
+          if (
+            maxSelectedItems === 0 ||
+            (forwardedValue || []).length < maxSelectedItems
+          ) {
+            setForwardedValue([...(forwardedValue || []), v]);
+            return;
+          }
+          return;
+        }
+        setForwardedValue(v);
+      },
+      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]
+    );
+
+    const windowSize = useSize();
+    const isMinXs = useIsMinWidth('xs');
+    const fontSize = useFontSize(document.body);
+    const { theme } = useTheme();
+
+    const scaleFactor = useMemo(() => {
+      const s = size || 'medium';
+      return ['small', 'medium', 'large'].includes(s)
+        ? theme.sizes[s]
+        : Number(s.replace(/^([0-9]+(\.[0-9]+)?).*/, '$1')) || 1; // Extract the number
+    }, [size, theme.sizes]);
+
+    const paddingBottom = useMemo(() => {
+      const paddingEm = isMinXs
+        ? theme.menuPaddingVertical
+        : theme.modalBodyPaddingVertical[0];
+      return paddingEm * fontSize * scaleFactor;
+    }, [
+      isMinXs,
+      theme.menuPaddingVertical,
+      theme.modalBodyPaddingVertical,
+      fontSize,
+      scaleFactor,
+    ]);
+
+    const paddingTop = useMemo(
+      () => (searchVisible ? 5 * scaleFactor : paddingBottom),
+      [searchVisible, scaleFactor, paddingBottom]
+    );
+
+    const searchInputHeight = useMemo(
+      () =>
+        searchVisible
+          ? (theme.baseHeight + theme.menuPaddingVertical) *
+            fontSize *
+            scaleFactor
+          : 0,
+      [
+        searchVisible,
+        theme.baseHeight,
+        theme.menuPaddingVertical,
+        fontSize,
+        scaleFactor,
+      ]
+    );
+
+    const itemSize = useMemo(
+      () => theme.menuItemHeight * fontSize * scaleFactor,
+      [theme.menuItemHeight, fontSize, scaleFactor]
+    );
+
+    const height = useMemo(() => {
+      // Modal
+      if (!isMinXs) {
+        const maxHeight =
+          windowSize.height -
+          theme.modalHeaderHeight * fontSize * scaleFactor -
+          searchInputHeight;
+        const curHeight =
+          options.length * itemSize + paddingTop + paddingBottom;
+        return curHeight < maxHeight ? curHeight : maxHeight;
+      }
+      // Popover
+      const count =
+        options.length < visibleCount ? options.length : visibleCount;
+      return count * itemSize + paddingTop + paddingBottom;
+    }, [
+      isMinXs,
+      options.length,
+      visibleCount,
+      itemSize,
+      windowSize.height,
+      theme.modalHeaderHeight,
+      fontSize,
+      scaleFactor,
+      searchInputHeight,
+      paddingTop,
+      paddingBottom,
+    ]);
+
+    const scrollHandler = useRWLoadNext({
+      itemCount: options.length,
+      threshold,
+      itemSize,
+      paddingTop,
+      height,
+      onLoadNext,
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const InnerElement = useCallback(
+      ({ style, ...innerElementRest }) => (
+        <div
+          style={{
+            ...style,
+            height: `${
+              parseFloat(style.height) + paddingTop + paddingBottom
+            }px`,
+          }}
+          role='listbox'
+          id={listBoxId}
+          {...innerElementRest}
+        />
+      ),
+      [listBoxId, paddingBottom, paddingTop]
+    );
+
+    const listItemFn = useCallback(
+      ({ index, style }) => {
+        const {
+          title: optionTitle,
+          value: optionValue,
+          onClick: optionOnClick,
+          ...restOption
+        } = options[index];
+        return (
+          <MenuItem
+            style={{
+              ...style,
+              top: `${
+                parseFloat(style.top ? style.top.toString() : '0') + paddingTop
+              }px`,
+            }}
+            selected={
+              (multiple &&
+                (forwardedValue || []).includes(optionValue || '')) ||
+              (!multiple && forwardedValue === optionValue)
+            }
+            onClick={(e) => {
+              if (!optionValue) return;
+              onSelect(optionValue);
+
+              // Focus the input.
+              // Otherwise, if multiple is false and the user presses enter to select an item,
+              // the input will lose focus.
+              if (containerRef.current && !multiple) {
+                containerRef.current.focus();
+              }
+
+              if (optionOnClick) optionOnClick(e);
+            }}
+            role='option'
+            aria-selected={
+              (multiple &&
+                (forwardedValue || []).includes(optionValue || '')) ||
+              (!multiple && forwardedValue === optionValue)
+            }
+            {...restOption}
+          >
+            {optionTitle}
+          </MenuItem>
+        );
+      },
+      [containerRef, forwardedValue, multiple, onSelect, options, paddingTop]
+    );
+
+    return (
+      <>
+        <SelectContainer
+          opened={opened}
+          unbordered={unbordered}
+          disabled={disabled}
+          size={size}
+          tabIndex={!disabled ? 0 : -1}
+          onClick={() => {
+            if (disabled) return;
+            setOpened(!opened);
+          }}
+          onKeyDown={(e) => {
+            if (disabled) return;
+            if (['Enter', ' '].includes(e.key)) {
+              setOpened(!opened);
+              e.preventDefault();
+            }
+          }}
+          onMouseDown={(e) => e.preventDefault()}
+          onBlur={blurHandler}
+          role='combobox'
+          aria-disabled={disabled}
+          aria-busy={loading}
+          aria-haspopup='listbox'
+          aria-owns={listBoxId}
+          {...rest}
+          ref={mergedContainerRef}
+        >
+          <ToggleContainer>
+            {left && (
+              <ThemeOverrider
+                overrides={(t) => ({
+                  buttonPaddingHorizontal: 0.8,
+                  baseHeight: t.selectToggleListItemHeight / t.sizes.small,
+                })}
+              >
+                <ToggleLeftAddon hasPadding={leftHasPadding}>
+                  {left}
+                </ToggleLeftAddon>
+              </ThemeOverrider>
+            )}
+
+            <ToggleContent
+              hasLeft={!!left}
+              hasRight={!!right}
+              unbordered={unbordered}
+            >
+              {toggleContent}
+            </ToggleContent>
+
+            {toggleRightValue && (
+              <ThemeOverrider
+                overrides={(t) => ({
+                  buttonPaddingHorizontal: 0.8,
+                  baseHeight: t.selectToggleListItemHeight / t.sizes.small,
+                })}
+              >
+                <ToggleRightAddon hasPadding={toggleRightHasPaddingValue}>
+                  {toggleRightValue}
+                </ToggleRightAddon>
+              </ThemeOverrider>
+            )}
+          </ToggleContainer>
+        </SelectContainer>
+
+        <SelectMenu
+          trigger={containerRef}
+          visible={opened}
+          onClose={() => setOpened(false)}
+          size={size}
+          width={width}
+          closeOnSelect={!multiple}
+          modalTitle={placeholder}
+          placement={placement}
+        >
+          {searchVisible && (
+            <InputSearchContainer ref={inputSearchContainerRef}>
+              <InputSearch {...searchProps} />
+            </InputSearchContainer>
+          )}
+
+          {options.length > 0 ? (
+            <FixedSizeList
+              width='100%'
+              height={height}
+              itemSize={itemSize}
+              itemCount={options.length}
+              overscanCount={overscanCount}
+              onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}
+              innerElementType={InnerElement}
+            >
+              {listItemFn}
+            </FixedSizeList>
+          ) : (
+            <NotFound>{notFoundText}</NotFound>
+          )}
+        </SelectMenu>
+      </>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+export default Select;