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

package/dist/components/layout/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { c as BaseAppearance } from '../../types-Bn6PEDsX.mjs';
+import { c as BaseAppearance } from '../../types-5cYLLXs8.mjs';
 import '@radix-ui/react-context-menu';
 
 type UserAccountMenuRadius = 'default' | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';

package/dist/components/layout/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { c as BaseAppearance } from '../../types-Bn6PEDsX.js';
+import { c as BaseAppearance } from '../../types-5cYLLXs8.js';
 import '@radix-ui/react-context-menu';
 
 type UserAccountMenuRadius = 'default' | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';

package/dist/components/layout/index.js

@@ -4,6 +4,7 @@ var react = require('react');
 var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var jsxRuntime = require('react/jsx-runtime');
 require('@radix-ui/react-context-menu');
+var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -2911,6 +2912,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,
@@ -2918,6 +2958,7 @@ function BaseTooltip({
   defaultOpen = false,
   placement = "top",
   disabled = false,
+  portal = false,
   appearance,
   className,
   classNames,
@@ -2926,21 +2967,58 @@ function BaseTooltip({
   ...tooltipProps
 }) {
   const theme = resolveBaseAppearance(appearance);
+  const rootRef = react.useRef(null);
+  const [triggerRect, setTriggerRect] = react.useState(null);
   const [uncontrolledOpen, setUncontrolledOpen] = react.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 = react.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);
   };
+  react.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__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "tooltip",
+      className: cn(
+        theme.slots.tooltipContent,
+        shouldPortal ? void 0 : getTooltipPlacementClassName(placement),
+        classNames?.content
+      ),
+      style: tooltipStyle,
+      children: content
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       ...tooltipProps,
+      ref: rootRef,
       className: cn(theme.slots.tooltipRoot, classNames?.root, className),
       style,
       onMouseEnter: () => setOpen(true),
@@ -2949,19 +3027,7 @@ function BaseTooltip({
       onBlur: () => setOpen(false),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.tooltipTrigger, classNames?.trigger), children }),
-        canShow && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            role: "tooltip",
-            className: cn(
-              theme.slots.tooltipContent,
-              getTooltipPlacementClassName(placement),
-              classNames?.content
-            ),
-            style: theme.styles.tooltip,
-            children: content
-          }
-        ) : null
+        shouldPortal && tooltipContent ? reactDom.createPortal(tooltipContent, document.body) : tooltipContent
       ]
     }
   );
@@ -3615,6 +3681,7 @@ function NavigationLayoutActionButtons({
           appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
           content: action.label,
           placement: "right",
+          portal: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             BaseButton,
             {
@@ -3764,6 +3831,7 @@ function SidebarBrand({
         appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
         content: brandTitle,
         placement: "right",
+        portal: true,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           BaseButton,
           {
@@ -3828,6 +3896,7 @@ function Sidebar({
                 appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
                 content: item.label,
                 placement: "right",
+                portal: true,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BaseButton,
                   {
@@ -3940,9 +4009,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))]"
         )
       }
     ) }),
@@ -4020,9 +4089,9 @@ function HeadbarNav({
         label: /* @__PURE__ */ jsxRuntime.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