[BC Break] Upgrade to MUI v5

.eslintrc

@@ -23,9 +23,9 @@
             {
                 "paths": [
                     {
-                        "name": "@material-ui/core",
+                        "name": "@mui/material",
                         "importNames": ["makeStyles", "createMuiTheme"],
-                        "message": "Please import from @material-ui/core/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
+                        "message": "Please import from @mui/material/styles instead. See https://material-ui.com/guides/minimizing-bundle-size/#option-2 for more information"
                     }
                 ]
             }

__mocks__/@popperjs/core.ts

@@ -0,0 +1,15 @@
+const mock = () => {
+    const PopperJS = jest.requireActual('@popperjs/core');
+    return {
+        placements: PopperJS.placements,
+        destroy: () => {},
+        scheduleUpdate: () => {},
+        forceUpdate: () => {},
+        render: function (this: any) {
+            return this.$options._renderChildren;
+        },
+    };
+};
+
+export default mock;
+export { mock as createPopper };

cypress/support/CreatePage.js

@@ -21,7 +21,7 @@ export default url => ({
         descInput: '.ql-editor',
         tab: index => `.form-tab:nth-of-type(${index})`,
         title: '#react-admin-title',
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
     },
 

cypress/support/EditPage.js

@@ -11,7 +11,7 @@ export default url => ({
                 return `.ra-input-${name} label`;
             }
             if (type === 'reference-array-input') {
-                return `.ra-input div[role=combobox]`;
+                return `.ra-input div[role=combobox] input`;
             }
             return `.edit-page [name='${name}']`;
         },
@@ -22,7 +22,7 @@ export default url => ({
         cloneButton: '.button-clone',
         tab: index => `.form-tab:nth-of-type(${index})`,
         title: '#react-admin-title',
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
     },
 

cypress/support/ListPage.js

@@ -29,7 +29,7 @@ export default url => ({
         selectAll: '.select-all',
         selectedItem: '.select-item input:checked',
         selectItem: '.select-item input',
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         title: '#react-admin-title',
         headroomUnfixed: '.headroom--unfixed',
         headroomUnpinned: '.headroom--unpinned',

cypress/support/ShowPage.js

@@ -6,7 +6,7 @@ export default (url, initialField = 'title') => ({
         snackbar: 'div[role="alertdialog"]',
         tabs: `.show-tab`,
         tab: index => `.show-tab:nth-of-type(${index})`,
-        userMenu: 'button[title="Profile"]',
+        userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
     },
 

examples/crm/package.json

@@ -1,56 +1,56 @@
 {
-  "name": "react-admin-crm",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.12.1",
-    "@material-ui/icons": "^4.11.2",
-    "@nivo/bar": "^0.67.0",
-    "@nivo/core": "^0.67.0",
-    "date-fns": "^2.19.0",
-    "faker": "~5.4.0",
-    "lodash": "~4.17.5",
-    "prop-types": "^15.7.2",
-    "ra-data-fakerest": "^3.13.4",
-    "react": "^17.0.0",
-    "react-admin": "^3.15.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-dom": "^17.0.0",
-    "react-scripts": "^4.0.1"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/classnames": "^2.2.9",
-    "@types/faker": "^5.1.7",
-    "@types/jest": "^26.0.19",
-    "@types/lodash": "~4.14.168",
-    "@types/react": "^17.0.20",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^17.0.9",
-    "rewire": "^5.0.0",
-    "source-map-explorer": "^2.0.0",
-    "typescript": "^4.4.0",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "node ./build.js",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "homepage": ".",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "react-admin-crm",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@mui/material": "^5.0.2",
+        "@mui/icons-material": "^5.0.1",
+        "@nivo/bar": "^0.67.0",
+        "@nivo/core": "^0.67.0",
+        "date-fns": "^2.19.0",
+        "faker": "~5.4.0",
+        "lodash": "~4.17.5",
+        "prop-types": "^15.7.2",
+        "ra-data-fakerest": "^3.13.4",
+        "react": "^17.0.0",
+        "react-admin": "^3.15.0",
+        "react-beautiful-dnd": "^13.0.0",
+        "react-dom": "^17.0.0",
+        "react-scripts": "^4.0.1"
+    },
+    "devDependencies": {
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/classnames": "^2.2.9",
+        "@types/faker": "^5.1.7",
+        "@types/jest": "^26.0.19",
+        "@types/lodash": "~4.14.168",
+        "@types/react": "^17.0.20",
+        "@types/react-beautiful-dnd": "^13.0.0",
+        "@types/react-dom": "^17.0.9",
+        "rewire": "^5.0.0",
+        "source-map-explorer": "^2.0.0",
+        "typescript": "^4.4.0",
+        "web-vitals": "^1.0.1"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "node ./build.js",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "homepage": ".",
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }

examples/crm/src/App.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { Admin, Resource, ListGuesser, defaultTheme } from 'react-admin';
-import {
-    unstable_createMuiStrictModeTheme,
-    createMuiTheme,
-} from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 
 import { dataProvider } from './dataProvider';
 import { authProvider } from './authProvider';
@@ -14,10 +11,7 @@ import deals from './deals';
 import { Dashboard } from './dashboard/Dashboard';
 
 // FIXME MUI bug https://github.com/mui-org/material-ui/issues/13394
-const theme =
-    process.env.NODE_ENV !== 'production'
-        ? unstable_createMuiStrictModeTheme(defaultTheme)
-        : createMuiTheme(defaultTheme);
+const theme = createTheme(defaultTheme);
 
 const App = () => (
     <Admin

examples/crm/src/Header.tsx

@@ -1,26 +1,32 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Tabs, Tab, Toolbar, AppBar, Box, Typography } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import { Tabs, Tab, Toolbar, AppBar, Box, Typography } from '@mui/material';
 import { Link, useRouteMatch } from 'react-router-dom';
 import { UserMenu, Logout, LoadingIndicator } from 'react-admin';
 
-const useStyles = makeStyles({
-    root: {
+const PREFIX = 'Header';
+
+const classes = {
+    root: `${PREFIX}-root`,
+    logo: `${PREFIX}-logo`,
+};
+
+const Root = styled('nav')({
+    [`&.${classes.root}`]: {
         flexGrow: 1,
     },
-    logo: {
+    [`& .${classes.logo}`]: {
         width: 50,
         height: 43.54,
     },
 });
 
 const Header = () => {
-    const classes = useStyles();
     const match = useRouteMatch(['/contacts', '/companies', '/deals']);
     const currentPath = match?.path ?? '/';
 
     return (
-        <nav className={classes.root}>
+        <Root className={classes.root}>
             <AppBar position="static" color="primary">
                 <Toolbar variant="dense">
                     <Box flex={1} display="flex" justifyContent="space-between">
@@ -74,7 +80,7 @@ const Header = () => {
                     </Box>
                 </Toolbar>
             </AppBar>
-        </nav>
+        </Root>
     );
 };
 

examples/crm/src/Layout.tsx

@@ -1,9 +1,8 @@
 import React, { Component, ErrorInfo, HtmlHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { createMuiTheme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
-import { CssBaseline, Container } from '@material-ui/core';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { CssBaseline, Container } from '@mui/material';
 import { CoreLayoutProps } from 'react-admin';
 
 import { Notification, Error } from 'react-admin';
@@ -42,8 +41,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
         const { theme, title, children } = this.props;
         const { hasError, errorMessage, errorInfo } = this.state;
         return (
-            // @ts-ignore
-            <ThemeProvider theme={createMuiTheme(theme)}>
+            <ThemeProvider theme={createTheme(theme)}>
                 <CssBaseline />
                 <Header />
                 <Container>

examples/crm/src/companies/CompanyAside.tsx

@@ -7,7 +7,7 @@ import {
     EditButton,
     ShowButton,
 } from 'react-admin';
-import { Box, Typography, Divider, Link } from '@material-ui/core';
+import { Box, Typography, Divider, Link } from '@mui/material';
 
 import { Company, Sale } from '../types';
 

examples/crm/src/companies/CompanyAvatar.tsx

@@ -1,24 +1,33 @@
 import * as React from 'react';
-import { Avatar } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
+import { Avatar } from '@mui/material';
 import clsx from 'clsx';
 
 import { Company } from '../types';
 
-const useStyles = makeStyles({
-    avatar: {
+const PREFIX = 'CompanyAvatar';
+
+const classes = {
+    avatar: `${PREFIX}-avatar`,
+    img: `${PREFIX}-img`,
+    small: `${PREFIX}-small`,
+    large: `${PREFIX}-large`,
+};
+
+const StyledAvatar = styled(Avatar)({
+    [`& .${classes.avatar}`]: {
         width: 60,
         height: 60,
         backgroundColor: 'aliceblue',
     },
-    img: {
+    [`& .${classes.img}`]: {
         objectFit: 'contain',
     },
-    small: {
+    [`& .${classes.small}`]: {
         width: 20,
         height: 20,
     },
-    large: {
+    [`& .${classes.large}`]: {
         width: 40,
         height: 40,
     },
@@ -31,14 +40,13 @@ export const CompanyAvatar = ({
     record?: Company;
     size?: 'small' | 'large';
 }) => {
-    const classes = useStyles();
     if (!record) return null;
     return (
-        <Avatar
+        <StyledAvatar
             src={process.env.PUBLIC_URL + record.logo}
             alt={record.name}
             className={classes.avatar}
-            imgProps={{ className: clsx(classes.img, classes[size]) }}
+            imgProps={{ className: clsx(classes.img, size) }}
         />
     );
 };