@jsonforms/material-renderers 3.6.0 → 3.7.0-alpha.1

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 (17) hide show
  1. package/lib/jsonforms-react-material.cjs.js +39 -53
  2. package/lib/jsonforms-react-material.cjs.js.map +1 -1
  3. package/lib/jsonforms-react-material.esm.js +35 -42
  4. package/lib/jsonforms-react-material.esm.js.map +1 -1
  5. package/package.json +12 -12
  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/layouts/ArrayToolbar.tsx +9 -9
  13. package/src/layouts/ExpandPanelRenderer.tsx +17 -15
  14. package/src/mui-controls/MuiCheckbox.tsx +1 -1
  15. package/src/mui-controls/MuiInputText.tsx +1 -1
  16. package/src/mui-controls/MuiToggle.tsx +1 -1
  17. 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)));
@@ -1375,31 +1361,31 @@ var ExpandPanelRendererComponent = function (props) {
1375
1361
  var showSortButtons = appliedUiSchemaOptions.showSortButtons ||
1376
1362
  appliedUiSchemaOptions.showArrayLayoutSortButtons;
1377
1363
  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 },
1364
+ React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(iconsMaterial.ExpandMore, null) },
1365
+ React__default["default"].createElement(material.Grid, { container: true, sx: { width: '100%' }, alignItems: 'center' },
1366
+ React__default["default"].createElement(material.Grid, { size: { xs: 7, md: 9 } },
1381
1367
  React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
1382
- React__default["default"].createElement(material.Grid, { item: true, xs: 2, md: 1 },
1368
+ React__default["default"].createElement(material.Grid, { size: { xs: 2, md: 1 } },
1383
1369
  React__default["default"].createElement(material.Avatar, { "aria-label": 'Index' }, index + 1)),
1384
- React__default["default"].createElement(material.Grid, { item: true, xs: 10, md: 11 },
1370
+ React__default["default"].createElement(material.Grid, { size: { xs: 10, md: 11 } },
1385
1371
  React__default["default"].createElement("span", { id: labelHtmlId }, childLabel)))),
1386
- React__default["default"].createElement(material.Grid, { item: true, xs: 5, md: 3 },
1372
+ React__default["default"].createElement(material.Grid, { size: { xs: 5, md: 3 } },
1387
1373
  React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-end' },
1388
- React__default["default"].createElement(material.Grid, { item: true },
1374
+ React__default["default"].createElement(material.Grid, null,
1389
1375
  React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
1390
1376
  showSortButtons && enabled ? (React__default["default"].createElement(React.Fragment, null,
1391
- React__default["default"].createElement(material.Grid, { item: true },
1377
+ React__default["default"].createElement(material.Grid, null,
1392
1378
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
1393
1379
  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 },
1380
+ React__default["default"].createElement(iconsMaterial.ArrowUpward, null)))),
1381
+ React__default["default"].createElement(material.Grid, null,
1396
1382
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
1397
1383
  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 },
1384
+ React__default["default"].createElement(iconsMaterial.ArrowDownward, null)))))) : (''),
1385
+ enabled && !disableRemove && (React__default["default"].createElement(material.Grid, null,
1400
1386
  React__default["default"].createElement(material.Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
1401
1387
  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))))))))))),
1388
+ React__default["default"].createElement(iconsMaterial.Delete, null))))))))))),
1403
1389
  React__default["default"].createElement(material.AccordionDetails, null,
1404
1390
  React__default["default"].createElement(react.JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
1405
1391
  };