diff --git a/examples/crm/package.json b/examples/crm/package.json
index da180661862..bc0f9dd42b4 100644
--- 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
index f5054900975..8a009cb42f8 100644
--- 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
index ba60f36201e..6f7fdc1647a 100644
--- 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
index ed3fea19ad4..aa06255afa7 100644
--- 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
index 8e6b0fc653f..2966bcf3ff6 100644
--- 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
index 9c8fb6f63c2..77269f3f464 100644
--- 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
index ed2761d2c56..8da071c2535 100644
--- 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
index 8e0154e030b..545ab584a5e 100644
--- 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
index 902ad38c580..d8787d394d2 100644
--- 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
index b465c4f0b3d..3e2a1c31da1 100644
--- 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
index bd124cda7d5..52884d7edd0 100644
--- 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
index b26a66fc733..9a870352786 100644
--- 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
index 2fc17be2058..72f0d4e6a7b 100644
--- 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
index fc38df5209f..e7112388c9d 100644
--- 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
index a7a1031880d..abb7a66d37e 100644
--- 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
index 72aff09165f..243d1e3b60d 100644
--- 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
index 9dd8b0dbcb8..64a7a95e605 100644
--- 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
index f21e5da66af..7527006de5a 100644
--- 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
index 9682d1deb0c..c5e0caa2ff6 100644
--- 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
index 870f0ca9bd4..2bec02be56c 100644
--- 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
index e0220e2c4cc..ad33f782b70 100644
--- 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
index 4c513e8691b..df668ea724d 100644
--- 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
index 34dc32708bc..0d35543b10a 100644
--- a/packages/ra-ui-materialui/src/list/List.spec.tsx
+++ b/packages/ra-ui-materialui/src/list/List.spec.tsx
@@ -4,7 +4,7 @@ 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';
@@ -12,7 +12,7 @@ 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
index 517d9649e8b..ef19fa4c0fd 100644
--- 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
index cf2b0eb68c0..ee8d2442345 100644
--- 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 = {
diff --git a/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx
index 56f1f0e3398..f79520c6f53 100644
--- 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
index f25b91ed5fc..469ff1824af 100644
--- 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
index b05938d0db7..ed5015b8075 100644
--- 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",
diff --git a/yarn.lock b/yarn.lock
index 51c10adaed2..f4be7b2eed3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2195,7 +2195,7 @@
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2":
version "7.8.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
@@ -2230,6 +2230,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.8.3":
+ version "7.15.4"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+ integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
"@babel/runtime@^7.9.2":
version "7.14.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
@@ -2738,15 +2745,15 @@
"@types/yargs" "^15.0.0"
chalk "^4.0.0"
-"@material-ui/core@^4.11.2":
- version "4.11.2"
- resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.2.tgz#f8276dfa40d88304e6ceb98962af73803d27d42d"
- integrity sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==
+"@material-ui/core@^4.12.1":
+ version "4.12.3"
+ resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
+ integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
dependencies:
"@babel/runtime" "^7.4.4"
- "@material-ui/styles" "^4.11.2"
- "@material-ui/system" "^4.11.2"
- "@material-ui/types" "^5.1.0"
+ "@material-ui/styles" "^4.11.4"
+ "@material-ui/system" "^4.12.1"
+ "@material-ui/types" "5.1.0"
"@material-ui/utils" "^4.11.2"
"@types/react-transition-group" "^4.2.0"
clsx "^1.0.4"
@@ -2763,39 +2770,39 @@
dependencies:
"@babel/runtime" "^7.4.4"
-"@material-ui/styles@^4.11.2":
- version "4.11.2"
- resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"
- integrity sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==
+"@material-ui/styles@^4.11.2", "@material-ui/styles@^4.11.4":
+ version "4.11.4"
+ resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+ integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
dependencies:
"@babel/runtime" "^7.4.4"
"@emotion/hash" "^0.8.0"
- "@material-ui/types" "^5.1.0"
+ "@material-ui/types" "5.1.0"
"@material-ui/utils" "^4.11.2"
clsx "^1.0.4"
csstype "^2.5.2"
hoist-non-react-statics "^3.3.2"
- jss "^10.0.3"
- jss-plugin-camel-case "^10.0.3"
- jss-plugin-default-unit "^10.0.3"
- jss-plugin-global "^10.0.3"
- jss-plugin-nested "^10.0.3"
- jss-plugin-props-sort "^10.0.3"
- jss-plugin-rule-value-function "^10.0.3"
- jss-plugin-vendor-prefixer "^10.0.3"
+ jss "^10.5.1"
+ jss-plugin-camel-case "^10.5.1"
+ jss-plugin-default-unit "^10.5.1"
+ jss-plugin-global "^10.5.1"
+ jss-plugin-nested "^10.5.1"
+ jss-plugin-props-sort "^10.5.1"
+ jss-plugin-rule-value-function "^10.5.1"
+ jss-plugin-vendor-prefixer "^10.5.1"
prop-types "^15.7.2"
-"@material-ui/system@^4.11.2":
- version "4.11.2"
- resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.2.tgz#7f0a754bba3673ed5fdbfa02fe438096c104b1f6"
- integrity sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==
+"@material-ui/system@^4.12.1":
+ version "4.12.1"
+ resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+ integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.11.2"
csstype "^2.5.2"
prop-types "^15.7.2"
-"@material-ui/types@^5.1.0":
+"@material-ui/types@5.1.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
@@ -7527,12 +7534,12 @@ css-unit-converter@^1.1.1:
resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
-css-vendor@^2.0.7:
- version "2.0.7"
- resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
- integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
+css-vendor@^2.0.8:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+ integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
dependencies:
- "@babel/runtime" "^7.6.2"
+ "@babel/runtime" "^7.8.3"
is-in-browser "^1.0.2"
css-what@2.1:
@@ -7676,7 +7683,7 @@ cssstyle@^2.2.0:
dependencies:
cssom "~0.3.6"
-csstype@^2.5.2, csstype@^2.6.5, csstype@^2.6.7:
+csstype@^2.5.2, csstype@^2.6.7:
version "2.6.8"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
@@ -12936,72 +12943,73 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
-jss-plugin-camel-case@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d"
- integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==
+jss-plugin-camel-case@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz#e7f7097cf97e9deec599cef3275e213452318b93"
+ integrity sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==
dependencies:
"@babel/runtime" "^7.3.1"
hyphenate-style-name "^1.0.3"
- jss "10.0.4"
+ jss "10.7.1"
-jss-plugin-default-unit@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9"
- integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==
+jss-plugin-default-unit@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz#826270e2ee38d7024a281ac67c30d6944f124786"
+ integrity sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==
dependencies:
"@babel/runtime" "^7.3.1"
- jss "10.0.4"
+ jss "10.7.1"
-jss-plugin-global@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5"
- integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==
+jss-plugin-global@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz#9725c46d662aac2e596a0a8741944c060e2b90a1"
+ integrity sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==
dependencies:
"@babel/runtime" "^7.3.1"
- jss "10.0.4"
+ jss "10.7.1"
-jss-plugin-nested@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75"
- integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==
+jss-plugin-nested@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz#35563a7a710a45307fd6b9742ffada1d72a62eb7"
+ integrity sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==
dependencies:
"@babel/runtime" "^7.3.1"
- jss "10.0.4"
+ jss "10.7.1"
tiny-warning "^1.0.2"
-jss-plugin-props-sort@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a"
- integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==
+jss-plugin-props-sort@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz#1d12b26048541ed3a2ed1b69f7fc231605728362"
+ integrity sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==
dependencies:
"@babel/runtime" "^7.3.1"
- jss "10.0.4"
+ jss "10.7.1"
-jss-plugin-rule-value-function@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7"
- integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==
+jss-plugin-rule-value-function@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz#123eb796eb9982f8efa7a7e362daddd90c0c69fe"
+ integrity sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==
dependencies:
"@babel/runtime" "^7.3.1"
- jss "10.0.4"
+ jss "10.7.1"
+ tiny-warning "^1.0.2"
-jss-plugin-vendor-prefixer@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2"
- integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==
+jss-plugin-vendor-prefixer@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz#217821be2d6dacee31d2d464886760ba7742e19a"
+ integrity sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==
dependencies:
"@babel/runtime" "^7.3.1"
- css-vendor "^2.0.7"
- jss "10.0.4"
+ css-vendor "^2.0.8"
+ jss "10.7.1"
-jss@10.0.4, jss@^10.0.3:
- version "10.0.4"
- resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd"
- integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==
+jss@10.7.1, jss@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss/-/jss-10.7.1.tgz#16d846e1a22fb42e857b99f9c6a0c5a27341c804"
+ integrity sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==
dependencies:
"@babel/runtime" "^7.3.1"
- csstype "^2.6.5"
+ csstype "^3.0.2"
is-in-browser "^1.1.3"
tiny-warning "^1.0.2"