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

An implementation of GitHub's Primer Design System using React

'use strict';

var reactCompilerRuntime = require('react-compiler-runtime');
var React = require('react');
var utils = require('@primer/behaviors/utils');
var useProvidedRefOrCreate = require('./useProvidedRefOrCreate.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

/*
 * 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 $ = reactCompilerRuntime.c(9);
  const containerRef = useProvidedRefOrCreate.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 = [...utils.iterateFocusableElements(container)];
      focusableItems.map(_temp);
    };
    t1 = [open, containerRef];
    $[0] = containerRef;
    $[1] = open;
    $[2] = t0;
    $[3] = t1;
  } else {
    t0 = $[2];
    t1 = $[3];
  }
  React__default.default.useEffect(t0, t1);
  let t2;
  if ($[4] !== containerRef || $[5] !== open) {
    t2 = [open, containerRef];
    $[4] = containerRef;
    $[5] = open;
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  React__default.default.useEffect(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 = [...utils.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);
  }, t2);
  const isAlphabetKey = _temp3;
  let t3;
  if ($[7] !== containerRef) {
    t3 = {
      containerRef
    };
    $[7] = containerRef;
    $[8] = t3;
  } else {
    t3 = $[8];
  }
  return t3;
};
function _temp(item) {
  var _item$textContent;
  if (item.getAttribute("aria-keyshortcuts")) {
    return;
  }
  const firstLetter = (_item$textContent = item.textContent) === null || _item$textContent === void 0 ? void 0 : _item$textContent.toLowerCase()[0];
  if (firstLetter) {
    item.setAttribute("aria-keyshortcuts", firstLetter);
  }
}
function _temp2(shortcut) {
  return shortcut.toLowerCase();
}
function _temp3(event_0) {
  return event_0.key.length === 1 && /[a-z\d]/i.test(event_0.key);
}

exports.useMnemonics = useMnemonics;