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

package/lib/select-searchable.js

@@ -1,250 +0,0 @@
-import React, { useRef } from 'react';
-import { Dropdown } from '@rescui/dropdown';
-import { useCombobox } 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 SelectSearchable(_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 inputRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const menuRef = useRef(null);
-  const {
-    flattenedOptions,
-    listBoxItems,
-    setFilterString
-  } = 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,
-    labelProps
-  } = useA11y({
-    prefix: 'select',
-    error,
-    description: note,
-    fieldRef: inputRef
-  });
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    reset,
-    setInputValue
-  } = useCombobox({
-    onInputValueChange(_ref2) {
-      let {
-        inputValue,
-        type
-      } = _ref2;
-
-      if (type === useCombobox.stateChangeTypes.InputChange) {
-        setFilterString(inputValue);
-      }
-    },
-
-    items: flattenedOptions,
-    id: baseId,
-    itemToString,
-    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: _ref3 => {
-      let {
-        selectedItem: newSelectedItem
-      } = _ref3;
-      onChange === null || onChange === void 0 || onChange(newSelectedItem);
-    },
-
-    isItemDisabled(item) {
-      return item && item.disabled;
-    },
-
-    onIsOpenChange(_ref4) {
-      let {
-        isOpen: newIsOpen,
-        selectedItem: newSelectedItem
-      } = _ref4;
-
-      if (newIsOpen) {
-        setFilterString('');
-      } else {
-        setInputValue(itemToString(newSelectedItem));
-      }
-    },
-
-    stateReducer(state, actionAndChanges) {
-      const {
-        changes,
-        type
-      } = actionAndChanges;
-
-      switch (type) {
-        case useCombobox.stateChangeTypes.InputKeyDownEscape:
-          if (!state.isOpen) {
-            return state;
-          }
-
-          return changes;
-
-        default:
-          return changes;
-      }
-    }
-
-  });
-  const menuProps = getMenuProps({
-    ref: menuRef
-  }, {
-    suppressRefError: true
-  });
-  const inputProps = getInputProps({
-    ref: inputRef,
-    // 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(labelProps, 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: _ref5 => {
-      let {
-        ref: triggerRefForDropdown
-      } = _ref5;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.triggerContainer,
-        "data-open": isOpen,
-        "data-label-focused": isFocusedByLabel
-      }, /*#__PURE__*/React.createElement("input", { ...rest,
-        ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by inputProps,
-        inputProps, labelFocusForTriggerProps),
-        className: styles.searchInput,
-        placeholder: placeholder,
-        "data-test": "select__trigger_input"
-      }), /*#__PURE__*/React.createElement("div", {
-        role: "button",
-        ...mergeProps(getToggleButtonProps(), {
-          ref: triggerRefForDropdown,
-          onFocus: () => {
-            var _inputRef$current;
-
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-          }
-        }),
-        className: styles.trigger,
-        "data-test": "select__trigger"
-      }, /*#__PURE__*/React.createElement(Icons, {
-        isLoading: isLoading,
-        canHaveClearIcon: isClearable && !isDisabled && hasValue,
-        onClear: () => {
-          var _inputRef$current2;
-
-          reset();
-          (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
-        },
-        triggerId: inputProps.id
-      })));
-    }
-  }, /*#__PURE__*/React.createElement(ListBox, {
-    state: listBoxState,
-    size: size,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems
-  })));
-}
-
-export { SelectSearchable };

package/lib/styles/common.p.module.css.js

@@ -1,31 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_buyj66_6",
-  "themeDark": "_themeDark_buyj66_9",
-  "sizeS": "_sizeS_buyj66_13",
-  "sizeM": "_sizeM_buyj66_16",
-  "sizeL": "_sizeL_buyj66_19",
-  "classic": "_classic_buyj66_23",
-  "rock": "_rock_buyj66_26",
-  "root": "_root_buyj66_30",
-  "trigger": "_trigger_buyj66_36",
-  "error": "_error_buyj66_70",
-  "enabled": "_enabled_buyj66_75",
-  "disabled": "_disabled_buyj66_79",
-  "searchable": "_searchable_buyj66_92",
-  "canBeMultiline": "_canBeMultiline_buyj66_119",
-  "triggerContainer": "_triggerContainer_buyj66_123",
-  "triggerText": "_triggerText_buyj66_127",
-  "searchInput": "_searchInput_buyj66_128",
-  "labelNotSelected": "_labelNotSelected_buyj66_159",
-  "multi": "_multi_buyj66_213",
-  "tagsContainer": "_tagsContainer_buyj66_230",
-  "tag": "_tag_buyj66_230",
-  "filledTag": "_filledTag_buyj66_252",
-  "iconsWrapper": "_iconsWrapper_buyj66_260",
-  "toggle": "_toggle_buyj66_278",
-  "icon": "_icon_buyj66_260",
-  "clearIcon": "_clearIcon_buyj66_352",
-  "visuallyHidden": "_visuallyHidden_buyj66_412",
-  "select": "_select_buyj66_429"
-};
-export { styles as default };

package/lib/styles/form-trigger.p.module.css.js

@@ -1,15 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_lyv0k_6",
-  "themeDark": "_themeDark_lyv0k_9",
-  "sizeS": "_sizeS_lyv0k_13",
-  "sizeM": "_sizeM_lyv0k_16",
-  "sizeL": "_sizeL_lyv0k_19",
-  "main": "_main_lyv0k_23",
-  "label": "_label_lyv0k_27",
-  "disabled": "_disabled_lyv0k_33",
-  "footer": "_footer_lyv0k_38",
-  "errorMessage": "_errorMessage_lyv0k_45",
-  "error": "_error_lyv0k_45",
-  "note": "_note_lyv0k_54"
-};
-export { styles as default };

package/lib/styles/list-box.p.module.css.js

@@ -1,14 +0,0 @@
-var styles = {
-  "sizeS": "_sizeS_tuv1by_6",
-  "sizeM": "_sizeM_tuv1by_9",
-  "sizeL": "_sizeL_tuv1by_12",
-  "listBox": "_listBox_tuv1by_16",
-  "item": "_item_tuv1by_30",
-  "selected": "_selected_tuv1by_76",
-  "disabled": "_disabled_tuv1by_87",
-  "checkIcon": "_checkIcon_tuv1by_94",
-  "visible": "_visible_tuv1by_101",
-  "divider": "_divider_tuv1by_108",
-  "groupHeader": "_groupHeader_tuv1by_122"
-};
-export { styles as default };

package/lib/utils/calculate-max-height-by-items.d.ts

@@ -1,13 +0,0 @@
-/**
- * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
- * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
- * `itemsCount == allowedMaxVisibleItems + 1` differently.
- *
- * For allowedMaxVisibleItems={5}:
- * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
- * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
- * - If items itemsCount > 6: restrain by 5.5 items
- *
- * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
- */
-export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;

package/lib/utils/calculate-max-height-by-items.js

@@ -1,22 +0,0 @@
-/**
- * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
- * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
- * `itemsCount == allowedMaxVisibleItems + 1` differently.
- *
- * For allowedMaxVisibleItems={5}:
- * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
- * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
- * - If items itemsCount > 6: restrain by 5.5 items
- *
- * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
- */
-const calculateMaxHeightByItems = (itemsCount, allowedMaxVisibleItems) => {
-  const allowedFloor = Math.floor(allowedMaxVisibleItems);
-  const groupSeparatorsDelta = 0.1;
-  const partiallyVisiblePart = 0.5;
-  const upperLimit = Math.min(itemsCount + groupSeparatorsDelta, allowedFloor + 1 + groupSeparatorsDelta);
-  const delta = Math.min(Math.max(0, itemsCount - (allowedFloor + 1)), partiallyVisiblePart + groupSeparatorsDelta);
-  return Math.max(allowedFloor + partiallyVisiblePart, upperLimit - delta);
-};
-
-export { calculateMaxHeightByItems };

package/lib/utils/get-empty-message.d.ts

@@ -1,6 +0,0 @@
-import type { NoOptionsMessage } from '../types';
-export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
-    isLoading: boolean;
-    isNothingFound: boolean;
-    noOptionsMessage: NoOptionsMessage;
-}): string;

package/lib/utils/get-empty-message.js

@@ -1,32 +0,0 @@
-import { DEFAULT_NO_OPTIONS_MESSAGES } from '../constants.js';
-
-function isString(s) {
-  return Object.prototype.toString.call(s) === '[object String]';
-}
-
-function getEmptyMessage(_ref) {
-  let {
-    isLoading,
-    isNothingFound,
-    noOptionsMessage
-  } = _ref;
-  const {
-    noOptions,
-    nothingFound,
-    loading
-  } = isString(noOptionsMessage) ? { ...DEFAULT_NO_OPTIONS_MESSAGES,
-    noOptions: noOptionsMessage
-  } : { ...DEFAULT_NO_OPTIONS_MESSAGES,
-    ...noOptionsMessage
-  };
-
-  if (isLoading) {
-    return loading;
-  } else if (isNothingFound) {
-    return nothingFound;
-  } else {
-    return noOptions;
-  }
-}
-
-export { getEmptyMessage };

package/lib/utils/get-option-value.d.ts

@@ -1,2 +0,0 @@
-import type { SelectOption, Key } from '../types';
-export declare function getOptionValue(option?: SelectOption): Key | null;

package/lib/utils/get-option-value.js

@@ -1,11 +0,0 @@
-import { getTextFromNodes } from './get-text-from-nodes.js';
-
-function getOptionValue(option) {
-  if (!option) {
-    return null;
-  }
-
-  return typeof option.value === 'string' || typeof option.value === 'number' ? option.value : getTextFromNodes(option.label);
-}
-
-export { getOptionValue };

package/lib/utils/get-real-items-cnt.d.ts

@@ -1,2 +0,0 @@
-import { ListBoxItem } from '../types';
-export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;

package/lib/utils/get-real-items-cnt.js

@@ -1,19 +0,0 @@
-const getRealItemsCnt = items => {
-  // Count total number of items
-  return items.reduce((count, item) => {
-    if (item.type === 'group') {
-      const groupOptions = item.options;
-      const hasHeading = item.label !== null && item.label !== undefined; // Count heading (if present) + all options in the section
-
-      return count + (hasHeading ? 1 : 0) + groupOptions.length;
-    }
-
-    if (item.type === 'option') {
-      return count + 1;
-    }
-
-    return count;
-  }, 0);
-};
-
-export { getRealItemsCnt };

package/lib/utils/get-text-from-nodes.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;

package/lib/utils/get-text-from-nodes.js

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const getTextFromNodes = function (node) {
-  var _node$type;
-
-  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-  if (typeof node === 'string' || typeof node === 'number') {
-    return node.toString();
-  }
-
-  if (depth > 15) {
-    console.warn('Max depth reached while getting text from nodes');
-    return '';
-  }
-
-  if (Array.isArray(node)) {
-    return node.map(n => getTextFromNodes(n, depth + 1)).join('');
-  }
-
-  if ( /*#__PURE__*/React.isValidElement(node) && (node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.toString()) === null || _node$type === void 0 ? void 0 : _node$type.toLowerCase()) !== 'svg') {
-    return getTextFromNodes(node.props.children, depth + 1);
-  }
-
-  return '';
-};
-
-export { getTextFromNodes };

package/lib/utils/is-option-a-group.d.ts

@@ -1,2 +0,0 @@
-import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
-export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;

package/lib/utils/is-option-a-group.js

@@ -1,5 +0,0 @@
-const isOptionAGroup = optionOrGroup => {
-  return 'options' in optionOrGroup && typeof optionOrGroup.options !== 'undefined';
-};
-
-export { isOptionAGroup };

package/lib/utils/item-to-string.d.ts

@@ -1,2 +0,0 @@
-import type { SelectOption } from '../types';
-export declare function itemToString(item: SelectOption): string;

package/lib/utils/item-to-string.js

@@ -1,7 +0,0 @@
-import { getTextFromNodes } from './get-text-from-nodes.js';
-
-function itemToString(item) {
-  return item ? getTextFromNodes(item.label) : '';
-}
-
-export { itemToString };

package/lib/utils/merge-props.d.ts

@@ -1,29 +0,0 @@
-/**
- * Copied from react-aria repo
- * @see https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/utils/mergeProps.ts
- */
-import type { MutableRefObject, RefCallback } from 'react';
-/**
- * Merges multiple refs into one. Works with either callback or object refs.
- */
-export declare function mergeRefs<T>(...refs: Array<RefCallback<T> | MutableRefObject<T> | null | undefined>): RefCallback<T> | MutableRefObject<T>;
-export declare function chain(...callbacks: any[]): (...args: any[]) => void;
-interface Props {
-    [key: string]: any;
-}
-declare type PropsArg = Props | null | undefined;
-declare type TupleTypes<T> = {
-    [P in keyof T]: T[P];
-} extends {
-    [key: number]: infer V;
-} ? NullToObject<V> : never;
-declare type NullToObject<T> = T extends null | undefined ? object : T;
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-/**
- * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, ids are deduplicated, and refs are merged.
- * For all other props, the last prop object overrides all previous ones.
- * @param args - Multiple sets of props to merge together.
- */
-export declare function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>>;
-export {};

package/lib/utils/merge-props.js

@@ -1,106 +0,0 @@
-import cn from 'classnames';
-/* eslint-disable @typescript-eslint/no-explicit-any,consistent-return */
-
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    return ref(value);
-  } else if (ref !== null) {
-    ref.current = value;
-  }
-}
-/**
- * Merges multiple refs into one. Works with either callback or object refs.
- */
-
-
-function mergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  if (refs.length === 1 && refs[0]) {
-    return refs[0];
-  }
-
-  return value => {
-    let hasCleanup = false;
-    const cleanups = refs.map(ref => {
-      const cleanup = setRef(ref, value);
-      hasCleanup = hasCleanup || typeof cleanup === 'function';
-      return cleanup;
-    });
-
-    if (hasCleanup) {
-      return () => {
-        cleanups.forEach((cleanup, i) => {
-          if (typeof cleanup === 'function') {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        });
-      };
-    }
-  };
-}
-
-function chain() {
-  for (var _len2 = arguments.length, callbacks = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    callbacks[_key2] = arguments[_key2];
-  }
-
-  return function () {
-    for (const callback of callbacks) {
-      if (typeof callback === 'function') {
-        callback(...arguments);
-      }
-    }
-  };
-}
-/**
- * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, ids are deduplicated, and refs are merged.
- * For all other props, the last prop object overrides all previous ones.
- * @param args - Multiple sets of props to merge together.
- */
-// eslint-disable-next-line complexity
-
-
-function mergeProps() {
-  // Start with a base clone of the first argument. This is a lot faster than starting
-  // with an empty object and adding properties as we go.
-  const result = { ...(arguments.length <= 0 ? undefined : arguments[0])
-  };
-
-  for (let i = 1; i < arguments.length; i++) {
-    const props = i < 0 || arguments.length <= i ? undefined : arguments[i];
-
-    for (const key in props) {
-      if (!props.hasOwnProperty(key)) {
-        continue;
-      }
-
-      const a = result[key];
-      const b = props[key]; // Chain events
-
-      if (typeof a === 'function' && typeof b === 'function' && // This is a lot faster than a regex.
-      key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) >=
-      /* 'A' */
-      65 && key.charCodeAt(2) <=
-      /* 'Z' */
-      90) {
-        result[key] = chain(a, b); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
-      } else if (key === 'className' && typeof a === 'string' && typeof b === 'string') {
-        result[key] = cn(a, b);
-      } else if (key === 'ref' && a && b) {
-        result.ref = mergeRefs(a, b); // Override others
-      } else {
-        result[key] = b !== undefined ? b : a;
-      }
-    }
-  }
-
-  return result;
-}
-
-export { chain, mergeProps, mergeRefs };

package/lib/utils/throttle.d.ts

@@ -1 +0,0 @@
-export declare function throttle<A extends unknown[], R>(func: (...args: A) => R, wait: number): (...args: A) => R;