@elementor/editor-controls 3.33.0-99 → 3.35.0-325

package/src/components/{unstable-repeater → control-repeater}/items/items-container.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
 
-import { SortableItem, SortableProvider } from '../../sortable';
+import { SortableItem, SortableProvider } from '../../repeater/sortable';
+import { ItemContext } from '../context/item-context';
 import { useRepeaterContext } from '../context/repeater-context';
-import { type Item, type ItemProps, type RepeatablePropValue } from '../types';
+import { type Item, type RepeatablePropValue } from '../types';
 
 export const ItemsContainer = < T extends RepeatablePropValue >( {
-	itemTemplate,
 	isSortable = true,
 	children,
-}: React.PropsWithChildren< { itemTemplate: React.ReactNode; isSortable?: boolean } > ) => {
+}: React.PropsWithChildren< {
+	isSortable?: boolean;
+} > ) => {
 	const { items, setItems } = useRepeaterContext();
 	const keys = items.map( ( { key } ) => key );
 
-	if ( ! itemTemplate ) {
+	if ( ! children ) {
 		return null;
 	}
 
@@ -34,14 +36,7 @@ export const ItemsContainer = < T extends RepeatablePropValue >( {
 
 					return (
 						<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ ! isSortable }>
-							{ React.isValidElement< React.PropsWithChildren< ItemProps< T > > >( itemTemplate )
-								? React.cloneElement( itemTemplate, {
-										key,
-										value,
-										index,
-										children,
-								  } )
-								: null }
+							<ItemContext.Provider value={ { index, value } }>{ children }</ItemContext.Provider>
 						</SortableItem>
 					);
 				} ) }

package/src/components/{unstable-repeater → control-repeater}/locations.ts

@@ -10,10 +10,6 @@ export const { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel
 	value: PropValue;
 } >();
 
-export const { Slot: RepeaterHeaderActionsSlot, inject: injectIntoRepeaterHeaderActions } = createLocation< {
-	value: PropValue;
-} >();
-
 export const { Slot: RepeaterItemActionsSlot, inject: injectIntoRepeaterItemActions } = createLocation< {
 	index: number;
 } >();

package/src/components/{unstable-repeater → control-repeater}/types.ts

@@ -11,6 +11,5 @@ export type RepeatablePropValue = TransformablePropValue< PropKey, PropValue >;
 export type ItemProps< T > = {
 	Label: React.ComponentType< { value: T } >;
 	Icon: React.ComponentType< { value: T } >;
-	value?: Item< T >;
-	index?: number;
+	actions?: React.ReactNode;
 };

package/src/components/control-toggle-button-group.tsx

@@ -80,76 +80,79 @@ type Props< TValue > = {
 			onChange: ( value: ExclusiveValue< TValue > ) => void;
 	  }
 );
-
-export const ControlToggleButtonGroup = < TValue, >( {
-	justify = 'end',
-	size = 'tiny',
-	value,
-	onChange,
-	items,
-	maxItems,
-	exclusive = false,
-	fullWidth = false,
-	disabled,
-	placeholder,
-}: Props< TValue > ) => {
-	const shouldSliceItems = exclusive && maxItems !== undefined && items.length > maxItems;
-	const menuItems = shouldSliceItems ? items.slice( maxItems - 1 ) : [];
-	const fixedItems = shouldSliceItems ? items.slice( 0, maxItems - 1 ) : items;
-
-	const theme = useTheme();
-	const isRtl = 'rtl' === theme.direction;
-
-	const handleChange = (
-		_: React.MouseEvent< HTMLElement >,
-		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
+export const ToggleButtonGroupUi = React.forwardRef(
+	< TValue, >(
+		{
+			justify = 'end',
+			size = 'tiny',
+			value,
+			onChange,
+			items,
+			maxItems,
+			exclusive = false,
+			fullWidth = false,
+			disabled,
+			placeholder,
+		}: Props< TValue >,
+		ref: React.Ref< HTMLDivElement >
 	) => {
-		onChange( newValue as never );
-	};
-
-	const getGridTemplateColumns = useMemo( () => {
-		const isOffLimits = menuItems?.length;
-		const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
-		const templateColumnsSuffix = isOffLimits ? 'auto' : '';
-		return `repeat(${ itemsCount }, minmax(0, 25%)) ${ templateColumnsSuffix }`;
-	}, [ menuItems?.length, fixedItems.length ] );
-
-	const shouldShowExclusivePlaceholder = exclusive && ( value === null || value === undefined || value === '' );
-
-	const nonExclusiveSelectedValues =
-		! exclusive && Array.isArray( value )
-			? value
-					.map( ( v ) => ( typeof v === 'string' ? v : '' ) )
-					.join( ' ' )
-					.trim()
-					.split( /\s+/ )
-					.filter( Boolean )
-			: [];
-
-	const shouldShowNonExclusivePlaceholder = ! exclusive && nonExclusiveSelectedValues.length === 0;
-
-	const getPlaceholderArray = ( placeholderValue: TValue | TValue[] | undefined ): string[] => {
-		if ( Array.isArray( placeholderValue ) ) {
-			return placeholderValue.flatMap( ( p ) => {
-				if ( typeof p === 'string' ) {
-					return p.trim().split( /\s+/ ).filter( Boolean );
-				}
-				return [];
-			} );
-		}
-
-		if ( typeof placeholderValue === 'string' ) {
-			return placeholderValue.trim().split( /\s+/ ).filter( Boolean );
-		}
-
-		return [];
-	};
-
-	const placeholderArray = getPlaceholderArray( placeholder );
-
-	return (
-		<ControlActions>
+		const shouldSliceItems = exclusive && maxItems !== undefined && items.length > maxItems;
+		const menuItems = shouldSliceItems ? items.slice( maxItems - 1 ) : [];
+		const fixedItems = shouldSliceItems ? items.slice( 0, maxItems - 1 ) : items;
+
+		const theme = useTheme();
+		const isRtl = 'rtl' === theme.direction;
+
+		const handleChange = (
+			_: React.MouseEvent< HTMLElement >,
+			newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
+		) => {
+			onChange( newValue as never );
+		};
+
+		const getGridTemplateColumns = useMemo( () => {
+			const isOffLimits = menuItems?.length;
+			const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
+			const templateColumnsSuffix = isOffLimits ? 'auto' : '';
+			return `repeat(${ itemsCount }, minmax(0, 25%)) ${ templateColumnsSuffix }`;
+		}, [ menuItems?.length, fixedItems.length ] );
+
+		const shouldShowExclusivePlaceholder = exclusive && ( value === null || value === undefined || value === '' );
+
+		const nonExclusiveSelectedValues =
+			! exclusive && Array.isArray( value )
+				? value
+						.map( ( v ) => ( typeof v === 'string' ? v : '' ) )
+						.join( ' ' )
+						.trim()
+						.split( /\s+/ )
+						.filter( Boolean )
+				: [];
+
+		const shouldShowNonExclusivePlaceholder = ! exclusive && nonExclusiveSelectedValues.length === 0;
+
+		const getPlaceholderArray = ( placeholderValue: TValue | TValue[] | undefined ): string[] => {
+			if ( Array.isArray( placeholderValue ) ) {
+				return placeholderValue.flatMap( ( p ) => {
+					if ( typeof p === 'string' ) {
+						return p.trim().split( /\s+/ ).filter( Boolean );
+					}
+					return [];
+				} );
+			}
+
+			if ( typeof placeholderValue === 'string' ) {
+				return placeholderValue.trim().split( /\s+/ ).filter( Boolean );
+			}
+
+			return [];
+		};
+
+		const placeholderArray = getPlaceholderArray( placeholder );
+
+		return (
 			<StyledToggleButtonGroup
+				ref={ ref }
 				justify={ justify }
 				value={ value }
 				onChange={ handleChange }
@@ -197,6 +200,14 @@ export const ControlToggleButtonGroup = < TValue, >( {
 					/>
 				) }
 			</StyledToggleButtonGroup>
+		);
+	}
+) as < TValue >( props: Props< TValue > & { ref?: React.Ref< HTMLDivElement > } ) => React.ReactElement;
+
+export const ControlToggleButtonGroup = < TValue, >( props: Props< TValue > ) => {
+	return (
+		<ControlActions>
+			<ToggleButtonGroupUi { ...props } />
 		</ControlActions>
 	);
 };
@@ -247,7 +258,6 @@ const SplitButtonGroup = < TValue, >( {
 					ev.preventDefault();
 					onMenuItemClick( previewButton.value );
 				} }
-				ref={ menuButtonRef }
 			>
 				{ previewButton.renderContent( { size } ) }
 			</ToggleButton>

package/src/components/enable-unfiltered-modal.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
 import {
 	Button,
 	CircularProgress,
@@ -34,11 +33,6 @@ const ADMIN_CONTENT_TEXT = __(
 	'Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.',
 	'elementor'
 );
-const NON_ADMIN_TITLE_TEXT = __( "Sorry, you can't upload that file yet", 'elementor' );
-const NON_ADMIN_CONTENT_TEXT = __(
-	'This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.',
-	'elementor'
-);
 
 const ADMIN_FAILED_CONTENT_TEXT_PT1 = __( 'Failed to enable unfiltered files upload.', 'elementor' );
 
@@ -51,9 +45,7 @@ const WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 
 export const EnableUnfilteredModal = ( props: EnableUnfilteredModalProps ) => {
 	const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
-	const { canUser } = useCurrentUserCapabilities();
 	const [ isError, setIsError ] = useState( false );
-	const canManageOptions = canUser( 'manage_options' );
 
 	const onClose = ( enabled: boolean ) => {
 		props.onClose( enabled );
@@ -75,7 +67,7 @@ export const EnableUnfilteredModal = ( props: EnableUnfilteredModalProps ) => {
 
 	const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
 
-	return canManageOptions ? <AdminDialog { ...dialogProps } /> : <NonAdminDialog { ...dialogProps } />;
+	return <AdminDialog { ...dialogProps } />;
 };
 
 const AdminDialog = ( { open, onClose, handleEnable, isPending, isError }: LocalModalProps ) => (
@@ -111,20 +103,3 @@ const AdminDialog = ( { open, onClose, handleEnable, isPending, isError }: Local
 		</DialogActions>
 	</Dialog>
 );
-
-const NonAdminDialog = ( { open, onClose }: LocalModalProps ) => (
-	<Dialog open={ open } maxWidth={ 'sm' } onClose={ () => onClose( false ) }>
-		<DialogHeader logo={ false }>
-			<DialogTitle>{ NON_ADMIN_TITLE_TEXT }</DialogTitle>
-		</DialogHeader>
-		<Divider />
-		<DialogContent>
-			<DialogContentText>{ NON_ADMIN_CONTENT_TEXT }</DialogContentText>
-		</DialogContent>
-		<DialogActions>
-			<Button size={ 'medium' } onClick={ () => onClose( false ) } variant="contained" color="primary">
-				{ __( 'Got it', 'elementor' ) }
-			</Button>
-		</DialogActions>
-	</Dialog>
-);

package/src/components/icon-buttons/clear-icon-button.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { BrushBigIcon } from '@elementor/icons';
+import { IconButton, styled, Tooltip } from '@elementor/ui';
+
+type ClearIconButtonProps = {
+	onClick?: () => void;
+	tooltipText: React.ReactNode;
+	disabled?: boolean;
+	size?: 'tiny' | 'small' | 'medium' | 'large';
+};
+
+const CustomIconButton = styled( IconButton )( ( { theme } ) => ( {
+	width: theme.spacing( 2.5 ),
+	height: theme.spacing( 2.5 ),
+} ) );
+
+export const ClearIconButton = ( { tooltipText, onClick, disabled, size = 'tiny' }: ClearIconButtonProps ) => (
+	<Tooltip title={ tooltipText } placement="top" disableInteractive>
+		<CustomIconButton aria-label={ tooltipText } size={ size } onClick={ onClick } disabled={ disabled }>
+			<BrushBigIcon fontSize={ size } />
+		</CustomIconButton>
+	</Tooltip>
+);

package/src/components/inline-editor-toolbar.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import {
+	BoldIcon,
+	ItalicIcon,
+	MinusIcon,
+	StrikethroughIcon,
+	SubscriptIcon,
+	SuperscriptIcon,
+	UnderlineIcon,
+} from '@elementor/icons';
+import { Box, IconButton, ToggleButton, ToggleButtonGroup, Tooltip } from '@elementor/ui';
+import { type Editor, useEditorState } from '@tiptap/react';
+import { __ } from '@wordpress/i18n';
+
+type InlineEditorToolbarProps = {
+	editor: Editor;
+};
+
+const toolbarButtons = {
+	clear: {
+		label: __( 'Clear', 'elementor' ),
+		icon: <MinusIcon fontSize="tiny" />,
+		action: 'clear',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().clearNodes().unsetAllMarks().run();
+		},
+	},
+	bold: {
+		label: __( 'Bold', 'elementor' ),
+		icon: <BoldIcon fontSize="tiny" />,
+		action: 'bold',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleBold().run();
+		},
+	},
+	italic: {
+		label: __( 'Italic', 'elementor' ),
+		icon: <ItalicIcon fontSize="tiny" />,
+		action: 'italic',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleItalic().run();
+		},
+	},
+	underline: {
+		label: __( 'Underline', 'elementor' ),
+		icon: <UnderlineIcon fontSize="tiny" />,
+		action: 'underline',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleUnderline().run();
+		},
+	},
+	strike: {
+		label: __( 'Strikethrough', 'elementor' ),
+		icon: <StrikethroughIcon fontSize="tiny" />,
+		action: 'strike',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleStrike().run();
+		},
+	},
+	superscript: {
+		label: __( 'Superscript', 'elementor' ),
+		icon: <SuperscriptIcon fontSize="tiny" />,
+		action: 'superscript',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleSuperscript().run();
+		},
+	},
+	subscript: {
+		label: __( 'Subscript', 'elementor' ),
+		icon: <SubscriptIcon fontSize="tiny" />,
+		action: 'subscript',
+		method: ( editor: Editor ) => {
+			editor.chain().focus().toggleSubscript().run();
+		},
+	},
+} as const;
+
+type ToolbarButtonKeys = keyof typeof toolbarButtons;
+
+type FormatAction = Omit< ToolbarButtonKeys, 'clear' >;
+
+const { clear: clearButton, ...formatButtons } = toolbarButtons;
+
+const possibleFormats: FormatAction[] = Object.keys( formatButtons ) as FormatAction[];
+
+export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
+	const editorState = useEditorState( {
+		editor,
+		selector: ( ctx ) => possibleFormats.filter( ( format ) => ctx.editor.isActive( format ) ),
+	} );
+
+	const formatButtonsList = useMemo( () => Object.values( formatButtons ), [] );
+
+	return (
+		<Box
+			sx={ {
+				position: 'absolute',
+				top: -40,
+				display: 'inline-flex',
+				gap: 0.5,
+				padding: 0.5,
+				borderRadius: 1,
+				backgroundColor: 'background.paper',
+				boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+				alignItems: 'center',
+			} }
+		>
+			<Tooltip title={ clearButton.label } placement="top">
+				<IconButton aria-label={ clearButton.label } onClick={ () => clearButton.method( editor ) } size="tiny">
+					{ clearButton.icon }
+				</IconButton>
+			</Tooltip>
+			<ToggleButtonGroup
+				value={ editorState }
+				size="tiny"
+				sx={ {
+					display: 'flex',
+					gap: 0.5,
+				} }
+			>
+				{ formatButtonsList.map( ( button ) => (
+					<Tooltip title={ button.label } key={ button.action } placement="top">
+						<ToggleButton
+							value={ button.action }
+							aria-label={ button.label }
+							size="tiny"
+							onClick={ () => button.method( editor ) }
+						>
+							{ button.icon }
+						</ToggleButton>
+					</Tooltip>
+				) ) }
+			</ToggleButtonGroup>
+		</Box>
+	);
+};

package/src/components/inline-editor.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { type DependencyList, type ForwardedRef, useEffect, useRef } from 'react';
+import { Box, type SxProps, type Theme } from '@elementor/ui';
+import Bold from '@tiptap/extension-bold';
+import Document from '@tiptap/extension-document';
+import HardBreak from '@tiptap/extension-hard-break';
+import Italic from '@tiptap/extension-italic';
+import Strike from '@tiptap/extension-strike';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import Text from '@tiptap/extension-text';
+import Underline from '@tiptap/extension-underline';
+import { type AnyExtension, EditorContent, useEditor } from '@tiptap/react';
+
+import { InlineEditorToolbar } from './inline-editor-toolbar';
+
+type InlineEditorProps = {
+	value: string;
+	setValue: ( value: string ) => void;
+	attributes?: Record< string, string >;
+	sx?: SxProps< Theme >;
+	showToolbar?: boolean;
+};
+
+const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
+	const hasMounted = useRef( false );
+
+	useEffect( () => {
+		if ( hasMounted.current ) {
+			callback();
+		} else {
+			hasMounted.current = true;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, dependencies );
+};
+
+export const InlineEditor = React.forwardRef(
+	(
+		{ value, setValue, attributes = {}, showToolbar = false, sx }: InlineEditorProps,
+		ref: ForwardedRef< HTMLDivElement >
+	) => {
+		const editor = useEditor( {
+			extensions: [
+				Document.extend( {
+					content: 'inline*',
+				} ),
+				Text,
+				Bold,
+				Italic,
+				Strike,
+				Underline,
+				Superscript,
+				Subscript,
+				HardBreak.extend( {
+					addKeyboardShortcuts() {
+						return {
+							Enter: () => this.editor.commands.setHardBreak(),
+						};
+					},
+				} ),
+			] as AnyExtension[],
+			content: value,
+			onUpdate: ( { editor: updatedEditor } ) => setValue( updatedEditor.getHTML() ),
+		} );
+
+		useOnUpdate( () => {
+			if ( ! editor ) {
+				return;
+			}
+
+			const currentContent = editor.getHTML();
+
+			if ( currentContent !== value ) {
+				editor.commands.setContent( value, { emitUpdate: false } );
+			}
+		}, [ editor, value ] );
+
+		return (
+			<Box
+				ref={ ref }
+				sx={ {
+					p: 0.8,
+					border: '1px solid',
+					borderColor: 'grey.200',
+					borderRadius: '8px',
+					transition: 'border-color .2s ease, box-shadow .2s ease',
+					'&:hover': {
+						borderColor: 'black',
+					},
+					'&:focus-within': {
+						borderColor: 'black',
+						boxShadow: '0 0 0 1px black',
+					},
+					'& .ProseMirror:focus': {
+						outline: 'none',
+					},
+					'& .ProseMirror': {
+						minHeight: '70px',
+						fontSize: '12px',
+					},
+					...sx,
+				} }
+				{ ...attributes }
+			>
+				{ showToolbar && <InlineEditorToolbar editor={ editor } /> }
+				<EditorContent editor={ editor } />
+			</Box>
+		);
+	}
+);

package/src/components/item-selector.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
-import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
+import { PopoverBody, PopoverHeader, PopoverMenuList, SearchField } from '@elementor/editor-ui';
 import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
@@ -22,6 +22,8 @@ type ItemSelectorProps = {
 	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
 	onDebounce?: ( name: string ) => void;
 	icon: React.ElementType< { fontSize: string } >;
+	disabledItems?: string[];
+	id?: string;
 };
 
 export const ItemSelector = ( {
@@ -34,10 +36,12 @@ export const ItemSelector = ( {
 	itemStyle = () => ( {} ),
 	onDebounce = () => {},
 	icon,
+	disabledItems,
+	id = 'item-selector',
 }: ItemSelectorProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 
-	const filteredItemsList = useFilteredItemsList( itemsList, searchValue );
+	const filteredItemsList = useFilteredItemsList( itemsList, searchValue, disabledItems );
 
 	const IconComponent = icon;
 
@@ -51,12 +55,13 @@ export const ItemSelector = ( {
 	};
 
 	return (
-		<PopoverBody width={ sectionWidth }>
+		<PopoverBody width={ sectionWidth } id={ id }>
 			<PopoverHeader title={ title } onClose={ handleClose } icon={ <IconComponent fontSize="tiny" /> } />
-			<PopoverSearch
+			<SearchField
 				value={ searchValue }
 				onSearch={ handleSearch }
 				placeholder={ __( 'Search', 'elementor' ) }
+				id={ id + '-search' }
 			/>
 
 			<Divider />
@@ -128,6 +133,7 @@ type ItemListProps = {
 	selectedItem: string | null;
 	itemStyle?: ( item: SelectableItem ) => React.CSSProperties;
 	onDebounce?: ( name: string ) => void;
+	disabledItems?: string[];
 };
 
 const ItemList = ( {

package/src/components/{unstable-repeater/header/header.tsx → repeater/repeater-header.tsx}

@@ -1,13 +1,10 @@
 import * as React from 'react';
+import { forwardRef } from 'react';
 import { Box, Stack, Typography } from '@elementor/ui';
 
-import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
-import { ControlAdornments } from '../../../control-adornments/control-adornments';
-import { SlotChildren } from '../../../control-replacements';
-import { TooltipAddItemAction } from '../actions/tooltip-add-item-action';
-import { RepeaterHeaderActionsSlot } from '../locations';
+import { ControlAdornments } from '../../control-adornments/control-adornments';
 
-export const Header = React.forwardRef(
+export const RepeaterHeader = forwardRef(
 	(
 		{
 			label,
@@ -19,8 +16,6 @@ export const Header = React.forwardRef(
 		} >,
 		ref
 	) => {
-		const { value } = useBoundProp();
-
 		return (
 			<Stack
 				direction="row"
@@ -35,10 +30,7 @@ export const Header = React.forwardRef(
 					</Typography>
 					<Adornment />
 				</Box>
-				<RepeaterHeaderActionsSlot value={ value } />
-				<SlotChildren whitelist={ [ TooltipAddItemAction ] as React.FC[] } sorted>
-					{ children }
-				</SlotChildren>
+				{ children }
 			</Stack>
 		);
 	}

package/src/components/repeater/repeater-popover.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Popover, type PopoverProps } from '@elementor/ui';
+
+export const RepeaterPopover = ( { children, width, ...props }: PopoverProps & { width?: number } ) => {
+	return (
+		<Popover
+			disablePortal
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+			slotProps={ {
+				paper: {
+					sx: { marginBlockStart: 0.5, width, overflow: 'visible' },
+				},
+			} }
+			{ ...props }
+		>
+			{ children }
+		</Popover>
+	);
+};