[core] Support for @mui packages

docs/babel.config.js

@@ -16,10 +16,7 @@ const alias = {
   '@mui/x-data-grid-pro': '../packages/grid/x-grid/src',
   '@mui/x-license-pro': '../packages/x-license/src',
   // Help in the event npm and git are significantly desynchronized.
-  '@material-ui/core': './node_modules/@material-ui/monorepo/packages/material-ui/src',
-  '@material-ui/styles': './node_modules/@material-ui/monorepo/packages/material-ui-styles/src',
   '@material-ui/docs': './node_modules/@material-ui/monorepo/packages/material-ui-docs/src',
-  '@material-ui/lab': './node_modules/@material-ui/monorepo/packages/material-ui-lab/src',
   docs: './node_modules/@material-ui/monorepo/docs',
   docsx: './',
   modules: './node_modules/@material-ui/monorepo/modules',

docs/package.json

@@ -25,6 +25,9 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/monorepo": "/~https://github.com/mui-org/material-ui.git#master",
+    "@mui/icons-material": "^5.0.0-rc.1",
+    "@mui/material": "^5.0.0-rc.1",
+    "@mui/styles": "^5.0.0-rc.1",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",

docs/pages/_app.js

@@ -19,8 +19,12 @@ import acceptLanguage from 'accept-language';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import { useRouter } from 'next/router';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider, jssPreset, useTheme } from '@material-ui/styles';
+import { StylesProvider as StylesProviderV5, createGenerateClassName } from '@mui/styles';
 import { ponyfillGlobal } from '@material-ui/utils';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { createTheme, ThemeProvider as ThemeProviderV5 } from '@mui/material/styles';
 import pages from 'docsx/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -36,35 +40,39 @@ function getMuiPackageVersion(packageName, commitRef) {
     return 'latest';
   }
   const shortSha = commitRef.slice(0, 8);
-  return `https://pkg.csb.dev/mui-org/material-ui-x/commit/${shortSha}/@material-ui/${packageName}`;
+  return `https://pkg.csb.dev/mui-org/material-ui-x/commit/${shortSha}/@mui/${packageName}`;
 }
 
 ponyfillGlobal.muiDocConfig = {
   csbIncludePeerDependencies: (deps, { versions }) => {
     const newDeps = { ...deps };
 
-    if (
-      newDeps['@material-ui/x'] ||
-      newDeps['@mui/x-data-grid-pro'] ||
-      newDeps['@mui/x-data-grid']
-    ) {
-      newDeps['@material-ui/core'] = versions['@material-ui/core'];
+    if (newDeps['@mui/x-data-grid-pro'] || newDeps['@mui/x-data-grid']) {
+      newDeps['@mui/material'] = versions['@mui/material'];
+      newDeps['@mui/styles'] = versions['@mui/styles'];
+      // TODO remove @emotion once the docs is using the same infra from v5
+      newDeps['@emotion/styled'] = versions['@emotion/styled'];
+      newDeps['@emotion/react'] = versions['@emotion/react'];
     }
 
     if (newDeps['@mui/x-data-grid-generator']) {
-      newDeps['@material-ui/core'] = versions['@material-ui/core'];
-      newDeps['@material-ui/icons'] = versions['@material-ui/icons'];
-      newDeps['@material-ui/lab'] = versions['@material-ui/lab'];
+      newDeps['@mui/material'] = versions['@mui/material'];
+      newDeps['@mui/icons-material'] = versions['@mui/icons-material'];
     }
 
     return newDeps;
   },
   csbGetVersions: (versions, { muiCommitRef }) => {
     const output = {
       ...versions,
-      '@mui/x-data-grid-pro': getMuiPackageVersion('x-grid', muiCommitRef),
-      '@mui/x-data-grid-generator': getMuiPackageVersion('x-grid-data-generator', muiCommitRef),
-      '@mui/x-data-grid': getMuiPackageVersion('data-grid', muiCommitRef),
+      '@mui/x-data-grid-pro': getMuiPackageVersion('x-data-grid-pro', muiCommitRef),
+      '@mui/x-data-grid-generator': getMuiPackageVersion('x-data-grid-generator', muiCommitRef),
+      '@mui/x-data-grid': getMuiPackageVersion('x-data-grid', muiCommitRef),
+      '@mui/material': 'next',
+      '@mui/styles': 'next',
+      '@mui/icons-material': 'next',
+      '@emotion/react': 'latest',
+      '@emotion/styled': 'latest',
     };
     return output;
   },
@@ -325,6 +333,31 @@ function findActivePage(currentPages, pathname) {
   return activePage;
 }
 
+// The reference to the ThemeProvider is different from v4 and v5 = theme is not shared
+// This bridge allows demos to support the dark mode
+function ThemeProviderV5Bridge(props) {
+  const { children } = props;
+  const themeV4 = useTheme();
+  const themeV5 = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: themeV4.palette.type,
+        },
+      }),
+    [themeV4.palette.type],
+  );
+  return <ThemeProviderV5 theme={themeV5}>{children}</ThemeProviderV5>;
+}
+
+const emotionCache = createCache({
+  key: 'emotion-css',
+  prepend: false, // Make the emotion styles win over jss
+});
+
+// By default the prefix is the same in v4 and v5, keeping that way could lead to conflicts
+const generateClassName = createGenerateClassName({ productionPrefix: 'demo-jss' });
+
 function AppWrapper(props) {
   const { children, pageProps } = props;
 
@@ -362,11 +395,17 @@ function AppWrapper(props) {
       </NextHead>
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-          <StylesProvider jss={jss}>
-            <ThemeProvider>
-              <XWrapper>{children}</XWrapper>
-            </ThemeProvider>
-          </StylesProvider>
+          <CacheProvider value={emotionCache}>
+            <StylesProviderV5 generateClassName={generateClassName}>
+              <StylesProvider jss={jss}>
+                <ThemeProvider>
+                  <ThemeProviderV5Bridge>
+                    <XWrapper>{children}</XWrapper>
+                  </ThemeProviderV5Bridge>
+                </ThemeProvider>
+              </StylesProvider>
+            </StylesProviderV5>
+          </CacheProvider>
         </PageContext.Provider>
         <LanguageNegotiation />
         <Analytics />

docs/scripts/formattedTSDemos.js

@@ -21,13 +21,8 @@ const { fixBabelGeneratorIssues, fixLineEndings } = require('./helpers');
 
 const tsConfig = typescriptToProptypes.loadConfig(path.resolve(__dirname, '../tsconfig.json'));
 
-const unwrap = babel.createConfigItem(
-  require('../node_modules/@material-ui/monorepo/packages/babel-plugin-unwrap-createstyles'),
-);
-
 const babelConfig = {
   presets: ['@babel/preset-typescript'],
-  plugins: [unwrap],
   generatorOpts: { retainLines: true },
   babelrc: false,
   configFile: false,

docs/src/modules/components/ApiDocs.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { makeStyles } from '@mui/styles';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import PropTypes from 'prop-types';
 import HighlightedCode from '../../../node_modules/@material-ui/monorepo/docs/src/modules/components/HighlightedCode';
 

docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
-import DeleteIcon from '@material-ui/icons/Delete';
-import SecurityIcon from '@material-ui/icons/Security';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SecurityIcon from '@mui/icons-material/Security';
+import FileCopyIcon from '@mui/icons-material/FileCopy';
 import { randomCreatedDate, randomUpdatedDate } from '@mui/x-data-grid-generator';
 
 const initialRows = [

docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { DataGrid, GridActionsCellItem, GridRowId } from '@mui/x-data-grid';
-import DeleteIcon from '@material-ui/icons/Delete';
-import SecurityIcon from '@material-ui/icons/Security';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SecurityIcon from '@mui/icons-material/Security';
+import FileCopyIcon from '@mui/icons-material/FileCopy';
 import { randomCreatedDate, randomUpdatedDate } from '@mui/x-data-grid-generator';
 
 const initialRows = [

docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import { DataGrid } from '@mui/x-data-grid';
 import { randomStatusOptions, randomPrice } from '@mui/x-data-grid-generator';
 

docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import { DataGrid, GridColTypeDef } from '@mui/x-data-grid';
 import { randomStatusOptions, randomPrice } from '@mui/x-data-grid-generator';
 

docs/src/pages/components/data-grid/columns/RenderCellGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { DataGrid } from '@mui/x-data-grid';
 
 const columns = [

docs/src/pages/components/data-grid/columns/RenderCellGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 
 const columns: GridColDef[] = [

docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js

@@ -1,26 +1,28 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import { makeStyles } from '@material-ui/styles';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { createStyles, makeStyles } from '@mui/styles';
 import { DataGrid } from '@mui/x-data-grid';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    alignItems: 'center',
-    lineHeight: '24px',
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    display: 'flex',
-    '& .cellValue': {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      alignItems: 'center',
+      lineHeight: '24px',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      display: 'flex',
+      '& .cellValue': {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
     },
-  },
-}));
+  }),
+);
 
 function isOverflown(element) {
   return (

docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import { createStyles, makeStyles } from '@material-ui/styles';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { createStyles, makeStyles } from '@mui/styles';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 
 interface GridCellExpandProps {

docs/src/pages/components/data-grid/components/CustomColumnMenu.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import { createTheme } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import { makeStyles } from '@mui/styles';
+import { createTheme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import {
   GridColumnMenu,
   GridColumnMenuContainer,
@@ -11,7 +11,7 @@ import {
   useGridApiRef,
   DataGridPro,
 } from '@mui/x-data-grid-pro';
-import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import StarOutlineIcon from '@mui/icons-material/StarOutline';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(

docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { createTheme, Theme } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import { makeStyles } from '@mui/styles';
+import { createTheme, Theme } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import {
   GridColumnMenu,
   GridColumnMenuContainer,
@@ -11,7 +11,7 @@ import {
   useGridApiRef,
   DataGridPro,
 } from '@mui/x-data-grid-pro';
-import StarOutlineIcon from '@material-ui/icons/StarOutline';
+import StarOutlineIcon from '@mui/icons-material/StarOutline';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(

docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js

@@ -1,35 +1,36 @@
 import * as React from 'react';
 import { GridOverlay, DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { createTheme } from '@material-ui/core/styles';
-import { makeStyles } from '@material-ui/styles';
+import { createTheme } from '@mui/material/styles';
+import { createStyles, makeStyles } from '@mui/styles';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      flexDirection: 'column',
-      '& .ant-empty-img-1': {
-        fill: theme.palette.type === 'light' ? '#aeb8c2' : '#262626',
+  (theme) =>
+    createStyles({
+      root: {
+        flexDirection: 'column',
+        '& .ant-empty-img-1': {
+          fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626',
+        },
+        '& .ant-empty-img-2': {
+          fill: theme.palette.mode === 'light' ? '#f5f5f7' : '#595959',
+        },
+        '& .ant-empty-img-3': {
+          fill: theme.palette.mode === 'light' ? '#dce0e6' : '#434343',
+        },
+        '& .ant-empty-img-4': {
+          fill: theme.palette.mode === 'light' ? '#fff' : '#1c1c1c',
+        },
+        '& .ant-empty-img-5': {
+          fillOpacity: theme.palette.mode === 'light' ? '0.8' : '0.08',
+          fill: theme.palette.mode === 'light' ? '#f5f5f5' : '#fff',
+        },
       },
-      '& .ant-empty-img-2': {
-        fill: theme.palette.type === 'light' ? '#f5f5f7' : '#595959',
+      label: {
+        marginTop: theme.spacing(1),
       },
-      '& .ant-empty-img-3': {
-        fill: theme.palette.type === 'light' ? '#dce0e6' : '#434343',
-      },
-      '& .ant-empty-img-4': {
-        fill: theme.palette.type === 'light' ? '#fff' : '#1c1c1c',
-      },
-      '& .ant-empty-img-5': {
-        fillOpacity: theme.palette.type === 'light' ? '0.8' : '0.08',
-        fill: theme.palette.type === 'light' ? '#f5f5f5' : '#fff',
-      },
-    },
-    label: {
-      marginTop: theme.spacing(1),
-    },
-  }),
+    }),
   { defaultTheme },
 );