@paragrav/rhf-utils 0.0.126 → 0.0.128
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 +37 -26
- package/dist/esm/client/index.mjs +27 -24
- package/dist/esm/client/utils.mjs +25 -20
- 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/_Controller.mjs +5 -6
- package/dist/esm/form/context/utils/RhfUtilsContextProvider.mjs +9 -9
- package/dist/esm/submit/useFormOnSubmitSuccessfulAndReset.mjs +5 -5
- package/dist/esm/submit/useFormOnSubmitted.mjs +1 -1
- package/dist/esm/submit/useResetFormOnSubmitted.mjs +23 -9
- package/dist/esm/utils/useRefIfValueWasTrue.mjs +2 -2
- package/dist/types/client/config/RhfUtilsClientConfig.d.ts +2 -2
- package/dist/types/client/index.d.ts +1 -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 +1 -1
- package/dist/types/submit/useResetFormOnSubmitted.d.ts +18 -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
|
@@ -43,27 +43,27 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
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
52
|
options, // RhfUtilsFormOptions (with any custom props)
|
|
53
|
-
Controller, // strictly-typed controller
|
|
53
|
+
Controller, // strictly-typed rhf 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
|
-
// (
|
|
58
|
+
// your own hooks/behaviors controlled via custom option props
|
|
59
|
+
// (see "Extend RhfUtilsFormOptions" section for more info)
|
|
60
60
|
useMyFormNavigationPrompt({
|
|
61
61
|
enabled: !!options?.enableMyFormNavigationPrompt,
|
|
62
62
|
});
|
|
63
63
|
|
|
64
64
|
return (
|
|
65
65
|
<>
|
|
66
|
-
{/* RhfUtilsZodForm
|
|
66
|
+
{/* RhfUtilsZodForm.Children outlet (see "Component Hierarchy" section) */}
|
|
67
67
|
{children}
|
|
68
68
|
|
|
69
69
|
{/* root errors list */}
|
|
@@ -84,17 +84,18 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
84
84
|
return transformServerErrorToFormSubmitErrors(error);
|
|
85
85
|
},
|
|
86
86
|
|
|
87
|
-
//
|
|
88
|
-
|
|
87
|
+
// rhfContext.formState.errors output for debugging
|
|
88
|
+
FieldErrors: {
|
|
89
89
|
// callbacks to determine when to output information about field errors
|
|
90
90
|
// provided `FlatFieldErrorsContext` (all, fields, roots, orphans, hasOrphans)
|
|
91
|
+
// (See "Orphan Errors" section below for more info.)
|
|
91
92
|
output: {
|
|
92
93
|
// determine when to console ("debug" or "error")
|
|
93
94
|
console: ({ hasOrphans }) =>
|
|
94
|
-
// console error for reporting on prod
|
|
95
|
-
(hasOrphans && { type: 'error' }) ||
|
|
96
95
|
// facilitate local debugging of form validation
|
|
97
|
-
(import.meta.env.DEV && { type: 'debug' })
|
|
96
|
+
(import.meta.env.DEV && { type: 'debug' }) ||
|
|
97
|
+
// console error for reporting on prod
|
|
98
|
+
(hasOrphans && { type: 'error' }),
|
|
98
99
|
|
|
99
100
|
// callback to determine when to throw an error based on field errors
|
|
100
101
|
throw: ({ hasOrphans }) =>
|
|
@@ -107,7 +108,7 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
107
108
|
|
|
108
109
|
## Provider
|
|
109
110
|
|
|
110
|
-
And add the context provider to your stack:
|
|
111
|
+
And add the context provider to your global provider stack:
|
|
111
112
|
|
|
112
113
|
```tsx
|
|
113
114
|
<RhfUtilsClientForZodContextProvider config={rhfUtilsClientConfig}>
|
|
@@ -149,7 +150,7 @@ Currently, only `zod` is supported.
|
|
|
149
150
|
formRef, // ref
|
|
150
151
|
context, // rhf UseFormReturn
|
|
151
152
|
options, // RhfUtilsFormOptions
|
|
152
|
-
Controller, // strictly-typed controller
|
|
153
|
+
Controller, // strictly-typed rhf controller
|
|
153
154
|
FormSubmitError, // strictly-typed error class
|
|
154
155
|
}) => (
|
|
155
156
|
<>
|
|
@@ -188,17 +189,9 @@ Currently, only `zod` is supported.
|
|
|
188
189
|
/>
|
|
189
190
|
```
|
|
190
191
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
The component hierarchy is:
|
|
192
|
+
### Form Children
|
|
194
193
|
|
|
195
|
-
|
|
196
|
-
<RhfUtilsClientConfig.FormComponent>
|
|
197
|
-
<RhfUtilsClientConfig.FormChildren>
|
|
198
|
-
<RhfUtilsZodForm.Children />
|
|
199
|
-
</RhfUtilsClientConfig.FormChildren>
|
|
200
|
-
</RhfUtilsClientConfig.FormComponent>
|
|
201
|
-
```
|
|
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.
|
|
202
195
|
|
|
203
196
|
If you prefer to define your `Children` component as standalone:
|
|
204
197
|
|
|
@@ -208,6 +201,20 @@ const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = ({ ... }) => { };
|
|
|
208
201
|
function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
|
|
209
202
|
```
|
|
210
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
|
+
|
|
211
218
|
## `FormSubmitError`
|
|
212
219
|
|
|
213
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.
|
|
@@ -246,10 +253,14 @@ type RhfUtilsFormOptions = {
|
|
|
246
253
|
/** Request submit via listener on form change. */
|
|
247
254
|
submitOnChange?: boolean;
|
|
248
255
|
|
|
249
|
-
/**
|
|
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
|
+
*/
|
|
250
261
|
resetOnSubmitted?: {
|
|
251
|
-
|
|
252
|
-
|
|
262
|
+
success?: { values: 'defaults' | 'current' };
|
|
263
|
+
error?: { values: 'defaults' };
|
|
253
264
|
};
|
|
254
265
|
|
|
255
266
|
/** Control dev tool options. (Lazy-loaded when truthy value supplied.) */
|
|
@@ -284,7 +295,7 @@ You can configure via `RhfUtilsClientConfig` (example at the top) when form cont
|
|
|
284
295
|
|
|
285
296
|
Use `useFlatFieldErrorsContext()` hook, which returns an object with errors grouped by `all`, `fields`, `roots`, `orphans` records, and `hasErrors` and `hasErrors` and `hasOrphans` booleans.
|
|
286
297
|
|
|
287
|
-
###
|
|
298
|
+
### Orphan Errors
|
|
288
299
|
|
|
289
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.
|
|
290
301
|
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import n from "../form/FormWithProviders.mjs";
|
|
3
4
|
import l from "../form/useRhfUtilsForm.mjs";
|
|
4
5
|
import { mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps as F } from "./utils.mjs";
|
|
5
|
-
const
|
|
6
|
-
const
|
|
6
|
+
const c = (r) => (o) => {
|
|
7
|
+
const e = f(r, o);
|
|
7
8
|
return {
|
|
8
|
-
useForm: (
|
|
9
|
-
const
|
|
9
|
+
useForm: (s, t) => {
|
|
10
|
+
const i = e(s, t);
|
|
10
11
|
return {
|
|
11
|
-
...l(
|
|
12
|
-
FormWithProviders: () => /* @__PURE__ */ n
|
|
12
|
+
...l(i),
|
|
13
|
+
FormWithProviders: () => /* @__PURE__ */ m(n, { ...i })
|
|
13
14
|
};
|
|
14
15
|
},
|
|
15
16
|
FormWithProviders: u(r, o)
|
|
16
17
|
};
|
|
17
|
-
}, f = (r, o) => function(
|
|
18
|
+
}, f = (r, o) => function(s, t) {
|
|
18
19
|
return {
|
|
19
20
|
...t,
|
|
20
21
|
...F(
|
|
@@ -22,25 +23,27 @@ const p = (r) => (o) => {
|
|
|
22
23
|
t,
|
|
23
24
|
{
|
|
24
25
|
rhf: {
|
|
25
|
-
resolver: r(
|
|
26
|
+
resolver: r(s)
|
|
26
27
|
}
|
|
27
28
|
}
|
|
28
29
|
)
|
|
29
30
|
};
|
|
30
|
-
}, u = (r, o) =>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
m
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
}, u = (r, o) => {
|
|
32
|
+
const e = f(r, o);
|
|
33
|
+
return function({
|
|
34
|
+
schema: t,
|
|
35
|
+
children: i,
|
|
36
|
+
...h
|
|
37
|
+
}) {
|
|
38
|
+
return /* @__PURE__ */ m(
|
|
39
|
+
n,
|
|
40
|
+
{
|
|
41
|
+
...e(t, h),
|
|
42
|
+
children: i
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
};
|
|
43
46
|
};
|
|
44
47
|
export {
|
|
45
|
-
|
|
48
|
+
c as createRhfUtilsClient
|
|
46
49
|
};
|
|
@@ -1,23 +1,28 @@
|
|
|
1
|
-
const i = (l, ...t) =>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
const i = (l, ...t) => (
|
|
2
|
+
// sequentially merge each set of props into defaults
|
|
3
|
+
t.reduce(
|
|
4
|
+
(s, e) => {
|
|
5
|
+
var f, o;
|
|
6
|
+
return {
|
|
7
|
+
rhf: {
|
|
8
|
+
...s == null ? void 0 : s.rhf,
|
|
9
|
+
...e.rhf
|
|
10
|
+
},
|
|
11
|
+
utils: {
|
|
12
|
+
...s == null ? void 0 : s.utils,
|
|
13
|
+
...e.utils
|
|
14
|
+
},
|
|
15
|
+
form: {
|
|
16
|
+
...s == null ? void 0 : s.form,
|
|
17
|
+
...e.form,
|
|
18
|
+
className: [(f = s == null ? void 0 : s.form) == null ? void 0 : f.className, (o = e.form) == null ? void 0 : o.className].filter(Boolean).join(" ")
|
|
19
|
+
// stringify
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
},
|
|
23
|
+
// start with defaults
|
|
24
|
+
l
|
|
25
|
+
)
|
|
21
26
|
);
|
|
22
27
|
export {
|
|
23
28
|
i as mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps
|
|
@@ -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,9 +1,8 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
return /* @__PURE__ */ t(e, { control: r, ...o });
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { Controller as t } from "react-hook-form";
|
|
3
|
+
function n(r) {
|
|
4
|
+
return /* @__PURE__ */ o(t, { ...r });
|
|
6
5
|
}
|
|
7
6
|
export {
|
|
8
|
-
|
|
7
|
+
n as default
|
|
9
8
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import d from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
|
|
3
|
+
import f from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
|
|
4
4
|
import i from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
|
|
5
5
|
import x from "../../../submit/useResetFormOnSubmitted.mjs";
|
|
6
|
-
import
|
|
7
|
-
import { _RhfUtilsContextProvider as
|
|
6
|
+
import F from "../../../submit/useSubmitFormOnChange.mjs";
|
|
7
|
+
import { _RhfUtilsContextProvider as O } from "./useRhfUtilsContext.mjs";
|
|
8
8
|
const P = ({
|
|
9
9
|
formId: l,
|
|
10
10
|
formRef: m,
|
|
@@ -13,16 +13,16 @@ const P = ({
|
|
|
13
13
|
children: C
|
|
14
14
|
}) => {
|
|
15
15
|
var a;
|
|
16
|
-
const e =
|
|
17
|
-
return
|
|
16
|
+
const e = d();
|
|
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
20
|
(r == null ? void 0 : r.resetOnSubmitted) ?? (t && {
|
|
21
|
-
|
|
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,22 +1,36 @@
|
|
|
1
1
|
import { useFormContext as n } from "react-hook-form";
|
|
2
|
-
import
|
|
3
|
-
const
|
|
4
|
-
const {
|
|
5
|
-
|
|
6
|
-
var
|
|
2
|
+
import i from "./useFormOnSubmitted.mjs";
|
|
3
|
+
const p = (e) => {
|
|
4
|
+
const { getValues: s, reset: o } = n();
|
|
5
|
+
i((m) => {
|
|
6
|
+
var u;
|
|
7
7
|
if (!e) return;
|
|
8
|
-
const t = (
|
|
8
|
+
const t = (u = e[m ? "success" : "error"]) == null ? void 0 : u.values;
|
|
9
9
|
if (!t) return;
|
|
10
|
-
const
|
|
11
|
-
|
|
10
|
+
const r = t === "current", c = r ? s() : void 0;
|
|
11
|
+
o(c, {
|
|
12
12
|
// keep submit stuff for tracking relevant state (e.g., `useFormOnSubmitSuccessful`)
|
|
13
13
|
keepIsSubmitSuccessful: !0,
|
|
14
14
|
keepIsSubmitted: !0,
|
|
15
15
|
keepSubmitCount: !0,
|
|
16
|
+
/**
|
|
17
|
+
* This is necessary when setting default values to current values (lest form stop updating).
|
|
18
|
+
*
|
|
19
|
+
* Technically, we are keeping values and resetting default values to same values.
|
|
20
|
+
*
|
|
21
|
+
* Steps to repro:
|
|
22
|
+
* - RhfUtilsClientConfig with resetOnSubmitted set to success values to current
|
|
23
|
+
* - remove `keepValues` prop from reset
|
|
24
|
+
* - create valid form, submit
|
|
25
|
+
* - form values should be unchanged
|
|
26
|
+
* - unexpectedly: can no longer type into input
|
|
27
|
+
*/
|
|
28
|
+
keepValues: r,
|
|
29
|
+
// keep errors in the case of unsuccessful submit
|
|
16
30
|
keepErrors: !0
|
|
17
31
|
});
|
|
18
32
|
});
|
|
19
33
|
};
|
|
20
34
|
export {
|
|
21
|
-
|
|
35
|
+
p as default
|
|
22
36
|
};
|
|
@@ -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
|
*/
|
|
@@ -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,7 +12,7 @@ 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. */
|
|
15
|
+
/** Reset form values and state (e.g., `isDirty`) after submit -- on success and/or error. */
|
|
16
16
|
resetOnSubmitted?: UseResetFormOnSubmittedOptions;
|
|
17
17
|
/**
|
|
18
18
|
* Control dev tool options.
|
|
@@ -1,25 +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?: {
|
|
12
11
|
values: 'defaults' | 'current';
|
|
13
12
|
};
|
|
14
13
|
/**
|
|
15
|
-
* Reset values on submit error.
|
|
14
|
+
* Reset values to defaults on submit error.
|
|
16
15
|
*/
|
|
17
|
-
|
|
16
|
+
error?: {
|
|
18
17
|
values: 'defaults';
|
|
19
18
|
};
|
|
20
19
|
};
|
|
21
20
|
/**
|
|
22
|
-
*
|
|
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
|
+
*
|
|
23
32
|
* See `Rules` section: https://react-hook-form.com/api/useform/reset/
|
|
24
33
|
* Specifically: "- It's recommended to reset inside useEffect after submission."
|
|
25
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;
|