@rjsf/daisyui 6.0.1 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/daisyui",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Daisy UI components for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",

package/src/templates/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -24,7 +24,7 @@ export default function ArrayFieldItemTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldItemTemplateProps<T, S, F>) {
-  const { children, buttonsProps, hasToolbar, registry, uiSchema, index, totalItems } = props;
+  const { children, buttonsProps, displayLabel, hasToolbar, registry, uiSchema, index, totalItems } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
     'ArrayFieldItemButtonsTemplate',
@@ -40,13 +40,14 @@ export default function ArrayFieldItemTemplate<
   const zIndex = index === undefined ? '' : 'z-' + (10 - Math.min(index, 9));
 
   return (
-    <fieldset className={`fieldset bg-base-100 border border-base-300 p-4 ${borderRadius} ${marginBottom} ${zIndex}`}>
+    <fieldset
+      className={`fieldset bg-base-100 border border-base-300 p-4 flex ${borderRadius} ${marginBottom} ${zIndex}`}
+    >
       {/* Main content area */}
       {children}
-
       {/* Action buttons */}
       {hasToolbar && (
-        <div className='flex justify-end mt-2'>
+        <div className={`flex justify-end ${displayLabel ? 'mt-5' : 'mt-1'}`}>
           <ArrayFieldItemButtonsTemplate {...buttonsProps} />
         </div>
       )}

package/src/templates/BaseInputTemplate/BaseInputTemplate.tsx

@@ -49,11 +49,11 @@ export default function BaseInputTemplate<
   } = props;
 
   const inputProps = getInputProps<T, S, F>(schema, type, options);
-  let className = 'input input-bordered';
+  let className = 'input input-bordered w-full';
   let isMulti = multiple;
   if (type === 'file') {
     isMulti = schema.type === 'array' || Boolean(options.multiple);
-    className = 'file-input w-full';
+    className = 'file-input';
   }
   // Extract step, min, max, accept from inputProps
   const { step, min, max, accept, ...rest } = inputProps;

package/src/templates/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,4 +1,5 @@
-import { FieldHelpProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+import { FieldHelpProps, StrictRJSFSchema, RJSFSchema, FormContextType, helpId } from '@rjsf/utils';
+import { RichHelp } from '@rjsf/core';
 
 /** The `FieldHelpTemplate` component renders help text for a specific form field
  * with DaisyUI styling. It displays the help text in a subtle gray color and smaller size
@@ -14,10 +15,13 @@ export default function FieldHelpTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldHelpProps<T, S, F>) {
-  const { help } = props;
+  const { help, uiSchema, registry, fieldPathId } = props;
+  if (!help) {
+    return null;
+  }
   return (
-    <div className='rjsf-field-help-template text-gray-500 text-sm'>
-      <div>{help}</div>
+    <div id={helpId(fieldPathId)} className='rjsf-field-help-template text-gray-500 text-sm'>
+      <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </div>
   );
 }

package/src/templates/FieldTemplate/FieldTemplate.tsx

@@ -68,6 +68,7 @@ export default function FieldTemplate<
       disabled={divProps.disabled}
       id={id}
       label={label}
+      displayLabel={displayLabel}
       onKeyRename={onKeyRename}
       onKeyRenameBlur={onKeyRenameBlur}
       onRemoveProperty={onRemoveProperty}
@@ -87,6 +88,7 @@ export default function FieldTemplate<
           </label>
         )}
         {children}
+        {displayLabel && description ? description : null}
         {errors}
         {help}
       </div>

package/src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -24,6 +24,7 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
+    displayLabel,
     readonly,
     required,
     schema,
@@ -31,6 +32,7 @@ export default function WrapIfAdditionalTemplate<
     onKeyRename,
     onKeyRenameBlur,
     onRemoveProperty,
+    rawDescription,
     registry,
     ...rest
   } = props;
@@ -40,18 +42,22 @@ export default function WrapIfAdditionalTemplate<
   // Button templates are not overridden in the uiSchema
   const { RemoveButton } = templates.ButtonTemplates;
   const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const marginDesc = rawDescription ? 10 : 0;
+  const margin = displayLabel ? 32 + marginDesc : 10;
 
   if (!additional) {
-    return <div className={classNames}>{children}</div>;
+    return <div className={`flex-grow ${classNames}`}>{children}</div>;
   }
 
   return (
     <div className={`wrap-if-additional-template ${classNames}`} {...rest}>
       <div className='flex items-baseline' style={{ justifyContent: 'space-between' }}>
         <div>
-          <label htmlFor={`${id}-key`} className='label'>
-            <span className='label-text'>{keyLabel}</span>
-          </label>
+          {displayLabel && (
+            <label htmlFor={`${id}-key`} className='label'>
+              <span className='label-text'>{keyLabel}</span>
+            </label>
+          )}
           <input
             type='text'
             className='input input-bordered'
@@ -62,7 +68,7 @@ export default function WrapIfAdditionalTemplate<
           />
         </div>
         {children}
-        <div className='flex self-center'>
+        <div className='flex self-start' style={{ marginTop: `${margin}px` }}>
           <RemoveButton
             id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove'