@paragrav/rhf-utils 0.0.125 → 0.0.127
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 +44 -31
- package/dist/esm/client/index.mjs +29 -35
- package/dist/esm/client/utils.mjs +24 -0
- package/dist/esm/errors/nonfield/isNonFieldErrorMarkerInDOM.mjs +2 -2
- package/dist/esm/errors/orphan/isOrphanFormError.mjs +1 -1
- package/dist/esm/errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs +4 -4
- package/dist/esm/errors/trpc/trpcClientErrorMessageSchema.mjs +2 -2
- package/dist/esm/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs +2 -2
- package/dist/esm/exports.mjs +2 -2
- package/dist/esm/form/Form.mjs +17 -17
- package/dist/esm/form/context/utils/RhfUtilsContextProvider.mjs +10 -10
- package/dist/esm/submit/useFormOnSubmitSuccessfulAndReset.mjs +5 -5
- package/dist/esm/submit/useFormOnSubmitted.mjs +1 -1
- package/dist/esm/submit/useResetFormOnSubmitted.mjs +11 -9
- package/dist/esm/utils/useRefIfValueWasTrue.mjs +2 -2
- package/dist/types/client/config/RhfUtilsClientConfig.d.ts +2 -2
- package/dist/types/client/utils.d.ts +47 -0
- package/dist/types/errors/nonfield/isNonFieldErrorMarkerInDOM.d.ts +2 -1
- package/dist/types/errors/trpc/getOnSubmitTrpcClientErrorHandler.d.ts +2 -1
- package/dist/types/errors/trpc/trpcClientErrorMessageSchema.d.ts +2 -1
- package/dist/types/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.d.ts +2 -1
- package/dist/types/exports.d.ts +2 -2
- package/dist/types/form/RhfUtilsFormOptions.d.ts +2 -2
- package/dist/types/submit/useResetFormOnSubmitted.d.ts +22 -9
- package/dist/types/utils/useRefIfValueWasTrue.d.ts +2 -1
- package/package.json +1 -1
- package/dist/types/client/zod/RhfUtilsZodForm.d.ts +0 -8
- package/dist/types/client/zod/UseFormFieldsZodProps.d.ts +0 -4
- package/dist/types/client/zod/context/RhfUtilsZodFormWithProviders.d.ts +0 -8
- package/dist/types/errors/consoleErrors.d.ts +0 -14
- package/dist/types/errors/flat/useFlatFieldErrorsOutput.d.ts +0 -5
- package/dist/types/errors/flat/useFormFlatFieldErrorsMemo.d.ts +0 -7
- package/dist/types/errors/flat/useRefdFieldErrorsMemo.d.ts +0 -9
- package/dist/types/errors/orphan/getOrphansFromFieldErrors.d.ts +0 -5
- package/dist/types/errors/orphan/useFormHasOnlyOrphanFieldErrorsMemo.d.ts +0 -6
- package/dist/types/errors/orphan/useOrphanFormErrorsMemo.d.ts +0 -9
- package/dist/types/errors/orphan/useOrphanFormErrorsToConsole.d.ts +0 -9
- package/dist/types/errors/outputErrors.d.ts +0 -14
- package/dist/types/errors/root/getRootsFromFieldErrors.d.ts +0 -5
- package/dist/types/errors/root/useRootFormFieldErrorsMemo.d.ts +0 -6
- package/dist/types/errors/useFormErrorConsoleDebug.d.ts +0 -8
- package/dist/types/errors/useFormErrorsEffect.d.ts +0 -4
- package/dist/types/errors/useFormErrorsIfAny.d.ts +0 -6
- package/dist/types/errors/useFormErrorsToConsole.d.ts +0 -13
- package/dist/types/errors/useFormErrorsTransformMemo.d.ts +0 -7
- package/dist/types/errors/useFormRequestSubmit.d.ts +0 -6
- package/dist/types/form/FormProviders.d.ts +0 -12
- package/dist/types/form/_FormBase.d.ts +0 -8
- package/dist/types/form/context/utils/FormUtilsContextProvider.d.ts +0 -11
- package/dist/types/form/context/utils/useFormUtilsContext.d.ts +0 -12
- package/dist/types/form/useForm.d.ts +0 -51
- package/dist/types/form/useFormOptions.d.ts +0 -27
- package/dist/types/submit/error/setCtxErrorsByFormSubmitError.d.ts +0 -10
- package/dist/types/submit/useFormOnSubmitSuccessful.d.ts +0 -2
- package/dist/types/submit/useResetFormOnSubmitError.d.ts +0 -9
- package/dist/types/submit/useResetFormOnSubmitSuccessful.d.ts +0 -16
package/README.md
CHANGED
|
@@ -38,30 +38,32 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
38
38
|
},
|
|
39
39
|
},
|
|
40
40
|
|
|
41
|
-
// optional (defaults to primitive HTML form)
|
|
41
|
+
// optional form component (defaults to primitive HTML form)
|
|
42
42
|
FormComponent: Form.Root,
|
|
43
43
|
|
|
44
44
|
// optional wrapper to inject your own hooks and components
|
|
45
45
|
// around all RhfUtilsZodForm instances
|
|
46
|
-
|
|
46
|
+
FormChildrenWrapper: (
|
|
47
47
|
// UseRhfUtilsFormChildrenProps
|
|
48
48
|
{
|
|
49
49
|
formId, // unique id string
|
|
50
50
|
formRef, // ref
|
|
51
51
|
context, // rhf UseFormReturn
|
|
52
|
-
options, // RhfUtilsFormOptions
|
|
52
|
+
options, // RhfUtilsFormOptions (with any custom props)
|
|
53
53
|
Controller, // strictly-typed controller
|
|
54
54
|
FormSubmitError, // strictly-typed error class
|
|
55
55
|
children, // RhfUtilsZodForm's Children instance
|
|
56
56
|
},
|
|
57
57
|
) => {
|
|
58
|
-
// your own hooks/behaviors
|
|
59
|
-
// (
|
|
60
|
-
useMyFormNavigationPrompt(
|
|
58
|
+
// your own hooks/behaviors controlled via custom option props
|
|
59
|
+
// (see "Extend RhfUtilsFormOptions" section for more info)
|
|
60
|
+
useMyFormNavigationPrompt({
|
|
61
|
+
enabled: !!options?.enableMyFormNavigationPrompt,
|
|
62
|
+
});
|
|
61
63
|
|
|
62
64
|
return (
|
|
63
65
|
<>
|
|
64
|
-
{/* RhfUtilsZodForm
|
|
66
|
+
{/* RhfUtilsZodForm.Children outlet (see "Component Hierarchy" section) */}
|
|
65
67
|
{children}
|
|
66
68
|
|
|
67
69
|
{/* root errors list */}
|
|
@@ -82,17 +84,18 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
82
84
|
return transformServerErrorToFormSubmitErrors(error);
|
|
83
85
|
},
|
|
84
86
|
|
|
85
|
-
//
|
|
86
|
-
|
|
87
|
+
// rhfContext.formState.errors output for debugging
|
|
88
|
+
FieldErrors: {
|
|
87
89
|
// callbacks to determine when to output information about field errors
|
|
88
90
|
// provided `FlatFieldErrorsContext` (all, fields, roots, orphans, hasOrphans)
|
|
91
|
+
// (See "Orphan Errors" section below for more info.)
|
|
89
92
|
output: {
|
|
90
93
|
// determine when to console ("debug" or "error")
|
|
91
94
|
console: ({ hasOrphans }) =>
|
|
92
|
-
// console error for reporting on prod
|
|
93
|
-
(hasOrphans && { type: 'error' }) ||
|
|
94
95
|
// facilitate local debugging of form validation
|
|
95
|
-
(import.meta.env.DEV && { type: 'debug' })
|
|
96
|
+
(import.meta.env.DEV && { type: 'debug' }) ||
|
|
97
|
+
// console error for reporting on prod
|
|
98
|
+
(hasOrphans && { type: 'error' }),
|
|
96
99
|
|
|
97
100
|
// callback to determine when to throw an error based on field errors
|
|
98
101
|
throw: ({ hasOrphans }) =>
|
|
@@ -165,15 +168,15 @@ Currently, only `zod` is supported.
|
|
|
165
168
|
<button type="submit">Login</button>
|
|
166
169
|
</>
|
|
167
170
|
)}
|
|
168
|
-
// form-specific options/overrides
|
|
171
|
+
// form-specific options/overrides (merged with defaults)
|
|
169
172
|
rhf={{
|
|
170
173
|
mode: 'onBlur',
|
|
171
174
|
}}
|
|
172
175
|
utils={{
|
|
173
176
|
submitOnChange: true,
|
|
174
|
-
|
|
175
|
-
onSuccess: 'current',
|
|
176
|
-
onError: 'defaults',
|
|
177
|
+
resetOnSubmitted: {
|
|
178
|
+
onSuccess: { values: 'current' },
|
|
179
|
+
onError: { values: 'defaults' },
|
|
177
180
|
},
|
|
178
181
|
// custom option props
|
|
179
182
|
// (see "Extend RhfUtilsFormOptions" section)
|
|
@@ -186,17 +189,9 @@ Currently, only `zod` is supported.
|
|
|
186
189
|
/>
|
|
187
190
|
```
|
|
188
191
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
The component hierarchy is:
|
|
192
|
+
### Form Children
|
|
192
193
|
|
|
193
|
-
|
|
194
|
-
<RhfUtilsClientConfig.FormComponent>
|
|
195
|
-
<RhfUtilsClientConfig.FormChildren>
|
|
196
|
-
<RhfUtilsZodForm.Children />
|
|
197
|
-
</RhfUtilsClientConfig.FormChildren>
|
|
198
|
-
</RhfUtilsClientConfig.FormComponent>
|
|
199
|
-
```
|
|
194
|
+
`Children` prop takes a component which is rendered as a child of the form (and, if supplied, of `RhfUtilsClientConfig.FormChildrenWrapper`). It receives `UseRhfUtilsFormChildrenProps` as props, including a type-safe `Controller` component.
|
|
200
195
|
|
|
201
196
|
If you prefer to define your `Children` component as standalone:
|
|
202
197
|
|
|
@@ -206,6 +201,20 @@ const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = ({ ... }) => { };
|
|
|
206
201
|
function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
|
|
207
202
|
```
|
|
208
203
|
|
|
204
|
+
## Component Hierarchy
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
<ReactHookForm.FormProvider>
|
|
208
|
+
<RhfUtilsProviders>
|
|
209
|
+
<RhfUtilsClientConfig.FormComponent>
|
|
210
|
+
<RhfUtilsClientConfig.FormChildrenWrapper>
|
|
211
|
+
<RhfUtilsZodForm.Children />
|
|
212
|
+
</RhfUtilsClientConfig.FormChildrenWrapper>
|
|
213
|
+
</RhfUtilsClientConfig.FormComponent>
|
|
214
|
+
<RhfUtilsProviders>
|
|
215
|
+
</ReactHookForm.FormProvider>
|
|
216
|
+
```
|
|
217
|
+
|
|
209
218
|
## `FormSubmitError`
|
|
210
219
|
|
|
211
220
|
This is an `Error`-based class you can use to throw a structured error in your submit handler. It is strictly-typed, so it only allows field names from your schema and `root`/`root.{string}` keys.
|
|
@@ -244,10 +253,14 @@ type RhfUtilsFormOptions = {
|
|
|
244
253
|
/** Request submit via listener on form change. */
|
|
245
254
|
submitOnChange?: boolean;
|
|
246
255
|
|
|
247
|
-
/**
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
256
|
+
/**
|
|
257
|
+
* Reset form values and state (e.g., isDirty, etc.) after submit -- on success and/or error.
|
|
258
|
+
* - `defaults`: reset current values to defaults
|
|
259
|
+
* - `current`: reset defaults to current values
|
|
260
|
+
*/
|
|
261
|
+
resetOnSubmitted?: {
|
|
262
|
+
success?: { values: 'defaults' | 'current' };
|
|
263
|
+
error?: { values: 'defaults' };
|
|
251
264
|
};
|
|
252
265
|
|
|
253
266
|
/** Control dev tool options. (Lazy-loaded when truthy value supplied.) */
|
|
@@ -282,7 +295,7 @@ You can configure via `RhfUtilsClientConfig` (example at the top) when form cont
|
|
|
282
295
|
|
|
283
296
|
Use `useFlatFieldErrorsContext()` hook, which returns an object with errors grouped by `all`, `fields`, `roots`, `orphans` records, and `hasErrors` and `hasErrors` and `hasOrphans` booleans.
|
|
284
297
|
|
|
285
|
-
###
|
|
298
|
+
### Orphan Errors
|
|
286
299
|
|
|
287
300
|
The concept of orphan errors is any error that is not being shown to user. An example would be a stray field in a schema that is prohibiting users from successfully submitting a form.
|
|
288
301
|
|
|
@@ -1,52 +1,46 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import m from "../form/FormWithProviders.mjs";
|
|
3
|
+
import l from "../form/useRhfUtilsForm.mjs";
|
|
4
|
+
import { mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps as F } from "./utils.mjs";
|
|
5
|
+
const p = (r) => (o) => {
|
|
6
|
+
const i = f(r, o);
|
|
6
7
|
return {
|
|
7
|
-
useForm: (
|
|
8
|
-
const
|
|
8
|
+
useForm: (e, t) => {
|
|
9
|
+
const s = i(e, t);
|
|
9
10
|
return {
|
|
10
|
-
...
|
|
11
|
-
FormWithProviders: () => /* @__PURE__ */
|
|
11
|
+
...l(s),
|
|
12
|
+
FormWithProviders: () => /* @__PURE__ */ n(m, { ...s })
|
|
12
13
|
};
|
|
13
14
|
},
|
|
14
|
-
FormWithProviders:
|
|
15
|
+
FormWithProviders: u(r, o)
|
|
15
16
|
};
|
|
16
|
-
},
|
|
17
|
-
var o, i, f, l, n, h;
|
|
17
|
+
}, f = (r, o) => function(e, t) {
|
|
18
18
|
return {
|
|
19
19
|
...t,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
form: {
|
|
31
|
-
...(f = r.defaults) == null ? void 0 : f.form,
|
|
32
|
-
...t.form,
|
|
33
|
-
className: [(n = (l = r.defaults) == null ? void 0 : l.form) == null ? void 0 : n.className, (h = t.form) == null ? void 0 : h.className].filter(Boolean).join(" ")
|
|
34
|
-
}
|
|
20
|
+
...F(
|
|
21
|
+
o.defaults,
|
|
22
|
+
t,
|
|
23
|
+
{
|
|
24
|
+
rhf: {
|
|
25
|
+
resolver: r(e)
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
)
|
|
35
29
|
};
|
|
36
|
-
},
|
|
37
|
-
schema:
|
|
30
|
+
}, u = (r, o) => function({
|
|
31
|
+
schema: e,
|
|
38
32
|
children: t,
|
|
39
|
-
...
|
|
33
|
+
...s
|
|
40
34
|
}) {
|
|
41
|
-
const
|
|
42
|
-
return /* @__PURE__ */
|
|
43
|
-
|
|
35
|
+
const h = f(r, o);
|
|
36
|
+
return /* @__PURE__ */ n(
|
|
37
|
+
m,
|
|
44
38
|
{
|
|
45
|
-
...
|
|
39
|
+
...h(e, s),
|
|
46
40
|
children: t
|
|
47
41
|
}
|
|
48
42
|
);
|
|
49
43
|
};
|
|
50
44
|
export {
|
|
51
|
-
|
|
45
|
+
p as createRhfUtilsClient
|
|
52
46
|
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const i = (l, ...t) => t.reduce(
|
|
2
|
+
(s, e) => {
|
|
3
|
+
var f, o;
|
|
4
|
+
return {
|
|
5
|
+
rhf: {
|
|
6
|
+
...s == null ? void 0 : s.rhf,
|
|
7
|
+
...e.rhf
|
|
8
|
+
},
|
|
9
|
+
utils: {
|
|
10
|
+
...s == null ? void 0 : s.utils,
|
|
11
|
+
...e.utils
|
|
12
|
+
},
|
|
13
|
+
form: {
|
|
14
|
+
...s == null ? void 0 : s.form,
|
|
15
|
+
...e.form,
|
|
16
|
+
className: [(f = s == null ? void 0 : s.form) == null ? void 0 : f.className, (o = e.form) == null ? void 0 : o.className].filter(Boolean).join(" ")
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
},
|
|
20
|
+
l
|
|
21
|
+
);
|
|
22
|
+
export {
|
|
23
|
+
i as mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps
|
|
24
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import m from "../isFieldErrorRefd.mjs";
|
|
2
|
-
import
|
|
2
|
+
import t from "../nonfield/isNonFieldErrorMarkerInDOM.mjs";
|
|
3
3
|
import e from "../root/isFormErrorPathRoot.mjs";
|
|
4
4
|
const d = (r, o, i) => (
|
|
5
5
|
// not root path
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { TRPCClientError as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { TRPCClientError as n } from "@trpc/client";
|
|
2
|
+
import e from "./trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
|
|
3
|
+
const o = (t) => (r) => r instanceof n ? e.parse(r) : t(r), a = o;
|
|
4
4
|
export {
|
|
5
|
-
|
|
5
|
+
a as default
|
|
6
6
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TRPCClientError as o } from "@trpc/client";
|
|
2
2
|
import { z as e } from "zod";
|
|
3
|
-
import
|
|
3
|
+
import a from "./trpcClientErrorMessageSchema.mjs";
|
|
4
4
|
const i = e.custom(
|
|
5
5
|
(r) => r instanceof o
|
|
6
6
|
// check instance type
|
|
@@ -30,5 +30,5 @@ const i = e.custom(
|
|
|
30
30
|
)
|
|
31
31
|
).transform((r) => Object.fromEntries(r));
|
|
32
32
|
export {
|
|
33
|
-
i as
|
|
33
|
+
i as default
|
|
34
34
|
};
|
package/dist/esm/exports.mjs
CHANGED
|
@@ -6,8 +6,8 @@ import { default as d } from "./errors/flat/context/useFlatFieldErrorsContextHas
|
|
|
6
6
|
import { default as x } from "./errors/message/FormErrorMessageByPath.mjs";
|
|
7
7
|
import { default as F } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
|
|
8
8
|
import { default as C } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
9
|
+
import { default as E } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
|
|
10
|
+
import { default as c } from "./errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
|
|
11
11
|
import { default as R } from "./form/context/utils/useRhfUtilsContext.mjs";
|
|
12
12
|
import { default as y } from "./form/context/utils/useRhfUtilsContextRequestSubmit.mjs";
|
|
13
13
|
import { default as T } from "./form/context/group/FormGroupContextProvider.mjs";
|
package/dist/esm/form/Form.mjs
CHANGED
|
@@ -6,8 +6,8 @@ import E from "../devtool/LazyDevTool.mjs";
|
|
|
6
6
|
import { FormSubmitError as s } from "../submit/error/FormSubmitError.mjs";
|
|
7
7
|
import S from "../submit/error/setCtxErrorsByFormSubmitErrors.mjs";
|
|
8
8
|
import U from "../utils/PassthroughChildren.mjs";
|
|
9
|
-
import
|
|
10
|
-
function
|
|
9
|
+
import W from "./_Controller.mjs";
|
|
10
|
+
function A({
|
|
11
11
|
formId: p,
|
|
12
12
|
formRef: m,
|
|
13
13
|
//
|
|
@@ -19,24 +19,24 @@ function G({
|
|
|
19
19
|
form: F,
|
|
20
20
|
utils: r
|
|
21
21
|
}) {
|
|
22
|
-
const
|
|
22
|
+
const e = j(), t = w(), y = async (o) => {
|
|
23
23
|
r != null && r.stopSubmitPropagation && o.stopPropagation();
|
|
24
24
|
try {
|
|
25
|
-
await
|
|
26
|
-
} catch (
|
|
27
|
-
b(
|
|
25
|
+
await e.handleSubmit(f, i)(o);
|
|
26
|
+
} catch (n) {
|
|
27
|
+
b(n, o);
|
|
28
28
|
}
|
|
29
|
-
}, f = (o,
|
|
29
|
+
}, f = (o, n) => a == null ? void 0 : a(
|
|
30
30
|
o,
|
|
31
31
|
{
|
|
32
32
|
formId: p,
|
|
33
33
|
formRef: m,
|
|
34
|
-
context:
|
|
34
|
+
context: e,
|
|
35
35
|
utils: r,
|
|
36
36
|
FormSubmitError: s
|
|
37
37
|
},
|
|
38
|
-
|
|
39
|
-
), b = (o,
|
|
38
|
+
n
|
|
39
|
+
), b = (o, n) => {
|
|
40
40
|
var x;
|
|
41
41
|
const C = o instanceof s ? (
|
|
42
42
|
// consumer can manually throw FormSubmitError (e.g., manual validation)
|
|
@@ -45,24 +45,24 @@ function G({
|
|
|
45
45
|
// if error is not FormSubmitError, consumer can provide global handler
|
|
46
46
|
(x = t == null ? void 0 : t.onSubmitUnknownError) == null ? void 0 : x.call(t, o)
|
|
47
47
|
);
|
|
48
|
-
C && S(
|
|
48
|
+
C && S(e, C), d == null || d(
|
|
49
49
|
o,
|
|
50
50
|
{
|
|
51
51
|
formId: p,
|
|
52
52
|
formRef: m,
|
|
53
|
-
context:
|
|
53
|
+
context: e,
|
|
54
54
|
utils: r
|
|
55
55
|
},
|
|
56
|
-
|
|
56
|
+
n
|
|
57
57
|
);
|
|
58
58
|
}, c = {
|
|
59
59
|
formId: p,
|
|
60
60
|
formRef: m,
|
|
61
|
-
context:
|
|
61
|
+
context: e,
|
|
62
62
|
utils: r,
|
|
63
|
-
Controller:
|
|
63
|
+
Controller: W,
|
|
64
64
|
FormSubmitError: s
|
|
65
|
-
}, v = (t == null ? void 0 : t.FormComponent) ?? "form", P = (t == null ? void 0 : t.
|
|
65
|
+
}, v = (t == null ? void 0 : t.FormComponent) ?? "form", P = (t == null ? void 0 : t.FormChildrenWrapper) ?? U;
|
|
66
66
|
return /* @__PURE__ */ h(
|
|
67
67
|
v,
|
|
68
68
|
{
|
|
@@ -82,5 +82,5 @@ function G({
|
|
|
82
82
|
);
|
|
83
83
|
}
|
|
84
84
|
export {
|
|
85
|
-
|
|
85
|
+
A as default
|
|
86
86
|
};
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
2
|
import d from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
3
|
+
import f from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
|
|
4
|
+
import i from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
|
|
5
5
|
import x from "../../../submit/useResetFormOnSubmitted.mjs";
|
|
6
6
|
import F from "../../../submit/useSubmitFormOnChange.mjs";
|
|
7
7
|
import { _RhfUtilsContextProvider as O } from "./useRhfUtilsContext.mjs";
|
|
8
8
|
const P = ({
|
|
9
|
-
formId:
|
|
9
|
+
formId: l,
|
|
10
10
|
formRef: m,
|
|
11
11
|
onSubmitSuccessfulAndReset: t,
|
|
12
12
|
options: r,
|
|
13
|
-
children:
|
|
13
|
+
children: C
|
|
14
14
|
}) => {
|
|
15
15
|
var a;
|
|
16
16
|
const e = d();
|
|
17
|
-
return
|
|
17
|
+
return f((a = e == null ? void 0 : e.FieldErrors) == null ? void 0 : a.output), F(m, {
|
|
18
18
|
disabled: !(r != null && r.submitOnChange)
|
|
19
19
|
}), x(
|
|
20
|
-
(r == null ? void 0 : r.
|
|
21
|
-
|
|
20
|
+
(r == null ? void 0 : r.resetOnSubmitted) ?? (t && {
|
|
21
|
+
success: { values: "defaults" }
|
|
22
22
|
})
|
|
23
|
-
),
|
|
23
|
+
), i(() => {
|
|
24
24
|
t == null || t();
|
|
25
|
-
}), /* @__PURE__ */
|
|
25
|
+
}), /* @__PURE__ */ u(O, { value: { formId: l, formRef: m, options: r }, children: C });
|
|
26
26
|
};
|
|
27
27
|
export {
|
|
28
28
|
P as default
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import f from "react";
|
|
2
2
|
import { useFormState as i } from "react-hook-form";
|
|
3
|
-
import
|
|
4
|
-
const n = (
|
|
5
|
-
const { isDirty:
|
|
3
|
+
import m from "../utils/useRefIfValueWasTrue.mjs";
|
|
4
|
+
const n = (s) => {
|
|
5
|
+
const { isDirty: t, isSubmitSuccessful: e } = i(), [u, r] = m(e);
|
|
6
6
|
f.useEffect(() => {
|
|
7
|
-
|
|
8
|
-
}, [e,
|
|
7
|
+
s && (t || (e || u) && (s(), r()));
|
|
8
|
+
}, [e, t]);
|
|
9
9
|
};
|
|
10
10
|
export {
|
|
11
11
|
n as default
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import u from "react";
|
|
2
2
|
import { useFormState as o } from "react-hook-form";
|
|
3
|
-
import
|
|
3
|
+
import m from "../utils/useRefIfValueWasTrue.mjs";
|
|
4
4
|
const c = (e, f) => {
|
|
5
5
|
const { isSubmitSuccessful: i, isSubmitting: t } = o(), [r, s] = m(t);
|
|
6
6
|
u.useEffect(() => {
|
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
import { useFormContext as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
4
|
-
const { reset:
|
|
5
|
-
|
|
1
|
+
import { useFormContext as c } from "react-hook-form";
|
|
2
|
+
import i from "./useFormOnSubmitted.mjs";
|
|
3
|
+
const f = (e) => {
|
|
4
|
+
const { reset: u, getValues: s } = c();
|
|
5
|
+
i((o) => {
|
|
6
|
+
var r;
|
|
6
7
|
if (!e) return;
|
|
7
|
-
const t = e[
|
|
8
|
+
const t = (r = e[o ? "success" : "error"]) == null ? void 0 : r.values;
|
|
8
9
|
if (!t) return;
|
|
9
|
-
const
|
|
10
|
-
|
|
10
|
+
const m = t === "current" ? s() : void 0;
|
|
11
|
+
u(m, {
|
|
11
12
|
// keep submit stuff for tracking relevant state (e.g., `useFormOnSubmitSuccessful`)
|
|
12
13
|
keepIsSubmitSuccessful: !0,
|
|
13
14
|
keepIsSubmitted: !0,
|
|
14
15
|
keepSubmitCount: !0,
|
|
16
|
+
// keep errors in the case of unsuccessful submit
|
|
15
17
|
keepErrors: !0
|
|
16
18
|
});
|
|
17
19
|
});
|
|
18
20
|
};
|
|
19
21
|
export {
|
|
20
|
-
|
|
22
|
+
f as default
|
|
21
23
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import t from "react";
|
|
2
|
-
const
|
|
2
|
+
const f = (r) => {
|
|
3
3
|
const e = t.useRef(!1);
|
|
4
4
|
t.useEffect(() => {
|
|
5
5
|
r && (e.current = !0);
|
|
@@ -10,5 +10,5 @@ const u = (r) => {
|
|
|
10
10
|
return [e.current, s];
|
|
11
11
|
};
|
|
12
12
|
export {
|
|
13
|
-
|
|
13
|
+
f as default
|
|
14
14
|
};
|
|
@@ -45,7 +45,7 @@ export type RhfUtilsClientConfig = {
|
|
|
45
45
|
* - custom hooks/behaviors based on `options`
|
|
46
46
|
* - shared header, footer
|
|
47
47
|
*/
|
|
48
|
-
|
|
48
|
+
FormChildrenWrapper?: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(props: React.PropsWithChildren<UseRhfUtilsFormChildrenProps<TFieldValues, TTransformedValues>>) => React.ReactNode;
|
|
49
49
|
/**
|
|
50
50
|
* Global submit error handler when/if submit handler throws an error other than {@link FormSubmitError}.
|
|
51
51
|
*
|
|
@@ -57,7 +57,7 @@ export type RhfUtilsClientConfig = {
|
|
|
57
57
|
* - if `undefined`: do nothing.
|
|
58
58
|
*/
|
|
59
59
|
onSubmitUnknownError?: (error: unknown) => FormSubmitErrors | undefined;
|
|
60
|
-
|
|
60
|
+
FieldErrors?: {
|
|
61
61
|
/**
|
|
62
62
|
* Configure how/if errors should be outputted.
|
|
63
63
|
*/
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { SafeFieldValues } from '../form/SafeFieldValues';
|
|
2
|
+
import { UseRhfUtilsFormProps } from '../form/UseRhfUtilsFormProps';
|
|
3
|
+
import { RhfUtilsClientConfig } from './config/RhfUtilsClientConfig';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Merge {@link RhfUtilsClientConfig.defaults} with array of {@link UseRhfUtilsFormProps}'s overrides.
|
|
7
|
+
*/
|
|
8
|
+
export declare const mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(defaults: RhfUtilsClientConfig['defaults'], ...props: Pick<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>, 'rhf' | 'utils' | 'form'>[]) => {
|
|
9
|
+
rhf?: Pick<Partial<{
|
|
10
|
+
mode: "onChange" | "onBlur" | "onSubmit" | "onTouched" | "all";
|
|
11
|
+
disabled: boolean;
|
|
12
|
+
reValidateMode: "onChange" | "onBlur" | "onSubmit";
|
|
13
|
+
defaultValues: ((payload?: unknown) => Promise<import('react-hook-form').FieldValues>) | {
|
|
14
|
+
[x: string]: any;
|
|
15
|
+
};
|
|
16
|
+
values: import('react-hook-form').FieldValues;
|
|
17
|
+
errors: import('react-hook-form').FieldErrors<import('react-hook-form').FieldValues>;
|
|
18
|
+
resetOptions: Partial<{
|
|
19
|
+
keepDirtyValues: boolean;
|
|
20
|
+
keepErrors: boolean;
|
|
21
|
+
keepDirty: boolean;
|
|
22
|
+
keepValues: boolean;
|
|
23
|
+
keepDefaultValues: boolean;
|
|
24
|
+
keepIsSubmitted: boolean;
|
|
25
|
+
keepIsSubmitSuccessful: boolean;
|
|
26
|
+
keepTouched: boolean;
|
|
27
|
+
keepIsValidating: boolean;
|
|
28
|
+
keepIsValid: boolean;
|
|
29
|
+
keepSubmitCount: boolean;
|
|
30
|
+
}> | undefined;
|
|
31
|
+
resolver: import('react-hook-form').Resolver<import('react-hook-form').FieldValues, any>;
|
|
32
|
+
context: any;
|
|
33
|
+
shouldFocusError: boolean;
|
|
34
|
+
shouldUnregister: boolean;
|
|
35
|
+
shouldUseNativeValidation: boolean;
|
|
36
|
+
progressive: boolean;
|
|
37
|
+
criteriaMode: import('react-hook-form').CriteriaMode;
|
|
38
|
+
delayError: number;
|
|
39
|
+
}>, "shouldUnregister" | "mode" | "reValidateMode" | "resetOptions" | "context" | "shouldFocusError" | "shouldUseNativeValidation" | "progressive" | "criteriaMode" | "delayError"> | undefined;
|
|
40
|
+
utils?: {
|
|
41
|
+
stopSubmitPropagation?: boolean | undefined;
|
|
42
|
+
submitOnChange?: boolean | undefined;
|
|
43
|
+
resetOnSubmitted?: import('../submit/useResetFormOnSubmitted').UseResetFormOnSubmittedOptions;
|
|
44
|
+
devTool?: true | Pick<import('@hookform/devtools/dist/devToolUI').DevtoolUIProps, "placement" | "styles"> | undefined;
|
|
45
|
+
} | undefined;
|
|
46
|
+
form?: Omit<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onSubmit"> | undefined;
|
|
47
|
+
} | undefined;
|
|
@@ -2,4 +2,5 @@
|
|
|
2
2
|
* Determine if a non-field error marker is in the DOM.
|
|
3
3
|
* Note: this will also look for nested markers to accommodate field arrays
|
|
4
4
|
*/
|
|
5
|
-
|
|
5
|
+
declare const isNonFieldErrorMarkerInDOM: (path: string, parentElement: Pick<HTMLElement, 'querySelector'>) => boolean;
|
|
6
|
+
export default isNonFieldErrorMarkerInDOM;
|
|
@@ -7,4 +7,5 @@ import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
|
|
|
7
7
|
* @param onError Fallback for handling non-TRPC errors.
|
|
8
8
|
* @returns FormSubmitError
|
|
9
9
|
*/
|
|
10
|
-
|
|
10
|
+
declare const getOnSubmitTrpcClientErrorHandler: (onNotTrpcClientError: NonNullable<RhfUtilsClientConfig['onSubmitUnknownError']>) => (error: unknown) => FormSubmitErrors | undefined;
|
|
11
|
+
export default getOnSubmitTrpcClientErrorHandler;
|
|
@@ -5,7 +5,7 @@ import { z } from 'zod';
|
|
|
5
5
|
*
|
|
6
6
|
* (Sent from backend as JSON string.)
|
|
7
7
|
*/
|
|
8
|
-
|
|
8
|
+
declare const trpcClientErrorMessageSchema: z.ZodObject<{
|
|
9
9
|
validation: z.ZodString;
|
|
10
10
|
code: z.ZodString;
|
|
11
11
|
message: z.ZodString;
|
|
@@ -21,3 +21,4 @@ export declare const trpcClientErrorMessageSchema: z.ZodObject<{
|
|
|
21
21
|
path: string[];
|
|
22
22
|
validation: string;
|
|
23
23
|
}>;
|
|
24
|
+
export default trpcClientErrorMessageSchema;
|
|
@@ -6,7 +6,7 @@ import { FormSubmitErrors } from '../../submit/error/FormSubmitErrors';
|
|
|
6
6
|
/**
|
|
7
7
|
* Schema that transforms {@link TRPCClientError} to RHF {@link FormSubmitErrors}.
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
declare const trpcClientErrorToFormSubmitErrorsSchemaTransformer: z.ZodEffects<z.ZodEffects<z.ZodPipeline<z.ZodEffects<z.ZodEffects<z.ZodType<TRPCClientErrorLike<AnyRouter>, z.ZodTypeDef, TRPCClientErrorLike<AnyRouter>>, string, TRPCClientErrorLike<AnyRouter>>, unknown, TRPCClientErrorLike<AnyRouter>>, z.ZodArray<z.ZodObject<{
|
|
10
10
|
validation: z.ZodString;
|
|
11
11
|
code: z.ZodString;
|
|
12
12
|
message: z.ZodString;
|
|
@@ -25,3 +25,4 @@ export declare const trpcClientErrorToFormSubmitErrorsSchemaTransformer: z.ZodEf
|
|
|
25
25
|
type: string;
|
|
26
26
|
message: string;
|
|
27
27
|
}])[], TRPCClientErrorLike<AnyRouter>>, FormSubmitErrors, TRPCClientErrorLike<AnyRouter>>;
|
|
28
|
+
export default trpcClientErrorToFormSubmitErrorsSchemaTransformer;
|
package/dist/types/exports.d.ts
CHANGED
|
@@ -10,8 +10,8 @@ export { default as useFlatFieldErrorsContextHasOnlyOrphans } from './errors/fla
|
|
|
10
10
|
export { default as FormErrorMessageByPath } from './errors/message/FormErrorMessageByPath';
|
|
11
11
|
export { default as FormNonFieldErrorMarker } from './errors/nonfield/FormNonFieldErrorMarker';
|
|
12
12
|
export { default as RootErrorsListFromFlatFieldErrorsContext } from './errors/root/RootErrorsListFromFlatFieldErrorsContext';
|
|
13
|
-
export { getOnSubmitTrpcClientErrorHandler } from './errors/trpc/getOnSubmitTrpcClientErrorHandler';
|
|
14
|
-
export { trpcClientErrorToFormSubmitErrorsSchemaTransformer } from './errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer';
|
|
13
|
+
export { default as getOnSubmitTrpcClientErrorHandler } from './errors/trpc/getOnSubmitTrpcClientErrorHandler';
|
|
14
|
+
export { default as trpcClientErrorToFormSubmitErrorsSchemaTransformer } from './errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer';
|
|
15
15
|
export type { RhfUtilsFormOptions } from './form/RhfUtilsFormOptions';
|
|
16
16
|
export type { SafeFieldValues } from './form/SafeFieldValues';
|
|
17
17
|
export type { UseRhfUtilsFormChildrenProps } from './form/UseRhfUtilsFormChildrenProps';
|
|
@@ -12,8 +12,8 @@ export type RhfUtilsFormOptions = {
|
|
|
12
12
|
stopSubmitPropagation?: boolean;
|
|
13
13
|
/** Request submit via listener on form change. */
|
|
14
14
|
submitOnChange?: boolean;
|
|
15
|
-
/** Reset form after submit. */
|
|
16
|
-
|
|
15
|
+
/** Reset form values and state (e.g., `isDirty`) after submit -- on success and/or error. */
|
|
16
|
+
resetOnSubmitted?: UseResetFormOnSubmittedOptions;
|
|
17
17
|
/**
|
|
18
18
|
* Control dev tool options.
|
|
19
19
|
* (Lazy-loaded when truthy value supplied.
|
|
@@ -1,21 +1,34 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Configuration for
|
|
3
|
-
* - `undefined`: disabled
|
|
2
|
+
* Configuration options for {@link useResetFormOnSubmitted}.
|
|
4
3
|
*/
|
|
5
4
|
export type UseResetFormOnSubmittedOptions = undefined | {
|
|
6
5
|
/**
|
|
7
|
-
* Reset values on submit
|
|
8
|
-
* - `
|
|
9
|
-
* - `
|
|
6
|
+
* Reset values on successful submit.
|
|
7
|
+
* - `defaults`: reset current values to defaults
|
|
8
|
+
* - `current`: reset defaults to current values
|
|
10
9
|
*/
|
|
11
|
-
|
|
10
|
+
success?: {
|
|
11
|
+
values: 'defaults' | 'current';
|
|
12
|
+
};
|
|
12
13
|
/**
|
|
13
|
-
* Reset values on submit error.
|
|
14
|
+
* Reset values to defaults on submit error.
|
|
14
15
|
*/
|
|
15
|
-
|
|
16
|
+
error?: {
|
|
17
|
+
values: 'defaults';
|
|
18
|
+
};
|
|
16
19
|
};
|
|
17
20
|
/**
|
|
18
|
-
*
|
|
21
|
+
* Control resetting of values and (some) state (e.g., `isDirty`) after form submitted.
|
|
22
|
+
*
|
|
23
|
+
* `isDirty` and other state is reset, but submit-related state is preserved, as well as errors.
|
|
24
|
+
*
|
|
25
|
+
* Use cases:
|
|
26
|
+
* - on success:
|
|
27
|
+
* - `defaults`: clear form (reset current values to defaults)
|
|
28
|
+
* - `current`: reset defaults to current values
|
|
29
|
+
* - on error:
|
|
30
|
+
* - reset current values to default values (e.g., submitOnChange reset)
|
|
31
|
+
*
|
|
19
32
|
* See `Rules` section: https://react-hook-form.com/api/useform/reset/
|
|
20
33
|
* Specifically: "- It's recommended to reset inside useEffect after submission."
|
|
21
34
|
*/
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
declare const useRefIfValueWasTrue: (value: boolean) => readonly [boolean, () => void];
|
|
2
|
+
export default useRefIfValueWasTrue;
|
package/package.json
CHANGED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { UseRhfUtilsFormProps } from '../../form/UseRhfUtilsFormProps';
|
|
2
|
-
import { ZodTypeFieldValues } from './ZodTypeFieldValues';
|
|
3
|
-
|
|
4
|
-
type Props<TSchema extends ZodTypeFieldValues> = {
|
|
5
|
-
schema: TSchema;
|
|
6
|
-
} & Omit<UseRhfUtilsFormProps<TSchema['_input'], TSchema['_output']>, 'config'>;
|
|
7
|
-
declare function RhfUtilsZodForm<TSchema extends ZodTypeFieldValues>({ schema, ...props }: Props<TSchema>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export default RhfUtilsZodForm;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { UseFormProps } from '../../../form/useForm';
|
|
2
|
-
import { ZodTypeFieldValues } from '../createRhfUtilsClientForZod';
|
|
3
|
-
|
|
4
|
-
type Props<TSchema extends ZodTypeFieldValues> = {
|
|
5
|
-
schema: TSchema;
|
|
6
|
-
} & Omit<UseFormProps<TSchema['_input'], TSchema['_output']>, 'config'>;
|
|
7
|
-
declare function RhfUtilsZodFormWithProviders<TSchema extends ZodTypeFieldValues>({ schema, ...props }: Props<TSchema>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export default RhfUtilsZodFormWithProviders;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { FieldErrors } from 'react-hook-form';
|
|
2
|
-
import { SafeFieldValues } from '../form/SafeFieldValues';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Output form values and errors to console.
|
|
6
|
-
*/
|
|
7
|
-
declare const consoleErrors: (message: string, form: {
|
|
8
|
-
values: SafeFieldValues;
|
|
9
|
-
errors: FieldErrors;
|
|
10
|
-
}, options?: {
|
|
11
|
-
other?: Record<string, unknown>;
|
|
12
|
-
isError?: boolean;
|
|
13
|
-
}) => void;
|
|
14
|
-
export default consoleErrors;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { FieldErrors } from 'react-hook-form';
|
|
2
|
-
import { FlatFieldErrors } from './types';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Use {@link FieldErrors} with `ref`s as {@link FlatFieldErrors}.
|
|
6
|
-
*/
|
|
7
|
-
declare const useRefdFieldErrorsMemo: () => FlatFieldErrors;
|
|
8
|
-
export default useRefdFieldErrorsMemo;
|
|
9
|
-
export declare const getFlatFieldFormErrors: (errors: FieldErrors) => FlatFieldErrors;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { FieldErrors } from 'react-hook-form';
|
|
2
|
-
import { FlatFieldErrors } from '../flat/types';
|
|
3
|
-
|
|
4
|
-
declare const getOrphansFromFieldErrors: (errors: FieldErrors, parentElement: Pick<HTMLElement, 'querySelector'>) => FlatFieldErrors;
|
|
5
|
-
export default getOrphansFromFieldErrors;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Determined if there are orphan errors and no field errors.
|
|
3
|
-
* (May be useful when reporting or displaying a specific message to user.)
|
|
4
|
-
*/
|
|
5
|
-
declare const useFormHasOnlyOrphanFieldErrorsMemo: (formRef: React.RefObject<HTMLFormElement>) => boolean;
|
|
6
|
-
export default useFormHasOnlyOrphanFieldErrorsMemo;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Get {@link FlatFieldErrors} of only orphans.
|
|
5
|
-
* @param formRef Parent DOM element to look for non-field error markers.
|
|
6
|
-
* @returns Memoized {@link FlatFieldErrors} of only orphans.
|
|
7
|
-
*/
|
|
8
|
-
declare const useOrphanFormErrorsMemo: (formRef: React.RefObject<HTMLFormElement>) => import('../flat/types').FlatFieldErrors;
|
|
9
|
-
export default useOrphanFormErrorsMemo;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Logs out orphan errors to console.error.
|
|
5
|
-
*
|
|
6
|
-
* In development, it will also throw an error to bring attention to dev.
|
|
7
|
-
*/
|
|
8
|
-
declare const useOrphanFormErrorsToConsole: (formRef: React.RefObject<HTMLFormElement>, enabled?: boolean) => void;
|
|
9
|
-
export default useOrphanFormErrorsToConsole;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { FieldErrors } from 'react-hook-form';
|
|
2
|
-
import { SafeFieldValues } from '../form/SafeFieldValues';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Output form values and errors to console and throw in dev.
|
|
6
|
-
*/
|
|
7
|
-
declare const outputErrors: (message: string, form: {
|
|
8
|
-
values: SafeFieldValues;
|
|
9
|
-
errors: FieldErrors;
|
|
10
|
-
}, options?: {
|
|
11
|
-
other?: Record<string, unknown>;
|
|
12
|
-
isError?: boolean;
|
|
13
|
-
}) => void;
|
|
14
|
-
export default outputErrors;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Output form errors to console.debug() for easier debugging for certain condition.
|
|
3
|
-
* (e.g., in dev/staging environments or certain users)
|
|
4
|
-
*
|
|
5
|
-
* `console.debug()` is unlikely to trigger any automated console capture reporting.
|
|
6
|
-
*/
|
|
7
|
-
declare const useFormErrorConsoleDebug: (enabled?: boolean) => void;
|
|
8
|
-
export default useFormErrorConsoleDebug;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns errors only if there are errors.
|
|
3
|
-
* Allows simple typeguard without `isEmpty` dependency.
|
|
4
|
-
*/
|
|
5
|
-
declare const useFormErrorsIfAny: () => false | import('react-hook-form').FieldErrors<import('react-hook-form').FieldValues>;
|
|
6
|
-
export default useFormErrorsIfAny;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { FlatFieldErrors } from './flat/types';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Logs out orphan errors to console.error.
|
|
5
|
-
*
|
|
6
|
-
* In development, it will also throw an error to bring attention to dev.
|
|
7
|
-
*/
|
|
8
|
-
declare const useFormErrorsToConsole: (message: string, flatErrors: FlatFieldErrors, options?: {
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
isError?: boolean;
|
|
11
|
-
data?: Record<string, unknown>;
|
|
12
|
-
}) => void;
|
|
13
|
-
export default useFormErrorsToConsole;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { FieldErrors } from 'react-hook-form';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Create transformed memoized form errors value.
|
|
5
|
-
*/
|
|
6
|
-
declare const useFormErrorsTransformMemo: <TTransformedReturn>(transform: (errors: FieldErrors) => TTransformedReturn) => TTransformedReturn;
|
|
7
|
-
export default useFormErrorsTransformMemo;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Get callback to trigger submit manually on form.
|
|
3
|
-
* @link https://developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit
|
|
4
|
-
*/
|
|
5
|
-
declare const useFormRequestSubmit: (ref: React.RefObject<HTMLFormElement>) => HTMLFormElement['requestSubmit'];
|
|
6
|
-
export default useFormRequestSubmit;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { UseFormReturn } from 'react-hook-form';
|
|
2
|
-
import { RhfUtilsFormOptions } from './RhfUtilsFormOptions';
|
|
3
|
-
import { SafeFieldValues } from './SafeFieldValues';
|
|
4
|
-
|
|
5
|
-
export type FormProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<{
|
|
6
|
-
formId: string;
|
|
7
|
-
formRef: React.RefObject<HTMLFormElement>;
|
|
8
|
-
rhfForm: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
9
|
-
utils?: RhfUtilsFormOptions;
|
|
10
|
-
}>;
|
|
11
|
-
declare function FormProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, rhfForm, utils, children, }: FormProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export default FormProviders;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
|
|
3
|
-
export type FormBaseProps = React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>> & {
|
|
4
|
-
Component?: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>>>;
|
|
5
|
-
formRef: React.RefObject<HTMLFormElement>;
|
|
6
|
-
};
|
|
7
|
-
declare const _FormBase: React.FC<FormBaseProps>;
|
|
8
|
-
export default _FormBase;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { RhfUtilsFormOptions } from '../../RhfUtilsFormOptions';
|
|
2
|
-
|
|
3
|
-
type Props = React.PropsWithChildren<{
|
|
4
|
-
formId: string;
|
|
5
|
-
formRef: React.RefObject<HTMLFormElement>;
|
|
6
|
-
/** Callback after successful submit, and form reset. */
|
|
7
|
-
onSubmitSuccessfulAndReset?: () => void;
|
|
8
|
-
options?: RhfUtilsFormOptions;
|
|
9
|
-
}>;
|
|
10
|
-
declare function FormUtilsContextProvider({ formId, formRef, onSubmitSuccessfulAndReset, options, children, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export default FormUtilsContextProvider;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { RhfUtilsFormOptions } from '../../RhfUtilsFormOptions';
|
|
2
|
-
|
|
3
|
-
export type FormUtilsContext = {
|
|
4
|
-
formId: string;
|
|
5
|
-
formRef: React.RefObject<HTMLFormElement>;
|
|
6
|
-
options: RhfUtilsFormOptions | undefined;
|
|
7
|
-
/** Callback to trigger submit manually -- e.g., on change. */
|
|
8
|
-
requestSubmit: HTMLFormElement['requestSubmit'];
|
|
9
|
-
};
|
|
10
|
-
declare const useFormUtilsContext: () => FormUtilsContext, _FormUtilsContextProvider: import('react').Provider<FormUtilsContext | undefined>;
|
|
11
|
-
export default useFormUtilsContext;
|
|
12
|
-
export { _FormUtilsContextProvider };
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { SubmitErrorHandler, UseFormProps as RhfUseFormProps, UseFormReturn as RhfUseFormReturn } from 'react-hook-form';
|
|
3
|
-
import { FormSubmitError } from '../submit/error/FormSubmitError';
|
|
4
|
-
import { default as _Controller } from './_Controller';
|
|
5
|
-
import { FormProps } from './Form';
|
|
6
|
-
import { FormProvidersProps } from './FormProviders';
|
|
7
|
-
import { RhfUtilsFormOptions } from './RhfUtilsFormOptions';
|
|
8
|
-
import { SafeFieldValues } from './SafeFieldValues';
|
|
9
|
-
|
|
10
|
-
export type UseFormFieldsProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = SafeFieldValues> = {
|
|
11
|
-
formId: string;
|
|
12
|
-
formRef: React.RefObject<HTMLFormElement>;
|
|
13
|
-
context: RhfUseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
14
|
-
utils?: RhfUtilsFormOptions;
|
|
15
|
-
Controller: typeof _Controller<TFieldValues>;
|
|
16
|
-
};
|
|
17
|
-
export type UseFormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = {
|
|
18
|
-
onSubmit?: (values: TTransformedValues, context: RhfUseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => unknown | Promise<unknown>;
|
|
19
|
-
/** Submit error handler. (Only for errors not of instance `FormError`, which are handled internally.) */
|
|
20
|
-
onSubmitError?: (error: unknown, context: RhfUseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => void;
|
|
21
|
-
/** Submit handler when form is invalid. */
|
|
22
|
-
onSubmitInvalid?: SubmitErrorHandler<TFieldValues>;
|
|
23
|
-
defaultValues?: RhfUseFormProps<TFieldValues>['defaultValues'];
|
|
24
|
-
Fields?: React.FC<UseFormFieldsProps<TFieldValues, TTransformedValues>>;
|
|
25
|
-
/** {@link RhfUseFormProps} props for RHF's {@link useRhfForm}. */
|
|
26
|
-
rhf?: Omit<RhfUseFormProps<TFieldValues>, 'defaultValues'>;
|
|
27
|
-
/** {@link FormProps} props for Form. */
|
|
28
|
-
form?: React.PropsWithoutRef<JSX.IntrinsicElements['form']>;
|
|
29
|
-
/** {@link RhfUtilsFormOptions} to enabled utils functionality. */
|
|
30
|
-
utils?: RhfUtilsFormOptions;
|
|
31
|
-
};
|
|
32
|
-
export type UseFormReturn<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = {
|
|
33
|
-
id: string;
|
|
34
|
-
ref: React.RefObject<HTMLFormElement>;
|
|
35
|
-
context: RhfUseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
36
|
-
providerProps: FormProvidersProps<TFieldValues, TTransformedValues>;
|
|
37
|
-
formProps: FormProps<TFieldValues, TTransformedValues>;
|
|
38
|
-
FormSubmitError: typeof FormSubmitError<TFieldValues>;
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Core Rhf Form hook. Use `Form` in `index.ts` for most cases.
|
|
42
|
-
* Use this if you need to separate form components.
|
|
43
|
-
* e.g., a form for table row due to `form` being considered invalid HTML around `tr` tags.
|
|
44
|
-
* With this hook, you can wrap the `tr` tag with `form.Provider` and use `form.Form` inside
|
|
45
|
-
* one of the cells. Other components can be outside form while referring to form by its id via `form` attribute.
|
|
46
|
-
* see https://caniuse.com/?search=form%20attribute
|
|
47
|
-
* @returns Form provider and form.
|
|
48
|
-
*/
|
|
49
|
-
declare const useForm: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ onSubmit, onSubmitError, onSubmitInvalid, defaultValues, Fields, rhf, form, utils, }: UseFormProps<TFieldValues, TTransformedValues>) => UseFormReturn<TFieldValues, TTransformedValues>;
|
|
50
|
-
export default useForm;
|
|
51
|
-
export type UseForm<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = typeof useForm<TFieldValues, TTransformedValues>;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
|
|
2
|
-
import { default as useResetFormAfterSubmitSuccessful } from '../submit/useResetFormOnSubmitSuccessful';
|
|
3
|
-
import { Register } from '../register';
|
|
4
|
-
|
|
5
|
-
export type UseFormOptions = {
|
|
6
|
-
/**
|
|
7
|
-
* Control visibility of certain items via your own classes and styles.
|
|
8
|
-
* (Defaults merged with individual class names.)
|
|
9
|
-
*/
|
|
10
|
-
classNames?: string[];
|
|
11
|
-
/** Request submit via listener on form change. */
|
|
12
|
-
submitOnChange?: boolean;
|
|
13
|
-
/** Reset form values if submit throw errors. Use case: optimistic UI toggle form that submits on each change */
|
|
14
|
-
resetValuesOnSubmitError?: boolean;
|
|
15
|
-
/** Stop propagation of submit event. Useful for portals. */
|
|
16
|
-
stopSubmitPropagation?: boolean;
|
|
17
|
-
/** Disable `console.debug` of field errors in dev. */
|
|
18
|
-
disableFormErrorConsoleDebug?: boolean;
|
|
19
|
-
/** Disable `console.error` of orphan field errors. */
|
|
20
|
-
disableOrphanFormErrorsToConsole?: boolean;
|
|
21
|
-
/** Reset form after successful submit. */
|
|
22
|
-
resetFormAfterSubmitSuccessful?: Parameters<typeof useResetFormAfterSubmitSuccessful>[0];
|
|
23
|
-
/** Control dev tool options. */
|
|
24
|
-
devTool?: Pick<DevtoolUIProps, 'placement' | 'styles'> | 'disabled';
|
|
25
|
-
} & (Register extends {
|
|
26
|
-
UseFormOptions: infer _UseFormOptions;
|
|
27
|
-
} ? _UseFormOptions : {});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { UseFormReturn } from 'react-hook-form';
|
|
2
|
-
import { SafeFieldValues } from '../../form/SafeFieldValues';
|
|
3
|
-
import { FormSubmitError } from './FormSubmitError';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Handle thrown {@link FormSubmitError}.
|
|
7
|
-
* Add key/values as name/message to RHF context errors.
|
|
8
|
-
*/
|
|
9
|
-
declare const setCtxErrorsByFormSubmitError: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(ctx: UseFormReturn<TFieldValues, unknown, TTransformedValues>, error: FormSubmitError<any>) => void;
|
|
10
|
-
export default setCtxErrorsByFormSubmitError;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Handle resetting after successful submit with no server validation errors.
|
|
3
|
-
* See `Rules` section: https://react-hook-form.com/api/useform/reset/
|
|
4
|
-
* Specifically: "- It's recommended to reset inside useEffect after submission."
|
|
5
|
-
*/
|
|
6
|
-
declare const useResetFormOnSubmitError: (options?: {
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
}) => void;
|
|
9
|
-
export default useResetFormOnSubmitError;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { KeepStateOptions } from 'react-hook-form';
|
|
2
|
-
import { SafeFieldValues } from '../form/SafeFieldValues';
|
|
3
|
-
|
|
4
|
-
export type UseResetFormAfterSubmitSuccessfulOptions = false | undefined | true | {
|
|
5
|
-
values?: undefined | SafeFieldValues | {
|
|
6
|
-
resetToCurrentValues: true;
|
|
7
|
-
};
|
|
8
|
-
state?: KeepStateOptions;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* Handle resetting after successful submit with no server validation errors.
|
|
12
|
-
* See `Rules` section: https://react-hook-form.com/api/useform/reset/
|
|
13
|
-
* Specifically: "- It's recommended to reset inside useEffect after submission."
|
|
14
|
-
*/
|
|
15
|
-
declare const useResetFormAfterSubmitSuccessful: (options: UseResetFormAfterSubmitSuccessfulOptions) => void;
|
|
16
|
-
export default useResetFormAfterSubmitSuccessful;
|