asma-ui-core 3.111.0 → 3.112.0

package/dist/components/inputs/input-field/StyledInputField.js

@@ -1,171 +1,171 @@
-import { cn as l } from "../../../helpers/cn.js";
-import { resolveSx as v } from "../../../helpers/sx.js";
-import { CloseIcon as pt } from "../../icons/close-icon/CloseIcon.js";
-import { CharacterCounter as gt } from "../../../helpers/CharacterCounter.js";
-import { HelperRow as re } from "../../../helpers/HelperRow.js";
+import { cn as s } from "../../../helpers/cn.js";
+import { resolveSx as F } from "../../../helpers/sx.js";
+import { CloseIcon as mt } from "../../icons/close-icon/CloseIcon.js";
+import { CharacterCounter as pt } from "../../../helpers/CharacterCounter.js";
+import { HelperRow as gt } from "../../../helpers/HelperRow.js";
 import { useHelperRowBudget as ft } from "../../../helpers/useHelperRowBudget.js";
 import { useHelperSlot as xt } from "../../../helpers/useHelperSlot.js";
-import { fieldLabelAboveClass as bt, fieldWidthStyle as yt, floatingLabelClass as Lt, floatingLabelLayoutStyle as St, notchedLegendClass as vt, notchedOutlineClass as de, singleLineInputLayoutStyle as Ht, singleLineShellLayoutStyle as It } from "../field-styles.js";
-import b from "./StyledInputField.module.js";
-import { Children as Nt, useCallback as ce, useId as At, useLayoutEffect as B, useRef as G, useState as M } from "react";
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useMergeRefs as he } from "@floating-ui/react";
-var Ot = ({ dataTest: y, label: r, labelPlacement: me = "above", value: g, defaultValue: L, onChange: ue, onBlur: pe, onFocus: ge, error: h, helperText: E, reserveHelperText: fe, expandHelperText: xe = !0, maxLength: be, counter: ye, locale: Le, disabled: d, readOnly: n, required: H, allowClear: Se, onClear: ve, type: He = "text", placeholder: Ie, name: Ne, id: Ae, autoComplete: Ce, autoFocus: Re, multiline: i, rows: I, minRows: k, maxRows: T, size: we = "medium", width: J = "full", fullWidth: Ct, className: Fe, style: _e, sx: Be, inputRef: Me, slotProps: t, InputProps: Q, onKeyDown: V, onClick: Ee, variant: Rt }) => {
-  const ke = At(), D = Ae ?? ke, W = `${D}-helper-text`, $ = G(null), j = G(0), X = G(null), [Te, De] = M(void 0), [N, Z] = M(!1), [We, q] = M(L != null && L !== ""), [$e, je] = M(String(L ?? "").length), A = g !== void 0, O = A ? g !== "" && g != null : We, ze = !!d || !!n, z = t?.input?.startAdornment ?? Q?.startAdornment, S = Nt.count(z) > 0, m = S && Array.isArray(z), f = t?.input?.endAdornment ?? Q?.endAdornment, C = !!(Se && O && !ze), { ref: Ue, ...a } = t?.htmlInput ?? {}, Ke = Me ?? Ue, { className: Pe, style: U, ref: Ye } = t?.input ?? {}, Ge = he([Ye]), Je = t?.input?.onMouseDown, ee = t?.input?.onClick, Qe = ee ? { onClick: ee } : {}, Ve = Ce ?? a.autoComplete, Xe = Ne ?? a.name, K = a.id ?? D, R = be ?? a.maxLength, te = `${D}-counter`, P = !!(ye && R && !n), Ze = A ? String(g ?? "").length : $e, w = me === "floating" && !!r, F = N || O || S, u = ce(() => {
-    const e = $.current;
-    if (!(!i || !e) && (j.current = e.offsetWidth, j.current !== 0)) {
-      if (e.removeAttribute("data-scrollable"), I != null && !n) e.style.height = "";
+import { fieldLabelAboveClass as bt, fieldWidthStyle as yt, floatingLabelClass as Lt, floatingLabelLayoutStyle as St, notchedLegendClass as vt, notchedOutlineClass as se, singleLineInputLayoutStyle as Ht, singleLineShellLayoutStyle as It } from "../field-styles.js";
+import x from "./StyledInputField.module.js";
+import { Children as At, useCallback as re, useId as Ct, useLayoutEffect as _, useRef as U, useState as B } from "react";
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { useMergeRefs as de } from "@floating-ui/react";
+var Ot = ({ dataTest: y, label: r, labelPlacement: ce = "above", value: m, defaultValue: L, onChange: ue, onBlur: he, onFocus: me, error: p, helperText: K, reserveHelperText: pe, expandHelperText: ge = !0, maxLength: fe, counter: xe, locale: be, disabled: d, readOnly: n, required: v, allowClear: ye, onClear: Le, type: Se = "text", placeholder: ve, name: He, id: Ie, autoComplete: Ae, autoFocus: Ce, multiline: i, rows: H, minRows: M, maxRows: k, size: Ne = "medium", width: Y = "full", fullWidth: Nt, className: Re, style: we, sx: Fe, inputRef: _e, slotProps: t, InputProps: G, onKeyDown: J, onClick: Be, variant: Rt }) => {
+  const Me = Ct(), E = Ie ?? Me, Q = `${E}-helper-text`, T = U(null), D = U(0), V = U(null), [ke, Ee] = B(void 0), [I, X] = B(!1), [Te, Z] = B(L != null && L !== ""), [De, We] = B(String(L ?? "").length), A = m !== void 0, q = A ? m !== "" && m != null : Te, $e = !!d || !!n, W = t?.input?.startAdornment ?? G?.startAdornment, S = At.count(W) > 0, u = S && Array.isArray(W), g = t?.input?.endAdornment ?? G?.endAdornment, C = !!(ye && q && !$e), { ref: ze, ...l } = t?.htmlInput ?? {}, je = _e ?? ze, { className: Pe, style: $, ref: Ue } = t?.input ?? {}, Ke = de([Ue]), Ye = t?.input?.onMouseDown, O = t?.input?.onClick, Ge = O ? { onClick: O } : {}, Je = Ae ?? l.autoComplete, Qe = He ?? l.name, z = l.id ?? E, N = fe ?? l.maxLength, ee = `${E}-counter`, te = xe !== !1 && !!N, Ve = A ? String(m ?? "").length : De, R = ce === "floating" && !!r, w = I || q || S, h = re(() => {
+    const e = T.current;
+    if (!(!i || !e) && (D.current = e.offsetWidth, D.current !== 0)) {
+      if (e.removeAttribute("data-scrollable"), H != null && !n) e.style.height = "";
       else {
         if (e.style.height = "auto", e.scrollHeight === 0) {
           e.style.height = "";
           return;
         }
-        const s = getComputedStyle(e), c = Number.parseFloat(s.lineHeight) || 24, ae = Number.parseFloat(s.paddingTop) + Number.parseFloat(s.paddingBottom), se = I ?? k, mt = se ? se * c + ae : 0, ut = n || !T ? Number.POSITIVE_INFINITY : T * c + ae;
-        e.style.height = `${Math.min(ut, Math.max(mt, e.scrollHeight))}px`;
+        const a = getComputedStyle(e), c = Number.parseFloat(a.lineHeight) || 24, le = Number.parseFloat(a.paddingTop) + Number.parseFloat(a.paddingBottom), ae = H ?? M, ut = ae ? ae * c + le : 0, ht = n || !k ? Number.POSITIVE_INFINITY : k * c + le;
+        e.style.height = `${Math.min(ht, Math.max(ut, e.scrollHeight))}px`;
       }
       e.scrollHeight > e.clientHeight + 1 && e.setAttribute("data-scrollable", "true");
     }
   }, [
-    T,
     k,
+    M,
     i,
     n,
-    I
-  ]), qe = (e) => {
-    n || (A || (q(e.target.value !== ""), je(e.target.value.length), u()), ue?.(e));
-  }, Oe = (e) => {
-    !d && !n && Z(!0), ge?.(e);
-  }, et = (e) => {
-    !d && !n && Z(!1), pe?.(e);
+    H
+  ]), Xe = (e) => {
+    n || (A || (Z(e.target.value !== ""), We(e.target.value.length), h()), ue?.(e));
+  }, Ze = (e) => {
+    !d && !n && X(!0), me?.(e);
+  }, qe = (e) => {
+    !d && !n && X(!1), he?.(e);
   };
-  B(() => {
-    u();
+  _(() => {
+    h();
   }, [
-    u,
+    h,
     L,
-    g
-  ]), B(() => {
+    m
+  ]), _(() => {
     if (!i || !document.fonts) return;
-    const e = () => u();
+    const e = () => h();
     return document.fonts.addEventListener("loadingdone", e), () => document.fonts.removeEventListener("loadingdone", e);
-  }, [i, u]), B(() => {
-    const e = $.current;
+  }, [i, h]), _(() => {
+    const e = T.current;
     if (!i || !e || typeof ResizeObserver > "u") return;
-    let s = 0;
+    let a = 0;
     const c = new ResizeObserver(() => {
-      e.offsetWidth !== j.current && (cancelAnimationFrame(s), s = requestAnimationFrame(u));
+      e.offsetWidth !== D.current && (cancelAnimationFrame(a), a = requestAnimationFrame(h));
     });
     return c.observe(e), () => {
-      cancelAnimationFrame(s), c.disconnect();
+      cancelAnimationFrame(a), c.disconnect();
     };
-  }, [i, u]);
-  const ne = he([Ke, ce((e) => {
-    $.current = e instanceof HTMLTextAreaElement ? e : null;
-  }, [])]), { style: Y, ...tt } = a, x = !i && !m, { height: wt, minHeight: Ft, maxHeight: _t, paddingTop: Bt, paddingBottom: Mt, ...nt } = U ?? {}, ot = x ? {
-    ...nt,
+  }, [i, h]);
+  const ne = de([je, re((e) => {
+    T.current = e instanceof HTMLTextAreaElement ? e : null;
+  }, [])]), { style: j, ...Oe } = l, f = !i && !u, { height: wt, minHeight: Ft, maxHeight: _t, paddingTop: Bt, paddingBottom: Mt, ...et } = $ ?? {}, tt = f ? {
+    ...et,
     ...It()
-  } : m ? {
+  } : u ? {
     boxSizing: "border-box",
     minHeight: 40,
-    ...U
-  } : U, { height: Et, minHeight: kt, maxHeight: Tt, paddingTop: Dt, paddingBottom: Wt, paddingLeft: $t, paddingRight: it, ...lt } = Y ?? {}, at = x ? {
-    ...lt,
+    ...$
+  } : $, { height: kt, minHeight: Et, maxHeight: Tt, paddingTop: Dt, paddingBottom: Wt, paddingLeft: $t, paddingRight: nt, ...ot } = j ?? {}, it = f ? {
+    ...ot,
     ...Ht({
       paddingLeft: S ? 40 : 14,
-      paddingRight: it ?? Te ?? (C || f ? 40 : 14)
+      paddingRight: nt ?? ke ?? (C || g ? 40 : 14)
     })
-  } : Y;
-  B(() => {
-    if (!x) return;
-    const e = X.current, s = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
-    De((c) => c === s ? c : s);
+  } : j;
+  _(() => {
+    if (!f) return;
+    const e = V.current, a = e ? Math.ceil(e.getBoundingClientRect().width) + 20 : void 0;
+    Ee((c) => c === a ? c : a);
   }, [
-    x,
+    f,
     C,
-    f
+    g
   ]);
-  const st = F || !w, { show: _, role: oe } = xt("StyledInputField", h, E, fe, n), { fieldRef: rt, rowRef: dt, rowStyle: ct } = ft(xe && _ && !P), ie = {
-    ...tt,
-    style: x ? at : Y,
-    id: K,
-    name: Xe,
-    maxLength: R,
-    placeholder: st ? Ie : void 0,
+  const lt = w || !R, { show: P, role: at } = xt("StyledInputField", p, K, pe, n), { fieldRef: st, rowRef: rt, rowStyle: dt } = ft(ge && P), oe = {
+    ...Oe,
+    style: f ? it : j,
+    id: z,
+    name: Qe,
+    maxLength: N,
+    placeholder: lt ? ve : void 0,
     disabled: d,
     readOnly: n,
-    required: H,
-    autoComplete: Ve,
-    autoFocus: Re,
-    value: g,
+    required: v,
+    autoComplete: Je,
+    autoFocus: Ce,
+    value: m,
     defaultValue: L,
-    "aria-invalid": h ? !0 : void 0,
-    "aria-label": a["aria-label"] ?? (a["aria-labelledby"] ? void 0 : typeof r == "string" && r !== "" ? r : void 0),
-    "aria-describedby": [_ ? W : a["aria-describedby"], P ? te : void 0].filter(Boolean).join(" ") || void 0,
-    onChange: qe,
-    onFocus: Oe,
-    onBlur: et,
-    onKeyDown: a.onKeyDown || V ? (e) => {
-      V?.(e), e.defaultPrevented || a.onKeyDown?.(e);
+    "aria-invalid": p ? !0 : void 0,
+    "aria-label": l["aria-label"] ?? (l["aria-labelledby"] ? void 0 : typeof r == "string" && r !== "" ? r : void 0),
+    "aria-describedby": [P ? Q : l["aria-describedby"], te ? ee : void 0].filter(Boolean).join(" ") || void 0,
+    onChange: Xe,
+    onFocus: Ze,
+    onBlur: qe,
+    onKeyDown: l.onKeyDown || J ? (e) => {
+      J?.(e), e.defaultPrevented || l.onKeyDown?.(e);
     } : void 0
-  }, le = l(b.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", m ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : i ? l("w-full resize-none p-0 pl-0 pr-0 leading-[23px]", b["Input--multiline"]) : l("w-full", b["Input--singleLine"]), "disabled:text-delta-300", n && "text-delta-800", Pe), ht = !i && !m ? {
+  }, ie = s(x.Input, "peer border-0 bg-transparent text-base tracking-[0.00938em] text-delta-800 outline-none placeholder:text-delta-500", u ? "box-border h-8 min-w-[60px] flex-1 py-0 pl-0 pr-0 leading-[23px]" : i ? s("w-full resize-none p-0 pl-0 pr-0 leading-[23px]", x["Input--multiline"]) : s("w-full", x["Input--singleLine"]), "disabled:text-delta-300", n && "text-delta-800", Pe), ct = !i && !u ? {
     "data-start-adornment": S ? "true" : void 0,
-    "data-end-adornment": C || f ? "true" : void 0
+    "data-end-adornment": C || g ? "true" : void 0
   } : {};
-  return /* @__PURE__ */ p("div", {
-    ref: rt,
-    className: l("group relative min-w-0 flex-col", Fe),
-    onClick: Ee,
-    "data-field-width": J,
+  return /* @__PURE__ */ b("div", {
+    ref: st,
+    className: s("group relative min-w-0 flex-col", Re),
+    onClick: Be,
+    "data-field-width": Y,
     style: {
       display: "flex",
-      ...yt(J),
+      ...yt(Y),
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
       letterSpacing: "0.00938em",
-      ...v(Be),
-      ..._e
+      ...F(Fe),
+      ...we
     },
     children: [
-      r && !w && /* @__PURE__ */ o("div", {
-        className: l(bt({ disabled: d }), t?.inputLabel?.className),
+      r && !R && /* @__PURE__ */ o("div", {
+        className: s(bt({ disabled: d }), t?.inputLabel?.className),
         style: {
-          ...v(t?.inputLabel?.sx),
+          ...F(t?.inputLabel?.sx),
           ...t?.inputLabel?.style
         },
-        children: /* @__PURE__ */ p("label", {
-          htmlFor: K,
-          children: [r, H && /* @__PURE__ */ o("span", {
+        children: /* @__PURE__ */ b("label", {
+          htmlFor: z,
+          children: [r, v && /* @__PURE__ */ o("span", {
             "aria-hidden": "true",
             children: " *"
           })]
         })
       }),
-      /* @__PURE__ */ p("div", {
+      /* @__PURE__ */ b("div", {
         className: "relative overflow-visible",
-        children: [/* @__PURE__ */ p("div", {
-          className: l("relative flex", x && b.InputShell, i && "box-border items-center px-[14px] py-[16.5px]", m && l(b.AdornmentList, f && b["AdornmentList--endAdornment"]), n && "rounded bg-delta-50"),
-          ref: Ge,
-          onMouseDown: Je,
-          ...Qe,
-          style: ot,
-          "data-testid": m ? `${y}-adornment-list` : `${y}-shell`,
+        children: [/* @__PURE__ */ b("div", {
+          className: s("relative flex", f && x.InputShell, i && "box-border items-center px-[14px] py-[16.5px]", u && s(x.AdornmentList, g && x["AdornmentList--endAdornment"]), n && "rounded bg-delta-50"),
+          ref: Ke,
+          onMouseDown: Ye,
+          ...Ge,
+          style: tt,
+          "data-testid": u ? `${y}-adornment-list` : `${y}-shell`,
           children: [
             S && /* @__PURE__ */ o("span", {
-              className: l("items-center text-delta-500", m ? "contents" : "absolute left-3 flex"),
-              children: z
+              className: s("items-center text-delta-500", u ? "contents" : "absolute left-3 flex"),
+              children: W
             }),
             i ? /* @__PURE__ */ o("textarea", {
-              ...ie,
+              ...oe,
               ref: ne,
               "data-testid": y,
-              rows: I ?? k ?? 2,
-              className: le
+              rows: H ?? M ?? 2,
+              className: ie
             }) : /* @__PURE__ */ o("input", {
-              ...ie,
-              ...ht,
+              ...oe,
+              ...ct,
               ref: ne,
               "data-testid": y,
-              type: He,
-              className: le
+              type: Se,
+              className: ie
             }),
             C ? /* @__PURE__ */ o("button", {
               type: "button",
@@ -174,92 +174,82 @@ var Ot = ({ dataTest: y, label: r, labelPlacement: me = "above", value: g, defau
               "data-testid": `${y}-clear`,
               className: "asma-pressable absolute right-4 z-40 flex items-center justify-center rounded-full border-0 bg-transparent p-[2px] duration-300 hover:bg-gama-100",
               onClick: (e) => {
-                e.stopPropagation(), e.preventDefault(), A || q(!1), ve?.();
+                e.stopPropagation(), e.preventDefault(), A || Z(!1), Le?.();
               },
-              children: /* @__PURE__ */ o(pt, {
+              children: /* @__PURE__ */ o(mt, {
                 width: 18,
                 height: 18
               })
-            }) : f && /* @__PURE__ */ o("span", {
-              ref: X,
+            }) : g && /* @__PURE__ */ o("span", {
+              ref: V,
               className: "absolute inset-y-0 right-[14px] flex max-w-[calc(100%-28px)] items-center gap-1",
-              children: f
+              children: g
             }),
-            w ? /* @__PURE__ */ o("fieldset", {
+            R ? /* @__PURE__ */ o("fieldset", {
               "aria-hidden": !0,
-              className: de({
-                focused: N,
-                error: h,
+              className: se({
+                focused: I,
+                error: p,
                 disabled: d,
                 readOnly: n,
                 notched: !0
               }),
               children: /* @__PURE__ */ o("legend", {
-                className: vt(F),
-                children: /* @__PURE__ */ p("span", {
+                className: vt(w),
+                children: /* @__PURE__ */ b("span", {
                   className: "inline-block px-[5px]",
-                  children: [r, H && " *"]
+                  children: [r, v && " *"]
                 })
               })
             }) : /* @__PURE__ */ o("div", {
               "aria-hidden": !0,
-              className: de({
-                focused: N,
-                error: h,
+              className: se({
+                focused: I,
+                error: p,
                 disabled: d,
                 readOnly: n,
                 notched: !1
               })
             })
           ]
-        }), w && /* @__PURE__ */ p("label", {
-          htmlFor: K,
-          className: l(Lt({
-            shrink: F,
-            focused: N,
-            error: h,
+        }), R && /* @__PURE__ */ b("label", {
+          htmlFor: z,
+          className: s(Lt({
+            shrink: w,
+            focused: I,
+            error: p,
             disabled: d,
             readOnly: n,
-            size: we
+            size: Ne
           }), t?.inputLabel?.className),
           style: {
-            ...v(t?.inputLabel?.sx),
+            ...F(t?.inputLabel?.sx),
             ...t?.inputLabel?.style,
-            ...St(F)
+            ...St(w)
           },
-          children: [r, H && " *"]
+          children: [r, v && " *"]
         })]
       }),
-      P && R ? /* @__PURE__ */ p("div", {
-        className: "flex items-start justify-between gap-4",
-        children: [_ && /* @__PURE__ */ o(re, {
-          id: W,
-          role: oe,
-          error: h,
-          message: E,
-          hideErrorIcon: t?.formHelperText?.hideErrorIcon,
-          className: l("box-border min-w-0 flex-1 items-start", t?.formHelperText?.className),
-          style: v(t?.formHelperText?.sx)
-        }), /* @__PURE__ */ o(gt, {
-          id: te,
-          length: Ze,
-          limit: R,
-          locale: Le,
-          className: "ml-auto shrink-0 whitespace-nowrap pt-1"
-        })]
-      }) : _ && /* @__PURE__ */ o(re, {
-        ref: dt,
-        id: W,
-        role: oe,
-        error: h,
-        message: E,
+      P && /* @__PURE__ */ o(gt, {
+        ref: rt,
+        id: Q,
+        role: at,
+        error: p,
+        message: K,
         hideErrorIcon: t?.formHelperText?.hideErrorIcon,
-        className: l("mr-[14px] box-border items-start", t?.formHelperText?.className),
+        className: s("mr-[14px] box-border items-start", t?.formHelperText?.className),
         style: {
-          ...ct,
-          ...v(t?.formHelperText?.sx)
+          ...dt,
+          ...F(t?.formHelperText?.sx)
         }
-      })
+      }),
+      te && N ? /* @__PURE__ */ o(pt, {
+        id: ee,
+        length: Ve,
+        limit: N,
+        locale: be,
+        className: "pt-1"
+      }) : null
     ]
   });
 };

package/dist/components/inputs/textarea/StyledTextarea.js

@@ -1,72 +1,71 @@
-import { CharacterCounter as R } from "../../../helpers/CharacterCounter.js";
-import { useHelperSlot as U } from "../../../helpers/useHelperSlot.js";
-import { fieldWidthStyle as V } from "../field-styles.js";
+import { CharacterCounter as U } from "../../../helpers/CharacterCounter.js";
+import { useHelperSlot as V } from "../../../helpers/useHelperSlot.js";
+import { fieldWidthStyle as X } from "../field-styles.js";
 import t from "./StyledTextarea.module.js";
-import { useEffect as X, useId as m, useRef as Y } from "react";
-import { jsx as e, jsxs as Z } from "react/jsx-runtime";
-var nt = ({ id: A, variant: h = "active", label: s = "", labelClassName: M = "", description: n = "", reserveHelperText: F, value: a = "", minRows: r = 3, maxRows: i = 1 / 0, disabled: x, error: l, errorMessage: _, containerClassName: j = "", className: w = "", maxLength: B = 1 / 0, counter: C, refLink: E, dataTest: k, counterLimit: g, width: y = "full", locale: W, ...d }) => {
-  const q = Y(null), c = E ?? q, f = !!(C && g), u = m(), b = m(), z = m(), $ = A ?? z, I = l ? _ : n, { show: N, role: D } = U("StyledTextarea", l, I, F);
-  X(() => {
-    const o = c.current;
-    if (!o) return;
-    const p = window.getComputedStyle(o), v = parseFloat(p.lineHeight) || 24, T = parseFloat(p.paddingTop), H = parseFloat(p.paddingBottom);
-    o.style.height = "auto";
-    const K = o.scrollHeight - T - H, O = Math.max(1, Math.ceil(K / v)), Q = Math.min(Math.max(O, r), i);
-    o.style.height = `${Q * v + T + H}px`;
+import { useEffect as Y, useId as x, useRef as Z } from "react";
+import { jsx as e, jsxs as L } from "react/jsx-runtime";
+var it = ({ id: F, variant: s = "active", label: d = "", labelClassName: M = "", description: n = "", reserveHelperText: B, value: o = "", minRows: i = 3, maxRows: r = 1 / 0, disabled: y, error: a, errorMessage: _, containerClassName: j = "", className: w = "", maxLength: c = 1 / 0, counter: C, refLink: E, dataTest: k, counterLimit: R, width: g = "full", locale: W, ...f }) => {
+  const q = Z(null), p = E ?? q, m = R ?? (Number.isFinite(c) ? c : void 0), h = C !== !1 && !!m, b = x(), $ = x(), z = x(), v = F ?? z, I = a ? _ : n, { show: N, role: D } = V("StyledTextarea", a, I, B);
+  Y(() => {
+    const l = p.current;
+    if (!l) return;
+    const u = window.getComputedStyle(l), T = parseFloat(u.lineHeight) || 24, H = parseFloat(u.paddingTop), A = parseFloat(u.paddingBottom);
+    l.style.height = "auto";
+    const K = l.scrollHeight - H - A, O = Math.max(1, Math.ceil(K / T)), Q = Math.min(Math.max(O, i), r);
+    l.style.height = `${Q * T + H + A}px`;
   }, [
-    c,
-    a,
-    r,
+    p,
+    o,
     i,
-    f
-  ]), i < r && (r = i);
-  const G = l ? "error" : "active", S = l ? "error" : x ? "disabled" : "active", J = typeof s != "string" || s.trim() !== "" ? void 0 : typeof n == "string" && n.trim() !== "" ? n : d.placeholder;
-  return /* @__PURE__ */ Z("div", {
+    r,
+    h
+  ]), r < i && (i = r);
+  const G = a ? "error" : "active", S = a ? "error" : y ? "disabled" : "active", J = typeof d != "string" || d.trim() !== "" ? void 0 : typeof n == "string" && n.trim() !== "" ? n : f.placeholder;
+  return /* @__PURE__ */ L("div", {
     className: `relative flex flex-col gap-1 ${j}`,
     "data-testid": k,
-    "data-field-width": y,
-    style: V(y),
+    "data-field-width": g,
+    style: X(g),
     children: [
       /* @__PURE__ */ e("label", {
-        htmlFor: $,
+        htmlFor: v,
         className: `${t.label} ${t[S]} ${M}`,
-        children: s
+        children: d
       }),
       N && /* @__PURE__ */ e("span", {
-        id: u,
+        id: b,
         role: D,
         className: `${t.description} ${t[S]} min-h-[24px]`,
         children: I
       }),
-      h === "view_only" ? /* @__PURE__ */ e("div", {
+      s === "view_only" ? /* @__PURE__ */ e("div", {
         className: "pt-3 font-roboto text-base font-normal text-delta-700",
-        children: a
-      }) : h === "not_editable" ? /* @__PURE__ */ e("div", {
+        children: o
+      }) : s === "not_editable" ? /* @__PURE__ */ e("div", {
         className: "rounded bg-delta-50 p-3 font-roboto text-base font-normal text-delta-700",
-        children: a
+        children: o
       }) : /* @__PURE__ */ e("textarea", {
-        ...d,
-        "aria-describedby": [N ? u : null, f ? b : null].filter(Boolean).join(" ") || void 0,
-        "aria-invalid": l,
-        "aria-label": d["aria-label"] ?? J,
-        id: $,
-        ref: c,
+        ...f,
+        "aria-describedby": [N ? b : null, h ? $ : null].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": a,
+        "aria-label": f["aria-label"] ?? J,
+        id: v,
+        ref: p,
         className: `${t.textarea} ${t[G]} ${w}`,
         wrap: "soft",
-        value: a,
-        disabled: x,
-        maxLength: B
+        value: o,
+        disabled: y,
+        maxLength: c
       }),
-      f && /* @__PURE__ */ e(R, {
-        id: b,
-        length: a.length,
-        limit: g,
-        locale: W,
-        className: "self-end"
-      })
+      h && m && s === "active" ? /* @__PURE__ */ e(U, {
+        id: $,
+        length: o.length,
+        limit: m,
+        locale: W
+      }) : null
     ]
   });
 };
 export {
-  nt as StyledTextarea
+  it as StyledTextarea
 };

package/dist/src/components/inputs/input-field/StyledInputField.d.ts

@@ -44,7 +44,10 @@ export interface StyledInputFieldProps {
     expandHelperText?: boolean;
     /** Character limit; also readable from `slotProps.htmlInput.maxLength`. */
     maxLength?: number;
-    /** Shows the count against `maxLength` as the user types, for free text with a limit. */
+    /**
+     * Count against `maxLength`, on by default whenever the field has a limit (WID-12). Pass `false`
+     * for a fixed format such as a postal code, whose length the label or hint already states.
+     */
     counter?: boolean;
     /** Language of the counter text. */
     locale?: UiCoreLocale;

package/dist/src/helpers/CharacterCounter.d.ts

@@ -11,6 +11,7 @@ export interface CharacterCounterProps {
 }
 /**
  * The count of a free-text field with a character limit, such as *12 av 100 tegn* (field width
- * pattern WID-2, Q12), so typed text is never cut without notice.
+ * pattern WID-2, WID-12), so typed text is never cut without notice.
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#45907-218317
  */
 export declare const CharacterCounter: ({ id, length, limit, locale, className }: CharacterCounterProps) => JSX.Element;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.111.0",
+    "version": "3.112.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",