@elementor/editor-controls 0.10.0 → 0.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,7 +40,7 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.1",
+    "@elementor/editor-props": "0.9.2",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.3",
     "@elementor/icons": "1.31.0",

package/src/components/autocomplete.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { XIcon } from '@elementor/icons';
+import {
+	Autocomplete as AutocompleteBase,
+	type AutocompleteRenderInputParams,
+	Box,
+	IconButton,
+	InputAdornment,
+	TextField,
+} from '@elementor/ui';
+
+export type FlatOption = {
+	id: string;
+	label: string;
+	groupLabel?: never;
+};
+
+export type CategorizedOption = {
+	id: string;
+	label: string;
+	groupLabel: string;
+};
+
+export type Props = {
+	options: FlatOption[] | CategorizedOption[];
+	value?: number | string | null;
+	onOptionChange: ( newValue: number | null ) => void;
+	onTextChange?: ( newValue: string | null ) => void;
+	allowCustomValues?: boolean;
+	placeholder?: string;
+	minInputLength?: number;
+};
+
+export const Autocomplete = forwardRef( ( props: Props, ref ) => {
+	const {
+		options,
+		onOptionChange,
+		onTextChange,
+		allowCustomValues = false,
+		placeholder = '',
+		minInputLength = 2,
+		value = '',
+		...restProps
+	} = props;
+
+	const optionKeys = _factoryFilter( value, options, minInputLength ).map( ( { id } ) => id );
+	const allowClear = !! value;
+
+	// Prevents MUI warning when freeSolo/allowCustomValues is false
+	const muiWarningPreventer = allowCustomValues || !! value?.toString()?.length;
+
+	const isOptionEqualToValue = muiWarningPreventer ? undefined : () => true;
+
+	const isValueFromOptions = typeof value === 'number' && !! findMatchingOption( options, value );
+
+	return (
+		<AutocompleteBase
+			{ ...restProps }
+			ref={ ref }
+			forcePopupIcon={ false }
+			disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
+			freeSolo={ allowCustomValues }
+			value={ value?.toString() || '' }
+			size={ 'tiny' }
+			onChange={ ( _, newValue ) => onOptionChange( Number( newValue ) ) }
+			readOnly={ isValueFromOptions }
+			options={ optionKeys }
+			getOptionKey={ ( optionId ) => findMatchingOption( options, optionId )?.id || optionId }
+			getOptionLabel={ ( optionId ) => findMatchingOption( options, optionId )?.label || optionId.toString() }
+			groupBy={
+				isCategorizedOptionPool( options )
+					? ( optionId: string ) => findMatchingOption( options, optionId )?.groupLabel || optionId
+					: undefined
+			}
+			isOptionEqualToValue={ isOptionEqualToValue }
+			filterOptions={ () => optionKeys }
+			renderOption={ ( optionProps, optionId ) => (
+				<Box component="li" { ...optionProps } key={ optionProps.id }>
+					{ findMatchingOption( options, optionId )?.label ?? optionId }
+				</Box>
+			) }
+			renderInput={ ( params ) => (
+				<TextInput
+					params={ params }
+					handleChange={ ( newValue ) => onTextChange?.( newValue ) }
+					allowClear={ allowClear }
+					placeholder={ placeholder }
+					hasSelectedValue={ isValueFromOptions }
+				/>
+			) }
+		/>
+	);
+} );
+
+const TextInput = ( {
+	params,
+	allowClear,
+	placeholder,
+	handleChange,
+	hasSelectedValue,
+}: {
+	params: AutocompleteRenderInputParams;
+	allowClear: boolean;
+	handleChange: ( newValue: string | null ) => void;
+	placeholder: string;
+	hasSelectedValue: boolean;
+} ) => {
+	const onChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		handleChange( event.target.value );
+	};
+
+	return (
+		<TextField
+			{ ...params }
+			placeholder={ placeholder }
+			onChange={ onChange }
+			sx={ {
+				'& .MuiInputBase-input': {
+					cursor: hasSelectedValue ? 'default' : undefined,
+				},
+			} }
+			InputProps={ {
+				...params.InputProps,
+				endAdornment: <ClearButton params={ params } allowClear={ allowClear } handleChange={ handleChange } />,
+			} }
+		/>
+	);
+};
+
+const ClearButton = ( {
+	allowClear,
+	handleChange,
+	params,
+}: {
+	params: AutocompleteRenderInputParams;
+	allowClear: boolean;
+	handleChange: ( newValue: string | null ) => void;
+} ) => (
+	<InputAdornment position="end">
+		{ allowClear && (
+			<IconButton size={ params.size } onClick={ () => handleChange( null ) } sx={ { cursor: 'pointer' } }>
+				<XIcon fontSize={ params.size } />
+			</IconButton>
+		) }
+	</InputAdornment>
+);
+
+export function findMatchingOption(
+	options: FlatOption[] | CategorizedOption[],
+	optionId: string | number | null = null
+) {
+	const formattedOption = ( optionId || '' ).toString();
+
+	return options.find( ( { id } ) => formattedOption === id.toString() );
+}
+
+export function isCategorizedOptionPool( options: FlatOption[] | CategorizedOption[] ): options is CategorizedOption[] {
+	return options.every( ( option ) => 'groupLabel' in option );
+}
+function _factoryFilter< T extends FlatOption[] | CategorizedOption[] >(
+	newValue: string | number | null,
+	options: T,
+	minInputLength: number
+): T {
+	if ( null === newValue ) {
+		return options;
+	}
+
+	const formattedValue = String( newValue || '' )?.toLowerCase();
+
+	if ( formattedValue.length < minInputLength ) {
+		return new Array( 0 ) as T;
+	}
+
+	return options.filter(
+		( option ) =>
+			String( option.id ).toLowerCase().includes( formattedValue ) ||
+			option.label.toLowerCase().includes( formattedValue )
+	) as T;
+}

package/src/components/popover-content.tsx

@@ -0,0 +1,15 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+type PopoverContentProps = PropsWithChildren< {
+	alignItems?: 'center';
+	gap?: number;
+	p?: 1.5 | 2 | 2.5;
+} >;
+
+export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, children } ) => (
+	<Stack alignItems={ alignItems } gap={ gap } p={ p }>
+		{ children }
+	</Stack>
+);

package/src/components/popover-grid-container.tsx

@@ -0,0 +1,20 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+
+type PopoverGridContainerProps = PropsWithChildren< {
+	gap?: number;
+	alignItems?: React.ComponentProps< typeof Grid >[ 'alignItems' ];
+	flexWrap?: React.ComponentProps< typeof Grid >[ 'flexWrap' ];
+} >;
+
+export const PopoverGridContainer: FC< PopoverGridContainerProps > = ( {
+	gap = 1.5,
+	alignItems = 'center',
+	flexWrap = 'nowrap',
+	children,
+} ) => (
+	<Grid container gap={ gap } alignItems={ alignItems } flexWrap={ flexWrap }>
+		{ children }
+	</Grid>
+);

package/src/components/repeater.tsx

@@ -16,6 +16,8 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { SectionContent } from './section-content';
+
 const SIZE = 'tiny';
 
 type AnchorEl = HTMLElement | null;
@@ -86,8 +88,8 @@ export const Repeater = < T, >( {
 	};
 
 	return (
-		<Stack>
-			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { pb: 1 } }>
+		<SectionContent>
+			<Stack direction="row" justifyContent="space-between" alignItems="center">
 				<Typography component="label" variant="caption" color="text.secondary">
 					{ label }
 				</Typography>
@@ -95,7 +97,7 @@ export const Repeater = < T, >( {
 					<PlusIcon fontSize={ SIZE } />
 				</IconButton>
 			</Stack>
-			<Stack gap={ 1 }>
+			<Stack gap={ 1 } sx={ { '&:empty': { display: 'none' } } }>
 				{ repeaterValues.map( ( value, index ) => (
 					<RepeaterItem
 						key={ index }
@@ -111,7 +113,7 @@ export const Repeater = < T, >( {
 					</RepeaterItem>
 				) ) }
 			</Stack>
-		</Stack>
+		</SectionContent>
 	);
 };
 

package/src/components/section-content.tsx

@@ -0,0 +1,16 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+type SectionContentProps = PropsWithChildren< {
+	gap?: number;
+	sx?: {
+		pt?: number;
+	};
+} >;
+
+export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => (
+	<Stack gap={ gap } sx={ { ...sx } }>
+		{ children }
+	</Stack>
+);

package/src/controls/background-control/background-control.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { backgroundPropTypeUtil } from '@elementor/editor-props';
-import { Grid, Stack } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
 import { ControlLabel } from '../../components/control-label';
+import { SectionContent } from '../../components/section-content';
 import { createControl } from '../../create-control';
 import { ColorControl } from '../color-control';
 import { BackgroundOverlayRepeaterControl } from './background-overlay/background-overlay-repeater-control';
@@ -14,7 +15,7 @@ export const BackgroundControl = createControl( () => {
 
 	return (
 		<PropProvider { ...propContext }>
-			<Stack gap={ 1.5 }>
+			<SectionContent>
 				<PropKeyProvider bind="background-overlay">
 					<BackgroundOverlayRepeaterControl />
 				</PropKeyProvider>
@@ -28,7 +29,7 @@ export const BackgroundControl = createControl( () => {
 						</Grid>
 					</Grid>
 				</PropKeyProvider>
-			</Stack>
+			</SectionContent>
 		</PropProvider>
 	);
 } );

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { ControlLabel } from '../../../../components/control-label';
 import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
+import { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { ToggleControl } from '../../../toggle-control';
 
 type Attachment = 'fixed' | 'scroll';
@@ -26,13 +27,13 @@ const attachmentControlOptions: ToggleButtonGroupItem< Attachment >[] = [
 
 export const BackgroundImageOverlayAttachment = () => {
 	return (
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+		<PopoverGridContainer>
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Attachment', 'elementor' ) }</ControlLabel>
 			</Grid>
-			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 				<ToggleControl options={ attachmentControlOptions } />
 			</Grid>
-		</Grid>
+		</PopoverGridContainer>
 	);
 };

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../../bound-prop-context';
 import { ControlLabel } from '../../../../components/control-label';
+import { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { SizeControl } from '../../../size-control';
 
 type Positions =
@@ -21,15 +22,15 @@ type Positions =
 	| 'custom';
 
 const backgroundPositionOptions = [
-	{ 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' },
+	{ 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' },
 	{ label: __( 'Custom', 'elementor' ), value: 'custom' },
 ];
 
@@ -50,13 +51,13 @@ export const BackgroundImageOverlayPosition = () => {
 	};
 
 	return (
-		<Grid container spacing={ 2 }>
+		<Grid container spacing={ 1.5 }>
 			<Grid item xs={ 12 }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<PopoverGridContainer>
 					<Grid item xs={ 6 }>
 						<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
 					</Grid>
-					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end', overflow: 'hidden' } }>
 						<Select
 							size="tiny"
 							value={ ( backgroundImageOffsetContext.value ? 'custom' : stringPropContext.value ) ?? '' }
@@ -70,12 +71,12 @@ export const BackgroundImageOverlayPosition = () => {
 							) ) }
 						</Select>
 					</Grid>
-				</Grid>
+				</PopoverGridContainer>
 			</Grid>
 			{ isCustom ? (
 				<PropProvider { ...backgroundImageOffsetContext }>
 					<Grid item xs={ 12 }>
-						<Grid container spacing={ 2 }>
+						<Grid container spacing={ 1.5 }>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'x' }>
 									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 import { ControlLabel } from '../../../../components/control-label';
 import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
+import { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { ToggleControl } from '../../../toggle-control';
 
 type Repeaters = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
@@ -38,13 +39,13 @@ const repeatControlOptions: ToggleButtonGroupItem< Repeaters >[] = [
 
 export const BackgroundImageOverlayRepeat = () => {
 	return (
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+		<PopoverGridContainer>
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Repeat', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
 				<ToggleControl options={ repeatControlOptions } />
 			</Grid>
-		</Grid>
+		</PopoverGridContainer>
 	);
 };

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -17,6 +17,7 @@ import {
 	ControlToggleButtonGroup,
 	type ToggleButtonGroupItem,
 } from '../../../../components/control-toggle-button-group';
+import { PopoverGridContainer } from '../../../../components/popover-grid-container';
 import { SizeControl } from '../../../size-control';
 
 type Sizes = 'auto' | 'cover' | 'contain' | 'custom';
@@ -65,7 +66,7 @@ export const BackgroundImageOverlaySize = () => {
 	return (
 		<Grid container spacing={ 1.5 }>
 			<Grid item xs={ 12 }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<PopoverGridContainer>
 					<Grid item xs={ 6 }>
 						<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
 					</Grid>
@@ -79,12 +80,12 @@ export const BackgroundImageOverlaySize = () => {
 							onChange={ handleSizeChange }
 						/>
 					</Grid>
-				</Grid>
+				</PopoverGridContainer>
 			</Grid>
 			{ isCustom ? (
 				<PropProvider { ...backgroundImageScaleContext }>
 					<Grid item xs={ 12 }>
-						<Grid container spacing={ 2 }>
+						<PopoverGridContainer>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'width' }>
 									<SizeControl startIcon={ <ArrowsMoveHorizontalIcon fontSize={ 'tiny' } /> } />
@@ -95,7 +96,7 @@ export const BackgroundImageOverlaySize = () => {
 									<SizeControl startIcon={ <ArrowsMoveVerticalIcon fontSize={ 'tiny' } /> } />
 								</PropKeyProvider>
 							</Grid>
-						</Grid>
+						</PopoverGridContainer>
 					</Grid>
 				</PropProvider>
 			) : null }

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -6,11 +6,12 @@ import {
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
+import { Box, CardMedia, Grid, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { PopoverContent } from '../../../components/popover-content';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
 import { env } from '../../../env';
@@ -103,9 +104,9 @@ const Content = () => {
 				</Tabs>
 			</Box>
 			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'image' ) }>
-				<Stack gap={ 1.5 }>
+				<PopoverContent>
 					<ImageOverlayContent />
-				</Stack>
+				</PopoverContent>
 			</TabPanel>
 			<TabPanel { ...getTabPanelProps( 'color' ) } sx={ { p: 1.5 } }>
 				<Grid container spacing={ 1 } alignItems="center">

package/src/controls/box-shadow-repeater-control.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
-import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
+import { Grid, Typography, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { PopoverContent } from '../components/popover-content';
+import { PopoverGridContainer } from '../components/popover-grid-container';
 import { Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
@@ -47,8 +49,8 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
-			<Stack gap={ 1.5 } sx={ { p: 1.5 } }>
-				<Grid container gap={ 2 } flexWrap="nowrap">
+			<PopoverContent p={ 1.5 }>
+				<PopoverGridContainer>
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
 						<ColorControl
 							slotProps={ {
@@ -74,31 +76,31 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 							] }
 						/>
 					</Control>
-				</Grid>
-				<Grid container gap={ 2 } flexWrap="nowrap">
+				</PopoverGridContainer>
+				<PopoverGridContainer>
 					<Control bind="hOffset" label={ __( 'Horizontal', 'elementor' ) }>
 						<SizeControl />
 					</Control>
 					<Control bind="vOffset" label={ __( 'Vertical', 'elementor' ) }>
 						<SizeControl />
 					</Control>
-				</Grid>
-				<Grid container gap={ 2 } flexWrap="nowrap">
+				</PopoverGridContainer>
+				<PopoverGridContainer>
 					<Control bind="blur" label={ __( 'Blur', 'elementor' ) }>
 						<SizeControl />
 					</Control>
 					<Control bind="spread" label={ __( 'Spread', 'elementor' ) }>
 						<SizeControl />
 					</Control>
-				</Grid>
-			</Stack>
+				</PopoverGridContainer>
+			</PopoverContent>
 		</PropProvider>
 	);
 };
 
 const Control = ( { label, bind, children }: { bind: string; label: string; children: React.ReactNode } ) => (
 	<PropKeyProvider bind={ bind }>
-		<Grid item xs={ 6 }>
+		<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 			<Grid container gap={ 1 } alignItems="center">
 				<Grid item xs={ 12 }>
 					<Typography component="label" variant="caption" color="text.secondary">

package/src/controls/equal-unequal-sizes-control.tsx

@@ -6,6 +6,8 @@ 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 { SizeControl } from './size-control';
 
 type MultiSizePropValue = Record< PropKey, SizePropValue >;
@@ -127,20 +129,20 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
-					paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } },
+					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>
 				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
-					<Stack gap={ 1.5 }>
-						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<PopoverContent p={ 1.5 }>
+						<PopoverGridContainer>
 							<MultiSizeValueControl item={ items[ 0 ] } />
 							<MultiSizeValueControl item={ items[ 1 ] } />
-						</Grid>
-						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						</PopoverGridContainer>
+						<PopoverGridContainer>
 							<MultiSizeValueControl item={ items[ 3 ] } />
 							<MultiSizeValueControl item={ items[ 2 ] } />
-						</Grid>
-					</Stack>
+						</PopoverGridContainer>
+					</PopoverContent>
 				</PropProvider>
 			</Popover>
 		</>

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

@@ -99,7 +99,9 @@ export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
 							<MenuList role="listbox" tabIndex={ 0 }>
 								{ filteredFontFamilies.map( ( [ category, items ], index ) => (
 									<Fragment key={ index }>
-										<ListSubheader sx={ { typography: 'caption', color: 'text.tertiary' } }>
+										<ListSubheader
+											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
+										>
 											{ category }
 										</ListSubheader>
 										{ items.map( ( item ) => {
@@ -115,7 +117,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies } ) => {
 														setFontFamily( item );
 														handleClose();
 													} }
-													sx={ { typography: 'caption' } }
+													sx={ { px: 1.5, typography: 'caption' } }
 													style={ { fontFamily: item } }
 												>
 													{ item }

package/src/controls/gap-control.tsx

@@ -40,7 +40,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
-					aria-label={ __( 'Link Inputs', 'elementor' ) }
+					aria-label={ __( 'Link inputs', 'elementor' ) }
 					size={ 'tiny' }
 					value={ 'check' }
 					selected={ isLinked }

package/src/controls/image-control.tsx

@@ -26,11 +26,11 @@ export const ImageControl = createControl(
 						<ImageMediaControl />
 					</PropKeyProvider>
 					<PropKeyProvider bind={ 'size' }>
-						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid container gap={ 1.5 } alignItems="center" flexWrap="nowrap">
 							<Grid item xs={ 6 }>
 								<ControlLabel> { resolutionLabel } </ControlLabel>
 							</Grid>
-							<Grid item xs={ 6 }>
+							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 								<SelectControl options={ sizes } />
 							</Grid>
 						</Grid>