@elementor/editor-editing-panel 0.17.0 → 0.19.0

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
 import { StyleControl } from '../../../controls/style-control';
 import { SizeControl } from '../../../controls/control-types/size-control';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { __ } from '@wordpress/i18n';
 
 export const FontSizeControl = () => {
 	return (
 		<StyleControl bind="font-size">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Font Size', 'elementor' ) }</StyleControl.Label>
-				<SizeControl />
-			</ControlContainer>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Font Size', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
 		</StyleControl>
 	);
 };

package/src/components/style-sections/typography-section/font-weight-control.tsx

@@ -1,24 +1,28 @@
 import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
 import { StyleControl } from '../../../controls/style-control';
 import { SelectControl } from '../../../controls/control-types/select-control';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { __ } from '@wordpress/i18n';
 
 const fontWeightOptions = [
-	{ label: __( 'Light - 400', 'elementor' ), value: 400 },
-	{ label: __( 'Regular - 500', 'elementor' ), value: 500 },
-	{ label: __( 'Semi Bold - 600', 'elementor' ), value: 600 },
-	{ label: __( 'Bold - 700', 'elementor' ), value: 700 },
-	{ label: __( 'Black - 900', 'elementor' ), value: 900 },
+	{ label: __( 'Light - 400', 'elementor' ), value: '400' },
+	{ label: __( 'Regular - 500', 'elementor' ), value: '500' },
+	{ label: __( 'Semi Bold - 600', 'elementor' ), value: '600' },
+	{ label: __( 'Bold - 700', 'elementor' ), value: '700' },
+	{ label: __( 'Black - 900', 'elementor' ), value: '900' },
 ];
 
 export const FontWeightControl = () => {
 	return (
-		<StyleControl bind="fontWeight">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Font Weight', 'elementor' ) }</StyleControl.Label>
-				<SelectControl options={ fontWeightOptions } />
-			</ControlContainer>
+		<StyleControl bind="font-weight">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Font Weight', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SelectControl options={ fontWeightOptions } />
+				</Grid>
+			</Grid>
 		</StyleControl>
 	);
 };

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
 import { StyleControl } from '../../../controls/style-control';
 import { SizeControl } from '../../../controls/control-types/size-control';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { __ } from '@wordpress/i18n';
 
 export const LetterSpacingControl = () => {
 	return (
 		<StyleControl bind="letter-spacing">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Letter Spacing', 'elementor' ) }</StyleControl.Label>
-				<SizeControl />
-			</ControlContainer>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Letter Spacing', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
 		</StyleControl>
 	);
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
-import { ControlContainer } from '../../../controls/components/control-container';
+import { Grid } from '@elementor/ui';
+import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
 import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
 import { StyleControl } from '../../../controls/style-control';
 import { ToggleControl } from '../../../controls/control-types/toggle-control';
@@ -33,11 +33,15 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 
 export const TextAlignmentControl = () => {
 	return (
-		<ControlContainer>
-			<StyleControl.Label>{ __( 'Alignment', 'elementor' ) }</StyleControl.Label>
-			<StyleControl bind={ 'text-align' }>
-				<ToggleControl options={ options } />
-			</StyleControl>
-		</ControlContainer>
+		<StyleControl bind={ 'text-align' }>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Alignment', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 } display="flex" justifyContent="end">
+					<ToggleControl options={ options } />
+				</Grid>
+			</Grid>
+		</StyleControl>
 	);
 };

package/src/components/style-sections/typography-section/text-color-control.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
-import { StyleControl } from '../../../controls/style-control';
-import { ControlContainer } from '../../../controls/components/control-container';
 import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { StyleControl } from '../../../controls/style-control';
 import { ColorControl } from '../../../controls/control-types/color-control';
 
 export const TextColorControl = () => {
 	return (
 		<StyleControl bind="color">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
-				<ColorControl />
-			</ControlContainer>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ColorControl />
+				</Grid>
+			</Grid>
 		</StyleControl>
 	);
 };

package/src/components/style-sections/typography-section/text-direction-control.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
+import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
+import { StyleControl } from '../../../controls/style-control';
+import { ToggleControl } from '../../../controls/control-types/toggle-control';
+
+type Direction = 'ltr' | 'rtl';
+
+const options: ToggleButtonGroupItem< Direction >[] = [
+	{
+		value: 'ltr',
+		label: __( 'Left to Right', 'elementor' ),
+		icon: TextDirectionLtrIcon,
+	},
+	{
+		value: 'rtl',
+		label: __( 'Right to Left', 'elementor' ),
+		icon: TextDirectionRtlIcon,
+	},
+];
+
+export const TextDirectionControl = () => {
+	return (
+		<StyleControl bind={ 'direction' }>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Direction', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 } display="flex" justifyContent="end">
+					<ToggleControl options={ options } />
+				</Grid>
+			</Grid>
+		</StyleControl>
+	);
+};

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

@@ -1,49 +1,52 @@
 import * as React from 'react';
-import { ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
 import { ControlLabel } from '../../control-label';
 import { useStyleControl } from '../../../controls/hooks/use-style-control';
-import { __ } from '@wordpress/i18n';
-import { ControlContainer } from '../../../controls/components/control-container';
 
 const buttonSize = 'tiny';
 
 export const TextStyleControl = () => {
-	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'fontStyle' );
-	const [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'textDecoration' );
+	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'font-style' );
+	const [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'text-decoration' );
 
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 
 	return (
-		<ControlContainer>
-			<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
-			<ToggleButtonGroup value={ formats }>
-				<ToggleButton
-					value="italic"
-					onChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }
-					aria-label="italic"
-					sx={ { marginLeft: 'auto' } }
-				>
-					<ItalicIcon fontSize={ buttonSize } />
-				</ToggleButton>
-				<ShorthandControl
-					value="line-through"
-					currentValues={ textDecoration || '' }
-					updateValues={ setTextDecoration }
-					aria-label="line-through"
-				>
-					<StrikethroughIcon fontSize={ buttonSize } />
-				</ShorthandControl>
-				<ShorthandControl
-					value="underline"
-					currentValues={ textDecoration || '' }
-					updateValues={ setTextDecoration }
-					aria-label="underline"
-				>
-					<UnderlineIcon fontSize={ buttonSize } />
-				</ShorthandControl>
-			</ToggleButtonGroup>
-		</ControlContainer>
+		<Grid container spacing={ 1 } alignItems="center">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
+				<ToggleButtonGroup value={ formats }>
+					<ToggleButton
+						value="italic"
+						onChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }
+						aria-label="italic"
+						sx={ { marginLeft: 'auto' } }
+					>
+						<ItalicIcon fontSize={ buttonSize } />
+					</ToggleButton>
+					<ShorthandControl
+						value="line-through"
+						currentValues={ textDecoration || '' }
+						updateValues={ setTextDecoration }
+						aria-label="line-through"
+					>
+						<StrikethroughIcon fontSize={ buttonSize } />
+					</ShorthandControl>
+					<ShorthandControl
+						value="underline"
+						currentValues={ textDecoration || '' }
+						updateValues={ setTextDecoration }
+						aria-label="underline"
+					>
+						<UnderlineIcon fontSize={ buttonSize } />
+					</ShorthandControl>
+				</ToggleButtonGroup>
+			</Grid>
+		</Grid>
 	);
 };
 

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { StyleControl } from '../../../controls/style-control';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { Grid } from '@elementor/ui';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+import { StyleControl } from '../../../controls/style-control';
+import { ToggleControl } from '../../../controls/control-types/toggle-control';
 
 const options = [
 	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
@@ -11,13 +11,15 @@ const options = [
 	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
 ];
 
-export const TransformControl = () => {
-	return (
-		<ControlContainer>
-			<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
-			<StyleControl bind={ 'text-transform' }>
+export const TransformControl = () => (
+	<StyleControl bind={ 'text-transform' }>
+		<Grid container spacing={ 1 } alignItems="center">
+			<Grid item xs={ 6 }>
+				<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
+			</Grid>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />
-			</StyleControl>
-		</ControlContainer>
-	);
-};
+			</Grid>
+		</Grid>
+	</StyleControl>
+);

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

@@ -11,6 +11,7 @@ import { WordSpacingControl } from './word-spacing-control';
 import { CollapsibleContent } from '../../collapsible-content';
 import { TransformControl } from './transform-control';
 import { TextAlignmentControl } from './text-alignment-control';
+import { TextDirectionControl } from './text-direction-control';
 
 export const TypographySection = () => {
 	return (
@@ -28,6 +29,7 @@ export const TypographySection = () => {
 						<TextAlignmentControl />
 						<TextStyleControl />
 						<TransformControl />
+						<TextDirectionControl />
 					</Stack>
 				</CollapsibleContent>
 			</Stack>

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
 import { StyleControl } from '../../../controls/style-control';
 import { SizeControl } from '../../../controls/control-types/size-control';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { __ } from '@wordpress/i18n';
 
 export const WordSpacingControl = () => {
 	return (
 		<StyleControl bind="word-spacing">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
-				<SizeControl />
-			</ControlContainer>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
 		</StyleControl>
 	);
 };

package/src/components/style-tab.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleContext } from '../contexts/style-context';
-import { useElementContext } from '../contexts/element-context';
+import { useElement } from '../controls/providers/element-provider';
 import { useElementStyles } from '../hooks/use-element-styles';
 import { Stack } from '@elementor/ui';
 import { SizeSection } from './style-sections/size-section';
@@ -8,6 +8,8 @@ import { TypographySection } from './style-sections/typography-section/typograph
 import { PositionSection } from './style-sections/position-section/position-section';
 import { StyleDefinition } from '@elementor/editor-style';
 import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { BackgroundSection } from './style-sections/background-section/background-section';
 
 const CLASSES_PROP_KEY = 'classes';
 
@@ -21,16 +23,20 @@ export const StyleTab = () => {
 				<SizeSection />
 				<PositionSection />
 				<TypographySection />
+				<BackgroundSection />
 				<SpacingSection />
+				<EffectsSection />
 			</Stack>
 		</StyleContext>
 	);
 };
 
 function useClassesProp(): string {
-	const { elementType } = useElementContext();
+	const { elementType } = useElement();
 
-	const prop = Object.entries( elementType.propsSchema ).find( ( [ , { type } ] ) => type.key === CLASSES_PROP_KEY );
+	const prop = Object.entries( elementType.propsSchema ).find(
+		( [ , propType ] ) => propType.kind === 'array' && propType.key === CLASSES_PROP_KEY
+	);
 
 	if ( ! prop ) {
 		throw new Error( 'Element does not have a classes prop' );
@@ -40,7 +46,7 @@ function useClassesProp(): string {
 }
 
 function useStyleDefinition(): StyleDefinition | null {
-	const { element } = useElementContext();
+	const { element } = useElement();
 	const elementStyles = useElementStyles( element.id );
 
 	return Object.values( elementStyles || {} )[ 0 ] ?? null;

package/src/control-replacement.tsx

@@ -0,0 +1,3 @@
+import { createControlReplacement } from './controls/create-control-replacement';
+
+export const { replaceControl, getControlReplacement } = createControlReplacement();

package/src/controls/components/control-type-container.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { styled, Box, BoxProps } from '@elementor/ui';
+import { ControlLayout, ControlType, getLayoutByType } from '../controls-registry';
+
+export const ControlTypeContainer = ( {
+	controlType,
+	children,
+}: React.PropsWithChildren< { controlType: ControlType } > ) => {
+	const layout = getLayoutByType( controlType );
+
+	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
+};
+
+const StyledContainer = styled( Box, {
+	shouldForwardProp: ( prop: string ) => ! [ 'layout' ].includes( prop ),
+} )< BoxProps & { layout: ControlLayout } >( ( { layout, theme } ) => ( {
+	display: 'grid',
+	gridGap: theme.spacing( 1 ),
+	...getGridLayout( layout ),
+} ) );
+
+const getGridLayout = ( layout: ControlLayout ) => ( {
+	justifyContent: 'space-between',
+	gridTemplateColumns: {
+		full: '1fr',
+		'two-columns': 'repeat(2, 1fr)',
+	}[ layout ],
+} );

package/src/controls/components/repeater.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { useId, useRef, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { PlusIcon, XIcon, CopyIcon, EyeIcon, EyeOffIcon } from '@elementor/icons';
+import {
+	Box,
+	Stack,
+	Popover,
+	IconButton,
+	bindTrigger,
+	bindPopover,
+	usePopupState,
+	UnstableTagProps,
+	UnstableTag,
+	Typography,
+} from '@elementor/ui';
+
+const SIZE = 'tiny';
+
+type AnchorEl = HTMLElement | null;
+
+type Item< T > = {
+	disabled?: boolean;
+} & T;
+
+export type RepeaterProps< T > = {
+	label: string;
+	values?: T[];
+	setValues: ( newValue: T[] ) => void;
+	itemSettings: {
+		initialValues: T;
+		Label: React.ComponentType< { value: T } >;
+		Icon: React.ComponentType< { value: T } >;
+		Content: React.ComponentType< {
+			value: T;
+			setValue: ( newValue: T ) => void;
+			anchorEl: AnchorEl;
+		} >;
+	};
+};
+
+export const Repeater = < T, >( {
+	label,
+	itemSettings,
+	values: repeaterValues = [],
+	setValues: setRepeaterValues,
+}: RepeaterProps< Item< T > > ) => {
+	const addRepeaterItem = () => {
+		const newItem = structuredClone( itemSettings.initialValues );
+
+		setRepeaterValues( [ ...repeaterValues, newItem ] );
+	};
+
+	const duplicateRepeaterItem = ( index: number ) => {
+		setRepeaterValues( [
+			...repeaterValues.slice( 0, index ),
+			structuredClone( repeaterValues[ index ] ),
+			...repeaterValues.slice( index ),
+		] );
+	};
+
+	const removeRepeaterItem = ( index: number ) => {
+		setRepeaterValues( repeaterValues.filter( ( _, i ) => i !== index ) );
+	};
+
+	const toggleDisableRepeaterItem = ( index: number ) => {
+		setRepeaterValues(
+			repeaterValues.map( ( value, i ) => {
+				if ( i === index ) {
+					const { disabled, ...rest } = value;
+
+					// If the items should not be disabled, remove the disabled property.
+					return { ...rest, ...( disabled ? {} : { disabled: true } ) } as Item< T >;
+				}
+
+				return value;
+			} )
+		);
+	};
+
+	return (
+		<Stack>
+			<Stack direction="row" justifyContent="space-between" sx={ { py: 0.5 } }>
+				<Typography component="label" variant="caption" color="text.secondary">
+					{ label }
+				</Typography>
+				<IconButton size={ SIZE } onClick={ addRepeaterItem } aria-label={ __( 'Add item', 'elementor' ) }>
+					<PlusIcon fontSize={ SIZE } />
+				</IconButton>
+			</Stack>
+			<Stack gap={ 1 }>
+				{ repeaterValues.map( ( value, index ) => (
+					<RepeaterItem
+						key={ index }
+						disabled={ value.disabled }
+						label={ <itemSettings.Label value={ value } /> }
+						startIcon={ <itemSettings.Icon value={ value } /> }
+						removeItem={ () => removeRepeaterItem( index ) }
+						duplicateItem={ () => duplicateRepeaterItem( index ) }
+						toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
+					>
+						{ ( props ) => (
+							<itemSettings.Content
+								{ ...props }
+								value={ value }
+								setValue={ ( newValue ) =>
+									setRepeaterValues(
+										repeaterValues.map( ( item, i ) => ( i === index ? newValue : item ) )
+									)
+								}
+							/>
+						) }
+					</RepeaterItem>
+				) ) }
+			</Stack>
+		</Stack>
+	);
+};
+
+type RepeaterItemProps = {
+	label: React.ReactNode;
+	disabled?: boolean;
+	startIcon: UnstableTagProps[ 'startIcon' ];
+	removeItem: () => void;
+	duplicateItem: () => void;
+	toggleDisableItem: () => void;
+	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
+};
+
+const RepeaterItem = ( {
+	label,
+	disabled,
+	startIcon,
+	children,
+	removeItem,
+	duplicateItem,
+	toggleDisableItem,
+}: RepeaterItemProps ) => {
+	const popupId = useId();
+	const tagRef = useRef< HTMLElement >( null );
+	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
+
+	const popoverState = usePopupState( { popupId, variant: 'popover' } );
+
+	const popoverProps = bindPopover( popoverState );
+
+	return (
+		<>
+			<UnstableTag
+				ref={ tagRef }
+				label={ label }
+				showActionsOnHover
+				variant="outlined"
+				aria-label={ __( 'Open item', 'elementor' ) }
+				{ ...bindTrigger( popoverState ) }
+				startIcon={ startIcon }
+				actions={
+					<>
+						<IconButton
+							size={ SIZE }
+							onClick={ duplicateItem }
+							aria-label={ __( 'Duplicate item', 'elementor' ) }
+						>
+							<CopyIcon fontSize={ SIZE } />
+						</IconButton>
+						<IconButton
+							size={ SIZE }
+							onClick={ toggleDisableItem }
+							aria-label={
+								disabled ? __( 'Enable item', 'elementor' ) : __( 'Disable item', 'elementor' )
+							}
+						>
+							{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+						</IconButton>
+						<IconButton
+							size={ SIZE }
+							onClick={ removeItem }
+							aria-label={ __( 'Remove item', 'elementor' ) }
+						>
+							<XIcon fontSize={ SIZE } />
+						</IconButton>
+					</>
+				}
+			/>
+			<Popover
+				disablePortal
+				slotProps={ {
+					paper: { ref: setAnchorEl, sx: { width: tagRef.current?.getBoundingClientRect().width } },
+				} }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				{ ...popoverProps }
+			>
+				<Box p={ 2 }>{ children( { anchorEl } ) }</Box>
+			</Popover>
+		</>
+	);
+};

package/src/controls/components/text-field-inner-selection.tsx

@@ -1,7 +1,7 @@
-import { PropValue } from '../../types';
 import * as React from 'react';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
 import { useId } from 'react';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+import { PropValue } from '../props/types';
 
 export type TextFieldInnerSelectionProps = {
 	placeholder?: string;