[ModalUnstyled] Define ownerState and slot props' types (#32901)

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

@@ -68,7 +68,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="keep-mounted-modal-description"
         open={open}
         onClose={handleClose}
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
         keepMounted
       >
         <Box sx={style}>

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

@@ -65,7 +65,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="keep-mounted-modal-description"
         open={open}
         onClose={handleClose}
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
         keepMounted
       >
         <Box sx={style}>

docs/data/base/components/modal/KeepMountedModal.tsx.preview

@@ -6,7 +6,7 @@
   aria-describedby="keep-mounted-modal-description"
   open={open}
   onClose={handleClose}
-  BackdropComponent={Backdrop}
+  components={{ Backdrop }}
   keepMounted
 >
   <Box sx={style}>

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

@@ -65,7 +65,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="unstyled-modal-description"
         open={open}
         onClose={handleClose}
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Box sx={style}>
           <h2 id="unstyled-modal-title">Text in a modal</h2>

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

@@ -62,7 +62,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="unstyled-modal-description"
         open={open}
         onClose={handleClose}
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Box sx={style}>
           <h2 id="unstyled-modal-title">Text in a modal</h2>

docs/data/base/components/modal/ModalUnstyled.tsx.preview

@@ -6,7 +6,7 @@
   aria-describedby="unstyled-modal-description"
   open={open}
   onClose={handleClose}
-  BackdropComponent={Backdrop}
+  components={{ Backdrop }}
 >
   <Box sx={style}>
     <h2 id="unstyled-modal-title">Text in a modal</h2>

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

@@ -103,7 +103,7 @@ export default function NestedModal() {
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
         aria-describedby="parent-modal-description"
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Box sx={style}>
           <h2 id="parent-modal-title">Text in a modal</h2>

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

@@ -100,7 +100,7 @@ export default function NestedModal() {
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
         aria-describedby="parent-modal-description"
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Box sx={style}>
           <h2 id="parent-modal-title">Text in a modal</h2>

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

@@ -4,7 +4,7 @@
   onClose={handleClose}
   aria-labelledby="parent-modal-title"
   aria-describedby="parent-modal-description"
-  BackdropComponent={Backdrop}
+  components={{ Backdrop }}
 >
   <Box sx={style}>
     <h2 id="parent-modal-title">Text in a modal</h2>

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

@@ -103,7 +103,7 @@ export default function SpringModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Fade in={open}>
           <Box sx={style}>

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

@@ -100,7 +100,7 @@ export default function SpringModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Fade in={open}>
           <Box sx={style}>

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

@@ -71,7 +71,7 @@ export default function TransitionsModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Fade in={open} timeout={300}>
           <Box sx={style}>

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

@@ -68,7 +68,7 @@ export default function TransitionsModal() {
         open={open}
         onClose={handleClose}
         closeAfterTransition
-        BackdropComponent={Backdrop}
+        components={{ Backdrop }}
       >
         <Fade in={open} timeout={300}>
           <Box sx={style}>

docs/pages/base/api/modal-unstyled.json

@@ -2,17 +2,15 @@
   "props": {
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "open": { "type": { "name": "bool" }, "required": true },
-    "BackdropComponent": { "type": { "name": "elementType" } },
-    "BackdropProps": { "type": { "name": "object" } },
     "classes": { "type": { "name": "object" } },
     "closeAfterTransition": { "type": { "name": "bool" } },
     "component": { "type": { "name": "elementType" } },
     "components": {
-      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "type": { "name": "shape", "description": "{ Backdrop?: elementType, Root?: elementType }" },
       "default": "{}"
     },
     "componentsProps": {
-      "type": { "name": "shape", "description": "{ root?: object }" },
+      "type": { "name": "shape", "description": "{ backdrop?: object, root?: object }" },
       "default": "{}"
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },

docs/pages/material-ui/api/dialog.json

@@ -5,7 +5,9 @@
     "aria-labelledby": { "type": { "name": "string" } },
     "BackdropComponent": {
       "type": { "name": "elementType" },
-      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n  overridesResolver: (props, styles) => {\n    return styles.backdrop;\n  },\n})({\n  zIndex: -1,\n})"
+      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n  overridesResolver: (props, styles) => {\n    return styles.backdrop;\n  },\n})({\n  zIndex: -1,\n})",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>components.Backdrop</code> instead."
     },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },

docs/pages/material-ui/api/modal.json

@@ -4,18 +4,24 @@
     "open": { "type": { "name": "bool" }, "required": true },
     "BackdropComponent": {
       "type": { "name": "elementType" },
-      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n  overridesResolver: (props, styles) => {\n    return styles.backdrop;\n  },\n})({\n  zIndex: -1,\n})"
+      "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n  overridesResolver: (props, styles) => {\n    return styles.backdrop;\n  },\n})({\n  zIndex: -1,\n})",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>components.Backdrop</code> instead."
+    },
+    "BackdropProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>componentsProps.backdrop</code> instead."
     },
-    "BackdropProps": { "type": { "name": "object" } },
     "classes": { "type": { "name": "object" } },
     "closeAfterTransition": { "type": { "name": "bool" } },
     "component": { "type": { "name": "elementType" } },
     "components": {
-      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "type": { "name": "shape", "description": "{ Backdrop?: elementType, Root?: elementType }" },
       "default": "{}"
     },
     "componentsProps": {
-      "type": { "name": "shape", "description": "{ root?: object }" },
+      "type": { "name": "shape", "description": "{ backdrop?: object, root?: object }" },
       "default": "{}"
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },

docs/translations/api-docs/modal-unstyled/modal-unstyled.json

@@ -1,8 +1,6 @@
 {
   "componentDescription": "Modal is a lower-level construct that is leveraged by the following components:\n\n- [Dialog](/material-ui/api/dialog/)\n- [Drawer](/material-ui/api/drawer/)\n- [Menu](/material-ui/api/menu/)\n- [Popover](/material-ui/api/popover/)\n\nIf you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component\nrather than directly using Modal.\n\nThis component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).",
   "propDescriptions": {
-    "BackdropComponent": "A backdrop component. This prop enables custom backdrop rendering.",
-    "BackdropProps": "Props applied to the backdrop element.",
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",

docs/translations/api-docs/modal/modal.json

@@ -6,6 +6,7 @@
     "children": "A single child content element.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "closeAfterTransition": "When set to true the Modal waits until a nested Transition is completed before closing.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "components": "The components used for each slot inside the Modal. Either a string to use a HTML element or a component.",
     "componentsProps": "The props used for each slot inside the Modal.",
     "container": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
@@ -20,8 +21,7 @@
     "onBackdropClick": "Callback fired when the backdrop is clicked.",
     "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.<br><br><strong>Signature:</strong><br><code>function(event: object, reason: string) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>reason:</em> Can be: <code>&quot;escapeKeyDown&quot;</code>, <code>&quot;backdropClick&quot;</code>.",
     "open": "If <code>true</code>, the component is shown.",
-    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component."
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },