Fixed search bar of the docs example not working (#3247)

* fixed search bar not working

* fixed search bar not working during build

* fix search bar throwing error on production site

1 files changed, 94 insertions, 76 deletions

diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx
index 4d06ce00b..5b1056d14 100644
--- a/examples/docs/src/components/Header/Search.tsx
+++ b/examples/docs/src/components/Header/Search.tsx
@@ -1,86 +1,104 @@
 /* jsxImportSource: react */
-import { useState, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import * as docSearchReact from '@docsearch/react';
-import * as CONFIG from '../../config';
-import '@docsearch/css/dist/style.css';
-import './Search.css';
+import { useState, useCallback, useRef } from "react";
+import * as CONFIG from "../../config";
+import "@docsearch/css/dist/style.css";
+import "./Search.css";
 
-const { DocSearchModal, useDocSearchKeyboardEvents } = docSearchReact.default;
+// @ts-ignore
+import * as docSearchReact from "@docsearch/react";
+// @ts-ignore
+import { createPortal } from "react-dom";
 
 export default function Search() {
-	const [isOpen, setIsOpen] = useState(false);
-	const searchButtonRef = useRef();
-	const [initialQuery, setInitialQuery] = useState(null);
+  const DocSearchModal =
+    docSearchReact.DocSearchModal || docSearchReact.default.DocSearchModal;
 
-	const onOpen = useCallback(() => {
-		setIsOpen(true);
-	}, [setIsOpen]);
+  const useDocSearchKeyboardEvents =
+    docSearchReact.useDocSearchKeyboardEvents ||
+    docSearchReact.default.useDocSearchKeyboardEvents;
 
-	const onClose = useCallback(() => {
-		setIsOpen(false);
-	}, [setIsOpen]);
+  const [isOpen, setIsOpen] = useState(false);
+  const searchButtonRef = useRef();
+  const [initialQuery, setInitialQuery] = useState(null);
 
-	const onInput = useCallback(
-		(e) => {
-			setIsOpen(true);
-			setInitialQuery(e.key);
-		},
-		[setIsOpen, setInitialQuery]
-	);
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
 
-	useDocSearchKeyboardEvents({
-		isOpen,
-		onOpen,
-		onClose,
-		onInput,
-		searchButtonRef,
-	});
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
 
-	return (
-		<>
-			<button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input">
-				<svg width="24" height="24" fill="none">
-					<path
-						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					/>
-				</svg>
-				<span>Search</span>
-				<span className="search-hint">
-					<span className="sr-only">Press </span>
-					<kbd>/</kbd>
-					<span className="sr-only"> to search</span>
-				</span>
-			</button>
-			{isOpen &&
-				createPortal(
-					<DocSearchModal
-						initialQuery={initialQuery}
-						initialScrollY={window.scrollY}
-						onClose={onClose}
-						indexName={(CONFIG as any).ALGOLIA.indexName}
-						appId={(CONFIG as any).ALGOLIA.appId}
-						apiKey={(CONFIG as any).ALGOLIA.apiKey}
-						transformItems={(items) => {
-							return items.map((item) => {
-								// We transform the absolute URL into a relative URL to
-								// work better on localhost, preview URLS.
-								const a = document.createElement('a');
-								a.href = item.url;
-								const hash = a.hash === '#overview' ? '' : a.hash;
-								return {
-									...item,
-									url: `${a.pathname}${hash}`,
-								};
-							});
-						}}
-					/>,
-					document.body
-				)}
-		</>
-	);
+  const onInput = useCallback(
+    (e) => {
+      setIsOpen(true);
+      setInitialQuery(e.key);
+    },
+    [setIsOpen, setInitialQuery]
+  );
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose,
+    onInput,
+    searchButtonRef,
+  });
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={searchButtonRef}
+        onClick={onOpen}
+        className="search-input"
+      >
+        <svg width="24" height="24" fill="none">
+          <path
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+
+        <span>Search</span>
+
+        <span className="search-hint">
+          <span className="sr-only">Press </span>
+
+          <kbd>/</kbd>
+
+          <span className="sr-only"> to search</span>
+        </span>
+      </button>
+
+      {isOpen &&
+        createPortal(
+          <DocSearchModal
+            initialQuery={initialQuery}
+            initialScrollY={window.scrollY}
+            onClose={onClose}
+            indexName={(CONFIG as any).ALGOLIA.indexName}
+            appId={(CONFIG as any).ALGOLIA.appId}
+            apiKey={(CONFIG as any).ALGOLIA.apiKey}
+            transformItems={(items) => {
+              return items.map((item) => {
+                // We transform the absolute URL into a relative URL to
+                // work better on localhost, preview URLS.
+                const a = document.createElement("a");
+                a.href = item.url;
+                const hash = a.hash === "#overview" ? "" : a.hash;
+                return {
+                  ...item,
+                  url: `${a.pathname}${hash}`,
+                };
+              });
+            }}
+          />,
+          document.body
+        )}
+    </>
+  );
 }