fix Search show/hide, add props noResult

index.d.ts

@@ -143,6 +143,7 @@ interface SearchProps {
     options?: any
     position: "left" | "right"
     placeholder: string
+    noResult: string
 }
 export function Search(props: SearchProps): JSX.Element
 

src/components/core/Search.tsx

 import React, { useState, useEffect } from "react"
 import { twMerge } from "tailwind-merge"
 
-import { Combobox } from "@headlessui/react"
+import { Combobox, Transition } from "@headlessui/react"
 import { SearchIcon } from "@heroicons/react/outline"
-import { navigate } from "gatsby"
 
 import { cleanHtml, isBrowser } from "@onegeo-suite/gatsby-theme-onegeo"
 interface Props {
     options?: any
     position?: "left" | "right"
     placeholder?: string
+    noResult?: string
 }
 
 const EXPLORER_PATH = process.env.OGS_EXPLORER_PATH || "/explorer"
 
 const Search = (props: Props) => {
-    const { position = "left", placeholder = "Recherche..." } = props
+    const {
+        position = "left",
+        placeholder = "Recherche...",
+        noResult = "Aucun résultat",
+    } = props
 
     const options = props.options ?? {}
     const oClass = options.class || {}
@@ -39,13 +43,8 @@ const Search = (props: Props) => {
 
     return (
         <div className={twMerge("", oClass.main)}>
-            <div
-                className={twMerge(
-                    "bg-base-100 ring-base-content mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden ring-1 ring-opacity-10",
-                    oClass.combobox
-                )}
-            >
             <Combobox
+                as="div"
                 value={null}
                 onChange={(item) => {
                     if (!item) return
@@ -60,6 +59,10 @@ const Search = (props: Props) => {
 
                     window.location = url
                 }}
+                className={twMerge(
+                    "bg-base-100 ring-base-content mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden ring-1 ring-opacity-10",
+                    oClass.combobox
+                )}
                 nullable
             >
                 <div className={twMerge("relative", oClass.body)}>
@@ -91,15 +94,31 @@ const Search = (props: Props) => {
                     )}
                 </div>
 
-                    {items.length > 0 && (
+                <Transition
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform scale-95 opacity-0"
+                    enterTo="transform scale-100 opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform scale-100 opacity-100"
+                    leaveTo="transform scale-95 opacity-0"
+                >
                     <Combobox.Options
-                            static
                         className={twMerge(
-                                "text-base-content scrollbar-thin scrollbar-track-base-200 scrollbar-thumb-base-300 max-h-72 overflow-y-auto py-2 text-sm",
+                            "text-base-content scrollbar-thin scrollbar-track-base-200 scrollbar-thumb-base-300 bg-base-100 max-h-72 overflow-y-auto py-2 text-sm",
                             oClass.options
                         )}
                     >
-                            {items.map((item, idx) => (
+                        {items.length === 0 && query !== "" ? (
+                            <div
+                                className={twMerge(
+                                    "text-base-content p-4 text-sm",
+                                    oClass.noresult
+                                )}
+                            >
+                                {noResult}
+                            </div>
+                        ) : (
+                            items.map((item, idx) => (
                                 <Combobox.Option
                                     key={idx}
                                     value={item}
@@ -118,23 +137,12 @@ const Search = (props: Props) => {
                                         }}
                                     />
                                 </Combobox.Option>
-                            ))}
-                        </Combobox.Options>
-                    )}
-
-                    {query !== "" && items.length === 0 && (
-                        <p
-                            className={twMerge(
-                                "text-base-content p-4 text-sm",
-                                oClass.noresult
-                            )}
-                        >
-                            Aucun résultat.
-                        </p>
+                            ))
                         )}
+                    </Combobox.Options>
+                </Transition>
             </Combobox>
         </div>
-        </div>
     )
 }