@elementor/editor-controls 4.4.0-1099 → 4.4.0-1100

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": "4.4.0-1099",
+  "version": "4.4.0-1100",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1099",
-    "@elementor/editor-elements": "4.4.0-1099",
-    "@elementor/editor-props": "4.4.0-1099",
-    "@elementor/editor-responsive": "4.4.0-1099",
-    "@elementor/editor-ui": "4.4.0-1099",
-    "@elementor/editor-v1-adapters": "4.4.0-1099",
-    "@elementor/env": "4.4.0-1099",
-    "@elementor/events": "4.4.0-1099",
-    "@elementor/http-client": "4.4.0-1099",
+    "@elementor/editor-current-user": "4.4.0-1100",
+    "@elementor/editor-elements": "4.4.0-1100",
+    "@elementor/editor-props": "4.4.0-1100",
+    "@elementor/editor-responsive": "4.4.0-1100",
+    "@elementor/editor-ui": "4.4.0-1100",
+    "@elementor/editor-v1-adapters": "4.4.0-1100",
+    "@elementor/env": "4.4.0-1100",
+    "@elementor/events": "4.4.0-1100",
+    "@elementor/http-client": "4.4.0-1100",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1099",
-    "@elementor/query": "4.4.0-1099",
-    "@elementor/schema": "4.4.0-1099",
-    "@elementor/session": "4.4.0-1099",
+    "@elementor/locations": "4.4.0-1100",
+    "@elementor/query": "4.4.0-1100",
+    "@elementor/schema": "4.4.0-1100",
+    "@elementor/session": "4.4.0-1100",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1099",
-    "@elementor/wp-media": "4.4.0-1099",
+    "@elementor/utils": "4.4.0-1100",
+    "@elementor/wp-media": "4.4.0-1100",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/number-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRef, useState } from 'react';
 import { numberPropTypeUtil, type PropType } from '@elementor/editor-props';
 import { InputAdornment, Typography } from '@elementor/ui';
 
@@ -6,7 +7,9 @@ import { useBoundProp } from '../bound-prop-context';
 import { NumberInput } from '../components/number-input';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { clamp, isEmptyDraft, isInRange, parseNumberDraft } from '../utils/number-value';
 
+// Bound value and placeholder only. Draft parsing uses isEmptyDraft / parseNumberDraft.
 const isEmptyOrNaN = ( value?: string | number | null ) =>
 	value === null || value === undefined || value === '' || Number.isNaN( Number( value ) );
 
@@ -26,45 +29,98 @@ const renderSuffix = ( propType: PropType ) => {
 export const NumberControl = createControl(
 	( {
 		placeholder: labelPlaceholder,
-		max = Number.MAX_SAFE_INTEGER,
-		min = -Number.MAX_SAFE_INTEGER,
-		step = 1,
+		max: maxProp,
+		min: minProp,
+		step: stepProp,
 		shouldForceInt = false,
 		startIcon,
 		disabled: inputDisabled,
 	}: {
 		placeholder?: string;
-		max?: number;
-		min?: number;
-		step?: number;
+		max?: number | null;
+		min?: number | null;
+		step?: number | null;
 		shouldForceInt?: boolean;
 		startIcon?: React.ReactNode;
 		disabled?: boolean;
 	} ) => {
+		const max = maxProp ?? Number.MAX_SAFE_INTEGER;
+		const min = minProp ?? -Number.MAX_SAFE_INTEGER;
+		const step = stepProp ?? 1;
 		const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp( numberPropTypeUtil );
 
-		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-			const {
-				value: eventValue,
-				validity: { valid: isInputValid },
-			} = event.target;
+		// `null` means "not editing" — the input mirrors the bound value.
+		const [ draft, setDraft ] = useState< string | null >( null );
+		const committedNullOnInputRef = useRef( false );
 
-			let updatedValue;
+		const handleInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const raw = event.target.value;
 
-			if ( isEmptyOrNaN( eventValue ) ) {
-				updatedValue = null;
-			} else {
-				const formattedValue = shouldForceInt ? +parseInt( eventValue ) : Number( eventValue );
+			setDraft( raw );
 
-				updatedValue = Math.min(
-					Math.max( formattedValue, min ?? Number.MIN_SAFE_INTEGER ),
-					max ?? Number.MAX_SAFE_INTEGER
-				);
+			if ( isEmptyDraft( raw ) ) {
+				if ( ! propType.settings.required ) {
+					setValue( null );
+					committedNullOnInputRef.current = true;
+				}
+
+				return;
+			}
+
+			committedNullOnInputRef.current = false;
+
+			const parsed = parseNumberDraft( raw, shouldForceInt );
+
+			// Type-required: `isInRange` and `clamp` both take a number.
+			if ( parsed === null ) {
+				return;
 			}
 
-			setValue( updatedValue, undefined, { validation: () => isInputValid } );
+			if ( isInRange( parsed, min, max ) ) {
+				setValue( parsed );
+			}
 		};
 
+		const handleBlur = () => {
+			const raw = draft;
+			const committedNullOnInput = committedNullOnInputRef.current;
+
+			committedNullOnInputRef.current = false;
+			setDraft( null );
+			// restoreValue() only clears the validation latch in use-bound-prop; it does not revert the model.
+			restoreValue();
+
+			if ( raw === null ) {
+				return;
+			}
+
+			if ( isEmptyDraft( raw ) ) {
+				// handleInput already committed null for optional clears; skip the redundant blur write.
+				if ( ! propType.settings.required && ! committedNullOnInput ) {
+					setValue( null );
+				}
+
+				return;
+			}
+
+			const parsed = parseNumberDraft( raw, shouldForceInt );
+
+			// As above — falling through would commit `clamp( null, … )`, a value never typed.
+			if ( parsed === null ) {
+				return;
+			}
+
+			// handleInput already committed anything in range; re-committing adds a redundant
+			// store write and, past the history debounce, a no-op undo step.
+			if ( isInRange( parsed, min, max ) ) {
+				return;
+			}
+
+			setValue( clamp( parsed, min, max ) );
+		};
+
+		const displayValue = draft ?? ( isEmptyOrNaN( value ) ? '' : String( value ) );
+
 		return (
 			<ControlActions>
 				<NumberInput
@@ -72,11 +128,11 @@ export const NumberControl = createControl(
 					type="number"
 					fullWidth
 					disabled={ inputDisabled ?? disabled }
-					value={ isEmptyOrNaN( value ) ? '' : value }
-					onInput={ handleChange }
-					onBlur={ restoreValue }
+					value={ displayValue }
+					onInput={ handleInput }
+					onBlur={ handleBlur }
 					placeholder={ labelPlaceholder ?? ( isEmptyOrNaN( placeholder ) ? '' : String( placeholder ) ) }
-					inputProps={ { step, min } }
+					inputProps={ { step, min, ...( maxProp !== null && maxProp !== undefined && { max } ) } }
 					InputProps={ {
 						startAdornment: startIcon ? (
 							<InputAdornment position="start" disabled={ inputDisabled ?? disabled }>

package/src/utils/number-value.ts

@@ -0,0 +1,17 @@
+export const isEmptyDraft = ( raw: string ) => raw.trim() === '';
+
+export const parseNumberDraft = ( raw: string, shouldForceInt = false ): number | null => {
+	const trimmed = raw.trim();
+
+	if ( trimmed === '' ) {
+		return null;
+	}
+
+	const parsed = shouldForceInt ? parseInt( trimmed, 10 ) : Number( trimmed );
+
+	return Number.isFinite( parsed ) ? parsed : null;
+};
+
+export const isInRange = ( value: number, min: number, max: number ) => value >= min && value <= max;
+
+export const clamp = ( value: number, min: number, max: number ) => Math.min( Math.max( value, min ), max );