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

package/lib/parts/hidden-select.js

@@ -1,45 +0,0 @@
-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.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-declare type ClearOrLoadingProps = {
-    isLoading: boolean;
-    canHaveClearIcon: boolean;
-    onClearClick: () => void;
-    triggerId?: string;
-    className?: string;
-};
-export declare const ClearOrLoading: React.FC<ClearOrLoadingProps>;
-export declare type IconsProps = {
-    isLoading?: boolean;
-    canHaveClearIcon?: boolean;
-    onClear?: () => void;
-    triggerId?: string;
-};
-export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => JSX.Element;
-export {};

package/lib/parts/icons.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import CloseOutlineIcon from '../_virtual/close-outline.js';
-import LoadingOutlineIcon from '../_virtual/loading-outline.js';
-import DownOutlineIcon from '../_virtual/down-outline.js';
-import styles from '../styles/common.p.module.css.js';
-
-const ClearOrLoading = _ref => {
-  let {
-    isLoading,
-    canHaveClearIcon,
-    onClearClick,
-    triggerId,
-    className
-  } = _ref;
-
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
-      style: {
-        pointerEvents: 'none'
-      },
-      className: cn(className, styles.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),
-      "data-test": "clear-icon",
-      onClick: e => {
-        e.stopPropagation();
-        onClearClick();
-      },
-      onPointerDown: e => e.stopPropagation(),
-      onMouseDown: e => e.stopPropagation(),
-      onKeyDown: e => e.stopPropagation(),
-      "aria-label": "Clear",
-      "aria-controls": triggerId
-    }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
-      "data-render-all-sizes": true
-    }));
-  } else {
-    return null;
-  }
-};
-
-const Icons = _ref2 => {
-  let {
-    isLoading,
-    canHaveClearIcon,
-    onClear,
-    triggerId
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.iconsWrapper
-  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
-    isLoading: isLoading,
-    canHaveClearIcon: canHaveClearIcon,
-    onClearClick: onClear,
-    triggerId: triggerId
-  }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
-    className: styles.toggle,
-    "data-test": "toggle-icon",
-    "data-render-all-sizes": true
-  }));
-};
-
-export { ClearOrLoading, Icons };

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { SelectSize, ListBoxItem, ListBoxState } from '../types';
-export declare type ListBoxProps = {
-    state: ListBoxState;
-    items: ListBoxItem[];
-    size?: SelectSize;
-    className?: string;
-    maxVisibleItems?: number;
-    emptyListMessage: string;
-};
-export declare function ListBox({ state, items, size, maxVisibleItems, emptyListMessage }: ListBoxProps): JSX.Element;

package/lib/parts/list-box.js

@@ -1,116 +0,0 @@
-import React, { useRef } from 'react';
-import cn from 'classnames';
-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 { getTextFromNodes } from '../utils/get-text-from-nodes.js';
-import CheckOutlineIcon from '../_virtual/check-outline.js';
-const SIZE_STYLES = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL
-};
-
-function Option(_ref) {
-  let {
-    item,
-    state
-  } = _ref;
-  // Get props for the option element
-  const ref = useRef(null);
-  const {
-    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": isHighlighted,
-    "data-test": `select-options-list__item_${item.key}`
-  }, /*#__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 ListBoxGroup(_ref2) {
-  let {
-    item,
-    isFirst,
-    state
-  } = _ref2;
-  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", {
-    role: "presentation"
-  }, hasHeading && /*#__PURE__*/React.createElement("span", {
-    className: styles.groupHeader,
-    role: "presentation",
-    "data-rs-internal": "select-list-box__group-header"
-  }, item.label), /*#__PURE__*/React.createElement("ul", {
-    role: "group",
-    "aria-label": hasHeading ? getTextFromNodes(item.label) : undefined,
-    style: {
-      padding: 0,
-      listStyle: 'none'
-    }
-  }, item.options.map(option => /*#__PURE__*/React.createElement(Option, {
-    key: option.key,
-    item: option,
-    state: state
-  })))));
-}
-
-function ListBox(_ref3) {
-  var _items$find;
-
-  let {
-    state,
-    items,
-    size,
-    maxVisibleItems = 5,
-    emptyListMessage
-  } = _ref3;
-  const {
-    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"
-  }, 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,
-    item: item,
-    state: state,
-    isFirst: item.key === firstGroupKey
-  }) : /*#__PURE__*/React.createElement(Option, {
-    key: item.key,
-    item: item,
-    state: state
-  })));
-}
-
-export { ListBox };

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

@@ -1,12 +0,0 @@
-import React from 'react';
-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({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): JSX.Element;

package/lib/parts/multi-trigger.js

@@ -1,74 +0,0 @@
-import React from 'react';
-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 {
-    selectedItems,
-    valueProps,
-    isSingleLine,
-    isDisabled,
-    placeholder,
-    triggerRef,
-    removeSelectedItem
-  } = _ref;
-  const hasValue = selectedItems.length > 0;
-
-  if (!hasValue) {
-    return /*#__PURE__*/React.createElement("div", { ...valueProps,
-      className: cn(styles.triggerText, styles.labelNotSelected),
-      "data-test": 'multiselect__trigger_content'
-    }, placeholder);
-  }
-
-  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: () => {
-        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(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,
-    "data-test": "multiselect__trigger_content"
-  }, isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
-    className: styles.tagsContainer,
-    renderHiddenCounter: (n, ref) => /*#__PURE__*/React.createElement(Tag, {
-      className: cn(styles.tag, styles.filledTag),
-      key: "+",
-      ref: ref,
-      "data-rs-internal": "select-trigger__tag"
-    }, "+", n)
-  }, tags) : /*#__PURE__*/React.createElement("div", {
-    className: styles.tagsContainer
-  }, tags));
-}
-
-export { MultiTrigger };

package/lib/parts/native-select-options-with-groups.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { NativeSelectOptionOrGroup } from '../types';
-export declare type NativeSelectOptionsWithGroupsProps = {
-    optionsWithGroups: NativeSelectOptionOrGroup[];
-    placeholder?: string;
-    emptyListMessage?: string;
-};
-export declare const NativeSelectOptionsWithGroups: React.FC<NativeSelectOptionsWithGroupsProps>;

package/lib/parts/native-select-options-with-groups.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import { NO_OPTIONS_VALUE } from '../constants.js';
-import { isOptionAGroup } from '../utils/is-option-a-group.js';
-
-const collectOptionGroupValues = options => options.map(_ref => {
-  let {
-    value
-  } = _ref;
-  return value;
-}).join('-');
-
-const Option = _ref2 => {
-  let {
-    value,
-    label,
-    disabled = false
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("option", {
-    value: value,
-    disabled: disabled
-  }, label);
-};
-
-const OptionGroup = _ref3 => {
-  let {
-    options = [],
-    label = '',
-    disabled = false
-  } = _ref3;
-  return /*#__PURE__*/React.createElement("optgroup", {
-    label: label,
-    disabled: disabled
-  }, options.map(option => /*#__PURE__*/React.createElement(Option, {
-    key: option.value,
-    value: option.value,
-    label: option.label,
-    disabled: option.disabled
-  })));
-};
-
-const NativeSelectOptionsWithGroups = _ref4 => {
-  let {
-    optionsWithGroups,
-    placeholder,
-    emptyListMessage
-  } = _ref4;
-  const hasOptions = optionsWithGroups.length > 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("option", {
-    value: '',
-    disabled: true,
-    hidden: true
-  }, hasOptions ? placeholder : emptyListMessage), !hasOptions && /*#__PURE__*/React.createElement("option", {
-    value: NO_OPTIONS_VALUE,
-    disabled: true
-  }, emptyListMessage), optionsWithGroups.map(optionOrGroup => {
-    if (isOptionAGroup(optionOrGroup)) {
-      const group = optionOrGroup;
-      return /*#__PURE__*/React.createElement(OptionGroup, {
-        key: `group--${group.label}--${collectOptionGroupValues(group.options)}`,
-        options: group.options,
-        disabled: group.disabled,
-        label: group.label
-      });
-    }
-
-    const option = optionOrGroup;
-    return /*#__PURE__*/React.createElement(Option, {
-      key: option.value,
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled
-    });
-  }));
-};
-
-export { NativeSelectOptionsWithGroups };

package/lib/select-basic.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-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,203 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Dropdown } from '@rescui/dropdown';
-import { useSelect } from 'downshift';
-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 { 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'; // eslint-disable-next-line complexity
-
-function SelectBasic(_ref) {
-  let {
-    options,
-    value: selectedItem,
-    onChange,
-    error,
-    label,
-    note,
-    size,
-    mode,
-    theme,
-    placement,
-    boldLabel,
-    reserveErrorLine,
-    maxVisibleItems,
-    isClearable,
-    isLoading,
-    isDisabled,
-    name,
-    noOptionsMessage,
-    className,
-    id,
-    style,
-    placeholder,
-    ...rest
-  } = _ref;
-  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 {
-    fieldProps,
-    errorMessageProps,
-    descriptionProps,
-    baseId
-  } = useA11y({
-    prefix: 'select',
-    error,
-    description: note
-  });
-  const {
-    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
-    } : {})
-  });
-  const {
-    isFocusedByLabel,
-    labelClickProps,
-    triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus();
-  const emptyListMessage = getEmptyMessage({
-    isLoading,
-    isNothingFound: false,
-    noOptionsMessage
-  });
-  const listBoxState = {
-    selectedMap,
-    selectionMode: 'single',
-    highlightedIndex,
-    getItemProps,
-    menuProps
-  };
-  return /*#__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: selectedItem,
-    isMultiple: false,
-    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: styles.trigger,
-        "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,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems
-  })));
-}
-
-export { SelectBasic };

package/lib/select-searchable.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-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;