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

An implementation of GitHub's Primer Design System using React

import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
import { useControllableState } from "../../hooks/useControllableState.js";
import { TabsContext } from "./TabsContext.js";
import { c } from "react-compiler-runtime";
import { jsx } from "react/jsx-runtime";
import React, { useId } from "react";
//#region src/experimental/Tabs/Tabs.tsx
/**
* The Tabs component provides the base structure for a tabbed interface, without providing any formal requirement on DOM structure or styling.
* It manages the state of the selected tab, handles tab ordering/selection and provides context to its child components to ensure an accessible experience.
*
* This is intended to be used in conjunction with the `useTab`, `useTabList`, and `useTabPanel` hooks to build a fully accessible tabs component.
* The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
*/
function Tabs(props) {
	var _props$defaultValue;
	const $ = c(13);
	const { children, onValueChange } = props;
	const groupId = useId();
	const t0 = (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : props.value;
	let t1;
	if ($[0] !== props.value || $[1] !== t0) {
		t1 = {
			name: "tab-selection",
			defaultValue: t0,
			value: props.value
		};
		$[0] = props.value;
		$[1] = t0;
		$[2] = t1;
	} else t1 = $[2];
	const [selectedValue, setSelectedValue] = useControllableState(t1);
	const savedOnValueChange = React.useRef(onValueChange);
	let t2;
	if ($[3] !== groupId || $[4] !== selectedValue || $[5] !== setSelectedValue) {
		t2 = {
			groupId,
			selectedValue,
			selectTab(value) {
				var _savedOnValueChange$c;
				setSelectedValue(value);
				(_savedOnValueChange$c = savedOnValueChange.current) === null || _savedOnValueChange$c === void 0 || _savedOnValueChange$c.call(savedOnValueChange, { value });
			}
		};
		$[3] = groupId;
		$[4] = selectedValue;
		$[5] = setSelectedValue;
		$[6] = t2;
	} else t2 = $[6];
	const contextValue = t2;
	let t3;
	let t4;
	if ($[7] !== onValueChange) {
		t3 = () => {
			savedOnValueChange.current = onValueChange;
		};
		t4 = [onValueChange];
		$[7] = onValueChange;
		$[8] = t3;
		$[9] = t4;
	} else {
		t3 = $[8];
		t4 = $[9];
	}
	useIsomorphicLayoutEffect(t3, t4);
	let t5;
	if ($[10] !== children || $[11] !== contextValue) {
		t5 = /*#__PURE__*/ jsx(TabsContext.Provider, {
			value: contextValue,
			children
		});
		$[10] = children;
		$[11] = contextValue;
		$[12] = t5;
	} else t5 = $[12];
	return t5;
}
//#endregion
export { Tabs };