Something went wrong. Try again.
Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Something went wrong. Try again.
6.4 kB · 193 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194import { snapshotSelection, restoreSelection } from './utils/selection';import { getFocusTargets, getNextFocusTarget, getActive, focus,} from './utils/focus';import { click } from './utils/click';import { useLayoutEffect } from './utils/react';import { contains, getRoot, isInputElement } from './utils/element';import { makePriorityHook } from './usePriority';import { Ref } from './types';
const usePriority = makePriorityHook();
export interface DialogFocusOptions { disabled?: boolean; ownerRef?: Ref<HTMLElement>;}
export function useDialogFocus<T extends HTMLElement>( ref: Ref<T>, options?: DialogFocusOptions) { const ownerRef = options && options.ownerRef; const disabled = !!(options && options.disabled); const hasPriority = usePriority(ref, disabled);
useLayoutEffect(() => { const { current: element } = ref; if (!element || disabled) return;
const root = getRoot(element); let selection = snapshotSelection(ownerRef && ownerRef.current); let willReceiveFocus = false; let focusMovesForward = true;
function onClick(event: MouseEvent) { if (!element || event.defaultPrevented || willReceiveFocus) return;
const target = event.target as HTMLElement | null; if (target && contains(element, target)) { selection = null; willReceiveFocus = true; } }
function onFocus(event: FocusEvent) { if (!element || event.defaultPrevented) return;
const owner = (ownerRef && ownerRef.current) || (selection && selection.element);
if ( willReceiveFocus || (hasPriority.current && owner && contains(event.target, owner)) ) { if (!contains(ref.current, event.relatedTarget)) selection = snapshotSelection(owner); willReceiveFocus = false; return; }
// Check whether focus is about to move into the container and prevent it if ( (hasPriority.current || !contains(ref.current, event.relatedTarget)) && contains(ref.current, event.target) ) { event.preventDefault(); // Get the next focus target of the container focus(getNextFocusTarget(element, !focusMovesForward)); focusMovesForward = true; } }
function onKey(event: KeyboardEvent) { if (!element || event.defaultPrevented || event.isComposing) return;
// Mark whether focus is moving forward for the `onFocus` handler if (event.code === 'Tab') { focusMovesForward = !event.shiftKey; } else if (!hasPriority.current) { return; }
const active = getActive(); const owner = (ownerRef && ownerRef.current) || (selection && selection.element); const focusTargets = getFocusTargets(element);
if ( !focusTargets.length || (!contains(owner, active) && !contains(ref.current, active)) ) { // Do nothing if no targets are available or the listbox or owner don't have focus return; } else if (event.code === 'Tab') { // Skip over the listbox via the parent if we press tab event.preventDefault(); const currentTarget = contains(owner, active) ? owner! : element; focus(getNextFocusTarget(currentTarget, event.shiftKey)); } else if ( (!isInputElement(active) && event.code === 'ArrowRight') || event.code === 'ArrowDown' ) { // Implement forward movement in focus targets event.preventDefault(); const focusIndex = focusTargets.indexOf(active!); const nextIndex = focusIndex < focusTargets.length - 1 ? focusIndex + 1 : 0; willReceiveFocus = true; focus(focusTargets[nextIndex]); } else if ( (!isInputElement(active) && event.code === 'ArrowLeft') || event.code === 'ArrowUp' ) { // Implement backward movement in focus targets event.preventDefault(); const focusIndex = focusTargets.indexOf(active!); const nextIndex = focusIndex > 0 ? focusIndex - 1 : focusTargets.length - 1; willReceiveFocus = true; focus(focusTargets[nextIndex]); } else if (event.code === 'Home') { // Implement Home => first item event.preventDefault(); willReceiveFocus = true; focus(focusTargets[0]); } else if (event.code === 'End') { // Implement End => last item event.preventDefault(); willReceiveFocus = true; focus(focusTargets[focusTargets.length - 1]); } else if ( owner && !contains(ref.current, owner) && event.code === 'Escape' ) { // Restore selection if escape is pressed event.preventDefault(); willReceiveFocus = false; restoreSelection(selection); } else if ( owner && isInputElement(owner) && !contains(ref.current, owner) && contains(owner, active) && event.code === 'Enter' ) { // Move focus to first target when Enter is pressed const newTarget = getFocusTargets(element)[0]; if (newTarget) { willReceiveFocus = true; focus(newTarget); } } else if ( (event.code === 'Enter' || event.code === 'Space') && focusTargets.indexOf(active!) > -1 && !isInputElement(active) ) { // Implement virtual click / activation for list items event.preventDefault(); willReceiveFocus = true; click(active); } else if ( owner && isInputElement(owner) && !contains(owner, active) && /^(?:Key|Digit)/.test(event.code) ) { // Restore selection if a key is pressed on input event.stopPropagation(); willReceiveFocus = false; restoreSelection(selection); } }
element.addEventListener('mousedown', onClick, true); root.addEventListener('focusin', onFocus); root.addEventListener('keydown', onKey);
return () => { element.removeEventListener('mousedown', onClick); root.removeEventListener('focusin', onFocus); root.removeEventListener('keydown', onKey);
const active = getActive(); if (!active || contains(element, active)) { restoreSelection(selection); } }; }, [ref.current, disabled]);}