@os-design/core 1.0.183 → 1.0.184

package/dist/cjs/Select/index.js

@@ -4,26 +4,39 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SelectContainer = void 0;
+exports["default"] = exports.ToggleRightAddon = exports.ToggleLeftAddon = exports.ToggleIconContainer = exports.ToggleContent = exports.ToggleContainer = exports.Title = exports.SelectContainer = exports.Placeholder = exports.ClearIcon = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _icons = require("@os-design/icons");
 var _media = require("@os-design/media");
 var _styles = require("@os-design/styles");
 var _theming = require("@os-design/theming");
 var _utils = require("@os-design/utils");
 var _react2 = _interopRequireWildcard(require("react"));
+var _reactWindow = require("react-window");
+var _Button = _interopRequireDefault(require("../Button"));
 var _Input = require("../Input");
 var _InputSearch = _interopRequireDefault(require("../InputSearch"));
+var _useRWLoadNext = _interopRequireDefault(require("../List/utils/useRWLoadNext"));
 var _Menu = _interopRequireDefault(require("../Menu"));
-var _SelectList = _interopRequireDefault(require("./SelectList"));
-var _SelectToggle = _interopRequireDefault(require("./SelectToggle"));
+var _MenuItem = _interopRequireDefault(require("../MenuItem"));
+var _Tag = _interopRequireDefault(require("../Tag"));
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
-var _excluded = ["options", "left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "autoFocus", "autoOpen", "clearVisible", "threshold", "visibleCount", "overscanCount", "maxSelectedItems", "locale", "value", "defaultValue", "onChange", "onLoadNext", "onClose", "onBlur", "size", "placement"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _excluded = ["options", "left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "autoFocus", "autoOpen", "clearVisible", "threshold", "visibleCount", "overscanCount", "multiple", "maxSelectedItems", "locale", "value", "defaultValue", "onChange", "onLoadNext", "onClose", "onBlur", "size", "placement"],
+  _excluded2 = ["style"],
+  _excluded3 = ["title", "value", "onClick"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -33,24 +46,24 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var paddingStyles = function paddingStyles(p) {
+var selectContainerPaddingStyles = function selectContainerPaddingStyles(p) {
   var paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
   return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: calc(", "em - 1px) 0;\n  "])), paddingVertical);
 };
-var openedStyles = function openedStyles(p) {
+var selectContainerOpenedStyles = function selectContainerOpenedStyles(p) {
   return p.opened && !p.unbordered && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    box-shadow: 0 0 0 0.15em ", ";\n  "])), (0, _theming.clr)(p.theme.inputFocusColorBorder), (0, _theming.clr)(p.theme.inputFocusColorShadow));
 };
-var unborderedStyles = function unborderedStyles(p) {
+var selectContainerUnborderedStyles = function selectContainerUnborderedStyles(p) {
   return p.unbordered && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border: 0;\n    box-shadow: none !important;\n    ", ";\n  "])), (0, _styles.transitionStyles)('background-color')(p));
 };
-var unborderedHoverStyles = function unborderedHoverStyles(p) {
+var selectContainerUnborderedHoverStyles = function selectContainerUnborderedHoverStyles(p) {
   return p.unbordered && !p.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.buttonGhostColorBgHover));
 };
 var SelectContainer = (0, _styled["default"])(_Input.InputContainer, (0, _utils.omitEmotionProps)('opened', 'unbordered', 'disabled'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cursor: ", ";\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  height: unset;\n  min-height: ", "em;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return !p.disabled ? 'pointer' : 'not-allowed';
 }, function (p) {
   return p.theme.baseHeight;
-}, paddingStyles, openedStyles, unborderedStyles, unborderedHoverStyles);
+}, selectContainerPaddingStyles, selectContainerOpenedStyles, selectContainerUnborderedStyles, selectContainerUnborderedHoverStyles);
 exports.SelectContainer = SelectContainer;
 var SelectMenu = (0, _styled["default"])(_Menu["default"], (0, _utils.omitEmotionProps)('width'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: unset;\n\n  ", " {\n    width: ", "px;\n  }\n"])), _media.m.min.xs, function (p) {
   return p.width;
@@ -67,10 +80,75 @@ var InputSearchContainer = _styled["default"].div(_templateObject8 || (_template
 }, function (p) {
   return p.theme.inputPaddingHorizontal;
 });
+var ToggleContainer = _styled["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n"])));
+exports.ToggleContainer = ToggleContainer;
+var toggleContentNotHasLeftStyles = function toggleContentNotHasLeftStyles(p) {
+  return !p.hasLeft && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-left: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
+};
+var toggleContentNotHasRightStyles = function toggleContentNotHasRightStyles(p) {
+  return !p.hasRight && !p.unbordered && (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    padding-right: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
+};
+var ToggleContent = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasLeft', 'hasRight', 'unbordered'))(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  flex: 1;\n  ", ";\n  ", ";\n  ", ";\n"])), toggleContentNotHasLeftStyles, toggleContentNotHasRightStyles, _styles.ellipsisStyles);
+exports.ToggleContent = ToggleContent;
+var Placeholder = _styled["default"].span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.inputColorPlaceholder);
+}, _styles.ellipsisStyles);
+exports.Placeholder = Placeholder;
+var titleUnborderedTitleStyles = function titleUnborderedTitleStyles(p) {
+  return p.unbordered && (0, _react.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    font-weight: 500;\n    ", "\n  "])), !p.disabled && "color: ".concat((0, _theming.clr)(p.theme.colorPrimary), ";"));
+};
+var titleDisabledStyles = function titleDisabledStyles(p) {
+  return p.disabled && (0, _react.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.inputDisabledColorText));
+};
+var Title = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'unbordered'))(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.colorText);
+}, titleUnborderedTitleStyles, titleDisabledStyles, _styles.ellipsisStyles);
+exports.Title = Title;
+var ToggleListItem = (0, _styled["default"])(_Tag["default"], (0, _utils.omitEmotionProps)('disabled'))(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ", "em;\n  ", ";\n"])), function (p) {
+  return p.theme.selectToggleListItemHeight;
+}, titleDisabledStyles);
+var ToggleList = _styled["default"].div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ", "em\n    ", "em 0;\n\n  & > div {\n    margin: 0 ", "em\n      ", "em 0;\n  }\n"])), function (p) {
+  return p.theme.selectToggleListItemGap;
+}, function (p) {
+  return -p.theme.selectToggleListItemGap;
+}, function (p) {
+  return p.theme.selectToggleListItemGap;
+}, function (p) {
+  return p.theme.selectToggleListItemGap;
+});
+var DeleteButton = _styled["default"].button(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ", ";\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetButtonStyles, function (p) {
+  return (0, _theming.clr)(p.theme.selectToggleDeleteButtonColorIcon);
+}, function (p) {
+  return (0, _theming.clr)(p.theme.selectToggleDeleteButtonColorIconHover);
+}, (0, _styles.transitionStyles)('color'));
+var toggleIconUnborderedStyles = function toggleIconUnborderedStyles(p) {
+  return p.unbordered && (0, _react.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ", "\n  "])), !p.disabled && "color: ".concat((0, _theming.clr)(p.theme.colorPrimary), ";"));
+};
+var ToggleIconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('unbordered', 'disabled'))(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 1;\n  ", ";\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.selectColorIcon);
+}, toggleIconUnborderedStyles);
+exports.ToggleIconContainer = ToggleIconContainer;
+var ClearIcon = (0, _styled["default"])(_icons.CloseCircle)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  transform: scale(1.2) !important;\n"])));
+exports.ClearIcon = ClearIcon;
+var Addon = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('hasPadding'))(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ", ";\n\n  svg {\n    transform: scale(1.2);\n  }\n"])), function (p) {
+  return (0, _theming.clr)(p.theme.inputColorPlaceholder);
+});
+var ToggleLeftAddon = (0, _styled["default"])(Addon)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  padding-right: ", "em;\n  ", "\n"])), function (p) {
+  return p.theme.inputAddonPaddingHorizontal;
+}, function (p) {
+  return p.hasPadding && (0, _react.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      padding-left: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
+});
+exports.ToggleLeftAddon = ToggleLeftAddon;
+var ToggleRightAddon = (0, _styled["default"])(Addon)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  padding-left: ", "em;\n  ", "\n"])), function (p) {
+  return p.theme.inputAddonPaddingHorizontal;
+}, function (p) {
+  return p.hasPadding && (0, _react.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n      padding-right: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
+});
 
 /**
  * The component that allows to pick a value from predefined options.
  */
+exports.ToggleRightAddon = ToggleRightAddon;
 var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -105,8 +183,10 @@ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     visibleCount = _ref$visibleCount === void 0 ? 6 : _ref$visibleCount,
     _ref$overscanCount = _ref.overscanCount,
     overscanCount = _ref$overscanCount === void 0 ? 10 : _ref$overscanCount,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$maxSelectedItems = _ref.maxSelectedItems,
-    maxSelectedItems = _ref$maxSelectedItems === void 0 ? 1 : _ref$maxSelectedItems,
+    maxSelectedItems = _ref$maxSelectedItems === void 0 ? 0 : _ref$maxSelectedItems,
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
     value = _ref.value,
@@ -134,6 +214,7 @@ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     opened = _useState4[0],
     setOpened = _useState4[1];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var _useForwardedState = (0, _utils.useForwardedState)({
       value: value,
       defaultValue: defaultValue,
@@ -144,8 +225,7 @@ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     setForwardedValue = _useForwardedState2[1];
   (0, _react2.useEffect)(function () {
     var _containerRef$current;
-    if (!autoFocus) return;
-    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
+    if (autoFocus) (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
   }, [autoFocus, containerRef]);
   var onCloseRef = (0, _react2.useRef)(onClose);
   (0, _react2.useEffect)(function () {
@@ -182,23 +262,205 @@ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     if (!containerRef.current) return;
     containerRef.current.setAttribute('aria-haspopup', 'listbox');
   }, []);
-  var selectedItems = (0, _react2.useMemo)(function () {
-    return (forwardedValue || []).map(function (v) {
-      var option = (options || []).find(function (item) {
-        return item.value === v;
-      });
-      return {
-        title: option ? option.title || '' : '',
-        value: v
-      };
-    });
-  }, [forwardedValue, options]);
   var listBoxId = (0, _react2.useMemo)(function () {
     return "listbox-".concat(Math.random().toString(36).slice(2, 11));
   }, []);
   var blurHandler = (0, _react2.useCallback)(function (e) {
     if (!opened) onBlur(e);
   }, [onBlur, opened]);
+  var onDelete = (0, _react2.useCallback)(function (v) {
+    if (!multiple) return;
+    setForwardedValue((forwardedValue || []).filter(function (item) {
+      return item !== v;
+    }));
+  }, [forwardedValue, multiple, setForwardedValue]);
+  var toggleContent = (0, _react2.useMemo)(function () {
+    if (multiple) {
+      if (!forwardedValue || forwardedValue.length === 0) {
+        return /*#__PURE__*/_react2["default"].createElement(Placeholder, null, placeholder);
+      }
+      var items = forwardedValue.map(function (v) {
+        var option = (options || []).find(function (item) {
+          return item.value === v;
+        });
+        return {
+          title: option ? option.title || '' : '',
+          value: v
+        };
+      });
+      return /*#__PURE__*/_react2["default"].createElement(ToggleList, null, items.map(function (_ref2) {
+        var title = _ref2.title,
+          v = _ref2.value;
+        return /*#__PURE__*/_react2["default"].createElement(ToggleListItem, {
+          key: v,
+          disabled: disabled,
+          right: !disabled ? /*#__PURE__*/_react2["default"].createElement(DeleteButton, {
+            onClick: function onClick(e) {
+              onDelete(v);
+              e.stopPropagation();
+            },
+            onKeyDown: function onKeyDown(e) {
+              return e.stopPropagation();
+            },
+            "aria-label": "".concat(locale.deleteLabel, " ").concat(title),
+            "aria-hidden": true
+          }, /*#__PURE__*/_react2["default"].createElement(_icons.Close, null)) : undefined,
+          "aria-hidden": true
+        }, title);
+      }));
+    }
+    if (!forwardedValue) {
+      return /*#__PURE__*/_react2["default"].createElement(Placeholder, null, placeholder);
+    }
+    var option = (options || []).find(function (item) {
+      return item.value === forwardedValue;
+    });
+    return /*#__PURE__*/_react2["default"].createElement(Title, {
+      disabled: disabled,
+      unbordered: unbordered
+    }, option ? option.title : '');
+  }, [disabled, forwardedValue, locale.deleteLabel, multiple, onDelete, options, placeholder, unbordered]);
+  var toggleShowClearButton = (0, _react2.useMemo)(function () {
+    if (!clearVisible) return false;
+    if (multiple) return forwardedValue && forwardedValue.length > 0;
+    return !!forwardedValue;
+  }, [clearVisible, forwardedValue, multiple]);
+  var toggleOnClear = (0, _react2.useCallback)(function () {
+    setForwardedValue(multiple ? [] : null);
+    if (!containerRef.current) return;
+    containerRef.current.focus();
+  }, [containerRef, multiple, setForwardedValue]);
+  var toggleRightValue = (0, _react2.useMemo)(function () {
+    if (loading) return /*#__PURE__*/_react2["default"].createElement(_icons.Loading, null);
+    if (toggleShowClearButton) {
+      return /*#__PURE__*/_react2["default"].createElement(_Button["default"], {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        disabled: disabled,
+        onClick: function onClick(e) {
+          toggleOnClear();
+          e.stopPropagation();
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'Enter') toggleOnClear();
+          e.stopPropagation();
+        },
+        "aria-label": locale.clearLabel
+      }, /*#__PURE__*/_react2["default"].createElement(ClearIcon, null));
+    }
+    return right || /*#__PURE__*/_react2["default"].createElement(ToggleIconContainer, {
+      unbordered: unbordered,
+      disabled: disabled
+    }, opened ? /*#__PURE__*/_react2["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react2["default"].createElement(_icons.Down, null));
+  }, [disabled, loading, locale.clearLabel, opened, right, toggleOnClear, toggleShowClearButton, unbordered]);
+  var toggleRightHasPaddingValue = (0, _react2.useMemo)(function () {
+    if (loading) return true;
+    if (toggleShowClearButton) return false;
+    return right ? rightHasPadding : true;
+  }, [loading, right, rightHasPadding, toggleShowClearButton]);
+  var onSelect = (0, _react2.useCallback)(function (v) {
+    if (multiple) {
+      // Delete the value because it was already selected
+      if ((forwardedValue || []).includes(v)) {
+        setForwardedValue((forwardedValue || []).filter(function (item) {
+          return item !== v;
+        }));
+        return;
+      }
+
+      // Add a new value if the number of selected items is less than max
+      if (maxSelectedItems === 0 || (forwardedValue || []).length < maxSelectedItems) {
+        setForwardedValue([].concat(_toConsumableArray(forwardedValue || []), [v]));
+        return;
+      }
+      return;
+    }
+    setForwardedValue(v);
+  }, [forwardedValue, maxSelectedItems, multiple, setForwardedValue]);
+  var windowSize = (0, _utils.useSize)();
+  var isMinXs = (0, _media.useIsMinWidth)('xs');
+  var fontSize = (0, _utils.useFontSize)(document.body);
+  var _useTheme = (0, _theming.useTheme)(),
+    theme = _useTheme.theme;
+  var scaleFactor = (0, _react2.useMemo)(function () {
+    var 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]);
+  var paddingBottom = (0, _react2.useMemo)(function () {
+    var paddingEm = isMinXs ? theme.menuPaddingVertical : theme.modalBodyPaddingVertical[0];
+    return paddingEm * fontSize * scaleFactor;
+  }, [isMinXs, theme.menuPaddingVertical, theme.modalBodyPaddingVertical, fontSize, scaleFactor]);
+  var paddingTop = (0, _react2.useMemo)(function () {
+    return searchVisible ? 5 * scaleFactor : paddingBottom;
+  }, [searchVisible, scaleFactor, paddingBottom]);
+  var searchInputHeight = (0, _react2.useMemo)(function () {
+    return searchVisible ? (theme.baseHeight + theme.menuPaddingVertical) * fontSize * scaleFactor : 0;
+  }, [searchVisible, theme.baseHeight, theme.menuPaddingVertical, fontSize, scaleFactor]);
+  var itemSize = (0, _react2.useMemo)(function () {
+    return theme.menuItemHeight * fontSize * scaleFactor;
+  }, [theme.menuItemHeight, fontSize, scaleFactor]);
+  var height = (0, _react2.useMemo)(function () {
+    // Modal
+    if (!isMinXs) {
+      var maxHeight = windowSize.height - theme.modalHeaderHeight * fontSize * scaleFactor - searchInputHeight;
+      var curHeight = options.length * itemSize + paddingTop + paddingBottom;
+      return curHeight < maxHeight ? curHeight : maxHeight;
+    }
+    // Popover
+    var 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]);
+  var scrollHandler = (0, _useRWLoadNext["default"])({
+    itemCount: options.length,
+    threshold: threshold,
+    itemSize: itemSize,
+    paddingTop: paddingTop,
+    height: height,
+    onLoadNext: onLoadNext
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var InnerElement = (0, _react2.useCallback)(function (_ref3) {
+    var style = _ref3.style,
+      innerElementRest = _objectWithoutProperties(_ref3, _excluded2);
+    return /*#__PURE__*/_react2["default"].createElement("div", _extends({
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        height: "".concat(parseFloat(style.height) + paddingTop + paddingBottom, "px")
+      }),
+      role: "listbox",
+      id: listBoxId
+    }, innerElementRest));
+  }, [listBoxId, paddingBottom, paddingTop]);
+  var listItemFn = (0, _react2.useCallback)(function (_ref4) {
+    var index = _ref4.index,
+      style = _ref4.style;
+    var _options$index = options[index],
+      optionTitle = _options$index.title,
+      optionValue = _options$index.value,
+      optionOnClick = _options$index.onClick,
+      restOption = _objectWithoutProperties(_options$index, _excluded3);
+    return /*#__PURE__*/_react2["default"].createElement(_MenuItem["default"], _extends({
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        top: "".concat(parseFloat(style.top ? style.top.toString() : '0') + paddingTop, "px")
+      }),
+      selected: multiple && (forwardedValue || []).includes(optionValue || '') || !multiple && forwardedValue === optionValue,
+      onClick: function 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__*/_react2["default"].createElement(_react2["default"].Fragment, null, /*#__PURE__*/_react2["default"].createElement(SelectContainer, _extends({
     opened: opened,
     unbordered: unbordered,
@@ -227,31 +489,29 @@ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     "aria-owns": listBoxId
   }, rest, {
     ref: mergedContainerRef
-  }), /*#__PURE__*/_react2["default"].createElement(_SelectToggle["default"], {
-    selectedItems: selectedItems,
-    onDelete: function onDelete(v) {
-      return setForwardedValue((forwardedValue || []).filter(function (item) {
-        return item !== v;
-      }));
-    },
-    onClear: function 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__*/_react2["default"].createElement(SelectMenu, {
+  }), /*#__PURE__*/_react2["default"].createElement(ToggleContainer, null, left && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
+    overrides: function overrides(t) {
+      return {
+        buttonPaddingHorizontal: 0.8,
+        baseHeight: t.selectToggleListItemHeight / t.sizes.small
+      };
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(ToggleLeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/_react2["default"].createElement(ToggleContent, {
+    hasLeft: !!left,
+    hasRight: !!right,
+    unbordered: unbordered
+  }, toggleContent), toggleRightValue && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
+    overrides: function overrides(t) {
+      return {
+        buttonPaddingHorizontal: 0.8,
+        baseHeight: t.selectToggleListItemHeight / t.sizes.small
+      };
+    }
+  }, /*#__PURE__*/_react2["default"].createElement(ToggleRightAddon, {
+    hasPadding: toggleRightHasPaddingValue
+  }, toggleRightValue)))), /*#__PURE__*/_react2["default"].createElement(SelectMenu, {
     trigger: containerRef,
     visible: opened,
     onClose: function onClose() {
@@ -259,25 +519,23 @@ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     },
     size: size,
     width: width,
-    closeOnSelect: maxSelectedItems === 1,
+    closeOnSelect: !multiple,
     modalTitle: placeholder,
     placement: placement
   }, searchVisible && /*#__PURE__*/_react2["default"].createElement(InputSearchContainer, {
     ref: inputSearchContainerRef
-  }, /*#__PURE__*/_react2["default"].createElement(_InputSearch["default"], searchProps)), options.length > 0 ? /*#__PURE__*/_react2["default"].createElement(_SelectList["default"], {
-    searchVisible: searchVisible,
-    options: options,
-    visibleCount: visibleCount,
+  }, /*#__PURE__*/_react2["default"].createElement(_InputSearch["default"], searchProps)), options.length > 0 ? /*#__PURE__*/_react2["default"].createElement(_reactWindow.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__*/_react2["default"].createElement(NotFound, null, notFoundText)));
+    onScroll: function onScroll(_ref5) {
+      var scrollOffset = _ref5.scrollOffset;
+      return scrollHandler(scrollOffset);
+    },
+    innerElementType: InnerElement
+  }, listItemFn) : /*#__PURE__*/_react2["default"].createElement(NotFound, null, notFoundText)));
 });
 Select.displayName = 'Select';
 var _default = Select;