@mui/codemod 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/v5.0.0/theme-spacing.test/large-actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSearch;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
@@ -25,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
 var _styles = require("@mui/material/styles");
 var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
-var _i18n = require("docs/src/modules/utils/i18n");
+var _i18n = require("@mui/docs/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
 var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -351,11 +350,12 @@ function AppSearch() {
             canonicalAs,
             canonicalPathname
           } = (0, _helpers.pathnameToLanguage)(`${parseUrl.pathname}${parseUrl.hash}`);
-          return (0, _extends2.default)({}, item, {
+          return {
+            ...item,
             pathname: canonicalPathname,
             as: canonicalAs,
             userLanguage
-          });
+          };
         });
       },
       hitComponent: DocSearchHit,
@@ -433,16 +433,16 @@ function AppSearch() {
             transition: 'margin 0.2s',
             fontSize: theme.typography.pxToRem(16)
           },
-          '& .DocSearch-Modal': (0, _extends2.default)({
+          '& .DocSearch-Modal': {
             maxWidth: '700px',
-            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`
-          }, theme.palette.mode === 'dark' && {
-            border: '1px solid',
-            borderColor: theme.palette.primaryDark[700]
-          }, {
+            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`,
+            ...(theme.palette.mode === 'dark' && {
+              border: '1px solid',
+              borderColor: theme.palette.primaryDark[700]
+            }),
             // docsearch.css: <= 750px will be full screen modal
             borderRadius: `clamp(0px, (100vw - 750px) * 9999, ${theme.shape.borderRadius}px)`
-          }),
+          },
           '& .DocSearch-SearchBar': {
             borderBottom: '1px solid',
             borderColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSearch;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
@@ -25,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
 var _styles = require("@mui/material/styles");
 var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
-var _i18n = require("docs/src/modules/utils/i18n");
+var _i18n = require("@mui/docs/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
 var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -351,11 +350,12 @@ function AppSearch() {
             canonicalAs,
             canonicalPathname
           } = (0, _helpers.pathnameToLanguage)(`${parseUrl.pathname}${parseUrl.hash}`);
-          return (0, _extends2.default)({}, item, {
+          return {
+            ...item,
             pathname: canonicalPathname,
             as: canonicalAs,
             userLanguage
-          });
+          };
         });
       },
       hitComponent: DocSearchHit,
@@ -433,16 +433,16 @@ function AppSearch() {
             transition: 'margin 0.2s',
             fontSize: theme.typography.pxToRem(16)
           },
-          '& .DocSearch-Modal': (0, _extends2.default)({
+          '& .DocSearch-Modal': {
             maxWidth: '700px',
-            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`
-          }, theme.palette.mode === 'dark' && {
-            border: '1px solid',
-            borderColor: theme.palette.primaryDark[700]
-          }, {
+            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`,
+            ...(theme.palette.mode === 'dark' && {
+              border: '1px solid',
+              borderColor: theme.palette.primaryDark[700]
+            }),
             // docsearch.css: <= 750px will be full screen modal
             borderRadius: `clamp(0px, (100vw - 750px) * 9999, ${theme.shape.borderRadius}px)`
-          }),
+          },
           '& .DocSearch-SearchBar': {
             borderBottom: '1px solid',
             borderColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],

package/node/v5.0.0/variant-prop.test/actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextFieldComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _TextField4 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Select5 = _interopRequireDefault(require("@material-ui/core/Select"));
@@ -20,19 +19,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Select2 = () => _MuiSelect || (_MuiSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select6.default, {}));
 function TextFieldComponent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, props)), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+      ...props
+    }), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "outlined"
     })), _TextField2 || (_TextField2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "standard"
     })), _TextField3 || (_TextField3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, (0, _extends2.default)({}, props)), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+      ...props
+    }), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "outlined"
     })), _Select2 || (_Select2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "standard"
     })), _Select3 || (_Select3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, (0, _extends2.default)({}, props)), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+      ...props
+    }), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "outlined"
     })), _FormControl2 || (_FormControl2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "standard"
@@ -41,10 +46,11 @@ function TextFieldComponent(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
       options: [],
       getOptionLabel: option => option.title,
-      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, params, {
+      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+        ...params,
         label: "Combo box",
         variant: "outlined"
-      }))
+      })
     }), _CustomSelect || (_CustomSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelect, {})), _SelectedRoute || (_SelectedRoute = /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedRoute, {})), _FromToSelect || (_FromToSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelect, {})), _FromToSelectDrawer || (_FromToSelectDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelectDrawer, {})), _MuiTextField || (_MuiTextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField5.default, {})), _Select4 || (_Select4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Select2, {})), _MuiFormControl || (_MuiFormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {}))]
   });
 }

package/node/v5.0.0/variant-prop.test/expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextFieldComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _TextField4 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Select5 = _interopRequireDefault(require("@material-ui/core/Select"));
@@ -22,25 +21,28 @@ const Select2 = () => _MuiSelect || (_MuiSelect = /*#__PURE__*/(0, _jsxRuntime.j
 }));
 function TextFieldComponent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+      variant: "standard",
+      ...props
+    }), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "outlined"
     })), _TextField2 || (_TextField2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "standard"
     })), _TextField3 || (_TextField3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+      variant: "standard",
+      ...props
+    }), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "outlined"
     })), _Select2 || (_Select2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "standard"
     })), _Select3 || (_Select3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+      variant: "standard",
+      ...props
+    }), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "outlined"
     })), _FormControl2 || (_FormControl2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "standard"
@@ -49,10 +51,11 @@ function TextFieldComponent(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
       options: [],
       getOptionLabel: option => option.title,
-      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, params, {
+      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+        ...params,
         label: "Combo box",
         variant: "outlined"
-      }))
+      })
     }), _CustomSelect || (_CustomSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelect, {})), _SelectedRoute || (_SelectedRoute = /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedRoute, {})), _FromToSelect || (_FromToSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelect, {})), _FromToSelectDrawer || (_FromToSelectDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelectDrawer, {})), _MuiTextField || (_MuiTextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField5.default, {
       variant: "standard"
     })), _Select4 || (_Select4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Select2, {})), _MuiFormControl || (_MuiFormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {

package/node/v5.0.0/with-mobile-dialog.test/expected.js

@@ -5,20 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 // FIXME checkout https://mui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
-const withMuiMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMuiMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "lg",
   fullScreen: false
-}));
+});
 
 // FIXME checkout https://mui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
-const withMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "lg",
   fullScreen: false
-}));
+});
 const A = withMobileDialog()(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: props.width

package/node/v5.0.0/with-width.test/expected.js

@@ -5,18 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withMuiWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMuiWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "xs"
-}));
+});
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "xs"
-}));
+});
 const A = withWidth()(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: props.width

package/node/v6.0.0/all/v6-all.js

@@ -1,17 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = v6All;
+var _listItemButtonProp = _interopRequireDefault(require("../list-item-button-prop/list-item-button-prop"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-function v6All(file) {
-  // Currently empty, when adding the first codemod:
-  //   - Read mui-codemod/CONTRIBUTING.md
-  //   - Follow mui-codemod/src/deprecations/all/deprecations-all.js as a guide
-  //   - Remove this comment
+function v6All(file, api, options) {
+  file.source = (0, _listItemButtonProp.default)(file, api, options);
   return file.source;
 }

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

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = gridV2Props;
+const possibleDefaultImports = ['@mui/material/Grid2', '@mui/system/Grid', '@mui/joy/Grid'];
+const possibleNamedImports = {
+  '@mui/material': 'Grid2',
+  '@mui/system': 'Grid',
+  '@mui/joy': 'Grid'
+};
+const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function gridV2Props(file, api, options) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints;
+  const printOptions = options.printOptions;
+  const gridLocalNames = [];
+  root.find(j.ImportDeclaration, decl => possibleDefaultImports.includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportDefaultSpecifier') {
+        gridLocalNames.push(spec.local.name);
+      }
+    });
+  });
+  root.find(j.ImportDeclaration, decl => Object.keys(possibleNamedImports).includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        if (possibleNamedImports[decl.node.source.value] === spec.imported.name) {
+          gridLocalNames.push(spec.local.name);
+        }
+      }
+    });
+  });
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: name => gridLocalNames.includes(name)
+      }
+    }
+  }).forEach(el => {
+    const size = j.objectExpression([]);
+    const spreadProps = [];
+    const attributesToPrune = [];
+    el.node.openingElement.attributes.forEach(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        spreadProps.push(attr);
+      }
+    });
+    const breakpointNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && breakpoints.includes(path.node.name.name));
+    breakpointNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name;
+      const nodeValue = node.value;
+      let value;
+      if (nodeValue === null) {
+        value = j.stringLiteral('grow');
+      } else if (nodeValue.type === 'JSXExpressionContainer') {
+        if (nodeValue.expression.value === true) {
+          value = j.stringLiteral('grow');
+        } else {
+          value = nodeValue.expression;
+        }
+      } else {
+        value = nodeValue;
+      }
+      size.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          if (breakpoints.includes(property.key.name)) {
+            size.properties.push(j.property('init', property.key, property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (size.properties.length) {
+      let sizePropValue = size;
+      if (size.properties.length === 1 && size.properties[0].key.name === 'xs') {
+        sizePropValue = size.properties[0].value;
+      }
+      if (sizePropValue.type !== 'StringLiteral') {
+        sizePropValue = j.jsxExpressionContainer(sizePropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !breakpoints.includes(attr?.name?.name));
+    const offset = j.objectExpression([]);
+    const offsetNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name.endsWith('Offset') && breakpoints.includes(path.node.name.name.replace('Offset', '')));
+    offsetNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name.replace('Offset', '');
+      const value = node.value.type === 'JSXExpressionContainer' ? node.value.expression : node.value;
+      offset.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          const breakpoint = property.key.name.replace('Offset', '');
+          if (property.key.name.endsWith('Offset') && breakpoints.includes(breakpoint)) {
+            offset.properties.push(j.property('init', j.identifier(breakpoint), property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (offset.properties.length) {
+      let offsetPropValue = offset;
+      if (offset.properties.length === 1 && offset.properties[0].key.name === 'xs') {
+        offsetPropValue = offset.properties[0].value;
+      }
+      if (offsetPropValue.type !== 'StringLiteral') {
+        offsetPropValue = j.jsxExpressionContainer(offsetPropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !breakpoints.includes(attr?.name?.name.replace('Offset', '')));
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !attributesToPrune.includes(attr));
+  });
+  return root.toSource(printOptions);
+}

package/node/v6.0.0/grid-v2-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 _gridV2Props.default;
+  }
+});
+var _gridV2Props = _interopRequireDefault(require("./grid-v2-props"));

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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)(_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid3.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid4.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid2, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  xs: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: true,
+  sm: "auto",
+  md: 2,
+  lg: true,
+  xl: false
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xsOffset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xsOffset: 2,
+  smOffset: 4,
+  mdOffset: 6,
+  lgOffset: 8,
+  xlOffset: 10
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xsOffset: 2,
+  smOffset: "auto"
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2,
+  sm: 4,
+  xsOffset: 0,
+  smOffset: 2
+});
+
+// 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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  customXs: 2,
+  customSm: 4,
+  customMd: 6
+});
+
+// Transforms custom breakpoints offset
+/*#__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

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