@elementor/editor-controls 0.24.0 → 0.26.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.24.0",
+  "version": "0.26.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.8.0",
-    "@elementor/editor-props": "0.11.1",
-    "@elementor/editor-ui": "0.7.0",
+    "@elementor/editor-elements": "0.8.1",
+    "@elementor/editor-props": "0.12.0",
+    "@elementor/editor-ui": "0.7.1",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
     "@elementor/icons": "1.37.0",

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

@@ -14,6 +14,7 @@ type PropContext< T extends PropValue, P extends PropType > = {
 	setValue: SetValue< T >;
 	value: T | null;
 	propType: P;
+	placeholder?: T;
 };
 
 const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
@@ -27,6 +28,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	value,
 	setValue,
 	propType,
+	placeholder,
 }: PropProviderProps< T, P > ) => {
 	return (
 		<PropContext.Provider
@@ -34,6 +36,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 				value,
 				propType,
 				setValue: setValue as SetValue< PropValue >,
+				placeholder,
 			} }
 		>
 			{ children }

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

@@ -19,6 +19,7 @@ export type PropKeyContextValue< T, P > = {
 	setValue: SetValue< T >;
 	value: T;
 	propType: P;
+	placeholder?: T;
 	path: PropKey[];
 };
 
@@ -60,12 +61,13 @@ const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	};
 
 	const value = context.value?.[ bind ];
+	const placeholder = context.placeholder?.[ bind ];
 
 	const propType = context.propType.shape[ bind ];
 
 	return (
 		<PropKeyContext.Provider
-			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+			value={ { ...context, value, setValue, placeholder, bind, propType, path: [ ...( path ?? [] ), bind ] } }
 		>
 			{ children }
 		</PropKeyContext.Provider>

package/src/bound-prop-context/use-bound-prop.ts

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
 	type CreateOptions,
 	type PropKey,
@@ -15,7 +16,9 @@ type UseBoundProp< TValue extends PropValue > = {
 	setValue: SetValue< TValue | null >;
 	value: TValue;
 	propType: PropType;
+	placeholder?: TValue;
 	path: PropKey[];
+	restoreValue: () => void;
 };
 
 export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;
@@ -29,12 +32,18 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 ) {
 	const propKeyContext = usePropKeyContext();
 
+	const { isValid, validate, restoreValue } = useValidation( propKeyContext.propType );
+
 	// allow using the hook without a propTypeUtil, with no modifications or validations.
 	if ( ! propTypeUtil ) {
 		return propKeyContext;
 	}
 
 	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
+		if ( ! validate( value ) ) {
+			return;
+		}
+
 		if ( value === null ) {
 			return propKeyContext?.setValue( null, options, meta );
 		}
@@ -45,15 +54,45 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 	const propType = resolveUnionPropType( propKeyContext.propType, propTypeUtil.key );
 
 	const value = propTypeUtil.extract( propKeyContext.value ?? propType.default ?? null );
+	const placeholder = propTypeUtil.extract( propKeyContext.placeholder ?? null );
 
 	return {
 		...propKeyContext,
-		setValue,
-		value,
 		propType,
+		setValue,
+		value: isValid ? value : null,
+		restoreValue,
+		placeholder,
 	};
 }
 
+const useValidation = ( propType: PropType ) => {
+	const [ isValid, setIsValid ] = useState( true );
+
+	// If the value does not pass the prop type validation, set the isValid state to false.
+	// This will prevent the value from being set in the model, and its fallback will be used instead.
+	const validate = ( value: PropValue | null ) => {
+		let valid = true;
+
+		if ( propType.settings.required && value === null ) {
+			valid = false;
+		}
+
+		setIsValid( valid );
+
+		return valid;
+	};
+
+	const restoreValue = () => setIsValid( true );
+
+	return {
+		isValid,
+		setIsValid,
+		validate,
+		restoreValue,
+	};
+};
+
 // utils
 const resolveUnionPropType = ( propType: PropType, key: string ): PropType => {
 	let resolvedPropType = propType;

package/src/components/repeater.tsx

@@ -142,7 +142,13 @@ export const Repeater = < T, >( {
 
 	return (
 		<SectionContent>
-			<Stack direction="row" justifyContent="start" alignItems="center" gap={ 1 }>
+			<Stack
+				direction="row"
+				justifyContent="start"
+				alignItems="center"
+				gap={ 1 }
+				sx={ { marginInlineEnd: -0.75 } }
+			>
 				<Typography component="label" variant="caption" color="text.secondary">
 					{ label }
 				</Typography>

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

@@ -9,25 +9,41 @@ type TextFieldInnerSelectionProps = {
 	type: string;
 	value: PropValue;
 	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	endAdornment: React.ReactNode;
 	startAdornment?: React.ReactNode;
 };
 
 export const TextFieldInnerSelection = forwardRef(
-	( { placeholder, type, value, onChange, endAdornment, startAdornment }: TextFieldInnerSelectionProps, ref ) => {
+	(
+		{
+			placeholder,
+			type,
+			value,
+			onChange,
+			onBlur,
+			onKeyDown,
+			endAdornment,
+			startAdornment,
+		}: TextFieldInnerSelectionProps,
+		ref
+	) => {
 		return (
 			<TextField
+				ref={ ref }
 				size="tiny"
 				fullWidth
 				type={ type }
 				value={ value }
 				onChange={ onChange }
+				onKeyDown={ onKeyDown }
+				onBlur={ onBlur }
 				placeholder={ placeholder }
 				InputProps={ {
 					endAdornment,
 					startAdornment,
 				} }
-				ref={ ref }
 			/>
 		);
 	}

package/src/controls/font-family-control/font-family-control.tsx

@@ -86,6 +86,8 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 
 					<Box px={ 1.5 } pb={ 1 }>
 						<TextField
+							// eslint-disable-next-line jsx-a11y/no-autofocus
+							autoFocus
 							fullWidth
 							size={ SIZE }
 							value={ searchValue }

package/src/controls/link-control.tsx

@@ -149,6 +149,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 					sx={ {
 						justifyContent: 'space-between',
 						alignItems: 'center',
+						marginInlineEnd: -0.75,
 					} }
 				>
 					<ControlFormLabel>{ __( 'Link', 'elementor' ) }</ControlFormLabel>
@@ -222,7 +223,7 @@ const SwitchControl = ( { disabled }: { disabled: boolean } ) => {
 			<Grid item>
 				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
 			</Grid>
-			<Grid item>
+			<Grid item sx={ { marginInlineEnd: -1 } }>
 				<Switch checked={ value } onClick={ onClick } disabled={ disabled } inputProps={ inputProps } />
 			</Grid>
 		</Grid>

package/src/controls/number-control.tsx

@@ -9,6 +9,8 @@ import { createControl } from '../create-control';
 const isEmptyOrNaN = ( value?: string | number | null ) =>
 	value === null || value === undefined || value === '' || Number.isNaN( Number( value ) );
 
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
+
 export const NumberControl = createControl(
 	( {
 		placeholder,
@@ -49,6 +51,11 @@ export const NumberControl = createControl(
 					onChange={ handleChange }
 					placeholder={ placeholder }
 					inputProps={ { step } }
+					onKeyDown={ ( event: KeyboardEvent ) => {
+						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+							event.preventDefault();
+						}
+					} }
 				/>
 			</ControlActions>
 		);

package/src/controls/size-control.tsx

@@ -25,7 +25,7 @@ type SizeControlProps = {
 
 export const SizeControl = createControl(
 	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
-		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+		const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp( sizePropTypeUtil );
 
 		const [ state, setState ] = useSyncExternalState( {
 			external: sizeValue,
@@ -50,21 +50,21 @@ export const SizeControl = createControl(
 			} ) );
 		};
 
-		const inputProps = {
-			size: state.size,
-			unit: state.unit,
-			placeholder,
-			startIcon,
-			units,
-			extendedValues,
-			handleSizeChange,
-			handleUnitChange,
-		};
+		const Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
 
-		if ( extendedValues?.length ) {
-			return <ExtendedSizeInput { ...inputProps } />;
-		}
-		return <SizeInput { ...inputProps } />;
+		return (
+			<Input
+				size={ state.size }
+				unit={ state.unit }
+				placeholder={ placeholder }
+				startIcon={ startIcon }
+				units={ units }
+				extendedValues={ extendedValues }
+				handleSizeChange={ handleSizeChange }
+				handleUnitChange={ handleUnitChange }
+				onBlur={ restoreValue }
+			/>
+		);
 	}
 );
 
@@ -99,16 +99,20 @@ type SizeInputProps = {
 	startIcon?: React.ReactNode;
 	units: Unit[];
 	extendedValues?: ExtendedValue[];
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	handleUnitChange: ( unit: Unit ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 };
 
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
+
 const SizeInput = ( {
 	units,
 	handleUnitChange,
 	handleSizeChange,
 	placeholder,
 	startIcon,
+	onBlur,
 	size,
 	unit,
 }: SizeInputProps ) => {
@@ -129,6 +133,12 @@ const SizeInput = ( {
 				type="number"
 				value={ Number.isNaN( size ) ? '' : size }
 				onChange={ handleSizeChange }
+				onBlur={ onBlur }
+				onKeyDown={ ( event ) => {
+					if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+						event.preventDefault();
+					}
+				} }
 			/>
 		</ControlActions>
 	);

package/src/controls/toggle-control.tsx

@@ -20,7 +20,7 @@ export const ToggleControl = createControl(
 		size = 'tiny',
 		exclusive = true,
 	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
-		const { value, setValue } = useBoundProp( stringPropTypeUtil );
+		const { value, setValue, placeholder } = useBoundProp( stringPropTypeUtil );
 
 		const exclusiveValues = options.filter( ( option ) => option.exclusive ).map( ( option ) => option.value );
 
@@ -44,14 +44,14 @@ export const ToggleControl = createControl(
 		return exclusive ? (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ value ?? null }
+				value={ value ?? placeholder ?? null }
 				onChange={ setValue }
 				exclusive={ true }
 			/>
 		) : (
 			<ControlToggleButtonGroup
 				{ ...toggleButtonGroupProps }
-				value={ value?.split( ' ' ) ?? [] }
+				value={ ( value ?? placeholder )?.split( ' ' ) ?? [] }
 				onChange={ handleNonExclusiveToggle }
 				exclusive={ false }
 			/>