[docs] Fix modal transition demos

docs/data/base/components/modal/NestedModal.js

@@ -68,11 +68,11 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"
         aria-describedby="child-modal-description"
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={[style, { width: '200px' }]}>
           <h2 id="child-modal-title">Text in a child modal</h2>

docs/data/base/components/modal/NestedModal.tsx

@@ -65,11 +65,11 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"
         aria-describedby="child-modal-description"
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={[style, { width: '200px' }]}>
           <h2 id="child-modal-title">Text in a child modal</h2>

docs/data/base/components/modal/SpringModal.js

@@ -1,25 +1,17 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { Box, styled } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 import { useSpring, animated } from '@react-spring/web';
 
 const BackdropUnstyled = React.forwardRef((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
+  const { open, ...other } = props;
+  return <Fade ref={ref} in={open} {...other} />;
 });
 
 BackdropUnstyled.propTypes = {
-  className: PropTypes.string.isRequired,
-  open: PropTypes.bool,
+  open: PropTypes.bool.isRequired,
 };
 
 const Modal = styled(ModalUnstyled)`
@@ -52,12 +44,12 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null, true);
       }
     },
   });
@@ -70,8 +62,8 @@ const Fade = React.forwardRef(function Fade(props, ref) {
 });
 
 Fade.propTypes = {
-  children: PropTypes.element,
-  in: PropTypes.bool.isRequired,
+  children: PropTypes.element.isRequired,
+  in: PropTypes.bool,
   onEnter: PropTypes.func,
   onExited: PropTypes.func,
 };
@@ -107,7 +99,7 @@ export default function SpringModal() {
         <Fade in={open}>
           <Box sx={style}>
             <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: '16px' }}>
+            <span id="spring-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

docs/data/base/components/modal/SpringModal.tsx

@@ -1,22 +1,15 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import { Box, styled, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 import { useSpring, animated } from '@react-spring/web';
 
 const BackdropUnstyled = React.forwardRef<
   HTMLDivElement,
-  { open?: boolean; className: string }
+  { children: React.ReactElement; open: boolean }
 >((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
+  const { open, ...other } = props;
+  return <Fade ref={ref} in={open} {...other} />;
 });
 
 const Modal = styled(ModalUnstyled)`
@@ -43,10 +36,11 @@ const Backdrop = styled(BackdropUnstyled)`
 `;
 
 interface FadeProps {
-  children?: React.ReactElement;
-  in: boolean;
-  onEnter?: () => {};
-  onExited?: () => {};
+  children: React.ReactElement;
+  in?: boolean;
+  onClick?: any;
+  onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
+  onExited?: (node: HTMLElement, isAppearing: boolean) => void;
 }
 
 const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
@@ -56,12 +50,12 @@ const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, re
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null as any, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null as any, true);
       }
     },
   });
@@ -104,7 +98,7 @@ export default function SpringModal() {
         <Fade in={open}>
           <Box sx={style}>
             <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: '16px' }}>
+            <span id="spring-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

docs/data/base/components/modal/TransitionsModal.js

@@ -1,24 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { Box, styled } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 import Button from '@mui/base/ButtonUnstyled';
 
 const BackdropUnstyled = React.forwardRef((props, ref) => {
-  const { open, className, ...other } = props;
+  const { open, ...other } = props;
   return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
+    <Fade in={open}>
+      <div ref={ref} {...other} />
+    </Fade>
   );
 });
 
 BackdropUnstyled.propTypes = {
-  className: PropTypes.string.isRequired,
   open: PropTypes.bool,
 };
 
@@ -73,10 +69,10 @@ export default function TransitionsModal() {
         closeAfterTransition
         slots={{ backdrop: Backdrop }}
       >
-        <Fade in={open} timeout={300}>
+        <Fade in={open}>
           <Box sx={style}>
             <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: '16px' }}>
+            <span id="transition-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

docs/data/base/components/modal/TransitionsModal.tsx

@@ -1,23 +1,19 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import { Box, styled, Theme } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
 import Button from '@mui/base/ButtonUnstyled';
 
-const BackdropUnstyled = React.forwardRef<
-  HTMLDivElement,
-  { open?: boolean; className: string }
->((props, ref) => {
-  const { open, className, ...other } = props;
-  return (
-    <div
-      className={clsx({ 'MuiBackdrop-open': open }, className)}
-      ref={ref}
-      {...other}
-    />
-  );
-});
+const BackdropUnstyled = React.forwardRef<HTMLDivElement, { open?: boolean }>(
+  (props, ref) => {
+    const { open, ...other } = props;
+    return (
+      <Fade in={open}>
+        <div ref={ref} {...other} />
+      </Fade>
+    );
+  },
+);
 
 const Modal = styled(ModalUnstyled)`
   position: fixed;
@@ -70,10 +66,10 @@ export default function TransitionsModal() {
         closeAfterTransition
         slots={{ backdrop: Backdrop }}
       >
-        <Fade in={open} timeout={300}>
+        <Fade in={open}>
           <Box sx={style}>
             <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: '16px' }}>
+            <span id="transition-modal-description" style={{ marginTop: 16 }}>
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
           </Box>

docs/data/material/components/modal/NestedModal.js

@@ -30,7 +30,6 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"

docs/data/material/components/modal/NestedModal.tsx

@@ -30,7 +30,6 @@ function ChildModal() {
     <React.Fragment>
       <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
-        hideBackdrop
         open={open}
         onClose={handleClose}
         aria-labelledby="child-modal-title"

docs/data/material/components/modal/SpringModal.js

@@ -8,34 +8,44 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';
 
 const Fade = React.forwardRef(function Fade(props, ref) {
-  const { in: open, children, onEnter, onExited, ...other } = props;
+  const {
+    children,
+    in: open,
+    onClick,
+    onEnter,
+    onExited,
+    ownerState,
+    ...other
+  } = props;
   const style = useSpring({
     from: { opacity: 0 },
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null, true);
       }
     },
   });
 
   return (
     <animated.div ref={ref} style={style} {...other}>
-      {children}
+      {React.cloneElement(children, { onClick })}
     </animated.div>
   );
 });
 
 Fade.propTypes = {
-  children: PropTypes.element,
-  in: PropTypes.bool.isRequired,
+  children: PropTypes.element.isRequired,
+  in: PropTypes.bool,
+  onClick: PropTypes.any,
   onEnter: PropTypes.func,
   onExited: PropTypes.func,
+  ownerState: PropTypes.any,
 };
 
 const style = {
@@ -64,9 +74,11 @@ export default function SpringModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{
-          timeout: 500,
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            TransitionComponent: Fade,
+          },
         }}
       >
         <Fade in={open}>

docs/data/material/components/modal/SpringModal.tsx

@@ -7,32 +7,42 @@ import Typography from '@mui/material/Typography';
 import { useSpring, animated } from '@react-spring/web';
 
 interface FadeProps {
-  children?: React.ReactElement;
-  in: boolean;
-  onEnter?: () => {};
-  onExited?: () => {};
+  children: React.ReactElement;
+  in?: boolean;
+  onClick?: any;
+  onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
+  onExited?: (node: HTMLElement, isAppearing: boolean) => void;
+  ownerState?: any;
 }
 
 const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
-  const { in: open, children, onEnter, onExited, ...other } = props;
+  const {
+    children,
+    in: open,
+    onClick,
+    onEnter,
+    onExited,
+    ownerState,
+    ...other
+  } = props;
   const style = useSpring({
     from: { opacity: 0 },
     to: { opacity: open ? 1 : 0 },
     onStart: () => {
       if (open && onEnter) {
-        onEnter();
+        onEnter(null as any, true);
       }
     },
     onRest: () => {
       if (!open && onExited) {
-        onExited();
+        onExited(null as any, true);
       }
     },
   });
 
   return (
     <animated.div ref={ref} style={style} {...other}>
-      {children}
+      {React.cloneElement(children, { onClick })}
     </animated.div>
   );
 });
@@ -63,9 +73,11 @@ export default function SpringModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{
-          timeout: 500,
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            TransitionComponent: Fade,
+          },
         }}
       >
         <Fade in={open}>