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