@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
243 lines (242 loc) • 8.6 kB
JavaScript
"use client";
import { jsxs as N, jsx as a } from "react/jsx-runtime";
import { c as r } from "./index.DL9mof6u.js";
import { forwardRef as Be, useState as m, useRef as E, useEffect as W } from "react";
import { h as Le } from "./has-window.ut_-aShB.js";
import { u as J } from "./useBreakpoint.1txsny17.js";
import { u as K } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import "./index.D-sRdssb.js";
import { Asterisk as Re } from "../asterisk.B2ih8VwF.js";
import { D as Q } from "./Button.Cn5yg7dG.js";
import { M as k, a as P } from "./Input.utils.CL1u4Ctq.js";
import { D as Ee } from "./Popover.D7McfVaH.js";
import { D as We } from "./SystemFeedback.CjlARKki.js";
import { g as f } from "./helpers.CexwVao7.js";
import '../assets/InputNumber.z_UqRYdv.css';const ke = "ds-input-number_input_1nvt0_1", Pe = "ds-input-number_input--small_1nvt0_9", Ce = "ds-input-number_input--invalid_1nvt0_121", Ve = "ds-input-number_input--has-affix_1nvt0_197", $e = "ds-input-number_input--is-ready_1nvt0_211", He = "ds-input-number_root_1nvt0_222", Fe = "ds-input-number_hint_1nvt0_222", Te = "ds-input-number_label-wrapper_1nvt0_222", Me = "ds-input-number_wrapper_1nvt0_226", Xe = "ds-input-number_affix_1nvt0_232", je = "ds-input-number_affix--small_1nvt0_253", qe = "ds-input-number_prefix_1nvt0_266", Ue = "ds-input-number_suffix_1nvt0_272", Ge = "ds-input-number_affix--disabled_1nvt0_278", Oe = "ds-input-number_affix--readonly_1nvt0_289", Je = "ds-input-number_action-button_1nvt0_325", Ke = "ds-input-number_label_1nvt0_222", Qe = "ds-input-number_label--disabled_1nvt0_344", Ye = "ds-input-number_label-wrapper--hidden_1nvt0_356", Ze = "ds-input-number_feedback_1nvt0_384", ze = "ds-input-number_second-action-button_1nvt0_397", et = "ds-input-number_value-announcer_1nvt0_401", e = {
input: ke,
inputSmall: Pe,
inputInvalid: Ce,
inputHasAffix: Ve,
inputIsReady: $e,
root: He,
hint: Fe,
labelWrapper: Te,
wrapper: Me,
affix: Xe,
affixSmall: je,
prefix: qe,
suffix: Ue,
affixDisabled: Ge,
affixReadonly: Oe,
actionButton: Je,
label: Ke,
labelDisabled: Qe,
labelWrapperHidden: Ye,
feedback: Ze,
secondActionButton: ze,
valueAnnouncer: et
}, Y = (n) => n != null && n !== "", tt = ({
id: n,
label: b,
prefix: _,
suffix: h,
hideLabel: s,
popoverContent: x
}) => {
if (!n)
throw new Error(f("DSInputNumber", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputNumber component.'));
if (!b)
throw new Error(f("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}.`));
_ && _.length > k && console.warn(f("DSInputNumber", `Prefix length must not exceed ${k} characters.`)), h && h.length > P && console.warn(f("DSInputNumber", `Suffix length must not exceed ${P} characters.`)), s && x && console.warn(f("DSInputNumber", "Using a popover when hideLabel is set to true is not supported."));
}, nt = Be(({
id: n,
label: b,
announcementText: _ = "Value changed to",
className: h,
disabled: s = !1,
decreaseAmountButtonProps: x,
hint: y,
hideLabel: C = !1,
invalid: v = !1,
increaseAmountButtonProps: Z,
prefix: u,
max: V = 100,
min: $ = 0,
popoverContent: D,
popoverInfoButtonProps: z,
readonly: l = !1,
required: H = !1,
size: i = "medium",
step: ee = 1,
suffix: c,
systemFeedback: A,
value: S,
onChange: F,
...te
}, I) => {
process.env.NODE_ENV !== "production" && tt({
id: n,
label: b,
prefix: u,
suffix: c,
hideLabel: J(C),
popoverContent: D
});
const {
label: ne = "Decrease",
tooltip: ae,
...se
} = x || {}, {
label: oe = "Increase",
tooltip: re,
...ie
} = Z || {}, [ue, le] = m(!1), [p, g] = m(S), [w, T] = m(""), [ce, pe] = m(!1), [de, me] = m({}), o = E(null), fe = (t) => {
o.current = t, typeof I == "function" ? I(t) : I && (I.current = t);
}, be = u?.substring(0, k), B = E(null), _e = c?.substring(0, P), L = E(null), M = J(C);
W(() => {
g(S);
}, [S]), W(() => {
if (w) {
const t = setTimeout(() => {
T("");
}, 3e3);
return () => clearTimeout(t);
}
}, [w]), W(() => {
const t = (d) => {
d.preventDefault();
};
return o.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
}), () => {
o.current?.removeEventListener("wheel", t);
};
}, []), K(() => {
const t = i === "medium" ? 16 : 8, d = {};
if (B.current) {
const R = B.current.offsetWidth;
d.paddingInlineStart = t + R + "px";
}
if (L.current) {
const R = L.current.offsetWidth;
d.paddingInlineEnd = t + R + "px";
}
me(d), le(!0);
}, [u, c, i, ce]), K(() => {
Le && (async () => {
"fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), pe(!0));
})();
}, []);
const X = r(e.affix, {
[e.affixSmall]: i === "small",
[e.affixDisabled]: s,
[e.affixReadonly]: l
}), j = `${n}-label`, q = `${n}-feedback`, U = `${n}-hint`, G = `${n}-value-announcer`, he = y ? ` ${U}` : "", ve = r(e.root, h), Ie = r(e.input, {
// small input
[e.inputSmall]: i === "small",
// invalid state
[e.inputInvalid]: v,
// prefix/suffix
[e.inputHasAffix]: u || c,
[e.inputIsReady]: ue
}), Ne = r(e.label, {
[e.labelDisabled]: s
}), xe = r(e.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[e.labelWrapperHidden]: M
}), ye = r(e.secondActionButton, {
[e.secondActionButtonSmall]: i === "small"
}), De = r(e.actionButton, {
[e.actionButtonSmall]: i === "small"
}), Ae = () => {
const t = [G];
return v && A && t.push(q), t.join(" ");
}, O = () => {
if (o.current) {
g(o.current.value);
const t = new Event("change", {
bubbles: !0
});
o.current?.dispatchEvent(t), T(`${_} ${o.current.value}`);
}
}, Se = () => {
o.current?.stepDown(), O();
}, ge = () => {
o.current?.stepUp(), O();
}, we = (t) => {
g(t.target.value), F && F(t);
};
return /* @__PURE__ */ N("div", { className: ve, children: [
/* @__PURE__ */ N("div", { className: xe, children: [
/* @__PURE__ */ N("label", { className: Ne, id: j, htmlFor: n, children: [
b,
H && /* @__PURE__ */ a(Re, {})
] }),
D && !M && /* @__PURE__ */ a(Ee, { placement: "top", defaultAnchorButtonProps: z, children: D })
] }),
y && /* @__PURE__ */ a("div", { className: e.hint, id: U, children: y }),
/* @__PURE__ */ a(
"div",
{
"aria-live": "polite",
"aria-atomic": "true",
className: e.valueAnnouncer,
id: G,
children: w
}
),
/* @__PURE__ */ N("div", { className: e.wrapper, children: [
u && /* @__PURE__ */ a(
"span",
{
className: r(X, e.prefix),
ref: B,
"aria-disabled": s,
children: be
}
),
/* @__PURE__ */ a(
"input",
{
className: Ie,
id: n,
...te,
style: de,
ref: fe,
"aria-labelledby": `${j}${he}`,
"aria-describedby": Ae(),
"aria-invalid": v,
"aria-disabled": l,
disabled: s,
min: $,
max: V,
readOnly: l,
required: H,
step: ee,
type: "number",
value: p,
onChange: we
}
),
c && /* @__PURE__ */ a(
"span",
{
className: r(X, e.suffix),
ref: L,
"aria-disabled": s,
children: _e
}
),
/* @__PURE__ */ a(Q, { ...se, hideLabel: !0, theme: "light", iconName: "minus", variant: "filled", className: ye, size: i, onClick: Se, tooltip: ae, disabled: s || l || Y(p) && Number(p) <= Number($), type: "button", children: ne }),
/* @__PURE__ */ a(Q, { ...ie, hideLabel: !0, theme: "light", iconName: "plus", variant: "filled", tooltip: re, className: De, size: i, onClick: ge, disabled: s || l || Y(p) && Number(p) >= Number(V), type: "button", children: oe })
] }),
v && A && /* @__PURE__ */ a(We, { className: e.feedback, message: A, variant: "error", id: q })
] });
});
nt.displayName = "DSInputNumber";
export {
nt as D,
Y as i,
tt as v
};