@elementor/editor-controls 0.36.0 → 1.0.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.36.0",
+  "version": "1.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,8 +41,9 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.4",
-    "@elementor/editor-props": "0.12.1",
+    "@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/env": "0.3.5",

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

@@ -22,7 +22,10 @@ type UseBoundProp< TValue extends PropValue > = {
 	disabled?: boolean;
 };
 
-export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;
+export function useBoundProp< T extends PropValue = PropValue, P extends PropType = PropType >(): PropKeyContextValue<
+	T,
+	P
+>;
 
 export function useBoundProp< TKey extends string, TValue extends PropValue >(
 	propTypeUtil: PropTypeUtil< TKey, TValue >

package/src/components/popover-grid-container.tsx

@@ -1,4 +1,4 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { forwardRef, type PropsWithChildren } from 'react';
 import * as React from 'react';
 import { Grid } from '@elementor/ui';
 
@@ -8,13 +8,10 @@ type PopoverGridContainerProps = PropsWithChildren< {
 	flexWrap?: React.ComponentProps< typeof Grid >[ 'flexWrap' ];
 } >;
 
-export const PopoverGridContainer: FC< PopoverGridContainerProps > = ( {
-	gap = 1.5,
-	alignItems = 'center',
-	flexWrap = 'nowrap',
-	children,
-} ) => (
-	<Grid container gap={ gap } alignItems={ alignItems } flexWrap={ flexWrap }>
-		{ children }
-	</Grid>
+export const PopoverGridContainer = forwardRef(
+	( { gap = 1.5, alignItems = 'center', flexWrap = 'nowrap', children }: PopoverGridContainerProps, ref ) => (
+		<Grid container gap={ gap } alignItems={ alignItems } flexWrap={ flexWrap } ref={ ref }>
+			{ children }
+		</Grid>
+	)
 );

package/src/components/size-control/size-input.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { PencilIcon } from '@elementor/icons';
+import { Box, InputAdornment, type PopupState } from '@elementor/ui';
+
+import ControlActions from '../../control-actions/control-actions';
+import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
+import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
+
+type SizeInputProps = {
+	unit: Unit | ExtendedOption;
+	size: number | string;
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units: ( Unit | ExtendedOption )[];
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onClick?: ( event: React.MouseEvent< HTMLInputElement > ) => void;
+	handleUnitChange: ( unit: Unit | ExtendedOption ) => void;
+	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	popupState: PopupState;
+	disabled?: boolean;
+};
+
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
+
+export const SizeInput = ( {
+	units,
+	handleUnitChange,
+	handleSizeChange,
+	placeholder,
+	startIcon,
+	onBlur,
+	onFocus,
+	onClick,
+	size,
+	unit,
+	popupState,
+	disabled,
+}: SizeInputProps ) => {
+	const unitInputBufferRef = useRef( '' );
+	const inputType = isUnitExtendedOption( unit ) ? 'text' : 'number';
+	const inputValue = ! isUnitExtendedOption( unit ) && Number.isNaN( size ) ? '' : size ?? '';
+
+	const handleKeyUp = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		const { key } = event;
+
+		if ( ! /^[a-zA-Z%]$/.test( key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const newChar = key.toLowerCase();
+		const updatedBuffer = ( unitInputBufferRef.current + newChar ).slice( -3 );
+		unitInputBufferRef.current = updatedBuffer;
+
+		const matchedUnit =
+			units.find( ( u ) => u.includes( updatedBuffer ) ) ||
+			units.find( ( u ) => u.startsWith( newChar ) ) ||
+			units.find( ( u ) => u.includes( newChar ) );
+
+		if ( matchedUnit ) {
+			handleUnitChange( matchedUnit );
+		}
+	};
+
+	const popupAttributes = {
+		'aria-controls': popupState.isOpen ? popupState.popupId : undefined,
+		'aria-haspopup': true,
+	};
+
+	const inputProps = {
+		...popupAttributes,
+		autoComplete: 'off',
+		onClick,
+		onFocus,
+		startAdornment: startIcon ? (
+			<InputAdornment position="start" disabled={ disabled }>
+				{ startIcon }
+			</InputAdornment>
+		) : undefined,
+		endAdornment: (
+			<SelectionEndAdornment
+				disabled={ disabled }
+				options={ units }
+				onClick={ handleUnitChange }
+				value={ unit }
+				alternativeOptionLabels={ {
+					custom: <PencilIcon fontSize="small" />,
+				} }
+				menuItemsAttributes={
+					units.includes( 'custom' )
+						? {
+								custom: popupAttributes,
+						  }
+						: undefined
+				}
+			/>
+		),
+	};
+
+	return (
+		<ControlActions>
+			<Box>
+				<TextFieldInnerSelection
+					disabled={ disabled }
+					placeholder={ placeholder }
+					type={ inputType }
+					value={ inputValue }
+					onChange={ handleSizeChange }
+					onKeyDown={ ( event ) => {
+						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+							event.preventDefault();
+						}
+					} }
+					onKeyUp={ handleKeyUp }
+					onBlur={ onBlur }
+					shouldBlockInput={ isUnitExtendedOption( unit ) }
+					inputProps={ inputProps }
+				/>
+			</Box>
+		</ControlActions>
+	);
+};

package/src/components/{text-field-inner-selection.tsx → size-control/text-field-inner-selection.tsx}

@@ -2,7 +2,16 @@ import * as React from 'react';
 import { forwardRef, useId } from 'react';
 import { type PropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, TextField, usePopupState } from '@elementor/ui';
+import {
+	bindMenu,
+	bindTrigger,
+	Button,
+	InputAdornment,
+	Menu,
+	TextField,
+	type TextFieldProps,
+	usePopupState,
+} from '@elementor/ui';
 
 type TextFieldInnerSelectionProps = {
 	placeholder?: string;
@@ -12,8 +21,10 @@ type TextFieldInnerSelectionProps = {
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
-	endAdornment: React.ReactNode;
-	startAdornment?: React.ReactNode;
+	shouldBlockInput?: boolean;
+	inputProps: TextFieldProps[ 'InputProps' ] & {
+		endAdornment: React.JSX.Element;
+	};
 	disabled?: boolean;
 };
 
@@ -27,8 +38,8 @@ export const TextFieldInnerSelection = forwardRef(
 			onBlur,
 			onKeyDown,
 			onKeyUp,
-			endAdornment,
-			startAdornment,
+			shouldBlockInput = false,
+			inputProps,
 			disabled,
 		}: TextFieldInnerSelectionProps,
 		ref
@@ -36,20 +47,18 @@ export const TextFieldInnerSelection = forwardRef(
 		return (
 			<TextField
 				ref={ ref }
+				sx={ { input: { cursor: shouldBlockInput ? 'default !important' : undefined } } }
 				size="tiny"
 				fullWidth
-				type={ type }
+				type={ shouldBlockInput ? undefined : type }
 				value={ value }
+				onChange={ shouldBlockInput ? undefined : onChange }
+				onKeyDown={ shouldBlockInput ? undefined : onKeyDown }
+				onKeyUp={ shouldBlockInput ? undefined : onKeyUp }
 				disabled={ disabled }
-				onChange={ onChange }
-				onKeyDown={ onKeyDown }
-				onKeyUp={ onKeyUp }
 				onBlur={ onBlur }
 				placeholder={ placeholder }
-				InputProps={ {
-					endAdornment,
-					startAdornment,
-				} }
+				InputProps={ inputProps }
 			/>
 		);
 	}
@@ -59,13 +68,17 @@ type SelectionEndAdornmentProps< T extends string > = {
 	options: T[];
 	onClick: ( value: T ) => void;
 	value: T;
+	alternativeOptionLabels?: { [ key in T ]?: React.ReactNode };
+	menuItemsAttributes?: { [ key in T ]?: Record< string, unknown > };
 	disabled?: boolean;
 };
 
 export const SelectionEndAdornment = < T extends string >( {
 	options,
+	alternativeOptionLabels = {} as Record< T, React.ReactNode >,
 	onClick,
 	value,
+	menuItemsAttributes = {},
 	disabled,
 }: SelectionEndAdornmentProps< T > ) => {
 	const popupState = usePopupState( {
@@ -87,13 +100,17 @@ export const SelectionEndAdornment = < T extends string >( {
 				sx={ { font: 'inherit', minWidth: 'initial', textTransform: 'uppercase' } }
 				{ ...bindTrigger( popupState ) }
 			>
-				{ value }
+				{ alternativeOptionLabels[ value ] ?? value }
 			</Button>
 
 			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
 				{ options.map( ( option, index ) => (
-					<MenuListItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
-						{ option.toUpperCase() }
+					<MenuListItem
+						key={ option }
+						onClick={ () => handleMenuItemClick( index ) }
+						{ ...menuItemsAttributes?.[ option ] }
+					>
+						{ alternativeOptionLabels[ option ] ?? option.toUpperCase() }
 					</MenuListItem>
 				) ) }
 			</Menu>

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type MutableRefObject } from 'react';
+import { bindPopover, Paper, Popover, type PopupState, TextField } from '@elementor/ui';
+
+type Props = {
+	popupState: PopupState;
+	anchorRef: MutableRefObject< HTMLElement >;
+	restoreValue: () => void;
+	value: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+};
+
+export const TextFieldPopover = ( props: Props ) => {
+	const { popupState, restoreValue, anchorRef, value, onChange } = props;
+
+	return (
+		<Popover
+			disablePortal
+			{ ...bindPopover( popupState ) }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
+			onClose={ () => {
+				restoreValue();
+				popupState.close();
+			} }
+		>
+			<Paper
+				sx={ {
+					width: anchorRef.current.offsetWidth + 'px',
+					borderRadius: 2,
+					p: 1.5,
+				} }
+			>
+				<TextField
+					value={ value }
+					onChange={ onChange }
+					size="tiny"
+					type="text"
+					fullWidth
+					inputProps={ {
+						autoFocus: true,
+					} }
+				/>
+			</Paper>
+		</Popover>
+	);
+};

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import { LetterXIcon, LetterYIcon } from '@elementor/icons';
@@ -40,6 +41,7 @@ export const BackgroundImageOverlayPosition = () => {
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
 	const isCustom = !! backgroundImageOffsetContext.value;
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
 
 	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
 		const value = event.target.value || null;
@@ -78,15 +80,21 @@ export const BackgroundImageOverlayPosition = () => {
 			{ isCustom ? (
 				<PropProvider { ...backgroundImageOffsetContext }>
 					<Grid item xs={ 12 }>
-						<Grid container spacing={ 1.5 }>
+						<Grid container spacing={ 1.5 } ref={ rowRef }>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'x' }>
-									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <LetterXIcon fontSize={ 'tiny' } /> }
+										anchorRef={ rowRef }
+									/>
 								</PropKeyProvider>
 							</Grid>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'y' }>
-									<SizeControl startIcon={ <LetterYIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <LetterYIcon fontSize={ 'tiny' } /> }
+										anchorRef={ rowRef }
+									/>
 								</PropKeyProvider>
 							</Grid>
 						</Grid>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import {
 	ArrowBarBothIcon,
@@ -54,6 +55,7 @@ export const BackgroundImageOverlaySize = () => {
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
 	const isCustom = !! backgroundImageScaleContext.value;
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
 
 	const handleSizeChange = ( size: Sizes | null ) => {
 		if ( size === 'custom' ) {
@@ -85,13 +87,14 @@ export const BackgroundImageOverlaySize = () => {
 			</Grid>
 			{ isCustom ? (
 				<PropProvider { ...backgroundImageScaleContext }>
-					<Grid item xs={ 12 }>
+					<Grid item xs={ 12 } ref={ rowRef }>
 						<PopoverGridContainer>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'width' }>
 									<SizeControl
 										startIcon={ <ArrowsMoveHorizontalIcon fontSize={ 'tiny' } /> }
-										extendedValues={ [ 'auto' ] }
+										extendedOptions={ [ 'auto' ] }
+										anchorRef={ rowRef }
 									/>
 								</PropKeyProvider>
 							</Grid>
@@ -99,7 +102,8 @@ export const BackgroundImageOverlaySize = () => {
 								<PropKeyProvider bind={ 'height' }>
 									<SizeControl
 										startIcon={ <ArrowsMoveVerticalIcon fontSize={ 'tiny' } /> }
-										extendedValues={ [ 'auto' ] }
+										extendedOptions={ [ 'auto' ] }
+										anchorRef={ rowRef }
 									/>
 								</PropKeyProvider>
 							</Grid>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, 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';
@@ -48,6 +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() ];
 
 	return (
 		<PropProvider { ...context }>
@@ -65,20 +67,20 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 						/>
 					</Control>
 				</PopoverGridContainer>
-				<PopoverGridContainer>
+				<PopoverGridContainer ref={ rowRef[ 0 ] }>
 					<Control bind="hOffset" label={ __( 'Horizontal', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 0 ] } />
 					</Control>
 					<Control bind="vOffset" label={ __( 'Vertical', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 0 ] } />
 					</Control>
 				</PopoverGridContainer>
-				<PopoverGridContainer>
+				<PopoverGridContainer ref={ rowRef[ 1 ] }>
 					<Control bind="blur" label={ __( 'Blur', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 1 ] } />
 					</Control>
 					<Control bind="spread" label={ __( 'Spread', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 1 ] } />
 					</Control>
 				</PopoverGridContainer>
 			</PopoverContent>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactNode, useId, useRef } from 'react';
+import { type MutableRefObject, type ReactNode, 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';
@@ -52,7 +52,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	multiSizePropTypeUtil,
 }: Props< TMultiPropType, TPropValue > ) {
 	const popupId = useId();
-	const controlRef = useRef< HTMLElement >( null );
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 
 	const {
@@ -64,6 +63,8 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 
 	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
+	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
 			return null;
@@ -104,7 +105,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 
 	return (
 		<>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRefs[ 0 ] }>
 				<Grid item xs={ 6 }>
 					{ ! isShowingGeneralIndicator ? (
 						<ControlFormLabel>{ label }</ControlFormLabel>
@@ -114,7 +115,10 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
-						<SizeControl placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined } />
+						<SizeControl
+							placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined }
+							anchorRef={ rowRefs[ 0 ] }
+						/>
 						<Tooltip title={ tooltipLabel } placement="top">
 							<ToggleButton
 								size={ 'tiny' }
@@ -143,7 +147,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
-					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
+					paper: { sx: { mt: 0.5, width: rowRefs[ 0 ].current?.getBoundingClientRect().width } },
 				} }
 			>
 				<PropProvider
@@ -152,14 +156,14 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					setValue={ setNestedProp }
 					disabled={ multiSizeDisabled }
 				>
-					<PopoverContent p={ 1.5 } pt={ 2.5 } pb={ 3 }>
-						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 0 ] } />
-							<MultiSizeValueControl item={ items[ 1 ] } />
+					<PopoverContent p={ 1.5 }>
+						<PopoverGridContainer ref={ rowRefs[ 1 ] }>
+							<MultiSizeValueControl item={ items[ 0 ] } rowRef={ rowRefs[ 1 ] } />
+							<MultiSizeValueControl item={ items[ 1 ] } rowRef={ rowRefs[ 1 ] } />
 						</PopoverGridContainer>
-						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 2 ] } />
-							<MultiSizeValueControl item={ items[ 3 ] } />
+						<PopoverGridContainer ref={ rowRefs[ 2 ] }>
+							<MultiSizeValueControl item={ items[ 2 ] } rowRef={ rowRefs[ 2 ] } />
+							<MultiSizeValueControl item={ items[ 3 ] } rowRef={ rowRefs[ 2 ] } />
 						</PopoverGridContainer>
 					</PopoverContent>
 				</PropProvider>
@@ -168,7 +172,13 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	);
 }
 
-const MultiSizeValueControl = ( { item }: { item: Item } ) => {
+const MultiSizeValueControl = ( {
+	item,
+	rowRef,
+}: {
+	item: Item;
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+} ) => {
 	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
 
 	return (
@@ -183,7 +193,7 @@ const MultiSizeValueControl = ( { item }: { item: Item } ) => {
 						) }
 					</Grid>
 					<Grid item xs={ 12 }>
-						<SizeControl startIcon={ item.icon } />
+						<SizeControl startIcon={ item.icon } anchorRef={ rowRef } />
 					</Grid>
 				</Grid>
 			</Grid>

package/src/controls/gap-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
@@ -18,6 +19,8 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
 
+	const stackRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
 	const isLinked = ! directionValue && ! sizeValue ? true : !! sizeValue;
@@ -64,13 +67,13 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 					</ToggleButton>
 				</Tooltip>
 			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ stackRef }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
 						<ControlFormLabel>{ __( 'Column', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'column' } isLinked={ isLinked } />
+						<Control bind={ 'column' } isLinked={ isLinked } anchorRef={ stackRef } />
 					</Grid>
 				</Grid>
 				<Grid container gap={ 0.75 } alignItems="center">
@@ -78,7 +81,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlFormLabel>{ __( 'Row', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'row' } isLinked={ isLinked } />
+						<Control bind={ 'row' } isLinked={ isLinked } anchorRef={ stackRef } />
 					</Grid>
 				</Grid>
 			</Stack>
@@ -86,14 +89,22 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	);
 } );
 
-const Control = ( { bind, isLinked }: { bind: PropKey; isLinked: boolean } ) => {
+const Control = ( {
+	bind,
+	isLinked,
+	anchorRef,
+}: {
+	bind: PropKey;
+	isLinked: boolean;
+	anchorRef: MutableRefObject< HTMLElement | undefined >;
+} ) => {
 	if ( isLinked ) {
-		return <SizeControl />;
+		return <SizeControl anchorRef={ anchorRef } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl />
+			<SizeControl anchorRef={ anchorRef } />
 		</PropKeyProvider>
 	);
 };