@rjsf/primereact 6.0.1 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/primereact",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "PrimeReact theme, fields and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -16,7 +16,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, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -26,7 +26,7 @@ export default function ArrayFieldItemTemplate<
   return (
     <div style={{ position: 'relative' }}>
       {hasToolbar && (
-        <div style={{ position: 'absolute', right: 0, top: '-10px' }}>
+        <div style={{ position: 'absolute', right: 0, top: displayLabel ? '24px' : 0 }}>
           {hasToolbar && (
             <div style={{ flexDirection: 'row' }}>
               <ArrayFieldItemButtonsTemplate {...buttonsProps} />

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,4 +1,5 @@
 import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import { RichHelp } from '@rjsf/core';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -9,10 +10,13 @@ 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) {
-    const id = helpId(fieldPathId);
-    return <small id={id}>{help}</small>;
+    return (
+      <small id={helpId(fieldPathId)}>
+        <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
+      </small>
+    );
   }
   return null;
 }

package/src/FieldTemplate/FieldTemplate.tsx

@@ -26,12 +26,13 @@ export default function FieldTemplate<
     return <div style={{ display: 'none' }}>{children}</div>;
   }
 
+  const isCheckbox = uiOptions.widget === 'checkbox';
   return (
     <WrapIfAdditionalTemplate {...props}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1rem' }}>
-        {displayLabel && <Label id={props.id} text={props.label} required={props.required} />}
+        {displayLabel && !isCheckbox && <Label id={props.id} text={props.label} required={props.required} />}
         {children}
-        {displayLabel && rawDescription && <small>{description}</small>}
+        {displayLabel && rawDescription && !isCheckbox && <small>{description}</small>}
         {errors}
         {help}
       </div>

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -23,10 +23,12 @@ export default function WrapIfAdditionalTemplate<
   style,
   children,
   disabled,
+  displayLabel,
   id,
   label,
   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 hasDescription = !!rawDescription;
+  const margin = hasDescription ? -8 : 12;
 
   if (!additional) {
     return (
@@ -48,13 +52,15 @@ export default function WrapIfAdditionalTemplate<
   return (
     <div
       className={classNames}
-      style={{ ...style, display: 'flex', alignItems: 'center', gap: '1rem' }}
+      style={{ ...style, display: 'flex', alignItems: 'flex-start', gap: '1rem' }}
       key={`${id}-key`}
     >
       <div style={{ flex: 1 }}>
-        <label htmlFor={`${id}-key`} style={{ display: 'block', marginBottom: '0.5rem' }}>
-          {keyLabel}
-        </label>
+        {displayLabel && (
+          <label htmlFor={`${id}-key`} style={{ display: 'block', marginBottom: '0.5rem' }}>
+            {keyLabel}
+          </label>
+        )}
         <InputText
           id={`${id}-key`}
           name={`${id}-key`}
@@ -66,7 +72,7 @@ export default function WrapIfAdditionalTemplate<
         />
       </div>
       <div style={{ flex: 1 }}>{children}</div>
-      <div>
+      <div style={displayLabel ? { alignSelf: 'center', marginTop: `${margin}px` } : undefined}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'