@elementor/editor-controls 4.0.0-manual → 4.0.1

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-manual",
+  "version": "4.0.1",
   "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-manual",
-    "@elementor/editor-elements": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-responsive": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
-    "@elementor/env": "4.0.0-manual",
-    "@elementor/http-client": "4.0.0-manual",
+    "@elementor/editor-current-user": "4.0.1",
+    "@elementor/editor-elements": "4.0.1",
+    "@elementor/editor-props": "4.0.1",
+    "@elementor/editor-responsive": "4.0.1",
+    "@elementor/editor-ui": "4.0.1",
+    "@elementor/editor-v1-adapters": "4.0.1",
+    "@elementor/env": "4.0.1",
+    "@elementor/http-client": "4.0.1",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.0.0-manual",
-    "@elementor/events": "4.0.0-manual",
-    "@elementor/query": "4.0.0-manual",
-    "@elementor/session": "4.0.0-manual",
+    "@elementor/locations": "4.0.1",
+    "@elementor/events": "4.0.1",
+    "@elementor/query": "4.0.1",
+    "@elementor/session": "4.0.1",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-manual",
-    "@elementor/wp-media": "4.0.0-manual",
+    "@elementor/utils": "4.0.1",
+    "@elementor/wp-media": "4.0.1",
     "@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/components/promotions/attributes-control.tsx

@@ -8,6 +8,7 @@ import { createControl } from '../../create-control';
 import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Attributes', 'elementor' );
+const TRACKING_DATA = { target_name: 'attributes', location_l2: 'general' } as const;
 
 export const AttributesControl = createControl( () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
@@ -21,7 +22,7 @@ export const AttributesControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" />
+			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" trackingData={ TRACKING_DATA } />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<PlusIcon
 					aria-label={ ARIA_LABEL }

package/src/components/promotions/display-conditions-control.tsx

@@ -8,6 +8,7 @@ import { createControl } from '../../create-control';
 import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Display Conditions', 'elementor' );
+const TRACKING_DATA = { target_name: 'display_conditions', location_l2: 'general' } as const;
 
 export const DisplayConditionsControl = createControl( () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
@@ -21,7 +22,7 @@ export const DisplayConditionsControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" />
+			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" trackingData={ TRACKING_DATA } />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<IconButton
 					size="tiny"

package/src/components/promotions/promotion-trigger.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { forwardRef, type ReactNode, useImperativeHandle, useState } from 'react';
+import { forwardRef, type ReactNode, useCallback, useImperativeHandle, useState } from 'react';
 import { PromotionChip, PromotionInfotip } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '../../utils/tracking';
 import type { V4PromotionData, V4PromotionKey } from './types';
 
 function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
@@ -12,6 +13,7 @@ function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
 type PromotionTriggerProps = {
 	promotionKey: V4PromotionKey;
 	children?: ReactNode;
+	trackingData: PromotionTrackingData;
 };
 
 export type PromotionTriggerRef = {
@@ -19,13 +21,20 @@ export type PromotionTriggerRef = {
 };
 
 export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTriggerProps >(
-	( { promotionKey, children }, ref ) => {
+	( { promotionKey, children, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 		const promotion = getV4Promotion( promotionKey );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		return (
 			<>
@@ -40,6 +49,7 @@ export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTrigge
 							e.stopPropagation();
 							setIsOpen( false );
 						} }
+						onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 					>
 						<Box
 							onClick={ ( e: MouseEvent ) => {

package/src/controls/chips-control.tsx

@@ -31,7 +31,7 @@ export const ChipsControl = createControl( ( { options }: ChipsControlProps ) =>
 
 	const handleChange = ( _: SyntheticEvent, newValue: ChipsOption[] ) => {
 		const values = newValue.map( ( option ) => stringPropTypeUtil.create( option.value ) );
-		setValue( values.length > 0 ? values : null );
+		setValue( values );
 	};
 
 	return (

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/number-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { numberPropTypeUtil, type PropType } from '@elementor/editor-props';
-import { InputAdornment } from '@elementor/ui';
+import { InputAdornment, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import { NumberInput } from '../components/number-input';
@@ -12,7 +12,13 @@ const isEmptyOrNaN = ( value?: string | number | null ) =>
 
 const renderSuffix = ( propType: PropType ) => {
 	if ( propType.meta?.suffix ) {
-		return <InputAdornment position="end">{ propType.meta.suffix }</InputAdornment>;
+		return (
+			<InputAdornment position="end">
+				<Typography variant="caption" color="text.secondary">
+					{ propType.meta.suffix as string }
+				</Typography>
+			</InputAdornment>
+		);
 	}
 	return <></>;
 };

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

@@ -0,0 +1,66 @@
+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';
+
+const UNIT_KEY_PATTERN = /^[a-zA-Z%]$/;
+
+type Props = {
+	unit: SizeUnit;
+	units: SizeUnit[];
+	onUnitChange: ( unit: SizeUnit ) => void;
+};
+
+export const useSizeUnitKeyboard = ( { unit, units, onUnitChange }: Props ) => {
+	const { appendKey, startsWith } = useTypingBuffer();
+
+	const onUnitKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		if ( units.length === 0 ) {
+			return;
+		}
+
+		const { key, altKey, ctrlKey, metaKey } = event;
+
+		if ( altKey || ctrlKey || metaKey ) {
+			return;
+		}
+
+		if ( isExtendedUnit( unit ) && isNumericValue( key ) ) {
+			const [ defaultUnit ] = units;
+
+			if ( defaultUnit ) {
+				onUnitChange( defaultUnit );
+			}
+
+			return;
+		}
+
+		if ( ! UNIT_KEY_PATTERN.test( key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const updatedBuffer = appendKey( key.toLowerCase() );
+		const matchedUnit = units.find( ( u ) => startsWith( u, updatedBuffer ) );
+
+		if ( matchedUnit ) {
+			onUnitChange( matchedUnit );
+		}
+	};
+
+	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

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { type SizePropValue } from '@elementor/editor-props';
+
+import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
+import { type SetSizeValue, type SizeUnit } from '../types';
+import { isExtendedUnit } from '../utils/is-extended-unit';
+import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ];
+
+type UseSizeValueProps< T, U > = {
+	value: T | null;
+	setValue: SetSizeValue< T >;
+	units: U[];
+	defaultUnit?: U;
+};
+
+export const useSizeValue = < T extends SizeValue, U extends SizeUnit >( {
+	value,
+	setValue,
+	units,
+	defaultUnit,
+}: UseSizeValueProps< T, U > ) => {
+	const resolvedValue = useMemo(
+		() => 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,
+		setExternal: ( newState, options, meta ) => {
+			if ( newState !== null ) {
+				setValue( newState, options, meta );
+			}
+		},
+		persistWhen: ( next ) => hasChanged( next, resolvedValue ),
+		fallback: () => createDefaultSizeValue( units, defaultUnit ),
+	} );
+
+	const setSize = ( newSize: string, isInputValid = true ) => {
+		if ( isExtendedUnit( sizeValue.unit ) ) {
+			return;
+		}
+
+		const trimmed = newSize.trim();
+		const parsed = Number( trimmed );
+
+		const newState = {
+			...sizeValue,
+			size: trimmed && ! isNaN( parsed ) ? parsed : '',
+		};
+
+		setSizeValue( newState, undefined, { validation: () => isInputValid } );
+	};
+
+	const setUnit = ( unit: SizeValue[ 'unit' ] ) => {
+		setSizeValue( { unit, size: resolveSizeOnUnitChange( sizeValue.size, unit ) } as T );
+	};
+
+	return {
+		size: sizeValue.size,
+		unit: sizeValue.unit,
+		setSize,
+		setUnit,
+	};
+};
+
+const hasChanged = ( next?: SizeValue | null, current?: SizeValue | null ): boolean => {
+	return next?.size !== current?.size || next?.unit !== current?.unit;
+};

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { type RefObject, useEffect } from 'react';
+import type { SizePropValue } from '@elementor/editor-props';
+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';
+import { EXTENDED_UNITS } from './utils/resolve-size-value';
+
+type SizeValue = SizePropValue[ 'value' ];
+
+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,
+	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 ( popupState && popupState.isOpen ) {
+			popupState.close();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ activeBreakpoint ] );
+
+	const handleCustomSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		sizeFieldProps.setValue( {
+			size: event.target.value,
+			unit: EXTENDED_UNITS.custom,
+		} );
+	};
+
+	const handleSizeFieldClick = ( event: React.MouseEvent ) => {
+		if ( ( event.target as HTMLElement ).closest( 'input' ) && isCustomUnit ) {
+			popupState.open( anchorRef?.current );
+		}
+	};
+
+	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,
+	};
+
+	return (
+		<>
+			<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 }
+					anchorRef={ anchorRef as RefObject< HTMLDivElement > }
+					value={ String( sizeFieldProps?.value?.size ?? '' ) }
+					onChange={ handleCustomSizeChange }
+					onClose={ () => {} }
+				/>
+			) }
+		</>
+	);
+};

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+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 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 > = {
+	units: TUnit[];
+	value: TValue | null;
+	placeholder?: string;
+	defaultUnit?: SizeUnit;
+	startIcon?: React.ReactNode;
+	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 > >;
+};
+
+const UNIT_DISPLAY_LABELS_OVERRIDES: Partial< Record< SizeUnit, React.ReactNode > > = {
+	custom: <MathFunctionIcon fontSize="tiny" />,
+};
+
+export const SizeField = < T extends SizePropValue[ 'value' ], U extends SizeUnit >( {
+	value,
+	focused,
+	disabled,
+	InputProps,
+	defaultUnit,
+	placeholder,
+	onUnitChange,
+	startIcon,
+	ariaLabel,
+	onKeyDown,
+	setValue,
+	onBlur,
+	units,
+	min,
+	unitSelectorProps,
+}: SizeFieldProps< T, U > ) => {
+	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 );
+
+		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={ handleChange }
+			InputProps={ {
+				...InputProps,
+				autoComplete: 'off',
+				readOnly: isExtendedUnit( unit ),
+				startAdornment: startIcon && (
+					<InputAdornment position="start" disabled={ disabled }>
+						{ startIcon }
+					</InputAdornment>
+				),
+				endAdornment: (
+					<InputAdornment position="end">
+						<UnitSelector< U >
+							options={ units }
+							value={ unit as U }
+							onSelect={ handleUnitChange }
+							isActive={ unitSelectorProps?.isActive ?? hasSizeValue( size ) }
+							{ ...unitSelectorProps }
+							optionLabelOverrides={ UNIT_DISPLAY_LABELS_OVERRIDES }
+						/>
+					</InputAdornment>
+				),
+			} }
+			inputProps={ { min, step: 'any', 'arial-label': ariaLabel } }
+		/>
+	);
+};