Function onKeyDown

packages/react-aria/src/toolbar/useToolbar.ts:64–107

  let focusManager = createFocusManager(ref);

  const onKeyDown: KeyboardEventHandler = e => {
    // don't handle portalled events
    if (!nodeContains(e.currentTarget, getEventTarget(e) as HTMLElement)) {
      return;
    }
    if (
      (orientation === 'horizontal' && e.key === 'ArrowRight') ||
      (orientation === 'vertical' && e.key === 'ArrowDown')
    ) {
      if (shouldReverse) {
        focusManager.focusPrevious();
      } else {
        focusManager.focusNext();
      }
    } else if (
      (orientation === 'horizontal' && e.key === 'ArrowLeft') ||
      (orientation === 'vertical' && e.key === 'ArrowUp')
    ) {
      if (shouldReverse) {
        focusManager.focusNext();
      } else {
        focusManager.focusPrevious();
      }
    } else if (e.key === 'Tab') {
      // When the tab key is pressed, we want to move focus
      // out of the entire toolbar. To do this, move focus
      // to the first or last focusable child, and let the
      // browser handle the Tab key as usual from there.
      lastFocused.current = getActiveElement() as HTMLElement;
      if (e.shiftKey) {
        focusManager.focusFirst();
      } else {
        focusManager.focusLast();
      }
      return;
    } else {
      // if we didn't handle anything, return early so we don't preventDefault
      return;
    }

    // Prevent arrow keys from being handled by nested action groups.
    e.stopPropagation();
    e.preventDefault();
  };

  // Record the last focused child when focus moves out of the toolbar.
  const lastFocused = useRef<HTMLElement | null>(null);