[core] Remove v4 conditional code

packages/grid/_modules_/grid/components/GridPagination.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import TablePagination from '@mui/material/TablePagination';
-import { Theme } from '@mui/material/styles';
+import TablePagination, { TablePaginationProps } from '@mui/material/TablePagination';
+import { createTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector';
 import { useGridApiContext } from '../hooks/root/useGridApiContext';
-import { createTheme, getMuiVersion } from '../utils/utils';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
 const defaultTheme = createTheme();
 // Used to hide the Rows per page selector on small devices
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  (theme) => ({
     selectLabel: {
       display: 'none',
       [theme.breakpoints.up('sm')]: {
@@ -59,27 +58,13 @@ export const GridPagination = React.forwardRef<
     [apiRef],
   );
 
-  const handlePageChange = React.useCallback(
-    (event: any, page: number) => {
+  const handlePageChange = React.useCallback<TablePaginationProps['onPageChange']>(
+    (event, page) => {
       apiRef.current.setPage(page);
     },
     [apiRef],
   );
 
-  const getPaginationChangeHandlers = () => {
-    if (getMuiVersion() !== 'v4') {
-      return {
-        onPageChange: handlePageChange,
-        onRowsPerPageChange: handlePageSizeChange,
-      };
-    }
-
-    return {
-      onChangePage: handlePageChange,
-      onChangeRowsPerPage: handlePageSizeChange,
-    };
-  };
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingPageSizeInRowsPerPageOptions = React.useRef(false);
@@ -102,13 +87,10 @@ export const GridPagination = React.forwardRef<
   }
 
   return (
-    // @ts-ignore TODO remove once upgraded v4 support is dropped
     <TablePagination
       ref={ref}
       classes={{
-        ...(getMuiVersion() === 'v5'
-          ? { selectLabel: classes.selectLabel }
-          : { caption: classes.caption }),
+        selectLabel: classes.selectLabel,
         input: classes.input,
       }}
       component="div"
@@ -120,8 +102,9 @@ export const GridPagination = React.forwardRef<
           : []
       }
       rowsPerPage={paginationState.pageSize}
+      onPageChange={handlePageChange}
+      onRowsPerPageChange={handlePageSizeChange}
       {...apiRef.current.getLocaleText('MuiTablePagination')}
-      {...getPaginationChangeHandlers()}
       {...props}
     />
   );

packages/grid/_modules_/grid/components/containers/GridRootStyles.ts

@@ -1,15 +1,14 @@
-import { darken, lighten, Theme } from '@mui/material/styles';
+import { createTheme, darken, lighten, alpha } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
-import { getThemePaletteMode, muiStyleAlpha, createTheme } from '../../utils/utils';
 import { gridClasses } from '../../gridClasses';
 
 const defaultTheme = createTheme();
 export const useStyles = makeStyles(
-  (theme: Theme) => {
+  (theme) => {
     const borderColor =
-      getThemePaletteMode(theme.palette) === 'light'
-        ? lighten(muiStyleAlpha(theme.palette.divider, 1), 0.88)
-        : darken(muiStyleAlpha(theme.palette.divider, 1), 0.68);
+      theme.palette.mode === 'light'
+        ? lighten(alpha(theme.palette.divider, 1), 0.88)
+        : darken(alpha(theme.palette.divider, 1), 0.68);
 
     const gridStyle: { root: any } = {
       root: {
@@ -43,7 +42,7 @@ export const useStyles = makeStyles(
           alignSelf: 'center',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: muiStyleAlpha(
+          backgroundColor: alpha(
             theme.palette.background.default,
             theme.palette.action.disabledOpacity,
           ),
@@ -84,7 +83,7 @@ export const useStyles = makeStyles(
           boxSizing: 'border-box',
         },
         [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: {
-          outline: `solid ${muiStyleAlpha(theme.palette.primary.main, 0.5)} 1px`,
+          outline: `solid ${alpha(theme.palette.primary.main, 0.5)} 1px`,
           outlineWidth: 1,
           outlineOffset: -1,
         },
@@ -224,18 +223,18 @@ export const useStyles = makeStyles(
             },
           },
           '&.Mui-selected': {
-            backgroundColor: muiStyleAlpha(
+            backgroundColor: alpha(
               theme.palette.primary.main,
               theme.palette.action.selectedOpacity,
             ),
             '&:hover': {
-              backgroundColor: muiStyleAlpha(
+              backgroundColor: alpha(
                 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: muiStyleAlpha(
+                backgroundColor: alpha(
                   theme.palette.primary.main,
                   theme.palette.action.selectedOpacity,
                 ),
@@ -362,7 +361,7 @@ export const useStyles = makeStyles(
       },
     };
 
-    if (getThemePaletteMode(theme.palette) === 'dark') {
+    if (theme.palette.mode === 'dark') {
       // Values coming from mac OS.
       const track = '#202022';
       const thumb = '#585859';

packages/grid/_modules_/grid/components/containers/GridToolbarContainer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { makeStyles } from '@mui/styles';
-import { createTheme } from '../../utils/utils';
+import { createTheme } from '@mui/material/styles';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(

packages/grid/_modules_/grid/components/menu/GridMenu.tsx

@@ -4,10 +4,9 @@ import ClickAwayListener, { ClickAwayListenerProps } from '@mui/material/ClickAw
 import Grow from '@mui/material/Grow';
 import Paper from '@mui/material/Paper';
 import Popper, { PopperProps } from '@mui/material/Popper';
-import { Theme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import { HTMLElementType } from '@mui/utils';
-import { createTheme } from '../../utils/utils';
 
 type MenuPosition =
   | 'bottom-end'
@@ -26,7 +25,7 @@ type MenuPosition =
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  (theme) => ({
     root: {
       zIndex: theme.zIndex.modal,
       '& .MuiDataGrid-gridMenuList': {

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

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Theme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper, { PopperProps } from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/root/useGridApiContext';
-import { getMuiVersion, createTheme } from '../../utils/utils';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import {
   InternalStandardProps as StandardProps,
@@ -32,7 +31,7 @@ export interface GridPanelProps extends StandardProps<PopperProps, 'children'> {
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  (theme) => ({
     root: {
       zIndex: theme.zIndex.modal,
     },
@@ -53,23 +52,6 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
   const classes = useStyles(props);
   const apiRef = useGridApiContext();
 
-  const getPopperModifiers = (): any => {
-    if (getMuiVersion() === 'v5') {
-      return [
-        {
-          name: 'flip',
-          enabled: false,
-        },
-      ];
-    }
-
-    return {
-      flip: {
-        enabled: false,
-      },
-    };
-  };
-
   const handleClickAway = React.useCallback(() => {
     apiRef.current.hidePreferences();
   }, [apiRef]);
@@ -96,7 +78,12 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
       className={clsx(className, classes.root)}
       open={open}
       anchorEl={anchorEl}
-      modifiers={getPopperModifiers()}
+      modifiers={[
+        {
+          name: 'flip',
+          enabled: false,
+        },
+      ]}
       {...other}
     >
       <ClickAwayListener onClickAway={handleClickAway}>

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { Theme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
-import { createTheme } from '../../utils/utils';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  (theme) => ({
     root: {
       padding: theme.spacing(1),
     },

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
 import { makeStyles } from '@mui/styles';
-import { getMuiVersion } from '../../utils/utils';
 
 const useStyles = makeStyles(
   () => ({
@@ -25,14 +24,9 @@ export function GridPanelWrapper(
 ) {
   const classes = useStyles();
   const { className, ...other } = props;
-  const extraProps = getMuiVersion().startsWith('v4')
-    ? {
-        getDoc: () => document,
-      }
-    : ({} as any);
 
   return (
-    <TrapFocus open disableEnforceFocus isEnabled={isEnabled} {...extraProps}>
+    <TrapFocus open disableEnforceFocus isEnabled={isEnabled}>
       <div tabIndex={-1} className={clsx(classes.root, className)} {...other} />
     </TrapFocus>
   );

packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Theme } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
 import Badge from '@mui/material/Badge';
 import Button, { ButtonProps } from '@mui/material/Button';
@@ -16,13 +16,12 @@ import { gridPreferencePanelStateSelector } from '../../hooks/features/preferenc
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { GridTranslationKeys } from '../../models/api/gridLocaleTextApi';
 import { GridFilterItem } from '../../models/gridFilterItem';
-import { createTheme } from '../../utils/utils';
 import { useGridApiContext } from '../../hooks/root/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 const defaultTheme = createTheme();
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  (theme) => ({
     list: {
       margin: theme.spacing(1, 1, 0.5),
       padding: theme.spacing(0, 1),

packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts

@@ -43,7 +43,7 @@ export const useGridInfiniteLoader = (
       }
 
       const scrollPositionBottom =
-        scrollPosition.top + containerSizes.windowSizes.height + props.scrollEndThreshold!;
+        scrollPosition.top + containerSizes.windowSizes.height + props.scrollEndThreshold;
 
       if (scrollPositionBottom < containerSizes.dataContainerSizes.height) {
         isInScrollBottomArea.current = false;

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

@@ -1,6 +1,5 @@
 import { GridLocaleText } from '../models/api/gridLocaleTextApi';
 import { GridMergedOptions } from '../models/gridOptions';
-import { getMuiVersion } from './utils';
 
 interface LocalizationV4 {
   props: {
@@ -21,31 +20,15 @@ export type Localization = LocalizationV4 | LocalizationV5;
 export const getGridLocalization = (
   gridTranslations: Partial<GridLocaleText>,
   coreTranslations?,
-): Localization => {
-  if (getMuiVersion() === 'v5') {
-    return {
-      components: {
-        MuiDataGrid: {
-          defaultProps: {
-            localeText: {
-              ...gridTranslations,
-              MuiTablePagination:
-                coreTranslations?.components?.MuiTablePagination.defaultProps || {},
-            },
-          },
-        },
-      },
-    };
-  }
-
-  return {
-    props: {
-      MuiDataGrid: {
+): Localization => ({
+  components: {
+    MuiDataGrid: {
+      defaultProps: {
         localeText: {
           ...gridTranslations,
-          MuiTablePagination: coreTranslations?.props?.MuiTablePagination || {},
+          MuiTablePagination: coreTranslations?.components?.MuiTablePagination.defaultProps || {},
         },
       },
     },
-  };
-};
+  },
+});