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

package/docs/globals.html

@@ -647,7 +647,7 @@
 					<div class="tsd-signature tsd-kind-icon">material<wbr>Date<wbr>Control<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(4,isDateControl)</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in packages/material/src/controls/MaterialDateControl.tsx:142</li>
+							<li>Defined in packages/material/src/controls/MaterialDateControl.tsx:143</li>
 						</ul>
 					</aside>
 				</section>
@@ -657,7 +657,7 @@
 					<div class="tsd-signature tsd-kind-icon">material<wbr>Date<wbr>Time<wbr>Control<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(2,isDateTimeControl)</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in packages/material/src/controls/MaterialDateTimeControl.tsx:145</li>
+							<li>Defined in packages/material/src/controls/MaterialDateTimeControl.tsx:147</li>
 						</ul>
 					</aside>
 				</section>
@@ -762,7 +762,7 @@
 					<div class="tsd-signature tsd-kind-icon">material<wbr>List<wbr>With<wbr>Detail<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(4,and(uiTypeIs(&#x27;ListWithDetail&#x27;), isObjectArray))</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in packages/material/src/additional/MaterialListWithDetailRenderer.tsx:153</li>
+							<li>Defined in packages/material/src/additional/MaterialListWithDetailRenderer.tsx:157</li>
 						</ul>
 					</aside>
 				</section>
@@ -942,7 +942,7 @@
 					<div class="tsd-signature tsd-kind-icon">material<wbr>Time<wbr>Control<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(4,isTimeControl)</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in packages/material/src/controls/MaterialTimeControl.tsx:145</li>
+							<li>Defined in packages/material/src/controls/MaterialTimeControl.tsx:146</li>
 						</ul>
 					</aside>
 				</section>

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))));
 };