@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
164 lines (163 loc) • 5.67 kB
JavaScript
"use client";
import { jsxs as d, jsx as h, Fragment as le } from "react/jsx-runtime";
import { c as A } from "./index.CEyLAtio.js";
import { forwardRef as ie, useState as i, useRef as ce, useEffect as p } from "react";
import { g as B, p as z } from "./helpers.CcqWV-wZ.js";
import { u as de } from "./useBreakpoint.CMOR9ZOB.js";
import "./index.CgTHIF3K.js";
import { Asterisk as ue } from "../asterisk.CR60hx8S.js";
import { DSSystemFeedback as fe } from "../systemfeedback.BpKZEv4U.js";
import '../assets/Textarea.BGV7Z0Z9.css';const xe = "ds-textarea_textarea_qx67e_1", be = "ds-textarea_textarea--invalid_qx67e_113", _e = "ds-textarea_textarea--small_qx67e_120", he = "ds-textarea_textarea--resize-auto_qx67e_139", pe = "ds-textarea_root_qx67e_149", me = "ds-textarea_hint_qx67e_158", ve = "ds-textarea_label_qx67e_158", Ce = "ds-textarea_label--hidden_qx67e_266", Se = "ds-textarea_label--disabled_qx67e_279", qe = "ds-textarea_feedback_qx67e_299", Ae = "ds-textarea_char-count_qx67e_304", Ie = "ds-textarea_char-count-announcer_qx67e_320", a = {
textarea: xe,
textareaInvalid: be,
textareaSmall: _e,
textareaResizeAuto: he,
root: pe,
hint: me,
label: ve,
labelHidden: Ce,
labelDisabled: Se,
feedback: qe,
charCount: Ae,
charCountAnnouncer: Ie
}, He = ["medium", "small"], Te = ({
id: r,
label: u
}) => {
if (!r)
throw new Error(B("DSTextarea", 'A unique "id" prop is required. Please add a unique "id" prop to the DSTextarea component.'));
if (!u)
throw new Error(B("DSTextarea", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`));
}, ye = ie(({
id: r,
label: u,
charsLimitText: M = "Character limit reached",
charsRemainingText: O = "Characters remaining:",
className: F,
defaultValue: X,
disabled: I = !1,
hint: m,
hideLabel: Z = !1,
invalid: s = !1,
maxLength: e,
readonly: T = !1,
required: y = !1,
resize: f = "vertical",
size: G = "medium",
systemFeedback: n,
value: v,
wrapperClassName: J,
onChange: D,
onInput: w,
...K
}, x) => {
process.env.NODE_ENV !== "production" && Te({
id: r,
label: u
});
const [Q, R] = i(X || ""), [l, N] = i(0), [U, E] = i(0), [W, g] = i("off"), [$, C] = i(n), [S, q] = i(s), k = v !== void 0, b = k ? v : Q, o = ce(null), Y = (t) => {
o.current = t, typeof x == "function" ? x(t) : x && (x.current = t);
}, L = de(Z);
p(() => {
if (!e || e <= 0)
return;
l >= e * 0.8 ? g("polite") : g("off");
const t = setTimeout(() => {
E(e - l || 0);
}, 1e3);
return () => clearTimeout(t);
}, [l]), p(() => {
R(b || ""), c(), e && e > 0 && (N(b.toString().length || 0), E(e - b.toString().length || 0));
}, [v]), p(() => {
s && n ? (C(n), q(s)) : !s && e && e >= 0 && l >= e ? (q(!0), C(M)) : (C(n), q(s));
}, [s, S, n, l]), p(() => {
if (f === "auto")
return c(), window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
}, [f, o.current]);
const ee = A(a.root, J), te = A(a.textarea, F, {
// small textarea
[a.textareaSmall]: G === "small",
// invalid state
[a.textareaInvalid]: S,
// resize handling
[a.textareaResizeAuto]: f === "auto"
}), ae = A(a.label, {
// hide label only visually to keep them available for assistive technologies
[a.labelHidden]: L,
[a.labelDisabled]: I
}), H = `${r}-label`, V = `${r}-feedback`, P = `${r}-hint`, j = `${r}-char-count-announcer`, re = m ? ` ${P}` : "", c = () => {
if (o.current && f === "auto") {
o.current.style.height = "auto";
const t = z(o.current.scrollHeight), _ = z(2);
o.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
// from jumping as soon as the user starts typing.
t + _}rem`;
}
}, se = () => {
const t = [];
return e && e > 0 && t.push(j), s && n && t.push(V), t.length > 0 ? t.join(" ") : void 0;
}, oe = (t) => {
var _;
w && w(t), e && e > 0 && N(((_ = o.current) == null ? void 0 : _.value.length) || 0), c();
}, ne = (t) => {
D && D(t), k || R(t.target.value);
};
return /* @__PURE__ */ d("div", { className: ee, children: [
/* @__PURE__ */ d("label", { className: ae, id: H, htmlFor: r, children: [
u,
y && /* @__PURE__ */ h(ue, {})
] }),
m && /* @__PURE__ */ h("div", { className: a.hint, id: P, children: m }),
S && $ && /* @__PURE__ */ h(fe, { className: a.feedback, message: $, type: "invalid", id: V }),
/* @__PURE__ */ h(
"textarea",
{
className: te,
id: r,
...K,
ref: Y,
"aria-labelledby": `${H}${re}`,
"aria-describedby": se(),
"aria-invalid": s,
"aria-disabled": T,
maxLength: e,
readOnly: T,
required: y,
disabled: I,
value: b,
defaultValue: void 0,
rows: void 0,
cols: void 0,
onChange: ne,
onInput: oe
}
),
e !== void 0 && e > 0 && /* @__PURE__ */ d(le, { children: [
/* @__PURE__ */ d("div", { className: a.charCount, "aria-hidden": "true", children: [
l,
"/",
e
] }),
/* @__PURE__ */ d(
"div",
{
className: a.charCountAnnouncer,
id: j,
"aria-live": W,
"aria-atomic": "true",
children: [
O,
" ",
U
]
}
)
] })
] });
});
ye.displayName = "DSTextarea";
export {
ye as D,
He as T,
Te as v
};