@elementor/editor-ui 0.12.0 → 0.14.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-ui@0.12.0 build
+> @elementor/editor-ui@0.14.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-CJS dist/index.js     21.64 KB
-CJS dist/index.js.map 37.24 KB
-CJS ⚡️ Build success in 259ms
-ESM dist/index.mjs     18.99 KB
-ESM dist/index.mjs.map 36.83 KB
-ESM ⚡️ Build success in 276ms
+CJS dist/index.js     23.49 KB
+CJS dist/index.js.map 40.38 KB
+CJS ⚡️ Build success in 112ms
+ESM dist/index.mjs     20.74 KB
+ESM dist/index.mjs.map 39.98 KB
+ESM ⚡️ Build success in 121ms
 DTS Build start
-DTS ⚡️ Build success in 21292ms
-DTS dist/index.d.mts 5.11 KB
-DTS dist/index.d.ts  5.11 KB
+DTS ⚡️ Build success in 17533ms
+DTS dist/index.d.mts 5.18 KB
+DTS dist/index.d.ts  5.18 KB

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @elementor/editor-ui
 
+## 0.14.0
+
+### Minor Changes
+
+- 1a37b1c: Update the Elementor UI version.
+- 12333b0: Update `@elementor/icons` package.
+
+## 0.13.0
+
+### Minor Changes
+
+- c91168a: Update the virtualization of the sticky menu list items in the popover.
+- bfe6b0b: Update the width settings for the popover selection list.
+- d85ca8c: Update the popover styling for version 3.30.
+
+### Patch Changes
+
+- @elementor/editor-v1-adapters@0.12.1
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -88,13 +88,15 @@ type PopoverMenuListProps<T, V extends string> = {
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;
 };
+declare const ITEM_HEIGHT = 32;
 declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
 declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;
 
 declare const PopoverScrollableContent: React$1.ForwardRefExoticComponent<{
-    height?: number;
+    height?: number | "auto";
+    width?: number;
 } & {
     children?: React$1.ReactNode | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -132,4 +134,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };
+export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };

package/dist/index.d.ts

@@ -88,13 +88,15 @@ type PopoverMenuListProps<T, V extends string> = {
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;
 };
+declare const ITEM_HEIGHT = 32;
 declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
 declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;
 
 declare const PopoverScrollableContent: React$1.ForwardRefExoticComponent<{
-    height?: number;
+    height?: number | "auto";
+    width?: number;
 } & {
     children?: React$1.ReactNode | undefined;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -132,4 +134,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { EditableField, EllipsisWithTooltip, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };
+export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
+  ITEM_HEIGHT: () => ITEM_HEIGHT,
   InfoAlert: () => InfoAlert,
   InfoTipCard: () => InfoTipCard,
   IntroductionModal: () => IntroductionModal,
@@ -282,14 +283,39 @@ var WarningInfotip = (0, import_react6.forwardRef)(
 
 // src/components/popover/header.tsx
 var React9 = __toESM(require("react"));
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_ui9 = require("@elementor/ui");
 var SIZE = "tiny";
-var PopoverHeader = ({ title, onClose, icon, actions }) => /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(import_ui9.Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(import_ui9.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+var isVersion330Active = (0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30");
+var PopoverHeader = ({ title, onClose, icon, actions }) => {
+  const paddingAndSizing = isVersion330Active ? {
+    pl: 2,
+    pr: 1,
+    py: 1.5,
+    maxHeight: 36
+  } : {
+    pl: 1.5,
+    pr: 0.5,
+    py: 1.5
+  };
+  return /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(
+    import_ui9.Typography,
+    {
+      variant: "subtitle2",
+      sx: isVersion330Active ? {
+        fontSize: "12px",
+        mt: 0.25
+      } : void 0
+    },
+    title
+  ), /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(import_ui9.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+};
 
 // src/components/popover/menu-list.tsx
-var React11 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react9 = require("react");
-var import_ui11 = require("@elementor/ui");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_ui10 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
@@ -328,16 +354,8 @@ var useScrollTop = ({ containerRef }) => {
   return scrollTop;
 };
 
-// src/components/popover/scrollable-content.tsx
-var React10 = __toESM(require("react"));
-var import_ui10 = require("@elementor/ui");
-var PopoverScrollableContent = React10.forwardRef(
-  ({ children, height = 260 }, ref) => {
-    return /* @__PURE__ */ React10.createElement(import_ui10.Box, { ref, sx: { overflowY: "auto", height, width: 220 } }, children);
-  }
-);
-
 // src/components/popover/menu-list.tsx
+var isVersion330Active2 = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
 var MENU_LIST_PADDING_TOP = 8;
@@ -345,6 +363,11 @@ var menuSubHeaderAbsoluteStyling = (start) => ({
   position: "absolute",
   transform: `translateY(${start + MENU_LIST_PADDING_TOP}px)`
 });
+var getAdjacentStickyIndices = (stickyIndices, range) => {
+  const previousTwoStickyIndices = stickyIndices.filter((stickyIndex) => stickyIndex < range.startIndex).slice(-2);
+  const nextTwoStickyIndices = stickyIndices.filter((stickyIndex) => stickyIndex > range.endIndex).slice(0, 2);
+  return [...previousTwoStickyIndices, ...nextTwoStickyIndices];
+};
 var PopoverMenuList = ({
   items,
   onSelect,
@@ -374,7 +397,8 @@ var PopoverMenuList = ({
     for (let i = range.startIndex; i <= range.endIndex; i++) {
       visibleAndStickyIndexes.push(i);
     }
-    stickyIndices.forEach((stickyIndex) => {
+    const stickyIndicesToShow = getAdjacentStickyIndices(stickyIndices, range);
+    stickyIndicesToShow.forEach((stickyIndex) => {
       if (!visibleAndStickyIndexes.includes(stickyIndex)) {
         visibleAndStickyIndexes.push(stickyIndex);
       }
@@ -390,7 +414,7 @@ var PopoverMenuList = ({
     onChange
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
-  return /* @__PURE__ */ React11.createElement(PopoverScrollableContent, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(import_ui10.Box, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React10.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -408,16 +432,17 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React11.createElement(
-          import_ui11.MenuSubheader,
+        return /* @__PURE__ */ React10.createElement(
+          import_ui10.MenuSubheader,
           {
             key: virtualRow.key,
-            style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start)
+            style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
+            sx: isVersion330Active2 ? { fontWeight: "400", color: "text.tertiary" } : void 0
           },
           item.label || item.value
         );
       }
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React10.createElement(
         "li",
         {
           key: virtualRow.key,
@@ -455,7 +480,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui10.styled)(import_ui10.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -482,12 +507,39 @@ var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) =
   position: "relative"
 }));
 
+// src/components/popover/scrollable-content.tsx
+var React11 = __toESM(require("react"));
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_ui11 = require("@elementor/ui");
+var SECTION_PADDING_INLINE = 32;
+var DEFAULT_POPOVER_WIDTH = 220;
+var isVersion330Active3 = (0, import_editor_v1_adapters4.isExperimentActive)("e_v_3_30");
+var PopoverScrollableContent = React11.forwardRef(
+  ({ children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref) => {
+    return /* @__PURE__ */ React11.createElement(
+      import_ui11.Box,
+      {
+        ref,
+        sx: {
+          overflowY: "auto",
+          height,
+          width: `${isVersion330Active3 ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH}px`,
+          maxWidth: 496
+        }
+      },
+      children
+    );
+  }
+);
+
 // src/components/popover/search.tsx
 var React12 = __toESM(require("react"));
 var import_react10 = require("react");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_icons2 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
+var isVersion330Active4 = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
 var SIZE2 = "tiny";
 var PopoverSearch = ({ value, onSearch, placeholder }) => {
   const inputRef = (0, import_react10.useRef)(null);
@@ -498,7 +550,14 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
   const handleInputChange = (event) => {
     onSearch(event.target.value);
   };
-  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React12.createElement(
+  const padding = isVersion330Active4 ? {
+    px: 2,
+    pb: 1.5
+  } : {
+    px: 1.5,
+    pb: 1
+  };
+  return /* @__PURE__ */ React12.createElement(import_ui12.Box, { ...padding }, /* @__PURE__ */ React12.createElement(
     import_ui12.TextField,
     {
       autoFocus: true,
@@ -615,6 +674,7 @@ var selectAll = (el) => {
 0 && (module.exports = {
   EditableField,
   EllipsisWithTooltip,
+  ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
   IntroductionModal,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/info-alert.tsx","../src/components/infotip-card.tsx","../src/components/warning-infotip.tsx","../src/components/popover/header.tsx","../src/components/popover/menu-list.tsx","../src/hooks/use-scroll-to-selected.ts","../src/hooks/use-scroll-top.ts","../src/components/popover/scrollable-content.tsx","../src/components/popover/search.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { default as ThemeProvider } from './components/theme-provider';\nexport { MenuListItem, MenuItemInfotip } from './components/menu-item';\nexport { InfoTipCard } from './components/infotip-card';\nexport { InfoAlert } from './components/info-alert';\nexport { WarningInfotip } from './components/warning-infotip';\nexport * from './components/popover';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nimport { InfoAlert } from './info-alert';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\ntype MenuItemInfotipProps = React.PropsWithChildren< {\n\tshowInfoTip?: boolean;\n\tchildren: React.ReactNode;\n\tcontent: string;\n} >;\n\nexport const MenuItemInfotip = forwardRef(\n\t( { showInfoTip = false, children, content }: MenuItemInfotipProps, ref: unknown ) => {\n\t\tif ( ! showInfoTip ) {\n\t\t\treturn <>{ children }</>;\n\t\t}\n\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\tplacement={ 'right' }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={ <InfoAlert sx={ { maxWidth: 325 } }>{ content }</InfoAlert> }\n\t\t\t>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div style={ { pointerEvents: 'initial', width: '100%' } } onClick={ ( e ) => e.stopPropagation() }>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { InfoCircleFilledIcon } from '@elementor/icons';\nimport { Alert, type AlertProps } from '@elementor/ui';\n\nexport const InfoAlert = ( props: AlertProps ) => (\n\t<Alert\n\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\tvariant={ 'standard' }\n\t\tcolor=\"secondary\"\n\t\televation={ 0 }\n\t\tsize=\"small\"\n\t\t{ ...props }\n\t/>\n);\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { forwardRef, type PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport { Alert, AlertTitle, Infotip, type InfotipProps } from '@elementor/ui';\n\ninterface WarningInfotipProps extends PropsWithChildren {\n\topen: boolean;\n\ttitle?: string;\n\ttext: string;\n\tplacement: InfotipProps[ 'placement' ];\n\twidth?: string | number;\n\toffset?: number[];\n}\n\nexport const WarningInfotip = forwardRef(\n\t( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\topen={ open }\n\t\t\t\tplacement={ placement }\n\t\t\t\tPopperProps={ {\n\t\t\t\t\tsx: {\n\t\t\t\t\t\twidth: width ? width : 'initial',\n\t\t\t\t\t\t'.MuiTooltip-tooltip': { marginLeft: 0, marginRight: 0 },\n\t\t\t\t\t},\n\t\t\t\t\tmodifiers: offset ? [ { name: 'offset', options: { offset } } ] : [],\n\t\t\t\t} }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={\n\t\t\t\t\t<Alert color=\"error\" severity=\"warning\" variant=\"standard\" size=\"small\">\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Alert>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { CloseButton, Stack, Typography } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype PopoverHeaderProps = {\n\ttitle: string;\n\tonClose: () => void;\n\ticon?: React.ReactNode;\n\tactions?: React.ReactNode[];\n};\n\nexport const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => (\n\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 } sx={ { columnGap: 0.5 } }>\n\t\t{ icon }\n\n\t\t<Typography variant=\"subtitle2\">{ title }</Typography>\n\n\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t{ actions }\n\n\t\t\t<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />\n\t\t</Stack>\n\t</Stack>\n);\n","import * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { MenuList, MenuSubheader, styled } from '@elementor/ui';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { useScrollTop, useScrollToSelected } from '../../hooks';\nimport { PopoverScrollableContent } from './scrollable-content';\n\nexport type VirtualizedItem< T, V extends string > = {\n\ttype: T;\n\tvalue: V;\n\tlabel?: string;\n\ticon?: React.ReactNode;\n\tsecondaryText?: string;\n\t[ key: string ]: unknown;\n};\n\nexport type PopoverMenuListProps< T, V extends string > = {\n\titems: VirtualizedItem< T, V >[];\n\tonSelect: ( value: V ) => void;\n\tonClose: () => void;\n\tselectedValue?: V;\n\titemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;\n\t'data-testid'?: string;\n\tonChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;\n\tmenuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;\n\tmenuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;\n\tnoResultsComponent?: React.ReactNode;\n};\n\nconst ITEM_HEIGHT = 32;\nconst LIST_ITEMS_BUFFER = 6;\nconst MENU_LIST_PADDING_TOP = 8;\n\nconst menuSubHeaderAbsoluteStyling = ( start: number ) => ( {\n\tposition: 'absolute',\n\ttransform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,\n} );\n\nexport const PopoverMenuList = < T, V extends string >( {\n\titems,\n\tonSelect,\n\tonClose,\n\tselectedValue,\n\titemStyle,\n\tonChange,\n\t'data-testid': dataTestId,\n\tmenuItemContentTemplate,\n\tnoResultsComponent,\n\tmenuListTemplate: CustomMenuList,\n}: PopoverMenuListProps< T, V > ) => {\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst scrollTop = useScrollTop( { containerRef } );\n\n\tconst MenuListComponent = CustomMenuList || StyledMenuList;\n\n\tconst stickyIndices = useMemo(\n\t\t() =>\n\t\t\titems.reduce( ( categoryIndices, item, index ) => {\n\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\tcategoryIndices.push( index );\n\t\t\t\t}\n\t\t\t\treturn categoryIndices;\n\t\t\t}, [] as number[] ),\n\t\t[ items ]\n\t);\n\n\tconst getActiveItemIndices = ( range: { startIndex: number; endIndex: number } ) => {\n\t\tconst visibleAndStickyIndexes: number[] = [];\n\n\t\tfor ( let i = range.startIndex; i <= range.endIndex; i++ ) {\n\t\t\tvisibleAndStickyIndexes.push( i );\n\t\t}\n\n\t\tstickyIndices.forEach( ( stickyIndex ) => {\n\t\t\tif ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {\n\t\t\t\tvisibleAndStickyIndexes.push( stickyIndex );\n\t\t\t}\n\t\t} );\n\n\t\treturn visibleAndStickyIndexes.sort( ( a, b ) => a - b );\n\t};\n\n\tconst virtualizer = useVirtualizer( {\n\t\tcount: items.length,\n\t\tgetScrollElement: () => containerRef.current,\n\t\testimateSize: () => ITEM_HEIGHT,\n\t\toverscan: LIST_ITEMS_BUFFER,\n\t\trangeExtractor: getActiveItemIndices,\n\t\tonChange,\n\t} );\n\n\tuseScrollToSelected( { selectedValue, items, virtualizer } );\n\n\treturn (\n\t\t<PopoverScrollableContent ref={ containerRef }>\n\t\t\t{ items.length === 0 && noResultsComponent ? (\n\t\t\t\tnoResultsComponent\n\t\t\t) : (\n\t\t\t\t<MenuListComponent\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tstyle={ { height: `${ virtualizer.getTotalSize() }px` } }\n\t\t\t\t\tdata-testid={ dataTestId }\n\t\t\t\t>\n\t\t\t\t\t{ virtualizer.getVirtualItems().map( ( virtualRow ) => {\n\t\t\t\t\t\tconst item = items[ virtualRow.index ];\n\t\t\t\t\t\tconst isLast = virtualRow.index === items.length - 1;\n\t\t\t\t\t\tconst isFirst =\n\t\t\t\t\t\t\titems[ 0 ]?.type === 'category' ? virtualRow.index === 1 : virtualRow.index === 0;\n\t\t\t\t\t\tconst isSelected = selectedValue === item.value;\n\t\t\t\t\t\tconst tabIndexFallback = ! selectedValue ? 0 : -1;\n\n\t\t\t\t\t\tif ( ! item ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\t\t\tconst shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuSubheader\n\t\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\t\tstyle={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label || item.value }\n\t\t\t\t\t\t\t\t</MenuSubheader>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\t\t\t\t\tif ( ( e.target as HTMLElement ).closest( 'button' ) ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' && isLast ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' && isFirst ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttabIndex={ isSelected ? 0 : tabIndexFallback }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,\n\t\t\t\t\t\t\t\t\t...( itemStyle ? itemStyle( item ) : {} ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</MenuListComponent>\n\t\t\t) }\n\t\t</PopoverScrollableContent>\n\t);\n};\n\nexport const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: ITEM_HEIGHT,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.75, 2, 0.75, 4 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import { useEffect } from 'react';\nimport type { Virtualizer } from '@tanstack/react-virtual';\n\nimport type { VirtualizedItem } from '../components/popover/menu-list';\n\ntype UseScrollToSelectedProps< T, V extends string > = {\n\tselectedValue?: V;\n\titems: VirtualizedItem< T, V >[];\n\tvirtualizer: Virtualizer< HTMLDivElement, Element >;\n};\n\nexport const useScrollToSelected = < T, V extends string >( {\n\tselectedValue,\n\titems,\n\tvirtualizer,\n}: UseScrollToSelectedProps< T, V > ) => {\n\tuseEffect( () => {\n\t\tif ( ! selectedValue || items.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );\n\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tvirtualizer.scrollToIndex( selectedIndex, { align: 'center' } );\n\t\t}\n\t}, [ selectedValue, items, virtualizer ] );\n};\n","import { useEffect, useState } from 'react';\n\ntype UseScrollTopProps = {\n\tcontainerRef: React.RefObject< HTMLDivElement >;\n};\n\nexport const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {\n\tconst [ scrollTop, setScrollTop ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\tif ( ! container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = () => {\n\t\t\tsetScrollTop( container.scrollTop );\n\t\t};\n\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\t\treturn () => container.removeEventListener( 'scroll', handleScroll );\n\t}, [ containerRef ] );\n\n\treturn scrollTop;\n};\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\nimport { Box } from '@elementor/ui';\n\ntype PopoverScrollableContentProps = PropsWithChildren< {\n\theight?: number;\n} >;\n\nexport const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(\n\t( { children, height = 260 }, ref ) => {\n\t\treturn (\n\t\t\t<Box ref={ ref } sx={ { overflowY: 'auto', height, width: 220 } }>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { SearchIcon, XIcon } from '@elementor/icons';\nimport { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tvalue: string;\n\tonSearch: ( search: string ) => void;\n\tplaceholder: string;\n};\n\nexport const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {\n\tconst inputRef = useRef< HTMLInputElement | null >( null );\n\n\tconst handleClear = () => {\n\t\tonSearch( '' );\n\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tonSearch( event.target.value );\n\t};\n\n\treturn (\n\t\t<Box px={ 1.5 } pb={ 1 }>\n\t\t\t<TextField\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\tautoFocus\n\t\t\t\tfullWidth\n\t\t\t\tsize={ SIZE }\n\t\t\t\tvalue={ value }\n\t\t\t\tinputRef={ inputRef }\n\t\t\t\tonChange={ handleInputChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tInputProps={ {\n\t\t\t\t\tstartAdornment: (\n\t\t\t\t\t\t<InputAdornment position=\"start\">\n\t\t\t\t\t\t\t<SearchIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</InputAdornment>\n\t\t\t\t\t),\n\t\t\t\t\tendAdornment: value && (\n\t\t\t\t\t\t<IconButton size={ SIZE } onClick={ handleClear } aria-label={ __( 'Clear', 'elementor' ) }>\n\t\t\t\t\t\t\t<XIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n\tonError?: ( error: string | null ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick, onError }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tonError?.( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tconst updatedError = isDirty( newValue ) ? validation( newValue ) : null;\n\n\t\t\tsetError( updatedError );\n\t\t\tonError?.( updatedError );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react","listenTo","ThemeProviderBase","React","import_react","import_ui","React","import_ui","React","import_ui","import_react","React","import_ui","React","import_ui","React","import_react","import_ui","import_react","import_react","React","import_ui","React","import_react","import_icons","import_ui","import_i18n","SIZE","import_react"]}
+{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/info-alert.tsx","../src/components/infotip-card.tsx","../src/components/warning-infotip.tsx","../src/components/popover/header.tsx","../src/components/popover/menu-list.tsx","../src/hooks/use-scroll-to-selected.ts","../src/hooks/use-scroll-top.ts","../src/components/popover/scrollable-content.tsx","../src/components/popover/search.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { default as ThemeProvider } from './components/theme-provider';\nexport { MenuListItem, MenuItemInfotip } from './components/menu-item';\nexport { InfoTipCard } from './components/infotip-card';\nexport { InfoAlert } from './components/info-alert';\nexport { WarningInfotip } from './components/warning-infotip';\nexport * from './components/popover';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nimport { InfoAlert } from './info-alert';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\ntype MenuItemInfotipProps = React.PropsWithChildren< {\n\tshowInfoTip?: boolean;\n\tchildren: React.ReactNode;\n\tcontent: string;\n} >;\n\nexport const MenuItemInfotip = forwardRef(\n\t( { showInfoTip = false, children, content }: MenuItemInfotipProps, ref: unknown ) => {\n\t\tif ( ! showInfoTip ) {\n\t\t\treturn <>{ children }</>;\n\t\t}\n\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\tplacement={ 'right' }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={ <InfoAlert sx={ { maxWidth: 325 } }>{ content }</InfoAlert> }\n\t\t\t>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div style={ { pointerEvents: 'initial', width: '100%' } } onClick={ ( e ) => e.stopPropagation() }>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { InfoCircleFilledIcon } from '@elementor/icons';\nimport { Alert, type AlertProps } from '@elementor/ui';\n\nexport const InfoAlert = ( props: AlertProps ) => (\n\t<Alert\n\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\tvariant={ 'standard' }\n\t\tcolor=\"secondary\"\n\t\televation={ 0 }\n\t\tsize=\"small\"\n\t\t{ ...props }\n\t/>\n);\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { forwardRef, type PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport { Alert, AlertTitle, Infotip, type InfotipProps } from '@elementor/ui';\n\ninterface WarningInfotipProps extends PropsWithChildren {\n\topen: boolean;\n\ttitle?: string;\n\ttext: string;\n\tplacement: InfotipProps[ 'placement' ];\n\twidth?: string | number;\n\toffset?: number[];\n}\n\nexport const WarningInfotip = forwardRef(\n\t( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\topen={ open }\n\t\t\t\tplacement={ placement }\n\t\t\t\tPopperProps={ {\n\t\t\t\t\tsx: {\n\t\t\t\t\t\twidth: width ? width : 'initial',\n\t\t\t\t\t\t'.MuiTooltip-tooltip': { marginLeft: 0, marginRight: 0 },\n\t\t\t\t\t},\n\t\t\t\t\tmodifiers: offset ? [ { name: 'offset', options: { offset } } ] : [],\n\t\t\t\t} }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={\n\t\t\t\t\t<Alert color=\"error\" severity=\"warning\" variant=\"standard\" size=\"small\">\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Alert>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { CloseButton, Stack, Typography } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype PopoverHeaderProps = {\n\ttitle: string;\n\tonClose: () => void;\n\ticon?: React.ReactNode;\n\tactions?: React.ReactNode[];\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {\n\tconst paddingAndSizing = isVersion330Active\n\t\t? {\n\t\t\t\tpl: 2,\n\t\t\t\tpr: 1,\n\t\t\t\tpy: 1.5,\n\t\t\t\tmaxHeight: 36,\n\t\t  }\n\t\t: {\n\t\t\t\tpl: 1.5,\n\t\t\t\tpr: 0.5,\n\t\t\t\tpy: 1.5,\n\t\t  };\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>\n\t\t\t{ icon }\n\t\t\t<Typography\n\t\t\t\tvariant=\"subtitle2\"\n\t\t\t\tsx={\n\t\t\t\t\tisVersion330Active\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\tmt: 0.25,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</Typography>\n\t\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t\t{ actions }\n\t\t\t\t<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { useScrollTop, useScrollToSelected } from '../../hooks';\n\nexport type VirtualizedItem< T, V extends string > = {\n\ttype: T;\n\tvalue: V;\n\tlabel?: string;\n\ticon?: React.ReactNode;\n\tsecondaryText?: string;\n\t[ key: string ]: unknown;\n};\n\nexport type PopoverMenuListProps< T, V extends string > = {\n\titems: VirtualizedItem< T, V >[];\n\tonSelect: ( value: V ) => void;\n\tonClose: () => void;\n\tselectedValue?: V;\n\titemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;\n\t'data-testid'?: string;\n\tonChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;\n\tmenuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;\n\tmenuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;\n\tnoResultsComponent?: React.ReactNode;\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const ITEM_HEIGHT = 32;\nconst LIST_ITEMS_BUFFER = 6;\nconst MENU_LIST_PADDING_TOP = 8;\n\nconst menuSubHeaderAbsoluteStyling = ( start: number ) => ( {\n\tposition: 'absolute',\n\ttransform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,\n} );\n\nconst getAdjacentStickyIndices = (\n\tstickyIndices: number[],\n\trange: { startIndex: number; endIndex: number }\n): number[] => {\n\tconst previousTwoStickyIndices = stickyIndices\n\t\t.filter( ( stickyIndex ) => stickyIndex < range.startIndex )\n\t\t.slice( -2 );\n\n\tconst nextTwoStickyIndices = stickyIndices.filter( ( stickyIndex ) => stickyIndex > range.endIndex ).slice( 0, 2 );\n\n\treturn [ ...previousTwoStickyIndices, ...nextTwoStickyIndices ];\n};\n\nexport const PopoverMenuList = < T, V extends string >( {\n\titems,\n\tonSelect,\n\tonClose,\n\tselectedValue,\n\titemStyle,\n\tonChange,\n\t'data-testid': dataTestId,\n\tmenuItemContentTemplate,\n\tnoResultsComponent,\n\tmenuListTemplate: CustomMenuList,\n}: PopoverMenuListProps< T, V > ) => {\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst scrollTop = useScrollTop( { containerRef } );\n\n\tconst MenuListComponent = CustomMenuList || StyledMenuList;\n\n\tconst stickyIndices = useMemo(\n\t\t() =>\n\t\t\titems.reduce( ( categoryIndices, item, index ) => {\n\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\tcategoryIndices.push( index );\n\t\t\t\t}\n\t\t\t\treturn categoryIndices;\n\t\t\t}, [] as number[] ),\n\t\t[ items ]\n\t);\n\n\tconst getActiveItemIndices = ( range: { startIndex: number; endIndex: number } ) => {\n\t\tconst visibleAndStickyIndexes: number[] = [];\n\n\t\tfor ( let i = range.startIndex; i <= range.endIndex; i++ ) {\n\t\t\tvisibleAndStickyIndexes.push( i );\n\t\t}\n\n\t\tconst stickyIndicesToShow = getAdjacentStickyIndices( stickyIndices, range );\n\n\t\tstickyIndicesToShow.forEach( ( stickyIndex ) => {\n\t\t\tif ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {\n\t\t\t\tvisibleAndStickyIndexes.push( stickyIndex );\n\t\t\t}\n\t\t} );\n\n\t\treturn visibleAndStickyIndexes.sort( ( a, b ) => a - b );\n\t};\n\n\tconst virtualizer = useVirtualizer( {\n\t\tcount: items.length,\n\t\tgetScrollElement: () => containerRef.current,\n\t\testimateSize: () => ITEM_HEIGHT,\n\t\toverscan: LIST_ITEMS_BUFFER,\n\t\trangeExtractor: getActiveItemIndices,\n\t\tonChange,\n\t} );\n\n\tuseScrollToSelected( { selectedValue, items, virtualizer } );\n\n\treturn (\n\t\t<Box ref={ containerRef }>\n\t\t\t{ items.length === 0 && noResultsComponent ? (\n\t\t\t\tnoResultsComponent\n\t\t\t) : (\n\t\t\t\t<MenuListComponent\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tstyle={ { height: `${ virtualizer.getTotalSize() }px` } }\n\t\t\t\t\tdata-testid={ dataTestId }\n\t\t\t\t>\n\t\t\t\t\t{ virtualizer.getVirtualItems().map( ( virtualRow ) => {\n\t\t\t\t\t\tconst item = items[ virtualRow.index ];\n\t\t\t\t\t\tconst isLast = virtualRow.index === items.length - 1;\n\t\t\t\t\t\tconst isFirst =\n\t\t\t\t\t\t\titems[ 0 ]?.type === 'category' ? virtualRow.index === 1 : virtualRow.index === 0;\n\t\t\t\t\t\tconst isSelected = selectedValue === item.value;\n\t\t\t\t\t\tconst tabIndexFallback = ! selectedValue ? 0 : -1;\n\n\t\t\t\t\t\tif ( ! item ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\t\t\tconst shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuSubheader\n\t\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\t\tstyle={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }\n\t\t\t\t\t\t\t\t\tsx={\n\t\t\t\t\t\t\t\t\t\tisVersion330Active ? { fontWeight: '400', color: 'text.tertiary' } : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label || item.value }\n\t\t\t\t\t\t\t\t</MenuSubheader>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\t\t\t\t\tif ( ( e.target as HTMLElement ).closest( 'button' ) ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' && isLast ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' && isFirst ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttabIndex={ isSelected ? 0 : tabIndexFallback }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,\n\t\t\t\t\t\t\t\t\t...( itemStyle ? itemStyle( item ) : {} ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</MenuListComponent>\n\t\t\t) }\n\t\t</Box>\n\t);\n};\n\nexport const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: ITEM_HEIGHT,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.75, 2, 0.75, 4 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import { useEffect } from 'react';\nimport type { Virtualizer } from '@tanstack/react-virtual';\n\nimport type { VirtualizedItem } from '../components/popover/menu-list';\n\ntype UseScrollToSelectedProps< T, V extends string > = {\n\tselectedValue?: V;\n\titems: VirtualizedItem< T, V >[];\n\tvirtualizer: Virtualizer< HTMLDivElement, Element >;\n};\n\nexport const useScrollToSelected = < T, V extends string >( {\n\tselectedValue,\n\titems,\n\tvirtualizer,\n}: UseScrollToSelectedProps< T, V > ) => {\n\tuseEffect( () => {\n\t\tif ( ! selectedValue || items.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );\n\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tvirtualizer.scrollToIndex( selectedIndex, { align: 'center' } );\n\t\t}\n\t}, [ selectedValue, items, virtualizer ] );\n};\n","import { useEffect, useState } from 'react';\n\ntype UseScrollTopProps = {\n\tcontainerRef: React.RefObject< HTMLDivElement >;\n};\n\nexport const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {\n\tconst [ scrollTop, setScrollTop ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\tif ( ! container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = () => {\n\t\t\tsetScrollTop( container.scrollTop );\n\t\t};\n\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\t\treturn () => container.removeEventListener( 'scroll', handleScroll );\n\t}, [ containerRef ] );\n\n\treturn scrollTop;\n};\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box } from '@elementor/ui';\n\nconst SECTION_PADDING_INLINE = 32;\nconst DEFAULT_POPOVER_WIDTH = 220;\n\ntype PopoverScrollableContentProps = PropsWithChildren< {\n\theight?: number | 'auto';\n\twidth?: number;\n} >;\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(\n\t( { children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref ) => {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\tref={ ref }\n\t\t\t\tsx={ {\n\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\theight,\n\t\t\t\t\twidth: `${ isVersion330Active ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH }px`,\n\t\t\t\t\tmaxWidth: 496,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { SearchIcon, XIcon } from '@elementor/icons';\nimport { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tvalue: string;\n\tonSearch: ( search: string ) => void;\n\tplaceholder: string;\n};\n\nexport const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {\n\tconst inputRef = useRef< HTMLInputElement | null >( null );\n\n\tconst handleClear = () => {\n\t\tonSearch( '' );\n\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tonSearch( event.target.value );\n\t};\n\n\tconst padding = isVersion330Active\n\t\t? {\n\t\t\t\tpx: 2,\n\t\t\t\tpb: 1.5,\n\t\t  }\n\t\t: {\n\t\t\t\tpx: 1.5,\n\t\t\t\tpb: 1,\n\t\t  };\n\n\treturn (\n\t\t<Box { ...padding }>\n\t\t\t<TextField\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\tautoFocus\n\t\t\t\tfullWidth\n\t\t\t\tsize={ SIZE }\n\t\t\t\tvalue={ value }\n\t\t\t\tinputRef={ inputRef }\n\t\t\t\tonChange={ handleInputChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tInputProps={ {\n\t\t\t\t\tstartAdornment: (\n\t\t\t\t\t\t<InputAdornment position=\"start\">\n\t\t\t\t\t\t\t<SearchIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</InputAdornment>\n\t\t\t\t\t),\n\t\t\t\t\tendAdornment: value && (\n\t\t\t\t\t\t<IconButton size={ SIZE } onClick={ handleClear } aria-label={ __( 'Clear', 'elementor' ) }>\n\t\t\t\t\t\t\t<XIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n\tonError?: ( error: string | null ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick, onError }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tonError?.( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tconst updatedError = isDirty( newValue ) ? validation( newValue ) : null;\n\n\t\t\tsetError( updatedError );\n\t\t\tonError?.( updatedError );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react","listenTo","ThemeProviderBase","React","import_react","import_ui","React","import_ui","React","import_ui","import_react","React","import_ui","React","import_editor_v1_adapters","import_ui","React","import_react","import_editor_v1_adapters","import_ui","import_react","import_react","isVersion330Active","React","import_editor_v1_adapters","import_ui","isVersion330Active","React","import_react","import_editor_v1_adapters","import_icons","import_ui","import_i18n","isVersion330Active","SIZE","import_react"]}

package/dist/index.mjs

@@ -246,14 +246,39 @@ var WarningInfotip = forwardRef5(
 
 // src/components/popover/header.tsx
 import * as React9 from "react";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { CloseButton, Stack, Typography as Typography3 } from "@elementor/ui";
 var SIZE = "tiny";
-var PopoverHeader = ({ title, onClose, icon, actions }) => /* @__PURE__ */ React9.createElement(Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(Typography3, { variant: "subtitle2" }, title), /* @__PURE__ */ React9.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+var isVersion330Active = isExperimentActive("e_v_3_30");
+var PopoverHeader = ({ title, onClose, icon, actions }) => {
+  const paddingAndSizing = isVersion330Active ? {
+    pl: 2,
+    pr: 1,
+    py: 1.5,
+    maxHeight: 36
+  } : {
+    pl: 1.5,
+    pr: 0.5,
+    py: 1.5
+  };
+  return /* @__PURE__ */ React9.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(
+    Typography3,
+    {
+      variant: "subtitle2",
+      sx: isVersion330Active ? {
+        fontSize: "12px",
+        mt: 0.25
+      } : void 0
+    },
+    title
+  ), /* @__PURE__ */ React9.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
+};
 
 // src/components/popover/menu-list.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { useMemo, useRef } from "react";
-import { MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { Box as Box4, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
@@ -292,16 +317,8 @@ var useScrollTop = ({ containerRef }) => {
   return scrollTop;
 };
 
-// src/components/popover/scrollable-content.tsx
-import * as React10 from "react";
-import { Box as Box4 } from "@elementor/ui";
-var PopoverScrollableContent = React10.forwardRef(
-  ({ children, height = 260 }, ref) => {
-    return /* @__PURE__ */ React10.createElement(Box4, { ref, sx: { overflowY: "auto", height, width: 220 } }, children);
-  }
-);
-
 // src/components/popover/menu-list.tsx
+var isVersion330Active2 = isExperimentActive2("e_v_3_30");
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
 var MENU_LIST_PADDING_TOP = 8;
@@ -309,6 +326,11 @@ var menuSubHeaderAbsoluteStyling = (start) => ({
   position: "absolute",
   transform: `translateY(${start + MENU_LIST_PADDING_TOP}px)`
 });
+var getAdjacentStickyIndices = (stickyIndices, range) => {
+  const previousTwoStickyIndices = stickyIndices.filter((stickyIndex) => stickyIndex < range.startIndex).slice(-2);
+  const nextTwoStickyIndices = stickyIndices.filter((stickyIndex) => stickyIndex > range.endIndex).slice(0, 2);
+  return [...previousTwoStickyIndices, ...nextTwoStickyIndices];
+};
 var PopoverMenuList = ({
   items,
   onSelect,
@@ -338,7 +360,8 @@ var PopoverMenuList = ({
     for (let i = range.startIndex; i <= range.endIndex; i++) {
       visibleAndStickyIndexes.push(i);
     }
-    stickyIndices.forEach((stickyIndex) => {
+    const stickyIndicesToShow = getAdjacentStickyIndices(stickyIndices, range);
+    stickyIndicesToShow.forEach((stickyIndex) => {
       if (!visibleAndStickyIndexes.includes(stickyIndex)) {
         visibleAndStickyIndexes.push(stickyIndex);
       }
@@ -354,7 +377,7 @@ var PopoverMenuList = ({
     onChange
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
-  return /* @__PURE__ */ React11.createElement(PopoverScrollableContent, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(Box4, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React10.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -372,16 +395,17 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React11.createElement(
+        return /* @__PURE__ */ React10.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
-            style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start)
+            style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
+            sx: isVersion330Active2 ? { fontWeight: "400", color: "text.tertiary" } : void 0
           },
           item.label || item.value
         );
       }
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React10.createElement(
         "li",
         {
           key: virtualRow.key,
@@ -446,12 +470,39 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 
+// src/components/popover/scrollable-content.tsx
+import * as React11 from "react";
+import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
+import { Box as Box5 } from "@elementor/ui";
+var SECTION_PADDING_INLINE = 32;
+var DEFAULT_POPOVER_WIDTH = 220;
+var isVersion330Active3 = isExperimentActive3("e_v_3_30");
+var PopoverScrollableContent = React11.forwardRef(
+  ({ children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref) => {
+    return /* @__PURE__ */ React11.createElement(
+      Box5,
+      {
+        ref,
+        sx: {
+          overflowY: "auto",
+          height,
+          width: `${isVersion330Active3 ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH}px`,
+          maxWidth: 496
+        }
+      },
+      children
+    );
+  }
+);
+
 // src/components/popover/search.tsx
 import * as React12 from "react";
 import { useRef as useRef2 } from "react";
+import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
 import { SearchIcon, XIcon } from "@elementor/icons";
-import { Box as Box5, IconButton, InputAdornment, TextField } from "@elementor/ui";
+import { Box as Box6, IconButton, InputAdornment, TextField } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
+var isVersion330Active4 = isExperimentActive4("e_v_3_30");
 var SIZE2 = "tiny";
 var PopoverSearch = ({ value, onSearch, placeholder }) => {
   const inputRef = useRef2(null);
@@ -462,7 +513,14 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
   const handleInputChange = (event) => {
     onSearch(event.target.value);
   };
-  return /* @__PURE__ */ React12.createElement(Box5, { px: 1.5, pb: 1 }, /* @__PURE__ */ React12.createElement(
+  const padding = isVersion330Active4 ? {
+    px: 2,
+    pb: 1.5
+  } : {
+    px: 1.5,
+    pb: 1
+  };
+  return /* @__PURE__ */ React12.createElement(Box6, { ...padding }, /* @__PURE__ */ React12.createElement(
     TextField,
     {
       autoFocus: true,
@@ -578,6 +636,7 @@ var selectAll = (el) => {
 export {
   EditableField,
   EllipsisWithTooltip,
+  ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
   IntroductionModal,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/info-alert.tsx","../src/components/infotip-card.tsx","../src/components/warning-infotip.tsx","../src/components/popover/header.tsx","../src/components/popover/menu-list.tsx","../src/hooks/use-scroll-to-selected.ts","../src/hooks/use-scroll-top.ts","../src/components/popover/scrollable-content.tsx","../src/components/popover/search.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nimport { InfoAlert } from './info-alert';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\ntype MenuItemInfotipProps = React.PropsWithChildren< {\n\tshowInfoTip?: boolean;\n\tchildren: React.ReactNode;\n\tcontent: string;\n} >;\n\nexport const MenuItemInfotip = forwardRef(\n\t( { showInfoTip = false, children, content }: MenuItemInfotipProps, ref: unknown ) => {\n\t\tif ( ! showInfoTip ) {\n\t\t\treturn <>{ children }</>;\n\t\t}\n\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\tplacement={ 'right' }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={ <InfoAlert sx={ { maxWidth: 325 } }>{ content }</InfoAlert> }\n\t\t\t>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div style={ { pointerEvents: 'initial', width: '100%' } } onClick={ ( e ) => e.stopPropagation() }>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { InfoCircleFilledIcon } from '@elementor/icons';\nimport { Alert, type AlertProps } from '@elementor/ui';\n\nexport const InfoAlert = ( props: AlertProps ) => (\n\t<Alert\n\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\tvariant={ 'standard' }\n\t\tcolor=\"secondary\"\n\t\televation={ 0 }\n\t\tsize=\"small\"\n\t\t{ ...props }\n\t/>\n);\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { forwardRef, type PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport { Alert, AlertTitle, Infotip, type InfotipProps } from '@elementor/ui';\n\ninterface WarningInfotipProps extends PropsWithChildren {\n\topen: boolean;\n\ttitle?: string;\n\ttext: string;\n\tplacement: InfotipProps[ 'placement' ];\n\twidth?: string | number;\n\toffset?: number[];\n}\n\nexport const WarningInfotip = forwardRef(\n\t( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\topen={ open }\n\t\t\t\tplacement={ placement }\n\t\t\t\tPopperProps={ {\n\t\t\t\t\tsx: {\n\t\t\t\t\t\twidth: width ? width : 'initial',\n\t\t\t\t\t\t'.MuiTooltip-tooltip': { marginLeft: 0, marginRight: 0 },\n\t\t\t\t\t},\n\t\t\t\t\tmodifiers: offset ? [ { name: 'offset', options: { offset } } ] : [],\n\t\t\t\t} }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={\n\t\t\t\t\t<Alert color=\"error\" severity=\"warning\" variant=\"standard\" size=\"small\">\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Alert>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { CloseButton, Stack, Typography } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype PopoverHeaderProps = {\n\ttitle: string;\n\tonClose: () => void;\n\ticon?: React.ReactNode;\n\tactions?: React.ReactNode[];\n};\n\nexport const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => (\n\t<Stack direction=\"row\" alignItems=\"center\" pl={ 1.5 } pr={ 0.5 } py={ 1.5 } sx={ { columnGap: 0.5 } }>\n\t\t{ icon }\n\n\t\t<Typography variant=\"subtitle2\">{ title }</Typography>\n\n\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t{ actions }\n\n\t\t\t<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />\n\t\t</Stack>\n\t</Stack>\n);\n","import * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { MenuList, MenuSubheader, styled } from '@elementor/ui';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { useScrollTop, useScrollToSelected } from '../../hooks';\nimport { PopoverScrollableContent } from './scrollable-content';\n\nexport type VirtualizedItem< T, V extends string > = {\n\ttype: T;\n\tvalue: V;\n\tlabel?: string;\n\ticon?: React.ReactNode;\n\tsecondaryText?: string;\n\t[ key: string ]: unknown;\n};\n\nexport type PopoverMenuListProps< T, V extends string > = {\n\titems: VirtualizedItem< T, V >[];\n\tonSelect: ( value: V ) => void;\n\tonClose: () => void;\n\tselectedValue?: V;\n\titemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;\n\t'data-testid'?: string;\n\tonChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;\n\tmenuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;\n\tmenuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;\n\tnoResultsComponent?: React.ReactNode;\n};\n\nconst ITEM_HEIGHT = 32;\nconst LIST_ITEMS_BUFFER = 6;\nconst MENU_LIST_PADDING_TOP = 8;\n\nconst menuSubHeaderAbsoluteStyling = ( start: number ) => ( {\n\tposition: 'absolute',\n\ttransform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,\n} );\n\nexport const PopoverMenuList = < T, V extends string >( {\n\titems,\n\tonSelect,\n\tonClose,\n\tselectedValue,\n\titemStyle,\n\tonChange,\n\t'data-testid': dataTestId,\n\tmenuItemContentTemplate,\n\tnoResultsComponent,\n\tmenuListTemplate: CustomMenuList,\n}: PopoverMenuListProps< T, V > ) => {\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst scrollTop = useScrollTop( { containerRef } );\n\n\tconst MenuListComponent = CustomMenuList || StyledMenuList;\n\n\tconst stickyIndices = useMemo(\n\t\t() =>\n\t\t\titems.reduce( ( categoryIndices, item, index ) => {\n\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\tcategoryIndices.push( index );\n\t\t\t\t}\n\t\t\t\treturn categoryIndices;\n\t\t\t}, [] as number[] ),\n\t\t[ items ]\n\t);\n\n\tconst getActiveItemIndices = ( range: { startIndex: number; endIndex: number } ) => {\n\t\tconst visibleAndStickyIndexes: number[] = [];\n\n\t\tfor ( let i = range.startIndex; i <= range.endIndex; i++ ) {\n\t\t\tvisibleAndStickyIndexes.push( i );\n\t\t}\n\n\t\tstickyIndices.forEach( ( stickyIndex ) => {\n\t\t\tif ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {\n\t\t\t\tvisibleAndStickyIndexes.push( stickyIndex );\n\t\t\t}\n\t\t} );\n\n\t\treturn visibleAndStickyIndexes.sort( ( a, b ) => a - b );\n\t};\n\n\tconst virtualizer = useVirtualizer( {\n\t\tcount: items.length,\n\t\tgetScrollElement: () => containerRef.current,\n\t\testimateSize: () => ITEM_HEIGHT,\n\t\toverscan: LIST_ITEMS_BUFFER,\n\t\trangeExtractor: getActiveItemIndices,\n\t\tonChange,\n\t} );\n\n\tuseScrollToSelected( { selectedValue, items, virtualizer } );\n\n\treturn (\n\t\t<PopoverScrollableContent ref={ containerRef }>\n\t\t\t{ items.length === 0 && noResultsComponent ? (\n\t\t\t\tnoResultsComponent\n\t\t\t) : (\n\t\t\t\t<MenuListComponent\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tstyle={ { height: `${ virtualizer.getTotalSize() }px` } }\n\t\t\t\t\tdata-testid={ dataTestId }\n\t\t\t\t>\n\t\t\t\t\t{ virtualizer.getVirtualItems().map( ( virtualRow ) => {\n\t\t\t\t\t\tconst item = items[ virtualRow.index ];\n\t\t\t\t\t\tconst isLast = virtualRow.index === items.length - 1;\n\t\t\t\t\t\tconst isFirst =\n\t\t\t\t\t\t\titems[ 0 ]?.type === 'category' ? virtualRow.index === 1 : virtualRow.index === 0;\n\t\t\t\t\t\tconst isSelected = selectedValue === item.value;\n\t\t\t\t\t\tconst tabIndexFallback = ! selectedValue ? 0 : -1;\n\n\t\t\t\t\t\tif ( ! item ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\t\t\tconst shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuSubheader\n\t\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\t\tstyle={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label || item.value }\n\t\t\t\t\t\t\t\t</MenuSubheader>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\t\t\t\t\tif ( ( e.target as HTMLElement ).closest( 'button' ) ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' && isLast ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' && isFirst ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttabIndex={ isSelected ? 0 : tabIndexFallback }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,\n\t\t\t\t\t\t\t\t\t...( itemStyle ? itemStyle( item ) : {} ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</MenuListComponent>\n\t\t\t) }\n\t\t</PopoverScrollableContent>\n\t);\n};\n\nexport const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: ITEM_HEIGHT,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.75, 2, 0.75, 4 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import { useEffect } from 'react';\nimport type { Virtualizer } from '@tanstack/react-virtual';\n\nimport type { VirtualizedItem } from '../components/popover/menu-list';\n\ntype UseScrollToSelectedProps< T, V extends string > = {\n\tselectedValue?: V;\n\titems: VirtualizedItem< T, V >[];\n\tvirtualizer: Virtualizer< HTMLDivElement, Element >;\n};\n\nexport const useScrollToSelected = < T, V extends string >( {\n\tselectedValue,\n\titems,\n\tvirtualizer,\n}: UseScrollToSelectedProps< T, V > ) => {\n\tuseEffect( () => {\n\t\tif ( ! selectedValue || items.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );\n\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tvirtualizer.scrollToIndex( selectedIndex, { align: 'center' } );\n\t\t}\n\t}, [ selectedValue, items, virtualizer ] );\n};\n","import { useEffect, useState } from 'react';\n\ntype UseScrollTopProps = {\n\tcontainerRef: React.RefObject< HTMLDivElement >;\n};\n\nexport const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {\n\tconst [ scrollTop, setScrollTop ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\tif ( ! container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = () => {\n\t\t\tsetScrollTop( container.scrollTop );\n\t\t};\n\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\t\treturn () => container.removeEventListener( 'scroll', handleScroll );\n\t}, [ containerRef ] );\n\n\treturn scrollTop;\n};\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\nimport { Box } from '@elementor/ui';\n\ntype PopoverScrollableContentProps = PropsWithChildren< {\n\theight?: number;\n} >;\n\nexport const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(\n\t( { children, height = 260 }, ref ) => {\n\t\treturn (\n\t\t\t<Box ref={ ref } sx={ { overflowY: 'auto', height, width: 220 } }>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { SearchIcon, XIcon } from '@elementor/icons';\nimport { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tvalue: string;\n\tonSearch: ( search: string ) => void;\n\tplaceholder: string;\n};\n\nexport const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {\n\tconst inputRef = useRef< HTMLInputElement | null >( null );\n\n\tconst handleClear = () => {\n\t\tonSearch( '' );\n\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tonSearch( event.target.value );\n\t};\n\n\treturn (\n\t\t<Box px={ 1.5 } pb={ 1 }>\n\t\t\t<TextField\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\tautoFocus\n\t\t\t\tfullWidth\n\t\t\t\tsize={ SIZE }\n\t\t\t\tvalue={ value }\n\t\t\t\tinputRef={ inputRef }\n\t\t\t\tonChange={ handleInputChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tInputProps={ {\n\t\t\t\t\tstartAdornment: (\n\t\t\t\t\t\t<InputAdornment position=\"start\">\n\t\t\t\t\t\t\t<SearchIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</InputAdornment>\n\t\t\t\t\t),\n\t\t\t\t\tendAdornment: value && (\n\t\t\t\t\t\t<IconButton size={ SIZE } onClick={ handleClear } aria-label={ __( 'Clear', 'elementor' ) }>\n\t\t\t\t\t\t\t<XIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n\tonError?: ( error: string | null ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick, onError }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tonError?.( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tconst updatedError = isDirty( newValue ) ? validation( newValue ) : null;\n\n\t\t\tsetError( updatedError );\n\t\t\tonError?.( updatedError );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState","React","forwardRef","React","forwardRef","React","Box","Button","Typography","forwardRef","React","Alert","Infotip","React","Typography","React","styled","useEffect","useEffect","useState","React","Box","styled","React","useRef","Box","__","SIZE","useEffect","useRef","useState"]}
+{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/info-alert.tsx","../src/components/infotip-card.tsx","../src/components/warning-infotip.tsx","../src/components/popover/header.tsx","../src/components/popover/menu-list.tsx","../src/hooks/use-scroll-to-selected.ts","../src/hooks/use-scroll-top.ts","../src/components/popover/scrollable-content.tsx","../src/components/popover/search.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nimport { InfoAlert } from './info-alert';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\ntype MenuItemInfotipProps = React.PropsWithChildren< {\n\tshowInfoTip?: boolean;\n\tchildren: React.ReactNode;\n\tcontent: string;\n} >;\n\nexport const MenuItemInfotip = forwardRef(\n\t( { showInfoTip = false, children, content }: MenuItemInfotipProps, ref: unknown ) => {\n\t\tif ( ! showInfoTip ) {\n\t\t\treturn <>{ children }</>;\n\t\t}\n\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\tplacement={ 'right' }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={ <InfoAlert sx={ { maxWidth: 325 } }>{ content }</InfoAlert> }\n\t\t\t>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div style={ { pointerEvents: 'initial', width: '100%' } } onClick={ ( e ) => e.stopPropagation() }>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { InfoCircleFilledIcon } from '@elementor/icons';\nimport { Alert, type AlertProps } from '@elementor/ui';\n\nexport const InfoAlert = ( props: AlertProps ) => (\n\t<Alert\n\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\tvariant={ 'standard' }\n\t\tcolor=\"secondary\"\n\t\televation={ 0 }\n\t\tsize=\"small\"\n\t\t{ ...props }\n\t/>\n);\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { forwardRef, type PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport { Alert, AlertTitle, Infotip, type InfotipProps } from '@elementor/ui';\n\ninterface WarningInfotipProps extends PropsWithChildren {\n\topen: boolean;\n\ttitle?: string;\n\ttext: string;\n\tplacement: InfotipProps[ 'placement' ];\n\twidth?: string | number;\n\toffset?: number[];\n}\n\nexport const WarningInfotip = forwardRef(\n\t( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\topen={ open }\n\t\t\t\tplacement={ placement }\n\t\t\t\tPopperProps={ {\n\t\t\t\t\tsx: {\n\t\t\t\t\t\twidth: width ? width : 'initial',\n\t\t\t\t\t\t'.MuiTooltip-tooltip': { marginLeft: 0, marginRight: 0 },\n\t\t\t\t\t},\n\t\t\t\t\tmodifiers: offset ? [ { name: 'offset', options: { offset } } ] : [],\n\t\t\t\t} }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={\n\t\t\t\t\t<Alert color=\"error\" severity=\"warning\" variant=\"standard\" size=\"small\">\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Alert>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { CloseButton, Stack, Typography } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype PopoverHeaderProps = {\n\ttitle: string;\n\tonClose: () => void;\n\ticon?: React.ReactNode;\n\tactions?: React.ReactNode[];\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {\n\tconst paddingAndSizing = isVersion330Active\n\t\t? {\n\t\t\t\tpl: 2,\n\t\t\t\tpr: 1,\n\t\t\t\tpy: 1.5,\n\t\t\t\tmaxHeight: 36,\n\t\t  }\n\t\t: {\n\t\t\t\tpl: 1.5,\n\t\t\t\tpr: 0.5,\n\t\t\t\tpy: 1.5,\n\t\t  };\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>\n\t\t\t{ icon }\n\t\t\t<Typography\n\t\t\t\tvariant=\"subtitle2\"\n\t\t\t\tsx={\n\t\t\t\t\tisVersion330Active\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\tmt: 0.25,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</Typography>\n\t\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t\t{ actions }\n\t\t\t\t<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { useScrollTop, useScrollToSelected } from '../../hooks';\n\nexport type VirtualizedItem< T, V extends string > = {\n\ttype: T;\n\tvalue: V;\n\tlabel?: string;\n\ticon?: React.ReactNode;\n\tsecondaryText?: string;\n\t[ key: string ]: unknown;\n};\n\nexport type PopoverMenuListProps< T, V extends string > = {\n\titems: VirtualizedItem< T, V >[];\n\tonSelect: ( value: V ) => void;\n\tonClose: () => void;\n\tselectedValue?: V;\n\titemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;\n\t'data-testid'?: string;\n\tonChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;\n\tmenuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;\n\tmenuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;\n\tnoResultsComponent?: React.ReactNode;\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const ITEM_HEIGHT = 32;\nconst LIST_ITEMS_BUFFER = 6;\nconst MENU_LIST_PADDING_TOP = 8;\n\nconst menuSubHeaderAbsoluteStyling = ( start: number ) => ( {\n\tposition: 'absolute',\n\ttransform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,\n} );\n\nconst getAdjacentStickyIndices = (\n\tstickyIndices: number[],\n\trange: { startIndex: number; endIndex: number }\n): number[] => {\n\tconst previousTwoStickyIndices = stickyIndices\n\t\t.filter( ( stickyIndex ) => stickyIndex < range.startIndex )\n\t\t.slice( -2 );\n\n\tconst nextTwoStickyIndices = stickyIndices.filter( ( stickyIndex ) => stickyIndex > range.endIndex ).slice( 0, 2 );\n\n\treturn [ ...previousTwoStickyIndices, ...nextTwoStickyIndices ];\n};\n\nexport const PopoverMenuList = < T, V extends string >( {\n\titems,\n\tonSelect,\n\tonClose,\n\tselectedValue,\n\titemStyle,\n\tonChange,\n\t'data-testid': dataTestId,\n\tmenuItemContentTemplate,\n\tnoResultsComponent,\n\tmenuListTemplate: CustomMenuList,\n}: PopoverMenuListProps< T, V > ) => {\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst scrollTop = useScrollTop( { containerRef } );\n\n\tconst MenuListComponent = CustomMenuList || StyledMenuList;\n\n\tconst stickyIndices = useMemo(\n\t\t() =>\n\t\t\titems.reduce( ( categoryIndices, item, index ) => {\n\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\tcategoryIndices.push( index );\n\t\t\t\t}\n\t\t\t\treturn categoryIndices;\n\t\t\t}, [] as number[] ),\n\t\t[ items ]\n\t);\n\n\tconst getActiveItemIndices = ( range: { startIndex: number; endIndex: number } ) => {\n\t\tconst visibleAndStickyIndexes: number[] = [];\n\n\t\tfor ( let i = range.startIndex; i <= range.endIndex; i++ ) {\n\t\t\tvisibleAndStickyIndexes.push( i );\n\t\t}\n\n\t\tconst stickyIndicesToShow = getAdjacentStickyIndices( stickyIndices, range );\n\n\t\tstickyIndicesToShow.forEach( ( stickyIndex ) => {\n\t\t\tif ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {\n\t\t\t\tvisibleAndStickyIndexes.push( stickyIndex );\n\t\t\t}\n\t\t} );\n\n\t\treturn visibleAndStickyIndexes.sort( ( a, b ) => a - b );\n\t};\n\n\tconst virtualizer = useVirtualizer( {\n\t\tcount: items.length,\n\t\tgetScrollElement: () => containerRef.current,\n\t\testimateSize: () => ITEM_HEIGHT,\n\t\toverscan: LIST_ITEMS_BUFFER,\n\t\trangeExtractor: getActiveItemIndices,\n\t\tonChange,\n\t} );\n\n\tuseScrollToSelected( { selectedValue, items, virtualizer } );\n\n\treturn (\n\t\t<Box ref={ containerRef }>\n\t\t\t{ items.length === 0 && noResultsComponent ? (\n\t\t\t\tnoResultsComponent\n\t\t\t) : (\n\t\t\t\t<MenuListComponent\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tstyle={ { height: `${ virtualizer.getTotalSize() }px` } }\n\t\t\t\t\tdata-testid={ dataTestId }\n\t\t\t\t>\n\t\t\t\t\t{ virtualizer.getVirtualItems().map( ( virtualRow ) => {\n\t\t\t\t\t\tconst item = items[ virtualRow.index ];\n\t\t\t\t\t\tconst isLast = virtualRow.index === items.length - 1;\n\t\t\t\t\t\tconst isFirst =\n\t\t\t\t\t\t\titems[ 0 ]?.type === 'category' ? virtualRow.index === 1 : virtualRow.index === 0;\n\t\t\t\t\t\tconst isSelected = selectedValue === item.value;\n\t\t\t\t\t\tconst tabIndexFallback = ! selectedValue ? 0 : -1;\n\n\t\t\t\t\t\tif ( ! item ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\t\t\tconst shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuSubheader\n\t\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\t\tstyle={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }\n\t\t\t\t\t\t\t\t\tsx={\n\t\t\t\t\t\t\t\t\t\tisVersion330Active ? { fontWeight: '400', color: 'text.tertiary' } : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label || item.value }\n\t\t\t\t\t\t\t\t</MenuSubheader>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\t\t\t\t\tif ( ( e.target as HTMLElement ).closest( 'button' ) ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' && isLast ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' && isFirst ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttabIndex={ isSelected ? 0 : tabIndexFallback }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,\n\t\t\t\t\t\t\t\t\t...( itemStyle ? itemStyle( item ) : {} ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</MenuListComponent>\n\t\t\t) }\n\t\t</Box>\n\t);\n};\n\nexport const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: ITEM_HEIGHT,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.75, 2, 0.75, 4 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import { useEffect } from 'react';\nimport type { Virtualizer } from '@tanstack/react-virtual';\n\nimport type { VirtualizedItem } from '../components/popover/menu-list';\n\ntype UseScrollToSelectedProps< T, V extends string > = {\n\tselectedValue?: V;\n\titems: VirtualizedItem< T, V >[];\n\tvirtualizer: Virtualizer< HTMLDivElement, Element >;\n};\n\nexport const useScrollToSelected = < T, V extends string >( {\n\tselectedValue,\n\titems,\n\tvirtualizer,\n}: UseScrollToSelectedProps< T, V > ) => {\n\tuseEffect( () => {\n\t\tif ( ! selectedValue || items.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );\n\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tvirtualizer.scrollToIndex( selectedIndex, { align: 'center' } );\n\t\t}\n\t}, [ selectedValue, items, virtualizer ] );\n};\n","import { useEffect, useState } from 'react';\n\ntype UseScrollTopProps = {\n\tcontainerRef: React.RefObject< HTMLDivElement >;\n};\n\nexport const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {\n\tconst [ scrollTop, setScrollTop ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\tif ( ! container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = () => {\n\t\t\tsetScrollTop( container.scrollTop );\n\t\t};\n\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\t\treturn () => container.removeEventListener( 'scroll', handleScroll );\n\t}, [ containerRef ] );\n\n\treturn scrollTop;\n};\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box } from '@elementor/ui';\n\nconst SECTION_PADDING_INLINE = 32;\nconst DEFAULT_POPOVER_WIDTH = 220;\n\ntype PopoverScrollableContentProps = PropsWithChildren< {\n\theight?: number | 'auto';\n\twidth?: number;\n} >;\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(\n\t( { children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref ) => {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\tref={ ref }\n\t\t\t\tsx={ {\n\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\theight,\n\t\t\t\t\twidth: `${ isVersion330Active ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH }px`,\n\t\t\t\t\tmaxWidth: 496,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { SearchIcon, XIcon } from '@elementor/icons';\nimport { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tvalue: string;\n\tonSearch: ( search: string ) => void;\n\tplaceholder: string;\n};\n\nexport const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {\n\tconst inputRef = useRef< HTMLInputElement | null >( null );\n\n\tconst handleClear = () => {\n\t\tonSearch( '' );\n\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tonSearch( event.target.value );\n\t};\n\n\tconst padding = isVersion330Active\n\t\t? {\n\t\t\t\tpx: 2,\n\t\t\t\tpb: 1.5,\n\t\t  }\n\t\t: {\n\t\t\t\tpx: 1.5,\n\t\t\t\tpb: 1,\n\t\t  };\n\n\treturn (\n\t\t<Box { ...padding }>\n\t\t\t<TextField\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\tautoFocus\n\t\t\t\tfullWidth\n\t\t\t\tsize={ SIZE }\n\t\t\t\tvalue={ value }\n\t\t\t\tinputRef={ inputRef }\n\t\t\t\tonChange={ handleInputChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tInputProps={ {\n\t\t\t\t\tstartAdornment: (\n\t\t\t\t\t\t<InputAdornment position=\"start\">\n\t\t\t\t\t\t\t<SearchIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</InputAdornment>\n\t\t\t\t\t),\n\t\t\t\t\tendAdornment: value && (\n\t\t\t\t\t\t<IconButton size={ SIZE } onClick={ handleClear } aria-label={ __( 'Clear', 'elementor' ) }>\n\t\t\t\t\t\t\t<XIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n\tonError?: ( error: string | null ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick, onError }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tonError?.( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tconst updatedError = isDirty( newValue ) ? validation( newValue ) : null;\n\n\t\t\tsetError( updatedError );\n\t\t\tonError?.( updatedError );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState","React","forwardRef","React","forwardRef","React","Box","Button","Typography","forwardRef","React","Alert","Infotip","React","Typography","React","isExperimentActive","Box","styled","useEffect","useEffect","useState","isVersion330Active","isExperimentActive","Box","styled","React","isExperimentActive","Box","isVersion330Active","React","useRef","isExperimentActive","Box","__","isVersion330Active","SIZE","useEffect","useRef","useState"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,9 +37,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "0.12.0",
-    "@elementor/icons": "1.44.0",
-    "@elementor/ui": "1.35.5",
+    "@elementor/editor-v1-adapters": "0.12.1",
+    "@elementor/icons": "1.46.0",
+    "@elementor/ui": "1.36.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/popover/header.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { CloseButton, Stack, Typography } from '@elementor/ui';
 
 const SIZE = 'tiny';
@@ -10,16 +11,42 @@ type PopoverHeaderProps = {
 	actions?: React.ReactNode[];
 };
 
-export const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => (
-	<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 } sx={ { columnGap: 0.5 } }>
-		{ icon }
+const isVersion330Active = isExperimentActive( 'e_v_3_30' );
 
-		<Typography variant="subtitle2">{ title }</Typography>
+export const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {
+	const paddingAndSizing = isVersion330Active
+		? {
+				pl: 2,
+				pr: 1,
+				py: 1.5,
+				maxHeight: 36,
+		  }
+		: {
+				pl: 1.5,
+				pr: 0.5,
+				py: 1.5,
+		  };
 
-		<Stack direction="row" sx={ { ml: 'auto' } }>
-			{ actions }
-
-			<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />
+	return (
+		<Stack direction="row" alignItems="center" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>
+			{ icon }
+			<Typography
+				variant="subtitle2"
+				sx={
+					isVersion330Active
+						? {
+								fontSize: '12px',
+								mt: 0.25,
+						  }
+						: undefined
+				}
+			>
+				{ title }
+			</Typography>
+			<Stack direction="row" sx={ { ml: 'auto' } }>
+				{ actions }
+				<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />
+			</Stack>
 		</Stack>
-	</Stack>
-);
+	);
+};

package/src/components/popover/index.ts

@@ -1,5 +1,5 @@
 export { PopoverHeader } from './header';
-export { PopoverMenuList, StyledMenuList } from './menu-list';
+export { ITEM_HEIGHT, PopoverMenuList, StyledMenuList } from './menu-list';
 export type { PopoverMenuListProps, VirtualizedItem } from './menu-list';
 export { PopoverScrollableContent } from './scrollable-content';
 export { PopoverSearch } from './search';

package/src/components/popover/menu-list.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useMemo, useRef } from 'react';
-import { MenuList, MenuSubheader, styled } from '@elementor/ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { useScrollTop, useScrollToSelected } from '../../hooks';
-import { PopoverScrollableContent } from './scrollable-content';
 
 export type VirtualizedItem< T, V extends string > = {
 	type: T;
@@ -28,7 +28,9 @@ export type PopoverMenuListProps< T, V extends string > = {
 	noResultsComponent?: React.ReactNode;
 };
 
-const ITEM_HEIGHT = 32;
+const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
+export const ITEM_HEIGHT = 32;
 const LIST_ITEMS_BUFFER = 6;
 const MENU_LIST_PADDING_TOP = 8;
 
@@ -37,6 +39,19 @@ const menuSubHeaderAbsoluteStyling = ( start: number ) => ( {
 	transform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,
 } );
 
+const getAdjacentStickyIndices = (
+	stickyIndices: number[],
+	range: { startIndex: number; endIndex: number }
+): number[] => {
+	const previousTwoStickyIndices = stickyIndices
+		.filter( ( stickyIndex ) => stickyIndex < range.startIndex )
+		.slice( -2 );
+
+	const nextTwoStickyIndices = stickyIndices.filter( ( stickyIndex ) => stickyIndex > range.endIndex ).slice( 0, 2 );
+
+	return [ ...previousTwoStickyIndices, ...nextTwoStickyIndices ];
+};
+
 export const PopoverMenuList = < T, V extends string >( {
 	items,
 	onSelect,
@@ -72,7 +87,9 @@ export const PopoverMenuList = < T, V extends string >( {
 			visibleAndStickyIndexes.push( i );
 		}
 
-		stickyIndices.forEach( ( stickyIndex ) => {
+		const stickyIndicesToShow = getAdjacentStickyIndices( stickyIndices, range );
+
+		stickyIndicesToShow.forEach( ( stickyIndex ) => {
 			if ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {
 				visibleAndStickyIndexes.push( stickyIndex );
 			}
@@ -93,7 +110,7 @@ export const PopoverMenuList = < T, V extends string >( {
 	useScrollToSelected( { selectedValue, items, virtualizer } );
 
 	return (
-		<PopoverScrollableContent ref={ containerRef }>
+		<Box ref={ containerRef }>
 			{ items.length === 0 && noResultsComponent ? (
 				noResultsComponent
 			) : (
@@ -121,6 +138,9 @@ export const PopoverMenuList = < T, V extends string >( {
 								<MenuSubheader
 									key={ virtualRow.key }
 									style={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }
+									sx={
+										isVersion330Active ? { fontWeight: '400', color: 'text.tertiary' } : undefined
+									}
 								>
 									{ item.label || item.value }
 								</MenuSubheader>
@@ -167,7 +187,7 @@ export const PopoverMenuList = < T, V extends string >( {
 					} ) }
 				</MenuListComponent>
 			) }
-		</PopoverScrollableContent>
+		</Box>
 	);
 };
 

package/src/components/popover/scrollable-content.tsx

@@ -1,15 +1,30 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Box } from '@elementor/ui';
 
+const SECTION_PADDING_INLINE = 32;
+const DEFAULT_POPOVER_WIDTH = 220;
+
 type PopoverScrollableContentProps = PropsWithChildren< {
-	height?: number;
+	height?: number | 'auto';
+	width?: number;
 } >;
 
+const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 export const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(
-	( { children, height = 260 }, ref ) => {
+	( { children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref ) => {
 		return (
-			<Box ref={ ref } sx={ { overflowY: 'auto', height, width: 220 } }>
+			<Box
+				ref={ ref }
+				sx={ {
+					overflowY: 'auto',
+					height,
+					width: `${ isVersion330Active ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH }px`,
+					maxWidth: 496,
+				} }
+			>
 				{ children }
 			</Box>
 		);

package/src/components/popover/search.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { useRef } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { SearchIcon, XIcon } from '@elementor/icons';
 import { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 const SIZE = 'tiny';
 
 type Props = {
@@ -25,8 +28,18 @@ export const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {
 		onSearch( event.target.value );
 	};
 
+	const padding = isVersion330Active
+		? {
+				px: 2,
+				pb: 1.5,
+		  }
+		: {
+				px: 1.5,
+				pb: 1,
+		  };
+
 	return (
-		<Box px={ 1.5 } pb={ 1 }>
+		<Box { ...padding }>
 			<TextField
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus