@mpen/react-basic-inputs 0.1.5 → 0.1.7

package/dist/bundle.cjs

@@ -215,35 +215,43 @@ function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
     });
 }
 
-const TextArea = React.forwardRef((function TextArea({onInput, style, ...rest}, fwdRef) {
+const TextArea = React.forwardRef((function TextArea({onInput, style, initialHeight = "auto", ...rest}, fwdRef) {
     const ref = React.useRef(null);
-    const [height, setHeight] = React.useState("auto");
-    const adjustHeight = () => {
+    const [height, setHeight] = React.useState(initialHeight);
+    const adjustHeight = React.useCallback((() => {
         const textarea = ref.current;
         if (!textarea) return;
-        textarea.style.height = "auto";
+        textarea.style.height = initialHeight;
         const newHeight = `${textarea.scrollHeight}px`;
         setHeight(newHeight);
         textarea.style.height = newHeight;
-    };
+    }), [ initialHeight ]);
     React.useImperativeHandle(fwdRef, (() => ({
         element: ref.current,
-        resize: adjustHeight
-    })), [ setHeight, ref.current ]);
+        adjustHeight
+    })), [ adjustHeight ]);
     const input = useEventHandler((ev => {
         adjustHeight();
         onInput?.(ev);
     }));
     React.useLayoutEffect((() => {
         adjustHeight();
-    }), []);
+        const textarea = ref.current;
+        if (!textarea) return;
+        const resizeObserver = new ResizeObserver((entries => {
+            adjustHeight();
+        }));
+        resizeObserver.observe(textarea);
+        return () => {
+            resizeObserver.unobserve(textarea);
+        };
+    }), [ adjustHeight ]);
     return jsxRuntime.jsx("textarea", {
-        rows: 1,
         ...rest,
         style: {
-            ...style,
             overflow: "hidden",
             resize: "none",
+            ...style,
             height
         },
         onInput: input,

package/dist/bundle.mjs

@@ -213,35 +213,43 @@ function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
     });
 }
 
-const TextArea = forwardRef((function TextArea({onInput, style, ...rest}, fwdRef) {
+const TextArea = forwardRef((function TextArea({onInput, style, initialHeight = "auto", ...rest}, fwdRef) {
     const ref = useRef(null);
-    const [height, setHeight] = useState("auto");
-    const adjustHeight = () => {
+    const [height, setHeight] = useState(initialHeight);
+    const adjustHeight = useCallback((() => {
         const textarea = ref.current;
         if (!textarea) return;
-        textarea.style.height = "auto";
+        textarea.style.height = initialHeight;
         const newHeight = `${textarea.scrollHeight}px`;
         setHeight(newHeight);
         textarea.style.height = newHeight;
-    };
+    }), [ initialHeight ]);
     useImperativeHandle(fwdRef, (() => ({
         element: ref.current,
-        resize: adjustHeight
-    })), [ setHeight, ref.current ]);
+        adjustHeight
+    })), [ adjustHeight ]);
     const input = useEventHandler((ev => {
         adjustHeight();
         onInput?.(ev);
     }));
     useLayoutEffect((() => {
         adjustHeight();
-    }), []);
+        const textarea = ref.current;
+        if (!textarea) return;
+        const resizeObserver = new ResizeObserver((entries => {
+            adjustHeight();
+        }));
+        resizeObserver.observe(textarea);
+        return () => {
+            resizeObserver.unobserve(textarea);
+        };
+    }), [ adjustHeight ]);
     return jsx("textarea", {
-        rows: 1,
         ...rest,
         style: {
-            ...style,
             overflow: "hidden",
             resize: "none",
+            ...style,
             height
         },
         onInput: input,

package/dist/components/TextArea.d.ts

@@ -2,7 +2,13 @@
 import { HtmlTextAreaElement, OverrideProps, VoidFn } from '../types/utility';
 export type TextAreaRef = {
     element: HtmlTextAreaElement;
-    resize: VoidFn;
+    adjustHeight: VoidFn;
 };
-export type TextAreaProps = OverrideProps<'textarea', {}>;
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, never> & import("react").RefAttributes<TextAreaRef>>;
+export type TextAreaProps = OverrideProps<'textarea', {
+    /** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
+    initialHeight?: string;
+}>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "initialHeight"> & {
+    /** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
+    initialHeight?: string;
+} & import("react").RefAttributes<TextAreaRef>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpen/react-basic-inputs",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "packageManager": "yarn@3.5.0",
   "exports": {
     ".": {