@paragrav/rhf-utils 0.0.37 → 0.0.38

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/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/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/main.mjs

@@ -21,10 +21,11 @@ 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 W } from "./form/useForm.mjs";
+import { default as Y } from "./form/utils/getSubmitterButtonData.mjs";
+import { default as _ } from "./submit/useFormOnSubmitSuccessful.mjs";
+import { default as rr } from "./submit/useFormOnSubmitSuccessfulAndReset.mjs";
+import { default as er } from "./submit/useResetFormOnSubmitSuccessful.mjs";
 export {
   f as FormErrorMessage,
   d as FormErrorMessageByPath,
@@ -33,7 +34,8 @@ export {
   F as FormNonFieldErrorMarker,
   n as FormNonFieldErrorMarkerHtmlAttribute,
   e as LazyDevTool,
-  W as getSubmitterButtonData,
+  Y as getSubmitterButtonData,
+  W as useForm,
   G as useFormErrorConsoleDebug,
   I as useFormErrorsEffect,
   s as useFormErrorsFlatContext,
@@ -46,11 +48,11 @@ export {
   K as useFormGroupIsParentBusy,
   U as useFormGroupParentTracker,
   E as useFormHasOrphanAndNoFieldErrors,
-  Y as useFormOnSubmitSuccessful,
-  _ as useFormOnSubmitSuccessfulAndReset,
+  _ as useFormOnSubmitSuccessful,
+  rr as useFormOnSubmitSuccessfulAndReset,
   T as useFormRequestSubmit,
   S as useOrphanFormErrorsMemo,
   C as useOrphanFormErrorsToConsole,
-  rr as useResetFormAfterSubmitSuccessful,
+  er as useResetFormAfterSubmitSuccessful,
   h 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 u = (t) => {
+  const e = r.useRef(null);
+  return r.useImperativeHandle(
+    t,
+    () => {
+      if (!e.current)
+        throw new Error();
+      return e.current;
+    },
+    []
+  ), e;
+};
+export {
+  u 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,30 @@
+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.
+ */
+export 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;
+    }>;
+};

package/dist/types/main.d.ts

@@ -21,6 +21,7 @@ export { default as useFormGroupIsAnyBusy } from './form/context/group/useFormGr
 export { default as useFormGroupIsChildBusy } from './form/context/group/useFormGroupIsChildBusy';
 export { default as useFormGroupIsParentBusy } from './form/context/group/useFormGroupIsParentBusy';
 export { default as useFormGroupParentTracker } from './form/context/group/useFormGroupParentTracker';
+export { default as useForm } from './form/useForm';
 export { default as getSubmitterButtonData } from './form/utils/getSubmitterButtonData';
 export { default as useFormOnSubmitSuccessful } from './submit/useFormOnSubmitSuccessful';
 export { default as useFormOnSubmitSuccessfulAndReset } from './submit/useFormOnSubmitSuccessfulAndReset';

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.38",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,
@@ -71,6 +71,10 @@
       "default": "./dist/esm/errors/root/useRootFormFieldErrors.mjs",
       "types": "./dist/types/errors/root/useRootFormFieldErrors.d.ts"
     },
+    "./form/useForm": {
+      "default": "./dist/esm/form/useForm.mjs",
+      "types": "./dist/types/form/useForm.d.ts"
+    },
     "./form/context/group/FormGroupContextProvider": {
       "default": "./dist/esm/form/context/group/FormGroupContextProvider.mjs",
       "types": "./dist/types/form/context/group/FormGroupContextProvider.d.ts"