@elementor/editor-global-classes 0.9.1 → 0.11.0

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/components/class-manager/sortable.tsx

@@ -25,6 +25,7 @@ type ItemRenderProps = Record< string, unknown > & {
 	isDragged: boolean;
 	showDropIndication: boolean;
 	dropIndicationStyle: React.CSSProperties;
+	isDragPlaceholder: boolean;
 };
 
 type SortableItemProps = {
@@ -32,9 +33,10 @@ type SortableItemProps = {
 	children: ( props: ItemRenderProps ) => React.ReactNode;
 };
 
-export const SortableItem = ( { children, id }: SortableItemProps ) => {
+export const SortableItem = ( { children, id, ...props }: SortableItemProps ) => {
 	return (
 		<UnstableSortableItem
+			{ ...props }
 			id={ id }
 			render={ ( {
 				itemProps,
@@ -44,9 +46,16 @@ export const SortableItem = ( { children, id }: SortableItemProps ) => {
 				triggerStyle,
 				dropIndicationStyle,
 				showDropIndication,
+				isDragOverlay,
+				isDragPlaceholder,
 			}: UnstableSortableItemRenderProps ) => {
 				return (
-					<StyledSortableItem { ...itemProps } elevation={ 0 } sx={ itemStyle } role="listitem">
+					<StyledSortableItem
+						{ ...itemProps }
+						sx={ itemStyle }
+						role="listitem"
+						{ ...( isDragOverlay ? { component: Paper, elevation: 0 } : {} ) }
+					>
 						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
 						{ children( {
 							itemProps,
@@ -56,6 +65,7 @@ export const SortableItem = ( { children, id }: SortableItemProps ) => {
 							triggerStyle,
 							dropIndicationStyle,
 							showDropIndication,
+							isDragPlaceholder,
 						} ) }
 					</StyledSortableItem>
 				);
@@ -64,7 +74,7 @@ export const SortableItem = ( { children, id }: SortableItemProps ) => {
 	);
 };
 
-const StyledSortableItem = styled( Paper )`
+const StyledSortableItem = styled( Box )`
 	position: relative;
 
 	&:hover {

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 };