import type { AsyncThunkAction } from '@reduxjs/toolkit'; import type { CoreEngine } from '../../../app/engine.js'; import type { LegacySearchAction } from '../../../features/analytics/analytics-utils.js'; import { type FetchQuerySuggestionsActionCreatorPayload } from '../../../features/query-suggest/query-suggest-actions.js'; import type { QuerySuggestState } from '../../../features/query-suggest/query-suggest-state.js'; import { type SearchAction, type TransitiveSearchAction } from '../../../features/search/search-actions.js'; import { type Delimiters, type SuggestionHighlightingOptions } from '../../../utils/highlight.js'; import { type Controller } from '../../controller/headless-controller.js'; import { type SearchBoxOptions } from './headless-core-search-box-options.js'; export type { Delimiters, SearchBoxOptions, SuggestionHighlightingOptions }; export type SearchBoxProps = SearchBoxPropsBase & (NextSearchBoxProps | LegacySearchBoxProps); interface NextSearchBoxProps { /** * The action creator for the `executeSearch` thunk action. */ executeSearchActionCreator: (arg: TransitiveSearchAction) => AsyncThunkAction; isNextAnalyticsReady: true; } interface LegacySearchBoxProps { /** * The action creator for the `executeSearch` thunk action. */ executeSearchActionCreator: (arg: LegacySearchAction) => AsyncThunkAction; isNextAnalyticsReady: false; } interface SearchBoxPropsBase { /** * The `SearchBox` controller options. */ options?: SearchBoxOptions; /** * The action creator for the `executeSearch` thunk action. */ executeSearchActionCreator: ((arg: TransitiveSearchAction) => AsyncThunkAction) | ((arg: LegacySearchAction) => AsyncThunkAction); /** * The action creator for the `fetchQuerySuggestions` thunk action. */ fetchQuerySuggestionsActionCreator: (arg: FetchQuerySuggestionsActionCreatorPayload) => AsyncThunkAction; isNextAnalyticsReady: boolean; } /** * A scoped and simplified part of the headless state that is relevant to the `SearchBox` controller. * * @group Controllers * @category SearchBox */ export interface SearchBoxState { /** * The current query in the search box. */ value: string; /** * The query suggestions for the search box query. */ suggestions: Suggestion[]; /** * Determines if a search is in progress. */ isLoading: boolean; /** * Determines if a query suggest request is in progress. */ isLoadingSuggestions: boolean; /** * The search box ID. */ searchBoxId: string; } export interface Suggestion { /** * The suggestion after applying any `highlightOptions`. */ highlightedValue: string; /** * The suggestion text. */ rawValue: string; } /** * @internal * The `SearchBox` headless controller offers a high-level interface for designing a common search box UI controller * with [highlighting for query suggestions](https://docs.coveo.com/en/headless/latest/usage/highlighting/). */ export interface SearchBox extends Controller { /** * Updates the search box text value and shows the suggestions for that value. * * @param value - The string value to update the search box with. */ updateText(value: string): void; /** * Clears the search box text and the suggestions. */ clear(): void; /** * Shows the suggestions for the current search box value. */ showSuggestions(): void; /** * Selects a suggestion and calls `submit`. * * @param value - The string value of the suggestion to select */ selectSuggestion(value: string): void; /** * Deselects all facets and triggers a search query. * * @param legacyAnalytics - The legacy analytics action to log after submitting a query. * @param nextAnalytics - The next analytics action to log after submitting a query. */ submit(legacyAnalytics?: LegacySearchAction, nextAnalytics?: SearchAction): void; /** * The state of the `SearchBox` controller. */ state: SearchBoxState; } /** * @internal * Creates a `SearchBox` controller instance. * * @param engine - The headless engine instance. * @returns A `SearchBox` controller instance. */ export declare function buildCoreSearchBox(engine: CoreEngine, props: SearchBoxProps): SearchBox; export declare function getSuggestions(state: QuerySuggestState | undefined, highlightOptions: SuggestionHighlightingOptions): { highlightedValue: string; rawValue: string; }[];