unleash.unleash/frontend/src/component/common/SidebarModal/SidebarModal.tsx

import { ReactNode } from 'react';
import { Modal, Backdrop } from '@mui/material';
import Fade from '@mui/material/Fade';
import { useStyles } from 'component/common/SidebarModal/SidebarModal.styles';
import { SIDEBAR_MODAL_ID } from 'utils/testIds';

interface ISidebarModalProps {
    open: boolean;
    onClose: () => void;
    label: string;
    children: ReactNode;
}

const TRANSITION_DURATION = 250;

export const SidebarModal = ({
    open,
    onClose,
    label,
    children,
}: ISidebarModalProps) => {
    const { classes: styles } = useStyles();

    return (
        <Modal
            open={open}
            onClose={onClose}
            closeAfterTransition
            aria-label={label}
            BackdropComponent={Backdrop}
            BackdropProps={{ timeout: TRANSITION_DURATION }}
            data-testid={SIDEBAR_MODAL_ID}
        >
            <Fade timeout={TRANSITION_DURATION} in={open}>
                <div className={styles.modal}>{children}</div>
            </Fade>
        </Modal>
    );
};