@elementor/editor-global-classes 0.11.0 → 0.12.0

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 // src/components/class-manager/class-manager-button.tsx
 import * as React8 from "react";
 import {
-  __useActiveDocument as useActiveDocument,
+  __useActiveDocument as useActiveDocument2,
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
@@ -17,7 +17,12 @@ import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/class-manager/class-manager-panel.tsx
 import * as React7 from "react";
-import { useEffect } from "react";
+import { useEffect, useState as useState4 } from "react";
+import {
+  __useActiveDocument as useActiveDocument,
+  getDocumentModifiedStatus,
+  setDocumentModifiedStatus
+} from "@elementor/editor-documents";
 import {
   __createPanel as createPanel,
   Panel,
@@ -28,6 +33,7 @@ import {
 } from "@elementor/editor-panels";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { XIcon } from "@elementor/icons";
+import { useMutation } from "@elementor/query";
 import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack3 } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
@@ -129,32 +135,44 @@ var useDirtyState = () => {
   return useSelector(selectIsDirty);
 };
 
-// src/publish-global-classes.ts
+// src/save-global-classes.ts
 import { __dispatch as dispatch, __getState as getState } from "@elementor/store";
 
 // src/api.ts
 import { httpService } from "@elementor/http";
 var RESOURCE_URL = "/global-classes";
 var apiClient = {
-  all: () => httpService().get("elementor/v1" + RESOURCE_URL),
-  update: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload)
+  all: () => httpService().get("elementor/v1" + RESOURCE_URL, {
+    params: {
+      context: "preview"
+    }
+  }),
+  publish: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "frontend"
+    }
+  }),
+  saveDraft: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "preview"
+    }
+  })
 };
 
-// src/publish-global-classes.ts
-async function publishGlobalClasses() {
-  if (!isDirty()) {
-    return;
-  }
+// src/save-global-classes.ts
+async function saveGlobalClasses({ context: context2 }) {
   const state = getState().globalClasses;
-  await apiClient.update({
+  const data = {
     items: state.items,
     order: state.order
-  });
+  };
+  if (context2 === "preview") {
+    await apiClient.saveDraft(data);
+    return;
+  }
+  await apiClient.publish(data);
   dispatch(slice.actions.setPristine());
 }
-function isDirty() {
-  return selectIsDirty(getState());
-}
 
 // src/components/class-manager/class-manager-introduction.tsx
 import * as React from "react";
@@ -183,7 +201,14 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(Image, { sx: { width: "100%", height: "312px" }, src: "", alt: "Introduction" }), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+  return /* @__PURE__ */ React.createElement(Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      sx: { width: "100%", height: "312px" },
+      src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
+      alt: ""
+    }
+  ), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
     "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.",
     "elementor"
   )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
@@ -208,7 +233,6 @@ import {
   Box as Box3,
   IconButton,
   List,
-  ListItem,
   ListItemButton,
   ListItemText,
   Menu,
@@ -345,13 +369,12 @@ 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__ */ React4.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React4.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React4.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+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,
@@ -370,55 +393,45 @@ var SortableItem = ({ children, id: id2, ...props }) => {
         isDragPlaceholder
       }) => {
         return /* @__PURE__ */ React4.createElement(
-          StyledSortableItem,
+          Box2,
           {
             ...itemProps,
-            sx: itemStyle,
+            style: itemStyle,
+            component: "li",
             role: "listitem",
-            ...isDragOverlay ? { component: Paper, elevation: 0 } : {}
+            sx: {
+              backgroundColor: isDragOverlay ? "background.paper" : void 0
+            }
           },
-          /* @__PURE__ */ React4.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
           children({
             itemProps,
             isDragged,
             triggerProps,
             itemStyle,
             triggerStyle,
-            dropIndicationStyle,
-            showDropIndication,
             isDragPlaceholder
-          })
+          }),
+          showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
         );
       }
     }
   );
 };
-var StyledSortableItem = styled(Box2)`
-	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};
 `;
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = () => {
+var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
@@ -428,16 +441,16 @@ var GlobalClassesList = () => {
     const renameClass = (newLabel) => {
       globalClassesStylesProvider.actions.update({ label: newLabel, id: id2 });
     };
-    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, showDropIndication, dropIndicationStyle, isDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React5.createElement(
       ClassItem,
       {
         id: id2,
         label,
         renameClass,
         selected: isDragged,
-        disabled: isDragPlaceholder
-      },
-      showDropIndication && /* @__PURE__ */ React5.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+        disabled: disabled || isDragPlaceholder,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle }
+      }
     ));
   }))));
 };
@@ -448,14 +461,7 @@ var useReorder = () => {
   };
   return [order, reorder];
 };
-var ClassItem = ({
-  id: id2,
-  label,
-  renameClass,
-  selected,
-  children,
-  disabled
-}) => {
+var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTriggerProps }) => {
   const {
     ref: editableRef,
     openEditMode,
@@ -472,99 +478,100 @@ var ClassItem = ({
     variant: "popover",
     disableAutoFocus: true
   });
-  return /* @__PURE__ */ React5.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React5.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__ */ React5.createElement(
-        Tooltip,
-        {
-          placement: "top",
-          className: "class-item-more-actions",
-          title: __4("More actions", "elementor")
-        },
-        /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
-      )
+      showActions: isSelected || isEditing,
+      shape: "rounded",
+      onDoubleClick: openEditMode,
+      selected: isSelected,
+      disabled,
+      focusVisibleClassName: "visible-class-item"
     },
+    /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
+    /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.createElement(
+      EditableField,
+      {
+        ref: editableRef,
+        error,
+        as: Typography3,
+        variant: "caption",
+        ...getEditableProps()
+      }
+    ) : /* @__PURE__ */ React5.createElement(EllipsisWithTooltip, { title: label, as: Typography3, variant: "caption" })),
     /* @__PURE__ */ React5.createElement(
-      ListItemButton,
+      Tooltip,
       {
-        dense: true,
-        disableGutters: true,
-        shape: "rounded",
-        onDoubleClick: openEditMode,
-        selected: selected || popupState.isOpen,
-        disabled,
-        focusVisibleClassName: "visible-class-item",
-        sx: {
-          minHeight: "36px",
-          display: "flex",
-          "&.visible-class-item": {
-            boxShadow: "none !important"
-          }
-        }
+        placement: "top",
+        className: "class-item-more-actions",
+        title: __4("More actions", "elementor")
       },
-      /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.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__ */ React5.createElement(EllipsisWithTooltip, { title: label, as: Typography3, variant: "caption" }))
+      },
+      /* @__PURE__ */ React5.createElement(ListItemText, { primary: __4("Rename", "elementor") })
     ),
-    children,
     /* @__PURE__ */ React5.createElement(
-      Menu,
+      MenuItem,
       {
-        ...bindMenu(popupState),
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
+        onClick: () => {
+          popupState.close();
+          openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(
-        MenuItem,
-        {
-          sx: { minWidth: "160px" },
-          onClick: () => {
-            popupState.close();
-            openEditMode();
-          }
-        },
-        /* @__PURE__ */ React5.createElement(ListItemText, { primary: __4("Rename", "elementor") })
-      ),
-      /* @__PURE__ */ React5.createElement(
-        MenuItem,
-        {
-          onClick: () => {
-            popupState.close();
-            openDialog({ id: id2, label });
-          }
-        },
-        /* @__PURE__ */ React5.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__ */ 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"
@@ -583,7 +590,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) {
@@ -647,36 +655,46 @@ var id = "global-classes-manager";
 var { panel, usePanelActions } = createPanel({
   id,
   component: ClassManagerPanel,
-  onOpen: () => changeEditMode(id),
-  onClose: () => changeEditMode("edit"),
-  allowedEditModes: ["edit", id]
+  allowedEditModes: ["edit", id],
+  onOpen: () => {
+    changeEditMode(id);
+    return getDocumentModifiedStatus();
+  },
+  onClose: (documentModifiedState) => {
+    changeEditMode("edit");
+    if (getDocumentModifiedStatus() !== documentModifiedState) {
+      setDocumentModifiedStatus(documentModifiedState);
+    }
+  }
 });
 function ClassManagerPanel() {
-  const isDirty3 = useDirtyState();
+  const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   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(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" },
       onClose: () => {
-        if (isDirty3) {
+        if (isDirty2) {
           openSaveChangesDialog();
           return;
         }
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React7.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, null)), /* @__PURE__ */ React7.createElement(PanelFooter, null, /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, { disabled: isPublishing })), /* @__PURE__ */ React7.createElement(PanelFooter, null, /* @__PURE__ */ React7.createElement(
     Button3,
     {
       fullWidth: true,
       size: "small",
-      variant: "contained",
       color: "global",
-      disabled: !isDirty3,
-      onClick: publishGlobalClasses
+      variant: "contained",
+      onClick: publish,
+      disabled: !isDirty2,
+      loading: isPublishing
     },
     __5("Save changes", "elementor")
   )))), /* @__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(
@@ -690,7 +708,7 @@ function ClassManagerPanel() {
         confirm: {
           label: __5("Save & Continue", "elementor"),
           action: async () => {
-            await publishGlobalClasses();
+            await publish();
             closeSaveChangesDialog();
             closePanel();
           }
@@ -702,10 +720,10 @@ function ClassManagerPanel() {
 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();
+  const isDirty2 = useDirtyState();
   useEffect(() => {
     const handleBeforeUnload = (event) => {
-      if (isDirty3) {
+      if (isDirty2) {
         event.preventDefault();
       }
     };
@@ -713,12 +731,24 @@ var usePreventUnload = () => {
     return () => {
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
-  }, [isDirty3]);
+  }, [isDirty2]);
+};
+var usePublish = () => {
+  const document = useActiveDocument();
+  const [initialDocumentStatus] = useState4(document?.isDirty ?? false);
+  return useMutation({
+    mutationFn: () => saveGlobalClasses({ context: "frontend" }),
+    onSuccess: () => {
+      if (initialDocumentStatus !== document?.isDirty) {
+        setDocumentModifiedStatus(initialDocumentStatus);
+      }
+    }
+  });
 };
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = useActiveDocument();
+  const document = useActiveDocument2();
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = useActiveDocumentActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
@@ -768,7 +798,8 @@ function PopulateStore() {
 }
 
 // src/sync-with-document-save.ts
-import { __privateRunCommandSync as runCommandSync, registerDataHook } from "@elementor/editor-v1-adapters";
+import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { __getState as getState3, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
@@ -777,16 +808,20 @@ function syncWithDocumentSave() {
 }
 function syncDirtyState() {
   return subscribeWithSelector2(selectIsDirty, () => {
-    if (!isDirty2()) {
+    if (!isDirty()) {
       return;
     }
-    runCommandSync("document/save/set-is-modified", { status: true }, { internal: true });
+    setDocumentModifiedStatus2(true);
   });
 }
 function bindSaveAction() {
-  registerDataHook("after", "document/save/save", publishGlobalClasses);
+  registerDataHook("after", "document/save/save", (args) => {
+    return saveGlobalClasses({
+      context: args.status === "publish" ? "frontend" : "preview"
+    });
+  });
 }
-function isDirty2() {
+function isDirty() {
   return selectIsDirty(getState3());
 }