@elementor/editor-ui 3.35.0-427 → 3.35.0-428

package/dist/index.d.mts

@@ -176,13 +176,13 @@ declare const SaveChangesDialog: {
     }) => React$1.JSX.Element;
     Content: ({ children }: React$1.PropsWithChildren) => React$1.JSX.Element;
     ContentText: (props: DialogContentTextProps) => React$1.JSX.Element;
-    Actions: ({ actions }: ConfirmationDialogActionsProps) => React$1.JSX.Element;
+    Actions: ({ actions }: ConfirmationDialogActionsProps$1) => React$1.JSX.Element;
 };
 type Action = {
     label: string;
     action: () => void | Promise<void>;
 };
-type ConfirmationDialogActionsProps = {
+type ConfirmationDialogActionsProps$1 = {
     actions: {
         cancel?: Action;
         confirm: Action;
@@ -195,6 +195,21 @@ declare const useDialog: () => {
     close: () => void;
 };
 
+type ConfirmationDialogProps = Pick<DialogProps, 'open' | 'onClose' | 'children'>;
+declare const ConfirmationDialog: {
+    ({ open, onClose, children }: ConfirmationDialogProps): React$1.JSX.Element;
+    Title: ({ children }: React$1.PropsWithChildren) => React$1.JSX.Element;
+    Content: ({ children }: React$1.PropsWithChildren) => React$1.JSX.Element;
+    ContentText: (props: DialogContentTextProps) => React$1.JSX.Element;
+    Actions: ({ onClose, onConfirm, cancelLabel, confirmLabel, }: ConfirmationDialogActionsProps) => React$1.JSX.Element;
+};
+type ConfirmationDialogActionsProps = {
+    onClose: () => void;
+    onConfirm: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+};
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -221,4 +236,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.d.ts

@@ -176,13 +176,13 @@ declare const SaveChangesDialog: {
     }) => React$1.JSX.Element;
     Content: ({ children }: React$1.PropsWithChildren) => React$1.JSX.Element;
     ContentText: (props: DialogContentTextProps) => React$1.JSX.Element;
-    Actions: ({ actions }: ConfirmationDialogActionsProps) => React$1.JSX.Element;
+    Actions: ({ actions }: ConfirmationDialogActionsProps$1) => React$1.JSX.Element;
 };
 type Action = {
     label: string;
     action: () => void | Promise<void>;
 };
-type ConfirmationDialogActionsProps = {
+type ConfirmationDialogActionsProps$1 = {
     actions: {
         cancel?: Action;
         confirm: Action;
@@ -195,6 +195,21 @@ declare const useDialog: () => {
     close: () => void;
 };
 
+type ConfirmationDialogProps = Pick<DialogProps, 'open' | 'onClose' | 'children'>;
+declare const ConfirmationDialog: {
+    ({ open, onClose, children }: ConfirmationDialogProps): React$1.JSX.Element;
+    Title: ({ children }: React$1.PropsWithChildren) => React$1.JSX.Element;
+    Content: ({ children }: React$1.PropsWithChildren) => React$1.JSX.Element;
+    ContentText: (props: DialogContentTextProps) => React$1.JSX.Element;
+    Actions: ({ onClose, onConfirm, cancelLabel, confirmLabel, }: ConfirmationDialogActionsProps) => React$1.JSX.Element;
+};
+type ConfirmationDialogActionsProps = {
+    onClose: () => void;
+    onConfirm: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+};
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -221,4 +236,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CollapseIcon: () => CollapseIcon,
+  ConfirmationDialog: () => ConfirmationDialog,
   CtaButton: () => CtaButton,
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
@@ -857,6 +858,27 @@ var useDialog = () => {
   return { isOpen, open, close };
 };
 
+// src/components/confirmation-dialog.tsx
+var React20 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var TITLE_ID2 = "confirmation-dialog";
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React20.createElement(import_ui20.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React20.createElement(import_ui20.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React20.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(import_ui20.DialogContent, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React20.createElement(import_ui20.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialogActions = ({
+  onClose,
+  onConfirm,
+  cancelLabel,
+  confirmLabel
+}) => /* @__PURE__ */ React20.createElement(import_ui20.DialogActions, null, /* @__PURE__ */ React20.createElement(import_ui20.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React20.createElement(import_ui20.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n4.__)("Delete", "elementor")));
+ConfirmationDialog.Title = ConfirmationDialogTitle;
+ConfirmationDialog.Content = ConfirmationDialogContent;
+ConfirmationDialog.ContentText = ConfirmationDialogContentText;
+ConfirmationDialog.Actions = ConfirmationDialogActions;
+
 // src/hooks/use-editable.ts
 var import_react14 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
@@ -964,6 +986,7 @@ var selectAll = (el) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CollapseIcon,
+  ConfirmationDialog,
   CtaButton,
   EditableField,
   EllipsisWithTooltip,

package/dist/index.mjs

@@ -840,6 +840,34 @@ var useDialog = () => {
   return { isOpen, open, close };
 };
 
+// src/components/confirmation-dialog.tsx
+import * as React20 from "react";
+import { AlertOctagonFilledIcon } from "@elementor/icons";
+import {
+  Button as Button5,
+  Dialog as Dialog4,
+  DialogActions as DialogActions3,
+  DialogContent as DialogContent2,
+  DialogContentText as DialogContentText2,
+  DialogTitle as DialogTitle3
+} from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var TITLE_ID2 = "confirmation-dialog";
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React20.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React20.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React20.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(DialogContent2, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React20.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialogActions = ({
+  onClose,
+  onConfirm,
+  cancelLabel,
+  confirmLabel
+}) => /* @__PURE__ */ React20.createElement(DialogActions3, null, /* @__PURE__ */ React20.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __4("Not now", "elementor")), /* @__PURE__ */ React20.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __4("Delete", "elementor")));
+ConfirmationDialog.Title = ConfirmationDialogTitle;
+ConfirmationDialog.Content = ConfirmationDialogContent;
+ConfirmationDialog.ContentText = ConfirmationDialogContentText;
+ConfirmationDialog.Actions = ConfirmationDialogActions;
+
 // src/hooks/use-editable.ts
 import { useEffect as useEffect7, useRef as useRef4, useState as useState7 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
@@ -946,6 +974,7 @@ var selectAll = (el) => {
 };
 export {
   CollapseIcon,
+  ConfirmationDialog,
   CtaButton,
   EditableField,
   EllipsisWithTooltip,

package/package.json

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

package/src/components/confirmation-dialog.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { AlertOctagonFilledIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	type DialogContentTextProps,
+	type DialogProps,
+	DialogTitle,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+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">
+		{ children }
+	</Dialog>
+);
+
+const ConfirmationDialogTitle = ( { children }: React.PropsWithChildren ) => (
+	<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
+		<AlertOctagonFilledIcon color="error" />
+		{ children }
+	</DialogTitle>
+);
+
+const ConfirmationDialogContent = ( { children }: React.PropsWithChildren ) => (
+	<DialogContent>{ children }</DialogContent>
+);
+
+const ConfirmationDialogContentText = ( props: DialogContentTextProps ) => (
+	<DialogContentText variant="body2" color="textPrimary" { ...props } />
+);
+
+type ConfirmationDialogActionsProps = {
+	onClose: () => void;
+	onConfirm: () => void;
+	cancelLabel?: string;
+	confirmLabel?: string;
+};
+
+const ConfirmationDialogActions = ( {
+	onClose,
+	onConfirm,
+	cancelLabel,
+	confirmLabel,
+}: ConfirmationDialogActionsProps ) => (
+	<DialogActions>
+		<Button color="secondary" onClick={ onClose }>
+			{ cancelLabel ?? __( 'Not now', 'elementor' ) }
+		</Button>
+		{ /* eslint-disable-next-line jsx-a11y/no-autofocus */ }
+		<Button autoFocus variant="contained" color="error" onClick={ onConfirm }>
+			{ confirmLabel ?? __( 'Delete', 'elementor' ) }
+		</Button>
+	</DialogActions>
+);
+
+ConfirmationDialog.Title = ConfirmationDialogTitle;
+ConfirmationDialog.Content = ConfirmationDialogContent;
+ConfirmationDialog.ContentText = ConfirmationDialogContentText;
+ConfirmationDialog.Actions = ConfirmationDialogActions;

package/src/index.ts

@@ -18,6 +18,7 @@ export { PromotionChip } from './components/promotion-chip';
 
 export * from './components/popover';
 export * from './components/save-changes-dialog';
+export { ConfirmationDialog } from './components/confirmation-dialog';
 
 // hooks
 export { useEditable } from './hooks/use-editable';