@elementor/editor-ui 3.33.0-118 → 3.33.0-119

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement } from 'react';
-import { MenuItemProps, AlertProps, InfotipProps, MenuList } from '@elementor/ui';
+import { MenuItemProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -116,6 +116,32 @@ type Props = {
 };
 declare const PopoverSearch: ({ value, onSearch, placeholder }: Props) => React$1.JSX.Element;
 
+declare const SaveChangesDialog: {
+    ({ children, onClose }: Pick<DialogProps, "children" | "onClose">): React$1.JSX.Element;
+    Title: ({ children, onClose }: React$1.PropsWithChildren & {
+        onClose?: () => void;
+    }) => 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;
+};
+type Action = {
+    label: string;
+    action: () => void | Promise<void>;
+};
+type ConfirmationDialogActionsProps = {
+    actions: {
+        cancel?: Action;
+        confirm: Action;
+        discard?: Action;
+    };
+};
+declare const useDialog: () => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+};
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -142,4 +168,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useEditable };
+export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, SaveChangesDialog, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement } from 'react';
-import { MenuItemProps, AlertProps, InfotipProps, MenuList } from '@elementor/ui';
+import { MenuItemProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -116,6 +116,32 @@ type Props = {
 };
 declare const PopoverSearch: ({ value, onSearch, placeholder }: Props) => React$1.JSX.Element;
 
+declare const SaveChangesDialog: {
+    ({ children, onClose }: Pick<DialogProps, "children" | "onClose">): React$1.JSX.Element;
+    Title: ({ children, onClose }: React$1.PropsWithChildren & {
+        onClose?: () => void;
+    }) => 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;
+};
+type Action = {
+    label: string;
+    action: () => void | Promise<void>;
+};
+type ConfirmationDialogActionsProps = {
+    actions: {
+        cancel?: Action;
+        confirm: Action;
+        discard?: Action;
+    };
+};
+declare const useDialog: () => {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+};
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -142,4 +168,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useEditable };
+export { EditableField, EllipsisWithTooltip, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, SaveChangesDialog, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.js

@@ -43,11 +43,13 @@ __export(index_exports, {
   PopoverHeader: () => PopoverHeader,
   PopoverMenuList: () => PopoverMenuList,
   PopoverSearch: () => PopoverSearch,
+  SaveChangesDialog: () => SaveChangesDialog,
   StyledMenuList: () => StyledMenuList,
   ThemeProvider: () => ThemeProvider,
   WarningInfotip: () => WarningInfotip,
   closeDialog: () => closeDialog,
   openDialog: () => openDialog,
+  useDialog: () => useDialog,
   useEditable: () => useEditable
 });
 module.exports = __toCommonJS(index_exports);
@@ -605,11 +607,53 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
   ));
 };
 
-// src/hooks/use-editable.ts
+// src/components/save-changes-dialog.tsx
+var React14 = __toESM(require("react"));
 var import_react12 = require("react");
+var import_icons3 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
+var TITLE_ID = "save-changes-dialog";
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React14.createElement(import_ui14.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React14.createElement(
+  import_ui14.DialogTitle,
+  {
+    id: TITLE_ID,
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    sx: { lineHeight: 1, justifyContent: "space-between" }
+  },
+  /* @__PURE__ */ React14.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React14.createElement(import_icons3.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React14.createElement(import_ui14.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React14.createElement(import_icons3.XIcon, null))
+);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React14.createElement(import_ui14.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React14.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogActions = ({ actions }) => {
+  const [isConfirming, setIsConfirming] = (0, import_react12.useState)(false);
+  const { cancel, confirm, discard } = actions;
+  const onConfirm = async () => {
+    setIsConfirming(true);
+    await confirm.action();
+    setIsConfirming(false);
+  };
+  return /* @__PURE__ */ React14.createElement(import_ui14.DialogActions, null, cancel && /* @__PURE__ */ React14.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React14.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React14.createElement(import_ui14.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+};
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
+var useDialog = () => {
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
+};
+
+// src/hooks/use-editable.ts
+var import_react13 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -682,8 +726,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -715,11 +759,13 @@ var selectAll = (el) => {
   PopoverHeader,
   PopoverMenuList,
   PopoverSearch,
+  SaveChangesDialog,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
   closeDialog,
   openDialog,
+  useDialog,
   useEditable
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -565,11 +565,62 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
   ));
 };
 
+// src/components/save-changes-dialog.tsx
+import * as React14 from "react";
+import { useState as useState6 } from "react";
+import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
+import {
+  Button as Button3,
+  Dialog as Dialog3,
+  DialogActions as DialogActions2,
+  DialogContent,
+  DialogContentText,
+  DialogTitle as DialogTitle2,
+  IconButton as IconButton2,
+  Stack as Stack2
+} from "@elementor/ui";
+var TITLE_ID = "save-changes-dialog";
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React14.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React14.createElement(
+  DialogTitle2,
+  {
+    id: TITLE_ID,
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    sx: { lineHeight: 1, justifyContent: "space-between" }
+  },
+  /* @__PURE__ */ React14.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React14.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React14.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React14.createElement(XIcon2, null))
+);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React14.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React14.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogActions = ({ actions }) => {
+  const [isConfirming, setIsConfirming] = useState6(false);
+  const { cancel, confirm, discard } = actions;
+  const onConfirm = async () => {
+    setIsConfirming(true);
+    await confirm.action();
+    setIsConfirming(false);
+  };
+  return /* @__PURE__ */ React14.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React14.createElement(Button3, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React14.createElement(Button3, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React14.createElement(Button3, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+};
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
+var useDialog = () => {
+  const [isOpen, setIsOpen] = useState6(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  return { isOpen, open, close };
+};
+
 // src/hooks/use-editable.ts
-import { useEffect as useEffect6, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState7 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = useState6(false);
-  const [error, setError] = useState6(null);
+  const [isEditing, setIsEditing] = useState7(false);
+  const [error, setError] = useState7(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -674,11 +725,13 @@ export {
   PopoverHeader,
   PopoverMenuList,
   PopoverSearch,
+  SaveChangesDialog,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
   closeDialog,
   openDialog,
+  useDialog,
   useEditable
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

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

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { AlertTriangleFilledIcon, XIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	type DialogContentTextProps,
+	type DialogProps,
+	DialogTitle,
+	IconButton,
+	Stack,
+} from '@elementor/ui';
+
+const TITLE_ID = 'save-changes-dialog';
+
+export const SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (
+	<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="xs">
+		{ children }
+	</Dialog>
+);
+
+const SaveChangesDialogTitle = ( { children, onClose }: React.PropsWithChildren & { onClose?: () => void } ) => (
+	<DialogTitle
+		id={ TITLE_ID }
+		display="flex"
+		alignItems="center"
+		gap={ 1 }
+		sx={ { lineHeight: 1, justifyContent: 'space-between' } }
+	>
+		<Stack direction="row" alignItems="center" gap={ 1 }>
+			<AlertTriangleFilledIcon color="secondary" />
+			{ children }
+		</Stack>
+		{ onClose && (
+			<IconButton onClick={ onClose } size="small">
+				<XIcon />
+			</IconButton>
+		) }
+	</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;
+		discard?: Action;
+	};
+};
+
+const SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {
+	const [ isConfirming, setIsConfirming ] = useState( false );
+	const { cancel, confirm, discard } = actions;
+
+	const onConfirm = async () => {
+		setIsConfirming( true );
+		await confirm.action();
+		setIsConfirming( false );
+	};
+	return (
+		<DialogActions>
+			{ cancel && (
+				<Button variant="text" color="secondary" onClick={ cancel.action }>
+					{ cancel.label }
+				</Button>
+			) }
+			{ discard && (
+				<Button variant="text" color="secondary" onClick={ discard.action }>
+					{ discard.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;
+
+export const useDialog = () => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const open = () => setIsOpen( true );
+	const close = () => setIsOpen( false );
+
+	return { isOpen, open, close };
+};

package/src/index.ts

@@ -9,5 +9,7 @@ export { InfoAlert } from './components/info-alert';
 export { WarningInfotip } from './components/warning-infotip';
 export { GlobalDialog, openDialog, closeDialog } from './components/global-dialog';
 export * from './components/popover';
+export * from './components/save-changes-dialog';
+
 // hooks
 export { useEditable } from './hooks/use-editable';