@elementor/editor-global-classes 4.2.0-921 → 4.2.0-923

package/dist/index.js

@@ -44,11 +44,11 @@ module.exports = __toCommonJS(index_exports);
 var React19 = __toESM(require("react"));
 var import_react10 = require("react");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
-var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_query2 = require("@elementor/query");
-var import_store18 = require("@elementor/store");
+var import_store22 = require("@elementor/store");
 var import_ui16 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 
@@ -342,7 +342,7 @@ var selectOrderedClasses = (0, import_store.__createSelector)(
 var selectClass = (state, id) => state[SLICE_NAME].data.items[id] ?? null;
 var selectEmptyCssClass = (0, import_store.__createSelector)(
   selectData,
-  ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
+  ({ items }) => Object.values(items).filter((cssClass) => (cssClass.variants?.length ?? 0) === 0)
 );
 var selectIsClassFetched = (state, id) => !!state[SLICE_NAME].initialData.preview.items[id] || !!state[SLICE_NAME].initialData.frontend.items[id] || false;
 
@@ -1184,7 +1184,7 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React10.creat
 // src/components/class-manager/global-classes-list.tsx
 var React17 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_store16 = require("@elementor/store");
+var import_store20 = require("@elementor/store");
 var import_ui14 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n12 = require("@wordpress/i18n");
@@ -1195,6 +1195,115 @@ var useOrderedClasses = () => {
   return (0, import_store14.__useSelector)(selectOrderedClasses);
 };
 
+// src/load-existing-classes.ts
+var import_store18 = require("@elementor/store");
+
+// src/load-document-classes.ts
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_store16 = require("@elementor/store");
+
+// src/utils/create-labels-for-classes.ts
+function createLabelsForClasses(entries) {
+  return Object.fromEntries(entries.map((e) => [e.id, e.label]));
+}
+
+// src/load-document-classes.ts
+function styleDefinitionsMapWithoutNull(map) {
+  return Object.fromEntries(
+    Object.entries(map).filter(
+      (entry) => entry[1] !== null
+    )
+  );
+}
+function resetGlobalClassesState(globalOrder, classLabels) {
+  (0, import_store16.__dispatch)(
+    slice.actions.load({
+      preview: { items: {}, order: globalOrder },
+      frontend: { items: {}, order: globalOrder },
+      classLabels
+    })
+  );
+}
+async function loadCurrentDocumentClasses() {
+  const [previewIndexRes, frontendIndexRes] = await Promise.all([
+    apiClient.all("preview"),
+    apiClient.all("frontend")
+  ]);
+  const previewIndex = previewIndexRes.data.data;
+  const frontendIndex = frontendIndexRes.data.data;
+  const classLabels = createLabelsForClasses(previewIndex);
+  const previewOrder = previewIndex.map((e) => e.id);
+  const frontendOrder = frontendIndex.map((e) => e.id);
+  resetGlobalClassesState(previewOrder, classLabels);
+  const postId = (0, import_editor_documents2.getCurrentDocument)()?.id;
+  if (!postId) {
+    return;
+  }
+  const [previewPostRes, frontendPostRes] = await Promise.all([
+    apiClient.getStylesForPost(postId, "preview"),
+    apiClient.getStylesForPost(postId, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
+  (0, import_store16.__dispatch)(
+    slice.actions.load({
+      preview: { items: previewItems, order: previewOrder },
+      frontend: { items: frontendItems, order: frontendOrder },
+      classLabels
+    })
+  );
+}
+async function addDocumentClasses(documentId) {
+  const [previewPostRes, frontendPostRes] = await Promise.all([
+    apiClient.getStylesForPost(documentId, "preview"),
+    apiClient.getStylesForPost(documentId, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
+  (0, import_store16.__dispatch)(
+    slice.actions.mergeExistingClasses({
+      preview: previewItems,
+      frontend: frontendItems
+    })
+  );
+}
+
+// src/load-existing-classes.ts
+var pendingLoad = null;
+var pendingIds = /* @__PURE__ */ new Set();
+async function loadExistingClasses(classIds) {
+  const existingClasses = selectGlobalClasses((0, import_store18.__getState)());
+  const missingIds = classIds.filter((id) => !(id in existingClasses));
+  if (missingIds.length === 0) {
+    return;
+  }
+  missingIds.forEach((id) => pendingIds.add(id));
+  if (pendingLoad) {
+    await pendingLoad;
+    return loadExistingClasses(classIds);
+  }
+  pendingLoad = fetchAndMergeClasses();
+  try {
+    await pendingLoad;
+  } finally {
+    pendingLoad = null;
+  }
+}
+async function fetchAndMergeClasses() {
+  const idsToFetch = Array.from(pendingIds);
+  pendingIds.clear();
+  if (idsToFetch.length === 0) {
+    return;
+  }
+  const [previewResponse, frontendResponse] = await Promise.all([
+    apiClient.getStylesByIds(idsToFetch, "preview"),
+    apiClient.getStylesByIds(idsToFetch, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
+  (0, import_store18.__dispatch)(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
+}
+
 // src/components/class-manager/class-item.tsx
 var React15 = __toESM(require("react"));
 var import_react7 = require("react");
@@ -1206,7 +1315,7 @@ var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var React11 = __toESM(require("react"));
-var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
@@ -1251,7 +1360,7 @@ var CssClassUsagePopover = ({
   onClose
 }) => {
   const { data: classUsage } = useCssClassUsageByID(cssClassID);
-  const onNavigate = (0, import_editor_documents2.__useOpenDocumentInNewTab)();
+  const onNavigate = (0, import_editor_documents3.__useOpenDocumentInNewTab)();
   const cssClassUsageRecords = classUsage?.content.map(
     ({ title, elements, pageId, type }) => ({
       type: "item",
@@ -1865,9 +1974,15 @@ var GlobalClassesList = ({
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch7 = (0, import_store16.__useDispatch)();
+  const dispatch7 = (0, import_store20.__useDispatch)();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = (0, import_react8.useState)(null);
+  const [loading, setLoading] = (0, import_react8.useState)({});
+  const addLoadingClass = (classId) => setLoading((prev) => ({ ...prev, [classId]: true }));
+  const removeLoadingClass = (classId) => setLoading((prev) => {
+    const { [classId]: _, ...rest } = prev;
+    return rest;
+  });
   const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
@@ -1956,25 +2071,31 @@ var GlobalClassesList = ({
             {
               id: cssClass.id,
               label: cssClass.label,
-              renameClass: (newLabel) => {
-                trackGlobalClasses({
-                  event: "classRenamed",
-                  classId: cssClass.id,
-                  oldValue: cssClass.label,
-                  newValue: newLabel,
-                  source: "class-manager"
-                });
-                dispatch7(
-                  slice.actions.update({
-                    style: {
-                      id: cssClass.id,
-                      label: newLabel
-                    }
-                  })
-                );
+              renameClass: async (newLabel) => {
+                addLoadingClass(cssClass.id);
+                try {
+                  trackGlobalClasses({
+                    event: "classRenamed",
+                    classId: cssClass.id,
+                    oldValue: cssClass.label,
+                    newValue: newLabel,
+                    source: "class-manager"
+                  });
+                  void await loadExistingClasses([cssClass.id]);
+                  dispatch7(
+                    slice.actions.update({
+                      style: {
+                        id: cssClass.id,
+                        label: newLabel
+                      }
+                    })
+                  );
+                } finally {
+                  removeLoadingClass(cssClass.id);
+                }
               },
               selected: isDragged,
-              disabled: disabled || isDragPlaceholder,
+              disabled: disabled || isDragPlaceholder || loading[cssClass.id],
               sortableTriggerProps: {
                 ...triggerProps,
                 style: triggerStyle
@@ -2014,7 +2135,7 @@ var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, var
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch7 = (0, import_store16.__useDispatch)();
+  const dispatch7 = (0, import_store20.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
     dispatch7(slice.actions.setOrder(newIds));
@@ -2150,7 +2271,7 @@ function ClassManagerPanelContent({
   const [scrollElement, setScrollElement] = (0, import_react10.useState)(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    (0, import_store18.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    (0, import_store22.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
   const handleClosePanel = (0, import_react10.useCallback)(() => {
@@ -2174,7 +2295,7 @@ function ClassManagerPanelContent({
     };
   }, []);
   const handleStopSync = (0, import_react10.useCallback)((classId) => {
-    (0, import_store18.__dispatch)(
+    (0, import_store22.__dispatch)(
       slice.actions.update({
         style: {
           id: classId,
@@ -2186,7 +2307,7 @@ function ClassManagerPanelContent({
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = (0, import_react10.useCallback)((classId) => {
-    (0, import_store18.__dispatch)(
+    (0, import_store22.__dispatch)(
       slice.actions.update({
         style: {
           id: classId,
@@ -2324,7 +2445,7 @@ var usePublish = () => {
   return (0, import_query2.useMutation)({
     mutationFn: () => saveGlobalClasses2({ context: "frontend" }),
     onSuccess: async () => {
-      (0, import_editor_documents3.setDocumentModifiedStatus)(false);
+      (0, import_editor_documents4.setDocumentModifiedStatus)(false);
       if (hasDeletedItems()) {
         await onDelete();
       }
@@ -2386,110 +2507,6 @@ var getCapabilities = () => {
   }
 };
 
-// src/load-existing-classes.ts
-var import_store22 = require("@elementor/store");
-
-// src/load-document-classes.ts
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_store20 = require("@elementor/store");
-
-// src/utils/create-labels-for-classes.ts
-function createLabelsForClasses(entries) {
-  return Object.fromEntries(entries.map((e) => [e.id, e.label]));
-}
-
-// src/load-document-classes.ts
-function styleDefinitionsMapWithoutNull(map) {
-  return Object.fromEntries(
-    Object.entries(map).filter(
-      (entry) => entry[1] !== null
-    )
-  );
-}
-function resetGlobalClassesState(globalOrder, classLabels) {
-  (0, import_store20.__dispatch)(
-    slice.actions.load({
-      preview: { items: {}, order: globalOrder },
-      frontend: { items: {}, order: globalOrder },
-      classLabels
-    })
-  );
-}
-async function loadCurrentDocumentClasses() {
-  const previewIndexRes = await apiClient.all("preview");
-  const previewIndex = previewIndexRes.data.data;
-  const classLabels = createLabelsForClasses(previewIndex);
-  const globalOrder = previewIndex.map((e) => e.id);
-  resetGlobalClassesState(globalOrder, classLabels);
-  const postId = (0, import_editor_documents4.getCurrentDocument)()?.id;
-  if (!postId) {
-    return;
-  }
-  const [previewPostRes, frontendPostRes] = await Promise.all([
-    apiClient.getStylesForPost(postId, "preview"),
-    apiClient.getStylesForPost(postId, "frontend")
-  ]);
-  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
-  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
-  (0, import_store20.__dispatch)(
-    slice.actions.load({
-      preview: { items: previewItems, order: globalOrder },
-      frontend: { items: frontendItems, order: globalOrder },
-      classLabels
-    })
-  );
-}
-async function addDocumentClasses(documentId) {
-  const [previewPostRes, frontendPostRes] = await Promise.all([
-    apiClient.getStylesForPost(documentId, "preview"),
-    apiClient.getStylesForPost(documentId, "frontend")
-  ]);
-  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
-  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
-  (0, import_store20.__dispatch)(
-    slice.actions.mergeExistingClasses({
-      preview: previewItems,
-      frontend: frontendItems
-    })
-  );
-}
-
-// src/load-existing-classes.ts
-var pendingLoad = null;
-var pendingIds = /* @__PURE__ */ new Set();
-async function loadExistingClasses(classIds) {
-  const existingClasses = selectGlobalClasses((0, import_store22.__getState)());
-  const missingIds = classIds.filter((id) => !(id in existingClasses));
-  if (missingIds.length === 0) {
-    return;
-  }
-  missingIds.forEach((id) => pendingIds.add(id));
-  if (pendingLoad) {
-    await pendingLoad;
-    return loadExistingClasses(classIds);
-  }
-  pendingLoad = fetchAndMergeClasses();
-  try {
-    await pendingLoad;
-  } finally {
-    pendingLoad = null;
-  }
-}
-async function fetchAndMergeClasses() {
-  const idsToFetch = Array.from(pendingIds);
-  pendingIds.clear();
-  if (idsToFetch.length === 0) {
-    return;
-  }
-  const [previewResponse, frontendResponse] = await Promise.all([
-    apiClient.getStylesByIds(idsToFetch, "preview"),
-    apiClient.getStylesByIds(idsToFetch, "frontend")
-  ]);
-  const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
-  const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
-  (0, import_store22.__dispatch)(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
-}
-
 // src/global-classes-styles-provider.ts
 var MAX_CLASSES = 1e3;
 var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";