@elementor/editor-controls 1.1.0 → 1.3.0

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

@@ -15,31 +15,46 @@ export type FontCategory = {
 
 type FontFamilyControlProps = {
 	fontFamilies: FontCategory[];
+	sectionWidth: number;
 };
 
 const SIZE = 'tiny';
 
-export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
-	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
+export const FontFamilyControl = createControl( ( { fontFamilies, sectionWidth }: FontFamilyControlProps ) => {
+	const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
 
+	const isShowingPlaceholder = ! fontFamily && placeholder;
+
 	return (
 		<>
 			<ControlActions>
 				<UnstableTag
 					variant="outlined"
-					label={ fontFamily }
+					label={ fontFamily || placeholder }
 					endIcon={ <ChevronDownIcon fontSize={ SIZE } /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
 					disabled={ disabled }
+					sx={
+						isShowingPlaceholder
+							? {
+									'& .MuiTag-label': {
+										color: ( theme ) => theme.palette.text.tertiary,
+									},
+									textTransform: 'capitalize',
+							  }
+							: undefined
+					}
 				/>
 			</ControlActions>
 			<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 +62,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

@@ -13,40 +13,56 @@ 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' ];
-
-		return (
-			<PropProvider { ...propContext }>
+	let componentToRender;
+	switch ( showMode ) {
+		case 'media':
+			componentToRender = <ImageSrcControl />;
+			break;
+		case 'sizes':
+			componentToRender = <ImageSizeControl sizes={ sizes } />;
+			break;
+		case 'all':
+		default:
+			componentToRender = (
 				<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 }
+					<ControlFormLabel>{ __( 'Image', 'elementor' ) }</ControlFormLabel>
+					<ImageSrcControl />
+					<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlFormLabel>{ __( 'Resolution', 'elementor' ) }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
+							<ImageSizeControl sizes={ sizes } />
+						</Grid>
+					</Grid>
 				</Stack>
-			</PropProvider>
-		);
+			);
 	}
-);
+
+	return <PropProvider { ...propContext }>{ componentToRender }</PropProvider>;
+} );
+
+const ImageSrcControl = () => {
+	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
+	const mediaTypes: MediaType[] = allowSvgUpload ? [ 'image', 'svg' ] : [ 'image' ];
+
+	return (
+		<PropKeyProvider bind={ 'src' }>
+			<ImageMediaControl mediaTypes={ mediaTypes } />
+		</PropKeyProvider>
+	);
+};
+
+const ImageSizeControl = ( { sizes }: { sizes: ImageControlProps[ 'sizes' ] } ) => {
+	return (
+		<PropKeyProvider bind={ 'size' }>
+			<SelectControl options={ sizes } />
+		</PropKeyProvider>
+	);
+};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ChangeEvent, useMemo, useState } from 'react';
 import { keyValuePropTypeUtil } from '@elementor/editor-props';
-import { FormHelperText, FormLabel, Grid, type SxProps, TextField, type Theme } from '@elementor/ui';
+import { FormHelperText, FormLabel, Grid, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -13,7 +13,6 @@ type FieldType = 'key' | 'value';
 type KeyValueControlProps = {
 	keyName?: string;
 	valueName?: string;
-	sx?: SxProps< Theme >;
 	regexKey?: string;
 	regexValue?: string;
 	validationErrorMessage?: string;
@@ -23,12 +22,15 @@ 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 keyValue = value?.key?.value || '';
-	const valueValue = value?.value?.value || '';
-
 	const [ keyRegex, valueRegex, errMsg ] = useMemo< [ RegExp | undefined, RegExp | undefined, string ] >(
 		() => [
 			props.regexKey ? new RegExp( props.regexKey ) : undefined,
@@ -38,28 +40,44 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 		[ props.regexKey, props.regexValue, props.validationErrorMessage ]
 	);
 
-	const validate = ( newValue: string, FieldType: string ): void => {
-		if ( FieldType === 'key' && keyRegex ) {
+	const validate = ( newValue: string, fieldType: string ): boolean => {
+		if ( fieldType === 'key' && keyRegex ) {
 			const isValid = keyRegex.test( newValue );
 			setKeyError( isValid ? null : errMsg );
-		} else if ( FieldType === 'value' && valueRegex ) {
+			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;
 
-		validate( newValue, fieldType );
+		setSessionState( ( prev ) => ( {
+			...prev,
+			[ fieldType ]: newValue,
+		} ) );
 
-		setValue( {
-			...value,
-			[ fieldType ]: {
-				value: newValue,
-				$$type: 'string',
-			},
-		} );
+		if ( validate( newValue, fieldType ) ) {
+			setValue( {
+				...value,
+				[ fieldType ]: {
+					value: newValue,
+					$$type: 'string',
+				},
+			} );
+		} else {
+			setValue( {
+				...value,
+				[ fieldType ]: {
+					value: '',
+					$$type: 'string',
+				},
+			} );
+		}
 	};
 
 	const isKeyInvalid = keyError !== null;
@@ -67,14 +85,16 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 
 	return (
 		<ControlActions>
-			<Grid container gap={ 1.5 } p={ 1.5 } sx={ props.sx }>
+			<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={ keyValue }
+						value={ sessionState.key }
 						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
 						error={ isKeyInvalid }
 					/>
@@ -86,7 +106,7 @@ export const KeyValueControl = createControl( ( props: KeyValueControlProps = {}
 						sx={ { pt: 1 } }
 						size="tiny"
 						fullWidth
-						value={ valueValue }
+						value={ sessionState.value }
 						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
 						disabled={ isKeyInvalid }
 						error={ isValueInvalid }

package/src/controls/link-control.tsx

@@ -10,6 +10,7 @@ import {
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
 import { InfoTipCard } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 import { AlertTriangleIcon, MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
@@ -29,6 +30,7 @@ import { ControlFormLabel } from '../components/control-form-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { type ControlProps } from '../utils/types';
+import { SwitchControl } from './switch-control';
 
 type Props = ControlProps< {
 	queryOptions: {
@@ -38,6 +40,7 @@ type Props = ControlProps< {
 	allowCustomValues?: boolean;
 	minInputLength?: number;
 	placeholder?: string;
+	label?: string;
 } >;
 
 type LinkSessionValue = {
@@ -66,6 +69,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		placeholder,
 		minInputLength = 2,
 		context: { elementId },
+		label = __( 'Link', 'elementor' ),
 	} = props || {};
 
 	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
@@ -163,7 +167,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 }
@@ -189,7 +193,14 @@ export const LinkControl = createControl( ( props: Props ) => {
 							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
-							<SwitchControl disabled={ propContext.disabled || ! value } />
+							<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
+								<Grid item>
+									<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
+								</Grid>
+								<Grid item sx={ { marginInlineEnd: -1 } }>
+									<SwitchControlComponent disabled={ propContext.disabled || ! value } />
+								</Grid>
+							</Grid>
 						</PropKeyProvider>
 					</Stack>
 				</Collapse>
@@ -213,31 +224,27 @@ const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIcon
 	);
 };
 
-// @TODO Should be refactored in ED-16323
-const SwitchControl = ( { disabled }: { disabled: boolean } ) => {
-	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
+const SwitchControlComponent = ( { disabled }: { disabled: boolean } ) => {
+	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+
+	if ( isVersion331Active ) {
+		return <SwitchControl />;
+	}
 
 	const onClick = () => {
 		setValue( ! value );
 	};
 
-	const inputProps = disabled
-		? {
-				style: {
-					opacity: 0,
-				},
-		  }
-		: {};
-
 	return (
-		<Grid container alignItems="center" flexWrap="nowrap" justifyContent="space-between">
-			<Grid item>
-				<ControlFormLabel>{ __( 'Open in a new tab', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item sx={ { marginInlineEnd: -1 } }>
-				<Switch checked={ value } onClick={ onClick } disabled={ disabled } inputProps={ inputProps } />
-			</Grid>
-		</Grid>
+		<Switch
+			checked={ value ?? false }
+			onClick={ onClick }
+			disabled={ disabled }
+			inputProps={ {
+				...( disabled ? { style: { opacity: 0 } } : {} ),
+			} }
+		/>
 	);
 };
 

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,
@@ -68,7 +68,7 @@ export const LinkedDimensionsControl = createControl(
 				propType={ propType }
 				value={ dimensionsValue }
 				setValue={ setDimensionsValue }
-				disabled={ disabled }
+				isDisabled={ () => disabled }
 			>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					{ isUsingNestedProps ? (
@@ -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/repeatable-control.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { createArrayPropUtils, type PropKey } from '@elementor/editor-props';
-import { __ } from '@wordpress/i18n';
+import { Box } from '@elementor/ui';
 
+/* eslint-disable */
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { PopoverContent } from '../components/popover-content';
 import { PopoverGridContainer } from '../components/popover-grid-container';
@@ -16,13 +17,25 @@ import {
 
 type RepeatableControlProps = {
 	label: string;
+	repeaterLabel: string;
 	childControlConfig: ChildControlConfig;
 	showDuplicate?: boolean;
 	showToggle?: boolean;
+	initialValues?: object;
+	patternLabel?: string;
+	placeholder?: string;
 };
 
 export const RepeatableControl = createControl(
-	( { label, childControlConfig, showDuplicate, showToggle }: RepeatableControlProps ) => {
+	( {
+		repeaterLabel,
+		childControlConfig,
+		showDuplicate,
+		showToggle,
+		initialValues,
+		patternLabel,
+		placeholder,
+	}: RepeatableControlProps ) => {
 		const { propTypeUtil: childPropTypeUtil } = childControlConfig;
 
 		if ( ! childPropTypeUtil ) {
@@ -34,21 +47,32 @@ export const RepeatableControl = createControl(
 			[ childPropTypeUtil.key, childPropTypeUtil.schema ]
 		);
 
+		const contextValue = useMemo(
+			() => ({
+				...childControlConfig,
+				placeholder: placeholder || '',
+				patternLabel: patternLabel || '',
+			}),
+			[ childControlConfig, placeholder, patternLabel ]
+		);
+
 		const { propType, value, setValue } = useBoundProp( childArrayPropTypeUtil );
 
+
 		return (
 			<PropProvider propType={ propType } value={ value } setValue={ setValue }>
-				<RepeatableControlContext.Provider value={ childControlConfig }>
+				<RepeatableControlContext.Provider value={ contextValue }>
 					<Repeater
 						openOnAdd
 						values={ value ?? [] }
 						setValues={ setValue }
-						label={ label }
+						label={ repeaterLabel }
+						isSortable={ false }
 						itemSettings={ {
 							Icon: ItemIcon,
 							Label: ItemLabel,
 							Content: ItemContent,
-							initialValues: childPropTypeUtil.create( null ),
+							initialValues: childPropTypeUtil.create( initialValues || null ),
 						} }
 						showDuplicate={ showDuplicate }
 						showToggle={ showToggle }
@@ -82,8 +106,74 @@ const Content = () => {
 	);
 };
 
-const ItemLabel = () => {
-	const { label = __( 'Empty', 'elementor' ) } = useRepeatableControlContext();
+const interpolate = ( template: string, data: object ) => {
+	if ( ! data ) {
+		return template;
+	}
+
+	return new Function( ...Object.keys( data ), `return \`${ template }\`;` )( ...Object.values( data ) );
+};
+
+const getNestedValue = ( obj: any, path: string ) => {
+    return path.split( '.' ).reduce( ( current, key ) => current?.[key], obj);
+};
+
+const isEmptyValue = (val: unknown) => {
+    if ( typeof val === 'string' ) {
+        return val.trim() === '';
+    }
+
+    if ( Number.isNaN( val ) ) {
+        return true;
+    }
+
+    if ( Array.isArray( val ) ) {
+        return val.length === 0;
+    }
+
+    if ( typeof val === 'object' && val !== null && Object.keys( val ).length === 0 ) {
+        return true;
+    }
+
+    return false;
+};
+
+const shouldShowPlaceholder = ( pattern: string, data: unknown ): boolean => {
+	const propertyPaths = getAllProperties( pattern );
 
-	return <span>{ label }</span>;
+	const values = propertyPaths.map( path => getNestedValue( data, path ) );
+
+	if ( values.length === 0 ) {
+		return false;
+	}
+
+	if ( values.some( ( value ) => value === null || value === undefined ) ) {
+		return true;
+	}
+
+	if ( values.every( isEmptyValue ) ) {
+		return true;
+	}
+
+	return false;
 };
+
+const ItemLabel = ( { value }: { value: any } ) => {
+	const { placeholder, patternLabel } = useRepeatableControlContext();
+
+	const label = shouldShowPlaceholder( patternLabel, value ) ? placeholder : interpolate( patternLabel, value );
+
+	return (
+		<Box component="span" color="text.tertiary">
+			{ label }
+		</Box>
+	);
+};
+
+const getAllProperties = ( pattern: string ) => {
+	const properties = pattern.match(/\$\{([^}]+)\}/g)?.map(match =>
+		match.slice(2, -1)
+	) || [];
+
+	return properties;
+};

package/src/controls/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Select, type SelectChangeEvent } from '@elementor/ui';
+import { Select, type SelectChangeEvent, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,7 +13,7 @@ type Props = {
 };
 
 export const SelectControl = createControl( ( { options, onChange }: Props ) => {
-	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
@@ -28,6 +28,26 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				sx={ { overflow: 'hidden' } }
 				displayEmpty
 				size="tiny"
+				renderValue={ ( selectedValue: string | null ) => {
+					const findOptionByValue = ( searchValue: string | null ) =>
+						options.find( ( opt ) => opt.value === searchValue );
+
+					if ( ! selectedValue || selectedValue === '' ) {
+						if ( placeholder ) {
+							const placeholderOption = findOptionByValue( placeholder );
+							const displayText = placeholderOption?.label || placeholder;
+
+							return (
+								<Typography component="span" variant="caption" color="text.tertiary">
+									{ displayText }
+								</Typography>
+							);
+						}
+						return '';
+					}
+					const option = findOptionByValue( selectedValue );
+					return option?.label || selectedValue;
+				} }
 				value={ value ?? '' }
 				onChange={ handleChange }
 				disabled={ disabled }

package/src/controls/size-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useEffect, useState } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 import { sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { usePopupState } from '@elementor/ui';
@@ -23,7 +23,7 @@ type SizeControlProps = {
 	units?: Unit[];
 	extendedOptions?: ExtendedOption[];
 	disableCustom?: boolean;
-	anchorRef?: MutableRefObject< HTMLElement | undefined >;
+	anchorRef?: RefObject< HTMLDivElement | null >;
 	defaultUnit?: Unit;
 };
 
@@ -149,7 +149,7 @@ export const SizeControl = createControl( ( props: SizeControlProps ) => {
 			{ anchorRef?.current && (
 				<TextFieldPopover
 					popupState={ popupState }
-					anchorRef={ anchorRef as MutableRefObject< HTMLElement > }
+					anchorRef={ anchorRef }
 					restoreValue={ restoreValue }
 					value={ controlSize as string }
 					onChange={ handleSizeChange }