76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
|
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||
|
|
import * as React from "react"
|
||
|
|
import { useCallback, useLayoutEffect, useState } from "react"
|
||
|
|
|
||
|
|
import { cn } from "../../lib/utils"
|
||
|
|
import { usePortalContainer } from "./portal-container"
|
||
|
|
|
||
|
|
const Popover = PopoverPrimitive.Root
|
||
|
|
|
||
|
|
const PopoverTrigger = PopoverPrimitive.Trigger
|
||
|
|
|
||
|
|
const PopoverAnchor = PopoverPrimitive.Anchor
|
||
|
|
|
||
|
|
const PopoverClose = PopoverPrimitive.Close
|
||
|
|
|
||
|
|
const PopoverContent = React.forwardRef<
|
||
|
|
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||
|
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||
|
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
|
||
|
|
const portalContainer = usePortalContainer()
|
||
|
|
// Fix for Electron: ensure position is calculated after content is fully rendered
|
||
|
|
const [isPositioned, setIsPositioned] = useState(false)
|
||
|
|
const [node, setNode] = useState<HTMLDivElement | null>(null)
|
||
|
|
|
||
|
|
// Use callback ref to detect when element is mounted
|
||
|
|
const callbackRef = useCallback((element: HTMLDivElement | null) => {
|
||
|
|
setNode(element)
|
||
|
|
// Forward ref
|
||
|
|
if (typeof ref === 'function') {
|
||
|
|
ref(element)
|
||
|
|
} else if (ref) {
|
||
|
|
ref.current = element
|
||
|
|
}
|
||
|
|
}, [ref])
|
||
|
|
|
||
|
|
useLayoutEffect(() => {
|
||
|
|
if (!node) {
|
||
|
|
setIsPositioned(false)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// Element just mounted, wait for next frame to ensure position is calculated
|
||
|
|
setIsPositioned(false)
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
setIsPositioned(true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}, [node])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PopoverPrimitive.Portal container={portalContainer ?? undefined}>
|
||
|
|
<PopoverPrimitive.Content
|
||
|
|
ref={callbackRef}
|
||
|
|
align={align}
|
||
|
|
sideOffset={sideOffset}
|
||
|
|
// Force position recalculation on every animation frame
|
||
|
|
updatePositionStrategy="always"
|
||
|
|
avoidCollisions={true}
|
||
|
|
collisionPadding={8}
|
||
|
|
style={{
|
||
|
|
visibility: isPositioned ? 'visible' : 'hidden',
|
||
|
|
}}
|
||
|
|
className={cn(
|
||
|
|
"z-[999999] rounded-md border border-border/60 bg-popover p-4 text-popover-foreground shadow-md outline-none pointer-events-auto",
|
||
|
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
</PopoverPrimitive.Portal>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||
|
|
|
||
|
|
export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }
|