next-helios-fe 1.8.74 → 1.8.76

package/package.json

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

package/src/components/permission-table/index.tsx

@@ -14,6 +14,7 @@ interface PermissionTableProps {
     [key: string]: any;
   }[];
   options?: {
+    moduleHeaderName?: string;
     height?: "full" | "fit" | "20" | "40" | "80";
     border?: boolean;
   };
@@ -147,7 +148,7 @@ export const PermissionTable: React.FC<PermissionTableProps> = ({
         <thead className="sticky top-0 z-10">
           <tr className="bg-secondary-bg">
             <th className="sticky left-0 min-w-40 py-2 z-10 bg-secondary-bg font-medium">
-              Module
+              {options?.moduleHeaderName || "Module"}
             </th>
             {headerArr}
           </tr>

package/src/components/table/index.tsx

@@ -140,7 +140,14 @@ export const Table: TableComponentProps = ({
         data
           .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
           .sort((a, b) =>
-            (a.toString() || "").localeCompare(b.toString() || "")
+            (a === undefined
+              ? "undefined"
+              : a === null
+              ? "null"
+              : a.toString()
+            ).localeCompare(
+              b === undefined ? "undefined" : b === null ? "null" : b.toString()
+            )
           )
           .filter((value, index, self) => self.indexOf(value) === index)
           .map((value) => {
@@ -306,7 +313,18 @@ export const Table: TableComponentProps = ({
                           dataItem[item.key as keyof typeof dataItem]
                       )
                       ?.sort((a, b) =>
-                        (a.toString() || "").localeCompare(b.toString() || "")
+                        (a === undefined
+                          ? "undefined"
+                          : a === null
+                          ? "null"
+                          : a.toString()
+                        ).localeCompare(
+                          b === undefined
+                            ? "undefined"
+                            : b === null
+                            ? "null"
+                            : b.toString()
+                        )
                       )
                       ?.filter(
                         (value, index, self) => self.indexOf(value) === index
@@ -327,10 +345,16 @@ export const Table: TableComponentProps = ({
                               }
                             }}
                           >
-                            <div className="pointer-events-none">
+                            <div className="capitalize pointer-events-none">
                               <Form.Checkbox
                                 options={{ disableHover: true }}
-                                label={value.toString()}
+                                label={
+                                  value === undefined
+                                    ? "undefined"
+                                    : value === null
+                                    ? "null"
+                                    : value?.toString()
+                                }
                                 checked={categoryFilter.includes(value)}
                                 readOnly
                               />
@@ -449,7 +473,7 @@ export const Table: TableComponentProps = ({
           </td>
         )}
         {!options?.hideNumberColumn && (
-          <td className="sticky z-10 left-0 w-8 px-4 py-1.5 bg-secondary-bg text-center">
+          <td className="sticky left-0 w-8 px-4 py-1.5 bg-secondary-bg text-center">
             {(page - 1) * maxRow + index + 1}
           </td>
         )}
@@ -460,7 +484,7 @@ export const Table: TableComponentProps = ({
               return (
                 <td
                   key={headerItem.key}
-                  className="px-4 py-1.5 bg-secondary-bg whitespace-nowrap"
+                  className="px-4 py-1.5 bg-secondary-bg capitalize whitespace-nowrap"
                 >
                   {headerItem.render(item) || "-"}
                 </td>
@@ -473,7 +497,7 @@ export const Table: TableComponentProps = ({
                 >
                   <Tooltip
                     content={item[headerItem.key as keyof typeof item] || "-"}
-                    options={{ position: "top" }}
+                    options={{ position: "top", enableHover: true }}
                   >
                     <span className="px-4 py-1.5">
                       {item[headerItem.key as keyof typeof item] || "-"}
@@ -640,7 +664,7 @@ export const Table: TableComponentProps = ({
                             (page - 1) * maxRow +
                             filteredData?.indexOf(item) +
                             1
-                          ).toString(),
+                          )?.toString(),
                           [headerItem.title]:
                             item[headerItem.key as keyof typeof item],
                         };
@@ -810,7 +834,7 @@ export const Table: TableComponentProps = ({
                 { label: "50", value: "50" },
                 { label: "100", value: "100" },
               ]}
-              value={maxRow.toString()}
+              value={maxRow?.toString()}
               onChange={(e) => {
                 setMaxRow(Number(e.target.value));
                 setPage(1);

package/src/components/tooltip/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React, { useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
 
 interface TooltipProps {
   children: React.ReactNode;
@@ -184,51 +183,49 @@ export const Tooltip: React.FC<TooltipProps> = ({
   return (
     <div
       ref={wrapperRef}
-      className="relative"
+      className="group/tooltip"
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
       {children}
-      {isRendered &&
-        createPortal(
-          <div
-            ref={tooltipRef}
-            className={`absolute z-10 duration-200 transition-opacity ${
-              visible ? "" : "hidden pointer-events-none"
-            } ${options?.enableHover ? "" : "pointer-events-none"}`}
-            style={getTooltipPosition()}
-          >
-            {position === "bottom" && (
+      {isRendered && (
+        <div
+          ref={tooltipRef}
+          className={`absolute z-50 duration-200 transition-opacity hidden group-hover/tooltip:block ${
+            options?.enableHover ? "" : "pointer-events-none"
+          }`}
+          style={getTooltipPosition()}
+        >
+          {position === "bottom" && (
+            <div className="flex justify-center">
+              <div style={getTooltipArrowPosition()}></div>
+            </div>
+          )}
+          <div className="flex items-center">
+            {position === "right" && (
               <div className="flex justify-center">
                 <div style={getTooltipArrowPosition()}></div>
               </div>
             )}
-            <div className="flex items-center">
-              {position === "right" && (
-                <div className="flex justify-center">
-                  <div style={getTooltipArrowPosition()}></div>
-                </div>
-              )}
-              <div
-                className="w-fit px-3 py-1.5 rounded-md bg-black/75 text-sm text-white"
-                style={{ maxWidth: "50dvw" }}
-              >
-                {content}
-              </div>
-              {position === "left" && (
-                <div className="flex justify-center">
-                  <div style={getTooltipArrowPosition()}></div>
-                </div>
-              )}
+            <div
+              className="w-fit px-3 py-1.5 rounded-md bg-black/75 text-sm text-white text-wrap"
+              style={{ maxWidth: "50dvw" }}
+            >
+              {content}
             </div>
-            {position === "top" && (
+            {position === "left" && (
               <div className="flex justify-center">
                 <div style={getTooltipArrowPosition()}></div>
               </div>
             )}
-          </div>,
-          document.body
-        )}
+          </div>
+          {position === "top" && (
+            <div className="flex justify-center">
+              <div style={getTooltipArrowPosition()}></div>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };