[DataGrid] Add support for MUI v5

packages/grid/_modules_/grid/components/Pagination.tsx

@@ -5,6 +5,7 @@ import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { paginationSelector } from '../hooks/features/pagination/paginationSelector';
 import { optionsSelector } from '../hooks/utils/useOptionsProp';
 import { ApiContext } from './api-context';
+import { isMuiV5 } from '../utils';
 
 // Used to hide the drop down select from the TablePaginagion
 const useStyles = makeStyles((theme: Theme) => ({
@@ -46,22 +47,36 @@ export function Pagination() {
     [apiRef],
   );
 
+  const getPaginationChangeHandlers = () => {
+    if (isMuiV5()) {
+      return {
+        onPageChange,
+        onRowsPerPageChange: onPageSizeChange,
+      };
+    }
+
+    return {
+      onChangePage: onPageChange,
+      onChangeRowsPerPage: onPageSizeChange,
+    };
+  };
+
   return (
+    // @ts-ignore TODO remove once upgraded v4 support is dropped
     <TablePagination
       classes={classes}
       component="div"
       count={paginationState.rowCount}
       page={paginationState.page - 1}
-      onChangePage={onPageChange}
       rowsPerPageOptions={
         options.rowsPerPageOptions &&
         options.rowsPerPageOptions.indexOf(paginationState.pageSize) > -1
           ? options.rowsPerPageOptions
           : []
       }
       rowsPerPage={paginationState.pageSize}
-      onChangeRowsPerPage={onPageSizeChange}
       labelRowsPerPage={apiRef!.current.getLocaleText('footerPaginationRowsPerPage')}
+      {...getPaginationChangeHandlers()}
     />
   );
 }

packages/grid/_modules_/grid/components/panel/ColumnsPanel.tsx

@@ -91,6 +91,7 @@ export function ColumnsPanel() {
           inputRef={searchInputRef}
           value={searchValue}
           onChange={handleSearchValueChange}
+          variant="standard"
           fullWidth
         />
       </div>

packages/grid/_modules_/grid/components/panel/Panel.tsx

@@ -4,6 +4,7 @@ import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { ApiContext } from '../api-context';
+import { isMuiV5 } from '../../utils';
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -43,6 +44,23 @@ export function Panel(props: PanelProps) {
   const classes = useStyles();
   const apiRef = React.useContext(ApiContext);
 
+  const getPopperModifiers = (): any => {
+    if (isMuiV5()) {
+      return [
+        {
+          name: 'flip',
+          enabled: false,
+        },
+      ];
+    }
+
+    return {
+      flip: {
+        enabled: false,
+      },
+    };
+  };
+
   const handleClickAway = React.useCallback(() => {
     apiRef!.current.hidePreferences();
   }, [apiRef]);
@@ -61,11 +79,7 @@ export function Panel(props: PanelProps) {
       placement="bottom-start"
       open={open}
       anchorEl={anchorEl}
-      modifiers={{
-        flip: {
-          enabled: false,
-        },
-      }}
+      modifiers={getPopperModifiers()}
     >
       <ClickAwayListener onClickAway={handleClickAway}>
         <Paper className={classes.root} elevation={8}>

packages/grid/_modules_/grid/components/panel/filterPanel/FilterInputValue.tsx

@@ -48,6 +48,7 @@ export function FilterInputValue(props: TypeFilterInputValueProps) {
       value={filterValueState}
       onChange={onFilterChange}
       type={type || 'text'}
+      variant="standard"
       InputProps={inputProps}
       InputLabelProps={{
         shrink: true,

packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts

@@ -1,11 +1,12 @@
-import { darken, fade, lighten, makeStyles, Theme } from '@material-ui/core/styles';
+import { darken, lighten, makeStyles, Theme } from '@material-ui/core/styles';
+import { getThemePaletteMode, muiStyleAlpha } from '../../utils';
 
 export const useStyles = makeStyles(
   (theme: Theme) => {
     const borderColor =
-      theme.palette.type === 'light'
-        ? lighten(fade(theme.palette.divider, 1), 0.88)
-        : darken(fade(theme.palette.divider, 1), 0.68);
+      getThemePaletteMode(theme.palette) === 'light'
+        ? lighten(muiStyleAlpha(theme.palette.divider, 1), 0.88)
+        : darken(muiStyleAlpha(theme.palette.divider, 1), 0.68);
 
     const gridStyle: { root: any } = {
       root: {
@@ -38,7 +39,7 @@ export const useStyles = makeStyles(
           alignSelf: 'center',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: fade(
+          backgroundColor: muiStyleAlpha(
             theme.palette.background.default,
             theme.palette.action.disabledOpacity,
           ),
@@ -199,15 +200,18 @@ export const useStyles = makeStyles(
             },
           },
           '&.Mui-selected': {
-            backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+            backgroundColor: muiStyleAlpha(
+              theme.palette.primary.main,
+              theme.palette.action.selectedOpacity,
+            ),
             '&:hover': {
-              backgroundColor: fade(
+              backgroundColor: muiStyleAlpha(
                 theme.palette.primary.main,
                 theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
               ),
               // Reset on touch devices, it doesn't add specificity
               '@media (hover: none)': {
-                backgroundColor: fade(
+                backgroundColor: muiStyleAlpha(
                   theme.palette.primary.main,
                   theme.palette.action.selectedOpacity,
                 ),
@@ -278,7 +282,7 @@ export const useStyles = makeStyles(
       },
     };
 
-    if (theme.palette.type === 'dark') {
+    if (getThemePaletteMode(theme.palette) === 'dark') {
       // Values coming from mac OS.
       const track = '#202022';
       const thumb = '#585859';

packages/grid/_modules_/grid/utils/utils.ts

@@ -1,3 +1,4 @@
+import * as styles from '@material-ui/core/styles';
 import isEqual from '../lib/lodash/isEqual';
 
 export { isEqual };
@@ -31,6 +32,21 @@ export function isObject(value: any): value is Record<string, any> {
   return typeof value === 'object';
 }
 
+export function getThemePaletteMode(palette: any): string {
+  return palette.type || palette.mode;
+}
+
+export function isMuiV5(): boolean {
+  return 'alpha' in styles;
+}
+
+export function muiStyleAlpha(color: string, value: number): string {
+  if (isMuiV5()) {
+    return (styles as any)?.alpha(color, value);
+  }
+  return (styles as any)?.fade(color, value);
+}
+
 export function localStorageAvailable() {
   try {
     // Incognito mode might reject access to the localStorage for security reasons.

packages/grid/data-grid/package.json

@@ -36,7 +36,7 @@
     "reselect": "^4.0.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.9.12",
+    "@material-ui/core": "^4.9.12 || ^5.0.0-alpha.22",
     "react": "^16.8.0 || ^17.0.0"
   },
   "setupFiles": [

packages/grid/x-grid/package.json

@@ -37,7 +37,7 @@
     "reselect": "^4.0.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.9.12",
+    "@material-ui/core": "^4.9.12 || ^5.0.0-alpha.22",
     "react": "^16.8.0 || ^17.0.0"
   },
   "setupFiles": [

packages/x-grid-data-generator/package.json

@@ -31,7 +31,7 @@
     "lru-cache": "^6.0.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.9.12",
+    "@material-ui/core": "^4.9.12 || ^5.0.0-alpha.22",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
     "@material-ui/x-grid": "^4.0.0-alpha.1",

packages/x-grid-data-generator/src/renderer/renderPnl.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { CellParams } from '@material-ui/x-grid';
+import { CellParams, getThemePaletteMode } from '@material-ui/x-grid';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -11,10 +11,15 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     positive: {
       color:
-        theme.palette.type === 'light' ? theme.palette.success.dark : theme.palette.success.light,
+        getThemePaletteMode(theme.palette) === 'light'
+          ? theme.palette.success.dark
+          : theme.palette.success.light,
     },
     negative: {
-      color: theme.palette.type === 'light' ? theme.palette.error.dark : theme.palette.error.light,
+      color:
+        getThemePaletteMode(theme.palette) === 'light'
+          ? theme.palette.error.dark
+          : theme.palette.error.light,
     },
   }),
 );

packages/x-grid-data-generator/src/renderer/renderTotalPrice.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { makeStyles, createStyles, Theme, fade } from '@material-ui/core/styles';
-import { CellParams } from '@material-ui/x-grid';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { CellParams, muiStyleAlpha } from '@material-ui/x-grid';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -11,10 +11,10 @@ const useStyles = makeStyles((theme: Theme) =>
       fontVariantNumeric: 'tabular-nums',
     },
     good: {
-      backgroundColor: fade(theme.palette.success.main, 0.3),
+      backgroundColor: muiStyleAlpha(theme.palette.success.main, 0.3),
     },
     bad: {
-      backgroundColor: fade(theme.palette.error.main, 0.3),
+      backgroundColor: muiStyleAlpha(theme.palette.error.main, 0.3),
     },
   }),
 );