@paragrav/rhf-utils 0.0.125 → 0.0.126

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 CHANGED
@@ -38,7 +38,7 @@ 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
@@ -49,7 +49,7 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
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
@@ -57,7 +57,9 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
57
57
  ) => {
58
58
  // your own hooks/behaviors
59
59
  // (using custom option prop -- see "Extend RhfUtilsFormOptions" section)
60
- useMyFormNavigationPrompt(!!options?.enableMyFormNavigationPrompt);
60
+ useMyFormNavigationPrompt({
61
+ enabled: !!options?.enableMyFormNavigationPrompt,
62
+ });
61
63
 
62
64
  return (
63
65
  <>
@@ -165,15 +167,15 @@ Currently, only `zod` is supported.
165
167
  <button type="submit">Login</button>
166
168
  </>
167
169
  )}
168
- // form-specific options/overrides
170
+ // form-specific options/overrides (merged with defaults)
169
171
  rhf={{
170
172
  mode: 'onBlur',
171
173
  }}
172
174
  utils={{
173
175
  submitOnChange: true,
174
- resetValuesOnSubmitted: {
175
- onSuccess: 'current',
176
- onError: 'defaults',
176
+ resetOnSubmitted: {
177
+ onSuccess: { values: 'current' },
178
+ onError: { values: 'defaults' },
177
179
  },
178
180
  // custom option props
179
181
  // (see "Extend RhfUtilsFormOptions" section)
@@ -245,9 +247,9 @@ type RhfUtilsFormOptions = {
245
247
  submitOnChange?: boolean;
246
248
 
247
249
  /** Reset form after submitted. */
248
- resetFormOnSubmitted?: {
249
- onSuccess?: 'defaults' | 'current';
250
- onError?: 'defaults';
250
+ resetOnSubmitted?: {
251
+ onSuccess?: { values: 'defaults' | 'current' };
252
+ onError?: { values: 'defaults' };
251
253
  };
252
254
 
253
255
  /** Control dev tool options. (Lazy-loaded when truthy value supplied.) */
@@ -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,28 +1,28 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import d from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
3
- import i from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
4
- import u from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
1
+ import { jsx as f } from "react/jsx-runtime";
2
+ import u from "../../../client/config/useRhfUtilsClientConfigContext.mjs";
3
+ import d from "../../../errors/flat/context/useFlatFieldErrorsContextOutput.mjs";
4
+ import i from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
5
5
  import x from "../../../submit/useResetFormOnSubmitted.mjs";
6
- import F from "../../../submit/useSubmitFormOnChange.mjs";
7
- import { _RhfUtilsContextProvider as O } from "./useRhfUtilsContext.mjs";
6
+ import O from "../../../submit/useSubmitFormOnChange.mjs";
7
+ import { _RhfUtilsContextProvider as h } 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
- const e = d();
17
- return i((a = e == null ? void 0 : e.fieldErrors) == null ? void 0 : a.output), F(m, {
16
+ const e = u();
17
+ return d((a = e == null ? void 0 : e.fieldErrors) == null ? void 0 : a.output), O(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
+ onSuccess: { 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__ */ f(h, { value: { formId: l, formRef: m, options: r }, children: C });
26
26
  };
27
27
  export {
28
28
  P as default
@@ -1,13 +1,14 @@
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 n } from "react-hook-form";
2
+ import c from "./useFormOnSubmitted.mjs";
3
+ const a = (e) => {
4
+ const { reset: u, getValues: s } = n();
5
+ c((o) => {
6
+ var r;
6
7
  if (!e) return;
7
- const t = e[s ? "onSuccess" : "onError"];
8
+ const t = (r = e[o ? "onSuccess" : "onError"]) == 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,
@@ -17,5 +18,5 @@ const S = (e) => {
17
18
  });
18
19
  };
19
20
  export {
20
- S as default
21
+ a as default
21
22
  };
@@ -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;
@@ -13,7 +13,7 @@ export type RhfUtilsFormOptions = {
13
13
  /** Request submit via listener on form change. */
14
14
  submitOnChange?: boolean;
15
15
  /** Reset form after submit. */
16
- resetFormOnSubmitted?: UseResetFormOnSubmittedOptions;
16
+ resetOnSubmitted?: UseResetFormOnSubmittedOptions;
17
17
  /**
18
18
  * Control dev tool options.
19
19
  * (Lazy-loaded when truthy value supplied.
@@ -8,11 +8,15 @@ export type UseResetFormOnSubmittedOptions = undefined | {
8
8
  * - `'defaults'`: reset to default values
9
9
  * - `'current'`: reset to current values
10
10
  */
11
- onSuccess?: 'defaults' | 'current';
11
+ onSuccess?: {
12
+ values: 'defaults' | 'current';
13
+ };
12
14
  /**
13
15
  * Reset values on submit error. (reset to default values)
14
16
  */
15
- onError?: 'defaults';
17
+ onError?: {
18
+ values: 'defaults';
19
+ };
16
20
  };
17
21
  /**
18
22
  * Handle resetting after successful submit with no server validation errors.
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.126",
6
6
  "description": "Integration utilities for react-hook-form.",
7
7
  "type": "module",
8
8
  "sideEffects": false,