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

package/README.md

@@ -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
@@ -1787,7 +1844,7 @@ However, it has some **limitations**:
 npx @mui/codemod@next v6.0.0/grid-v2-props <path>
 ```
 
-Updates the usage of the `Unstable_Grid` (Grid v2) component to have the same API as the `PigmentGrid`.
+Updates the usage of the `@mui/material/Grid2`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs.
 
 ```diff
  <Grid

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/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/v5.0.0/base-remove-unstyled-suffix.test/actual.js

@@ -1,16 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _ButtonUnstyled2 = _interopRequireWildcard(require("@mui/base/ButtonUnstyled"));
+var _ButtonUnstyled = _interopRequireWildcard(require("@mui/base/ButtonUnstyled"));
 var _base = require("@mui/base");
 var _Slider = _interopRequireDefault(require("@mui/base/Slider"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _ButtonUnstyled, _SwitchUnstyled, _BaseInput, _BaseSlider;
+var _Fragment;
 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 App() {
   return;
-  /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [_ButtonUnstyled || (_ButtonUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonUnstyled2.default, {})), ";", _SwitchUnstyled || (_SwitchUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.SwitchUnstyled, {})), ";", _BaseInput || (_BaseInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputUnstyled, {})), ";", _BaseSlider || (_BaseSlider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {})), ";"]
-  });
+  _Fragment || (_Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonUnstyled.default, {}), ";", /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.SwitchUnstyled, {}), ";", /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputUnstyled, {}), ";", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {}), ";"]
+  }));
 }

package/node/v5.0.0/base-remove-unstyled-suffix.test/expected.js

@@ -5,12 +5,12 @@ var _Button = _interopRequireWildcard(require("@mui/base/Button"));
 var _base = require("@mui/base");
 var _Slider = _interopRequireDefault(require("@mui/base/Slider"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _ButtonUnstyled, _SwitchUnstyled, _BaseInput, _BaseSlider;
+var _Fragment;
 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 App() {
   return;
-  /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [_ButtonUnstyled || (_ButtonUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {})), ";", _SwitchUnstyled || (_SwitchUnstyled = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Switch, {})), ";", _BaseInput || (_BaseInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Input, {})), ";", _BaseSlider || (_BaseSlider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {})), ";"]
-  });
+  _Fragment || (_Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {}), ";", /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Switch, {}), ";", /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Input, {}), ";", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider.default, {}), ";"]
+  }));
 }

package/node/v5.0.0/jss-to-tss-react.test/actual-withStyles.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _StyledComp, _StyledComp2, _StyledComp3a, _StyledComp3b, _StyledComp3c;
+var _StyledComp, _Fragment2;
 const styles1 = {
   test: {
     backgroundColor: "purple",
@@ -101,7 +101,7 @@ const styles3c = theme => {
 };
 const StyledComp3c = (0, _core.withStyles)(styles3c)(Comp3);
 function App() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [_StyledComp2 || (_StyledComp2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp2, {})), _StyledComp3a || (_StyledComp3a = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3a, {})), _StyledComp3b || (_StyledComp3b = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3b, {})), _StyledComp3c || (_StyledComp3c = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3c, {}))]
-  });
+  return _Fragment2 || (_Fragment2 = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp2, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3a, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3b, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3c, {})]
+  }));
 }

package/node/v5.0.0/jss-to-tss-react.test/expected-withStyles.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _mui = require("tss-react/mui");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _StyledComp, _StyledComp2, _StyledComp3a, _StyledComp3b, _StyledComp3c;
+var _StyledComp, _Fragment2;
 const styles1 = {
   test: {
     backgroundColor: "purple",
@@ -101,7 +101,7 @@ const styles3c = (theme, _params, classes) => {
 };
 const StyledComp3c = (0, _mui.withStyles)(Comp3, styles3c);
 function App() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [_StyledComp2 || (_StyledComp2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp2, {})), _StyledComp3a || (_StyledComp3a = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3a, {})), _StyledComp3b || (_StyledComp3b = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3b, {})), _StyledComp3c || (_StyledComp3c = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3c, {}))]
-  });
+  return _Fragment2 || (_Fragment2 = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp2, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3a, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3b, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComp3c, {})]
+  }));
 }

package/node/v5.0.0/root-ref.test/expected.js

@@ -1,13 +1,13 @@
 "use strict";
 
 var _jsxRuntime = require("react/jsx-runtime");
-var _Typography, _CssBaseline;
+var _Fragment;
 // 
 // import {  Button } from '@material-ui/core';
 // import { Tooltip,  Button } from '@material-ui/core';
 
 function App() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [_Typography || (_Typography = /*#__PURE__*/(0, _jsxRuntime.jsx)(Typography, {})), _CssBaseline || (_CssBaseline = /*#__PURE__*/(0, _jsxRuntime.jsx)(CssBaseline, {}))]
-  });
+  return _Fragment || (_Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Typography, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(CssBaseline, {})]
+  }));
 }

package/node/v6.0.0/grid-v2-props/grid-v2-props.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = gridV2Props;
-const possibleDefaultImports = ['@mui/material/Unstable_Grid2', '@mui/system/Unstable_Grid', '@mui/joy/Grid'];
+const possibleDefaultImports = ['@mui/material/Grid2', '@mui/system/Grid', '@mui/joy/Grid'];
 const possibleNamedImports = {
-  '@mui/material': 'Unstable_Grid2',
-  '@mui/system': 'Unstable_Grid',
+  '@mui/material': 'Grid2',
+  '@mui/system': 'Grid',
   '@mui/joy': 'Grid'
 };
 const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];

package/node/v6.0.0/grid-v2-props/test-cases/actual.js

@@ -1,27 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
-var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
-var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
+var _Grid2 = _interopRequireDefault(require("@mui/material/Grid"));
+var _Grid3 = _interopRequireDefault(require("@mui/system/Grid"));
+var _Grid4 = _interopRequireDefault(require("@mui/joy/Grid"));
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _joy = require("@mui/joy");
 var _jsxRuntime = require("react/jsx-runtime");
 // Transforms on all the possible imports
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xs: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid3.default, {
   xs: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid4.default, {
   xs: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
   xs: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Grid, {
   xs: 2
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
@@ -29,7 +30,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms responsive sizes
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xs: 2,
   sm: 4,
   md: 6,
@@ -38,7 +39,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms all the possible size values
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xs: true,
   sm: "auto",
   md: 2,
@@ -47,17 +48,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Doesn't add jsx object expression for single string values
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xs: "auto"
 });
 
 // Transforms offset
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xsOffset: 2
 });
 
 // Transforms responsive offset
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xsOffset: 2,
   smOffset: 4,
   mdOffset: 6,
@@ -66,13 +67,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms all the possible offset values
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xsOffset: 2,
   smOffset: "auto"
 });
 
 // Transforms spread props
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   xs: 2,
   sm: 4,
   xsOffset: 0,
@@ -80,6 +81,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid2.default, {
+  xs: 2
+});
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
   xs: 2
 });

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js

@@ -1,17 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Transforms custom breakpoints
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   customXs: 2,
   customSm: 4,
   customMd: 6
 });
 
 // Transforms custom breakpoints offset
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   customXsOffset: 2,
   customSmOffset: 4,
   customMdOffset: 6

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js

@@ -1,10 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Transforms custom breakpoints
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   size: {
     customXs: 2,
     customSm: 4,
@@ -13,7 +13,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms custom breakpoints offset
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   offset: {
     customXs: 2,
     customSm: 4,

package/node/v6.0.0/grid-v2-props/test-cases/expected.js

@@ -1,27 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
-var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
-var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
+var _Grid2 = _interopRequireDefault(require("@mui/material/Grid"));
+var _Grid3 = _interopRequireDefault(require("@mui/system/Grid"));
+var _Grid4 = _interopRequireDefault(require("@mui/joy/Grid"));
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _joy = require("@mui/joy");
 var _jsxRuntime = require("react/jsx-runtime");
 // Transforms on all the possible imports
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   size: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid3.default, {
   size: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid4.default, {
   size: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
   size: 2
 });
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Grid, {
   size: 2
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
@@ -29,7 +30,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms responsive sizes
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   size: {
     xs: 2,
     sm: 4,
@@ -40,7 +41,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms all the possible size values
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   size: {
     xs: "grow",
     sm: "auto",
@@ -51,17 +52,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Doesn't add jsx object expression for single string values
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   size: "auto"
 });
 
 // Transforms offset
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   offset: 2
 });
 
 // Transforms responsive offset
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   offset: {
     xs: 2,
     sm: 4,
@@ -72,7 +73,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms all the possible offset values
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   offset: {
     xs: 2,
     sm: "auto"
@@ -80,7 +81,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Transforms spread props
-/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
   size: {
     xs: 2,
     sm: 4
@@ -92,6 +93,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 });
 
 // Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid2.default, {
+  xs: 2
+});
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
   xs: 2
 });

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

@@ -31,8 +31,8 @@ var _it$images$, _productOffer$ui, _productOffer$ui2;
       transition: 'all 200ms ease-in-out !important'
     }
   },
-  onClick: ev => {
-    ev.preventDefault();
+  onClick: event => {
+    event.preventDefault();
     navigate(href);
   }
 }, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {

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

@@ -30,8 +30,8 @@ var _it$images$, _productOffer$ui, _productOffer$ui2;
     flexDirection: 'column',
     pb: 0.5
   }],
-  onClick: ev => {
-    ev.preventDefault();
+  onClick: event => {
+    event.preventDefault();
     navigate(href);
   }
 }, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,18 +25,18 @@
   },
   "dependencies": {
     "@babel/core": "^7.24.9",
-    "@babel/runtime": "^7.24.8",
-    "@babel/traverse": "^7.24.8",
+    "@babel/runtime": "^7.25.0",
+    "@babel/traverse": "^7.25.1",
     "jscodeshift": "^0.16.1",
     "jscodeshift-add-imports": "^1.0.11",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.40",
     "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/chai": "^4.3.16",
     "@types/jscodeshift": "0.11.11",
-    "chai": "^4.4.1"
+    "chai": "^4.5.0"
   },
   "sideEffects": false,
   "publishConfig": {