@stihl-design-system/components/chunks/Textarea.ORkJUx-S.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as d, jsx as m, Fragment as le } from "react/jsx-runtime";
import { c as z } 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 q } 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.B9f67mjJ.js";
import '../assets/Textarea.BXWhXpXx.css';const he = "ds-textarea_textarea_hjz5f_1", be = "ds-textarea_textarea--small_hjz5f_9", _e = "ds-textarea_textarea--invalid_hjz5f_121", me = "ds-textarea_textarea--resize-auto_hjz5f_145", pe = "ds-textarea_root_hjz5f_155", xe = "ds-textarea_hint_hjz5f_164", ve = "ds-textarea_label_hjz5f_164", Ce = "ds-textarea_label--hidden_hjz5f_272", Se = "ds-textarea_label--disabled_hjz5f_285", je = "ds-textarea_feedback_hjz5f_305", ze = "ds-textarea_char-count_hjz5f_310", Ae = "ds-textarea_char-count-announcer_hjz5f_326", a = {
  textarea: he,
  textareaSmall: be,
  textareaInvalid: _e,
  textareaResizeAuto: me,
  root: pe,
  hint: xe,
  label: ve,
  labelHidden: Ce,
  labelDisabled: Se,
  feedback: je,
  charCount: ze,
  charCountAnnouncer: Ae
}, ke = ["medium", "small"], De = ({
  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}.`));
}, Ie = ie(({
  id: r,
  label: u,
  charsLimitText: M = "Character limit reached",
  charsRemainingText: O = "Characters remaining:",
  className: F,
  defaultValue: X,
  disabled: A = !1,
  hint: x,
  hideLabel: Z = !1,
  invalid: s = !1,
  maxLength: e,
  readonly: D = !1,
  required: I = !1,
  resize: f = "vertical",
  size: G = "medium",
  systemFeedback: n,
  value: v,
  wrapperClassName: J,
  onChange: T,
  onInput: w,
  ...K
}, h) => {
  process.env.NODE_ENV !== "production" && De({
    id: r,
    label: u
  });
  const [Q, y] = i(X || ""), [l, R] = i(0), [U, N] = i(0), [W, E] = i("off"), [g, C] = i(n), [S, j] = i(s), $ = v !== void 0, b = $ ? v : Q, o = ce(null), Y = (t) => {
    o.current = t, typeof h == "function" ? h(t) : h && (h.current = t);
  }, L = de(Z);
  p(() => {
    if (!e || e <= 0)
      return;
    l >= e * 0.8 ? E("polite") : E("off");
    const t = setTimeout(() => {
      N(e - l || 0);
    }, 1e3);
    return () => clearTimeout(t);
  }, [l]), p(() => {
    y(b || ""), c(), e && e > 0 && (R(b.toString().length || 0), N(e - b.toString().length || 0));
  }, [v]), p(() => {
    s && n ? (C(n), j(s)) : !s && e && e >= 0 && l >= e ? (j(!0), C(M)) : (C(n), j(s));
  }, [s, S, n, l]), p(() => {
    if (f === "auto")
      return c(), window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
  }, [f, o.current]);
  const ee = z(a.root, J), te = z(a.textarea, F, {
    // small textarea
    [a.textareaSmall]: G === "small",
    // invalid state
    [a.textareaInvalid]: S,
    // resize handling
    [a.textareaResizeAuto]: f === "auto"
  }), ae = z(a.label, {
    // hide label only visually to keep them available for assistive technologies
    [a.labelHidden]: L,
    [a.labelDisabled]: A
  }), k = `${r}-label`, H = `${r}-feedback`, V = `${r}-hint`, P = `${r}-char-count-announcer`, re = x ? ` ${V}` : "", c = () => {
    if (o.current && f === "auto") {
      o.current.style.height = "auto";
      const t = q(o.current.scrollHeight), _ = q(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(P), s && n && t.push(H), t.length > 0 ? t.join(" ") : void 0;
  }, oe = (t) => {
    var _;
    w && w(t), e && e > 0 && R(((_ = o.current) == null ? void 0 : _.value.length) || 0), c();
  }, ne = (t) => {
    T && T(t), $ || y(t.target.value);
  };
  return /* @__PURE__ */ d("div", { className: ee, children: [
    /* @__PURE__ */ d("label", { className: ae, id: k, htmlFor: r, children: [
      u,
      I && /* @__PURE__ */ m(ue, {})
    ] }),
    x && /* @__PURE__ */ m("div", { className: a.hint, id: V, children: x }),
    S && g && /* @__PURE__ */ m(fe, { className: a.feedback, message: g, variant: "error", id: H }),
    /* @__PURE__ */ m(
      "textarea",
      {
        className: te,
        id: r,
        ...K,
        ref: Y,
        "aria-labelledby": `${k}${re}`,
        "aria-describedby": se(),
        "aria-invalid": s,
        "aria-disabled": D,
        maxLength: e,
        readOnly: D,
        required: I,
        disabled: A,
        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: P,
          "aria-live": W,
          "aria-atomic": "true",
          children: [
            O,
            " ",
            U
          ]
        }
      )
    ] })
  ] });
});
Ie.displayName = "DSTextarea";
export {
  Ie as D,
  ke as T,
  De as v
};