@elementor/editor-controls 4.5.0-1156 → 4.5.0-1157

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.5.0-1156",
+  "version": "4.5.0-1157",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.5.0-1156",
-    "@elementor/editor-elements": "4.5.0-1156",
-    "@elementor/editor-props": "4.5.0-1156",
-    "@elementor/editor-responsive": "4.5.0-1156",
-    "@elementor/editor-ui": "4.5.0-1156",
-    "@elementor/editor-v1-adapters": "4.5.0-1156",
-    "@elementor/env": "4.5.0-1156",
-    "@elementor/events": "4.5.0-1156",
-    "@elementor/http-client": "4.5.0-1156",
+    "@elementor/editor-current-user": "4.5.0-1157",
+    "@elementor/editor-elements": "4.5.0-1157",
+    "@elementor/editor-props": "4.5.0-1157",
+    "@elementor/editor-responsive": "4.5.0-1157",
+    "@elementor/editor-ui": "4.5.0-1157",
+    "@elementor/editor-v1-adapters": "4.5.0-1157",
+    "@elementor/env": "4.5.0-1157",
+    "@elementor/events": "4.5.0-1157",
+    "@elementor/http-client": "4.5.0-1157",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.5.0-1156",
-    "@elementor/query": "4.5.0-1156",
-    "@elementor/schema": "4.5.0-1156",
-    "@elementor/session": "4.5.0-1156",
+    "@elementor/locations": "4.5.0-1157",
+    "@elementor/query": "4.5.0-1157",
+    "@elementor/schema": "4.5.0-1157",
+    "@elementor/session": "4.5.0-1157",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.5.0-1156",
-    "@elementor/wp-media": "4.5.0-1156",
+    "@elementor/utils": "4.5.0-1157",
+    "@elementor/wp-media": "4.5.0-1157",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { type SyntheticEvent, useMemo } from 'react';
+import { numberPropTypeUtil, queryPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { Autocomplete, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { type FlatOption } from '../components/autocomplete';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { extractFlatOptionFromQueryValue, useQueryAutocomplete } from '../hooks/use-query-autocomplete';
+
+type QuerySelectControlProps = {
+	queryOptions: {
+		params: Record< string, unknown >;
+		url: string;
+	};
+	placeholder?: string;
+	minInputLength?: number;
+	ariaLabel?: string;
+};
+
+const SIZE = 'tiny';
+
+export const QuerySelectControl = createControl( ( props: QuerySelectControlProps ) => {
+	const { queryOptions, placeholder, minInputLength = 0, ariaLabel } = props;
+	const { value, setValue, disabled } = useBoundProp( queryPropTypeUtil );
+
+	const selectedOption = useMemo( () => extractFlatOptionFromQueryValue( value ), [ value ] );
+
+	const { options, updateOptions } = useQueryAutocomplete( {
+		url: queryOptions.url,
+		params: queryOptions.params,
+		minInputLength,
+		initialQueryValue: value,
+	} );
+
+	const optionsWithSelected = useMemo(
+		() => withSelectedOption( options as FlatOption[], selectedOption ),
+		[ options, selectedOption ]
+	);
+
+	const handleChange = ( _: SyntheticEvent, newValue: FlatOption | null ) => {
+		if ( ! newValue ) {
+			setValue( null );
+
+			return;
+		}
+
+		setValue( {
+			id: numberPropTypeUtil.create( Number( newValue.id ) ),
+			label: stringPropTypeUtil.create( newValue.label ),
+		} );
+	};
+
+	const handleInputChange = ( _: SyntheticEvent, term: string, reason: string ) => {
+		if ( 'reset' === reason || 'clear' === reason ) {
+			updateOptions( null );
+			return;
+		}
+
+		if ( 'input' !== reason ) {
+			return;
+		}
+
+		updateOptions( term || null );
+	};
+
+	return (
+		<ControlActions>
+			<Autocomplete
+				fullWidth
+				openOnFocus
+				disabled={ disabled }
+				size={ SIZE }
+				value={ selectedOption }
+				options={ optionsWithSelected }
+				onChange={ handleChange }
+				onInputChange={ handleInputChange }
+				getOptionLabel={ ( option ) => option.label }
+				isOptionEqualToValue={ ( option, val ) => option.id === val.id }
+				filterOptions={ ( opts ) => opts }
+				renderInput={ ( params ) => (
+					<TextField
+						{ ...params }
+						placeholder={ placeholder ?? __( 'Search', 'elementor' ) }
+						inputProps={ {
+							...params.inputProps,
+							...( ariaLabel ? { 'aria-label': ariaLabel } : {} ),
+						} }
+					/>
+				) }
+			/>
+		</ControlActions>
+	);
+} );
+
+function withSelectedOption( options: FlatOption[], selectedOption: FlatOption | null ): FlatOption[] {
+	if ( ! selectedOption || options.some( ( option ) => option.id === selectedOption.id ) ) {
+		return options;
+	}
+
+	return [ selectedOption, ...options ];
+}

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, 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';
@@ -47,13 +47,17 @@ export function useQueryAutocomplete( {
 		[ url, excludeIdSet ]
 	);
 
+	const paramsKey = useMemo( () => JSON.stringify( params ), [ params ] );
+	const paramsRef = useRef( params );
+	paramsRef.current = params;
+
 	useEffect( () => {
 		if ( minInputLength === 0 && url ) {
-			fetchOptions( url, { ...params, term: '' } ).then( ( newOptions ) => {
+			fetchOptions( url, { ...paramsRef.current, term: '' } ).then( ( newOptions ) => {
 				setOptions( formatOptions( filterExcludedOptions( newOptions, excludeIdSet ) ) );
 			} );
 		}
-	}, [ url, minInputLength, excludeIdSet, params ] );
+	}, [ url, minInputLength, excludeIdSet, paramsKey ] );
 
 	const updateOptions = ( term: string | null ) => {
 		const termStr = term ?? '';

package/src/index.ts

@@ -23,6 +23,7 @@ export { HtmlTagControl } from './controls/html-tag-control';
 export { QueryChipsControl } from './controls/query-chips-control';
 export { QueryControl } from './controls/query-control';
 export { QueryFilterRepeaterControl } from './controls/query-filter-repeater-control';
+export { QuerySelectControl } from './controls/query-select-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';