Merge pull request #1772 from pisrcio/mui5

Upgrade to Material-UI 5

README.md

@@ -361,11 +361,11 @@ Using Material-UI theme overrides will allow you to customize styling to your li
 ```js
 import React from "react";
 import MUIDataTable from "mui-datatables";
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 
 class BodyCellExample extends React.Component {
 
-  getMuiTheme = () => createMuiTheme({
+  getMuiTheme = () => createTheme({
     overrides: {
       MUIDataTableBodyCell: {
         root: {
@@ -378,9 +378,9 @@ class BodyCellExample extends React.Component {
   render() {
 
     return (
-      <MuiThemeProvider theme={this.getMuiTheme()}>
+      <ThemeProvider theme={this.getMuiTheme()}>
         <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
-      </MuiThemeProvider>
+      </ThemeProvider>
     );
 
   }

docs/icons/GitHub.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 function GitHub(props) {
   return (

docs/pages/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import DownloadIcon from '@material-ui/icons/CloudDownload';
-import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import BuildIcon from '@mui/icons-material/Build'; // eslint-disable-line import/no-unresolved
 import CodeSnippet from '../utils/CodeSnippet';
 import Layout from '../utils/layout';
 import withRoot from '../utils/withRoot';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/styles';
 
 const styles = theme => ({
   stepIcon: {

docs/utils/CodeSnippet.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import prism from 'prismjs';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-bash';
-import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
+import Paper from '@mui/material/Paper';
+import { withStyles } from '@mui/styles';
 
 const styles = theme => ({});
 

docs/utils/Menu.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core';
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListSubheader from '@material-ui/core/ListSubheader';
+import { withStyles } from '@mui/material';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
 
 const styles = theme => ({
   list: {

docs/utils/getPageContext.js

@@ -1,13 +1,13 @@
 /* eslint-disable no-underscore-dangle */
 
 import { SheetsRegistry } from 'jss';
-import { createMuiTheme, createGenerateClassName } from '@material-ui/core/styles';
-import purple from '@material-ui/core/colors/purple';
-import green from '@material-ui/core/colors/green';
+import { createTheme, createGenerateClassName } from '@mui/material/styles';
+import purple from '@mui/material/colors/purple';
+import green from '@mui/material/colors/green';
 
 // A theme with custom primary and secondary color.
 // It's optional.
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: purple,
     secondary: green,

docs/utils/layout.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
-import Typography from '@material-ui/core/Typography';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@mui/material/Typography';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import Tooltip from '@mui/material/Tooltip';
 import GitHub from '../icons/GitHub';
 import withRoot from '../utils/withRoot';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/styles';
 import Menu from './Menu';
 
 /* eslint-disable import/no-webpack-loader-syntax  */

docs/utils/withRoot.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@mui/styles';
 import getPageContext from './getPageContext';
 
 function withRoot(Component) {
@@ -20,11 +20,11 @@ function withRoot(Component) {
     pageContext = null;
 
     render() {
-      // MuiThemeProvider makes the theme available down the React tree thanks to React context.
+      // ThemeProvider makes the theme available down the React tree thanks to React context.
       return (
-        <MuiThemeProvider theme={this.pageContext.theme} sheetsManager={this.pageContext.sheetsManager}>
+        <ThemeProvider theme={this.pageContext.theme} sheetsManager={this.pageContext.sheetsManager}>
           <Component {...this.props} />
-        </MuiThemeProvider>
+        </ThemeProvider>
       );
     }
   }

examples/Router/ExamplesGrid.js

@@ -1,9 +1,9 @@
 import {Link} from "react-router-dom";
-import {Card, CardContent, Grid, Typography} from "@material-ui/core";
+import {Card, CardContent, Grid, Typography} from "@mui/material";
 import React from "react";
 import examples from "../examples";
-import {withStyles} from "@material-ui/core/styles/index";
-import TextField from '@material-ui/core/TextField';
+import {withStyles} from "@mui/styles";
+import TextField from '@mui/material/TextField';
 
 const styles = {
     container: {

examples/Router/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
-import { withStyles } from '@material-ui/core/styles/index';
+import { withStyles } from '@mui/styles';
 import ExamplesGrid from './ExamplesGrid';
 import examples from '../examples';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { withRouter } from 'react-router-dom';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const styles = {
   root: {
@@ -27,31 +28,35 @@ class Examples extends React.Component {
 
     var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' };
 
+    const defaultTheme = createTheme();
+
     return (
-      <main className={classes.root}>
-        <div className={classes.contentWrapper}>
-          <Switch>
-            <Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
-            {Object.keys(examples).map((label, index) => (
-              <Route
-                key={index}
-                path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
-                exact
-                component={examples[label]}
-              />
-            ))}
-          </Switch>
-          <div>
-            {this.props.location.pathname !== '/' && (
-              <div style={returnHomeStyle}>
-                <Button color="primary" onClick={this.returnHome}>
-                  Back to Example Index
-                </Button>
-              </div>
-            )}
+      <ThemeProvider theme={defaultTheme}>
+        <main className={classes.root}>
+          <div className={classes.contentWrapper}>
+            <Switch>
+              <Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
+              {Object.keys(examples).map((label, index) => (
+                <Route
+                  key={index}
+                  path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
+                  exact
+                  component={examples[label]}
+                />
+              ))}
+            </Switch>
+            <div>
+              {this.props.location.pathname !== '/' && (
+                <div style={returnHomeStyle}>
+                  <Button color="primary" onClick={this.returnHome}>
+                    Back to Example Index
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </ThemeProvider>
     );
   }
 }

examples/array-value-columns/index.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import MUIDataTable from "../../src";
-import Chip from '@material-ui/core/Chip';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
+import Chip from '@mui/material/Chip';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 
 function Example() {
   // const allTags = ['leave-message', 'frequently-busy', 'nice', 'grumpy', 'in-person', 'preferred', 'second-choice'];

examples/column-sort/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { Chip } from "@material-ui/core";
+import { Chip } from "@mui/material";
 import MUIDataTable from "../../src/";
 
 class Example extends React.Component {

examples/component/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
-import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import TextField from '@mui/material/TextField';
+import Switch from '@mui/material/Switch';
 import MUIDataTable from "../../src/";
 import Cities from "./cities";
 
@@ -17,6 +17,7 @@ class Example extends React.Component {
           filter: false,
           customBodyRender: (value, tableMeta, updateValue) => (
             <FormControlLabel
+              label=""
               value={value}
               control={<TextField value={value} />}
               onChange={event => updateValue(event.target.value)}
@@ -51,6 +52,7 @@ class Example extends React.Component {
           filter: false,
           customBodyRender: (value, tableMeta, updateValue) => (
             <FormControlLabel
+              label=""
               control={<TextField value={value || ''} type='number' />}
               onChange={event => updateValue(event.target.value)}
             />

examples/csv-export/index.js

@@ -1,4 +1,4 @@
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import MUIDataTable from '../../src/';

examples/custom-components/TableViewCol.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Checkbox from '@material-ui/core/Checkbox';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import FormControl from '@material-ui/core/FormControl';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { makeStyles } from '@material-ui/core/styles';
+import Checkbox from '@mui/material/Checkbox';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(
   theme => ({

examples/custom-components/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import MUIDataTable from "../../src/";
-import Chip from '@material-ui/core/Chip';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
+import Chip from '@mui/material/Chip';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 import TableFilterList from '../../src/components/TableFilterList';
-import MuiTooltip from '@material-ui/core/Tooltip';
-import Fade from "@material-ui/core/Fade";
-import Checkbox from '@material-ui/core/Checkbox';
-import Radio from '@material-ui/core/Radio';
+import MuiTooltip from '@mui/material/Tooltip';
+import Fade from "@mui/material/Fade";
+import Checkbox from '@mui/material/Checkbox';
+import Radio from '@mui/material/Radio';
 import TableViewCol from './TableViewCol';
 
 const CustomChip = (props) => {

examples/customize-filter/index.js

@@ -10,7 +10,7 @@ import {
   Select,
   InputLabel,
   MenuItem
-} from '@material-ui/core';
+} from '@mui/material';
 import React from 'react';
 import MUIDataTable from '../../src';
 

examples/customize-footer/CustomFooter.js

@@ -1,9 +1,9 @@
 import React from "react";
-import TableFooter from "@material-ui/core/TableFooter";
-import TableRow from "@material-ui/core/TableRow";
-import TableCell from "@material-ui/core/TableCell";
-import MuiTablePagination from "@material-ui/core/TablePagination";
-import { withStyles } from "@material-ui/core/styles";
+import TableFooter from "@mui/material/TableFooter";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import MuiTablePagination from "@mui/material/TablePagination";
+import { withStyles } from "@mui/styles";
 
 const defaultFooterStyles = {
 };

examples/customize-footer/index.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import MUIDataTable from '../../src/';
 import CustomFooter from './CustomFooter';
-import { makeStyles } from '@material-ui/core/styles';
-import TableFooter from '@material-ui/core/TableFooter';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
-import Switch from '@material-ui/core/Switch';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from '@mui/styles';
+import TableFooter from '@mui/material/TableFooter';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import Switch from '@mui/material/Switch';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import clsx from 'clsx';
 
 const useStyles = makeStyles(theme => ({