@elementor/editor-controls 1.3.0 → 1.5.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.3.0",
+  "version": "1.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,11 +40,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "0.6.0",
-    "@elementor/editor-elements": "0.9.0",
-    "@elementor/editor-props": "0.16.0",
+    "@elementor/editor-current-user": "0.6.1",
+    "@elementor/editor-elements": "0.9.2",
+    "@elementor/editor-props": "0.18.0",
     "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-ui": "0.14.0",
+    "@elementor/editor-ui": "0.14.2",
     "@elementor/editor-v1-adapters": "0.12.1",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from '@elementor/editor-ui';
+import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
 import { TextIcon } from '@elementor/icons';
 import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
@@ -41,7 +41,7 @@ export const FontFamilySelector = ( {
 	};
 
 	return (
-		<Stack>
+		<PopoverBody width={ sectionWidth }>
 			<PopoverHeader
 				title={ __( 'Font Family', 'elementor' ) }
 				onClose={ handleClose }
@@ -56,64 +56,62 @@ export const FontFamilySelector = ( {
 
 			<Divider />
 
-			<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">
-								{ __( 'Sorry, nothing matched', 'elementor' ) }
-							</Typography>
-							<Typography
-								variant="subtitle2"
-								color="text.secondary"
-								sx={ {
-									display: 'flex',
-									width: '100%',
-									justifyContent: 'center',
-								} }
-							>
-								<span>&ldquo;</span>
-								<span style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }>
-									{ searchValue }
-								</span>
-								<span>&rdquo;.</span>
-							</Typography>
-						</Box>
+			{ 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">
+							{ __( 'Sorry, nothing matched', 'elementor' ) }
+						</Typography>
 						<Typography
-							align="center"
-							variant="caption"
+							variant="subtitle2"
 							color="text.secondary"
-							sx={ { display: 'flex', flexDirection: 'column' } }
+							sx={ {
+								display: 'flex',
+								width: '100%',
+								justifyContent: 'center',
+							} }
 						>
-							{ __( 'Try something else.', 'elementor' ) }
-							<Link
-								color="secondary"
-								variant="caption"
-								component="button"
-								onClick={ () => setSearchValue( '' ) }
-							>
-								{ __( 'Clear & try again', 'elementor' ) }
-							</Link>
+							<span>&ldquo;</span>
+							<span style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }>
+								{ searchValue }
+							</span>
+							<span>&rdquo;.</span>
 						</Typography>
-					</Stack>
-				) }
-			</PopoverScrollableContent>
-		</Stack>
+					</Box>
+					<Typography
+						align="center"
+						variant="caption"
+						color="text.secondary"
+						sx={ { display: 'flex', flexDirection: 'column' } }
+					>
+						{ __( 'Try something else.', 'elementor' ) }
+						<Link
+							color="secondary"
+							variant="caption"
+							component="button"
+							onClick={ () => setSearchValue( '' ) }
+						>
+							{ __( 'Clear & try again', 'elementor' ) }
+						</Link>
+					</Typography>
+				</Stack>
+			) }
+		</PopoverBody>
 	);
 };
 

package/src/components/repeater.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { type PropKey } from '@elementor/editor-props';
+import { type PropKey, type PropTypeUtil } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -30,6 +30,16 @@ type AnchorEl = HTMLElement | null;
 type Item< T > = {
 	disabled?: boolean;
 } & T;
+export type CollectionPropUtil< T > = PropTypeUtil< PropKey, T[] >;
+
+type RepeaterItemContentProps< T > = {
+	anchorEl: AnchorEl;
+	bind: PropKey;
+	value: T;
+	collectionPropUtil?: CollectionPropUtil< T >;
+};
+
+type RepeaterItemContent< T > = React.ComponentType< RepeaterItemContentProps< T > >;
 
 type RepeaterProps< T > = {
 	label: string;
@@ -42,15 +52,12 @@ type RepeaterProps< T > = {
 		initialValues: T;
 		Label: React.ComponentType< { value: T } >;
 		Icon: React.ComponentType< { value: T } >;
-		Content: React.ComponentType< {
-			anchorEl: AnchorEl;
-			bind: PropKey;
-			value: T;
-		} >;
+		Content: RepeaterItemContent< T >;
 	};
 	showDuplicate?: boolean;
 	showToggle?: boolean;
 	isSortable?: boolean;
+	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -66,6 +73,7 @@ export const Repeater = < T, >( {
 	showDuplicate = true,
 	showToggle = true,
 	isSortable = true,
+	collectionPropUtil,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -203,6 +211,7 @@ export const Repeater = < T, >( {
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
 									showDuplicate={ showDuplicate }
 									showToggle={ showToggle }
+									collectionPropUtil={ collectionPropUtil }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -217,22 +226,23 @@ export const Repeater = < T, >( {
 	);
 };
 
-type RepeaterItemProps = {
+type RepeaterItemProps< T > = {
 	label: React.ReactNode;
 	propDisabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
 	duplicateItem: () => void;
 	toggleDisableItem: () => void;
-	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
+	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' | 'collectionPropUtil' > ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
 	showDuplicate: boolean;
 	showToggle: boolean;
 	disabled?: boolean;
+	collectionPropUtil?: CollectionPropUtil< T >;
 };
 
-const RepeaterItem = ( {
+const RepeaterItem = < T, >( {
 	label,
 	propDisabled,
 	startIcon,
@@ -245,7 +255,8 @@ const RepeaterItem = ( {
 	showDuplicate,
 	showToggle,
 	disabled,
-}: RepeaterItemProps ) => {
+	collectionPropUtil,
+}: RepeaterItemProps< T > ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
 	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
 
@@ -301,7 +312,7 @@ const RepeaterItem = ( {
 				{ ...popoverProps }
 				anchorEl={ ref }
 			>
-				<Box>{ children( { anchorEl } ) }</Box>
+				<Box>{ children( { anchorEl, collectionPropUtil } ) }</Box>
 			</Popover>
 		</>
 	);

package/src/components/size-control/size-input.tsx

@@ -4,19 +4,19 @@ import { PencilIcon } from '@elementor/icons';
 import { Box, InputAdornment, type PopupState } from '@elementor/ui';
 
 import ControlActions from '../../control-actions/control-actions';
-import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
+import { type DegreeUnit, type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
 
 type SizeInputProps = {
-	unit: Unit | ExtendedOption;
+	unit: Unit | DegreeUnit | ExtendedOption;
 	size: number | string;
 	placeholder?: string;
 	startIcon?: React.ReactNode;
-	units: ( Unit | ExtendedOption )[];
+	units: ( Unit | DegreeUnit | ExtendedOption )[];
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onClick?: ( event: React.MouseEvent< HTMLInputElement > ) => void;
-	handleUnitChange: ( unit: Unit | ExtendedOption ) => void;
+	handleUnitChange: ( unit: Unit | DegreeUnit | ExtendedOption ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 	popupState: PopupState;
 	disabled?: boolean;

package/src/controls/color-control.tsx

@@ -13,7 +13,9 @@ type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > &
 
 export const ColorControl = createControl(
 	( { propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }: Props ) => {
-		const { value, setValue, disabled } = useBoundProp( propTypeUtil );
+		const { value, setValue, placeholder: boundPropPlaceholder, disabled } = useBoundProp( propTypeUtil );
+
+		const placeholder = props.placeholder ?? boundPropPlaceholder;
 
 		const handleChange = ( selectedColor: string ) => {
 			setValue( selectedColor || null );
@@ -25,6 +27,7 @@ export const ColorControl = createControl(
 					size="tiny"
 					fullWidth
 					value={ value ?? '' }
+					placeholder={ placeholder ?? '' }
 					onChange={ handleChange }
 					{ ...props }
 					disabled={ disabled }
@@ -40,6 +43,14 @@ export const ColorControl = createControl(
 								vertical: 'top',
 								horizontal: -10,
 							},
+							slotProps: {
+								colorIndicator: {
+									value: value ?? placeholder ?? '',
+								},
+								colorBox: {
+									value: value ?? placeholder ?? '',
+								},
+							},
 						},
 					} }
 				/>

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { type DropShadowFilterPropValue, type PropTypeUtil } 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 Unit } from '../../utils/size-control';
+import { ColorControl } from '../color-control';
+import { SizeControl } from '../size-control';
+
+const items = [
+	{
+		bind: 'xAxis',
+		label: __( 'X-axis', 'elementor' ),
+		rowIndex: 0,
+	},
+	{
+		bind: 'yAxis',
+		label: __( 'Y-axis', 'elementor' ),
+		rowIndex: 0,
+	},
+	{
+		bind: 'blur',
+		label: __( 'Blur', 'elementor' ),
+		rowIndex: 1,
+	},
+	{
+		bind: 'color',
+		label: __( 'Color', 'elementor' ),
+		rowIndex: 1,
+	},
+];
+
+export const DropShadowItemContent = ( {
+	propType,
+	units,
+	anchorEl,
+}: {
+	propType: PropTypeUtil< 'drop-shadow', DropShadowFilterPropValue[ 'value' ] >;
+	units: Unit[];
+	anchorEl?: HTMLElement | null;
+} ) => {
+	const context = useBoundProp( propType );
+	const rowRefs = [ useRef< HTMLDivElement >( null ), useRef< HTMLDivElement >( null ) ];
+
+	return (
+		<PropProvider { ...context }>
+			{ items.map( ( item ) => (
+				<PopoverGridContainer key={ item.bind } ref={ rowRefs[ item.rowIndex ] ?? null }>
+					<PropKeyProvider bind={ item.bind }>
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ item.label }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 }>
+							{ item.bind === 'color' ? (
+								<ColorControl anchorEl={ anchorEl } />
+							) : (
+								<SizeControl anchorRef={ rowRefs[ item.rowIndex ] } units={ units } defaultUnit="px" />
+							) }
+						</Grid>
+					</PropKeyProvider>
+				</PopoverGridContainer>
+			) ) }
+		</PropProvider>
+	);
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type FilterItemPropValue } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+
+export const DropShadowItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	const { xAxis, yAxis, blur } = value.value;
+
+	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' }`;
+
+	return (
+		<Box component="span">
+			<Box component="span" style={ { textTransform: 'capitalize' } }>
+				Drop shadow:
+			</Box>
+			{ `${ xValue } ${ yValue } ${ blurValue }` }
+		</Box>
+	);
+};

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

@@ -3,12 +3,20 @@ import { useRef } from 'react';
 import {
 	blurFilterPropTypeUtil,
 	brightnessFilterPropTypeUtil,
+	contrastFilterPropTypeUtil,
+	dropShadowFilterPropTypeUtil,
 	type FilterItemPropValue,
 	filterPropTypeUtil,
+	grayscaleFilterPropTypeUtil,
+	hueRotateFilterPropTypeUtil,
+	invertFilterPropTypeUtil,
 	type PropKey,
 	type PropTypeUtil,
+	saturateFilterPropTypeUtil,
+	sepiaFilterPropTypeUtil,
 	type SizePropValue,
 } from '@elementor/editor-props';
+import { backdropFilterPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import { Box, Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -17,9 +25,11 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 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 { type CollectionPropUtil, Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
-import { defaultUnits } from '../utils/size-control';
+import { defaultUnits, type Unit } from '../utils/size-control';
+import { DropShadowItemContent } from './filter-control/drop-shadow-item-content';
+import { DropShadowItemLabel } from './filter-control/drop-shadow-item-label';
 import { SizeControl } from './size-control';
 
 type FilterType = FilterItemPropValue[ '$$type' ];
@@ -43,6 +53,21 @@ const filterConfig: Record< FilterType, FilterItemConfig > = {
 		propType: blurFilterPropTypeUtil,
 		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
 	},
+	'drop-shadow': {
+		defaultValue: {
+			$$type: 'drop-shadow',
+			value: {
+				xAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+				yAxis: { $$type: 'size', value: { size: 0, unit: 'px' } },
+				blur: { $$type: 'size', value: { size: 10, unit: 'px' } },
+				color: { $$type: 'color', value: 'rgba(0, 0, 0, 1)' },
+			},
+		},
+		name: __( 'Drop shadow', 'elementor' ),
+		valueName: __( 'Drop-shadow', 'elementor' ),
+		propType: dropShadowFilterPropTypeUtil,
+		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
+	},
 	brightness: {
 		defaultValue: { $$type: 'amount', amount: { $$type: 'size', value: { size: 100, unit: '%' } } },
 		name: __( 'Brightness', 'elementor' ),
@@ -50,18 +75,62 @@ const filterConfig: Record< FilterType, FilterItemConfig > = {
 		propType: brightnessFilterPropTypeUtil,
 		units: [ '%' ],
 	},
+	contrast: {
+		defaultValue: { $$type: 'contrast', contrast: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		name: __( 'Contrast', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: contrastFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	'hue-rotate': {
+		defaultValue: { $$type: 'hue-rotate', 'hue-rotate': { $$type: 'size', value: { size: 0, unit: 'deg' } } },
+		name: __( 'Hue Rotate', 'elementor' ),
+		valueName: __( 'Angle', 'elementor' ),
+		propType: hueRotateFilterPropTypeUtil,
+		units: [ 'deg', 'rad', 'grad', 'turn' ],
+	},
+	saturate: {
+		defaultValue: { $$type: 'saturate', saturate: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		name: __( 'Saturate', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: saturateFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	grayscale: {
+		defaultValue: { $$type: 'grayscale', grayscale: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		name: __( 'Grayscale', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: grayscaleFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	invert: {
+		defaultValue: { $$type: 'invert', invert: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		name: __( 'Invert', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: invertFilterPropTypeUtil,
+		units: [ '%' ],
+	},
+	sepia: {
+		defaultValue: { $$type: 'sepia', sepia: { $$type: 'size', value: { size: 0, unit: '%' } } },
+		name: __( 'Sepia', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: sepiaFilterPropTypeUtil,
+		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[];
+const isSingleSize = ( key: FilterType ): boolean => {
+	return ! [ 'drop-shadow' ].includes( key );
+};
 
-export const FilterRepeaterControl = createControl( () => {
-	const { propType, value: filterValues, setValue, disabled } = useBoundProp( filterPropTypeUtil );
+export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter' }: { filterPropName?: string } ) => {
+	const [ propUtil, label ] =
+		filterPropName === 'backdrop-filter'
+			? [ backdropFilterPropTypeUtil, __( 'Backdrop Filters', 'elementor' ) ]
+			: [ filterPropTypeUtil, __( 'Filters', 'elementor' ) ];
+	const { propType, value: filterValues, setValue, disabled } = useBoundProp( propUtil );
 
 	return (
 		<PropProvider propType={ propType } value={ filterValues } setValue={ setValue }>
@@ -70,7 +139,8 @@ export const FilterRepeaterControl = createControl( () => {
 				disabled={ disabled }
 				values={ filterValues ?? [] }
 				setValues={ setValue }
-				label={ __( 'Filter', 'elementor' ) }
+				label={ label }
+				collectionPropUtil={ propUtil }
 				itemSettings={ {
 					Icon: ItemIcon,
 					Label: ItemLabel,
@@ -87,10 +157,12 @@ export const FilterRepeaterControl = createControl( () => {
 
 const ItemIcon = () => <></>;
 
-const ItemLabel = ( props: { value: FilterItemPropValue } ) => {
-	const { $$type } = props.value;
-
-	return singleSizeFilterNames.includes( $$type ) && <SingleSizeItemLabel value={ props.value } />;
+const ItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	return isSingleSize( value.$$type ) ? (
+		<SingleSizeItemLabel value={ value } />
+	) : (
+		<DropShadowItemLabel value={ value } />
+	);
 };
 
 const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
@@ -113,8 +185,16 @@ const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
 	);
 };
 
-const ItemContent = ( { bind }: { bind: PropKey } ) => {
-	const { value: filterValues, setValue } = useBoundProp( filterPropTypeUtil );
+const ItemContent = ( {
+	bind,
+	collectionPropUtil,
+	anchorEl,
+}: {
+	bind: PropKey;
+	collectionPropUtil?: CollectionPropUtil< FilterItemPropValue >;
+	anchorEl?: HTMLElement | null;
+} ) => {
+	const { value: filterValues, setValue } = useBoundProp( collectionPropUtil ?? filterPropTypeUtil );
 	const itemIndex = parseInt( bind, 10 );
 	const item = filterValues?.[ itemIndex ];
 
@@ -124,7 +204,7 @@ const ItemContent = ( { bind }: { bind: PropKey } ) => {
 
 		newFilterValues[ itemIndex ] = {
 			$$type: filterType,
-			value: filterConfig[ filterType ].defaultValue,
+			value: { ...filterConfig[ filterType ].defaultValue },
 		} as FilterItemPropValue;
 
 		setValue( newFilterValues );
@@ -153,14 +233,20 @@ const ItemContent = ( { bind }: { bind: PropKey } ) => {
 						</Select>
 					</Grid>
 				</PopoverGridContainer>
-				<Content filterType={ item?.$$type } />
+				<Content filterType={ item?.$$type } anchorEl={ anchorEl } />
 			</PopoverContent>
 		</PropKeyProvider>
 	);
 };
 
-const Content = ( { filterType }: { filterType: FilterType } ) => {
-	return singleSizeFilterNames.includes( filterType ) && <SingleSizeItemContent filterType={ filterType } />;
+const Content = ( { filterType, anchorEl }: { filterType: FilterType; anchorEl?: HTMLElement | null } ) => {
+	const { propType, units = [] } = filterConfig[ filterType ];
+
+	return isSingleSize( filterType ) ? (
+		<SingleSizeItemContent filterType={ filterType } />
+	) : (
+		<DropShadowItemContent propType={ propType } units={ units as Unit[] } anchorEl={ anchorEl } />
+	);
 };
 
 const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) => {
@@ -168,6 +254,7 @@ const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) =>
 	const { $$type } = defaultValue;
 	const context = useBoundProp( propType );
 	const rowRef = useRef< HTMLDivElement >( null );
+	const defaultUnit = defaultValue[ $$type ].value.unit;
 
 	return (
 		<PropProvider { ...context }>
@@ -177,7 +264,7 @@ const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) =>
 						<ControlLabel>{ valueName }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
-						<SizeControl anchorRef={ rowRef } units={ units } />
+						<SizeControl anchorRef={ rowRef } units={ units } defaultUnit={ defaultUnit } />
 					</Grid>
 				</PopoverGridContainer>
 			</PropKeyProvider>