@rescui/select 0.1.1 → 0.2.0

package/lib/parts/common-select.module.pcss.js

@@ -1,4 +1,4 @@
 var styles = {
-  "menu": "_menu_o1h6k8_1"
+  "menu": "_menu_6jc7fw_1"
 };
 export default styles;

package/lib/parts/form-trigger-wrapper.d.ts

@@ -8,6 +8,7 @@ export declare type FormTriggerWrapperProps = {
     error?: boolean | React.ReactNode;
     label?: React.ReactNode;
     note?: React.ReactNode;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
 declare const FormTriggerWrapper: React.FC<FormTriggerWrapperProps>;
 export default FormTriggerWrapper;

package/lib/parts/form-trigger-wrapper.js

@@ -68,7 +68,8 @@ var FormTriggerWrapper = function FormTriggerWrapper(_ref4) {
       error = _ref4.error,
       label = _ref4.label,
       note = _ref4.note,
-      children = _ref4.children;
+      children = _ref4.children,
+      onKeyDown = _ref4.onKeyDown;
   var theme = useTheme(themeFromProps);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -77,7 +78,9 @@ var FormTriggerWrapper = function FormTriggerWrapper(_ref4) {
     "data-test": "select-wrapper"
   }, /*#__PURE__*/React.createElement(Label, {
     size: size
-  }, label), children, /*#__PURE__*/React.createElement(Error, {
+  }, label), /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onKeyDown
+  }, children), /*#__PURE__*/React.createElement(Error, {
     size: size
   }, error), /*#__PURE__*/React.createElement(Note, {
     size: size

package/lib/parts/form-trigger.module.pcss.js

@@ -1,9 +1,9 @@
 var styles = {
-  "errorMessage": "_errorMessage_8huogz_3",
-  "sizeL": "_sizeL_8huogz_7",
-  "label": "_label_8huogz_8",
-  "note": "_note_8huogz_11",
-  "sizeM": "_sizeM_8huogz_16",
-  "sizeS": "_sizeS_8huogz_25"
+  "errorMessage": "_errorMessage_mmt5mf_3",
+  "sizeL": "_sizeL_mmt5mf_7",
+  "label": "_label_mmt5mf_8",
+  "note": "_note_mmt5mf_11",
+  "sizeM": "_sizeM_mmt5mf_16",
+  "sizeS": "_sizeS_mmt5mf_25"
 };
 export default styles;

package/lib/parts/multiselect.d.ts

@@ -10,10 +10,6 @@ export interface MultiselectProps {
      * Array of options
      */
     options: SelectOptionOrGroup[];
-    /**
-     * Default value for Multiselect state. `onChange` callback is required.
-     */
-    defaultValue?: SelectOption[];
     /**
      * Is Multiselect preserve single string
      */
@@ -49,7 +45,7 @@ export interface MultiselectProps {
     /**
      * Value of the select
      */
-    value?: SelectOption[];
+    value: SelectOption[];
     /**
      * Change value callback. `value => ...`
      */
@@ -75,6 +71,7 @@ export interface MultiselectProps {
      * Text to display when there are no options
      */
     noOptionsMessage?: NoOptionsMessage;
+    name?: string;
 }
 declare const Multiselect: React.FC<MultiselectProps>;
 export default Multiselect;

package/lib/parts/multiselect.js

@@ -1,39 +1,48 @@
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
 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", "defaultValue", "value", "onChange", "placeholder", "isSingleLine", "isClearable", "isLoading", "isDisabled", "noOptionsMessage", "placement"];
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["options", "size", "mode", "theme", "className", "value", "onChange", "placeholder", "isSingleLine", "isClearable", "isLoading", "isDisabled", "noOptionsMessage", "placement"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.function.name.js";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useRef, useState, useReducer, useEffect, useCallback } from 'react';
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+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 React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { CheckIcon } from '@rescui/icons';
 import Dropdown from '@rescui/dropdown';
 import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
 import { useTheme } from '@rescui/ui-contexts';
-import { convertToOptionGroupsIfNeeded, reverseTheme, getEmptyMessage, shouldOpenSelect, calculateMaxHeight } from '../utils.js';
+import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getOptionValue, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, reverseTheme, getPlainOptionsFromGroups, getEmptyMessage, withoutGroupsLabel, OptionGroupTypes, convertToOptionGroupsIfNeeded, calculateMaxHeight } from '../utils.js';
 import { optionType, optionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
-import { multiselectReducer, getInitialState } from '../state/multiselect/reducer.js';
-import { setGroups, closeMenu, openMenu, setCursorIndex, cursorMovedDown, cursorMovedUp, clearSelectedAndCloseMenu } from '../state/select/actions.js';
-import { setSelectedValue, setHideSelected, addSelectedIndex, removeSelectedIndex, removeSelectedOption } from '../state/multiselect/actions.js';
-import { withoutGroupsLabel, OptionGroupTypes, getOptionValue, isIndexMatchCursor, getCursorIndex } from '../state/select/selectors.js';
-import { isEmpty, getSelectedArray, getPlainOptions, isSelected, getGroups } from '../state/multiselect/selectors.js';
-import { ESCAPE, BACKSPACE, ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB } from '../key-codes.js';
+import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from '../key-codes.js';
 import SelectTrigger from './trigger.js';
 import FormTriggerWrapper from './form-trigger-wrapper.js';
-import styles from './common-select.module.pcss.js';
-/* eslint-disable no-nested-ternary */
-// eslint-disable-next-line complexity
+import styles from './common-select.module.pcss.js'; // eslint-disable-next-line complexity
 
 var Option = function Option(_ref) {
-  var state = _ref.state,
+  var groups = _ref.groups,
+      selected = _ref.selected,
+      cursorIndex = _ref.cursorIndex,
       size = _ref.size,
       item = _ref.item,
       isSingleLine = _ref.isSingleLine,
       isLastItem = _ref.isLastItem,
       highlightedItemRef = _ref.highlightedItemRef,
       handleHighlightIndex = _ref.handleHighlightIndex,
-      toggleSelectIndex = _ref.toggleSelectIndex;
-  var marginInPx = withoutGroupsLabel(state) ? 0 : {
+      handleSelectIndex = _ref.handleSelectIndex;
+  var marginInPx = withoutGroupsLabel(groups) ? 0 : {
     l: 12,
     m: 6,
     s: 0
@@ -43,8 +52,10 @@ var Option = function Option(_ref) {
     var index = item.index,
         label = item.label;
     var value = getOptionValue(item);
-    var isItemSelected = isSelected(state, value);
-    var isHighlighted = isIndexMatchCursor(state, index);
+    var isItemSelected = Boolean(selected && selected.length && selected.some(function (s) {
+      return value === getOptionValue(s);
+    }));
+    var isHighlighted = isIndexMatchCursor(cursorIndex, index);
     var icon = isSingleLine && isItemSelected ? /*#__PURE__*/React.createElement(CheckIcon, {
       size: size
     }) : null;
@@ -56,7 +67,7 @@ var Option = function Option(_ref) {
         return handleHighlightIndex(index);
       },
       onClick: function onClick() {
-        return toggleSelectIndex(index);
+        return handleSelectIndex(index);
       },
       style: {
         marginBottom: isLastItem ? "".concat(marginInPx, "px") : ''
@@ -98,42 +109,83 @@ var getOptionKey = function getOptionKey(item, i) {
   return null;
 };
 
-function callOnChangeIfNeeded(onChange, state, action) {
-  if (onChange) {
-    onChange(getSelectedArray(multiselectReducer(state, action)));
+function filterSelected(groups, selected) {
+  var selectedValues = {};
+
+  if (selected) {
+    selected.forEach(function (s) {
+      selectedValues[getOptionValue(s)] = true;
+    });
   }
+
+  return _mapInstanceProperty(groups).call(groups, function (g) {
+    var newOptions = [];
+
+    if (g.options) {
+      var _context2;
+
+      newOptions = _filterInstanceProperty(_context2 = g.options).call(_context2, function (opt) {
+        return !selectedValues[getOptionValue(opt)];
+      });
+    }
+
+    return _objectSpread(_objectSpread({}, g), {}, {
+      options: newOptions
+    });
+  });
 }
 
-var Multiselect = function Multiselect(_ref2) {
-  var _context2;
-
-  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$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? [] : _ref2$defaultValue,
-      _ref2$value = _ref2.value,
-      value = _ref2$value === void 0 ? undefined : _ref2$value,
-      onChange = _ref2.onChange,
-      _ref2$placeholder = _ref2.placeholder,
-      placeholder = _ref2$placeholder === void 0 ? 'Placeholder' : _ref2$placeholder,
-      _ref2$isSingleLine = _ref2.isSingleLine,
-      isSingleLine = _ref2$isSingleLine === void 0 ? false : _ref2$isSingleLine,
-      _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,
-      noOptionsMessage = _ref2.noOptionsMessage,
-      _ref2$placement = _ref2.placement,
-      placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
-      restProps = _objectWithoutProperties(_ref2, _excluded);
+var NativeSelectedOptions = function NativeSelectedOptions(_ref2) {
+  var name = _ref2.name,
+      selected = _ref2.selected;
+
+  if (!selected || !Array.isArray(selected) || !selected.length) {
+    return /*#__PURE__*/React.createElement("input", {
+      type: "hidden",
+      name: name,
+      value: ""
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(selected).call(selected, function (_ref3) {
+    var value = _ref3.value;
+    return /*#__PURE__*/React.createElement("input", {
+      key: value,
+      type: "hidden",
+      name: name,
+      value: value
+    });
+  }));
+};
+
+var Multiselect = function Multiselect(_ref4) {
+  var _context4;
+
+  var options = _ref4.options,
+      _ref4$size = _ref4.size,
+      size = _ref4$size === void 0 ? 'm' : _ref4$size,
+      _ref4$mode = _ref4.mode,
+      mode = _ref4$mode === void 0 ? 'classic' : _ref4$mode,
+      themeFromProps = _ref4.theme,
+      _ref4$className = _ref4.className,
+      className = _ref4$className === void 0 ? null : _ref4$className,
+      _ref4$value = _ref4.value,
+      value = _ref4$value === void 0 ? undefined : _ref4$value,
+      onChange = _ref4.onChange,
+      _ref4$placeholder = _ref4.placeholder,
+      placeholder = _ref4$placeholder === void 0 ? 'Placeholder' : _ref4$placeholder,
+      _ref4$isSingleLine = _ref4.isSingleLine,
+      isSingleLine = _ref4$isSingleLine === void 0 ? false : _ref4$isSingleLine,
+      _ref4$isClearable = _ref4.isClearable,
+      isClearable = _ref4$isClearable === void 0 ? false : _ref4$isClearable,
+      _ref4$isLoading = _ref4.isLoading,
+      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+      _ref4$isDisabled = _ref4.isDisabled,
+      isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
+      noOptionsMessage = _ref4.noOptionsMessage,
+      _ref4$placement = _ref4.placement,
+      placement = _ref4$placement === void 0 ? 'bottom' : _ref4$placement,
+      restProps = _objectWithoutProperties(_ref4, _excluded);
 
   var dropdownRef = useRef(null);
   var highlightedItemRef = useRef();
@@ -145,40 +197,59 @@ var Multiselect = function Multiselect(_ref2) {
       setIsKeyboardNavigating = _useState2[1];
 
   var skipScrollingRef = useRef(false);
+  var groups = useStrongMemo(function () {
+    return convertToOptionGroupsIfNeeded(options);
+  }, [options]);
+  var filteredGroups = useStrongMemo(function () {
+    if (isSingleLine) {
+      return groups;
+    }
 
-  var _useReducer = useReducer(multiselectReducer, getInitialState(convertToOptionGroupsIfNeeded(options), defaultValue, !isSingleLine)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
+    return filterSelected(groups, value);
+  }, [isSingleLine, value, groups]);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      menuIsOpen = _useState4[0],
+      setMenuIsOpen = _useState4[1];
+
+  var _useState5 = useState(function () {
+    return getDefaultCursorIndex(filteredGroups);
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      cursorIndex = _useState6[0],
+      setCursorIndex = _useState6[1];
 
   useEffect(function () {
-    dispatch(setGroups(convertToOptionGroupsIfNeeded(options)));
-  }, [options]);
-  useEffect(function () {
-    if (value !== undefined) {
-      dispatch(setSelectedValue(value));
+    setCursorIndex(getDefaultCursorIndex(filteredGroups));
+  }, [filteredGroups, value]);
+  var isEmptyMenu = useMemo(function () {
+    return isGroupsEmpty(filteredGroups);
+  }, [filteredGroups]);
+  var handleSelectIndex = useCallback(function (index) {
+    var _context3;
+
+    var selectedOption = filteredGroups[index[0]].options[index[1]];
+    var selectedOptionValue = getOptionValue(selectedOption);
+    var optionAdded = !value.some(function (option) {
+      return getOptionValue(option) === selectedOptionValue;
+    });
+    var newSelected = optionAdded ? _concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(value), [selectedOption]) : _filterInstanceProperty(value).call(value, function (option) {
+      return getOptionValue(option) !== selectedOptionValue;
+    });
+
+    if (onChange) {
+      onChange(newSelected);
     }
-  }, [value]);
-  useEffect(function () {
-    dispatch(setHideSelected(!isSingleLine));
-  }, [isSingleLine]);
-  var isEmptyList = isEmpty(state);
-  var menuIsOpen = state.menuIsOpen;
-
-  var toggleSelectIndex = function toggleSelectIndex(index) {
-    var selectedOption = getGroups(state)[index[0]].options[index[1]];
-    var optionAdded = !isSelected(state, getOptionValue(selectedOption));
-    var toggleSelectAction = optionAdded ? addSelectedIndex(index) : removeSelectedIndex(index);
-    dispatch(toggleSelectAction);
-    setIsKeyboardNavigating(false);
-    callOnChangeIfNeeded(onChange, state, toggleSelectAction);
-  };
 
+    setMenuIsOpen(false);
+    setIsKeyboardNavigating(false);
+  }, [onChange, filteredGroups, value]);
   useEffect(function () {
     if (dropdownRef.current) {
       dropdownRef.current.scheduleUpdate();
     }
-  }, [state.searchString, state.selected]);
+  }, [value]);
   var handleMouseMove = useCallback(function () {
     return setIsKeyboardNavigating(false);
   }, []);
@@ -198,7 +269,7 @@ var Multiselect = function Multiselect(_ref2) {
       } else {
         var elementToScrollTo = highlightedItemRef.current;
 
-        if (state.cursorIndex[0] === 0 && state.cursorIndex[1] === 0) {
+        if (cursorIndex[0] === 0 && cursorIndex[1] === 0) {
           var groupHeader = highlightedItemRef.current.previousSibling;
 
           if (groupHeader) {
@@ -214,27 +285,23 @@ var Multiselect = function Multiselect(_ref2) {
         });
       }
     }
-  }, [highlightedItemRef, state.cursorIndex, isKeyboardNavigating]);
-
-  var handleClose = function handleClose() {
-    dispatch(closeMenu());
+  }, [highlightedItemRef, cursorIndex, isKeyboardNavigating]);
+  var handleClose = useCallback(function () {
+    setMenuIsOpen(false);
     setIsKeyboardNavigating(false);
-  }; // eslint-disable-next-line complexity
-
-
-  var handleKeyNavigation = function handleKeyNavigation(e) {
+  }, []);
+  var handleKeyNavigation = useCallback( // eslint-disable-next-line complexity
+  function (e) {
     if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
       var isDownDirection = e.key === ARROW_DOWN;
-      dispatch(isDownDirection ? cursorMovedDown() : cursorMovedUp());
+      setCursorIndex(getMovedCursorIndex(filteredGroups, cursorIndex, isDownDirection));
       setIsKeyboardNavigating(true);
       e.preventDefault();
     }
 
     if (e.key === ENTER || e.key === SPACE) {
-      var cursorIndex = getCursorIndex(state);
-
       if (cursorIndex !== null) {
-        toggleSelectIndex(cursorIndex);
+        handleSelectIndex(cursorIndex);
       } else {
         handleClose();
       }
@@ -245,25 +312,26 @@ var Multiselect = function Multiselect(_ref2) {
     if (e.key === TAB) {
       handleClose();
     }
-  };
-
-  var handleClick = function handleClick() {
+  }, [filteredGroups, cursorIndex, handleClose, handleSelectIndex]);
+  var handleClick = useCallback(function () {
     if (isDisabled) {
       return;
     }
 
-    var action = menuIsOpen ? closeMenu() : openMenu();
-    dispatch(action);
-  };
-
-  var handleClearClick = function handleClearClick() {
-    var action = clearSelectedAndCloseMenu();
-    dispatch(action);
-    callOnChangeIfNeeded(onChange, state, action);
-  }; // eslint-disable-next-line complexity
+    setMenuIsOpen(function (currentMenuIsOpen) {
+      return !currentMenuIsOpen;
+    });
+  }, [isDisabled]);
+  var handleClearClick = useCallback(function () {
+    setCursorIndex(getDefaultCursorIndex(groups));
+    setMenuIsOpen(false);
 
+    if (onChange) {
+      onChange([]);
+    }
+  }, [groups, onChange]); // eslint-disable-next-line complexity
 
-  var handleTriggerKeyDown = function handleTriggerKeyDown(e) {
+  var handleTriggerKeyDown = useCallback(function (e) {
     if (e.key === ESCAPE) {
       handleClose();
       e.preventDefault();
@@ -281,7 +349,7 @@ var Multiselect = function Multiselect(_ref2) {
       var isTriggerTarget = trigger === target;
 
       if (shouldOpenSelect(e.key, isTriggerTarget)) {
-        dispatch(openMenu());
+        setMenuIsOpen(true);
         setIsKeyboardNavigating(true);
         skipScrollingRef.current = true;
         trigger.focus();
@@ -294,20 +362,23 @@ var Multiselect = function Multiselect(_ref2) {
         e.preventDefault();
       }
     }
-  };
+  }, [handleClearClick, handleClose, handleKeyNavigation, isClearable, isDisabled, menuIsOpen]);
+  var handleUnselectClick = useCallback(function (unselectedOption) {
+    var unselectedOptionValue = getOptionValue(unselectedOption);
 
-  var handleUnselectClick = function handleUnselectClick(option) {
-    var action = removeSelectedOption(option);
-    dispatch(action);
-    callOnChangeIfNeeded(onChange, state, action);
-  };
+    var newSelected = _filterInstanceProperty(value).call(value, function (option) {
+      return getOptionValue(option) !== unselectedOptionValue;
+    });
 
-  var handleHighlightIndex = function handleHighlightIndex(index) {
-    if (!isIndexMatchCursor(state, index)) {
-      dispatch(setCursorIndex(index));
+    if (onChange) {
+      onChange(newSelected);
     }
-  };
-
+  }, [onChange, value]);
+  var handleHighlightIndex = useCallback(function (index) {
+    if (!isIndexMatchCursor(cursorIndex, index)) {
+      setCursorIndex(index);
+    }
+  }, [cursorIndex]);
   var maxHeight = calculateMaxHeight(size);
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
@@ -320,23 +391,26 @@ var Multiselect = function Multiselect(_ref2) {
     maxWidth: "trigger",
     maxHeight: maxHeight,
     leastMaxHeight: maxHeight,
-    trigger: function trigger(_ref3) {
-      var ref = _ref3.ref;
+    trigger: function trigger(_ref5) {
+      var ref = _ref5.ref;
       return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
         className: className,
         theme: theme,
         size: size,
         error: restProps.error,
         label: restProps.label,
-        note: restProps.note
-      }, /*#__PURE__*/React.createElement(SelectTrigger, {
+        note: restProps.note,
+        onKeyDown: handleTriggerKeyDown
+      }, restProps.name && /*#__PURE__*/React.createElement(NativeSelectedOptions, {
+        name: restProps.name,
+        selected: value
+      }), /*#__PURE__*/React.createElement(SelectTrigger, {
         theme: theme,
         mode: mode,
         size: size,
         isOpen: menuIsOpen,
         triggerRef: ref,
-        onKeyDown: handleTriggerKeyDown,
-        selected: value ? value : getSelectedArray(state),
+        selected: value,
         placeholder: placeholder,
         isClearable: isClearable,
         isLoading: isLoading,
@@ -358,16 +432,18 @@ var Multiselect = function Multiselect(_ref2) {
     disableCursor: isKeyboardNavigating,
     iconPlacement: 'right',
     className: styles.menu
-  }, !isEmptyList ? _mapInstanceProperty(_context2 = getPlainOptions(state)).call(_context2, function (item, i, collection) {
+  }, !isEmptyMenu ? _mapInstanceProperty(_context4 = getPlainOptionsFromGroups(filteredGroups)).call(_context4, function (item, i, collection) {
     return /*#__PURE__*/React.createElement(Option, {
       key: getOptionKey(item, i),
-      state: state,
+      groups: filteredGroups,
+      selected: value,
+      cursorIndex: cursorIndex,
       size: size,
       item: item,
       isSingleLine: isSingleLine,
       isLastItem: i === collection.length - 1,
       highlightedItemRef: highlightedItemRef,
-      toggleSelectIndex: toggleSelectIndex,
+      handleSelectIndex: handleSelectIndex,
       handleHighlightIndex: handleHighlightIndex
     });
   }) : /*#__PURE__*/React.createElement(MenuItem, {
@@ -378,7 +454,6 @@ var Multiselect = function Multiselect(_ref2) {
 Multiselect.propTypes = {
   className: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
-  defaultValue: PropTypes.arrayOf(optionType),
   value: PropTypes.arrayOf(optionType),
   onChange: PropTypes.func,
   size: PropTypes.oneOf(['m', 's', 'l']),
@@ -394,6 +469,7 @@ Multiselect.propTypes = {
   note: PropTypes.node,
   id: PropTypes.string,
   noOptionsMessage: noOptionsMessageType,
-  placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'])
+  placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
+  name: PropTypes.string
 };
 export default Multiselect;

package/lib/parts/native-select.d.ts

@@ -13,8 +13,7 @@ export declare type NativeSelectProps = {
     theme?: Theme;
     className?: string;
     style?: object;
-    defaultValue?: SelectOption;
-    value?: SelectOption;
+    value: SelectOption;
     onChange?: (newValue: SelectOption) => void;
     placeholder?: string;
     isLoading?: boolean;
@@ -24,6 +23,7 @@ export declare type NativeSelectProps = {
     note?: React.ReactNode;
     error?: boolean | React.ReactNode;
     noOptionsMessage?: NoOptionsMessage;
+    name?: string;
 };
 declare const NativeSelect: React.FC<NativeSelectProps>;
 export default NativeSelect;