@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2

package/lib/hooks/use-multi-handlers.js

@@ -1,48 +0,0 @@
-import { useRef, useMemo, useCallback } from 'react';
-import { getOptionValue } from '../utils/get-option-value.js';
-
-const useMultiHandlers = _ref => {
-  let {
-    selectedItems,
-    onChange
-  } = _ref;
-  const onChangeRef = useRef(null);
-  onChangeRef.current = onChange;
-  const selectedMap = useMemo(() => new Map(selectedItems.map(item => [getOptionValue(item), item])), [selectedItems]);
-  const addItem = useCallback(item => {
-    var _onChangeRef$current;
-
-    if (selectedMap.has(getOptionValue(item))) {
-      return;
-    }
-
-    (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, [...selectedMap.values(), item]);
-  }, [selectedMap]);
-  const removeItem = useCallback(item => {
-    var _onChangeRef$current2;
-
-    const key = getOptionValue(item);
-    (_onChangeRef$current2 = onChangeRef.current) === null || _onChangeRef$current2 === void 0 || _onChangeRef$current2.call(onChangeRef, [...selectedMap.entries()].filter(_ref2 => {
-      let [k] = _ref2;
-      return k !== key;
-    }).map(_ref3 => {
-      let [, v] = _ref3;
-      return v;
-    }));
-  }, [selectedMap]);
-
-  const removeAllItems = () => {
-    var _onChangeRef$current3;
-
-    (_onChangeRef$current3 = onChangeRef.current) === null || _onChangeRef$current3 === void 0 || _onChangeRef$current3.call(onChangeRef, []);
-  };
-
-  return {
-    selectedMap,
-    addItem,
-    removeItem,
-    removeAllItems
-  };
-};
-
-export { useMultiHandlers };

package/lib/hooks/use-options.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { SelectOptionOrGroup, SelectOption, ListBoxItem } from '../types';
-/**
- * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
- * Also creating a list for ListBox component with indexes and keys.
- * Supports filtering by returning the setFilterString function.
- * @param options
- */
-export declare const useOptions: (options: SelectOptionOrGroup[]) => {
-    setFilterString: import("react").Dispatch<import("react").SetStateAction<string>>;
-    flattenedOptions: SelectOption[];
-    listBoxItems: ListBoxItem[];
-};

package/lib/hooks/use-options.js

@@ -1,89 +0,0 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import { useState, useMemo } from 'react';
-import { isOptionAGroup } from '../utils/is-option-a-group.js';
-import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
-import { getOptionValue } from '../utils/get-option-value.js';
-
-const createFilter = substring => {
-  if (substring.length === 0) {
-    return () => true;
-  }
-
-  const lowerSubstring = substring.toLowerCase();
-  return string => {
-    var _context;
-
-    return _includesInstanceProperty(_context = string.toLowerCase()).call(_context, lowerSubstring);
-  };
-};
-/**
- * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
- * Also creating a list for ListBox component with indexes and keys.
- * Supports filtering by returning the setFilterString function.
- * @param options
- */
-
-
-const useOptions = options => {
-  const [filterString, setFilterString] = useState('');
-  const filterFn = useMemo(() => createFilter(filterString), [filterString]);
-  const processedOptions = useMemo(() => {
-    const flattenedOptions = [];
-    const listBoxItems = [];
-    let index = 0;
-
-    const createOptionItem = option => {
-      return { ...option,
-        index: index++,
-        type: 'option',
-        key: getOptionValue(option)
-      };
-    };
-
-    options.forEach((optionOrGroup, arrayIndex) => {
-      if (isOptionAGroup(optionOrGroup)) {
-        const group = optionOrGroup;
-
-        if (!group.options || group.options.length === 0) {
-          return;
-        } // Render as Group (with or without label)
-
-
-        const groupLabelText = group.label ? getTextFromNodes(group.label) : ''; // Use a special prefix that's unlikely to collide with user values
-
-        const groupKey = `\0__rs_select_group_${arrayIndex}_${groupLabelText}`;
-        const listBoxGroupItem = { ...group,
-          type: 'group',
-          options: [],
-          key: groupKey
-        };
-        group.options.forEach(option => {
-          if (filterFn(getTextFromNodes(option.label))) {
-            flattenedOptions.push(option);
-            listBoxGroupItem.options.push(createOptionItem(option));
-          }
-        });
-
-        if (listBoxGroupItem.options.length > 0) {
-          listBoxItems.push(listBoxGroupItem);
-        }
-
-        return;
-      }
-
-      if (filterFn(getTextFromNodes(optionOrGroup.label))) {
-        flattenedOptions.push(optionOrGroup);
-        listBoxItems.push(createOptionItem(optionOrGroup));
-      }
-    });
-    return {
-      flattenedOptions,
-      listBoxItems
-    };
-  }, [options, filterFn]);
-  return { ...processedOptions,
-    setFilterString
-  };
-};
-
-export { useOptions };

package/lib/multiselect.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { MultiselectProps } from './types';
-export declare function Multiselect({ options, value: selectedItems, 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

@@ -1,312 +0,0 @@
-import React, { useEffect } from 'react';
-import cn from 'classnames';
-import { Dropdown } from '@rescui/dropdown';
-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 { ListBox } from './parts/list-box.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 { 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; // console.log(type, state, changes);
-
-  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: selectedItems = [],
-    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 theme = useThemeWithUndefined(themeFromProps);
-  const triggerRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const dropdownRef = React.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
-  });
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    highlightedIndex,
-    getItemProps,
-    setHighlightedIndex
-  } = useSelect({
-    items: flattenedOptions,
-    itemToString,
-    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 => {
-      // 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
-    } : {})
-  }); // recalculate the popup position after a possible trigger height change
-
-  useEffect(() => {
-    if (dropdownRef.current) {
-      dropdownRef.current.scheduleUpdate();
-    }
-  }, [selectedItems]);
-  const {
-    isFocusedByLabel,
-    labelClickProps,
-    triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus();
-  const emptyListMessage = getEmptyMessage({
-    isLoading,
-    isNothingFound: false,
-    noOptionsMessage
-  });
-  const listBoxState = {
-    selectedMap,
-    selectionMode: 'multiple',
-    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(Dropdown, {
-    mode: mode,
-    theme: theme,
-    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", {
-        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
-        }),
-        className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
-        "data-open": isOpen,
-        "data-label-focused": isFocusedByLabel,
-        "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: () => {
-          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,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems
-  }))));
-}
-
-export { Multiselect };

package/lib/native-select.d.ts

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

package/lib/native-select.js

@@ -1,211 +0,0 @@
-"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)) {
-      var _group$options;
-
-      const group = optionOrGroup;
-      (_group$options = group.options) === null || _group$options === void 0 || _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
-  });
-
-  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 === null || value === void 0 ? void 0 : value.value) ?? ''
-  }, /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
-    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)
-  })))));
-};
-
-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/hidden-select.d.ts

@@ -1,13 +0,0 @@
-/// <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;