@activecollab/components 1.0.415 → 2.0.1

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -1,61 +1,63 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _styled from "styled-components";
-import React, { useCallback, useState, useMemo, useEffect, useRef } from "react";
-import { Scrollbars } from "react-custom-scrollbars-2";
-import highlightText from "../../hooks/useHighlightText";
-import { handleKeyboardMovement } from "./HandleKeyboard";
-import { Option } from "../Select/Option";
-import { OptionGroup } from "../Select/OptionGroup";
-import { StyledAutocompleteBody, StyledAutocompleteNewItem, StyledAutocompleteScrollShadow } from "./Styles";
-import { StyledOption } from "../Select/Option/Styles";
-export function isOptionGroup(item) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Autocomplete = void 0;
+exports.isOptionGroup = isOptionGroup;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactCustomScrollbars = require("react-custom-scrollbars-2");
+var _useHighlightText = _interopRequireDefault(require("../../hooks/useHighlightText"));
+var _HandleKeyboard = require("./HandleKeyboard");
+var _Option = require("../Select/Option");
+var _OptionGroup = require("../Select/OptionGroup");
+var _Styles = require("./Styles");
+var _Styles2 = require("../Select/Option/Styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function isOptionGroup(item) {
   return item.options !== undefined;
 }
-export var Autocomplete = function Autocomplete(_ref) {
-  var type = _ref.type,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options,
-    inputEl = _ref.inputEl,
-    _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? [] : _ref$selected,
-    emptyValue = _ref.emptyValue,
-    noResultText = _ref.noResultText,
-    _ref$renderOption = _ref.renderOption,
-    renderOption = _ref$renderOption === void 0 ? function (option) {
-      return option == null ? void 0 : option.name;
-    } : _ref$renderOption,
-    defaultValue = _ref.defaultValue,
-    _ref$sortDirection = _ref.sortDirection,
-    sortDirection = _ref$sortDirection === void 0 ? "asc" : _ref$sortDirection,
-    handleChange = _ref.handleChange,
-    optionClassName = _ref.optionClassName,
-    handleEmptyAction = _ref.handleEmptyAction,
-    disabledInternalSort = _ref.disabledInternalSort,
-    AutocompleteClassName = _ref.AutocompleteClassName,
-    handleDefaultOptionChange = _ref.handleDefaultOptionChange,
-    preselectDefaultValue = _ref.preselectDefaultValue,
-    _ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
-    keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? false : _ref$keepSameOptionsO,
-    _ref$autoHeightMax = _ref.autoHeightMax,
-    autoHeightMax = _ref$autoHeightMax === void 0 ? 340 : _ref$autoHeightMax,
-    clearInputOnSelect = _ref.clearInputOnSelect;
-  var itemRef = useRef(null);
-  var listRef = useRef(null);
-  var selectedOptions = useMemo(function () {
+const Autocomplete = _ref => {
+  let {
+    type,
+    options = [],
+    inputEl,
+    selected = [],
+    emptyValue,
+    noResultText,
+    renderOption = option => option?.name,
+    defaultValue,
+    sortDirection = "asc",
+    handleChange,
+    optionClassName,
+    handleEmptyAction,
+    disabledInternalSort,
+    AutocompleteClassName,
+    handleDefaultOptionChange,
+    preselectDefaultValue,
+    keepSameOptionsOrder = false,
+    autoHeightMax = 340,
+    clearInputOnSelect
+  } = _ref;
+  const itemRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
+  const selectedOptions = (0, _react.useMemo)(() => {
     if (Array.isArray(selected)) {
       return selected;
     }
     return [selected];
   }, [selected]);
-  var handleSort = useCallback(function (opts) {
-    var _opts$;
+  const handleSort = (0, _react.useCallback)(opts => {
     if (keepSameOptionsOrder) {
       return opts;
     }
-    var isGrouped = Array.isArray((_opts$ = opts[0]) == null ? void 0 : _opts$.options);
+    const isGrouped = Array.isArray(opts[0]?.options);
     if (isGrouped) {
-      return opts.map(function (group) {
-        var sortedGroupOptions = group.options.sort(function (a, b) {
+      return opts.map(group => {
+        const sortedGroupOptions = group.options.sort((a, b) => {
           if (selectedOptions.includes(b.id) && !selectedOptions.includes(a.id)) {
             return 1;
           }
@@ -64,12 +66,13 @@ export var Autocomplete = function Autocomplete(_ref) {
           }
           return 0;
         });
-        return _extends({}, group, {
+        return {
+          ...group,
           options: sortedGroupOptions
-        });
+        };
       });
     } else {
-      return opts.sort(function (a, b) {
+      return opts.sort((a, b) => {
         if (selectedOptions.includes(b.id) && !selectedOptions.includes(a.id)) {
           return 1;
         }
@@ -81,70 +84,55 @@ export var Autocomplete = function Autocomplete(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var sortList = useCallback(function (options) {
-    var _options$;
+  const sortList = (0, _react.useCallback)(options => {
     if (disabledInternalSort) {
-      return handleSort([].concat(options));
+      return handleSort([...options]);
     }
-    var isGrouped = Array.isArray((_options$ = options[0]) == null ? void 0 : _options$.options);
+    const isGrouped = Array.isArray(options[0]?.options);
     if (isGrouped) {
-      var sortedOptions = options.map(function (group) {
-        var sortedGroupOptions = group.options.sort(function (a, b) {
-          return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
-        });
-        return _extends({}, group, {
+      const sortedOptions = options.map(group => {
+        const sortedGroupOptions = group.options.sort((a, b) => sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name));
+        return {
+          ...group,
           options: handleSort(sortedGroupOptions)
-        });
+        };
       });
       return handleSort(sortedOptions);
     } else {
-      var _sortedOptions = options.sort(function (a, b) {
-        return sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
-      });
-      return handleSort(_sortedOptions);
+      const sortedOptions = options.sort((a, b) => sortDirection === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name));
+      return handleSort(sortedOptions);
     }
   }, [sortDirection, disabledInternalSort, handleSort]);
-  var sortedList = useMemo(function () {
-    return sortList(options);
-  }, [options, sortList]);
-  var _useState = useState({
-      item: undefined,
-      by: undefined
-    }),
-    hover = _useState[0],
-    setHover = _useState[1];
-  var _useState2 = useState(""),
-    filter = _useState2[0],
-    setFilter = _useState2[1];
-  var handleEmpty = useCallback(function (e) {
+  const sortedList = (0, _react.useMemo)(() => sortList(options), [options, sortList]);
+  const [hover, setHover] = (0, _react.useState)({
+    item: undefined,
+    by: undefined
+  });
+  const [filter, setFilter] = (0, _react.useState)("");
+  const handleEmpty = (0, _react.useCallback)(e => {
     if (e && e.button !== 0) {
       return;
     }
     if (handleEmptyAction) {
-      var _inputEl$current;
-      inputEl == null ? void 0 : (_inputEl$current = inputEl.current) == null ? void 0 : _inputEl$current.focus();
+      inputEl?.current?.focus();
       setFilter("");
       handleEmptyAction(filter);
     }
   }, [filter, handleEmptyAction, inputEl]);
-  var onAddNewMouseEnter = useCallback(function () {
-    return setHover({
-      item: "addNew",
-      by: "mouse"
-    });
-  }, []);
-  var showAddNew = useMemo(function () {
-    return !!(emptyValue && filter.trim() && options.every(function (option) {
+  const onAddNewMouseEnter = (0, _react.useCallback)(() => setHover({
+    item: "addNew",
+    by: "mouse"
+  }), []);
+  const showAddNew = (0, _react.useMemo)(() => {
+    return !!(emptyValue && filter.trim() && options.every(option => {
       if (isOptionGroup(option)) {
-        return option.options.every(function (v) {
-          return v.name.toLowerCase() !== filter.trim().toLowerCase();
-        });
+        return option.options.every(v => v.name.toLowerCase() !== filter.trim().toLowerCase());
       }
       return option.name.toLowerCase() !== filter.trim().toLowerCase();
     }));
   }, [emptyValue, filter, options]);
-  var renderAddNew = useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledAutocompleteNewItem, {
+  const renderAddNew = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/_react.default.createElement(_Styles.StyledAutocompleteNewItem, {
       ref: hover.item === "addNew" ? itemRef : null,
       key: "emptyValue",
       hover: hover.item === "addNew",
@@ -152,15 +140,13 @@ export var Autocomplete = function Autocomplete(_ref) {
       onMouseEnter: onAddNewMouseEnter
     }, emptyValue);
   }, [emptyValue, handleEmpty, hover, onAddNewMouseEnter]);
-  var filterOptions = useCallback(function (options, filter) {
-    var trimmedFilter = filter.trim();
-    var isGrouped = options[0] && isOptionGroup(options[0]);
+  const filterOptions = (0, _react.useCallback)((options, filter) => {
+    const trimmedFilter = filter.trim();
+    const isGrouped = options[0] && isOptionGroup(options[0]);
     if (isGrouped) {
-      var hovered = false;
-      return options.reduce(function (acc, groupedOption) {
-        var filteredOptions = groupedOption.options.filter(function (v) {
-          return v.name.toLowerCase().includes(trimmedFilter.toLowerCase());
-        });
+      let hovered = false;
+      return options.reduce((acc, groupedOption) => {
+        const filteredOptions = groupedOption.options.filter(v => v.name.toLowerCase().includes(trimmedFilter.toLowerCase()));
         if (filteredOptions.length > 0) {
           if (!hovered && filter) {
             setHover({
@@ -169,16 +155,15 @@ export var Autocomplete = function Autocomplete(_ref) {
             });
           }
           hovered = true;
-          return [].concat(acc, [_extends({}, groupedOption, {
+          return [...acc, {
+            ...groupedOption,
             options: filteredOptions
-          })]);
+          }];
         }
-        return [].concat(acc);
+        return [...acc];
       }, []);
     } else {
-      var filteredOptions = options.filter(function (v) {
-        return v.name.toLowerCase().includes(trimmedFilter.toLowerCase());
-      });
+      const filteredOptions = options.filter(v => v.name.toLowerCase().includes(trimmedFilter.toLowerCase()));
       if (filter && filteredOptions.length > 0) {
         setHover({
           item: filteredOptions[0].id,
@@ -194,47 +179,41 @@ export var Autocomplete = function Autocomplete(_ref) {
       return filteredOptions;
     }
   }, [emptyValue]);
-  var list = useMemo(function () {
-    return filterOptions(sortedList, filter);
-  }, [filter, filterOptions, sortedList]);
-  var showDefaultOption = useMemo(function () {
-    return !!defaultValue && !filter;
-  }, [defaultValue, filter]);
-  var flatOptions = useMemo(function () {
-    var options = list.reduce(function (acc, option) {
+  const list = (0, _react.useMemo)(() => filterOptions(sortedList, filter), [filter, filterOptions, sortedList]);
+  const showDefaultOption = (0, _react.useMemo)(() => !!defaultValue && !filter, [defaultValue, filter]);
+  const flatOptions = (0, _react.useMemo)(() => {
+    const options = list.reduce((acc, option) => {
       if (!isOptionGroup(option)) {
-        return [].concat(acc, [option]);
+        return [...acc, option];
       }
-      return [].concat(acc, option.options);
+      return [...acc, ...option.options];
     }, []);
     return filterOptions(options, filter);
   }, [filter, filterOptions, list]);
-  var handleInputChange = useCallback(function (e) {
+  const handleInputChange = (0, _react.useCallback)(e => {
     if (e.target && !(e.key === "ArrowDown") && !(e.key === "ArrowUp") && !(e.key === "Enter")) {
       setFilter(e.target.value);
     }
   }, []);
-  var handleHoverCallback = useCallback(function (e) {
+  const handleHoverCallback = (0, _react.useCallback)(e => {
     setHover({
       item: e,
       by: "mouse"
     });
   }, []);
-  var toggleSelected = useCallback(function (id) {
-    var result;
+  const toggleSelected = (0, _react.useCallback)(id => {
+    let result;
     if (id !== null) {
       if (type === "multiple") {
         if (selectedOptions.includes(id)) {
-          result = selectedOptions.filter(function (_id) {
-            return _id !== id;
-          });
+          result = selectedOptions.filter(_id => _id !== id);
         } else {
-          result = [].concat(selectedOptions, [id]);
+          result = [...selectedOptions, id];
         }
       } else {
         result = id;
       }
-      if (clearInputOnSelect && inputEl != null && inputEl.current) {
+      if (clearInputOnSelect && inputEl?.current) {
         inputEl.current.value = "";
         inputEl.current.dispatchEvent(new Event("change", {
           bubbles: true
@@ -251,7 +230,7 @@ export var Autocomplete = function Autocomplete(_ref) {
       handleChange(result);
     }
   }, [clearInputOnSelect, handleChange, handleDefaultOptionChange, inputEl, selectedOptions, type]);
-  var handleMouseEnter = useCallback(function (e) {
+  const handleMouseEnter = (0, _react.useCallback)(e => {
     if (e === undefined || e === null) {
       return setHover({
         item: null,
@@ -263,13 +242,13 @@ export var Autocomplete = function Autocomplete(_ref) {
       by: "mouse"
     });
   }, []);
-  var handleClick = useCallback(function (e) {
+  const handleClick = (0, _react.useCallback)(e => {
     e.preventDefault();
     toggleSelected(hover.item);
   }, [toggleSelected, hover]);
-  var handleRenderOption = useCallback(function (item, index) {
+  const handleRenderOption = (0, _react.useCallback)((item, index) => {
     if (isOptionGroup(item)) {
-      return /*#__PURE__*/React.createElement(OptionGroup, {
+      return /*#__PURE__*/_react.default.createElement(_OptionGroup.OptionGroup, {
         checked: selectedOptions,
         name: item.name,
         key: item.id,
@@ -283,7 +262,7 @@ export var Autocomplete = function Autocomplete(_ref) {
         filter: filter
       });
     }
-    return /*#__PURE__*/React.createElement(Option, {
+    return /*#__PURE__*/_react.default.createElement(_Option.Option, {
       name: item.name,
       ref: itemRef,
       key: index,
@@ -292,25 +271,24 @@ export var Autocomplete = function Autocomplete(_ref) {
       id: item.id,
       hover: item.id === hover.item,
       className: optionClassName,
-      renderOption: renderOption(_extends({}, item, {
-        name: highlightText(item.name, filter)
-      }), {
-        id: "option_" + item.id,
+      renderOption: renderOption({
+        ...item,
+        name: (0, _useHighlightText.default)(item.name, filter)
+      }, {
+        id: `option_${item.id}`,
         checked: selectedOptions && selectedOptions.includes(item.id),
         hover: hover.item === item.id,
-        onChange: function onChange() {
-          return null;
-        }
+        onChange: () => null
       })
     });
   }, [handleClick, handleMouseEnter, hover.item, optionClassName, renderOption, filter, selectedOptions, handleHoverCallback, type, handleChange]);
-  var handleOnMouseLeave = useCallback(function () {
+  const handleOnMouseLeave = (0, _react.useCallback)(() => {
     setHover({
       item: undefined,
       by: "mouse"
     });
   }, []);
-  var handleScroll = useCallback(function (list, itemOffset) {
+  const handleScroll = (0, _react.useCallback)((list, itemOffset) => {
     if (list.getClientHeight() + list.getScrollTop() < itemOffset + 40) {
       return list.scrollTop(itemOffset - list.getClientHeight() + 30);
     }
@@ -318,16 +296,16 @@ export var Autocomplete = function Autocomplete(_ref) {
       return list.scrollTop(itemOffset);
     }
   }, []);
-  useEffect(function () {
+  (0, _react.useEffect)(() => {
     if (hover.by === "keyboard" && hover.item !== undefined) {
-      var item = itemRef.current;
-      var _list = listRef.current;
-      if (itemRef && item && _list) {
-        handleScroll(_list, item.offsetTop);
+      const item = itemRef.current;
+      const list = listRef.current;
+      if (itemRef && item && list) {
+        handleScroll(list, item.offsetTop);
       }
     }
   }, [handleScroll, hover]);
-  var handleOnKeyDown = useCallback(function (e) {
+  const handleOnKeyDown = (0, _react.useCallback)(e => {
     if (e.key === "Enter") {
       e.preventDefault();
       if (hover.item === undefined && filter === "") {
@@ -348,56 +326,54 @@ export var Autocomplete = function Autocomplete(_ref) {
       return;
     }
     setHover({
-      item: handleKeyboardMovement(e, hover.item, flatOptions, showAddNew, showDefaultOption),
+      item: (0, _HandleKeyboard.handleKeyboardMovement)(e, hover.item, flatOptions, showAddNew, showDefaultOption),
       by: "keyboard"
     });
   }, [filter, flatOptions, toggleSelected, handleDefaultOptionChange, handleEmpty, hover, showAddNew, showDefaultOption]);
-  useEffect(function () {
-    var inputRef = inputEl == null ? void 0 : inputEl.current;
+  (0, _react.useEffect)(() => {
+    const inputRef = inputEl?.current;
     if (inputRef) {
       inputRef.addEventListener("input", handleInputChange);
       inputRef.addEventListener("keydown", handleOnKeyDown);
     }
-    return function () {
+    return () => {
       if (inputRef) {
         inputRef.removeEventListener("input", handleInputChange);
         inputRef.removeEventListener("keydown", handleOnKeyDown);
       }
     };
   }, [handleInputChange, handleOnKeyDown, inputEl]);
-  var isDefaultOptionSelected = useCallback(function () {
+  const isDefaultOptionSelected = (0, _react.useCallback)(() => {
     if (preselectDefaultValue) {
       return selectedOptions.length < 1 || selectedOptions[0] === "";
     } else {
       return selectedOptions[0] === null || selectedOptions.length === flatOptions.length;
     }
   }, [flatOptions.length, preselectDefaultValue, selectedOptions]);
-  var showNoResult = useMemo(function () {
-    return noResultText && !showAddNew && list.length < 1;
-  }, [list.length, noResultText, showAddNew]);
-  var renderNoResult = useMemo(function () {
-    return /*#__PURE__*/React.createElement(_StyledStyledOption, null, noResultText);
-  }, [noResultText]);
-  return /*#__PURE__*/React.createElement(StyledAutocompleteScrollShadow, {
+  const showNoResult = (0, _react.useMemo)(() => noResultText && !showAddNew && list.length < 1, [list.length, noResultText, showAddNew]);
+  const renderNoResult = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_StyledStyledOption, null, noResultText), [noResultText]);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledAutocompleteScrollShadow, {
     className: AutocompleteClassName,
     $isHidden: !defaultValue && !emptyValue && !noResultText && list.length < 1
-  }, function (_ref2) {
-    var onScroll = _ref2.onScroll;
-    return /*#__PURE__*/React.createElement(StyledAutocompleteBody, {
+  }, _ref2 => {
+    let {
+      onScroll
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Styles.StyledAutocompleteBody, {
       key: "body",
       onMouseLeave: handleOnMouseLeave
-    }, /*#__PURE__*/React.createElement(Scrollbars, {
+    }, /*#__PURE__*/_react.default.createElement(_reactCustomScrollbars.Scrollbars, {
       ref: listRef,
       key: "scrollBar",
       autoHeight: true,
       autoHeightMax: autoHeightMax,
       onScroll: onScroll
-    }, defaultValue && !filter && /*#__PURE__*/React.createElement(Option, {
+    }, defaultValue && !filter && /*#__PURE__*/_react.default.createElement(_Option.Option, {
       name: defaultValue,
       ref: itemRef,
       hover: hover.item === null,
       onMouseEnter: handleMouseEnter,
-      onClick: function onClick(e) {
+      onClick: e => {
         e.preventDefault();
         toggleSelected(null);
       },
@@ -407,17 +383,14 @@ export var Autocomplete = function Autocomplete(_ref) {
       }, {
         checked: isDefaultOptionSelected(),
         hover: hover.item === null,
-        onChange: function onChange() {
-          return null;
-        }
+        onChange: () => null
       })
-    }), list.map(function (item, index) {
-      return handleRenderOption(item, index);
-    }), showNoResult && renderNoResult, showAddNew && renderAddNew));
+    }), list.map((item, index) => handleRenderOption(item, index)), showNoResult && renderNoResult, showAddNew && renderAddNew));
   });
 };
+exports.Autocomplete = Autocomplete;
 Autocomplete.displayName = "Autocomplete";
-var _StyledStyledOption = _styled(StyledOption).withConfig({
+var _StyledStyledOption = (0, _styledComponents.default)(_Styles2.StyledOption).withConfig({
   displayName: "Autocomplete___StyledStyledOption",
   componentId: "sc-9x4q7e-0"
 })(["cursor:auto"]);