@paragrav/rhf-utils 0.0.28 → 0.0.31

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 (49) hide show
  1. package/dist/esm/errors/consoleErrors.mjs +9 -0
  2. package/dist/esm/errors/context/index.mjs +9 -4
  3. package/dist/esm/errors/context/provider.mjs +7 -7
  4. package/dist/esm/errors/nonfield/FormNonFieldErrorMarker.mjs +1 -1
  5. package/dist/esm/errors/nonfield/FormNonFieldErrorMarker.utils.mjs +3 -3
  6. package/dist/esm/errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs +4 -0
  7. package/dist/esm/errors/orphan/useOrphanFormErrorsToConsole.mjs +18 -0
  8. package/dist/esm/errors/outputErrors.mjs +8 -0
  9. package/dist/esm/errors/useFormErrorConsoleDebug.mjs +8 -6
  10. package/dist/esm/errors/useFormErrorsToConsole.mjs +21 -0
  11. package/dist/esm/errors/useFormRequestSubmit.mjs +5 -3
  12. package/dist/esm/form/context/parent/FormParentContextProvider.mjs +10 -0
  13. package/dist/esm/form/context/parent/index.mjs +6 -0
  14. package/dist/esm/form/context/parent/useAsFormParentState.mjs +14 -0
  15. package/dist/esm/form/context/parent/useFormParentIsBusy.mjs +8 -0
  16. package/dist/esm/form/useFormIsBusy.mjs +9 -0
  17. package/dist/esm/main.mjs +30 -24
  18. package/dist/esm/submit/useResetFormOnSubmitSuccessful.mjs +10 -7
  19. package/dist/esm/utils/createContext.mjs +13 -0
  20. package/dist/types/devtool/LazyDevTool.d.ts +2 -2
  21. package/dist/types/errors/consoleErrors.d.ts +13 -0
  22. package/dist/types/errors/context/index.d.ts +3 -3
  23. package/dist/types/errors/context/provider.d.ts +2 -0
  24. package/dist/types/errors/nonfield/FormNonFieldErrorMarker.utils.d.ts +0 -5
  25. package/dist/types/errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.d.ts +5 -0
  26. package/dist/types/errors/orphan/useOrphanFormErrorsToConsole.d.ts +9 -0
  27. package/dist/types/errors/outputErrors.d.ts +14 -0
  28. package/dist/types/errors/root/FormRootErrors.d.ts +7 -0
  29. package/dist/types/errors/useFormErrorConsoleDebug.d.ts +1 -1
  30. package/dist/types/errors/useFormErrorsToConsole.d.ts +14 -0
  31. package/dist/types/form/Form.d.ts +17 -5
  32. package/dist/types/form/FormBase.d.ts +9 -0
  33. package/dist/types/form/FormError.d.ts +6 -0
  34. package/dist/types/form/context/FormProvider.d.ts +13 -0
  35. package/dist/types/form/context/parent/FormParentContextProvider.d.ts +5 -0
  36. package/dist/types/form/context/parent/index.d.ts +6 -0
  37. package/dist/types/form/context/parent/useAsFormParentState.d.ts +7 -0
  38. package/dist/types/form/context/parent/useFormParentIsBusy.d.ts +7 -0
  39. package/dist/types/form/context/utils/FormUtilsContextProvider.d.ts +12 -0
  40. package/dist/types/form/context/utils/useFormUtilsContext.d.ts +9 -0
  41. package/dist/types/form/search/FormSearch.d.ts +2 -2
  42. package/dist/types/form/useForm.d.ts +28 -0
  43. package/dist/types/form/useFormIsBusy.d.ts +2 -0
  44. package/dist/types/main.d.ts +5 -2
  45. package/dist/types/submit/useResetFormOnSubmitSuccessful.d.ts +1 -1
  46. package/dist/types/utils/createContext.d.ts +8 -0
  47. package/package.json +21 -5
  48. package/dist/esm/errors/orphan/useOrphanFormErrorsToConsoleError.mjs +0 -24
  49. package/dist/esm/utils/createRequiredContext.mjs +0 -13
@@ -0,0 +1,9 @@
1
+ const l = (e, c, r) => {
2
+ console[r != null && r.isError ? "error" : "debug"](e, {
3
+ form: c,
4
+ other: r == null ? void 0 : r.other
5
+ });
6
+ };
7
+ export {
8
+ l as default
9
+ };
@@ -1,6 +1,11 @@
1
- import r from "../../utils/createRequiredContext.mjs";
2
- const [t, e] = r(), s = t;
1
+ import r from "../../utils/createContext.mjs";
2
+ const [
3
+ e,
4
+ t,
5
+ s
6
+ ] = r(), a = t;
3
7
  export {
4
- e as _FormErrorsFlatContextProvider,
5
- s as default
8
+ s as _FormErrorsFlatContextProvider,
9
+ a as default,
10
+ e as useFormErrorsFlatContextMaybe
6
11
  };
@@ -1,7 +1,7 @@
1
- import { jsx as F } from "react/jsx-runtime";
2
- import a from "../flat/getFlatFieldErrors.mjs";
3
- import i from "../orphan/getOrphanFlatFieldErrors.mjs";
4
- import l from "../root/getRootFlatFieldErrors.mjs";
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import F from "../flat/getFlatFieldErrors.mjs";
3
+ import a from "../orphan/getOrphanFlatFieldErrors.mjs";
4
+ import i from "../root/getRootFlatFieldErrors.mjs";
5
5
  import p from "../useFormErrorsMemo.mjs";
6
6
  import { _FormErrorsFlatContextProvider as c } from "./index.mjs";
7
7
  const d = ({
@@ -9,10 +9,10 @@ const d = ({
9
9
  children: t
10
10
  }) => {
11
11
  const e = p((s) => {
12
- const r = a(s), m = l(r), n = i(r, o.current);
13
- return { flattened: r, roots: m, orphans: n };
12
+ const r = F(s), m = i(r), n = a(r, o.current);
13
+ return { all: r, roots: m, orphans: n };
14
14
  });
15
- return /* @__PURE__ */ F(c, { value: e, children: t });
15
+ return /* @__PURE__ */ l(c, { value: e, children: t });
16
16
  }, C = d;
17
17
  export {
18
18
  C as default
@@ -1,5 +1,5 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import e from "./FormNonFieldErrorMarker.utils.mjs";
2
+ import e from "./FormNonFieldErrorMarkerHtmlAttribute.mjs";
3
3
  const a = ({ path: r }) => {
4
4
  const o = {
5
5
  [e]: r
@@ -1,6 +1,6 @@
1
- const e = "data-paragrav-rhf-utils-nonfield-error-marker-path", a = e, t = (r) => `[role="alert"][${e}="${r}"]`, l = (r, o) => !!o.querySelector(t(r));
1
+ import o from "./FormNonFieldErrorMarkerHtmlAttribute.mjs";
2
+ const t = (r) => `[role="alert"][${o}="${r}"]`, n = (r, e) => !!e.querySelector(t(r));
2
3
  export {
3
- a as default,
4
4
  t as getFormNonFieldErrorMarkerQuerySelector,
5
- l as hasNonFieldErrorMarkerInDOM
5
+ n as hasNonFieldErrorMarkerInDOM
6
6
  };
@@ -0,0 +1,4 @@
1
+ const r = "data-paragrav-rhf-utils-nonfield-error-marker-path", t = r;
2
+ export {
3
+ t as default
4
+ };
@@ -0,0 +1,18 @@
1
+ import "react";
2
+ import n from "../useFormErrorsToConsole.mjs";
3
+ import t from "./useOrphanFormErrorsMemo.mjs";
4
+ const a = (r, s, e) => {
5
+ const o = t(r);
6
+ n("Orphan errors detected!", o, {
7
+ disabled: !e,
8
+ isDev: s,
9
+ isError: !0,
10
+ data: {
11
+ location: window.location,
12
+ orphans: o
13
+ }
14
+ });
15
+ }, d = a;
16
+ export {
17
+ d as default
18
+ };
@@ -0,0 +1,8 @@
1
+ import t from "./consoleErrors.mjs";
2
+ const c = (u, E, r) => {
3
+ if (t(u, E, r), r != null && r.isDev && r.isError)
4
+ throw new Error(u);
5
+ }, f = c;
6
+ export {
7
+ f as default
8
+ };
@@ -1,8 +1,10 @@
1
- import e from "./useFormErrorsIfAny.mjs";
2
- const s = (o) => {
3
- const r = e();
4
- o && r && console.debug("useFormErrorConsoleDebug", r);
5
- }, n = s;
1
+ import { useFormContext as s } from "react-hook-form";
2
+ import t from "./outputErrors.mjs";
3
+ import u from "./useFormErrorsIfAny.mjs";
4
+ const m = (o) => {
5
+ const { getValues: e } = s(), r = u();
6
+ o && r && t("useFormErrorConsoleDebug", { values: e(), errors: r });
7
+ }, i = m;
6
8
  export {
7
- n as default
9
+ i as default
8
10
  };
@@ -0,0 +1,21 @@
1
+ import a from "react";
2
+ import { useFormContext as c, useFormState as l } from "react-hook-form";
3
+ import E from "../isEmptyObject.mjs";
4
+ import d from "./outputErrors.mjs";
5
+ const v = (e, m, r) => {
6
+ const { getValues: f } = c(), { errors: u } = l();
7
+ a.useEffect(() => {
8
+ if (!(r != null && r.disabled) && !E(m) && (d(e, { values: f(), errors: u }, r), console[r != null && r.isError ? "error" : "debug"](e, {
9
+ form: {
10
+ values: f(),
11
+ // form values
12
+ errors: u
13
+ },
14
+ other: r == null ? void 0 : r.data
15
+ }), r != null && r.isError))
16
+ throw new Error(e);
17
+ }, [u]);
18
+ };
19
+ export {
20
+ v as default
21
+ };
@@ -1,8 +1,10 @@
1
1
  const r = (t) => (e) => {
2
2
  if (!t.current)
3
3
  throw new Error();
4
- t.current.requestSubmit(e);
5
- }, u = r;
4
+ u(t.current, e);
5
+ }, s = r, u = (t, e) => {
6
+ t.requestSubmit(e);
7
+ };
6
8
  export {
7
- u as default
9
+ s as default
8
10
  };
@@ -0,0 +1,10 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import s from "react";
3
+ import { _FormParentContextProvider as n } from "./index.mjs";
4
+ const a = ({ children: t }) => {
5
+ const [r, o] = s.useState(!1);
6
+ return /* @__PURE__ */ e(n, { value: { isBusy: r, setIsBusy: o }, children: t });
7
+ }, P = a;
8
+ export {
9
+ P as default
10
+ };
@@ -0,0 +1,6 @@
1
+ import t from "../../../utils/createContext.mjs";
2
+ const [o, , r] = t();
3
+ export {
4
+ r as _FormParentContextProvider,
5
+ o as _useFormParentContext
6
+ };
@@ -0,0 +1,14 @@
1
+ import o from "react";
2
+ import r from "../../useFormIsBusy.mjs";
3
+ import { _useFormParentContext as s } from "./index.mjs";
4
+ const n = () => {
5
+ const e = r(), t = s();
6
+ if (!t)
7
+ throw new Error("Parent context is not provided.");
8
+ o.useEffect(() => {
9
+ t.setIsBusy(e);
10
+ }, [t, e]);
11
+ }, c = n;
12
+ export {
13
+ c as default
14
+ };
@@ -0,0 +1,8 @@
1
+ import { _useFormParentContext as t } from "./index.mjs";
2
+ const e = () => {
3
+ var s;
4
+ return (s = t()) == null ? void 0 : s.isBusy;
5
+ }, r = e;
6
+ export {
7
+ r as default
8
+ };
@@ -0,0 +1,9 @@
1
+ import { useFormState as r } from "react-hook-form";
2
+ import e from "./context/parent/useFormParentIsBusy.mjs";
3
+ const m = () => {
4
+ const { isSubmitting: t, isLoading: o } = r(), s = e();
5
+ return !!(t || o || s);
6
+ };
7
+ export {
8
+ m as default
9
+ };
package/dist/esm/main.mjs CHANGED
@@ -4,37 +4,43 @@ import { default as f } from "./errors/context/provider.mjs";
4
4
  import { default as u } from "./errors/message/FormErrorMessage.mjs";
5
5
  import { default as d } from "./errors/message/FormErrorMessageByPath.mjs";
6
6
  import { default as p } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
7
- import { default as E } from "./errors/nonfield/FormNonFieldErrorMarker.utils.mjs";
7
+ import { default as n } from "./errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs";
8
8
  import { default as i } from "./errors/orphan/useFormHasOrphanAndNoFieldErrors.mjs";
9
- import { default as M } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
10
- import { default as b } from "./errors/orphan/useOrphanFormErrorsToConsoleError.mjs";
11
- import { default as O } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
12
- import { default as C } from "./errors/useFormErrorConsoleDebug.mjs";
13
- import { default as g } from "./errors/useFormErrorsEffect.mjs";
14
- import { default as N } from "./errors/useFormErrorsIfAny.mjs";
15
- import { default as v } from "./errors/useFormErrorsMemo.mjs";
16
- import { default as H } from "./errors/useFormRequestSubmit.mjs";
17
- import { default as T } from "./submit/useFormOnSubmitSuccessful.mjs";
18
- import { default as z } from "./submit/useFormOnSubmitSuccessfulAndReset.mjs";
19
- import { default as I } from "./submit/useResetFormOnSubmitSuccessful.mjs";
9
+ import { default as c } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
10
+ import { default as b } from "./errors/orphan/useOrphanFormErrorsToConsole.mjs";
11
+ import { default as P } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
12
+ import { default as O } from "./errors/useFormErrorConsoleDebug.mjs";
13
+ import { default as y } from "./errors/useFormErrorsEffect.mjs";
14
+ import { default as g } from "./errors/useFormErrorsIfAny.mjs";
15
+ import { default as N } from "./errors/useFormErrorsMemo.mjs";
16
+ import { default as B } from "./errors/useFormRequestSubmit.mjs";
17
+ import { default as H } from "./form/context/parent/FormParentContextProvider.mjs";
18
+ import { default as T } from "./form/context/parent/useAsFormParentState.mjs";
19
+ import { default as z } from "./form/context/parent/useFormParentIsBusy.mjs";
20
+ import { default as j } from "./submit/useFormOnSubmitSuccessful.mjs";
21
+ import { default as G } from "./submit/useFormOnSubmitSuccessfulAndReset.mjs";
22
+ import { default as K } from "./submit/useResetFormOnSubmitSuccessful.mjs";
20
23
  export {
21
24
  u as FormErrorMessage,
22
25
  d as FormErrorMessageByPath,
23
26
  f as FormErrorsFlatContextProvider,
24
27
  p as FormNonFieldErrorMarker,
25
- E as FormNonFieldErrorMarkerHtmlAttribute,
28
+ n as FormNonFieldErrorMarkerHtmlAttribute,
29
+ H as FormParentContextProvider,
26
30
  e as LazyDevTool,
27
- C as useFormErrorConsoleDebug,
28
- g as useFormErrorsEffect,
31
+ T as useAsFormParentState,
32
+ O as useFormErrorConsoleDebug,
33
+ y as useFormErrorsEffect,
29
34
  s as useFormErrorsFlatContext,
30
- N as useFormErrorsIfAny,
31
- v as useFormErrorsMemo,
35
+ g as useFormErrorsIfAny,
36
+ N as useFormErrorsMemo,
32
37
  i as useFormHasOrphanAndNoFieldErrors,
33
- T as useFormOnSubmitSuccessful,
34
- z as useFormOnSubmitSuccessfulAndReset,
35
- H as useFormRequestSubmit,
36
- M as useOrphanFormErrorsMemo,
37
- b as useOrphanFormErrorsToConsoleError,
38
- I as useResetFormAfterSubmitSuccessful,
39
- O as useRootFormFieldErrorsMemo
38
+ j as useFormOnSubmitSuccessful,
39
+ G as useFormOnSubmitSuccessfulAndReset,
40
+ z as useFormParentIsBusy,
41
+ B as useFormRequestSubmit,
42
+ c as useOrphanFormErrorsMemo,
43
+ b as useOrphanFormErrorsToConsole,
44
+ K as useResetFormAfterSubmitSuccessful,
45
+ P as useRootFormFieldErrorsMemo
40
46
  };
@@ -1,11 +1,14 @@
1
- import { useFormContext as r } from "react-hook-form";
2
- import t from "./useFormOnSubmitSuccessful.mjs";
3
- const s = (e) => {
4
- const { reset: u } = r();
5
- t(() => {
6
- e != null && e.enabled && u(void 0, e);
1
+ import { useFormContext as u } from "react-hook-form";
2
+ import o from "./useFormOnSubmitSuccessful.mjs";
3
+ const r = ({
4
+ enabled: e,
5
+ ...t
6
+ }) => {
7
+ const { reset: s } = u();
8
+ o(() => {
9
+ e && s(void 0, t);
7
10
  });
8
- }, f = s;
11
+ }, f = r;
9
12
  export {
10
13
  f as default
11
14
  };
@@ -0,0 +1,13 @@
1
+ import r from "react";
2
+ function u() {
3
+ const t = r.createContext(void 0), e = () => r.useContext(t);
4
+ return [e, () => {
5
+ const o = e();
6
+ if (o === void 0)
7
+ throw new Error();
8
+ return o;
9
+ }, t.Provider];
10
+ }
11
+ export {
12
+ u as default
13
+ };
@@ -1,11 +1,11 @@
1
1
  import { default as React } from 'react';
2
2
  import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
3
3
 
4
- type Props = Omit<DevtoolUIProps, 'control'> & {
4
+ export type LazyDevToolProps = Omit<DevtoolUIProps, 'control'> & {
5
5
  isDev: boolean;
6
6
  };
7
7
  /**
8
8
  * Lazy-loaded RHF DevTool.
9
9
  */
10
- declare const LazyDevTool: React.FC<Props>;
10
+ declare const LazyDevTool: React.FC<LazyDevToolProps>;
11
11
  export default LazyDevTool;
@@ -0,0 +1,13 @@
1
+ import { FieldErrors, FieldValues } from 'react-hook-form';
2
+
3
+ /**
4
+ * Output form values and errors to console.
5
+ */
6
+ declare const consoleErrors: (message: string, form: {
7
+ values: FieldValues;
8
+ errors: FieldErrors;
9
+ }, options?: {
10
+ other?: Record<string, unknown>;
11
+ isError?: boolean;
12
+ }) => void;
13
+ export default consoleErrors;
@@ -1,10 +1,10 @@
1
1
  import { FlatFieldErrors } from '../flat/types';
2
2
 
3
3
  export type FormErrorsFlatContext = {
4
- flattened: FlatFieldErrors;
4
+ all: FlatFieldErrors;
5
5
  roots: FlatFieldErrors;
6
6
  orphans: FlatFieldErrors;
7
7
  };
8
- declare const useFormErrorsFlatContext: () => FormErrorsFlatContext, _FormErrorsFlatContextProvider: import('react').Provider<FormErrorsFlatContext | undefined>;
8
+ declare const useFormErrorsFlatContextMaybe: () => FormErrorsFlatContext | undefined, useFormErrorsFlatContext: () => FormErrorsFlatContext, _FormErrorsFlatContextProvider: import('react').Provider<FormErrorsFlatContext | undefined>;
9
9
  export default useFormErrorsFlatContext;
10
- export { _FormErrorsFlatContextProvider };
10
+ export { _FormErrorsFlatContextProvider, useFormErrorsFlatContextMaybe };
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  type Props = React.PropsWithChildren<{
3
3
  formRef: React.MutableRefObject<HTMLFormElement>;
4
+ isDev?: boolean;
5
+ outputErrors?: boolean;
4
6
  }>;
5
7
  /**
6
8
  * Provides a flattened version of the form errors.
@@ -1,7 +1,2 @@
1
- /**
2
- * HTML data attribute for {@link FormNonFieldErrorMarker}.
3
- */
4
- declare const FormNonFieldErrorMarkerHtmlAttribute = "data-paragrav-rhf-utils-nonfield-error-marker-path";
5
- export default FormNonFieldErrorMarkerHtmlAttribute;
6
1
  export declare const getFormNonFieldErrorMarkerQuerySelector: (path: string) => string;
7
2
  export declare const hasNonFieldErrorMarkerInDOM: (path: string, parentElement: Pick<HTMLElement, 'querySelector'>) => boolean;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * HTML data attribute for {@link FormNonFieldErrorMarker}.
3
+ */
4
+ declare const FormNonFieldErrorMarkerHtmlAttribute = "data-paragrav-rhf-utils-nonfield-error-marker-path";
5
+ export default FormNonFieldErrorMarkerHtmlAttribute;
@@ -0,0 +1,9 @@
1
+ import { default as React } from 'react';
2
+
3
+ /**
4
+ * Logs out orphan errors to console.error.
5
+ *
6
+ * When `isDev`, it will also throw an error to bring attention to dev.
7
+ */
8
+ declare const useOrphanFormErrorsToConsole: (formRef: React.RefObject<HTMLFormElement>, isDev?: boolean, enabled?: boolean) => void;
9
+ export default useOrphanFormErrorsToConsole;
@@ -0,0 +1,14 @@
1
+ import { FieldErrors, FieldValues } from 'react-hook-form';
2
+
3
+ /**
4
+ * Output form values and errors to console and throw in dev.
5
+ */
6
+ declare const outputErrors: (message: string, form: {
7
+ values: FieldValues;
8
+ errors: FieldErrors;
9
+ }, options?: {
10
+ other?: Record<string, unknown>;
11
+ isDev?: boolean;
12
+ isError?: boolean;
13
+ }) => void;
14
+ export default outputErrors;
@@ -0,0 +1,7 @@
1
+ import { FlatFieldErrors } from '../flat/types';
2
+
3
+ type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> & {
4
+ errors: FlatFieldErrors;
5
+ };
6
+ declare const FormRootErrors: React.FC<Props>;
7
+ export default FormRootErrors;
@@ -4,5 +4,5 @@
4
4
  *
5
5
  * `console.debug()` is unlikely to trigger any automated console capture reporting.
6
6
  */
7
- declare const useFormErrorConsoleDebug: (condition: boolean) => void;
7
+ declare const useFormErrorConsoleDebug: (enabled?: boolean) => void;
8
8
  export default useFormErrorConsoleDebug;
@@ -0,0 +1,14 @@
1
+ import { FlatFieldErrors } from './flat/types';
2
+
3
+ /**
4
+ * Logs out orphan errors to console.error.
5
+ *
6
+ * When `isDev`, 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
+ isDev?: boolean;
11
+ isError?: boolean;
12
+ data?: Record<string, unknown>;
13
+ }) => void;
14
+ export default useFormErrorsToConsole;
@@ -1,9 +1,21 @@
1
+ import { FormBaseProps } from './FormBase';
2
+ import { LazyDevToolProps } from '../devtool/LazyDevTool';
3
+ import { FieldValues, SubmitErrorHandler, UseFormReturn } from 'react-hook-form';
1
4
  import { default as React } from 'react';
2
5
 
3
- export type FormProps = React.PropsWithoutRef<JSX.IntrinsicElements['form']> & {
4
- antiCsrfToken?: string;
6
+ export type FormProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = Omit<FormBaseProps, 'onSubmit'> & {
7
+ isDev: boolean;
8
+ formRef: React.RefObject<HTMLFormElement>;
9
+ onSubmit: (values: TTransformedValues, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => unknown | Promise<unknown>;
10
+ /** Submit error handler. (Only for errors not of instance `FormError`, which are handled internally.) */
11
+ onSubmitError?: (error: unknown, values: TTransformedValues, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => void;
12
+ /** Submit handler when form is invalid. */
13
+ onSubmitInvalid?: SubmitErrorHandler<TFieldValues>;
14
+ options?: {
15
+ disableEmptyRootError?: boolean;
16
+ devTool?: LazyDevToolProps | 'disabled';
17
+ };
18
+ className?: string;
5
19
  };
6
- declare const Form: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
7
- antiCsrfToken?: string | undefined;
8
- } & React.RefAttributes<HTMLFormElement>>;
20
+ declare function Form<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, formRef, onSubmit, onSubmitError, onSubmitInvalid, options, children, ...props }: FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
9
21
  export default Form;
@@ -0,0 +1,9 @@
1
+ import { default as React } from 'react';
2
+
3
+ export type FormBaseProps = React.PropsWithoutRef<JSX.IntrinsicElements['form']> & {
4
+ antiCsrfToken?: string;
5
+ };
6
+ declare const _default: (props: Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & {
7
+ antiCsrfToken?: string | undefined;
8
+ } & React.RefAttributes<HTMLFormElement>) => React.ReactNode;
9
+ export default _default;
@@ -0,0 +1,6 @@
1
+ import { FieldPath, FieldValues } from 'react-hook-form';
2
+
3
+ export declare class FormError<TFieldValues extends FieldValues> extends Error {
4
+ errors: Partial<Record<FieldPath<TFieldValues> | `root.${string}`, string>>;
5
+ constructor(errors: Partial<Record<FieldPath<TFieldValues> | `root.${string}`, string>>, message?: string);
6
+ }
@@ -0,0 +1,13 @@
1
+ import { FormUtilsContextProviderProps } from './utils/FormUtilsContextProvider';
2
+ import { FormProps } from '../Form';
3
+ import { FieldValues, UseFormReturn } from 'react-hook-form';
4
+
5
+ type Props<TFieldValues extends FieldValues, // input values
6
+ TTransformedValues extends FieldValues> = React.PropsWithChildren<{
7
+ ctx: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
8
+ } & {
9
+ form: FormProps<TFieldValues, TTransformedValues>;
10
+ utils?: FormUtilsContextProviderProps;
11
+ }>;
12
+ declare function FormProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ ctx, form, utils, children }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
13
+ export default FormProvider;
@@ -0,0 +1,5 @@
1
+ import { default as React } from 'react';
2
+
3
+ type Props = React.PropsWithChildren;
4
+ declare const FormParentContextProvider: React.FC<Props>;
5
+ export default FormParentContextProvider;
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ export type FormParentContext = {
3
+ isBusy: boolean;
4
+ setIsBusy: (isBusy: boolean) => void;
5
+ };
6
+ export declare const _useFormParentContext: () => FormParentContext | undefined, _FormParentContextProvider: import('react').Provider<FormParentContext | undefined>;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Connect specific form state as parent context.
3
+ *
4
+ * Requires usage of provider.
5
+ */
6
+ declare const useAsFormParentState: () => void;
7
+ export default useAsFormParentState;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Get parent form state, if exists.
3
+ *
4
+ * Context provider not required. (`undefined` value in this case.)
5
+ */
6
+ declare const useFormParentIsBusy: () => boolean | undefined;
7
+ export default useFormParentIsBusy;
@@ -0,0 +1,12 @@
1
+ import { FormProps } from '../../Form';
2
+ import { FieldValues } from 'react-hook-form';
3
+
4
+ export type FormUtilsContextProviderProps = {
5
+ /** Callback after successful submit, and form reset. */
6
+ onSubmitSuccessfulAndReset?: () => void;
7
+ };
8
+ type Props<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = React.PropsWithChildren<{
9
+ formProps: FormProps<TFieldValues, TTransformedValues>;
10
+ } & FormUtilsContextProviderProps>;
11
+ declare function FormUtilsContextProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ formProps, onSubmitSuccessfulAndReset, children, }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
12
+ export default FormUtilsContextProvider;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ export type FormUtilsContext = {
3
+ formRef: React.RefObject<HTMLFormElement>;
4
+ /** Callback to trigger submit manually -- e.g., on change. */
5
+ requestSubmit: HTMLFormElement['requestSubmit'];
6
+ };
7
+ declare const useFormUtilsContext: () => FormUtilsContext, _FormUtilsContextProvider: import('react').Provider<FormUtilsContext | undefined>;
8
+ export default useFormUtilsContext;
9
+ export { _FormUtilsContextProvider };
@@ -1,8 +1,8 @@
1
- import { FormProps } from '../Form';
1
+ import { FormBaseProps } from '../FormBase';
2
2
  import { z } from 'zod';
3
3
  import { default as React } from 'react';
4
4
 
5
- declare const _default: <TSchema extends z.ZodTypeAny, TSchemaOutput extends z.output<TSchema> = z.output<TSchema>>(props: Omit<FormProps, "children" | "onSubmit"> & {
5
+ declare const _default: <TSchema extends z.ZodTypeAny, TSchemaOutput extends z.output<TSchema> = z.output<TSchema>>(props: Omit<FormBaseProps, "children" | "onSubmit"> & {
6
6
  /**
7
7
  * Search params schema.
8
8
  *
@@ -0,0 +1,28 @@
1
+ import { FormProps } from './Form';
2
+ import { FormUtilsContextProviderProps } from './context/utils/FormUtilsContextProvider';
3
+ import { FieldValues, UseFormProps as RhfUseFormProps } from 'react-hook-form';
4
+ import { default as React } from 'react';
5
+
6
+ export type UseFormProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = {
7
+ rhf: RhfUseFormProps<TFieldValues>;
8
+ props: FormProps<TFieldValues, TTransformedValues>;
9
+ utils?: FormUtilsContextProviderProps;
10
+ };
11
+ export type UseFormReturn = ReturnType<typeof useForm>;
12
+ /**
13
+ * Base Rhf Form hook. Use `Form` in `index.ts` for most cases.
14
+ * Use this if you need to separate form components.
15
+ * e.g., a form for table row due to `form` being considered invalid HTML around `tr` tags.
16
+ * With this hook, you can wrap the `tr` tag with `form.Provider` and use `form.Form` inside
17
+ * one of the cells. Other components can be outside form while referring to form by its id via `form` attribute.
18
+ * see https://caniuse.com/?search=form%20attribute
19
+ * @returns Form provider and form.
20
+ */
21
+ export declare const useForm: <TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ rhf, props, utils, }: UseFormProps<TFieldValues, TTransformedValues>) => {
22
+ Provider: React.FC<{
23
+ children?: React.ReactNode;
24
+ }>;
25
+ Form: React.FC<{
26
+ children?: React.ReactNode;
27
+ }>;
28
+ };
@@ -0,0 +1,2 @@
1
+ declare const useFormIsBusy: () => boolean;
2
+ export default useFormIsBusy;
@@ -4,16 +4,19 @@ export { default as FormErrorsFlatContextProvider } from './errors/context/provi
4
4
  export { default as FormErrorMessage } from './errors/message/FormErrorMessage';
5
5
  export { default as FormErrorMessageByPath } from './errors/message/FormErrorMessageByPath';
6
6
  export { default as FormNonFieldErrorMarker } from './errors/nonfield/FormNonFieldErrorMarker';
7
- export { default as FormNonFieldErrorMarkerHtmlAttribute } from './errors/nonfield/FormNonFieldErrorMarker.utils';
7
+ export { default as FormNonFieldErrorMarkerHtmlAttribute } from './errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute';
8
8
  export { default as useFormHasOrphanAndNoFieldErrors } from './errors/orphan/useFormHasOrphanAndNoFieldErrors';
9
9
  export { default as useOrphanFormErrorsMemo } from './errors/orphan/useOrphanFormErrorsMemo';
10
- export { default as useOrphanFormErrorsToConsoleError } from './errors/orphan/useOrphanFormErrorsToConsoleError';
10
+ export { default as useOrphanFormErrorsToConsole } from './errors/orphan/useOrphanFormErrorsToConsole';
11
11
  export { default as useRootFormFieldErrorsMemo } from './errors/root/useRootFormFieldErrorsMemo';
12
12
  export { default as useFormErrorConsoleDebug } from './errors/useFormErrorConsoleDebug';
13
13
  export { default as useFormErrorsEffect } from './errors/useFormErrorsEffect';
14
14
  export { default as useFormErrorsIfAny } from './errors/useFormErrorsIfAny';
15
15
  export { default as useFormErrorsMemo } from './errors/useFormErrorsMemo';
16
16
  export { default as useFormRequestSubmit } from './errors/useFormRequestSubmit';
17
+ export { default as FormParentContextProvider } from './form/context/parent/FormParentContextProvider';
18
+ export { default as useAsFormParentState } from './form/context/parent/useAsFormParentState';
19
+ export { default as useFormParentIsBusy } from './form/context/parent/useFormParentIsBusy';
17
20
  export { default as useFormOnSubmitSuccessful } from './submit/useFormOnSubmitSuccessful';
18
21
  export { default as useFormOnSubmitSuccessfulAndReset } from './submit/useFormOnSubmitSuccessfulAndReset';
19
22
  export { default as useResetFormAfterSubmitSuccessful } from './submit/useResetFormOnSubmitSuccessful';
@@ -8,5 +8,5 @@ type Options = {
8
8
  * See `Rules` section: https://react-hook-form.com/api/useform/reset/
9
9
  * Specifically: "- It's recommended to reset inside useEffect after submission."
10
10
  */
11
- declare const useResetFormAfterSubmitSuccessful: (options?: Options) => void;
11
+ declare const useResetFormAfterSubmitSuccessful: ({ enabled, ...options }: Options) => void;
12
12
  export default useResetFormAfterSubmitSuccessful;
@@ -0,0 +1,8 @@
1
+ import { default as React } from 'react';
2
+
3
+ /**
4
+ * Create a strongly-typed context that throws error if no provider is found.
5
+ * @returns A tuple with a function to get the context and the context provider.
6
+ */
7
+ declare function createContext<T = unknown>(): readonly [() => T | undefined, () => T & ({} | null), React.Provider<T | undefined>];
8
+ export default createContext;
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.28",
5
+ "version": "0.0.31",
6
6
  "description": "Integration utilities for react-hook-form.",
7
7
  "type": "module",
8
8
  "sideEffects": false,
@@ -71,6 +71,18 @@
71
71
  "default": "./dist/esm/errors/root/useRootFormFieldErrors.mjs",
72
72
  "types": "./dist/types/errors/root/useRootFormFieldErrors.d.ts"
73
73
  },
74
+ "./form/context/parent/FormParentContextProvider": {
75
+ "default": "./dist/esm/form/context/parent/FormParentContextProvider.mjs",
76
+ "types": "./dist/types/form/context/parent/FormParentContextProvider.d.ts"
77
+ },
78
+ "./form/context/parent/useAsFormParentState": {
79
+ "default": "./dist/esm/form/context/parent/useAsFormParentState.mjs",
80
+ "types": "./dist/types/form/context/parent/useAsFormParentState.d.ts"
81
+ },
82
+ "./form/context/parent/useFormParentIsBusy": {
83
+ "default": "./dist/esm/form/context/parent/useFormParentIsBusy.mjs",
84
+ "types": "./dist/types/form/context/parent/useFormParentIsBusy.d.ts"
85
+ },
74
86
  "./submit/useFormOnSubmitSuccessful": {
75
87
  "default": "./dist/esm/submit/useFormOnSubmitSuccessful.mjs",
76
88
  "types": "./dist/types/submit/useFormOnSubmitSuccessful.d.ts"
@@ -98,13 +110,13 @@
98
110
  "validate": "npm run tsc & npm run lint & npm run test & npm run test:ct"
99
111
  },
100
112
  "peerDependencies": {
113
+ "@hookform/devtools": "^4",
101
114
  "flat": "^6",
102
115
  "query-string": "^9",
103
116
  "react": "^18",
104
117
  "react-hook-form": "^7"
105
118
  },
106
119
  "devDependencies": {
107
- "@hookform/devtools": "^4.3.1",
108
120
  "@hookform/resolvers": "^3.3.4",
109
121
  "@playwright/experimental-ct-react": "^1.42.1",
110
122
  "@rollup/plugin-typescript": "^11.1.6",
@@ -147,9 +159,13 @@
147
159
  },
148
160
  "homepage": "https://github.com/paragrav/rhf-utils",
149
161
  "keywords": [
150
- "react-hook-form",
151
- "zod",
162
+ "integration",
152
163
  "form",
153
- "react"
164
+ "forms",
165
+ "react",
166
+ "react-hook-form",
167
+ "utilities",
168
+ "utils",
169
+ "zod"
154
170
  ]
155
171
  }
@@ -1,24 +0,0 @@
1
- import n from "react";
2
- import { useFormContext as m, useFormState as a } from "react-hook-form";
3
- import c from "../../isEmptyObject.mjs";
4
- import p from "./useOrphanFormErrorsMemo.mjs";
5
- const u = (o, e) => {
6
- const { getValues: s } = m(), { errors: t } = a(), r = p(o);
7
- n.useEffect(() => {
8
- if (!c(r) && (console.error(
9
- "useOrphanFormErrorsToConsoleError",
10
- // include debugging details
11
- {
12
- location: window.location,
13
- values: s(),
14
- // form values
15
- errors: t,
16
- orphans: r
17
- }
18
- ), e))
19
- throw new Error("Orphan errors detected");
20
- }, [r]);
21
- }, h = u;
22
- export {
23
- h as default
24
- };
@@ -1,13 +0,0 @@
1
- import o from "react";
2
- function c() {
3
- const t = o.createContext(void 0);
4
- return [() => {
5
- const e = o.useContext(t);
6
- if (e === void 0)
7
- throw new Error();
8
- return e;
9
- }, t.Provider];
10
- }
11
- export {
12
- c as default
13
- };