next-helios-fe 1.8.82 → 1.8.84

package/package.json

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

package/src/components/chip/index.tsx

@@ -10,9 +10,15 @@ interface ChipProps {
     bordered?: boolean;
     borderRadius?: "basic" | "full";
   };
+  onRemove?: () => void;
 }
 
-export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
+export const Chip: React.FC<ChipProps> = ({
+  label,
+  icon,
+  options,
+  onRemove,
+}) => {
   const variant =
     options?.bordered !== true
       ? options?.variant === "secondary"
@@ -35,13 +41,37 @@ export const Chip: React.FC<ChipProps> = ({ label, icon, options }) => {
       : "border border-primary text-primary";
   const borderRadius =
     options?.borderRadius === "full" ? "rounded-full" : "rounded-md";
+  const removeButton =
+    options?.variant === "secondary"
+      ? "text-secondary hover:text-secondary-dark"
+      : options?.variant === "success"
+      ? "text-success hover:text-success-dark"
+      : options?.variant === "warning"
+      ? "text-warning hover:text-warning-dark"
+      : options?.variant === "danger"
+      ? "text-danger hover:text-danger-dark"
+      : "text-primary hover:text-primary-dark";
 
   return (
     <div
-      className={`flex items-center gap-1.5 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
+      className={`flex items-center gap-3 w-fit px-3 py-1 font-medium select-none ${variant} ${borderRadius}`}
     >
-      {icon && <Icon icon={icon} className="text-lg" />}
-      <span className="text-sm">{label}</span>
+      <div className="flex items-center gap-1.5">
+        {icon && <Icon icon={icon} className="text-lg" />}
+        <span className="text-sm">{label}</span>
+      </div>
+      {onRemove && (
+        <div
+          className={`cursor-pointer active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100 ${removeButton}`}
+          onClick={() => {
+            if (onRemove) {
+              onRemove();
+            }
+          }}
+        >
+          <Icon icon="pajamas:close" />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,25 +1,31 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Tooltip } from "../../../components";
 import { Icon } from "@iconify/react";
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "rows"> {
+  rows?: number;
+  maxRows?: number;
   label?: string;
   description?: string;
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    disableResize?: boolean;
     hideInputDetail?: boolean;
   };
 }
 
 export const Textarea: React.FC<TextareaProps> = ({
+  rows,
+  maxRows,
   options,
   label,
   description,
   ...rest
 }) => {
+  const [tempRows, setTempRows] = useState<number>(rows || 10);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -28,6 +34,16 @@ export const Textarea: React.FC<TextareaProps> = ({
       ? "py-2"
       : "py-1.5";
 
+  useEffect(() => {
+    if (maxRows && 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);
+      }
+    } else {
+      setTempRows(1);
+    }
+  }, [maxRows, rest.value]);
+
   return (
     <label className={`flex flex-col gap-2 ${width}`}>
       {(label ||
@@ -64,8 +80,10 @@ export const Textarea: React.FC<TextareaProps> = ({
         </div>
       )}
       <textarea
-        rows={rest.rows || 10}
-        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 ${height}`}
+        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 ${
+          options?.disableResize && "resize-none"
+        } ${height}`}
         {...rest}
       />
     </label>

package/src/components/table/index.tsx

@@ -46,7 +46,7 @@ interface TableProps {
       };
       customTool?: {
         icon: string;
-        tooltip?: string;
+        tooltip: string;
         variant: "primary" | "secondary" | "success" | "warning" | "danger";
         show?: boolean;
         onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -548,7 +548,7 @@ export const Table: TableComponentProps = ({
                     : "bg-primary hover:bg-primary-dark";
 
                 if (item.show !== false) {
-                  return item?.tooltip ? (
+                  return (
                     <Tooltip
                       key={index}
                       content={item.tooltip || "custom tool"}
@@ -563,16 +563,6 @@ export const Table: TableComponentProps = ({
                         <Icon icon={item.icon} className="text-2xl" />
                       </button>
                     </Tooltip>
-                  ) : (
-                    <button
-                      type="button"
-                      className={`rounded-full p-1.5 text-white ${variant}`}
-                      onClick={(e) => {
-                        item.onClick && item.onClick(e);
-                      }}
-                    >
-                      <Icon icon={item.icon} className="text-2xl" />
-                    </button>
                   );
                 }
               })}