@stihl-design-system/components 1.0.0-RC.34 → 1.0.0-RC.36

package/chunks/Textarea.DibBqiam.js

@@ -0,0 +1,181 @@
+"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.C9tT8xkE.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
+};

package/chunks/{Toast.ug_RjGgF.js → Toast.ldZRNpGM.js}

@@ -3,7 +3,7 @@ import { jsx as S, jsxs as y } from "react/jsx-runtime";
 import { d as E } from "./index.D-sRdssb.js";
 import { c as W } from "./index.DL9mof6u.js";
 import { forwardRef as L } from "react";
-import { D as M } from "./Button.DCZgBNmA.js";
+import { D as M } from "./Button.CQlIao-Z.js";
 import { D as O } from "./Icon.CDLyB7Pv.js";
 import '../assets/Toast.CGyKXb4V.css';const P = "ds-toast_root_1jbef_5", z = "ds-toast_root--closing_1jbef_15", A = "ds-toast_root--success_1jbef_56", R = "ds-toast_root--info_1jbef_60", $ = "ds-toast_root--warning_1jbef_64", q = "ds-toast_content_1jbef_69", F = "ds-toast_content--hide-icon_1jbef_76", G = "ds-toast_icon_1jbef_80", J = "ds-toast_message_1jbef_84", s = {
   root: P,