react-hook-form 7.43.6 → 7.43.7

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.
Files changed (152) hide show
  1. package/dist/__tests__/controller.server.test.d.ts +1 -1
  2. package/dist/__tests__/controller.test.d.ts +1 -1
  3. package/dist/__tests__/logic/validateField.test.d.ts +1 -1
  4. package/dist/__tests__/type.test.d.ts +1 -1
  5. package/dist/__tests__/useController.test.d.ts +1 -1
  6. package/dist/__tests__/useFieldArray/append.test.d.ts +1 -1
  7. package/dist/__tests__/useFieldArray/focus.test.d.ts +1 -1
  8. package/dist/__tests__/useFieldArray/insert.test.d.ts +1 -1
  9. package/dist/__tests__/useFieldArray/move.test.d.ts +1 -1
  10. package/dist/__tests__/useFieldArray/prepend.test.d.ts +1 -1
  11. package/dist/__tests__/useFieldArray/remove.test.d.ts +1 -1
  12. package/dist/__tests__/useFieldArray/replace.test.d.ts +1 -1
  13. package/dist/__tests__/useFieldArray/swap.test.d.ts +1 -1
  14. package/dist/__tests__/useFieldArray/update.test.d.ts +1 -1
  15. package/dist/__tests__/useFieldArray.test.d.ts +1 -1
  16. package/dist/__tests__/useForm/clearErrors.test.d.ts +1 -1
  17. package/dist/__tests__/useForm/formState.test.d.ts +1 -1
  18. package/dist/__tests__/useForm/getFieldState.test.d.ts +1 -1
  19. package/dist/__tests__/useForm/getValues.test.d.ts +1 -1
  20. package/dist/__tests__/useForm/handleSubmit.test.d.ts +1 -1
  21. package/dist/__tests__/useForm/register.test.d.ts +1 -1
  22. package/dist/__tests__/useForm/reset.test.d.ts +1 -1
  23. package/dist/__tests__/useForm/resetField.test.d.ts +1 -1
  24. package/dist/__tests__/useForm/resolver.test.d.ts +1 -1
  25. package/dist/__tests__/useForm/setError.test.d.ts +1 -1
  26. package/dist/__tests__/useForm/setValue.test.d.ts +1 -1
  27. package/dist/__tests__/useForm/trigger.test.d.ts +1 -1
  28. package/dist/__tests__/useForm/unregister.test.d.ts +1 -1
  29. package/dist/__tests__/useForm/watch.test.d.ts +1 -1
  30. package/dist/__tests__/useForm.server.test.d.ts +1 -1
  31. package/dist/__tests__/useForm.test.d.ts +1 -1
  32. package/dist/__tests__/useFormContext.server.test.d.ts +1 -1
  33. package/dist/__tests__/useFormContext.test.d.ts +1 -1
  34. package/dist/__tests__/useFormState.test.d.ts +1 -1
  35. package/dist/__tests__/useWatch.test.d.ts +1 -1
  36. package/dist/__typetest__/__fixtures__/index.d.ts +4 -4
  37. package/dist/__typetest__/__fixtures__/pathString.d.ts +3 -3
  38. package/dist/__typetest__/__fixtures__/traversable.d.ts +13 -13
  39. package/dist/__typetest__/__fixtures__/tuple.d.ts +14 -14
  40. package/dist/__typetest__/__fixtures__/type.d.ts +11 -11
  41. package/dist/__typetest__/errors.test-d.d.ts +1 -1
  42. package/dist/__typetest__/form.test-d.d.ts +1 -1
  43. package/dist/__typetest__/path/common.test-d.d.ts +1 -1
  44. package/dist/__typetest__/path/eager.test-d.d.ts +1 -1
  45. package/dist/__typetest__/util.test-d.d.ts +1 -1
  46. package/dist/constants.d.ts +16 -16
  47. package/dist/controller.d.ts +46 -46
  48. package/dist/controller.d.ts.map +1 -1
  49. package/dist/index.cjs.js +1 -1
  50. package/dist/index.cjs.js.map +1 -1
  51. package/dist/index.d.ts +10 -10
  52. package/dist/index.esm.mjs +2174 -2174
  53. package/dist/index.esm.mjs.map +1 -1
  54. package/dist/index.umd.js +1 -1
  55. package/dist/index.umd.js.map +1 -1
  56. package/dist/logic/appendErrors.d.ts +3 -3
  57. package/dist/logic/createFormControl.d.ts +25 -25
  58. package/dist/logic/focusFieldBy.d.ts +3 -3
  59. package/dist/logic/generateId.d.ts +2 -2
  60. package/dist/logic/generateWatchOutput.d.ts +3 -3
  61. package/dist/logic/getCheckboxValue.d.ts +6 -6
  62. package/dist/logic/getDirtyFields.d.ts +2 -2
  63. package/dist/logic/getEventValue.d.ts +2 -2
  64. package/dist/logic/getFieldValue.d.ts +2 -2
  65. package/dist/logic/getFieldValueAs.d.ts +3 -3
  66. package/dist/logic/getFocusFieldName.d.ts +3 -3
  67. package/dist/logic/getNodeParentName.d.ts +2 -2
  68. package/dist/logic/getProxyFormState.d.ts +3 -3
  69. package/dist/logic/getRadioValue.d.ts +6 -6
  70. package/dist/logic/getResolverOptions.d.ts +13 -13
  71. package/dist/logic/getRuleValue.d.ts +3 -3
  72. package/dist/logic/getValidateError.d.ts +2 -2
  73. package/dist/logic/getValidationModes.d.ts +9 -9
  74. package/dist/logic/getValueAndMessage.d.ts +6 -6
  75. package/dist/logic/hasValidation.d.ts +3 -3
  76. package/dist/logic/index.d.ts +2 -2
  77. package/dist/logic/isNameInFieldArray.d.ts +3 -3
  78. package/dist/logic/isWatched.d.ts +3 -3
  79. package/dist/logic/schemaErrorLookup.d.ts +5 -5
  80. package/dist/logic/shouldRenderFormState.d.ts +5 -5
  81. package/dist/logic/shouldSubscribeByName.d.ts +2 -2
  82. package/dist/logic/skipValidation.d.ts +11 -11
  83. package/dist/logic/unsetEmptyArray.d.ts +2 -2
  84. package/dist/logic/updateFieldArrayRootError.d.ts +3 -3
  85. package/dist/logic/validateField.d.ts +3 -3
  86. package/dist/types/controller.d.ts +56 -56
  87. package/dist/types/errors.d.ts +35 -35
  88. package/dist/types/events.d.ts +1 -1
  89. package/dist/types/fieldArray.d.ts +194 -194
  90. package/dist/types/fields.d.ts +28 -28
  91. package/dist/types/form.d.ts +627 -627
  92. package/dist/types/index.d.ts +10 -10
  93. package/dist/types/path/common.d.ts +315 -315
  94. package/dist/types/path/eager.d.ts +120 -120
  95. package/dist/types/path/index.d.ts +3 -3
  96. package/dist/types/resolvers.d.ts +19 -19
  97. package/dist/types/utils.d.ts +70 -70
  98. package/dist/types/validator.d.ts +38 -38
  99. package/dist/useController.d.ts +26 -26
  100. package/dist/useFieldArray.d.ts +39 -39
  101. package/dist/useForm.d.ts +31 -31
  102. package/dist/useFormContext.d.ts +64 -64
  103. package/dist/useFormContext.d.ts.map +1 -1
  104. package/dist/useFormState.d.ts +33 -33
  105. package/dist/useSubscribe.d.ts +8 -8
  106. package/dist/useWatch.d.ts +99 -99
  107. package/dist/utils/append.d.ts +1 -1
  108. package/dist/utils/cloneObject.d.ts +1 -1
  109. package/dist/utils/compact.d.ts +2 -2
  110. package/dist/utils/convertToArrayPayload.d.ts +2 -2
  111. package/dist/utils/createSubject.d.ts +13 -13
  112. package/dist/utils/deepEqual.d.ts +1 -1
  113. package/dist/utils/deepMerge.d.ts +1 -1
  114. package/dist/utils/fillBooleanArray.d.ts +2 -2
  115. package/dist/utils/fillEmptyArray.d.ts +2 -2
  116. package/dist/utils/get.d.ts +2 -2
  117. package/dist/utils/index.d.ts +3 -3
  118. package/dist/utils/insert.d.ts +2 -2
  119. package/dist/utils/isBoolean.d.ts +2 -2
  120. package/dist/utils/isCheckBoxInput.d.ts +3 -3
  121. package/dist/utils/isDateObject.d.ts +2 -2
  122. package/dist/utils/isEmptyObject.d.ts +3 -3
  123. package/dist/utils/isFileInput.d.ts +3 -3
  124. package/dist/utils/isFunction.d.ts +2 -2
  125. package/dist/utils/isHTMLElement.d.ts +2 -2
  126. package/dist/utils/isKey.d.ts +2 -2
  127. package/dist/utils/isMessage.d.ts +2 -2
  128. package/dist/utils/isMultipleSelect.d.ts +3 -3
  129. package/dist/utils/isNullOrUndefined.d.ts +2 -2
  130. package/dist/utils/isObject.d.ts +3 -3
  131. package/dist/utils/isPlainObject.d.ts +2 -2
  132. package/dist/utils/isPrimitive.d.ts +3 -3
  133. package/dist/utils/isRadioInput.d.ts +3 -3
  134. package/dist/utils/isRadioOrCheckbox.d.ts +3 -3
  135. package/dist/utils/isRegex.d.ts +2 -2
  136. package/dist/utils/isSelectInput.d.ts +3 -3
  137. package/dist/utils/isString.d.ts +2 -2
  138. package/dist/utils/isUndefined.d.ts +2 -2
  139. package/dist/utils/isWeb.d.ts +2 -2
  140. package/dist/utils/live.d.ts +3 -3
  141. package/dist/utils/move.d.ts +2 -2
  142. package/dist/utils/objectHasFunction.d.ts +2 -2
  143. package/dist/utils/omit.d.ts +2 -2
  144. package/dist/utils/prepend.d.ts +1 -1
  145. package/dist/utils/remove.d.ts +2 -2
  146. package/dist/utils/set.d.ts +2 -2
  147. package/dist/utils/sleep.d.ts +1 -1
  148. package/dist/utils/stringToPath.d.ts +2 -2
  149. package/dist/utils/swap.d.ts +2 -2
  150. package/dist/utils/unset.d.ts +1 -1
  151. package/dist/utils/update.d.ts +2 -2
  152. package/package.json +8 -8
@@ -1,628 +1,628 @@
1
- import React from 'react';
2
- import { Subject, Subscription } from '../utils/createSubject';
3
- import { ErrorOption, FieldError, FieldErrors } from './errors';
4
- import { EventType } from './events';
5
- import { FieldArray } from './fieldArray';
6
- import { FieldRefs, FieldValue, FieldValues, InternalFieldName } from './fields';
7
- import { FieldArrayPath, FieldPath, FieldPathValue, FieldPathValues } from './path';
8
- import { Resolver } from './resolvers';
9
- import { DeepMap, DeepPartial, Noop } from './utils';
10
- import { RegisterOptions } from './validator';
11
- declare const $NestedValue: unique symbol;
12
- /**
13
- * @deprecated to be removed in the next major version
14
- */
15
- export type NestedValue<TValue extends object = object> = {
16
- [$NestedValue]: never;
17
- } & TValue;
18
- /**
19
- * @deprecated to be removed in the next major version
20
- */
21
- export type UnpackNestedValue<T> = T extends NestedValue<infer U> ? U : T extends Date | FileList | File | Blob ? T : T extends object ? {
22
- [K in keyof T]: UnpackNestedValue<T[K]>;
23
- } : T;
24
- export type DefaultValues<TFieldValues> = DeepPartial<TFieldValues>;
25
- export type InternalNameSet = Set<InternalFieldName>;
26
- export type ValidationMode = {
27
- onBlur: 'onBlur';
28
- onChange: 'onChange';
29
- onSubmit: 'onSubmit';
30
- onTouched: 'onTouched';
31
- all: 'all';
32
- };
33
- export type Mode = keyof ValidationMode;
34
- export type CriteriaMode = 'firstError' | 'all';
35
- export type SubmitHandler<TFieldValues extends FieldValues> = (data: TFieldValues, event?: React.BaseSyntheticEvent) => unknown | Promise<unknown>;
36
- export type SubmitErrorHandler<TFieldValues extends FieldValues> = (errors: FieldErrors<TFieldValues>, event?: React.BaseSyntheticEvent) => unknown | Promise<unknown>;
37
- export type SetValueConfig = Partial<{
38
- shouldValidate: boolean;
39
- shouldDirty: boolean;
40
- shouldTouch: boolean;
41
- }>;
42
- export type TriggerConfig = Partial<{
43
- shouldFocus: boolean;
44
- }>;
45
- export type ChangeHandler = (event: {
46
- target: any;
47
- type?: any;
48
- }) => Promise<void | boolean>;
49
- export type DelayCallback = (wait: number) => void;
50
- type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
51
- export type UseFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any> = Partial<{
52
- mode: Mode;
53
- reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
54
- defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
55
- values: TFieldValues;
56
- resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
57
- resolver: Resolver<TFieldValues, TContext>;
58
- context: TContext;
59
- shouldFocusError: boolean;
60
- shouldUnregister: boolean;
61
- shouldUseNativeValidation: boolean;
62
- criteriaMode: CriteriaMode;
63
- delayError: number;
64
- }>;
65
- export type FieldNamesMarkedBoolean<TFieldValues extends FieldValues> = DeepMap<DeepPartial<TFieldValues>, boolean>;
66
- export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
67
- isDirty: boolean;
68
- isValidating: boolean;
69
- dirtyFields: FieldNamesMarkedBoolean<TFieldValues>;
70
- touchedFields: FieldNamesMarkedBoolean<TFieldValues>;
71
- errors: boolean;
72
- isValid: boolean;
73
- };
74
- export type ReadFormState = {
75
- [K in keyof FormStateProxy]: boolean | 'all';
76
- };
77
- export type FormState<TFieldValues extends FieldValues> = {
78
- isDirty: boolean;
79
- isLoading: boolean;
80
- isSubmitted: boolean;
81
- isSubmitSuccessful: boolean;
82
- isSubmitting: boolean;
83
- isValidating: boolean;
84
- isValid: boolean;
85
- submitCount: number;
86
- defaultValues?: undefined | Readonly<DeepPartial<TFieldValues>>;
87
- dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
88
- touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
89
- errors: FieldErrors<TFieldValues>;
90
- };
91
- export type KeepStateOptions = Partial<{
92
- keepDirtyValues: boolean;
93
- keepErrors: boolean;
94
- keepDirty: boolean;
95
- keepValues: boolean;
96
- keepDefaultValues: boolean;
97
- keepIsSubmitted: boolean;
98
- keepTouched: boolean;
99
- keepIsValid: boolean;
100
- keepSubmitCount: boolean;
101
- }>;
102
- export type SetFieldValue<TFieldValues extends FieldValues> = FieldValue<TFieldValues>;
103
- export type RefCallBack = (instance: any) => void;
104
- export type UseFormRegisterReturn<TFieldName extends InternalFieldName = InternalFieldName> = {
105
- onChange: ChangeHandler;
106
- onBlur: ChangeHandler;
107
- ref: RefCallBack;
108
- name: TFieldName;
109
- min?: string | number;
110
- max?: string | number;
111
- maxLength?: number;
112
- minLength?: number;
113
- pattern?: string;
114
- required?: boolean;
115
- disabled?: boolean;
116
- };
117
- /**
118
- * Register field into hook form with or without the actual DOM ref. You can invoke register anywhere in the component including at `useEffect`.
119
- *
120
- * @remarks
121
- * [API](https://react-hook-form.com/api/useform/register) • [Demo](https://codesandbox.io/s/react-hook-form-register-ts-ip2j3) • [Video](https://www.youtube.com/watch?v=JFIpCoajYkA)
122
- *
123
- * @param name - the path name to the form field value, name is required and unique
124
- * @param options - register options include validation, disabled, unregister, value as and dependent validation
125
- *
126
- * @returns onChange, onBlur, name, ref, and native contribute attribute if browser validation is enabled.
127
- *
128
- * @example
129
- * ```tsx
130
- * // Register HTML native input
131
- * <input {...register("input")} />
132
- * <select {...register("select")} />
133
- *
134
- * // Register options
135
- * <textarea {...register("textarea", { required: "This is required.", maxLength: 20 })} />
136
- * <input type="number" {...register("name2", { valueAsNumber: true })} />
137
- * <input {...register("name3", { deps: ["name2"] })} />
138
- *
139
- * // Register custom field at useEffect
140
- * useEffect(() => {
141
- * register("name4");
142
- * register("name5", { value: '"hiddenValue" });
143
- * }, [register])
144
- *
145
- * // Register without ref
146
- * const { onChange, onBlur, name } = register("name6")
147
- * <input onChange={onChange} onBlur={onBlur} name={name} />
148
- * ```
149
- */
150
- export type UseFormRegister<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>) => UseFormRegisterReturn<TFieldName>;
151
- export type SetFocusOptions = Partial<{
152
- shouldSelect: boolean;
153
- }>;
154
- /**
155
- * Set focus on a registered field. You can start to invoke this method after all fields are mounted to the DOM.
156
- *
157
- * @remarks
158
- * [API](https://react-hook-form.com/api/useform/setfocus) • [Demo](https://codesandbox.io/s/setfocus-rolus)
159
- *
160
- * @param name - the path name to the form field value.
161
- * @param options - input focus behavior options
162
- *
163
- * @example
164
- * ```tsx
165
- * useEffect(() => {
166
- * setFocus("name");
167
- * }, [setFocus])
168
- * // shouldSelect allows to select input's content on focus
169
- * <button onClick={() => setFocus("name", { shouldSelect: true })}>Focus</button>
170
- * ```
171
- */
172
- export type UseFormSetFocus<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: SetFocusOptions) => void;
173
- export type UseFormGetValues<TFieldValues extends FieldValues> = {
174
- /**
175
- * Get the entire form values when no argument is supplied to this function.
176
- *
177
- * @remarks
178
- * [API](https://react-hook-form.com/api/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
179
- *
180
- * @returns form values
181
- *
182
- * @example
183
- * ```tsx
184
- * <button onClick={() => getValues()}>getValues</button>
185
- *
186
- * <input {...register("name", {
187
- * validate: (value, formValues) => formValues.otherField === value;
188
- * })} />
189
- * ```
190
- */
191
- (): TFieldValues;
192
- /**
193
- * Get a single field value.
194
- *
195
- * @remarks
196
- * [API](https://react-hook-form.com/api/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
197
- *
198
- * @param name - the path name to the form field value.
199
- *
200
- * @returns the single field value
201
- *
202
- * @example
203
- * ```tsx
204
- * <button onClick={() => getValues("name")}>getValues</button>
205
- *
206
- * <input {...register("name", {
207
- * validate: () => getValues('otherField') === "test";
208
- * })} />
209
- * ```
210
- */
211
- <TFieldName extends FieldPath<TFieldValues>>(name: TFieldName): FieldPathValue<TFieldValues, TFieldName>;
212
- /**
213
- * Get an array of field values.
214
- *
215
- * @remarks
216
- * [API](https://react-hook-form.com/api/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
217
- *
218
- * @param names - an array of field names
219
- *
220
- * @returns An array of field values
221
- *
222
- * @example
223
- * ```tsx
224
- * <button onClick={() => getValues(["name", "name1"])}>getValues</button>
225
- *
226
- * <input {...register("name", {
227
- * validate: () => getValues(["fieldA", "fieldB"]).includes("test");
228
- * })} />
229
- * ```
230
- */
231
- <TFieldNames extends FieldPath<TFieldValues>[]>(names: readonly [...TFieldNames]): [...FieldPathValues<TFieldValues, TFieldNames>];
232
- };
233
- /**
234
- * This method will return individual field states. It will be useful when you are trying to retrieve the nested value field state in a typesafe approach.
235
- *
236
- * @remarks
237
- * [API](https://react-hook-form.com/api/useform/getfieldstate) • [Demo](https://codesandbox.io/s/getfieldstate-jvekk)
238
- *
239
- * @param name - the path name to the form field value.
240
- *
241
- * @returns invalid, isDirty, isTouched and error object
242
- *
243
- * @example
244
- * ```tsx
245
- * // those formState has to be subscribed
246
- * const { formState: { dirtyFields, errors, touchedFields } } = formState();
247
- * getFieldState('name')
248
- * // Get field state when form state is not subscribed yet
249
- * getFieldState('name', formState)
250
- *
251
- * // It's ok to combine with useFormState
252
- * const formState = useFormState();
253
- * getFieldState('name')
254
- * getFieldState('name', formState)
255
- * ```
256
- */
257
- export type UseFormGetFieldState<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues>>(name: TFieldName, formState?: FormState<TFieldValues>) => {
258
- invalid: boolean;
259
- isDirty: boolean;
260
- isTouched: boolean;
261
- error?: FieldError;
262
- };
263
- export type UseFormWatch<TFieldValues extends FieldValues> = {
264
- /**
265
- * Watch and subscribe to the entire form update/change based on onChange and re-render at the useForm.
266
- *
267
- * @remarks
268
- * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
269
- *
270
- * @returns return the entire form values
271
- *
272
- * @example
273
- * ```tsx
274
- * const formValues = watch();
275
- * ```
276
- */
277
- (): TFieldValues;
278
- /**
279
- * Watch and subscribe to an array of fields used outside of render.
280
- *
281
- * @remarks
282
- * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
283
- *
284
- * @param names - an array of field names
285
- * @param defaultValue - defaultValues for the entire form
286
- *
287
- * @returns return an array of field values
288
- *
289
- * @example
290
- * ```tsx
291
- * const [name, name1] = watch(["name", "name1"]);
292
- * ```
293
- */
294
- <TFieldNames extends readonly FieldPath<TFieldValues>[]>(names: readonly [...TFieldNames], defaultValue?: DeepPartial<TFieldValues>): FieldPathValues<TFieldValues, TFieldNames>;
295
- /**
296
- * Watch and subscribe to a single field used outside of render.
297
- *
298
- * @remarks
299
- * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
300
- *
301
- * @param name - the path name to the form field value.
302
- * @param defaultValue - defaultValues for the entire form
303
- *
304
- * @returns return the single field value
305
- *
306
- * @example
307
- * ```tsx
308
- * const name = watch("name");
309
- * ```
310
- */
311
- <TFieldName extends FieldPath<TFieldValues>>(name: TFieldName, defaultValue?: FieldPathValue<TFieldValues, TFieldName>): FieldPathValue<TFieldValues, TFieldName>;
312
- /**
313
- * Subscribe to field update/change without trigger re-render
314
- *
315
- * @remarks
316
- * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
317
- *
318
- * @param callback - call back function to subscribe all fields change and return unsubscribe function
319
- * @param defaultValues - defaultValues for the entire form
320
- *
321
- * @returns unsubscribe function
322
- *
323
- * @example
324
- * ```tsx
325
- * useEffect(() => {
326
- * const { unsubscribe } = watch((value) => {
327
- * console.log(value);
328
- * });
329
- * return () => unsubscribe();
330
- * }, [watch])
331
- * ```
332
- */
333
- (callback: WatchObserver<TFieldValues>, defaultValues?: DeepPartial<TFieldValues>): Subscription;
334
- };
335
- /**
336
- * Trigger field or form validation
337
- *
338
- * @remarks
339
- * [API](https://react-hook-form.com/api/useform/trigger) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-xs7hl) • [Video](https://www.youtube.com/watch?v=-bcyJCDjksE)
340
- *
341
- * @param name - provide empty argument will trigger the entire form validation, an array of field names will validate an arrange of fields, and a single field name will only trigger that field's validation.
342
- * @param options - should focus on the error field
343
- *
344
- * @returns validation result
345
- *
346
- * @example
347
- * ```tsx
348
- * useEffect(() => {
349
- * trigger();
350
- * }, [trigger])
351
- *
352
- * <button onClick={async () => {
353
- * const result = await trigger(); // result will be a boolean value
354
- * }}>
355
- * trigger
356
- * </button>
357
- * ```
358
- */
359
- export type UseFormTrigger<TFieldValues extends FieldValues> = (name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[], options?: TriggerConfig) => Promise<boolean>;
360
- /**
361
- * Clear the entire form errors.
362
- *
363
- * @remarks
364
- * [API](https://react-hook-form.com/api/useform/clearerrors) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)
365
- *
366
- * @param name - the path name to the form field value.
367
- *
368
- * @example
369
- * Clear all errors
370
- * ```tsx
371
- * clearErrors(); // clear the entire form error
372
- * clearErrors(["name", "name1"]) // clear an array of fields' error
373
- * clearErrors("name2"); // clear a single field error
374
- * ```
375
- */
376
- export type UseFormClearErrors<TFieldValues extends FieldValues> = (name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[] | `root.${string}` | 'root') => void;
377
- /**
378
- * Set a single field value, or a group of fields value.
379
- *
380
- * @remarks
381
- * [API](https://react-hook-form.com/api/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
382
- *
383
- * @param name - the path name to the form field value.
384
- * @param value - field value
385
- * @param options - should validate or update form state
386
- *
387
- * @example
388
- * ```tsx
389
- * // Update a single field
390
- * setValue('name', 'value', {
391
- * shouldValidate: true, // trigger validation
392
- * shouldTouch: true, // update touched fields form state
393
- * shouldDirty: true, // update dirty and dirty fields form state
394
- * });
395
- *
396
- * // Update a group fields
397
- * setValue('root', {
398
- * a: 'test', // setValue('root.a', 'data')
399
- * b: 'test1', // setValue('root.b', 'data')
400
- * });
401
- *
402
- * // Update a nested object field
403
- * setValue('select', { label: 'test', value: 'Test' });
404
- * ```
405
- */
406
- export type UseFormSetValue<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, value: FieldPathValue<TFieldValues, TFieldName>, options?: SetValueConfig) => void;
407
- /**
408
- * Set an error for the field. When set an error which is not associated to a field then manual `clearErrors` invoke is required.
409
- *
410
- * @remarks
411
- * [API](https://react-hook-form.com/api/useform/seterror) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu) • [Video](https://www.youtube.com/watch?v=raMqvE0YyIY)
412
- *
413
- * @param name - the path name to the form field value.
414
- * @param error - an error object which contains type and optional message
415
- * @param options - whether or not to focus on the field
416
- *
417
- * @example
418
- * ```tsx
419
- * // when the error is not associated with any fields, `clearError` will need to invoke to clear the error
420
- * const onSubmit = () => setError("serverError", { type: "server", message: "Error occurred"})
421
- *
422
- * <button onClick={() => setError("name", { type: "min" })} />
423
- *
424
- * // focus on the input after setting the error
425
- * <button onClick={() => setError("name", { type: "max" }, { shouldFocus: true })} />
426
- * ```
427
- */
428
- export type UseFormSetError<TFieldValues extends FieldValues> = (name: FieldPath<TFieldValues> | `root.${string}` | 'root', error: ErrorOption, options?: {
429
- shouldFocus: boolean;
430
- }) => void;
431
- /**
432
- * Unregister a field reference and remove its value.
433
- *
434
- * @remarks
435
- * [API](https://react-hook-form.com/api/useform/unregister) • [Demo](https://codesandbox.io/s/react-hook-form-unregister-4k2ey) • [Video](https://www.youtube.com/watch?v=TM99g_NW5Gk&feature=emb_imp_woyt)
436
- *
437
- * @param name - the path name to the form field value.
438
- * @param options - keep form state options
439
- *
440
- * @example
441
- * ```tsx
442
- * register("name", { required: true })
443
- *
444
- * <button onClick={() => unregister("name")} />
445
- * // there are various keep options to retain formState
446
- * <button onClick={() => unregister("name", { keepErrors: true })} />
447
- * ```
448
- */
449
- export type UseFormUnregister<TFieldValues extends FieldValues> = (name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[], options?: Omit<KeepStateOptions, 'keepIsSubmitted' | 'keepSubmitCount' | 'keepValues' | 'keepDefaultValues' | 'keepErrors'> & {
450
- keepValue?: boolean;
451
- keepDefaultValue?: boolean;
452
- keepError?: boolean;
453
- }) => void;
454
- /**
455
- * Validate the entire form. Handle submit and error callback.
456
- *
457
- * @remarks
458
- * [API](https://react-hook-form.com/api/useform/handlesubmit) • [Demo](https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu) • [Video](https://www.youtube.com/watch?v=KzcPKB9SOEk)
459
- *
460
- * @param onValid - callback function invoked after form pass validation
461
- * @param onInvalid - callback function invoked when form failed validation
462
- *
463
- * @returns callback - return callback function
464
- *
465
- * @example
466
- * ```tsx
467
- * const onSubmit = (data) => console.log(data);
468
- * const onError = (error) => console.log(error);
469
- *
470
- * <form onSubmit={handleSubmit(onSubmit, onError)} />
471
- * ```
472
- */
473
- export type UseFormHandleSubmit<TFieldValues extends FieldValues> = (onValid: SubmitHandler<TFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React.BaseSyntheticEvent) => Promise<void>;
474
- /**
475
- * Reset a field state and reference.
476
- *
477
- * @remarks
478
- * [API](https://react-hook-form.com/api/useform/resetfield) • [Demo](https://codesandbox.io/s/priceless-firefly-d0kuv) • [Video](https://www.youtube.com/watch?v=IdLFcNaEFEo)
479
- *
480
- * @param name - the path name to the form field value.
481
- * @param options - keep form state options
482
- *
483
- * @example
484
- * ```tsx
485
- * <input {...register("firstName", { required: true })} />
486
- * <button type="button" onClick={() => resetField("firstName"))}>Reset</button>
487
- * ```
488
- */
489
- export type UseFormResetField<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: Partial<{
490
- keepDirty: boolean;
491
- keepTouched: boolean;
492
- keepError: boolean;
493
- defaultValue: FieldPathValue<TFieldValues, TFieldName>;
494
- }>) => void;
495
- type ResetAction<TFieldValues> = (formValues: TFieldValues) => TFieldValues;
496
- /**
497
- * Reset at the entire form state.
498
- *
499
- * @remarks
500
- * [API](https://react-hook-form.com/api/useform/reset) • [Demo](https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901) • [Video](https://www.youtube.com/watch?v=qmCLBjyPwVk)
501
- *
502
- * @param values - the entire form values to be reset
503
- * @param keepStateOptions - keep form state options
504
- *
505
- * @example
506
- * ```tsx
507
- * useEffect(() => {
508
- * // reset the entire form after component mount or form defaultValues is ready
509
- * reset({
510
- * fieldA: "test"
511
- * fieldB: "test"
512
- * });
513
- * }, [reset])
514
- *
515
- * // reset by combine with existing form values
516
- * reset({
517
- * ...getValues(),
518
- * fieldB: "test"
519
- *});
520
- *
521
- * // reset and keep form state
522
- * reset({
523
- * ...getValues(),
524
- *}, {
525
- * keepErrors: true,
526
- * keepDirty: true
527
- *});
528
- * ```
529
- */
530
- export type UseFormReset<TFieldValues extends FieldValues> = (values?: DefaultValues<TFieldValues> | TFieldValues | ResetAction<TFieldValues>, keepStateOptions?: KeepStateOptions) => void;
531
- export type WatchInternal<TFieldValues> = (fieldNames?: InternalFieldName | InternalFieldName[], defaultValue?: DeepPartial<TFieldValues>, isMounted?: boolean, isGlobal?: boolean) => FieldPathValue<FieldValues, InternalFieldName> | FieldPathValues<FieldValues, InternalFieldName[]>;
532
- export type GetIsDirty = <TName extends InternalFieldName, TData>(name?: TName, data?: TData) => boolean;
533
- export type FormStateSubjectRef<TFieldValues extends FieldValues> = Subject<Partial<FormState<TFieldValues>> & {
534
- name?: InternalFieldName;
535
- }>;
536
- export type Subjects<TFieldValues extends FieldValues = FieldValues> = {
537
- values: Subject<{
538
- name?: InternalFieldName;
539
- type?: EventType;
540
- values: FieldValues;
541
- }>;
542
- array: Subject<{
543
- name?: InternalFieldName;
544
- values?: FieldValues;
545
- }>;
546
- state: FormStateSubjectRef<TFieldValues>;
547
- };
548
- export type Names = {
549
- mount: InternalNameSet;
550
- unMount: InternalNameSet;
551
- array: InternalNameSet;
552
- watch: InternalNameSet;
553
- focus?: InternalFieldName;
554
- watchAll?: boolean;
555
- };
556
- export type BatchFieldArrayUpdate = <T extends Function, TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>(name: InternalFieldName, updatedFieldArrayValues?: Partial<FieldArray<TFieldValues, TFieldArrayName>>[], method?: T, args?: Partial<{
557
- argA: unknown;
558
- argB: unknown;
559
- }>, shouldSetValue?: boolean, shouldUpdateFieldsAndErrors?: boolean) => void;
560
- export type Control<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
561
- _subjects: Subjects<TFieldValues>;
562
- _removeUnmounted: Noop;
563
- _names: Names;
564
- _state: {
565
- mount: boolean;
566
- action: boolean;
567
- watch: boolean;
568
- };
569
- _reset: UseFormReset<TFieldValues>;
570
- _options: UseFormProps<TFieldValues, TContext>;
571
- _getDirty: GetIsDirty;
572
- _formState: FormState<TFieldValues>;
573
- _updateValid: (shouldUpdateValid?: boolean) => void;
574
- _updateFormState: (formState: Partial<FormState<TFieldValues>>) => void;
575
- _fields: FieldRefs;
576
- _formValues: FieldValues;
577
- _proxyFormState: ReadFormState;
578
- _defaultValues: Partial<DefaultValues<TFieldValues>>;
579
- _getWatch: WatchInternal<TFieldValues>;
580
- _updateFieldArray: BatchFieldArrayUpdate;
581
- _getFieldArray: <TFieldArrayValues>(name: InternalFieldName) => Partial<TFieldArrayValues>[];
582
- _executeSchema: (names: InternalFieldName[]) => Promise<{
583
- errors: FieldErrors;
584
- }>;
585
- register: UseFormRegister<TFieldValues>;
586
- unregister: UseFormUnregister<TFieldValues>;
587
- getFieldState: UseFormGetFieldState<TFieldValues>;
588
- };
589
- export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartial<TFieldValues>, info: {
590
- name?: FieldPath<TFieldValues>;
591
- type?: EventType;
592
- }) => void;
593
- export type UseFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
594
- watch: UseFormWatch<TFieldValues>;
595
- getValues: UseFormGetValues<TFieldValues>;
596
- getFieldState: UseFormGetFieldState<TFieldValues>;
597
- setError: UseFormSetError<TFieldValues>;
598
- clearErrors: UseFormClearErrors<TFieldValues>;
599
- setValue: UseFormSetValue<TFieldValues>;
600
- trigger: UseFormTrigger<TFieldValues>;
601
- formState: FormState<TFieldValues>;
602
- resetField: UseFormResetField<TFieldValues>;
603
- reset: UseFormReset<TFieldValues>;
604
- handleSubmit: UseFormHandleSubmit<TFieldValues>;
605
- unregister: UseFormUnregister<TFieldValues>;
606
- control: Control<TFieldValues, TContext>;
607
- register: UseFormRegister<TFieldValues>;
608
- setFocus: UseFormSetFocus<TFieldValues>;
609
- };
610
- export type UseFormStateProps<TFieldValues extends FieldValues> = Partial<{
611
- control?: Control<TFieldValues>;
612
- disabled?: boolean;
613
- name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[];
614
- exact?: boolean;
615
- }>;
616
- export type UseFormStateReturn<TFieldValues extends FieldValues> = FormState<TFieldValues>;
617
- export type UseWatchProps<TFieldValues extends FieldValues = FieldValues> = {
618
- defaultValue?: unknown;
619
- disabled?: boolean;
620
- name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[];
621
- control?: Control<TFieldValues>;
622
- exact?: boolean;
623
- };
624
- export type FormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
625
- children: React.ReactNode | React.ReactNode[];
626
- } & UseFormReturn<TFieldValues, TContext>;
627
- export {};
1
+ import React from 'react';
2
+ import { Subject, Subscription } from '../utils/createSubject';
3
+ import { ErrorOption, FieldError, FieldErrors } from './errors';
4
+ import { EventType } from './events';
5
+ import { FieldArray } from './fieldArray';
6
+ import { FieldRefs, FieldValue, FieldValues, InternalFieldName } from './fields';
7
+ import { FieldArrayPath, FieldPath, FieldPathValue, FieldPathValues } from './path';
8
+ import { Resolver } from './resolvers';
9
+ import { DeepMap, DeepPartial, Noop } from './utils';
10
+ import { RegisterOptions } from './validator';
11
+ declare const $NestedValue: unique symbol;
12
+ /**
13
+ * @deprecated to be removed in the next major version
14
+ */
15
+ export type NestedValue<TValue extends object = object> = {
16
+ [$NestedValue]: never;
17
+ } & TValue;
18
+ /**
19
+ * @deprecated to be removed in the next major version
20
+ */
21
+ export type UnpackNestedValue<T> = T extends NestedValue<infer U> ? U : T extends Date | FileList | File | Blob ? T : T extends object ? {
22
+ [K in keyof T]: UnpackNestedValue<T[K]>;
23
+ } : T;
24
+ export type DefaultValues<TFieldValues> = DeepPartial<TFieldValues>;
25
+ export type InternalNameSet = Set<InternalFieldName>;
26
+ export type ValidationMode = {
27
+ onBlur: 'onBlur';
28
+ onChange: 'onChange';
29
+ onSubmit: 'onSubmit';
30
+ onTouched: 'onTouched';
31
+ all: 'all';
32
+ };
33
+ export type Mode = keyof ValidationMode;
34
+ export type CriteriaMode = 'firstError' | 'all';
35
+ export type SubmitHandler<TFieldValues extends FieldValues> = (data: TFieldValues, event?: React.BaseSyntheticEvent) => unknown | Promise<unknown>;
36
+ export type SubmitErrorHandler<TFieldValues extends FieldValues> = (errors: FieldErrors<TFieldValues>, event?: React.BaseSyntheticEvent) => unknown | Promise<unknown>;
37
+ export type SetValueConfig = Partial<{
38
+ shouldValidate: boolean;
39
+ shouldDirty: boolean;
40
+ shouldTouch: boolean;
41
+ }>;
42
+ export type TriggerConfig = Partial<{
43
+ shouldFocus: boolean;
44
+ }>;
45
+ export type ChangeHandler = (event: {
46
+ target: any;
47
+ type?: any;
48
+ }) => Promise<void | boolean>;
49
+ export type DelayCallback = (wait: number) => void;
50
+ type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
51
+ export type UseFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any> = Partial<{
52
+ mode: Mode;
53
+ reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
54
+ defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
55
+ values: TFieldValues;
56
+ resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
57
+ resolver: Resolver<TFieldValues, TContext>;
58
+ context: TContext;
59
+ shouldFocusError: boolean;
60
+ shouldUnregister: boolean;
61
+ shouldUseNativeValidation: boolean;
62
+ criteriaMode: CriteriaMode;
63
+ delayError: number;
64
+ }>;
65
+ export type FieldNamesMarkedBoolean<TFieldValues extends FieldValues> = DeepMap<DeepPartial<TFieldValues>, boolean>;
66
+ export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
67
+ isDirty: boolean;
68
+ isValidating: boolean;
69
+ dirtyFields: FieldNamesMarkedBoolean<TFieldValues>;
70
+ touchedFields: FieldNamesMarkedBoolean<TFieldValues>;
71
+ errors: boolean;
72
+ isValid: boolean;
73
+ };
74
+ export type ReadFormState = {
75
+ [K in keyof FormStateProxy]: boolean | 'all';
76
+ };
77
+ export type FormState<TFieldValues extends FieldValues> = {
78
+ isDirty: boolean;
79
+ isLoading: boolean;
80
+ isSubmitted: boolean;
81
+ isSubmitSuccessful: boolean;
82
+ isSubmitting: boolean;
83
+ isValidating: boolean;
84
+ isValid: boolean;
85
+ submitCount: number;
86
+ defaultValues?: undefined | Readonly<DeepPartial<TFieldValues>>;
87
+ dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
88
+ touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
89
+ errors: FieldErrors<TFieldValues>;
90
+ };
91
+ export type KeepStateOptions = Partial<{
92
+ keepDirtyValues: boolean;
93
+ keepErrors: boolean;
94
+ keepDirty: boolean;
95
+ keepValues: boolean;
96
+ keepDefaultValues: boolean;
97
+ keepIsSubmitted: boolean;
98
+ keepTouched: boolean;
99
+ keepIsValid: boolean;
100
+ keepSubmitCount: boolean;
101
+ }>;
102
+ export type SetFieldValue<TFieldValues extends FieldValues> = FieldValue<TFieldValues>;
103
+ export type RefCallBack = (instance: any) => void;
104
+ export type UseFormRegisterReturn<TFieldName extends InternalFieldName = InternalFieldName> = {
105
+ onChange: ChangeHandler;
106
+ onBlur: ChangeHandler;
107
+ ref: RefCallBack;
108
+ name: TFieldName;
109
+ min?: string | number;
110
+ max?: string | number;
111
+ maxLength?: number;
112
+ minLength?: number;
113
+ pattern?: string;
114
+ required?: boolean;
115
+ disabled?: boolean;
116
+ };
117
+ /**
118
+ * Register field into hook form with or without the actual DOM ref. You can invoke register anywhere in the component including at `useEffect`.
119
+ *
120
+ * @remarks
121
+ * [API](https://react-hook-form.com/api/useform/register) • [Demo](https://codesandbox.io/s/react-hook-form-register-ts-ip2j3) • [Video](https://www.youtube.com/watch?v=JFIpCoajYkA)
122
+ *
123
+ * @param name - the path name to the form field value, name is required and unique
124
+ * @param options - register options include validation, disabled, unregister, value as and dependent validation
125
+ *
126
+ * @returns onChange, onBlur, name, ref, and native contribute attribute if browser validation is enabled.
127
+ *
128
+ * @example
129
+ * ```tsx
130
+ * // Register HTML native input
131
+ * <input {...register("input")} />
132
+ * <select {...register("select")} />
133
+ *
134
+ * // Register options
135
+ * <textarea {...register("textarea", { required: "This is required.", maxLength: 20 })} />
136
+ * <input type="number" {...register("name2", { valueAsNumber: true })} />
137
+ * <input {...register("name3", { deps: ["name2"] })} />
138
+ *
139
+ * // Register custom field at useEffect
140
+ * useEffect(() => {
141
+ * register("name4");
142
+ * register("name5", { value: '"hiddenValue" });
143
+ * }, [register])
144
+ *
145
+ * // Register without ref
146
+ * const { onChange, onBlur, name } = register("name6")
147
+ * <input onChange={onChange} onBlur={onBlur} name={name} />
148
+ * ```
149
+ */
150
+ export type UseFormRegister<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>) => UseFormRegisterReturn<TFieldName>;
151
+ export type SetFocusOptions = Partial<{
152
+ shouldSelect: boolean;
153
+ }>;
154
+ /**
155
+ * Set focus on a registered field. You can start to invoke this method after all fields are mounted to the DOM.
156
+ *
157
+ * @remarks
158
+ * [API](https://react-hook-form.com/api/useform/setfocus) • [Demo](https://codesandbox.io/s/setfocus-rolus)
159
+ *
160
+ * @param name - the path name to the form field value.
161
+ * @param options - input focus behavior options
162
+ *
163
+ * @example
164
+ * ```tsx
165
+ * useEffect(() => {
166
+ * setFocus("name");
167
+ * }, [setFocus])
168
+ * // shouldSelect allows to select input's content on focus
169
+ * <button onClick={() => setFocus("name", { shouldSelect: true })}>Focus</button>
170
+ * ```
171
+ */
172
+ export type UseFormSetFocus<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: SetFocusOptions) => void;
173
+ export type UseFormGetValues<TFieldValues extends FieldValues> = {
174
+ /**
175
+ * Get the entire form values when no argument is supplied to this function.
176
+ *
177
+ * @remarks
178
+ * [API](https://react-hook-form.com/api/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
179
+ *
180
+ * @returns form values
181
+ *
182
+ * @example
183
+ * ```tsx
184
+ * <button onClick={() => getValues()}>getValues</button>
185
+ *
186
+ * <input {...register("name", {
187
+ * validate: (value, formValues) => formValues.otherField === value;
188
+ * })} />
189
+ * ```
190
+ */
191
+ (): TFieldValues;
192
+ /**
193
+ * Get a single field value.
194
+ *
195
+ * @remarks
196
+ * [API](https://react-hook-form.com/api/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
197
+ *
198
+ * @param name - the path name to the form field value.
199
+ *
200
+ * @returns the single field value
201
+ *
202
+ * @example
203
+ * ```tsx
204
+ * <button onClick={() => getValues("name")}>getValues</button>
205
+ *
206
+ * <input {...register("name", {
207
+ * validate: () => getValues('otherField') === "test";
208
+ * })} />
209
+ * ```
210
+ */
211
+ <TFieldName extends FieldPath<TFieldValues>>(name: TFieldName): FieldPathValue<TFieldValues, TFieldName>;
212
+ /**
213
+ * Get an array of field values.
214
+ *
215
+ * @remarks
216
+ * [API](https://react-hook-form.com/api/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
217
+ *
218
+ * @param names - an array of field names
219
+ *
220
+ * @returns An array of field values
221
+ *
222
+ * @example
223
+ * ```tsx
224
+ * <button onClick={() => getValues(["name", "name1"])}>getValues</button>
225
+ *
226
+ * <input {...register("name", {
227
+ * validate: () => getValues(["fieldA", "fieldB"]).includes("test");
228
+ * })} />
229
+ * ```
230
+ */
231
+ <TFieldNames extends FieldPath<TFieldValues>[]>(names: readonly [...TFieldNames]): [...FieldPathValues<TFieldValues, TFieldNames>];
232
+ };
233
+ /**
234
+ * This method will return individual field states. It will be useful when you are trying to retrieve the nested value field state in a typesafe approach.
235
+ *
236
+ * @remarks
237
+ * [API](https://react-hook-form.com/api/useform/getfieldstate) • [Demo](https://codesandbox.io/s/getfieldstate-jvekk)
238
+ *
239
+ * @param name - the path name to the form field value.
240
+ *
241
+ * @returns invalid, isDirty, isTouched and error object
242
+ *
243
+ * @example
244
+ * ```tsx
245
+ * // those formState has to be subscribed
246
+ * const { formState: { dirtyFields, errors, touchedFields } } = formState();
247
+ * getFieldState('name')
248
+ * // Get field state when form state is not subscribed yet
249
+ * getFieldState('name', formState)
250
+ *
251
+ * // It's ok to combine with useFormState
252
+ * const formState = useFormState();
253
+ * getFieldState('name')
254
+ * getFieldState('name', formState)
255
+ * ```
256
+ */
257
+ export type UseFormGetFieldState<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues>>(name: TFieldName, formState?: FormState<TFieldValues>) => {
258
+ invalid: boolean;
259
+ isDirty: boolean;
260
+ isTouched: boolean;
261
+ error?: FieldError;
262
+ };
263
+ export type UseFormWatch<TFieldValues extends FieldValues> = {
264
+ /**
265
+ * Watch and subscribe to the entire form update/change based on onChange and re-render at the useForm.
266
+ *
267
+ * @remarks
268
+ * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
269
+ *
270
+ * @returns return the entire form values
271
+ *
272
+ * @example
273
+ * ```tsx
274
+ * const formValues = watch();
275
+ * ```
276
+ */
277
+ (): TFieldValues;
278
+ /**
279
+ * Watch and subscribe to an array of fields used outside of render.
280
+ *
281
+ * @remarks
282
+ * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
283
+ *
284
+ * @param names - an array of field names
285
+ * @param defaultValue - defaultValues for the entire form
286
+ *
287
+ * @returns return an array of field values
288
+ *
289
+ * @example
290
+ * ```tsx
291
+ * const [name, name1] = watch(["name", "name1"]);
292
+ * ```
293
+ */
294
+ <TFieldNames extends readonly FieldPath<TFieldValues>[]>(names: readonly [...TFieldNames], defaultValue?: DeepPartial<TFieldValues>): FieldPathValues<TFieldValues, TFieldNames>;
295
+ /**
296
+ * Watch and subscribe to a single field used outside of render.
297
+ *
298
+ * @remarks
299
+ * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
300
+ *
301
+ * @param name - the path name to the form field value.
302
+ * @param defaultValue - defaultValues for the entire form
303
+ *
304
+ * @returns return the single field value
305
+ *
306
+ * @example
307
+ * ```tsx
308
+ * const name = watch("name");
309
+ * ```
310
+ */
311
+ <TFieldName extends FieldPath<TFieldValues>>(name: TFieldName, defaultValue?: FieldPathValue<TFieldValues, TFieldName>): FieldPathValue<TFieldValues, TFieldName>;
312
+ /**
313
+ * Subscribe to field update/change without trigger re-render
314
+ *
315
+ * @remarks
316
+ * [API](https://react-hook-form.com/api/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
317
+ *
318
+ * @param callback - call back function to subscribe all fields change and return unsubscribe function
319
+ * @param defaultValues - defaultValues for the entire form
320
+ *
321
+ * @returns unsubscribe function
322
+ *
323
+ * @example
324
+ * ```tsx
325
+ * useEffect(() => {
326
+ * const { unsubscribe } = watch((value) => {
327
+ * console.log(value);
328
+ * });
329
+ * return () => unsubscribe();
330
+ * }, [watch])
331
+ * ```
332
+ */
333
+ (callback: WatchObserver<TFieldValues>, defaultValues?: DeepPartial<TFieldValues>): Subscription;
334
+ };
335
+ /**
336
+ * Trigger field or form validation
337
+ *
338
+ * @remarks
339
+ * [API](https://react-hook-form.com/api/useform/trigger) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-xs7hl) • [Video](https://www.youtube.com/watch?v=-bcyJCDjksE)
340
+ *
341
+ * @param name - provide empty argument will trigger the entire form validation, an array of field names will validate an arrange of fields, and a single field name will only trigger that field's validation.
342
+ * @param options - should focus on the error field
343
+ *
344
+ * @returns validation result
345
+ *
346
+ * @example
347
+ * ```tsx
348
+ * useEffect(() => {
349
+ * trigger();
350
+ * }, [trigger])
351
+ *
352
+ * <button onClick={async () => {
353
+ * const result = await trigger(); // result will be a boolean value
354
+ * }}>
355
+ * trigger
356
+ * </button>
357
+ * ```
358
+ */
359
+ export type UseFormTrigger<TFieldValues extends FieldValues> = (name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[], options?: TriggerConfig) => Promise<boolean>;
360
+ /**
361
+ * Clear the entire form errors.
362
+ *
363
+ * @remarks
364
+ * [API](https://react-hook-form.com/api/useform/clearerrors) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)
365
+ *
366
+ * @param name - the path name to the form field value.
367
+ *
368
+ * @example
369
+ * Clear all errors
370
+ * ```tsx
371
+ * clearErrors(); // clear the entire form error
372
+ * clearErrors(["name", "name1"]) // clear an array of fields' error
373
+ * clearErrors("name2"); // clear a single field error
374
+ * ```
375
+ */
376
+ export type UseFormClearErrors<TFieldValues extends FieldValues> = (name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[] | `root.${string}` | 'root') => void;
377
+ /**
378
+ * Set a single field value, or a group of fields value.
379
+ *
380
+ * @remarks
381
+ * [API](https://react-hook-form.com/api/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)
382
+ *
383
+ * @param name - the path name to the form field value.
384
+ * @param value - field value
385
+ * @param options - should validate or update form state
386
+ *
387
+ * @example
388
+ * ```tsx
389
+ * // Update a single field
390
+ * setValue('name', 'value', {
391
+ * shouldValidate: true, // trigger validation
392
+ * shouldTouch: true, // update touched fields form state
393
+ * shouldDirty: true, // update dirty and dirty fields form state
394
+ * });
395
+ *
396
+ * // Update a group fields
397
+ * setValue('root', {
398
+ * a: 'test', // setValue('root.a', 'data')
399
+ * b: 'test1', // setValue('root.b', 'data')
400
+ * });
401
+ *
402
+ * // Update a nested object field
403
+ * setValue('select', { label: 'test', value: 'Test' });
404
+ * ```
405
+ */
406
+ export type UseFormSetValue<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, value: FieldPathValue<TFieldValues, TFieldName>, options?: SetValueConfig) => void;
407
+ /**
408
+ * Set an error for the field. When set an error which is not associated to a field then manual `clearErrors` invoke is required.
409
+ *
410
+ * @remarks
411
+ * [API](https://react-hook-form.com/api/useform/seterror) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu) • [Video](https://www.youtube.com/watch?v=raMqvE0YyIY)
412
+ *
413
+ * @param name - the path name to the form field value.
414
+ * @param error - an error object which contains type and optional message
415
+ * @param options - whether or not to focus on the field
416
+ *
417
+ * @example
418
+ * ```tsx
419
+ * // when the error is not associated with any fields, `clearError` will need to invoke to clear the error
420
+ * const onSubmit = () => setError("serverError", { type: "server", message: "Error occurred"})
421
+ *
422
+ * <button onClick={() => setError("name", { type: "min" })} />
423
+ *
424
+ * // focus on the input after setting the error
425
+ * <button onClick={() => setError("name", { type: "max" }, { shouldFocus: true })} />
426
+ * ```
427
+ */
428
+ export type UseFormSetError<TFieldValues extends FieldValues> = (name: FieldPath<TFieldValues> | `root.${string}` | 'root', error: ErrorOption, options?: {
429
+ shouldFocus: boolean;
430
+ }) => void;
431
+ /**
432
+ * Unregister a field reference and remove its value.
433
+ *
434
+ * @remarks
435
+ * [API](https://react-hook-form.com/api/useform/unregister) • [Demo](https://codesandbox.io/s/react-hook-form-unregister-4k2ey) • [Video](https://www.youtube.com/watch?v=TM99g_NW5Gk&feature=emb_imp_woyt)
436
+ *
437
+ * @param name - the path name to the form field value.
438
+ * @param options - keep form state options
439
+ *
440
+ * @example
441
+ * ```tsx
442
+ * register("name", { required: true })
443
+ *
444
+ * <button onClick={() => unregister("name")} />
445
+ * // there are various keep options to retain formState
446
+ * <button onClick={() => unregister("name", { keepErrors: true })} />
447
+ * ```
448
+ */
449
+ export type UseFormUnregister<TFieldValues extends FieldValues> = (name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[], options?: Omit<KeepStateOptions, 'keepIsSubmitted' | 'keepSubmitCount' | 'keepValues' | 'keepDefaultValues' | 'keepErrors'> & {
450
+ keepValue?: boolean;
451
+ keepDefaultValue?: boolean;
452
+ keepError?: boolean;
453
+ }) => void;
454
+ /**
455
+ * Validate the entire form. Handle submit and error callback.
456
+ *
457
+ * @remarks
458
+ * [API](https://react-hook-form.com/api/useform/handlesubmit) • [Demo](https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu) • [Video](https://www.youtube.com/watch?v=KzcPKB9SOEk)
459
+ *
460
+ * @param onValid - callback function invoked after form pass validation
461
+ * @param onInvalid - callback function invoked when form failed validation
462
+ *
463
+ * @returns callback - return callback function
464
+ *
465
+ * @example
466
+ * ```tsx
467
+ * const onSubmit = (data) => console.log(data);
468
+ * const onError = (error) => console.log(error);
469
+ *
470
+ * <form onSubmit={handleSubmit(onSubmit, onError)} />
471
+ * ```
472
+ */
473
+ export type UseFormHandleSubmit<TFieldValues extends FieldValues> = (onValid: SubmitHandler<TFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React.BaseSyntheticEvent) => Promise<void>;
474
+ /**
475
+ * Reset a field state and reference.
476
+ *
477
+ * @remarks
478
+ * [API](https://react-hook-form.com/api/useform/resetfield) • [Demo](https://codesandbox.io/s/priceless-firefly-d0kuv) • [Video](https://www.youtube.com/watch?v=IdLFcNaEFEo)
479
+ *
480
+ * @param name - the path name to the form field value.
481
+ * @param options - keep form state options
482
+ *
483
+ * @example
484
+ * ```tsx
485
+ * <input {...register("firstName", { required: true })} />
486
+ * <button type="button" onClick={() => resetField("firstName"))}>Reset</button>
487
+ * ```
488
+ */
489
+ export type UseFormResetField<TFieldValues extends FieldValues> = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: Partial<{
490
+ keepDirty: boolean;
491
+ keepTouched: boolean;
492
+ keepError: boolean;
493
+ defaultValue: FieldPathValue<TFieldValues, TFieldName>;
494
+ }>) => void;
495
+ type ResetAction<TFieldValues> = (formValues: TFieldValues) => TFieldValues;
496
+ /**
497
+ * Reset at the entire form state.
498
+ *
499
+ * @remarks
500
+ * [API](https://react-hook-form.com/api/useform/reset) • [Demo](https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901) • [Video](https://www.youtube.com/watch?v=qmCLBjyPwVk)
501
+ *
502
+ * @param values - the entire form values to be reset
503
+ * @param keepStateOptions - keep form state options
504
+ *
505
+ * @example
506
+ * ```tsx
507
+ * useEffect(() => {
508
+ * // reset the entire form after component mount or form defaultValues is ready
509
+ * reset({
510
+ * fieldA: "test"
511
+ * fieldB: "test"
512
+ * });
513
+ * }, [reset])
514
+ *
515
+ * // reset by combine with existing form values
516
+ * reset({
517
+ * ...getValues(),
518
+ * fieldB: "test"
519
+ *});
520
+ *
521
+ * // reset and keep form state
522
+ * reset({
523
+ * ...getValues(),
524
+ *}, {
525
+ * keepErrors: true,
526
+ * keepDirty: true
527
+ *});
528
+ * ```
529
+ */
530
+ export type UseFormReset<TFieldValues extends FieldValues> = (values?: DefaultValues<TFieldValues> | TFieldValues | ResetAction<TFieldValues>, keepStateOptions?: KeepStateOptions) => void;
531
+ export type WatchInternal<TFieldValues> = (fieldNames?: InternalFieldName | InternalFieldName[], defaultValue?: DeepPartial<TFieldValues>, isMounted?: boolean, isGlobal?: boolean) => FieldPathValue<FieldValues, InternalFieldName> | FieldPathValues<FieldValues, InternalFieldName[]>;
532
+ export type GetIsDirty = <TName extends InternalFieldName, TData>(name?: TName, data?: TData) => boolean;
533
+ export type FormStateSubjectRef<TFieldValues extends FieldValues> = Subject<Partial<FormState<TFieldValues>> & {
534
+ name?: InternalFieldName;
535
+ }>;
536
+ export type Subjects<TFieldValues extends FieldValues = FieldValues> = {
537
+ values: Subject<{
538
+ name?: InternalFieldName;
539
+ type?: EventType;
540
+ values: FieldValues;
541
+ }>;
542
+ array: Subject<{
543
+ name?: InternalFieldName;
544
+ values?: FieldValues;
545
+ }>;
546
+ state: FormStateSubjectRef<TFieldValues>;
547
+ };
548
+ export type Names = {
549
+ mount: InternalNameSet;
550
+ unMount: InternalNameSet;
551
+ array: InternalNameSet;
552
+ watch: InternalNameSet;
553
+ focus?: InternalFieldName;
554
+ watchAll?: boolean;
555
+ };
556
+ export type BatchFieldArrayUpdate = <T extends Function, TFieldValues extends FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>(name: InternalFieldName, updatedFieldArrayValues?: Partial<FieldArray<TFieldValues, TFieldArrayName>>[], method?: T, args?: Partial<{
557
+ argA: unknown;
558
+ argB: unknown;
559
+ }>, shouldSetValue?: boolean, shouldUpdateFieldsAndErrors?: boolean) => void;
560
+ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
561
+ _subjects: Subjects<TFieldValues>;
562
+ _removeUnmounted: Noop;
563
+ _names: Names;
564
+ _state: {
565
+ mount: boolean;
566
+ action: boolean;
567
+ watch: boolean;
568
+ };
569
+ _reset: UseFormReset<TFieldValues>;
570
+ _options: UseFormProps<TFieldValues, TContext>;
571
+ _getDirty: GetIsDirty;
572
+ _formState: FormState<TFieldValues>;
573
+ _updateValid: (shouldUpdateValid?: boolean) => void;
574
+ _updateFormState: (formState: Partial<FormState<TFieldValues>>) => void;
575
+ _fields: FieldRefs;
576
+ _formValues: FieldValues;
577
+ _proxyFormState: ReadFormState;
578
+ _defaultValues: Partial<DefaultValues<TFieldValues>>;
579
+ _getWatch: WatchInternal<TFieldValues>;
580
+ _updateFieldArray: BatchFieldArrayUpdate;
581
+ _getFieldArray: <TFieldArrayValues>(name: InternalFieldName) => Partial<TFieldArrayValues>[];
582
+ _executeSchema: (names: InternalFieldName[]) => Promise<{
583
+ errors: FieldErrors;
584
+ }>;
585
+ register: UseFormRegister<TFieldValues>;
586
+ unregister: UseFormUnregister<TFieldValues>;
587
+ getFieldState: UseFormGetFieldState<TFieldValues>;
588
+ };
589
+ export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartial<TFieldValues>, info: {
590
+ name?: FieldPath<TFieldValues>;
591
+ type?: EventType;
592
+ }) => void;
593
+ export type UseFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
594
+ watch: UseFormWatch<TFieldValues>;
595
+ getValues: UseFormGetValues<TFieldValues>;
596
+ getFieldState: UseFormGetFieldState<TFieldValues>;
597
+ setError: UseFormSetError<TFieldValues>;
598
+ clearErrors: UseFormClearErrors<TFieldValues>;
599
+ setValue: UseFormSetValue<TFieldValues>;
600
+ trigger: UseFormTrigger<TFieldValues>;
601
+ formState: FormState<TFieldValues>;
602
+ resetField: UseFormResetField<TFieldValues>;
603
+ reset: UseFormReset<TFieldValues>;
604
+ handleSubmit: UseFormHandleSubmit<TFieldValues>;
605
+ unregister: UseFormUnregister<TFieldValues>;
606
+ control: Control<TFieldValues, TContext>;
607
+ register: UseFormRegister<TFieldValues>;
608
+ setFocus: UseFormSetFocus<TFieldValues>;
609
+ };
610
+ export type UseFormStateProps<TFieldValues extends FieldValues> = Partial<{
611
+ control?: Control<TFieldValues>;
612
+ disabled?: boolean;
613
+ name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[];
614
+ exact?: boolean;
615
+ }>;
616
+ export type UseFormStateReturn<TFieldValues extends FieldValues> = FormState<TFieldValues>;
617
+ export type UseWatchProps<TFieldValues extends FieldValues = FieldValues> = {
618
+ defaultValue?: unknown;
619
+ disabled?: boolean;
620
+ name?: FieldPath<TFieldValues> | FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[];
621
+ control?: Control<TFieldValues>;
622
+ exact?: boolean;
623
+ };
624
+ export type FormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
625
+ children: React.ReactNode | React.ReactNode[];
626
+ } & UseFormReturn<TFieldValues, TContext>;
627
+ export {};
628
628
  //# sourceMappingURL=form.d.ts.map