@paragrav/rhf-utils 0.0.111 → 0.0.112

package/README.md

@@ -117,7 +117,7 @@ Currently, only `zod` is supported.
   }) => {
     onError(error);
   }}
-  // children/fields
+  // fields
   Children={({
     // UseRhfUtilsFormChildrenProps
     formId, //     unique id string
@@ -130,13 +130,10 @@ Currently, only `zod` is supported.
       <Controller
         name="email" // strongly-typed field name
         render={({ field, formState: { isSubmitting } }) => (
-          <input
-            autoFocus
-            label="Email"
-            autoComplete="email"
-            disabled={isSubmitting}
-            {...field}
-          />
+          <label>
+            Email
+            <input {...field} disabled={isSubmitting} />
+          </label>
         )}
       />
 
@@ -151,7 +148,9 @@ Currently, only `zod` is supported.
 If you prefer to define your `Children` component as standalone:
 
 ```tsx
-const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = () => {};
+const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = ({ ... }) => { };
+
+function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
 ```
 
 ## `RhfUtilsFormOptions`
@@ -221,7 +220,7 @@ To get accurate orphan analysis, you must either use `FormNonFieldErrorMarker` i
 Alternatively, you can use `FormErrorMessageByPath` to display error message to user:
 
 ```tsx
-<FormErrorMessageByPath path="phone" />
+<FormErrorMessageByPath path="street.address" />
 ```
 
 Example use case: Field array with minimum items. (When there are no items, the error is not associated with a field and is displayed separately.)
@@ -232,3 +231,28 @@ Orphans are optionally exposed in a few places.
 - And `useFlatFieldErrorsContext()` hook, which returns an object with divided into `all`, `root`, and `orphans` errors.
 
 `FlatFieldErrors` is a flattened, simplified version of RHF's `FieldErrors`. Keys represent field paths flattened to dot notation.
+
+## Form Groups
+
+Sometimes you need to group multiple forms together.
+
+Use case: disable parent form when any child is "busy"; disable all children when parent is "busy".
+
+Use `FormGroupContextProvider` to wrap your children and parent forms.
+
+```tsx
+<FormGroupContextProvider>
+  <ChildForm1 />
+  <ChildForm2 />
+  <ParentForm />
+</FormGroupContextProvider>
+```
+
+In your parent form, use the hook `useFormGroupParentTracker`, which returns `boolean` value indicating whether any child forms is busy.
+
+In children forms, there are two options. You can choose to consider form "busy" when:
+
+- `isSubmitting` is `true` by using `useFormGroupChildIsSubmittingTracker` hook
+- it is mounted by using `useFormGroupChildIsMountedTracker` hook
+
+Both hooks return `boolean` value indicating whether parent form is busy.

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

@@ -1,7 +1,6 @@
 import r from "./useFormGroupChildTracker.mjs";
-const o = () => {
-  r(!0);
-}, u = o;
+import o from "./useFormGroupIsParentBusy.mjs";
+const e = () => (r(!0), o()), t = e;
 export {
-  u as default
+  t as default
 };

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

@@ -1,9 +1,10 @@
 import { useFormState as o } from "react-hook-form";
 import t from "./useFormGroupChildTracker.mjs";
-const i = () => {
+import u from "./useFormGroupIsParentBusy.mjs";
+const m = () => {
   const { isSubmitting: r } = o();
-  t(r);
-}, u = i;
+  return t(r), u();
+}, n = m;
 export {
-  u as default
+  n as default
 };

package/dist/esm/src/form/context/group/useFormGroupIsParentBusy.mjs

@@ -2,7 +2,7 @@ import { _useFormGroupContextMaybe as o } from "./index.mjs";
 const s = () => {
   const r = o();
   return !!(r != null && r.parent.isBusy);
-}, t = s;
+};
 export {
-  t as default
+  s as default
 };

package/dist/esm/src/form/context/group/useFormGroupParentTracker.mjs

@@ -1,12 +1,13 @@
 import s from "react";
 import t from "../../useFormIsBusy.mjs";
 import { _useFormGroupContext as e } from "./index.mjs";
-const u = () => {
+import u from "./useFormGroupIsChildBusy.mjs";
+const m = () => {
   const r = t(), { setIsBusy: o } = e().parent;
-  s.useEffect(() => {
+  return s.useEffect(() => {
     o(r);
-  }, [o, r]);
-}, n = u;
+  }, [o, r]), u();
+}, f = m;
 export {
-  n as default
+  f as default
 };

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

@@ -1,5 +1,5 @@
 /**
  * Mark "child" form as "busy" when mounted.
  */
-declare const useFormGroupChildIsMountedTracker: () => void;
+declare const useFormGroupChildIsMountedTracker: () => boolean;
 export default useFormGroupChildIsMountedTracker;

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

@@ -1,5 +1,5 @@
 /**
  * Mark "child" form as "busy" when submitting.
  */
-declare const useFormGroupChildIsSubmittingTracker: () => void;
+declare const useFormGroupChildIsSubmittingTracker: () => boolean;
 export default useFormGroupChildIsSubmittingTracker;

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

@@ -3,5 +3,5 @@
  *
  * Requires usage of provider.
  */
-declare const useFormGroupParentTracker: () => void;
+declare const useFormGroupParentTracker: () => boolean;
 export default useFormGroupParentTracker;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,