@srcroot/ui 0.0.49 → 0.0.52

package/src/registry/ui/drawer.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 // Drawer Context
 interface DrawerContextValue {
@@ -27,6 +29,25 @@ interface DrawerProps {
     defaultOpen?: boolean
 }
 
+/**
+ * Drawer component for mobile-first bottom sheets
+ * 
+ * @example
+ * <Drawer>
+ *   <DrawerTrigger>Open</DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Title</DrawerTitle>
+ *       <DrawerDescription>Description</DrawerDescription>
+ *     </DrawerHeader>
+ *     <div>Content</div>
+ *     <DrawerFooter>
+ *       <Button>Submit</Button>
+ *       <DrawerClose>Cancel</DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ */
 const Drawer = ({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: DrawerProps) => {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
     const open = controlledOpen ?? uncontrolledOpen
@@ -53,17 +74,12 @@ const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTriggerProps>(
             onOpenChange(true)
         }
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onClick: handleClick,
-                ref,
-            })
-        }
+        const Comp = asChild ? Slot : "button"
 
         return (
-            <button ref={ref} onClick={handleClick} {...props}>
+            <Comp ref={ref} onClick={handleClick} {...props}>
                 {children}
-            </button>
+            </Comp>
         )
     }
 )
@@ -166,9 +182,16 @@ const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
             }
         }, [open])
 
+        const [mounted, setMounted] = React.useState(false)
+
+        React.useEffect(() => {
+            setMounted(true)
+        }, [])
+
         if (!isVisible) return null
+        if (!mounted) return null
 
-        return (
+        return createPortal(
             <>
                 <DrawerOverlay isAnimating={isAnimating} />
                 <div
@@ -194,7 +217,8 @@ const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
                         <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-muted" />
                     )}
                 </div>
-            </>
+            </>,
+            document.body
         )
     }
 )

package/src/registry/ui/dropdown-menu.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 DropdownMenuContextValue {
     open: boolean
@@ -66,22 +68,21 @@ const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrig
 
         // Combine refs
         const combinedRef = (node: HTMLButtonElement | null) => {
-            (context.triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node
+            (context.triggerRef as any).current = node
             if (typeof ref === 'function') ref(node)
             else if (ref) ref.current = node
         }
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onClick: handleClick,
-                "aria-expanded": context.open,
-                "aria-haspopup": "menu",
-                ref: combinedRef,
-            })
+        if (asChild) {
+            // For asChild, we need to manually make sure the ref is passed correctly.
+            // Slot handles merging the passed ref with the child's ref.
+            // But here we're passing `combinedRef` as the ref to Slot.
         }
 
+        const Comp = asChild ? Slot : "button"
+
         return (
-            <button
+            <Comp
                 ref={combinedRef}
                 aria-expanded={context.open}
                 aria-haspopup="menu"
@@ -89,7 +90,7 @@ const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrig
                 {...props}
             >
                 {children}
-            </button>
+            </Comp>
         )
     }
 )
@@ -102,18 +103,24 @@ interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement>
     side?: 'bottom' | 'top'
     /** Offset from trigger in pixels */
     sideOffset?: number
+    /** Whether to render in a portal (default: true) */
+    portal?: boolean
 }
 
 const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-    ({ className, align = 'start', side = 'bottom', sideOffset = 4, ...props }, ref) => {
+    ({ className, align = 'start', side = 'bottom', sideOffset = 4, portal = true, ...props }, ref) => {
         const context = React.useContext(DropdownMenuContext)
         if (!context) throw new Error("DropdownMenuContent must be used within DropdownMenu")
         const contentRef = React.useRef<HTMLDivElement>(null)
+        const [position, setPosition] = React.useState({ top: 0, left: 0 })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const [currentSide, setCurrentSide] = React.useState(side)
 
+        // Reset scroll on mount/unmount if needed, but mainly we just need a portal container
+        const [mounted, setMounted] = React.useState(false)
         React.useEffect(() => {
-            setCurrentSide(side)
-        }, [side])
+            setMounted(true)
+        }, [])
 
         React.useEffect(() => {
             const handleClickOutside = (e: MouseEvent) => {
@@ -141,30 +148,56 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
                     const triggerRect = context.triggerRef.current.getBoundingClientRect()
                     const contentRect = contentRef.current.getBoundingClientRect()
                     const viewportHeight = window.innerHeight
+                    const viewportWidth = window.innerWidth
+
+                    let top = 0
+                    let left = 0
+                    let usedSide = side
 
+                    // Vertical positioning logic
                     const spaceBelow = viewportHeight - triggerRect.bottom
                     const spaceAbove = triggerRect.top
                     const neededHeight = contentRect.height + sideOffset
 
                     if (side === 'bottom') {
                         if (spaceBelow < neededHeight && spaceAbove > neededHeight) {
-                            setCurrentSide('top')
-                        } else {
-                            setCurrentSide('bottom')
+                            usedSide = 'top'
                         }
                     } else if (side === 'top') {
                         if (spaceAbove < neededHeight && spaceBelow > neededHeight) {
-                            setCurrentSide('bottom')
-                        } else {
-                            setCurrentSide('top')
+                            usedSide = 'bottom'
                         }
                     }
+                    setCurrentSide(usedSide)
+
+                    if (usedSide === 'bottom') {
+                        top = triggerRect.bottom + sideOffset
+                    } else {
+                        top = triggerRect.top - contentRect.height - sideOffset
+                    }
+
+                    // Horizontal positioning logic (Alignment)
+                    if (align === 'start') {
+                        left = triggerRect.left
+                    } else if (align === 'end') {
+                        left = triggerRect.right - contentRect.width
+                    } else {
+                        // center
+                        left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+                    }
+
+                    // Collision detection / clamping for X axis
+                    if (left < 4) left = 4
+                    if (left + contentRect.width > viewportWidth - 4) {
+                        left = viewportWidth - contentRect.width - 4
+                    }
+
+                    setPosition({ top, left })
                 }
             }
 
             if (context.open) {
-                // Check position immediately after render cycle (via timeout to allow ref to populate and layout to occur)
-                // Using requestAnimationFrame for better timing in layout cycle
+                // Check position immediately after render cycle
                 requestAnimationFrame(checkPosition)
             }
 
@@ -173,7 +206,7 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
             }, 0)
             document.addEventListener("keydown", handleEscape)
             window.addEventListener("resize", checkPosition)
-            window.addEventListener("scroll", checkPosition, true) // Capture scroll to update pos
+            window.addEventListener("scroll", checkPosition, true)
 
             return () => {
                 clearTimeout(timer)
@@ -182,40 +215,51 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
                 window.removeEventListener("resize", checkPosition)
                 window.removeEventListener("scroll", checkPosition, true)
             }
-        }, [context.open, context, side, sideOffset])
+        }, [context.open, context, side, sideOffset, align])
 
         if (!context.open) return null
+        if (portal && !mounted) return null
 
-        // Calculate alignment classes
+        // Alignment classes are ignored if we use portal/fixed positioning,
+        // but kept for non-portal usage if someone opts out.
         const alignmentClasses = {
             start: 'left-0',
             center: 'left-1/2 -translate-x-1/2',
             end: 'right-0',
         }
 
-        return (
+        const content = (
             <div
                 ref={(node) => {
-                    (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+                    (contentRef as any).current = node
                     if (typeof ref === 'function') ref(node)
                     else if (ref) ref.current = node
                 }}
                 role="menu"
                 aria-orientation="vertical"
                 className={cn(
-                    "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                    "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
                     "animate-in fade-in-0 zoom-in-95",
-                    alignmentClasses[align],
-                    currentSide === 'bottom' ? 'top-full' : 'bottom-full',
+                    !portal && "absolute", // Use absolute if not portal
+                    !portal && alignmentClasses[align],
+                    !portal && (side === 'bottom' ? 'top-full mt-1' : 'bottom-full mb-1'),
+                    portal && "fixed", // Use fixed if portal
                     className
                 )}
                 style={{
-                    marginTop: currentSide === 'bottom' ? sideOffset : undefined,
-                    marginBottom: currentSide === 'top' ? sideOffset : undefined,
+                    top: portal ? position.top : undefined,
+                    left: portal ? position.left : undefined,
+                    ...props.style
                 }}
                 {...props}
             />
         )
+
+        if (portal) {
+            return createPortal(content, document.body)
+        }
+
+        return content
     }
 )
 DropdownMenuContent.displayName = "DropdownMenuContent"

package/src/registry/ui/hover-card.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 // HoverCard Context
 interface HoverCardContextValue {
@@ -26,6 +28,19 @@ interface HoverCardProps {
     closeDelay?: number
 }
 
+/**
+ * HoverCard component for displaying content on hover
+ * 
+ * @example
+ * <HoverCard>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="link">@nextjs</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent>
+ *     The React Framework – created and maintained by @vercel.
+ *   </HoverCardContent>
+ * </HoverCard>
+ */
 const HoverCard = ({ children, openDelay = 200, closeDelay = 300 }: HoverCardProps) => {
     const [open, setOpen] = React.useState(false)
     const triggerRef = React.useRef<HTMLDivElement>(null)
@@ -81,14 +96,24 @@ const HoverCardTrigger = React.forwardRef<HTMLDivElement, HoverCardTriggerProps>
     ({ children, asChild, className, ...props }, ref) => {
         const { triggerRef } = useHoverCard()
 
+        // Merge refs manually since we have two refs to attach (triggerRef and ref)
+        const combinedRef = React.useCallback((node: HTMLDivElement | null) => {
+            if (triggerRef) (triggerRef as any).current = node
+
+            if (typeof ref === "function") ref(node)
+            else if (ref) (ref as any).current = node
+        }, [triggerRef, ref])
+
+        const Comp = asChild ? Slot : "div"
+
         return (
-            <div
-                ref={triggerRef}
+            <Comp
+                ref={combinedRef}
                 className={cn("inline-block cursor-pointer", className)}
                 {...props}
             >
                 {children}
-            </div>
+            </Comp>
         )
     }
 )
@@ -101,63 +126,96 @@ interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
     sideOffset?: number
 }
 
-const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(
-    ({ children, className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => {
+const HoverCardContent = React.forwardRef<
+    HTMLDivElement,
+    HoverCardContentProps & { portal?: boolean }
+>(
+    ({ children, className, align = "center", side = "bottom", sideOffset = 4, portal = true, ...props }, ref) => {
         const { open, triggerRef } = useHoverCard()
         const [position, setPosition] = React.useState({ top: 0, left: 0 })
         const contentRef = React.useRef<HTMLDivElement>(null)
+        const [mounted, setMounted] = React.useState(false)
 
         React.useEffect(() => {
-            if (!open || !triggerRef.current || !contentRef.current) return
-
-            const triggerRect = triggerRef.current.getBoundingClientRect()
-            const contentRect = contentRef.current.getBoundingClientRect()
+            setMounted(true)
+        }, [])
 
-            let top = 0
-            let left = 0
-
-            // Calculate vertical position
-            if (side === "bottom") {
-                top = triggerRect.bottom + sideOffset
-            } else {
-                top = triggerRect.top - contentRect.height - sideOffset
-            }
+        React.useEffect(() => {
+            if (!open || !triggerRef.current || !contentRef.current) return
 
-            // Calculate horizontal position
-            if (align === "start") {
-                left = triggerRect.left
-            } else if (align === "end") {
-                left = triggerRect.right - contentRect.width
-            } else {
-                left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+            const checkPosition = () => {
+                if (!triggerRef.current || !contentRef.current) return
+                const triggerRect = triggerRef.current.getBoundingClientRect()
+                const contentRect = contentRef.current.getBoundingClientRect()
+
+                let top = 0
+                let left = 0
+
+                // Calculate vertical position
+                if (side === "bottom") {
+                    top = triggerRect.bottom + sideOffset
+                } else {
+                    top = triggerRect.top - contentRect.height - sideOffset
+                }
+
+                // Calculate horizontal position
+                if (align === "start") {
+                    left = triggerRect.left
+                } else if (align === "end") {
+                    left = triggerRect.right - contentRect.width
+                } else {
+                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+                }
+
+                // Clamp to viewport
+                left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
+                top = Math.max(8, Math.min(top, window.innerHeight - contentRect.height - 8))
+
+                setPosition({ top, left })
             }
 
-            // Clamp to viewport
-            left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
-            top = Math.max(8, Math.min(top, window.innerHeight - contentRect.height - 8))
+            checkPosition()
+            window.addEventListener('resize', checkPosition)
+            window.addEventListener('scroll', checkPosition, true)
 
-            setPosition({ top, left })
+            return () => {
+                window.removeEventListener('resize', checkPosition)
+                window.removeEventListener('scroll', checkPosition, true)
+            }
         }, [open, triggerRef, align, side, sideOffset])
 
         if (!open) return null
 
-        return (
+        const content = (
             <div
-                ref={contentRef}
+                ref={(node) => {
+                    (contentRef as any).current = node
+                    if (typeof ref === 'function') ref(node)
+                    else if (ref) (ref as any).current = node
+                }}
                 className={cn(
-                    "fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                    "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
                     "animate-in fade-in-0 zoom-in-95",
+                    !portal && "absolute",
+                    portal && "fixed",
                     className
                 )}
                 style={{
-                    top: position.top,
-                    left: position.left,
+                    top: portal ? position.top : undefined,
+                    left: portal ? position.left : undefined,
+                    ...props.style
                 }}
                 {...props}
             >
                 {children}
             </div>
         )
+
+        if (portal && mounted) {
+            return createPortal(content, document.body)
+        }
+
+        return content
     }
 )
 HoverCardContent.displayName = "HoverCardContent"