@elementor/editor-controls 3.32.0-28 → 3.32.0-30

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.32.0-28",
+  "version": "3.32.0-30",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-28",
-    "@elementor/editor-elements": "3.32.0-28",
-    "@elementor/editor-props": "3.32.0-28",
-    "@elementor/editor-responsive": "3.32.0-28",
-    "@elementor/editor-ui": "3.32.0-28",
-    "@elementor/editor-v1-adapters": "3.32.0-28",
-    "@elementor/env": "3.32.0-28",
-    "@elementor/http-client": "3.32.0-28",
+    "@elementor/editor-current-user": "3.32.0-30",
+    "@elementor/editor-elements": "3.32.0-30",
+    "@elementor/editor-props": "3.32.0-30",
+    "@elementor/editor-responsive": "3.32.0-30",
+    "@elementor/editor-ui": "3.32.0-30",
+    "@elementor/editor-v1-adapters": "3.32.0-30",
+    "@elementor/env": "3.32.0-30",
+    "@elementor/http-client": "3.32.0-30",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-28",
-    "@elementor/query": "3.32.0-28",
-    "@elementor/session": "3.32.0-28",
+    "@elementor/locations": "3.32.0-30",
+    "@elementor/query": "3.32.0-30",
+    "@elementor/session": "3.32.0-30",
     "@elementor/ui": "1.36.2",
-    "@elementor/utils": "3.32.0-28",
-    "@elementor/wp-media": "3.32.0-28",
+    "@elementor/utils": "3.32.0-30",
+    "@elementor/wp-media": "3.32.0-30",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/unstable-repeater/actions/disable-item-action.tsx

@@ -13,12 +13,12 @@ export const DisableItemAction = ( { index = -1 }: { index?: number } ) => {
 		return null;
 	}
 
-	const propDisabled = items[ index ]?.disabled ?? false;
+	const propDisabled = items[ index ].item.disabled ?? false;
 
 	const toggleLabel = propDisabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
 
 	const onClick = () => {
-		const self = structuredClone( items[ index ] );
+		const self = structuredClone( items[ index ].item );
 
 		self.disabled = ! self.disabled;
 

package/src/components/unstable-repeater/actions/duplicate-item-action.tsx

@@ -16,10 +16,10 @@ export const DuplicateItemAction = ( { index = -1 }: { index?: number } ) => {
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
 
-	const onClick = () => {
-		const newItem = structuredClone( items[ index ] );
+	const onClick = ( ev: React.MouseEvent ) => {
+		const newItem = structuredClone( items[ index ]?.item );
 
-		addItem( { item: newItem, index: index + 1 } );
+		addItem( ev, { item: newItem, index: index + 1 } );
 	};
 
 	return (

package/src/components/unstable-repeater/actions/tooltip-add-item-action.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { PlusIcon } from '@elementor/icons';
+import { Box, IconButton, Infotip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useRepeaterContext } from '../context/repeater-context';
+
+const SIZE = 'tiny';
+
+export const TooltipAddItemAction = ( {
+	disabled = false,
+	enableTooltip = false,
+	tooltipContent = null,
+	newItemIndex,
+}: {
+	disabled?: boolean;
+	enableTooltip?: boolean;
+	tooltipContent?: React.ReactNode;
+	newItemIndex?: number;
+} ) => {
+	const { addItem } = useRepeaterContext();
+
+	const onClick = ( ev: React.MouseEvent ) => addItem( ev, { index: newItemIndex } );
+
+	return (
+		<ConditionalToolTip content={ tooltipContent } enable={ enableTooltip }>
+			<Box sx={ { ml: 'auto' } }>
+				<IconButton
+					size={ SIZE }
+					disabled={ disabled }
+					onClick={ onClick }
+					aria-label={ __( 'Add item', 'elementor' ) }
+				>
+					<PlusIcon fontSize={ SIZE } />
+				</IconButton>
+			</Box>
+		</ConditionalToolTip>
+	);
+};
+
+const ConditionalToolTip = ( {
+	children,
+	enable,
+	content,
+}: React.PropsWithChildren< {
+	content?: React.ReactNode;
+	enable: boolean;
+} > ) =>
+	enable && content ? (
+		<Infotip
+			placement="right"
+			content={
+				<Box
+					component="span"
+					aria-label={ undefined }
+					sx={ { display: 'flex', gap: 0.5, p: 2, width: 320, borderRadius: 1 } }
+				>
+					{ content }
+				</Box>
+			}
+		>
+			{ children }
+		</Infotip>
+	) : (
+		children
+	);

package/src/components/unstable-repeater/context/repeater-context.tsx

@@ -1,35 +1,36 @@
 import * as React from 'react';
 import { createContext, useState } from 'react';
-import { type PropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { type PropTypeUtil } from '@elementor/editor-props';
+import { type PopupState, usePopupState } from '@elementor/ui';
 
 import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
-import { type Item } from '../types';
+import { type Item, type RepeatablePropValue } from '../types';
 
-type SetterFn< T extends PropValue > = ( prevItems: T[] ) => T[];
+type SetterFn< T > = ( prevItems: T ) => T;
 
 type AddItem< T > = { item?: T; index?: number };
 
-type RepeaterContextType< T extends PropValue > = {
+type ItemWithKey< T > = { key: number; item: T };
+
+type RepeaterContextType< T extends RepeatablePropValue > = {
 	isOpen: boolean;
-	openItem: number;
-	setOpenItem: ( key: number ) => void;
-	items: Item< T >[];
-	setItems: ( items: T[] | SetterFn< T > ) => void;
+	openItemIndex: number;
+	setOpenItemIndex: ( key: number ) => void;
+	items: ItemWithKey< Item< T > >[];
+	setItems: ( items: ItemWithKey< T >[] ) => void;
+	popoverState: PopupState;
 	initial: T;
-	uniqueKeys: number[];
-	setUniqueKeys: ( keys: number[] ) => void;
-	isSortable: boolean;
-	generateNextKey: ( source: number[] ) => number;
-	addItem: ( config?: AddItem< T > ) => void;
+	addItem: ( ev: React.MouseEvent, config?: AddItem< T > ) => void;
 	updateItem: ( item: T, index: number ) => void;
 	removeItem: ( index: number ) => void;
-	sortItemsByKeys: ( newKeysOrder: number[] ) => void;
+	rowRef: HTMLElement | null;
+	setRowRef: ( ref: HTMLElement | null | SetterFn< HTMLElement | null > ) => void;
 };
 
-const RepeaterContext = createContext< RepeaterContextType< PropValue > | null >( null );
+const RepeaterContext = createContext< RepeaterContextType< RepeatablePropValue > | null >( null );
 
-const EMPTY_OPEN_ITEM = -1;
+export const EMPTY_OPEN_ITEM = -1;
 
 export const useRepeaterContext = () => {
 	const context = React.useContext( RepeaterContext );
@@ -38,29 +39,13 @@ export const useRepeaterContext = () => {
 		throw new Error( 'useRepeaterContext must be used within a RepeaterContextProvider' );
 	}
 
-	return {
-		isOpen: context.isOpen,
-		openItem: context.openItem,
-		setOpenItem: context.setOpenItem,
-		items: context.items,
-		setItems: context.setItems,
-		uniqueKeys: context.uniqueKeys,
-		setUniqueKeys: context.setUniqueKeys,
-		initial: context.initial,
-		isSortable: context.isSortable,
-		generateNextKey: context.generateNextKey,
-		sortItemsByKeys: context.sortItemsByKeys,
-		addItem: context.addItem,
-		updateItem: context.updateItem,
-		removeItem: context.removeItem,
-	};
+	return context;
 };
 
-export const RepeaterContextProvider = < T extends PropValue = PropValue >( {
+export const RepeaterContextProvider = < T extends RepeatablePropValue = RepeatablePropValue >( {
 	children,
 	initial,
 	propTypeUtil,
-	isSortable = true,
 }: React.PropsWithChildren< { initial: T; propTypeUtil: PropTypeUtil< string, T[] >; isSortable?: boolean } > ) => {
 	const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp( propTypeUtil );
 
@@ -71,60 +56,60 @@ export const RepeaterContextProvider = < T extends PropValue = PropValue >( {
 		persistWhen: () => true,
 	} );
 
-	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
-	const [ uniqueKeys, setUniqueKeys ] = useState( items?.map( ( _, index ) => index ) ?? [] );
+	const itemWithKeysState = useState< ItemWithKey< T >[] >(
+		items?.map( ( item, index ) => ( { key: index, item } ) ) ?? []
+	);
 
-	const isOpen = openItem !== EMPTY_OPEN_ITEM;
+	const itemsWithKeys = itemWithKeysState[ 0 ];
+	const setItemsWithKeys = ( newItems: ItemWithKey< T >[] ) => {
+		itemWithKeysState[ 1 ]( newItems as ItemWithKey< T >[] );
+		setItems( newItems.map( ( { item } ) => item as T ) );
+	};
 
-	const sortItemsByKeys = ( keysOrder: number[] ) => {
-		setUniqueKeys( keysOrder );
-		setItems( ( prevItems ) =>
-			keysOrder.map( ( key ) => {
-				const index = uniqueKeys.indexOf( key );
+	const [ openItemIndex, setOpenItemIndex ] = useState( EMPTY_OPEN_ITEM );
+	const [ rowRef, setRowRef ] = useState< HTMLElement | null >( null );
 
-				return prevItems[ index ];
-			} )
-		);
-	};
+	const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
+	const popoverState = usePopupState( { variant: 'popover' } );
 
-	const addItem = ( config?: AddItem< T > ) => {
+	const addItem = ( ev: React.MouseEvent, config?: AddItem< T > ) => {
 		const item = config?.item ?? initial;
-		const index = config?.index ?? items.length;
-		const newItems = [ ...items ];
+		const newIndex = config?.index ?? items.length;
+		const newKey = generateNextKey( itemsWithKeys.map( ( { key } ) => key ) );
+		const newItemsWithKeys = [ ...itemsWithKeys ];
 
-		newItems.splice( index, 0, item );
-		setItems( newItems );
-		setUniqueKeys( newItems.map( ( _, i ) => i ) );
+		newItemsWithKeys.splice( newIndex, 0, { item, key: newKey } );
+		setItemsWithKeys( newItemsWithKeys );
 
-		setOpenItem( index );
+		setOpenItemIndex( newIndex );
+		popoverState.open( rowRef ?? ev );
 	};
 
 	const removeItem = ( index: number ) => {
-		setItems( ( prevItems ) => prevItems.filter( ( _, pos ) => pos !== index ) );
-		setUniqueKeys( ( prevKeys ) => prevKeys.slice( 0, -1 ) );
+		setItemsWithKeys( itemsWithKeys.filter( ( _, pos ) => pos !== index ) );
 	};
 
 	const updateItem = ( updatedItem: T, index: number ) => {
-		setItems( ( prevItems ) => prevItems.map( ( item, pos ) => ( pos === index ? updatedItem : item ) ) );
+		const item = itemsWithKeys[ index ];
+
+		setItemsWithKeys( itemsWithKeys.toSpliced( index, 1, { ...item, item: updatedItem } ) );
 	};
 
 	return (
 		<RepeaterContext.Provider
 			value={ {
 				isOpen,
-				openItem,
-				setOpenItem,
-				items: ( items ?? [] ) as Item< T >[],
-				setItems: setItems as ( items: PropValue[] | SetterFn< PropValue > ) => void,
+				openItemIndex,
+				setOpenItemIndex,
+				items: ( itemsWithKeys ?? [] ) as RepeaterContextType< T >[ 'items' ],
+				setItems: setItemsWithKeys as RepeaterContextType< RepeatablePropValue >[ 'setItems' ],
+				popoverState,
 				initial,
-				uniqueKeys,
-				setUniqueKeys,
-				isSortable,
-				generateNextKey,
-				sortItemsByKeys,
-				addItem: addItem as ( config?: AddItem< PropValue > ) => void,
-				updateItem: updateItem as ( item: PropValue, index: number ) => void,
+				updateItem: updateItem as RepeaterContextType< RepeatablePropValue >[ 'updateItem' ],
+				addItem: addItem as RepeaterContextType< RepeatablePropValue >[ 'addItem' ],
 				removeItem,
+				rowRef,
+				setRowRef,
 			} }
 		>
 			{ children }

package/src/components/unstable-repeater/header/header.tsx

@@ -4,7 +4,7 @@ import { 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 { AddItemAction } from '../actions/add-item-action';
+import { TooltipAddItemAction } from '../actions/tooltip-add-item-action';
 import { RepeaterHeaderActionsSlot } from '../locations';
 
 export const Header = ( { label, children }: React.PropsWithChildren< { label: string } > ) => {
@@ -16,7 +16,7 @@ export const Header = ( { label, children }: React.PropsWithChildren< { label: s
 				{ label }
 			</Typography>
 			<RepeaterHeaderActionsSlot value={ value } />
-			<SlotChildren whitelist={ [ AddItemAction ] as React.FC[] }>{ children }</SlotChildren>
+			<SlotChildren whitelist={ [ TooltipAddItemAction ] as React.FC[] }>{ children }</SlotChildren>
 			<ControlAdornments />
 		</Stack>
 	);

package/src/components/unstable-repeater/index.ts

@@ -1,4 +1,4 @@
-export { AddItemAction } from './actions/add-item-action';
+export { TooltipAddItemAction } from './actions/tooltip-add-item-action';
 export { Header } from './header/header';
 export { ItemsContainer } from './items/items-container';
 export { Item } from './items/item';

package/src/components/unstable-repeater/items/edit-item-popover.tsx

@@ -1,28 +1,44 @@
 import * as React from 'react';
-import { Box, Popover, type PopoverProps } from '@elementor/ui';
+import { bindPopover, Box, Popover } from '@elementor/ui';
 
-type AddItemPopoverProps = {
-	anchorRef: HTMLElement | null;
-	setAnchorEl: ( el: HTMLElement | null ) => void;
-	popoverProps: Partial< PopoverProps >;
-	children?: React.ReactNode;
-};
+import { PropKeyProvider } from '../../../bound-prop-context';
+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 popoverProps = bindPopover( popoverState );
+
+	if ( ! isOpen || ! rowRef ) {
+		return null;
+	}
+
+	const bind = items[ openItemIndex ].item.$$type;
+
+	const onClose = () => {
+		popoverProps.onClose?.();
+		setRowRef( null );
+		setOpenItemIndex( EMPTY_OPEN_ITEM );
+	};
 
-export const EditItemPopover = ( { children, anchorRef, setAnchorEl, popoverProps }: AddItemPopoverProps ) => {
 	return (
 		<Popover
 			disablePortal
 			slotProps={ {
 				paper: {
-					ref: setAnchorEl,
-					sx: { mt: 0.5, width: anchorRef?.offsetWidth },
+					sx: { mt: 0.5, width: rowRef.offsetWidth },
 				},
 			} }
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-			anchorEl={ anchorRef }
 			{ ...popoverProps }
+			anchorEl={ rowRef }
+			onClose={ onClose }
 		>
-			<Box>{ children }</Box>
+			<PropKeyProvider bind={ String( openItemIndex ) }>
+				<Box>
+					{ React.isValidElement< { bind: string; index: number } >( children ) &&
+						React.cloneElement( children, { bind, index: openItemIndex } ) }
+				</Box>
+			</PropKeyProvider>
 		</Popover>
 	);
 };

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

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { type PropValue } from '@elementor/editor-props';
 import { bindTrigger, UnstableTag } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -8,25 +6,25 @@ import { SlotChildren } from '../../../control-replacements';
 import { DisableItemAction } from '../actions/disable-item-action';
 import { DuplicateItemAction } from '../actions/duplicate-item-action';
 import { RemoveItemAction } from '../actions/remove-item-action';
+import { useRepeaterContext } from '../context/repeater-context';
 import { RepeaterItemActionsSlot, RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../locations';
-import { type ItemProps } from '../types';
-import { EditItemPopover } from './edit-item-popover';
-import { usePopover } from './use-popover';
+import { type ItemProps, type RepeatablePropValue } from '../types';
 
-type AnchorEl = HTMLElement | null;
-
-export const Item = < T extends PropValue >( {
+export const Item = < T extends RepeatablePropValue >( {
 	Label,
 	Icon,
-	Content,
-	key,
 	value,
-	index,
-	openOnMount,
+	index = -1,
 	children,
 }: React.PropsWithChildren< ItemProps< T > > ) => {
-	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
-	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount as boolean, () => {} );
+	const { items, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
+	const triggerProps = bindTrigger( popoverState );
+	const key = items[ index ].key ?? -1;
+
+	const onClick = ( ev: React.MouseEvent ) => {
+		triggerProps.onClick( ev );
+		setOpenItemIndex( index );
+	};
 
 	return (
 		<>
@@ -40,10 +38,11 @@ export const Item = < T extends PropValue >( {
 				}
 				showActionsOnHover
 				fullWidth
-				ref={ setRef }
+				ref={ ( ref ) => ref && openItemIndex === index && setRowRef( ref ) }
 				variant="outlined"
 				aria-label={ __( 'Open item', 'elementor' ) }
-				{ ...bindTrigger( popoverState ) }
+				{ ...triggerProps }
+				onClick={ onClick }
 				startIcon={
 					<RepeaterItemIconSlot value={ value }>
 						<Icon value={ value as T } />
@@ -63,9 +62,6 @@ export const Item = < T extends PropValue >( {
 					</>
 				}
 			/>
-			<EditItemPopover anchorRef={ ref } setAnchorEl={ setAnchorEl } popoverProps={ popoverProps }>
-				<Content anchorEl={ anchorEl } bind={ String( index ) } value={ value as T } />
-			</EditItemPopover>
 		</>
 	);
 };

package/src/components/unstable-repeater/items/items-container.tsx

@@ -1,33 +1,36 @@
 import * as React from 'react';
-import { type PropValue } from '@elementor/editor-props';
 
 import { SortableItem, SortableProvider } from '../../sortable';
 import { useRepeaterContext } from '../context/repeater-context';
-import { type ItemProps } from '../types';
+import { type Item, type ItemProps, type RepeatablePropValue } from '../types';
 
-export const ItemsContainer = < T extends PropValue >( {
+export const ItemsContainer = < T extends RepeatablePropValue >( {
 	itemTemplate,
+	isSortable = true,
 	children,
-}: React.PropsWithChildren< { itemTemplate: React.ReactNode } > ) => {
-	const { items, uniqueKeys, openItem, isSortable, sortItemsByKeys } = useRepeaterContext();
+}: React.PropsWithChildren< { itemTemplate: React.ReactNode; isSortable?: boolean } > ) => {
+	const { items, setItems } = useRepeaterContext();
+	const keys = items.map( ( { key } ) => key );
 
 	if ( ! itemTemplate ) {
 		return null;
 	}
 
-	const onChangeOrder = ( newOrder: number[] ) => {
-		sortItemsByKeys( newOrder );
+	const onChangeOrder = ( newKeys: number[] ) => {
+		setItems(
+			newKeys.map( ( key ) => {
+				const index = items.findIndex( ( item ) => item.key === key );
+
+				return items[ index ];
+			} )
+		);
 	};
 
 	return (
 		<>
-			<SortableProvider value={ uniqueKeys } onChange={ onChangeOrder }>
-				{ uniqueKeys?.map( ( key: number, index: number ) => {
-					const value = items?.[ index ] as T;
-
-					if ( ! value ) {
-						return null;
-					}
+			<SortableProvider value={ keys } onChange={ onChangeOrder }>
+				{ keys.map( ( key: number, index: number ) => {
+					const value = items[ index ].item as Item< T >;
 
 					return (
 						<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ ! isSortable }>
@@ -36,7 +39,6 @@ export const ItemsContainer = < T extends PropValue >( {
 										key,
 										value,
 										index,
-										openOnMount: key === openItem,
 										children,
 								  } )
 								: null }

package/src/components/unstable-repeater/types.ts

@@ -1,4 +1,4 @@
-import { type PropKey, type PropTypeUtil } from '@elementor/editor-props';
+import { type PropKey, type PropTypeUtil, type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 
 export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
 
@@ -6,21 +6,11 @@ export type Item< T > = {
 	disabled?: boolean;
 } & T;
 
-type RepeaterItemContentProps< T > = {
-	anchorEl: HTMLElement | null;
-	bind: PropKey;
-	value: T;
-	collectionPropUtil?: CollectionPropUtil< T >;
-};
-
-type RepeaterItemContent< T > = React.ComponentType< RepeaterItemContentProps< T > >;
+export type RepeatablePropValue = TransformablePropValue< PropKey, PropValue >;
 
 export type ItemProps< T > = {
 	Label: React.ComponentType< { value: T } >;
 	Icon: React.ComponentType< { value: T } >;
-	Content: RepeaterItemContent< T >;
 	value?: Item< T >;
-	key?: string | number;
 	index?: number;
-	openOnMount?: boolean;
 };

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import { type PropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { type PropTypeUtil } from '@elementor/editor-props';
 
 import { SlotChildren } from '../../control-replacements';
 import { SectionContent } from '../section-content';
 import { RepeaterContextProvider } from './context/repeater-context';
 import { Header } from './header/header';
+import { EditItemPopover } from './items/edit-item-popover';
 import { ItemsContainer } from './items/items-container';
+import { type RepeatablePropValue } from './types';
 
-export const UnstableRepeater = < T extends PropValue >( {
+export const UnstableRepeater = < T extends RepeatablePropValue >( {
 	children,
 	initial,
 	propTypeUtil,
@@ -15,7 +17,7 @@ export const UnstableRepeater = < T extends PropValue >( {
 	return (
 		<SectionContent>
 			<RepeaterContextProvider initial={ initial } propTypeUtil={ propTypeUtil }>
-				<SlotChildren whitelist={ [ Header, ItemsContainer ] as React.FC[] } sorted>
+				<SlotChildren whitelist={ [ Header, ItemsContainer, EditItemPopover ] as React.FC[] } sorted>
 					{ children }
 				</SlotChildren>
 			</RepeaterContextProvider>