@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66 → 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67

package/lib/select-basic.js

@@ -2,7 +2,6 @@ import React from 'react';
 import cn from 'classnames';
 import { Dropdown } from '@rescui/dropdown';
 import { useSelect } from 'downshift';
-import { useFocusRing } from '@react-aria/focus';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { useLabelFocus } from './hooks/use-label-focus.js';
 import { useOptions } from './hooks/use-options.js';
@@ -115,13 +114,6 @@ function SelectBasic(_ref) {
     ...(isOpen && isListBoxEmpty ? {
       'aria-activedescendant': menuProps.id
     } : {})
-  }); // use it instead of ":has(:focus-visible), :focus-visible"
-
-  const {
-    isFocusVisible,
-    focusProps
-  } = useFocusRing({
-    within: true
   });
   const {
     isFocusedByLabel,
@@ -171,15 +163,16 @@ function SelectBasic(_ref) {
       let {
         ref: triggerRefForDropdown
       } = _ref3;
-      return /*#__PURE__*/React.createElement("div", { ...rest,
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.triggerContainer,
+        "data-open": isOpen,
+        "data-label-focused": isFocusedByLabel
+      }, /*#__PURE__*/React.createElement("div", { ...rest,
         ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by triggerProps
-        triggerProps, focusProps, labelFocusForTriggerProps, {
+        triggerProps, labelFocusForTriggerProps, {
           ref: triggerRefForDropdown
         }),
         className: styles.trigger,
-        "data-open": isOpen,
-        "data-has-focus-visible": isFocusVisible,
-        "data-label-focused": isFocusedByLabel,
         "data-test": "select__trigger"
       }, /*#__PURE__*/React.createElement("span", {
         className: cn(styles.triggerText, !hasValue && styles.labelNotSelected),
@@ -196,7 +189,7 @@ function SelectBasic(_ref) {
           });
         },
         triggerId: triggerProps.id
-      }));
+      })));
     }
   }, /*#__PURE__*/React.createElement(ListBox, {
     state: listBoxState,

package/lib/select-searchable.js

@@ -1,7 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { Dropdown } from '@rescui/dropdown';
 import { useCombobox } from 'downshift';
-import { useFocusRing } from '@react-aria/focus';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { useLabelFocus } from './hooks/use-label-focus.js';
 import { useOptions } from './hooks/use-options.js';
@@ -43,11 +42,9 @@ function SelectSearchable(_ref) {
     placeholder,
     ...rest
   } = _ref;
-  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
   const dropdownRef = useRef(null);
-  const menuRef = React.useRef(null); // use it instead of :has(.searchInput:focus)
-
-  const [inputFocused, setInputFocused] = useState(false);
+  const menuRef = useRef(null);
   const {
     flattenedOptions,
     listBoxItems,
@@ -60,11 +57,13 @@ function SelectSearchable(_ref) {
     fieldProps,
     errorMessageProps,
     descriptionProps,
-    baseId
+    baseId,
+    labelProps
   } = useA11y({
     prefix: 'select',
     error,
-    description: note
+    description: note,
+    fieldRef: inputRef
   });
   const {
     isOpen,
@@ -150,19 +149,12 @@ function SelectSearchable(_ref) {
   }, {
     suppressRefError: true
   });
-  const triggerProps = getToggleButtonProps({
-    ref: triggerRef,
+  const inputProps = getInputProps({
+    ref: inputRef,
     // 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
-  } = useFocusRing({
-    within: true
   });
   const {
     isFocusedByLabel,
@@ -186,7 +178,7 @@ function SelectSearchable(_ref) {
     size: size,
     disabled: isDisabled,
     label: label,
-    labelProps: mergeProps(getLabelProps(), labelClickProps),
+    labelProps: mergeProps(labelProps, getLabelProps(), labelClickProps),
     boldLabel: boldLabel,
     error: error,
     reserveErrorLine: reserveErrorLine,
@@ -212,39 +204,39 @@ function SelectSearchable(_ref) {
       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,
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.triggerContainer,
         "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: () => {},
+        "data-label-focused": isFocusedByLabel
+      }, /*#__PURE__*/React.createElement("input", { ...rest,
+        ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by inputProps,
+        inputProps, labelFocusForTriggerProps),
         className: styles.searchInput,
         placeholder: placeholder,
         "data-test": "select__trigger_input"
-      }), /*#__PURE__*/React.createElement(Icons, {
+      }), /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        ...mergeProps(getToggleButtonProps(), {
+          ref: triggerRefForDropdown,
+          onFocus: () => {
+            var _inputRef$current;
+
+            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+          }
+        }),
+        className: styles.trigger,
+        "data-test": "select__trigger"
+      }, /*#__PURE__*/React.createElement(Icons, {
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && hasValue,
         onClear: () => {
-          var _triggerRef$current;
+          var _inputRef$current2;
 
           reset();
-          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
-            focusVisible: false
-          });
+          (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
         },
-        triggerId: triggerProps.id
-      }));
+        triggerId: inputProps.id
+      })));
     }
   }, /*#__PURE__*/React.createElement(ListBox, {
     state: listBoxState,

package/lib/select.js

@@ -50,7 +50,7 @@ const Select = _ref => {
   const theme = useThemeWithUndefined(themeFromProps);
   const InnerSingleComponent = isSearchable ? SelectSearchable : SelectBasic;
   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),
+    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error, isSearchable && styles.searchable),
     id: id,
     style: style,
     "data-test": "select"

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

@@ -1,28 +1,31 @@
 var styles = {
-  "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"
+  "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"
 };
 export { styles as default };

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

@@ -1,15 +1,15 @@
 var styles = {
-  "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"
+  "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"
 };
 export { styles as default };

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

@@ -1,14 +1,14 @@
 var styles = {
-  "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"
+  "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"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
+  "version": "0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,15 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@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",
+    "@rescui/dropdown": "0.9.5-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
+    "@rescui/form-field": "0.1.1-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
+    "@rescui/tag": "0.13.5-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
+    "@rescui/use-resize-observer": "0.3.1-RUI-280-Update-select-component-downshift-2f40ef205.179+2f40ef205",
     "classnames": "^2.2.6",
     "downshift": "^9.3.2",
-    "react-aria": "^3.47.0",
-    "react-stately": "^3.45.0",
     "scroll-into-view-if-needed": "3.1.0"
   },
   "peerDependencies": {
@@ -33,9 +30,9 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
+    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
     "@rescui/scripts": "0.5.1",
-    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-downshift-cd2a98813.66+cd2a98813",
+    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
     "@rescui/visual-regression": "0.1.4",
     "sniffr": "^1.2.0"
   },
@@ -44,5 +41,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "cd2a98813d37db8b46393317febfce4e91592516"
+  "gitHead": "2f40ef205f94c200019ec963e3fd0ca47fe1cdcb"
 }

package/lib/parts/native-select-trigger.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { Theme } from '@rescui/ui-contexts';
-import { NativeSelectOption, SelectSize } from '../types';
-export declare type NativeSelectDefaultTriggerProps = {
-    isLoading: boolean;
-    isDisabled: boolean;
-    isClearable: boolean;
-    size: SelectSize;
-    theme?: Theme;
-    hasError: boolean;
-    placeholder?: string;
-    value: NativeSelectOption;
-    onClear?: () => void;
-    triggerId?: string;
-};
-export declare const NativeSelectTrigger: ({ isLoading, isDisabled, isClearable, hasError, size, theme, placeholder, value, onClear, triggerId }: NativeSelectDefaultTriggerProps) => JSX.Element;

package/lib/parts/native-select-trigger.js

@@ -1,45 +0,0 @@
-import cn from 'classnames';
-import React from 'react';
-import styles from '../styles/native-select-trigger.p.module.css.js';
-import { Icons } from './icons.js';
-const SIZE_STYLES = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL
-};
-const THEME_STYLES = {
-  light: styles.themeLight,
-  dark: styles.themeDark
-};
-
-const NativeSelectTrigger = _ref => {
-  let {
-    isLoading,
-    isDisabled,
-    isClearable,
-    hasError,
-    size,
-    theme,
-    placeholder,
-    value,
-    onClear,
-    triggerId
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.trigger, SIZE_STYLES[size], THEME_STYLES[theme], isDisabled ? styles.disabled : styles.enabled, hasError && styles.error),
-    "data-test": 'native-select_trigger',
-    "data-rs-internal": 'select-native-trigger'
-  }, /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.triggerText, !(value !== null && value !== void 0 && value.value) && styles.labelNotSelected),
-    "data-test": 'native-select_trigger_text',
-    "aria-hidden": "true"
-  }, (value === null || value === void 0 ? void 0 : value.label) ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
-    isLoading: isLoading,
-    triggerId: triggerId,
-    onClear: onClear,
-    canHaveClearIcon: isClearable && !isDisabled && Boolean(value === null || value === void 0 ? void 0 : value.value),
-    customStylesMap: styles
-  }));
-};
-
-export { NativeSelectTrigger };

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

@@ -1,18 +0,0 @@
-var styles = {
-  "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 +0,0 @@
-var styles = {
-  "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 };