feat: Migrate to MUI v5

packages/dx-chart-core/src/plugins/tooltip/computeds.test.ts

@@ -65,8 +65,8 @@ describe('#createReference', () => {
       top: 149,
       right: 178,
       bottom: 151,
-      width: 0,
-      height: 0,
+      width: 4,
+      height: 2,
     });
   });
 });

packages/dx-chart-core/src/plugins/tooltip/computeds.ts

@@ -31,13 +31,17 @@ export const createReference = (
     // *popper.js* subscribes "html -> getBoundingClientRect -> (left, top)" from
     // "reference -> getBoundingClientRect" - so here it is added.
     const htmlRect = rootRef.current!.ownerDocument!.documentElement.getBoundingClientRect();
+    const left = rect[0] + offset[0] + htmlRect.left;
+    const right = rect[2] + offset[0] + htmlRect.left;
+    const top = rect[1] + offset[1] + htmlRect.top;
+    const bottom = rect[3] + offset[1] + htmlRect.top;
     return {
-      left: rect[0] + offset[0] + htmlRect.left,
-      top: rect[1] + offset[1] + htmlRect.top,
-      right: rect[2] + offset[0] + htmlRect.left,
-      bottom: rect[3] + offset[1] + htmlRect.top,
-      width: 0,
-      height: 0,
+      left,
+      top,
+      right,
+      bottom,
+      width: right - left,
+      height: bottom - top,
     };
   },
 });

packages/dx-demo-shell/.eslintrc.json

@@ -5,6 +5,6 @@
     },
     "rules": {
         "filenames/match-regex": [2, "^[a-z-\\.]+$"],
-        "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"]
+        "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"]
     }
 }

packages/dx-demo-shell/scripts/helper-files-parser.js

@@ -16,12 +16,13 @@ const retrieveImportFiles = (imports, regex) => imports
   .filter(r => !!r)
   .map(r => r[1]);
 
-const knownDeepImports = ['@material-ui/core', '@material-ui/icons', '@material-ui/styles'];
+// const knownDeepImports = ['@mui/material', '@mui/icons-material', '@material-ui/styles'];
+const knownDeepImports = ['@mui/material', '@mui/icons-material', '@mui/styles'];
 const dependencies = {
-  '"@material-ui/core"': ['"@material-ui/icons"'],
+  '"@mui/material"': ['"@mui/icons-material"'],
   '"@devexpress/dx-react-chart-material-ui"': [
     '"@devexpress/dx-react-chart"',
-    '"@material-ui/icons"',
+    '"@mui/icons-material"',
   ],
   '"@devexpress/dx-react-chart-bootstrap4"': ['"@devexpress/dx-react-chart"'],
   '"@devexpress/dx-react-chart"': ['"@devexpress/dx-react-core"'],
@@ -32,12 +33,12 @@ const dependencies = {
   '"@devexpress/dx-react-grid-bootstrap4"': ['"@devexpress/dx-react-grid"'],
   '"@devexpress/dx-react-grid-material-ui"': [
     '"@devexpress/dx-react-grid"',
-    '"@material-ui/icons"',
+    '"@mui/icons-material"',
   ],
   '"@devexpress/dx-react-grid"': ['"@devexpress/dx-react-core"'],
   '"@devexpress/dx-react-scheduler-material-ui"': [
     '"@devexpress/dx-react-scheduler"',
-    '"@material-ui/icons"',
+    '"@mui/icons-material"',
   ],
   '"@devexpress/dx-react-scheduler"': ['"@devexpress/dx-react-core"'],
 };

packages/dx-react-chart-demos/.eslintrc.json

@@ -9,6 +9,6 @@
     },
     "rules": {
         "filenames/match-regex": [2, "^[a-z-\\.\\d]+$"],
-        "no-restricted-imports": ["error", "@material-ui/core", "@material-ui/icons"]
+        "no-restricted-imports": ["error", "@mui/material", "@mui/icons-material"]
     }
 }

packages/dx-react-chart-demos/__mocks__/@mui/private-theming/useTheme.js

@@ -0,0 +1,5 @@
+/* eslint-disable filenames/match-regex */
+import { createTheme } from '@mui/material/styles';
+
+const mockDefaultTheme = createTheme();
+export default () => mockDefaultTheme;

packages/dx-react-chart-demos/package.json

@@ -33,10 +33,13 @@
     "@devexpress/dx-react-chart-bootstrap4": "2.7.6",
     "@devexpress/dx-react-chart-material-ui": "2.7.6",
     "@devexpress/dx-react-core": "2.7.6",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@types/react": "16.14.8",
-    "@types/react-dom": "^16.9.13",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.4",
+    "@mui/material": "^5.0.4",
+    "@mui/styles": "^5.0.1",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.9",
     "clsx": "^1.0.4",
     "codemirror": "^5.49.2",
     "core-js": "^3.4.1",
@@ -72,6 +75,7 @@
     "@babel/preset-react": "^7.8.3",
     "@devexpress/dx-testing": "2.7.6",
     "@types/jest": "^26.0.23",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
@@ -80,7 +84,6 @@
     "concurrently": "^5.0.0",
     "css-loader": "^3.2.0",
     "enzyme": "3.10.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-filenames": "^1.3.2",

packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/area.partial.jsx

@@ -1,5 +1,5 @@
 // BLOCK:imports
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 // BLOCK:imports
 
 // BLOCK:body

packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/fullstacked-area.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -9,7 +9,7 @@ import {
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
 import classNames from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { Stack, Animation } from '@devexpress/dx-react-chart';
 import { stackOffsetExpand } from 'd3-shape';
 import { carbonEmmision as data } from '../../../demo-data/data-vizualization';

packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/spline-area.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -8,7 +8,7 @@ import {
   Title,
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { ArgumentScale, Animation } from '@devexpress/dx-react-chart';
 import {
   curveCatmullRom,

packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/stacked-area.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -9,7 +9,7 @@ import {
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
 import classNames from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { Stack, Animation } from '@devexpress/dx-react-chart';
 import { carbonEmmision as data } from '../../../demo-data/data-vizualization';
 

packages/dx-react-chart-demos/src/demo-sources/area-chart/material-ui/step-area.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -8,7 +8,7 @@ import {
   Title,
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { Animation } from '@devexpress/dx-react-chart';
 import { area, curveStep } from 'd3-shape';
 

packages/dx-react-chart-demos/src/demo-sources/bar-chart/bootstrap4/series-interaction.jsx

@@ -67,11 +67,10 @@ const auxiliaryRootStyle = {
 };
 const hoverGroupStyle = { width: '300px' };
 const textStyle = { fontSize: '14px' };
-const primaryButtonsStyle = { width: '120px' };
-const secondaryButtonsStyle = { width: '170px' };
+const buttonsStyle = { width: '170px' };
 const iconStyle = { top: '3px' };
 
-const AuxiliaryName = props => <span className="font-weight-light mx-1" style={textStyle} {...props} />;
+const AuxiliaryName = props => <span className="font-weight-light mx-2" style={textStyle} {...props} />;
 const AuxiliaryData = props => <span {...props} />;
 const AuxiliaryButton = ({ className, ...restProps }) => <button type="button" className={classNames('m-2', className)} {...restProps} />;
 const AuxiliaryIcon = ({ className, ...restProps }) => <span className={classNames('mx-2', className)} style={iconStyle} {...restProps} />;
@@ -81,15 +80,13 @@ const AuxiliarySelection = ({
 }) => (
   <div>
     <div>
-      <AuxiliaryButton onClick={turnPrev} className="btn btn-outline-primary" style={primaryButtonsStyle}>
+      <AuxiliaryButton onClick={turnPrev} className="btn btn-outline-primary">
         <AuxiliaryIcon className="oi oi-caret-left" />
-        Previous
       </AuxiliaryButton>
-      <AuxiliaryButton onClick={clear} className="btn btn-outline-secondary" style={secondaryButtonsStyle}>
+      <AuxiliaryButton onClick={clear} className="btn btn-outline-primary" style={buttonsStyle}>
         Clear Selection
       </AuxiliaryButton>
-      <AuxiliaryButton onClick={turnNext} className="btn btn-outline-primary" style={primaryButtonsStyle}>
-        Next
+      <AuxiliaryButton onClick={turnNext} className="btn btn-outline-primary">
         <AuxiliaryIcon className="oi oi-caret-right" />
       </AuxiliaryButton>
     </div>
@@ -101,7 +98,7 @@ const AuxiliarySelection = ({
 const AuxiliaryHover = ({ target, enabled, toggle }) => (
   <div style={hoverGroupStyle}>
     <div>
-      <AuxiliaryButton onClick={toggle} className="btn btn-outline-secondary" style={secondaryButtonsStyle}>
+      <AuxiliaryButton onClick={toggle} className="btn btn-outline-primary" style={buttonsStyle}>
         {enabled ? 'Disable tooltip' : 'Enable tooltip'}
       </AuxiliaryButton>
     </div>

packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/bidirection-bar.partial.jsx

@@ -1,5 +1,5 @@
 // BLOCK:imports
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 // BLOCK:imports
 
 // BLOCK:body

packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/fullstacked-bar.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -8,7 +8,7 @@ import {
   Title,
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { Stack, Animation } from '@devexpress/dx-react-chart';
 import { stackOffsetExpand } from 'd3-shape';
 

packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/series-interaction.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   BarSeries,
@@ -14,32 +14,23 @@ import { scaleBand } from '@devexpress/dx-chart-core';
 import {
   ArgumentScale, Stack, Animation, EventTracker, HoverState, SelectionState,
 } from '@devexpress/dx-react-chart';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import withStyles from '@mui/styles/withStyles';
 import {
   NavigateBefore, NavigateNext,
-} from '@material-ui/icons/';
-import Typography from '@material-ui/core/Typography';
+} from '@mui/icons-material/';
+import Typography from '@mui/material/Typography';
 
 import { annualVehiclesSales as data } from '../../../demo-data/data-vizualization';
 
 const styles = theme => ({
-  primaryButton: {
+  navigateButton: {
     margin: theme.spacing(1),
-    width: '120px',
   },
-  secondaryButton: {
+  button: {
     margin: theme.spacing(1),
     width: '170px',
   },
-  leftIcon: {
-    marginRight: theme.spacing(1),
-    marginBottom: '1px',
-  },
-  rightIcon: {
-    marginLeft: theme.spacing(1),
-    marginBottom: '1px',
-  },
   text: {
     display: 'flex',
     flexDirection: 'row',
@@ -127,16 +118,14 @@ const AuxiliarySelection = ({
 }) => (
   <div>
     <div className={classes.group}>
-      <AuxiliaryButton onClick={turnPrev} className={classes.primaryButton} color="primary">
-        <NavigateBefore className={classes.leftIcon} />
-        Previous
+      <AuxiliaryButton onClick={turnPrev} className={classes.navigateButton}>
+        <NavigateBefore />
       </AuxiliaryButton>
-      <AuxiliaryButton onClick={clear} className={classes.secondaryButton}>
+      <AuxiliaryButton onClick={clear} className={classes.button}>
         Clear Selection
       </AuxiliaryButton>
-      <AuxiliaryButton onClick={turnNext} className={classes.primaryButton} color="primary">
-        Next
-        <NavigateNext className={classes.rightIcon} />
+      <AuxiliaryButton onClick={turnNext} className={classes.navigateButton}>
+        <NavigateNext />
       </AuxiliaryButton>
     </div>
     <div className={classes.text}>
@@ -150,7 +139,7 @@ const AuxiliaryHover = ({
   classes, target, enabled, toggle,
 }) => (
   <div className={classes.hoverGroup}>
-    <AuxiliaryButton onClick={toggle} className={classes.secondaryButton}>
+    <AuxiliaryButton onClick={toggle} className={classes.button}>
       {enabled ? 'Disable tooltip' : 'Enable tooltip'}
     </AuxiliaryButton>
     <div className={classes.text}>

packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/side-by-side.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -8,7 +8,7 @@ import {
   Title,
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { Stack, Animation } from '@devexpress/dx-react-chart';
 
 import { olimpicMedals as data } from '../../../demo-data/data-vizualization';

packages/dx-react-chart-demos/src/demo-sources/bar-chart/material-ui/stacked-bar.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   ArgumentAxis,
@@ -8,7 +8,7 @@ import {
   Title,
   Legend,
 } from '@devexpress/dx-react-chart-material-ui';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { Stack, Animation } from '@devexpress/dx-react-chart';
 
 import { energyConsumption as data } from '../../../demo-data/data-vizualization';

packages/dx-react-chart-demos/src/demo-sources/chart-basic/material-ui/theme.jsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import {
   Chart,
   PieSeries,
 } from '@devexpress/dx-react-chart-material-ui';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import NativeSelect from '@material-ui/core/NativeSelect';
-import FormControl from '@material-ui/core/FormControl';
+import withStyles from '@mui/styles/withStyles';
+import Typography from '@mui/material/Typography';
+import NativeSelect from '@mui/material/NativeSelect';
+import FormControl from '@mui/material/FormControl';
 import {
   schemeCategory10,
   schemeAccent,