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';