@elementor/editor-ui 4.0.0-573 → 4.0.0-591

package/dist/index.d.mts

@@ -242,14 +242,14 @@ declare const ConfirmationDialog: {
 };
 type ConfirmationDialogTitleProps = React$1.PropsWithChildren<{
     icon?: React$1.ElementType;
-    iconColor?: 'error' | 'secondary';
+    iconColor?: 'error' | 'secondary' | 'primary';
 }>;
 type ConfirmationDialogActionsProps = {
     onClose: () => void;
     onConfirm: () => void;
     cancelLabel?: string;
     confirmLabel?: string;
-    color?: 'error' | 'secondary';
+    color?: 'error' | 'secondary' | 'primary';
     onSuppressMessage?: () => void;
     suppressLabel?: string;
 };

package/dist/index.d.ts

@@ -242,14 +242,14 @@ declare const ConfirmationDialog: {
 };
 type ConfirmationDialogTitleProps = React$1.PropsWithChildren<{
     icon?: React$1.ElementType;
-    iconColor?: 'error' | 'secondary';
+    iconColor?: 'error' | 'secondary' | 'primary';
 }>;
 type ConfirmationDialogActionsProps = {
     onClose: () => void;
     onConfirm: () => void;
     cancelLabel?: string;
     confirmLabel?: string;
-    color?: 'error' | 'secondary';
+    color?: 'error' | 'secondary' | 'primary';
     onSuppressMessage?: () => void;
     suppressLabel?: string;
 };

package/dist/index.js

@@ -653,6 +653,7 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
         color: "promotion",
         icon: /* @__PURE__ */ React15.createElement(import_icons5.CrownFilledIcon, { fontSize: "tiny" }),
         onClose,
+        onMouseDown: (e) => e.stopPropagation(),
         role: "dialog",
         "aria-label": "promotion-popover-title",
         action: /* @__PURE__ */ React15.createElement(
@@ -1089,14 +1090,14 @@ var import_icons9 = require("@elementor/icons");
 var import_ui24 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(import_ui24.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(import_ui24.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
 var ConfirmationDialogTitle = ({
   children,
   icon: Icon = import_icons9.AlertOctagonFilledIcon,
   iconColor = "error"
 }) => /* @__PURE__ */ React25.createElement(import_ui24.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React25.createElement(Icon, { color: iconColor }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContent, null, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContent, { sx: { mt: 2 } }, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContentText, { variant: "body2", color: "secondary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
@@ -1121,10 +1122,11 @@ var ConfirmationDialogActions = ({
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
-          size: "small"
+          size: "medium",
+          color: "secondary"
         }
       ),
-      label: /* @__PURE__ */ React25.createElement(import_ui24.Typography, { variant: "body2" }, suppressLabel)
+      label: /* @__PURE__ */ React25.createElement(import_ui24.Typography, { variant: "body2", color: "text.secondary" }, suppressLabel)
     }
   ), /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement(import_ui24.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n6.__)("Not now", "elementor")), /* @__PURE__ */ React25.createElement(import_ui24.Button, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? (0, import_i18n6.__)("Delete", "elementor"))));
 };

package/dist/index.mjs

@@ -615,6 +615,7 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
         color: "promotion",
         icon: /* @__PURE__ */ React15.createElement(CrownFilledIcon2, { fontSize: "tiny" }),
         onClose,
+        onMouseDown: (e) => e.stopPropagation(),
         role: "dialog",
         "aria-label": "promotion-popover-title",
         action: /* @__PURE__ */ React15.createElement(
@@ -1070,14 +1071,14 @@ import {
 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
 var ConfirmationDialogTitle = ({
   children,
   icon: Icon = AlertOctagonFilledIcon,
   iconColor = "error"
 }) => /* @__PURE__ */ React25.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React25.createElement(Icon, { color: iconColor }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(DialogContent2, null, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(DialogContent2, { sx: { mt: 2 } }, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(DialogContentText2, { variant: "body2", color: "secondary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
@@ -1102,10 +1103,11 @@ var ConfirmationDialogActions = ({
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
-          size: "small"
+          size: "medium",
+          color: "secondary"
         }
       ),
-      label: /* @__PURE__ */ React25.createElement(Typography6, { variant: "body2" }, suppressLabel)
+      label: /* @__PURE__ */ React25.createElement(Typography6, { variant: "body2", color: "text.secondary" }, suppressLabel)
     }
   ), /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement(Button7, { color: "secondary", onClick: onClose }, cancelLabel ?? __6("Not now", "elementor")), /* @__PURE__ */ React25.createElement(Button7, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? __6("Delete", "elementor"))));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "4.0.0-573",
+  "version": "4.0.0-591",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "4.0.0-573",
+    "@elementor/editor-v1-adapters": "4.0.0-591",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/__tests__/confirmation-dialog.test.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { ConfirmationDialog } from '../confirmation-dialog';
+
+describe( 'ConfirmationDialog', () => {
+	const mockOnClose = jest.fn();
+	const mockOnConfirm = jest.fn();
+	const mockOnSuppressMessage = jest.fn();
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render with title, content, and actions', () => {
+		// Act
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Delete Item</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>
+						Are you sure you want to delete this item?
+					</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions
+					onClose={ mockOnClose }
+					onConfirm={ mockOnConfirm }
+					cancelLabel="Cancel"
+					confirmLabel="Delete"
+				/>
+			</ConfirmationDialog>
+		);
+
+		// Assert
+		expect( screen.getByText( 'Delete Item' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Are you sure you want to delete this item?' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Cancel' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Delete' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'should call onClose when cancel button is clicked', () => {
+		// Arrange
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Confirm Action</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Are you sure?</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions onClose={ mockOnClose } onConfirm={ mockOnConfirm } />
+			</ConfirmationDialog>
+		);
+
+		// Act
+		fireEvent.click( screen.getByRole( 'button', { name: 'Not now' } ) );
+
+		// Assert
+		expect( mockOnClose ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnConfirm ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should call onConfirm when confirm button is clicked', () => {
+		// Arrange
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Confirm Action</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Are you sure?</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions onClose={ mockOnClose } onConfirm={ mockOnConfirm } />
+			</ConfirmationDialog>
+		);
+
+		// Act
+		fireEvent.click( screen.getByRole( 'button', { name: 'Delete' } ) );
+
+		// Assert
+		expect( mockOnConfirm ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should render with custom icon and icon color', () => {
+		// Arrange
+		const CustomIcon = () => <span>Custom Icon</span>;
+
+		// Act
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title icon={ CustomIcon } iconColor="primary">
+					Custom Title
+				</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Content</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions onClose={ mockOnClose } onConfirm={ mockOnConfirm } />
+			</ConfirmationDialog>
+		);
+
+		// Assert
+		expect( screen.getByText( 'Custom Icon' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Custom Title' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render "Don\'t show again" checkbox when onSuppressMessage is provided', () => {
+		// Act
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Confirm Action</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Are you sure?</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions
+					onClose={ mockOnClose }
+					onConfirm={ mockOnConfirm }
+					onSuppressMessage={ mockOnSuppressMessage }
+				/>
+			</ConfirmationDialog>
+		);
+
+		// Assert
+		expect( screen.getByText( "Don't show this again" ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'checkbox' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should call onSuppressMessage when checkbox is checked and confirm is clicked', () => {
+		// Arrange
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Confirm Action</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Are you sure?</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions
+					onClose={ mockOnClose }
+					onConfirm={ mockOnConfirm }
+					onSuppressMessage={ mockOnSuppressMessage }
+				/>
+			</ConfirmationDialog>
+		);
+
+		// Act
+		const checkbox = screen.getByRole( 'checkbox' );
+		fireEvent.click( checkbox );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Delete' } ) );
+
+		// Assert
+		expect( mockOnSuppressMessage ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnConfirm ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should render with custom button labels', () => {
+		// Act
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Custom Labels</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Content</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions
+					onClose={ mockOnClose }
+					onConfirm={ mockOnConfirm }
+					cancelLabel="No thanks"
+					confirmLabel="Yes, proceed"
+				/>
+			</ConfirmationDialog>
+		);
+
+		// Assert
+		expect( screen.getByRole( 'button', { name: 'No thanks' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Yes, proceed' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render with custom suppress label', () => {
+		// Act
+		render(
+			<ConfirmationDialog open={ true } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Confirm Action</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Are you sure?</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions
+					onClose={ mockOnClose }
+					onConfirm={ mockOnConfirm }
+					onSuppressMessage={ mockOnSuppressMessage }
+					suppressLabel="Don't ask me again"
+				/>
+			</ConfirmationDialog>
+		);
+
+		// Assert
+		expect( screen.getByText( "Don't ask me again" ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not render when open is false', () => {
+		// Act
+		render(
+			<ConfirmationDialog open={ false } onClose={ mockOnClose }>
+				<ConfirmationDialog.Title>Should Not Render</ConfirmationDialog.Title>
+				<ConfirmationDialog.Content>
+					<ConfirmationDialog.ContentText>Hidden Content</ConfirmationDialog.ContentText>
+				</ConfirmationDialog.Content>
+				<ConfirmationDialog.Actions onClose={ mockOnClose } onConfirm={ mockOnConfirm } />
+			</ConfirmationDialog>
+		);
+
+		// Assert
+		expect( screen.queryByText( 'Should Not Render' ) ).not.toBeInTheDocument();
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/components/confirmation-dialog.tsx

@@ -21,14 +21,14 @@ const TITLE_ID = 'confirmation-dialog';
 type ConfirmationDialogProps = Pick< DialogProps, 'open' | 'onClose' | 'children' >;
 
 export const ConfirmationDialog = ( { open, onClose, children }: ConfirmationDialogProps ) => (
-	<Dialog open={ open } onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="xs">
+	<Dialog open={ open } onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="sm">
 		{ children }
 	</Dialog>
 );
 
 type ConfirmationDialogTitleProps = React.PropsWithChildren< {
 	icon?: React.ElementType;
-	iconColor?: 'error' | 'secondary';
+	iconColor?: 'error' | 'secondary' | 'primary';
 } >;
 
 const ConfirmationDialogTitle = ( {
@@ -43,11 +43,11 @@ const ConfirmationDialogTitle = ( {
 );
 
 const ConfirmationDialogContent = ( { children }: React.PropsWithChildren ) => (
-	<DialogContent>{ children }</DialogContent>
+	<DialogContent sx={ { mt: 2 } }>{ children }</DialogContent>
 );
 
 const ConfirmationDialogContentText = ( props: DialogContentTextProps ) => (
-	<DialogContentText variant="body2" color="textPrimary" { ...props } />
+	<DialogContentText variant="body2" color="secondary" { ...props } />
 );
 
 type ConfirmationDialogActionsProps = {
@@ -55,7 +55,7 @@ type ConfirmationDialogActionsProps = {
 	onConfirm: () => void;
 	cancelLabel?: string;
 	confirmLabel?: string;
-	color?: 'error' | 'secondary';
+	color?: 'error' | 'secondary' | 'primary';
 	onSuppressMessage?: () => void;
 	suppressLabel?: string;
 };
@@ -88,10 +88,15 @@ const ConfirmationDialogActions = ( {
 							onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) =>
 								setDontShowAgain( event.target.checked )
 							}
-							size="small"
+							size="medium"
+							color="secondary"
 						/>
 					}
-					label={ <Typography variant="body2">{ suppressLabel }</Typography> }
+					label={
+						<Typography variant="body2" color="text.secondary">
+							{ suppressLabel }
+						</Typography>
+					}
 				/>
 			) }
 			<div>

package/src/components/promotions/promotion-popover.tsx

@@ -79,6 +79,7 @@ function PopoverAlert( { title, content, ctaUrl, ctaText, onClose }: PromotionPo
 				color="promotion"
 				icon={ <CrownFilledIcon fontSize="tiny" /> }
 				onClose={ onClose }
+				onMouseDown={ ( e: MouseEvent ) => e.stopPropagation() }
 				role="dialog"
 				aria-label="promotion-popover-title"
 				action={