52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import {
|
|
Button,
|
|
Dialog,
|
|
DialogTrigger,
|
|
OverlayArrow,
|
|
Popover as RAPopover,
|
|
} from "react-aria-components"
|
|
|
|
import { CloseLargeIcon } from "@/components/Icons"
|
|
import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
|
|
|
|
import { Arrow } from "./Arrow"
|
|
|
|
import styles from "./popover.module.css"
|
|
|
|
import type { PopoverProps } from "./popover"
|
|
|
|
export default function Popover({
|
|
triggerContent,
|
|
children,
|
|
...props
|
|
}: PopoverProps) {
|
|
const setOverflowVisible = useSetOverFlowVisibleOnRA()
|
|
|
|
return (
|
|
<DialogTrigger onOpenChange={setOverflowVisible}>
|
|
<Button className={styles.trigger}>{triggerContent}</Button>
|
|
|
|
<RAPopover
|
|
{...props}
|
|
offset={16}
|
|
crossOffset={-24}
|
|
className={styles.root}
|
|
>
|
|
<OverlayArrow>
|
|
<Arrow />
|
|
</OverlayArrow>
|
|
<Dialog>
|
|
{({ close }) => (
|
|
<>
|
|
<Button className={styles.closeButton} onPress={close}>
|
|
<CloseLargeIcon height={20} width={20} />
|
|
</Button>
|
|
{children}
|
|
</>
|
|
)}
|
|
</Dialog>
|
|
</RAPopover>
|
|
</DialogTrigger>
|
|
)
|
|
}
|