@elementor/editor-controls 1.1.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.1.0",
+  "version": "1.2.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,11 +41,11 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.6",
-    "@elementor/editor-props": "0.14.0",
-    "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-ui": "0.12.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",
@@ -53,8 +53,8 @@
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.35.5",
-    "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.6.0",
+    "@elementor/utils": "0.5.0",
+    "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {

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

@@ -17,6 +17,7 @@ type FontFamilySelectorProps = {
 	fontFamily: string | null;
 	onFontFamilyChange: ( fontFamily: string ) => void;
 	onClose: () => void;
+	sectionWidth: number;
 };
 
 export const FontFamilySelector = ( {
@@ -24,6 +25,7 @@ export const FontFamilySelector = ( {
 	fontFamily,
 	onFontFamilyChange,
 	onClose,
+	sectionWidth,
 }: FontFamilySelectorProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 
@@ -45,22 +47,32 @@ export const FontFamilySelector = ( {
 				onClose={ handleClose }
 				icon={ <TextIcon fontSize={ SIZE } /> }
 			/>
+
 			<PopoverSearch
 				value={ searchValue }
 				onSearch={ handleSearch }
 				placeholder={ __( 'Search', 'elementor' ) }
 			/>
+
 			<Divider />
-			{ filteredFontFamilies.length > 0 ? (
-				<FontList
-					fontListItems={ filteredFontFamilies }
-					setFontFamily={ onFontFamilyChange }
-					handleClose={ handleClose }
-					fontFamily={ fontFamily }
-				/>
-			) : (
-				<PopoverScrollableContent>
-					<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">
@@ -82,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"
@@ -94,8 +111,8 @@ export const FontFamilySelector = ( {
 							</Link>
 						</Typography>
 					</Stack>
-				</PopoverScrollableContent>
-			) }
+				) }
+			</PopoverScrollableContent>
 		</Stack>
 	);
 };

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

@@ -50,6 +50,7 @@ type RepeaterProps< T > = {
 	};
 	showDuplicate?: boolean;
 	showToggle?: boolean;
+	isSortable?: boolean;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -64,6 +65,7 @@ export const Repeater = < T, >( {
 	setValues: setRepeaterValues,
 	showDuplicate = true,
 	showToggle = true,
+	isSortable = true,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -180,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 }

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 (

package/src/controls/filter-repeater-control.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import {
+	blurFilterPropTypeUtil,
+	brightnessFilterPropTypeUtil,
+	type FilterItemPropValue,
+	filterPropTypeUtil,
+	type PropKey,
+	type PropTypeUtil,
+	type SizePropValue,
+} from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Box, Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
+import { PopoverContent } from '../components/popover-content';
+import { PopoverGridContainer } from '../components/popover-grid-container';
+import { Repeater } from '../components/repeater';
+import { createControl } from '../create-control';
+import { defaultUnits } from '../utils/size-control';
+import { SizeControl } from './size-control';
+
+type FilterType = FilterItemPropValue[ '$$type' ];
+type FilterValue = FilterItemPropValue[ 'value' ];
+
+const DEFAULT_FILTER_KEY: FilterType = 'blur';
+
+type FilterItemConfig = {
+	defaultValue: FilterValue;
+	name: string;
+	valueName: string;
+	propType: PropTypeUtil< FilterValue, FilterValue >;
+	units?: Exclude< SizePropValue[ 'value' ][ 'unit' ], 'custom' | 'auto' >[];
+};
+
+const filterConfig: Record< FilterType, FilterItemConfig > = {
+	blur: {
+		defaultValue: { $$type: 'radius', radius: { $$type: 'size', value: { size: 0, unit: 'px' } } },
+		name: __( 'Blur', 'elementor' ),
+		valueName: __( 'Radius', 'elementor' ),
+		propType: blurFilterPropTypeUtil,
+		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
+	},
+	brightness: {
+		defaultValue: { $$type: 'amount', amount: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		name: __( 'Brightness', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: brightnessFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+};
+
+const filterKeys = Object.keys( filterConfig ) as FilterType[];
+
+const singleSizeFilterNames = filterKeys.filter( ( name ) => {
+	const filter = filterConfig[ name as FilterType ].defaultValue;
+
+	return filter[ filter.$$type ].$$type === 'size';
+} ) as FilterType[];
+
+export const FilterRepeaterControl = createControl( () => {
+	const { propType, value: filterValues, setValue, disabled } = useBoundProp( filterPropTypeUtil );
+
+	return (
+		<PropProvider propType={ propType } value={ filterValues } setValue={ setValue }>
+			<Repeater
+				openOnAdd
+				disabled={ disabled }
+				values={ filterValues ?? [] }
+				setValues={ setValue }
+				label={ __( 'Filter', 'elementor' ) }
+				itemSettings={ {
+					Icon: ItemIcon,
+					Label: ItemLabel,
+					Content: ItemContent,
+					initialValues: {
+						$$type: DEFAULT_FILTER_KEY,
+						value: filterConfig[ DEFAULT_FILTER_KEY ].defaultValue,
+					} as FilterItemPropValue,
+				} }
+			/>
+		</PropProvider>
+	);
+} );
+
+const ItemIcon = () => <></>;
+
+const ItemLabel = ( props: { value: FilterItemPropValue } ) => {
+	const { $$type } = props.value;
+
+	return singleSizeFilterNames.includes( $$type ) && <SingleSizeItemLabel value={ props.value } />;
+};
+
+const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	const { $$type, value: sizeValue } = value;
+	const { $$type: key } = filterConfig[ $$type ].defaultValue;
+	const defaultUnit = filterConfig[ $$type ].defaultValue[ key ].value.unit;
+	const { unit, size } = sizeValue[ key ]?.value ?? { unit: defaultUnit, size: 0 };
+
+	const label = (
+		<Box component="span" style={ { textTransform: 'capitalize' } }>
+			{ value.$$type }:
+		</Box>
+	);
+
+	return (
+		<Box component="span">
+			{ label }
+			{ unit !== 'custom' ? ` ${ size ?? 0 }${ unit ?? defaultUnit }` : size }
+		</Box>
+	);
+};
+
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	const { value: filterValues, setValue } = useBoundProp( filterPropTypeUtil );
+	const itemIndex = parseInt( bind, 10 );
+	const item = filterValues?.[ itemIndex ];
+
+	const handleChange = ( e: SelectChangeEvent< string > ) => {
+		const newFilterValues = [ ...filterValues ];
+		const filterType = e.target.value as FilterType;
+
+		newFilterValues[ itemIndex ] = {
+			$$type: filterType,
+			value: filterConfig[ filterType ].defaultValue,
+		} as FilterItemPropValue;
+
+		setValue( newFilterValues );
+	};
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<PopoverContent p={ 1.5 }>
+				<PopoverGridContainer>
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Filter', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<Select
+							sx={ { overflow: 'hidden' } }
+							size="tiny"
+							value={ item?.$$type ?? DEFAULT_FILTER_KEY }
+							onChange={ handleChange }
+							fullWidth
+						>
+							{ filterKeys.map( ( filterKey ) => (
+								<MenuListItem key={ filterKey } value={ filterKey }>
+									{ filterConfig[ filterKey ].name }
+								</MenuListItem>
+							) ) }
+						</Select>
+					</Grid>
+				</PopoverGridContainer>
+				<Content filterType={ item?.$$type } />
+			</PopoverContent>
+		</PropKeyProvider>
+	);
+};
+
+const Content = ( { filterType }: { filterType: FilterType } ) => {
+	return singleSizeFilterNames.includes( filterType ) && <SingleSizeItemContent filterType={ filterType } />;
+};
+
+const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) => {
+	const { propType, valueName, defaultValue, units } = filterConfig[ filterType ];
+	const { $$type } = defaultValue;
+	const context = useBoundProp( propType );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<PropProvider { ...context }>
+			<PropKeyProvider bind={ $$type }>
+				<PopoverGridContainer ref={ rowRef }>
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ valueName }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<SizeControl anchorRef={ rowRef } units={ units } />
+					</Grid>
+				</PopoverGridContainer>
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};

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

@@ -15,11 +15,12 @@ export type FontCategory = {
 
 type FontFamilyControlProps = {
 	fontFamilies: FontCategory[];
+	sectionWidth: number;
 };
 
 const SIZE = 'tiny';
 
-export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
+export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
 	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
@@ -39,7 +40,9 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 			<Popover
 				disablePortal
 				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				sx={ { my: 1.5 } }
 				{ ...bindPopover( popoverState ) }
 			>
 				<FontFamilySelector
@@ -47,6 +50,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 					fontFamily={ fontFamily }
 					onFontFamilyChange={ setFontFamily }
 					onClose={ popoverState.close }
+					sectionWidth={ sectionWidth }
 				/>
 			</Popover>
 		</>

package/src/controls/gap-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, 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';
@@ -19,7 +19,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
 
-	const stackRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const stackRef = useRef< HTMLDivElement >( null );
 
 	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
@@ -96,7 +96,7 @@ const Control = ( {
 }: {
 	bind: PropKey;
 	isLinked: boolean;
-	anchorRef: MutableRefObject< HTMLElement | undefined >;
+	anchorRef: RefObject< HTMLDivElement >;
 } ) => {
 	if ( isLinked ) {
 		return <SizeControl anchorRef={ anchorRef } />;

package/src/controls/image-control.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { imagePropTypeUtil } from '@elementor/editor-props';
-import { Grid, Stack } from '@elementor/ui';
+import { Stack } from '@elementor/ui';
 import { type MediaType } from '@elementor/wp-media';
-import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlFormLabel } from '../components/control-form-label';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
@@ -13,40 +11,29 @@ import { SelectControl } from './select-control';
 
 type ImageControlProps = {
 	sizes: { label: string; value: string }[];
-	resolutionLabel?: string;
 	showMode?: 'all' | 'media' | 'sizes';
 };
 
-export const ImageControl = createControl(
-	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ), showMode = 'all' }: ImageControlProps ) => {
-		const propContext = useBoundProp( imagePropTypeUtil );
+export const ImageControl = createControl( ( { sizes, showMode = 'all' }: ImageControlProps ) => {
+	const propContext = useBoundProp( imagePropTypeUtil );
 
-		const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-		const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
+	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+	const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
 
-		return (
-			<PropProvider { ...propContext }>
-				<Stack gap={ 1.5 }>
-					{ [ 'all', 'media' ].includes( showMode ) ? (
-						<PropKeyProvider bind={ 'src' }>
-							<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
-							<ImageMediaControl mediaTypes={ mediaTypes } />
-						</PropKeyProvider>
-					) : null }
-					{ [ 'all', 'sizes' ].includes( showMode ) ? (
-						<PropKeyProvider bind={ 'size' }>
-							<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
-								<Grid item xs={ 6 }>
-									<ControlFormLabel>{ resolutionLabel }</ControlFormLabel>
-								</Grid>
-								<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-									<SelectControl options={ sizes } />
-								</Grid>
-							</Grid>
-						</PropKeyProvider>
-					) : null }
-				</Stack>
-			</PropProvider>
-		);
-	}
-);
+	return (
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				{ [ 'all', 'media' ].includes( showMode ) ? (
+					<PropKeyProvider bind={ 'src' }>
+						<ImageMediaControl mediaTypes={ mediaTypes } />
+					</PropKeyProvider>
+				) : null }
+				{ [ 'all', 'sizes' ].includes( showMode ) ? (
+					<PropKeyProvider bind={ 'size' }>
+						<SelectControl options={ sizes } />
+					</PropKeyProvider>
+				) : null }
+			</Stack>
+		</PropProvider>
+	);
+} );