@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
251 lines (250 loc) • 9.02 kB
JavaScript
"use client";
import { jsxs as y, jsx as a } from "react/jsx-runtime";
import { c as r } from "./index.DQOqod3i.js";
import { forwardRef as Ce, useState as h, useRef as E, useEffect as P } from "react";
import { u as K } from "./useBreakpoint.1txsny17.js";
import { Asterisk as Re } from "../asterisk.Dwtdwpkq.js";
import { D as Q } from "./Button.CCol--xy.js";
import { M as W, a as F } from "./Input.utils.Wycy2SzG.js";
import { D as Ee } from "./Popover.CxZZ_y1Z.js";
import { D as Pe } from "./SystemFeedback.DhWcYjnu.js";
import { g as x } from "./helpers.CexwVao7.js";
import { u as Y } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { h as We } from "./has-window.ut_-aShB.js";
import '../assets/InputNumber.BNpO9p7n.css';const Fe = "ds-input-number_input_urrt1_1", Ve = "ds-input-number_input--small_urrt1_9", $e = "ds-input-number_input--invalid_urrt1_127", He = "ds-input-number_input--dark_urrt1_145", Te = "ds-input-number_input--is-ready_urrt1_241", qe = "ds-input-number_input--has-affix_urrt1_311", Me = "ds-input-number_root_urrt1_342", Xe = "ds-input-number_hint_urrt1_342", je = "ds-input-number_label-wrapper_urrt1_342", Ue = "ds-input-number_wrapper_urrt1_346", Ge = "ds-input-number_affix_urrt1_352", Oe = "ds-input-number_affix--small_urrt1_373", ze = "ds-input-number_prefix_urrt1_386", Je = "ds-input-number_suffix_urrt1_392", Ke = "ds-input-number_affix--disabled_urrt1_398", Qe = "ds-input-number_affix--readonly_urrt1_414", Ye = "ds-input-number_affix--dark_urrt1_449", Ze = "ds-input-number_action-button_urrt1_511", et = "ds-input-number_label_urrt1_342", tt = "ds-input-number_label--disabled_urrt1_530", nt = "ds-input-number_label--dark_urrt1_534", at = "ds-input-number_label-wrapper--hidden_urrt1_550", rt = "ds-input-number_hint--dark_urrt1_577", st = "ds-input-number_feedback_urrt1_581", it = "ds-input-number_second-action-button_urrt1_594", ut = "ds-input-number_value-announcer_urrt1_598", e = {
input: Fe,
inputSmall: Ve,
inputInvalid: $e,
inputDark: He,
inputIsReady: Te,
inputHasAffix: qe,
root: Me,
hint: Xe,
labelWrapper: je,
wrapper: Ue,
affix: Ge,
affixSmall: Oe,
prefix: ze,
suffix: Je,
affixDisabled: Ke,
affixReadonly: Qe,
affixDark: Ye,
actionButton: Ze,
label: et,
labelDisabled: tt,
labelDark: nt,
labelWrapperHidden: at,
hintDark: rt,
feedback: st,
secondActionButton: it,
valueAnnouncer: ut
}, Z = (u) => u != null && u !== "", ot = ({
id: u,
label: l,
prefix: n,
suffix: c,
hideLabel: I,
popoverContent: N
}) => {
if (!u)
throw new Error(x("DSInputNumber", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputNumber component.'));
if (!l)
throw new Error(x("DSInputNumber", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputNumber component. If you don't want to display a label, set hideLabel={true}.`));
n && n.length > W && console.warn(x("DSInputNumber", `Prefix length must not exceed ${W} characters.`)), c && c.length > F && console.warn(x("DSInputNumber", `Suffix length must not exceed ${F} characters.`)), I && N && console.warn(x("DSInputNumber", "Using a popover when hideLabel is set to true is not supported."));
}, lt = Ce((u, l) => {
const {
id: n,
label: c,
announcementText: I = "Value changed to",
className: N,
disabled: o = !1,
decreaseAmountButtonProps: ee,
hint: k,
hideLabel: V = !1,
invalid: D = !1,
increaseAmountButtonProps: te,
prefix: d,
max: $ = 100,
min: H = 0,
popoverContent: A,
popoverInfoButtonProps: ne,
readonly: p = !1,
required: T = !1,
size: i = "medium",
step: ae = 1,
suffix: f,
systemFeedback: S,
theme: m = "light",
value: g,
onChange: q,
...re
} = u;
process.env.NODE_ENV !== "production" && ot({
id: n,
label: c,
prefix: d,
suffix: f,
hideLabel: K(V),
popoverContent: A
});
const {
label: se = "Decrease",
tooltip: ie,
...ue
} = ee || {}, {
label: oe = "Increase",
tooltip: le,
...ce
} = te || {}, [de, pe] = h(!1), [b, B] = h(g), [w, M] = h(""), [fe, me] = h(!1), [be, _e] = h({}), s = E(null), he = (t) => {
s.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
}, xe = d?.substring(0, W), L = E(null), De = f?.substring(0, F), C = E(null), X = K(V);
P(() => {
B(g);
}, [g]), P(() => {
if (w) {
const t = setTimeout(() => {
M("");
}, 3e3);
return () => clearTimeout(t);
}
}, [w]), P(() => {
const t = (_) => {
_.preventDefault();
};
return s.current?.addEventListener("wheel", t, {
// The { passive: false } option is used to indicate that the event listener wants to cancel the event, allowing preventDefault to work as expected.
passive: !1
}), () => {
s.current?.removeEventListener("wheel", t);
};
}, []), Y(() => {
const t = i === "medium" ? 16 : 8, _ = {};
if (L.current) {
const R = L.current.offsetWidth;
_.paddingInlineStart = t + R + "px";
}
if (C.current) {
const R = C.current.offsetWidth;
_.paddingInlineEnd = t + R + "px";
}
_e(_), pe(!0);
}, [d, f, i, fe]), Y(() => {
We && (async () => "fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), me(!0)))();
}, []);
const v = m === "dark", j = r(e.affix, {
[e.affixDark]: v,
[e.affixSmall]: i === "small",
[e.affixDisabled]: o,
[e.affixReadonly]: p
}), U = `${n}-label`, G = `${n}-feedback`, O = `${n}-hint`, z = `${n}-value-announcer`, ve = k ? ` ${O}` : "", ye = r(e.root, N), Ie = r(e.input, {
[e.inputDark]: v,
// small input
[e.inputSmall]: i === "small",
// invalid state
[e.inputInvalid]: D,
// prefix/suffix
[e.inputHasAffix]: d || f,
[e.inputIsReady]: de
}), Ne = r(e.label, {
[e.labelDark]: v,
[e.labelDisabled]: o
}), ke = r(e.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[e.labelWrapperHidden]: X
}), Ae = r(e.secondActionButton, {
[e.secondActionButtonSmall]: i === "small"
}), Se = r(e.actionButton, {
[e.actionButtonSmall]: i === "small"
}), ge = () => {
const t = [z];
return D && S && t.push(G), t.join(" ");
}, J = () => {
if (s.current) {
B(s.current.value);
const t = new Event("change", {
bubbles: !0
});
s.current?.dispatchEvent(t), M(`${I} ${s.current.value}`);
}
}, Be = () => {
s.current?.stepDown(), J();
}, we = () => {
s.current?.stepUp(), J();
}, Le = (t) => {
B(t.target.value), q && q(t);
};
return /* @__PURE__ */ y("div", { className: ye, children: [
/* @__PURE__ */ y("div", { className: ke, children: [
/* @__PURE__ */ y("label", { className: Ne, id: U, htmlFor: n, children: [
c,
T && /* @__PURE__ */ a(Re, {})
] }),
A && !X && /* @__PURE__ */ a(Ee, { placement: "top", theme: m, defaultAnchorButtonProps: ne, children: A })
] }),
k && /* @__PURE__ */ a("div", { className: r(e.hint, {
[e.hintDark]: v
}), id: O, children: k }),
/* @__PURE__ */ a(
"div",
{
"aria-live": "polite",
"aria-atomic": "true",
className: e.valueAnnouncer,
id: z,
children: w
}
),
/* @__PURE__ */ y("div", { className: e.wrapper, children: [
d && /* @__PURE__ */ a(
"span",
{
className: r(j, e.prefix),
ref: L,
"aria-disabled": o,
children: xe
}
),
/* @__PURE__ */ a(
"input",
{
className: Ie,
id: n,
...re,
style: be,
ref: he,
"aria-labelledby": `${U}${ve}`,
"aria-describedby": ge(),
"aria-invalid": D,
"aria-disabled": p,
disabled: o,
min: H,
max: $,
readOnly: p,
required: T,
step: ae,
type: "number",
value: b,
onChange: Le
}
),
f && /* @__PURE__ */ a(
"span",
{
className: r(j, e.suffix),
ref: C,
"aria-disabled": o,
children: De
}
),
/* @__PURE__ */ a(Q, { ...ue, hideLabel: !0, theme: m, iconName: "minus", variant: "filled", className: Ae, size: i, onClick: Be, tooltip: ie, disabled: o || p || Z(b) && Number(b) <= Number(H), type: "button", children: se }),
/* @__PURE__ */ a(Q, { ...ce, hideLabel: !0, theme: m, iconName: "plus", variant: "filled", tooltip: le, className: Se, size: i, onClick: we, disabled: o || p || Z(b) && Number(b) >= Number($), type: "button", children: oe })
] }),
D && S && /* @__PURE__ */ a(Pe, { className: e.feedback, message: S, variant: "error", id: G, theme: m })
] });
});
lt.displayName = "DSInputNumber";
export {
lt as D,
Z as i,
ot as v
};