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

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

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
-import { Hidden, 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, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
-import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, 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, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, 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, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, 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, ListItem, 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';
@@ -17,16 +17,17 @@ import map from 'lodash/map';
 import AddIcon from '@mui/icons-material/Add';
 import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import get from 'lodash/get';
 
 const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
     const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
+    if (!visible) {
+        return null;
+    }
     if (delegateUISchema) {
-        return (React.createElement(Hidden, { xsUp: !visible },
-            React.createElement(JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells })));
+        return (React.createElement(JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells }));
     }
     const allOfRenderInfos = createCombinatorRenderInfos(schema.allOf, rootSchema, 'allOf', uischema, path, uischemas);
-    return (React.createElement(Hidden, { xsUp: !visible }, allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (React.createElement(JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))));
+    return (React.createElement(React.Fragment, null, allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (React.createElement(JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))));
 };
 const materialAllOfControlTester = rankWith(3, isAllOfControl);
 var MaterialAllOfRenderer$1 = withJsonFormsAllOfProps(MaterialAllOfRenderer);
@@ -83,7 +84,10 @@ const MaterialAnyOfRenderer = ({ handleChange, schema, rootSchema, indexOfFittin
     }, [handleChange, createDefaultValue, newSelectedIndex]);
     const anyOf = 'anyOf';
     const anyOfRenderInfos = createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path, rootSchema: rootSchema }),
         React.createElement(Tabs, { value: selectedAnyOf, onChange: handleTabChange }, anyOfRenderInfos.map((anyOfRenderInfo) => (React.createElement(Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })))),
         anyOfRenderInfos.map((anyOfRenderInfo, anyOfIndex) => selectedAnyOf === anyOfIndex && (React.createElement(JsonFormsDispatch, { key: anyOfIndex, schema: anyOfRenderInfo.schema, uischema: anyOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }))),
@@ -259,15 +263,17 @@ class MaterialTableControl extends React.Component {
         const headerCells = isObjectSchema
             ? generateCells(TableHeaderCell, schema, path, enabled, cells)
             : undefined;
-        return (React.createElement(Hidden, { xsUp: !visible },
-            React.createElement(Table, null,
-                React.createElement(TableHead, null,
-                    React.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.createElement(TableRow, null,
-                        headerCells,
-                        enabled ? React.createElement(TableCell, null) : null))),
-                React.createElement(TableBody, null,
-                    React.createElement(TableRows, { openDeleteDialog: openDeleteDialog, translations: translations, ...this.props })))));
+        if (!visible) {
+            return null;
+        }
+        return (React.createElement(Table, null,
+            React.createElement(TableHead, null,
+                React.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.createElement(TableRow, null,
+                    headerCells,
+                    enabled ? React.createElement(TableCell, null) : null))),
+            React.createElement(TableBody, null,
+                React.createElement(TableRows, { openDeleteDialog: openDeleteDialog, translations: translations, ...this.props }))));
     }
 }
 
@@ -298,7 +304,10 @@ const MaterialArrayControlRenderer = (props) => {
         setOpen(false);
     }, [setOpen, path, rowData]);
     const deleteClose = useCallback(() => setOpen(false), [setOpen]);
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(MaterialTableControl, { ...props, openDeleteDialog: openDeleteDialog }),
         React.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 })));
 };
@@ -325,7 +334,10 @@ const MuiAutocomplete = (props) => {
             ? errors
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: (_event, newValue) => {
                 handleChange(path, newValue?.value);
             }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
@@ -403,12 +415,11 @@ const renderLayoutElements = (elements, schema, path, enabled, renderers, cells)
         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, }) => {
-    if (isEmpty(elements)) {
+    if (isEmpty(elements) || !visible) {
         return null;
     }
     else {
-        return (React.createElement(Hidden, { xsUp: !visible },
-            React.createElement(Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, renderLayoutElements(elements, schema, path, enabled, renderers, cells))));
+        return (React.createElement(Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, renderLayoutElements(elements, schema, path, enabled, renderers, cells)));
     }
 };
 const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
@@ -570,19 +581,21 @@ const MaterialEnumArrayRenderer = ({ config, id, schema, visible, errors, descri
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, otherProps.uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
-            React.createElement(FormLabel, { error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(FormGroup, { row: true }, options.map((option, index) => {
-                const optionPath = Paths.compose(path, `${index}`);
-                const checkboxValue = data?.includes(option.value)
-                    ? option.value
-                    : undefined;
-                return (React.createElement(FormControlLabel, { id: id + '-label-' + option.value, key: option.value, control: React.createElement(MuiCheckbox, { id: id + '-' + option.value, key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
-                            ? addItem(path, option.value)
-                            : removeItem(path, option.value), data: checkboxValue, errors: errors, schema: schema, visible: visible, ...otherProps }), label: option.label }));
-            })),
-            React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
+        React.createElement(FormLabel, { error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+        React.createElement(FormGroup, { row: true }, options.map((option, index) => {
+            const optionPath = Paths.compose(path, `${index}`);
+            const checkboxValue = data?.includes(option.value)
+                ? option.value
+                : undefined;
+            return (React.createElement(FormControlLabel, { id: id + '-label-' + option.value, key: option.value, control: React.createElement(MuiCheckbox, { id: id + '-' + option.value, key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
+                        ? addItem(path, option.value)
+                        : removeItem(path, option.value), data: checkboxValue, errors: errors, schema: schema, visible: visible, ...otherProps }), label: option.label }));
+        })),
+        React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null)));
 };
 const hasOneOfItems = (schema) => schema.oneOf !== undefined &&
     schema.oneOf.length > 0 &&
@@ -607,8 +620,10 @@ const MaterialObjectRenderer = ({ renderers, cells, uischemas, schema, label, pa
             ...Generate.uiSchema(schema, 'Group', undefined, rootSchema),
             label,
         }, uischema, rootSchema), [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells })));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells }));
 };
 const materialObjectControlTester = rankWith(2, isObjectControl);
 var MaterialObjectRenderer$1 = withJsonFormsDetailProps(MaterialObjectRenderer);
@@ -639,7 +654,10 @@ const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, r
             setConfirmDialogOpen(true);
         }
     }, [setConfirmDialogOpen, setSelectedIndex, data]);
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path, rootSchema: rootSchema }),
         React.createElement(Tabs, { value: selectedIndex, onChange: handleTabChange }, oneOfRenderInfos.map((oneOfRenderInfo) => (React.createElement(Tab, { key: oneOfRenderInfo.label, label: oneOfRenderInfo.label })))),
         oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => selectedIndex === oneOfIndex && (React.createElement(JsonFormsDispatch, { key: oneOfIndex, schema: oneOfRenderInfo.schema, uischema: oneOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }))),
@@ -650,8 +668,10 @@ var MaterialOneOfRenderer$1 = withJsonFormsOneOfProps(MaterialOneOfRenderer);
 
 const materialLabelRendererTester = rankWith(1, uiTypeIs('Label'));
 const MaterialLabelRenderer = ({ text, visible }) => {
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(Typography, { variant: 'h6' }, text)));
+    if (!visible) {
+        return null;
+    }
+    return React.createElement(Typography, { variant: 'h6' }, text);
 };
 var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
 
@@ -680,8 +700,9 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handle
             React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
         React.createElement(ListItemText, { primary: childLabel }),
         enabled && (React.createElement(ListItemSecondaryAction, null,
-            React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                React.createElement(Delete, 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(Delete, null)))))));
 };
 var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
@@ -703,11 +724,14 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
     React.useEffect(() => {
         setSelectedIndex(undefined);
     }, [schema]);
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    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 }),
         React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
             React.createElement(Grid, { item: true, xs: 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, translations: translations })))) : (React.createElement("p", null, "No data")))),
+                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 })))) : (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))))));
 };
 const materialListWithDetailTester = rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray));
@@ -727,12 +751,14 @@ const MaterialInputControl = (props) => {
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
     const InnerComponent = input;
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
-            React.createElement(InputLabel, { htmlFor: id + '-input', error: !isValid, required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(InnerComponent, { ...props, id: id + '-input', isValid: isValid, visible: visible }),
-            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
-            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
+        React.createElement(InputLabel, { htmlFor: id + '-input', error: !isValid, required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+        React.createElement(InnerComponent, { ...props, id: id + '-input', isValid: isValid, visible: visible }),
+        React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 
 const findEnumSchema = (schemas) => schemas.find((s) => s.enum !== undefined && (s.type === 'string' || s.type === undefined));
@@ -805,7 +831,10 @@ const MaterialBooleanControl = ({ data, visible, label, id, enabled, uischema, s
         descriptionIds.push(helpId2);
     }
     const ariaDescribedBy = descriptionIds.join(' ');
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
             React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiCheckbox, { id: `${id}-input`, isValid: isEmpty(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,
@@ -845,7 +874,10 @@ const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uisch
         descriptionIds.push(helpId2);
     }
     const ariaDescribedBy = descriptionIds.join(' ');
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
             React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiToggle, { id: `${id}-input`, isValid: isEmpty(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,
@@ -980,8 +1012,10 @@ const MaterialNativeControl = (props) => {
     const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
     const fieldType = appliedUiSchemaOptions.format ?? schema.format;
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(TextField, { required: 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.createElement(TextField, { required: 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 }));
 };
 const materialNativeControlTester = rankWith(2, or(isDateControl, isTimeControl));
 var MaterialNativeControl$1 = withJsonFormsControlProps(MaterialNativeControl);
@@ -1005,11 +1039,13 @@ const MaterialRadioGroup = (props) => {
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
-            React.createElement(FormLabel, { error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(RadioGroup, { value: props.data ?? '', row: true }, options.map((option) => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value, onChange: () => handleChange(path, option.value) }), label: option.label, disabled: !enabled })))),
-            React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
+        React.createElement(FormLabel, { error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+        React.createElement(RadioGroup, { value: props.data ?? '', row: true }, options.map((option) => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value, onChange: () => handleChange(path, option.value) }), label: option.label, disabled: !enabled })))),
+        React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null)));
 };
 
 const MaterialOneOfRadioGroupControl = (props) => {
@@ -1046,15 +1082,17 @@ const MaterialSliderControl = (props) => {
     };
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const onChange = useCallback((_ev, value) => handleChange(path, Number(value)), [path, handleChange]);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id },
-            React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) },
-                React.createElement(Typography, { id: id + '-typo', style: labelStyle, variant: 'caption' }, label)),
-            React.createElement("div", { style: rangeContainerStyle },
-                React.createElement(Typography, { style: rangeItemStyle, variant: 'caption', align: 'left' }, schema.minimum),
-                React.createElement(Typography, { style: rangeItemStyle, variant: 'caption', align: 'right' }, schema.maximum)),
-            React.createElement(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.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id },
+        React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) },
+            React.createElement(Typography, { id: id + '-typo', style: labelStyle, variant: 'caption' }, label)),
+        React.createElement("div", { style: rangeContainerStyle },
+            React.createElement(Typography, { style: rangeItemStyle, variant: 'caption', align: 'left' }, schema.minimum),
+            React.createElement(Typography, { style: rangeItemStyle, variant: 'caption', align: 'right' }, schema.maximum)),
+        React.createElement(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.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null)));
 };
 const materialSliderControlTester = rankWith(4, isRangeControl);
 var MaterialSliderControl$1 = withJsonFormsControlProps(MaterialSliderControl);
@@ -1181,15 +1219,31 @@ const ctxDispatchToExpandPanelProps = (dispatch) => ({
         }));
     }, [dispatch]),
 });
-const withContextToExpandPanelProps = (Component) => function WithContextToExpandPanelProps({ ctx, props, }) {
-    const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-    const { childLabelProp, schema, path, index, uischemas } = props;
-    const childPath = composePaths(path, `${index}`);
-    const childData = Resolve.data(ctx.core.data, childPath);
-    const childLabel = childLabelProp
-        ? get(childData, childLabelProp, '')
-        : get(childData, getFirstPrimitiveProp(schema), '');
-    return (React.createElement(Component, { ...props, ...dispatchProps, childLabel: childLabel, childPath: childPath, uischemas: uischemas }));
+const withContextToExpandPanelProps = (Component) => {
+    return function WithContextToExpandPanelProps({ ctx, props, }) {
+        const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
+        const {
+        childLabelProp,
+        schema,
+        uischema,
+        rootSchema,
+        path,
+        index,
+        uischemas, } = props;
+        const childPath = composePaths(path, `${index}`);
+        const childLabel = useMemo(() => {
+            return 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.createElement(Component, { ...props, ...dispatchProps, childLabel: childLabel, childPath: childPath, uischemas: uischemas }));
+    };
 };
 const withJsonFormsExpandPanelProps = (Component) => withJsonFormsContext(withContextToExpandPanelProps(Component));
 var ExpandPanelRenderer$1 = withJsonFormsExpandPanelProps(ExpandPanelRenderer);
@@ -1198,11 +1252,13 @@ const groupTester = rankWith(1, uiTypeIs('Group'));
 const style = { marginBottom: '10px' };
 const GroupComponent = React.memo(function GroupComponent({ visible, enabled, uischema, label, ...props }) {
     const groupLayout = uischema;
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(Card, { style: style },
-            !isEmpty(label) && React.createElement(CardHeader, { title: label }),
-            React.createElement(CardContent, null,
-                React.createElement(MaterialLayoutRenderer, { ...props, visible: visible, enabled: enabled, elements: groupLayout.elements })))));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(Card, { style: style },
+        !isEmpty(label) && React.createElement(CardHeader, { title: label }),
+        React.createElement(CardContent, null,
+            React.createElement(MaterialLayoutRenderer, { ...props, visible: visible, enabled: enabled, elements: groupLayout.elements }))));
 });
 const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label, }) => {
     const groupLayout = uischema;
@@ -1277,7 +1333,10 @@ const MaterialCategorizationLayoutRenderer = (props) => {
     const tabLabels = useMemo(() => {
         return categories.map((e) => deriveLabelForUISchemaElement(e, t));
     }, [categories, t]);
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(AppBar, { position: 'static' },
             React.createElement(Tabs, { value: safeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map((_, idx) => (React.createElement(Tab, { key: idx, label: tabLabels[idx] }))))),
         React.createElement("div", { style: { marginTop: '0.5em' } },
@@ -1304,8 +1363,10 @@ const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);
 
 const MaterialArrayLayoutRenderer = ({ visible, addItem, ...props }) => {
     const addItemCb = useCallback((p, value) => addItem(p, value), [addItem]);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(MaterialArrayLayout$1, { visible: visible, addItem: addItemCb, ...props })));
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(MaterialArrayLayout$1, { visible: visible, addItem: addItemCb, ...props }));
 };
 const materialArrayLayoutTester = rankWith(4, isObjectArrayWithNesting);
 var MaterialArrayLayout = withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
@@ -1405,7 +1466,10 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
     const tabLabels = useMemo(() => {
         return categories.map((e) => deriveLabelForUISchemaElement(e, t));
     }, [categories, t]);
-    return (React.createElement(Hidden, { xsUp: !visible },
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
         React.createElement(Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map((_, idx) => (React.createElement(Step, { key: tabLabels[idx] },
             React.createElement(StepButton, { onClick: () => handleStep(idx) }, tabLabels[idx]))))),
         React.createElement("div", null,