commit 50029cd46cb729928f4a917046532e025424b546 · kitten.sh/use-interactions

+123

src/__tests__/useDismissable.test.tsx

···

       1
       +
       import React, { useState, useRef } from 'react';

     

       2
       +
       import { mount } from '@cypress/react';

     

       3
       +
       

     

       4
       +
       import { useDismissable } from '../useDismissable';

     

       5
       +
       

     

       6
       +
       const Dialog = ({ focusLoss }: { focusLoss?: boolean }) => {

     

       7
       +
         const [visible, setVisible] = useState(true);

     

       8
       +
         const ref = useRef<HTMLDivElement>(null);

     

       9
       +
       

     

       10
       +
         const onDismiss = () => setVisible(false);

     

       11
       +
         useDismissable(ref, onDismiss, { focusLoss, disabled: !visible });

     

       12
       +
       

     

       13
       +
         return (

     

       14
       +
           <div ref={ref} role="dialog" style={{ display: visible ? 'block' : 'none' }}>

     

       15
       +
             <button className="inside">focusable</button>

     

       16
       +
           </div>

     

       17
       +
         );

     

       18
       +
       };

     

       19
       +
       

     

       20
       +
       it('is dismissed by clicking outside', () => {

     

       21
       +
         mount(

     

       22
       +
           <main>

     

       23
       +
             <button className="outside">outside</button>

     

       24
       +
             <Dialog />

     

       25
       +
           </main>

     

       26
       +
         );

     

       27
       +
       

     

       28
       +
         cy.get('.inside').as('inside').click();

     

       29
       +
         cy.get('@inside').should('be.visible');

     

       30
       +
         cy.get('.outside').first().click();

     

       31
       +
         cy.get('@inside').should('not.be.visible');

     

       32
       +
       });

     

       33
       +
       

     

       34
       +
       it('is not dismissed by clicking outside when it does not have priority', () => {

     

       35
       +
         mount(

     

       36
       +
           <main>

     

       37
       +
             <button className="outside">outside</button>

     

       38
       +
             <Dialog />

     

       39
       +
             <Dialog />

     

       40
       +
           </main>

     

       41
       +
         );

     

       42
       +
       

     

       43
       +
         cy.get('.inside').as('inside').should('be.visible');

     

       44
       +
         // at first not dismissed

     

       45
       +
         cy.get('.outside').first().click();

     

       46
       +
         cy.get('@inside').should('be.visible');

     

       47
       +
         // dismissed when the second Dialog loses focus

     

       48
       +
         cy.get('.outside').first().click();

     

       49
       +
         cy.get('@inside').should('not.be.visible');

     

       50
       +
       });

     

       51
       +
       

     

       52
       +
       it('is dismissed by pressing Escape', () => {

     

       53
       +
         mount(

     

       54
       +
           <main>

     

       55
       +
             <button className="outside">outside</button>

     

       56
       +
             <Dialog />

     

       57
       +
           </main>

     

       58
       +
         );

     

       59
       +
       

     

       60
       +
         cy.get('.inside').as('inside').should('be.visible');

     

       61
       +
         cy.realPress('Escape');

     

       62
       +
         cy.get('@inside').should('not.be.visible');

     

       63
       +
       });

     

       64
       +
       

     

       65
       +
       it('is not dismissed by pressing Escape when it does not have priority', () => {

     

       66
       +
         mount(

     

       67
       +
           <main>

     

       68
       +
             <button className="outside">outside</button>

     

       69
       +
             <Dialog />

     

       70
       +
             <Dialog />

     

       71
       +
           </main>

     

       72
       +
         );

     

       73
       +
       

     

       74
       +
         cy.get('.inside').as('inside').should('be.visible');

     

       75
       +
         // at first not dismissed

     

       76
       +
         cy.realPress('Escape');

     

       77
       +
         cy.get('@inside').should('be.visible');

     

       78
       +
         // dismissed when the second Dialog loses focus

     

       79
       +
         cy.realPress('Escape');

     

       80
       +
         cy.get('@inside').should('not.be.visible');

     

       81
       +
       });

     

       82
       +
       

     

       83
       +
       it('is dismissed without priority when it has focus', () => {

     

       84
       +
         const Second = () => {

     

       85
       +
           const ref = useRef<HTMLDivElement>(null);

     

       86
       +
           useDismissable(ref, () => {});

     

       87
       +
           return <div ref={ref} />;

     

       88
       +
         };

     

       89
       +
       

     

       90
       +
         mount(

     

       91
       +
           <main>

     

       92
       +
             <button className="outside">outside</button>

     

       93
       +
             <Dialog />

     

       94
       +
             <Second />

     

       95
       +
           </main>

     

       96
       +
         );

     

       97
       +
       

     

       98
       +
         cy.get('.inside').as('inside').should('be.visible');

     

       99
       +
         // not dismissed with escape press

     

       100
       +
         cy.realPress('Escape');

     

       101
       +
         cy.get('@inside').should('be.visible');

     

       102
       +
         // is dismissed when it has focus

     

       103
       +
         cy.get('@inside').focus();

     

       104
       +
         cy.realPress('Escape');

     

       105
       +
         cy.get('@inside').should('not.be.visible');

     

       106
       +
       });

     

       107
       +
       

     

       108
       +
       it('is dismissed when focus moves out of it, with focus loss active', () => {

     

       109
       +
         mount(

     

       110
       +
           <main>

     

       111
       +
             <button className="outside">outside</button>

     

       112
       +
             <Dialog focusLoss />

     

       113
       +
           </main>

     

       114
       +
         );

     

       115
       +
       

     

       116
       +
         cy.get('.inside').as('inside').should('be.visible');

     

       117
       +
         cy.get('@inside').focus();

     

       118
       +
         cy.get('@inside').should('be.visible');

     

       119
       +
         // is dismissed when it loses focus

     

       120
       +
         cy.realPress(['Shift', 'Tab']);

     

       121
       +
         cy.focused().contains('outside');

     

       122
       +
         cy.get('@inside').should('not.be.visible');

     

       123
       +
       });

+14 -6

src/useDismissable.ts

···

       0
        
       
     

       1
        
       import { useLayoutEffect } from './utils/react';

     

       2
        
       import { contains } from './utils/element';

     

       3
        
       import { makePriorityHook } from './usePriority';

     
···

       7
        
       

     

       8
        
       export interface DismissableOptions {

     

       9
        
         focusLoss?: boolean;

     

       0
        
       
     

       10
        
       }

     

       11
        
       

     

       12
        
       export function useDismissable<T extends HTMLElement>(

     
···

       15
        
         options?: DismissableOptions

     

       16
        
       ) {

     

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

     

       18
       -
         const hasPriority = usePriority(ref);

     

       0
        
       
     

       0
        
       
     

       19
        
       

     

       20
        
         useLayoutEffect(() => {

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       22
        
       

     

       23
        
           function onFocusOut(event: FocusEvent) {

     

       24
        
             if (event.defaultPrevented) return;

     
···

       28
        
               contains(ref.current, target) &&

     

       29
        
               !contains(ref.current, relatedTarget)

     

       30
        
             ) {

     

       31
       -
               onDismiss();

     

       32
        
             }

     

       33
        
           }

     

       34
        
       

     
···

       39
        
               const active = document.activeElement;

     

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

     

       41
        
                 event.preventDefault();

     

       42
       -
                 onDismiss();

     

       43
        
               }

     

       44
        
             }

     

       45
        
           }

     
···

       55
        
             const active = document.activeElement;

     

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

     

       57
        
               event.preventDefault();

     

       58
       -
               onDismiss();

     

       59
        
             }

     

       60
        
           }

     

       61
        
       

     
···

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

     

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

     

       74
        
           };

     

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

     

       76
        
       }

···

       1
       +
       import { useRef } from 'react';

     

       2
        
       import { useLayoutEffect } from './utils/react';

     

       3
        
       import { contains } from './utils/element';

     

       4
        
       import { makePriorityHook } from './usePriority';

     
···

       8
        
       

     

       9
        
       export interface DismissableOptions {

     

       10
        
         focusLoss?: boolean;

     

       11
       +
         disabled?: boolean;

     

       12
        
       }

     

       13
        
       

     

       14
        
       export function useDismissable<T extends HTMLElement>(

     
···

       17
        
         options?: DismissableOptions

     

       18
        
       ) {

     

       19
        
         const focusLoss = !!(options && options.focusLoss);

     

       20
       +
         const disabled = !!(options && options.disabled);

     

       21
       +
         const hasPriority = usePriority(ref, disabled);

     

       22
       +
         const onDismissRef = useRef(onDismiss);

     

       23
        
       

     

       24
        
         useLayoutEffect(() => {

     

       25
       +
           onDismissRef.current = onDismiss;

     

       26
       +
         }, [onDismiss]);

     

       27
       +
       

     

       28
       +
         useLayoutEffect(() => {

     

       29
       +
           if (!ref.current || disabled) return;

     

       30
        
       

     

       31
        
           function onFocusOut(event: FocusEvent) {

     

       32
        
             if (event.defaultPrevented) return;

     
···

       36
        
               contains(ref.current, target) &&

     

       37
        
               !contains(ref.current, relatedTarget)

     

       38
        
             ) {

     

       39
       +
               onDismissRef.current();

     

       40
        
             }

     

       41
        
           }

     

       42
        
       

     
···

       47
        
               const active = document.activeElement;

     

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

     

       49
        
                 event.preventDefault();

     

       50
       +
                 onDismissRef.current();

     

       51
        
               }

     

       52
        
             }

     

       53
        
           }

     
···

       63
        
             const active = document.activeElement;

     

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

     

       65
        
               event.preventDefault();

     

       66
       +
               onDismissRef.current();

     

       67
        
             }

     

       68
        
           }

     

       69
        
       

     
···

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

     

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

     

       82
        
           };

     

       83
       +
         }, [ref, hasPriority, disabled, focusLoss]);

     

       84
        
       }