@parto-system-design/ui 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -9330,6 +9330,7 @@ function PartoHeatMap({
 
 // src/components/charts/PartoWordCloud.tsx
 var React32 = __toESM(require("react"), 1);
+var import_react_dom3 = require("react-dom");
 var import_wordcloud = require("@visx/wordcloud");
 var import_scale = require("@visx/scale");
 var import_text = require("@visx/text");
@@ -9386,28 +9387,25 @@ function PartoWordCloud({
     return fontScale(datum.value);
   };
   const handleMouseMove = (event, text, value) => {
-    if (containerRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const x = event.clientX - containerRect.left;
-      const y = event.clientY - containerRect.top;
-      setHovered({
-        text,
-        value,
-        x,
-        y,
-        color: primaryColor
-      });
-    }
+    const x = event.clientX;
+    const y = event.clientY;
+    setHovered({
+      text,
+      value,
+      x,
+      y,
+      color: primaryColor
+    });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       ref: containerRef,
       className,
       style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
       dir: "rtl",
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { style: { position: "relative", width, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: { position: "relative", width, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           import_wordcloud.Wordcloud,
           {
             words: formattedWords,
@@ -9445,29 +9443,33 @@ function PartoWordCloud({
               ) }, w.text);
             })
           }
-        ),
-        hovered && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-          "div",
-          {
-            className: "pointer-events-none absolute z-50",
-            style: {
-              left: `${hovered.x}px`,
-              top: `${hovered.y - 50}px`,
-              transform: "translateX(-50%)"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "h-2.5 w-2.5 rounded-[2px]", style: { backgroundColor: hovered.color } }),
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "font-medium", children: hovered.text })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-muted-foreground", children: "\u062A\u0639\u062F\u0627\u062F" }),
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "font-mono font-medium tabular-nums", children: hovered.value.toLocaleString("fa-IR") })
+        ) }),
+        hovered && typeof document !== "undefined" && (0, import_react_dom3.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            "div",
+            {
+              className: "pointer-events-none fixed z-[9999]",
+              dir: "ltr",
+              style: {
+                left: `${hovered.x}px`,
+                top: `${hovered.y - 10}px`,
+                transform: "translate(-50%, -100%)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", dir: "rtl", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "h-2.5 w-2.5 rounded-[2px]", style: { backgroundColor: hovered.color } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "font-medium", children: hovered.text })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-muted-foreground", children: "\u062A\u0639\u062F\u0627\u062F" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "font-mono font-medium tabular-nums", children: hovered.value.toLocaleString("fa-IR") })
+                ] })
               ] })
-            ] })
-          }
+            }
+          ),
+          document.body
         )
-      ] })
+      ]
     }
   );
 }