@mui/codemod 6.0.0-beta.1 → 6.0.0-beta.3-dev.20240725-084532-7340f56bef

package/README.md

@@ -61,7 +61,7 @@ npx @mui/codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote
 
 ## Included scripts
 
-- [Deprecation](#deprecations)
+- [Deprecations](#deprecations)
 - [v6](#v600)
 - [v5](#v500)
 - [v4](#v400)
@@ -1117,6 +1117,63 @@ npx @mui/codemod@next deprecations/list-item-props <path>
 npx @mui/codemod@next deprecations/grid-props <path>
 ```
 
+#### `image-list-item-bar-classes`
+
+JS transforms:
+
+```diff
+ import { imageListItemBarClasses } from '@mui/material/ImageListItemBar';
+
+ MuiImageListItemBar: {
+   styleOverrides: {
+     root: {
+-      [`& .${imageListItemBarClasses.titleWrapBelow}`]: {
++      [`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`]: {
+         color: 'red',
+       },
+-      [`& .${imageListItemBarClasses.titleWrapActionPosLeft}`]: {
++      [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`]: {
+         color: 'red',
+       },
+-      [`& .${imageListItemBarClasses.titleWrapActionPosRight}`]: {
++      [`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`]: {
+         color: 'red',
+       },
+-      [`& .${imageListItemBarClasses.actionIconActionPosLeft}`]: {
++      [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`]: {
+         color: 'red',
+       },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+- .MuiImageListItemBar-titleWrapBelow
++.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
+```
+
+```diff
+- .MuiImageListItemBar-titleWrapActionPosLeft
++.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
+```
+
+```diff
+- .MuiImageListItemBar-titleWrapActionPosRight
++.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
+```
+
+```diff
+- .MuiImageListItemBar-actionIconActionPosLeft
++.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon
+```
+
+```bash
+npx @mui/codemod@next deprecations/image-list-item-bar-classes <path>
+```
+
 #### `input-base-props`
 
 ```diff
@@ -1585,6 +1642,28 @@ CSS transforms:
 npx @mui/codemod@next deprecations/table-sort-label-classes <path>
 ```
 
+#### `typography-props`
+
+```diff
+ <Typography
+-  paragraph
++  sx={{ marginBottom: '16px' }}
+ />
+```
+
+```diff
+ MuiTypography: {
+   defaultProps: {
+-    paragraph: true
++    sx: { marginBottom: '16px' },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/typography-props <path>
+```
+
 ### v6.0.0
 
 #### `sx-prop`

package/node/deprecations/all/deprecations-all.js

@@ -18,6 +18,7 @@ var _dividerProps = _interopRequireDefault(require("../divider-props"));
 var _filledInputProps = _interopRequireDefault(require("../filled-input-props"));
 var _formControlLabelProps = _interopRequireDefault(require("../form-control-label-props"));
 var _gridProps = _interopRequireDefault(require("../grid-props"));
+var _imageListItemBarClasses = _interopRequireDefault(require("../image-list-item-bar-classes"));
 var _inputBaseProps = _interopRequireDefault(require("../input-base-props"));
 var _inputProps = _interopRequireDefault(require("../input-props"));
 var _modalProps = _interopRequireDefault(require("../modal-props"));
@@ -47,6 +48,7 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _filledInputProps.default)(file, api, options);
   file.source = (0, _formControlLabelProps.default)(file, api, options);
   file.source = (0, _gridProps.default)(file, api, options);
+  file.source = (0, _imageListItemBarClasses.default)(file, api, options);
   file.source = (0, _inputBaseProps.default)(file, api, options);
   file.source = (0, _inputProps.default)(file, api, options);
   file.source = (0, _modalProps.default)(file, api, options);

package/node/deprecations/divider-props/divider-props.js

@@ -20,30 +20,36 @@ function transformer(file, api, options) {
     root,
     componentName: 'Divider'
   }, elementPath => {
-    const hasLightProp = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'light') !== -1;
-    if (hasLightProp) {
-      elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(attr => {
-        if (attr.type === 'JSXAttribute' && attr.name.name === 'light') {
-          return false;
-        }
-        return true;
+    var _lightProp$value;
+    const lightProp = elementPath.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'light');
+    if (!lightProp) {
+      return;
+    }
+    elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(attr => {
+      if (attr.type === 'JSXAttribute' && attr.name.name === 'light') {
+        return false;
+      }
+      return true;
+    });
+    const isLightPropTruthy = ((_lightProp$value = lightProp.value) == null ? void 0 : _lightProp$value.expression.value) !== false;
+    if (!isLightPropTruthy) {
+      return;
+    }
+    const sxIndex = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'sx');
+    if (sxIndex === -1) {
+      (0, _appendAttribute.default)(j, {
+        target: elementPath.node,
+        attributeName: 'sx',
+        expression: j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))])
       });
-      const sxIndex = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'sx');
-      if (sxIndex === -1) {
-        (0, _appendAttribute.default)(j, {
-          target: elementPath.node,
-          attributeName: 'sx',
-          expression: j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))])
+    } else {
+      const opacityIndex = elementPath.node.openingElement.attributes[sxIndex].value.expression.properties.findIndex(key => key.key.name === 'opacity');
+      if (opacityIndex === -1) {
+        (0, _assignObject.default)(j, {
+          target: elementPath.node.openingElement.attributes[sxIndex],
+          key: 'opacity',
+          expression: j.literal('0.6')
         });
-      } else {
-        const opacityIndex = elementPath.node.openingElement.attributes[sxIndex].value.expression.properties.findIndex(key => key.key.name === 'opacity');
-        if (opacityIndex === -1) {
-          (0, _assignObject.default)(j, {
-            target: elementPath.node.openingElement.attributes[sxIndex],
-            key: 'opacity',
-            expression: j.literal('0.6')
-          });
-        }
       }
     }
   });
@@ -52,21 +58,27 @@ function transformer(file, api, options) {
       name: 'MuiDivider'
     }
   }).forEach(path => {
+    var _lightProp$value2;
     const defaultPropsObject = path.value.value.properties.find(key => key.key.name === 'defaultProps');
-    const hasLightProp = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'light') !== -1;
-    if (hasLightProp) {
-      defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => {
-        var _prop$key;
-        return !['light'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
-      });
-      const sxIndex = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'sx');
-      if (sxIndex === -1) {
-        defaultPropsObject.value.properties.push(j.objectProperty(j.identifier('sx'), j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))])));
-      } else {
-        const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex(key => key.key.name === 'opacity');
-        if (opacityIndex === -1) {
-          defaultPropsObject.value.properties[sxIndex].value.properties.push(j.objectProperty(j.identifier('opacity'), j.literal('0.6')));
-        }
+    const lightProp = defaultPropsObject.value.properties.find(prop => prop.key.name === 'light');
+    if (!lightProp) {
+      return;
+    }
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => {
+      var _prop$key;
+      return !['light'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
+    });
+    const isLightPropTruthy = ((_lightProp$value2 = lightProp.value) == null ? void 0 : _lightProp$value2.value) !== false;
+    if (!isLightPropTruthy) {
+      return;
+    }
+    const sxIndex = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'sx');
+    if (sxIndex === -1) {
+      defaultPropsObject.value.properties.push(j.objectProperty(j.identifier('sx'), j.objectExpression([j.objectProperty(j.identifier('opacity'), j.literal('0.6'))])));
+    } else {
+      const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex(key => key.key.name === 'opacity');
+      if (opacityIndex === -1) {
+        defaultPropsObject.value.properties[sxIndex].value.properties.push(j.objectProperty(j.identifier('opacity'), j.literal('0.6')));
       }
     }
   });

package/node/deprecations/divider-props/test-cases/expected.js

@@ -17,16 +17,10 @@ var _jsxRuntime = require("react/jsx-runtime");
   }
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-  className: "test",
-  sx: {
-    opacity: "0.6"
-  }
+  className: "test"
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
-  className: "test",
-  sx: {
-    opacity: "0.6"
-  }
+  className: "test"
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
   className: "test",

package/node/deprecations/divider-props/test-cases/theme.actual.js

@@ -1,5 +1,20 @@
 "use strict";
 
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: false
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: false,
+      className: 'my-class'
+    }
+  }
+});
 fn({
   MuiDivider: {
     defaultProps: {

package/node/deprecations/divider-props/test-cases/theme.expected.js

@@ -1,5 +1,17 @@
 "use strict";
 
+fn({
+  MuiDivider: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class'
+    }
+  }
+});
 fn({
   MuiDivider: {
     defaultProps: {

package/node/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _postcssPlugin = require("./postcss-plugin");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  _postcssPlugin.classes.forEach(({
+    deprecatedClass,
+    replacementSelector
+  }) => {
+    const replacementSelectorPrefix = '&';
+    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/ImageListItemBar$/)).forEach(path => {
+      path.node.specifiers.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'imageListItemBarClasses') {
+          const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');
+          root.find(j.MemberExpression, {
+            object: {
+              name: specifier.local.name
+            },
+            property: {
+              name: deprecatedAtomicClass
+            }
+          }).forEach(memberExpression => {
+            const parent = memberExpression.parentPath.parentPath.value;
+            if (parent.type === j.TemplateLiteral.name) {
+              const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
+              const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+              const atomicClasses = replacementSelector.replaceAll('MuiImageListItemBar-', '').replaceAll(replacementSelectorPrefix, '').replaceAll(' > ', '').split('.').filter(Boolean);
+              if (precedingTemplateElement.value.raw.endsWith(deprecatedClass.startsWith(' ') ? `${replacementSelectorPrefix} .` : `${replacementSelectorPrefix}.`)) {
+                const atomicClassesArgs = [memberExpressionIndex, 1, ...atomicClasses.map(atomicClass => j.memberExpression(memberExpression.value.object, j.identifier(atomicClass)))];
+                parent.expressions.splice(...atomicClassesArgs);
+                if (replacementSelector.includes(' > ')) {
+                  const quasisArgs = [memberExpressionIndex, 1, j.templateElement({
+                    raw: precedingTemplateElement.value.raw.replace(' ', ''),
+                    cooked: precedingTemplateElement.value.cooked.replace(' ', '')
+                  }, false), j.templateElement({
+                    raw: ' > .',
+                    cooked: ' > .'
+                  }, false)];
+                  if (atomicClasses.length === 3) {
+                    quasisArgs.splice(3, 0, j.templateElement({
+                      raw: '.',
+                      cooked: '.'
+                    }, false));
+                  }
+                  parent.quasis.splice(...quasisArgs);
+                } else {
+                  parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
+                    raw: precedingTemplateElement.value.raw,
+                    cooked: precedingTemplateElement.value.cooked
+                  }, false), j.templateElement({
+                    raw: '.',
+                    cooked: '.'
+                  }, false));
+                }
+              }
+            }
+          });
+        }
+      });
+    });
+    const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`);
+    root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
+      path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelectorPrefix}${replacementSelector}`)));
+    });
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/image-list-item-bar-classes/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _imageListItemBarClasses.default;
+  }
+});
+var _imageListItemBarClasses = _interopRequireDefault(require("./image-list-item-bar-classes"));

package/node/deprecations/image-list-item-bar-classes/postcss-plugin.js

@@ -0,0 +1,39 @@
+"use strict";
+
+const classes = [{
+  deprecatedClass: ' .MuiImageListItemBar-titleWrapBelow',
+  replacementSelector: '.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap'
+}, {
+  deprecatedClass: ' .MuiImageListItemBar-titleWrapActionPosLeft',
+  replacementSelector: '.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap'
+}, {
+  deprecatedClass: ' .MuiImageListItemBar-titleWrapActionPosRight',
+  replacementSelector: '.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap'
+}, {
+  deprecatedClass: ' .MuiImageListItemBar-actionIconActionPosLeft',
+  replacementSelector: '.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon'
+}];
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deprecated ImageListItemBar classes with new classes`,
+    Rule(rule) {
+      const {
+        selector
+      } = rule;
+      classes.forEach(({
+        deprecatedClass,
+        replacementSelector
+      }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass}$`);
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    }
+  };
+};
+plugin.postcss = true;
+module.exports = {
+  plugin,
+  classes
+};

package/node/deprecations/image-list-item-bar-classes/postcss.config.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const {
+  plugin
+} = require('./postcss-plugin');
+module.exports = {
+  plugins: [plugin]
+};

package/node/deprecations/image-list-item-bar-classes/test-cases/actual.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _ImageListItemBar = require("@mui/material/ImageListItemBar");
+'& .MuiImageListItemBar-titleWrapBelow';
+'& .MuiImageListItemBar-titleWrapActionPosLeft';
+'& .MuiImageListItemBar-titleWrapActionPosRight';
+'& .MuiImageListItemBar-actionIconActionPosLeft';
+`& .${_ImageListItemBar.imageListItemBarClasses.titleWrapBelow}`;
+`& .${_ImageListItemBar.imageListItemBarClasses.titleWrapActionPosLeft}`;
+`& .${_ImageListItemBar.imageListItemBarClasses.titleWrapActionPosRight}`;
+`& .${_ImageListItemBar.imageListItemBarClasses.actionIconActionPosLeft}`;

package/node/deprecations/image-list-item-bar-classes/test-cases/expected.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _ImageListItemBar = require("@mui/material/ImageListItemBar");
+"&.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap";
+"&.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap";
+"&.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap";
+"&.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon";
+`&.${_ImageListItemBar.imageListItemBarClasses.positionBelow} > .${_ImageListItemBar.imageListItemBarClasses.titleWrap}`;
+`&.${_ImageListItemBar.imageListItemBarClasses.actionPositionLeft} > .${_ImageListItemBar.imageListItemBarClasses.titleWrap}`;
+`&.${_ImageListItemBar.imageListItemBarClasses.actionPositionRight} > .${_ImageListItemBar.imageListItemBarClasses.titleWrap}`;
+`&.${_ImageListItemBar.imageListItemBarClasses.actionPositionLeft} > .${_ImageListItemBar.imageListItemBarClasses.actionIcon}`;

package/node/deprecations/typography-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _typographyProps.default;
+  }
+});
+var _typographyProps = _interopRequireDefault(require("./typography-props"));

package/node/deprecations/typography-props/test-cases/actual.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: false,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: false,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: paragraph,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: paragraph,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  sx: {
+    color: "black"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  sx: {
+    color: "black"
+  }
+});

package/node/deprecations/typography-props/test-cases/expected.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    color: "black",
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    color: "black",
+    marginBottom: "16px"
+  }
+});

package/node/deprecations/typography-props/test-cases/theme.actual.js

@@ -0,0 +1,85 @@
+"use strict";
+
+fn({
+  MuiTypography: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: false
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: false,
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: true
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: true,
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        marginBottom: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        mb: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        color: "black"
+      }
+    }
+  }
+});

package/node/deprecations/typography-props/test-cases/theme.expected.js

@@ -0,0 +1,86 @@
+"use strict";
+
+fn({
+  MuiTypography: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      sx: {
+        marginBottom: "16px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "16px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "16px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        mb: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        color: "black",
+        marginBottom: "16px"
+      }
+    }
+  }
+});

package/node/deprecations/typography-props/typography-props.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _findComponentJSX.default)(j, {
+    root,
+    componentName: 'Typography'
+  }, elementPath => {
+    var _paragraphProp$value;
+    const paragraphProp = elementPath.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'paragraph');
+    if (!paragraphProp) {
+      return;
+    }
+    elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(attr => {
+      if (attr.type === 'JSXAttribute' && attr.name.name === 'paragraph') {
+        return false;
+      }
+      return true;
+    });
+    const isParagraphPropTruthy = ((_paragraphProp$value = paragraphProp.value) == null ? void 0 : _paragraphProp$value.expression.value) !== false;
+    if (!isParagraphPropTruthy) {
+      return;
+    }
+    const sxIndex = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'sx');
+    if (sxIndex === -1) {
+      (0, _appendAttribute.default)(j, {
+        target: elementPath.node,
+        attributeName: 'sx',
+        expression: j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))])
+      });
+    } else {
+      const hasMarginBottom = elementPath.node.openingElement.attributes[sxIndex].value.expression.properties.some(key => key.key.name === 'marginBottom' || key.key.name === 'mb');
+      if (!hasMarginBottom) {
+        (0, _assignObject.default)(j, {
+          target: elementPath.node.openingElement.attributes[sxIndex],
+          key: 'marginBottom',
+          expression: j.literal('16px')
+        });
+      }
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'MuiTypography'
+    }
+  }).forEach(path => {
+    var _paragraphProp$value2;
+    const defaultPropsObject = path.value.value.properties.find(key => key.key.name === 'defaultProps');
+    const paragraphProp = defaultPropsObject.value.properties.find(prop => prop.key.name === 'paragraph');
+    if (!paragraphProp) {
+      return;
+    }
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => {
+      var _prop$key;
+      return !['paragraph'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
+    });
+    const isParagraphPropTruthy = ((_paragraphProp$value2 = paragraphProp.value) == null ? void 0 : _paragraphProp$value2.value) !== false;
+    if (!isParagraphPropTruthy) {
+      return;
+    }
+    const sxIndex = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'sx');
+    if (sxIndex === -1) {
+      defaultPropsObject.value.properties.push(j.objectProperty(j.identifier('sx'), j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))])));
+    } else {
+      const hasMarginBottom = defaultPropsObject.value.properties[sxIndex].value.properties.some(key => key.key.name === 'marginBottom' || key.key.name === 'mb');
+      if (!hasMarginBottom) {
+        defaultPropsObject.value.properties[sxIndex].value.properties.push(j.objectProperty(j.identifier('marginBottom'), j.literal('16px')));
+      }
+    }
+  });
+  return root.toSource(printOptions);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.3-dev.20240725-084532-7340f56bef",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,11 +24,11 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.8",
+    "@babel/core": "^7.24.9",
     "@babel/runtime": "^7.24.8",
     "@babel/traverse": "^7.24.8",
     "jscodeshift": "^0.16.1",
-    "jscodeshift-add-imports": "^1.0.10",
+    "jscodeshift-add-imports": "^1.0.11",
     "postcss": "^8.4.39",
     "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
@@ -44,7 +44,7 @@
     "directory": "build"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "scripts": {
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.js'",