@jsonforms/material-renderers 3.3.0-alpha.1 → 3.3.0-beta.0

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var material = require('@mui/material');
 var core = require('@jsonforms/core');
 var react = require('@jsonforms/react');
+var material = require('@mui/material');
 var omit = require('lodash/omit');
 var isEmpty = require('lodash/isEmpty');
 var union = require('lodash/union');
@@ -21,7 +21,6 @@ var map = require('lodash/map');
 var AddIcon = require('@mui/icons-material/Add');
 var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
-var get = require('lodash/get');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,7 +36,6 @@ var customParsing__default = /*#__PURE__*/_interopDefaultLegacy(customParsing);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
 var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
-var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -101,12 +99,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 var MaterialAllOfRenderer = function (_a) {
     var schema = _a.schema, rootSchema = _a.rootSchema, visible = _a.visible, renderers = _a.renderers, cells = _a.cells, path = _a.path, uischemas = _a.uischemas, uischema = _a.uischema;
     var delegateUISchema = core.findMatchingUISchema(uischemas)(schema, uischema.scope, path);
+    if (!visible) {
+        return null;
+    }
     if (delegateUISchema) {
-        return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-            React__default["default"].createElement(react.JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells })));
+        return (React__default["default"].createElement(react.JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells }));
     }
     var allOfRenderInfos = core.createCombinatorRenderInfos(schema.allOf, rootSchema, 'allOf', uischema, path, uischemas);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible }, allOfRenderInfos.map(function (allOfRenderInfo, allOfIndex) { return (React__default["default"].createElement(react.JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })); })));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, allOfRenderInfos.map(function (allOfRenderInfo, allOfIndex) { return (React__default["default"].createElement(react.JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })); })));
 };
 var materialAllOfControlTester = core.rankWith(3, core.isAllOfControl);
 var MaterialAllOfRenderer$1 = react.withJsonFormsAllOfProps(MaterialAllOfRenderer);
@@ -170,7 +170,10 @@ var MaterialAnyOfRenderer = function (_a) {
     }, [handleChange, core.createDefaultValue, newSelectedIndex]);
     var anyOf = 'anyOf';
     var anyOfRenderInfos = core.createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path, rootSchema: rootSchema }),
         React__default["default"].createElement(material.Tabs, { value: selectedAnyOf, onChange: handleTabChange }, anyOfRenderInfos.map(function (anyOfRenderInfo) { return (React__default["default"].createElement(material.Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })); })),
         anyOfRenderInfos.map(function (anyOfRenderInfo, anyOfIndex) {
@@ -366,15 +369,17 @@ var MaterialTableControl =  (function (_super) {
         var headerCells = isObjectSchema
             ? generateCells(TableHeaderCell, schema, path, enabled, cells)
             : undefined;
-        return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-            React__default["default"].createElement(material.Table, null,
-                React__default["default"].createElement(material.TableHead, null,
-                    React__default["default"].createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
-                    isObjectSchema && (React__default["default"].createElement(material.TableRow, null,
-                        headerCells,
-                        enabled ? React__default["default"].createElement(material.TableCell, null) : null))),
-                React__default["default"].createElement(material.TableBody, null,
-                    React__default["default"].createElement(TableRows, __assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props))))));
+        if (!visible) {
+            return null;
+        }
+        return (React__default["default"].createElement(material.Table, null,
+            React__default["default"].createElement(material.TableHead, null,
+                React__default["default"].createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
+                isObjectSchema && (React__default["default"].createElement(material.TableRow, null,
+                    headerCells,
+                    enabled ? React__default["default"].createElement(material.TableCell, null) : null))),
+            React__default["default"].createElement(material.TableBody, null,
+                React__default["default"].createElement(TableRows, __assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props)))));
     };
     return MaterialTableControl;
 }(React__default["default"].Component));
@@ -407,7 +412,10 @@ var MaterialArrayControlRenderer = function (props) {
         setOpen(false);
     }, [setOpen, path, rowData]);
     var deleteClose = React.useCallback(function () { return setOpen(false); }, [setOpen]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(MaterialTableControl, __assign({}, props, { openDeleteDialog: openDeleteDialog })),
         React__default["default"].createElement(DeleteDialog, { open: open, onCancel: deleteCancel, onConfirm: deleteConfirm, onClose: deleteClose, acceptText: props.translations.deleteDialogAccept, declineText: props.translations.deleteDialogDecline, title: props.translations.deleteDialogTitle, message: props.translations.deleteDialogMessage })));
 };
@@ -435,7 +443,10 @@ var MuiAutocomplete = function (props) {
             ? errors
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: function (_event, newValue) {
                 handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
             }, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
@@ -518,12 +529,11 @@ var renderLayoutElements = function (elements, schema, path, enabled, renderers,
 };
 var MaterialLayoutRendererComponent = function (_a) {
     var visible = _a.visible, elements = _a.elements, schema = _a.schema, path = _a.path, enabled = _a.enabled, direction = _a.direction, renderers = _a.renderers, cells = _a.cells;
-    if (isEmpty__default["default"](elements)) {
+    if (isEmpty__default["default"](elements) || !visible) {
         return null;
     }
     else {
-        return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-            React__default["default"].createElement(material.Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, renderLayoutElements(elements, schema, path, enabled, renderers, cells))));
+        return (React__default["default"].createElement(material.Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, renderLayoutElements(elements, schema, path, enabled, renderers, cells)));
     }
 };
 var MaterialLayoutRenderer = React__default["default"].memo(MaterialLayoutRendererComponent);
@@ -698,21 +708,23 @@ var MaterialEnumArrayRenderer = function (_a) {
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, otherProps.uischema.options);
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
-            React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React__default["default"].createElement(material.FormGroup, { row: true }, options.map(function (option, index) {
-                var optionPath = core.Paths.compose(path, "".concat(index));
-                var checkboxValue = (data === null || data === void 0 ? void 0 : data.includes(option.value))
-                    ? option.value
-                    : undefined;
-                return (React__default["default"].createElement(material.FormControlLabel, { id: id + '-label-' + option.value, key: option.value, control: React__default["default"].createElement(MuiCheckbox, __assign({ id: id + '-' + option.value, key: 'checkbox-' + option.value, isValid: isEmpty__default["default"](errors), path: optionPath, handleChange: function (_childPath, newValue) {
-                            return newValue
-                                ? addItem(path, option.value)
-                                : removeItem(path, option.value);
-                        }, data: checkboxValue, errors: errors, schema: schema, visible: visible }, otherProps)), label: option.label }));
-            })),
-            React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
+        React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+        React__default["default"].createElement(material.FormGroup, { row: true }, options.map(function (option, index) {
+            var optionPath = core.Paths.compose(path, "".concat(index));
+            var checkboxValue = (data === null || data === void 0 ? void 0 : data.includes(option.value))
+                ? option.value
+                : undefined;
+            return (React__default["default"].createElement(material.FormControlLabel, { id: id + '-label-' + option.value, key: option.value, control: React__default["default"].createElement(MuiCheckbox, __assign({ id: id + '-' + option.value, key: 'checkbox-' + option.value, isValid: isEmpty__default["default"](errors), path: optionPath, handleChange: function (_childPath, newValue) {
+                        return newValue
+                            ? addItem(path, option.value)
+                            : removeItem(path, option.value);
+                    }, data: checkboxValue, errors: errors, schema: schema, visible: visible }, otherProps)), label: option.label }));
+        })),
+        React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null)));
 };
 var hasOneOfItems = function (schema) {
     return schema.oneOf !== undefined &&
@@ -745,8 +757,10 @@ var MaterialObjectRenderer = function (_a) {
                 : __assign(__assign({}, core.Generate.uiSchema(schema, 'Group', undefined, rootSchema)), { label: label });
         }, uischema, rootSchema);
     }, [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(react.JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells })));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(react.JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells }));
 };
 var materialObjectControlTester = core.rankWith(2, core.isObjectControl);
 var MaterialObjectRenderer$1 = react.withJsonFormsDetailProps(MaterialObjectRenderer);
@@ -778,7 +792,10 @@ var MaterialOneOfRenderer = function (_a) {
             setConfirmDialogOpen(true);
         }
     }, [setConfirmDialogOpen, setSelectedIndex, data]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path, rootSchema: rootSchema }),
         React__default["default"].createElement(material.Tabs, { value: selectedIndex, onChange: handleTabChange }, oneOfRenderInfos.map(function (oneOfRenderInfo) { return (React__default["default"].createElement(material.Tab, { key: oneOfRenderInfo.label, label: oneOfRenderInfo.label })); })),
         oneOfRenderInfos.map(function (oneOfRenderInfo, oneOfIndex) {
@@ -792,8 +809,10 @@ var MaterialOneOfRenderer$1 = react.withJsonFormsOneOfProps(MaterialOneOfRendere
 var materialLabelRendererTester = core.rankWith(1, core.uiTypeIs('Label'));
 var MaterialLabelRenderer = function (_a) {
     var text = _a.text, visible = _a.visible;
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.Typography, { variant: 'h6' }, text)));
+    if (!visible) {
+        return null;
+    }
+    return React__default["default"].createElement(material.Typography, { variant: 'h6' }, text);
 };
 var MaterialLabelRenderer$1 = react.withJsonFormsLabelProps(MaterialLabelRenderer);
 
@@ -824,8 +843,9 @@ var ListWithDetailMasterItem = function (_a) {
             React__default["default"].createElement(material.Avatar, { "aria-label": 'Index' }, index + 1)),
         React__default["default"].createElement(material.ListItemText, { primary: childLabel }),
         enabled && (React__default["default"].createElement(material.ListItemSecondaryAction, null,
-            React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                React__default["default"].createElement(iconsMaterial.Delete, null))))));
+            React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
+                React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
+                    React__default["default"].createElement(iconsMaterial.Delete, null)))))));
 };
 var ListWithDetailMasterItem$1 = react.withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
@@ -850,11 +870,14 @@ var MaterialListWithDetailRenderer = function (_a) {
     React__default["default"].useEffect(function () {
         setSelectedIndex(undefined);
     }, [schema]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React__default["default"].createElement(material.Grid, { container: true, direction: 'row', spacing: 2 },
             React__default["default"].createElement(material.Grid, { item: true, xs: 3 },
-                React__default["default"].createElement(material.List, null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) { return (React__default["default"].createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, translations: translations })); })) : (React__default["default"].createElement("p", null, "No data")))),
+                React__default["default"].createElement(material.List, null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) { return (React__default["default"].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 })); })) : (React__default["default"].createElement("p", null, translations.noDataMessage)))),
             React__default["default"].createElement(material.Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React__default["default"].createElement(react.JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: core.composePaths(path, "".concat(selectedIndex)) })) : (React__default["default"].createElement(material.Typography, { variant: 'h6' }, translations.noSelection))))));
 };
 var materialListWithDetailTester = core.rankWith(4, core.and(core.uiTypeIs('ListWithDetail'), core.isObjectArray));
@@ -874,12 +897,14 @@ var MaterialInputControl = function (props) {
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var InnerComponent = input;
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
-            React__default["default"].createElement(material.InputLabel, { htmlFor: id + '-input', error: !isValid, required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React__default["default"].createElement(InnerComponent, __assign({}, props, { id: id + '-input', isValid: isValid, visible: visible })),
-            React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
-            React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(material.FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
+        React__default["default"].createElement(material.InputLabel, { htmlFor: id + '-input', error: !isValid, required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+        React__default["default"].createElement(InnerComponent, __assign({}, props, { id: id + '-input', isValid: isValid, visible: visible })),
+        React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 
 var findEnumSchema = function (schemas) {
@@ -964,7 +989,10 @@ var MaterialBooleanControl = function (_a) {
         descriptionIds.push(helpId2);
     }
     var ariaDescribedBy = descriptionIds.join(' ');
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
             React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiCheckbox, { id: "".concat(id, "-input"), isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
                         'aria-describedby': ariaDescribedBy,
@@ -1005,7 +1033,10 @@ var MaterialBooleanToggleControl = function (_a) {
         descriptionIds.push(helpId2);
     }
     var ariaDescribedBy = descriptionIds.join(' ');
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
             React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiToggle, { id: "".concat(id, "-input"), isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
                         'aria-describedby': ariaDescribedBy,
@@ -1153,8 +1184,10 @@ var MaterialNativeControl = function (props) {
     var _c = useDebouncedChange(handleChange, '', data, path), inputValue = _c[0], onChange = _c[1];
     var fieldType = (_a = appliedUiSchemaOptions.format) !== null && _a !== void 0 ? _a : schema.format;
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.TextField, { required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk), id: id + '-input', label: label, type: fieldType, error: !isValid, disabled: !enabled, fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, helperText: !isValid ? errors : showDescription ? description : null, InputLabelProps: { shrink: true }, value: inputValue, onChange: onChange })));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(material.TextField, { required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk), id: id + '-input', label: label, type: fieldType, error: !isValid, disabled: !enabled, fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, helperText: !isValid ? errors : showDescription ? description : null, InputLabelProps: { shrink: true }, value: inputValue, onChange: onChange }));
 };
 var materialNativeControlTester = core.rankWith(2, core.or(core.isDateControl, core.isTimeControl));
 var MaterialNativeControl$1 = react.withJsonFormsControlProps(MaterialNativeControl);
@@ -1179,11 +1212,13 @@ var MaterialRadioGroup = function (props) {
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
-            React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React__default["default"].createElement(material.RadioGroup, { value: (_a = props.data) !== null && _a !== void 0 ? _a : '', row: true }, options.map(function (option) { return (React__default["default"].createElement(material.FormControlLabel, { value: option.value, key: option.label, control: React__default["default"].createElement(material.Radio, { checked: data === option.value, onChange: function () { return handleChange(path, option.value); } }), label: option.label, disabled: !enabled })); })),
-            React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
+        React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+        React__default["default"].createElement(material.RadioGroup, { value: (_a = props.data) !== null && _a !== void 0 ? _a : '', row: true }, options.map(function (option) { return (React__default["default"].createElement(material.FormControlLabel, { value: option.value, key: option.label, control: React__default["default"].createElement(material.Radio, { checked: data === option.value, onChange: function () { return handleChange(path, option.value); } }), label: option.label, disabled: !enabled })); })),
+        React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null)));
 };
 
 var MaterialOneOfRadioGroupControl = function (props) {
@@ -1220,15 +1255,17 @@ var MaterialSliderControl = function (props) {
     };
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     var onChange = React.useCallback(function (_ev, value) { return handleChange(path, Number(value)); }, [path, handleChange]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id },
-            React__default["default"].createElement(material.FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) },
-                React__default["default"].createElement(material.Typography, { id: id + '-typo', style: labelStyle, variant: 'caption' }, label)),
-            React__default["default"].createElement("div", { style: rangeContainerStyle },
-                React__default["default"].createElement(material.Typography, { style: rangeItemStyle, variant: 'caption', align: 'left' }, schema.minimum),
-                React__default["default"].createElement(material.Typography, { style: rangeItemStyle, variant: 'caption', align: 'right' }, schema.maximum)),
-            React__default["default"].createElement(material.Slider, { style: sliderStyle, min: schema.minimum, max: schema.maximum, value: Number(data || schema.default), onChange: onChange, id: id + '-input', disabled: !enabled, step: schema.multipleOf || 1 }),
-            React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(material.FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id },
+        React__default["default"].createElement(material.FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) },
+            React__default["default"].createElement(material.Typography, { id: id + '-typo', style: labelStyle, variant: 'caption' }, label)),
+        React__default["default"].createElement("div", { style: rangeContainerStyle },
+            React__default["default"].createElement(material.Typography, { style: rangeItemStyle, variant: 'caption', align: 'left' }, schema.minimum),
+            React__default["default"].createElement(material.Typography, { style: rangeItemStyle, variant: 'caption', align: 'right' }, schema.maximum)),
+        React__default["default"].createElement(material.Slider, { style: sliderStyle, min: schema.minimum, max: schema.maximum, value: Number(data || schema.default), onChange: onChange, id: id + '-input', disabled: !enabled, step: schema.multipleOf || 1 }),
+        React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null)));
 };
 var materialSliderControlTester = core.rankWith(4, core.isRangeControl);
 var MaterialSliderControl$1 = react.withJsonFormsControlProps(MaterialSliderControl);
@@ -1373,12 +1410,26 @@ var withContextToExpandPanelProps = function (Component) {
     return function WithContextToExpandPanelProps(_a) {
         var ctx = _a.ctx, props = _a.props;
         var dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-        var childLabelProp = props.childLabelProp, schema = props.schema, path = props.path, index = props.index, uischemas = props.uischemas;
+        var
+        childLabelProp = props.childLabelProp,
+        schema = props.schema,
+        uischema = props.uischema,
+        rootSchema = props.rootSchema,
+        path = props.path,
+        index = props.index,
+        uischemas = props.uischemas;
         var childPath = core.composePaths(path, "".concat(index));
-        var childData = core.Resolve.data(ctx.core.data, childPath);
-        var childLabel = childLabelProp
-            ? get__default["default"](childData, childLabelProp, '')
-            : get__default["default"](childData, core.getFirstPrimitiveProp(schema), '');
+        var childLabel = React.useMemo(function () {
+            return core.computeChildLabel(ctx.core.data, childPath, childLabelProp, schema, rootSchema, ctx.i18n.translate, uischema);
+        }, [
+            ctx.core.data,
+            childPath,
+            childLabelProp,
+            schema,
+            rootSchema,
+            ctx.i18n.translate,
+            uischema,
+        ]);
         return (React__default["default"].createElement(Component, __assign({}, props, dispatchProps, { childLabel: childLabel, childPath: childPath, uischemas: uischemas })));
     };
 };
@@ -1392,11 +1443,13 @@ var style = { marginBottom: '10px' };
 var GroupComponent = React__default["default"].memo(function GroupComponent(_a) {
     var visible = _a.visible, enabled = _a.enabled, uischema = _a.uischema, label = _a.label, props = __rest(_a, ["visible", "enabled", "uischema", "label"]);
     var groupLayout = uischema;
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.Card, { style: style },
-            !isEmpty__default["default"](label) && React__default["default"].createElement(material.CardHeader, { title: label }),
-            React__default["default"].createElement(material.CardContent, null,
-                React__default["default"].createElement(MaterialLayoutRenderer, __assign({}, props, { visible: visible, enabled: enabled, elements: groupLayout.elements }))))));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(material.Card, { style: style },
+        !isEmpty__default["default"](label) && React__default["default"].createElement(material.CardHeader, { title: label }),
+        React__default["default"].createElement(material.CardContent, null,
+            React__default["default"].createElement(MaterialLayoutRenderer, __assign({}, props, { visible: visible, enabled: enabled, elements: groupLayout.elements })))));
 });
 var MaterializedGroupLayoutRenderer = function (_a) {
     var uischema = _a.uischema, schema = _a.schema, path = _a.path, visible = _a.visible, enabled = _a.enabled, renderers = _a.renderers, cells = _a.cells, direction = _a.direction, label = _a.label;
@@ -1478,7 +1531,10 @@ var MaterialCategorizationLayoutRenderer = function (props) {
     var tabLabels = React.useMemo(function () {
         return categories.map(function (e) { return core.deriveLabelForUISchemaElement(e, t); });
     }, [categories, t]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.AppBar, { position: 'static' },
             React__default["default"].createElement(material.Tabs, { value: safeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map(function (_, idx) { return (React__default["default"].createElement(material.Tab, { key: idx, label: tabLabels[idx] })); }))),
         React__default["default"].createElement("div", { style: { marginTop: '0.5em' } },
@@ -1508,8 +1564,10 @@ var MaterialArrayLayout$1 = React__default["default"].memo(MaterialArrayLayoutCo
 var MaterialArrayLayoutRenderer = function (_a) {
     var visible = _a.visible, addItem = _a.addItem, props = __rest(_a, ["visible", "addItem"]);
     var addItemCb = React.useCallback(function (p, value) { return addItem(p, value); }, [addItem]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(MaterialArrayLayout$1, __assign({ visible: visible, addItem: addItemCb }, props))));
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(MaterialArrayLayout$1, __assign({ visible: visible, addItem: addItemCb }, props)));
 };
 var materialArrayLayoutTester = core.rankWith(4, core.isObjectArrayWithNesting);
 var MaterialArrayLayout = react.withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
@@ -1615,7 +1673,10 @@ var MaterialCategorizationStepperLayoutRenderer = function (props) {
     var tabLabels = React.useMemo(function () {
         return categories.map(function (e) { return core.deriveLabelForUISchemaElement(e, t); });
     }, [categories, t]);
-    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map(function (_, idx) { return (React__default["default"].createElement(material.Step, { key: tabLabels[idx] },
             React__default["default"].createElement(material.StepButton, { onClick: function () { return handleStep(idx); } }, tabLabels[idx]))); })),
         React__default["default"].createElement("div", null,