@jsonforms/material-renderers 3.7.0-alpha.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.esm.js CHANGED
@@ -1,27 +1,20 @@
1
1
  import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
2
2
  import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, showAsRequired, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDateControl, defaultDateFormat, isDateTimeControl, defaultDateTimeFormat, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, defaultTimeFormat, createId, removeId, update, moveUp, moveDown, computeChildLabel, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
3
3
  import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withTranslateProps, withArrayTranslationProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
4
- import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItemButton, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
4
+ import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, styled, TableCell, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormLabel, FormGroup, FormControlLabel, Toolbar, ListItemButton, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
5
5
  import omit from 'lodash/omit';
6
6
  import isEmpty from 'lodash/isEmpty';
7
7
  import union from 'lodash/union';
8
8
  import startCase from 'lodash/startCase';
9
9
  import range from 'lodash/range';
10
- import DeleteIcon from '@mui/icons-material/Delete';
11
- import ArrowDownward from '@mui/icons-material/ArrowDownward';
12
- import ArrowUpward from '@mui/icons-material/ArrowUpward';
13
- import { styled } from '@mui/material/styles';
14
- import AddIcon from '@mui/icons-material/Add';
15
- import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
10
+ import { ErrorOutline, Add, ArrowUpward, ArrowDownward, Delete, Close, ExpandMore } from '@mui/icons-material';
16
11
  import merge from 'lodash/merge';
17
12
  import dayjs from 'dayjs';
18
13
  import customParsing from 'dayjs/plugin/customParseFormat';
19
14
  import debounce from 'lodash/debounce';
20
- import Close from '@mui/icons-material/Close';
21
15
  import map from 'lodash/map';
22
16
  import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
23
17
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
24
- import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
25
18
 
26
19
  const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
27
20
  const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
@@ -106,13 +99,13 @@ const StyledTableCell = styled(TableCell)({
106
99
  });
107
100
  const NoBorderTableCell = ({ children, ...otherProps }) => (React.createElement(StyledTableCell, { ...otherProps }, children));
108
101
 
109
- const StyledBadge = styled$1(Badge)(({ theme }) => ({
102
+ const StyledBadge = styled(Badge)(({ theme }) => ({
110
103
  color: theme.palette.error.main,
111
104
  }));
112
105
  const ValidationIcon = ({ errorMessages, id }) => {
113
106
  return (React.createElement(Tooltip, { id: id, title: errorMessages },
114
107
  React.createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
115
- React.createElement(ErrorOutlineIcon, { color: 'inherit' }))));
108
+ React.createElement(ErrorOutline, { color: 'inherit' }))));
116
109
  };
117
110
 
118
111
  const fixedCellSmall = {
@@ -124,15 +117,15 @@ const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, labe
124
117
  React.createElement(NoBorderTableCell, { colSpan: numColumns },
125
118
  React.createElement(Stack, null,
126
119
  React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
127
- React.createElement(Grid, { item: true },
120
+ React.createElement(Grid, null,
128
121
  React.createElement(Typography, { variant: 'h6' }, label)),
129
- React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
122
+ React.createElement(Grid, null, errors.length !== 0 && (React.createElement(Grid, null,
130
123
  React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
131
124
  description && React.createElement(FormHelperText, null, description))),
132
125
  enabled && !disableAdd ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
133
126
  React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
134
127
  React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema, rootSchema)), size: 'large' },
135
- React.createElement(AddIcon, null))))) : null));
128
+ React.createElement(Add, null))))) : null));
136
129
  });
137
130
 
138
131
  const styles = {
@@ -230,18 +223,18 @@ const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, m
230
223
  enabled ? (React.createElement(NoBorderTableCell, { style: showSortButtons ? styles.fixedCell : styles.fixedCellSmall },
231
224
  React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
232
225
  showSortButtons ? (React.createElement(Fragment, null,
233
- React.createElement(Grid, { item: true },
226
+ React.createElement(Grid, null,
234
227
  React.createElement(Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableUp ? undefined : false },
235
228
  React.createElement(IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
236
229
  React.createElement(ArrowUpward, null)))),
237
- React.createElement(Grid, { item: true },
230
+ React.createElement(Grid, null,
238
231
  React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableDown ? undefined : false },
239
232
  React.createElement(IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
240
233
  React.createElement(ArrowDownward, null)))))) : null,
241
- !disableRemove ? (React.createElement(Grid, { item: true },
234
+ !disableRemove ? (React.createElement(Grid, null,
242
235
  React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
243
236
  React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
244
- React.createElement(DeleteIcon, null))))) : null))) : null));
237
+ React.createElement(Delete, null))))) : null))) : null));
245
238
  };
246
239
  const NonEmptyRow = React.memo(NonEmptyRowComponent);
247
240
  const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, disableRemove, }) => {
@@ -364,7 +357,7 @@ const MuiCheckbox = React.memo(function MuiCheckbox(props) {
364
357
  autoFocus: !!appliedUiSchemaOptions.focus,
365
358
  });
366
359
  const checked = !!data;
367
- return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
360
+ return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, slotProps: { input: inputPropsMerged } }));
368
361
  });
369
362
 
370
363
  dayjs.extend(customParsing);
@@ -419,7 +412,7 @@ const getData = (data, saveFormat) => {
419
412
  };
420
413
 
421
414
  const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
422
- return elements.map((child, index) => (React.createElement(Grid, { item: true, key: `${path}-${index}`, xs: true },
415
+ return elements.map((child, index) => (React.createElement(Grid, { key: `${path}-${index}`, size: 'grow' },
423
416
  React.createElement(JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))));
424
417
  };
425
418
  const MaterialLayoutRendererComponent = ({ visible, elements, schema, path, enabled, direction, renderers, cells, }) => {
@@ -590,7 +583,7 @@ const MuiToggle = React.memo(function MuiToggle(props) {
590
583
  autoFocus: !!appliedUiSchemaOptions.focus,
591
584
  });
592
585
  const checked = !!data;
593
- return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
586
+ return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, slotProps: { input: inputPropsMerged } }));
594
587
  });
595
588
 
596
589
  const MaterialEnumArrayRenderer = ({ config, id, schema, visible, errors, description, label, required, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }) => {
@@ -694,20 +687,20 @@ var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
694
687
 
695
688
  const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, description, errors, addItem, path, enabled, createDefault, translations, disableAdd, }) {
696
689
  return (React.createElement(Toolbar, { disableGutters: true },
697
- React.createElement(Stack, null,
690
+ React.createElement(Stack, { width: '100%' },
698
691
  React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
699
- React.createElement(Grid, { item: true },
692
+ React.createElement(Grid, null,
700
693
  React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
701
- React.createElement(Grid, { item: true },
694
+ React.createElement(Grid, null,
702
695
  React.createElement(Typography, { variant: 'h6' }, label)),
703
- React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
696
+ React.createElement(Grid, null, errors.length !== 0 && (React.createElement(Grid, null,
704
697
  React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
705
- enabled && !disableAdd && (React.createElement(Grid, { item: true },
698
+ enabled && !disableAdd && (React.createElement(Grid, null,
706
699
  React.createElement(Grid, { container: true },
707
- React.createElement(Grid, { item: true },
700
+ React.createElement(Grid, null,
708
701
  React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
709
702
  React.createElement(IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
710
- React.createElement(AddIcon, null)))))))),
703
+ React.createElement(Add, null)))))))),
711
704
  description && React.createElement(FormHelperText, null, description))));
712
705
  });
713
706
 
@@ -719,7 +712,7 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handle
719
712
  enabled && !disableRemove && (React.createElement(ListItemSecondaryAction, null,
720
713
  React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
721
714
  React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
722
- React.createElement(DeleteIcon, null)))))));
715
+ React.createElement(Delete, null)))))));
723
716
  };
724
717
  var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
725
718
 
@@ -749,9 +742,9 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
749
742
  return (React.createElement(React.Fragment, null,
750
743
  React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue, disableAdd: doDisableAdd }),
751
744
  React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
752
- React.createElement(Grid, { item: true, xs: 3 },
745
+ React.createElement(Grid, { size: 3 },
753
746
  React.createElement(List, null, data > 0 ? (map(range(data), (index) => (React.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.createElement("p", null, translations.noDataMessage)))),
754
- React.createElement(Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, translations.noSelection))))));
747
+ React.createElement(Grid, { size: 'grow' }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, translations.noSelection))))));
755
748
  };
756
749
  const materialListWithDetailTester = rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray));
757
750
  var MaterialListWithDetailRenderer$1 = withJsonFormsArrayLayoutProps(withTranslateProps(withArrayTranslationProps(MaterialListWithDetailRenderer)));
@@ -1184,31 +1177,31 @@ const ExpandPanelRendererComponent = (props) => {
1184
1177
  const showSortButtons = appliedUiSchemaOptions.showSortButtons ||
1185
1178
  appliedUiSchemaOptions.showArrayLayoutSortButtons;
1186
1179
  return (React.createElement(Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
1187
- React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null) },
1188
- React.createElement(Grid, { container: true, alignItems: 'center' },
1189
- React.createElement(Grid, { item: true, xs: 7, md: 9 },
1180
+ React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMore, null) },
1181
+ React.createElement(Grid, { container: true, sx: { width: '100%' }, alignItems: 'center' },
1182
+ React.createElement(Grid, { size: { xs: 7, md: 9 } },
1190
1183
  React.createElement(Grid, { container: true, alignItems: 'center' },
1191
- React.createElement(Grid, { item: true, xs: 2, md: 1 },
1184
+ React.createElement(Grid, { size: { xs: 2, md: 1 } },
1192
1185
  React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
1193
- React.createElement(Grid, { item: true, xs: 10, md: 11 },
1186
+ React.createElement(Grid, { size: { xs: 10, md: 11 } },
1194
1187
  React.createElement("span", { id: labelHtmlId }, childLabel)))),
1195
- React.createElement(Grid, { item: true, xs: 5, md: 3 },
1188
+ React.createElement(Grid, { size: { xs: 5, md: 3 } },
1196
1189
  React.createElement(Grid, { container: true, justifyContent: 'flex-end' },
1197
- React.createElement(Grid, { item: true },
1190
+ React.createElement(Grid, null,
1198
1191
  React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
1199
1192
  showSortButtons && enabled ? (React.createElement(Fragment, null,
1200
- React.createElement(Grid, { item: true },
1193
+ React.createElement(Grid, null,
1201
1194
  React.createElement(Tooltip, { id: 'tooltip-up', title: translations.up, placement: 'bottom', open: enableMoveUp ? undefined : false },
1202
1195
  React.createElement(IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
1203
1196
  React.createElement(ArrowUpward, null)))),
1204
- React.createElement(Grid, { item: true },
1197
+ React.createElement(Grid, null,
1205
1198
  React.createElement(Tooltip, { id: 'tooltip-down', title: translations.down, placement: 'bottom', open: enableMoveDown ? undefined : false },
1206
1199
  React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
1207
1200
  React.createElement(ArrowDownward, null)))))) : (''),
1208
- enabled && !disableRemove && (React.createElement(Grid, { item: true },
1201
+ enabled && !disableRemove && (React.createElement(Grid, null,
1209
1202
  React.createElement(Tooltip, { id: 'tooltip-remove', title: translations.removeTooltip, placement: 'bottom' },
1210
1203
  React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
1211
- React.createElement(DeleteIcon, null))))))))))),
1204
+ React.createElement(Delete, null))))))))))),
1212
1205
  React.createElement(AccordionDetails, null,
1213
1206
  React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
1214
1207
  };