@rescui/select 0.15.1-RUI-280-Update-select-component-separate-components-e772abaa1.56 → 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67

package/lib/native-select.js

@@ -1,20 +1,20 @@
 "use client";
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { ErrorMessage } from '@rescui/form-field';
-import { useField } from '@react-aria/label';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
 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 { 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 { useLabelFocus } from './hooks/use-label-focus.js';
-import { NativeSelectTrigger } from './parts/native-select-trigger.js';
-import { NativeSelectOptionsWithGroups } from './parts/native-select-options-with-groups.js';
-import styles from './styles/native-select.p.module.css.js';
+import { mergeProps } from './utils/merge-props.js';
+import styles from './styles/common.p.module.css.js';
 
 function findSelectedOption(options, selectedValue) {
   let result = null;
@@ -42,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 => {
@@ -57,6 +61,7 @@ const NativeSelect = _ref => {
     placeholder,
     isLoading = false,
     isDisabled = false,
+    isClearable = false,
     trigger,
     label,
     note,
@@ -65,20 +70,25 @@ const NativeSelect = _ref => {
     noOptionsMessage,
     name,
     boldLabel = true,
-    ...ariaRestProps
+    ...rest
   } = _ref;
+  const triggerRef = React.useRef(null);
   const {
     labelProps,
     fieldProps,
-    descriptionProps,
-    errorMessageProps
-  } = useField({ ...ariaRestProps,
-    label,
+    errorMessageProps,
+    descriptionProps
+  } = useA11y({
+    prefix: 'native-select',
+    error,
     description: note,
-    errorMessage: error
+    label,
+    fieldRef: triggerRef
   });
+
+  const reset = () => onChange(null);
+
   const theme = useThemeWithUndefined(themeFromProps);
-  const [isHovered, setIsHovered] = useState(false);
 
   const handleChange = event => {
     const newValue = event.target.value;
@@ -87,28 +97,30 @@ const NativeSelect = _ref => {
     if (onChange) {
       onChange(selectedOption);
     }
-  };
+  }; // delete it when triggerFunc is migrated to the css-states instead of js-props for hover/focus
+  // replace it with ":focus + &" selector in that case
+
 
-  const triggerRef = React.useRef(null);
   const {
-    isFocusVisible,
+    isFocused,
     focusProps
-  } = useFocusRing({
-    within: true
-  });
+  } = useFocus({
+    isDisabled
+  }); // same as above, could be replaced with ":hover + &" selector
+
   const {
-    isFocusedByLabel,
-    labelClickProps,
-    triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus(triggerRef);
-  const isFocused = isFocusedByLabel || isFocusVisible;
+    isHovered,
+    hoverProps
+  } = useHover({
+    isDisabled
+  });
   const emptyListMessage = getEmptyMessage({
     isLoading,
     isNothingFound: false,
     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"
@@ -117,7 +129,7 @@ const NativeSelect = _ref => {
     size: size,
     disabled: isDisabled,
     label: label,
-    labelProps: mergeProps(labelClickProps, labelProps),
+    labelProps: mergeProps(labelProps),
     boldLabel: boldLabel,
     error: error,
     errorMessageProps: errorMessageProps,
@@ -125,26 +137,15 @@ const NativeSelect = _ref => {
     note: note,
     descriptionProps: descriptionProps
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
-  }, trigger ? trigger({
-    focused: isFocused,
-    hovered: isHovered,
-    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,
-    isLoading: isLoading,
-    isFocused: isFocused,
-    isHovered: isHovered,
-    isDisabled: isDisabled,
-    size: size,
-    theme: theme,
-    hasError: Boolean(error),
-    placeholder: placeholder
-  }), /*#__PURE__*/React.createElement("select", { ...mergeProps(fieldProps, focusProps, labelFocusForTriggerProps, {
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false)
+    className: styles.triggerContainer
+  }, /*#__PURE__*/React.createElement("select", { ...rest,
+    ...mergeProps(fieldProps, focusProps, hoverProps, {
+      onKeyDown: event => {
+        // backspace and backspace removing the last selected item (when popup is closed)
+        if (isClearable && (event.key === 'Backspace' || event.key === 'Delete')) {
+          reset();
+        }
+      }
     }),
     ref: triggerRef,
     "data-test": "native-select_select",
@@ -158,6 +159,32 @@ const NativeSelect = _ref => {
     optionsWithGroups: options,
     placeholder: placeholder,
     emptyListMessage: emptyListMessage
+  })), trigger ? trigger({
+    focused: isFocused,
+    hovered: isHovered,
+    selectedLabel: value === null || value === void 0 ? void 0 : value.label,
+    selectedValue: value === null || value === void 0 ? void 0 : value.value,
+    placeholder
+  }) : /*#__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,
+    triggerId: fieldProps.id,
+    onClear: () => {
+      var _triggerRef$current;
+
+      reset();
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+        focusVisible: false
+      });
+    },
+    canHaveClearIcon: isClearable && !isDisabled && Boolean(value === null || value === void 0 ? void 0 : value.value)
   })))));
 };
 

package/lib/parts/hidden-select.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { SelectOption } from '../types';
+export declare type HiddenSelectProps = {
+    name?: string;
+    options: SelectOption[];
+} & ({
+    value: SelectOption[];
+    isMultiple: true;
+} | {
+    value: SelectOption;
+    isMultiple: false;
+});
+export declare const HiddenSelect: ({ name, options, value, isMultiple }: HiddenSelectProps) => JSX.Element;

package/lib/parts/hidden-select.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from '../styles/common.p.module.css.js';
+
+const HiddenSelect = _ref => {
+  let {
+    name,
+    options,
+    value,
+    isMultiple
+  } = _ref;
+  const selectProps = {
+    name,
+    'aria-hidden': true,
+    readOnly: true,
+    tabIndex: -1
+  };
+
+  if (isMultiple) {
+    selectProps.multiple = true;
+
+    if (value && value.length !== 0) {
+      selectProps.value = value.map(v => String(v.value));
+    }
+  } else if (value) {
+    const singleValue = value;
+    selectProps.value = singleValue.value;
+  }
+
+  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());
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.visuallyHidden
+  }, /*#__PURE__*/React.createElement("select", { ...selectProps
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "",
+    label: '\u00A0'
+  }, '\u00A0'), allItems.map(option => /*#__PURE__*/React.createElement("option", {
+    key: option.value,
+    value: option.value
+  }, option.label))));
+};
+
+export { HiddenSelect };

package/lib/parts/icons.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import cn from 'classnames';
-import { useFocusRing } from '@react-aria/focus';
 import CloseOutlineIcon from '../_virtual/close-outline.js';
 import LoadingOutlineIcon from '../_virtual/loading-outline.js';
 import DownOutlineIcon from '../_virtual/down-outline.js';
@@ -14,10 +13,6 @@ const ClearOrLoading = _ref => {
     triggerId,
     className
   } = _ref;
-  const {
-    isFocusVisible,
-    focusProps
-  } = useFocusRing();
 
   if (isLoading) {
     return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
@@ -31,7 +26,7 @@ const ClearOrLoading = _ref => {
   } else if (canHaveClearIcon) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: cn(className, styles.icon, styles.clearIcon, isFocusVisible && styles.clearIconFocusVisible),
+      className: cn(className, styles.icon, styles.clearIcon),
       "data-test": "clear-icon",
       onClick: e => {
         e.stopPropagation();
@@ -41,8 +36,7 @@ const ClearOrLoading = _ref => {
       onMouseDown: e => e.stopPropagation(),
       onKeyDown: e => e.stopPropagation(),
       "aria-label": "Clear",
-      "aria-controls": triggerId,
-      ...focusProps
+      "aria-controls": triggerId
     }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
       "data-render-all-sizes": true
     }));

package/lib/parts/list-box.d.ts

@@ -1,19 +1,11 @@
-import React from 'react';
-import type { ListState } from '@react-stately/list';
-import type { AriaListBoxOptions } from '@react-aria/listbox';
-import type { SelectSize, SelectMode } from '../types';
-export declare type ListBoxProps<T extends object> = {
-    listBoxRef?: React.RefObject<HTMLUListElement>;
-    state: ListState<T>;
-    ariaListBoxProps?: AriaListBoxOptions<T>;
+/// <reference types="react" />
+import { SelectSize, ListBoxItem, ListBoxState } from '../types';
+export declare type ListBoxProps = {
+    state: ListBoxState;
+    items: ListBoxItem[];
     size?: SelectSize;
-    mode?: SelectMode;
     className?: string;
     maxVisibleItems?: number;
-    selectionMode?: 'single' | 'multiple';
-};
-export declare function ListBox<T extends object>({ listBoxRef: listBoxRefFromProps, state, ariaListBoxProps, size, mode, maxVisibleItems, selectionMode }: ListBoxProps<T>): JSX.Element;
-export declare type EmptyListBoxProps<T extends object> = {
     emptyListMessage: string;
-} & Omit<ListBoxProps<T>, 'state'>;
-export declare const EmptyListBox: <T extends object>({ emptyListMessage, ...props }: EmptyListBoxProps<T>) => JSX.Element;
+};
+export declare function ListBox({ state, items, size, maxVisibleItems, emptyListMessage }: ListBoxProps): JSX.Element;

package/lib/parts/list-box.js

@@ -1,18 +1,10 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
-import { useListState } from '@react-stately/list';
-import { Item } from '@react-stately/collections';
-import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
-import { mergeProps } from '@react-aria/utils';
 import styles from '../styles/list-box.p.module.css.js';
 import { calculateMaxHeightByItems } from '../utils/calculate-max-height-by-items.js';
 import { getRealItemsCnt } from '../utils/get-real-items-cnt.js';
-import { VIRTUAL_ITEMS_SECTION_KEY } from '../constants.js';
+import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
 import CheckOutlineIcon from '../_virtual/check-outline.js';
-const MODE_STYLES = {
-  classic: styles.modeClassic,
-  rock: styles.modeRock
-};
 const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
@@ -22,66 +14,65 @@ const SIZE_STYLES = {
 function Option(_ref) {
   let {
     item,
-    state,
-    selectionMode
+    state
   } = _ref;
   // Get props for the option element
   const ref = useRef(null);
   const {
-    optionProps,
-    isSelected,
-    isFocused,
-    isDisabled
-  } = useOption({
-    key: item.key
-  }, state, ref);
-  return /*#__PURE__*/React.createElement("li", { ...mergeProps(optionProps),
-    ref: ref,
+    selectedMap,
+    selectionMode,
+    getItemProps,
+    highlightedIndex
+  } = state;
+  const index = item.index;
+  const isSelected = selectedMap.has(item.key);
+  const isHighlighted = highlightedIndex === item.index;
+  const isDisabled = item.disabled;
+  return /*#__PURE__*/React.createElement("li", { ...getItemProps({
+      item,
+      index,
+      'aria-selected': isSelected,
+      'tab-index': isHighlighted ? 0 : -1,
+      ref
+    }),
     className: cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled),
     "data-rs-internal": "select-list-box__item",
-    "data-focused": isFocused,
+    "data-focused": isHighlighted,
     "data-test": `select-options-list__item_${item.key}`
-  }, /*#__PURE__*/React.createElement("span", null, item.rendered), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+  }, /*#__PURE__*/React.createElement("span", null, item.label), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
     "data-rs-internal": "select-list-box__check-icon",
     className: cn(styles.checkIcon, isSelected && styles.visible)
   }));
 }
 
-function ListBoxSection(_ref2) {
+function ListBoxGroup(_ref2) {
   let {
-    section,
-    state,
+    item,
     isFirst,
-    selectionMode
+    state
   } = _ref2;
-  const {
-    itemProps,
-    headingProps,
-    groupProps
-  } = useListBoxSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label']
-  });
-  const hasHeading = section.rendered !== null && section.rendered !== undefined;
+  const hasHeading = item.label !== null && item.label !== undefined;
   const hasDivider = !isFirst && !hasHeading; // If the section is not the first, add a divider for visual separation
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, hasDivider && /*#__PURE__*/React.createElement("hr", {
     className: styles.divider
-  }), /*#__PURE__*/React.createElement("li", { ...itemProps
+  }), /*#__PURE__*/React.createElement("li", {
+    role: "presentation"
   }, hasHeading && /*#__PURE__*/React.createElement("span", {
     className: styles.groupHeader,
-    ...headingProps,
+    role: "presentation",
     "data-rs-internal": "select-list-box__group-header"
-  }, section.rendered), /*#__PURE__*/React.createElement("ul", { ...groupProps,
+  }, item.label), /*#__PURE__*/React.createElement("ul", {
+    role: "group",
+    "aria-label": hasHeading ? getTextFromNodes(item.label) : undefined,
     style: {
       padding: 0,
       listStyle: 'none'
     }
-  }, [...state.collection.getChildren(section.key)].map(node => /*#__PURE__*/React.createElement(Option, {
-    key: node.key,
-    item: node,
-    state: state,
-    selectionMode: selectionMode
+  }, item.options.map(option => /*#__PURE__*/React.createElement(Option, {
+    key: option.key,
+    item: option,
+    state: state
   })))));
 }
 
@@ -89,60 +80,37 @@ function ListBox(_ref3) {
   var _items$find;
 
   let {
-    listBoxRef: listBoxRefFromProps,
     state,
-    ariaListBoxProps,
+    items,
     size,
-    mode,
     maxVisibleItems = 5,
-    selectionMode
+    emptyListMessage
   } = _ref3;
-  const ref = useRef(null);
-  const listBoxRef = listBoxRefFromProps ?? ref;
   const {
-    listBoxProps
-  } = useListBox(ariaListBoxProps, state, listBoxRef);
-  const items = [...state.collection].filter(item => item.key !== VIRTUAL_ITEMS_SECTION_KEY);
-  const firstSectionKey = (_items$find = items.find(item => item.type === 'section')) === null || _items$find === void 0 ? void 0 : _items$find.key;
-  const itemsCount = getRealItemsCnt(state);
-  return /*#__PURE__*/React.createElement("ul", { ...listBoxProps,
-    className: cn(styles.listBox, MODE_STYLES[mode], SIZE_STYLES[size]),
-    ref: listBoxRef,
+    menuProps
+  } = state;
+  const firstGroupKey = (_items$find = items.find(item => item.type === 'group')) === null || _items$find === void 0 ? void 0 : _items$find.key;
+  const itemsCount = getRealItemsCnt(items);
+  return /*#__PURE__*/React.createElement("ul", { ...menuProps,
+    className: cn(styles.listBox, SIZE_STYLES[size]),
     style: {
       '--_rs-select-list-box-max-height-by-items': calculateMaxHeightByItems(itemsCount, maxVisibleItems)
     },
     "data-rs-internal": "select-list-box",
     "data-test": "select-options-list"
-  }, items.map(item => item.type === 'section' ? /*#__PURE__*/React.createElement(ListBoxSection, {
+  }, itemsCount === 0 ? /*#__PURE__*/React.createElement("li", {
+    className: cn(styles.item, styles.disabled),
+    "data-rs-internal": "select-list-box__item"
+  }, /*#__PURE__*/React.createElement("span", null, emptyListMessage)) : items.map(item => item.type === 'group' ? /*#__PURE__*/React.createElement(ListBoxGroup, {
     key: item.key,
-    section: item,
+    item: item,
     state: state,
-    isFirst: item.key === firstSectionKey,
-    selectionMode: selectionMode
+    isFirst: item.key === firstGroupKey
   }) : /*#__PURE__*/React.createElement(Option, {
     key: item.key,
     item: item,
-    state: state,
-    selectionMode: selectionMode
+    state: state
   })));
 }
 
-const EmptyListBox = _ref4 => {
-  let {
-    emptyListMessage,
-    ...props
-  } = _ref4;
-  const emptyListState = useListState({
-    children: [/*#__PURE__*/React.createElement(Item, {
-      key: "no-results",
-      textValue: emptyListMessage
-    }, emptyListMessage)],
-    disabledKeys: ['no-results'],
-    selectionMode: 'none'
-  });
-  return /*#__PURE__*/React.createElement(ListBox, { ...props,
-    state: emptyListState
-  });
-};
-
-export { EmptyListBox, ListBox };
+export { ListBox };

package/lib/parts/multi-trigger.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { SelectState } from '@react-stately/select';
-export interface MultiTriggerProps<T extends object> {
-    state: SelectState<T, 'multiple'>;
+import type { SelectOption } from '../types';
+export interface MultiTriggerProps {
+    selectedItems: SelectOption[];
+    removeSelectedItem: (item: SelectOption) => void;
     valueProps: object;
     isSingleLine: boolean;
     isDisabled: boolean;
     placeholder?: string;
     triggerRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function MultiTrigger<T extends object>({ state, valueProps, isSingleLine, isDisabled, placeholder, triggerRef }: MultiTriggerProps<T>): JSX.Element;
+export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): JSX.Element;

package/lib/parts/multi-trigger.js

@@ -3,18 +3,20 @@ import cn from 'classnames';
 import { RemovableTag, Tag } from '@rescui/tag';
 import styles from '../styles/common.p.module.css.js';
 import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
+import { getOptionValue } from '../utils/get-option-value.js';
 import Foldable from './foldable.js';
 
 function MultiTrigger(_ref) {
   let {
-    state,
+    selectedItems,
     valueProps,
     isSingleLine,
     isDisabled,
     placeholder,
-    triggerRef
+    triggerRef,
+    removeSelectedItem
   } = _ref;
-  const hasValue = state.selectedItems.length > 0;
+  const hasValue = selectedItems.length > 0;
 
   if (!hasValue) {
     return /*#__PURE__*/React.createElement("div", { ...valueProps,
@@ -23,25 +25,35 @@ function MultiTrigger(_ref) {
     }, placeholder);
   }
 
-  const handleRemoveItem = key => {
-    var _triggerRef$current;
-
-    state.setValue([...state.selectedItems].map(item => item.key).filter(itemKey => itemKey !== key));
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-  };
-
-  const tags = [...state.selectedItems].map(item => {
-    const key = item.key;
+  const tags = selectedItems.map(option => {
+    const key = getOptionValue(option);
     return /*#__PURE__*/React.createElement(RemovableTag, {
       key: key,
+      tabIndex: -1,
       "data-test": `selected-tag-${key}`,
       className: styles.tag,
       disabled: isDisabled,
-      onRemoveClick: () => handleRemoveItem(key),
+      onRemoveClick: () => {
+        var _triggerRef$current;
+
+        removeSelectedItem(option);
+        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+          focusVisible: false
+        });
+      },
       "data-rs-internal": "select-trigger__removable-tag",
       wrap: !isSingleLine,
-      "aria-label": getTextFromNodes(item.rendered)
-    }, item.rendered);
+      "aria-label": getTextFromNodes(option.label),
+      onFocus: e => {
+        if (e.target.getAttribute('tabindex') === '-1') {
+          var _triggerRef$current2;
+
+          (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus({
+            focusVisible: false
+          });
+        }
+      }
+    }, option.label);
   });
   return /*#__PURE__*/React.createElement("div", { ...valueProps,
     className: styles.multi,