@primer/react/dist/TreeView/useTypeahead.js

An implementation of GitHub's Primer Design System using React

import useSafeTimeout from "../hooks/useSafeTimeout.js";
import { getAccessibleName } from "./shared.js";
import { useTreeItemCache } from "./useTreeItemCache.js";
import { c } from "react-compiler-runtime";
import React from "react";
//#region src/TreeView/useTypeahead.ts
function useTypeahead(t0) {
	const $ = c(12);
	const { containerRef, onFocusChange } = t0;
	const searchValue = React.useRef("");
	const timeoutRef = React.useRef(0);
	const onFocusChangeRef = React.useRef(onFocusChange);
	const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
	const { getTreeItems } = useTreeItemCache(containerRef);
	let t1;
	let t2;
	if ($[0] !== onFocusChange) {
		t1 = () => {
			onFocusChangeRef.current = onFocusChange;
		};
		t2 = [onFocusChange];
		$[0] = onFocusChange;
		$[1] = t1;
		$[2] = t2;
	} else {
		t1 = $[1];
		t2 = $[2];
	}
	React.useEffect(t1, t2);
	let t3;
	if ($[3] !== containerRef || $[4] !== getTreeItems) {
		t3 = (searchValue_0) => {
			if (!searchValue_0) return;
			if (!containerRef.current) return;
			const elements = getTreeItems();
			let sortedElements = wrapArray(elements, elements.findIndex(_temp));
			if (searchValue_0.length === 1) sortedElements = sortedElements.slice(1);
			const nextElement = sortedElements.find((element_0) => {
				return getAccessibleName(element_0).toLowerCase().startsWith(searchValue_0.toLowerCase());
			});
			if (nextElement) onFocusChangeRef.current(nextElement);
		};
		$[3] = containerRef;
		$[4] = getTreeItems;
		$[5] = t3;
	} else t3 = $[5];
	const focusSearchValue = t3;
	let t4;
	let t5;
	if ($[6] !== containerRef || $[7] !== focusSearchValue || $[8] !== safeClearTimeout || $[9] !== safeSetTimeout) {
		t4 = () => {
			if (!containerRef.current) return;
			const container = containerRef.current;
			const onKeyDown = function onKeyDown(event) {
				if (!event.key || event.key.length > 1 || event.key === " ") return;
				if (event.ctrlKey || event.altKey || event.metaKey) return;
				searchValue.current = searchValue.current + event.key;
				focusSearchValue(searchValue.current);
				safeClearTimeout(timeoutRef.current);
				timeoutRef.current = safeSetTimeout(() => searchValue.current = "", 300);
				event.preventDefault();
				event.stopPropagation();
			};
			container.addEventListener("keydown", onKeyDown);
			return () => container.removeEventListener("keydown", onKeyDown);
		};
		t5 = [
			containerRef,
			focusSearchValue,
			safeClearTimeout,
			safeSetTimeout
		];
		$[6] = containerRef;
		$[7] = focusSearchValue;
		$[8] = safeClearTimeout;
		$[9] = safeSetTimeout;
		$[10] = t4;
		$[11] = t5;
	} else {
		t4 = $[10];
		t5 = $[11];
	}
	React.useEffect(t4, t5);
}
/**
* Wraps an array around itself at a given start index
*
* @example
* wrapArray(['a', 'b', 'c', 'd'], 2) // ['c', 'd', 'a', 'b']
*/
function _temp(element) {
	return element === document.activeElement;
}
function wrapArray(array, startIndex) {
	return array.map((_, index) => array[(startIndex + index) % array.length]);
}
//#endregion
export { useTypeahead };