@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66

package/lib/parts/popup-content.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { Dropdown } from '@rescui/dropdown';
+import { useActualSizeFromCss } from '../hooks/use-actual-size-from-css.js';
+import { usePrimaryContrastCssVarTransfer } from '../hooks/use-primary-contrast-css-var-transfer.js';
+import styles from '../styles/common.p.module.css.js';
+import { ListBox } from './list-box.js'; // eslint-disable-next-line complexity
+
+const PopupContent = _ref => {
+  let {
+    theme,
+    listBoxState,
+    triggerRef,
+    dropdownRef,
+    listBoxItems,
+    placement,
+    size: sizeFromProps,
+    mode,
+    emptyListMessage,
+    maxVisibleItems,
+    trigger,
+    isOpen,
+    dropdownUpdateDeps = []
+  } = _ref;
+  const {
+    size,
+    observableRef
+  } = useActualSizeFromCss({
+    sizeFromProps,
+    triggerRef
+  });
+  const {
+    isPrimaryContrast
+  } = usePrimaryContrastCssVarTransfer({
+    isOpen,
+    triggerRef
+  });
+  useEffect(() => {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [listBoxItems, size, ...dropdownUpdateDeps]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: observableRef,
+    className: styles.observable
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    theme: theme,
+    ref: dropdownRef,
+    placement: placement,
+    maxWidth: "trigger",
+    minWidth: "trigger",
+    leastMaxHeight: 999999,
+    isOpen: isOpen,
+    cancelCloseAnimation: true,
+    disableFocusLock: true,
+    trigger: trigger
+  }, /*#__PURE__*/React.createElement(ListBox, {
+    state: listBoxState,
+    size: size,
+    mode: mode,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    items: listBoxItems,
+    isPrimaryContrast: isPrimaryContrast
+  })));
+};
+
+export { PopupContent };

package/lib/select-basic.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { InnerSingleComponentProps } from './types';
-export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): JSX.Element;
+import React from 'react';
+import type { InnerSingleComponentProps } from './types';
+export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;

package/lib/select-basic.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
-import { Dropdown } from '@rescui/dropdown';
 import { useSelect } from 'downshift';
 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 { PopupContent } from './parts/popup-content.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
 import { mergeProps } from './utils/merge-props.js';
 import { itemToString } from './utils/item-to-string.js';
@@ -61,7 +60,8 @@ function SelectBasic(_ref) {
   } = useA11y({
     prefix: 'select',
     error,
-    description: note
+    description: note,
+    isDisabled
   });
   const {
     isOpen,
@@ -74,6 +74,7 @@ function SelectBasic(_ref) {
   } = useSelect({
     items: flattenedOptions,
     itemToString,
+    itemToKey: getOptionValue,
     id: baseId,
     selectedItem,
     // defining our scroll behavior because on the first menu render the hook
@@ -89,7 +90,7 @@ function SelectBasic(_ref) {
       let {
         selectedItem: newSelectedItem
       } = _ref2;
-      onChange === null || onChange === void 0 || onChange(newSelectedItem);
+      onChange?.(newSelectedItem);
     },
 
     isItemDisabled(item) {
@@ -105,7 +106,13 @@ function SelectBasic(_ref) {
   const triggerProps = getToggleButtonProps({
     ref: triggerRef,
     onKeyDown: event => {
-      // backspace and backspace removing the last selected item (when popup is closed)
+      // prevent default behavior of Downshift when pressing Ctrl
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDownshiftDefault = true;
+        return;
+      } // backspace and backspace removing the last selected item (when popup is closed)
+
+
       if (isClearable && !isOpen && (event.key === 'Backspace' || event.key === 'Delete')) {
         reset();
       }
@@ -127,7 +134,6 @@ function SelectBasic(_ref) {
   });
   const listBoxState = {
     selectedMap,
-    selectionMode: 'single',
     highlightedIndex,
     getItemProps,
     menuProps
@@ -149,16 +155,18 @@ function SelectBasic(_ref) {
     value: selectedItem,
     isMultiple: false,
     options: flattenedOptions
-  }), /*#__PURE__*/React.createElement(Dropdown, {
-    mode: mode,
+  }), /*#__PURE__*/React.createElement(PopupContent, {
     theme: theme,
-    ref: dropdownRef,
+    size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
+    triggerRef: triggerRef,
     placement: placement,
-    maxWidth: "trigger",
-    minWidth: "trigger",
     isOpen: isOpen,
-    cancelCloseAnimation: true,
-    disableFocusLock: true,
+    listBoxState: listBoxState,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    listBoxItems: listBoxItems,
     trigger: _ref3 => {
       let {
         ref: triggerRefForDropdown
@@ -172,32 +180,25 @@ function SelectBasic(_ref) {
         triggerProps, labelFocusForTriggerProps, {
           ref: triggerRefForDropdown
         }),
+        tabIndex: isDisabled ? undefined : 0,
         className: styles.trigger,
         "data-test": "select__trigger"
       }, /*#__PURE__*/React.createElement("span", {
         className: cn(styles.triggerText, !hasValue && styles.labelNotSelected),
         "data-test": "select__trigger_content"
-      }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
+      }, selectedItem?.label ?? placeholder), /*#__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({
+          triggerRef.current?.focus({
             focusVisible: false
           });
         },
         triggerId: triggerProps.id
       })));
     }
-  }, /*#__PURE__*/React.createElement(ListBox, {
-    state: listBoxState,
-    size: size,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems
-  })));
+  }));
 }
 
 export { SelectBasic };

package/lib/select-searchable.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { InnerSingleComponentProps } from './types';
-export declare function SelectSearchable({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): JSX.Element;
+import React from 'react';
+import { InnerSingleComponentProps } from './types';
+export declare function SelectSearchable({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;

package/lib/select-searchable.js

@@ -1,14 +1,13 @@
 import React, { useRef } from 'react';
-import { Dropdown } from '@rescui/dropdown';
 import { useCombobox } from 'downshift';
 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 { PopupContent } from './parts/popup-content.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
 import { mergeProps } from './utils/merge-props.js';
 import { itemToString } from './utils/item-to-string.js';
@@ -48,7 +47,8 @@ function SelectSearchable(_ref) {
   const {
     flattenedOptions,
     listBoxItems,
-    setFilterString
+    setFilterString,
+    filterString
   } = useOptions(options);
   const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
   const hasValue = Boolean(selectedItem);
@@ -63,7 +63,8 @@ function SelectSearchable(_ref) {
     prefix: 'select',
     error,
     description: note,
-    fieldRef: inputRef
+    fieldRef: inputRef,
+    isDisabled
   });
   const {
     isOpen,
@@ -90,6 +91,7 @@ function SelectSearchable(_ref) {
     items: flattenedOptions,
     id: baseId,
     itemToString,
+    itemToKey: getOptionValue,
     selectedItem,
     // defining our scroll behavior because on the first menu render the hook
     // doesn't know menuRef and use page as the scroll boundary
@@ -104,7 +106,7 @@ function SelectSearchable(_ref) {
       let {
         selectedItem: newSelectedItem
       } = _ref3;
-      onChange === null || onChange === void 0 || onChange(newSelectedItem);
+      onChange?.(newSelectedItem);
     },
 
     isItemDisabled(item) {
@@ -163,12 +165,11 @@ function SelectSearchable(_ref) {
   } = useLabelFocus();
   const emptyListMessage = getEmptyMessage({
     isLoading,
-    isNothingFound: false,
+    isNothingFound: filterString.length > 0,
     noOptionsMessage
   });
   const listBoxState = {
     selectedMap,
-    selectionMode: 'single',
     highlightedIndex,
     getItemProps,
     menuProps
@@ -190,16 +191,18 @@ function SelectSearchable(_ref) {
     value: selectedItem,
     isMultiple: false,
     options: flattenedOptions
-  }), /*#__PURE__*/React.createElement(Dropdown, {
-    mode: mode,
+  }), /*#__PURE__*/React.createElement(PopupContent, {
     theme: theme,
-    ref: dropdownRef,
+    size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
+    triggerRef: inputRef,
     placement: placement,
-    maxWidth: "trigger",
-    minWidth: "trigger",
     isOpen: isOpen,
-    cancelCloseAnimation: true,
-    disableFocusLock: true,
+    listBoxState: listBoxState,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    listBoxItems: listBoxItems,
     trigger: _ref5 => {
       let {
         ref: triggerRefForDropdown
@@ -211,6 +214,7 @@ function SelectSearchable(_ref) {
       }, /*#__PURE__*/React.createElement("input", { ...rest,
         ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by inputProps,
         inputProps, labelFocusForTriggerProps),
+        disabled: isDisabled ? true : undefined,
         className: styles.searchInput,
         placeholder: placeholder,
         "data-test": "select__trigger_input"
@@ -219,32 +223,23 @@ function SelectSearchable(_ref) {
         ...mergeProps(getToggleButtonProps(), {
           ref: triggerRefForDropdown,
           onFocus: () => {
-            var _inputRef$current;
-
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+            inputRef.current?.focus();
           }
         }),
+        tabIndex: undefined,
         className: styles.trigger,
         "data-test": "select__trigger"
       }, /*#__PURE__*/React.createElement(Icons, {
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && hasValue,
         onClear: () => {
-          var _inputRef$current2;
-
           reset();
-          (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+          inputRef.current?.focus();
         },
         triggerId: inputProps.id
       })));
     }
-  }, /*#__PURE__*/React.createElement(ListBox, {
-    state: listBoxState,
-    size: size,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems
-  })));
+  }));
 }
 
 export { SelectSearchable };

package/lib/select.d.ts

@@ -1,28 +1,28 @@
-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, id, ...restProps }: SelectProps): JSX.Element;
-    propTypes: {
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        options: PropTypes.Validator<SelectOptionOrGroup[]>;
-        value: PropTypes.Validator<SelectOption>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-        theme: PropTypes.Requireable<string>;
-        placeholder: PropTypes.Requireable<string>;
-        isClearable: PropTypes.Requireable<boolean>;
-        isSearchable: PropTypes.Requireable<boolean>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        isLoading: PropTypes.Requireable<boolean>;
-        error: React.Validator<React.ReactNode>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        id: PropTypes.Requireable<string>;
-        note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        noOptionsMessage: React.Validator<import("./types").NoOptionsMessage>;
-        placement: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-    };
-};
+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, id, ...restProps }: SelectProps): React.JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        options: PropTypes.Validator<SelectOptionOrGroup[]>;
+        value: PropTypes.Validator<SelectOption>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        isClearable: PropTypes.Requireable<boolean>;
+        isSearchable: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isLoading: PropTypes.Requireable<boolean>;
+        error: any;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        noOptionsMessage: PropTypes.Validator<import("./types").NoOptionsMessage>;
+        placement: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+    };
+};

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

@@ -1,31 +1,32 @@
 var styles = {
-  "themeLight": "_themeLight_buyj66_6",
-  "themeDark": "_themeDark_buyj66_9",
-  "sizeS": "_sizeS_buyj66_13",
-  "sizeM": "_sizeM_buyj66_16",
-  "sizeL": "_sizeL_buyj66_19",
-  "classic": "_classic_buyj66_23",
-  "rock": "_rock_buyj66_26",
-  "root": "_root_buyj66_30",
-  "trigger": "_trigger_buyj66_36",
-  "error": "_error_buyj66_70",
-  "enabled": "_enabled_buyj66_75",
-  "disabled": "_disabled_buyj66_79",
-  "searchable": "_searchable_buyj66_92",
-  "canBeMultiline": "_canBeMultiline_buyj66_119",
-  "triggerContainer": "_triggerContainer_buyj66_123",
-  "triggerText": "_triggerText_buyj66_127",
-  "searchInput": "_searchInput_buyj66_128",
-  "labelNotSelected": "_labelNotSelected_buyj66_159",
-  "multi": "_multi_buyj66_213",
-  "tagsContainer": "_tagsContainer_buyj66_230",
-  "tag": "_tag_buyj66_230",
-  "filledTag": "_filledTag_buyj66_252",
-  "iconsWrapper": "_iconsWrapper_buyj66_260",
-  "toggle": "_toggle_buyj66_278",
-  "icon": "_icon_buyj66_260",
-  "clearIcon": "_clearIcon_buyj66_352",
-  "visuallyHidden": "_visuallyHidden_buyj66_412",
-  "select": "_select_buyj66_429"
+  "themeLight": "_themeLight_nnwwbc_6",
+  "themeDark": "_themeDark_nnwwbc_9",
+  "sizeS": "_sizeS_nnwwbc_13",
+  "sizeM": "_sizeM_nnwwbc_16",
+  "sizeL": "_sizeL_nnwwbc_19",
+  "classic": "_classic_nnwwbc_23",
+  "rock": "_rock_nnwwbc_26",
+  "root": "_root_nnwwbc_30",
+  "triggerContainer": "_triggerContainer_nnwwbc_36",
+  "disabled": "_disabled_nnwwbc_41",
+  "trigger": "_trigger_nnwwbc_36",
+  "error": "_error_nnwwbc_78",
+  "enabled": "_enabled_nnwwbc_83",
+  "searchable": "_searchable_nnwwbc_98",
+  "canBeMultiline": "_canBeMultiline_nnwwbc_125",
+  "triggerText": "_triggerText_nnwwbc_129",
+  "searchInput": "_searchInput_nnwwbc_130",
+  "labelNotSelected": "_labelNotSelected_nnwwbc_161",
+  "multi": "_multi_nnwwbc_217",
+  "tagsContainer": "_tagsContainer_nnwwbc_234",
+  "tag": "_tag_nnwwbc_234",
+  "filledTag": "_filledTag_nnwwbc_256",
+  "iconsWrapper": "_iconsWrapper_nnwwbc_264",
+  "toggle": "_toggle_nnwwbc_282",
+  "icon": "_icon_nnwwbc_264",
+  "clearIcon": "_clearIcon_nnwwbc_356",
+  "visuallyHidden": "_visuallyHidden_nnwwbc_416",
+  "select": "_select_nnwwbc_433",
+  "observable": "_observable_nnwwbc_455"
 };
 export { styles as default };

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

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_lyv0k_6",
-  "themeDark": "_themeDark_lyv0k_9",
-  "sizeS": "_sizeS_lyv0k_13",
-  "sizeM": "_sizeM_lyv0k_16",
-  "sizeL": "_sizeL_lyv0k_19",
-  "main": "_main_lyv0k_23",
-  "label": "_label_lyv0k_27",
-  "disabled": "_disabled_lyv0k_33",
-  "footer": "_footer_lyv0k_38",
-  "errorMessage": "_errorMessage_lyv0k_45",
-  "error": "_error_lyv0k_45",
-  "note": "_note_lyv0k_54"
+  "themeLight": "_themeLight_1ujhkhk_6",
+  "themeDark": "_themeDark_1ujhkhk_9",
+  "sizeS": "_sizeS_1ujhkhk_13",
+  "sizeM": "_sizeM_1ujhkhk_16",
+  "sizeL": "_sizeL_1ujhkhk_19",
+  "main": "_main_1ujhkhk_23",
+  "label": "_label_1ujhkhk_27",
+  "disabled": "_disabled_1ujhkhk_33",
+  "footer": "_footer_1ujhkhk_38",
+  "errorMessage": "_errorMessage_1ujhkhk_45",
+  "error": "_error_1ujhkhk_45",
+  "note": "_note_1ujhkhk_54"
 };
 export { styles as default };

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

@@ -1,14 +1,16 @@
 var styles = {
-  "sizeS": "_sizeS_tuv1by_6",
-  "sizeM": "_sizeM_tuv1by_9",
-  "sizeL": "_sizeL_tuv1by_12",
-  "listBox": "_listBox_tuv1by_16",
-  "item": "_item_tuv1by_30",
-  "selected": "_selected_tuv1by_76",
-  "disabled": "_disabled_tuv1by_87",
-  "checkIcon": "_checkIcon_tuv1by_94",
-  "visible": "_visible_tuv1by_101",
-  "divider": "_divider_tuv1by_108",
-  "groupHeader": "_groupHeader_tuv1by_122"
+  "sizeS": "_sizeS_1hyzjwq_6",
+  "sizeM": "_sizeM_1hyzjwq_9",
+  "sizeL": "_sizeL_1hyzjwq_12",
+  "classic": "_classic_1hyzjwq_16",
+  "rock": "_rock_1hyzjwq_19",
+  "listBox": "_listBox_1hyzjwq_23",
+  "item": "_item_1hyzjwq_39",
+  "selected": "_selected_1hyzjwq_77",
+  "disabled": "_disabled_1hyzjwq_91",
+  "checkIcon": "_checkIcon_1hyzjwq_98",
+  "visible": "_visible_1hyzjwq_105",
+  "divider": "_divider_1hyzjwq_112",
+  "groupHeader": "_groupHeader_1hyzjwq_126"
 };
 export { styles as default };