@mui/codemod 6.0.0-alpha.10 → 6.0.0-alpha.11

package/codemod.js

@@ -23,7 +23,6 @@ async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
 
   let transformerPath;
   let error;
-  // eslint-disable-next-line no-restricted-syntax
   for (const item of paths) {
     try {
       // eslint-disable-next-line no-await-in-loop
@@ -113,7 +112,6 @@ async function runPostcssTransform(transform, files) {
 
   let configPath;
   let error;
-  // eslint-disable-next-line no-restricted-syntax
   for (const item of paths) {
     try {
       // eslint-disable-next-line no-await-in-loop

package/node/util/migrateToVariants.js

@@ -163,6 +163,11 @@ function migrateToVariants(j, styles) {
   const buildArrowFunctionAST = getBuildArrowFunctionAST(j);
   const objectToArrowFunction = getObjectToArrowFunction(j);
 
+  /**
+   * A map of used variable with its original name
+   */
+  const parameterMap = {};
+
   /**
    *
    * @param {import('jscodeshift').Identifier | import('jscodeshift').BinaryExpression | import('jscodeshift').UnaryExpression | import('jscodeshift').MemberExpression} node
@@ -199,6 +204,21 @@ function migrateToVariants(j, styles) {
     });
     return result;
   }
+  function resolveParamName(name) {
+    if (typeof name !== 'string') {
+      if (name.type === 'Identifier' && parameterMap[name.name]) {
+        if (parameterMap[name.name].includes('-')) {
+          return j.stringLiteral(parameterMap[name.name]);
+        }
+        return {
+          ...name,
+          name: parameterMap[name.name]
+        };
+      }
+      return name;
+    }
+    return parameterMap[name] || name;
+  }
 
   /**
    *
@@ -213,25 +233,25 @@ function migrateToVariants(j, styles) {
     };
     function assignProperties(_node) {
       if (_node.type === 'BinaryExpression') {
-        variables.add(getObjectKey(_node.left).name);
+        variables.add(resolveParamName(getObjectKey(_node.left).name));
         if (_node.operator === '===') {
-          properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
+          properties.push(j.objectProperty(resolveParamName(getIdentifierKey(_node.left)), _node.right));
         } else {
           isAllEqual = false;
         }
       }
       if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
         isAllEqual = false;
-        variables.add(getObjectKey(_node).name);
+        variables.add(resolveParamName(getObjectKey(_node).name));
       }
       if (_node.type === 'UnaryExpression') {
         isAllEqual = false;
         if (_node.argument.type === 'UnaryExpression') {
           // handle `!!variable`
-          variables.add(getObjectKey(_node.argument.argument).name);
+          variables.add(resolveParamName(getObjectKey(_node.argument.argument).name));
         } else {
           // handle `!variable`
-          variables.add(getObjectKey(_node.argument).name);
+          variables.add(resolveParamName(getObjectKey(_node.argument).name));
         }
       }
     }
@@ -267,7 +287,7 @@ function migrateToVariants(j, styles) {
     const currentArrow = currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
     const variables = new Set();
     [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach(param => {
-      variables.add(param.key.name);
+      variables.add(resolveParamName(param.key.name));
     });
     return buildArrowFunctionAST(variables, j.logicalExpression('&&', parentArrow.body, currentArrow.body));
   }
@@ -278,7 +298,24 @@ function migrateToVariants(j, styles) {
     style.params.forEach(param => {
       if (param.type === 'ObjectPattern') {
         param.properties.forEach(prop => {
-          parameters.add(prop.key.name);
+          if (prop.type === 'ObjectProperty') {
+            let paramName;
+            if (prop.value.type === 'Identifier') {
+              paramName = prop.value.name;
+            }
+            if (prop.value.type === 'AssignmentPattern') {
+              paramName = prop.value.left.name;
+            }
+            if (paramName) {
+              parameters.add(paramName);
+              if (prop.key.type === 'Identifier') {
+                parameterMap[paramName] = prop.key.name;
+              }
+              if (prop.key.type === 'StringLiteral') {
+                parameterMap[paramName] = prop.key.value;
+              }
+            }
+          }
         });
       }
       if (param.type === 'Identifier') {

package/node/v6.0.0/styled/test-cases/LogicalStyled.actual.js

@@ -25,4 +25,34 @@ const ToolbarRoot = styled('div', {
   disabled
 }) => ownerState.variant !== 'regular' && !disabled && theme.mixins.toolbar4, ({
   theme
-}) => theme.vars && theme.mixins.toolbar5);
+}) => theme.vars && theme.mixins.toolbar5);
+const ToggleButton = styled('button')(({
+  theme,
+  'aria-pressed': pressed = 'false'
+}) => ({
+  padding: '0.5rem 1rem',
+  borderRadius: theme.vars.radius.sm,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  gap: '8px',
+  minHeight: 40,
+  fontFamily: theme.vars.fontFamily.body,
+  fontSize: theme.vars.fontSize.md,
+  fontWeight: theme.vars.fontWeight.md,
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: theme.vars.palette.neutral.outlinedBorder,
+  backgroundColor: theme.vars.palette.background.body,
+  boxShadow: theme.vars.shadow.md,
+  [theme.focus.selector]: theme.focus.default,
+  ...theme.variants.plain.neutral,
+  ...(pressed === 'false' && {
+    '&:hover': theme.variants.plainHover.neutral,
+    '&:active': theme.variants.plainActive.neutral
+  }),
+  ...(pressed === 'true' && {
+    color: theme.vars.palette.danger.plainColor,
+    backgroundColor: theme.vars.palette.background.body,
+    boxShadow: theme.shadow.sm.replace(/,/g, ', inset')
+  })
+}));

package/node/v6.0.0/styled/test-cases/LogicalStyled.expected.js

@@ -49,4 +49,42 @@ const ToolbarRoot = styled('div', {
   }]
 }), ({
   theme
-}) => theme.vars && theme.mixins.toolbar5);
+}) => theme.vars && theme.mixins.toolbar5);
+const ToggleButton = styled('button')(({
+  theme
+}) => ({
+  padding: '0.5rem 1rem',
+  borderRadius: theme.vars.radius.sm,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  gap: '8px',
+  minHeight: 40,
+  fontFamily: theme.vars.fontFamily.body,
+  fontSize: theme.vars.fontSize.md,
+  fontWeight: theme.vars.fontWeight.md,
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: theme.vars.palette.neutral.outlinedBorder,
+  backgroundColor: theme.vars.palette.background.body,
+  boxShadow: theme.vars.shadow.md,
+  [theme.focus.selector]: theme.focus.default,
+  ...theme.variants.plain.neutral,
+  variants: [{
+    props: {
+      "aria-pressed": 'false'
+    },
+    style: {
+      '&:hover': theme.variants.plainHover.neutral,
+      '&:active': theme.variants.plainActive.neutral
+    }
+  }, {
+    props: {
+      "aria-pressed": 'true'
+    },
+    style: {
+      color: theme.vars.palette.danger.plainColor,
+      backgroundColor: theme.vars.palette.background.body,
+      boxShadow: theme.shadow.sm.replace(/,/g, ', inset')
+    }
+  }]
+}));

package/node/v6.0.0/sx-prop/sx-v6.js

@@ -12,14 +12,18 @@ var _migrateToVariants = require("../../util/migrateToVariants");
  * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
  */
 function getCssVarName(node) {
-  if (node.type === 'MemberExpression') {
-    var _getObjectKey;
-    return `--${(_getObjectKey = (0, _migrateToVariants.getObjectKey)(node)) == null ? void 0 : _getObjectKey.name}-${node.property.name}`;
-  }
-  if (node.type === 'Identifier') {
-    return `--${node.name}`;
+  let varName = '-';
+  while (node.type === 'MemberExpression') {
+    var _node$object, _node$property;
+    varName += `-${((_node$object = node.object) == null ? void 0 : _node$object.name) || ((_node$property = node.property) == null ? void 0 : _node$property.name) || 'unknown'}`;
+    if (node.object.type === 'MemberExpression') {
+      node = node.object;
+    } else {
+      node = node.property;
+    }
   }
-  return '';
+  varName += `-${node.name || 'unknown'}`;
+  return varName;
 }
 
 /**
@@ -112,6 +116,18 @@ function sxV6(file, api, options) {
         conditionalExpressions.push([currentIndex, newElement]);
       }
     }
+    function rootThemeCallback(data) {
+      if (data.root.type === 'ObjectExpression') {
+        var _data$replaceRoot;
+        (_data$replaceRoot = data.replaceRoot) == null || _data$replaceRoot.call(data, buildArrowFunctionAST([j.identifier('theme')], data.root));
+      } else if (data.root.type === 'ArrayExpression') {
+        data.root.elements.forEach((item, index) => {
+          if (item === data.node) {
+            data.root.elements[index] = buildArrowFunctionAST([j.identifier('theme')], data.root);
+          }
+        });
+      }
+    }
 
     /**
      *
@@ -121,10 +137,47 @@ function sxV6(file, api, options) {
       if (data.node.type === 'ArrowFunctionExpression') {
         const returnExpression = (0, _getReturnExpression.default)(data.node);
         if (returnExpression) {
-          recurseObjectExpression({
-            ...data,
-            node: returnExpression
-          });
+          var _returnExpression$pro, _getObjectKey, _getObjectKey2, _getObjectKey3, _getObjectKey4;
+          if (returnExpression.type === 'MemberExpression' && ((_returnExpression$pro = returnExpression.property) == null ? void 0 : _returnExpression$pro.type) === 'ConditionalExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: j.conditionalExpression(returnExpression.property.test, {
+                ...returnExpression,
+                property: returnExpression.property.consequent
+              }, {
+                ...returnExpression,
+                property: returnExpression.property.alternate
+              })
+            });
+          } else if (returnExpression.type === 'TemplateLiteral') {
+            const firstExpression = returnExpression.expressions[0];
+            if ((firstExpression == null ? void 0 : firstExpression.type) === 'ConditionalExpression') {
+              recurseObjectExpression({
+                ...data,
+                node: j.conditionalExpression(firstExpression.test, {
+                  ...returnExpression,
+                  expressions: [firstExpression.consequent, ...(returnExpression.expressions || []).slice(1)]
+                }, {
+                  ...returnExpression,
+                  expressions: [firstExpression.alternate, ...(returnExpression.expressions || []).slice(1)]
+                })
+              });
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: returnExpression
+              });
+            }
+          } else if (returnExpression.type === 'CallExpression' && ((_getObjectKey = (0, _migrateToVariants.getObjectKey)(returnExpression.callee)) == null ? void 0 : _getObjectKey.name) === 'theme' || returnExpression.type === 'MemberExpression' && ((_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(returnExpression)) == null ? void 0 : _getObjectKey2.name) === 'theme' || returnExpression.type === 'BinaryExpression' && (((_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(returnExpression.left)) == null ? void 0 : _getObjectKey3.name) === 'theme' || ((_getObjectKey4 = (0, _migrateToVariants.getObjectKey)(returnExpression.right)) == null ? void 0 : _getObjectKey4.name) === 'theme')) {
+            var _data$replaceValue;
+            (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, returnExpression);
+            rootThemeCallback(data);
+          } else {
+            recurseObjectExpression({
+              ...data,
+              node: returnExpression
+            });
+          }
         }
       }
       if (data.node.type === 'ObjectExpression') {
@@ -162,8 +215,8 @@ function sxV6(file, api, options) {
       }
       if (data.node.type === 'SpreadElement') {
         if (data.node.argument.type === 'LogicalExpression') {
-          var _getObjectKey2, _getObjectKey3;
-          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey2.name : (_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey3.name;
+          var _getObjectKey5, _getObjectKey6;
+          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey5 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey5.name : (_getObjectKey6 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey6.name;
           if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') {
             if (data.node.argument.right.type === 'ObjectExpression') {
               const mode = data.node.argument.left.right.value;
@@ -209,7 +262,7 @@ function sxV6(file, api, options) {
               }
             });
           }
-          wrapSxInArray(j.logicalExpression(data.node.argument.operator, data.node.argument.left, data.node.argument.right));
+          wrapSxInArray(j.logicalExpression(data.node.argument.operator, data.node.argument.left, data.buildStyle(data.node.argument.right)));
           if (data.deleteSelf) {
             data.deleteSelf();
           } else {
@@ -235,7 +288,7 @@ function sxV6(file, api, options) {
           if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression' && (((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' || ((_data$node$test2 = data.node.test) == null ? void 0 : _data$node$test2.type) === 'Identifier')) {
             if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
               if ((0, _migrateToVariants.isThemePaletteMode)(data.node.test.left)) {
-                var _data$replaceValue;
+                var _data$replaceValue2;
                 const consequentKey = (0, _migrateToVariants.getObjectKey)(data.node.consequent);
                 if (consequentKey.type === 'Identifier' && consequentKey.name !== 'theme') {
                   const varName = getCssVarName(data.node.consequent);
@@ -254,17 +307,8 @@ function sxV6(file, api, options) {
                   }
                   data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, replaceUndefined(data.node.consequent)));
                 }
-                (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, replaceUndefined(data.node.alternate));
-                if (data.root.type === 'ObjectExpression') {
-                  var _data$replaceRoot;
-                  (_data$replaceRoot = data.replaceRoot) == null || _data$replaceRoot.call(data, buildArrowFunctionAST([j.identifier('theme')], data.root));
-                } else if (data.root.type === 'ArrayExpression') {
-                  data.root.elements.forEach((item, index) => {
-                    if (item === data.node) {
-                      data.root.elements[index] = buildArrowFunctionAST([j.identifier('theme')], data.root);
-                    }
-                  });
-                }
+                (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, replaceUndefined(data.node.alternate));
+                rootThemeCallback(data);
               } else {
                 var _data$buildStyle, _data$buildStyle2;
                 wrapSxInArray(j.conditionalExpression(data.node.test, (_data$buildStyle = data.buildStyle) == null ? void 0 : _data$buildStyle.call(data, replaceUndefined(data.node.consequent)), (_data$buildStyle2 = data.buildStyle) == null ? void 0 : _data$buildStyle2.call(data, replaceUndefined(data.node.alternate))));
@@ -279,7 +323,7 @@ function sxV6(file, api, options) {
         }
       }
       if (data.node.type === 'TemplateLiteral') {
-        var _data$parentNode2;
+        var _data$parentNode2, _data$node$expression;
         if (((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression') {
           const modeStyles = {};
           data.node.expressions.forEach((expression, index) => {
@@ -318,11 +362,17 @@ function sxV6(file, api, options) {
               data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
             });
             if (data.key) {
-              var _data$replaceValue2;
-              (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node);
+              var _data$replaceValue3;
+              (_data$replaceValue3 = data.replaceValue) == null || _data$replaceValue3.call(data, data.node);
             }
           }
         }
+        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';
+        })) {
+          rootThemeCallback(data);
+        }
       }
     }
   });
@@ -344,7 +394,7 @@ function sxV6(file, api, options) {
         }
         lines.push(line);
       }
-      if (line.includes('sx=')) {
+      if (line.includes('sx=') && !line.match(/sx=\{\{[^}]+\}\}/)) {
         isInStyled = true;
         spaceMatch = line.match(/^\s+/);
       }

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

@@ -38,4 +38,18 @@ var _jsxRuntime = require("react/jsx-runtime");
     backgroundPosition: 'center',
     backgroundImage: `url(${post.image})`
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${colors[data.role]}.softBg`
+  },
+  children: data.role
 });

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

@@ -3,54 +3,54 @@
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
   sx: theme => ({
-    backgroundImage: "var(--items-imageDark)",
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
     ...theme.applyStyles("light", {
-      backgroundImage: "var(--items-imageLight)"
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
     })
   }),
   style: {
-    "--items-imageLight": items[selectedItemIndex].imageLight,
-    "--items-imageDark": items[selectedItemIndex].imageDark
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark
   }
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
   style: {
-    "--items-imageLight": items[selectedItemIndex].imageLight,
-    "--items-imageDark": items[selectedItemIndex].imageDark,
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
     ...props.style
   },
   sx: theme => ({
-    backgroundImage: "var(--items-imageDark)",
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
     ...theme.applyStyles("light", {
-      backgroundImage: "var(--items-imageLight)"
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
     })
   })
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
   style: {
-    "--items-imageLight": items[selectedItemIndex].imageLight,
-    "--items-imageDark": items[selectedItemIndex].imageDark,
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
     color: 'red',
     ...props.style
   },
   sx: theme => ({
-    backgroundImage: "var(--items-imageDark)",
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
     ...theme.applyStyles("light", {
-      backgroundImage: "var(--items-imageLight)"
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
     })
   })
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
   ...props,
   sx: theme => ({
-    backgroundImage: "var(--items-imageDark)",
+    backgroundImage: "var(--imageDark-items-selectedItemIndex)",
     ...theme.applyStyles("light", {
-      backgroundImage: "var(--items-imageLight)"
+      backgroundImage: "var(--imageLight-items-selectedItemIndex)"
     })
   }),
   style: {
-    "--items-imageLight": items[selectedItemIndex].imageLight,
-    "--items-imageDark": items[selectedItemIndex].imageDark,
+    "--imageLight-items-selectedItemIndex": items[selectedItemIndex].imageLight,
+    "--imageDark-items-selectedItemIndex": items[selectedItemIndex].imageDark,
     ...props.style
   }
 });
@@ -68,4 +68,21 @@ var _jsxRuntime = require("react/jsx-runtime");
   style: {
     "--post-image": post.image
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${"var(--colors-data-role)"}.softBg`
+  },
+  style: {
+    "--colors-data-role": colors[data.role]
+  },
+  children: data.role
 });

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

@@ -84,4 +84,24 @@ var _jsxRuntime = require("react/jsx-runtime");
       display: 'none'
     })
   }]
-});
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+  indicator: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIndicator, {
+    variant: activeStep <= index ? 'soft' : 'solid',
+    color: activeStep < index ? 'neutral' : 'primary',
+    children: activeStep <= index ? index + 1 : /*#__PURE__*/(0, _jsxRuntime.jsx)(Check, {})
+  }),
+  sx: {
+    '&:not([data-active])': {
+      '&::after': {
+        ...(activeStep > index && index !== 2 && {
+          bgcolor: 'primary.solidBg'
+        })
+      }
+    }
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepButton, {
+    onClick: () => setActiveStep(index),
+    children: step
+  })
+}, step);

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

@@ -99,4 +99,22 @@ var _jsxRuntime = require("react/jsx-runtime");
   }, open && {
     display: 'none'
   }]
-});
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+  indicator: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIndicator, {
+    variant: activeStep <= index ? 'soft' : 'solid',
+    color: activeStep < index ? 'neutral' : 'primary',
+    children: activeStep <= index ? index + 1 : /*#__PURE__*/(0, _jsxRuntime.jsx)(Check, {})
+  }),
+  sx: [activeStep > index && index !== 2 && {
+    '&:not([data-active])': {
+      '&::after': {
+        bgcolor: 'primary.solidBg'
+      }
+    }
+  }],
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepButton, {
+    onClick: () => setActiveStep(index),
+    children: step
+  })
+}, step);

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnableColorOnDarkAppBar;
+var React = _interopRequireWildcard(require("react"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _MenuIcon;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function appBarLabel(label) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      edge: "start",
+      color: "inherit",
+      "aria-label": "menu",
+      sx: {
+        mr: 2
+      },
+      children: _MenuIcon || (_MenuIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {}))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "h6",
+      noWrap: true,
+      component: "div",
+      sx: {
+        flexGrow: 1
+      },
+      children: label
+    })]
+  });
+}
+const darkTheme = (0, _styles.createTheme)({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#1976d2'
+    }
+  }
+});
+function EnableColorOnDarkAppBar() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
+    spacing: 2,
+    sx: {
+      flexGrow: 1
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+      theme: darkTheme,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppBar.default, {
+        position: "static",
+        color: "primary",
+        enableColorOnDark: true,
+        children: appBarLabel('enableColorOnDark')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppBar.default, {
+        position: "static",
+        color: "primary",
+        children: appBarLabel('default')
+      })]
+    })
+  });
+}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnableColorOnDarkAppBar;
+var React = _interopRequireWildcard(require("react"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _MenuIcon;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function appBarLabel(label) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      edge: "start",
+      color: "inherit",
+      "aria-label": "menu",
+      sx: {
+        mr: 2
+      },
+      children: _MenuIcon || (_MenuIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {}))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "h6",
+      noWrap: true,
+      component: "div",
+      sx: {
+        flexGrow: 1
+      },
+      children: label
+    })]
+  });
+}
+const darkTheme = (0, _styles.createTheme)({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#1976d2'
+    }
+  }
+});
+function EnableColorOnDarkAppBar() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
+    spacing: 2,
+    sx: {
+      flexGrow: 1
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+      theme: darkTheme,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppBar.default, {
+        position: "static",
+        color: "primary",
+        enableColorOnDark: true,
+        children: appBarLabel('enableColorOnDark')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppBar.default, {
+        position: "static",
+        color: "primary",
+        children: appBarLabel('default')
+      })]
+    })
+  });
+}

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+function FacebookCircularProgress(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+    sx: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgress, {
+      variant: "determinate",
+      sx: {
+        color: theme => theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800]
+      },
+      size: 40,
+      thickness: 4,
+      ...props,
+      value: 100
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgress, {
+      variant: "indeterminate",
+      disableShrink: true,
+      sx: {
+        color: theme => theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
+        animationDuration: '550ms',
+        position: 'absolute',
+        left: 0,
+        [`& .${circularProgressClasses.circle}`]: {
+          strokeLinecap: 'round'
+        }
+      },
+      size: 40,
+      thickness: 4,
+      ...props
+    })]
+  });
+}
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  elevation: 0,
+  sx: {
+    display: 'flex',
+    border: theme => `1px solid ${theme.palette.divider}`,
+    flexWrap: 'wrap'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+  sx: {
+    border: theme => `1px solid ${theme.palette.mode === 'dark' ? '#fff' : '#000'}`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsxs)(Typography, {
+  component: "span",
+  variant: "subtitle1",
+  color: "inherit",
+  sx: {
+    position: 'relative',
+    p: 4,
+    pt: 2,
+    pb: theme => `calc(${theme.spacing(1)} + 6px)`
+  },
+  children: [image.title, /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageMarked, {
+    className: "MuiImageMarked-root"
+  })]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
+  sx: {
+    display: 'inline-block',
+    '& input': {
+      width: 200,
+      bgcolor: 'background.paper',
+      color: theme => theme.palette.getContrastText(theme.palette.background.paper)
+    }
+  },
+  id: "custom-input-demo",
+  options: options,
+  renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: params.InputProps.ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "text",
+      ...params.inputProps
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    position: 'relative',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: theme => theme.shadows[5],
+    p: 4
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Backdrop, {
+  sx: {
+    color: '#fff',
+    zIndex: theme => theme.zIndex.drawer + 1
+  },
+  open: open,
+  onClick: handleClose,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgress, {
+    color: "inherit"
+  })
+});

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

@@ -0,0 +1,111 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+function FacebookCircularProgress(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+    sx: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgress, {
+      variant: "determinate",
+      sx: theme => ({
+        color: theme.palette.grey[800],
+        ...theme.applyStyles("light", {
+          color: theme.palette.grey[200]
+        })
+      }),
+      size: 40,
+      thickness: 4,
+      ...props,
+      value: 100
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgress, {
+      variant: "indeterminate",
+      disableShrink: true,
+      sx: theme => ({
+        color: '#308fe8',
+        animationDuration: '550ms',
+        position: 'absolute',
+        left: 0,
+        [`& .${circularProgressClasses.circle}`]: {
+          strokeLinecap: 'round'
+        },
+        ...theme.applyStyles("light", {
+          color: '#1a90ff'
+        })
+      }),
+      size: 40,
+      thickness: 4,
+      ...props
+    })]
+  });
+}
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  elevation: 0,
+  sx: theme => ({
+    display: 'flex',
+    border: `1px solid ${theme.palette.divider}`,
+    flexWrap: 'wrap'
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+  sx: theme => ({
+    border: `1px solid ${'#000'}`,
+    ...theme.applyStyles("dark", {
+      border: `1px solid ${'#fff'}`
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsxs)(Typography, {
+  component: "span",
+  variant: "subtitle1",
+  color: "inherit",
+  sx: theme => ({
+    position: 'relative',
+    p: 4,
+    pt: 2,
+    pb: `calc(${theme.spacing(1)} + 6px)`
+  }),
+  children: [image.title, /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageMarked, {
+    className: "MuiImageMarked-root"
+  })]
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
+  sx: theme => ({
+    display: 'inline-block',
+    '& input': {
+      width: 200,
+      bgcolor: 'background.paper',
+      color: theme.palette.getContrastText(theme.palette.background.paper)
+    }
+  }),
+  id: "custom-input-demo",
+  options: options,
+  renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: params.InputProps.ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      type: "text",
+      ...params.inputProps
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    position: 'relative',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    p: 4
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Backdrop, {
+  sx: theme => ({
+    color: '#fff',
+    zIndex: theme.zIndex.drawer + 1
+  }),
+  open: open,
+  onClick: handleClose,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CircularProgress, {
+    color: "inherit"
+  })
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.11",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,9 +24,9 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/runtime": "^7.24.6",
-    "@babel/traverse": "^7.24.6",
+    "@babel/core": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
+    "@babel/traverse": "^7.24.7",
     "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
     "postcss": "^8.4.38",