Update React Material UI to v5

Updates the React Material renderer set to Material UI v5
which is a major update.

Also upgrades React to v17 and adjusts the tests.

Author: TheZoker

package-lock.json

@@ -6,10 +6,10 @@
     "@jsonforms/core": "^3.0.0-alpha.2",
     "@jsonforms/examples": "^3.0.0-alpha.2",
     "@jsonforms/react": "^3.0.0-alpha.2",
-    "@material-ui/core": "^4.7.0",
+    "@mui/material": "^5.2.2",
     "lodash": "^4.17.15",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "redux": "^4.0.4"
   },
   "scripts": {

packages/example/package.json

@@ -11,12 +11,12 @@ import { ExtendedUnwrapped } from '../src/extended';
 import { materialAutocompleteOneOfEnumControlTester } from '../src/extended/MaterialAutocompleteOneOfEnumControl';
 import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import { Typography } from '@mui/material';
 const MyAutocompleteControl = (props: ControlProps & OwnPropsOfEnum) => {
   return (
     <ExtendedUnwrapped.MaterialAutocompleteOneOfEnumControl
       {...props}
-      renderOption={option => (<Typography>{`${option?.value}\t-\t${option?.label}`}</Typography>)}
+      renderOption={({}, option) => (<Typography>{`${option?.value}\t-\t${option?.label}`}</Typography>)}
       filterOptions={(options, state) => options.filter(o => o.label.includes(state.inputValue) || o.value.includes(state.inputValue))}
     />
   );

packages/material/example/CustomAutocomplete.tsx

@@ -71,32 +71,29 @@
   "peerDependencies": {
     "@jsonforms/core": "^3.0.0-alpha.0",
     "@jsonforms/react": "^3.0.0-alpha.0",
-    "@material-ui/core": "^4.7.0",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/pickers": "^3.3.10"
-  },
-  "optionalPeerDependencies": {
-    "@material-ui/lab": "^4.0.0-alpha.56"
+    "@mui/icons-material": "^5.0.0",
+    "@mui/lab": "^5.0.0-alpha.54",
+    "@mui/material": "^5.0.0"
   },
   "devDependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@jsonforms/core": "^3.0.0-alpha.2",
     "@jsonforms/react": "^3.0.0-alpha.2",
-    "@material-ui/core": "^4.7.0",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material-ui/pickers": "^3.2.8",
+    "@mui/icons-material": "^5.2.0",
+    "@mui/lab": "^5.0.0-alpha.58",
+    "@mui/material": "^5.2.2",
     "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/react-dom": "^16.8.0",
+    "@types/react-dom": "^17.0.9",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "copy-webpack-plugin": "^5.0.5",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "jest": "^24.9.0",
+    "jest": "^26.6.3",
     "nyc": "^14.1.1",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "source-map-loader": "^0.2.4",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^26.4.4",
     "ts-loader": "^6.2.1",
     "tslint": "^5.20.1",
     "tslint-loader": "^3.5.4",

packages/material/package.json

@@ -31,8 +31,8 @@ import {
     ListItemAvatar,
     ListItemSecondaryAction,
     ListItemText,
-} from '@material-ui/core';
-import DeleteIcon from '@material-ui/icons/Delete';
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
 const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }: StatePropsOfMasterItem) => {
@@ -47,10 +47,7 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, r
             </ListItemAvatar>
             <ListItemText primary={childLabel} />
             <ListItemSecondaryAction>
-                <IconButton
-                    aria-label='Delete'
-                    onClick={removeItem(path, index)}
-                >
+                <IconButton aria-label='Delete' onClick={removeItem(path, index)} size='large'>
                     <DeleteIcon />
                 </IconButton>
             </ListItemSecondaryAction>

packages/material/src/additional/ListWithDetailMasterItem.tsx

@@ -34,7 +34,7 @@ import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   Hidden,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 
 /**
  * Default tester for a label.

packages/material/src/additional/MaterialLabelRenderer.tsx

@@ -38,7 +38,7 @@ import {
   JsonFormsDispatch,
   withJsonFormsArrayLayoutProps
 } from '@jsonforms/react';
-import { Grid, Hidden, List, Typography } from '@material-ui/core';
+import { Grid, Hidden, List, Typography } from '@mui/material';
 import map from 'lodash/map';
 import range from 'lodash/range';
 import React, { useCallback, useMemo, useState } from 'react';

packages/material/src/additional/MaterialListWithDetailRenderer.tsx

@@ -31,7 +31,7 @@ import {
   WithClassname
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
-import Input from '@material-ui/core/Input';
+import Input from '@mui/material/Input';
 import merge from 'lodash/merge';
 
 export const MaterialDateCell = (props: CellProps & WithClassname) => {

packages/material/src/cells/MaterialDateCell.tsx

@@ -23,14 +23,14 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import Button from '@material-ui/core/Button';
 import {
+    Button,
     Dialog,
     DialogActions,
     DialogContent,
     DialogContentText,
     DialogTitle,
-} from '@material-ui/core';
+} from '@mui/material';
 
 export interface DeleteDialogProps {
     open: boolean;

packages/material/src/complex/DeleteDialog.tsx

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 
 import {
   createCombinatorRenderInfos,