@rjsf/mui 6.0.2 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "main": "./dist/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -20,7 +20,7 @@ export default function ArrayFieldItemTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldItemTemplateProps<T, S, F>) {
-  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const { children, buttonsProps, hasDescription, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -44,7 +44,7 @@ export default function ArrayFieldItemTemplate<
         </Box>
       </Grid>
       {hasToolbar && (
-        <Grid>
+        <Grid sx={{ mt: hasDescription ? -5 : -1.5 }}>
           <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
         </Grid>
       )}

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,5 +1,6 @@
-import FormHelperText from '@mui/material/FormHelperText';
+import { RichHelp } from '@rjsf/core';
 import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import FormHelperText from '@mui/material/FormHelperText';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -10,14 +11,14 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema, registry } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
+
   return (
-    <FormHelperText component='div' id={id}>
-      {help}
+    <FormHelperText component='div' id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>
+      <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </FormHelperText>
   );
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -62,6 +62,8 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
+      displayLabel={displayLabel}
+      rawDescription={rawDescription}
       onKeyRename={onKeyRename}
       onKeyRenameBlur={onKeyRenameBlur}
       onRemoveProperty={onRemoveProperty}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -72,7 +72,7 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid container={true} spacing={2} style={{ marginTop: '10px' }}>
+      <Grid container spacing={2} style={{ marginTop: '10px' }}>
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element, index) =>
           // Remove the <Grid> if the inner element is hidden as the <Grid>
@@ -85,21 +85,21 @@ export default function ObjectFieldTemplate<
             </Grid>
           ),
         )}
-        {canExpand<T, S, F>(schema, uiSchema, formData) && (
-          <Grid container justifyContent='flex-end'>
-            <Grid>
-              <AddButton
-                id={buttonId(fieldPathId, 'add')}
-                className='rjsf-object-property-expand'
-                onClick={onAddProperty}
-                disabled={disabled || readonly}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            </Grid>
-          </Grid>
-        )}
       </Grid>
+      {canExpand<T, S, F>(schema, uiSchema, formData) && (
+        <Grid container justifyContent='flex-end'>
+          <Grid>
+            <AddButton
+              id={buttonId(fieldPathId, 'add')}
+              className='rjsf-object-property-expand'
+              onClick={onAddProperty}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Grid>
+        </Grid>
+      )}
     </>
   );
 }

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -28,6 +28,7 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
+    displayLabel,
     onKeyRenameBlur,
     onRemoveProperty,
     readonly,
@@ -57,12 +58,12 @@ export default function WrapIfAdditionalTemplate<
   }
 
   return (
-    <Grid container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
-      <Grid size='auto'>
+    <Grid container key={`${id}-key`} alignItems='flex-start' spacing={2} className={classNames} style={style}>
+      <Grid size={5.5}>
         <TextField
           fullWidth={true}
           required={required}
-          label={keyLabel}
+          label={displayLabel ? keyLabel : undefined}
           defaultValue={label}
           disabled={disabled || readonly}
           id={`${id}-key`}
@@ -71,8 +72,8 @@ export default function WrapIfAdditionalTemplate<
           type='text'
         />
       </Grid>
-      <Grid size='auto'>{children}</Grid>
-      <Grid>
+      <Grid size={5.5}>{children}</Grid>
+      <Grid sx={{ mt: 1.5 }}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'