fix(deps): Update and pin Autocomplete to the latest version (#999)

* Update DocSearch to the latest Autocomplete version

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

bundlesize.config.json

@@ -6,11 +6,11 @@
     },
     {
       "path": "packages/docsearch-react/dist/umd/index.js",
-      "maxSize": "18 kB"
+      "maxSize": "18.2 kB"
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "25.5 kB"
+      "maxSize": "25.8 kB"
     }
   ]
 }

packages/docsearch-react/package.json

@@ -34,8 +34,8 @@
     "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
   },
   "dependencies": {
-    "@algolia/autocomplete-core": "^1.0.0-alpha.35",
-    "@algolia/autocomplete-preset-algolia": "^1.0.0-alpha.35",
+    "@algolia/autocomplete-core": "1.0.0-alpha.44",
+    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
     "@docsearch/css": "3.0.0-alpha.33",
     "algoliasearch": "^4.0.0"
   },

packages/docsearch-react/src/DocSearchModal.tsx

@@ -51,13 +51,13 @@ export function DocSearchModal({
     completion: null,
     context: {},
     isOpen: false,
-    selectedItemId: null,
+    activeItemId: null,
     status: 'idle',
   });
 
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const modalRef = React.useRef<HTMLDivElement | null>(null);
-  const searchBoxRef = React.useRef<HTMLDivElement | null>(null);
+  const formElementRef = React.useRef<HTMLDivElement | null>(null);
   const dropdownRef = React.useRef<HTMLDivElement | null>(null);
   const inputRef = React.useRef<HTMLInputElement | null>(null);
   const snippetLength = React.useRef<number>(10);
@@ -117,7 +117,7 @@ export function DocSearchModal({
         React.KeyboardEvent
       >({
         id: 'docsearch',
-        defaultSelectedItemId: 0,
+        defaultActiveItemId: 0,
         placeholder,
         openOnFocus: true,
         initialState: {
@@ -139,6 +139,7 @@ export function DocSearchModal({
 
             return [
               {
+                sourceId: 'recentSearches',
                 onSelect({ item, event }) {
                   saveRecentSearch(item);
 
@@ -154,6 +155,7 @@ export function DocSearchModal({
                 },
               },
               {
+                sourceId: 'favoriteSearches',
                 onSelect({ item, event }) {
                   saveRecentSearch(item);
 
@@ -237,43 +239,46 @@ export function DocSearchModal({
 
               setContext({ nbHits });
 
-              return Object.values<DocSearchHit[]>(sources).map((items) => {
-                return {
-                  onSelect({ item, event }) {
-                    saveRecentSearch(item);
-
-                    if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
-                      onClose();
-                    }
-                  },
-                  getItemUrl({ item }) {
-                    return item.url;
-                  },
-                  getItems() {
-                    return Object.values(
-                      groupBy(items, (item) => item.hierarchy.lvl1)
-                    )
-                      .map(transformItems)
-                      .map((hits) =>
-                        hits.map((item) => {
-                          return {
-                            ...item,
-                            // eslint-disable-next-line @typescript-eslint/camelcase
-                            __docsearch_parent:
-                              item.type !== 'lvl1' &&
-                              hits.find(
-                                (siblingItem) =>
-                                  siblingItem.type === 'lvl1' &&
-                                  siblingItem.hierarchy.lvl1 ===
-                                    item.hierarchy.lvl1
-                              ),
-                          };
-                        })
+              return Object.values<DocSearchHit[]>(sources).map(
+                (items, index) => {
+                  return {
+                    sourceId: `hits${index}`,
+                    onSelect({ item, event }) {
+                      saveRecentSearch(item);
+
+                      if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                        onClose();
+                      }
+                    },
+                    getItemUrl({ item }) {
+                      return item.url;
+                    },
+                    getItems() {
+                      return Object.values(
+                        groupBy(items, (item) => item.hierarchy.lvl1)
                       )
-                      .flat();
-                  },
-                };
-              });
+                        .map(transformItems)
+                        .map((hits) =>
+                          hits.map((item) => {
+                            return {
+                              ...item,
+                              // eslint-disable-next-line @typescript-eslint/camelcase
+                              __docsearch_parent:
+                                item.type !== 'lvl1' &&
+                                hits.find(
+                                  (siblingItem) =>
+                                    siblingItem.type === 'lvl1' &&
+                                    siblingItem.hierarchy.lvl1 ===
+                                      item.hierarchy.lvl1
+                                ),
+                            };
+                          })
+                        )
+                        .flat();
+                    },
+                  };
+                }
+              );
             });
         },
       }),
@@ -298,7 +303,7 @@ export function DocSearchModal({
   useTouchEvents({
     getEnvironmentProps,
     panelElement: dropdownRef.current,
-    searchBoxElement: searchBoxRef.current,
+    formElement: formElementRef.current,
     inputElement: inputRef.current,
   });
   useTrapFocus({ container: containerRef.current });
@@ -387,7 +392,7 @@ export function DocSearchModal({
       }}
     >
       <div className="DocSearch-Modal" ref={modalRef}>
-        <header className="DocSearch-SearchBar" ref={searchBoxRef}>
+        <header className="DocSearch-SearchBar" ref={formElementRef}>
           <SearchBox
             {...autocomplete}
             state={state}

packages/docsearch-react/src/Results.tsx

@@ -1,11 +1,15 @@
-import { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
+import {
+  AutocompleteApi,
+  AutocompleteState,
+  BaseItem,
+} from '@algolia/autocomplete-core';
 import React from 'react';
 
 import { DocSearchProps } from './DocSearch';
 import { Snippet } from './Snippet';
 import { InternalDocSearchHit, StoredDocSearchHit } from './types';
 
-interface ResultsProps<TItem>
+interface ResultsProps<TItem extends BaseItem>
   extends AutocompleteApi<
     TItem,
     React.FormEvent,
@@ -51,7 +55,7 @@ export function Results<TItem extends StoredDocSearchHit>(
   );
 }
 
-interface ResultProps<TItem> extends ResultsProps<TItem> {
+interface ResultProps<TItem extends BaseItem> extends ResultsProps<TItem> {
   item: TItem;
   index: number;
 }

packages/docsearch-react/src/ScreenState.tsx

@@ -1,4 +1,8 @@
-import { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
+import {
+  AutocompleteApi,
+  AutocompleteState,
+  BaseItem,
+} from '@algolia/autocomplete-core';
 import React from 'react';
 
 import { DocSearchProps } from './DocSearch';
@@ -9,7 +13,7 @@ import { StartScreen } from './StartScreen';
 import { StoredSearchPlugin } from './stored-searches';
 import { InternalDocSearchHit, StoredDocSearchHit } from './types';
 
-export interface ScreenStateProps<TItem>
+export interface ScreenStateProps<TItem extends BaseItem>
   extends AutocompleteApi<
     TItem,
     React.FormEvent,

packages/docsearch-react/src/SearchBox.tsx

@@ -62,7 +62,6 @@ export function SearchBox(props: SearchBoxProps) {
             inputElement: props.inputRef.current!,
             autoFocus: props.autoFocus,
             maxLength: MAX_QUERY_SIZE,
-            enterKeyHint: 'go',
           })}
         />
 

packages/docsearch-react/src/types/DocSearchHit.ts

@@ -42,7 +42,7 @@ interface DocSearchHitSnippetResult {
   hierarchy_camel: DocSearchHitHighlightResultHierarchy[];
 }
 
-export interface DocSearchHit {
+export declare type DocSearchHit = {
   objectID: string;
   content: string | null;
   url: string;
@@ -78,4 +78,4 @@ export interface DocSearchHit {
     };
   };
   _distinctSeqID?: number;
-}
+};

packages/docsearch-react/src/useTouchEvents.ts

@@ -4,24 +4,24 @@ import React from 'react';
 interface UseTouchEventsProps {
   getEnvironmentProps: AutocompleteApi<any>['getEnvironmentProps'];
   panelElement: HTMLDivElement | null;
-  searchBoxElement: HTMLDivElement | null;
+  formElement: HTMLDivElement | null;
   inputElement: HTMLInputElement | null;
 }
 
 export function useTouchEvents({
   getEnvironmentProps,
   panelElement,
-  searchBoxElement,
+  formElement,
   inputElement,
 }: UseTouchEventsProps) {
   React.useEffect(() => {
-    if (!(panelElement && searchBoxElement && inputElement)) {
+    if (!(panelElement && formElement && inputElement)) {
       return undefined;
     }
 
     const { onTouchStart, onTouchMove } = getEnvironmentProps({
       panelElement,
-      searchBoxElement,
+      formElement,
       inputElement,
     });
 
@@ -32,5 +32,5 @@ export function useTouchEvents({
       window.removeEventListener('touchstart', onTouchStart);
       window.removeEventListener('touchmove', onTouchMove);
     };
-  }, [getEnvironmentProps, panelElement, searchBoxElement, inputElement]);
+  }, [getEnvironmentProps, panelElement, formElement, inputElement]);
 }