@elementor/editor-controls 4.1.0-710 → 4.1.0-712

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.1.0-710",
+  "version": "4.1.0-712",
   "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.1.0-710",
-    "@elementor/editor-elements": "4.1.0-710",
-    "@elementor/editor-props": "4.1.0-710",
-    "@elementor/editor-responsive": "4.1.0-710",
-    "@elementor/editor-ui": "4.1.0-710",
-    "@elementor/editor-v1-adapters": "4.1.0-710",
-    "@elementor/env": "4.1.0-710",
-    "@elementor/http-client": "4.1.0-710",
+    "@elementor/editor-current-user": "4.1.0-712",
+    "@elementor/editor-elements": "4.1.0-712",
+    "@elementor/editor-props": "4.1.0-712",
+    "@elementor/editor-responsive": "4.1.0-712",
+    "@elementor/editor-ui": "4.1.0-712",
+    "@elementor/editor-v1-adapters": "4.1.0-712",
+    "@elementor/env": "4.1.0-712",
+    "@elementor/http-client": "4.1.0-712",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-710",
-    "@elementor/events": "4.1.0-710",
-    "@elementor/query": "4.1.0-710",
-    "@elementor/session": "4.1.0-710",
+    "@elementor/locations": "4.1.0-712",
+    "@elementor/events": "4.1.0-712",
+    "@elementor/query": "4.1.0-712",
+    "@elementor/session": "4.1.0-712",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-710",
-    "@elementor/wp-media": "4.1.0-710",
+    "@elementor/utils": "4.1.0-712",
+    "@elementor/wp-media": "4.1.0-712",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

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

@@ -85,7 +85,7 @@ const BccField = () => <EmailField bind="bcc" label={ __( 'Bcc', 'elementor' ) }
 const MetaDataField = () => (
 	<PropKeyProvider bind="meta-data">
 		<Stack gap={ 0.5 }>
-			<ControlLabel>{ __( 'Metadata', 'elementor' ) }</ControlLabel>
+			<ControlFormLabel>{ __( 'Metadata', 'elementor' ) }</ControlFormLabel>
 			<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;
+};

package/src/controls/size-control/utils/resolve-bound-prop-value.ts

@@ -0,0 +1,72 @@
+import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+
+import { hasSizeValue } from './has-size-value';
+import { EXTENDED_UNITS } from './resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ] | null;
+
+export type ResolvedBoundProp = {
+	sizeValue: SizeValue;
+	isUnitHighlighted: boolean;
+	placeholder: string | undefined;
+};
+
+export const resolveBoundPropValue = < T extends SizeValue >(
+	value?: T | null,
+	boundPropPlaceholder?: T | null,
+	propPlaceholder?: string
+): ResolvedBoundProp => {
+	let sizeValue: T | null = null;
+
+	if ( validateSizeValue( value ) ) {
+		sizeValue = value;
+	} else if ( validateSizeValue( boundPropPlaceholder ) ) {
+		sizeValue = { size: '', unit: boundPropPlaceholder?.unit } as T;
+	}
+
+	return {
+		sizeValue,
+		isUnitHighlighted: shouldHighlightUnit( value ),
+		placeholder: resolvePlaceholder( propPlaceholder, boundPropPlaceholder ),
+	};
+};
+
+const validateSizeValue = ( value?: SizeValue | null ): value is SizeValue => {
+	if ( ! value ) {
+		return false;
+	}
+
+	const sizePropValue = sizePropTypeUtil.create( value );
+
+	return sizePropTypeUtil.isValid( sizePropValue );
+};
+
+const resolvePlaceholder = ( propPlaceholder?: string, boundPropPlaceholder?: SizeValue ): string | undefined => {
+	if ( propPlaceholder ) {
+		return propPlaceholder;
+	}
+
+	const size = boundPropPlaceholder?.size;
+
+	if ( size === undefined ) {
+		return undefined;
+	}
+
+	if ( typeof size === 'number' ) {
+		return size.toString();
+	}
+
+	return size;
+};
+
+const shouldHighlightUnit = ( value?: SizePropValue[ 'value' ] | null ) => {
+	if ( ! value ) {
+		return false;
+	}
+
+	if ( value.unit === EXTENDED_UNITS.auto ) {
+		return true;
+	}
+
+	return hasSizeValue( value.size );
+};

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

@@ -51,10 +51,10 @@ export const resolveSizeOnUnitChange = (
 };
 
 export const createDefaultSizeValue = < T extends SizeValue >( units: SizeUnit[], defaultUnit?: SizeUnit ): T => {
-	let unit = units[ 0 ];
+	let [ unit ] = units;
 
 	if ( defaultUnit !== undefined ) {
-		unit = resolveFallbackUnit( defaultUnit, units ) as SizeUnit;
+		unit = resolveFallbackUnit( defaultUnit, units );
 	}
 
 	return { size: DEFAULT_SIZE, unit } as T;
@@ -64,7 +64,7 @@ const resolveFallbackUnit = < TUnit extends SizeUnit >(
 	unit: TUnit,
 	units: readonly TUnit[],
 	defaultUnit?: TUnit
-): TUnit | string => {
+): TUnit => {
 	if ( units.includes( unit ) ) {
 		return unit;
 	}
@@ -80,5 +80,6 @@ const sanitizeSize = ( size: SizeValue[ 'size' ] ): SizeValue[ 'size' ] => {
 	if ( typeof size === 'number' && isNaN( size ) ) {
 		return DEFAULT_SIZE;
 	}
+
 	return size;
 };

package/src/controls/size-control/utils/settings/get-default-unit.ts

@@ -0,0 +1,7 @@
+import type { PropType } from '@elementor/editor-props';
+
+import { getPropTypeSettings } from './get-prop-type-settings';
+
+export const getDefaultUnit = ( propType: PropType ) => {
+	return getPropTypeSettings( propType )?.default_unit;
+};

package/src/controls/size-control/utils/settings/get-prop-type-settings.ts

@@ -0,0 +1,12 @@
+import { type PropType } from '@elementor/editor-props';
+
+import { type SizeUnit } from '../../types';
+
+type Settings = {
+	units?: SizeUnit[];
+	default_unit?: SizeUnit;
+};
+
+export const getPropTypeSettings = ( propType: PropType ) => {
+	return propType.settings as Settings;
+};

package/src/controls/size-control/utils/settings/get-size-units.ts

@@ -0,0 +1,23 @@
+import { type PropType } from '@elementor/editor-props';
+
+import { getAngleUnits, getLengthUnits, getTimeUnits } from '../../sync/get-units';
+import { type SizeUnit, type SizeVariant } from '../../types';
+import { getPropTypeSettings } from './get-prop-type-settings';
+
+const getVariantUnits = ( variant: SizeVariant ): SizeUnit[] => {
+	const map: Record< SizeVariant, () => SizeUnit[] > = {
+		length: getLengthUnits,
+		angle: getAngleUnits,
+		time: getTimeUnits,
+	};
+
+	return map[ variant ]();
+};
+
+const getSettingsUnits = ( propType: PropType ) => {
+	return getPropTypeSettings( propType )?.units;
+};
+
+export const getSizeUnits = ( propType: PropType, variant: SizeVariant ): SizeUnit[] => {
+	return getSettingsUnits( propType ) ?? getVariantUnits( variant );
+};

package/src/controls/size-control/utils/should-nullify-value.ts

@@ -0,0 +1,15 @@
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { EXTENDED_UNITS } from './resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ] | null;
+
+const conditions: Array< ( value: SizeValue ) => boolean > = [
+	( value ) => value?.size === null || value?.size === undefined || value?.size === '',
+	( value ) => value?.unit !== EXTENDED_UNITS.auto,
+	( value ) => value?.unit !== EXTENDED_UNITS.custom,
+];
+
+export const shouldNullifyValue = ( value: SizeValue ): boolean => {
+	return conditions.every( ( condition ) => condition( value ) );
+};