asma-ui-core 3.101.7 → 3.102.0

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

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

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

@@ -1,9 +1,10 @@
-var n = "_Input_1focb_1", t = "_InputShell_1focb_8", e = "_AdornmentList_1focb_36", _ = {
-  Input: n,
-  InputShell: t,
-  "Input--singleLine": "_Input--singleLine_1focb_17",
+var t = "_Input_17evt_1", n = "_InputShell_17evt_8", e = "_AdornmentList_17evt_64", _ = {
+  Input: t,
+  InputShell: n,
+  "Input--singleLine": "_Input--singleLine_17evt_17",
+  "Input--multiline": "_Input--multiline_17evt_36",
   AdornmentList: e,
-  "AdornmentList--endAdornment": "_AdornmentList--endAdornment_1focb_46"
+  "AdornmentList--endAdornment": "_AdornmentList--endAdornment_17evt_74"
 };
 export {
   _ as default

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

@@ -87,8 +87,9 @@ export interface StyledInputFieldProps {
  * own focus/value state to drive the shared field styling ([[field-styles]]); supports multiline,
  * start/end adornments, an optional clear button, and error/helper text. Public props preserved
  *
- * ponytail: `variant` is accepted but always renders outlined, and multiline uses fixed `rows`
- * (no auto-grow to `maxRows`) — known ceilings; Chromatic in CI is the visual gate.
+ * ponytail: `variant` is accepted but always renders outlined — a known ceiling; Chromatic in CI is
+ * the visual gate. Multiline auto-grows between `minRows` and `maxRows` (a fixed `rows` pins the height)
+ * and scrolls once the content exceeds the cap; `readOnly` ignores the cap and shows the whole value.
  */
 export declare const StyledInputField: ({ dataTest, label, value, defaultValue, onChange, onBlur, onFocus, error, helperText, reserveHelperText, expandHelperText, disabled, readOnly, required, allowClear, onClear, type, placeholder, name, id, autoComplete, autoFocus, multiline, rows, minRows, maxRows, size, fullWidth, className, style, sx, inputRef, slotProps, InputProps, onKeyDown, onClick, variant: _variant, }: StyledInputFieldProps) => JSX.Element;
 export {};

package/package.json

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