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

An implementation of GitHub's Primer Design System using React

import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
import { c } from "react-compiler-runtime";
import React from "react";
import { iterateFocusableElements } from "@primer/behaviors/utils";
//#region src/hooks/useMnemonics.ts
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;
			[...iterateFocusableElements(container)].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;
				if (event.ctrlKey || event.altKey || event.metaKey) return;
				if (!isAlphabetKey(event)) return;
				event.stopPropagation();
				const query = event.key.toLowerCase();
				let elementToFocus;
				const itemsMatchingKey = [...iterateFocusableElements(container_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 || _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();
}
//#endregion
export { isAlphabetKey, useMnemonics };