@elementor/editor-ui 3.35.0-439 → 3.35.0-441

package/dist/index.d.mts

@@ -102,12 +102,12 @@ type InfotipCardProps = {
     content: string;
     assetUrl: string;
     ctaUrl: string;
-    setOpen: (open: boolean) => void;
+    onClose: () => void;
 };
 type PromotionInfotipProps = React$1.PropsWithChildren<InfotipCardProps & {
     open?: boolean;
 }>;
-declare const PromotionInfotip: ({ children, open, ...cardProps }: PromotionInfotipProps) => React$1.JSX.Element;
+declare const PromotionInfotip: ({ children, open, onClose, ...cardProps }: PromotionInfotipProps) => React$1.JSX.Element;
 
 type PromotionPopoverCardProps = {
     title: string;
@@ -123,9 +123,7 @@ type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps
 }>;
 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>>;
+declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';

package/dist/index.d.ts

@@ -102,12 +102,12 @@ type InfotipCardProps = {
     content: string;
     assetUrl: string;
     ctaUrl: string;
-    setOpen: (open: boolean) => void;
+    onClose: () => void;
 };
 type PromotionInfotipProps = React$1.PropsWithChildren<InfotipCardProps & {
     open?: boolean;
 }>;
-declare const PromotionInfotip: ({ children, open, ...cardProps }: PromotionInfotipProps) => React$1.JSX.Element;
+declare const PromotionInfotip: ({ children, open, onClose, ...cardProps }: PromotionInfotipProps) => React$1.JSX.Element;
 
 type PromotionPopoverCardProps = {
     title: string;
@@ -123,9 +123,7 @@ type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps
 }>;
 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>>;
+declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';

package/dist/index.js

@@ -447,24 +447,34 @@ var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__
 
 // src/components/promotion-infotip.tsx
 var React13 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_ui13 = require("@elementor/ui");
-var PromotionInfotip = ({ children, open, ...cardProps }) => {
-  return /* @__PURE__ */ React13.createElement(import_ui13.Infotip, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { ...cardProps }), open }, children);
+var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
+  (0, import_react10.useEffect)(() => {
+    const canvasDocument = open ? (0, import_editor_v1_adapters2.getCanvasIframeDocument)() : null;
+    if (!canvasDocument) {
+      return;
+    }
+    canvasDocument.addEventListener("mousedown", onClose);
+    return () => canvasDocument.removeEventListener("mousedown", onClose);
+  }, [open, onClose]);
+  return /* @__PURE__ */ React13.createElement(import_ui13.Infotip, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { onClose, ...cardProps }), open }, children);
 };
-function InfotipCard({ title, content, assetUrl, ctaUrl, setOpen }) {
+function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
   return /* @__PURE__ */ React13.createElement(
     import_ui13.ClickAwayListener,
     {
       disableReactTree: true,
       mouseEvent: "onMouseDown",
       touchEvent: "onTouchStart",
-      onClickAway: () => setOpen(false)
+      onClickAway: onClose
     },
     /* @__PURE__ */ React13.createElement(import_ui13.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
       import_ui13.CardHeader,
       {
         title,
-        action: /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
+        action: /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
       }
     ), /* @__PURE__ */ React13.createElement(import_ui13.CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(import_ui13.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })))
   );
@@ -523,7 +533,6 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
         onClose,
         role: "dialog",
         "aria-label": "promotion-popover-title",
-        onKeyDown: (e) => e.key === "Escape" && onClose(),
         action: /* @__PURE__ */ React14.createElement(
           import_ui14.AlertAction,
           {
@@ -546,29 +555,26 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
 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
-      }
-    );
-  }
-);
+var PromotionChip = React15.forwardRef(({ ...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"
+        }
+      },
+      ...props
+    }
+  );
+});
 
 // src/components/popover/body.tsx
 var React16 = __toESM(require("react"));
@@ -610,18 +616,18 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
 
 // src/components/popover/menu-list.tsx
 var React18 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_ui18 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -633,10 +639,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react11.useState)(0);
-  (0, import_react11.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -675,11 +681,11 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react12.useRef)(null);
+  const containerRef = (0, import_react13.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
   const theme = (0, import_ui18.useTheme)();
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react12.useMemo)(
+  const stickyIndices = (0, import_react13.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -713,7 +719,7 @@ var PopoverMenuList = ({
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     onChangeCallback(virtualizer);
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
@@ -818,7 +824,7 @@ var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) =
 
 // src/components/save-changes-dialog.tsx
 var React19 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
@@ -838,7 +844,7 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.
 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 [isConfirming, setIsConfirming] = (0, import_react14.useState)(false);
   const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
@@ -852,7 +858,7 @@ SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
@@ -880,10 +886,10 @@ ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react14.useState)(false);
-  const [error, setError] = (0, import_react14.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -965,8 +971,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const ref = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }

package/dist/index.mjs

@@ -402,6 +402,8 @@ var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__
 
 // src/components/promotion-infotip.tsx
 import * as React13 from "react";
+import { useEffect as useEffect4 } from "react";
+import { getCanvasIframeDocument } from "@elementor/editor-v1-adapters";
 import {
   Card as Card2,
   CardActions as CardActions2,
@@ -413,23 +415,31 @@ import {
   Infotip as Infotip3,
   Typography as Typography3
 } from "@elementor/ui";
-var PromotionInfotip = ({ children, open, ...cardProps }) => {
-  return /* @__PURE__ */ React13.createElement(Infotip3, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { ...cardProps }), open }, children);
+var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
+  useEffect4(() => {
+    const canvasDocument = open ? getCanvasIframeDocument() : null;
+    if (!canvasDocument) {
+      return;
+    }
+    canvasDocument.addEventListener("mousedown", onClose);
+    return () => canvasDocument.removeEventListener("mousedown", onClose);
+  }, [open, onClose]);
+  return /* @__PURE__ */ React13.createElement(Infotip3, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { onClose, ...cardProps }), open }, children);
 };
-function InfotipCard({ title, content, assetUrl, ctaUrl, setOpen }) {
+function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
   return /* @__PURE__ */ React13.createElement(
     ClickAwayListener,
     {
       disableReactTree: true,
       mouseEvent: "onMouseDown",
       touchEvent: "onTouchStart",
-      onClickAway: () => setOpen(false)
+      onClickAway: onClose
     },
     /* @__PURE__ */ React13.createElement(Card2, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
       CardHeader,
       {
         title,
-        action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
+        action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
       }
     ), /* @__PURE__ */ React13.createElement(CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(CardContent2, null, /* @__PURE__ */ React13.createElement(Typography3, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(CardActions2, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })))
   );
@@ -496,7 +506,6 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
         onClose,
         role: "dialog",
         "aria-label": "promotion-popover-title",
-        onKeyDown: (e) => e.key === "Escape" && onClose(),
         action: /* @__PURE__ */ React14.createElement(
           AlertAction,
           {
@@ -519,29 +528,26 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
 import * as React15 from "react";
 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
-      }
-    );
-  }
-);
+var PromotionChip = React15.forwardRef(({ ...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"
+        }
+      },
+      ...props
+    }
+  );
+});
 
 // src/components/popover/body.tsx
 import * as React16 from "react";
@@ -583,18 +589,18 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
 
 // src/components/popover/menu-list.tsx
 import * as React18 from "react";
-import { useEffect as useEffect6, useMemo, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useMemo, useRef as useRef3 } from "react";
 import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled3, useTheme } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  useEffect4(() => {
+  useEffect5(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -606,10 +612,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState5 } from "react";
 var useScrollTop = ({ containerRef }) => {
   const [scrollTop, setScrollTop] = useState5(0);
-  useEffect5(() => {
+  useEffect6(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -686,7 +692,7 @@ var PopoverMenuList = ({
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
   });
-  useEffect6(() => {
+  useEffect7(() => {
     onChangeCallback(virtualizer);
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
@@ -869,7 +875,7 @@ ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect7, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef4, useState as useState7 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   const [isEditing, setIsEditing] = useState7(false);
   const [error, setError] = useState7(null);
@@ -955,7 +961,7 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
 };
 var useSelection = (isEditing) => {
   const ref = useRef4(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isEditing) {
       selectAll(ref.current);
     }

package/package.json

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

package/src/components/promotion-chip.tsx

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

package/src/components/promotion-infotip.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useEffect } from 'react';
+import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
 import {
 	Card,
 	CardActions,
@@ -18,7 +20,7 @@ type InfotipCardProps = {
 	content: string;
 	assetUrl: string;
 	ctaUrl: string;
-	setOpen: ( open: boolean ) => void;
+	onClose: () => void;
 };
 
 type PromotionInfotipProps = React.PropsWithChildren<
@@ -27,28 +29,38 @@ type PromotionInfotipProps = React.PropsWithChildren<
 	}
 >;
 
-export const PromotionInfotip = ( { children, open, ...cardProps }: PromotionInfotipProps ) => {
+export const PromotionInfotip = ( { children, open, onClose, ...cardProps }: PromotionInfotipProps ) => {
+	useEffect( () => {
+		const canvasDocument = open ? getCanvasIframeDocument() : null;
+
+		if ( ! canvasDocument ) {
+			return;
+		}
+
+		canvasDocument.addEventListener( 'mousedown', onClose );
+
+		return () => canvasDocument.removeEventListener( 'mousedown', onClose );
+	}, [ open, onClose ] );
+
 	return (
-		<Infotip placement="right" content={ <InfotipCard { ...cardProps } /> } open={ open }>
+		<Infotip placement="right" content={ <InfotipCard onClose={ onClose } { ...cardProps } /> } open={ open }>
 			{ children }
 		</Infotip>
 	);
 };
 
-function InfotipCard( { title, content, assetUrl, ctaUrl, setOpen }: InfotipCardProps ) {
+function InfotipCard( { title, content, assetUrl, ctaUrl, onClose }: InfotipCardProps ) {
 	return (
 		<ClickAwayListener
 			disableReactTree={ true }
 			mouseEvent="onMouseDown"
 			touchEvent="onTouchStart"
-			onClickAway={ () => setOpen( false ) }
+			onClickAway={ onClose }
 		>
 			<Card elevation={ 0 } sx={ { maxWidth: 296 } }>
 				<CardHeader
 					title={ title }
-					action={
-						<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ () => setOpen( false ) } />
-					}
+					action={ <CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ onClose } /> }
 				/>
 				<CardMedia component="img" image={ assetUrl } alt="" sx={ { width: '100%', aspectRatio: '16 / 9' } } />
 				<CardContent>

package/src/components/promotion-popover.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { KeyboardEvent } from 'react';
 import { CrownFilledIcon } from '@elementor/icons';
 import {
 	Alert,
@@ -76,7 +75,6 @@ function PopoverAlert( { title, content, ctaUrl, ctaText, onClose }: PromotionPo
 				onClose={ onClose }
 				role="dialog"
 				aria-label="promotion-popover-title"
-				onKeyDown={ ( e: KeyboardEvent ) => e.key === 'Escape' && onClose() }
 				action={
 					<AlertAction
 						variant="contained"