use-active-element

1import { useCallback, useSyncExternalStore } from 'react'
2 
3export interface UseActiveElementOptions {
4  /**
5   * Whether to resolve the deepest focused node inside open shadow roots.
6   * @default true
7   */
8  deep?: boolean
9  /**
10   * Whether to re-check active element when DOM nodes are removed.
11   * @default false
12   */
13  triggerOnRemoval?: boolean
14}
15 
16function resolveActiveElement(deep: boolean): Element | null {
17  if (typeof document === 'undefined') {
18    return null
19  }
20 
21  let activeElement: Element | null = document.activeElement
22 
23  if (!deep) {
24    return activeElement
25  }
26 
27  while (activeElement?.shadowRoot?.activeElement) {
28    activeElement = activeElement.shadowRoot.activeElement
29  }
30 
31  return activeElement
32}
33 
34export function useActiveElement<T extends Element = HTMLElement>(
35  options: UseActiveElementOptions = {},
36): T | null {
37  const { deep = true, triggerOnRemoval = false } = options
38 
39  const subscribe = useCallback(
40    (onStoreChange: () => void) => {
41      if (typeof window === 'undefined') {
42        return () => {}
43      }
44 
45      const onFocus = () => {
46        onStoreChange()
47      }
48      const onBlur = (event: FocusEvent) => {
49        if (event.relatedTarget !== null) {
50          return
51        }
52        onStoreChange()
53      }
54 
55      window.addEventListener('focus', onFocus, true)
56      window.addEventListener('blur', onBlur, true)
57 
58      const observer =
59        triggerOnRemoval && typeof MutationObserver !== 'undefined'
60          ? new MutationObserver(() => {
61              onStoreChange()
62            })
63          : null
64 
65      observer?.observe(document, {
66        childList: true,
67        subtree: true,
68      })
69 
70      return () => {
71        window.removeEventListener('focus', onFocus, true)
72        window.removeEventListener('blur', onBlur, true)
73        observer?.disconnect()
74      }
75    },
76    [triggerOnRemoval],
77  )
78 
79  const getSnapshot = useCallback(() => {
80    return resolveActiveElement(deep) as T | null
81  }, [deep])
82 
83  const getServerSnapshot = useCallback(() => {
84    return null as T | null
85  }, [])
86 
87  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
88}