@primer/react/dist/hooks/useMnemonics.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React from 'react';
import { iterateFocusableElements } from '@primer/behaviors/utils';
import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';

/*
 * A mnemonic indicates to the user which key to press (single)
 * to activate a command or navigate to a component
 * typically appearing in a menu title, menu item, or the text of a button.
 */

const useMnemonics = (open, providedRef) => {
  const $ = c(10);
  const containerRef = useProvidedRefOrCreate(providedRef);
  let t0;
  let t1;
  if ($[0] !== containerRef || $[1] !== open) {
    t0 = function addAriaKeyshortcuts() {
      if (!open || !containerRef.current) {
        return;
      }
      const container = containerRef.current;
      const focusableItems = [...iterateFocusableElements(container)];
      focusableItems.map(_temp);
    };
    t1 = [open, containerRef];
    $[0] = containerRef;
    $[1] = open;
    $[2] = t0;
    $[3] = t1;
  } else {
    t0 = $[2];
    t1 = $[3];
  }
  React.useEffect(t0, t1);
  let t2;
  let t3;
  if ($[4] !== containerRef || $[5] !== open) {
    t2 = function handleKeyDown() {
      if (!open || !containerRef.current) {
        return;
      }
      const container_0 = containerRef.current;
      const handler = event => {
        var _elementToFocus;
        const activeElement = document.activeElement;
        if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
          return;
        }
        const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
        if (hasModifier) {
          return;
        }
        if (!isAlphabetKey(event)) {
          return;
        }
        event.stopPropagation();
        const query = event.key.toLowerCase();
        let elementToFocus;
        const focusableItems_0 = [...iterateFocusableElements(container_0)];
        const itemsMatchingKey = focusableItems_0.filter(item_0 => {
          var _item_0$getAttribute;
          const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute("aria-keyshortcuts")) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(" ").map(_temp2);
          return keyshortcuts && keyshortcuts.includes(query);
        });
        const currentActiveIndex = itemsMatchingKey.indexOf(activeElement);
        if (currentActiveIndex === itemsMatchingKey.length - 1) {
          elementToFocus = itemsMatchingKey[0];
        } else {
          elementToFocus = itemsMatchingKey.find((item_1, index) => index > currentActiveIndex);
        }
        (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus();
      };
      container_0.addEventListener("keydown", handler);
      return () => container_0.removeEventListener("keydown", handler);
    };
    t3 = [open, containerRef];
    $[4] = containerRef;
    $[5] = open;
    $[6] = t2;
    $[7] = t3;
  } else {
    t2 = $[6];
    t3 = $[7];
  }
  React.useEffect(t2, t3);
  let t4;
  if ($[8] !== containerRef) {
    t4 = {
      containerRef
    };
    $[8] = containerRef;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  return t4;
};
const isAlphabetKey = event => {
  return event.key.length === 1 && /[a-z\d]/i.test(event.key);
};
function _temp(item) {
  if (item.getAttribute("aria-keyshortcuts")) {
    return;
  }
  const firstLetter = item.textContent.toLowerCase()[0];
  if (firstLetter) {
    item.setAttribute("aria-keyshortcuts", firstLetter);
  }
}
function _temp2(shortcut) {
  return shortcut.toLowerCase();
}

export { isAlphabetKey, useMnemonics };