react-f0rm 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -1143
- package/devtools.d.ts +1 -0
- package/devtools.js +1 -0
- package/dist/array-3hAjl6Bz.d.ts +160 -0
- package/dist/devtools/index.cjs.js +1 -1
- package/dist/devtools/index.cjs.js.map +1 -1
- package/dist/devtools/index.d.cts +34 -0
- package/dist/devtools/index.d.mts +34 -0
- package/dist/devtools/index.d.ts +3 -2
- package/dist/devtools/index.mjs +1 -1
- package/dist/devtools/index.mjs.map +1 -1
- package/dist/errors-8oPux7GR.cjs.js +2 -0
- package/dist/errors-8oPux7GR.cjs.js.map +1 -0
- package/dist/errors-ClH3eV1R.mjs +2 -0
- package/dist/errors-ClH3eV1R.mjs.map +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.cts +1833 -0
- package/dist/index.d.mts +1833 -0
- package/dist/index.d.ts +372 -117
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +859 -225
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +2 -2
- package/dist/index.umd.min.js.map +1 -1
- package/dist/persist.cjs.js +1 -1
- package/dist/persist.cjs.js.map +1 -1
- package/dist/persist.d.cts +49 -0
- package/dist/persist.d.mts +49 -0
- package/dist/persist.mjs +1 -1
- package/dist/persist.mjs.map +1 -1
- package/dist/resolvers/standard-schema.cjs.js +1 -1
- package/dist/resolvers/standard-schema.cjs.js.map +1 -1
- package/dist/resolvers/standard-schema.d.cts +2 -0
- package/dist/resolvers/standard-schema.d.mts +2 -0
- package/dist/resolvers/standard-schema.d.ts +1 -67
- package/dist/resolvers/standard-schema.mjs +1 -1
- package/dist/resolvers/standard-schema.mjs.map +1 -1
- package/dist/resolvers/yup.cjs.js +1 -1
- package/dist/resolvers/yup.cjs.js.map +1 -1
- package/dist/resolvers/yup.d.cts +6 -0
- package/dist/resolvers/yup.d.mts +6 -0
- package/dist/resolvers/yup.d.ts +0 -1
- package/dist/resolvers/yup.mjs +1 -1
- package/dist/resolvers/yup.mjs.map +1 -1
- package/dist/resolvers/zod.cjs.js +1 -1
- package/dist/resolvers/zod.cjs.js.map +1 -1
- package/dist/resolvers/zod.d.cts +6 -0
- package/dist/resolvers/zod.d.mts +6 -0
- package/dist/resolvers/zod.d.ts +0 -1
- package/dist/resolvers/zod.mjs +1 -1
- package/dist/resolvers/zod.mjs.map +1 -1
- package/dist/server/index.cjs.js +1 -1
- package/dist/server/index.cjs.js.map +1 -1
- package/dist/server/index.d.cts +106 -0
- package/dist/server/index.d.mts +106 -0
- package/dist/server/index.d.ts +31 -2
- package/dist/server/index.mjs +1 -1
- package/dist/server/index.mjs.map +1 -1
- package/dist/standard-schema-CYbnugL7.d.ts +1184 -0
- package/dist/standardSchema-BpZvg0tZ.mjs +2 -0
- package/dist/standardSchema-BpZvg0tZ.mjs.map +1 -0
- package/dist/standardSchema-CxV_DhBO.cjs.js +2 -0
- package/dist/standardSchema-CxV_DhBO.cjs.js.map +1 -0
- package/dist/validate-BEjNsNvd.mjs +2 -0
- package/dist/validate-BEjNsNvd.mjs.map +1 -0
- package/dist/validate-BvN6hiEG.cjs.js +2 -0
- package/dist/validate-BvN6hiEG.cjs.js.map +1 -0
- package/dist/values-Bod74Kzu.mjs +2 -0
- package/dist/values-Bod74Kzu.mjs.map +1 -0
- package/dist/values-DKpOCD5J.cjs.js +2 -0
- package/dist/values-DKpOCD5J.cjs.js.map +1 -0
- package/package.json +72 -27
- package/persist.d.ts +1 -0
- package/persist.js +1 -0
- package/resolvers/standard-schema.d.ts +1 -0
- package/resolvers/standard-schema.js +1 -0
- package/resolvers/yup.d.ts +1 -0
- package/resolvers/yup.js +1 -0
- package/resolvers/zod.d.ts +1 -0
- package/resolvers/zod.js +1 -0
- package/server.d.ts +1 -0
- package/server.js +1 -0
- package/dist/errors-BKrUdpfI.cjs.js +0 -2
- package/dist/errors-BKrUdpfI.cjs.js.map +0 -1
- package/dist/errors-CrQBddrJ.mjs +0 -2
- package/dist/errors-CrQBddrJ.mjs.map +0 -1
- package/dist/form-CeKSBs31.d.ts +0 -486
- package/dist/validate-CNtuUhmk.mjs +0 -2
- package/dist/validate-CNtuUhmk.mjs.map +0 -1
- package/dist/validate-Cl4ksNFu.cjs.js +0 -2
- package/dist/validate-Cl4ksNFu.cjs.js.map +0 -1
- package/dist/validate-nksgv1pR.d.ts +0 -272
- package/dist/values-Cu6awQOJ.cjs.js +0 -2
- package/dist/values-Cu6awQOJ.cjs.js.map +0 -1
- package/dist/values-DRY-a32G.mjs +0 -2
- package/dist/values-DRY-a32G.mjs.map +0 -1
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,1833 @@
|
|
|
1
|
+
import { f as FieldError, F as Form$1, e as Path, d as FieldPath, P as PathSegments, g as PathValueOf, N as Name, h as ValidationMode, R as RegisterOptions, i as RegisterProps, a as FieldErrorEntry, V as Validator, S as StandardSchemaV1, j as FieldRules, k as FieldErrors, l as FieldErrorsTree, O as Options, m as FormEvents } from './standard-schema-CYbnugL7.js';
|
|
2
|
+
export { A as ArrayItemOf, D as DottedPath, n as FORM_ERROR, o as FormValidateFn, p as FormValidateMeta, q as FormValidateMode, r as FormValidationError, I as InferSchemaValues, s as OpaqueTypes, t as PathValue, u as ReValidateMode, v as SetErrorOptions, w as SetFocusOptions, x as SetServerErrorsOptions, y as SyncValidator, T as TriggerOptions, b as VALIDATION_OUTCOME, z as ValidateResult, c as ValidationOutcome, B as ValidatorRegistration, C as clearErrors, E as clearServerErrors, G as createForm, H as dottedKeyToFieldPath, J as ensureValidate, K as fieldPathToDottedKey, L as getError, M as getErrorByPath, Q as getErrors, U as getErrorsRecord, W as getErrorsTree, X as getFieldErrors, Y as getFieldErrorsByPath, Z as getFirstError, _ as hasErrors, $ as registerFieldValidateDeps, a0 as registerValidatorByPath, a1 as revalidateDependentsOnChange, a2 as revalidateFormOnChange, a3 as runFormValidate, a4 as setError, a5 as setErrorByPath, a6 as setFocus, a7 as setServerErrors, a8 as setValidatingByPath, a9 as trigger, aa as unregisterFieldValidateDeps, ab as unsetValidatingByPath, ac as validate } from './standard-schema-CYbnugL7.js';
|
|
3
|
+
import { EventEmitter } from '@for-fun/event-emitter';
|
|
4
|
+
export { EventEmitter } from '@for-fun/event-emitter';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { Context, Provider, ReactNode } from 'react';
|
|
7
|
+
export { a as appendValue, c as appendValueByPath, i as insertValue, d as insertValueByPath, m as moveValue, e as moveValueByPath, p as prependValue, f as prependValueByPath, r as removeValue, g as removeValueByPath, b as replaceValues, h as replaceValuesByPath, s as swapValues, j as swapValuesByPath, u as updateValue, k as updateValueByPath } from './array-3hAjl6Bz.js';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Get form values: the values Map layered over parsedValues (when a schema
|
|
11
|
+
* validation produced them) layered over initialValues.
|
|
12
|
+
*
|
|
13
|
+
* Merged with copy-on-write ownership tracking ({@link setOwned}): every
|
|
14
|
+
* distinct container on a written path is allocated once and shared by all
|
|
15
|
+
* paths through it, instead of re-copying the whole branch for every key.
|
|
16
|
+
* One owned set spans the whole merge, so containers borrowed from the
|
|
17
|
+
* parsedValues tree are copied before mutation exactly like initialValues
|
|
18
|
+
* ones. The result is a freshly merged tree per mutation, with untouched
|
|
19
|
+
* branches sharing references with the baseline exactly like chained
|
|
20
|
+
* `set` did.
|
|
21
|
+
*
|
|
22
|
+
* Memoized per form like {@link getDirtyFields}: every value write bumps a
|
|
23
|
+
* `version` counter ({@link bumpValuesVersion}) while reads reset it, so
|
|
24
|
+
* consecutive reads hand back the same reference (submit, changeValue and
|
|
25
|
+
* form-level validate all read the whole tree, often several times per
|
|
26
|
+
* interaction). Treat the result as read-only — the next read after a
|
|
27
|
+
* write returns a fresh tree, but between writes the cached one is shared
|
|
28
|
+
* with every other reader.
|
|
29
|
+
*
|
|
30
|
+
* parsedValues is the schema's complete output tree: once validation
|
|
31
|
+
* succeeds it replaces the initialValues baseline (fields the schema
|
|
32
|
+
* dropped disappear), while live edits in the values Map still win over
|
|
33
|
+
* both. It never affects dirty state — {@link isDirty} and
|
|
34
|
+
* {@link getDirtyFields} compare live edits against initialValues only,
|
|
35
|
+
* because parsing is not a user edit.
|
|
36
|
+
*
|
|
37
|
+
* @param form
|
|
38
|
+
*/
|
|
39
|
+
declare function getValues<T extends Record<string, any> = any>(form: Form$1<T>): T;
|
|
40
|
+
/**
|
|
41
|
+
* Get field value
|
|
42
|
+
* @param form
|
|
43
|
+
* @param name
|
|
44
|
+
*/
|
|
45
|
+
declare function getValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): PathValueOf<T, P>;
|
|
46
|
+
/**
|
|
47
|
+
* Get field value by path
|
|
48
|
+
* @param form
|
|
49
|
+
* @param path
|
|
50
|
+
*/
|
|
51
|
+
declare function getValueByPath({ initialValues, parsedValues, values, deleted }: Form$1, path: Path): any;
|
|
52
|
+
/** Options accepted by {@link setValue} / {@link setValueByPath} / {@link
|
|
53
|
+
* changeValue} / {@link changeValueByPath}. `shouldValidate`/`shouldTouch`
|
|
54
|
+
* default to `false`; omitting the options object entirely keeps the plain
|
|
55
|
+
* set-value behavior (no validation, no touched marking, dirty stays
|
|
56
|
+
* derived). */
|
|
57
|
+
type SetFieldOptions = {
|
|
58
|
+
/** Run the field's registered validator (if any) after the value lands,
|
|
59
|
+
* same as triggering that single field. Defaults to `false`. */
|
|
60
|
+
shouldValidate?: boolean;
|
|
61
|
+
/** Mark the field as touched. Defaults to `false`. */
|
|
62
|
+
shouldTouch?: boolean;
|
|
63
|
+
/** Land the value as a commit instead of an edit: the value becomes the
|
|
64
|
+
* field's dirty-comparison baseline, so `getDirtyFields`/`isDirty`/
|
|
65
|
+
* `getFieldState().isDirty` read the field as clean, and a later write
|
|
66
|
+
* dirties it only by differing from the new baseline. `true` (or
|
|
67
|
+
* omitting the flag) keeps the default derived behavior — dirty while
|
|
68
|
+
* the live value differs from initialValues. */
|
|
69
|
+
shouldDirty?: boolean;
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* Set field value. The value may also be an updater function receiving
|
|
73
|
+
* the field's current value and returning the next one (TanStack Form's
|
|
74
|
+
* `setFieldValue` contract) — handy for increments and array transforms:
|
|
75
|
+
* `setValue(form, 'count', c => c + 1)`. The tradeoff: a function can
|
|
76
|
+
* never itself be stored as a field value through this function.
|
|
77
|
+
* @param form
|
|
78
|
+
* @param name
|
|
79
|
+
* @param value
|
|
80
|
+
* @param options
|
|
81
|
+
*/
|
|
82
|
+
declare function setValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P, value: PathValueOf<T, P> | ((prev: PathValueOf<T, P>) => PathValueOf<T, P>), options?: SetFieldOptions): void;
|
|
83
|
+
/**
|
|
84
|
+
* Set field value. The value may also be an updater function receiving
|
|
85
|
+
* the field's current value and returning the next one (TanStack Form's
|
|
86
|
+
* `setFieldValue` contract) — note that a function can therefore never
|
|
87
|
+
* itself be stored as a field value through this function.
|
|
88
|
+
* @param form
|
|
89
|
+
* @param path
|
|
90
|
+
* @param value
|
|
91
|
+
* @param options
|
|
92
|
+
*/
|
|
93
|
+
declare function setValueByPath(form: Form$1, path: Path, value: any | ((prev: any) => any), options?: SetFieldOptions): void;
|
|
94
|
+
/**
|
|
95
|
+
* The write of {@link setValueByPath} minus the `'change'` emit: the
|
|
96
|
+
* render-time {@link useField} `initialValue` seed. The field's first
|
|
97
|
+
* paint (SSR included — effects never run on the server) must already
|
|
98
|
+
* carry the value, so the write happens during render where emitting is
|
|
99
|
+
* illegal; the seeding field announces it from its post-commit effect
|
|
100
|
+
* through {@link emitChangeByPath} instead.
|
|
101
|
+
*
|
|
102
|
+
* Everything else matches a plain write: descendant keys of the seeded
|
|
103
|
+
* path are pruned, the branch's tombstones and committed baselines are
|
|
104
|
+
* revived/dropped, and both memo caches are invalidated. Like the effect
|
|
105
|
+
* seed it replaces, the caller guards it to paths with no value yet.
|
|
106
|
+
*/
|
|
107
|
+
declare function seedValueByPath(form: Form$1, path: Path, value: any): void;
|
|
108
|
+
/** Announce a {@link seedValueByPath} that happened during render: the
|
|
109
|
+
* payload-carrying `'change'` emit {@link setValueByPath} would have
|
|
110
|
+
* fired, split out so it can run post-commit where emitting is safe.
|
|
111
|
+
* Subscribers that rendered after the seed re-read an unchanged snapshot
|
|
112
|
+
* and bail; subscribers from earlier commits resync. */
|
|
113
|
+
declare function emitChangeByPath({ emitter }: Form$1, path: Path): void;
|
|
114
|
+
/** Per-form registry of mounted fields' validation-mode overrides: path
|
|
115
|
+
* key -> the field's `mode` option (undefined = follow {@link Form.mode})
|
|
116
|
+
* plus an owner token so competing mounts at one path clean up safely.
|
|
117
|
+
* Presence of an entry is the "a field is mounted at this path" signal
|
|
118
|
+
* that routes {@link changeValueByPath} into the gated user-change
|
|
119
|
+
* pipeline ({@link userChangeByPath}). Held in a WeakMap so the Form
|
|
120
|
+
* shape carries only plain state fields. */
|
|
121
|
+
/** Snapshot of one field's aggregated state, as {@link getFieldState}
|
|
122
|
+
* returns it. `errors` is the stored array shared with the form — treat it
|
|
123
|
+
* as read-only, like every {@link getFieldErrors} result. */
|
|
124
|
+
type FieldState<T = any> = {
|
|
125
|
+
value: T;
|
|
126
|
+
error: FieldError | undefined;
|
|
127
|
+
errors: FieldError[];
|
|
128
|
+
isDirty: boolean;
|
|
129
|
+
isTouched: boolean;
|
|
130
|
+
isValidating: boolean;
|
|
131
|
+
};
|
|
132
|
+
/**
|
|
133
|
+
* Get one field's aggregated state: the layered value ({@link getValue}),
|
|
134
|
+
* the first error ({@link getError}) and every error ({@link
|
|
135
|
+
* getFieldErrors}), dirtiness, the touched flag, and whether a validator
|
|
136
|
+
* is in flight. `isDirty` applies the same per-field rule as {@link
|
|
137
|
+
* getDirtyFields}: a live value exists and differs from initialValues at
|
|
138
|
+
* that path (parsedValues never counts — parsing is not an edit).
|
|
139
|
+
*
|
|
140
|
+
* @param form
|
|
141
|
+
* @param name
|
|
142
|
+
*/
|
|
143
|
+
declare function getFieldState<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): FieldState<PathValueOf<T, P>>;
|
|
144
|
+
/**
|
|
145
|
+
* Remove a field: by default its live value drops out of reads and
|
|
146
|
+
* `getValues()` (the path is tombstoned, so it never falls back to
|
|
147
|
+
* initialValues), its dirty baseline, touched flag and errors are cleared.
|
|
148
|
+
* The keep-flags preserve slices of that state instead.
|
|
149
|
+
*
|
|
150
|
+
* @param form
|
|
151
|
+
* @param name
|
|
152
|
+
*/
|
|
153
|
+
/**
|
|
154
|
+
* Options accepted by {@link removeField}. All flags default to `false` —
|
|
155
|
+
* the historical remove semantics (value dropped, path tombstoned, dirty
|
|
156
|
+
* baseline/touched/errors cleared). Names mirror react-hook-form's
|
|
157
|
+
* `unregister` options to ease migration; RHF's `shouldValidate` and
|
|
158
|
+
* `keepDefaultValue` have no counterparts (removal never validates, and
|
|
159
|
+
* the tombstone is exactly the "do not revive from initialValues" choice).
|
|
160
|
+
*/
|
|
161
|
+
type RemoveFieldOptions = {
|
|
162
|
+
/** Keep the field's live value and dirty baseline instead of
|
|
163
|
+
* tombstoning: reads and `getValues()` keep returning the value, submit
|
|
164
|
+
* includes it, and dirtiness against initialValues is preserved. */
|
|
165
|
+
keepValue?: boolean;
|
|
166
|
+
/** Keep the field's dirty baseline. Implies `keepValue` — a removed
|
|
167
|
+
* value has nothing to be dirty about. */
|
|
168
|
+
keepDirty?: boolean;
|
|
169
|
+
/** Keep the field's touched flag instead of clearing it. */
|
|
170
|
+
keepTouched?: boolean;
|
|
171
|
+
/** Keep the field's errors instead of clearing them. */
|
|
172
|
+
keepError?: boolean;
|
|
173
|
+
};
|
|
174
|
+
declare function removeField(form: Form$1, name: Name, options?: RemoveFieldOptions): void;
|
|
175
|
+
/**
|
|
176
|
+
* Remove field
|
|
177
|
+
* @param form
|
|
178
|
+
* @param path
|
|
179
|
+
* @param options keep-flags to preserve slices of state through the removal
|
|
180
|
+
*/
|
|
181
|
+
declare function removeFieldByPath(form: Form$1, path: Path, options?: RemoveFieldOptions): void;
|
|
182
|
+
/**
|
|
183
|
+
* Set form initialValues
|
|
184
|
+
*
|
|
185
|
+
* Content-based early return: a new reference with equal content (the
|
|
186
|
+
* re-rendered inline literal) is a no-op, so committed edits survive, while
|
|
187
|
+
* genuinely changed content swaps the baseline and re-seeds — live values
|
|
188
|
+
* and tombstones are cleared, touched flags and errors survive.
|
|
189
|
+
* @param form
|
|
190
|
+
* @param initialValues
|
|
191
|
+
*/
|
|
192
|
+
declare function setInitialValues(form: Form$1, initialValues: any): void;
|
|
193
|
+
/** Options accepted by {@link reset}. Every flag defaults to `false` —
|
|
194
|
+
* omitting the object (or any flag) keeps the plain full-reset behavior.
|
|
195
|
+
* Names mirror react-hook-form's reset options to ease migration. */
|
|
196
|
+
type ResetOptions = {
|
|
197
|
+
/** Keep the current values of fields that are dirty — differ from the
|
|
198
|
+
* pre-reset initialValues (the same rule {@link getDirtyFields} applies).
|
|
199
|
+
* Clean fields fall back to the new initialValues as usual. */
|
|
200
|
+
keepDirtyValues?: boolean;
|
|
201
|
+
/** Keep every field's current live value instead of returning to the
|
|
202
|
+
* baseline (react-hook-form's `keepValues` — a strict superset of
|
|
203
|
+
* `keepDirtyValues`, which only preserves dirty fields' values).
|
|
204
|
+
* Dirtiness is recomputed against the post-reset baseline, so kept
|
|
205
|
+
* values that differ from a newly provided baseline count as dirty. */
|
|
206
|
+
keepValues?: boolean;
|
|
207
|
+
/** Ignore a newly provided `initialValues` argument and keep the current
|
|
208
|
+
* baseline — fields still return to it (react-hook-form's
|
|
209
|
+
* `keepDefaultValues`). */
|
|
210
|
+
keepDefaultValues?: boolean;
|
|
211
|
+
/** Keep the touched set instead of clearing it. */
|
|
212
|
+
keepTouched?: boolean;
|
|
213
|
+
/** Keep field errors instead of clearing them. */
|
|
214
|
+
keepErrors?: boolean;
|
|
215
|
+
/** Keep the submitted flag (`isSubmitted`) instead of clearing it —
|
|
216
|
+
* react-hook-form's `keepIsSubmitted`. */
|
|
217
|
+
keepIsSubmitted?: boolean;
|
|
218
|
+
/** Keep the last submit's success flag (`isSubmitSuccessful`) instead of
|
|
219
|
+
* clearing it. */
|
|
220
|
+
keepIsSubmitSuccessful?: boolean;
|
|
221
|
+
/** Keep `submitCount` instead of resetting it to 0. */
|
|
222
|
+
keepSubmitCount?: boolean;
|
|
223
|
+
/** Keep `isSubmitting` instead of resetting it to false. */
|
|
224
|
+
keepIsSubmitting?: boolean;
|
|
225
|
+
};
|
|
226
|
+
/**
|
|
227
|
+
* Reset form
|
|
228
|
+
* @param form
|
|
229
|
+
* @param initialValues new baseline — omitted (or undefined), the form
|
|
230
|
+
* keeps its current initialValues and fields simply return to them
|
|
231
|
+
* (react-hook-form's reset-without-values semantics)
|
|
232
|
+
* @param options keep-flags to preserve slices of state through the reset
|
|
233
|
+
*/
|
|
234
|
+
declare function reset(form: Form$1, initialValues?: any, options?: ResetOptions): void;
|
|
235
|
+
/** Options accepted by {@link resetField}. The flags default to `false`;
|
|
236
|
+
* `value` has no default — omitted, the field falls back to initialValues;
|
|
237
|
+
* provided, the explicit value becomes the live value with no fallback at
|
|
238
|
+
* all. Mirrors react-hook-form's resetField options (`value` plays their
|
|
239
|
+
* `defaultValue`'s role) to ease migration. */
|
|
240
|
+
type ResetFieldOptions = {
|
|
241
|
+
/** Keep the field's touched flag instead of clearing it. */
|
|
242
|
+
keepTouched?: boolean;
|
|
243
|
+
/** Keep the field's errors instead of clearing them. */
|
|
244
|
+
keepErrors?: boolean;
|
|
245
|
+
/** Explicit post-reset value for the field — never falls back to
|
|
246
|
+
* initialValues. */
|
|
247
|
+
value?: any;
|
|
248
|
+
};
|
|
249
|
+
/**
|
|
250
|
+
* Reset a single field: drop its live value (reads fall back to the
|
|
251
|
+
* baseline — initialValues, or the schema's parsed output when one
|
|
252
|
+
* exists, in which case the path is removed from parsedValues and the
|
|
253
|
+
* initial value pinned back so the field reads initialValues again),
|
|
254
|
+
* clear its touched flag and errors, and revive the path's removal
|
|
255
|
+
* tombstones — the inverse of {@link removeFieldByPath}. Other fields
|
|
256
|
+
* and the submission flags are untouched; see {@link reset} for the
|
|
257
|
+
* form-wide counterpart.
|
|
258
|
+
*
|
|
259
|
+
* @param form
|
|
260
|
+
* @param name
|
|
261
|
+
* @param options
|
|
262
|
+
*/
|
|
263
|
+
declare function resetField<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P, options?: ResetFieldOptions): void;
|
|
264
|
+
|
|
265
|
+
/**
|
|
266
|
+
* Set field touched state
|
|
267
|
+
* @param form
|
|
268
|
+
* @param name
|
|
269
|
+
*/
|
|
270
|
+
declare function setTouched(form: Form$1, name: Name): void;
|
|
271
|
+
/**
|
|
272
|
+
* Set field touched state
|
|
273
|
+
* @param form
|
|
274
|
+
* @param path
|
|
275
|
+
*/
|
|
276
|
+
declare function setTouchedByPath({ emitter, touched }: Form$1, path: Path): void;
|
|
277
|
+
/**
|
|
278
|
+
* Check if field has been touched
|
|
279
|
+
* @param form
|
|
280
|
+
* @param name
|
|
281
|
+
*/
|
|
282
|
+
declare function hasTouched<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): boolean;
|
|
283
|
+
/**
|
|
284
|
+
* Check if field has been touched
|
|
285
|
+
* @param form
|
|
286
|
+
* @param path
|
|
287
|
+
*/
|
|
288
|
+
declare function hasTouchedByPath({ touched }: Form$1, path: Path): boolean;
|
|
289
|
+
/**
|
|
290
|
+
* Is dirty -- any value differs from initialValues
|
|
291
|
+
* @param form
|
|
292
|
+
*/
|
|
293
|
+
/**
|
|
294
|
+
* Get touched fields as user-facing dotted paths ('a.b', 'a.0.c'), unlike
|
|
295
|
+
* the JSON array keys stored in the touched Set.
|
|
296
|
+
* @param form
|
|
297
|
+
* @return array of touched fields' dotted paths
|
|
298
|
+
*/
|
|
299
|
+
declare function getTouchedFields({ touched }: Form$1): string[];
|
|
300
|
+
/**
|
|
301
|
+
* Is touched -- any field has been touched
|
|
302
|
+
* @param form
|
|
303
|
+
*/
|
|
304
|
+
declare function isTouched({ touched }: Form$1): boolean;
|
|
305
|
+
|
|
306
|
+
/**
|
|
307
|
+
* Is one field dirty — the per-field rule behind `getFieldState`'s
|
|
308
|
+
* `isDirty` and {@link useIsFieldDirty}: a live value exists at the path
|
|
309
|
+
* and differs from the field's effective baseline (committed
|
|
310
|
+
* `shouldDirty: false` baselines included). A leaf under a wholesale
|
|
311
|
+
* ancestor write reports clean — dirtiness belongs to the branch that
|
|
312
|
+
* actually diverged, the same attribution {@link getDirtyFields} applies.
|
|
313
|
+
*/
|
|
314
|
+
declare function isFieldDirtyByPath(form: Form$1, path: Path): boolean;
|
|
315
|
+
/**
|
|
316
|
+
* Is dirty -- any value differs from initialValues
|
|
317
|
+
* @param form
|
|
318
|
+
*/
|
|
319
|
+
declare function isDirty(form: Form$1): boolean;
|
|
320
|
+
/**
|
|
321
|
+
* Get dirty fields -- fields whose current value differs from initialValues.
|
|
322
|
+
* Keys are user-facing dotted paths ('a.b', 'a.0.c'), unlike the JSON array
|
|
323
|
+
* keys stored in the values Map.
|
|
324
|
+
* @param form
|
|
325
|
+
* @return object mapping each dirty field's dotted path to true; the same
|
|
326
|
+
* reference is returned until the dirty set actually changes
|
|
327
|
+
*/
|
|
328
|
+
declare function getDirtyFields(form: Form$1): Record<string, boolean>;
|
|
329
|
+
|
|
330
|
+
/**
|
|
331
|
+
* Set a field value as a user change.
|
|
332
|
+
*
|
|
333
|
+
* The write rides the same gated user-change pipeline a user typing into
|
|
334
|
+
* the field would fire when a field is mounted on the path (registered
|
|
335
|
+
* through {@link registerFieldMode} — `useField` registers on mount): the
|
|
336
|
+
* field's effective `mode` (per-field override included) and the form's
|
|
337
|
+
* `reValidateMode` drive validation exactly as in {@link
|
|
338
|
+
* userChangeByPath}. With no mounted field on the path it degrades to a
|
|
339
|
+
* plain value set ({@link setValue}).
|
|
340
|
+
*
|
|
341
|
+
* This is the channel for component-library bridges that hand a control a
|
|
342
|
+
* plain setter bound to a field — they cannot rebuild the gating from
|
|
343
|
+
* public form state, because the per-field mode override and the
|
|
344
|
+
* live-error view that gates `reValidateMode` live in the field
|
|
345
|
+
* registration, not in public state.
|
|
346
|
+
*
|
|
347
|
+
* Contrast {@link setValue}: that is the imperative channel — its
|
|
348
|
+
* `shouldValidate` option kicks the field's validator unconditionally,
|
|
349
|
+
* ignoring any mode. Functional updaters are the caller's to evaluate
|
|
350
|
+
* ({@link getValue}).
|
|
351
|
+
*
|
|
352
|
+
* `options` carries the same {@link SetFieldOptions}: on the fallback path
|
|
353
|
+
* (no mounted field) they forward to {@link setValueByPath} wholesale,
|
|
354
|
+
* while on the mounted-field path only `shouldDirty: false` applies — the
|
|
355
|
+
* write lands as a commit while the field's own mode gating keeps driving
|
|
356
|
+
* validation, which is the point of this channel.
|
|
357
|
+
*
|
|
358
|
+
* @param form
|
|
359
|
+
* @param name
|
|
360
|
+
* @param value
|
|
361
|
+
* @param options
|
|
362
|
+
*/
|
|
363
|
+
declare function changeValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P, value: PathValueOf<T, P>, options?: SetFieldOptions): void;
|
|
364
|
+
/**
|
|
365
|
+
* Set a field value as a user change, by parsed path
|
|
366
|
+
* @param form
|
|
367
|
+
* @param path
|
|
368
|
+
* @param value
|
|
369
|
+
* @param options
|
|
370
|
+
*/
|
|
371
|
+
declare function changeValueByPath(form: Form$1, path: Path, value: any, options?: SetFieldOptions): void;
|
|
372
|
+
/**
|
|
373
|
+
* Register a mounted field's `mode` override at `path` for user-change
|
|
374
|
+
* gating ({@link userChangeByPath} / {@link userBlur}). Returns the
|
|
375
|
+
* registration token for {@link unregisterFieldMode} plus whether the
|
|
376
|
+
* slot was already occupied — two fields mounted at one path is almost
|
|
377
|
+
* always a bug: the latest mount's mode governs every user-change write
|
|
378
|
+
* there, which the React layer warns about in DEV.
|
|
379
|
+
*
|
|
380
|
+
* @param form
|
|
381
|
+
* @param path
|
|
382
|
+
* @param mode the field's `mode` option, or undefined to follow
|
|
383
|
+
* {@link Form.mode}
|
|
384
|
+
* @return `token` to hand to {@link unregisterFieldMode}; `displaced`
|
|
385
|
+
* true when a previous registration at the same path still owned
|
|
386
|
+
* the slot
|
|
387
|
+
*/
|
|
388
|
+
declare function registerFieldMode(form: Form$1, path: Path, mode: ValidationMode | undefined): {
|
|
389
|
+
token: object;
|
|
390
|
+
displaced: boolean;
|
|
391
|
+
};
|
|
392
|
+
/** Drop a {@link registerFieldMode} registration. A later mount at the
|
|
393
|
+
* same path keeps its slot: only the entry owned by `token` is removed. */
|
|
394
|
+
declare function unregisterFieldMode(form: Form$1, path: Path, token: object): void;
|
|
395
|
+
/**
|
|
396
|
+
* Write a bound field's user change by path: the write plus the
|
|
397
|
+
* mode/reValidateMode-gated validation pipeline — what a bound field's
|
|
398
|
+
* onChange does when the user types. Reads the effective mode from the
|
|
399
|
+
* field-mode registry (the latest mount's override governs), so a plain
|
|
400
|
+
* write happens when no field is registered at `path`. Framework
|
|
401
|
+
* adapters (React's `useField`, a Solid binding) forward their field
|
|
402
|
+
* change events here.
|
|
403
|
+
*
|
|
404
|
+
* @param form
|
|
405
|
+
* @param path
|
|
406
|
+
* @param value
|
|
407
|
+
*/
|
|
408
|
+
declare function userChangeByPath(form: Form$1, path: Path, value: any): void;
|
|
409
|
+
/**
|
|
410
|
+
* A bound field's blur: mark the path touched, then kick its validator
|
|
411
|
+
* under the blur-side gate (`mode` `'onBlur'`/`'onTouched'`/`'all'`, or
|
|
412
|
+
* `reValidateMode: 'onBlur'` while the field carries a live error). The
|
|
413
|
+
* touched marking is unconditional — a field counts as touched on blur
|
|
414
|
+
* regardless of mode. Framework adapters forward field blur events here.
|
|
415
|
+
*
|
|
416
|
+
* @param form
|
|
417
|
+
* @param path
|
|
418
|
+
*/
|
|
419
|
+
declare function userBlur(form: Form$1, path: Path): void;
|
|
420
|
+
|
|
421
|
+
/**
|
|
422
|
+
* Create a non-hook field binding — react-hook-form's `register`
|
|
423
|
+
* contract, wired onto this library's store: the bound element never
|
|
424
|
+
* re-renders, every change still lands in the store through the gated
|
|
425
|
+
* user-change pipeline, and `trigger`/submit/`getValues` read it like
|
|
426
|
+
* any other field. `useField({uncontrolled: true})` already covers the
|
|
427
|
+
* hook case; `register` exists for the call sites a hook cannot serve —
|
|
428
|
+
* dynamic lists, conditional fields, non-React adapters — and for RHF
|
|
429
|
+
* migration (`{...register('name')}` spreads unchanged).
|
|
430
|
+
*
|
|
431
|
+
* Lifecycle rides the returned `ref` callback, exactly like React's own
|
|
432
|
+
* ref semantics guarantee attach/detach:
|
|
433
|
+
* - **attach** (element handed over): restore a StrictMode-detached
|
|
434
|
+
* snapshot (React 19 detaches refs on the dev remount), seed the
|
|
435
|
+
* element's initial DOM content into the store when the path has no
|
|
436
|
+
* live value yet (an uncontrolled element's `defaultValue`/`checked`
|
|
437
|
+
* is invisible to React state, so the DOM is the source), register the
|
|
438
|
+
* field-mode entry (the "mounted field" signal routing `changeValue`
|
|
439
|
+
* into the gated pipeline), wire declarative `rules` through
|
|
440
|
+
* `registerValidatorByPath`, and subscribe the `'focusError'` channel
|
|
441
|
+
* (`setFocus`, failed-submit auto-focus) plus the bulk-reset DOM sync
|
|
442
|
+
* (payload-less `'change'` rewrites the element, register-style);
|
|
443
|
+
* - **detach** (`null`): unregister mode entry and validator, drop the
|
|
444
|
+
* subscriptions, and tombstone the path unless
|
|
445
|
+
* `shouldUnregister: false` — the library's historical unmount
|
|
446
|
+
* default, snapshot/restore-safe under StrictMode.
|
|
447
|
+
*
|
|
448
|
+
* Event extraction defaults to the element's own protocol (files →
|
|
449
|
+
* `target.files`, checkbox → `target.checked`, `valueAsNumber`/
|
|
450
|
+
* `valueAsDate` under their flags, else `target.value`), overridable
|
|
451
|
+
* with `eventToValue` — the same extraction `<Field>` performs.
|
|
452
|
+
*
|
|
453
|
+
* @param form
|
|
454
|
+
* @param name path or segment array
|
|
455
|
+
* @param options {@link RegisterOptions}
|
|
456
|
+
* @return spreadable props {@link RegisterProps}
|
|
457
|
+
*/
|
|
458
|
+
declare function registerField(form: Form$1, name: Name, options?: RegisterOptions): RegisterProps;
|
|
459
|
+
|
|
460
|
+
declare function setIsSubmitting(form: Form$1, value: boolean): void;
|
|
461
|
+
declare function incrementSubmitCount(form: Form$1): void;
|
|
462
|
+
declare function setSubmitSuccessful(form: Form$1, value: boolean): void;
|
|
463
|
+
/**
|
|
464
|
+
* Set the form-level disabled flag and emit a payload-less 'disabled'
|
|
465
|
+
* event — subscribed fields (useField and the components built on it)
|
|
466
|
+
* re-render with the merged disabled state: form flag || their own
|
|
467
|
+
* `disabled` option.
|
|
468
|
+
* @param form
|
|
469
|
+
* @param value
|
|
470
|
+
*/
|
|
471
|
+
declare function setDisabled(form: Form$1, value: boolean): void;
|
|
472
|
+
/**
|
|
473
|
+
* Set the form's user-owned metadata slot (Formik's `status` role): the
|
|
474
|
+
* payload-less 'status' event wakes {@link useStatus} and any imperative
|
|
475
|
+
* `subscribe(form, {event: 'status'})` listeners. Nothing else reads or
|
|
476
|
+
* interprets the value — server session flags, step state, non-field
|
|
477
|
+
* errors of any shape are all fair game. Starts `undefined`.
|
|
478
|
+
* @param form
|
|
479
|
+
* @param value
|
|
480
|
+
*/
|
|
481
|
+
declare function setStatus(form: Form$1, value: any): void;
|
|
482
|
+
/** Submit callbacks for {@link handleSubmit}. All optional — a missing
|
|
483
|
+
* callback is simply skipped, matching the <Form> component semantics. */
|
|
484
|
+
type HandleSubmitOptions<T extends Record<string, any> = any> = {
|
|
485
|
+
/** Called after validation passes, before onValidSubmit. */
|
|
486
|
+
onSubmit?: (values: T, e?: any) => void | Promise<void>;
|
|
487
|
+
/** Called after validation passes, following a successful onSubmit. */
|
|
488
|
+
onValidSubmit?: (values: T, e?: any) => void | Promise<void>;
|
|
489
|
+
/**
|
|
490
|
+
* Called when validation fails.
|
|
491
|
+
* @param errors array of {path, type, message} entries in insertion
|
|
492
|
+
* order; path is the dotted field path ('a.b', 'list.0'), type is
|
|
493
|
+
* the error kind ('custom' for plain string errors, 'native' for
|
|
494
|
+
* failed DOM constraint validation), message is the display text
|
|
495
|
+
* @param values current form values
|
|
496
|
+
*/
|
|
497
|
+
onInvalidSubmit?: (errors: FieldErrorEntry[], values: T) => void;
|
|
498
|
+
/**
|
|
499
|
+
* Called after validation passes and the submit callbacks ran, with the
|
|
500
|
+
* final (schema-coerced) values — the slot <Form>'s `action` prop uses
|
|
501
|
+
* to dispatch React 19 server actions with FormData. Runs inside the
|
|
502
|
+
* same isSubmitting window and is awaited like onSubmit/onValidSubmit.
|
|
503
|
+
*
|
|
504
|
+
* The callback may return an {@link ActionErrorResult}: its `errors`
|
|
505
|
+
* record (field path → message or messages) lands on the form through
|
|
506
|
+
* {@link setServerErrors} (`type: 'server'`, cleared existing server
|
|
507
|
+
* errors replaced), and the submit counts as unsuccessful — a rejected
|
|
508
|
+
* server round trip is an invalid submit, exactly like failed client
|
|
509
|
+
* validation. Any other return value (including `undefined`) means the
|
|
510
|
+
* submit succeeded.
|
|
511
|
+
*/
|
|
512
|
+
onAction?: (values: T, e?: any) => void | Promise<void | ActionErrorResult>;
|
|
513
|
+
/**
|
|
514
|
+
* Focus the first error field after a failed submit. Defaults to true —
|
|
515
|
+
* only an explicit `false` disables it. When custom validation fails,
|
|
516
|
+
* a 'focusError' event carrying the first error's path key is emitted
|
|
517
|
+
* on the form (bound fields such as <Field> subscribe and focus their
|
|
518
|
+
* input); when native constraint validation fails, the submitted
|
|
519
|
+
* form's first ':invalid' control is focused directly.
|
|
520
|
+
*/
|
|
521
|
+
shouldFocusError?: boolean;
|
|
522
|
+
/**
|
|
523
|
+
* Whether native constraint validation (the submitted element's
|
|
524
|
+
* checkValidity) gates this attempt. Defaults to the form's
|
|
525
|
+
* {@link Form.shouldUseNativeValidation} flag — pass `false` to skip
|
|
526
|
+
* the native gate for one submit (a save-draft button, say) while
|
|
527
|
+
* custom validators still run; pass `true` to reinstate it on a form
|
|
528
|
+
* that disabled it. Targets without checkValidity never gate.
|
|
529
|
+
*/
|
|
530
|
+
shouldUseNativeValidation?: boolean;
|
|
531
|
+
};
|
|
532
|
+
/** What a server action / onAction callback returns when the server
|
|
533
|
+
* rejected the payload: a field-path → message(s) record, landed on the
|
|
534
|
+
* form as `type: 'server'` errors. Undefined (or anything else) means
|
|
535
|
+
* success. */
|
|
536
|
+
type ActionErrorResult = {
|
|
537
|
+
errors?: Record<string, string | string[]>;
|
|
538
|
+
};
|
|
539
|
+
/**
|
|
540
|
+
* Create an async submit handler for `form` — the headless counterpart of
|
|
541
|
+
* the <Form> component's onSubmit wiring.
|
|
542
|
+
*
|
|
543
|
+
* Behavior mirrors <Form> exactly: preventDefault when present, then the
|
|
544
|
+
* submit state machine (isSubmitting/submitCount/isSubmitSuccessful) runs
|
|
545
|
+
* around native constraint validation (via `e.currentTarget.checkValidity`,
|
|
546
|
+
* skipped when the target has no checkValidity — e.g. React Native or
|
|
547
|
+
* toolbar-button submits) and custom validators. Failed validation fires
|
|
548
|
+
* onInvalidSubmit with the flattened error entries; a passing submit runs
|
|
549
|
+
* onSubmit then onValidSubmit. Errors thrown by either are swallowed into
|
|
550
|
+
* isSubmitSuccessful=false rather than rejecting the returned promise.
|
|
551
|
+
* Failed validation also focuses the offending field (see
|
|
552
|
+
* {@link HandleSubmitOptions.shouldFocusError}).
|
|
553
|
+
*
|
|
554
|
+
* @param form form instance
|
|
555
|
+
* @param options submit callbacks
|
|
556
|
+
* @return async event handler, callable without an event object
|
|
557
|
+
*/
|
|
558
|
+
declare function handleSubmit<T extends Record<string, any> = any>(form: Form$1<T>, options?: HandleSubmitOptions<T>): (e?: {
|
|
559
|
+
preventDefault?: () => void;
|
|
560
|
+
currentTarget?: any;
|
|
561
|
+
}) => Promise<void>;
|
|
562
|
+
|
|
563
|
+
type UseFieldOptions$1<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = {
|
|
564
|
+
form?: Form$1<TValues>;
|
|
565
|
+
name: TPath;
|
|
566
|
+
initialValue?: any;
|
|
567
|
+
shouldUnregister?: boolean;
|
|
568
|
+
/**
|
|
569
|
+
* Field-level validator. The value argument follows the path: with a
|
|
570
|
+
* typed form the callback receives `PathValueOf<TValues, TPath>` (the
|
|
571
|
+
* TanStack-parity inference — `name: 'age'` on a `{age: number}` shape
|
|
572
|
+
* types `value` as `number`), and falls back to `any` for untyped call
|
|
573
|
+
* sites (segment arrays, dynamic names). The return shape mirrors
|
|
574
|
+
* {@link Validator} — an error (string / FieldError / mixed array) or
|
|
575
|
+
* undefined when valid, possibly a Promise for async validation. The
|
|
576
|
+
* second argument carries the validation context (`meta.signal` aborts
|
|
577
|
+
* when the round is superseded).
|
|
578
|
+
*/
|
|
579
|
+
validate?: ((value: PathValueOf<TValues, TPath>, meta: {
|
|
580
|
+
form: Form$1<TValues>;
|
|
581
|
+
path: Path;
|
|
582
|
+
signal: AbortSignal;
|
|
583
|
+
}) => ReturnType<Validator>) | StandardSchemaV1<PathValueOf<TValues, TPath>>;
|
|
584
|
+
/**
|
|
585
|
+
* Declarative rules (required/min/max/minLength/maxLength/pattern),
|
|
586
|
+
* compiled into a synchronous validator. `required` is special: it runs
|
|
587
|
+
* immediately on every kick — never debounced — and while it fails,
|
|
588
|
+
* `validate` is skipped (the expensive check never sees an empty value).
|
|
589
|
+
* The other rules compose with `validate` — rules run first, then
|
|
590
|
+
* `validate` (awaited when async), merging both sources' errors with
|
|
591
|
+
* rules errors ahead. Failures land in the form's error state with the
|
|
592
|
+
* given or default messages.
|
|
593
|
+
*/
|
|
594
|
+
rules?: FieldRules;
|
|
595
|
+
/**
|
|
596
|
+
* Milliseconds to debounce this field's validation kicks. Defaults to 0
|
|
597
|
+
* (validate immediately); while the timer is pending the field counts as
|
|
598
|
+
* validating, so `trigger`/`ensureValidate` wait out the window. Only the
|
|
599
|
+
* last kick inside the window runs the validator. The `required` rule is
|
|
600
|
+
* exempt: it runs synchronously on every kick, so a required failure
|
|
601
|
+
* shows immediately instead of waiting out the window.
|
|
602
|
+
*/
|
|
603
|
+
validateDebounce?: number;
|
|
604
|
+
/**
|
|
605
|
+
* Run this field's debounced validator even when its `required` gate
|
|
606
|
+
* failed — TanStack Form's `asyncAlways`. The gate's errors land
|
|
607
|
+
* immediately (never debounced) and the validator's own result lands
|
|
608
|
+
* alongside them, per-source: a passing async round clears only its
|
|
609
|
+
* own errors while the gate's verdict stays. Falls back to the
|
|
610
|
+
* form-level `createForm({asyncAlways})` flag when omitted, so a field
|
|
611
|
+
* opts out with `asyncAlways: false`. The use case: the cheap format
|
|
612
|
+
* check fails (gate) but the expensive backend check should still run
|
|
613
|
+
* ("not in the right shape — and the backend says taken, too").
|
|
614
|
+
*/
|
|
615
|
+
asyncAlways?: boolean;
|
|
616
|
+
/**
|
|
617
|
+
* Milliseconds to delay showing a newly appearing error in the render
|
|
618
|
+
* layer (`error`/`errorObject`/`errors` stay undefined/empty until the
|
|
619
|
+
* window passes). The form's error state is never delayed — trigger,
|
|
620
|
+
* submit and `getError` read it immediately. An error that clears inside
|
|
621
|
+
* the window never shows; once an error is visible, later changes apply
|
|
622
|
+
* immediately. Only the none → some transition waits.
|
|
623
|
+
*/
|
|
624
|
+
delayError?: number;
|
|
625
|
+
/**
|
|
626
|
+
* Disable this field: merged into the result's `disabled` as
|
|
627
|
+
* `form.disabled || own === true || (own !== false && an ancestor
|
|
628
|
+
* declared disabled)`. `disabled: true` on a parent path disables every
|
|
629
|
+
* descendant field too (react-hook-form subtree semantics), and a
|
|
630
|
+
* descendant declares `disabled: false` to opt back out of that
|
|
631
|
+
* ancestor. The form-level flag (`createForm({disabled})` /
|
|
632
|
+
* `setDisabled`) cannot be opted out of.
|
|
633
|
+
*/
|
|
634
|
+
disabled?: boolean;
|
|
635
|
+
/**
|
|
636
|
+
* Uncontrolled mode: the field never subscribes to its own value, so
|
|
637
|
+
* typing re-renders nothing — the store still carries every write
|
|
638
|
+
* (getValues/submit/validation read it), and errors/touched/disabled/
|
|
639
|
+
* validating still re-render the field like react-hook-form's
|
|
640
|
+
* `register`. The result's `value` is the mount-time snapshot (initial
|
|
641
|
+
* value seed or baseline); it never refreshes, and bulk operations
|
|
642
|
+
* (reset/setInitialValues) sync the DOM element directly through the
|
|
643
|
+
* `focusRef`-held element instead of a render — the register-style
|
|
644
|
+
* contract, RHF's reset clears the input the same way. Attach the
|
|
645
|
+
* result with `<input defaultValue={field.value} ref={field.focusRef}>`
|
|
646
|
+
* -style binding (no `value` prop), exactly like <Field uncontrolled />
|
|
647
|
+
* does. The DOM sync writes the raw stored value (file inputs are
|
|
648
|
+
* skipped); read live values with useValue/getValues.
|
|
649
|
+
*/
|
|
650
|
+
uncontrolled?: boolean;
|
|
651
|
+
/**
|
|
652
|
+
* Field-level validation mode override: when given, this field validates
|
|
653
|
+
* on its own schedule instead of `form.mode` — every other field keeps
|
|
654
|
+
* the form-level timing (e.g. a form that defaults to `'onSubmit'` with
|
|
655
|
+
* one field declared `'onBlur'` shows that field's error on blur while
|
|
656
|
+
* the rest wait for submit). `reValidateMode` stays form-level: once any
|
|
657
|
+
* field has an error (after a failed submit, say), re-validation follows
|
|
658
|
+
* the form's `reValidateMode` for every field, overriding this one too.
|
|
659
|
+
* See {@link ValidationMode}.
|
|
660
|
+
*/
|
|
661
|
+
mode?: ValidationMode;
|
|
662
|
+
/**
|
|
663
|
+
* Field paths whose **user changes re-run this field's validator** —
|
|
664
|
+
* the field-level counterpart of the form-level `validateDeps` option
|
|
665
|
+
* (cross-field linkage: `password` changed → re-check
|
|
666
|
+
* `passwordConfirm`). TanStack Form's `onChangeListenTo` / RHF trigger
|
|
667
|
+
* chains are the ecosystem analogues.
|
|
668
|
+
*
|
|
669
|
+
* The re-run rides the changed field's own onChange pipeline, so typing
|
|
670
|
+
* and `changeValue` both fire it while programmatic `setValue` does
|
|
671
|
+
* not, and its timing is gated by the same mode matrix as the form
|
|
672
|
+
* level: the changed field's effective `mode` (per-field override
|
|
673
|
+
* included) and the form's `reValidateMode` — under the default
|
|
674
|
+
* `'onSubmit'`/`'onChange'` pair, a dep change re-validates this field
|
|
675
|
+
* once this field already shows an error (the submit-then-fix flow: the
|
|
676
|
+
* mismatch lands on submit, editing the password re-checks the confirm
|
|
677
|
+
* and a passing round clears the error, because a field validator owns
|
|
678
|
+
* its whole key).
|
|
679
|
+
*
|
|
680
|
+
* `validateDebounce` applies to the re-run like to any kick. Declaring
|
|
681
|
+
* the field's own path is a no-op (its own change already validates it).
|
|
682
|
+
*/
|
|
683
|
+
validateDeps?: FieldPath<TValues>[];
|
|
684
|
+
/**
|
|
685
|
+
* Validate this field once on mount instead of waiting for the first
|
|
686
|
+
* submit/change — errors show immediately for an untouched field.
|
|
687
|
+
* Overrides the form-level `createForm({validateOnMount})` flag in
|
|
688
|
+
* either direction (`false` opts a field out of a validating form).
|
|
689
|
+
* While an async `initialValues` source is still pending the kick waits
|
|
690
|
+
* for the resolved baseline; a field unmounted in between never kicks.
|
|
691
|
+
*/
|
|
692
|
+
validateOnMount?: boolean;
|
|
693
|
+
/**
|
|
694
|
+
* DOM event → value extractor for the result's {@link
|
|
695
|
+
* UseFieldResult.inputProps} binding. Defaults to the element's own
|
|
696
|
+
* protocol (files → `target.files`, checkbox → `target.checked`,
|
|
697
|
+
* `valueAsNumber`/`valueAsDate` under their flags, else
|
|
698
|
+
* `target.value`); a non-DOM event passes through unchanged, so custom
|
|
699
|
+
* controls can hand raw values. Only consumed by `inputProps` — the
|
|
700
|
+
* headless `onChange` keeps taking raw values.
|
|
701
|
+
*/
|
|
702
|
+
eventToValue?: (e: any) => any;
|
|
703
|
+
/** `inputProps` stores `e.target.valueAsNumber` instead of the string
|
|
704
|
+
* value (number inputs, RHF's `register({valueAsNumber})`). An
|
|
705
|
+
* explicit `eventToValue` takes precedence. */
|
|
706
|
+
valueAsNumber?: boolean;
|
|
707
|
+
/** `inputProps` stores `e.target.valueAsDate` instead of the string
|
|
708
|
+
* value (date/time inputs, RHF's `register({valueAsDate})`). An
|
|
709
|
+
* explicit `eventToValue` takes precedence; combining with
|
|
710
|
+
* `valueAsNumber` is a TypeError (`valueAsNumber` wins). */
|
|
711
|
+
valueAsDate?: boolean;
|
|
712
|
+
/**
|
|
713
|
+
* Element type hint for {@link UseFieldResult.inputProps} only:
|
|
714
|
+
* `'checkbox'` renders `checked` instead of `value`, `'file'` renders
|
|
715
|
+
* neither (file inputs cannot be value-controlled). The extraction
|
|
716
|
+
* itself already auto-detects both types from the event's target.
|
|
717
|
+
*/
|
|
718
|
+
type?: string;
|
|
719
|
+
};
|
|
720
|
+
/**
|
|
721
|
+
* The result of {@link useField}. Deliberately a closed shape: no index
|
|
722
|
+
* signature, so a typo'd property access (`field.vlaue`) is a type error
|
|
723
|
+
* instead of silently reading `undefined`.
|
|
724
|
+
*/
|
|
725
|
+
type UseFieldResult<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = {
|
|
726
|
+
/** The form instance this field is bound to (explicit prop or context) —
|
|
727
|
+
* handy for consumers that need direct access to the headless API. */
|
|
728
|
+
form: Form$1<TValues>;
|
|
729
|
+
value: PathValueOf<TValues, TPath>;
|
|
730
|
+
/** Error message string (FieldError#message) for display, or undefined */
|
|
731
|
+
error: string | undefined;
|
|
732
|
+
/** Full FieldError object ({type, message}), or undefined */
|
|
733
|
+
errorObject: FieldError | undefined;
|
|
734
|
+
/** Every error registered for the field, in insertion order — `error`
|
|
735
|
+
* and `errorObject` are its first entry. Empty (and reference-stable)
|
|
736
|
+
* when the field has no errors. */
|
|
737
|
+
errors: FieldError[];
|
|
738
|
+
/**
|
|
739
|
+
* Whether the field is dirty: its live value exists and differs from
|
|
740
|
+
* the field's effective baseline (the same per-field rule
|
|
741
|
+
* `getFieldState(form, name).isDirty` applies — committed
|
|
742
|
+
* `shouldDirty: false` baselines included). Live in controlled mode;
|
|
743
|
+
* pinned at mount in uncontrolled mode (like `value`) so typing never
|
|
744
|
+
* re-renders the field — {@link useIsFieldDirty} is the live scoped
|
|
745
|
+
* channel for either mode.
|
|
746
|
+
*/
|
|
747
|
+
isDirty: boolean;
|
|
748
|
+
/**
|
|
749
|
+
* Whether a validator round for this field is currently in flight —
|
|
750
|
+
* a pending debounce window or an unresolved async validator (the
|
|
751
|
+
* `getFieldState(form, name).isValidating` reading, made reactive).
|
|
752
|
+
*/
|
|
753
|
+
validating: boolean;
|
|
754
|
+
onChange: (v: any) => void;
|
|
755
|
+
onBlur: () => void;
|
|
756
|
+
name: string;
|
|
757
|
+
/** Merged disabled flag: the form-level flag (`createForm({disabled})`
|
|
758
|
+
* toggled by `setDisabled`) OR-ed with this field's own `disabled`
|
|
759
|
+
* option, updated live through the form's event core. */
|
|
760
|
+
disabled: boolean;
|
|
761
|
+
/**
|
|
762
|
+
* Callback ref carrying the focus channel: attach it to your input
|
|
763
|
+
* element (`<input ref={field.focusRef} />`) so `setFocus` and a failed
|
|
764
|
+
* submit's first-error auto-focus (`shouldFocusError`) can focus this
|
|
765
|
+
* headless field — the same 'focusError' wiring `<Field>` performs for
|
|
766
|
+
* its own input. Without it, focus requests aimed at this field are
|
|
767
|
+
* silent no-ops, matching `setFocus`'s contract: focusing a field
|
|
768
|
+
* whose element is not bound neither throws nor focuses anything.
|
|
769
|
+
*/
|
|
770
|
+
focusRef: (el: any) => void;
|
|
771
|
+
/**
|
|
772
|
+
* DOM-ready props for an `<input>`: `<input {...field.inputProps} />`
|
|
773
|
+
* binds the element to the field without hand-wiring value/onChange/
|
|
774
|
+
* onBlur/ref/a11y. `onChange` takes the DOM event (extraction per
|
|
775
|
+
* {@link UseFieldOptions}' `eventToValue`/`valueAsNumber`/`valueAsDate`
|
|
776
|
+
* /`type`), `ref` is the focus channel, `aria-invalid`/`aria-describedby`
|
|
777
|
+
* complete the {@link errorIdFromKey} chain — render the error element
|
|
778
|
+
* with `fieldErrorId(name)` to finish it. The headless `value`/
|
|
779
|
+
* `onChange`/`onBlur`/`focusRef` stay available for custom controls
|
|
780
|
+
* that hand raw values (design systems) — `inputProps` is the DOM
|
|
781
|
+
* boundary adapter, never a replacement.
|
|
782
|
+
*/
|
|
783
|
+
inputProps: UseFieldInputProps;
|
|
784
|
+
};
|
|
785
|
+
/**
|
|
786
|
+
* The spreadable DOM props {@link UseFieldResult.inputProps} carries:
|
|
787
|
+
* `name`, `onChange` (event-based), `onBlur`, `ref`, `disabled`, the
|
|
788
|
+
* error a11y wiring, and exactly one of `value` (controlled),
|
|
789
|
+
* `defaultValue` (uncontrolled) or `checked` (`type: 'checkbox'`) —
|
|
790
|
+
* `type: 'file'` carries none. Always spread `inputProps` FIRST, so the
|
|
791
|
+
* caller's own props (placeholder, className, an explicit `ref` they
|
|
792
|
+
* merge themselves) win.
|
|
793
|
+
*/
|
|
794
|
+
type UseFieldInputProps = {
|
|
795
|
+
name: string;
|
|
796
|
+
value?: any;
|
|
797
|
+
defaultValue?: any;
|
|
798
|
+
checked?: boolean;
|
|
799
|
+
onChange: (e: any) => void;
|
|
800
|
+
onBlur: () => void;
|
|
801
|
+
ref: (el: any) => void;
|
|
802
|
+
disabled: boolean;
|
|
803
|
+
'aria-invalid'?: boolean;
|
|
804
|
+
'aria-describedby'?: string;
|
|
805
|
+
};
|
|
806
|
+
declare function useField<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments>(options: UseFieldOptions$1<TValues, TPath>): UseFieldResult<TValues, TPath>;
|
|
807
|
+
|
|
808
|
+
type FieldArrayItem<K extends string> = {
|
|
809
|
+
id: string;
|
|
810
|
+
index: number;
|
|
811
|
+
} & Record<K, string>;
|
|
812
|
+
/** Options accepted by {@link useFieldArray} and the per-instance hook
|
|
813
|
+
* returned by `createFormContext()`. */
|
|
814
|
+
type UseFieldArrayOptions<K extends string = 'id'> = {
|
|
815
|
+
name: Name;
|
|
816
|
+
form?: Form$1;
|
|
817
|
+
/**
|
|
818
|
+
* Property name the stable row key is exposed under on each `fields`
|
|
819
|
+
* entry (react-hook-form's `keyName`): defaults to `'id'`, a custom
|
|
820
|
+
* name (e.g. `'key'`) avoids clashing with a row data field of the
|
|
821
|
+
* same name. The underlying id is unchanged.
|
|
822
|
+
*/
|
|
823
|
+
keyName?: K;
|
|
824
|
+
/**
|
|
825
|
+
* Declarative rules validated against the whole array value
|
|
826
|
+
* (react-hook-form's `useFieldArray` `rules`): `required` fails on an
|
|
827
|
+
* empty array, `minLength`/`maxLength` read the array's length. Checked
|
|
828
|
+
* on submit and `trigger`, like every registered validator.
|
|
829
|
+
*/
|
|
830
|
+
rules?: FieldRules;
|
|
831
|
+
/**
|
|
832
|
+
* Whether unmounting this array removes its branch. Defaults to the
|
|
833
|
+
* form-level `shouldUnregister` — tombstone (drop values) like a bound
|
|
834
|
+
* field's unmount; pass `false` to keep the values.
|
|
835
|
+
*/
|
|
836
|
+
shouldUnregister?: boolean;
|
|
837
|
+
};
|
|
838
|
+
type UseFieldArrayResult<TItem = any, K extends string = 'id'> = {
|
|
839
|
+
fields: FieldArrayItem<K>[];
|
|
840
|
+
/** Append one row. With the item type declared —
|
|
841
|
+
* `useFieldArray<Item>({name: 'items'})` — the value is checked
|
|
842
|
+
* against the array's element type. */
|
|
843
|
+
append: (value: TItem) => void;
|
|
844
|
+
prepend: (value: TItem) => void;
|
|
845
|
+
insert: (index: number, value: TItem) => void;
|
|
846
|
+
/** Remove one row, or several in a single write (`remove([0, 2])` —
|
|
847
|
+
* order-insensitive, duplicates ignored, out-of-range indices are
|
|
848
|
+
* silent no-ops). */
|
|
849
|
+
remove: (indices: number | number[]) => void;
|
|
850
|
+
swap: (from: number, to: number) => void;
|
|
851
|
+
move: (from: number, to: number) => void;
|
|
852
|
+
replace: (values: TItem[]) => void;
|
|
853
|
+
update: (index: number, value: TItem) => void;
|
|
854
|
+
};
|
|
855
|
+
declare function useFieldArray<TItem = any, K extends string = 'id'>(options: UseFieldArrayOptions<K>): UseFieldArrayResult<TItem, K>;
|
|
856
|
+
/**
|
|
857
|
+
* The result of {@link useFieldArrayItem}. Mirrors the {@link useField}
|
|
858
|
+
* return shape (`value`/`errors`/`error`) plus the row's `index` and
|
|
859
|
+
* `name` (path key) so nested fields can build on it —
|
|
860
|
+
* `useField({name: ['tags', item.index, 'label']})`.
|
|
861
|
+
*/
|
|
862
|
+
type UseFieldArrayItemResult<TValue = any> = {
|
|
863
|
+
value: TValue;
|
|
864
|
+
/** Overwrite this row's value in place (same array-layer write as
|
|
865
|
+
* `update(index, value)`: the row's id and position are kept). */
|
|
866
|
+
setValue: (value: TValue) => void;
|
|
867
|
+
/** Every error registered for the row's path, insertion order; the
|
|
868
|
+
* shared empty constant while clean, so consumers can memo on it. */
|
|
869
|
+
errors: FieldError[];
|
|
870
|
+
/** First error's message — the display text — or undefined. */
|
|
871
|
+
error: string | undefined;
|
|
872
|
+
/** The row's current path key (JSON-stringified segments, e.g.
|
|
873
|
+
* `["tags",0]`); moves with the row across reorder/remove. */
|
|
874
|
+
name: string;
|
|
875
|
+
/** The row's current position in the array. `-1` while the row is being
|
|
876
|
+
* removed (or when no useFieldArray is mounted at `name`): reads return
|
|
877
|
+
* undefined and nothing writes the dangling path. */
|
|
878
|
+
index: number;
|
|
879
|
+
form: Form$1;
|
|
880
|
+
};
|
|
881
|
+
/**
|
|
882
|
+
* Subscribe to a single row of a {@link useFieldArray} field — the
|
|
883
|
+
* per-item counterpart `useFieldArray` alone cannot offer. `useFieldArray`
|
|
884
|
+
* subscribes to the whole branch, so any row's edit re-renders the
|
|
885
|
+
* component holding the array (and, without memoization, every row);
|
|
886
|
+
* `useFieldArrayItem` scopes what re-renders to one row identified by its
|
|
887
|
+
* stable id: editing row K re-renders only row K's component, and a
|
|
888
|
+
* whole-array rewrite re-renders only rows whose value reference actually
|
|
889
|
+
* changed. Pair it with a `React.memo` row component that takes stable
|
|
890
|
+
* props (`form`, `id`) so the array component's own re-render cannot drag
|
|
891
|
+
* the rows along.
|
|
892
|
+
*
|
|
893
|
+
* Rows whose index migrates — remove/move/swap/insert reshuffles —
|
|
894
|
+
* re-render by design: the row's path contains the index, exactly like
|
|
895
|
+
* TanStack Form's per-field api. The win is single-row edits staying
|
|
896
|
+
* single-row.
|
|
897
|
+
*
|
|
898
|
+
* Value reads and writes live on the array layer — the same layer every
|
|
899
|
+
* `useFieldArray` operation touches — so `value`, `setValue` and
|
|
900
|
+
* `update`/`append`/… always agree with each other.
|
|
901
|
+
*
|
|
902
|
+
* @param options `name` of the array (a useFieldArray must be mounted at
|
|
903
|
+
* the same path — it publishes the id table), the row's `id` from
|
|
904
|
+
* `fields[i].id`, and optionally an explicit `form`
|
|
905
|
+
*/
|
|
906
|
+
declare function useFieldArrayItem<TValue = any>(options: {
|
|
907
|
+
name: Name;
|
|
908
|
+
id: string;
|
|
909
|
+
form?: Form$1;
|
|
910
|
+
}): UseFieldArrayItemResult<TValue>;
|
|
911
|
+
|
|
912
|
+
declare const FormContext: Context<Form$1<any> | null>;
|
|
913
|
+
declare const FormProvider: Provider<Form$1<any> | null>;
|
|
914
|
+
/**
|
|
915
|
+
* Read the form from the module-level {@link FormContext}. Pass the values
|
|
916
|
+
* shape — `useFormContext<Values>()` — to get a fully typed `Form<Values>`
|
|
917
|
+
* headless API; the `any` default keeps untyped call sites compiling.
|
|
918
|
+
*
|
|
919
|
+
* For multiple forms in one subtree use {@link createFormContext} instead.
|
|
920
|
+
*
|
|
921
|
+
* @throws when no `<FormProvider>` is mounted above the call site.
|
|
922
|
+
*/
|
|
923
|
+
declare function useFormContext<T extends Record<string, any> = any>(): Form$1<T>;
|
|
924
|
+
/** The bundle {@link createFormContext} returns: a private React context
|
|
925
|
+
* plus the hooks pre-bound to it, all typed against `TValues`. */
|
|
926
|
+
type FormContextBundle<TValues extends Record<string, any> = any> = {
|
|
927
|
+
/** The raw React context, for `<Form context={...}>`: the component
|
|
928
|
+
* keeps its submit machinery while providing into this instance's
|
|
929
|
+
* private context. */
|
|
930
|
+
context: Context<Form$1<TValues> | null>;
|
|
931
|
+
FormProvider: (props: {
|
|
932
|
+
form: Form$1<TValues>;
|
|
933
|
+
children: ReactNode;
|
|
934
|
+
}) => ReactNode;
|
|
935
|
+
useFormContext: () => Form$1<TValues>;
|
|
936
|
+
useField: <TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments>(options: {
|
|
937
|
+
name: TPath;
|
|
938
|
+
} & Omit<UseFieldOptions$1<TValues, TPath>, 'form'>) => UseFieldResult<TValues, TPath>;
|
|
939
|
+
useFieldArray: <TItem = any, K extends string = 'id'>(options: {
|
|
940
|
+
name: FieldPath<TValues> | Name;
|
|
941
|
+
keyName?: K;
|
|
942
|
+
rules?: FieldRules;
|
|
943
|
+
shouldUnregister?: boolean;
|
|
944
|
+
}) => UseFieldArrayResult<TItem, K>;
|
|
945
|
+
useFieldArrayItem: <TValue = any>(options: {
|
|
946
|
+
name: FieldPath<TValues> | Name;
|
|
947
|
+
id: string;
|
|
948
|
+
}) => UseFieldArrayItemResult<TValue>;
|
|
949
|
+
};
|
|
950
|
+
/**
|
|
951
|
+
* Create an isolated bundle of form-context bindings: its own React context
|
|
952
|
+
* plus `useField` / `useFieldArray` / `useFieldArrayItem` /
|
|
953
|
+
* `useFormContext` hooks that resolve their form from it.
|
|
954
|
+
*
|
|
955
|
+
* Why: the module-level {@link FormContext} works fine for a single form per
|
|
956
|
+
* subtree, but nesting two forms (or reusing a component inside a different
|
|
957
|
+
* form) makes them fight over one context. Calling this factory once per app
|
|
958
|
+
* area — `const Ctx = createFormContext<Values>()` — fixes the value shape
|
|
959
|
+
* (`Ctx.useField({name: 'user.name'})` gets its `name` constrained by
|
|
960
|
+
* `FieldPath<Values>` and its `value` typed accordingly), so call sites stop
|
|
961
|
+
* hand-writing generics, and each instance's Provider scopes a strictly
|
|
962
|
+
* separate form. The bundle also carries its raw React context
|
|
963
|
+
* (`Ctx.context`) so `<Form context={Ctx.context}>` can provide into it.
|
|
964
|
+
*/
|
|
965
|
+
declare function createFormContext<TValues extends Record<string, any> = any>(): FormContextBundle<TValues>;
|
|
966
|
+
declare const CheckboxGroupContext: Context<any>;
|
|
967
|
+
declare const CheckboxGroupProvider: Provider<any>;
|
|
968
|
+
declare function useCheckboxGroupContext(): any;
|
|
969
|
+
|
|
970
|
+
/** Subscription granularity for {@link onPathEvent}.
|
|
971
|
+
* - `'leaf'`: the subscriber reads exactly one key ({@link
|
|
972
|
+
* useValueByPath}); only writes at that key or above it can change what
|
|
973
|
+
* it reads.
|
|
974
|
+
* - `'branch'`: the subscriber aggregates a whole subtree below a key
|
|
975
|
+
* ({@link useFieldArray}); descendant writes matter too. */
|
|
976
|
+
type WatchScope = 'leaf' | 'branch';
|
|
977
|
+
/** Events {@link subscribe} can watch. `'errors'` and `'touched'` are
|
|
978
|
+
* stored per exact key, so they match exact keys ({@link onKeyEvent});
|
|
979
|
+
* `'change'`, `'validating'`, `'submitting'`, `'submitCount'`,
|
|
980
|
+
* `'disabled'`, `'status'` and `'submitSuccessful'` go through
|
|
981
|
+
* {@link onPathEvent}. `'validating'` carries paths (one per async
|
|
982
|
+
* validator round) and matches by path exactly like `'change'`;
|
|
983
|
+
* `'submitting'`, `'submitCount'`, `'disabled'`, `'status'` and
|
|
984
|
+
* `'submitSuccessful'` are payload-less broadcasts, so `name` never
|
|
985
|
+
* narrows them — every subscriber hears every emission. */
|
|
986
|
+
type SubscribeEvent = 'change' | 'errors' | 'touched' | 'validating' | 'submitting' | 'submitCount' | 'submitSuccessful' | 'disabled' | 'status' | 'loading';
|
|
987
|
+
/** Options accepted by {@link subscribe}. */
|
|
988
|
+
type SubscribeOptions = {
|
|
989
|
+
/** Path (or list of paths) to watch. Omit to receive every emission of
|
|
990
|
+
* `event`, payload-less broadcasts included. A single segments path
|
|
991
|
+
* (`['tags', 0]`) and a list of names (`['tags', 'user.name']`) are told
|
|
992
|
+
* apart by the same rule `trigger` uses: only a segments path can hold
|
|
993
|
+
* a number. */
|
|
994
|
+
name?: Name | Name[];
|
|
995
|
+
/** Event to watch. Defaults to `'change'`. */
|
|
996
|
+
event?: SubscribeEvent;
|
|
997
|
+
/** Which writes around `name` are relevant — `'leaf'` or `'branch'`.
|
|
998
|
+
* Only meaningful for the path-carrying events `'change'` and
|
|
999
|
+
* `'validating'`: `'errors'`/`'touched'` match exact keys and
|
|
1000
|
+
* `'submitting'`/`'submitCount'`/`'disabled'`/`'status'`/
|
|
1001
|
+
* `'submitSuccessful'` are payload-less. Defaults to `'branch'` — the
|
|
1002
|
+
* intuitive linkage semantics, where subscribing to `'tags'` means the
|
|
1003
|
+
* whole branch. */
|
|
1004
|
+
scope?: WatchScope;
|
|
1005
|
+
/** Invoked with no arguments after each matching emission. Read fresh
|
|
1006
|
+
* state through the `get*` readers inside it. */
|
|
1007
|
+
callback: () => void;
|
|
1008
|
+
};
|
|
1009
|
+
/**
|
|
1010
|
+
* Subscribe to form events imperatively — the non-render counterpart of
|
|
1011
|
+
* the `use*` hooks: linkages and side effects (province changed → clear
|
|
1012
|
+
* city, autosave, analytics) run without mounting a watching component.
|
|
1013
|
+
*
|
|
1014
|
+
* Without `name`, `callback` fires on every `event` emission, payload-less
|
|
1015
|
+
* broadcasts (reset, setInitialValues) included. With `name`, matching
|
|
1016
|
+
* follows the event's shape: `'errors'`/`'touched'` match the exact key
|
|
1017
|
+
* ({@link onKeyEvent}) — another field's error never wakes this
|
|
1018
|
+
* subscriber — while `'change'`/`'validating'`/`'submitting'`/
|
|
1019
|
+
* `'submitCount'`/`'disabled'`/`'submitSuccessful'` go through
|
|
1020
|
+
* {@link onPathEvent}, so the default `'branch'` scope wakes a `'tags'`
|
|
1021
|
+
* subscriber when any `tags.*` descendant is written. `'validating'`
|
|
1022
|
+
* carries a path per validator round and narrows by path like
|
|
1023
|
+
* `'change'`; `'disabled'`/`'submitSuccessful'` (like `'submitting'`)
|
|
1024
|
+
* are payload-less broadcasts that every named subscriber receives. A
|
|
1025
|
+
* `name` array builds one subscription per path and the returned
|
|
1026
|
+
* function unsubscribes them all.
|
|
1027
|
+
*
|
|
1028
|
+
* @param form the form to watch
|
|
1029
|
+
* @param options event, name(s), scope and callback
|
|
1030
|
+
* @return unsubscribe function
|
|
1031
|
+
*/
|
|
1032
|
+
declare function subscribe(form: Form$1, options: SubscribeOptions): () => void;
|
|
1033
|
+
/** The handle {@link watch} returns: a subscribe/getSnapshot pair any
|
|
1034
|
+
* reactive runtime can bind to — React's `useSyncExternalStore(subscribe,
|
|
1035
|
+
* getSnapshot)`, a Solid signal, a Vue ref, a Svelte store. The handle
|
|
1036
|
+
* keeps one internal listener alive from creation, so `getSnapshot()` is
|
|
1037
|
+
* always fresh (a read never returns a pre-write value even with no
|
|
1038
|
+
* consumer subscribed); `subscribe` adds a consumer callback and returns
|
|
1039
|
+
* its own unsubscribe. Call {@link WatchHandle.dispose} when the handle's
|
|
1040
|
+
* lifetime ends (adapter teardown, effect cleanup). */
|
|
1041
|
+
type WatchHandle<T> = {
|
|
1042
|
+
/** Read the current snapshot. Recomputed on every heard event (and on
|
|
1043
|
+
* first read), cached in between — repeated reads share one reference
|
|
1044
|
+
* until the watched state actually changes. */
|
|
1045
|
+
getSnapshot: () => T;
|
|
1046
|
+
/** Register a change listener; returns the unsubscribe function. The
|
|
1047
|
+
* listener fires only when the projection observably changed: with an
|
|
1048
|
+
* `isEqual` comparator the getter is re-run per event and an equal
|
|
1049
|
+
* verdict skips the callback entirely (TanStack's `useSelector`
|
|
1050
|
+
* contract); without one, every heard event wakes the listener. */
|
|
1051
|
+
subscribe: (invalidate: () => void) => () => void;
|
|
1052
|
+
/** Remove the internal listener and every consumer callback. The handle
|
|
1053
|
+
* is dead afterwards — reads return the last cached value and no
|
|
1054
|
+
* callback ever fires again. */
|
|
1055
|
+
dispose: () => void;
|
|
1056
|
+
};
|
|
1057
|
+
/**
|
|
1058
|
+
* Watch a projection of form state without React — the framework-free
|
|
1059
|
+
* counterpart of {@link useWatch} (same signature, same `isEqual`
|
|
1060
|
+
* bailout), exported as a named top-level function so it is tree-shaken
|
|
1061
|
+
* when unused. Headless adapters (Solid/Vue/Svelte bridges, imperative
|
|
1062
|
+
* autosave/analytics code) consume the returned
|
|
1063
|
+
* {@link WatchHandle}: read the current snapshot through `getSnapshot()`
|
|
1064
|
+
* and re-read (or re-render) whenever `subscribe`'s listener fires.
|
|
1065
|
+
*
|
|
1066
|
+
* The handle subscribes eagerly at creation, so `getSnapshot()` never
|
|
1067
|
+
* returns a stale value — including reads with no consumer subscribed.
|
|
1068
|
+
* `getter` and `isEqual` are captured when `watch` is called: call it at
|
|
1069
|
+
* setup time, like a subscription, and {@link WatchHandle.dispose} it at
|
|
1070
|
+
* teardown. Every emission of `event` wakes the listener (payload-less
|
|
1071
|
+
* broadcasts included) — the wide surface `useWatch` uses; path-scoped
|
|
1072
|
+
* variants are the `useValue`-family hooks on the React side and
|
|
1073
|
+
* {@link subscribe} with a `name` on this side.
|
|
1074
|
+
*
|
|
1075
|
+
* ```js
|
|
1076
|
+
* const handle = watch(form, 'change', () => getValue(form, 'email'));
|
|
1077
|
+
* // imperative consumer:
|
|
1078
|
+
* const off = handle.subscribe(() => save(handle.getSnapshot()));
|
|
1079
|
+
* // React adapter (useWatch is this composition):
|
|
1080
|
+
* useSyncExternalStore(handle.subscribe, handle.getSnapshot, handle.getSnapshot);
|
|
1081
|
+
* handle.dispose(); // teardown
|
|
1082
|
+
* ```
|
|
1083
|
+
*
|
|
1084
|
+
* @param form the form to watch
|
|
1085
|
+
* @param event the event whose emissions invalidate the snapshot
|
|
1086
|
+
* @param getter the projection — read fresh state through the `get*`
|
|
1087
|
+
* readers inside it
|
|
1088
|
+
* @param isEqual optional equality check; an equal verdict after an event
|
|
1089
|
+
* skips the listeners entirely (wide getters returning fresh
|
|
1090
|
+
* references per call stop churning subscribers)
|
|
1091
|
+
*/
|
|
1092
|
+
declare function watch<T>(form: Form$1, event: SubscribeEvent, getter: () => T, isEqual?: (prev: T, next: T) => boolean): WatchHandle<T>;
|
|
1093
|
+
|
|
1094
|
+
/**
|
|
1095
|
+
* Create a form instance bound to this component.
|
|
1096
|
+
*
|
|
1097
|
+
* Beyond {@link Options}, the optional `values` object enables controlled
|
|
1098
|
+
* usage: when it genuinely changes it is re-synced into the form with
|
|
1099
|
+
* setInitialValues semantics -- uncommitted user edits are discarded
|
|
1100
|
+
* (master-detail semantics: selecting another record replaces the draft),
|
|
1101
|
+
* while touched flags and errors survive. Change detection is
|
|
1102
|
+
* reference-first with a structural fallback, so re-renders that pass an
|
|
1103
|
+
* inline literal with equal content never re-sync -- the user's
|
|
1104
|
+
* in-progress typing is never clobbered.
|
|
1105
|
+
*/
|
|
1106
|
+
declare function useForm<T extends Record<string, any> = any>(options?: Options<T> & {
|
|
1107
|
+
values?: T;
|
|
1108
|
+
}): Form$1<T>;
|
|
1109
|
+
/**
|
|
1110
|
+
* Shared core of {@link useWatch} and the path-scoped hooks: a
|
|
1111
|
+
* useSyncExternalStore binding over a custom event subscription.
|
|
1112
|
+
* `subscribeFactory` receives the invalidate callback (drop the snapshot
|
|
1113
|
+
* cache, then notify React) and returns its unsubscribe function, so the
|
|
1114
|
+
* core stays identical whether the subscription is global or scoped to
|
|
1115
|
+
* one path.
|
|
1116
|
+
*
|
|
1117
|
+
* The optional `isEqual` comparator redirects `invalidate`: instead of
|
|
1118
|
+
* dropping the cache and waking React unconditionally, an event first
|
|
1119
|
+
* recomputes the getter and asks `isEqual` whether anything observable
|
|
1120
|
+
* changed — an equal verdict keeps the cached snapshot and skips the
|
|
1121
|
+
* notify entirely (no render at all), an unequal one stores the fresh
|
|
1122
|
+
* snapshot and notifies. Omitted, the historical drop-and-notify pipeline
|
|
1123
|
+
* runs byte-for-byte unchanged.
|
|
1124
|
+
*/
|
|
1125
|
+
declare function useWatchCore<T>(subscribeFactory: (invalidate: () => void) => () => void, getter: () => T, isEqual?: (prev: T, next: T) => boolean): T;
|
|
1126
|
+
/**
|
|
1127
|
+
* Subscribe to a form event and keep the component's snapshot of `getter()`
|
|
1128
|
+
* in sync with the form state.
|
|
1129
|
+
*
|
|
1130
|
+
* Built on useSyncExternalStore, so snapshots taken while React renders are
|
|
1131
|
+
* guaranteed consistent (no tearing under concurrent rendering) and changes
|
|
1132
|
+
* emitted before the subscription effect runs are still picked up.
|
|
1133
|
+
*
|
|
1134
|
+
* The first argument is the form for the unified `fn(form, ...)` context
|
|
1135
|
+
* shape every hook shares; the raw emitter form remains accepted for
|
|
1136
|
+
* back-compat and for subscription sources that are not a full form.
|
|
1137
|
+
*
|
|
1138
|
+
* Framework-free counterpart: {@link watch} — the same event/getter/
|
|
1139
|
+
* `isEqual` contract exposed as a named export returning a
|
|
1140
|
+
* subscribe/getSnapshot handle any reactive runtime can bind to
|
|
1141
|
+
* (useWatch is its React binding; the ref-based cache here keeps inline
|
|
1142
|
+
* getters from re-subscribing per render).
|
|
1143
|
+
*
|
|
1144
|
+
* By default the re-render surface is the event's own scope: every emit
|
|
1145
|
+
* the subscription hears drops the snapshot cache and wakes React, which
|
|
1146
|
+
* then bails out when the recomputed snapshot is reference-identical
|
|
1147
|
+
* (Object.is) — the path/leaf scoping every built-in reader relies on.
|
|
1148
|
+
* The optional `isEqual` comparator exists for wide-scope getters that
|
|
1149
|
+
* return a fresh reference per call (a whole-values selector, say): each
|
|
1150
|
+
* event recomputes the getter and asks `isEqual` whether the result is
|
|
1151
|
+
* observably the same, and an equal verdict skips notifying React
|
|
1152
|
+
* altogether — no render, not even a bailed-out one. An unequal verdict
|
|
1153
|
+
* stores the new snapshot and re-renders. Same contract as TanStack's
|
|
1154
|
+
* `useSelector` compare. Omitted, behavior is unchanged.
|
|
1155
|
+
*/
|
|
1156
|
+
declare function useWatch<T>(formOrEmitter: Form$1 | EventEmitter<FormEvents>, event: SubscribeEvent, getter: () => T, isEqual?: (prev: T, next: T) => boolean): T;
|
|
1157
|
+
/** Options for {@link useValue} and {@link useValueByPath}. */
|
|
1158
|
+
type UseValueOptions<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments> = {
|
|
1159
|
+
/** Value to return while the field reads undefined — react-hook-form's
|
|
1160
|
+
* `useWatch` `defaultValue`: an untouched, never-seeded field reads
|
|
1161
|
+
* this instead of `undefined`. */
|
|
1162
|
+
defaultValue?: PathValueOf<T, P>;
|
|
1163
|
+
/** Watch descendants too (react-hook-form's `exact: false`): a write
|
|
1164
|
+
* to `a.b` invalidates a `useValue(form, 'a')` read, and the read
|
|
1165
|
+
* resolves the merged subtree (the copy-on-write `getValues` tree) so
|
|
1166
|
+
* descendant edits show up in the result. Defaults to true — the leaf
|
|
1167
|
+
* scope, where only the exact key and its ancestors invalidate (the
|
|
1168
|
+
* long-standing behavior). */
|
|
1169
|
+
exact?: boolean;
|
|
1170
|
+
};
|
|
1171
|
+
/**
|
|
1172
|
+
* Get field value state
|
|
1173
|
+
*/
|
|
1174
|
+
declare function useValue<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P, options?: UseValueOptions<T, P>): PathValueOf<T, P>;
|
|
1175
|
+
/**
|
|
1176
|
+
* Get field value state by path
|
|
1177
|
+
*/
|
|
1178
|
+
declare function useValueByPath(form: Form$1, path: Path, options?: {
|
|
1179
|
+
defaultValue?: any;
|
|
1180
|
+
exact?: boolean;
|
|
1181
|
+
}): any;
|
|
1182
|
+
/**
|
|
1183
|
+
* Subscribe to the whole values tree: re-renders the calling component
|
|
1184
|
+
* whenever any 'change' event lands — react-hook-form's `watch()` with no
|
|
1185
|
+
* arguments. The snapshot is the memoized `getValues(form)` result, so
|
|
1186
|
+
* repeated reads during one render share one reference and, under
|
|
1187
|
+
* `__DEV__`, one frozen copy.
|
|
1188
|
+
*
|
|
1189
|
+
* Broad scope by design: read it in components that must stay cheap and
|
|
1190
|
+
* need the full tree; per-field readers should reach for {@link useValue}
|
|
1191
|
+
* instead so a keystroke re-renders exactly the affected field.
|
|
1192
|
+
*/
|
|
1193
|
+
declare function useValues<T extends Record<string, any> = any>(form: Form$1<T>): T;
|
|
1194
|
+
/**
|
|
1195
|
+
* Get field touched state
|
|
1196
|
+
*/
|
|
1197
|
+
declare function useTouched<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): boolean;
|
|
1198
|
+
/**
|
|
1199
|
+
* Get field touched state by path
|
|
1200
|
+
*/
|
|
1201
|
+
declare function useTouchedByPath(form: Form$1, path: Path): boolean;
|
|
1202
|
+
/**
|
|
1203
|
+
* Get field error message state
|
|
1204
|
+
* @return current error's message string (display text), or undefined
|
|
1205
|
+
*/
|
|
1206
|
+
declare function useError<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): string | undefined;
|
|
1207
|
+
/**
|
|
1208
|
+
* Get field error state by path
|
|
1209
|
+
* @return current FieldError object ({type, message}), or undefined
|
|
1210
|
+
*/
|
|
1211
|
+
declare function useErrorByPath(form: Form$1, path: Path): FieldError | undefined;
|
|
1212
|
+
/**
|
|
1213
|
+
* Get all field errors
|
|
1214
|
+
* @return every error registered for the field (insertion order); an empty
|
|
1215
|
+
* array when the field has none
|
|
1216
|
+
*/
|
|
1217
|
+
declare function useFieldErrors<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): FieldError[];
|
|
1218
|
+
/**
|
|
1219
|
+
* Get all field errors by path
|
|
1220
|
+
* @return every error registered for the field (insertion order); an empty
|
|
1221
|
+
* array when the field has none
|
|
1222
|
+
*/
|
|
1223
|
+
declare function useFieldErrorsByPath(form: Form$1, path: Path): FieldError[];
|
|
1224
|
+
declare function useIsDirty(form: Form$1): boolean;
|
|
1225
|
+
/**
|
|
1226
|
+
* Get whether one field is dirty: its live value exists and differs from
|
|
1227
|
+
* the field's effective baseline — the same per-field rule
|
|
1228
|
+
* `getFieldState(form, name).isDirty` applies (committed
|
|
1229
|
+
* `shouldDirty: false` baselines included). Subscribes to 'change' at
|
|
1230
|
+
* leaf scope like {@link useValue}: own-key and ancestor writes re-check
|
|
1231
|
+
* the flag, payload-less broadcasts (reset, setInitialValues) always
|
|
1232
|
+
* sync, and writes elsewhere never re-render it.
|
|
1233
|
+
*/
|
|
1234
|
+
declare function useIsFieldDirty<T extends Record<string, any> = any, P extends FieldPath<T> | PathSegments = FieldPath<T> | PathSegments>(form: Form$1<T>, name: P): boolean;
|
|
1235
|
+
/**
|
|
1236
|
+
* Get whether one field is dirty, by parsed path. See {@link
|
|
1237
|
+
* useIsFieldDirty}.
|
|
1238
|
+
*/
|
|
1239
|
+
declare function useIsFieldDirtyByPath(form: Form$1, path: Path): boolean;
|
|
1240
|
+
/**
|
|
1241
|
+
* Get dirty fields state -- object mapping each dirty field's user-facing
|
|
1242
|
+
* dotted path ('a.b', 'a.0.c') to true; recalculated after 'change' events
|
|
1243
|
+
*/
|
|
1244
|
+
declare function useDirtyFields(form: Form$1): Record<string, boolean>;
|
|
1245
|
+
/**
|
|
1246
|
+
* Get touched fields state -- array of touched fields' user-facing dotted
|
|
1247
|
+
* paths ('a.b', 'a.0.c'); recalculated after 'touched' events
|
|
1248
|
+
*/
|
|
1249
|
+
declare function useTouchedFields(form: Form$1): string[];
|
|
1250
|
+
/**
|
|
1251
|
+
* Aggregate snapshot of the whole form's state flags — the one-subscription
|
|
1252
|
+
* counterpart of react-hook-form's `formState` object (no errors object;
|
|
1253
|
+
* per-field error state stays with `useError`/`useFieldErrors`, and
|
|
1254
|
+
* `hasErrors`/`isValid` cover the whole-form questions).
|
|
1255
|
+
*
|
|
1256
|
+
* Recomputed on every state-bearing event; the field-wise comparator keeps
|
|
1257
|
+
* the returned reference stable while nothing observably changed, so
|
|
1258
|
+
* `useFormState(form).isDirty` re-renders no more often than the dedicated
|
|
1259
|
+
* {@link useIsDirty}. Cheaper than calling the granular hooks one by one
|
|
1260
|
+
* (one subscription and one snapshot instead of one per flag).
|
|
1261
|
+
*/
|
|
1262
|
+
type FormState<T extends Record<string, any> = any> = {
|
|
1263
|
+
/** Any live value differs from its baseline (see {@link isDirty}). */
|
|
1264
|
+
isDirty: boolean;
|
|
1265
|
+
/** Dirty fields keyed by user-facing dotted path ('a.b', 'a.0.c'). */
|
|
1266
|
+
dirtyFields: Record<string, boolean>;
|
|
1267
|
+
/** At least one field is touched. */
|
|
1268
|
+
isTouched: boolean;
|
|
1269
|
+
/** Touched fields' user-facing dotted paths. */
|
|
1270
|
+
touchedFields: string[];
|
|
1271
|
+
/** Any error registered (field or form level). */
|
|
1272
|
+
hasErrors: boolean;
|
|
1273
|
+
/** No errors are registered — react-hook-form's `isValid` semantics.
|
|
1274
|
+
* In-flight validation is NOT factored in ({@link isValidating} is the
|
|
1275
|
+
* separate signal; async rounds temporarily pass this flag like RHF's). */
|
|
1276
|
+
isValid: boolean;
|
|
1277
|
+
/** Every error as one record keyed by user-facing dotted path
|
|
1278
|
+
* ('a.b', 'list.0') — react-hook-form's `formState.errors` shape,
|
|
1279
|
+
* typed as {@link FieldErrors} (per-key values optional). Memoized
|
|
1280
|
+
* (see {@link getErrorsRecord}): the reference is stable between error
|
|
1281
|
+
* writes, so the snapshot comparator can bail on it. */
|
|
1282
|
+
errors: FieldErrors<T>;
|
|
1283
|
+
isSubmitting: boolean;
|
|
1284
|
+
/**
|
|
1285
|
+
* Whether a submit has been attempted on this form — set on the first
|
|
1286
|
+
* `handleSubmit` call (validation outcome aside) and cleared by
|
|
1287
|
+
* `reset`, react-hook-form's `formState.isSubmitted` semantics. Read
|
|
1288
|
+
* after a failed submit to render a "fix the errors below" panel.
|
|
1289
|
+
*/
|
|
1290
|
+
isSubmitted: boolean;
|
|
1291
|
+
/** Any validation round is running (field, form-level, or a pending
|
|
1292
|
+
* debounce window). */
|
|
1293
|
+
isValidating: boolean;
|
|
1294
|
+
isSubmitSuccessful: boolean | undefined;
|
|
1295
|
+
submitCount: number;
|
|
1296
|
+
/** Async initialValues still pending ({@link Form.isLoading}). */
|
|
1297
|
+
isLoading: boolean;
|
|
1298
|
+
/** The form-level disabled flag (fields OR their own `disabled`). */
|
|
1299
|
+
disabled: boolean;
|
|
1300
|
+
};
|
|
1301
|
+
declare function useFormState<T extends Record<string, any> = any>(form: Form$1<T>): FormState<T>;
|
|
1302
|
+
/**
|
|
1303
|
+
* The official selector primitive — TanStack Form's
|
|
1304
|
+
* `useStore(store, selector)` counterpart. Subscribes to every
|
|
1305
|
+
* state-bearing form event and keeps `selector()`'s result as the
|
|
1306
|
+
* snapshot; the selector itself is a plain closure (read the form through
|
|
1307
|
+
* any getter — `getValue`, `getValues`, `form.errors.size`, …).
|
|
1308
|
+
*
|
|
1309
|
+
* Without `isEqual` the subscription is object-identity based: each event
|
|
1310
|
+
* recomputes the selector and React bails out when the result is
|
|
1311
|
+
* reference-identical (the contract every `useWatch` reader relies on).
|
|
1312
|
+
* The optional `isEqual(prev, next)` comparator is for wide-scope
|
|
1313
|
+
* selectors that return a fresh reference per call (a whole-values
|
|
1314
|
+
* projection, say): an equal verdict skips notifying React altogether —
|
|
1315
|
+
* no render, not even a bailed-out one (TanStack `useSelector` compare
|
|
1316
|
+
* contract).
|
|
1317
|
+
*
|
|
1318
|
+
* `useFormState` is the built-in aggregate selector; {@link useWatch} is
|
|
1319
|
+
* the single-event version. Reach for `useStore` when the projection is
|
|
1320
|
+
* yours and spans state events — e.g. `form.validating.size > 0 &&
|
|
1321
|
+
* form.isSubmitting` as one flag.
|
|
1322
|
+
*/
|
|
1323
|
+
declare function useStore<T>(form: Form$1, selector: () => T, isEqual?: (prev: T, next: T) => boolean): T;
|
|
1324
|
+
declare function useHasErrors(form: Form$1): boolean;
|
|
1325
|
+
/**
|
|
1326
|
+
* Get every error as one record keyed by user-facing dotted path
|
|
1327
|
+
* ('a.b', 'list.0') — react-hook-form's `formState.errors` shape, for
|
|
1328
|
+
* error-summary panels and a11y announcements. Values are the stored
|
|
1329
|
+
* FieldError[] arrays shared with the form (treat as read-only). The
|
|
1330
|
+
* record is memoized per form (see {@link getErrorsRecord}): the hook
|
|
1331
|
+
* re-renders only when an error write actually changed the record's
|
|
1332
|
+
* content.
|
|
1333
|
+
*/
|
|
1334
|
+
declare function useErrors<T extends Record<string, any> = any>(form: Form$1<T>): FieldErrors<T>;
|
|
1335
|
+
/**
|
|
1336
|
+
* Get every error as one nested object following the values tree
|
|
1337
|
+
* (`errors.items?.[0]?.name` reads) — the typed optional-chaining
|
|
1338
|
+
* counterpart of {@link useErrors}' flat dotted record. Leaves hold the
|
|
1339
|
+
* stored FieldError[] arrays shared with the form (treat as read-only).
|
|
1340
|
+
* Memoized alongside the record (see {@link getErrorsTree}): the hook
|
|
1341
|
+
* re-renders only when an error write actually changed the tree's
|
|
1342
|
+
* content.
|
|
1343
|
+
*/
|
|
1344
|
+
declare function useErrorsTree<T extends Record<string, any> = any>(form: Form$1<T>): FieldErrorsTree<T>;
|
|
1345
|
+
/**
|
|
1346
|
+
* Get whether the form currently has no errors — react-hook-form's
|
|
1347
|
+
* `formState.isValid` counterpart. Subscribes to the `'errors'` event only;
|
|
1348
|
+
* in-flight validation does not flip it (see {@link useIsValidating}).
|
|
1349
|
+
*/
|
|
1350
|
+
declare function useIsValid(form: Form$1): boolean;
|
|
1351
|
+
declare function useIsSubmitting(form: Form$1): boolean;
|
|
1352
|
+
/**
|
|
1353
|
+
* Get whether an async {@link Options.initialValues} source is still
|
|
1354
|
+
* pending — the flag a loading skeleton or a disabled submit button gates
|
|
1355
|
+
* on until the resolved baseline lands. Subscribes to the 'loading' event
|
|
1356
|
+
* the core emits around the resolution cycle.
|
|
1357
|
+
*/
|
|
1358
|
+
declare function useIsLoading(form: Form$1): boolean;
|
|
1359
|
+
/**
|
|
1360
|
+
* Get the form's user-owned metadata slot reactively (Formik's `status`
|
|
1361
|
+
* counterpart): any value the app stores through {@link setStatus} —
|
|
1362
|
+
* server session flags, wizard step state, non-field errors. Subscribes
|
|
1363
|
+
* to the payload-less 'status' event, so unrelated events never re-render
|
|
1364
|
+
* the caller, and the returned reference is stable between writes that
|
|
1365
|
+
* store an equal value (useSyncExternalStore's Object.is bailout).
|
|
1366
|
+
*/
|
|
1367
|
+
declare function useStatus<T = any>(form: Form$1): T;
|
|
1368
|
+
/**
|
|
1369
|
+
* Get whether the form accepts a submit right now:
|
|
1370
|
+
* `!isSubmitting && !hasErrors`. This is the single flag a submit
|
|
1371
|
+
* button's `disabled` prop wants — it is `false` for the whole async
|
|
1372
|
+
* `onSubmit` span (not just the validation pass) and whenever any field
|
|
1373
|
+
* holds an error (client validation or server backfill), replacing the
|
|
1374
|
+
* hand-rolled `useHasErrors(form) || useIsSubmitting(form)` pair.
|
|
1375
|
+
* Deliberately no dirty or validating semantics: an untouched-but-clean
|
|
1376
|
+
* form can submit.
|
|
1377
|
+
*/
|
|
1378
|
+
declare function useCanSubmit(form: Form$1): boolean;
|
|
1379
|
+
declare function useSubmitCount(form: Form$1): number;
|
|
1380
|
+
/**
|
|
1381
|
+
* Get whether any validation round is currently running: a field
|
|
1382
|
+
* validator's pending `validateDebounce` window, an async field validator
|
|
1383
|
+
* still in flight, or the form-level validate's debounce window / in-flight
|
|
1384
|
+
* round — every one of them holds a key in `form.validating`, and the
|
|
1385
|
+
* 'validating' events they emit (field rounds with a path payload, the
|
|
1386
|
+
* form-level round as a payload-less broadcast) are what this subscribes
|
|
1387
|
+
* to. The boolean snapshot is Object.is-stable, so churn among the marks
|
|
1388
|
+
* (a second field opening while the first settles) costs no render while
|
|
1389
|
+
* the flag holds. This is the flag a submit button disables itself on, or
|
|
1390
|
+
* spins a spinner with, through the pre-submit validation pass — it flips
|
|
1391
|
+
* true the moment the first round opens and back false when the last one
|
|
1392
|
+
* settles.
|
|
1393
|
+
*/
|
|
1394
|
+
declare function useIsValidating(form: Form$1): boolean;
|
|
1395
|
+
/**
|
|
1396
|
+
* Get whether the last submit succeeded: `true` once a submit's validation
|
|
1397
|
+
* and `onSubmit` completed without throwing, `false` after a failed submit
|
|
1398
|
+
* (validation rejection or a thrown callback) and before any submit ran —
|
|
1399
|
+
* the falsy reading of the undefined initial/reset state. Subscribes to
|
|
1400
|
+
* the 'submitSuccessful' event the core's setSubmitSuccessful emits, so
|
|
1401
|
+
* the flag flips in the same tick the outcome lands: the usual consumers
|
|
1402
|
+
* are a success banner and a redirect-on-success effect.
|
|
1403
|
+
*/
|
|
1404
|
+
declare function useIsSubmitSuccessful(form: Form$1): boolean;
|
|
1405
|
+
/**
|
|
1406
|
+
* Get the form-level error message: the first error stored under the
|
|
1407
|
+
* reserved {@link FORM_ERROR} key, as display text — or undefined while
|
|
1408
|
+
* the slot is clean. That key is where a form-level `validate` record's
|
|
1409
|
+
* `_form` entry lands and where the Standard Schema adapter drops
|
|
1410
|
+
* path-less issues, so errors that belong to no single field still have a
|
|
1411
|
+
* reader. The classic usage renders it once above the submit button —
|
|
1412
|
+
* `useFormError(form) || null` — and the imperative twin is
|
|
1413
|
+
* `getError(form, FORM_ERROR)`.
|
|
1414
|
+
*/
|
|
1415
|
+
declare function useFormError(form: Form$1): string | undefined;
|
|
1416
|
+
/**
|
|
1417
|
+
* Get every form-level error: all errors stored under the reserved
|
|
1418
|
+
* {@link FORM_ERROR} key (insertion order), an empty array when the slot
|
|
1419
|
+
* is clean. The plural twin of {@link useFormError} for forms that stack
|
|
1420
|
+
* several form-level issues — each path-less Standard Schema issue lands
|
|
1421
|
+
* in this slot. The array reference is stable between unrelated events
|
|
1422
|
+
* (the stored array or a shared empty constant), so consumers can memo on
|
|
1423
|
+
* it; the imperative counterpart is `getFieldErrors(form, FORM_ERROR)`.
|
|
1424
|
+
*/
|
|
1425
|
+
declare function useFormErrors(form: Form$1): FieldError[];
|
|
1426
|
+
|
|
1427
|
+
/**
|
|
1428
|
+
* Options accepted by {@link useTransform}.
|
|
1429
|
+
*/
|
|
1430
|
+
type UseTransformOptions<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments, TDisplay = PathValueOf<TValues, TPath>> = {
|
|
1431
|
+
/**
|
|
1432
|
+
* Map the form's stored (raw) value to the display value the control
|
|
1433
|
+
* renders — the read direction. Omitted: the raw value is displayed
|
|
1434
|
+
* as-is (identity).
|
|
1435
|
+
*/
|
|
1436
|
+
toDisplay?: (raw: PathValueOf<TValues, TPath>) => TDisplay;
|
|
1437
|
+
/**
|
|
1438
|
+
* Map a display value back to the raw value written into the form —
|
|
1439
|
+
* the write direction. Omitted: the display value is written as-is
|
|
1440
|
+
* (identity). May return a Promise: the resolved raw value commits
|
|
1441
|
+
* when it settles (async transforms, e.g. server-side formatting),
|
|
1442
|
+
* with stale resolutions dropped — only the latest write commits.
|
|
1443
|
+
* The round trip should be an identity
|
|
1444
|
+
* (`toDisplay(fromDisplay(x)) === x`); a store value the transform
|
|
1445
|
+
* cannot invert (e.g. `undefined` for a not-yet-edited field) must be
|
|
1446
|
+
* handled by `toDisplay`, since it runs first.
|
|
1447
|
+
*/
|
|
1448
|
+
fromDisplay?: (display: TDisplay) => PathValueOf<TValues, TPath> | Promise<PathValueOf<TValues, TPath>>;
|
|
1449
|
+
/**
|
|
1450
|
+
* Debounce the display→raw commit: a write inside the window supersedes
|
|
1451
|
+
* the pending one, and only the last write commits when the window
|
|
1452
|
+
* elapses — the async-transforms counterpart of the field validator's
|
|
1453
|
+
* `validateDebounce` (TanStack Form's `asyncDebounceMs`). `0`/omitted
|
|
1454
|
+
* commits immediately (an async `fromDisplay` still resolves before
|
|
1455
|
+
* the commit lands). The store value stays unchanged until the commit:
|
|
1456
|
+
* `value` keeps deriving from it, and validation fires at commit time
|
|
1457
|
+
* through the user-change pipeline.
|
|
1458
|
+
*/
|
|
1459
|
+
asyncDebounceMs?: number;
|
|
1460
|
+
};
|
|
1461
|
+
/**
|
|
1462
|
+
* Bind a control to a field whose stored value and display value differ
|
|
1463
|
+
* — TanStack Form's `useTransform` counterpart, with the round trip made
|
|
1464
|
+
* explicit: `toDisplay` maps the store value to what the control shows,
|
|
1465
|
+
* `fromDisplay` maps the control's display value back to what the store
|
|
1466
|
+
* holds. The store always carries the raw typed value, so
|
|
1467
|
+
* `getValues`/submit/validation never see display representations.
|
|
1468
|
+
*
|
|
1469
|
+
* ```jsx
|
|
1470
|
+
* const age = useTransform(form, 'age', {
|
|
1471
|
+
* toDisplay: (raw: number) => String(raw),
|
|
1472
|
+
* fromDisplay: (display: string) => Number(display)
|
|
1473
|
+
* });
|
|
1474
|
+
* <input value={age.value} onChange={e => age.onChange(e.target.value)} />
|
|
1475
|
+
* ```
|
|
1476
|
+
*
|
|
1477
|
+
* `value` subscribes to 'change' at leaf scope exactly like a controlled
|
|
1478
|
+
* `useField` value — typing, programmatic `setValue` and ancestor writes
|
|
1479
|
+
* all re-derive it, writes elsewhere never re-render it. `onChange`
|
|
1480
|
+
* writes through `userChangeByPath` (the user-change channel): with a
|
|
1481
|
+
* field mounted at the same path the mode/reValidateMode-gated
|
|
1482
|
+
* validation fires exactly as if the user typed into a bound field; with
|
|
1483
|
+
* no mounted field it degrades to a plain value write. Touched marking
|
|
1484
|
+
* stays a blur concern — pair this with `useField` at the same path, or
|
|
1485
|
+
* call `setTouched`, when blur semantics matter.
|
|
1486
|
+
*
|
|
1487
|
+
* The transform functions are read fresh on every render (inline
|
|
1488
|
+
* closures work), and `value` is recomputed per render — keep display
|
|
1489
|
+
* values primitive (string/number) so React's equal-state bailout holds.
|
|
1490
|
+
*
|
|
1491
|
+
* @param form the form instance (explicit; the hook is headless — no
|
|
1492
|
+
* context read, no provider required)
|
|
1493
|
+
* @param name the field's path (dotted string or segments)
|
|
1494
|
+
* @param options the two mapping directions; both optional (identity)
|
|
1495
|
+
*/
|
|
1496
|
+
declare function useTransform<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments, TDisplay = PathValueOf<TValues, TPath>>(form: Form$1<TValues>, name: TPath, options?: UseTransformOptions<TValues, TPath, TDisplay>): {
|
|
1497
|
+
value: TDisplay;
|
|
1498
|
+
onChange: (display: TDisplay) => void;
|
|
1499
|
+
};
|
|
1500
|
+
|
|
1501
|
+
/**
|
|
1502
|
+
* Props for <Form>.
|
|
1503
|
+
*
|
|
1504
|
+
* Native validation behavior: the rendered <form> always sets noValidate,
|
|
1505
|
+
* which suppresses the browser's built-in blocked-submit UI. However, native
|
|
1506
|
+
* constraint validation still gates submission — the form element's
|
|
1507
|
+
* checkValidity() runs before custom validators, and when it fails,
|
|
1508
|
+
* reportValidity() surfaces the offending constraints as native bubbles and
|
|
1509
|
+
* submission stops (onInvalidSubmit fires). onSubmit/onValidSubmit only run
|
|
1510
|
+
* once every native constraint (required, type=email, minLength, ...) passes.
|
|
1511
|
+
* Pass `shouldUseNativeValidation={false}` (or `createForm({shouldUseNativeValidation:
|
|
1512
|
+
* false})`) to skip the native gate entirely for custom-validator-only
|
|
1513
|
+
* forms — targets without checkValidity (React Native, toolbar buttons)
|
|
1514
|
+
* are always exempt.
|
|
1515
|
+
*
|
|
1516
|
+
* The submit flow itself lives in the headless `handleSubmit` (see form.ts);
|
|
1517
|
+
* this component is a thin wrapper that binds it to the rendered <form>.
|
|
1518
|
+
*/
|
|
1519
|
+
type FormProps<T extends Record<string, any> = any> = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
|
|
1520
|
+
form?: Form$1<T>;
|
|
1521
|
+
/**
|
|
1522
|
+
* Provide into an isolated context from `createFormContext()` instead of
|
|
1523
|
+
* the module-level one — `<Form context={ProfileForm.context}>` keeps the
|
|
1524
|
+
* component's full submit machinery while the factory's bound hooks
|
|
1525
|
+
* (`ProfileForm.useField`, `ProfileForm.useFormContext`, ...) resolve this
|
|
1526
|
+
* form from their private context. The module-level `useFormContext()` /
|
|
1527
|
+
* `useField` do not see it; that is the point of the isolation. Omitted,
|
|
1528
|
+
* the form lands in the module-level FormContext as before.
|
|
1529
|
+
*/
|
|
1530
|
+
context?: React.Context<Form$1<any> | null>;
|
|
1531
|
+
/**
|
|
1532
|
+
* The values baseline — a sync object, a Promise, or a thunk returning
|
|
1533
|
+
* either ({@link Options.initialValues}). Async sources render the form
|
|
1534
|
+
* empty and gate on `form.isLoading` until they resolve.
|
|
1535
|
+
*/
|
|
1536
|
+
initialValues?: T | Promise<T> | (() => T | Promise<T>);
|
|
1537
|
+
/**
|
|
1538
|
+
* Form-level default for a bound field's unmount behavior
|
|
1539
|
+
* ({@link Options.shouldUnregister}): `true` (the default) tombstones
|
|
1540
|
+
* unmounted fields, `false` keeps their values.
|
|
1541
|
+
*/
|
|
1542
|
+
shouldUnregister?: boolean;
|
|
1543
|
+
/**
|
|
1544
|
+
* Validate on mount (see {@link Options.validateOnMount}): every
|
|
1545
|
+
* mounted field with a validator kicks once after mount and the
|
|
1546
|
+
* form-level `validate` (if any) runs once. A field's own
|
|
1547
|
+
* `validateOnMount` prop overrides this flag.
|
|
1548
|
+
*/
|
|
1549
|
+
validateOnMount?: boolean;
|
|
1550
|
+
/**
|
|
1551
|
+
* Disable every bound field: the form-level flag fields OR with their
|
|
1552
|
+
* own `disabled` option (a field cannot opt out). Seeded at create and
|
|
1553
|
+
* kept in sync while this prop changes (undefined leaves the current
|
|
1554
|
+
* flag untouched — toggle at runtime with `setDisabled`).
|
|
1555
|
+
*/
|
|
1556
|
+
disabled?: boolean;
|
|
1557
|
+
/**
|
|
1558
|
+
* Form-level default for field validation's `asyncAlways`: a field
|
|
1559
|
+
* whose `required` gate failed still runs its debounced validator, its
|
|
1560
|
+
* result landing per-source alongside the gate's errors. A field's own
|
|
1561
|
+
* `asyncAlways` prop overrides this flag.
|
|
1562
|
+
*/
|
|
1563
|
+
asyncAlways?: boolean;
|
|
1564
|
+
/**
|
|
1565
|
+
* Controlled external values. When the `values` reference changes, the
|
|
1566
|
+
* new object is synced into the form (via setInitialValues semantics):
|
|
1567
|
+
* uncommitted user edits are discarded -- master-detail semantics, where
|
|
1568
|
+
* selecting another record replaces the draft -- while touched flags and
|
|
1569
|
+
* errors are kept. Sync is reference-based: re-renders that pass the same
|
|
1570
|
+
* `values` reference never clobber what the user is typing.
|
|
1571
|
+
*/
|
|
1572
|
+
values?: T;
|
|
1573
|
+
/** May be async — the submit flow awaits it, so form.isSubmitting
|
|
1574
|
+
* covers the entire flight. */
|
|
1575
|
+
onSubmit?: (values: T, e: React.FormEvent) => void | Promise<void>;
|
|
1576
|
+
/** May be async, same as onSubmit. */
|
|
1577
|
+
onValidSubmit?: (values: T, e: React.FormEvent) => void | Promise<void>;
|
|
1578
|
+
/**
|
|
1579
|
+
* React 19 Server Action target: after validation passes (and after
|
|
1580
|
+
* onSubmit/onValidSubmit), the validated, schema-coerced values are
|
|
1581
|
+
* converted to FormData ({@link formDataFromValues} — files, arrays and
|
|
1582
|
+
* nested objects included) and dispatched to this callback, e.g.
|
|
1583
|
+
* `action={createUser}` for a server action or
|
|
1584
|
+
* `action={formData => startTransition(() => dispatch(formData))}` in a
|
|
1585
|
+
* useActionState bridge. `isSubmitting` covers the whole flight.
|
|
1586
|
+
*
|
|
1587
|
+
* The callback may return an {@link ActionErrorResult}: its `errors`
|
|
1588
|
+
* record lands on the form as per-field `type: 'server'` errors and the
|
|
1589
|
+
* submit counts as unsuccessful — a server action rejecting the payload
|
|
1590
|
+
* (422-style) hydrates the fields exactly like failed client
|
|
1591
|
+
* validation. Return anything else to report success.
|
|
1592
|
+
*
|
|
1593
|
+
* Alternatively pass a URL string: it renders as the form's native
|
|
1594
|
+
* `action` attribute, giving progressive enhancement — without
|
|
1595
|
+
* JavaScript the browser posts the raw FormData to it (native
|
|
1596
|
+
* constraint attributes from declarative `rules` still gate invalid
|
|
1597
|
+
* submits), and with JavaScript the validated pipeline runs instead
|
|
1598
|
+
* (pair the URL with `method="post"` and perform the network call in
|
|
1599
|
+
* `onValidSubmit`; `handleSubmit` preventDefaults the native post).
|
|
1600
|
+
*/
|
|
1601
|
+
action?: string | ((formData: FormData) => void | Promise<void | ActionErrorResult>);
|
|
1602
|
+
/**
|
|
1603
|
+
* Called when validation fails.
|
|
1604
|
+
* @param errors array of {path, type, message} entries in insertion
|
|
1605
|
+
* order; path is the dotted field path ('a.b', 'list.0'), type is
|
|
1606
|
+
* the error kind ('custom' for plain string errors, 'native' for
|
|
1607
|
+
* failed DOM constraint validation), message is the display text
|
|
1608
|
+
* @param values current form values
|
|
1609
|
+
*/
|
|
1610
|
+
onInvalidSubmit?: (errors: {
|
|
1611
|
+
path: string;
|
|
1612
|
+
type: string;
|
|
1613
|
+
message: string;
|
|
1614
|
+
}[], values: T) => void;
|
|
1615
|
+
/**
|
|
1616
|
+
* Focus the first field with an error after a failed submit: custom
|
|
1617
|
+
* validation failures focus the first errored field, native constraint
|
|
1618
|
+
* failures focus the first ':invalid' control. Defaults to true; pass
|
|
1619
|
+
* false to disable.
|
|
1620
|
+
*/
|
|
1621
|
+
shouldFocusError?: boolean;
|
|
1622
|
+
/**
|
|
1623
|
+
* Whether native constraint validation gates submission — pass false
|
|
1624
|
+
* for custom-validator-only forms (react-hook-form's
|
|
1625
|
+
* `shouldUseNativeValidation`). Seeds the internally created form's
|
|
1626
|
+
* flag (`useForm` create-time option) and overrides it for this form's
|
|
1627
|
+
* submit wiring; with an external `form` prop only the submit wiring is
|
|
1628
|
+
* affected. Defaults to the form's flag (`true`).
|
|
1629
|
+
*/
|
|
1630
|
+
shouldUseNativeValidation?: boolean;
|
|
1631
|
+
};
|
|
1632
|
+
declare function Form<T extends Record<string, any> = any>({ form: f1, context, initialValues, values, shouldUnregister, validateOnMount, disabled, asyncAlways, onSubmit, onValidSubmit, onInvalidSubmit, action, shouldFocusError, shouldUseNativeValidation, ...props }: FormProps<T>): React.JSX.Element;
|
|
1633
|
+
|
|
1634
|
+
/**
|
|
1635
|
+
* Props for {@link FormField}: every {@link UseFieldOptions} option plus a
|
|
1636
|
+
* render-prop `children` receiving the bound field result.
|
|
1637
|
+
*/
|
|
1638
|
+
type FormFieldProps<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = UseFieldOptions$1<TValues, TPath> & {
|
|
1639
|
+
children: (field: UseFieldResult<TValues, TPath>) => React.ReactNode;
|
|
1640
|
+
};
|
|
1641
|
+
/**
|
|
1642
|
+
* Headless field bound through a render prop — the non-hook counterpart of
|
|
1643
|
+
* {@link useField} for class components, callback-style consumers and
|
|
1644
|
+
* library bridges where a hook cannot be called (Formik `<Field>` /
|
|
1645
|
+
* TanStack `form.Field` shape).
|
|
1646
|
+
*
|
|
1647
|
+
* The child function receives the full {@link UseFieldResult} — value,
|
|
1648
|
+
* error(s), onChange/onBlur, `disabled`, `focusRef`, the bound `form` —
|
|
1649
|
+
* and renders whatever UI it wants; nothing is rendered when it returns
|
|
1650
|
+
* null/undefined, so it can also gate conditional layout. Resolves its
|
|
1651
|
+
* form from the module-level `FormContext` or the explicit `form` option
|
|
1652
|
+
* (per-instance contexts from `createFormContext()` keep using their own
|
|
1653
|
+
* `useField` hook).
|
|
1654
|
+
*/
|
|
1655
|
+
declare function FormField<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments>({ children, ...options }: FormFieldProps<TValues, TPath>): React.ReactNode;
|
|
1656
|
+
|
|
1657
|
+
/**
|
|
1658
|
+
* The error-message element id a field's `aria-describedby` points at —
|
|
1659
|
+
* `fieldErrorId('a[0].b')` is `'a-0-b'`, the same id `<Field>`'s built-in
|
|
1660
|
+
* `renderError` span carries. This is the library-level wiring convention:
|
|
1661
|
+
* whenever a bound field (Field/Checkbox/Select, `useField`'s `inputProps`)
|
|
1662
|
+
* has an error it sets `aria-invalid` and describes the element with this
|
|
1663
|
+
* id, so a custom error component only needs
|
|
1664
|
+
* `<span id={fieldErrorId(name)} role="alert">` to complete the
|
|
1665
|
+
* accessible-name chain for screen readers.
|
|
1666
|
+
* @param name the same field name passed to the bound component
|
|
1667
|
+
*/
|
|
1668
|
+
declare function fieldErrorId(name: Name): string;
|
|
1669
|
+
|
|
1670
|
+
/**
|
|
1671
|
+
* Props shared by Field/Checkbox/Select. Generic so a typed form flows into
|
|
1672
|
+
* the `validate` callback: with `form` (a `Form<Values>`) and `name`
|
|
1673
|
+
* (a `FieldPath<Values>`) provided, `validate` receives the value at that
|
|
1674
|
+
* path — `PathValueOf<Values, P>` — instead of `any`. The defaults keep the
|
|
1675
|
+
* bare `<Field name="x" />` (context-resolved, untyped) call sites exactly
|
|
1676
|
+
* as permissive as before.
|
|
1677
|
+
*/
|
|
1678
|
+
type UseFieldOptions<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = {
|
|
1679
|
+
form?: Form$1<TValues>;
|
|
1680
|
+
name?: TPath;
|
|
1681
|
+
initialValue?: any;
|
|
1682
|
+
shouldUnregister?: boolean;
|
|
1683
|
+
/**
|
|
1684
|
+
* Field-level validator. The value argument is typed when the field is
|
|
1685
|
+
* tied to a typed form (via the `form` prop); the return shape mirrors
|
|
1686
|
+
* {@link Validator} — an error (string / FieldError / mixed array) or
|
|
1687
|
+
* undefined when valid, possibly a Promise for async validation. The
|
|
1688
|
+
* second argument carries the validation context (`meta.signal` aborts
|
|
1689
|
+
* when the round is superseded).
|
|
1690
|
+
*/
|
|
1691
|
+
validate?: ((value: PathValueOf<TValues, TPath>, meta: {
|
|
1692
|
+
form: Form$1;
|
|
1693
|
+
path: Path;
|
|
1694
|
+
signal: AbortSignal;
|
|
1695
|
+
}) => ReturnType<Validator>) | StandardSchemaV1<PathValueOf<TValues, TPath>>;
|
|
1696
|
+
/**
|
|
1697
|
+
* Declarative rules (required/min/max/minLength/maxLength/pattern,
|
|
1698
|
+
* plus custom `validate` callbacks), compiled into a validator that
|
|
1699
|
+
* runs before `validate`; failures land in the form's error state.
|
|
1700
|
+
* The declarative subset is also rendered as native constraint
|
|
1701
|
+
* attributes (`required`, `minLength`, `pattern`, …) onto the element
|
|
1702
|
+
* for browser/AT hints — `:invalid` styling, screen-reader
|
|
1703
|
+
* announcements — while the store pipeline stays the source of truth
|
|
1704
|
+
* for messages (`renderError`/`aria-invalid` keep working; a user-passed
|
|
1705
|
+
* `required`/`pattern`/… prop overrides the derived attribute). Passed
|
|
1706
|
+
* through to useField — like validateDebounce it is never spread onto
|
|
1707
|
+
* the DOM element.
|
|
1708
|
+
*/
|
|
1709
|
+
rules?: FieldRules;
|
|
1710
|
+
/**
|
|
1711
|
+
* Milliseconds to debounce this field's validation kicks. Defaults to 0
|
|
1712
|
+
* (validate immediately); only the last kick inside the window runs the
|
|
1713
|
+
* validator, and `trigger` waits the window out. Passed through to
|
|
1714
|
+
* useField/useValidate.
|
|
1715
|
+
*/
|
|
1716
|
+
validateDebounce?: number;
|
|
1717
|
+
/**
|
|
1718
|
+
* Run this field's debounced validator even when its `required` gate
|
|
1719
|
+
* failed (TanStack Form's `asyncAlways`): the gate's errors land
|
|
1720
|
+
* immediately, the validator's own result lands alongside them
|
|
1721
|
+
* per-source. Falls back to the form-level `createForm({asyncAlways})`.
|
|
1722
|
+
* Passed through to useField.
|
|
1723
|
+
*/
|
|
1724
|
+
asyncAlways?: boolean;
|
|
1725
|
+
/**
|
|
1726
|
+
* Validate this field once on mount (see {@link
|
|
1727
|
+
* UseFieldOptions}' `validateOnMount`): overrides the form-level
|
|
1728
|
+
* `createForm({validateOnMount})` / `<Form validateOnMount>` flag in
|
|
1729
|
+
* either direction. Passed through to useField.
|
|
1730
|
+
*/
|
|
1731
|
+
validateOnMount?: boolean;
|
|
1732
|
+
/**
|
|
1733
|
+
* Disable this field's control: OR-ed with the form-level flag
|
|
1734
|
+
* (`createForm({disabled})` / `setDisabled`) — a field cannot opt out
|
|
1735
|
+
* of a disabled form. Passed through to useField, like every option,
|
|
1736
|
+
* never spread onto the DOM element from props.
|
|
1737
|
+
*/
|
|
1738
|
+
disabled?: boolean;
|
|
1739
|
+
/**
|
|
1740
|
+
* Milliseconds to delay showing a newly appearing error (render layer
|
|
1741
|
+
* only — `aria-invalid`/`renderError` wait out the window while the
|
|
1742
|
+
* form's error state stays immediate for trigger/submit). An error
|
|
1743
|
+
* that clears inside the window never shows; once visible, error
|
|
1744
|
+
* changes apply immediately. Passed through to useField.
|
|
1745
|
+
*/
|
|
1746
|
+
delayError?: number;
|
|
1747
|
+
/**
|
|
1748
|
+
* Field-level validation mode override: this field validates on its own
|
|
1749
|
+
* schedule instead of the form's `mode` (other fields are unaffected);
|
|
1750
|
+
* the form's `reValidateMode` still governs re-validation once the
|
|
1751
|
+
* field has an error. Passed through to useField, never spread onto
|
|
1752
|
+
* the DOM element.
|
|
1753
|
+
*/
|
|
1754
|
+
mode?: ValidationMode;
|
|
1755
|
+
/**
|
|
1756
|
+
* Uncontrolled mode: render the element with `defaultValue` instead of
|
|
1757
|
+
* `value` — typing re-renders nothing (the store still carries every
|
|
1758
|
+
* write; errors/touched/disabled still re-render the field). The
|
|
1759
|
+
* snapshot is pinned at mount; bulk operations (reset/setInitialValues)
|
|
1760
|
+
* sync the DOM element directly without a render — RHF-register
|
|
1761
|
+
* behavior (read live values with useValue/getValues). Passed through
|
|
1762
|
+
* to useField, never spread onto the DOM element.
|
|
1763
|
+
*/
|
|
1764
|
+
uncontrolled?: boolean;
|
|
1765
|
+
[key: string]: any;
|
|
1766
|
+
};
|
|
1767
|
+
type FieldProps<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = UseFieldOptions<TValues, TPath> & {
|
|
1768
|
+
as?: React.ComponentType<any>;
|
|
1769
|
+
asProps?: Record<string, any>;
|
|
1770
|
+
eventToValue?: (e: any) => any;
|
|
1771
|
+
valueToProps?: (value: any) => Record<string, any>;
|
|
1772
|
+
/**
|
|
1773
|
+
* Optional error renderer. When provided and the field has an error,
|
|
1774
|
+
* Field renders `<span id={id} role="alert">{renderError(error, id)}</span>`
|
|
1775
|
+
* next to the input. The input's aria-describedby points at that span's
|
|
1776
|
+
* id (the same `fieldErrorId(name)` derivation) whenever the field has
|
|
1777
|
+
* an error — with or without renderError — so custom error components
|
|
1778
|
+
* that render the element themselves (using `fieldErrorId`) get the
|
|
1779
|
+
* wiring for free.
|
|
1780
|
+
*/
|
|
1781
|
+
renderError?: (error: string, id: string) => React.ReactNode;
|
|
1782
|
+
/**
|
|
1783
|
+
* Store `e.target.valueAsNumber` instead of the string value —
|
|
1784
|
+
* react-hook-form's `register({valueAsNumber})` counterpart for number
|
|
1785
|
+
* inputs (`<input type="number">`). `NaN` passes through as-is when the
|
|
1786
|
+
* input cannot be parsed, matching RHF. An explicit `eventToValue`
|
|
1787
|
+
* takes precedence.
|
|
1788
|
+
*/
|
|
1789
|
+
valueAsNumber?: boolean;
|
|
1790
|
+
/**
|
|
1791
|
+
* Store `e.target.valueAsDate` instead of the string value — RHF's
|
|
1792
|
+
* `register({valueAsDate})` counterpart for date/time inputs. `null`
|
|
1793
|
+
* passes through when the input cannot be parsed. An explicit
|
|
1794
|
+
* `eventToValue` takes precedence; combining with `valueAsNumber` is a
|
|
1795
|
+
* TypeError.
|
|
1796
|
+
*/
|
|
1797
|
+
valueAsDate?: boolean;
|
|
1798
|
+
};
|
|
1799
|
+
/**
|
|
1800
|
+
* The callable shape of {@link Field}: `form` + `name` flow their generics
|
|
1801
|
+
* into `validate`'s value argument (`PathValueOf<TValues, TPath>`). A named
|
|
1802
|
+
* interface rather than an inline `as <TValues, ...>() => ...` signature —
|
|
1803
|
+
* same types, and the inline form trips no-use-before-define on the type
|
|
1804
|
+
* parameters.
|
|
1805
|
+
*/
|
|
1806
|
+
type FieldComponent = {
|
|
1807
|
+
<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments>(props: FieldProps<TValues, TPath> & React.RefAttributes<HTMLInputElement>): React.ReactElement | null;
|
|
1808
|
+
};
|
|
1809
|
+
declare const Field: FieldComponent;
|
|
1810
|
+
type CheckboxProps<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = UseFieldOptions<TValues, TPath>;
|
|
1811
|
+
/**
|
|
1812
|
+
* Callable shape of {@link Checkbox}: the same form-typed `validate`
|
|
1813
|
+
* inference contract as {@link FieldComponent}.
|
|
1814
|
+
*/
|
|
1815
|
+
type CheckboxComponent = {
|
|
1816
|
+
<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments>(props: CheckboxProps<TValues, TPath> & React.RefAttributes<HTMLInputElement>): React.ReactElement | null;
|
|
1817
|
+
};
|
|
1818
|
+
declare const Checkbox: CheckboxComponent;
|
|
1819
|
+
type SelectProps<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments> = UseFieldOptions<TValues, TPath> & {
|
|
1820
|
+
multiple?: boolean;
|
|
1821
|
+
children?: React.ReactNode;
|
|
1822
|
+
};
|
|
1823
|
+
/**
|
|
1824
|
+
* Callable shape of {@link Select}: the same form-typed `validate`
|
|
1825
|
+
* inference contract as {@link FieldComponent}.
|
|
1826
|
+
*/
|
|
1827
|
+
type SelectComponent = {
|
|
1828
|
+
<TValues extends Record<string, any> = any, TPath extends FieldPath<TValues> | PathSegments = FieldPath<TValues> | PathSegments>(props: SelectProps<TValues, TPath> & React.RefAttributes<HTMLSelectElement>): React.ReactElement | null;
|
|
1829
|
+
};
|
|
1830
|
+
declare const Select: SelectComponent;
|
|
1831
|
+
|
|
1832
|
+
export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, FieldError, FieldErrorEntry, FieldErrors, FieldErrorsTree, FieldPath, FieldRules, Form, FormContext, FormEvents, FormField, Form$1 as FormInstance, FormProvider, Name, Options, Path, PathSegments, PathValueOf, RegisterOptions, RegisterProps, Select, StandardSchemaV1, ValidationMode, Validator, changeValue, changeValueByPath, createFormContext, emitChangeByPath, fieldErrorId, getDirtyFields, getFieldState, getTouchedFields, getValue, getValueByPath, getValues, handleSubmit, hasTouched, hasTouchedByPath, incrementSubmitCount, isDirty, isFieldDirtyByPath, isTouched, registerField, registerFieldMode, removeField, removeFieldByPath, reset, resetField, seedValueByPath, setDisabled, setInitialValues, setIsSubmitting, setStatus, setSubmitSuccessful, setTouched, setTouchedByPath, setValue, setValueByPath, subscribe, unregisterFieldMode, useCanSubmit, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useErrors, useErrorsTree, useField, useFieldArray, useFieldArrayItem, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useFormError, useFormErrors, useFormState, useHasErrors, useIsDirty, useIsFieldDirty, useIsFieldDirtyByPath, useIsLoading, useIsSubmitSuccessful, useIsSubmitting, useIsValid, useIsValidating, useStatus, useStore, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useTransform, useValue, useValueByPath, useValues, useWatch, useWatchCore, userBlur, userChangeByPath, watch };
|
|
1833
|
+
export type { ActionErrorResult, FieldState, FormContextBundle, FormState, HandleSubmitOptions, RemoveFieldOptions, ResetFieldOptions, ResetOptions, SetFieldOptions, SubscribeEvent, SubscribeOptions, UseTransformOptions, UseValueOptions, WatchHandle, WatchScope };
|