@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/multiselect.js

@@ -3,7 +3,6 @@ import cn from 'classnames';
 import { Dropdown } from '@rescui/dropdown';
 import { useSelect } from 'downshift';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-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';
@@ -212,14 +211,7 @@ function Multiselect(_ref) {
     if (dropdownRef.current) {
       dropdownRef.current.scheduleUpdate();
     }
-  }, [selectedItems]); // use it instead of ":has(:focus-visible), :focus-visible"
-
-  const {
-    isFocusVisible,
-    focusProps
-  } = useFocusRing({
-    within: true
-  });
+  }, [selectedItems]);
   const {
     isFocusedByLabel,
     labelClickProps,
@@ -273,14 +265,17 @@ function Multiselect(_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: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
         "data-open": isOpen,
-        "data-has-focus-visible": isFocusVisible,
         "data-label-focused": isFocusedByLabel,
         "data-test": "multiselect__trigger"
       }, /*#__PURE__*/React.createElement(MultiTrigger, {
@@ -303,7 +298,7 @@ function Multiselect(_ref) {
           });
         },
         triggerId: triggerProps.id
-      }));
+      })));
     }
   }, /*#__PURE__*/React.createElement(ListBox, {
     state: listBoxState,

package/lib/native-select.js

@@ -4,16 +4,17 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { ErrorMessage } from '@rescui/form-field';
-import { useFocus, useHover } from 'react-aria';
 import { nativeOptionType, nativeOptionsGroupType, noOptionsMessageType } from './common-prop-types.js';
 import { useA11y } from './hooks/use-a11y.js';
+import { useHover } from './hooks/use-hover.js';
+import { useFocus } from './hooks/use-focus.js';
 import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
-import { NativeSelectTrigger } from './parts/native-select-trigger.js';
 import { NativeSelectOptionsWithGroups } from './parts/native-select-options-with-groups.js';
+import { Icons } from './parts/icons.js';
 import { isOptionAGroup } from './utils/is-option-a-group.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
 import { mergeProps } from './utils/merge-props.js';
-import styles from './styles/native-select.p.module.css.js';
+import styles from './styles/common.p.module.css.js';
 
 function findSelectedOption(options, selectedValue) {
   let result = null;
@@ -41,6 +42,10 @@ const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
+};
+const THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
 }; // eslint-disable-next-line complexity
 
 const NativeSelect = _ref => {
@@ -96,12 +101,11 @@ const NativeSelect = _ref => {
   // replace it with ":focus + &" selector in that case
 
 
-  const [isFocused, setIsFocused] = React.useState(false);
   const {
+    isFocused,
     focusProps
   } = useFocus({
-    isDisabled,
-    onFocusChange: setIsFocused
+    isDisabled
   }); // same as above, could be replaced with ":hover + &" selector
 
   const {
@@ -116,7 +120,7 @@ const NativeSelect = _ref => {
     noOptionsMessage
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.main, SIZE_STYLES[size]),
+    className: cn(className, styles.root, SIZE_STYLES[size], THEME_STYLES[theme], styles.classic, isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error),
     id: id,
     style: style,
     "data-test": "native-select"
@@ -133,7 +137,7 @@ const NativeSelect = _ref => {
     note: note,
     descriptionProps: descriptionProps
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
+    className: styles.triggerContainer
   }, /*#__PURE__*/React.createElement("select", { ...rest,
     ...mergeProps(fieldProps, focusProps, hoverProps, {
       onKeyDown: event => {
@@ -161,11 +165,16 @@ const NativeSelect = _ref => {
     selectedLabel: value === null || value === void 0 ? void 0 : value.label,
     selectedValue: value === null || value === void 0 ? void 0 : value.value,
     placeholder
-  }) : /*#__PURE__*/React.createElement(NativeSelectTrigger, {
-    value: value,
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: cn(styles.trigger),
+    "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,
-    isDisabled: isDisabled,
-    isClearable: isClearable,
     triggerId: fieldProps.id,
     onClear: () => {
       var _triggerRef$current;
@@ -175,11 +184,8 @@ const NativeSelect = _ref => {
         focusVisible: false
       });
     },
-    size: size,
-    theme: theme,
-    hasError: Boolean(error),
-    placeholder: placeholder
-  }))));
+    canHaveClearIcon: isClearable && !isDisabled && Boolean(value === null || value === void 0 ? void 0 : value.value)
+  })))));
 };
 
 NativeSelect.propTypes = {

package/lib/parts/hidden-select.js

@@ -31,7 +31,7 @@ const HiddenSelect = _ref => {
   const allItems = Array.from( // map will deduplicate options by values
   new Map((!value ? options : [...options, ...arrayValue]).map(item => [item.value, item])).values());
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.hiddenSelect
+    className: styles.visuallyHidden
   }, /*#__PURE__*/React.createElement("select", { ...selectProps
   }, /*#__PURE__*/React.createElement("option", {
     value: "",

package/lib/parts/icons.d.ts

@@ -5,7 +5,6 @@ declare type ClearOrLoadingProps = {
     onClearClick: () => void;
     triggerId?: string;
     className?: string;
-    customStylesMap?: Record<string, string>;
 };
 export declare const ClearOrLoading: React.FC<ClearOrLoadingProps>;
 export declare type IconsProps = {
@@ -13,7 +12,6 @@ export declare type IconsProps = {
     canHaveClearIcon?: boolean;
     onClear?: () => void;
     triggerId?: string;
-    customStylesMap?: Record<string, string>;
 };
-export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId, customStylesMap: styles }: IconsProps) => JSX.Element;
+export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => JSX.Element;
 export {};

package/lib/parts/icons.js

@@ -11,8 +11,7 @@ const ClearOrLoading = _ref => {
     canHaveClearIcon,
     onClearClick,
     triggerId,
-    className,
-    customStylesMap: styles$1 = styles
+    className
   } = _ref;
 
   if (isLoading) {
@@ -20,14 +19,14 @@ const ClearOrLoading = _ref => {
       style: {
         pointerEvents: 'none'
       },
-      className: cn(className, styles$1.icon),
+      className: cn(className, styles.icon),
       "data-test": "loading-icon",
       "data-render-all-sizes": true
     });
   } else if (canHaveClearIcon) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: cn(className, styles$1.icon, styles$1.clearIcon),
+      className: cn(className, styles.icon, styles.clearIcon),
       "data-test": "clear-icon",
       onClick: e => {
         e.stopPropagation();
@@ -51,19 +50,17 @@ const Icons = _ref2 => {
     isLoading,
     canHaveClearIcon,
     onClear,
-    triggerId,
-    customStylesMap: styles$1 = styles
+    triggerId
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.iconsWrapper
+    className: styles.iconsWrapper
   }, /*#__PURE__*/React.createElement(ClearOrLoading, {
     isLoading: isLoading,
     canHaveClearIcon: canHaveClearIcon,
     onClearClick: onClear,
-    triggerId: triggerId,
-    customStylesMap: styles$1
+    triggerId: triggerId
   }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
-    className: styles$1.toggle,
+    className: styles.toggle,
     "data-test": "toggle-icon",
     "data-render-all-sizes": true
   }));