feat(docsearch): forward props to autocomplete-core

packages/docsearch-react/src/DocSearch.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   createAutocomplete,
   AutocompleteState,
+  PublicAutocompleteOptions,
 } from '@francoischalifour/autocomplete-core';
 import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia';
 
@@ -17,7 +18,11 @@ import { SearchBox } from './SearchBox';
 import { ScreenState } from './ScreenState';
 import { Footer } from './Footer';
 
-interface DocSearchProps {
+interface DocSearchProps
+  extends Omit<
+    PublicAutocompleteOptions<InternalDocSearchHit>,
+    'onStateChange' | 'getSources'
+  > {
   appId?: string;
   apiKey: string;
   indexName: string;
@@ -31,6 +36,7 @@ export function DocSearch({
   indexName,
   searchParameters,
   onClose = noop,
+  ...autocompleteProps
 }: DocSearchProps) {
   const [state, setState] = React.useState<
     AutocompleteState<InternalDocSearchHit>
@@ -100,6 +106,7 @@ export function DocSearch({
         initialState: {
           query: initialQuery,
         },
+        ...autocompleteProps,
         onStateChange({ state }) {
           setState(state as any);
         },

packages/website/src/theme/SearchBar/index.js

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useHistory } from '@docusaurus/router';
 import { SearchButton } from 'docsearch-react';
 
 let DocSearch = null;
@@ -11,6 +12,7 @@ function SearchBar() {
   const [isLoaded, setIsLoaded] = useState(false);
   const [isShowing, setIsShowing] = useState(false);
   const { siteConfig = {} } = useDocusaurusContext();
+  const history = useHistory();
 
   const {
     indexName,
@@ -90,6 +92,11 @@ function SearchBar() {
             indexName={indexName}
             searchParameters={searchParameters}
             onClose={onClose}
+            navigator={{
+              navigate({ suggestionUrl }) {
+                history.push(suggestionUrl);
+              },
+            }}
           />,
           document.body
         )}