@primer/react/dist/experimental/Tabs/useTabList.js

An implementation of GitHub's Primer Design System using React

import { useProvidedRefOrCreate } from "../../hooks/useProvidedRefOrCreate.js";
import { c } from "react-compiler-runtime";
//#region src/experimental/Tabs/useTabList.ts
function useTabList(props) {
	const $ = c(9);
	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": ariaOrientation } = props;
	const ref = useProvidedRefOrCreate(props.ref);
	let t0;
	if ($[0] !== ariaOrientation || $[1] !== ref) {
		t0 = (event) => {
			const { current: tablist } = ref;
			if (tablist === null) return;
			const tabs = getFocusableTabs(tablist);
			const isVertical = ariaOrientation === "vertical";
			const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
			const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
			if (event.key === nextKey || event.key === prevKey || event.key === "Home" || event.key === "End") {
				event.preventDefault();
				event.stopPropagation();
			}
			if (event.key === nextKey) {
				const selectedTabIndex = tabs.findIndex(_temp);
				if (selectedTabIndex === -1) return;
				tabs[(selectedTabIndex + 1) % tabs.length].focus();
			} else if (event.key === prevKey) {
				const selectedTabIndex_0 = tabs.findIndex(_temp2);
				if (selectedTabIndex_0 === -1) return;
				tabs[(tabs.length + selectedTabIndex_0 - 1) % tabs.length].focus();
			} else if (event.key === "Home") {
				if (tabs[0]) tabs[0].focus();
			} else if (event.key === "End") {
				if (tabs.length > 0) tabs[tabs.length - 1].focus();
			}
		};
		$[0] = ariaOrientation;
		$[1] = ref;
		$[2] = t0;
	} else t0 = $[2];
	const onKeyDown = t0;
	const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
	let t2;
	if ($[3] !== ariaLabel || $[4] !== ariaLabelledby || $[5] !== onKeyDown || $[6] !== ref || $[7] !== t1) {
		t2 = { tabListProps: {
			ref,
			"aria-label": ariaLabel,
			"aria-labelledby": ariaLabelledby,
			"aria-orientation": t1,
			role: "tablist",
			onKeyDown
		} };
		$[3] = ariaLabel;
		$[4] = ariaLabelledby;
		$[5] = onKeyDown;
		$[6] = ref;
		$[7] = t1;
		$[8] = t2;
	} else t2 = $[8];
	return t2;
}
function _temp2(tab_0) {
	return tab_0.getAttribute("aria-selected") === "true";
}
function _temp(tab) {
	return tab.getAttribute("aria-selected") === "true";
}
function getFocusableTabs(tablist) {
	return Array.from(tablist.querySelectorAll("[role=\"tab\"]:not([aria-disabled])"));
}
//#endregion
export { useTabList };