[material-ui][Grid] Deprecate wrap prop

docs/data/material/components/grid/AutoGridNoWrap.js

@@ -27,7 +27,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -43,7 +43,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -59,7 +59,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>

docs/data/material/components/grid/AutoGridNoWrap.tsx

@@ -27,7 +27,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -43,7 +43,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -59,7 +59,7 @@ export default function AutoGridNoWrap() {
           p: 2,
         }}
       >
-        <Grid container wrap="nowrap" spacing={2}>
+        <Grid container flexWrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>

docs/data/material/components/skeleton/YouTube.js

@@ -33,7 +33,7 @@ function Media(props) {
   const { loading = false } = props;
 
   return (
-    <Grid container wrap="nowrap">
+    <Grid container flexWrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
         <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (

docs/data/material/components/skeleton/YouTube.tsx

@@ -36,7 +36,7 @@ function Media(props: MediaProps) {
   const { loading = false } = props;
 
   return (
-    <Grid container wrap="nowrap">
+    <Grid container flexWrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
         <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1053,6 +1053,25 @@ The ListItemSecondaryAction component was deprecated in favor of the `secondaryA
  </ListItem>
 ```
 
+## Grid
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#grid-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/grid-props <path>
+```
+
+### wrap prop
+
+The Grid's `wrap` prop was deprecated in favor of `flexWrap` MUI System prop:
+
+```diff
+ <Grid
+-  wrap="nowrap"
++  flexWrap="nowrap"
+ />;
+```
+
 ## PaginationItem
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/grid.json

@@ -71,7 +71,9 @@
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
       },
-      "default": "'wrap'"
+      "default": "'wrap'",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>flexWrap</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "xl": {
       "type": {

docs/src/layouts/HeroContainer.tsx

@@ -145,7 +145,7 @@ export default function HeroContainer(props: HeroContainerProps) {
           transition: '0.3s',
         }}
       >
-        <Grid container alignItems="center" wrap="nowrap" sx={{ height: '100%', mx: 'auto' }}>
+        <Grid container alignItems="center" flexWrap="nowrap" sx={{ height: '100%', mx: 'auto' }}>
           <Grid item md={7} lg={6} sx={{ m: 'auto' }}>
             {left}
           </Grid>

packages/mui-codemod/README.md

@@ -1009,6 +1009,19 @@ npx @mui/codemod@next deprecations/form-control-label-props <path>
 npx @mui/codemod@next deprecations/list-item-props <path>
 ```
 
+#### `grid-props`
+
+```diff
+ <Grid
+-    wrap="nowrap"
++    flexWrap="nowrap"
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/grid-props <path>
+```
+
 #### `pagination-item-classes`
 
 JS transforms:

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -14,6 +14,7 @@ import transformStepLabelProps from '../step-label-props';
 import transformBackdropProps from '../backdrop-props';
 import transformStepConnectorClasses from '../step-connector-classes';
 import transformCircularProgressClasses from '../circular-progress-classes';
+import transformGridProps from '../grid-props';
 import transformSpeedDialProps from '../speed-dial-props';
 import transformTextFieldProps from '../text-field-props';
 
@@ -40,6 +41,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformCircularProgressClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);
   file.source = transformTextFieldProps(file, api, options);
+  file.source = transformGridProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/grid-props/grid-props.js

@@ -0,0 +1,42 @@
+import findComponentJSX from '../../util/findComponentJSX';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  const filterJSXAttr = (attr, name) => attr.type === 'JSXAttribute' && attr.name.name === name;
+
+  findComponentJSX(j, { root, componentName: 'Grid' }, (gridElement) => {
+    const attrs = gridElement.node.openingElement.attributes;
+    const wrapPropIndex = attrs.findIndex((attr) => filterJSXAttr(attr, 'wrap'));
+
+    if (wrapPropIndex !== -1) {
+      if (attrs.findIndex((attr) => filterJSXAttr(attr, 'flexWrap')) !== -1) {
+        attrs.splice(wrapPropIndex, 1);
+      } else {
+        attrs[wrapPropIndex].name.name = 'flexWrap';
+      }
+    }
+  });
+
+  root.find(j.ObjectProperty, { key: { name: 'MuiGrid' } }).forEach((path) => {
+    const defaultProps = path.value.value.properties.find(({ key }) => key.name === 'defaultProps');
+    const props = defaultProps.value.properties;
+    const wrapPropIndex = props.findIndex((prop) => prop.key.name === 'wrap');
+
+    if (wrapPropIndex !== -1) {
+      if (props.findIndex((prop) => prop.key.name === 'flexWrap') !== -1) {
+        props.splice(wrapPropIndex, 1);
+      } else {
+        props[wrapPropIndex].key.name = 'flexWrap';
+      }
+    }
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/grid-props/grid-props.test.js

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './grid-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'grid-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/grid-props/index.js

@@ -0,0 +1 @@
+export { default } from './grid-props';

packages/mui-codemod/src/deprecations/grid-props/test-cases/actual.js

@@ -0,0 +1,11 @@
+import Grid from '@mui/material/Grid';
+import { Grid as MyGrid } from '@mui/material';
+
+<Grid wrap="wrap-reverse" />;
+<MyGrid wrap="wrap-reverse" />;
+
+<Grid wrap="wrap-reverse" flexWrap="wrap" />;
+<MyGrid wrap="wrap-reverse" flexWrap="wrap" />;
+
+// should skip non MUI components
+<NonMuiGrid wrap="wrap-reverse" />;

packages/mui-codemod/src/deprecations/grid-props/test-cases/expected.js

@@ -0,0 +1,11 @@
+import Grid from '@mui/material/Grid';
+import { Grid as MyGrid } from '@mui/material';
+
+<Grid flexWrap="wrap-reverse" />;
+<MyGrid flexWrap="wrap-reverse" />;
+
+<Grid flexWrap="wrap" />;
+<MyGrid flexWrap="wrap" />;
+
+// should skip non MUI components
+<NonMuiGrid wrap="wrap-reverse" />;

packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.actual.js

@@ -0,0 +1,24 @@
+fn({
+  MuiGrid: {
+    defaultProps: {
+      wrap: 'wrap'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      wrap: 'wrap-reverse'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      wrap: 'wrap-reverse',
+      flexWrap: 'wrap'
+    },
+  },
+});

packages/mui-codemod/src/deprecations/grid-props/test-cases/theme.expected.js

@@ -0,0 +1,23 @@
+fn({
+  MuiGrid: {
+    defaultProps: {
+      flexWrap: 'wrap'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      flexWrap: 'wrap-reverse'
+    },
+  },
+});
+
+fn({
+  MuiGrid: {
+    defaultProps: {
+      flexWrap: 'wrap'
+    },
+  },
+});

packages/mui-material/src/Grid/Grid.d.ts

@@ -139,6 +139,7 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
+   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap?: GridWrap;
   /**

packages/mui-material/src/Grid/Grid.js

@@ -598,6 +598,7 @@ Grid.propTypes /* remove-proptypes */ = {
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
+   * @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   /**