@srcroot/ui 0.0.49 → 0.0.52

package/src/registry/ui/slot.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode
+}
+
+const Slot = React.forwardRef<HTMLElement, SlotProps>(
+    ({ children, className, ...props }, ref) => {
+        if (React.isValidElement(children)) {
+            const child = children as React.ReactElement<any>
+
+            const mergedProps: Record<string, any> = { ...props }
+            if (className) {
+                mergedProps.className = className
+            }
+
+            for (const propName in child.props) {
+                const slotPropValue = mergedProps[propName]
+                const childPropValue = child.props[propName]
+
+                if (
+                    /^on[A-Z]/.test(propName) &&
+                    typeof slotPropValue === "function" &&
+                    typeof childPropValue === "function"
+                ) {
+                    mergedProps[propName] = (...args: any[]) => {
+                        childPropValue(...args)
+                        if (!args[0]?.defaultPrevented) {
+                            slotPropValue(...args)
+                        }
+                    }
+                } else if (propName === "style") {
+                    mergedProps[propName] = { ...slotPropValue, ...childPropValue }
+                } else if (propName === "className") {
+                    mergedProps[propName] = cn(slotPropValue, childPropValue)
+                } else {
+                    mergedProps[propName] = childPropValue
+                }
+            }
+
+            return React.cloneElement(child, {
+                ...mergedProps,
+                ref: (node: HTMLElement | null) => {
+                    // Handle both function and object refs for the forwarded ref
+                    if (typeof ref === "function") {
+                        ref(node)
+                    } else if (ref && "current" in ref) {
+                        (ref as any).current = node
+                    }
+
+                    // Handle the child's existing ref
+                    const childRef = (child as any).ref
+                    if (typeof childRef === "function") {
+                        childRef(node)
+                    } else if (childRef && "current" in childRef) {
+                        (childRef as any).current = node
+                    }
+                },
+            })
+        }
+
+        return null
+    }
+)
+
+Slot.displayName = "Slot"
+
+export { Slot }

package/src/registry/ui/tooltip.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 interface TooltipContextValue {
     open: boolean
@@ -73,19 +75,10 @@ const TooltipTrigger = React.forwardRef<HTMLSpanElement, TooltipTriggerProps>(
         const handleFocus = () => context.setOpen(true)
         const handleBlur = () => context.setOpen(false)
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onMouseEnter: handleMouseEnter,
-                onMouseLeave: handleMouseLeave,
-                onMouseMove: handleMouseMove,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                ref,
-            })
-        }
+        const Comp = asChild ? Slot : "span"
 
         return (
-            <span
+            <Comp
                 ref={ref}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
@@ -96,7 +89,7 @@ const TooltipTrigger = React.forwardRef<HTMLSpanElement, TooltipTriggerProps>(
                 {...props}
             >
                 {children}
-            </span>
+            </Comp>
         )
     }
 )
@@ -109,13 +102,20 @@ const TooltipContent = React.forwardRef<
     const context = React.useContext(TooltipContext)
     if (!context) throw new Error("TooltipContent must be used within Tooltip")
 
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
     if (!context.open) return null
+    if (!mounted) return null
 
     // Offset from cursor (slightly above and to the right)
     const offsetX = 10
     const offsetY = -10
 
-    return (
+    return createPortal(
         <div
             ref={ref}
             role="tooltip"
@@ -132,7 +132,8 @@ const TooltipContent = React.forwardRef<
             {...props}
         >
             {children}
-        </div>
+        </div>,
+        document.body
     )
 })
 TooltipContent.displayName = "TooltipContent"