@paragrav/rhf-utils 0.0.125 → 0.0.127

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/README.md +44 -31
  2. package/dist/esm/client/index.mjs +29 -35
  3. package/dist/esm/client/utils.mjs +24 -0
  4. package/dist/esm/errors/nonfield/isNonFieldErrorMarkerInDOM.mjs +2 -2
  5. package/dist/esm/errors/orphan/isOrphanFormError.mjs +1 -1
  6. package/dist/esm/errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs +4 -4
  7. package/dist/esm/errors/trpc/trpcClientErrorMessageSchema.mjs +2 -2
  8. package/dist/esm/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs +2 -2
  9. package/dist/esm/exports.mjs +2 -2
  10. package/dist/esm/form/Form.mjs +17 -17
  11. package/dist/esm/form/context/utils/RhfUtilsContextProvider.mjs +10 -10
  12. package/dist/esm/submit/useFormOnSubmitSuccessfulAndReset.mjs +5 -5
  13. package/dist/esm/submit/useFormOnSubmitted.mjs +1 -1
  14. package/dist/esm/submit/useResetFormOnSubmitted.mjs +11 -9
  15. package/dist/esm/utils/useRefIfValueWasTrue.mjs +2 -2
  16. package/dist/types/client/config/RhfUtilsClientConfig.d.ts +2 -2
  17. package/dist/types/client/utils.d.ts +47 -0
  18. package/dist/types/errors/nonfield/isNonFieldErrorMarkerInDOM.d.ts +2 -1
  19. package/dist/types/errors/trpc/getOnSubmitTrpcClientErrorHandler.d.ts +2 -1
  20. package/dist/types/errors/trpc/trpcClientErrorMessageSchema.d.ts +2 -1
  21. package/dist/types/errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.d.ts +2 -1
  22. package/dist/types/exports.d.ts +2 -2
  23. package/dist/types/form/RhfUtilsFormOptions.d.ts +2 -2
  24. package/dist/types/submit/useResetFormOnSubmitted.d.ts +22 -9
  25. package/dist/types/utils/useRefIfValueWasTrue.d.ts +2 -1
  26. package/package.json +1 -1
  27. package/dist/types/client/zod/RhfUtilsZodForm.d.ts +0 -8
  28. package/dist/types/client/zod/UseFormFieldsZodProps.d.ts +0 -4
  29. package/dist/types/client/zod/context/RhfUtilsZodFormWithProviders.d.ts +0 -8
  30. package/dist/types/errors/consoleErrors.d.ts +0 -14
  31. package/dist/types/errors/flat/useFlatFieldErrorsOutput.d.ts +0 -5
  32. package/dist/types/errors/flat/useFormFlatFieldErrorsMemo.d.ts +0 -7
  33. package/dist/types/errors/flat/useRefdFieldErrorsMemo.d.ts +0 -9
  34. package/dist/types/errors/orphan/getOrphansFromFieldErrors.d.ts +0 -5
  35. package/dist/types/errors/orphan/useFormHasOnlyOrphanFieldErrorsMemo.d.ts +0 -6
  36. package/dist/types/errors/orphan/useOrphanFormErrorsMemo.d.ts +0 -9
  37. package/dist/types/errors/orphan/useOrphanFormErrorsToConsole.d.ts +0 -9
  38. package/dist/types/errors/outputErrors.d.ts +0 -14
  39. package/dist/types/errors/root/getRootsFromFieldErrors.d.ts +0 -5
  40. package/dist/types/errors/root/useRootFormFieldErrorsMemo.d.ts +0 -6
  41. package/dist/types/errors/useFormErrorConsoleDebug.d.ts +0 -8
  42. package/dist/types/errors/useFormErrorsEffect.d.ts +0 -4
  43. package/dist/types/errors/useFormErrorsIfAny.d.ts +0 -6
  44. package/dist/types/errors/useFormErrorsToConsole.d.ts +0 -13
  45. package/dist/types/errors/useFormErrorsTransformMemo.d.ts +0 -7
  46. package/dist/types/errors/useFormRequestSubmit.d.ts +0 -6
  47. package/dist/types/form/FormProviders.d.ts +0 -12
  48. package/dist/types/form/_FormBase.d.ts +0 -8
  49. package/dist/types/form/context/utils/FormUtilsContextProvider.d.ts +0 -11
  50. package/dist/types/form/context/utils/useFormUtilsContext.d.ts +0 -12
  51. package/dist/types/form/useForm.d.ts +0 -51
  52. package/dist/types/form/useFormOptions.d.ts +0 -27
  53. package/dist/types/submit/error/setCtxErrorsByFormSubmitError.d.ts +0 -10
  54. package/dist/types/submit/useFormOnSubmitSuccessful.d.ts +0 -2
  55. package/dist/types/submit/useResetFormOnSubmitError.d.ts +0 -9
  56. package/dist/types/submit/useResetFormOnSubmitSuccessful.d.ts +0 -16
package/README.md CHANGED
@@ -38,30 +38,32 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
38
38
  },
39
39
  },
40
40
 
41
- // optional (defaults to primitive HTML form)
41
+ // optional form component (defaults to primitive HTML form)
42
42
  FormComponent: Form.Root,
43
43
 
44
44
  // optional wrapper to inject your own hooks and components
45
45
  // around all RhfUtilsZodForm instances
46
- FormChildren: (
46
+ FormChildrenWrapper: (
47
47
  // UseRhfUtilsFormChildrenProps
48
48
  {
49
49
  formId, // unique id string
50
50
  formRef, // ref
51
51
  context, // rhf UseFormReturn
52
- options, // RhfUtilsFormOptions
52
+ options, // RhfUtilsFormOptions (with any custom props)
53
53
  Controller, // strictly-typed controller
54
54
  FormSubmitError, // strictly-typed error class
55
55
  children, // RhfUtilsZodForm's Children instance
56
56
  },
57
57
  ) => {
58
- // your own hooks/behaviors
59
- // (using custom option prop -- see "Extend RhfUtilsFormOptions" section)
60
- useMyFormNavigationPrompt(!!options?.enableMyFormNavigationPrompt);
58
+ // your own hooks/behaviors controlled via custom option props
59
+ // (see "Extend RhfUtilsFormOptions" section for more info)
60
+ useMyFormNavigationPrompt({
61
+ enabled: !!options?.enableMyFormNavigationPrompt,
62
+ });
61
63
 
62
64
  return (
63
65
  <>
64
- {/* RhfUtilsZodForm Children outlet */}
66
+ {/* RhfUtilsZodForm.Children outlet (see "Component Hierarchy" section) */}
65
67
  {children}
66
68
 
67
69
  {/* root errors list */}
@@ -82,17 +84,18 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
82
84
  return transformServerErrorToFormSubmitErrors(error);
83
85
  },
84
86
 
85
- // form state field errors
86
- fieldErrors: {
87
+ // rhfContext.formState.errors output for debugging
88
+ FieldErrors: {
87
89
  // callbacks to determine when to output information about field errors
88
90
  // provided `FlatFieldErrorsContext` (all, fields, roots, orphans, hasOrphans)
91
+ // (See "Orphan Errors" section below for more info.)
89
92
  output: {
90
93
  // determine when to console ("debug" or "error")
91
94
  console: ({ hasOrphans }) =>
92
- // console error for reporting on prod
93
- (hasOrphans && { type: 'error' }) ||
94
95
  // facilitate local debugging of form validation
95
- (import.meta.env.DEV && { type: 'debug' }),
96
+ (import.meta.env.DEV && { type: 'debug' }) ||
97
+ // console error for reporting on prod
98
+ (hasOrphans && { type: 'error' }),
96
99
 
97
100
  // callback to determine when to throw an error based on field errors
98
101
  throw: ({ hasOrphans }) =>
@@ -165,15 +168,15 @@ Currently, only `zod` is supported.
165
168
  <button type="submit">Login</button>
166
169
  </>
167
170
  )}
168
- // form-specific options/overrides
171
+ // form-specific options/overrides (merged with defaults)
169
172
  rhf={{
170
173
  mode: 'onBlur',
171
174
  }}
172
175
  utils={{
173
176
  submitOnChange: true,
174
- resetValuesOnSubmitted: {
175
- onSuccess: 'current',
176
- onError: 'defaults',
177
+ resetOnSubmitted: {
178
+ onSuccess: { values: 'current' },
179
+ onError: { values: 'defaults' },
177
180
  },
178
181
  // custom option props
179
182
  // (see "Extend RhfUtilsFormOptions" section)
@@ -186,17 +189,9 @@ Currently, only `zod` is supported.
186
189
  />
187
190
  ```
188
191
 
189
- `Children` prop takes a component which is rendered as a child of the form (and, if supplied, of `RhfUtilsClientConfig.FormChildren`). It receives `UseRhfUtilsFormChildrenProps` as props, including a type-safe `Controller` component.
190
-
191
- The component hierarchy is:
192
+ ### Form Children
192
193
 
193
- ```tsx
194
- <RhfUtilsClientConfig.FormComponent>
195
- <RhfUtilsClientConfig.FormChildren>
196
- <RhfUtilsZodForm.Children />
197
- </RhfUtilsClientConfig.FormChildren>
198
- </RhfUtilsClientConfig.FormComponent>
199
- ```
194
+ `Children` prop takes a component which is rendered as a child of the form (and, if supplied, of `RhfUtilsClientConfig.FormChildrenWrapper`). It receives `UseRhfUtilsFormChildrenProps` as props, including a type-safe `Controller` component.
200
195
 
201
196
  If you prefer to define your `Children` component as standalone:
202
197
 
@@ -206,6 +201,20 @@ const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = ({ ... }) => { };
206
201
  function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
207
202
  ```
208
203
 
204
+ ## Component Hierarchy
205
+
206
+ ```tsx
207
+ <ReactHookForm.FormProvider>
208
+ <RhfUtilsProviders>
209
+ <RhfUtilsClientConfig.FormComponent>
210
+ <RhfUtilsClientConfig.FormChildrenWrapper>
211
+ <RhfUtilsZodForm.Children />
212
+ </RhfUtilsClientConfig.FormChildrenWrapper>
213
+ </RhfUtilsClientConfig.FormComponent>
214
+ <RhfUtilsProviders>
215
+ </ReactHookForm.FormProvider>
216
+ ```
217
+
209
218
  ## `FormSubmitError`
210
219
 
211
220
  This is an `Error`-based class you can use to throw a structured error in your submit handler. It is strictly-typed, so it only allows field names from your schema and `root`/`root.{string}` keys.
@@ -244,10 +253,14 @@ type RhfUtilsFormOptions = {
244
253
  /** Request submit via listener on form change. */
245
254
  submitOnChange?: boolean;
246
255
 
247
- /** Reset form after submitted. */
248
- resetFormOnSubmitted?: {
249
- onSuccess?: 'defaults' | 'current';
250
- onError?: 'defaults';
256
+ /**
257
+ * Reset form values and state (e.g., isDirty, etc.) after submit -- on success and/or error.
258
+ * - `defaults`: reset current values to defaults
259
+ * - `current`: reset defaults to current values
260
+ */
261
+ resetOnSubmitted?: {
262
+ success?: { values: 'defaults' | 'current' };
263
+ error?: { values: 'defaults' };
251
264
  };
252
265
 
253
266
  /** Control dev tool options. (Lazy-loaded when truthy value supplied.) */
@@ -282,7 +295,7 @@ You can configure via `RhfUtilsClientConfig` (example at the top) when form cont
282
295
 
283
296
  Use `useFlatFieldErrorsContext()` hook, which returns an object with errors grouped by `all`, `fields`, `roots`, `orphans` records, and `hasErrors` and `hasErrors` and `hasOrphans` booleans.
284
297
 
285
- ### Orphans
298
+ ### Orphan Errors
286
299
 
287
300
  The concept of orphan errors is any error that is not being shown to user. An example would be a stray field in a schema that is prohibiting users from successfully submitting a form.
288
301
 
@@ -1,52 +1,46 @@
1
- import { jsx as u } from "react/jsx-runtime";
2
- import a from "../form/FormWithProviders.mjs";
3
- import F from "../form/useRhfUtilsForm.mjs";
4
- const v = (e) => (r) => {
5
- const m = d(e, r);
1
+ import { jsx as n } from "react/jsx-runtime";
2
+ import m from "../form/FormWithProviders.mjs";
3
+ import l from "../form/useRhfUtilsForm.mjs";
4
+ import { mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps as F } from "./utils.mjs";
5
+ const p = (r) => (o) => {
6
+ const i = f(r, o);
6
7
  return {
7
- useForm: (s, t) => {
8
- const o = m(s, t);
8
+ useForm: (e, t) => {
9
+ const s = i(e, t);
9
10
  return {
10
- ...F(o),
11
- FormWithProviders: () => /* @__PURE__ */ u(a, { ...o })
11
+ ...l(s),
12
+ FormWithProviders: () => /* @__PURE__ */ n(m, { ...s })
12
13
  };
13
14
  },
14
- FormWithProviders: P(e, r)
15
+ FormWithProviders: u(r, o)
15
16
  };
16
- }, d = (e, r) => function(s, t) {
17
- var o, i, f, l, n, h;
17
+ }, f = (r, o) => function(e, t) {
18
18
  return {
19
19
  ...t,
20
- // merge global config with instance options...
21
- rhf: {
22
- resolver: e(s),
23
- ...(o = r.defaults) == null ? void 0 : o.rhf,
24
- ...t.rhf
25
- },
26
- utils: {
27
- ...(i = r.defaults) == null ? void 0 : i.utils,
28
- ...t.utils
29
- },
30
- form: {
31
- ...(f = r.defaults) == null ? void 0 : f.form,
32
- ...t.form,
33
- className: [(n = (l = r.defaults) == null ? void 0 : l.form) == null ? void 0 : n.className, (h = t.form) == null ? void 0 : h.className].filter(Boolean).join(" ")
34
- }
20
+ ...F(
21
+ o.defaults,
22
+ t,
23
+ {
24
+ rhf: {
25
+ resolver: r(e)
26
+ }
27
+ }
28
+ )
35
29
  };
36
- }, P = (e, r) => function({
37
- schema: s,
30
+ }, u = (r, o) => function({
31
+ schema: e,
38
32
  children: t,
39
- ...o
33
+ ...s
40
34
  }) {
41
- const i = d(e, r);
42
- return /* @__PURE__ */ u(
43
- a,
35
+ const h = f(r, o);
36
+ return /* @__PURE__ */ n(
37
+ m,
44
38
  {
45
- ...i(s, o),
39
+ ...h(e, s),
46
40
  children: t
47
41
  }
48
42
  );
49
43
  };
50
44
  export {
51
- v as createRhfUtilsClient
45
+ p as createRhfUtilsClient
52
46
  };
@@ -0,0 +1,24 @@
1
+ const i = (l, ...t) => t.reduce(
2
+ (s, e) => {
3
+ var f, o;
4
+ return {
5
+ rhf: {
6
+ ...s == null ? void 0 : s.rhf,
7
+ ...e.rhf
8
+ },
9
+ utils: {
10
+ ...s == null ? void 0 : s.utils,
11
+ ...e.utils
12
+ },
13
+ form: {
14
+ ...s == null ? void 0 : s.form,
15
+ ...e.form,
16
+ className: [(f = s == null ? void 0 : s.form) == null ? void 0 : f.className, (o = e.form) == null ? void 0 : o.className].filter(Boolean).join(" ")
17
+ }
18
+ };
19
+ },
20
+ l
21
+ );
22
+ export {
23
+ i as mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps
24
+ };
@@ -1,5 +1,5 @@
1
1
  import { getFormNonFieldErrorMarkerQuerySelector as o } from "./FormNonFieldErrorMarker.utils.mjs";
2
- const i = (r, e) => !!e.querySelector(o(r));
2
+ const l = (r, e) => !!e.querySelector(o(r));
3
3
  export {
4
- i as isNonFieldErrorMarkerInDOM
4
+ l as default
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import m from "../isFieldErrorRefd.mjs";
2
- import { isNonFieldErrorMarkerInDOM as t } from "../nonfield/isNonFieldErrorMarkerInDOM.mjs";
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 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);
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
- m as getOnSubmitTrpcClientErrorHandler
5
+ a as default
6
6
  };
@@ -1,10 +1,10 @@
1
1
  import { z as r } from "zod";
2
- const e = r.object({
2
+ const a = r.object({
3
3
  validation: r.string(),
4
4
  code: r.string(),
5
5
  message: r.string(),
6
6
  path: r.array(r.string())
7
7
  });
8
8
  export {
9
- e as trpcClientErrorMessageSchema
9
+ a as default
10
10
  };
@@ -1,6 +1,6 @@
1
1
  import { TRPCClientError as o } from "@trpc/client";
2
2
  import { z as e } from "zod";
3
- import { trpcClientErrorMessageSchema as a } from "./trpcClientErrorMessageSchema.mjs";
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 trpcClientErrorToFormSubmitErrorsSchemaTransformer
33
+ i as default
34
34
  };
@@ -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 { getOnSubmitTrpcClientErrorHandler as E } from "./errors/trpc/getOnSubmitTrpcClientErrorHandler.mjs";
10
- import { trpcClientErrorToFormSubmitErrorsSchemaTransformer as c } from "./errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer.mjs";
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";
@@ -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 _ from "./_Controller.mjs";
10
- function G({
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 n = j(), t = w(), y = async (o) => {
22
+ const e = j(), t = w(), y = async (o) => {
23
23
  r != null && r.stopSubmitPropagation && o.stopPropagation();
24
24
  try {
25
- await n.handleSubmit(f, i)(o);
26
- } catch (e) {
27
- b(e, o);
25
+ await e.handleSubmit(f, i)(o);
26
+ } catch (n) {
27
+ b(n, o);
28
28
  }
29
- }, f = (o, e) => a == null ? void 0 : a(
29
+ }, f = (o, n) => a == null ? void 0 : a(
30
30
  o,
31
31
  {
32
32
  formId: p,
33
33
  formRef: m,
34
- context: n,
34
+ context: e,
35
35
  utils: r,
36
36
  FormSubmitError: s
37
37
  },
38
- e
39
- ), b = (o, e) => {
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(n, C), d == null || d(
48
+ C && S(e, C), d == null || d(
49
49
  o,
50
50
  {
51
51
  formId: p,
52
52
  formRef: m,
53
- context: n,
53
+ context: e,
54
54
  utils: r
55
55
  },
56
- e
56
+ n
57
57
  );
58
58
  }, c = {
59
59
  formId: p,
60
60
  formRef: m,
61
- context: n,
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.FormChildren) ?? U;
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
- G as default
85
+ A as default
86
86
  };
@@ -1,28 +1,28 @@
1
- import { jsx as l } from "react/jsx-runtime";
1
+ import { jsx as u } from "react/jsx-runtime";
2
2
  import d from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
3
- import i from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
4
- import u from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
3
+ import f from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
4
+ import i from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
5
5
  import x from "../../../submit/useResetFormOnSubmitted.mjs";
6
6
  import F from "../../../submit/useSubmitFormOnChange.mjs";
7
7
  import { _RhfUtilsContextProvider as O } from "./useRhfUtilsContext.mjs";
8
8
  const P = ({
9
- formId: C,
9
+ formId: l,
10
10
  formRef: m,
11
11
  onSubmitSuccessfulAndReset: t,
12
12
  options: r,
13
- children: f
13
+ children: C
14
14
  }) => {
15
15
  var a;
16
16
  const e = d();
17
- return i((a = e == null ? void 0 : e.fieldErrors) == null ? void 0 : a.output), F(m, {
17
+ return f((a = e == null ? void 0 : e.FieldErrors) == null ? void 0 : a.output), F(m, {
18
18
  disabled: !(r != null && r.submitOnChange)
19
19
  }), x(
20
- (r == null ? void 0 : r.resetFormOnSubmitted) ?? (t && {
21
- onSuccess: "defaults"
20
+ (r == null ? void 0 : r.resetOnSubmitted) ?? (t && {
21
+ success: { values: "defaults" }
22
22
  })
23
- ), u(() => {
23
+ ), i(() => {
24
24
  t == null || t();
25
- }), /* @__PURE__ */ l(O, { value: { formId: C, formRef: m, options: r }, children: f });
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 { useRefIfValueWasTrue as m } from "../utils/useRefIfValueWasTrue.mjs";
4
- const n = (t) => {
5
- const { isDirty: s, isSubmitSuccessful: e } = i(), [u, r] = m(e);
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
- t && (s || !e && !u || (t(), r()));
8
- }, [e, s]);
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 { useRefIfValueWasTrue as m } from "../utils/useRefIfValueWasTrue.mjs";
3
+ import m from "../utils/useRefIfValueWasTrue.mjs";
4
4
  const c = (e, f) => {
5
5
  const { isSubmitSuccessful: i, isSubmitting: t } = o(), [r, s] = m(t);
6
6
  u.useEffect(() => {
@@ -1,21 +1,23 @@
1
- import { useFormContext as m } from "react-hook-form";
2
- import n from "./useFormOnSubmitted.mjs";
3
- const S = (e) => {
4
- const { reset: r, getValues: u } = m();
5
- n((s) => {
1
+ import { useFormContext as c } from "react-hook-form";
2
+ import i from "./useFormOnSubmitted.mjs";
3
+ const f = (e) => {
4
+ const { reset: u, getValues: s } = c();
5
+ i((o) => {
6
+ var r;
6
7
  if (!e) return;
7
- const t = e[s ? "onSuccess" : "onError"];
8
+ const t = (r = e[o ? "success" : "error"]) == null ? void 0 : r.values;
8
9
  if (!t) return;
9
- const o = t === "current" ? u() : void 0;
10
- r(o, {
10
+ const m = t === "current" ? s() : void 0;
11
+ u(m, {
11
12
  // keep submit stuff for tracking relevant state (e.g., `useFormOnSubmitSuccessful`)
12
13
  keepIsSubmitSuccessful: !0,
13
14
  keepIsSubmitted: !0,
14
15
  keepSubmitCount: !0,
16
+ // keep errors in the case of unsuccessful submit
15
17
  keepErrors: !0
16
18
  });
17
19
  });
18
20
  };
19
21
  export {
20
- S as default
22
+ f as default
21
23
  };
@@ -1,5 +1,5 @@
1
1
  import t from "react";
2
- const u = (r) => {
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
- u as useRefIfValueWasTrue
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
- FormChildren?: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(props: React.PropsWithChildren<UseRhfUtilsFormChildrenProps<TFieldValues, TTransformedValues>>) => React.ReactNode;
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
- fieldErrors?: {
60
+ FieldErrors?: {
61
61
  /**
62
62
  * Configure how/if errors should be outputted.
63
63
  */
@@ -0,0 +1,47 @@
1
+ import { SafeFieldValues } from '../form/SafeFieldValues';
2
+ import { UseRhfUtilsFormProps } from '../form/UseRhfUtilsFormProps';
3
+ import { RhfUtilsClientConfig } from './config/RhfUtilsClientConfig';
4
+
5
+ /**
6
+ * Merge {@link RhfUtilsClientConfig.defaults} with array of {@link UseRhfUtilsFormProps}'s overrides.
7
+ */
8
+ export declare const mergeRhfUtilsClientConfigDefaultsWithUseRhfUtilsFormProps: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(defaults: RhfUtilsClientConfig['defaults'], ...props: Pick<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>, 'rhf' | 'utils' | 'form'>[]) => {
9
+ rhf?: Pick<Partial<{
10
+ mode: "onChange" | "onBlur" | "onSubmit" | "onTouched" | "all";
11
+ disabled: boolean;
12
+ reValidateMode: "onChange" | "onBlur" | "onSubmit";
13
+ defaultValues: ((payload?: unknown) => Promise<import('react-hook-form').FieldValues>) | {
14
+ [x: string]: any;
15
+ };
16
+ values: import('react-hook-form').FieldValues;
17
+ errors: import('react-hook-form').FieldErrors<import('react-hook-form').FieldValues>;
18
+ resetOptions: Partial<{
19
+ keepDirtyValues: boolean;
20
+ keepErrors: boolean;
21
+ keepDirty: boolean;
22
+ keepValues: boolean;
23
+ keepDefaultValues: boolean;
24
+ keepIsSubmitted: boolean;
25
+ keepIsSubmitSuccessful: boolean;
26
+ keepTouched: boolean;
27
+ keepIsValidating: boolean;
28
+ keepIsValid: boolean;
29
+ keepSubmitCount: boolean;
30
+ }> | undefined;
31
+ resolver: import('react-hook-form').Resolver<import('react-hook-form').FieldValues, any>;
32
+ context: any;
33
+ shouldFocusError: boolean;
34
+ shouldUnregister: boolean;
35
+ shouldUseNativeValidation: boolean;
36
+ progressive: boolean;
37
+ criteriaMode: import('react-hook-form').CriteriaMode;
38
+ delayError: number;
39
+ }>, "shouldUnregister" | "mode" | "reValidateMode" | "resetOptions" | "context" | "shouldFocusError" | "shouldUseNativeValidation" | "progressive" | "criteriaMode" | "delayError"> | undefined;
40
+ utils?: {
41
+ stopSubmitPropagation?: boolean | undefined;
42
+ submitOnChange?: boolean | undefined;
43
+ resetOnSubmitted?: import('../submit/useResetFormOnSubmitted').UseResetFormOnSubmittedOptions;
44
+ devTool?: true | Pick<import('@hookform/devtools/dist/devToolUI').DevtoolUIProps, "placement" | "styles"> | undefined;
45
+ } | undefined;
46
+ form?: Omit<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "onSubmit"> | undefined;
47
+ } | undefined;
@@ -2,4 +2,5 @@
2
2
  * Determine if a non-field error marker is in the DOM.
3
3
  * Note: this will also look for nested markers to accommodate field arrays
4
4
  */
5
- export declare const isNonFieldErrorMarkerInDOM: (path: string, parentElement: Pick<HTMLElement, 'querySelector'>) => boolean;
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
- export declare const getOnSubmitTrpcClientErrorHandler: (onNotTrpcClientError: NonNullable<RhfUtilsClientConfig['onSubmitUnknownError']>) => (error: unknown) => FormSubmitErrors | undefined;
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
- export declare const trpcClientErrorMessageSchema: z.ZodObject<{
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
- export 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<{
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;
@@ -10,8 +10,8 @@ export { default as useFlatFieldErrorsContextHasOnlyOrphans } from './errors/fla
10
10
  export { default as FormErrorMessageByPath } from './errors/message/FormErrorMessageByPath';
11
11
  export { default as FormNonFieldErrorMarker } from './errors/nonfield/FormNonFieldErrorMarker';
12
12
  export { default as RootErrorsListFromFlatFieldErrorsContext } from './errors/root/RootErrorsListFromFlatFieldErrorsContext';
13
- export { getOnSubmitTrpcClientErrorHandler } from './errors/trpc/getOnSubmitTrpcClientErrorHandler';
14
- export { trpcClientErrorToFormSubmitErrorsSchemaTransformer } from './errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer';
13
+ export { default as getOnSubmitTrpcClientErrorHandler } from './errors/trpc/getOnSubmitTrpcClientErrorHandler';
14
+ export { default as trpcClientErrorToFormSubmitErrorsSchemaTransformer } from './errors/trpc/trpcClientErrorToFormSubmitErrorsSchemaTransformer';
15
15
  export type { RhfUtilsFormOptions } from './form/RhfUtilsFormOptions';
16
16
  export type { SafeFieldValues } from './form/SafeFieldValues';
17
17
  export type { UseRhfUtilsFormChildrenProps } from './form/UseRhfUtilsFormChildrenProps';
@@ -12,8 +12,8 @@ export type RhfUtilsFormOptions = {
12
12
  stopSubmitPropagation?: boolean;
13
13
  /** Request submit via listener on form change. */
14
14
  submitOnChange?: boolean;
15
- /** Reset form after submit. */
16
- resetFormOnSubmitted?: UseResetFormOnSubmittedOptions;
15
+ /** Reset form values and state (e.g., `isDirty`) after submit -- on success and/or error. */
16
+ resetOnSubmitted?: UseResetFormOnSubmittedOptions;
17
17
  /**
18
18
  * Control dev tool options.
19
19
  * (Lazy-loaded when truthy value supplied.
@@ -1,21 +1,34 @@
1
1
  /**
2
- * Configuration for hook.
3
- * - `undefined`: disabled
2
+ * Configuration options for {@link useResetFormOnSubmitted}.
4
3
  */
5
4
  export type UseResetFormOnSubmittedOptions = undefined | {
6
5
  /**
7
- * Reset values on submit successful.
8
- * - `'defaults'`: reset to default values
9
- * - `'current'`: reset to current values
6
+ * Reset values on successful submit.
7
+ * - `defaults`: reset current values to defaults
8
+ * - `current`: reset defaults to current values
10
9
  */
11
- onSuccess?: 'defaults' | 'current';
10
+ success?: {
11
+ values: 'defaults' | 'current';
12
+ };
12
13
  /**
13
- * Reset values on submit error. (reset to default values)
14
+ * Reset values to defaults on submit error.
14
15
  */
15
- onError?: 'defaults';
16
+ error?: {
17
+ values: 'defaults';
18
+ };
16
19
  };
17
20
  /**
18
- * Handle resetting after successful submit with no server validation errors.
21
+ * Control resetting of values and (some) state (e.g., `isDirty`) after form submitted.
22
+ *
23
+ * `isDirty` and other state is reset, but submit-related state is preserved, as well as errors.
24
+ *
25
+ * Use cases:
26
+ * - on success:
27
+ * - `defaults`: clear form (reset current values to defaults)
28
+ * - `current`: reset defaults to current values
29
+ * - on error:
30
+ * - reset current values to default values (e.g., submitOnChange reset)
31
+ *
19
32
  * See `Rules` section: https://react-hook-form.com/api/useform/reset/
20
33
  * Specifically: "- It's recommended to reset inside useEffect after submission."
21
34
  */
@@ -1 +1,2 @@
1
- export declare const useRefIfValueWasTrue: (value: boolean) => readonly [boolean, () => void];
1
+ declare const useRefIfValueWasTrue: (value: boolean) => readonly [boolean, () => void];
2
+ export default useRefIfValueWasTrue;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@paragrav/rhf-utils",
3
3
  "author": "paragrav.dev",
4
4
  "license": "MIT",
5
- "version": "0.0.125",
5
+ "version": "0.0.127",
6
6
  "description": "Integration utilities for react-hook-form.",
7
7
  "type": "module",
8
8
  "sideEffects": false,
@@ -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,4 +0,0 @@
1
- import { UseFormFieldsProps } from '../../form/useForm';
2
- import { ZodTypeFieldValues } from './createRhfUtilsClientForZod';
3
-
4
- export type UseFormFieldsZodProps<TSchema extends ZodTypeFieldValues> = UseFormFieldsProps<TSchema['_input'], TSchema['_output']>;
@@ -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,5 +0,0 @@
1
- /**
2
- * Outputs (e.g., console, throw) errors based on config.
3
- */
4
- declare const useFlatFieldErrorsOutput: () => void;
5
- export default useFlatFieldErrorsOutput;
@@ -1,7 +0,0 @@
1
- import { FlatFieldErrors } from './types';
2
-
3
- /**
4
- * Use {@link FieldErrors} as {@link FlatFieldErrors}.
5
- */
6
- declare const useFormFlatFieldErrorsMemo: () => FlatFieldErrors;
7
- export default useFormFlatFieldErrorsMemo;
@@ -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,5 +0,0 @@
1
- import { FieldErrors } from 'react-hook-form';
2
- import { FlatFieldErrors } from '../flat/types';
3
-
4
- declare const getRootsFromFieldErrors: (errors: FieldErrors) => FlatFieldErrors;
5
- export default getRootsFromFieldErrors;
@@ -1,6 +0,0 @@
1
- /**
2
- * Root field errors from form.
3
- * These are typically displayed at the bottom of the form.
4
- */
5
- declare const useRootFormFieldErrorsMemo: () => import('../flat/types').FlatFieldErrors;
6
- export default useRootFormFieldErrorsMemo;
@@ -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,4 +0,0 @@
1
- import { FieldErrors } from 'react-hook-form';
2
-
3
- declare const useFormErrorsEffect: <TReturn>(callback: (errors: FieldErrors) => TReturn) => void;
4
- export default useFormErrorsEffect;
@@ -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,2 +0,0 @@
1
- declare const useFormOnSubmitSuccessful: (callback?: () => void) => void;
2
- export default useFormOnSubmitSuccessful;
@@ -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;