@primer/react-brand/esm/FAQ/FAQGroup.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 { Grid as n } from "../Grid/Grid.js";
import { Stack as r } from "../Stack/Stack.js";
import { Box as i } from "../Box/Box.js";
import { Heading as a } from "../Heading/Heading.js";
import { Accordion as o } from "../Accordion/Accordion.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/faq-s_zeJJpd.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes-Dc8Ya1HV.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/base-BIIAD0RC.css';/* empty css                                                                                    */
/* empty css                                                                                                 */
/* empty css                                                                                   */
import { FAQ as s } from "./FAQ.js";
import c from "./FAQGroup.module.js";
import l from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
//#region src/FAQ/FAQGroup.tsx
function f({ children: t, className: n, as: r = "h3", ...i }) {
	return /* @__PURE__ */ u(a, {
		as: r,
		className: e(c.FAQGroup__heading, n),
		...i,
		children: t
	});
}
function p({ children: a, id: p, variant: m = "default", defaultSelectedIndex: g = 0, tabAttributes: _, ...v }) {
	let [y, b] = l.useState(g), [x, S] = l.useState(!1), C = t(p), w = l.useRef(null), T = (e) => (t) => {
		b(e), x || S(!0);
	}, E = (e) => (t) => {
		if (t.key === "ArrowUp") {
			t.preventDefault(), b((e - 1 + D.length) % D.length), x || S(!0);
			return;
		}
		if (t.key === "ArrowDown") {
			t.preventDefault(), b((e + 1) % D.length), x || S(!0);
			return;
		}
	};
	l.useEffect(() => {
		x && w.current?.focus();
	}, [x, y]);
	let D = l.Children.toArray(a).filter((e) => l.isValidElement(e) && e.type === s), O = l.Children.map(D, (e, t) => {
		if (e.props.children) {
			let n = l.Children.toArray(e.props.children).find((e) => l.isValidElement(e) && e.type === s.Heading), r = n?.props.children, { ref: i, ...a } = (n && _ ? _(r ?? null, t) : void 0) ?? {};
			return /* @__PURE__ */ u("button", {
				type: "button",
				role: "tab",
				className: c["FAQGroup__tablist-button"],
				id: `${C}-tab-${t}`,
				"aria-controls": `${C}-panel-${t}`,
				"aria-selected": y === t,
				onClick: T(t),
				onKeyDown: E(t),
				"data-testid": `FAQGroup-tab-${t + 1}`,
				tabIndex: y === t ? void 0 : -1,
				ref: (e) => {
					y === t ? w.current = e : w.current === e && (w.current = null), h(i, e);
				},
				...a,
				children: r
			}, t);
		}
		return null;
	}), k = l.Children.map(D, (t, n) => {
		if (t.props.children) {
			let r = l.Children.map(t.props.children, (e) => l.isValidElement(e) && e.type !== s.Heading ? e : null), i = l.Children.map(t.props.children, (e) => l.isValidElement(e) && e.type === s.Heading ? e.props.children : null);
			return /* @__PURE__ */ d("div", {
				role: "tabpanel",
				id: `${C}-panel-${n}`,
				"aria-labelledby": `${C}-tab-${n}`,
				hidden: y !== n,
				"data-testid": `FAQGroup-tab-panel-${n + 1}`,
				children: [i && /* @__PURE__ */ u(s.Subheading, {
					"data-testid": `FAQGroup-tab-panel-heading-${n + 1}`,
					className: e(c["FAQGroup__panel-subHeading"]),
					children: i
				}), r]
			}, n);
		}
	}), A = l.Children.map(D, (t, n) => {
		if (t.props.children) {
			let r = l.Children.toArray(t.props.children).find((e) => l.isValidElement(e) && e.type === s.Heading), i = l.Children.map(t.props.children, (t) => l.isValidElement(t) && t.type !== s.Heading ? l.cloneElement(t, { className: e(c["FAQGroup__nested-accordion-item"], t.props.className) }) : null);
			return !r || !i ? null : /* @__PURE__ */ d(o, {
				variant: "emphasis",
				className: e(m === "gridline" && c["FAQGroup__accordion--gridline"]),
				children: [/* @__PURE__ */ u(o.Heading, { ...r.props }), /* @__PURE__ */ u(o.Content, { children: i })]
			}, n);
		}
	}), j = l.Children.toArray(a).find((e) => l.isValidElement(e) && e.type === f);
	return /* @__PURE__ */ d(m === "gridline" ? i : l.Fragment, {
		...m === "gridline" ? { className: e(c["FAQGroup__gridline-wrapper"]) } : {},
		children: [/* @__PURE__ */ u("div", {
			className: e(c["FAQGroup__heading-wrapper"], c[`FAQGroup__heading-wrapper--${m}`]),
			children: /* @__PURE__ */ u(n, {
				enableGutters: !1,
				...v,
				children: /* @__PURE__ */ u(n.Column, { children: j && /* @__PURE__ */ u(n, { children: /* @__PURE__ */ u(n.Column, { children: j }) }) })
			})
		}), /* @__PURE__ */ u(n, {
			enableGutters: !1,
			...v,
			children: /* @__PURE__ */ d(n.Column, {
				span: 12,
				children: [/* @__PURE__ */ u("div", {
					className: e(c.FAQGroup__accordion),
					children: A
				}), /* @__PURE__ */ d(n, {
					className: e(c.FAQGroup),
					children: [/* @__PURE__ */ u(n.Column, {
						span: {
							medium: 5,
							large: 4
						},
						className: e(c.FAQGroup__tablist, m === "gridline" && c["FAQGroup__tablist--gridline"]),
						children: /* @__PURE__ */ u(r, {
							direction: "vertical",
							"aria-orientation": "vertical",
							padding: "none",
							role: "tablist",
							gap: "none",
							alignItems: "flex-start",
							children: O
						})
					}), /* @__PURE__ */ u(n.Column, {
						start: 6,
						span: 7,
						className: e(m === "gridline" && c["FAQGroup__content--gridline"]),
						children: k
					})]
				})]
			})
		})]
	});
}
var m = Object.assign(p, { Heading: f });
function h(e, t) {
	if (e) {
		if (typeof e == "function") {
			e(t);
			return;
		}
		e.current = t;
	}
}
//#endregion
export { m as FAQGroup };

//# sourceMappingURL=FAQGroup.js.map