@elementor/editor-controls 1.0.0 → 1.2.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": "1.0.0",
+  "version": "1.2.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,27 +41,27 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.5",
-    "@elementor/editor-props": "0.13.0",
-    "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-ui": "0.11.0",
-    "@elementor/editor-v1-adapters": "0.12.0",
+    "@elementor/editor-elements": "0.8.7",
+    "@elementor/editor-props": "0.15.0",
+    "@elementor/editor-responsive": "0.13.6",
+    "@elementor/editor-ui": "0.13.0",
+    "@elementor/editor-v1-adapters": "0.12.1",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
     "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.5",
-    "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.6.0",
-    "@tanstack/react-virtual": "3.13.3",
+    "@elementor/ui": "1.35.5",
+    "@elementor/utils": "0.5.0",
+    "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/src/components/font-family-selector.tsx

@@ -1,21 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { SearchIcon, TextIcon } from '@elementor/icons';
-import {
-	Box,
-	Divider,
-	InputAdornment,
-	Link,
-	MenuList,
-	MenuSubheader,
-	Stack,
-	styled,
-	TextField,
-	Typography,
-} from '@elementor/ui';
+import { useEffect, useState } from 'react';
+import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from '@elementor/editor-ui';
+import { TextIcon } from '@elementor/icons';
+import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { enqueueFont } from '../controls/font-family-control/enqueue-font';
@@ -29,6 +17,7 @@ type FontFamilySelectorProps = {
 	fontFamily: string | null;
 	onFontFamilyChange: ( fontFamily: string ) => void;
 	onClose: () => void;
+	sectionWidth: number;
 };
 
 export const FontFamilySelector = ( {
@@ -36,13 +25,14 @@ export const FontFamilySelector = ( {
 	fontFamily,
 	onFontFamilyChange,
 	onClose,
+	sectionWidth,
 }: FontFamilySelectorProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 
 	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
 
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
 	};
 
 	const handleClose = () => {
@@ -58,35 +48,31 @@ export const FontFamilySelector = ( {
 				icon={ <TextIcon fontSize={ SIZE } /> }
 			/>
 
-			<Box px={ 1.5 } pb={ 1 }>
-				<TextField
-					// eslint-disable-next-line jsx-a11y/no-autofocus
-					autoFocus
-					fullWidth
-					size={ SIZE }
-					value={ searchValue }
-					placeholder={ __( 'Search', 'elementor' ) }
-					onChange={ handleSearch }
-					InputProps={ {
-						startAdornment: (
-							<InputAdornment position="start">
-								<SearchIcon fontSize={ SIZE } />
-							</InputAdornment>
-						),
-					} }
-				/>
-			</Box>
+			<PopoverSearch
+				value={ searchValue }
+				onSearch={ handleSearch }
+				placeholder={ __( 'Search', 'elementor' ) }
+			/>
+
 			<Divider />
-			{ filteredFontFamilies.length > 0 ? (
-				<FontList
-					fontListItems={ filteredFontFamilies }
-					setFontFamily={ onFontFamilyChange }
-					handleClose={ handleClose }
-					fontFamily={ fontFamily }
-				/>
-			) : (
-				<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-					<Stack alignItems="center" p={ 2.5 } gap={ 1.5 } overflow={ 'hidden' }>
+
+			<PopoverScrollableContent width={ sectionWidth }>
+				{ filteredFontFamilies.length > 0 ? (
+					<FontList
+						fontListItems={ filteredFontFamilies }
+						setFontFamily={ onFontFamilyChange }
+						handleClose={ handleClose }
+						fontFamily={ fontFamily }
+					/>
+				) : (
+					<Stack
+						alignItems="center"
+						justifyContent="center"
+						height="100%"
+						p={ 2.5 }
+						gap={ 1.5 }
+						overflow={ 'hidden' }
+					>
 						<TextIcon fontSize="large" />
 						<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
 							<Typography align="center" variant="subtitle2" color="text.secondary">
@@ -108,7 +94,12 @@ export const FontFamilySelector = ( {
 								<span>&rdquo;.</span>
 							</Typography>
 						</Box>
-						<Typography align="center" variant="caption" color="text.secondary">
+						<Typography
+							align="center"
+							variant="caption"
+							color="text.secondary"
+							sx={ { display: 'flex', flexDirection: 'column' } }
+						>
 							{ __( 'Try something else.', 'elementor' ) }
 							<Link
 								color="secondary"
@@ -120,8 +111,8 @@ export const FontFamilySelector = ( {
 							</Link>
 						</Typography>
 					</Stack>
-				</Box>
-			) }
+				) }
+			</PopoverScrollableContent>
 		</Stack>
 	);
 };
@@ -133,11 +124,7 @@ type FontListProps = {
 	fontFamily: string | null;
 };
 
-const LIST_ITEM_HEIGHT = 36;
-const LIST_ITEMS_BUFFER = 6;
-
 const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: FontListProps ) => {
-	const containerRef = useRef< HTMLDivElement >( null );
 	const selectedItem = fontListItems.find( ( item ) => item.value === fontFamily );
 
 	const debouncedVirtualizeChange = useDebounce( ( { getVirtualIndexes }: { getVirtualIndexes: () => number[] } ) => {
@@ -149,131 +136,20 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 		} );
 	}, 100 );
 
-	const virtualizer = useVirtualizer( {
-		count: fontListItems.length,
-		getScrollElement: () => containerRef.current,
-		estimateSize: () => LIST_ITEM_HEIGHT,
-		overscan: LIST_ITEMS_BUFFER,
-		onChange: debouncedVirtualizeChange,
-	} );
-
-	useEffect(
-		() => {
-			virtualizer.scrollToIndex( fontListItems.findIndex( ( item ) => item.value === fontFamily ) );
-		},
-		// eslint-disable-next-line react-compiler/react-compiler
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ fontFamily ]
-	);
-
 	return (
-		<Box
-			ref={ containerRef }
-			sx={ {
-				overflowY: 'auto',
-				height: 260,
-				width: 220,
-			} }
-		>
-			<StyledMenuList
-				role="listbox"
-				style={ {
-					height: `${ virtualizer.getTotalSize() }px`,
-				} }
-				data-testid="font-list"
-			>
-				{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
-					const item = fontListItems[ virtualRow.index ];
-					const isLast = virtualRow.index === fontListItems.length - 1;
-					// Ignore the first item, which is a category, and use the second item instead.
-					const isFirst = virtualRow.index === 1;
-					const isSelected = selectedItem?.value === item.value;
-
-					// If no item is selected, the first item should be focused.
-					const tabIndexFallback = ! selectedItem ? 0 : -1;
-
-					if ( item.type === 'category' ) {
-						return (
-							<MenuSubheader
-								key={ virtualRow.key }
-								style={ {
-									transform: `translateY(${ virtualRow.start }px)`,
-								} }
-							>
-								{ item.value }
-							</MenuSubheader>
-						);
-					}
-
-					return (
-						<li
-							key={ virtualRow.key }
-							role="option"
-							aria-selected={ isSelected }
-							onClick={ () => {
-								setFontFamily( item.value );
-								handleClose();
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.key === 'Enter' ) {
-									setFontFamily( item.value );
-									handleClose();
-								}
-
-								if ( event.key === 'ArrowDown' && isLast ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-
-								if ( event.key === 'ArrowUp' && isFirst ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-							} }
-							tabIndex={ isSelected ? 0 : tabIndexFallback }
-							style={ {
-								transform: `translateY(${ virtualRow.start }px)`,
-								fontFamily: item.value,
-							} }
-						>
-							{ item.value }
-						</li>
-					);
-				} ) }
-			</StyledMenuList>
-		</Box>
+		<PopoverMenuList
+			items={ fontListItems }
+			selectedValue={ selectedItem?.value }
+			onChange={ debouncedVirtualizeChange }
+			onSelect={ setFontFamily }
+			onClose={ handleClose }
+			itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+			data-testid="font-list"
+		/>
 	);
 };
 
-const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
-	'& > li': {
-		height: LIST_ITEM_HEIGHT,
-		position: 'absolute',
-		top: 0,
-		left: 0,
-		width: '100%',
-		display: 'flex',
-		alignItems: 'center',
-	},
-	'& > [role="option"]': {
-		...theme.typography.caption,
-		lineHeight: 'inherit',
-		padding: theme.spacing( 0.75, 2, 0.75, 4 ),
-		'&:hover, &:focus': {
-			backgroundColor: theme.palette.action.hover,
-		},
-		'&[aria-selected="true"]': {
-			backgroundColor: theme.palette.action.selected,
-		},
-		cursor: 'pointer',
-		textOverflow: 'ellipsis',
-	},
-	width: '100%',
-	position: 'relative',
-} ) );
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useDebounce = < TArgs extends any[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
+const useDebounce = < TArgs extends unknown[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
 	const [ debouncedFn ] = useState( () => debounce( fn, delay ) );
 
 	useEffect( () => () => debouncedFn.cancel(), [ debouncedFn ] );

package/src/components/popover-content.tsx

@@ -1,17 +1,9 @@
 import { type FC, type PropsWithChildren } from 'react';
 import * as React from 'react';
-import { Stack } from '@elementor/ui';
+import { Stack, type StackProps } from '@elementor/ui';
 
-type PopoverContentProps = PropsWithChildren< {
-	alignItems?: 'center';
-	gap?: number;
-	p?: 1.5 | 2 | 2.5;
-	pt?: 2.5;
-	pb?: 3;
-} >;
-
-export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, pt, pb, children } ) => (
-	<Stack alignItems={ alignItems } gap={ gap } p={ p } pt={ pt } pb={ pb }>
+export const PopoverContent: FC< PropsWithChildren< StackProps > > = ( { gap = 1.5, children, ...props } ) => (
+	<Stack { ...props } gap={ gap }>
 		{ children }
 	</Stack>
 );

package/src/components/repeater.tsx

@@ -48,6 +48,9 @@ type RepeaterProps< T > = {
 			value: T;
 		} >;
 	};
+	showDuplicate?: boolean;
+	showToggle?: boolean;
+	isSortable?: boolean;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -60,6 +63,9 @@ export const Repeater = < T, >( {
 	addToBottom = false,
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
+	showDuplicate = true,
+	showToggle = true,
+	isSortable = true,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -176,7 +182,7 @@ export const Repeater = < T, >( {
 						}
 
 						return (
-							<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ disabled }>
+							<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ ! isSortable }>
 								<RepeaterItem
 									disabled={ disabled }
 									propDisabled={ value?.disabled }
@@ -195,6 +201,8 @@ export const Repeater = < T, >( {
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 									openOnMount={ openOnAdd && openItem === key }
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
+									showDuplicate={ showDuplicate }
+									showToggle={ showToggle }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -219,6 +227,8 @@ type RepeaterItemProps = {
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
+	showDuplicate: boolean;
+	showToggle: boolean;
 	disabled?: boolean;
 };
 
@@ -232,6 +242,8 @@ const RepeaterItem = ( {
 	toggleDisableItem,
 	openOnMount,
 	onOpen,
+	showDuplicate,
+	showToggle,
 	disabled,
 }: RepeaterItemProps ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
@@ -255,16 +267,20 @@ const RepeaterItem = ( {
 				startIcon={ startIcon }
 				actions={
 					<>
-						<Tooltip title={ duplicateLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
-								<CopyIcon fontSize={ SIZE } />
-							</IconButton>
-						</Tooltip>
-						<Tooltip title={ toggleLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
-								{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-							</IconButton>
-						</Tooltip>
+						{ showDuplicate && (
+							<Tooltip title={ duplicateLabel } placement="top">
+								<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
+									<CopyIcon fontSize={ SIZE } />
+								</IconButton>
+							</Tooltip>
+						) }
+						{ showToggle && (
+							<Tooltip title={ toggleLabel } placement="top">
+								<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
+									{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+								</IconButton>
+							</Tooltip>
+						) }
 						<Tooltip title={ removeLabel } placement="top">
 							<IconButton size={ SIZE } onClick={ removeItem } aria-label={ removeLabel }>
 								<XIcon fontSize={ SIZE } />

package/src/components/text-field-popover.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { type MutableRefObject } from 'react';
+import { type RefObject } from 'react';
 import { bindPopover, Paper, Popover, type PopupState, TextField } from '@elementor/ui';
 
 type Props = {
 	popupState: PopupState;
-	anchorRef: MutableRefObject< HTMLElement >;
+	anchorRef: RefObject< HTMLDivElement | null >;
 	restoreValue: () => void;
 	value: string;
 	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
@@ -26,7 +26,7 @@ export const TextFieldPopover = ( props: Props ) => {
 		>
 			<Paper
 				sx={ {
-					width: anchorRef.current.offsetWidth + 'px',
+					width: anchorRef.current?.offsetWidth + 'px',
 					borderRadius: 2,
 					p: 1.5,
 				} }

package/src/controls/aspect-ratio-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from '@elementor/icons';
@@ -38,6 +38,24 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 		isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ''
 	);
 
+	useEffect( () => {
+		const isCustomValue =
+			aspectRatioValue && ! RATIO_OPTIONS.some( ( option ) => option.value === aspectRatioValue );
+
+		if ( isCustomValue ) {
+			const [ width, height ] = aspectRatioValue.split( '/' );
+			setCustomWidth( width || '' );
+			setCustomHeight( height || '' );
+			setSelectedValue( CUSTOM_RATIO );
+			setIsCustom( true );
+		} else {
+			setSelectedValue( aspectRatioValue || '' );
+			setIsCustom( false );
+			setCustomWidth( '' );
+			setCustomHeight( '' );
+		}
+	}, [ aspectRatioValue ] );
+
 	const handleSelectChange = ( event: SelectChangeEvent< string > ) => {
 		const newValue = event.target.value;
 		const isCustomRatio = newValue === CUSTOM_RATIO;
@@ -71,7 +89,7 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 
 	return (
 		<ControlActions>
-			<Stack direction="column" pt={ 2 } gap={ 2 }>
+			<Stack direction="column" gap={ 2 }>
 				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 					<Grid item xs={ 6 }>
 						<ControlLabel>{ label }</ControlLabel>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import { LetterXIcon, LetterYIcon } from '@elementor/icons';
@@ -41,7 +41,7 @@ export const BackgroundImageOverlayPosition = () => {
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
 	const isCustom = !! backgroundImageOffsetContext.value;
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
 		const value = event.target.value || null;

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import {
 	ArrowBarBothIcon,
@@ -55,7 +55,7 @@ export const BackgroundImageOverlaySize = () => {
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
 	const isCustom = !! backgroundImageScaleContext.value;
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	const handleSizeChange = ( size: Sizes | null ) => {
 		if ( size === 'custom' ) {

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

@@ -12,6 +12,7 @@ import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { ControlFormLabel } from '../../../components/control-form-label';
 import { PopoverContent } from '../../../components/popover-content';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
@@ -237,10 +238,14 @@ const ImageOverlayContent = () => {
 			<PropKeyProvider bind={ 'image' }>
 				<Grid container spacing={ 1 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<ImageControl
-							resolutionLabel={ __( 'Resolution', 'elementor' ) }
-							sizes={ backgroundResolutionOptions }
-						/>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<Grid item xs={ 6 }>
+								<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
+							</Grid>
+							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+								<ImageControl sizes={ backgroundResolutionOptions } />
+							</Grid>
+						</Grid>
 					</Grid>
 				</Grid>
 			</PropKeyProvider>

package/src/controls/box-shadow-repeater-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
 import { FormLabel, Grid, type SxProps, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -49,7 +49,7 @@ const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind:
 
 const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 	const context = useBoundProp( shadowPropTypeUtil );
-	const rowRef: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+	const rowRef: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
 	return (
 		<PropProvider { ...context }>

package/src/controls/equal-unequal-sizes-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, type ReactNode, useId, useRef } from 'react';
+import { type ReactNode, type RefObject, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
@@ -63,7 +63,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 
 	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
-	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+	const rowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
@@ -172,13 +172,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	);
 }
 
-const MultiSizeValueControl = ( {
-	item,
-	rowRef,
-}: {
-	item: Item;
-	rowRef: MutableRefObject< HTMLElement | undefined >;
-} ) => {
+const MultiSizeValueControl = ( { item, rowRef }: { item: Item; rowRef: RefObject< HTMLDivElement > } ) => {
 	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
 
 	return (