40 lines
1 KiB
TypeScript
40 lines
1 KiB
TypeScript
import React, { PropsWithChildren } from 'react'
|
|
import classnames from 'classnames'
|
|
import * as PopoverPrimitive from '@radix-ui/react-popover'
|
|
|
|
import './index.scss'
|
|
|
|
interface Props
|
|
extends React.DetailedHTMLProps<
|
|
React.DialogHTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
> {}
|
|
|
|
export const Popover = PopoverPrimitive.Root
|
|
export const PopoverAnchor = PopoverPrimitive.Anchor
|
|
export const PopoverTrigger = PopoverPrimitive.Trigger
|
|
|
|
export const PopoverContent = React.forwardRef<HTMLDivElement, Props>(
|
|
function Popover(
|
|
{ children, ...props }: PropsWithChildren<Props>,
|
|
forwardedRef
|
|
) {
|
|
const classes = classnames(props.className, {
|
|
Popover: true,
|
|
})
|
|
|
|
return (
|
|
<PopoverPrimitive.Portal>
|
|
<PopoverPrimitive.Content
|
|
sideOffset={5}
|
|
{...props}
|
|
className={classes}
|
|
ref={forwardedRef}
|
|
>
|
|
{children}
|
|
<PopoverPrimitive.Arrow />
|
|
</PopoverPrimitive.Content>
|
|
</PopoverPrimitive.Portal>
|
|
)
|
|
}
|
|
)
|