@docusaurus/theme-search-algolia 2.0.0-beta.15 → 2.0.0-beta.16

package/lib/client/index.js

@@ -4,4 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { useAlgoliaContextualFacetFilters } from './useAlgoliaContextualFacetFilters';
+export {useAlgoliaContextualFacetFilters} from './useAlgoliaContextualFacetFilters';

package/lib/client/useAlgoliaContextualFacetFilters.js

@@ -4,12 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useContextualSearchFilters } from '@docusaurus/theme-common';
+import {useContextualSearchFilters} from '@docusaurus/theme-common';
 // Translate search-engine agnostic search filters to Algolia search filters
 export function useAlgoliaContextualFacetFilters() {
-    const { locale, tags } = useContextualSearchFilters();
-    // seems safe to convert locale->language, see AlgoliaSearchMetadata comment
-    const languageFilter = `language:${locale}`;
-    const tagsFilter = tags.map((tag) => `docusaurus_tag:${tag}`);
-    return [languageFilter, tagsFilter];
+  const {locale, tags} = useContextualSearchFilters();
+  // seems safe to convert locale->language, see AlgoliaSearchMetadata comment
+  const languageFilter = `language:${locale}`;
+  const tagsFilter = tags.map((tag) => `docusaurus_tag:${tag}`);
+  return [languageFilter, tagsFilter];
 }

package/lib/index.js

@@ -1,80 +1,109 @@
-"use strict";
+'use strict';
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, '__esModule', {value: true});
 exports.validateThemeConfig = void 0;
-const tslib_1 = require("tslib");
-const path_1 = (0, tslib_1.__importDefault)(require("path"));
-const fs_1 = (0, tslib_1.__importDefault)(require("fs"));
-const eta_1 = require("eta");
-const utils_1 = require("@docusaurus/utils");
-const theme_translations_1 = require("@docusaurus/theme-translations");
-const logger_1 = (0, tslib_1.__importDefault)(require("@docusaurus/logger"));
-const opensearch_1 = (0, tslib_1.__importDefault)(require("./templates/opensearch"));
-const lodash_1 = require("lodash");
-const getCompiledOpenSearchTemplate = (0, lodash_1.memoize)(() => (0, eta_1.compile)(opensearch_1.default.trim()));
+const tslib_1 = require('tslib');
+const path_1 = (0, tslib_1.__importDefault)(require('path'));
+const fs_extra_1 = (0, tslib_1.__importDefault)(require('fs-extra'));
+const eta_1 = require('eta');
+const utils_1 = require('@docusaurus/utils');
+const theme_translations_1 = require('@docusaurus/theme-translations');
+const logger_1 = (0, tslib_1.__importDefault)(require('@docusaurus/logger'));
+const opensearch_1 = (0, tslib_1.__importDefault)(
+  require('./templates/opensearch'),
+);
+const lodash_1 = (0, tslib_1.__importDefault)(require('lodash'));
+const getCompiledOpenSearchTemplate = lodash_1.default.memoize(() =>
+  (0, eta_1.compile)(opensearch_1.default.trim()),
+);
 function renderOpenSearchTemplate(data) {
-    const compiled = getCompiledOpenSearchTemplate();
-    return compiled(data, eta_1.defaultConfig);
+  const compiled = getCompiledOpenSearchTemplate();
+  return compiled(data, eta_1.defaultConfig);
 }
 const OPEN_SEARCH_FILENAME = 'opensearch.xml';
 function themeSearchAlgolia(context) {
-    const { baseUrl, siteConfig: { title, url, favicon }, i18n: { currentLocale }, } = context;
-    return {
-        name: 'docusaurus-theme-search-algolia',
-        getThemePath() {
-            return path_1.default.resolve(__dirname, './theme');
-        },
-        getTypeScriptThemePath() {
-            return path_1.default.resolve(__dirname, '..', 'src', 'theme');
-        },
-        getDefaultCodeTranslationMessages() {
-            return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
-                locale: currentLocale,
-                name: 'theme-search-algolia',
-            });
-        },
-        async contentLoaded({ actions: { addRoute } }) {
-            addRoute({
-                path: (0, utils_1.normalizeUrl)([baseUrl, 'search']),
-                component: '@theme/SearchPage',
-                exact: true,
-            });
-        },
-        async postBuild({ outDir }) {
-            try {
-                fs_1.default.writeFileSync(path_1.default.join(outDir, OPEN_SEARCH_FILENAME), renderOpenSearchTemplate({
-                    title,
-                    url: url + baseUrl,
-                    favicon: favicon ? (0, utils_1.normalizeUrl)([url, baseUrl, favicon]) : null,
-                }));
-            }
-            catch (e) {
-                logger_1.default.error('Generating OpenSearch file failed.');
-                throw e;
-            }
-        },
-        injectHtmlTags() {
-            return {
-                headTags: [
-                    {
-                        tagName: 'link',
-                        attributes: {
-                            rel: 'search',
-                            type: 'application/opensearchdescription+xml',
-                            title,
-                            href: (0, utils_1.normalizeUrl)([baseUrl, OPEN_SEARCH_FILENAME]),
-                        },
-                    },
-                ],
-            };
-        },
-    };
+  const {
+    baseUrl,
+    siteConfig: {title, url, favicon, themeConfig},
+    i18n: {currentLocale},
+  } = context;
+  const {
+    algolia: {searchPagePath},
+  } = themeConfig;
+  return {
+    name: 'docusaurus-theme-search-algolia',
+    getThemePath() {
+      return path_1.default.resolve(__dirname, '../lib/theme');
+    },
+    getTypeScriptThemePath() {
+      return path_1.default.resolve(__dirname, '../src/theme');
+    },
+    getDefaultCodeTranslationMessages() {
+      return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+        locale: currentLocale,
+        name: 'theme-search-algolia',
+      });
+    },
+    async contentLoaded({actions: {addRoute}}) {
+      if (searchPagePath) {
+        addRoute({
+          path: (0, utils_1.normalizeUrl)([baseUrl, searchPagePath]),
+          component: '@theme/SearchPage',
+          exact: true,
+        });
+      }
+    },
+    async postBuild({outDir}) {
+      if (searchPagePath) {
+        const siteUrl = (0, utils_1.normalizeUrl)([url, baseUrl]);
+        try {
+          await fs_extra_1.default.writeFile(
+            path_1.default.join(outDir, OPEN_SEARCH_FILENAME),
+            renderOpenSearchTemplate({
+              title,
+              siteUrl,
+              searchUrl: (0, utils_1.normalizeUrl)([siteUrl, searchPagePath]),
+              faviconUrl: favicon
+                ? (0, utils_1.normalizeUrl)([siteUrl, favicon])
+                : null,
+            }),
+          );
+        } catch (err) {
+          logger_1.default.error('Generating OpenSearch file failed.');
+          throw err;
+        }
+      }
+    },
+    injectHtmlTags() {
+      if (!searchPagePath) {
+        return {};
+      }
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'search',
+              type: 'application/opensearchdescription+xml',
+              title,
+              href: (0, utils_1.normalizeUrl)([baseUrl, OPEN_SEARCH_FILENAME]),
+            },
+          },
+        ],
+      };
+    },
+  };
 }
 exports.default = themeSearchAlgolia;
-var validateThemeConfig_1 = require("./validateThemeConfig");
-Object.defineProperty(exports, "validateThemeConfig", { enumerable: true, get: function () { return validateThemeConfig_1.validateThemeConfig; } });
+var validateThemeConfig_1 = require('./validateThemeConfig');
+Object.defineProperty(exports, 'validateThemeConfig', {
+  enumerable: true,
+  get: function () {
+    return validateThemeConfig_1.validateThemeConfig;
+  },
+});

package/lib/templates/opensearch.d.ts

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const _default: "\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<OpenSearchDescription xmlns=\"http://a9.com/-/spec/opensearch/1.1/\"\n                       xmlns:moz=\"http://www.mozilla.org/2006/browser/search/\">\n  <ShortName><%= it.title %></ShortName>\n  <Description>Search <%= it.title %></Description>\n  <InputEncoding>UTF-8</InputEncoding>\n  <% if (it.favicon) { _%>\n    <Image width=\"16\" height=\"16\" type=\"image/x-icon\"><%= it.favicon %></Image>\n  <% } _%>\n  <Url type=\"text/html\" method=\"get\" template=\"<%= it.url %>search?q={searchTerms}\"/>\n  <Url type=\"application/opensearchdescription+xml\" rel=\"self\" template=\"<%= it.url %>opensearch.xml\" />\n  <moz:SearchForm><%= it.url %></moz:SearchForm>\n</OpenSearchDescription>\n";
+declare const _default: "\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<OpenSearchDescription xmlns=\"http://a9.com/-/spec/opensearch/1.1/\"\n                       xmlns:moz=\"http://www.mozilla.org/2006/browser/search/\">\n  <ShortName><%= it.title %></ShortName>\n  <Description>Search <%= it.title %></Description>\n  <InputEncoding>UTF-8</InputEncoding>\n  <% if (it.faviconUrl) { _%>\n    <Image width=\"16\" height=\"16\" type=\"image/x-icon\"><%= it.faviconUrl %></Image>\n  <% } _%>\n  <Url type=\"text/html\" method=\"get\" template=\"<%= it.searchUrl %>?q={searchTerms}\"/>\n  <Url type=\"application/opensearchdescription+xml\" rel=\"self\" template=\"<%= it.siteUrl %>opensearch.xml\" />\n  <moz:SearchForm><%= it.siteUrl %></moz:SearchForm>\n</OpenSearchDescription>\n";
 export default _default;

package/lib/templates/opensearch.js

@@ -1,11 +1,11 @@
-"use strict";
+'use strict';
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, '__esModule', {value: true});
 exports.default = `
 <?xml version="1.0" encoding="UTF-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
@@ -13,11 +13,11 @@ exports.default = `
   <ShortName><%= it.title %></ShortName>
   <Description>Search <%= it.title %></Description>
   <InputEncoding>UTF-8</InputEncoding>
-  <% if (it.favicon) { _%>
-    <Image width="16" height="16" type="image/x-icon"><%= it.favicon %></Image>
+  <% if (it.faviconUrl) { _%>
+    <Image width="16" height="16" type="image/x-icon"><%= it.faviconUrl %></Image>
   <% } _%>
-  <Url type="text/html" method="get" template="<%= it.url %>search?q={searchTerms}"/>
-  <Url type="application/opensearchdescription+xml" rel="self" template="<%= it.url %>opensearch.xml" />
-  <moz:SearchForm><%= it.url %></moz:SearchForm>
+  <Url type="text/html" method="get" template="<%= it.searchUrl %>?q={searchTerms}"/>
+  <Url type="application/opensearchdescription+xml" rel="self" template="<%= it.siteUrl %>opensearch.xml" />
+  <moz:SearchForm><%= it.siteUrl %></moz:SearchForm>
 </OpenSearchDescription>
 `;

package/lib/theme/SearchBar/index.d.ts

@@ -5,5 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-declare function SearchBar(): JSX.Element;
-export default SearchBar;
+export default function SearchBar(): JSX.Element;

package/lib/theme/SearchBar/index.js

@@ -4,153 +4,209 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { createPortal } from 'react-dom';
+import React, {useState, useRef, useCallback, useMemo} from 'react';
+import {createPortal} from 'react-dom';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useHistory } from '@docusaurus/router';
-import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
+import {useHistory} from '@docusaurus/router';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
-import { isRegexpStringMatch, useSearchPage } from '@docusaurus/theme-common';
-import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
-import { useAlgoliaContextualFacetFilters } from '@docusaurus/theme-search-algolia/client';
-import { translate } from '@docusaurus/Translate';
+import {isRegexpStringMatch, useSearchPage} from '@docusaurus/theme-common';
+import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
+import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
+import Translate, {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 let DocSearchModal = null;
-function Hit({ hit, children, }) {
-    return <Link to={hit.url}>{children}</Link>;
+function Hit({hit, children}) {
+  return <Link to={hit.url}>{children}</Link>;
 }
-function ResultsFooter({ state, onClose }) {
-    const { generateSearchPageLink } = useSearchPage();
-    return (<Link to={generateSearchPageLink(state.query)} onClick={onClose}>
-      See all {state.context.nbHits} results
-    </Link>);
+function ResultsFooter({state, onClose}) {
+  const {generateSearchPageLink} = useSearchPage();
+  return (
+    <Link to={generateSearchPageLink(state.query)} onClick={onClose}>
+      <Translate
+        id="theme.SearchBar.seeAll"
+        values={{count: state.context.nbHits}}>
+        {'See all {count} results'}
+      </Translate>
+    </Link>
+  );
 }
 function mergeFacetFilters(f1, f2) {
-    const normalize = (f) => f instanceof Array ? f : [f];
-    return [...normalize(f1), ...normalize(f2)];
+  const normalize = (f) => (typeof f === 'string' ? [f] : f);
+  return [...normalize(f1), ...normalize(f2)];
 }
-function DocSearch({ contextualSearch, externalUrlRegex, ...props }) {
-    var _a, _b;
-    const { siteMetadata } = useDocusaurusContext();
-    const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
-    const configFacetFilters = (_b = (_a = props.searchParameters) === null || _a === void 0 ? void 0 : _a.facetFilters) !== null && _b !== void 0 ? _b : [];
-    const facetFilters = contextualSearch
-        ? // Merge contextual search filters with config filters
-            mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
-        : // ... or use config facetFilters
-            configFacetFilters;
-    // we let user override default searchParameters if he wants to
-    const searchParameters = {
-        ...props.searchParameters,
-        facetFilters,
-    };
-    const { withBaseUrl } = useBaseUrlUtils();
-    const history = useHistory();
-    const searchContainer = useRef(null);
-    const searchButtonRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [initialQuery, setInitialQuery] = useState(undefined);
-    const importDocSearchModalIfNeeded = useCallback(() => {
-        if (DocSearchModal) {
-            return Promise.resolve();
-        }
-        return Promise.all([
-            // @ts-ignore
-            import('@docsearch/react/modal'),
-            // @ts-ignore
-            import('@docsearch/react/style'),
-            import('./styles.css'),
-        ]).then(([{ DocSearchModal: Modal }]) => {
-            DocSearchModal = Modal;
-        });
-    }, []);
-    const onOpen = useCallback(() => {
-        importDocSearchModalIfNeeded().then(() => {
-            searchContainer.current = document.createElement('div');
-            document.body.insertBefore(searchContainer.current, document.body.firstChild);
-            setIsOpen(true);
-        });
-    }, [importDocSearchModalIfNeeded, setIsOpen]);
-    const onClose = useCallback(() => {
-        var _a;
-        setIsOpen(false);
-        (_a = searchContainer.current) === null || _a === void 0 ? void 0 : _a.remove();
-    }, [setIsOpen]);
-    const onInput = useCallback((event) => {
-        importDocSearchModalIfNeeded().then(() => {
-            setIsOpen(true);
-            setInitialQuery(event.key);
-        });
-    }, [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery]);
-    const navigator = useRef({
-        navigate({ itemUrl }) {
-            // Algolia results could contain URL's from other domains which cannot
-            // be served through history and should navigate with window.location
-            if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
-                window.location.href = itemUrl;
-            }
-            else {
-                history.push(itemUrl);
-            }
-        },
-    }).current;
-    const transformItems = useRef((items) => items.map((item) => {
-        // If Algolia contains a external domain, we should navigate without relative URL
-        if (isRegexpStringMatch(externalUrlRegex, item.url)) {
-            return item;
-        }
-        // We transform the absolute URL into a relative URL.
-        const url = new URL(item.url);
-        return {
-            ...item,
-            url: withBaseUrl(`${url.pathname}${url.hash}`),
-        };
-    })).current;
-    const resultsFooterComponent = useMemo(() => 
-    // eslint-disable-next-line react/no-unstable-nested-components
-    (footerProps) => <ResultsFooter {...footerProps} onClose={onClose}/>, [onClose]);
-    const transformSearchClient = useCallback((searchClient) => {
-        searchClient.addAlgoliaAgent('docusaurus', siteMetadata.docusaurusVersion);
-        return searchClient;
-    }, [siteMetadata.docusaurusVersion]);
-    useDocSearchKeyboardEvents({
-        isOpen,
-        onOpen,
-        onClose,
-        onInput,
-        searchButtonRef,
+function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
+  var _a, _b;
+  const {siteMetadata} = useDocusaurusContext();
+  const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
+  const configFacetFilters =
+    (_b =
+      (_a = props.searchParameters) === null || _a === void 0
+        ? void 0
+        : _a.facetFilters) !== null && _b !== void 0
+      ? _b
+      : [];
+  const facetFilters = contextualSearch
+    ? // Merge contextual search filters with config filters
+      mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
+    : // ... or use config facetFilters
+      configFacetFilters;
+  // we let user override default searchParameters if he wants to
+  const searchParameters = {
+    ...props.searchParameters,
+    facetFilters,
+  };
+  const {withBaseUrl} = useBaseUrlUtils();
+  const history = useHistory();
+  const searchContainer = useRef(null);
+  const searchButtonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState(undefined);
+  const importDocSearchModalIfNeeded = useCallback(() => {
+    if (DocSearchModal) {
+      return Promise.resolve();
+    }
+    return Promise.all([
+      import('@docsearch/react/modal'),
+      import('@docsearch/react/style'),
+      import('./styles.css'),
+    ]).then(([{DocSearchModal: Modal}]) => {
+      DocSearchModal = Modal;
     });
-    const translatedSearchLabel = translate({
-        id: 'theme.SearchBar.label',
-        message: 'Search',
-        description: 'The ARIA label and placeholder for search button',
+  }, []);
+  const onOpen = useCallback(() => {
+    importDocSearchModalIfNeeded().then(() => {
+      searchContainer.current = document.createElement('div');
+      document.body.insertBefore(
+        searchContainer.current,
+        document.body.firstChild,
+      );
+      setIsOpen(true);
     });
-    return (<>
+  }, [importDocSearchModalIfNeeded, setIsOpen]);
+  const onClose = useCallback(() => {
+    var _a;
+    setIsOpen(false);
+    (_a = searchContainer.current) === null || _a === void 0
+      ? void 0
+      : _a.remove();
+  }, [setIsOpen]);
+  const onInput = useCallback(
+    (event) => {
+      importDocSearchModalIfNeeded().then(() => {
+        setIsOpen(true);
+        setInitialQuery(event.key);
+      });
+    },
+    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
+  );
+  const navigator = useRef({
+    navigate({itemUrl}) {
+      // Algolia results could contain URL's from other domains which cannot
+      // be served through history and should navigate with window.location
+      if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
+        window.location.href = itemUrl;
+      } else {
+        history.push(itemUrl);
+      }
+    },
+  }).current;
+  const transformItems = useRef((items) =>
+    items.map((item) => {
+      // If Algolia contains a external domain, we should navigate without
+      // relative URL
+      if (isRegexpStringMatch(externalUrlRegex, item.url)) {
+        return item;
+      }
+      // We transform the absolute URL into a relative URL.
+      const url = new URL(item.url);
+      return {
+        ...item,
+        url: withBaseUrl(`${url.pathname}${url.hash}`),
+      };
+    }),
+  ).current;
+  const resultsFooterComponent = useMemo(
+    () =>
+      // eslint-disable-next-line react/no-unstable-nested-components
+      (footerProps) =>
+        <ResultsFooter {...footerProps} onClose={onClose} />,
+    [onClose],
+  );
+  const transformSearchClient = useCallback(
+    (searchClient) => {
+      searchClient.addAlgoliaAgent(
+        'docusaurus',
+        siteMetadata.docusaurusVersion,
+      );
+      return searchClient;
+    },
+    [siteMetadata.docusaurusVersion],
+  );
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
+  const translatedSearchLabel = translate({
+    id: 'theme.SearchBar.label',
+    message: 'Search',
+    description: 'The ARIA label and placeholder for search button',
+  });
+  return (
+    <>
       <Head>
         {/* This hints the browser that the website will load data from Algolia,
         and allows it to preconnect to the DocSearch cluster. It makes the first
         query faster, especially on mobile. */}
-        <link rel="preconnect" href={`https://${props.appId}-dsn.algolia.net`} crossOrigin="anonymous"/>
+        <link
+          rel="preconnect"
+          href={`https://${props.appId}-dsn.algolia.net`}
+          crossOrigin="anonymous"
+        />
       </Head>
 
       <div className={styles.searchBox}>
-        <DocSearchButton onTouchStart={importDocSearchModalIfNeeded} onFocus={importDocSearchModalIfNeeded} onMouseOver={importDocSearchModalIfNeeded} onClick={onOpen} ref={searchButtonRef} translations={{
+        <DocSearchButton
+          onTouchStart={importDocSearchModalIfNeeded}
+          onFocus={importDocSearchModalIfNeeded}
+          onMouseOver={importDocSearchModalIfNeeded}
+          onClick={onOpen}
+          ref={searchButtonRef}
+          translations={{
             buttonText: translatedSearchLabel,
             buttonAriaLabel: translatedSearchLabel,
-        }}/>
+          }}
+        />
       </div>
 
       {isOpen &&
-            DocSearchModal &&
-            searchContainer.current &&
-            createPortal(<DocSearchModal onClose={onClose} initialScrollY={window.scrollY} initialQuery={initialQuery} navigator={navigator} transformItems={transformItems} hitComponent={Hit} resultsFooterComponent={resultsFooterComponent} transformSearchClient={transformSearchClient} {...props} searchParameters={searchParameters}/>, searchContainer.current)}
-    </>);
+        DocSearchModal &&
+        searchContainer.current &&
+        createPortal(
+          <DocSearchModal
+            onClose={onClose}
+            initialScrollY={window.scrollY}
+            initialQuery={initialQuery}
+            navigator={navigator}
+            transformItems={transformItems}
+            hitComponent={Hit}
+            transformSearchClient={transformSearchClient}
+            {...(props.searchPagePath && {
+              resultsFooterComponent,
+            })}
+            {...props}
+            searchParameters={searchParameters}
+          />,
+          searchContainer.current,
+        )}
+    </>
+  );
 }
-function SearchBar() {
-    const { siteConfig } = useDocusaurusContext();
-    // @ts-ignore
-    return <DocSearch {...siteConfig.themeConfig.algolia}/>;
+export default function SearchBar() {
+  const {siteConfig} = useDocusaurusContext();
+  return <DocSearch {...siteConfig.themeConfig.algolia} />;
 }
-export default SearchBar;

package/lib/theme/SearchPage/index.d.ts

@@ -5,5 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-declare function SearchPage(): JSX.Element;
-export default SearchPage;
+export default function SearchPage(): JSX.Element;