@elementor/editor-ui 0.11.0 → 0.13.0

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/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 { PopoverHeader } from './components/popover/header';\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 content={ content } sx={ { maxWidth: 325 } } /> }\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, Stack, type SxProps, type Theme, Typography } from '@elementor/ui';\n\nexport const InfoAlert = ( { content, sx }: { content: string; sx?: SxProps } ) => {\n\treturn (\n\t\t<Alert\n\t\t\tsx={ ( theme: Theme ) => ( {\n\t\t\t\t'.MuiAlert-icon': { fontSize: '1.25rem', marginRight: theme.spacing( 0.5 ) },\n\t\t\t\t...sx,\n\t\t\t} ) }\n\t\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\t\tvariant={ 'standard' }\n\t\t\tcolor=\"secondary\"\n\t\t\televation={ 0 }\n\t\t>\n\t\t\t<Stack>\n\t\t\t\t<Typography variant=\"caption\" color=\"text.primary\">\n\t\t\t\t\t{ content }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t</Alert>\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, type Theme, Typography } 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\n\t\t\t\t\t\tcolor=\"error\"\n\t\t\t\t\t\tseverity=\"warning\"\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tsx={ ( theme: Theme ) => ( {\n\t\t\t\t\t\t\t'.MuiAlert-icon': { fontSize: '1.25rem', marginRight: theme.spacing( 0.5 ) },\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t\t{ text }\n\t\t\t\t\t\t</Typography>\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 { 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","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

@@ -157,23 +157,18 @@ import { Infotip, MenuItem, MenuItemText } from "@elementor/ui";
 // src/components/info-alert.tsx
 import * as React5 from "react";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Alert, Stack, Typography as Typography2 } from "@elementor/ui";
-var InfoAlert = ({ content, sx }) => {
-  return /* @__PURE__ */ React5.createElement(
-    Alert,
-    {
-      sx: (theme) => ({
-        ".MuiAlert-icon": { fontSize: "1.25rem", marginRight: theme.spacing(0.5) },
-        ...sx
-      }),
-      icon: /* @__PURE__ */ React5.createElement(InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
-      variant: "standard",
-      color: "secondary",
-      elevation: 0
-    },
-    /* @__PURE__ */ React5.createElement(Stack, null, /* @__PURE__ */ React5.createElement(Typography2, { variant: "caption", color: "text.primary" }, content))
-  );
-};
+import { Alert } from "@elementor/ui";
+var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
+  Alert,
+  {
+    icon: /* @__PURE__ */ React5.createElement(InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
+    variant: "standard",
+    color: "secondary",
+    elevation: 0,
+    size: "small",
+    ...props
+  }
+);
 
 // src/components/menu-item.tsx
 var MenuListItem = ({ children, ...props }) => {
@@ -208,7 +203,7 @@ var MenuItemInfotip = forwardRef4(
         ref,
         placement: "right",
         arrow: false,
-        content: /* @__PURE__ */ React6.createElement(InfoAlert, { content, sx: { maxWidth: 325 } })
+        content: /* @__PURE__ */ React6.createElement(InfoAlert, { sx: { maxWidth: 325 } }, content)
       },
       /* @__PURE__ */ React6.createElement("div", { style: { pointerEvents: "initial", width: "100%" }, onClick: (e) => e.stopPropagation() }, children)
     );
@@ -217,15 +212,15 @@ var MenuItemInfotip = forwardRef4(
 
 // src/components/infotip-card.tsx
 import * as React7 from "react";
-import { Box as Box3, Button as Button2, Card, CardActions, CardContent, SvgIcon, Typography as Typography3 } from "@elementor/ui";
+import { Box as Box3, Button as Button2, Card, CardActions, CardContent, SvgIcon, Typography as Typography2 } from "@elementor/ui";
 var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
-  return /* @__PURE__ */ React7.createElement(Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(Box3, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(Typography3, { variant: "body2" }, content))), (ctaButton || learnMoreButton) && /* @__PURE__ */ React7.createElement(CardActions, null, learnMoreButton && /* @__PURE__ */ React7.createElement(Button2, { size: "small", color: "warning", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label), ctaButton && /* @__PURE__ */ React7.createElement(Button2, { size: "small", color: "warning", variant: "contained", onClick: ctaButton.onClick }, ctaButton.label)));
+  return /* @__PURE__ */ React7.createElement(Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(Box3, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(Typography2, { variant: "body2" }, content))), (ctaButton || learnMoreButton) && /* @__PURE__ */ React7.createElement(CardActions, null, learnMoreButton && /* @__PURE__ */ React7.createElement(Button2, { size: "small", color: "warning", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label), ctaButton && /* @__PURE__ */ React7.createElement(Button2, { size: "small", color: "warning", variant: "contained", onClick: ctaButton.onClick }, ctaButton.label)));
 };
 
 // src/components/warning-infotip.tsx
 import { forwardRef as forwardRef5 } from "react";
 import * as React8 from "react";
-import { Alert as Alert2, AlertTitle, Infotip as Infotip2, Typography as Typography4 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle, Infotip as Infotip2 } from "@elementor/ui";
 var WarningInfotip = forwardRef5(
   ({ children, open, title, text, placement, width, offset }, ref) => {
     return /* @__PURE__ */ React8.createElement(
@@ -242,19 +237,7 @@ var WarningInfotip = forwardRef5(
           modifiers: offset ? [{ name: "offset", options: { offset } }] : []
         },
         arrow: false,
-        content: /* @__PURE__ */ React8.createElement(
-          Alert2,
-          {
-            color: "error",
-            severity: "warning",
-            variant: "standard",
-            sx: (theme) => ({
-              ".MuiAlert-icon": { fontSize: "1.25rem", marginRight: theme.spacing(0.5) }
-            })
-          },
-          title ? /* @__PURE__ */ React8.createElement(AlertTitle, null, title) : null,
-          /* @__PURE__ */ React8.createElement(Typography4, { variant: "caption", sx: { color: "text.primary" } }, text)
-        )
+        content: /* @__PURE__ */ React8.createElement(Alert2, { color: "error", severity: "warning", variant: "standard", size: "small" }, title ? /* @__PURE__ */ React8.createElement(AlertTitle, null, title) : null, text)
       },
       children
     );
@@ -263,15 +246,303 @@ var WarningInfotip = forwardRef5(
 
 // src/components/popover/header.tsx
 import * as React9 from "react";
-import { CloseButton, Stack as Stack2, Typography as Typography5 } from "@elementor/ui";
+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(Stack2, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(Typography5, { variant: "subtitle2" }, title), /* @__PURE__ */ React9.createElement(Stack2, { 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 React10 from "react";
+import { useMemo, useRef } from "react";
+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
+import { useEffect as useEffect3 } from "react";
+var useScrollToSelected = ({
+  selectedValue,
+  items,
+  virtualizer
+}) => {
+  useEffect3(() => {
+    if (!selectedValue || items.length === 0) {
+      return;
+    }
+    const selectedIndex = items.findIndex((item) => item.value === selectedValue);
+    if (selectedIndex !== -1) {
+      virtualizer.scrollToIndex(selectedIndex, { align: "center" });
+    }
+  }, [selectedValue, items, virtualizer]);
+};
+
+// src/hooks/use-scroll-top.ts
+import { useEffect as useEffect4, useState as useState4 } from "react";
+var useScrollTop = ({ containerRef }) => {
+  const [scrollTop, setScrollTop] = useState4(0);
+  useEffect4(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef]);
+  return scrollTop;
+};
+
+// 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;
+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,
+  onClose,
+  selectedValue,
+  itemStyle,
+  onChange,
+  "data-testid": dataTestId,
+  menuItemContentTemplate,
+  noResultsComponent,
+  menuListTemplate: CustomMenuList
+}) => {
+  const containerRef = useRef(null);
+  const scrollTop = useScrollTop({ containerRef });
+  const MenuListComponent = CustomMenuList || StyledMenuList;
+  const stickyIndices = useMemo(
+    () => items.reduce((categoryIndices, item, index) => {
+      if (item.type === "category") {
+        categoryIndices.push(index);
+      }
+      return categoryIndices;
+    }, []),
+    [items]
+  );
+  const getActiveItemIndices = (range) => {
+    const visibleAndStickyIndexes = [];
+    for (let i = range.startIndex; i <= range.endIndex; i++) {
+      visibleAndStickyIndexes.push(i);
+    }
+    const stickyIndicesToShow = getAdjacentStickyIndices(stickyIndices, range);
+    stickyIndicesToShow.forEach((stickyIndex) => {
+      if (!visibleAndStickyIndexes.includes(stickyIndex)) {
+        visibleAndStickyIndexes.push(stickyIndex);
+      }
+    });
+    return visibleAndStickyIndexes.sort((a, b) => a - b);
+  };
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: LIST_ITEMS_BUFFER,
+    rangeExtractor: getActiveItemIndices,
+    onChange
+  });
+  useScrollToSelected({ selectedValue, items, virtualizer });
+  return /* @__PURE__ */ React10.createElement(Box4, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React10.createElement(
+    MenuListComponent,
+    {
+      role: "listbox",
+      style: { height: `${virtualizer.getTotalSize()}px` },
+      "data-testid": dataTestId
+    },
+    virtualizer.getVirtualItems().map((virtualRow) => {
+      const item = items[virtualRow.index];
+      const isLast = virtualRow.index === items.length - 1;
+      const isFirst = items[0]?.type === "category" ? virtualRow.index === 1 : virtualRow.index === 0;
+      const isSelected = selectedValue === item.value;
+      const tabIndexFallback = !selectedValue ? 0 : -1;
+      if (!item) {
+        return null;
+      }
+      if (item.type === "category") {
+        const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
+        return /* @__PURE__ */ React10.createElement(
+          MenuSubheader,
+          {
+            key: virtualRow.key,
+            style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
+            sx: isVersion330Active2 ? { fontWeight: "400", color: "text.tertiary" } : void 0
+          },
+          item.label || item.value
+        );
+      }
+      return /* @__PURE__ */ React10.createElement(
+        "li",
+        {
+          key: virtualRow.key,
+          role: "option",
+          "aria-selected": isSelected,
+          onClick: (e) => {
+            if (e.target.closest("button")) {
+              return;
+            }
+            onSelect(item.value);
+            onClose();
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              onSelect(item.value);
+              onClose();
+            }
+            if (event.key === "ArrowDown" && isLast) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            if (event.key === "ArrowUp" && isFirst) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          },
+          tabIndex: isSelected ? 0 : tabIndexFallback,
+          style: {
+            transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
+            ...itemStyle ? itemStyle(item) : {}
+          }
+        },
+        menuItemContentTemplate ? menuItemContentTemplate(item) : item.label || item.value
+      );
+    })
+  ));
+};
+var StyledMenuList = styled2(MenuList)(({ theme }) => ({
+  "& > li": {
+    height: ITEM_HEIGHT,
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
+  },
+  '& > [role="option"]': {
+    ...theme.typography.caption,
+    lineHeight: "inherit",
+    padding: theme.spacing(0.75, 2, 0.75, 4),
+    "&:hover, &:focus": {
+      backgroundColor: theme.palette.action.hover
+    },
+    '&[aria-selected="true"]': {
+      backgroundColor: theme.palette.action.selected
+    },
+    cursor: "pointer",
+    textOverflow: "ellipsis",
+    position: "absolute",
+    top: 0,
+    left: 0
+  },
+  width: "100%",
+  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 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);
+  const handleClear = () => {
+    onSearch("");
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (event) => {
+    onSearch(event.target.value);
+  };
+  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,
+      fullWidth: true,
+      size: SIZE2,
+      value,
+      inputRef,
+      onChange: handleInputChange,
+      placeholder,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: SIZE2 })),
+        endAdornment: value && /* @__PURE__ */ React12.createElement(IconButton, { size: SIZE2, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React12.createElement(XIcon, { color: "action", fontSize: SIZE2 }))
+      }
+    }
+  ));
+};
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [isEditing, setIsEditing] = useState5(false);
+  const [error, setError] = useState5(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -344,8 +615,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = useRef(null);
-  useEffect3(() => {
+  const ref = useRef3(null);
+  useEffect5(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -365,12 +636,17 @@ var selectAll = (el) => {
 export {
   EditableField,
   EllipsisWithTooltip,
+  ITEM_HEIGHT,
   InfoAlert,
   InfoTipCard,
   IntroductionModal,
   MenuItemInfotip,
   MenuListItem,
   PopoverHeader,
+  PopoverMenuList,
+  PopoverScrollableContent,
+  PopoverSearch,
+  StyledMenuList,
   ThemeProvider,
   WarningInfotip,
   useEditable