@stihl-design-system/components/chunks/Textarea.Cw85sxHL.js

Welcome to the STIHL Design System react component library.

"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 m } from "react";
import { g as q, p as z } from "./helpers.BbWkXTr3.js";
import { u as de } from "./useBreakpoint.CMOR9ZOB.js";
import "./index.CgTHIF3K.js";
import { Asterisk as ue } from "../asterisk.CR60hx8S.js";
import { D as fe } from "./SystemFeedback.CyGbUCzT.js";
import '../assets/Textarea.Dq4rH9Tg.css';const pe = "ds-textarea_textarea_1s8pw_1", be = "ds-textarea_textarea--small_1s8pw_9", _e = "ds-textarea_textarea--invalid_1s8pw_121", he = "ds-textarea_textarea--resize-auto_1s8pw_145", me = "ds-textarea_root_1s8pw_155", xe = "ds-textarea_hint_1s8pw_164", we = "ds-textarea_label_1s8pw_164", ve = "ds-textarea_label--hidden_1s8pw_303", Ce = "ds-textarea_label--disabled_1s8pw_316", Se = "ds-textarea_feedback_1s8pw_336", Ae = "ds-textarea_char-count_1s8pw_341", De = "ds-textarea_char-count-announcer_1s8pw_357", a = {
  textarea: pe,
  textareaSmall: be,
  textareaInvalid: _e,
  textareaResizeAuto: he,
  root: me,
  hint: xe,
  label: we,
  labelHidden: ve,
  labelDisabled: Ce,
  feedback: Se,
  charCount: Ae,
  charCountAnnouncer: De
}, Ve = ["medium", "small"], Ie = ({
  id: r,
  label: u
}) => {
  if (!r)
    throw new Error(q("DSTextarea", 'A unique "id" prop is required. Please add a unique "id" prop to the DSTextarea component.'));
  if (!u)
    throw new Error(q("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}.`));
}, Te = ie(({
  id: r,
  label: u,
  charsLimitText: M = "Character limit reached",
  charsRemainingText: O = "Characters remaining:",
  className: F,
  defaultValue: X,
  disabled: D = !1,
  hint: x,
  hideLabel: Z = !1,
  invalid: s = !1,
  maxLength: e,
  readonly: I = !1,
  required: T = !1,
  resize: f = "vertical",
  size: G = "medium",
  systemFeedback: n,
  value: w,
  wrapperClassName: J,
  onChange: y,
  onInput: R,
  ...K
}, p) => {
  process.env.NODE_ENV !== "production" && Ie({
    id: r,
    label: u
  });
  const [Q, N] = i(X || ""), [l, E] = i(0), [U, g] = i(0), [W, $] = i("off"), [k, v] = i(n), [C, S] = i(s), H = w !== void 0, b = H ? w : Q, o = ce(null), Y = (t) => {
    o.current = t, typeof p == "function" ? p(t) : p && (p.current = t);
  }, L = de(Z);
  m(() => {
    if (!e || e <= 0)
      return;
    l >= e * 0.8 ? $("polite") : $("off");
    const t = setTimeout(() => {
      g(e - l || 0);
    }, 1e3);
    return () => clearTimeout(t);
  }, [l]), m(() => {
    N(b || ""), c(), e && e > 0 && (E(b.toString().length || 0), g(e - b.toString().length || 0));
  }, [w]), m(() => {
    s && n ? (v(n), S(s)) : !s && e && e >= 0 && l >= e ? (S(!0), v(M)) : (v(n), S(s));
  }, [s, C, n, l]), m(() => {
    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]: C,
    // 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]: D
  }), V = `${r}-label`, P = `${r}-feedback`, j = `${r}-hint`, B = `${r}-char-count-announcer`, re = x ? ` ${j}` : "", 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(B), s && n && t.push(P), t.length > 0 ? t.join(" ") : void 0;
  }, oe = (t) => {
    var _;
    R && R(t), e && e > 0 && E(((_ = o.current) == null ? void 0 : _.value.length) || 0), c();
  }, ne = (t) => {
    y && y(t), H || N(t.target.value);
  };
  return /* @__PURE__ */ d("div", { className: ee, children: [
    /* @__PURE__ */ d("label", { className: ae, id: V, htmlFor: r, children: [
      u,
      T && /* @__PURE__ */ h(ue, {})
    ] }),
    x && /* @__PURE__ */ h("div", { className: a.hint, id: j, children: x }),
    C && k && /* @__PURE__ */ h(fe, { className: a.feedback, message: k, variant: "error", id: P }),
    /* @__PURE__ */ h(
      "textarea",
      {
        className: te,
        id: r,
        ...K,
        ref: Y,
        "aria-labelledby": `${V}${re}`,
        "aria-describedby": se(),
        "aria-invalid": s,
        "aria-disabled": I,
        maxLength: e,
        readOnly: I,
        required: T,
        disabled: D,
        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: B,
          "aria-live": W,
          "aria-atomic": "true",
          children: [
            O,
            " ",
            U
          ]
        }
      )
    ] })
  ] });
});
Te.displayName = "DSTextarea";
export {
  Te as D,
  Ve as T,
  Ie as v
};