feat(mui): v5

package.json

@@ -11,9 +11,14 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/pickers": "^3.2.10",
+    "@mui/lab": "^5.0.0-alpha.50",
+    "@mui/material": "^5.0.3",
+    "@mui/styles": "^5.0.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",
     "lodash": "^4.17.20",

src/alert.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useComponent from './use-component';
 import Component from './component';
-import MuiAlert from '@material-ui/lab/Alert';
+import MuiAlert from '@mui/material/Alert';
 
 export default function Alert(props) {
   const { severity, content } = useComponent(props.component, [

src/app-bar.js

@@ -3,17 +3,17 @@
 //     hides title and allows for search string to be entered.
 
 import React, { Fragment } from 'react';
-import MuiAppBar from '@material-ui/core/AppBar';
-import Tooltip from '@material-ui/core/Tooltip';
-import MuiToolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
+import MuiAppBar from '@mui/material/AppBar';
+import Tooltip from '@mui/material/Tooltip';
+import MuiToolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 import Icon from './icon';
 import SearchBar from './search-bar';
-import MuiSwitch from '@material-ui/core/Switch';
-import { styled } from '@material-ui/core/styles';
-import { useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import MuiSwitch from '@mui/material/Switch';
+import { styled } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const ResponsiveIconButton = styled(IconButton)(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
@@ -129,6 +129,7 @@ function Toolbar(props) {
             color="inherit"
             aria-label="close search"
             onClick={onToggleShowSearch}
+            size="large"
           >
             <Icon icon="ArrowBack" />
           </IconButton>
@@ -222,7 +223,7 @@ export default function AppBar(props) {
   } = props;
 
   const theme = useTheme();
-  const onMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const onMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
     <StyledMuiAppBar

src/app-container.js

@@ -1,25 +1,31 @@
 import React from 'react';
 import AppUI from './app';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
-import { createTheme } from '@material-ui/core/styles';
-import blueGrey from '@material-ui/core/colors/blueGrey';
-import lightBlue from '@material-ui/core/colors/lightBlue';
+import CssBaseline from '@mui/material/CssBaseline';
+import {
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+  adaptV4Theme,
+} from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { BrowserRouter, Prompt } from 'react-router-dom';
 import globals from 'mson/lib/globals';
 import attach from './attach';
 
-const theme = createTheme({
-  palette: {
-    primary: blueGrey,
-    // primary: blue,
-    // type: 'dark',
-    // secondary: cyan
-    secondary: lightBlue,
-  },
+import { blueGrey, lightBlue } from '@mui/material/colors';
 
-  // shadows: ['none']
-});
+const theme = createTheme(
+  adaptV4Theme({
+    palette: {
+      primary: blueGrey,
+      // primary: blue,
+      // type: 'dark',
+      // secondary: cyan
+      secondary: lightBlue,
+    },
+
+    // shadows: ['none']
+  })
+);
 
 // Note: BrowserRouter needs to be outside of App so that we can use withRouter
 class AppContainer extends React.Component {
@@ -30,22 +36,24 @@ class AppContainer extends React.Component {
   render() {
     const { component, basename } = this.props;
     return (
-      <MuiThemeProvider theme={theme}>
-        <CssBaseline />
-        <BrowserRouter
-          getUserConfirmation={this.onNavigate}
-          basename={basename}
-        >
-          {/* Wrapping div required by BrowserRouter */}
-          <div>
-            <AppUI component={component} />
+      <StyledEngineProvider injectFirst>
+        <MuiThemeProvider theme={theme}>
+          <CssBaseline />
+          <BrowserRouter
+            getUserConfirmation={this.onNavigate}
+            basename={basename}
+          >
+            {/* Wrapping div required by BrowserRouter */}
+            <div>
+              <AppUI component={component} />
 
-            {/* A Prompt is needed to capture back/forward button events with ReactRouter. message
-            is required, but the value is arbitrary */}
-            <Prompt message="foo" />
-          </div>
-        </BrowserRouter>
-      </MuiThemeProvider>
+              {/* A Prompt is needed to capture back/forward button events with ReactRouter. message
+              is required, but the value is arbitrary */}
+              <Prompt message="foo" />
+            </div>
+          </BrowserRouter>
+        </MuiThemeProvider>
+      </StyledEngineProvider>
     );
   }
 }

src/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import Menu from './menu';
 import { Switch, Route } from 'react-router-dom';
 import Component from './component';

src/button.js

@@ -29,7 +29,14 @@ const Button = (props) => {
       />
     );
   } else {
-    return <IconButton onClick={onClick} icon={icon} tooltip={tooltip} />;
+    return (
+      <IconButton
+        onClick={onClick}
+        icon={icon}
+        tooltip={tooltip}
+        size="large"
+      />
+    );
   }
 };
 

src/card.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
+import withStyles from '@mui/styles/withStyles';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import Component from './component';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 const styles = (theme) => ({
   paper: {
@@ -23,7 +23,7 @@ class Card extends React.PureComponent {
     const title = component.get('title');
 
     return (
-      <Grid container spacing={0} justify="center">
+      <Grid container spacing={0} justifyContent="center">
         <Grid item xs={12} sm={9} md={6} lg={6}>
           <Paper className={classes.paper}>
             <Grid container wrap="nowrap">

src/component.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import InnerComponent from './inner-component';
 import compiler from 'mson/lib/compiler';
 import useComponent from './use-component';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 const getOrZero = (value) => (value ? value : 0);
 

src/confirmation-dialog.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 
 export default class ConfirmationDialog extends React.PureComponent {
   handleClose = (yes) => {

src/demo/components/custom-component-attach.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import attach from '../../attach';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import compile from 'mson/lib/compiler/compile';
 
 let ReactCustomComponentAttach = (props) => {

src/demo/components/custom-component-js.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import attach from '../../attach';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import UIComponent from 'mson/lib/ui-component';
 import Form from 'mson/lib/form';

src/demo/components/custom-component-no-props.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import compile from 'mson/lib/compiler/compile';
 
 const ReactCustomComponentNoProps = (/* props */) => {

src/demo/components/custom-component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import useComponent from '../../use-component';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import compile from 'mson/lib/compiler/compile';
 
 const CustomComponent = compile({

src/field-editor-form.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 import Form from './form';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import Field from './fields/field';
 import compiler from 'mson/lib/compiler';
 import each from 'lodash/each';

src/fields/autocomplete-select.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import Select from 'react-select';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
-import Chip from '@material-ui/core/Chip';
-import MenuItem from '@material-ui/core/MenuItem';
+import { emphasize } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Paper from '@mui/material/Paper';
+import Chip from '@mui/material/Chip';
+import MenuItem from '@mui/material/MenuItem';
 import Icon from '../icon';
-import { emphasize } from '@material-ui/core/styles/colorManipulator';
 
 const styles = (theme) => ({
   input: {
@@ -27,18 +27,18 @@ const styles = (theme) => ({
     marginTop: theme.spacing(2) + 5,
   },
   chip: {
-    margin: `${theme.spacing(1)}px ${theme.spacing(0.25)}px`,
+    margin: `${theme.spacing(1)} ${theme.spacing(0.25)}`,
   },
   chipFocused: {
     backgroundColor: emphasize(
-      theme.palette.type === 'light'
+      theme.palette.mode === 'light'
         ? theme.palette.grey[300]
         : theme.palette.grey[700],
       0.08
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
   },
   singleValue: {
     fontSize: theme.typography.subtitle1.fontSize,

src/fields/boolean-field.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import Switch from '@material-ui/core/Switch';
+import Switch from '@mui/material/Switch';
 import CommonField from './common-field';
 import attach from '../attach';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import DisplayValueTypography from './display-value-typography';
 
 class BooleanField extends React.PureComponent {
@@ -11,14 +11,8 @@ class BooleanField extends React.PureComponent {
   };
 
   render() {
-    const {
-      value,
-      disabled,
-      component,
-      editable,
-      useDisplayValue,
-      label,
-    } = this.props;
+    const { value, disabled, component, editable, useDisplayValue, label } =
+      this.props;
 
     let hideLabelUI = null;
 

src/fields/collection-field.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import FormCard from '../form-card';
 import FormDialog from '../form-dialog';
 import attach from '../attach';
 import Button from '../button';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import ConfirmationDialog from '../confirmation-dialog';
 import access from 'mson/lib/access';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import './collection-field.css';
 import SelectOrder from './select-order';
 import ButtonField from 'mson/lib/fields/button-field';
@@ -20,7 +20,7 @@ const getItemStyle = (isDragging, draggableStyle, theme) => ({
   // some basic styles to make the items look a bit nicer
   userSelect: 'none',
   padding: theme.spacing(0.125),
-  margin: `0 0 ${theme.spacing(0.125)}px 0`,
+  margin: `0 0 ${theme.spacing(0.125)} 0`,
 
   // change background colour if dragging
   background: isDragging ? theme.palette.secondary[400] : undefined,

src/fields/common-field.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '../form-control';
 import attach from '../attach';
 import HelpToolTip from './help-tool-tip';

src/fields/component-field.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import attach from '../attach';
 import Component from '../component';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   root: {

src/fields/date-field.js

@@ -7,7 +7,7 @@ import {
   DatePicker,
 } from '@material-ui/pickers';
 import DateFnsUtils from '@date-io/date-fns';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import DisplayValueTypography from './display-value-typography';
 
 const styles = (theme) => ({