next-helios-fe 1.8.78 → 1.8.79

package/package.json

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

package/src/components/table/index.tsx

@@ -493,13 +493,13 @@ export const Table: TableComponentProps = ({
               return (
                 <td
                   key={headerItem.key}
-                  className="max-w-60 bg-secondary-bg truncate whitespace-nowrap"
+                  className="max-w-60 px-4 py-1.5 bg-secondary-bg truncate whitespace-nowrap"
                 >
                   <Tooltip
                     content={item[headerItem.key as keyof typeof item] || "-"}
                     options={{ position: "top" }}
                   >
-                    <span className="px-4 py-1.5">
+                    <span>
                       {item[headerItem.key as keyof typeof item] || "-"}
                     </span>
                   </Tooltip>

package/src/components/tooltip/index.tsx

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useRef, useEffect } from "react";
+import React from "react";
+import { Tooltip as Tp } from "flowbite-react";
 
 interface TooltipProps {
   children: React.ReactNode;
@@ -15,217 +16,23 @@ export const Tooltip: React.FC<TooltipProps> = ({
   content,
   options,
 }) => {
-  const [isRendered, setIsRendered] = useState(false);
-  const [visible, setVisible] = useState(false);
-  const [position, setPosition] = useState(options?.position ?? "right");
-  const tooltipRef = useRef<HTMLDivElement | null>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const [wrapperComponent, setWrapperComponent] = useState<DOMRect | null>(
-    null
-  );
-  const [tooltipComponent, setTooltipComponent] = useState<DOMRect | null>(
-    null
-  );
-
-  useEffect(() => {
-    setIsRendered(true);
-  }, []);
-
-  useEffect(() => {
-    setPosition(options?.position ?? "right");
-  }, [options?.position]);
-
-  useEffect(() => {
-    const handlePosition = () => {
-      if (!wrapperRef.current || !tooltipRef.current) return;
-
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-
-      if (tooltipRect.right > window.innerWidth) {
-        setPosition("left");
-      } else if (tooltipRect.left < 0) {
-        setPosition("right");
-      } else if (tooltipRect.bottom > window.innerHeight) {
-        setPosition("top");
-      } else if (tooltipRect.top < 0) {
-        setPosition("bottom");
-      }
-    };
-
-    if (visible) {
-      handlePosition();
-      window.addEventListener("resize", handlePosition);
-    }
-
-    return () => {
-      window.removeEventListener("resize", handlePosition);
-    };
-  }, [visible, content]);
-
-  useEffect(() => {
-    let animationFrameId: number;
-
-    const updatePosition = () => {
-      if (!wrapperRef.current || !tooltipRef.current) return;
-
-      setWrapperComponent(wrapperRef.current.getBoundingClientRect());
-      setTooltipComponent(tooltipRef.current.getBoundingClientRect());
-
-      animationFrameId = requestAnimationFrame(updatePosition);
-    };
-
-    animationFrameId = requestAnimationFrame(updatePosition);
-
-    return () => {
-      cancelAnimationFrame(animationFrameId);
-    };
-  }, [visible]);
-
-  const getTooltipPosition = () => {
-    if (wrapperComponent && tooltipComponent) {
-      switch (position) {
-        case "left":
-          return {
-            top:
-              wrapperComponent.top +
-              wrapperComponent.height / 2 -
-              tooltipComponent.height / 2,
-            left: wrapperComponent.left - tooltipComponent.width,
-          };
-        case "right":
-          return {
-            top:
-              wrapperComponent.top +
-              wrapperComponent.height / 2 -
-              tooltipComponent.height / 2,
-            left: wrapperComponent.right,
-          };
-        case "top":
-          return {
-            top: wrapperComponent.top - tooltipComponent.height,
-            left:
-              wrapperComponent.left +
-              wrapperComponent.width / 2 -
-              tooltipComponent.width / 2,
-          };
-        case "bottom":
-          return {
-            top: wrapperComponent.bottom,
-            left:
-              wrapperComponent.left +
-              wrapperComponent.width / 2 -
-              tooltipComponent.width / 2,
-          };
-        default:
-          return {
-            top:
-              wrapperComponent.top +
-              wrapperComponent.height / 2 -
-              tooltipComponent.height / 2,
-            left: wrapperComponent.right,
-          };
-      }
-    }
-  };
-
-  const getTooltipArrowPosition = () => {
-    if (wrapperComponent && tooltipComponent) {
-      switch (position) {
-        case "left":
-          return {
-            width: "0px",
-            height: "0px",
-            borderStyle: "solid",
-            borderWidth: "6px",
-            borderColor: "transparent transparent transparent black",
-            opacity: "0.75",
-          };
-        case "right":
-          return {
-            width: "0px",
-            height: "0px",
-            borderStyle: "solid",
-            borderWidth: "6px",
-            borderColor: "transparent black transparent transparent",
-            opacity: "0.75",
-          };
-        case "top":
-          return {
-            width: "0px",
-            height: "0px",
-            borderStyle: "solid",
-            borderWidth: "6px",
-            borderColor: "black transparent transparent transparent",
-            opacity: "0.75",
-          };
-        case "bottom":
-          return {
-            width: "0px",
-            height: "0px",
-            borderStyle: "solid",
-            borderWidth: "6px",
-            borderColor: "transparent transparent black transparent",
-            opacity: "0.75",
-          };
-        default:
-          return {
-            width: "0px",
-            height: "0px",
-            borderStyle: "solid",
-            borderWidth: "6px",
-            borderColor: "transparent black transparent transparent",
-            opacity: "0.75",
-          };
-      }
-    }
-  };
-
   return (
-    <div
-      ref={wrapperRef}
-      className="group/tooltip"
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
+    <Tp
+      content={content}
+      className={`z-50 max-w-[75dvw] md:max-w-96 px-3 py-1.5 rounded-md bg-black/85 text-sm text-wrap font-normal ${
+        !options?.enableHover && "pointer-events-none"
+      }`}
+      style="dark"
+      placement={options?.position || "right"}
+      theme={{
+        arrow: {
+          base: "absolute z-10 h-2 w-2 rotate-45",
+          style: { dark: "bg-black/85" },
+        },
+      }}
+      animation="duration-200"
     >
       {children}
-      {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="w-fit px-3 py-1.5 rounded-md bg-black/75 text-sm text-white text-wrap"
-              style={{ maxWidth: "50dvw" }}
-            >
-              {content}
-            </div>
-            {position === "left" && (
-              <div className="flex justify-center">
-                <div style={getTooltipArrowPosition()}></div>
-              </div>
-            )}
-          </div>
-          {position === "top" && (
-            <div className="flex justify-center">
-              <div style={getTooltipArrowPosition()}></div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+    </Tp>
   );
 };