@elementor/editor-controls 1.5.0 → 3.32.0-21

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { type RefObject, useRef } from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -35,8 +34,6 @@ export const LinkedDimensionsControl = createControl(
 
 		const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
 
-		const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
-
 		const onLinkToggle = () => {
 			if ( ! isLinked ) {
 				setSizeValue( dimensionsValue[ 'block-start' ]?.value ?? null );
@@ -71,11 +68,7 @@ export const LinkedDimensionsControl = createControl(
 				isDisabled={ () => disabled }
 			>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					{ isUsingNestedProps ? (
-						<ControlFormLabel>{ label }</ControlFormLabel>
-					) : (
-						<ControlLabel>{ label }</ControlLabel>
-					) }
+					<ControlFormLabel>{ label }</ControlFormLabel>
 					<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
 						<ToggleButton
 							aria-label={ isLinked ? unlinkedLabel : linkedLabel }
@@ -91,7 +84,7 @@ export const LinkedDimensionsControl = createControl(
 					</Tooltip>
 				</Stack>
 
-				{ getCssMarginProps( isSiteRtl ).map( ( row, index ) => (
+				{ getCssDimensionProps( isSiteRtl ).map( ( row, index ) => (
 					<Stack direction="row" gap={ 2 } flexWrap="nowrap" key={ index } ref={ gridRowRefs[ index ] }>
 						{ row.map( ( { icon, ...props } ) => (
 							<Grid container gap={ 0.75 } alignItems="center" key={ props.bind }>
@@ -141,12 +134,6 @@ const Control = ( {
 };
 
 const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
-	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
-
-	if ( ! isUsingNestedProps ) {
-		return <ControlFormLabel>{ label }</ControlFormLabel>;
-	}
-
 	return (
 		<PropKeyProvider bind={ bind }>
 			<ControlLabel>{ label }</ControlLabel>
@@ -154,7 +141,7 @@ const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
 	);
 };
 
-function getCssMarginProps( isSiteRtl: boolean ) {
+function getCssDimensionProps( isSiteRtl: boolean ) {
 	return [
 		[
 			{

package/src/controls/number-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { numberPropTypeUtil } from '@elementor/editor-props';
-import { TextField } from '@elementor/ui';
+import { InputAdornment, TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -18,12 +18,14 @@ export const NumberControl = createControl(
 		min = -Number.MAX_VALUE,
 		step = 1,
 		shouldForceInt = false,
+		startIcon,
 	}: {
 		placeholder?: string;
 		max?: number;
 		min?: number;
 		step?: number;
 		shouldForceInt?: boolean;
+		startIcon?: React.ReactNode;
 	} ) => {
 		const { value, setValue, placeholder, disabled } = useBoundProp( numberPropTypeUtil );
 
@@ -52,6 +54,13 @@ export const NumberControl = createControl(
 					onChange={ handleChange }
 					placeholder={ labelPlaceholder ?? ( placeholder ? String( placeholder ) : '' ) }
 					inputProps={ { step } }
+					InputProps={ {
+						startAdornment: startIcon ? (
+							<InputAdornment position="start" disabled={ disabled }>
+								{ startIcon }
+							</InputAdornment>
+						) : undefined,
+					} }
 					onKeyDown={ ( event: KeyboardEvent ) => {
 						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
 							event.preventDefault();

package/src/controls/position-control.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { useMemo } from 'react';
 import { positionPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { LetterXIcon, LetterYIcon } from '@elementor/icons';
 import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -33,29 +31,19 @@ const positionOptions = [
 	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
 	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
 	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
+	{ label: __( 'Custom', 'elementor' ), value: 'custom' },
 ];
 
 export const PositionControl = () => {
 	const positionContext = useBoundProp( positionPropTypeUtil );
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
-	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
-	const isCustom = !! positionContext.value && isVersion331Active;
-
-	const availablePositionOptions = useMemo( () => {
-		const options = [ ...positionOptions ];
-
-		if ( isVersion331Active ) {
-			options.push( { label: __( 'Custom', 'elementor' ), value: 'custom' } );
-		}
-
-		return options;
-	}, [ isVersion331Active ] );
+	const isCustom = !! positionContext.value;
 
 	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
 		const value = event.target.value || null;
 
-		if ( value === 'custom' && isVersion331Active ) {
+		if ( value === 'custom' ) {
 			positionContext.setValue( { x: null, y: null } );
 		} else {
 			stringPropContext.setValue( value );
@@ -77,7 +65,7 @@ export const PositionControl = () => {
 							onChange={ handlePositionChange }
 							fullWidth
 						>
-							{ availablePositionOptions.map( ( { label, value } ) => (
+							{ positionOptions.map( ( { label, value } ) => (
 								<MenuListItem key={ value } value={ value ?? '' }>
 									{ label }
 								</MenuListItem>

package/src/controls/repeatable-control.tsx

@@ -23,6 +23,7 @@ type RepeatableControlProps = {
 	initialValues?: object;
 	patternLabel?: string;
 	placeholder?: string;
+	propKey?: string;
 };
 
 const PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -36,6 +37,7 @@ export const RepeatableControl = createControl(
 		initialValues,
 		patternLabel,
 		placeholder,
+		propKey,
 	}: RepeatableControlProps ) => {
 		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
 
@@ -44,8 +46,8 @@ export const RepeatableControl = createControl(
 		}
 
 		const childArrayPropTypeUtil = useMemo(
-			() => createArrayPropUtils( childPropTypeUtil.key, childPropTypeUtil.schema ),
-			[ childPropTypeUtil.key, childPropTypeUtil.schema ]
+			() => createArrayPropUtils( childPropTypeUtil.key, childPropTypeUtil.schema, propKey ),
+			[ childPropTypeUtil.key, childPropTypeUtil.schema, propKey ]
 		);
 
 		const contextValue = useMemo(
@@ -181,11 +183,12 @@ const shouldShowPlaceholder = ( pattern: string, data: Record< string, unknown >
 
 const ItemLabel = ( { value }: { value: Record< string, unknown > } ) => {
 	const { placeholder, patternLabel } = useRepeatableControlContext();
-
-	const label = shouldShowPlaceholder( patternLabel, value ) ? placeholder : interpolate( patternLabel, value );
+	const showPlaceholder = shouldShowPlaceholder( patternLabel, value );
+	const label = showPlaceholder ? placeholder : interpolate( patternLabel, value );
+	const color = showPlaceholder ? 'text.tertiary' : 'text.primary';
 
 	return (
-		<Box component="span" color="text.tertiary">
+		<Box component="span" color={ color }>
 			{ label }
 		</Box>
 	);

package/src/controls/select-control.tsx

@@ -7,14 +7,19 @@ import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
+export type SelectOption = {
+	label: string;
+	value: StringPropValue[ 'value' ];
+	disabled?: boolean;
+};
+
 type Props = {
-	options: Array< { label: string; value: StringPropValue[ 'value' ]; disabled?: boolean } >;
+	options: SelectOption[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
 };
 
 export const SelectControl = createControl( ( { options, onChange }: Props ) => {
 	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
-
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
 

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

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useMemo, useRef } from 'react';
+import { selectionSizePropTypeUtil } from '@elementor/editor-props';
+import { Grid } from '@elementor/ui';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
+import { createControl } from '../create-control';
+import { SizeControl, type SizeControlProps } from './size-control';
+
+type SelectionComponentConfig = {
+	component: React.ComponentType< Record< string, unknown > >;
+	props: Record< string, unknown >;
+};
+
+type SizeControlConfig = Pick< SizeControlProps, 'variant' | 'units' | 'defaultUnit' >;
+
+type SelectionSizeControlProps = {
+	selectionLabel: string;
+	sizeLabel: string;
+	selectionConfig: SelectionComponentConfig;
+	sizeConfigMap: Record< string, SizeControlConfig >;
+};
+
+export const SelectionSizeControl = createControl(
+	( { selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }: SelectionSizeControlProps ) => {
+		const { value, setValue, propType } = useBoundProp( selectionSizePropTypeUtil );
+		const rowRef = useRef< HTMLDivElement >( null );
+
+		const currentSizeConfig = useMemo( () => {
+			switch ( value.selection.$$type ) {
+				case 'key-value':
+					return sizeConfigMap[ value?.selection?.value.value.value || '' ];
+				case 'string':
+					return sizeConfigMap[ value?.selection?.value || '' ];
+				default:
+					return null;
+			}
+		}, [ value, sizeConfigMap ] );
+		const SelectionComponent = selectionConfig.component;
+
+		return (
+			<PropProvider value={ value } setValue={ setValue } propType={ propType }>
+				<Grid container spacing={ 1.5 } ref={ rowRef }>
+					<Grid item xs={ 6 } sx={ { display: 'flex', alignItems: 'center' } }>
+						<ControlFormLabel>{ selectionLabel }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<PropKeyProvider bind="selection">
+							<SelectionComponent { ...selectionConfig.props } />
+						</PropKeyProvider>
+					</Grid>
+					{ currentSizeConfig && (
+						<>
+							<Grid item xs={ 6 } sx={ { display: 'flex', alignItems: 'center' } }>
+								<ControlFormLabel>{ sizeLabel }</ControlFormLabel>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind="size">
+									<SizeControl
+										anchorRef={ rowRef }
+										variant={ currentSizeConfig.variant }
+										units={ currentSizeConfig.units }
+										defaultUnit={ currentSizeConfig.defaultUnit }
+									/>
+								</PropKeyProvider>
+							</Grid>
+						</>
+					) }
+				</Grid>
+			</PropProvider>
+		);
+	}
+);

package/src/controls/size-control.tsx

@@ -11,165 +11,218 @@ import { createControl } from '../create-control';
 import { useSizeExtendedOptions } from '../hooks/use-size-extended-options';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import {
-	defaultUnits,
-	type DegreeUnit,
+	type AngleUnit,
+	angleUnits,
+	DEFAULT_SIZE,
+	DEFAULT_UNIT,
 	type ExtendedOption,
 	isUnitExtendedOption,
+	type LengthUnit,
+	lengthUnits,
+	type TimeUnit,
+	timeUnits,
 	type Unit,
 } from '../utils/size-control';
 
-const DEFAULT_UNIT = 'px';
-const DEFAULT_SIZE = NaN;
-
 type SizeValue = SizePropValue[ 'value' ];
 
-type SizeControlProps = {
+type SizeVariant = 'length' | 'angle' | 'time';
+
+type UnitProps< T extends readonly Unit[] > = {
+	units?: T;
+	defaultUnit?: T[ number ];
+};
+
+type BaseSizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units?: ( Unit | DegreeUnit )[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
 	anchorRef?: RefObject< HTMLDivElement | null >;
-	defaultUnit?: Unit | DegreeUnit;
 };
 
+type LengthSizeControlProps = BaseSizeControlProps &
+	UnitProps< LengthUnit[] > & {
+		variant: 'length';
+	};
+
+type AngleSizeControlProps = BaseSizeControlProps &
+	UnitProps< AngleUnit[] > & {
+		variant: 'angle';
+	};
+
+type TimeSizeControlProps = BaseSizeControlProps &
+	UnitProps< TimeUnit[] > & {
+		variant: 'time';
+	};
+
+export type SizeControlProps = LengthSizeControlProps | AngleSizeControlProps | TimeSizeControlProps;
+
 type State = {
 	numeric: number;
 	custom: string;
-	unit: Unit | DegreeUnit | ExtendedOption;
+	unit: Unit | ExtendedOption;
 };
 
-export const SizeControl = createControl( ( props: SizeControlProps ) => {
-	const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
-	const { units = [ ...defaultUnits ], placeholder, startIcon, anchorRef } = props;
-	const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp( sizePropTypeUtil );
-	const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, defaultUnit ) );
-	const activeBreakpoint = useActiveBreakpoint();
-
-	const extendedOptions = useSizeExtendedOptions( props.extendedOptions || [], props.disableCustom ?? false );
-	const popupState = usePopupState( { variant: 'popover' } );
-
-	const [ state, setState ] = useSyncExternalState( {
-		external: internalState,
-		setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
-		persistWhen: ( newState ) => {
-			if ( ! newState?.unit ) {
-				return false;
-			}
-
-			if ( isUnitExtendedOption( newState.unit ) ) {
-				return newState.unit === 'auto' ? true : !! newState.custom;
+const defaultSelectedUnit: Record< SizeControlProps[ 'variant' ], Unit > = {
+	length: 'px',
+	angle: 'deg',
+	time: 'ms',
+} as const;
+
+const defaultUnits: Record< SizeControlProps[ 'variant' ], Unit[] > = {
+	length: [ ...lengthUnits ] as LengthUnit[],
+	angle: [ ...angleUnits ] as AngleUnit[],
+	time: [ ...timeUnits ] as TimeUnit[],
+} as const;
+
+export const SizeControl = createControl(
+	( {
+		variant = 'length' as SizeControlProps[ 'variant' ],
+		defaultUnit,
+		units,
+		placeholder,
+		startIcon,
+		anchorRef,
+		extendedOptions,
+		disableCustom,
+	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
+		const {
+			value: sizeValue,
+			setValue: setSizeValue,
+			disabled,
+			restoreValue,
+			placeholder: externalPlaceholder,
+		} = useBoundProp( sizePropTypeUtil );
+		const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[ variant ];
+		const actualUnits = units ?? [ ...defaultUnits[ variant ] ];
+		const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, actualDefaultUnit ) );
+		const activeBreakpoint = useActiveBreakpoint();
+
+		const actualExtendedOptions = useSizeExtendedOptions( extendedOptions || [], disableCustom ?? false );
+		const popupState = usePopupState( { variant: 'popover' } );
+
+		const [ state, setState ] = useSyncExternalState( {
+			external: internalState,
+			setExternal: ( newState: State | null ) => setSizeValue( extractValueFromState( newState ) ),
+			persistWhen: ( newState ) => {
+				if ( ! newState?.unit ) {
+					return false;
+				}
+
+				if ( isUnitExtendedOption( newState.unit ) ) {
+					return newState.unit === 'auto' ? true : !! newState.custom;
+				}
+
+				return !! newState?.numeric || newState?.numeric === 0;
+			},
+			fallback: ( newState ) => ( {
+				unit: newState?.unit ?? actualDefaultUnit,
+				numeric: newState?.numeric ?? DEFAULT_SIZE,
+				custom: newState?.custom ?? '',
+			} ),
+		} );
+
+		const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } =
+			extractValueFromState( state ) || {};
+
+		const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
+			if ( newUnit === 'custom' ) {
+				popupState.open( anchorRef?.current );
 			}
 
-			return !! newState?.numeric || newState?.numeric === 0;
-		},
-		fallback: ( newState ) => ( {
-			unit: newState?.unit ?? defaultUnit,
-			numeric: newState?.numeric ?? DEFAULT_SIZE,
-			custom: newState?.custom ?? '',
-		} ),
-	} );
-
-	const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = defaultUnit } = extractValueFromState( state ) || {};
-
-	const handleUnitChange = ( newUnit: Unit | DegreeUnit | ExtendedOption ) => {
-		if ( newUnit === 'custom' ) {
-			popupState.open( anchorRef?.current );
-		}
-
-		setState( ( prev ) => ( { ...prev, unit: newUnit } ) );
-	};
-
-	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { value: size } = event.target;
-
-		if ( controlUnit === 'auto' ) {
-			setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
+			setState( ( prev ) => ( { ...prev, unit: newUnit } ) );
+		};
 
-			return;
-		}
+		const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+			const { value: size } = event.target;
 
-		setState( ( prev ) => ( {
-			...prev,
-			[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
-			unit: controlUnit,
-		} ) );
-	};
+			if ( controlUnit === 'auto' ) {
+				setState( ( prev ) => ( { ...prev, unit: controlUnit } ) );
 
-	const onInputFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {
-		if ( isUnitExtendedOption( state.unit ) ) {
-			( event.target as HTMLElement )?.blur();
-		}
-	};
+				return;
+			}
 
-	const onInputClick = ( event: React.MouseEvent ) => {
-		if ( ( event.target as HTMLElement ).closest( 'input' ) && 'custom' === state.unit ) {
-			popupState.open( anchorRef?.current );
-		}
-	};
+			setState( ( prev ) => ( {
+				...prev,
+				[ controlUnit === 'custom' ? 'custom' : 'numeric' ]: formatSize( size, controlUnit ),
+				unit: controlUnit,
+			} ) );
+		};
 
-	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue, state.unit === 'custom' ? state.unit : defaultUnit );
-		const currentUnitType = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
-		const mergedStates = {
-			...state,
-			unit: newState.unit ?? state.unit,
-			[ currentUnitType ]: newState[ currentUnitType ],
+		const onInputClick = ( event: React.MouseEvent ) => {
+			if ( ( event.target as HTMLElement ).closest( 'input' ) && 'custom' === state.unit ) {
+				popupState.open( anchorRef?.current );
+			}
 		};
 
-		if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
-			return;
-		}
+		useEffect( () => {
+			const newState = createStateFromSizeProp(
+				sizeValue,
+				state.unit === 'custom' ? state.unit : actualDefaultUnit,
+				'',
+				state.custom
+			);
+			const currentUnitType = isUnitExtendedOption( state.unit ) ? 'custom' : 'numeric';
+			const mergedStates = {
+				...state,
+				unit: newState.unit ?? state.unit,
+				[ currentUnitType ]: newState[ currentUnitType ],
+			};
+
+			if ( mergedStates.unit !== 'auto' && areStatesEqual( state, mergedStates ) ) {
+				return;
+			}
 
-		if ( state.unit === newState.unit ) {
-			setInternalState( mergedStates );
+			if ( state.unit === newState.unit ) {
+				setInternalState( mergedStates );
 
-			return;
-		}
+				return;
+			}
 
-		setState( newState );
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ sizeValue ] );
+			setState( newState );
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ sizeValue ] );
 
-	useEffect( () => {
-		const newState = createStateFromSizeProp( sizeValue, defaultUnit );
+		useEffect( () => {
+			const newState = createStateFromSizeProp( sizeValue, actualDefaultUnit, '', state.custom );
 
-		if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
-			setState( newState );
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ activeBreakpoint ] );
-
-	return (
-		<>
-			<SizeInput
-				disabled={ disabled }
-				size={ controlSize }
-				unit={ controlUnit }
-				units={ [ ...units, ...( extendedOptions || [] ) ] }
-				placeholder={ placeholder }
-				startIcon={ startIcon }
-				handleSizeChange={ handleSizeChange }
-				handleUnitChange={ handleUnitChange }
-				onBlur={ restoreValue }
-				onFocus={ onInputFocus }
-				onClick={ onInputClick }
-				popupState={ popupState }
-			/>
-			{ anchorRef?.current && (
-				<TextFieldPopover
+			if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
+				setState( newState );
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ activeBreakpoint ] );
+
+		return (
+			<>
+				<SizeInput
+					disabled={ disabled }
+					size={ controlSize }
+					unit={ controlUnit }
+					units={ [ ...actualUnits, ...( actualExtendedOptions || [] ) ] }
+					placeholder={ placeholder }
+					startIcon={ startIcon }
+					handleSizeChange={ handleSizeChange }
+					handleUnitChange={ handleUnitChange }
+					onBlur={ restoreValue }
+					onClick={ onInputClick }
 					popupState={ popupState }
-					anchorRef={ anchorRef }
-					restoreValue={ restoreValue }
-					value={ controlSize as string }
-					onChange={ handleSizeChange }
 				/>
-			) }
-		</>
-	);
-} );
+				{ anchorRef?.current && (
+					<TextFieldPopover
+						popupState={ popupState }
+						anchorRef={ anchorRef }
+						restoreValue={ restoreValue }
+						value={ controlSize as string }
+						onChange={ handleSizeChange }
+					/>
+				) }
+			</>
+		);
+	}
+);
 
-function formatSize< TSize extends string | number >( size: TSize, unit: Unit | DegreeUnit | ExtendedOption ): TSize {
+function formatSize< TSize extends string | number >( size: TSize, unit: Unit | ExtendedOption ): TSize {
 	if ( isUnitExtendedOption( unit ) ) {
 		return unit === 'auto' ? ( '' as TSize ) : ( String( size ?? '' ) as TSize );
 	}
@@ -179,17 +232,19 @@ function formatSize< TSize extends string | number >( size: TSize, unit: Unit |
 
 function createStateFromSizeProp(
 	sizeValue: SizeValue | null,
-	defaultUnit: Unit | DegreeUnit | ExtendedOption
+	defaultUnit: Unit | ExtendedOption,
+	defaultSize: string | number = '',
+	customState: string = ''
 ): State {
 	const unit = sizeValue?.unit ?? defaultUnit;
-	const size = sizeValue?.size ?? '';
+	const size = sizeValue?.size ?? defaultSize;
 
 	return {
 		numeric:
 			! isUnitExtendedOption( unit ) && ! isNaN( Number( size ) ) && ( size || size === 0 )
 				? Number( size )
 				: DEFAULT_SIZE,
-		custom: unit === 'custom' ? String( size ) : '',
+		custom: unit === 'custom' ? String( size ) : customState,
 		unit,
 	};
 }

package/src/controls/stroke-control.tsx

@@ -8,7 +8,7 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { SectionContent } from '../components/section-content';
 import { createControl } from '../create-control';
-import { type Unit } from '../utils/size-control';
+import { type LengthUnit } from '../utils/size-control';
 import { ColorControl } from './color-control';
 import { SizeControl } from './size-control';
 
@@ -18,7 +18,7 @@ type StrokeProps = {
 	children: React.ReactNode;
 };
 
-const units: Unit[] = [ 'px', 'em', 'rem' ];
+const units: LengthUnit[] = [ 'px', 'em', 'rem' ];
 
 export const StrokeControl = createControl( () => {
 	const propContext = useBoundProp( strokePropTypeUtil );