@elementor/editor-controls 3.33.0-98 → 3.35.0-324

package/src/controls/background-control/background-control.tsx

@@ -7,28 +7,59 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-co
 import { ControlLabel } from '../../components/control-label';
 import { createControl } from '../../create-control';
 import { ColorControl } from '../color-control';
+import { SelectControl } from '../select-control';
 import { BackgroundOverlayRepeaterControl } from './background-overlay/background-overlay-repeater-control';
 
+const clipOptions = [
+	{ label: __( 'Full element', 'elementor' ), value: 'border-box' },
+	{ label: __( 'Padding edges', 'elementor' ), value: 'padding-box' },
+	{ label: __( 'Content edges', 'elementor' ), value: 'content-box' },
+	{ label: __( 'Text', 'elementor' ), value: 'text' },
+];
+
+const colorLabel = __( 'Color', 'elementor' );
+const clipLabel = __( 'Clipping', 'elementor' );
+
 export const BackgroundControl = createControl( () => {
 	const propContext = useBoundProp( backgroundPropTypeUtil );
 
-	const colorLabel = __( 'Color', 'elementor' );
-
 	return (
 		<PropProvider { ...propContext }>
 			<PropKeyProvider bind="background-overlay">
 				<BackgroundOverlayRepeaterControl />
 			</PropKeyProvider>
-			<PropKeyProvider bind="color">
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ colorLabel }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<ColorControl />
-					</Grid>
-				</Grid>
-			</PropKeyProvider>
+			<BackgroundColorField />
+			<BackgroundClipField />
 		</PropProvider>
 	);
 } );
+
+const BackgroundColorField = () => {
+	return (
+		<PropKeyProvider bind="color">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ colorLabel }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ColorControl />
+				</Grid>
+			</Grid>
+		</PropKeyProvider>
+	);
+};
+
+const BackgroundClipField = () => {
+	return (
+		<PropKeyProvider bind="clip">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ clipLabel }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SelectControl options={ clipOptions } />
+				</Grid>
+			</Grid>
+		</PropKeyProvider>
+	);
+};

package/src/controls/background-control/background-gradient-color-control.tsx

@@ -15,7 +15,6 @@ import {
 import { UnstableGradientBox } from '@elementor/ui';
 
 import { useBoundProp } from '../../bound-prop-context';
-import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
 
 export type ColorStop = TransformablePropValue<
@@ -74,13 +73,11 @@ export const BackgroundGradientColorControl = createControl( () => {
 	};
 
 	return (
-		<ControlActions>
-			<UnstableGradientBox
-				sx={ { width: 'auto', padding: 1.5 } }
-				value={ normalizeValue() }
-				onChange={ handleChange }
-			/>
-		</ControlActions>
+		<UnstableGradientBox
+			sx={ { width: 'auto', padding: 1.5 } }
+			value={ normalizeValue() }
+			onChange={ handleChange }
+		/>
 	);
 } );
 

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

@@ -9,6 +9,7 @@ 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 ControlActions from '../../../../control-actions/control-actions';
 import { SizeControl } from '../../../size-control';
 
 type Positions =
@@ -61,19 +62,23 @@ export const BackgroundImageOverlayPosition = () => {
 						<ControlFormLabel>{ __( 'Position', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
-						<Select
-							fullWidth
-							size="tiny"
-							onChange={ handlePositionChange }
-							disabled={ stringPropContext.disabled }
-							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
-						>
-							{ backgroundPositionOptions.map( ( { label, value } ) => (
-								<MenuListItem key={ value } value={ value ?? '' }>
-									{ label }
-								</MenuListItem>
-							) ) }
-						</Select>
+						<ControlActions>
+							<Select
+								fullWidth
+								size="tiny"
+								onChange={ handlePositionChange }
+								disabled={ stringPropContext.disabled }
+								value={
+									( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? ''
+								}
+							>
+								{ backgroundPositionOptions.map( ( { label, value } ) => (
+									<MenuListItem key={ value } value={ value ?? '' }>
+										{ label }
+									</MenuListItem>
+								) ) }
+							</Select>
+						</ControlActions>
 					</Grid>
 				</PopoverGridContainer>
 			</Grid>

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -11,15 +11,16 @@ import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { ControlRepeater, ItemsContainer, TooltipAddItemAction } from '../../../components/control-repeater';
+import { DisableItemAction } from '../../../components/control-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../../../components/control-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../../../components/control-repeater/actions/remove-item-action';
+import { useRepeaterContext } from '../../../components/control-repeater/context/repeater-context';
+import { EditItemPopover } from '../../../components/control-repeater/items/edit-item-popover';
+import { Item } from '../../../components/control-repeater/items/item';
+import { type CollectionPropUtil, type RepeatablePropValue } from '../../../components/control-repeater/types';
 import { PopoverContent } from '../../../components/popover-content';
-import { Header, 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 { Item } from '../../../components/unstable-repeater/items/item';
-import { type CollectionPropUtil, type RepeatablePropValue } from '../../../components/unstable-repeater/types';
+import { RepeaterHeader } from '../../../components/repeater/repeater-header';
 import { createControl } from '../../../create-control';
 import { env } from '../../../env';
 import { ColorControl } from '../../color-control';
@@ -81,22 +82,30 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 
 	return (
 		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
-			<UnstableRepeater
+			<ControlRepeater
 				initial={ getInitialBackgroundOverlay() as RepeatablePropValue }
 				propTypeUtil={ backgroundOverlayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
 			>
-				<Header label={ __( 'Overlay', 'elementor' ) }>
+				<RepeaterHeader label={ __( 'Overlay', 'elementor' ) }>
 					<TooltipAddItemAction newItemIndex={ 0 } />
-				</Header>
-				<ItemsContainer itemTemplate={ <Item Icon={ ItemIcon } Label={ ItemLabel } /> }>
-					<DuplicateItemAction />
-					<DisableItemAction />
-					<RemoveItemAction />
+				</RepeaterHeader>
+				<ItemsContainer>
+					<Item
+						Icon={ ItemIcon }
+						Label={ ItemLabel }
+						actions={
+							<>
+								<DuplicateItemAction />
+								<DisableItemAction />
+								<RemoveItemAction />
+							</>
+						}
+					/>
 				</ItemsContainer>
 				<EditItemPopover>
 					<ItemContent />
 				</EditItemPopover>
-			</UnstableRepeater>
+			</ControlRepeater>
 		</PropProvider>
 	);
 } );

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

@@ -5,37 +5,46 @@ import { FormLabel, Grid, styled, type SxProps, type Theme, UnstableColorIndicat
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../components/control-repeater';
+import { DisableItemAction } from '../components/control-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../components/control-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../components/control-repeater/actions/remove-item-action';
+import { useRepeaterContext } from '../components/control-repeater/context/repeater-context';
+import { EditItemPopover } from '../components/control-repeater/items/edit-item-popover';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
-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 { RepeaterHeader } from '../components/repeater/repeater-header';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SelectControl } from './select-control';
-import { SizeControl } from './size-control';
+import { CUSTOM_SIZE_LABEL, SizeControl } from './size-control';
 
 export const BoxShadowRepeaterControl = createControl( () => {
 	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ () => disabled }>
-			<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 />
+			<ControlRepeater initial={ initialShadow } propTypeUtil={ boxShadowPropTypeUtil }>
+				<RepeaterHeader label={ __( 'Box shadow', 'elementor' ) }>
+					<TooltipAddItemAction newItemIndex={ 0 } disabled={ disabled } ariaLabel={ 'Box shadow' } />
+				</RepeaterHeader>
+				<ItemsContainer>
+					<Item
+						Icon={ ItemIcon }
+						Label={ ItemLabel }
+						actions={
+							<>
+								<DuplicateItemAction />
+								<DisableItemAction />
+								<RemoveItemAction />
+							</>
+						}
+					/>
 				</ItemsContainer>
 				<EditItemPopover>
 					<Content />
 				</EditItemPopover>
-			</UnstableRepeater>
+			</ControlRepeater>
 		</PropProvider>
 	);
 } );
@@ -127,11 +136,19 @@ const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {
 	const positionLabel = position?.value || 'outset';
 
 	const sizes = [
-		hOffsetSize + hOffsetUnit,
-		vOffsetSize + vOffsetUnit,
-		blurSize + blurUnit,
-		spreadSize + spreadUnit,
-	].join( ' ' );
+		[ hOffsetSize, hOffsetUnit ],
+		[ vOffsetSize, vOffsetUnit ],
+		[ blurSize, blurUnit ],
+		[ spreadSize, spreadUnit ],
+	]
+		.map( ( [ size, unit ] ) => {
+			if ( unit !== 'custom' ) {
+				return size + unit;
+			}
+
+			return ! size ? CUSTOM_SIZE_LABEL : size;
+		} )
+		.join( ' ' );
 
 	return (
 		<span style={ { textTransform: 'capitalize' } }>

package/src/controls/color-control.tsx

@@ -9,10 +9,11 @@ import { createControl } from '../create-control';
 type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > & {
 	propTypeUtil?: PropTypeUtil< string, string >;
 	anchorEl?: HTMLElement | null;
+	id?: string;
 };
 
 export const ColorControl = createControl(
-	( { propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }: Props ) => {
+	( { propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, id, ...props }: Props ) => {
 		const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp( propTypeUtil );
 
 		const placeholder = props.placeholder ?? boundPropPlaceholder;
@@ -24,6 +25,7 @@ export const ColorControl = createControl(
 		return (
 			<ControlActions>
 				<UnstableColorField
+					id={ id }
 					size="tiny"
 					fullWidth
 					value={ value ?? '' }

package/src/controls/date-time-control.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import type { Dayjs } from 'dayjs';
+import * as dayjs from 'dayjs';
+import { isTransformable, type Props, stringPropTypeUtil } from '@elementor/editor-props';
+import { DateTimePropTypeUtil } from '@elementor/editor-props';
+import { Box, DatePicker, LocalizationProvider, TimePicker } from '@elementor/ui';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+const DATE_FORMAT = 'YYYY-MM-DD';
+const TIME_FORMAT = 'HH:mm';
+
+export const DateTimeControl = createControl( ( { inputDisabled }: { inputDisabled?: boolean } ) => {
+	const { value, setValue, ...propContext } = useBoundProp( DateTimePropTypeUtil );
+
+	const handleChange = ( newValue: Props, meta: { bind: 'date' | 'time' } ) => {
+		const field = meta.bind;
+		const fieldValue = newValue[ field as 'date' | 'time' ];
+
+		if ( isTransformable( fieldValue ) ) {
+			return setValue( { ...value, [ field ]: fieldValue } );
+		}
+
+		let formattedValue = '';
+
+		if ( fieldValue ) {
+			const dayjsValue = fieldValue as Dayjs;
+			formattedValue = field === 'date' ? dayjsValue.format( DATE_FORMAT ) : dayjsValue.format( TIME_FORMAT );
+		}
+
+		setValue( {
+			...value,
+			[ field ]: {
+				$$type: 'string',
+				value: formattedValue,
+			},
+		} );
+	};
+
+	const parseDateValue = ( dateStr?: string | null ): Dayjs | null => {
+		if ( ! dateStr ) {
+			return null;
+		}
+
+		const d = ( dayjs as unknown as { default: ( s?: string | number | Date ) => Dayjs } ).default( dateStr );
+
+		return d && typeof d.isValid === 'function' && d.isValid() ? d : null;
+	};
+
+	const parseTimeValue = ( timeStr?: string | null ): Dayjs | null => {
+		if ( ! timeStr ) {
+			return null;
+		}
+
+		const [ hours, minutes ] = timeStr.split( ':' );
+		const h = Number.parseInt( hours ?? '', 10 );
+		const m = Number.parseInt( minutes ?? '', 10 );
+
+		if ( Number.isNaN( h ) || Number.isNaN( m ) ) {
+			return null;
+		}
+
+		const base = ( dayjs as unknown as { default: () => Dayjs } ).default();
+		return base.hour( h ).minute( m ).second( 0 ).millisecond( 0 );
+	};
+
+	return (
+		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
+			<ControlActions>
+				<LocalizationProvider>
+					<Box display="flex" gap={ 1 } alignItems="center">
+						<PropKeyProvider bind="date">
+							<DatePicker
+								value={ parseDateValue( stringPropTypeUtil.extract( value?.date ) ) }
+								onChange={ ( v: Dayjs | null ) =>
+									handleChange( { date: v } as Props, { bind: 'date' } )
+								}
+								disabled={ inputDisabled }
+								slotProps={ {
+									textField: { size: 'tiny' },
+									openPickerButton: { size: 'tiny' },
+									openPickerIcon: { fontSize: 'tiny' },
+								} }
+							/>
+						</PropKeyProvider>
+
+						<PropKeyProvider bind="time">
+							<TimePicker
+								value={ parseTimeValue( stringPropTypeUtil.extract( value?.time ) ) }
+								onChange={ ( v: Dayjs | null ) =>
+									handleChange( { time: v } as Props, { bind: 'time' } )
+								}
+								disabled={ inputDisabled }
+								slotProps={ {
+									textField: { size: 'tiny' },
+									openPickerButton: { size: 'tiny' },
+									openPickerIcon: { fontSize: 'tiny' },
+								} }
+							/>
+						</PropKeyProvider>
+					</Box>
+				</LocalizationProvider>
+			</ControlActions>
+		</PropProvider>
+	);
+} );

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

@@ -53,6 +53,7 @@ export const DropShadowItemContent = ( { anchorEl }: { anchorEl?: HTMLElement |
 									anchorRef={ rowRefs[ item.rowIndex ] }
 									enablePropTypeUnits
 									defaultUnit="px"
+									isRepeaterControl
 								/>
 							) }
 						</Grid>

package/src/controls/filter-control/drop-shadow/drop-shadow-item-label.tsx

@@ -2,19 +2,23 @@ import * as React from 'react';
 import { type DropShadowFilterPropValue, type FilterItemPropValue } from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
-export const DropShadowItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
-	const { xAxis, yAxis, blur } = value.value.args.value as DropShadowFilterPropValue[ 'value' ];
+import { CUSTOM_SIZE_LABEL } from '../../size-control';
 
-	const xValue = `${ xAxis?.value?.size ?? 0 }${ xAxis?.value?.unit ?? 'px' }`;
-	const yValue = `${ yAxis?.value?.size ?? 0 }${ yAxis?.value?.unit ?? 'px' }`;
-	const blurValue = `${ blur?.value?.size ?? 10 }${ blur?.value?.unit ?? 'px' }`;
+export const DropShadowItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	const values = value.value.args.value as DropShadowFilterPropValue[ 'value' ];
+	const keys = [ 'xAxis', 'yAxis', 'blur' ] as Array< keyof typeof values >;
+	const labels: string[] = keys.map( ( key ) =>
+		values[ key ]?.value?.unit !== 'custom'
+			? `${ values[ key ]?.value?.size ?? 0 }${ values[ key ]?.value?.unit ?? 'px' }`
+			: values[ key ]?.value?.size || CUSTOM_SIZE_LABEL
+	);
 
 	return (
 		<Box component="span">
 			<Box component="span" style={ { textTransform: 'capitalize' } }>
 				Drop shadow:
 			</Box>
-			{ `${ xValue } ${ yValue } ${ blurValue }` }
+			{ ` ${ labels.join( ' ' ) }` }
 		</Box>
 	);
 };

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

@@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
 import { ControlFormLabel } from '../../components/control-form-label';
+import { useRepeaterContext } from '../../components/control-repeater/context/repeater-context';
 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';

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

@@ -8,18 +8,13 @@ import {
 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 { ControlRepeater, Item, ItemsContainer, TooltipAddItemAction } from '../../components/control-repeater';
+import { DisableItemAction } from '../../components/control-repeater/actions/disable-item-action';
+import { DuplicateItemAction } from '../../components/control-repeater/actions/duplicate-item-action';
+import { RemoveItemAction } from '../../components/control-repeater/actions/remove-item-action';
+import { EditItemPopover } from '../../components/control-repeater/items/edit-item-popover';
+import type { RepeatablePropValue } from '../../components/control-repeater/types';
+import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { createControl } from '../../create-control';
 import { FilterConfigProvider, useFilterConfig } from './context/filter-config-context';
 import { FilterContent } from './filter-content';
@@ -42,7 +37,7 @@ const FILTER_CONFIG: Record< string, Config > = {
 	},
 	'backdrop-filter': {
 		propTypeUtil: backdropFilterPropTypeUtil,
-		label: __( 'Backdrop Filters', 'elementor' ),
+		label: __( 'Backdrop filters', 'elementor' ),
 	},
 } as const;
 
@@ -73,22 +68,30 @@ const Repeater = ( { propTypeUtil, label, filterPropName }: RepeaterProps ) => {
 	const { getInitialValue } = useFilterConfig();
 
 	return (
-		<UnstableRepeater initial={ getInitialValue() as RepeatablePropValue } propTypeUtil={ propTypeUtil }>
-			<Header label={ label }>
+		<ControlRepeater initial={ getInitialValue() as RepeatablePropValue } propTypeUtil={ propTypeUtil }>
+			<RepeaterHeader label={ label }>
 				<TooltipAddItemAction
 					newItemIndex={ 0 }
 					ariaLabel={ filterPropName === 'backdrop-filter' ? 'backdrop filter' : 'filter' }
 				/>
-			</Header>
-			<ItemsContainer itemTemplate={ <Item Label={ FilterLabel } Icon={ FilterIcon } /> }>
-				<DuplicateItemAction />
-				<DisableItemAction />
-				<RemoveItemAction />
+			</RepeaterHeader>
+			<ItemsContainer>
+				<Item
+					Label={ FilterLabel }
+					Icon={ FilterIcon }
+					actions={
+						<>
+							<DuplicateItemAction />
+							<DisableItemAction />
+							<RemoveItemAction />
+						</>
+					}
+				/>
 			</ItemsContainer>
 			<EditItemPopover>
 				<FilterContent />
 			</EditItemPopover>
-		</UnstableRepeater>
+		</ControlRepeater>
 	);
 };
 

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

@@ -38,7 +38,7 @@ export const SingleSizeItemContent = ( { filterFunc }: { filterFunc: FilterFunct
 							<ControlFormLabel>{ valueName }</ControlFormLabel>
 						</Grid>
 						<Grid item xs={ 6 }>
-							<SizeControl anchorRef={ rowRef } enablePropTypeUnits />
+							<SizeControl anchorRef={ rowRef } enablePropTypeUnits isRepeaterControl />
 						</Grid>
 					</PopoverGridContainer>
 				</PropKeyProvider>

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

@@ -3,6 +3,7 @@ import type { FilterItemPropValue, SizePropValue } from '@elementor/editor-props
 import { Box } from '@elementor/ui';
 
 import { lengthUnits } from '../../../utils/size-control';
+import { CUSTOM_SIZE_LABEL } from '../../size-control';
 import { type FilterFunction } from '../configs';
 import { useFilterConfig } from '../context/filter-config-context';
 
@@ -24,7 +25,7 @@ export const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } )
 	return (
 		<Box component="span">
 			{ label }
-			{ unit !== 'custom' ? ` ${ size ?? 0 }${ unit ?? defaultUnit }` : size }
+			{ ' ' + ( unit !== 'custom' ? `${ size ?? 0 }${ unit ?? defaultUnit }` : size || CUSTOM_SIZE_LABEL ) }
 		</Box>
 	);
 };