@rescui/select 0.15.2 → 0.16.0

package/lib/index.d.ts

@@ -1,6 +1,4 @@
-export { default as Select } from './select';
-export type { SelectProps } from './select';
-export { default as NativeSelect } from './parts/native-select';
-export type { NativeSelectProps } from './parts/native-select';
-export { default as Multiselect } from './parts/multiselect';
-export type { MultiselectProps } from './parts/multiselect';
+export { Select } from './select';
+export { Multiselect } from './multiselect';
+export { NativeSelect } from './native-select';
+export type { SelectProps, MultiselectProps, NativeSelectProps, SelectOption, Key } from './types';

package/lib/index.js

@@ -1,4 +1,4 @@
 import './index.css';
-export { default as Select } from './select.js';
-export { default as NativeSelect } from './parts/native-select.js';
-export { default as Multiselect } from './parts/multiselect.js';
+export { Select } from './select.js';
+export { Multiselect } from './multiselect.js';
+export { NativeSelect } from './native-select.js';

package/lib/multiselect.d.ts

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

package/lib/multiselect.js

@@ -0,0 +1,308 @@
+"use client";
+import React, { useMemo, useRef } from 'react';
+import cn from 'classnames';
+import { useSelect } from 'downshift';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { useOptions } from './hooks/use-options.js';
+import { useMultiHandlers } from './hooks/use-multi-handlers.js';
+import { useA11y } from './hooks/use-a11y.js';
+import { Icons } from './parts/icons.js';
+import { MultiTrigger } from './parts/multi-trigger.js';
+import { HiddenSelect } from './parts/hidden-select.js';
+import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
+import { PopupContent } from './parts/popup-content.js';
+import { getEmptyMessage } from './utils/get-empty-message.js';
+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';
+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
+};
+
+const stateReducer = (state, actionAndChanges) => {
+  const {
+    changes,
+    type
+  } = actionAndChanges;
+
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+      return { ...changes,
+        isOpen: true,
+        highlightedIndex: state.highlightedIndex
+      };
+
+    default:
+      return { ...changes,
+        selectedItem: null
+      };
+  }
+}; // eslint-disable-next-line complexity
+
+
+function Multiselect(_ref) {
+  let {
+    options = [],
+    value,
+    onChange,
+    error,
+    label,
+    note,
+    size = 'm',
+    mode = 'classic',
+    theme: themeFromProps,
+    placement = 'bottom',
+    isSingleLine = false,
+    boldLabel = true,
+    reserveErrorLine = false,
+    maxVisibleItems = 5,
+    isClearable = false,
+    isLoading = false,
+    isDisabled = false,
+    name,
+    noOptionsMessage,
+    className,
+    id,
+    style,
+    placeholder,
+    ...rest
+  } = _ref;
+  const selectedItems = useMemo(() => value ?? [], [value]);
+  const theme = useThemeWithUndefined(themeFromProps);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const {
+    selectedMap,
+    removeItem: removeSelectedItem,
+    addItem: addSelectedItem,
+    removeAllItems: reset
+  } = useMultiHandlers({
+    selectedItems,
+    onChange
+  });
+  const {
+    flattenedOptions,
+    listBoxItems
+  } = useOptions(options);
+  const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
+  const {
+    fieldProps,
+    errorMessageProps,
+    descriptionProps,
+    baseId
+  } = useA11y({
+    prefix: 'multiselect',
+    error,
+    description: note,
+    isDisabled
+  });
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+    setHighlightedIndex
+  } = useSelect({
+    items: flattenedOptions,
+    itemToString,
+    itemToKey: getOptionValue,
+    id: baseId,
+
+    onIsOpenChange(newIsOpen) {
+      if (newIsOpen) {
+        // set the first selected item as a highlighted item if the popup is opened
+        const firstSelectedKey = [...selectedMap.keys()][0];
+
+        if (firstSelectedKey) {
+          setHighlightedIndex(flattenedOptions.findIndex(item => firstSelectedKey === getOptionValue(item)));
+        }
+      }
+    },
+
+    stateReducer,
+    // there's no actual selection happening in the hook, we're doing it custom via controlled props.
+    selectedItem: null,
+    // 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
+      } = _ref2;
+
+      if (!selectedItem) {
+        return;
+      }
+
+      const changedValue = getOptionValue(selectedItem);
+
+      if (selectedMap.has(changedValue)) {
+        removeSelectedItem(selectedItem);
+      } else {
+        addSelectedItem(selectedItem);
+      }
+    },
+
+    isItemDisabled(item) {
+      return item && item.disabled;
+    }
+
+  });
+  const menuProps = getMenuProps({
+    ref: menuRef,
+    'aria-multiselectable': isListBoxEmpty ? undefined : 'true'
+  }, {
+    suppressRefError: true
+  });
+  const triggerProps = getToggleButtonProps({
+    ref: triggerRef,
+    // eslint-disable-next-line complexity
+    onKeyDown: event => {
+      // prevent default behavior of Downshift when pressing Ctrl
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDownshiftDefault = true;
+        return;
+      } // shift + arrow up/down selection (when popup is open)
+
+
+      if (isOpen && event.shiftKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+        const newHighlightedIndex = event.key === 'ArrowUp' ? Math.max(highlightedIndex - 1, 0) : Math.min(highlightedIndex + 1, flattenedOptions.length - 1);
+
+        if (newHighlightedIndex === highlightedIndex) {
+          return;
+        }
+
+        addSelectedItem(flattenedOptions[newHighlightedIndex]);
+      } // backspace removing the last selected item (when popup is closed)
+
+
+      if (!isOpen && event.key === 'Backspace') {
+        removeSelectedItem(selectedItems[selectedItems.length - 1]);
+      } // delete removing all selected items (when popup is closed)
+
+
+      if (!isOpen && event.key === 'Delete') {
+        reset();
+      }
+    },
+    // fix screen-reader focus on an opened popup with an empty list
+    ...(isOpen && isListBoxEmpty ? {
+      'aria-activedescendant': menuProps.id
+    } : {})
+  });
+  const {
+    isFocusedByLabel,
+    labelClickProps,
+    triggerFocusProps: labelFocusForTriggerProps
+  } = useLabelFocus();
+  const emptyListMessage = getEmptyMessage({
+    isLoading,
+    isNothingFound: false,
+    noOptionsMessage
+  });
+  const listBoxState = {
+    selectedMap,
+    highlightedIndex,
+    getItemProps,
+    menuProps
+  };
+  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),
+    id: id,
+    style: style,
+    "data-test": "multiselect"
+  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+    theme: theme,
+    size: size,
+    disabled: isDisabled,
+    label: label,
+    labelProps: mergeProps(getLabelProps(), labelClickProps),
+    boldLabel: boldLabel,
+    error: error,
+    reserveErrorLine: reserveErrorLine,
+    errorMessageProps: errorMessageProps,
+    note: note,
+    descriptionProps: descriptionProps
+  }, /*#__PURE__*/React.createElement(HiddenSelect, {
+    name: name,
+    value: selectedItems,
+    isMultiple: true,
+    options: flattenedOptions
+  }), /*#__PURE__*/React.createElement(PopupContent, {
+    theme: theme,
+    size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
+    triggerRef: triggerRef,
+    placement: placement,
+    isOpen: isOpen,
+    listBoxState: listBoxState,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    listBoxItems: listBoxItems,
+    dropdownUpdateDeps: [selectedItems],
+    trigger: _ref3 => {
+      let {
+        ref: triggerRefForDropdown
+      } = _ref3;
+      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, labelFocusForTriggerProps, {
+          ref: triggerRefForDropdown
+        }),
+        tabIndex: isDisabled ? undefined : 0,
+        className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
+        "data-test": "multiselect__trigger"
+      }, /*#__PURE__*/React.createElement(MultiTrigger, {
+        selectedItems: selectedItems,
+        valueProps: {},
+        isSingleLine: isSingleLine,
+        isDisabled: isDisabled,
+        placeholder: placeholder,
+        triggerRef: triggerRef,
+        removeSelectedItem: removeSelectedItem
+      }), /*#__PURE__*/React.createElement(Icons, {
+        isLoading: isLoading,
+        canHaveClearIcon: isClearable && !isDisabled && selectedItems.length > 0,
+        onClear: () => {
+          reset();
+          triggerRef.current?.focus({
+            focusVisible: false
+          });
+        },
+        triggerId: triggerProps.id
+      })));
+    }
+  })));
+}
+
+export { Multiselect };

package/lib/native-select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NativeSelectProps } from './types';
+export declare const NativeSelect: React.FC<NativeSelectProps>;
+export default NativeSelect;

package/lib/native-select.js

@@ -0,0 +1,208 @@
+"use client";
+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 { 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 { mergeProps } from './utils/merge-props.js';
+import styles from './styles/common.p.module.css.js';
+
+function findSelectedOption(options, selectedValue) {
+  let result = null;
+
+  const checkOption = option => {
+    if (result === null || option.value === selectedValue) {
+      result = option;
+    }
+  };
+
+  options.forEach(optionOrGroup => {
+    if (isOptionAGroup(optionOrGroup)) {
+      const group = optionOrGroup;
+      group.options?.forEach(checkOption);
+    } else {
+      checkOption(optionOrGroup);
+    }
+  });
+  return result;
+}
+
+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 => {
+  let {
+    options = [],
+    size = 'm',
+    theme: themeFromProps,
+    className = null,
+    id,
+    style,
+    value,
+    onChange,
+    placeholder,
+    isLoading = false,
+    isDisabled = false,
+    isClearable = false,
+    trigger,
+    label,
+    note,
+    error,
+    reserveErrorLine = false,
+    noOptionsMessage,
+    name,
+    boldLabel = true,
+    ...rest
+  } = _ref;
+  const triggerRef = React.useRef(null);
+  const {
+    labelProps,
+    fieldProps,
+    errorMessageProps,
+    descriptionProps
+  } = useA11y({
+    prefix: 'native-select',
+    error,
+    description: note,
+    label,
+    fieldRef: triggerRef,
+    isDisabled
+  });
+
+  const reset = () => onChange(null);
+
+  const theme = useThemeWithUndefined(themeFromProps);
+
+  const handleChange = event => {
+    const newValue = event.target.value;
+    const selectedOption = findSelectedOption(options, newValue);
+
+    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 {
+    isFocused,
+    focusProps
+  } = useFocus({
+    isDisabled
+  }); // same as above, could be replaced with ":hover + &" selector
+
+  const {
+    isHovered,
+    hoverProps
+  } = useHover({
+    isDisabled
+  });
+  const emptyListMessage = getEmptyMessage({
+    isLoading,
+    isNothingFound: false,
+    noOptionsMessage
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    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"
+  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+    theme: theme,
+    size: size,
+    disabled: isDisabled,
+    label: label,
+    labelProps: mergeProps(labelProps),
+    boldLabel: boldLabel,
+    error: error,
+    errorMessageProps: errorMessageProps,
+    reserveErrorLine: reserveErrorLine,
+    note: note,
+    descriptionProps: descriptionProps
+  }, /*#__PURE__*/React.createElement("div", {
+    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",
+    "data-rs-internal": 'select-native__select',
+    className: styles.select,
+    disabled: isDisabled ? true : undefined,
+    onChange: handleChange,
+    name: name,
+    value: value?.value ?? ''
+  }, /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
+    optionsWithGroups: options,
+    placeholder: placeholder,
+    emptyListMessage: emptyListMessage
+  })), trigger ? trigger({
+    focused: isFocused,
+    hovered: isHovered,
+    selectedLabel: value?.label,
+    selectedValue: 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?.value && styles.labelNotSelected),
+    "data-test": 'native-select_trigger_text',
+    "aria-hidden": "true"
+  }, value?.label ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
+    isLoading: isLoading,
+    triggerId: fieldProps.id,
+    onClear: () => {
+      reset();
+      triggerRef.current?.focus({
+        focusVisible: false
+      });
+    },
+    canHaveClearIcon: isClearable && !isDisabled && Boolean(value?.value)
+  })))));
+};
+
+NativeSelect.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
+  id: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([nativeOptionType, nativeOptionsGroupType])),
+  value: nativeOptionType,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['m', 's', 'l']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  placeholder: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  trigger: PropTypes.func,
+  error: ErrorMessage.propTypes.children,
+  label: PropTypes.node,
+  note: PropTypes.node,
+  noOptionsMessage: noOptionsMessageType,
+  name: PropTypes.string,
+  boldLabel: PropTypes.bool
+};
+export { NativeSelect, NativeSelect as default };

package/lib/parts/foldable.js

@@ -1,6 +1,5 @@
-"use client";
 import React, { Component } from 'react';
-import { throttle } from './throttle.js';
+import { throttle } from '../utils/throttle.js';
 
 function lastVisibleIndex(lens, maxLen, gap) {
   let extra = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

package/lib/parts/form-trigger-wrapper.d.ts

@@ -5,29 +5,29 @@ export declare type FormTriggerWrapperProps = {
     size?: SelectSize;
     theme?: Theme;
     className?: string;
-    id?: string;
     disabled?: boolean;
-    errorId?: string;
     error?: boolean | React.ReactNode;
     reserveErrorLine?: boolean;
+    errorMessageProps?: object;
     label?: React.ReactNode;
+    labelProps?: object;
     note?: React.ReactNode;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    descriptionProps?: object;
     boldLabel?: boolean;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
-declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
+export declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
     size?: SelectSize;
     theme?: Theme;
     className?: string;
-    id?: string;
     disabled?: boolean;
-    errorId?: string;
     error?: boolean | React.ReactNode;
     reserveErrorLine?: boolean;
+    errorMessageProps?: object;
     label?: React.ReactNode;
+    labelProps?: object;
     note?: React.ReactNode;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    descriptionProps?: object;
     boldLabel?: boolean;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/lib/parts/form-trigger-wrapper.js

@@ -1,9 +1,8 @@
-"use client";
 import React from 'react';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
-import styles from './form-trigger.p.module.css.js';
+import styles from '../styles/form-trigger.p.module.css.js';
 const SIZE_STYLES = {
   l: styles.sizeL,
   m: styles.sizeM,
@@ -13,64 +12,47 @@ const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-
-const Label = _ref => {
-  let {
-    children,
-    boldLabel
-  } = _ref;
-
-  if (!children) {
-    return null;
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.label,
-      "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label'
-    }, children);
-  }
-};
-
 const FormTriggerWrapper = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(_ref2, ref) => {
+(_ref, ref) => {
   let {
     size,
     theme: themeFromProps,
     className,
-    id,
     disabled,
     error,
-    errorId,
     reserveErrorLine = false,
+    errorMessageProps,
     label,
+    labelProps,
     note,
+    descriptionProps,
     children,
-    onKeyDown,
     boldLabel,
     ...restProps
-  } = _ref2;
+  } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
   const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
   return /*#__PURE__*/React.createElement("div", {
     className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme], Boolean(error) && styles.error, disabled && styles.disabled),
-    id: id,
     ref: ref,
     "data-test": "select-wrapper",
     "data-rs-internal": 'select-form-trigger-wrapper',
     ...restProps
-  }, /*#__PURE__*/React.createElement(Label, {
-    boldLabel: boldLabel
-  }, label), /*#__PURE__*/React.createElement("div", {
-    onKeyDown: onKeyDown
-  }, children), hasFooter && /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: styles.label,
+    "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label',
+    ...labelProps
+  }, label), children, hasFooter && /*#__PURE__*/React.createElement("div", {
     className: styles.footer
   }, /*#__PURE__*/React.createElement(ErrorMessage, {
-    id: errorId,
     className: styles.errorMessage,
-    reserveLine: reserveErrorLine
+    reserveLine: reserveErrorLine,
+    ...errorMessageProps
   }, error), note && /*#__PURE__*/React.createElement("div", {
     className: styles.note,
-    "data-rs-internal": 'select-form-trigger-wrapper__note'
+    "data-rs-internal": 'select-form-trigger-wrapper__note',
+    ...descriptionProps
   }, note)));
 });
 FormTriggerWrapper.displayName = 'FormTriggerWrapper';
-export { FormTriggerWrapper as default };
+export { FormTriggerWrapper, FormTriggerWrapper as default };

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;