@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
257 lines (256 loc) • 9.67 kB
JavaScript
"use client";
import { jsx as v, jsxs as me } from "react/jsx-runtime";
import { d as ke } from "./chunks/index.CgTHIF3K.js";
import { c as re } from "./chunks/index.CEyLAtio.js";
import { useState as he, useRef as A, useEffect as xe } from "react";
import { g as b, i as be } from "./chunks/is-animation-disabled.CUl4N3LI.js";
import { h as Ce } from "./chunks/has-window.ut_-aShB.js";
import { g as Ee } from "./chunks/helpers.BbWkXTr3.js";
import { u as pe } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { D as ye } from "./chunks/Button.Cf1CKq8N.js";
import { D as We } from "./chunks/Icon.NSsVrYeq.js";
import { NumberIndicator as ze } from "./numberindicator.Ddf3ESi7.js";
import { g as Ae, a as we } from "./chunks/TabPane.utils.DG16Y2uD.js";
import { s as i, N as He } from "./chunks/NavigationTabList.DuT7gzhj.js";
const H = 48, Ye = (p) => {
const e = ke.c(62);
let g, T, d, M, I, o, X, P, $, m, c;
e[0] !== p ? ({
aria: g,
id: m,
selectedTabIndex: o,
setSelectedTabIndex: X,
tabs: c,
alignment: P,
className: T,
defaultSelectedTabIndex: $,
isNavigation: d,
onTabChange: M,
...I
} = p, e[0] = p, e[1] = g, e[2] = T, e[3] = d, e[4] = M, e[5] = I, e[6] = o, e[7] = X, e[8] = P, e[9] = $, e[10] = m, e[11] = c) : (g = e[1], T = e[2], d = e[3], M = e[4], I = e[5], o = e[6], X = e[7], P = e[8], $ = e[9], m = e[10], c = e[11]);
const j = P === void 0 ? "left" : P, Re = $ === void 0 ? 0 : $, [V, h] = he(Re), [Le, Se] = he(!1), [De, Ne] = he(!1);
let _;
e[12] === Symbol.for("react.memo_cache_sentinel") ? (_ = [], e[12] = _) : _ = e[12];
const y = A(_), w = A(null), a = A(null), f = A(null), O = A(!1), ve = A(o), se = () => {
Te(), Be();
};
let q;
e[13] === Symbol.for("react.memo_cache_sentinel") ? (q = [], e[13] = q) : q = e[13], pe(() => {
const s = new ResizeObserver(se);
return a.current && s.observe(a.current), () => {
s.disconnect();
};
}, q);
let F;
e[14] !== j || e[15] !== c ? (F = [c, j], e[14] = j, e[15] = c, e[16] = F) : F = e[16], pe(() => {
var n;
const s = ["18px 'STIHL Contraface Digital Text Regular'", "18px 'STIHL Contraface Digital Text Bold'", "14px 'STIHL Contraface Digital Text Demi'"];
Promise.all(s.map(Me)).then(() => {
ne(o), K("next", o, "instant"), Te(), O.current = !0;
}).catch(Pe);
const t = () => {
!O.current || !f.current || (r.matches ? f.current.style.transitionDuration = "0s" : f.current.style.transitionDuration = "");
}, r = window.matchMedia("(prefers-reduced-motion: reduce)");
return r.addEventListener("change", t), (n = a.current) == null || n.addEventListener("scroll", se), () => {
var l;
r.removeEventListener("change", t), (l = a.current) == null || l.removeEventListener("scroll", se);
};
}, F);
let G;
e[17] !== o ? (G = [o], e[17] = o, e[18] = G) : G = e[18], pe(() => {
if (O.current && (ne(o), d)) {
const s = ge(o);
h(o), K(s, o);
}
ve.current = o;
}, G);
let Q, J;
e[19] !== V ? (Q = () => {
var s;
O.current && ((s = y.current[V]) == null || s.focus());
}, J = [V], e[19] = V, e[20] = Q, e[21] = J) : (Q = e[20], J = e[21]), xe(Q, J);
const R = (s) => {
const t = ge(s);
X(s), h(s), K(t, s), M && M(s);
}, ge = (s) => {
const t = b(a.current), r = b(y.current[s]);
let n;
return r.left - H < t.left ? n = "prev" : r.right + H > t.right ? n = "next" : n = o < s ? "next" : "prev", n;
}, Te = () => {
if (a.current && w.current) {
const s = b(a.current), t = b(w.current);
Se(t.left < s.left), Ne(t.right > s.right + 4);
}
};
let U;
e[22] === Symbol.for("react.memo_cache_sentinel") ? (U = (s) => {
const t = s === void 0 ? 0 : s;
Ce && f.current && !be() && setTimeout(() => {
f.current && (f.current.style.transitionDuration = "250ms");
}, t);
}, e[22] = U) : U = e[22];
const Ie = U, Be = () => {
f.current && (f.current.style.transitionDuration = "0s", ne(ve.current), Ie());
}, ne = (s) => {
const t = f.current, r = b(y.current[s]), n = b(w.current), l = r.left - n.left;
t && (O.current ? (t.style.width = `${r.width}px`, t.style.transform = `translateX(${l}px)`) : (t.style.transitionDuration = "0s", t.style.transform = `translateX(${l}px)`, t.style.width = `${r.width}px`, Ie(50)));
}, oe = (s, t) => {
let r;
e: switch (s.key) {
case "ArrowLeft": {
r = (t > 0 ? t : c.length) - 1, h(r);
break e;
}
case "ArrowRight": {
r = (t + 1) % c.length, h(r);
break e;
}
case "Home": {
r = 0, h(r);
break e;
}
case "End": {
r = c.length - 1, h(r);
break e;
}
case "Enter":
case " ": {
R(t);
return;
}
default:
return;
}
if (r !== void 0) {
const n = r > t ? "next" : "prev";
setTimeout(() => K(n, r), 0);
}
s.preventDefault();
}, le = (s, t) => {
let r;
e: switch (s.key) {
case "Tab": {
if (s.shiftKey) {
r = t - 1 < 0 ? 0 : t - 1, h(r), t !== 0 && s.preventDefault();
break e;
} else
r = t + 1 > c.length - 1 ? t : t + 1, h(r), t !== c.length - 1 && s.preventDefault();
break e;
}
case "Enter": {
R(t);
return;
}
default:
return;
}
if (r !== void 0) {
const n = r > t ? "next" : "prev";
setTimeout(() => K(n, r), 0);
}
}, K = (s, t, r) => {
const n = r === void 0 ? "smooth" : r, l = y.current[t], W = a.current, z = b(l), ue = b(W);
let de;
if (!(!l || !W)) {
if (s === "prev") {
if (z.left - H > ue.left)
return;
de = l.offsetLeft - H;
} else {
if (z.right + H < ue.right)
return;
de = l.offsetLeft + l.offsetWidth - ue.width + H;
}
W.scrollTo({
left: de,
behavior: be() ? "instant" : n
});
}
};
let u;
if (e[23] === Symbol.for("react.memo_cache_sentinel")) {
u = (t) => {
var n;
const r = s(t);
(n = a.current) == null || n.scrollTo({
left: r,
behavior: be() ? "instant" : "smooth"
});
};
const s = (t) => {
if (!w.current || !a.current)
return 0;
const {
scrollLeft: r,
offsetWidth: n
} = a.current, l = Math.round(n * 0.2);
return t === "next" ? r + l : r - l;
};
e[23] = u;
} else
u = e[23];
const ce = j === "center";
let Y;
e[24] !== ce ? (Y = re(i.scroller, {
[i.scrollerCentered]: ce
}), e[24] = ce, e[25] = Y) : Y = e[25];
const Z = Y, ae = d ? "nav" : "div";
let L;
e[26] !== T ? (L = re(i.tabsWrapper, T), e[26] = T, e[27] = L) : L = e[27];
let S;
e[28] !== oe || e[29] !== le || e[30] !== d || e[31] !== Z || e[32] !== o || e[33] !== R || e[34] !== m || e[35] !== c ? (S = d ? /* @__PURE__ */ v(He, { tabs: c, tabRefs: y, scrollerRef: w, handleNavigationKeydown: le, scrollerClass: Z, selectedTabIndex: o, setSelectedTab: R }) : /* @__PURE__ */ v("div", { role: "tablist", className: Z, ref: w, children: c.map((s, t) => {
const {
id: r,
label: n,
iconName: l,
numberIndicatorValue: W
} = s;
return /* @__PURE__ */ me("button", { id: we(m, r), role: "tab", "aria-selected": o === t, "aria-controls": Ae(m, r, t), tabIndex: o === t ? 0 : -1, className: i.tab, ref: (z) => {
y.current[t] = z;
}, onClick: () => R(t), onKeyDown: (z) => oe(z, t), children: [
l && /* @__PURE__ */ v(We, { name: l, "aria-hidden": "true" }),
n,
W && /* @__PURE__ */ v(ze, { label: W })
] }, we(m, r));
}) }), e[28] = oe, e[29] = le, e[30] = d, e[31] = Z, e[32] = o, e[33] = R, e[34] = m, e[35] = c, e[36] = S) : S = e[36];
let ee;
e[37] === Symbol.for("react.memo_cache_sentinel") ? (ee = /* @__PURE__ */ v("span", { className: i.indicator, ref: f }), e[37] = ee) : ee = e[37];
let D;
e[38] !== ae || e[39] !== g || e[40] !== S ? (D = /* @__PURE__ */ me(ae, { className: i.scrollWrapper, ref: a, ...g, children: [
S,
ee
] }), e[38] = ae, e[39] = g, e[40] = S, e[41] = D) : D = e[41];
const ie = !Le;
let N;
e[42] !== ie ? (N = re(i.scrollButton, {
[i.scrollButtonHidden]: ie
}), e[42] = ie, e[43] = N) : N = e[43];
let B;
e[44] !== u ? (B = () => u("prev"), e[44] = u, e[45] = B) : B = e[45];
let k;
e[46] !== N || e[47] !== B ? (k = /* @__PURE__ */ v(ye, { variant: "filled", className: N, hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", onClick: B, children: "Left" }), e[46] = N, e[47] = B, e[48] = k) : k = e[48];
const fe = !De;
let x;
e[49] !== fe ? (x = re(i.scrollButton, i.scrollButtonRight, {
[i.scrollButtonHidden]: fe
}), e[49] = fe, e[50] = x) : x = e[50];
let C;
e[51] !== u ? (C = () => u("next"), e[51] = u, e[52] = C) : C = e[52];
let E;
e[53] !== x || e[54] !== C ? (E = /* @__PURE__ */ v(ye, { variant: "filled", className: x, hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", onClick: C, children: "Right" }), e[53] = x, e[54] = C, e[55] = E) : E = e[55];
let te;
return e[56] !== I || e[57] !== L || e[58] !== D || e[59] !== k || e[60] !== E ? (te = /* @__PURE__ */ me("div", { className: L, ...I, children: [
D,
k,
E
] }), e[56] = I, e[57] = L, e[58] = D, e[59] = k, e[60] = E, e[61] = te) : te = e[61], te;
};
function Me(p) {
return document.fonts.load(p);
}
function Pe(p) {
throw new Error(Ee("DSTabs", `The component requires the fonts to be loaded: ${p}`));
}
export {
Ye as TabList
};