import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import { ActionButtonsProps , actionButtonsPropTypes } from '../Button/ActionButtons' ; import { useUniqueId } from '../uniqueId' ; import Dialog from '../Dialog' ; import Modal , { ModalProps , LocalModalProps , modalPropTypes , modalDefaultProps } from '../Modal/Modal' ; import { Omit } from '../types' ; export type LocalDialogModalProps = Omit < LocalModalProps , 'children' > & { a11yDescriptionId ? : string ; a11yTitleId ? : string ; actionButtonsProps ? : ActionButtonsProps ; children : ( ( { initialFocusRef } : { initialFocusRef : React . RefObject < HTMLElement > ; } ) => React . ReactNode ) | React . ReactNode ; footer ? : ( ( { initialFocusRef } : { initialFocusRef : React . RefObject < HTMLElement > ; } ) => React . ReactNode ) | string | React . ReactElement < any > ; hasScroll ? : boolean ; kind ? : 'alert' ; title ? : string | React . ReactElement < any > ; type ? : string ; } ; export type DialogModalProps = Omit < ModalProps , 'children' > & LocalDialogModalProps ; export const DialogModal = ( { a11yDescriptionId : _a11yDescriptionId , a11yTitleId : _a11yTitleId , actionButtonsProps , children , footer , hasScroll , hide , kind , showActionButtons , showCloseButton , title , type , ... props } ) => { const titleId = useUniqueId ( 'DialogModal' ) ; const descriptionId = useUniqueId ( 'DialogModal' ) ; const a11yDescriptionId = _a11yDescriptionId || descriptionId ; const a11yTitleId = _a11yTitleId || titleId ; return ( < Modal hide = { hide } kind = { kind } { ... props } > { ( { fallbackFocusRef , initialFocusRef } ) => ( < Dialog a11yDescriptionId = { a11yDescriptionId } a11yTitleId = { a11yTitleId } actionButtonsProps = { { cancelProps : { elementRef : initialFocusRef , use : Modal . Hide , hide , ... ( actionButtonsProps || { } ) . cancelProps } , palette : type , ... actionButtonsProps } } closeButtonProps = { { elementRef : initialFocusRef } } elementRef = { fallbackFocusRef } footer = { typeof footer === 'function' ? footer ( { initialFocusRef } ) : footer } hasScroll = { hasScroll } onClickClose = { hide } role = { kind === 'alert' ? 'alertdialog' : 'dialog' } showActionButtons = { showActionButtons || kind === 'alert' } showCloseButton = { showCloseButton && kind !== 'alert' } tabIndex = { - 1 } title = { title } type = { type } width = "100%" > { } { typeof children === 'function' ? children ( { initialFocusRef } ) : children } < /Dialog>)} < /Modal>); } ; export const dialogModalPropTypes = { ... modalPropTypes , a11yDescriptionId : PropTypes . string , a11yTitleId : PropTypes . string , actionButtonsProps : PropTypes . shape ( actionButtonsPropTypes ) , children : PropTypes . oneOfType ( [ PropTypes . node , PropTypes . func ] ) . isRequired , footer : PropTypes . oneOfType ( [ PropTypes . func , PropTypes . string , PropTypes . element ] ) , hasScroll : PropTypes . bool , kind : PropTypes . oneOf ( [ 'alert' ] ) as PropTypes . Validator < LocalDialogModalProps [ 'kind' ] > , title : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . element ] ) , type : PropTypes . string } ; DialogModal . propTypes = dialogModalPropTypes ; export const dialogModalDefaultProps = { ... modalDefaultProps , actionButtonsProps : { } , a11yDescriptionId : undefined , a11yTitleId : undefined , footer : undefined , hasScroll : false , kind : undefined , title : undefined , type : undefined , hideOnEsc : true , hideOnClickOutside : true } ; DialogModal . defaultProps = dialogModalDefaultProps ; const C = DialogModal ; export default C ;