From 46a18aaa48630f4e8f167a9f8933b340838e0be6 Mon Sep 17 00:00:00 2001
From: Yan Wang <ywang@talend.com>
Date: Wed, 3 Jul 2024 15:43:34 +0800
Subject: [PATCH] feat(FacetedSearch): Add Typeahead props to QuickSearchInput
 (#5367)

---
 .changeset/fluffy-colts-sleep.md              |  5 +++
 .../BasicSearch/BasicSearch.component.js      |  2 ++
 .../QuickSearchInput.component.js             |  2 ++
 .../stories/facetedSearch.stories.js          | 31 +++++++++++++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 .changeset/fluffy-colts-sleep.md

diff --git a/.changeset/fluffy-colts-sleep.md b/.changeset/fluffy-colts-sleep.md
new file mode 100644
index 00000000000..e120f6c2738
--- /dev/null
+++ b/.changeset/fluffy-colts-sleep.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+feat: Add Typeahead props to QuickSearchInput
diff --git a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
index b7eb0eda923..6e7baed1c51 100644
--- a/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
+++ b/packages/faceted-search/src/components/BasicSearch/BasicSearch.component.js
@@ -45,6 +45,7 @@ const BasicSearch = ({
 	quickSearchPlaceholder,
 	quickSearchFacetsFilter,
 	quickSearchInputProps,
+	quickSearchTypeaheadProps,
 	disclosureProps,
 }) => {
 	const { id, t } = useFacetedSearchContext();
@@ -129,6 +130,7 @@ const BasicSearch = ({
 				}}
 				inputProps={quickSearchInputProps}
 				minLength={quickSearchMinLength}
+				typeaheadProps={quickSearchTypeaheadProps}
 			/>
 			<div className={styles['tc-basic-search-content']}>
 				<BadgeFacetedProvider value={badgeFacetedContextValue}>
diff --git a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
index 4078eddf351..0e66f922988 100644
--- a/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
+++ b/packages/faceted-search/src/components/QuickSearchInput/QuickSearchInput.component.js
@@ -21,6 +21,7 @@ export const QuickSearchInput = ({
 	facetsFilter,
 	inputProps,
 	minLength,
+	typeaheadProps = {},
 }) => {
 	const defaultFacet = useMemo(() => getDefaultFacet(facets), [facets]);
 	const [opened, setOpened] = useState(false);
@@ -72,6 +73,7 @@ export const QuickSearchInput = ({
 			role="searchbox"
 			className={className}
 			inputProps={inputProps}
+			{...typeaheadProps}
 		/>
 	);
 };
diff --git a/packages/faceted-search/stories/facetedSearch.stories.js b/packages/faceted-search/stories/facetedSearch.stories.js
index 8965d76592d..5d4c1079f88 100644
--- a/packages/faceted-search/stories/facetedSearch.stories.js
+++ b/packages/faceted-search/stories/facetedSearch.stories.js
@@ -558,3 +558,34 @@ export const WithQuickSearchFilterCustomizableInputTriggerLength = () => {
 		</FacetedSearch.Faceted>
 	);
 };
+
+export const WithQuickSearchAsynchronousSuggestions = () => {
+	const [searching, setSearching] = useState(false);
+	const [items, setItems] = useState([]);
+	const [value, setValue] = useState('');
+	const onChange = (_, { value }) => {
+		setValue(value);
+		setSearching(true);
+		setTimeout(() => {
+			setItems([
+				{
+					title: 'Search in...',
+					suggestions: ['in Name', 'in Email', 'in Position'].map(column => value + ' ' + column),
+				},
+			]);
+			setSearching(false);
+		}, 1000);
+	};
+
+	return (
+		<FacetedSearch.Faceted id="my-faceted-search">
+			<FacetedSearch.BasicSearch
+				badgesDefinitions={badgesDefinitions}
+				callbacks={callbacks}
+				onSubmit={action('onSubmit')}
+				quickSearchInputProps={{ value }}
+				quickSearchTypeaheadProps={{ searching, items, onChange, debounceTimeout: 800 }}
+			/>
+		</FacetedSearch.Faceted>
+	);
+};