@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
153 lines (152 loc) • 5.83 kB
JavaScript
"use client";
import { jsx as d } from "react/jsx-runtime";
import { c as f } from "./index.DL9mof6u.js";
import { useCallback as V, useEffect as W, useRef as S } from "react";
import { g as i, r as j } from "./helpers.CexwVao7.js";
import { i as q } from "./is-animation-disabled.B-V_68K-.js";
import { t as H } from "./translate.nuU7uChI.js";
import { u as L } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import "./index.D-sRdssb.js";
import { g as w } from "./AriaLiveRegions.utils.CybNIBSa.js";
import { DSScroller as F } from "../scroller.IpfbFV8B.js";
import { StepperStep as G } from "../step.D5p7qppy.js";
import '../assets/Stepper.tXJl15yL.css';const ge = ["prev", "next"], N = 48, J = "ds-stepper_root_1d1si_1", K = "ds-stepper_root--vertical_1d1si_12", Q = "ds-stepper_scroller--centered_1d1si_17", U = "ds-stepper_scroller-button_1d1si_21", X = "ds-stepper_list_1d1si_26", Y = "ds-stepper_list--center_1d1si_35", Z = "ds-stepper_list--vertical_1d1si_38", a = {
root: J,
rootVertical: K,
scrollerCentered: Q,
scrollerButton: U,
list: X,
listCenter: Y,
listVertical: Z
}, Te = ["left", "center"], _e = ["horizontal", "vertical"], ee = ({
aria: t,
steps: n
}) => {
if (!t || typeof t != "object" || Object.keys(t).length === 0 || !t["aria-label"] && !t["aria-labelledby"] || t["aria-label"]?.trim() === "" && t["aria-labelledby"]?.trim() === "")
throw new Error(i("DSStepper", 'A valid "aria-label" or "aria-labelledby" property is required. Ensure the "aria" prop is a non-empty object and includes either "aria-label" or "aria-labelledby" with a non-empty string value.'));
if (!Array.isArray(n))
throw new Error(i("DSStepper", j("steps", "DSStepper")));
if (n.length < 2)
throw new Error(i("DSStepper", "The steps array must contain at least two steps."));
n.forEach((e, o) => {
if (!e.label || e.label.trim() === "")
throw new Error(i("DSStepper", `The step at index ${o} is missing a non-empty label. Each step requires a valid label string.`));
if (e?.state === "current" && e?.disabled)
throw new Error(i("DSStepper", `The step at index ${o} has a current state but is disabled. Please remove the disabled property if this step is the current step.`));
});
}, te = () => {
w() || console.warn(i("DSStepper", "For accessible announcements place <DSAriaLiveRegions /> once close to <body>. Announcements will be skipped otherwise."));
}, re = {
current: "Current step",
completed: "completed",
step: "Step",
of: "of"
}, oe = {
current: "Aktueller Schritt",
completed: "abgeschlossen",
step: "Schritt",
of: "von"
}, se = {
en: re,
de: oe
}, ne = (t) => t.find((e) => e.state === "current") || t.findLast((e) => e.state) || t[0], I = (t) => t.findIndex((n) => n.state === "current"), le = (t, n) => !!t && t === "completed" && !n, Ee = ({
aria: t,
className: n,
steps: e,
orientation: o = "horizontal",
alignment: h = "left",
lang: x = "en",
translations: m,
onStepChange: A,
...y
}) => {
process.env.NODE_ENV !== "production" && (ee({
aria: t,
steps: e
}), te());
const p = H(m || se[x]), b = V(() => {
const s = w();
if (s) {
const r = ne(e);
s.innerText = `${p("current")}: ${e.indexOf(r) + 1} ${p("of")} ${e.length} - ${r.label}`, setTimeout(() => {
s.innerText = "";
}, 350);
}
}, [e, m, p]);
W(() => {
b();
}, [e, b]);
const P = (s, r) => {
const {
state: l,
disabled: c
} = e[s];
le(l, c) && (e[s].onClick?.(r), A(s));
}, O = f(a.root, {
[a.rootVertical]: o === "vertical"
}, n), B = f(a.list, {
[a.listVertical]: o === "vertical",
[a.listCenter]: o === "horizontal" && h === "center"
}), k = f({
[a.scrollerCentered]: o === "horizontal" && h === "center"
}), g = S([]), T = /* @__PURE__ */ d("ol", { className: B, children: e.map((s, r) => /* @__PURE__ */ d(G, { step: s, index: r, stepsCount: e.length, t: p, orientation: o, onStepClick: (l) => P(r, l), buttonRef: (l) => {
g.current[r] = l;
} }, r)) }), _ = S(null), E = S(!1);
L(() => {
if (o !== "horizontal")
return;
const s = [
"16px 'STIHL Contraface Digital Text Regular'",
// text-medium - label default
"14px 'STIHL Contraface Digital Text Bold'",
// text-small-bold - number
"16px 'STIHL Contraface Digital Text Bold'",
// text-medium-bold - current label
"14px 'STIHL Contraface Digital Text Regular'"
// utility-small - number/hint base (regular variant for hint)
];
Promise.all(s.map((r) => document.fonts.load(r))).then(() => {
E.current = !0, I(e) !== -1 && C("instant");
}).catch((r) => {
throw new Error(i("DSStepper", `The component requires the fonts to be loaded: ${r}`));
});
}, [o]);
const C = (s = "smooth") => {
if (o !== "horizontal")
return;
const r = I(e);
if (r === -1)
return;
const l = g.current[r], c = _.current;
if (!l || !c)
return;
const R = l.getBoundingClientRect(), v = c.getBoundingClientRect();
if (R.left - N >= v.left && R.right + N <= v.right)
return;
const M = l.offsetLeft, $ = l.offsetWidth, D = c.clientWidth;
let u = M - Math.max(0, (D - $) / 2);
const z = c.scrollWidth - D;
u = Math.min(Math.max(0, u), z), c.scrollTo({
left: u,
behavior: q() ? "instant" : s
});
};
return L(() => {
E.current && C("smooth");
}, [e, o]), /* @__PURE__ */ d("nav", { className: O, ...y, ...t, children: o === "horizontal" ? /* @__PURE__ */ d(F, { ref: _, className: a.scroller, scrollerClassName: k, scrollerButtonClassName: a.scrollerButton, children: T }) : T });
};
export {
Ee as D,
ge as S,
N as a,
Te as b,
_e as c,
te as d,
re as e,
oe as f,
se as g,
ne as h,
I as i,
le as j,
ee as v
};