@rachelallyson/hero-hook-form 2.13.0 → 2.15.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.15.0] - 2026-02-02
+
+### Added
+
+- **ConfigProvider: autocomplete defaults** – `HeroHookFormDefaultsConfig` and `useHeroHookFormDefaults()` support `defaults.autocomplete`. `AutocompleteField` spreads these defaults so Autocomplete respects the same global styling (color, size, variant, radius, labelPlacement) as Input, Textarea, and Select when using `HeroHookFormProvider`.
+- **createFieldArrayCustomConfig: readOnly** – New `readOnly?: boolean` option. When true, the add button (and empty-state add block) is not rendered. `readOnly` is passed into each item’s props so custom `renderItem` / `getItemFieldConfig` can hide remove/reorder controls. Use instead of `renderAddButton: () => null` for display-only arrays.
+
+### Fixed
+
+- **ServerActionForm autocomplete options** – `AutocompleteItem` for autocomplete fields now receives `textValue={item.label ?? String(item.value)}` so options have a stable plain-text value for accessibility, type-to-select, and Cypress/automation even when using custom `renderItem`.
+
+### Changed
+
+- **AutocompleteField** – Uses `useHeroHookFormDefaults()` and spreads `defaults.autocomplete` so the control picks up provider styling (e.g. `HeroHookFormProvider` with `defaults.common` or `defaults.autocomplete`).
+- **Example: Custom Field Array Demo** – Uses `readOnly: true` instead of `renderAddButton: () => null`. E2E test added to assert “Add Item” is not shown when readOnly is true.
+
+## [2.14.0] - 2026-01-29
+
+### Added
+
+- **Dynamic custom fields in field arrays** – When each array item can be a different control type (e.g. member custom field values: one row is a date, another a dropdown, another short text), you can use **getItemFieldConfig** with **createCustomFieldConfigForItem** instead of wiring multiple conditionals yourself.
+  - **getItemFieldConfig** – Pass this to `createFieldArrayCustomConfig`; for each item you return a single field config (or `null`). The library renders one field per item for you.
+  - **createCustomFieldConfigForItem(name, def)** – Given a field path and a definition with `fieldType` (e.g. `'DATE'`, `'SHORT_TEXT'`, `'LONG_TEXT'`, `'NUMBER'`, `'DROPDOWN'`), `name` (label), and optional `options` for dropdowns (newline-separated string or `{ label, value }[]`), returns the right config so you don’t write a switch or five conditionals per item.
+  - Use it in ZodForm by adding a `createFieldArrayCustomConfig` with `getItemFieldConfig: ({ field, index }) => createCustomFieldConfigForItem(\`items.\${index}.value\`, { fieldType: def.fieldType, name: def.name, options: def.options })` after looking up the definition for that item (e.g. by `customFieldId`). See the **Custom Field Array Demo** in the example app for a full example.
+
 ## [2.13.0] - 2026-01-29
 
 ### Added

package/dist/index.d.ts

@@ -4179,6 +4179,67 @@ interface ArraySyncResult<TItem> {
  */
 declare function syncArrays<TItem>(options: ArraySyncOptions<TItem>): ArraySyncResult<TItem>;
 
+/**
+ * Supported input types for dynamic custom fields (e.g. member custom field values).
+ * Use with createCustomFieldConfigForItem so each array item can render the right control.
+ */
+type CustomFieldInputType = "DATE" | "DROPDOWN" | "LONG_TEXT" | "NUMBER" | "SHORT_TEXT";
+/**
+ * Minimal field definition for creating a single field config by type.
+ * Matches common patterns where each array item has a type and label (e.g. customFieldId → field def).
+ */
+interface CustomFieldDef {
+    fieldType: CustomFieldInputType;
+    name: string;
+    /** For DROPDOWN: newline-separated string or array of { label, value } */
+    options?: string | {
+        label: string;
+        value: string | number;
+    }[];
+}
+/**
+ * Create the right ZodFormFieldConfig for a single custom field by type.
+ * Use inside createFieldArrayCustomConfig getItemFieldConfig (or renderItem) so each
+ * array item renders one control (date, short text, long text, number, or dropdown)
+ * instead of multiple conditionals.
+ *
+ * @param name - Form path for the value (e.g. `customFieldValues.${index}.value`)
+ * @param def - Field definition with fieldType, name (label), and optional options for DROPDOWN
+ * @returns ZodFormFieldConfig for use with FormField
+ *
+ * @example
+ * ```tsx
+ * createFieldArrayCustomConfig({
+ *   name: 'customFieldValues',
+ *   getItemFieldConfig: ({ field, form, index }) => {
+ *     const fieldDef = fields.find(f => f.id === field.customFieldId);
+ *     if (!fieldDef) return null;
+ *     return createCustomFieldConfigForItem(
+ *       `customFieldValues.${index}.value`,
+ *       { fieldType: fieldDef.fieldType, name: fieldDef.name, options: fieldDef.options }
+ *     );
+ *   },
+ *   defaultItem: () => ({ customFieldId: '', value: '' }),
+ * });
+ * ```
+ */
+declare function createCustomFieldConfigForItem<T extends FieldValues>(name: Path<T>, def: CustomFieldDef): ZodFormFieldConfig<T>;
+/** Props passed to renderItem or getItemFieldConfig for each array item */
+interface FieldArrayItemRenderProps<TFieldValues extends FieldValues, TArrayPath extends ArrayPath<TFieldValues>> {
+    index: number;
+    field: FieldArrayWithId<TFieldValues, TArrayPath>;
+    fields: FieldArrayWithId<TFieldValues, TArrayPath>[];
+    form: UseFormReturn<TFieldValues>;
+    control: Control<TFieldValues>;
+    errors: FieldErrors<TFieldValues>;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onRemove: () => void;
+    /** When true, add/remove/reorder are hidden; use to hide your own buttons */
+    readOnly?: boolean;
+}
 /**
  * Options for creating a custom field array config
  *
@@ -4189,20 +4250,15 @@ interface CreateFieldArrayCustomConfigOptions<TFieldValues extends FieldValues>
     name: ArrayPath<TFieldValues>;
     /** Optional label for the field array */
     label?: string;
-    /** Render function for each array item */
-    renderItem: (props: {
-        index: number;
-        field: FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>>;
-        fields: FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>>[];
-        form: UseFormReturn<TFieldValues>;
-        control: Control<TFieldValues>;
-        errors: FieldErrors<TFieldValues>;
-        canMoveUp: boolean;
-        canMoveDown: boolean;
-        onMoveUp: () => void;
-        onMoveDown: () => void;
-        onRemove: () => void;
-    }) => React$1.ReactNode;
+    /**
+     * Return a single field config for this item; the array helper will render one FormField.
+     * Use with createCustomFieldConfigForItem when each item's control type depends on item data
+     * (e.g. custom fields: look up field def by customFieldId, then createCustomFieldConfigForItem).
+     * When provided, renderItem is optional.
+     */
+    getItemFieldConfig?: (props: FieldArrayItemRenderProps<TFieldValues, ArrayPath<TFieldValues>>) => ZodFormFieldConfig<TFieldValues> | null;
+    /** Render function for each array item (optional if getItemFieldConfig is provided) */
+    renderItem?: (props: FieldArrayItemRenderProps<TFieldValues, ArrayPath<TFieldValues>>) => React$1.ReactNode;
     /** Optional render function for add button */
     renderAddButton?: (props: {
         onAdd: () => void;
@@ -4216,6 +4272,8 @@ interface CreateFieldArrayCustomConfigOptions<TFieldValues extends FieldValues>
     max?: number;
     /** Enable reordering of array items */
     enableReordering?: boolean;
+    /** When true, no add button is shown; readOnly is passed to renderItem/getItemFieldConfig so you can hide remove/reorder */
+    readOnly?: boolean;
     /** Optional className */
     className?: string;
 }
@@ -4379,4 +4437,4 @@ declare const validationUtils: {
     }>;
 };
 
-export { AdvancedFieldBuilder, type ArraySyncOptions, type ArraySyncResult, type AutocompleteDefaults, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type AutocompletePassthroughProps, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldConfig, type CheckboxGroupFieldProps, type CheckboxGroupPassthroughProps, type CheckboxPassthroughProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CreateFieldArrayCustomConfigOptions, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DateInputPassthroughProps, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldCreationParams, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, type FileInputPassthroughProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormFieldType, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type InputPassthroughProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type RadioGroupPassthroughProps, type SelectDefaults, SelectField, type SelectFieldProps, type SelectPassthroughProps, ServerActionForm, type ServerFieldError, type ServerFormError, SimpleForm, type SimpleFormProps, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type SliderPassthroughProps, type StringArrayFieldConfig, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type SwitchPassthroughProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, type TextareaPassthroughProps, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayCustomConfig, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, memorySafeFieldArray, pathToString, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, suggestGarbageCollection, syncArrays, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFieldArrayMemoryCleanup, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useLazyFieldArrayRegistration, useLazyFieldRegistration, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
+export { AdvancedFieldBuilder, type ArraySyncOptions, type ArraySyncResult, type AutocompleteDefaults, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type AutocompletePassthroughProps, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldConfig, type CheckboxGroupFieldProps, type CheckboxGroupPassthroughProps, type CheckboxPassthroughProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CreateFieldArrayCustomConfigOptions, type CustomFieldConfig, type CustomFieldDef, type CustomFieldInputType, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DateInputPassthroughProps, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldArrayItemRenderProps, type FieldBaseProps, type FieldCreationParams, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, type FileInputPassthroughProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, type FormFieldType, type FormProps, FormProvider, FormStatus, type FormStatusProps, type FormStep, type FormSubmissionState, type FormTestUtils, FormToast, type FormToastProps, type FormValidationError, type HeroHookFormDefaultsConfig, HeroHookFormProvider, type HeroHookFormProviderProps, type InputDefaults, InputField, type InputFieldProps, type InputPassthroughProps, type RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type RadioGroupPassthroughProps, type SelectDefaults, SelectField, type SelectFieldProps, type SelectPassthroughProps, ServerActionForm, type ServerFieldError, type ServerFormError, SimpleForm, type SimpleFormProps, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type SliderPassthroughProps, type StringArrayFieldConfig, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type SwitchPassthroughProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, type TextareaPassthroughProps, TypeInferredBuilder, type UseDebouncedValidationOptions, type UseEnhancedFormStateOptions, type UseInferredFormOptions, type ValidationUtils, type WithControl, type WizardFormConfig, ZodForm, type ZodFormConfig, type ZodFormFieldConfig, applyServerErrors, asyncValidation, commonValidations, createAdvancedBuilder, createBasicFormBuilder, createCustomFieldConfigForItem, createDateSchema, createEmailSchema, createField, createFieldArrayBuilder, createFieldArrayCustomConfig, createFieldArrayItemBuilder, createFileSchema, createFormTestUtils, createFutureDateSchema, createMaxLengthSchema, createMinLengthSchema, createMockFormData, createMockFormErrors, createNestedPathBuilder, createNumberRangeSchema, createOptimizedFieldHandler, createPasswordSchema, createPastDateSchema, createPhoneSchema, createRequiredCheckboxSchema, createRequiredSchema, createTypeInferredBuilder, createUrlSchema, createZodFormConfig, crossFieldValidation, debounce, deepEqual, defineInferredForm, errorMessages, field, getFieldError, getFormErrors, hasFieldError, hasFormErrors, memorySafeFieldArray, pathToString, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, suggestGarbageCollection, syncArrays, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFieldArrayMemoryCleanup, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useLazyFieldArrayRegistration, useLazyFieldRegistration, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };

package/dist/index.js

@@ -231,8 +231,14 @@ function useHeroHookFormDefaults() {
     size: "md",
     variant: "bordered"
   };
+  const autocompleteBase = {
+    radius: "md",
+    size: "md",
+    variant: "bordered"
+  };
   return {
     autocomplete: {
+      ...autocompleteBase,
       ...commonAutocomplete,
       ...cfg.autocomplete ?? {}
     },
@@ -486,11 +492,16 @@ function AutocompleteField(props) {
           { isDisabled, label },
           { allowsCustomValue }
         );
+        const autocompleteMerged = { ...defaults.autocomplete };
+        for (const [key, value] of Object.entries(rest)) {
+          if (value !== void 0) {
+            autocompleteMerged[key] = value;
+          }
+        }
         return /* @__PURE__ */ React2.createElement("div", { className }, /* @__PURE__ */ React2.createElement(
           Autocomplete,
           {
-            ...defaults.autocomplete,
-            ...rest,
+            ...autocompleteMerged,
             ...defaultItems && {
               defaultItems
             },
@@ -3193,7 +3204,14 @@ function ServerActionField({
           onInputChange: setValue,
           items
         },
-        items.map((item) => /* @__PURE__ */ React21.createElement(AutocompleteItem, { key: String(item.value) }, typeof stringConfig.renderItem === "function" ? stringConfig.renderItem(item) : item.label))
+        items.map((item) => /* @__PURE__ */ React21.createElement(
+          AutocompleteItem,
+          {
+            key: String(item.value),
+            textValue: item.label ?? String(item.value)
+          },
+          typeof stringConfig.renderItem === "function" ? stringConfig.renderItem(item) : item.label
+        ))
       );
     }
     case "slider": {
@@ -5785,18 +5803,53 @@ function syncArrays(options) {
 import React27 from "react";
 import { useFieldArray as useFieldArray2 } from "react-hook-form";
 import { Button as Button6 } from "@heroui/react";
+function parseDropdownOptions(options) {
+  if (options == null) return [];
+  if (Array.isArray(options)) return options;
+  return options.split("\n").map((o) => o.trim()).filter((o) => o.length > 0).map((o) => ({ label: o, value: o }));
+}
+function createCustomFieldConfigForItem(name, def) {
+  const { fieldType, name: label, options } = def;
+  switch (fieldType) {
+    case "DATE":
+      return FormFieldHelpers.date(name, label, { granularity: "day" });
+    case "SHORT_TEXT":
+      return FormFieldHelpers.input(name, label);
+    case "LONG_TEXT":
+      return FormFieldHelpers.textarea(name, label);
+    case "NUMBER":
+      return FormFieldHelpers.input(name, label, { type: "number" });
+    case "DROPDOWN":
+      return FormFieldHelpers.select(
+        name,
+        label,
+        parseDropdownOptions(options)
+      );
+    default: {
+      void fieldType;
+      return FormFieldHelpers.input(name, label);
+    }
+  }
+}
 function createFieldArrayCustomConfig(options) {
   const {
     className,
     defaultItem,
     enableReordering = false,
+    getItemFieldConfig,
     label,
     max = 10,
     min = 0,
     name,
+    readOnly = false,
     renderAddButton,
     renderItem
   } = options;
+  if (!getItemFieldConfig && !renderItem) {
+    throw new Error(
+      "createFieldArrayCustomConfig: provide either getItemFieldConfig or renderItem"
+    );
+  }
   return {
     className,
     label,
@@ -5834,24 +5887,42 @@ function createFieldArrayCustomConfig(options) {
           move(index, index + 1);
         }
       };
+      const submissionState = {
+        error: void 0,
+        isSubmitted: form.formState.isSubmitted,
+        isSubmitting: form.formState.isSubmitting,
+        isSuccess: false
+      };
+      const itemProps = (index) => ({
+        canMoveDown: enableReordering && index < fields.length - 1,
+        canMoveUp: enableReordering && index > 0,
+        control,
+        errors,
+        field: fields[index],
+        fields,
+        form,
+        index,
+        onMoveDown: () => handleMoveDown(index),
+        onMoveUp: () => handleMoveUp(index),
+        onRemove: () => handleRemove(index),
+        readOnly
+      });
       return /* @__PURE__ */ React27.createElement("div", { className }, /* @__PURE__ */ React27.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => {
-        const canMoveUp = enableReordering && index > 0;
-        const canMoveDown = enableReordering && index < fields.length - 1;
-        return /* @__PURE__ */ React27.createElement(React27.Fragment, { key: field2.id }, renderItem({
-          canMoveDown,
-          canMoveUp,
-          control,
-          errors,
-          // fields from useFieldArray are already typed correctly
-          field: field2,
-          fields,
-          form,
-          index,
-          onMoveDown: () => handleMoveDown(index),
-          onMoveUp: () => handleMoveUp(index),
-          onRemove: () => handleRemove(index)
-        }));
-      }), fields.length === 0 && renderAddButton ? /* @__PURE__ */ React27.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React27.createElement("p", null, "No ", label?.toLowerCase() || "items", " added yet."), renderAddButton({ canAdd, onAdd: handleAdd })) : null, fields.length > 0 && renderAddButton ? renderAddButton({ canAdd, onAdd: handleAdd }) : canAdd && /* @__PURE__ */ React27.createElement(
+        if (getItemFieldConfig) {
+          const config = getItemFieldConfig(itemProps(index));
+          if (!config) return /* @__PURE__ */ React27.createElement(React27.Fragment, { key: field2.id });
+          return /* @__PURE__ */ React27.createElement(
+            FormField,
+            {
+              key: field2.id,
+              config,
+              form,
+              submissionState
+            }
+          );
+        }
+        return /* @__PURE__ */ React27.createElement(React27.Fragment, { key: field2.id }, renderItem(itemProps(index)));
+      }), !readOnly && fields.length === 0 && renderAddButton ? /* @__PURE__ */ React27.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React27.createElement("p", null, "No ", label?.toLowerCase() || "items", " added yet."), renderAddButton({ canAdd, onAdd: handleAdd })) : null, !readOnly && (fields.length > 0 && renderAddButton ? renderAddButton({ canAdd, onAdd: handleAdd }) : canAdd && /* @__PURE__ */ React27.createElement(
         Button6,
         {
           variant: "bordered",
@@ -5859,7 +5930,7 @@ function createFieldArrayCustomConfig(options) {
           className: "w-full"
         },
         "Add Item"
-      )));
+      ))));
     },
     type: "custom"
   };
@@ -6121,6 +6192,7 @@ export {
   commonValidations,
   createAdvancedBuilder,
   createBasicFormBuilder,
+  createCustomFieldConfigForItem,
   createDateSchema,
   createEmailSchema,
   createField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://rachelallyson.github.io/hero-hook-form/",