@rescui/select 0.15.1 → 0.16.0

package/lib/select-basic.d.ts

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

@@ -0,0 +1,204 @@
+import React from 'react';
+import cn from 'classnames';
+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 { Icons } from './parts/icons.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'; // 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,
+    isDisabled
+  });
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+    reset
+  } = useSelect({
+    items: flattenedOptions,
+    itemToString,
+    itemToKey: getOptionValue,
+    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?.(newSelectedItem);
+    },
+
+    isItemDisabled(item) {
+      return item && item.disabled;
+    }
+
+  });
+  const menuProps = getMenuProps({
+    ref: menuRef
+  }, {
+    suppressRefError: true
+  });
+  const triggerProps = getToggleButtonProps({
+    ref: triggerRef,
+    onKeyDown: event => {
+      // prevent default behavior of Downshift when pressing Ctrl
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDownshiftDefault = true;
+        return;
+      } // 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,
+    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(PopupContent, {
+    theme: theme,
+    size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
+    triggerRef: triggerRef,
+    placement: placement,
+    isOpen: isOpen,
+    listBoxState: listBoxState,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    listBoxItems: listBoxItems,
+    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: styles.trigger,
+        "data-test": "select__trigger"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: cn(styles.triggerText, !hasValue && styles.labelNotSelected),
+        "data-test": "select__trigger_content"
+      }, selectedItem?.label ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
+        isLoading: isLoading,
+        canHaveClearIcon: isClearable && !isDisabled && hasValue,
+        onClear: () => {
+          reset();
+          triggerRef.current?.focus({
+            focusVisible: false
+          });
+        },
+        triggerId: triggerProps.id
+      })));
+    }
+  }));
+}
+
+export { SelectBasic };

package/lib/select-searchable.d.ts

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

package/lib/select-searchable.js

@@ -0,0 +1,245 @@
+import React, { useRef } from 'react';
+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 { Icons } from './parts/icons.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'; // 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,
+    filterString
+  } = 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,
+    isDisabled
+  });
+  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,
+    itemToKey: getOptionValue,
+    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?.(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: filterString.length > 0,
+    noOptionsMessage
+  });
+  const listBoxState = {
+    selectedMap,
+    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(PopupContent, {
+    theme: theme,
+    size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
+    triggerRef: inputRef,
+    placement: placement,
+    isOpen: isOpen,
+    listBoxState: listBoxState,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    listBoxItems: listBoxItems,
+    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),
+        disabled: isDisabled ? true : undefined,
+        className: styles.searchInput,
+        placeholder: placeholder,
+        "data-test": "select__trigger_input"
+      }), /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        ...mergeProps(getToggleButtonProps(), {
+          ref: triggerRefForDropdown,
+          onFocus: () => {
+            inputRef.current?.focus();
+          }
+        }),
+        tabIndex: undefined,
+        className: styles.trigger,
+        "data-test": "select__trigger"
+      }, /*#__PURE__*/React.createElement(Icons, {
+        isLoading: isLoading,
+        canHaveClearIcon: isClearable && !isDisabled && hasValue,
+        onClear: () => {
+          reset();
+          inputRef.current?.focus();
+        },
+        triggerId: inputProps.id
+      })));
+    }
+  }));
+}
+
+export { SelectSearchable };

package/lib/select.d.ts

@@ -1,92 +1,28 @@
 import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import type { SelectOption, NoOptionsMessage, SelectOptionOrGroup, SelectSize, SelectMode } from './types';
-export interface CustomTriggerOptions {
-    selectedLabel?: string;
-    selectedValue: string;
-    placeholder?: string;
-    hovered: boolean;
-}
-export interface SelectProps {
-    /**
-     * Additional class name
-     */
-    className?: string;
-    id?: string;
-    /**
-     * Array of options or option groups
-     */
-    options: SelectOptionOrGroup[];
-    /**
-     * Is select supports clear the value
-     */
-    isClearable?: boolean;
-    /**
-     * Is select supports inplace filtering
-     */
-    isSearchable?: boolean;
-    /**
-     * Is select has been disabled
-     */
-    isDisabled?: boolean;
-    /**
-     *  Is loader displayed inside select
-     */
-    isLoading?: boolean;
-    /**
-     * A hint to the user of what can be entered in the control
-     */
-    placeholder?: string;
-    /**
-     * Size
-     */
-    size?: SelectSize;
-    /**
-     * Appearance mode
-     */
-    mode?: SelectMode;
-    /**
-     * Appearance theme
-     */
-    theme?: Theme;
-    /**
-     * Value of the select
-     */
-    value: SelectOption;
-    /**
-     * Change value callback. `value => ...`
-     */
-    onChange?: (newValue: SelectOption) => void;
-    /**
-     * Error state flag or React.ReactNode (use with forms)
-     */
-    error?: boolean | React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    /**
-     * Label element upper then Select element (use with forms)
-     */
-    label?: React.ReactNode;
-    /**
-     * Placement of dropdown element
-     */
-    placement?: 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
-    /**
-     * Note element below then Select element (use with forms)
-     */
-    note?: React.ReactNode;
-    /**
-     * Text to display when there are no options
-     */
-    noOptionsMessage?: NoOptionsMessage;
-    /**
-     * Input name attribute
-     */
-    name?: string;
-    boldLabel?: boolean;
-}
-declare const Select: React.FC<SelectProps>;
-export default Select;
+import PropTypes from 'prop-types';
+import type { SelectProps, SelectOption, SelectOptionOrGroup } from './types';
+export declare const Select: {
+    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, boldLabel, reserveErrorLine, note, maxVisibleItems, id, ...restProps }: SelectProps): JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        options: PropTypes.Validator<SelectOptionOrGroup[]>;
+        value: PropTypes.Validator<SelectOption>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        isClearable: PropTypes.Requireable<boolean>;
+        isSearchable: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isLoading: PropTypes.Requireable<boolean>;
+        error: React.Validator<React.ReactNode>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        noOptionsMessage: PropTypes.Validator<import("./types").NoOptionsMessage>;
+        placement: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+    };
+};