···

       
5
       
 
       


     

       
6
       
 
       
const usePriority = makePriorityHook();

     

       
7
       
 
       


     

       
8
       
-
       
export function useDialogDismiss<T extends HTMLElement>(

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
9
       
 
       
  ref: Ref<T>,

     

       
10
       
-
       
  onDismiss: () => void

     

       
0
       
 
       

     

       
11
       
 
       
) {

     

       
0
       
 
       

     

       
12
       
 
       
  const hasPriority = usePriority(ref);

     

       
13
       
 
       


     

       
14
       
 
       
  useLayoutEffect(() => {

     

       
15
       
 
       
    if (!ref.current || !hasPriority) return;

     

       
16
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
17
       
 
       
    function onKey(event: KeyboardEvent) {

     

       
18
       
 
       
      if (!event.isComposing && event.code === 'Escape') {

     

       
19
       
 
       
        // The current dialog can be dismissed by pressing escape if it either has focus

     
···

       
41
       
 
       
      }

     

       
42
       
 
       
    }

     

       
43
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
44
       
 
       
    document.addEventListener('mousedown', onClick);

     

       
45
       
 
       
    document.addEventListener('touchstart', onClick);

     

       
46
       
 
       
    document.addEventListener('keydown', onKey);

     

       
47
       
 
       


     

       
48
       
 
       
    return () => {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
49
       
 
       
      document.removeEventListener('mousedown', onClick);

     

       
50
       
 
       
      document.removeEventListener('touchstart', onClick);

     

       
51
       
 
       
      document.removeEventListener('keydown', onKey);

     

       
52
       
 
       
    };

     

       
53
       
-
       
  }, [ref, hasPriority, onDismiss]);

     

       
54
       
 
       
}

     

···

       
5
       
 
       


     

       
6
       
 
       
const usePriority = makePriorityHook();

     

       
7
       
 
       


     

       
8
       
+
       
export interface DismissableOptions {

     

       
9
       
+
       
  focusLoss?: boolean;

     

       
10
       
+
       
}

     

       
11
       
+
       


     

       
12
       
+
       
export function useDismissable<T extends HTMLElement>(

     

       
13
       
 
       
  ref: Ref<T>,

     

       
14
       
+
       
  onDismiss: () => void,

     

       
15
       
+
       
  options?: DismissableOptions

     

       
16
       
 
       
) {

     

       
17
       
+
       
  const focusLoss = !!(options && options.focusLoss);

     

       
18
       
 
       
  const hasPriority = usePriority(ref);

     

       
19
       
 
       


     

       
20
       
 
       
  useLayoutEffect(() => {

     

       
21
       
 
       
    if (!ref.current || !hasPriority) return;

     

       
22
       
 
       


     

       
23
       
+
       
    function onFocusOut(event: FocusEvent) {

     

       
24
       
+
       
      if (event.defaultPrevented) return;

     

       
25
       
+
       


     

       
26
       
+
       
      const { target, relatedTarget } = event;

     

       
27
       
+
       
      if (

     

       
28
       
+
       
        contains(ref.current, target) &&

     

       
29
       
+
       
        !contains(ref.current, relatedTarget)

     

       
30
       
+
       
      ) {

     

       
31
       
+
       
        onDismiss();

     

       
32
       
+
       
      }

     

       
33
       
+
       
    }

     

       
34
       
+
       


     

       
35
       
 
       
    function onKey(event: KeyboardEvent) {

     

       
36
       
 
       
      if (!event.isComposing && event.code === 'Escape') {

     

       
37
       
 
       
        // The current dialog can be dismissed by pressing escape if it either has focus

     
···

       
59
       
 
       
      }

     

       
60
       
 
       
    }

     

       
61
       
 
       


     

       
62
       
+
       
    if (focusLoss) document.body.addEventListener('focusout', onFocusOut);

     

       
63
       
+
       


     

       
64
       
 
       
    document.addEventListener('mousedown', onClick);

     

       
65
       
 
       
    document.addEventListener('touchstart', onClick);

     

       
66
       
 
       
    document.addEventListener('keydown', onKey);

     

       
67
       
 
       


     

       
68
       
 
       
    return () => {

     

       
69
       
+
       
      if (focusLoss) document.body.removeEventListener('focusout', onFocusOut);

     

       
70
       
+
       


     

       
71
       
 
       
      document.removeEventListener('mousedown', onClick);

     

       
72
       
 
       
      document.removeEventListener('touchstart', onClick);

     

       
73
       
 
       
      document.removeEventListener('keydown', onKey);

     

       
74
       
 
       
    };

     

       
75
       
+
       
  }, [ref, hasPriority, focusLoss, onDismiss]);

     

       
76
       
 
       
}