@elementor/editor-controls 3.32.0-84 → 3.32.0-87

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": "3.32.0-84",
+  "version": "3.32.0-87",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-84",
-    "@elementor/editor-elements": "3.32.0-84",
-    "@elementor/editor-props": "3.32.0-84",
-    "@elementor/editor-responsive": "3.32.0-84",
-    "@elementor/editor-ui": "3.32.0-84",
-    "@elementor/editor-v1-adapters": "3.32.0-84",
-    "@elementor/env": "3.32.0-84",
-    "@elementor/http-client": "3.32.0-84",
+    "@elementor/editor-current-user": "3.32.0-87",
+    "@elementor/editor-elements": "3.32.0-87",
+    "@elementor/editor-props": "3.32.0-87",
+    "@elementor/editor-responsive": "3.32.0-87",
+    "@elementor/editor-ui": "3.32.0-87",
+    "@elementor/editor-v1-adapters": "3.32.0-87",
+    "@elementor/env": "3.32.0-87",
+    "@elementor/http-client": "3.32.0-87",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-84",
-    "@elementor/query": "3.32.0-84",
-    "@elementor/session": "3.32.0-84",
+    "@elementor/locations": "3.32.0-87",
+    "@elementor/query": "3.32.0-87",
+    "@elementor/session": "3.32.0-87",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-84",
-    "@elementor/wp-media": "3.32.0-84",
+    "@elementor/utils": "3.32.0-87",
+    "@elementor/wp-media": "3.32.0-87",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/unstable-repeater/context/repeater-context.tsx

@@ -83,7 +83,7 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 	const popoverState = usePopupState( { variant: 'popover' } );
 
 	const addItem = ( ev: React.MouseEvent, config?: AddItem< T > ) => {
-		const item = config?.item ?? initial;
+		const item = config?.item ?? { ...initial };
 		const newIndex = config?.index ?? items.length;
 		const newItems = [ ...items ];
 

package/src/components/unstable-repeater/items/edit-item-popover.tsx

@@ -6,7 +6,6 @@ import { EMPTY_OPEN_ITEM, useRepeaterContext } from '../context/repeater-context
 
 export const EditItemPopover = ( { children }: { children: React.ReactNode } ) => {
 	const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items } = useRepeaterContext();
-	const popoverProps = bindPopover( popoverState );
 
 	if ( ! isOpen || ! rowRef ) {
 		return null;
@@ -15,8 +14,8 @@ export const EditItemPopover = ( { children }: { children: React.ReactNode } ) =
 	const bind = items[ openItemIndex ].item.$$type;
 
 	const onClose = () => {
-		popoverProps.onClose?.();
 		setRowRef( null );
+		popoverState.setAnchorEl( null );
 		setOpenItemIndex( EMPTY_OPEN_ITEM );
 	};
 
@@ -29,8 +28,7 @@ export const EditItemPopover = ( { children }: { children: React.ReactNode } ) =
 				},
 			} }
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
-			{ ...popoverProps }
-			anchorEl={ rowRef }
+			{ ...bindPopover( popoverState ) }
 			onClose={ onClose }
 		>
 			<PropKeyProvider bind={ String( openItemIndex ) }>

package/src/components/unstable-repeater/items/item.tsx

@@ -26,6 +26,15 @@ export const Item = < T extends RepeatablePropValue >( {
 		setOpenItemIndex( index );
 	};
 
+	const setRef = ( ref: HTMLDivElement | null ) => {
+		if ( ! ref || openItemIndex !== index || ref === popoverState.anchorEl ) {
+			return;
+		}
+
+		setRowRef( ref );
+		popoverState.setAnchorEl( ref );
+	};
+
 	return (
 		<>
 			<UnstableTag
@@ -38,7 +47,7 @@ export const Item = < T extends RepeatablePropValue >( {
 				}
 				showActionsOnHover
 				fullWidth
-				ref={ ( ref ) => ref && openItemIndex === index && setRowRef( ref ) }
+				ref={ setRef }
 				variant="outlined"
 				aria-label={ __( 'Open item', 'elementor' ) }
 				sx={ { minHeight: ( theme ) => theme.spacing( 4 ) } }

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

@@ -1,13 +1,18 @@
 import * as React 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 { boxShadowPropTypeUtil, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
+import { FormLabel, Grid, styled, type SxProps, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-import { Repeater } from '../components/repeater';
+import { Header, Item, ItemsContainer, TooltipAddItemAction, UnstableRepeater } from '../components/unstable-repeater';
+import { DisableItemAction } from '../components/unstable-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../components/unstable-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../components/unstable-repeater/actions/remove-item-action';
+import { useRepeaterContext } from '../components/unstable-repeater/context/repeater-context';
+import { EditItemPopover } from '../components/unstable-repeater/items/edit-item-popover';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SelectControl } from './select-control';
@@ -18,38 +23,37 @@ export const BoxShadowRepeaterControl = createControl( () => {
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ () => disabled }>
-			<Repeater
-				openOnAdd
-				disabled={ disabled }
-				values={ value ?? [] }
-				setValues={ setValue }
-				label={ __( 'Box shadow', 'elementor' ) }
-				itemSettings={ {
-					Icon: ItemIcon,
-					Label: ItemLabel,
-					Content: ItemContent,
-					initialValues: initialShadow,
-				} }
-			/>
+			<UnstableRepeater initial={ initialShadow } propTypeUtil={ boxShadowPropTypeUtil }>
+				<Header label={ __( 'Box shadow', 'elementor' ) }>
+					<TooltipAddItemAction newItemIndex={ 0 } disabled={ disabled } />
+				</Header>
+				<ItemsContainer itemTemplate={ <Item Icon={ ItemIcon } Label={ ItemLabel } /> }>
+					<DuplicateItemAction />
+					<DisableItemAction />
+					<RemoveItemAction />
+				</ItemsContainer>
+				<EditItemPopover>
+					<Content />
+				</EditItemPopover>
+			</UnstableRepeater>
 		</PropProvider>
 	);
 } );
 
+const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	height: '1rem',
+	width: '1rem',
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+} ) );
+
 const ItemIcon = ( { value }: { value: ShadowPropValue } ) => (
-	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color?.value } />
+	<StyledUnstableColorIndicator size="inherit" component="span" value={ value.value.color?.value } />
 );
 
-const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind: PropKey } ) => {
-	return (
-		<PropKeyProvider bind={ bind }>
-			<Content anchorEl={ anchorEl } />
-		</PropKeyProvider>
-	);
-};
-
-const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
+const Content = () => {
 	const context = useBoundProp( shadowPropTypeUtil );
 	const rowRef: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
+	const { rowRef: anchorEl } = useRepeaterContext();
 
 	return (
 		<PropProvider { ...context }>

package/src/controls/filter-control/configs.ts

@@ -0,0 +1,49 @@
+import { __ } from '@wordpress/i18n';
+
+export type FilterFunction =
+	| 'blur'
+	| 'brightness'
+	| 'contrast'
+	| 'hue-rotate'
+	| 'saturate'
+	| 'grayscale'
+	| 'invert'
+	| 'sepia'
+	| 'drop-shadow';
+
+export type FilterFunctionGroup = 'blur' | 'color-tone' | 'hue-rotate' | 'intensity' | 'drop-shadow';
+
+export type FilterGroup = {
+	[ filter in FilterFunction ]?: {
+		name: string;
+		valueName?: string;
+	};
+};
+
+export const FILTERS_BY_GROUP: Record< FilterFunctionGroup, FilterGroup > = {
+	blur: {
+		blur: {
+			name: __( 'Blur', 'elementor' ),
+			valueName: __( 'Radius', 'elementor' ),
+		},
+	},
+	intensity: {
+		brightness: { name: __( 'Brightness', 'elementor' ) },
+		contrast: { name: __( 'Contrast', 'elementor' ) },
+		saturate: { name: __( 'Saturate', 'elementor' ) },
+	},
+	'hue-rotate': {
+		'hue-rotate': {
+			name: __( 'Hue Rotate', 'elementor' ),
+			valueName: __( 'Angle', 'elementor' ),
+		},
+	},
+	'color-tone': {
+		grayscale: { name: __( 'Grayscale', 'elementor' ) },
+		invert: { name: __( 'Invert', 'elementor' ) },
+		sepia: { name: __( 'Sepia', 'elementor' ) },
+	},
+	'drop-shadow': {
+		'drop-shadow': { name: __( 'Drop shadow', 'elementor' ), valueName: __( 'Drop-shadow', 'elementor' ) },
+	},
+};

package/src/controls/filter-control/context/filter-config-context.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { cssFilterFunctionPropUtil, type PropType } from '@elementor/editor-props';
+
+import { useBoundProp } from '../../../bound-prop-context';
+import { type FilterFunction } from '../configs';
+import { buildFilterConfig, type FilterConfigEntry } from '../utils';
+
+type FilterConfigMap = Record< FilterFunction, FilterConfigEntry >;
+
+type FilterConfigContextValue = {
+	config: FilterConfigMap;
+	filterOptions: Array< { value: string; label: string } >;
+	getFilterFunctionConfig: ( filterFunction: FilterFunction ) => FilterConfigEntry;
+	getInitialValue: () => unknown;
+};
+
+const FilterConfigContext = createContext< FilterConfigContextValue | null >( null );
+
+export function FilterConfigProvider( { children }: React.PropsWithChildren ) {
+	const propContext = useBoundProp( cssFilterFunctionPropUtil ) as { propType: { item_prop_type: PropType } };
+
+	const contextValue = useMemo( () => {
+		const config = buildFilterConfig( propContext.propType.item_prop_type );
+		const filterOptions = Object.entries( config ).map( ( [ key, conf ] ) => ( {
+			value: key,
+			label: conf.name,
+		} ) );
+
+		return {
+			config,
+			filterOptions,
+			getFilterFunctionConfig: ( filterFunction: FilterFunction ) => config[ filterFunction ],
+			getInitialValue: () => config.blur.defaultValue,
+		};
+	}, [ propContext.propType ] );
+
+	return <FilterConfigContext.Provider value={ contextValue }>{ children }</FilterConfigContext.Provider>;
+}
+
+export function useFilterConfig(): FilterConfigContextValue {
+	const context = useContext( FilterConfigContext );
+
+	if ( ! context ) {
+		throw new Error( 'useFilterConfig must be used within FilterConfigProvider' );
+	}
+
+	return context;
+}

package/src/controls/filter-control/{drop-shadow-item-content.tsx → drop-shadow/drop-shadow-item-content.tsx}

@@ -4,12 +4,11 @@ import { dropShadowFilterPropTypeUtil } from '@elementor/editor-props';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
-import { ControlFormLabel } from '../../components/control-form-label';
-import { PopoverGridContainer } from '../../components/popover-grid-container';
-import { type LengthUnit } from '../../utils/size-control';
-import { ColorControl } from '../color-control';
-import { SizeControl } from '../size-control';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { ControlFormLabel } from '../../../components/control-form-label';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { ColorControl } from '../../color-control';
+import { SizeControl } from '../../size-control';
 
 const items = [
 	{
@@ -34,13 +33,7 @@ const items = [
 	},
 ];
 
-export const DropShadowItemContent = ( {
-	units,
-	anchorEl,
-}: {
-	units: LengthUnit[];
-	anchorEl?: HTMLElement | null;
-} ) => {
+export const DropShadowItemContent = ( { anchorEl }: { anchorEl?: HTMLElement | null } ) => {
 	const context = useBoundProp( dropShadowFilterPropTypeUtil );
 	const rowRefs = [ useRef< HTMLDivElement >( null ), useRef< HTMLDivElement >( null ) ];
 
@@ -56,7 +49,11 @@ export const DropShadowItemContent = ( {
 							{ item.bind === 'color' ? (
 								<ColorControl anchorEl={ anchorEl } />
 							) : (
-								<SizeControl anchorRef={ rowRefs[ item.rowIndex ] } units={ units } defaultUnit="px" />
+								<SizeControl
+									anchorRef={ rowRefs[ item.rowIndex ] }
+									enablePropTypeUnits
+									defaultUnit="px"
+								/>
 							) }
 						</Grid>
 					</PropKeyProvider>

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import {
+	type CreateOptions,
+	cssFilterFunctionPropUtil,
+	type FilterItemPropValue,
+	type PropKey,
+} from '@elementor/editor-props';
+import { Grid } from '@elementor/ui';
+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 { PopoverGridContainer } from '../../components/popover-grid-container';
+import { useRepeaterContext } from '../../components/unstable-repeater/context/repeater-context';
+import { SelectControl } from '../select-control';
+import { type FilterFunction } from './configs';
+import { useFilterConfig } from './context/filter-config-context';
+import { DropShadowItemContent } from './drop-shadow/drop-shadow-item-content';
+import { SingleSizeItemContent } from './single-size/single-size-item-content';
+
+type Value = FilterItemPropValue[ 'value' ];
+
+export const FilterContent = () => {
+	const propContext = useBoundProp( cssFilterFunctionPropUtil );
+	const { filterOptions, getFilterFunctionConfig } = useFilterConfig();
+
+	const handleValueChange = ( value: Value, _?: CreateOptions, meta?: { bind?: PropKey } ) => {
+		let newValue = structuredClone( value );
+		const funcConfig = getFilterFunctionConfig( newValue?.func.value as FilterFunction );
+
+		if ( meta?.bind === 'func' ) {
+			newValue = funcConfig.defaultValue.value as FilterItemPropValue[ 'value' ];
+		}
+
+		if ( ! newValue.args ) {
+			return;
+		}
+
+		propContext.setValue( newValue );
+	};
+
+	return (
+		<PropProvider { ...propContext } setValue={ handleValueChange }>
+			<PropKeyProvider bind="css-filter-func">
+				<PopoverContent p={ 1.5 }>
+					<PopoverGridContainer>
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ __( 'Filter', 'elementor' ) }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<PropKeyProvider bind="func">
+								<SelectControl options={ filterOptions } />
+							</PropKeyProvider>
+						</Grid>
+					</PopoverGridContainer>
+					<PropKeyProvider bind="args">
+						<FilterValueContent />
+					</PropKeyProvider>
+				</PopoverContent>
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const FilterValueContent = () => {
+	const { openItemIndex, items } = useRepeaterContext();
+	const currentItem = items[ openItemIndex ];
+
+	const filterFunc = ( currentItem.item.value as FilterItemPropValue[ 'value' ] ).func.value;
+	const isDropShadow = filterFunc === 'drop-shadow';
+
+	if ( isDropShadow ) {
+		return <DropShadowItemContent />;
+	}
+
+	return <SingleSizeItemContent filterFunc={ filterFunc as FilterFunction } />;
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type DropShadowFilterPropValue, type FilterItemPropValue } from '@elementor/editor-props';
+import { styled, UnstableColorIndicator } from '@elementor/ui';
+
+export const FilterIcon = ( { value }: { value: FilterItemPropValue } ) => {
+	if ( value.value.func.value !== 'drop-shadow' ) {
+		return null;
+	}
+
+	return (
+		<StyledUnstableColorIndicator
+			size="inherit"
+			component="span"
+			value={ ( value.value.args as DropShadowFilterPropValue ).value?.color.value }
+		/>
+	);
+};
+
+const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+} ) );

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { FilterItemPropValue } from '@elementor/editor-props';
+
+import { DropShadowItemLabel } from './drop-shadow/drop-shadow-item-label';
+import { SingleSizeItemLabel } from './single-size/single-size-item-label';
+
+export const FilterLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	if ( value.value.func.value === 'drop-shadow' ) {
+		return <DropShadowItemLabel value={ value } />;
+	}
+
+	return <SingleSizeItemLabel value={ value } />;
+};

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

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {
+	backdropFilterPropTypeUtil,
+	type FilterItemPropValue,
+	filterPropTypeUtil,
+	type PropTypeUtil,
+} from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { PropProvider, useBoundProp } from '../../bound-prop-context';
+import {
+	Header,
+	Item,
+	ItemsContainer,
+	TooltipAddItemAction,
+	UnstableRepeater,
+} from '../../components/unstable-repeater';
+import { DisableItemAction } from '../../components/unstable-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../../components/unstable-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../../components/unstable-repeater/actions/remove-item-action';
+import { EditItemPopover } from '../../components/unstable-repeater/items/edit-item-popover';
+import type { RepeatablePropValue } from '../../components/unstable-repeater/types';
+import { createControl } from '../../create-control';
+import { FilterConfigProvider, useFilterConfig } from './context/filter-config-context';
+import { FilterContent } from './filter-content';
+import { FilterIcon } from './filter-icon';
+import { FilterLabel } from './filter-label';
+
+type FilterPropName = {
+	filterPropName?: 'filter' | 'backdrop-filter';
+};
+
+type Config = {
+	propTypeUtil: PropTypeUtil< string, FilterItemPropValue[] >;
+	label: string;
+};
+
+const FILTER_CONFIG: Record< string, Config > = {
+	filter: {
+		propTypeUtil: filterPropTypeUtil,
+		label: __( 'Filters', 'elementor' ),
+	},
+	'backdrop-filter': {
+		propTypeUtil: backdropFilterPropTypeUtil,
+		label: __( 'Backdrop Filters', 'elementor' ),
+	},
+} as const;
+
+export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter' }: FilterPropName ) => {
+	const { propTypeUtil, label } = ensureFilterConfig( filterPropName );
+	const { propType, value: filterValues, setValue } = useBoundProp( propTypeUtil );
+
+	return (
+		<FilterConfigProvider>
+			<PropProvider propType={ propType } value={ filterValues } setValue={ setValue }>
+				<Repeater
+					propTypeUtil={ propTypeUtil as PropTypeUtil< string, RepeatablePropValue[] > }
+					label={ label }
+				/>
+			</PropProvider>
+		</FilterConfigProvider>
+	);
+} );
+
+type RepeaterProps = { propTypeUtil: PropTypeUtil< string, RepeatablePropValue[] >; label: string };
+
+const Repeater = ( { propTypeUtil, label }: RepeaterProps ) => {
+	const { getInitialValue } = useFilterConfig();
+
+	return (
+		<UnstableRepeater initial={ getInitialValue() as RepeatablePropValue } propTypeUtil={ propTypeUtil }>
+			<Header label={ label }>
+				<TooltipAddItemAction newItemIndex={ 0 } />
+			</Header>
+			<ItemsContainer itemTemplate={ <Item Label={ FilterLabel } Icon={ FilterIcon } /> }>
+				<DuplicateItemAction />
+				<DisableItemAction />
+				<RemoveItemAction />
+			</ItemsContainer>
+			<EditItemPopover>
+				<FilterContent />
+			</EditItemPopover>
+		</UnstableRepeater>
+	);
+};
+
+function ensureFilterConfig( name: string ): Config {
+	if ( name && name in FILTER_CONFIG ) {
+		return FILTER_CONFIG[ name ];
+	}
+
+	return FILTER_CONFIG.filter;
+}

package/src/controls/filter-control/single-size/single-size-item-content.tsx

@@ -0,0 +1,48 @@
+import { useRef } from 'react';
+import * as React from 'react';
+import {
+	blurFilterPropTypeUtil,
+	colorToneFilterPropTypeUtil,
+	type createPropUtils,
+	hueRotateFilterPropTypeUtil,
+	intensityFilterPropTypeUtil,
+} from '@elementor/editor-props';
+import { Grid } from '@elementor/ui';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { ControlFormLabel } from '../../../components/control-form-label';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { SizeControl } from '../../size-control';
+import { type FilterFunction } from '../configs';
+import { useFilterConfig } from '../context/filter-config-context';
+
+export const propTypeMap: Record< string, ReturnType< typeof createPropUtils > > = {
+	blur: blurFilterPropTypeUtil,
+	intensity: intensityFilterPropTypeUtil,
+	'hue-rotate': hueRotateFilterPropTypeUtil,
+	'color-tone': colorToneFilterPropTypeUtil,
+};
+
+export const SingleSizeItemContent = ( { filterFunc }: { filterFunc: FilterFunction } ) => {
+	const rowRef = useRef< HTMLDivElement >( null );
+	const { getFilterFunctionConfig } = useFilterConfig();
+	const { valueName, filterFunctionGroup } = getFilterFunctionConfig( filterFunc );
+	const context = useBoundProp( propTypeMap[ filterFunctionGroup as string ] );
+
+	return (
+		<PropProvider { ...context }>
+			<PropKeyProvider bind={ filterFunctionGroup }>
+				<PropKeyProvider bind={ 'size' }>
+					<PopoverGridContainer ref={ rowRef }>
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ valueName }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							<SizeControl anchorRef={ rowRef } enablePropTypeUnits />
+						</Grid>
+					</PopoverGridContainer>
+				</PropKeyProvider>
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};

package/src/controls/filter-control/single-size/single-size-item-label.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { FilterItemPropValue, SizePropValue } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+
+import { lengthUnits } from '../../../utils/size-control';
+import { type FilterFunction } from '../configs';
+import { useFilterConfig } from '../context/filter-config-context';
+
+export const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	const { func, args } = value.value;
+	const { getFilterFunctionConfig } = useFilterConfig();
+	const { defaultValue } = getFilterFunctionConfig( ( func.value ?? '' ) as FilterFunction );
+	const defaultUnit =
+		( defaultValue.value.args.value as { size: SizePropValue } )?.size?.value?.unit ?? lengthUnits[ 0 ];
+
+	const { unit, size } = ( args.value as { size: SizePropValue } ).size?.value ?? { unit: defaultUnit, size: 0 };
+
+	const label = (
+		<Box component="span" style={ { textTransform: 'capitalize' } }>
+			{ func.value ?? '' }:
+		</Box>
+	);
+
+	return (
+		<Box component="span">
+			{ label }
+			{ unit !== 'custom' ? ` ${ size ?? 0 }${ unit ?? defaultUnit }` : size }
+		</Box>
+	);
+};