eclipsesource · sdirix · Dec 7, 2021 · Sep 28, 2021 · Oct 4, 2021 · Oct 4, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/example/package.json b/packages/example/package.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.1.0",
     "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": {

diff --git a/packages/material/example/CustomAutocomplete.tsx b/packages/material/example/CustomAutocomplete.tsx
@@ -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))}
     />
   );

diff --git a/packages/material/package.json b/packages/material/package.json
@@ -69,34 +69,33 @@
     "dayjs": "1.10.6"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@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.1.0",
+    "@mui/lab": "^5.0.0-alpha.54",
+    "@mui/material": "^5.1.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.1.0",
+    "@mui/lab": "^5.0.0-alpha.54",
+    "@mui/material": "^5.1.0",
     "@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",

diff --git a/packages/material/src/additional/ListWithDetailMasterItem.tsx b/packages/material/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>

diff --git a/packages/material/src/additional/MaterialLabelRenderer.tsx b/packages/material/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.

diff --git a/packages/material/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material/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';

diff --git a/packages/material/src/cells/MaterialDateCell.tsx b/packages/material/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) => {

diff --git a/packages/material/src/complex/DeleteDialog.tsx b/packages/material/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;

diff --git a/packages/material/src/complex/MaterialAllOfRenderer.tsx b/packages/material/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,

diff --git a/packages/material/src/complex/MaterialAnyOfRenderer.tsx b/packages/material/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 = ({

diff --git a/packages/material/src/complex/MaterialArrayControlRenderer.tsx b/packages/material/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) => {

diff --git a/packages/material/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material/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';

diff --git a/packages/material/src/complex/MaterialObjectRenderer.tsx b/packages/material/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 = ({

diff --git a/packages/material/src/complex/MaterialOneOfRenderer.tsx b/packages/material/src/complex/MaterialOneOfRenderer.tsx
@@ -46,7 +46,7 @@ import {
   Hidden,
   Tab,
   Tabs
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   JsonFormsDispatch,
   withJsonFormsOneOfProps

diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/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>

diff --git a/packages/material/src/complex/NoBorderTableCell.tsx b/packages/material/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);
diff --git a/packages/material/src/complex/TableToolbar.tsx b/packages/material/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>

diff --git a/packages/material/src/complex/ValidationIcon.tsx b/packages/material/src/complex/ValidationIcon.tsx
@@ -24,41 +24,34 @@
 */
 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 {
   errorMessages: string;
   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;
diff --git a/packages/material/src/controls/MaterialAnyOfStringOrEnumControl.tsx b/packages/material/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';