next-helios-fe 1.8.86 → 1.8.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.86",
+  "version": "1.8.88",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,7 +39,7 @@
     "@iconify/react": "^5.0.1",
     "dayjs": "^1.11.11",
     "flowbite-react": "^0.10.1",
-    "next": "14.2.4",
+    "next": "^14.2.4",
     "postcss": "^8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/content-container/wizard/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Icon } from "@iconify/react";
 import { Window, type WindowProps } from "./window";
 
@@ -48,35 +48,25 @@ export const Wizard: WizardComponent = ({
   });
   const [activeTab, setActiveTab] = useState(0);
 
-  const handleOnPreviousClick = () => {
-    if (activeTab - 1 === 0) {
+  useEffect(() => {
+    if (activeTab === 0) {
       wizardNavigationRef.current?.scrollTo({
         left: 0,
         behavior: "smooth",
       });
     } else {
-      document.getElementById(`wizard-tab-${activeTab - 1}`)?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center",
-      });
-    }
-  };
-
-  const handleOnNextClick = () => {
-    if (activeTab + 1 === childrenList.length) {
       wizardNavigationRef.current?.scrollTo({
-        left: wizardNavigationRef.current.scrollWidth,
-        behavior: "smooth",
-      });
-    } else {
-      document.getElementById(`wizard-tab-${activeTab + 1}`)?.scrollIntoView({
+        left: Array.from({ length: activeTab })
+          .map((_, index) => {
+            return (
+              document.getElementById(`wizard-tab-${index}`)?.offsetWidth || 0
+            );
+          })
+          .reduce((acc, cur) => acc + cur, 0),
         behavior: "smooth",
-        block: "nearest",
-        inline: "center",
       });
     }
-  };
+  }, [activeTab]);
 
   return (
     <div className="flex flex-col gap-8 h-full overflow-hidden">
@@ -210,7 +200,6 @@ export const Wizard: WizardComponent = ({
           }`}
           disabled={activeTab === 0}
           onClick={() => {
-            handleOnPreviousClick();
             onPreviousClick && onPreviousClick();
 
             if (onChangeTab) {
@@ -254,7 +243,6 @@ export const Wizard: WizardComponent = ({
             if (options?.customNextButton?.onClick) {
               options.customNextButton.onClick();
             } else {
-              handleOnNextClick();
               onNextClick && onNextClick();
 
               if (onChangeTab) {

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>
   );
 };

package/src/components/tooltip/index.tsx

@@ -202,7 +202,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
         createPortal(
           <div
             ref={tooltipRef}
-            className={`absolute z-50 max-w-dvw max-h-dvh overflow-hidden duration-200 transition-opacity ${
+            className={`fixed z-50 max-w-dvw max-h-dvh overflow-hidden duration-200 transition-opacity ${
               visible ? "opacity-100" : "opacity-0 pointer-events-none"
             } ${options?.enableHover ? "" : "pointer-events-none"}`}
             style={getTooltipPosition()}