···

       
12
       
 
       
  const hasPriority = usePriority(ref);

     

       
13
       
 
       


     

       
14
       
 
       
  useLayoutEffect(() => {

     

       
15
       
-
       
    if (!hasPriority) return;

     

       
16
       
 
       


     

       
17
       
 
       
    function onKey(event: KeyboardEvent) {

     

       
18
       
-
       
      if (

     

       
19
       
-
       
        event.isComposing ||

     

       
20
       
-
       
        event.defaultPrevented ||

     

       
21
       
-
       
        event.code !== 'Escape'

     

       
22
       
-
       
      )

     

       
23
       
-
       
        return;

     

       
24
       
-
       
      event.preventDefault();

     

       
25
       
-
       
      onDismiss();

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
26
       
 
       
    }

     

       
27
       
 
       


     

       
28
       
 
       
    function onClick(event: MouseEvent | TouchEvent) {

     

       
29
       
-
       
      if (

     

       
30
       
-
       
        !ref.current ||

     

       
31
       
-
       
        contains(ref.current, event.target) ||

     

       
32
       
-
       
        event.defaultPrevented

     

       
33
       
-
       
      )

     

       
34
       
 
       
        return;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
35
       
 
       
      event.preventDefault();

     

       
36
       
 
       
      onDismiss();

     

       
37
       
 
       
    }

     

       
38
       
 
       


     

       
39
       
-
       
    document.addEventListener('mousedown', onClick);

     

       
40
       
-
       
    document.addEventListener('touchstart', onClick);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

       
42
       
 
       


     

       
43
       
 
       
    return () => {

     

       
44
       
-
       
      document.removeEventListener('mousedown', onClick);

     

       
45
       
-
       
      document.removeEventListener('touchstart', onClick);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

       
47
       
 
       
    };

     

       
48
       
 
       
  }, [ref, hasPriority, onDismiss]);

     

···

       
12
       
 
       
  const hasPriority = usePriority(ref);

     

       
13
       
 
       


     

       
14
       
 
       
  useLayoutEffect(() => {

     

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

     

       
16
       
 
       


     

       
17
       
 
       
    function onKey(event: KeyboardEvent) {

     

       
18
       
+
       
      if (event.defaultPrevented || event.isComposing) return;

     

       
19
       
+
       


     

       
20
       
+
       
      if (event.code === 'Escape') {

     

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

     

       
22
       
+
       
        // or it has priority

     

       
23
       
+
       
        const active = document.activeElement;

     

       
24
       
+
       
        if (hasPriority || (active && contains(ref.current, active))) {

     

       
25
       
+
       
          event.preventDefault();

     

       
26
       
+
       
          onDismiss();

     

       
27
       
+
       
        }

     

       
28
       
+
       
      }

     

       
29
       
 
       
    }

     

       
30
       
 
       


     

       
31
       
 
       
    function onClick(event: MouseEvent | TouchEvent) {

     

       
32
       
+
       
      const { target } = event;

     

       
33
       
+
       
      if (contains(ref.current, target) || event.defaultPrevented) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
34
       
 
       
        return;

     

       
35
       
+
       
      }

     

       
36
       
+
       


     

       
37
       
 
       
      event.preventDefault();

     

       
38
       
 
       
      onDismiss();

     

       
39
       
 
       
    }

     

       
40
       
 
       


     

       
41
       
+
       
    if (hasPriority) {

     

       
42
       
+
       
      document.addEventListener('mousedown', onClick);

     

       
43
       
+
       
      document.addEventListener('touchstart', onClick);

     

       
44
       
+
       
    }

     

       
45
       
+
       


     

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

     

       
47
       
 
       


     

       
48
       
 
       
    return () => {

     

       
49
       
+
       
      if (hasPriority) {

     

       
50
       
+
       
        document.removeEventListener('mousedown', onClick);

     

       
51
       
+
       
        document.removeEventListener('touchstart', onClick);

     

       
52
       
+
       
      }

     

       
53
       
+
       


     

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

     

       
55
       
 
       
    };

     

       
56
       
 
       
  }, [ref, hasPriority, onDismiss]);