@rescui/select 0.15.1-RUI-280-Update-select-component-separate-components-e772abaa1.56 → 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66

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;

package/lib/select-basic.js

@@ -1,81 +1,122 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import cn from 'classnames';
-import { useSelectState } from '@react-stately/select';
-import { useSelect, HiddenSelect } from '@react-aria/select';
-import { useButton } from '@react-aria/button';
+import { Dropdown } from '@rescui/dropdown';
+import { useSelect } from 'downshift';
 import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { PopupContent } from './parts/popup-content.js';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { useOptions } from './hooks/use-options.js';
+import { useA11y } from './hooks/use-a11y.js';
+import { ListBox } from './parts/list-box.js';
 import { Icons } from './parts/icons.js';
+import { HiddenSelect } from './parts/hidden-select.js';
 import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
-import { useLabelFocus } from './hooks/use-label-focus.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
-import styles from './styles/common.p.module.css.js';
-const THEME_STYLES = {
-  light: styles.themeLight,
-  dark: styles.themeDark
-};
-const SIZE_STYLES = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL
-};
-const MODE_STYLES = {
-  classic: styles.classic,
-  rock: styles.rock
-}; // eslint-disable-next-line complexity
+import { mergeProps } from './utils/merge-props.js';
+import { itemToString } from './utils/item-to-string.js';
+import { getOptionValue } from './utils/get-option-value.js';
+import { getRealItemsCnt } from './utils/get-real-items-cnt.js';
+import styles from './styles/common.p.module.css.js'; // eslint-disable-next-line complexity
 
 function SelectBasic(_ref) {
-  var _state$selectedItems$;
-
   let {
-    id,
+    options,
+    value: selectedItem,
+    onChange,
+    error,
+    label,
+    note,
     size,
     mode,
     theme,
-    style,
-    className,
-    isClearable,
-    isLoading,
     placement,
     boldLabel,
     reserveErrorLine,
-    noOptionsMessage,
     maxVisibleItems,
-    ...ariaProps
+    isClearable,
+    isLoading,
+    isDisabled,
+    name,
+    noOptionsMessage,
+    className,
+    id,
+    style,
+    placeholder,
+    ...rest
   } = _ref;
-  // Create state based on the incoming props
-  const state = useSelectState({ ...ariaProps,
-    allowsEmptyCollection: true
-  });
-  const hasValue = state.selectedItems.length > 0; // Get props for child elements from useSelect
-
-  const triggerRef = useRef(null);
+  const triggerRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const {
+    flattenedOptions,
+    listBoxItems
+  } = useOptions(options);
+  const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
+  const hasValue = Boolean(selectedItem);
+  const selectedMap = selectedItem ? new Map([[getOptionValue(selectedItem), selectedItem]]) : new Map();
   const {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps: listBoxProps,
-    hiddenSelectProps,
+    fieldProps,
     errorMessageProps,
-    descriptionProps
-  } = useSelect({ ...ariaProps,
-    onKeyDown: e => {
-      if (isClearable && hasValue) {
-        if (e.key === 'Backspace' || e.key === 'Delete') {
-          state.setValue(null);
-          e.stopPropagation();
-        }
-      }
-    }
-  }, state, triggerRef);
+    descriptionProps,
+    baseId
+  } = useA11y({
+    prefix: 'select',
+    error,
+    description: note
+  });
   const {
-    buttonProps
-  } = useButton({ ...triggerProps,
-    elementType: 'div'
-  }, triggerRef);
-  const isDisabled = ariaProps.isDisabled;
-  const isOpen = state.isOpen;
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+    reset
+  } = useSelect({
+    items: flattenedOptions,
+    itemToString,
+    id: baseId,
+    selectedItem,
+    // defining our scroll behavior because on the first menu render the hook
+    // doesn't know menuRef and use page as the scroll boundary
+    scrollIntoView: (listItemEl, listEl) => {
+      scrollIntoView(listItemEl, {
+        scrollMode: 'if-needed',
+        block: 'nearest',
+        boundary: listEl ?? menuRef.current
+      });
+    },
+    onSelectedItemChange: _ref2 => {
+      let {
+        selectedItem: newSelectedItem
+      } = _ref2;
+      onChange === null || onChange === void 0 || onChange(newSelectedItem);
+    },
+
+    isItemDisabled(item) {
+      return item && item.disabled;
+    }
+
+  });
+  const menuProps = getMenuProps({
+    ref: menuRef
+  }, {
+    suppressRefError: true
+  });
+  const triggerProps = getToggleButtonProps({
+    ref: triggerRef,
+    onKeyDown: event => {
+      // backspace and backspace removing the last selected item (when popup is closed)
+      if (isClearable && !isOpen && (event.key === 'Backspace' || event.key === 'Delete')) {
+        reset();
+      }
+    },
+    // 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
@@ -86,60 +127,83 @@ function SelectBasic(_ref) {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus(triggerRef);
+  } = useLabelFocus();
   const emptyListMessage = getEmptyMessage({
     isLoading,
     isNothingFound: false,
     noOptionsMessage
   });
-  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(ariaProps.errorMessage) && styles.error),
-    id: id,
-    style: style,
-    "data-test": "select"
-  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+  const listBoxState = {
+    selectedMap,
+    selectionMode: 'single',
+    highlightedIndex,
+    getItemProps,
+    menuProps
+  };
+  return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
     theme: theme,
     size: size,
     disabled: isDisabled,
-    label: ariaProps.label,
-    labelProps: mergeProps(labelClickProps, labelProps),
+    label: label,
+    labelProps: mergeProps(getLabelProps(), labelClickProps),
     boldLabel: boldLabel,
-    error: ariaProps.errorMessage,
+    error: error,
     reserveErrorLine: reserveErrorLine,
     errorMessageProps: errorMessageProps,
-    note: ariaProps.description,
+    note: note,
     descriptionProps: descriptionProps
-  }, /*#__PURE__*/React.createElement(HiddenSelect, { ...hiddenSelectProps
-  }), /*#__PURE__*/React.createElement("div", { ...mergeProps(buttonProps, focusProps, labelFocusForTriggerProps),
-    ref: triggerRef,
-    className: styles.trigger,
-    "data-open": isOpen,
-    "data-focus-visible": isFocusVisible,
-    "data-label-focused": isFocusedByLabel,
-    "data-test": "select__trigger"
-  }, /*#__PURE__*/React.createElement("span", { ...valueProps,
-    className: cn(styles.triggerText, !hasValue && styles.labelNotSelected),
-    "data-test": "select__trigger_content"
-  }, ((_state$selectedItems$ = state.selectedItems[0]) === null || _state$selectedItems$ === void 0 ? void 0 : _state$selectedItems$.rendered) ?? ariaProps.placeholder), /*#__PURE__*/React.createElement(Icons, {
-    isLoading: isLoading,
-    canHaveClearIcon: isClearable && !isDisabled && hasValue,
-    onClear: () => {
-      var _triggerRef$current;
-
-      state.setValue(null);
-      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-    },
-    triggerId: triggerProps.id
-  })), /*#__PURE__*/React.createElement(PopupContent, {
+  }, /*#__PURE__*/React.createElement(HiddenSelect, {
+    name: name,
+    value: selectedItem,
+    isMultiple: false,
+    options: flattenedOptions
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    mode: mode,
     theme: theme,
-    state: state,
-    triggerRef: triggerRef,
+    ref: dropdownRef,
     placement: placement,
+    maxWidth: "trigger",
+    minWidth: "trigger",
+    isOpen: isOpen,
+    cancelCloseAnimation: true,
+    disableFocusLock: true,
+    trigger: _ref3 => {
+      let {
+        ref: triggerRefForDropdown
+      } = _ref3;
+      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,
+        "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),
+        "data-test": "select__trigger_content"
+      }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
+        isLoading: isLoading,
+        canHaveClearIcon: isClearable && !isDisabled && hasValue,
+        onClear: () => {
+          var _triggerRef$current;
+
+          reset();
+          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+            focusVisible: false
+          });
+        },
+        triggerId: triggerProps.id
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(ListBox, {
+    state: listBoxState,
     size: size,
-    mode: mode,
-    listBoxProps: listBoxProps,
+    maxVisibleItems: maxVisibleItems,
     emptyListMessage: emptyListMessage,
-    maxVisibleItems: maxVisibleItems
+    items: listBoxItems
   })));
 }
 

package/lib/select-searchable.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { InnerSingleComponentProps } from './types';
-export declare function SelectSearchable<T extends object>({ id, size, mode, theme, className, style, isClearable, isLoading, placement, boldLabel, reserveErrorLine, noOptionsMessage, maxVisibleItems, ...ariaProps }: InnerSingleComponentProps<T>): JSX.Element;
+import { InnerSingleComponentProps } from './types';
+export declare function SelectSearchable({ 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;