@rescui/select 0.1.1

package/lib/parts/multiselect.js

@@ -0,0 +1,399 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["options", "size", "mode", "theme", "className", "defaultValue", "value", "onChange", "placeholder", "isSingleLine", "isClearable", "isLoading", "isDisabled", "noOptionsMessage", "placement"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useRef, useState, useReducer, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { CheckIcon } from '@rescui/icons';
+import Dropdown from '@rescui/dropdown';
+import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
+import { useTheme } from '@rescui/ui-contexts';
+import { convertToOptionGroupsIfNeeded, reverseTheme, getEmptyMessage, shouldOpenSelect, calculateMaxHeight } from '../utils.js';
+import { optionType, optionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
+import { multiselectReducer, getInitialState } from '../state/multiselect/reducer.js';
+import { setGroups, closeMenu, openMenu, setCursorIndex, cursorMovedDown, cursorMovedUp, clearSelectedAndCloseMenu } from '../state/select/actions.js';
+import { setSelectedValue, setHideSelected, addSelectedIndex, removeSelectedIndex, removeSelectedOption } from '../state/multiselect/actions.js';
+import { withoutGroupsLabel, OptionGroupTypes, getOptionValue, isIndexMatchCursor, getCursorIndex } from '../state/select/selectors.js';
+import { isEmpty, getSelectedArray, getPlainOptions, isSelected, getGroups } from '../state/multiselect/selectors.js';
+import { ESCAPE, BACKSPACE, ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB } from '../key-codes.js';
+import SelectTrigger from './trigger.js';
+import FormTriggerWrapper from './form-trigger-wrapper.js';
+import styles from './common-select.module.pcss.js';
+/* eslint-disable no-nested-ternary */
+// eslint-disable-next-line complexity
+
+var Option = function Option(_ref) {
+  var state = _ref.state,
+      size = _ref.size,
+      item = _ref.item,
+      isSingleLine = _ref.isSingleLine,
+      isLastItem = _ref.isLastItem,
+      highlightedItemRef = _ref.highlightedItemRef,
+      handleHighlightIndex = _ref.handleHighlightIndex,
+      toggleSelectIndex = _ref.toggleSelectIndex;
+  var marginInPx = withoutGroupsLabel(state) ? 0 : {
+    l: 12,
+    m: 6,
+    s: 0
+  }[size];
+
+  if (item.type === OptionGroupTypes.OPTION) {
+    var index = item.index,
+        label = item.label;
+    var value = getOptionValue(item);
+    var isItemSelected = isSelected(state, value);
+    var isHighlighted = isIndexMatchCursor(state, index);
+    var icon = isSingleLine && isItemSelected ? /*#__PURE__*/React.createElement(CheckIcon, {
+      size: size
+    }) : null;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      selected: isItemSelected,
+      highlighted: isHighlighted,
+      ref: isHighlighted ? highlightedItemRef : null,
+      onMouseMove: function onMouseMove() {
+        return handleHighlightIndex(index);
+      },
+      onClick: function onClick() {
+        return toggleSelectIndex(index);
+      },
+      style: {
+        marginBottom: isLastItem ? "".concat(marginInPx, "px") : ''
+      },
+      icon: icon
+    }, label);
+  }
+
+  if (item.type === OptionGroupTypes.DIVIDER) {
+    return /*#__PURE__*/React.createElement(Divider, {
+      style: {
+        marginTop: "".concat(marginInPx, "px")
+      }
+    });
+  }
+
+  if (item.type === OptionGroupTypes.HEADER) {
+    var _label = item.label;
+    return /*#__PURE__*/React.createElement(GroupHeader, {
+      text: _label
+    });
+  }
+
+  return null;
+};
+
+var getOptionKey = function getOptionKey(item, i) {
+  if (item.type === OptionGroupTypes.OPTION) {
+    var _context;
+
+    var value = getOptionValue(item);
+    return _concatInstanceProperty(_context = "".concat(value, "_")).call(_context, item.index[0]);
+  } else if (item.type === OptionGroupTypes.DIVIDER) {
+    return "divider".concat(i);
+  } else if (item.type === OptionGroupTypes.HEADER) {
+    return "header".concat(i);
+  }
+
+  return null;
+};
+
+function callOnChangeIfNeeded(onChange, state, action) {
+  if (onChange) {
+    onChange(getSelectedArray(multiselectReducer(state, action)));
+  }
+}
+
+var Multiselect = function Multiselect(_ref2) {
+  var _context2;
+
+  var options = _ref2.options,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'm' : _ref2$size,
+      _ref2$mode = _ref2.mode,
+      mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
+      themeFromProps = _ref2.theme,
+      _ref2$className = _ref2.className,
+      className = _ref2$className === void 0 ? null : _ref2$className,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? [] : _ref2$defaultValue,
+      _ref2$value = _ref2.value,
+      value = _ref2$value === void 0 ? undefined : _ref2$value,
+      onChange = _ref2.onChange,
+      _ref2$placeholder = _ref2.placeholder,
+      placeholder = _ref2$placeholder === void 0 ? 'Placeholder' : _ref2$placeholder,
+      _ref2$isSingleLine = _ref2.isSingleLine,
+      isSingleLine = _ref2$isSingleLine === void 0 ? false : _ref2$isSingleLine,
+      _ref2$isClearable = _ref2.isClearable,
+      isClearable = _ref2$isClearable === void 0 ? false : _ref2$isClearable,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$isDisabled = _ref2.isDisabled,
+      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+      noOptionsMessage = _ref2.noOptionsMessage,
+      _ref2$placement = _ref2.placement,
+      placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
+      restProps = _objectWithoutProperties(_ref2, _excluded);
+
+  var dropdownRef = useRef(null);
+  var highlightedItemRef = useRef();
+  var theme = useTheme(themeFromProps);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isKeyboardNavigating = _useState2[0],
+      setIsKeyboardNavigating = _useState2[1];
+
+  var skipScrollingRef = useRef(false);
+
+  var _useReducer = useReducer(multiselectReducer, getInitialState(convertToOptionGroupsIfNeeded(options), defaultValue, !isSingleLine)),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  useEffect(function () {
+    dispatch(setGroups(convertToOptionGroupsIfNeeded(options)));
+  }, [options]);
+  useEffect(function () {
+    if (value !== undefined) {
+      dispatch(setSelectedValue(value));
+    }
+  }, [value]);
+  useEffect(function () {
+    dispatch(setHideSelected(!isSingleLine));
+  }, [isSingleLine]);
+  var isEmptyList = isEmpty(state);
+  var menuIsOpen = state.menuIsOpen;
+
+  var toggleSelectIndex = function toggleSelectIndex(index) {
+    var selectedOption = getGroups(state)[index[0]].options[index[1]];
+    var optionAdded = !isSelected(state, getOptionValue(selectedOption));
+    var toggleSelectAction = optionAdded ? addSelectedIndex(index) : removeSelectedIndex(index);
+    dispatch(toggleSelectAction);
+    setIsKeyboardNavigating(false);
+    callOnChangeIfNeeded(onChange, state, toggleSelectAction);
+  };
+
+  useEffect(function () {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
+    }
+  }, [state.searchString, state.selected]);
+  var handleMouseMove = useCallback(function () {
+    return setIsKeyboardNavigating(false);
+  }, []);
+  useEffect(function () {
+    if (isKeyboardNavigating) {
+      document.addEventListener('mousemove', handleMouseMove);
+    }
+
+    return function () {
+      return document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [handleMouseMove, isKeyboardNavigating]);
+  useEffect(function () {
+    if (isKeyboardNavigating && highlightedItemRef.current) {
+      if (skipScrollingRef.current) {
+        skipScrollingRef.current = false;
+      } else {
+        var elementToScrollTo = highlightedItemRef.current;
+
+        if (state.cursorIndex[0] === 0 && state.cursorIndex[1] === 0) {
+          var groupHeader = highlightedItemRef.current.previousSibling;
+
+          if (groupHeader) {
+            elementToScrollTo = groupHeader;
+          }
+        }
+
+        scrollIntoView(elementToScrollTo, {
+          behavior: 'instant',
+          scrollMode: 'if-needed',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    }
+  }, [highlightedItemRef, state.cursorIndex, isKeyboardNavigating]);
+
+  var handleClose = function handleClose() {
+    dispatch(closeMenu());
+    setIsKeyboardNavigating(false);
+  }; // eslint-disable-next-line complexity
+
+
+  var handleKeyNavigation = function handleKeyNavigation(e) {
+    if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
+      var isDownDirection = e.key === ARROW_DOWN;
+      dispatch(isDownDirection ? cursorMovedDown() : cursorMovedUp());
+      setIsKeyboardNavigating(true);
+      e.preventDefault();
+    }
+
+    if (e.key === ENTER || e.key === SPACE) {
+      var cursorIndex = getCursorIndex(state);
+
+      if (cursorIndex !== null) {
+        toggleSelectIndex(cursorIndex);
+      } else {
+        handleClose();
+      }
+
+      e.preventDefault();
+    }
+
+    if (e.key === TAB) {
+      handleClose();
+    }
+  };
+
+  var handleClick = function handleClick() {
+    if (isDisabled) {
+      return;
+    }
+
+    var action = menuIsOpen ? closeMenu() : openMenu();
+    dispatch(action);
+  };
+
+  var handleClearClick = function handleClearClick() {
+    var action = clearSelectedAndCloseMenu();
+    dispatch(action);
+    callOnChangeIfNeeded(onChange, state, action);
+  }; // eslint-disable-next-line complexity
+
+
+  var handleTriggerKeyDown = function handleTriggerKeyDown(e) {
+    if (e.key === ESCAPE) {
+      handleClose();
+      e.preventDefault();
+    }
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (menuIsOpen) {
+      handleKeyNavigation(e);
+    } else {
+      var target = e.target;
+      var trigger = target.closest('[data-target="trigger"]');
+      var isTriggerTarget = trigger === target;
+
+      if (shouldOpenSelect(e.key, isTriggerTarget)) {
+        dispatch(openMenu());
+        setIsKeyboardNavigating(true);
+        skipScrollingRef.current = true;
+        trigger.focus();
+        e.preventDefault();
+      }
+
+      if (e.key === BACKSPACE && isClearable) {
+        handleClearClick();
+        trigger.focus();
+        e.preventDefault();
+      }
+    }
+  };
+
+  var handleUnselectClick = function handleUnselectClick(option) {
+    var action = removeSelectedOption(option);
+    dispatch(action);
+    callOnChangeIfNeeded(onChange, state, action);
+  };
+
+  var handleHighlightIndex = function handleHighlightIndex(index) {
+    if (!isIndexMatchCursor(state, index)) {
+      dispatch(setCursorIndex(index));
+    }
+  };
+
+  var maxHeight = calculateMaxHeight(size);
+  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,
+    trigger: function trigger(_ref3) {
+      var ref = _ref3.ref;
+      return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+        className: className,
+        theme: theme,
+        size: size,
+        error: restProps.error,
+        label: restProps.label,
+        note: restProps.note
+      }, /*#__PURE__*/React.createElement(SelectTrigger, {
+        theme: theme,
+        mode: mode,
+        size: size,
+        isOpen: menuIsOpen,
+        triggerRef: ref,
+        onKeyDown: handleTriggerKeyDown,
+        selected: value ? value : getSelectedArray(state),
+        placeholder: placeholder,
+        isClearable: isClearable,
+        isLoading: isLoading,
+        isDisabled: isDisabled,
+        isSingleLine: isSingleLine,
+        onClick: handleClick,
+        onClearClick: handleClearClick,
+        onItemClearClick: handleUnselectClick,
+        error: Boolean(restProps.error),
+        id: restProps.id,
+        "data-target": "trigger"
+      }));
+    },
+    isOpen: menuIsOpen
+  }, /*#__PURE__*/React.createElement(Menu, {
+    "data-test": "option-list",
+    size: size,
+    theme: mode === 'rock' ? reverseTheme(theme) : theme,
+    disableCursor: isKeyboardNavigating,
+    iconPlacement: 'right',
+    className: styles.menu
+  }, !isEmptyList ? _mapInstanceProperty(_context2 = getPlainOptions(state)).call(_context2, function (item, i, collection) {
+    return /*#__PURE__*/React.createElement(Option, {
+      key: getOptionKey(item, i),
+      state: state,
+      size: size,
+      item: item,
+      isSingleLine: isSingleLine,
+      isLastItem: i === collection.length - 1,
+      highlightedItemRef: highlightedItemRef,
+      toggleSelectIndex: toggleSelectIndex,
+      handleHighlightIndex: handleHighlightIndex
+    });
+  }) : /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true
+  }, getEmptyMessage(isLoading, false, noOptionsMessage))));
+};
+
+Multiselect.propTypes = {
+  className: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
+  defaultValue: PropTypes.arrayOf(optionType),
+  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: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  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'])
+};
+export default Multiselect;

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

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