@elementor/editor-controls 1.0.0 → 1.1.0

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": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,10 +41,10 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.5",
-    "@elementor/editor-props": "0.13.0",
+    "@elementor/editor-elements": "0.8.6",
+    "@elementor/editor-props": "0.14.0",
     "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-ui": "0.11.0",
+    "@elementor/editor-ui": "0.12.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
@@ -52,16 +52,16 @@
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.5",
+    "@elementor/ui": "1.35.5",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
-    "@tanstack/react-virtual": "3.13.3",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/src/components/font-family-selector.tsx

@@ -1,21 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { SearchIcon, TextIcon } from '@elementor/icons';
-import {
-	Box,
-	Divider,
-	InputAdornment,
-	Link,
-	MenuList,
-	MenuSubheader,
-	Stack,
-	styled,
-	TextField,
-	Typography,
-} from '@elementor/ui';
+import { useEffect, useState } from 'react';
+import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from '@elementor/editor-ui';
+import { TextIcon } from '@elementor/icons';
+import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { enqueueFont } from '../controls/font-family-control/enqueue-font';
@@ -41,8 +29,8 @@ export const FontFamilySelector = ( {
 
 	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
 
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
 	};
 
 	const handleClose = () => {
@@ -57,25 +45,11 @@ export const FontFamilySelector = ( {
 				onClose={ handleClose }
 				icon={ <TextIcon fontSize={ SIZE } /> }
 			/>
-
-			<Box px={ 1.5 } pb={ 1 }>
-				<TextField
-					// eslint-disable-next-line jsx-a11y/no-autofocus
-					autoFocus
-					fullWidth
-					size={ SIZE }
-					value={ searchValue }
-					placeholder={ __( 'Search', 'elementor' ) }
-					onChange={ handleSearch }
-					InputProps={ {
-						startAdornment: (
-							<InputAdornment position="start">
-								<SearchIcon fontSize={ SIZE } />
-							</InputAdornment>
-						),
-					} }
-				/>
-			</Box>
+			<PopoverSearch
+				value={ searchValue }
+				onSearch={ handleSearch }
+				placeholder={ __( 'Search', 'elementor' ) }
+			/>
 			<Divider />
 			{ filteredFontFamilies.length > 0 ? (
 				<FontList
@@ -85,7 +59,7 @@ export const FontFamilySelector = ( {
 					fontFamily={ fontFamily }
 				/>
 			) : (
-				<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+				<PopoverScrollableContent>
 					<Stack alignItems="center" p={ 2.5 } gap={ 1.5 } overflow={ 'hidden' }>
 						<TextIcon fontSize="large" />
 						<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
@@ -120,7 +94,7 @@ export const FontFamilySelector = ( {
 							</Link>
 						</Typography>
 					</Stack>
-				</Box>
+				</PopoverScrollableContent>
 			) }
 		</Stack>
 	);
@@ -133,11 +107,7 @@ type FontListProps = {
 	fontFamily: string | null;
 };
 
-const LIST_ITEM_HEIGHT = 36;
-const LIST_ITEMS_BUFFER = 6;
-
 const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: FontListProps ) => {
-	const containerRef = useRef< HTMLDivElement >( null );
 	const selectedItem = fontListItems.find( ( item ) => item.value === fontFamily );
 
 	const debouncedVirtualizeChange = useDebounce( ( { getVirtualIndexes }: { getVirtualIndexes: () => number[] } ) => {
@@ -149,131 +119,20 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 		} );
 	}, 100 );
 
-	const virtualizer = useVirtualizer( {
-		count: fontListItems.length,
-		getScrollElement: () => containerRef.current,
-		estimateSize: () => LIST_ITEM_HEIGHT,
-		overscan: LIST_ITEMS_BUFFER,
-		onChange: debouncedVirtualizeChange,
-	} );
-
-	useEffect(
-		() => {
-			virtualizer.scrollToIndex( fontListItems.findIndex( ( item ) => item.value === fontFamily ) );
-		},
-		// eslint-disable-next-line react-compiler/react-compiler
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ fontFamily ]
-	);
-
 	return (
-		<Box
-			ref={ containerRef }
-			sx={ {
-				overflowY: 'auto',
-				height: 260,
-				width: 220,
-			} }
-		>
-			<StyledMenuList
-				role="listbox"
-				style={ {
-					height: `${ virtualizer.getTotalSize() }px`,
-				} }
-				data-testid="font-list"
-			>
-				{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
-					const item = fontListItems[ virtualRow.index ];
-					const isLast = virtualRow.index === fontListItems.length - 1;
-					// Ignore the first item, which is a category, and use the second item instead.
-					const isFirst = virtualRow.index === 1;
-					const isSelected = selectedItem?.value === item.value;
-
-					// If no item is selected, the first item should be focused.
-					const tabIndexFallback = ! selectedItem ? 0 : -1;
-
-					if ( item.type === 'category' ) {
-						return (
-							<MenuSubheader
-								key={ virtualRow.key }
-								style={ {
-									transform: `translateY(${ virtualRow.start }px)`,
-								} }
-							>
-								{ item.value }
-							</MenuSubheader>
-						);
-					}
-
-					return (
-						<li
-							key={ virtualRow.key }
-							role="option"
-							aria-selected={ isSelected }
-							onClick={ () => {
-								setFontFamily( item.value );
-								handleClose();
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.key === 'Enter' ) {
-									setFontFamily( item.value );
-									handleClose();
-								}
-
-								if ( event.key === 'ArrowDown' && isLast ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-
-								if ( event.key === 'ArrowUp' && isFirst ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-							} }
-							tabIndex={ isSelected ? 0 : tabIndexFallback }
-							style={ {
-								transform: `translateY(${ virtualRow.start }px)`,
-								fontFamily: item.value,
-							} }
-						>
-							{ item.value }
-						</li>
-					);
-				} ) }
-			</StyledMenuList>
-		</Box>
+		<PopoverMenuList
+			items={ fontListItems }
+			selectedValue={ selectedItem?.value }
+			onChange={ debouncedVirtualizeChange }
+			onSelect={ setFontFamily }
+			onClose={ handleClose }
+			itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+			data-testid="font-list"
+		/>
 	);
 };
 
-const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
-	'& > li': {
-		height: LIST_ITEM_HEIGHT,
-		position: 'absolute',
-		top: 0,
-		left: 0,
-		width: '100%',
-		display: 'flex',
-		alignItems: 'center',
-	},
-	'& > [role="option"]': {
-		...theme.typography.caption,
-		lineHeight: 'inherit',
-		padding: theme.spacing( 0.75, 2, 0.75, 4 ),
-		'&:hover, &:focus': {
-			backgroundColor: theme.palette.action.hover,
-		},
-		'&[aria-selected="true"]': {
-			backgroundColor: theme.palette.action.selected,
-		},
-		cursor: 'pointer',
-		textOverflow: 'ellipsis',
-	},
-	width: '100%',
-	position: 'relative',
-} ) );
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useDebounce = < TArgs extends any[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
+const useDebounce = < TArgs extends unknown[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
 	const [ debouncedFn ] = useState( () => debounce( fn, delay ) );
 
 	useEffect( () => () => debouncedFn.cancel(), [ debouncedFn ] );

package/src/components/repeater.tsx

@@ -48,6 +48,8 @@ type RepeaterProps< T > = {
 			value: T;
 		} >;
 	};
+	showDuplicate?: boolean;
+	showToggle?: boolean;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -60,6 +62,8 @@ export const Repeater = < T, >( {
 	addToBottom = false,
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
+	showDuplicate = true,
+	showToggle = true,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -195,6 +199,8 @@ export const Repeater = < T, >( {
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 									openOnMount={ openOnAdd && openItem === key }
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
+									showDuplicate={ showDuplicate }
+									showToggle={ showToggle }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -219,6 +225,8 @@ type RepeaterItemProps = {
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
+	showDuplicate: boolean;
+	showToggle: boolean;
 	disabled?: boolean;
 };
 
@@ -232,6 +240,8 @@ const RepeaterItem = ( {
 	toggleDisableItem,
 	openOnMount,
 	onOpen,
+	showDuplicate,
+	showToggle,
 	disabled,
 }: RepeaterItemProps ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
@@ -255,16 +265,20 @@ const RepeaterItem = ( {
 				startIcon={ startIcon }
 				actions={
 					<>
-						<Tooltip title={ duplicateLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
-								<CopyIcon fontSize={ SIZE } />
-							</IconButton>
-						</Tooltip>
-						<Tooltip title={ toggleLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
-								{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-							</IconButton>
-						</Tooltip>
+						{ showDuplicate && (
+							<Tooltip title={ duplicateLabel } placement="top">
+								<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
+									<CopyIcon fontSize={ SIZE } />
+								</IconButton>
+							</Tooltip>
+						) }
+						{ showToggle && (
+							<Tooltip title={ toggleLabel } placement="top">
+								<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
+									{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+								</IconButton>
+							</Tooltip>
+						) }
 						<Tooltip title={ removeLabel } placement="top">
 							<IconButton size={ SIZE } onClick={ removeItem } aria-label={ removeLabel }>
 								<XIcon fontSize={ SIZE } />

package/src/controls/key-value-control.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { type ChangeEvent, useMemo, useState } from 'react';
+import { keyValuePropTypeUtil } from '@elementor/editor-props';
+import { FormHelperText, FormLabel, Grid, type SxProps, TextField, type Theme } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+type FieldType = 'key' | 'value';
+
+type KeyValueControlProps = {
+	keyName?: string;
+	valueName?: string;
+	sx?: SxProps< Theme >;
+	regexKey?: string;
+	regexValue?: string;
+	validationErrorMessage?: string;
+};
+
+export const KeyValueControl = createControl( ( props: KeyValueControlProps = {} ) => {
+	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
+	const [ keyError, setKeyError ] = useState< string | null >( null );
+	const [ valueError, setValueError ] = useState< string | null >( null );
+	const keyLabel = props.keyName || __( 'Key', 'elementor' );
+	const valueLabel = props.valueName || __( 'Value', 'elementor' );
+
+	const keyValue = value?.key?.value || '';
+	const valueValue = value?.value?.value || '';
+
+	const [ keyRegex, valueRegex, errMsg ] = useMemo< [ RegExp | undefined, RegExp | undefined, string ] >(
+		() => [
+			props.regexKey ? new RegExp( props.regexKey ) : undefined,
+			props.regexValue ? new RegExp( props.regexValue ) : undefined,
+			props.validationErrorMessage || __( 'Invalid Format', 'elementor' ),
+		],
+		[ props.regexKey, props.regexValue, props.validationErrorMessage ]
+	);
+
+	const validate = ( newValue: string, FieldType: string ): void => {
+		if ( FieldType === 'key' && keyRegex ) {
+			const isValid = keyRegex.test( newValue );
+			setKeyError( isValid ? null : errMsg );
+		} else if ( FieldType === 'value' && valueRegex ) {
+			const isValid = valueRegex.test( newValue );
+			setValueError( isValid ? null : errMsg );
+		}
+	};
+
+	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
+		const newValue = event.target.value;
+
+		validate( newValue, fieldType );
+
+		setValue( {
+			...value,
+			[ fieldType ]: {
+				value: newValue,
+				$$type: 'string',
+			},
+		} );
+	};
+
+	const isKeyInvalid = keyError !== null;
+	const isValueInvalid = valueError !== null;
+
+	return (
+		<ControlActions>
+			<Grid container gap={ 1.5 } p={ 1.5 } sx={ props.sx }>
+				<Grid item xs={ 12 }>
+					<FormLabel size="tiny">{ keyLabel }</FormLabel>
+					<TextField
+						sx={ { pt: 1 } }
+						size="tiny"
+						fullWidth
+						value={ keyValue }
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
+						error={ isKeyInvalid }
+					/>
+					{ isKeyInvalid && <FormHelperText error>{ keyError }</FormHelperText> }
+				</Grid>
+				<Grid item xs={ 12 }>
+					<FormLabel size="tiny">{ valueLabel }</FormLabel>
+					<TextField
+						sx={ { pt: 1 } }
+						size="tiny"
+						fullWidth
+						value={ valueValue }
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
+						disabled={ isKeyInvalid }
+						error={ isValueInvalid }
+					/>
+					{ isValueInvalid && <FormHelperText error>{ valueError }</FormHelperText> }
+				</Grid>
+			</Grid>
+		</ControlActions>
+	);
+} );

package/src/controls/position-control.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { positionPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { LetterXIcon, LetterYIcon } from '@elementor/icons';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
+import { SizeControl } from './size-control';
+
+type Positions =
+	| 'center center'
+	| 'center left'
+	| 'center right'
+	| 'top center'
+	| 'top left'
+	| 'top right'
+	| 'bottom center'
+	| 'bottom left'
+	| 'bottom right'
+	| 'custom';
+
+const positionOptions = [
+	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
+	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
+	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
+	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
+	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
+	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
+	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
+	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
+	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
+];
+
+export const PositionControl = () => {
+	const positionContext = useBoundProp( positionPropTypeUtil );
+	const stringPropContext = useBoundProp( stringPropTypeUtil );
+
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+	const isCustom = !! positionContext.value && isVersion331Active;
+
+	const availablePositionOptions = useMemo( () => {
+		const options = [ ...positionOptions ];
+
+		if ( isVersion331Active ) {
+			options.push( { label: __( 'Custom', 'elementor' ), value: 'custom' } );
+		}
+
+		return options;
+	}, [ isVersion331Active ] );
+
+	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
+		const value = event.target.value || null;
+
+		if ( value === 'custom' && isVersion331Active ) {
+			positionContext.setValue( { x: null, y: null } );
+		} else {
+			stringPropContext.setValue( value );
+		}
+	};
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<Grid item xs={ 12 }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlFormLabel>{ __( 'Object position', 'elementor' ) }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+						<Select
+							size="tiny"
+							disabled={ stringPropContext.disabled }
+							value={ ( positionContext.value ? 'custom' : stringPropContext.value ) ?? '' }
+							onChange={ handlePositionChange }
+							fullWidth
+						>
+							{ availablePositionOptions.map( ( { label, value } ) => (
+								<MenuListItem key={ value } value={ value ?? '' }>
+									{ label }
+								</MenuListItem>
+							) ) }
+						</Select>
+					</Grid>
+				</Grid>
+			</Grid>
+			{ isCustom && (
+				<PropProvider { ...positionContext }>
+					<Grid item xs={ 12 }>
+						<Grid container spacing={ 1.5 }>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'x' }>
+									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'y' }>
+									<SizeControl startIcon={ <LetterYIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+						</Grid>
+					</Grid>
+				</PropProvider>
+			) }
+		</Grid>
+	);
+};

package/src/controls/repeatable-control.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { PopoverContent } from '../components/popover-content';
+import { PopoverGridContainer } from '../components/popover-grid-container';
+import { Repeater } from '../components/repeater';
+import { createControl } from '../create-control';
+import {
+	type ChildControlConfig,
+	RepeatableControlContext,
+	useRepeatableControlContext,
+} from '../hooks/use-repeatable-control-context';
+
+type RepeatableControlProps = {
+	label: string;
+	childControlConfig: ChildControlConfig;
+	showDuplicate?: boolean;
+	showToggle?: boolean;
+};
+
+export const RepeatableControl = createControl(
+	( { label, childControlConfig, showDuplicate, showToggle }: RepeatableControlProps ) => {
+		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+
+		if ( ! childPropTypeUtil ) {
+			return null;
+		}
+
+		const childArrayPropTypeUtil = useMemo(
+			() => createArrayPropUtils( childPropTypeUtil.key, childPropTypeUtil.schema ),
+			[ childPropTypeUtil.key, childPropTypeUtil.schema ]
+		);
+
+		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
+
+		return (
+			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+				<RepeatableControlContext.Provider value={ childControlConfig }>
+					<Repeater
+						openOnAdd
+						values={ value ?? [] }
+						setValues={ setValue }
+						label={ label }
+						itemSettings={ {
+							Icon: ItemIcon,
+							Label: ItemLabel,
+							Content: ItemContent,
+							initialValues: childPropTypeUtil.create( null ),
+						} }
+						showDuplicate={ showDuplicate }
+						showToggle={ showToggle }
+					/>
+				</RepeatableControlContext.Provider>
+			</PropProvider>
+		);
+	}
+);
+
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content />
+		</PropKeyProvider>
+	);
+};
+
+// TODO: Configurable icon probably can be somehow part of the injected control and bubbled up to the repeater
+const ItemIcon = () => <></>;
+
+const Content = () => {
+	const { component: ChildControl, props = {} } = useRepeatableControlContext();
+
+	return (
+		<PopoverContent p={ 1.5 }>
+			<PopoverGridContainer>
+				<ChildControl { ...props } />
+			</PopoverGridContainer>
+		</PopoverContent>
+	);
+};
+
+const ItemLabel = () => {
+	const { label = __( 'Empty', 'elementor' ) } = useRepeatableControlContext();
+
+	return <span>{ label }</span>;
+};