commit f1c9f306369987103e781e949b277a3b9b3ed315 · kitten.sh/use-interactions

src/index.ts

···

       2
       2
        
       export * from './useModalFocus';

     

       3
       3
        
       export * from './useDialogFocus';

     

       4
       4
        
       export * from './useMenuFocus';

     

       5
       5
       +
       export * from './useOptionFocus';

     

       5
       6
        
       export * from './useDismissable';

     

       6
       7
        
       export * from './useScrollRestoration';

     

       7
       8
        
       export * from './useStyleTransition';

+18 -7

src/useDialogFocus.ts

···

       3
       3
        
         getFirstFocusTarget,

     

       4
       4
        
         getFocusTargets,

     

       5
       5
        
         getNextFocusTarget,

     

       6
       6
       +
         focus,

     

       6
       7
        
       } from './utils/focus';

     

       8
       8
       +
       import { click } from './utils/click';

     

       7
       9
        
       import { useLayoutEffect } from './utils/react';

     

       8
       8
       -
       import { contains, focus, isInputElement } from './utils/element';

     

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

     

       9
       11
        
       import { makePriorityHook } from './usePriority';

     

       10
       12
        
       import { Ref } from './types';

     

       11
       13
        
       

     
···

       33
       35
        
           let focusMovesForward = true;

     

       34
       36
        
       

     

       35
       37
        
           function onClick(event: MouseEvent) {

     

       36
       36
       -
             if (!element || event.defaultPrevented) return;

     

       38
       38
       +
             if (!element || event.defaultPrevented || willReceiveFocus) return;

     

       37
       39
        
       

     

       38
       40
        
             const target = event.target as HTMLElement | null;

     

       39
       41
        
             if (target && getFocusTargets(element).indexOf(target) > -1) {

     
···

       106
       108
        
               const nextIndex =

     

       107
       109
        
                 focusIndex < focusTargets.length - 1 ? focusIndex + 1 : 0;

     

       108
       110
        
               willReceiveFocus = true;

     

       109
       109
       -
               focusTargets[nextIndex].focus();

     

       111
       111
       +
               focus(focusTargets[nextIndex]);

     

       110
       112
        
             } else if (

     

       111
       113
        
               (!isInputElement(active) && event.code === 'ArrowLeft') ||

     

       112
       114
        
               event.code === 'ArrowUp'

     
···

       117
       119
        
               const nextIndex =

     

       118
       120
        
                 focusIndex > 0 ? focusIndex - 1 : focusTargets.length - 1;

     

       119
       121
        
               willReceiveFocus = true;

     

       120
       120
       -
               focusTargets[nextIndex].focus();

     

       122
       122
       +
               focus(focusTargets[nextIndex]);

     

       121
       123
        
             } else if (event.code === 'Home') {

     

       122
       124
        
               // Implement Home => first item

     

       123
       125
        
               event.preventDefault();

     

       124
       126
        
               willReceiveFocus = true;

     

       125
       125
       -
               focusTargets[0].focus();

     

       127
       127
       +
               focus(focusTargets[0]);

     

       126
       128
        
             } else if (event.code === 'End') {

     

       127
       129
        
               // Implement End => last item

     

       128
       130
        
               event.preventDefault();

     

       129
       131
        
               willReceiveFocus = true;

     

       130
       130
       -
               focusTargets[focusTargets.length - 1].focus();

     

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

     

       131
       133
        
             } else if (

     

       132
       134
        
               owner &&

     

       133
       135
        
               !contains(ref.current, owner) &&

     
···

       148
       150
        
               const newTarget = getFirstFocusTarget(element);

     

       149
       151
        
               if (newTarget) {

     

       150
       152
        
                 willReceiveFocus = true;

     

       151
       151
       -
                 newTarget.focus();

     

       153
       153
       +
                 focus(newTarget);

     

       152
       154
        
               }

     

       155
       155
       +
             } else if (

     

       156
       156
       +
               (event.code === 'Enter' || event.code === 'Space') &&

     

       157
       157
       +
               focusTargets.indexOf(active) > -1 &&

     

       158
       158
       +
               !isInputElement(active)

     

       159
       159
       +
             ) {

     

       160
       160
       +
               // Implement virtual click / activation for list items

     

       161
       161
       +
               event.preventDefault();

     

       162
       162
       +
               willReceiveFocus = true;

     

       163
       163
       +
               click(active);

     

       153
       164
        
             } else if (

     

       154
       165
        
               owner &&

     

       155
       166
        
               isInputElement(owner) &&

+15 -7

src/useMenuFocus.ts

···

       3
       3
        
         snapshotSelection,

     

       4
       4
        
         restoreSelection,

     

       5
       5
        
       } from './utils/selection';

     

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

     

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

     

       7
       7
       +
       import { click } from './utils/click';

     

       7
       8
        
       import { useLayoutEffect } from './utils/react';

     

       8
       9
        
       import { contains, isInputElement } from './utils/element';

     

       9
       10
        
       import { Ref } from './types';

     
···

       75
       76
        
               const focusIndex = focusTargets.indexOf(active);

     

       76
       77
        
               const nextIndex =

     

       77
       78
        
                 focusIndex < focusTargets.length - 1 ? focusIndex + 1 : 0;

     

       78
       78
       -
               focusTargets[nextIndex].focus();

     

       79
       79
       +
               focus(focusTargets[nextIndex]);

     

       79
       80
        
             } else if (

     

       80
       81
        
               (!isInputElement(active) && event.code === 'ArrowLeft') ||

     

       81
       82
        
               event.code === 'ArrowUp'

     
···

       85
       86
        
               const focusIndex = focusTargets.indexOf(active);

     

       86
       87
        
               const nextIndex =

     

       87
       88
        
                 focusIndex > 0 ? focusIndex - 1 : focusTargets.length - 1;

     

       88
       88
       -
               focusTargets[nextIndex].focus();

     

       89
       89
       +
               focus(focusTargets[nextIndex]);

     

       89
       90
        
             } else if (event.code === 'Home') {

     

       90
       91
        
               // Implement Home => first item

     

       91
       92
        
               event.preventDefault();

     

       92
       92
       -
               focusTargets[0].focus();

     

       93
       93
       +
               focus(focusTargets[0]);

     

       93
       94
        
             } else if (event.code === 'End') {

     

       94
       95
        
               // Implement End => last item

     

       95
       96
        
               event.preventDefault();

     

       96
       96
       -
               focusTargets[focusTargets.length - 1].focus();

     

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

     

       97
       98
        
             } else if (

     

       98
       99
        
               owner &&

     

       99
       100
        
               isInputElement(owner) &&

     
···

       101
       102
        
               event.code === 'Enter'

     

       102
       103
        
             ) {

     

       103
       104
        
               // Move focus to first target when enter is pressed

     

       104
       104
       -
               const newTarget = getFirstFocusTarget(element);

     

       105
       105
       -
               if (newTarget) newTarget.focus();

     

       105
       105
       +
               focus(getFirstFocusTarget(element));

     

       106
       106
        
             } else if (

     

       107
       107
        
               owner &&

     

       108
       108
        
               !contains(ref.current, owner) &&

     
···

       112
       112
        
               // Restore selection if escape is pressed

     

       113
       113
        
               event.preventDefault();

     

       114
       114
        
               restoreSelection(selection);

     

       115
       115
       +
             } else if (

     

       116
       116
       +
               (event.code === 'Enter' || event.code === 'Space') &&

     

       117
       117
       +
               focusTargets.indexOf(active) > -1 &&

     

       118
       118
       +
               !isInputElement(active)

     

       119
       119
       +
             ) {

     

       120
       120
       +
               // Implement virtual click / activation for list items

     

       121
       121
       +
               event.preventDefault();

     

       122
       122
       +
               click(active);

     

       115
       123
        
             } else if (

     

       116
       124
        
               owner &&

     

       117
       125
        
               isInputElement(owner) &&

+44

src/useOptionFocus.ts

···

       1
       1
       +
       import { isFocusTarget } from './utils/focus';

     

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

     

       3
       3
       +
       import { click } from './utils/click';

     

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

     

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

     

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

     

       7
       7
       +
       

     

       8
       8
       +
       const usePriority = makePriorityHook();

     

       9
       9
       +
       

     

       10
       10
       +
       export interface OptionFocusOptions {

     

       11
       11
       +
         disabled?: boolean;

     

       12
       12
       +
       }

     

       13
       13
       +
       

     

       14
       14
       +
       export function useOptionFocus<T extends HTMLElement>(

     

       15
       15
       +
         ref: Ref<T>,

     

       16
       16
       +
         options?: OptionFocusOptions

     

       17
       17
       +
       ) {

     

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

     

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

     

       20
       20
       +
       

     

       21
       21
       +
         useLayoutEffect(() => {

     

       22
       22
       +
           const { current: element } = ref;

     

       23
       23
       +
           // NOTE: This behaviour isn't necessary for input elements

     

       24
       24
       +
           if (!element || disabled || isInputElement(element)) return;

     

       25
       25
       +
       

     

       26
       26
       +
           function onKey(event: KeyboardEvent) {

     

       27
       27
       +
             if (!element || event.defaultPrevented || event.isComposing) return;

     

       28
       28
       +
       

     

       29
       29
       +
             const active = document.activeElement as HTMLElement;

     

       30
       30
       +
             if (!isFocusTarget(element) || !contains(active, element)) {

     

       31
       31
       +
               // Do nothing if the current item is not a target or not focused

     

       32
       32
       +
               return;

     

       33
       33
       +
             } else if (event.code === 'Space' || event.code === 'Enter') {

     

       34
       34
       +
               event.preventDefault();

     

       35
       35
       +
               click(element);

     

       36
       36
       +
             }

     

       37
       37
       +
           }

     

       38
       38
       +
       

     

       39
       39
       +
           element.addEventListener('keydown', onKey);

     

       40
       40
       +
           return () => {

     

       41
       41
       +
             element.removeEventListener('keydown', onKey);

     

       42
       42
       +
           };

     

       43
       43
       +
         }, [ref.current, disabled, hasPriority]);

     

       44
       44
       +
       }

+29

src/utils/click.ts

···

       1
       1
       +
       import { contains } from './element';

     

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

     

       3
       3
       +
       

     

       4
       4
       +
       const clickableSelectors = [

     

       5
       5
       +
         '[contenteditable]',

     

       6
       6
       +
         'input:not([type="hidden"]):not([disabled])',

     

       7
       7
       +
         'button:not([disabled])',

     

       8
       8
       +
         'select:not([disabled])',

     

       9
       9
       +
         'a[href]',

     

       10
       10
       +
       ].join(',');

     

       11
       11
       +
       

     

       12
       12
       +
       export const click = (node: Element) => {

     

       13
       13
       +
         const activeElement = document.activeElement;

     

       14
       14
       +
         if (!activeElement || contains(node, activeElement)) {

     

       15
       15
       +
           let target: Element | null = node;

     

       16
       16
       +
       

     

       17
       17
       +
           if (node.tagName === 'LABEL') {

     

       18
       18
       +
             const forId = node.getAttribute('for');

     

       19
       19
       +
             target = forId ? document.getElementById(forId) : null;

     

       20
       20
       +
           }

     

       21
       21
       +
       

     

       22
       22
       +
           if (!target || !node.matches(clickableSelectors)) {

     

       23
       23
       +
             target = node.querySelector(clickableSelectors);

     

       24
       24
       +
           }

     

       25
       25
       +
       

     

       26
       26
       +
           if (target) (target as HTMLElement).click();

     

       27
       27
       +
           focus(activeElement);

     

       28
       28
       +
         }

     

       29
       29
       +
       };

-8

src/utils/element.ts

···

       32
       32
        
           owner &&

     

       33
       33
        
           (owner === node || (owner as Element).contains(node as Element))

     

       34
       34
        
         );

     

       35
       35
       -
       

     

       36
       36
       -
       export const focus = (element: Element | null) => {

     

       37
       37
       -
         if (element) {

     

       38
       38
       -
           (element as HTMLElement).focus();

     

       39
       39
       -
         } else if (document.activeElement) {

     

       40
       40
       -
           (document.activeElement as HTMLElement).blur();

     

       41
       41
       -
         }

     

       42
       42
       -
       };

+13

src/utils/focus.ts

···

       24
       24
        
         return a[1] === a[1] ? a[0] - b[0] : a[1] - a[1];

     

       25
       25
        
       };

     

       26
       26
        
       

     

       27
       27
       +
       /** Returns whether this node is focusable. */

     

       28
       28
       +
       export const isFocusTarget = (node: Element): boolean =>

     

       29
       29
       +
         !!node.matches(focusableSelectors) && isVisible(node);

     

       30
       30
       +
       

     

       27
       31
        
       /** Returns whether this node may contain focusable elements. */

     

       28
       32
        
       export const hasFocusTargets = (node: Element): boolean =>

     

       29
       33
        
         !node.matches(excludeSelector) &&

     
···

       99
       103
        
       

     

       100
       104
        
         return null;

     

       101
       105
        
       };

     

       106
       106
       +
       

     

       107
       107
       +
       /** Focuses the given node or blurs if null is passed. */

     

       108
       108
       +
       export const focus = (node: Element | null) => {

     

       109
       109
       +
         if (node) {

     

       110
       110
       +
           (node as HTMLElement).focus();

     

       111
       111
       +
         } else if (document.activeElement) {

     

       112
       112
       +
           (document.activeElement as HTMLElement).blur();

     

       113
       113
       +
         }

     

       114
       114
       +
       };