import React , { HTMLAttributes , useEffect , useRef } from 'react' ; import { createPortal } from 'react-dom' ; import { DialogContentInner , DialogContentInnerProps } from './DialogContentInner' ; type Props = DialogContentInnerProps & { portalParent ? : HTMLElement ; } ; type ElementProps = Omit < HTMLAttributes < HTMLDivElement > , keyof Props > ; export const Dialog = ( { children , className = '' , portalParent , ... props } ) => { const portalContainer = useRef ( document . createElement ( 'div' ) ) . current ; useEffect ( ( ) => { const pp = portalParent || document . body ; pp . appendChild ( portalContainer ) ; return ( ) => { pp . removeChild ( portalContainer ) ; } ; } , [ portalContainer , portalParent ] ) ; return createPortal ( < DialogContentInner className = { className } { ... props } > { children } < /DialogContentInner>, portalContainer); } ;