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

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.7.0-alpha.0",
+  "version": "3.7.0-alpha.2",
   "description": "Material Renderer Set for JSON Forms",
-  "repository": "https://github.com/eclipsesource/jsonforms",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eclipsesource/jsonforms.git",
+    "directory": "packages/material-renderers"
+  },
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
   "homepage": "http://jsonforms.io/",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "directories": {
     "example": "example",
     "src": "src",
@@ -71,21 +78,21 @@
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.4.1",
+    "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.7.0-alpha.0",
-    "@jsonforms/react": "3.7.0-alpha.0",
-    "@mui/icons-material": "^5.11.16 || ^6.0.0",
-    "@mui/material": "^5.13.0 || ^6.0.0",
-    "@mui/x-date-pickers": "^6.0.0 || ^7.0.0",
+    "@jsonforms/core": "3.7.0-alpha.2",
+    "@jsonforms/react": "3.7.0-alpha.2",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-date-pickers": "^8.0.0",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "~5.13.0",
-    "@mui/x-date-pickers": "^7.7.1",
+    "@mui/icons-material": "^7.3.0",
+    "@mui/material": "^7.3.0",
+    "@mui/x-date-pickers": "^8.11.3",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -126,8 +133,8 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "@jsonforms/core": "3.7.0-alpha.0",
-    "@jsonforms/react": "3.7.0-alpha.0"
+    "@jsonforms/core": "3.7.0-alpha.2",
+    "@jsonforms/react": "3.7.0-alpha.2"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/additional/ListWithDetailMasterItem.tsx

@@ -33,7 +33,7 @@ import {
   ListItemText,
   Tooltip,
 } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Delete } from '@mui/icons-material';
 import React from 'react';
 
 export const ListWithDetailMasterItem = ({
@@ -65,7 +65,7 @@ export const ListWithDetailMasterItem = ({
               onClick={removeItem(path, index)}
               size='large'
             >
-              <DeleteIcon />
+              <Delete />
             </IconButton>
           </Tooltip>
         </ListItemSecondaryAction>

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -135,7 +135,7 @@ export const MaterialListWithDetailRenderer = ({
         disableAdd={doDisableAdd}
       />
       <Grid container direction='row' spacing={2}>
-        <Grid item xs={3}>
+        <Grid size={3}>
           <List>
             {data > 0 ? (
               map(range(data), (index) => (
@@ -159,7 +159,7 @@ export const MaterialListWithDetailRenderer = ({
             )}
           </List>
         </Grid>
-        <Grid item xs>
+        <Grid size='grow'>
           {selectedIndex !== undefined ? (
             <JsonFormsDispatch
               renderers={renderers}

package/src/complex/MaterialTableControl.tsx

@@ -57,9 +57,7 @@ import {
   encode,
   ArrayTranslations,
 } from '@jsonforms/core';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import { Delete, ArrowDownward, ArrowUpward } from '@mui/icons-material';
 
 import { WithDeleteDialogSupport } from './DeleteDialog';
 import NoBorderTableCell from './NoBorderTableCell';
@@ -317,7 +315,7 @@ const NonEmptyRowComponent = ({
           >
             {showSortButtons ? (
               <Fragment>
-                <Grid item>
+                <Grid>
                   <Tooltip
                     id='tooltip-up'
                     title={translations.up}
@@ -334,7 +332,7 @@ const NonEmptyRowComponent = ({
                     </IconButton>
                   </Tooltip>
                 </Grid>
-                <Grid item>
+                <Grid>
                   <Tooltip
                     id='tooltip-down'
                     title={translations.down}
@@ -354,7 +352,7 @@ const NonEmptyRowComponent = ({
               </Fragment>
             ) : null}
             {!disableRemove ? (
-              <Grid item>
+              <Grid>
                 <Tooltip
                   id='tooltip-remove'
                   title={translations.removeTooltip}
@@ -365,7 +363,7 @@ const NonEmptyRowComponent = ({
                     onClick={() => openDeleteDialog(childPath, rowIndex)}
                     size='large'
                   >
-                    <DeleteIcon />
+                    <Delete />
                   </IconButton>
                 </Tooltip>
               </Grid>

package/src/complex/NoBorderTableCell.tsx

@@ -22,8 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { styled } from '@mui/material/styles';
-import { TableCell } from '@mui/material';
+import { styled, TableCell } from '@mui/material';
 import React from 'react';
 
 const StyledTableCell = styled(TableCell)({

package/src/complex/TableToolbar.tsx

@@ -38,7 +38,7 @@ import {
   FormHelperText,
   Stack,
 } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
+import { Add } from '@mui/icons-material';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
 
@@ -85,12 +85,12 @@ const TableToolbar = React.memo(function TableToolbar({
             alignItems={'center'}
             spacing={2}
           >
-            <Grid item>
+            <Grid>
               <Typography variant={'h6'}>{label}</Typography>
             </Grid>
-            <Grid item>
+            <Grid>
               {errors.length !== 0 && (
-                <Grid item>
+                <Grid>
                   <ValidationIcon
                     id='tooltip-validation'
                     errorMessages={errors}
@@ -114,7 +114,7 @@ const TableToolbar = React.memo(function TableToolbar({
               onClick={addItem(path, createDefaultValue(schema, rootSchema))}
               size='large'
             >
-              <AddIcon />
+              <Add />
             </IconButton>
           </Tooltip>
         </NoBorderTableCell>

package/src/complex/ValidationIcon.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { ErrorOutline } from '@mui/icons-material';
 import { Badge, Tooltip, styled } from '@mui/material';
 
 const StyledBadge = styled(Badge)(({ theme }: any) => ({
@@ -40,7 +40,7 @@ const ValidationIcon: React.FC<ValidationProps> = ({ errorMessages, id }) => {
   return (
     <Tooltip id={id} title={errorMessages}>
       <StyledBadge badgeContent={errorMessages.split('\n').length}>
-        <ErrorOutlineIcon color='inherit' />
+        <ErrorOutline color='inherit' />
       </StyledBadge>
     </Tooltip>
   );

package/src/controls/MaterialDateControl.tsx

@@ -41,10 +41,12 @@ import {
   createOnChangeHandler,
   getData,
   useFocus,
+  useInputVariant,
 } from '../util';
 
 export const MaterialDateControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
+  const inputVariant = useInputVariant();
   const {
     description,
     id,
@@ -75,6 +77,7 @@ export const MaterialDateControl = (props: ControlProps) => {
   const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+  const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
 
   const firstFormHelperText = showDescription
     ? description
@@ -100,7 +103,7 @@ export const MaterialDateControl = (props: ControlProps) => {
         updateChild,
         onBlur
       ),
-    [path, handleChange, format, saveFormat, updateChild]
+    [path, handleChange, format, saveFormat, updateChild, onBlur]
   );
   const value = getData(data, saveFormat);
 
@@ -121,23 +124,25 @@ export const MaterialDateControl = (props: ControlProps) => {
         format={format}
         views={views}
         disabled={!enabled}
+        closeOnSelect={closeOnSelect}
         slotProps={{
-          actionBar: ({ wrapperVariant }) => ({
+          actionBar: ({ pickerVariant }) => ({
             actions:
-              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+              pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
           }),
           textField: {
             id: id + '-input',
             required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-            autoFocus: appliedUiSchemaOptions.focus,
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
+            variant: inputVariant,
             inputProps: {
+              autoFocus: appliedUiSchemaOptions.focus,
               type: 'text',
+              onFocus: onFocus,
+              onBlur: onBlurHandler,
             },
             InputLabelProps: data ? { shrink: true } : undefined,
-            onFocus: onFocus,
-            onBlur: onBlurHandler,
           },
         }}
       />

package/src/controls/MaterialDateTimeControl.tsx

@@ -41,10 +41,12 @@ import {
   createOnChangeHandler,
   getData,
   useFocus,
+  useInputVariant,
 } from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
+  const inputVariant = useInputVariant();
   const {
     id,
     description,
@@ -82,6 +84,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     'hours',
     'minutes',
   ];
+  const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
 
   const firstFormHelperText = showDescription
     ? description
@@ -124,27 +127,30 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
         label={label}
         value={value}
         onAccept={onChange}
+        onChange={onChange}
         format={format}
         ampm={!!appliedUiSchemaOptions.ampm}
         views={views}
+        closeOnSelect={closeOnSelect}
         disabled={!enabled}
         slotProps={{
-          actionBar: ({ wrapperVariant }) => ({
+          actionBar: ({ pickerVariant }) => ({
             actions:
-              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+              pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
           }),
           textField: {
             id: id + '-input',
             required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-            autoFocus: appliedUiSchemaOptions.focus,
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
+            variant: inputVariant,
             inputProps: {
+              autoFocus: appliedUiSchemaOptions.focus,
               type: 'text',
+              onFocus: onFocus,
+              onBlur: onBlurHandler,
             },
             InputLabelProps: data ? { shrink: true } : undefined,
-            onFocus: onFocus,
-            onBlur: onBlurHandler,
           },
         }}
       />

package/src/controls/MaterialTimeControl.tsx

@@ -41,10 +41,12 @@ import {
   createOnChangeHandler,
   getData,
   useFocus,
+  useInputVariant,
 } from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
+  const inputVariant = useInputVariant();
   const {
     id,
     description,
@@ -76,6 +78,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
+  const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
 
   const firstFormHelperText = showDescription
     ? description
@@ -118,27 +121,30 @@ export const MaterialTimeControl = (props: ControlProps) => {
         label={label}
         value={value}
         onAccept={onChange}
+        onChange={onChange}
         format={format}
         ampm={!!appliedUiSchemaOptions.ampm}
         views={views}
+        closeOnSelect={closeOnSelect}
         disabled={!enabled}
         slotProps={{
-          actionBar: ({ wrapperVariant }) => ({
+          actionBar: ({ pickerVariant }) => ({
             actions:
-              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+              pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
           }),
           textField: {
             id: id + '-input',
             required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-            autoFocus: appliedUiSchemaOptions.focus,
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
+            variant: inputVariant,
             inputProps: {
+              autoFocus: appliedUiSchemaOptions.focus,
               type: 'text',
+              onBlur: onBlurHandler,
+              onFocus: onFocus,
             },
             InputLabelProps: data ? { shrink: true } : undefined,
-            onFocus: onFocus,
-            onBlur: onBlurHandler,
           },
         }}
       />

package/src/layouts/ArrayToolbar.tsx

@@ -7,7 +7,7 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
+import { Add } from '@mui/icons-material';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
 import { ArrayTranslations } from '@jsonforms/core';
@@ -35,21 +35,21 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
 }: ArrayLayoutToolbarProps) {
   return (
     <Toolbar disableGutters={true}>
-      <Stack>
+      <Stack width='100%'>
         <Grid container alignItems='center' justifyContent='space-between'>
-          <Grid item>
+          <Grid>
             <Grid
               container
               justifyContent={'flex-start'}
               alignItems={'center'}
               spacing={2}
             >
-              <Grid item>
+              <Grid>
                 <Typography variant={'h6'}>{label}</Typography>
               </Grid>
-              <Grid item>
+              <Grid>
                 {errors.length !== 0 && (
-                  <Grid item>
+                  <Grid>
                     <ValidationIcon
                       id='tooltip-validation'
                       errorMessages={errors}
@@ -60,9 +60,9 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
             </Grid>
           </Grid>
           {enabled && !disableAdd && (
-            <Grid item>
+            <Grid>
               <Grid container>
-                <Grid item>
+                <Grid>
                   <Tooltip
                     id='tooltip-add'
                     title={translations.addTooltip}
@@ -73,7 +73,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
                       onClick={addItem(path, createDefault())}
                       size='large'
                     >
-                      <AddIcon />
+                      <Add />
                     </IconButton>
                   </Tooltip>
                 </Grid>

package/src/layouts/ExpandPanelRenderer.tsx

@@ -40,10 +40,12 @@ import {
   IconButton,
   Tooltip,
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
-import DeleteIcon from '@mui/icons-material/Delete';
+import {
+  ArrowUpward,
+  ArrowDownward,
+  Delete,
+  ExpandMore,
+} from '@mui/icons-material';
 
 const iconStyle: any = { float: 'right' };
 
@@ -145,21 +147,21 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
       expanded={expanded}
       onChange={handleExpansion(childPath)}
     >
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Grid container alignItems={'center'}>
-          <Grid item xs={7} md={9}>
+      <AccordionSummary expandIcon={<ExpandMore />}>
+        <Grid container sx={{ width: '100%' }} alignItems={'center'}>
+          <Grid size={{ xs: 7, md: 9 }}>
             <Grid container alignItems={'center'}>
-              <Grid item xs={2} md={1}>
+              <Grid size={{ xs: 2, md: 1 }}>
                 <Avatar aria-label='Index'>{index + 1}</Avatar>
               </Grid>
-              <Grid item xs={10} md={11}>
+              <Grid size={{ xs: 10, md: 11 }}>
                 <span id={labelHtmlId}>{childLabel}</span>
               </Grid>
             </Grid>
           </Grid>
-          <Grid item xs={5} md={3}>
+          <Grid size={{ xs: 5, md: 3 }}>
             <Grid container justifyContent='flex-end'>
-              <Grid item>
+              <Grid>
                 <Grid
                   container
                   direction='row'
@@ -168,7 +170,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                 >
                   {showSortButtons && enabled ? (
                     <Fragment>
-                      <Grid item>
+                      <Grid>
                         <Tooltip
                           id='tooltip-up'
                           title={translations.up}
@@ -186,7 +188,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           </IconButton>
                         </Tooltip>
                       </Grid>
-                      <Grid item>
+                      <Grid>
                         <Tooltip
                           id='tooltip-down'
                           title={translations.down}
@@ -209,7 +211,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                     ''
                   )}
                   {enabled && !disableRemove && (
-                    <Grid item>
+                    <Grid>
                       <Tooltip
                         id='tooltip-remove'
                         title={translations.removeTooltip}
@@ -221,7 +223,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           aria-label={translations.removeAriaLabel}
                           size='large'
                         >
-                          <DeleteIcon />
+                          <Delete />
                         </IconButton>
                       </Tooltip>
                     </Grid>

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -96,6 +96,7 @@ export const MaterialCategorizationLayoutRenderer = (
     enabled,
     selected,
     onChange,
+    config,
     ajv,
     t,
   } = props;
@@ -106,9 +107,9 @@ export const MaterialCategorizationLayoutRenderer = (
   const categories = useMemo(
     () =>
       categorization.elements.filter((category: Category) =>
-        isVisible(category, data, undefined, ajv)
+        isVisible(category, data, undefined, ajv, config)
       ),
-    [categorization, data, ajv]
+    [categorization, data, ajv, config]
   );
 
   if (categorization !== previousCategorization) {

package/src/layouts/MaterialCategorizationStepperLayout.tsx

@@ -107,9 +107,9 @@ export const MaterialCategorizationStepperLayoutRenderer = (
   const categories = useMemo(
     () =>
       categorization.elements.filter((category: Category) =>
-        isVisible(category, data, undefined, ajv)
+        isVisible(category, data, undefined, ajv, config)
       ),
-    [categorization, data, ajv]
+    [categorization, data, ajv, config]
   );
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,

package/src/mui-controls/MuiCheckbox.tsx

@@ -59,7 +59,7 @@ export const MuiCheckbox = React.memo(function MuiCheckbox(
       className={className}
       id={id}
       disabled={!enabled}
-      inputProps={inputPropsMerged}
+      slotProps={{ input: inputPropsMerged }}
     />
   );
 });

package/src/mui-controls/MuiInputText.tsx

@@ -32,7 +32,7 @@ import {
   useTheme,
 } from '@mui/material';
 import merge from 'lodash/merge';
-import Close from '@mui/icons-material/Close';
+import { Close } from '@mui/icons-material';
 import {
   JsonFormsTheme,
   WithInputProps,

package/src/mui-controls/MuiToggle.tsx

@@ -58,7 +58,7 @@ export const MuiToggle = React.memo(function MuiToggle(
       className={className}
       id={id}
       disabled={!enabled}
-      inputProps={inputPropsMerged}
+      slotProps={{ input: inputPropsMerged }}
     />
   );
 });

package/src/util/layout.tsx

@@ -45,7 +45,7 @@ export const renderLayoutElements = (
   cells?: JsonFormsCellRendererRegistryEntry[]
 ) => {
   return elements.map((child, index) => (
-    <Grid item key={`${path}-${index}`} xs>
+    <Grid key={`${path}-${index}`} size='grow'>
       <JsonFormsDispatch
         uischema={child}
         schema={schema}