@rachelallyson/hero-hook-form 2.7.0 → 2.7.2
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 +18 -0
- package/dist/cypress/index.d.ts +62 -71
- package/dist/cypress/index.js +583 -70
- package/dist/index.d.ts +504 -78
- package/dist/index.js +1390 -671
- package/package.json +15 -12
- package/dist/react/index.d.ts +0 -3777
- package/dist/react/index.js +0 -4235
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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,
|
|
4
|
+
import { FieldValues, Path, RegisterOptions, ArrayPath, Control, UseFormReturn, FieldErrors, UseFormProps, SubmitHandler, DefaultValues, UseFormSetError, FieldArrayWithId } from 'react-hook-form';
|
|
5
5
|
export { UseFormReturn, useFormContext } from 'react-hook-form';
|
|
6
6
|
import * as zod from 'zod';
|
|
7
7
|
import { z, ZodSchema } from 'zod';
|
|
@@ -17,6 +17,19 @@ import { Slider } from '@heroui/slider';
|
|
|
17
17
|
import { Switch } from '@heroui/switch';
|
|
18
18
|
import { Button as Button$1 } from '@heroui/button';
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* All supported field types that can be used in form builders
|
|
22
|
+
* This type is used throughout the codebase to ensure consistency
|
|
23
|
+
*/
|
|
24
|
+
type FormFieldType = "input" | "textarea" | "select" | "autocomplete" | "checkbox" | "switch" | "radio" | "slider" | "date" | "file" | "fontPicker" | "stringArray";
|
|
25
|
+
/**
|
|
26
|
+
* Helper to convert a Path<T>, ArrayPath<T>, or string to a string for use in React keys and DOM operations.
|
|
27
|
+
* Path<T> and ArrayPath<T> are branded string types, so this is safe - it's just removing the brand.
|
|
28
|
+
*
|
|
29
|
+
* @param path - The path to convert (can be Path<T>, ArrayPath<T>, string, or undefined)
|
|
30
|
+
* @returns The path as a plain string, or empty string if undefined
|
|
31
|
+
*/
|
|
32
|
+
declare function pathToString<T extends FieldValues>(path: Path<T> | ArrayPath<T> | string | undefined): string;
|
|
20
33
|
interface FieldBaseProps<TFieldValues extends FieldValues, TValue> {
|
|
21
34
|
name: Path<TFieldValues>;
|
|
22
35
|
label?: string;
|
|
@@ -30,7 +43,7 @@ interface FieldBaseProps<TFieldValues extends FieldValues, TValue> {
|
|
|
30
43
|
isDisabled?: boolean;
|
|
31
44
|
}
|
|
32
45
|
interface WithControl<TFieldValues extends FieldValues> {
|
|
33
|
-
control: Control<TFieldValues>;
|
|
46
|
+
control: Control<TFieldValues, any>;
|
|
34
47
|
}
|
|
35
48
|
interface BaseFormFieldConfig<TFieldValues extends FieldValues> {
|
|
36
49
|
name: Path<TFieldValues>;
|
|
@@ -73,6 +86,16 @@ interface RadioFieldConfig<TFieldValues extends FieldValues> extends BaseFormFie
|
|
|
73
86
|
value: string | number;
|
|
74
87
|
}[];
|
|
75
88
|
}
|
|
89
|
+
interface CheckboxGroupFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
90
|
+
type: "checkboxGroup";
|
|
91
|
+
defaultValue?: (string | number)[];
|
|
92
|
+
checkboxGroupOptions?: {
|
|
93
|
+
label: string;
|
|
94
|
+
value: string | number;
|
|
95
|
+
}[];
|
|
96
|
+
checkboxProps?: Omit<React.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled" | "name">;
|
|
97
|
+
orientation?: "vertical" | "horizontal";
|
|
98
|
+
}
|
|
76
99
|
interface SliderFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
77
100
|
type: "slider";
|
|
78
101
|
defaultValue?: number;
|
|
@@ -100,10 +123,35 @@ interface FontPickerFieldConfig<TFieldValues extends FieldValues> extends BaseFo
|
|
|
100
123
|
fontsLoadedTimeout?: number;
|
|
101
124
|
};
|
|
102
125
|
}
|
|
103
|
-
interface
|
|
126
|
+
interface StringArrayFieldConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
127
|
+
type: "stringArray";
|
|
128
|
+
defaultValue?: string[];
|
|
129
|
+
stringArrayProps?: {
|
|
130
|
+
/** Placeholder text for the input */
|
|
131
|
+
placeholder?: string;
|
|
132
|
+
/** Maximum number of items allowed */
|
|
133
|
+
maxItems?: number;
|
|
134
|
+
/** Minimum number of items required */
|
|
135
|
+
minItems?: number;
|
|
136
|
+
/** Allow duplicate values */
|
|
137
|
+
allowDuplicates?: boolean;
|
|
138
|
+
/** Custom validation function for each item */
|
|
139
|
+
validateItem?: (item: string) => string | true;
|
|
140
|
+
/** Transform item before adding (e.g., trim whitespace) */
|
|
141
|
+
transformItem?: (item: string) => string;
|
|
142
|
+
/** Custom chip render function */
|
|
143
|
+
renderChip?: (item: string, onRemove: () => void) => React.ReactNode;
|
|
144
|
+
/** Custom add button text */
|
|
145
|
+
addButtonText?: string;
|
|
146
|
+
/** Whether to show add button or use enter key */
|
|
147
|
+
showAddButton?: boolean;
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
interface CustomFieldConfig<TFieldValues extends FieldValues> extends Omit<BaseFormFieldConfig<TFieldValues>, "name"> {
|
|
104
151
|
type: "custom";
|
|
152
|
+
name: Path<TFieldValues> | ArrayPath<TFieldValues>;
|
|
105
153
|
render: (field: {
|
|
106
|
-
name: Path<TFieldValues>;
|
|
154
|
+
name: Path<TFieldValues> | ArrayPath<TFieldValues>;
|
|
107
155
|
control: Control<TFieldValues>;
|
|
108
156
|
form: UseFormReturn<TFieldValues>;
|
|
109
157
|
errors: FieldErrors<TFieldValues>;
|
|
@@ -124,8 +172,10 @@ interface ConditionalFieldConfig<TFieldValues extends FieldValues> extends BaseF
|
|
|
124
172
|
*
|
|
125
173
|
* @template TFieldValues - The form data type
|
|
126
174
|
*/
|
|
127
|
-
interface FieldArrayConfig<TFieldValues extends FieldValues> extends BaseFormFieldConfig<TFieldValues> {
|
|
175
|
+
interface FieldArrayConfig<TFieldValues extends FieldValues> extends Omit<BaseFormFieldConfig<TFieldValues>, "name"> {
|
|
128
176
|
type: "fieldArray";
|
|
177
|
+
/** Field array name - must be an ArrayPath (points to an array field) */
|
|
178
|
+
name: ArrayPath<TFieldValues>;
|
|
129
179
|
/** Field configurations for each array item */
|
|
130
180
|
fields: ZodFormFieldConfig<TFieldValues>[];
|
|
131
181
|
/** Minimum number of items (default: 0) */
|
|
@@ -193,7 +243,7 @@ interface DynamicSectionConfig<TFieldValues extends FieldValues> extends BaseFor
|
|
|
193
243
|
}
|
|
194
244
|
interface ContentFieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
195
245
|
type: "content";
|
|
196
|
-
name?:
|
|
246
|
+
name?: Path<TFieldValues>;
|
|
197
247
|
title?: string;
|
|
198
248
|
description?: string;
|
|
199
249
|
render?: (field: {
|
|
@@ -203,7 +253,7 @@ interface ContentFieldConfig<TFieldValues extends FieldValues = FieldValues> {
|
|
|
203
253
|
}) => React.ReactNode;
|
|
204
254
|
className?: string;
|
|
205
255
|
}
|
|
206
|
-
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | FontPickerFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues> | ConditionalFieldConfig<TFieldValues> | FieldArrayConfig<TFieldValues> | DynamicSectionConfig<TFieldValues> | ContentFieldConfig<TFieldValues>;
|
|
256
|
+
type FormFieldConfig<TFieldValues extends FieldValues> = StringFieldConfig<TFieldValues> | BooleanFieldConfig<TFieldValues> | RadioFieldConfig<TFieldValues> | CheckboxGroupFieldConfig<TFieldValues> | SliderFieldConfig<TFieldValues> | DateFieldConfig<TFieldValues> | FileFieldConfig<TFieldValues> | FontPickerFieldConfig<TFieldValues> | StringArrayFieldConfig<TFieldValues> | CustomFieldConfig<TFieldValues> | ConditionalFieldConfig<TFieldValues> | FieldArrayConfig<TFieldValues> | DynamicSectionConfig<TFieldValues> | ContentFieldConfig<TFieldValues>;
|
|
207
257
|
interface FormConfig<TFieldValues extends FieldValues> {
|
|
208
258
|
fields: FormFieldConfig<TFieldValues>[];
|
|
209
259
|
layout?: "vertical" | "horizontal" | "grid" | "custom";
|
|
@@ -217,10 +267,12 @@ interface FormConfig<TFieldValues extends FieldValues> {
|
|
|
217
267
|
className?: string;
|
|
218
268
|
defaultValues?: Partial<TFieldValues>;
|
|
219
269
|
}
|
|
220
|
-
type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules"> | Omit<CustomFieldConfig<TFieldValues>, "rules"> | Omit<ConditionalFieldConfig<TFieldValues>, "rules"> | Omit<FieldArrayConfig<TFieldValues>, "rules"> | Omit<DynamicSectionConfig<TFieldValues>, "rules"> | ContentFieldConfig<TFieldValues>;
|
|
270
|
+
type ZodFormFieldConfig<TFieldValues extends FieldValues> = Omit<StringFieldConfig<TFieldValues>, "rules"> | Omit<BooleanFieldConfig<TFieldValues>, "rules"> | Omit<RadioFieldConfig<TFieldValues>, "rules"> | Omit<CheckboxGroupFieldConfig<TFieldValues>, "rules"> | Omit<SliderFieldConfig<TFieldValues>, "rules"> | Omit<DateFieldConfig<TFieldValues>, "rules"> | Omit<FileFieldConfig<TFieldValues>, "rules"> | Omit<FontPickerFieldConfig<TFieldValues>, "rules"> | Omit<StringArrayFieldConfig<TFieldValues>, "rules"> | Omit<CustomFieldConfig<TFieldValues>, "rules"> | Omit<ConditionalFieldConfig<TFieldValues>, "rules"> | Omit<FieldArrayConfig<TFieldValues>, "rules"> | Omit<DynamicSectionConfig<TFieldValues>, "rules"> | ContentFieldConfig<TFieldValues>;
|
|
221
271
|
interface ZodFormConfig<TFieldValues extends FieldValues> extends UseFormProps<TFieldValues> {
|
|
222
272
|
schema: zod.ZodSchema<TFieldValues>;
|
|
223
|
-
fields: ZodFormFieldConfig<TFieldValues>
|
|
273
|
+
fields: (ZodFormFieldConfig<TFieldValues> | (Omit<ZodFormFieldConfig<FieldValues>, "name"> & {
|
|
274
|
+
name: Path<TFieldValues>;
|
|
275
|
+
}))[];
|
|
224
276
|
onError?: (errors: FieldErrors<TFieldValues>) => void;
|
|
225
277
|
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
226
278
|
}
|
|
@@ -308,7 +360,7 @@ interface FormProps$1<T extends FieldValues> {
|
|
|
308
360
|
submitButtonText?: string;
|
|
309
361
|
subtitle?: string;
|
|
310
362
|
title?: string;
|
|
311
|
-
defaultValues?:
|
|
363
|
+
defaultValues?: DefaultValues<T>;
|
|
312
364
|
}
|
|
313
365
|
/**
|
|
314
366
|
* Base form component for building forms without Zod validation.
|
|
@@ -364,11 +416,16 @@ interface FormProps$1<T extends FieldValues> {
|
|
|
364
416
|
declare function ConfigurableForm<T extends FieldValues>({ className, columns, defaultValues, fields, layout, onError, onSubmit, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: FormProps$1<T>): React$1.JSX.Element;
|
|
365
417
|
|
|
366
418
|
interface FormFieldProps<TFieldValues extends FieldValues> {
|
|
367
|
-
config: FormFieldConfig<TFieldValues
|
|
419
|
+
config: FormFieldConfig<TFieldValues> | ZodFormFieldConfig<TFieldValues> | (Omit<FormFieldConfig<FieldValues>, "name"> & {
|
|
420
|
+
name: Path<TFieldValues>;
|
|
421
|
+
}) | (Omit<ZodFormFieldConfig<FieldValues>, "name"> & {
|
|
422
|
+
name: Path<TFieldValues>;
|
|
423
|
+
});
|
|
368
424
|
form: UseFormReturn<TFieldValues>;
|
|
369
425
|
submissionState: FormSubmissionState;
|
|
370
426
|
}
|
|
371
|
-
declare
|
|
427
|
+
declare function FormFieldComponent<TFieldValues extends FieldValues>({ config, form, submissionState, }: FormFieldProps<TFieldValues>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
|
|
428
|
+
declare const FormField: typeof FormFieldComponent;
|
|
372
429
|
|
|
373
430
|
type ServerAction<TState = unknown, TFormData = FormData> = (state: TState | undefined, formData: TFormData) => Promise<TState>;
|
|
374
431
|
interface ActionState {
|
|
@@ -384,8 +441,12 @@ interface ServerActionFormProps<T extends FieldValues> {
|
|
|
384
441
|
className?: string;
|
|
385
442
|
columns?: 1 | 2 | 3;
|
|
386
443
|
/** Default values for form fields */
|
|
387
|
-
defaultValues?: Partial<T>;
|
|
388
|
-
fields: FormFieldConfig<T>
|
|
444
|
+
defaultValues?: Partial<T> | Record<string, unknown>;
|
|
445
|
+
fields: (FormFieldConfig<T> | FormFieldConfig<any> | ZodFormFieldConfig<any> | (Omit<FormFieldConfig<FieldValues>, "name"> & {
|
|
446
|
+
name: Path<T>;
|
|
447
|
+
}) | (Omit<ZodFormFieldConfig<FieldValues>, "name"> & {
|
|
448
|
+
name: Path<T>;
|
|
449
|
+
}))[];
|
|
389
450
|
/** Initial state for useActionState */
|
|
390
451
|
initialState?: ActionState;
|
|
391
452
|
layout?: "vertical" | "horizontal" | "grid";
|
|
@@ -494,7 +555,7 @@ interface ServerActionFormProps<T extends FieldValues> {
|
|
|
494
555
|
* @see {@link ConfigurableForm} for forms without Server Actions
|
|
495
556
|
* @category Components
|
|
496
557
|
*/
|
|
497
|
-
declare function ServerActionForm<T extends FieldValues>({ action, className, clientValidationSchema, columns, defaultValues, fields, initialState, layout, onError, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ServerActionFormProps<T>): React$1.JSX.Element;
|
|
558
|
+
declare function ServerActionForm<T extends FieldValues = FieldValues>({ action, className, clientValidationSchema, columns, defaultValues, fields, initialState, layout, onError, onSuccess, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ServerActionFormProps<T>): React$1.JSX.Element;
|
|
498
559
|
|
|
499
560
|
/**
|
|
500
561
|
* Configuration for an autocomplete option.
|
|
@@ -698,6 +759,119 @@ type CheckboxFieldProps<TFieldValues extends FieldValues> = FieldBaseProps<TFiel
|
|
|
698
759
|
*/
|
|
699
760
|
declare function CheckboxField<TFieldValues extends FieldValues>(props: CheckboxFieldProps<TFieldValues>): React$1.JSX.Element;
|
|
700
761
|
|
|
762
|
+
/**
|
|
763
|
+
* Configuration for a checkbox option in a checkbox group.
|
|
764
|
+
*
|
|
765
|
+
* @template TValue - The value type for the option
|
|
766
|
+
*/
|
|
767
|
+
interface CheckboxOption<TValue extends string | number> {
|
|
768
|
+
/** Display label for the option */
|
|
769
|
+
label: string;
|
|
770
|
+
/** Value of the option */
|
|
771
|
+
value: TValue;
|
|
772
|
+
/** Optional description text */
|
|
773
|
+
description?: string;
|
|
774
|
+
/** Whether the option is disabled */
|
|
775
|
+
disabled?: boolean;
|
|
776
|
+
}
|
|
777
|
+
/**
|
|
778
|
+
* Props for the CheckboxGroupField component.
|
|
779
|
+
*
|
|
780
|
+
* @template TFieldValues - The form data type
|
|
781
|
+
* @template TValue - The value type for the checkbox group (string or number)
|
|
782
|
+
*
|
|
783
|
+
* @example
|
|
784
|
+
* ```tsx
|
|
785
|
+
* import { CheckboxGroupField } from "@rachelallyson/hero-hook-form";
|
|
786
|
+
* import { useForm } from "react-hook-form";
|
|
787
|
+
*
|
|
788
|
+
* const form = useForm({
|
|
789
|
+
* defaultValues: { interests: [] },
|
|
790
|
+
* });
|
|
791
|
+
*
|
|
792
|
+
* const options = [
|
|
793
|
+
* { label: "Reading", value: "reading" },
|
|
794
|
+
* { label: "Sports", value: "sports" },
|
|
795
|
+
* { label: "Music", value: "music" },
|
|
796
|
+
* ];
|
|
797
|
+
*
|
|
798
|
+
* <CheckboxGroupField
|
|
799
|
+
* control={form.control}
|
|
800
|
+
* name="interests"
|
|
801
|
+
* label="Interests"
|
|
802
|
+
* options={options}
|
|
803
|
+
* />
|
|
804
|
+
* ```
|
|
805
|
+
*/
|
|
806
|
+
type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TValue extends string | number = string> = FieldBaseProps<TFieldValues, TValue[]> & WithControl<TFieldValues> & {
|
|
807
|
+
/** Array of checkbox options */
|
|
808
|
+
options: readonly CheckboxOption<TValue>[];
|
|
809
|
+
/** Additional props to pass to individual Checkbox components */
|
|
810
|
+
checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled" | "name">;
|
|
811
|
+
/** Layout orientation for the checkboxes */
|
|
812
|
+
orientation?: "vertical" | "horizontal";
|
|
813
|
+
};
|
|
814
|
+
/**
|
|
815
|
+
* A checkbox group field component that integrates React Hook Form with HeroUI Checkbox.
|
|
816
|
+
*
|
|
817
|
+
* This component provides a type-safe checkbox group field with validation support,
|
|
818
|
+
* error handling, and accessibility features. Multiple options can be selected,
|
|
819
|
+
* and the value is stored as an array of selected option values.
|
|
820
|
+
*
|
|
821
|
+
* @template TFieldValues - The form data type
|
|
822
|
+
* @template TValue - The value type for the checkbox group (string or number)
|
|
823
|
+
*
|
|
824
|
+
* @param props - The checkbox group field props
|
|
825
|
+
* @returns The rendered checkbox group field component
|
|
826
|
+
*
|
|
827
|
+
* @example
|
|
828
|
+
* ```tsx
|
|
829
|
+
* import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
|
|
830
|
+
* import { z } from "zod";
|
|
831
|
+
*
|
|
832
|
+
* const schema = z.object({
|
|
833
|
+
* interests: z.array(z.string()).min(1, "Please select at least one interest"),
|
|
834
|
+
* });
|
|
835
|
+
*
|
|
836
|
+
* const options = [
|
|
837
|
+
* { label: "Reading", value: "reading" },
|
|
838
|
+
* { label: "Sports", value: "sports" },
|
|
839
|
+
* { label: "Music", value: "music" },
|
|
840
|
+
* ];
|
|
841
|
+
*
|
|
842
|
+
* function MyForm() {
|
|
843
|
+
* return (
|
|
844
|
+
* <ZodForm
|
|
845
|
+
* config={{
|
|
846
|
+
* schema,
|
|
847
|
+
* fields: [
|
|
848
|
+
* FormFieldHelpers.checkboxGroup("interests", "Interests", options),
|
|
849
|
+
* ],
|
|
850
|
+
* }}
|
|
851
|
+
* onSubmit={(data) => console.log(data)}
|
|
852
|
+
* />
|
|
853
|
+
* );
|
|
854
|
+
* }
|
|
855
|
+
* ```
|
|
856
|
+
*
|
|
857
|
+
* @example
|
|
858
|
+
* ```tsx
|
|
859
|
+
* // With custom styling and horizontal layout
|
|
860
|
+
* <CheckboxGroupField
|
|
861
|
+
* control={form.control}
|
|
862
|
+
* name="interests"
|
|
863
|
+
* label="Interests"
|
|
864
|
+
* options={options}
|
|
865
|
+
* orientation="horizontal"
|
|
866
|
+
* checkboxProps={{
|
|
867
|
+
* color: "primary",
|
|
868
|
+
* size: "lg",
|
|
869
|
+
* }}
|
|
870
|
+
* />
|
|
871
|
+
* ```
|
|
872
|
+
*/
|
|
873
|
+
declare function CheckboxGroupField<TFieldValues extends FieldValues, TValue extends string | number = string>(props: CheckboxGroupFieldProps<TFieldValues, TValue>): React$1.JSX.Element;
|
|
874
|
+
|
|
701
875
|
/**
|
|
702
876
|
* Props for the DateField component.
|
|
703
877
|
*
|
|
@@ -1423,7 +1597,7 @@ interface UseFormHelperOptions<T extends FieldValues> {
|
|
|
1423
1597
|
onError?: (error: FormValidationError) => void;
|
|
1424
1598
|
onSubmit: SubmitHandler<T>;
|
|
1425
1599
|
onSuccess?: (data: T) => void;
|
|
1426
|
-
defaultValues?:
|
|
1600
|
+
defaultValues?: DefaultValues<T>;
|
|
1427
1601
|
methods?: UseFormReturn<T>;
|
|
1428
1602
|
}
|
|
1429
1603
|
/**
|
|
@@ -1558,7 +1732,7 @@ declare function useFormHelper<T extends FieldValues>({ defaultValues, methods,
|
|
|
1558
1732
|
* @category Hooks
|
|
1559
1733
|
*/
|
|
1560
1734
|
declare function useHeroForm<TFieldValues extends FieldValues>(): {
|
|
1561
|
-
defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "
|
|
1735
|
+
defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "checkbox" | "switch" | "slider" | "radioGroup" | "dateInput" | "submitButton">>;
|
|
1562
1736
|
watch: react_hook_form.UseFormWatch<TFieldValues>;
|
|
1563
1737
|
getValues: react_hook_form.UseFormGetValues<TFieldValues>;
|
|
1564
1738
|
getFieldState: react_hook_form.UseFormGetFieldState<TFieldValues>;
|
|
@@ -2001,6 +2175,7 @@ interface ZodFormProps<T extends FieldValues> {
|
|
|
2001
2175
|
className?: string;
|
|
2002
2176
|
columns?: 1 | 2 | 3;
|
|
2003
2177
|
config: ZodFormConfig<T>;
|
|
2178
|
+
errorDisplay?: "inline" | "toast" | "modal" | "none";
|
|
2004
2179
|
layout?: "vertical" | "horizontal" | "grid";
|
|
2005
2180
|
onError?: (error: FormValidationError) => void;
|
|
2006
2181
|
onSubmit: SubmitHandler<T>;
|
|
@@ -2177,7 +2352,7 @@ declare function useZodForm<TFieldValues extends FieldValues>(config: ZodFormCon
|
|
|
2177
2352
|
/**
|
|
2178
2353
|
* Helper function to create Zod form configurations
|
|
2179
2354
|
*/
|
|
2180
|
-
declare function createZodFormConfig<TFieldValues extends FieldValues>(schema: z.ZodSchema<TFieldValues>, fields: ZodFormFieldConfig<TFieldValues>[], defaultValues?:
|
|
2355
|
+
declare function createZodFormConfig<TFieldValues extends FieldValues>(schema: z.ZodSchema<TFieldValues>, fields: ZodFormFieldConfig<TFieldValues>[], defaultValues?: DefaultValues<TFieldValues>): ZodFormConfig<TFieldValues>;
|
|
2181
2356
|
|
|
2182
2357
|
/**
|
|
2183
2358
|
* Basic form field builder for creating form field configurations.
|
|
@@ -2327,6 +2502,11 @@ declare function createBasicFormBuilder<T extends FieldValues>(): BasicFormBuild
|
|
|
2327
2502
|
* @see {@link createBasicFormBuilder} for builder pattern alternative
|
|
2328
2503
|
* @category Builders
|
|
2329
2504
|
*/
|
|
2505
|
+
type InputPropsType = Omit<React$1.ComponentProps<typeof Input>, "value" | "onValueChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">;
|
|
2506
|
+
declare function inputHelper<T extends FieldValues>(name: Path<T>, label: string): ZodFormFieldConfig<T>;
|
|
2507
|
+
declare function inputHelper<T extends FieldValues>(name: Path<T>, label: string, type: "text" | "email" | "tel" | "password"): ZodFormFieldConfig<T>;
|
|
2508
|
+
declare function inputHelper<T extends FieldValues>(name: Path<T>, label: string, inputProps: InputPropsType): ZodFormFieldConfig<T>;
|
|
2509
|
+
declare function inputHelper<T extends FieldValues>(name: Path<T>, label: string, type: "text" | "email" | "tel" | "password", inputProps: InputPropsType): ZodFormFieldConfig<T>;
|
|
2330
2510
|
declare const FormFieldHelpers: {
|
|
2331
2511
|
/**
|
|
2332
2512
|
* Create an autocomplete field
|
|
@@ -2366,6 +2546,33 @@ declare const FormFieldHelpers: {
|
|
|
2366
2546
|
* ```
|
|
2367
2547
|
*/
|
|
2368
2548
|
checkbox: <T extends FieldValues>(name: Path<T>, label: string, checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled">) => ZodFormFieldConfig<T>;
|
|
2549
|
+
/**
|
|
2550
|
+
* Create a checkbox group field (multiple checkboxes saving to an array)
|
|
2551
|
+
*
|
|
2552
|
+
* @example
|
|
2553
|
+
* ```tsx
|
|
2554
|
+
* // Simple checkbox group
|
|
2555
|
+
* FormFieldHelpers.checkboxGroup("interests", "Interests", [
|
|
2556
|
+
* { label: "Reading", value: "reading" },
|
|
2557
|
+
* { label: "Sports", value: "sports" },
|
|
2558
|
+
* { label: "Music", value: "music" },
|
|
2559
|
+
* ])
|
|
2560
|
+
*
|
|
2561
|
+
* // With horizontal layout and custom styling
|
|
2562
|
+
* FormFieldHelpers.checkboxGroup("interests", "Interests", options, {
|
|
2563
|
+
* orientation: "horizontal",
|
|
2564
|
+
* checkboxProps: { color: "primary", size: "lg" }
|
|
2565
|
+
* })
|
|
2566
|
+
* ```
|
|
2567
|
+
*/
|
|
2568
|
+
checkboxGroup: <T extends FieldValues>(name: Path<T>, label: string, options: {
|
|
2569
|
+
label: string;
|
|
2570
|
+
value: string | number;
|
|
2571
|
+
}[], config?: {
|
|
2572
|
+
checkboxProps?: Omit<React$1.ComponentProps<typeof Checkbox>, "isSelected" | "onValueChange" | "isInvalid" | "errorMessage" | "isDisabled" | "name">;
|
|
2573
|
+
orientation?: "vertical" | "horizontal";
|
|
2574
|
+
description?: string;
|
|
2575
|
+
}) => ZodFormFieldConfig<T>;
|
|
2369
2576
|
/**
|
|
2370
2577
|
* Create a conditional field that shows/hides based on form data
|
|
2371
2578
|
*
|
|
@@ -2411,7 +2618,34 @@ declare const FormFieldHelpers: {
|
|
|
2411
2618
|
isSubmitting: boolean;
|
|
2412
2619
|
}) => React$1.ReactNode;
|
|
2413
2620
|
className?: string;
|
|
2414
|
-
name?:
|
|
2621
|
+
name?: Path<T>;
|
|
2622
|
+
}) => ZodFormFieldConfig<T>;
|
|
2623
|
+
/**
|
|
2624
|
+
* Create a custom field with full control over rendering
|
|
2625
|
+
*
|
|
2626
|
+
* @example
|
|
2627
|
+
* ```tsx
|
|
2628
|
+
* // Custom field with render function
|
|
2629
|
+
* FormFieldHelpers.custom<FormData>(
|
|
2630
|
+
* "skills",
|
|
2631
|
+
* "Skills",
|
|
2632
|
+
* ({ form, control }) => {
|
|
2633
|
+
* // Custom rendering logic
|
|
2634
|
+
* return <div>...</div>;
|
|
2635
|
+
* }
|
|
2636
|
+
* )
|
|
2637
|
+
* ```
|
|
2638
|
+
*/
|
|
2639
|
+
custom: <T extends FieldValues>(name: Path<T> | ArrayPath<T>, label: string, render: (field: {
|
|
2640
|
+
name: Path<T> | ArrayPath<T>;
|
|
2641
|
+
control: Control<T>;
|
|
2642
|
+
form: UseFormReturn<T>;
|
|
2643
|
+
errors: FieldErrors<T>;
|
|
2644
|
+
isSubmitting: boolean;
|
|
2645
|
+
}) => React$1.ReactNode, options?: {
|
|
2646
|
+
description?: string;
|
|
2647
|
+
className?: string;
|
|
2648
|
+
isDisabled?: boolean;
|
|
2415
2649
|
}) => ZodFormFieldConfig<T>;
|
|
2416
2650
|
/**
|
|
2417
2651
|
* Create a date field
|
|
@@ -2490,7 +2724,10 @@ declare const FormFieldHelpers: {
|
|
|
2490
2724
|
* // With type
|
|
2491
2725
|
* FormFieldHelpers.input("email", "Email", "email")
|
|
2492
2726
|
*
|
|
2493
|
-
* // With
|
|
2727
|
+
* // With props only (no type)
|
|
2728
|
+
* FormFieldHelpers.input("name", "Name", { placeholder: "Enter name" })
|
|
2729
|
+
*
|
|
2730
|
+
* // With type and props
|
|
2494
2731
|
* FormFieldHelpers.input("email", "Email", "email", {
|
|
2495
2732
|
* placeholder: "Enter your email",
|
|
2496
2733
|
* classNames: { input: "custom-input" },
|
|
@@ -2499,7 +2736,25 @@ declare const FormFieldHelpers: {
|
|
|
2499
2736
|
* })
|
|
2500
2737
|
* ```
|
|
2501
2738
|
*/
|
|
2502
|
-
input:
|
|
2739
|
+
input: typeof inputHelper;
|
|
2740
|
+
/**
|
|
2741
|
+
* Create a radio group field
|
|
2742
|
+
*
|
|
2743
|
+
* @example
|
|
2744
|
+
* ```tsx
|
|
2745
|
+
* // Simple radio group
|
|
2746
|
+
* FormFieldHelpers.radio("gender", "Gender", [
|
|
2747
|
+
* { label: "Male", value: "male" },
|
|
2748
|
+
* { label: "Female", value: "female" }
|
|
2749
|
+
* ])
|
|
2750
|
+
*
|
|
2751
|
+
* // With full customization
|
|
2752
|
+
* FormFieldHelpers.radio("gender", "Gender", options, {
|
|
2753
|
+
* orientation: "horizontal",
|
|
2754
|
+
* classNames: { base: "custom-radio" }
|
|
2755
|
+
* })
|
|
2756
|
+
* ```
|
|
2757
|
+
*/
|
|
2503
2758
|
/**
|
|
2504
2759
|
* Create a radio group field
|
|
2505
2760
|
*
|
|
@@ -2604,6 +2859,26 @@ declare const FormFieldHelpers: {
|
|
|
2604
2859
|
};
|
|
2605
2860
|
/**
|
|
2606
2861
|
* Common field collections
|
|
2862
|
+
*
|
|
2863
|
+
* These helpers provide reusable field sets for common form patterns.
|
|
2864
|
+
* The `as Path<T>` assertions are necessary because TypeScript cannot prove
|
|
2865
|
+
* that string literals like "street" or "email" are valid paths in an arbitrary
|
|
2866
|
+
* form type `T`. These helpers are designed to work with any form type that
|
|
2867
|
+
* happens to have these fields - the type safety is enforced when you use them
|
|
2868
|
+
* with a specific form schema.
|
|
2869
|
+
*
|
|
2870
|
+
* @example
|
|
2871
|
+
* ```tsx
|
|
2872
|
+
* const schema = z.object({
|
|
2873
|
+
* street: z.string(),
|
|
2874
|
+
* city: z.string(),
|
|
2875
|
+
* // ... other fields
|
|
2876
|
+
* });
|
|
2877
|
+
*
|
|
2878
|
+
* const fields = [
|
|
2879
|
+
* ...CommonFields.address<z.infer<typeof schema>>(),
|
|
2880
|
+
* ];
|
|
2881
|
+
* ```
|
|
2607
2882
|
*/
|
|
2608
2883
|
declare const CommonFields: {
|
|
2609
2884
|
/**
|
|
@@ -2621,10 +2896,163 @@ declare const CommonFields: {
|
|
|
2621
2896
|
};
|
|
2622
2897
|
|
|
2623
2898
|
/**
|
|
2624
|
-
*
|
|
2625
|
-
*
|
|
2899
|
+
* Discriminated union types for field creation parameters
|
|
2900
|
+
* This eliminates the need for 'unknown' types and type assertions
|
|
2626
2901
|
*/
|
|
2627
|
-
|
|
2902
|
+
type FieldCreationParams<T extends FieldValues> = {
|
|
2903
|
+
type: "input";
|
|
2904
|
+
name: Path<T>;
|
|
2905
|
+
label: string;
|
|
2906
|
+
props?: {
|
|
2907
|
+
type?: "text" | "email" | "tel" | "password" | "number" | "url";
|
|
2908
|
+
placeholder?: string;
|
|
2909
|
+
description?: string;
|
|
2910
|
+
isDisabled?: boolean;
|
|
2911
|
+
className?: string;
|
|
2912
|
+
};
|
|
2913
|
+
} | {
|
|
2914
|
+
type: "textarea";
|
|
2915
|
+
name: Path<T>;
|
|
2916
|
+
label: string;
|
|
2917
|
+
props?: {
|
|
2918
|
+
placeholder?: string;
|
|
2919
|
+
description?: string;
|
|
2920
|
+
isDisabled?: boolean;
|
|
2921
|
+
className?: string;
|
|
2922
|
+
rows?: number;
|
|
2923
|
+
};
|
|
2924
|
+
} | {
|
|
2925
|
+
type: "select";
|
|
2926
|
+
name: Path<T>;
|
|
2927
|
+
label: string;
|
|
2928
|
+
options: {
|
|
2929
|
+
label: string;
|
|
2930
|
+
value: string | number;
|
|
2931
|
+
}[];
|
|
2932
|
+
} | {
|
|
2933
|
+
type: "autocomplete";
|
|
2934
|
+
name: Path<T>;
|
|
2935
|
+
label: string;
|
|
2936
|
+
options: {
|
|
2937
|
+
label: string;
|
|
2938
|
+
value: string | number;
|
|
2939
|
+
}[];
|
|
2940
|
+
props?: Record<string, unknown>;
|
|
2941
|
+
} | {
|
|
2942
|
+
type: "checkbox";
|
|
2943
|
+
name: Path<T>;
|
|
2944
|
+
label: string;
|
|
2945
|
+
props?: {
|
|
2946
|
+
description?: string;
|
|
2947
|
+
isDisabled?: boolean;
|
|
2948
|
+
className?: string;
|
|
2949
|
+
};
|
|
2950
|
+
} | {
|
|
2951
|
+
type: "switch";
|
|
2952
|
+
name: Path<T>;
|
|
2953
|
+
label: string;
|
|
2954
|
+
props?: {
|
|
2955
|
+
description?: string;
|
|
2956
|
+
isDisabled?: boolean;
|
|
2957
|
+
className?: string;
|
|
2958
|
+
};
|
|
2959
|
+
} | {
|
|
2960
|
+
type: "radio";
|
|
2961
|
+
name: Path<T>;
|
|
2962
|
+
label: string;
|
|
2963
|
+
options: {
|
|
2964
|
+
label: string;
|
|
2965
|
+
value: string | number;
|
|
2966
|
+
}[];
|
|
2967
|
+
props?: {
|
|
2968
|
+
description?: string;
|
|
2969
|
+
isDisabled?: boolean;
|
|
2970
|
+
className?: string;
|
|
2971
|
+
orientation?: "horizontal" | "vertical";
|
|
2972
|
+
};
|
|
2973
|
+
} | {
|
|
2974
|
+
type: "slider";
|
|
2975
|
+
name: Path<T>;
|
|
2976
|
+
label: string;
|
|
2977
|
+
props?: {
|
|
2978
|
+
min?: number;
|
|
2979
|
+
max?: number;
|
|
2980
|
+
step?: number;
|
|
2981
|
+
description?: string;
|
|
2982
|
+
isDisabled?: boolean;
|
|
2983
|
+
className?: string;
|
|
2984
|
+
};
|
|
2985
|
+
} | {
|
|
2986
|
+
type: "date";
|
|
2987
|
+
name: Path<T>;
|
|
2988
|
+
label: string;
|
|
2989
|
+
props?: {
|
|
2990
|
+
placeholder?: string;
|
|
2991
|
+
description?: string;
|
|
2992
|
+
isDisabled?: boolean;
|
|
2993
|
+
className?: string;
|
|
2994
|
+
};
|
|
2995
|
+
} | {
|
|
2996
|
+
type: "file";
|
|
2997
|
+
name: Path<T>;
|
|
2998
|
+
label: string;
|
|
2999
|
+
props?: {
|
|
3000
|
+
accept?: string;
|
|
3001
|
+
multiple?: boolean;
|
|
3002
|
+
description?: string;
|
|
3003
|
+
isDisabled?: boolean;
|
|
3004
|
+
className?: string;
|
|
3005
|
+
};
|
|
3006
|
+
} | {
|
|
3007
|
+
type: "fontPicker";
|
|
3008
|
+
name: Path<T>;
|
|
3009
|
+
label: string;
|
|
3010
|
+
props?: {
|
|
3011
|
+
description?: string;
|
|
3012
|
+
isDisabled?: boolean;
|
|
3013
|
+
className?: string;
|
|
3014
|
+
fontPickerProps?: {
|
|
3015
|
+
showFontPreview?: boolean;
|
|
3016
|
+
loadAllVariants?: boolean;
|
|
3017
|
+
onFontsLoaded?: (loaded: boolean) => void;
|
|
3018
|
+
fontsLoadedTimeout?: number;
|
|
3019
|
+
};
|
|
3020
|
+
};
|
|
3021
|
+
} | {
|
|
3022
|
+
type: "stringArray";
|
|
3023
|
+
name: Path<T>;
|
|
3024
|
+
label: string;
|
|
3025
|
+
props?: {
|
|
3026
|
+
placeholder?: string;
|
|
3027
|
+
maxItems?: number;
|
|
3028
|
+
minItems?: number;
|
|
3029
|
+
allowDuplicates?: boolean;
|
|
3030
|
+
validateItem?: (item: string) => string | true;
|
|
3031
|
+
transformItem?: (item: string) => string;
|
|
3032
|
+
addButtonText?: string;
|
|
3033
|
+
showAddButton?: boolean;
|
|
3034
|
+
description?: string;
|
|
3035
|
+
isDisabled?: boolean;
|
|
3036
|
+
className?: string;
|
|
3037
|
+
};
|
|
3038
|
+
} | {
|
|
3039
|
+
type: "content";
|
|
3040
|
+
name?: Path<T>;
|
|
3041
|
+
label?: string;
|
|
3042
|
+
title?: string | null;
|
|
3043
|
+
description?: string | null;
|
|
3044
|
+
render?: (field: {
|
|
3045
|
+
form: UseFormReturn<T>;
|
|
3046
|
+
errors: FieldErrors<T>;
|
|
3047
|
+
isSubmitting: boolean;
|
|
3048
|
+
}) => React$1.ReactNode;
|
|
3049
|
+
className?: string;
|
|
3050
|
+
};
|
|
3051
|
+
/**
|
|
3052
|
+
* Unified field creation function using discriminated union types
|
|
3053
|
+
* This provides full type safety without complex overloads
|
|
3054
|
+
*/
|
|
3055
|
+
declare function createField<T extends FieldValues>(params: FieldCreationParams<T>): ZodFormFieldConfig<T>;
|
|
2628
3056
|
/**
|
|
2629
3057
|
* Builder pattern for advanced field creation
|
|
2630
3058
|
*/
|
|
@@ -2633,21 +3061,7 @@ declare class AdvancedFieldBuilder<T extends FieldValues> {
|
|
|
2633
3061
|
/**
|
|
2634
3062
|
* Add any field type using the unified API
|
|
2635
3063
|
*/
|
|
2636
|
-
field(
|
|
2637
|
-
field(type: "textarea", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2638
|
-
field(type: "select", name: Path<T>, label: string, options: {
|
|
2639
|
-
label: string;
|
|
2640
|
-
value: string | number;
|
|
2641
|
-
}[], props?: Parameters<typeof createField<T>>[4]): this;
|
|
2642
|
-
field(type: "checkbox", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2643
|
-
field(type: "switch", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2644
|
-
field(type: "radio", name: Path<T>, label: string, options: {
|
|
2645
|
-
label: string;
|
|
2646
|
-
value: string | number;
|
|
2647
|
-
}[], props?: Parameters<typeof createField<T>>[4]): this;
|
|
2648
|
-
field(type: "slider", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2649
|
-
field(type: "date", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
2650
|
-
field(type: "file", name: Path<T>, label: string, props?: Parameters<typeof createField<T>>[3]): this;
|
|
3064
|
+
field(params: FieldCreationParams<T>): this;
|
|
2651
3065
|
/**
|
|
2652
3066
|
* Add a conditional field that shows/hides based on form data
|
|
2653
3067
|
*/
|
|
@@ -2655,7 +3069,7 @@ declare class AdvancedFieldBuilder<T extends FieldValues> {
|
|
|
2655
3069
|
/**
|
|
2656
3070
|
* Add a field array for dynamic repeating field groups
|
|
2657
3071
|
*/
|
|
2658
|
-
fieldArray(name:
|
|
3072
|
+
fieldArray(name: ArrayPath<T>, label: string, fields: ZodFormFieldConfig<T>[], options?: {
|
|
2659
3073
|
min?: number;
|
|
2660
3074
|
max?: number;
|
|
2661
3075
|
addButtonText?: string;
|
|
@@ -2681,22 +3095,7 @@ declare class FieldArrayItemBuilder<TItem extends FieldValues> {
|
|
|
2681
3095
|
/**
|
|
2682
3096
|
* Add any field type using the unified API for array items
|
|
2683
3097
|
*/
|
|
2684
|
-
field(
|
|
2685
|
-
field(type: "textarea", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2686
|
-
field(type: "select", name: Path<TItem>, label: string, options: {
|
|
2687
|
-
label: string;
|
|
2688
|
-
value: string | number;
|
|
2689
|
-
}[], props?: Parameters<typeof createField<TItem>>[4]): this;
|
|
2690
|
-
field(type: "checkbox", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2691
|
-
field(type: "switch", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2692
|
-
field(type: "radio", name: Path<TItem>, label: string, options: {
|
|
2693
|
-
label: string;
|
|
2694
|
-
value: string | number;
|
|
2695
|
-
}[], props?: Parameters<typeof createField<TItem>>[4]): this;
|
|
2696
|
-
field(type: "slider", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2697
|
-
field(type: "date", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2698
|
-
field(type: "file", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
2699
|
-
field(type: "fontPicker", name: Path<TItem>, label: string, props?: Parameters<typeof createField<TItem>>[3]): this;
|
|
3098
|
+
field(params: FieldCreationParams<TItem>): this;
|
|
2700
3099
|
/**
|
|
2701
3100
|
* Build the field array item configuration
|
|
2702
3101
|
*/
|
|
@@ -2713,8 +3112,8 @@ declare class FieldArrayBuilder<T extends FieldValues, TArrayName extends Path<T
|
|
|
2713
3112
|
private arrayName;
|
|
2714
3113
|
private fields;
|
|
2715
3114
|
constructor(arrayName: TArrayName);
|
|
2716
|
-
field(
|
|
2717
|
-
build(): ZodFormFieldConfig<
|
|
3115
|
+
field(params: FieldCreationParams<Record<string, any>>): this;
|
|
3116
|
+
build(): ZodFormFieldConfig<T>[];
|
|
2718
3117
|
}
|
|
2719
3118
|
/**
|
|
2720
3119
|
* Create a field array builder that constructs proper paths for array items
|
|
@@ -2883,17 +3282,32 @@ declare const field: {
|
|
|
2883
3282
|
textarea: <T extends FieldValues>(name: Path<T>, label: string, options?: Parameters<TypeInferredBuilder<T>["textarea"]>[2]) => TypeInferredBuilder<T>;
|
|
2884
3283
|
};
|
|
2885
3284
|
|
|
3285
|
+
/**
|
|
3286
|
+
* Helper type to construct a nested path from a base path and sub-path.
|
|
3287
|
+
* Attempts to construct the path and falls back to Path<T> if TypeScript
|
|
3288
|
+
* can't verify the nested structure at compile time.
|
|
3289
|
+
*
|
|
3290
|
+
* @example
|
|
3291
|
+
* type T = { user: { name: string } };
|
|
3292
|
+
* type Nested = ConstructNestedPath<T, "user", "name">; // "user.name"
|
|
3293
|
+
*/
|
|
3294
|
+
type ConstructNestedPath<T extends FieldValues, TBasePath extends Path<T>, TSubPath extends string> = `${TBasePath}.${TSubPath}` extends Path<T> ? `${TBasePath}.${TSubPath}` : Path<T>;
|
|
2886
3295
|
/**
|
|
2887
3296
|
* Enhanced nested path builder with better syntax for complex nested structures
|
|
2888
3297
|
* Provides multiple approaches for handling nested field paths
|
|
2889
3298
|
*/
|
|
2890
3299
|
declare class NestedPathBuilder<T extends FieldValues> {
|
|
2891
|
-
|
|
3300
|
+
fields: ZodFormFieldConfig<T>[];
|
|
2892
3301
|
/**
|
|
2893
3302
|
* Create a nested object path builder
|
|
2894
3303
|
* Usage: builder.nest("address").field("street", "Street Address")
|
|
3304
|
+
*
|
|
3305
|
+
* @param path - A path in the form data structure. When called from root level,
|
|
3306
|
+
* accepts Path<T>. When called after .end() from a nested context,
|
|
3307
|
+
* accepts any string for nested paths under sections.
|
|
3308
|
+
* @returns A builder for nested paths under the specified path
|
|
2895
3309
|
*/
|
|
2896
|
-
nest
|
|
3310
|
+
nest(path: string & {}): NestedObjectBuilder<T, Path<T>>;
|
|
2897
3311
|
/**
|
|
2898
3312
|
* Create a section-based path builder
|
|
2899
3313
|
* Usage: builder.section("shipping").field("street", "Street Address")
|
|
@@ -2901,14 +3315,14 @@ declare class NestedPathBuilder<T extends FieldValues> {
|
|
|
2901
3315
|
section<TPath extends Path<T>>(path: TPath): SectionBuilder<T, TPath>;
|
|
2902
3316
|
/**
|
|
2903
3317
|
* Add a field with single path
|
|
2904
|
-
* Usage: builder.field("firstName", "First Name")
|
|
3318
|
+
* Usage: builder.field({ type: "input", name: "firstName", label: "First Name" })
|
|
2905
3319
|
*/
|
|
2906
|
-
field(
|
|
3320
|
+
field(params: FieldCreationParams<T> | FieldCreationParams<Record<string, any>>): this;
|
|
2907
3321
|
/**
|
|
2908
3322
|
* Add a field with path segments
|
|
2909
|
-
* Usage: builder.fieldPath(
|
|
3323
|
+
* Usage: builder.fieldPath({ type: "input", name: path.join("."), label: "Full Name" })
|
|
2910
3324
|
*/
|
|
2911
|
-
fieldPath(
|
|
3325
|
+
fieldPath(params: FieldCreationParams<T>): this;
|
|
2912
3326
|
/**
|
|
2913
3327
|
* Add a field with template literal path
|
|
2914
3328
|
* Usage: builder.field`user.profile.name`("Full Name")
|
|
@@ -2930,11 +3344,16 @@ declare class NestedObjectBuilder<T extends FieldValues, TPath extends Path<T>>
|
|
|
2930
3344
|
/**
|
|
2931
3345
|
* Add a field to the current nested path
|
|
2932
3346
|
*/
|
|
2933
|
-
field
|
|
3347
|
+
field(params: FieldCreationParams<Record<string, any>>): NestedObjectBuilder<T, TPath>;
|
|
2934
3348
|
/**
|
|
2935
3349
|
* Nest deeper into the object
|
|
3350
|
+
*
|
|
3351
|
+
* @param subPath - A string representing a nested path under the current path.
|
|
3352
|
+
* The parameter accepts any string; TypeScript validates the constructed
|
|
3353
|
+
* path (basePath.subPath) in the return type.
|
|
3354
|
+
* @returns A builder for the nested path
|
|
2936
3355
|
*/
|
|
2937
|
-
nest<SubPath extends string>(subPath: SubPath): NestedObjectBuilder<T, TPath
|
|
3356
|
+
nest<SubPath extends string>(subPath: SubPath): NestedObjectBuilder<T, ConstructNestedPath<T, TPath, SubPath>>;
|
|
2938
3357
|
/**
|
|
2939
3358
|
* Return to the parent builder
|
|
2940
3359
|
*/
|
|
@@ -2950,20 +3369,25 @@ declare class SectionBuilder<T extends FieldValues, TPath extends Path<T>> {
|
|
|
2950
3369
|
/**
|
|
2951
3370
|
* Add a field to the current section
|
|
2952
3371
|
*/
|
|
2953
|
-
field
|
|
3372
|
+
field(params: FieldCreationParams<Record<string, any>>): SectionBuilder<T, TPath>;
|
|
2954
3373
|
/**
|
|
2955
3374
|
* Add multiple fields to the section
|
|
2956
3375
|
*/
|
|
2957
3376
|
fields(fieldDefinitions: {
|
|
2958
3377
|
name: string;
|
|
2959
3378
|
label: string;
|
|
2960
|
-
type?:
|
|
2961
|
-
props?:
|
|
3379
|
+
type?: FormFieldType;
|
|
3380
|
+
props?: Record<string, unknown>;
|
|
2962
3381
|
}[]): SectionBuilder<T, TPath>;
|
|
2963
3382
|
/**
|
|
2964
3383
|
* Nest deeper into the section
|
|
3384
|
+
*
|
|
3385
|
+
* @param subPath - A string representing a nested path under the current section path.
|
|
3386
|
+
* The parameter accepts any string; TypeScript validates the constructed
|
|
3387
|
+
* path (basePath.subPath) in the return type.
|
|
3388
|
+
* @returns A builder for the nested path
|
|
2965
3389
|
*/
|
|
2966
|
-
nest<SubPath extends string>(subPath: SubPath): NestedObjectBuilder<T, TPath
|
|
3390
|
+
nest<SubPath extends string = string>(subPath: SubPath): NestedObjectBuilder<T, ConstructNestedPath<T, TPath, string>>;
|
|
2967
3391
|
/**
|
|
2968
3392
|
* Return to the parent builder
|
|
2969
3393
|
*/
|
|
@@ -2979,7 +3403,9 @@ declare class FieldTemplateBuilder<T extends FieldValues> {
|
|
|
2979
3403
|
/**
|
|
2980
3404
|
* Complete the field definition
|
|
2981
3405
|
*/
|
|
2982
|
-
complete(
|
|
3406
|
+
complete(params: Omit<FieldCreationParams<Record<string, any>>, "name"> & {
|
|
3407
|
+
name?: string;
|
|
3408
|
+
}): NestedPathBuilder<T>;
|
|
2983
3409
|
}
|
|
2984
3410
|
/**
|
|
2985
3411
|
* Factory function for creating the nested path builder
|
|
@@ -2989,9 +3415,9 @@ declare function createNestedPathBuilder<T extends FieldValues>(): NestedPathBui
|
|
|
2989
3415
|
/**
|
|
2990
3416
|
* Options for the useDebouncedValidation hook.
|
|
2991
3417
|
*/
|
|
2992
|
-
interface UseDebouncedValidationOptions {
|
|
3418
|
+
interface UseDebouncedValidationOptions<T extends FieldValues = FieldValues> {
|
|
2993
3419
|
delay?: number;
|
|
2994
|
-
fields?:
|
|
3420
|
+
fields?: Path<T>[];
|
|
2995
3421
|
enabled?: boolean;
|
|
2996
3422
|
}
|
|
2997
3423
|
/**
|
|
@@ -3044,7 +3470,7 @@ interface UseDebouncedValidationOptions {
|
|
|
3044
3470
|
* @see {@link useDebouncedFieldValidation} for single field debouncing
|
|
3045
3471
|
* @category Hooks
|
|
3046
3472
|
*/
|
|
3047
|
-
declare function useDebouncedValidation<T extends
|
|
3473
|
+
declare function useDebouncedValidation<T extends FieldValues>(form: UseFormReturn<T>, options?: UseDebouncedValidationOptions<T>): {
|
|
3048
3474
|
debouncedTrigger: () => void;
|
|
3049
3475
|
isDebouncing: boolean;
|
|
3050
3476
|
};
|
|
@@ -3095,7 +3521,7 @@ declare function useDebouncedValidation<T extends Record<string, any>>(form: Use
|
|
|
3095
3521
|
* @see {@link useDebouncedValidation} for multiple fields
|
|
3096
3522
|
* @category Hooks
|
|
3097
3523
|
*/
|
|
3098
|
-
declare function useDebouncedFieldValidation<T extends
|
|
3524
|
+
declare function useDebouncedFieldValidation<T extends FieldValues>(form: UseFormReturn<T>, fieldName: Path<T>, options?: {
|
|
3099
3525
|
delay?: number;
|
|
3100
3526
|
enabled?: boolean;
|
|
3101
3527
|
}): {
|
|
@@ -3109,7 +3535,7 @@ declare function useDebouncedFieldValidation<T extends Record<string, any>>(form
|
|
|
3109
3535
|
* @template T - The form data type
|
|
3110
3536
|
*/
|
|
3111
3537
|
interface UseInferredFormOptions<T extends FieldValues> {
|
|
3112
|
-
defaultValues?:
|
|
3538
|
+
defaultValues?: DefaultValues<T>;
|
|
3113
3539
|
mode?: "onChange" | "onBlur" | "onSubmit" | "onTouched" | "all";
|
|
3114
3540
|
reValidateMode?: "onChange" | "onBlur" | "onSubmit";
|
|
3115
3541
|
shouldFocusError?: boolean;
|
|
@@ -3521,7 +3947,7 @@ declare function throttle<T extends (...args: any[]) => any>(func: T, limit: num
|
|
|
3521
3947
|
/**
|
|
3522
3948
|
* Memoization helper for expensive computations
|
|
3523
3949
|
*/
|
|
3524
|
-
declare function useMemoizedCallback<T extends (...args:
|
|
3950
|
+
declare function useMemoizedCallback<T extends (...args: unknown[]) => unknown>(callback: T, deps: React.DependencyList): T;
|
|
3525
3951
|
/**
|
|
3526
3952
|
* Shallow comparison for React.memo
|
|
3527
3953
|
*/
|
|
@@ -3783,4 +4209,4 @@ declare const validationUtils: {
|
|
|
3783
4209
|
}>;
|
|
3784
4210
|
};
|
|
3785
4211
|
|
|
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 };
|
|
4212
|
+
export { AdvancedFieldBuilder, type ArraySyncOptions, type ArraySyncResult, AutocompleteField, type AutocompleteFieldProps, type AutocompleteOption, type BaseFormFieldConfig, BasicFormBuilder, type BooleanFieldConfig, type ButtonDefaults, type CheckboxDefaults, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldConfig, type CheckboxGroupFieldProps, 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 FieldCreationParams, type FieldGroup, FileField, type FileFieldConfig, type FileFieldProps, 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 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 StringArrayFieldConfig, 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, pathToString, serverValidation, shallowEqual, simulateFieldInput, simulateFormSubmission, syncArrays, throttle, useDebouncedFieldValidation, useDebouncedValidation, useEnhancedFormState, useFormHelper, useHeroForm, useHeroHookFormDefaults, useInferredForm, useMemoizedCallback, useMemoizedFieldProps, usePerformanceMonitor, useTypeInferredForm, useZodForm, validationPatterns, validationUtils, waitForFormState };
|