@elementor/editor-ui 3.35.0-404 → 3.35.0-405

package/dist/index.d.mts

@@ -93,8 +93,9 @@ declare const Form: ({ children, onSubmit }: Props) => React$1.JSX.Element;
 
 type CtaButtonProps = {
     href: string;
+    showIcon?: boolean;
 } & Omit<ButtonProps, 'href' | 'target' | 'startIcon' | 'color' | 'variant'>;
-declare const CtaButton: ({ href, children, ...props }: CtaButtonProps) => React$1.JSX.Element;
+declare const CtaButton: ({ href, children, showIcon, ...props }: CtaButtonProps) => React$1.JSX.Element;
 
 type InfotipCardProps = {
     title: string;
@@ -108,6 +109,20 @@ type PromotionInfotipProps = React$1.PropsWithChildren<InfotipCardProps & {
 }>;
 declare const PromotionInfotip: ({ children, open, ...cardProps }: PromotionInfotipProps) => React$1.JSX.Element;
 
+type PromotionPopoverCardProps = {
+    title: string;
+    content: string;
+    ctaUrl: string;
+    ctaText?: string;
+    onClose: () => void;
+};
+type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps & {
+    open: boolean;
+    placement?: InfotipProps['placement'];
+    slotProps?: InfotipProps['slotProps'];
+}>;
+declare const PromotionPopover: ({ children, open, placement, slotProps, ...cardProps }: PromotionPopoverProps) => React$1.JSX.Element;
+
 declare const PromotionChip: React$1.ForwardRefExoticComponent<{
     onClick: () => void;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -208,4 +223,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, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+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 };

package/dist/index.d.ts

@@ -93,8 +93,9 @@ declare const Form: ({ children, onSubmit }: Props) => React$1.JSX.Element;
 
 type CtaButtonProps = {
     href: string;
+    showIcon?: boolean;
 } & Omit<ButtonProps, 'href' | 'target' | 'startIcon' | 'color' | 'variant'>;
-declare const CtaButton: ({ href, children, ...props }: CtaButtonProps) => React$1.JSX.Element;
+declare const CtaButton: ({ href, children, showIcon, ...props }: CtaButtonProps) => React$1.JSX.Element;
 
 type InfotipCardProps = {
     title: string;
@@ -108,6 +109,20 @@ type PromotionInfotipProps = React$1.PropsWithChildren<InfotipCardProps & {
 }>;
 declare const PromotionInfotip: ({ children, open, ...cardProps }: PromotionInfotipProps) => React$1.JSX.Element;
 
+type PromotionPopoverCardProps = {
+    title: string;
+    content: string;
+    ctaUrl: string;
+    ctaText?: string;
+    onClose: () => void;
+};
+type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps & {
+    open: boolean;
+    placement?: InfotipProps['placement'];
+    slotProps?: InfotipProps['slotProps'];
+}>;
+declare const PromotionPopover: ({ children, open, placement, slotProps, ...cardProps }: PromotionPopoverProps) => React$1.JSX.Element;
+
 declare const PromotionChip: React$1.ForwardRefExoticComponent<{
     onClick: () => void;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -208,4 +223,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, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+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 };

package/dist/index.js

@@ -47,6 +47,7 @@ __export(index_exports, {
   PopoverMenuList: () => PopoverMenuList,
   PromotionChip: () => PromotionChip,
   PromotionInfotip: () => PromotionInfotip,
+  PromotionPopover: () => PromotionPopover,
   SaveChangesDialog: () => SaveChangesDialog,
   SearchField: () => SearchField,
   StyledMenuList: () => StyledMenuList,
@@ -430,14 +431,14 @@ var React12 = __toESM(require("react"));
 var import_icons4 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
-var CtaButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.createElement(
+var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__ */ React12.createElement(
   import_ui12.Button,
   {
     variant: "contained",
     color: "promotion",
     href,
     target: "_blank",
-    startIcon: /* @__PURE__ */ React12.createElement(import_icons4.CrownFilledIcon, null),
+    startIcon: showIcon ? /* @__PURE__ */ React12.createElement(import_icons4.CrownFilledIcon, null) : void 0,
     ...props
   },
   children ?? (0, import_i18n3.__)("Upgrade Now", "elementor")
@@ -468,39 +469,115 @@ function InfotipCard({ title, content, assetUrl, ctaUrl, setOpen }) {
   );
 }
 
-// src/components/promotion-chip.tsx
+// src/components/promotion-popover.tsx
 var React14 = __toESM(require("react"));
 var import_icons5 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
-var PromotionChip = React14.forwardRef(({ onClick }, ref) => {
+var PromotionPopover = ({
+  children,
+  open,
+  placement = "right",
+  slotProps,
+  ...cardProps
+}) => {
+  const defaultSlotProps = {
+    popper: {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 10]
+          }
+        }
+      ]
+    }
+  };
   return /* @__PURE__ */ React14.createElement(
-    import_ui14.Chip,
+    import_ui14.Infotip,
     {
-      ref,
-      size: "tiny",
-      color: "promotion",
-      variant: "standard",
-      icon: /* @__PURE__ */ React14.createElement(import_icons5.CrownFilledIcon, null),
-      sx: {
-        ml: 1,
-        "& .MuiChip-label": {
-          display: "none"
-        }
+      placement,
+      arrow: false,
+      content: /* @__PURE__ */ React14.createElement(PopoverAlert, { ...cardProps }),
+      open,
+      slotProps: slotProps || defaultSlotProps
+    },
+    children
+  );
+};
+function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
+  return /* @__PURE__ */ React14.createElement(
+    import_ui14.ClickAwayListener,
+    {
+      disableReactTree: true,
+      mouseEvent: "onMouseDown",
+      touchEvent: "onTouchStart",
+      onClickAway: onClose
+    },
+    /* @__PURE__ */ React14.createElement(
+      import_ui14.Alert,
+      {
+        variant: "standard",
+        color: "promotion",
+        icon: /* @__PURE__ */ React14.createElement(import_icons5.CrownFilledIcon, { fontSize: "tiny" }),
+        onClose,
+        role: "dialog",
+        "aria-label": "promotion-popover-title",
+        onKeyDown: (e) => e.key === "Escape" && onClose(),
+        action: /* @__PURE__ */ React14.createElement(
+          import_ui14.AlertAction,
+          {
+            variant: "contained",
+            color: "promotion",
+            href: ctaUrl,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          ctaText
+        ),
+        sx: { maxWidth: 296 }
       },
-      onClick
-    }
+      /* @__PURE__ */ React14.createElement(import_ui14.Box, { sx: { gap: 0.5, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React14.createElement(import_ui14.AlertTitle, null, title), /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "body2" }, content))
+    )
   );
-});
+}
 
-// src/components/popover/body.tsx
+// src/components/promotion-chip.tsx
 var React15 = __toESM(require("react"));
+var import_icons6 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
+var PromotionChip = React15.forwardRef(
+  ({ onClick, ...props }, ref) => {
+    return /* @__PURE__ */ React15.createElement(
+      import_ui15.Chip,
+      {
+        ref,
+        size: "tiny",
+        color: "promotion",
+        variant: "standard",
+        icon: /* @__PURE__ */ React15.createElement(import_icons6.CrownFilledIcon, null),
+        sx: {
+          ml: 1,
+          width: "20px",
+          "& .MuiChip-label": {
+            display: "none"
+          }
+        },
+        onClick,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/popover/body.tsx
+var React16 = __toESM(require("react"));
+var import_ui16 = 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, id }) => {
-  return /* @__PURE__ */ React15.createElement(
-    import_ui15.Box,
+  return /* @__PURE__ */ React16.createElement(
+    import_ui16.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -517,8 +594,8 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-var React16 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
+var React17 = __toESM(require("react"));
+var import_ui17 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -527,13 +604,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React16.createElement(import_ui16.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React16.createElement(import_ui16.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React16.createElement(import_ui16.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React16.createElement(import_ui16.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React17.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React17.createElement(import_ui17.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React17.createElement(import_ui17.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_react12 = require("react");
-var import_ui17 = require("@elementor/ui");
+var import_ui18 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
@@ -632,7 +709,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React17.createElement(import_ui17.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(import_ui18.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React18.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -650,8 +727,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React17.createElement(
-          import_ui17.MenuSubheader,
+        return /* @__PURE__ */ React18.createElement(
+          import_ui18.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -661,8 +738,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React17.createElement(
-        import_ui17.ListItem,
+      return /* @__PURE__ */ React18.createElement(
+        import_ui18.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -700,7 +777,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui17.styled)(import_ui17.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -731,14 +808,14 @@ var StyledMenuList = (0, import_ui17.styled)(import_ui17.MenuList)(({ theme }) =
 }));
 
 // src/components/save-changes-dialog.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_react13 = require("react");
-var import_icons6 = require("@elementor/icons");
-var import_ui18 = require("@elementor/ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui19 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React18.createElement(import_ui18.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React18.createElement(
-  import_ui18.DialogTitle,
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(import_ui19.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(
+  import_ui19.DialogTitle,
   {
     id: TITLE_ID,
     display: "flex",
@@ -746,11 +823,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React18.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React18.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React18.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React18.createElement(import_ui18.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React18.createElement(import_icons6.XIcon, null))
+  /* @__PURE__ */ React19.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React19.createElement(import_ui19.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React19.createElement(import_icons7.XIcon, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React18.createElement(import_ui18.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React18.createElement(import_ui18.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React19.createElement(import_ui19.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React19.createElement(import_ui19.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = (0, import_react13.useState)(false);
   const { cancel, confirm, discard } = actions;
@@ -759,7 +836,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React18.createElement(import_ui18.DialogActions, null, cancel && /* @__PURE__ */ React18.createElement(import_ui18.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React18.createElement(import_ui18.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React18.createElement(import_ui18.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React19.createElement(import_ui19.DialogActions, null, cancel && /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -895,6 +972,7 @@ var selectAll = (el) => {
   PopoverMenuList,
   PromotionChip,
   PromotionInfotip,
+  PromotionPopover,
   SaveChangesDialog,
   SearchField,
   StyledMenuList,

package/dist/index.mjs

@@ -387,14 +387,14 @@ import * as React12 from "react";
 import { CrownFilledIcon } from "@elementor/icons";
 import { Button as Button3 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
-var CtaButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.createElement(
+var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__ */ React12.createElement(
   Button3,
   {
     variant: "contained",
     color: "promotion",
     href,
     target: "_blank",
-    startIcon: /* @__PURE__ */ React12.createElement(CrownFilledIcon, null),
+    startIcon: showIcon ? /* @__PURE__ */ React12.createElement(CrownFilledIcon, null) : void 0,
     ...props
   },
   children ?? __3("Upgrade Now", "elementor")
@@ -435,39 +435,123 @@ function InfotipCard({ title, content, assetUrl, ctaUrl, setOpen }) {
   );
 }
 
-// src/components/promotion-chip.tsx
+// src/components/promotion-popover.tsx
 import * as React14 from "react";
 import { CrownFilledIcon as CrownFilledIcon2 } from "@elementor/icons";
-import { Chip } from "@elementor/ui";
-var PromotionChip = React14.forwardRef(({ onClick }, ref) => {
+import {
+  Alert as Alert3,
+  AlertAction,
+  AlertTitle as AlertTitle2,
+  Box as Box5,
+  ClickAwayListener as ClickAwayListener2,
+  Infotip as Infotip4,
+  Typography as Typography4
+} from "@elementor/ui";
+var PromotionPopover = ({
+  children,
+  open,
+  placement = "right",
+  slotProps,
+  ...cardProps
+}) => {
+  const defaultSlotProps = {
+    popper: {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 10]
+          }
+        }
+      ]
+    }
+  };
   return /* @__PURE__ */ React14.createElement(
-    Chip,
+    Infotip4,
     {
-      ref,
-      size: "tiny",
-      color: "promotion",
-      variant: "standard",
-      icon: /* @__PURE__ */ React14.createElement(CrownFilledIcon2, null),
-      sx: {
-        ml: 1,
-        "& .MuiChip-label": {
-          display: "none"
-        }
+      placement,
+      arrow: false,
+      content: /* @__PURE__ */ React14.createElement(PopoverAlert, { ...cardProps }),
+      open,
+      slotProps: slotProps || defaultSlotProps
+    },
+    children
+  );
+};
+function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
+  return /* @__PURE__ */ React14.createElement(
+    ClickAwayListener2,
+    {
+      disableReactTree: true,
+      mouseEvent: "onMouseDown",
+      touchEvent: "onTouchStart",
+      onClickAway: onClose
+    },
+    /* @__PURE__ */ React14.createElement(
+      Alert3,
+      {
+        variant: "standard",
+        color: "promotion",
+        icon: /* @__PURE__ */ React14.createElement(CrownFilledIcon2, { fontSize: "tiny" }),
+        onClose,
+        role: "dialog",
+        "aria-label": "promotion-popover-title",
+        onKeyDown: (e) => e.key === "Escape" && onClose(),
+        action: /* @__PURE__ */ React14.createElement(
+          AlertAction,
+          {
+            variant: "contained",
+            color: "promotion",
+            href: ctaUrl,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
+          ctaText
+        ),
+        sx: { maxWidth: 296 }
       },
-      onClick
-    }
+      /* @__PURE__ */ React14.createElement(Box5, { sx: { gap: 0.5, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React14.createElement(AlertTitle2, null, title), /* @__PURE__ */ React14.createElement(Typography4, { variant: "body2" }, content))
+    )
   );
-});
+}
 
-// src/components/popover/body.tsx
+// src/components/promotion-chip.tsx
 import * as React15 from "react";
-import { Box as Box5 } from "@elementor/ui";
+import { CrownFilledIcon as CrownFilledIcon3 } from "@elementor/icons";
+import { Chip } from "@elementor/ui";
+var PromotionChip = React15.forwardRef(
+  ({ onClick, ...props }, ref) => {
+    return /* @__PURE__ */ React15.createElement(
+      Chip,
+      {
+        ref,
+        size: "tiny",
+        color: "promotion",
+        variant: "standard",
+        icon: /* @__PURE__ */ React15.createElement(CrownFilledIcon3, null),
+        sx: {
+          ml: 1,
+          width: "20px",
+          "& .MuiChip-label": {
+            display: "none"
+          }
+        },
+        onClick,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/popover/body.tsx
+import * as React16 from "react";
+import { Box as Box6 } 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, id }) => {
-  return /* @__PURE__ */ React15.createElement(
-    Box5,
+  return /* @__PURE__ */ React16.createElement(
+    Box6,
     {
       display: "flex",
       flexDirection: "column",
@@ -484,8 +568,8 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-import * as React16 from "react";
-import { CloseButton as CloseButton2, Stack, Typography as Typography4 } from "@elementor/ui";
+import * as React17 from "react";
+import { CloseButton as CloseButton2, Stack, Typography as Typography5 } from "@elementor/ui";
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -494,13 +578,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React16.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React16.createElement(Typography4, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React16.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React16.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React17.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React17.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React17.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React17.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { useMemo, useRef as useRef3 } from "react";
-import { Box as Box6, ListItem, MenuList, MenuSubheader, styled as styled3 } from "@elementor/ui";
+import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled3 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
@@ -599,7 +683,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React17.createElement(Box6, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React18.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -617,7 +701,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React17.createElement(
+        return /* @__PURE__ */ React18.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -628,7 +712,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -698,7 +782,7 @@ var StyledMenuList = styled3(MenuList)(({ theme }) => ({
 }));
 
 // src/components/save-changes-dialog.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { useState as useState6 } from "react";
 import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -712,8 +796,8 @@ import {
   Stack as Stack2
 } from "@elementor/ui";
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React18.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React18.createElement(
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(
   DialogTitle2,
   {
     id: TITLE_ID,
@@ -722,11 +806,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React18.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React18.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React18.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React18.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React18.createElement(XIcon2, null))
+  /* @__PURE__ */ React19.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React19.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React19.createElement(XIcon2, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React18.createElement(DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React18.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React19.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React19.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState6(false);
   const { cancel, confirm, discard } = actions;
@@ -735,7 +819,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React18.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React18.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React18.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React18.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React19.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React19.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React19.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React19.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -870,6 +954,7 @@ export {
   PopoverMenuList,
   PromotionChip,
   PromotionInfotip,
+  PromotionPopover,
   SaveChangesDialog,
   SearchField,
   StyledMenuList,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "3.35.0-404",
+  "version": "3.35.0-405",
   "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-404",
+    "@elementor/editor-v1-adapters": "3.35.0-405",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/cta-button.tsx

@@ -5,15 +5,16 @@ import { __ } from '@wordpress/i18n';
 
 type CtaButtonProps = {
 	href: string;
+	showIcon?: boolean;
 } & Omit< ButtonProps, 'href' | 'target' | 'startIcon' | 'color' | 'variant' >;
 
-export const CtaButton = ( { href, children, ...props }: CtaButtonProps ) => (
+export const CtaButton = ( { href, children, showIcon = true, ...props }: CtaButtonProps ) => (
 	<Button
 		variant="contained"
 		color="promotion"
 		href={ href }
 		target="_blank"
-		startIcon={ <CrownFilledIcon /> }
+		startIcon={ showIcon ? <CrownFilledIcon /> : undefined }
 		{ ...props }
 	>
 		{ children ?? __( 'Upgrade Now', 'elementor' ) }

package/src/components/promotion-chip.tsx

@@ -2,21 +2,25 @@ import * as React from 'react';
 import { CrownFilledIcon } from '@elementor/icons';
 import { Chip } from '@elementor/ui';
 
-export const PromotionChip = React.forwardRef< HTMLDivElement, { onClick: () => void } >( ( { onClick }, ref ) => {
-	return (
-		<Chip
-			ref={ ref }
-			size="tiny"
-			color="promotion"
-			variant="standard"
-			icon={ <CrownFilledIcon /> }
-			sx={ {
-				ml: 1,
-				'& .MuiChip-label': {
-					display: 'none',
-				},
-			} }
-			onClick={ onClick }
-		/>
-	);
-} );
+export const PromotionChip = React.forwardRef< HTMLDivElement, { onClick: () => void } >(
+	( { onClick, ...props }, ref ) => {
+		return (
+			<Chip
+				ref={ ref }
+				size="tiny"
+				color="promotion"
+				variant="standard"
+				icon={ <CrownFilledIcon /> }
+				sx={ {
+					ml: 1,
+					width: '20px',
+					'& .MuiChip-label': {
+						display: 'none',
+					},
+				} }
+				onClick={ onClick }
+				{ ...props }
+			/>
+		);
+	}
+);

package/src/components/promotion-popover.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { KeyboardEvent } from 'react';
+import { CrownFilledIcon } from '@elementor/icons';
+import {
+	Alert,
+	AlertAction,
+	AlertTitle,
+	Box,
+	ClickAwayListener,
+	Infotip,
+	type InfotipProps,
+	Typography,
+} from '@elementor/ui';
+
+type PromotionPopoverCardProps = {
+	title: string;
+	content: string;
+	ctaUrl: string;
+	ctaText?: string;
+	onClose: () => void;
+};
+
+type PromotionPopoverProps = React.PropsWithChildren<
+	PromotionPopoverCardProps & {
+		open: boolean;
+		placement?: InfotipProps[ 'placement' ];
+		slotProps?: InfotipProps[ 'slotProps' ];
+	}
+>;
+
+export const PromotionPopover = ( {
+	children,
+	open,
+	placement = 'right',
+	slotProps,
+	...cardProps
+}: PromotionPopoverProps ) => {
+	const defaultSlotProps: InfotipProps[ 'slotProps' ] = {
+		popper: {
+			modifiers: [
+				{
+					name: 'offset',
+					options: {
+						offset: [ 0, 10 ],
+					},
+				},
+			],
+		},
+	};
+
+	return (
+		<Infotip
+			placement={ placement }
+			arrow={ false }
+			content={ <PopoverAlert { ...cardProps } /> }
+			open={ open }
+			slotProps={ slotProps || defaultSlotProps }
+		>
+			{ children }
+		</Infotip>
+	);
+};
+
+function PopoverAlert( { title, content, ctaUrl, ctaText, onClose }: PromotionPopoverCardProps ) {
+	return (
+		<ClickAwayListener
+			disableReactTree={ true }
+			mouseEvent="onMouseDown"
+			touchEvent="onTouchStart"
+			onClickAway={ onClose }
+		>
+			<Alert
+				variant="standard"
+				color="promotion"
+				icon={ <CrownFilledIcon fontSize="tiny" /> }
+				onClose={ onClose }
+				role="dialog"
+				aria-label="promotion-popover-title"
+				onKeyDown={ ( e: KeyboardEvent ) => e.key === 'Escape' && onClose() }
+				action={
+					<AlertAction
+						variant="contained"
+						color="promotion"
+						href={ ctaUrl }
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						{ ctaText }
+					</AlertAction>
+				}
+				sx={ { maxWidth: 296 } }
+			>
+				<Box sx={ { gap: 0.5, display: 'flex', flexDirection: 'column' } }>
+					<AlertTitle>{ title }</AlertTitle>
+					<Typography variant="body2">{ content }</Typography>
+				</Box>
+			</Alert>
+		</ClickAwayListener>
+	);
+}

package/src/index.ts

@@ -13,6 +13,7 @@ export { SearchField } from './components/search-field';
 export { Form } from './components/form';
 export { CtaButton } from './components/cta-button';
 export { PromotionInfotip } from './components/promotion-infotip';
+export { PromotionPopover } from './components/promotion-popover';
 export { PromotionChip } from './components/promotion-chip';
 
 export * from './components/popover';