@elementor/editor-controls 1.1.0 → 1.3.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.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "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-current-user": "0.6.0",
+    "@elementor/editor-elements": "0.9.0",
+    "@elementor/editor-props": "0.16.0",
+    "@elementor/editor-responsive": "0.13.6",
+    "@elementor/editor-ui": "0.14.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/icons": "1.46.0",
     "@elementor/locations": "0.8.0",
     "@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/ui": "1.36.0",
+    "@elementor/utils": "0.5.0",
+    "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {

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

@@ -15,7 +15,7 @@ type PropContext< T extends PropValue, P extends PropType > = {
 	value: T | null;
 	propType: P;
 	placeholder?: T;
-	disabled?: boolean;
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 };
 
 const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
@@ -30,7 +30,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	setValue,
 	propType,
 	placeholder,
-	disabled,
+	isDisabled,
 }: PropProviderProps< T, P > ) => {
 	return (
 		<PropContext.Provider
@@ -39,7 +39,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 				propType,
 				setValue: setValue as SetValue< PropValue >,
 				placeholder,
-				disabled,
+				isDisabled,
 			} }
 		>
 			{ children }

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

@@ -21,6 +21,7 @@ export type PropKeyContextValue< T, P > = {
 	propType: P;
 	placeholder?: T;
 	path: PropKey[];
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 

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

@@ -19,6 +19,7 @@ type UseBoundProp< TValue extends PropValue > = {
 	placeholder?: TValue;
 	path: PropKey[];
 	restoreValue: () => void;
+	isDisabled?: ( propType: PropType ) => boolean | undefined;
 	disabled?: boolean;
 };
 
@@ -38,9 +39,11 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 
 	const { isValid, validate, restoreValue } = useValidation( propKeyContext.propType );
 
+	const disabled = propKeyContext.isDisabled?.( propKeyContext.propType );
+
 	// allow using the hook without a propTypeUtil, with no modifications or validations.
 	if ( ! propTypeUtil ) {
-		return propKeyContext;
+		return { ...propKeyContext, disabled } as PropKeyContextValue< PropValue, PropType >;
 	}
 
 	function setValue( value: TValue | null, options: CreateOptions, meta: { bind?: PropKey } ) {
@@ -67,6 +70,7 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 		value: isValid ? value : null,
 		restoreValue,
 		placeholder,
+		disabled,
 	};
 }
 

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 { bindPopover, Paper, Popover, type PopupState, TextField } from '@elementor/ui';
+import { type RefObject } from 'react';
+import { bindPopover, 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;
@@ -16,6 +16,15 @@ export const TextFieldPopover = ( props: Props ) => {
 	return (
 		<Popover
 			disablePortal
+			slotProps={ {
+				paper: {
+					sx: {
+						borderRadius: 2,
+						width: anchorRef.current?.offsetWidth + 'px',
+						p: 1.5,
+					},
+				},
+			} }
 			{ ...bindPopover( popupState ) }
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
@@ -24,24 +33,16 @@ export const TextFieldPopover = ( props: Props ) => {
 				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,
 				} }
-			>
-				<TextField
-					value={ value }
-					onChange={ onChange }
-					size="tiny"
-					type="text"
-					fullWidth
-					inputProps={ {
-						autoFocus: true,
-					} }
-				/>
-			</Paper>
+			/>
 		</Popover>
 	);
 };

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

@@ -7,7 +7,7 @@ import {
 	colorPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
+import { Box, CardMedia, styled, Tab, TabPanel, Tabs, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
@@ -74,7 +74,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } disabled={ disabled }>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue } isDisabled={ () => disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -235,14 +235,7 @@ const ImageOverlayContent = () => {
 	return (
 		<PropProvider { ...propContext }>
 			<PropKeyProvider bind={ 'image' }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ImageControl
-							resolutionLabel={ __( 'Resolution', 'elementor' ) }
-							sizes={ backgroundResolutionOptions }
-						/>
-					</Grid>
-				</Grid>
+				<ImageControl sizes={ backgroundResolutionOptions } />
 			</PropKeyProvider>
 			<PropKeyProvider bind={ 'position' }>
 				<BackgroundImageOverlayPosition />

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';
@@ -17,7 +17,7 @@ export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue } disabled={ disabled }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ () => disabled }>
 			<Repeater
 				openOnAdd
 				disabled={ disabled }
@@ -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 ) {
@@ -154,7 +154,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					propType={ multiSizePropType }
 					value={ getMultiSizeValues() }
 					setValue={ setNestedProp }
-					disabled={ multiSizeDisabled }
+					isDisabled={ () => multiSizeDisabled }
 				>
 					<PopoverContent p={ 1.5 }>
 						<PopoverGridContainer ref={ rowRefs[ 1 ] }>
@@ -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>
+	);
+};