From 6baeb473d449c6b0b5ddd13dcaed94699f074025 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 13 Sep 2023 17:27:41 +0800
Subject: [PATCH] fix: header poppver

---
 .../layout/header/internal/HeaderContent.tsx  |  5 +-
 .../layout/header/internal/MenuPopover.tsx    | 26 ++++------
 .../ui/float-popover/FloatPopover.tsx         |  4 +-
 src/components/ui/form/Form.tsx               | 52 +++++++++----------
 4 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/src/components/layout/header/internal/HeaderContent.tsx b/src/components/layout/header/internal/HeaderContent.tsx
index 5855827ac4..4713e96926 100644
--- a/src/components/layout/header/internal/HeaderContent.tsx
+++ b/src/components/layout/header/internal/HeaderContent.tsx
@@ -4,6 +4,7 @@ import React, { memo } from 'react'
 import clsx from 'clsx'
 import {
   AnimatePresence,
+  LayoutGroup,
   m,
   useMotionTemplate,
   useMotionValue,
@@ -23,12 +24,12 @@ import { MenuPopover } from './MenuPopover'
 
 export const HeaderContent = () => {
   return (
-    <>
+    <LayoutGroup>
       <AnimatedMenu>
         <ForDesktop />
       </AnimatedMenu>
       <AccessibleMenu />
-    </>
+    </LayoutGroup>
   )
 }
 
diff --git a/src/components/layout/header/internal/MenuPopover.tsx b/src/components/layout/header/internal/MenuPopover.tsx
index 75d60bb700..e376c5a184 100644
--- a/src/components/layout/header/internal/MenuPopover.tsx
+++ b/src/components/layout/header/internal/MenuPopover.tsx
@@ -23,23 +23,19 @@ export const MenuPopover: Component<{
       offset={10}
       headless
       popoverWrapperClassNames="z-[19] relative"
-      popoverClassNames="rounded-xl !p-0 focus-visible:!shadow-none focus-visible:!ring-0"
+      popoverClassNames={clsxm([
+        'select-none rounded-xl bg-white/60 outline-none dark:bg-neutral-900/60',
+        'shadow-lg shadow-zinc-800/5 border border-zinc-900/5 backdrop-blur-md',
+        'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:border-zinc-100/10',
+        'relative flex w-[130px] flex-col py-1',
+        'focus-visible:!ring-0',
+      ])}
       TriggerComponent={TriggerComponent}
     >
-      {!!subMenu.length && (
-        <div
-          className={clsxm(
-            'select-none rounded-xl bg-white/60 outline-none dark:bg-neutral-900/60',
-            'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md',
-            'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10',
-            'relative flex w-[130px] flex-col py-1',
-          )}
-        >
-          {subMenu.map((m) => {
-            return <Item key={m.title} currentId={currentId} {...m} />
-          })}
-        </div>
-      )}
+      {!!subMenu.length &&
+        subMenu.map((m) => {
+          return <Item key={m.title} currentId={currentId} {...m} />
+        })}
     </FloatPopover>
   )
 })
diff --git a/src/components/ui/float-popover/FloatPopover.tsx b/src/components/ui/float-popover/FloatPopover.tsx
index 32a28fc6ec..99998b097f 100644
--- a/src/components/ui/float-popover/FloatPopover.tsx
+++ b/src/components/ui/float-popover/FloatPopover.tsx
@@ -85,7 +85,7 @@ export const FloatPopover = function FloatPopover<T extends {}>(
       return
     }
     setOpen(false)
-  }, [debug, animate])
+  }, [debug])
 
   const doPopoverShow = useEventCallback(() => {
     setOpen(true)
@@ -93,7 +93,7 @@ export const FloatPopover = function FloatPopover<T extends {}>(
 
   const handleMouseOut = useCallback(() => {
     doPopoverDisappear()
-  }, [])
+  }, [doPopoverDisappear])
 
   const listener = useMemo(() => {
     const baseListener = {
diff --git a/src/components/ui/form/Form.tsx b/src/components/ui/form/Form.tsx
index ab7b837d75..7f25c9b669 100644
--- a/src/components/ui/form/Form.tsx
+++ b/src/components/ui/form/Form.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useMemo } from 'react'
 import { produce } from 'immer'
 import { atom } from 'jotai'
 import type {
@@ -24,33 +24,31 @@ export const Form = (
   const fieldsAtom = useRefValue(() => atom({}))
   return (
     <FormContext.Provider
-      value={
-        useRef({
-          showErrorMessage,
-          fields: fieldsAtom,
-          getField: (name: string) => {
-            // @ts-expect-error
-            return jotaiStore.get(fieldsAtom)[name]
-          },
-          addField: (name: string, field: Field) => {
-            jotaiStore.set(fieldsAtom, (p) => {
-              return {
-                ...p,
-                [name]: field,
-              }
-            })
-          },
+      value={useRefValue(() => ({
+        showErrorMessage,
+        fields: fieldsAtom,
+        getField: (name: string) => {
+          // @ts-expect-error
+          return jotaiStore.get(fieldsAtom)[name]
+        },
+        addField: (name: string, field: Field) => {
+          jotaiStore.set(fieldsAtom, (p) => {
+            return {
+              ...p,
+              [name]: field,
+            }
+          })
+        },
 
-          removeField: (name: string) => {
-            jotaiStore.set(fieldsAtom, (p) => {
-              const pp = { ...p }
-              // @ts-expect-error
-              delete pp[name]
-              return pp
-            })
-          },
-        }).current
-      }
+        removeField: (name: string) => {
+          jotaiStore.set(fieldsAtom, (p) => {
+            const pp = { ...p }
+            // @ts-expect-error
+            delete pp[name]
+            return pp
+          })
+        },
+      }))}
     >
       <FormConfigContext.Provider
         value={useMemo(() => ({ showErrorMessage }), [showErrorMessage])}