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

package/src/controls/MaterialDateTimeControl.tsx

@@ -32,17 +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 DateRangeIcon from '@material-ui/icons/DateRange';
-import EventIcon from '@material-ui/icons/Event';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
 import {
-  KeyboardDateTimePicker,
-  MuiPickersUtilsProvider
-} from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+  DateTimePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
 import { createOnChangeHandler, getData, useFocus } from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
@@ -89,35 +84,35 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
 
   return (
     <Hidden xsUp={!visible}>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDateTimePicker
-          id={id + '-input'}
-          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DateTimePicker
           label={label}
-          error={!isValid}
-          fullWidth={!appliedUiSchemaOptions.trim}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          InputLabelProps={data ? { shrink: true } : undefined}
           value={getData(data, saveFormat)}
           clearable
           onChange={onChange}
-          format={format}
+          inputFormat={format}
+          disableMaskedInput
           ampm={!!appliedUiSchemaOptions.ampm}
           views={appliedUiSchemaOptions.views}
           disabled={!enabled}
-          autoFocus={appliedUiSchemaOptions.focus}
-          cancelLabel={appliedUiSchemaOptions.cancelLabel}
-          clearLabel={appliedUiSchemaOptions.clearLabel}
-          okLabel={appliedUiSchemaOptions.okLabel}
-          leftArrowIcon={<KeyboardArrowLeftIcon />}
-          rightArrowIcon={<KeyboardArrowRightIcon />}
-          dateRangeIcon={<DateRangeIcon />}
-          keyboardIcon={<EventIcon />}
-          timeIcon={<AccessTimeIcon />}
-          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}
@@ -125,7 +120,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
         <FormHelperText error={!isValid}>
           {secondFormHelperText}
         </FormHelperText>
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </Hidden>
   );
 };

package/src/controls/MaterialEnumControl.tsx

@@ -35,7 +35,7 @@ import { MuiSelect } from '../mui-controls/MuiSelect';
 import { MaterialInputControl } from './MaterialInputControl';
 
 export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum) => (
-    <MaterialInputControl {...props} input={MuiSelect} />
+  <MaterialInputControl {...props} input={MuiSelect} />
 );
 
 export const materialEnumControlTester: RankedTester = rankWith(

package/src/controls/MaterialInputControl.tsx

@@ -29,8 +29,8 @@ import {
   isDescriptionHidden,
 } from '@jsonforms/core';
 
-import { Hidden, InputLabel } from '@material-ui/core';
-import { FormControl, FormHelperText } from '@material-ui/core';
+import { Hidden, InputLabel } from '@mui/material';
+import { FormControl, FormHelperText } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util';
 
@@ -76,6 +76,7 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
         onFocus={onFocus}
         onBlur={onBlur}
         id={id}
+        variant={'standard'}
       >
         <InputLabel
           htmlFor={id + '-input'}

package/src/controls/MaterialNativeControl.tsx

@@ -33,9 +33,8 @@ import {
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Hidden } from '@material-ui/core';
+import { Hidden, TextField } from '@mui/material';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import TextField from '@material-ui/core/TextField';
 import merge from 'lodash/merge';
 import { useDebouncedChange, useFocus } from '../util';
 

package/src/controls/MaterialOneOfEnumControl.tsx

@@ -35,7 +35,7 @@ import { MuiSelect } from '../mui-controls/MuiSelect';
 import { MaterialInputControl } from './MaterialInputControl';
 
 export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum) => (
-    <MaterialInputControl {...props} input={MuiSelect} />
+  <MaterialInputControl {...props} input={MuiSelect} />
 );
 
 export const materialOneOfEnumControlTester: RankedTester = rankWith(

package/src/controls/MaterialOneOfRadioGroupControl.tsx

@@ -36,12 +36,12 @@ import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
 import { MaterialRadioGroup } from './MaterialRadioGroup';
 
 export const MaterialOneOfRadioGroupControl = (props: ControlProps & OwnPropsOfEnum) => {
-   return <MaterialRadioGroup {...props}/>;
+  return <MaterialRadioGroup {...props}/>;
 };
 
 export const materialOneOfRadioGroupControlTester: RankedTester = rankWith(
-    20,
-    and(isOneOfEnumControl, optionIs('format', 'radio'))
-  );
+  20,
+  and(isOneOfEnumControl, optionIs('format', 'radio'))
+);
 
 export default withJsonFormsOneOfEnumProps(MaterialOneOfRadioGroupControl);

package/src/controls/MaterialRadioGroup.tsx

@@ -30,15 +30,15 @@ import {
   isDescriptionHidden,
   OwnPropsOfEnum
 } from '@jsonforms/core';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
 import {
   FormControl,
   FormControlLabel,
   FormHelperText,
   FormLabel,
-  Hidden
-} from '@material-ui/core';
+  Hidden,
+  Radio,
+  RadioGroup
+} from '@mui/material';
 import { useFocus } from '../util';
 
 export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
@@ -54,7 +54,8 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
     visible,
     options,
     handleChange,
-    path
+    path,
+    enabled
   } = props;
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge(
@@ -99,6 +100,7 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
               key={option.label}
               control={<Radio checked={data === option.value} />}
               label={option.label}
+              disabled={!enabled}
             />
           ))}
         </RadioGroup>

package/src/controls/MaterialRadioGroupControl.tsx

@@ -32,7 +32,7 @@ import {
 import {  withJsonFormsEnumProps } from '@jsonforms/react';
 import { MaterialRadioGroup } from './MaterialRadioGroup';
 export const MaterialRadioGroupControl = (props: ControlProps & OwnPropsOfEnum) => {
-   return <MaterialRadioGroup {...props} />;
+  return <MaterialRadioGroup {...props} />;
 };
 
 export const materialRadioGroupControlTester: RankedTester = rankWith(

package/src/controls/MaterialSliderControl.tsx

@@ -40,7 +40,7 @@ import {
   Hidden,
   Slider,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util';
 

package/src/controls/MaterialTimeControl.tsx

@@ -32,12 +32,12 @@ import {
   rankWith
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@material-ui/core';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
 import {
-  KeyboardTimePicker,
-  MuiPickersUtilsProvider
-} from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+  TimePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
 import { createOnChangeHandler, getData, useFocus } from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
@@ -84,30 +84,35 @@ export const MaterialTimeControl = (props: ControlProps) => {
 
   return (
     <Hidden xsUp={!visible}>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardTimePicker
-          id={id + '-input'}
-          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
           label={label}
-          error={!isValid}
-          fullWidth={!appliedUiSchemaOptions.trim}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          InputLabelProps={data ? { shrink: true } : undefined}
           value={getData(data, saveFormat)}
           clearable
           onChange={onChange}
-          format={format}
+          inputFormat={format}
+          disableMaskedInput
           ampm={!!appliedUiSchemaOptions.ampm}
           views={appliedUiSchemaOptions.views}
           disabled={!enabled}
-          autoFocus={appliedUiSchemaOptions.focus}
-          cancelLabel={appliedUiSchemaOptions.cancelLabel}
-          clearLabel={appliedUiSchemaOptions.clearLabel}
-          okLabel={appliedUiSchemaOptions.okLabel}
-          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}
@@ -115,7 +120,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
         <FormHelperText error={!isValid}>
           {secondFormHelperText}
         </FormHelperText>
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </Hidden>
   );
 };

package/src/extended/MuiAutocomplete.tsx

@@ -25,15 +25,18 @@
 import React, { ReactNode } from 'react';
 import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
 
-import Input from '@material-ui/core/Input';
-import Autocomplete, { AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete';
+import {
+  Autocomplete,
+  AutocompleteRenderOptionState,
+  Input,
+  FilterOptionsState
+} from '@mui/material';
 import merge from 'lodash/merge';
-import { FilterOptionsState } from '@material-ui/lab/useAutocomplete';
 
 export interface WithOptionLabel {
-    getOptionLabel?(option: EnumOption) : string;
-    renderOption?(option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
-    filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
+  getOptionLabel?(option: EnumOption) : string;
+  renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
+  filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
 }
 
 export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptionLabel) => {

package/src/extended/index.ts

@@ -36,7 +36,7 @@ import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 import { materialRenderers } from '../';
 
 /**
- * Includes all 'materialRenderers' and adds additional renderers based on '@material-ui/lab'
+ * Includes all 'materialRenderers' and adds additional renderers based on '@mui/lab'
  */
 export const extendedMaterialRenderers: JsonFormsRendererRegistryEntry[] = [
   {

package/src/layouts/ArrayToolbar.tsx

@@ -1,8 +1,12 @@
-import { Grid, Hidden, Tooltip } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import AddIcon from '@material-ui/icons/Add';
+import { 
+  Grid,
+  IconButton,
+  Hidden,
+  Toolbar,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
 export interface ArrayLayoutToolbarProps {
@@ -22,7 +26,7 @@ export const ArrayLayoutToolbar = React.memo(
   }: ArrayLayoutToolbarProps) => {
     return (
       <Toolbar disableGutters={true}>
-        <Grid container alignItems='center' justify='space-between'>
+        <Grid container alignItems='center' justifyContent='space-between'>
           <Grid item>
             <Typography variant={'h6'}>{label}</Typography>
           </Grid>
@@ -42,7 +46,7 @@ export const ArrayLayoutToolbar = React.memo(
                   <IconButton
                     aria-label={`Add to ${label}`}
                     onClick={addItem(path, createDefault())}
-                  >
+                    size='large'>
                     <AddIcon />
                   </IconButton>
                 </Tooltip>

package/src/layouts/ExpandPanelRenderer.tsx

@@ -22,16 +22,18 @@ import {
   createId,
   removeId
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import { Grid } from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Avatar from '@material-ui/core/Avatar';
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Avatar,
+  Grid,
+  IconButton
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
 
 const iconStyle: any = { float: 'right' };
 
@@ -137,12 +139,12 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
             </Grid>
           </Grid>
           <Grid item xs={5} md={3}>
-            <Grid container justify={'flex-end'}>
+            <Grid container justifyContent='flex-end'>
               <Grid item>
                 <Grid
                   container
                   direction='row'
-                  justify='center'
+                  justifyContent='center'
                   alignItems='center'
                 >
                   {appliedUiSchemaOptions.showSortButtons ? (
@@ -153,7 +155,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveUp}
                           aria-label={`Move up`}
-                        >
+                          size='large'>
                           <ArrowUpward />
                         </IconButton>
                       </Grid>
@@ -163,7 +165,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveDown}
                           aria-label={`Move down`}
-                        >
+                          size='large'>
                           <ArrowDownward />
                         </IconButton>
                       </Grid>
@@ -176,7 +178,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                       onClick={removeItems(path, [index])}
                       style={iconStyle}
                       aria-label={`Delete`}
-                    >
+                      size='large'>
                       <DeleteIcon />
                     </IconButton>
                   </Grid>

package/src/layouts/MaterialArrayLayoutRenderer.tsx

@@ -30,7 +30,7 @@ import {
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -23,8 +23,7 @@
   THE SOFTWARE.
 */
 import React, {useState} from 'react';
-import { Hidden, Tab, Tabs } from '@material-ui/core';
-import AppBar from '@material-ui/core/AppBar';
+import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
 import {
   and,
   Categorization,
@@ -114,7 +113,7 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   return (
     <Hidden xsUp={!visible}>
       <AppBar position='static'>
-        <Tabs value={activeCategory} onChange={onTabChange} variant='scrollable'>
+        <Tabs value={activeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
           {categories.map((e: Category, idx: number) => (
             <Tab key={idx} label={e.label} />
           ))}

package/src/layouts/MaterialCategorizationStepperLayout.tsx

@@ -24,7 +24,7 @@
 */
 import React, {useState} from 'react';
 import merge from 'lodash/merge';
-import { Button, Hidden, Step, StepButton, Stepper } from '@material-ui/core';
+import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
   and,
   Categorization,

package/src/layouts/MaterialGroupLayout.tsx

@@ -24,7 +24,7 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import { Card, CardContent, CardHeader, Hidden } from '@material-ui/core';
+import { Card, CardContent, CardHeader, Hidden } from '@mui/material';
 import {
   GroupLayout,
   LayoutProps,

package/src/mui-controls/MuiCheckbox.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Checkbox from '@material-ui/core/Checkbox';
+import { Checkbox } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {

package/src/mui-controls/MuiInputInteger.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 

package/src/mui-controls/MuiInputNumber.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import {useDebouncedChange} from '../util';
 

package/src/mui-controls/MuiInputNumberFormat.tsx

@@ -24,7 +24,7 @@
 */
 import React, {useCallback} from 'react';
 import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 

package/src/mui-controls/MuiInputText.tsx

@@ -24,14 +24,17 @@
 */
 import React, { useState } from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input, { InputProps } from '@material-ui/core/Input';
+import {
+  IconButton,
+  Input,
+  InputAdornment,
+  InputBaseComponentProps,
+  InputProps,
+  useTheme
+} from '@mui/material';
 import merge from 'lodash/merge';
-import IconButton from '@material-ui/core/IconButton';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Close from '@material-ui/icons/Close';
-import { useTheme } from '@material-ui/core/styles';
+import Close from '@mui/icons-material/Close';
 import { JsonFormsTheme, useDebouncedChange } from '../util';
-import { InputBaseComponentProps } from '@material-ui/core';
 
 interface MuiTextInputProps {
   muiInputProps?: InputProps['inputProps'];
@@ -74,7 +77,10 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
 
   const theme: JsonFormsTheme = useTheme();
   
-  const closeStyle = {background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default, borderRadius: '50%'};
+  const closeStyle = {
+    background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default,
+    borderRadius: '50%'
+  };
 
   return (
     <Input
@@ -106,6 +112,7 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
           <IconButton
             aria-label='Clear input field'
             onClick={onClear}   
+            size='large'
           >
             <Close style={closeStyle}/>
           </IconButton>

package/src/mui-controls/MuiInputTime.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 

package/src/mui-controls/MuiSelect.tsx

@@ -25,8 +25,7 @@
 import React from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 
-import Select from '@material-ui/core/Select';
-import { MenuItem } from '@material-ui/core';
+import { MenuItem, Select } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
@@ -52,6 +51,7 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
       value={data !== undefined ? data : ''}
       onChange={ev => handleChange(path, ev.target.value)}
       fullWidth={true}
+      variant={'standard'}
     >
       {[<MenuItem value='' key={'empty'} />].concat(
         options.map(optionValue => (

package/src/mui-controls/MuiToggle.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Switch from '@material-ui/core/Switch';
+import { Switch } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiToggle = React.memo((props: CellProps & WithClassname) => {

package/src/util/layout.tsx

@@ -35,7 +35,7 @@ import {
   UISchemaElement
 } from '@jsonforms/core';
 import { JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
-import { Grid, Hidden } from '@material-ui/core';
+import { Grid, Hidden } from '@mui/material';
 
 export const renderLayoutElements = (
   elements: UISchemaElement[],

package/src/util/theme.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 
 export interface JsonFormsTheme extends Theme {
   jsonforms?: {

package/test/renderers/MaterialAllOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement } from '@jsonforms/core';
 import { MaterialAllOfRenderer, materialRenderers } from '../../src';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';