@tedi-design-system/react 17.0.0-rc.4 → 17.0.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.0.0-rc.4",
+  "version": "17.0.0-rc.5",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/form/textarea/textarea.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),N=require("../textfield/textfield.cjs.js"),l=require("./textarea.module.scss.cjs.js"),x=r.forwardRef((h,m)=>{const{className:f,helper:n=[],characterLimit:t,onChange:e,onChangeEvent:s,value:a,defaultValue:p,...g}=h,[u,y]=r.useState(p??""),A=r.useCallback(o=>{!a&&!(e||s)&&y(o),e==null||e(o)},[a,e,s]),c=r.useMemo(()=>a??u,[a,u]),i=c.length,C=t?`${i}/${t}`:"",T=[...Array.isArray(n)?n:[n],...t?[{type:i>t?"error":"hint",text:C,position:"right",className:d.default(l.default["tedi-textarea__character-count"])}]:[]];return q.jsx(N.TextField,{...g,ref:m,"data-name":"textarea",inputClassName:l.default["tedi-textarea__input"],isTextArea:!0,className:d.default(l.default["tedi-textarea"],f),value:c,onChange:A,onChangeEvent:s,helper:T})});x.displayName="TextArea";exports.TextArea=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),M=a.forwardRef((N,o)=>{const{className:_,helper:p=[],characterLimit:s,onChange:n,onChangeEvent:g,value:l,defaultValue:b,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:H="7.5rem",maxHeight:i,...q}=N,[T,F]=a.useState(b??""),c=a.useRef(null),[v,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&F(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const S=parseFloat(f.paddingTop),A=parseFloat(f.paddingBottom),B=e.scrollHeight-S-A;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const R=`${x*h+S+A}px`;e.style.height=R,E(R),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...i?{maxHeight:i}:{},overflow:"hidden",height:v}}:{style:{height:H,...i?{maxHeight:i}:{},overflow:"auto"}},[t,u,i,H,v]),C=m.length,I=s?`${C}/${s}`:"",V=[...Array.isArray(p)?p:[p],...s?[{type:C>s?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...q,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],_),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});M.displayName="TextArea";exports.TextArea=M;

package/src/tedi/components/form/textarea/textarea.d.ts

@@ -5,6 +5,35 @@ export interface TextAreaProps extends TextFieldProps {
      * Maximum number of characters allowed in the textarea.
      */
     characterLimit?: number;
+    /**
+     * Enable automatic height adjustment based on content.
+     * @default false
+     */
+    autoGrow?: boolean;
+    /**
+     * Minimum number of rows (only used when autoGrow = true).
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows before scrolling (only used when autoGrow = true).
+     * @default 12
+     */
+    maxRows?: number;
+    /**
+     * Fixed height for the textarea (e.g. '200px', '12rem', 240).
+     * Ignored when autoGrow = true.
+     *
+     * @default 7.5rem
+     */
+    height?: string | number;
+    /**
+     * Maximum height of the textarea.
+     *
+     * - When `autoGrow` is enabled, this limits how tall the textarea can grow.
+     * - When `autoGrow` is disabled, this limits the fixed height.
+     */
+    maxHeight?: string | number;
 }
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextFieldForwardRef>>;
 export default TextArea;

package/src/tedi/components/form/textarea/textarea.es.js

@@ -1,51 +1,97 @@
-import { jsx as A } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import n, { forwardRef as g } from "react";
-import { TextField as T } from "../textfield/textfield.es.js";
-import o from "./textarea.module.scss.es.js";
-const v = g((p, h) => {
+import { jsx as q } from "react/jsx-runtime";
+import w from "../../../../../external/classnames/index.es.js";
+import a, { forwardRef as G, useRef as O, useEffect as R } from "react";
+import { TextField as P } from "../textfield/textfield.es.js";
+import p from "./textarea.module.scss.es.js";
+const Y = G((S, r) => {
   const {
-    className: x,
-    helper: r = [],
-    characterLimit: t,
-    onChange: e,
-    onChangeEvent: s,
-    value: a,
-    defaultValue: d,
-    ...f
-  } = p, [l, C] = n.useState(d ?? ""), N = n.useCallback(
-    (m) => {
-      !a && !(e || s) && C(m), e == null || e(m);
+    className: F,
+    helper: f = [],
+    characterLimit: i,
+    onChange: s,
+    onChangeEvent: g,
+    value: l,
+    defaultValue: M,
+    autoGrow: e = !1,
+    minRows: c = 3,
+    maxRows: H = 12,
+    height: y = "7.5rem",
+    maxHeight: n,
+    ...b
+  } = S, [v, k] = a.useState(M ?? ""), u = O(null), [C, z] = a.useState("auto"), E = a.useCallback(
+    (t) => {
+      !l && !(s || g) && k(t), s == null || s(t);
     },
-    [a, e, s]
-  ), c = n.useMemo(() => a ?? l, [a, l]), i = c.length, _ = t ? `${i}/${t}` : "", y = [
-    ...Array.isArray(r) ? r : [r],
-    ...t ? [
+    [l, s, g]
+  ), x = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
+    if (!e || !u.current) return;
+    const t = u.current, L = t.style.overflow;
+    t.style.overflow = "hidden";
+    const h = window.getComputedStyle(t);
+    let m = parseFloat(h.lineHeight);
+    isNaN(m) && (m = (parseFloat(h.fontSize) || 16) * 1.5);
+    const N = parseFloat(h.paddingTop), _ = parseFloat(h.paddingBottom), j = t.scrollHeight - N - _;
+    let d = Math.ceil(j / m);
+    d = Math.min(Math.max(d, c), H);
+    const A = `${d * m + N + _}px`;
+    t.style.height = A, z(A), t.style.overflow = L, t.style.overflowY = t.scrollHeight > t.clientHeight ? "auto" : "hidden";
+  }, [e, c, H]);
+  R(() => {
+    e && requestAnimationFrame(() => {
+      o();
+    });
+  }, [x, e, o]), R(() => {
+    e && u.current && o();
+  }, [e, o]);
+  const I = a.useCallback(
+    (t) => {
+      r && (typeof r == "function" ? r(t) : r.current = t), t != null && t.input && t.input instanceof HTMLTextAreaElement && (u.current = t.input, e && setTimeout(o, 0));
+    },
+    [r, e, o]
+  ), V = a.useMemo(() => e ? {
+    rows: c,
+    style: {
+      ...n ? { maxHeight: n } : {},
+      overflow: "hidden",
+      height: C
+    }
+  } : {
+    style: {
+      height: y,
+      ...n ? { maxHeight: n } : {},
+      overflow: "auto"
+    }
+  }, [e, c, n, y, C]), T = x.length, $ = i ? `${T}/${i}` : "", B = [
+    ...Array.isArray(f) ? f : [f],
+    ...i ? [
       {
-        type: i > t ? "error" : "hint",
-        text: _,
+        type: T > i ? "error" : "hint",
+        text: $,
         position: "right",
-        className: u(o["tedi-textarea__character-count"])
+        className: w(p["tedi-textarea__character-count"])
       }
     ] : []
   ];
-  return /* @__PURE__ */ A(
-    T,
+  return /* @__PURE__ */ q(
+    P,
     {
-      ...f,
-      ref: h,
+      ...b,
+      ref: I,
       "data-name": "textarea",
-      inputClassName: o["tedi-textarea__input"],
+      inputClassName: w(p["tedi-textarea__input"], {
+        [p["tedi-textarea__input--auto-grow"]]: e
+      }),
       isTextArea: !0,
-      className: u(o["tedi-textarea"], x),
-      value: c,
-      onChange: N,
-      onChangeEvent: s,
-      helper: y
+      className: w(p["tedi-textarea"], F),
+      value: x,
+      onChange: E,
+      onChangeEvent: g,
+      helper: B,
+      input: V
     }
   );
 });
-v.displayName = "TextArea";
+Y.displayName = "TextArea";
 export {
-  v as TextArea
+  Y as TextArea
 };

package/src/tedi/components/form/textarea/textarea.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textarea__input":"tedi-textarea__input-8c740e37","tedi-textarea__character-count":"tedi-textarea__character-count-c5b62b38"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-textarea__input":"tedi-textarea__input-8c740e37","tedi-textarea__input--auto-grow":"tedi-textarea__input--auto-grow-dddcdb8a","tedi-textarea__character-count":"tedi-textarea__character-count-c5b62b38"};exports.default=t;

package/src/tedi/components/form/textarea/textarea.module.scss.es.js

@@ -1,5 +1,6 @@
 const t = {
   "tedi-textarea__input": "tedi-textarea__input-8c740e37",
+  "tedi-textarea__input--auto-grow": "tedi-textarea__input--auto-grow-dddcdb8a",
   "tedi-textarea__character-count": "tedi-textarea__character-count-c5b62b38"
 };
 export {