[Grid] Export new grid as unstable (#33479)

benchmark/browser/scenarios/grid-system/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 
 export default function GridSystem() {
   return (

docs/data/system/components/grid/AutoGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/AutoGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';

docs/data/system/components/grid/BasicGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/BasicGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/ColumnsGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/ColumnsGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/CustomBreakpointsGrid.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ThemeProvider, createTheme } from '@mui/system';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/FullWidthGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/FullWidthGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/NestedGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/NestedGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/OffsetGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/OffsetGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/ResponsiveGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/ResponsiveGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/RowAndColumnSpacing.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from '@mui/system/styled';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import Box from '@mui/system/Box';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/RowAndColumnSpacing.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from '@mui/system/styled';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import Box from '@mui/system/Box';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/SpacingGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/system/components/grid/SpacingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/system/components/grid/VariableWidthGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/data/system/components/grid/VariableWidthGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/system/Box';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
 import styled from '@mui/system/styled';
 
 const Item = styled('div')(({ theme }) => ({

docs/pages/system/api/grid.json

@@ -63,7 +63,7 @@
   "styles": { "classes": [], "globalClasses": {}, "name": null },
   "spread": true,
   "forwardsRefTo": "HTMLElement",
-  "filename": "/packages/mui-system/src/Grid/Grid.tsx",
+  "filename": "/packages/mui-system/src/Unstable_Grid/Grid.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-grid/\">Grid (Material UI)</a></li></ul>",
   "cssComponent": true

packages/mui-joy/src/Grid/Grid.test.js

@@ -16,7 +16,7 @@ describe('Joy UI <Grid />', () => {
     render,
     ThemeProvider,
     refInstanceof: window.HTMLElement,
-    muiName: 'MuiGrid',
+    muiName: 'JoyGrid',
     testVariantProps: { container: true, spacing: 5 },
     skip: ['componentsProp', 'classesRoot'],
   }));

packages/mui-joy/src/Grid/Grid.tsx

@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
-import { createGrid } from '@mui/system/Grid';
+import { createGrid } from '@mui/system/Unstable_Grid';
 import { OverridableComponent } from '@mui/types';
 import { styled, useThemeProps } from '../styles';
 import { GridTypeMap } from './GridProps';
 
 const Grid = createGrid({
   createStyledComponent: styled('div', {
-    name: 'MuiGrid',
+    name: 'JoyGrid',
     overridesResolver: (props, styles) => styles.root,
   }),
-  componentName: 'MuiGrid',
-  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid' }),
+  componentName: 'JoyGrid',
+  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'JoyGrid' }),
 }) as OverridableComponent<GridTypeMap>;
 
 Grid.propTypes /* remove-proptypes */ = {

packages/mui-joy/src/Grid/GridProps.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { OverrideProps } from '@mui/types';
-import { GridBaseProps } from '@mui/system/Grid';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
 import { SxProps, SystemProps } from '../styles/types';
 
 export type GridSlot = 'root';

packages/mui-joy/src/Grid/gridClasses.ts

@@ -1,18 +1,18 @@
 import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
-import { GridClasses } from '@mui/system/Grid';
+import { GridClasses } from '@mui/system/Unstable_Grid';
 
 export type GridClassKey = keyof GridClasses;
 
 export function getGridUtilityClass(slot: string): string {
-  return generateUtilityClass('MuiGrid', slot);
+  return generateUtilityClass('JoyGrid', slot);
 }
 
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
 const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const;
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
 
-const gridClasses: GridClasses = generateUtilityClasses('MuiGrid', [
+const gridClasses: GridClasses = generateUtilityClasses('JoyGrid', [
   'root',
   'container',
   'item',

packages/mui-joy/src/styles/components.d.ts

@@ -122,6 +122,10 @@ export interface Components<Theme = unknown> {
     defaultProps?: Partial<FormLabelProps>;
     styleOverrides?: OverridesStyleRules<FormLabelSlot, FormLabelProps, Theme>;
   };
+  JoyGrid?: {
+    defaultProps?: Partial<GridProps>;
+    styleOverrides?: OverridesStyleRules<GridSlot, GridProps, Theme>;
+  };
   JoyIconButton?: {
     defaultProps?: Partial<IconButtonProps>;
     styleOverrides?: OverridesStyleRules<IconButtonSlot, IconButtonProps, Theme>;
@@ -195,8 +199,4 @@ export interface Components<Theme = unknown> {
     defaultProps?: Partial<TypographyProps>;
     styleOverrides?: OverridesStyleRules<TypographySlot, TypographyProps, Theme>;
   };
-  MuiGrid?: {
-    defaultProps?: Partial<GridProps>;
-    styleOverrides?: OverridesStyleRules<GridSlot, GridProps, Theme>;
-  };
 }

packages/mui-material/src/Unstable_Grid2/Grid2.test.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { describeConformance, createRenderer } from 'test/utils';
+import Grid2, { grid2Classes as classes } from '@mui/material/Unstable_Grid2';
+
+// The main tests are in mui-system Unstable_Grid folder
+describe('<Grid2 />', () => {
+  const { render } = createRenderer();
+
+  const defaultProps = {
+    children: <div />,
+  };
+
+  describeConformance(<Grid2 {...defaultProps} />, () => ({
+    classes,
+    inheritComponent: 'div',
+    render,
+    refInstanceof: window.HTMLElement,
+    muiName: 'MuiGrid2',
+    testVariantProps: { container: true, spacing: 5 },
+    skip: ['componentsProp', 'classesRoot'],
+  }));
+});

packages/mui-material/src/Unstable_Grid2/Grid2.tsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { createGrid } from '@mui/system/Unstable_Grid';
+import { OverridableComponent } from '@mui/types';
+import { styled, useThemeProps } from '../styles';
+import { Grid2TypeMap } from './Grid2Props';
+
+const Grid2 = createGrid({
+  createStyledComponent: styled('div', {
+    name: 'MuiGrid2',
+    overridesResolver: (props, styles) => styles.root,
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }),
+}) as OverridableComponent<Grid2TypeMap>;
+
+Grid2.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
+
+export default Grid2;

packages/mui-material/src/Unstable_Grid2/Grid2Props.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+
+export type Grid2Slot = 'root';
+
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & GridBaseProps & { sx?: SxProps<Theme> } & SystemProps<Theme>;
+  defaultComponent: D;
+}
+
+export type Grid2Props<
+  D extends React.ElementType = Grid2TypeMap['defaultComponent'],
+  P = {
+    component?: React.ElementType;
+  },
+> = OverrideProps<Grid2TypeMap<P, D>, D>;

packages/mui-material/src/Unstable_Grid2/grid2Classes.ts

@@ -0,0 +1,36 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { GridClasses } from '@mui/system/Unstable_Grid';
+
+export type Grid2ClassKey = keyof GridClasses;
+
+export function getGrid2UtilityClass(slot: string): string {
+  return generateUtilityClass('MuiGrid2', slot);
+}
+
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const;
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+
+const grid2Classes: GridClasses = generateUtilityClasses('MuiGrid2', [
+  'root',
+  'container',
+  'item',
+  'zeroMinWidth',
+
+  // spacings
+  ...SPACINGS.map((spacing) => `spacing-xs-${spacing}` as const),
+  // direction values
+  ...DIRECTIONS.map((direction) => `direction-xs-${direction}` as const),
+  // wrap values
+  ...WRAPS.map((wrap) => `wrap-xs-${wrap}` as const),
+
+  // grid sizes for all breakpoints
+  ...GRID_SIZES.map((size) => `grid-xs-${size}` as const),
+  ...GRID_SIZES.map((size) => `grid-sm-${size}` as const),
+  ...GRID_SIZES.map((size) => `grid-md-${size}` as const),
+  ...GRID_SIZES.map((size) => `grid-lg-${size}` as const),
+  ...GRID_SIZES.map((size) => `grid-xl-${size}` as const),
+]);
+
+export default grid2Classes;

packages/mui-material/src/Unstable_Grid2/index.ts

@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';