@os-design/core 1.0.183 → 1.0.185

package/dist/esm/MenuGroup/index.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef, useContext, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { clr } from '@os-design/theming';
+import { m } from '@os-design/media';
+import { MenuContext } from '@os-design/menu-utils';
 import { ellipsisStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
 import { useForwardedState } from '@os-design/utils';
-import { m } from '@os-design/media';
-import { useSelectHandler, MenuContext } from '@os-design/menu-utils';
+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import MenuItem from '../MenuItem';
 const Title = styled.div`
   font-weight: 500;
@@ -38,7 +38,8 @@ const Container = styled.div`
  */
 const MenuGroup = /*#__PURE__*/forwardRef(({
   title,
-  maxSelectedItems = 1,
+  multiple = false,
+  maxSelectedItems = 0,
   value,
   defaultValue,
   onChange = () => {},
@@ -48,39 +49,50 @@ const MenuGroup = /*#__PURE__*/forwardRef(({
   const {
     closeOnSelect
   } = useContext(MenuContext);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [forwardedValue, setForwardedValue] = useForwardedState({
     value,
     defaultValue,
     onChange
   });
-  const onSelect = useSelectHandler({
-    value: forwardedValue || [],
-    onChange: setForwardedValue,
-    maxSelectedItems
-  });
-  const menuItems = useMemo(() => {
-    const selectedItems = forwardedValue || [];
-    return React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child) || child.type !== MenuItem) return child;
-      const {
-        value: childValue,
-        onClick: childOnClick
-      } = child.props;
-      return /*#__PURE__*/React.cloneElement(child, {
-        key: childValue,
-        selected: selectedItems.includes(childValue),
-        onClick: e => {
-          if (!childValue) return;
-          onSelect(childValue);
-          if (childOnClick) childOnClick(e);
-        },
-        ...(!closeOnSelect ? {
-          role: maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',
-          'aria-checked': selectedItems.includes(childValue)
-        } : {})
-      });
+  const onSelect = useCallback(v => {
+    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 menuItems = useMemo(() => React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child) || child.type !== MenuItem) return child;
+    const {
+      value: childValue,
+      onClick: childOnClick
+    } = child.props;
+    const selected = multiple && (forwardedValue || []).includes(childValue) || !multiple && forwardedValue === childValue;
+    return /*#__PURE__*/React.cloneElement(child, {
+      key: childValue,
+      selected,
+      onClick: e => {
+        if (!childValue) return;
+        onSelect(childValue);
+        if (childOnClick) childOnClick(e);
+      },
+      ...(!closeOnSelect ? {
+        role: maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',
+        'aria-checked': selected
+      } : {})
     });
-  }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);
+  }), [children, closeOnSelect, forwardedValue, maxSelectedItems, multiple, onSelect]);
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: maxSelectedItems === 1 ? 'radiogroup' : 'group'
   }, rest, {

package/dist/esm/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","m","MenuContext","ellipsisStyles","clr","useForwardedState","React","forwardRef","useCallback","useContext","useMemo","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","multiple","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","v","includes","filter","item","length","menuItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","selected","cloneElement","key","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { useForwardedState } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'value' | 'onChange' | 'ref'\n>;\ninterface BaseMenuGroupProps<T> extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n}\ninterface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      multiple = false,\n      maxSelectedItems = 0,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const menuItems = useMemo(\n      () =>\n        React.Children.map(children, (child) => {\n          if (!React.isValidElement(child) || child.type !== MenuItem)\n            return child;\n          const { value: childValue, onClick: childOnClick } = child.props;\n          const selected =\n            (multiple && (forwardedValue || []).includes(childValue)) ||\n            (!multiple && forwardedValue === childValue);\n          return React.cloneElement<any>(child, {\n            key: childValue,\n            selected,\n            onClick: (e) => {\n              if (!childValue) return;\n              onSelect(childValue);\n              if (childOnClick) childOnClick(e);\n            },\n            ...(!closeOnSelect\n              ? {\n                  role:\n                    maxSelectedItems === 1\n                      ? 'menuitemradio'\n                      : 'menuitemcheckbox',\n                  'aria-checked': selected,\n                }\n              : {}),\n          });\n        }),\n      [\n        children,\n        closeOnSelect,\n        forwardedValue,\n        maxSelectedItems,\n        multiple,\n        onSelect,\n      ]\n    );\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}

package/dist/esm/Select/index.js

@@ -1,33 +1,37 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { m } from '@os-design/media';
-import { transitionStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import { omitEmotionProps, useBrowserLayoutEffect, useEvent, useForwardedRef, useForwardedState, useResizeObserver } from '@os-design/utils';
+import { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';
+import { m, useIsMinWidth } from '@os-design/media';
+import { ellipsisStyles, resetButtonStyles, transitionStyles } from '@os-design/styles';
+import { clr, ThemeOverrider, 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 from '../InputSearch';
+import useRWLoadNext from '../List/utils/useRWLoadNext';
 import Menu from '../Menu';
-import SelectList from './SelectList';
-import SelectToggle from './SelectToggle';
+import MenuItem from '../MenuItem';
+import Tag from '../Tag';
 import defaultLocale from './utils/defaultLocale';
-const paddingStyles = p => {
+const selectContainerPaddingStyles = p => {
   const paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
   return css`
     padding: calc(${paddingVertical}em - 1px) 0;
   `;
 };
-const openedStyles = p => p.opened && !p.unbordered && css`
+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 unborderedStyles = p => p.unbordered && css`
+const selectContainerUnborderedStyles = p => p.unbordered && css`
     border: 0;
     box-shadow: none !important;
     ${transitionStyles('background-color')(p)};
   `;
-const unborderedHoverStyles = p => p.unbordered && !p.disabled && css`
+const selectContainerUnborderedHoverStyles = p => p.unbordered && !p.disabled && css`
     @media (hover: hover) {
       &:hover,
       &:focus {
@@ -45,10 +49,10 @@ export const SelectContainer = styled(InputContainer, omitEmotionProps('opened',
   height: unset;
   min-height: ${p => p.theme.baseHeight}em;
 
-  ${paddingStyles};
-  ${openedStyles};
-  ${unborderedStyles};
-  ${unborderedHoverStyles};
+  ${selectContainerPaddingStyles};
+  ${selectContainerOpenedStyles};
+  ${selectContainerUnborderedStyles};
+  ${selectContainerUnborderedHoverStyles};
 `;
 const SelectMenu = styled(Menu, omitEmotionProps('width'))`
   padding-top: 0;
@@ -71,6 +75,116 @@ 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;
+  `;
+export const ToggleContent = styled('div', omitEmotionProps('hasLeft', 'hasRight', 'unbordered'))`
+  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)};
+  `;
+export const Title = styled('span', omitEmotionProps('disabled', 'unbordered'))`
+  color: ${p => clr(p.theme.colorText)};
+  ${titleUnborderedTitleStyles};
+  ${titleDisabledStyles};
+  ${ellipsisStyles};
+`;
+const ToggleListItem = styled(Tag, omitEmotionProps('disabled'))`
+  // 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)};`}
+  `;
+export const ToggleIconContainer = styled('span', omitEmotionProps('unbordered', 'disabled'))`
+  color: ${p => clr(p.theme.selectColorIcon)};
+  line-height: 1;
+  ${toggleIconUnborderedStyles};
+`;
+export const ClearIcon = styled(CloseCircle)`
+  transform: scale(1.2) !important;
+`;
+const Addon = styled('span', omitEmotionProps('hasPadding'))`
+  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.
@@ -94,7 +208,8 @@ const Select = /*#__PURE__*/forwardRef(({
   threshold = 10,
   visibleCount = 6,
   overscanCount = 10,
-  maxSelectedItems = 1,
+  multiple = false,
+  maxSelectedItems = 0,
   locale = defaultLocale,
   value,
   defaultValue,
@@ -110,14 +225,14 @@ const Select = /*#__PURE__*/forwardRef(({
   const [width, setWidth] = useState(0);
   const inputSearchContainerRef = useRef(null);
   const [opened, setOpened] = useState(autoOpen);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [forwardedValue, setForwardedValue] = useForwardedState({
     value,
     defaultValue,
     onChange
   });
   useEffect(() => {
-    if (!autoFocus) return;
-    containerRef.current?.focus();
+    if (autoFocus) containerRef.current?.focus();
   }, [autoFocus, containerRef]);
   const onCloseRef = useRef(onClose);
   useEffect(() => {
@@ -151,17 +266,190 @@ const Select = /*#__PURE__*/forwardRef(({
     if (!containerRef.current) return;
     containerRef.current.setAttribute('aria-haspopup', 'listbox');
   }, []);
-  const selectedItems = useMemo(() => (forwardedValue || []).map(v => {
-    const option = (options || []).find(item => item.value === v);
-    return {
-      title: option ? option.title || '' : '',
-      value: v
-    };
-  }), [forwardedValue, options]);
   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 => {
+    if (!multiple) return;
+    setForwardedValue((forwardedValue || []).filter(item => item !== v));
+  }, [forwardedValue, multiple, setForwardedValue]);
+  const toggleContent = useMemo(() => {
+    if (multiple) {
+      if (!forwardedValue || forwardedValue.length === 0) {
+        return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
+      }
+      const items = forwardedValue.map(v => {
+        const option = (options || []).find(item => item.value === v);
+        return {
+          title: option ? option.title || '' : '',
+          value: v
+        };
+      });
+      return /*#__PURE__*/React.createElement(ToggleList, null, items.map(({
+        title,
+        value: v
+      }) => /*#__PURE__*/React.createElement(ToggleListItem, {
+        key: v,
+        disabled: disabled,
+        right: !disabled ? /*#__PURE__*/React.createElement(DeleteButton, {
+          onClick: e => {
+            onDelete(v);
+            e.stopPropagation();
+          },
+          onKeyDown: e => e.stopPropagation(),
+          "aria-label": `${locale.deleteLabel} ${title}`,
+          "aria-hidden": true
+        }, /*#__PURE__*/React.createElement(Close, null)) : undefined,
+        "aria-hidden": true
+      }, title)));
+    }
+    if (!forwardedValue) {
+      return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
+    }
+    const option = (options || []).find(item => item.value === forwardedValue);
+    return /*#__PURE__*/React.createElement(Title, {
+      disabled: disabled,
+      unbordered: unbordered
+    }, option ? option.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 /*#__PURE__*/React.createElement(Loading, null);
+    if (toggleShowClearButton) {
+      return /*#__PURE__*/React.createElement(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
+      }, /*#__PURE__*/React.createElement(ClearIcon, null));
+    }
+    return right || /*#__PURE__*/React.createElement(ToggleIconContainer, {
+      unbordered: unbordered,
+      disabled: disabled
+    }, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
+  }, [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 => {
+    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
+  }) => /*#__PURE__*/React.createElement("div", _extends({
+    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 /*#__PURE__*/React.createElement(MenuItem, _extends({
+      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);
+  }, [containerRef, forwardedValue, multiple, onSelect, options, paddingTop]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
     opened: opened,
     unbordered: unbordered,
@@ -188,51 +476,46 @@ const Select = /*#__PURE__*/forwardRef(({
     "aria-owns": listBoxId
   }, rest, {
     ref: mergedContainerRef
-  }), /*#__PURE__*/React.createElement(SelectToggle, {
-    selectedItems: selectedItems,
-    onDelete: v => setForwardedValue((forwardedValue || []).filter(item => item !== v)),
-    onClear: () => {
-      setForwardedValue([]);
-      if (!containerRef.current) return;
-      containerRef.current.focus();
-    },
-    opened: opened,
-    multiple: maxSelectedItems !== 1,
-    placeholder: placeholder,
-    left: left,
-    leftHasPadding: leftHasPadding,
-    right: right,
-    rightHasPadding: rightHasPadding,
-    unbordered: unbordered,
-    disabled: disabled,
-    clearVisible: clearVisible,
-    loading: loading,
-    locale: locale
-  })), /*#__PURE__*/React.createElement(SelectMenu, {
+  }), /*#__PURE__*/React.createElement(ToggleContainer, null, left && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: 0.8,
+      baseHeight: t.selectToggleListItemHeight / t.sizes.small
+    })
+  }, /*#__PURE__*/React.createElement(ToggleLeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/React.createElement(ToggleContent, {
+    hasLeft: !!left,
+    hasRight: !!right,
+    unbordered: unbordered
+  }, toggleContent), toggleRightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
+    overrides: t => ({
+      buttonPaddingHorizontal: 0.8,
+      baseHeight: t.selectToggleListItemHeight / t.sizes.small
+    })
+  }, /*#__PURE__*/React.createElement(ToggleRightAddon, {
+    hasPadding: toggleRightHasPaddingValue
+  }, toggleRightValue)))), /*#__PURE__*/React.createElement(SelectMenu, {
     trigger: containerRef,
     visible: opened,
     onClose: () => setOpened(false),
     size: size,
     width: width,
-    closeOnSelect: maxSelectedItems === 1,
+    closeOnSelect: !multiple,
     modalTitle: placeholder,
     placement: placement
   }, searchVisible && /*#__PURE__*/React.createElement(InputSearchContainer, {
     ref: inputSearchContainerRef
-  }, /*#__PURE__*/React.createElement(InputSearch, searchProps)), options.length > 0 ? /*#__PURE__*/React.createElement(SelectList, {
-    searchVisible: searchVisible,
-    options: options,
-    visibleCount: visibleCount,
+  }, /*#__PURE__*/React.createElement(InputSearch, searchProps)), options.length > 0 ? /*#__PURE__*/React.createElement(FixedSizeList, {
+    width: "100%",
+    height: height,
+    itemSize: itemSize,
+    itemCount: options.length,
     overscanCount: overscanCount,
-    threshold: threshold,
-    onLoadNext: onLoadNext,
-    maxSelectedItems: maxSelectedItems,
-    containerRef: containerRef,
-    value: forwardedValue,
-    onChange: setForwardedValue,
-    id: listBoxId,
-    size: size
-  }) : /*#__PURE__*/React.createElement(NotFound, null, notFoundText)));
+    onScroll: ({
+      scrollOffset
+    }) => scrollHandler(scrollOffset),
+    innerElementType: InnerElement
+  }, listItemFn) : /*#__PURE__*/React.createElement(NotFound, null, notFoundText)));
 });
 Select.displayName = 'Select';
 export default Select;