Fix MUI 4.12 deprecation warnings

Closes #6451
marmelab · Sep 14, 2021 · da06db4 · da06db4
1 parent c6337a2
commit da06db4
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 105 deletions.
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/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.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/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/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/list/pagination/Pagination.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx
@@ -85,7 +85,7 @@ const Pagination = (props: PaginationProps) => {
                 count={total}
                 rowsPerPage={perPage}
                 page={page - 1}
-                onChangePage={handlePageChange}
+                onPageChange={handlePageChange}
                 rowsPerPageOptions={emptyArray}
                 component="span"
                 labelDisplayedRows={labelDisplayedRows}
@@ -99,8 +99,8 @@ const Pagination = (props: PaginationProps) => {
             count={total}
             rowsPerPage={perPage}
             page={page - 1}
-            onChangePage={handlePageChange}
-            onChangeRowsPerPage={handlePerPageChange}
+            onPageChange={handlePageChange}
+            onRowsPerPageChange={handlePerPageChange}
             ActionsComponent={actions}
             component="span"
             labelRowsPerPage={translate('ra.navigation.page_rows_per_page')}

diff --git a/packages/ra-ui-materialui/src/list/pagination/PaginationActions.tsx b/packages/ra-ui-materialui/src/list/pagination/PaginationActions.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles(
 );
 
 const PaginationActions = props => {
-    const { page, rowsPerPage, count, onChangePage, color, size } = props;
+    const { page, rowsPerPage, count, onPageChange, color, size } = props;
     const classes = useStyles(props);
     const translate = useTranslate();
     const theme = useTheme();
@@ -71,14 +71,14 @@ const PaginationActions = props => {
         if (page === 0) {
             throw new Error(translate('ra.navigation.page_out_from_begin'));
         }
-        onChangePage(event, page - 1);
+        onPageChange(event, page - 1);
     };
 
     const nextPage = event => {
         if (page > getNbPages() - 1) {
             throw new Error(translate('ra.navigation.page_out_from_end'));
         }
-        onChangePage(event, page + 1);
+        onPageChange(event, page + 1);
     };
 
     const gotoPage = event => {
@@ -90,7 +90,7 @@ const PaginationActions = props => {
                 })
             );
         }
-        onChangePage(event, page);
+        onPageChange(event, page);
     };
 
     const renderPageNums = () => {
@@ -172,7 +172,7 @@ PaginationActions.propTypes = {
     count: PropTypes.number.isRequired,
     classes: PropTypes.object,
     nextIconButtonProps: PropTypes.object,
-    onChangePage: PropTypes.func.isRequired,
+    onPageChange: PropTypes.func.isRequired,
     page: PropTypes.number.isRequired,
     rowsPerPage: PropTypes.number.isRequired,
     color: PropTypes.oneOf(['primary', 'secondary']),

diff --git a/packages/react-admin/package.json b/packages/react-admin/package.json
@@ -34,7 +34,7 @@
         "react-dom": "^16.9.0 || ^17.0.0"
     },
     "dependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.12.1",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/styles": "^4.11.2",
         "connected-react-router": "^6.5.2",