next-helios-fe 1.8.87 → 1.8.89

package/package.json

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

package/src/components/dropdown/item.tsx

@@ -25,7 +25,7 @@ export const Item: React.FC<ItemProps> = ({
           : `disabled:text-disabled ${
               as === "title" ? "" : "hover:bg-secondary-light"
             }`
-      }`}
+      } outline-0`}
       disabled={active ? true : (disabled || as === "title") ?? false}
       onClick={onClick}
     >

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

@@ -11,6 +11,9 @@ export interface MultipleSelectProps
   menus: {
     label: string;
     value: string;
+    variant?: "button" | "title";
+    disabled?: boolean;
+    disableUnselect?: boolean;
     [key: string]: any;
   }[];
   label?: string;
@@ -126,6 +129,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
           </div>
         )}
         <div className="relative flex items-center">
+          <input
+            ref={inputRef}
+            type="text"
+            className="absolute bottom-0 -z-10 w-full border-0 rounded-md focus:ring-0"
+            disabled={disabled ?? false}
+          />
           <div
             ref={fakeInputRef}
             className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
@@ -187,12 +196,6 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               </div>
             )}
           </div>
-          <input
-            ref={inputRef}
-            type="text"
-            className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
-            disabled={disabled ?? false}
-          />
           <div
             className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
             style={{ width: itemContainerRef.current?.clientWidth }}
@@ -202,34 +205,38 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 <div
                   key={item}
                   className={`flex items-center gap-2 px-2 py-0.5 rounded-md text-white select-none cursor-default pointer-events-auto ${
-                    disabled ? "bg-secondary" : "bg-primary"
+                    disabled ||
+                    menus.find((i) => i.value === item)?.disableUnselect
+                      ? "bg-secondary"
+                      : "bg-primary"
                   }`}
                 >
                   <span>{menus.find((i) => i.value === item)?.label}</span>
-                  <div
-                    className="cursor-pointer active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100"
+                  <button
+                    disabled={
+                      disabled ||
+                      menus.find((i) => i.value === item)?.disableUnselect
+                    }
                     onClick={() => {
-                      if (!disabled) {
-                        setTempValue(tempValue.filter((i) => i !== item));
-                        if (onChange) {
-                          onChange({
-                            target: {
-                              value: tempValue.filter((i) => i !== item),
-                            },
-                          } as any);
-                        }
-                        if (onRemove) {
-                          onRemove({
-                            target: {
-                              value: item,
-                            },
-                          });
-                        }
+                      setTempValue(tempValue.filter((i) => i !== item));
+                      if (onChange) {
+                        onChange({
+                          target: {
+                            value: tempValue.filter((i) => i !== item),
+                          },
+                        } as any);
+                      }
+                      if (onRemove) {
+                        onRemove({
+                          target: {
+                            value: item,
+                          },
+                        });
                       }
                     }}
                   >
                     <Icon icon="pajamas:close" />
-                  </div>
+                  </button>
                 </div>
               );
             })}
@@ -273,6 +280,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                     active={
                       tempValue?.find((i) => i === item.value) ? true : false
                     }
+                    as={item.variant || "button"}
+                    disabled={item.disabled ?? false}
                     onClick={() => {
                       setTempValue([...tempValue, item.value]);
                       if (onChange) {

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