[material-ui][Dialog] Add codemod for deprecated props (@sai6855) (#46335)

Co-authored-by: sai chand <[email protected]>
Co-authored-by: sai6855 <[email protected]>

Author: github-actions[bot]

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

@@ -1136,10 +1136,11 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
 
 ## Dialog
 
-Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-classes) below to migrate the code as described in the following sections:
+Use the [dialog-classes-codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-classes) and [dialog-props-codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#dialog-props) below to migrate the code as described in the following sections:
 
 ```bash
 npx @mui/codemod@latest deprecations/dialog-classes <path>
+npx @mui/codemod@latest deprecations/dialog-props <path>
 ```
 
 ### Composed CSS classes
@@ -1172,6 +1173,39 @@ Here's how to migrate:
      },
    },
  },
+
+```
+
+### TransitionComponent
+
+The Dialog's `TransitionComponent` prop was deprecated in favor of `slots.transition`:
+
+```diff
+ <Dialog
+-  TransitionComponent={CustomTransition}
++  slots={{ transition: CustomTransition }}
+```
+
+### TransitionProps
+
+The Dialog's `TransitionProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <Dialog
+-  TransitionProps={{ unmountOnExit: true }}
++  slotProps={{ transition: { unmountOnExit: true } }}
+ />
+```
+
+### PaperProps
+
+The Dialog's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
+
+```diff
+ <Dialog
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+ />
 ```
 
 ## Drawer

packages/mui-codemod/README.md

@@ -1066,6 +1066,28 @@ CSS transforms:
 npx @mui/codemod@latest deprecations/dialog-classes <path>
 ```
 
+#### `dialog-props`
+
+JS transforms:
+
+```diff
+ <Dialog
+-  PaperProps={paperProps}
++  slotProps={{ paper: paperProps }}
+- TransitionComponent={CustomTransition}
++ slots={{ transition: CustomTransition }}
+- TransitionProps={CustomTransitionProps}
++ slotProps={{ transition: CustomTransitionProps }}
+ />
+     },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@latest deprecations/dialog-props <path>
+```
+
 #### `drawer-classes`
 
 JS transforms:

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

@@ -13,6 +13,7 @@ import transformCircularProgressClasses from '../circular-progress-classes';
 import transformDividerProps from '../divider-props';
 import transformDrawerClasses from '../drawer-classes';
 import transformDialogClasses from '../dialog-classes';
+import transformDialogProps from '../dialog-props';
 import transformFilledInputProps from '../filled-input-props';
 import transformFormControlLabelProps from '../form-control-label-props';
 import transformImageListItemBarClasses from '../image-list-item-bar-classes';
@@ -70,6 +71,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformDividerProps(file, api, options);
   file.source = transformDrawerClasses(file, api, options);
   file.source = transformDialogClasses(file, api, options);
+  file.source = transformDialogProps(file, api, options);
   file.source = transformFilledInputProps(file, api, options);
   file.source = transformFormControlLabelProps(file, api, options);
   file.source = transformImageListItemBarClasses(file, api, options);

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

@@ -0,0 +1,38 @@
+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,
+    packageName: options.packageName,
+    componentName: 'Dialog',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Dialog',
+    propName: 'TransitionProps',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Dialog',
+    propName: 'PaperProps',
+    slotName: 'paper',
+  });
+
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './dialog-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('dialog-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] dialog-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        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/dialog-props/index.js

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

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

@@ -0,0 +1,44 @@
+import Dialog from '@mui/material/Dialog';
+import { Dialog as MyDialog } from '@mui/material';
+
+<Dialog
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  PaperProps={PaperProps}
+/>;
+<MyDialog
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  PaperProps={PaperProps}
+/>;
+<Dialog
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    root: 'div',
+  }}
+  PaperProps={PaperProps}
+/>;
+<MyDialog
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    ...outerSlots,
+  }}
+  PaperProps={PaperProps}
+/>;
+<Dialog
+  TransitionComponent={ComponentTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+  PaperProps={PaperProps}
+/>;
+// should skip non MUI components
+<NonMuiDialog
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  PaperProps={PaperProps}
+/>;

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

@@ -0,0 +1,52 @@
+import Dialog from '@mui/material/Dialog';
+import { Dialog as MyDialog } from '@mui/material';
+
+<Dialog
+  slots={{
+    transition: CustomTransition
+  }}
+  slotProps={{
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }} />;
+<MyDialog
+  slots={{
+    transition: CustomTransition
+  }}
+  slotProps={{
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }} />;
+<Dialog
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }} />;
+<MyDialog
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }} />;
+<Dialog
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+  slotProps={{
+    transition: CustomTransitionProps,
+    paper: PaperProps
+  }} />;
+// should skip non MUI components
+<NonMuiDialog
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  PaperProps={PaperProps}
+/>;

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

@@ -0,0 +1,36 @@
+fn({
+  MuiDialog: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      PaperProps: PaperProps,
+    },
+  },
+});
+
+fn({
+  MuiDialog: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+      },
+      PaperProps: PaperProps,
+    },
+  },
+});
+
+fn({
+  MuiDialog: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+        transition: SlotTransition,
+      },
+      PaperProps: PaperProps,
+    },
+  },
+});

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

@@ -0,0 +1,46 @@
+fn({
+  MuiDialog: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+
+      slotProps: {
+        transition: CustomTransitionProps,
+        paper: PaperProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiDialog: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: CustomTransition
+      },
+
+      slotProps: {
+        transition: CustomTransitionProps,
+        paper: PaperProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiDialog: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: SlotTransition,
+      },
+
+      slotProps: {
+        transition: CustomTransitionProps,
+        paper: PaperProps
+      }
+    },
+  },
+});