@elementor/editor-global-classes 0.14.0 → 0.15.3

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @elementor/editor-global-classes
 
+## 0.15.3
+
+### Patch Changes
+
+- Updated dependencies [02fd724]
+- Updated dependencies [9b5e475]
+- Updated dependencies [94aa98c]
+- Updated dependencies [13cc0d0]
+- Updated dependencies [c6937f8]
+- Updated dependencies [f644084]
+  - @elementor/editor-styles-repository@0.8.3
+  - @elementor/editor-editing-panel@1.27.0
+  - @elementor/editor-ui@0.7.0
+  - @elementor/editor-styles@0.6.5
+
+## 0.15.2
+
+### Patch Changes
+
+- 5a3e47f: Fix global classes header text.
+- Updated dependencies [8b40d87]
+  - @elementor/editor-editing-panel@1.26.1
+
+## 0.15.1
+
+### Patch Changes
+
+- Updated dependencies [b31a032]
+  - @elementor/editor-editing-panel@1.26.0
+
+## 0.15.0
+
+### Minor Changes
+
+- fdfc87a: Classes and selector UI updates.
+- b30b8c4: Reload documents when deleting a global class.
+
+### Patch Changes
+
+- Updated dependencies [fdfc87a]
+- Updated dependencies [33bc54d]
+- Updated dependencies [b30b8c4]
+- Updated dependencies [548209b]
+  - @elementor/editor-editing-panel@1.25.0
+  - @elementor/editor-ui@0.6.0
+  - @elementor/editor-documents@0.13.0
+  - @elementor/editor-styles-repository@0.8.2
+
+## 0.14.1
+
+### Patch Changes
+
+- 666ffdd: Change theme provider styles for editing panel and class manager panel
+- Updated dependencies [c262b65]
+- Updated dependencies [951d633]
+- Updated dependencies [666ffdd]
+- Updated dependencies [311ff8e]
+- Updated dependencies [67f2795]
+- Updated dependencies [7aaf98f]
+  - @elementor/editor-editing-panel@1.24.0
+  - @elementor/editor-ui@0.5.1
+  - @elementor/editor@0.18.5
+  - @elementor/editor-panels@0.14.0
+  - @elementor/editor-documents@0.12.2
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/index.js

@@ -27,21 +27,22 @@ var import_editor = require("@elementor/editor");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_store16 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React8 = __toESM(require("react"));
-var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_ui7 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
 var React7 = __toESM(require("react"));
 var import_react4 = require("react");
-var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons6 = require("@elementor/icons");
 var import_query = require("@elementor/query");
 var import_ui6 = require("@elementor/ui");
@@ -194,8 +195,12 @@ var ClassManagerIntroduction = () => {
     import_editor_ui.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n.__)("CSS Class manager", "elementor"),
+      title: (0, import_i18n.__)("Class Manager", "elementor"),
       content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      image: {
+        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
+        alt: ""
+      },
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -206,34 +211,18 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(
-    import_ui.Image,
-    {
-      sx: { width: "100%", height: "312px" },
-      src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
-      alt: ""
-    }
-  ), /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
-    "The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.",
+  return /* @__PURE__ */ React.createElement(import_ui.Box, { p: 3 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
+    "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
   )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
-    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
+    "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
-  ))));
+  )));
 };
 
-// src/components/class-manager/flipped-color-swatch-icon.tsx
-var React2 = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
-var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
-
-// src/components/class-manager/global-classes-list.tsx
-var React5 = __toESM(require("react"));
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+// src/components/class-manager/delete-class.ts
+var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
 // src/global-classes-styles-provider.ts
 var import_editor_styles2 = require("@elementor/editor-styles");
@@ -290,11 +279,46 @@ var globalClassesStylesProvider = {
   },
   subscribe: (cb) => (0, import_store6.__subscribeWithSelector)((state) => state.globalClasses, cb),
   labels: {
-    singular: (0, import_i18n2.__)("Global class", "elementor"),
-    plural: (0, import_i18n2.__)("Global CSS classes", "elementor")
+    singular: (0, import_i18n2.__)("class", "elementor"),
+    plural: (0, import_i18n2.__)("classes", "elementor")
   }
 };
 
+// src/components/class-manager/delete-class.ts
+var isDeleted = false;
+var deleteClass = (id2) => {
+  globalClassesStylesProvider.actions.delete(id2);
+  isDeleted = true;
+};
+var onDelete = async () => {
+  await reloadDocument();
+  isDeleted = false;
+};
+var hasDeletedItems = () => isDeleted;
+var reloadDocument = () => {
+  const currentDocument = (0, import_editor_documents.getCurrentDocument)();
+  const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
+  documentsManager.invalidateCache();
+  return (0, import_editor_v1_adapters.__privateRunCommand)("editor/documents/switch", {
+    id: currentDocument?.id,
+    shouldScroll: false,
+    shouldNavigateToDefaultRoute: false
+  });
+};
+
+// src/components/class-manager/flipped-color-swatch-icon.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+
+// src/components/class-manager/global-classes-list.tsx
+var React5 = __toESM(require("react"));
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+
 // src/hooks/use-classes-order.ts
 var import_store8 = require("@elementor/store");
 var useClassesOrder = () => {
@@ -328,13 +352,13 @@ var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
   const { closeDialog } = useDeleteConfirmation();
   const onConfirm = () => {
-    globalClassesStylesProvider.actions.delete(id2);
+    deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete global class", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
+  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React3.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react2.useContext)(context);
@@ -508,7 +532,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n4.__)("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       import_editor_ui2.MenuListItem,
@@ -518,7 +542,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n4.__)("Delete", "elementor"))
     )
   ));
 };
@@ -579,10 +603,10 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
 };
 var validateLabel = (newLabel) => {
   if (!import_editor_styles_repository.stylesRepository.isLabelValid(newLabel)) {
-    return (0, import_i18n4.__)("Format is not valid", "elementor");
+    return (0, import_i18n4.__)("Invalid format", "elementor");
   }
   if (import_editor_styles_repository.stylesRepository.isLabelExist(newLabel)) {
-    return (0, import_i18n4.__)("Existing name", "elementor");
+    return (0, import_i18n4.__)("Name exists", "elementor");
   }
   return null;
 };
@@ -625,14 +649,10 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters.changeEditMode)(id);
-    return (0, import_editor_documents.getDocumentModifiedStatus)();
+    (0, import_editor_v1_adapters2.changeEditMode)(id);
   },
-  onClose: (documentModifiedState) => {
-    (0, import_editor_v1_adapters.changeEditMode)("edit");
-    if ((0, import_editor_documents.getDocumentModifiedStatus)() !== documentModifiedState) {
-      (0, import_editor_documents.setDocumentModifiedStatus)(documentModifiedState);
-    }
+  onClose: () => {
+    (0, import_editor_v1_adapters2.changeEditMode)("edit");
   }
 });
 function ClassManagerPanel() {
@@ -641,10 +661,11 @@ function ClassManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   usePreventUnload();
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
+      disabled: isPublishing,
       onClose: () => {
         if (isDirty2) {
           openSaveChangesDialog();
@@ -702,13 +723,12 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  const document = (0, import_editor_documents.__useActiveDocument)();
-  const [initialDocumentStatus] = (0, import_react4.useState)(document?.isDirty ?? false);
   return (0, import_query.useMutation)({
     mutationFn: () => saveGlobalClasses({ context: "frontend" }),
-    onSuccess: () => {
-      if (initialDocumentStatus !== document?.isDirty) {
-        (0, import_editor_documents.setDocumentModifiedStatus)(initialDocumentStatus);
+    onSuccess: async () => {
+      (0, import_editor_documents2.setDocumentModifiedStatus)(false);
+      if (hasDeletedItems()) {
+        await onDelete();
       }
     }
   });
@@ -716,9 +736,9 @@ var usePublish = () => {
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = (0, import_editor_documents2.__useActiveDocument)();
+  const document = (0, import_editor_documents3.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
-  const { save: saveDocument } = (0, import_editor_documents2.__useActiveDocumentActions)();
+  const { save: saveDocument } = (0, import_editor_documents3.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const handleOpenPanel = () => {
     if (document?.isDirty) {
@@ -727,15 +747,15 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n6.__)(
-    "Save your changes before moving to the class manager to ensure all updates are applied and saved.",
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n6.__)(
+    "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n6.__)("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React8.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n6.__)("Keep editing", "elementor"),
+          label: (0, import_i18n6.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
@@ -766,8 +786,8 @@ function PopulateStore() {
 }
 
 // src/sync-with-document-save.ts
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_store14 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
@@ -779,11 +799,11 @@ function syncDirtyState() {
     if (!isDirty()) {
       return;
     }
-    (0, import_editor_documents3.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters3.registerDataHook)("after", "document/save/save", (args) => {
     return saveGlobalClasses({
       context: args.status === "publish" ? "frontend" : "preview"
     });
@@ -806,7 +826,7 @@ function init() {
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });
 }