@paragrav/rhf-utils 0.0.112 → 0.0.114
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 +47 -16
- package/dist/esm/client/zod/context/RhfUtilsZodForm.mjs +12 -0
- package/dist/esm/client/zod/context/useRhfUtilsClientForZodContext.mjs +6 -0
- package/dist/esm/{src/devtool → devtool}/LazyDevTool.mjs +4 -4
- package/dist/esm/errors/flat/FlatFieldErrorsList.mjs +17 -0
- package/dist/esm/errors/flat/getFlatFieldErrors.mjs +25 -0
- package/dist/esm/errors/message/FormErrorMessage.mjs +14 -0
- package/dist/esm/errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs +4 -0
- package/dist/esm/errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs +6 -0
- package/dist/esm/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs +34 -0
- package/dist/esm/exports.mjs +48 -0
- package/dist/esm/form/Form.mjs +102 -0
- package/dist/esm/{src/form → form}/RhfUtilsFormProviders.mjs +1 -1
- package/dist/esm/form/context/utils/RhfUtilsContextProvider.mjs +27 -0
- package/dist/esm/form/context/utils/useRhfUtilsContext.mjs +6 -0
- package/dist/esm/form/context/utils/useRhfUtilsContextRequestSubmit.mjs +9 -0
- package/dist/esm/{src/form → form}/useRhfUtilsForm.mjs +21 -21
- package/dist/esm/submit/useFormOnSubmitSuccessful.mjs +11 -0
- package/dist/esm/{src/submit → submit}/useSubmitFormOnChange.mjs +1 -1
- package/dist/esm/utils/isEmptyObject.mjs +4 -0
- package/dist/types/client/config/RhfUtilsClientConfig.d.ts +4 -6
- package/dist/types/client/zod/RhfUtilsUseFormChildrenZodProps.d.ts +2 -1
- package/dist/types/client/zod/consts.d.ts +4 -0
- package/dist/types/client/zod/context/RhfUtilsZodForm.d.ts +9 -0
- package/dist/types/client/zod/context/useRhfUtilsZodForm.d.ts +2 -1
- package/dist/types/errors/flat/getFlatFieldErrors.d.ts +3 -2
- package/dist/types/errors/orphan/useOrphanFormErrorsMemo.d.ts +5 -0
- package/dist/types/errors/trpc/getOnSubmitTrpcClientErrorHandler.d.ts +2 -2
- package/dist/types/exports.d.ts +4 -15
- package/dist/types/form/UseRhfUtilsFormChildrenProps.d.ts +7 -0
- package/dist/types/form/UseRhfUtilsFormOnSubmitContext.d.ts +27 -0
- package/dist/types/form/UseRhfUtilsFormProps.d.ts +4 -3
- package/dist/types/form/UseRhfUtilsFormReturn.d.ts +5 -0
- package/dist/types/form/context/utils/RhfUtilsContextProvider.d.ts +11 -0
- package/dist/types/form/context/utils/useRhfUtilsContext.d.ts +14 -0
- package/dist/types/form/context/utils/useRhfUtilsContextRequestSubmit.d.ts +5 -0
- package/dist/types/form/utils/getSubmitterButtonData.d.ts +1 -1
- package/dist/types/form/utils/useFormRequestSubmit.d.ts +6 -0
- package/package.json +3 -5
- package/dist/esm/src/client/zod/RhfUtilsZodForm.mjs +0 -12
- package/dist/esm/src/client/zod/context/useRhfUtilsClientForZodContext.mjs +0 -6
- package/dist/esm/src/errors/flat/FlatFieldErrorsList.mjs +0 -17
- package/dist/esm/src/errors/flat/getFlatFieldErrors.mjs +0 -22
- package/dist/esm/src/errors/flat/useFormFlatFieldErrorsMemo.mjs +0 -6
- package/dist/esm/src/errors/message/FormErrorMessage.mjs +0 -14
- package/dist/esm/src/errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs +0 -4
- package/dist/esm/src/errors/orphan/getOrphansFromFieldErrors.mjs +0 -6
- package/dist/esm/src/errors/orphan/useFormHasOnlyOrphanFieldErrorsMemo.mjs +0 -10
- package/dist/esm/src/errors/orphan/useOrphanFormErrorsMemo.mjs +0 -14
- package/dist/esm/src/errors/root/getRootsFromFieldErrors.mjs +0 -6
- package/dist/esm/src/errors/root/useRootFormFieldErrorsMemo.mjs +0 -6
- package/dist/esm/src/errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs +0 -7
- package/dist/esm/src/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs +0 -35
- package/dist/esm/src/errors/useFormErrorsEffect.mjs +0 -11
- package/dist/esm/src/errors/useFormErrorsIfAny.mjs +0 -9
- package/dist/esm/src/exports.mjs +0 -70
- package/dist/esm/src/form/Form.mjs +0 -90
- package/dist/esm/src/form/context/utils/FormUtilsContextProvider.mjs +0 -35
- package/dist/esm/src/form/context/utils/useFormUtilsContext.mjs +0 -6
- package/dist/esm/src/submit/useFormOnSubmitSuccessful.mjs +0 -11
- package/dist/esm/src/utils/isEmptyObject.mjs +0 -4
- /package/dist/esm/{src/client → client}/config/useRhfUtilsClientConfigContext.mjs +0 -0
- /package/dist/esm/{src/client → client}/index.mjs +0 -0
- /package/dist/esm/{src/client → client}/zod/context/RhfUtilsClientForZodContextProvider.mjs +0 -0
- /package/dist/esm/{src/client → client}/zod/context/useRhfUtilsZodForm.mjs +0 -0
- /package/dist/esm/{src/client → client}/zod/createRhfUtilsClientForZod.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/flat/context/FlatFieldErrorsContextProvider.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/flat/context/useFlatFieldErrorsContext.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/flat/filterFlatFieldErrors.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/flat/flattenFieldErrors.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/flat/useFlatFieldErrorsOutput.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/isFieldErrorRefd.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/message/FormErrorMessageByPath.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/nonfield/FormNonFieldErrorMarker.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/nonfield/FormNonFieldErrorMarker.utils.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/nonfield/isNonFieldErrorMarkerInDOM.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/orphan/getIsOrphanFormErrorWithParentElement.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/orphan/getOrphansFromFlatFieldErrors.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/orphan/isOrphanFormError.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/output/consoleErrors.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/root/RootErrorsListFromFlatFieldErrorsContext.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/root/consts.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/root/getRootsFromFlatFieldErrors.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/root/isFlatFieldErrorEntryPathRoot.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/root/isFormErrorPathRoot.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/trpc/trpcClientErrorMessageSchema.mjs +0 -0
- /package/dist/esm/{src/errors → errors}/useFormErrorsTransformMemo.mjs +0 -0
- /package/dist/esm/{src/form → form}/FormWithProviders.mjs +0 -0
- /package/dist/esm/{src/form → form}/_Controller.mjs +0 -0
- /package/dist/esm/{src/form → form}/_FormBase.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/FormGroupContextProvider.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/index.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupChildIsMountedTracker.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupChildIsSubmittingTracker.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupChildTracker.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupIsAnyBusy.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupIsChildBusy.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupIsParentBusy.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormGroupParentTracker.mjs +0 -0
- /package/dist/esm/{src/form → form}/context/group/useFormOrParentIsBusy.mjs +0 -0
- /package/dist/esm/{src/form → form}/useFormIsBusy.mjs +0 -0
- /package/dist/esm/{src/form → form}/utils/getSubmitterButtonData.mjs +0 -0
- /package/dist/esm/{src/errors → form/utils}/useFormRequestSubmit.mjs +0 -0
- /package/dist/esm/{src/submit → submit}/error/FormSubmitError.mjs +0 -0
- /package/dist/esm/{src/submit → submit}/error/setCtxErrorsByFormSubmitErrors.mjs +0 -0
- /package/dist/esm/{src/submit → submit}/useFormOnSubmitSuccessfulAndReset.mjs +0 -0
- /package/dist/esm/{src/submit → submit}/useResetFormOnSubmitError.mjs +0 -0
- /package/dist/esm/{src/submit → submit}/useResetFormOnSubmitSuccessful.mjs +0 -0
- /package/dist/esm/{src/utils → utils}/createContext.mjs +0 -0
package/README.md
CHANGED
|
@@ -34,12 +34,11 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
34
34
|
FormComponent: Form.Root,
|
|
35
35
|
|
|
36
36
|
// transform backend error
|
|
37
|
-
|
|
38
|
-
onSubmitError: (
|
|
37
|
+
onUnknownSubmitError: (
|
|
39
38
|
error, // unknown
|
|
40
39
|
) => {
|
|
41
40
|
// if other error, re-throw to handle in ErrorBoundary
|
|
42
|
-
if (!(error instanceof
|
|
41
|
+
if (!(error instanceof MyServerError)) throw error;
|
|
43
42
|
|
|
44
43
|
// return to be merged into RHF context errors
|
|
45
44
|
return transformServerErrorToFormSubmitErrors(error);
|
|
@@ -49,11 +48,12 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
49
48
|
top: (
|
|
50
49
|
// UseRhfUtilsFormChildrenProps
|
|
51
50
|
{
|
|
52
|
-
formId, //
|
|
53
|
-
formRef, //
|
|
54
|
-
context, //
|
|
55
|
-
options, //
|
|
56
|
-
Controller, //
|
|
51
|
+
formId, // unique id string
|
|
52
|
+
formRef, // ref
|
|
53
|
+
context, // rhf UseFormReturn
|
|
54
|
+
options, // RhfUtilsFormOptions
|
|
55
|
+
Controller, // strongly-typed controller
|
|
56
|
+
FormSubmitError, // strongly-typed error class
|
|
57
57
|
},
|
|
58
58
|
) => {
|
|
59
59
|
// navigation blocker (using custom option)
|
|
@@ -74,7 +74,7 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
74
74
|
output: {
|
|
75
75
|
// callback to determine when to output form context errors to console ("debug" or "error")
|
|
76
76
|
console: ({ isDevelopment, hasOrphans }) =>
|
|
77
|
-
(hasOrphans && { type: 'error' }) || // report orphan errors
|
|
77
|
+
(hasOrphans && { type: 'error' }) || // report all orphan errors
|
|
78
78
|
(isDevelopment && { type: 'debug' }), // facilitate debugging on dev
|
|
79
79
|
|
|
80
80
|
// callback to determine when to throw an error based on context
|
|
@@ -105,14 +105,18 @@ Currently, only `zod` is supported.
|
|
|
105
105
|
email: '',
|
|
106
106
|
}}
|
|
107
107
|
// submit handler
|
|
108
|
-
onSubmit={async (
|
|
108
|
+
onSubmit={async (
|
|
109
|
+
data, // schema output
|
|
110
|
+
context, // UseRhfUtilsFormOnSubmitContext (form id, form ref, context (rhf), utils options, strongly-typed FormSubmitError class)
|
|
111
|
+
event, // SubmitEvent
|
|
112
|
+
) => {
|
|
109
113
|
await authLoginService(data);
|
|
110
114
|
onSuccess();
|
|
111
115
|
}}
|
|
112
116
|
// handle error declaratively (i.e., no throw/catch)
|
|
113
117
|
onSubmitError={({
|
|
114
118
|
error, // unknown
|
|
115
|
-
context, // rhf
|
|
119
|
+
context, // UseRhfUtilsFormOnSubmitErrorContext (form id, form ref, context (rhf), utils options)
|
|
116
120
|
event, // SubmitEvent
|
|
117
121
|
}) => {
|
|
118
122
|
onError(error);
|
|
@@ -120,11 +124,12 @@ Currently, only `zod` is supported.
|
|
|
120
124
|
// fields
|
|
121
125
|
Children={({
|
|
122
126
|
// UseRhfUtilsFormChildrenProps
|
|
123
|
-
formId, //
|
|
124
|
-
formRef, //
|
|
125
|
-
context, //
|
|
126
|
-
options, //
|
|
127
|
-
Controller, //
|
|
127
|
+
formId, // unique id string
|
|
128
|
+
formRef, // ref
|
|
129
|
+
context, // rhf UseFormReturn
|
|
130
|
+
options, // RhfUtilsFormOptions
|
|
131
|
+
Controller, // strongly-typed controller
|
|
132
|
+
FormSubmitError, // strongly-typed error class
|
|
128
133
|
}) => (
|
|
129
134
|
<>
|
|
130
135
|
<Controller
|
|
@@ -153,6 +158,28 @@ const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = ({ ... }) => { };
|
|
|
153
158
|
function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
|
|
154
159
|
```
|
|
155
160
|
|
|
161
|
+
## `FormSubmitError`
|
|
162
|
+
|
|
163
|
+
This is a derived `Error` class you can use to throw a structured error in your submit handler. It is strongly-typed, so it only allows field names in schema and `root`/`root.{string}` keys.
|
|
164
|
+
|
|
165
|
+
It uses `FormSubmitErrors` shape, which is a flat (dot notation) equivalent of RHF's `FieldErrors`.
|
|
166
|
+
|
|
167
|
+
Example:
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
<RhfUtilsZodForm
|
|
171
|
+
onSubmit={({ FormSubmitError }) => {
|
|
172
|
+
if (isProblem())
|
|
173
|
+
throw new FormSubmitError({
|
|
174
|
+
root: { message: 'There was a problem with the form.' },
|
|
175
|
+
'street.address': { message: 'Street address invalid.' },
|
|
176
|
+
});
|
|
177
|
+
}}
|
|
178
|
+
/>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
Any non-`FormSubmitError`s thrown from submit handler can be transformed by `RhfUtilsClientConfig`'s `onUnknownSubmitError` callback. This takes an `unknown` error and can return a `FormSubmitErrors` object, which is merged in RHF's context errors. (Most common use case will be transforming backend errors to frontend shape. You can use `getOnSubmitTrpcClientErrorHandler` HOF for TRPC backends.)
|
|
182
|
+
|
|
156
183
|
## `RhfUtilsFormOptions`
|
|
157
184
|
|
|
158
185
|
These options can be set globally and/or per form.
|
|
@@ -184,6 +211,10 @@ type RhfUtilsFormOptions = {
|
|
|
184
211
|
};
|
|
185
212
|
```
|
|
186
213
|
|
|
214
|
+
If you need access to options deeper in component structure, use `useRhfUtilsContext` to receive `RhfUtilsContext` object, which includes `formId`, `formRef`, and `options` settings.
|
|
215
|
+
|
|
216
|
+
Use `useRhfUtilsContextRequestSubmit` to get `requestSubmit` fn for current form ref in context. This is useful when you need to trigger form submission programatically.
|
|
217
|
+
|
|
187
218
|
## Extend `RhfUtilsFormOptions`
|
|
188
219
|
|
|
189
220
|
Extend `RhfUtilsFormOptions` with custom options, which get passed to `Children` component in `options` prop.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import e from "./useRhfUtilsClientForZodContext.mjs";
|
|
3
|
+
function m({
|
|
4
|
+
schema: o,
|
|
5
|
+
...t
|
|
6
|
+
}) {
|
|
7
|
+
const { FormWithProviders: r } = e();
|
|
8
|
+
return /* @__PURE__ */ i(r, { schema: o, ...t });
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
m as default
|
|
12
|
+
};
|
|
@@ -5,12 +5,12 @@ const a = e.lazy(
|
|
|
5
5
|
() => import("@hookform/devtools").then((o) => ({
|
|
6
6
|
default: o.DevTool
|
|
7
7
|
}))
|
|
8
|
-
),
|
|
8
|
+
), u = ({ isDevelopment: o, props: r }) => {
|
|
9
9
|
if (!o)
|
|
10
10
|
return null;
|
|
11
|
-
const { control:
|
|
12
|
-
return /* @__PURE__ */ t(e.Suspense, { fallback: null, children: /* @__PURE__ */ t(a, { control:
|
|
13
|
-
}
|
|
11
|
+
const { control: l } = n();
|
|
12
|
+
return /* @__PURE__ */ t(e.Suspense, { fallback: null, children: /* @__PURE__ */ t(a, { control: l, ...r }) });
|
|
13
|
+
};
|
|
14
14
|
export {
|
|
15
15
|
u as default
|
|
16
16
|
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import l from "../../utils/isEmptyObject.mjs";
|
|
3
|
+
const o = ({ errors: e }) => {
|
|
4
|
+
if (e && !l(e))
|
|
5
|
+
return /* @__PURE__ */ t("ul", { children: Object.values(e).map((i, r) => /* @__PURE__ */ t(
|
|
6
|
+
"li",
|
|
7
|
+
{
|
|
8
|
+
role: "alert",
|
|
9
|
+
"aria-live": "polite",
|
|
10
|
+
children: i.message
|
|
11
|
+
},
|
|
12
|
+
r
|
|
13
|
+
)) });
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
o as default
|
|
17
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { get as c } from "react-hook-form";
|
|
2
|
+
import n from "./flattenFieldErrors.mjs";
|
|
3
|
+
const u = (t) => {
|
|
4
|
+
const s = n(t), a = Object.keys(s);
|
|
5
|
+
return Object.fromEntries(
|
|
6
|
+
a.reduce(
|
|
7
|
+
(e, o) => {
|
|
8
|
+
const r = o.replace(
|
|
9
|
+
d,
|
|
10
|
+
""
|
|
11
|
+
);
|
|
12
|
+
if (r === o)
|
|
13
|
+
return e;
|
|
14
|
+
const f = c(t, r, void 0);
|
|
15
|
+
return f && e.push([r, f]), e;
|
|
16
|
+
},
|
|
17
|
+
[]
|
|
18
|
+
// entries
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
}, d = /\.(?:type|message)\b$/;
|
|
22
|
+
export {
|
|
23
|
+
u as default,
|
|
24
|
+
d as regexMaybeFieldErrorLeafNodeSuffix
|
|
25
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
const i = ({ message: r, className: e }) => /* @__PURE__ */ o(
|
|
4
|
+
"p",
|
|
5
|
+
{
|
|
6
|
+
role: "alert",
|
|
7
|
+
"aria-live": "polite",
|
|
8
|
+
className: e,
|
|
9
|
+
children: r
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
export {
|
|
13
|
+
i as default
|
|
14
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { TRPCClientError as o } from "@trpc/client";
|
|
2
|
+
import { trpcClientErrorToFormSubmitErrorsSchemaTransformer as n } from "./trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
|
|
3
|
+
const m = (t) => (r) => r instanceof o ? n.parse(r) : t(r);
|
|
4
|
+
export {
|
|
5
|
+
m as getOnSubmitTrpcClientErrorHandler
|
|
6
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { TRPCClientError as o } from "@trpc/client";
|
|
2
|
+
import { z as e } from "zod";
|
|
3
|
+
import { trpcClientErrorMessageSchema as a } from "./trpcClientErrorMessageSchema.mjs";
|
|
4
|
+
const i = e.custom(
|
|
5
|
+
(r) => r instanceof o
|
|
6
|
+
// check instance type
|
|
7
|
+
).transform((r) => r.message).transform((r) => {
|
|
8
|
+
try {
|
|
9
|
+
return JSON.parse(r);
|
|
10
|
+
} catch {
|
|
11
|
+
return [
|
|
12
|
+
{
|
|
13
|
+
validation: "root",
|
|
14
|
+
code: "server",
|
|
15
|
+
message: r,
|
|
16
|
+
path: ["root"]
|
|
17
|
+
}
|
|
18
|
+
];
|
|
19
|
+
}
|
|
20
|
+
}).pipe(e.array(a)).transform(
|
|
21
|
+
(r) => r.map(
|
|
22
|
+
(t) => [
|
|
23
|
+
t.path.join("."),
|
|
24
|
+
// flatten path (e.g., "street.name")
|
|
25
|
+
{
|
|
26
|
+
type: t.code,
|
|
27
|
+
message: t.message
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
)
|
|
31
|
+
).transform((r) => Object.fromEntries(r));
|
|
32
|
+
export {
|
|
33
|
+
i as trpcClientErrorToFormSubmitErrorsSchemaTransformer
|
|
34
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { default as e } from "./client/zod/context/RhfUtilsClientForZodContextProvider.mjs";
|
|
2
|
+
import { default as s } from "./client/zod/context/RhfUtilsZodForm.mjs";
|
|
3
|
+
import { default as u } from "./client/zod/context/useRhfUtilsZodForm.mjs";
|
|
4
|
+
import { default as m } from "./errors/flat/context/useFlatFieldErrorsContext.mjs";
|
|
5
|
+
import { default as d } from "./errors/message/FormErrorMessageByPath.mjs";
|
|
6
|
+
import { default as x } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
|
|
7
|
+
import { default as F } from "./errors/root/RootErrorsListFromFlatFieldErrorsContext.mjs";
|
|
8
|
+
import { getOnSubmitTrpcClientErrorHandler as C } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
|
|
9
|
+
import { trpcClientErrorToFormSubmitErrorsSchemaTransformer as E } from "./errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
|
|
10
|
+
import { default as R } from "./form/context/utils/useRhfUtilsContext.mjs";
|
|
11
|
+
import { default as b } from "./form/context/utils/useRhfUtilsContextRequestSubmit.mjs";
|
|
12
|
+
import { default as T } from "./form/context/group/FormGroupContextProvider.mjs";
|
|
13
|
+
import { default as B } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
|
|
14
|
+
import { default as P } from "./form/context/group/useFormGroupChildIsSubmittingTracker.mjs";
|
|
15
|
+
import { default as U } from "./form/context/group/useFormGroupChildTracker.mjs";
|
|
16
|
+
import { default as M } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
|
|
17
|
+
import { default as q } from "./form/context/group/useFormGroupIsChildBusy.mjs";
|
|
18
|
+
import { default as O } from "./form/context/group/useFormGroupIsParentBusy.mjs";
|
|
19
|
+
import { default as D } from "./form/context/group/useFormGroupParentTracker.mjs";
|
|
20
|
+
import { default as L } from "./form/context/group/useFormOrParentIsBusy.mjs";
|
|
21
|
+
import { default as j } from "./form/utils/getSubmitterButtonData.mjs";
|
|
22
|
+
import { default as z } from "./form/utils/useFormRequestSubmit.mjs";
|
|
23
|
+
import { FormSubmitError as K } from "./submit/error/FormSubmitError.mjs";
|
|
24
|
+
export {
|
|
25
|
+
d as FormErrorMessageByPath,
|
|
26
|
+
T as FormGroupContextProvider,
|
|
27
|
+
x as FormNonFieldErrorMarker,
|
|
28
|
+
K as FormSubmitError,
|
|
29
|
+
e as RhfUtilsClientForZodContextProvider,
|
|
30
|
+
s as RhfUtilsZodForm,
|
|
31
|
+
F as RootErrorsListFromFlatFieldErrorsContext,
|
|
32
|
+
C as getOnSubmitTrpcClientErrorHandler,
|
|
33
|
+
j as getSubmitterButtonData,
|
|
34
|
+
E as trpcClientErrorToFormSubmitErrorsSchemaTransformer,
|
|
35
|
+
m as useFlatFieldErrorsContext,
|
|
36
|
+
B as useFormGroupChildIsMountedTracker,
|
|
37
|
+
P as useFormGroupChildIsSubmittingTracker,
|
|
38
|
+
U as useFormGroupChildTracker,
|
|
39
|
+
M as useFormGroupIsAnyBusy,
|
|
40
|
+
q as useFormGroupIsChildBusy,
|
|
41
|
+
O as useFormGroupIsParentBusy,
|
|
42
|
+
D as useFormGroupParentTracker,
|
|
43
|
+
L as useFormOrParentIsBusy,
|
|
44
|
+
z as useFormRequestSubmit,
|
|
45
|
+
R as useRhfUtilsContext,
|
|
46
|
+
b as useRhfUtilsContextRequestSubmit,
|
|
47
|
+
u as useRhfUtilsZodForm
|
|
48
|
+
};
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { jsxs as T, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { useFormContext as _ } from "react-hook-form";
|
|
4
|
+
import D from "../client/config/useRhfUtilsClientConfigContext.mjs";
|
|
5
|
+
import N from "../devtool/LazyDevTool.mjs";
|
|
6
|
+
import { FormSubmitError as C } from "../submit/error/FormSubmitError.mjs";
|
|
7
|
+
import P from "../submit/error/setCtxErrorsByFormSubmitErrors.mjs";
|
|
8
|
+
import S from "./_Controller.mjs";
|
|
9
|
+
import w from "./_FormBase.mjs";
|
|
10
|
+
function A({
|
|
11
|
+
formId: s,
|
|
12
|
+
formRef: p,
|
|
13
|
+
//
|
|
14
|
+
onSubmit: c,
|
|
15
|
+
onSubmitError: d,
|
|
16
|
+
onSubmitInvalid: v,
|
|
17
|
+
Children: x,
|
|
18
|
+
//
|
|
19
|
+
form: m,
|
|
20
|
+
utils: o,
|
|
21
|
+
//
|
|
22
|
+
children: b
|
|
23
|
+
}) {
|
|
24
|
+
const n = _(), t = D(), F = async (e) => {
|
|
25
|
+
o != null && o.stopSubmitPropagation && e.stopPropagation();
|
|
26
|
+
try {
|
|
27
|
+
await n.handleSubmit(j, v)(e);
|
|
28
|
+
} catch (r) {
|
|
29
|
+
B(r, e);
|
|
30
|
+
}
|
|
31
|
+
}, j = (e, r) => c == null ? void 0 : c(
|
|
32
|
+
e,
|
|
33
|
+
{
|
|
34
|
+
formId: s,
|
|
35
|
+
formRef: p,
|
|
36
|
+
context: n,
|
|
37
|
+
utils: o,
|
|
38
|
+
FormSubmitError: C
|
|
39
|
+
},
|
|
40
|
+
r
|
|
41
|
+
), B = (e, r) => {
|
|
42
|
+
var y;
|
|
43
|
+
const a = e instanceof C ? (
|
|
44
|
+
// consumer can manually throw FormSubmitError (e.g., manual validation)
|
|
45
|
+
e.errors
|
|
46
|
+
) : (
|
|
47
|
+
// if error is not FormSubmitError, consumer can provide global handler
|
|
48
|
+
(y = t == null ? void 0 : t.onUnknownSubmitError) == null ? void 0 : y.call(t, e)
|
|
49
|
+
);
|
|
50
|
+
a && P(n, a), d == null || d(
|
|
51
|
+
e,
|
|
52
|
+
{
|
|
53
|
+
formId: s,
|
|
54
|
+
formRef: p,
|
|
55
|
+
context: n,
|
|
56
|
+
utils: o
|
|
57
|
+
},
|
|
58
|
+
r
|
|
59
|
+
);
|
|
60
|
+
}, h = {
|
|
61
|
+
formId: s,
|
|
62
|
+
formRef: p,
|
|
63
|
+
context: n,
|
|
64
|
+
utils: o,
|
|
65
|
+
Controller: S,
|
|
66
|
+
FormSubmitError: C
|
|
67
|
+
}, i = (e) => {
|
|
68
|
+
var a;
|
|
69
|
+
const r = (a = t == null ? void 0 : t.Children) == null ? void 0 : a[e];
|
|
70
|
+
return r && /* @__PURE__ */ l(r, { ...h });
|
|
71
|
+
};
|
|
72
|
+
return /* @__PURE__ */ T(
|
|
73
|
+
w,
|
|
74
|
+
{
|
|
75
|
+
noValidate: !0,
|
|
76
|
+
style: {
|
|
77
|
+
position: "relative"
|
|
78
|
+
},
|
|
79
|
+
config: t,
|
|
80
|
+
formRef: p,
|
|
81
|
+
...m,
|
|
82
|
+
className: [o == null ? void 0 : o.classNames, m == null ? void 0 : m.className].filter(Boolean).join(" "),
|
|
83
|
+
onSubmit: F,
|
|
84
|
+
children: [
|
|
85
|
+
i("top"),
|
|
86
|
+
(o == null ? void 0 : o.devTool) && /* @__PURE__ */ l(
|
|
87
|
+
N,
|
|
88
|
+
{
|
|
89
|
+
isDevelopment: t == null ? void 0 : t.isDevelopment,
|
|
90
|
+
props: typeof o.devTool == "object" ? o.devTool : void 0
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
x && /* @__PURE__ */ l(x, { ...h }),
|
|
94
|
+
b,
|
|
95
|
+
i("bottom")
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
export {
|
|
101
|
+
A as default
|
|
102
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { FormProvider as d } from "react-hook-form";
|
|
3
3
|
import n from "../errors/flat/context/FlatFieldErrorsContextProvider.mjs";
|
|
4
|
-
import l from "./context/utils/
|
|
4
|
+
import l from "./context/utils/RhfUtilsContextProvider.mjs";
|
|
5
5
|
function v({
|
|
6
6
|
formId: t,
|
|
7
7
|
formRef: o,
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import t from "../../../errors/flat/useFlatFieldErrorsOutput.mjs";
|
|
3
|
+
import l from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
|
|
4
|
+
import F from "../../../submit/useResetFormOnSubmitError.mjs";
|
|
5
|
+
import O from "../../../submit/useResetFormOnSubmitSuccessful.mjs";
|
|
6
|
+
import b from "../../../submit/useSubmitFormOnChange.mjs";
|
|
7
|
+
import { _RhfUtilsContextProvider as d } from "./useRhfUtilsContext.mjs";
|
|
8
|
+
function P({
|
|
9
|
+
formId: u,
|
|
10
|
+
formRef: e,
|
|
11
|
+
onSubmitSuccessfulAndReset: m,
|
|
12
|
+
options: r,
|
|
13
|
+
children: a
|
|
14
|
+
}) {
|
|
15
|
+
return t(), b(e, {
|
|
16
|
+
disabled: !(r != null && r.submitOnChange)
|
|
17
|
+
}), F({
|
|
18
|
+
disabled: !(r != null && r.resetValuesOnSubmitError)
|
|
19
|
+
}), O(
|
|
20
|
+
(r == null ? void 0 : r.resetFormAfterSubmitSuccessful) || !!m
|
|
21
|
+
), l(() => {
|
|
22
|
+
m == null || m();
|
|
23
|
+
}), /* @__PURE__ */ f(d, { value: { formId: u, formRef: e, options: r }, children: a });
|
|
24
|
+
}
|
|
25
|
+
export {
|
|
26
|
+
P as default
|
|
27
|
+
};
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import
|
|
1
|
+
import s from "react";
|
|
2
2
|
import { useForm as d } from "react-hook-form";
|
|
3
3
|
import { FormSubmitError as F } from "../submit/error/FormSubmitError.mjs";
|
|
4
|
-
const
|
|
4
|
+
const v = ({
|
|
5
5
|
onSubmit: e,
|
|
6
6
|
onSubmitError: f,
|
|
7
|
-
onSubmitInvalid:
|
|
8
|
-
defaultValues:
|
|
7
|
+
onSubmitInvalid: p,
|
|
8
|
+
defaultValues: n,
|
|
9
9
|
Children: c,
|
|
10
10
|
rhf: i,
|
|
11
11
|
form: u,
|
|
12
|
-
utils:
|
|
12
|
+
utils: t
|
|
13
13
|
}) => {
|
|
14
|
-
const
|
|
14
|
+
const r = s.useId(), m = d({
|
|
15
15
|
...i,
|
|
16
|
-
defaultValues:
|
|
17
|
-
}),
|
|
16
|
+
defaultValues: n
|
|
17
|
+
}), o = s.useRef(null);
|
|
18
18
|
return {
|
|
19
|
-
id:
|
|
20
|
-
ref:
|
|
21
|
-
context:
|
|
19
|
+
id: r,
|
|
20
|
+
ref: o,
|
|
21
|
+
context: m,
|
|
22
22
|
providerProps: {
|
|
23
|
-
formId:
|
|
24
|
-
formRef:
|
|
25
|
-
rhfForm:
|
|
26
|
-
utils:
|
|
23
|
+
formId: r,
|
|
24
|
+
formRef: o,
|
|
25
|
+
rhfForm: m,
|
|
26
|
+
utils: t
|
|
27
27
|
},
|
|
28
28
|
formProps: {
|
|
29
29
|
Children: c,
|
|
30
30
|
onSubmit: e,
|
|
31
31
|
onSubmitError: f,
|
|
32
|
-
onSubmitInvalid:
|
|
33
|
-
formId:
|
|
34
|
-
formRef:
|
|
32
|
+
onSubmitInvalid: p,
|
|
33
|
+
formId: r,
|
|
34
|
+
formRef: o,
|
|
35
35
|
form: u,
|
|
36
|
-
utils:
|
|
36
|
+
utils: t
|
|
37
37
|
},
|
|
38
38
|
FormSubmitError: F
|
|
39
39
|
};
|
|
40
|
-
}
|
|
40
|
+
};
|
|
41
41
|
export {
|
|
42
|
-
|
|
42
|
+
v as default
|
|
43
43
|
};
|
|
@@ -39,18 +39,16 @@ export type RhfUtilsClientConfig = {
|
|
|
39
39
|
*/
|
|
40
40
|
FormComponent?: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLFormElement>>>;
|
|
41
41
|
/**
|
|
42
|
-
* Global submit error handler.
|
|
43
|
-
*
|
|
44
|
-
* Called when/if submit handler throws an error other than {@link FormSubmitError}.
|
|
42
|
+
* Global submit error handler when/if submit handler throws an error other than {@link FormSubmitError}.
|
|
45
43
|
*
|
|
46
44
|
* Example use case:
|
|
47
45
|
* - transform API errors to {@link FormSubmitErrors}.
|
|
48
46
|
*
|
|
49
47
|
* @returns
|
|
50
|
-
* - {@link FormSubmitErrors}: merge into context errors.
|
|
51
|
-
* - `undefined`: do nothing.
|
|
48
|
+
* - if {@link FormSubmitErrors}: merge into context errors.
|
|
49
|
+
* - if `undefined`: do nothing.
|
|
52
50
|
*/
|
|
53
|
-
|
|
51
|
+
onUnknownSubmitError?: (error: unknown) => FormSubmitErrors | undefined;
|
|
54
52
|
/**
|
|
55
53
|
* Components injected by slot across all forms.
|
|
56
54
|
* (Per-form injection can be done via `Children` prop.)
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { UseRhfUtilsFormChildrenProps } from '../../form/UseRhfUtilsFormChildrenProps';
|
|
2
|
+
import { zodTypeInput, zodTypeOutput } from './consts';
|
|
2
3
|
import { ZodTypeFieldValues } from './ZodTypeFieldValues';
|
|
3
4
|
|
|
4
|
-
export type RhfUtilsUseFormChildrenZodProps<TSchema extends ZodTypeFieldValues> = UseRhfUtilsFormChildrenProps<TSchema[
|
|
5
|
+
export type RhfUtilsUseFormChildrenZodProps<TSchema extends ZodTypeFieldValues> = UseRhfUtilsFormChildrenProps<TSchema[typeof zodTypeInput], TSchema[typeof zodTypeOutput]>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { UseRhfUtilsFormProps } from '../../../form/UseRhfUtilsFormProps';
|
|
2
|
+
import { zodTypeInput, zodTypeOutput } from '../consts';
|
|
3
|
+
import { ZodTypeFieldValues } from '../ZodTypeFieldValues';
|
|
4
|
+
|
|
5
|
+
type Props<TSchema extends ZodTypeFieldValues> = {
|
|
6
|
+
schema: TSchema;
|
|
7
|
+
} & Omit<UseRhfUtilsFormProps<TSchema[typeof zodTypeInput], TSchema[typeof zodTypeOutput]>, 'config'>;
|
|
8
|
+
declare function RhfUtilsZodForm<TSchema extends ZodTypeFieldValues>({ schema, ...props }: Props<TSchema>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default RhfUtilsZodForm;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { UseRhfUtilsFormProps } from '../../../form/UseRhfUtilsFormProps';
|
|
2
|
+
import { zodTypeInput, zodTypeOutput } from '../consts';
|
|
2
3
|
import { ZodTypeFieldValues } from '../ZodTypeFieldValues';
|
|
3
4
|
|
|
4
|
-
declare const useRhfUtilsZodForm: <TSchema extends ZodTypeFieldValues>(schema: TSchema, form: Omit<UseRhfUtilsFormProps<TSchema[
|
|
5
|
+
declare const useRhfUtilsZodForm: <TSchema extends ZodTypeFieldValues>(schema: TSchema, form: Omit<UseRhfUtilsFormProps<TSchema[typeof zodTypeInput], TSchema[typeof zodTypeOutput]>, 'config'>) => import('../../../form/UseRhfUtilsFormReturn').UseRhfUtilsFormReturn<TSchema["_input"], TSchema["_output"]> & {
|
|
5
6
|
FormWithProviders: import('react').FC<{
|
|
6
7
|
children?: import('react').ReactNode;
|
|
7
8
|
}>;
|
|
@@ -6,7 +6,8 @@ import { FlatFieldErrors } from './types';
|
|
|
6
6
|
* This makes it easy to work with potentially deeply-nested {@link FieldErrors}.
|
|
7
7
|
*
|
|
8
8
|
* @param errors {@link FieldErrors} object.
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
|
+
* @returns `FlatFieldErrors` object.
|
|
10
11
|
*
|
|
11
12
|
* @example
|
|
12
13
|
* ```
|
|
@@ -28,4 +29,4 @@ export default getFlatFieldErrors;
|
|
|
28
29
|
*
|
|
29
30
|
* iow: dot [?: non-capturing]("type" | "message")[\b word boundary][$ end of string]
|
|
30
31
|
*/
|
|
31
|
-
export declare const
|
|
32
|
+
export declare const regexMaybeFieldErrorLeafNodeSuffix: RegExp;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
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
|
+
*/
|
|
3
8
|
declare const useOrphanFormErrorsMemo: (formRef: React.RefObject<HTMLFormElement>) => import('../flat/types').FlatFieldErrors;
|
|
4
9
|
export default useOrphanFormErrorsMemo;
|