@rescui/select 0.19.1 → 0.19.3

package/lib/parts/icons.d.ts

@@ -12,6 +12,15 @@ export type IconsProps = {
     canHaveClearIcon?: boolean;
     onClear?: () => void;
     triggerId?: string;
+    /**
+     * Mouse interaction props (e.g. `ref` and `onClick`) for the icons area.
+     * The area is a pointer-only affordance: the trigger itself owns the popup
+     * interaction for keyboard and assistive technology users, so no ARIA role
+     * or state must be passed here.
+     */
+    toggleProps?: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.Ref<HTMLDivElement>;
+    };
 };
-export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId, ...restProps }: IconsProps) => React.JSX.Element;
+export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId, toggleProps }: IconsProps) => React.JSX.Element;
 export {};

package/lib/parts/icons.js

@@ -122,77 +122,57 @@ const ClearOrLoading = t0 => {
 };
 
 const Icons = t0 => {
-  const $ = c(15);
-  let canHaveClearIcon;
-  let isLoading;
-  let onClear;
-  let restProps;
-  let triggerId;
-
-  if ($[0] !== t0) {
-    ({
-      isLoading,
-      canHaveClearIcon,
-      onClear,
-      triggerId,
-      ...restProps
-    } = t0);
-    $[0] = t0;
-    $[1] = canHaveClearIcon;
-    $[2] = isLoading;
-    $[3] = onClear;
-    $[4] = restProps;
-    $[5] = triggerId;
-  } else {
-    canHaveClearIcon = $[1];
-    isLoading = $[2];
-    onClear = $[3];
-    restProps = $[4];
-    triggerId = $[5];
-  }
-
+  const $ = c(9);
+  const {
+    isLoading,
+    canHaveClearIcon,
+    onClear,
+    triggerId,
+    toggleProps
+  } = t0;
   let t1;
 
-  if ($[6] !== canHaveClearIcon || $[7] !== isLoading || $[8] !== onClear || $[9] !== triggerId) {
+  if ($[0] !== canHaveClearIcon || $[1] !== isLoading || $[2] !== onClear || $[3] !== triggerId) {
     t1 = /*#__PURE__*/React.createElement(ClearOrLoading, {
       isLoading: isLoading,
       canHaveClearIcon: canHaveClearIcon,
       onClearClick: onClear,
       triggerId: triggerId
     });
-    $[6] = canHaveClearIcon;
-    $[7] = isLoading;
-    $[8] = onClear;
-    $[9] = triggerId;
-    $[10] = t1;
+    $[0] = canHaveClearIcon;
+    $[1] = isLoading;
+    $[2] = onClear;
+    $[3] = triggerId;
+    $[4] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[4];
   }
 
   let t2;
 
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = /*#__PURE__*/React.createElement(DownOutlineIcon, {
       className: styles.toggle,
       "data-test": "toggle-icon",
-      "data-render-all-sizes": true
+      "data-render-all-sizes": true,
+      "aria-hidden": "true"
     });
-    $[11] = t2;
+    $[5] = t2;
   } else {
-    t2 = $[11];
+    t2 = $[5];
   }
 
   let t3;
 
-  if ($[12] !== restProps || $[13] !== t1) {
-    t3 = /*#__PURE__*/React.createElement("div", _extends({
+  if ($[6] !== t1 || $[7] !== toggleProps) {
+    t3 = /*#__PURE__*/React.createElement("div", _extends({}, toggleProps, {
       className: styles.iconsWrapper
-    }, restProps), t1, t2);
-    $[12] = restProps;
-    $[13] = t1;
-    $[14] = t3;
+    }), t1, t2);
+    $[6] = t1;
+    $[7] = toggleProps;
+    $[8] = t3;
   } else {
-    t3 = $[14];
+    t3 = $[8];
   }
 
   return t3;

package/lib/select-searchable.js

@@ -18,7 +18,7 @@ import { getRealItemsCnt } from './utils/get-real-items-cnt.js';
 import styles from './styles/common.p.module.css.js';
 
 function SelectSearchable(t0) {
-  const $ = c(105);
+  const $ = c(108);
   let boldLabel;
   let disableFlip;
   let error;
@@ -322,112 +322,126 @@ function SelectSearchable(t0) {
   }
 
   const reset = t9;
-  let menuProps;
   let t10;
 
-  if ($[39] !== getInputProps || $[40] !== getMenuProps || $[41] !== isListBoxEmpty || $[42] !== isOpen) {
+  if ($[39] !== getToggleButtonProps) {
+    t10 = getToggleButtonProps();
+    $[39] = getToggleButtonProps;
+    $[40] = t10;
+  } else {
+    t10 = $[40];
+  }
+
+  const {
+    ref: toggleRef,
+    onClick: onToggleClick
+  } = t10;
+  let menuProps;
+  let t11;
+
+  if ($[41] !== getInputProps || $[42] !== getMenuProps || $[43] !== isListBoxEmpty || $[44] !== isOpen) {
     menuProps = getMenuProps({
       ref: setMenuEl
     }, {
       suppressRefError: true
     });
-    t10 = getInputProps({
+    t11 = getInputProps({
       ref: setInputEl,
       ...(isOpen && isListBoxEmpty ? {
         "aria-activedescendant": menuProps.id
       } : {})
     });
-    $[39] = getInputProps;
-    $[40] = getMenuProps;
-    $[41] = isListBoxEmpty;
-    $[42] = isOpen;
-    $[43] = menuProps;
-    $[44] = t10;
+    $[41] = getInputProps;
+    $[42] = getMenuProps;
+    $[43] = isListBoxEmpty;
+    $[44] = isOpen;
+    $[45] = menuProps;
+    $[46] = t11;
   } else {
-    menuProps = $[43];
-    t10 = $[44];
+    menuProps = $[45];
+    t11 = $[46];
   }
 
-  const inputProps = t10;
+  const inputProps = t11;
   const {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
   } = useLabelFocus();
-  const t11 = filterString.length > 0;
-  let t12;
+  const t12 = filterString.length > 0;
+  let t13;
 
-  if ($[45] !== isLoading || $[46] !== noOptionsMessage || $[47] !== t11) {
-    t12 = getEmptyMessage({
+  if ($[47] !== isLoading || $[48] !== noOptionsMessage || $[49] !== t12) {
+    t13 = getEmptyMessage({
       isLoading,
-      isNothingFound: t11,
+      isNothingFound: t12,
       noOptionsMessage
     });
-    $[45] = isLoading;
-    $[46] = noOptionsMessage;
-    $[47] = t11;
-    $[48] = t12;
+    $[47] = isLoading;
+    $[48] = noOptionsMessage;
+    $[49] = t12;
+    $[50] = t13;
   } else {
-    t12 = $[48];
+    t13 = $[50];
   }
 
-  const emptyListMessage = t12;
-  let t13;
+  const emptyListMessage = t13;
+  let t14;
 
-  if ($[49] !== getItemProps || $[50] !== highlightedIndex || $[51] !== menuProps || $[52] !== selectedMap) {
-    t13 = {
+  if ($[51] !== getItemProps || $[52] !== highlightedIndex || $[53] !== menuProps || $[54] !== selectedMap) {
+    t14 = {
       selectedMap,
       highlightedIndex,
       getItemProps,
       menuProps,
       isMulti: false
     };
-    $[49] = getItemProps;
-    $[50] = highlightedIndex;
-    $[51] = menuProps;
-    $[52] = selectedMap;
-    $[53] = t13;
+    $[51] = getItemProps;
+    $[52] = highlightedIndex;
+    $[53] = menuProps;
+    $[54] = selectedMap;
+    $[55] = t14;
   } else {
-    t13 = $[53];
+    t14 = $[55];
   }
 
-  const listBoxState = t13;
-  let t14;
+  const listBoxState = t14;
+  let t15;
 
-  if ($[54] !== getLabelProps || $[55] !== labelClickProps || $[56] !== labelProps) {
-    t14 = mergeProps(labelProps, getLabelProps(), labelClickProps);
-    $[54] = getLabelProps;
-    $[55] = labelClickProps;
-    $[56] = labelProps;
-    $[57] = t14;
+  if ($[56] !== getLabelProps || $[57] !== labelClickProps || $[58] !== labelProps) {
+    t15 = mergeProps(labelProps, getLabelProps(), labelClickProps);
+    $[56] = getLabelProps;
+    $[57] = labelClickProps;
+    $[58] = labelProps;
+    $[59] = t15;
   } else {
-    t14 = $[57];
+    t15 = $[59];
   }
 
-  let t15;
+  let t16;
 
-  if ($[58] !== flattenedOptions || $[59] !== name || $[60] !== selectedItem) {
-    t15 = /*#__PURE__*/React.createElement(HiddenSelect, {
+  if ($[60] !== flattenedOptions || $[61] !== name || $[62] !== selectedItem) {
+    t16 = /*#__PURE__*/React.createElement(HiddenSelect, {
       name: name,
       value: selectedItem,
       isMultiple: false,
       options: flattenedOptions
     });
-    $[58] = flattenedOptions;
-    $[59] = name;
-    $[60] = selectedItem;
-    $[61] = t15;
+    $[60] = flattenedOptions;
+    $[61] = name;
+    $[62] = selectedItem;
+    $[63] = t16;
   } else {
-    t15 = $[61];
+    t16 = $[63];
   }
 
-  let t16;
+  let t17;
 
-  if ($[62] !== fieldProps || $[63] !== getToggleButtonProps || $[64] !== hasValue || $[65] !== inputEl || $[66] !== inputProps || $[67] !== isClearable || $[68] !== isDisabled || $[69] !== isFocusedByLabel || $[70] !== isLoading || $[71] !== isOpen || $[72] !== labelFocusForTriggerProps || $[73] !== placeholder || $[74] !== reset || $[75] !== rest) {
-    t16 = t17 => {
+  if ($[64] !== fieldProps || $[65] !== hasValue || $[66] !== inputEl || $[67] !== inputProps || $[68] !== isClearable || $[69] !== isDisabled || $[70] !== isFocusedByLabel || $[71] !== isLoading || $[72] !== isOpen || $[73] !== labelFocusForTriggerProps || $[74] !== onToggleClick || $[75] !== placeholder || $[76] !== reset || $[77] !== rest || $[78] !== toggleRef) {
+    t17 = t18 => {
       const {
         ref: triggerRefForDropdown
-      } = t17;
+      } = t18;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.triggerContainer,
         "data-open": isOpen,
@@ -441,42 +455,45 @@ function SelectSearchable(t0) {
         className: styles.searchInput,
         placeholder: placeholder,
         "data-test": "select__trigger_input"
-      })), /*#__PURE__*/React.createElement(Icons, _extends({
+      })), /*#__PURE__*/React.createElement(Icons, {
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && hasValue,
         onClear: () => {
           reset();
           inputEl?.focus();
         },
-        triggerId: inputProps.id
-      }, mergeProps(getToggleButtonProps(), {
-        role: "button"
-      })))));
+        triggerId: inputProps.id,
+        toggleProps: {
+          ref: toggleRef,
+          onClick: onToggleClick
+        }
+      })));
     };
 
-    $[62] = fieldProps;
-    $[63] = getToggleButtonProps;
-    $[64] = hasValue;
-    $[65] = inputEl;
-    $[66] = inputProps;
-    $[67] = isClearable;
-    $[68] = isDisabled;
-    $[69] = isFocusedByLabel;
-    $[70] = isLoading;
-    $[71] = isOpen;
-    $[72] = labelFocusForTriggerProps;
-    $[73] = placeholder;
-    $[74] = reset;
-    $[75] = rest;
-    $[76] = t16;
+    $[64] = fieldProps;
+    $[65] = hasValue;
+    $[66] = inputEl;
+    $[67] = inputProps;
+    $[68] = isClearable;
+    $[69] = isDisabled;
+    $[70] = isFocusedByLabel;
+    $[71] = isLoading;
+    $[72] = isOpen;
+    $[73] = labelFocusForTriggerProps;
+    $[74] = onToggleClick;
+    $[75] = placeholder;
+    $[76] = reset;
+    $[77] = rest;
+    $[78] = toggleRef;
+    $[79] = t17;
   } else {
-    t16 = $[76];
+    t17 = $[79];
   }
 
-  let t17;
+  let t18;
 
-  if ($[77] !== disableFlip || $[78] !== emptyListMessage || $[79] !== inputEl || $[80] !== isOpen || $[81] !== listBoxItems || $[82] !== listBoxState || $[83] !== maxVisibleItems || $[84] !== mode || $[85] !== placement || $[86] !== renderInTrigger || $[87] !== size || $[88] !== t16 || $[89] !== theme) {
-    t17 = /*#__PURE__*/React.createElement(PopupContent, {
+  if ($[80] !== disableFlip || $[81] !== emptyListMessage || $[82] !== inputEl || $[83] !== isOpen || $[84] !== listBoxItems || $[85] !== listBoxState || $[86] !== maxVisibleItems || $[87] !== mode || $[88] !== placement || $[89] !== renderInTrigger || $[90] !== size || $[91] !== t17 || $[92] !== theme) {
+    t18 = /*#__PURE__*/React.createElement(PopupContent, {
       theme: theme,
       size: size,
       mode: mode,
@@ -490,61 +507,61 @@ function SelectSearchable(t0) {
       maxVisibleItems: maxVisibleItems,
       emptyListMessage: emptyListMessage,
       listBoxItems: listBoxItems,
-      trigger: t16
+      trigger: t17
     });
-    $[77] = disableFlip;
-    $[78] = emptyListMessage;
-    $[79] = inputEl;
-    $[80] = isOpen;
-    $[81] = listBoxItems;
-    $[82] = listBoxState;
-    $[83] = maxVisibleItems;
-    $[84] = mode;
-    $[85] = placement;
-    $[86] = renderInTrigger;
-    $[87] = size;
-    $[88] = t16;
-    $[89] = theme;
-    $[90] = t17;
+    $[80] = disableFlip;
+    $[81] = emptyListMessage;
+    $[82] = inputEl;
+    $[83] = isOpen;
+    $[84] = listBoxItems;
+    $[85] = listBoxState;
+    $[86] = maxVisibleItems;
+    $[87] = mode;
+    $[88] = placement;
+    $[89] = renderInTrigger;
+    $[90] = size;
+    $[91] = t17;
+    $[92] = theme;
+    $[93] = t18;
   } else {
-    t17 = $[90];
+    t18 = $[93];
   }
 
-  let t18;
+  let t19;
 
-  if ($[91] !== boldLabel || $[92] !== descriptionProps || $[93] !== error || $[94] !== errorMessageProps || $[95] !== isDisabled || $[96] !== label || $[97] !== note || $[98] !== reserveErrorLine || $[99] !== size || $[100] !== t14 || $[101] !== t15 || $[102] !== t17 || $[103] !== theme) {
-    t18 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+  if ($[94] !== boldLabel || $[95] !== descriptionProps || $[96] !== error || $[97] !== errorMessageProps || $[98] !== isDisabled || $[99] !== label || $[100] !== note || $[101] !== reserveErrorLine || $[102] !== size || $[103] !== t15 || $[104] !== t16 || $[105] !== t18 || $[106] !== theme) {
+    t19 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
       theme: theme,
       size: size,
       disabled: isDisabled,
       label: label,
-      labelProps: t14,
+      labelProps: t15,
       boldLabel: boldLabel,
       error: error,
       reserveErrorLine: reserveErrorLine,
       errorMessageProps: errorMessageProps,
       note: note,
       descriptionProps: descriptionProps
-    }, t15, t17);
-    $[91] = boldLabel;
-    $[92] = descriptionProps;
-    $[93] = error;
-    $[94] = errorMessageProps;
-    $[95] = isDisabled;
-    $[96] = label;
-    $[97] = note;
-    $[98] = reserveErrorLine;
-    $[99] = size;
-    $[100] = t14;
-    $[101] = t15;
-    $[102] = t17;
-    $[103] = theme;
-    $[104] = t18;
+    }, t16, t18);
+    $[94] = boldLabel;
+    $[95] = descriptionProps;
+    $[96] = error;
+    $[97] = errorMessageProps;
+    $[98] = isDisabled;
+    $[99] = label;
+    $[100] = note;
+    $[101] = reserveErrorLine;
+    $[102] = size;
+    $[103] = t15;
+    $[104] = t16;
+    $[105] = t18;
+    $[106] = theme;
+    $[107] = t19;
   } else {
-    t18 = $[104];
+    t19 = $[107];
   }
 
-  return t18;
+  return t19;
 }
 
 export { SelectSearchable };

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

@@ -1,32 +1,32 @@
 var styles = {
-  "themeLight": "_themeLight_1g1ww85_6",
-  "themeDark": "_themeDark_1g1ww85_9",
-  "sizeS": "_sizeS_1g1ww85_13",
-  "sizeM": "_sizeM_1g1ww85_16",
-  "sizeL": "_sizeL_1g1ww85_19",
-  "classic": "_classic_1g1ww85_23",
-  "rock": "_rock_1g1ww85_26",
-  "root": "_root_1g1ww85_30",
-  "triggerContainer": "_triggerContainer_1g1ww85_36",
-  "disabled": "_disabled_1g1ww85_41",
-  "trigger": "_trigger_1g1ww85_36",
-  "error": "_error_1g1ww85_78",
-  "enabled": "_enabled_1g1ww85_83",
-  "searchable": "_searchable_1g1ww85_98",
-  "canBeMultiline": "_canBeMultiline_1g1ww85_124",
-  "triggerText": "_triggerText_1g1ww85_128",
-  "searchInput": "_searchInput_1g1ww85_129",
-  "labelNotSelected": "_labelNotSelected_1g1ww85_159",
-  "multi": "_multi_1g1ww85_211",
-  "tagsContainer": "_tagsContainer_1g1ww85_226",
-  "tag": "_tag_1g1ww85_226",
-  "filledTag": "_filledTag_1g1ww85_248",
-  "iconsWrapper": "_iconsWrapper_1g1ww85_256",
-  "toggle": "_toggle_1g1ww85_274",
-  "icon": "_icon_1g1ww85_256",
-  "clearIcon": "_clearIcon_1g1ww85_359",
-  "visuallyHidden": "_visuallyHidden_1g1ww85_421",
-  "select": "_select_1g1ww85_438",
-  "observable": "_observable_1g1ww85_460"
+  "themeLight": "_themeLight_1svstn_6",
+  "themeDark": "_themeDark_1svstn_9",
+  "sizeS": "_sizeS_1svstn_13",
+  "sizeM": "_sizeM_1svstn_16",
+  "sizeL": "_sizeL_1svstn_19",
+  "classic": "_classic_1svstn_23",
+  "rock": "_rock_1svstn_26",
+  "root": "_root_1svstn_30",
+  "triggerContainer": "_triggerContainer_1svstn_36",
+  "disabled": "_disabled_1svstn_41",
+  "trigger": "_trigger_1svstn_36",
+  "error": "_error_1svstn_78",
+  "enabled": "_enabled_1svstn_83",
+  "searchable": "_searchable_1svstn_98",
+  "canBeMultiline": "_canBeMultiline_1svstn_124",
+  "triggerText": "_triggerText_1svstn_128",
+  "searchInput": "_searchInput_1svstn_129",
+  "labelNotSelected": "_labelNotSelected_1svstn_159",
+  "multi": "_multi_1svstn_211",
+  "tagsContainer": "_tagsContainer_1svstn_226",
+  "tag": "_tag_1svstn_226",
+  "filledTag": "_filledTag_1svstn_248",
+  "iconsWrapper": "_iconsWrapper_1svstn_256",
+  "toggle": "_toggle_1svstn_274",
+  "icon": "_icon_1svstn_256",
+  "clearIcon": "_clearIcon_1svstn_359",
+  "visuallyHidden": "_visuallyHidden_1svstn_421",
+  "select": "_select_1svstn_438",
+  "observable": "_observable_1svstn_460"
 };
 export { styles as default };

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

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_mmg9mc_6",
-  "themeDark": "_themeDark_mmg9mc_9",
-  "sizeS": "_sizeS_mmg9mc_13",
-  "sizeM": "_sizeM_mmg9mc_16",
-  "sizeL": "_sizeL_mmg9mc_19",
-  "main": "_main_mmg9mc_23",
-  "label": "_label_mmg9mc_27",
-  "disabled": "_disabled_mmg9mc_33",
-  "footer": "_footer_mmg9mc_38",
-  "errorMessage": "_errorMessage_mmg9mc_45",
-  "error": "_error_mmg9mc_45",
-  "note": "_note_mmg9mc_54"
+  "themeLight": "_themeLight_69lmgq_6",
+  "themeDark": "_themeDark_69lmgq_9",
+  "sizeS": "_sizeS_69lmgq_13",
+  "sizeM": "_sizeM_69lmgq_16",
+  "sizeL": "_sizeL_69lmgq_19",
+  "main": "_main_69lmgq_23",
+  "label": "_label_69lmgq_27",
+  "disabled": "_disabled_69lmgq_33",
+  "footer": "_footer_69lmgq_38",
+  "errorMessage": "_errorMessage_69lmgq_45",
+  "error": "_error_69lmgq_45",
+  "note": "_note_69lmgq_54"
 };
 export { styles as default };

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

@@ -1,16 +1,16 @@
 var styles = {
-  "sizeS": "_sizeS_1yr2c12_6",
-  "sizeM": "_sizeM_1yr2c12_9",
-  "sizeL": "_sizeL_1yr2c12_12",
-  "classic": "_classic_1yr2c12_16",
-  "rock": "_rock_1yr2c12_26",
-  "listBox": "_listBox_1yr2c12_37",
-  "item": "_item_1yr2c12_53",
-  "selected": "_selected_1yr2c12_91",
-  "disabled": "_disabled_1yr2c12_105",
-  "checkIcon": "_checkIcon_1yr2c12_112",
-  "visible": "_visible_1yr2c12_119",
-  "divider": "_divider_1yr2c12_126",
-  "groupHeader": "_groupHeader_1yr2c12_140"
+  "sizeS": "_sizeS_pnlffs_6",
+  "sizeM": "_sizeM_pnlffs_9",
+  "sizeL": "_sizeL_pnlffs_12",
+  "classic": "_classic_pnlffs_16",
+  "rock": "_rock_pnlffs_26",
+  "listBox": "_listBox_pnlffs_37",
+  "item": "_item_pnlffs_53",
+  "selected": "_selected_pnlffs_91",
+  "disabled": "_disabled_pnlffs_105",
+  "checkIcon": "_checkIcon_pnlffs_112",
+  "visible": "_visible_pnlffs_119",
+  "divider": "_divider_pnlffs_126",
+  "groupHeader": "_groupHeader_pnlffs_140"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,9 +17,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.12.1",
+    "@rescui/dropdown": "^0.12.2",
     "@rescui/form-field": "^0.2.1",
-    "@rescui/tag": "^0.14.1",
+    "@rescui/tag": "^0.14.2",
     "@rescui/use-resize-observer": "^0.4.0",
     "classnames": "^2.2.6",
     "downshift": "^9.4.0",
@@ -43,5 +43,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "ce4c6c5e3fd5aede0006f6ef8e655fc0ab394c0f"
+  "gitHead": "92f2b57adabde3392f88ada707b9550c010e33eb"
 }