@jsonforms/material-renderers 3.0.0-rc.0 → 3.0.0

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

@@ -23,8 +23,8 @@ var customParsing = require('dayjs/plugin/customParseFormat');
 var debounce = require('lodash/debounce');
 var Close = require('@mui/icons-material/Close');
 var map = require('lodash/map');
-var lab = require('@mui/lab');
-var AdapterDayjs = require('@mui/lab/AdapterDayjs');
+var xDatePickers = require('@mui/x-date-pickers');
+var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 var get = require('lodash/get');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var Input = require('@mui/material/Input');
@@ -48,7 +48,6 @@ var customParsing__default = /*#__PURE__*/_interopDefaultLegacy(customParsing);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
-var AdapterDayjs__default = /*#__PURE__*/_interopDefaultLegacy(AdapterDayjs);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
@@ -721,6 +720,9 @@ var MaterialListWithDetailRenderer = function (_a) {
         return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
     }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+    React__default["default"].useEffect(function () {
+        setSelectedIndex(undefined);
+    }, [schema]);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(ArrayLayoutToolbar, { label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React__default["default"].createElement(material.Grid, { container: true, direction: 'row', spacing: 2 },
@@ -848,8 +850,12 @@ var MaterialDateControl = function (props) {
     var value = getData(data, saveFormat);
     var valueInInputFormat = value ? value.format(format) : '';
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
-            React__default["default"].createElement(lab.DatePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
+        React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
+            React__default["default"].createElement(xDatePickers.DatePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: function (variant) { return (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept']); }
+                    }
+                }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -876,8 +882,12 @@ var MaterialDateTimeControl = function (props) {
     var value = getData(data, saveFormat);
     var valueInInputFormat = value ? value.format(format) : '';
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
-            React__default["default"].createElement(lab.DateTimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
+        React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
+            React__default["default"].createElement(xDatePickers.DateTimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: function (variant) { return (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept']); }
+                    }
+                }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -904,8 +914,12 @@ var MaterialTimeControl = function (props) {
     var value = getData(data, saveFormat);
     var valueInInputFormat = value ? value.format(format) : '';
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
-            React__default["default"].createElement(lab.TimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
+        React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
+            React__default["default"].createElement(xDatePickers.TimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: function (variant) { return (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept']); }
+                    }
+                }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -948,7 +962,8 @@ var materialSliderControlTester = core.rankWith(4, core.isRangeControl);
 var MaterialSliderControl$1 = react.withJsonFormsControlProps(MaterialSliderControl);
 
 var MaterialRadioGroup = function (props) {
-    var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
+    var _a;
+    var _b = useFocus(), focused = _b[0], onFocus = _b[1], onBlur = _b[2];
     var config = props.config, id = props.id, label = props.label, required = props.required, description = props.description, errors = props.errors, data = props.data, visible = props.visible, options = props.options, handleChange = props.handleChange, path = props.path, enabled = props.enabled;
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
@@ -957,7 +972,7 @@ var MaterialRadioGroup = function (props) {
     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, { htmlFor: id, error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React__default["default"].createElement(material.RadioGroup, { value: props.data, onChange: onChange, 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 }), label: option.label, disabled: !enabled })); })),
+            React__default["default"].createElement(material.RadioGroup, { value: (_a = props.data) !== null && _a !== void 0 ? _a : '', onChange: onChange, 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 }), label: option.label, disabled: !enabled })); })),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
 
@@ -1163,7 +1178,7 @@ var ExpandPanelRendererComponent = function (props) {
             core.removeId(labelHtmlId);
         };
     }, [labelHtmlId]);
-    var childLabel = props.childLabel, childPath = props.childPath, index = props.index, expanded = props.expanded, moveDown = props.moveDown, moveUp = props.moveUp, enableMoveDown = props.enableMoveDown, enableMoveUp = props.enableMoveUp, handleExpansion = props.handleExpansion, removeItems = props.removeItems, path = props.path, rootSchema = props.rootSchema, schema = props.schema, uischema = props.uischema, uischemas = props.uischemas, renderers = props.renderers, cells = props.cells, config = props.config;
+    var enabled = props.enabled, childLabel = props.childLabel, childPath = props.childPath, index = props.index, expanded = props.expanded, moveDown = props.moveDown, moveUp = props.moveUp, enableMoveDown = props.enableMoveDown, enableMoveUp = props.enableMoveUp, handleExpansion = props.handleExpansion, removeItems = props.removeItems, path = props.path, rootSchema = props.rootSchema, schema = props.schema, uischema = props.uischema, uischemas = props.uischemas, renderers = props.renderers, cells = props.cells, config = props.config;
     var foundUISchema = React.useMemo(function () {
         return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
     }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
@@ -1193,7 +1208,7 @@ var ExpandPanelRendererComponent = function (props) {
                                     React__default["default"].createElement(material.IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": "Delete", size: 'large' },
                                         React__default["default"].createElement(DeleteIcon__default["default"], null))))))))),
         React__default["default"].createElement(material.AccordionDetails, null,
-            React__default["default"].createElement(react.JsonFormsDispatch, { schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
+            React__default["default"].createElement(react.JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
 var ExpandPanelRenderer = React__default["default"].memo(ExpandPanelRendererComponent);
 var ctxDispatchToExpandPanelProps = function (dispatch) { return ({
@@ -1247,12 +1262,12 @@ var MaterialArrayLayoutComponent = function (props) {
     var isExpanded = function (index) {
         return expanded === core.composePaths(props.path, "" + index);
     };
-    var data = props.data, path = props.path, schema = props.schema, uischema = props.uischema, errors = props.errors, addItem = props.addItem, renderers = props.renderers, cells = props.cells, label = props.label, required = props.required, rootSchema = props.rootSchema, config = props.config, uischemas = props.uischemas;
+    var enabled = props.enabled, data = props.data, path = props.path, schema = props.schema, uischema = props.uischema, errors = props.errors, addItem = props.addItem, renderers = props.renderers, cells = props.cells, label = props.label, required = props.required, rootSchema = props.rootSchema, config = props.config, uischemas = props.uischemas;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
     return (React__default["default"].createElement("div", null,
         React__default["default"].createElement(ArrayLayoutToolbar, { label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: innerCreateDefaultValue }),
         React__default["default"].createElement("div", null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) {
-            return (React__default["default"].createElement(ExpandPanelRenderer$1, { index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas }));
+            return (React__default["default"].createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas }));
         })) : (React__default["default"].createElement("p", null, "No data")))));
 };
 var MaterialArrayLayout$1 = React__default["default"].memo(MaterialArrayLayoutComponent);