@rescui/select 0.15.1-RUI-280-Update-select-component-e516591ed.54 → 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66

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_60u4bs_6",
-  "themeDark": "_themeDark_60u4bs_9",
-  "sizeS": "_sizeS_60u4bs_13",
-  "sizeM": "_sizeM_60u4bs_16",
-  "sizeL": "_sizeL_60u4bs_19",
-  "classic": "_classic_60u4bs_23",
-  "rock": "_rock_60u4bs_26",
-  "root": "_root_60u4bs_30",
-  "trigger": "_trigger_60u4bs_36",
-  "error": "_error_60u4bs_69",
-  "enabled": "_enabled_60u4bs_74",
-  "disabled": "_disabled_60u4bs_78",
-  "canBeMultiline": "_canBeMultiline_60u4bs_119",
-  "iconsWrapper": "_iconsWrapper_60u4bs_123",
-  "triggerText": "_triggerText_60u4bs_138",
-  "searchInput": "_searchInput_60u4bs_144",
-  "labelNotSelected": "_labelNotSelected_60u4bs_188",
-  "multi": "_multi_60u4bs_202",
-  "tagsContainer": "_tagsContainer_60u4bs_218",
-  "tag": "_tag_60u4bs_218",
-  "filledTag": "_filledTag_60u4bs_240",
-  "toggle": "_toggle_60u4bs_248",
-  "icon": "_icon_60u4bs_123",
-  "clearIcon": "_clearIcon_60u4bs_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_1k683lb_6",
-  "themeDark": "_themeDark_1k683lb_9",
-  "sizeS": "_sizeS_1k683lb_13",
-  "sizeM": "_sizeM_1k683lb_16",
-  "sizeL": "_sizeL_1k683lb_19",
-  "main": "_main_1k683lb_23",
-  "label": "_label_1k683lb_27",
-  "disabled": "_disabled_1k683lb_33",
-  "footer": "_footer_1k683lb_38",
-  "errorMessage": "_errorMessage_1k683lb_45",
-  "error": "_error_1k683lb_45",
-  "note": "_note_1k683lb_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_57zbb_6",
-  "sizeM": "_sizeM_57zbb_9",
-  "sizeL": "_sizeL_57zbb_12",
-  "modeClassic": "_modeClassic_57zbb_16",
-  "modeRock": "_modeRock_57zbb_19",
-  "listBox": "_listBox_57zbb_23",
-  "item": "_item_57zbb_36",
-  "selected": "_selected_57zbb_82",
-  "disabled": "_disabled_57zbb_93",
-  "checkIcon": "_checkIcon_57zbb_100",
-  "visible": "_visible_57zbb_107",
-  "divider": "_divider_57zbb_114",
-  "groupHeader": "_groupHeader_57zbb_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_1lf70g_6",
-  "themeDark": "_themeDark_1lf70g_9",
-  "sizeS": "_sizeS_1lf70g_13",
-  "sizeM": "_sizeM_1lf70g_16",
-  "sizeL": "_sizeL_1lf70g_19",
-  "trigger": "_trigger_1lf70g_23",
-  "error": "_error_1lf70g_61",
-  "enabled": "_enabled_1lf70g_66",
-  "disabled": "_disabled_1lf70g_70",
-  "iconsWrapper": "_iconsWrapper_1lf70g_103",
-  "triggerText": "_triggerText_1lf70g_118",
-  "labelNotSelected": "_labelNotSelected_1lf70g_144",
-  "toggle": "_toggle_1lf70g_155",
-  "icon": "_icon_1lf70g_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_19uvt4l_6",
-  "sizeM": "_sizeM_19uvt4l_9",
-  "sizeL": "_sizeL_19uvt4l_12",
-  "main": "_main_19uvt4l_16",
-  "wrapper": "_wrapper_19uvt4l_20",
-  "select": "_select_19uvt4l_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 };

package/lib/types.d.ts

@@ -1,14 +1,8 @@
 import React from 'react';
 import type { Theme } from '@rescui/ui-contexts';
-import type { AriaComboBoxProps } from '@react-aria/combobox';
-import type { AriaSelectProps } from '@react-aria/select';
-import type { AriaPositionProps, AriaFieldProps } from 'react-aria';
-import type { SelectState } from '@react-stately/select';
-import type { ComboBoxState } from '@react-stately/combobox';
-import type { Key } from 'react-stately';
-export type { Key } from 'react-stately';
+import type { UseSelectPropGetters } from 'downshift';
+export declare type Key = string | number;
 export declare type Placement = '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';
-export declare type AriaPlacement = AriaPositionProps['placement'];
 export declare type SelectSize = 'l' | 'm' | 's';
 export declare type SelectMode = 'classic' | 'rock';
 export declare type SelectOption = {
@@ -21,6 +15,27 @@ export declare type SelectOptionsGroup = {
 };
 export declare type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
 export declare type SelectOptions = SelectOptionOrGroup[];
+export declare type ListBoxOptionItem = SelectOption & {
+    index: number;
+    type: 'option';
+    key: Key;
+    disabled?: boolean;
+};
+export declare type ListBoxGroupItem = Omit<SelectOptionsGroup, 'options'> & {
+    options: ListBoxOptionItem[];
+    type: 'group';
+    key: Key;
+};
+export declare type ListBoxItem = ListBoxOptionItem | ListBoxGroupItem;
+export declare type ListBoxItems = ListBoxItem[];
+export declare type ListBoxState = {
+    menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
+    getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
+    selectionMode: 'single' | 'multiple';
+    highlightedIndex: number;
+    selectedMap: Map<Key, SelectOption>;
+    menuRef?: React.RefObject<HTMLUListElement>;
+};
 export declare type NativeSelectOption = {
     label: string;
     value?: Key;
@@ -165,6 +180,7 @@ export declare type NativeSelectProps = {
     placeholder?: string;
     isLoading?: boolean;
     isDisabled?: boolean;
+    isClearable?: boolean;
     trigger?: (props: TriggerFuncProps) => React.ReactNode;
     label?: React.ReactNode;
     note?: React.ReactNode;
@@ -177,21 +193,5 @@ export declare type NativeSelectProps = {
     noOptionsMessage?: NoOptionsMessage;
     name?: string;
     boldLabel?: boolean;
-} & Omit<AriaFieldProps, 'isInvalid' | 'errorMessage' | 'description' | 'id' | 'label' | 'labelElementType' | 'validate' | 'validationBehavior' | 'validationState'>;
-export declare type InnerSingleComponentProps<T extends object> = {
-    size?: SelectSize;
-    mode?: SelectMode;
-    theme?: Theme;
-    style?: React.CSSProperties;
-    className?: string;
-    isClearable?: boolean;
-    isLoading?: boolean;
-    errorMessage?: React.ReactNode;
-    placement?: AriaPlacement;
-    boldLabel?: boolean;
-    reserveErrorLine?: boolean;
-    placeholder?: string;
-    noOptionsMessage?: NoOptionsMessage;
-    maxVisibleItems?: number;
-} & Omit<AriaSelectProps<T, 'single'> | AriaComboBoxProps<T, 'single'>, 'errorMessage' | 'validate'>;
-export declare type CommonState<T extends object> = SelectState<T, 'single'> | SelectState<T, 'multiple'> | ComboBoxState<T>;
+};
+export declare type InnerSingleComponentProps = Omit<SelectProps, 'isSearchable'>;

package/lib/utils/get-real-items-cnt.d.ts

@@ -1,2 +1,2 @@
-import type { ListState } from 'react-stately';
-export declare const getRealItemsCnt: <T extends object>(state: ListState<T>) => number;
+import { ListBoxItem } from '../types';
+export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;

package/lib/utils/get-real-items-cnt.js

@@ -1,16 +1,14 @@
-import { VIRTUAL_ITEMS_SECTION_KEY } from '../constants.js';
+const getRealItemsCnt = items => {
+  // Count total number of items
+  return items.reduce((count, item) => {
+    if (item.type === 'group') {
+      const groupOptions = item.options;
+      const hasHeading = item.label !== null && item.label !== undefined; // Count heading (if present) + all options in the section
 
-const getRealItemsCnt = state => {
-  // Count total number of items, ignoring virtual items
-  return [...state.collection].reduce((count, item) => {
-    if (item.type === 'section' && item.key !== VIRTUAL_ITEMS_SECTION_KEY) {
-      const sectionChildren = [...state.collection.getChildren(item.key)];
-      const hasHeading = item.rendered !== null && item.rendered !== undefined; // Count heading (if present) + all options in the section
-
-      return count + (hasHeading ? 1 : 0) + sectionChildren.length;
+      return count + (hasHeading ? 1 : 0) + groupOptions.length;
     }
 
-    if (item.type === 'item') {
+    if (item.type === 'option') {
       return count + 1;
     }
 

package/lib/utils/item-to-string.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOption } from '../types';
+export declare function itemToString(item: SelectOption): string;

package/lib/utils/item-to-string.js

@@ -0,0 +1,7 @@
+import { getTextFromNodes } from './get-text-from-nodes.js';
+
+function itemToString(item) {
+  return item ? getTextFromNodes(item.label) : '';
+}
+
+export { itemToString };

package/lib/utils/merge-props.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copied from react-aria repo
+ * @see https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/utils/mergeProps.ts
+ */
+import type { MutableRefObject, RefCallback } from 'react';
+/**
+ * Merges multiple refs into one. Works with either callback or object refs.
+ */
+export declare function mergeRefs<T>(...refs: Array<RefCallback<T> | MutableRefObject<T> | null | undefined>): RefCallback<T> | MutableRefObject<T>;
+export declare function chain(...callbacks: any[]): (...args: any[]) => void;
+interface Props {
+    [key: string]: any;
+}
+declare type PropsArg = Props | null | undefined;
+declare type TupleTypes<T> = {
+    [P in keyof T]: T[P];
+} extends {
+    [key: number]: infer V;
+} ? NullToObject<V> : never;
+declare type NullToObject<T> = T extends null | undefined ? object : T;
+declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, ids are deduplicated, and refs are merged.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+export declare function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>>;
+export {};

package/lib/utils/merge-props.js

@@ -0,0 +1,106 @@
+import cn from 'classnames';
+/* eslint-disable @typescript-eslint/no-explicit-any,consistent-return */
+
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    return ref(value);
+  } else if (ref !== null) {
+    ref.current = value;
+  }
+}
+/**
+ * Merges multiple refs into one. Works with either callback or object refs.
+ */
+
+
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  if (refs.length === 1 && refs[0]) {
+    return refs[0];
+  }
+
+  return value => {
+    let hasCleanup = false;
+    const cleanups = refs.map(ref => {
+      const cleanup = setRef(ref, value);
+      hasCleanup = hasCleanup || typeof cleanup === 'function';
+      return cleanup;
+    });
+
+    if (hasCleanup) {
+      return () => {
+        cleanups.forEach((cleanup, i) => {
+          if (typeof cleanup === 'function') {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        });
+      };
+    }
+  };
+}
+
+function chain() {
+  for (var _len2 = arguments.length, callbacks = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    callbacks[_key2] = arguments[_key2];
+  }
+
+  return function () {
+    for (const callback of callbacks) {
+      if (typeof callback === 'function') {
+        callback(...arguments);
+      }
+    }
+  };
+}
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, ids are deduplicated, and refs are merged.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+// eslint-disable-next-line complexity
+
+
+function mergeProps() {
+  // Start with a base clone of the first argument. This is a lot faster than starting
+  // with an empty object and adding properties as we go.
+  const result = { ...(arguments.length <= 0 ? undefined : arguments[0])
+  };
+
+  for (let i = 1; i < arguments.length; i++) {
+    const props = i < 0 || arguments.length <= i ? undefined : arguments[i];
+
+    for (const key in props) {
+      if (!props.hasOwnProperty(key)) {
+        continue;
+      }
+
+      const a = result[key];
+      const b = props[key]; // Chain events
+
+      if (typeof a === 'function' && typeof b === 'function' && // This is a lot faster than a regex.
+      key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) >=
+      /* 'A' */
+      65 && key.charCodeAt(2) <=
+      /* 'Z' */
+      90) {
+        result[key] = chain(a, b); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if (key === 'className' && typeof a === 'string' && typeof b === 'string') {
+        result[key] = cn(a, b);
+      } else if (key === 'ref' && a && b) {
+        result.ref = mergeRefs(a, b); // Override others
+      } else {
+        result[key] = b !== undefined ? b : a;
+      }
+    }
+  }
+
+  return result;
+}
+
+export { chain, mergeProps, mergeRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.15.1-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+  "version": "0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,12 +16,16 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/form-field": "0.1.1-RUI-280-Update-select-component-e516591ed.54+e516591ed",
-    "@rescui/tag": "0.13.5-RUI-280-Update-select-component-e516591ed.54+e516591ed",
-    "@rescui/use-resize-observer": "0.3.1-RUI-280-Update-select-component-e516591ed.166+e516591ed",
+    "@react-aria/focus": "^3.22.0",
+    "@rescui/dropdown": "0.9.5-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
+    "@rescui/form-field": "0.1.1-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
+    "@rescui/tag": "0.13.5-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
+    "@rescui/use-resize-observer": "0.3.1-RUI-280-Update-select-component-downshift-cd2a98813.178+cd2a98813",
     "classnames": "^2.2.6",
+    "downshift": "^9.3.2",
     "react-aria": "^3.47.0",
-    "react-stately": "^3.45.0"
+    "react-stately": "^3.45.0",
+    "scroll-into-view-if-needed": "3.1.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
@@ -29,9 +33,9 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
     "@rescui/scripts": "0.5.1",
-    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
     "@rescui/visual-regression": "0.1.4",
     "sniffr": "^1.2.0"
   },
@@ -40,5 +44,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "e516591ed7fc1a8ce27afc90612f7eea334c7d29"
+  "gitHead": "cd2a98813d37db8b46393317febfce4e91592516"
 }

package/lib/hooks/use-css-context-transfer.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { type Theme } from '@rescui/ui-contexts';
-import type { SelectSize } from '../types';
-export declare type useCssContextTransferArgs = {
-    triggerRef: React.RefObject<HTMLElement>;
-    isOpen: boolean;
-    themeFromProps: Theme;
-    sizeFromProps: SelectSize;
-};
-export declare const useCssContextTransfer: ({ triggerRef, isOpen, themeFromProps, sizeFromProps }: useCssContextTransferArgs) => {
-    size: SelectSize;
-    theme: Theme;
-    primaryColors: Record<string, string>;
-};

package/lib/hooks/use-css-context-transfer.js

@@ -1,40 +0,0 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import { useContext } from 'react';
-import { ThemeContext } from '@rescui/ui-contexts';
-import { extractThemeFromCss, extractPrimaryColors } from '../utils/css-vars-utils.js';
-
-const useCssContextTransfer = _ref => {
-  let {
-    triggerRef,
-    isOpen,
-    themeFromProps,
-    sizeFromProps
-  } = _ref;
-  let sizeFromCss = null;
-  let themeFromCss = 'light';
-  let primaryColors = {};
-
-  if (triggerRef.current && isOpen) {
-    var _context;
-
-    const triggerFormWrapperStyles = getComputedStyle(triggerRef.current);
-    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
-    sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
-    themeFromCss = extractThemeFromCss(triggerFormWrapperStyles);
-    primaryColors = extractPrimaryColors(triggerFormWrapperStyles);
-  }
-
-  const size = sizeFromCss || sizeFromProps;
-  const {
-    theme: themeFromContext,
-    noProvider
-  } = useContext(ThemeContext);
-  const theme = themeFromProps || (noProvider ? themeFromCss : themeFromContext);
-  return {
-    size,
-    theme,
-    primaryColors
-  };
-};
-
-export { useCssContextTransfer };

package/lib/hooks/use-multi-option-serialization.d.ts

@@ -1,10 +0,0 @@
-import type { SelectOption, SelectOptionOrGroup, Key } from '../types';
-export declare function useMultiOptionSerialization(options: SelectOptionOrGroup[], value?: SelectOption[] | null): {
-    optionsMap: Map<Key, {
-        option: SelectOption;
-        isVirtual: boolean;
-    }>;
-    selectedKeys: Key[];
-    findOptionsByKeys: (keys: Key[]) => SelectOption[];
-    virtualOptions: SelectOption[];
-};