@rescui/select 0.15.0 → 0.15.1-RUI-280-Update-select-component-026338d06.52

package/lib/parts/multiselect.js

@@ -1,455 +0,0 @@
-"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

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