@rescui/select 0.15.0 → 0.15.1-RUI-280-Update-select-component-e516591ed.54

package/lib/select.js

@@ -1,103 +1,25 @@
 "use client";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import React from 'react';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 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 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 MENU_SIZE_STYLES = {
-  s: styles.menuSizeS,
-  m: styles.menuSizeM,
-  l: styles.menuSizeL
-}; // eslint-disable-next-line complexity
-
-const Select = _ref2 => {
+import { optionType, optionsGroupType, noOptionsMessageType } from './common-prop-types.js';
+import { useOptionSerialization } from './hooks/use-option-serialization.js';
+import { convertOptions } from './utils/convert-options.js';
+import { convertPlacement } from './utils/convert-placement.js';
+import { getOptionValue } from './utils/get-option-value.js';
+import { SelectBasic } from './select-basic.js';
+import { SelectSearchable } from './select-searchable.js';
+
+const Select = _ref => {
   let {
-    options,
+    options = [],
     size = 'm',
     mode = 'classic',
     theme: themeFromProps,
-    className = null,
-    id,
-    value = undefined,
+    className,
+    style,
+    value,
     onChange,
     placeholder,
     isClearable = false,
@@ -109,278 +31,49 @@ const Select = _ref2 => {
     placement = 'bottom',
     boldLabel = true,
     reserveErrorLine = false,
+    note,
+    maxVisibleItems = 5,
     ...restProps
-  } = _ref2;
-  const [triggerFormWrapperRef, setTriggerFormWrapperRef] = useState(null);
+  } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
-  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,
-    onRequestClose: handleClose,
-    placement: placement,
+  const {
+    selectedKey,
+    findOptionByKey,
+    virtualOption
+  } = useOptionSerialization(options, value);
+
+  const handleSelectionChange = key => {
+    const option = findOptionByKey(key);
+    onChange === null || onChange === void 0 || onChange(option);
+  };
+
+  const InnerSingleComponent = isSearchable ? SelectSearchable : SelectBasic;
+  return /*#__PURE__*/React.createElement(InnerSingleComponent, { ...restProps,
+    isDisabled: isDisabled,
+    value: selectedKey,
+    onChange: handleSelectionChange,
+    placeholder: placeholder,
+    isClearable: isClearable,
+    isLoading: isLoading,
+    className: className,
+    style: style,
+    size: size,
     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))));
+    theme: theme,
+    errorMessage: error,
+    placement: convertPlacement(placement),
+    boldLabel: boldLabel,
+    reserveErrorLine: reserveErrorLine,
+    description: note,
+    noOptionsMessage: noOptionsMessage,
+    maxVisibleItems: maxVisibleItems,
+    disabledKeys: virtualOption ? [getOptionValue(virtualOption)] : []
+  }, convertOptions(options, [virtualOption].filter(Boolean)));
 };
 
 Select.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   options: PropTypes.oneOfType([PropTypes.arrayOf(optionType), PropTypes.arrayOf(optionsGroupType)]),
   value: optionType,
   onChange: PropTypes.func,
@@ -396,8 +89,8 @@ Select.propTypes = {
   label: PropTypes.node,
   id: PropTypes.string,
   note: PropTypes.node,
-  noOptionsMessage: PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]),
+  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
 };
-export { Select as default };
+export { Select };

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

@@ -0,0 +1,27 @@
+var styles = {
+  "themeLight": "_themeLight_60u4bs_6",
+  "themeDark": "_themeDark_60u4bs_9",
+  "sizeS": "_sizeS_60u4bs_13",
+  "sizeM": "_sizeM_60u4bs_16",
+  "sizeL": "_sizeL_60u4bs_19",
+  "classic": "_classic_60u4bs_23",
+  "rock": "_rock_60u4bs_26",
+  "root": "_root_60u4bs_30",
+  "trigger": "_trigger_60u4bs_36",
+  "error": "_error_60u4bs_69",
+  "enabled": "_enabled_60u4bs_74",
+  "disabled": "_disabled_60u4bs_78",
+  "canBeMultiline": "_canBeMultiline_60u4bs_119",
+  "iconsWrapper": "_iconsWrapper_60u4bs_123",
+  "triggerText": "_triggerText_60u4bs_138",
+  "searchInput": "_searchInput_60u4bs_144",
+  "labelNotSelected": "_labelNotSelected_60u4bs_188",
+  "multi": "_multi_60u4bs_202",
+  "tagsContainer": "_tagsContainer_60u4bs_218",
+  "tag": "_tag_60u4bs_218",
+  "filledTag": "_filledTag_60u4bs_240",
+  "toggle": "_toggle_60u4bs_248",
+  "icon": "_icon_60u4bs_123",
+  "clearIcon": "_clearIcon_60u4bs_315"
+};
+export { styles as default };

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

@@ -0,0 +1,15 @@
+var styles = {
+  "themeLight": "_themeLight_1k683lb_6",
+  "themeDark": "_themeDark_1k683lb_9",
+  "sizeS": "_sizeS_1k683lb_13",
+  "sizeM": "_sizeM_1k683lb_16",
+  "sizeL": "_sizeL_1k683lb_19",
+  "main": "_main_1k683lb_23",
+  "label": "_label_1k683lb_27",
+  "disabled": "_disabled_1k683lb_33",
+  "footer": "_footer_1k683lb_38",
+  "errorMessage": "_errorMessage_1k683lb_45",
+  "error": "_error_1k683lb_45",
+  "note": "_note_1k683lb_54"
+};
+export { styles as default };

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

@@ -0,0 +1,16 @@
+var styles = {
+  "sizeS": "_sizeS_57zbb_6",
+  "sizeM": "_sizeM_57zbb_9",
+  "sizeL": "_sizeL_57zbb_12",
+  "modeClassic": "_modeClassic_57zbb_16",
+  "modeRock": "_modeRock_57zbb_19",
+  "listBox": "_listBox_57zbb_23",
+  "item": "_item_57zbb_36",
+  "selected": "_selected_57zbb_82",
+  "disabled": "_disabled_57zbb_93",
+  "checkIcon": "_checkIcon_57zbb_100",
+  "visible": "_visible_57zbb_107",
+  "divider": "_divider_57zbb_114",
+  "groupHeader": "_groupHeader_57zbb_128"
+};
+export { styles as default };

package/lib/styles/native-select-trigger.p.module.css.js

@@ -0,0 +1,17 @@
+var styles = {
+  "themeLight": "_themeLight_1lf70g_6",
+  "themeDark": "_themeDark_1lf70g_9",
+  "sizeS": "_sizeS_1lf70g_13",
+  "sizeM": "_sizeM_1lf70g_16",
+  "sizeL": "_sizeL_1lf70g_19",
+  "trigger": "_trigger_1lf70g_23",
+  "error": "_error_1lf70g_61",
+  "enabled": "_enabled_1lf70g_66",
+  "disabled": "_disabled_1lf70g_70",
+  "iconsWrapper": "_iconsWrapper_1lf70g_103",
+  "triggerText": "_triggerText_1lf70g_118",
+  "labelNotSelected": "_labelNotSelected_1lf70g_144",
+  "toggle": "_toggle_1lf70g_155",
+  "icon": "_icon_1lf70g_103"
+};
+export { styles as default };

package/lib/styles/native-select.p.module.css.js

@@ -0,0 +1,9 @@
+var styles = {
+  "sizeS": "_sizeS_19uvt4l_6",
+  "sizeM": "_sizeM_19uvt4l_9",
+  "sizeL": "_sizeL_19uvt4l_12",
+  "main": "_main_19uvt4l_16",
+  "wrapper": "_wrapper_19uvt4l_20",
+  "select": "_select_19uvt4l_24"
+};
+export { styles as default };

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

@@ -0,0 +1,10 @@
+var styles = {
+  "classic": "_classic_17wpqx_32",
+  "rock": "_rock_17wpqx_35",
+  "popover": "_popover_17wpqx_39",
+  "contentWrapper": "_contentWrapper_17wpqx_46",
+  "fadeInBottomToTop": "_fadeInBottomToTop_17wpqx_1",
+  "fadeInTopToBottom": "_fadeInTopToBottom_17wpqx_1",
+  "observable": "_observable_17wpqx_62"
+};
+export { styles as default };