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

package/lib/parts/multiselect.js

@@ -0,0 +1,455 @@
+"use client";
+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 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 CheckOutlineIcon from '../_virtual/check-outline.js';
+import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getOptionValue, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, withoutGroupsLabel, getPlainOptionsFromGroups, getEmptyMessage, OptionGroupTypes, convertToOptionGroupsIfNeeded, calculateMaxHeight } from '../utils.js';
+import { optionType, optionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
+import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from '../key-codes.js';
+import SelectTrigger from './trigger.js';
+import FormTriggerWrapper from './form-trigger-wrapper.js';
+import { useObservableForceRerender } from './use-observable-force-rerender.js';
+import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
+import styles from './common-select.p.module.css.js'; // eslint-disable-next-line complexity
+
+const Option = _ref => {
+  let {
+    selected,
+    cursorIndex,
+    item,
+    isSingleLine,
+    isLastItem,
+    highlightedItemRef,
+    handleHighlightIndex,
+    handleSelectIndex
+  } = _ref;
+
+  if (item.type === OptionGroupTypes.OPTION) {
+    const {
+      index,
+      label
+    } = item;
+    const value = getOptionValue(item);
+    const isItemSelected = Boolean(selected && selected.length && selected.some(s => value === getOptionValue(s)));
+    const isHighlighted = isIndexMatchCursor(cursorIndex, index);
+    const icon = isSingleLine && isItemSelected ? /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+      className: styles.checkIcon,
+      "data-render-all-sizes": true
+    }) : null;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      selected: isItemSelected,
+      highlighted: isHighlighted,
+      ref: isHighlighted ? highlightedItemRef : null,
+      onMouseMove: () => handleHighlightIndex(index),
+      onClick: () => handleSelectIndex(index),
+      className: cn(isLastItem && styles.lastOption),
+      icon: icon
+    }, 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;
+};
+
+function filterSelected(groups, selected) {
+  const selectedValues = {};
+
+  if (selected) {
+    selected.forEach(s => {
+      selectedValues[getOptionValue(s)] = true;
+    });
+  }
+
+  return groups.map(g => {
+    let newOptions = [];
+
+    if (g.options) {
+      newOptions = g.options.filter(opt => !selectedValues[getOptionValue(opt)]);
+    }
+
+    return { ...g,
+      options: newOptions
+    };
+  });
+}
+
+const NativeSelectedOptions = _ref2 => {
+  let {
+    name,
+    selected
+  } = _ref2;
+
+  if (!selected || !Array.isArray(selected) || !selected.length) {
+    return /*#__PURE__*/React.createElement("input", {
+      type: "hidden",
+      name: name,
+      value: ""
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(_ref3 => {
+    let {
+      value
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("input", {
+      key: value,
+      type: "hidden",
+      name: name,
+      value: value
+    });
+  }));
+};
+
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+const MENU_SIZE_STYLES = {
+  s: styles.menuSizeS,
+  m: styles.menuSizeM,
+  l: styles.menuSizeL
+}; // eslint-disable-next-line complexity
+
+const Multiselect = _ref4 => {
+  let {
+    options,
+    size = 'm',
+    mode = 'classic',
+    theme: themeFromProps,
+    className = null,
+    id,
+    value = undefined,
+    onChange,
+    placeholder,
+    isSingleLine = false,
+    isClearable = false,
+    isLoading = false,
+    isDisabled = false,
+    noOptionsMessage,
+    error,
+    reserveErrorLine = false,
+    placement = 'bottom',
+    boldLabel = true,
+    ...restProps
+  } = _ref4;
+  const [triggerFormWrapperRef, setTriggerFormWrapperRef] = useState(null);
+  const dropdownRef = useRef(null);
+  const highlightedItemRef = useRef();
+  const theme = useThemeWithUndefined(themeFromProps);
+  const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(false);
+  const skipScrollingRef = useRef(false);
+  const groups = useStrongMemo(() => convertToOptionGroupsIfNeeded(options), [options]);
+  const filteredGroups = useStrongMemo(() => {
+    if (isSingleLine) {
+      return groups;
+    }
+
+    return filterSelected(groups, value);
+  }, [isSingleLine, value, groups]);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [cursorIndex, setCursorIndex] = useState(() => getDefaultCursorIndex(filteredGroups));
+  useEffect(() => {
+    setCursorIndex(getDefaultCursorIndex(filteredGroups));
+  }, [filteredGroups, value]);
+  const isEmptyMenu = useMemo(() => isGroupsEmpty(filteredGroups), [filteredGroups]);
+  const handleSelectIndex = useCallback(index => {
+    const selectedOption = filteredGroups[index[0]].options[index[1]];
+    const selectedOptionValue = getOptionValue(selectedOption);
+    const optionAdded = !value.some(option => getOptionValue(option) === selectedOptionValue);
+    const newSelected = optionAdded ? [...value, selectedOption] : value.filter(option => getOptionValue(option) !== selectedOptionValue);
+
+    if (onChange) {
+      onChange(newSelected);
+    }
+
+    setMenuIsOpen(false);
+    setIsKeyboardNavigating(false);
+  }, [onChange, filteredGroups, value]);
+  useEffect(() => {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
+    }
+  }, [value]);
+  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(() => {
+    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 || e.key === SPACE) {
+      if (cursorIndex !== null) {
+        handleSelectIndex(cursorIndex);
+      } else {
+        handleClose();
+      }
+
+      e.preventDefault();
+    }
+
+    if (e.key === TAB) {
+      handleClose();
+    }
+  }, [filteredGroups, cursorIndex, handleClose, handleSelectIndex]);
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    setMenuIsOpen(currentMenuIsOpen => !currentMenuIsOpen);
+  }, [isDisabled]);
+  const handleClearClick = useCallback(() => {
+    setCursorIndex(getDefaultCursorIndex(groups));
+    setMenuIsOpen(false);
+
+    if (onChange) {
+      onChange([]);
+    }
+  }, [groups, onChange]); // eslint-disable-next-line complexity
+
+  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);
+        setIsKeyboardNavigating(true);
+        skipScrollingRef.current = true;
+        trigger.focus();
+        e.preventDefault();
+      }
+
+      if (e.key === BACKSPACE && isClearable) {
+        handleClearClick();
+        trigger.focus();
+        e.preventDefault();
+      }
+    }
+  }, [handleClearClick, handleClose, handleKeyNavigation, isClearable, isDisabled, menuIsOpen]);
+  const handleUnselectClick = useCallback(unselectedOption => {
+    const unselectedOptionValue = getOptionValue(unselectedOption);
+    const newSelected = value.filter(option => getOptionValue(option) !== unselectedOptionValue);
+
+    if (onChange) {
+      onChange(newSelected);
+    }
+  }, [onChange, value]);
+  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 = `multiselect-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    theme: theme,
+    onRequestClose: handleClose,
+    placement: placement,
+    mode: mode,
+    ref: dropdownRef,
+    cancelCloseAnimation: true,
+    minWidth: "trigger",
+    maxWidth: "trigger",
+    maxHeight: maxHeight,
+    leastMaxHeight: maxHeight,
+    disableFocusLock: true,
+    trigger: _ref5 => {
+      let {
+        ref
+      } = _ref5;
+      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),
+        "aria-multiselectable": true
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: observableRef,
+        className: styles.observable
+      }), restProps.name && /*#__PURE__*/React.createElement(NativeSelectedOptions, {
+        name: restProps.name,
+        selected: 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,
+        isSingleLine: isSingleLine,
+        onClick: handleClick,
+        onClearClick: handleClearClick,
+        onItemClearClick: handleUnselectClick,
+        error: Boolean(error),
+        "data-target": "trigger"
+      }));
+    },
+    isOpen: menuIsOpen
+  }, /*#__PURE__*/React.createElement(Menu, {
+    "data-test": "option-list",
+    size: actualSize,
+    className: cn(styles.menu, withGroupsLabel && styles.withGroupsLabel, MENU_SIZE_STYLES[actualSize]),
+    disableCursor: isKeyboardNavigating,
+    iconPlacement: 'right',
+    enableKeyboardNavigation: false
+  }, !isEmptyMenu ? getPlainOptionsFromGroups(filteredGroups).map((item, i, collection) => /*#__PURE__*/React.createElement(Option, {
+    key: getOptionKey(item, i),
+    selected: value,
+    cursorIndex: cursorIndex,
+    item: item,
+    isSingleLine: isSingleLine,
+    isLastItem: i === collection.length - 1,
+    highlightedItemRef: highlightedItemRef,
+    handleSelectIndex: handleSelectIndex,
+    handleHighlightIndex: handleHighlightIndex
+  })) : /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true
+  }, getEmptyMessage(isLoading, false, noOptionsMessage))));
+};
+
+Multiselect.propTypes = {
+  className: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
+  value: PropTypes.arrayOf(optionType),
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['m', 's', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  placeholder: PropTypes.string,
+  isSingleLine: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  error: ErrorMessage.propTypes.children,
+  label: PropTypes.node,
+  note: PropTypes.node,
+  id: PropTypes.string,
+  noOptionsMessage: noOptionsMessageType,
+  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,
+  boldLabel: PropTypes.bool
+};
+export { Multiselect as default };

package/lib/parts/native-select.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import type { NativeSelectOption, SelectSize, NativeSelectOptionOrGroup, NoOptionsMessage } from '../types';
+export declare type TriggerFunc = (props: {
+    selectedLabel: string;
+    selectedValue: string;
+    placeholder: string;
+    hovered: boolean;
+}) => React.ReactNode;
+export declare type NativeSelectProps = {
+    options?: NativeSelectOptionOrGroup[];
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    id?: string;
+    style?: object;
+    value: NativeSelectOption;
+    onChange?: (newValue: NativeSelectOption) => void;
+    placeholder?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    trigger?: TriggerFunc;
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+    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;
+    noOptionsMessage?: NoOptionsMessage;
+    name?: string;
+    boldLabel?: boolean;
+};
+declare const NativeSelect: React.FC<NativeSelectProps>;
+export default NativeSelect;