@mui/codemod 6.0.0-beta.0 → 6.0.0-beta.3

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)
@@ -1585,6 +1585,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/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/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/node/v6.0.0/sx-prop/sx-v6.js

@@ -270,15 +270,37 @@ function sxV6(file, api, options) {
           }
         }
         if (data.node.argument.type === 'ConditionalExpression') {
-          recurseObjectExpression({
-            ...data,
-            node: data.node.argument,
-            parentNode: data.node
-          });
-          if (data.deleteSelf) {
-            data.deleteSelf();
-          } else {
-            (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+          const isSxSpread = data.node.argument.consequent.type === 'Identifier' && data.node.argument.consequent.name === 'sx' || data.node.argument.alternate.type === 'Identifier' && data.node.argument.alternate.name === 'sx';
+          if (!isSxSpread) {
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument,
+              parentNode: data.node
+            });
+            wrapSxInArray(data.node.argument);
+            if (data.deleteSelf) {
+              data.deleteSelf();
+            } else {
+              (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+            }
+          }
+        }
+        if (data.node.argument.type === 'CallExpression') {
+          var _getObjectKey7, _data$node$argument$c;
+          if (((_getObjectKey7 = (0, _migrateToVariants.getObjectKey)(data.node.argument.callee)) == null ? void 0 : _getObjectKey7.name) === 'theme' && (_data$node$argument$c = data.node.argument.callee.property) != null && (_data$node$argument$c = _data$node$argument$c.name) != null && _data$node$argument$c.startsWith('apply')) {
+            const objIndex = data.node.argument.arguments.findIndex(arg => arg.type === 'ObjectExpression');
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument.arguments[objIndex],
+              buildStyle: styleExpression => {
+                const newArguments = [...data.node.argument.arguments];
+                newArguments[objIndex] = styleExpression;
+                return j.arrowFunctionExpression([j.identifier('theme')], {
+                  ...data.node.argument,
+                  arguments: newArguments
+                });
+              }
+            });
           }
         }
       }
@@ -368,8 +390,8 @@ function sxV6(file, api, options) {
           }
         }
         if ((_data$node$expression = data.node.expressions) != null && _data$node$expression.some(expression => {
-          var _getObjectKey7, _getObjectKey8;
-          return ((_getObjectKey7 = (0, _migrateToVariants.getObjectKey)(expression)) == null ? void 0 : _getObjectKey7.name) === 'theme' || expression.type === 'CallExpression' && ((_getObjectKey8 = (0, _migrateToVariants.getObjectKey)(expression.callee)) == null ? void 0 : _getObjectKey8.name) === 'theme';
+          var _getObjectKey8, _getObjectKey9;
+          return ((_getObjectKey8 = (0, _migrateToVariants.getObjectKey)(expression)) == null ? void 0 : _getObjectKey8.name) === 'theme' || expression.type === 'CallExpression' && ((_getObjectKey9 = (0, _migrateToVariants.getObjectKey)(expression.callee)) == null ? void 0 : _getObjectKey9.name) === 'theme';
         })) {
           rootThemeCallback(data);
         }

package/node/v6.0.0/sx-prop/test-cases/sx-applyStyles.actual.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
+  component: "span",
+  ref: ref,
+  ...props,
+  disabled: Boolean(disabled),
+  onClick: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  },
+  onFocusVisible: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  },
+  sx: [theme => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...((!disableBorder || selected) && {
+      borderColor: 'grey.100'
+    }),
+    ...(selected && {
+      bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+      borderColor: 'primary.300',
+      boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
+      // color: 'primary.500',
+    }),
+    ...(!selected && {
+      '&:hover, &:focus': {
+        bgcolor: 'primary.50',
+        borderColor: 'primary.100',
+        '@media (hover: none)': {
+          bgcolor: 'transparent'
+        }
+      }
+    }),
+    ...theme.applyDarkStyles({
+      color: 'primary.800',
+      ...((!disableBorder || selected) && {
+        borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
+      }),
+      ...(!selected && {
+        '&:hover, &:focus': {
+          bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+          borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+          '@media (hover: none)': {
+            bgcolor: 'transparent'
+          }
+        }
+      }),
+      ...(selected && {
+        bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+        borderColor: 'primary.700',
+        // color: 'primary.300',
+        boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
+      })
+    }),
+    ...theme.applyStyles('light', {
+      color: 'primary.500',
+      ...((!disableBorder || selected) && {
+        borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
+      })
+    }),
+    '&.Mui-disabled': {
+      opacity: 0.4
+    }
+  }), ...(Array.isArray(sx) ? sx : [sx])]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-applyStyles.expected.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
+  component: "span",
+  ref: ref,
+  ...props,
+  disabled: Boolean(disabled),
+  onClick: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  },
+  onFocusVisible: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  },
+  sx: [theme => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...theme.applyDarkStyles({
+      color: 'primary.800'
+    }),
+    ...theme.applyStyles('light', {
+      color: 'primary.500'
+    }),
+    '&.Mui-disabled': {
+      opacity: 0.4
+    }
+  }), (!disableBorder || selected) && {
+    borderColor: 'grey.100'
+  }, selected && (theme => ({
+    bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+    borderColor: 'primary.300',
+    // color: 'primary.500',
+    boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
+  })), !selected && {
+    '&:hover, &:focus': {
+      bgcolor: 'primary.50',
+      borderColor: 'primary.100',
+      '@media (hover: none)': {
+        bgcolor: 'transparent'
+      }
+    }
+  }, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
+    borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
+  })), !selected && (theme => theme.applyDarkStyles({
+    '&:hover, &:focus': {
+      bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+      borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+      '@media (hover: none)': {
+        bgcolor: 'transparent'
+      }
+    }
+  })), selected && (theme => theme.applyDarkStyles({
+    bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+    borderColor: 'primary.700',
+    // color: 'primary.300',
+    boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
+  })), (!disableBorder || selected) && (theme => theme.applyStyles('light', {
+    borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
+  })), ...(Array.isArray(sx) ? sx : [sx])]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-condition.actual.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _it$images$, _productOffer$ui, _productOffer$ui2;
+/*#__PURE__*/(0, _react.createElement)(Card, {
+  ...otherProps,
+  ref: ref,
+  key: it.wcId,
+  "data-p": it.performance / 100,
+  variant: "outlined",
+  sx: {
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    ...(horizontal ? {
+      display: 'flex',
+      flexDirection: 'row',
+      pr: 1
+    } : {
+      display: 'flex',
+      flexDirection: 'column',
+      pb: 0.5
+    }),
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important'
+    }
+  },
+  onClick: ev => {
+    ev.preventDefault();
+    navigate(href);
+  }
+}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+  component: Link,
+  to: href,
+  sx: {
+    position: 'relative',
+    aspectRatio: '100/55',
+    ...(horizontal ? {
+      maxWidth: '50vw',
+      height: {
+        sm: '150px',
+        md: '170px',
+        lg: '210px',
+        xl: '250px'
+      }
+    } : {
+      width: '100%'
+    })
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
+    sizes: imageSizes,
+    loading: imageLoading,
+    src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
+    alt: it.name,
+    style: {
+      aspectRatio: '100/55',
+      ...(horizontal ? {
+        width: 'auto',
+        height: '100%'
+      } : {
+        width: '100%',
+        height: 'auto'
+      })
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
+    children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+      style: {
+        ...defaultPromoCodeStyles,
+        ...productOffer.style,
+        ...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
+      },
+      children: productOffer.offerText
+    })
+  })]
+}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "column",
+  sx: {
+    flex: 1,
+    ...(horizontal ? {
+      py: 1.5,
+      px: 1.5
+    } : {
+      px: 1,
+      pb: 0.5
+    })
+  }
+}));

package/node/v6.0.0/sx-prop/test-cases/sx-condition.expected.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _it$images$, _productOffer$ui, _productOffer$ui2;
+/*#__PURE__*/(0, _react.createElement)(Card, {
+  ...otherProps,
+  ref: ref,
+  key: it.wcId,
+  "data-p": it.performance / 100,
+  variant: "outlined",
+  sx: [{
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important'
+    }
+  }, horizontal ? {
+    display: 'flex',
+    flexDirection: 'row',
+    pr: 1
+  } : {
+    display: 'flex',
+    flexDirection: 'column',
+    pb: 0.5
+  }],
+  onClick: ev => {
+    ev.preventDefault();
+    navigate(href);
+  }
+}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+  component: Link,
+  to: href,
+  sx: [{
+    position: 'relative',
+    aspectRatio: '100/55'
+  }, horizontal ? {
+    maxWidth: '50vw',
+    height: {
+      sm: '150px',
+      md: '170px',
+      lg: '210px',
+      xl: '250px'
+    }
+  } : {
+    width: '100%'
+  }],
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
+    sizes: imageSizes,
+    loading: imageLoading,
+    src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
+    alt: it.name,
+    style: {
+      aspectRatio: '100/55',
+      ...(horizontal ? {
+        width: 'auto',
+        height: '100%'
+      } : {
+        width: '100%',
+        height: 'auto'
+      })
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
+    children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+      style: {
+        ...defaultPromoCodeStyles,
+        ...productOffer.style,
+        ...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
+      },
+      children: productOffer.offerText
+    })
+  })]
+}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "column",
+  sx: [{
+    flex: 1
+  }, horizontal ? {
+    py: 1.5,
+    px: 1.5
+  } : {
+    px: 1,
+    pb: 0.5
+  }]
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-beta.0",
+  "version": "6.0.0-beta.3",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,11 +24,11 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/runtime": "^7.24.7",
-    "@babel/traverse": "^7.24.7",
+    "@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'",