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

An implementation of GitHub's Primer Design System using React

import { useTabs } from "./useTabs.js";
import { c } from "react-compiler-runtime";
//#region src/experimental/Tabs/useTab.ts
/**
* A custom hook that provides the props needed for a tab component.
* The props returned should be spread onto the component (typically a button) with the `role=tab`, under a `tablist`.
*/
function useTab(props) {
	const $ = c(21);
	const { disabled, value } = props;
	const tabs = useTabs();
	const selected = tabs.selectedValue === value;
	const id = `${tabs.groupId}-tab-${value}`;
	const panelId = `${tabs.groupId}-panel-${value}`;
	let t0;
	if ($[0] !== tabs || $[1] !== value) {
		t0 = function onKeyDown(event) {
			if (event.key === " " || event.key === "Enter") tabs.selectTab(value);
		};
		$[0] = tabs;
		$[1] = value;
		$[2] = t0;
	} else t0 = $[2];
	const onKeyDown = t0;
	let t1;
	if ($[3] !== disabled || $[4] !== tabs || $[5] !== value) {
		t1 = function onMouseDown(event_0) {
			if (!disabled && event_0.button === 0 && event_0.ctrlKey === false) tabs.selectTab(value);
			else event_0.preventDefault();
		};
		$[3] = disabled;
		$[4] = tabs;
		$[5] = value;
		$[6] = t1;
	} else t1 = $[6];
	const onMouseDown = t1;
	let t2;
	if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
		t2 = function onFocus() {
			if (!selected && !disabled) tabs.selectTab(value);
		};
		$[7] = disabled;
		$[8] = selected;
		$[9] = tabs;
		$[10] = value;
		$[11] = t2;
	} else t2 = $[11];
	const onFocus = t2;
	const t3 = disabled ? true : void 0;
	const t4 = selected ? 0 : -1;
	let t5;
	if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
		t5 = { tabProps: {
			"aria-disabled": t3,
			"aria-controls": panelId,
			"aria-selected": selected,
			onKeyDown,
			onMouseDown,
			onFocus,
			id,
			role: "tab",
			tabIndex: t4
		} };
		$[12] = id;
		$[13] = onFocus;
		$[14] = onKeyDown;
		$[15] = onMouseDown;
		$[16] = panelId;
		$[17] = selected;
		$[18] = t3;
		$[19] = t4;
		$[20] = t5;
	} else t5 = $[20];
	return t5;
}
//#endregion
export { useTab };