@rachelallyson/hero-hook-form 2.6.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/dist/index.d.ts +374 -25
- package/dist/index.js +313 -67
- package/dist/react/index.d.ts +374 -25
- package/dist/react/index.js +313 -67
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,41 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [2.7.0] - 2026-01-13
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- **Enhanced FieldArrayConfig**: Added powerful new features for dynamic field arrays
|
|
10
|
+
- `enableReordering` - Enable up/down buttons to reorder array items
|
|
11
|
+
- `reorderButtonText` - Customize reorder button labels (`{ up?: string; down?: string }`)
|
|
12
|
+
- `renderItem` - Custom render function for array items with full control over layout
|
|
13
|
+
- `renderAddButton` - Custom render function for the add button
|
|
14
|
+
- `defaultItem` - Function to create default values when adding new array items
|
|
15
|
+
- Conditional fields now work within array items (automatic path resolution)
|
|
16
|
+
- Example: `{ type: "fieldArray", name: "slots", enableReordering: true, ... }`
|
|
17
|
+
|
|
18
|
+
- **SimpleForm Component**: New simplified API for single-field forms
|
|
19
|
+
- Perfect for search bars, message inputs, or simple single-field forms
|
|
20
|
+
- Uses `ZodForm` internally for consistent validation and error handling
|
|
21
|
+
- Example: `<SimpleForm schema={schema} field={FormFieldHelpers.input("message", "")} />`
|
|
22
|
+
|
|
23
|
+
- **syncArrays Utility**: Helper function for syncing arrays in edit forms
|
|
24
|
+
- Determines which items to create, update, or delete based on IDs
|
|
25
|
+
- Useful for edit forms where you need to sync array changes with a database
|
|
26
|
+
- Example: `const { toCreate, toUpdate, toDelete } = syncArrays({ existing, current, getId })`
|
|
27
|
+
|
|
28
|
+
- **createFieldArrayCustomConfig Helper**: Reduces boilerplate for custom field arrays
|
|
29
|
+
- Creates a `CustomFieldConfig` that uses `useFieldArray` internally
|
|
30
|
+
- Provides structured way to render custom array items with reordering
|
|
31
|
+
- Example: `createFieldArrayCustomConfig({ name: "slots", enableReordering: true, ... })`
|
|
32
|
+
|
|
33
|
+
### Fixed
|
|
34
|
+
|
|
35
|
+
- **Conditional Fields in Arrays**: Fixed path resolution for conditional fields within array items
|
|
36
|
+
- Uses `get()` from react-hook-form to correctly resolve nested paths like `"slots.0.slotType"`
|
|
37
|
+
- Conditional fields now work correctly within dynamic field arrays
|
|
38
|
+
- Example: Field with `dependsOn: "slotType"` in array item automatically resolves to `"slots.0.slotType"`
|
|
39
|
+
|
|
5
40
|
## [2.6.0] - 2026-01-13
|
|
6
41
|
|
|
7
42
|
### Added
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React$1, { ComponentProps } from 'react';
|
|
2
2
|
import { Button } from '@heroui/react';
|
|
3
3
|
import * as react_hook_form from 'react-hook-form';
|
|
4
|
-
import { FieldValues, Path, RegisterOptions, Control, UseFormReturn, FieldErrors, UseFormProps, SubmitHandler, UseFormSetError } from 'react-hook-form';
|
|
4
|
+
import { FieldValues, Path, RegisterOptions, Control, UseFormReturn, FieldErrors, UseFormProps, SubmitHandler, UseFormSetError, DefaultValues, ArrayPath, FieldArrayWithId } from 'react-hook-form';
|
|
5
5
|
export { UseFormReturn, useFormContext } from 'react-hook-form';
|
|
6
6
|
import * as zod from 'zod';
|
|
7
|
-
import { z } from 'zod';
|
|
7
|
+
import { z, ZodSchema } from 'zod';
|
|
8
8
|
import * as _internationalized_date from '@internationalized/date';
|
|
9
9
|
import { CalendarDate } from '@internationalized/date';
|
|
10
10
|
import { Autocomplete } from '@heroui/autocomplete';
|
|
@@ -115,13 +115,74 @@ interface ConditionalFieldConfig<TFieldValues extends FieldValues> extends BaseF
|
|
|
115
115
|
condition: (formData: Partial<TFieldValues>) => boolean;
|
|
116
116
|
field: ZodFormFieldConfig<TFieldValues>;
|
|
117
117
|
}
|
|
118
|
+
/**
|
|
119
|
+
* Field array config for dynamic repeating field groups.
|
|
120
|
+
*
|
|
121
|
+
* @description
|
|
122
|
+
* Configuration for field arrays that support reordering, custom rendering,
|
|
123
|
+
* default values, and conditional fields within array items.
|
|
124
|
+
*
|
|
125
|
+
* @template TFieldValues - The form data type
|
|
126
|
+
*/
|
|
118
127
|
interface FieldArrayConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
119
128
|
type: "fieldArray";
|
|
129
|
+
/** Field configurations for each array item */
|
|
120
130
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
131
|
+
/** Minimum number of items (default: 0) */
|
|
121
132
|
min?: number;
|
|
133
|
+
/** Maximum number of items (default: 10) */
|
|
122
134
|
max?: number;
|
|
135
|
+
/** Add button text (default: "Add Item") */
|
|
123
136
|
addButtonText?: string;
|
|
137
|
+
/** Remove button text (default: "Remove") */
|
|
124
138
|
removeButtonText?: string;
|
|
139
|
+
/** Enable reordering of array items with up/down buttons (default: false) */
|
|
140
|
+
enableReordering?: boolean;
|
|
141
|
+
/** Custom text for reorder buttons */
|
|
142
|
+
reorderButtonText?: {
|
|
143
|
+
/** Text for move up button (default: "↑") */
|
|
144
|
+
up?: string;
|
|
145
|
+
/** Text for move down button (default: "↓") */
|
|
146
|
+
down?: string;
|
|
147
|
+
};
|
|
148
|
+
/** Function to create default item when adding new array item */
|
|
149
|
+
defaultItem?: () => any;
|
|
150
|
+
/** Custom render function for array items */
|
|
151
|
+
renderItem?: (props: {
|
|
152
|
+
/** Item index (0-based) */
|
|
153
|
+
index: number;
|
|
154
|
+
/** Field array item with id */
|
|
155
|
+
field: {
|
|
156
|
+
id: string;
|
|
157
|
+
[key: string]: any;
|
|
158
|
+
};
|
|
159
|
+
/** All fields in the array */
|
|
160
|
+
fields: {
|
|
161
|
+
id: string;
|
|
162
|
+
[key: string]: any;
|
|
163
|
+
}[];
|
|
164
|
+
/** Rendered field elements */
|
|
165
|
+
children: React.ReactNode;
|
|
166
|
+
/** Remove this item */
|
|
167
|
+
onRemove: () => void;
|
|
168
|
+
/** Move item up */
|
|
169
|
+
onMoveUp: () => void;
|
|
170
|
+
/** Move item down */
|
|
171
|
+
onMoveDown: () => void;
|
|
172
|
+
/** Whether item can be removed */
|
|
173
|
+
canRemove: boolean;
|
|
174
|
+
/** Whether item can move up */
|
|
175
|
+
canMoveUp: boolean;
|
|
176
|
+
/** Whether item can move down */
|
|
177
|
+
canMoveDown: boolean;
|
|
178
|
+
}) => React.ReactNode;
|
|
179
|
+
/** Custom render function for add button */
|
|
180
|
+
renderAddButton?: (props: {
|
|
181
|
+
/** Add new item */
|
|
182
|
+
onAdd: () => void;
|
|
183
|
+
/** Whether new item can be added */
|
|
184
|
+
canAdd: boolean;
|
|
185
|
+
}) => React.ReactNode;
|
|
125
186
|
}
|
|
126
187
|
interface DynamicSectionConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
127
188
|
type: "dynamicSection";
|
|
@@ -2032,6 +2093,83 @@ interface ZodFormProps<T extends FieldValues> {
|
|
|
2032
2093
|
*/
|
|
2033
2094
|
declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
|
|
2034
2095
|
|
|
2096
|
+
/**
|
|
2097
|
+
* Props for the SimpleForm component.
|
|
2098
|
+
*
|
|
2099
|
+
* @template TFieldValues - The form data type
|
|
2100
|
+
*/
|
|
2101
|
+
interface SimpleFormProps<TFieldValues extends FieldValues> {
|
|
2102
|
+
/** Zod schema for validation */
|
|
2103
|
+
schema: ZodSchema<TFieldValues>;
|
|
2104
|
+
/** Single field configuration */
|
|
2105
|
+
field: ZodFormFieldConfig<TFieldValues>;
|
|
2106
|
+
/** Submit handler */
|
|
2107
|
+
onSubmit: (data: TFieldValues) => Promise<void> | void;
|
|
2108
|
+
/** Optional custom submit button */
|
|
2109
|
+
submitButton?: React$1.ReactNode;
|
|
2110
|
+
/** Optional form title */
|
|
2111
|
+
title?: string;
|
|
2112
|
+
/** Optional form subtitle */
|
|
2113
|
+
subtitle?: string;
|
|
2114
|
+
/** Optional className */
|
|
2115
|
+
className?: string;
|
|
2116
|
+
/** Optional default values */
|
|
2117
|
+
defaultValues?: DefaultValues<TFieldValues>;
|
|
2118
|
+
/** Optional error callback */
|
|
2119
|
+
onError?: (error: FormValidationError) => void;
|
|
2120
|
+
/** Optional success callback */
|
|
2121
|
+
onSuccess?: (data: TFieldValues) => void;
|
|
2122
|
+
/** Hide default submit button (use custom submitButton instead) */
|
|
2123
|
+
hideSubmitButton?: boolean;
|
|
2124
|
+
}
|
|
2125
|
+
/**
|
|
2126
|
+
* Simple form component for single-field forms.
|
|
2127
|
+
*
|
|
2128
|
+
* @description
|
|
2129
|
+
* A simplified API for forms with a single field. Provides the same validation
|
|
2130
|
+
* and error handling as ZodForm but with a simpler configuration.
|
|
2131
|
+
* Useful for simple inputs like search bars, message inputs, or single-field forms.
|
|
2132
|
+
*
|
|
2133
|
+
* @template TFieldValues - The form data type
|
|
2134
|
+
*
|
|
2135
|
+
* @param {SimpleFormProps<TFieldValues>} props - Component props
|
|
2136
|
+
* @returns {JSX.Element} The rendered form
|
|
2137
|
+
*
|
|
2138
|
+
* @example
|
|
2139
|
+
* ```tsx
|
|
2140
|
+
* import { SimpleForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
2141
|
+
* import { z } from "zod";
|
|
2142
|
+
*
|
|
2143
|
+
* const messageSchema = z.object({
|
|
2144
|
+
* message: z.string().min(1, "Message cannot be empty"),
|
|
2145
|
+
* });
|
|
2146
|
+
*
|
|
2147
|
+
* function MessageInput() {
|
|
2148
|
+
* return (
|
|
2149
|
+
* <SimpleForm
|
|
2150
|
+
* schema={messageSchema}
|
|
2151
|
+
* field={FormFieldHelpers.input("message", "", {
|
|
2152
|
+
* placeholder: "Add a note...",
|
|
2153
|
+
* endContent: (
|
|
2154
|
+
* <Button type="submit" isIconOnly>
|
|
2155
|
+
* <SendIcon />
|
|
2156
|
+
* </Button>
|
|
2157
|
+
* ),
|
|
2158
|
+
* })}
|
|
2159
|
+
* onSubmit={async (data) => {
|
|
2160
|
+
* await sendMessage(data.message);
|
|
2161
|
+
* }}
|
|
2162
|
+
* hideSubmitButton
|
|
2163
|
+
* />
|
|
2164
|
+
* );
|
|
2165
|
+
* }
|
|
2166
|
+
* ```
|
|
2167
|
+
*
|
|
2168
|
+
* @see {@link ZodForm} for multi-field forms
|
|
2169
|
+
* @category Components
|
|
2170
|
+
*/
|
|
2171
|
+
declare function SimpleForm<TFieldValues extends FieldValues>({ className, defaultValues, field, hideSubmitButton, onError, onSubmit, onSuccess, schema, submitButton, subtitle, title, }: SimpleFormProps<TFieldValues>): React$1.JSX.Element;
|
|
2172
|
+
|
|
2035
2173
|
/**
|
|
2036
2174
|
* Hook for using Zod validation with React Hook Form
|
|
2037
2175
|
*/
|
|
@@ -3162,6 +3300,7 @@ interface FieldArrayFieldProps<TFieldValues extends FieldValues> {
|
|
|
3162
3300
|
* Allows users to add and remove multiple instances of a field group.
|
|
3163
3301
|
* Useful for forms with repeating data like addresses, items, or contacts.
|
|
3164
3302
|
* Automatically manages field array state and provides add/remove buttons.
|
|
3303
|
+
* Supports reordering, custom item rendering, default values, and conditional fields within items.
|
|
3165
3304
|
*
|
|
3166
3305
|
* @template TFieldValues - The form data type
|
|
3167
3306
|
*
|
|
@@ -3172,42 +3311,101 @@ interface FieldArrayFieldProps<TFieldValues extends FieldValues> {
|
|
|
3172
3311
|
* @returns {JSX.Element} The rendered field array with add/remove controls
|
|
3173
3312
|
*
|
|
3174
3313
|
* @example
|
|
3314
|
+
* Basic usage:
|
|
3175
3315
|
* ```tsx
|
|
3176
3316
|
* import { FieldArrayField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
3177
3317
|
*
|
|
3178
3318
|
* const fields = [
|
|
3179
3319
|
* FormFieldHelpers.input("name", "Name"),
|
|
3180
|
-
*
|
|
3181
|
-
*
|
|
3182
|
-
*
|
|
3183
|
-
*
|
|
3184
|
-
*
|
|
3185
|
-
*
|
|
3186
|
-
*
|
|
3187
|
-
*
|
|
3188
|
-
*
|
|
3189
|
-
*
|
|
3190
|
-
*
|
|
3191
|
-
*
|
|
3192
|
-
*
|
|
3193
|
-
*
|
|
3194
|
-
* }),
|
|
3320
|
+
* {
|
|
3321
|
+
* type: "fieldArray",
|
|
3322
|
+
* name: "addresses",
|
|
3323
|
+
* label: "Address",
|
|
3324
|
+
* fields: [
|
|
3325
|
+
* FormFieldHelpers.input("street", "Street Address"),
|
|
3326
|
+
* FormFieldHelpers.input("city", "City"),
|
|
3327
|
+
* FormFieldHelpers.input("zipCode", "ZIP Code"),
|
|
3328
|
+
* ],
|
|
3329
|
+
* min: 1,
|
|
3330
|
+
* max: 5,
|
|
3331
|
+
* addButtonText: "Add Address",
|
|
3332
|
+
* removeButtonText: "Remove Address",
|
|
3333
|
+
* },
|
|
3195
3334
|
* ];
|
|
3196
3335
|
* ```
|
|
3197
3336
|
*
|
|
3198
3337
|
* @example
|
|
3199
|
-
* With
|
|
3338
|
+
* With reordering:
|
|
3200
3339
|
* ```tsx
|
|
3201
|
-
*
|
|
3202
|
-
*
|
|
3203
|
-
*
|
|
3204
|
-
*
|
|
3205
|
-
*
|
|
3206
|
-
* }
|
|
3340
|
+
* {
|
|
3341
|
+
* type: "fieldArray",
|
|
3342
|
+
* name: "slots",
|
|
3343
|
+
* label: "Question Slots",
|
|
3344
|
+
* enableReordering: true,
|
|
3345
|
+
* reorderButtonText: { up: "↑", down: "↓" },
|
|
3346
|
+
* fields: [
|
|
3347
|
+
* FormFieldHelpers.select("slotType", "Slot Type", options),
|
|
3348
|
+
* ],
|
|
3349
|
+
* }
|
|
3350
|
+
* ```
|
|
3351
|
+
*
|
|
3352
|
+
* @example
|
|
3353
|
+
* With custom item rendering:
|
|
3354
|
+
* ```tsx
|
|
3355
|
+
* {
|
|
3356
|
+
* type: "fieldArray",
|
|
3357
|
+
* name: "items",
|
|
3358
|
+
* renderItem: ({ index, children, onMoveUp, onMoveDown, onRemove }) => (
|
|
3359
|
+
* <Card className="p-4">
|
|
3360
|
+
* <div className="flex justify-between">
|
|
3361
|
+
* <span>Item {index + 1}</span>
|
|
3362
|
+
* <Button onPress={onRemove}>Remove</Button>
|
|
3363
|
+
* </div>
|
|
3364
|
+
* {children}
|
|
3365
|
+
* </Card>
|
|
3366
|
+
* ),
|
|
3367
|
+
* fields: [...],
|
|
3368
|
+
* }
|
|
3369
|
+
* ```
|
|
3370
|
+
*
|
|
3371
|
+
* @example
|
|
3372
|
+
* With default item:
|
|
3373
|
+
* ```tsx
|
|
3374
|
+
* {
|
|
3375
|
+
* type: "fieldArray",
|
|
3376
|
+
* name: "slots",
|
|
3377
|
+
* defaultItem: () => ({
|
|
3378
|
+
* order: 0,
|
|
3379
|
+
* slotType: "STATIC",
|
|
3380
|
+
* staticQuestionId: "",
|
|
3381
|
+
* }),
|
|
3382
|
+
* fields: [...],
|
|
3383
|
+
* }
|
|
3384
|
+
* ```
|
|
3385
|
+
*
|
|
3386
|
+
* @example
|
|
3387
|
+
* With conditional fields within items:
|
|
3388
|
+
* ```tsx
|
|
3389
|
+
* {
|
|
3390
|
+
* type: "fieldArray",
|
|
3391
|
+
* name: "slots",
|
|
3392
|
+
* fields: [
|
|
3393
|
+
* FormFieldHelpers.select("slotType", "Slot Type", [
|
|
3394
|
+
* { label: "Static", value: "STATIC" },
|
|
3395
|
+
* { label: "Dynamic", value: "DYNAMIC" },
|
|
3396
|
+
* ]),
|
|
3397
|
+
* {
|
|
3398
|
+
* ...FormFieldHelpers.select("staticQuestionId", "Question", questions),
|
|
3399
|
+
* dependsOn: "slotType",
|
|
3400
|
+
* dependsOnValue: "STATIC",
|
|
3401
|
+
* },
|
|
3402
|
+
* ],
|
|
3403
|
+
* }
|
|
3207
3404
|
* ```
|
|
3208
3405
|
*
|
|
3209
3406
|
* @see {@link ConditionalField} for conditional single fields
|
|
3210
3407
|
* @see {@link DynamicSectionField} for conditional field groups
|
|
3408
|
+
* @see {@link createFieldArrayCustomConfig} for advanced custom rendering
|
|
3211
3409
|
* @category Fields
|
|
3212
3410
|
*/
|
|
3213
3411
|
declare function FieldArrayField<TFieldValues extends FieldValues>({ className, config, }: FieldArrayFieldProps<TFieldValues>): React$1.JSX.Element | null;
|
|
@@ -3351,6 +3549,157 @@ declare function createOptimizedFieldHandler<T>(onChange: (value: T) => void, op
|
|
|
3351
3549
|
*/
|
|
3352
3550
|
declare function useMemoizedFieldProps<T extends Record<string, any>>(props: T, deps: React.DependencyList): T;
|
|
3353
3551
|
|
|
3552
|
+
/**
|
|
3553
|
+
* Options for syncing arrays
|
|
3554
|
+
*
|
|
3555
|
+
* @template TItem - The item type in the arrays
|
|
3556
|
+
*/
|
|
3557
|
+
interface ArraySyncOptions<TItem> {
|
|
3558
|
+
/** Existing items (from database/API) */
|
|
3559
|
+
existing: TItem[];
|
|
3560
|
+
/** Current items (from form) */
|
|
3561
|
+
current: TItem[];
|
|
3562
|
+
/** Function to extract ID from an item */
|
|
3563
|
+
getId: (item: TItem) => string | number | undefined;
|
|
3564
|
+
}
|
|
3565
|
+
/**
|
|
3566
|
+
* Result of array sync operation
|
|
3567
|
+
*
|
|
3568
|
+
* @template TItem - The item type in the arrays
|
|
3569
|
+
*/
|
|
3570
|
+
interface ArraySyncResult<TItem> {
|
|
3571
|
+
/** Items that should be deleted (exist in existing but not in current) */
|
|
3572
|
+
toDelete: TItem[];
|
|
3573
|
+
/** Items that should be updated (exist in both, may have changed) */
|
|
3574
|
+
toUpdate: {
|
|
3575
|
+
existing: TItem;
|
|
3576
|
+
current: TItem;
|
|
3577
|
+
}[];
|
|
3578
|
+
/** Items that should be created (exist in current but not in existing) */
|
|
3579
|
+
toCreate: TItem[];
|
|
3580
|
+
}
|
|
3581
|
+
/**
|
|
3582
|
+
* Sync arrays to determine what items to delete, update, and create.
|
|
3583
|
+
*
|
|
3584
|
+
* @description
|
|
3585
|
+
* Compares existing items (from database) with current items (from form)
|
|
3586
|
+
* to determine which items need to be deleted, updated, or created.
|
|
3587
|
+
* Useful for edit forms where you need to sync array changes.
|
|
3588
|
+
*
|
|
3589
|
+
* @template TItem - The item type in the arrays
|
|
3590
|
+
*
|
|
3591
|
+
* @param {ArraySyncOptions<TItem>} options - Sync options
|
|
3592
|
+
* @returns {ArraySyncResult<TItem>} Result with items to delete, update, and create
|
|
3593
|
+
*
|
|
3594
|
+
* @example
|
|
3595
|
+
* ```tsx
|
|
3596
|
+
* const { toDelete, toUpdate, toCreate } = syncArrays({
|
|
3597
|
+
* existing: slots,
|
|
3598
|
+
* current: data.slots,
|
|
3599
|
+
* getId: (slot) => slot.id,
|
|
3600
|
+
* });
|
|
3601
|
+
*
|
|
3602
|
+
* // Delete removed slots
|
|
3603
|
+
* await Promise.all(toDelete.map(slot => deleteSlot(slot.id)));
|
|
3604
|
+
*
|
|
3605
|
+
* // Update existing slots
|
|
3606
|
+
* await Promise.all(
|
|
3607
|
+
* toUpdate.map(({ existing, current }) =>
|
|
3608
|
+
* updateSlot(existing.id, current)
|
|
3609
|
+
* )
|
|
3610
|
+
* );
|
|
3611
|
+
*
|
|
3612
|
+
* // Create new slots
|
|
3613
|
+
* await Promise.all(toCreate.map(slot => createSlot(slot)));
|
|
3614
|
+
* ```
|
|
3615
|
+
*
|
|
3616
|
+
* @category Utilities
|
|
3617
|
+
*/
|
|
3618
|
+
declare function syncArrays<TItem>(options: ArraySyncOptions<TItem>): ArraySyncResult<TItem>;
|
|
3619
|
+
|
|
3620
|
+
/**
|
|
3621
|
+
* Options for creating a custom field array config
|
|
3622
|
+
*
|
|
3623
|
+
* @template TFieldValues - The form data type
|
|
3624
|
+
*/
|
|
3625
|
+
interface CreateFieldArrayCustomConfigOptions<TFieldValues extends FieldValues> {
|
|
3626
|
+
/** Field array name */
|
|
3627
|
+
name: ArrayPath<TFieldValues>;
|
|
3628
|
+
/** Optional label for the field array */
|
|
3629
|
+
label?: string;
|
|
3630
|
+
/** Render function for each array item */
|
|
3631
|
+
renderItem: (props: {
|
|
3632
|
+
index: number;
|
|
3633
|
+
field: FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>>;
|
|
3634
|
+
fields: FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>>[];
|
|
3635
|
+
form: UseFormReturn<TFieldValues>;
|
|
3636
|
+
control: Control<TFieldValues>;
|
|
3637
|
+
errors: FieldErrors<TFieldValues>;
|
|
3638
|
+
canMoveUp: boolean;
|
|
3639
|
+
canMoveDown: boolean;
|
|
3640
|
+
onMoveUp: () => void;
|
|
3641
|
+
onMoveDown: () => void;
|
|
3642
|
+
onRemove: () => void;
|
|
3643
|
+
}) => React$1.ReactNode;
|
|
3644
|
+
/** Optional render function for add button */
|
|
3645
|
+
renderAddButton?: (props: {
|
|
3646
|
+
onAdd: () => void;
|
|
3647
|
+
canAdd: boolean;
|
|
3648
|
+
}) => React$1.ReactNode;
|
|
3649
|
+
/** Function to create default item when adding new array item */
|
|
3650
|
+
defaultItem?: () => any;
|
|
3651
|
+
/** Minimum number of items */
|
|
3652
|
+
min?: number;
|
|
3653
|
+
/** Maximum number of items */
|
|
3654
|
+
max?: number;
|
|
3655
|
+
/** Enable reordering of array items */
|
|
3656
|
+
enableReordering?: boolean;
|
|
3657
|
+
/** Optional className */
|
|
3658
|
+
className?: string;
|
|
3659
|
+
}
|
|
3660
|
+
/**
|
|
3661
|
+
* Create a CustomFieldConfig for field arrays with full control over rendering.
|
|
3662
|
+
*
|
|
3663
|
+
* @description
|
|
3664
|
+
* This helper creates a CustomFieldConfig that uses useFieldArray internally,
|
|
3665
|
+
* giving you full control over the UI while still being integrated with the form.
|
|
3666
|
+
* Useful when you need custom layouts, reordering, or complex item rendering
|
|
3667
|
+
* that FieldArrayConfig doesn't support.
|
|
3668
|
+
*
|
|
3669
|
+
* @template TFieldValues - The form data type
|
|
3670
|
+
*
|
|
3671
|
+
* @param {CreateFieldArrayCustomConfigOptions<TFieldValues>} options - Configuration options
|
|
3672
|
+
* @returns {CustomFieldConfig<TFieldValues>} Custom field config for field arrays
|
|
3673
|
+
*
|
|
3674
|
+
* @example
|
|
3675
|
+
* ```tsx
|
|
3676
|
+
* const slotsConfig = createFieldArrayCustomConfig("slots", {
|
|
3677
|
+
* label: "Question Slots",
|
|
3678
|
+
* enableReordering: true,
|
|
3679
|
+
* renderItem: ({ index, field, form, control, onMoveUp, onMoveDown, onRemove }) => (
|
|
3680
|
+
* <div className="border rounded-lg p-4">
|
|
3681
|
+
* <div className="flex justify-between">
|
|
3682
|
+
* <span>Slot {index + 1}</span>
|
|
3683
|
+
* <div className="flex gap-2">
|
|
3684
|
+
* <Button onPress={onMoveUp}>↑</Button>
|
|
3685
|
+
* <Button onPress={onMoveDown}>↓</Button>
|
|
3686
|
+
* <Button onPress={onRemove}>Remove</Button>
|
|
3687
|
+
* </div>
|
|
3688
|
+
* </div>
|
|
3689
|
+
* <SelectField
|
|
3690
|
+
* name={`slots.${index}.slotType`}
|
|
3691
|
+
* control={control}
|
|
3692
|
+
* // ...
|
|
3693
|
+
* />
|
|
3694
|
+
* </div>
|
|
3695
|
+
* ),
|
|
3696
|
+
* });
|
|
3697
|
+
* ```
|
|
3698
|
+
*
|
|
3699
|
+
* @category Utilities
|
|
3700
|
+
*/
|
|
3701
|
+
declare function createFieldArrayCustomConfig<TFieldValues extends FieldValues>(options: CreateFieldArrayCustomConfigOptions<TFieldValues>): CustomFieldConfig<TFieldValues>;
|
|
3702
|
+
|
|
3354
3703
|
/**
|
|
3355
3704
|
* Common validation patterns for forms
|
|
3356
3705
|
*/
|
|
@@ -3434,4 +3783,4 @@ declare const validationUtils: {
|
|
|
3434
3783
|
}>;
|
|
3435
3784
|
};
|
|
3436
3785
|
|
|
3437
|
-
export { AdvancedFieldBuilder, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, type CommonFieldDefaults, CommonFields, ConditionalField, type ConditionalFieldConfig, type ConditionalFieldProps, type ConditionalValidation, ConfigurableForm, ContentField, type ContentFieldConfig, type CustomFieldConfig, DateField, type DateFieldConfig, type DateFieldProps, type DateInputDefaults, type DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, 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 RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, type ServerFieldError, type ServerFormError, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, 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, 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, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
|
|
3786
|
+
export { AdvancedFieldBuilder, type ArraySyncOptions, type ArraySyncResult, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, 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 DynamicSectionConfig, DynamicSectionField, type DynamicSectionFieldProps, type EnhancedFormState, FieldArrayBuilder, type FieldArrayConfig, FieldArrayField, type FieldArrayFieldProps, FieldArrayItemBuilder, type FieldBaseProps, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, FontPickerField, type FontPickerFieldConfig, type FontPickerFieldProps, type FormConfig, FormField, type FormFieldConfig, FormFieldHelpers, 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 RadioFieldConfig, type RadioGroupDefaults, RadioGroupField, type RadioGroupFieldProps, type SelectDefaults, SelectField, type SelectFieldProps, ServerActionForm, type ServerFieldError, type ServerFormError, SimpleForm, type SimpleFormProps, type SliderDefaults, SliderField, type SliderFieldConfig, type SliderFieldProps, type StringFieldConfig, SubmitButton, type SubmitButtonProps, type SwitchDefaults, SwitchField, type SwitchFieldProps, type TextareaDefaults, TextareaField, type TextareaFieldProps, 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, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, syncArrays, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
|