@jsonforms/material-renderers 3.0.0-alpha.2 → 3.0.0-alpha.3

package/lib/mui-controls/MuiToggle.js

@@ -27,13 +27,13 @@ var tslib_1 = require("tslib");
   THE SOFTWARE.
 */
 var react_1 = tslib_1.__importDefault(require("react"));
-var Switch_1 = tslib_1.__importDefault(require("@material-ui/core/Switch"));
+var material_1 = require("@mui/material");
 var merge_1 = tslib_1.__importDefault(require("lodash/merge"));
 exports.MuiToggle = react_1.default.memo(function (props) {
     var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
     var appliedUiSchemaOptions = merge_1.default({}, config, uischema.options);
     var inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
     var checked = !!data;
-    return (react_1.default.createElement(Switch_1.default, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputProps }));
+    return (react_1.default.createElement(material_1.Switch, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputProps }));
 });
 //# sourceMappingURL=MuiToggle.js.map

package/lib/mui-controls/MuiToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiToggle.js","sourceRoot":"","sources":["../../src/mui-controls/MuiToggle.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,wDAA0B;AAE1B,4EAA8C;AAC9C,+DAAiC;AAEpB,QAAA,SAAS,GAAG,eAAK,CAAC,IAAI,CAAC,UAAC,KAAgC;IAEjE,IAAA,IAAI,GAQF,KAAK,KARH,EACJ,SAAS,GAOP,KAAK,UAPE,EACT,EAAE,GAMA,KAAK,GANL,EACF,OAAO,GAKL,KAAK,QALA,EACP,QAAQ,GAIN,KAAK,SAJC,EACR,IAAI,GAGF,KAAK,KAHH,EACJ,YAAY,GAEV,KAAK,aAFK,EACZ,MAAM,GACJ,KAAK,OADD,CACE;IACV,IAAM,sBAAsB,GAAG,eAAK,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnE,IAAM,UAAU,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,KAAK,EAAE,CAAC;IACjE,IAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;IAEvB,OAAO,CACL,8BAAC,gBAAM,IACL,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAC,GAAG,EAAE,SAAS,IAAK,OAAA,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,EAA7B,CAA6B,EAC3D,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,OAAO,EAClB,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"MuiToggle.js","sourceRoot":"","sources":["../../src/mui-controls/MuiToggle.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,wDAA0B;AAE1B,0CAAuC;AACvC,+DAAiC;AAEpB,QAAA,SAAS,GAAG,eAAK,CAAC,IAAI,CAAC,UAAC,KAAgC;IAEjE,IAAA,IAAI,GAQF,KAAK,KARH,EACJ,SAAS,GAOP,KAAK,UAPE,EACT,EAAE,GAMA,KAAK,GANL,EACF,OAAO,GAKL,KAAK,QALA,EACP,QAAQ,GAIN,KAAK,SAJC,EACR,IAAI,GAGF,KAAK,KAHH,EACJ,YAAY,GAEV,KAAK,aAFK,EACZ,MAAM,GACJ,KAAK,OADD,CACE;IACV,IAAM,sBAAsB,GAAG,eAAK,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnE,IAAM,UAAU,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,KAAK,EAAE,CAAC;IACjE,IAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;IAEvB,OAAO,CACL,8BAAC,iBAAM,IACL,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAC,GAAG,EAAE,SAAS,IAAK,OAAA,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,EAA7B,CAA6B,EAC3D,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,OAAO,EAClB,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/util/layout.js

@@ -30,9 +30,9 @@ var isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 var react_1 = tslib_1.__importDefault(require("react"));
 var core_1 = require("@jsonforms/core");
 var react_2 = require("@jsonforms/react");
-var core_2 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
-    return elements.map(function (child, index) { return (react_1.default.createElement(core_2.Grid, { item: true, key: path + "-" + index, xs: true },
+    return elements.map(function (child, index) { return (react_1.default.createElement(material_1.Grid, { item: true, key: path + "-" + index, xs: true },
         react_1.default.createElement(react_2.JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))); });
 };
 exports.renderLayoutElements = renderLayoutElements;
@@ -42,8 +42,8 @@ var MaterialLayoutRendererComponent = function (_a) {
         return null;
     }
     else {
-        return (react_1.default.createElement(core_2.Hidden, { xsUp: !visible },
-            react_1.default.createElement(core_2.Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, exports.renderLayoutElements(elements, schema, path, enabled, renderers, cells))));
+        return (react_1.default.createElement(material_1.Hidden, { xsUp: !visible },
+            react_1.default.createElement(material_1.Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, exports.renderLayoutElements(elements, schema, path, enabled, renderers, cells))));
     }
 };
 exports.MaterialLayoutRenderer = react_1.default.memo(MaterialLayoutRendererComponent);

package/lib/util/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/util/layout.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,mEAAqC;AACrC,wDAA0B;AAG1B,wCAOyB;AACzB,0CAAmE;AACnE,0CAAiD;AAE1C,IAAM,oBAAoB,GAAG,UAClC,QAA2B,EAC3B,MAAkB,EAClB,IAAY,EACZ,OAAgB,EAChB,SAA4C,EAC5C,KAA4C;IAE5C,OAAO,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CACpC,8BAAC,WAAI,IAAC,IAAI,QAAC,GAAG,EAAK,IAAI,SAAI,KAAO,EAAE,EAAE;QACpC,8BAAC,yBAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ,CACG,CACR,EAXqC,CAWrC,CAAC,CAAC;AACL,CAAC,CAAC;AApBW,QAAA,oBAAoB,wBAoB/B;AAMF,IAAM,+BAA+B,GACnC,UAAC,EAS6B;QAR5B,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,IAAI,iBAAO,CAAC,QAAQ,CAAC,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;SAAM;QACL,OAAO,CACL,8BAAC,aAAM,IAAC,IAAI,EAAE,CAAC,OAAO;YACpB,8BAAC,WAAI,IACH,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAEnC,4BAAoB,CACnB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,CACN,CACI,CACA,CACV,CAAC;KACH;AACH,CAAC,CAAC;AACS,QAAA,sBAAsB,GAAG,eAAK,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;AAM3E,IAAM,YAAY,GAAG,UAAe,SAAsC;IAC/E,OAAA,UAAC,KAAQ;QACP,IAAM,GAAG,GAAG,oBAAY,EAAE,CAAC;QAC3B,IAAM,GAAG,GAAG,aAAM,CAAC,EAAC,SAAS,uBAAM,GAAG,CAAC,EAAC,CAAC,CAAC;QAE1C,OAAO,CAAC,8BAAC,SAAS,uBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;AALD,CAKC,CAAC;AANS,QAAA,YAAY,gBAMrB"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/util/layout.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,mEAAqC;AACrC,wDAA0B;AAG1B,wCAOyB;AACzB,0CAAmE;AACnE,0CAA6C;AAEtC,IAAM,oBAAoB,GAAG,UAClC,QAA2B,EAC3B,MAAkB,EAClB,IAAY,EACZ,OAAgB,EAChB,SAA4C,EAC5C,KAA4C;IAE5C,OAAO,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CACpC,8BAAC,eAAI,IAAC,IAAI,QAAC,GAAG,EAAK,IAAI,SAAI,KAAO,EAAE,EAAE;QACpC,8BAAC,yBAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ,CACG,CACR,EAXqC,CAWrC,CAAC,CAAC;AACL,CAAC,CAAC;AApBW,QAAA,oBAAoB,wBAoB/B;AAMF,IAAM,+BAA+B,GACnC,UAAC,EAS6B;QAR5B,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,IAAI,iBAAO,CAAC,QAAQ,CAAC,EAAE;QACrB,OAAO,IAAI,CAAC;KACb;SAAM;QACL,OAAO,CACL,8BAAC,iBAAM,IAAC,IAAI,EAAE,CAAC,OAAO;YACpB,8BAAC,eAAI,IACH,SAAS,QACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAEnC,4BAAoB,CACnB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,CACN,CACI,CACA,CACV,CAAC;KACH;AACH,CAAC,CAAC;AACS,QAAA,sBAAsB,GAAG,eAAK,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;AAM3E,IAAM,YAAY,GAAG,UAAe,SAAsC;IAC/E,OAAA,UAAC,KAAQ;QACP,IAAM,GAAG,GAAG,oBAAY,EAAE,CAAC;QAC3B,IAAM,GAAG,GAAG,aAAM,CAAC,EAAC,SAAS,uBAAM,GAAG,CAAC,EAAC,CAAC,CAAC;QAE1C,OAAO,CAAC,8BAAC,SAAS,uBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;AALD,CAKC,CAAC;AANS,QAAA,YAAY,gBAMrB"}

package/lib/util/theme.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 export interface JsonFormsTheme extends Theme {
     jsonforms?: {
         input?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -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": {
-    "@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",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@jsonforms/core": "^3.0.0-alpha.3",
+    "@jsonforms/react": "^3.0.0-alpha.3",
+    "@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",
@@ -106,5 +103,5 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "7532a3e16558d9f0934bd5c602ccbe3a35ed9dab"
+  "gitHead": "81f1f19dac49b1864e712e9abbc5c5c6355a2b91"
 }

package/src/additional/ListWithDetailMasterItem.tsx

@@ -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>

package/src/additional/MaterialLabelRenderer.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.

package/src/additional/MaterialListWithDetailRenderer.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';

package/src/cells/MaterialDateCell.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) => {

package/src/complex/DeleteDialog.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;

package/src/complex/MaterialAllOfRenderer.tsx

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

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -34,7 +34,7 @@ import {
   StatePropsOfCombinator
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
-import { Hidden, Tab, Tabs } from '@material-ui/core';
+import { Hidden, Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
 
 export const MaterialAnyOfRenderer = ({

package/src/complex/MaterialArrayControlRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import { ArrayLayoutProps } from '@jsonforms/core';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import { DeleteDialog } from './DeleteDialog';
 
 export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -21,7 +21,7 @@ import {
   FormGroup,
   FormHelperText,
   Hidden
-} from '@material-ui/core';
+} from '@mui/material';
 import { startCase } from 'lodash';
 import { isEmpty } from 'lodash';
 import React from 'react';

package/src/complex/MaterialObjectRenderer.tsx

@@ -32,7 +32,7 @@ import {
   StatePropsOfControlWithDetail
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import React, { useMemo } from 'react';
 
 export const MaterialObjectRenderer = ({

package/src/complex/MaterialOneOfRenderer.tsx

@@ -46,7 +46,7 @@ import {
   Hidden,
   Tab,
   Tabs
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   JsonFormsDispatch,
   withJsonFormsOneOfProps

package/src/complex/MaterialTableControl.tsx

@@ -36,13 +36,14 @@ import {
   FormHelperText,
   Grid,
   Hidden,
+  IconButton,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   ArrayLayoutProps,
   ControlElement,
@@ -54,10 +55,9 @@ import {
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
 
 import { WithDeleteDialogSupport } from './DeleteDialog';
 import NoBorderTableCell from './NoBorderTableCell';
@@ -287,17 +287,13 @@ const NonEmptyRowComponent =
             <Grid
               container
               direction='row'
-              justify='flex-end'
+              justifyContent='flex-end'
               alignItems='center'
             >
               {showSortButtons ? (
                 <Fragment>
                   <Grid item>
-                    <IconButton
-                      aria-label={`Move up`}
-                      onClick={moveUp}
-                      disabled={!enableUp}
-                    >
+                    <IconButton aria-label={`Move up`} onClick={moveUp} disabled={!enableUp} size='large'>
                       <ArrowUpward />
                     </IconButton>
                   </Grid>
@@ -306,7 +302,7 @@ const NonEmptyRowComponent =
                       aria-label={`Move down`}
                       onClick={moveDown}
                       disabled={!enableDown}
-                    >
+                      size='large'>
                       <ArrowDownward />
                     </IconButton>
                   </Grid>
@@ -316,7 +312,7 @@ const NonEmptyRowComponent =
                 <IconButton
                   aria-label={`Delete`}
                   onClick={() => openDeleteDialog(childPath, rowIndex)}
-                >
+                  size='large'>
                   <DeleteIcon />
                 </IconButton>
               </Grid>

package/src/complex/NoBorderTableCell.tsx

@@ -22,20 +22,18 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { withStyles } from '@material-ui/core/styles';
-import { TableCell } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import { TableCell } from '@mui/material';
 import React from 'react';
 
-const styles = {
-    noBottomBorder: {
-        borderBottom: 'none'
-    }
-};
+const StyledTableCell = styled(TableCell)({
+  borderBottom: 'none'
+});
 
-const NoBorderTableCell = ({ classes, children, ...otherProps }: any) => (
-    <TableCell className={classes.noBottomBorder} {...otherProps}>
-        {children}
-    </TableCell>
+const NoBorderTableCell = ({ children, ...otherProps }: any) => (
+  <StyledTableCell {...otherProps}>
+    {children}
+  </StyledTableCell>
 );
 
-export default withStyles(styles)(NoBorderTableCell);
+export default (NoBorderTableCell);

package/src/complex/TableToolbar.tsx

@@ -28,11 +28,13 @@ import {
   createDefaultValue,
   JsonSchema,
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import { Grid, Hidden, Typography } from '@material-ui/core';
-import TableRow from '@material-ui/core/TableRow';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddIcon from '@material-ui/icons/Add';
+import {
+  IconButton,
+  TableRow,
+  Tooltip
+} from '@mui/material';
+import { Grid, Hidden, Typography } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
 
@@ -67,7 +69,7 @@ const TableToolbar = React.memo(
       <NoBorderTableCell colSpan={numColumns}>
         <Grid
           container
-          justify={'flex-start'}
+          justifyContent={'flex-start'}
           alignItems={'center'}
           spacing={2}
         >
@@ -96,7 +98,7 @@ const TableToolbar = React.memo(
             <IconButton
               aria-label={`Add to ${label}`}
               onClick={addItem(path, createDefaultValue(schema))}
-            >
+              size='large'>
               <AddIcon />
             </IconButton>
           </Tooltip>

package/src/complex/ValidationIcon.tsx

@@ -24,22 +24,15 @@
 */
 import React from 'react';
 
-import Badge from '@material-ui/core/Badge';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
-import Tooltip from '@material-ui/core/Tooltip';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import {
-  StyledComponentProps,
-  withStyles,
-  WithStyles,
-  createStyles,
-  Theme
-} from '@material-ui/core/styles';
+  Badge,
+  Tooltip,
+  styled
+} from '@mui/material';
 
-export { StyledComponentProps };
-const styles = createStyles(({ palette }: Theme) => ({
-  badge: {
-    color: palette.error.main
-  }
+const StyledBadge = styled(Badge)(({ theme }: any) => ({
+  color: theme.palette.error.main
 }));
 
 export interface ValidationProps {
@@ -47,18 +40,18 @@ export interface ValidationProps {
   id: string;
 }
 
-const ValidationIcon: React.FC<ValidationProps & WithStyles<'badge'>> =
-  ({ classes, errorMessages, id }) => {
+const ValidationIcon: React.FC<ValidationProps> =
+  ({ errorMessages, id }) => {
     return (
       <Tooltip
         id={id}
         title={errorMessages}
       >
-        <Badge className={classes.badge} badgeContent={errorMessages.split('\n').length}>
+        <StyledBadge badgeContent={errorMessages.split('\n').length}>
           <ErrorOutlineIcon color='inherit'/>
-        </Badge>
+        </StyledBadge>
       </Tooltip>
     );
 };
 
-export default withStyles(styles, { name: 'ValidationIcon' })(ValidationIcon);
+export default ValidationIcon;

package/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -35,8 +35,7 @@ import {
   WithClassname
 } from '@jsonforms/core';
 import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { Input } from '@material-ui/core';
-import { InputBaseComponentProps } from '@material-ui/core/InputBase';
+import { Input, InputBaseComponentProps } from '@mui/material';
 import merge from 'lodash/merge';
 import React, { useMemo } from 'react';
 import { useDebouncedChange } from '../util';

package/src/controls/MaterialBooleanControl.tsx

@@ -31,7 +31,7 @@ import {
   ControlProps
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@material-ui/core';
+import { FormControlLabel, Hidden } from '@mui/material';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
 
 export const MaterialBooleanControl = ({

package/src/controls/MaterialBooleanToggleControl.tsx

@@ -33,7 +33,7 @@ import {
   and
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@material-ui/core';
+import { FormControlLabel, Hidden } from '@mui/material';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
 export const MaterialBooleanToggleControl = ({

package/src/controls/MaterialDateControl.tsx

@@ -32,15 +32,12 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@material-ui/core';
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import EventIcon from '@material-ui/icons/Event';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
 import {
-  KeyboardDatePicker,
-  MuiPickersUtilsProvider
-} from '@material-ui/pickers';
-import DayJsUtils from '@date-io/dayjs';
+  DatePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
 import { createOnChangeHandler, getData, useFocus } from '../util';
 
 export const MaterialDateControl = (props: ControlProps)=> {
@@ -85,32 +82,34 @@ export const MaterialDateControl = (props: ControlProps)=> {
 
   return (
     <Hidden xsUp={!visible}>
-      <MuiPickersUtilsProvider utils={DayJsUtils}>
-        <KeyboardDatePicker
-          id={id + '-input'}
-          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
           label={label}
-          error={!isValid}
-          fullWidth={!appliedUiSchemaOptions.trim}
-          InputLabelProps={data ? { shrink: true } : undefined}
           value={getData(data, saveFormat)}
           clearable
           onChange={onChange}
-          format={format}
+          inputFormat={format}
+          disableMaskedInput
           views={appliedUiSchemaOptions.views}
           disabled={!enabled}
-          autoFocus={appliedUiSchemaOptions.focus}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          cancelLabel={appliedUiSchemaOptions.cancelLabel}
-          clearLabel={appliedUiSchemaOptions.clearLabel}
-          okLabel={appliedUiSchemaOptions.okLabel}
-          leftArrowIcon={<KeyboardArrowLeftIcon />}
-          rightArrowIcon={<KeyboardArrowRightIcon />}
-          keyboardIcon={<EventIcon />}
-          invalidDateMessage={null}
-          maxDateMessage={null}
-          minDateMessage={null}
+          cancelText={appliedUiSchemaOptions.cancelLabel}
+          clearText={appliedUiSchemaOptions.clearLabel}
+          okText={appliedUiSchemaOptions.okLabel}
+          renderInput={params => (
+            <TextField 
+              {...params}
+              id={id + '-input'}
+              required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+              autoFocus={appliedUiSchemaOptions.focus}
+              error={!isValid}
+              fullWidth={!appliedUiSchemaOptions.trim}
+              inputProps={{ ...params.inputProps, type: 'text' }}
+              InputLabelProps={data ? { shrink: true } : undefined}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              variant={'standard'}
+            />
+          )}
         />
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
@@ -118,7 +117,7 @@ export const MaterialDateControl = (props: ControlProps)=> {
         <FormHelperText error={!isValid}>
           {secondFormHelperText}
         </FormHelperText>
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </Hidden>
   );
 };