fix(core): extend TItem to object

packages/autocomplete-core/src/checkOptions.ts

@@ -1,8 +1,10 @@
 import { warn } from '@algolia/autocomplete-shared';
 
-import { AutocompleteOptions } from './types';
+import { AutocompleteOptions, BaseItem } from './types';
 
-export function checkOptions<TItem>(option: AutocompleteOptions<TItem>) {
+export function checkOptions<TItem extends BaseItem>(
+  option: AutocompleteOptions<TItem>
+) {
   warn(
     !option.debug,
     'The `debug` option is meant for development debugging and should not be used in production.'

packages/autocomplete-core/src/createAutocomplete.ts

@@ -5,10 +5,10 @@ import { getDefaultProps } from './getDefaultProps';
 import { getPropGetters } from './getPropGetters';
 import { onInput } from './onInput';
 import { stateReducer } from './stateReducer';
-import { AutocompleteApi, AutocompleteOptions } from './types';
+import { AutocompleteApi, AutocompleteOptions, BaseItem } from './types';
 
 export function createAutocomplete<
-  TItem extends {},
+  TItem extends BaseItem,
   TEvent = Event,
   TMouseEvent = MouseEvent,
   TKeyboardEvent = KeyboardEvent

packages/autocomplete-core/src/createStore.ts

@@ -1,10 +1,11 @@
 import {
   AutocompleteStore,
+  BaseItem,
   InternalAutocompleteOptions,
   Reducer,
 } from './types';
 
-export function createStore<TItem>(
+export function createStore<TItem extends BaseItem>(
   reducer: Reducer,
   props: InternalAutocompleteOptions<TItem>
 ): AutocompleteStore<TItem> {

packages/autocomplete-core/src/getAutocompleteSetters.ts

@@ -1,11 +1,16 @@
-import { AutocompleteApi, AutocompleteStore } from './types';
+import {
+  AutocompleteApi,
+  AutocompleteCollection,
+  AutocompleteStore,
+  BaseItem,
+} from './types';
 import { flatten } from './utils';
 
-interface GetAutocompleteSettersOptions<TItem> {
+interface GetAutocompleteSettersOptions<TItem extends BaseItem> {
   store: AutocompleteStore<TItem>;
 }
 
-export function getAutocompleteSetters<TItem>({
+export function getAutocompleteSetters<TItem extends BaseItem>({
   store,
 }: GetAutocompleteSettersOptions<TItem>) {
   const setSelectedItemId: AutocompleteApi<TItem>['setSelectedItemId'] = (
@@ -22,11 +27,11 @@ export function getAutocompleteSetters<TItem>({
     rawValue
   ) => {
     let baseItemId = 0;
-    const value = rawValue.map((collection) => ({
+    const value = rawValue.map<AutocompleteCollection<TItem>>((collection) => ({
       ...collection,
       // We flatten the stored items to support calling `getAlgoliaHits`
       // from the source itself.
-      items: flatten(collection.items).map((item) => ({
+      items: flatten(collection.items as any).map((item: any) => ({
         ...item,
         __autocomplete_id: baseItemId++,
       })),

packages/autocomplete-core/src/getCompletion.ts

@@ -1,11 +1,11 @@
-import { AutocompleteState } from './types';
+import { AutocompleteState, BaseItem } from './types';
 import { getSelectedItem } from './utils';
 
-interface GetCompletionProps<TItem> {
+interface GetCompletionProps<TItem extends BaseItem> {
   state: AutocompleteState<TItem>;
 }
 
-export function getCompletion<TItem>({
+export function getCompletion<TItem extends BaseItem>({
   state,
 }: GetCompletionProps<TItem>): string | null {
   if (state.isOpen === false || state.selectedItemId === null) {

packages/autocomplete-core/src/getDefaultProps.ts

@@ -1,17 +1,21 @@
 import { getNavigator } from './getNavigator';
-import { InternalAutocompleteOptions, AutocompleteOptions } from './types';
+import {
+  AutocompleteOptions,
+  BaseItem,
+  InternalAutocompleteOptions,
+} from './types';
 import {
   generateAutocompleteId,
   getItemsCount,
   getNormalizedSources,
   flatten,
 } from './utils';
 
-export function getDefaultProps<TItem>(
+export function getDefaultProps<TItem extends BaseItem>(
   props: AutocompleteOptions<TItem>
 ): InternalAutocompleteOptions<TItem> {
   const environment: InternalAutocompleteOptions<
-    unknown
+    TItem
   >['environment'] = (typeof window !== 'undefined'
     ? window
     : {}) as typeof window;

packages/autocomplete-core/src/getNavigator.ts

@@ -1,11 +1,11 @@
-import { InternalAutocompleteOptions } from './types';
+import { BaseItem, InternalAutocompleteOptions } from './types';
 
-export function getNavigator({
+export function getNavigator<TItem extends BaseItem>({
   environment,
 }: Pick<
-  InternalAutocompleteOptions<unknown>,
+  InternalAutocompleteOptions<TItem>,
   'environment'
->): InternalAutocompleteOptions<unknown>['navigator'] {
+>): InternalAutocompleteOptions<TItem>['navigator'] {
   return {
     navigate({ itemUrl }) {
       environment.location.assign(itemUrl);

packages/autocomplete-core/src/getPropGetters.ts

@@ -13,16 +13,23 @@ import {
   GetLabelProps,
   GetListProps,
   GetRootProps,
+  BaseItem,
 } from './types';
 import { getSelectedItem, isOrContainsNode } from './utils';
 
-interface GetPropGettersOptions<TItem> extends AutocompleteSetters<TItem> {
+interface GetPropGettersOptions<TItem extends BaseItem>
+  extends AutocompleteSetters<TItem> {
   store: AutocompleteStore<TItem>;
   props: InternalAutocompleteOptions<TItem>;
   refresh: AutocompleteRefresh;
 }
 
-export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
+export function getPropGetters<
+  TItem extends BaseItem,
+  TEvent,
+  TMouseEvent,
+  TKeyboardEvent
+>({
   store,
   props,
   setSelectedItemId,

packages/autocomplete-core/src/onInput.ts

@@ -1,15 +1,17 @@
 import {
-  InternalAutocompleteOptions,
   AutocompleteSetters,
   AutocompleteState,
   AutocompleteStore,
   AutocompleteRefresh,
+  BaseItem,
+  InternalAutocompleteOptions,
 } from './types';
 import { getSelectedItem } from './utils';
 
 let lastStalledId: number | null = null;
 
-interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
+interface OnInputParams<TItem extends BaseItem>
+  extends AutocompleteSetters<TItem> {
   query: string;
   event: any;
   store: AutocompleteStore<TItem>;
@@ -25,7 +27,7 @@ interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
   refresh: AutocompleteRefresh;
 }
 
-export function onInput<TItem>({
+export function onInput<TItem extends BaseItem>({
   query,
   event,
   store,
@@ -123,7 +125,7 @@ export function onInput<TItem>({
       )
         .then((collections) => {
           setStatus('idle');
-          setCollections(collections);
+          setCollections(collections as any);
           setIsOpen(
             nextState.isOpen ??
               ((query.length === 0 && props.openOnFocus) ||

packages/autocomplete-core/src/onKeyDown.ts

@@ -1,20 +1,22 @@
 import { onInput } from './onInput';
 import {
-  InternalAutocompleteOptions,
   AutocompleteSetters,
   AutocompleteStore,
   AutocompleteRefresh,
+  BaseItem,
+  InternalAutocompleteOptions,
 } from './types';
 import { getSelectedItem } from './utils';
 
-interface OnKeyDownOptions<TItem> extends AutocompleteSetters<TItem> {
+interface OnKeyDownOptions<TItem extends BaseItem>
+  extends AutocompleteSetters<TItem> {
   event: KeyboardEvent;
   store: AutocompleteStore<TItem>;
   props: InternalAutocompleteOptions<TItem>;
   refresh: AutocompleteRefresh;
 }
 
-export function onKeyDown<TItem>({
+export function onKeyDown<TItem extends BaseItem>({
   event,
   store,
   props,

packages/autocomplete-core/src/types/api.ts

@@ -5,8 +5,10 @@ import { AutocompletePlugin } from './plugins';
 import { AutocompleteSetters } from './setters';
 import { AutocompleteState } from './state';
 
+export type BaseItem = Record<string, unknown>;
+
 export interface AutocompleteApi<
-  TItem,
+  TItem extends BaseItem,
   TEvent = Event,
   TMouseEvent = MouseEvent,
   TKeyboardEvent = KeyboardEvent
@@ -25,18 +27,23 @@ export interface AutocompleteApi<
 
 export type AutocompleteRefresh = () => Promise<void>;
 
-export interface AutocompleteCollection<TItem> {
+export interface AutocompleteCollection<TItem extends BaseItem> {
   source: InternalAutocompleteSource<TItem>;
   items: TItem[];
 }
+export interface AutocompleteCollectionItemsArray<TItem extends BaseItem> {
+  source: InternalAutocompleteSource<TItem>;
+  items: TItem[][];
+}
 
-export interface GetSourcesParams<TItem> extends AutocompleteSetters<TItem> {
+export interface GetSourcesParams<TItem extends BaseItem>
+  extends AutocompleteSetters<TItem> {
   query: string;
   state: AutocompleteState<TItem>;
   refresh: AutocompleteRefresh;
 }
 
-interface ItemParams<TItem> {
+interface ItemParams<TItem extends BaseItem> {
   item: TItem;
   itemInputValue: ReturnType<
     InternalAutocompleteSource<TItem>['getItemInputValue']
@@ -45,30 +52,32 @@ interface ItemParams<TItem> {
   source: InternalAutocompleteSource<TItem>;
 }
 
-interface OnSelectParams<TItem>
+interface OnSelectParams<TItem extends BaseItem>
   extends ItemParams<TItem>,
     AutocompleteSetters<TItem> {
   state: AutocompleteState<TItem>;
   event: any;
 }
 
-type OnHighlightParams<TItem> = OnSelectParams<TItem>;
+type OnHighlightParams<TItem extends BaseItem> = OnSelectParams<TItem>;
 
-interface OnSubmitParams<TItem> extends AutocompleteSetters<TItem> {
+interface OnSubmitParams<TItem extends BaseItem>
+  extends AutocompleteSetters<TItem> {
   state: AutocompleteState<TItem>;
   event: any;
 }
 
-interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
+interface OnInputParams<TItem extends BaseItem>
+  extends AutocompleteSetters<TItem> {
   query: string;
   state: AutocompleteState<TItem>;
   refresh: AutocompleteRefresh;
 }
 
-export interface AutocompleteSource<TItem> {
+export interface AutocompleteSource<TItem extends BaseItem> {
   // This allows flavors to pass other keys to their source.
   // Example: `templates` in the JavaScript API
-  [key: string]: unknown;
+  // [key: string]: unknown;
   /**
    * Get the string value of the item. The value is used to fill the search box.
    */
@@ -107,13 +116,13 @@ export interface AutocompleteSource<TItem> {
   onHighlight?(params: OnHighlightParams<TItem>): void;
 }
 
-export type InternalAutocompleteSource<TItem> = {
+export type InternalAutocompleteSource<TItem extends BaseItem> = {
   [KParam in keyof AutocompleteSource<TItem>]-?: AutocompleteSource<
     TItem
   >[KParam];
 };
 
-export type GetSources<TItem> = (
+export type GetSources<TItem extends BaseItem> = (
   params: GetSourcesParams<TItem>
 ) => Promise<Array<InternalAutocompleteSource<TItem>>>;
 
@@ -131,7 +140,7 @@ export type Environment =
       open: Window['open'];
     };
 
-interface Navigator<TItem> {
+interface Navigator<TItem extends BaseItem> {
   /**
    * Called when a URL should be open in the current page.
    */
@@ -158,7 +167,7 @@ interface Navigator<TItem> {
   }): void;
 }
 
-export interface AutocompleteOptions<TItem> {
+export interface AutocompleteOptions<TItem extends BaseItem> {
   /**
    * Whether to consider the experience in debug mode.
    *
@@ -179,7 +188,7 @@ export interface AutocompleteOptions<TItem> {
   /**
    * Function called when the internal state changes.
    */
-  onStateChange?<TItem>(props: {
+  onStateChange?(props: {
     state: AutocompleteState<TItem>;
     prevState: AutocompleteState<TItem>;
   }): void;
@@ -256,11 +265,11 @@ export interface AutocompleteOptions<TItem> {
 }
 
 // Props manipulated internally with default values.
-export interface InternalAutocompleteOptions<TItem>
+export interface InternalAutocompleteOptions<TItem extends BaseItem>
   extends AutocompleteOptions<TItem> {
   debug: boolean;
   id: string;
-  onStateChange<TItem>(props: {
+  onStateChange(props: {
     state: AutocompleteState<TItem>;
     prevState: AutocompleteState<TItem>;
   }): void;

packages/autocomplete-core/src/types/getters.ts

@@ -1,7 +1,7 @@
-import { InternalAutocompleteSource } from './api';
+import { BaseItem, InternalAutocompleteSource } from './api';
 
 export interface AutocompleteAccessibilityGetters<
-  TItem,
+  TItem extends BaseItem,
   TEvent = Event,
   TMouseEvent = MouseEvent,
   TKeyboardEvent = KeyboardEvent
@@ -104,7 +104,10 @@ export type GetListProps = (props?: {
   id: string;
 };
 
-export type GetItemProps<TItem, TMouseEvent = MouseEvent> = (props: {
+export type GetItemProps<
+  TItem extends BaseItem,
+  TMouseEvent = MouseEvent
+> = (props: {
   [key: string]: unknown;
   item: TItem;
   source: InternalAutocompleteSource<TItem>;

packages/autocomplete-core/src/types/plugins.ts

@@ -1,6 +1,9 @@
-import { AutocompleteOptions, AutocompleteSource } from './api';
+import { AutocompleteOptions, AutocompleteSource, BaseItem } from './api';
 
-export type AutocompletePlugin<TItem, TData = unknown> = Partial<
+export type AutocompletePlugin<
+  TItem extends BaseItem,
+  TData = unknown
+> = Partial<
   Pick<AutocompleteOptions<TItem>, 'onStateChange' | 'onSubmit' | 'getSources'>
 > & {
   /**