@elementor/editor-global-classes 0.9.0 → 0.10.0

package/dist/index.mjs

@@ -8,6 +8,10 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
 import * as React7 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";
@@ -158,7 +162,7 @@ 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 MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
   const [shouldShowIntroduction, setShouldShowIntroduction] = useState(!isMessageSuppressed);
@@ -269,7 +273,7 @@ var globalClassesStylesProvider = {
   subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
   labels: {
     singular: __2("Global class", "elementor"),
-    plural: __2("Global CSS Classes", "elementor")
+    plural: __2("Global CSS classes", "elementor")
   }
 };
 
@@ -577,7 +581,7 @@ var validateLabel = (newLabel) => {
   return null;
 };
 
-// src/components/class-manager/unsaved-changes-dialog.tsx
+// src/components/class-manager/save-changes-dialog.tsx
 import * as React5 from "react";
 import { useState as useState3 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
@@ -589,17 +593,25 @@ import {
   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 }) => {
+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 SaveChangesDialogActions = ({ actions }) => {
+  const [isConfirming, setIsConfirming] = useState3(false);
   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));
+  const onConfirm = async () => {
+    setIsConfirming(true);
+    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));
 };
-UnsavedChangesDialog.Title = UnsavedChangesDialogTitle;
-UnsavedChangesDialog.Content = UnsavedChangesDialogContent;
-UnsavedChangesDialog.Actions = UnsavedChangesDialogActions;
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
   const [isOpen, setIsOpen] = useState3(false);
   const open = () => setIsOpen(true);
@@ -615,18 +627,14 @@ var { panel, usePanelActions } = createPanel({
 function ClassManagerPanel() {
   const isDirty3 = useDirtyState();
   const { close: closePanel } = usePanelActions();
-  const {
-    open: openUnsavedChangesDialog,
-    close: closeUnsavedChangesDialog,
-    isOpen: isUnsavedChangesDialogOpen
-  } = useDialog();
+  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(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
       onClose: () => {
         if (isDirty3) {
-          openUnsavedChangesDialog();
+          openSaveChangesDialog();
           return;
         }
         closePanel();
@@ -643,19 +651,19 @@ function ClassManagerPanel() {
       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,
+  )))), /* @__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(
+    SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
           label: __5("Cancel", "elementor"),
-          action: closeUnsavedChangesDialog
+          action: closeSaveChangesDialog
         },
         confirm: {
           label: __5("Save & Continue", "elementor"),
-          action: () => {
-            publishGlobalClasses();
-            closeUnsavedChangesDialog();
+          action: async () => {
+            await publishGlobalClasses();
+            closeSaveChangesDialog();
             closePanel();
           }
         }
@@ -668,8 +676,39 @@ var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(Box4, { r
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const { open } = usePanelActions();
-  return /* @__PURE__ */ React7.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(IconButton3, { onClick: open }, /* @__PURE__ */ React7.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
+  const document = useActiveDocument();
+  const { open: openPanel } = usePanelActions();
+  const { save: saveDocument } = useActiveDocumentActions();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const handleOpenPanel = () => {
+    if (document?.isDirty) {
+      openSaveChangesDialog();
+      return;
+    }
+    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(
+    "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(
+    SaveChangesDialog.Actions,
+    {
+      actions: {
+        cancel: {
+          label: __6("Keep editing", "elementor"),
+          action: closeSaveChangesDialog
+        },
+        confirm: {
+          label: __6("Save & Continue", "elementor"),
+          action: async () => {
+            await saveDocument();
+            closeSaveChangesDialog();
+            openPanel();
+          }
+        }
+      }
+    }
+  )));
 };
 
 // src/components/populate-store.tsx

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/hooks/use-dirty-state.ts","../src/store.ts","../src/errors.ts","../src/publish-global-classes.ts","../src/api.ts","../src/components/class-manager/class-manager-introduction.tsx","../src/components/class-manager/global-classes-list.tsx","../src/global-classes-styles-provider.ts","../src/hooks/use-classes-order.ts","../src/hooks/use-ordered-classes.ts","../src/components/class-manager/delete-confirmation-dialog.tsx","../src/components/class-manager/sortable.tsx","../src/components/class-manager/unsaved-changes-dialog.tsx","../src/components/populate-store.tsx","../src/sync-with-document-save.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { PopulateStore } from './components/populate-store';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\nimport { syncWithDocumentSave } from './sync-with-document-save';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-populate-store',\n\t\tcomponent: PopulateStore,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes-manager-button',\n\t\tcomponent: ClassManagerButton,\n\t} );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tsyncWithDocumentSave();\n\t} );\n}\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\n\nexport const ClassManagerButton = () => {\n\tconst { open } = usePanelActions();\n\n\treturn (\n\t\t<Tooltip title={ __( 'Class manager', 'elementor' ) } placement=\"top\">\n\t\t\t<IconButton onClick={ open }>\n\t\t\t\t<ColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n};\n","import * as React from 'react';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelFooter,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ColorSwatchIcon, XIcon } from '@elementor/icons';\nimport { Alert, Box, Button, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useDirtyState } from '../../hooks/use-dirty-state';\nimport { publishGlobalClasses } from '../../publish-global-classes';\nimport { ClassManagerIntroduction } from './class-manager-introduction';\nimport { GlobalClassesList } from './global-classes-list';\nimport { UnsavedChangesDialog, useDialog } from './unsaved-changes-dialog';\n\nexport const { panel, usePanelActions } = createPanel( {\n\tid: 'class-manager-panel',\n\tcomponent: ClassManagerPanel,\n} );\n\nexport function ClassManagerPanel() {\n\tconst isDirty = useDirtyState();\n\n\tconst { close: closePanel } = usePanelActions();\n\n\tconst {\n\t\topen: openUnsavedChangesDialog,\n\t\tclose: closeUnsavedChangesDialog,\n\t\tisOpen: isUnsavedChangesDialogOpen,\n\t} = useDialog();\n\n\treturn (\n\t\t<>\n\t\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelHeader>\n\t\t\t\t\t\t<Stack p={ 1 } pl={ 2 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t\t<ColorSwatchIcon fontSize=\"inherit\" sx={ { transform: 'rotate(90deg)' } } />\n\t\t\t\t\t\t\t\t{ __( 'CSS Class manager', 'elementor' ) }\n\t\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\t\tsx={ { marginLeft: 'auto' } }\n\t\t\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\t\t\tif ( isDirty ) {\n\t\t\t\t\t\t\t\t\t\topenUnsavedChangesDialog();\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</PanelHeader>\n\t\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t\t<GlobalClassesList />\n\t\t\t\t\t</PanelBody>\n\t\t\t\t\t<PanelFooter>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\tcolor=\"global\"\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t\tonClick={ publishGlobalClasses }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save changes', 'elementor' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</PanelFooter>\n\t\t\t\t</Panel>\n\t\t\t</ErrorBoundary>\n\t\t\t<ClassManagerIntroduction />\n\t\t\t{ isUnsavedChangesDialogOpen && (\n\t\t\t\t<UnsavedChangesDialog>\n\t\t\t\t\t<UnsavedChangesDialog.Title>\n\t\t\t\t\t\t{ __( 'You have unsaved changes', 'elementor' ) }\n\t\t\t\t\t</UnsavedChangesDialog.Title>\n\t\t\t\t\t<UnsavedChangesDialog.Content>\n\t\t\t\t\t\t{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }\n\t\t\t\t\t</UnsavedChangesDialog.Content>\n\t\t\t\t\t<UnsavedChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Cancel', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeUnsavedChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: () => {\n\t\t\t\t\t\t\t\t\tpublishGlobalClasses();\n\t\t\t\t\t\t\t\t\tcloseUnsavedChangesDialog();\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</UnsavedChangesDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (\n\t<IconButton size=\"small\" color=\"secondary\" onClick={ onClose } aria-label=\"Close\" { ...props }>\n\t\t<XIcon fontSize=\"small\" />\n\t</IconButton>\n);\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectIsDirty } from '../store';\n\nexport const useDirtyState = () => {\n\treturn useSelector( selectIsDirty );\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport { type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type GlobalClassesState = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n\tisDirty: boolean;\n};\n\nconst initialState: GlobalClassesState = {\n\titems: {},\n\torder: [],\n\tisDirty: false,\n};\n\nexport type StateWithGlobalClasses = SliceState< typeof slice >;\n\n// Slice\nconst SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' | 'order' > > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\n\t\t\tstate.isDirty = false;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< StyleDefinition > ) {\n\t\t\tstate.items[ payload.id ] = payload;\n\t\t\tstate.order.unshift( payload.id );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tdelete( state, { payload }: PayloadAction< StyleDefinitionID > ) {\n\t\t\tstate.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );\n\n\t\t\tstate.order = state.order.filter( ( id ) => id !== payload );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tsetOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {\n\t\t\tstate.order = payload;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {\n\t\t\tconst style = state.items[ payload.style.id ];\n\n\t\t\tconst mergedData = {\n\t\t\t\t...style,\n\t\t\t\t...payload.style,\n\t\t\t};\n\n\t\t\tstate.items[ payload.style.id ] = mergedData;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\n\t\tsetPristine( state ) {\n\t\t\tstate.isDirty = false;\n\t\t},\n\t},\n} );\n\n// Selectors\nexport const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\n\nexport const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n\nexport const GlobalClassLabelAlreadyExistsError = createError< { label: string } >( {\n\tcode: 'global_class_label_already_exists',\n\tmessage: 'Class with this name already exists.',\n} );\n","import { __dispatch as dispatch, __getState as getState } from '@elementor/store';\n\nimport { apiClient } from './api';\nimport { type GlobalClassesState, selectIsDirty, slice } from './store';\n\nexport async function publishGlobalClasses() {\n\tif ( ! isDirty() ) {\n\t\treturn;\n\t}\n\n\tconst state: GlobalClassesState = getState().globalClasses;\n\n\tawait apiClient.update( {\n\t\titems: state.items,\n\t\torder: state.order,\n\t} );\n\n\tdispatch( slice.actions.setPristine() );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nimport { type GlobalClassesState } from './store';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\n\ntype UpdatePayload = Pick< GlobalClassesState, 'items' | 'order' >;\n\nexport const apiClient = {\n\tall: () => httpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL ),\n\tupdate: ( payload: UpdatePayload ) => httpService().put( 'elementor/v1' + RESOURCE_URL, payload ),\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { useSuppressedMessage } from '@elementor/editor-current-user';\nimport { IntroductionModal } from '@elementor/editor-ui';\nimport { Box, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst MESSAGE_KEY = 'global-class-manager-4';\n\nexport const ClassManagerIntroduction = () => {\n\tconst [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );\n\tconst [ shouldShowIntroduction, setShouldShowIntroduction ] = useState( ! isMessageSuppressed );\n\n\treturn (\n\t\t<IntroductionModal\n\t\t\topen={ shouldShowIntroduction }\n\t\t\ttitle={ __( 'CSS Class manager', 'elementor' ) }\n\t\t\tcontent={ <IntroductionContent /> }\n\t\t\thandleClose={ ( shouldShowAgain ) => {\n\t\t\t\tif ( ! shouldShowAgain ) {\n\t\t\t\t\tsuppressMessage();\n\t\t\t\t}\n\n\t\t\t\tsetShouldShowIntroduction( false );\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst IntroductionContent = () => {\n\treturn (\n\t\t<Stack gap={ 1.5 } padding={ 3 }>\n\t\t\t<Image sx={ { width: '100%', height: '312px' } } src=\"\" alt=\"Introduction\" />\n\t\t\t<Box>\n\t\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t\"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.\",\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</Typography>\n\t\t\t\t<br />\n\t\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Changes apply globally—any modifications will affect all elements using the class, impacting the class order and priority across your site.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</Typography>\n\t\t\t</Box>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { type StyleDefinitionID } from '@elementor/editor-styles';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';\nimport { DotsVerticalIcon, PhotoIcon } from '@elementor/icons';\nimport {\n\tbindMenu,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tList,\n\tListItem,\n\tListItemButton,\n\tListItemText,\n\tMenu,\n\tMenuItem,\n\tStack,\n\tstyled,\n\ttype Theme,\n\tTooltip,\n\tTypography,\n\ttype TypographyProps,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\nimport { useClassesOrder } from '../../hooks/use-classes-order';\nimport { useOrderedClasses } from '../../hooks/use-ordered-classes';\nimport { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';\nimport { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';\n\nexport const GlobalClassesList = () => {\n\tconst cssClasses = useOrderedClasses();\n\n\tconst [ classesOrder, reorderClasses ] = useReorder();\n\n\tif ( ! cssClasses?.length ) {\n\t\treturn <EmptyState />;\n\t}\n\n\treturn (\n\t\t<DeleteConfirmationProvider>\n\t\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>\n\t\t\t\t<SortableProvider value={ classesOrder } onChange={ reorderClasses }>\n\t\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\t\tconst renameClass = ( newLabel: string ) => {\n\t\t\t\t\t\t\tglobalClassesStylesProvider.actions.update( { label: newLabel, id } );\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SortableItem key={ id } id={ id }>\n\t\t\t\t\t\t\t\t{ ( { isDragged, showDropIndication, dropIndicationStyle } ) => (\n\t\t\t\t\t\t\t\t\t<ClassItem\n\t\t\t\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\trenameClass={ renameClass }\n\t\t\t\t\t\t\t\t\t\tselected={ isDragged }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ showDropIndication && (\n\t\t\t\t\t\t\t\t\t\t\t<SortableItemIndicator style={ dropIndicationStyle } />\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</ClassItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</SortableItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</SortableProvider>\n\t\t\t</List>\n\t\t</DeleteConfirmationProvider>\n\t);\n};\n\nconst useReorder = () => {\n\tconst order = useClassesOrder();\n\n\tconst reorder = ( newIds: StyleDefinitionID[] ) => {\n\t\tglobalClassesStylesProvider.actions.setOrder( newIds );\n\t};\n\n\treturn [ order, reorder ] as const;\n};\n\nconst ClassItem = ( {\n\tid,\n\tlabel,\n\trenameClass,\n\tselected,\n\tchildren,\n}: React.PropsWithChildren< {\n\tid: string;\n\tlabel: string;\n\trenameClass: ( newLabel: string ) => void;\n\tselected: boolean;\n} > ) => {\n\tconst {\n\t\tref: editableRef,\n\t\topenEditMode,\n\t\tisEditing,\n\t\terror,\n\t\tgetProps: getEditableProps,\n\t} = useEditable( {\n\t\tvalue: label,\n\t\tonSubmit: renameClass,\n\t\tvalidation: validateLabel,\n\t} );\n\n\tconst { openDialog } = useDeleteConfirmation();\n\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tdisableAutoFocus: true,\n\t} );\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" gap={ 1 } flexGrow={ 1 } flexShrink={ 0 }>\n\t\t\t<StyledListItem\n\t\t\t\tcomponent={ 'div' }\n\t\t\t\tdisablePadding\n\t\t\t\tdisableGutters\n\t\t\t\tsecondaryAction={\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\tclassName=\"class-item-more-actions\"\n\t\t\t\t\t\ttitle={ __( 'More actions', 'elementor' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconButton size=\"tiny\" { ...bindTrigger( popupState ) } aria-label=\"More actions\">\n\t\t\t\t\t\t\t<DotsVerticalIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<ListItemButton\n\t\t\t\t\tdense\n\t\t\t\t\tdisableGutters\n\t\t\t\t\tshape=\"rounded\"\n\t\t\t\t\tonDoubleClick={ openEditMode }\n\t\t\t\t\tselected={ selected || popupState.isOpen }\n\t\t\t\t\tfocusVisibleClassName=\"visible-class-item\"\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tminHeight: '36px',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t'&.visible-class-item': {\n\t\t\t\t\t\t\tboxShadow: 'none !important',\n\t\t\t\t\t\t},\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Indicator isActive={ isEditing } isError={ !! error }>\n\t\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t\t<EditableField\n\t\t\t\t\t\t\t\tref={ editableRef }\n\t\t\t\t\t\t\t\terror={ error }\n\t\t\t\t\t\t\t\tas={ Typography }\n\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t{ ...getEditableProps() }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Indicator>\n\t\t\t\t</ListItemButton>\n\t\t\t\t{ children }\n\t\t\t\t<Menu\n\t\t\t\t\t{ ...bindMenu( popupState ) }\n\t\t\t\t\tanchorOrigin={ {\n\t\t\t\t\t\tvertical: 'bottom',\n\t\t\t\t\t\thorizontal: 'right',\n\t\t\t\t\t} }\n\t\t\t\t\ttransformOrigin={ {\n\t\t\t\t\t\tvertical: 'top',\n\t\t\t\t\t\thorizontal: 'right',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tsx={ { minWidth: '160px' } }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\t\topenEditMode();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListItemText primary={ __( 'Rename', 'elementor' ) } />\n\t\t\t\t\t</MenuItem>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\t\topenDialog( { id, label } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</Menu>\n\t\t\t</StyledListItem>\n\t\t</Stack>\n\t);\n};\n\nconst StyledListItem = styled( ListItem )`\n\t.class-item-more-actions {\n\t\tvisibility: hidden;\n\t}\n\t&:hover {\n\t\t.class-item-more-actions {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n`;\n\nconst EmptyState = () => (\n\t<Stack alignItems=\"center\" gap={ 3 } pt={ 4 } px={ 0.5 }>\n\t\t<PhotoIcon fontSize=\"large\" />\n\t\t<StyledHeader variant=\"subtitle2\" component=\"h2\" color=\"text.secondary\">\n\t\t\t{ __( 'No CSS classes created yet', 'elementor' ) }\n\t\t</StyledHeader>\n\t\t<Typography align=\"center\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ __(\n\t\t\t\t'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.',\n\t\t\t\t'elementor'\n\t\t\t) }\n\t\t</Typography>\n\t</Stack>\n);\n\n// Override panel reset styles.\nconst StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {\n\t'&.MuiTypography-root': {\n\t\t...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),\n\t},\n} ) );\n\nconst Indicator = styled( Box, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),\n} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {\n\tdisplay: 'flex',\n\twidth: '100%',\n\tflexGrow: 1,\n\tborderRadius: theme.spacing( 0.5 ),\n\tborder: getIndicatorBorder( { isActive, isError, theme } ),\n\tpadding: `0 ${ theme.spacing( 1 ) }`,\n\tmarginLeft: isActive ? theme.spacing( 1 ) : 0,\n} ) );\n\nconst getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {\n\tif ( isError ) {\n\t\treturn `2px solid ${ theme.palette.error.main }`;\n\t}\n\n\tif ( isActive ) {\n\t\treturn `2px solid ${ theme.palette.secondary.main }`;\n\t}\n\n\treturn 'none';\n};\n\nconst validateLabel = ( newLabel: string ) => {\n\tif ( ! stylesRepository.isLabelValid( newLabel ) ) {\n\t\treturn __( 'Format is not valid', 'elementor' );\n\t}\n\n\tif ( stylesRepository.isLabelExist( newLabel ) ) {\n\t\treturn __( 'Existing name', 'elementor' );\n\t}\n\n\treturn null;\n};\n","import { generateId } from '@elementor/editor-styles';\nimport type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassLabelAlreadyExistsError } from './errors';\nimport { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type StateWithGlobalClasses } from './store';\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: ( label ) => {\n\t\t\tconst classes = selectGlobalClasses( getState() );\n\n\t\t\tconst existingLabels = Object.values( classes ).map( ( style ) => style.label );\n\n\t\t\tif ( existingLabels.includes( label ) ) {\n\t\t\t\tthrow new GlobalClassLabelAlreadyExistsError( { context: { label } } );\n\t\t\t}\n\n\t\t\tconst existingIds = Object.keys( classes );\n\t\t\tconst id = generateId( 'g-', existingIds );\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'class',\n\t\t\t\t\tlabel,\n\t\t\t\t\tvariants: [],\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn id;\n\t\t},\n\t\tupdate: ( payload ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: payload,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tdelete: ( id ) => {\n\t\t\tdispatch( slice.actions.delete( id ) );\n\t\t},\n\t\tsetOrder: ( order ) => {\n\t\t\tdispatch( slice.actions.setOrder( order ) );\n\t\t},\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global class', 'elementor' ),\n\t\tplural: __( 'Global CSS Classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrder } from '../store';\n\nexport const useClassesOrder = () => {\n\treturn useSelector( selectOrder );\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrderedClasses } from '../store';\n\nexport const useOrderedClasses = () => {\n\treturn useSelector( selectOrderedClasses );\n};\n","import * as React from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport { type StyleDefinition } from '@elementor/editor-styles';\nimport { AlertOctagonFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\tDialogTitle,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\n\ntype DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;\n\ntype DeleteConfirmationContext = {\n\topenDialog: ( props: DeleteConfirmationDialogProps ) => void;\n\tcloseDialog: () => void;\n\tdialogProps: DeleteConfirmationDialogProps | null;\n};\n\nconst context = createContext< DeleteConfirmationContext | null >( null );\n\nexport const DeleteConfirmationProvider = ( { children }: React.PropsWithChildren ) => {\n\tconst [ dialogProps, setDialogProps ] = useState< DeleteConfirmationDialogProps | null >( null );\n\n\tconst openDialog = ( props: DeleteConfirmationDialogProps ) => {\n\t\tsetDialogProps( props );\n\t};\n\n\tconst closeDialog = () => {\n\t\tsetDialogProps( null );\n\t};\n\n\treturn (\n\t\t<context.Provider value={ { openDialog, closeDialog, dialogProps } }>\n\t\t\t{ children }\n\t\t\t{ !! dialogProps && <DeleteConfirmationDialog { ...dialogProps } /> }\n\t\t</context.Provider>\n\t);\n};\n\nconst TITLE_ID = 'delete-class-dialog';\n\nconst DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {\n\tconst { closeDialog } = useDeleteConfirmation();\n\n\tconst onConfirm = () => {\n\t\tglobalClassesStylesProvider.actions.delete( id );\n\n\t\tcloseDialog();\n\t};\n\n\treturn (\n\t\t<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t\t\t<AlertOctagonFilledIcon color=\"error\" />\n\t\t\t\t{ __( 'Delete global class', 'elementor' ) }\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText variant=\"body2\" color=\"textPrimary\">\n\t\t\t\t\t{ __( 'Deleting', 'elementor' ) }\n\t\t\t\t\t<Typography variant=\"subtitle2\" component=\"span\">\n\t\t\t\t\t\t&nbsp;{ label }&nbsp;\n\t\t\t\t\t</Typography>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button color=\"secondary\" onClick={ closeDialog }>\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button variant=\"contained\" color=\"error\" onClick={ onConfirm }>\n\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nexport const useDeleteConfirmation = () => {\n\tconst contextValue = useContext( context );\n\n\tif ( ! contextValue ) {\n\t\tthrow new Error( 'useDeleteConfirmation must be used within a DeleteConfirmationProvider' );\n\t}\n\n\treturn contextValue;\n};\n","import * as React from 'react';\nimport { GripVerticalIcon } from '@elementor/icons';\nimport {\n\tBox,\n\tPaper,\n\tstyled,\n\tUnstableSortableItem,\n\ttype UnstableSortableItemProps,\n\ttype UnstableSortableItemRenderProps,\n\tUnstableSortableProvider,\n\ttype UnstableSortableProviderProps,\n} from '@elementor/ui';\n\nexport const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (\n\t<UnstableSortableProvider restrictAxis variant=\"static\" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />\n);\n\nconst SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (\n\t<div { ...props } role=\"button\" className=\"class-item-sortable-trigger\">\n\t\t<GripVerticalIcon fontSize=\"tiny\" />\n\t</div>\n);\n\ntype ItemRenderProps = Record< string, unknown > & {\n\tisDragged: boolean;\n\tshowDropIndication: boolean;\n\tdropIndicationStyle: React.CSSProperties;\n};\n\ntype SortableItemProps = {\n\tid: UnstableSortableItemProps[ 'id' ];\n\tchildren: ( props: ItemRenderProps ) => React.ReactNode;\n};\n\nexport const SortableItem = ( { children, id }: SortableItemProps ) => {\n\treturn (\n\t\t<UnstableSortableItem\n\t\t\tid={ id }\n\t\t\trender={ ( {\n\t\t\t\titemProps,\n\t\t\t\tisDragged,\n\t\t\t\ttriggerProps,\n\t\t\t\titemStyle,\n\t\t\t\ttriggerStyle,\n\t\t\t\tdropIndicationStyle,\n\t\t\t\tshowDropIndication,\n\t\t\t}: UnstableSortableItemRenderProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<StyledSortableItem { ...itemProps } elevation={ 0 } sx={ itemStyle } role=\"listitem\">\n\t\t\t\t\t\t<SortableTrigger { ...triggerProps } style={ triggerStyle } />\n\t\t\t\t\t\t{ children( {\n\t\t\t\t\t\t\titemProps,\n\t\t\t\t\t\t\tisDragged,\n\t\t\t\t\t\t\ttriggerProps,\n\t\t\t\t\t\t\titemStyle,\n\t\t\t\t\t\t\ttriggerStyle,\n\t\t\t\t\t\t\tdropIndicationStyle,\n\t\t\t\t\t\t\tshowDropIndication,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</StyledSortableItem>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst StyledSortableItem = styled( Paper )`\n\tposition: relative;\n\n\t&:hover {\n\t\t& .class-item-sortable-trigger {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n\n\t& .class-item-sortable-trigger {\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 50%;\n\t\ttransform: translate( -75%, -50% );\n\t}\n`;\n\nexport const SortableItemIndicator = styled( Box )`\n\twidth: 100%;\n\theight: 3px;\n\tborder-radius: ${ ( { theme } ) => theme.spacing( 0.5 ) };\n\tbackground-color: ${ ( { theme } ) => theme.palette.text.primary };\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { AlertTriangleFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\ttype DialogProps,\n\tDialogTitle,\n} from '@elementor/ui';\n\nconst TITLE_ID = 'unsaved-changes-dialog';\n\nconst UnsavedChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (\n\t<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t{ children }\n\t</Dialog>\n);\n\nconst UnsavedChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (\n\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t<AlertTriangleFilledIcon color=\"secondary\" />\n\t\t{ children }\n\t</DialogTitle>\n);\n\nconst UnsavedChangesDialogContent = ( { children }: React.PropsWithChildren ) => (\n\t<DialogContent>\n\t\t<DialogContentText variant=\"body2\" color=\"textPrimary\">\n\t\t\t{ children }\n\t\t</DialogContentText>\n\t</DialogContent>\n);\n\ntype Action = {\n\tlabel: string;\n\taction: () => void;\n};\n\ntype ConfirmationDialogActionsProps = {\n\tactions: {\n\t\tcancel: Action;\n\t\tconfirm: Action;\n\t};\n};\nconst UnsavedChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {\n\tconst { cancel, confirm } = actions;\n\n\treturn (\n\t\t<DialogActions>\n\t\t\t<Button variant=\"text\" color=\"secondary\" onClick={ cancel.action }>\n\t\t\t\t{ cancel.label }\n\t\t\t</Button>\n\t\t\t<Button variant=\"contained\" color=\"secondary\" onClick={ confirm.action }>\n\t\t\t\t{ confirm.label }\n\t\t\t</Button>\n\t\t</DialogActions>\n\t);\n};\n\nUnsavedChangesDialog.Title = UnsavedChangesDialogTitle;\nUnsavedChangesDialog.Content = UnsavedChangesDialogContent;\nUnsavedChangesDialog.Actions = UnsavedChangesDialogActions;\n\nconst useDialog = () => {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst open = () => setIsOpen( true );\n\tconst close = () => setIsOpen( false );\n\n\treturn { isOpen, open, close };\n};\n\nexport { UnsavedChangesDialog, useDialog };\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function PopulateStore() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { __privateRunCommandSync as runCommandSync, registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';\n\nimport { publishGlobalClasses } from './publish-global-classes';\nimport { selectIsDirty } from './store';\n\nexport function syncWithDocumentSave() {\n\tconst unsubscribe = syncDirtyState();\n\n\tbindSaveAction();\n\n\treturn unsubscribe;\n}\n\nfunction syncDirtyState() {\n\treturn subscribeWithSelector( selectIsDirty, () => {\n\t\tif ( ! isDirty() ) {\n\t\t\treturn;\n\t\t}\n\n\t\trunCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );\n\t} );\n}\n\nfunction bindSaveAction() {\n\tregisterDataHook( 'after', 'document/save/save', publishGlobalClasses );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["stylesRepository","React","ColorSwatchIcon","IconButton","Tooltip","__","React","Box","Button","IconButton","Stack","__","React","Box","Stack","styled","Typography","__","dispatch","getState","__","getState","dispatch","__","useSelector","useSelector","useSelector","useSelector","React","useState","Typography","__","useState","__","Typography","React","Box","Stack","__","Typography","styled","Box","React","useState","Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","TITLE_ID","isDirty","Stack","__","Button","IconButton","Box","Tooltip","__","IconButton","ColorSwatchIcon","dispatch","getState","subscribeWithSelector","subscribeWithSelector","isDirty","getState","stylesRepository"]}
+{"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/hooks/use-dirty-state.ts","../src/store.ts","../src/errors.ts","../src/publish-global-classes.ts","../src/api.ts","../src/components/class-manager/class-manager-introduction.tsx","../src/components/class-manager/global-classes-list.tsx","../src/global-classes-styles-provider.ts","../src/hooks/use-classes-order.ts","../src/hooks/use-ordered-classes.ts","../src/components/class-manager/delete-confirmation-dialog.tsx","../src/components/class-manager/sortable.tsx","../src/components/class-manager/save-changes-dialog.tsx","../src/components/populate-store.tsx","../src/sync-with-document-save.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { PopulateStore } from './components/populate-store';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\nimport { syncWithDocumentSave } from './sync-with-document-save';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-populate-store',\n\t\tcomponent: PopulateStore,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes-manager-button',\n\t\tcomponent: ClassManagerButton,\n\t} );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tsyncWithDocumentSave();\n\t} );\n}\n","import * as React from 'react';\nimport {\n\t__useActiveDocument as useActiveDocument,\n\t__useActiveDocumentActions as useActiveDocumentActions,\n} from '@elementor/editor-documents';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\nimport { SaveChangesDialog, useDialog } from './save-changes-dialog';\n\nexport const ClassManagerButton = () => {\n\tconst document = useActiveDocument();\n\tconst { open: openPanel } = usePanelActions();\n\tconst { save: saveDocument } = useActiveDocumentActions();\n\tconst { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();\n\n\tconst handleOpenPanel = () => {\n\t\tif ( document?.isDirty ) {\n\t\t\topenSaveChangesDialog();\n\t\t\treturn;\n\t\t}\n\n\t\topenPanel();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip title={ __( 'Class manager', 'elementor' ) } placement=\"top\">\n\t\t\t\t<IconButton onClick={ handleOpenPanel }>\n\t\t\t\t\t<ColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t\t</IconButton>\n\t\t\t</Tooltip>\n\t\t\t{ isSaveChangesDialogOpen && (\n\t\t\t\t<SaveChangesDialog>\n\t\t\t\t\t<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>\n\t\t\t\t\t<SaveChangesDialog.Content>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText sx={ { mb: 2 } }>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Save your changes before moving to the class manager to ensure all updates are applied and saved.',\n\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'If you leave without saving, all changes will be discarded.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t</SaveChangesDialog.Content>\n\t\t\t\t\t<SaveChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Keep editing', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeSaveChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: async () => {\n\t\t\t\t\t\t\t\t\tawait saveDocument();\n\t\t\t\t\t\t\t\t\tcloseSaveChangesDialog();\n\t\t\t\t\t\t\t\t\topenPanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</SaveChangesDialog>\n\t\t\t) }\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelFooter,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ColorSwatchIcon, XIcon } from '@elementor/icons';\nimport { Alert, Box, Button, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useDirtyState } from '../../hooks/use-dirty-state';\nimport { publishGlobalClasses } from '../../publish-global-classes';\nimport { ClassManagerIntroduction } from './class-manager-introduction';\nimport { GlobalClassesList } from './global-classes-list';\nimport { SaveChangesDialog, useDialog } from './save-changes-dialog';\n\nexport const { panel, usePanelActions } = createPanel( {\n\tid: 'class-manager-panel',\n\tcomponent: ClassManagerPanel,\n} );\n\nexport function ClassManagerPanel() {\n\tconst isDirty = useDirtyState();\n\tconst { close: closePanel } = usePanelActions();\n\tconst { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();\n\n\treturn (\n\t\t<>\n\t\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelHeader>\n\t\t\t\t\t\t<Stack p={ 1 } pl={ 2 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t\t<ColorSwatchIcon fontSize=\"inherit\" sx={ { transform: 'rotate(90deg)' } } />\n\t\t\t\t\t\t\t\t{ __( 'CSS Class manager', 'elementor' ) }\n\t\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\t\tsx={ { marginLeft: 'auto' } }\n\t\t\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\t\t\tif ( isDirty ) {\n\t\t\t\t\t\t\t\t\t\topenSaveChangesDialog();\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</PanelHeader>\n\t\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t\t<GlobalClassesList />\n\t\t\t\t\t</PanelBody>\n\t\t\t\t\t<PanelFooter>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\tcolor=\"global\"\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t\tonClick={ publishGlobalClasses }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save changes', 'elementor' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</PanelFooter>\n\t\t\t\t</Panel>\n\t\t\t</ErrorBoundary>\n\t\t\t<ClassManagerIntroduction />\n\t\t\t{ isSaveChangesDialogOpen && (\n\t\t\t\t<SaveChangesDialog>\n\t\t\t\t\t<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>\n\t\t\t\t\t<SaveChangesDialog.Content>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t</SaveChangesDialog.Content>\n\t\t\t\t\t<SaveChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Cancel', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeSaveChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: async () => {\n\t\t\t\t\t\t\t\t\tawait publishGlobalClasses();\n\t\t\t\t\t\t\t\t\tcloseSaveChangesDialog();\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</SaveChangesDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (\n\t<IconButton size=\"small\" color=\"secondary\" onClick={ onClose } aria-label=\"Close\" { ...props }>\n\t\t<XIcon fontSize=\"small\" />\n\t</IconButton>\n);\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectIsDirty } from '../store';\n\nexport const useDirtyState = () => {\n\treturn useSelector( selectIsDirty );\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport { type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type GlobalClassesState = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n\tisDirty: boolean;\n};\n\nconst initialState: GlobalClassesState = {\n\titems: {},\n\torder: [],\n\tisDirty: false,\n};\n\nexport type StateWithGlobalClasses = SliceState< typeof slice >;\n\n// Slice\nconst SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' | 'order' > > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\n\t\t\tstate.isDirty = false;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< StyleDefinition > ) {\n\t\t\tstate.items[ payload.id ] = payload;\n\t\t\tstate.order.unshift( payload.id );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tdelete( state, { payload }: PayloadAction< StyleDefinitionID > ) {\n\t\t\tstate.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );\n\n\t\t\tstate.order = state.order.filter( ( id ) => id !== payload );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tsetOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {\n\t\t\tstate.order = payload;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {\n\t\t\tconst style = state.items[ payload.style.id ];\n\n\t\t\tconst mergedData = {\n\t\t\t\t...style,\n\t\t\t\t...payload.style,\n\t\t\t};\n\n\t\t\tstate.items[ payload.style.id ] = mergedData;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\n\t\tsetPristine( state ) {\n\t\t\tstate.isDirty = false;\n\t\t},\n\t},\n} );\n\n// Selectors\nexport const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\n\nexport const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n\nexport const GlobalClassLabelAlreadyExistsError = createError< { label: string } >( {\n\tcode: 'global_class_label_already_exists',\n\tmessage: 'Class with this name already exists.',\n} );\n","import { __dispatch as dispatch, __getState as getState } from '@elementor/store';\n\nimport { apiClient } from './api';\nimport { type GlobalClassesState, selectIsDirty, slice } from './store';\n\nexport async function publishGlobalClasses() {\n\tif ( ! isDirty() ) {\n\t\treturn;\n\t}\n\n\tconst state: GlobalClassesState = getState().globalClasses;\n\n\tawait apiClient.update( {\n\t\titems: state.items,\n\t\torder: state.order,\n\t} );\n\n\tdispatch( slice.actions.setPristine() );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nimport { type GlobalClassesState } from './store';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\n\ntype UpdatePayload = Pick< GlobalClassesState, 'items' | 'order' >;\n\nexport const apiClient = {\n\tall: () => httpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL ),\n\tupdate: ( payload: UpdatePayload ) => httpService().put( 'elementor/v1' + RESOURCE_URL, payload ),\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { useSuppressedMessage } from '@elementor/editor-current-user';\nimport { IntroductionModal } from '@elementor/editor-ui';\nimport { Box, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst MESSAGE_KEY = 'global-class-manager';\n\nexport const ClassManagerIntroduction = () => {\n\tconst [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );\n\tconst [ shouldShowIntroduction, setShouldShowIntroduction ] = useState( ! isMessageSuppressed );\n\n\treturn (\n\t\t<IntroductionModal\n\t\t\topen={ shouldShowIntroduction }\n\t\t\ttitle={ __( 'CSS Class manager', 'elementor' ) }\n\t\t\tcontent={ <IntroductionContent /> }\n\t\t\thandleClose={ ( shouldShowAgain ) => {\n\t\t\t\tif ( ! shouldShowAgain ) {\n\t\t\t\t\tsuppressMessage();\n\t\t\t\t}\n\n\t\t\t\tsetShouldShowIntroduction( false );\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst IntroductionContent = () => {\n\treturn (\n\t\t<Stack gap={ 1.5 } padding={ 3 }>\n\t\t\t<Image sx={ { width: '100%', height: '312px' } } src=\"\" alt=\"Introduction\" />\n\t\t\t<Box>\n\t\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t\"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.\",\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</Typography>\n\t\t\t\t<br />\n\t\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Changes apply globally—any modifications will affect all elements using the class, impacting the class order and priority across your site.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</Typography>\n\t\t\t</Box>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { type StyleDefinitionID } from '@elementor/editor-styles';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';\nimport { DotsVerticalIcon, PhotoIcon } from '@elementor/icons';\nimport {\n\tbindMenu,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tList,\n\tListItem,\n\tListItemButton,\n\tListItemText,\n\tMenu,\n\tMenuItem,\n\tStack,\n\tstyled,\n\ttype Theme,\n\tTooltip,\n\tTypography,\n\ttype TypographyProps,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\nimport { useClassesOrder } from '../../hooks/use-classes-order';\nimport { useOrderedClasses } from '../../hooks/use-ordered-classes';\nimport { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';\nimport { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';\n\nexport const GlobalClassesList = () => {\n\tconst cssClasses = useOrderedClasses();\n\n\tconst [ classesOrder, reorderClasses ] = useReorder();\n\n\tif ( ! cssClasses?.length ) {\n\t\treturn <EmptyState />;\n\t}\n\n\treturn (\n\t\t<DeleteConfirmationProvider>\n\t\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>\n\t\t\t\t<SortableProvider value={ classesOrder } onChange={ reorderClasses }>\n\t\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\t\tconst renameClass = ( newLabel: string ) => {\n\t\t\t\t\t\t\tglobalClassesStylesProvider.actions.update( { label: newLabel, id } );\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SortableItem key={ id } id={ id }>\n\t\t\t\t\t\t\t\t{ ( { isDragged, showDropIndication, dropIndicationStyle } ) => (\n\t\t\t\t\t\t\t\t\t<ClassItem\n\t\t\t\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\trenameClass={ renameClass }\n\t\t\t\t\t\t\t\t\t\tselected={ isDragged }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ showDropIndication && (\n\t\t\t\t\t\t\t\t\t\t\t<SortableItemIndicator style={ dropIndicationStyle } />\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</ClassItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</SortableItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</SortableProvider>\n\t\t\t</List>\n\t\t</DeleteConfirmationProvider>\n\t);\n};\n\nconst useReorder = () => {\n\tconst order = useClassesOrder();\n\n\tconst reorder = ( newIds: StyleDefinitionID[] ) => {\n\t\tglobalClassesStylesProvider.actions.setOrder( newIds );\n\t};\n\n\treturn [ order, reorder ] as const;\n};\n\nconst ClassItem = ( {\n\tid,\n\tlabel,\n\trenameClass,\n\tselected,\n\tchildren,\n}: React.PropsWithChildren< {\n\tid: string;\n\tlabel: string;\n\trenameClass: ( newLabel: string ) => void;\n\tselected: boolean;\n} > ) => {\n\tconst {\n\t\tref: editableRef,\n\t\topenEditMode,\n\t\tisEditing,\n\t\terror,\n\t\tgetProps: getEditableProps,\n\t} = useEditable( {\n\t\tvalue: label,\n\t\tonSubmit: renameClass,\n\t\tvalidation: validateLabel,\n\t} );\n\n\tconst { openDialog } = useDeleteConfirmation();\n\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tdisableAutoFocus: true,\n\t} );\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" gap={ 1 } flexGrow={ 1 } flexShrink={ 0 }>\n\t\t\t<StyledListItem\n\t\t\t\tcomponent={ 'div' }\n\t\t\t\tdisablePadding\n\t\t\t\tdisableGutters\n\t\t\t\tsecondaryAction={\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\tclassName=\"class-item-more-actions\"\n\t\t\t\t\t\ttitle={ __( 'More actions', 'elementor' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconButton size=\"tiny\" { ...bindTrigger( popupState ) } aria-label=\"More actions\">\n\t\t\t\t\t\t\t<DotsVerticalIcon fontSize=\"tiny\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<ListItemButton\n\t\t\t\t\tdense\n\t\t\t\t\tdisableGutters\n\t\t\t\t\tshape=\"rounded\"\n\t\t\t\t\tonDoubleClick={ openEditMode }\n\t\t\t\t\tselected={ selected || popupState.isOpen }\n\t\t\t\t\tfocusVisibleClassName=\"visible-class-item\"\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tminHeight: '36px',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t'&.visible-class-item': {\n\t\t\t\t\t\t\tboxShadow: 'none !important',\n\t\t\t\t\t\t},\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Indicator isActive={ isEditing } isError={ !! error }>\n\t\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t\t<EditableField\n\t\t\t\t\t\t\t\tref={ editableRef }\n\t\t\t\t\t\t\t\terror={ error }\n\t\t\t\t\t\t\t\tas={ Typography }\n\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t{ ...getEditableProps() }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Indicator>\n\t\t\t\t</ListItemButton>\n\t\t\t\t{ children }\n\t\t\t\t<Menu\n\t\t\t\t\t{ ...bindMenu( popupState ) }\n\t\t\t\t\tanchorOrigin={ {\n\t\t\t\t\t\tvertical: 'bottom',\n\t\t\t\t\t\thorizontal: 'right',\n\t\t\t\t\t} }\n\t\t\t\t\ttransformOrigin={ {\n\t\t\t\t\t\tvertical: 'top',\n\t\t\t\t\t\thorizontal: 'right',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tsx={ { minWidth: '160px' } }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\t\topenEditMode();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListItemText primary={ __( 'Rename', 'elementor' ) } />\n\t\t\t\t\t</MenuItem>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\t\topenDialog( { id, label } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</Menu>\n\t\t\t</StyledListItem>\n\t\t</Stack>\n\t);\n};\n\nconst StyledListItem = styled( ListItem )`\n\t.class-item-more-actions {\n\t\tvisibility: hidden;\n\t}\n\t&:hover {\n\t\t.class-item-more-actions {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n`;\n\nconst EmptyState = () => (\n\t<Stack alignItems=\"center\" gap={ 3 } pt={ 4 } px={ 0.5 }>\n\t\t<PhotoIcon fontSize=\"large\" />\n\t\t<StyledHeader variant=\"subtitle2\" component=\"h2\" color=\"text.secondary\">\n\t\t\t{ __( 'No CSS classes created yet', 'elementor' ) }\n\t\t</StyledHeader>\n\t\t<Typography align=\"center\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ __(\n\t\t\t\t'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.',\n\t\t\t\t'elementor'\n\t\t\t) }\n\t\t</Typography>\n\t</Stack>\n);\n\n// Override panel reset styles.\nconst StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {\n\t'&.MuiTypography-root': {\n\t\t...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),\n\t},\n} ) );\n\nconst Indicator = styled( Box, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),\n} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {\n\tdisplay: 'flex',\n\twidth: '100%',\n\tflexGrow: 1,\n\tborderRadius: theme.spacing( 0.5 ),\n\tborder: getIndicatorBorder( { isActive, isError, theme } ),\n\tpadding: `0 ${ theme.spacing( 1 ) }`,\n\tmarginLeft: isActive ? theme.spacing( 1 ) : 0,\n} ) );\n\nconst getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {\n\tif ( isError ) {\n\t\treturn `2px solid ${ theme.palette.error.main }`;\n\t}\n\n\tif ( isActive ) {\n\t\treturn `2px solid ${ theme.palette.secondary.main }`;\n\t}\n\n\treturn 'none';\n};\n\nconst validateLabel = ( newLabel: string ) => {\n\tif ( ! stylesRepository.isLabelValid( newLabel ) ) {\n\t\treturn __( 'Format is not valid', 'elementor' );\n\t}\n\n\tif ( stylesRepository.isLabelExist( newLabel ) ) {\n\t\treturn __( 'Existing name', 'elementor' );\n\t}\n\n\treturn null;\n};\n","import { generateId } from '@elementor/editor-styles';\nimport type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassLabelAlreadyExistsError } from './errors';\nimport { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type StateWithGlobalClasses } from './store';\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tactions: {\n\t\tget: () => selectOrderedClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: ( label ) => {\n\t\t\tconst classes = selectGlobalClasses( getState() );\n\n\t\t\tconst existingLabels = Object.values( classes ).map( ( style ) => style.label );\n\n\t\t\tif ( existingLabels.includes( label ) ) {\n\t\t\t\tthrow new GlobalClassLabelAlreadyExistsError( { context: { label } } );\n\t\t\t}\n\n\t\t\tconst existingIds = Object.keys( classes );\n\t\t\tconst id = generateId( 'g-', existingIds );\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'class',\n\t\t\t\t\tlabel,\n\t\t\t\t\tvariants: [],\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn id;\n\t\t},\n\t\tupdate: ( payload ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: payload,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tdelete: ( id ) => {\n\t\t\tdispatch( slice.actions.delete( id ) );\n\t\t},\n\t\tsetOrder: ( order ) => {\n\t\t\tdispatch( slice.actions.setOrder( order ) );\n\t\t},\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global class', 'elementor' ),\n\t\tplural: __( 'Global CSS classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrder } from '../store';\n\nexport const useClassesOrder = () => {\n\treturn useSelector( selectOrder );\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrderedClasses } from '../store';\n\nexport const useOrderedClasses = () => {\n\treturn useSelector( selectOrderedClasses );\n};\n","import * as React from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport { type StyleDefinition } from '@elementor/editor-styles';\nimport { AlertOctagonFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\tDialogTitle,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\n\ntype DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;\n\ntype DeleteConfirmationContext = {\n\topenDialog: ( props: DeleteConfirmationDialogProps ) => void;\n\tcloseDialog: () => void;\n\tdialogProps: DeleteConfirmationDialogProps | null;\n};\n\nconst context = createContext< DeleteConfirmationContext | null >( null );\n\nexport const DeleteConfirmationProvider = ( { children }: React.PropsWithChildren ) => {\n\tconst [ dialogProps, setDialogProps ] = useState< DeleteConfirmationDialogProps | null >( null );\n\n\tconst openDialog = ( props: DeleteConfirmationDialogProps ) => {\n\t\tsetDialogProps( props );\n\t};\n\n\tconst closeDialog = () => {\n\t\tsetDialogProps( null );\n\t};\n\n\treturn (\n\t\t<context.Provider value={ { openDialog, closeDialog, dialogProps } }>\n\t\t\t{ children }\n\t\t\t{ !! dialogProps && <DeleteConfirmationDialog { ...dialogProps } /> }\n\t\t</context.Provider>\n\t);\n};\n\nconst TITLE_ID = 'delete-class-dialog';\n\nconst DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {\n\tconst { closeDialog } = useDeleteConfirmation();\n\n\tconst onConfirm = () => {\n\t\tglobalClassesStylesProvider.actions.delete( id );\n\n\t\tcloseDialog();\n\t};\n\n\treturn (\n\t\t<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t\t\t<AlertOctagonFilledIcon color=\"error\" />\n\t\t\t\t{ __( 'Delete global class', 'elementor' ) }\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText variant=\"body2\" color=\"textPrimary\">\n\t\t\t\t\t{ __( 'Deleting', 'elementor' ) }\n\t\t\t\t\t<Typography variant=\"subtitle2\" component=\"span\">\n\t\t\t\t\t\t&nbsp;{ label }&nbsp;\n\t\t\t\t\t</Typography>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button color=\"secondary\" onClick={ closeDialog }>\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button variant=\"contained\" color=\"error\" onClick={ onConfirm }>\n\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nexport const useDeleteConfirmation = () => {\n\tconst contextValue = useContext( context );\n\n\tif ( ! contextValue ) {\n\t\tthrow new Error( 'useDeleteConfirmation must be used within a DeleteConfirmationProvider' );\n\t}\n\n\treturn contextValue;\n};\n","import * as React from 'react';\nimport { GripVerticalIcon } from '@elementor/icons';\nimport {\n\tBox,\n\tPaper,\n\tstyled,\n\tUnstableSortableItem,\n\ttype UnstableSortableItemProps,\n\ttype UnstableSortableItemRenderProps,\n\tUnstableSortableProvider,\n\ttype UnstableSortableProviderProps,\n} from '@elementor/ui';\n\nexport const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (\n\t<UnstableSortableProvider restrictAxis variant=\"static\" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />\n);\n\nconst SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (\n\t<div { ...props } role=\"button\" className=\"class-item-sortable-trigger\">\n\t\t<GripVerticalIcon fontSize=\"tiny\" />\n\t</div>\n);\n\ntype ItemRenderProps = Record< string, unknown > & {\n\tisDragged: boolean;\n\tshowDropIndication: boolean;\n\tdropIndicationStyle: React.CSSProperties;\n};\n\ntype SortableItemProps = {\n\tid: UnstableSortableItemProps[ 'id' ];\n\tchildren: ( props: ItemRenderProps ) => React.ReactNode;\n};\n\nexport const SortableItem = ( { children, id }: SortableItemProps ) => {\n\treturn (\n\t\t<UnstableSortableItem\n\t\t\tid={ id }\n\t\t\trender={ ( {\n\t\t\t\titemProps,\n\t\t\t\tisDragged,\n\t\t\t\ttriggerProps,\n\t\t\t\titemStyle,\n\t\t\t\ttriggerStyle,\n\t\t\t\tdropIndicationStyle,\n\t\t\t\tshowDropIndication,\n\t\t\t}: UnstableSortableItemRenderProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<StyledSortableItem { ...itemProps } elevation={ 0 } sx={ itemStyle } role=\"listitem\">\n\t\t\t\t\t\t<SortableTrigger { ...triggerProps } style={ triggerStyle } />\n\t\t\t\t\t\t{ children( {\n\t\t\t\t\t\t\titemProps,\n\t\t\t\t\t\t\tisDragged,\n\t\t\t\t\t\t\ttriggerProps,\n\t\t\t\t\t\t\titemStyle,\n\t\t\t\t\t\t\ttriggerStyle,\n\t\t\t\t\t\t\tdropIndicationStyle,\n\t\t\t\t\t\t\tshowDropIndication,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</StyledSortableItem>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst StyledSortableItem = styled( Paper )`\n\tposition: relative;\n\n\t&:hover {\n\t\t& .class-item-sortable-trigger {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n\n\t& .class-item-sortable-trigger {\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 50%;\n\t\ttransform: translate( -75%, -50% );\n\t}\n`;\n\nexport const SortableItemIndicator = styled( Box )`\n\twidth: 100%;\n\theight: 3px;\n\tborder-radius: ${ ( { theme } ) => theme.spacing( 0.5 ) };\n\tbackground-color: ${ ( { theme } ) => theme.palette.text.primary };\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { AlertTriangleFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\ttype DialogContentTextProps,\n\ttype DialogProps,\n\tDialogTitle,\n} from '@elementor/ui';\n\nconst TITLE_ID = 'save-changes-dialog';\n\nconst SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (\n\t<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t{ children }\n\t</Dialog>\n);\n\nconst SaveChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (\n\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t<AlertTriangleFilledIcon color=\"secondary\" />\n\t\t{ children }\n\t</DialogTitle>\n);\n\nconst SaveChangesDialogContent = ( { children }: React.PropsWithChildren ) => (\n\t<DialogContent>{ children }</DialogContent>\n);\n\nconst SaveChangesDialogContentText = ( props: DialogContentTextProps ) => (\n\t<DialogContentText variant=\"body2\" color=\"textPrimary\" display=\"flex\" flexDirection=\"column\" { ...props } />\n);\n\ntype Action = {\n\tlabel: string;\n\taction: () => void | Promise< void >;\n};\n\ntype ConfirmationDialogActionsProps = {\n\tactions: {\n\t\tcancel: Action;\n\t\tconfirm: Action;\n\t};\n};\nconst SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {\n\tconst [ isConfirming, setIsConfirming ] = useState( false );\n\tconst { cancel, confirm } = actions;\n\n\tconst onConfirm = async () => {\n\t\tsetIsConfirming( true );\n\t\tawait confirm.action();\n\t\tsetIsConfirming( false );\n\t};\n\treturn (\n\t\t<DialogActions>\n\t\t\t<Button variant=\"text\" color=\"secondary\" onClick={ cancel.action }>\n\t\t\t\t{ cancel.label }\n\t\t\t</Button>\n\t\t\t<Button variant=\"contained\" color=\"secondary\" onClick={ onConfirm } loading={ isConfirming }>\n\t\t\t\t{ confirm.label }\n\t\t\t</Button>\n\t\t</DialogActions>\n\t);\n};\n\nSaveChangesDialog.Title = SaveChangesDialogTitle;\nSaveChangesDialog.Content = SaveChangesDialogContent;\nSaveChangesDialog.ContentText = SaveChangesDialogContentText;\nSaveChangesDialog.Actions = SaveChangesDialogActions;\n\nconst useDialog = () => {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst open = () => setIsOpen( true );\n\tconst close = () => setIsOpen( false );\n\n\treturn { isOpen, open, close };\n};\n\nexport { SaveChangesDialog, useDialog };\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function PopulateStore() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { __privateRunCommandSync as runCommandSync, registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';\n\nimport { publishGlobalClasses } from './publish-global-classes';\nimport { selectIsDirty } from './store';\n\nexport function syncWithDocumentSave() {\n\tconst unsubscribe = syncDirtyState();\n\n\tbindSaveAction();\n\n\treturn unsubscribe;\n}\n\nfunction syncDirtyState() {\n\treturn subscribeWithSelector( selectIsDirty, () => {\n\t\tif ( ! isDirty() ) {\n\t\t\treturn;\n\t\t}\n\n\t\trunCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );\n\t} );\n}\n\nfunction bindSaveAction() {\n\tregisterDataHook( 'after', 'document/save/save', publishGlobalClasses );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["stylesRepository","React","ColorSwatchIcon","IconButton","Tooltip","__","React","Box","Button","IconButton","Stack","__","React","Box","Stack","styled","Typography","__","dispatch","getState","__","getState","dispatch","__","useSelector","useSelector","useSelector","useSelector","React","useState","Typography","__","useState","__","Typography","React","Box","Stack","__","Typography","styled","Box","React","useState","Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","TITLE_ID","isDirty","Stack","__","Button","IconButton","Box","Tooltip","__","IconButton","ColorSwatchIcon","dispatch","getState","subscribeWithSelector","subscribeWithSelector","isDirty","getState","stylesRepository"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.0",
-    "@elementor/editor-current-user": "0.2.0",
-    "@elementor/editor-editing-panel": "1.14.0",
-    "@elementor/editor-panels": "0.12.0",
-    "@elementor/editor-props": "0.9.2",
-    "@elementor/editor-styles": "0.5.7",
-    "@elementor/editor-styles-repository": "0.7.2",
+    "@elementor/editor": "0.18.1",
+    "@elementor/editor-current-user": "0.2.1",
+    "@elementor/editor-documents": "0.11.19",
+    "@elementor/editor-editing-panel": "1.16.0",
+    "@elementor/editor-panels": "0.12.1",
+    "@elementor/editor-props": "0.9.3",
+    "@elementor/editor-styles": "0.6.0",
+    "@elementor/editor-styles-repository": "0.7.3",
     "@elementor/editor-ui": "0.4.0",
-    "@elementor/editor-v1-adapters": "0.10.0",
+    "@elementor/editor-v1-adapters": "0.10.1",
     "@elementor/http": "0.1.3",
     "@elementor/icons": "1.31.0",
     "@elementor/store": "0.9.0",
     "@elementor/ui": "1.26.0",
-    "@elementor/utils": "0.3.1",
+    "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/class-manager/class-manager-button.tsx

@@ -1,18 +1,69 @@
 import * as React from 'react';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useActiveDocumentActions as useActiveDocumentActions,
+} from '@elementor/editor-documents';
 import { ColorSwatchIcon } from '@elementor/icons';
 import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { usePanelActions } from './class-manager-panel';
+import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
 export const ClassManagerButton = () => {
-	const { open } = usePanelActions();
+	const document = useActiveDocument();
+	const { open: openPanel } = usePanelActions();
+	const { save: saveDocument } = useActiveDocumentActions();
+	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+
+	const handleOpenPanel = () => {
+		if ( document?.isDirty ) {
+			openSaveChangesDialog();
+			return;
+		}
+
+		openPanel();
+	};
 
 	return (
-		<Tooltip title={ __( 'Class manager', 'elementor' ) } placement="top">
-			<IconButton onClick={ open }>
-				<ColorSwatchIcon fontSize="tiny" />
-			</IconButton>
-		</Tooltip>
+		<>
+			<Tooltip title={ __( 'Class manager', 'elementor' ) } placement="top">
+				<IconButton onClick={ handleOpenPanel }>
+					<ColorSwatchIcon fontSize="tiny" />
+				</IconButton>
+			</Tooltip>
+			{ isSaveChangesDialogOpen && (
+				<SaveChangesDialog>
+					<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>
+					<SaveChangesDialog.Content>
+						<SaveChangesDialog.ContentText sx={ { mb: 2 } }>
+							{ __(
+								'Save your changes before moving to the class manager to ensure all updates are applied and saved.',
+								'elementor'
+							) }
+						</SaveChangesDialog.ContentText>
+						<SaveChangesDialog.ContentText>
+							{ __( 'If you leave without saving, all changes will be discarded.', 'elementor' ) }
+						</SaveChangesDialog.ContentText>
+					</SaveChangesDialog.Content>
+					<SaveChangesDialog.Actions
+						actions={ {
+							cancel: {
+								label: __( 'Keep editing', 'elementor' ),
+								action: closeSaveChangesDialog,
+							},
+							confirm: {
+								label: __( 'Save & Continue', 'elementor' ),
+								action: async () => {
+									await saveDocument();
+									closeSaveChangesDialog();
+									openPanel();
+								},
+							},
+						} }
+					/>
+				</SaveChangesDialog>
+			) }
+		</>
 	);
 };

package/src/components/class-manager/class-manager-introduction.tsx

@@ -5,7 +5,7 @@ import { IntroductionModal } from '@elementor/editor-ui';
 import { Box, Image, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-const MESSAGE_KEY = 'global-class-manager-4';
+const MESSAGE_KEY = 'global-class-manager';
 
 export const ClassManagerIntroduction = () => {
 	const [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );