@rescui/select 0.18.1 → 0.18.3-RUI-308-Fix-select-issues-405b9fa40.12

package/lib/multiselect.js

@@ -176,12 +176,16 @@ function Multiselect(_ref) {
     }
 
   });
-  const menuProps = getMenuProps({
+  const menuProps = getMenuProps( // Downshift composes the ref into a callback ref without reading it during render.
+  // eslint-disable-next-line react-hooks/refs
+  {
     ref: menuRef,
     'aria-multiselectable': isListBoxEmpty ? undefined : 'true'
   }, {
     suppressRefError: true
-  });
+  }); // Downshift composes the ref into a callback ref without reading it during render.
+  // eslint-disable-next-line react-hooks/refs
+
   const triggerProps = getToggleButtonProps({
     ref: triggerRef,
     // eslint-disable-next-line complexity
@@ -232,7 +236,8 @@ function Multiselect(_ref) {
     selectedMap,
     highlightedIndex,
     getItemProps,
-    menuProps
+    menuProps,
+    isMulti: true
   };
   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),

package/lib/parts/hidden-select.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import styles from '../styles/common.p.module.css.js';
 
+const shouldRenderOption = option => 'value' in option && String(option.value);
+
 const HiddenSelect = _ref => {
   let {
     name,
@@ -29,7 +31,7 @@ const HiddenSelect = _ref => {
   const arrayValue = isMultiple ? value : [value]; // merge options with value in case the provided value is not included in options
 
   const allItems = Array.from( // map will deduplicate options by values
-  new Map((!value ? options : [...options, ...arrayValue]).map(item => [item.value, item])).values());
+  new Map((!value ? options : [...options, ...arrayValue]).map(item => [item.value, item])).values()).filter(shouldRenderOption);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.visuallyHidden
   }, /*#__PURE__*/React.createElement("select", { ...selectProps

package/lib/parts/icons.d.ts

@@ -13,5 +13,5 @@ export type IconsProps = {
     onClear?: () => void;
     triggerId?: string;
 };
-export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => React.JSX.Element;
+export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId, ...restProps }: IconsProps) => React.JSX.Element;
 export {};

package/lib/parts/icons.js

@@ -50,10 +50,12 @@ const Icons = _ref2 => {
     isLoading,
     canHaveClearIcon,
     onClear,
-    triggerId
+    triggerId,
+    ...restProps
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.iconsWrapper
+    className: styles.iconsWrapper,
+    ...restProps
   }, /*#__PURE__*/React.createElement(ClearOrLoading, {
     isLoading: isLoading,
     canHaveClearIcon: canHaveClearIcon,

package/lib/parts/list-box.js

@@ -25,12 +25,14 @@ function Option(_ref) {
   const {
     selectedMap,
     getItemProps,
-    highlightedIndex
+    highlightedIndex,
+    isMulti
   } = state;
   const index = item.index;
   const isSelected = selectedMap.has(item.key);
   const isHighlighted = highlightedIndex === item.index;
   const isDisabled = item.disabled;
+  const shouldRenderCheckIcon = isMulti || isSelected;
   return /*#__PURE__*/React.createElement("li", { ...getItemProps({
       item,
       index,
@@ -42,7 +44,7 @@ function Option(_ref) {
     "data-rs-internal": "select-list-box__item",
     "data-focused": isHighlighted,
     "data-test": `select-options-list__item_${item.key}`
-  }, /*#__PURE__*/React.createElement("span", null, item.label), /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+  }, /*#__PURE__*/React.createElement("span", null, item.label), shouldRenderCheckIcon && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
     "data-rs-internal": "select-list-box__check-icon",
     className: cn(styles.checkIcon, isSelected && styles.visible)
   }));

package/lib/public-api.p.css

@@ -1,3 +1,8 @@
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
 @define-mixin rs-select-size-s{
   &[class]{
     --_rs-select-size:s;

package/lib/public-api.pcss

@@ -1,3 +1,8 @@
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
 @define-mixin rs-select-size-s{
   &[class]{
     --_rs-select-size:s;

package/lib/select-basic.js

@@ -71,8 +71,7 @@ function SelectBasic(_ref) {
     getLabelProps,
     getMenuProps,
     highlightedIndex,
-    getItemProps,
-    reset
+    getItemProps
   } = useSelect({
     items: flattenedOptions,
     itemToString,
@@ -100,11 +99,20 @@ function SelectBasic(_ref) {
     }
 
   });
+
+  const reset = () => {
+    onChange?.(null);
+  }; // Downshift composes the ref into a callback ref without reading it during render.
+  // eslint-disable-next-line react-hooks/refs
+
+
   const menuProps = getMenuProps({
     ref: menuRef
   }, {
     suppressRefError: true
-  });
+  }); // Downshift composes the ref into a callback ref without reading it during render.
+  // eslint-disable-next-line react-hooks/refs
+
   const triggerProps = getToggleButtonProps({
     ref: triggerRef,
     onKeyDown: event => {
@@ -138,7 +146,8 @@ function SelectBasic(_ref) {
     selectedMap,
     highlightedIndex,
     getItemProps,
-    menuProps
+    menuProps,
+    isMulti: false
   };
   return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
     theme: theme,

package/lib/select-searchable.js

@@ -76,7 +76,6 @@ function SelectSearchable(_ref) {
     getInputProps,
     highlightedIndex,
     getItemProps,
-    reset,
     setInputValue
   } = useCombobox({
     onInputValueChange(_ref2) {
@@ -118,13 +117,15 @@ function SelectSearchable(_ref) {
     onIsOpenChange(_ref4) {
       let {
         isOpen: newIsOpen,
-        selectedItem: newSelectedItem
+        selectedItem: newSelectedItem,
+        inputValue: newInputValue
       } = _ref4;
+      const inputValueFromSelectedItem = itemToString(newSelectedItem);
 
       if (newIsOpen) {
         setFilterString('');
-      } else {
-        setInputValue(itemToString(newSelectedItem));
+      } else if (newInputValue !== inputValueFromSelectedItem) {
+        setInputValue(inputValueFromSelectedItem);
       }
     },
 
@@ -148,11 +149,21 @@ function SelectSearchable(_ref) {
     }
 
   });
+
+  const reset = () => {
+    setInputValue('');
+    onChange?.(null);
+  }; // Downshift composes the ref into a callback ref without reading it during render.
+  // eslint-disable-next-line react-hooks/refs
+
+
   const menuProps = getMenuProps({
     ref: menuRef
   }, {
     suppressRefError: true
-  });
+  }); // Downshift composes the ref into a callback ref without reading it during render.
+  // eslint-disable-next-line react-hooks/refs
+
   const inputProps = getInputProps({
     ref: inputRef,
     // fix screen-reader focus on an opened popup with an empty list
@@ -174,7 +185,8 @@ function SelectSearchable(_ref) {
     selectedMap,
     highlightedIndex,
     getItemProps,
-    menuProps
+    menuProps,
+    isMulti: false
   };
   return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
     theme: theme,
@@ -215,6 +227,10 @@ function SelectSearchable(_ref) {
         className: styles.triggerContainer,
         "data-open": isOpen,
         "data-label-focused": isFocusedByLabel
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.trigger,
+        "data-test": "select__trigger",
+        ref: triggerRefForDropdown
       }, /*#__PURE__*/React.createElement("input", { ...rest,
         ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by inputProps,
         inputProps, labelFocusForTriggerProps),
@@ -222,25 +238,17 @@ function SelectSearchable(_ref) {
         className: styles.searchInput,
         placeholder: placeholder,
         "data-test": "select__trigger_input"
-      }), /*#__PURE__*/React.createElement("div", {
-        role: "button",
-        ...mergeProps(getToggleButtonProps(), {
-          ref: triggerRefForDropdown,
-          onFocus: () => {
-            inputRef.current?.focus();
-          }
-        }),
-        tabIndex: undefined,
-        className: styles.trigger,
-        "data-test": "select__trigger"
-      }, /*#__PURE__*/React.createElement(Icons, {
+      }), /*#__PURE__*/React.createElement(Icons, {
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && hasValue,
         onClear: () => {
           reset();
           inputRef.current?.focus();
         },
-        triggerId: inputProps.id
+        triggerId: inputProps.id,
+        ...mergeProps(getToggleButtonProps(), {
+          role: 'button'
+        })
       })));
     }
   }));

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

@@ -1,32 +1,32 @@
 var styles = {
-  "themeLight": "_themeLight_ln30te_6",
-  "themeDark": "_themeDark_ln30te_9",
-  "sizeS": "_sizeS_ln30te_13",
-  "sizeM": "_sizeM_ln30te_16",
-  "sizeL": "_sizeL_ln30te_19",
-  "classic": "_classic_ln30te_23",
-  "rock": "_rock_ln30te_26",
-  "root": "_root_ln30te_30",
-  "triggerContainer": "_triggerContainer_ln30te_36",
-  "disabled": "_disabled_ln30te_41",
-  "trigger": "_trigger_ln30te_36",
-  "error": "_error_ln30te_78",
-  "enabled": "_enabled_ln30te_83",
-  "searchable": "_searchable_ln30te_98",
-  "canBeMultiline": "_canBeMultiline_ln30te_125",
-  "triggerText": "_triggerText_ln30te_129",
-  "searchInput": "_searchInput_ln30te_130",
-  "labelNotSelected": "_labelNotSelected_ln30te_161",
-  "multi": "_multi_ln30te_217",
-  "tagsContainer": "_tagsContainer_ln30te_234",
-  "tag": "_tag_ln30te_234",
-  "filledTag": "_filledTag_ln30te_256",
-  "iconsWrapper": "_iconsWrapper_ln30te_264",
-  "toggle": "_toggle_ln30te_282",
-  "icon": "_icon_ln30te_264",
-  "clearIcon": "_clearIcon_ln30te_356",
-  "visuallyHidden": "_visuallyHidden_ln30te_416",
-  "select": "_select_ln30te_433",
-  "observable": "_observable_ln30te_455"
+  "themeLight": "_themeLight_b7lwf6_6",
+  "themeDark": "_themeDark_b7lwf6_9",
+  "sizeS": "_sizeS_b7lwf6_13",
+  "sizeM": "_sizeM_b7lwf6_16",
+  "sizeL": "_sizeL_b7lwf6_19",
+  "classic": "_classic_b7lwf6_23",
+  "rock": "_rock_b7lwf6_26",
+  "root": "_root_b7lwf6_30",
+  "triggerContainer": "_triggerContainer_b7lwf6_36",
+  "disabled": "_disabled_b7lwf6_41",
+  "trigger": "_trigger_b7lwf6_36",
+  "error": "_error_b7lwf6_78",
+  "enabled": "_enabled_b7lwf6_83",
+  "searchable": "_searchable_b7lwf6_98",
+  "canBeMultiline": "_canBeMultiline_b7lwf6_124",
+  "triggerText": "_triggerText_b7lwf6_128",
+  "searchInput": "_searchInput_b7lwf6_129",
+  "labelNotSelected": "_labelNotSelected_b7lwf6_159",
+  "multi": "_multi_b7lwf6_212",
+  "tagsContainer": "_tagsContainer_b7lwf6_227",
+  "tag": "_tag_b7lwf6_227",
+  "filledTag": "_filledTag_b7lwf6_249",
+  "iconsWrapper": "_iconsWrapper_b7lwf6_257",
+  "toggle": "_toggle_b7lwf6_275",
+  "icon": "_icon_b7lwf6_257",
+  "clearIcon": "_clearIcon_b7lwf6_360",
+  "visuallyHidden": "_visuallyHidden_b7lwf6_422",
+  "select": "_select_b7lwf6_439",
+  "observable": "_observable_b7lwf6_461"
 };
 export { styles as default };

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

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_mwctxe_6",
-  "themeDark": "_themeDark_mwctxe_9",
-  "sizeS": "_sizeS_mwctxe_13",
-  "sizeM": "_sizeM_mwctxe_16",
-  "sizeL": "_sizeL_mwctxe_19",
-  "main": "_main_mwctxe_23",
-  "label": "_label_mwctxe_27",
-  "disabled": "_disabled_mwctxe_33",
-  "footer": "_footer_mwctxe_38",
-  "errorMessage": "_errorMessage_mwctxe_45",
-  "error": "_error_mwctxe_45",
-  "note": "_note_mwctxe_54"
+  "themeLight": "_themeLight_xu4mx4_6",
+  "themeDark": "_themeDark_xu4mx4_9",
+  "sizeS": "_sizeS_xu4mx4_13",
+  "sizeM": "_sizeM_xu4mx4_16",
+  "sizeL": "_sizeL_xu4mx4_19",
+  "main": "_main_xu4mx4_23",
+  "label": "_label_xu4mx4_27",
+  "disabled": "_disabled_xu4mx4_33",
+  "footer": "_footer_xu4mx4_38",
+  "errorMessage": "_errorMessage_xu4mx4_45",
+  "error": "_error_xu4mx4_45",
+  "note": "_note_xu4mx4_54"
 };
 export { styles as default };

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

@@ -1,16 +1,16 @@
 var styles = {
-  "sizeS": "_sizeS_1foz4kw_6",
-  "sizeM": "_sizeM_1foz4kw_9",
-  "sizeL": "_sizeL_1foz4kw_12",
-  "classic": "_classic_1foz4kw_16",
-  "rock": "_rock_1foz4kw_19",
-  "listBox": "_listBox_1foz4kw_23",
-  "item": "_item_1foz4kw_39",
-  "selected": "_selected_1foz4kw_77",
-  "disabled": "_disabled_1foz4kw_91",
-  "checkIcon": "_checkIcon_1foz4kw_98",
-  "visible": "_visible_1foz4kw_105",
-  "divider": "_divider_1foz4kw_112",
-  "groupHeader": "_groupHeader_1foz4kw_126"
+  "sizeS": "_sizeS_1nom7ru_6",
+  "sizeM": "_sizeM_1nom7ru_9",
+  "sizeL": "_sizeL_1nom7ru_12",
+  "classic": "_classic_1nom7ru_16",
+  "rock": "_rock_1nom7ru_26",
+  "listBox": "_listBox_1nom7ru_37",
+  "item": "_item_1nom7ru_53",
+  "selected": "_selected_1nom7ru_91",
+  "disabled": "_disabled_1nom7ru_105",
+  "checkIcon": "_checkIcon_1nom7ru_112",
+  "visible": "_visible_1nom7ru_119",
+  "divider": "_divider_1nom7ru_126",
+  "groupHeader": "_groupHeader_1nom7ru_140"
 };
 export { styles as default };

package/lib/types.d.ts

@@ -34,6 +34,7 @@ export type ListBoxState = {
     highlightedIndex: number;
     selectedMap: Map<Key, SelectOption>;
     menuRef?: React.RefObject<HTMLUListElement>;
+    isMulti?: boolean;
 };
 export type NativeSelectOption = {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.18.1",
+  "version": "0.18.3-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.11.1",
-    "@rescui/form-field": "^0.1.6",
-    "@rescui/tag": "^0.13.12",
-    "@rescui/use-resize-observer": "^0.3.3",
+    "@rescui/dropdown": "0.11.3-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
+    "@rescui/form-field": "0.1.8-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
+    "@rescui/tag": "0.13.14-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
+    "@rescui/use-resize-observer": "0.3.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
     "classnames": "^2.2.6",
     "downshift": "^9.3.2",
     "scroll-into-view-if-needed": "3.1.0"
@@ -31,10 +31,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.3",
-    "@rescui/visual-regression": "^0.1.4",
+    "@rescui/colors": "0.3.4-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
+    "@rescui/visual-regression": "0.1.4",
     "sniffr": "^1.2.0"
   },
   "scripts": {
@@ -42,5 +42,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
+  "gitHead": "405b9fa40886b0ab6709c9185e8214599d2d792e"
 }