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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/lib/complex/MaterialEnumArrayRenderer.d.ts +1 -1
  2. package/lib/complex/unwrapped.d.ts +1 -1
  3. package/lib/index.d.ts +1 -1
  4. package/lib/jsonforms-react-material.cjs.js +112 -98
  5. package/lib/jsonforms-react-material.cjs.js.map +1 -1
  6. package/lib/jsonforms-react-material.esm.js +105 -91
  7. package/lib/jsonforms-react-material.esm.js.map +1 -1
  8. package/package.json +6 -6
  9. package/src/complex/MaterialEnumArrayRenderer.tsx +41 -3
  10. package/src/complex/MaterialTableControl.tsx +41 -20
  11. package/src/controls/MaterialDateControl.tsx +42 -39
  12. package/src/controls/MaterialDateTimeControl.tsx +42 -40
  13. package/src/controls/MaterialRadioGroup.tsx +2 -4
  14. package/src/controls/MaterialSliderControl.tsx +1 -1
  15. package/src/controls/MaterialTimeControl.tsx +42 -40
  16. package/src/layouts/ExpandPanelRenderer.tsx +44 -23
  17. package/src/layouts/MaterialArrayLayout.tsx +1 -1
  18. package/src/mui-controls/MuiAutocomplete.tsx +0 -1
package/lib/complex/MaterialEnumArrayRenderer.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ControlProps, DispatchPropsOfMultiEnumControl, OwnPropsOfEnum, RankedTester } from '@jsonforms/core';
2
2
  import React from 'react';
3
- export declare const MaterialEnumArrayRenderer: ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => React.JSX.Element;
3
+ export declare const MaterialEnumArrayRenderer: ({ config, id, schema, visible, errors, description, label, required, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => React.JSX.Element;
4
4
  export declare const materialEnumArrayRendererTester: RankedTester;
5
5
  declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl>;
6
6
  export default _default;
package/lib/complex/unwrapped.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const UnwrappedComplex: {
3
3
  MaterialAllOfRenderer: ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }: import("@jsonforms/core").StatePropsOfCombinator) => import("react").JSX.Element;
4
4
  MaterialAnyOfRenderer: ({ handleChange, schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, id, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
5
5
  MaterialArrayControlRenderer: (props: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
6
- MaterialEnumArrayRenderer: ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("@jsonforms/core").DispatchPropsOfMultiEnumControl) => import("react").JSX.Element;
6
+ MaterialEnumArrayRenderer: ({ config, id, schema, visible, errors, description, label, required, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("@jsonforms/core").DispatchPropsOfMultiEnumControl) => import("react").JSX.Element;
7
7
  MaterialObjectRenderer: ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }: import("@jsonforms/core").StatePropsOfControlWithDetail) => import("react").JSX.Element;
8
8
  MaterialOneOfRenderer: ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
9
9
  };
package/lib/index.d.ts CHANGED
@@ -34,7 +34,7 @@ export declare const Unwrapped: {
34
34
  MaterialAllOfRenderer: ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }: import("@jsonforms/core").StatePropsOfCombinator) => import("react").JSX.Element;
35
35
  MaterialAnyOfRenderer: ({ handleChange, schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, id, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
36
36
  MaterialArrayControlRenderer: (props: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
37
- MaterialEnumArrayRenderer: ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("@jsonforms/core").DispatchPropsOfMultiEnumControl) => import("react").JSX.Element;
37
+ MaterialEnumArrayRenderer: ({ config, id, schema, visible, errors, description, label, required, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("@jsonforms/core").DispatchPropsOfMultiEnumControl) => import("react").JSX.Element;
38
38
  MaterialObjectRenderer: ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }: import("@jsonforms/core").StatePropsOfControlWithDetail) => import("react").JSX.Element;
39
39
  MaterialOneOfRenderer: ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
40
40
  MaterialLabelRenderer: ({ text, visible }: import("@jsonforms/core").LabelProps) => import("react").JSX.Element;
package/lib/jsonforms-react-material.cjs.js CHANGED
@@ -326,14 +326,17 @@ var NonEmptyRowComponent = function (_a) {
326
326
  React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
327
327
  showSortButtons ? (React__default["default"].createElement(React.Fragment, null,
328
328
  React__default["default"].createElement(material.Grid, { item: true },
329
- React__default["default"].createElement(material.IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
330
- React__default["default"].createElement(iconsMaterial.ArrowUpward, null))),
329
+ React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
330
+ React__default["default"].createElement(material.IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
331
+ React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
331
332
  React__default["default"].createElement(material.Grid, { item: true },
332
- React__default["default"].createElement(material.IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
333
- React__default["default"].createElement(iconsMaterial.ArrowDownward, null))))) : null,
333
+ React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
334
+ React__default["default"].createElement(material.IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
335
+ React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : null,
334
336
  React__default["default"].createElement(material.Grid, { item: true },
335
- React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: function () { return openDeleteDialog(childPath, rowIndex); }, size: 'large' },
336
- React__default["default"].createElement(iconsMaterial.Delete, null)))))) : null));
337
+ React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
338
+ React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: function () { return openDeleteDialog(childPath, rowIndex); }, size: 'large' },
339
+ React__default["default"].createElement(iconsMaterial.Delete, null))))))) : null));
337
340
  };
338
341
  var NonEmptyRow = React__default["default"].memo(NonEmptyRowComponent);
339
342
  var TableRows = function (_a) {
@@ -437,7 +440,7 @@ var MuiAutocomplete = function (props) {
437
440
  handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
438
441
  }, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
439
442
  setInputValue(newInputValue);
440
- }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, renderInput: function (params) {
443
+ }, autoHighlight: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, renderInput: function (params) {
441
444
  return (React__default["default"].createElement(material.TextField, __assign({ label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id, required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
442
445
  }, renderOption: renderOption, filterOptions: filterOptions }),
443
446
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -690,21 +693,26 @@ var MuiToggle = React__default["default"].memo(function MuiToggle(props) {
690
693
  });
691
694
 
692
695
  var MaterialEnumArrayRenderer = function (_a) {
693
- var schema = _a.schema, visible = _a.visible, errors = _a.errors, path = _a.path, options = _a.options, data = _a.data, addItem = _a.addItem, removeItem = _a.removeItem; _a.handleChange; var otherProps = __rest(_a, ["schema", "visible", "errors", "path", "options", "data", "addItem", "removeItem", "handleChange"]);
696
+ var config = _a.config, id = _a.id, schema = _a.schema, visible = _a.visible, errors = _a.errors, description = _a.description, label = _a.label, required = _a.required, path = _a.path, options = _a.options, data = _a.data, addItem = _a.addItem, removeItem = _a.removeItem; _a.handleChange; var otherProps = __rest(_a, ["config", "id", "schema", "visible", "errors", "description", "label", "required", "path", "options", "data", "addItem", "removeItem", "handleChange"]);
697
+ var _b = useFocus(), focused = _b[0], onFocus = _b[1], onBlur = _b[2];
698
+ var isValid = errors.length === 0;
699
+ var appliedUiSchemaOptions = merge__default["default"]({}, config, otherProps.uischema.options);
700
+ var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
694
701
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
695
- React__default["default"].createElement(material.FormControl, { component: 'fieldset' },
702
+ React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
703
+ React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
696
704
  React__default["default"].createElement(material.FormGroup, { row: true }, options.map(function (option, index) {
697
705
  var optionPath = core.Paths.compose(path, "".concat(index));
698
706
  var checkboxValue = (data === null || data === void 0 ? void 0 : data.includes(option.value))
699
707
  ? option.value
700
708
  : undefined;
701
- return (React__default["default"].createElement(material.FormControlLabel, { id: option.value, key: option.value, control: React__default["default"].createElement(MuiCheckbox, __assign({ key: 'checkbox-' + option.value, isValid: isEmpty__default["default"](errors), path: optionPath, handleChange: function (_childPath, newValue) {
709
+ 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) {
702
710
  return newValue
703
711
  ? addItem(path, option.value)
704
712
  : removeItem(path, option.value);
705
713
  }, data: checkboxValue, errors: errors, schema: schema, visible: visible }, otherProps)), label: option.label }));
706
714
  })),
707
- React__default["default"].createElement(material.FormHelperText, { error: true }, errors))));
715
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
708
716
  };
709
717
  var hasOneOfItems = function (schema) {
710
718
  return schema.oneOf !== undefined &&
@@ -1016,6 +1024,7 @@ var MaterialDateControl = function (props) {
1016
1024
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
1017
1025
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
1018
1026
  var _e = React.useState(0), key = _e[0], setKey = _e[1];
1027
+ var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1019
1028
  var format = (_a = appliedUiSchemaOptions.dateFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD';
1020
1029
  var saveFormat = (_b = appliedUiSchemaOptions.dateSaveFormat) !== null && _b !== void 0 ? _b : core.defaultDateFormat;
1021
1030
  var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day'];
@@ -1031,33 +1040,33 @@ var MaterialDateControl = function (props) {
1031
1040
  return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
1032
1041
  }, [path, handleChange, format, saveFormat, updateChild]);
1033
1042
  var value = getData(data, saveFormat);
1034
- return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
1035
- React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1036
- React__default["default"].createElement(xDatePickers.DatePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
1037
- actionBar: function (_a) {
1038
- var wrapperVariant = _a.wrapperVariant;
1039
- return ({
1040
- actions: wrapperVariant === 'desktop'
1041
- ? []
1042
- : ['clear', 'cancel', 'accept'],
1043
- });
1044
- },
1045
- textField: {
1046
- id: id + '-input',
1047
- required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1048
- autoFocus: appliedUiSchemaOptions.focus,
1049
- error: !isValid,
1050
- fullWidth: !appliedUiSchemaOptions.trim,
1051
- inputProps: {
1052
- type: 'text',
1053
- },
1054
- InputLabelProps: data ? { shrink: true } : undefined,
1055
- onFocus: onFocus,
1056
- onBlur: onBlurHandler,
1043
+ if (!visible) {
1044
+ return null;
1045
+ }
1046
+ return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1047
+ React__default["default"].createElement(xDatePickers.DatePicker, { open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
1048
+ actionBar: function (_a) {
1049
+ var wrapperVariant = _a.wrapperVariant;
1050
+ return ({
1051
+ actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1052
+ });
1053
+ },
1054
+ textField: {
1055
+ id: id + '-input',
1056
+ required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1057
+ autoFocus: appliedUiSchemaOptions.focus,
1058
+ error: !isValid,
1059
+ fullWidth: !appliedUiSchemaOptions.trim,
1060
+ inputProps: {
1061
+ type: 'text',
1057
1062
  },
1058
- } }),
1059
- React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1060
- React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
1063
+ InputLabelProps: data ? { shrink: true } : undefined,
1064
+ onFocus: onFocus,
1065
+ onBlur: onBlurHandler,
1066
+ },
1067
+ } }),
1068
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1069
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
1061
1070
  };
1062
1071
  var materialDateControlTester = core.rankWith(4, core.isDateControl);
1063
1072
  var MaterialDateControl$1 = react.withJsonFormsControlProps(MaterialDateControl);
@@ -1072,6 +1081,7 @@ var MaterialDateTimeControl = function (props) {
1072
1081
  var format = (_a = appliedUiSchemaOptions.dateTimeFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD HH:mm';
1073
1082
  var saveFormat = (_b = appliedUiSchemaOptions.dateTimeSaveFormat) !== null && _b !== void 0 ? _b : core.defaultDateTimeFormat;
1074
1083
  var _e = React.useState(0), key = _e[0], setKey = _e[1];
1084
+ var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1075
1085
  var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : [
1076
1086
  'year',
1077
1087
  'day',
@@ -1090,33 +1100,33 @@ var MaterialDateTimeControl = function (props) {
1090
1100
  return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
1091
1101
  }, [path, handleChange, format, saveFormat, updateChild]);
1092
1102
  var value = getData(data, saveFormat);
1093
- return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
1094
- React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1095
- React__default["default"].createElement(xDatePickers.DateTimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
1096
- actionBar: function (_a) {
1097
- var wrapperVariant = _a.wrapperVariant;
1098
- return ({
1099
- actions: wrapperVariant === 'desktop'
1100
- ? []
1101
- : ['clear', 'cancel', 'accept'],
1102
- });
1103
- },
1104
- textField: {
1105
- id: id + '-input',
1106
- required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1107
- autoFocus: appliedUiSchemaOptions.focus,
1108
- error: !isValid,
1109
- fullWidth: !appliedUiSchemaOptions.trim,
1110
- inputProps: {
1111
- type: 'text',
1112
- },
1113
- InputLabelProps: data ? { shrink: true } : undefined,
1114
- onFocus: onFocus,
1115
- onBlur: onBlurHandler,
1103
+ if (!visible) {
1104
+ return null;
1105
+ }
1106
+ return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1107
+ React__default["default"].createElement(xDatePickers.DateTimePicker, { open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
1108
+ actionBar: function (_a) {
1109
+ var wrapperVariant = _a.wrapperVariant;
1110
+ return ({
1111
+ actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1112
+ });
1113
+ },
1114
+ textField: {
1115
+ id: id + '-input',
1116
+ required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1117
+ autoFocus: appliedUiSchemaOptions.focus,
1118
+ error: !isValid,
1119
+ fullWidth: !appliedUiSchemaOptions.trim,
1120
+ inputProps: {
1121
+ type: 'text',
1116
1122
  },
1117
- } }),
1118
- React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1119
- React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
1123
+ InputLabelProps: data ? { shrink: true } : undefined,
1124
+ onFocus: onFocus,
1125
+ onBlur: onBlurHandler,
1126
+ },
1127
+ } }),
1128
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1129
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
1120
1130
  };
1121
1131
  var materialDateTimeControlTester = core.rankWith(2, core.isDateTimeControl);
1122
1132
  var MaterialDateTimeControl$1 = react.withJsonFormsControlProps(MaterialDateTimeControl);
@@ -1165,13 +1175,13 @@ var MaterialOneOfEnumControl$1 = react.withJsonFormsOneOfEnumProps(react.withTra
1165
1175
  var MaterialRadioGroup = function (props) {
1166
1176
  var _a;
1167
1177
  var _b = useFocus(), focused = _b[0], onFocus = _b[1], onBlur = _b[2];
1168
- 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;
1178
+ var config = props.config, 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;
1169
1179
  var isValid = errors.length === 0;
1170
1180
  var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
1171
1181
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
1172
1182
  return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
1173
1183
  React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
1174
- React__default["default"].createElement(material.FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
1184
+ React__default["default"].createElement(material.FormLabel, { error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
1175
1185
  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 })); })),
1176
1186
  React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
1177
1187
  };
@@ -1234,6 +1244,7 @@ var MaterialTimeControl = function (props) {
1234
1244
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
1235
1245
  var isValid = errors.length === 0;
1236
1246
  var _e = React.useState(0), key = _e[0], setKey = _e[1];
1247
+ var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1237
1248
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
1238
1249
  var format = (_a = appliedUiSchemaOptions.timeFormat) !== null && _a !== void 0 ? _a : 'HH:mm';
1239
1250
  var saveFormat = (_b = appliedUiSchemaOptions.timeSaveFormat) !== null && _b !== void 0 ? _b : core.defaultTimeFormat;
@@ -1250,33 +1261,33 @@ var MaterialTimeControl = function (props) {
1250
1261
  return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
1251
1262
  }, [path, handleChange, format, saveFormat, updateChild]);
1252
1263
  var value = getData(data, saveFormat);
1253
- return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
1254
- React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1255
- React__default["default"].createElement(xDatePickers.TimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
1256
- actionBar: function (_a) {
1257
- var wrapperVariant = _a.wrapperVariant;
1258
- return ({
1259
- actions: wrapperVariant === 'desktop'
1260
- ? []
1261
- : ['clear', 'cancel', 'accept'],
1262
- });
1263
- },
1264
- textField: {
1265
- id: id + '-input',
1266
- required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1267
- autoFocus: appliedUiSchemaOptions.focus,
1268
- error: !isValid,
1269
- fullWidth: !appliedUiSchemaOptions.trim,
1270
- inputProps: {
1271
- type: 'text',
1272
- },
1273
- InputLabelProps: data ? { shrink: true } : undefined,
1274
- onFocus: onFocus,
1275
- onBlur: onBlurHandler,
1264
+ if (!visible) {
1265
+ return null;
1266
+ }
1267
+ return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1268
+ React__default["default"].createElement(xDatePickers.TimePicker, { open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
1269
+ actionBar: function (_a) {
1270
+ var wrapperVariant = _a.wrapperVariant;
1271
+ return ({
1272
+ actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1273
+ });
1274
+ },
1275
+ textField: {
1276
+ id: id + '-input',
1277
+ required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1278
+ autoFocus: appliedUiSchemaOptions.focus,
1279
+ error: !isValid,
1280
+ fullWidth: !appliedUiSchemaOptions.trim,
1281
+ inputProps: {
1282
+ type: 'text',
1276
1283
  },
1277
- } }),
1278
- React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1279
- React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
1284
+ InputLabelProps: data ? { shrink: true } : undefined,
1285
+ onFocus: onFocus,
1286
+ onBlur: onBlurHandler,
1287
+ },
1288
+ } }),
1289
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
1290
+ React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
1280
1291
  };
1281
1292
  var materialTimeControlTester = core.rankWith(4, core.isTimeControl);
1282
1293
  var MaterialTimeControl$1 = react.withJsonFormsControlProps(MaterialTimeControl);
@@ -1311,14 +1322,17 @@ var ExpandPanelRendererComponent = function (props) {
1311
1322
  React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
1312
1323
  showSortButtons && enabled ? (React__default["default"].createElement(React.Fragment, null,
1313
1324
  React__default["default"].createElement(material.Grid, { item: true },
1314
- React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
1315
- React__default["default"].createElement(iconsMaterial.ArrowUpward, null))),
1325
+ React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
1326
+ React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
1327
+ React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
1316
1328
  React__default["default"].createElement(material.Grid, { item: true },
1317
- React__default["default"].createElement(material.IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
1318
- React__default["default"].createElement(iconsMaterial.ArrowDownward, null))))) : (''),
1329
+ React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
1330
+ React__default["default"].createElement(material.IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
1331
+ React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : (''),
1319
1332
  enabled && (React__default["default"].createElement(material.Grid, { item: true },
1320
- React__default["default"].createElement(material.IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
1321
- React__default["default"].createElement(iconsMaterial.Delete, null)))))))))),
1333
+ React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
1334
+ React__default["default"].createElement(material.IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
1335
+ React__default["default"].createElement(iconsMaterial.Delete, null))))))))))),
1322
1336
  React__default["default"].createElement(material.AccordionDetails, null,
1323
1337
  React__default["default"].createElement(react.JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
1324
1338
  };
@@ -1487,7 +1501,7 @@ var MaterialArrayLayoutComponent = function (props) {
1487
1501
  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: innerCreateDefaultValue }),
1488
1502
  React__default["default"].createElement("div", null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) {
1489
1503
  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, translations: translations }));
1490
- })) : (React__default["default"].createElement("p", null, "No data")))));
1504
+ })) : (React__default["default"].createElement("p", null, translations.noDataMessage)))));
1491
1505
  };
1492
1506
  var MaterialArrayLayout$1 = React__default["default"].memo(MaterialArrayLayoutComponent);
1493
1507