marmelab · djhi · Sep 15, 2021 · Sep 14, 2021 · Sep 14, 2021
diff --git a/examples/crm/package.json b/examples/crm/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.2",
+    "@material-ui/core": "^4.12.1",
     "@material-ui/icons": "^4.11.2",
     "@nivo/bar": "^0.67.0",
     "@nivo/core": "^0.67.0",

diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -3,7 +3,7 @@
     "version": "3.0.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.12.1",
         "@material-ui/icons": "^4.11.2",
         "@types/inflection": "^1.5.28",
         "@types/recharts": "^1.8.10",

diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -8,7 +8,7 @@
         "serve": "vite preview"
     },
     "dependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.12.1",
         "@material-ui/icons": "^4.11.2",
         "ra-data-fakerest": "^3.9.3",
         "ra-i18n-polyglot": "^3.12.4",

diff --git a/examples/tutorial/package.json b/examples/tutorial/package.json
@@ -3,7 +3,7 @@
     "version": "3.0.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.12.1",
         "ra-data-json-server": "^3.9.0",
         "react": "^17.0.0",
         "react-admin": "^3.9.0",

diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json
@@ -26,9 +26,9 @@
         "watch": "tsc --outDir esm --module es2015 --watch"
     },
     "devDependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.12.1",
         "@material-ui/icons": "^4.11.2",
-        "@material-ui/styles": "^4.11.2",
+        "@material-ui/styles": "^4.11.4",
         "@testing-library/react": "^11.2.3",
         "@types/query-string": "5.1.0",
         "cross-env": "^5.2.0",
@@ -50,9 +50,9 @@
         "rimraf": "^2.6.3"
     },
     "peerDependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.12.1",
         "@material-ui/icons": "^4.11.2",
-        "@material-ui/styles": "^4.11.2",
+        "@material-ui/styles": "^4.11.4",
         "final-form": "^4.20.2",
         "final-form-arrays": "^3.0.2",
         "ra-core": "^3.14.0",

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Fragment, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionDelete from '@material-ui/icons/Delete';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import inflection from 'inflection';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -24,7 +24,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionDelete from '@material-ui/icons/Delete';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { makeStyles } from '@material-ui/core/styles';
 import {
     useDeleteMany,
@@ -22,7 +22,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Fragment, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionUpdate from '@material-ui/icons/Update';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import inflection from 'inflection';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -25,7 +25,7 @@ const useStyles = makeStyles(
         updateButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import ActionUpdate from '@material-ui/icons/Update';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { makeStyles } from '@material-ui/core/styles';
 import {
     useUpdateMany,
@@ -22,7 +22,7 @@ const useStyles = makeStyles(
         updateButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/button/Button.spec.tsx b/packages/ra-ui-materialui/src/button/Button.spec.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-test';
 import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import Button from './Button';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const invalidButtonDomProps = {
     basePath: '',

diff --git a/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx b/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx
@@ -1,6 +1,6 @@
 import expect from 'expect';
 import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import { createMemoryHistory } from 'history';
@@ -9,7 +9,7 @@ import { Router } from 'react-router-dom';
 import { CloneButton } from './CloneButton';
 import { TestContext } from 'ra-test';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const invalidButtonDomProps = {
     basePath: '/posts',

diff --git a/packages/ra-ui-materialui/src/button/CreateButton.spec.tsx b/packages/ra-ui-materialui/src/button/CreateButton.spec.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-test';
 import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import CreateButton from './CreateButton';
 
 const invalidButtonDomProps = {
@@ -25,7 +25,7 @@ describe('<CreateButton />', () => {
     it('should render a button with no DOM errors', () => {
         const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-        const theme = createMuiTheme({
+        const theme = createTheme({
             props: {
                 MuiWithWidth: {
                     initialWidth: 'sm',

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx
@@ -3,14 +3,14 @@ import * as React from 'react';
 import expect from 'expect';
 import { DataProvider, DataProviderContext } from 'ra-core';
 import { renderWithRedux, TestContext } from 'ra-test';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 import { DeleteWithConfirmButton } from './DeleteWithConfirmButton';
 import { Toolbar, SimpleForm } from '../form';
 import { Edit } from '../detail';
 import { TextInput } from '../input';
 import { Notification } from '../layout';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const invalidButtonDomProps = {
     basePath: '',

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -6,7 +6,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
 import inflection from 'inflection';
@@ -114,7 +114,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx
@@ -3,13 +3,13 @@ import * as React from 'react';
 import expect from 'expect';
 import { DataProvider, DataProviderContext } from 'ra-core';
 import { renderWithRedux, TestContext } from 'ra-test';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 import { Toolbar, SimpleForm } from '../form';
 import { Edit } from '../detail';
 import { TextInput } from '../input';
 import { DeleteWithUndoButton } from './DeleteWithUndoButton';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const invalidButtonDomProps = {
     basePath: '',

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactElement, ReactEventHandler, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
 import {
@@ -65,7 +65,7 @@ const useStyles = makeStyles(
         deleteButton: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx b/packages/ra-ui-materialui/src/button/SaveButton.spec.tsx
@@ -9,14 +9,14 @@ import {
 } from 'ra-core';
 import { renderWithRedux, TestContext } from 'ra-test';
 import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
 import SaveButton from './SaveButton';
 import { Toolbar, SimpleForm } from '../form';
 import { Edit } from '../detail';
 import { TextInput } from '../input';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 const invalidButtonDomProps = {
     basePath: '',

diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx
@@ -1,5 +1,5 @@
 import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { fireEvent, getByText, waitFor } from '@testing-library/react';
 import expect from 'expect';
 import { SaveContextProvider, SideEffectContextProvider } from 'ra-core';
@@ -10,7 +10,7 @@ import TextInput from '../input/TextInput';
 import SimpleForm from './SimpleForm';
 import { SimpleFormIterator } from './SimpleFormIterator';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 describe('<SimpleFormIterator />', () => {
     // bypass confirm leave form with unsaved changes

diff --git a/packages/ra-ui-materialui/src/layout/Confirm.tsx b/packages/ra-ui-materialui/src/layout/Confirm.tsx
@@ -8,7 +8,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import ActionCheck from '@material-ui/icons/CheckCircle';
 import AlertError from '@material-ui/icons/ErrorOutline';
 import classnames from 'classnames';
@@ -22,7 +22,7 @@ const useStyles = makeStyles(
         confirmWarning: {
             color: theme.palette.error.main,
             '&:hover': {
-                backgroundColor: fade(theme.palette.error.main, 0.12),
+                backgroundColor: alpha(theme.palette.error.main, 0.12),
                 // Reset on mouse devices
                 '@media (hover: none)': {
                     backgroundColor: 'transparent',

diff --git a/packages/ra-ui-materialui/src/layout/DeviceTestWrapper.tsx b/packages/ra-ui-materialui/src/layout/DeviceTestWrapper.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider } from '@material-ui/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
 /**
  * Test utility to simulate a device form factor for server-side mediaQueries
@@ -18,7 +18,7 @@ const DeviceTestWrapper = ({
     width = 'md',
     children,
 }: DeviceTestWrapperProps): JSX.Element => {
-    const theme = createMuiTheme();
+    const theme = createTheme();
 
     // Use https://github.com/ericf/css-mediaquery as polyfill.
     const ssrMatchMedia = query => ({

diff --git a/packages/ra-ui-materialui/src/layout/Notification.tsx b/packages/ra-ui-materialui/src/layout/Notification.tsx
@@ -92,7 +92,7 @@ const Notification = (props: Props & Omit<SnackbarProps, 'open'>) => {
                 autoHideDuration
             }
             disableWindowBlurListener={notification && notification.undoable}
-            onExited={handleExited}
+            TransitionProps={{ onExited: handleExited }}
             onClose={handleRequestClose}
             ContentProps={{
                 className: classnames(

diff --git a/packages/ra-ui-materialui/src/layout/createMuiTheme.ts b/packages/ra-ui-materialui/src/layout/createMuiTheme.ts
@@ -1,5 +1,5 @@
 import {
-    createMuiTheme as createLegacyModeTheme,
+    createTheme as createLegacyModeTheme,
     unstable_createMuiStrictModeTheme as createStrictModeTheme,
 } from '@material-ui/core/styles';
 

diff --git a/packages/ra-ui-materialui/src/list/List.spec.tsx b/packages/ra-ui-materialui/src/list/List.spec.tsx
@@ -4,15 +4,15 @@ import { waitFor, fireEvent } from '@testing-library/react';
 import { DataProviderContext, ResourceContextProvider } from 'ra-core';
 import { renderWithRedux } from 'ra-test';
 import { ThemeProvider } from '@material-ui/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { MemoryRouter } from 'react-router-dom';
 
 import defaultTheme from '../defaultTheme';
 import List from './List';
 import { Filter } from './filter';
 import { TextInput } from '../input';
 
-const theme = createMuiTheme(defaultTheme);
+const theme = createTheme(defaultTheme);
 
 describe('<List />', () => {
     const defaultProps = {

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import expect from 'expect';
 import { render, fireEvent } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
 import FilterButton from './FilterButton';
 import TextInput from '../../input/TextInput';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 describe('<FilterButton />', () => {
     const defaultProps = {

diff --git a/packages/ra-ui-materialui/src/list/pagination/Pagination.spec.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.spec.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import expect from 'expect';
 import { render } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { ListPaginationContext } from 'ra-core';
 
 import Pagination from './Pagination';
 import DeviceTestWrapper from '../../layout/DeviceTestWrapper';
 
-const theme = createMuiTheme();
+const theme = createTheme();
 
 describe('<Pagination />', () => {
     const defaultProps = {