@elementor/editor-controls 4.2.0-839 → 4.2.0-841

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": "4.2.0-839",
+  "version": "4.2.0-841",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.2.0-839",
-    "@elementor/editor-elements": "4.2.0-839",
-    "@elementor/editor-props": "4.2.0-839",
-    "@elementor/editor-responsive": "4.2.0-839",
-    "@elementor/editor-ui": "4.2.0-839",
-    "@elementor/editor-v1-adapters": "4.2.0-839",
-    "@elementor/env": "4.2.0-839",
-    "@elementor/events": "4.2.0-839",
-    "@elementor/http-client": "4.2.0-839",
+    "@elementor/editor-current-user": "4.2.0-841",
+    "@elementor/editor-elements": "4.2.0-841",
+    "@elementor/editor-props": "4.2.0-841",
+    "@elementor/editor-responsive": "4.2.0-841",
+    "@elementor/editor-ui": "4.2.0-841",
+    "@elementor/editor-v1-adapters": "4.2.0-841",
+    "@elementor/env": "4.2.0-841",
+    "@elementor/events": "4.2.0-841",
+    "@elementor/http-client": "4.2.0-841",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.2.0-839",
-    "@elementor/query": "4.2.0-839",
-    "@elementor/session": "4.2.0-839",
+    "@elementor/locations": "4.2.0-841",
+    "@elementor/query": "4.2.0-841",
+    "@elementor/session": "4.2.0-841",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-839",
-    "@elementor/wp-media": "4.2.0-839",
+    "@elementor/utils": "4.2.0-841",
+    "@elementor/wp-media": "4.2.0-841",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/chips-list.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type AutocompleteRenderGetTagProps, Chip } from '@elementor/ui';
+
+const CHIP_SIZE = 'tiny' as const;
+
+export type ChipsListProps< Option > = {
+	getLabel: ( option: Option ) => string;
+	getTagProps: AutocompleteRenderGetTagProps;
+	values: Option[];
+};
+
+export function ChipsList< Option >( { getLabel, getTagProps, values }: ChipsListProps< Option > ) {
+	return (
+		<>
+			{ values.map( ( option, index ) => {
+				const { key, ...tagProps } = getTagProps( { index } );
+
+				return <Chip key={ key } label={ getLabel( option ) } size={ CHIP_SIZE } { ...tagProps } />;
+			} ) }
+		</>
+	);
+}

package/src/controls/chips-control.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { type SyntheticEvent } from 'react';
 import { stringArrayPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
-import { Autocomplete, Chip, TextField } from '@elementor/ui';
+import { Autocomplete, TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
+import { ChipsList } from '../components/chips-list';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
@@ -47,12 +48,13 @@ export const ChipsControl = createControl( ( { options }: ChipsControlProps ) =>
 				getOptionLabel={ ( option ) => option.label }
 				isOptionEqualToValue={ ( option, val ) => option.value === val.value }
 				renderInput={ ( params ) => <TextField { ...params } /> }
-				renderTags={ ( values, getTagProps ) =>
-					values.map( ( option, index ) => {
-						const { key, ...chipProps } = getTagProps( { index } );
-						return <Chip key={ key } size="tiny" label={ option.label } { ...chipProps } />;
-					} )
-				}
+				renderTags={ ( tagValues, getTagProps ) => (
+					<ChipsList
+						getLabel={ ( option ) => option.label }
+						getTagProps={ getTagProps }
+						values={ tagValues }
+					/>
+				) }
 			/>
 		</ControlActions>
 	);

package/src/controls/query-chips-control.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { type SyntheticEvent, useMemo } from 'react';
+import {
+	createArrayPropUtils,
+	numberPropTypeUtil,
+	queryPropTypeUtil,
+	type QueryPropValue,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
+import { Autocomplete, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { ChipsList } from '../components/chips-list';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { extractFlatOptionFromQueryValue, useQueryAutocomplete } from '../hooks/use-query-autocomplete';
+
+type QueryChipsControlProps = {
+	queryOptions: {
+		params: Record< string, unknown >;
+		url: string;
+	};
+	placeholder?: string;
+	minInputLength?: number;
+};
+
+type ChipOption = {
+	id: string;
+	label: string;
+};
+
+const queryArrayPropTypeUtil = createArrayPropUtils( queryPropTypeUtil.key, queryPropTypeUtil.schema );
+
+const SIZE = 'tiny';
+
+export const QueryChipsControl = createControl( ( props: QueryChipsControlProps ) => {
+	const { queryOptions, placeholder, minInputLength = 2 } = props;
+	const { value, setValue, disabled } = useBoundProp( queryArrayPropTypeUtil );
+
+	const selectedChips = useMemo< ChipOption[] >( () => extractChips( value ), [ value ] );
+
+	const excludeIds = useMemo(
+		() =>
+			selectedChips.map( ( chip ) => Number( chip.id ) ).filter( ( id ): id is number => Number.isFinite( id ) ),
+		[ selectedChips ]
+	);
+
+	const { options, updateOptions } = useQueryAutocomplete( {
+		url: queryOptions.url,
+		params: queryOptions.params,
+		minInputLength,
+		excludeIds,
+	} );
+
+	const handleChange = ( _: SyntheticEvent, newValue: ChipOption[] ) => {
+		setValue(
+			newValue.map( ( option ) =>
+				queryPropTypeUtil.create( {
+					id: numberPropTypeUtil.create( Number( option.id ) ),
+					label: stringPropTypeUtil.create( option.label ),
+				} )
+			)
+		);
+	};
+
+	const handleInputChange = ( _: SyntheticEvent, term: string ) => {
+		updateOptions( term || null );
+	};
+
+	return (
+		<ControlActions>
+			<Autocomplete
+				multiple
+				fullWidth
+				disableClearable
+				forcePopupIcon={ false }
+				disabled={ disabled }
+				size={ SIZE }
+				value={ selectedChips }
+				options={ options as ChipOption[] }
+				onChange={ handleChange }
+				onInputChange={ handleInputChange }
+				getOptionLabel={ ( option ) => option.label }
+				isOptionEqualToValue={ ( option, val ) => option.id === val.id }
+				filterOptions={ ( opts ) => opts }
+				renderTags={ ( tagValues, getTagProps ) => (
+					<ChipsList
+						getLabel={ ( option ) => option.label }
+						getTagProps={ getTagProps }
+						values={ tagValues }
+					/>
+				) }
+				renderInput={ ( params ) => (
+					<TextField { ...params } placeholder={ placeholder ?? __( 'Search', 'elementor' ) } />
+				) }
+			/>
+		</ControlActions>
+	);
+} );
+
+function extractChips( value: QueryPropValue[] | null | undefined ): ChipOption[] {
+	if ( ! value ) {
+		return [];
+	}
+
+	return value
+		.map( ( item ) => extractFlatOptionFromQueryValue( item?.value ) )
+		.filter( ( chip ): chip is ChipOption => chip !== null );
+}

package/src/controls/query-control.tsx

@@ -1,27 +1,13 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
-import {
-	numberPropTypeUtil,
-	queryPropTypeUtil,
-	type QueryPropValue,
-	stringPropTypeUtil,
-	urlPropTypeUtil,
-} from '@elementor/editor-props';
-import { type HttpResponse, httpService } from '@elementor/http-client';
+import { numberPropTypeUtil, queryPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
 import { SearchIcon } from '@elementor/icons';
-import { debounce } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
-import {
-	Autocomplete,
-	type CategorizedOption,
-	findMatchingOption,
-	type FlatOption,
-	isCategorizedOptionPool,
-} from '../components/autocomplete';
+import { Autocomplete, findMatchingOption } from '../components/autocomplete';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { useQueryAutocomplete } from '../hooks/use-query-autocomplete';
 import { type DestinationProp } from './link-control';
 
 type Props = {
@@ -36,10 +22,6 @@ type Props = {
 	ariaLabel?: string;
 };
 
-type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
-
-type FetchOptionsParams = Record< string, unknown > & { term: string };
-
 export const QueryControl = createControl( ( props: Props ) => {
 	const { value: queryValue, setValue: setQueryValue } = useBoundProp( queryPropTypeUtil );
 	const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp( urlPropTypeUtil );
@@ -53,9 +35,12 @@ export const QueryControl = createControl( ( props: Props ) => {
 		ariaLabel,
 	} = props || {};
 
-	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
-		generateFirstLoadedOption( queryValue )
-	);
+	const { options, updateOptions } = useQueryAutocomplete( {
+		url,
+		params,
+		minInputLength,
+		initialQueryValue: queryValue,
+	} );
 
 	const onOptionChange = ( newValue: number | null ) => {
 		if ( newValue === null ) {
@@ -89,28 +74,6 @@ export const QueryControl = createControl( ( props: Props ) => {
 		updateOptions( newValue );
 	};
 
-	const updateOptions = ( newValue: string | null ) => {
-		setOptions( [] );
-
-		if ( ! newValue || ! url || newValue.length < minInputLength ) {
-			return;
-		}
-
-		debounceFetch( { ...params, term: newValue } );
-	};
-
-	const debounceFetch = useMemo(
-		() =>
-			debounce(
-				( queryParams: FetchOptionsParams ) =>
-					fetchOptions( url, queryParams ).then( ( newOptions ) => {
-						setOptions( formatOptions( newOptions ) );
-					} ),
-				400
-			),
-		[ url ]
-	);
-
 	const displayValue = queryValue?.id?.value ?? urlValue;
 
 	return (
@@ -132,38 +95,3 @@ export const QueryControl = createControl( ( props: Props ) => {
 		</ControlActions>
 	);
 } );
-
-async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
-	if ( ! params || ! ajaxUrl ) {
-		return [];
-	}
-
-	try {
-		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
-
-		return response.data.value;
-	} catch {
-		return [];
-	}
-}
-
-function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
-	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
-
-	return options.sort( ( a, b ) =>
-		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
-	);
-}
-
-function generateFirstLoadedOption( queryValue: QueryPropValue[ 'value' ] | null ): FlatOption[] {
-	const id = queryValue?.id?.value;
-	const label = queryValue?.label?.value;
-
-	const option = [];
-
-	if ( id && label ) {
-		option.push( { id: id.toString(), label } );
-	}
-
-	return option;
-}

package/src/hooks/use-query-autocomplete.ts

@@ -0,0 +1,118 @@
+import { useMemo, useState } from 'react';
+import { numberPropTypeUtil, type QueryPropValue, stringPropTypeUtil } from '@elementor/editor-props';
+import { type HttpResponse, httpService } from '@elementor/http-client';
+import { debounce } from '@elementor/utils';
+
+import { type CategorizedOption, type FlatOption, isCategorizedOptionPool } from '../components/autocomplete';
+
+type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
+
+type FetchOptionsParams = Record< string, unknown > & { term: string };
+
+type UseQueryAutocompleteOptions = {
+	url: string;
+	params?: Record< string, unknown >;
+	minInputLength?: number;
+	initialQueryValue?: QueryPropValue[ 'value' ] | null;
+	excludeIds?: number[];
+};
+
+export type UseQueryAutocompleteResult = {
+	options: FlatOption[] | CategorizedOption[];
+	updateOptions: ( term: string | null ) => void;
+};
+
+export function useQueryAutocomplete( {
+	url,
+	params = {},
+	minInputLength = 2,
+	initialQueryValue = null,
+	excludeIds,
+}: UseQueryAutocompleteOptions ): UseQueryAutocompleteResult {
+	const excludeIdSet = useMemo( () => new Set( ( excludeIds ?? [] ).map( String ) ), [ excludeIds ] );
+
+	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
+		generateFirstLoadedOption( initialQueryValue )
+	);
+
+	const debounceFetch = useMemo(
+		() =>
+			debounce(
+				( queryParams: FetchOptionsParams ) =>
+					fetchOptions( url, queryParams ).then( ( newOptions ) => {
+						setOptions( formatOptions( filterExcludedOptions( newOptions, excludeIdSet ) ) );
+					} ),
+				400
+			),
+		[ url, excludeIdSet ]
+	);
+
+	const updateOptions = ( term: string | null ) => {
+		setOptions( [] );
+
+		if ( ! term || ! url || term.length < minInputLength ) {
+			return;
+		}
+
+		debounceFetch( { ...params, term } );
+	};
+
+	return { options, updateOptions };
+}
+
+async function fetchOptions( ajaxUrl: string, params: FetchOptionsParams ) {
+	if ( ! params || ! ajaxUrl ) {
+		return [];
+	}
+
+	try {
+		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
+
+		return response.data.value;
+	} catch {
+		return [];
+	}
+}
+
+function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
+	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
+
+	return options.sort( ( a, b ) =>
+		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
+	);
+}
+
+function filterExcludedOptions(
+	options: FlatOption[] | CategorizedOption[],
+	excludeIdSet: Set< string >
+): FlatOption[] | CategorizedOption[] {
+	if ( excludeIdSet.size === 0 ) {
+		return options;
+	}
+
+	return options.filter( ( option ) => ! excludeIdSet.has( String( option.id ) ) ) as
+		| FlatOption[]
+		| CategorizedOption[];
+}
+
+export function extractFlatOptionFromQueryValue(
+	queryValue: QueryPropValue[ 'value' ] | null | undefined
+): FlatOption | null {
+	const id = numberPropTypeUtil.extract( queryValue?.id );
+	const label = stringPropTypeUtil.extract( queryValue?.label );
+
+	if ( id === null ) {
+		return null;
+	}
+
+	return {
+		id: String( id ),
+		label: label || String( id ),
+	};
+}
+
+function generateFirstLoadedOption( queryValue: QueryPropValue[ 'value' ] | null ): FlatOption[] {
+	const option = extractFlatOptionFromQueryValue( queryValue );
+
+	return option ? [ option ] : [];
+}

package/src/index.ts

@@ -20,6 +20,7 @@ export { ItemSelector } from './components/item-selector';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { HtmlTagControl } from './controls/html-tag-control';
+export { QueryChipsControl } from './controls/query-chips-control';
 export { QueryControl } from './controls/query-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';