@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
193 lines (192 loc) • 7.03 kB
JavaScript
"use client";
import { jsxs as o, jsx as p, Fragment as xe } from "react/jsx-runtime";
import { c as l } from "./index.DQOqod3i.js";
import { forwardRef as _e, useState as u, useRef as ve, useEffect as _ } from "react";
import { u as X } from "./useBreakpoint.1txsny17.js";
import { Asterisk as ke } from "../asterisk.Dwtdwpkq.js";
import { D as ge } from "./Popover.CxZZ_y1Z.js";
import { D as Ce } from "./SystemFeedback.DhWcYjnu.js";
import { g as I, p as Z } from "./helpers.CexwVao7.js";
import '../assets/Textarea.BO4AcRJD.css';const De = "ds-textarea_textarea_1mper_1", ye = "ds-textarea_textarea--small_1mper_9", Se = "ds-textarea_textarea--invalid_1mper_127", we = "ds-textarea_textarea--dark_1mper_145", Te = "ds-textarea_textarea--resize-auto_1mper_259", Ie = "ds-textarea_root_1mper_269", Ae = "ds-textarea_hint_1mper_269", Ne = "ds-textarea_label-wrapper_1mper_269", Le = "ds-textarea_label_1mper_269", Re = "ds-textarea_label--disabled_1mper_491", Fe = "ds-textarea_label--dark_1mper_495", Ee = "ds-textarea_label-wrapper--hidden_1mper_511", He = "ds-textarea_hint--dark_1mper_538", ze = "ds-textarea_feedback_1mper_542", Pe = "ds-textarea_footer_1mper_546", Ve = "ds-textarea_footer--has-system-feedback_1mper_551", $e = "ds-textarea_char-count_1mper_560", We = "ds-textarea_char-count--dark_1mper_572", Be = "ds-textarea_char-count-announcer_1mper_576", e = {
textarea: De,
textareaSmall: ye,
textareaInvalid: Se,
textareaDark: we,
textareaResizeAuto: Te,
root: Ie,
hint: Ae,
labelWrapper: Ne,
label: Le,
labelDisabled: Re,
labelDark: Fe,
labelWrapperHidden: Ee,
hintDark: He,
feedback: ze,
footer: Pe,
footerHasSystemFeedback: Ve,
charCount: $e,
charCountDark: We,
charCountAnnouncer: Be
}, Qe = ["medium", "small"], qe = ({
id: v,
label: i,
hideLabel: r,
popoverContent: h
}) => {
if (!v)
throw new Error(I("DSTextarea", 'A unique "id" prop is required. Please add a unique "id" prop to the DSTextarea component.'));
if (!i)
throw new Error(I("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}.`));
r && h && console.warn(I("DSTextarea", "Using a popover when hideLabel is set to true is not supported."));
}, je = _e((v, i) => {
const {
id: r,
label: h,
charsLimitText: G = "Character limit reached",
charsRemainingText: J = "Characters remaining:",
className: K,
defaultValue: Q,
disabled: A = !1,
hint: k,
hideLabel: N = !1,
invalid: s = !1,
maxLength: a,
popoverContent: g,
popoverInfoButtonProps: Y,
readonly: L = !1,
required: R = !1,
resize: b = "vertical",
size: ee = "medium",
systemFeedback: c,
theme: C = "light",
value: D,
wrapperClassName: ae,
onChange: F,
onInput: E,
...te
} = v;
process.env.NODE_ENV !== "production" && qe({
id: r,
label: h,
hideLabel: X(N),
popoverContent: g
});
const [re, H] = u(Q || ""), [d, z] = u(0), [se, P] = u(0), [ne, V] = u("off"), [$, y] = u(c), [S, w] = u(s), W = D !== void 0, f = W ? D : re, n = ve(null), B = a !== void 0 && a > 0, T = S && $, oe = (t) => {
n.current = t, typeof i == "function" ? i(t) : i && (i.current = t);
}, q = X(N);
_(() => {
if (!a || a <= 0)
return;
d >= a * 0.8 ? V("polite") : V("off");
const t = setTimeout(() => {
P(a - d || 0);
}, 1e3);
return () => clearTimeout(t);
}, [d]), _(() => {
H(f || ""), m(), a && a > 0 && (z(f.toString().length || 0), P(a - f.toString().length || 0));
}, [D]), _(() => {
s && c ? (y(c), w(s)) : !s && a && a >= 0 && d >= a ? (w(!0), y(G)) : (y(c), w(s));
}, [s, S, c, d]), _(() => {
if (b === "auto")
return m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
}, [b, n.current]);
const le = l(e.root, ae), x = C === "dark", ie = l(e.textarea, K, {
[e.textareaDark]: x,
// small textarea
[e.textareaSmall]: ee === "small",
// invalid state
[e.textareaInvalid]: S,
// resize handling
[e.textareaResizeAuto]: b === "auto"
}), ce = l(e.label, {
[e.labelDark]: x,
[e.labelDisabled]: A
}), de = l(e.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[e.labelWrapperHidden]: q
}), ue = l(e.footer, {
[e.footerHasSystemFeedback]: T
}), j = `${r}-label`, M = `${r}-feedback`, O = `${r}-hint`, U = `${r}-char-count-announcer`, me = k ? ` ${O}` : "", m = () => {
if (n.current && b === "auto") {
n.current.style.height = "auto";
const t = Z(n.current.scrollHeight), fe = Z(2);
n.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 + fe}rem`;
}
}, pe = () => {
const t = [];
return a && a > 0 && t.push(U), s && c && t.push(M), t.length > 0 ? t.join(" ") : void 0;
}, he = (t) => {
E && E(t), a && a > 0 && z(n.current?.value.length || 0), m();
}, be = (t) => {
F && F(t), W || H(t.target.value);
};
return /* @__PURE__ */ o("div", { className: le, children: [
/* @__PURE__ */ o("div", { className: de, children: [
/* @__PURE__ */ o("label", { className: ce, id: j, htmlFor: r, children: [
h,
R && /* @__PURE__ */ p(ke, {})
] }),
g && !q && /* @__PURE__ */ p(ge, { placement: "top", theme: C, defaultAnchorButtonProps: Y, children: g })
] }),
k && /* @__PURE__ */ p("div", { className: l(e.hint, {
[e.hintDark]: x
}), id: O, children: k }),
/* @__PURE__ */ p(
"textarea",
{
className: ie,
id: r,
...te,
ref: oe,
"aria-labelledby": `${j}${me}`,
"aria-describedby": pe(),
"aria-invalid": s,
"aria-disabled": L,
maxLength: a,
readOnly: L,
required: R,
disabled: A,
value: f,
defaultValue: void 0,
rows: void 0,
cols: void 0,
onChange: be,
onInput: he
}
),
B || T ? /* @__PURE__ */ o("div", { className: ue, children: [
T && /* @__PURE__ */ p(Ce, { className: e.feedback, message: $, variant: "error", id: M, theme: C }),
B && /* @__PURE__ */ o(xe, { children: [
/* @__PURE__ */ o("div", { className: l(e.charCount, {
[e.charCountDark]: x
}), "aria-hidden": "true", children: [
d,
"/",
a
] }),
/* @__PURE__ */ o(
"div",
{
className: e.charCountAnnouncer,
id: U,
"aria-live": ne,
"aria-atomic": "true",
children: [
J,
" ",
se
]
}
)
] })
] }) : null
] });
});
je.displayName = "DSTextarea";
export {
je as D,
Qe as T,
qe as v
};