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

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import { PanelFooter } from "@elementor/editor-panels";
 import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, useDialog } from "@elementor/editor-ui";
 import { useMutation } from "@elementor/query";
-import { __dispatch as dispatch3 } from "@elementor/store";
+import { __dispatch as dispatch5 } from "@elementor/store";
 import { Alert as Alert2, Box as Box11, Button as Button3, Chip as Chip4, DialogHeader as DialogHeader2, Divider as Divider4, ErrorBoundary, Stack as Stack9 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
 
@@ -305,7 +305,7 @@ var selectOrderedClasses = createSelector(
 var selectClass = (state, id) => state[SLICE_NAME].data.items[id] ?? null;
 var selectEmptyCssClass = 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;
 
@@ -1169,6 +1169,115 @@ var useOrderedClasses = () => {
   return useSelector3(selectOrderedClasses);
 };
 
+// src/load-existing-classes.ts
+import { __dispatch as dispatch4, __getState as getState3 } from "@elementor/store";
+
+// src/load-document-classes.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { __dispatch as dispatch3 } from "@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) {
+  dispatch3(
+    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 = 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);
+  dispatch3(
+    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);
+  dispatch3(
+    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(getState3());
+  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);
+  dispatch4(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
+}
+
 // src/components/class-manager/class-item.tsx
 import * as React15 from "react";
 import { useRef, useState as useState4 } from "react";
@@ -1882,6 +1991,12 @@ var GlobalClassesList = ({
   const dispatch7 = useDispatch();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = useState5(null);
+  const [loading, setLoading] = useState5({});
+  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();
@@ -1970,25 +2085,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
@@ -2173,7 +2294,7 @@ function ClassManagerPanelContent({
   const [scrollElement, setScrollElement] = useState7(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    dispatch3(slice.actions.resetToInitialState({ context: "frontend" }));
+    dispatch5(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
   const handleClosePanel = useCallback(() => {
@@ -2197,7 +2318,7 @@ function ClassManagerPanelContent({
     };
   }, []);
   const handleStopSync = useCallback((classId) => {
-    dispatch3(
+    dispatch5(
       slice.actions.update({
         style: {
           id: classId,
@@ -2209,7 +2330,7 @@ function ClassManagerPanelContent({
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = useCallback((classId) => {
-    dispatch3(
+    dispatch5(
       slice.actions.update({
         style: {
           id: classId,
@@ -2415,110 +2536,6 @@ var getCapabilities = () => {
   }
 };
 
-// src/load-existing-classes.ts
-import { __dispatch as dispatch5, __getState as getState3 } from "@elementor/store";
-
-// src/load-document-classes.ts
-import { getCurrentDocument } from "@elementor/editor-documents";
-import { __dispatch as dispatch4 } from "@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) {
-  dispatch4(
-    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 = 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);
-  dispatch4(
-    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);
-  dispatch4(
-    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(getState3());
-  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);
-  dispatch5(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
-}
-
 // src/global-classes-styles-provider.ts
 var MAX_CLASSES = 1e3;
 var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";