@elementor/editor-controls 1.3.0 → 1.5.0

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

@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { type ChangeEvent, useMemo, useState } from 'react';
-import { keyValuePropTypeUtil } from '@elementor/editor-props';
-import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
+import { useMemo, useState } from 'react';
+import {
+	type CreateOptions,
+	isTransformable,
+	keyValuePropTypeUtil,
+	type PropKey,
+	type Props,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
+import { FormHelperText, FormLabel, Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useBoundProp } from '../bound-prop-context';
-import ControlActions from '../control-actions/control-actions';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { createControl } from '../create-control';
-
-type FieldType = 'key' | 'value';
+import { TextControl } from './text-control';
 
 type KeyValueControlProps = {
 	keyName?: string;
@@ -19,9 +24,9 @@ type KeyValueControlProps = {
 };
 
 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 { value, setValue, ...propContext } = useBoundProp( keyValuePropTypeUtil );
+	const [ keyError, setKeyError ] = useState< string >( '' );
+	const [ valueError, setValueError ] = useState< string >( '' );
 
 	const [ sessionState, setSessionState ] = useState( {
 		key: value?.key?.value || '',
@@ -43,31 +48,48 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 	const validate = ( newValue: string, fieldType: string ): boolean => {
 		if ( fieldType === 'key' && keyRegex ) {
 			const isValid = keyRegex.test( newValue );
-			setKeyError( isValid ? null : errMsg );
+			setKeyError( isValid ? '' : errMsg );
+
 			return isValid;
 		} else if ( fieldType === 'value' && valueRegex ) {
 			const isValid = valueRegex.test( newValue );
-			setValueError( isValid ? null : errMsg );
+			setValueError( isValid ? '' : errMsg );
+
 			return isValid;
 		}
+
 		return true;
 	};
 
-	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
-		const newValue = event.target.value;
+	const handleChange = ( newValue: Props, options?: CreateOptions, meta?: { bind?: PropKey } ) => {
+		const fieldType = meta?.bind;
+
+		if ( ! fieldType ) {
+			return;
+		}
+
+		const newChangedValue = newValue[ fieldType ];
+
+		if ( isTransformable( newChangedValue ) && newChangedValue.$$type === 'dynamic' ) {
+			setValue( {
+				...value,
+				[ fieldType ]: newChangedValue,
+			} );
+
+			return;
+		}
+
+		const extractedValue = stringPropTypeUtil.extract( newChangedValue );
 
 		setSessionState( ( prev ) => ( {
 			...prev,
-			[ fieldType ]: newValue,
+			[ fieldType ]: extractedValue,
 		} ) );
 
-		if ( validate( newValue, fieldType ) ) {
+		if ( extractedValue && validate( extractedValue, fieldType ) ) {
 			setValue( {
 				...value,
-				[ fieldType ]: {
-					value: newValue,
-					$$type: 'string',
-				},
+				[ fieldType ]: newChangedValue,
 			} );
 		} else {
 			setValue( {
@@ -80,40 +102,29 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 		}
 	};
 
-	const isKeyInvalid = keyError !== null;
-	const isValueInvalid = valueError !== null;
-
 	return (
-		<ControlActions>
+		<PropProvider { ...propContext } value={ value } setValue={ handleChange }>
 			<Grid container gap={ 1.5 }>
 				<Grid item xs={ 12 }>
 					<FormLabel size="tiny">{ keyLabel }</FormLabel>
-					<TextField
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus
-						sx={ { pt: 1 } }
-						size="tiny"
-						fullWidth
-						value={ sessionState.key }
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
-						error={ isKeyInvalid }
-					/>
-					{ isKeyInvalid && <FormHelperText error>{ keyError }</FormHelperText> }
+					<PropKeyProvider bind={ 'key' }>
+						<TextControl inputValue={ sessionState.key } error={ !! keyError } sx={ { pt: 1 } } />
+					</PropKeyProvider>
+					{ !! keyError && <FormHelperText error>{ keyError }</FormHelperText> }
 				</Grid>
 				<Grid item xs={ 12 }>
 					<FormLabel size="tiny">{ valueLabel }</FormLabel>
-					<TextField
-						sx={ { pt: 1 } }
-						size="tiny"
-						fullWidth
-						value={ sessionState.value }
-						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
-						disabled={ isKeyInvalid }
-						error={ isValueInvalid }
-					/>
-					{ isValueInvalid && <FormHelperText error>{ valueError }</FormHelperText> }
+					<PropKeyProvider bind={ 'value' }>
+						<TextControl
+							inputValue={ sessionState.value }
+							error={ !! valueError }
+							inputDisabled={ !! keyError }
+							sx={ { pt: 1 } }
+						/>
+					</PropKeyProvider>
+					{ !! valueError && <FormHelperText error>{ valueError }</FormHelperText> }
 				</Grid>
 			</Grid>
-		</ControlActions>
+		</PropProvider>
 	);
 } );

package/src/controls/repeatable-control.tsx

@@ -3,7 +3,6 @@ import { useMemo } from 'react';
 import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
-/* eslint-disable */
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
@@ -26,6 +25,8 @@ type RepeatableControlProps = {
 	placeholder?: string;
 };
 
+const PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
+
 export const RepeatableControl = createControl(
 	( {
 		repeaterLabel,
@@ -48,17 +49,16 @@ export const RepeatableControl = createControl(
 		);
 
 		const contextValue = useMemo(
-			() => ({
+			() => ( {
 				...childControlConfig,
 				placeholder: placeholder || '',
 				patternLabel: patternLabel || '',
-			}),
+			} ),
 			[ childControlConfig, placeholder, patternLabel ]
 		);
 
 		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
 
-
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
 				<RepeatableControlContext.Provider value={ contextValue }>
@@ -106,42 +106,63 @@ const Content = () => {
 	);
 };
 
-const interpolate = ( template: string, data: object ) => {
+const interpolate = ( template: string, data: Record< string, unknown > ) => {
 	if ( ! data ) {
 		return template;
 	}
 
-	return new Function( ...Object.keys( data ), `return \`${ template }\`;` )( ...Object.values( data ) );
+	return template.replace( PLACEHOLDER_REGEX, ( _, path ): string => {
+		const value = getNestedValue( data, path );
+
+		if ( typeof value === 'object' && value !== null && ! Array.isArray( value ) ) {
+			if ( value.name ) {
+				return value.name as string;
+			}
+
+			return JSON.stringify( value );
+		}
+
+		if ( Array.isArray( value ) ) {
+			return value.join( ', ' );
+		}
+
+		return String( value ?? '' );
+	} );
 };
 
-const getNestedValue = ( obj: any, path: string ) => {
-    return path.split( '.' ).reduce( ( current, key ) => current?.[key], obj);
+const getNestedValue = ( obj: Record< string, unknown >, path: string ) => {
+	return path.split( '.' ).reduce( ( current: Record< string, unknown >, key ) => {
+		if ( current && typeof current === 'object' ) {
+			return current[ key ] as Record< string, unknown >;
+		}
+		return {};
+	}, obj );
 };
 
-const isEmptyValue = (val: unknown) => {
-    if ( typeof val === 'string' ) {
-        return val.trim() === '';
-    }
+const isEmptyValue = ( val: unknown ) => {
+	if ( typeof val === 'string' ) {
+		return val.trim() === '';
+	}
 
-    if ( Number.isNaN( val ) ) {
-        return true;
-    }
+	if ( Number.isNaN( val ) ) {
+		return true;
+	}
 
-    if ( Array.isArray( val ) ) {
-        return val.length === 0;
-    }
+	if ( Array.isArray( val ) ) {
+		return val.length === 0;
+	}
 
-    if ( typeof val === 'object' && val !== null && Object.keys( val ).length === 0 ) {
-        return true;
-    }
+	if ( typeof val === 'object' && val !== null ) {
+		return Object.keys( val ).length === 0;
+	}
 
-    return false;
+	return false;
 };
 
-const shouldShowPlaceholder = ( pattern: string, data: unknown ): boolean => {
+const shouldShowPlaceholder = ( pattern: string, data: Record< string, unknown > ): boolean => {
 	const propertyPaths = getAllProperties( pattern );
 
-	const values = propertyPaths.map( path => getNestedValue( data, path ) );
+	const values = propertyPaths.map( ( path ) => getNestedValue( data, path ) );
 
 	if ( values.length === 0 ) {
 		return false;
@@ -158,7 +179,7 @@ const shouldShowPlaceholder = ( pattern: string, data: unknown ): boolean => {
 	return false;
 };
 
-const ItemLabel = ( { value }: { value: any } ) => {
+const ItemLabel = ( { value }: { value: Record< string, unknown > } ) => {
 	const { placeholder, patternLabel } = useRepeatableControlContext();
 
 	const label = shouldShowPlaceholder( patternLabel, value ) ? placeholder : interpolate( patternLabel, value );
@@ -171,9 +192,7 @@ const ItemLabel = ( { value }: { value: any } ) => {
 };
 
 const getAllProperties = ( pattern: string ) => {
-	const properties = pattern.match(/\$\{([^}]+)\}/g)?.map(match =>
-		match.slice(2, -1)
-	) || [];
+	const properties = pattern.match( PLACEHOLDER_REGEX )?.map( ( match ) => match.slice( 2, -1 ) ) || [];
 
 	return properties;
-};
+};

package/src/controls/size-control.tsx

@@ -10,7 +10,13 @@ import { TextFieldPopover } from '../components/text-field-popover';
 import { createControl } from '../create-control';
 import { useSizeExtendedOptions } from '../hooks/use-size-extended-options';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { defaultUnits, type ExtendedOption, isUnitExtendedOption, type Unit } from '../utils/size-control';
+import {
+	defaultUnits,
+	type DegreeUnit,
+	type ExtendedOption,
+	isUnitExtendedOption,
+	type Unit,
+} from '../utils/size-control';
 
 const DEFAULT_UNIT = 'px';
 const DEFAULT_SIZE = NaN;
@@ -20,17 +26,17 @@ type SizeValue = SizePropValue[ 'value' ];
 type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units?: Unit[];
+	units?: ( Unit | DegreeUnit )[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
 	anchorRef?: RefObject< HTMLDivElement | null >;
-	defaultUnit?: Unit;
+	defaultUnit?: Unit | DegreeUnit;
 };
 
 type State = {
 	numeric: number;
 	custom: string;
-	unit: Unit | ExtendedOption;
+	unit: Unit | DegreeUnit | ExtendedOption;
 };
 
 export const SizeControl = createControl( ( props: SizeControlProps ) => {
@@ -58,15 +64,15 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 			return !! newState?.numeric || newState?.numeric === 0;
 		},
 		fallback: ( newState ) => ( {
-			unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
+			unit: newState?.unit ?? defaultUnit,
 			numeric: newState?.numeric ?? DEFAULT_SIZE,
 			custom: newState?.custom ?? '',
 		} ),
 	} );
 
-	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = DEFAULT_UNIT } = extractValueFromState( state ) || {};
+	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = defaultUnit } = extractValueFromState( state ) || {};
 
-	const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+	const handleUnitChange = ( newUnit: Unit | DegreeUnit | ExtendedOption ) => {
 		if ( newUnit === 'custom' ) {
 			popupState.open( anchorRef?.current );
 		}
@@ -103,9 +109,13 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	};
 
 	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
-		const currentUnit = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
-		const mergedStates = { ...state, [ currentUnit ]: newState[ currentUnit ] };
+		const newState = createStateFromSizeProp( sizeValue, state.unit === 'custom' ? state.unit : defaultUnit );
+		const currentUnitType = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
+		const mergedStates = {
+			...state,
+			unit: newState.unit ?? state.unit,
+			[ currentUnitType ]: newState[ currentUnitType ],
+		};
 
 		if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
 			return;
@@ -159,7 +169,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 	);
 } );
 
-function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
+function formatSize< TSize extends string | number >( size: TSize, unit: Unit | DegreeUnit | ExtendedOption ): TSize {
 	if ( isUnitExtendedOption( unit ) ) {
 		return unit === 'auto' ? ( '' as TSize ) : ( String( size ?? '' ) as TSize );
 	}
@@ -167,7 +177,10 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 	return size || size === 0 ? ( Number( size ) as TSize ) : ( NaN as TSize );
 }
 
-function createStateFromSizeProp( sizeValue: SizeValue | null, defaultUnit: Unit ): State {
+function createStateFromSizeProp(
+	sizeValue: SizeValue | null,
+	defaultUnit: Unit | DegreeUnit | ExtendedOption
+): State {
 	const unit = sizeValue?.unit ?? defaultUnit;
 	const size = sizeValue?.size ?? '';
 

package/src/controls/text-control.tsx

@@ -1,26 +1,41 @@
 import * as React from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { TextField } from '@elementor/ui';
+import { type SxProps, TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+export const TextControl = createControl(
+	( {
+		placeholder,
+		error,
+		inputValue,
+		inputDisabled,
+		sx,
+	}: {
+		placeholder?: string;
+		error?: boolean;
+		inputValue?: string;
+		inputDisabled?: boolean;
+		sx?: SxProps;
+	} ) => {
+		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				fullWidth
-				disabled={ disabled }
-				value={ value ?? '' }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );
+		return (
+			<ControlActions>
+				<TextField
+					size="tiny"
+					fullWidth
+					disabled={ inputDisabled ?? disabled }
+					value={ inputValue ?? value ?? '' }
+					onChange={ handleChange }
+					placeholder={ placeholder }
+					error={ error }
+					sx={ sx }
+				/>
+			</ControlActions>
+		);
+	}
+);

package/src/utils/size-control.ts

@@ -1,10 +1,12 @@
 export const defaultUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ] as const;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const degreeUnits = [ 'deg', 'rad', 'grad', 'turn' ] as const;
 const defaultExtendedOptions = [ 'auto', 'custom' ] as const;
 
 export type Unit = ( typeof defaultUnits )[ number ];
-
+export type DegreeUnit = ( typeof degreeUnits )[ number ];
 export type ExtendedOption = ( typeof defaultExtendedOptions )[ number ];
 
-export function isUnitExtendedOption( unit: Unit | ExtendedOption ): unit is ExtendedOption {
+export function isUnitExtendedOption( unit: Unit | DegreeUnit | ExtendedOption ): unit is ExtendedOption {
 	return defaultExtendedOptions.includes( unit as ExtendedOption );
 }