@elementor/editor-ui 0.10.1 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +19 -0
- package/dist/index.d.mts +52 -6
- package/dist/index.d.ts +52 -6
- package/dist/index.js +264 -35
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +263 -39
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -3
- package/src/components/info-alert.tsx +11 -21
- package/src/components/menu-item.tsx +1 -1
- package/src/components/popover/header.tsx +25 -0
- package/src/components/popover/index.ts +5 -0
- package/src/components/popover/menu-list.tsx +199 -0
- package/src/components/popover/scrollable-content.tsx +17 -0
- package/src/components/popover/search.tsx +54 -0
- package/src/components/warning-infotip.tsx +3 -12
- package/src/hooks/index.ts +2 -0
- package/src/hooks/use-scroll-to-selected.ts +28 -0
- package/src/hooks/use-scroll-top.ts +26 -0
- package/src/index.ts +1 -0
package/dist/index.js.map
CHANGED
|
@@ -1 +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/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';\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 { 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","import_react"]}
|
|
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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -157,23 +157,18 @@ import { Infotip, MenuItem, MenuItemText } from "@elementor/ui";
|
|
|
157
157
|
// src/components/info-alert.tsx
|
|
158
158
|
import * as React5 from "react";
|
|
159
159
|
import { InfoCircleFilledIcon } from "@elementor/icons";
|
|
160
|
-
import { Alert
|
|
161
|
-
var InfoAlert = (
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
{
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
elevation: 0
|
|
173
|
-
},
|
|
174
|
-
/* @__PURE__ */ React5.createElement(Stack, null, /* @__PURE__ */ React5.createElement(Typography2, { variant: "caption", color: "text.primary" }, content))
|
|
175
|
-
);
|
|
176
|
-
};
|
|
160
|
+
import { Alert } from "@elementor/ui";
|
|
161
|
+
var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
|
|
162
|
+
Alert,
|
|
163
|
+
{
|
|
164
|
+
icon: /* @__PURE__ */ React5.createElement(InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
|
|
165
|
+
variant: "standard",
|
|
166
|
+
color: "secondary",
|
|
167
|
+
elevation: 0,
|
|
168
|
+
size: "small",
|
|
169
|
+
...props
|
|
170
|
+
}
|
|
171
|
+
);
|
|
177
172
|
|
|
178
173
|
// src/components/menu-item.tsx
|
|
179
174
|
var MenuListItem = ({ children, ...props }) => {
|
|
@@ -208,7 +203,7 @@ var MenuItemInfotip = forwardRef4(
|
|
|
208
203
|
ref,
|
|
209
204
|
placement: "right",
|
|
210
205
|
arrow: false,
|
|
211
|
-
content: /* @__PURE__ */ React6.createElement(InfoAlert, {
|
|
206
|
+
content: /* @__PURE__ */ React6.createElement(InfoAlert, { sx: { maxWidth: 325 } }, content)
|
|
212
207
|
},
|
|
213
208
|
/* @__PURE__ */ React6.createElement("div", { style: { pointerEvents: "initial", width: "100%" }, onClick: (e) => e.stopPropagation() }, children)
|
|
214
209
|
);
|
|
@@ -217,15 +212,15 @@ var MenuItemInfotip = forwardRef4(
|
|
|
217
212
|
|
|
218
213
|
// src/components/infotip-card.tsx
|
|
219
214
|
import * as React7 from "react";
|
|
220
|
-
import { Box as Box3, Button as Button2, Card, CardActions, CardContent, SvgIcon, Typography as
|
|
215
|
+
import { Box as Box3, Button as Button2, Card, CardActions, CardContent, SvgIcon, Typography as Typography2 } from "@elementor/ui";
|
|
221
216
|
var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
|
|
222
|
-
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(
|
|
217
|
+
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)));
|
|
223
218
|
};
|
|
224
219
|
|
|
225
220
|
// src/components/warning-infotip.tsx
|
|
226
221
|
import { forwardRef as forwardRef5 } from "react";
|
|
227
222
|
import * as React8 from "react";
|
|
228
|
-
import { Alert as Alert2, AlertTitle, Infotip as Infotip2
|
|
223
|
+
import { Alert as Alert2, AlertTitle, Infotip as Infotip2 } from "@elementor/ui";
|
|
229
224
|
var WarningInfotip = forwardRef5(
|
|
230
225
|
({ children, open, title, text, placement, width, offset }, ref) => {
|
|
231
226
|
return /* @__PURE__ */ React8.createElement(
|
|
@@ -242,30 +237,254 @@ var WarningInfotip = forwardRef5(
|
|
|
242
237
|
modifiers: offset ? [{ name: "offset", options: { offset } }] : []
|
|
243
238
|
},
|
|
244
239
|
arrow: false,
|
|
245
|
-
content: /* @__PURE__ */ React8.createElement(
|
|
246
|
-
Alert2,
|
|
247
|
-
{
|
|
248
|
-
color: "error",
|
|
249
|
-
severity: "warning",
|
|
250
|
-
variant: "standard",
|
|
251
|
-
sx: (theme) => ({
|
|
252
|
-
".MuiAlert-icon": { fontSize: "1.25rem", marginRight: theme.spacing(0.5) }
|
|
253
|
-
})
|
|
254
|
-
},
|
|
255
|
-
title ? /* @__PURE__ */ React8.createElement(AlertTitle, null, title) : null,
|
|
256
|
-
/* @__PURE__ */ React8.createElement(Typography4, { variant: "caption", sx: { color: "text.primary" } }, text)
|
|
257
|
-
)
|
|
240
|
+
content: /* @__PURE__ */ React8.createElement(Alert2, { color: "error", severity: "warning", variant: "standard", size: "small" }, title ? /* @__PURE__ */ React8.createElement(AlertTitle, null, title) : null, text)
|
|
258
241
|
},
|
|
259
242
|
children
|
|
260
243
|
);
|
|
261
244
|
}
|
|
262
245
|
);
|
|
263
246
|
|
|
247
|
+
// src/components/popover/header.tsx
|
|
248
|
+
import * as React9 from "react";
|
|
249
|
+
import { CloseButton, Stack, Typography as Typography3 } from "@elementor/ui";
|
|
250
|
+
var SIZE = "tiny";
|
|
251
|
+
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 })));
|
|
252
|
+
|
|
253
|
+
// src/components/popover/menu-list.tsx
|
|
254
|
+
import * as React11 from "react";
|
|
255
|
+
import { useMemo, useRef } from "react";
|
|
256
|
+
import { MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
|
|
257
|
+
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
258
|
+
|
|
259
|
+
// src/hooks/use-scroll-to-selected.ts
|
|
260
|
+
import { useEffect as useEffect3 } from "react";
|
|
261
|
+
var useScrollToSelected = ({
|
|
262
|
+
selectedValue,
|
|
263
|
+
items,
|
|
264
|
+
virtualizer
|
|
265
|
+
}) => {
|
|
266
|
+
useEffect3(() => {
|
|
267
|
+
if (!selectedValue || items.length === 0) {
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
const selectedIndex = items.findIndex((item) => item.value === selectedValue);
|
|
271
|
+
if (selectedIndex !== -1) {
|
|
272
|
+
virtualizer.scrollToIndex(selectedIndex, { align: "center" });
|
|
273
|
+
}
|
|
274
|
+
}, [selectedValue, items, virtualizer]);
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
// src/hooks/use-scroll-top.ts
|
|
278
|
+
import { useEffect as useEffect4, useState as useState4 } from "react";
|
|
279
|
+
var useScrollTop = ({ containerRef }) => {
|
|
280
|
+
const [scrollTop, setScrollTop] = useState4(0);
|
|
281
|
+
useEffect4(() => {
|
|
282
|
+
const container = containerRef.current;
|
|
283
|
+
if (!container) {
|
|
284
|
+
return;
|
|
285
|
+
}
|
|
286
|
+
const handleScroll = () => {
|
|
287
|
+
setScrollTop(container.scrollTop);
|
|
288
|
+
};
|
|
289
|
+
container.addEventListener("scroll", handleScroll);
|
|
290
|
+
return () => container.removeEventListener("scroll", handleScroll);
|
|
291
|
+
}, [containerRef]);
|
|
292
|
+
return scrollTop;
|
|
293
|
+
};
|
|
294
|
+
|
|
295
|
+
// src/components/popover/scrollable-content.tsx
|
|
296
|
+
import * as React10 from "react";
|
|
297
|
+
import { Box as Box4 } from "@elementor/ui";
|
|
298
|
+
var PopoverScrollableContent = React10.forwardRef(
|
|
299
|
+
({ children, height = 260 }, ref) => {
|
|
300
|
+
return /* @__PURE__ */ React10.createElement(Box4, { ref, sx: { overflowY: "auto", height, width: 220 } }, children);
|
|
301
|
+
}
|
|
302
|
+
);
|
|
303
|
+
|
|
304
|
+
// src/components/popover/menu-list.tsx
|
|
305
|
+
var ITEM_HEIGHT = 32;
|
|
306
|
+
var LIST_ITEMS_BUFFER = 6;
|
|
307
|
+
var MENU_LIST_PADDING_TOP = 8;
|
|
308
|
+
var menuSubHeaderAbsoluteStyling = (start) => ({
|
|
309
|
+
position: "absolute",
|
|
310
|
+
transform: `translateY(${start + MENU_LIST_PADDING_TOP}px)`
|
|
311
|
+
});
|
|
312
|
+
var PopoverMenuList = ({
|
|
313
|
+
items,
|
|
314
|
+
onSelect,
|
|
315
|
+
onClose,
|
|
316
|
+
selectedValue,
|
|
317
|
+
itemStyle,
|
|
318
|
+
onChange,
|
|
319
|
+
"data-testid": dataTestId,
|
|
320
|
+
menuItemContentTemplate,
|
|
321
|
+
noResultsComponent,
|
|
322
|
+
menuListTemplate: CustomMenuList
|
|
323
|
+
}) => {
|
|
324
|
+
const containerRef = useRef(null);
|
|
325
|
+
const scrollTop = useScrollTop({ containerRef });
|
|
326
|
+
const MenuListComponent = CustomMenuList || StyledMenuList;
|
|
327
|
+
const stickyIndices = useMemo(
|
|
328
|
+
() => items.reduce((categoryIndices, item, index) => {
|
|
329
|
+
if (item.type === "category") {
|
|
330
|
+
categoryIndices.push(index);
|
|
331
|
+
}
|
|
332
|
+
return categoryIndices;
|
|
333
|
+
}, []),
|
|
334
|
+
[items]
|
|
335
|
+
);
|
|
336
|
+
const getActiveItemIndices = (range) => {
|
|
337
|
+
const visibleAndStickyIndexes = [];
|
|
338
|
+
for (let i = range.startIndex; i <= range.endIndex; i++) {
|
|
339
|
+
visibleAndStickyIndexes.push(i);
|
|
340
|
+
}
|
|
341
|
+
stickyIndices.forEach((stickyIndex) => {
|
|
342
|
+
if (!visibleAndStickyIndexes.includes(stickyIndex)) {
|
|
343
|
+
visibleAndStickyIndexes.push(stickyIndex);
|
|
344
|
+
}
|
|
345
|
+
});
|
|
346
|
+
return visibleAndStickyIndexes.sort((a, b) => a - b);
|
|
347
|
+
};
|
|
348
|
+
const virtualizer = useVirtualizer({
|
|
349
|
+
count: items.length,
|
|
350
|
+
getScrollElement: () => containerRef.current,
|
|
351
|
+
estimateSize: () => ITEM_HEIGHT,
|
|
352
|
+
overscan: LIST_ITEMS_BUFFER,
|
|
353
|
+
rangeExtractor: getActiveItemIndices,
|
|
354
|
+
onChange
|
|
355
|
+
});
|
|
356
|
+
useScrollToSelected({ selectedValue, items, virtualizer });
|
|
357
|
+
return /* @__PURE__ */ React11.createElement(PopoverScrollableContent, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
|
|
358
|
+
MenuListComponent,
|
|
359
|
+
{
|
|
360
|
+
role: "listbox",
|
|
361
|
+
style: { height: `${virtualizer.getTotalSize()}px` },
|
|
362
|
+
"data-testid": dataTestId
|
|
363
|
+
},
|
|
364
|
+
virtualizer.getVirtualItems().map((virtualRow) => {
|
|
365
|
+
const item = items[virtualRow.index];
|
|
366
|
+
const isLast = virtualRow.index === items.length - 1;
|
|
367
|
+
const isFirst = items[0]?.type === "category" ? virtualRow.index === 1 : virtualRow.index === 0;
|
|
368
|
+
const isSelected = selectedValue === item.value;
|
|
369
|
+
const tabIndexFallback = !selectedValue ? 0 : -1;
|
|
370
|
+
if (!item) {
|
|
371
|
+
return null;
|
|
372
|
+
}
|
|
373
|
+
if (item.type === "category") {
|
|
374
|
+
const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
|
|
375
|
+
return /* @__PURE__ */ React11.createElement(
|
|
376
|
+
MenuSubheader,
|
|
377
|
+
{
|
|
378
|
+
key: virtualRow.key,
|
|
379
|
+
style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start)
|
|
380
|
+
},
|
|
381
|
+
item.label || item.value
|
|
382
|
+
);
|
|
383
|
+
}
|
|
384
|
+
return /* @__PURE__ */ React11.createElement(
|
|
385
|
+
"li",
|
|
386
|
+
{
|
|
387
|
+
key: virtualRow.key,
|
|
388
|
+
role: "option",
|
|
389
|
+
"aria-selected": isSelected,
|
|
390
|
+
onClick: (e) => {
|
|
391
|
+
if (e.target.closest("button")) {
|
|
392
|
+
return;
|
|
393
|
+
}
|
|
394
|
+
onSelect(item.value);
|
|
395
|
+
onClose();
|
|
396
|
+
},
|
|
397
|
+
onKeyDown: (event) => {
|
|
398
|
+
if (event.key === "Enter") {
|
|
399
|
+
onSelect(item.value);
|
|
400
|
+
onClose();
|
|
401
|
+
}
|
|
402
|
+
if (event.key === "ArrowDown" && isLast) {
|
|
403
|
+
event.preventDefault();
|
|
404
|
+
event.stopPropagation();
|
|
405
|
+
}
|
|
406
|
+
if (event.key === "ArrowUp" && isFirst) {
|
|
407
|
+
event.preventDefault();
|
|
408
|
+
event.stopPropagation();
|
|
409
|
+
}
|
|
410
|
+
},
|
|
411
|
+
tabIndex: isSelected ? 0 : tabIndexFallback,
|
|
412
|
+
style: {
|
|
413
|
+
transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
|
|
414
|
+
...itemStyle ? itemStyle(item) : {}
|
|
415
|
+
}
|
|
416
|
+
},
|
|
417
|
+
menuItemContentTemplate ? menuItemContentTemplate(item) : item.label || item.value
|
|
418
|
+
);
|
|
419
|
+
})
|
|
420
|
+
));
|
|
421
|
+
};
|
|
422
|
+
var StyledMenuList = styled2(MenuList)(({ theme }) => ({
|
|
423
|
+
"& > li": {
|
|
424
|
+
height: ITEM_HEIGHT,
|
|
425
|
+
width: "100%",
|
|
426
|
+
display: "flex",
|
|
427
|
+
alignItems: "center"
|
|
428
|
+
},
|
|
429
|
+
'& > [role="option"]': {
|
|
430
|
+
...theme.typography.caption,
|
|
431
|
+
lineHeight: "inherit",
|
|
432
|
+
padding: theme.spacing(0.75, 2, 0.75, 4),
|
|
433
|
+
"&:hover, &:focus": {
|
|
434
|
+
backgroundColor: theme.palette.action.hover
|
|
435
|
+
},
|
|
436
|
+
'&[aria-selected="true"]': {
|
|
437
|
+
backgroundColor: theme.palette.action.selected
|
|
438
|
+
},
|
|
439
|
+
cursor: "pointer",
|
|
440
|
+
textOverflow: "ellipsis",
|
|
441
|
+
position: "absolute",
|
|
442
|
+
top: 0,
|
|
443
|
+
left: 0
|
|
444
|
+
},
|
|
445
|
+
width: "100%",
|
|
446
|
+
position: "relative"
|
|
447
|
+
}));
|
|
448
|
+
|
|
449
|
+
// src/components/popover/search.tsx
|
|
450
|
+
import * as React12 from "react";
|
|
451
|
+
import { useRef as useRef2 } from "react";
|
|
452
|
+
import { SearchIcon, XIcon } from "@elementor/icons";
|
|
453
|
+
import { Box as Box5, IconButton, InputAdornment, TextField } from "@elementor/ui";
|
|
454
|
+
import { __ as __2 } from "@wordpress/i18n";
|
|
455
|
+
var SIZE2 = "tiny";
|
|
456
|
+
var PopoverSearch = ({ value, onSearch, placeholder }) => {
|
|
457
|
+
const inputRef = useRef2(null);
|
|
458
|
+
const handleClear = () => {
|
|
459
|
+
onSearch("");
|
|
460
|
+
inputRef.current?.focus();
|
|
461
|
+
};
|
|
462
|
+
const handleInputChange = (event) => {
|
|
463
|
+
onSearch(event.target.value);
|
|
464
|
+
};
|
|
465
|
+
return /* @__PURE__ */ React12.createElement(Box5, { px: 1.5, pb: 1 }, /* @__PURE__ */ React12.createElement(
|
|
466
|
+
TextField,
|
|
467
|
+
{
|
|
468
|
+
autoFocus: true,
|
|
469
|
+
fullWidth: true,
|
|
470
|
+
size: SIZE2,
|
|
471
|
+
value,
|
|
472
|
+
inputRef,
|
|
473
|
+
onChange: handleInputChange,
|
|
474
|
+
placeholder,
|
|
475
|
+
InputProps: {
|
|
476
|
+
startAdornment: /* @__PURE__ */ React12.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React12.createElement(SearchIcon, { fontSize: SIZE2 })),
|
|
477
|
+
endAdornment: value && /* @__PURE__ */ React12.createElement(IconButton, { size: SIZE2, onClick: handleClear, "aria-label": __2("Clear", "elementor") }, /* @__PURE__ */ React12.createElement(XIcon, { color: "action", fontSize: SIZE2 }))
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
));
|
|
481
|
+
};
|
|
482
|
+
|
|
264
483
|
// src/hooks/use-editable.ts
|
|
265
|
-
import { useEffect as
|
|
484
|
+
import { useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
|
|
266
485
|
var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
|
|
267
|
-
const [isEditing, setIsEditing] =
|
|
268
|
-
const [error, setError] =
|
|
486
|
+
const [isEditing, setIsEditing] = useState5(false);
|
|
487
|
+
const [error, setError] = useState5(null);
|
|
269
488
|
const ref = useSelection(isEditing);
|
|
270
489
|
const isDirty = (newValue) => newValue !== value;
|
|
271
490
|
const openEditMode = () => {
|
|
@@ -338,8 +557,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
|
|
|
338
557
|
};
|
|
339
558
|
};
|
|
340
559
|
var useSelection = (isEditing) => {
|
|
341
|
-
const ref =
|
|
342
|
-
|
|
560
|
+
const ref = useRef3(null);
|
|
561
|
+
useEffect5(() => {
|
|
343
562
|
if (isEditing) {
|
|
344
563
|
selectAll(ref.current);
|
|
345
564
|
}
|
|
@@ -364,6 +583,11 @@ export {
|
|
|
364
583
|
IntroductionModal,
|
|
365
584
|
MenuItemInfotip,
|
|
366
585
|
MenuListItem,
|
|
586
|
+
PopoverHeader,
|
|
587
|
+
PopoverMenuList,
|
|
588
|
+
PopoverScrollableContent,
|
|
589
|
+
PopoverSearch,
|
|
590
|
+
StyledMenuList,
|
|
367
591
|
ThemeProvider,
|
|
368
592
|
WarningInfotip,
|
|
369
593
|
useEditable
|