@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
146 lines (145 loc) • 5.56 kB
JavaScript
"use client";
import { jsx as f } from "react/jsx-runtime";
import { c as h } from "./index.DQOqod3i.js";
import { useCallback as I, useEffect as j, useRef as d } from "react";
import { f as q } from "./AriaLiveRegions.utils.xoETe2Ps.js";
import { DSScroller as H } from "../scroller.CgWp2WXG.js";
import { StepperStep as G } from "../step.DCQ6CawJ.js";
import { g as i, r as F } from "./helpers.CexwVao7.js";
import { t as J } from "./translate.DSb-TdWR.js";
import { u as L } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { i as K } from "./is-animation-disabled.B-V_68K-.js";
import '../assets/Stepper.BCpjMiOX.css';const bt = ["prev", "next"], x = 48, Q = "ds-stepper_root_1vtkh_1", U = "ds-stepper_root--vertical_1vtkh_12", X = "ds-stepper_scroller--centered_1vtkh_17", Y = "ds-stepper_scroller-button_1vtkh_21", Z = "ds-stepper_list_1vtkh_26", tt = "ds-stepper_list--center_1vtkh_35", et = "ds-stepper_list--vertical_1vtkh_38", a = {
root: Q,
rootVertical: U,
scrollerCentered: X,
scrollerButton: Y,
list: Z,
listCenter: tt,
listVertical: et
}, _t = ["left", "center"], Et = ["horizontal", "vertical"], rt = ({
aria: e,
steps: n
}) => {
if (!e || typeof e != "object" || Object.keys(e).length === 0 || !e["aria-label"] && !e["aria-labelledby"] || e["aria-label"]?.trim() === "" && e["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", F("steps", "DSStepper")));
if (n.length < 2)
throw new Error(i("DSStepper", "The steps array must contain at least two steps."));
n.forEach((t, s) => {
if (!t.label || t.label.trim() === "")
throw new Error(i("DSStepper", `The step at index ${s} is missing a non-empty label. Each step requires a valid label string.`));
if (t?.state === "current" && t?.disabled)
throw new Error(i("DSStepper", `The step at index ${s} has a current state but is disabled. Please remove the disabled property if this step is the current step.`));
});
}, ot = {
current: "Current step",
completed: "completed",
step: "Step",
of: "of"
}, st = {
current: "Aktueller Schritt",
completed: "abgeschlossen",
step: "Schritt",
of: "von"
}, w = {
en: ot,
de: st
}, nt = (e) => e.find((t) => t.state === "current") || e.findLast((t) => t.state) || e[0], y = (e) => e.findIndex((n) => n.state === "current"), lt = (e, n) => !!e && e === "completed" && !n, Tt = ({
aria: e,
className: n,
steps: t,
orientation: s = "horizontal",
alignment: S = "left",
lang: m = "en",
translations: A,
onStepChange: k,
...P
}) => {
process.env.NODE_ENV !== "production" && rt({
aria: e,
steps: t
});
const p = J(A || w[m] || w.en, m), b = I((o) => {
q(o, "DSStepper");
}, []), _ = I(() => {
const o = nt(t), r = `${p("current")}: ${t.indexOf(o) + 1} ${p("of")} ${t.length} - ${o.label}`;
b(r);
}, [t, p, b]);
j(() => {
_();
}, [t, _]);
const O = (o, r) => {
const {
state: l,
disabled: c
} = t[o];
lt(l, c) && (t[o].onClick?.(r), k(o));
}, M = h(a.root, {
[a.rootVertical]: s === "vertical"
}, n), B = h(a.list, {
[a.listVertical]: s === "vertical",
[a.listCenter]: s === "horizontal" && S === "center"
}), $ = h({
[a.scrollerCentered]: s === "horizontal" && S === "center"
}), E = d([]), T = /* @__PURE__ */ f("ol", { className: B, children: t.map((o, r) => /* @__PURE__ */ f(G, { step: o, index: r, stepsCount: t.length, t: p, orientation: s, onStepClick: (l) => O(r, l), buttonRef: (l) => {
E.current[r] = l;
} }, r)) }), g = d(null), C = d(!1);
L(() => {
if (s !== "horizontal")
return;
const o = [
"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(o.map((r) => document.fonts.load(r))).then(() => {
C.current = !0, y(t) !== -1 && v("instant");
}).catch((r) => {
throw new Error(i("DSStepper", `The component requires the fonts to be loaded: ${r}`));
});
}, [s]);
const v = (o = "smooth") => {
if (s !== "horizontal")
return;
const r = y(t);
if (r === -1)
return;
const l = E.current[r], c = g.current;
if (!l || !c)
return;
const R = l.getBoundingClientRect(), D = c.getBoundingClientRect();
if (R.left - x >= D.left && R.right + x <= D.right)
return;
const z = l.offsetLeft, V = l.offsetWidth, N = c.clientWidth;
let u = z - Math.max(0, (N - V) / 2);
const W = c.scrollWidth - N;
u = Math.min(Math.max(0, u), W), c.scrollTo({
left: u,
behavior: K() ? "instant" : o
});
};
return L(() => {
C.current && v("smooth");
}, [t, s]), /* @__PURE__ */ f("nav", { className: M, ...P, ...e, children: s === "horizontal" ? /* @__PURE__ */ f(H, { ref: g, className: a.scroller, scrollerClassName: $, scrollerButtonClassName: a.scrollerButton, children: T }) : T });
};
export {
Tt as D,
bt as S,
w as a,
st as b,
ot as c,
x as d,
_t as e,
Et as f,
nt as g,
y as h,
lt as i,
rt as v
};