@jsonforms/material-renderers 3.7.0-alpha.0 → 3.7.0-alpha.2

package/lib/jsonforms-react-material.esm.js

@@ -1,27 +1,20 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
 import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, showAsRequired, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDateControl, defaultDateFormat, isDateTimeControl, defaultDateTimeFormat, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, defaultTimeFormat, createId, removeId, update, moveUp, moveDown, computeChildLabel, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withTranslateProps, withArrayTranslationProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItemButton, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, styled, TableCell, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItemButton, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
 import omit from 'lodash/omit';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
-import { styled } from '@mui/material/styles';
-import AddIcon from '@mui/icons-material/Add';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { ErrorOutline, Add, ArrowUpward, ArrowDownward, Delete, Close, ExpandMore } from '@mui/icons-material';
 import merge from 'lodash/merge';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
 import debounce from 'lodash/debounce';
-import Close from '@mui/icons-material/Close';
 import map from 'lodash/map';
 import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
     const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
@@ -106,13 +99,13 @@ const StyledTableCell = styled(TableCell)({
 });
 const NoBorderTableCell = ({ children, ...otherProps }) => (React.createElement(StyledTableCell, { ...otherProps }, children));
 
-const StyledBadge = styled$1(Badge)(({ theme }) => ({
+const StyledBadge = styled(Badge)(({ theme }) => ({
     color: theme.palette.error.main,
 }));
 const ValidationIcon = ({ errorMessages, id }) => {
     return (React.createElement(Tooltip, { id: id, title: errorMessages },
         React.createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
-            React.createElement(ErrorOutlineIcon, { color: 'inherit' }))));
+            React.createElement(ErrorOutline, { color: 'inherit' }))));
 };
 
 const fixedCellSmall = {
@@ -124,15 +117,15 @@ const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, labe
         React.createElement(NoBorderTableCell, { colSpan: numColumns },
             React.createElement(Stack, null,
                 React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-                    React.createElement(Grid, { item: true },
+                    React.createElement(Grid, null,
                         React.createElement(Typography, { variant: 'h6' }, label)),
-                    React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
+                    React.createElement(Grid, null, errors.length !== 0 && (React.createElement(Grid, null,
                         React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
                 description && React.createElement(FormHelperText, null, description))),
         enabled && !disableAdd ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
                 React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema, rootSchema)), size: 'large' },
-                    React.createElement(AddIcon, null))))) : null));
+                    React.createElement(Add, null))))) : null));
 });
 
 const styles = {
@@ -230,18 +223,18 @@ const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, m
         enabled ? (React.createElement(NoBorderTableCell, { style: showSortButtons ? styles.fixedCell : styles.fixedCellSmall },
             React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
                 showSortButtons ? (React.createElement(Fragment, null,
-                    React.createElement(Grid, { item: true },
+                    React.createElement(Grid, null,
                         React.createElement(Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
                             React.createElement(IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
                                 React.createElement(ArrowUpward, null)))),
-                    React.createElement(Grid, { item: true },
+                    React.createElement(Grid, null,
                         React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
                             React.createElement(IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
                                 React.createElement(ArrowDownward, null)))))) : null,
-                !disableRemove ? (React.createElement(Grid, { item: true },
+                !disableRemove ? (React.createElement(Grid, null,
                     React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                         React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
-                            React.createElement(DeleteIcon, null))))) : null))) : null));
+                            React.createElement(Delete, null))))) : null))) : null));
 };
 const NonEmptyRow = React.memo(NonEmptyRowComponent);
 const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, disableRemove, }) => {
@@ -364,7 +357,7 @@ const MuiCheckbox = React.memo(function MuiCheckbox(props) {
         autoFocus: !!appliedUiSchemaOptions.focus,
     });
     const checked = !!data;
-    return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
+    return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, slotProps: { input: inputPropsMerged } }));
 });
 
 dayjs.extend(customParsing);
@@ -419,7 +412,7 @@ const getData = (data, saveFormat) => {
 };
 
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
-    return elements.map((child, index) => (React.createElement(Grid, { item: true, key: `${path}-${index}`, xs: true },
+    return elements.map((child, index) => (React.createElement(Grid, { key: `${path}-${index}`, size: 'grow' },
         React.createElement(JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))));
 };
 const MaterialLayoutRendererComponent = ({ visible, elements, schema, path, enabled, direction, renderers, cells, }) => {
@@ -590,7 +583,7 @@ const MuiToggle = React.memo(function MuiToggle(props) {
         autoFocus: !!appliedUiSchemaOptions.focus,
     });
     const checked = !!data;
-    return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
+    return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, slotProps: { input: inputPropsMerged } }));
 });
 
 const MaterialEnumArrayRenderer = ({ config, id, schema, visible, errors, description, label, required, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }) => {
@@ -694,20 +687,20 @@ var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
 
 const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, description, errors, addItem, path, enabled, createDefault, translations, disableAdd, }) {
     return (React.createElement(Toolbar, { disableGutters: true },
-        React.createElement(Stack, null,
+        React.createElement(Stack, { width: '100%' },
             React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
-                React.createElement(Grid, { item: true },
+                React.createElement(Grid, null,
                     React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-                        React.createElement(Grid, { item: true },
+                        React.createElement(Grid, null,
                             React.createElement(Typography, { variant: 'h6' }, label)),
-                        React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
+                        React.createElement(Grid, null, errors.length !== 0 && (React.createElement(Grid, null,
                             React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
-                enabled && !disableAdd && (React.createElement(Grid, { item: true },
+                enabled && !disableAdd && (React.createElement(Grid, null,
                     React.createElement(Grid, { container: true },
-                        React.createElement(Grid, { item: true },
+                        React.createElement(Grid, null,
                             React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
                                 React.createElement(IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
-                                    React.createElement(AddIcon, null)))))))),
+                                    React.createElement(Add, null)))))))),
             description && React.createElement(FormHelperText, null, description))));
 });
 
@@ -719,7 +712,7 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handle
         enabled && !disableRemove && (React.createElement(ListItemSecondaryAction, null,
             React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                 React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                    React.createElement(DeleteIcon, null)))))));
+                    React.createElement(Delete, null)))))));
 };
 var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
@@ -749,9 +742,9 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
     return (React.createElement(React.Fragment, null,
         React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue, disableAdd: doDisableAdd }),
         React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
-            React.createElement(Grid, { item: true, xs: 3 },
+            React.createElement(Grid, { size: 3 },
                 React.createElement(List, null, data > 0 ? (map(range(data), (index) => (React.createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, uischema: foundUISchema, childLabelProp: appliedUiSchemaOptions.elementLabelProp, translations: translations, disableRemove: doDisableRemove })))) : (React.createElement("p", null, translations.noDataMessage)))),
-            React.createElement(Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, translations.noSelection))))));
+            React.createElement(Grid, { size: 'grow' }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, translations.noSelection))))));
 };
 const materialListWithDetailTester = rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray));
 var MaterialListWithDetailRenderer$1 = withJsonFormsArrayLayoutProps(withTranslateProps(withArrayTranslationProps(MaterialListWithDetailRenderer)));
@@ -910,6 +903,7 @@ var MaterialBooleanToggleControl$1 = withJsonFormsControlProps(MaterialBooleanTo
 
 const MaterialDateControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
+    const inputVariant = useInputVariant();
     const { description, id, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -919,6 +913,7 @@ const MaterialDateControl = (props) => {
     const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
     const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
     const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+    const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -927,28 +922,29 @@ const MaterialDateControl = (props) => {
     const secondFormHelperText = showDescription && !isValid ? errors : null;
     const updateChild = useCallback(() => setKey((key) => key + 1), []);
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
-    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
+    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild, onBlur]);
     const value = getData(data, saveFormat);
     if (!visible) {
         return null;
     }
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-        React.createElement(DatePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
-                actionBar: ({ wrapperVariant }) => ({
-                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+        React.createElement(DatePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, closeOnSelect: closeOnSelect, slotProps: {
+                actionBar: ({ pickerVariant }) => ({
+                    actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
                 }),
                 textField: {
                     id: id + '-input',
                     required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                    autoFocus: appliedUiSchemaOptions.focus,
                     error: !isValid,
                     fullWidth: !appliedUiSchemaOptions.trim,
+                    variant: inputVariant,
                     inputProps: {
+                        autoFocus: appliedUiSchemaOptions.focus,
                         type: 'text',
+                        onFocus: onFocus,
+                        onBlur: onBlurHandler,
                     },
                     InputLabelProps: data ? { shrink: true } : undefined,
-                    onFocus: onFocus,
-                    onBlur: onBlurHandler,
                 },
             } }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -959,6 +955,7 @@ var MaterialDateControl$1 = withJsonFormsControlProps(MaterialDateControl);
 
 const MaterialDateTimeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
+    const inputVariant = useInputVariant();
     const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
@@ -973,6 +970,7 @@ const MaterialDateTimeControl = (props) => {
         'hours',
         'minutes',
     ];
+    const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -987,22 +985,23 @@ const MaterialDateTimeControl = (props) => {
         return null;
     }
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-        React.createElement(DateTimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
-                actionBar: ({ wrapperVariant }) => ({
-                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+        React.createElement(DateTimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, closeOnSelect: closeOnSelect, disabled: !enabled, slotProps: {
+                actionBar: ({ pickerVariant }) => ({
+                    actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
                 }),
                 textField: {
                     id: id + '-input',
                     required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                    autoFocus: appliedUiSchemaOptions.focus,
                     error: !isValid,
                     fullWidth: !appliedUiSchemaOptions.trim,
+                    variant: inputVariant,
                     inputProps: {
+                        autoFocus: appliedUiSchemaOptions.focus,
                         type: 'text',
+                        onFocus: onFocus,
+                        onBlur: onBlurHandler,
                     },
                     InputLabelProps: data ? { shrink: true } : undefined,
-                    onFocus: onFocus,
-                    onBlur: onBlurHandler,
                 },
             } }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1123,6 +1122,7 @@ var MaterialTextControl$1 = withJsonFormsControlProps(MaterialTextControl);
 
 const MaterialTimeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
+    const inputVariant = useInputVariant();
     const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
@@ -1132,6 +1132,7 @@ const MaterialTimeControl = (props) => {
     const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
     const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
     const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
+    const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -1146,22 +1147,23 @@ const MaterialTimeControl = (props) => {
         return null;
     }
     return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-        React.createElement(TimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
-                actionBar: ({ wrapperVariant }) => ({
-                    actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+        React.createElement(TimePicker, { open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), key: key, label: label, value: value, onAccept: onChange, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, closeOnSelect: closeOnSelect, disabled: !enabled, slotProps: {
+                actionBar: ({ pickerVariant }) => ({
+                    actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
                 }),
                 textField: {
                     id: id + '-input',
                     required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-                    autoFocus: appliedUiSchemaOptions.focus,
                     error: !isValid,
                     fullWidth: !appliedUiSchemaOptions.trim,
+                    variant: inputVariant,
                     inputProps: {
+                        autoFocus: appliedUiSchemaOptions.focus,
                         type: 'text',
+                        onBlur: onBlurHandler,
+                        onFocus: onFocus,
                     },
                     InputLabelProps: data ? { shrink: true } : undefined,
-                    onFocus: onFocus,
-                    onBlur: onBlurHandler,
                 },
             } }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1184,31 +1186,31 @@ const ExpandPanelRendererComponent = (props) => {
     const showSortButtons = appliedUiSchemaOptions.showSortButtons ||
         appliedUiSchemaOptions.showArrayLayoutSortButtons;
     return (React.createElement(Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
-        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null) },
-            React.createElement(Grid, { container: true, alignItems: 'center' },
-                React.createElement(Grid, { item: true, xs: 7, md: 9 },
+        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMore, null) },
+            React.createElement(Grid, { container: true, sx: { width: '100%' }, alignItems: 'center' },
+                React.createElement(Grid, { size: { xs: 7, md: 9 } },
                     React.createElement(Grid, { container: true, alignItems: 'center' },
-                        React.createElement(Grid, { item: true, xs: 2, md: 1 },
+                        React.createElement(Grid, { size: { xs: 2, md: 1 } },
                             React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
-                        React.createElement(Grid, { item: true, xs: 10, md: 11 },
+                        React.createElement(Grid, { size: { xs: 10, md: 11 } },
                             React.createElement("span", { id: labelHtmlId }, childLabel)))),
-                React.createElement(Grid, { item: true, xs: 5, md: 3 },
+                React.createElement(Grid, { size: { xs: 5, md: 3 } },
                     React.createElement(Grid, { container: true, justifyContent: 'flex-end' },
-                        React.createElement(Grid, { item: true },
+                        React.createElement(Grid, null,
                             React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
                                 showSortButtons && enabled ? (React.createElement(Fragment, null,
-                                    React.createElement(Grid, { item: true },
+                                    React.createElement(Grid, null,
                                         React.createElement(Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
                                             React.createElement(IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
                                                 React.createElement(ArrowUpward, null)))),
-                                    React.createElement(Grid, { item: true },
+                                    React.createElement(Grid, null,
                                         React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
                                             React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
                                                 React.createElement(ArrowDownward, null)))))) : (''),
-                                enabled && !disableRemove && (React.createElement(Grid, { item: true },
+                                enabled && !disableRemove && (React.createElement(Grid, null,
                                     React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
                                         React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
-                                            React.createElement(DeleteIcon, null))))))))))),
+                                            React.createElement(Delete, null))))))))))),
         React.createElement(AccordionDetails, null,
             React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
@@ -1330,11 +1332,11 @@ const isSingleLevelCategorization = and(uiTypeIs('Categorization'), (uischema) =
 });
 const materialCategorizationTester = rankWith(1, isSingleLevelCategorization);
 const MaterialCategorizationLayoutRenderer = (props) => {
-    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, ajv, t, } = props;
+    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, config, ajv, t, } = props;
     const categorization = uischema;
     const [previousCategorization, setPreviousCategorization] = useState(uischema);
     const [activeCategory, setActiveCategory] = useState(selected ?? 0);
-    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
+    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv, config)), [categorization, data, ajv, config]);
     if (categorization !== previousCategorization) {
         setActiveCategory(0);
         setPreviousCategorization(categorization);
@@ -1481,7 +1483,7 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
     const buttonStyle = {
         marginRight: '1em',
     };
-    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
+    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv, config)), [categorization, data, ajv, config]);
     const childProps = {
         elements: categories[activeCategory].elements,
         schema,