fix(use-click-away): update handler reference

components/use-click-away/__tests__/click-away.test.tsx

@@ -15,9 +15,9 @@ const simulateNativeClick = (el: Element) => {
 describe('UseClickAway', () => {
   it('should work correctly', () => {
     const handler = jest.fn()
-    const ref = React.createRef<HTMLDivElement>()
-    ;(ref as any).current = document.createElement('div')
-    const el = ref.current as HTMLDivElement
+    const ref = React.createRef() as React.MutableRefObject<HTMLDivElement>
+    ref.current = document.createElement('div')
+    const el = ref.current
     document.body.appendChild(el)
     renderHook(() => useClickAway(ref, handler))
 
@@ -34,4 +34,23 @@ describe('UseClickAway', () => {
 
     expect(errorSpy).not.toHaveBeenCalled()
   })
+
+  it('should update handler reference', async () => {
+    const ref = React.createRef() as React.MutableRefObject<HTMLDivElement>
+    ref.current = document.createElement('div')
+    const handler1 = jest.fn()
+    const handler2 = jest.fn()
+    let isFirstRender = true
+    const { rerender } = renderHook(() => {
+      const handler = isFirstRender ? handler1 : handler2
+      useClickAway(ref, handler)
+      isFirstRender = false
+    })
+    simulateNativeClick(document.body)
+    expect(handler1).toHaveBeenCalled()
+
+    rerender()
+    simulateNativeClick(document.body)
+    expect(handler2).toHaveBeenCalled()
+  })
 })

components/use-click-away/use-click-away.ts

@@ -9,12 +9,12 @@ const useClickAway = (
   const handlerRef = useRef(handler)
   useEffect(() => {
     handlerRef.current = handler
-  }, [handlerRef])
+  }, [handler])
 
   useEffect(() => {
-    const callback = (event: Event) => {
+    const callback = (event: MouseEvent) => {
       const el = ref.current
-      if (!event || !el || el.contains((event as any).target)) return
+      if (!event || !el || el.contains(event.target as Node)) return
       handlerRef.current(event)
     }
 

pages/en-us/hooks/use-click-away.mdx

@@ -35,7 +35,7 @@ This is custom React hooks, you need to follow the <Link target="_blank" color h
 ```ts
 const useClickAway = (
   ref: MutableRefObject<HTMLElement | null>,
-  handler: (event: Event) => void,
+  handler: (event: MouseEvent) => void,
 ) => void
 ```
 

pages/zh-cn/hooks/use-click-away.mdx

@@ -33,7 +33,7 @@ export const meta = {
 ```ts
 const useClickAway = (
   ref: MutableRefObject<HTMLElement | null>,
-  handler: (event: Event) => void,
+  handler: (event: MouseEvent) => void,
 ) => void
 ```