@rescui/select 0.11.7 → 0.11.9

package/lib/parts/trigger.p.module.css.js

@@ -1,30 +1,30 @@
 var styles = {
-  "themeLight": "_themeLight_1wnutq5_27",
-  "themeDark": "_themeDark_1wnutq5_30",
-  "sizeS": "_sizeS_1wnutq5_34",
-  "sizeM": "_sizeM_1wnutq5_37",
-  "sizeL": "_sizeL_1wnutq5_40",
-  "classic": "_classic_1wnutq5_44",
-  "rock": "_rock_1wnutq5_47",
-  "main": "_main_1wnutq5_51",
-  "open": "_open_1wnutq5_73",
-  "focused": "_focused_1wnutq5_77",
-  "searchFocused": "_searchFocused_1wnutq5_78",
-  "error": "_error_1wnutq5_80",
-  "searchKeyFocused": "_searchKeyFocused_1wnutq5_85",
-  "enabled": "_enabled_1wnutq5_89",
-  "disabled": "_disabled_1wnutq5_95",
-  "isMulti": "_isMulti_1wnutq5_125",
-  "iconsWrapper": "_iconsWrapper_1wnutq5_143",
-  "labelWrapper": "_labelWrapper_1wnutq5_168",
-  "label": "_label_1wnutq5_168",
-  "labelNotSelected": "_labelNotSelected_1wnutq5_218",
-  "searchInput": "_searchInput_1wnutq5_231",
-  "multi": "_multi_1wnutq5_271",
-  "tagsContainer": "_tagsContainer_1wnutq5_291",
-  "tag": "_tag_1wnutq5_291",
-  "toggle": "_toggle_1wnutq5_313",
-  "icon": "_icon_1wnutq5_143",
-  "clearIcon": "_clearIcon_1wnutq5_380"
+  "themeLight": "_themeLight_dm5qw9_27",
+  "themeDark": "_themeDark_dm5qw9_30",
+  "sizeS": "_sizeS_dm5qw9_34",
+  "sizeM": "_sizeM_dm5qw9_37",
+  "sizeL": "_sizeL_dm5qw9_40",
+  "classic": "_classic_dm5qw9_44",
+  "rock": "_rock_dm5qw9_47",
+  "main": "_main_dm5qw9_51",
+  "open": "_open_dm5qw9_73",
+  "focused": "_focused_dm5qw9_77",
+  "searchFocused": "_searchFocused_dm5qw9_78",
+  "error": "_error_dm5qw9_80",
+  "searchKeyFocused": "_searchKeyFocused_dm5qw9_85",
+  "enabled": "_enabled_dm5qw9_89",
+  "disabled": "_disabled_dm5qw9_95",
+  "isMulti": "_isMulti_dm5qw9_125",
+  "iconsWrapper": "_iconsWrapper_dm5qw9_143",
+  "labelWrapper": "_labelWrapper_dm5qw9_168",
+  "label": "_label_dm5qw9_168",
+  "labelNotSelected": "_labelNotSelected_dm5qw9_218",
+  "searchInput": "_searchInput_dm5qw9_231",
+  "multi": "_multi_dm5qw9_271",
+  "tagsContainer": "_tagsContainer_dm5qw9_291",
+  "tag": "_tag_dm5qw9_291",
+  "toggle": "_toggle_dm5qw9_313",
+  "icon": "_icon_dm5qw9_143",
+  "clearIcon": "_clearIcon_dm5qw9_380"
 };
 export { styles as default };

package/lib/parts/use-observable-force-rerender.js

@@ -1,19 +1,12 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useRef, useState } from 'react';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 
-var useObservableForceRerender = function useObservableForceRerender() {
-  var observableRef = useRef(null);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      setDummyState = _useState2[1];
-
-  useResizeObserver(observableRef, function () {
+const useObservableForceRerender = () => {
+  const observableRef = useRef(null);
+  const [, setDummyState] = useState(false);
+  useResizeObserver(observableRef, () => {
     //force rerender
-    setDummyState(function (s) {
-      return !s;
-    });
+    setDummyState(s => !s);
   }, {
     ignoreFirstCall: true
   });

package/lib/select.js

@@ -1,27 +1,4 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["options", "size", "mode", "theme", "className", "value", "onChange", "placeholder", "isClearable", "isLoading", "isDisabled", "isSearchable", "noOptionsMessage", "placement", "boldLabel"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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; }
-
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import "core-js/modules/es.array.join.js";
-import "core-js/modules/es.regexp.constructor.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.to-string.js";
-import "core-js/modules/es.function.name.js";
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -37,35 +14,33 @@ import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getMovedCursorInde
 import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from './key-codes.js';
 import styles from './parts/common-select.p.module.css.js'; // eslint-disable-next-line complexity
 
-var Option = function Option(_ref) {
-  var selected = _ref.selected,
-      cursorIndex = _ref.cursorIndex,
-      item = _ref.item,
-      isLastItem = _ref.isLastItem,
-      highlightedItemRef = _ref.highlightedItemRef,
-      handleSelectIndex = _ref.handleSelectIndex,
-      handleHighlightIndex = _ref.handleHighlightIndex;
+const Option = _ref => {
+  let {
+    selected,
+    cursorIndex,
+    item,
+    isLastItem,
+    highlightedItemRef,
+    handleSelectIndex,
+    handleHighlightIndex
+  } = _ref;
 
   if (item.type === OptionGroupTypes.OPTION) {
-    var _context;
-
-    var index = item.index,
-        label = item.label;
-    var value = getOptionValue(item);
-    var isSelected = selected && value === getOptionValue(selected);
-    var isHighlighted = isIndexMatchCursor(cursorIndex, index);
+    const {
+      index,
+      label
+    } = item;
+    const value = getOptionValue(item);
+    const isSelected = selected && value === getOptionValue(selected);
+    const isHighlighted = isIndexMatchCursor(cursorIndex, index);
     return /*#__PURE__*/React.createElement(MenuItem, {
       selected: isSelected,
       highlighted: isHighlighted,
       ref: isHighlighted ? highlightedItemRef : null,
-      onMouseMove: function onMouseMove() {
-        return handleHighlightIndex(index);
-      },
-      onClick: function onClick() {
-        return handleSelectIndex(index);
-      },
+      onMouseMove: () => handleHighlightIndex(index),
+      onClick: () => handleSelectIndex(index),
       className: cn(isLastItem && styles.lastOption),
-      "data-test": _filterInstanceProperty(_context = ['select-menu-item', isHighlighted && 'select-menu-item-highlighted', isSelected && 'select-menu-item-selected']).call(_context, Boolean).join(' ')
+      "data-test": ['select-menu-item', isHighlighted && 'select-menu-item-highlighted', isSelected && 'select-menu-item-selected'].filter(Boolean).join(' ')
     }, label);
   }
 
@@ -76,140 +51,96 @@ var Option = function Option(_ref) {
   }
 
   if (item.type === OptionGroupTypes.HEADER) {
-    var _label = item.label;
+    const {
+      label
+    } = item;
     return /*#__PURE__*/React.createElement(GroupHeader, {
-      text: _label
+      text: label
     });
   }
 
   return null;
 };
 
-var getOptionKey = function getOptionKey(item, i) {
+const getOptionKey = (item, i) => {
   if (item.type === OptionGroupTypes.OPTION) {
-    var _context2;
-
-    var value = getOptionValue(item);
-    return _concatInstanceProperty(_context2 = "".concat(value, "_")).call(_context2, item.index[0]);
+    const value = getOptionValue(item);
+    return `${value}_${item.index[0]}`;
   } else if (item.type === OptionGroupTypes.DIVIDER) {
-    return "divider".concat(i);
+    return `divider${i}`;
   } else if (item.type === OptionGroupTypes.HEADER) {
-    return "header".concat(i);
+    return `header${i}`;
   }
 
   return null;
 };
 
-var SIZE_STYLES = {
+const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var MENU_SIZE_STYLES = {
+const MENU_SIZE_STYLES = {
   s: styles.menuSizeS,
   m: styles.menuSizeM,
   l: styles.menuSizeL
 }; // eslint-disable-next-line complexity
 
-var Select = function Select(_ref2) {
-  var _context5;
-
-  var options = _ref2.options,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 'm' : _ref2$size,
-      _ref2$mode = _ref2.mode,
-      mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
-      themeFromProps = _ref2.theme,
-      _ref2$className = _ref2.className,
-      className = _ref2$className === void 0 ? null : _ref2$className,
-      _ref2$value = _ref2.value,
-      value = _ref2$value === void 0 ? undefined : _ref2$value,
-      onChange = _ref2.onChange,
-      placeholder = _ref2.placeholder,
-      _ref2$isClearable = _ref2.isClearable,
-      isClearable = _ref2$isClearable === void 0 ? false : _ref2$isClearable,
-      _ref2$isLoading = _ref2.isLoading,
-      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
-      _ref2$isDisabled = _ref2.isDisabled,
-      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
-      _ref2$isSearchable = _ref2.isSearchable,
-      isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
-      noOptionsMessage = _ref2.noOptionsMessage,
-      _ref2$placement = _ref2.placement,
-      placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
-      boldLabel = _ref2.boldLabel,
-      restProps = _objectWithoutProperties(_ref2, _excluded);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      triggerFormWrapperRef = _useState2[0],
-      setTriggerFormWrapperRef = _useState2[1];
-
-  var theme = useThemeWithUndefined(themeFromProps);
-  var dropdownRef = useRef(null);
-  var highlightedItemRef = /*#__PURE__*/React.createRef();
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isKeyboardNavigating = _useState4[0],
-      setIsKeyboardNavigating = _useState4[1];
-
-  var skipScrollingRef = useRef(false);
-
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      searchString = _useState6[0],
-      setSearchString = _useState6[1];
-
-  var groups = useStrongMemo(function () {
-    return convertToOptionGroupsIfNeeded(options);
-  }, [options]);
-  var filteredGroups = useStrongMemo(function () {
+const Select = _ref2 => {
+  let {
+    options,
+    size = 'm',
+    mode = 'classic',
+    theme: themeFromProps,
+    className = null,
+    value = undefined,
+    onChange,
+    placeholder,
+    isClearable = false,
+    isLoading = false,
+    isDisabled = false,
+    isSearchable = false,
+    noOptionsMessage,
+    placement = 'bottom',
+    boldLabel,
+    ...restProps
+  } = _ref2;
+  const [triggerFormWrapperRef, setTriggerFormWrapperRef] = useState(null);
+  const theme = useThemeWithUndefined(themeFromProps);
+  const dropdownRef = useRef(null);
+  const highlightedItemRef = /*#__PURE__*/React.createRef();
+  const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(false);
+  const skipScrollingRef = useRef(false);
+  const [searchString, setSearchString] = useState('');
+  const groups = useStrongMemo(() => convertToOptionGroupsIfNeeded(options), [options]);
+  const filteredGroups = useStrongMemo(() => {
     if (searchString === '') {
       return groups;
     }
 
-    var filter = new RegExp("(?:^|\\s)".concat(escapeRegex(searchString)), 'i');
-    return _mapInstanceProperty(groups).call(groups, function (g) {
-      var _context3;
-
-      return _objectSpread(_objectSpread({}, g), {}, {
-        options: _filterInstanceProperty(_context3 = g.options).call(_context3, function (_ref3) {
-          var label = _ref3.label;
-          return filter.test(label);
-        })
-      });
-    });
+    const filter = new RegExp(`(?:^|\\s)${escapeRegex(searchString)}`, 'i');
+    return groups.map(g => ({ ...g,
+      options: g.options.filter(_ref3 => {
+        let {
+          label
+        } = _ref3;
+        return filter.test(label);
+      })
+    }));
   }, [searchString, groups]);
-
-  var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      menuIsOpen = _useState8[0],
-      setMenuIsOpen = _useState8[1];
-
-  var _useState9 = useState(function () {
-    return getDefaultCursorIndex(filteredGroups);
-  }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      cursorIndex = _useState10[0],
-      setCursorIndex = _useState10[1];
-
-  useEffect(function () {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [cursorIndex, setCursorIndex] = useState(() => getDefaultCursorIndex(filteredGroups));
+  useEffect(() => {
     setCursorIndex(getDefaultCursorIndex(filteredGroups));
 
     if (searchString !== '') {
       setMenuIsOpen(true);
     }
   }, [searchString, filteredGroups]);
-  var isEmptyMenu = useMemo(function () {
-    return isGroupsEmpty(filteredGroups);
-  }, [filteredGroups]);
-  var handleSelectIndex = useCallback(function (index) {
-    var _index = _slicedToArray(index, 2),
-        grpIndex = _index[0],
-        optIndex = _index[1];
-
-    var selectedOption = filteredGroups[grpIndex].options[optIndex];
+  const isEmptyMenu = useMemo(() => isGroupsEmpty(filteredGroups), [filteredGroups]);
+  const handleSelectIndex = useCallback(index => {
+    const [grpIndex, optIndex] = index;
+    const selectedOption = filteredGroups[grpIndex].options[optIndex];
     setMenuIsOpen(false);
     setSearchString('');
     setIsKeyboardNavigating(false);
@@ -218,32 +149,28 @@ var Select = function Select(_ref2) {
       onChange(selectedOption);
     }
   }, [onChange, filteredGroups]);
-  useEffect(function () {
+  useEffect(() => {
     if (dropdownRef.current) {
       dropdownRef.current.scheduleUpdate();
     }
   }, [searchString]);
-  var handleMouseMove = useCallback(function () {
-    return setIsKeyboardNavigating(false);
-  }, []);
-  useEffect(function () {
+  const handleMouseMove = useCallback(() => setIsKeyboardNavigating(false), []);
+  useEffect(() => {
     if (isKeyboardNavigating) {
       document.addEventListener('mousemove', handleMouseMove);
     }
 
-    return function () {
-      return document.removeEventListener('mousemove', handleMouseMove);
-    };
+    return () => document.removeEventListener('mousemove', handleMouseMove);
   }, [handleMouseMove, isKeyboardNavigating]);
-  useEffect(function () {
+  useEffect(() => {
     if (isKeyboardNavigating && highlightedItemRef.current) {
       if (skipScrollingRef.current) {
         skipScrollingRef.current = false;
       } else {
-        var elementToScrollTo = highlightedItemRef.current;
+        let elementToScrollTo = highlightedItemRef.current;
 
         if (cursorIndex[0] === 0 && cursorIndex[1] === 0) {
-          var groupHeader = highlightedItemRef.current.previousSibling;
+          const groupHeader = highlightedItemRef.current.previousSibling;
 
           if (groupHeader) {
             elementToScrollTo = groupHeader;
@@ -259,15 +186,15 @@ var Select = function Select(_ref2) {
       }
     }
   }, [highlightedItemRef, cursorIndex, isKeyboardNavigating]);
-  var handleClose = useCallback(function () {
+  const handleClose = useCallback(() => {
     setSearchString('');
     setMenuIsOpen(false);
     setIsKeyboardNavigating(false);
   }, []);
-  var handleKeyNavigation = useCallback( // eslint-disable-next-line complexity
-  function (e) {
+  const handleKeyNavigation = useCallback( // eslint-disable-next-line complexity
+  e => {
     if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
-      var isDownDirection = e.key === ARROW_DOWN;
+      const isDownDirection = e.key === ARROW_DOWN;
       setCursorIndex(getMovedCursorIndex(filteredGroups, cursorIndex, isDownDirection));
       setIsKeyboardNavigating(true);
       e.preventDefault();
@@ -287,20 +214,16 @@ var Select = function Select(_ref2) {
       handleClose();
     }
   }, [filteredGroups, cursorIndex, handleClose, handleSelectIndex, isSearchable]);
-  var handleClick = useCallback(function () {
+  const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
     }
 
-    setMenuIsOpen(function (currentMenuIsOpen) {
-      return !currentMenuIsOpen;
-    });
+    setMenuIsOpen(currentMenuIsOpen => !currentMenuIsOpen);
     setSearchString('');
   }, [isDisabled]);
-  var handleSearchInputChange = useCallback(function (searchValue) {
-    return setSearchString(searchValue);
-  }, []);
-  var handleClearClick = useCallback(function () {
+  const handleSearchInputChange = useCallback(searchValue => setSearchString(searchValue), []);
+  const handleClearClick = useCallback(() => {
     setCursorIndex(getDefaultCursorIndex(filteredGroups));
     setMenuIsOpen(false);
 
@@ -308,7 +231,7 @@ var Select = function Select(_ref2) {
       onChange(null);
     }
   }, [filteredGroups, onChange]);
-  var handleTriggerKeyDown = useCallback(function (e) {
+  const handleTriggerKeyDown = useCallback(e => {
     if (e.key === ESCAPE) {
       handleClose();
       e.preventDefault();
@@ -321,9 +244,9 @@ var Select = function Select(_ref2) {
     if (menuIsOpen) {
       handleKeyNavigation(e);
     } else {
-      var target = e.target;
-      var trigger = target.closest('[data-target="trigger"]');
-      var isTriggerTarget = trigger === target;
+      const target = e.target;
+      const trigger = target.closest('[data-target="trigger"]');
+      const isTriggerTarget = trigger === target;
 
       if (shouldOpenSelect(e.key, isTriggerTarget)) {
         setMenuIsOpen(true);
@@ -341,17 +264,17 @@ var Select = function Select(_ref2) {
       }
     }
   }, [menuIsOpen, isDisabled, isClearable, handleClose, handleClearClick, handleKeyNavigation]);
-  var handleHighlightIndex = useCallback(function (index) {
+  const handleHighlightIndex = useCallback(index => {
     if (!isIndexMatchCursor(cursorIndex, index)) {
       setCursorIndex(index);
     }
   }, [cursorIndex]); // We use invisible and "untouchable" dummy element to observe `size` changes from css to trigger force rerenders
 
-  var observableRef = useObservableForceRerender();
-  var sizeFromCss = null;
+  const observableRef = useObservableForceRerender();
+  let sizeFromCss = null;
 
   if (triggerFormWrapperRef && menuIsOpen) {
-    var _context4;
+    var _context;
 
     // In theory this part of the code might cause issues with SSR.
     // But in this specific context, because of checking ref "triggerFormWrapperRef",
@@ -360,14 +283,14 @@ var Select = function Select(_ref2) {
     // Also, there will be no layout shifts on the following renders because
     // it's a dropdown-content and in most cases it opens only on-demand.
     // In additional, we use "observable" el to watch size changes between rerenders (@media query case).
-    var triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
-    var rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
-    sizeFromCss = _includesInstanceProperty(_context4 = ['s', 'm', 'l']).call(_context4, rawSizeFromCss) ? rawSizeFromCss : null;
+    const triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
+    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
   }
 
-  var actualSize = sizeFromCss || size;
-  var maxHeight = calculateMaxHeight(actualSize);
-  var withGroupsLabel = !withoutGroupsLabel(filteredGroups);
+  const actualSize = sizeFromCss || size;
+  const maxHeight = calculateMaxHeight(actualSize);
+  const withGroupsLabel = !withoutGroupsLabel(filteredGroups);
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
     onRequestClose: handleClose,
@@ -380,8 +303,10 @@ var Select = function Select(_ref2) {
     maxHeight: maxHeight,
     leastMaxHeight: maxHeight,
     disableFocusLock: true,
-    trigger: function trigger(_ref4) {
-      var ref = _ref4.ref;
+    trigger: _ref4 => {
+      let {
+        ref
+      } = _ref4;
       return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
         ref: setTriggerFormWrapperRef,
         className: cn(className, SIZE_STYLES[size]),
@@ -426,18 +351,16 @@ var Select = function Select(_ref2) {
     disableCursor: isKeyboardNavigating,
     className: cn(styles.menu, withGroupsLabel && styles.withGroupsLabel, MENU_SIZE_STYLES[actualSize]),
     enableKeyboardNavigation: false
-  }, !isEmptyMenu ? _mapInstanceProperty(_context5 = getPlainOptionsFromGroups(filteredGroups)).call(_context5, function (item, i, collection) {
-    return /*#__PURE__*/React.createElement(Option, {
-      item: item,
-      isLastItem: i === collection.length - 1,
-      key: getOptionKey(item, i),
-      selected: value,
-      cursorIndex: cursorIndex,
-      highlightedItemRef: highlightedItemRef,
-      handleSelectIndex: handleSelectIndex,
-      handleHighlightIndex: handleHighlightIndex
-    });
-  }) : /*#__PURE__*/React.createElement(MenuItem, {
+  }, !isEmptyMenu ? getPlainOptionsFromGroups(filteredGroups).map((item, i, collection) => /*#__PURE__*/React.createElement(Option, {
+    item: item,
+    isLastItem: i === collection.length - 1,
+    key: getOptionKey(item, i),
+    selected: value,
+    cursorIndex: cursorIndex,
+    highlightedItemRef: highlightedItemRef,
+    handleSelectIndex: handleSelectIndex,
+    handleHighlightIndex: handleHighlightIndex
+  })) : /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
   }, getEmptyMessage(isLoading, isSearchable && searchString.length > 0, noOptionsMessage))));
 };