35 lines
811 B
TypeScript
35 lines
811 B
TypeScript
import { mergeRefs } from '@/Hooks/mergeRefs'
|
|
import { Dialog, useDialogStore } from '@ariakit/react'
|
|
import { ForwardedRef, forwardRef, ReactNode } from 'react'
|
|
import { useModalAnimation } from '../Modal/useModalAnimation'
|
|
|
|
type Props = {
|
|
isOpen: boolean
|
|
children: ReactNode
|
|
}
|
|
|
|
const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
|
|
const [isMounted, setElement] = useModalAnimation(isOpen)
|
|
const dialog = useDialogStore({
|
|
open: isMounted,
|
|
})
|
|
|
|
if (!isMounted) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
tabIndex={0}
|
|
className="fixed top-0 left-0 z-modal h-full w-full"
|
|
ref={mergeRefs([setElement, ref])}
|
|
store={dialog}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Dialog>
|
|
)
|
|
})
|
|
|
|
export default ModalOverlay
|