@paragrav/rhf-utils 0.0.20 → 0.0.21

package/dist/cjs/errors/getFlatFieldErrors.d.ts

@@ -14,3 +14,11 @@ export type FlatFieldErrors = Record<string, FieldError>;
  */
 declare const getFlatFieldErrors: (errors: FieldErrors) => FlatFieldErrors;
 export default getFlatFieldErrors;
+/**
+ * Regular expression to maybe match the end of a leaf node path.
+ *
+ * i.e., `name.type`, `address.street.message`
+ *
+ * iow: dot [?: non-capturing]("type" | "message")[\b word boundary][$ end of string]
+ */
+export declare const regexMaybeFieldErrorLeafNode: RegExp;

package/dist/cjs/errors/getFlatFieldErrors.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.regexMaybeFieldErrorLeafNode = void 0;
 const react_hook_form_1 = require("react-hook-form");
 const flattenFieldErrors_1 = __importDefault(require("./flattenFieldErrors"));
 /**
@@ -23,7 +24,7 @@ const getFlatFieldErrors = (errors) => {
     return Object.fromEntries(keys.reduce((entries, key) => {
         // look for leaf node, which would have required `type` prop (e.g., `name.type`, `address.street.type`)
         // remove `regexEndsWithType` suffix to get flat field path (e.g., `name`, `address.street`)
-        const path = key.replace(regexEndsWithType, '');
+        const path = key.replace(exports.regexMaybeFieldErrorLeafNode, '');
         // if nothing replaced, then it's not a leaf node
         if (path === key)
             return entries;
@@ -37,4 +38,12 @@ const getFlatFieldErrors = (errors) => {
     }, []));
 };
 exports.default = getFlatFieldErrors;
-const regexEndsWithType = /\.type$/;
+//
+/**
+ * Regular expression to maybe match the end of a leaf node path.
+ *
+ * i.e., `name.type`, `address.street.message`
+ *
+ * iow: dot [?: non-capturing]("type" | "message")[\b word boundary][$ end of string]
+ */
+exports.regexMaybeFieldErrorLeafNode = /\.(?:type|message)\b$/;

package/dist/cjs/errors/nonfield/FormNonFieldErrorMarker.d.ts

@@ -4,7 +4,7 @@ type Props = {
     path: string;
 };
 /**
- * Empty, hidden marker to indicate a non-field error is presented to user.
+ * Empty, hidden marker to indicate a non-field/non-root error is being displayed to user.
  */
 declare const FormNonFieldErrorMarker: React.FC<Props>;
 export default FormNonFieldErrorMarker;

package/dist/cjs/errors/nonfield/FormNonFieldErrorMarker.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FormNonFieldErrorMarker_utils_1 = __importDefault(require("./FormNonFieldErrorMarker.utils"));
 /**
- * Empty, hidden marker to indicate a non-field error is presented to user.
+ * Empty, hidden marker to indicate a non-field/non-root error is being displayed to user.
  */
 const FormNonFieldErrorMarker = ({ path }) => {
     const dataAttribute = {

package/dist/cjs/errors/orphan/useFormErrorsHasOnlyOrphans.js

@@ -10,7 +10,7 @@ const useFormErrorsHasOnlyOrphans = (formRef) => {
     // get flat field errors of orphans and all errors
     const orphans = (0, useOrphanFormErrors_1.default)(formRef);
     const errors = (0, useFormFlatFieldErrors_1.default)();
-    // if no orphans, or no errors
+    // if either empty, early return
     if ([orphans, errors].some(utils_1.isEmptyObject))
         return false;
     // equal length

package/dist/cjs/main.d.ts

@@ -9,3 +9,6 @@ export { default as useFormErrorsEffect } from './errors/useFormErrorsEffect';
 export { default as useFormErrorsIfAny } from './errors/useFormErrorsIfAny';
 export { default as useFormErrorsOnChange } from './errors/useFormErrorsOnChange';
 export { default as useFormRequestSubmit } from './errors/useFormRequestSubmit';
+export { default as useFormOnSubmitSuccessful } from './submit/useFormOnSubmitSuccessful';
+export { default as useFormOnSubmitSuccessfulAndReset } from './submit/useFormOnSubmitSuccessfulAndReset';
+export { default as useResetFormAfterSubmitSuccessful } from './submit/useResetFormOnSubmitSuccessful';

package/dist/cjs/main.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormRequestSubmit = exports.useFormErrorsOnChange = exports.useFormErrorsIfAny = exports.useFormErrorsEffect = exports.useFormErrorConsoleDebug = exports.useRootFormFieldErrors = exports.useOrphanFormErrorsToConsoleError = exports.useOrphanFormErrors = exports.useFormErrorsHasOnlyOrphans = exports.FormNonFieldErrorMarkerHtmlAttribute = exports.FormNonFieldErrorMarker = void 0;
+exports.useResetFormAfterSubmitSuccessful = exports.useFormOnSubmitSuccessfulAndReset = exports.useFormOnSubmitSuccessful = exports.useFormRequestSubmit = exports.useFormErrorsOnChange = exports.useFormErrorsIfAny = exports.useFormErrorsEffect = exports.useFormErrorConsoleDebug = exports.useRootFormFieldErrors = exports.useOrphanFormErrorsToConsoleError = exports.useOrphanFormErrors = exports.useFormErrorsHasOnlyOrphans = exports.FormNonFieldErrorMarkerHtmlAttribute = exports.FormNonFieldErrorMarker = void 0;
 var FormNonFieldErrorMarker_1 = require("./errors/nonfield/FormNonFieldErrorMarker");
 Object.defineProperty(exports, "FormNonFieldErrorMarker", { enumerable: true, get: function () { return __importDefault(FormNonFieldErrorMarker_1).default; } });
 var FormNonFieldErrorMarker_utils_1 = require("./errors/nonfield/FormNonFieldErrorMarker.utils");
@@ -26,3 +26,9 @@ var useFormErrorsOnChange_1 = require("./errors/useFormErrorsOnChange");
 Object.defineProperty(exports, "useFormErrorsOnChange", { enumerable: true, get: function () { return __importDefault(useFormErrorsOnChange_1).default; } });
 var useFormRequestSubmit_1 = require("./errors/useFormRequestSubmit");
 Object.defineProperty(exports, "useFormRequestSubmit", { enumerable: true, get: function () { return __importDefault(useFormRequestSubmit_1).default; } });
+var useFormOnSubmitSuccessful_1 = require("./submit/useFormOnSubmitSuccessful");
+Object.defineProperty(exports, "useFormOnSubmitSuccessful", { enumerable: true, get: function () { return __importDefault(useFormOnSubmitSuccessful_1).default; } });
+var useFormOnSubmitSuccessfulAndReset_1 = require("./submit/useFormOnSubmitSuccessfulAndReset");
+Object.defineProperty(exports, "useFormOnSubmitSuccessfulAndReset", { enumerable: true, get: function () { return __importDefault(useFormOnSubmitSuccessfulAndReset_1).default; } });
+var useResetFormOnSubmitSuccessful_1 = require("./submit/useResetFormOnSubmitSuccessful");
+Object.defineProperty(exports, "useResetFormAfterSubmitSuccessful", { enumerable: true, get: function () { return __importDefault(useResetFormOnSubmitSuccessful_1).default; } });

package/dist/cjs/submit/useFormOnSubmitSuccessful.d.ts

@@ -0,0 +1,2 @@
+declare const useFormOnSubmitSuccessful: (callback?: () => void) => void;
+export default useFormOnSubmitSuccessful;

package/dist/cjs/submit/useFormOnSubmitSuccessful.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const useFormOnSubmitSuccessful = (callback) => {
+    const { isSubmitSuccessful } = (0, react_hook_form_1.useFormState)();
+    react_1.default.useEffect(() => {
+        if (!callback)
+            return;
+        if (isSubmitSuccessful)
+            callback();
+    }, [callback, isSubmitSuccessful]);
+};
+exports.default = useFormOnSubmitSuccessful;

package/dist/cjs/submit/useFormOnSubmitSuccessfulAndReset.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Calls a callback after a successful submit and after a form reset.
+ *
+ * Using RHF and following its rules, we are not able to get the state `isSubmitSuccessful=true` and `isDirty=false`.
+ * So, this has to keep track of previous state.
+ *
+ * SubmitSuccessfulAndReset = was `isSubmitSuccessful` and now `!isSubmitSuccessful && !isDirty`
+ */
+declare const useFormOnSubmitSuccessfulAndReset: (callback?: () => void) => void;
+export default useFormOnSubmitSuccessfulAndReset;

package/dist/cjs/submit/useFormOnSubmitSuccessfulAndReset.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const useFormOnSubmitSuccessful_1 = __importDefault(require("./useFormOnSubmitSuccessful"));
+/**
+ * Calls a callback after a successful submit and after a form reset.
+ *
+ * Using RHF and following its rules, we are not able to get the state `isSubmitSuccessful=true` and `isDirty=false`.
+ * So, this has to keep track of previous state.
+ *
+ * SubmitSuccessfulAndReset = was `isSubmitSuccessful` and now `!isSubmitSuccessful && !isDirty`
+ */
+const useFormOnSubmitSuccessfulAndReset = (callback) => {
+    const { isSubmitSuccessful, isDirty } = (0, react_hook_form_1.useFormState)();
+    /** Tracks whether form has been successfully submitted. (Ref as it should not trigger re-render.) */
+    const wasSubmittedSuccessfully = react_1.default.useRef(false);
+    // mark as submitted successfully
+    (0, useFormOnSubmitSuccessful_1.default)(() => {
+        wasSubmittedSuccessfully.current = true;
+    });
+    react_1.default.useEffect(() => {
+        if (!callback)
+            return;
+        // if hasn't been submitted successfully (to distinguish from initial load)
+        if (!wasSubmittedSuccessfully.current)
+            return;
+        // after resetting (and on initial load), both state vars are `false`
+        if (!isSubmitSuccessful && !isDirty) {
+            callback();
+            // reset ref
+            wasSubmittedSuccessfully.current = false;
+        }
+    }, [isSubmitSuccessful, isDirty]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+exports.default = useFormOnSubmitSuccessfulAndReset;

package/dist/cjs/submit/useResetFormOnSubmitSuccessful.d.ts

@@ -0,0 +1,11 @@
+import type { KeepStateOptions } from 'react-hook-form';
+type Options = {
+    enabled?: boolean;
+} & KeepStateOptions;
+/**
+ * Handle resetting after successful submit with no server validation errors.
+ * See `Rules` section: https://react-hook-form.com/api/useform/reset/
+ * Specifically: "- It's recommended to reset inside useEffect after submission."
+ */
+declare const useResetFormAfterSubmitSuccessful: (options?: Options) => void;
+export default useResetFormAfterSubmitSuccessful;

package/dist/cjs/submit/useResetFormOnSubmitSuccessful.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_hook_form_1 = require("react-hook-form");
+const useFormOnSubmitSuccessful_1 = __importDefault(require("./useFormOnSubmitSuccessful"));
+/**
+ * Handle resetting after successful submit with no server validation errors.
+ * See `Rules` section: https://react-hook-form.com/api/useform/reset/
+ * Specifically: "- It's recommended to reset inside useEffect after submission."
+ */
+const useResetFormAfterSubmitSuccessful = (options) => {
+    const { reset } = (0, react_hook_form_1.useFormContext)();
+    (0, useFormOnSubmitSuccessful_1.default)(() => {
+        if (!(options === null || options === void 0 ? void 0 : options.enabled))
+            return;
+        reset(undefined, options);
+    });
+};
+exports.default = useResetFormAfterSubmitSuccessful;

package/dist/esm/errors/getFlatFieldErrors.mjs

@@ -1,21 +1,22 @@
 import { get as l } from "react-hook-form";
-import d from "./flattenFieldErrors.mjs";
-const f = (e) => {
-  const s = d(e), c = Object.keys(s);
+import n from "./flattenFieldErrors.mjs";
+const d = (t) => {
+  const a = n(t), c = Object.keys(a);
   return Object.fromEntries(
     c.reduce(
-      (t, o) => {
-        const r = o.replace(a, "");
-        if (r === o)
-          return t;
-        const n = l(e, r, void 0);
-        return n && t.push([r, n]), t;
+      (r, o) => {
+        const e = o.replace(f, "");
+        if (e === o)
+          return r;
+        const s = l(t, e, void 0);
+        return s && r.push([e, s]), r;
       },
       []
       // entries
     )
   );
-}, u = f, a = /\.type$/;
+}, u = d, f = /\.(?:type|message)\b$/;
 export {
-  u as default
+  u as default,
+  f as regexMaybeFieldErrorLeafNode
 };

package/dist/esm/main.mjs

@@ -1,24 +1,30 @@
 import { default as e } from "./errors/nonfield/FormNonFieldErrorMarker.mjs";
 import { default as t } from "./errors/nonfield/FormNonFieldErrorMarker.utils.mjs";
-import { default as f } from "./errors/orphan/useFormErrorsHasOnlyOrphans.mjs";
-import { default as u } from "./errors/orphan/useOrphanFormErrors.mjs";
+import { default as a } from "./errors/orphan/useFormErrorsHasOnlyOrphans.mjs";
+import { default as m } from "./errors/orphan/useOrphanFormErrors.mjs";
 import { default as d } from "./errors/orphan/useOrphanFormErrorsToConsoleError.mjs";
 import { default as F } from "./errors/root/useRootFormFieldErrors.mjs";
-import { default as n } from "./errors/useFormErrorConsoleDebug.mjs";
+import { default as x } from "./errors/useFormErrorConsoleDebug.mjs";
 import { default as i } from "./errors/useFormErrorsEffect.mjs";
-import { default as h } from "./errors/useFormErrorsIfAny.mjs";
-import { default as C } from "./errors/useFormErrorsOnChange.mjs";
-import { default as k } from "./errors/useFormRequestSubmit.mjs";
+import { default as O } from "./errors/useFormErrorsIfAny.mjs";
+import { default as b } from "./errors/useFormErrorsOnChange.mjs";
+import { default as A } from "./errors/useFormRequestSubmit.mjs";
+import { default as C } from "./submit/useFormOnSubmitSuccessful.mjs";
+import { default as k } from "./submit/useFormOnSubmitSuccessfulAndReset.mjs";
+import { default as H } from "./submit/useResetFormOnSubmitSuccessful.mjs";
 export {
   e as FormNonFieldErrorMarker,
   t as FormNonFieldErrorMarkerHtmlAttribute,
-  n as useFormErrorConsoleDebug,
+  x as useFormErrorConsoleDebug,
   i as useFormErrorsEffect,
-  f as useFormErrorsHasOnlyOrphans,
-  h as useFormErrorsIfAny,
-  C as useFormErrorsOnChange,
-  k as useFormRequestSubmit,
-  u as useOrphanFormErrors,
+  a as useFormErrorsHasOnlyOrphans,
+  O as useFormErrorsIfAny,
+  b as useFormErrorsOnChange,
+  C as useFormOnSubmitSuccessful,
+  k as useFormOnSubmitSuccessfulAndReset,
+  A as useFormRequestSubmit,
+  m as useOrphanFormErrors,
   d as useOrphanFormErrorsToConsoleError,
+  H as useResetFormAfterSubmitSuccessful,
   F as useRootFormFieldErrors
 };

package/dist/esm/submit/useFormOnSubmitSuccessful.mjs

@@ -0,0 +1,11 @@
+import u from "react";
+import { useFormState as e } from "react-hook-form";
+const o = (s) => {
+  const { isSubmitSuccessful: t } = e();
+  u.useEffect(() => {
+    s && t && s();
+  }, [s, t]);
+}, r = o;
+export {
+  r as default
+};

package/dist/esm/submit/useFormOnSubmitSuccessfulAndReset.mjs

@@ -0,0 +1,14 @@
+import r from "react";
+import { useFormState as c } from "react-hook-form";
+import f from "./useFormOnSubmitSuccessful.mjs";
+const m = (s) => {
+  const { isSubmitSuccessful: t, isDirty: u } = c(), e = r.useRef(!1);
+  f(() => {
+    e.current = !0;
+  }), r.useEffect(() => {
+    s && e.current && !t && !u && (s(), e.current = !1);
+  }, [t, u]);
+}, S = m;
+export {
+  S as default
+};

package/dist/esm/submit/useResetFormOnSubmitSuccessful.mjs

@@ -0,0 +1,11 @@
+import { useFormContext as r } from "react-hook-form";
+import t from "./useFormOnSubmitSuccessful.mjs";
+const s = (e) => {
+  const { reset: u } = r();
+  t(() => {
+    e != null && e.enabled && u(void 0, e);
+  });
+}, f = s;
+export {
+  f as default
+};

package/dist/types/errors/getFlatFieldErrors.d.ts

@@ -15,3 +15,11 @@ export type FlatFieldErrors = Record<string, FieldError>;
  */
 declare const getFlatFieldErrors: (errors: FieldErrors) => FlatFieldErrors;
 export default getFlatFieldErrors;
+/**
+ * Regular expression to maybe match the end of a leaf node path.
+ *
+ * i.e., `name.type`, `address.street.message`
+ *
+ * iow: dot [?: non-capturing]("type" | "message")[\b word boundary][$ end of string]
+ */
+export declare const regexMaybeFieldErrorLeafNode: RegExp;

package/dist/types/errors/nonfield/FormNonFieldErrorMarker.d.ts

@@ -4,7 +4,7 @@ type Props = {
     path: string;
 };
 /**
- * Empty, hidden marker to indicate a non-field error is presented to user.
+ * Empty, hidden marker to indicate a non-field/non-root error is being displayed to user.
  */
 declare const FormNonFieldErrorMarker: React.FC<Props>;
 export default FormNonFieldErrorMarker;

package/dist/types/main.d.ts

@@ -9,3 +9,6 @@ export { default as useFormErrorsEffect } from './errors/useFormErrorsEffect';
 export { default as useFormErrorsIfAny } from './errors/useFormErrorsIfAny';
 export { default as useFormErrorsOnChange } from './errors/useFormErrorsOnChange';
 export { default as useFormRequestSubmit } from './errors/useFormRequestSubmit';
+export { default as useFormOnSubmitSuccessful } from './submit/useFormOnSubmitSuccessful';
+export { default as useFormOnSubmitSuccessfulAndReset } from './submit/useFormOnSubmitSuccessfulAndReset';
+export { default as useResetFormAfterSubmitSuccessful } from './submit/useResetFormOnSubmitSuccessful';

package/dist/types/submit/useFormOnSubmitSuccessful.d.ts

@@ -0,0 +1,2 @@
+declare const useFormOnSubmitSuccessful: (callback?: () => void) => void;
+export default useFormOnSubmitSuccessful;

package/dist/types/submit/useFormOnSubmitSuccessfulAndReset.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Calls a callback after a successful submit and after a form reset.
+ *
+ * Using RHF and following its rules, we are not able to get the state `isSubmitSuccessful=true` and `isDirty=false`.
+ * So, this has to keep track of previous state.
+ *
+ * SubmitSuccessfulAndReset = was `isSubmitSuccessful` and now `!isSubmitSuccessful && !isDirty`
+ */
+declare const useFormOnSubmitSuccessfulAndReset: (callback?: () => void) => void;
+export default useFormOnSubmitSuccessfulAndReset;

package/dist/types/submit/useResetFormOnSubmitSuccessful.d.ts

@@ -0,0 +1,12 @@
+import { KeepStateOptions } from 'react-hook-form';
+
+type Options = {
+    enabled?: boolean;
+} & KeepStateOptions;
+/**
+ * Handle resetting after successful submit with no server validation errors.
+ * See `Rules` section: https://react-hook-form.com/api/useform/reset/
+ * Specifically: "- It's recommended to reset inside useEffect after submission."
+ */
+declare const useResetFormAfterSubmitSuccessful: (options?: Options) => void;
+export default useResetFormAfterSubmitSuccessful;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,
@@ -71,6 +71,21 @@
       "import": "./dist/esm/errors/root/useRootFormFieldErrors.mjs",
       "require": "./dist/cjs/errors/root/useRootFormFieldErrors.cjs",
       "types": "./dist/types/errors/root/useRootFormFieldErrors.d.ts"
+    },
+    "./submit/useFormOnSubmitSuccessful": {
+      "import": "./dist/esm/submit/useFormOnSubmitSuccessful.mjs",
+      "require": "./dist/cjs/submit/useFormOnSubmitSuccessful.cjs",
+      "types": "./dist/types/submit/useFormOnSubmitSuccessful.d.ts"
+    },
+    "./submit/useFormOnSubmitSuccessfulAndReset": {
+      "import": "./dist/esm/submit/useFormOnSubmitSuccessfulAndReset.mjs",
+      "require": "./dist/cjs/submit/useFormOnSubmitSuccessfulAndReset.cjs",
+      "types": "./dist/types/submit/useFormOnSubmitSuccessfulAndReset.d.ts"
+    },
+    "./submit/useResetFormAfterSubmitSuccessful": {
+      "import": "./dist/esm/submit/useResetFormAfterSubmitSuccessful.mjs",
+      "require": "./dist/cjs/submit/useResetFormAfterSubmitSuccessful.cjs",
+      "types": "./dist/types/submit/useResetFormAfterSubmitSuccessful.d.ts"
     }
   },
   "scripts": {