@elementor/editor-controls 3.32.0-68 → 3.32.0-69

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": "3.32.0-68",
+  "version": "3.32.0-69",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-68",
-    "@elementor/editor-elements": "3.32.0-68",
-    "@elementor/editor-props": "3.32.0-68",
-    "@elementor/editor-responsive": "3.32.0-68",
-    "@elementor/editor-ui": "3.32.0-68",
-    "@elementor/editor-v1-adapters": "3.32.0-68",
-    "@elementor/env": "3.32.0-68",
-    "@elementor/http-client": "3.32.0-68",
+    "@elementor/editor-current-user": "3.32.0-69",
+    "@elementor/editor-elements": "3.32.0-69",
+    "@elementor/editor-props": "3.32.0-69",
+    "@elementor/editor-responsive": "3.32.0-69",
+    "@elementor/editor-ui": "3.32.0-69",
+    "@elementor/editor-v1-adapters": "3.32.0-69",
+    "@elementor/env": "3.32.0-69",
+    "@elementor/http-client": "3.32.0-69",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-68",
-    "@elementor/query": "3.32.0-68",
-    "@elementor/session": "3.32.0-68",
+    "@elementor/locations": "3.32.0-69",
+    "@elementor/query": "3.32.0-69",
+    "@elementor/session": "3.32.0-69",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-68",
-    "@elementor/wp-media": "3.32.0-68",
+    "@elementor/utils": "3.32.0-69",
+    "@elementor/wp-media": "3.32.0-69",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

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

@@ -4,8 +4,9 @@ import { type CreateOptions, type PropKey, type PropType, type PropValue } from
 
 import { HookOutsideProviderError } from './errors';
 
-type SetValueMeta = {
+export type SetValueMeta = {
 	bind?: PropKey;
+	validation?: ( value: PropValue ) => boolean;
 };
 
 export type SetValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;

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

@@ -8,7 +8,7 @@ import {
 } from '@elementor/editor-props';
 
 import { MissingPropTypeError } from './errors';
-import { type SetValue } from './prop-context';
+import { type SetValue, type SetValueMeta } from './prop-context';
 import { type PropKeyContextValue, usePropKeyContext } from './prop-key-context';
 
 type UseBoundProp< TValue extends PropValue > = {
@@ -46,8 +46,8 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 		return { ...propKeyContext, disabled } as PropKeyContextValue< PropValue, PropType >;
 	}
 
-	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
-		if ( ! validate( value ) ) {
+	function setValue( value: TValue | null, options: CreateOptions, meta?: SetValueMeta ) {
+		if ( ! validate( value, meta?.validation ) ) {
 			return;
 		}
 
@@ -79,13 +79,17 @@ const useValidation = ( propType: PropType ) => {
 
 	// 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 ) => {
+	const validate = ( value: PropValue | null, validation?: ( value: PropValue ) => boolean ) => {
 		let valid = true;
 
 		if ( propType.settings.required && value === null ) {
 			valid = false;
 		}
 
+		if ( validation && ! validation( value ) ) {
+			valid = false;
+		}
+
 		setIsValid( valid );
 
 		return valid;

package/src/components/number-input.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { forwardRef, useState } from 'react';
+import { TextField, type TextFieldProps } from '@elementor/ui';
+
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+' ];
+
+export const NumberInput = forwardRef( ( props: TextFieldProps, ref ) => {
+	const [ key, setKey ] = useState< number >( 0 );
+
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		blockRestrictedKeys( event, props.inputProps?.min );
+
+		props.onKeyDown?.( event );
+	};
+
+	const handleBlur = ( event: React.FocusEvent< HTMLInputElement > ) => {
+		props.onBlur?.( event );
+
+		const { valid } = event.target.validity;
+
+		// HTML number input quirk: invalid input (e.g. "-9-") returns value="" but displays "-9-" to user,
+		// so when we revert to last valid value we must re-mount the component to actually display it.
+		if ( ! valid ) {
+			setKey( ( prev ) => prev + 1 );
+		}
+	};
+
+	return <TextField { ...props } ref={ ref } key={ key } onKeyDown={ handleKeyDown } onBlur={ handleBlur } />;
+} );
+
+function blockRestrictedKeys( event: React.KeyboardEvent< HTMLInputElement >, min: number ) {
+	const restrictedInputKeys = [ ...RESTRICTED_INPUT_KEYS ];
+
+	if ( min >= 0 ) {
+		restrictedInputKeys.push( '-' );
+	}
+
+	if ( restrictedInputKeys.includes( event.key ) ) {
+		event.preventDefault();
+	}
+}

package/src/components/size-control/size-input.tsx

@@ -20,10 +20,9 @@ type SizeInputProps = {
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 	popupState: PopupState;
 	disabled?: boolean;
+	min?: number;
 };
 
-const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
-
 export const SizeInput = ( {
 	units,
 	handleUnitChange,
@@ -37,6 +36,7 @@ export const SizeInput = ( {
 	unit,
 	popupState,
 	disabled,
+	min,
 }: SizeInputProps ) => {
 	const unitInputBufferRef = useRef( '' );
 	const inputType = isUnitExtendedOption( unit ) ? 'text' : 'number';
@@ -70,7 +70,7 @@ export const SizeInput = ( {
 		'aria-haspopup': true,
 	};
 
-	const inputProps = {
+	const InputProps = {
 		...popupAttributes,
 		readOnly: isUnitExtendedOption( unit ),
 		autoComplete: 'off',
@@ -110,14 +110,10 @@ export const SizeInput = ( {
 					type={ inputType }
 					value={ inputValue }
 					onChange={ handleSizeChange }
-					onKeyDown={ ( event ) => {
-						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
-							event.preventDefault();
-						}
-					} }
 					onKeyUp={ handleKeyUp }
 					onBlur={ onBlur }
-					inputProps={ inputProps }
+					InputProps={ InputProps }
+					inputProps={ { min, step: 'any' } }
 					isPopoverOpen={ popupState.isOpen }
 				/>
 			</Box>

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

@@ -9,13 +9,13 @@ import {
 	InputAdornment,
 	Menu,
 	styled,
-	TextField,
 	type TextFieldProps,
 	usePopupState,
 } from '@elementor/ui';
 
 import { useBoundProp } from '../../bound-prop-context';
 import { DEFAULT_UNIT } from '../../utils/size-control';
+import { NumberInput } from '../number-input';
 
 type TextFieldInnerSelectionProps = {
 	placeholder?: string;
@@ -25,9 +25,10 @@ type TextFieldInnerSelectionProps = {
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
-	inputProps: TextFieldProps[ 'InputProps' ] & {
+	InputProps: TextFieldProps[ 'InputProps' ] & {
 		endAdornment: React.JSX.Element;
 	};
+	inputProps?: TextFieldProps[ 'inputProps' ];
 	disabled?: boolean;
 	isPopoverOpen?: boolean;
 };
@@ -42,6 +43,7 @@ export const TextFieldInnerSelection = forwardRef(
 			onBlur,
 			onKeyDown,
 			onKeyUp,
+			InputProps,
 			inputProps,
 			disabled,
 			isPopoverOpen,
@@ -51,25 +53,26 @@ export const TextFieldInnerSelection = forwardRef(
 		const { placeholder: boundPropPlaceholder } = useBoundProp( sizePropTypeUtil );
 
 		const getCursorStyle = () => ( {
-			input: { cursor: inputProps.readOnly ? 'default !important' : undefined },
+			input: { cursor: InputProps.readOnly ? 'default !important' : undefined },
 		} );
 
 		return (
-			<TextField
+			<NumberInput
 				ref={ ref }
 				sx={ getCursorStyle() }
 				size="tiny"
 				fullWidth
 				type={ type }
 				value={ value }
-				onChange={ onChange }
+				onInput={ onChange }
 				onKeyDown={ onKeyDown }
 				onKeyUp={ onKeyUp }
 				disabled={ disabled }
 				onBlur={ onBlur }
 				focused={ isPopoverOpen ? true : undefined }
 				placeholder={ placeholder ?? ( String( boundPropPlaceholder?.size ?? '' ) || undefined ) }
-				InputProps={ inputProps }
+				InputProps={ InputProps }
+				inputProps={ inputProps }
 			/>
 		);
 	}

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

@@ -86,6 +86,7 @@ export const BackgroundImageOverlayPosition = () => {
 									<SizeControl
 										startIcon={ <LetterXIcon fontSize={ 'tiny' } /> }
 										anchorRef={ rowRef }
+										min={ -Number.MAX_SAFE_INTEGER }
 									/>
 								</PropKeyProvider>
 							</Grid>
@@ -94,6 +95,7 @@ export const BackgroundImageOverlayPosition = () => {
 									<SizeControl
 										startIcon={ <LetterYIcon fontSize={ 'tiny' } /> }
 										anchorRef={ rowRef }
+										min={ -Number.MAX_SAFE_INTEGER }
 									/>
 								</PropKeyProvider>
 							</Grid>

package/src/controls/linked-dimensions-control.tsx

@@ -18,10 +18,12 @@ export const LinkedDimensionsControl = createControl(
 		label,
 		isSiteRtl = false,
 		extendedOptions,
+		min,
 	}: {
 		label: string;
 		isSiteRtl?: boolean;
 		extendedOptions?: ExtendedOption[];
+		min?: number;
 	} ) => {
 		const {
 			value: sizeValue,
@@ -110,6 +112,7 @@ export const LinkedDimensionsControl = createControl(
 										isLinked={ isLinked }
 										extendedOptions={ extendedOptions }
 										anchorRef={ gridRowRefs[ index ] }
+										min={ min }
 									/>
 								</Grid>
 							</Grid>
@@ -127,20 +130,34 @@ const Control = ( {
 	isLinked,
 	extendedOptions,
 	anchorRef,
+	min,
 }: {
 	bind: PropKey;
 	startIcon: React.ReactNode;
 	isLinked: boolean;
 	extendedOptions?: ExtendedOption[];
 	anchorRef: RefObject< HTMLDivElement >;
+	min?: number;
 } ) => {
 	if ( isLinked ) {
-		return <SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />;
+		return (
+			<SizeControl
+				startIcon={ startIcon }
+				extendedOptions={ extendedOptions }
+				anchorRef={ anchorRef }
+				min={ min }
+			/>
+		);
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />
+			<SizeControl
+				startIcon={ startIcon }
+				extendedOptions={ extendedOptions }
+				anchorRef={ anchorRef }
+				min={ min }
+			/>
 		</PropKeyProvider>
 	);
 };

package/src/controls/number-control.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { numberPropTypeUtil } from '@elementor/editor-props';
-import { InputAdornment, TextField } from '@elementor/ui';
+import { InputAdornment } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
+import { NumberInput } from '../components/number-input';
 import ControlActions from '../control-actions/control-actions';
 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: labelPlaceholder,
-		max = Number.MAX_VALUE,
-		min = -Number.MAX_VALUE,
+		max = Number.MAX_SAFE_INTEGER,
+		min = -Number.MAX_SAFE_INTEGER,
 		step = 1,
 		shouldForceInt = false,
 		startIcon,
@@ -27,33 +26,38 @@ export const NumberControl = createControl(
 		shouldForceInt?: boolean;
 		startIcon?: React.ReactNode;
 	} ) => {
-		const { value, setValue, placeholder, disabled } = useBoundProp( numberPropTypeUtil );
+		const { value, setValue, placeholder, disabled, restoreValue } = useBoundProp( numberPropTypeUtil );
 
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-			const eventValue: string = event.target.value;
+			const {
+				value: eventValue,
+				validity: { valid: isInputValid },
+			} = event.target;
 
-			if ( isEmptyOrNaN( eventValue ) ) {
-				setValue( null );
+			let updatedValue;
 
-				return;
+			if ( isEmptyOrNaN( eventValue ) ) {
+				updatedValue = null;
+			} else {
+				const formattedValue = shouldForceInt ? +parseInt( eventValue ) : Number( eventValue );
+				updatedValue = Math.min( Math.max( formattedValue, min ), max );
 			}
 
-			const formattedValue = shouldForceInt ? +parseInt( eventValue ) : Number( eventValue );
-
-			setValue( Math.min( Math.max( formattedValue, min ), max ) );
+			setValue( updatedValue, undefined, { validation: () => isInputValid } );
 		};
 
 		return (
 			<ControlActions>
-				<TextField
+				<NumberInput
 					size="tiny"
 					type="number"
 					fullWidth
 					disabled={ disabled }
 					value={ isEmptyOrNaN( value ) ? '' : value }
-					onChange={ handleChange }
+					onInput={ handleChange }
+					onBlur={ restoreValue }
 					placeholder={ labelPlaceholder ?? ( isEmptyOrNaN( placeholder ) ? '' : String( placeholder ) ) }
-					inputProps={ { step } }
+					inputProps={ { step, min } }
 					InputProps={ {
 						startAdornment: startIcon ? (
 							<InputAdornment position="start" disabled={ disabled }>
@@ -61,11 +65,6 @@ export const NumberControl = createControl(
 							</InputAdornment>
 						) : undefined,
 					} }
-					onKeyDown={ ( event: KeyboardEvent ) => {
-						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
-							event.preventDefault();
-						}
-					} }
 				/>
 			</ControlActions>
 		);

package/src/controls/position-control.tsx

@@ -80,12 +80,18 @@ export const PositionControl = () => {
 						<Grid container spacing={ 1.5 }>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'x' }>
-									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <LetterXIcon fontSize={ 'tiny' } /> }
+										min={ -Number.MAX_SAFE_INTEGER }
+									/>
 								</PropKeyProvider>
 							</Grid>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'y' }>
-									<SizeControl startIcon={ <LetterYIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <LetterYIcon fontSize={ 'tiny' } /> }
+										min={ -Number.MAX_SAFE_INTEGER }
+									/>
 								</PropKeyProvider>
 							</Grid>
 						</Grid>

package/src/controls/size-control.tsx

@@ -39,6 +39,7 @@ type BaseSizeControlProps = {
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
 	anchorRef?: RefObject< HTMLDivElement | null >;
+	min?: number;
 };
 
 type LengthSizeControlProps = BaseSizeControlProps &
@@ -86,6 +87,7 @@ export const SizeControl = createControl(
 		anchorRef,
 		extendedOptions,
 		disableCustom,
+		min = 0,
 	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
 		const {
 			value: sizeValue,
@@ -104,7 +106,8 @@ export const SizeControl = createControl(
 
 		const [ state, setState ] = useSyncExternalState( {
 			external: internalState,
-			setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
+			setExternal: ( newState: State | null, options, meta ) =>
+				setSizeValue( extractValueFromState( newState ), options, meta ),
 			persistWhen: ( newState ) => {
 				if ( ! newState?.unit ) {
 					return false;
@@ -135,7 +138,8 @@ export const SizeControl = createControl(
 		};
 
 		const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-			const { value: size } = event.target;
+			const size = event.target.value;
+			const isInputValid = event.target.validity.valid;
 
 			if ( controlUnit === 'auto' ) {
 				setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
@@ -143,11 +147,15 @@ export const SizeControl = createControl(
 				return;
 			}
 
-			setState( ( prev ) => ( {
-				...prev,
-				[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
-				unit: controlUnit,
-			} ) );
+			setState(
+				( prev ) => ( {
+					...prev,
+					[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
+					unit: controlUnit,
+				} ),
+				undefined,
+				{ validation: () => isInputValid }
+			);
 		};
 
 		const onInputClick = ( event: React.MouseEvent ) => {
@@ -207,6 +215,7 @@ export const SizeControl = createControl(
 					onBlur={ restoreValue }
 					onClick={ onInputClick }
 					popupState={ popupState }
+					min={ min }
 				/>
 				{ anchorRef?.current && (
 					<TextFieldPopover

package/src/controls/transform-control/functions/axis-row.tsx

@@ -31,6 +31,7 @@ export const AxisRow = ( { label, bind, startIcon, anchorRef, units, variant = '
 							startIcon={ startIcon }
 							units={ units }
 							variant={ variant }
+							min={ -Number.MAX_SAFE_INTEGER }
 						/>
 					</PropKeyProvider>
 				</Grid>

package/src/hooks/use-sync-external-state.tsx

@@ -1,8 +1,11 @@
 import { useEffect, useState } from 'react';
+import { type CreateOptions } from '@elementor/editor-props';
+
+import { type SetValueMeta } from '../bound-prop-context';
 
 type UseInternalStateOptions< TValue > = {
 	external: TValue | null;
-	setExternal: ( value: TValue | null ) => void;
+	setExternal: ( value: TValue | null, options?: CreateOptions, meta?: SetValueMeta ) => void;
 	persistWhen: ( value: TValue | null ) => boolean;
 	fallback: ( value: TValue | null ) => TValue;
 };
@@ -40,12 +43,12 @@ export const useSyncExternalState = < TValue, >( {
 
 	type SetterFunc = ( value: TValue ) => TValue;
 
-	const setInternalValue = ( setter: SetterFunc | TValue ) => {
+	const setInternalValue = ( setter: SetterFunc | TValue, options?: CreateOptions, meta?: SetValueMeta ) => {
 		const setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;
 		const updated = setterFn( internal );
 
 		setInternal( updated );
-		setExternal( toExternal( updated ) );
+		setExternal( toExternal( updated ), options, meta );
 	};
 
 	return [ internal, setInternalValue ] as const;