@elementor/editor-global-classes 3.33.0-118 → 3.33.0-119

package/dist/index.js

@@ -42,10 +42,11 @@ var import_editor_styles_repository5 = require("@elementor/editor-styles-reposit
 var import_store24 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React20 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_ui17 = require("@elementor/ui");
+var import_editor_ui9 = require("@elementor/editor-ui");
+var import_ui16 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 
 // src/global-classes-styles-provider.ts
@@ -420,16 +421,16 @@ function usePrefetchCssClassUsage() {
 }
 
 // src/components/class-manager/class-manager-panel.tsx
-var React19 = __toESM(require("react"));
-var import_react9 = require("react");
+var React18 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_icons13 = require("@elementor/icons");
+var import_icons12 = require("@elementor/icons");
 var import_query3 = require("@elementor/query");
 var import_store18 = require("@elementor/store");
-var import_ui16 = require("@elementor/ui");
+var import_ui15 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 
 // src/hooks/use-classes-order.ts
@@ -1787,37 +1788,6 @@ function unblockPanelInteractions() {
   extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
 }
 
-// src/components/class-manager/save-changes-dialog.tsx
-var React18 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_icons12 = require("@elementor/icons");
-var import_ui15 = require("@elementor/ui");
-var TITLE_ID2 = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React18.createElement(import_ui15.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React18.createElement(import_icons12.AlertTriangleFilledIcon, { color: "secondary" }), children);
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React18.createElement(import_ui15.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
-var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react8.useState)(false);
-  const { cancel, confirm, discard } = actions;
-  const onConfirm = async () => {
-    setIsConfirming(true);
-    await confirm.action();
-    setIsConfirming(false);
-  };
-  return /* @__PURE__ */ React18.createElement(import_ui15.DialogActions, null, cancel && /* @__PURE__ */ React18.createElement(import_ui15.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React18.createElement(import_ui15.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React18.createElement(import_ui15.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
-};
-SaveChangesDialog.Title = SaveChangesDialogTitle;
-SaveChangesDialog.Content = SaveChangesDialogContent;
-SaveChangesDialog.ContentText = SaveChangesDialogContentText;
-SaveChangesDialog.Actions = SaveChangesDialogActions;
-var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-  return { isOpen, open, close };
-};
-
 // src/components/class-manager/class-manager-panel.tsx
 var id = "global-classes-manager";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
@@ -1836,14 +1806,14 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 function ClassManagerPanel() {
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui8.useDialog)();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     (0, import_store18.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
   usePreventUnload();
-  return /* @__PURE__ */ React19.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React19.createElement(import_ui16.ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n14.__)("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(import_editor_ui8.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,
     {
       sx: { marginLeft: "auto" },
@@ -1856,7 +1826,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React19.createElement(
+  ))), /* @__PURE__ */ React18.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1865,10 +1835,10 @@ function ClassManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React19.createElement(import_ui16.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(import_ui16.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
-    /* @__PURE__ */ React19.createElement(
-      import_ui16.Box,
+    /* @__PURE__ */ React18.createElement(import_ui15.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React18.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React18.createElement(CssClassFilter, null)), /* @__PURE__ */ React18.createElement(ActiveFilters, null)),
+    /* @__PURE__ */ React18.createElement(import_ui15.Divider, null),
+    /* @__PURE__ */ React18.createElement(
+      import_ui15.Box,
       {
         px: 2,
         sx: {
@@ -1876,10 +1846,10 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React19.createElement(GlobalClassesList, { disabled: isPublishing })
+      /* @__PURE__ */ React18.createElement(GlobalClassesList, { disabled: isPublishing })
     )
-  ), /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
-    import_ui16.Button,
+  ), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React18.createElement(
+    import_ui15.Button,
     {
       fullWidth: true,
       size: "small",
@@ -1890,8 +1860,8 @@ function ClassManagerPanel() {
       loading: isPublishing
     },
     (0, import_i18n14.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_ui16.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
-    SaveChangesDialog.Actions,
+  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React18.createElement(
+    import_editor_ui8.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
@@ -1912,11 +1882,11 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React19.createElement(import_icons13.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(import_ui16.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(import_ui16.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, (0, import_i18n14.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React18.createElement(import_ui15.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React18.createElement(import_icons12.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React18.createElement(import_ui15.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React18.createElement(import_ui15.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React18.createElement("strong", null, (0, import_i18n14.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -1942,8 +1912,8 @@ var usePublish = () => {
 var TotalCssClassCounter = () => {
   const filters = useFilters();
   const cssClasses = useClassesOrder();
-  return /* @__PURE__ */ React19.createElement(
-    import_ui16.Chip,
+  return /* @__PURE__ */ React18.createElement(
+    import_ui15.Chip,
     {
       size: "small",
       label: filters ? `${filters.length} / ${cssClasses?.length}` : cssClasses?.length
@@ -1956,7 +1926,7 @@ var ClassManagerButton = () => {
   const document = (0, import_editor_documents5.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = (0, import_editor_documents5.__useActiveDocumentActions)();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
@@ -1971,11 +1941,11 @@ var ClassManagerButton = () => {
     openPanel();
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui17.Tooltip, { title: (0, import_i18n15.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui17.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(SaveChangesDialog, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n15.__)(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { title: (0, import_i18n15.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n15.__)(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React20.createElement(
-    SaveChangesDialog.Actions,
+  ))), /* @__PURE__ */ React19.createElement(
+    import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
@@ -1997,10 +1967,10 @@ var ClassManagerButton = () => {
 };
 
 // src/components/convert-local-class-to-global-class.tsx
-var React21 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui18 = require("@elementor/ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_ui17 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var ConvertLocalClassToGlobalClass = (props) => {
   const localStyleData = props.styleDef;
@@ -2014,8 +1984,8 @@ var ConvertLocalClassToGlobalClass = (props) => {
       props.successCallback(newId);
     }
   };
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
-    import_editor_ui9.MenuListItem,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    import_editor_ui10.MenuListItem,
     {
       disabled: !props.canConvert,
       onClick: handleConversion,
@@ -2029,7 +1999,7 @@ var ConvertLocalClassToGlobalClass = (props) => {
       }
     },
     (0, import_i18n16.__)("Convert to global class", "elementor")
-  ), /* @__PURE__ */ React21.createElement(import_ui18.Divider, null));
+  ), /* @__PURE__ */ React20.createElement(import_ui17.Divider, null));
 };
 function createClassName(prefix) {
   let i = 1;
@@ -2041,11 +2011,11 @@ function createClassName(prefix) {
 }
 
 // src/components/populate-store.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_store20 = require("@elementor/store");
 function PopulateStore() {
   const dispatch5 = (0, import_store20.__useDispatch)();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -2069,7 +2039,7 @@ function PopulateStore() {
 }
 
 // src/sync-with-document.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
@@ -2110,7 +2080,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
       syncWithDocumentSave(panelActions);
     });