fix(getSuggestions): allow nested arrays to be returned

packages/autocomplete-core/src/__tests__/autocomplete.test.ts → packages/autocomplete-core/src/__tests__/getAutocompleteSetters.test.ts

@@ -1,6 +1,29 @@
-import { createAutocomplete } from '..';
+import { createAutocomplete, AutocompleteSuggestion } from '..';
+import { InternalAutocompleteSource } from '../types';
 
-function createSuggestion(items = []) {
+function createSuggestion<TItem extends { label: string }>(
+  items: TItem[] = []
+): AutocompleteSuggestion<TItem> {
+  return {
+    source: {
+      getInputValue: ({ suggestion }) => suggestion.label,
+      getSuggestionUrl: () => undefined,
+      onHighlight: () => {},
+      onSelect: () => {},
+      getSuggestions: () => items,
+    },
+    items,
+  };
+}
+
+interface AutocompleteMultiSuggestion<TItem> {
+  source: InternalAutocompleteSource<TItem>;
+  items: TItem[][];
+}
+
+function createMultiSuggestion<TItem extends { label: string }>(
+  items: TItem[][] = []
+): AutocompleteMultiSuggestion<TItem> {
   return {
     source: {
       getInputValue: ({ suggestion }) => suggestion.label,
@@ -57,22 +80,56 @@ describe('createAutocomplete', () => {
     );
   });
 
-  test('setSuggestions', () => {
-    const onStateChange = jest.fn();
-    const { setSuggestions } = createAutocomplete({
-      getSources: () => [],
-      onStateChange,
+  describe('setSuggestions', () => {
+    test('default', () => {
+      const onStateChange = jest.fn();
+      const { setSuggestions } = createAutocomplete({
+        getSources: () => [],
+        onStateChange,
+      });
+
+      setSuggestions([createSuggestion([{ label: 'hi' }])]);
+
+      expect(onStateChange).toHaveBeenCalledTimes(1);
+      expect(onStateChange).toHaveBeenCalledWith({
+        state: expect.objectContaining({
+          suggestions: [
+            {
+              items: [
+                {
+                  label: 'hi',
+                  __autocomplete_id: 0,
+                },
+              ],
+              source: expect.any(Object),
+            },
+          ],
+        }),
+      });
     });
-    const suggestions = [createSuggestion()];
 
-    setSuggestions(suggestions);
+    test('flattens suggestions', () => {
+      const onStateChange = jest.fn();
+      const { setSuggestions } = createAutocomplete({
+        openOnFocus: true,
+        getSources: () => [],
+        onStateChange,
+      });
 
-    expect(onStateChange).toHaveBeenCalledTimes(1);
-    expect(onStateChange).toHaveBeenCalledWith(
-      expect.objectContaining({
-        state: expect.objectContaining({ suggestions }),
-      })
-    );
+      // while it also accepts a nested array.
+      // There's only one type for both input and output however,
+      setSuggestions([createMultiSuggestion([[{ label: 'hi' }]])]);
+
+      expect(onStateChange).toHaveBeenCalledWith({
+        state: expect.objectContaining({
+          suggestions: [
+            expect.objectContaining({
+              items: [{ label: 'hi', __autocomplete_id: 0 }],
+            }),
+          ],
+        }),
+      });
+    });
   });
 
   test('setIsOpen', () => {

packages/autocomplete-core/src/__tests__/utils.test.ts

@@ -0,0 +1,15 @@
+import { flatten } from '../utils';
+
+describe('flatten', () => {
+  it('does not split strings', () => {
+    expect(flatten(['value', 'value'])).toEqual(['value', 'value']);
+  });
+
+  it('spreads arrays', () => {
+    expect(flatten(['value', ['value']])).toEqual(['value', 'value']);
+  });
+
+  it('ignores empty arrays', () => {
+    expect(flatten([[], 'value', 'value'])).toEqual(['value', 'value']);
+  });
+});

packages/autocomplete-core/src/getAutocompleteSetters.ts

@@ -1,4 +1,5 @@
 import { AutocompleteApi, AutocompleteStore } from './types';
+import { flatten } from './utils';
 
 interface GetAutocompleteSettersOptions<TItem> {
   store: AutocompleteStore<TItem>;
@@ -23,7 +24,9 @@ export function getAutocompleteSetters<TItem>({
     let baseItemId = 0;
     const value = rawValue.map((suggestion) => ({
       ...suggestion,
-      items: suggestion.items.map((item) => ({
+      // We flatten the stored items to support calling `getAlgoliaHits`
+      // from the source itself.
+      items: flatten(suggestion.items).map((item) => ({
         ...item,
         __autocomplete_id: baseItemId++,
       })),

packages/autocomplete-core/src/getDefaultProps.ts

@@ -4,6 +4,7 @@ import {
   getItemsCount,
   noop,
   getNormalizedSources,
+  flatten,
 } from './utils';
 
 export function getDefaultProps<TItem>(
@@ -62,11 +63,7 @@ export function getDefaultProps<TItem>(
         )
       )
         .then((nested) =>
-          // same as `nested.flat()`
-          nested.reduce((acc, array) => {
-            acc = acc.concat(array);
-            return acc;
-          }, [])
+          flatten(nested)
         )
         .then((sources) =>
           sources.map((source) => ({

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

@@ -93,7 +93,9 @@ export interface AutocompleteSource<TItem> {
   /**
    * Function called when the input changes. You can use this function to filter/search the items based on the query.
    */
-  getSuggestions(params: GetSourcesParams<TItem>): MaybePromise<TItem[]>;
+  getSuggestions(
+    params: GetSourcesParams<TItem>
+  ): MaybePromise<TItem[] | TItem[][]>;
   /**
    * Function called when an item is selected.
    */

packages/autocomplete-core/src/utils.ts

@@ -187,3 +187,9 @@ export function getHighlightedItem<TItem>({
 export function isOrContainsNode(parent: Node, child: Node) {
   return parent === child || (parent.contains && parent.contains(child));
 }
+
+export function flatten<TType>(values: Array<TType | TType[]>): TType[] {
+  return values.reduce<TType[]>((a, b) => {
+    return a.concat(b);
+  }, []);
+}