diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts index c198fba9e..81ab5afd2 100644 --- a/packages/autocomplete-js/src/autocomplete.ts +++ b/packages/autocomplete-js/src/autocomplete.ts @@ -1,13 +1,14 @@ -import { - createAutocomplete, - AutocompleteState, -} from '@algolia/autocomplete-core'; +import { createAutocomplete } from '@algolia/autocomplete-core'; import { createAutocompleteDom } from './createAutocompleteDom'; import { createEffectWrapper } from './createEffectWrapper'; import { getPanelPositionStyle } from './getPanelPositionStyle'; import { render } from './render'; -import { AutocompleteApi, AutocompleteOptions } from './types'; +import { + AutocompleteApi, + AutocompleteOptions, + AutocompleteState, +} from './types'; import { debounce, getHTMLElement, setProperties } from './utils'; function defaultRenderer({ root, sections }) { @@ -27,7 +28,7 @@ export function autocomplete({ const autocomplete = createAutocomplete({ ...props, onStateChange(options) { - onStateChange(options.state as any); + onStateChange(options.state); if (props.onStateChange) { props.onStateChange(options); diff --git a/packages/autocomplete-js/src/render.ts b/packages/autocomplete-js/src/render.ts index 9d288118f..5c130af50 100644 --- a/packages/autocomplete-js/src/render.ts +++ b/packages/autocomplete-js/src/render.ts @@ -1,7 +1,4 @@ -import { - AutocompleteState as AutocompleteCoreState, - AutocompleteApi as AutocompleteCoreApi, -} from '@algolia/autocomplete-core'; +import { AutocompleteApi as AutocompleteCoreApi } from '@algolia/autocomplete-core'; import { SourceContainer, @@ -15,12 +12,12 @@ import { AutocompleteClassNames, AutocompleteDom, AutocompleteRenderer, - InternalAutocompleteSource, + AutocompleteState, } from './types'; import { setProperties, setPropertiesWithoutEvents } from './utils'; type RenderProps = { - state: AutocompleteCoreState; + state: AutocompleteState; classNames: AutocompleteClassNames; } & AutocompleteCoreApi & AutocompleteDom; @@ -57,10 +54,7 @@ export function render( panel.classList.remove('aa-Panel--stalled'); } - const sections = state.collections.map((collection) => { - const items = collection.items; - const source = collection.source as InternalAutocompleteSource; - + const sections = state.collections.map(({ source, items }) => { const sectionElement = SourceContainer({ classNames }); if (source.templates.header) { diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts index 4afb78d75..832d68f72 100644 --- a/packages/autocomplete-js/src/types/index.ts +++ b/packages/autocomplete-js/src/types/index.ts @@ -1,54 +1,69 @@ import { - GetSourcesParams, - AutocompleteSetters as AutocompleteCoreSetters, - InternalAutocompleteSource as InternalAutocompleteCoreSource, - AutocompleteState as AutocompleteCoreState, AutocompleteOptions as AutocompleteCoreOptions, + AutocompleteSetters as AutocompleteCoreSetters, AutocompleteSource as AutocompleteCoreSource, + AutocompleteState as AutocompleteCoreState, + GetSourcesParams, + InternalAutocompleteSource as InternalAutocompleteCoreSource, } from '@algolia/autocomplete-core'; import { MaybePromise } from '@algolia/autocomplete-shared'; type Template = (params: TParams) => string | void; +/** + * Templates to display in the autocomplete panel. + * + * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string. + */ export type SourceTemplates = { /** - * Templates to display in the autocomplete panel. - * - * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string. + * The template for the suggestion item. */ - templates: { - /** - * The template for the suggestion item. - */ - item: Template<{ - root: HTMLElement; - item: TItem; - state: AutocompleteCoreState; - }>; - /** - * The template for the section header. - */ - header?: Template<{ - root: HTMLElement; - state: AutocompleteCoreState; - }>; - /** - * The template for the section footer. - */ - footer?: Template<{ - root: HTMLElement; - state: AutocompleteCoreState; - }>; - }; + item: Template<{ + root: HTMLElement; + item: TItem; + state: AutocompleteState; + }>; + /** + * The template for the section header. + */ + header?: Template<{ + root: HTMLElement; + state: AutocompleteState; + }>; + /** + * The template for the section footer. + */ + footer?: Template<{ + root: HTMLElement; + state: AutocompleteState; + }>; }; -export type AutocompleteSource = AutocompleteCoreSource & - SourceTemplates; +type WithTemplates = TType & { + templates: SourceTemplates; +}; -export type InternalAutocompleteSource = InternalAutocompleteCoreSource< +export type AutocompleteSource = WithTemplates< + AutocompleteCoreSource, + TItem +>; +export type InternalAutocompleteSource = WithTemplates< + InternalAutocompleteCoreSource, TItem -> & - SourceTemplates; +>; + +interface AutocompleteCollection { + source: InternalAutocompleteSource; + items: TItem[]; +} + +export type AutocompleteState = Omit< + AutocompleteCoreState, + 'collections' +> & { + collections: Array>; +}; export type AutocompleteClassNames = Partial<{ root: string; @@ -78,7 +93,7 @@ export type AutocompleteDom = { export type AutocompleteRenderer = (params: { root: HTMLElement; sections: HTMLElement[]; - state: AutocompleteCoreState; + state: AutocompleteState; }) => void; export interface AutocompleteOptions diff --git a/packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts b/packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts index 631545306..4b9934f00 100644 --- a/packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts +++ b/packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts @@ -15,9 +15,7 @@ export type CreateQuerySuggestionsPluginParams< searchClient: SearchClient; indexName: string; getSearchParams?(): SearchOptions; - getTemplates?( - params: GetTemplatesParams - ): SourceTemplates['templates']; + getTemplates?(params: GetTemplatesParams): SourceTemplates; }; export function createQuerySuggestionsPlugin< diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts index ef52d043a..543af1b75 100644 --- a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts +++ b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts @@ -9,7 +9,7 @@ export type GetTemplatesParams = { export function getTemplates({ onTapAhead, -}: GetTemplatesParams): SourceTemplates['templates'] { +}: GetTemplatesParams): SourceTemplates { return { item({ item, root }) { const content = document.createElement('div'); diff --git a/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts b/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts index 417ada03a..c8a0ff6ed 100644 --- a/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts +++ b/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts @@ -22,9 +22,7 @@ export type CreateRecentSearchesPluginParams< TItem extends RecentSearchesItem > = { storage: RecentSearchesStorage; - getTemplates?( - params: GetTemplatesParams - ): SourceTemplates['templates']; + getTemplates?(params: GetTemplatesParams): SourceTemplates; }; export function createRecentSearchesPlugin({ diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts index 73b45aa5e..2a09c359b 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts +++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts @@ -9,7 +9,7 @@ export type GetTemplatesParams = { export function getTemplates({ onRemove, -}: GetTemplatesParams): SourceTemplates['templates'] { +}: GetTemplatesParams): SourceTemplates { return { item({ item, root }) { const content = document.createElement('div');