@inf-monkeys-tech/monkeys-design 0.4.49 → 0.4.51

package/dist/components/layout/index.mjs

@@ -1,7 +1,8 @@
-import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext } from 'react';
+import { forwardRef, useRef, useState, useEffect, useId, useMemo, createContext, useContext, useLayoutEffect } from 'react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@radix-ui/react-context-menu';
+import { createPortal } from 'react-dom';
 
 // src/components/layout/index.tsx
 
@@ -2889,6 +2890,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,
@@ -2896,6 +2936,7 @@ function BaseTooltip({
   defaultOpen = false,
   placement = "top",
   disabled = false,
+  portal = false,
   appearance,
   className,
   classNames,
@@ -2904,21 +2945,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),
@@ -2927,19 +3005,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
       ]
     }
   );
@@ -3593,6 +3659,7 @@ function NavigationLayoutActionButtons({
           appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
           content: action.label,
           placement: "right",
+          portal: true,
           children: /* @__PURE__ */ jsx(
             BaseButton,
             {
@@ -3742,6 +3809,7 @@ function SidebarBrand({
         appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
         content: brandTitle,
         placement: "right",
+        portal: true,
         children: /* @__PURE__ */ jsx(
           BaseButton,
           {
@@ -3806,6 +3874,7 @@ function Sidebar({
                 appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
                 content: item.label,
                 placement: "right",
+                portal: true,
                 children: /* @__PURE__ */ jsx(
                   BaseButton,
                   {
@@ -3918,9 +3987,9 @@ function HeadbarNavMenuItem({
         onMouseEnter: openMenu,
         onMouseLeave: scheduleCloseMenu,
         className: cn2(
-          "h-9 max-w-[12rem] border-transparent !bg-transparent px-3 text-sm font-medium shadow-none",
+          "h-9 max-w-[12rem] border-transparent px-3 text-sm font-medium shadow-none",
           menuButtonRadiusClass,
-          isActive || open ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+          isActive || open ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "!bg-transparent text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
         )
       }
     ) }),
@@ -3998,9 +4067,9 @@ function HeadbarNav({
         label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
         onClick: () => onNavigate?.(item.id),
         className: cn2(
-          "h-9 max-w-[12rem] border-transparent !bg-transparent px-3 text-sm font-medium shadow-none",
+          "h-9 max-w-[12rem] border-transparent px-3 text-sm font-medium shadow-none",
           menuButtonRadiusClass,
-          isActive ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+          isActive ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "!bg-transparent text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
         )
       },
       item.id