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

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
-import { ReactNode, PropsWithChildren } from 'react';
-import { MenuItemProps, AlertProps, InfotipProps, MenuList } from '@elementor/ui';
+import { ReactNode, PropsWithChildren, ReactElement } from 'react';
+import { MenuItemProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -58,6 +58,14 @@ interface WarningInfotipProps extends PropsWithChildren {
 }
 declare const WarningInfotip: React$1.ForwardRefExoticComponent<WarningInfotipProps & React$1.RefAttributes<unknown>>;
 
+declare const GlobalDialog: () => React$1.JSX.Element | null;
+
+type DialogContent = {
+    component: ReactElement;
+};
+declare const openDialog: ({ component }: DialogContent) => void;
+declare const closeDialog: () => void;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -108,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;
@@ -134,4 +168,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, 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 } from 'react';
-import { MenuItemProps, AlertProps, InfotipProps, MenuList } from '@elementor/ui';
+import { ReactNode, PropsWithChildren, ReactElement } from 'react';
+import { MenuItemProps, AlertProps, InfotipProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 import * as _emotion_styled from '@emotion/styled';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -58,6 +58,14 @@ interface WarningInfotipProps extends PropsWithChildren {
 }
 declare const WarningInfotip: React$1.ForwardRefExoticComponent<WarningInfotipProps & React$1.RefAttributes<unknown>>;
 
+declare const GlobalDialog: () => React$1.JSX.Element | null;
+
+type DialogContent = {
+    component: ReactElement;
+};
+declare const openDialog: ({ component }: DialogContent) => void;
+declare const closeDialog: () => void;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -108,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;
@@ -134,4 +168,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, 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

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
+  GlobalDialog: () => GlobalDialog,
   ITEM_HEIGHT: () => ITEM_HEIGHT,
   InfoAlert: () => InfoAlert,
   InfoTipCard: () => InfoTipCard,
@@ -42,9 +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);
@@ -291,15 +296,55 @@ var WarningInfotip = (0, import_react6.forwardRef)(
   }
 );
 
-// src/components/popover/body.tsx
+// src/components/global-dialog/components/global-dialog.tsx
+var import_react7 = require("react");
 var React9 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
+
+// src/components/global-dialog/subscribers.ts
+var currentDialogState = null;
+var stateSubscribers = /* @__PURE__ */ new Set();
+var subscribeToDialogState = (callback) => {
+  stateSubscribers.add(callback);
+  callback(currentDialogState);
+  return () => stateSubscribers.delete(callback);
+};
+var notifySubscribers = () => {
+  stateSubscribers.forEach((callback) => callback(currentDialogState));
+};
+var openDialog = ({ component }) => {
+  currentDialogState = { component };
+  notifySubscribers();
+};
+var closeDialog = () => {
+  currentDialogState = null;
+  notifySubscribers();
+};
+
+// src/components/global-dialog/components/global-dialog.tsx
+var GlobalDialog = () => {
+  const [content, setContent] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    const unsubscribe = subscribeToDialogState(setContent);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui9.Dialog, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
+};
+
+// src/components/popover/body.tsx
+var React10 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
-  return /* @__PURE__ */ React9.createElement(
-    import_ui9.Box,
+  return /* @__PURE__ */ React10.createElement(
+    import_ui10.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -315,8 +360,8 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
 };
 
 // src/components/popover/header.tsx
-var React10 = __toESM(require("react"));
-var import_ui10 = require("@elementor/ui");
+var React11 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
 var SIZE = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -325,23 +370,23 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React10.createElement(import_ui10.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React11.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React11.createElement(import_ui11.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React11.createElement(import_ui11.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React11.createElement(import_ui11.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React11 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_ui11 = require("@elementor/ui");
+var React12 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_ui12 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -353,10 +398,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -395,10 +440,10 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react9.useRef)(null);
+  const containerRef = (0, import_react10.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react9.useMemo)(
+  const stickyIndices = (0, import_react10.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -430,7 +475,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React11.createElement(import_ui11.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React12.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -448,8 +493,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React11.createElement(
-          import_ui11.MenuSubheader,
+        return /* @__PURE__ */ React12.createElement(
+          import_ui12.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -459,8 +504,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React11.createElement(
-        import_ui11.ListItem,
+      return /* @__PURE__ */ React12.createElement(
+        import_ui12.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -498,7 +543,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui12.styled)(import_ui12.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -529,14 +574,14 @@ var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) =
 }));
 
 // src/components/popover/search.tsx
-var React12 = __toESM(require("react"));
-var import_react10 = require("react");
+var React13 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_icons2 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var PopoverSearch = ({ value, onSearch, placeholder }) => {
-  const inputRef = (0, import_react10.useRef)(null);
+  const inputRef = (0, import_react11.useRef)(null);
   const handleClear = () => {
     onSearch("");
     inputRef.current?.focus();
@@ -544,8 +589,8 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
   const handleInputChange = (event) => {
     onSearch(event.target.value);
   };
-  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React12.createElement(
-    import_ui12.TextField,
+  return /* @__PURE__ */ React13.createElement(import_ui13.Box, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React13.createElement(
+    import_ui13.TextField,
     {
       autoFocus: true,
       fullWidth: true,
@@ -555,18 +600,60 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
       onChange: handleInputChange,
       placeholder,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React12.createElement(import_ui12.InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(import_icons2.SearchIcon, { fontSize: SIZE2 })),
-        endAdornment: value && /* @__PURE__ */ React12.createElement(import_ui12.IconButton, { size: SIZE2, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React12.createElement(import_icons2.XIcon, { color: "action", fontSize: SIZE2 }))
+        startAdornment: /* @__PURE__ */ React13.createElement(import_ui13.InputAdornment, { position: "start" }, /* @__PURE__ */ React13.createElement(import_icons2.SearchIcon, { fontSize: SIZE2 })),
+        endAdornment: value && /* @__PURE__ */ React13.createElement(import_ui13.IconButton, { size: SIZE2, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React13.createElement(import_icons2.XIcon, { color: "action", fontSize: SIZE2 }))
       }
     }
   ));
 };
 
+// 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_react11 = require("react");
+var import_react13 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.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 = () => {
@@ -639,8 +726,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -661,6 +748,7 @@ var selectAll = (el) => {
 0 && (module.exports = {
   EditableField,
   EllipsisWithTooltip,
+  GlobalDialog,
   ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
@@ -671,9 +759,13 @@ var selectAll = (el) => {
   PopoverHeader,
   PopoverMenuList,
   PopoverSearch,
+  SaveChangesDialog,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
+  closeDialog,
+  openDialog,
+  useDialog,
   useEditable
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -254,14 +254,54 @@ var WarningInfotip = forwardRef5(
   }
 );
 
-// src/components/popover/body.tsx
+// src/components/global-dialog/components/global-dialog.tsx
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import * as React9 from "react";
+import { Dialog as Dialog2 } from "@elementor/ui";
+
+// src/components/global-dialog/subscribers.ts
+var currentDialogState = null;
+var stateSubscribers = /* @__PURE__ */ new Set();
+var subscribeToDialogState = (callback) => {
+  stateSubscribers.add(callback);
+  callback(currentDialogState);
+  return () => stateSubscribers.delete(callback);
+};
+var notifySubscribers = () => {
+  stateSubscribers.forEach((callback) => callback(currentDialogState));
+};
+var openDialog = ({ component }) => {
+  currentDialogState = { component };
+  notifySubscribers();
+};
+var closeDialog = () => {
+  currentDialogState = null;
+  notifySubscribers();
+};
+
+// src/components/global-dialog/components/global-dialog.tsx
+var GlobalDialog = () => {
+  const [content, setContent] = useState4(null);
+  useEffect3(() => {
+    const unsubscribe = subscribeToDialogState(setContent);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(Dialog2, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
+};
+
+// src/components/popover/body.tsx
+import * as React10 from "react";
 import { Box as Box4 } from "@elementor/ui";
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Box4,
     {
       display: "flex",
@@ -278,7 +318,7 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
 };
 
 // src/components/popover/header.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { CloseButton, Stack, Typography as Typography3 } from "@elementor/ui";
 var SIZE = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
@@ -288,23 +328,23 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React10.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React10.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React10.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React10.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React11.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React11.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React11.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React11.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { useMemo, useRef } from "react";
 import { Box as Box5, ListItem, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  useEffect3(() => {
+  useEffect4(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -316,10 +356,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = useState4(0);
-  useEffect4(() => {
+  const [scrollTop, setScrollTop] = useState5(0);
+  useEffect5(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -393,7 +433,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React11.createElement(Box5, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(Box5, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React12.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -411,7 +451,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React11.createElement(
+        return /* @__PURE__ */ React12.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -422,7 +462,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -492,7 +532,7 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
 }));
 
 // src/components/popover/search.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { useRef as useRef2 } from "react";
 import { SearchIcon, XIcon } from "@elementor/icons";
 import { Box as Box6, IconButton, InputAdornment, TextField } from "@elementor/ui";
@@ -507,7 +547,7 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
   const handleInputChange = (event) => {
     onSearch(event.target.value);
   };
-  return /* @__PURE__ */ React12.createElement(Box6, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(Box6, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React13.createElement(
     TextField,
     {
       autoFocus: true,
@@ -518,18 +558,69 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
       onChange: handleInputChange,
       placeholder,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: SIZE2 })),
-        endAdornment: value && /* @__PURE__ */ React12.createElement(IconButton, { size: SIZE2, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React12.createElement(XIcon, { color: "action", fontSize: SIZE2 }))
+        startAdornment: /* @__PURE__ */ React13.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React13.createElement(SearchIcon, { fontSize: SIZE2 })),
+        endAdornment: value && /* @__PURE__ */ React13.createElement(IconButton, { size: SIZE2, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React13.createElement(XIcon, { color: "action", fontSize: SIZE2 }))
       }
     }
   ));
 };
 
+// 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 useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState7 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = useState5(false);
-  const [error, setError] = useState5(null);
+  const [isEditing, setIsEditing] = useState7(false);
+  const [error, setError] = useState7(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -603,7 +694,7 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
 };
 var useSelection = (isEditing) => {
   const ref = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -623,6 +714,7 @@ var selectAll = (el) => {
 export {
   EditableField,
   EllipsisWithTooltip,
+  GlobalDialog,
   ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
@@ -633,9 +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-117",
+  "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-117",
+    "@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/global-dialog/__tests__/global-dialog.test.tsx

@@ -0,0 +1,272 @@
+import * as React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { GlobalDialog } from '../components/global-dialog';
+import { closeDialog, type DialogStateCallback, openDialog } from '../subscribers';
+
+// Get mock functions for cleanup
+const mockEventBus = jest.requireMock( '../subscribers' );
+
+jest.mock( '../subscribers', () => {
+	let currentState: { component: React.ReactElement } | null = null;
+	const subscribers = new Set< DialogStateCallback >();
+
+	const notifySubscribers = () => {
+		subscribers.forEach( ( callback ) => callback( currentState ) );
+	};
+
+	return {
+		subscribeToDialogState: jest.fn( ( callback: DialogStateCallback ) => {
+			subscribers.add( callback );
+			// Call callback immediately with current state (matches real implementation)
+			callback( currentState );
+			return () => subscribers.delete( callback );
+		} ),
+		openDialog: jest.fn( ( { component }: { component: React.ReactElement } ) => {
+			currentState = { component };
+			// Notify synchronously (matches real implementation)
+			notifySubscribers();
+		} ),
+		closeDialog: jest.fn( () => {
+			currentState = null;
+			// Notify synchronously (matches real implementation)
+			notifySubscribers();
+		} ),
+		// For manual control in tests
+		__notifySubscribers: notifySubscribers,
+		__getCurrentState: () => currentState,
+		__getSubscribers: () => subscribers,
+		__reset: () => {
+			currentState = null;
+			subscribers.clear();
+		},
+	};
+} );
+
+// Helper function to render GlobalDialog
+const renderGlobalDialog = () => {
+	return render( <GlobalDialog /> );
+};
+
+describe( 'GlobalDialog', () => {
+	// Reset dialog state before each test to avoid test interference
+	beforeEach( () => {
+		mockEventBus.__reset();
+	} );
+
+	afterEach( () => {
+		// Clean up any open dialogs after each test
+		mockEventBus.__reset();
+	} );
+
+	it( 'should not render anything when no dialog is open', () => {
+		// Act
+		renderGlobalDialog();
+
+		// Assert
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render dialog when openDialog is called', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog Content</div>;
+
+		renderGlobalDialog();
+
+		// Act
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		// Assert - Wait for the dialog to appear
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 ); // MUI creates 2 dialog elements
+		} );
+		expect( screen.getByText( 'Test Dialog Content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should close dialog when closeDialog is called', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog Content</div>;
+
+		renderGlobalDialog();
+
+		// Open dialog first
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+
+		// Act
+		act( () => {
+			closeDialog();
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+		} );
+		expect( screen.queryByText( 'Test Dialog Content' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should close dialog when Dialog onClose is triggered', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog Content</div>;
+
+		renderGlobalDialog();
+
+		// Open dialog first
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+		expect( screen.getByText( 'Test Dialog Content' ) ).toBeInTheDocument();
+
+		// Act - Simulate Dialog's onClose being called (like when user clicks close button)
+		act( () => {
+			closeDialog();
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+		} );
+		expect( screen.queryByText( 'Test Dialog Content' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should handle null/undefined dialog content gracefully', () => {
+		// This test ensures the component doesn't crash with invalid content
+		renderGlobalDialog();
+
+		// No dialog should be rendered when content is null
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+	it( 'should replace dialog content when a new dialog is opened', async () => {
+		// Arrange
+		const FirstDialogContent = () => <div>First Dialog</div>;
+		const SecondDialogContent = () => <div>Second Dialog</div>;
+
+		renderGlobalDialog();
+
+		// Open first dialog
+		act( () => {
+			openDialog( { component: <FirstDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getByText( 'First Dialog' ) ).toBeInTheDocument();
+		} );
+
+		// Act - Open second dialog
+		act( () => {
+			openDialog( { component: <SecondDialogContent /> } );
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.queryByText( 'First Dialog' ) ).not.toBeInTheDocument();
+		} );
+		expect( screen.getByText( 'Second Dialog' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should subscribe to dialog state on mount', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Content</div>;
+
+		// Act
+		renderGlobalDialog();
+
+		// The component should be subscribed, so opening a dialog should work
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+	} );
+
+	it( 'should clean up subscription when component unmounts', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog</div>;
+
+		const view = render( <GlobalDialog /> );
+		const unmount = view.unmount;
+
+		// Open dialog to verify subscription is working
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+
+		// Act - Unmount component
+		unmount();
+
+		// Try to open dialog again - should not affect the unmounted component
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		// Assert - No dialog should be rendered since component is unmounted
+		expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+	} );
+	it( 'should work with store dispatch patterns like error dialogs', async () => {
+		// Arrange - Simulate error dialog pattern from editor-global-classes
+		const ErrorDialogContent = ( {
+			modifiedLabels,
+		}: {
+			modifiedLabels: Array< { original: string; modified: string; id: string } >;
+		} ) => (
+			<div>
+				<h3>Duplicate Labels Found</h3>
+				<ul>
+					{ modifiedLabels.map( ( label ) => (
+						<li key={ label.id }>
+							{ label.original } → { label.modified }
+						</li>
+					) ) }
+				</ul>
+				<button onClick={ () => closeDialog() }>Close</button>
+			</div>
+		);
+
+		const mockModifiedLabels = [
+			{ original: 'MyClass', modified: 'DUP_MyClass', id: 'class-1' },
+			{ original: 'Button', modified: 'DUP_Button', id: 'class-2' },
+		];
+
+		renderGlobalDialog();
+
+		// Act - Simulate error dialog opening (like in show-error-dialog.tsx)
+		act( () => {
+			openDialog( {
+				component: <ErrorDialogContent modifiedLabels={ mockModifiedLabels } />,
+			} );
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+		expect( screen.getByText( 'Duplicate Labels Found' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'MyClass → DUP_MyClass' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Button → DUP_Button' ) ).toBeInTheDocument();
+
+		// Test closing
+		fireEvent.click( screen.getByRole( 'button', { name: 'Close' } ) );
+
+		await waitFor( () => {
+			expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+		} );
+	} );
+} );

package/src/components/global-dialog/__tests__/subscribers.test.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { waitFor } from '@testing-library/react';
+
+import { closeDialog, type DialogContent, openDialog, subscribeToDialogState } from '../subscribers';
+
+describe( 'subscribers', () => {
+	// Clean up state after each test
+	afterEach( () => {
+		closeDialog();
+	} );
+
+	it( 'should update state when openDialog is called', async () => {
+		// Arrange
+		const callback = jest.fn();
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+		const dialogContent: DialogContent = { component: testComponent };
+
+		subscribeToDialogState( callback );
+		callback.mockClear(); // Clear the initial call
+
+		// Act
+		openDialog( dialogContent );
+
+		// Assert
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledWith( { component: testComponent } );
+		} );
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	it( 'should reset state to null when closeDialog is called', async () => {
+		// Arrange
+		const callback = jest.fn();
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+
+		subscribeToDialogState( callback );
+		openDialog( { component: testComponent } );
+
+		// Wait for the openDialog to complete
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledWith( { component: testComponent } );
+		} );
+
+		callback.mockClear(); // Clear previous calls
+
+		// Act
+		closeDialog();
+
+		// Assert
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledWith( null );
+		} );
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	it( 'should call callback immediately with current state on subscription', () => {
+		// Arrange
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+		openDialog( { component: testComponent } );
+
+		const callback = jest.fn();
+
+		// Act
+		subscribeToDialogState( callback );
+
+		// Assert
+		expect( callback ).toHaveBeenCalledWith( { component: testComponent } );
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should unsubscribe callback when unsubscribe function is called', () => {
+		// Arrange
+		const callback = jest.fn();
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+
+		const unsubscribe = subscribeToDialogState( callback );
+		callback.mockClear(); // Clear initial call
+
+		// Act
+		unsubscribe();
+		openDialog( { component: testComponent } );
+
+		// Assert
+		expect( callback ).not.toHaveBeenCalled();
+	} );
+} );

package/src/components/global-dialog/components/global-dialog.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import { Dialog } from '@elementor/ui';
+
+import ThemeProvider from '../../theme-provider';
+import { closeDialog, subscribeToDialogState } from '../subscribers';
+import { type DialogContent } from '../subscribers';
+
+export const GlobalDialog = () => {
+	const [ content, setContent ] = useState< DialogContent | null >( null );
+
+	useEffect( () => {
+		const unsubscribe = subscribeToDialogState( setContent );
+		return () => {
+			unsubscribe();
+		};
+	}, [] );
+
+	if ( ! content ) {
+		return null;
+	}
+
+	return (
+		<ThemeProvider>
+			<Dialog role="dialog" open onClose={ closeDialog } maxWidth="sm" fullWidth>
+				{ content.component }
+			</Dialog>
+		</ThemeProvider>
+	);
+};

package/src/components/global-dialog/index.ts

@@ -0,0 +1,2 @@
+export { GlobalDialog } from './components/global-dialog';
+export { openDialog, closeDialog } from './subscribers';

package/src/components/global-dialog/subscribers.ts

@@ -0,0 +1,36 @@
+import { type ReactElement } from 'react';
+
+type DialogState = {
+	component: ReactElement;
+} | null;
+
+export type DialogStateCallback = ( state: DialogState ) => void;
+
+let currentDialogState: DialogState = null;
+
+const stateSubscribers = new Set< DialogStateCallback >();
+
+export const subscribeToDialogState = ( callback: DialogStateCallback ) => {
+	stateSubscribers.add( callback );
+
+	callback( currentDialogState );
+	return () => stateSubscribers.delete( callback );
+};
+
+const notifySubscribers = () => {
+	stateSubscribers.forEach( ( callback ) => callback( currentDialogState ) );
+};
+
+export type DialogContent = {
+	component: ReactElement;
+};
+
+export const openDialog = ( { component }: DialogContent ) => {
+	currentDialogState = { component };
+	notifySubscribers();
+};
+
+export const closeDialog = () => {
+	currentDialogState = null;
+	notifySubscribers();
+};

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

@@ -7,7 +7,9 @@ export { MenuListItem, MenuItemInfotip } from './components/menu-item';
 export { InfoTipCard } from './components/infotip-card';
 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';