@rachelallyson/hero-hook-form 2.4.0 → 2.5.1

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.5.1] - 2026-01-13
+
+### Fixed
+
+- **Conditional Field Helper TypeScript Types**: Fixed type inference issues in `FormFieldHelpers.conditional()`
+  - Added default generic type parameter `= FieldValues` for better type compatibility
+  - Updated to use type assertion pattern similar to `FormFieldHelpers.content()` for consistency
+  - Improved type safety and compatibility with explicit type annotations in condition functions
+  - When TypeScript can't infer the type from `Partial<T>`, explicitly specify: `FormFieldHelpers.conditional<YourType>(...)`
+  - Removed unused `ConditionalFieldConfig` import
+
+## [2.5.0] - 2026-01-13
+
+### Added
+
+- **AutocompleteField Component**: New autocomplete field component with full React Hook Form integration
+  - Supports static option lists via `items` prop
+  - Supports async loading via custom `children` render function
+  - Handles custom values with `allowsCustomValue` prop
+  - Full validation and error handling support
+  - Integrated with `FormFieldHelpers.autocomplete()` helper
+  - Integrated with `BasicFormBuilder.autocomplete()` method
+  - Comprehensive test coverage (10/10 tests passing)
+  - Example: `FormFieldHelpers.autocomplete("country", "Country", options, "Search for a country")`
+
+### Dependencies
+
+- Added `@heroui/autocomplete` as optional peer dependency and dev dependency
+- Updated UI exports to include Autocomplete and AutocompleteItem components
+
 ## [2.4.0] - 2026-01-13
 
 ### Added

package/dist/index.d.ts

@@ -2083,6 +2083,13 @@ declare class BasicFormBuilder<T extends FieldValues> {
         label: string;
         value: string | number;
     }[]): this;
+    /**
+     * Add an autocomplete field
+     */
+    autocomplete(name: Path<T>, label: string, items: {
+        label: string;
+        value: string | number;
+    }[], placeholder?: string): this;
     /**
      * Add a checkbox field
      */
@@ -2200,8 +2207,19 @@ declare const FormFieldHelpers: {
      *   FormFieldHelpers.input("phone", "Phone Number", "tel")
      * )
      * ```
+     *
+     * @example
+     * With explicit type in condition function (similar to content helper pattern):
+     * ```tsx
+     * FormFieldHelpers.conditional(
+     *   "options",
+     *   (formData: Partial<z.infer<typeof fieldSchema>>) =>
+     *     formData.fieldType === 'DROPDOWN',
+     *   FormFieldHelpers.textarea("options", "Dropdown Options", "One per line")
+     * )
+     * ```
      */
-    conditional: <T extends FieldValues>(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>) => ZodFormFieldConfig<T>;
+    conditional: <T extends FieldValues = FieldValues>(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>) => ZodFormFieldConfig<T>;
     /**
      * Create a content field for headers, questions, or custom content between fields
      *

package/dist/index.js

@@ -117,6 +117,9 @@ function AutocompleteField(props) {
       name,
       render: ({ field: field2, fieldState }) => {
         const selectedKey = field2.value;
+        const hasSelectedValue = selectedKey != null && selectedKey !== "";
+        const allowsCustomValue = autocompleteProps?.allowsCustomValue ?? false;
+        const shouldShowInputValue = allowsCustomValue || !hasSelectedValue;
         return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
           Autocomplete,
           {
@@ -127,18 +130,18 @@ function AutocompleteField(props) {
             isInvalid: Boolean(fieldState.error),
             label,
             placeholder,
-            selectedKey: selectedKey != null ? String(selectedKey) : void 0,
-            inputValue: selectedKey != null ? void 0 : field2.value ?? "",
+            selectedKey: allowsCustomValue ? void 0 : hasSelectedValue ? String(selectedKey) : void 0,
+            inputValue: shouldShowInputValue ? field2.value ?? "" : void 0,
             onSelectionChange: (key) => {
               const next = key ?? "";
               field2.onChange(next);
             },
             onInputChange: (value) => {
-              if (autocompleteProps?.allowsCustomValue) {
+              if (allowsCustomValue) {
                 field2.onChange(value);
               }
             },
-            defaultItems: items
+            items
           },
           children ? children : (item) => /* @__PURE__ */ React.createElement(
             AutocompleteItem,
@@ -2372,6 +2375,19 @@ var BasicFormBuilder = class {
     });
     return this;
   }
+  /**
+   * Add an autocomplete field
+   */
+  autocomplete(name, label, items, placeholder) {
+    this.fields.push({
+      autocompleteProps: placeholder ? { placeholder } : void 0,
+      label,
+      name,
+      options: items,
+      type: "autocomplete"
+    });
+    return this;
+  }
   /**
    * Add a checkbox field
    */
@@ -2449,13 +2465,26 @@ var FormFieldHelpers = {
    *   FormFieldHelpers.input("phone", "Phone Number", "tel")
    * )
    * ```
+   *
+   * @example
+   * With explicit type in condition function (similar to content helper pattern):
+   * ```tsx
+   * FormFieldHelpers.conditional(
+   *   "options",
+   *   (formData: Partial<z.infer<typeof fieldSchema>>) =>
+   *     formData.fieldType === 'DROPDOWN',
+   *   FormFieldHelpers.textarea("options", "Dropdown Options", "One per line")
+   * )
+   * ```
    */
-  conditional: (name, condition, field2) => ({
-    condition,
-    field: field2,
-    name,
-    type: "conditional"
-  }),
+  conditional: (name, condition, field2) => {
+    return {
+      condition,
+      field: field2,
+      name,
+      type: "conditional"
+    };
+  },
   /**
    * Create a content field for headers, questions, or custom content between fields
    *

package/dist/react/index.d.ts

@@ -2074,6 +2074,13 @@ declare class BasicFormBuilder<T extends FieldValues> {
         label: string;
         value: string | number;
     }[]): this;
+    /**
+     * Add an autocomplete field
+     */
+    autocomplete(name: Path<T>, label: string, items: {
+        label: string;
+        value: string | number;
+    }[], placeholder?: string): this;
     /**
      * Add a checkbox field
      */
@@ -2191,8 +2198,19 @@ declare const FormFieldHelpers: {
      *   FormFieldHelpers.input("phone", "Phone Number", "tel")
      * )
      * ```
+     *
+     * @example
+     * With explicit type in condition function (similar to content helper pattern):
+     * ```tsx
+     * FormFieldHelpers.conditional(
+     *   "options",
+     *   (formData: Partial<z.infer<typeof fieldSchema>>) =>
+     *     formData.fieldType === 'DROPDOWN',
+     *   FormFieldHelpers.textarea("options", "Dropdown Options", "One per line")
+     * )
+     * ```
      */
-    conditional: <T extends FieldValues>(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>) => ZodFormFieldConfig<T>;
+    conditional: <T extends FieldValues = FieldValues>(name: Path<T>, condition: (formData: Partial<T>) => boolean, field: ZodFormFieldConfig<T>) => ZodFormFieldConfig<T>;
     /**
      * Create a content field for headers, questions, or custom content between fields
      *

package/dist/react/index.js

@@ -123,6 +123,9 @@ function AutocompleteField(props) {
       name,
       render: ({ field: field2, fieldState }) => {
         const selectedKey = field2.value;
+        const hasSelectedValue = selectedKey != null && selectedKey !== "";
+        const allowsCustomValue = autocompleteProps?.allowsCustomValue ?? false;
+        const shouldShowInputValue = allowsCustomValue || !hasSelectedValue;
         return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
           Autocomplete,
           {
@@ -133,18 +136,18 @@ function AutocompleteField(props) {
             isInvalid: Boolean(fieldState.error),
             label,
             placeholder,
-            selectedKey: selectedKey != null ? String(selectedKey) : void 0,
-            inputValue: selectedKey != null ? void 0 : field2.value ?? "",
+            selectedKey: allowsCustomValue ? void 0 : hasSelectedValue ? String(selectedKey) : void 0,
+            inputValue: shouldShowInputValue ? field2.value ?? "" : void 0,
             onSelectionChange: (key) => {
               const next = key ?? "";
               field2.onChange(next);
             },
             onInputChange: (value) => {
-              if (autocompleteProps?.allowsCustomValue) {
+              if (allowsCustomValue) {
                 field2.onChange(value);
               }
             },
-            defaultItems: items
+            items
           },
           children ? children : (item) => /* @__PURE__ */ React.createElement(
             AutocompleteItem,
@@ -2378,6 +2381,19 @@ var BasicFormBuilder = class {
     });
     return this;
   }
+  /**
+   * Add an autocomplete field
+   */
+  autocomplete(name, label, items, placeholder) {
+    this.fields.push({
+      autocompleteProps: placeholder ? { placeholder } : void 0,
+      label,
+      name,
+      options: items,
+      type: "autocomplete"
+    });
+    return this;
+  }
   /**
    * Add a checkbox field
    */
@@ -2455,13 +2471,26 @@ var FormFieldHelpers = {
    *   FormFieldHelpers.input("phone", "Phone Number", "tel")
    * )
    * ```
+   *
+   * @example
+   * With explicit type in condition function (similar to content helper pattern):
+   * ```tsx
+   * FormFieldHelpers.conditional(
+   *   "options",
+   *   (formData: Partial<z.infer<typeof fieldSchema>>) =>
+   *     formData.fieldType === 'DROPDOWN',
+   *   FormFieldHelpers.textarea("options", "Dropdown Options", "One per line")
+   * )
+   * ```
    */
-  conditional: (name, condition, field2) => ({
-    condition,
-    field: field2,
-    name,
-    type: "conditional"
-  }),
+  conditional: (name, condition, field2) => {
+    return {
+      condition,
+      field: field2,
+      name,
+      type: "conditional"
+    };
+  },
   /**
    * Create a content field for headers, questions, or custom content between fields
    *

package/package.json

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