[material-ui][Snackbar] Add Slots and SlotProps

docs/data/material/components/snackbars/ConsecutiveSnackbars.js

@@ -45,7 +45,7 @@ export default function ConsecutiveSnackbars() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        TransitionProps={{ onExited: handleExited }}
+        slotProps={{ transition: { onExited: handleExited } }}
         message={messageInfo ? messageInfo.message : undefined}
         action={
           <React.Fragment>

docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx

@@ -55,7 +55,7 @@ export default function ConsecutiveSnackbars() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        TransitionProps={{ onExited: handleExited }}
+        slotProps={{ transition: { onExited: handleExited } }}
         message={messageInfo ? messageInfo.message : undefined}
         action={
           <React.Fragment>

docs/data/material/components/snackbars/DirectionSnackbar.js

@@ -53,7 +53,7 @@ export default function DirectionSnackbar() {
       <Snackbar
         open={open}
         onClose={handleClose}
-        TransitionComponent={transition}
+        slots={{ transition }}
         message="I love snacks"
         key={transition ? transition.name : ''}
       />

docs/data/material/components/snackbars/DirectionSnackbar.tsx

@@ -57,7 +57,7 @@ export default function DirectionSnackbar() {
       <Snackbar
         open={open}
         onClose={handleClose}
-        TransitionComponent={transition}
+        slots={{ transition }}
         message="I love snacks"
         key={transition ? transition.name : ''}
       />

docs/data/material/components/snackbars/TransitionsSnackbar.js

@@ -41,7 +41,7 @@ export default function TransitionsSnackbar() {
       <Snackbar
         open={state.open}
         onClose={handleClose}
-        TransitionComponent={state.Transition}
+        slots={{ transition: state.Transition }}
         message="I love snacks"
         key={state.Transition.name}
         autoHideDuration={1200}

docs/data/material/components/snackbars/TransitionsSnackbar.tsx

@@ -57,7 +57,7 @@ export default function TransitionsSnackbar() {
       <Snackbar
         open={state.open}
         onClose={handleClose}
-        TransitionComponent={state.Transition}
+        slots={{ transition: state.Transition }}
         message="I love snacks"
         key={state.Transition.name}
         autoHideDuration={1200}

docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview

@@ -4,7 +4,7 @@
 <Snackbar
   open={state.open}
   onClose={handleClose}
-  TransitionComponent={state.Transition}
+  slots={{ transition: state.Transition }}
   message="I love snacks"
   key={state.Transition.name}
   autoHideDuration={1200}

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

@@ -11,8 +11,16 @@
     "autoHideDuration": { "type": { "name": "number" }, "default": "null" },
     "children": { "type": { "name": "element" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "ClickAwayListenerProps": { "type": { "name": "object" } },
-    "ContentProps": { "type": { "name": "object" } },
+    "ClickAwayListenerProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.clickAwayListener</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "ContentProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.content</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "disableWindowBlurListener": { "type": { "name": "bool" }, "default": "false" },
     "key": { "type": { "name": "custom", "description": "any" } },
     "message": { "type": { "name": "node" } },
@@ -25,28 +33,78 @@
     },
     "open": { "type": { "name": "bool" } },
     "resumeHideDuration": { "type": { "name": "number" } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ clickAwayListener?: func<br>&#124;&nbsp;object<br>&#124;&nbsp;{ children: element, disableReactTree?: bool, mouseEvent?: 'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;'onPointerDown'<br>&#124;&nbsp;'onPointerUp'<br>&#124;&nbsp;false, onClickAway?: func, touchEvent?: 'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false }<br>&#124;&nbsp;{ children: element, disableReactTree?: bool, key?: number<br>&#124;&nbsp;{ __@toStringTag@9059: 'BigInt', toLocaleString: func, toString: func, valueOf: func }<br>&#124;&nbsp;string, mouseEvent?: 'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;'onPointerDown'<br>&#124;&nbsp;'onPointerUp'<br>&#124;&nbsp;false, onClickAway?: func, touchEvent?: 'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false }, content?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ clickAwayListener?: elementType, content?: elementType, root?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Grow",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}"
     },
-    "TransitionProps": { "type": { "name": "object" }, "default": "{}" }
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
   },
   "name": "Snackbar",
   "imports": [
     "import Snackbar from '@mui/material/Snackbar';",
     "import { Snackbar } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "'div'",
+      "class": "MuiSnackbar-root"
+    },
+    {
+      "name": "content",
+      "description": "The component that renders the content slot.",
+      "default": "SnackbarContent",
+      "class": null
+    },
+    {
+      "name": "clickAwayListener",
+      "description": "The component that renders the clickAwayListener slot.",
+      "default": "ClickAwayListener",
+      "class": null
+    },
+    {
+      "name": "transition",
+      "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Grow",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "anchorOriginBottomCenter",
@@ -83,12 +141,6 @@
       "className": "MuiSnackbar-anchorOriginTopRight",
       "description": "Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`.",
       "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiSnackbar-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/snackbar/snackbar.json

@@ -36,6 +36,8 @@
     "resumeHideDuration": {
       "description": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -79,7 +81,12 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "clickAwayListener": "The component that renders the clickAwayListener slot.",
+    "content": "The component that renders the content slot.",
+    "root": "The component that renders the root slot.",
+    "transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

packages/mui-codemod/README.md

@@ -1612,6 +1612,27 @@ npx @mui/codemod@latest deprecations/select-classes <path>
 npx @mui/codemod@latest deprecations/slider-props <path>
 ```
 
+#### `snackbar-props`
+
+```diff
+ <Snackbar
+-    ClickAwayListenerProps={CustomClickAwayListenerProps}
+-    ContentProps={CustomContentProps}
+-    TransitionComponent={CustomTransition}
+-    TransitionProps={CustomTransitionProps}
++    slots={{ transition: CustomTransition }}
++    slotProps={{
++        clickAwayListener: CustomClickAwayListenerProps,
++        content: CustomContentProps,
++        transition: CustomTransitionProps
++    }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/snackbar-props <path>
+```
+
 #### `tooltip-props`
 
 ```diff

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -34,6 +34,7 @@ import transformTooltipProps from '../tooltip-props';
 import transformTablePaginationProps from '../table-pagination-props';
 import transformCardHeaderProps from '../card-header-props';
 import transformPopoverProps from '../popover-props';
+import transformSnackbarProps from '../snackbar-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -76,6 +77,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTablePaginationProps(file, api, options);
   file.source = transformCardHeaderProps(file, api, options);
   file.source = transformPopoverProps(file, api, options);
+  file.source = transformSnackbarProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/snackbar-props/index.js

@@ -0,0 +1 @@
+export { default } from './snackbar-props';

packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.js

@@ -0,0 +1,42 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Snackbar',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Snackbar',
+    propName: 'TransitionProps',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Snackbar',
+    propName: 'ContentProps',
+    slotName: 'content',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Snackbar',
+    propName: 'ClickAwayListenerProps',
+    slotName: 'clickAwayListener',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.test.js

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './snackbar-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'snackbar-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/snackbar-props/test-cases/actual.js

@@ -0,0 +1,51 @@
+import Snackbar from '@mui/material/Snackbar';
+import { Snackbar as MySnackbar } from '@mui/material';
+
+<Snackbar
+  ClickAwayListenerProps={CustomListenerProps}
+  ContentProps={CustomContentProps}
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+/>;
+<MySnackbar
+  ClickAwayListenerProps={CustomListenerProps}
+  ContentProps={CustomContentProps}
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+/>;
+<Snackbar
+  ClickAwayListenerProps={CustomListenerProps}
+  ContentProps={CustomContentProps}
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    root: 'div',
+  }}
+/>;
+<MySnackbar
+  ClickAwayListenerProps={CustomListenerProps}
+  ContentProps={CustomContentProps}
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    ...outerSlots,
+  }}
+/>;
+<Snackbar
+  ClickAwayListenerProps={CustomListenerProps}
+  ContentProps={CustomContentProps}
+  TransitionComponent={ComponentTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiSnackbar
+  ClickAwayListenerProps={CustomListenerProps}
+  ContentProps={CustomContentProps}
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+/>;