@elementor/editor-controls 1.0.0 → 1.2.0

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

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import {
+	blurFilterPropTypeUtil,
+	brightnessFilterPropTypeUtil,
+	type FilterItemPropValue,
+	filterPropTypeUtil,
+	type PropKey,
+	type PropTypeUtil,
+	type SizePropValue,
+} from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Box, Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+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 { createControl } from '../create-control';
+import { defaultUnits } from '../utils/size-control';
+import { SizeControl } from './size-control';
+
+type FilterType = FilterItemPropValue[ '$$type' ];
+type FilterValue = FilterItemPropValue[ 'value' ];
+
+const DEFAULT_FILTER_KEY: FilterType = 'blur';
+
+type FilterItemConfig = {
+	defaultValue: FilterValue;
+	name: string;
+	valueName: string;
+	propType: PropTypeUtil< FilterValue, FilterValue >;
+	units?: Exclude< SizePropValue[ 'value' ][ 'unit' ], 'custom' | 'auto' >[];
+};
+
+const filterConfig: Record< FilterType, FilterItemConfig > = {
+	blur: {
+		defaultValue: { $$type: 'radius', radius: { $$type: 'size', value: { size: 0, unit: 'px' } } },
+		name: __( 'Blur', 'elementor' ),
+		valueName: __( 'Radius', 'elementor' ),
+		propType: blurFilterPropTypeUtil,
+		units: defaultUnits.filter( ( unit ) => unit !== '%' ),
+	},
+	brightness: {
+		defaultValue: { $$type: 'amount', amount: { $$type: 'size', value: { size: 100, unit: '%' } } },
+		name: __( 'Brightness', 'elementor' ),
+		valueName: __( 'Amount', 'elementor' ),
+		propType: brightnessFilterPropTypeUtil,
+		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[];
+
+export const FilterRepeaterControl = createControl( () => {
+	const { propType, value: filterValues, setValue, disabled } = useBoundProp( filterPropTypeUtil );
+
+	return (
+		<PropProvider propType={ propType } value={ filterValues } setValue={ setValue }>
+			<Repeater
+				openOnAdd
+				disabled={ disabled }
+				values={ filterValues ?? [] }
+				setValues={ setValue }
+				label={ __( 'Filter', 'elementor' ) }
+				itemSettings={ {
+					Icon: ItemIcon,
+					Label: ItemLabel,
+					Content: ItemContent,
+					initialValues: {
+						$$type: DEFAULT_FILTER_KEY,
+						value: filterConfig[ DEFAULT_FILTER_KEY ].defaultValue,
+					} as FilterItemPropValue,
+				} }
+			/>
+		</PropProvider>
+	);
+} );
+
+const ItemIcon = () => <></>;
+
+const ItemLabel = ( props: { value: FilterItemPropValue } ) => {
+	const { $$type } = props.value;
+
+	return singleSizeFilterNames.includes( $$type ) && <SingleSizeItemLabel value={ props.value } />;
+};
+
+const SingleSizeItemLabel = ( { value }: { value: FilterItemPropValue } ) => {
+	const { $$type, value: sizeValue } = value;
+	const { $$type: key } = filterConfig[ $$type ].defaultValue;
+	const defaultUnit = filterConfig[ $$type ].defaultValue[ key ].value.unit;
+	const { unit, size } = sizeValue[ key ]?.value ?? { unit: defaultUnit, size: 0 };
+
+	const label = (
+		<Box component="span" style={ { textTransform: 'capitalize' } }>
+			{ value.$$type }:
+		</Box>
+	);
+
+	return (
+		<Box component="span">
+			{ label }
+			{ unit !== 'custom' ? ` ${ size ?? 0 }${ unit ?? defaultUnit }` : size }
+		</Box>
+	);
+};
+
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	const { value: filterValues, setValue } = useBoundProp( filterPropTypeUtil );
+	const itemIndex = parseInt( bind, 10 );
+	const item = filterValues?.[ itemIndex ];
+
+	const handleChange = ( e: SelectChangeEvent< string > ) => {
+		const newFilterValues = [ ...filterValues ];
+		const filterType = e.target.value as FilterType;
+
+		newFilterValues[ itemIndex ] = {
+			$$type: filterType,
+			value: filterConfig[ filterType ].defaultValue,
+		} as FilterItemPropValue;
+
+		setValue( newFilterValues );
+	};
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<PopoverContent p={ 1.5 }>
+				<PopoverGridContainer>
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Filter', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<Select
+							sx={ { overflow: 'hidden' } }
+							size="tiny"
+							value={ item?.$$type ?? DEFAULT_FILTER_KEY }
+							onChange={ handleChange }
+							fullWidth
+						>
+							{ filterKeys.map( ( filterKey ) => (
+								<MenuListItem key={ filterKey } value={ filterKey }>
+									{ filterConfig[ filterKey ].name }
+								</MenuListItem>
+							) ) }
+						</Select>
+					</Grid>
+				</PopoverGridContainer>
+				<Content filterType={ item?.$$type } />
+			</PopoverContent>
+		</PropKeyProvider>
+	);
+};
+
+const Content = ( { filterType }: { filterType: FilterType } ) => {
+	return singleSizeFilterNames.includes( filterType ) && <SingleSizeItemContent filterType={ filterType } />;
+};
+
+const SingleSizeItemContent = ( { filterType }: { filterType: FilterType } ) => {
+	const { propType, valueName, defaultValue, units } = filterConfig[ filterType ];
+	const { $$type } = defaultValue;
+	const context = useBoundProp( propType );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<PropProvider { ...context }>
+			<PropKeyProvider bind={ $$type }>
+				<PopoverGridContainer ref={ rowRef }>
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ valueName }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<SizeControl anchorRef={ rowRef } units={ units } />
+					</Grid>
+				</PopoverGridContainer>
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};

package/src/controls/font-family-control/font-family-control.tsx

@@ -15,11 +15,12 @@ export type FontCategory = {
 
 type FontFamilyControlProps = {
 	fontFamilies: FontCategory[];
+	sectionWidth: number;
 };
 
 const SIZE = 'tiny';
 
-export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
+export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
 	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
@@ -39,7 +40,9 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 			<Popover
 				disablePortal
 				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				sx={ { my: 1.5 } }
 				{ ...bindPopover( popoverState ) }
 			>
 				<FontFamilySelector
@@ -47,6 +50,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 					fontFamily={ fontFamily }
 					onFontFamilyChange={ setFontFamily }
 					onClose={ popoverState.close }
+					sectionWidth={ sectionWidth }
 				/>
 			</Popover>
 		</>

package/src/controls/gap-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
@@ -19,7 +19,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
 
-	const stackRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const stackRef = useRef< HTMLDivElement >( null );
 
 	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
@@ -96,7 +96,7 @@ const Control = ( {
 }: {
 	bind: PropKey;
 	isLinked: boolean;
-	anchorRef: MutableRefObject< HTMLElement | undefined >;
+	anchorRef: RefObject< HTMLDivElement >;
 } ) => {
 	if ( isLinked ) {
 		return <SizeControl anchorRef={ anchorRef } />;

package/src/controls/image-control.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { imagePropTypeUtil } from '@elementor/editor-props';
-import { Grid, Stack } from '@elementor/ui';
+import { Stack } from '@elementor/ui';
 import { type MediaType } from '@elementor/wp-media';
-import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlFormLabel } from '../components/control-form-label';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 import { ImageMediaControl } from './image-media-control';
@@ -13,40 +11,29 @@ import { SelectControl } from './select-control';
 
 type ImageControlProps = {
 	sizes: { label: string; value: string }[];
-	resolutionLabel?: string;
 	showMode?: 'all' | 'media' | 'sizes';
 };
 
-export const ImageControl = createControl(
-	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ), showMode = 'all' }: ImageControlProps ) => {
-		const propContext = useBoundProp( imagePropTypeUtil );
+export const ImageControl = createControl( ( { sizes, showMode = 'all' }: ImageControlProps ) => {
+	const propContext = useBoundProp( imagePropTypeUtil );
 
-		const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-		const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
+	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+	const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
 
-		return (
-			<PropProvider { ...propContext }>
-				<Stack gap={ 1.5 }>
-					{ [ 'all', 'media' ].includes( showMode ) ? (
-						<PropKeyProvider bind={ 'src' }>
-							<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
-							<ImageMediaControl mediaTypes={ mediaTypes } />
-						</PropKeyProvider>
-					) : null }
-					{ [ 'all', 'sizes' ].includes( showMode ) ? (
-						<PropKeyProvider bind={ 'size' }>
-							<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
-								<Grid item xs={ 6 }>
-									<ControlFormLabel>{ resolutionLabel }</ControlFormLabel>
-								</Grid>
-								<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-									<SelectControl options={ sizes } />
-								</Grid>
-							</Grid>
-						</PropKeyProvider>
-					) : null }
-				</Stack>
-			</PropProvider>
-		);
-	}
-);
+	return (
+		<PropProvider { ...propContext }>
+			<Stack gap={ 1.5 }>
+				{ [ 'all', 'media' ].includes( showMode ) ? (
+					<PropKeyProvider bind={ 'src' }>
+						<ImageMediaControl mediaTypes={ mediaTypes } />
+					</PropKeyProvider>
+				) : null }
+				{ [ 'all', 'sizes' ].includes( showMode ) ? (
+					<PropKeyProvider bind={ 'size' }>
+						<SelectControl options={ sizes } />
+					</PropKeyProvider>
+				) : null }
+			</Stack>
+		</PropProvider>
+	);
+} );

package/src/controls/key-value-control.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { type ChangeEvent, useMemo, useState } from 'react';
+import { keyValuePropTypeUtil } from '@elementor/editor-props';
+import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+type FieldType = 'key' | 'value';
+
+type KeyValueControlProps = {
+	keyName?: string;
+	valueName?: string;
+	regexKey?: string;
+	regexValue?: string;
+	validationErrorMessage?: string;
+};
+
+export const KeyValueControl = createControl( ( props: KeyValueControlProps = {} ) => {
+	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
+	const [ keyError, setKeyError ] = useState< string | null >( null );
+	const [ valueError, setValueError ] = useState< string | null >( null );
+
+	const [ sessionState, setSessionState ] = useState( {
+		key: value?.key?.value || '',
+		value: value?.value?.value || '',
+	} );
+
+	const keyLabel = props.keyName || __( 'Key', 'elementor' );
+	const valueLabel = props.valueName || __( 'Value', 'elementor' );
+
+	const [ keyRegex, valueRegex, errMsg ] = useMemo< [ RegExp | undefined, RegExp | undefined, string ] >(
+		() => [
+			props.regexKey ? new RegExp( props.regexKey ) : undefined,
+			props.regexValue ? new RegExp( props.regexValue ) : undefined,
+			props.validationErrorMessage || __( 'Invalid Format', 'elementor' ),
+		],
+		[ props.regexKey, props.regexValue, props.validationErrorMessage ]
+	);
+
+	const validate = ( newValue: string, fieldType: string ): boolean => {
+		if ( fieldType === 'key' && keyRegex ) {
+			const isValid = keyRegex.test( newValue );
+			setKeyError( isValid ? null : errMsg );
+			return isValid;
+		} else if ( fieldType === 'value' && valueRegex ) {
+			const isValid = valueRegex.test( newValue );
+			setValueError( isValid ? null : errMsg );
+			return isValid;
+		}
+		return true;
+	};
+
+	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
+		const newValue = event.target.value;
+
+		setSessionState( ( prev ) => ( {
+			...prev,
+			[ fieldType ]: newValue,
+		} ) );
+
+		if ( validate( newValue, fieldType ) ) {
+			setValue( {
+				...value,
+				[ fieldType ]: {
+					value: newValue,
+					$$type: 'string',
+				},
+			} );
+		} else {
+			setValue( {
+				...value,
+				[ fieldType ]: {
+					value: '',
+					$$type: 'string',
+				},
+			} );
+		}
+	};
+
+	const isKeyInvalid = keyError !== null;
+	const isValueInvalid = valueError !== null;
+
+	return (
+		<ControlActions>
+			<Grid container gap={ 1.5 }>
+				<Grid item xs={ 12 }>
+					<FormLabel size="tiny">{ keyLabel }</FormLabel>
+					<TextField
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus
+						sx={ { pt: 1 } }
+						size="tiny"
+						fullWidth
+						value={ sessionState.key }
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
+						error={ isKeyInvalid }
+					/>
+					{ isKeyInvalid && <FormHelperText error>{ keyError }</FormHelperText> }
+				</Grid>
+				<Grid item xs={ 12 }>
+					<FormLabel size="tiny">{ valueLabel }</FormLabel>
+					<TextField
+						sx={ { pt: 1 } }
+						size="tiny"
+						fullWidth
+						value={ sessionState.value }
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
+						disabled={ isKeyInvalid }
+						error={ isValueInvalid }
+					/>
+					{ isValueInvalid && <FormHelperText error>{ valueError }</FormHelperText> }
+				</Grid>
+			</Grid>
+		</ControlActions>
+	);
+} );

package/src/controls/link-control.tsx

@@ -38,6 +38,7 @@ type Props = ControlProps< {
 	allowCustomValues?: boolean;
 	minInputLength?: number;
 	placeholder?: string;
+	label?: string;
 } >;
 
 type LinkSessionValue = {
@@ -66,6 +67,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		placeholder,
 		minInputLength = 2,
 		context: { elementId },
+		label = __( 'Link', 'elementor' ),
 	} = props || {};
 
 	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
@@ -163,7 +165,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 						marginInlineEnd: -0.75,
 					} }
 				>
-					<ControlFormLabel>{ __( 'Link', 'elementor' ) }</ControlFormLabel>
+					<ControlFormLabel>{ label }</ControlFormLabel>
 					<ConditionalInfoTip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
 						<ToggleIconControl
 							disabled={ shouldDisableAddingLink }

package/src/controls/linked-dimensions-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, useRef } from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
@@ -24,7 +24,7 @@ export const LinkedDimensionsControl = createControl(
 		extendedOptions?: ExtendedOption[];
 	} ) => {
 		const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
-		const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+		const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
 		const {
 			value: dimensionsValue,
@@ -127,7 +127,7 @@ const Control = ( {
 	startIcon: React.ReactNode;
 	isLinked: boolean;
 	extendedOptions?: ExtendedOption[];
-	anchorRef: MutableRefObject< HTMLElement | undefined >;
+	anchorRef: RefObject< HTMLDivElement >;
 } ) => {
 	if ( isLinked ) {
 		return <SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />;

package/src/controls/number-control.tsx

@@ -13,7 +13,7 @@ const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
 
 export const NumberControl = createControl(
 	( {
-		placeholder,
+		placeholder: labelPlaceholder,
 		max = Number.MAX_VALUE,
 		min = -Number.MAX_VALUE,
 		step = 1,
@@ -25,7 +25,7 @@ export const NumberControl = createControl(
 		step?: number;
 		shouldForceInt?: boolean;
 	} ) => {
-		const { value, setValue, disabled } = useBoundProp( numberPropTypeUtil );
+		const { value, setValue, placeholder, disabled } = useBoundProp( numberPropTypeUtil );
 
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 			const eventValue: string = event.target.value;
@@ -50,7 +50,7 @@ export const NumberControl = createControl(
 					disabled={ disabled }
 					value={ isEmptyOrNaN( value ) ? '' : value }
 					onChange={ handleChange }
-					placeholder={ placeholder }
+					placeholder={ labelPlaceholder ?? ( placeholder ? String( placeholder ) : '' ) }
 					inputProps={ { step } }
 					onKeyDown={ ( event: KeyboardEvent ) => {
 						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {

package/src/controls/position-control.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { positionPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { LetterXIcon, LetterYIcon } from '@elementor/icons';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
+import { SizeControl } from './size-control';
+
+type Positions =
+	| 'center center'
+	| 'center left'
+	| 'center right'
+	| 'top center'
+	| 'top left'
+	| 'top right'
+	| 'bottom center'
+	| 'bottom left'
+	| 'bottom right'
+	| 'custom';
+
+const positionOptions = [
+	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
+	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
+	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
+	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
+	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
+	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
+	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
+	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
+	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
+];
+
+export const PositionControl = () => {
+	const positionContext = useBoundProp( positionPropTypeUtil );
+	const stringPropContext = useBoundProp( stringPropTypeUtil );
+
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+	const isCustom = !! positionContext.value && isVersion331Active;
+
+	const availablePositionOptions = useMemo( () => {
+		const options = [ ...positionOptions ];
+
+		if ( isVersion331Active ) {
+			options.push( { label: __( 'Custom', 'elementor' ), value: 'custom' } );
+		}
+
+		return options;
+	}, [ isVersion331Active ] );
+
+	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
+		const value = event.target.value || null;
+
+		if ( value === 'custom' && isVersion331Active ) {
+			positionContext.setValue( { x: null, y: null } );
+		} else {
+			stringPropContext.setValue( value );
+		}
+	};
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<Grid item xs={ 12 }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlFormLabel>{ __( 'Object position', 'elementor' ) }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+						<Select
+							size="tiny"
+							disabled={ stringPropContext.disabled }
+							value={ ( positionContext.value ? 'custom' : stringPropContext.value ) ?? '' }
+							onChange={ handlePositionChange }
+							fullWidth
+						>
+							{ availablePositionOptions.map( ( { label, value } ) => (
+								<MenuListItem key={ value } value={ value ?? '' }>
+									{ label }
+								</MenuListItem>
+							) ) }
+						</Select>
+					</Grid>
+				</Grid>
+			</Grid>
+			{ isCustom && (
+				<PropProvider { ...positionContext }>
+					<Grid item xs={ 12 }>
+						<Grid container spacing={ 1.5 }>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'x' }>
+									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<PropKeyProvider bind={ 'y' }>
+									<SizeControl startIcon={ <LetterYIcon fontSize={ 'tiny' } /> } />
+								</PropKeyProvider>
+							</Grid>
+						</Grid>
+					</Grid>
+				</PropProvider>
+			) }
+		</Grid>
+	);
+};