@elementor/editor-controls 0.9.0 → 0.11.0

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';

package/src/controls/autocomplete-control.tsx

@@ -1,195 +0,0 @@
-import * as React from 'react';
-import { type PropTypeUtil } from '@elementor/editor-props';
-import { XIcon } from '@elementor/icons';
-import {
-	Autocomplete,
-	type AutocompleteRenderInputParams,
-	Box,
-	IconButton,
-	InputAdornment,
-	TextField,
-} from '@elementor/ui';
-
-import { useBoundProp } from '../bound-prop-context';
-import { createControl } from '../create-control';
-
-export type FlatOption = {
-	id: string;
-	label: string;
-	groupLabel?: never;
-};
-
-export type CategorizedOption = {
-	id: string;
-	label: string;
-	groupLabel: string;
-};
-
-export type Props< TOptionKey extends string, TCustomKey extends string = '' > = {
-	options: FlatOption[] | CategorizedOption[];
-	optionRestrictedPropTypeUtil: PropTypeUtil< TOptionKey, number | null >;
-	onOptionChangeCallback?: ( newValue: number | null ) => void;
-	onTextChangeCallback?: ( newValue: string | null ) => void;
-	allowCustomValues?: boolean;
-	placeholder?: string;
-	minInputLength?: number;
-	customValue?: TCustomKey;
-};
-
-export const AutocompleteControl = createControl(
-	< TOptionKey extends string, TCustomKey extends string >( props: Props< TOptionKey, TCustomKey > ) => {
-		const {
-			options,
-			optionRestrictedPropTypeUtil,
-			onOptionChangeCallback,
-			onTextChangeCallback,
-			allowCustomValues = false,
-			placeholder = '',
-			minInputLength = 2,
-			customValue,
-		} = props;
-
-		const { value: selectableValue, setValue: setSelectableValue } = useBoundProp( optionRestrictedPropTypeUtil );
-
-		const value = selectableValue || customValue || '';
-
-		const optionKeys = _factoryFilter( selectableValue || customValue || null, options, minInputLength ).map(
-			( { id } ) => id
-		);
-		const allowClear = !! value;
-
-		// Prevents MUI warning when freeSolo/allowCustomValues is false
-		const muiWarningPreventer = allowCustomValues || !! value?.toString()?.length;
-		const isOptionEqualToValue = () => {
-			return muiWarningPreventer ? undefined : () => true;
-		};
-		const hasSelectedValue = !! findMatchingOption( options, selectableValue?.toString() );
-
-		const onOptionChange = ( newValue: number | null ) => {
-			setSelectableValue( newValue );
-			onOptionChangeCallback?.( newValue );
-		};
-
-		const onTextChange = ( newValue: string | null ) => {
-			onTextChangeCallback?.( newValue );
-		};
-
-		return (
-			<Autocomplete
-				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={ hasSelectedValue }
-				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={ onTextChange }
-						allowClear={ allowClear }
-						placeholder={ placeholder }
-						hasSelectedValue={ hasSelectedValue }
-					/>
-				) }
-			/>
-		);
-	}
-);
-
-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 | null = null ) {
-	return options.find( ( { id } ) => optionId?.toString() === 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;
-}