import React , { HTMLAttributes , useCallback , useContext } from 'react' ; import { DialogContext } from './DialogWrapper' ; import { DialogContentInner , DialogContentInnerProps } from './DialogContentInner' ; import { BaseProps , MessageDialogContentInner } from './MessageDialogContentInner' ; type Props = BaseProps & Pick < DialogContentInnerProps , 'top' | 'right' | 'bottom' | 'left' | 'id' > ; type ElementProps = Omit < HTMLAttributes < HTMLDivElement > , keyof Props > ; export const MessageDialogContent = ( { title , description , closeText , className = '' , ... props } ) => { const { DialogContentRoot , onClickClose , active } = useContext ( DialogContext ) ; const handleClickClose = useCallback ( ( ) => { if ( ! active ) { return ; } onClickClose ( ) ; } , [ active , onClickClose ] ) ; return ( < DialogContentRoot > < DialogContentInner onClickOverlay = { onClickClose } onPressEscape = { onClickClose } isOpen = { active } ariaLabel = { title } className = { className } { ... props } > < MessageDialogContentInner title = { title } description = { description } closeText = { closeText } onClickClose = { handleClickClose } / > < /DialogContentInner> < /DialogContentRoot>); } ;