I’m trying to build a custom component wrapping mui dialog including some additional functionaity like draggable, resizable, minimize/maximize, fullscreen/restore. I also was to place the dialog at a predifined location of the screen(not the default location) and fullscreen and draggability should be limited with in the parent container element.

Basically what I’m doing is wraping the Paper compoment of dialog with a Draggable component of react-draggable and dialog content is wrapped with a ResizableBox compoment of react-resizable

Component looks like following, I have created a simple app to test this functionality too. It can be found here on github.

const DialogWrapper = styled(Dialog)(({ theme }) => ({
    // top: -150,
    // left: 1419,
    position: 'absolute'
}))

const Title = styled(DialogTitle)(({ theme }) => ({
    cursor: 'move',
    backgroundColor: '#007db9',
    padding: 5,
    borderRadius: '10px 10px 0px 0px',
    boxShadow: '0 0 4px #000000b3',
}))

const TitleContent = styled('div')(({ theme }) => ({
    display: "flex",
    flexDirection: "row",
    padding: 0
}))

const DialogControlIcons = styled('div')(({ theme }) => ({
    marginLeft: "auto",
    color: 'white'
}))

const ControlButton = styled(Button)(({ theme }) => ({
    color: 'white',
    minWidth: 30
}))

const ModalTitle = styled('span')(({ theme }) => ({
    fontWeight: 700,
    fontSize: '16px !important',
    color: 'white',
    paddingTop: 5,
    paddingLeft: 10
}))

type MapModalType = {
    status: boolean,
    title: string,
    onClose: () => void,
    children: ReactNode
}

const PaperComponent = (props: PaperProps) => {
    const nodeRef = useRef(null);
    return (
        <Draggable
            handle="#draggable-dialog-title"
            cancel={'[class*="MuiDialogContent-root"]'}
            nodeRef={nodeRef}
            bounds="parent"
        >
            <Paper {...props} ref={nodeRef}/>
        </Draggable>
    );
}

const ResizableModal = ({ status, onClose, title,  children }: MapModalType) => {
    const [height, setHeight] = useState(554);
    const [width, setWidth] = useState(1043);
    const [isFullscreen, setIsFullsreen] = useState(false);
    const dialogRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        console.log('dialogRef', dialogRef)
    }, [dialogRef]);

    const handleClose = (reason: string) => {
        if (reason === 'backdropClick') return;
        onClose();
    };

    const handleCloseCick = () => {
        onClose();
    }

    const handleFullscreenClick = () => {
        setIsFullsreen(!isFullscreen);
        if(dialogRef.current?.offsetWidth){
            setWidth(dialogRef.current?.offsetWidth);
        }
        if(dialogRef.current?.offsetHeight){
            setWidth(dialogRef.current?.offsetHeight);
        }
    }

    const getResizableBoxHeight = (movementY: number) => {
        if(dialogRef == null || dialogRef.current == null) return;
        return isFullscreen ? dialogRef.current.offsetHeight : height + movementY;
    }

    const getResizableBoxWidth = (movementX: number) => {
        if(dialogRef == null || dialogRef.current == null) return;
        return isFullscreen ? dialogRef.current.offsetWidth : height + movementX;
    }

    const onResizableBoxResize = (event: any) => {
        // console.log('h: ', event.movementX, ' w:', event.movementX);
        setHeight(height + event.movementY);
        setWidth(width + event.movementX);
        // const h = isFullscreen ? dialogRef.current?.offsetWidth : getResizableBoxHeight(event.movementY as number)
        // if(h){
        //     setHeight(h)
        // }
        // const w = isFullscreen ? dialogRef.current?.offsetHeight : getResizableBoxWidth(event.movementX as number)
        // if(w){
        //     setWidth(w);
        // }
    }

    return (
        <>
            <DialogWrapper
                open={status}
                onClose={handleClose}
                PaperComponent={PaperComponent}
                aria-labelledby="draggable-dialog-title"
                hideBackdrop={true}
                transitionDuration={0}
                maxWidth={false}
                fullScreen={isFullscreen}
                // container={() => document.getElementById('ui')}
                // style={{position: 'absolute'}}
                // BackdropProps={{ style: { position: 'absolute' } }}
                ref={(node) => {
                    dialogRef.current = node;
                    // Do your work requiring the node here, but make sure node isn't null.
                    console.log("ref function", node);
                  }}
            >
                <ResizableBox 
                    height={height}
                    width={width}
                    // resizeHandles={['e', 's', 'se']}
                    onResize={onResizableBoxResize}>
                    <>
                        <Title id="draggable-dialog-title">
                            <TitleContent>
                                <ModalTitle>{title}</ModalTitle>
                                <DialogControlIcons>
                                    <ControlButton title="Minimize" size="small">
                                        <MinimizeIcon/>
                                    </ControlButton>
                                    <ControlButton title="Full Screen" size="small" onClick={handleFullscreenClick}>
                                        {isFullscreen ? <FilterNoneIcon/> :  <CropDinIcon/>}
                                    </ControlButton>
                                    <ControlButton title="Close" size="small" onClick={handleCloseCick}>
                                        <CloseIcon/>
                                    </ControlButton>
                                </DialogControlIcons>
                            </TitleContent>
                        </Title>
                        <DialogContent>
                            <DialogContentText>
                                Resize using the control in the bottom right corner.
                            </DialogContentText>
                        </DialogContent>
                    </>
                </ResizableBox>
            </DialogWrapper>
        </>
    )
}

Everything is roughly working but I have following issues that I need to resolve.

1. I can set bound property to parent or provide a selector to provide a container for the dialog to more/resize but as soon as I set top,right styles to the dialog element since I need the dialog to to place to the right side of the screen after that dialog cannot be dragged insid the parent component.
2. When dialog is set fullscreen using the param provided by mui dialog the resizable component still stays small since it has it’s own height/width. I tried to get the height/width of dialog using a ref and assign it to resizable when full screen but so far couldn’t get the ref working.
3. When resizeHandles={['e', 's', 'se']} set to ResizableBox enabling drag handlers for south and east dialog appear with scrollers.