@activecollab/components 2.0.0 → 2.0.1

package/dist/cjs/components/ComboBox/ComboBox.js

@@ -29,47 +29,61 @@ var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useIsFirstRender = require("../../hooks/useIsFirstRender");
 var _MultiAvatar = require("../MultiAvatar");
-const _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect"];
-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); }
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const ComboBox = _ref => {
-  let {
-      options = [],
-      selected,
-      loading = false,
-      loadingText,
-      onChange,
-      placeholder,
-      handleEmptyAction,
-      disabled = false,
-      size = "regular",
-      invalid = false,
-      type = "single",
-      renderChip,
-      forceCloseMenu = type === "single",
-      renderOption,
-      limitChips = 2,
-      hiddenNumberText,
-      inPortal = false,
-      inputWrapperClassName,
-      scrollWrapper,
-      onClose,
-      onClear,
-      onDeselect
-    } = _ref,
+var ComboBox = exports.ComboBox = function ComboBox(_ref) {
+  var _comboBoxRef$current2, _comboBoxRef$current3;
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    selected = _ref.selected,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    loadingText = _ref.loadingText,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    handleEmptyAction = _ref.handleEmptyAction,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "regular" : _ref$size,
+    _ref$invalid = _ref.invalid,
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "single" : _ref$type,
+    renderChip = _ref.renderChip,
+    _ref$forceCloseMenu = _ref.forceCloseMenu,
+    forceCloseMenu = _ref$forceCloseMenu === void 0 ? type === "single" : _ref$forceCloseMenu,
+    renderOption = _ref.renderOption,
+    _ref$limitChips = _ref.limitChips,
+    limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
+    hiddenNumberText = _ref.hiddenNumberText,
+    _ref$inPortal = _ref.inPortal,
+    inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
+    inputWrapperClassName = _ref.inputWrapperClassName,
+    scrollWrapper = _ref.scrollWrapper,
+    onClose = _ref.onClose,
+    onClear = _ref.onClear,
+    onDeselect = _ref.onDeselect,
     prop = _objectWithoutProperties(_ref, _excluded);
-  const selectedName = (0, _react.useMemo)(() => {
-    let value = "";
+  var selectedName = (0, _react.useMemo)(function () {
+    var value = "";
     if (!selected) {
       return value;
     }
-    options.map(v => {
-      if (v?.options) {
-        return v.options.find(q => {
+    options.map(function (v) {
+      if (v !== null && v !== void 0 && v.options) {
+        return v.options.find(function (q) {
           if (q.id === selected) {
             value = q.name;
             return;
@@ -84,24 +98,36 @@ const ComboBox = _ref => {
     });
     return value;
   }, [options, selected]);
-  const [value, setValue] = (0, _react.useState)(selectedName);
-  const [focused, setFocused] = (0, _react.useState)(false);
-  const handleOnChange = (0, _react.useCallback)(e => setValue(e.target.value), []);
-  const childNode = (0, _react.useRef)();
-  const elementRef = (0, _react.useRef)(null);
-  const handleRef = (0, _useForkRef.default)(childNode, elementRef);
-  const wrapperRef = (0, _react.useRef)(null);
-  const chipWrapper = (0, _react.useRef)(null);
-  const comboBoxRef = (0, _react.useRef)(null);
-  const [open, setOpen] = (0, _react.useState)(false);
-  const isFirstRender = (0, _useIsFirstRender.useIsFirstRender)();
-  (0, _useOnClickOutside.useOnClickOutside)(wrapperRef, e => {
-    if (e.target && comboBoxRef.current?.contains(e.target)) {
+  var _useState = (0, _react.useState)(selectedName),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var handleOnChange = (0, _react.useCallback)(function (e) {
+    return setValue(e.target.value);
+  }, []);
+  var childNode = (0, _react.useRef)();
+  var elementRef = (0, _react.useRef)(null);
+  var handleRef = (0, _useForkRef.default)(childNode, elementRef);
+  var wrapperRef = (0, _react.useRef)(null);
+  var chipWrapper = (0, _react.useRef)(null);
+  var comboBoxRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var isFirstRender = (0, _useIsFirstRender.useIsFirstRender)();
+  (0, _useOnClickOutside.useOnClickOutside)(wrapperRef, function (e) {
+    var _comboBoxRef$current;
+    if (e.target && (_comboBoxRef$current = comboBoxRef.current) !== null && _comboBoxRef$current !== void 0 && _comboBoxRef$current.contains(e.target)) {
       return;
     }
     setOpen(false);
   });
-  const handleOnKeyDown = (0, _react.useCallback)(e => {
+  var handleOnKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === "Escape" && open) {
       setOpen(false);
       setValue(selectedName);
@@ -114,25 +140,26 @@ const ComboBox = _ref => {
       setOpen(true);
     }
   }, [focused, open, selectedName, type]);
-  (0, _react.useEffect)(() => {
-    open && childNode?.current?.focus();
-    !open && childNode?.current?.blur();
+  (0, _react.useEffect)(function () {
+    var _childNode$current, _childNode$current2;
+    open && (childNode === null || childNode === void 0 ? void 0 : (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
+    !open && (childNode === null || childNode === void 0 ? void 0 : (_childNode$current2 = childNode.current) === null || _childNode$current2 === void 0 ? void 0 : _childNode$current2.blur());
   }, [childNode, open]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     setValue(selectedName);
   }, [selectedName]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (!open && !isFirstRender && !focused) {
       if (typeof onClose === "function") {
         onClose();
       }
     }
   }, [focused, isFirstRender, onClose, open]);
-  const emptyAction = (0, _react.useCallback)(v => {
-    handleEmptyAction?.(v);
+  var emptyAction = (0, _react.useCallback)(function (v) {
+    handleEmptyAction === null || handleEmptyAction === void 0 ? void 0 : handleEmptyAction(v);
     setOpen(false);
   }, [handleEmptyAction]);
-  const handleChange = (0, _react.useCallback)(selectedValue => {
+  var handleChange = (0, _react.useCallback)(function (selectedValue) {
     if (selectedValue !== selected && typeof onChange === "function") {
       onChange(selectedValue);
     }
@@ -140,12 +167,12 @@ const ComboBox = _ref => {
       setOpen(false);
     }
   }, [forceCloseMenu, onChange, selected]);
-  const onOpen = (0, _react.useCallback)(() => {
+  var onOpen = (0, _react.useCallback)(function () {
     if (!disabled) {
       setOpen(true);
     }
   }, [disabled]);
-  const handleRenderOption = (0, _react.useCallback)((option, props) => {
+  var handleRenderOption = (0, _react.useCallback)(function (option, props) {
     if (typeof renderOption === "function") {
       return renderOption(option, props);
     }
@@ -164,30 +191,30 @@ const ComboBox = _ref => {
       name: option.name
     }), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, props));
   }, [type, renderOption]);
-  const handleDeselect = (0, _react.useCallback)(e => {
+  var handleDeselect = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     if (typeof onDeselect === "function") {
       onDeselect();
     } else if (type === "multiple") {
-      onChange?.([]);
+      onChange === null || onChange === void 0 ? void 0 : onChange([]);
     } else {
-      onChange?.("");
+      onChange === null || onChange === void 0 ? void 0 : onChange("");
     }
-    onClear?.();
+    onClear === null || onClear === void 0 ? void 0 : onClear();
     setOpen(false);
   }, [type, onChange, onClear, onDeselect]);
-  const handleMouseDown = (0, _react.useCallback)(e => {
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
     e.preventDefault();
   }, []);
-  const handleBlur = (0, _react.useCallback)(() => {
+  var handleBlur = (0, _react.useCallback)(function () {
     setValue(selectedName);
     setFocused(!focused);
   }, [focused, selectedName]);
-  const renderChipAdornment = (0, _react.useCallback)((option, index) => {
+  var renderChipAdornment = (0, _react.useCallback)(function (option, index) {
     if (typeof renderChip === "function") {
       return renderChip(option, index);
     }
-    const avatarProps = {
+    var avatarProps = {
       size: 18
     };
     switch (size) {
@@ -198,7 +225,7 @@ const ComboBox = _ref => {
         avatarProps.size = 14;
         break;
     }
-    const leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_StyledAvatar, _extends({
+    var leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_StyledAvatar, _extends({
       url: option.image
     }, avatarProps, {
       $_css: {
@@ -209,17 +236,19 @@ const ComboBox = _ref => {
         "marginRight": "0.125rem"
       }
     })) : undefined;
-    const onClose = e => {
+    var onClose = function onClose(e) {
       e.preventDefault();
       e.stopPropagation();
       if (Array.isArray(selected) && selected.includes(option.id)) {
         if (typeof onChange === "function") {
-          const newSelected = selected.filter(item => item !== option.id);
+          var newSelected = selected.filter(function (item) {
+            return item !== option.id;
+          });
           onChange(newSelected);
         }
       }
     };
-    let showOnClose = true;
+    var showOnClose = true;
     if (disabled) {
       showOnClose = false;
     }
@@ -238,50 +267,54 @@ const ComboBox = _ref => {
       variant: "Caption 1"
     });
   }, [disabled, onChange, renderChip, selected, size]);
-  const autoSize = (0, _react.useMemo)(() => {
+  var autoSize = (0, _react.useMemo)(function () {
     if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
       return "auto";
     }
     return size;
   }, [open, selected, size, type]);
-  const startAdornment = (0, _react.useMemo)(() => {
+  var startAdornment = (0, _react.useMemo)(function () {
     if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
-      const elements = [];
-      let total = 0;
-      options.forEach((option, index) => {
-        const isGrouped = (0, _Autocomplete2.isOptionGroup)(option);
+      var elements = [];
+      var total = 0;
+      options.forEach(function (option, index) {
+        var isGrouped = (0, _Autocomplete2.isOptionGroup)(option);
         if (selected.includes(option.id) && !isGrouped) {
           total = total + 1;
           elements.push(renderChipAdornment(option, index));
         } else if (isGrouped) {
-          const groupedOptions = option.options.filter(o => selected.includes(o.id));
+          var groupedOptions = option.options.filter(function (o) {
+            return selected.includes(o.id);
+          });
           total = total + groupedOptions.length;
           if (groupedOptions.length > 0) {
-            groupedOptions.forEach((o, _index) => {
+            groupedOptions.forEach(function (o, _index) {
               elements.push(renderChipAdornment(o, `${index}_${_index}`));
             });
           }
         }
       });
-      let hidden = 0;
+      var _hidden = 0;
       if (!open && limitChips > 0 && elements.length > limitChips) {
-        hidden = elements.splice(limitChips, elements.length - limitChips).length;
+        _hidden = elements.splice(limitChips, elements.length - limitChips).length;
       }
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, hidden > 0 && /*#__PURE__*/_react.default.createElement(_StyledTypography, {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/_react.default.createElement(_StyledTypography, {
         variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
-      }, typeof hiddenNumberText === "function" ? hiddenNumberText(hidden) : `+${hidden}`));
+      }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : `+${_hidden}`));
     }
     if (type === "single" && selected) {
-      let optionItem;
-      options.forEach(option => {
+      var optionItem;
+      options.forEach(function (option) {
         if ((0, _Autocomplete2.isOptionGroup)(option)) {
-          optionItem = option.options.find(child => child.id === selected);
+          optionItem = option.options.find(function (child) {
+            return child.id === selected;
+          });
         } else if (!optionItem && option.id === selected) {
           optionItem = option;
         }
       });
       if (optionItem && optionItem.image) {
-        const avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
+        var avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
         if (Array.isArray(optionItem.image)) {
           return /*#__PURE__*/_react.default.createElement(_MultiAvatar.MultiAvatar, {
             url: optionItem.image,
@@ -296,8 +329,8 @@ const ComboBox = _ref => {
     }
     return undefined;
   }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
-  const showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
-  const hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
+  var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
+  var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "c-combo-box"
   }, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyledStyledInputWrapper, {
@@ -306,8 +339,9 @@ const ComboBox = _ref => {
     $invalid: invalid,
     ref: comboBoxRef,
     className: (0, _classnames.default)("c-combo-box-input-wrapper", inputWrapperClassName),
-    onClick: () => {
-      elementRef.current?.click();
+    onClick: function onClick() {
+      var _elementRef$current;
+      (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.click();
     },
     $_css3: autoSize === "auto" ? "auto" : undefined,
     $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
@@ -319,7 +353,7 @@ const ComboBox = _ref => {
   }, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInput, {
     className: "c-combo-box-input",
     onBlur: handleBlur,
-    onFocus: () => {
+    onFocus: function onFocus() {
       setFocused(!focused);
     },
     onClick: onOpen,
@@ -347,7 +381,7 @@ const ComboBox = _ref => {
     className: (0, _classnames.default)("c-combo-box-input", inputWrapperClassName),
     onBlur: handleBlur,
     wrapperClick: onOpen,
-    onFocus: () => {
+    onFocus: function onFocus() {
       setFocused(!focused);
     },
     onClick: onOpen,
@@ -374,14 +408,16 @@ const ComboBox = _ref => {
     })) : null
   }), !disabled ? /*#__PURE__*/_react.default.createElement(_ConditionWrapper.ConditionalWrapper, {
     condition: inPortal,
-    wrap: children => /*#__PURE__*/_react.default.createElement(_helpers.Portal, null, children)
+    wrap: function wrap(children) {
+      return /*#__PURE__*/_react.default.createElement(_helpers.Portal, null, children);
+    }
   }, /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
     anchorEl: comboBoxRef.current,
     open: open,
     placement: "bottom",
     style: {
       zIndex: 10,
-      width: comboBoxRef.current?.clientWidth
+      width: (_comboBoxRef$current2 = comboBoxRef.current) === null || _comboBoxRef$current2 === void 0 ? void 0 : _comboBoxRef$current2.clientWidth
     },
     ref: wrapperRef,
     strategy: "fixed"
@@ -389,7 +425,7 @@ const ComboBox = _ref => {
     noIsolation: true,
     allowPinchZoom: true
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxList, {
-    $width: comboBoxRef.current?.clientWidth
+    $width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth
   }, /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, _extends({}, prop, {
     inputEl: childNode,
     selected: selected,
@@ -400,12 +436,15 @@ const ComboBox = _ref => {
     handleEmptyAction: emptyAction
   })))))) : null);
 };
-exports.ComboBox = ComboBox;
 ComboBox.displayName = "ComboBox";
 var _StyledAvatar = (0, _styledComponents.default)(_Avatar.Avatar).withConfig({
   displayName: "ComboBox___StyledAvatar",
   componentId: "sc-uvsz9l-0"
-})(["", " ", ""], p => p.$_css, p => p.$_css2);
+})(["", " ", ""], function (p) {
+  return p.$_css;
+}, function (p) {
+  return p.$_css2;
+});
 var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
   displayName: "ComboBox___StyledTypography",
   componentId: "sc-uvsz9l-1"
@@ -413,7 +452,13 @@ var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).w
 var _StyledStyledInputWrapper = (0, _styledComponents.default)(_Styles2.StyledInputWrapper).withConfig({
   displayName: "ComboBox___StyledStyledInputWrapper",
   componentId: "sc-uvsz9l-2"
-})(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], p => p.$_css3, p => p.$_css4, p => p.$_css5);
+})(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], function (p) {
+  return p.$_css3;
+}, function (p) {
+  return p.$_css4;
+}, function (p) {
+  return p.$_css5;
+});
 var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
   displayName: "ComboBox___StyledTrigger",
   componentId: "sc-uvsz9l-3"