@elementor/editor-global-classes 0.7.1 → 0.9.0

package/dist/index.mjs

@@ -7,92 +7,37 @@ 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 React6 from "react";
+import * as React7 from "react";
 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 React5 from "react";
+import * as React6 from "react";
 import {
   __createPanel as createPanel,
   Panel,
   PanelBody,
+  PanelFooter,
   PanelHeader,
   PanelHeaderTitle
 } from "@elementor/editor-panels";
 import { ColorSwatchIcon, XIcon } from "@elementor/icons";
-import { Alert, Box as Box4, ErrorBoundary, IconButton as IconButton2, Stack as Stack3 } from "@elementor/ui";
+import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack3 } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
-// src/components/class-manager/class-manager-introduction.tsx
-import * as React from "react";
-import { useState } from "react";
-import { useSuppressedMessage } from "@elementor/editor-current-user";
-import { IntroductionModal } from "@elementor/editor-ui";
-import { Box, Image, Stack, Typography } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
-var MESSAGE_KEY = "global-class-manager-4";
-var ClassManagerIntroduction = () => {
-  const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
-  const [shouldShowIntroduction, setShouldShowIntroduction] = useState(!isMessageSuppressed);
-  return /* @__PURE__ */ React.createElement(
-    IntroductionModal,
-    {
-      open: shouldShowIntroduction,
-      title: __("CSS Class manager", "elementor"),
-      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
-      handleClose: (shouldShowAgain) => {
-        if (!shouldShowAgain) {
-          suppressMessage();
-        }
-        setShouldShowIntroduction(false);
-      }
-    }
-  );
-};
-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" }, __(
-    "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" }, __(
-    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
-    "elementor"
-  ))));
-};
+// src/hooks/use-dirty-state.ts
+import { __useSelector as useSelector } from "@elementor/store";
 
-// src/components/class-manager/global-classes-list.tsx
-import * as React4 from "react";
-import { stylesRepository } from "@elementor/editor-styles-repository";
-import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
-import { DotsVerticalIcon, PhotoIcon } from "@elementor/icons";
+// src/store.ts
+import { mergeProps } from "@elementor/editor-props";
 import {
-  bindMenu,
-  bindTrigger,
-  Box as Box3,
-  IconButton,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  Menu,
-  MenuItem,
-  Stack as Stack2,
-  styled as styled2,
-  Tooltip,
-  Typography as Typography3,
-  usePopupState
-} from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-
-// src/global-classes-styles-provider.ts
-import { generateId } from "@elementor/editor-styles";
+  getVariantByMeta
+} from "@elementor/editor-styles";
 import {
-  __dispatch as dispatch,
-  __getState as getState,
-  __subscribeWithSelector as subscribeWithSelector
+  __createSelector as createSelector,
+  __createSlice as createSlice
 } from "@elementor/store";
-import { __ as __2 } from "@wordpress/i18n";
 
 // src/errors.ts
 import { createError } from "@elementor/utils";
@@ -106,15 +51,6 @@ var GlobalClassLabelAlreadyExistsError = createError({
 });
 
 // src/store.ts
-import { mergeProps } from "@elementor/editor-props";
-import {
-  getVariantByMeta
-} from "@elementor/editor-styles";
-import {
-  __createSelector as createSelector,
-  __createSlice as createSlice,
-  __useSelector as useSelector
-} from "@elementor/store";
 var initialState = {
   items: {},
   order: [],
@@ -142,6 +78,7 @@ var slice = createSlice({
     },
     setOrder(state, { payload }) {
       state.order = payload;
+      state.isDirty = true;
     },
     update(state, { payload }) {
       const style = state.items[payload.style.id];
@@ -174,35 +111,129 @@ var slice = createSlice({
 });
 var selectOrder = (state) => state[SLICE_NAME].order;
 var selectGlobalClasses = (state) => state[SLICE_NAME].items;
-var selectOrderedGlobalClasses = createSelector(
+var selectOrderedClasses = createSelector(
   selectGlobalClasses,
   selectOrder,
   (items, order) => order.map((id) => items[id])
 );
 var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
 var selectIsDirty = (state) => state.globalClasses.isDirty;
-var useOrderedGlobalClasses = () => {
-  const items = useSelector(selectOrderedGlobalClasses);
-  return items;
+
+// src/hooks/use-dirty-state.ts
+var useDirtyState = () => {
+  return useSelector(selectIsDirty);
+};
+
+// src/publish-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)
+};
+
+// src/publish-global-classes.ts
+async function publishGlobalClasses() {
+  if (!isDirty()) {
+    return;
+  }
+  const state = getState().globalClasses;
+  await apiClient.update({
+    items: state.items,
+    order: state.order
+  });
+  dispatch(slice.actions.setPristine());
+}
+function isDirty() {
+  return selectIsDirty(getState());
+}
+
+// src/components/class-manager/class-manager-introduction.tsx
+import * as React from "react";
+import { useState } from "react";
+import { useSuppressedMessage } from "@elementor/editor-current-user";
+import { IntroductionModal } from "@elementor/editor-ui";
+import { Box, Image, Stack, Typography } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var MESSAGE_KEY = "global-class-manager-4";
+var ClassManagerIntroduction = () => {
+  const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = useState(!isMessageSuppressed);
+  return /* @__PURE__ */ React.createElement(
+    IntroductionModal,
+    {
+      open: shouldShowIntroduction,
+      title: __("CSS Class manager", "elementor"),
+      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      handleClose: (shouldShowAgain) => {
+        if (!shouldShowAgain) {
+          suppressMessage();
+        }
+        setShouldShowIntroduction(false);
+      }
+    }
+  );
+};
+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" }, __(
+    "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" }, __(
+    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
+    "elementor"
+  ))));
 };
-var useGlobalClassesOrder = () => useSelector(selectOrder);
+
+// src/components/class-manager/global-classes-list.tsx
+import * as React4 from "react";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
+import { DotsVerticalIcon, PhotoIcon } from "@elementor/icons";
+import {
+  bindMenu,
+  bindTrigger,
+  Box as Box3,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack as Stack2,
+  styled as styled2,
+  Tooltip,
+  Typography as Typography3,
+  usePopupState
+} from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/global-classes-styles-provider.ts
+import { generateId } from "@elementor/editor-styles";
+import {
+  __dispatch as dispatch2,
+  __getState as getState2,
+  __subscribeWithSelector as subscribeWithSelector
+} from "@elementor/store";
+import { __ as __2 } from "@wordpress/i18n";
 var globalClassesStylesProvider = {
   key: "global-classes",
   priority: 30,
   actions: {
-    get: () => selectOrderedGlobalClasses(getState()),
-    getById: (id) => selectClass(getState(), id),
+    get: () => selectOrderedClasses(getState2()),
+    getById: (id) => selectClass(getState2(), id),
     create: (label) => {
-      const classes = selectGlobalClasses(getState());
+      const classes = selectGlobalClasses(getState2());
       const existingLabels = Object.values(classes).map((style) => style.label);
       if (existingLabels.includes(label)) {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = Object.keys(classes);
       const id = generateId("g-", existingIds);
-      dispatch(
+      dispatch2(
         slice.actions.add({
           id,
           type: "class",
@@ -213,20 +244,20 @@ var globalClassesStylesProvider = {
       return id;
     },
     update: (payload) => {
-      dispatch(
+      dispatch2(
         slice.actions.update({
           style: payload
         })
       );
     },
     delete: (id) => {
-      dispatch(slice.actions.delete(id));
+      dispatch2(slice.actions.delete(id));
     },
     setOrder: (order) => {
-      dispatch(slice.actions.setOrder(order));
+      dispatch2(slice.actions.setOrder(order));
     },
     updateProps: (args) => {
-      dispatch(
+      dispatch2(
         slice.actions.updateProps({
           id: args.id,
           meta: args.meta,
@@ -242,6 +273,18 @@ var globalClassesStylesProvider = {
   }
 };
 
+// src/hooks/use-classes-order.ts
+import { __useSelector as useSelector2 } from "@elementor/store";
+var useClassesOrder = () => {
+  return useSelector2(selectOrder);
+};
+
+// src/hooks/use-ordered-classes.ts
+import { __useSelector as useSelector3 } from "@elementor/store";
+var useOrderedClasses = () => {
+  return useSelector3(selectOrderedClasses);
+};
+
 // src/components/class-manager/delete-confirmation-dialog.tsx
 import * as React2 from "react";
 import { createContext, useContext, useState as useState2 } from "react";
@@ -352,8 +395,8 @@ var SortableItemIndicator = styled(Box2)`
 
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = () => {
-  const cssClasses = useOrderedGlobalClasses();
-  const [classesOrder, reorderClasses] = useClassesOrder();
+  const cssClasses = useOrderedClasses();
+  const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React4.createElement(EmptyState, null);
   }
@@ -373,8 +416,8 @@ var GlobalClassesList = () => {
     ));
   }))));
 };
-var useClassesOrder = () => {
-  const order = useGlobalClassesOrder();
+var useReorder = () => {
+  const order = useClassesOrder();
   const reorder = (newIds) => {
     globalClassesStylesProvider.actions.setOrder(newIds);
   };
@@ -534,53 +577,118 @@ var validateLabel = (newLabel) => {
   return null;
 };
 
+// src/components/class-manager/unsaved-changes-dialog.tsx
+import * as React5 from "react";
+import { useState as useState3 } from "react";
+import { AlertTriangleFilledIcon } from "@elementor/icons";
+import {
+  Button as Button2,
+  Dialog as Dialog2,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  DialogContentText as DialogContentText2,
+  DialogTitle as DialogTitle2
+} from "@elementor/ui";
+var TITLE_ID2 = "unsaved-changes-dialog";
+var UnsavedChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React5.createElement(Dialog2, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var UnsavedChangesDialogTitle = ({ 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 UnsavedChangesDialogContent = ({ children }) => /* @__PURE__ */ React5.createElement(DialogContent2, null, /* @__PURE__ */ React5.createElement(DialogContentText2, { variant: "body2", color: "textPrimary" }, children));
+var UnsavedChangesDialogActions = ({ actions }) => {
+  const { cancel, confirm } = actions;
+  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: confirm.action }, confirm.label));
+};
+UnsavedChangesDialog.Title = UnsavedChangesDialogTitle;
+UnsavedChangesDialog.Content = UnsavedChangesDialogContent;
+UnsavedChangesDialog.Actions = UnsavedChangesDialogActions;
+var useDialog = () => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
+};
+
 // src/components/class-manager/class-manager-panel.tsx
 var { panel, usePanelActions } = createPanel({
   id: "class-manager-panel",
   component: ClassManagerPanel
 });
 function ClassManagerPanel() {
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React5.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React5.createElement(Panel, null, /* @__PURE__ */ React5.createElement(PanelHeader, null, /* @__PURE__ */ React5.createElement(Stack3, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React5.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __5("CSS Class manager", "elementor")), /* @__PURE__ */ React5.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React5.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React5.createElement(GlobalClassesList, null)))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
+  const isDirty3 = useDirtyState();
+  const { close: closePanel } = usePanelActions();
+  const {
+    open: openUnsavedChangesDialog,
+    close: closeUnsavedChangesDialog,
+    isOpen: isUnsavedChangesDialogOpen
+  } = 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(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        if (isDirty3) {
+          openUnsavedChangesDialog();
+          return;
+        }
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React6.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React6.createElement(GlobalClassesList, null)), /* @__PURE__ */ React6.createElement(PanelFooter, null, /* @__PURE__ */ React6.createElement(
+    Button3,
+    {
+      fullWidth: true,
+      size: "small",
+      variant: "contained",
+      color: "global",
+      disabled: !isDirty3,
+      onClick: publishGlobalClasses
+    },
+    __5("Save changes", "elementor")
+  )))), /* @__PURE__ */ React6.createElement(ClassManagerIntroduction, null), isUnsavedChangesDialogOpen && /* @__PURE__ */ React6.createElement(UnsavedChangesDialog, null, /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Content, null, __5("You have unsaved changes in the Class Manager.", "elementor"), /* @__PURE__ */ React6.createElement("br", null), __5("To avoid losing your updates, save your changes before leaving.", "elementor")), /* @__PURE__ */ React6.createElement(
+    UnsavedChangesDialog.Actions,
+    {
+      actions: {
+        cancel: {
+          label: __5("Cancel", "elementor"),
+          action: closeUnsavedChangesDialog
+        },
+        confirm: {
+          label: __5("Save & Continue", "elementor"),
+          action: () => {
+            publishGlobalClasses();
+            closeUnsavedChangesDialog();
+            closePanel();
+          }
+        }
+      }
+    }
+  )));
 }
-var CloseButton = (props) => {
-  const { close } = usePanelActions();
-  return /* @__PURE__ */ React5.createElement(IconButton2, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React5.createElement(XIcon, { fontSize: "small" }));
-};
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React5.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React5.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React5.createElement("strong", null, __5("Something went wrong", "elementor"))));
+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"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React6.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React6.createElement(IconButton3, { onClick: open }, /* @__PURE__ */ React6.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React7.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(IconButton3, { onClick: open }, /* @__PURE__ */ React7.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
 };
 
 // src/components/populate-store.tsx
 import { useEffect } from "react";
 import { __useDispatch as useDispatch } 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)
-};
-
-// src/components/populate-store.tsx
 function PopulateStore() {
-  const dispatch2 = useDispatch();
+  const dispatch3 = useDispatch();
   useEffect(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
-      dispatch2(slice.actions.init({ items: data, order: meta.order }));
+      dispatch3(slice.actions.init({ items: data, order: meta.order }));
     });
-  }, [dispatch2]);
+  }, [dispatch3]);
   return null;
 }
 
 // src/sync-with-document-save.ts
 import { __privateRunCommandSync as runCommandSync, registerDataHook } from "@elementor/editor-v1-adapters";
-import { __dispatch, __getState as getState2, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
+import { __getState as getState3, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
   bindSaveAction();
@@ -588,27 +696,17 @@ function syncWithDocumentSave() {
 }
 function syncDirtyState() {
   return subscribeWithSelector2(selectIsDirty, () => {
-    if (!isDirty()) {
+    if (!isDirty2()) {
       return;
     }
     runCommandSync("document/save/set-is-modified", { status: true }, { internal: true });
   });
 }
 function bindSaveAction() {
-  registerDataHook("after", "document/save/save", async () => {
-    if (!isDirty()) {
-      return;
-    }
-    const state = getState2().globalClasses;
-    await apiClient.update({
-      items: state.items,
-      order: state.order
-    });
-    __dispatch(slice.actions.setPristine());
-  });
+  registerDataHook("after", "document/save/save", publishGlobalClasses);
 }
-function isDirty() {
-  return selectIsDirty(getState2());
+function isDirty2() {
+  return selectIsDirty(getState3());
 }
 
 // src/init.ts