@primer/react-brand/esm/NavList/NavList.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 { TriangleDownIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/nav-list/colors-with-modes-CGyt2t8f.css';/* empty css                                                                                                      */
import r from "./NavList.module.js";
import i, { Children as a, createContext as o, forwardRef as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
import { jsx as h, jsxs as g } from "react/jsx-runtime";
//#region src/NavList/NavList.tsx
var _ = {
	root: "NavList",
	get list() {
		return `${this.root}-list`;
	},
	get item() {
		return `${this.root}-item`;
	},
	get link() {
		return `${this.root}-link`;
	},
	get leadingVisual() {
		return `${this.root}-leading-visual`;
	},
	get trailingVisual() {
		return `${this.root}-trailing-visual`;
	},
	get subNav() {
		return `${this.root}-sub-nav`;
	},
	get group() {
		return `${this.root}-group`;
	},
	get groupTitle() {
		return `${this.root}-group-title`;
	},
	get groupList() {
		return `${this.root}-group-list`;
	},
	get toggle() {
		return `${this.root}-toggle`;
	}
}, v = 5, y = o(1), b = o({
	expanded: !0,
	level: 2
}), x = s(({ children: t, className: n, "aria-label": i, "aria-labelledby": o, "data-testid": s, ...c }, l) => {
	let u = f(() => a.toArray(t), [t]), d = f(() => u.some(j), [u]), p = f(() => u.some(M), [u]), m = d ? 1 : 2, g = !d && !p;
	return /* @__PURE__ */ h("nav", {
		ref: l,
		className: e(r.NavList, n),
		"aria-label": i,
		"aria-labelledby": o,
		"data-testid": s || _.root,
		...c,
		children: /* @__PURE__ */ h(y.Provider, {
			value: m,
			children: /* @__PURE__ */ h("ul", {
				className: e(r.NavList__list, g && r["NavList__list--flat"]),
				"data-testid": _.list,
				children: t
			})
		})
	});
}), S = s(({ as: o, children: s, className: c, defaultExpanded: p = !1, disabled: x = !1, expanded: S, leadingVisual: C, onClick: w, onExpandedChange: T, trailingVisual: D, "aria-current": O, "data-testid": k, ...j }, M) => {
	let te = o || "a", I = u(y), ne = t(), re = t(), L = f(() => a.toArray(s), [s]), R = f(() => L.filter(E), [L]), z = f(() => L.find(E), [L]), B = f(() => L.filter(N), [L]), V = f(() => z ? L.filter((e) => e !== z) : L, [L, z]), H = V.length > 0, U = !!z, W = I < v, ie = !U, G = z?.props.id ?? ne, K = f(() => ee(z?.props.children), [z?.props.children]), q = S !== void 0, [ae, J] = m(p || K), Y = !!(q ? S : ae), { href: X, id: oe, ...se } = j, Z = oe ?? re, Q = w, ce = f(() => {
		if (B.length > 0) return "NavList.Item: NavList.Group is not supported as a child. Use NavList.SubNav for nested disclosure. NavList.Item will not be rendered.";
		if (U && !W) return "NavList.Item: NavList supports up to 5 levels. Level 5 items cannot contain NavList.SubNav. NavList.Item will not be rendered.";
		if (R.length > 1) return "NavList.Item: Only one NavList.SubNav child is supported. NavList.Item will not be rendered.";
		if (U && !H) return "NavList.Item: A label is required when using NavList.SubNav. NavList.Item will not be rendered.";
		if (U && (X !== void 0 || o !== void 0)) return "NavList.Item: `href` and `as` are not supported when using NavList.SubNav because expandable items render as buttons. NavList.Item will not be rendered.";
	}, [
		o,
		W,
		H,
		U,
		X,
		B.length,
		R.length
	]);
	d(() => {
		K && !q && J(!0);
	}, [K, q]);
	let le = l((e) => {
		q || J(e), T?.(e);
	}, [q, T]), $ = l(() => {
		le(!Y);
	}, [Y, le]), ue = l((e) => {
		if (x) {
			e.preventDefault();
			return;
		}
		Q?.(e);
	}, [x, Q]), de = l((e) => {
		A(M, e);
	}, [M]), fe = l((e) => {
		if (x) {
			e.preventDefault();
			return;
		}
		Q?.(e), e.defaultPrevented || $();
	}, [
		x,
		Q,
		$
	]);
	if (ce) return F(ce), null;
	let pe = /* @__PURE__ */ g("span", {
		className: r.NavList__labelArea,
		children: [
			P(C, r.NavList__leadingVisual, _.leadingVisual),
			/* @__PURE__ */ h("span", {
				className: r.NavList__label,
				children: V
			}),
			P(D, r.NavList__trailingVisual, _.trailingVisual)
		]
	});
	return /* @__PURE__ */ g("li", {
		className: e(r.NavList__item, r[`NavList__item--level-${I}`], ie && r["NavList__item--leaf"], U && Y && r["NavList__item--expanded"], K && r["NavList__item--has-current-descendant"]),
		"data-testid": k || _.item,
		children: [/* @__PURE__ */ h("div", {
			className: r.NavList__itemContent,
			children: U && W ? /* @__PURE__ */ g("button", {
				ref: de,
				id: Z,
				type: "button",
				className: e(r.NavList__link, r.NavList__accordionButton, x && r["NavList__link--disabled"], c),
				"aria-expanded": Y ? "true" : "false",
				"aria-controls": G,
				"data-testid": _.toggle,
				...se,
				disabled: x,
				onClick: fe,
				children: [/* @__PURE__ */ h(n, {
					className: r.NavList__toggleIcon,
					"aria-hidden": "true"
				}), pe]
			}) : /* @__PURE__ */ h(te, {
				ref: M,
				className: e(r.NavList__link, x && r["NavList__link--disabled"], c),
				"aria-current": O,
				"aria-disabled": x || void 0,
				"data-testid": _.link,
				onClick: ue,
				...j,
				children: pe
			})
		}), z ? /* @__PURE__ */ h(b.Provider, {
			value: {
				expanded: Y,
				labelledBy: Z,
				level: I + 1
			},
			children: i.cloneElement(z, { id: G })
		}) : null]
	});
}), C = s(({ children: t, className: n, "aria-labelledby": i, "data-testid": a, ...o }, s) => {
	let { expanded: c, labelledBy: f, level: m } = u(b), g = p(null), v = l((e) => {
		e.style.setProperty("--brand-NavList-subNav-height", `${e.scrollHeight}px`);
	}, []), x = l(() => {
		let e = g.current;
		for (; e;) v(e), e = e.parentElement?.closest(`.${r.NavList__subNav}`) ?? null;
	}, [v]), S = l((e) => {
		g.current = e, A(s, e);
	}, [s]);
	return d(() => {
		x();
	}, [
		t,
		c,
		x
	]), d(() => {
		g.current?.toggleAttribute("inert", !c);
	}, [c]), d(() => {
		let e = g.current;
		if (!e || typeof ResizeObserver > "u") return;
		let t = new ResizeObserver(x);
		return t.observe(e), () => {
			t.disconnect();
		};
	}, [x]), /* @__PURE__ */ h("ul", {
		ref: S,
		className: e(r.NavList__subNav, c && r["NavList__subNav--expanded"], n),
		"aria-labelledby": i ?? f,
		...o,
		"aria-hidden": c ? void 0 : "true",
		"data-testid": a || _.subNav,
		children: /* @__PURE__ */ h(y.Provider, {
			value: m,
			children: t
		})
	});
}), w = s(({ title: n, children: o, className: s, "data-testid": l, ...u }, d) => {
	let p = t(), m = f(() => {
		let e = (t) => a.toArray(t).flatMap((t) => D(t) ? [t] : c(t) && t.type === i.Fragment ? e(t.props.children) : []);
		return e(o);
	}, [o]);
	return f(() => {
		let e = (t) => a.toArray(t).some((t) => D(t) ? !1 : c(t) && t.type === i.Fragment ? e(t.props.children) : !0);
		return e(o);
	}, [o]) && F("NavList.Group: Only NavList.Item children are supported. Invalid children will not be rendered. Use NavList.SubNav as a child of NavList.Item for nested disclosure."), /* @__PURE__ */ g("li", {
		ref: d,
		className: e(r.NavList__group, s),
		"data-testid": l || _.group,
		...u,
		children: [n ? /* @__PURE__ */ h("h3", {
			id: p,
			className: r.NavList__groupTitle,
			"data-testid": _.groupTitle,
			children: n
		}) : null, /* @__PURE__ */ h("ul", {
			className: r.NavList__groupList,
			"aria-labelledby": n ? p : void 0,
			"data-testid": _.groupList,
			children: /* @__PURE__ */ h(y.Provider, {
				value: 2,
				children: m
			})
		})]
	});
}), T = Object.assign(x, {
	Item: S,
	SubNav: C,
	Group: w,
	testIds: _
});
function E(e) {
	return c(e) && e.type === C;
}
function D(e) {
	return c(e) && e.type === S;
}
function O(e) {
	return c(e) && e.type === w;
}
function k(e) {
	return !!e && e !== "false";
}
function ee(e) {
	return a.toArray(e).some((e) => c(e) ? k(e.props["aria-current"]) ? !0 : ee(e.props.children) : !1);
}
function A(e, t) {
	if (e) {
		if (typeof e == "function") {
			e(t);
			return;
		}
		e.current = t;
	}
}
function j(e) {
	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(j) : a.toArray(e.props.children).some(E) : !1;
}
function M(e) {
	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(M) : O(e) : !1;
}
function N(e) {
	return c(e) ? e.type === i.Fragment ? a.toArray(e.props.children).some(N) : O(e) : !1;
}
function P(e, t, n) {
	if (!e) return null;
	let r = c(e) ? e : i.createElement(e);
	return c(r) ? /* @__PURE__ */ h("span", {
		className: t,
		"data-testid": n,
		children: i.cloneElement(r, {
			className: r.props.className,
			"aria-hidden": "true",
			focusable: "false"
		})
	}) : null;
}
function F(e) {
	(process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn(e);
}
//#endregion
export { T as NavList };

//# sourceMappingURL=NavList.js.map