commit 8b4709c4f763c0cb342d8dba8813e0b306025323 · kitten.sh/use-interactions

+3 -1

src/index.ts

···

       1
       -
       export { useFocusLoop } from './useFocusLoop';

     

       0
        
       
     

       0

···

       1
       +
       export * from './useModalFocus';

     

       2
       +
       export * from './useDialogFocus';

     

       3
       +
       export * from './useMenuFocus';

+139

src/useDialogFocus.ts

···

       1
       +
       import { snapshotSelection, restoreSelection } from './utils/selection';

     

       2
       +
       import { getFocusTargets, getNextFocusTarget } from './utils/focus';

     

       3
       +
       import { useLayoutEffect } from './utils/react';

     

       4
       +
       import { contains, isInputElement } from './utils/element';

     

       5
       +
       import { makePriorityHook } from './usePriority';

     

       6
       +
       import { Ref } from './types';

     

       7
       +
       

     

       8
       +
       const usePriority = makePriorityHook();

     

       9
       +
       

     

       10
       +
       export interface DialogFocusOptions {

     

       11
       +
         disabled?: boolean;

     

       12
       +
         ownerRef?: Ref<HTMLElement>;

     

       13
       +
       }

     

       14
       +
       

     

       15
       +
       export function useDialogFocus<T extends HTMLElement>(

     

       16
       +
         ref: Ref<T>,

     

       17
       +
         options?: DialogFocusOptions

     

       18
       +
       ) {

     

       19
       +
         const ownerRef = options && options.ownerRef;

     

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

     

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

     

       22
       +
       

     

       23
       +
         useLayoutEffect(() => {

     

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

     

       25
       +
       

     

       26
       +
           let selection = snapshotSelection(ownerRef && ownerRef.current);

     

       27
       +
           let willReceiveFocus = false;

     

       28
       +
           let focusMovesForward = true;

     

       29
       +
       

     

       30
       +
           function onClick(event: MouseEvent) {

     

       31
       +
             if (!ref.current || event.defaultPrevented) return;

     

       32
       +
       

     

       33
       +
             const target = event.target as HTMLElement | null;

     

       34
       +
             if (target && getFocusTargets(ref.current).indexOf(target) > -1) {

     

       35
       +
               selection = null;

     

       36
       +
               willReceiveFocus = true;

     

       37
       +
             }

     

       38
       +
           }

     

       39
       +
       

     

       40
       +
           function onFocus(event: FocusEvent) {

     

       41
       +
             if (!ref.current || event.defaultPrevented) return;

     

       42
       +
       

     

       43
       +
             const active = document.activeElement as HTMLElement;

     

       44
       +
             const owner = (ownerRef && ownerRef.current) || selection && selection.element;

     

       45
       +
       

     

       46
       +
             if (willReceiveFocus || (owner && event.target === owner)) {

     

       47
       +
               if (!contains(ref.current, active)) selection = snapshotSelection(owner);

     

       48
       +
               willReceiveFocus = false;

     

       49
       +
               return;

     

       50
       +
             }

     

       51
       +
       

     

       52
       +
             const { relatedTarget, target } = event;

     

       53
       +
             // Check whether focus is about to move into the container and prevent it

     

       54
       +
             if (contains(ref.current, target) && !contains(ref.current, relatedTarget)) {

     

       55
       +
               // Get the next focus target of the container

     

       56
       +
               const focusTarget = getNextFocusTarget(ref.current, !focusMovesForward);

     

       57
       +
               if (focusTarget) {

     

       58
       +
                 focusMovesForward = true;

     

       59
       +
                 event.preventDefault();

     

       60
       +
                 focusTarget.focus();

     

       61
       +
               }

     

       62
       +
             }

     

       63
       +
           }

     

       64
       +
       

     

       65
       +
           function onKey(event: KeyboardEvent) {

     

       66
       +
             if (!ref.current || event.defaultPrevented) return;

     

       67
       +
       

     

       68
       +
             // Mark whether focus is moving forward for the `onFocus` handler

     

       69
       +
             if (event.code === 'Tab') {

     

       70
       +
               focusMovesForward = !event.shiftKey;

     

       71
       +
             }

     

       72
       +
       

     

       73
       +
             const active = document.activeElement as HTMLElement;

     

       74
       +
             const owner = (ownerRef && ownerRef.current) || selection && selection.element;

     

       75
       +
             const focusTargets = getFocusTargets(ref.current);

     

       76
       +
       

     

       77
       +
             if (

     

       78
       +
               !focusTargets.length ||

     

       79
       +
               (!contains(owner, active) && !contains(ref.current, active))

     

       80
       +
             ) {

     

       81
       +
               // Do nothing if no targets are available or the listbox or owner don't have focus

     

       82
       +
               return;

     

       83
       +
             } else if (event.code === 'Tab') {

     

       84
       +
               // Skip over the listbox via the parent if we press tab

     

       85
       +
               const currentTarget = contains(owner, active) ? owner! : ref.current;

     

       86
       +
               const focusTarget = getNextFocusTarget(currentTarget, event.shiftKey);

     

       87
       +
               if (focusTarget) {

     

       88
       +
                 event.preventDefault();

     

       89
       +
                 focusTarget.focus();

     

       90
       +
               }

     

       91
       +
             } else if (

     

       92
       +
               (!isInputElement(active) && event.code === 'ArrowRight') ||

     

       93
       +
               event.code === 'ArrowDown'

     

       94
       +
             ) {

     

       95
       +
               // Implement forward movement in focus targets

     

       96
       +
               event.preventDefault();

     

       97
       +
               const focusIndex = focusTargets.indexOf(active);

     

       98
       +
               const nextIndex = focusIndex < focusTargets.length - 1 ? focusIndex + 1 : 0;

     

       99
       +
               willReceiveFocus = true;

     

       100
       +
               focusTargets[nextIndex].focus();

     

       101
       +
             } else if (

     

       102
       +
               (!isInputElement(active) && event.code === 'ArrowLeft') ||

     

       103
       +
               event.code === 'ArrowUp'

     

       104
       +
             ) {

     

       105
       +
               // Implement backward movement in focus targets

     

       106
       +
               event.preventDefault();

     

       107
       +
               const focusIndex = focusTargets.indexOf(active);

     

       108
       +
               const nextIndex = focusIndex > 0 ? focusIndex - 1 : focusTargets.length - 1;

     

       109
       +
               willReceiveFocus = true;

     

       110
       +
               focusTargets[nextIndex].focus();

     

       111
       +
             } else if (selection && event.code === 'Escape') {

     

       112
       +
               // Restore selection if escape is pressed

     

       113
       +
               event.preventDefault();

     

       114
       +
               willReceiveFocus = false;

     

       115
       +
               restoreSelection(selection);

     

       116
       +
             } else if (

     

       117
       +
               owner &&

     

       118
       +
               active !== owner &&

     

       119
       +
               isInputElement(owner) &&

     

       120
       +
               /^(?:Key|Digit)/.test(event.code)

     

       121
       +
             ) {

     

       122
       +
               // Restore selection if a key is pressed on input

     

       123
       +
               event.preventDefault();

     

       124
       +
               willReceiveFocus = false;

     

       125
       +
               restoreSelection(selection);

     

       126
       +
             }

     

       127
       +
           }

     

       128
       +
       

     

       129
       +
           ref.current.addEventListener('mousedown', onClick, true);

     

       130
       +
           document.body.addEventListener('focusin', onFocus);

     

       131
       +
           document.addEventListener('keydown', onKey);

     

       132
       +
       

     

       133
       +
           return () => {

     

       134
       +
             ref.current!.removeEventListener('mousedown', onClick);

     

       135
       +
             document.body.removeEventListener('focusin', onFocus);

     

       136
       +
             document.removeEventListener('keydown', onKey);

     

       137
       +
           };

     

       138
       +
         }, [ref, hasPriority, disabled]);

     

       139
       +
       }

-53

src/useFocusLoop.ts

···

       1
       -
       import { useLayoutEffect } from 'react';

     

       2
       -
       import { getFirstFocusTarget, getFocusTargets } from './utils/focus';

     

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

     

       4
       -
       import { Ref } from './types';

     

       5
       -
       

     

       6
       -
       export function useFocusLoop<T extends HTMLElement>(ref: Ref<T>) {

     

       7
       -
         useLayoutEffect(() => {

     

       8
       -
           if (!ref.current) return;

     

       9
       -
       

     

       10
       -
           let active = document.activeElement as HTMLElement | null;

     

       11
       -
           if (!active || !ref.current.contains(active)) {

     

       12
       -
             active = getFirstFocusTarget(ref.current);

     

       13
       -
             if (active) active.focus();

     

       14
       -
           }

     

       15
       -
       

     

       16
       -
           function onBlur(event: FocusEvent) {

     

       17
       -
             const parent = ref.current;

     

       18
       -
             if (!parent || event.defaultPrevented) return;

     

       19
       -
       

     

       20
       -
             if (contains(parent, event.target) && !contains(parent, event.relatedTarget)) {

     

       21
       -
               const target = getFirstFocusTarget(parent);

     

       22
       -
               if (target) target.focus();

     

       23
       -
             }

     

       24
       -
           }

     

       25
       -
       

     

       26
       -
           function onKeyDown(event: KeyboardEvent) {

     

       27
       -
             const parent = ref.current;

     

       28
       -
             if (!parent || event.defaultPrevented) return;

     

       29
       -
       

     

       30
       -
             if (event.code === 'Tab') {

     

       31
       -
               const activeElement = document.activeElement as HTMLElement;

     

       32
       -
               const targets = getFocusTargets(parent);

     

       33
       -
               const index = targets.indexOf(activeElement);

     

       34
       -
               if (event.shiftKey && index === 0) {

     

       35
       -
                 event.preventDefault();

     

       36
       -
                 targets[targets.length - 1].focus();

     

       37
       -
               } else if (!event.shiftKey && index === targets.length - 1) {

     

       38
       -
                 event.preventDefault();

     

       39
       -
                 targets[0].focus();

     

       40
       -
               }

     

       41
       -
       

     

       42
       -
             }

     

       43
       -
           }

     

       44
       -
       

     

       45
       -
           document.body.addEventListener('focusout', onBlur);

     

       46
       -
           document.addEventListener('keydown', onKeyDown);

     

       47
       -
       

     

       48
       -
           return () => {

     

       49
       -
             document.body.removeEventListener('focusout', onBlur);

     

       50
       -
             document.removeEventListener('keydown', onKeyDown);

     

       51
       -
           };

     

       52
       -
         }, [ref]);

     

       53
       -
       }

+99

src/useMenuFocus.ts

···

       1
       +
       import { RestoreSelection, snapshotSelection, restoreSelection } from './utils/selection';

     

       2
       +
       import { getFocusTargets } from './utils/focus';

     

       3
       +
       import { useLayoutEffect } from './utils/react';

     

       4
       +
       import { contains, isInputElement } from './utils/element';

     

       5
       +
       import { Ref } from './types';

     

       6
       +
       

     

       7
       +
       export interface MenuFocusOptions {

     

       8
       +
         disabled?: boolean;

     

       9
       +
         ownerRef?: Ref<HTMLElement>;

     

       10
       +
       }

     

       11
       +
       

     

       12
       +
       export function useMenuFocus<T extends HTMLElement>(ref: Ref<T>, options?: MenuFocusOptions) {

     

       13
       +
         const ownerRef = options && options.ownerRef;

     

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

     

       15
       +
       

     

       16
       +
         useLayoutEffect(() => {

     

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

     

       18
       +
       

     

       19
       +
           let selection: RestoreSelection | null = null;

     

       20
       +
       

     

       21
       +
           function onFocus(event: FocusEvent) {

     

       22
       +
             if (!ref.current || event.defaultPrevented) return;

     

       23
       +
       

     

       24
       +
             const owner = (ownerRef && ownerRef.current) || selection && selection.element;

     

       25
       +
             const { relatedTarget, target } = event;

     

       26
       +
             if (relatedTarget === owner) {

     

       27
       +
               // When owner is explicitly passed we can make a snapshot early

     

       28
       +
               selection = snapshotSelection(owner);

     

       29
       +
             } else if (contains(ref.current, target) && !contains(ref.current, relatedTarget)) {

     

       30
       +
               // Check whether focus is about to move into the container and snapshot last focus

     

       31
       +
               selection = snapshotSelection(owner);

     

       32
       +
             } else if (contains(ref.current, relatedTarget) && !contains(ref.current, target)) {

     

       33
       +
               // Reset focus if it's lost and has left the menu

     

       34
       +
               selection = null;

     

       35
       +
             }

     

       36
       +
           }

     

       37
       +
       

     

       38
       +
           function onKey(event: KeyboardEvent) {

     

       39
       +
             if (!ref.current || event.defaultPrevented) return;

     

       40
       +
       

     

       41
       +
             const owner = (ownerRef && ownerRef.current) || selection && selection.element;

     

       42
       +
             const active = document.activeElement as HTMLElement;

     

       43
       +
             const focusTargets = getFocusTargets(ref.current);

     

       44
       +
             if (!focusTargets.length || !contains(ref.current, active) || !contains(owner, active)) {

     

       45
       +
               // Do nothing if container doesn't contain focus or not targets are available

     

       46
       +
               return;

     

       47
       +
             }

     

       48
       +
       

     

       49
       +
             if (

     

       50
       +
               (!isInputElement(active) && event.code === 'ArrowRight') ||

     

       51
       +
               event.code === 'ArrowDown'

     

       52
       +
             ) {

     

       53
       +
               // Implement forward movement in focus targets

     

       54
       +
               event.preventDefault();

     

       55
       +
               const focusIndex = focusTargets.indexOf(active);

     

       56
       +
               const nextIndex = focusIndex < focusTargets.length - 1 ? focusIndex + 1 : 0;

     

       57
       +
               focusTargets[nextIndex].focus();

     

       58
       +
             } else if (

     

       59
       +
               (!isInputElement(active) && event.code === 'ArrowLeft') ||

     

       60
       +
               event.code === 'ArrowUp'

     

       61
       +
             ) {

     

       62
       +
               // Implement backward movement in focus targets

     

       63
       +
               event.preventDefault();

     

       64
       +
               const focusIndex = focusTargets.indexOf(active);

     

       65
       +
               const nextIndex = focusIndex > 0 ? focusIndex - 1 : focusTargets.length - 1;

     

       66
       +
               focusTargets[nextIndex].focus();

     

       67
       +
             } else if (event.code === 'Home') {

     

       68
       +
               // Implement Home => first item

     

       69
       +
               event.preventDefault();

     

       70
       +
               focusTargets[0].focus();

     

       71
       +
             } else if (event.code === 'End') {

     

       72
       +
               // Implement End => last item

     

       73
       +
               event.preventDefault();

     

       74
       +
               focusTargets[focusTargets.length - 1].focus();

     

       75
       +
             } else if (owner && active !== owner && event.code === 'Escape') {

     

       76
       +
               // Restore selection if escape is pressed

     

       77
       +
               event.preventDefault();

     

       78
       +
               restoreSelection(selection);

     

       79
       +
             } else if (

     

       80
       +
               owner &&

     

       81
       +
               active !== owner &&

     

       82
       +
               isInputElement(owner) &&

     

       83
       +
               /^(?:Key|Digit)/.test(event.code)

     

       84
       +
             ) {

     

       85
       +
               // Restore selection if a key is pressed on input

     

       86
       +
               event.preventDefault();

     

       87
       +
               restoreSelection(selection);

     

       88
       +
             }

     

       89
       +
           }

     

       90
       +
       

     

       91
       +
           document.body.addEventListener('focusin', onFocus);

     

       92
       +
           document.addEventListener('keydown', onKey);

     

       93
       +
       

     

       94
       +
           return () => {

     

       95
       +
             document.body.removeEventListener('focusin', onFocus);

     

       96
       +
             document.removeEventListener('keydown', onKey);

     

       97
       +
           };

     

       98
       +
         }, [ref, disabled]);

     

       99
       +
       }

+68

src/useModalFocus.ts

···

       1
       +
       import { RestoreSelection, snapshotSelection, restoreSelection } from './utils/selection';

     

       2
       +
       import { getFirstFocusTarget, getFocusTargets } from './utils/focus';

     

       3
       +
       import { useLayoutEffect } from './utils/react';

     

       4
       +
       import { contains } from './utils/element';

     

       5
       +
       import { makePriorityHook } from './usePriority';

     

       6
       +
       import { Ref } from './types';

     

       7
       +
       

     

       8
       +
       const usePriority = makePriorityHook();

     

       9
       +
       

     

       10
       +
       export interface ModalFocusOptions {

     

       11
       +
         disabled?: boolean;

     

       12
       +
       }

     

       13
       +
       

     

       14
       +
       export function useModalFocus<T extends HTMLElement>(ref: Ref<T>, options?: ModalFocusOptions) {

     

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

     

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

     

       17
       +
       

     

       18
       +
         useLayoutEffect(() => {

     

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

     

       20
       +
       

     

       21
       +
           let selection: RestoreSelection | null = null;

     

       22
       +
           if (!document.activeElement || !ref.current.contains(document.activeElement)) {

     

       23
       +
             const newTarget = getFirstFocusTarget(ref.current);

     

       24
       +
             if (newTarget) {

     

       25
       +
               selection = snapshotSelection(ref.current);

     

       26
       +
               newTarget.focus();

     

       27
       +
             }

     

       28
       +
           }

     

       29
       +
       

     

       30
       +
           function onBlur(event: FocusEvent) {

     

       31
       +
             const parent = ref.current;

     

       32
       +
             if (!parent || event.defaultPrevented) return;

     

       33
       +
       

     

       34
       +
             if (contains(parent, event.target) && !contains(parent, event.relatedTarget)) {

     

       35
       +
               const target = getFirstFocusTarget(parent);

     

       36
       +
               if (target) target.focus();

     

       37
       +
             }

     

       38
       +
           }

     

       39
       +
       

     

       40
       +
           function onKeyDown(event: KeyboardEvent) {

     

       41
       +
             const parent = ref.current;

     

       42
       +
             if (!parent || event.defaultPrevented) return;

     

       43
       +
       

     

       44
       +
             if (event.code === 'Tab') {

     

       45
       +
               const activeElement = document.activeElement as HTMLElement;

     

       46
       +
               const targets = getFocusTargets(parent);

     

       47
       +
               const index = targets.indexOf(activeElement);

     

       48
       +
               if (event.shiftKey && index === 0) {

     

       49
       +
                 event.preventDefault();

     

       50
       +
                 targets[targets.length - 1].focus();

     

       51
       +
               } else if (!event.shiftKey && index === targets.length - 1) {

     

       52
       +
                 event.preventDefault();

     

       53
       +
                 targets[0].focus();

     

       54
       +
               }

     

       55
       +
       

     

       56
       +
             }

     

       57
       +
           }

     

       58
       +
       

     

       59
       +
           document.body.addEventListener('focusout', onBlur);

     

       60
       +
           document.addEventListener('keydown', onKeyDown);

     

       61
       +
       

     

       62
       +
           return () => {

     

       63
       +
             restoreSelection(selection);

     

       64
       +
             document.body.removeEventListener('focusout', onBlur);

     

       65
       +
             document.removeEventListener('keydown', onKeyDown);

     

       66
       +
           };

     

       67
       +
         }, [ref, hasPriority, disabled]);

     

       68
       +
       }

+55

src/usePriority.ts

···

       1
       +
       import { useState } from 'react';

     

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

     

       3
       +
       import { Ref } from './types';

     

       4
       +
       

     

       5
       +
       /** Creates a priority stack of elements so that we can determine the "deepest" one to be the active hook */

     

       6
       +
       export const makePriorityHook = () => {

     

       7
       +
         const listeners: Set<Function> = new Set();

     

       8
       +
         const priorityStack: HTMLElement[] = [];

     

       9
       +
       

     

       10
       +
         const sortByHierarchy = (a: HTMLElement, b: HTMLElement) => {

     

       11
       +
           const x = a.compareDocumentPosition(b);

     

       12
       +
           return (

     

       13
       +
             (x & 16 /* a contains b */ && -1) ||

     

       14
       +
             (x & 8 /* b contains a */ && 1) ||

     

       15
       +
             (x & 2 /* b follows a */ && -1) ||

     

       16
       +
             (x & 4 /* a follows b */ && 1)

     

       17
       +
           ) || 0;

     

       18
       +
         };

     

       19
       +
       

     

       20
       +
         /** Indicates whether a given element on a stack of active priority hooks is the deepest element. */

     

       21
       +
         return function usePriority<T extends HTMLElement>(ref: Ref<T>, disabled?: boolean): boolean {

     

       22
       +
           function computeHasPriority(): boolean {

     

       23
       +
             if (!ref.current) return false;

     

       24
       +
             const tempStack = priorityStack.concat(ref.current).sort(sortByHierarchy);

     

       25
       +
             return tempStack[tempStack.length - 1] === ref.current;

     

       26
       +
           }

     

       27
       +
       

     

       28
       +
           const isDisabled = !!disabled;

     

       29
       +
           const [hasPriority, setHasPriority] = useState(computeHasPriority);

     

       30
       +
       

     

       31
       +
           useLayoutEffect(() => {

     

       32
       +
             if (!ref.current || isDisabled) return;

     

       33
       +
       

     

       34
       +
             const { current } = ref;

     

       35
       +
       

     

       36
       +
             function onChange() {

     

       37
       +
               setHasPriority(computeHasPriority);

     

       38
       +
             }

     

       39
       +
       

     

       40
       +
             priorityStack.push(current);

     

       41
       +
             priorityStack.sort(sortByHierarchy);

     

       42
       +
             listeners.forEach(fn => fn());

     

       43
       +
             listeners.add(onChange);

     

       44
       +
       

     

       45
       +
             return () => {

     

       46
       +
               const index = priorityStack.indexOf(current);

     

       47
       +
               priorityStack.splice(index, 1);

     

       48
       +
               listeners.delete(onChange);

     

       49
       +
               listeners.forEach(fn => fn());

     

       50
       +
             };

     

       51
       +
           }, [ref, isDisabled]);

     

       52
       +
       

     

       53
       +
           return hasPriority;

     

       54
       +
         }

     

       55
       +
       };

+8 -1

src/utils/element.ts

···

       3
        
         const index = parseInt(node.getAttribute('tabindex')!, 10);

     

       4
        
         return (

     

       5
        
           index === index &&

     

       6
       -
           (node as HTMLElement).contentEditable !== 'true' &&

     

       7
        
           index

     

       8
        
         ) || 0;

     

       9
        
       };

     
···

       14
        
         (node as HTMLElement).offsetHeight &&

     

       15
        
         node.getClientRects().length &&

     

       16
        
         getComputedStyle(node).visibility !== 'hidden'

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       17
        
       );

     

       18
        
       

     

       19
        
       export const contains = (owner: Element | null, node: Element | EventTarget | null) =>

···

       3
        
         const index = parseInt(node.getAttribute('tabindex')!, 10);

     

       4
        
         return (

     

       5
        
           index === index &&

     

       6
       +
           !(node as HTMLElement).isContentEditable &&

     

       7
        
           index

     

       8
        
         ) || 0;

     

       9
        
       };

     
···

       14
        
         (node as HTMLElement).offsetHeight &&

     

       15
        
         node.getClientRects().length &&

     

       16
        
         getComputedStyle(node).visibility !== 'hidden'

     

       17
       +
       );

     

       18
       +
       

     

       19
       +
       /** Returns whether an element accepts text input. */

     

       20
       +
       export const isInputElement = (node: Element): boolean => !!(

     

       21
       +
         node.tagName === 'INPUT'

     

       22
       +
           || node.tagName === 'TEXTAREA'

     

       23
       +
           || (node as HTMLElement).isContentEditable

     

       24
        
       );

     

       25
        
       

     

       26
        
       export const contains = (owner: Element | null, node: Element | EventTarget | null) =>

+4 -2

src/utils/focus.ts

···

       55
        
       };

     

       56
        
       

     

       57
        
       /** Returns the next (optionally in reverse) focus target given a target node. */

     

       58
       -
       export const getNextFocusTarget = (node: HTMLElement, reverse?: boolean) => {

     

       59
        
         let current: Element | null = node;

     

       60
        
         while (current) {

     

       61
        
           let next: Element | null = current;

     

       62
        
           while (next = reverse ? next.previousElementSibling : next.nextElementSibling) {

     

       63
       -
             if (hasFocusTargets(next)) {

     

       0
        
       
     

       0
        
       
     

       64
        
               const targets = getFocusTargets(next);

     

       65
        
               if (targets.length)

     

       66
        
                 return targets[reverse ? targets.length - 1 : 0];

···

       55
        
       };

     

       56
        
       

     

       57
        
       /** Returns the next (optionally in reverse) focus target given a target node. */

     

       58
       +
       export const getNextFocusTarget = (node: HTMLElement, reverse?: boolean): HTMLElement | null => {

     

       59
        
         let current: Element | null = node;

     

       60
        
         while (current) {

     

       61
        
           let next: Element | null = current;

     

       62
        
           while (next = reverse ? next.previousElementSibling : next.nextElementSibling) {

     

       63
       +
             if (isVisible(next) && !!node.matches(focusableSelectors)) {

     

       64
       +
               return next as HTMLElement;

     

       65
       +
             } else if (hasFocusTargets(next)) {

     

       66
        
               const targets = getFocusTargets(next);

     

       67
        
               if (targets.length)

     

       68
        
                 return targets[reverse ? targets.length - 1 : 0];

src/utils/react.ts

···

       1
       +
       import { useEffect, useLayoutEffect } from 'react';

     

       2
       +
       

     

       3
       +
       const useIsomorphicEffect = typeof window !== 'undefined'

     

       4
       +
         ? useLayoutEffect

     

       5
       +
         : useEffect;

     

       6
       +
       

     

       7
       +
       export { useIsomorphicEffect as useLayoutEffect };

+6 -8

src/utils/selection.ts

···

       1
       -
       type NodeRef = { current?: HTMLElement | null | void } & HTMLElement;

     

       2
       -
       

     

       3
        
       interface RestoreInputSelection {

     

       4
       -
         element: NodeRef,

     

       5
        
         method: 'setSelectionRange',

     

       6
        
         arguments: [number, number, 'forward' | 'backward' | 'none' | undefined],

     

       7
        
       }

     

       8
        
       

     

       9
        
       interface RestoreActiveNode {

     

       10
       -
         element: NodeRef,

     

       11
        
         method: 'focus',

     

       12
        
       }

     

       13
        
       

     

       14
        
       interface RestoreSelectionRange {

     

       15
       -
         element: NodeRef,

     

       16
        
         method: 'range',

     

       17
        
         range: Range

     

       18
        
       }

     
···

       26
        
       );

     

       27
        
       

     

       28
        
       /** Snapshots the current focus or selection target, optinally using a ref if it's passed. */

     

       29
       -
       export const snapshotSelection = (node?: NodeRef): RestoreSelection | null => {

     

       30
        
         const target = document.activeElement as HTMLElement | null;

     

       31
       -
         const element: NodeRef | null = node && target && (node !== target || (node as any).current !== target) ? node : target;

     

       32
        
         if (!element || !target) {

     

       33
        
           return null;

     

       34
        
         } else if (isInputElement(target)) {

     
···

       50
        
       

     

       51
        
       /** Restores a given snapshot of a selection, falling back to a simple focus. */

     

       52
        
       export const restoreSelection = (restore: RestoreSelection | null) => {

     

       53
       -
         const target = restore && restore.element && (restore.element.current || restore.element);

     

       54
        
         if (!restore || !target || !target.parentNode) {

     

       55
        
           return;

     

       56
        
         } else if (restore.method === 'setSelectionRange' && isInputElement(target)) {

···

       0
        
       
     

       0
        
       
     

       1
        
       interface RestoreInputSelection {

     

       2
       +
         element: HTMLElement,

     

       3
        
         method: 'setSelectionRange',

     

       4
        
         arguments: [number, number, 'forward' | 'backward' | 'none' | undefined],

     

       5
        
       }

     

       6
        
       

     

       7
        
       interface RestoreActiveNode {

     

       8
       +
         element: HTMLElement,

     

       9
        
         method: 'focus',

     

       10
        
       }

     

       11
        
       

     

       12
        
       interface RestoreSelectionRange {

     

       13
       +
         element: HTMLElement,

     

       14
        
         method: 'range',

     

       15
        
         range: Range

     

       16
        
       }

     
···

       24
        
       );

     

       25
        
       

     

       26
        
       /** Snapshots the current focus or selection target, optinally using a ref if it's passed. */

     

       27
       +
       export const snapshotSelection = (node?: HTMLElement | null): RestoreSelection | null => {

     

       28
        
         const target = document.activeElement as HTMLElement | null;

     

       29
       +
         const element = node && target && node !== target ? node : target;

     

       30
        
         if (!element || !target) {

     

       31
        
           return null;

     

       32
        
         } else if (isInputElement(target)) {

     
···

       48
        
       

     

       49
        
       /** Restores a given snapshot of a selection, falling back to a simple focus. */

     

       50
        
       export const restoreSelection = (restore: RestoreSelection | null) => {

     

       51
       +
         const target = restore && restore.element;

     

       52
        
         if (!restore || !target || !target.parentNode) {

     

       53
        
           return;

     

       54
        
         } else if (restore.method === 'setSelectionRange' && isInputElement(target)) {