@primer/react-brand/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../node_modules/clsx/dist/clsx.js";
import { useId as t } from "../../hooks/useId.js";
import { Text as n } from "../../Text/Text.js";
import { Heading as r } from "../../Heading/Heading.js";
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-QteO10lt.css';import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/base-Ue-p74RC.css';/* empty css                                                                                          */
import i from "../../component-helpers/shared.module.js";
import { Link as a } from "../../Link/Link.js";
/* empty css                                                                                         */
import o from "../river-shared.module.js";
import { Visual as s } from "../River/River.js";
import { Icon as c } from "../../Icon/Icon.js";
import { useTabs as l } from "../../hooks/useTabs.js";
import { useWindowSize as u } from "../../hooks/useWindowSize.js";
import d from "./RiverBreakoutTabs.module.js";
import { Accordion as f } from "../../Accordion/Accordion.js";
import p, { cloneElement as m, forwardRef as h, useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
//#region src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx
var w = (e) => (t) => p.isValidElement(t) && t.type === e, T = ({ children: e }) => /* @__PURE__ */ S(x, { children: e }), E = ({ as: e = "h3", children: t, id: n }) => /* @__PURE__ */ S(r, {
	as: e,
	id: n,
	className: "visually-hidden",
	children: t
}), D = ({ color: e = "green", ...t }) => /* @__PURE__ */ S(c, {
	color: e,
	...t
}), O = ({ as: t = "h3", children: n, className: i, size: a = "subhead-large", weight: o = "normal", ...s }) => /* @__PURE__ */ S(r, {
	as: t,
	className: e(d.RiverBreakoutTabs__heading, i),
	size: a,
	weight: o,
	...s,
	children: n
}), k = ({ children: t, className: n, ...r }) => {
	let i = v(() => p.Children.toArray(t).map((t) => L(t) ? m(t, {
		as: t.props.as ?? "p",
		variant: t.props.variant ?? "muted"
	}) : R(t) ? m(t, {
		className: e(t.props.className, d.RiverBreakoutTabs__link),
		size: t.props.size ?? "medium",
		variant: t.props.variant ?? "accent"
	}) : t), [t]);
	return /* @__PURE__ */ S("div", {
		className: e(d.RiverBreakoutTabs__content, n),
		...r,
		children: i
	});
}, A = h(({ className: e, ...t }, n) => /* @__PURE__ */ S(s, {
	ref: n,
	className: e,
	...t
})), j = w(T), M = w(E), N = w(D), P = w(O), F = w(k), I = w(A), L = (e) => p.isValidElement(e) && e.type === n, R = (e) => p.isValidElement(e) && e.type === a, z = (e) => p.Children.toArray(e.props.children).reduce((e, t) => (N(t) && (e.icon = t), P(t) && (e.heading = t), F(t) && (e.content = t), I(t) && (e.visual = t), e), {
	icon: null,
	heading: null,
	content: null,
	visual: null,
	className: e.props.className
}), B = (t) => t ? p.Children.toArray(t.props.children).map((t) => L(t) ? m(t, {
	as: t.props.as ?? "p",
	variant: t.props.variant ?? "muted"
}) : R(t) ? m(t, {
	className: e(t.props.className, d.RiverBreakoutTabs__link),
	size: t.props.size ?? "medium",
	variant: t.props.variant ?? "accent"
}) : t).reduce((e, t) => R(t) ? (e.action ||= t, e) : (e.body.push(t), e), {
	action: null,
	body: []
}) : {
	action: null,
	body: []
}, V = (e, t) => t === 0 ? -1 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1), H = h(({ children: n, className: r, defaultSelectedIndex: a = 0, onChange: s, selectedIndex: c, backgroundVisual: h, imagePosition: x = "center", backgroundVisualFullBleed: w = !1, ...T }, E) => {
	let D = t(), { isLarge: O } = u(), k = v(() => p.Children.toArray(n), [n]), A = k.find(M) ?? null, N = k.filter(j).map(z).filter((e) => e.heading && e.content && e.visual), P = V(a, N.length), F = typeof c == "number" && Number.isFinite(c) ? V(c, N.length) : null, I = F ?? P, L = A?.props.id ?? `${D}-heading`, R = Math.min(Math.max(N.length, 1), 3), H = I >= 0 ? String(I) : void 0, U = O === !0, W = y(!1), { activeTab: G, activateTab: K, getTabListProps: q, getTabPanelProps: J, getTabProps: Y } = l({
		defaultTab: H,
		onTabActivate: g((e) => {
			if (W.current) {
				W.current = !1;
				return;
			}
			if (!s) return;
			let t = Number(e);
			Number.isNaN(t) || s(t);
		}, [s])
	}), [X, Z] = b(I);
	_(() => {
		if (G === null) return;
		let e = Number(G);
		Number.isNaN(e) || Z(e);
	}, [G]), _(() => {
		if (F === null || F < 0) return;
		let e = String(F);
		G !== e && (W.current = !0, K(e)), Z(F);
	}, [
		K,
		G,
		F
	]), !A && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("RiverBreakoutTabs: A11yHeading child is required. This element will not be visible, only read by screenreaders.");
	let ee = (e) => (t) => {
		t && (Z(e), G !== String(e) && K(String(e)));
	}, te = (e) => {
		let t = Number(e.currentTarget.getAttribute("data-index"));
		!e.currentTarget.open && X === t && (e.currentTarget.open = !0);
	}, ne = q(A ? { labelledBy: L } : { label: "River breakout tabs" }), Q = v(() => N.map((e) => B(e.content)), [N]), $ = h == null ? null : /* @__PURE__ */ S("div", {
		className: d.RiverBreakoutTabs__backgroundVisual,
		"aria-hidden": "true",
		children: h
	});
	return /* @__PURE__ */ C("section", {
		ref: E,
		className: e(o.RiverBreakout, o["RiverBreakout--variant-gridline"], i.gridline, d.RiverBreakoutTabs, h != null && d["RiverBreakoutTabs--has-background-visual"], h != null && x === "block-end" && d["RiverBreakoutTabs--image-position-block-end"], h != null && w && d["RiverBreakoutTabs--background-visual-full-bleed"], r),
		...T,
		children: [A && m(A, { id: L }), U ? /* @__PURE__ */ C("div", {
			className: d.RiverBreakoutTabs__wideTabList,
			children: [
				/* @__PURE__ */ S("div", {
					...ne,
					className: d.RiverBreakoutTabs__tablist,
					style: { "--river-breakout-tabs-columns": String(R) },
					children: N.map((t, n) => {
						let r = G === String(n), i = Y(String(n)), { body: a } = Q[n];
						return /* @__PURE__ */ S("div", {
							className: e(d.RiverBreakoutTabs__item, r && d["RiverBreakoutTabs__item--selected"], t.className),
							children: /* @__PURE__ */ C("button", {
								type: "button",
								...i,
								className: d.RiverBreakoutTabs__tab,
								children: [
									t.icon && m(t.icon, { className: t.icon.props.className }),
									t.heading && m(t.heading, { className: e(t.heading.props.className, d.RiverBreakoutTabs__tabHeading) }),
									a.length > 0 && /* @__PURE__ */ S("div", {
										className: d.RiverBreakoutTabs__wideTabListContent,
										children: a
									})
								]
							})
						}, n);
					})
				}),
				/* @__PURE__ */ C("div", {
					className: d.RiverBreakoutTabs__sharedVisuals,
					children: [$, N.map((t, n) => /* @__PURE__ */ S("div", {
						...J(String(n)),
						tabIndex: -1,
						className: d.RiverBreakoutTabs__sharedVisualPanel,
						children: m(t.visual, { className: e(t.visual?.props.className, d.RiverBreakoutTabs__sharedVisual) })
					}, n))]
				}),
				Q.some((e) => e.action) && /* @__PURE__ */ S("div", {
					className: d.RiverBreakoutTabs__wideTabListActions,
					style: { "--river-breakout-tabs-columns": String(R) },
					children: N.map((t, n) => {
						let { action: r } = Q[n];
						return /* @__PURE__ */ S("div", {
							className: d.RiverBreakoutTabs__wideTabListActionItem,
							children: r && m(r, { className: e(r.props.className, d.RiverBreakoutTabs__wideTabListAction) })
						}, n);
					})
				})
			]
		}) : /* @__PURE__ */ C("div", {
			className: d.RiverBreakoutTabs__accordion,
			children: [X >= 0 && N[X]?.visual && /* @__PURE__ */ C("div", {
				className: d.RiverBreakoutTabs__accordionSharedVisuals,
				children: [$, m(N[X].visual, { className: e(N[X].visual.props.className, d.RiverBreakoutTabs__accordionSharedVisual) })]
			}), N.map((t, n) => /* @__PURE__ */ C(f, {
				"data-index": n,
				className: e(d.RiverBreakoutTabs__accordionItem, n === X && d["RiverBreakoutTabs__item--selected"], t.className),
				onToggle: te,
				open: n === X,
				handleOpen: ee(n),
				children: [/* @__PURE__ */ S(f.Heading, {
					className: d.RiverBreakoutTabs__accordionHeading,
					children: /* @__PURE__ */ C("span", {
						className: d.RiverBreakoutTabs__accordionHeadingInner,
						children: [t.icon && m(t.icon, { className: e(t.icon.props.className, d.RiverBreakoutTabs__accordionIcon) }), /* @__PURE__ */ S("span", {
							className: d.RiverBreakoutTabs__accordionLabel,
							children: t.heading?.props.children
						})]
					})
				}), /* @__PURE__ */ S(f.Content, {
					className: d.RiverBreakoutTabs__accordionPanel,
					children: m(t.content, { className: e(t.content?.props.className, d.RiverBreakoutTabs__accordionContent) })
				})]
			}, n))]
		})]
	});
}), U = Object.assign(H, {
	A11yHeading: E,
	Content: k,
	Heading: O,
	Icon: D,
	Item: T,
	Visual: A
});
//#endregion
export { U as RiverBreakoutTabs };

//# sourceMappingURL=RiverBreakoutTabs.js.map