@elementor/editor-controls 1.5.0 → 3.32.0-21

package/src/components/size-control/text-field-inner-selection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { forwardRef, useId } from 'react';
-import { type PropValue } from '@elementor/editor-props';
+import { type PropValue, sizePropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import {
 	bindMenu,
@@ -8,11 +8,15 @@ import {
 	Button,
 	InputAdornment,
 	Menu,
+	styled,
 	TextField,
 	type TextFieldProps,
 	usePopupState,
 } from '@elementor/ui';
 
+import { useBoundProp } from '../../bound-prop-context';
+import { DEFAULT_UNIT } from '../../utils/size-control';
+
 type TextFieldInnerSelectionProps = {
 	placeholder?: string;
 	type: string;
@@ -21,11 +25,11 @@ type TextFieldInnerSelectionProps = {
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
-	shouldBlockInput?: boolean;
 	inputProps: TextFieldProps[ 'InputProps' ] & {
 		endAdornment: React.JSX.Element;
 	};
 	disabled?: boolean;
+	isPopoverOpen?: boolean;
 };
 
 export const TextFieldInnerSelection = forwardRef(
@@ -38,26 +42,33 @@ export const TextFieldInnerSelection = forwardRef(
 			onBlur,
 			onKeyDown,
 			onKeyUp,
-			shouldBlockInput = false,
 			inputProps,
 			disabled,
+			isPopoverOpen,
 		}: TextFieldInnerSelectionProps,
 		ref
 	) => {
+		const { placeholder: boundPropPlaceholder } = useBoundProp( sizePropTypeUtil );
+
+		const getCursorStyle = () => ( {
+			input: { cursor: inputProps.readOnly ? 'default !important' : undefined },
+		} );
+
 		return (
 			<TextField
 				ref={ ref }
-				sx={ { input: { cursor: shouldBlockInput ? 'default !important' : undefined } } }
+				sx={ getCursorStyle() }
 				size="tiny"
 				fullWidth
-				type={ shouldBlockInput ? undefined : type }
+				type={ type }
 				value={ value }
-				onChange={ shouldBlockInput ? undefined : onChange }
-				onKeyDown={ shouldBlockInput ? undefined : onKeyDown }
-				onKeyUp={ shouldBlockInput ? undefined : onKeyUp }
+				onChange={ onChange }
+				onKeyDown={ onKeyDown }
+				onKeyUp={ onKeyUp }
 				disabled={ disabled }
 				onBlur={ onBlur }
-				placeholder={ placeholder }
+				focused={ isPopoverOpen ? true : undefined }
+				placeholder={ placeholder ?? ( String( boundPropPlaceholder?.size ?? '' ) || undefined ) }
 				InputProps={ inputProps }
 			/>
 		);
@@ -91,17 +102,18 @@ export const SelectionEndAdornment = < T extends string >( {
 		popupState.close();
 	};
 
+	const { placeholder, showPrimaryColor } = useUnitPlaceholder( value );
+
 	return (
 		<InputAdornment position="end">
-			<Button
+			<StyledButton
+				isPrimaryColor={ showPrimaryColor }
 				size="small"
-				color="secondary"
 				disabled={ disabled }
-				sx={ { font: 'inherit', minWidth: 'initial', textTransform: 'uppercase' } }
 				{ ...bindTrigger( popupState ) }
 			>
-				{ alternativeOptionLabels[ value ] ?? value }
-			</Button>
+				{ placeholder ?? alternativeOptionLabels[ value ] ?? value }
+			</StyledButton>
 
 			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
 				{ options.map( ( option, index ) => (
@@ -117,3 +129,37 @@ export const SelectionEndAdornment = < T extends string >( {
 		</InputAdornment>
 	);
 };
+
+function useUnitPlaceholder( value: string ) {
+	const { value: externalValue, placeholder } = useBoundProp( sizePropTypeUtil );
+	const size = externalValue?.size;
+	const unit = externalValue?.unit;
+
+	const isCustomUnitWithSize = value === 'custom' && Boolean( size );
+	const isAutoUnit = value === 'auto';
+	const showPrimaryColor = isAutoUnit || isCustomUnitWithSize || Boolean( size );
+
+	if ( ! placeholder ) {
+		return {
+			placeholder: null,
+			showPrimaryColor,
+		};
+	}
+
+	const isMissingUnit = ! unit;
+	const showPlaceholder = isMissingUnit && value === DEFAULT_UNIT;
+
+	return {
+		placeholder: showPlaceholder ? placeholder.unit : undefined,
+		showPrimaryColor,
+	};
+}
+
+const StyledButton = styled( Button, {
+	shouldForwardProp: ( prop ) => prop !== 'isPrimaryColor',
+} )( ( { isPrimaryColor, theme } ) => ( {
+	color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
+	font: 'inherit',
+	minWidth: 'initial',
+	textTransform: 'uppercase',
+} ) );

package/src/components/text-field-popover.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { type RefObject } from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { MathFunctionIcon } from '@elementor/icons';
 import { bindPopover, Popover, type PopupState, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 type Props = {
 	popupState: PopupState;
@@ -10,8 +13,26 @@ type Props = {
 	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 };
 
+const SIZE = 'tiny';
+
 export const TextFieldPopover = ( props: Props ) => {
 	const { popupState, restoreValue, anchorRef, value, onChange } = props;
+	const inputRef = useRef< HTMLInputElement >( null );
+
+	useEffect( () => {
+		if ( popupState.isOpen ) {
+			requestAnimationFrame( () => {
+				if ( inputRef.current ) {
+					inputRef.current.focus();
+				}
+			} );
+		}
+	}, [ popupState.isOpen ] );
+
+	const handleClose = () => {
+		restoreValue();
+		popupState.close();
+	};
 
 	return (
 		<Popover
@@ -21,18 +42,19 @@ export const TextFieldPopover = ( props: Props ) => {
 					sx: {
 						borderRadius: 2,
 						width: anchorRef.current?.offsetWidth + 'px',
-						p: 1.5,
 					},
 				},
 			} }
 			{ ...bindPopover( popupState ) }
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
-			onClose={ () => {
-				restoreValue();
-				popupState.close();
-			} }
+			onClose={ handleClose }
 		>
+			<PopoverHeader
+				title={ __( 'CSS function', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <MathFunctionIcon fontSize={ SIZE } /> }
+			/>
 			<TextField
 				value={ value }
 				onChange={ onChange }
@@ -40,8 +62,9 @@ export const TextFieldPopover = ( props: Props ) => {
 				type="text"
 				fullWidth
 				inputProps={ {
-					autoFocus: true,
+					ref: inputRef,
 				} }
+				sx={ { pt: 0, pr: 1.5, pb: 1.5, pl: 1.5 } }
 			/>
 		</Popover>
 	);

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { PlusIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useRepeaterContext } from '../context/repeater-context';
+
+const SIZE = 'tiny';
+
+export const AddItemAction = ( {
+	disabled = false,
+	tooltip = false,
+	tooltipContent = null,
+	newItemIndex,
+}: {
+	disabled?: boolean;
+	tooltip?: boolean;
+	tooltipContent?: React.ReactNode;
+	newItemIndex?: number;
+} ) => {
+	const { addItem } = useRepeaterContext();
+	const shouldShowTooltip = tooltip && tooltipContent;
+
+	const onClick = () => addItem( { index: newItemIndex } );
+
+	return (
+		<ConditionalToolTip content={ tooltipContent } shouldShowTooltip={ !! shouldShowTooltip }>
+			<IconButton
+				size={ SIZE }
+				sx={ { ml: 'auto' } }
+				disabled={ disabled }
+				onClick={ onClick }
+				aria-label={ __( 'Add item', 'elementor' ) }
+			>
+				<PlusIcon fontSize={ SIZE } />
+			</IconButton>
+		</ConditionalToolTip>
+	);
+};
+
+const ConditionalToolTip = ( {
+	children,
+	content,
+	shouldShowTooltip,
+}: React.PropsWithChildren< {
+	content: React.ReactNode;
+	shouldShowTooltip: boolean;
+} > ) => {
+	return shouldShowTooltip ? <Tooltip title={ content }>{ children }</Tooltip> : children;
+};

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { EyeIcon, EyeOffIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useRepeaterContext } from '../context/repeater-context';
+const SIZE = 'tiny';
+
+export const DisableItemAction = ( { index = -1 }: { index?: number } ) => {
+	const { items, updateItem } = useRepeaterContext();
+
+	if ( index === -1 ) {
+		return null;
+	}
+
+	const propDisabled = items[ index ]?.disabled ?? false;
+
+	const toggleLabel = propDisabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
+
+	const onClick = () => {
+		const self = structuredClone( items[ index ] );
+
+		self.disabled = ! self.disabled;
+
+		if ( ! self.disabled ) {
+			delete self.disabled;
+		}
+
+		updateItem( self, index );
+	};
+
+	return (
+		<Tooltip title={ toggleLabel } placement="top">
+			<IconButton size={ SIZE } onClick={ onClick } aria-label={ toggleLabel }>
+				{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+			</IconButton>
+		</Tooltip>
+	);
+};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { CopyIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useRepeaterContext } from '../context/repeater-context';
+
+const SIZE = 'tiny';
+
+export const DuplicateItemAction = ( { index = -1 }: { index?: number } ) => {
+	const { items, addItem } = useRepeaterContext();
+
+	if ( index === -1 ) {
+		return null;
+	}
+
+	const duplicateLabel = __( 'Duplicate', 'elementor' );
+
+	const onClick = () => {
+		const newItem = structuredClone( items[ index ] );
+
+		addItem( { item: newItem, index: index + 1 } );
+	};
+
+	return (
+		<Tooltip title={ duplicateLabel } placement="top">
+			<IconButton size={ SIZE } onClick={ onClick } aria-label={ duplicateLabel }>
+				<CopyIcon fontSize={ SIZE } />
+			</IconButton>
+		</Tooltip>
+	);
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { XIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useRepeaterContext } from '../context/repeater-context';
+
+const SIZE = 'tiny';
+
+export const RemoveItemAction = ( { index = -1 }: { index?: number } ) => {
+	const { removeItem } = useRepeaterContext();
+
+	if ( index === -1 ) {
+		return null;
+	}
+
+	const removeLabel = __( 'Remove', 'elementor' );
+
+	const onClick = () => removeItem( index );
+	return (
+		<Tooltip title={ removeLabel } placement="top">
+			<IconButton size={ SIZE } onClick={ onClick } aria-label={ removeLabel }>
+				<XIcon fontSize={ SIZE } />
+			</IconButton>
+		</Tooltip>
+	);
+};

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

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { createContext, useState } from 'react';
+import { type PropTypeUtil, type PropValue } from '@elementor/editor-props';
+
+import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
+import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
+import { type Item } from '../types';
+
+type SetterFn< T extends PropValue > = ( prevItems: T[] ) => T[];
+
+type AddItem< T > = { item?: T; index?: number };
+
+type RepeaterContextType< T extends PropValue > = {
+	isOpen: boolean;
+	openItem: number;
+	setOpenItem: ( key: number ) => void;
+	items: Item< T >[];
+	setItems: ( items: T[] | SetterFn< T > ) => void;
+	initial: T;
+	uniqueKeys: number[];
+	setUniqueKeys: ( keys: number[] ) => void;
+	isSortable: boolean;
+	generateNextKey: ( source: number[] ) => number;
+	addItem: ( config?: AddItem< T > ) => void;
+	updateItem: ( item: T, index: number ) => void;
+	removeItem: ( index: number ) => void;
+	sortItemsByKeys: ( newKeysOrder: number[] ) => void;
+};
+
+const RepeaterContext = createContext< RepeaterContextType< PropValue > | null >( null );
+
+const EMPTY_OPEN_ITEM = -1;
+
+export const useRepeaterContext = () => {
+	const context = React.useContext( RepeaterContext );
+
+	if ( ! context ) {
+		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,
+	};
+};
+
+export const RepeaterContextProvider = < T extends PropValue = PropValue >( {
+	children,
+	initial,
+	propTypeUtil,
+	isSortable = true,
+}: React.PropsWithChildren< { initial: T; propTypeUtil: PropTypeUtil< string, T[] >; isSortable?: boolean } > ) => {
+	const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp( propTypeUtil );
+
+	const [ items, setItems ] = useSyncExternalState( {
+		external: repeaterValues,
+		fallback: () => [] as T[],
+		setExternal: setRepeaterValues,
+		persistWhen: () => true,
+	} );
+
+	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
+	const [ uniqueKeys, setUniqueKeys ] = useState( items?.map( ( _, index ) => index ) ?? [] );
+
+	const isOpen = openItem !== EMPTY_OPEN_ITEM;
+
+	const sortItemsByKeys = ( keysOrder: number[] ) => {
+		setUniqueKeys( keysOrder );
+		setItems( ( prevItems ) =>
+			keysOrder.map( ( key ) => {
+				const index = uniqueKeys.indexOf( key );
+
+				return prevItems[ index ];
+			} )
+		);
+	};
+
+	const addItem = ( config?: AddItem< T > ) => {
+		const item = config?.item ?? initial;
+		const index = config?.index ?? items.length;
+		const newItems = [ ...items ];
+
+		newItems.splice( index, 0, item );
+		setItems( newItems );
+		setUniqueKeys( newItems.map( ( _, i ) => i ) );
+
+		setOpenItem( index );
+	};
+
+	const removeItem = ( index: number ) => {
+		setItems( ( prevItems ) => prevItems.filter( ( _, pos ) => pos !== index ) );
+		setUniqueKeys( ( prevKeys ) => prevKeys.slice( 0, -1 ) );
+	};
+
+	const updateItem = ( updatedItem: T, index: number ) => {
+		setItems( ( prevItems ) => prevItems.map( ( item, pos ) => ( pos === index ? updatedItem : item ) ) );
+	};
+
+	return (
+		<RepeaterContext.Provider
+			value={ {
+				isOpen,
+				openItem,
+				setOpenItem,
+				items: ( items ?? [] ) as Item< T >[],
+				setItems: setItems as ( items: PropValue[] | SetterFn< PropValue > ) => void,
+				initial,
+				uniqueKeys,
+				setUniqueKeys,
+				isSortable,
+				generateNextKey,
+				sortItemsByKeys,
+				addItem: addItem as ( config?: AddItem< PropValue > ) => void,
+				updateItem: updateItem as ( item: PropValue, index: number ) => void,
+				removeItem,
+			} }
+		>
+			{ children }
+		</RepeaterContext.Provider>
+	);
+};
+
+const generateNextKey = ( source: number[] ) => {
+	return 1 + Math.max( 0, ...source );
+};

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+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 { RepeaterHeaderActionsSlot } from '../locations';
+
+export const Header = ( { label, children }: React.PropsWithChildren< { label: string } > ) => {
+	const { value } = useBoundProp();
+
+	return (
+		<Stack direction="row" justifyContent="start" alignItems="center" gap={ 1 } sx={ { marginInlineEnd: -0.75 } }>
+			<Typography component="label" variant="caption" color="text.secondary">
+				{ label }
+			</Typography>
+			<RepeaterHeaderActionsSlot value={ value } />
+			<SlotChildren whitelist={ [ AddItemAction ] as React.FC[] }>{ children }</SlotChildren>
+			<ControlAdornments />
+		</Stack>
+	);
+};

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

@@ -0,0 +1,5 @@
+export { AddItemAction } from './actions/add-item-action';
+export { Header } from './header/header';
+export { ItemsContainer } from './items/items-container';
+export { Item } from './items/item';
+export { UnstableRepeater } from './unstable-repeater';

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Box, Popover, type PopoverProps } from '@elementor/ui';
+
+type AddItemPopoverProps = {
+	anchorRef: HTMLElement | null;
+	setAnchorEl: ( el: HTMLElement | null ) => void;
+	popoverProps: Partial< PopoverProps >;
+	children?: React.ReactNode;
+};
+
+export const EditItemPopover = ( { children, anchorRef, setAnchorEl, popoverProps }: AddItemPopoverProps ) => {
+	return (
+		<Popover
+			disablePortal
+			slotProps={ {
+				paper: {
+					ref: setAnchorEl,
+					sx: { mt: 0.5, width: anchorRef?.offsetWidth },
+				},
+			} }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+			anchorEl={ anchorRef }
+			{ ...popoverProps }
+		>
+			<Box>{ children }</Box>
+		</Popover>
+	);
+};

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

@@ -0,0 +1,71 @@
+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';
+
+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 { RepeaterItemActionsSlot, RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../locations';
+import { type ItemProps } from '../types';
+import { EditItemPopover } from './edit-item-popover';
+import { usePopover } from './use-popover';
+
+type AnchorEl = HTMLElement | null;
+
+export const Item = < T extends PropValue >( {
+	Label,
+	Icon,
+	Content,
+	key,
+	value,
+	index,
+	openOnMount,
+	children,
+}: React.PropsWithChildren< ItemProps< T > > ) => {
+	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
+	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount as boolean, () => {} );
+
+	return (
+		<>
+			<UnstableTag
+				key={ key }
+				disabled={ false }
+				label={
+					<RepeaterItemLabelSlot value={ value }>
+						<Label value={ value as T } />
+					</RepeaterItemLabelSlot>
+				}
+				showActionsOnHover
+				fullWidth
+				ref={ setRef }
+				variant="outlined"
+				aria-label={ __( 'Open item', 'elementor' ) }
+				{ ...bindTrigger( popoverState ) }
+				startIcon={
+					<RepeaterItemIconSlot value={ value }>
+						<Icon value={ value as T } />
+					</RepeaterItemIconSlot>
+				}
+				actions={
+					<>
+						<RepeaterItemActionsSlot index={ index ?? -1 } />
+
+						<SlotChildren
+							whitelist={ [ DuplicateItemAction, DisableItemAction, RemoveItemAction ] as React.FC[] }
+							props={ { index } }
+							sorted
+						>
+							{ children }
+						</SlotChildren>
+					</>
+				}
+			/>
+			<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

@@ -0,0 +1,49 @@
+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';
+
+export const ItemsContainer = < T extends PropValue >( {
+	itemTemplate,
+	children,
+}: React.PropsWithChildren< { itemTemplate: React.ReactNode } > ) => {
+	const { items, uniqueKeys, openItem, isSortable, sortItemsByKeys } = useRepeaterContext();
+
+	if ( ! itemTemplate ) {
+		return null;
+	}
+
+	const onChangeOrder = ( newOrder: number[] ) => {
+		sortItemsByKeys( newOrder );
+	};
+
+	return (
+		<>
+			<SortableProvider value={ uniqueKeys } onChange={ onChangeOrder }>
+				{ uniqueKeys?.map( ( key: number, index: number ) => {
+					const value = items?.[ index ] as T;
+
+					if ( ! value ) {
+						return null;
+					}
+
+					return (
+						<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ ! isSortable }>
+							{ React.isValidElement< React.PropsWithChildren< ItemProps< T > > >( itemTemplate )
+								? React.cloneElement( itemTemplate, {
+										key,
+										value,
+										index,
+										openOnMount: key === openItem,
+										children,
+								  } )
+								: null }
+						</SortableItem>
+					);
+				} ) }
+			</SortableProvider>
+		</>
+	);
+};