@elementor/editor-global-classes 0.10.0 → 0.11.1

package/dist/index.mjs

@@ -7,17 +7,17 @@ import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   __useActiveDocument as useActiveDocument,
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
-import { ColorSwatchIcon as ColorSwatchIcon2 } from "@elementor/icons";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/class-manager/class-manager-panel.tsx
-import * as React6 from "react";
+import * as React7 from "react";
+import { useEffect } from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -26,7 +26,8 @@ import {
   PanelHeader,
   PanelHeaderTitle
 } from "@elementor/editor-panels";
-import { ColorSwatchIcon, XIcon } from "@elementor/icons";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { XIcon } from "@elementor/icons";
 import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack3 } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
@@ -76,8 +77,8 @@ var slice = createSlice({
       state.isDirty = true;
     },
     delete(state, { payload }) {
-      state.items = Object.fromEntries(Object.entries(state.items).filter(([id]) => id !== payload));
-      state.order = state.order.filter((id) => id !== payload);
+      state.items = Object.fromEntries(Object.entries(state.items).filter(([id2]) => id2 !== payload));
+      state.order = state.order.filter((id2) => id2 !== payload);
       state.isDirty = true;
     },
     setOrder(state, { payload }) {
@@ -118,9 +119,9 @@ var selectGlobalClasses = (state) => state[SLICE_NAME].items;
 var selectOrderedClasses = createSelector(
   selectGlobalClasses,
   selectOrder,
-  (items, order) => order.map((id) => items[id])
+  (items, order) => order.map((id2) => items[id2])
 );
-var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
+var selectClass = (state, id2) => state[SLICE_NAME].items[id2] ?? null;
 var selectIsDirty = (state) => state.globalClasses.isDirty;
 
 // src/hooks/use-dirty-state.ts
@@ -191,18 +192,22 @@ var IntroductionContent = () => {
   ))));
 };
 
+// src/components/class-manager/flipped-color-swatch-icon.tsx
+import * as React2 from "react";
+import { ColorSwatchIcon } from "@elementor/icons";
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+
 // src/components/class-manager/global-classes-list.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
-import { DotsVerticalIcon, PhotoIcon } from "@elementor/icons";
+import { DotsVerticalIcon } from "@elementor/icons";
 import {
   bindMenu,
   bindTrigger,
   Box as Box3,
   IconButton,
   List,
-  ListItem,
   ListItemButton,
   ListItemText,
   Menu,
@@ -228,7 +233,7 @@ var globalClassesStylesProvider = {
   priority: 30,
   actions: {
     get: () => selectOrderedClasses(getState2()),
-    getById: (id) => selectClass(getState2(), id),
+    getById: (id2) => selectClass(getState2(), id2),
     create: (label) => {
       const classes = selectGlobalClasses(getState2());
       const existingLabels = Object.values(classes).map((style) => style.label);
@@ -236,16 +241,16 @@ var globalClassesStylesProvider = {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = Object.keys(classes);
-      const id = generateId("g-", existingIds);
+      const id2 = generateId("g-", existingIds);
       dispatch2(
         slice.actions.add({
-          id,
+          id: id2,
           type: "class",
           label,
           variants: []
         })
       );
-      return id;
+      return id2;
     },
     update: (payload) => {
       dispatch2(
@@ -254,8 +259,8 @@ var globalClassesStylesProvider = {
         })
       );
     },
-    delete: (id) => {
-      dispatch2(slice.actions.delete(id));
+    delete: (id2) => {
+      dispatch2(slice.actions.delete(id2));
     },
     setOrder: (order) => {
       dispatch2(slice.actions.setOrder(order));
@@ -290,7 +295,7 @@ var useOrderedClasses = () => {
 };
 
 // src/components/class-manager/delete-confirmation-dialog.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { createContext, useContext, useState as useState2 } from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
@@ -312,19 +317,19 @@ var DeleteConfirmationProvider = ({ children }) => {
   const closeDialog = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React2.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React2.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React3.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React3.createElement(DeleteConfirmationDialog, { ...dialogProps }));
 };
 var TITLE_ID = "delete-class-dialog";
-var DeleteConfirmationDialog = ({ label, id }) => {
+var DeleteConfirmationDialog = ({ label, id: id2 }) => {
   const { closeDialog } = useDeleteConfirmation();
   const onConfirm = () => {
-    globalClassesStylesProvider.actions.delete(id);
+    globalClassesStylesProvider.actions.delete(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React2.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete global class", "elementor")), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React2.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
+  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete global class", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = useContext(context);
@@ -335,22 +340,22 @@ var useDeleteConfirmation = () => {
 };
 
 // src/components/class-manager/sortable.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Box as Box2,
-  Paper,
   styled,
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React3.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React3.createElement(GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id }) => {
-  return /* @__PURE__ */ React3.createElement(
+var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React4.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React4.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableItem = ({ children, id: id2, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(
     UnstableSortableItem,
     {
-      id,
+      ...props,
+      id: id2,
       render: ({
         itemProps,
         isDragged,
@@ -358,42 +363,45 @@ var SortableItem = ({ children, id }) => {
         itemStyle,
         triggerStyle,
         dropIndicationStyle,
-        showDropIndication
+        showDropIndication,
+        isDragOverlay,
+        isDragPlaceholder
       }) => {
-        return /* @__PURE__ */ React3.createElement(StyledSortableItem, { ...itemProps, elevation: 0, sx: itemStyle, role: "listitem" }, /* @__PURE__ */ React3.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children({
-          itemProps,
-          isDragged,
-          triggerProps,
-          itemStyle,
-          triggerStyle,
-          dropIndicationStyle,
-          showDropIndication
-        }));
+        return /* @__PURE__ */ React4.createElement(
+          Box2,
+          {
+            ...itemProps,
+            style: itemStyle,
+            component: "li",
+            role: "listitem",
+            sx: {
+              backgroundColor: isDragOverlay ? "background.paper" : void 0
+            }
+          },
+          children({
+            itemProps,
+            isDragged,
+            triggerProps,
+            itemStyle,
+            triggerStyle,
+            isDragPlaceholder
+          }),
+          showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+        );
       }
     }
   );
 };
-var StyledSortableItem = styled(Paper)`
-	position: relative;
-
-	&:hover {
-		& .class-item-sortable-trigger {
-			visibility: visible;
-		}
-	}
-
-	& .class-item-sortable-trigger {
-		visibility: hidden;
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translate( -75%, -50% );
-	}
-`;
+var StyledSortableTrigger = styled("div")(({ theme }) => ({
+  position: "absolute",
+  left: 0,
+  top: "50%",
+  transform: `translate( -${theme.spacing(1.5)}, -50% )`,
+  color: theme.palette.action.active
+}));
 var SortableItemIndicator = styled(Box2)`
 	width: 100%;
-	height: 3px;
-	border-radius: ${({ theme }) => theme.spacing(0.5)};
+	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
 `;
 
@@ -402,21 +410,22 @@ var GlobalClassesList = () => {
   const cssClasses = useOrderedClasses();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
-    return /* @__PURE__ */ React4.createElement(EmptyState, null);
+    return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React4.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React4.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React4.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id, label }) => {
+  return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id: id2, label }) => {
     const renameClass = (newLabel) => {
-      globalClassesStylesProvider.actions.update({ label: newLabel, id });
+      globalClassesStylesProvider.actions.update({ label: newLabel, id: id2 });
     };
-    return /* @__PURE__ */ React4.createElement(SortableItem, { key: id, id }, ({ isDragged, showDropIndication, dropIndicationStyle }) => /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React5.createElement(
       ClassItem,
       {
-        id,
+        id: id2,
         label,
         renameClass,
-        selected: isDragged
-      },
-      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+        selected: isDragged,
+        disabled: isDragPlaceholder,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle }
+      }
     ));
   }))));
 };
@@ -427,13 +436,7 @@ var useReorder = () => {
   };
   return [order, reorder];
 };
-var ClassItem = ({
-  id,
-  label,
-  renameClass,
-  selected,
-  children
-}) => {
+var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTriggerProps }) => {
   const {
     ref: editableRef,
     openEditMode,
@@ -450,99 +453,101 @@ var ClassItem = ({
     variant: "popover",
     disableAutoFocus: true
   });
-  return /* @__PURE__ */ React4.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React4.createElement(
-    StyledListItem,
+  const isSelected = (selected || popupState.isOpen) && !disabled;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    StyledListItemButton,
     {
-      component: "div",
-      disablePadding: true,
+      dense: true,
       disableGutters: true,
-      secondaryAction: /* @__PURE__ */ React4.createElement(
-        Tooltip,
-        {
-          placement: "top",
-          className: "class-item-more-actions",
-          title: __4("More actions", "elementor")
-        },
-        /* @__PURE__ */ React4.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React4.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
-      )
+      showActions: isSelected || isEditing,
+      shape: "rounded",
+      onDoubleClick: openEditMode,
+      selected: isSelected,
+      disabled,
+      focusVisibleClassName: "visible-class-item"
     },
-    /* @__PURE__ */ React4.createElement(
-      ListItemButton,
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.createElement(
+      EditableField,
       {
-        dense: true,
-        disableGutters: true,
-        shape: "rounded",
-        onDoubleClick: openEditMode,
-        selected: selected || popupState.isOpen,
-        focusVisibleClassName: "visible-class-item",
-        sx: {
-          minHeight: "36px",
-          display: "flex",
-          "&.visible-class-item": {
-            boxShadow: "none !important"
-          }
-        }
+        ref: editableRef,
+        error,
+        as: Typography3,
+        variant: "caption",
+        ...getEditableProps()
+      }
+    ) : /* @__PURE__ */ React5.createElement(EllipsisWithTooltip, { title: label, as: Typography3, variant: "caption" })),
+    /* @__PURE__ */ React5.createElement(
+      Tooltip,
+      {
+        placement: "top",
+        className: "class-item-more-actions",
+        title: __4("More actions", "elementor")
       },
-      /* @__PURE__ */ React4.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React4.createElement(
-        EditableField,
-        {
-          ref: editableRef,
-          error,
-          as: Typography3,
-          variant: "caption",
-          ...getEditableProps()
+      /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
+    )
+  ), /* @__PURE__ */ React5.createElement(
+    Menu,
+    {
+      ...bindMenu(popupState),
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      MenuItem,
+      {
+        sx: { minWidth: "160px" },
+        onClick: () => {
+          popupState.close();
+          openEditMode();
         }
-      ) : /* @__PURE__ */ React4.createElement(EllipsisWithTooltip, { title: label, as: Typography3, variant: "caption" }))
+      },
+      /* @__PURE__ */ React5.createElement(ListItemText, { primary: __4("Rename", "elementor") })
     ),
-    children,
-    /* @__PURE__ */ React4.createElement(
-      Menu,
+    /* @__PURE__ */ React5.createElement(
+      MenuItem,
       {
-        ...bindMenu(popupState),
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
+        onClick: () => {
+          popupState.close();
+          openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React4.createElement(
-        MenuItem,
-        {
-          sx: { minWidth: "160px" },
-          onClick: () => {
-            popupState.close();
-            openEditMode();
-          }
-        },
-        /* @__PURE__ */ React4.createElement(ListItemText, { primary: __4("Rename", "elementor") })
-      ),
-      /* @__PURE__ */ React4.createElement(
-        MenuItem,
-        {
-          onClick: () => {
-            popupState.close();
-            openDialog({ id, label });
-          }
-        },
-        /* @__PURE__ */ React4.createElement(ListItemText, { primary: __4("Delete", "elementor"), sx: { color: "error.light" } })
-      )
+      /* @__PURE__ */ React5.createElement(ListItemText, { primary: __4("Delete", "elementor"), sx: { color: "error.light" } })
     )
   ));
 };
-var StyledListItem = styled2(ListItem)`
-	.class-item-more-actions {
-		visibility: hidden;
+var StyledListItemButton = styled2(ListItemButton, {
+  shouldForwardProp: (prop) => !["showActions"].includes(prop)
+})(
+  ({ showActions }) => `
+	min-height: 36px;
+
+	&.visible-class-item {
+		box-shadow: none !important;
+	}
+
+	.class-item-more-actions, .class-item-sortable-trigger {
+		visibility: ${showActions ? "visible" : "hidden"};
+	}
+
+	.class-item-sortable-trigger {
+		visibility: ${showActions ? "visible" : "hidden"};
 	}
-	&:hover {
-		.class-item-more-actions {
+
+	&:hover&:not(:disabled) {
+		.class-item-more-actions, .class-item-sortable-trigger  {
 			visibility: visible;
 		}
 	}
-`;
-var EmptyState = () => /* @__PURE__ */ React4.createElement(Stack2, { alignItems: "center", gap: 3, pt: 4, px: 0.5 }, /* @__PURE__ */ React4.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React4.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("No CSS classes created yet", "elementor")), /* @__PURE__ */ React4.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
+`
+);
+var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack2, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
   "CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
   "elementor"
 )));
@@ -560,7 +565,8 @@ var Indicator = styled2(Box3, {
   borderRadius: theme.spacing(0.5),
   border: getIndicatorBorder({ isActive, isError, theme }),
   padding: `0 ${theme.spacing(1)}`,
-  marginLeft: isActive ? theme.spacing(1) : 0
+  marginLeft: isActive ? theme.spacing(1) : 0,
+  minWidth: 0
 }));
 var getIndicatorBorder = ({ isActive, isError, theme }) => {
   if (isError) {
@@ -582,7 +588,7 @@ var validateLabel = (newLabel) => {
 };
 
 // src/components/class-manager/save-changes-dialog.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { useState as useState3 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import {
@@ -594,10 +600,10 @@ import {
   DialogTitle as DialogTitle2
 } from "@elementor/ui";
 var TITLE_ID2 = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React5.createElement(Dialog2, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React5.createElement(DialogTitle2, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React5.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children);
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React5.createElement(DialogContent2, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React5.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React6.createElement(Dialog2, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React6.createElement(DialogTitle2, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React6.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React6.createElement(DialogContent2, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React6.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState3(false);
   const { cancel, confirm } = actions;
@@ -606,7 +612,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React5.createElement(DialogActions2, null, /* @__PURE__ */ React5.createElement(Button2, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React5.createElement(Button2, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React6.createElement(DialogActions2, null, /* @__PURE__ */ React6.createElement(Button2, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React6.createElement(Button2, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -620,15 +626,20 @@ var useDialog = () => {
 };
 
 // src/components/class-manager/class-manager-panel.tsx
+var id = "global-classes-manager";
 var { panel, usePanelActions } = createPanel({
-  id: "class-manager-panel",
-  component: ClassManagerPanel
+  id,
+  component: ClassManagerPanel,
+  onOpen: () => changeEditMode(id),
+  onClose: () => changeEditMode("edit"),
+  allowedEditModes: ["edit", id]
 });
 function ClassManagerPanel() {
   const isDirty3 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React6.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React6.createElement(Panel, null, /* @__PURE__ */ React6.createElement(PanelHeader, null, /* @__PURE__ */ React6.createElement(Stack3, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React6.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React6.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __5("CSS Class manager", "elementor")), /* @__PURE__ */ React6.createElement(
+  usePreventUnload();
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack3, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __5("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -640,7 +651,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React6.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React6.createElement(GlobalClassesList, null)), /* @__PURE__ */ React6.createElement(PanelFooter, null, /* @__PURE__ */ React6.createElement(
+  ))), /* @__PURE__ */ React7.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, null)), /* @__PURE__ */ React7.createElement(PanelFooter, null, /* @__PURE__ */ React7.createElement(
     Button3,
     {
       fullWidth: true,
@@ -651,7 +662,7 @@ function ClassManagerPanel() {
       onClick: publishGlobalClasses
     },
     __5("Save changes", "elementor")
-  )))), /* @__PURE__ */ React6.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React6.createElement(SaveChangesDialog, null, /* @__PURE__ */ React6.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React6.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React6.createElement(SaveChangesDialog.ContentText, null, __5("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React6.createElement(SaveChangesDialog.ContentText, null, __5("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React6.createElement(
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
@@ -671,8 +682,22 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React6.createElement(IconButton2, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React6.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, __5("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(IconButton2, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __5("Something went wrong", "elementor"))));
+var usePreventUnload = () => {
+  const isDirty3 = useDirtyState();
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty3) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty3]);
+};
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
@@ -687,10 +712,10 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__PURE__ */ React7.createElement(ColorSwatchIcon2, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __6("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __6(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __6("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __6(
     "Save your changes before moving to the class manager to ensure all updates are applied and saved.",
     "elementor"
-  )), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __6("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, null, __6("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React8.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
@@ -712,11 +737,11 @@ var ClassManagerButton = () => {
 };
 
 // src/components/populate-store.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
 function PopulateStore() {
   const dispatch3 = useDispatch();
-  useEffect(() => {
+  useEffect2(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
       dispatch3(slice.actions.init({ items: data, order: meta.order }));