@elementor/editor-global-classes 3.35.0-427 → 3.35.0-428

package/dist/index.js

@@ -563,7 +563,7 @@ var import_store26 = require("@elementor/store");
 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_editor_ui9 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui16 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 
@@ -593,9 +593,9 @@ 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_ui9 = require("@elementor/editor-ui");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_icons12 = require("@elementor/icons");
+var import_icons11 = require("@elementor/icons");
 var import_query3 = require("@elementor/query");
 var import_store20 = require("@elementor/store");
 var import_ui15 = require("@elementor/ui");
@@ -1255,8 +1255,8 @@ var useOrderedClasses = () => {
 var React15 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons10 = require("@elementor/icons");
+var import_editor_ui8 = require("@elementor/editor-ui");
+var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
@@ -1511,7 +1511,7 @@ var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React12.createElement(
 // src/components/class-manager/delete-confirmation-dialog.tsx
 var React13 = __toESM(require("react"));
 var import_react5 = require("react");
-var import_icons8 = require("@elementor/icons");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var import_ui10 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 var context = (0, import_react5.createContext)(null);
@@ -1523,15 +1523,14 @@ var DeleteConfirmationProvider = ({ children }) => {
   const closeDialog2 = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React13.createElement(context.Provider, { value: { openDialog: openDialog2, closeDialog: closeDialog2, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React13.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React13.createElement(context.Provider, { value: { openDialog: openDialog2, closeDialog: closeDialog2, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React13.createElement(DeleteClassDialog, { ...dialogProps }));
 };
-var TITLE_ID = "delete-class-dialog";
-var DeleteConfirmationDialog = ({ label, id: id2 }) => {
+var DeleteClassDialog = ({ label, id: id2 }) => {
   const { closeDialog: closeDialog2 } = useDeleteConfirmation();
   const {
     data: { total, content }
   } = useCssClassUsageByID(id2);
-  const onConfirm = () => {
+  const handleConfirm = () => {
     closeDialog2();
     deleteClass(id2);
   };
@@ -1542,16 +1541,7 @@ var DeleteConfirmationDialog = ({ label, id: id2 }) => {
     "Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
   );
-  return /* @__PURE__ */ React13.createElement(import_ui10.Dialog, { open: true, onClose: closeDialog2, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui10.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React13.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n10.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_ui10.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui10.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n10.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_ui10.DialogActions, null, /* @__PURE__ */ React13.createElement(import_ui10.Button, { color: "secondary", onClick: closeDialog2 }, (0, import_i18n10.__)("Not now", "elementor")), /* @__PURE__ */ React13.createElement(
-    import_ui10.Button,
-    {
-      autoFocus: true,
-      variant: "contained",
-      color: "error",
-      onClick: onConfirm
-    },
-    (0, import_i18n10.__)("Delete", "elementor")
-  )));
+  return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n10.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n10.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react5.useContext)(context);
@@ -1563,10 +1553,10 @@ var useDeleteConfirmation = () => {
 
 // src/components/class-manager/sortable.tsx
 var React14 = __toESM(require("react"));
-var import_icons9 = require("@elementor/icons");
+var import_icons8 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
 var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(import_ui11.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(import_icons9.GripVerticalIcon, { fontSize: "tiny" }));
+var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(import_icons8.GripVerticalIcon, { fontSize: "tiny" }));
 var SortableItem = ({ children, id: id2, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     import_ui11.UnstableSortableItem,
@@ -1639,7 +1629,7 @@ var ClassItem = ({
     isEditing,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui7.useEditable)({
+  } = (0, import_editor_ui8.useEditable)({
     value: label,
     onSubmit: renameClass,
     validation: validateLabel
@@ -1652,7 +1642,7 @@ var ClassItem = ({
   });
   const isSelected = (selectedCssUsage === id2 || selected || popupState.isOpen) && !disabled;
   return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui12.Stack, { p: 0 }, /* @__PURE__ */ React15.createElement(
-    import_editor_ui7.WarningInfotip,
+    import_editor_ui8.WarningInfotip,
     {
       open: Boolean(error),
       text: error ?? "",
@@ -1676,14 +1666,14 @@ var ClassItem = ({
       },
       /* @__PURE__ */ React15.createElement(SortableTrigger, { ...sortableTriggerProps }),
       /* @__PURE__ */ React15.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React15.createElement(
-        import_editor_ui7.EditableField,
+        import_editor_ui8.EditableField,
         {
           ref: editableRef,
           as: import_ui12.Typography,
           variant: "caption",
           ...getEditableProps()
         }
-      ) : /* @__PURE__ */ React15.createElement(import_editor_ui7.EllipsisWithTooltip, { title: label, as: import_ui12.Typography, variant: "caption" })),
+      ) : /* @__PURE__ */ React15.createElement(import_editor_ui8.EllipsisWithTooltip, { title: label, as: import_ui12.Typography, variant: "caption" })),
       /* @__PURE__ */ React15.createElement(import_ui12.Box, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
       /* @__PURE__ */ React15.createElement(
         import_ui12.Tooltip,
@@ -1692,7 +1682,7 @@ var ClassItem = ({
           className: "class-item-more-actions",
           title: (0, import_i18n11.__)("More actions", "elementor")
         },
-        /* @__PURE__ */ React15.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons10.DotsVerticalIcon, { fontSize: "tiny" }))
+        /* @__PURE__ */ React15.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
       )
     )
   )), /* @__PURE__ */ React15.createElement(
@@ -1709,7 +1699,7 @@ var ClassItem = ({
       }
     },
     /* @__PURE__ */ React15.createElement(
-      import_editor_ui7.MenuListItem,
+      import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
         onClick: () => {
@@ -1720,7 +1710,7 @@ var ClassItem = ({
       /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
     ),
     /* @__PURE__ */ React15.createElement(
-      import_editor_ui7.MenuListItem,
+      import_editor_ui8.MenuListItem,
       {
         onClick: () => {
           popupState.close();
@@ -1791,7 +1781,7 @@ var validateLabel = (newLabel) => {
 
 // src/components/class-manager/not-found.tsx
 var React16 = __toESM(require("react"));
-var import_icons11 = require("@elementor/icons");
+var import_icons10 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 var getNotFoundType = (searchValue, filters, filteredClasses) => {
@@ -1813,17 +1803,17 @@ var notFound = {
   filterAndSearch: {
     mainText: (0, import_i18n12.__)("Sorry, nothing matched.", "elementor"),
     sceneryText: (0, import_i18n12.__)("Try something else.", "elementor"),
-    icon: /* @__PURE__ */ React16.createElement(import_icons11.PhotoIcon, { color: "inherit", fontSize: "large" })
+    icon: /* @__PURE__ */ React16.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   search: {
     mainText: (0, import_i18n12.__)("Sorry, nothing matched", "elementor"),
     sceneryText: (0, import_i18n12.__)("Clear your input and try something else.", "elementor"),
-    icon: /* @__PURE__ */ React16.createElement(import_icons11.PhotoIcon, { color: "inherit", fontSize: "large" })
+    icon: /* @__PURE__ */ React16.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   filter: {
     mainText: (0, import_i18n12.__)("Sorry, nothing matched that search.", "elementor"),
     sceneryText: (0, import_i18n12.__)("Clear the filters and try something else.", "elementor"),
-    icon: /* @__PURE__ */ React16.createElement(import_icons11.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
+    icon: /* @__PURE__ */ React16.createElement(import_icons10.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
   }
 };
 var NotFound = ({ notFoundType }) => {
@@ -2062,14 +2052,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 } = (0, import_editor_ui8.useDialog)();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
   usePreventUnload();
-  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(
+  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,
     {
       sx: { marginLeft: "auto" },
@@ -2116,8 +2106,8 @@ function ClassManagerPanel() {
       loading: isPublishing
     },
     (0, import_i18n14.__)("Save changes", "elementor")
-  ))))), /* @__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,
+  ))))), /* @__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(
+    import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
@@ -2138,7 +2128,7 @@ function ClassManagerPanel() {
     }
   )));
 }
-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 CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React18.createElement(import_ui15.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React18.createElement(import_icons11.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();
@@ -2188,7 +2178,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 } = (0, import_editor_ui9.useDialog)();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui10.useDialog)();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
@@ -2208,11 +2198,11 @@ var ClassManagerButton = () => {
     });
     prefetchClassesUsage();
   };
-  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.__)(
+  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_ui10.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_editor_ui10.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui10.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui10.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__ */ React19.createElement(
-    import_editor_ui9.SaveChangesDialog.Actions,
+    import_editor_ui10.SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
@@ -2237,7 +2227,7 @@ var ClassManagerButton = () => {
 // src/components/convert-local-class-to-global-class.tsx
 var React20 = __toESM(require("react"));
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_ui10 = require("@elementor/editor-ui");
+var import_editor_ui11 = require("@elementor/editor-ui");
 var import_ui17 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var ConvertLocalClassToGlobalClass = (props) => {
@@ -2259,7 +2249,7 @@ var ConvertLocalClassToGlobalClass = (props) => {
     }
   };
   return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
-    import_editor_ui10.MenuListItem,
+    import_editor_ui11.MenuListItem,
     {
       disabled: !props.canConvert,
       onClick: handleConversion,