@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
223 lines (222 loc) • 7.39 kB
JavaScript
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 { ChevronDownIcon as r, ChevronUpIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { Button as a } from "../Button/Button.js";
import { useWindowSize as o } from "../hooks/useWindowSize.js";
import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
import c from "./AnchorNav.module.js";
import { useExpandedMenu as l } from "./useExpandedMenu.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes-98imfMkq.css';/* empty css */
import u, { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
import { jsx as g, jsxs as _ } from "react/jsx-runtime";
//#region src/AnchorNav/AnchorNav.tsx
var v = {
root: "AnchorNav",
get menuButton() {
return `${this.root}-menu-button`;
},
get menuLinks() {
return `${this.root}-menu-links`;
},
get action() {
return `${this.root}-action`;
},
get secondaryAction() {
return `${this.root}-secondary-action`;
},
get navSpacer() {
return `${this.root}-nav-spacer`;
}
};
function y({ children: a, enableDefaultBgColor: y = !1, hideUntilSticky: C = !1, ...w }) {
let [T, E] = h(!1), [D, ee] = h(!1), [O, k] = h(), [A, j] = h(), [M, N] = h(), [P, F] = h(!1), [I, L] = h(0), R = m(null), z = m(null), B = m(null), V = m(null), { isLarge: H } = o(), U = t(), W = d(() => E(!1), [E]), G = d(() => E(!T), [T]), K = p(() => u.Children.toArray(a).filter((e) => u.isValidElement(e) && typeof e.type != "string"), [a]);
f(() => {
M === void 0 && A && N(A.boundingClientRect.y + window.scrollY);
}, [M, A]);
let q = ([e]) => {
j(e);
};
s(W), l(T, B, V, !H, W), f(() => {
if (R.current) {
let e = R.current.offsetHeight;
L(e);
}
}, [H]), f(() => {
ee(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
}, []), f(() => {
let e = () => {
M && F(window.pageYOffset > M);
};
return window.addEventListener("scroll", e), () => {
window.removeEventListener("scroll", e);
};
}, [M]), f(() => {
let e = C ? R.current : z.current;
if (!window.IntersectionObserver || !e) return;
let t = new IntersectionObserver(q, {
threshold: 0,
root: null,
rootMargin: "0px 0px -100%"
});
return t.observe(e), () => t.disconnect();
}, [C]);
let J = d((e) => {
e?.preventDefault(), G();
}, [G]), Y = d((e) => {
k(e);
}, [k]), X = K.filter((e) => u.isValidElement(e) && e.type === b).length, Z = K.map((e, t) => {
if (u.isValidElement(e) && e.type === b) {
let n = {
href: e.props.href,
toggleMenuCallback: G,
prefersReducedMotion: D,
updateCurrentActiveNav: Y,
alignment: X < 4 ? "start" : "center"
};
return u.cloneElement(e, {
isActive: t === 0,
...n
});
}
return null;
}).filter(Boolean).slice(0, 5), Q = K.reduce((e, t) => (u.isValidElement(t) && t.type === x && e.push(u.cloneElement(t)), e), []), $ = K.reduce((e, t) => (u.isValidElement(t) && t.type === S && e.push(u.cloneElement(t)), e), []), te = Q.some((e) => e.props.size && e.props.size !== "small") || $.some((e) => e.props.size && e.props.size !== "small");
f(() => {
!O && Z.length > 0 && k(Z[0]?.props.children);
}, [O, Z]);
let ne = Q.length > 0 && $.length > 0;
return /* @__PURE__ */ _("div", {
ref: R,
children: [/* @__PURE__ */ _("nav", {
ref: z,
"aria-label": "Anchored navigation",
"data-sticky": P.toString(),
className: e(c.AnchorNav, C && c["AnchorNav--hide-until-sticky"], P && c["AnchorNav--stuck"], T && c["AnchorNav--expanded"], y && c["AnchorNav--with-default-background-color"]),
...w,
children: [/* @__PURE__ */ _("div", {
ref: V,
className: e(c["AnchorNav-inner-container"], T && c["AnchorNav-inner-container--expanded"]),
children: [
/* @__PURE__ */ _("button", {
onClick: J,
className: e(c["AnchorNav-menu-button"]),
"aria-expanded": T,
"aria-controls": U,
"data-testid": v.menuButton,
children: [
g(T ? i : r, {
size: 16,
className: c["AnchorNav-menu-button-arrow"],
fill: "currentcolor"
}),
/* @__PURE__ */ g("span", {
className: "visually-hidden",
children: "Anchor navigation menu. Currently selected: "
}),
/* @__PURE__ */ g(n, {
as: "span",
className: e(c["AnchorNav-link-label"]),
children: O
})
]
}),
/* @__PURE__ */ g("div", {
id: U,
"data-testid": v.menuLinks,
className: c["AnchorNav-link-container"],
ref: B,
children: Z
}),
/* @__PURE__ */ _("span", {
"data-forward-focus": "true",
className: e(c.AnchorNav__actionsContainer, te && c["AnchorNav__actionsContainer--no-offset"], ne && c["AnchorNav__actionsContainer--multiple"]),
children: [Q.length && $.length && u.isValidElement(Q[0]) ? u.cloneElement(Q[0], { variant: "primary" }) : Q, $]
})
]
}), /* @__PURE__ */ g("span", {
className: e(T && c["AnchorNav-overlay--expanded"]),
onClick: W,
"aria-hidden": !0
})]
}), P && /* @__PURE__ */ g("div", {
style: { height: I },
"aria-hidden": "true",
"data-testid": v.navSpacer
})]
});
}
function b({ alignment: t = "start", children: r, href: i, isActive: a, toggleMenuCallback: s, prefersReducedMotion: l, intersectionOptions: u = { rootMargin: "middle" }, updateCurrentActiveNav: p, ...m }) {
let { isLarge: _ } = o(), [v, y] = h(), b = /^#/.test(i), x = !!v?.isIntersecting, S = ([e]) => {
y(e);
};
f(() => {
let e = document.querySelector(b ? i : `#${i}`);
if (!window.IntersectionObserver || !e) return;
let t = u.rootMargin === "start" ? "0px" : "-50% 0% -50% 0%", n = {
threshold: u.rootMargin === "start" ? .4 : 0,
root: null,
rootMargin: t
}, r = new IntersectionObserver(S, n);
return r.observe(e), () => r.disconnect();
}, [
i,
u.rootMargin,
b
]), f(() => {
x && p && typeof r == "string" && p(r);
}, [
x,
r,
p
]);
let C = d(() => {
s && !_ && s();
}, [_, s]);
return /* @__PURE__ */ g("a", {
className: e(c["AnchorNav-link"], c[`AnchorNav-link--${t}`], x && c["AnchorNav-link--is-active"]),
href: b ? i : `#${i}`,
"aria-current": x && "true",
"data-first": a,
"data-active": x ? "true" : "false",
onClick: C,
...m,
children: /* @__PURE__ */ g(n, {
as: "span",
className: e(c["AnchorNav-link-label"], x && c["AnchorNav-link-label--is-active"]),
children: r
})
});
}
function x({ children: t, href: n, variant: r = "secondary", size: i = "small", ...o }) {
return /* @__PURE__ */ g(a, {
as: "a",
variant: r,
className: e(c["AnchorNav-action"]),
href: n,
"data-testid": v.action,
size: i,
...o,
children: t
});
}
function S({ children: t, href: n, variant: r = "secondary", size: i = "small", ...o }) {
return /* @__PURE__ */ g(a, {
as: "a",
variant: r,
className: e(c["AnchorNav-action"]),
href: n,
"data-testid": v.secondaryAction,
size: i,
...o,
children: t
});
}
var C = Object.assign(y, {
Link: b,
Action: x,
SecondaryAction: S,
testIds: v
});
//#endregion
export { C as AnchorNav };
//# sourceMappingURL=AnchorNav.js.map