@rescui/select 0.11.6 → 0.11.8

package/lib/parts/multiselect.js

@@ -1,24 +1,4 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["options", "size", "mode", "theme", "className", "value", "onChange", "placeholder", "isSingleLine", "isClearable", "isLoading", "isDisabled", "noOptionsMessage", "placement", "boldLabel"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.function.name.js";
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -35,37 +15,35 @@ import FormTriggerWrapper from './form-trigger-wrapper.js';
 import { useObservableForceRerender } from './use-observable-force-rerender.js';
 import styles from './common-select.p.module.css.js'; // eslint-disable-next-line complexity
 
-var Option = function Option(_ref) {
-  var selected = _ref.selected,
-      cursorIndex = _ref.cursorIndex,
-      item = _ref.item,
-      isSingleLine = _ref.isSingleLine,
-      isLastItem = _ref.isLastItem,
-      highlightedItemRef = _ref.highlightedItemRef,
-      handleHighlightIndex = _ref.handleHighlightIndex,
-      handleSelectIndex = _ref.handleSelectIndex;
+const Option = _ref => {
+  let {
+    selected,
+    cursorIndex,
+    item,
+    isSingleLine,
+    isLastItem,
+    highlightedItemRef,
+    handleHighlightIndex,
+    handleSelectIndex
+  } = _ref;
 
   if (item.type === OptionGroupTypes.OPTION) {
-    var index = item.index,
-        label = item.label;
-    var value = getOptionValue(item);
-    var isItemSelected = Boolean(selected && selected.length && selected.some(function (s) {
-      return value === getOptionValue(s);
-    }));
-    var isHighlighted = isIndexMatchCursor(cursorIndex, index);
-    var icon = isSingleLine && isItemSelected ? /*#__PURE__*/React.createElement(CheckIcon, {
+    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(CheckIcon, {
       className: styles.checkIcon
     }) : null;
     return /*#__PURE__*/React.createElement(MenuItem, {
       selected: isItemSelected,
       highlighted: isHighlighted,
       ref: isHighlighted ? highlightedItemRef : null,
-      onMouseMove: function onMouseMove() {
-        return handleHighlightIndex(index);
-      },
-      onClick: function onClick() {
-        return handleSelectIndex(index);
-      },
+      onMouseMove: () => handleHighlightIndex(index),
+      onClick: () => handleSelectIndex(index),
       className: cn(isLastItem && styles.lastOption),
       icon: icon
     }, label);
@@ -78,59 +56,57 @@ var Option = function Option(_ref) {
   }
 
   if (item.type === OptionGroupTypes.HEADER) {
-    var _label = item.label;
+    const {
+      label
+    } = item;
     return /*#__PURE__*/React.createElement(GroupHeader, {
-      text: _label
+      text: label
     });
   }
 
   return null;
 };
 
-var getOptionKey = function getOptionKey(item, i) {
+const getOptionKey = (item, i) => {
   if (item.type === OptionGroupTypes.OPTION) {
-    var _context;
-
-    var value = getOptionValue(item);
-    return _concatInstanceProperty(_context = "".concat(value, "_")).call(_context, item.index[0]);
+    const value = getOptionValue(item);
+    return `${value}_${item.index[0]}`;
   } else if (item.type === OptionGroupTypes.DIVIDER) {
-    return "divider".concat(i);
+    return `divider${i}`;
   } else if (item.type === OptionGroupTypes.HEADER) {
-    return "header".concat(i);
+    return `header${i}`;
   }
 
   return null;
 };
 
 function filterSelected(groups, selected) {
-  var selectedValues = {};
+  const selectedValues = {};
 
   if (selected) {
-    selected.forEach(function (s) {
+    selected.forEach(s => {
       selectedValues[getOptionValue(s)] = true;
     });
   }
 
-  return _mapInstanceProperty(groups).call(groups, function (g) {
-    var newOptions = [];
+  return groups.map(g => {
+    let newOptions = [];
 
     if (g.options) {
-      var _context2;
-
-      newOptions = _filterInstanceProperty(_context2 = g.options).call(_context2, function (opt) {
-        return !selectedValues[getOptionValue(opt)];
-      });
+      newOptions = g.options.filter(opt => !selectedValues[getOptionValue(opt)]);
     }
 
-    return _objectSpread(_objectSpread({}, g), {}, {
+    return { ...g,
       options: newOptions
-    });
+    };
   });
 }
 
-var NativeSelectedOptions = function NativeSelectedOptions(_ref2) {
-  var name = _ref2.name,
-      selected = _ref2.selected;
+const NativeSelectedOptions = _ref2 => {
+  let {
+    name,
+    selected
+  } = _ref2;
 
   if (!selected || !Array.isArray(selected) || !selected.length) {
     return /*#__PURE__*/React.createElement("input", {
@@ -140,8 +116,10 @@ var NativeSelectedOptions = function NativeSelectedOptions(_ref2) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(selected).call(selected, function (_ref3) {
-    var value = _ref3.value;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(_ref3 => {
+    let {
+      value
+    } = _ref3;
     return /*#__PURE__*/React.createElement("input", {
       key: value,
       type: "hidden",
@@ -151,101 +129,61 @@ var NativeSelectedOptions = function NativeSelectedOptions(_ref2) {
   }));
 };
 
-var SIZE_STYLES = {
+const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var MENU_SIZE_STYLES = {
+const MENU_SIZE_STYLES = {
   s: styles.menuSizeS,
   m: styles.menuSizeM,
   l: styles.menuSizeL
 }; // eslint-disable-next-line complexity
 
-var Multiselect = function Multiselect(_ref4) {
-  var _context5;
-
-  var options = _ref4.options,
-      _ref4$size = _ref4.size,
-      size = _ref4$size === void 0 ? 'm' : _ref4$size,
-      _ref4$mode = _ref4.mode,
-      mode = _ref4$mode === void 0 ? 'classic' : _ref4$mode,
-      themeFromProps = _ref4.theme,
-      _ref4$className = _ref4.className,
-      className = _ref4$className === void 0 ? null : _ref4$className,
-      _ref4$value = _ref4.value,
-      value = _ref4$value === void 0 ? undefined : _ref4$value,
-      onChange = _ref4.onChange,
-      placeholder = _ref4.placeholder,
-      _ref4$isSingleLine = _ref4.isSingleLine,
-      isSingleLine = _ref4$isSingleLine === void 0 ? false : _ref4$isSingleLine,
-      _ref4$isClearable = _ref4.isClearable,
-      isClearable = _ref4$isClearable === void 0 ? false : _ref4$isClearable,
-      _ref4$isLoading = _ref4.isLoading,
-      isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
-      _ref4$isDisabled = _ref4.isDisabled,
-      isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled,
-      noOptionsMessage = _ref4.noOptionsMessage,
-      _ref4$placement = _ref4.placement,
-      placement = _ref4$placement === void 0 ? 'bottom' : _ref4$placement,
-      boldLabel = _ref4.boldLabel,
-      restProps = _objectWithoutProperties(_ref4, _excluded);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      triggerFormWrapperRef = _useState2[0],
-      setTriggerFormWrapperRef = _useState2[1];
-
-  var dropdownRef = useRef(null);
-  var highlightedItemRef = useRef();
-  var theme = useThemeWithUndefined(themeFromProps);
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isKeyboardNavigating = _useState4[0],
-      setIsKeyboardNavigating = _useState4[1];
-
-  var skipScrollingRef = useRef(false);
-  var groups = useStrongMemo(function () {
-    return convertToOptionGroupsIfNeeded(options);
-  }, [options]);
-  var filteredGroups = useStrongMemo(function () {
+const Multiselect = _ref4 => {
+  let {
+    options,
+    size = 'm',
+    mode = 'classic',
+    theme: themeFromProps,
+    className = null,
+    value = undefined,
+    onChange,
+    placeholder,
+    isSingleLine = false,
+    isClearable = false,
+    isLoading = false,
+    isDisabled = false,
+    noOptionsMessage,
+    placement = 'bottom',
+    boldLabel,
+    ...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]);
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      menuIsOpen = _useState6[0],
-      setMenuIsOpen = _useState6[1];
-
-  var _useState7 = useState(function () {
-    return getDefaultCursorIndex(filteredGroups);
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      cursorIndex = _useState8[0],
-      setCursorIndex = _useState8[1];
-
-  useEffect(function () {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [cursorIndex, setCursorIndex] = useState(() => getDefaultCursorIndex(filteredGroups));
+  useEffect(() => {
     setCursorIndex(getDefaultCursorIndex(filteredGroups));
   }, [filteredGroups, value]);
-  var isEmptyMenu = useMemo(function () {
-    return isGroupsEmpty(filteredGroups);
-  }, [filteredGroups]);
-  var handleSelectIndex = useCallback(function (index) {
-    var _context3;
-
-    var selectedOption = filteredGroups[index[0]].options[index[1]];
-    var selectedOptionValue = getOptionValue(selectedOption);
-    var optionAdded = !value.some(function (option) {
-      return getOptionValue(option) === selectedOptionValue;
-    });
-    var newSelected = optionAdded ? _concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(value), [selectedOption]) : _filterInstanceProperty(value).call(value, function (option) {
-      return getOptionValue(option) !== selectedOptionValue;
-    });
+  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);
@@ -254,32 +192,28 @@ var Multiselect = function Multiselect(_ref4) {
     setMenuIsOpen(false);
     setIsKeyboardNavigating(false);
   }, [onChange, filteredGroups, value]);
-  useEffect(function () {
+  useEffect(() => {
     if (dropdownRef.current) {
       dropdownRef.current.scheduleUpdate();
     }
   }, [value]);
-  var handleMouseMove = useCallback(function () {
-    return setIsKeyboardNavigating(false);
-  }, []);
-  useEffect(function () {
+  const handleMouseMove = useCallback(() => setIsKeyboardNavigating(false), []);
+  useEffect(() => {
     if (isKeyboardNavigating) {
       document.addEventListener('mousemove', handleMouseMove);
     }
 
-    return function () {
-      return document.removeEventListener('mousemove', handleMouseMove);
-    };
+    return () => document.removeEventListener('mousemove', handleMouseMove);
   }, [handleMouseMove, isKeyboardNavigating]);
-  useEffect(function () {
+  useEffect(() => {
     if (isKeyboardNavigating && highlightedItemRef.current) {
       if (skipScrollingRef.current) {
         skipScrollingRef.current = false;
       } else {
-        var elementToScrollTo = highlightedItemRef.current;
+        let elementToScrollTo = highlightedItemRef.current;
 
         if (cursorIndex[0] === 0 && cursorIndex[1] === 0) {
-          var groupHeader = highlightedItemRef.current.previousSibling;
+          const groupHeader = highlightedItemRef.current.previousSibling;
 
           if (groupHeader) {
             elementToScrollTo = groupHeader;
@@ -295,14 +229,14 @@ var Multiselect = function Multiselect(_ref4) {
       }
     }
   }, [highlightedItemRef, cursorIndex, isKeyboardNavigating]);
-  var handleClose = useCallback(function () {
+  const handleClose = useCallback(() => {
     setMenuIsOpen(false);
     setIsKeyboardNavigating(false);
   }, []);
-  var handleKeyNavigation = useCallback( // eslint-disable-next-line complexity
-  function (e) {
+  const handleKeyNavigation = useCallback( // eslint-disable-next-line complexity
+  e => {
     if (e.key === ARROW_DOWN || e.key === ARROW_UP) {
-      var isDownDirection = e.key === ARROW_DOWN;
+      const isDownDirection = e.key === ARROW_DOWN;
       setCursorIndex(getMovedCursorIndex(filteredGroups, cursorIndex, isDownDirection));
       setIsKeyboardNavigating(true);
       e.preventDefault();
@@ -322,16 +256,14 @@ var Multiselect = function Multiselect(_ref4) {
       handleClose();
     }
   }, [filteredGroups, cursorIndex, handleClose, handleSelectIndex]);
-  var handleClick = useCallback(function () {
+  const handleClick = useCallback(() => {
     if (isDisabled) {
       return;
     }
 
-    setMenuIsOpen(function (currentMenuIsOpen) {
-      return !currentMenuIsOpen;
-    });
+    setMenuIsOpen(currentMenuIsOpen => !currentMenuIsOpen);
   }, [isDisabled]);
-  var handleClearClick = useCallback(function () {
+  const handleClearClick = useCallback(() => {
     setCursorIndex(getDefaultCursorIndex(groups));
     setMenuIsOpen(false);
 
@@ -340,7 +272,7 @@ var Multiselect = function Multiselect(_ref4) {
     }
   }, [groups, onChange]); // eslint-disable-next-line complexity
 
-  var handleTriggerKeyDown = useCallback(function (e) {
+  const handleTriggerKeyDown = useCallback(e => {
     if (e.key === ESCAPE) {
       handleClose();
       e.preventDefault();
@@ -353,9 +285,9 @@ var Multiselect = function Multiselect(_ref4) {
     if (menuIsOpen) {
       handleKeyNavigation(e);
     } else {
-      var target = e.target;
-      var trigger = target.closest('[data-target="trigger"]');
-      var isTriggerTarget = trigger === target;
+      const target = e.target;
+      const trigger = target.closest('[data-target="trigger"]');
+      const isTriggerTarget = trigger === target;
 
       if (shouldOpenSelect(e.key, isTriggerTarget)) {
         setMenuIsOpen(true);
@@ -372,28 +304,25 @@ var Multiselect = function Multiselect(_ref4) {
       }
     }
   }, [handleClearClick, handleClose, handleKeyNavigation, isClearable, isDisabled, menuIsOpen]);
-  var handleUnselectClick = useCallback(function (unselectedOption) {
-    var unselectedOptionValue = getOptionValue(unselectedOption);
-
-    var newSelected = _filterInstanceProperty(value).call(value, function (option) {
-      return getOptionValue(option) !== unselectedOptionValue;
-    });
+  const handleUnselectClick = useCallback(unselectedOption => {
+    const unselectedOptionValue = getOptionValue(unselectedOption);
+    const newSelected = value.filter(option => getOptionValue(option) !== unselectedOptionValue);
 
     if (onChange) {
       onChange(newSelected);
     }
   }, [onChange, value]);
-  var handleHighlightIndex = useCallback(function (index) {
+  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
 
-  var observableRef = useObservableForceRerender();
-  var sizeFromCss = null;
+  const observableRef = useObservableForceRerender();
+  let sizeFromCss = null;
 
   if (triggerFormWrapperRef && menuIsOpen) {
-    var _context4;
+    var _context;
 
     // In theory this part of the code might cause issues with SSR.
     // But in this specific context, because of checking ref "triggerFormWrapperRef",
@@ -402,14 +331,14 @@ var Multiselect = function Multiselect(_ref4) {
     // 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).
-    var triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
-    var rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
-    sizeFromCss = _includesInstanceProperty(_context4 = ['s', 'm', 'l']).call(_context4, rawSizeFromCss) ? rawSizeFromCss : null;
+    const triggerFormWrapperStyles = getComputedStyle(triggerFormWrapperRef);
+    const rawSizeFromCss = triggerFormWrapperStyles.getPropertyValue('--_rs-select-size');
+    sizeFromCss = _includesInstanceProperty(_context = ['s', 'm', 'l']).call(_context, rawSizeFromCss) ? rawSizeFromCss : null;
   }
 
-  var actualSize = sizeFromCss || size;
-  var maxHeight = calculateMaxHeight(actualSize);
-  var withGroupsLabel = !withoutGroupsLabel(filteredGroups);
+  const actualSize = sizeFromCss || size;
+  const maxHeight = calculateMaxHeight(actualSize);
+  const withGroupsLabel = !withoutGroupsLabel(filteredGroups);
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
     onRequestClose: handleClose,
@@ -422,8 +351,10 @@ var Multiselect = function Multiselect(_ref4) {
     maxHeight: maxHeight,
     leastMaxHeight: maxHeight,
     disableFocusLock: true,
-    trigger: function trigger(_ref5) {
-      var ref = _ref5.ref;
+    trigger: _ref5 => {
+      let {
+        ref
+      } = _ref5;
       return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
         ref: setTriggerFormWrapperRef,
         className: cn(className, SIZE_STYLES[size]),
@@ -468,19 +399,17 @@ var Multiselect = function Multiselect(_ref4) {
     disableCursor: isKeyboardNavigating,
     iconPlacement: 'right',
     enableKeyboardNavigation: false
-  }, !isEmptyMenu ? _mapInstanceProperty(_context5 = getPlainOptionsFromGroups(filteredGroups)).call(_context5, function (item, i, collection) {
-    return /*#__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, {
+  }, !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))));
 };