@rescui/select 0.1.1

package/lib/select.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import type { SelectOption, NoOptionsMessage, SelectOptionOrGroup, SelectSize, SelectMode } from './types';
+export interface CustomTriggerOptions {
+    selectedLabel?: string;
+    selectedValue: string;
+    placeholder?: string;
+    hovered: boolean;
+}
+export interface SelectProps {
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Array of options or option groups
+     */
+    options: SelectOptionOrGroup[];
+    /**
+     * Default value for select state
+     */
+    defaultValue?: SelectOption;
+    /**
+     * Is select supports clear the value
+     */
+    isClearable?: boolean;
+    /**
+     * Is select supports inplace filtering
+     */
+    isSearchable?: boolean;
+    /**
+     * Is select has been disabled
+     */
+    isDisabled?: boolean;
+    /**
+     *  Is loader displayed inside select
+     */
+    isLoading?: boolean;
+    /**
+     * Input name attribute
+     */
+    placeholder?: string;
+    /**
+     * Size
+     */
+    size?: SelectSize;
+    /**
+     * Appearance mode
+     */
+    mode?: SelectMode;
+    /**
+     * Appearance theme
+     */
+    theme?: Theme;
+    /**
+     * Value of the select
+     */
+    value?: SelectOption;
+    /**
+     * Change value callback. `value => ...`
+     */
+    onChange?: (newValue: SelectOption) => void;
+    /**
+     * Error state flag or React.ReactNode (use with forms)
+     */
+    error?: boolean | React.ReactNode;
+    /**
+     * Label element upper then Select element (use with forms)
+     */
+    label?: React.ReactNode;
+    /**
+     * Placement of dropdown element
+     */
+    placement?: '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';
+    /**
+     * Note element below then Select element (use with forms)
+     */
+    note?: React.ReactNode;
+    id?: string;
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsMessage?: NoOptionsMessage;
+}
+declare const Select: React.FC<SelectProps>;
+export default Select;

package/lib/select.js

@@ -0,0 +1,391 @@
+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", "isClearable", "isLoading", "isDisabled", "isSearchable", "noOptionsMessage", "placement"];
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.regexp.constructor.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.to-string.js";
+import React, { useRef, useState, useReducer, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import Dropdown from '@rescui/dropdown';
+import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
+import { useTheme } from '@rescui/ui-contexts';
+import SelectTrigger from './parts/trigger.js';
+import FormTriggerWrapper from './parts/form-trigger-wrapper.js';
+import { optionType, optionsGroupType, noOptionsMessageConfigType } from './common-prop-types.js';
+import { selectReducer, getInitialState } from './state/select/reducer.js';
+import { setGroups, setSelectedValue, setSelectedIndex, closeMenu, setSearchString, clearSelectedAndCloseMenu, openMenu, setCursorIndex, cursorMovedDown, cursorMovedUp } from './state/select/actions.js';
+import { getSelected, isEmpty, getPlainOptions, withoutGroupsLabel, OptionGroupTypes, getOptionValue, getSelectedValue, isIndexMatchCursor, getGroups, getCursorIndex } from './state/select/selectors.js';
+import { convertToOptionGroupsIfNeeded, reverseTheme, getEmptyMessage, escapeRegex, shouldOpenSelect, calculateMaxHeight } from './utils.js';
+import { ESCAPE, BACKSPACE, ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB } from './key-codes.js';
+import styles from './parts/common-select.module.pcss.js'; // eslint-disable-next-line complexity
+
+var Option = function Option(_ref) {
+  var state = _ref.state,
+      size = _ref.size,
+      item = _ref.item,
+      isLastItem = _ref.isLastItem,
+      highlightedItemRef = _ref.highlightedItemRef,
+      handleSelectIndex = _ref.handleSelectIndex,
+      handleHighlightIndex = _ref.handleHighlightIndex;
+  var marginInPx = withoutGroupsLabel(state) ? 0 : {
+    l: 12,
+    m: 6,
+    s: 0
+  }[size];
+
+  if (item.type === OptionGroupTypes.OPTION) {
+    var _context;
+
+    var index = item.index,
+        label = item.label;
+    var value = getOptionValue(item);
+    var isSelected = value === getSelectedValue(state);
+    var isHighlighted = isIndexMatchCursor(state, index);
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      selected: isSelected,
+      highlighted: isHighlighted,
+      ref: isHighlighted ? highlightedItemRef : null,
+      onMouseMove: function onMouseMove() {
+        return handleHighlightIndex(index);
+      },
+      onClick: function onClick() {
+        return handleSelectIndex(index);
+      },
+      style: {
+        marginBottom: isLastItem ? "".concat(marginInPx, "px") : ''
+      },
+      "data-test": _filterInstanceProperty(_context = ['select-menu-item', isHighlighted && 'select-menu-item-highlighted', isSelected && 'select-menu-item-selected']).call(_context, Boolean).join(' ')
+    }, 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 _context2;
+
+    var value = getOptionValue(item);
+    return _concatInstanceProperty(_context2 = "".concat(value, "_")).call(_context2, 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;
+}; // eslint-disable-next-line complexity
+
+
+var Select = function Select(_ref2) {
+  var _context3;
+
+  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 ? null : _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$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,
+      _ref2$isSearchable = _ref2.isSearchable,
+      isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
+      noOptionsMessage = _ref2.noOptionsMessage,
+      _ref2$placement = _ref2.placement,
+      placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
+      restProps = _objectWithoutProperties(_ref2, _excluded);
+
+  var theme = useTheme(themeFromProps);
+  var dropdownRef = useRef(null);
+  var highlightedItemRef = /*#__PURE__*/React.createRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isKeyboardNavigating = _useState2[0],
+      setIsKeyboardNavigating = _useState2[1];
+
+  var skipScrollingRef = useRef(false);
+
+  var _useReducer = useReducer(selectReducer, getInitialState(convertToOptionGroupsIfNeeded(options), defaultValue)),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  useEffect(function () {
+    dispatch(setGroups(convertToOptionGroupsIfNeeded(options)));
+  }, [options]);
+  useEffect(function () {
+    dispatch(setSelectedValue(value));
+  }, [value]);
+  var selected = value ? value : getSelected(state);
+  var isEmptyMenu = isEmpty(state);
+  var menuIsOpen = state.menuIsOpen;
+
+  var handleSelectIndex = function handleSelectIndex(index) {
+    var selectedOption = getGroups(state)[index[0]].options[index[1]];
+    dispatch(setSelectedIndex(index));
+    setIsKeyboardNavigating(false);
+
+    if (onChange) {
+      onChange(selectedOption);
+    }
+  };
+
+  useEffect(function () {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
+    }
+  }, [state.searchString]);
+  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 || !isSearchable && e.key === SPACE) {
+      var cursorIndex = getCursorIndex(state);
+
+      if (cursorIndex !== null) {
+        handleSelectIndex(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 handleSearchInputChange = function handleSearchInputChange(searchValue) {
+    var filter = new RegExp("(?:^|\\s)".concat(escapeRegex(searchValue)), 'i');
+    dispatch(setSearchString(searchValue, function (_ref3) {
+      var label = _ref3.label;
+      return filter.test(label);
+    }));
+  };
+
+  var handleClearClick = function handleClearClick() {
+    dispatch(clearSelectedAndCloseMenu());
+
+    if (onChange) {
+      onChange(null);
+    }
+  }; // 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 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(_ref4) {
+      var ref = _ref4.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: selected,
+        placeholder: placeholder,
+        isClearable: isClearable,
+        isLoading: isLoading,
+        isDisabled: isDisabled,
+        searchInput: state.searchString,
+        isSearchable: isSearchable,
+        onSearchChange: handleSearchInputChange,
+        onClick: handleClick,
+        onClearClick: handleClearClick,
+        error: Boolean(restProps.error),
+        id: restProps.id,
+        "data-target": "trigger"
+      }));
+    },
+    isOpen: menuIsOpen
+  }, /*#__PURE__*/React.createElement(Menu, {
+    size: size,
+    theme: mode === 'rock' ? reverseTheme(theme) : theme,
+    disableCursor: isKeyboardNavigating,
+    className: styles.menu
+  }, !isEmptyMenu ? _mapInstanceProperty(_context3 = getPlainOptions(state)).call(_context3, function (item, i, collection) {
+    return /*#__PURE__*/React.createElement(Option, {
+      item: item,
+      isLastItem: i === collection.length - 1,
+      key: getOptionKey(item, i),
+      state: state,
+      size: size,
+      highlightedItemRef: highlightedItemRef,
+      handleSelectIndex: handleSelectIndex,
+      handleHighlightIndex: handleHighlightIndex
+    });
+  }) : /*#__PURE__*/React.createElement(MenuItem, {
+    disabled: true
+  }, getEmptyMessage(isLoading, isSearchable && state.searchString.length > 0, noOptionsMessage))));
+};
+
+Select.propTypes = {
+  className: PropTypes.string,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(optionType), PropTypes.arrayOf(optionsGroupType)]),
+  defaultValue: optionType,
+  value: optionType,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['l', 'm', 's']),
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  placeholder: PropTypes.string,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  label: PropTypes.node,
+  id: PropTypes.string,
+  note: PropTypes.node,
+  noOptionsMessage: PropTypes.oneOfType([PropTypes.string, noOptionsMessageConfigType]),
+  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 Select;

package/lib/state/multiselect/actions.d.ts

@@ -0,0 +1,36 @@
+import { Index, SelectOption } from '../../types';
+export declare function addSelectedIndex(index: Index): {
+    type: string;
+    index: Index;
+};
+export declare namespace addSelectedIndex {
+    var type: string;
+}
+export declare function removeSelectedIndex(index: Index): {
+    type: string;
+    index: Index;
+};
+export declare namespace removeSelectedIndex {
+    var type: string;
+}
+export declare function setHideSelected(hideSelected: boolean): {
+    type: string;
+    hideSelected: boolean;
+};
+export declare namespace setHideSelected {
+    var type: string;
+}
+export declare function removeSelectedOption(unselectedOption: SelectOption): {
+    type: string;
+    unselectedOption: SelectOption;
+};
+export declare namespace removeSelectedOption {
+    var type: string;
+}
+export declare function setSelectedValue(selected: SelectOption[]): {
+    type: string;
+    selected: SelectOption[];
+};
+export declare namespace setSelectedValue {
+    var type: string;
+}

package/lib/state/multiselect/actions.js

@@ -0,0 +1,45 @@
+function addSelectedIndex(index) {
+  return {
+    type: addSelectedIndex.type,
+    index: index
+  };
+}
+
+addSelectedIndex.type = 'ADD_SELECTED_BY_INDEX';
+
+function removeSelectedIndex(index) {
+  return {
+    type: removeSelectedIndex.type,
+    index: index
+  };
+}
+
+removeSelectedIndex.type = 'REMOVE_SELECTED_BY_INDEX';
+
+function setHideSelected(hideSelected) {
+  return {
+    type: setHideSelected.type,
+    hideSelected: hideSelected
+  };
+}
+
+setHideSelected.type = 'SET_HIDE_SELECTED';
+
+function removeSelectedOption(unselectedOption) {
+  return {
+    type: removeSelectedOption.type,
+    unselectedOption: unselectedOption
+  };
+}
+
+removeSelectedOption.type = 'REMOVE_SELECTED_OPTION';
+
+function setSelectedValue(selected) {
+  return {
+    type: setSelectedValue.type,
+    selected: selected
+  };
+}
+
+setSelectedValue.type = 'SET_SELECTED_VALUE';
+export { addSelectedIndex, removeSelectedIndex, removeSelectedOption, setHideSelected, setSelectedValue };

package/lib/state/multiselect/reducer.d.ts

@@ -0,0 +1,21 @@
+import type { SelectOption, State, Index, Groups, Action } from '../../types';
+export declare function getInitialState(groups: Groups, defaultSelected?: SelectOption[], hideSelected?: boolean): State;
+export declare function multiselectReducer(state: State, action: Action): {
+    cursorIndex: any;
+    groups: Groups;
+    menuIsOpen: boolean;
+    selected: SelectOption | SelectOption[];
+    searchString: string;
+    filteredGroups: Groups;
+    hideSelected?: boolean;
+    groupsWithoutSelected?: Groups;
+} | {
+    selected: any;
+    groups: Groups;
+    menuIsOpen: boolean;
+    searchString: string;
+    filteredGroups: Groups;
+    cursorIndex: Index;
+    hideSelected?: boolean;
+    groupsWithoutSelected?: Groups;
+};