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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.33.0-99",
+  "version": "3.35.0-324",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,37 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.33.0-99",
-    "@elementor/editor-elements": "3.33.0-99",
-    "@elementor/editor-props": "3.33.0-99",
-    "@elementor/editor-responsive": "3.33.0-99",
-    "@elementor/editor-ui": "3.33.0-99",
-    "@elementor/editor-v1-adapters": "3.33.0-99",
-    "@elementor/env": "3.33.0-99",
-    "@elementor/http-client": "3.33.0-99",
-    "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.33.0-99",
-    "@elementor/query": "3.33.0-99",
-    "@elementor/session": "3.33.0-99",
-    "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-99",
-    "@elementor/wp-media": "3.33.0-99",
+    "@elementor/editor-current-user": "3.35.0-324",
+    "@elementor/editor-elements": "3.35.0-324",
+    "@elementor/editor-props": "3.35.0-324",
+    "@elementor/editor-responsive": "3.35.0-324",
+    "@elementor/editor-ui": "3.35.0-324",
+    "@elementor/editor-v1-adapters": "3.35.0-324",
+    "@elementor/env": "3.35.0-324",
+    "@elementor/http-client": "3.35.0-324",
+    "@elementor/icons": "^1.61.1",
+    "@elementor/locations": "3.35.0-324",
+    "@elementor/mixpanel": "3.35.0-324",
+    "@elementor/query": "3.35.0-324",
+    "@elementor/session": "3.35.0-324",
+    "@elementor/ui": "1.36.17",
+    "@elementor/utils": "3.35.0-324",
+    "@elementor/wp-media": "3.35.0-324",
     "@wordpress/i18n": "^5.13.0",
-    "@monaco-editor/react": "^4.7.0"
+    "@monaco-editor/react": "^4.7.0",
+    "dayjs": "^1.11.18",
+    "@tiptap/extension-bold": "^3.11.1",
+    "@tiptap/extension-document": "^3.11.1",
+    "@tiptap/extension-hard-break": "^3.11.1",
+    "@tiptap/extension-italic": "^3.11.1",
+    "@tiptap/extension-strike": "^3.11.1",
+    "@tiptap/extension-subscript": "^3.11.1",
+    "@tiptap/extension-superscript": "^3.11.1",
+    "@tiptap/extension-text": "^3.11.1",
+    "@tiptap/extension-underline": "^3.11.1",
+    "@tiptap/pm": "^3.11.1",
+    "@tiptap/react": "^3.11.1",
+    "@tiptap/starter-kit": "^3.11.1"
   },
   "devDependencies": {
     "monaco-types": "^0.1.0",

package/src/bound-prop-context/prop-context.tsx

@@ -4,9 +4,15 @@ import { type CreateOptions, type PropKey, type PropType, type PropValue } from
 
 import { HookOutsideProviderError } from './errors';
 
-export type SetValueMeta = {
+type Action = {
+	type: string;
+	payload?: object;
+};
+
+export type SetValueMeta< TAction = Action > = {
 	bind?: PropKey;
 	validation?: ( value: PropValue ) => boolean;
+	action?: TAction;
 };
 
 export type SetValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;

package/src/bound-prop-context/use-bound-prop.ts

@@ -19,14 +19,19 @@ type UseBoundProp< TValue extends PropValue > = {
 	placeholder?: TValue;
 	path: PropKey[];
 	restoreValue: () => void;
+	resetValue: () => void;
 	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 
-export function useBoundProp< T extends PropValue = PropValue, P extends PropType = PropType >(): PropKeyContextValue<
-	T,
-	P
->;
+type EnhancedPropKeyContextValue< T, P > = PropKeyContextValue< T, P > & {
+	resetValue: () => void;
+};
+
+export function useBoundProp<
+	T extends PropValue = PropValue,
+	P extends PropType = PropType,
+>(): EnhancedPropKeyContextValue< T, P >;
 
 export function useBoundProp< TKey extends string, TValue extends PropValue >(
 	propTypeUtil: PropTypeUtil< TKey, TValue >
@@ -41,9 +46,17 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 
 	const disabled = propKeyContext.isDisabled?.( propKeyContext.propType );
 
+	const resetValue = () => {
+		propKeyContext.setValue( propKeyContext.propType.initial_value ?? null );
+	};
+
 	// allow using the hook without a propTypeUtil, with no modifications or validations.
 	if ( ! propTypeUtil ) {
-		return { ...propKeyContext, disabled } as PropKeyContextValue< PropValue, PropType >;
+		return {
+			...propKeyContext,
+			disabled,
+			resetValue,
+		} as EnhancedPropKeyContextValue< PropValue, PropType >;
 	}
 
 	function setValue( value: TValue | null, options: CreateOptions, meta?: SetValueMeta ) {
@@ -71,6 +84,7 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 		restoreValue,
 		placeholder,
 		disabled,
+		resetValue,
 	};
 }
 

package/src/components/autocomplete.tsx

@@ -30,6 +30,9 @@ export type Props = {
 	allowCustomValues?: boolean;
 	placeholder?: string;
 	minInputLength?: number;
+	startAdornment?: React.ReactNode;
+	inputProps?: Record< string, unknown >;
+	disablePortal?: boolean;
 };
 
 export const Autocomplete = forwardRef( ( props: Props, ref ) => {
@@ -41,10 +44,12 @@ export const Autocomplete = forwardRef( ( props: Props, ref ) => {
 		placeholder = '',
 		minInputLength = 2,
 		value = '',
+		startAdornment,
+		disablePortal = true,
 		...restProps
 	} = props;
 
-	const optionKeys = _factoryFilter( value, options, minInputLength ).map( ( { id } ) => id );
+	const optionKeys = factoryFilter( value, options, minInputLength ).map( ( { id } ) => id );
 	const allowClear = !! value;
 
 	// Prevents MUI warning when freeSolo/allowCustomValues is false
@@ -54,13 +59,20 @@ export const Autocomplete = forwardRef( ( props: Props, ref ) => {
 
 	const isValueFromOptions = typeof value === 'number' && !! findMatchingOption( options, value );
 
+	const valueLength = value?.toString()?.length ?? 0;
+	const meetsMinLength = valueLength >= minInputLength;
+	const shouldOpen = meetsMinLength && ( allowCustomValues ? optionKeys.length > 0 : true );
+
 	return (
 		<AutocompleteBase
 			{ ...restProps }
 			ref={ ref }
 			forcePopupIcon={ false }
+			disablePortal={ disablePortal }
 			disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
 			freeSolo={ allowCustomValues }
+			openOnFocus={ false }
+			open={ shouldOpen }
 			value={ value?.toString() || '' }
 			size={ 'tiny' }
 			onChange={ ( _, newValue ) => onOptionChange( Number( newValue ) ) }
@@ -87,6 +99,8 @@ export const Autocomplete = forwardRef( ( props: Props, ref ) => {
 					allowClear={ allowClear }
 					placeholder={ placeholder }
 					hasSelectedValue={ isValueFromOptions }
+					startAdornment={ startAdornment }
+					extraInputProps={ restProps.inputProps }
 				/>
 			) }
 		/>
@@ -99,12 +113,16 @@ const TextInput = ( {
 	placeholder,
 	handleChange,
 	hasSelectedValue,
+	startAdornment,
+	extraInputProps,
 }: {
 	params: AutocompleteRenderInputParams;
 	allowClear: boolean;
 	handleChange: ( newValue: string | null ) => void;
 	placeholder: string;
 	hasSelectedValue: boolean;
+	startAdornment?: React.ReactNode;
+	extraInputProps?: Record< string, unknown >;
 } ) => {
 	const onChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		handleChange( event.target.value );
@@ -115,6 +133,7 @@ const TextInput = ( {
 			{ ...params }
 			placeholder={ placeholder }
 			onChange={ onChange }
+			inputProps={ { ...( params.inputProps ?? {} ), ...( extraInputProps ?? {} ) } }
 			sx={ {
 				'& .MuiInputBase-input': {
 					cursor: hasSelectedValue ? 'default' : undefined,
@@ -122,6 +141,11 @@ const TextInput = ( {
 			} }
 			InputProps={ {
 				...params.InputProps,
+				startAdornment: startAdornment ? (
+					<InputAdornment position="start">{ startAdornment }</InputAdornment>
+				) : (
+					params.InputProps.startAdornment
+				),
 				endAdornment: <ClearButton params={ params } allowClear={ allowClear } handleChange={ handleChange } />,
 			} }
 		/>
@@ -156,9 +180,16 @@ export function findMatchingOption(
 }
 
 export function isCategorizedOptionPool( options: FlatOption[] | CategorizedOption[] ): options is CategorizedOption[] {
-	return options.every( ( option ) => 'groupLabel' in option );
+	if ( options.length <= 1 ) {
+		return false;
+	}
+
+	const uniqueGroupLabels = new Set( options.map( ( option ) => option.groupLabel ) );
+
+	return uniqueGroupLabels.size > 1; // should not categorize options if there is only one group
 }
-function _factoryFilter< T extends FlatOption[] | CategorizedOption[] >(
+
+function factoryFilter< T extends FlatOption[] | CategorizedOption[] >(
 	newValue: string | number | null,
 	options: T,
 	minInputLength: number

package/src/components/conditional-control-infotip.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { InfoAlert } from '@elementor/editor-ui';
+import { type AlertProps, AlertTitle, Box, Infotip, type InfotipProps, useTheme } from '@elementor/ui';
+import { DirectionProvider } from '@elementor/ui';
+
+type Props = {
+	infotipProps?: Partial< InfotipProps >;
+	alertProps?: Partial< AlertProps >;
+	title?: string;
+	description?: React.ReactNode | string;
+	isEnabled?: boolean;
+};
+
+const DEFAULT_COLOR = 'secondary';
+
+export const ConditionalControlInfotip = React.forwardRef(
+	( { children, title, description, alertProps, infotipProps, ...props }: React.PropsWithChildren< Props >, ref ) => {
+		const theme = useTheme();
+		const isUiRtl = 'rtl' === theme.direction;
+		const isEnabled = props.isEnabled && ( title || description );
+
+		return (
+			<Box ref={ ref }>
+				{ isEnabled ? (
+					<DirectionProvider rtl={ isUiRtl }>
+						<Infotip
+							placement={ 'right' }
+							color={ DEFAULT_COLOR }
+							slotProps={ {
+								popper: {
+									modifiers: [
+										{
+											name: 'offset',
+											options: {
+												offset: [ 0, 10 ],
+											},
+										},
+									],
+								},
+							} }
+							{ ...infotipProps }
+							content={
+								<InfoAlert
+									color={ DEFAULT_COLOR }
+									sx={ { width: 300, px: 1.5, py: 2 } }
+									{ ...alertProps }
+								>
+									<Box sx={ { flexDirection: 'column', display: 'flex', gap: 0.5 } }>
+										<AlertTitle>{ title }</AlertTitle>
+										<Box>{ description }</Box>
+									</Box>
+								</InfoAlert>
+							}
+						>
+							{ children }
+						</Infotip>
+					</DirectionProvider>
+				) : (
+					children
+				) }
+			</Box>
+		);
+	}
+);

package/src/components/{unstable-repeater → control-repeater}/actions/disable-item-action.tsx

@@ -6,8 +6,8 @@ import { __ } from '@wordpress/i18n';
 import { useRepeaterContext } from '../context/repeater-context';
 const SIZE = 'tiny';
 
-export const DisableItemAction = ( { index = -1 }: { index?: number } ) => {
-	const { items, updateItem } = useRepeaterContext();
+export const DisableItemAction = () => {
+	const { items, updateItem, index = -1 } = useRepeaterContext();
 
 	if ( index === -1 ) {
 		return null;

package/src/components/{unstable-repeater → control-repeater}/actions/duplicate-item-action.tsx

@@ -7,24 +7,30 @@ import { useRepeaterContext } from '../context/repeater-context';
 
 const SIZE = 'tiny';
 
-export const DuplicateItemAction = ( { index = -1 }: { index?: number } ) => {
-	const { items, addItem } = useRepeaterContext();
+export const DuplicateItemAction = () => {
+	const { items, addItem, index = -1, isItemDisabled } = useRepeaterContext();
 
 	if ( index === -1 ) {
 		return null;
 	}
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
+	const item = items[ index ]?.item;
 
 	const onClick = ( ev: React.MouseEvent ) => {
-		const newItem = structuredClone( items[ index ]?.item );
+		const newItem = structuredClone( item );
 
 		addItem( ev, { item: newItem, index: index + 1 } );
 	};
 
 	return (
 		<Tooltip title={ duplicateLabel } placement="top">
-			<IconButton size={ SIZE } onClick={ onClick } aria-label={ duplicateLabel }>
+			<IconButton
+				size={ SIZE }
+				onClick={ onClick }
+				aria-label={ duplicateLabel }
+				disabled={ isItemDisabled( index ) }
+			>
 				<CopyIcon fontSize={ SIZE } />
 			</IconButton>
 		</Tooltip>

package/src/components/{unstable-repeater → control-repeater}/actions/remove-item-action.tsx

@@ -7,8 +7,8 @@ import { useRepeaterContext } from '../context/repeater-context';
 
 const SIZE = 'tiny';
 
-export const RemoveItemAction = ( { index = -1 }: { index?: number } ) => {
-	const { removeItem } = useRepeaterContext();
+export const RemoveItemAction = () => {
+	const { removeItem, index = -1 } = useRepeaterContext();
 
 	if ( index === -1 ) {
 		return null;

package/src/components/control-repeater/context/item-context.tsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+import { type Item, type RepeatablePropValue } from '../types';
+
+export const ItemContext = createContext< { index: number; value: Item< RepeatablePropValue > } >( {
+	index: -1,
+	value: {} as Item< RepeatablePropValue >,
+} );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, useState } from 'react';
+import { createContext, useMemo, useState } from 'react';
 import { type PropTypeUtil } from '@elementor/editor-props';
 import { type PopupState, usePopupState } from '@elementor/ui';
 
@@ -7,6 +7,7 @@ import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
 import { eventBus } from '../../../services/event-bus';
 import { type Item, type RepeatablePropValue } from '../types';
+import { ItemContext } from './item-context';
 
 type SetterFn< T > = ( prevItems: T ) => T;
 
@@ -27,6 +28,7 @@ type RepeaterContextType< T extends RepeatablePropValue > = {
 	removeItem: ( index: number ) => void;
 	rowRef: HTMLElement | null;
 	setRowRef: ( ref: HTMLElement | null | SetterFn< HTMLElement | null > ) => void;
+	isItemDisabled: ( index: number ) => boolean;
 };
 
 const RepeaterContext = createContext< RepeaterContextType< RepeatablePropValue > | null >( null );
@@ -35,22 +37,25 @@ export const EMPTY_OPEN_ITEM = -1;
 
 export const useRepeaterContext = () => {
 	const context = React.useContext( RepeaterContext );
+	const itemContext = React.useContext( ItemContext );
 
 	if ( ! context ) {
 		throw new Error( 'useRepeaterContext must be used within a RepeaterContextProvider' );
 	}
 
-	return context;
+	return { ...context, ...itemContext };
 };
 
 export const RepeaterContextProvider = < T extends RepeatablePropValue = RepeatablePropValue >( {
 	children,
 	initial,
 	propTypeUtil,
+	isItemDisabled = () => false,
 }: React.PropsWithChildren< {
 	initial: T;
 	propTypeUtil: PropTypeUtil< string, T[] >;
 	isSortable?: boolean;
+	isItemDisabled?: ( item: Item< T > ) => boolean;
 } > ) => {
 	const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp( propTypeUtil );
 
@@ -61,21 +66,20 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 		persistWhen: () => true,
 	} );
 
-	const [ itemsWithKeys, setItemsWithKeys ] = useState< ItemWithKey< T >[] >( () => {
-		return items?.map( ( item ) => ( { key: generateUniqueKey(), item } ) ) ?? [];
+	const [ uniqueKeys, setUniqueKeys ] = useState( () => {
+		return items?.map( ( _, index ) => index ) ?? [];
 	} );
 
-	React.useEffect( () => {
-		setItemsWithKeys( ( prevItemsWithKeys ) => {
-			const newItemsWithKeys =
-				items?.map( ( item ) => {
-					const existingItem = prevItemsWithKeys.find( ( i ) => i.item === item );
-					return existingItem || { key: generateUniqueKey(), item };
-				} ) ?? [];
-
-			return newItemsWithKeys;
-		} );
-	}, [ items ] );
+	const itemsWithKeys = useMemo(
+		() =>
+			uniqueKeys
+				.map( ( key, index ) => ( {
+					key,
+					item: items[ index ],
+				} ) )
+				.filter( ( { item } ) => item !== undefined ),
+		[ uniqueKeys, items ]
+	);
 
 	const handleSetItems = ( newItemsWithKeys: ItemWithKey< T >[] ) => {
 		setItems( newItemsWithKeys.map( ( { item } ) => item ) );
@@ -90,11 +94,14 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 	const addItem = ( ev: React.MouseEvent, config?: AddItem< T > ) => {
 		const item = config?.item ?? { ...initial };
 		const newIndex = config?.index ?? items.length;
+		const newKey = generateUniqueKey();
 		const newItems = [ ...items ];
 
 		newItems.splice( newIndex, 0, item );
 		setItems( newItems );
 
+		setUniqueKeys( [ ...uniqueKeys.slice( 0, newIndex ), newKey, ...uniqueKeys.slice( newIndex ) ] );
+
 		setOpenItemIndex( newIndex );
 		popoverState.open( rowRef ?? ev );
 
@@ -107,6 +114,7 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 		const itemToRemove = items[ index ];
 
 		setItems( items.filter( ( _, pos ) => pos !== index ) );
+		setUniqueKeys( uniqueKeys.filter( ( _, pos ) => pos !== index ) );
 
 		eventBus.emit( `${ propTypeUtil.key }-item-removed`, {
 			itemValue: itemToRemove?.value,
@@ -133,6 +141,7 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 				removeItem,
 				rowRef,
 				setRowRef,
+				isItemDisabled: ( index: number ) => isItemDisabled( itemsWithKeys[ index ].item ),
 			} }
 		>
 			{ children }

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type PropTypeUtil } from '@elementor/editor-props';
+
+import { SectionContent } from '../section-content';
+import { RepeaterContextProvider } from './context/repeater-context';
+import { type Item, type RepeatablePropValue } from './types';
+
+export const ControlRepeater = < T extends RepeatablePropValue >( {
+	children,
+	initial,
+	propTypeUtil,
+	isItemDisabled,
+}: React.PropsWithChildren< {
+	initial: T;
+	propTypeUtil: PropTypeUtil< string, T[] >;
+	isItemDisabled?: ( item: Item< T > ) => boolean;
+} > ) => {
+	return (
+		<SectionContent>
+			<RepeaterContextProvider
+				initial={ initial }
+				propTypeUtil={ propTypeUtil }
+				isItemDisabled={ isItemDisabled }
+			>
+				{ children }
+			</RepeaterContextProvider>
+		</SectionContent>
+	);
+};

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

@@ -1,5 +1,4 @@
 export { TooltipAddItemAction } from './actions/tooltip-add-item-action';
-export { Header } from './header/header';
 export { ItemsContainer } from './items/items-container';
 export { Item } from './items/item';
-export { UnstableRepeater } from './unstable-repeater';
+export { ControlRepeater } from './control-repeater';

package/src/components/{unstable-repeater → control-repeater}/items/edit-item-popover.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { bindPopover, Box, Popover } from '@elementor/ui';
+import { bindPopover, Box } from '@elementor/ui';
 
 import { PropKeyProvider } from '../../../bound-prop-context';
+import { RepeaterPopover } from '../../repeater/repeater-popover';
 import { EMPTY_OPEN_ITEM, useRepeaterContext } from '../context/repeater-context';
 
 export const EditItemPopover = ( { children }: { children: React.ReactNode } ) => {
-	const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items } = useRepeaterContext();
+	const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef } = useRepeaterContext();
 
 	if ( ! isOpen || ! rowRef ) {
 		return null;
 	}
 
-	const bind = items[ openItemIndex ].item.$$type;
-
 	const onClose = () => {
 		setRowRef( null );
 		popoverState.setAnchorEl( null );
@@ -20,23 +19,10 @@ export const EditItemPopover = ( { children }: { children: React.ReactNode } ) =
 	};
 
 	return (
-		<Popover
-			disablePortal
-			slotProps={ {
-				paper: {
-					sx: { mt: 0.5, width: rowRef.offsetWidth },
-				},
-			} }
-			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-			{ ...bindPopover( popoverState ) }
-			onClose={ onClose }
-		>
+		<RepeaterPopover width={ rowRef.offsetWidth } { ...bindPopover( popoverState ) } onClose={ onClose }>
 			<PropKeyProvider bind={ String( openItemIndex ) }>
-				<Box>
-					{ React.isValidElement< { bind: string; index: number } >( children ) &&
-						React.cloneElement( children, { bind, index: openItemIndex } ) }
-				</Box>
+				<Box>{ children }</Box>
 			</PropKeyProvider>
-		</Popover>
+		</RepeaterPopover>
 	);
 };

package/src/components/control-repeater/items/item.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { bindTrigger } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { RepeatableControlContext } from '../../../hooks/use-repeatable-control-context';
+import { RepeaterTag } from '../../repeater/repeater-tag';
+import { useRepeaterContext } from '../context/repeater-context';
+import { RepeaterItemActionsSlot, RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../locations';
+import { type ItemProps, type RepeatablePropValue } from '../types';
+
+export const Item = < T extends RepeatablePropValue >( { Label, Icon, actions }: ItemProps< T > ) => {
+	const {
+		popoverState,
+		setRowRef,
+		openItemIndex,
+		setOpenItemIndex,
+		index = -1,
+		value,
+		isItemDisabled,
+	} = useRepeaterContext();
+	const repeatableContext = React.useContext( RepeatableControlContext );
+	const disableOpen = !! repeatableContext?.props?.readOnly;
+	const triggerProps = bindTrigger( popoverState );
+
+	const onClick = ( ev: React.MouseEvent ) => {
+		if ( disableOpen || isItemDisabled( index ) ) {
+			return;
+		}
+
+		triggerProps.onClick( ev );
+		setOpenItemIndex( index );
+	};
+
+	const setRef = ( ref: HTMLDivElement | null ) => {
+		if ( ! ref || openItemIndex !== index || ref === popoverState.anchorEl ) {
+			return;
+		}
+
+		setRowRef( ref );
+		popoverState.setAnchorEl( ref );
+	};
+
+	return (
+		<RepeaterTag
+			ref={ setRef }
+			label={
+				<RepeaterItemLabelSlot value={ value }>
+					<Label value={ value as T } />
+				</RepeaterItemLabelSlot>
+			}
+			aria-label={ __( 'Open item', 'elementor' ) }
+			{ ...triggerProps }
+			onClick={ onClick }
+			startIcon={
+				<RepeaterItemIconSlot value={ value }>
+					<Icon value={ value as T } />
+				</RepeaterItemIconSlot>
+			}
+			sx={ {
+				minHeight: ( theme ) => theme.spacing( 3.5 ),
+				...( isItemDisabled( index ) && {
+					'[role="button"]': {
+						cursor: 'not-allowed',
+					},
+				} ),
+			} }
+			actions={
+				<>
+					<RepeaterItemActionsSlot index={ index ?? -1 } />
+					{ actions }
+				</>
+			}
+		/>
+	);
+};