@elementor/editor-global-classes 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @elementor/editor-global-classes
 
+## 0.9.0
+
+### Minor Changes
+
+- d723ffa: Added unsaved changes dialog to global classes.
+
+### Patch Changes
+
+- Updated dependencies [9a5fd67]
+  - @elementor/editor-editing-panel@1.14.0
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.js

@@ -31,16 +31,16 @@ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_store16 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React6 = __toESM(require("react"));
-var import_icons5 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
+var React7 = __toESM(require("react"));
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
-var import_icons4 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
 // src/hooks/use-dirty-state.ts
@@ -555,6 +555,29 @@ var validateLabel = (newLabel) => {
   return null;
 };
 
+// src/components/class-manager/unsaved-changes-dialog.tsx
+var React5 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var TITLE_ID2 = "unsaved-changes-dialog";
+var UnsavedChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React5.createElement(import_ui5.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var UnsavedChangesDialogTitle = ({ children }) => /* @__PURE__ */ React5.createElement(import_ui5.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React5.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), children);
+var UnsavedChangesDialogContent = ({ children }) => /* @__PURE__ */ React5.createElement(import_ui5.DialogContent, null, /* @__PURE__ */ React5.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary" }, children));
+var UnsavedChangesDialogActions = ({ actions }) => {
+  const { cancel, confirm } = actions;
+  return /* @__PURE__ */ React5.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React5.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React5.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: confirm.action }, confirm.label));
+};
+UnsavedChangesDialog.Title = UnsavedChangesDialogTitle;
+UnsavedChangesDialog.Content = UnsavedChangesDialogContent;
+UnsavedChangesDialog.Actions = UnsavedChangesDialogActions;
+var useDialog = () => {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
+};
+
 // src/components/class-manager/class-manager-panel.tsx
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id: "class-manager-panel",
@@ -562,8 +585,26 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 });
 function ClassManagerPanel() {
   const isDirty3 = useDirtyState();
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.ErrorBoundary, { fallback: /* @__PURE__ */ React5.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React5.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React5.createElement(import_ui5.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(import_icons4.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React5.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React5.createElement(GlobalClassesList, null)), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React5.createElement(
-    import_ui5.Button,
+  const { close: closePanel } = usePanelActions();
+  const {
+    open: openUnsavedChangesDialog,
+    close: closeUnsavedChangesDialog,
+    isOpen: isUnsavedChangesDialogOpen
+  } = useDialog();
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React6.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React6.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React6.createElement(
+    CloseButton,
+    {
+      sx: { marginLeft: "auto" },
+      onClose: () => {
+        if (isDirty3) {
+          openUnsavedChangesDialog();
+          return;
+        }
+        closePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React6.createElement(GlobalClassesList, null)), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React6.createElement(
+    import_ui6.Button,
     {
       fullWidth: true,
       size: "small",
@@ -573,26 +614,41 @@ function ClassManagerPanel() {
       onClick: publishGlobalClasses
     },
     (0, import_i18n5.__)("Save changes", "elementor")
-  )))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
+  )))), /* @__PURE__ */ React6.createElement(ClassManagerIntroduction, null), isUnsavedChangesDialogOpen && /* @__PURE__ */ React6.createElement(UnsavedChangesDialog, null, /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Content, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor"), /* @__PURE__ */ React6.createElement("br", null), (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor")), /* @__PURE__ */ React6.createElement(
+    UnsavedChangesDialog.Actions,
+    {
+      actions: {
+        cancel: {
+          label: (0, import_i18n5.__)("Cancel", "elementor"),
+          action: closeUnsavedChangesDialog
+        },
+        confirm: {
+          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
+          action: () => {
+            publishGlobalClasses();
+            closeUnsavedChangesDialog();
+            closePanel();
+          }
+        }
+      }
+    }
+  )));
 }
-var CloseButton = (props) => {
-  const { close } = usePanelActions();
-  return /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React5.createElement(import_icons4.XIcon, { fontSize: "small" }));
-};
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React5.createElement(import_ui5.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React5.createElement(import_ui5.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React5.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React6.createElement(import_icons5.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { onClick: open }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { onClick: open }, /* @__PURE__ */ React7.createElement(import_icons6.ColorSwatchIcon, { fontSize: "tiny" })));
 };
 
 // src/components/populate-store.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_store12 = require("@elementor/store");
 function PopulateStore() {
   const dispatch3 = (0, import_store12.__useDispatch)();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
       dispatch3(slice.actions.init({ items: data, order: meta.order }));

package/dist/index.js.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/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';\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\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 sx={ { marginLeft: 'auto' } } />\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</>\n\t);\n}\n\nconst CloseButton = ( props: IconButtonProps ) => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close } { ...props }>\n\t\t\t<XIcon fontSize=\"small\" />\n\t\t</IconButton>\n\t);\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 { 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":["import_editor_panels","import_editor_styles_repository","import_editor_v1_adapters","import_store","React","import_icons","import_ui","import_i18n","React","import_icons","import_ui","import_i18n","import_store","createSlice","createSelector","useSelector","import_store","getState","dispatch","React","import_editor_ui","import_icons","import_ui","import_i18n","import_editor_styles","import_store","import_i18n","getState","dispatch","subscribeWithSelector","import_store","useSelector","import_store","useSelector","React","import_react","import_ui","import_i18n","React","import_icons","import_ui","createPanel","isDirty","import_react","import_store","dispatch","useDispatch","import_store","subscribeWithSelector","isDirty","runCommandSync","getState","registerSlice","registerPanel","listenTo"]}
+{"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":["import_editor_panels","import_editor_styles_repository","import_editor_v1_adapters","import_store","React","import_icons","import_ui","import_i18n","React","import_icons","import_ui","import_i18n","import_store","createSlice","createSelector","useSelector","import_store","getState","dispatch","React","import_editor_ui","import_icons","import_ui","import_i18n","import_editor_styles","import_store","import_i18n","getState","dispatch","subscribeWithSelector","import_store","useSelector","import_store","useSelector","React","import_react","import_ui","import_i18n","React","import_icons","import_ui","React","import_react","import_icons","import_ui","TITLE_ID","createPanel","isDirty","import_react","import_store","dispatch","useDispatch","import_store","subscribeWithSelector","isDirty","runCommandSync","getState","registerSlice","registerPanel","listenTo"]}

package/dist/index.mjs

@@ -7,13 +7,13 @@ 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,
@@ -23,7 +23,7 @@ import {
   PanelHeaderTitle
 } from "@elementor/editor-panels";
 import { ColorSwatchIcon, XIcon } from "@elementor/icons";
-import { Alert, Box as Box4, Button as Button2, 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/hooks/use-dirty-state.ts
@@ -577,6 +577,36 @@ 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",
@@ -584,8 +614,26 @@ var { panel, usePanelActions } = createPanel({
 });
 function ClassManagerPanel() {
   const isDirty3 = useDirtyState();
-  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(PanelFooter, null, /* @__PURE__ */ React5.createElement(
-    Button2,
+  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",
@@ -595,18 +643,33 @@ function ClassManagerPanel() {
       onClick: publishGlobalClasses
     },
     __5("Save changes", "elementor")
-  )))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
+  )))), /* @__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

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/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';\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\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 sx={ { marginLeft: 'auto' } } />\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</>\n\t);\n}\n\nconst CloseButton = ( props: IconButtonProps ) => {\n\tconst { close } = usePanelActions();\n\n\treturn (\n\t\t<IconButton size=\"small\" color=\"secondary\" onClick={ close } { ...props }>\n\t\t\t<XIcon fontSize=\"small\" />\n\t\t</IconButton>\n\t);\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 { 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","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/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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@elementor/editor": "0.18.0",
     "@elementor/editor-current-user": "0.2.0",
-    "@elementor/editor-editing-panel": "1.13.1",
+    "@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",

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

@@ -15,6 +15,7 @@ import { useDirtyState } from '../../hooks/use-dirty-state';
 import { publishGlobalClasses } from '../../publish-global-classes';
 import { ClassManagerIntroduction } from './class-manager-introduction';
 import { GlobalClassesList } from './global-classes-list';
+import { UnsavedChangesDialog, useDialog } from './unsaved-changes-dialog';
 
 export const { panel, usePanelActions } = createPanel( {
 	id: 'class-manager-panel',
@@ -24,6 +25,14 @@ export const { panel, usePanelActions } = createPanel( {
 export function ClassManagerPanel() {
 	const isDirty = useDirtyState();
 
+	const { close: closePanel } = usePanelActions();
+
+	const {
+		open: openUnsavedChangesDialog,
+		close: closeUnsavedChangesDialog,
+		isOpen: isUnsavedChangesDialogOpen,
+	} = useDialog();
+
 	return (
 		<>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
@@ -34,7 +43,17 @@ export function ClassManagerPanel() {
 								<ColorSwatchIcon fontSize="inherit" sx={ { transform: 'rotate(90deg)' } } />
 								{ __( 'CSS Class manager', 'elementor' ) }
 							</PanelHeaderTitle>
-							<CloseButton sx={ { marginLeft: 'auto' } } />
+							<CloseButton
+								sx={ { marginLeft: 'auto' } }
+								onClose={ () => {
+									if ( isDirty ) {
+										openUnsavedChangesDialog();
+										return;
+									}
+
+									closePanel();
+								} }
+							/>
 						</Stack>
 					</PanelHeader>
 					<PanelBody px={ 2 }>
@@ -55,19 +74,43 @@ export function ClassManagerPanel() {
 				</Panel>
 			</ErrorBoundary>
 			<ClassManagerIntroduction />
+			{ isUnsavedChangesDialogOpen && (
+				<UnsavedChangesDialog>
+					<UnsavedChangesDialog.Title>
+						{ __( 'You have unsaved changes', 'elementor' ) }
+					</UnsavedChangesDialog.Title>
+					<UnsavedChangesDialog.Content>
+						{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }
+						<br />
+						{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }
+					</UnsavedChangesDialog.Content>
+					<UnsavedChangesDialog.Actions
+						actions={ {
+							cancel: {
+								label: __( 'Cancel', 'elementor' ),
+								action: closeUnsavedChangesDialog,
+							},
+							confirm: {
+								label: __( 'Save & Continue', 'elementor' ),
+								action: () => {
+									publishGlobalClasses();
+									closeUnsavedChangesDialog();
+									closePanel();
+								},
+							},
+						} }
+					/>
+				</UnsavedChangesDialog>
+			) }
 		</>
 	);
 }
 
-const CloseButton = ( props: IconButtonProps ) => {
-	const { close } = usePanelActions();
-
-	return (
-		<IconButton size="small" color="secondary" onClick={ close } { ...props }>
-			<XIcon fontSize="small" />
-		</IconButton>
-	);
-};
+const CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (
+	<IconButton size="small" color="secondary" onClick={ onClose } aria-label="Close" { ...props }>
+		<XIcon fontSize="small" />
+	</IconButton>
+);
 
 const ErrorBoundaryFallback = () => (
 	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>

package/src/components/class-manager/unsaved-changes-dialog.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	type DialogProps,
+	DialogTitle,
+} from '@elementor/ui';
+
+const TITLE_ID = 'unsaved-changes-dialog';
+
+const UnsavedChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (
+	<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="xs">
+		{ children }
+	</Dialog>
+);
+
+const UnsavedChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (
+	<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
+		<AlertTriangleFilledIcon color="secondary" />
+		{ children }
+	</DialogTitle>
+);
+
+const UnsavedChangesDialogContent = ( { children }: React.PropsWithChildren ) => (
+	<DialogContent>
+		<DialogContentText variant="body2" color="textPrimary">
+			{ children }
+		</DialogContentText>
+	</DialogContent>
+);
+
+type Action = {
+	label: string;
+	action: () => void;
+};
+
+type ConfirmationDialogActionsProps = {
+	actions: {
+		cancel: Action;
+		confirm: Action;
+	};
+};
+const UnsavedChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {
+	const { cancel, confirm } = actions;
+
+	return (
+		<DialogActions>
+			<Button variant="text" color="secondary" onClick={ cancel.action }>
+				{ cancel.label }
+			</Button>
+			<Button variant="contained" color="secondary" onClick={ confirm.action }>
+				{ confirm.label }
+			</Button>
+		</DialogActions>
+	);
+};
+
+UnsavedChangesDialog.Title = UnsavedChangesDialogTitle;
+UnsavedChangesDialog.Content = UnsavedChangesDialogContent;
+UnsavedChangesDialog.Actions = UnsavedChangesDialogActions;
+
+const useDialog = () => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const open = () => setIsOpen( true );
+	const close = () => setIsOpen( false );
+
+	return { isOpen, open, close };
+};
+
+export { UnsavedChangesDialog, useDialog };