@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
196 lines (195 loc) • 6.99 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { AnimationProvider as t } from "../animation/AnimationProvider/AnimationProvider.js";
import { Animate as n } from "../animation/Animate/Animate.js";
import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
import { Stack as i } from "../Stack/Stack.js";
import { Text as a } from "../Text/Text.js";
import { ChevronLeftIcon as o, ChevronRightIcon as s } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { useTabs as c } from "../hooks/useTabs.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes-DCEDN6wM.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/base-T7ABwZVf.css';/* empty css */
/* empty css */
import l from "./Tabs.module.js";
import { Children as u, cloneElement as d, forwardRef as f, isValidElement as p, memo as m, useCallback as h, useEffect as g, useRef as _ } from "react";
import { jsx as v, jsxs as y } from "react/jsx-runtime";
//#region src/Tabs/Tabs.tsx
var b = {
root: "Tabs",
get tab() {
return `${this.root}-tab`;
},
get panel() {
return `${this.root}-panel`;
},
get indicators() {
return `${this.root}-indicators`;
}
}, x = {
controlsNext: "Next tab",
controlsPrev: "Previous tab"
}, S = f(({ align: t = "center", children: n, defaultActiveTab: r, onChange: f, variant: m = "default", className: S, "aria-label": T, "aria-labelledby": E, internalAccessibleLabels: D = x, ...O }, k) => {
let { activeTab: A, activateTab: j, getTabListProps: M, getTabProps: N, getTabPanelProps: P } = c({
defaultTab: r,
onTabActivate: f
}), F = _(null), I = _(null), L = _(null), R = u.toArray(n), z = R.filter((e) => p(e) && e.type === C).map((e, t) => {
let n = String(t), r = e.ref, i = N(n, r);
return d(e, {
...i,
id: e.props.id ?? i.id,
"aria-controls": e.props["aria-controls"] ?? i["aria-controls"],
value: n,
key: i.id,
isActive: A === n,
variant: m
});
}), B = R.filter((e) => p(e) && e.type === w).map((e, t) => {
let n = P(String(t));
return d(e, {
...n,
id: e.props.id ?? n.id,
key: String(t)
});
});
g(() => {
/* istanbul ignore next */
if (!F.current || !L.current) return;
let e = F.current.querySelector("[aria-selected=\"true\"]");
if (!A) return;
let t = () => {
let t = L.current, n = F.current;
/* istanbul ignore next */
if (!t || !n) return;
let r = window.getComputedStyle(n).getPropertyValue("--brand-Tabs-container-padding"), i = parseFloat(r) * 16, a = e.offsetLeft - i, o = e.offsetWidth;
t.style.setProperty("--brand-Tabs-slider-x", `${a}px`), t.style.setProperty("--brand-Tabs-slider-width", `${o}px`);
};
t();
let n = new ResizeObserver(t);
n.observe(F.current);
let r = F.current, i = r.clientWidth, a = window.getComputedStyle(r).getPropertyValue("--brand-Tabs-container-padding"), o = parseFloat(a) * 16, s = e.offsetLeft - o + e.offsetWidth / 2 - i / 2, c = r.scrollWidth - i, l = Math.max(0, Math.min(s, c));
return r.scrollTo({
left: l,
behavior: "smooth"
}), () => {
n.disconnect();
};
}, [A]), g(() => {
let e = F.current, t = I.current;
/* istanbul ignore next */
if (!e || !t) return;
/* istanbul ignore next */
let n = () => {
let { scrollLeft: n, scrollWidth: r, clientWidth: i } = e, a = r > i, o = a && n < r - i - 1;
t.style.setProperty("--scroll-offset", `${n}px`), t.style.setProperty("--has-overflow", a ? "1" : "0"), t.style.setProperty("--can-scroll-right", o ? "1" : "0");
};
n();
let r = new ResizeObserver(n);
return r.observe(e), e.addEventListener("scroll", n), () => {
e.removeEventListener("scroll", n), r.disconnect();
};
}, [z]);
let V = M(typeof T == "string" ? { label: T } : { labelledBy: E }), H = h(() => {
A && A !== String(z.length - 1) && j(String(Number(A) + 1));
}, [
A,
j,
z
]), U = h(() => {
A && A !== "0" && j(String(Number(A) - 1));
}, [A, j]), W = z.length >= 3, G = String(z.length - 1) === A;
return /* @__PURE__ */ y("div", {
className: e(l["Tabs-container"], l[`Tabs-container--align-${t}`], G && l["Tabs-container--lastTabIsActive"], S),
ref: k,
"data-testid": b.root,
...O,
children: [
z.length >= 3 && /* @__PURE__ */ v("div", {
className: l.Tabs__controls,
"data-testid": b.indicators,
children: /* @__PURE__ */ y(i, {
direction: "horizontal",
padding: "none",
justifyContent: "space-between",
children: [
/* @__PURE__ */ v("button", {
onClick: U,
className: l.Tabs__control,
"aria-label": D.controlsPrev,
children: /* @__PURE__ */ v(a, {
size: "100",
children: /* @__PURE__ */ v(o, {
size: 16,
className: l["Tabs__control-icon"]
})
})
}),
/* @__PURE__ */ v(i, {
direction: "horizontal",
gap: 4,
padding: "none",
justifyContent: "space-between",
alignItems: "center",
children: z.map((t, n) => /* @__PURE__ */ v("div", { className: e(l.Tabs__indicator, A && Number(A) === n && l["Tabs__indicator--active"]) }, n))
}),
/* @__PURE__ */ v("button", {
onClick: H,
className: l.Tabs__control,
"aria-label": D.controlsNext,
children: /* @__PURE__ */ v(a, {
size: "100",
children: /* @__PURE__ */ v(s, {
size: 16,
className: l["Tabs__control-icon"]
})
})
})
]
})
}),
/* @__PURE__ */ v("div", {
ref: I,
className: e(l.Tablist__wrapper, l[`Tablist__wrapper--${m}`], G && l["Tablist__wrapper--lastTabIsActive"]),
children: /* @__PURE__ */ y("div", {
ref: F,
...V,
className: e(l.Tabs, l[`Tabs--${m}`], W && l["Tabs--hasMoreThanTwoTabs"]),
children: [/* @__PURE__ */ v("div", {
ref: L,
className: l.Tabs__slider,
"aria-hidden": !0
}), z]
})
}),
B.length > 0 && /* @__PURE__ */ v("div", {
className: l.Tabs__panelContainer,
children: B
})
]
});
}), C = f(({ children: t, className: n, isActive: i, variant: a, ...o }, s) => /* @__PURE__ */ v("button", {
ref: r(s),
className: e(l.Tabs__item, i && l["Tabs__item--active"], a && l[`Tabs__item--${a}`], n),
"data-testid": b.tab,
...o,
children: t
})), w = m(function({ children: r, animation: i = !1, className: a, hidden: o, ...s }) {
let c = i ? /* @__PURE__ */ v(t, {
autoStaggerChildren: !1,
children: /* @__PURE__ */ v(n, {
animate: i,
children: r
})
}) : r;
return /* @__PURE__ */ v("div", {
className: e(l.Tabs__panel, a),
"data-testid": b.panel,
hidden: o,
...s,
children: c
});
}), T = Object.assign(S, {
Item: C,
Panel: w,
testIds: b
});
//#endregion
export { T as Tabs };
//# sourceMappingURL=Tabs.js.map