@paragrav/rhf-utils 0.0.37 → 0.0.45

package/dist/esm/errors/root/FormRootErrors.mjs

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import l from "../../isEmptyObject.mjs";
+const s = ({ errors: r, ...i }) => l(r) ? null : /* @__PURE__ */ e("ul", { ...i, children: Object.values(r).map((t) => /* @__PURE__ */ e(
+  "li",
+  {
+    role: "alert",
+    "aria-live": "polite",
+    children: t.message
+  },
+  JSON.stringify(t)
+)) });
+export {
+  s as default
+};

package/dist/esm/form/Form.mjs

@@ -0,0 +1,82 @@
+import { jsxs as v, jsx as d } from "react/jsx-runtime";
+import "react";
+import { useFormContext as T } from "react-hook-form";
+import w from "../devtool/LazyDevTool.mjs";
+import { useFormErrorsFlatContextMaybe as C } from "../errors/context/index.mjs";
+import P from "../errors/root/FormRootErrors.mjs";
+import V from "../utils/useImperativeForwardedRef.mjs";
+import b from "./FormBase.mjs";
+import { FormError as p } from "./FormError.mjs";
+function A({
+  isDev: s,
+  formId: F,
+  formRef: i,
+  //
+  onSubmit: a,
+  onSubmitError: m,
+  onSubmitInvalid: h,
+  //
+  options: r,
+  //
+  children: y,
+  ...u
+}) {
+  var l;
+  const e = T(), x = V(i), f = (l = C()) == null ? void 0 : l.roots, E = (t) => (r != null && r.stopSubmitPropagation && t.stopPropagation(), e.handleSubmit(
+    R,
+    // `as` required due to conditional generic
+    h
+  )(t)), R = async (t, c) => {
+    try {
+      await (a == null ? void 0 : a(
+        t,
+        e,
+        c
+      ));
+    } catch (o) {
+      if (r != null && r.disableEmptyRootError || e.setError("root", {}), o instanceof p) {
+        Object.entries(o.errors).forEach(([g, j]) => {
+          e.setError(g, {
+            type: "FormError",
+            message: j
+          });
+        });
+        return;
+      }
+      m == null || m(
+        o,
+        t,
+        e,
+        c
+      );
+    }
+  };
+  return /* @__PURE__ */ v(
+    b,
+    {
+      id: F,
+      onSubmit: E,
+      noValidate: !0,
+      ...u,
+      ref: x,
+      style: {
+        position: "relative"
+      },
+      children: [
+        (r == null ? void 0 : r.devTool) !== "disabled" && /* @__PURE__ */ d(
+          w,
+          {
+            isDev: s,
+            placement: "top-right",
+            ...r == null ? void 0 : r.devTool
+          }
+        ),
+        y,
+        f && /* @__PURE__ */ d(P, { errors: f })
+      ]
+    }
+  );
+}
+export {
+  A as default
+};

package/dist/esm/form/FormBase.mjs

@@ -0,0 +1,10 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import "react";
+import a from "../utils/fixedForwardRef.mjs";
+const f = ({ antiCsrfToken: r, children: o, ...e }, t) => /* @__PURE__ */ m("form", { role: "form", ...e, ref: t, children: [
+  r && /* @__PURE__ */ s("input", { type: "hidden", name: "anticsrftoken", value: r }),
+  o
+] }), p = a(f);
+export {
+  p as default
+};

package/dist/esm/form/FormError.mjs

@@ -0,0 +1,8 @@
+class e extends Error {
+  constructor(r, o) {
+    super(o), this.errors = r;
+  }
+}
+export {
+  e as FormError
+};

package/dist/esm/form/FormWithProvider.mjs

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "./useFormWithProvider.mjs";
+function f({ children: i, ...t }) {
+  const r = e(t);
+  return /* @__PURE__ */ o(r.Provider, { children: /* @__PURE__ */ o(r.Form, { children: i }) });
+}
+export {
+  f as default
+};

package/dist/esm/form/context/FormProvider.mjs

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { FormProvider as n } from "react-hook-form";
+import p from "./utils/FormUtilsContextProvider.mjs";
+function F({
+  isDev: o,
+  formId: m,
+  formRef: i,
+  rhf: t,
+  form: e,
+  utils: d,
+  children: f
+}) {
+  return /* @__PURE__ */ r(n, { ...t, children: /* @__PURE__ */ r(
+    p,
+    {
+      isDev: o,
+      formId: m,
+      formRef: i,
+      formProps: e,
+      ...d,
+      children: f
+    }
+  ) });
+}
+export {
+  F as default
+};

package/dist/esm/form/context/group/useFormGroupChildIsMountedTracker.mjs

@@ -1,16 +1,14 @@
-import e from "react";
-import { useFormContext as u } from "react-hook-form";
-import { _useFormGroupContext as n } from "./index.mjs";
+import o from "react";
+import { _useFormGroupContext as u } from "./index.mjs";
 const c = () => {
-  u();
-  const { setBusyId: r } = n().children, t = e.useId();
-  e.useEffect(() => {
-    const o = (s) => {
-      r(t, s);
+  const { setBusyId: r } = u().children, s = o.useId();
+  o.useEffect(() => {
+    const e = (t) => {
+      r(s, t);
     };
-    return o(!0), () => o(!1);
+    return e(!0), () => e(!1);
   }, []);
-}, i = c;
+}, m = c;
 export {
-  i as default
+  m as default
 };

package/dist/esm/form/context/group/useFormGroupChildIsSubmittingTracker.mjs

@@ -1,12 +1,14 @@
-import s from "react";
-import { useFormState as e } from "react-hook-form";
-import { _useFormGroupContext as i } from "./index.mjs";
-const u = () => {
-  const { isSubmitting: t } = e(), { setBusyId: o } = i().children, r = s.useId();
-  s.useEffect(() => {
-    o(r, t);
-  }, [t, r, o]);
-}, d = u;
+import e from "react";
+import { useFormState as s } from "react-hook-form";
+import { _useFormGroupContext as u } from "./index.mjs";
+const i = () => {
+  const { isSubmitting: o } = s(), { setBusyId: t } = u().children, r = e.useId();
+  e.useEffect(() => {
+    t(r, o);
+  }, [o, r, t]), e.useEffect(() => () => {
+    t(r, !1);
+  }, []);
+}, f = i;
 export {
-  d as default
+  f as default
 };

package/dist/esm/form/context/utils/FormUtilsContextProvider.mjs

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import p from "../../../errors/orphan/useOrphanFormErrorsToConsole.mjs";
+import F from "../../../errors/useFormErrorConsoleDebug.mjs";
+import u from "../../../errors/useFormRequestSubmit.mjs";
+import a from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
+import s from "../../../submit/useResetFormOnSubmitSuccessful.mjs";
+import { _FormUtilsContextProvider as l } from "./useFormUtilsContext.mjs";
+function O({
+  isDev: m,
+  formRef: o,
+  onSubmitSuccessfulAndReset: r,
+  children: t
+}) {
+  const e = u(o);
+  return F(m), p(o, m, !0), s({ enabled: !!r }), a(() => {
+    r == null || r();
+  }), /* @__PURE__ */ i(l, { value: { formRef: o, requestSubmit: e }, children: t });
+}
+export {
+  O as default
+};

package/dist/esm/form/context/utils/useFormUtilsContext.mjs

@@ -0,0 +1,6 @@
+import t from "../../../utils/createContext.mjs";
+const [, o, r] = t(), s = o;
+export {
+  r as _FormUtilsContextProvider,
+  s as default
+};

package/dist/esm/form/useForm.mjs

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import u from "react";
+import { useForm as F } from "react-hook-form";
+import c from "../utils/useImperativeForwardedRef.mjs";
+import f from "./Form.mjs";
+const p = ({
+  isDev: e,
+  rhf: m,
+  form: o
+}) => {
+  const r = u.useId(), s = F(m), t = c();
+  return {
+    id: r,
+    ref: t,
+    context: s,
+    Form: ({ children: n }) => /* @__PURE__ */ i(
+      f,
+      {
+        ...o,
+        isDev: e,
+        formId: r,
+        formRef: t,
+        onSubmit: o == null ? void 0 : o.onSubmit,
+        children: n
+      }
+    )
+  };
+}, S = p;
+export {
+  S as default
+};

package/dist/esm/form/useFormIsBusy.mjs

@@ -1,8 +1,8 @@
-import { useFormState as s } from "react-hook-form";
-const r = () => {
-  const { isSubmitting: o, isLoading: t } = s();
-  return !!(o || t);
+import { useFormState as o } from "react-hook-form";
+const e = () => {
+  const { isSubmitting: t, isLoading: s } = o();
+  return t || s;
 };
 export {
-  r as default
+  e as default
 };

package/dist/esm/form/useFormWithProvider.mjs

@@ -0,0 +1,30 @@
+import { jsx as f } from "react/jsx-runtime";
+import "react";
+import d from "./context/FormProvider.mjs";
+import s from "./useForm.mjs";
+const n = ({
+  isDev: o,
+  rhf: e,
+  form: t,
+  utils: m
+}) => {
+  const r = s({ isDev: o, rhf: e, form: t });
+  return {
+    ...r,
+    Provider: ({ children: i }) => /* @__PURE__ */ f(
+      d,
+      {
+        isDev: o,
+        formRef: r.ref,
+        rhf: r.context,
+        formId: r.id,
+        form: t,
+        utils: m,
+        children: i
+      }
+    )
+  };
+}, F = n;
+export {
+  F as default
+};

package/dist/esm/main.mjs

@@ -3,54 +3,70 @@ import { default as s } from "./errors/context/index.mjs";
 import { default as u } from "./errors/context/provider.mjs";
 import { default as f } from "./errors/message/FormErrorMessage.mjs";
 import { default as d } from "./errors/message/FormErrorMessageByPath.mjs";
-import { default as F } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
-import { default as n } from "./errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs";
+import { default as x } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
+import { default as i } from "./errors/nonfield/FormNonFieldErrorMarkerHtmlAttribute.mjs";
 import { default as E } from "./errors/orphan/useFormHasOrphanAndNoFieldErrors.mjs";
-import { default as S } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
-import { default as C } from "./errors/orphan/useOrphanFormErrorsToConsole.mjs";
-import { default as h } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
-import { default as G } from "./errors/useFormErrorConsoleDebug.mjs";
-import { default as I } from "./errors/useFormErrorsEffect.mjs";
-import { default as k } from "./errors/useFormErrorsIfAny.mjs";
-import { default as O } from "./errors/useFormErrorsMemo.mjs";
-import { default as T } from "./errors/useFormRequestSubmit.mjs";
-import { default as v } from "./form/context/group/FormGroupContextProvider.mjs";
-import { default as N } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
-import { default as q } from "./form/context/group/useFormGroupChildIsSubmittingTracker.mjs";
-import { default as L } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
-import { default as w } from "./form/context/group/useFormGroupIsChildBusy.mjs";
-import { default as K } from "./form/context/group/useFormGroupIsParentBusy.mjs";
-import { default as U } from "./form/context/group/useFormGroupParentTracker.mjs";
-import { default as W } from "./form/utils/getSubmitterButtonData.mjs";
-import { default as Y } from "./submit/useFormOnSubmitSuccessful.mjs";
-import { default as _ } from "./submit/useFormOnSubmitSuccessfulAndReset.mjs";
-import { default as rr } from "./submit/useResetFormOnSubmitSuccessful.mjs";
+import { default as C } from "./errors/orphan/useOrphanFormErrorsMemo.mjs";
+import { default as P } from "./errors/orphan/useOrphanFormErrorsToConsole.mjs";
+import { default as b } from "./errors/root/useRootFormFieldErrorsMemo.mjs";
+import { default as v } from "./errors/useFormErrorConsoleDebug.mjs";
+import { default as G } from "./errors/useFormErrorsEffect.mjs";
+import { default as I } from "./errors/useFormErrorsIfAny.mjs";
+import { default as k } from "./errors/useFormErrorsMemo.mjs";
+import { default as O } from "./errors/useFormRequestSubmit.mjs";
+import { default as R } from "./form/Form.mjs";
+import { FormError as N } from "./form/FormError.mjs";
+import { default as U } from "./form/FormWithProvider.mjs";
+import { default as q } from "./form/useForm.mjs";
+import { default as L } from "./form/useFormWithProvider.mjs";
+import { default as w } from "./form/context/FormProvider.mjs";
+import { default as K } from "./form/context/utils/FormUtilsContextProvider.mjs";
+import { default as V } from "./form/context/utils/useFormUtilsContext.mjs";
+import { default as Y } from "./form/context/group/FormGroupContextProvider.mjs";
+import { default as _ } from "./form/context/group/useFormGroupChildIsMountedTracker.mjs";
+import { default as rr } from "./form/context/group/useFormGroupChildIsSubmittingTracker.mjs";
+import { default as er } from "./form/context/group/useFormGroupIsAnyBusy.mjs";
+import { default as sr } from "./form/context/group/useFormGroupIsChildBusy.mjs";
+import { default as ur } from "./form/context/group/useFormGroupIsParentBusy.mjs";
+import { default as fr } from "./form/context/group/useFormGroupParentTracker.mjs";
+import { default as dr } from "./form/utils/getSubmitterButtonData.mjs";
+import { default as xr } from "./submit/useFormOnSubmitSuccessful.mjs";
+import { default as ir } from "./submit/useFormOnSubmitSuccessfulAndReset.mjs";
+import { default as Er } from "./submit/useResetFormOnSubmitSuccessful.mjs";
 export {
+  R as Form,
+  N as FormError,
   f as FormErrorMessage,
   d as FormErrorMessageByPath,
   u as FormErrorsFlatContextProvider,
-  v as FormGroupContextProvider,
-  F as FormNonFieldErrorMarker,
-  n as FormNonFieldErrorMarkerHtmlAttribute,
+  Y as FormGroupContextProvider,
+  x as FormNonFieldErrorMarker,
+  i as FormNonFieldErrorMarkerHtmlAttribute,
+  w as FormProvider,
+  K as FormUtilsContextProvider,
+  U as FormWithProvider,
   e as LazyDevTool,
-  W as getSubmitterButtonData,
-  G as useFormErrorConsoleDebug,
-  I as useFormErrorsEffect,
+  dr as getSubmitterButtonData,
+  q as useForm,
+  v as useFormErrorConsoleDebug,
+  G as useFormErrorsEffect,
   s as useFormErrorsFlatContext,
-  k as useFormErrorsIfAny,
-  O as useFormErrorsMemo,
-  N as useFormGroupChildIsMountedTracker,
-  q as useFormGroupChildIsSubmittingTracker,
-  L as useFormGroupIsAnyBusy,
-  w as useFormGroupIsChildBusy,
-  K as useFormGroupIsParentBusy,
-  U as useFormGroupParentTracker,
+  I as useFormErrorsIfAny,
+  k as useFormErrorsMemo,
+  _ as useFormGroupChildIsMountedTracker,
+  rr as useFormGroupChildIsSubmittingTracker,
+  er as useFormGroupIsAnyBusy,
+  sr as useFormGroupIsChildBusy,
+  ur as useFormGroupIsParentBusy,
+  fr as useFormGroupParentTracker,
   E as useFormHasOrphanAndNoFieldErrors,
-  Y as useFormOnSubmitSuccessful,
-  _ as useFormOnSubmitSuccessfulAndReset,
-  T as useFormRequestSubmit,
-  S as useOrphanFormErrorsMemo,
-  C as useOrphanFormErrorsToConsole,
-  rr as useResetFormAfterSubmitSuccessful,
-  h as useRootFormFieldErrorsMemo
+  xr as useFormOnSubmitSuccessful,
+  ir as useFormOnSubmitSuccessfulAndReset,
+  O as useFormRequestSubmit,
+  V as useFormUtilsContext,
+  L as useFormWithProvider,
+  C as useOrphanFormErrorsMemo,
+  P as useOrphanFormErrorsToConsole,
+  Er as useResetFormAfterSubmitSuccessful,
+  b as useRootFormFieldErrorsMemo
 };

package/dist/esm/utils/fixedForwardRef.mjs

@@ -0,0 +1,7 @@
+import e from "react";
+function o(r) {
+  return e.forwardRef(r);
+}
+export {
+  o as default
+};

package/dist/esm/utils/useImperativeForwardedRef.mjs

@@ -0,0 +1,16 @@
+import r from "react";
+const a = (t) => {
+  const e = r.useRef(null);
+  return r.useImperativeHandle(
+    t,
+    () => {
+      if (!e.current)
+        throw new Error();
+      return e.current;
+    },
+    []
+  ), e;
+}, o = a;
+export {
+  o as default
+};

package/dist/types/form/Form.d.ts

@@ -3,10 +3,11 @@ import { FieldValues, SubmitErrorHandler, UseFormReturn } from 'react-hook-form'
 import { default as React } from 'react';
 import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
 
-export type FormProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = Omit<FormBaseProps, 'onSubmit'> & {
+export type FormProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = React.PropsWithChildren<Pick<FormBaseProps, 'onChange'> & {
     isDev: boolean;
-    formRef: React.RefObject<HTMLFormElement>;
-    onSubmit: (values: TTransformedValues, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => unknown | Promise<unknown>;
+    formId?: string;
+    formRef?: React.RefObject<HTMLFormElement>;
+    onSubmit?: (values: TTransformedValues, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => unknown | Promise<unknown>;
     /** Submit error handler. (Only for errors not of instance `FormError`, which are handled internally.) */
     onSubmitError?: (error: unknown, values: TTransformedValues, context: UseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => void;
     /** Submit handler when form is invalid. */
@@ -17,6 +18,6 @@ export type FormProps<TFieldValues extends FieldValues, TTransformedValues exten
         devTool?: DevtoolUIProps | 'disabled';
     };
     className?: string;
-};
-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;
+}>;
+declare function Form<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, formId, formRef, onSubmit, onSubmitError, onSubmitInvalid, options, children, ...props }: FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default Form;

package/dist/types/form/FormWithProvider.d.ts

@@ -9,5 +9,5 @@ export type FormWithProvider<TFieldValues extends FieldValues, TTransformedValue
  * Use {@link useForm} if you need to specific nesting hierarchy.
  * (e.g., wrapping `<tr>` with provider and nesting `<form>` within `<td>` to appease HTML rules.)
  */
-declare function FormWithProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ rhf, form, children }: FormWithProvider<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormWithProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ children, ...props }: FormWithProvider<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default FormWithProvider;

package/dist/types/form/context/FormProvider.d.ts

@@ -4,10 +4,13 @@ import { FieldValues, UseFormReturn } from 'react-hook-form';
 
 type Props<TFieldValues extends FieldValues, // input values
 TTransformedValues extends FieldValues> = React.PropsWithChildren<{
+    isDev: boolean;
+    formId: string;
+    formRef: React.RefObject<HTMLFormElement>;
     rhf: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
 } & {
-    form: FormProps<TFieldValues, TTransformedValues>;
+    form?: Omit<FormProps<TFieldValues, TTransformedValues>, 'isDev' | 'formRef' | 'formId'>;
     utils?: FormUtilsContextProviderProps;
 }>;
-declare function FormProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ rhf, form, utils, children }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, formId, formRef, rhf, form, utils, children, }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default FormProvider;

package/dist/types/form/context/group/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 export type FormGroupContext = {
+    /** Dependent forms. */
     children: {
         busyIds: string[];
         busyCount: number;
         setBusyId: (id: string, isBusy: boolean) => void;
     };
+    /** Main form. */
     parent: {
         isBusy: boolean;
         setIsBusy: (isBusy: boolean) => void;

package/dist/types/form/context/utils/FormUtilsContextProvider.d.ts

@@ -6,7 +6,10 @@ export type FormUtilsContextProviderProps = {
     onSubmitSuccessfulAndReset?: () => void;
 };
 type Props<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = React.PropsWithChildren<{
-    formProps: FormProps<TFieldValues, TTransformedValues>;
+    isDev: boolean;
+    formId: string;
+    formRef: React.RefObject<HTMLFormElement>;
+    formProps?: Omit<FormProps<TFieldValues, TTransformedValues>, 'isDev' | 'formRef' | 'formId'>;
 } & FormUtilsContextProviderProps>;
-declare function FormUtilsContextProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ formProps, onSubmitSuccessfulAndReset, children, }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormUtilsContextProvider<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, formRef, onSubmitSuccessfulAndReset, children, }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default FormUtilsContextProvider;

package/dist/types/form/toggle/ToggleForm.d.ts

@@ -0,0 +1,18 @@
+import { UseFormWithProviderProps } from '../useFormWithProvider';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { default as React } from 'react';
+
+type Props<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = React.PropsWithChildren<UseFormWithProviderProps<TFieldValues, TTransformedValues> & {
+    Fields: React.FC<{
+        ctx: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
+    }>;
+}>;
+/**
+ * This form submits upon selecting a new value, and reverts (via re-render) if there is an error.
+ *
+ * The entire form is disabled while submitting.
+ *
+ * Probably not ideal to use with text inputs. Would need to implement debounce or submit on blur.
+ */
+declare function ToggleForm<TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, rhf, form, utils, Fields, children, }: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+export default ToggleForm;

package/dist/types/form/useForm.d.ts

@@ -1,15 +1,13 @@
 import { FormProps } from './Form';
-import { FormUtilsContextProviderProps } from './context/utils/FormUtilsContextProvider';
 import { FieldValues, UseFormProps as RhfUseFormProps } from 'react-hook-form';
 import { default as React } from 'react';
 
 export type UseFormProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = {
+    isDev: boolean;
     /** {@link RhfUseFormProps} props for RHF's {@link useRhfForm}. */
-    rhf: RhfUseFormProps<TFieldValues>;
+    rhf?: RhfUseFormProps<TFieldValues>;
     /** {@link FormProps} props for Form. */
-    form: FormProps<TFieldValues, TTransformedValues>;
-    /** {@link FormUtilsContextProviderProps} props for `FormUtilsContextProvider`. */
-    utils?: FormUtilsContextProviderProps;
+    form?: Omit<FormProps<TFieldValues, TTransformedValues>, 'isDev' | 'formId' | 'formRef'>;
 };
 export type UseFormReturn = ReturnType<typeof useForm>;
 /**
@@ -21,11 +19,12 @@ export type UseFormReturn = ReturnType<typeof useForm>;
  * see https://caniuse.com/?search=form%20attribute
  * @returns Form provider and form.
  */
-export declare const useForm: <TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ rhf, form, utils, }: UseFormProps<TFieldValues, TTransformedValues>) => {
-    Provider: React.FC<{
-        children?: React.ReactNode;
-    }>;
-    Form: React.FC<{
+declare const useForm: <TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, rhf, form, }: UseFormProps<TFieldValues, TTransformedValues>) => {
+    readonly id: string;
+    readonly ref: React.RefObject<HTMLFormElement>;
+    readonly context: import('react-hook-form').UseFormReturn<TFieldValues, unknown, TTransformedValues>;
+    readonly Form: React.FC<{
         children?: React.ReactNode;
     }>;
 };
+export default useForm;

package/dist/types/form/useFormWithProvider.d.ts

@@ -0,0 +1,31 @@
+import { UseFormProps } from './useForm';
+import { FormUtilsContextProviderProps } from './context/utils/FormUtilsContextProvider';
+import { FieldValues } from 'react-hook-form';
+import { default as React } from 'react';
+
+export type UseFormWithProviderProps<TFieldValues extends FieldValues, TTransformedValues extends FieldValues> = UseFormProps<TFieldValues, TTransformedValues> & {
+    /** {@link FormUtilsContextProviderProps} props for `FormUtilsContextProvider`. */
+    utils?: FormUtilsContextProviderProps;
+};
+export type UseFormWithProviderReturn = ReturnType<typeof useFormWithProvider>;
+/**
+ * Base Rhf Form hook. Use `Form` in `index.ts` for most cases.
+ * Use this if you need to separate form components.
+ * e.g., a form for table row due to `form` being considered invalid HTML around `tr` tags.
+ * With this hook, you can wrap the `tr` tag with `form.Provider` and use `form.Form` inside
+ * one of the cells. Other components can be outside form while referring to form by its id via `form` attribute.
+ * see https://caniuse.com/?search=form%20attribute
+ * @returns Form provider and form.
+ */
+declare const useFormWithProvider: <TFieldValues extends FieldValues, TTransformedValues extends FieldValues>({ isDev, rhf, form, utils, }: UseFormWithProviderProps<TFieldValues, TTransformedValues>) => {
+    readonly Provider: React.FC<{
+        children?: React.ReactNode;
+    }>;
+    readonly id: string;
+    readonly ref: React.RefObject<HTMLFormElement>;
+    readonly context: import('react-hook-form').UseFormReturn<TFieldValues, unknown, TTransformedValues>;
+    readonly Form: React.FC<{
+        children?: React.ReactNode;
+    }>;
+};
+export default useFormWithProvider;

package/dist/types/main.d.ts

@@ -14,6 +14,14 @@ export { default as useFormErrorsEffect } from './errors/useFormErrorsEffect';
 export { default as useFormErrorsIfAny } from './errors/useFormErrorsIfAny';
 export { default as useFormErrorsMemo } from './errors/useFormErrorsMemo';
 export { default as useFormRequestSubmit } from './errors/useFormRequestSubmit';
+export { default as Form } from './form/Form';
+export { FormError } from './form/FormError';
+export { default as FormWithProvider } from './form/FormWithProvider';
+export { default as useForm } from './form/useForm';
+export { default as useFormWithProvider } from './form/useFormWithProvider';
+export { default as FormProvider } from './form/context/FormProvider';
+export { default as FormUtilsContextProvider } from './form/context/utils/FormUtilsContextProvider';
+export { default as useFormUtilsContext } from './form/context/utils/useFormUtilsContext';
 export { default as FormGroupContextProvider } from './form/context/group/FormGroupContextProvider';
 export { default as useFormGroupChildIsMountedTracker } from './form/context/group/useFormGroupChildIsMountedTracker';
 export { default as useFormGroupChildIsSubmittingTracker } from './form/context/group/useFormGroupChildIsSubmittingTracker';

package/dist/types/utils/useImperativeForwardedRef.d.ts

@@ -7,5 +7,5 @@ import { default as React } from 'react';
  *
  * @param forwardedRef Forwarded `ref` prop.
  */
-declare const useImperativeForwardedRef: <TRef>(forwardedRef: React.ForwardedRef<TRef> | undefined) => React.RefObject<TRef>;
+declare const useImperativeForwardedRef: <TRef>(forwardedRef?: React.ForwardedRef<TRef>) => React.RefObject<TRef>;
 export default useImperativeForwardedRef;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.37",
+  "version": "0.0.45",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,
@@ -71,6 +71,38 @@
       "default": "./dist/esm/errors/root/useRootFormFieldErrors.mjs",
       "types": "./dist/types/errors/root/useRootFormFieldErrors.d.ts"
     },
+    "./form/Form": {
+      "default": "./dist/esm/form/Form.mjs",
+      "types": "./dist/types/form/Form.d.ts"
+    },
+    "./form/FormError": {
+      "default": "./dist/esm/form/FormError.mjs",
+      "types": "./dist/types/form/FormError.d.ts"
+    },
+    "./form/context/FormWithProvider": {
+      "default": "./dist/esm/form/context/FormWithProvider.mjs",
+      "types": "./dist/types/form/context/FormWithProvider.d.ts"
+    },
+    "./form/useForm": {
+      "default": "./dist/esm/form/useForm.mjs",
+      "types": "./dist/types/form/useForm.d.ts"
+    },
+    "./form/useFormWithProvider": {
+      "default": "./dist/esm/form/useFormWithProvider.mjs",
+      "types": "./dist/types/form/useFormWithProvider.d.ts"
+    },
+    "./form/context/FormProvider": {
+      "default": "./dist/esm/form/context/FormProvider.mjs",
+      "types": "./dist/types/form/context/FormProvider.d.ts"
+    },
+    "./form/context/FormUtilsContextProvider": {
+      "default": "./dist/esm/form/context/FormUtilsContextProvider.mjs",
+      "types": "./dist/types/form/context/FormUtilsContextProvider.d.ts"
+    },
+    "./form/context/useFormUtilsContext": {
+      "default": "./dist/esm/form/context/useFormUtilsContext.mjs",
+      "types": "./dist/types/form/context/useFormUtilsContext.d.ts"
+    },
     "./form/context/group/FormGroupContextProvider": {
       "default": "./dist/esm/form/context/group/FormGroupContextProvider.mjs",
       "types": "./dist/types/form/context/group/FormGroupContextProvider.d.ts"