@inf-monkeys-tech/monkeys-design 0.4.48 → 0.4.50

package/dist/components/base/index.mjs

@@ -1,6 +1,7 @@
-import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext, useCallback } from 'react';
+import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ContextMenu from '@radix-ui/react-context-menu';
+import { createPortal } from 'react-dom';
 
 // src/components/base/BaseAccordion.tsx
 
@@ -5736,6 +5737,45 @@ function getTooltipPlacementClassName(placement) {
       return "bottom-[calc(100%+0.5rem)] left-1/2 -translate-x-1/2";
   }
 }
+function getPortalTooltipStyle(placement, rect, themeStyle) {
+  if (!rect) return themeStyle;
+  const offset = 8;
+  const baseStyle = {
+    ...themeStyle,
+    position: "fixed"
+  };
+  switch (placement) {
+    case "bottom":
+      return {
+        ...baseStyle,
+        left: rect.left + rect.width / 2,
+        top: rect.bottom + offset,
+        transform: "translateX(-50%)"
+      };
+    case "left":
+      return {
+        ...baseStyle,
+        right: window.innerWidth - rect.left + offset,
+        top: rect.top + rect.height / 2,
+        transform: "translateY(-50%)"
+      };
+    case "right":
+      return {
+        ...baseStyle,
+        left: rect.right + offset,
+        top: rect.top + rect.height / 2,
+        transform: "translateY(-50%)"
+      };
+    case "top":
+    default:
+      return {
+        ...baseStyle,
+        bottom: window.innerHeight - rect.top + offset,
+        left: rect.left + rect.width / 2,
+        transform: "translateX(-50%)"
+      };
+  }
+}
 function BaseTooltip({
   content,
   children,
@@ -5743,6 +5783,7 @@ function BaseTooltip({
   defaultOpen = false,
   placement = "top",
   disabled = false,
+  portal = false,
   appearance,
   className,
   classNames,
@@ -5751,21 +5792,58 @@ function BaseTooltip({
   ...tooltipProps
 }) {
   const theme = resolveBaseAppearance(appearance);
+  const rootRef = useRef(null);
+  const [triggerRect, setTriggerRect] = useState(null);
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolledOpen;
   const canShow = !disabled && hasRenderableNode(content);
+  const shouldPortal = portal && typeof document !== "undefined";
+  const tooltipStyle = useMemo(
+    () => shouldPortal ? getPortalTooltipStyle(placement, triggerRect, theme.styles.tooltip) : theme.styles.tooltip,
+    [placement, shouldPortal, theme.styles.tooltip, triggerRect]
+  );
   const setOpen = (nextOpen) => {
     if (!canShow && nextOpen) return;
+    if (shouldPortal) {
+      setTriggerRect(nextOpen ? rootRef.current?.getBoundingClientRect() ?? null : null);
+    }
     if (!isControlled) {
       setUncontrolledOpen(nextOpen);
     }
     onOpenChange?.(nextOpen);
   };
+  useLayoutEffect(() => {
+    if (!shouldPortal || !canShow || !isOpen) return;
+    const updateTriggerRect = () => {
+      setTriggerRect(rootRef.current?.getBoundingClientRect() ?? null);
+    };
+    updateTriggerRect();
+    window.addEventListener("resize", updateTriggerRect);
+    window.addEventListener("scroll", updateTriggerRect, true);
+    return () => {
+      window.removeEventListener("resize", updateTriggerRect);
+      window.removeEventListener("scroll", updateTriggerRect, true);
+    };
+  }, [canShow, isOpen, shouldPortal]);
+  const tooltipContent = canShow && isOpen && (!shouldPortal || triggerRect) ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "tooltip",
+      className: cn(
+        theme.slots.tooltipContent,
+        shouldPortal ? void 0 : getTooltipPlacementClassName(placement),
+        classNames?.content
+      ),
+      style: tooltipStyle,
+      children: content
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ...tooltipProps,
+      ref: rootRef,
       className: cn(theme.slots.tooltipRoot, classNames?.root, className),
       style,
       onMouseEnter: () => setOpen(true),
@@ -5774,19 +5852,7 @@ function BaseTooltip({
       onBlur: () => setOpen(false),
       children: [
         /* @__PURE__ */ jsx("span", { className: cn(theme.slots.tooltipTrigger, classNames?.trigger), children }),
-        canShow && isOpen ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            role: "tooltip",
-            className: cn(
-              theme.slots.tooltipContent,
-              getTooltipPlacementClassName(placement),
-              classNames?.content
-            ),
-            style: theme.styles.tooltip,
-            children: content
-          }
-        ) : null
+        shouldPortal && tooltipContent ? createPortal(tooltipContent, document.body) : tooltipContent
       ]
     }
   );