@rescui/select 0.15.1 → 0.16.0

package/lib/select.js

@@ -1,103 +1,36 @@
 "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 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 cn from 'classnames';
 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;
+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
 };
-
 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 MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
 
-const Select = _ref2 => {
+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 +42,45 @@ const Select = _ref2 => {
     placement = 'bottom',
     boldLabel = true,
     reserveErrorLine = false,
+    note,
+    maxVisibleItems = 5,
+    id,
     ...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, {
+  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,
     theme: theme,
-    onRequestClose: handleClose,
+    className: className,
+    id: id,
+    style: style,
+    value: value,
+    onChange: onChange,
+    placeholder: placeholder,
+    isClearable: isClearable,
+    isLoading: isLoading,
+    isDisabled: isDisabled,
+    noOptionsMessage: noOptionsMessage,
+    error: error,
     placement: placement,
-    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))));
+    boldLabel: boldLabel,
+    reserveErrorLine: reserveErrorLine,
+    note: note,
+    maxVisibleItems: maxVisibleItems
+  }));
 };
 
 Select.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   options: PropTypes.oneOfType([PropTypes.arrayOf(optionType), PropTypes.arrayOf(optionsGroupType)]),
   value: optionType,
   onChange: PropTypes.func,
@@ -396,8 +96,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,32 @@
+var styles = {
+  "themeLight": "_themeLight_dcuztf_6",
+  "themeDark": "_themeDark_dcuztf_9",
+  "sizeS": "_sizeS_dcuztf_13",
+  "sizeM": "_sizeM_dcuztf_16",
+  "sizeL": "_sizeL_dcuztf_19",
+  "classic": "_classic_dcuztf_23",
+  "rock": "_rock_dcuztf_26",
+  "root": "_root_dcuztf_30",
+  "triggerContainer": "_triggerContainer_dcuztf_36",
+  "disabled": "_disabled_dcuztf_41",
+  "trigger": "_trigger_dcuztf_36",
+  "error": "_error_dcuztf_78",
+  "enabled": "_enabled_dcuztf_83",
+  "searchable": "_searchable_dcuztf_98",
+  "canBeMultiline": "_canBeMultiline_dcuztf_125",
+  "triggerText": "_triggerText_dcuztf_129",
+  "searchInput": "_searchInput_dcuztf_130",
+  "labelNotSelected": "_labelNotSelected_dcuztf_161",
+  "multi": "_multi_dcuztf_217",
+  "tagsContainer": "_tagsContainer_dcuztf_234",
+  "tag": "_tag_dcuztf_234",
+  "filledTag": "_filledTag_dcuztf_256",
+  "iconsWrapper": "_iconsWrapper_dcuztf_264",
+  "toggle": "_toggle_dcuztf_282",
+  "icon": "_icon_dcuztf_264",
+  "clearIcon": "_clearIcon_dcuztf_356",
+  "visuallyHidden": "_visuallyHidden_dcuztf_416",
+  "select": "_select_dcuztf_433",
+  "observable": "_observable_dcuztf_455"
+};
+export { styles as default };

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

@@ -0,0 +1,15 @@
+var styles = {
+  "themeLight": "_themeLight_11y6l6t_6",
+  "themeDark": "_themeDark_11y6l6t_9",
+  "sizeS": "_sizeS_11y6l6t_13",
+  "sizeM": "_sizeM_11y6l6t_16",
+  "sizeL": "_sizeL_11y6l6t_19",
+  "main": "_main_11y6l6t_23",
+  "label": "_label_11y6l6t_27",
+  "disabled": "_disabled_11y6l6t_33",
+  "footer": "_footer_11y6l6t_38",
+  "errorMessage": "_errorMessage_11y6l6t_45",
+  "error": "_error_11y6l6t_45",
+  "note": "_note_11y6l6t_54"
+};
+export { styles as default };

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

@@ -0,0 +1,16 @@
+var styles = {
+  "sizeS": "_sizeS_7r600n_6",
+  "sizeM": "_sizeM_7r600n_9",
+  "sizeL": "_sizeL_7r600n_12",
+  "classic": "_classic_7r600n_16",
+  "rock": "_rock_7r600n_19",
+  "listBox": "_listBox_7r600n_23",
+  "item": "_item_7r600n_39",
+  "selected": "_selected_7r600n_77",
+  "disabled": "_disabled_7r600n_91",
+  "checkIcon": "_checkIcon_7r600n_98",
+  "visible": "_visible_7r600n_105",
+  "divider": "_divider_7r600n_112",
+  "groupHeader": "_groupHeader_7r600n_126"
+};
+export { styles as default };