From 8911d89d81d0bdcd86dbdb41ebda72514505f749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=A4=80=EC=84=9C?=
 <parkjunseo@bagjunseoui-MacBookPro.local>
Date: Mon, 30 Sep 2024 12:05:33 +0900
Subject: [PATCH 1/4] feat: clickSearchBoxOutsideHandler that Doc Search
 outside click hiding search hits

---
 docs/components/DocSearch/wrapper.tsx | 44 +++++++++++++++++++++------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
index ab0af65011..3d07d9336c 100644
--- a/docs/components/DocSearch/wrapper.tsx
+++ b/docs/components/DocSearch/wrapper.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react"
+import { useEffect, useRef, useState } from "react"
 import algoliasearch from "algoliasearch/lite"
 import { InstantSearch, Hits, useInstantSearch } from "react-instantsearch"
 //import { InstantSearchNext } from "react-instantsearch-nextjs"
@@ -33,6 +33,9 @@ const searchClient = {
 }
 
 export default function () {
+  const docSearchRef = useRef<HTMLDivElement>(null)
+  const [isSearchHitsVisible, setIsSearchHitsVisible] = useState(false)
+
   const ctrlKHandler = (e: KeyboardEvent) => {
     if (e.repeat || e.target instanceof HTMLInputElement) return
     if (e.ctrlKey && e.key === "k") {
@@ -41,26 +44,49 @@ export default function () {
     }
   }
 
+  const clickSearchBoxOutsideHandler = (event: MouseEvent) => {
+    if (
+      event.target &&
+      event.target instanceof Node &&
+      docSearchRef.current &&
+      docSearchRef.current.contains(event.target)
+    ) {
+      setIsSearchHitsVisible(true)
+      return
+    }
+
+    setIsSearchHitsVisible(false)
+  }
+
   useEffect(() => {
     window.addEventListener("keydown", ctrlKHandler)
+    window.addEventListener("mousedown", clickSearchBoxOutsideHandler)
 
-    return window.addEventListener("keydown", ctrlKHandler)
+    return () => {
+      window.removeEventListener("keydown", ctrlKHandler)
+      window.removeEventListener("mousedown", clickSearchBoxOutsideHandler)
+    }
   }, [])
 
   return (
-    <div className="relative [aside_&]:w-full max-md:[nav_&]:hidden">
+    <div
+      ref={docSearchRef}
+      className="relative [aside_&]:w-full max-md:[nav_&]:hidden"
+    >
       <InstantSearch
         indexName="next-auth"
         // @ts-expect-error
         searchClient={searchClient}
       >
         <CustomSearchBox />
-        <NoResultsBoundary>
-          <Hits
-            hitComponent={Hit}
-            className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
-          />
-        </NoResultsBoundary>
+        {isSearchHitsVisible && (
+          <NoResultsBoundary>
+            <Hits
+              hitComponent={Hit}
+              className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
+            />
+          </NoResultsBoundary>
+        )}
       </InstantSearch>
     </div>
   )

From 56936de436d4835a1c164dc39e668f8d8101d284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 2 Oct 2024 22:33:11 +0100
Subject: [PATCH 2/4] Update wrapper.tsx

---
 docs/components/DocSearch/wrapper.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
index 3d07d9336c..dd932f3501 100644
--- a/docs/components/DocSearch/wrapper.tsx
+++ b/docs/components/DocSearch/wrapper.tsx
@@ -44,21 +44,16 @@ export default function () {
     }
   }
 
-  const clickSearchBoxOutsideHandler = (event: MouseEvent) => {
-    if (
-      event.target &&
-      event.target instanceof Node &&
-      docSearchRef.current &&
-      docSearchRef.current.contains(event.target)
-    ) {
-      setIsSearchHitsVisible(true)
-      return
+  useEffect(() => {
+    function clickSearchBoxOutsideHandler(event: MouseEvent) {
+      setIsSearchHitsVisible(
+        Boolean(
+          event.target instanceof Node &&
+            docSearchRef.current?.contains(event.target)
+        )
+      )
     }
 
-    setIsSearchHitsVisible(false)
-  }
-
-  useEffect(() => {
     window.addEventListener("keydown", ctrlKHandler)
     window.addEventListener("mousedown", clickSearchBoxOutsideHandler)
 

From 5e83a86c08d74599101d37e92841f2e5d91130c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 2 Oct 2024 22:33:56 +0100
Subject: [PATCH 3/4] Update wrapper.tsx

---
 docs/components/DocSearch/wrapper.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
index dd932f3501..a3af3833a4 100644
--- a/docs/components/DocSearch/wrapper.tsx
+++ b/docs/components/DocSearch/wrapper.tsx
@@ -36,15 +36,16 @@ export default function () {
   const docSearchRef = useRef<HTMLDivElement>(null)
   const [isSearchHitsVisible, setIsSearchHitsVisible] = useState(false)
 
-  const ctrlKHandler = (e: KeyboardEvent) => {
-    if (e.repeat || e.target instanceof HTMLInputElement) return
-    if (e.ctrlKey && e.key === "k") {
-      e.preventDefault()
-      document.querySelector<HTMLInputElement>('input[type="search"]')?.focus()
-    }
-  }
-
   useEffect(() => {
+    function ctrlKHandler(e: KeyboardEvent) {
+      if (e.repeat || e.target instanceof HTMLInputElement) return
+      if (e.ctrlKey && e.key === "k") {
+        e.preventDefault()
+        document
+          .querySelector<HTMLInputElement>('input[type="search"]')
+          ?.focus()
+      }
+    }
     function clickSearchBoxOutsideHandler(event: MouseEvent) {
       setIsSearchHitsVisible(
         Boolean(

From 628d4eac4f525e894d57360ef8678e1a138064ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 2 Oct 2024 22:34:46 +0100
Subject: [PATCH 4/4] Update wrapper.tsx

---
 docs/components/DocSearch/wrapper.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/components/DocSearch/wrapper.tsx b/docs/components/DocSearch/wrapper.tsx
index a3af3833a4..cb87ef3585 100644
--- a/docs/components/DocSearch/wrapper.tsx
+++ b/docs/components/DocSearch/wrapper.tsx
@@ -32,7 +32,7 @@ const searchClient = {
   },
 }
 
-export default function () {
+export default function Wrapper() {
   const docSearchRef = useRef<HTMLDivElement>(null)
   const [isSearchHitsVisible, setIsSearchHitsVisible] = useState(false)
 
@@ -46,6 +46,7 @@ export default function () {
           ?.focus()
       }
     }
+
     function clickSearchBoxOutsideHandler(event: MouseEvent) {
       setIsSearchHitsVisible(
         Boolean(