@rjsf/react-bootstrap 6.0.2 → 6.1.0

package/package.json

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

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -15,7 +15,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, displayLabel, hasDescription, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -28,13 +28,14 @@ export default function ArrayFieldItemTemplate<
     paddingRight: 6,
     fontWeight: 'bold',
   };
+  const padding = hasDescription ? 'pb-1' : 'pt-4 mt-2';
   return (
     <div>
       <Row className='mb-2  d-flex align-items-center'>
-        <Col xs='9' lg='9'>
+        <Col xs='8' md='9' lg='10'>
           {children}
         </Col>
-        <Col xs='3' lg='3' className='py-4'>
+        <Col xs='4' md='3' lg='2' className={displayLabel ? padding : 'py-4'}>
           {hasToolbar && (
             <div className='d-flex flex-row'>
               <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -72,8 +72,8 @@ export default function ArrayFieldTemplate<
             {canAdd && (
               <Container className=''>
                 <Row className='mt-2'>
-                  <Col xs={9}></Col>
-                  <Col xs={3} className='py-4 col-lg-3 col-3'>
+                  <Col xs={9} md={10} lg={11}></Col>
+                  <Col xs={3} md={2} lg={1} className='py-4'>
                     <AddButton
                       id={buttonId(fieldPathId, 'add')}
                       className='rjsf-array-item-add'

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,4 +1,5 @@
 import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { RichHelp } from '@rjsf/core';
 import Form from 'react-bootstrap/Form';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
@@ -10,14 +11,13 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { fieldPathId, help, hasErrors } = props;
+  const { fieldPathId, help, uiSchema, registry, hasErrors } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
   return (
-    <Form.Text className={hasErrors ? 'text-danger' : 'text-muted'} id={id}>
-      {help}
+    <Form.Text id={helpId(fieldPathId)} className={hasErrors ? 'text-danger' : 'text-muted'}>
+      <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </Form.Text>
   );
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -53,6 +53,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

@@ -77,7 +77,7 @@ export default function ObjectFieldTemplate<
         ))}
         {canExpand(schema, uiSchema, formData) ? (
           <Row>
-            <Col xs={{ offset: 9, span: 3 }} className='py-4'>
+            <Col xs={{ offset: 11, span: 1 }} className='py-0.5'>
               <AddButton
                 id={buttonId(fieldPathId, 'add')}
                 onClick={onAddProperty}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -23,8 +23,10 @@ export default function WrapIfAdditionalTemplate<
   disabled,
   id,
   label,
+  displayLabel,
   onRemoveProperty,
   onKeyRenameBlur,
+  rawDescription,
   readonly,
   required,
   schema,
@@ -36,6 +38,8 @@ export default function WrapIfAdditionalTemplate<
   const { RemoveButton } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const descPadding = rawDescription ? 1 : 0;
+  const descMargin = rawDescription ? -24 : 0;
 
   if (!additional) {
     return (
@@ -46,12 +50,14 @@ export default function WrapIfAdditionalTemplate<
   }
 
   const keyId = `${id}-key`;
+  const margin = displayLabel ? 12 + descMargin : 0;
+  const padding = displayLabel ? 4 + descPadding : 1;
 
   return (
     <Row className={classNames} style={style} key={keyId}>
       <Col xs={5}>
         <Form.Group>
-          <Form.Label htmlFor={keyId}>{keyLabel}</Form.Label>
+          {displayLabel && <Form.Label htmlFor={keyId}>{keyLabel}</Form.Label>}
           <Form.Control
             required={required}
             defaultValue={label}
@@ -63,8 +69,8 @@ export default function WrapIfAdditionalTemplate<
           />
         </Form.Group>
       </Col>
-      <Col xs={5}>{children}</Col>
-      <Col xs={2} className='py-4 d-grid gap-2'>
+      <Col xs={6}>{children}</Col>
+      <Col xs={1} className={`py-${padding} d-grid gap-2`} style={{ marginTop: `${margin}px` }}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove w-100'