@elementor/editor-controls 0.21.0 → 0.25.0

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": "0.21.0",
+  "version": "0.25.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.7.0",
-    "@elementor/editor-props": "0.11.1",
-    "@elementor/editor-ui": "0.5.1",
+    "@elementor/editor-elements": "0.8.1",
+    "@elementor/editor-props": "0.12.0",
+    "@elementor/editor-ui": "0.7.1",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
     "@elementor/icons": "1.37.0",

package/src/bound-prop-context/prop-context.tsx

@@ -14,6 +14,7 @@ type PropContext< T extends PropValue, P extends PropType > = {
 	setValue: SetValue< T >;
 	value: T | null;
 	propType: P;
+	placeholder?: T;
 };
 
 const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
@@ -27,6 +28,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	value,
 	setValue,
 	propType,
+	placeholder,
 }: PropProviderProps< T, P > ) => {
 	return (
 		<PropContext.Provider
@@ -34,6 +36,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 				value,
 				propType,
 				setValue: setValue as SetValue< PropValue >,
+				placeholder,
 			} }
 		>
 			{ children }

package/src/bound-prop-context/prop-key-context.tsx

@@ -19,6 +19,7 @@ export type PropKeyContextValue< T, P > = {
 	setValue: SetValue< T >;
 	value: T;
 	propType: P;
+	placeholder?: T;
 	path: PropKey[];
 };
 
@@ -60,12 +61,13 @@ const ObjectPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	};
 
 	const value = context.value?.[ bind ];
+	const placeholder = context.placeholder?.[ bind ];
 
 	const propType = context.propType.shape[ bind ];
 
 	return (
 		<PropKeyContext.Provider
-			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+			value={ { ...context, value, setValue, placeholder, bind, propType, path: [ ...( path ?? [] ), bind ] } }
 		>
 			{ children }
 		</PropKeyContext.Provider>

package/src/bound-prop-context/use-bound-prop.ts

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
 	type CreateOptions,
 	type PropKey,
@@ -15,7 +16,9 @@ type UseBoundProp< TValue extends PropValue > = {
 	setValue: SetValue< TValue | null >;
 	value: TValue;
 	propType: PropType;
+	placeholder?: TValue;
 	path: PropKey[];
+	restoreValue: () => void;
 };
 
 export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;
@@ -29,12 +32,18 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 ) {
 	const propKeyContext = usePropKeyContext();
 
+	const { isValid, validate, restoreValue } = useValidation( propKeyContext.propType );
+
 	// allow using the hook without a propTypeUtil, with no modifications or validations.
 	if ( ! propTypeUtil ) {
 		return propKeyContext;
 	}
 
 	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
+		if ( ! validate( value ) ) {
+			return;
+		}
+
 		if ( value === null ) {
 			return propKeyContext?.setValue( null, options, meta );
 		}
@@ -45,15 +54,45 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 	const propType = resolveUnionPropType( propKeyContext.propType, propTypeUtil.key );
 
 	const value = propTypeUtil.extract( propKeyContext.value ?? propType.default ?? null );
+	const placeholder = propTypeUtil.extract( propKeyContext.placeholder ?? null );
 
 	return {
 		...propKeyContext,
-		setValue,
-		value,
 		propType,
+		setValue,
+		value: isValid ? value : null,
+		restoreValue,
+		placeholder,
 	};
 }
 
+const useValidation = ( propType: PropType ) => {
+	const [ isValid, setIsValid ] = useState( true );
+
+	// If the value does not pass the prop type validation, set the isValid state to false.
+	// This will prevent the value from being set in the model, and its fallback will be used instead.
+	const validate = ( value: PropValue | null ) => {
+		let valid = true;
+
+		if ( propType.settings.required && value === null ) {
+			valid = false;
+		}
+
+		setIsValid( valid );
+
+		return valid;
+	};
+
+	const restoreValue = () => setIsValid( true );
+
+	return {
+		isValid,
+		setIsValid,
+		validate,
+		restoreValue,
+	};
+};
+
 // utils
 const resolveUnionPropType = ( propType: PropType, key: string ): PropType => {
 	let resolvedPropType = propType;

package/src/components/repeater.tsx

@@ -48,6 +48,8 @@ type RepeaterProps< T > = {
 	};
 };
 
+const EMPTY_OPEN_ITEM = -1;
+
 export const Repeater = < T, >( {
 	label,
 	itemSettings,
@@ -56,7 +58,7 @@ export const Repeater = < T, >( {
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
 }: RepeaterProps< Item< T > > ) => {
-	const [ openItem, setOpenItem ] = useState( -1 );
+	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
 	const [ items, setItems ] = useSyncExternalState( {
 		external: repeaterValues,
@@ -166,7 +168,6 @@ export const Repeater = < T, >( {
 						return (
 							<SortableItem id={ key } key={ `sortable-${ key }` }>
 								<RepeaterItem
-									bind={ String( index ) }
 									disabled={ value?.disabled }
 									label={ <itemSettings.Label value={ value } /> }
 									startIcon={ <itemSettings.Icon value={ value } /> }
@@ -174,6 +175,7 @@ export const Repeater = < T, >( {
 									duplicateItem={ () => duplicateRepeaterItem( index ) }
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 									openOnMount={ openOnAdd && openItem === key }
+									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -190,7 +192,6 @@ export const Repeater = < T, >( {
 
 type RepeaterItemProps = {
 	label: React.ReactNode;
-	bind: string;
 	disabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
@@ -198,6 +199,7 @@ type RepeaterItemProps = {
 	toggleDisableItem: () => void;
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
 	openOnMount: boolean;
+	onOpen: () => void;
 };
 
 const RepeaterItem = ( {
@@ -209,9 +211,10 @@ const RepeaterItem = ( {
 	duplicateItem,
 	toggleDisableItem,
 	openOnMount,
+	onOpen,
 }: RepeaterItemProps ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
-	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount );
+	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
 	const toggleLabel = disabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
@@ -247,7 +250,6 @@ const RepeaterItem = ( {
 						</Tooltip>
 					</>
 				}
-				sx={ { backgroundColor: 'background.paper' } }
 			/>
 			<Popover
 				disablePortal
@@ -267,7 +269,7 @@ const RepeaterItem = ( {
 	);
 };
 
-const usePopover = ( openOnMount: boolean ) => {
+const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
 	const [ ref, setRef ] = useState< HTMLElement | null >( null );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
@@ -277,6 +279,7 @@ const usePopover = ( openOnMount: boolean ) => {
 	useEffect( () => {
 		if ( openOnMount && ref ) {
 			popoverState.open( ref );
+			onOpen?.();
 		}
 		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/sortable.tsx

@@ -34,16 +34,11 @@ export const SortableItem = ( { id, children }: SortableItemProps ): React.React
 				triggerProps,
 				itemStyle,
 				triggerStyle,
-				isDragOverlay,
 				showDropIndication,
 				dropIndicationStyle,
 			}: UnstableSortableItemRenderProps ) => {
 				return (
-					<StyledListItem
-						{ ...itemProps }
-						style={ itemStyle }
-						sx={ { backgroundColor: isDragOverlay ? 'background.paper' : undefined } }
-					>
+					<StyledListItem { ...itemProps } style={ itemStyle }>
 						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
 						{ children }
 						{ showDropIndication && <StyledDivider style={ dropIndicationStyle } /> }
@@ -72,6 +67,11 @@ const StyledListItem = styled( ListItem )`
 		transform: translate( -75%, -50% );
 	}
 
+	&[aria-describedby=''] > .MuiTag-root {
+		background-color: ${ ( { theme } ) => theme.palette.background.paper };
+		box-shadow: ${ ( { theme } ) => theme.shadows[ 3 ] };
+	}
+
 	&:hover {
 		& .class-item-sortable-trigger {
 			visibility: visible;

package/src/components/text-field-inner-selection.tsx

@@ -9,25 +9,41 @@ type TextFieldInnerSelectionProps = {
 	type: string;
 	value: PropValue;
 	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	endAdornment: React.ReactNode;
 	startAdornment?: React.ReactNode;
 };
 
 export const TextFieldInnerSelection = forwardRef(
-	( { placeholder, type, value, onChange, endAdornment, startAdornment }: TextFieldInnerSelectionProps, ref ) => {
+	(
+		{
+			placeholder,
+			type,
+			value,
+			onChange,
+			onBlur,
+			onKeyDown,
+			endAdornment,
+			startAdornment,
+		}: TextFieldInnerSelectionProps,
+		ref
+	) => {
 		return (
 			<TextField
+				ref={ ref }
 				size="tiny"
 				fullWidth
 				type={ type }
 				value={ value }
 				onChange={ onChange }
+				onKeyDown={ onKeyDown }
+				onBlur={ onBlur }
 				placeholder={ placeholder }
 				InputProps={ {
 					endAdornment,
 					startAdornment,
 				} }
-				ref={ ref }
 			/>
 		);
 	}
@@ -58,11 +74,11 @@ export const SelectionEndAdornment = < T extends string >( {
 		<InputAdornment position="end">
 			<Button
 				size="small"
-				color="inherit"
-				sx={ { font: 'inherit', minWidth: 'initial' } }
+				color="secondary"
+				sx={ { font: 'inherit', minWidth: 'initial', textTransform: 'uppercase' } }
 				{ ...bindTrigger( popupState ) }
 			>
-				{ value.toUpperCase() }
+				{ value }
 			</Button>
 
 			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -271,7 +271,7 @@ const useImage = ( image: BackgroundImageOverlay ) => {
 	const { data: attachment } = useWpMediaAttachment( imageSrc.id?.value || null );
 
 	if ( imageSrc.id ) {
-		const imageFileTypeExtension = attachment?.subtype ? `.${ attachment.subtype }` : '';
+		const imageFileTypeExtension = getFileExtensionFromFilename( attachment?.filename );
 		imageTitle = `${ attachment?.title }${ imageFileTypeExtension }` || null;
 		imageUrl = attachment?.url || null;
 	} else if ( imageSrc.url ) {
@@ -282,6 +282,17 @@ const useImage = ( image: BackgroundImageOverlay ) => {
 	return { imageTitle, imageUrl };
 };
 
+const getFileExtensionFromFilename = ( filename?: string ) => {
+	if ( ! filename ) {
+		return '';
+	}
+
+	// get the substring after the last . in the filename
+	const extension = filename.substring( filename.lastIndexOf( '.' ) + 1 );
+
+	return `.${ extension }`;
+};
+
 const getGradientValue = ( value: BackgroundOverlayItemPropValue ) => {
 	const gradient = value.value;
 

package/src/controls/font-family-control/font-family-control.tsx

@@ -86,6 +86,8 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 
 					<Box px={ 1.5 } pb={ 1 }>
 						<TextField
+							// eslint-disable-next-line jsx-a11y/no-autofocus
+							autoFocus
 							fullWidth
 							size={ SIZE }
 							value={ searchValue }
@@ -280,6 +282,8 @@ const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
 		top: 0,
 		left: 0,
 		width: '100%',
+		display: 'flex',
+		alignItems: 'center',
 	},
 	'& > [role="option"]': {
 		...theme.typography.caption,

package/src/controls/link-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
-import { getAncestorWithAnchorTag, getDescendantWithAnchorTag } from '@elementor/editor-elements';
+import { type PropsWithChildren, useMemo, useState } from 'react';
+import { getLinkInLinkRestriction, type LinkInLinkRestriction, selectElement } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
 	linkPropTypeUtil,
@@ -9,10 +9,11 @@ import {
 	stringPropTypeUtil,
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
+import { InfoTipCard } from '@elementor/editor-ui';
 import { type HttpResponse, httpService } from '@elementor/http';
-import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
-import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
+import { Box, Collapse, Divider, Grid, IconButton, Infotip, Stack, Switch } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
@@ -49,11 +50,15 @@ type LinkSessionValue = {
 type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
 
 const SIZE = 'tiny';
+const learnMoreButton = {
+	label: __( 'Learn More', 'elementor' ),
+	href: 'https://go.elementor.com/element-link-inside-link-infotip',
+};
 
 export const LinkControl = createControl( ( props: Props ) => {
 	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
 	const [ linkSessionValue, setLinkSessionValue ] = useSessionStorage< LinkSessionValue >( path.join( '/' ) );
-	const [ isEnabled, setIsEnabled ] = useState( !! value );
+	const [ isActive, setIsActive ] = useState( !! value );
 
 	const {
 		allowCustomValues,
@@ -63,20 +68,22 @@ export const LinkControl = createControl( ( props: Props ) => {
 		context: { elementId },
 	} = props || {};
 
+	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
 	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
 		generateFirstLoadedOption( value )
 	);
+	const shouldDisableAddingLink = ! isActive && linkInLinkRestriction.shouldRestrict;
 
 	const onEnabledChange = () => {
-		const shouldRestrict = getAncestorWithAnchorTag( elementId ) || getDescendantWithAnchorTag( elementId );
+		setLinkInLinkRestriction( getLinkInLinkRestriction( elementId ) );
 
-		if ( shouldRestrict && ! isEnabled ) {
+		if ( linkInLinkRestriction.shouldRestrict && ! isActive ) {
 			return;
 		}
 
-		setIsEnabled( ( prevState ) => ! prevState );
-		setValue( isEnabled ? null : linkSessionValue?.value ?? null );
-		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
+		setIsActive( ( prevState ) => ! prevState );
+		setValue( isActive ? null : linkSessionValue?.value ?? null );
+		setLinkSessionValue( { value, meta: { isEnabled: ! isActive } } );
 	};
 
 	const onOptionChange = ( newValue: number | null ) => {
@@ -145,13 +152,16 @@ export const LinkControl = createControl( ( props: Props ) => {
 					} }
 				>
 					<ControlFormLabel>{ __( 'Link', 'elementor' ) }</ControlFormLabel>
-					<ToggleIconControl
-						enabled={ isEnabled }
-						onIconClick={ onEnabledChange }
-						label={ __( 'Toggle link', 'elementor' ) }
-					/>
+					<ConditionalInfoTip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
+						<ToggleIconControl
+							disabled={ shouldDisableAddingLink }
+							active={ isActive }
+							onIconClick={ onEnabledChange }
+							label={ __( 'Toggle link', 'elementor' ) }
+						/>
+					</ConditionalInfoTip>
 				</Stack>
-				<Collapse in={ isEnabled } timeout="auto" unmountOnExit>
+				<Collapse in={ isActive } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
 						<PropKeyProvider bind={ 'destination' }>
 							<ControlActions>
@@ -167,7 +177,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl />
+							<SwitchControl disabled={ ! value } />
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>
@@ -177,34 +187,43 @@ export const LinkControl = createControl( ( props: Props ) => {
 } );
 
 type ToggleIconControlProps = {
-	enabled: boolean;
+	disabled: boolean;
+	active: boolean;
 	onIconClick: () => void;
 	label?: string;
 };
 
-const ToggleIconControl = ( { enabled, onIconClick, label }: ToggleIconControlProps ) => {
+const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIconControlProps ) => {
 	return (
-		<IconButton size={ SIZE } onClick={ onIconClick } aria-label={ label }>
-			{ enabled ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		<IconButton size={ SIZE } onClick={ onIconClick } aria-label={ label } disabled={ disabled }>
+			{ active ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
 		</IconButton>
 	);
 };
 
 // @TODO Should be refactored in ED-16323
-const SwitchControl = () => {
+const SwitchControl = ( { disabled }: { disabled: boolean } ) => {
 	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
 
 	const onClick = () => {
 		setValue( ! value );
 	};
 
+	const inputProps = disabled
+		? {
+				style: {
+					opacity: 0,
+				},
+		  }
+		: {};
+
 	return (
 		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
 			<Grid item>
 				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item>
-				<Switch checked={ value } onClick={ onClick } />
+				<Switch checked={ value } onClick={ onClick } disabled={ disabled } inputProps={ inputProps } />
 			</Grid>
 		</Grid>
 	);
@@ -248,3 +267,56 @@ function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null
 		  ]
 		: [];
 }
+
+interface ConditionalInfoTipType extends PropsWithChildren {
+	linkInLinkRestriction: LinkInLinkRestriction;
+	isVisible: boolean;
+}
+
+const ConditionalInfoTip: React.FC< ConditionalInfoTipType > = ( { linkInLinkRestriction, isVisible, children } ) => {
+	const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+
+	const handleTakeMeClick = () => {
+		if ( elementId ) {
+			selectElement( elementId );
+		}
+	};
+
+	return shouldRestrict && isVisible ? (
+		<Infotip
+			placement="right"
+			content={
+				<InfoTipCard
+					content={ INFOTIP_CONTENT[ reason ] }
+					svgIcon={ <AlertTriangleIcon /> }
+					learnMoreButton={ learnMoreButton }
+					ctaButton={ {
+						label: __( 'Take me there', 'elementor' ),
+						onClick: handleTakeMeClick,
+					} }
+				/>
+			}
+		>
+			<Box>{ children }</Box>
+		</Infotip>
+	) : (
+		<>{ children }</>
+	);
+};
+
+const INFOTIP_CONTENT = {
+	descendant: (
+		<>
+			{ __( 'To add a link to this container,', 'elementor' ) }
+			<br />
+			{ __( 'first remove the link from the elements inside of it.', 'elementor' ) }
+		</>
+	),
+	ancestor: (
+		<>
+			{ __( 'To add a link to this element,', 'elementor' ) }
+			<br />
+			{ __( 'first remove the link from its parent container.', 'elementor' ) }
+		</>
+	),
+};

package/src/controls/number-control.tsx

@@ -9,6 +9,8 @@ import { createControl } from '../create-control';
 const isEmptyOrNaN = ( value?: string | number | null ) =>
 	value === null || value === undefined || value === '' || Number.isNaN( Number( value ) );
 
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
+
 export const NumberControl = createControl(
 	( {
 		placeholder,
@@ -49,6 +51,11 @@ export const NumberControl = createControl(
 					onChange={ handleChange }
 					placeholder={ placeholder }
 					inputProps={ { step } }
+					onKeyDown={ ( event: KeyboardEvent ) => {
+						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+							event.preventDefault();
+						}
+					} }
 				/>
 			</ControlActions>
 		);

package/src/controls/size-control.tsx

@@ -25,7 +25,7 @@ type SizeControlProps = {
 
 export const SizeControl = createControl(
 	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
-		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+		const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp( sizePropTypeUtil );
 
 		const [ state, setState ] = useSyncExternalState( {
 			external: sizeValue,
@@ -50,21 +50,21 @@ export const SizeControl = createControl(
 			} ) );
 		};
 
-		const inputProps = {
-			size: state.size,
-			unit: state.unit,
-			placeholder,
-			startIcon,
-			units,
-			extendedValues,
-			handleSizeChange,
-			handleUnitChange,
-		};
+		const Input = extendedValues?.length ? ExtendedSizeInput : SizeInput;
 
-		if ( extendedValues?.length ) {
-			return <ExtendedSizeInput { ...inputProps } />;
-		}
-		return <SizeInput { ...inputProps } />;
+		return (
+			<Input
+				size={ state.size }
+				unit={ state.unit }
+				placeholder={ placeholder }
+				startIcon={ startIcon }
+				units={ units }
+				extendedValues={ extendedValues }
+				handleSizeChange={ handleSizeChange }
+				handleUnitChange={ handleUnitChange }
+				onBlur={ restoreValue }
+			/>
+		);
 	}
 );
 
@@ -99,16 +99,20 @@ type SizeInputProps = {
 	startIcon?: React.ReactNode;
 	units: Unit[];
 	extendedValues?: ExtendedValue[];
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	handleUnitChange: ( unit: Unit ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 };
 
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
+
 const SizeInput = ( {
 	units,
 	handleUnitChange,
 	handleSizeChange,
 	placeholder,
 	startIcon,
+	onBlur,
 	size,
 	unit,
 }: SizeInputProps ) => {
@@ -129,6 +133,12 @@ const SizeInput = ( {
 				type="number"
 				value={ Number.isNaN( size ) ? '' : size }
 				onChange={ handleSizeChange }
+				onBlur={ onBlur }
+				onKeyDown={ ( event ) => {
+					if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+						event.preventDefault();
+					}
+				} }
 			/>
 		</ControlActions>
 	);