@activecollab/components 1.0.278 → 1.0.280

package/dist/index.js

@@ -15841,51 +15841,51 @@
     }, "+", React.Children.count(children) - limit)));
   };
 
-  var StyledCommandPallete = styled__default["default"].div.withConfig({
-    displayName: "CommandPalletestyles__StyledCommandPallete",
-    componentId: "sc-16m145d-0"
+  var StyledCommandPalette = styled__default["default"].div.withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPalette",
+    componentId: "sc-na3mad-0"
   })(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;mark{background-color:var(--color-primary-300);color:var(--color-theme-900);}"], FontStyle);
-  var StyledCommandPalleteWrapper = styled__default["default"].div.withConfig({
-    displayName: "CommandPalletestyles__StyledCommandPalleteWrapper",
-    componentId: "sc-16m145d-1"
+  var StyledCommandPaletteWrapper = styled__default["default"].div.withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
+    componentId: "sc-na3mad-1"
   })(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){padding-bottom:8px;padding-top:8px;}"]);
-  var StyledCommandPalleteHeader = styled__default["default"].div.withConfig({
-    displayName: "CommandPalletestyles__StyledCommandPalleteHeader",
-    componentId: "sc-16m145d-2"
+  var StyledCommandPaletteHeader = styled__default["default"].div.withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
+    componentId: "sc-na3mad-2"
   })(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
   var StyledSearchIcon = styled__default["default"].div.withConfig({
-    displayName: "CommandPalletestyles__StyledSearchIcon",
-    componentId: "sc-16m145d-3"
+    displayName: "CommandPalettestyles__StyledSearchIcon",
+    componentId: "sc-na3mad-3"
   })(["margin-right:8px;svg{vertical-align:middle;}"]);
   var StyledInput = styled__default["default"].input.withConfig({
-    displayName: "CommandPalletestyles__StyledInput",
-    componentId: "sc-16m145d-4"
+    displayName: "CommandPalettestyles__StyledInput",
+    componentId: "sc-na3mad-4"
   })(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
   var StyledParameter = styled__default["default"].span.withConfig({
-    displayName: "CommandPalletestyles__StyledParameter",
-    componentId: "sc-16m145d-5"
+    displayName: "CommandPalettestyles__StyledParameter",
+    componentId: "sc-na3mad-5"
   })(["color:var(--color-theme-transparent-500);margin-right:8px;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
   var StyledActionWrapper = styled__default["default"].div.withConfig({
-    displayName: "CommandPalletestyles__StyledActionWrapper",
-    componentId: "sc-16m145d-6"
+    displayName: "CommandPalettestyles__StyledActionWrapper",
+    componentId: "sc-na3mad-6"
   })(["align-items:center;display:flex;gap:8px;"]);
   var StyledIcon = styled__default["default"].div.withConfig({
-    displayName: "CommandPalletestyles__StyledIcon",
-    componentId: "sc-16m145d-7"
+    displayName: "CommandPalettestyles__StyledIcon",
+    componentId: "sc-na3mad-7"
   })(["margin-right:8px;svg{vertical-align:middle;}"]);
-  var StyledCommandPalleteList = styled__default["default"].ul.withConfig({
-    displayName: "CommandPalletestyles__StyledCommandPalleteList",
-    componentId: "sc-16m145d-8"
+  var StyledCommandPaletteList = styled__default["default"].ul.withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPaletteList",
+    componentId: "sc-na3mad-8"
   })(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
   var StyledHeading = styled__default["default"].p.withConfig({
-    displayName: "CommandPalletestyles__StyledHeading",
-    componentId: "sc-16m145d-9"
+    displayName: "CommandPalettestyles__StyledHeading",
+    componentId: "sc-na3mad-9"
   })(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
 
   // prettier-ignore
-  var StyledCommandPalleteItem = styled__default["default"].li.withConfig({
-    displayName: "CommandPalletestyles__StyledCommandPalleteItem",
-    componentId: "sc-16m145d-10"
+  var StyledCommandPaletteItem = styled__default["default"].li.withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPaletteItem",
+    componentId: "sc-na3mad-10"
   })(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;background-color:", ";&:focus{background-color:var(--color-theme-200);}&::before{display:", ";background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}&:focus{outline:none;}"], function (_ref) {
     var $selected = _ref.$selected;
     return $selected ? "var(--color-theme-200)" : "transparent";
@@ -15893,14 +15893,18 @@
     var $selected = _ref2.$selected;
     return $selected ? "block" : "none";
   });
-  var StyledCommandPalleteCommandItem = styled__default["default"](StyledCommandPalleteItem).withConfig({
-    displayName: "CommandPalletestyles__StyledCommandPalleteCommandItem",
-    componentId: "sc-16m145d-11"
+  var StyledCommandPaletteCommandItem = styled__default["default"](StyledCommandPaletteItem).withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPaletteCommandItem",
+    componentId: "sc-na3mad-11"
   })(["user-select:none;"]);
   var StyledSpinnerLoader = styled__default["default"](SpinnerLoader).withConfig({
-    displayName: "CommandPalletestyles__StyledSpinnerLoader",
-    componentId: "sc-16m145d-12"
+    displayName: "CommandPalettestyles__StyledSpinnerLoader",
+    componentId: "sc-na3mad-12"
   })(["margin-right:4px;"]);
+  var StyledCommandPaletteItemLoader = styled__default["default"].div.withConfig({
+    displayName: "CommandPalettestyles__StyledCommandPaletteItemLoader",
+    componentId: "sc-na3mad-13"
+  })(["align-items:center;display:flex;gap:8px;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;pointer-events:none;user-select:none;"]);
 
   var ModeContext = /*#__PURE__*/React.createContext({
     mode: "default",
@@ -15936,7 +15940,7 @@
   };
 
   var _excluded$2 = ["title", "renderIcon", "className", "index"];
-  var CommandPalleteCommandItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var CommandPaletteCommandItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
       renderIcon = _ref.renderIcon,
       className = _ref.className,
@@ -15949,7 +15953,7 @@
     var onMouseEnter = function onMouseEnter() {
       setSelected(index);
     };
-    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteCommandItem, _extends({}, rest, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
       ref: ref,
       className: classNames__default["default"]("cp-item cp-command", className),
       tabIndex: 1,
@@ -15963,14 +15967,14 @@
       color: "primary"
     }, title), /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null));
   });
-  CommandPalleteCommandItem.displayName = "CommandPalleteCommandItem";
+  CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
   var _StyledTypography = styled__default["default"](Typography).withConfig({
-    displayName: "CommandPalleteCommandItem___StyledTypography",
-    componentId: "sc-12i2mxl-0"
+    displayName: "CommandPaletteCommandItem___StyledTypography",
+    componentId: "sc-1t486ve-0"
   })(["flex:1;"]);
 
   var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-  var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
+  var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     var handleChange = _ref.handleChange,
       _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -16009,7 +16013,7 @@
         }
       }
     }, [search, commandsLength, itemsLength, setSelected]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteHeader, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteHeader, {
       className: "cp-header"
     }, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
       ref: inputRef,
@@ -16094,9 +16098,9 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, null))) : null));
   };
-  CommandPalleteHeader.displayName = "CommandPalleteItem";
+  CommandPaletteHeader.displayName = "CommandPaletteItem";
 
-  var findHiglightSearch = function findHiglightSearch(searchValue, target) {
+  var findHighlightedSearch = function findHighlightedSearch(searchValue, target) {
     if (searchValue && target) {
       var purifiedTarget = target === null || target === void 0 ? void 0 : target.replace(/<script.*?>.*?<\/script>/gi, "");
       var parser = new DOMParser();
@@ -16108,12 +16112,18 @@
     return "";
   };
 
-  var _excluded$1 = ["title", "renderIcon", "className", "index"];
-  var CommandPalleteItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _excluded$1 = ["title", "renderIcon", "className", "index", "loading"];
+  var generateRandomWidth = function generateRandomWidth() {
+    // generate range 30-80
+    var randomNum = Math.round(Math.random() * 30 + 30);
+    return randomNum + "%";
+  };
+  var CommandPaletteItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
       renderIcon = _ref.renderIcon,
       className = _ref.className,
       index = _ref.index,
+      loading = _ref.loading,
       rest = _objectWithoutProperties(_ref, _excluded$1);
     var icon = renderIcon && renderIcon();
     var _useSelectedContext = useSelectedContext(),
@@ -16124,7 +16134,15 @@
     var onMouseEnter = function onMouseEnter() {
       setSelected(index);
     };
-    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteItem, _extends({}, rest, {
+    if (loading) {
+      return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteItemLoader, {
+        "aria-busy": true,
+        "aria-disabled": true
+      }, /*#__PURE__*/React__default["default"].createElement(_StyledLinearLoader, null), /*#__PURE__*/React__default["default"].createElement(_StyledLinearLoader2, {
+        $_css: generateRandomWidth()
+      }));
+    }
+    return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteItem, _extends({}, rest, {
       ref: ref,
       className: classNames__default["default"]("cp-item", className),
       tabIndex: 1,
@@ -16137,18 +16155,35 @@
       variant: "Body 1",
       color: "primary",
       dangerouslySetInnerHTML: {
-        __html: findHiglightSearch(search, title)
+        __html: findHighlightedSearch(search, title)
       }
     }) : null);
   });
-  CommandPalleteItem.displayName = "CommandPalleteItem";
+  CommandPaletteItem.displayName = "CommandPaletteItem";
+  var _StyledLinearLoader = styled__default["default"](LinearLoader).withConfig({
+    displayName: "CommandPaletteItem___StyledLinearLoader",
+    componentId: "sc-6tfj5q-0"
+  })({
+    width: 24,
+    height: 24,
+    borderRadius: "100%"
+  });
+  var _StyledLinearLoader2 = styled__default["default"](LinearLoader).withConfig({
+    displayName: "CommandPaletteItem___StyledLinearLoader2",
+    componentId: "sc-6tfj5q-1"
+  })(function (p) {
+    return {
+      width: p.$_css,
+      height: 16
+    };
+  });
 
-  var CommandPalleteList = function CommandPalleteList(_ref) {
+  var CommandPaletteList = function CommandPaletteList(_ref) {
     var children = _ref.children,
       heading = _ref.heading,
       _ref$visible = _ref.visible,
       visible = _ref$visible === void 0 ? false : _ref$visible;
-    return visible ? /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteList, {
+    return visible ? /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteList, {
       className: "cp-list",
       tabIndex: -1,
       role: "listbox"
@@ -16156,7 +16191,7 @@
       tabIndex: -1
     }, heading) : null, children) : null;
   };
-  CommandPalleteList.displayName = "CommandPalleteList";
+  CommandPaletteList.displayName = "CommandPaletteList";
 
   var hasChildren = function hasChildren(element) {
     return /*#__PURE__*/React.isValidElement(element) && Boolean(element.props.children);
@@ -16177,13 +16212,14 @@
     });
   };
 
-  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode"];
-  var CommandPallete = function CommandPallete(_ref) {
+  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode", "loading"];
+  var CommandPalette = function CommandPalette(_ref) {
     var children = _ref.children,
       onChangeSearch = _ref.onChangeSearch,
       search = _ref.search,
       mode = _ref.mode,
       setMode = _ref.setMode,
+      loading = _ref.loading,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useState = React.useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -16213,10 +16249,10 @@
       var items = deepMap(children, function (child) {
         var item = child;
         var clonedElement;
-        if (item && item.type === CommandPalleteList) {
+        if (item && item.type === CommandPaletteList) {
           clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2({}, item.props));
         }
-        if (item && item.type === CommandPalleteCommandItem) {
+        if (item && item.type === CommandPaletteCommandItem) {
           clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
             index: itemsLength,
             selected: selected
@@ -16224,10 +16260,11 @@
           itemsLength++;
           commandsLength++;
         }
-        if (item && item.type === CommandPalleteItem) {
+        if (item && item.type === CommandPaletteItem) {
           clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
             index: itemsLength,
-            selected: selected
+            selected: selected,
+            loading: loading
           }));
           itemsLength++;
         }
@@ -16238,7 +16275,7 @@
         itemsLength: itemsLength,
         commandsLength: commandsLength
       };
-    }, [children, selected]);
+    }, [children, loading, selected]);
     var handleChangeSelected = function handleChangeSelected(direction) {
       var items = document.querySelectorAll(".cp-item");
       var index = 0;
@@ -16280,7 +16317,7 @@
         selected: selected,
         setSelected: setSelected
       }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledCommandPallete, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCommandPalette, {
       onKeyDown: function onKeyDown(e) {
         if (e.key === "ArrowDown") {
           e.preventDefault();
@@ -16306,18 +16343,19 @@
         mode: mode,
         setMode: setMode
       }
-    }, /*#__PURE__*/React__default["default"].createElement(CommandPalleteHeader, {
+    }, /*#__PURE__*/React__default["default"].createElement(CommandPaletteHeader, {
       handleChange: handleChange,
       commandsLength: filterChildren.commandsLength,
-      itemsLength: filterChildren.itemsLength
-    })), /*#__PURE__*/React__default["default"].createElement(StyledCommandPalleteWrapper, {
+      itemsLength: filterChildren.itemsLength,
+      loading: loading
+    })), /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteWrapper, {
       ref: listWrapperRef
     }, filterChildren.items)))));
   };
-  CommandPallete.displayName = "CommandPallete";
-  CommandPallete.List = CommandPalleteList;
-  CommandPallete.Item = CommandPalleteItem;
-  CommandPallete.CommandItem = CommandPalleteCommandItem;
+  CommandPalette.displayName = "CommandPalette";
+  CommandPalette.List = CommandPaletteList;
+  CommandPalette.Item = CommandPaletteItem;
+  CommandPalette.CommandItem = CommandPaletteCommandItem;
 
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
@@ -16387,7 +16425,7 @@
   exports.CollapseAllIcon = CollapseAllIcon$1;
   exports.CollapseExpandSingleIcon = CollapseExpandSingleIcon$1;
   exports.ComboBox = ComboBox;
-  exports.CommandPallete = CommandPallete;
+  exports.CommandPalette = CommandPalette;
   exports.CompleteCheckbox = CompleteCheckbox;
   exports.ComputerIcon = ComputerIcon$1;
   exports.ConfirmDialog = ConfirmDialog;