@elementor/editor-controls 0.10.0 → 0.11.0

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