@primer/react-brand/esm/river/RiverAccordion/RiverAccordion.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 { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
import { Text as r } from "../../Text/Text.js";
import { Heading as i } from "../../Heading/Heading.js";
import { TriangleDownIcon as a, TriangleUpIcon as o } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/river/river-DHn1_SEa.css';/* empty css                                                                                          */
import s from "./RiverAccordion.module.js";
import c from "../../component-helpers/shared.module.js";
import { Link as l } from "../../Link/Link.js";
import u, { createContext as d, forwardRef as f, useCallback as p, useContext as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
import { jsx as y, jsxs as b } from "react/jsx-runtime";
//#region src/river/RiverAccordion/RiverAccordion.tsx
var x = d(null), S = () => {
	let e = m(x);
	if (e === null) throw Error("useRiverAccordionContext must be used within a RiverAccordion component");
	return e;
}, C = d(null), w = () => {
	let e = m(C);
	if (e === null) throw Error("useRiverAccordionItemContext must be used within a RiverAccordion component");
	return e;
}, T = ["default", "gridline"], E = f(({ align: t = "start", variant: r = "default", children: i, className: a, ...o }, l) => {
	let d = n(l), [f, p] = v(0), m = g(() => u.Children.toArray(i).reduce((e, t) => {
		if (!M(t)) return e;
		let n = u.Children.toArray(t.props.children).find(F);
		return n && (e.items.push(t), e.visuals.push(n)), e;
	}, {
		items: [],
		visuals: []
	}), [i]), h = m.items.map((e, t) => u.cloneElement(e, {
		key: t,
		index: t
	})), _ = m.visuals.map((e, t) => u.cloneElement(e, {
		key: t,
		"aria-hidden": !0
	})), S = g(() => ({
		openIndex: f,
		setOpenIndex: p,
		variant: r
	}), [
		f,
		p,
		r
	]);
	return /* @__PURE__ */ y(x.Provider, {
		value: S,
		children: /* @__PURE__ */ b("div", {
			ref: d,
			className: e(s.RiverAccordion, s[`RiverAccordion__align-${t}`], s[`RiverAccordion--variant-${r}`], r === "gridline" && c.gridline, a),
			...o,
			children: [/* @__PURE__ */ y("div", {
				className: s.RiverAccordion__accordionContainer,
				children: h
			}), /* @__PURE__ */ y("div", {
				className: s.RiverAccordion__visualsContainer,
				children: /* @__PURE__ */ y("div", {
					className: s.RiverAccordion__visualsWrapper,
					children: _
				})
			})]
		})
	});
}), D = ({ className: n, index: r, children: i, ...a }) => {
	let { openIndex: o } = S(), c = t(), l = r === o, d = _(null);
	h(() => {
		d.current && d.current.toggleAttribute("inert", !l);
	}, [l]);
	let f = g(() => ({
		id: c,
		index: r,
		isOpen: l
	}), [
		c,
		r,
		l
	]), { heading: p, content: m, visual: v } = g(() => u.Children.toArray(i).reduce((e, t) => (P(t) && (e.heading = t), N(t) && (e.content = t), F(t) && (e.visual = t), e), {
		heading: null,
		content: null,
		visual: null
	}), [i]);
	return !p || !m || !v ? null : /* @__PURE__ */ y(C.Provider, {
		value: f,
		children: /* @__PURE__ */ b("div", {
			className: e(s.RiverAccordion__item, l && s["RiverAccordion__item--open"], n),
			...a,
			children: [p, /* @__PURE__ */ b("div", {
				ref: d,
				className: s.RiverAccordion__panel,
				id: c,
				"aria-hidden": !l,
				children: [m, v]
			})]
		})
	});
}, O = ({ as: t = "h3", children: n, className: r, size: c = "6", ...l }) => {
	let { setOpenIndex: u } = S(), { id: d, index: f, isOpen: m } = w(), h = p(() => {
		m || u(f);
	}, [
		f,
		m,
		u
	]);
	return /* @__PURE__ */ y(i, {
		size: c,
		as: t,
		className: e(s.RiverAccordion__heading, r),
		...l,
		children: /* @__PURE__ */ b("button", {
			type: "button",
			className: s.RiverAccordion__trigger,
			onClick: h,
			"aria-disabled": m,
			"aria-controls": d,
			"aria-expanded": m,
			children: [n, /* @__PURE__ */ y("span", {
				"aria-hidden": "true",
				className: s.RiverAccordion__icon,
				children: y(m ? o : a, { size: 24 })
			})]
		})
	});
}, k = ({ className: t, children: n, ...i }) => {
	let a = g(() => {
		let e = j(l), t = j(r);
		return u.Children.toArray(n).map((n) => t(n) ? u.cloneElement(n, {
			as: n.props.as ?? "p",
			variant: n.props.variant ?? "muted",
			size: n.props.size ?? "300"
		}) : e(n) ? u.cloneElement(n, { variant: n.props.variant ?? "accent" }) : n);
	}, [n]);
	return /* @__PURE__ */ y("div", {
		className: e(s.RiverAccordion__content, t),
		...i,
		children: a
	});
}, A = ({ className: t, ...n }) => {
	let { variant: r } = S();
	return /* @__PURE__ */ y("div", {
		className: e(s.RiverAccordion__visual, r === "gridline" && s["RiverAccordion__visual--has-background"], t),
		...n
	});
}, j = (e) => (t) => u.isValidElement(t) && t.type === e, M = j(D), N = j(k), P = j(O), F = j(A), I = Object.assign(E, {
	Content: k,
	Heading: O,
	Item: D,
	Visual: A
});
//#endregion
export { I as RiverAccordion, T as RiverAccordionVariants };

//# sourceMappingURL=RiverAccordion.js.map