@jsonforms/material-renderers 3.7.0-alpha.0 → 3.7.0-alpha.2

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 (22) hide show
  1. package/lib/jsonforms-react-material.cjs.js +84 -89
  2. package/lib/jsonforms-react-material.cjs.js.map +1 -1
  3. package/lib/jsonforms-react-material.esm.js +66 -64
  4. package/lib/jsonforms-react-material.esm.js.map +1 -1
  5. package/package.json +20 -13
  6. package/src/additional/ListWithDetailMasterItem.tsx +2 -2
  7. package/src/additional/MaterialListWithDetailRenderer.tsx +2 -2
  8. package/src/complex/MaterialTableControl.tsx +5 -7
  9. package/src/complex/NoBorderTableCell.tsx +1 -2
  10. package/src/complex/TableToolbar.tsx +5 -5
  11. package/src/complex/ValidationIcon.tsx +2 -2
  12. package/src/controls/MaterialDateControl.tsx +11 -6
  13. package/src/controls/MaterialDateTimeControl.tsx +11 -5
  14. package/src/controls/MaterialTimeControl.tsx +11 -5
  15. package/src/layouts/ArrayToolbar.tsx +9 -9
  16. package/src/layouts/ExpandPanelRenderer.tsx +17 -15
  17. package/src/layouts/MaterialCategorizationLayout.tsx +3 -2
  18. package/src/layouts/MaterialCategorizationStepperLayout.tsx +2 -2
  19. package/src/mui-controls/MuiCheckbox.tsx +1 -1
  20. package/src/mui-controls/MuiInputText.tsx +1 -1
  21. package/src/mui-controls/MuiToggle.tsx +1 -1
  22. package/src/util/layout.tsx +1 -1
package/lib/jsonforms-react-material.cjs.js CHANGED
@@ -11,21 +11,14 @@ var isEmpty = require('lodash/isEmpty');
11
11
  var union = require('lodash/union');
12
12
  var startCase = require('lodash/startCase');
13
13
  var range = require('lodash/range');
14
- var DeleteIcon = require('@mui/icons-material/Delete');
15
- var ArrowDownward = require('@mui/icons-material/ArrowDownward');
16
- var ArrowUpward = require('@mui/icons-material/ArrowUpward');
17
- var styles$1 = require('@mui/material/styles');
18
- var AddIcon = require('@mui/icons-material/Add');
19
- var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
14
+ var iconsMaterial = require('@mui/icons-material');
20
15
  var merge = require('lodash/merge');
21
16
  var dayjs = require('dayjs');
22
17
  var customParsing = require('dayjs/plugin/customParseFormat');
23
18
  var debounce = require('lodash/debounce');
24
- var Close = require('@mui/icons-material/Close');
25
19
  var map = require('lodash/map');
26
20
  var xDatePickers = require('@mui/x-date-pickers');
27
21
  var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
28
- var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
29
22
 
30
23
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
31
24
 
@@ -35,18 +28,11 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
35
28
  var union__default = /*#__PURE__*/_interopDefaultLegacy(union);
36
29
  var startCase__default = /*#__PURE__*/_interopDefaultLegacy(startCase);
37
30
  var range__default = /*#__PURE__*/_interopDefaultLegacy(range);
38
- var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
39
- var ArrowDownward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownward);
40
- var ArrowUpward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpward);
41
- var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
42
- var ErrorOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorOutlineIcon);
43
31
  var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
44
32
  var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
45
33
  var customParsing__default = /*#__PURE__*/_interopDefaultLegacy(customParsing);
46
34
  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
47
- var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
48
35
  var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
49
- var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
50
36
 
51
37
  /******************************************************************************
52
38
  Copyright (c) Microsoft Corporation.
@@ -195,7 +181,7 @@ var MaterialAnyOfRenderer = function (_a) {
195
181
  var materialAnyOfControlTester = core.rankWith(3, core.isAnyOfControl);
196
182
  var MaterialAnyOfRenderer$1 = react.withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
197
183
 
198
- var StyledTableCell = styles$1.styled(material.TableCell)({
184
+ var StyledTableCell = material.styled(material.TableCell)({
199
185
  borderBottom: 'none',
200
186
  });
201
187
  var NoBorderTableCell = function (_a) {
@@ -213,7 +199,7 @@ var ValidationIcon = function (_a) {
213
199
  var errorMessages = _a.errorMessages, id = _a.id;
214
200
  return (React__default["default"].createElement(material.Tooltip, { id: id, title: errorMessages },
215
201
  React__default["default"].createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
216
- React__default["default"].createElement(ErrorOutlineIcon__default["default"], { color: 'inherit' }))));
202
+ React__default["default"].createElement(iconsMaterial.ErrorOutline, { color: 'inherit' }))));
217
203
  };
218
204
 
219
205
  var fixedCellSmall = {
@@ -226,15 +212,15 @@ var TableToolbar = React__default["default"].memo(function TableToolbar(_a) {
226
212
  React__default["default"].createElement(NoBorderTableCell, { colSpan: numColumns },
227
213
  React__default["default"].createElement(material.Stack, null,
228
214
  React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
229
- React__default["default"].createElement(material.Grid, { item: true },
215
+ React__default["default"].createElement(material.Grid, null,
230
216
  React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
231
- React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
217
+ React__default["default"].createElement(material.Grid, null, errors.length !== 0 && (React__default["default"].createElement(material.Grid, null,
232
218
  React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
233
219
  description && React__default["default"].createElement(material.FormHelperText, null, description))),
234
220
  enabled && !disableAdd ? (React__default["default"].createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
235
221
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
236
222
  React__default["default"].createElement(material.IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, core.createDefaultValue(schema, rootSchema)), size: 'large' },
237
- React__default["default"].createElement(AddIcon__default["default"], null))))) : null));
223
+ React__default["default"].createElement(iconsMaterial.Add, null))))) : null));
238
224
  });
239
225
 
240
226
  var styles = {
@@ -339,18 +325,18 @@ var NonEmptyRowComponent = function (_a) {
339
325
  enabled ? (React__default["default"].createElement(NoBorderTableCell, { style: showSortButtons ? styles.fixedCell : styles.fixedCellSmall },
340
326
  React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
341
327
  showSortButtons ? (React__default["default"].createElement(React.Fragment, null,
342
- React__default["default"].createElement(material.Grid, { item: true },
328
+ React__default["default"].createElement(material.Grid, null,
343
329
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
344
330
  React__default["default"].createElement(material.IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
345
- React__default["default"].createElement(ArrowUpward__default["default"], null)))),
346
- React__default["default"].createElement(material.Grid, { item: true },
331
+ React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
332
+ React__default["default"].createElement(material.Grid, null,
347
333
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
348
334
  React__default["default"].createElement(material.IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
349
- React__default["default"].createElement(ArrowDownward__default["default"], null)))))) : null,
350
- !disableRemove ? (React__default["default"].createElement(material.Grid, { item: true },
335
+ React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : null,
336
+ !disableRemove ? (React__default["default"].createElement(material.Grid, null,
351
337
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
352
338
  React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: function () { return openDeleteDialog(childPath, rowIndex); }, size: 'large' },
353
- React__default["default"].createElement(DeleteIcon__default["default"], null))))) : null))) : null));
339
+ React__default["default"].createElement(iconsMaterial.Delete, null))))) : null))) : null));
354
340
  };
355
341
  var NonEmptyRow = React__default["default"].memo(NonEmptyRowComponent);
356
342
  var TableRows = function (_a) {
@@ -479,7 +465,7 @@ var MuiCheckbox = React__default["default"].memo(function MuiCheckbox(props) {
479
465
  autoFocus: !!appliedUiSchemaOptions.focus,
480
466
  });
481
467
  var checked = !!data;
482
- return (React__default["default"].createElement(material.Checkbox, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
468
+ return (React__default["default"].createElement(material.Checkbox, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, slotProps: { input: inputPropsMerged } }));
483
469
  });
484
470
 
485
471
  dayjs__default["default"].extend(customParsing__default["default"]);
@@ -538,7 +524,7 @@ var getData = function (data, saveFormat) {
538
524
  };
539
525
 
540
526
  var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
541
- return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: "".concat(path, "-").concat(index), xs: true },
527
+ return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { key: "".concat(path, "-").concat(index), size: 'grow' },
542
528
  React__default["default"].createElement(react.JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))); });
543
529
  };
544
530
  var MaterialLayoutRendererComponent = function (_a) {
@@ -696,7 +682,7 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
696
682
  right: 0,
697
683
  } },
698
684
  React__default["default"].createElement(material.IconButton, { "aria-label": 'Clear input field', onClick: onClear, size: 'large' },
699
- React__default["default"].createElement(Close__default["default"], { style: closeStyle }))), inputComponent: inputComponent }));
685
+ React__default["default"].createElement(iconsMaterial.Close, { style: closeStyle }))), inputComponent: inputComponent }));
700
686
  });
701
687
 
702
688
  var MuiInputTime = React__default["default"].memo(function MuiInputTime(props) {
@@ -724,7 +710,7 @@ var MuiToggle = React__default["default"].memo(function MuiToggle(props) {
724
710
  autoFocus: !!appliedUiSchemaOptions.focus,
725
711
  });
726
712
  var checked = !!data;
727
- return (React__default["default"].createElement(material.Switch, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
713
+ return (React__default["default"].createElement(material.Switch, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, slotProps: { input: inputPropsMerged } }));
728
714
  });
729
715
 
730
716
  var MaterialEnumArrayRenderer = function (_a) {
@@ -846,20 +832,20 @@ var MaterialLabelRenderer$1 = react.withJsonFormsLabelProps(MaterialLabelRendere
846
832
  var ArrayLayoutToolbar = React__default["default"].memo(function ArrayLayoutToolbar(_a) {
847
833
  var label = _a.label, description = _a.description, errors = _a.errors, addItem = _a.addItem, path = _a.path, enabled = _a.enabled, createDefault = _a.createDefault, translations = _a.translations, disableAdd = _a.disableAdd;
848
834
  return (React__default["default"].createElement(material.Toolbar, { disableGutters: true },
849
- React__default["default"].createElement(material.Stack, null,
835
+ React__default["default"].createElement(material.Stack, { width: '100%' },
850
836
  React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
851
- React__default["default"].createElement(material.Grid, { item: true },
837
+ React__default["default"].createElement(material.Grid, null,
852
838
  React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
853
- React__default["default"].createElement(material.Grid, { item: true },
839
+ React__default["default"].createElement(material.Grid, null,
854
840
  React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
855
- React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
841
+ React__default["default"].createElement(material.Grid, null, errors.length !== 0 && (React__default["default"].createElement(material.Grid, null,
856
842
  React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
857
- enabled && !disableAdd && (React__default["default"].createElement(material.Grid, { item: true },
843
+ enabled && !disableAdd && (React__default["default"].createElement(material.Grid, null,
858
844
  React__default["default"].createElement(material.Grid, { container: true },
859
- React__default["default"].createElement(material.Grid, { item: true },
845
+ React__default["default"].createElement(material.Grid, null,
860
846
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
861
847
  React__default["default"].createElement(material.IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
862
- React__default["default"].createElement(AddIcon__default["default"], null)))))))),
848
+ React__default["default"].createElement(iconsMaterial.Add, null)))))))),
863
849
  description && React__default["default"].createElement(material.FormHelperText, null, description))));
864
850
  });
865
851
 
@@ -872,7 +858,7 @@ var ListWithDetailMasterItem = function (_a) {
872
858
  enabled && !disableRemove && (React__default["default"].createElement(material.ListItemSecondaryAction, null,
873
859
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
874
860
  React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
875
- React__default["default"].createElement(DeleteIcon__default["default"], null)))))));
861
+ React__default["default"].createElement(iconsMaterial.Delete, null)))))));
876
862
  };
877
863
  var ListWithDetailMasterItem$1 = react.withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
878
864
 
@@ -905,9 +891,9 @@ var MaterialListWithDetailRenderer = function (_a) {
905
891
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
906
892
  React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue, disableAdd: doDisableAdd }),
907
893
  React__default["default"].createElement(material.Grid, { container: true, direction: 'row', spacing: 2 },
908
- React__default["default"].createElement(material.Grid, { item: true, xs: 3 },
894
+ React__default["default"].createElement(material.Grid, { size: 3 },
909
895
  React__default["default"].createElement(material.List, null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) { return (React__default["default"].createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, uischema: foundUISchema, childLabelProp: appliedUiSchemaOptions.elementLabelProp, translations: translations, disableRemove: doDisableRemove })); })) : (React__default["default"].createElement("p", null, translations.noDataMessage)))),
910
- React__default["default"].createElement(material.Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React__default["default"].createElement(react.JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: core.composePaths(path, "".concat(selectedIndex)) })) : (React__default["default"].createElement(material.Typography, { variant: 'h6' }, translations.noSelection))))));
896
+ React__default["default"].createElement(material.Grid, { size: 'grow' }, selectedIndex !== undefined ? (React__default["default"].createElement(react.JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: core.composePaths(path, "".concat(selectedIndex)) })) : (React__default["default"].createElement(material.Typography, { variant: 'h6' }, translations.noSelection))))));
911
897
  };
912
898
  var materialListWithDetailTester = core.rankWith(4, core.and(core.uiTypeIs('ListWithDetail'), core.isObjectArray));
913
899
  var MaterialListWithDetailRenderer$1 = react.withJsonFormsArrayLayoutProps(react.withTranslateProps(react.withArrayTranslationProps(MaterialListWithDetailRenderer)));
@@ -1078,17 +1064,19 @@ var materialBooleanToggleControlTester = core.rankWith(3, core.and(core.isBoolea
1078
1064
  var MaterialBooleanToggleControl$1 = react.withJsonFormsControlProps(MaterialBooleanToggleControl);
1079
1065
 
1080
1066
  var MaterialDateControl = function (props) {
1081
- var _a, _b, _c;
1082
- var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
1067
+ var _a, _b, _c, _d;
1068
+ var _e = useFocus(), focused = _e[0], onFocus = _e[1], onBlur = _e[2];
1069
+ var inputVariant = useInputVariant();
1083
1070
  var description = props.description, id = props.id, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
1084
1071
  var isValid = errors.length === 0;
1085
1072
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
1086
1073
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
1087
- var _e = React.useState(0), key = _e[0], setKey = _e[1];
1088
- var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1074
+ var _f = React.useState(0), key = _f[0], setKey = _f[1];
1075
+ var _g = React.useState(false), open = _g[0], setOpen = _g[1];
1089
1076
  var format = (_a = appliedUiSchemaOptions.dateFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD';
1090
1077
  var saveFormat = (_b = appliedUiSchemaOptions.dateSaveFormat) !== null && _b !== void 0 ? _b : core.defaultDateFormat;
1091
1078
  var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day'];
1079
+ var closeOnSelect = (_d = appliedUiSchemaOptions.closeOnSelect) !== null && _d !== void 0 ? _d : true;
1092
1080
  var firstFormHelperText = showDescription
1093
1081
  ? description
1094
1082
  : !isValid
@@ -1099,31 +1087,32 @@ var MaterialDateControl = function (props) {
1099
1087
  var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
1100
1088
  var onBlurHandler = React.useMemo(function () {
1101
1089
  return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
1102
- }, [path, handleChange, format, saveFormat, updateChild]);
1090
+ }, [path, handleChange, format, saveFormat, updateChild, onBlur]);
1103
1091
  var value = getData(data, saveFormat);
1104
1092
  if (!visible) {
1105
1093
  return null;
1106
1094
  }
1107
1095
  return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1108
- 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: {
1096
+ 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, closeOnSelect: closeOnSelect, slotProps: {
1109
1097
  actionBar: function (_a) {
1110
- var wrapperVariant = _a.wrapperVariant;
1098
+ var pickerVariant = _a.pickerVariant;
1111
1099
  return ({
1112
- actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1100
+ actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1113
1101
  });
1114
1102
  },
1115
1103
  textField: {
1116
1104
  id: id + '-input',
1117
1105
  required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1118
- autoFocus: appliedUiSchemaOptions.focus,
1119
1106
  error: !isValid,
1120
1107
  fullWidth: !appliedUiSchemaOptions.trim,
1108
+ variant: inputVariant,
1121
1109
  inputProps: {
1110
+ autoFocus: appliedUiSchemaOptions.focus,
1122
1111
  type: 'text',
1112
+ onFocus: onFocus,
1113
+ onBlur: onBlurHandler,
1123
1114
  },
1124
1115
  InputLabelProps: data ? { shrink: true } : undefined,
1125
- onFocus: onFocus,
1126
- onBlur: onBlurHandler,
1127
1116
  },
1128
1117
  } }),
1129
1118
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1133,22 +1122,24 @@ var materialDateControlTester = core.rankWith(4, core.isDateControl);
1133
1122
  var MaterialDateControl$1 = react.withJsonFormsControlProps(MaterialDateControl);
1134
1123
 
1135
1124
  var MaterialDateTimeControl = function (props) {
1136
- var _a, _b, _c;
1137
- var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
1125
+ var _a, _b, _c, _d;
1126
+ var _e = useFocus(), focused = _e[0], onFocus = _e[1], onBlur = _e[2];
1127
+ var inputVariant = useInputVariant();
1138
1128
  var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
1139
1129
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
1140
1130
  var isValid = errors.length === 0;
1141
1131
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
1142
1132
  var format = (_a = appliedUiSchemaOptions.dateTimeFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD HH:mm';
1143
1133
  var saveFormat = (_b = appliedUiSchemaOptions.dateTimeSaveFormat) !== null && _b !== void 0 ? _b : core.defaultDateTimeFormat;
1144
- var _e = React.useState(0), key = _e[0], setKey = _e[1];
1145
- var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1134
+ var _f = React.useState(0), key = _f[0], setKey = _f[1];
1135
+ var _g = React.useState(false), open = _g[0], setOpen = _g[1];
1146
1136
  var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : [
1147
1137
  'year',
1148
1138
  'day',
1149
1139
  'hours',
1150
1140
  'minutes',
1151
1141
  ];
1142
+ var closeOnSelect = (_d = appliedUiSchemaOptions.closeOnSelect) !== null && _d !== void 0 ? _d : true;
1152
1143
  var firstFormHelperText = showDescription
1153
1144
  ? description
1154
1145
  : !isValid
@@ -1165,25 +1156,26 @@ var MaterialDateTimeControl = function (props) {
1165
1156
  return null;
1166
1157
  }
1167
1158
  return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1168
- 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: {
1159
+ 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, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, closeOnSelect: closeOnSelect, disabled: !enabled, slotProps: {
1169
1160
  actionBar: function (_a) {
1170
- var wrapperVariant = _a.wrapperVariant;
1161
+ var pickerVariant = _a.pickerVariant;
1171
1162
  return ({
1172
- actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1163
+ actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1173
1164
  });
1174
1165
  },
1175
1166
  textField: {
1176
1167
  id: id + '-input',
1177
1168
  required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1178
- autoFocus: appliedUiSchemaOptions.focus,
1179
1169
  error: !isValid,
1180
1170
  fullWidth: !appliedUiSchemaOptions.trim,
1171
+ variant: inputVariant,
1181
1172
  inputProps: {
1173
+ autoFocus: appliedUiSchemaOptions.focus,
1182
1174
  type: 'text',
1175
+ onFocus: onFocus,
1176
+ onBlur: onBlurHandler,
1183
1177
  },
1184
1178
  InputLabelProps: data ? { shrink: true } : undefined,
1185
- onFocus: onFocus,
1186
- onBlur: onBlurHandler,
1187
1179
  },
1188
1180
  } }),
1189
1181
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1305,17 +1297,19 @@ var materialTextControlTester = core.rankWith(1, core.isStringControl);
1305
1297
  var MaterialTextControl$1 = react.withJsonFormsControlProps(MaterialTextControl);
1306
1298
 
1307
1299
  var MaterialTimeControl = function (props) {
1308
- var _a, _b, _c;
1309
- var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
1300
+ var _a, _b, _c, _d;
1301
+ var _e = useFocus(), focused = _e[0], onFocus = _e[1], onBlur = _e[2];
1302
+ var inputVariant = useInputVariant();
1310
1303
  var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
1311
1304
  var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
1312
1305
  var isValid = errors.length === 0;
1313
- var _e = React.useState(0), key = _e[0], setKey = _e[1];
1314
- var _f = React.useState(false), open = _f[0], setOpen = _f[1];
1306
+ var _f = React.useState(0), key = _f[0], setKey = _f[1];
1307
+ var _g = React.useState(false), open = _g[0], setOpen = _g[1];
1315
1308
  var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
1316
1309
  var format = (_a = appliedUiSchemaOptions.timeFormat) !== null && _a !== void 0 ? _a : 'HH:mm';
1317
1310
  var saveFormat = (_b = appliedUiSchemaOptions.timeSaveFormat) !== null && _b !== void 0 ? _b : core.defaultTimeFormat;
1318
1311
  var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['hours', 'minutes'];
1312
+ var closeOnSelect = (_d = appliedUiSchemaOptions.closeOnSelect) !== null && _d !== void 0 ? _d : true;
1319
1313
  var firstFormHelperText = showDescription
1320
1314
  ? description
1321
1315
  : !isValid
@@ -1332,25 +1326,26 @@ var MaterialTimeControl = function (props) {
1332
1326
  return null;
1333
1327
  }
1334
1328
  return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
1335
- 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: {
1329
+ 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, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, closeOnSelect: closeOnSelect, disabled: !enabled, slotProps: {
1336
1330
  actionBar: function (_a) {
1337
- var wrapperVariant = _a.wrapperVariant;
1331
+ var pickerVariant = _a.pickerVariant;
1338
1332
  return ({
1339
- actions: wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1333
+ actions: pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
1340
1334
  });
1341
1335
  },
1342
1336
  textField: {
1343
1337
  id: id + '-input',
1344
1338
  required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
1345
- autoFocus: appliedUiSchemaOptions.focus,
1346
1339
  error: !isValid,
1347
1340
  fullWidth: !appliedUiSchemaOptions.trim,
1341
+ variant: inputVariant,
1348
1342
  inputProps: {
1343
+ autoFocus: appliedUiSchemaOptions.focus,
1349
1344
  type: 'text',
1345
+ onBlur: onBlurHandler,
1346
+ onFocus: onFocus,
1350
1347
  },
1351
1348
  InputLabelProps: data ? { shrink: true } : undefined,
1352
- onFocus: onFocus,
1353
- onBlur: onBlurHandler,
1354
1349
  },
1355
1350
  } }),
1356
1351
  React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1375,31 +1370,31 @@ var ExpandPanelRendererComponent = function (props) {
1375
1370
  var showSortButtons = appliedUiSchemaOptions.showSortButtons ||
1376
1371
  appliedUiSchemaOptions.showArrayLayoutSortButtons;
1377
1372
  return (React__default["default"].createElement(material.Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
1378
- React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], null) },
1379
- React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
1380
- React__default["default"].createElement(material.Grid, { item: true, xs: 7, md: 9 },
1373
+ React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(iconsMaterial.ExpandMore, null) },
1374
+ React__default["default"].createElement(material.Grid, { container: true, sx: { width: '100%' }, alignItems: 'center' },
1375
+ React__default["default"].createElement(material.Grid, { size: { xs: 7, md: 9 } },
1381
1376
  React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
1382
- React__default["default"].createElement(material.Grid, { item: true, xs: 2, md: 1 },
1377
+ React__default["default"].createElement(material.Grid, { size: { xs: 2, md: 1 } },
1383
1378
  React__default["default"].createElement(material.Avatar, { "aria-label": 'Index' }, index + 1)),
1384
- React__default["default"].createElement(material.Grid, { item: true, xs: 10, md: 11 },
1379
+ React__default["default"].createElement(material.Grid, { size: { xs: 10, md: 11 } },
1385
1380
  React__default["default"].createElement("span", { id: labelHtmlId }, childLabel)))),
1386
- React__default["default"].createElement(material.Grid, { item: true, xs: 5, md: 3 },
1381
+ React__default["default"].createElement(material.Grid, { size: { xs: 5, md: 3 } },
1387
1382
  React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-end' },
1388
- React__default["default"].createElement(material.Grid, { item: true },
1383
+ React__default["default"].createElement(material.Grid, null,
1389
1384
  React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
1390
1385
  showSortButtons && enabled ? (React__default["default"].createElement(React.Fragment, null,
1391
- React__default["default"].createElement(material.Grid, { item: true },
1386
+ React__default["default"].createElement(material.Grid, null,
1392
1387
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
1393
1388
  React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
1394
- React__default["default"].createElement(ArrowUpward__default["default"], null)))),
1395
- React__default["default"].createElement(material.Grid, { item: true },
1389
+ React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
1390
+ React__default["default"].createElement(material.Grid, null,
1396
1391
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
1397
1392
  React__default["default"].createElement(material.IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
1398
- React__default["default"].createElement(ArrowDownward__default["default"], null)))))) : (''),
1399
- enabled && !disableRemove && (React__default["default"].createElement(material.Grid, { item: true },
1393
+ React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : (''),
1394
+ enabled && !disableRemove && (React__default["default"].createElement(material.Grid, null,
1400
1395
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
1401
1396
  React__default["default"].createElement(material.IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
1402
- React__default["default"].createElement(DeleteIcon__default["default"], null))))))))))),
1397
+ React__default["default"].createElement(iconsMaterial.Delete, null))))))))))),
1403
1398
  React__default["default"].createElement(material.AccordionDetails, null,
1404
1399
  React__default["default"].createElement(react.JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
1405
1400
  };
@@ -1534,15 +1529,15 @@ var isSingleLevelCategorization = core.and(core.uiTypeIs('Categorization'), func
1534
1529
  });
1535
1530
  var materialCategorizationTester = core.rankWith(1, isSingleLevelCategorization);
1536
1531
  var MaterialCategorizationLayoutRenderer = function (props) {
1537
- var data = props.data, path = props.path, renderers = props.renderers, cells = props.cells, schema = props.schema, uischema = props.uischema, visible = props.visible, enabled = props.enabled, selected = props.selected, onChange = props.onChange, ajv = props.ajv, t = props.t;
1532
+ var data = props.data, path = props.path, renderers = props.renderers, cells = props.cells, schema = props.schema, uischema = props.uischema, visible = props.visible, enabled = props.enabled, selected = props.selected, onChange = props.onChange, config = props.config, ajv = props.ajv, t = props.t;
1538
1533
  var categorization = uischema;
1539
1534
  var _a = React.useState(uischema), previousCategorization = _a[0], setPreviousCategorization = _a[1];
1540
1535
  var _b = React.useState(selected !== null && selected !== void 0 ? selected : 0), activeCategory = _b[0], setActiveCategory = _b[1];
1541
1536
  var categories = React.useMemo(function () {
1542
1537
  return categorization.elements.filter(function (category) {
1543
- return core.isVisible(category, data, undefined, ajv);
1538
+ return core.isVisible(category, data, undefined, ajv, config);
1544
1539
  });
1545
- }, [categorization, data, ajv]);
1540
+ }, [categorization, data, ajv, config]);
1546
1541
  if (categorization !== previousCategorization) {
1547
1542
  setActiveCategory(0);
1548
1543
  setPreviousCategorization(categorization);
@@ -1696,9 +1691,9 @@ var MaterialCategorizationStepperLayoutRenderer = function (props) {
1696
1691
  };
1697
1692
  var categories = React.useMemo(function () {
1698
1693
  return categorization.elements.filter(function (category) {
1699
- return core.isVisible(category, data, undefined, ajv);
1694
+ return core.isVisible(category, data, undefined, ajv, config);
1700
1695
  });
1701
- }, [categorization, data, ajv]);
1696
+ }, [categorization, data, ajv, config]);
1702
1697
  var childProps = {
1703
1698
  elements: categories[activeCategory].elements,
1704
1699
  schema: schema,