@elementor/editor-controls 0.7.0 → 0.9.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": "0.7.0",
+  "version": "0.9.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.8.0",
-    "@elementor/icons": "1.24.0",
+    "@elementor/editor-props": "0.9.0",
+    "@elementor/env": "0.3.5",
+    "@elementor/http": "0.1.3",
+    "@elementor/icons": "1.31.0",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.23.3",
-    "@elementor/utils": "0.3.0",
-    "@elementor/wp-media": "0.4.0",
+    "@elementor/ui": "1.26.0",
+    "@elementor/utils": "0.3.1",
+    "@elementor/wp-media": "0.4.1",
     "@wordpress/i18n": "^5.13.0"
   },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  },
   "peerDependencies": {
     "react": "^18.3.1"
   }

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

@@ -22,7 +22,7 @@ export type PropKeyContextValue< T, P > = {
 	path: PropKey[];
 };
 
-export const PropKeyContext = createContext< PropKeyContextValue< PropValue, PropType > | null >( null );
+const PropKeyContext = createContext< PropKeyContextValue< PropValue, PropType > | null >( null );
 
 type PropKeyProviderProps = React.PropsWithChildren< {
 	bind: PropKey;

package/src/components/repeater.tsx

@@ -24,9 +24,10 @@ type Item< T > = {
 	disabled?: boolean;
 } & T;
 
-export type RepeaterProps< T > = {
+type RepeaterProps< T > = {
 	label: string;
 	values?: T[];
+	addToBottom?: boolean;
 	setValues: ( newValue: T[] ) => void;
 	itemSettings: {
 		initialValues: T;
@@ -43,13 +44,18 @@ export type RepeaterProps< T > = {
 export const Repeater = < T, >( {
 	label,
 	itemSettings,
+	addToBottom = false,
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
 }: RepeaterProps< Item< T > > ) => {
 	const addRepeaterItem = () => {
 		const newItem = structuredClone( itemSettings.initialValues );
 
-		setRepeaterValues( [ ...repeaterValues, newItem ] );
+		if ( addToBottom ) {
+			return setRepeaterValues( [ ...repeaterValues, newItem ] );
+		}
+
+		setRepeaterValues( [ newItem, ...repeaterValues ] );
 	};
 
 	const duplicateRepeaterItem = ( index: number ) => {
@@ -181,13 +187,13 @@ const RepeaterItem = ( {
 				slotProps={ {
 					paper: {
 						ref: setAnchorEl,
-						sx: { mt: 0.5, p: 1, pt: 1, width: controlRef.current?.getBoundingClientRect().width },
+						sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width },
 					},
 				} }
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
 				{ ...popoverProps }
 			>
-				<Box p={ 0.5 }>{ children( { anchorEl } ) }</Box>
+				<Box>{ children( { anchorEl } ) }</Box>
 			</Popover>
 		</>
 	);

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

@@ -3,7 +3,7 @@ import { forwardRef, useId } from 'react';
 import { type PropValue } from '@elementor/editor-props';
 import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
 
-export type TextFieldInnerSelectionProps = {
+type TextFieldInnerSelectionProps = {
 	placeholder?: string;
 	type: string;
 	value: PropValue;
@@ -32,7 +32,7 @@ export const TextFieldInnerSelection = forwardRef(
 	}
 );
 
-export type SelectionEndAdornmentProps< T extends string > = {
+type SelectionEndAdornmentProps< T extends string > = {
 	options: T[];
 	onClick: ( value: T ) => void;
 	value: T;

package/src/control-actions/control-actions-context.tsx

@@ -12,7 +12,7 @@ type ControlActionsContext = {
 
 const Context = createContext< ControlActionsContext | null >( null );
 
-export type ControlActionsProviderProps = PropsWithChildren< ControlActionsContext >;
+type ControlActionsProviderProps = PropsWithChildren< ControlActionsContext >;
 
 export const ControlActionsProvider = ( { children, items }: ControlActionsProviderProps ) => (
 	<Context.Provider value={ { items } }>{ children }</Context.Provider>

package/src/control-actions/control-actions.tsx

@@ -13,7 +13,7 @@ const FloatingBarContainer = styled( 'span' )`
 	}
 `;
 
-export type ControlActionsProps = PropsWithChildren< object >;
+type ControlActionsProps = PropsWithChildren< object >;
 
 export default function ControlActions( { children }: ControlActionsProps ) {
 	const { items } = useControlActions();

package/src/controls/autocomplete-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { stringPropTypeUtil, type urlPropTypeUtil } from '@elementor/editor-props';
+import { type PropTypeUtil } from '@elementor/editor-props';
 import { XIcon } from '@elementor/icons';
 import {
 	Autocomplete,
@@ -11,107 +11,103 @@ import {
 } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export type Option = {
+export type FlatOption = {
+	id: string;
 	label: string;
 	groupLabel?: never;
 };
 
-export type GroupedOption = {
+export type CategorizedOption = {
+	id: string;
 	label: string;
 	groupLabel: string;
 };
 
-type Props = {
-	options: Record< string, Option > | Record< string, GroupedOption >;
+export type Props< TOptionKey extends string, TCustomKey extends string = '' > = {
+	options: FlatOption[] | CategorizedOption[];
+	optionRestrictedPropTypeUtil: PropTypeUtil< TOptionKey, number | null >;
+	onOptionChangeCallback?: ( newValue: number | null ) => void;
+	onTextChangeCallback?: ( newValue: string | null ) => void;
 	allowCustomValues?: boolean;
 	placeholder?: string;
-	propType?: typeof urlPropTypeUtil | typeof stringPropTypeUtil;
 	minInputLength?: number;
+	customValue?: TCustomKey;
 };
 
 export const AutocompleteControl = createControl(
-	( {
-		options,
-		placeholder = '',
-		allowCustomValues = false,
-		propType = stringPropTypeUtil,
-		minInputLength = 2,
-	}: Props ) => {
-		const { value = '', setValue } = useBoundProp( propType );
-
-		const hasSelectedValue = !! (
-			value &&
-			( options[ value ] || Object.values( options ).find( ( { label } ) => label === value ) )
+	< TOptionKey extends string, TCustomKey extends string >( props: Props< TOptionKey, TCustomKey > ) => {
+		const {
+			options,
+			optionRestrictedPropTypeUtil,
+			onOptionChangeCallback,
+			onTextChangeCallback,
+			allowCustomValues = false,
+			placeholder = '',
+			minInputLength = 2,
+			customValue,
+		} = props;
+
+		const { value: selectableValue, setValue: setSelectableValue } = useBoundProp( optionRestrictedPropTypeUtil );
+
+		const value = selectableValue || customValue || '';
+
+		const optionKeys = _factoryFilter( selectableValue || customValue || null, options, minInputLength ).map(
+			( { id } ) => id
 		);
 		const allowClear = !! value;
-		const formattedOptions = Object.keys( options );
 
-		const onOptionSelect = ( _: React.SyntheticEvent | null, newValue: string | null ) => {
-			setValue( newValue );
+		// Prevents MUI warning when freeSolo/allowCustomValues is false
+		const muiWarningPreventer = allowCustomValues || !! value?.toString()?.length;
+		const isOptionEqualToValue = () => {
+			return muiWarningPreventer ? undefined : () => true;
 		};
+		const hasSelectedValue = !! findMatchingOption( options, selectableValue?.toString() );
 
-		const handleChange = ( newValue: string | null ) => {
-			setValue( newValue );
+		const onOptionChange = ( newValue: number | null ) => {
+			setSelectableValue( newValue );
+			onOptionChangeCallback?.( newValue );
 		};
 
-		const filterOptions = ( _: string[], { inputValue }: { inputValue: string | null } ) => {
-			const formattedValue = inputValue?.toLowerCase() || '';
-
-			if ( formattedValue.length < minInputLength ) {
-				return [];
-			}
-
-			return formattedOptions.filter(
-				( optionValue ) =>
-					optionValue.toLowerCase().indexOf( formattedValue ) !== -1 ||
-					options[ optionValue ].label.toLowerCase().indexOf( formattedValue ) !== -1
-			);
+		const onTextChange = ( newValue: string | null ) => {
+			onTextChangeCallback?.( newValue );
 		};
 
-		const isOptionEqualToValue = () => {
-			return muiWarningPreventer() ? undefined : () => true;
-		};
-
-		// Prevents MUI warning when freeSolo/allowCustomValues is false
-		const muiWarningPreventer = () => allowCustomValues || !! filterOptions( [], { inputValue: value } ).length;
-
 		return (
-			<ControlActions>
-				<Autocomplete
-					forcePopupIcon={ false }
-					disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
-					freeSolo={ muiWarningPreventer() }
-					value={ value || '' }
-					size={ 'tiny' }
-					onChange={ onOptionSelect }
-					readOnly={ hasSelectedValue }
-					options={ formattedOptions }
-					getOptionKey={ ( option ) => option }
-					getOptionLabel={ ( option ) => options[ option ]?.label ?? option }
-					groupBy={
-						shouldGroupOptions( options ) ? ( option: string ) => options[ option ]?.groupLabel : undefined
-					}
-					isOptionEqualToValue={ isOptionEqualToValue() }
-					filterOptions={ filterOptions }
-					renderOption={ ( optionProps, option ) => (
-						<Box component="li" { ...optionProps } key={ optionProps.id }>
-							{ options[ option ]?.label ?? option }
-						</Box>
-					) }
-					renderInput={ ( params ) => (
-						<TextInput
-							params={ params }
-							handleChange={ handleChange }
-							allowClear={ allowClear }
-							placeholder={ placeholder }
-							hasSelectedValue={ hasSelectedValue }
-						/>
-					) }
-				/>
-			</ControlActions>
+			<Autocomplete
+				forcePopupIcon={ false }
+				disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
+				freeSolo={ allowCustomValues }
+				value={ value?.toString() || '' }
+				size={ 'tiny' }
+				onChange={ ( _, newValue ) => onOptionChange( Number( newValue ) ) }
+				readOnly={ hasSelectedValue }
+				options={ optionKeys }
+				getOptionKey={ ( optionId ) => findMatchingOption( options, optionId )?.id || optionId }
+				getOptionLabel={ ( optionId ) => findMatchingOption( options, optionId )?.label || optionId.toString() }
+				groupBy={
+					isCategorizedOptionPool( options )
+						? ( optionId: string ) => findMatchingOption( options, optionId )?.groupLabel || optionId
+						: undefined
+				}
+				isOptionEqualToValue={ isOptionEqualToValue() }
+				filterOptions={ () => optionKeys }
+				renderOption={ ( optionProps, optionId ) => (
+					<Box component="li" { ...optionProps } key={ optionProps.id }>
+						{ findMatchingOption( options, optionId )?.label ?? optionId }
+					</Box>
+				) }
+				renderInput={ ( params ) => (
+					<TextInput
+						params={ params }
+						handleChange={ onTextChange }
+						allowClear={ allowClear }
+						placeholder={ placeholder }
+						hasSelectedValue={ hasSelectedValue }
+					/>
+				) }
+			/>
 		);
 	}
 );
@@ -169,8 +165,31 @@ const ClearButton = ( {
 	</InputAdornment>
 );
 
-function shouldGroupOptions(
-	options: Record< string, Option | GroupedOption >
-): options is Record< string, GroupedOption > {
-	return Object.values( options ).every( ( option ) => 'groupLabel' in option );
+export function findMatchingOption( options: FlatOption[] | CategorizedOption[], optionId: string | null = null ) {
+	return options.find( ( { id } ) => optionId?.toString() === id.toString() );
+}
+
+export function isCategorizedOptionPool( options: FlatOption[] | CategorizedOption[] ): options is CategorizedOption[] {
+	return options.every( ( option ) => 'groupLabel' in option );
+}
+function _factoryFilter< T extends FlatOption[] | CategorizedOption[] >(
+	newValue: string | number | null,
+	options: T,
+	minInputLength: number
+): T {
+	if ( null === newValue ) {
+		return options;
+	}
+
+	const formattedValue = String( newValue || '' )?.toLowerCase();
+
+	if ( formattedValue.length < minInputLength ) {
+		return new Array( 0 ) as T;
+	}
+
+	return options.filter(
+		( option ) =>
+			String( option.id ).toLowerCase().includes( formattedValue ) ||
+			option.label.toLowerCase().includes( formattedValue )
+	) as T;
 }

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx

@@ -26,11 +26,11 @@ const attachmentControlOptions: ToggleButtonGroupItem< Attachment >[] = [
 
 export const BackgroundImageOverlayAttachment = () => {
 	return (
-		<Grid container gap={ 8 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 2 }>
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Attachment', 'elementor' ) }</ControlLabel>
 			</Grid>
-			<Grid item justifyContent="flex-end" xs={ 8 } sx={ { display: 'flex' } }>
+			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
 				<ToggleControl options={ attachmentControlOptions } />
 			</Grid>
 		</Grid>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -1,9 +1,24 @@
 import * as React from 'react';
-import { Grid } from '@elementor/ui';
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { LetterXIcon, LetterYIcon } from '@elementor/icons';
+import { Grid, MenuItem, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../../bound-prop-context';
 import { ControlLabel } from '../../../../components/control-label';
-import { SelectControl } from '../../../select-control';
+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 backgroundPositionOptions = [
 	{ label: __( 'Center Center', 'elementor' ), value: 'center center' },
@@ -15,17 +30,66 @@ const backgroundPositionOptions = [
 	{ label: __( 'Bottom Center', 'elementor' ), value: 'bottom center' },
 	{ label: __( 'Bottom Left', 'elementor' ), value: 'bottom left' },
 	{ label: __( 'Bottom Right', 'elementor' ), value: 'bottom right' },
+	{ label: __( 'Custom', 'elementor' ), value: 'custom' },
 ];
 
 export const BackgroundImageOverlayPosition = () => {
+	const backgroundImageOffsetContext = useBoundProp( backgroundImagePositionOffsetPropTypeUtil );
+	const stringPropContext = useBoundProp( stringPropTypeUtil );
+
+	const isCustom = !! backgroundImageOffsetContext.value;
+
+	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
+		const value = event.target.value || null;
+
+		if ( value === 'custom' ) {
+			backgroundImageOffsetContext.setValue( { x: null, y: null } );
+		} else {
+			stringPropContext.setValue( value );
+		}
+	};
+
 	return (
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 }>
-				<SelectControl options={ backgroundPositionOptions } />
+		<Grid container spacing={ 2 }>
+			<Grid item xs={ 12 }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+						<Select
+							size="tiny"
+							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
+							onChange={ handlePositionChange }
+							fullWidth
+						>
+							{ backgroundPositionOptions.map( ( { label, value } ) => (
+								<MenuItem key={ value } value={ value ?? '' }>
+									{ label }
+								</MenuItem>
+							) ) }
+						</Select>
+					</Grid>
+				</Grid>
 			</Grid>
+			{ isCustom ? (
+				<PropProvider { ...backgroundImageOffsetContext }>
+					<Grid item xs={ 12 }>
+						<Grid container spacing={ 2 }>
+							<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>
+			) : null }
 		</Grid>
 	);
 };

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx

@@ -42,7 +42,7 @@ export const BackgroundImageOverlayRepeat = () => {
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Repeat', 'elementor' ) }</ControlLabel>
 			</Grid>
-			<Grid item xs={ 6 }>
+			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
 				<ToggleControl options={ repeatControlOptions } />
 			</Grid>
 		</Grid>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -1,19 +1,31 @@
 import * as React from 'react';
-import { ArrowBarBothIcon, ArrowsMaximizeIcon } from '@elementor/icons';
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import {
+	ArrowBarBothIcon,
+	ArrowsMaximizeIcon,
+	ArrowsMoveHorizontalIcon,
+	ArrowsMoveVerticalIcon,
+	LetterAIcon,
+	PencilIcon,
+} from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../../bound-prop-context';
 import { ControlLabel } from '../../../../components/control-label';
-import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
-import { ToggleControl } from '../../../toggle-control';
+import {
+	ControlToggleButtonGroup,
+	type ToggleButtonGroupItem,
+} from '../../../../components/control-toggle-button-group';
+import { SizeControl } from '../../../size-control';
 
-type Sizes = 'auto' | 'cover' | 'contain';
+type Sizes = 'auto' | 'cover' | 'contain' | 'custom';
 
 const sizeControlOptions: ToggleButtonGroupItem< Sizes >[] = [
 	{
 		value: 'auto',
 		label: __( 'Auto', 'elementor' ),
-		renderContent: () => 'Auto',
+		renderContent: ( { size } ) => <LetterAIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
@@ -28,17 +40,65 @@ const sizeControlOptions: ToggleButtonGroupItem< Sizes >[] = [
 		renderContent: ( { size } ) => <ArrowBarBothIcon fontSize={ size } />,
 		showTooltip: true,
 	},
+	{
+		value: 'custom',
+		label: __( 'Custom', 'elementor' ),
+		renderContent: ( { size } ) => <PencilIcon fontSize={ size } />,
+		showTooltip: true,
+	},
 ];
 
 export const BackgroundImageOverlaySize = () => {
+	const backgroundImageScaleContext = useBoundProp( backgroundImageSizeScalePropTypeUtil );
+	const stringPropContext = useBoundProp( stringPropTypeUtil );
+
+	const isCustom = !! backgroundImageScaleContext.value;
+
+	const handleSizeChange = ( size: Sizes | null ) => {
+		if ( size === 'custom' ) {
+			backgroundImageScaleContext.setValue( { width: null, height: null } );
+		} else {
+			stringPropContext.setValue( size );
+		}
+	};
+
 	return (
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-				<ToggleControl options={ sizeControlOptions } />
+		<Grid container spacing={ 1.5 }>
+			<Grid item xs={ 12 }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+						<ControlToggleButtonGroup
+							exclusive
+							items={ sizeControlOptions }
+							value={
+								( backgroundImageScaleContext.value ? 'custom' : stringPropContext.value ) as Sizes
+							}
+							onChange={ handleSizeChange }
+						/>
+					</Grid>
+				</Grid>
 			</Grid>
+			{ isCustom ? (
+				<PropProvider { ...backgroundImageScaleContext }>
+					<Grid item xs={ 12 }>
+						<Grid container spacing={ 2 }>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'width' }>
+									<SizeControl startIcon={ <ArrowsMoveHorizontalIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'height' }>
+									<SizeControl startIcon={ <ArrowsMoveVerticalIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+						</Grid>
+					</Grid>
+				</PropProvider>
+			) : null }
 		</Grid>
 	);
 };