@primer/react-brand/esm/Accordion/Accordion.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 { BiColorGradients as t, Colors as n } from "../constants.js";
import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
import { Heading as i } from "../Heading/Heading.js";
import { TriangleDownIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes-PcQKqJQI.css';/* empty css                                                                                                       */
import o from "./Accordion.module.js";
import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p } from "react";
import { jsx as m, jsxs as h } from "react/jsx-runtime";
//#region src/Accordion/Accordion.tsx
var g = s(null), _ = () => {
	let e = u(g);
	if (e === null) throw Error("Unable to find Accordion provider. Did you forget to wrap your component in an Accordion?");
	return e;
}, v = c(({ children: t, className: n, variant: i = "default", disableAnimation: a = !1, open: s, onClick: c, onToggle: u, onKeyDown: h, handleOpen: _, ...v }, y) => {
	let b = r(y), x = p(null), S = p(!1), C = f(() => ({ variant: i }), [i]), w = l((e) => {
		let t = e.querySelector(`:scope > .${o.Accordion__content}`), n = t?.querySelector(`.${o["Accordion__content-inner"]}`);
		if (!t || !n) return null;
		let r = parseFloat(getComputedStyle(t).getPropertyValue("--brand-Accordion-content-offset")), i = Math.max(0, n.scrollHeight - (Number.isNaN(r) ? 0 : r));
		return e.style.setProperty("--brand-Accordion-content-height", `${i}px`), t;
	}, []), T = l(() => {
		x.current &&= (clearTimeout(x.current), null);
	}, []), E = l((e) => {
		T();
		let t = typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
		if (t !== null && t.matches) {
			e.open = !1, S.current = !1, e.classList.remove(o["Accordion--closing"]);
			return;
		}
		let n = w(e);
		n && n.getBoundingClientRect(), S.current = !0, e.classList.add(o["Accordion--closing"]), x.current = setTimeout(() => {
			e.open = !1, S.current = !1, e.classList.remove(o["Accordion--closing"]), x.current = null;
		}, 300);
	}, [T, w]), D = l((e) => {
		let t = e;
		t.currentTarget.open && (T(), S.current = !1, t.currentTarget.classList.remove(o["Accordion--closing"]), w(t.currentTarget)), u?.(t), _?.(t.currentTarget.open);
	}, [
		T,
		u,
		_,
		w
	]), O = l((e) => {
		if (c?.(e), e.defaultPrevented || a) return;
		let t = e.currentTarget, n = e.target;
		!(n instanceof Element) || !t.open || n.closest("summary")?.parentElement === t && (e.preventDefault(), S.current || E(t));
	}, [
		E,
		a,
		c
	]), k = l((e) => {
		let t = e;
		h?.(t);
		let n = b.current;
		t.key === "Escape" && n?.open && (T(), n.open = !1, S.current = !1, n.classList.remove(o["Accordion--closing"]), n.querySelector("summary")?.focus());
	}, [
		T,
		h,
		b
	]);
	return d(() => {
		let e = b.current;
		if (e) {
			let t = e.querySelector(`.${o["Accordion__content-inner"]}`), n;
			return e.open && w(e), typeof ResizeObserver < "u" && t && (n = new ResizeObserver(() => {
				e.open && w(e);
			}), n.observe(t)), e.addEventListener("toggle", D), e.addEventListener("keydown", k), () => {
				T(), n?.disconnect(), e.removeEventListener("toggle", D), e.removeEventListener("keydown", k);
			};
		}
	}, [
		T,
		D,
		k,
		b,
		w
	]), /* @__PURE__ */ m(g.Provider, {
		value: C,
		children: /* @__PURE__ */ m("details", {
			className: e(o.Accordion, o[`Accordion--${i}`], a && o["Accordion--disableAnimation"], n),
			ref: b,
			open: s,
			...v,
			onClick: O,
			children: t
		})
	});
}), y = [...n, ...t], b = c(({ children: t, className: n, as: r = "h4", toggleColor: s, reversedToggles: c, weight: l = "normal", ...u }, d) => {
	let { variant: f } = _();
	return /* @__PURE__ */ h("summary", {
		className: e(o.Accordion__summary, c && o["Accordion__summary--reversed-toggles"], o[`Accordion__summary--${f}`], s && o[`Accordion__summary--toggleColor-${s}`], n),
		ref: d,
		...u,
		children: [/* @__PURE__ */ m("span", {
			"aria-hidden": "true",
			className: o["Accordion__summary-toggle"],
			children: /* @__PURE__ */ m(a, {
				className: o["Accordion__summary-toggleIcon"],
				size: 22
			})
		}), /* @__PURE__ */ m(i, {
			as: r,
			size: f === "emphasis" ? "6" : "subhead-large",
			weight: l,
			children: t
		})]
	});
}), x = ({ children: t, className: n, ...r }) => /* @__PURE__ */ m("section", {
	className: e(o.Accordion__content, n),
	...r,
	children: /* @__PURE__ */ m("div", {
		className: o["Accordion__content-inner"],
		children: t
	})
}), S = Object.assign(v, {
	Content: x,
	Heading: b
});
//#endregion
export { S as Accordion, x as AccordionContent, b as AccordionHeading, v as AccordionRoot, y as AccordionToggleColors };

//# sourceMappingURL=Accordion.js.map