use-click-away

1import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'
2import { useLatest } from '@/registry/hooks/use-latest'
3import { getTargetElement } from '@/registry/lib/create-effect-with-target'
4import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
5 
6type DocumentEventKey = keyof DocumentEventMap
7 
8declare type TargetValue<T> = T | undefined | null
9 
10const checkIfAllInShadow = (targets: BasicTarget[]) => {
11  return targets.every((item) => {
12    const targetElement = getTargetElement(item)
13    if (!targetElement) {
14      return false
15    }
16    if (targetElement.getRootNode() instanceof ShadowRoot) {
17      return true
18    }
19    return false
20  })
21}
22 
23const getShadow = (node: TargetValue<Element>) => {
24  if (!node) {
25    return document
26  }
27  return node.getRootNode()
28}
29 
30const getDocumentOrShadow = (
31  target: BasicTarget | BasicTarget[],
32): Document | Node => {
33  if (!target || !document.getRootNode) {
34    return document
35  }
36 
37  const targets = Array.isArray(target) ? target : [target]
38 
39  if (checkIfAllInShadow(targets)) {
40    return getShadow(getTargetElement(targets[0]))
41  }
42 
43  return document
44}
45 
46export function useClickAway<T extends Event = Event>(
47  onClickAway: (event: T) => void,
48  target: BasicTarget | BasicTarget[],
49  eventName: DocumentEventKey | DocumentEventKey[] = 'click',
50) {
51  const onClickAwayRef = useLatest(onClickAway)
52 
53  useEffectWithTarget(
54    () => {
55      const handler = (event: any) => {
56        const targets = Array.isArray(target) ? target : [target]
57        if (
58          targets.some((item) => {
59            const targetElement = getTargetElement(item)
60            return !targetElement || targetElement.contains(event.target)
61          })
62        ) {
63          return
64        }
65        onClickAwayRef.current(event)
66      }
67 
68      const documentOrShadow = getDocumentOrShadow(target)
69 
70      const eventNames = Array.isArray(eventName) ? eventName : [eventName]
71 
72      eventNames.forEach((event) =>
73        documentOrShadow.addEventListener(event, handler),
74      )
75 
76      return () => {
77        eventNames.forEach((event) =>
78          documentOrShadow.removeEventListener(event, handler),
79        )
80      }
81    },
82    Array.isArray(eventName) ? eventName : [eventName],
83    target,
84  )
85}