@rescui/select 0.15.1-RUI-280-Update-select-component-separate-components-e772abaa1.56 → 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66

package/lib/select-searchable.js

@@ -1,98 +1,163 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { useRef } from 'react';
-import cn from 'classnames';
-import { useComboBoxState } from '@react-stately/combobox';
-import { HiddenSelect } from '@react-aria/select';
-import { useComboBox } from '@react-aria/combobox';
-import { useButton } from '@react-aria/button';
+import React, { useRef, useState } from 'react';
+import { Dropdown } from '@rescui/dropdown';
+import { useCombobox } from 'downshift';
 import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { PopupContent } from './parts/popup-content.js';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { useOptions } from './hooks/use-options.js';
+import { useA11y } from './hooks/use-a11y.js';
+import { ListBox } from './parts/list-box.js';
 import { Icons } from './parts/icons.js';
+import { HiddenSelect } from './parts/hidden-select.js';
 import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
-import { useLabelFocus } from './hooks/use-label-focus.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
-import styles from './styles/common.p.module.css.js';
-const THEME_STYLES = {
-  light: styles.themeLight,
-  dark: styles.themeDark
-};
-const SIZE_STYLES = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL
-};
-const MODE_STYLES = {
-  classic: styles.classic,
-  rock: styles.rock
-}; // Do not use useFilter from 'react-aria' package as it's much slower for most cases
-
-const contains = (string, substring) => {
-  var _context;
-
-  if (substring.length === 0) {
-    return true;
-  }
-
-  return _includesInstanceProperty(_context = string.toLowerCase()).call(_context, substring.toLowerCase());
-}; // eslint-disable-next-line complexity
-
+import { mergeProps } from './utils/merge-props.js';
+import { itemToString } from './utils/item-to-string.js';
+import { getOptionValue } from './utils/get-option-value.js';
+import { getRealItemsCnt } from './utils/get-real-items-cnt.js';
+import styles from './styles/common.p.module.css.js'; // eslint-disable-next-line complexity
 
 function SelectSearchable(_ref) {
-  var _state$inputValue;
-
   let {
-    id,
+    options,
+    value: selectedItem,
+    onChange,
+    error,
+    label,
+    note,
     size,
     mode,
     theme,
-    className,
-    style,
-    isClearable,
-    isLoading,
     placement,
     boldLabel,
     reserveErrorLine,
-    noOptionsMessage,
     maxVisibleItems,
-    ...ariaProps
+    isClearable,
+    isLoading,
+    isDisabled,
+    name,
+    noOptionsMessage,
+    className,
+    id,
+    style,
+    placeholder,
+    ...rest
   } = _ref;
-  // Create state based on the incoming props
-  const state = useComboBoxState({ ...ariaProps,
-    defaultFilter: contains,
-    allowsEmptyCollection: true
-  });
-  const hasValue = state.selectedItems.length > 0; // Setup refs and get props for child elements.
-
   const triggerRef = useRef(null);
-  const inputRef = useRef(null);
-  const listBoxRef = useRef(null);
-  const popoverRef = useRef(null);
-  const {
-    labelProps,
-    buttonProps: triggerProps,
-    listBoxProps,
-    inputProps: inputPropsWithName,
-    errorMessageProps,
-    descriptionProps
-  } = useComboBox({ ...ariaProps,
-    inputRef,
-    buttonRef: triggerRef,
-    listBoxRef,
-    popoverRef
-  }, state); // Extract name from inputProps to use with HiddenSelect instead
+  const dropdownRef = useRef(null);
+  const menuRef = React.useRef(null); // use it instead of :has(.searchInput:focus)
 
+  const [inputFocused, setInputFocused] = useState(false);
   const {
-    name,
-    ...inputProps
-  } = inputPropsWithName;
+    flattenedOptions,
+    listBoxItems,
+    setFilterString
+  } = useOptions(options);
+  const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
+  const hasValue = Boolean(selectedItem);
+  const selectedMap = selectedItem ? new Map([[getOptionValue(selectedItem), selectedItem]]) : new Map();
   const {
-    buttonProps
-  } = useButton({ ...triggerProps,
-    elementType: 'div'
-  }, triggerRef);
-  const isDisabled = ariaProps.isDisabled;
-  const isOpen = state.isOpen;
+    fieldProps,
+    errorMessageProps,
+    descriptionProps,
+    baseId
+  } = useA11y({
+    prefix: 'select',
+    error,
+    description: note
+  });
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getItemProps,
+    reset,
+    setInputValue
+  } = useCombobox({
+    onInputValueChange(_ref2) {
+      let {
+        inputValue,
+        type
+      } = _ref2;
+
+      if (type === useCombobox.stateChangeTypes.InputChange) {
+        setFilterString(inputValue);
+      }
+    },
+
+    items: flattenedOptions,
+    id: baseId,
+    itemToString,
+    selectedItem,
+    // defining our scroll behavior because on the first menu render the hook
+    // doesn't know menuRef and use page as the scroll boundary
+    scrollIntoView: (listItemEl, listEl) => {
+      scrollIntoView(listItemEl, {
+        scrollMode: 'if-needed',
+        block: 'nearest',
+        boundary: listEl ?? menuRef.current
+      });
+    },
+    onSelectedItemChange: _ref3 => {
+      let {
+        selectedItem: newSelectedItem
+      } = _ref3;
+      onChange === null || onChange === void 0 || onChange(newSelectedItem);
+    },
+
+    isItemDisabled(item) {
+      return item && item.disabled;
+    },
+
+    onIsOpenChange(_ref4) {
+      let {
+        isOpen: newIsOpen,
+        selectedItem: newSelectedItem
+      } = _ref4;
+
+      if (newIsOpen) {
+        setFilterString('');
+      } else {
+        setInputValue(itemToString(newSelectedItem));
+      }
+    },
+
+    stateReducer(state, actionAndChanges) {
+      const {
+        changes,
+        type
+      } = actionAndChanges;
+
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEscape:
+          if (!state.isOpen) {
+            return state;
+          }
+
+          return changes;
+
+        default:
+          return changes;
+      }
+    }
+
+  });
+  const menuProps = getMenuProps({
+    ref: menuRef
+  }, {
+    suppressRefError: true
+  });
+  const triggerProps = getToggleButtonProps({
+    ref: triggerRef,
+    // fix screen-reader focus on an opened popup with an empty list
+    ...(isOpen && isListBoxEmpty ? {
+      'aria-activedescendant': menuProps.id
+    } : {})
+  }); // use it instead of ":has(:focus-visible), :focus-visible"
+
   const {
     isFocusVisible,
     focusProps
@@ -103,69 +168,90 @@ function SelectSearchable(_ref) {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus(triggerRef);
+  } = useLabelFocus();
   const emptyListMessage = getEmptyMessage({
     isLoading,
-    isNothingFound: ((_state$inputValue = state.inputValue) === null || _state$inputValue === void 0 ? void 0 : _state$inputValue.length) > 0,
+    isNothingFound: false,
     noOptionsMessage
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(ariaProps.errorMessage) && styles.error),
-    id: id,
-    style: style,
-    "data-test": "select"
-  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+  const listBoxState = {
+    selectedMap,
+    selectionMode: 'single',
+    highlightedIndex,
+    getItemProps,
+    menuProps
+  };
+  return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
     theme: theme,
     size: size,
     disabled: isDisabled,
-    label: ariaProps.label,
-    labelProps: mergeProps(labelClickProps, labelProps),
+    label: label,
+    labelProps: mergeProps(getLabelProps(), labelClickProps),
     boldLabel: boldLabel,
-    error: ariaProps.errorMessage,
+    error: error,
     reserveErrorLine: reserveErrorLine,
     errorMessageProps: errorMessageProps,
-    note: ariaProps.description,
+    note: note,
     descriptionProps: descriptionProps
   }, /*#__PURE__*/React.createElement(HiddenSelect, {
-    state: state,
-    triggerRef: triggerRef,
-    label: ariaProps.label,
     name: name,
-    isDisabled: isDisabled
-  }), /*#__PURE__*/React.createElement("div", { ...mergeProps(buttonProps, focusProps, labelFocusForTriggerProps),
-    ref: triggerRef,
-    className: styles.trigger,
-    "data-open": isOpen,
-    "data-focus-visible": isFocusVisible,
-    "data-label-focused": isFocusedByLabel,
-    "data-test": "select__trigger"
-  }, /*#__PURE__*/React.createElement("input", { ...inputProps,
-    ref: inputRef,
-    className: styles.searchInput,
-    value: inputProps.value,
-    "data-test": "select__trigger_input"
-  }), /*#__PURE__*/React.createElement(Icons, {
-    isLoading: isLoading,
-    canHaveClearIcon: isClearable && !isDisabled && hasValue,
-    onClear: () => {
-      var _inputRef$current;
-
-      state.setValue(null);
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-    },
-    triggerId: triggerProps.id
-  })), /*#__PURE__*/React.createElement(PopupContent, {
+    value: selectedItem,
+    isMultiple: false,
+    options: flattenedOptions
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    mode: mode,
     theme: theme,
-    state: state,
-    triggerRef: triggerRef,
-    popoverRef: popoverRef,
-    listBoxRef: listBoxRef,
+    ref: dropdownRef,
     placement: placement,
+    maxWidth: "trigger",
+    minWidth: "trigger",
+    isOpen: isOpen,
+    cancelCloseAnimation: true,
+    disableFocusLock: true,
+    trigger: _ref5 => {
+      let {
+        ref: triggerRefForDropdown
+      } = _ref5;
+      return /*#__PURE__*/React.createElement("div", { ...rest,
+        ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by triggerProps
+        triggerProps, focusProps, labelFocusForTriggerProps, {
+          ref: triggerRefForDropdown
+        }),
+        className: styles.trigger,
+        "data-open": isOpen,
+        "data-has-focus-visible": isFocusVisible || inputFocused,
+        "data-label-focused": isFocusedByLabel,
+        "data-test": "select__trigger"
+      }, /*#__PURE__*/React.createElement("input", { ...getInputProps({
+          onFocus: () => setInputFocused(true),
+          onBlur: () => setInputFocused(false)
+        }),
+        // by the downshift spec, it's expected to place input near the trigger and not nest them,
+        // but we try to keep basic select and searchable similar, so that's a little hack to nest these elements
+        onClick: () => {},
+        className: styles.searchInput,
+        placeholder: placeholder,
+        "data-test": "select__trigger_input"
+      }), /*#__PURE__*/React.createElement(Icons, {
+        isLoading: isLoading,
+        canHaveClearIcon: isClearable && !isDisabled && hasValue,
+        onClear: () => {
+          var _triggerRef$current;
+
+          reset();
+          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+            focusVisible: false
+          });
+        },
+        triggerId: triggerProps.id
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(ListBox, {
+    state: listBoxState,
     size: size,
-    mode: mode,
-    listBoxProps: listBoxProps,
+    maxVisibleItems: maxVisibleItems,
     emptyListMessage: emptyListMessage,
-    maxVisibleItems: maxVisibleItems
+    items: listBoxItems
   })));
 }
 

package/lib/select.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { SelectProps, SelectOption, SelectOptionOrGroup } from './types';
 export declare const Select: {
-    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, boldLabel, reserveErrorLine, note, maxVisibleItems, ...restProps }: SelectProps): JSX.Element;
+    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, boldLabel, reserveErrorLine, note, maxVisibleItems, id, ...restProps }: SelectProps): JSX.Element;
     propTypes: {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;

package/lib/select.js

@@ -1,15 +1,26 @@
 "use client";
 import React from 'react';
-import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import PropTypes from 'prop-types';
 import { ErrorMessage } from '@rescui/form-field';
+import cn from 'classnames';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { optionType, optionsGroupType, noOptionsMessageType } from './common-prop-types.js';
-import { useOptionSerialization } from './hooks/use-option-serialization.js';
-import { convertOptions } from './utils/convert-options.js';
-import { convertPlacement } from './utils/convert-placement.js';
-import { getOptionValue } from './utils/get-option-value.js';
 import { SelectBasic } from './select-basic.js';
 import { SelectSearchable } from './select-searchable.js';
+import styles from './styles/common.p.module.css.js';
+const THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+const MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
 
 const Select = _ref => {
   let {
@@ -33,42 +44,38 @@ const Select = _ref => {
     reserveErrorLine = false,
     note,
     maxVisibleItems = 5,
+    id,
     ...restProps
   } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
-  const {
-    selectedKey,
-    findOptionByKey,
-    virtualOption
-  } = useOptionSerialization(options, value);
-
-  const handleSelectionChange = key => {
-    const option = findOptionByKey(key);
-    onChange === null || onChange === void 0 || onChange(option);
-  };
-
   const InnerSingleComponent = isSearchable ? SelectSearchable : SelectBasic;
-  return /*#__PURE__*/React.createElement(InnerSingleComponent, { ...restProps,
-    isDisabled: isDisabled,
-    value: selectedKey,
-    onChange: handleSelectionChange,
-    placeholder: placeholder,
-    isClearable: isClearable,
-    isLoading: isLoading,
-    className: className,
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error),
+    id: id,
     style: style,
+    "data-test": "select"
+  }, /*#__PURE__*/React.createElement(InnerSingleComponent, { ...restProps,
+    options: options,
     size: size,
     mode: mode,
     theme: theme,
-    errorMessage: error,
-    placement: convertPlacement(placement),
+    className: className,
+    id: id,
+    style: style,
+    value: value,
+    onChange: onChange,
+    placeholder: placeholder,
+    isClearable: isClearable,
+    isLoading: isLoading,
+    isDisabled: isDisabled,
+    noOptionsMessage: noOptionsMessage,
+    error: error,
+    placement: placement,
     boldLabel: boldLabel,
     reserveErrorLine: reserveErrorLine,
-    description: note,
-    noOptionsMessage: noOptionsMessage,
-    maxVisibleItems: maxVisibleItems,
-    disabledKeys: virtualOption ? [getOptionValue(virtualOption)] : []
-  }, convertOptions(options, [virtualOption].filter(Boolean)));
+    note: note,
+    maxVisibleItems: maxVisibleItems
+  }));
 };
 
 Select.propTypes = {

package/lib/styles/common.p.module.css.js

@@ -1,27 +1,28 @@
 var styles = {
-  "themeLight": "_themeLight_1mkgp3r_6",
-  "themeDark": "_themeDark_1mkgp3r_9",
-  "sizeS": "_sizeS_1mkgp3r_13",
-  "sizeM": "_sizeM_1mkgp3r_16",
-  "sizeL": "_sizeL_1mkgp3r_19",
-  "classic": "_classic_1mkgp3r_23",
-  "rock": "_rock_1mkgp3r_26",
-  "root": "_root_1mkgp3r_30",
-  "trigger": "_trigger_1mkgp3r_36",
-  "error": "_error_1mkgp3r_69",
-  "enabled": "_enabled_1mkgp3r_74",
-  "disabled": "_disabled_1mkgp3r_78",
-  "canBeMultiline": "_canBeMultiline_1mkgp3r_119",
-  "iconsWrapper": "_iconsWrapper_1mkgp3r_123",
-  "triggerText": "_triggerText_1mkgp3r_138",
-  "searchInput": "_searchInput_1mkgp3r_144",
-  "labelNotSelected": "_labelNotSelected_1mkgp3r_188",
-  "multi": "_multi_1mkgp3r_202",
-  "tagsContainer": "_tagsContainer_1mkgp3r_218",
-  "tag": "_tag_1mkgp3r_218",
-  "filledTag": "_filledTag_1mkgp3r_240",
-  "toggle": "_toggle_1mkgp3r_248",
-  "icon": "_icon_1mkgp3r_123",
-  "clearIcon": "_clearIcon_1mkgp3r_315"
+  "themeLight": "_themeLight_kb0k7d_6",
+  "themeDark": "_themeDark_kb0k7d_9",
+  "sizeS": "_sizeS_kb0k7d_13",
+  "sizeM": "_sizeM_kb0k7d_16",
+  "sizeL": "_sizeL_kb0k7d_19",
+  "classic": "_classic_kb0k7d_23",
+  "rock": "_rock_kb0k7d_26",
+  "root": "_root_kb0k7d_30",
+  "trigger": "_trigger_kb0k7d_36",
+  "error": "_error_kb0k7d_69",
+  "enabled": "_enabled_kb0k7d_74",
+  "disabled": "_disabled_kb0k7d_78",
+  "canBeMultiline": "_canBeMultiline_kb0k7d_115",
+  "iconsWrapper": "_iconsWrapper_kb0k7d_119",
+  "triggerText": "_triggerText_kb0k7d_134",
+  "searchInput": "_searchInput_kb0k7d_140",
+  "labelNotSelected": "_labelNotSelected_kb0k7d_184",
+  "multi": "_multi_kb0k7d_198",
+  "tagsContainer": "_tagsContainer_kb0k7d_214",
+  "tag": "_tag_kb0k7d_214",
+  "filledTag": "_filledTag_kb0k7d_236",
+  "toggle": "_toggle_kb0k7d_244",
+  "icon": "_icon_kb0k7d_119",
+  "clearIcon": "_clearIcon_kb0k7d_311",
+  "hiddenSelect": "_hiddenSelect_kb0k7d_368"
 };
 export { styles as default };

package/lib/styles/form-trigger.p.module.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_1dwk8s0_6",
-  "themeDark": "_themeDark_1dwk8s0_9",
-  "sizeS": "_sizeS_1dwk8s0_13",
-  "sizeM": "_sizeM_1dwk8s0_16",
-  "sizeL": "_sizeL_1dwk8s0_19",
-  "main": "_main_1dwk8s0_23",
-  "label": "_label_1dwk8s0_27",
-  "disabled": "_disabled_1dwk8s0_33",
-  "footer": "_footer_1dwk8s0_38",
-  "errorMessage": "_errorMessage_1dwk8s0_45",
-  "error": "_error_1dwk8s0_45",
-  "note": "_note_1dwk8s0_54"
+  "themeLight": "_themeLight_lkq6p4_6",
+  "themeDark": "_themeDark_lkq6p4_9",
+  "sizeS": "_sizeS_lkq6p4_13",
+  "sizeM": "_sizeM_lkq6p4_16",
+  "sizeL": "_sizeL_lkq6p4_19",
+  "main": "_main_lkq6p4_23",
+  "label": "_label_lkq6p4_27",
+  "disabled": "_disabled_lkq6p4_33",
+  "footer": "_footer_lkq6p4_38",
+  "errorMessage": "_errorMessage_lkq6p4_45",
+  "error": "_error_lkq6p4_45",
+  "note": "_note_lkq6p4_54"
 };
 export { styles as default };

package/lib/styles/list-box.p.module.css.js

@@ -1,16 +1,14 @@
 var styles = {
-  "sizeS": "_sizeS_xturi0_6",
-  "sizeM": "_sizeM_xturi0_9",
-  "sizeL": "_sizeL_xturi0_12",
-  "modeClassic": "_modeClassic_xturi0_16",
-  "modeRock": "_modeRock_xturi0_19",
-  "listBox": "_listBox_xturi0_23",
-  "item": "_item_xturi0_36",
-  "selected": "_selected_xturi0_82",
-  "disabled": "_disabled_xturi0_93",
-  "checkIcon": "_checkIcon_xturi0_100",
-  "visible": "_visible_xturi0_107",
-  "divider": "_divider_xturi0_114",
-  "groupHeader": "_groupHeader_xturi0_128"
+  "sizeS": "_sizeS_nz7l8y_6",
+  "sizeM": "_sizeM_nz7l8y_9",
+  "sizeL": "_sizeL_nz7l8y_12",
+  "listBox": "_listBox_nz7l8y_16",
+  "item": "_item_nz7l8y_30",
+  "selected": "_selected_nz7l8y_76",
+  "disabled": "_disabled_nz7l8y_87",
+  "checkIcon": "_checkIcon_nz7l8y_94",
+  "visible": "_visible_nz7l8y_101",
+  "divider": "_divider_nz7l8y_108",
+  "groupHeader": "_groupHeader_nz7l8y_122"
 };
 export { styles as default };

package/lib/styles/native-select-trigger.p.module.css.js

@@ -1,17 +1,18 @@
 var styles = {
-  "themeLight": "_themeLight_1ru28db_6",
-  "themeDark": "_themeDark_1ru28db_9",
-  "sizeS": "_sizeS_1ru28db_13",
-  "sizeM": "_sizeM_1ru28db_16",
-  "sizeL": "_sizeL_1ru28db_19",
-  "trigger": "_trigger_1ru28db_23",
-  "error": "_error_1ru28db_61",
-  "enabled": "_enabled_1ru28db_66",
-  "disabled": "_disabled_1ru28db_70",
-  "iconsWrapper": "_iconsWrapper_1ru28db_103",
-  "triggerText": "_triggerText_1ru28db_118",
-  "labelNotSelected": "_labelNotSelected_1ru28db_144",
-  "toggle": "_toggle_1ru28db_155",
-  "icon": "_icon_1ru28db_103"
+  "themeLight": "_themeLight_3v0lc_6",
+  "themeDark": "_themeDark_3v0lc_9",
+  "sizeS": "_sizeS_3v0lc_13",
+  "sizeM": "_sizeM_3v0lc_16",
+  "sizeL": "_sizeL_3v0lc_19",
+  "trigger": "_trigger_3v0lc_23",
+  "error": "_error_3v0lc_61",
+  "enabled": "_enabled_3v0lc_66",
+  "disabled": "_disabled_3v0lc_70",
+  "iconsWrapper": "_iconsWrapper_3v0lc_104",
+  "triggerText": "_triggerText_3v0lc_119",
+  "labelNotSelected": "_labelNotSelected_3v0lc_145",
+  "toggle": "_toggle_3v0lc_156",
+  "icon": "_icon_3v0lc_104",
+  "clearIcon": "_clearIcon_3v0lc_218"
 };
 export { styles as default };

package/lib/styles/native-select.p.module.css.js

@@ -1,9 +1,9 @@
 var styles = {
-  "sizeS": "_sizeS_4fpmyy_6",
-  "sizeM": "_sizeM_4fpmyy_9",
-  "sizeL": "_sizeL_4fpmyy_12",
-  "main": "_main_4fpmyy_16",
-  "wrapper": "_wrapper_4fpmyy_20",
-  "select": "_select_4fpmyy_24"
+  "sizeS": "_sizeS_ngrfhd_6",
+  "sizeM": "_sizeM_ngrfhd_9",
+  "sizeL": "_sizeL_ngrfhd_12",
+  "main": "_main_ngrfhd_16",
+  "wrapper": "_wrapper_ngrfhd_20",
+  "select": "_select_ngrfhd_24"
 };
 export { styles as default };