@elementor/editor-controls 0.10.0 → 0.11.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.11.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/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx

@@ -30,7 +30,7 @@ export const BackgroundImageOverlayAttachment = () => {
 			<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>

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

@@ -21,15 +21,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' },
 ];
 
@@ -56,7 +56,7 @@ export const BackgroundImageOverlayPosition = () => {
 					<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 ) ?? '' }

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

@@ -98,7 +98,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 
 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/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

@@ -30,7 +30,7 @@ export const ImageControl = createControl(
 							<Grid item xs={ 6 }>
 								<ControlLabel> { resolutionLabel } </ControlLabel>
 							</Grid>
-							<Grid item xs={ 6 }>
+							<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 								<SelectControl options={ sizes } />
 							</Grid>
 						</Grid>

package/src/controls/image-media-control.tsx

@@ -57,7 +57,7 @@ export const ImageMediaControl = createControl( ( props: ImageMediaControlProps
 							variant="outlined"
 							onClick={ () => open( { mode: 'browse' } ) }
 						>
-							{ __( 'Select Image', 'elementor' ) }
+							{ __( 'Select image', 'elementor' ) }
 						</Button>
 						<Button
 							size="tiny"
@@ -66,7 +66,7 @@ export const ImageMediaControl = createControl( ( props: ImageMediaControlProps
 							startIcon={ <UploadIcon /> }
 							onClick={ () => open( { mode: 'upload' } ) }
 						>
-							{ __( 'Upload Image', 'elementor' ) }
+							{ __( 'Upload image', 'elementor' ) }
 						</Button>
 					</Stack>
 				</CardOverlay>

package/src/controls/link-control.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, numberPropTypeUtil } from '@elementor/editor-props';
+import { useMemo, useState } from 'react';
+import {
+	booleanPropTypeUtil,
+	linkPropTypeUtil,
+	type LinkPropValue,
+	numberPropTypeUtil,
+	stringPropTypeUtil,
+	urlPropTypeUtil,
+} from '@elementor/editor-props';
 import { type HttpResponse, httpService } from '@elementor/http';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
@@ -8,19 +15,20 @@ import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/u
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
-import { ControlLabel } from '../components/control-label';
-import { createControl } from '../create-control';
 import {
-	AutocompleteControl,
+	Autocomplete,
 	type CategorizedOption,
 	findMatchingOption,
 	type FlatOption,
 	isCategorizedOptionPool,
-} from './autocomplete-control';
+} from '../components/autocomplete';
+import { ControlLabel } from '../components/control-label';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 type Props = {
 	queryOptions: {
-		requestParams: object;
+		requestParams: Record< string, unknown >;
 		endpoint: string;
 	};
 	allowCustomValues?: boolean;
@@ -29,7 +37,7 @@ type Props = {
 };
 
 type LinkSessionValue = {
-	value?: LinkPropValue[ 'value' ];
+	value?: LinkPropValue[ 'value' ] | null;
 	meta?: {
 		isEnabled?: boolean;
 	};
@@ -42,6 +50,7 @@ const SIZE = 'tiny';
 export const LinkControl = createControl( ( props: Props ) => {
 	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
 	const [ linkSessionValue, setLinkSessionValue ] = useSessionStorage< LinkSessionValue >( path.join( '/' ) );
+	const [ isEnabled, setIsEnabled ] = useState( !! value );
 
 	const {
 		allowCustomValues,
@@ -55,38 +64,39 @@ export const LinkControl = createControl( ( props: Props ) => {
 	);
 
 	const onEnabledChange = () => {
-		const { meta } = linkSessionValue ?? {};
-		const { isEnabled } = meta ?? {};
-
-		setValue( isEnabled ? null : linkSessionValue?.value ?? { destination: null } );
+		setIsEnabled( ( prevState ) => ! prevState );
+		setValue( isEnabled ? null : linkSessionValue?.value ?? null );
 		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
 	};
 
 	const onOptionChange = ( newValue: number | null ) => {
-		const valueToSave = {
-			...value,
-			destination: { $$type: 'number', value: newValue },
-			label: {
-				$$type: 'string',
-				value: findMatchingOption( options, newValue?.toString() )?.label || '',
-			},
-		};
+		const valueToSave: LinkPropValue[ 'value' ] | null = newValue
+			? {
+					...value,
+					destination: numberPropTypeUtil.create( newValue ),
+					label: stringPropTypeUtil.create( findMatchingOption( options, newValue )?.label || null ),
+			  }
+			: null;
 
 		onSaveNewValue( valueToSave );
 	};
 
 	const onTextChange = ( newValue: string | null ) => {
-		const valueToSave = {
-			...value,
-			destination: { $$type: 'url', value: newValue },
-			label: null,
-		};
+		newValue = newValue?.trim() || '';
+
+		const valueToSave: LinkPropValue[ 'value' ] | null = newValue
+			? {
+					...value,
+					destination: urlPropTypeUtil.create( newValue ),
+					label: null,
+			  }
+			: null;
 
 		onSaveNewValue( valueToSave );
 		updateOptions( newValue );
 	};
 
-	const onSaveNewValue = ( newValue: typeof value ) => {
+	const onSaveNewValue = ( newValue: LinkPropValue[ 'value' ] | null ) => {
 		setValue( newValue );
 		setLinkSessionValue( { ...linkSessionValue, value: newValue } );
 	};
@@ -98,17 +108,20 @@ export const LinkControl = createControl( ( props: Props ) => {
 			return;
 		}
 
-		debounceFetch( newValue )();
+		debounceFetch( { ...requestParams, term: newValue } );
 	};
 
-	const debounceFetch = ( newValue: string ) =>
-		debounce(
-			() =>
-				fetchOptions( endpoint, { ...requestParams, term: newValue } ).then( ( newOptions ) => {
-					setOptions( formatOptions( newOptions ) );
-				} ),
-			400
-		);
+	const debounceFetch = useMemo(
+		() =>
+			debounce(
+				( params: FetchOptionsParams ) =>
+					fetchOptions( endpoint, params ).then( ( newOptions ) => {
+						setOptions( formatOptions( newOptions ) );
+					} ),
+				400
+			),
+		[ endpoint ]
+	);
 
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
@@ -123,24 +136,25 @@ export const LinkControl = createControl( ( props: Props ) => {
 				>
 					<ControlLabel>{ __( 'Link', 'elementor' ) }</ControlLabel>
 					<ToggleIconControl
-						enabled={ linkSessionValue?.meta?.isEnabled ?? false }
+						enabled={ isEnabled }
 						onIconClick={ onEnabledChange }
-						label={ __( 'Toggle Link', 'elementor' ) }
+						label={ __( 'Toggle link', 'elementor' ) }
 					/>
 				</Stack>
-				<Collapse in={ linkSessionValue?.meta?.isEnabled } timeout="auto" unmountOnExit>
+				<Collapse in={ isEnabled } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
 						<PropKeyProvider bind={ 'destination' }>
-							<AutocompleteControl
-								options={ options }
-								allowCustomValues={ allowCustomValues }
-								placeholder={ placeholder }
-								optionRestrictedPropTypeUtil={ numberPropTypeUtil }
-								onOptionChangeCallback={ onOptionChange }
-								onTextChangeCallback={ onTextChange }
-								minInputLength={ minInputLength }
-								customValue={ value?.destination?.value?.toString() }
-							/>
+							<ControlActions>
+								<Autocomplete
+									options={ options }
+									allowCustomValues={ allowCustomValues }
+									placeholder={ placeholder }
+									value={ value?.destination?.value }
+									onOptionChange={ onOptionChange }
+									onTextChange={ onTextChange }
+									minInputLength={ minInputLength }
+								/>
+							</ControlActions>
 						</PropKeyProvider>
 						<PropKeyProvider bind={ 'isTargetBlank' }>
 							<SwitchControl />
@@ -186,7 +200,9 @@ const SwitchControl = () => {
 	);
 };
 
-async function fetchOptions( ajaxUrl: string, params: object ) {
+type FetchOptionsParams = Record< string, unknown > & { term: string };
+
+async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
 	if ( ! params || ! ajaxUrl ) {
 		return [];
 	}

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

@@ -38,7 +38,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 			<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/select-control.tsx

@@ -23,7 +23,14 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 
 	return (
 		<ControlActions>
-			<Select displayEmpty size="tiny" value={ value ?? '' } onChange={ handleChange } fullWidth>
+			<Select
+				sx={ { overflow: 'hidden' } }
+				displayEmpty
+				size="tiny"
+				value={ value ?? '' }
+				onChange={ handleChange }
+				fullWidth
+			>
 				{ options.map( ( { label, ...props } ) => (
 					<MenuItem key={ props.value } { ...props } value={ props.value ?? '' }>
 						{ label }

package/src/controls/stroke-control.tsx

@@ -23,10 +23,10 @@ export const StrokeControl = createControl( () => {
 	return (
 		<PropProvider { ...propContext }>
 			<Stack gap={ 1.5 }>
-				<Control bind="width" label={ __( 'Stroke Width', 'elementor' ) }>
+				<Control bind="width" label={ __( 'Stroke width', 'elementor' ) }>
 					<SizeControl units={ units } />
 				</Control>
-				<Control bind="color" label={ __( 'Stroke Color', 'elementor' ) }>
+				<Control bind="color" label={ __( 'Stroke color', 'elementor' ) }>
 					<ColorControl />
 				</Control>
 			</Stack>

package/src/index.ts

@@ -1,5 +1,4 @@
 // control types
-export { AutocompleteControl } from './controls/autocomplete-control';
 export { ImageControl } from './controls/image-control';
 export { TextControl } from './controls/text-control';
 export { TextAreaControl } from './controls/text-area-control';