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

package/lib/select.d.ts

@@ -1,28 +1,92 @@
 import React from 'react';
-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: React.Validator<import("./types").NoOptionsMessage>;
-        placement: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-    };
-};
+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;

package/lib/select.js

@@ -1,36 +1,103 @@
 "use client";
-import React from 'react';
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { ErrorMessage } from '@rescui/form-field';
 import cn from 'classnames';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { Dropdown } from '@rescui/dropdown';
+import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
+import { ErrorMessage } from '@rescui/form-field';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import { optionType, optionsGroupType, noOptionsMessageType } from './common-prop-types.js';
-import { SelectBasic } from './select-basic.js';
-import { SelectSearchable } from './select-searchable.js';
-import styles from './styles/common.p.module.css.js';
-const THEME_STYLES = {
-  light: styles.themeLight,
-  dark: styles.themeDark
+import SelectTrigger from './parts/trigger.js';
+import FormTriggerWrapper from './parts/form-trigger-wrapper.js';
+import { useObservableForceRerender } from './parts/use-observable-force-rerender.js';
+import { useBackwardCompatibleId } from './parts/use-backward-compatible-id.js';
+import { optionType, optionsGroupType, noOptionsMessageConfigType } from './common-prop-types.js';
+import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, withoutGroupsLabel, getPlainOptionsFromGroups, getEmptyMessage, OptionGroupTypes, getOptionValue, convertToOptionGroupsIfNeeded, escapeRegex, getTextFromNodes, calculateMaxHeight } from './utils.js';
+import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from './key-codes.js';
+import styles from './parts/common-select.p.module.css.js'; // eslint-disable-next-line complexity
+
+const Option = _ref => {
+  let {
+    selected,
+    cursorIndex,
+    item,
+    isLastItem,
+    highlightedItemRef,
+    handleSelectIndex,
+    handleHighlightIndex
+  } = _ref;
+
+  if (item.type === OptionGroupTypes.OPTION) {
+    const {
+      index,
+      label
+    } = item;
+    const value = getOptionValue(item);
+    const isSelected = selected && value === getOptionValue(selected);
+    const isHighlighted = isIndexMatchCursor(cursorIndex, index);
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      selected: isSelected,
+      highlighted: isHighlighted,
+      ref: isHighlighted ? highlightedItemRef : null,
+      onMouseMove: () => handleHighlightIndex(index),
+      onClick: () => handleSelectIndex(index),
+      className: cn(isLastItem && styles.lastOption),
+      "data-test": ['select-menu-item', isHighlighted && 'select-menu-item-highlighted', isSelected && 'select-menu-item-selected'].filter(Boolean).join(' ')
+    }, label);
+  }
+
+  if (item.type === OptionGroupTypes.DIVIDER) {
+    return /*#__PURE__*/React.createElement(Divider, {
+      className: styles.divider
+    });
+  }
+
+  if (item.type === OptionGroupTypes.HEADER) {
+    const {
+      label
+    } = item;
+    return /*#__PURE__*/React.createElement(GroupHeader, {
+      text: label
+    });
+  }
+
+  return null;
+};
+
+const getOptionKey = (item, i) => {
+  if (item.type === OptionGroupTypes.OPTION) {
+    const value = getOptionValue(item);
+    return `${value}_${item.index[0]}`;
+  } else if (item.type === OptionGroupTypes.DIVIDER) {
+    return `divider${i}`;
+  } else if (item.type === OptionGroupTypes.HEADER) {
+    return `header${i}`;
+  }
+
+  return null;
 };
+
 const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-const MODE_STYLES = {
-  classic: styles.classic,
-  rock: styles.rock
-};
+const MENU_SIZE_STYLES = {
+  s: styles.menuSizeS,
+  m: styles.menuSizeM,
+  l: styles.menuSizeL
+}; // eslint-disable-next-line complexity
 
-const Select = _ref => {
+const Select = _ref2 => {
   let {
-    options = [],
+    options,
     size = 'm',
     mode = 'classic',
     theme: themeFromProps,
-    className,
-    style,
-    value,
+    className = null,
+    id,
+    value = undefined,
     onChange,
     placeholder,
     isClearable = false,
@@ -42,45 +109,278 @@ const Select = _ref => {
     placement = 'bottom',
     boldLabel = true,
     reserveErrorLine = false,
-    note,
-    maxVisibleItems = 5,
-    id,
     ...restProps
-  } = _ref;
+  } = _ref2;
+  const [triggerFormWrapperRef, setTriggerFormWrapperRef] = useState(null);
   const theme = useThemeWithUndefined(themeFromProps);
-  const InnerSingleComponent = isSearchable ? SelectSearchable : SelectBasic;
-  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, isSearchable && styles.searchable),
-    id: id,
-    style: style,
-    "data-test": "select"
-  }, /*#__PURE__*/React.createElement(InnerSingleComponent, { ...restProps,
-    options: options,
-    size: size,
-    mode: mode,
+  const dropdownRef = useRef(null);
+  const highlightedItemRef = /*#__PURE__*/React.createRef();
+  const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(false);
+  const skipScrollingRef = useRef(false);
+  const [searchString, setSearchString] = useState('');
+  const groups = useStrongMemo(() => convertToOptionGroupsIfNeeded(options), [options]);
+  const filteredGroups = useStrongMemo(() => {
+    if (searchString === '') {
+      return groups;
+    }
+
+    const filter = new RegExp(`(?:^|\\s)${escapeRegex(searchString)}`, 'i');
+    return groups.map(g => ({ ...g,
+      options: g.options.filter(_ref3 => {
+        let {
+          label
+        } = _ref3;
+        return filter.test(getTextFromNodes(label));
+      })
+    }));
+  }, [searchString, groups]);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [cursorIndex, setCursorIndex] = useState(() => getDefaultCursorIndex(filteredGroups));
+  useEffect(() => {
+    setCursorIndex(getDefaultCursorIndex(filteredGroups));
+
+    if (searchString !== '') {
+      setMenuIsOpen(true);
+    }
+  }, [searchString, filteredGroups]);
+  const isEmptyMenu = useMemo(() => isGroupsEmpty(filteredGroups), [filteredGroups]);
+  const handleSelectIndex = useCallback(index => {
+    const [grpIndex, optIndex] = index;
+    const selectedOption = filteredGroups[grpIndex].options[optIndex];
+    setMenuIsOpen(false);
+    setSearchString('');
+    setIsKeyboardNavigating(false);
+
+    if (onChange) {
+      onChange(selectedOption);
+    }
+  }, [onChange, filteredGroups]);
+  useEffect(() => {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
+    }
+  }, [searchString]);
+  const handleMouseMove = useCallback(() => setIsKeyboardNavigating(false), []);
+  useEffect(() => {
+    if (isKeyboardNavigating) {
+      document.addEventListener('mousemove', handleMouseMove);
+    }
+
+    return () => document.removeEventListener('mousemove', handleMouseMove);
+  }, [handleMouseMove, isKeyboardNavigating]);
+  useEffect(() => {
+    if (isKeyboardNavigating && highlightedItemRef.current) {
+      if (skipScrollingRef.current) {
+        skipScrollingRef.current = false;
+      } else {
+        let elementToScrollTo = highlightedItemRef.current;
+
+        if (cursorIndex[0] === 0 && cursorIndex[1] === 0) {
+          const groupHeader = highlightedItemRef.current.previousSibling;
+
+          if (groupHeader) {
+            elementToScrollTo = groupHeader;
+          }
+        }
+
+        scrollIntoView(elementToScrollTo, {
+          behavior: 'instant',
+          scrollMode: 'if-needed',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    }
+  }, [highlightedItemRef, cursorIndex, isKeyboardNavigating]);
+  const handleClose = useCallback(() => {
+    setSearchString('');
+    setMenuIsOpen(false);
+    setIsKeyboardNavigating(false);
+  }, []);
+  const handleKeyNavigation = useCallback( // eslint-disable-next-line complexity
+  e => {
+    if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
+      const isDownDirection = e.key === ARROW_DOWN;
+      setCursorIndex(getMovedCursorIndex(filteredGroups, cursorIndex, isDownDirection));
+      setIsKeyboardNavigating(true);
+      e.preventDefault();
+    }
+
+    if (e.key === ENTER || !isSearchable && e.key === SPACE) {
+      if (cursorIndex !== null) {
+        handleSelectIndex(cursorIndex);
+      } else {
+        handleClose();
+      }
+
+      e.preventDefault();
+    }
+
+    if (e.key === TAB) {
+      handleClose();
+    }
+  }, [filteredGroups, cursorIndex, handleClose, handleSelectIndex, isSearchable]);
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    setMenuIsOpen(currentMenuIsOpen => !currentMenuIsOpen);
+    setSearchString('');
+  }, [isDisabled]);
+  const handleSearchInputChange = useCallback(searchValue => setSearchString(searchValue), []);
+  const handleClearClick = useCallback(() => {
+    setCursorIndex(getDefaultCursorIndex(filteredGroups));
+    setMenuIsOpen(false);
+
+    if (onChange) {
+      onChange(null);
+    }
+  }, [filteredGroups, onChange]);
+  const handleTriggerKeyDown = useCallback(e => {
+    if (e.key === ESCAPE) {
+      handleClose();
+      e.preventDefault();
+    }
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (menuIsOpen) {
+      handleKeyNavigation(e);
+    } else {
+      const target = e.target;
+      const trigger = target.closest('[data-target="trigger"]');
+      const isTriggerTarget = trigger === target;
+
+      if (shouldOpenSelect(e.key, isTriggerTarget)) {
+        setMenuIsOpen(true);
+        setSearchString('');
+        setIsKeyboardNavigating(true);
+        skipScrollingRef.current = true;
+        trigger.focus();
+        e.preventDefault();
+      }
+
+      if (e.key === BACKSPACE && isClearable) {
+        handleClearClick();
+        trigger.focus();
+        e.preventDefault();
+      }
+    }
+  }, [menuIsOpen, isDisabled, isClearable, handleClose, handleClearClick, handleKeyNavigation]);
+  const handleHighlightIndex = useCallback(index => {
+    if (!isIndexMatchCursor(cursorIndex, index)) {
+      setCursorIndex(index);
+    }
+  }, [cursorIndex]); // We use invisible and "untouchable" dummy element to observe `size` changes from css to trigger force rerenders
+
+  const observableRef = useObservableForceRerender();
+  let sizeFromCss = null;
+
+  if (triggerFormWrapperRef && menuIsOpen) {
+    var _context;
+
+    // In theory this part of the code might cause issues with SSR.
+    // But in this specific context, because of checking ref "triggerFormWrapperRef",
+    // we are sure that the value will still be "null" on the first render.
+    // Therefore, the first render on the client will be the same as on the server.
+    // Also, there will be no layout shifts on the following renders because
+    // it's a dropdown-content and in most cases it opens only on-demand.
+    // In additional, we use "observable" el to watch size changes between rerenders (@media query case).
+    const triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
+    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
+  }
+
+  const actualSize = sizeFromCss || size;
+  const maxHeight = calculateMaxHeight(actualSize);
+  const withGroupsLabel = !withoutGroupsLabel(filteredGroups);
+  const uniqueId = `select-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
+  return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
-    className: className,
-    id: id,
-    style: style,
-    value: value,
-    onChange: onChange,
-    placeholder: placeholder,
-    isClearable: isClearable,
-    isLoading: isLoading,
-    isDisabled: isDisabled,
-    noOptionsMessage: noOptionsMessage,
-    error: error,
+    onRequestClose: handleClose,
     placement: placement,
-    boldLabel: boldLabel,
-    reserveErrorLine: reserveErrorLine,
-    note: note,
-    maxVisibleItems: maxVisibleItems
-  }));
+    mode: mode,
+    ref: dropdownRef,
+    cancelCloseAnimation: true,
+    minWidth: "trigger",
+    maxWidth: "trigger",
+    maxHeight: maxHeight,
+    leastMaxHeight: maxHeight,
+    disableFocusLock: true,
+    trigger: _ref4 => {
+      let {
+        ref
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+        ref: setTriggerFormWrapperRef,
+        className: cn(className, SIZE_STYLES[size]),
+        id: id,
+        errorId: errorId,
+        theme: theme,
+        size: size,
+        disabled: isDisabled,
+        error: error,
+        reserveErrorLine: reserveErrorLine,
+        label: restProps.label,
+        note: restProps.note,
+        onKeyDown: handleTriggerKeyDown,
+        boldLabel: boldLabel,
+        role: "listbox",
+        "aria-errormessage": error ? errorId : undefined,
+        "aria-invalid": Boolean(error)
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: observableRef,
+        className: styles.observable
+      }), restProps.name && /*#__PURE__*/React.createElement("input", {
+        type: "hidden",
+        name: restProps.name,
+        value: value && value.value || ''
+      }), /*#__PURE__*/React.createElement(SelectTrigger, {
+        theme: theme,
+        mode: mode,
+        size: size,
+        isOpen: menuIsOpen,
+        triggerRef: ref,
+        selected: value,
+        placeholder: placeholder,
+        isClearable: isClearable,
+        isLoading: isLoading,
+        isDisabled: isDisabled,
+        searchInput: searchString,
+        isSearchable: isSearchable,
+        onSearchChange: handleSearchInputChange,
+        onClick: handleClick,
+        onClearClick: handleClearClick,
+        error: Boolean(error),
+        "data-target": "trigger"
+      }));
+    },
+    isOpen: menuIsOpen
+  }, /*#__PURE__*/React.createElement(Menu, {
+    size: actualSize,
+    disableCursor: isKeyboardNavigating,
+    className: cn(styles.menu, withGroupsLabel && styles.withGroupsLabel, MENU_SIZE_STYLES[actualSize]),
+    enableKeyboardNavigation: false
+  }, !isEmptyMenu ? getPlainOptionsFromGroups(filteredGroups).map((item, i, collection) => /*#__PURE__*/React.createElement(Option, {
+    item: item,
+    isLastItem: i === collection.length - 1,
+    key: getOptionKey(item, i),
+    selected: value,
+    cursorIndex: cursorIndex,
+    highlightedItemRef: highlightedItemRef,
+    handleSelectIndex: handleSelectIndex,
+    handleHighlightIndex: handleHighlightIndex
+  })) : /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true
+  }, getEmptyMessage(isLoading, isSearchable && searchString.length > 0, noOptionsMessage))));
 };
 
 Select.propTypes = {
   className: PropTypes.string,
-  style: PropTypes.object,
   options: PropTypes.oneOfType([PropTypes.arrayOf(optionType), PropTypes.arrayOf(optionsGroupType)]),
   value: optionType,
   onChange: PropTypes.func,
@@ -96,8 +396,8 @@ Select.propTypes = {
   label: PropTypes.node,
   id: PropTypes.string,
   note: PropTypes.node,
-  noOptionsMessage: noOptionsMessageType,
+  noOptionsMessage: PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]),
   placement: PropTypes.oneOf(['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']),
   name: PropTypes.string
 };
-export { Select };
+export { Select as default };