@alxgrn/telefrag-ui 0.0.50 → 0.0.51

package/dist/components/form/input/Input.d.ts

@@ -13,6 +13,7 @@ export type InputProps = {
     limit?: number | null;
     rows?: number | null;
     autoFocus?: boolean;
+    autoGrow?: boolean;
 };
 declare const Input: FC<InputProps>;
 export default Input;

package/dist/components/form/input/Input.js

@@ -1,64 +1,73 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import C from "../label/Label.js";
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useRef as j, useEffect as m } from "react";
+import E from "../label/Label.js";
 import '../../../assets/Input.css';/* empty css                      */
-const I = ({
-  id: s,
-  type: e = "text",
-  value: t,
-  onChange: x,
-  label: m,
-  placeholder: n,
+const z = ({
+  id: i,
+  type: t = "text",
+  value: n,
+  onChange: p,
+  label: b,
+  placeholder: c,
   rows: l = 5,
-  top: p,
-  bottom: h,
-  autoFocus: u = !1,
-  required: f = !1,
-  disabled: o = !1,
-  limit: i
+  top: v,
+  bottom: C,
+  autoFocus: f = !1,
+  autoGrow: s = !1,
+  required: u = !1,
+  disabled: a = !1,
+  limit: g
 }) => {
-  const g = () => !!(f && !t.trim().length), c = () => {
-    if (g()) return {
+  const r = j(null);
+  m(() => {
+    !s || !r.current || (r.current.style.minHeight = `calc(${l} * var(--alxgrn-font-size) * var(--alxgrn-line-height))`);
+  }, [l, r, s]), m(() => {
+    !s || !r.current || (r.current.style.height = "0px", r.current.style.height = r.current.scrollHeight + "px", r.current.style.overflow = "hidden");
+  }, [s, n, r]);
+  const h = () => !!(u && !n.trim().length), x = () => {
+    if (h()) return {
       caretColor: "var(--alxgrn-input-caret-error)",
       borderColor: "var(--alxgrn-input-border-error)",
       backgroundColor: "var(--alxgrn-input-bg-error)"
     };
-  }, d = (r) => {
-    i && (r = r.substring(0, i)), x(r);
+  }, d = (e) => {
+    g && (e = e.substring(0, g)), p(e);
   };
-  return /* @__PURE__ */ a("div", { className: "FormItem", children: /* @__PURE__ */ b(
-    C,
+  return /* @__PURE__ */ o("div", { className: "FormItem", children: /* @__PURE__ */ y(
+    E,
     {
-      top: p,
-      bottom: h,
-      label: m,
-      required: f,
-      disabled: o,
-      error: g(),
+      top: v,
+      bottom: C,
+      label: b,
+      required: u,
+      disabled: a,
+      error: h(),
       children: [
-        (e === "text" || e === "password") && /* @__PURE__ */ a(
+        (t === "text" || t === "password") && /* @__PURE__ */ o(
           "input",
           {
-            id: s,
-            type: e,
-            value: t,
-            onChange: (r) => d(r.target.value),
-            placeholder: n ?? void 0,
-            style: c(),
-            disabled: !!o,
-            autoFocus: !!u
+            id: i,
+            type: t,
+            value: n,
+            onChange: (e) => d(e.target.value),
+            placeholder: c ?? void 0,
+            style: x(),
+            disabled: !!a,
+            autoFocus: !!f
           }
         ),
-        e === "textarea" && /* @__PURE__ */ a(
+        t === "textarea" && /* @__PURE__ */ o(
           "textarea",
           {
-            id: s,
+            id: i,
+            ref: r,
             rows: l || 5,
-            value: t,
-            onChange: (r) => d(r.target.value),
-            placeholder: n ?? void 0,
-            style: c(),
-            disabled: !!o,
-            autoFocus: !!u
+            value: n,
+            onChange: (e) => d(e.target.value),
+            placeholder: c ?? void 0,
+            style: x(),
+            disabled: !!a,
+            autoFocus: !!f
           }
         )
       ]
@@ -66,5 +75,5 @@ const I = ({
   ) });
 };
 export {
-  I as default
+  z as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",