@elementor/editor-controls 3.33.0-98 → 3.34.2

package/src/controls/query-control.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import { numberPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
+import { type HttpResponse, httpService } from '@elementor/http-client';
+import { SearchIcon } from '@elementor/icons';
+import { debounce } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import {
+	Autocomplete,
+	type CategorizedOption,
+	findMatchingOption,
+	type FlatOption,
+	isCategorizedOptionPool,
+} from '../components/autocomplete';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { type DestinationProp } from './link-control';
+
+type Props = {
+	queryOptions: {
+		params: Record< string, unknown >;
+		url: string;
+	};
+	allowCustomValues?: boolean;
+	minInputLength?: number;
+	placeholder?: string;
+	onSetValue?: ( value: DestinationProp | null ) => void;
+	ariaLabel?: string;
+};
+
+type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
+
+type FetchOptionsParams = Record< string, unknown > & { term: string };
+
+export const QueryControl = createControl( ( props: Props ) => {
+	const { value, setValue } = useBoundProp< DestinationProp >();
+
+	const {
+		allowCustomValues = true,
+		queryOptions: { url, params = {} },
+		placeholder,
+		minInputLength = 2,
+		onSetValue,
+		ariaLabel,
+	} = props || {};
+
+	const normalizedPlaceholder = placeholder || __( 'Search', 'elementor' );
+
+	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
+		generateFirstLoadedOption( value?.value )
+	);
+
+	const onOptionChange = ( newValue: number | null ) => {
+		if ( newValue === null ) {
+			setValue( null );
+			onSetValue?.( null );
+
+			return;
+		}
+
+		const valueToSave = {
+			$$type: 'query',
+			value: {
+				id: numberPropTypeUtil.create( newValue ),
+				label: stringPropTypeUtil.create( findMatchingOption( options, newValue )?.label || null ),
+			},
+		};
+
+		setValue( valueToSave );
+		onSetValue?.( valueToSave );
+	};
+
+	const onTextChange = ( newValue: string | null ) => {
+		if ( ! newValue ) {
+			setValue( null );
+			onSetValue?.( null );
+
+			return;
+		}
+
+		const newLinkValue = newValue?.trim() || '';
+		const valueToSave = newLinkValue ? urlPropTypeUtil.create( newLinkValue ) : null;
+
+		setValue( valueToSave );
+		onSetValue?.( valueToSave );
+		updateOptions( newValue );
+	};
+
+	const updateOptions = ( newValue: string | null ) => {
+		setOptions( [] );
+
+		if ( ! newValue || ! url || newValue.length < minInputLength ) {
+			return;
+		}
+
+		debounceFetch( { ...params, term: newValue } );
+	};
+
+	const debounceFetch = useMemo(
+		() =>
+			debounce(
+				( queryParams: FetchOptionsParams ) =>
+					fetchOptions( url, queryParams ).then( ( newOptions ) => {
+						setOptions( formatOptions( newOptions ) );
+					} ),
+				400
+			),
+		[ url ]
+	);
+
+	return (
+		<ControlActions>
+			<Autocomplete
+				options={ options }
+				allowCustomValues={ allowCustomValues }
+				placeholder={ normalizedPlaceholder }
+				startAdornment={ <SearchIcon fontSize="tiny" /> }
+				value={ value?.value?.id?.value || value?.value }
+				onOptionChange={ onOptionChange }
+				onTextChange={ onTextChange }
+				minInputLength={ minInputLength }
+				disablePortal={ false }
+				inputProps={ {
+					...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+				} }
+			/>
+		</ControlActions>
+	);
+} );
+
+async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
+	if ( ! params || ! ajaxUrl ) {
+		return [];
+	}
+
+	try {
+		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
+
+		return response.data.value;
+	} catch {
+		return [];
+	}
+}
+
+function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
+	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
+
+	return options.sort( ( a, b ) =>
+		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
+	);
+}
+
+function generateFirstLoadedOption( unionValue: DestinationProp | null ): FlatOption[] {
+	const value = unionValue?.id?.value;
+	const label = unionValue?.label?.value;
+	const type = unionValue?.id?.$$type || 'url';
+
+	return value && label && type === 'number'
+		? [
+				{
+					id: value.toString(),
+					label,
+				},
+		  ]
+		: [];
+}

package/src/controls/repeatable-control.tsx

@@ -1,26 +1,27 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { createArrayPropUtils } from '@elementor/editor-props';
+import { createArrayPropUtils, type SizePropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
 import { PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlRepeater, Item, TooltipAddItemAction } from '../components/control-repeater';
+import { DisableItemAction } from '../components/control-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../components/control-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../components/control-repeater/actions/remove-item-action';
+import { type TooltipAddItemActionProps } from '../components/control-repeater/actions/tooltip-add-item-action';
+import { EditItemPopover } from '../components/control-repeater/items/edit-item-popover';
+import { ItemsContainer } from '../components/control-repeater/items/items-container';
+import { type CollectionPropUtil, type RepeatablePropValue } from '../components/control-repeater/types';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { type CollectionPropUtil } from '../components/repeater';
-import { Header, Item, TooltipAddItemAction, UnstableRepeater } from '../components/unstable-repeater';
-import { DisableItemAction } from '../components/unstable-repeater/actions/disable-item-action';
-import { DuplicateItemAction } from '../components/unstable-repeater/actions/duplicate-item-action';
-import { RemoveItemAction } from '../components/unstable-repeater/actions/remove-item-action';
-import { type TooltipAddItemActionProps } from '../components/unstable-repeater/actions/tooltip-add-item-action';
-import { EditItemPopover } from '../components/unstable-repeater/items/edit-item-popover';
-import { ItemsContainer } from '../components/unstable-repeater/items/items-container';
-import { type RepeatablePropValue } from '../components/unstable-repeater/types';
+import { RepeaterHeader } from '../components/repeater/repeater-header';
 import { createControl } from '../create-control';
 import {
 	type ChildControlConfig,
 	RepeatableControlContext,
 	useRepeatableControlContext,
 } from '../hooks/use-repeatable-control-context';
+import { CUSTOM_SIZE_LABEL } from './size-control';
 
 type RepeatableControlProps = {
 	label: string;
@@ -49,7 +50,7 @@ export const RepeatableControl = createControl(
 		propKey,
 		addItemTooltipProps,
 	}: RepeatableControlProps ) => {
-		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+		const { propTypeUtil: childPropTypeUtil, isItemDisabled } = childControlConfig;
 
 		if ( ! childPropTypeUtil ) {
 			return null;
@@ -74,29 +75,35 @@ export const RepeatableControl = createControl(
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
 				<RepeatableControlContext.Provider value={ contextValue }>
-					<UnstableRepeater
+					<ControlRepeater
 						initial={ childPropTypeUtil.create( initialValues || null ) }
 						propTypeUtil={ childArrayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
+						isItemDisabled={ isItemDisabled }
 					>
-						<Header label={ repeaterLabel }>
+						<RepeaterHeader label={ repeaterLabel }>
 							<TooltipAddItemAction
 								{ ...addItemTooltipProps }
 								newItemIndex={ 0 }
 								ariaLabel={ repeaterLabel }
 							/>
-						</Header>
-						<ItemsContainer
-							isSortable={ false }
-							itemTemplate={ <Item Icon={ ItemIcon } Label={ ItemLabel } /> }
-						>
-							{ showDuplicate && <DuplicateItemAction /> }
-							{ showToggle && <DisableItemAction /> }
-							<RemoveItemAction />
+						</RepeaterHeader>
+						<ItemsContainer isSortable={ false }>
+							<Item
+								Icon={ ItemIcon }
+								Label={ ItemLabel }
+								actions={
+									<>
+										{ showDuplicate && <DuplicateItemAction /> }
+										{ showToggle && <DisableItemAction /> }
+										<RemoveItemAction />
+									</>
+								}
+							/>
 						</ItemsContainer>
 						<EditItemPopover>
 							<Content />
 						</EditItemPopover>
-					</UnstableRepeater>
+					</ControlRepeater>
 				</RepeatableControlContext.Provider>
 			</PropProvider>
 		);
@@ -126,7 +133,7 @@ const interpolate = ( template: string, data: Record< string, unknown > ) => {
 		const value = getNestedValue( data, path );
 
 		if ( typeof value === 'object' && value !== null && ! Array.isArray( value ) ) {
-			if ( value.name ) {
+			if ( 'name' in value && value.name ) {
 				return value.name as string;
 			}
 
@@ -142,12 +149,32 @@ const interpolate = ( template: string, data: Record< string, unknown > ) => {
 };
 
 const getNestedValue = ( obj: Record< string, unknown >, path: string ) => {
-	return path.split( '.' ).reduce( ( current: Record< string, unknown >, key ) => {
+	let parentObj: Record< string, unknown > = {};
+	const pathKeys = path.split( '.' );
+	const key = pathKeys.slice( -1 )[ 0 ];
+
+	let value: unknown = pathKeys.reduce( ( current: Record< string, unknown >, currentKey, currentIndex ) => {
+		if ( currentIndex === pathKeys.length - 2 ) {
+			parentObj = current;
+		}
+
 		if ( current && typeof current === 'object' ) {
-			return current[ key ] as Record< string, unknown >;
+			return current[ currentKey ] as Record< string, unknown >;
 		}
+
 		return {};
 	}, obj );
+
+	value = !! value ? value : '';
+	const propType = parentObj?.$$type;
+	const propValue = parentObj?.value as SizePropValue[ 'value' ];
+	const doesValueRepresentCustomSize = key === 'unit' && propType === 'size' && propValue?.unit === 'custom';
+
+	if ( ! doesValueRepresentCustomSize ) {
+		return value;
+	}
+
+	return propValue?.size ? '' : CUSTOM_SIZE_LABEL;
 };
 
 const isEmptyValue = ( val: unknown ) => {
@@ -190,11 +217,19 @@ const shouldShowPlaceholder = ( pattern: string, data: Record< string, unknown >
 	return false;
 };
 
+const getTextColor = ( isReadOnly: boolean, showPlaceholder: boolean ): string => {
+	if ( isReadOnly ) {
+		return 'text.disabled';
+	}
+	return showPlaceholder ? 'text.tertiary' : 'text.primary';
+};
+
 const ItemLabel = ( { value }: { value: Record< string, unknown > } ) => {
-	const { placeholder, patternLabel } = useRepeatableControlContext();
+	const { placeholder, patternLabel, props: childProps } = useRepeatableControlContext();
 	const showPlaceholder = shouldShowPlaceholder( patternLabel, value );
 	const label = showPlaceholder ? placeholder : interpolate( patternLabel, value );
-	const color = showPlaceholder ? 'text.tertiary' : 'text.primary';
+	const isReadOnly = !! childProps?.readOnly;
+	const color = getTextColor( isReadOnly, showPlaceholder );
 
 	return (
 		<Box component="span" color={ color }>

package/src/controls/select-control-wrapper.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import { createControl } from '../create-control';
+import { SelectControl, type SelectOption } from './select-control';
+
+type ExtendedWindow = Window & {
+	elementor: { $previewContents: [ HTMLIFrameElement ]; config: { document: { id: string } } };
+};
+
+const getOffCanvasElements = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const documentId = extendedWindow.elementor.config.document.id;
+	const offCanvasElements = extendedWindow.elementor.$previewContents[ 0 ].querySelectorAll(
+		`[data-elementor-id="${ documentId }"] .elementor-widget-off-canvas.elementor-element-edit-mode`
+	);
+
+	return Array.from( offCanvasElements as unknown as HTMLElement[] ).map( ( offCanvasElement ) => {
+		return {
+			label: offCanvasElement.querySelector( '.e-off-canvas' )?.getAttribute( 'aria-label' ) ?? '',
+			value: offCanvasElement.dataset.id,
+		} as SelectOption;
+	} );
+};
+
+const collectionMethods = {
+	'off-canvas': getOffCanvasElements,
+} as const;
+
+type SelectControlWrapperProps = Parameters< typeof SelectControl >[ 0 ] & {
+	collectionId?: keyof typeof collectionMethods;
+};
+
+const useDynamicOptions = (
+	collectionId?: keyof typeof collectionMethods,
+	initialOptions?: SelectControlWrapperProps[ 'options' ]
+) => {
+	const [ options, setOptions ] = useState< SelectControlWrapperProps[ 'options' ] >( initialOptions ?? [] );
+
+	useEffect( () => {
+		if ( ! collectionId || ! collectionMethods[ collectionId ] ) {
+			setOptions( initialOptions ?? [] );
+			return;
+		}
+		setOptions( collectionMethods[ collectionId ]() );
+	}, [ collectionId, initialOptions ] );
+
+	return options;
+};
+
+export const SelectControlWrapper = createControl(
+	( { collectionId, options, ...props }: SelectControlWrapperProps ) => {
+		const actualOptions = useDynamicOptions( collectionId, options );
+
+		return <SelectControl options={ actualOptions } { ...props } />;
+	}
+);

package/src/controls/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Select, type SelectChangeEvent, Typography } from '@elementor/ui';
+import { Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,12 +13,13 @@ export type SelectOption = {
 	disabled?: boolean;
 };
 
-type Props = {
+type SelectControlProps = {
 	options: SelectOption[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+	MenuProps?: SelectProps[ 'MenuProps' ];
+	ariaLabel?: string;
 };
-
-export const SelectControl = createControl( ( { options, onChange }: Props ) => {
+export const SelectControl = createControl( ( { options, onChange, MenuProps, ariaLabel }: SelectControlProps ) => {
 	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
@@ -26,6 +27,7 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 		onChange?.( newValue, value );
 		setValue( newValue );
 	};
+	const isDisabled = disabled || options.length === 0;
 
 	return (
 		<ControlActions>
@@ -33,6 +35,8 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				sx={ { overflow: 'hidden' } }
 				displayEmpty
 				size="tiny"
+				MenuProps={ MenuProps }
+				aria-label={ ariaLabel || placeholder }
 				renderValue={ ( selectedValue: string | null ) => {
 					const findOptionByValue = ( searchValue: string | null ) =>
 						options.find( ( opt ) => opt.value === searchValue );
@@ -55,7 +59,7 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				} }
 				value={ value ?? '' }
 				onChange={ handleChange }
-				disabled={ disabled }
+				disabled={ isDisabled }
 				fullWidth
 			>
 				{ options.map( ( { label, ...props } ) => (

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

@@ -20,13 +20,22 @@ type SelectionSizeControlProps = {
 	sizeLabel: string;
 	selectionConfig: SelectionComponentConfig;
 	sizeConfigMap: Record< string, SizeControlConfig >;
+	isRepeaterControl?: boolean;
 };
 
 export const SelectionSizeControl = createControl(
-	( { selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }: SelectionSizeControlProps ) => {
+	( {
+		selectionLabel,
+		sizeLabel,
+		selectionConfig,
+		sizeConfigMap,
+		isRepeaterControl = false,
+	}: SelectionSizeControlProps ) => {
 		const { value, setValue, propType } = useBoundProp( selectionSizePropTypeUtil );
 		const rowRef = useRef< HTMLDivElement >( null );
 
+		const sizeFieldId = sizeLabel.replace( /\s+/g, '-' ).toLowerCase();
+
 		const currentSizeConfig = useMemo( () => {
 			switch ( value.selection.$$type ) {
 				case 'key-value':
@@ -53,7 +62,7 @@ export const SelectionSizeControl = createControl(
 					{ currentSizeConfig && (
 						<>
 							<Grid item xs={ 6 } sx={ { display: 'flex', alignItems: 'center' } }>
-								<ControlFormLabel>{ sizeLabel }</ControlFormLabel>
+								<ControlFormLabel htmlFor={ sizeFieldId }>{ sizeLabel }</ControlFormLabel>
 							</Grid>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind="size">
@@ -62,6 +71,8 @@ export const SelectionSizeControl = createControl(
 										variant={ currentSizeConfig.variant }
 										units={ currentSizeConfig.units }
 										defaultUnit={ currentSizeConfig.defaultUnit }
+										id={ sizeFieldId }
+										isRepeaterControl={ isRepeaterControl }
 									/>
 								</PropKeyProvider>
 							</Grid>

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type RefObject, useEffect, useState } from 'react';
+import { type RefObject, useEffect, useMemo } from 'react';
 import { type PropType, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { usePopupState } from '@elementor/ui';
@@ -42,6 +42,8 @@ type BaseSizeControlProps = {
 	min?: number;
 	enablePropTypeUnits?: boolean;
 	id?: string;
+	ariaLabel?: string;
+	isRepeaterControl?: boolean;
 };
 
 type LengthSizeControlProps = BaseSizeControlProps &
@@ -79,6 +81,8 @@ const defaultUnits: Record< SizeControlProps[ 'variant' ], Unit[] > = {
 	time: [ ...timeUnits ] as TimeUnit[],
 } as const;
 
+export const CUSTOM_SIZE_LABEL = 'fx';
+
 export const SizeControl = createControl(
 	( {
 		variant = 'length' as SizeControlProps[ 'variant' ],
@@ -92,6 +96,7 @@ export const SizeControl = createControl(
 		min = 0,
 		enablePropTypeUnits = false,
 		id,
+		ariaLabel,
 	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
 		const {
 			value: sizeValue,
@@ -101,29 +106,24 @@ export const SizeControl = createControl(
 			placeholder: externalPlaceholder,
 			propType,
 		} = useBoundProp( sizePropTypeUtil );
+
 		const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[ variant ];
-		const [ internalState, setInternalState ] = useState( createStateFromSizeProp( sizeValue, actualDefaultUnit ) );
 		const activeBreakpoint = useActiveBreakpoint();
 		const actualUnits = resolveUnits( propType, enablePropTypeUnits, variant, units );
 
 		const actualExtendedOptions = useSizeExtendedOptions( extendedOptions || [], disableCustom ?? false );
 		const popupState = usePopupState( { variant: 'popover' } );
 
+		const memorizedExternalState = useMemo(
+			() => createStateFromSizeProp( sizeValue, actualDefaultUnit ),
+			[ sizeValue, actualDefaultUnit ]
+		);
+
 		const [ state, setState ] = useSyncExternalState( {
-			external: internalState,
+			external: memorizedExternalState,
 			setExternal: ( newState: State | null, options, meta ) =>
 				setSizeValue( extractValueFromState( newState ), options, meta ),
-			persistWhen: ( newState ) => {
-				if ( ! newState?.unit ) {
-					return false;
-				}
-
-				if ( isUnitExtendedOption( newState.unit ) ) {
-					return newState.unit === 'auto' ? true : !! newState.custom;
-				}
-
-				return !! newState?.numeric || newState?.numeric === 0;
-			},
+			persistWhen: ( newState ) => !! extractValueFromState( newState ),
 			fallback: ( newState ) => ( {
 				unit: newState?.unit ?? actualDefaultUnit,
 				numeric: newState?.numeric ?? DEFAULT_SIZE,
@@ -132,7 +132,7 @@ export const SizeControl = createControl(
 		} );
 
 		const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } =
-			extractValueFromState( state ) || {};
+			extractValueFromState( state, true ) || {};
 
 		const handleUnitChange = ( newUnit: Unit | ExtendedOption ) => {
 			if ( newUnit === 'custom' ) {
@@ -169,40 +169,14 @@ export const SizeControl = createControl(
 			}
 		};
 
-		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 );
-
-				return;
+		const maybeClosePopup = React.useCallback( () => {
+			if ( popupState && popupState.isOpen ) {
+				popupState.close();
 			}
-
-			setState( newState );
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [ sizeValue ] );
+		}, [ popupState ] );
 
 		useEffect( () => {
-			const newState = createStateFromSizeProp( sizeValue, actualDefaultUnit, '', state.custom );
-
-			if ( activeBreakpoint && ! areStatesEqual( newState, state ) ) {
-				setState( newState );
-			}
+			maybeClosePopup();
 			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ activeBreakpoint ] );
 
@@ -222,6 +196,7 @@ export const SizeControl = createControl(
 					popupState={ popupState }
 					min={ min }
 					id={ id }
+					ariaLabel={ ariaLabel }
 				/>
 				{ anchorRef?.current && popupState.isOpen && (
 					<TextFieldPopover
@@ -279,7 +254,7 @@ function createStateFromSizeProp(
 	};
 }
 
-function extractValueFromState( state: State | null ): SizeValue | null {
+function extractValueFromState( state: State | null, allowEmpty: boolean = false ): SizeValue | null {
 	if ( ! state ) {
 		return null;
 	}
@@ -294,20 +269,18 @@ function extractValueFromState( state: State | null ): SizeValue | null {
 		return { size: '', unit };
 	}
 
-	return {
-		size: state[ unit === 'custom' ? 'custom' : 'numeric' ],
-		unit,
-	} as SizeValue;
-}
-
-function areStatesEqual( state1: State, state2: State ): boolean {
-	if ( state1.unit !== state2.unit || state1.custom !== state2.custom ) {
-		return false;
+	if ( unit === 'custom' ) {
+		return { size: state.custom ?? '', unit: 'custom' };
 	}
 
-	if ( isUnitExtendedOption( state1.unit ) ) {
-		return state1.custom === state2.custom;
+	const numeric = state.numeric;
+
+	if ( ! allowEmpty && ( numeric === undefined || numeric === null || Number.isNaN( numeric ) ) ) {
+		return null;
 	}
 
-	return state1.numeric === state2.numeric || ( isNaN( state1.numeric ) && isNaN( state2.numeric ) );
+	return {
+		size: numeric,
+		unit,
+	};
 }