@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsonforms/material-renderers",
3
- "version": "3.7.0-alpha.0",
3
+ "version": "3.7.0-alpha.1",
4
4
  "description": "Material Renderer Set for JSON Forms",
5
5
  "repository": "https://github.com/eclipsesource/jsonforms",
6
6
  "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -71,21 +71,21 @@
71
71
  "lodash": "^4.17.21"
72
72
  },
73
73
  "peerDependencies": {
74
- "@emotion/react": "^11.4.1",
74
+ "@emotion/react": "^11.5.0",
75
75
  "@emotion/styled": "^11.3.0",
76
- "@jsonforms/core": "3.7.0-alpha.0",
77
- "@jsonforms/react": "3.7.0-alpha.0",
78
- "@mui/icons-material": "^5.11.16 || ^6.0.0",
79
- "@mui/material": "^5.13.0 || ^6.0.0",
80
- "@mui/x-date-pickers": "^6.0.0 || ^7.0.0",
76
+ "@jsonforms/core": "3.7.0-alpha.1",
77
+ "@jsonforms/react": "3.7.0-alpha.1",
78
+ "@mui/icons-material": "^7.0.0",
79
+ "@mui/material": "^7.0.0",
80
+ "@mui/x-date-pickers": "^7.28.0",
81
81
  "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
82
82
  },
83
83
  "devDependencies": {
84
84
  "@emotion/react": "^11.5.0",
85
85
  "@emotion/styled": "^11.3.0",
86
- "@mui/icons-material": "^5.11.16",
87
- "@mui/material": "~5.13.0",
88
- "@mui/x-date-pickers": "^7.7.1",
86
+ "@mui/icons-material": "^7.3.0",
87
+ "@mui/material": "^7.3.0",
88
+ "@mui/x-date-pickers": "^7.29.4",
89
89
  "@rollup/plugin-commonjs": "^23.0.3",
90
90
  "@rollup/plugin-json": "^5.0.2",
91
91
  "@rollup/plugin-node-resolve": "^15.0.1",
@@ -126,8 +126,8 @@
126
126
  "webpack": "^5.78.0",
127
127
  "webpack-cli": "^5.1.4",
128
128
  "webpack-dev-server": "^4.15.1",
129
- "@jsonforms/core": "3.7.0-alpha.0",
130
- "@jsonforms/react": "3.7.0-alpha.0"
129
+ "@jsonforms/core": "3.7.0-alpha.1",
130
+ "@jsonforms/react": "3.7.0-alpha.1"
131
131
  },
132
132
  "scripts": {
133
133
  "build": "rollup -c rollup.config.js",
package/src/additional/ListWithDetailMasterItem.tsx CHANGED
@@ -33,7 +33,7 @@ import {
33
33
  ListItemText,
34
34
  Tooltip,
35
35
  } from '@mui/material';
36
- import DeleteIcon from '@mui/icons-material/Delete';
36
+ import { Delete } from '@mui/icons-material';
37
37
  import React from 'react';
38
38
 
39
39
  export const ListWithDetailMasterItem = ({
@@ -65,7 +65,7 @@ export const ListWithDetailMasterItem = ({
65
65
  onClick={removeItem(path, index)}
66
66
  size='large'
67
67
  >
68
- <DeleteIcon />
68
+ <Delete />
69
69
  </IconButton>
70
70
  </Tooltip>
71
71
  </ListItemSecondaryAction>
package/src/additional/MaterialListWithDetailRenderer.tsx CHANGED
@@ -135,7 +135,7 @@ export const MaterialListWithDetailRenderer = ({
135
135
  disableAdd={doDisableAdd}
136
136
  />
137
137
  <Grid container direction='row' spacing={2}>
138
- <Grid item xs={3}>
138
+ <Grid size={3}>
139
139
  <List>
140
140
  {data > 0 ? (
141
141
  map(range(data), (index) => (
@@ -159,7 +159,7 @@ export const MaterialListWithDetailRenderer = ({
159
159
  )}
160
160
  </List>
161
161
  </Grid>
162
- <Grid item xs>
162
+ <Grid size='grow'>
163
163
  {selectedIndex !== undefined ? (
164
164
  <JsonFormsDispatch
165
165
  renderers={renderers}
package/src/complex/MaterialTableControl.tsx CHANGED
@@ -57,9 +57,7 @@ import {
57
57
  encode,
58
58
  ArrayTranslations,
59
59
  } from '@jsonforms/core';
60
- import DeleteIcon from '@mui/icons-material/Delete';
61
- import ArrowDownward from '@mui/icons-material/ArrowDownward';
62
- import ArrowUpward from '@mui/icons-material/ArrowUpward';
60
+ import { Delete, ArrowDownward, ArrowUpward } from '@mui/icons-material';
63
61
 
64
62
  import { WithDeleteDialogSupport } from './DeleteDialog';
65
63
  import NoBorderTableCell from './NoBorderTableCell';
@@ -317,7 +315,7 @@ const NonEmptyRowComponent = ({
317
315
  >
318
316
  {showSortButtons ? (
319
317
  <Fragment>
320
- <Grid item>
318
+ <Grid>
321
319
  <Tooltip
322
320
  id='tooltip-up'
323
321
  title={translations.up}
@@ -334,7 +332,7 @@ const NonEmptyRowComponent = ({
334
332
  </IconButton>
335
333
  </Tooltip>
336
334
  </Grid>
337
- <Grid item>
335
+ <Grid>
338
336
  <Tooltip
339
337
  id='tooltip-down'
340
338
  title={translations.down}
@@ -354,7 +352,7 @@ const NonEmptyRowComponent = ({
354
352
  </Fragment>
355
353
  ) : null}
356
354
  {!disableRemove ? (
357
- <Grid item>
355
+ <Grid>
358
356
  <Tooltip
359
357
  id='tooltip-remove'
360
358
  title={translations.removeTooltip}
@@ -365,7 +363,7 @@ const NonEmptyRowComponent = ({
365
363
  onClick={() => openDeleteDialog(childPath, rowIndex)}
366
364
  size='large'
367
365
  >
368
- <DeleteIcon />
366
+ <Delete />
369
367
  </IconButton>
370
368
  </Tooltip>
371
369
  </Grid>
package/src/complex/NoBorderTableCell.tsx CHANGED
@@ -22,8 +22,7 @@
22
22
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
23
  THE SOFTWARE.
24
24
  */
25
- import { styled } from '@mui/material/styles';
26
- import { TableCell } from '@mui/material';
25
+ import { styled, TableCell } from '@mui/material';
27
26
  import React from 'react';
28
27
 
29
28
  const StyledTableCell = styled(TableCell)({
package/src/complex/TableToolbar.tsx CHANGED
@@ -38,7 +38,7 @@ import {
38
38
  FormHelperText,
39
39
  Stack,
40
40
  } from '@mui/material';
41
- import AddIcon from '@mui/icons-material/Add';
41
+ import { Add } from '@mui/icons-material';
42
42
  import ValidationIcon from './ValidationIcon';
43
43
  import NoBorderTableCell from './NoBorderTableCell';
44
44
 
@@ -85,12 +85,12 @@ const TableToolbar = React.memo(function TableToolbar({
85
85
  alignItems={'center'}
86
86
  spacing={2}
87
87
  >
88
- <Grid item>
88
+ <Grid>
89
89
  <Typography variant={'h6'}>{label}</Typography>
90
90
  </Grid>
91
- <Grid item>
91
+ <Grid>
92
92
  {errors.length !== 0 && (
93
- <Grid item>
93
+ <Grid>
94
94
  <ValidationIcon
95
95
  id='tooltip-validation'
96
96
  errorMessages={errors}
@@ -114,7 +114,7 @@ const TableToolbar = React.memo(function TableToolbar({
114
114
  onClick={addItem(path, createDefaultValue(schema, rootSchema))}
115
115
  size='large'
116
116
  >
117
- <AddIcon />
117
+ <Add />
118
118
  </IconButton>
119
119
  </Tooltip>
120
120
  </NoBorderTableCell>
package/src/complex/ValidationIcon.tsx CHANGED
@@ -24,7 +24,7 @@
24
24
  */
25
25
  import React from 'react';
26
26
 
27
- import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
27
+ import { ErrorOutline } from '@mui/icons-material';
28
28
  import { Badge, Tooltip, styled } from '@mui/material';
29
29
 
30
30
  const StyledBadge = styled(Badge)(({ theme }: any) => ({
@@ -40,7 +40,7 @@ const ValidationIcon: React.FC<ValidationProps> = ({ errorMessages, id }) => {
40
40
  return (
41
41
  <Tooltip id={id} title={errorMessages}>
42
42
  <StyledBadge badgeContent={errorMessages.split('\n').length}>
43
- <ErrorOutlineIcon color='inherit' />
43
+ <ErrorOutline color='inherit' />
44
44
  </StyledBadge>
45
45
  </Tooltip>
46
46
  );
package/src/layouts/ArrayToolbar.tsx CHANGED
@@ -7,7 +7,7 @@ import {
7
7
  Tooltip,
8
8
  Typography,
9
9
  } from '@mui/material';
10
- import AddIcon from '@mui/icons-material/Add';
10
+ import { Add } from '@mui/icons-material';
11
11
  import React from 'react';
12
12
  import ValidationIcon from '../complex/ValidationIcon';
13
13
  import { ArrayTranslations } from '@jsonforms/core';
@@ -35,21 +35,21 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
35
35
  }: ArrayLayoutToolbarProps) {
36
36
  return (
37
37
  <Toolbar disableGutters={true}>
38
- <Stack>
38
+ <Stack width='100%'>
39
39
  <Grid container alignItems='center' justifyContent='space-between'>
40
- <Grid item>
40
+ <Grid>
41
41
  <Grid
42
42
  container
43
43
  justifyContent={'flex-start'}
44
44
  alignItems={'center'}
45
45
  spacing={2}
46
46
  >
47
- <Grid item>
47
+ <Grid>
48
48
  <Typography variant={'h6'}>{label}</Typography>
49
49
  </Grid>
50
- <Grid item>
50
+ <Grid>
51
51
  {errors.length !== 0 && (
52
- <Grid item>
52
+ <Grid>
53
53
  <ValidationIcon
54
54
  id='tooltip-validation'
55
55
  errorMessages={errors}
@@ -60,9 +60,9 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
60
60
  </Grid>
61
61
  </Grid>
62
62
  {enabled && !disableAdd && (
63
- <Grid item>
63
+ <Grid>
64
64
  <Grid container>
65
- <Grid item>
65
+ <Grid>
66
66
  <Tooltip
67
67
  id='tooltip-add'
68
68
  title={translations.addTooltip}
@@ -73,7 +73,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
73
73
  onClick={addItem(path, createDefault())}
74
74
  size='large'
75
75
  >
76
- <AddIcon />
76
+ <Add />
77
77
  </IconButton>
78
78
  </Tooltip>
79
79
  </Grid>
package/src/layouts/ExpandPanelRenderer.tsx CHANGED
@@ -40,10 +40,12 @@ import {
40
40
  IconButton,
41
41
  Tooltip,
42
42
  } from '@mui/material';
43
- import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
44
- import ArrowUpward from '@mui/icons-material/ArrowUpward';
45
- import ArrowDownward from '@mui/icons-material/ArrowDownward';
46
- import DeleteIcon from '@mui/icons-material/Delete';
43
+ import {
44
+ ArrowUpward,
45
+ ArrowDownward,
46
+ Delete,
47
+ ExpandMore,
48
+ } from '@mui/icons-material';
47
49
 
48
50
  const iconStyle: any = { float: 'right' };
49
51
 
@@ -145,21 +147,21 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
145
147
  expanded={expanded}
146
148
  onChange={handleExpansion(childPath)}
147
149
  >
148
- <AccordionSummary expandIcon={<ExpandMoreIcon />}>
149
- <Grid container alignItems={'center'}>
150
- <Grid item xs={7} md={9}>
150
+ <AccordionSummary expandIcon={<ExpandMore />}>
151
+ <Grid container sx={{ width: '100%' }} alignItems={'center'}>
152
+ <Grid size={{ xs: 7, md: 9 }}>
151
153
  <Grid container alignItems={'center'}>
152
- <Grid item xs={2} md={1}>
154
+ <Grid size={{ xs: 2, md: 1 }}>
153
155
  <Avatar aria-label='Index'>{index + 1}</Avatar>
154
156
  </Grid>
155
- <Grid item xs={10} md={11}>
157
+ <Grid size={{ xs: 10, md: 11 }}>
156
158
  <span id={labelHtmlId}>{childLabel}</span>
157
159
  </Grid>
158
160
  </Grid>
159
161
  </Grid>
160
- <Grid item xs={5} md={3}>
162
+ <Grid size={{ xs: 5, md: 3 }}>
161
163
  <Grid container justifyContent='flex-end'>
162
- <Grid item>
164
+ <Grid>
163
165
  <Grid
164
166
  container
165
167
  direction='row'
@@ -168,7 +170,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
168
170
  >
169
171
  {showSortButtons && enabled ? (
170
172
  <Fragment>
171
- <Grid item>
173
+ <Grid>
172
174
  <Tooltip
173
175
  id='tooltip-up'
174
176
  title={translations.up}
@@ -186,7 +188,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
186
188
  </IconButton>
187
189
  </Tooltip>
188
190
  </Grid>
189
- <Grid item>
191
+ <Grid>
190
192
  <Tooltip
191
193
  id='tooltip-down'
192
194
  title={translations.down}
@@ -209,7 +211,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
209
211
  ''
210
212
  )}
211
213
  {enabled && !disableRemove && (
212
- <Grid item>
214
+ <Grid>
213
215
  <Tooltip
214
216
  id='tooltip-remove'
215
217
  title={translations.removeTooltip}
@@ -221,7 +223,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
221
223
  aria-label={translations.removeAriaLabel}
222
224
  size='large'
223
225
  >
224
- <DeleteIcon />
226
+ <Delete />
225
227
  </IconButton>
226
228
  </Tooltip>
227
229
  </Grid>
package/src/mui-controls/MuiCheckbox.tsx CHANGED
@@ -59,7 +59,7 @@ export const MuiCheckbox = React.memo(function MuiCheckbox(
59
59
  className={className}
60
60
  id={id}
61
61
  disabled={!enabled}
62
- inputProps={inputPropsMerged}
62
+ slotProps={{ input: inputPropsMerged }}
63
63
  />
64
64
  );
65
65
  });
package/src/mui-controls/MuiInputText.tsx CHANGED
@@ -32,7 +32,7 @@ import {
32
32
  useTheme,
33
33
  } from '@mui/material';
34
34
  import merge from 'lodash/merge';
35
- import Close from '@mui/icons-material/Close';
35
+ import { Close } from '@mui/icons-material';
36
36
  import {
37
37
  JsonFormsTheme,
38
38
  WithInputProps,
package/src/mui-controls/MuiToggle.tsx CHANGED
@@ -58,7 +58,7 @@ export const MuiToggle = React.memo(function MuiToggle(
58
58
  className={className}
59
59
  id={id}
60
60
  disabled={!enabled}
61
- inputProps={inputPropsMerged}
61
+ slotProps={{ input: inputPropsMerged }}
62
62
  />
63
63
  );
64
64
  });
package/src/util/layout.tsx CHANGED
@@ -45,7 +45,7 @@ export const renderLayoutElements = (
45
45
  cells?: JsonFormsCellRendererRegistryEntry[]
46
46
  ) => {
47
47
  return elements.map((child, index) => (
48
- <Grid item key={`${path}-${index}`} xs>
48
+ <Grid key={`${path}-${index}`} size='grow'>
49
49
  <JsonFormsDispatch
50
50
  uischema={child}
51
51
  schema={schema}