@carbonid1/design-system 5.7.5 → 5.7.7

package/dist/Tooltip/Tooltip.d.ts

@@ -11,5 +11,6 @@ type TooltipProps = {
         'aria-label'?: string;
     }>;
 };
+export declare const VIEWPORT_MARGIN = 8;
 export declare const Tooltip: ({ label, shortcut, position, delay, maxWidth, disabled, className, children, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Tooltip/Tooltip.js

@@ -1,12 +1,23 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { computeTooltipPlacement, } from '../helpers/tooltipPlacement/tooltipPlacement';
 import { Kbd } from '../Kbd/Kbd';
-import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 const DEFAULT_DELAY = 200;
+export const VIEWPORT_MARGIN = 8;
+// Gap in px between the trigger and the tooltip box, baked into the fixed `top`
+// offset below; the flip math subtracts it when deciding whether a side fits.
+const TRIGGER_GAP = 8;
+// Position before paint so an edge tooltip never flashes centered-then-shifted.
+// useLayoutEffect warns and no-ops during SSR, so fall back to useEffect there.
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DELAY, maxWidth, disabled, className, children, }) => {
     const [visible, setVisible] = useState(false);
+    const [box, setBox] = useState(null);
     const timeoutRef = useRef(null);
     const wrapperRef = useRef(null);
+    const tooltipRef = useRef(null);
     const show = useCallback(() => {
         if (disabled)
             return;
@@ -52,8 +63,59 @@ export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DEL
         document.addEventListener('pointermove', handlePointerMove, { passive: true });
         return () => document.removeEventListener('pointermove', handlePointerMove);
     }, [visible, hide]);
-    const positionClasses = position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
-    return (_jsxs("div", { ref: wrapperRef, className: `relative inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
+    useIsomorphicLayoutEffect(() => {
+        if (!visible)
+            return;
+        const measure = () => {
+            const wrapper = wrapperRef.current;
+            const tooltip = tooltipRef.current;
+            if (!wrapper || !tooltip)
+                return;
+            const trigger = wrapper.getBoundingClientRect();
+            const tip = tooltip.getBoundingClientRect();
+            const placement = computeTooltipPlacement({
+                trigger,
+                tooltip: { width: tip.width, height: tip.height },
+                viewport: { width: window.innerWidth, height: window.innerHeight },
+                preferredSide: position,
+                margin: VIEWPORT_MARGIN,
+                gap: TRIGGER_GAP,
+            });
+            const left = trigger.left + trigger.width / 2;
+            const top = placement.side === 'top' ? trigger.top - TRIGGER_GAP : trigger.bottom + TRIGGER_GAP;
+            // Keep the same object when nothing moved so a no-op resize/scroll doesn't
+            // trigger a redundant re-render (the common centered, still case is a no-op).
+            setBox(prev => prev &&
+                prev.side === placement.side &&
+                prev.offsetX === placement.offsetX &&
+                prev.left === left &&
+                prev.top === top
+                ? prev
+                : { ...placement, left, top });
+        };
+        measure();
+        // Portaled and fixed, the box no longer rides the trigger's scroll container,
+        // so re-anchor on scroll (capture, to catch any scrolling ancestor) and resize.
+        window.addEventListener('resize', measure, { passive: true });
+        window.addEventListener('scroll', measure, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('resize', measure);
+            window.removeEventListener('scroll', measure, { capture: true });
+        };
+    }, [visible, position]);
+    const boxStyle = {
+        position: 'fixed',
+        left: box?.left ?? 0,
+        top: box?.top ?? 0,
+        transform: `translate(calc(-50% + ${box?.offsetX ?? 0}px), ${box?.side === 'top' ? '-100%' : '0'})`,
+        // Hidden until measured so the first frame never paints at the un-anchored origin.
+        visibility: box ? 'visible' : 'hidden',
+        ...(maxWidth ? { maxWidth } : {}),
+    };
+    return (_jsxs("div", { ref: wrapperRef, className: `inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
                 'aria-label': children.props['aria-label'] ?? label,
-            }), visible && !disabled && (_jsxs("div", { role: "tooltip", style: maxWidth ? { maxWidth } : undefined, className: `absolute left-1/2 z-50 -translate-x-1/2 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
+            }), visible &&
+                !disabled &&
+                typeof document !== 'undefined' &&
+                createPortal(_jsxs("div", { ref: tooltipRef, role: "tooltip", style: boxStyle, className: `bg-foreground text-background pointer-events-none z-50 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }), document.body)] }));
 };

package/dist/helpers/tooltipPlacement/tooltipPlacement.d.ts

@@ -0,0 +1,38 @@
+type Side = 'top' | 'bottom';
+type Rect = {
+    left: number;
+    top: number;
+    bottom: number;
+    width: number;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+type TooltipPlacementInput = {
+    /** Trigger (wrapper) rect, viewport-relative — the tooltip is centered on its horizontal midpoint. */
+    trigger: Rect;
+    /** Measured tooltip box, taken at its un-shifted centered position. */
+    tooltip: Size;
+    viewport: Size;
+    /** Side the caller asked for; kept unless that side lacks room. */
+    preferredSide: Side;
+    /** Minimum gap to keep between the tooltip and each viewport edge. */
+    margin: number;
+    /** Gap between the trigger and the tooltip on the chosen side. */
+    gap: number;
+};
+export type TooltipPlacement = {
+    side: Side;
+    /** Pixels to shift the centered tooltip horizontally; 0 leaves it centered. */
+    offsetX: number;
+};
+/**
+ * Decide where a centered tooltip should sit so it stays within the viewport:
+ * shift it horizontally when an edge would cross `margin`, and flip the vertical
+ * side when the preferred one lacks room. Pure — the component feeds it measured
+ * rects and applies the result. On a viewport too narrow to fit the box, the left
+ * edge wins (LTR readers lose the tail, not the start).
+ */
+export declare const computeTooltipPlacement: ({ trigger, tooltip, viewport, preferredSide, margin, gap, }: TooltipPlacementInput) => TooltipPlacement;
+export {};

package/dist/helpers/tooltipPlacement/tooltipPlacement.js

@@ -0,0 +1,26 @@
+/**
+ * Decide where a centered tooltip should sit so it stays within the viewport:
+ * shift it horizontally when an edge would cross `margin`, and flip the vertical
+ * side when the preferred one lacks room. Pure — the component feeds it measured
+ * rects and applies the result. On a viewport too narrow to fit the box, the left
+ * edge wins (LTR readers lose the tail, not the start).
+ */
+export const computeTooltipPlacement = ({ trigger, tooltip, viewport, preferredSide, margin, gap, }) => {
+    const triggerCenterX = trigger.left + trigger.width / 2;
+    const centeredLeft = triggerCenterX - tooltip.width / 2;
+    const centeredRight = centeredLeft + tooltip.width;
+    let offsetX = 0;
+    if (centeredRight > viewport.width - margin)
+        offsetX = viewport.width - margin - centeredRight;
+    if (centeredLeft + offsetX < margin)
+        offsetX = margin - centeredLeft;
+    const spaceAbove = trigger.top;
+    const spaceBelow = viewport.height - trigger.bottom;
+    const needed = tooltip.height + gap + margin;
+    let side = preferredSide;
+    if (preferredSide === 'top' && spaceAbove < needed && spaceBelow > spaceAbove)
+        side = 'bottom';
+    if (preferredSide === 'bottom' && spaceBelow < needed && spaceAbove > spaceBelow)
+        side = 'top';
+    return { side, offsetX };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.7.5",
+  "version": "5.7.7",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",