@paragrav/rhf-utils 0.63.0 → 0.64.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -6
- package/dist/dts/_exports/form.d.ts +1 -1
- package/dist/dts/client/config/RhfUtilsClientConfigType.d.ts +6 -2
- package/dist/dts/form/{RhfUtilsFormComponentPropsType.d.ts → RhfUtilsFormInjectorProps.d.ts} +6 -2
- package/dist/dts/form/with-handlers-and-children/RhfUtilsFormProps.d.ts +2 -10
- package/dist/dts/form/with-handlers-and-children/RhfUtilsFormPropsOnBeforeSubmitInvariants.d.ts +12 -0
- package/dist/dts/form/with-providers/RhfUtilsFormWithProvidersProps.d.ts +5 -1
- package/dist/dts/submit/error/FormSubmitFieldErrors.d.ts +1 -1
- package/dist/esm/index.mjs +80 -85
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -77,20 +77,22 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
77
77
|
// inject your own hooks and components
|
|
78
78
|
// into all RhfUtilsZodForm instances
|
|
79
79
|
FormChildren: (
|
|
80
|
-
//
|
|
80
|
+
// RhfUtilsFormInjectorProps
|
|
81
81
|
{
|
|
82
|
+
Outlet, // Form instance (RhfUtilsZodForm.Children) "outlet"
|
|
83
|
+
|
|
82
84
|
formId, // unique id string
|
|
83
85
|
formRef, // form element ref
|
|
84
86
|
context, // rhf UseFormReturn (without proxy `formState`)
|
|
85
87
|
options, // RhfUtilsFormOptions (with any custom props)
|
|
86
88
|
Controller, // rhf controller (SafeFieldValues-typed; no schema at this level)
|
|
87
89
|
FormSubmitError, // error class (SafeFieldValues-typed; no schema at this level)
|
|
88
|
-
children, // RhfUtilsZodForm's Children instance
|
|
89
90
|
},
|
|
90
91
|
) => {
|
|
92
|
+
// hook injected across all instances
|
|
91
93
|
useMyGlobalFormHook();
|
|
92
94
|
|
|
93
|
-
//
|
|
95
|
+
// hook injected across all instances with per-instance opt-in flag via custom option props
|
|
94
96
|
// (see "Extend RhfUtilsFormOptions" section for more info)
|
|
95
97
|
useMyOptionalFormHook({
|
|
96
98
|
enabled: !!options.enableMyOptionalFormHook,
|
|
@@ -98,8 +100,8 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
|
|
|
98
100
|
|
|
99
101
|
return (
|
|
100
102
|
<>
|
|
101
|
-
{/* RhfUtilsZodForm.Children "outlet" (see "Component Hierarchy" section) */}
|
|
102
|
-
|
|
103
|
+
{/* Form instance (RhfUtilsZodForm.Children) "outlet" (see "Component Hierarchy" section). */}
|
|
104
|
+
<Outlet />
|
|
103
105
|
|
|
104
106
|
{/* root errors list */}
|
|
105
107
|
<RootErrorsList />
|
|
@@ -190,7 +192,7 @@ Currently, only `zod` schemas are supported.
|
|
|
190
192
|
{
|
|
191
193
|
field: 'passwordConfirm', // type safe
|
|
192
194
|
message: 'Passwords must match.',
|
|
193
|
-
|
|
195
|
+
validate: data.password === data.passwordConfirm,
|
|
194
196
|
},
|
|
195
197
|
]}
|
|
196
198
|
onBeforeSubmit={({ input, output, api }, context, event) => {
|
|
@@ -2,6 +2,6 @@ export { useRhfUtilsContext } from '../form/context/utils/useRhfUtilsContext';
|
|
|
2
2
|
export type { RhfUtilsFormOptions } from '../form/options/RhfUtilsFormOptionsType';
|
|
3
3
|
export type { SafeFieldValues } from '../form/rhf/SafeFieldValuesType';
|
|
4
4
|
export type { RHF_UseFormReturnWithoutProxies as UseFormReturnWithoutProxies } from '../form/RHF_UseFormReturnWithoutProxiesType';
|
|
5
|
-
export type {
|
|
5
|
+
export type { RhfUtilsFormInjectorProps } from '../form/RhfUtilsFormInjectorProps';
|
|
6
6
|
export type { UseRhfUtilsFormChildrenProps } from '../form/UseRhfUtilsFormChildrenPropsType';
|
|
7
7
|
export { useFormRequestSubmit } from '../form/utils/useFormRequestSubmit';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FlatFieldErrorsOutputConfig } from '../../errors/flat/context/FlatFieldErrorsOutputConfig';
|
|
2
2
|
import { UseRhfUtilsFormGlobalDefaults } from '../../form/defaults/UseRhfUtilsFormGlobalDefaults';
|
|
3
|
-
import {
|
|
3
|
+
import { RhfUtilsFormInjectorProps } from '../../form/RhfUtilsFormInjectorProps';
|
|
4
4
|
import { FormSubmitFieldErrors } from '../../submit/error/FormSubmitFieldErrors';
|
|
5
5
|
import { UseRhfUtilsFormOnSubmitContext } from '../../submit/UseRhfUtilsFormOnSubmitContextType';
|
|
6
6
|
import { MaybePromise } from '../../utils/types';
|
|
@@ -26,8 +26,12 @@ export type RhfUtilsClientConfig = {
|
|
|
26
26
|
* @description
|
|
27
27
|
*
|
|
28
28
|
* (NOTE: context params are not schema-typed as not possible at this level.)
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
*
|
|
32
|
+
* See README.
|
|
29
33
|
*/
|
|
30
|
-
|
|
34
|
+
FormInjector?: React.FC<RhfUtilsFormInjectorProps>;
|
|
31
35
|
/**
|
|
32
36
|
* A hook that returns a callback that determines whether form can be cancelled at event-time.
|
|
33
37
|
*
|
package/dist/dts/form/{RhfUtilsFormComponentPropsType.d.ts → RhfUtilsFormInjectorProps.d.ts}
RENAMED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { UseFormReturn } from 'react-hook-form';
|
|
2
2
|
import { FormSubmitError } from '../submit/error/FormSubmitError';
|
|
3
|
+
import { Merge } from '../utils/types';
|
|
3
4
|
import { _Controller } from './_Controller';
|
|
4
5
|
import { RhfUtilsContext } from './context/utils/RhfUtilsContextType';
|
|
5
6
|
import { SafeFieldValues } from './rhf/SafeFieldValuesType';
|
|
6
7
|
/**
|
|
7
8
|
* RhfUtilsClientConfig's FormComponent props.
|
|
8
9
|
*/
|
|
9
|
-
export type
|
|
10
|
+
export type RhfUtilsFormInjectorProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = TFieldValues> = Merge<{
|
|
11
|
+
/** Form instance children (`RhfUtilsZodForm.Children`) to output amid globally-injected code. */
|
|
12
|
+
Outlet: React.FC;
|
|
13
|
+
}, RhfUtilsContext, {
|
|
10
14
|
rhf: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
|
|
11
15
|
Controller: typeof _Controller<TFieldValues>;
|
|
12
16
|
FormSubmitError: typeof FormSubmitError<TFieldValues>;
|
|
13
|
-
}
|
|
17
|
+
}>;
|
|
@@ -4,16 +4,8 @@ import { UseRhfUtilsFormOnSubmitContext, UseRhfUtilsFormOnSubmitErrorContext } f
|
|
|
4
4
|
import { UseRhfUtilsFormInstanceFormProps } from '../defaults/form/UseRhfUtilsFormInstanceFormProps';
|
|
5
5
|
import { SafeFieldValues } from '../rhf/SafeFieldValuesType';
|
|
6
6
|
import { UseRhfUtilsFormChildrenProps } from '../UseRhfUtilsFormChildrenPropsType';
|
|
7
|
+
import { RhfUtilsFormPropsOnBeforeSubmitInvariants } from './RhfUtilsFormPropsOnBeforeSubmitInvariants';
|
|
7
8
|
export type RhfUtilsFormPropsGetApiValues<TTransformedValues extends SafeFieldValues, TApiValues> = (data: TTransformedValues) => TApiValues;
|
|
8
|
-
export type RhfUtilsFormPropsonBeforeSubmitInvariants<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues, TApiValues extends undefined | SafeFieldValues> = (data: {
|
|
9
|
-
input: TFieldValues;
|
|
10
|
-
output: TTransformedValues;
|
|
11
|
-
api: TApiValues;
|
|
12
|
-
}, context: UseRhfUtilsFormOnSubmitContext<TFieldValues, TTransformedValues, TApiValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => MaybePromise<{
|
|
13
|
-
field: keyof TFieldValues | keyof TApiValues;
|
|
14
|
-
message: string;
|
|
15
|
-
valid: boolean | undefined | null;
|
|
16
|
-
}[]>;
|
|
17
9
|
export type RhfUtilsFormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues, TGetApiValues extends undefined | RhfUtilsFormPropsGetApiValues<TTransformedValues, SafeFieldValues>, TOnSubmitReturnType, TApiValues extends undefined | SafeFieldValues = TGetApiValues extends RhfUtilsFormPropsGetApiValues<TTransformedValues, infer U> ? U : undefined> = {
|
|
18
10
|
getApiData?: TGetApiValues;
|
|
19
11
|
/** Cancellation handler -- channeled through {@link RhfUtilsClientConfig.useCanFormBeCancelled} before propagating to `Children` component. */
|
|
@@ -24,7 +16,7 @@ export type RhfUtilsFormProps<TFieldValues extends SafeFieldValues, TTransformed
|
|
|
24
16
|
* List of invariants to run against input/output/api data.
|
|
25
17
|
* For any and all false-y values, a {@link FormSubmitFieldErrors} will be thrown.
|
|
26
18
|
*/
|
|
27
|
-
onBeforeSubmitInvariants?:
|
|
19
|
+
onBeforeSubmitInvariants?: RhfUtilsFormPropsOnBeforeSubmitInvariants<TFieldValues, TTransformedValues, TApiValues>;
|
|
28
20
|
onBeforeSubmit?: (data: {
|
|
29
21
|
input: TFieldValues;
|
|
30
22
|
output: TTransformedValues;
|
package/dist/dts/form/with-handlers-and-children/RhfUtilsFormPropsOnBeforeSubmitInvariants.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { UseRhfUtilsFormOnSubmitContext } from '../../submit/UseRhfUtilsFormOnSubmitContextType';
|
|
2
|
+
import { MaybePromise } from '../../utils/types';
|
|
3
|
+
import { SafeFieldValues } from '../rhf/SafeFieldValuesType';
|
|
4
|
+
export type RhfUtilsFormPropsOnBeforeSubmitInvariants<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues, TApiValues extends undefined | SafeFieldValues> = (data: {
|
|
5
|
+
input: TFieldValues;
|
|
6
|
+
output: TTransformedValues;
|
|
7
|
+
api: TApiValues;
|
|
8
|
+
}, context: UseRhfUtilsFormOnSubmitContext<TFieldValues, TTransformedValues, TApiValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => MaybePromise<{
|
|
9
|
+
field: keyof TFieldValues | keyof TApiValues;
|
|
10
|
+
message: string;
|
|
11
|
+
validate: boolean | undefined | null;
|
|
12
|
+
}[]>;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
import { Resolver } from 'react-hook-form';
|
|
2
|
+
import { Merge } from '../../utils/types';
|
|
1
3
|
import { RhfUtilsFormProvidersProps } from '../providers/RhfUtilsFormProvidersPropsType';
|
|
2
4
|
import { SafeFieldValues } from '../rhf/SafeFieldValuesType';
|
|
3
5
|
import { RhfUtilsFormProps, RhfUtilsFormPropsGetApiValues } from '../with-handlers-and-children/RhfUtilsFormProps';
|
|
4
|
-
export type RhfUtilsFormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues, TGetApiValues extends undefined | RhfUtilsFormPropsGetApiValues<TTransformedValues, SafeFieldValues>, TOnSubmitReturnType, TApiValues extends undefined | SafeFieldValues = TGetApiValues extends RhfUtilsFormPropsGetApiValues<TTransformedValues, infer U> ? U : undefined> =
|
|
6
|
+
export type RhfUtilsFormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues, TGetApiValues extends undefined | RhfUtilsFormPropsGetApiValues<TTransformedValues, SafeFieldValues>, TOnSubmitReturnType, TApiValues extends undefined | SafeFieldValues = TGetApiValues extends RhfUtilsFormPropsGetApiValues<TTransformedValues, infer U> ? U : undefined> = Merge<RhfUtilsFormProps<TFieldValues, TTransformedValues, TGetApiValues, TOnSubmitReturnType, TApiValues>, RhfUtilsFormProvidersProps<TFieldValues, TTransformedValues>, {
|
|
7
|
+
resolver?: Resolver<TFieldValues, unknown, TTransformedValues>;
|
|
8
|
+
}>;
|
|
@@ -9,6 +9,6 @@ import { SafeFieldValues } from '../../form/rhf/SafeFieldValuesType';
|
|
|
9
9
|
* - simplified `ErrorOption` value.
|
|
10
10
|
*/
|
|
11
11
|
export type FormSubmitFieldErrors<TFieldValues extends SafeFieldValues = SafeFieldValues> = Record<FieldPath<TFieldValues> | `root.${string}`, {
|
|
12
|
-
type?: string;
|
|
13
12
|
message: string;
|
|
13
|
+
type?: string;
|
|
14
14
|
}>;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -13,15 +13,12 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
13
13
|
}, { Provider: y, useRequired: b } = o(), x = () => {
|
|
14
14
|
let e = b();
|
|
15
15
|
return s.useMemo(() => !e.hasErrors || !e.hasOrphans ? !1 : Object.keys(e.orphans).length === Object.keys(e.all).length, [e]);
|
|
16
|
-
}, S = "data-rhfutils-nonfield-error-marker-path", C = ({ path: e }) => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
...t
|
|
23
|
-
});
|
|
24
|
-
}, w = (e) => s.useCallback((t) => {
|
|
16
|
+
}, S = "data-rhfutils-nonfield-error-marker-path", C = ({ path: e }) => /* @__PURE__ */ c("div", {
|
|
17
|
+
role: "alert",
|
|
18
|
+
"aria-hidden": "true",
|
|
19
|
+
style: { display: "none" },
|
|
20
|
+
[S]: e
|
|
21
|
+
}), w = (e) => s.useCallback((t) => {
|
|
25
22
|
if (!e.current) throw Error();
|
|
26
23
|
ee(e.current, t);
|
|
27
24
|
}, [e]), ee = (e, t) => {
|
|
@@ -35,39 +32,39 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
35
32
|
if (!t) return null;
|
|
36
33
|
let n = typeof t == "object" ? t : void 0;
|
|
37
34
|
return /* @__PURE__ */ c(s.Suspense, { children: /* @__PURE__ */ c(O, { ...n }) });
|
|
38
|
-
},
|
|
35
|
+
}, A = () => /* @__PURE__ */ c(k, { config: r().options.devTool }), j = (e) => /* @__PURE__ */ c(u, { ...e }), M = () => {
|
|
39
36
|
let e = s.useContext(_);
|
|
40
37
|
if (e === void 0) throw Error();
|
|
41
38
|
return e;
|
|
42
|
-
},
|
|
39
|
+
}, ne = () => ({
|
|
43
40
|
utils: r(),
|
|
44
41
|
rhf: p(),
|
|
45
42
|
FormSubmitError: T
|
|
46
|
-
}),
|
|
43
|
+
}), re = (e, t, n) => {
|
|
47
44
|
let r = t?.();
|
|
48
45
|
return async () => {
|
|
49
46
|
if (e && await Promise.resolve(r?.(n)) !== !1) return Promise.resolve(e());
|
|
50
47
|
};
|
|
51
|
-
},
|
|
52
|
-
let { useCanFormBeCancelled: t } =
|
|
53
|
-
return
|
|
54
|
-
},
|
|
55
|
-
let n = p(), i = r(), a =
|
|
48
|
+
}, ie = (e) => {
|
|
49
|
+
let { useCanFormBeCancelled: t } = M();
|
|
50
|
+
return re(e, t, ne());
|
|
51
|
+
}, ae = ({ onCancel: e, Children: t }) => {
|
|
52
|
+
let n = p(), i = r(), a = ie(e);
|
|
56
53
|
return /* @__PURE__ */ c(t, {
|
|
57
54
|
...i,
|
|
58
55
|
rhf: n,
|
|
59
56
|
onCancel: a,
|
|
60
|
-
Controller:
|
|
57
|
+
Controller: j,
|
|
61
58
|
FormSubmitError: T
|
|
62
59
|
});
|
|
63
|
-
},
|
|
60
|
+
}, N = (e, t) => {
|
|
64
61
|
Object.entries(t).forEach(([t, n]) => {
|
|
65
62
|
e.setError(t, {
|
|
66
63
|
type: "FormSubmitFieldError",
|
|
67
64
|
...n
|
|
68
65
|
});
|
|
69
66
|
});
|
|
70
|
-
},
|
|
67
|
+
}, P = (e, t, n) => ({
|
|
71
68
|
...e,
|
|
72
69
|
...t,
|
|
73
70
|
className: [
|
|
@@ -77,7 +74,7 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
77
74
|
].filter(Boolean).join(" ").trim() || void 0
|
|
78
75
|
}), F = (e, t, n) => ({
|
|
79
76
|
id: t,
|
|
80
|
-
...P(
|
|
77
|
+
...P(M().defaults?.form, e, n)
|
|
81
78
|
}), I = (e) => {
|
|
82
79
|
let t = E();
|
|
83
80
|
return async function(n) {
|
|
@@ -98,52 +95,50 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
98
95
|
i?.();
|
|
99
96
|
});
|
|
100
97
|
};
|
|
101
|
-
}, R = ({ getApiData: e, onSubmitInvalid: t, onBeforeSubmitInvariants: n, onBeforeSubmit: i, onSubmit: a, onSubmitSuccess: o, onSubmitError:
|
|
102
|
-
let
|
|
98
|
+
}, R = ({ getApiData: e, onSubmitInvalid: t, onBeforeSubmitInvariants: n, onBeforeSubmit: i, onSubmit: a, onSubmitSuccess: o, onSubmitError: l, onSubmitFinally: u, form: d, className: f, children: m }) => {
|
|
99
|
+
let h = p(), g = r(), _ = M(), v = F(d, g.formId, { className: f }), y = async (t, r) => {
|
|
103
100
|
let s = {
|
|
104
|
-
input:
|
|
101
|
+
input: h.getValues(),
|
|
105
102
|
output: t,
|
|
106
103
|
api: e?.(t)
|
|
107
104
|
}, c = {
|
|
108
|
-
utils:
|
|
109
|
-
rhf:
|
|
105
|
+
utils: g,
|
|
106
|
+
rhf: h,
|
|
110
107
|
FormSubmitError: T
|
|
111
108
|
}, l = r;
|
|
112
109
|
n && await z(n, s, c, l), await Promise.resolve(i?.(s, c, l));
|
|
113
110
|
let u = await Promise.resolve(a?.(s, c, l));
|
|
114
|
-
|
|
111
|
+
g.lastSubmitStateRef.current = "success", await Promise.resolve(o?.(u, s, c, l));
|
|
115
112
|
};
|
|
116
|
-
function
|
|
117
|
-
let n = e instanceof T ? e.errors :
|
|
118
|
-
n &&
|
|
119
|
-
utils:
|
|
113
|
+
function b(e, t) {
|
|
114
|
+
let n = e instanceof T ? e.errors : _.onSubmitErrorUnknown?.(e);
|
|
115
|
+
n && N(h, n), l?.(e, {
|
|
116
|
+
utils: g,
|
|
120
117
|
errors: n,
|
|
121
|
-
rhf:
|
|
118
|
+
rhf: h
|
|
122
119
|
}, t);
|
|
123
120
|
}
|
|
124
|
-
let
|
|
125
|
-
onValid:
|
|
121
|
+
let x = L({
|
|
122
|
+
onValid: y,
|
|
126
123
|
onInvalid: t,
|
|
127
|
-
onError:
|
|
128
|
-
onFinally:
|
|
129
|
-
}),
|
|
130
|
-
...
|
|
131
|
-
rhf:
|
|
132
|
-
Controller:
|
|
133
|
-
FormSubmitError: T
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
children: f
|
|
143
|
-
})
|
|
124
|
+
onError: b,
|
|
125
|
+
onFinally: u
|
|
126
|
+
}), S = s.useCallback(() => m, []), C = {
|
|
127
|
+
...g,
|
|
128
|
+
rhf: h,
|
|
129
|
+
Controller: j,
|
|
130
|
+
FormSubmitError: T,
|
|
131
|
+
Outlet: S
|
|
132
|
+
};
|
|
133
|
+
return /* @__PURE__ */ c(_.FormComponent ?? "form", {
|
|
134
|
+
...v,
|
|
135
|
+
id: g.formId,
|
|
136
|
+
ref: g.formRef,
|
|
137
|
+
onSubmit: x,
|
|
138
|
+
children: _.FormInjector ? /* @__PURE__ */ c(_.FormInjector, { ...C }) : m
|
|
144
139
|
});
|
|
145
140
|
}, z = async (e, t, n, r) => {
|
|
146
|
-
let i = (await Promise.resolve(e(t, n, r))).filter(({
|
|
141
|
+
let i = (await Promise.resolve(e(t, n, r))).filter(({ validate: e }) => !e).map(({ field: e, message: t }) => [e, { message: t }]);
|
|
147
142
|
if (i.length) throw new n.FormSubmitError(Object.fromEntries(i));
|
|
148
143
|
}, B = ({ getApiData: e, onCancel: t, onSubmitInvalid: n, onBeforeSubmitInvariants: r, onBeforeSubmit: i, onSubmit: a, onSubmitSuccess: o, onSubmitError: s, onSubmitFinally: u, Children: d, form: f, className: p }) => /* @__PURE__ */ l(R, {
|
|
149
144
|
getApiData: e,
|
|
@@ -156,24 +151,24 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
156
151
|
onSubmitFinally: u,
|
|
157
152
|
form: f,
|
|
158
153
|
className: p,
|
|
159
|
-
children: [/* @__PURE__ */ c(
|
|
154
|
+
children: [/* @__PURE__ */ c(A, {}), /* @__PURE__ */ c(ae, {
|
|
160
155
|
onCancel: t,
|
|
161
156
|
Children: d
|
|
162
157
|
})]
|
|
163
|
-
}), V = (e) => /* @__PURE__ */ c(B, { ...e }), H = (e) => (t) => Object.fromEntries(Object.entries(t).filter(e)), U = (e) => !!e.ref, W = H(([, e]) => U(e)), G = (e, t) => [["", ""], ...t?.excludeNested ? [] : [["^", "."]]].map(([t, n]) => K(S + t, e + n)).join(", "), K = (e, t) => `[role="alert"][${e}="${t}"]`, q = (e, t) => !!t.querySelector(G(e)), J = (e) => e === "root" || e.startsWith("root."),
|
|
164
|
-
let { errors: r } = m(), a = i(r), o = e.current ?
|
|
158
|
+
}), V = (e) => /* @__PURE__ */ c(B, { ...e }), H = (e) => (t) => Object.fromEntries(Object.entries(t).filter(e)), U = (e) => !!e.ref, W = H(([, e]) => U(e)), G = (e, t) => [["", ""], ...t?.excludeNested ? [] : [["^", "."]]].map(([t, n]) => K(S + t, e + n)).join(", "), K = (e, t) => `[role="alert"][${e}="${t}"]`, q = (e, t) => !!t.querySelector(G(e)), J = (e) => e === "root" || e.startsWith("root."), oe = (e, t, n) => !U(t) && !J(e) && !q(e, n), se = (e) => ([t, n]) => oe(t, n, e), ce = (e, t) => H(se(t))(e), le = H(([e]) => J(e)), ue = ({ formRef: e, children: t }) => {
|
|
159
|
+
let { errors: r } = m(), a = i(r), o = e.current ? ce(a, e.current) : {};
|
|
165
160
|
return /* @__PURE__ */ c(y, {
|
|
166
161
|
value: {
|
|
167
162
|
all: a,
|
|
168
163
|
fields: W(a),
|
|
169
|
-
roots:
|
|
164
|
+
roots: le(a),
|
|
170
165
|
orphans: o,
|
|
171
166
|
hasErrors: !n(r),
|
|
172
167
|
hasOrphans: !n(o)
|
|
173
168
|
},
|
|
174
169
|
children: t
|
|
175
170
|
});
|
|
176
|
-
},
|
|
171
|
+
}, de = ({ children: e }) => {
|
|
177
172
|
let [t, n] = s.useState(void 0);
|
|
178
173
|
return /* @__PURE__ */ c(te, {
|
|
179
174
|
value: {
|
|
@@ -190,35 +185,35 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
190
185
|
},
|
|
191
186
|
children: e
|
|
192
187
|
});
|
|
193
|
-
},
|
|
188
|
+
}, fe = (e, t, n, r = "debug") => {
|
|
194
189
|
console[r](e, {
|
|
195
190
|
values: t,
|
|
196
191
|
errors: n
|
|
197
192
|
});
|
|
198
|
-
},
|
|
193
|
+
}, pe = (e) => {
|
|
199
194
|
let t = p(), n = b();
|
|
200
195
|
s.useEffect(() => {
|
|
201
196
|
if (!n.hasErrors) return;
|
|
202
197
|
let r = e?.console?.(n);
|
|
203
|
-
r &&
|
|
198
|
+
r && fe(r.message ?? Y, t.getValues(), n, r.type);
|
|
204
199
|
let i = e?.throw?.(n);
|
|
205
200
|
if (i) throw Error(typeof i == "string" ? i : Y);
|
|
206
201
|
}, [n]);
|
|
207
|
-
}, Y = "Form errors",
|
|
202
|
+
}, Y = "Form errors", me = (e) => {
|
|
208
203
|
let t = s.useRef(!1);
|
|
209
204
|
return s.useEffect(() => {
|
|
210
205
|
e && (t.current = !0);
|
|
211
206
|
}, [e]), [t, () => {
|
|
212
207
|
t.current = !1;
|
|
213
208
|
}];
|
|
214
|
-
},
|
|
215
|
-
let { isSubmitSuccessful: n, isSubmitting: r } = m(), [i, a] =
|
|
209
|
+
}, he = (e, t) => {
|
|
210
|
+
let { isSubmitSuccessful: n, isSubmitting: r } = m(), [i, a] = me(r);
|
|
216
211
|
s.useEffect(() => {
|
|
217
212
|
e && (r || i.current && (a(), (t?.successful === void 0 || n === t.successful) && e(n)));
|
|
218
213
|
}, [r]);
|
|
219
|
-
},
|
|
214
|
+
}, ge = (e) => {
|
|
220
215
|
let { getValues: t, reset: n } = p();
|
|
221
|
-
|
|
216
|
+
he((r) => {
|
|
222
217
|
if (!e) return;
|
|
223
218
|
let i = e[r ? "success" : "error"]?.values;
|
|
224
219
|
if (!i) return;
|
|
@@ -231,12 +226,12 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
231
226
|
keepErrors: !0
|
|
232
227
|
});
|
|
233
228
|
});
|
|
234
|
-
},
|
|
229
|
+
}, _e = () => {
|
|
235
230
|
let e = s.useRef(X);
|
|
236
231
|
return s.useEffect(() => (e.current &&= !X, () => {
|
|
237
232
|
e.current = X;
|
|
238
233
|
}), []), e;
|
|
239
|
-
}, X = !0,
|
|
234
|
+
}, X = !0, ve = ({ onChange: e, delay: t }) => {
|
|
240
235
|
let n = s.useRef(null), r = () => {
|
|
241
236
|
n.current &&= (e(n.current.value), null);
|
|
242
237
|
}, i = () => {
|
|
@@ -248,16 +243,16 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
248
243
|
timer: setTimeout(r, t)
|
|
249
244
|
};
|
|
250
245
|
}];
|
|
251
|
-
},
|
|
252
|
-
let n = w(e), [r] =
|
|
246
|
+
}, ye = (e, t) => {
|
|
247
|
+
let n = w(e), [r] = ve({
|
|
253
248
|
delay: t?.debounce ?? 0,
|
|
254
249
|
onChange: () => {
|
|
255
250
|
n();
|
|
256
251
|
}
|
|
257
252
|
});
|
|
258
253
|
return r;
|
|
259
|
-
},
|
|
260
|
-
let n =
|
|
254
|
+
}, be = (e, t) => {
|
|
255
|
+
let n = ye(e, { debounce: t?.debounce }), r = h(), { isValid: i, isDirty: a, isValidating: o, isSubmitting: c } = m(), l = s.useMemo(() => JSON.stringify(r), [r]), u = _e();
|
|
261
256
|
s.useEffect(() => {
|
|
262
257
|
u.current || o || c || i && a && n(r);
|
|
263
258
|
}, [
|
|
@@ -266,9 +261,9 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
266
261
|
l,
|
|
267
262
|
o
|
|
268
263
|
]);
|
|
269
|
-
},
|
|
264
|
+
}, xe = ({ formId: t, formRef: n, options: r, children: i }) => {
|
|
270
265
|
let [a] = s.useState(r);
|
|
271
|
-
return
|
|
266
|
+
return pe(M().fieldErrors?.output), (a.submitOnWatch ? be : void 0)?.(n, a.submitOnWatch), ge(a.resetOnSubmitted), /* @__PURE__ */ c(e, {
|
|
272
267
|
value: {
|
|
273
268
|
formId: t,
|
|
274
269
|
formRef: n,
|
|
@@ -277,48 +272,48 @@ var _ = s.createContext(void 0), v = ({ config: e, children: n }) => {
|
|
|
277
272
|
},
|
|
278
273
|
children: i
|
|
279
274
|
});
|
|
280
|
-
},
|
|
275
|
+
}, Se = (e, t) => ({
|
|
281
276
|
...e,
|
|
282
277
|
...t,
|
|
283
278
|
...(e?.resetOnSubmitted || t?.resetOnSubmitted) && { resetOnSubmitted: {
|
|
284
279
|
...e?.resetOnSubmitted,
|
|
285
280
|
...t?.resetOnSubmitted
|
|
286
281
|
} }
|
|
287
|
-
}),
|
|
282
|
+
}), Z = (e, t) => s.useMemo(() => Se(e.defaults?.options, t), [JSON.stringify(t)]), Ce = (e, t) => ({
|
|
288
283
|
...e,
|
|
289
284
|
...t
|
|
290
|
-
}),
|
|
291
|
-
...
|
|
285
|
+
}), we = (e, t, n, r) => f({
|
|
286
|
+
...Ce(t.defaults?.rhf, e),
|
|
292
287
|
resolver: r,
|
|
293
288
|
defaultValues: n
|
|
294
289
|
});
|
|
295
290
|
//#endregion
|
|
296
291
|
//#region src/form/providers/RhfUtilsFormProviders.tsx
|
|
297
292
|
function Q({ formId: e, rhf: t, resolver: n, defaultValues: r, options: i, relay: o, children: u }) {
|
|
298
|
-
let f =
|
|
293
|
+
let f = M(), p = s.useId(), m = e || p, h = s.useRef(null), g = we(t, f, r, n), _ = Z(f, i);
|
|
299
294
|
return /* @__PURE__ */ c(d, {
|
|
300
295
|
...g,
|
|
301
|
-
children: /* @__PURE__ */ c(
|
|
296
|
+
children: /* @__PURE__ */ c(ue, {
|
|
302
297
|
formRef: h,
|
|
303
|
-
children: /* @__PURE__ */ l(
|
|
298
|
+
children: /* @__PURE__ */ l(xe, {
|
|
304
299
|
formId: m,
|
|
305
300
|
formRef: h,
|
|
306
301
|
options: _,
|
|
307
|
-
children: [/* @__PURE__ */ c(a, { options: o }), /* @__PURE__ */ c(
|
|
302
|
+
children: [/* @__PURE__ */ c(a, { options: o }), /* @__PURE__ */ c(de, { children: u })]
|
|
308
303
|
})
|
|
309
304
|
})
|
|
310
305
|
});
|
|
311
306
|
}
|
|
312
307
|
//#endregion
|
|
313
308
|
//#region src/resolvers/zod/getZodResolver.ts
|
|
314
|
-
var $ = (e) => g(e),
|
|
309
|
+
var $ = (e) => g(e), Te = ({ schema: e, children: t, ...n }) => /* @__PURE__ */ c(Q, {
|
|
315
310
|
...n,
|
|
316
311
|
resolver: $(e),
|
|
317
312
|
children: t
|
|
318
313
|
});
|
|
319
314
|
//#endregion
|
|
320
315
|
//#region src/form/with-providers/RhfUtilsFormWithProviders.tsx
|
|
321
|
-
function
|
|
316
|
+
function Ee({ getApiData: e, resolver: t, rhf: n, defaultValues: r, options: i, relay: a, onCancel: o, onSubmitInvalid: s, onBeforeSubmitInvariants: l, onBeforeSubmit: u, onSubmit: d, onSubmitSuccess: f, onSubmitError: p, onSubmitFinally: m, Children: h, form: g, formId: _, className: v }) {
|
|
322
317
|
let y = {
|
|
323
318
|
formId: _,
|
|
324
319
|
resolver: t,
|
|
@@ -347,9 +342,9 @@ function De({ getApiData: e, resolver: t, rhf: n, defaultValues: r, options: i,
|
|
|
347
342
|
}
|
|
348
343
|
//#endregion
|
|
349
344
|
//#region src/resolvers/zod/with-providers/RhfUtilsZodFormWithProviders.tsx
|
|
350
|
-
var
|
|
345
|
+
var De = ({ schema: e, ...t }) => /* @__PURE__ */ c(Ee, {
|
|
351
346
|
...t,
|
|
352
347
|
resolver: $(e)
|
|
353
348
|
});
|
|
354
349
|
//#endregion
|
|
355
|
-
export { T as FormSubmitError, v as RhfUtilsClientConfigProvider, C as RhfUtilsNonFieldErrorMarker, V as RhfUtilsZodForm,
|
|
350
|
+
export { T as FormSubmitError, v as RhfUtilsClientConfigProvider, C as RhfUtilsNonFieldErrorMarker, V as RhfUtilsZodForm, Te as RhfUtilsZodFormProviders, De as RhfUtilsZodFormWithProviders, b as useFlatFieldErrorsContext, x as useFlatFieldErrorsContextHasOnlyOrphans, w as useFormRequestSubmit, D as useLastSubmitError, r as useRhfUtilsContext };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paragrav/rhf-utils",
|
|
3
3
|
"author": "paragrav.dev",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.64.0",
|
|
5
5
|
"description": "Integration utilities for react-hook-form.",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"sideEffects": false,
|
|
@@ -60,17 +60,17 @@
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@eslint/compat": "^2.0.
|
|
63
|
+
"@eslint/compat": "^2.0.5",
|
|
64
64
|
"@eslint/eslintrc": "^3.3.5",
|
|
65
65
|
"@eslint/js": "^9.39.4",
|
|
66
|
-
"@playwright/experimental-ct-react": "^1.
|
|
67
|
-
"@playwright/test": "^1.
|
|
66
|
+
"@playwright/experimental-ct-react": "^1.59.1",
|
|
67
|
+
"@playwright/test": "^1.59.1",
|
|
68
68
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
69
|
-
"@types/node": "^24.12.
|
|
70
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
71
|
-
"@typescript-eslint/parser": "^8.
|
|
69
|
+
"@types/node": "^24.12.2",
|
|
70
|
+
"@typescript-eslint/eslint-plugin": "^8.59.0",
|
|
71
|
+
"@typescript-eslint/parser": "^8.59.0",
|
|
72
72
|
"@vitejs/plugin-react": "^6.0.1",
|
|
73
|
-
"clean-publish": "^6.0.
|
|
73
|
+
"clean-publish": "^6.0.5",
|
|
74
74
|
"cross-env": "^10.1.0",
|
|
75
75
|
"eslint": "^9.39.4",
|
|
76
76
|
"eslint-config-prettier": "^10.1.8",
|
|
@@ -80,22 +80,22 @@
|
|
|
80
80
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
81
81
|
"eslint-plugin-prettier": "^5.5.5",
|
|
82
82
|
"eslint-plugin-react": "^7.37.5",
|
|
83
|
-
"eslint-plugin-react-hooks": "^7.
|
|
83
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
84
84
|
"eslint-plugin-react-refresh": "^0.5.2",
|
|
85
85
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
86
|
-
"globals": "^17.
|
|
87
|
-
"happy-dom": "^20.
|
|
86
|
+
"globals": "^17.5.0",
|
|
87
|
+
"happy-dom": "^20.9.0",
|
|
88
88
|
"husky": "^9.1.7",
|
|
89
89
|
"lint-staged": "^16.4.0",
|
|
90
|
-
"prettier": "^3.8.
|
|
91
|
-
"rollup": "^4.60.
|
|
90
|
+
"prettier": "^3.8.3",
|
|
91
|
+
"rollup": "^4.60.2",
|
|
92
92
|
"safe-stable-stringify": "^2.5.0",
|
|
93
|
-
"terser": "^5.46.
|
|
94
|
-
"typescript": "^6.0.
|
|
95
|
-
"typescript-eslint": "^8.
|
|
96
|
-
"vite": "^8.0.
|
|
93
|
+
"terser": "^5.46.2",
|
|
94
|
+
"typescript": "^6.0.3",
|
|
95
|
+
"typescript-eslint": "^8.59.0",
|
|
96
|
+
"vite": "^8.0.10",
|
|
97
97
|
"vite-plugin-dts": "^4.5.4",
|
|
98
|
-
"vitest": "^4.1.
|
|
98
|
+
"vitest": "^4.1.5"
|
|
99
99
|
},
|
|
100
100
|
"resolutions": {
|
|
101
101
|
"eslint": "^9.39.4",
|