@rescui/select 0.1.3 → 0.2.0

package/lib/parts/native-select.js

@@ -16,6 +16,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.array.join.js";
 import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.function.name.js";
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -157,11 +158,6 @@ var NativeSelect = function NativeSelect(_ref7) {
       _ref7$className = _ref7.className,
       className = _ref7$className === void 0 ? null : _ref7$className,
       style = _ref7.style,
-      _ref7$defaultValue = _ref7.defaultValue,
-      defaultValue = _ref7$defaultValue === void 0 ? {
-    label: '',
-    value: null
-  } : _ref7$defaultValue,
       _ref7$value = _ref7.value,
       value = _ref7$value === void 0 ? undefined : _ref7$value,
       onChange = _ref7.onChange,
@@ -175,25 +171,18 @@ var NativeSelect = function NativeSelect(_ref7) {
       label = _ref7.label,
       note = _ref7.note,
       error = _ref7.error,
-      noOptionsMessage = _ref7.noOptionsMessage;
+      noOptionsMessage = _ref7.noOptionsMessage,
+      name = _ref7.name;
   var theme = useTheme(themeFromProps);
 
-  var _useState = useState(defaultValue),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
-
-  var displayed = value ? value : selected;
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hovered = _useState4[0],
-      setHovered = _useState4[1];
+      hovered = _useState2[0],
+      setHovered = _useState2[1];
 
   var handleChange = function handleChange(event) {
     var newValue = event.target.value;
     var selectedOption = findSelectedOption(options, newValue);
-    setSelected(selectedOption);
 
     if (onChange) {
       onChange(selectedOption);
@@ -212,8 +201,8 @@ var NativeSelect = function NativeSelect(_ref7) {
 
   if (trigger) {
     _trigger = trigger({
-      selectedLabel: displayed.label,
-      selectedValue: displayed.value,
+      selectedLabel: value === null || value === void 0 ? void 0 : value.label,
+      selectedValue: value === null || value === void 0 ? void 0 : value.value,
       placeholder: placeholder,
       hovered: hovered
     });
@@ -222,10 +211,7 @@ var NativeSelect = function NativeSelect(_ref7) {
       theme: theme,
       size: size,
       isOpen: false,
-      onKeyDown: function onKeyDown() {
-        return false;
-      },
-      selected: displayed,
+      selected: value,
       placeholder: placeholder,
       searchInput: "",
       isClearable: false,
@@ -241,7 +227,10 @@ var NativeSelect = function NativeSelect(_ref7) {
     size: size,
     error: error,
     label: label,
-    note: note
+    note: note,
+    onKeyDown: function onKeyDown() {
+      return false;
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.main,
     onMouseEnter: function onMouseEnter() {
@@ -257,14 +246,14 @@ var NativeSelect = function NativeSelect(_ref7) {
     className: cn(styles.select, SIZE_STYLES[size]),
     disabled: isDisabled ? true : undefined,
     onChange: handleChange,
-    value: displayed.label !== '' ? displayed.value : PLACEHOLDER_VALUE
+    name: name,
+    value: (value === null || value === void 0 ? void 0 : value.label) !== '' ? value === null || value === void 0 ? void 0 : value.value : PLACEHOLDER_VALUE
   }, optionList)));
 };
 
 NativeSelect.propTypes = {
   className: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
-  defaultValue: optionType,
   value: optionType,
   onChange: PropTypes.func,
   size: PropTypes.oneOf(['m', 's', 'l']),
@@ -277,6 +266,7 @@ NativeSelect.propTypes = {
   label: PropTypes.node,
   note: PropTypes.node,
   noOptionsMessage: noOptionsMessageType,
-  style: PropTypes.object
+  style: PropTypes.object,
+  name: PropTypes.string
 };
 export default NativeSelect;

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

@@ -1,9 +1,9 @@
 var styles = {
-  "main": "_main_1bf4y9v_3",
-  "select": "_select_1bf4y9v_7",
-  "sizeL": "_sizeL_1bf4y9v_19",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1bf4y9v_1",
-  "sizeM": "_sizeM_1bf4y9v_23",
-  "sizeS": "_sizeS_1bf4y9v_27"
+  "main": "_main_70gy8o_3",
+  "select": "_select_70gy8o_7",
+  "sizeL": "_sizeL_70gy8o_19",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_70gy8o_1",
+  "sizeM": "_sizeM_70gy8o_23",
+  "sizeS": "_sizeS_70gy8o_27"
 };
 export default styles;

package/lib/parts/trigger.js

@@ -49,7 +49,7 @@ var TAG_SIZE = {
   l: 'm'
 }; // eslint-disable-next-line complexity
 
-var SelectTrigger = function SelectTrigger(props) {
+var SelectTrigger = /*#__PURE__*/React.memo(function (props) {
   var size = props.size,
       mode = props.mode,
       themeFromProps = props.theme,
@@ -156,7 +156,8 @@ var SelectTrigger = function SelectTrigger(props) {
     className: styles.toggle,
     "data-test": "down-icon"
   })));
-};
+});
+SelectTrigger.displayName = 'SelectTrigger';
 
 var MultiselectOptions = function MultiselectOptions(_ref) {
   var isSingleLine = _ref.isSingleLine,

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

@@ -1,30 +1,30 @@
 var styles = {
-  "main": "_main_1xtz6hi_24",
-  "open": "_open_1xtz6hi_36",
-  "enabled": "_enabled_1xtz6hi_41",
-  "disabled": "_disabled_1xtz6hi_45",
-  "focused": "_focused_1xtz6hi_49",
-  "searchFocused": "_searchFocused_1xtz6hi_50",
-  "sizeL": "_sizeL_1xtz6hi_56",
-  "sizeM": "_sizeM_1xtz6hi_59",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1xtz6hi_1",
-  "sizeS": "_sizeS_1xtz6hi_62",
-  "isMulti": "_isMulti_1xtz6hi_136",
-  "error": "_error_1xtz6hi_69",
-  "notSelected": "_notSelected_1xtz6hi_144",
-  "themeLight": "_themeLight_1xtz6hi_148",
-  "searchKeyFocused": "_searchKeyFocused_1xtz6hi_154",
-  "rock": "_rock_1xtz6hi_168",
-  "toggle": "_toggle_1xtz6hi_173",
-  "labelWrapper": "_labelWrapper_1xtz6hi_177",
-  "themeDark": "_themeDark_1xtz6hi_199",
-  "label": "_label_1xtz6hi_177",
-  "iconsWrapper": "_iconsWrapper_1xtz6hi_285",
-  "searchInput": "_searchInput_1xtz6hi_340",
-  "multi": "_multi_1xtz6hi_366",
-  "tagsContainer": "_tagsContainer_1xtz6hi_375",
-  "tag": "_tag_1xtz6hi_375",
-  "icon": "_icon_1xtz6hi_285",
-  "clearIcon": "_clearIcon_1xtz6hi_490"
+  "main": "_main_13qxxd9_24",
+  "open": "_open_13qxxd9_36",
+  "enabled": "_enabled_13qxxd9_41",
+  "disabled": "_disabled_13qxxd9_45",
+  "focused": "_focused_13qxxd9_49",
+  "searchFocused": "_searchFocused_13qxxd9_50",
+  "sizeL": "_sizeL_13qxxd9_56",
+  "sizeM": "_sizeM_13qxxd9_59",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_13qxxd9_1",
+  "sizeS": "_sizeS_13qxxd9_62",
+  "isMulti": "_isMulti_13qxxd9_136",
+  "error": "_error_13qxxd9_69",
+  "notSelected": "_notSelected_13qxxd9_144",
+  "themeLight": "_themeLight_13qxxd9_148",
+  "searchKeyFocused": "_searchKeyFocused_13qxxd9_154",
+  "rock": "_rock_13qxxd9_168",
+  "toggle": "_toggle_13qxxd9_173",
+  "labelWrapper": "_labelWrapper_13qxxd9_177",
+  "themeDark": "_themeDark_13qxxd9_199",
+  "label": "_label_13qxxd9_177",
+  "iconsWrapper": "_iconsWrapper_13qxxd9_285",
+  "searchInput": "_searchInput_13qxxd9_340",
+  "multi": "_multi_13qxxd9_366",
+  "tagsContainer": "_tagsContainer_13qxxd9_375",
+  "tag": "_tag_13qxxd9_375",
+  "icon": "_icon_13qxxd9_285",
+  "clearIcon": "_clearIcon_13qxxd9_490"
 };
 export default styles;

package/lib/select.d.ts

@@ -16,10 +16,6 @@ export interface SelectProps {
      * Array of options or option groups
      */
     options: SelectOptionOrGroup[];
-    /**
-     * Default value for select state
-     */
-    defaultValue?: SelectOption;
     /**
      * Is select supports clear the value
      */
@@ -55,7 +51,7 @@ export interface SelectProps {
     /**
      * Value of the select
      */
-    value?: SelectOption;
+    value: SelectOption;
     /**
      * Change value callback. `value => ...`
      */
@@ -81,6 +77,7 @@ export interface SelectProps {
      * Text to display when there are no options
      */
     noOptionsMessage?: NoOptionsMessage;
+    name?: string;
 }
 declare const Select: React.FC<SelectProps>;
 export default Select;

package/lib/select.js

@@ -1,14 +1,26 @@
+import "core-js/modules/web.dom-collections.for-each.js";
+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", "defaultValue", "value", "onChange", "placeholder", "isClearable", "isLoading", "isDisabled", "isSearchable", "noOptionsMessage", "placement"];
+var _excluded = ["options", "size", "mode", "theme", "className", "value", "onChange", "placeholder", "isClearable", "isLoading", "isDisabled", "isSearchable", "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 _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 _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 "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 React, { useRef, useState, useReducer, useEffect, useCallback } from 'react';
+import "core-js/modules/es.function.name.js";
+import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import Dropdown from '@rescui/dropdown';
@@ -17,22 +29,21 @@ import { useTheme } from '@rescui/ui-contexts';
 import SelectTrigger from './parts/trigger.js';
 import FormTriggerWrapper from './parts/form-trigger-wrapper.js';
 import { optionType, optionsGroupType, noOptionsMessageConfigType } from './common-prop-types.js';
-import { selectReducer, getInitialState } from './state/select/reducer.js';
-import { setGroups, setSelectedValue, setSelectedIndex, closeMenu, setSearchString, clearSelectedAndCloseMenu, openMenu, setCursorIndex, cursorMovedDown, cursorMovedUp } from './state/select/actions.js';
-import { getSelected, isEmpty, getPlainOptions, withoutGroupsLabel, OptionGroupTypes, getOptionValue, getSelectedValue, isIndexMatchCursor, getGroups, getCursorIndex } from './state/select/selectors.js';
-import { convertToOptionGroupsIfNeeded, reverseTheme, getEmptyMessage, escapeRegex, shouldOpenSelect, calculateMaxHeight } from './utils.js';
-import { ESCAPE, BACKSPACE, ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB } from './key-codes.js';
+import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, reverseTheme, getPlainOptionsFromGroups, getEmptyMessage, withoutGroupsLabel, OptionGroupTypes, getOptionValue, convertToOptionGroupsIfNeeded, escapeRegex, calculateMaxHeight } from './utils.js';
+import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from './key-codes.js';
 import styles from './parts/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,
       isLastItem = _ref.isLastItem,
       highlightedItemRef = _ref.highlightedItemRef,
       handleSelectIndex = _ref.handleSelectIndex,
       handleHighlightIndex = _ref.handleHighlightIndex;
-  var marginInPx = withoutGroupsLabel(state) ? 0 : {
+  var marginInPx = withoutGroupsLabel(groups) ? 0 : {
     l: 12,
     m: 6,
     s: 0
@@ -44,8 +55,8 @@ var Option = function Option(_ref) {
     var index = item.index,
         label = item.label;
     var value = getOptionValue(item);
-    var isSelected = value === getSelectedValue(state);
-    var isHighlighted = isIndexMatchCursor(state, index);
+    var isSelected = selected && value === getOptionValue(selected);
+    var isHighlighted = isIndexMatchCursor(cursorIndex, index);
     return /*#__PURE__*/React.createElement(MenuItem, {
       selected: isSelected,
       highlighted: isHighlighted,
@@ -98,7 +109,7 @@ var getOptionKey = function getOptionKey(item, i) {
 
 
 var Select = function Select(_ref2) {
-  var _context3;
+  var _context4;
 
   var options = _ref2.options,
       _ref2$size = _ref2.size,
@@ -108,8 +119,6 @@ var Select = function Select(_ref2) {
       themeFromProps = _ref2.theme,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? null : _ref2$className,
-      _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue,
       _ref2$value = _ref2.value,
       value = _ref2$value === void 0 ? undefined : _ref2$value,
       onChange = _ref2.onChange,
@@ -139,36 +148,73 @@ var Select = function Select(_ref2) {
 
   var skipScrollingRef = useRef(false);
 
-  var _useReducer = useReducer(selectReducer, getInitialState(convertToOptionGroupsIfNeeded(options), defaultValue)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchString = _useState4[0],
+      setSearchString = _useState4[1];
 
-  useEffect(function () {
-    dispatch(setGroups(convertToOptionGroupsIfNeeded(options)));
+  var groups = useStrongMemo(function () {
+    return convertToOptionGroupsIfNeeded(options);
   }, [options]);
+  var filteredGroups = useStrongMemo(function () {
+    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);
+        })
+      });
+    });
+  }, [searchString, groups]);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      menuIsOpen = _useState6[0],
+      setMenuIsOpen = _useState6[1];
+
+  var _useState7 = useState(function () {
+    return getDefaultCursorIndex(filteredGroups);
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      cursorIndex = _useState8[0],
+      setCursorIndex = _useState8[1];
+
   useEffect(function () {
-    dispatch(setSelectedValue(value));
-  }, [value]);
-  var selected = value ? value : getSelected(state);
-  var isEmptyMenu = isEmpty(state);
-  var menuIsOpen = state.menuIsOpen;
-
-  var handleSelectIndex = function handleSelectIndex(index) {
-    var selectedOption = getGroups(state)[index[0]].options[index[1]];
-    dispatch(setSelectedIndex(index));
+    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];
+    setMenuIsOpen(false);
+    setSearchString('');
     setIsKeyboardNavigating(false);
 
     if (onChange) {
       onChange(selectedOption);
     }
-  };
-
+  }, [onChange, filteredGroups]);
   useEffect(function () {
     if (dropdownRef.current) {
       dropdownRef.current.scheduleUpdate();
     }
-  }, [state.searchString]);
+  }, [searchString]);
   var handleMouseMove = useCallback(function () {
     return setIsKeyboardNavigating(false);
   }, []);
@@ -188,7 +234,7 @@ var Select = function Select(_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) {
@@ -204,25 +250,22 @@ var Select = function Select(_ref2) {
         });
       }
     }
-  }, [highlightedItemRef, state.cursorIndex, isKeyboardNavigating]);
-
-  var handleClose = function handleClose() {
-    dispatch(closeMenu());
+  }, [highlightedItemRef, cursorIndex, isKeyboardNavigating]);
+  var handleClose = useCallback(function () {
+    setSearchString('');
+    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 || !isSearchable && e.key === SPACE) {
-      var cursorIndex = getCursorIndex(state);
-
       if (cursorIndex !== null) {
         handleSelectIndex(cursorIndex);
       } else {
@@ -235,35 +278,29 @@ var Select = function Select(_ref2) {
     if (e.key === TAB) {
       handleClose();
     }
-  };
-
-  var handleClick = function handleClick() {
+  }, [filteredGroups, cursorIndex, handleClose, handleSelectIndex, isSearchable]);
+  var handleClick = useCallback(function () {
     if (isDisabled) {
       return;
     }
 
-    var action = menuIsOpen ? closeMenu() : openMenu();
-    dispatch(action);
-  };
-
-  var handleSearchInputChange = function handleSearchInputChange(searchValue) {
-    var filter = new RegExp("(?:^|\\s)".concat(escapeRegex(searchValue)), 'i');
-    dispatch(setSearchString(searchValue, function (_ref3) {
-      var label = _ref3.label;
-      return filter.test(label);
-    }));
-  };
-
-  var handleClearClick = function handleClearClick() {
-    dispatch(clearSelectedAndCloseMenu());
+    setMenuIsOpen(function (currentMenuIsOpen) {
+      return !currentMenuIsOpen;
+    });
+    setSearchString('');
+  }, [isDisabled]);
+  var handleSearchInputChange = useCallback(function (searchValue) {
+    return setSearchString(searchValue);
+  }, []);
+  var handleClearClick = useCallback(function () {
+    setCursorIndex(getDefaultCursorIndex(filteredGroups));
+    setMenuIsOpen(false);
 
     if (onChange) {
       onChange(null);
     }
-  }; // eslint-disable-next-line complexity
-
-
-  var handleTriggerKeyDown = function handleTriggerKeyDown(e) {
+  }, [filteredGroups, onChange]);
+  var handleTriggerKeyDown = useCallback(function (e) {
     if (e.key === ESCAPE) {
       handleClose();
       e.preventDefault();
@@ -281,7 +318,8 @@ var Select = function Select(_ref2) {
       var isTriggerTarget = trigger === target;
 
       if (shouldOpenSelect(e.key, isTriggerTarget)) {
-        dispatch(openMenu());
+        setMenuIsOpen(true);
+        setSearchString('');
         setIsKeyboardNavigating(true);
         skipScrollingRef.current = true;
         trigger.focus();
@@ -294,14 +332,12 @@ var Select = function Select(_ref2) {
         e.preventDefault();
       }
     }
-  };
-
-  var handleHighlightIndex = function handleHighlightIndex(index) {
-    if (!isIndexMatchCursor(state, index)) {
-      dispatch(setCursorIndex(index));
+  }, [menuIsOpen, isDisabled, isClearable, handleClose, handleClearClick, handleKeyNavigation]);
+  var handleHighlightIndex = useCallback(function (index) {
+    if (!isIndexMatchCursor(cursorIndex, index)) {
+      setCursorIndex(index);
     }
-  };
-
+  }, [cursorIndex]);
   var maxHeight = calculateMaxHeight(size);
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
@@ -322,20 +358,24 @@ var Select = function Select(_ref2) {
         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("input", {
+        type: "hidden",
+        name: restProps.name,
+        value: value && value.value || ''
+      }), /*#__PURE__*/React.createElement(SelectTrigger, {
         theme: theme,
         mode: mode,
         size: size,
         isOpen: menuIsOpen,
         triggerRef: ref,
-        onKeyDown: handleTriggerKeyDown,
-        selected: selected,
+        selected: value,
         placeholder: placeholder,
         isClearable: isClearable,
         isLoading: isLoading,
         isDisabled: isDisabled,
-        searchInput: state.searchString,
+        searchInput: searchString,
         isSearchable: isSearchable,
         onSearchChange: handleSearchInputChange,
         onClick: handleClick,
@@ -351,12 +391,14 @@ var Select = function Select(_ref2) {
     theme: mode === 'rock' ? reverseTheme(theme) : theme,
     disableCursor: isKeyboardNavigating,
     className: styles.menu
-  }, !isEmptyMenu ? _mapInstanceProperty(_context3 = getPlainOptions(state)).call(_context3, function (item, i, collection) {
+  }, !isEmptyMenu ? _mapInstanceProperty(_context4 = getPlainOptionsFromGroups(filteredGroups)).call(_context4, function (item, i, collection) {
     return /*#__PURE__*/React.createElement(Option, {
       item: item,
       isLastItem: i === collection.length - 1,
       key: getOptionKey(item, i),
-      state: state,
+      groups: filteredGroups,
+      selected: value,
+      cursorIndex: cursorIndex,
       size: size,
       highlightedItemRef: highlightedItemRef,
       handleSelectIndex: handleSelectIndex,
@@ -364,13 +406,12 @@ var Select = function Select(_ref2) {
     });
   }) : /*#__PURE__*/React.createElement(MenuItem, {
     disabled: true
-  }, getEmptyMessage(isLoading, isSearchable && state.searchString.length > 0, noOptionsMessage))));
+  }, getEmptyMessage(isLoading, isSearchable && searchString.length > 0, noOptionsMessage))));
 };
 
 Select.propTypes = {
   className: PropTypes.string,
   options: PropTypes.oneOfType([PropTypes.arrayOf(optionType), PropTypes.arrayOf(optionsGroupType)]),
-  defaultValue: optionType,
   value: optionType,
   onChange: PropTypes.func,
   size: PropTypes.oneOf(['l', 'm', 's']),
@@ -386,6 +427,7 @@ Select.propTypes = {
   id: PropTypes.string,
   note: PropTypes.node,
   noOptionsMessage: PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]),
-  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 Select;

package/lib/types.d.ts

@@ -14,34 +14,6 @@ export declare type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
 export declare type SelectOptions = SelectOptionOrGroup[];
 export declare type Groups = SelectOptionsGroup[];
 export declare type Index = [number, number];
-export declare type State = {
-    groups: Groups;
-    menuIsOpen: boolean;
-    selected: SelectOption | SelectOption[];
-    searchString: string;
-    filteredGroups: Groups;
-    cursorIndex: Index;
-    hideSelected?: boolean;
-    groupsWithoutSelected?: Groups;
-};
-export declare type PartialState = Partial<State>;
-export interface GetGroups {
-    (state: State): Groups;
-}
-export interface IsEmpty {
-    (state: State): boolean;
-}
-export declare type Overrides = {
-    getGroups?: GetGroups;
-    isEmpty?: IsEmpty;
-};
-export declare type Action = {
-    type: string;
-    [key: string]: any;
-};
-export interface SelectReducer {
-    (state: State, action: Action): State;
-}
 export declare type FilterFn = (option: SelectOption) => boolean;
 export declare type NoOptionsMessageConfig = {
     noOptions: string;

package/lib/utils.d.ts

@@ -1,8 +1,22 @@
 import { Theme } from '@rescui/ui-contexts';
 import type { SelectOptionOrGroup, SelectOptionsGroup, NoOptionsMessage, SelectSize } from './types';
+import { Groups, Index, SelectOption } from './types';
 export declare function shouldOpenSelect(key: string, isTriggerTarget?: boolean): boolean;
 export declare function getEmptyMessage(isLoading: boolean, isNothingFound: boolean, noOptionsMessage: NoOptionsMessage): string;
 export declare function escapeRegex(str: string): string;
 export declare function convertToOptionGroupsIfNeeded(optionsOrGroups?: SelectOptionOrGroup[]): SelectOptionsGroup[];
 export declare const calculateMaxHeight: (size: SelectSize) => number;
 export declare const reverseTheme: (theme: Theme) => "light" | "dark";
+export declare function getOptionValue(option: SelectOption): string;
+export declare const OptionGroupTypes: {
+    HEADER: string;
+    OPTION: string;
+    DIVIDER: string;
+};
+export declare const getDefaultCursorIndex: (groups: Groups) => Index;
+export declare const getPlainOptionsFromGroups: (groups: Groups) => any[];
+export declare function isGroupsEmpty(groups: Groups): boolean;
+export declare function useStrongMemo<T>(callback: () => T, deps: unknown[]): T;
+export declare function getMovedCursorIndex(groups: Groups, currentCursorIndex: Index, isDownDirection: boolean): Index;
+export declare const isIndexMatchCursor: (cursorIndex: Index, index: Index) => boolean;
+export declare const withoutGroupsLabel: (groups: Groups) => boolean;