next-helios-fe 1.8.87 → 1.8.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.87",
+  "version": "1.8.88",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/other/textarea.tsx

@@ -1,17 +1,19 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Tooltip } from "../../../components";
 import { Icon } from "@iconify/react";
 
 export interface TextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "rows"> {
   rows?: number;
-  maxRows?: number;
   label?: string;
   description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    autoGrow?: {
+      maxRows: number;
+    };
     disableResize?: boolean;
     hideInputDetail?: boolean;
   };
@@ -19,13 +21,13 @@ export interface TextareaProps
 
 export const Textarea: React.FC<TextareaProps> = ({
   rows,
-  maxRows,
   options,
   label,
   description,
   ...rest
 }) => {
-  const [tempRows, setTempRows] = useState<number>(rows || 10);
+  const mirrorInputRef = useRef<HTMLTextAreaElement>(null);
+  const [tempRows, setTempRows] = useState<number>(1);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -35,36 +37,56 @@ export const Textarea: React.FC<TextareaProps> = ({
       : "py-1.5";
 
   useEffect(() => {
-    if (maxRows) {
-      if (rest.value && (rest.value as string)?.includes("\n")) {
-        if (((rest.value as string).match(/\n/g) || []).length < maxRows) {
-          setTempRows(((rest.value as string).match(/\n/g) || []).length + 1);
-        }
+    if (options?.autoGrow) {
+      if (
+        ((mirrorInputRef.current?.scrollHeight || 0) -
+          (options?.height === "short"
+            ? 4
+            : options?.height === "high"
+            ? 8
+            : 12)) /
+          24 <=
+        options?.autoGrow.maxRows
+      ) {
+        setTempRows(
+          ((mirrorInputRef.current?.scrollHeight || 0) -
+            (options?.height === "short"
+              ? 4
+              : options?.height === "high"
+              ? 8
+              : 12)) /
+            24
+        );
       } else {
-        setTempRows(rows || 10);
+        setTempRows(options?.autoGrow.maxRows);
       }
     }
-  }, [rows, maxRows, rest.value]);
+  }, [
+    options?.autoGrow,
+    mirrorInputRef.current?.scrollHeight,
+    rest.value,
+    options?.height,
+  ]);
 
   return (
-    <label className={`flex flex-col gap-2 ${width}`}>
+    <label className={`relative flex flex-col gap-2 ${width}`}>
       {(label ||
         (!options?.hideInputDetail && (rest.maxLength || description))) && (
         <div className="flex items-center gap-2">
           {label && (
             <span
-              className={`text-sm select-none ${
+              className={`select-none text-sm ${
                 rest.required &&
-                "after:content-['*'] after:ml-1 after:text-danger"
+                "after:ml-1 after:text-danger after:content-['*']"
               }`}
             >
               {label}
             </span>
           )}
           {!options?.hideInputDetail && (
-            <div className="flex-1 flex justify-end items-center gap-2">
+            <div className="flex flex-1 items-center justify-end gap-2">
               {rest.maxLength && (
-                <span className="text-sm select-none">
+                <span className="select-none text-sm">
                   {rest.value ? (rest.value as string).length : 0}/
                   {rest.maxLength}
                 </span>
@@ -82,12 +104,20 @@ export const Textarea: React.FC<TextareaProps> = ({
         </div>
       )}
       <textarea
-        rows={tempRows}
-        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${
+        rows={options?.autoGrow ? tempRows : rows || 10}
+        className={`w-full rounded-md border border-default bg-secondary-bg px-4 placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:shadow focus:shadow-primary focus:outline-none focus:ring-1 focus:ring-primary focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled ${
           options?.disableResize && "resize-none"
         } ${height}`}
         {...rest}
       />
+      <textarea
+        ref={mirrorInputRef}
+        rows={1}
+        className={`absolute w-full rounded-md border border-default bg-secondary-bg px-4 pointer-events-none opacity-0 placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:shadow focus:shadow-primary focus:outline-none focus:ring-1 focus:ring-primary focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled ${height}`}
+        readOnly
+        tabIndex={-1}
+        value={rest.value}
+      />
     </label>
   );
 };