@rjsf/mui 6.0.0-beta.8 → 6.0.0-beta.9

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0-beta.9",
   "main": "./dist/index.js",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "type": "module",
-  "description": "Material UI 5 theme, fields and widgets for react-jsonschema-form",
+  "description": "Material UI 7 theme, fields and widgets for react-jsonschema-form",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
@@ -63,8 +63,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^6.0.0",
-    "@mui/material": "^6.0.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "@rjsf/core": "^6.0.0-beta",
     "@rjsf/utils": "^6.0.0-beta",
     "react": ">=18"
@@ -73,12 +73,12 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^6.4.11",
-    "@mui/material": "^6.4.11",
-    "@rjsf/core": "^6.0.0-beta.8",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.8",
-    "@rjsf/utils": "^6.0.0-beta.8",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.8",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "@rjsf/core": "^6.0.0-beta.9",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.9",
+    "@rjsf/utils": "^6.0.0-beta.9",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.9",
     "eslint": "^8.56.0"
   },
   "publishConfig": {

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import Box from '@mui/material/Box';
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import {
   ArrayFieldItemTemplateType,
@@ -35,19 +35,19 @@ export default function ArrayFieldItemTemplate<
     minWidth: 0,
   };
   return (
-    <Grid2 container={true} alignItems='center'>
-      <Grid2 size='auto' style={{ overflow: 'auto' }}>
+    <Grid container={true} alignItems='center'>
+      <Grid size='auto' style={{ overflow: 'auto' }}>
         <Box mb={2}>
           <Paper elevation={2}>
             <Box p={2}>{children}</Box>
           </Paper>
         </Box>
-      </Grid2>
+      </Grid>
       {hasToolbar && (
-        <Grid2>
+        <Grid>
           <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
-        </Grid2>
+        </Grid>
       )}
-    </Grid2>
+    </Grid>
   );
 }

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import {
   getTemplate,
@@ -66,8 +66,8 @@ export default function ArrayFieldTemplate<
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (
-          <Grid2 container justifyContent='flex-end'>
-            <Grid2>
+          <Grid container justifyContent='flex-end'>
+            <Grid>
               <Box mt={2}>
                 <AddButton
                   id={buttonId<T>(idSchema, 'add')}
@@ -78,8 +78,8 @@ export default function ArrayFieldTemplate<
                   registry={registry}
                 />
               </Box>
-            </Grid2>
-          </Grid2>
+            </Grid>
+          </Grid>
         )}
       </Box>
     </Paper>

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -76,14 +76,13 @@ export default function BaseInputTemplate<
         autoFocus={autofocus}
         required={required}
         disabled={disabled || readonly}
-        inputProps={htmlInputProps}
+        slotProps={{ htmlInput: htmlInputProps, inputLabel: DisplayInputLabelProps }}
         {...rest}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        InputLabelProps={DisplayInputLabelProps}
         {...(textFieldProps as TextFieldProps)}
         aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
       />

package/src/GridTemplate/GridTemplate.tsx

@@ -1,16 +1,16 @@
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import { GridTemplateProps } from '@rjsf/utils';
 
 /** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the
- * extra props provided by the caller, which are spread directly on the `Grid2`.
+ * extra props provided by the caller, which are spread directly on the `Grid`.
  *
  * @param props - The GridTemplateProps, including the extra props containing the mui grid positioning details
  */
 export default function GridTemplate(props: GridTemplateProps) {
   const { children, column, ...rest } = props;
   return (
-    <Grid2 container={!column} {...rest}>
+    <Grid container={!column} {...rest}>
       {children}
-    </Grid2>
+    </Grid>
   );
 }

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import {
   FormContextType,
   ObjectFieldTemplateProps,
@@ -69,21 +69,21 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid2 container={true} spacing={2} style={{ marginTop: '10px' }}>
+      <Grid container={true} spacing={2} style={{ marginTop: '10px' }}>
         {properties.map((element, index) =>
-          // Remove the <Grid2> if the inner element is hidden as the <Grid2>
+          // Remove the <Grid> if the inner element is hidden as the <Grid>
           // itself would otherwise still take up space.
           element.hidden ? (
             element.content
           ) : (
-            <Grid2 size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }}>
+            <Grid size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }}>
               {element.content}
-            </Grid2>
+            </Grid>
           ),
         )}
         {canExpand<T, S, F>(schema, uiSchema, formData) && (
-          <Grid2 container justifyContent='flex-end'>
-            <Grid2>
+          <Grid container justifyContent='flex-end'>
+            <Grid>
               <AddButton
                 id={buttonId<T>(idSchema, 'add')}
                 className='rjsf-object-property-expand'
@@ -92,10 +92,10 @@ export default function ObjectFieldTemplate<
                 uiSchema={uiSchema}
                 registry={registry}
               />
-            </Grid2>
-          </Grid2>
+            </Grid>
+          </Grid>
         )}
-      </Grid2>
+      </Grid>
     </>
   );
 }

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FocusEvent } from 'react';
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import {
   ADDITIONAL_PROPERTY_FLAG,
@@ -59,8 +59,8 @@ export default function WrapIfAdditionalTemplate<
   const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
 
   return (
-    <Grid2 container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
-      <Grid2 size='auto'>
+    <Grid container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
+      <Grid size='auto'>
         <TextField
           fullWidth={true}
           required={required}
@@ -72,9 +72,9 @@ export default function WrapIfAdditionalTemplate<
           onBlur={!readonly ? handleBlur : undefined}
           type='text'
         />
-      </Grid2>
-      <Grid2 size='auto'>{children}</Grid2>
-      <Grid2>
+      </Grid>
+      <Grid size='auto'>{children}</Grid>
+      <Grid>
         <RemoveButton
           id={buttonId<T>(id, 'remove')}
           className='rjsf-object-property-remove'
@@ -85,7 +85,7 @@ export default function WrapIfAdditionalTemplate<
           uiSchema={uiSchema}
           registry={registry}
         />
-      </Grid2>
-    </Grid2>
+      </Grid>
+    </Grid>
   );
 }