@rescui/select 0.15.1-RUI-280-Update-select-component-e516591ed.54 → 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66

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.hiddenSelect
+  }, /*#__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.d.ts

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

package/lib/parts/icons.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import cn from 'classnames';
-import { useFocusRing } from 'react-aria';
 import CloseOutlineIcon from '../_virtual/close-outline.js';
 import LoadingOutlineIcon from '../_virtual/loading-outline.js';
 import DownOutlineIcon from '../_virtual/down-outline.js';
@@ -12,26 +11,23 @@ const ClearOrLoading = _ref => {
     canHaveClearIcon,
     onClearClick,
     triggerId,
-    className
+    className,
+    customStylesMap: styles$1 = styles
   } = _ref;
-  const {
-    isFocusVisible,
-    focusProps
-  } = useFocusRing();
 
   if (isLoading) {
     return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
       style: {
         pointerEvents: 'none'
       },
-      className: cn(className, styles.icon),
+      className: cn(className, styles$1.icon),
       "data-test": "loading-icon",
       "data-render-all-sizes": true
     });
   } else if (canHaveClearIcon) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: cn(className, styles.icon, styles.clearIcon, isFocusVisible && styles.clearIconFocusVisible),
+      className: cn(className, styles$1.icon, styles$1.clearIcon),
       "data-test": "clear-icon",
       onClick: e => {
         e.stopPropagation();
@@ -41,8 +37,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
     }));
@@ -56,17 +51,19 @@ const Icons = _ref2 => {
     isLoading,
     canHaveClearIcon,
     onClear,
-    triggerId
+    triggerId,
+    customStylesMap: styles$1 = styles
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.iconsWrapper
+    className: styles$1.iconsWrapper
   }, /*#__PURE__*/React.createElement(ClearOrLoading, {
     isLoading: isLoading,
     canHaveClearIcon: canHaveClearIcon,
     onClearClick: onClear,
-    triggerId: triggerId
+    triggerId: triggerId,
+    customStylesMap: styles$1
   }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
-    className: styles.toggle,
+    className: styles$1.toggle,
     "data-test": "toggle-icon",
     "data-render-all-sizes": true
   }));

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

@@ -1,19 +1,11 @@
-import React from 'react';
-import type { AriaListBoxOptions } from 'react-aria';
-import type { ListState } from 'react-stately';
-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,16 +1,10 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
-import { useListState, Item } from 'react-stately';
-import { useListBox, useOption, mergeProps, useListBoxSection } from 'react-aria';
 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,
@@ -20,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
   })))));
 }
 
@@ -87,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';
-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,

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

@@ -1,18 +1,16 @@
 /// <reference types="react" />
 import type { Theme } from '@rescui/ui-contexts';
-import { Key, SelectSize } from '../types';
+import { NativeSelectOption, SelectSize } from '../types';
 export declare type NativeSelectDefaultTriggerProps = {
-    isFocused: boolean;
-    isHovered: boolean;
     isLoading: boolean;
     isDisabled: boolean;
+    isClearable: boolean;
     size: SelectSize;
     theme?: Theme;
     hasError: boolean;
     placeholder?: string;
-    value: {
-        value?: Key;
-        label: string;
-    };
+    value: NativeSelectOption;
+    onClear?: () => void;
+    triggerId?: string;
 };
-export declare const NativeSelectTrigger: ({ isFocused, isHovered, isLoading, isDisabled, hasError, size, theme, placeholder, value }: NativeSelectDefaultTriggerProps) => JSX.Element;
+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,8 +1,7 @@
 import cn from 'classnames';
 import React from 'react';
-import LoadingOutlineIcon from '../_virtual/loading-outline.js';
-import DownOutlineIcon from '../_virtual/down-outline.js';
 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,
@@ -15,40 +14,32 @@ const THEME_STYLES = {
 
 const NativeSelectTrigger = _ref => {
   let {
-    isFocused,
-    isHovered,
     isLoading,
     isDisabled,
+    isClearable,
     hasError,
     size,
     theme,
     placeholder,
-    value
+    value,
+    onClear,
+    triggerId
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
     className: cn(styles.trigger, SIZE_STYLES[size], THEME_STYLES[theme], isDisabled ? styles.disabled : styles.enabled, hasError && styles.error),
-    "data-focused": isFocused,
-    "data-hovered": isHovered,
     "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'
-  }, (value === null || value === void 0 ? void 0 : value.label) ?? placeholder), /*#__PURE__*/React.createElement("div", {
-    className: styles.iconsWrapper
-  }, isLoading && /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
-    style: {
-      pointerEvents: 'none'
-    },
-    className: styles.icon,
-    "data-test": "loading-icon",
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
-    className: styles.toggle,
-    "data-test": "down-icon",
-    "data-render-all-sizes": true
-  })));
+    "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/select-basic.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { InnerSingleComponentProps } from './types';
-export declare function SelectBasic<T extends object>({ id, size, mode, theme, style, className, isClearable, isLoading, placement, boldLabel, reserveErrorLine, noOptionsMessage, maxVisibleItems, ...ariaProps }: InnerSingleComponentProps<T>): JSX.Element;
+import { InnerSingleComponentProps } from './types';
+export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): JSX.Element;