import * as React from 'react' ; import Dialog , { DialogProps } from '@mui/material/Dialog' ; import DialogTitle from '@mui/material/DialogTitle' ; import DialogContent from '@mui/material/DialogContent' ; import DialogActions from '@mui/material/DialogActions' ; import Button from '@mui/material/Button' ; import { useModal } from '../../../../src' ; type Props = DialogProps & { deep : number ; } ; const NestedDialog = ( { deep = 0 , ... props } ) => { const { showModal } = useModal ( ) ; const handleClick = ( ) => { showModal ( NestedDialog , { deep : deep + 1 } ) ; } ; return ( < Dialog { ... props } > < DialogTitle > Nested Dialog < /DialogTitle> < DialogContent > Deep : { deep } < /DialogContent> < DialogActions > < Button onClick = { handleClick } > next < /Button> < /DialogActions> < /Dialog>); } ; export default NestedDialog ;