@elementor/editor-global-classes 4.0.0-564 → 4.0.0-573

package/dist/index.js

@@ -598,7 +598,7 @@ var import_react8 = require("react");
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui9 = require("@elementor/editor-ui");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons11 = require("@elementor/icons");
 var import_query3 = require("@elementor/query");
 var import_store20 = require("@elementor/store");
@@ -1247,6 +1247,7 @@ var React15 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_ui8 = require("@elementor/editor-ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -1611,7 +1612,9 @@ var ClassItem = ({
   selected,
   disabled,
   sortableTriggerProps,
-  showSortIndicator
+  showSortIndicator,
+  syncToV3,
+  onToggleSync
 }) => {
   const itemRef = (0, import_react6.useRef)(null);
   const {
@@ -1700,6 +1703,16 @@ var ClassItem = ({
       },
       /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
     ),
+    (0, import_editor_v1_adapters2.isExperimentActive)("e_design_system_sync") && onToggleSync && /* @__PURE__ */ React15.createElement(
+      import_editor_ui8.MenuListItem,
+      {
+        onClick: () => {
+          popupState.close();
+          onToggleSync(id2, !syncToV3);
+        }
+      },
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n11.__)("Stop syncing to Version 3", "elementor") : (0, import_i18n11.__)("Sync to Version 3", "elementor"))
+    ),
     /* @__PURE__ */ React15.createElement(
       import_editor_ui8.MenuListItem,
       {
@@ -1880,7 +1893,7 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
 );
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = ({ disabled }) => {
+var GlobalClassesList = ({ disabled, onStopSyncRequest }) => {
   const {
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
@@ -1924,27 +1937,27 @@ var GlobalClassesList = ({ disabled }) => {
       onChange: reorderClasses,
       disableDragOverlay: !allowSorting
     },
-    filteredCssClasses?.map(({ id: id2, label }) => /* @__PURE__ */ React17.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
+    filteredCssClasses?.map((cssClass) => /* @__PURE__ */ React17.createElement(SortableItem, { key: cssClass.id, id: cssClass.id }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
       if (isDragged && !draggedItemId) {
-        setDraggedItemId(id2);
+        setDraggedItemId(cssClass.id);
       }
       return /* @__PURE__ */ React17.createElement(
         ClassItem,
         {
-          id: id2,
-          label,
+          id: cssClass.id,
+          label: cssClass.label,
           renameClass: (newLabel) => {
             trackGlobalClasses({
               event: "classRenamed",
-              classId: id2,
-              oldValue: label,
+              classId: cssClass.id,
+              oldValue: cssClass.label,
               newValue: newLabel,
               source: "class-manager"
             });
             dispatch5(
               slice.actions.update({
                 style: {
-                  id: id2,
+                  id: cssClass.id,
                   label: newLabel
                 }
               })
@@ -1956,7 +1969,22 @@ var GlobalClassesList = ({ disabled }) => {
             ...triggerProps,
             style: triggerStyle
           },
-          showSortIndicator: allowSorting
+          showSortIndicator: allowSorting,
+          syncToV3: cssClass.sync_to_v3,
+          onToggleSync: (id2, newValue) => {
+            if (!newValue && onStopSyncRequest) {
+              onStopSyncRequest(id2);
+            } else {
+              dispatch5(
+                slice.actions.update({
+                  style: {
+                    id: id2,
+                    sync_to_v3: newValue
+                  }
+                })
+              );
+            }
+          }
         }
       );
     }))
@@ -2030,7 +2058,7 @@ var reloadDocument = () => {
   const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
   const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
   documentsManager.invalidateCache();
-  return (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
+  return (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
     id: currentDocument?.id,
     shouldScroll: false,
     shouldNavigateToDefaultRoute: false
@@ -2041,11 +2069,11 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)(id);
+    (0, import_editor_v1_adapters3.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: async () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
+    (0, import_editor_v1_adapters3.changeEditMode)("edit");
     await reloadDocument();
     unblockPanelInteractions();
   },
@@ -2055,11 +2083,23 @@ function ClassManagerPanel() {
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
+  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react8.useState)(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
+  const handleStopSync = (0, import_react8.useCallback)((classId) => {
+    (0, import_store20.__dispatch)(
+      slice.actions.update({
+        style: {
+          id: classId,
+          sync_to_v3: false
+        }
+      })
+    );
+    setStopSyncConfirmation(null);
+  }, []);
   usePreventUnload();
   return /* @__PURE__ */ React18.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React18.createElement(import_ui15.ErrorBoundary, { fallback: /* @__PURE__ */ React18.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React18.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React18.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n14.__)("Class Manager", "elementor")), /* @__PURE__ */ React18.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React18.createElement(
     CloseButton,
@@ -2094,7 +2134,13 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React18.createElement(GlobalClassesList, { disabled: isPublishing })
+      /* @__PURE__ */ React18.createElement(
+        GlobalClassesList,
+        {
+          disabled: isPublishing,
+          onStopSyncRequest: (classId) => setStopSyncConfirmation(classId)
+        }
+      )
     )
   ), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React18.createElement(
     import_ui15.Button,
@@ -2108,7 +2154,14 @@ function ClassManagerPanel() {
       loading: isPublishing
     },
     (0, import_i18n14.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React18.createElement(
+  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), stopSyncConfirmation && /* @__PURE__ */ React18.createElement(
+    StopSyncConfirmationDialog,
+    {
+      open: true,
+      onClose: () => setStopSyncConfirmation(null),
+      onConfirm: () => handleStopSync(stopSyncConfirmation)
+    }
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React18.createElement(
     import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
@@ -2168,6 +2221,19 @@ var TotalCssClassCounter = () => {
     }
   );
 };
+var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "secondary" }, (0, import_i18n14.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n14.__)("You're about to stop syncing a typography class to Version 3.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n14.__)(
+  "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
+  "elementor"
+))), /* @__PURE__ */ React18.createElement(
+  import_editor_ui9.ConfirmationDialog.Actions,
+  {
+    onClose,
+    onConfirm,
+    cancelLabel: (0, import_i18n14.__)("Cancel", "elementor"),
+    confirmLabel: (0, import_i18n14.__)("Got it", "elementor"),
+    color: "secondary"
+  }
+));
 
 // src/components/class-manager/class-manager-button.tsx
 var trackGlobalClassesButton = () => {
@@ -2278,7 +2344,7 @@ function createClassName(prefix) {
 
 // src/components/open-panel-from-url.tsx
 var import_react9 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
@@ -2291,7 +2357,7 @@ function OpenPanelFromUrl() {
     if (activePanel !== PANEL_ID) {
       return;
     }
-    const cleanup = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
       if (hasOpened.current) {
         return;
       }
@@ -2776,12 +2842,12 @@ var initMcpIntegration = () => {
 
 // src/sync-with-document.tsx
 var import_react11 = require("react");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_documents5 = require("@elementor/editor-documents");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store24 = require("@elementor/store");
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -2797,7 +2863,7 @@ function syncDirtyState() {
   });
 }
 function bindSaveAction(panelActions) {
-  (0, import_editor_v1_adapters4.registerDataHook)("dependency", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters5.registerDataHook)("dependency", "document/save/save", (args) => {
     const user = (0, import_editor_current_user2.getCurrentUser)();
     const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
     if (!canEdit) {
@@ -2818,7 +2884,7 @@ function isDirty() {
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
   (0, import_react11.useEffect)(() => {
-    (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
+    (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
       syncWithDocumentSave(panelActions);
     });
   }, []);