@elementor/editor-global-classes 0.9.1 → 0.10.0

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

@@ -15,7 +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';
+import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
 export const { panel, usePanelActions } = createPanel( {
 	id: 'class-manager-panel',
@@ -24,14 +24,8 @@ export const { panel, usePanelActions } = createPanel( {
 
 export function ClassManagerPanel() {
 	const isDirty = useDirtyState();
-
 	const { close: closePanel } = usePanelActions();
-
-	const {
-		open: openUnsavedChangesDialog,
-		close: closeUnsavedChangesDialog,
-		isOpen: isUnsavedChangesDialogOpen,
-	} = useDialog();
+	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 
 	return (
 		<>
@@ -47,7 +41,7 @@ export function ClassManagerPanel() {
 								sx={ { marginLeft: 'auto' } }
 								onClose={ () => {
 									if ( isDirty ) {
-										openUnsavedChangesDialog();
+										openSaveChangesDialog();
 										return;
 									}
 
@@ -74,33 +68,34 @@ 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
+			{ isSaveChangesDialogOpen && (
+				<SaveChangesDialog>
+					<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>
+					<SaveChangesDialog.Content>
+						<SaveChangesDialog.ContentText>
+							{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }
+						</SaveChangesDialog.ContentText>
+						<SaveChangesDialog.ContentText>
+							{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }
+						</SaveChangesDialog.ContentText>
+					</SaveChangesDialog.Content>
+					<SaveChangesDialog.Actions
 						actions={ {
 							cancel: {
 								label: __( 'Cancel', 'elementor' ),
-								action: closeUnsavedChangesDialog,
+								action: closeSaveChangesDialog,
 							},
 							confirm: {
 								label: __( 'Save & Continue', 'elementor' ),
-								action: () => {
-									publishGlobalClasses();
-									closeUnsavedChangesDialog();
+								action: async () => {
+									await publishGlobalClasses();
+									closeSaveChangesDialog();
 									closePanel();
 								},
 							},
 						} }
 					/>
-				</UnsavedChangesDialog>
+				</SaveChangesDialog>
 			) }
 		</>
 	);

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	type DialogContentTextProps,
+	type DialogProps,
+	DialogTitle,
+} from '@elementor/ui';
+
+const TITLE_ID = 'save-changes-dialog';
+
+const SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (
+	<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="xs">
+		{ children }
+	</Dialog>
+);
+
+const SaveChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (
+	<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
+		<AlertTriangleFilledIcon color="secondary" />
+		{ children }
+	</DialogTitle>
+);
+
+const SaveChangesDialogContent = ( { children }: React.PropsWithChildren ) => (
+	<DialogContent>{ children }</DialogContent>
+);
+
+const SaveChangesDialogContentText = ( props: DialogContentTextProps ) => (
+	<DialogContentText variant="body2" color="textPrimary" display="flex" flexDirection="column" { ...props } />
+);
+
+type Action = {
+	label: string;
+	action: () => void | Promise< void >;
+};
+
+type ConfirmationDialogActionsProps = {
+	actions: {
+		cancel: Action;
+		confirm: Action;
+	};
+};
+const SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {
+	const [ isConfirming, setIsConfirming ] = useState( false );
+	const { cancel, confirm } = actions;
+
+	const onConfirm = async () => {
+		setIsConfirming( true );
+		await confirm.action();
+		setIsConfirming( false );
+	};
+	return (
+		<DialogActions>
+			<Button variant="text" color="secondary" onClick={ cancel.action }>
+				{ cancel.label }
+			</Button>
+			<Button variant="contained" color="secondary" onClick={ onConfirm } loading={ isConfirming }>
+				{ confirm.label }
+			</Button>
+		</DialogActions>
+	);
+};
+
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
+
+const useDialog = () => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const open = () => setIsOpen( true );
+	const close = () => setIsOpen( false );
+
+	return { isOpen, open, close };
+};
+
+export { SaveChangesDialog, useDialog };

package/src/global-classes-styles-provider.ts

@@ -65,6 +65,6 @@ export const globalClassesStylesProvider = {
 	subscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),
 	labels: {
 		singular: __( 'Global class', 'elementor' ),
-		plural: __( 'Global CSS Classes', 'elementor' ),
+		plural: __( 'Global CSS classes', 'elementor' ),
 	},
 } satisfies StylesProvider;

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

@@ -1,76 +0,0 @@
-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 };