react-material: upgrade to Material UI v9 (#2614)

* upgrade @mui dependencies from v7 to v9. This drops support for v7
* migrate deprecated props to slotProps
* chore(review): apply requested changes
* use Stack for vertical layouts instead of Grid because Grid no longer supports direction column
* remove obsolete direction "row" definitions for Grid components
* add migration info for the upgrade

Author: jgteske

MIGRATION.md

@@ -12,6 +12,20 @@ When a missing intermediate container is created, the JSON Schema decides whethe
 
 If you dispatch update actions yourself, make sure to use dot-separated paths (e.g. `update('list.0.name', ...)`) instead of lodash bracket syntax (e.g. `update('list[0].name', ...)`), which is no longer interpreted.
 
+### React Material renderers now require Material UI v9
+
+The React Material renderers (`@jsonforms/material-renderers`) were upgraded from Material UI v7 to v9.
+When using JSON Forms 3.9, your application now needs to provide `@mui/material` and `@mui/icons-material` in version 9, as well as `@mui/x-date-pickers` in version 9 (previously version 8).
+
+To upgrade your application, follow the official [Material UI upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v9/) and the [MUI X Date Pickers migration guide](https://mui.com/x/migration/migration-pickers-v8/).
+
+Use JSON Forms 3.8 if you need to stay on Material UI v7.
+
+As part of this upgrade, layouts that arrange their children vertically (e.g. `VerticalLayout`, `Group`, `Categorization`) now render a MUI `Stack` instead of a `Grid` container with `direction="column"`, and their children are no longer wrapped in `Grid` items.
+If you apply custom styling that relies on the previous `Grid`-based DOM structure of these layouts, verify that it still works as expected.
+Furthermore, if you use exported method `renderLayoutElements`, it no longer wraps children in `Grid` items for direction `column`.
+This should not affect you except if you explicitly use this method in custom renderers.
+
 ## Migrating to JSON Forms 3.8
 
 ### `Translator` type changed from overloaded signatures to a generic conditional type

packages/examples-react/package.json

@@ -6,7 +6,7 @@
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
     "@jsonforms/react": "workspace:*",
-    "@mui/material": "^7.3.0",
+    "@mui/material": "^9.2.0",
     "@types/react-highlight": "^0.12.5",
     "@types/react-tabs": "^2.3.3",
     "highlight.js": "^11.3.1",

packages/material-renderers/package.json

@@ -95,19 +95,19 @@
     "@emotion/styled": "^11.3.0",
     "@jsonforms/core": "3.9.0-alpha.0",
     "@jsonforms/react": "3.9.0-alpha.0",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
-    "@mui/x-date-pickers": "^8.0.0",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/x-date-pickers": "^9.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",
     "@jsonforms/core": "workspace:*",
     "@jsonforms/react": "workspace:*",
-    "@mui/icons-material": "^7.3.0",
-    "@mui/material": "^7.3.0",
-    "@mui/x-date-pickers": "^8.11.3",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@mui/x-date-pickers": "^9.10.1",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",

packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx

@@ -134,7 +134,7 @@ export const MaterialListWithDetailRenderer = ({
         createDefault={handleCreateDefaultValue}
         disableAdd={doDisableAdd}
       />
-      <Grid container direction='row' spacing={2}>
+      <Grid container spacing={2}>
         <Grid size={3}>
           <List>
             {data > 0 ? (

packages/material-renderers/src/complex/MaterialTableControl.tsx

@@ -309,9 +309,7 @@ const NonEmptyRowComponent = ({
         >
           <Grid
             container
-            direction='row'
-            justifyContent='flex-end'
-            alignItems='center'
+            sx={{ justifyContent: 'flex-end', alignItems: 'center' }}
           >
             {showSortButtons ? (
               <Fragment>

packages/material-renderers/src/complex/TableToolbar.tsx

@@ -81,8 +81,7 @@ const TableToolbar = React.memo(function TableToolbar({
         <Stack>
           <Grid
             container
-            justifyContent={'flex-start'}
-            alignItems={'center'}
+            sx={{ justifyContent: 'flex-start', alignItems: 'center' }}
             spacing={2}
           >
             <Grid>

packages/material-renderers/src/complex/ValidationIcon.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 
-import { ErrorOutline } from '@mui/icons-material';
+import { ErrorOutlineOutlined } 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}>
-        <ErrorOutline color='inherit' />
+        <ErrorOutlineOutlined color='inherit' />
       </StyledBadge>
     </Tooltip>
   );

packages/material-renderers/src/controls/MaterialDateControl.tsx

@@ -136,13 +136,15 @@ export const MaterialDateControl = (props: ControlProps) => {
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
             variant: inputVariant,
-            inputProps: {
-              autoFocus: appliedUiSchemaOptions.focus,
-              type: 'text',
-              onFocus: onFocus,
-              onBlur: onBlurHandler,
+            slotProps: {
+              htmlInput: {
+                autoFocus: appliedUiSchemaOptions.focus,
+                type: 'text',
+                onFocus: onFocus,
+                onBlur: onBlurHandler,
+              },
+              inputLabel: data ? { shrink: true } : undefined,
             },
-            InputLabelProps: data ? { shrink: true } : undefined,
           },
         }}
       />

packages/material-renderers/src/controls/MaterialDateTimeControl.tsx

@@ -144,13 +144,15 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
             variant: inputVariant,
-            inputProps: {
-              autoFocus: appliedUiSchemaOptions.focus,
-              type: 'text',
-              onFocus: onFocus,
-              onBlur: onBlurHandler,
+            slotProps: {
+              htmlInput: {
+                autoFocus: appliedUiSchemaOptions.focus,
+                type: 'text',
+                onFocus: onFocus,
+                onBlur: onBlurHandler,
+              },
+              inputLabel: data ? { shrink: true } : undefined,
             },
-            InputLabelProps: data ? { shrink: true } : undefined,
           },
         }}
       />

packages/material-renderers/src/controls/MaterialNativeControl.tsx

@@ -93,7 +93,7 @@ export const MaterialNativeControl = (props: ControlProps) => {
       onFocus={onFocus}
       onBlur={onBlur}
       helperText={!isValid ? errors : showDescription ? description : null}
-      InputLabelProps={{ shrink: true }}
+      slotProps={{ inputLabel: { shrink: true } }}
       value={inputValue}
       onChange={onChange}
     />