@activecollab/components 1.0.279 → 1.0.280

package/dist/index.js

@@ -15901,6 +15901,10 @@
     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",
@@ -16108,12 +16112,18 @@
     return "";
   };
 
-  var _excluded$1 = ["title", "renderIcon", "className", "index"];
+  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,6 +16134,14 @@
     var onMouseEnter = function onMouseEnter() {
       setSelected(index);
     };
+    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),
@@ -16142,6 +16160,23 @@
     }) : null);
   });
   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 CommandPaletteList = function CommandPaletteList(_ref) {
     var children = _ref.children,
@@ -16177,13 +16212,14 @@
     });
   };
 
-  var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode"];
+  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),
@@ -16227,7 +16263,8 @@
         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;
@@ -16309,7 +16346,8 @@
     }, /*#__PURE__*/React__default["default"].createElement(CommandPaletteHeader, {
       handleChange: handleChange,
       commandsLength: filterChildren.commandsLength,
-      itemsLength: filterChildren.itemsLength
+      itemsLength: filterChildren.itemsLength,
+      loading: loading
     })), /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteWrapper, {
       ref: listWrapperRef
     }, filterChildren.items)))));