commit 4048da44b09dad88922ef45ead96c7d74135de64 · kitten.sh/use-interactions

+26 -18
src/useDialogDismiss.ts
···

       12
       12
        
         const hasPriority = usePriority(ref);

     

       13
       13
        
       

     

       14
       14
        
         useLayoutEffect(() => {

     

       15
       15
       -
           if (!hasPriority) return;

     

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

     

       16
       16
        
       

     

       17
       17
        
           function onKey(event: KeyboardEvent) {

     

       18
       18
       -
             if (

     

       19
       19
       -
               event.isComposing ||

     

       20
       20
       -
               event.defaultPrevented ||

     

       21
       21
       -
               event.code !== 'Escape'

     

       22
       22
       -
             )

     

       23
       23
       -
               return;

     

       24
       24
       -
             event.preventDefault();

     

       25
       25
       -
             onDismiss();

     

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

     

       19
       19
       +
       

     

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

     

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

     

       22
       22
       +
               // or it has priority

     

       23
       23
       +
               const active = document.activeElement;

     

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

     

       25
       25
       +
                 event.preventDefault();

     

       26
       26
       +
                 onDismiss();

     

       27
       27
       +
               }

     

       28
       28
       +
             }

     

       26
       29
        
           }

     

       27
       30
        
       

     

       28
       31
        
           function onClick(event: MouseEvent | TouchEvent) {

     

       29
       29
       -
             if (

     

       30
       30
       -
               !ref.current ||

     

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

     

       32
       32
       -
               event.defaultPrevented

     

       33
       33
       -
             )

     

       32
       32
       +
             const { target } = event;

     

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

     

       34
       34
        
               return;

     

       35
       35
       +
             }

     

       36
       36
       +
       

     

       35
       37
        
             event.preventDefault();

     

       36
       38
        
             onDismiss();

     

       37
       39
        
           }

     

       38
       40
        
       

     

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

     

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

     

       41
       41
       +
           if (hasPriority) {

     

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

     

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

     

       44
       44
       +
           }

     

       45
       45
       +
       

     

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

     

       42
       47
        
       

     

       43
       48
        
           return () => {

     

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

     

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

     

       49
       49
       +
             if (hasPriority) {

     

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

     

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

     

       52
       52
       +
             }

     

       53
       53
       +
       

     

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

     

       47
       55
        
           };

     

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