@docusaurus/theme-search-algolia 3.6.3 → 3.7.0

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

@@ -4,4 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export default function SearchBar(): JSX.Element;
+import { type ReactNode } from 'react';
+export default function SearchBar(): ReactNode;

package/lib/theme/SearchBar/index.js

@@ -22,6 +22,70 @@ import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import translations from '@theme/SearchTranslations';
 let DocSearchModal = null;
+function importDocSearchModalIfNeeded() {
+  if (DocSearchModal) {
+    return Promise.resolve();
+  }
+  return Promise.all([
+    import('@docsearch/react/modal'),
+    import('@docsearch/react/style'),
+    import('./styles.css'),
+  ]).then(([{DocSearchModal: Modal}]) => {
+    DocSearchModal = Modal;
+  });
+}
+function useNavigator({externalUrlRegex}) {
+  const history = useHistory();
+  const [navigator] = useState(() => {
+    return {
+      navigate(params) {
+        // Algolia results could contain URL's from other domains which cannot
+        // be served through history and should navigate with window.location
+        if (isRegexpStringMatch(externalUrlRegex, params.itemUrl)) {
+          window.location.href = params.itemUrl;
+        } else {
+          history.push(params.itemUrl);
+        }
+      },
+    };
+  });
+  return navigator;
+}
+function useTransformSearchClient() {
+  const {
+    siteMetadata: {docusaurusVersion},
+  } = useDocusaurusContext();
+  return useCallback(
+    (searchClient) => {
+      searchClient.addAlgoliaAgent('docusaurus', docusaurusVersion);
+      return searchClient;
+    },
+    [docusaurusVersion],
+  );
+}
+function useTransformItems(props) {
+  const processSearchResultUrl = useSearchResultUrlProcessor();
+  const [transformItems] = useState(() => {
+    return (items) =>
+      props.transformItems
+        ? // Custom transformItems
+          props.transformItems(items)
+        : // Default transformItems
+          items.map((item) => ({
+            ...item,
+            url: processSearchResultUrl(item.url),
+          }));
+  });
+  return transformItems;
+}
+function useResultsFooterComponent({closeModal}) {
+  return useMemo(
+    () =>
+      ({state}) =>
+        <ResultsFooter state={state} onClose={closeModal} />,
+    [closeModal],
+  );
+}
 function Hit({hit, children}) {
   return <Link to={hit.url}>{children}</Link>;
 }
@@ -37,13 +101,11 @@ function ResultsFooter({state, onClose}) {
     </Link>
   );
 }
-function mergeFacetFilters(f1, f2) {
-  const normalize = (f) => (typeof f === 'string' ? [f] : f);
-  return [...normalize(f1), ...normalize(f2)];
-}
-function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
-  const {siteMetadata} = useDocusaurusContext();
-  const processSearchResultUrl = useSearchResultUrlProcessor();
+function useSearchParameters({contextualSearch, ...props}) {
+  function mergeFacetFilters(f1, f2) {
+    const normalize = (f) => (typeof f === 'string' ? [f] : f);
+    return [...normalize(f1), ...normalize(f2)];
+  }
   const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
   const configFacetFilters = props.searchParameters?.facetFilters ?? [];
   const facetFilters = contextualSearch
@@ -51,28 +113,22 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
       mergeFacetFilters(contextualSearchFacetFilters, configFacetFilters)
     : // ... or use config facetFilters
       configFacetFilters;
-  // We let user override default searchParameters if she wants to
-  const searchParameters = {
+  // We let users override default searchParameters if they want to
+  return {
     ...props.searchParameters,
     facetFilters,
   };
-  const history = useHistory();
+}
+function DocSearch({externalUrlRegex, ...props}) {
+  const navigator = useNavigator({externalUrlRegex});
+  const searchParameters = useSearchParameters({...props});
+  const transformItems = useTransformItems(props);
+  const transformSearchClient = useTransformSearchClient();
   const searchContainer = useRef(null);
+  // TODO remove "as any" after React 19 upgrade
   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 prepareSearchContainer = useCallback(() => {
     if (!searchContainer.current) {
       const divElement = document.createElement('div');
@@ -83,10 +139,11 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
   const openModal = useCallback(() => {
     prepareSearchContainer();
     importDocSearchModalIfNeeded().then(() => setIsOpen(true));
-  }, [importDocSearchModalIfNeeded, prepareSearchContainer]);
+  }, [prepareSearchContainer]);
   const closeModal = useCallback(() => {
     setIsOpen(false);
     searchButtonRef.current?.focus();
+    setInitialQuery(undefined);
   }, []);
   const handleInput = useCallback(
     (event) => {
@@ -101,44 +158,7 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
     },
     [openModal],
   );
-  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) =>
-    props.transformItems
-      ? // Custom transformItems
-        props.transformItems(items)
-      : // Default transformItems
-        items.map((item) => ({
-          ...item,
-          url: processSearchResultUrl(item.url),
-        })),
-  ).current;
-  const resultsFooterComponent = useMemo(
-    () =>
-      // eslint-disable-next-line react/no-unstable-nested-components
-      (footerProps) =>
-        <ResultsFooter {...footerProps} onClose={closeModal} />,
-    [closeModal],
-  );
-  const transformSearchClient = useCallback(
-    (searchClient) => {
-      searchClient.addAlgoliaAgent(
-        'docusaurus',
-        siteMetadata.docusaurusVersion,
-      );
-      return searchClient;
-    },
-    [siteMetadata.docusaurusVersion],
-  );
+  const resultsFooterComponent = useResultsFooterComponent({closeModal});
   useDocSearchKeyboardEvents({
     isOpen,
     onOpen: openModal,
@@ -165,7 +185,7 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={openModal}
         ref={searchButtonRef}
-        translations={translations.button}
+        translations={props.translations?.button ?? translations.button}
       />
 
       {isOpen &&
@@ -183,10 +203,10 @@ function DocSearch({contextualSearch, externalUrlRegex, ...props}) {
             {...(props.searchPagePath && {
               resultsFooterComponent,
             })}
+            placeholder={translations.placeholder}
             {...props}
+            translations={props.translations?.modal ?? translations.modal}
             searchParameters={searchParameters}
-            placeholder={translations.placeholder}
-            translations={translations.modal}
           />,
           searchContainer.current,
         )}

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

@@ -4,4 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export default function SearchPage(): JSX.Element;
+import { type ReactNode } from 'react';
+export default function SearchPage(): ReactNode;

package/lib/theme/SearchPage/index.js

@@ -8,7 +8,7 @@
 import React, {useEffect, useReducer, useRef, useState} from 'react';
 import clsx from 'clsx';
 import algoliaSearchHelper from 'algoliasearch-helper';
-import algoliaSearch from 'algoliasearch/lite';
+import {liteClient} from 'algoliasearch/lite';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
@@ -173,7 +173,7 @@ function SearchPageContent() {
   const disjunctiveFacets = contextualSearch
     ? ['language', 'docusaurus_tag']
     : [];
-  const algoliaClient = algoliaSearch(appId, apiKey);
+  const algoliaClient = liteClient(appId, apiKey);
   const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore: why errors happens after upgrading to TS 5.5 ?

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-search-algolia",
-  "version": "3.6.3",
+  "version": "3.7.0",
   "description": "Algolia search component for Docusaurus.",
   "main": "lib/index.js",
   "sideEffects": [
@@ -33,16 +33,16 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docsearch/react": "^3.5.2",
-    "@docusaurus/core": "3.6.3",
-    "@docusaurus/logger": "3.6.3",
-    "@docusaurus/plugin-content-docs": "3.6.3",
-    "@docusaurus/theme-common": "3.6.3",
-    "@docusaurus/theme-translations": "3.6.3",
-    "@docusaurus/utils": "3.6.3",
-    "@docusaurus/utils-validation": "3.6.3",
-    "algoliasearch": "^4.18.0",
-    "algoliasearch-helper": "^3.13.3",
+    "@docsearch/react": "^3.8.1",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/logger": "3.7.0",
+    "@docusaurus/plugin-content-docs": "3.7.0",
+    "@docusaurus/theme-common": "3.7.0",
+    "@docusaurus/theme-translations": "3.7.0",
+    "@docusaurus/utils": "3.7.0",
+    "@docusaurus/utils-validation": "3.7.0",
+    "algoliasearch": "^5.17.1",
+    "algoliasearch-helper": "^3.22.6",
     "clsx": "^2.0.0",
     "eta": "^2.2.0",
     "fs-extra": "^11.1.1",
@@ -51,14 +51,14 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.6.3"
+    "@docusaurus/module-type-aliases": "3.7.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "9c0e19c669ffcbc0972bfd8527e8b93f1f74e7d8"
+  "gitHead": "dd59750c16fe6908a26f18806a54d4c3dbe6db43"
 }

package/src/theme/SearchBar/index.tsx

@@ -5,7 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
 import {createPortal} from 'react-dom';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import Head from '@docusaurus/Head';
@@ -22,17 +28,17 @@ import {
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import translations from '@theme/SearchTranslations';
-
-import type {AutocompleteState} from '@algolia/autocomplete-core';
 import type {
+  InternalDocSearchHit,
   DocSearchModal as DocSearchModalType,
   DocSearchModalProps,
-} from '@docsearch/react';
-import type {
-  InternalDocSearchHit,
   StoredDocSearchHit,
-} from '@docsearch/react/dist/esm/types';
-import type {SearchClient} from 'algoliasearch/lite';
+  DocSearchTransformClient,
+  DocSearchHit,
+} from '@docsearch/react';
+
+import type {AutocompleteState} from '@algolia/autocomplete-core';
+import type {FacetFilters} from 'algoliasearch/lite';
 
 type DocSearchProps = Omit<
   DocSearchModalProps,
@@ -45,6 +51,85 @@ type DocSearchProps = Omit<
 
 let DocSearchModal: typeof DocSearchModalType | null = null;
 
+function importDocSearchModalIfNeeded() {
+  if (DocSearchModal) {
+    return Promise.resolve();
+  }
+  return Promise.all([
+    import('@docsearch/react/modal') as Promise<
+      typeof import('@docsearch/react')
+    >,
+    import('@docsearch/react/style'),
+    import('./styles.css'),
+  ]).then(([{DocSearchModal: Modal}]) => {
+    DocSearchModal = Modal;
+  });
+}
+
+function useNavigator({
+  externalUrlRegex,
+}: Pick<DocSearchProps, 'externalUrlRegex'>) {
+  const history = useHistory();
+  const [navigator] = useState<DocSearchModalProps['navigator']>(() => {
+    return {
+      navigate(params) {
+        // Algolia results could contain URL's from other domains which cannot
+        // be served through history and should navigate with window.location
+        if (isRegexpStringMatch(externalUrlRegex, params.itemUrl)) {
+          window.location.href = params.itemUrl;
+        } else {
+          history.push(params.itemUrl);
+        }
+      },
+    };
+  });
+  return navigator;
+}
+
+function useTransformSearchClient(): DocSearchModalProps['transformSearchClient'] {
+  const {
+    siteMetadata: {docusaurusVersion},
+  } = useDocusaurusContext();
+  return useCallback(
+    (searchClient: DocSearchTransformClient) => {
+      searchClient.addAlgoliaAgent('docusaurus', docusaurusVersion);
+      return searchClient;
+    },
+    [docusaurusVersion],
+  );
+}
+
+function useTransformItems(props: Pick<DocSearchProps, 'transformItems'>) {
+  const processSearchResultUrl = useSearchResultUrlProcessor();
+  const [transformItems] = useState<DocSearchModalProps['transformItems']>(
+    () => {
+      return (items: DocSearchHit[]) =>
+        props.transformItems
+          ? // Custom transformItems
+            props.transformItems(items)
+          : // Default transformItems
+            items.map((item) => ({
+              ...item,
+              url: processSearchResultUrl(item.url),
+            }));
+    },
+  );
+  return transformItems;
+}
+
+function useResultsFooterComponent({
+  closeModal,
+}: {
+  closeModal: () => void;
+}): DocSearchProps['resultsFooterComponent'] {
+  return useMemo(
+    () =>
+      ({state}) =>
+        <ResultsFooter state={state} onClose={closeModal} />,
+    [closeModal],
+  );
+}
+
 function Hit({
   hit,
   children,
@@ -74,25 +159,15 @@ function ResultsFooter({state, onClose}: ResultsFooterProps) {
   );
 }
 
-type FacetFilters = Required<
-  Required<DocSearchProps>['searchParameters']
->['facetFilters'];
-
-function mergeFacetFilters(f1: FacetFilters, f2: FacetFilters): FacetFilters {
-  const normalize = (
-    f: FacetFilters,
-  ): readonly string[] | readonly (string | readonly string[])[] =>
-    typeof f === 'string' ? [f] : f;
-  return [...normalize(f1), ...normalize(f2)] as FacetFilters;
-}
-
-function DocSearch({
+function useSearchParameters({
   contextualSearch,
-  externalUrlRegex,
   ...props
-}: DocSearchProps) {
-  const {siteMetadata} = useDocusaurusContext();
-  const processSearchResultUrl = useSearchResultUrlProcessor();
+}: DocSearchProps): DocSearchProps['searchParameters'] {
+  function mergeFacetFilters(f1: FacetFilters, f2: FacetFilters): FacetFilters {
+    const normalize = (f: FacetFilters): FacetFilters =>
+      typeof f === 'string' ? [f] : f;
+    return [...normalize(f1), ...normalize(f2)];
+  }
 
   const contextualSearchFacetFilters =
     useAlgoliaContextualFacetFilters() as FacetFilters;
@@ -106,36 +181,27 @@ function DocSearch({
     : // ... or use config facetFilters
       configFacetFilters;
 
-  // We let user override default searchParameters if she wants to
-  const searchParameters: DocSearchProps['searchParameters'] = {
+  // We let users override default searchParameters if they want to
+  return {
     ...props.searchParameters,
     facetFilters,
   };
+}
+
+function DocSearch({externalUrlRegex, ...props}: DocSearchProps) {
+  const navigator = useNavigator({externalUrlRegex});
+  const searchParameters = useSearchParameters({...props});
+  const transformItems = useTransformItems(props);
+  const transformSearchClient = useTransformSearchClient();
 
-  const history = useHistory();
   const searchContainer = useRef<HTMLDivElement | null>(null);
-  const searchButtonRef = useRef<HTMLButtonElement>(null);
+  // TODO remove "as any" after React 19 upgrade
+  const searchButtonRef = useRef<HTMLButtonElement>(null as any);
   const [isOpen, setIsOpen] = useState(false);
   const [initialQuery, setInitialQuery] = useState<string | undefined>(
     undefined,
   );
 
-  const importDocSearchModalIfNeeded = useCallback(() => {
-    if (DocSearchModal) {
-      return Promise.resolve();
-    }
-
-    return Promise.all([
-      import('@docsearch/react/modal') as Promise<
-        typeof import('@docsearch/react')
-      >,
-      import('@docsearch/react/style'),
-      import('./styles.css'),
-    ]).then(([{DocSearchModal: Modal}]) => {
-      DocSearchModal = Modal;
-    });
-  }, []);
-
   const prepareSearchContainer = useCallback(() => {
     if (!searchContainer.current) {
       const divElement = document.createElement('div');
@@ -147,11 +213,12 @@ function DocSearch({
   const openModal = useCallback(() => {
     prepareSearchContainer();
     importDocSearchModalIfNeeded().then(() => setIsOpen(true));
-  }, [importDocSearchModalIfNeeded, prepareSearchContainer]);
+  }, [prepareSearchContainer]);
 
   const closeModal = useCallback(() => {
     setIsOpen(false);
     searchButtonRef.current?.focus();
+    setInitialQuery(undefined);
   }, []);
 
   const handleInput = useCallback(
@@ -168,50 +235,7 @@ function DocSearch({
     [openModal],
   );
 
-  const navigator = useRef({
-    navigate({itemUrl}: {itemUrl?: string}) {
-      // 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<DocSearchModalProps['transformItems']>(
-    (items) =>
-      props.transformItems
-        ? // Custom transformItems
-          props.transformItems(items)
-        : // Default transformItems
-          items.map((item) => ({
-            ...item,
-            url: processSearchResultUrl(item.url),
-          })),
-  ).current;
-
-  const resultsFooterComponent: DocSearchProps['resultsFooterComponent'] =
-    useMemo(
-      () =>
-        // eslint-disable-next-line react/no-unstable-nested-components
-        (footerProps: Omit<ResultsFooterProps, 'onClose'>): JSX.Element =>
-          <ResultsFooter {...footerProps} onClose={closeModal} />,
-      [closeModal],
-    );
-
-  const transformSearchClient = useCallback(
-    (searchClient: SearchClient) => {
-      searchClient.addAlgoliaAgent(
-        'docusaurus',
-        siteMetadata.docusaurusVersion,
-      );
-
-      return searchClient;
-    },
-    [siteMetadata.docusaurusVersion],
-  );
+  const resultsFooterComponent = useResultsFooterComponent({closeModal});
 
   useDocSearchKeyboardEvents({
     isOpen,
@@ -240,7 +264,7 @@ function DocSearch({
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={openModal}
         ref={searchButtonRef}
-        translations={translations.button}
+        translations={props.translations?.button ?? translations.button}
       />
 
       {isOpen &&
@@ -258,10 +282,10 @@ function DocSearch({
             {...(props.searchPagePath && {
               resultsFooterComponent,
             })}
+            placeholder={translations.placeholder}
             {...props}
+            translations={props.translations?.modal ?? translations.modal}
             searchParameters={searchParameters}
-            placeholder={translations.placeholder}
-            translations={translations.modal}
           />,
           searchContainer.current,
         )}
@@ -269,7 +293,7 @@ function DocSearch({
   );
 }
 
-export default function SearchBar(): JSX.Element {
+export default function SearchBar(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return <DocSearch {...(siteConfig.themeConfig.algolia as DocSearchProps)} />;
 }

package/src/theme/SearchPage/index.tsx

@@ -7,11 +7,17 @@
 
 /* eslint-disable jsx-a11y/no-autofocus */
 
-import React, {useEffect, useReducer, useRef, useState} from 'react';
+import React, {
+  type ReactNode,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import clsx from 'clsx';
 
 import algoliaSearchHelper from 'algoliasearch-helper';
-import algoliaSearch from 'algoliasearch/lite';
+import {liteClient} from 'algoliasearch/lite';
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import Head from '@docusaurus/Head';
@@ -154,7 +160,7 @@ type ResultDispatcher =
   | {type: 'update'; value: ResultDispatcherState}
   | {type: 'advance'; value?: undefined};
 
-function SearchPageContent(): JSX.Element {
+function SearchPageContent(): ReactNode {
   const {
     i18n: {currentLocale},
   } = useDocusaurusContext();
@@ -219,7 +225,7 @@ function SearchPageContent(): JSX.Element {
     ? ['language', 'docusaurus_tag']
     : [];
 
-  const algoliaClient = algoliaSearch(appId, apiKey);
+  const algoliaClient = liteClient(appId, apiKey);
   const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore: why errors happens after upgrading to TS 5.5 ?
@@ -530,7 +536,7 @@ function SearchPageContent(): JSX.Element {
   );
 }
 
-export default function SearchPage(): JSX.Element {
+export default function SearchPage(): ReactNode {
   return (
     <HtmlClassNameProvider className="search-page-wrapper">
       <SearchPageContent />

package/src/theme-search-algolia.d.ts

@@ -7,23 +7,36 @@
 
 declare module '@docusaurus/theme-search-algolia' {
   import type {DeepPartial} from 'utility-types';
+  import type {DocSearchProps} from '@docsearch/react';
 
-  export type ThemeConfig = {
-    algolia: {
-      contextualSearch: boolean;
-      externalUrlRegex?: string;
-      appId: string;
-      apiKey: string;
-      indexName: string;
-      searchParameters: {[key: string]: unknown};
-      searchPagePath: string | false | null;
-      replaceSearchResultPathname?: {
-        from: string;
-        to: string;
-      };
-      insights?: boolean;
+  // DocSearch props that Docusaurus exposes directly through props forwarding
+  type DocusaurusDocSearchProps = Pick<
+    DocSearchProps,
+    | 'appId'
+    | 'apiKey'
+    | 'indexName'
+    | 'placeholder'
+    | 'translations'
+    | 'searchParameters'
+    | 'insights'
+    | 'initialQuery'
+  >;
+
+  type ThemeConfigAlgolia = DocusaurusDocSearchProps & {
+    // Docusaurus custom options, not coming from DocSearch
+    contextualSearch: boolean;
+    externalUrlRegex?: string;
+    searchPagePath: string | false | null;
+    replaceSearchResultPathname?: {
+      from: string;
+      to: string;
     };
   };
+
+  export type ThemeConfig = DocusaurusDocSearchProps & {
+    algolia: ThemeConfigAlgolia;
+  };
+
   export type UserThemeConfig = DeepPartial<ThemeConfig>;
 }
 
@@ -38,11 +51,15 @@ declare module '@docusaurus/theme-search-algolia/client' {
 }
 
 declare module '@theme/SearchPage' {
-  export default function SearchPage(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function SearchPage(): ReactNode;
 }
 
 declare module '@theme/SearchBar' {
-  export default function SearchBar(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function SearchBar(): ReactNode;
 }
 
 declare module '@theme/SearchTranslations' {