@elementor/editor-editing-panel 1.44.0 → 1.46.0

package/src/components/style-sections/spacing-section/spacing-section.tsx

@@ -16,7 +16,7 @@ export const SpacingSection = () => {
 				<LinkedDimensionsControl
 					label={ __( 'Margin', 'elementor' ) }
 					isSiteRtl={ isSiteRtl }
-					extendedValues={ [ 'auto' ] }
+					extendedOptions={ [ 'auto' ] }
 				/>
 			</StylesField>
 			<PanelDivider />

package/src/components/style-sections/typography-section/column-gap-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const ColumnGapField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="column-gap">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Column gap', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const FontSizeField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="font-size">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Font size', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const LetterSpacingField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="letter-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Letter spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/line-height-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const LineHeightField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="line-height">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Line height', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -5,6 +5,7 @@ import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
@@ -41,15 +42,17 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 
 export const TextAlignmentField = () => {
 	return (
-		<StylesField bind={ 'text-align' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
+		<UiProviders>
+			<StylesField bind={ 'text-align' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } display="flex" justifyContent="end">
+						<ToggleControl options={ options } />
+					</Grid>
 				</Grid>
-				<Grid item xs={ 6 } display="flex" justifyContent="end">
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
-		</StylesField>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
@@ -26,18 +25,17 @@ const initTextStroke = {
 };
 
 export const TextStrokeField = () => {
-	const { canEdit } = useStyle();
-	const [ textStroke, setTextStroke ] = useStylesField( 'stroke' );
+	const { value, setValue, canEdit } = useStylesField( 'stroke' );
 
 	const addTextStroke = () => {
-		setTextStroke( initTextStroke );
+		setValue( initTextStroke );
 	};
 
 	const removeTextStroke = () => {
-		setTextStroke( null );
+		setValue( null );
 	};
 
-	const hasTextStroke = Boolean( textStroke );
+	const hasTextStroke = Boolean( value );
 
 	return (
 		<StylesField bind={ 'stroke' }>

package/src/components/style-sections/typography-section/typography-section.tsx

@@ -23,9 +23,11 @@ import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
-	const [ columnCount ] = useStylesField< NumberPropValue >( 'column-count' );
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count' );
 	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
+
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 	return (
 		<SectionContent>
 			<FontFamilyField />

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const WordSpacingField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="word-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Word spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/controls-registry/controls-registry.tsx

@@ -1,7 +1,9 @@
 import {
 	type ControlComponent,
 	ImageControl,
+	KeyValueControl,
 	LinkControl,
+	RepeatableControl,
 	SelectControl,
 	SizeControl,
 	SvgMediaControl,
@@ -11,19 +13,35 @@ import {
 	UrlControl,
 } from '@elementor/editor-controls';
 import { type ControlLayout } from '@elementor/editor-elements';
+import {
+	booleanPropTypeUtil,
+	imagePropTypeUtil,
+	imageSrcPropTypeUtil,
+	keyValuePropTypeUtil,
+	linkPropTypeUtil,
+	type PropTypeUtil,
+	sizePropTypeUtil,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
 
-type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
+type ControlRegistry = Record<
+	string,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	{ component: ControlComponent; layout: ControlLayout; propTypeUtil?: PropTypeUtil< string, any > }
+>;
 
 const controlTypes = {
-	image: { component: ImageControl, layout: 'full' },
-	'svg-media': { component: SvgMediaControl, layout: 'full' },
-	text: { component: TextControl, layout: 'full' },
-	textarea: { component: TextAreaControl, layout: 'full' },
-	size: { component: SizeControl, layout: 'two-columns' },
-	select: { component: SelectControl, layout: 'two-columns' },
-	link: { component: LinkControl, layout: 'full' },
-	url: { component: UrlControl, layout: 'full' },
-	switch: { component: SwitchControl, layout: 'two-columns' },
+	image: { component: ImageControl, layout: 'full', propTypeUtil: imagePropTypeUtil },
+	'svg-media': { component: SvgMediaControl, layout: 'full', propTypeUtil: imageSrcPropTypeUtil },
+	text: { component: TextControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },
+	select: { component: SelectControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
+	link: { component: LinkControl, layout: 'full', propTypeUtil: linkPropTypeUtil },
+	url: { component: UrlControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	switch: { component: SwitchControl, layout: 'two-columns', propTypeUtil: booleanPropTypeUtil },
+	repeatable: { component: RepeatableControl, layout: 'full', propTypeUtil: undefined },
+	'key-value': { component: KeyValueControl, layout: 'full', propTypeUtil: keyValuePropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;
@@ -35,3 +53,5 @@ export type ControlTypes = {
 export const getControl = ( type: ControlType ) => controlTypes[ type ]?.component;
 
 export const getDefaultLayout = ( type: ControlType ) => controlTypes[ type ].layout;
+
+export const getPropTypeUtil = ( type: ControlType ) => controlTypes[ type ]?.propTypeUtil;

package/src/controls-registry/styles-field.tsx

@@ -3,7 +3,6 @@ import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@eleme
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
-import { useStyle } from '../contexts/style-context';
 import { useStylesField } from '../hooks/use-styles-field';
 import { StylesInheritanceIndicator } from '../styles-inheritance/components/styles-inheritance-indicator';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -15,8 +14,7 @@ export type StylesFieldProps = {
 };
 
 export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
-	const [ value, setValue ] = useStylesField( bind );
-	const { canEdit } = useStyle();
+	const { value, setValue, canEdit } = useStylesField( bind );
 
 	const stylesSchema = getStylesSchema();
 

package/src/dynamics/components/background-control-dynamic-tag.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
+import {
+	backgroundImageOverlayPropTypeUtil,
+	type BackgroundOverlayImagePropType,
+	type BackgroundOverlayPropType,
+	type ObjectPropType,
+	type UnionPropType,
+} from '@elementor/editor-props';
+import { DatabaseIcon } from '@elementor/icons';
+
+import { useDynamicTag } from '../hooks/use-dynamic-tag';
+
+// Since this is injected, the initial prop provider does not dig into the nested structure of the value.
+// We need to synthetically create a type that matches the expected structure of the value.
+
+export const BackgroundControlDynamicTagIcon = () => <DatabaseIcon fontSize="tiny" />;
+
+export const BackgroundControlDynamicTagLabel = ( { value }: { value: BackgroundOverlayPropType } ) => {
+	const context = useBoundProp( backgroundImageOverlayPropTypeUtil );
+
+	return (
+		<PropProvider { ...context } value={ value.value }>
+			<PropKeyProvider bind="image">
+				<Wrapper rawValue={ value.value } />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const Wrapper = ( { rawValue }: { rawValue: BackgroundOverlayPropType[ 'value' ] } ) => {
+	const { propType } = useBoundProp< BackgroundOverlayPropType, UnionPropType >();
+
+	const imageOverlayPropType = propType.prop_types[ 'background-image-overlay' ] as ObjectPropType;
+	return (
+		<PropProvider propType={ imageOverlayPropType.shape.image } value={ rawValue } setValue={ () => void 0 }>
+			<PropKeyProvider bind="src">
+				<Content rawValue={ rawValue.image } />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const Content = ( { rawValue }: { rawValue: BackgroundOverlayImagePropType } ) => {
+	const src = rawValue.value.src;
+	const dynamicTag = useDynamicTag( src.value.name || '' );
+	return <React.Fragment>{ dynamicTag?.label }</React.Fragment>;
+};

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
-import { PopoverHeader } from '@elementor/editor-ui';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -10,7 +10,6 @@ import {
 	Divider,
 	Grid,
 	IconButton,
-	Paper,
 	Popover,
 	Stack,
 	Tab,
@@ -81,12 +80,7 @@ export const DynamicSelectionControl = () => {
 				{ ...bindPopover( selectionPopoverState ) }
 			>
 				<Stack>
-					<PopoverHeader
-						title={ __( 'Dynamic tags', 'elementor' ) }
-						onClose={ selectionPopoverState.close }
-						icon={ <DatabaseIcon fontSize={ SIZE } /> }
-					/>
-					<DynamicSelection onSelect={ selectionPopoverState.close } />
+					<DynamicSelection close={ selectionPopoverState.close } />
 				</Stack>
 			</Popover>
 		</Box>
@@ -113,14 +107,12 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 				{ ...bindPopover( popupState ) }
 			>
-				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
-					<PopoverHeader
-						title={ dynamicTag.label }
-						onClose={ popupState.close }
-						icon={ <DatabaseIcon fontSize={ SIZE } /> }
-					/>
-					<DynamicSettings controls={ dynamicTag.atomic_controls } />
-				</Paper>
+				<PopoverHeader
+					title={ dynamicTag.label }
+					onClose={ popupState.close }
+					icon={ <DatabaseIcon fontSize={ SIZE } /> }
+				/>
+				<DynamicSettings controls={ dynamicTag.atomic_controls } />
 			</Popover>
 		</>
 	);
@@ -136,7 +128,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 	}
 
 	return (
-		<>
+		<PopoverScrollableContent>
 			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
 				{ tabs.map( ( { value }, index ) => (
 					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
@@ -158,7 +150,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 					</TabPanel>
 				);
 			} ) }
-		</>
+		</PopoverScrollableContent>
 	);
 };
 

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,19 +1,9 @@
-import * as React from 'react';
 import { Fragment, useState } from 'react';
+import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { DatabaseIcon, SearchIcon } from '@elementor/icons';
-import {
-	Box,
-	Divider,
-	InputAdornment,
-	Link,
-	MenuItem,
-	MenuList,
-	MenuSubheader,
-	Stack,
-	TextField,
-	Typography,
-} from '@elementor/ui';
+import { PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
+import { DatabaseIcon } from '@elementor/icons';
+import { Box, Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
@@ -31,7 +21,7 @@ type OptionEntry = [ string, Option[] ];
 const SIZE = 'tiny';
 
 type DynamicSelectionProps = {
-	onSelect?: () => void;
+	close: () => void;
 };
 
 type NoResultsProps = {
@@ -39,9 +29,10 @@ type NoResultsProps = {
 	onClear?: () => void;
 };
 
-export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
+export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
+	const theme = useTheme();
 
 	const { value: anyValue } = useBoundProp();
 	const { bind, value: dynamicValue, setValue } = useBoundProp( dynamicPropTypeUtil );
@@ -54,79 +45,69 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const hasNoDynamicTags = ! options.length && ! searchValue.trim();
 
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
 	};
 
-	const handleSetDynamicTag = ( value: string, label: string ) => {
+	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
 			updatePropValueHistory( anyValue );
 		}
 
-		setValue( { name: value, settings: { label } } );
+		const selectedOption = options.flatMap( ( [ , items ] ) => items ).find( ( item ) => item.value === value );
+
+		setValue( { name: value, settings: { label: selectedOption?.label } } );
 
-		onSelect?.();
+		closePopover();
 	};
 
+	const virtualizedItems = options.flatMap( ( [ category, items ] ) => [
+		{
+			type: 'category' as const,
+			value: category,
+			label: dynamicGroups?.[ category ]?.title || category,
+		},
+		...items.map( ( item ) => ( {
+			type: 'item' as const,
+			value: item.value,
+			label: item.label,
+		} ) ),
+	] );
+
 	return (
-		<Stack>
-			{ hasNoDynamicTags ? (
-				<NoDynamicTags />
-			) : (
-				<Fragment>
-					<Box px={ 1.5 } pb={ 1 }>
-						<TextField
-							fullWidth
-							size={ SIZE }
+		<>
+			<PopoverHeader
+				title={ __( 'Dynamic tags', 'elementor' ) }
+				onClose={ closePopover }
+				icon={ <DatabaseIcon fontSize={ SIZE } /> }
+			/>
+			<Stack>
+				{ hasNoDynamicTags ? (
+					<NoDynamicTags />
+				) : (
+					<Fragment>
+						<PopoverSearch
 							value={ searchValue }
-							onChange={ handleSearch }
+							onSearch={ handleSearch }
 							placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
-							InputProps={ {
-								startAdornment: (
-									<InputAdornment position="start">
-										<SearchIcon fontSize={ SIZE } />
-									</InputAdornment>
-								),
-							} }
 						/>
-					</Box>
-					<Divider />
-					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-						{ options.length > 0 ? (
-							<MenuList role="listbox" tabIndex={ 0 }>
-								{ options.map( ( [ category, items ], index ) => (
-									<Fragment key={ index }>
-										<MenuSubheader
-											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
-										>
-											{ dynamicGroups?.[ category ]?.title || category }
-										</MenuSubheader>
-										{ items.map( ( { value, label: tagLabel } ) => {
-											const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
-
-											return (
-												<MenuItem
-													key={ value }
-													selected={ isSelected }
-													// eslint-disable-next-line jsx-a11y/no-autofocus
-													autoFocus={ isSelected }
-													sx={ { px: 3.5, typography: 'caption' } }
-													onClick={ () => handleSetDynamicTag( value, tagLabel ) }
-												>
-													{ tagLabel }
-												</MenuItem>
-											);
-										} ) }
-									</Fragment>
-								) ) }
-							</MenuList>
-						) : (
-							<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
-						) }
-					</Box>
-				</Fragment>
-			) }
-		</Stack>
+						<Divider />
+						<PopoverMenuList
+							items={ virtualizedItems }
+							onSelect={ handleSetDynamicTag }
+							onClose={ closePopover }
+							selectedValue={ dynamicValue?.name }
+							itemStyle={ ( item ) =>
+								item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
+							}
+							noResultsComponent={
+								<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
+							}
+						/>
+					</Fragment>
+				) }
+			</Stack>
+		</>
 	);
 };
 
@@ -173,7 +154,7 @@ const NoDynamicTags = () => (
 				{ __( 'Streamline your workflow with dynamic tags', 'elementor' ) }
 			</Typography>
 			<Typography align="center" variant="caption">
-				{ __( 'You’ll need Elementor Pro to use this feature.', 'elementor' ) }
+				{ __( "You'll need Elementor Pro to use this feature.", 'elementor' ) }
 			</Typography>
 		</Stack>
 	</Box>

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -16,6 +16,6 @@ export const usePropDynamicAction = (): PopoverActionProps => {
 		visible,
 		icon: DatabaseIcon,
 		title: __( 'Dynamic tags', 'elementor' ),
-		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
+		content: ( { close } ) => <DynamicSelection close={ close } />,
 	};
 };

package/src/dynamics/init.ts

@@ -1,7 +1,14 @@
 import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import { type BackgroundOverlayPropType, type PropValue } from '@elementor/editor-props';
+import { type InjectedComponent } from '@elementor/locations';
 
 import { registerControlReplacement } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
+import {
+	BackgroundControlDynamicTagIcon,
+	BackgroundControlDynamicTagLabel,
+} from './components/background-control-dynamic-tag';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
 import { dynamicTransformer } from './dynamic-transformer';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
@@ -15,6 +22,20 @@ export const init = () => {
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
 
+	injectIntoRepeaterItemLabel( {
+		id: 'dynamic-background-image',
+		condition: ( { value } ) =>
+			isDynamicPropValue( ( value as BackgroundOverlayPropType ).value?.image?.value?.src ),
+		component: BackgroundControlDynamicTagLabel as InjectedComponent< { value: PropValue } >,
+	} );
+
+	injectIntoRepeaterItemIcon( {
+		id: 'dynamic-background-image',
+		condition: ( { value } ) =>
+			isDynamicPropValue( ( value as BackgroundOverlayPropType ).value?.image?.value?.src ),
+		component: BackgroundControlDynamicTagIcon,
+	} );
+
 	registerPopoverAction( {
 		id: 'dynamic-tags',
 		useProps: usePropDynamicAction,