@mui/codemod 7.0.0-alpha.2 → 7.0.0-beta.0

package/README.md

@@ -1606,6 +1606,21 @@ npx @mui/codemod@latest deprecations/popper-props <path>
 npx @mui/codemod@latest deprecations/outlined-input-props <path>
 ```
 
+#### `rating-props`
+
+```diff
+ <Snackbar
+-  IconContainerComponent={CustomContainer}
++  slots={{
++    icon: { component: CustomContainer }
++  }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/snackbar-props <path>
+```
+
 #### `select-classes`
 
 JS transforms:
@@ -1711,35 +1726,35 @@ JS transforms:
  MuiSlider: {
    styleOverrides: {
      root: {
--      [`&.${sliderClasses.thumbSizeSmall}`]: {
+-      [`& .${sliderClasses.thumbSizeSmall}`]: {
 +      [`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClasses.thumbSizeMedium}`]: {
+-      [`& .${sliderClasses.thumbSizeMedium}`]: {
 +      [`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClasses.thumbColorPrimary}`]: {
+-      [`& .${sliderClasses.thumbColorPrimary}`]: {
 +      [`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClasses.thumbColorSecondary}`]: {
+-      [`& .${sliderClasses.thumbColorSecondary}`]: {
 +      [`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClasses.thumbColorError}`]: {
+-      [`& .${sliderClasses.thumbColorError}`]: {
 +      [`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClrsses.thumbColorInfo}`]: {
-+      [`&.${soiderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
+-      [`& .${sliderClasses.thumbColorInfo}`]: {
++      [`&.${sliderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClasses.thumbColorSuccess}`]: {
+-      [`& .${sliderClasses.thumbColorSuccess}`]: {
 +      [`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
--      [`&.${sliderClasses.thumbColorWarning}`]: {
+-      [`& .${sliderClasses.thumbColorWarning}`]: {
 +      [`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`]: {
          color: 'red',
        },
@@ -1770,7 +1785,7 @@ CSS transforms:
 ```
 
 ```bash
-npx @mui/codemod@latest deprecations/button-classes <path>
+npx @mui/codemod@latest deprecations/slider-classes <path>
 ```
 
 #### `tooltip-props`
@@ -2073,6 +2088,40 @@ npx @mui/codemod@latest deprecations/typography-props <path>
 
 ### v7.0.0
 
+#### `grid-props`
+
+<!-- #npm-tag-reference -->
+
+```bash
+npx @mui/codemod@next v7.0.0/grid-props <path>
+```
+
+Updates the usage of the `@mui/material/Grid`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs.
+
+```diff
+ <Grid
+-   xs={12}
+-   sm={6}
+-   xsOffset={2}
+-   smOffset={3}
++   size={{ xs: 12, sm: 6 }}
++   offset={{ xs: 2, sm: 3 }}
+ />
+```
+
+You can provide the theme breakpoints via options, for example, `--jscodeshift='--muiBreakpoints=mobile,desktop'`, to use your custom breakpoints in the transformation.
+
+<!-- #npm-tag-reference -->
+
+```bash
+npx @mui/codemod@next v7.0.0/grid-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'
+```
+
+```diff
+- <Grid mobile={12} mobileOffset={2} desktop={6} desktopOffset={4} >
++ <Grid size={{ mobile: 12, desktop: 6 }} offset={{ mobile: 2, desktop: 4 }} >
+```
+
 #### `lab-removed-components`
 
 <!-- #npm-tag-reference -->

package/deprecations/all/deprecations-all.js

@@ -48,6 +48,8 @@ var _tabsProps = _interopRequireDefault(require("../tabs-props"));
 var _tabsClasses = _interopRequireDefault(require("../tabs-classes"));
 var _drawerProps = _interopRequireDefault(require("../drawer-props"));
 var _mobileStepperProps = _interopRequireDefault(require("../mobile-stepper-props"));
+var _menuProps = _interopRequireDefault(require("../menu-props"));
+var _ratingProps = _interopRequireDefault(require("../rating-props"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -96,5 +98,7 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _tabsClasses.default)(file, api, options);
   file.source = (0, _drawerProps.default)(file, api, options);
   file.source = (0, _mobileStepperProps.default)(file, api, options);
+  file.source = (0, _menuProps.default)(file, api, options);
+  file.source = (0, _ratingProps.default)(file, api, options);
   return file.source;
 }

package/deprecations/menu-props/index.js

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

package/deprecations/menu-props/menu-props.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _movePropIntoSlots = _interopRequireDefault(require("../utils/movePropIntoSlots"));
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Menu',
+    propName: 'MenuListProps',
+    slotName: 'list'
+  });
+  (0, _movePropIntoSlots.default)(j, {
+    root,
+    componentName: 'Menu',
+    propName: 'TransitionComponent',
+    slotName: 'transition'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Menu',
+    propName: 'TransitionProps',
+    slotName: 'transition'
+  });
+  return root.toSource(printOptions);
+}

package/deprecations/menu-props/test-cases/actual.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+  TransitionComponent: CustomTransition,
+  MenuListProps: {
+    disablePadding: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+  TransitionComponent: CustomTransition,
+  MenuListProps: {
+    disablePadding: true
+  },
+  TransitionProps: {
+    timeout: 200
+  },
+  slotProps: {
+    root: {
+      disablePortal: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+  TransitionComponent: CustomTransition,
+  MenuListProps: {
+    disablePadding: true
+  },
+  TransitionProps: {
+    timeout: 200
+  },
+  slotProps: {
+    root: {
+      disablePortal: true
+    },
+    list: {
+      disableListWrap: true
+    },
+    transition: {
+      'aria-hidden': true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+  TransitionComponent: CustomTransition,
+  MenuListProps: {
+    disablePadding: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMenu, {
+  TransitionComponent: CustomTransition,
+  MenuListProps: {
+    disablePadding: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});

package/deprecations/menu-props/test-cases/expected.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+  slotProps: {
+    list: {
+      disablePadding: true
+    },
+    transition: {
+      timeout: 200
+    }
+  },
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+  slotProps: {
+    root: {
+      disablePortal: true
+    },
+    list: {
+      disablePadding: true
+    },
+    transition: {
+      timeout: 200
+    }
+  },
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
+  slotProps: {
+    root: {
+      disablePortal: true
+    },
+    list: {
+      ...{
+        disablePadding: true
+      },
+      ...{
+        disableListWrap: true
+      }
+    },
+    transition: {
+      ...{
+        timeout: 200
+      },
+      ...{
+        'aria-hidden': true
+      }
+    }
+  },
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+  slotProps: {
+    list: {
+      disablePadding: true
+    },
+    transition: {
+      timeout: 200
+    }
+  },
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMenu, {
+  TransitionComponent: CustomTransition,
+  MenuListProps: {
+    disablePadding: true
+  },
+  TransitionProps: {
+    timeout: 200
+  }
+});

package/deprecations/menu-props/test-cases/theme.actual.js

@@ -0,0 +1,33 @@
+"use strict";
+
+fn({
+  MuiMenu: {
+    defaultProps: {
+      MenuListProps: {
+        disablePadding: true
+      },
+      TransitionComponent: CustomTransition,
+      TransitionProps: {
+        timeout: 200
+      }
+    }
+  }
+});
+fn({
+  MuiMenu: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      MenuListProps: {
+        disablePadding: true
+      },
+      TransitionProps: {
+        timeout: 200
+      },
+      slotProps: {
+        root: {
+          disablePortal: true
+        }
+      }
+    }
+  }
+});

package/deprecations/menu-props/test-cases/theme.expected.js

@@ -0,0 +1,39 @@
+"use strict";
+
+fn({
+  MuiMenu: {
+    defaultProps: {
+      slotProps: {
+        list: {
+          disablePadding: true
+        },
+        transition: {
+          timeout: 200
+        }
+      },
+      slots: {
+        transition: CustomTransition
+      }
+    }
+  }
+});
+fn({
+  MuiMenu: {
+    defaultProps: {
+      slotProps: {
+        root: {
+          disablePortal: true
+        },
+        list: {
+          disablePadding: true
+        },
+        transition: {
+          timeout: 200
+        }
+      },
+      slots: {
+        transition: CustomTransition
+      }
+    }
+  }
+});

package/deprecations/rating-props/index.js

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

package/deprecations/rating-props/rating-props.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Rating',
+    propName: 'IconContainerComponent',
+    slotName: 'icon',
+    slotPropName: 'component'
+  });
+  return root.toSource(printOptions);
+}

package/deprecations/rating-props/test-cases/actual.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Rating = _interopRequireDefault(require("@mui/material/Rating"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  IconContainerComponent: CustomIconContainer
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer,
+  slots: {
+    root: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  IconContainerComponent: CustomIconContainer,
+  slots: {
+    ...outerSlots
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer,
+  slotProps: {
+    icon: {
+      id: 'my-rating-icon'
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiRating, {
+  IconContainerComponent: CustomIconContainer
+});

package/deprecations/rating-props/test-cases/expected.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Rating = _interopRequireDefault(require("@mui/material/Rating"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slots: {
+    root: 'div'
+  },
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  slots: {
+    ...outerSlots
+  },
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slotProps: {
+    icon: {
+      id: 'my-rating-icon',
+      component: CustomIconContainer
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiRating, {
+  IconContainerComponent: CustomIconContainer
+});

package/deprecations/rating-props/test-cases/theme.actual.js

@@ -0,0 +1,31 @@
+"use strict";
+
+fn({
+  MuiRating: {
+    defaultProps: {
+      IconContainerComponent: CustomContainer
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      IconContainerComponent: CustomContainer,
+      slotProps: {
+        root: {}
+      }
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      IconContainerComponent: CustomContainer,
+      slotProps: {
+        icon: {
+          id: 'my-rating-icon'
+        }
+      }
+    }
+  }
+});

package/deprecations/rating-props/test-cases/theme.expected.js

@@ -0,0 +1,37 @@
+"use strict";
+
+fn({
+  MuiRating: {
+    defaultProps: {
+      slotProps: {
+        icon: {
+          component: CustomContainer
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      slotProps: {
+        root: {},
+        icon: {
+          component: CustomContainer
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      slotProps: {
+        icon: {
+          id: 'my-rating-icon',
+          component: CustomContainer
+        }
+      }
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-beta.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",

package/v7.0.0/all/v7-all.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = v7All;
+var _gridProps = _interopRequireDefault(require("../grid-props"));
 var _labRemovedComponents = _interopRequireDefault(require("../lab-removed-components"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
 function v7All(file, api, options) {
+  (0, _gridProps.default)(file, api, options);
   (0, _labRemovedComponents.default)(file, api, options);
   return file.source;
 }

package/v7.0.0/grid-props/grid-props.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = gridV2Props;
+const possibleDefaultImports = ['@mui/material/Grid', '@mui/system/Grid', '@mui/joy/Grid'];
+const possibleNamedImports = {
+  '@mui/material': 'Grid',
+  '@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));
+    const itemProp = el.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'item');
+    if (itemProp) {
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => attr.type === 'JSXAttribute' && attr.name.name !== 'item');
+    }
+    const zeroMinWidthProp = el.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'zeroMinWidth');
+    if (zeroMinWidthProp) {
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => attr.type === 'JSXAttribute' && attr.name.name !== 'zeroMinWidth');
+    }
+  });
+  return root.toSource(printOptions);
+}

package/v7.0.0/grid-props/index.js

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

package/v7.0.0/grid-props/test-cases/actual.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _GridLegacy = _interopRequireDefault(require("@mui/material/GridLegacy"));
+var _Grid2 = _interopRequireDefault(require("@mui/system/Grid"));
+var _Grid3 = _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)(_Grid2.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid3.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  item: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  item: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  item: false
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  zeroMinWidth: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  zeroMinWidth: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  zeroMinWidth: false
+});
+
+// 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)(_GridLegacy.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.GridLegacy, {
+  xs: 2
+});

package/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+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/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+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
+  }
+});

package/v7.0.0/grid-props/test-cases/expected.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _GridLegacy = _interopRequireDefault(require("@mui/material/GridLegacy"));
+var _Grid2 = _interopRequireDefault(require("@mui/system/Grid"));
+var _Grid3 = _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, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid2.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid3.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Grid, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: {
+    xs: "grow",
+    sm: "auto",
+    md: 2,
+    lg: "grow",
+    xl: false
+  }
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  offset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: "auto"
+  }
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4
+  },
+  offset: {
+    xs: 0,
+    sm: 2
+  }
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridLegacy.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.GridLegacy, {
+  xs: 2
+});