[material-ui][Backdrop] Deprecate TransitionComponent

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -253,6 +253,24 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`:
  />;
 ```
 
+## Backdrop
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#backdrop-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/backdrop-props <path>
+```
+
+### TransitionComponent
+
+The Backdrop's `TransitionComponent` prop was deprecated in favor of `slots.transition`:
+
+```diff
+ <Slider
+-  TransitionComponent={CustomTransition}
++  slots={{ transition: CustomTransition }}
+```
+
 ## Button
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections:

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

@@ -14,11 +14,17 @@
     },
     "invisible": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ root?: object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ root?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ root?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {
@@ -28,7 +34,12 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Fade" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Fade",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
@@ -41,18 +52,26 @@
     "import Backdrop from '@mui/material/Backdrop';",
     "import { Backdrop } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "'div'",
+      "class": "MuiBackdrop-root"
+    },
+    {
+      "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": "Fade",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "invisible",
       "className": "MuiBackdrop-invisible",
       "description": "Styles applied to the root element if `invisible={true}`.",
       "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiBackdrop-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/backdrop/backdrop.json

@@ -16,12 +16,8 @@
       "description": "If <code>true</code>, the backdrop is invisible. It can be used when rendering a popover or a custom select component."
     },
     "open": { "description": "If <code>true</code>, the component is shown." },
-    "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future."
-    },
-    "slots": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future."
-    },
+    "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."
     },
@@ -37,7 +33,10 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>invisible={true}</code>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "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

@@ -274,6 +274,19 @@ npx @mui/codemod@next deprecations/alert-props <path>
  />;
 ```
 
+#### `backdrop-props`
+
+```diff
+ <Backdrop
+-    TransitionComponent={CustomTransition}
++    slots={{ transition: CustomTransition }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/backdrop-props <path>
+```
+
 #### `button-classes`
 
 JS transforms:
@@ -876,7 +889,6 @@ CSS transforms:
 +.MuiPaginationItem-outlined.MuiPaginationItem-primary
 -.MuiPaginationItem-outlinedSecondary
 +.MuiPaginationItem-outlined.MuiPaginationItem-secondary
- />
 ```
 
 ```bash
@@ -929,6 +941,7 @@ npx @mui/codemod@next deprecations/slider-props <path>
 
 ```bash
 npx @mui/codemod@latest deprecations/step-label-props <path>
+
 ```
 
 ### v5.0.0

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

@@ -8,6 +8,7 @@ import transformChipClasses from '../chip-classes';
 import transformPaginationItemClasses from '../pagination-item-classes';
 import transformAlertClasses from '../alert-classes';
 import transformStepLabelProps from '../step-label-props';
+import transformBackdropProps from '../backdrop-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -24,6 +25,8 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformPaginationItemClasses(file, api, options);
   file.source = transformAlertClasses(file, api, options);
   file.source = transformStepLabelProps(file, api, options);
+  file.source = transformBackdropProps(file, api, options);
+
 
   return file.source;
 }

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

@@ -0,0 +1,84 @@
+import findComponentJSX from '../../util/findComponentJSX';
+import assignObject from '../../util/assignObject';
+import appendAttribute from '../../util/appendAttribute';
+
+/**
+ * @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;
+
+  findComponentJSX(j, { root, componentName: 'Backdrop' }, (elementPath) => {
+    const index = elementPath.node.openingElement.attributes.findIndex(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionComponent',
+    );
+
+    if (index !== -1) {
+      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
+      let hasNode = false;
+      elementPath.node.openingElement.attributes.forEach((attr) => {
+        if (attr.name?.name === 'slots') {
+          hasNode = true;
+          assignObject(j, {
+            target: attr,
+            key: 'transition',
+            expression: removed[0].value.expression,
+          });
+        }
+      });
+
+      if (!hasNode) {
+        appendAttribute(j, {
+          target: elementPath.node,
+          attributeName: 'slots',
+          expression: j.objectExpression([
+            j.objectProperty(j.identifier('transition'), removed[0].value.expression),
+          ]),
+        });
+      }
+    }
+  });
+
+  root.find(j.ObjectProperty, { key: { name: 'TransitionComponent' } }).forEach((path) => {
+    if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiBackdrop') {
+      const { properties: defaultPropsProperties } = path.parent.value;
+
+      const existingSlots = defaultPropsProperties.find((prop) => prop.key.name === 'slots');
+      const slots = existingSlots
+        ? existingSlots.value.properties.reduce((acc, prop) => {
+            return { ...acc, [prop.key.name]: prop.value };
+          }, {})
+        : {};
+
+      const transitionComponent =
+        defaultPropsProperties.find((prop) => prop.key.name === 'TransitionComponent') ?? {};
+
+      const updatedSlots = j.objectExpression(
+        Object.entries({
+          transition: transitionComponent?.value,
+          ...slots,
+        }).map(([slot, value]) => {
+          return j.objectProperty(j.identifier(slot), value);
+        }),
+      );
+
+      if (existingSlots) {
+        existingSlots.value = updatedSlots;
+        path.prune();
+      } else {
+        path.replace(
+          j.property(
+            'init',
+            j.identifier('slots'),
+            j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]),
+          ),
+        );
+      }
+    }
+  });
+
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './backdrop-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('backdrop-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] backdrop-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: true } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

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

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

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

@@ -0,0 +1,25 @@
+import Backdrop from '@mui/material/Backdrop';
+import { Backdrop as MyBackdrop } from '@mui/material';
+
+<Backdrop TransitionComponent={CustomTransition} />;
+<MyBackdrop TransitionComponent={CustomTransition} />;
+<Backdrop
+  TransitionComponent={CustomTransition}
+  slots={{
+    root: 'div',
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+  }}
+/>;
+<MyBackdrop
+  TransitionComponent={CustomTransition}
+  slots={{
+    ...outerSlots,
+  }}
+  slotProps={{
+    ...outerSlotProps,
+  }}
+/>;
+// should skip non MUI components
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js

@@ -0,0 +1,27 @@
+import Backdrop from '@mui/material/Backdrop';
+import { Backdrop as MyBackdrop } from '@mui/material';
+
+<Backdrop slots={{
+  transition: CustomTransition
+}} />;
+<MyBackdrop slots={{
+  transition: CustomTransition
+}} />;
+<Backdrop
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+  }} />;
+<MyBackdrop
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+  }} />;
+// should skip non MUI components
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;

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

@@ -0,0 +1,18 @@
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      slots: {
+        root: 'div',
+      },
+    },
+  },
+});