@rjsf/daisyui 6.0.0-beta.9 → 6.0.1

package/src/templates/ArrayFieldItemButtonsTemplate/ArrayFieldItemButtonsTemplate.tsx

@@ -1,9 +1,8 @@
-import { useMemo } from 'react';
 import {
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
-  ArrayFieldItemButtonsTemplateType,
+  ArrayFieldItemButtonsTemplateProps,
   buttonId,
 } from '@rjsf/utils';
 
@@ -14,27 +13,23 @@ export default function ArrayFieldItemButtonsTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemButtonsTemplateType<T, S, F>) {
+>(props: ArrayFieldItemButtonsTemplateProps<T, S, F>) {
   const {
     disabled,
     hasCopy,
     hasMoveDown,
     hasMoveUp,
     hasRemove,
-    idSchema,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
+    fieldPathId,
+    onCopyItem,
+    onRemoveItem,
+    onMoveDownItem,
+    onMoveUpItem,
     readonly,
     registry,
     uiSchema,
   } = props;
   const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
-  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
 
   const renderMany = [hasMoveUp || hasMoveDown, hasCopy, hasRemove].filter(Boolean).length > 1;
   const btnClass = renderMany ? 'join-item btn btn-sm px-2' : 'btn btn-sm px-2 rounded-sm';
@@ -45,18 +40,18 @@ export default function ArrayFieldItemButtonsTemplate<
       {(hasMoveUp || hasMoveDown) && (
         <>
           <MoveUpButton
-            id={buttonId<T>(idSchema, 'moveUp')}
+            id={buttonId(fieldPathId, 'moveUp')}
             className={`rjsf-array-item-move-up ${btnClass}`}
             disabled={disabled || readonly || !hasMoveUp}
-            onClick={onArrowUpClick}
+            onClick={onMoveUpItem}
             uiSchema={uiSchema}
             registry={registry}
           />
           <MoveDownButton
-            id={buttonId<T>(idSchema, 'moveDown')}
+            id={buttonId(fieldPathId, 'moveDown')}
             className={`rjsf-array-item-move-down ${btnClass}`}
             disabled={disabled || readonly || !hasMoveDown}
-            onClick={onArrowDownClick}
+            onClick={onMoveDownItem}
             uiSchema={uiSchema}
             registry={registry}
           />
@@ -64,20 +59,20 @@ export default function ArrayFieldItemButtonsTemplate<
       )}
       {hasCopy && (
         <CopyButton
-          id={buttonId<T>(idSchema, 'copy')}
+          id={buttonId(fieldPathId, 'copy')}
           className={`rjsf-array-item-copy ${btnClass}`}
           disabled={disabled || readonly}
-          onClick={onCopyClick}
+          onClick={onCopyItem}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
       {hasRemove && (
         <RemoveButton
-          id={buttonId<T>(idSchema, 'remove')}
+          id={buttonId(fieldPathId, 'remove')}
           className={`rjsf-array-item-remove ${removeBtnClass}`}
           disabled={disabled || readonly}
-          onClick={onRemoveClick}
+          onClick={onRemoveItem}
           uiSchema={uiSchema}
           registry={registry}
         />

package/src/templates/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,5 +1,5 @@
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -15,7 +15,7 @@ import {
  * - Positions items with z-index to create a stacked effect
  * - Places action buttons in an easily accessible location
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component with additional properties:
+ * @param props - The `ArrayFieldItemTemplateProps` props for the component with additional properties:
  * @param props.index - The position of this item in the array (optional)
  * @param props.totalItems - The total number of items in the array (optional)
  */
@@ -23,7 +23,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemTemplateType<T, S, F>) {
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
   const { children, buttonsProps, hasToolbar, registry, uiSchema, index, totalItems } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

package/src/templates/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -30,8 +30,9 @@ export default function ArrayFieldTemplate<T = any, S extends RJSFSchema = RJSFS
     canAdd,
     className,
     disabled,
-    idSchema,
+    fieldPathId,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     registry,
@@ -47,16 +48,12 @@ export default function ArrayFieldTemplate<T = any, S extends RJSFSchema = RJSFS
     registry as Registry<T, S, F>,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry as Registry<T, S, F>,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry as Registry<T, S, F>,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -78,26 +75,25 @@ export default function ArrayFieldTemplate<T = any, S extends RJSFSchema = RJSFS
   return (
     <div className={`array-field-template ${className}`}>
       <ArrayFieldTitleTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         title={uiOptions.title || title}
         schema={schema}
         uiSchema={uiSchema}
         required={required}
         registry={registry}
+        optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
       />
       <ArrayFieldDescriptionTemplate
-        idSchema={idSchema}
+        fieldPathId={fieldPathId}
         description={uiOptions.description || schema.description}
         schema={schema}
         uiSchema={uiSchema}
         registry={registry}
       />
       <div className='flex flex-col gap-4'>
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         <div className='rjsf-array-item-list'>
-          {items &&
-            items.map(({ key, ...itemProps }, index) => (
-              <ArrayFieldItemTemplate key={key} {...itemProps} index={index} totalItems={items.length} />
-            ))}
+          {items}
           {items && items.length === 0 && canAdd && (
             <div className='text-center italic text-base-content/70'>{TranslatableString.EmptyArray}</div>
           )}
@@ -105,7 +101,7 @@ export default function ArrayFieldTemplate<T = any, S extends RJSFSchema = RJSFS
         {canAdd && (
           <div className='flex justify-end'>
             <AddButton
-              id={buttonId<T>(idSchema, 'add')}
+              id={buttonId(fieldPathId, 'add')}
               className='rjsf-array-item-add btn btn-primary btn-sm'
               onClick={handleAddClick}
               disabled={disabled || readonly}

package/src/templates/ArrayFieldTitleTemplate/ArrayFieldTitleTemplate.tsx

@@ -10,6 +10,16 @@ export default function ArrayFieldTitleTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTitleProps<T, S, F>) {
-  const { title } = props;
-  return <h3 className='text-2xl font-bold'>{title}</h3>;
+  const { title, optionalDataControl } = props;
+  let heading = <h3 className='text-2xl font-bold'>{title}</h3>;
+  if (optionalDataControl) {
+    heading = (
+      <>
+        <div className='flex flex-col'>{heading}</div>
+        <div className='flex justify-end'>{optionalDataControl}</div>
+      </>
+    );
+  }
+
+  return heading;
 }

package/src/templates/BaseInputTemplate/BaseInputTemplate.tsx

@@ -30,6 +30,8 @@ export default function BaseInputTemplate<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
+    multiple,
     value,
     required,
     disabled,
@@ -47,10 +49,15 @@ export default function BaseInputTemplate<
   } = props;
 
   const inputProps = getInputProps<T, S, F>(schema, type, options);
-
+  let className = 'input input-bordered';
+  let isMulti = multiple;
+  if (type === 'file') {
+    isMulti = schema.type === 'array' || Boolean(options.multiple);
+    className = 'file-input w-full';
+  }
   // Extract step, min, max, accept from inputProps
   const { step, min, max, accept, ...rest } = inputProps;
-  const htmlInputProps = { step, min, max, accept, ...(schema.examples ? { list: examplesId<T>(id) } : undefined) };
+  const htmlInputProps = { step, min, max, accept, ...(schema.examples ? { list: examplesId(id) } : undefined) };
 
   const _onChange = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value === '' ? options.emptyValue : value),
@@ -75,23 +82,24 @@ export default function BaseInputTemplate<
         </label>
         <input
           id={id}
-          name={id}
+          name={htmlName || id}
           value={value || value === 0 ? value : ''}
           placeholder={placeholder}
           required={required}
           disabled={disabled || readonly}
           autoFocus={autofocus}
-          className='input input-bordered'
+          className={className}
+          multiple={isMulti}
           {...rest}
           {...htmlInputProps}
           onChange={onChangeOverride || _onChange}
           onBlur={_onBlur}
           onFocus={_onFocus}
-          aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+          aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
         />
       </div>
       {Array.isArray(schema.examples) && (
-        <datalist id={examplesId<T>(id)}>
+        <datalist id={examplesId(id)}>
           {(schema.examples as string[])
             .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
             .map((example: any) => {

package/src/templates/ButtonTemplates/AddButton.tsx

@@ -23,11 +23,11 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
     <div className='row'>
       <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
         <DaisyUIButton
+          title={translateString(TranslatableString.AddButton)}
           {...otherProps}
           iconType='info'
           icon={faPlus as IconDefinition}
           className='btn-add col-xs-12 btn-primary btn-primary-content'
-          title={translateString(TranslatableString.AddButton)}
           onClick={onClick}
           disabled={disabled}
           registry={registry}

package/src/templates/ButtonTemplates/IconButton.tsx

@@ -11,7 +11,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     registry: { translateString },
   } = props;
   return (
-    <DaisyUIButton {...props} title={translateString(TranslatableString.CopyButton)} icon={faCopy as IconDefinition} />
+    <DaisyUIButton title={translateString(TranslatableString.CopyButton)} {...props} icon={faCopy as IconDefinition} />
   );
 }
 
@@ -23,8 +23,8 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
   } = props;
   return (
     <DaisyUIButton
-      {...props}
       title={translateString(TranslatableString.MoveDownButton)}
+      {...props}
       icon={faArrowDown as IconDefinition}
     />
   );
@@ -38,8 +38,8 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return (
     <DaisyUIButton
-      {...props}
       title={translateString(TranslatableString.MoveUpButton)}
+      {...props}
       icon={faArrowUp as IconDefinition}
     />
   );
@@ -53,8 +53,8 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return (
     <DaisyUIButton
-      {...props}
       title={translateString(TranslatableString.RemoveButton)}
+      {...props}
       iconType='danger'
       icon={faTrash as IconDefinition}
     />

package/src/templates/FieldTemplate/FieldTemplate.tsx

@@ -1,4 +1,11 @@
-import { FieldTemplateProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+import {
+  FieldTemplateProps,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+} from '@rjsf/utils';
 
 /** The `FieldTemplate` component provides the main layout for each form field
  * with DaisyUI styling. It handles:
@@ -23,44 +30,66 @@ export default function FieldTemplate<
     label,
     children,
     errors,
-    formContext,
     formData,
     help,
     hideError,
     displayLabel,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     classNames,
-    // Destructure props we don't want to pass to div
-    onKeyChange,
-    onDropPropertyClick,
     uiSchema,
     schema,
     readonly,
     required,
+    registry,
+    // Destructure props we don't want to pass to div
+    description,
     rawErrors,
     rawHelp,
     rawDescription,
     hidden,
     onChange,
-    registry,
     ...divProps
   } = props;
 
   // Special handling for checkboxes - they should have the label after the input
   const isCheckbox = schema.type === 'boolean';
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions,
+  );
 
   return (
-    <div className={`field-template mb-3 ${classNames || ''}`} {...divProps}>
-      {displayLabel && !isCheckbox && (
-        <label htmlFor={id} className='label'>
-          <span className='label-text font-medium'>
-            {label}
-            {required && <span className='text-error ml-1'>*</span>}
-          </span>
-        </label>
-      )}
-      {children}
-      {errors}
-      {help}
-    </div>
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      disabled={divProps.disabled}
+      id={id}
+      label={label}
+      onKeyRename={onKeyRename}
+      onKeyRenameBlur={onKeyRenameBlur}
+      onRemoveProperty={onRemoveProperty}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <div className={`field-template mb-3 ${classNames || ''}`} {...divProps}>
+        {displayLabel && !isCheckbox && (
+          <label htmlFor={id} className='label'>
+            <span className='label-text font-medium'>
+              {label}
+              {required && <span className='text-error ml-1'>*</span>}
+            </span>
+          </label>
+        )}
+        {children}
+        {errors}
+        {help}
+      </div>
+    </WrapIfAdditionalTemplate>
   );
 }

package/src/templates/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -0,0 +1,15 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function MultiSchemaFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
+  const { optionSchemaField, selector } = props;
+  return (
+    <div className='p-4 border rounded-sm shadow-sm'>
+      <div className='mb-4'>{selector}</div>
+      {optionSchemaField}
+    </div>
+  );
+}

package/src/templates/MultiSchemaFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiSchemaFieldTemplate';
+export * from './MultiSchemaFieldTemplate';

package/src/templates/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -35,10 +35,11 @@ export default function ObjectFieldTemplate<
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -48,29 +49,31 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
 
   // Check if this is the root object
-  const isRoot = idSchema.$id === 'root';
+  const isRoot = fieldPathId.$id === 'root';
 
   return (
     <div className={`form-control ${isRoot ? 'bg-base-100 p-6 rounded-xl shadow-lg' : ''}`}>
       {title && (
         <TitleFieldTemplate
-          id={titleId<T>(idSchema)}
+          id={titleId(fieldPathId)}
           title={title}
           required={required}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
+          optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
         />
       )}
       {description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(idSchema)}
+          id={descriptionId(fieldPathId)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}
@@ -78,13 +81,14 @@ export default function ObjectFieldTemplate<
         />
       )}
       <div className={`grid grid-cols-1 gap-${description ? 3 : 4} ${isRoot ? '' : 'mb-4'}`}>
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element, index) =>
           element.hidden ? (
             element.content
           ) : (
             <div
-              key={`${idSchema.$id}-${element.name}-${index}`}
-              className={idSchema.$id === 'root' && element.name === 'tasks' ? 'mt-2' : ''}
+              key={`${fieldPathId.$id}-${element.name}-${index}`}
+              className={fieldPathId.$id === 'root' && element.name === 'tasks' ? 'mt-2' : ''}
             >
               {element.content}
             </div>
@@ -93,9 +97,9 @@ export default function ObjectFieldTemplate<
         {canExpand<T, S, F>(schema, uiSchema, formData) && (
           <div className='flex justify-end'>
             <AddButton
-              id={buttonId<T>(idSchema, 'add')}
+              id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand btn btn-primary btn-sm'
-              onClick={onAddClick(schema)}
+              onClick={onAddProperty}
               disabled={disabled || readonly}
               uiSchema={uiSchema}
               registry={registry}

package/src/templates/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,46 @@
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import { RemoveButton } from '../ButtonTemplates';
+import DaisyUIButton from '../ButtonTemplates/DaisyUIButton';
+
+/** The OptionalDataControlsTemplate renders one of three different states. If
+ * there is an `onAddClick()` function, it renders the "Add" button. If there is
+ * an `onRemoveClick()` function, it renders the "Remove" button. Otherwise it
+ * renders the "No data found" section. All of them use the `label` as either
+ * the `title` of buttons or simply outputting it.
+ *
+ * @param props - The `OptionalDataControlsTemplateProps` for the template
+ */
+export default function OptionalDataControlsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: OptionalDataControlsTemplateProps<T, S, F>) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return (
+      <DaisyUIButton
+        id={id}
+        registry={registry}
+        iconType='info'
+        icon={faPlus as IconDefinition}
+        className='rjsf-add-optional-data'
+        onClick={onAddClick}
+        title={label}
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <RemoveButton
+        id={id}
+        registry={registry}
+        className='rjsf-remove-optional-data'
+        onClick={onRemoveClick}
+        title={label}
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

package/src/templates/OptionalDataControlsTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OptionalDataControlsTemplate';
+export * from './OptionalDataControlsTemplate';

package/src/templates/Templates.tsx

@@ -11,7 +11,9 @@ import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
 import FieldTemplate from './FieldTemplate';
 import GridTemplate from './GridTemplate/GridTemplate';
+import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
+import OptionalDataControlsTemplate from './OptionalDataControlsTemplate';
 import TitleFieldTemplate from './TitleField/TitleField';
 import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
 
@@ -53,7 +55,9 @@ export function generateTemplates<
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate,
     WrapIfAdditionalTemplate,
   };

package/src/templates/TitleField/TitleField.tsx

@@ -14,13 +14,22 @@ import { TitleFieldProps, StrictRJSFSchema, RJSFSchema, FormContextType, getUiOp
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: TitleFieldProps<T, S, F>,
 ) {
-  const { id, title, uiSchema } = props;
+  const { id, title, uiSchema, optionalDataControl } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
 
+  let heading = <h2 className='text-3xl font-bold text-primary mb-2'>{uiOptions.title || title}</h2>;
+  if (optionalDataControl) {
+    heading = (
+      <div className='flex'>
+        <div className='flex flex-auto'>{heading}</div>
+        <div className='flex justify-end'>{optionalDataControl}</div>
+      </div>
+    );
+  }
   return (
     <div id={id} className='title-field mb-6'>
-      <h2 className='text-3xl font-bold text-primary mb-2'>{uiOptions.title || title}</h2>
-      <div className='divider divider-primary'></div>
+      {heading}
+      <div className='divider divider-primary my-0'></div>
     </div>
   );
 }