@elementor/editor-controls 4.0.0-682 → 4.0.0-beta5

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.0.0-682",
+  "version": "4.0.0-beta5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-682",
-    "@elementor/editor-elements": "4.0.0-682",
-    "@elementor/editor-props": "4.0.0-682",
-    "@elementor/editor-responsive": "4.0.0-682",
-    "@elementor/editor-ui": "4.0.0-682",
-    "@elementor/editor-v1-adapters": "4.0.0-682",
-    "@elementor/env": "4.0.0-682",
-    "@elementor/http-client": "4.0.0-682",
+    "@elementor/editor-current-user": "4.0.0-beta5",
+    "@elementor/editor-elements": "4.0.0-beta5",
+    "@elementor/editor-props": "4.0.0-beta5",
+    "@elementor/editor-responsive": "4.0.0-beta5",
+    "@elementor/editor-ui": "4.0.0-beta5",
+    "@elementor/editor-v1-adapters": "4.0.0-beta5",
+    "@elementor/env": "4.0.0-beta5",
+    "@elementor/http-client": "4.0.0-beta5",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.0.0-682",
-    "@elementor/events": "4.0.0-682",
-    "@elementor/query": "4.0.0-682",
-    "@elementor/session": "4.0.0-682",
+    "@elementor/locations": "4.0.0-beta5",
+    "@elementor/events": "4.0.0-beta5",
+    "@elementor/query": "4.0.0-beta5",
+    "@elementor/session": "4.0.0-beta5",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-682",
-    "@elementor/wp-media": "4.0.0-682",
+    "@elementor/utils": "4.0.0-beta5",
+    "@elementor/wp-media": "4.0.0-beta5",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/inline-editor.tsx

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import {
-	type DependencyList,
-	type Dispatch,
-	type PropsWithChildren,
-	type RefObject,
-	type SetStateAction,
-	useEffect,
-	useRef,
-} from 'react';
-import { Box, ClickAwayListener, type SxProps, type Theme } from '@elementor/ui';
+import { type DependencyList, type Dispatch, type SetStateAction, useEffect, useRef } from 'react';
+import { Box, type SxProps, type Theme } from '@elementor/ui';
 import Bold from '@tiptap/extension-bold';
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
@@ -42,16 +34,9 @@ type InlineEditorProps = {
 	onEditorCreate?: Dispatch< SetStateAction< Editor | null > >;
 	wrapperClassName?: string;
 	onSelectionEnd?: ( view: EditorView ) => void;
+	mountElement?: HTMLElement | null;
 };
 
-type WrapperProps = PropsWithChildren< {
-	containerRef: RefObject< HTMLDivElement >;
-	editor: ReturnType< typeof useEditor >;
-	sx: SxProps< Theme >;
-	onBlur?: () => void;
-	className?: string;
-} >;
-
 export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref ) => {
 	const {
 		value,
@@ -65,9 +50,12 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		onEditorCreate,
 		wrapperClassName,
 		onSelectionEnd,
+		mountElement = null,
 	} = props;
 
 	const containerRef = useRef< HTMLDivElement >( null );
+	const onBlurRef = useRef( onBlur );
+	onBlurRef.current = onBlur;
 	const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
 
 	const onUpdate = ( { editor: updatedEditor }: { editor: Editor } ) => {
@@ -78,7 +66,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 
 	const onKeyDown = ( _: Editor[ 'view' ], event: KeyboardEvent ) => {
 		if ( event.key === 'Escape' ) {
-			onBlur?.();
+			onBlurRef.current?.();
 		}
 
 		if ( ( ! event.metaKey && ! event.ctrlKey ) || event.altKey ) {
@@ -96,6 +84,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 	} );
 
 	const editor = useEditor( {
+		...( mountElement ? { element: mountElement } : {} ),
 		extensions: [
 			Document.extend( {
 				content: documentContentSettings,
@@ -153,6 +142,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			},
 		},
 		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,
+		onBlur: mountElement ? undefined : () => onBlurRef.current?.(),
 		onSelectionUpdate: onSelectionEnd
 			? ( { editor: updatedEditor } ) => onSelectionEnd( updatedEditor.view )
 			: undefined,
@@ -170,47 +160,16 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		}
 	}, [ editor, value ] );
 
-	return (
-		<>
-			<Wrapper
-				containerRef={ containerRef }
-				editor={ editor }
-				sx={ sx }
-				onBlur={ onBlur }
-				className={ wrapperClassName }
-			>
-				<EditorContent ref={ ref } editor={ editor } />
-			</Wrapper>
-		</>
-	);
-} );
+	if ( mountElement ) {
+		return null;
+	}
 
-const Wrapper = ( { children, containerRef, editor, sx, onBlur, className }: WrapperProps ) => {
-	const wrappedChildren = (
-		<Box ref={ containerRef } { ...sx } className={ className }>
-			{ children }
+	return (
+		<Box ref={ containerRef } sx={ sx } className={ wrapperClassName }>
+			<EditorContent ref={ ref } editor={ editor } />
 		</Box>
 	);
-
-	return onBlur ? (
-		<ClickAwayListener
-			onClickAway={ ( event: PointerEvent ) => {
-				if (
-					containerRef.current?.contains( event.target as Node ) ||
-					editor.view.dom.contains( event.target as Node )
-				) {
-					return;
-				}
-
-				onBlur?.();
-			} }
-		>
-			{ wrappedChildren }
-		</ClickAwayListener>
-	) : (
-		<>{ wrappedChildren }</>
-	);
-};
+} );
 
 const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
 	const hasMounted = useRef( false );

package/src/controls/email-form-action-control.tsx

@@ -29,7 +29,7 @@ const EmailField = ( { bind, label, placeholder }: { bind: string; label: string
 const SendToField = () => (
 	<EmailField
 		bind="to"
-		label={ __( 'Send To', 'elementor' ) }
+		label={ __( 'Send to', 'elementor' ) }
 		placeholder={ __( 'Where should we send new submissions?', 'elementor' ) }
 	/>
 );
@@ -37,7 +37,7 @@ const SendToField = () => (
 const SubjectField = () => (
 	<EmailField
 		bind="subject"
-		label={ __( 'Email Subject', 'elementor' ) }
+		label={ __( 'Email subject', 'elementor' ) }
 		placeholder={ __( 'New form submission', 'elementor' ) }
 	/>
 );
@@ -64,7 +64,7 @@ const FromEmailField = () => (
 	<EmailField
 		bind="from"
 		label={ __( 'From email', 'elementor' ) }
-		placeholder={ __( 'What email address should appear as the sender?', 'elementor' ) }
+		placeholder={ __( 'What email should appear as the sender?', 'elementor' ) }
 	/>
 );
 
@@ -85,7 +85,7 @@ const BccField = () => <EmailField bind="bcc" label={ __( 'Bcc', 'elementor' ) }
 const MetaDataField = () => (
 	<PropKeyProvider bind="meta-data">
 		<Stack gap={ 0.5 }>
-			<ControlLabel>{ __( 'Meta data', 'elementor' ) }</ControlLabel>
+			<ControlLabel>{ __( 'Metadata', 'elementor' ) }</ControlLabel>
 			<ChipsControl
 				options={ [
 					{ label: __( 'Date', 'elementor' ), value: 'date' },
@@ -139,7 +139,7 @@ export const EmailFormActionControl = createControl( () => {
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 2 }>
-				<ControlFormLabel>{ __( 'Email settings', 'elementor' ) }</ControlFormLabel>
+				<ControlLabel>{ __( 'Email settings', 'elementor' ) }</ControlLabel>
 				<SendToField />
 				<SubjectField />
 				<MessageField />

package/src/controls/size-control/hooks/use-size-unit-keyboard.tsx

@@ -3,7 +3,6 @@ import type * as React from 'react';
 import { useTypingBuffer } from '../../../hooks/use-typing-buffer';
 import { type SizeUnit } from '../types';
 import { isExtendedUnit } from '../utils/is-extended-unit';
-import { isNumericValue } from '../utils/is-numeric-value';
 
 const UNIT_KEY_PATTERN = /^[a-zA-Z%]$/;
 
@@ -53,3 +52,15 @@ export const useSizeUnitKeyboard = ( { unit, units, onUnitChange }: Props ) => {
 
 	return { onUnitKeyDown };
 };
+
+const isNumericValue = ( value: unknown ): boolean => {
+	if ( typeof value === 'number' ) {
+		return ! isNaN( value );
+	}
+
+	if ( typeof value === 'string' ) {
+		return value.trim() !== '' && ! isNaN( Number( value ) );
+	}
+
+	return false;
+};

package/src/controls/size-control/hooks/use-size-value.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { type SizePropValue } from '@elementor/editor-props';
 
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
-import { type SizeUnit } from '../types';
+import { type SetSizeValue, type SizeUnit } from '../types';
 import { isExtendedUnit } from '../utils/is-extended-unit';
 import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
 
@@ -10,39 +10,35 @@ type SizeValue = SizePropValue[ 'value' ];
 
 type UseSizeValueProps< T, U > = {
 	value: T | null;
-	onChange: ( value: T ) => void;
+	setValue: SetSizeValue< T >;
 	units: U[];
 	defaultUnit?: U;
 };
 
 export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
 	value,
-	onChange,
+	setValue,
 	units,
 	defaultUnit,
 }: UseSizeValueProps< T, U > ) => {
 	const resolvedValue = useMemo(
-		() => resolveSizeValue( value, { units, defaultUnit } ),
+		() => resolveSizeValue( value, { units, defaultUnit } ) as T,
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ value?.size, value?.unit, defaultUnit ]
 	);
 
 	const [ sizeValue, setSizeValue ] = useSyncExternalState< T >( {
-		external: resolvedValue as T,
-		setExternal: ( newState ) => {
-			// TODO we need to check behaviour that low level doesn't set to null only the high level components size component
-			// This will fix the issue of if size is empty string '' it gets sends to the model
-			// but on blur the size component set to null.
-			// But we need to test this behaviour
+		external: resolvedValue,
+		setExternal: ( newState, options, meta ) => {
 			if ( newState !== null ) {
-				onChange( newState );
+				setValue( newState, options, meta );
 			}
-		}, // TODO we will need to handle options, meta if context need them
-		persistWhen: ( next ) => hasChanged( next, resolvedValue as T ),
-		fallback: () => createDefaultSizeValue< T >( units, defaultUnit ),
+		},
+		persistWhen: ( next ) => hasChanged( next, resolvedValue ),
+		fallback: () => createDefaultSizeValue( units, defaultUnit ),
 	} );
 
-	const setSize = ( newSize: string ) => {
+	const setSize = ( newSize: string, isInputValid = true ) => {
 		if ( isExtendedUnit( sizeValue.unit ) ) {
 			return;
 		}
@@ -55,7 +51,7 @@ export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
 			size: trimmed && ! isNaN( parsed ) ? parsed : '',
 		};
 
-		setSizeValue( newState );
+		setSizeValue( newState, undefined, { validation: () => isInputValid } );
 	};
 
 	const setUnit = ( unit: SizeValue[ 'unit' ] ) => {

package/src/controls/size-control/size-component.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { type RefObject, useEffect } from 'react';
 import type { SizePropValue } from '@elementor/editor-props';
-import { usePopupState } from '@elementor/ui';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+import { Box, usePopupState } from '@elementor/ui';
 
 import { SizeField, type SizeFieldProps } from './size-field';
 import { TextFieldPopover } from './ui/text-field-popover';
@@ -13,24 +14,31 @@ type SizeUnit = SizePropValue[ 'value' ][ 'unit' ];
 
 type Props = SizeFieldProps< SizeValue, SizeUnit > & {
 	anchorRef?: RefObject< HTMLDivElement | null >;
+	isUnitActive?: boolean;
+	SizeFieldWrapper?: React.ComponentType< { children: React.ReactNode } >;
 };
 
-export const SizeComponent = ( { anchorRef, ...sizeFieldProps }: Props ) => {
+export const SizeComponent = ( {
+	anchorRef,
+	isUnitActive,
+	SizeFieldWrapper = React.Fragment,
+	...sizeFieldProps
+}: Props ) => {
 	const popupState = usePopupState( { variant: 'popover' } );
+	const activeBreakpoint = useActiveBreakpoint();
 
 	const isCustomUnit = sizeFieldProps?.value?.unit === EXTENDED_UNITS.custom;
 	const hasCustomUnitOption = sizeFieldProps.units.includes( EXTENDED_UNITS.custom );
 
 	useEffect( () => {
-		if ( isCustomUnit && anchorRef?.current && ! popupState.isOpen ) {
-			popupState.open( anchorRef?.current );
+		if ( popupState && popupState.isOpen ) {
+			popupState.close();
 		}
-
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ anchorRef, isCustomUnit ] );
+	}, [ activeBreakpoint ] );
 
 	const handleCustomSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		sizeFieldProps.onChange( {
+		sizeFieldProps.setValue( {
 			size: event.target.value,
 			unit: EXTENDED_UNITS.custom,
 		} );
@@ -42,6 +50,12 @@ export const SizeComponent = ( { anchorRef, ...sizeFieldProps }: Props ) => {
 		}
 	};
 
+	const handleUnitChange = ( unit: SizeUnit ) => {
+		if ( unit === EXTENDED_UNITS.custom && anchorRef?.current ) {
+			popupState.open( anchorRef.current );
+		}
+	};
+
 	const popupAttributes = {
 		'aria-controls': popupState.isOpen ? popupState.popupId : undefined,
 		'aria-haspopup': true,
@@ -49,16 +63,23 @@ export const SizeComponent = ( { anchorRef, ...sizeFieldProps }: Props ) => {
 
 	return (
 		<>
-			<SizeField
-				{ ...sizeFieldProps }
-				InputProps={ {
-					...popupAttributes,
-					onClick: handleSizeFieldClick,
-				} }
-				unitSelectorProps={ {
-					menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : undefined,
-				} }
-			/>
+			<SizeFieldWrapper>
+				<Box>
+					<SizeField
+						focused={ popupState.isOpen ? true : undefined }
+						onUnitChange={ handleUnitChange }
+						InputProps={ {
+							...popupAttributes,
+							onClick: handleSizeFieldClick,
+						} }
+						unitSelectorProps={ {
+							menuItemsAttributes: hasCustomUnitOption ? { custom: popupAttributes } : undefined,
+							isActive: isUnitActive,
+						} }
+						{ ...sizeFieldProps }
+					/>
+				</Box>
+			</SizeFieldWrapper>
 			{ popupState.isOpen && anchorRef?.current && (
 				<TextFieldPopover
 					popupState={ popupState }

package/src/controls/size-control/size-field.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import type { PropValue, SizePropValue } from '@elementor/editor-props';
+import type { SizePropValue } from '@elementor/editor-props';
 import { MathFunctionIcon } from '@elementor/icons';
 import { InputAdornment, type TextFieldProps } from '@elementor/ui';
 
 import { useSizeUnitKeyboard } from './hooks/use-size-unit-keyboard';
 import { useSizeValue } from './hooks/use-size-value';
-import { type SizeUnit } from './types';
+import { type SetSizeValue, type SizeUnit } from './types';
 import { SizeInput } from './ui/size-input';
 import { UnitSelector, type UnitSelectorProps } from './ui/unit-selector';
+import { hasSizeValue } from './utils/has-size-value';
 import { isExtendedUnit } from './utils/is-extended-unit';
 
 export type SizeFieldProps< TValue extends SizePropValue[ 'value' ], TUnit extends SizeUnit > = {
@@ -16,10 +17,14 @@ export type SizeFieldProps< TValue extends SizePropValue[ 'value' ], TUnit exten
 	placeholder?: string;
 	defaultUnit?: SizeUnit;
 	startIcon?: React.ReactNode;
-	onChange: ( value: TValue ) => void;
+	setValue: SetSizeValue< TValue >;
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
+	onUnitChange?: ( unit: SizeUnit ) => void;
 	disabled?: boolean;
+	focused?: boolean;
+	ariaLabel?: string;
+	min?: number;
 	InputProps?: TextFieldProps[ 'InputProps' ];
 	unitSelectorProps?: Partial< UnitSelectorProps< TUnit > >;
 };
@@ -30,18 +35,30 @@ const UNIT_DISPLAY_LABELS_OVERRIDES: Partial< Record< SizeUnit, React.ReactNode
 
 export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUnit >( {
 	value,
+	focused,
 	disabled,
 	InputProps,
 	defaultUnit,
+	placeholder,
+	onUnitChange,
 	startIcon,
+	ariaLabel,
 	onKeyDown,
-	onChange,
+	setValue,
 	onBlur,
 	units,
+	min,
 	unitSelectorProps,
 }: SizeFieldProps< T, U > ) => {
-	const { size, unit, setSize, setUnit } = useSizeValue( { value, onChange, units, defaultUnit } );
-	const { onUnitKeyDown } = useSizeUnitKeyboard( { unit, onUnitChange: setUnit, units } );
+	const { size, unit, setSize, setUnit } = useSizeValue( { value, setValue, units, defaultUnit } );
+
+	const handleUnitChange = ( newUnit: SizeUnit ) => {
+		setUnit( newUnit );
+
+		onUnitChange?.( newUnit );
+	};
+
+	const { onUnitKeyDown } = useSizeUnitKeyboard( { unit, onUnitChange: handleUnitChange, units } );
 
 	const handleKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
 		onUnitKeyDown( event );
@@ -49,15 +66,25 @@ export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUni
 		onKeyDown?.( event );
 	};
 
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const newSize = event.target.value;
+		const isInputValid = event.target.validity.valid;
+
+		setSize( newSize, isInputValid );
+	};
+
 	const inputType = isExtendedUnit( unit ) ? 'text' : 'number';
 
 	return (
 		<SizeInput
+			disabled={ disabled }
+			focused={ focused }
 			type={ inputType }
 			value={ size }
+			placeholder={ placeholder }
 			onBlur={ onBlur }
 			onKeyDown={ handleKeyDown }
-			onChange={ ( event ) => setSize( event.target.value ) }
+			onChange={ handleChange }
 			InputProps={ {
 				...InputProps,
 				autoComplete: 'off',
@@ -72,18 +99,15 @@ export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUni
 						<UnitSelector< U >
 							options={ units }
 							value={ unit as U }
-							onSelect={ ( newUnit ) => setUnit( newUnit ) }
-							isActive={ hasValue( size ) }
+							onSelect={ handleUnitChange }
+							isActive={ unitSelectorProps?.isActive ?? hasSizeValue( size ) }
 							{ ...unitSelectorProps }
 							optionLabelOverrides={ UNIT_DISPLAY_LABELS_OVERRIDES }
 						/>
 					</InputAdornment>
 				),
 			} }
+			inputProps={ { min, step: 'any', 'arial-label': ariaLabel } }
 		/>
 	);
 };
-
-const hasValue = ( value: PropValue ): boolean => {
-	return Boolean( value ) || value === 0;
-};

package/src/controls/size-control/sync/get-units.ts

@@ -1,3 +1,17 @@
+import { type SizeUnit } from '../types';
+
+export const getLengthUnits = () => {
+	return ( window.elementor?.config?.size_units?.length ?? [] ) as SizeUnit[];
+};
+
+export const getAngleUnits = () => {
+	return ( window.elementor?.config?.size_units?.angle ?? [] ) as SizeUnit[];
+};
+
+export const getTimeUnits = () => {
+	return ( window.elementor?.config?.size_units?.time ?? [] ) as SizeUnit[];
+};
+
 export const getExtendedUnits = () => {
-	return window.elementor?.config?.size_units?.extended_units ?? [];
+	return ( window.elementor?.config?.size_units?.extended_units ?? [] ) as SizeUnit[];
 };

package/src/controls/size-control/types.ts

@@ -1,3 +1,7 @@
+import type { CreateOptions } from '@elementor/editor-props';
+
+import { type SetValueMeta } from '../../bound-prop-context';
+
 type LengthUnit = 'px' | '%' | 'em' | 'rem' | 'vw' | 'vh' | 'ch';
 type AngleUnit = 'deg' | 'rad' | 'grad' | 'turn';
 type TimeUnit = 's' | 'ms';
@@ -7,3 +11,7 @@ type ExtendedSizeOption = 'auto' | 'custom';
 type Unit = LengthUnit | AngleUnit | TimeUnit;
 
 export type SizeUnit = Unit | ExtendedSizeOption;
+
+export type SizeVariant = 'length' | 'angle' | 'time';
+
+export type SetSizeValue< T > = ( value: T, options?: CreateOptions, meta?: SetValueMeta ) => void;

package/src/controls/size-control/unstable-size-control.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { RefObject } from 'react';
+import { type CreateOptions, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+
+import { type SetValueMeta, useBoundProp } from '../../bound-prop-context';
+import ControlActions from '../../control-actions/control-actions';
+import { createControl } from '../../create-control';
+import { SizeComponent } from './size-component';
+import { type SizeVariant } from './types';
+import { resolveBoundPropValue } from './utils/resolve-bound-prop-value';
+import { getDefaultUnit } from './utils/settings/get-default-unit';
+import { getSizeUnits } from './utils/settings/get-size-units';
+import { shouldNullifyValue } from './utils/should-nullify-value';
+
+type Props = {
+	placeholder?: string;
+	variant?: SizeVariant;
+	anchorRef?: RefObject< HTMLDivElement | null >;
+	startIcon?: React.ReactNode;
+	ariaLabel?: string;
+	min?: number;
+	id?: string;
+};
+
+export const UnstableSizeControl = createControl(
+	( { variant = 'length', placeholder: propPlaceholder, anchorRef, startIcon, ariaLabel, min }: Props ) => {
+		const {
+			value,
+			setValue,
+			propType,
+			placeholder: boundPropPlaceholder,
+			restoreValue,
+		} = useBoundProp( sizePropTypeUtil );
+
+		const { sizeValue, isUnitHighlighted, placeholder } = resolveBoundPropValue(
+			value,
+			boundPropPlaceholder,
+			propPlaceholder
+		);
+
+		const units = getSizeUnits( propType, variant );
+		const defaultUnit = getDefaultUnit( propType );
+
+		const handleBlur = () => {
+			const isRequired = propType.settings.required;
+
+			if ( shouldNullifyValue( value ) && ! isRequired ) {
+				setValue( null );
+			}
+
+			if ( isRequired ) {
+				restoreValue();
+			}
+		};
+
+		const handleChange = ( newValue: SizePropValue[ 'value' ], options?: CreateOptions, meta?: SetValueMeta ) => {
+			setValue( newValue, options, {
+				...meta,
+				validation: () => {
+					if ( propType.settings.required ) {
+						return newValue.size !== '';
+					}
+
+					return meta?.validation ? meta.validation( newValue ) : true;
+				},
+			} );
+		};
+
+		return (
+			<SizeComponent
+				units={ units }
+				value={ sizeValue }
+				anchorRef={ anchorRef }
+				placeholder={ placeholder }
+				defaultUnit={ defaultUnit }
+				isUnitActive={ isUnitHighlighted }
+				onBlur={ handleBlur }
+				setValue={ handleChange }
+				SizeFieldWrapper={ ControlActions }
+				startIcon={ startIcon }
+				ariaLabel={ ariaLabel }
+				min={ min }
+			/>
+		);
+	}
+);

package/src/controls/size-control/utils/has-size-value.ts

@@ -0,0 +1,5 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+export const hasSizeValue = ( size: SizePropValue[ 'value' ][ 'size' ] ): boolean => {
+	return Boolean( size ) || size === 0;
+};