@elementor/editor-controls 0.35.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.35.0",
+  "version": "1.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,9 +41,10 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.4",
-    "@elementor/editor-props": "0.12.1",
-    "@elementor/editor-ui": "0.10.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",
     "@elementor/http-client": "0.3.0",

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormLabel } from '@elementor/ui';
+import { FormLabel, type FormLabelProps } from '@elementor/ui';
 
-export const ControlFormLabel = ( { children }: { children: React.ReactNode } ) => {
-	return <FormLabel size="tiny">{ children }</FormLabel>;
+export const ControlFormLabel = ( props: FormLabelProps ) => {
+	return <FormLabel size="tiny" { ...props } />;
 };

package/src/components/control-label.tsx

@@ -7,7 +7,7 @@ import { ControlFormLabel } from './control-form-label';
 
 export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
 	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
 			<ControlFormLabel>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>

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

@@ -1,11 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
-import { type FontCategory } from '@elementor/editor-controls';
-import { SearchIcon, TextIcon, XIcon } from '@elementor/icons';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { SearchIcon, TextIcon } from '@elementor/icons';
 import {
 	Box,
 	Divider,
-	IconButton,
 	InputAdornment,
 	Link,
 	MenuList,
@@ -20,6 +19,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { enqueueFont } from '../controls/font-family-control/enqueue-font';
+import { type FontCategory } from '../controls/font-family-control/font-family-control';
 import { type FontListItem, useFilteredFontFamilies } from '../hooks/use-filtered-font-families';
 
 const SIZE = 'tiny';
@@ -52,13 +52,11 @@ export const FontFamilySelector = ( {
 
 	return (
 		<Stack>
-			<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-				<TextIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-				<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
-				<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
-					<XIcon fontSize={ SIZE } />
-				</IconButton>
-			</Stack>
+			<PopoverHeader
+				title={ __( 'Font Family', 'elementor' ) }
+				onClose={ handleClose }
+				icon={ <TextIcon fontSize={ SIZE } /> }
+			/>
 
 			<Box px={ 1.5 } pb={ 1 }>
 				<TextField

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/repeater.tsx

@@ -143,8 +143,6 @@ export const Repeater = < T, >( {
 		} );
 	};
 
-	const ItemWrapper = disabled ? React.Fragment : SortableItem;
-
 	return (
 		<SectionContent>
 			<Stack
@@ -178,7 +176,7 @@ export const Repeater = < T, >( {
 						}
 
 						return (
-							<ItemWrapper id={ key } key={ `sortable-${ key }` }>
+							<SortableItem id={ key } key={ `sortable-${ key }` } disabled={ disabled }>
 								<RepeaterItem
 									disabled={ disabled }
 									propDisabled={ value?.disabled }
@@ -202,7 +200,7 @@ export const Repeater = < T, >( {
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
 									) }
 								</RepeaterItem>
-							</ItemWrapper>
+							</SortableItem>
 						);
 					} ) }
 				</SortableProvider>

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/sortable.tsx

@@ -23,12 +23,14 @@ export const SortableProvider = < T extends number >( props: UnstableSortablePro
 type SortableItemProps = {
 	id: UnstableSortableItemProps[ 'id' ];
 	children: React.ReactNode;
+	disabled?: boolean;
 };
 
-export const SortableItem = ( { id, children }: SortableItemProps ): React.ReactNode => {
+export const SortableItem = ( { id, children, disabled }: SortableItemProps ): React.ReactNode => {
 	return (
 		<UnstableSortableItem
 			id={ id }
+			disabled={ disabled }
 			render={ ( {
 				itemProps,
 				triggerProps,
@@ -39,7 +41,7 @@ export const SortableItem = ( { id, children }: SortableItemProps ): React.React
 			}: UnstableSortableItemRenderProps ) => {
 				return (
 					<StyledListItem { ...itemProps } style={ itemStyle }>
-						<SortableTrigger { ...triggerProps } style={ triggerStyle } />
+						{ ! disabled && <SortableTrigger { ...triggerProps } style={ triggerStyle } /> }
 						{ children }
 						{ showDropIndication && <StyledDivider style={ dropIndicationStyle } /> }
 					</StyledListItem>

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;
@@ -60,10 +62,11 @@ export const BackgroundImageOverlayPosition = () => {
 					</Grid>
 					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 						<Select
+							fullWidth
 							size="tiny"
-							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
 							onChange={ handlePositionChange }
-							fullWidth
+							disabled={ stringPropContext.disabled }
+							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
 						>
 							{ backgroundPositionOptions.map( ( { label, value } ) => (
 								<MenuListItem key={ value } value={ value ?? '' }>
@@ -77,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' ) {
@@ -74,23 +76,25 @@ export const BackgroundImageOverlaySize = () => {
 						<ControlToggleButtonGroup
 							exclusive
 							items={ sizeControlOptions }
+							onChange={ handleSizeChange }
+							disabled={ stringPropContext.disabled }
 							value={
 								( backgroundImageScaleContext.value ? 'custom' : stringPropContext.value ) as Sizes
 							}
-							onChange={ handleSizeChange }
 						/>
 					</Grid>
 				</PopoverGridContainer>
 			</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>
@@ -98,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/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -74,7 +74,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } disabled={ disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }

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';
@@ -16,7 +17,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } disabled={ disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -47,10 +48,11 @@ const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind:
 };
 
 const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
-	const { propType, value, setValue } = useBoundProp( shadowPropTypeUtil );
+	const context = useBoundProp( shadowPropTypeUtil );
+	const rowRef: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider { ...context }>
 			<PopoverContent p={ 1.5 }>
 				<PopoverGridContainer>
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
@@ -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>