@paragrav/rhf-utils 0.0.16

package/dist/cjs/main.d.ts

@@ -0,0 +1,7 @@
+export { default as FormErrorNonFieldMarker, FormErrorNonFieldMarkerDataHtmlAttribute, } from './rhf/errors/orphans/FormErrorNonFieldMarker';
+export { default as useFormErrorOrphansToConsoleError } from './rhf/errors/orphans/useFormErrorOrphansToConsoleError';
+export { default as useFormOrphanErrors } from './rhf/errors/orphans/useFormOrphanErrors';
+export { default as useFormRootFieldErrors } from './rhf/errors/roots/useFormRootFieldErrors';
+export { default as useFormErrorsEffect } from './rhf/errors/useFormErrorsEffect';
+export { default as useFormErrorsOnChange } from './rhf/errors/useFormErrorsOnChange';
+export { default as useFormRequestSubmit } from './rhf/errors/useFormRequestSubmit';

package/dist/cjs/main.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 });
+exports.useFormRequestSubmit = exports.useFormErrorsOnChange = exports.useFormErrorsEffect = exports.useFormRootFieldErrors = exports.useFormOrphanErrors = exports.useFormErrorOrphansToConsoleError = exports.FormErrorNonFieldMarkerDataHtmlAttribute = exports.FormErrorNonFieldMarker = void 0;
+var FormErrorNonFieldMarker_1 = require("./rhf/errors/orphans/FormErrorNonFieldMarker");
+Object.defineProperty(exports, "FormErrorNonFieldMarker", { enumerable: true, get: function () { return __importDefault(FormErrorNonFieldMarker_1).default; } });
+Object.defineProperty(exports, "FormErrorNonFieldMarkerDataHtmlAttribute", { enumerable: true, get: function () { return FormErrorNonFieldMarker_1.FormErrorNonFieldMarkerDataHtmlAttribute; } });
+var useFormErrorOrphansToConsoleError_1 = require("./rhf/errors/orphans/useFormErrorOrphansToConsoleError");
+Object.defineProperty(exports, "useFormErrorOrphansToConsoleError", { enumerable: true, get: function () { return __importDefault(useFormErrorOrphansToConsoleError_1).default; } });
+var useFormOrphanErrors_1 = require("./rhf/errors/orphans/useFormOrphanErrors");
+Object.defineProperty(exports, "useFormOrphanErrors", { enumerable: true, get: function () { return __importDefault(useFormOrphanErrors_1).default; } });
+var useFormRootFieldErrors_1 = require("./rhf/errors/roots/useFormRootFieldErrors");
+Object.defineProperty(exports, "useFormRootFieldErrors", { enumerable: true, get: function () { return __importDefault(useFormRootFieldErrors_1).default; } });
+var useFormErrorsEffect_1 = require("./rhf/errors/useFormErrorsEffect");
+Object.defineProperty(exports, "useFormErrorsEffect", { enumerable: true, get: function () { return __importDefault(useFormErrorsEffect_1).default; } });
+var useFormErrorsOnChange_1 = require("./rhf/errors/useFormErrorsOnChange");
+Object.defineProperty(exports, "useFormErrorsOnChange", { enumerable: true, get: function () { return __importDefault(useFormErrorsOnChange_1).default; } });
+var useFormRequestSubmit_1 = require("./rhf/errors/useFormRequestSubmit");
+Object.defineProperty(exports, "useFormRequestSubmit", { enumerable: true, get: function () { return __importDefault(useFormRequestSubmit_1).default; } });

package/dist/cjs/rhf/errors/orphans/FormErrorNonFieldMarker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    /** Flat field name. (e.g., `address.street`) */
+    path: string;
+};
+/**
+ * Empty marker to indicate a non-field error is presented to user.
+ */
+declare const FormErrorNonFieldMarker: React.FC<Props>;
+export default FormErrorNonFieldMarker;
+export declare const FormErrorNonFieldMarkerDataHtmlAttribute = "data-grnwld-rhf-utils-marker-path";

package/dist/cjs/rhf/errors/orphans/FormErrorNonFieldMarker.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormErrorNonFieldMarkerDataHtmlAttribute = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Empty marker to indicate a non-field error is presented to user.
+ */
+const FormErrorNonFieldMarker = ({ path }) => {
+    const attribute = {
+        [exports.FormErrorNonFieldMarkerDataHtmlAttribute]: path,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { role: "alert", "aria-hidden": "true" // hide from screen readers
+        , style: { display: 'none' }, ...attribute }));
+};
+exports.default = FormErrorNonFieldMarker;
+// utils
+exports.FormErrorNonFieldMarkerDataHtmlAttribute = 'data-grnwld-rhf-utils-marker-path';

package/dist/cjs/rhf/errors/orphans/useFormErrorOrphansToConsoleError.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Orphans are field errors that do not have a ref.
+ * (Most commonly `root(.*)`, but these are filtered out. They are handled by `useFormRootFieldErrors`.)
+ * Outputs to `console.error` all errors with `ref: undefined` that do not begin with `root(.*)`.
+ * Sentry (or equivalent) should capture.
+ */
+declare const useFormErrorOrphansToConsoleError: (formRef: React.RefObject<HTMLFormElement>) => void;
+export default useFormErrorOrphansToConsoleError;

package/dist/cjs/rhf/errors/orphans/useFormErrorOrphansToConsoleError.js

@@ -0,0 +1,29 @@
+"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 useFormOrphanErrors_1 = __importDefault(require("./useFormOrphanErrors"));
+/**
+ * Orphans are field errors that do not have a ref.
+ * (Most commonly `root(.*)`, but these are filtered out. They are handled by `useFormRootFieldErrors`.)
+ * Outputs to `console.error` all errors with `ref: undefined` that do not begin with `root(.*)`.
+ * Sentry (or equivalent) should capture.
+ */
+const useFormErrorOrphansToConsoleError = (formRef) => {
+    const { getValues } = (0, react_hook_form_1.useFormContext)();
+    const { errors } = (0, react_hook_form_1.useFormState)();
+    const orphans = (0, useFormOrphanErrors_1.default)(formRef);
+    react_1.default.useEffect(() => {
+        if (!Object.keys(orphans).length)
+            return;
+        console.error('useFormErrorOrphansToConsoleError', {
+            location: window.location,
+            values: getValues(),
+            orphans,
+        });
+    }, [errors, getValues, orphans]);
+};
+exports.default = useFormErrorOrphansToConsoleError;

package/dist/cjs/rhf/errors/orphans/useFormOrphanErrors.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Root field errors from form.
+ * These are typically displayed at the bottom of the form.
+ * (Root errors have to processed this way due to (potentially) recursive types.)
+ */
+declare const useFormOrphanErrors: (formRef: React.RefObject<HTMLFormElement>) => Record<string, import("react-hook-form").FieldError>;
+export default useFormOrphanErrors;

package/dist/cjs/rhf/errors/orphans/useFormOrphanErrors.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const useFormErrorsOnChange_1 = __importDefault(require("../useFormErrorsOnChange"));
+const utils_1 = require("./utils");
+/**
+ * Root field errors from form.
+ * These are typically displayed at the bottom of the form.
+ * (Root errors have to processed this way due to (potentially) recursive types.)
+ */
+const useFormOrphanErrors = (formRef) => (0, useFormErrorsOnChange_1.default)((errors) => {
+    if (JSON.stringify(errors) === '{}')
+        return {};
+    if (!formRef.current) {
+        console.error(errors);
+        throw new Error('This should not happen.');
+    }
+    return (0, utils_1.getOrphanFieldErrorsWithMarkerCheck)(errors, formRef.current);
+});
+exports.default = useFormOrphanErrors;

package/dist/cjs/rhf/errors/orphans/utils.d.ts

@@ -0,0 +1,3 @@
+import type { FieldErrors } from 'react-hook-form';
+export declare const getOrphanFieldErrors: (errors: FieldErrors) => Record<string, import("react-hook-form").FieldError>;
+export declare const getOrphanFieldErrorsWithMarkerCheck: (errors: FieldErrors, formElement: HTMLFormElement) => Record<string, import("react-hook-form").FieldError>;

package/dist/cjs/rhf/errors/orphans/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOrphanFieldErrorsWithMarkerCheck = exports.getOrphanFieldErrors = void 0;
+const utils_1 = require("../roots/utils");
+const utils_2 = require("../utils");
+const FormErrorNonFieldMarker_1 = require("./FormErrorNonFieldMarker");
+const getOrphanFieldErrors = (errors) => (0, utils_2.getFieldErrorsByFilter)(errors, (path, flattenedErrors) => {
+    return (flattenedErrors[path + '.ref'] === undefined && // no ref
+        !(0, utils_1.isFormErrorPathRoot)(path) // ignore root errors, which are always orphans
+    );
+});
+exports.getOrphanFieldErrors = getOrphanFieldErrors;
+const getOrphanFieldErrorsWithMarkerCheck = (errors, formElement) => {
+    const orphanErrors = (0, exports.getOrphanFieldErrors)(errors);
+    return (0, utils_2.getFieldErrorsByFilter)(orphanErrors, 
+    // if doesn't have alert, then it's an orphan
+    (path) => !formElement.querySelector(`[role="alert"][${FormErrorNonFieldMarker_1.FormErrorNonFieldMarkerDataHtmlAttribute}="${path}"]`));
+};
+exports.getOrphanFieldErrorsWithMarkerCheck = getOrphanFieldErrorsWithMarkerCheck;
+//

package/dist/cjs/rhf/errors/roots/useFormRootFieldErrors.d.ts

@@ -0,0 +1,2 @@
+declare const useFormRootFieldErrors: () => import("react-hook-form").FieldError[];
+export default useFormRootFieldErrors;

package/dist/cjs/rhf/errors/roots/useFormRootFieldErrors.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const useFormErrorsOnChange_1 = __importDefault(require("../useFormErrorsOnChange"));
+const utils_1 = require("./utils");
+const useFormRootFieldErrors = () => (0, useFormErrorsOnChange_1.default)(utils_1.getRootFieldErrorList);
+exports.default = useFormRootFieldErrors;

package/dist/cjs/rhf/errors/roots/utils.d.ts

@@ -0,0 +1,7 @@
+import type { FieldErrors } from 'react-hook-form';
+/**
+ * Determine if an error path is root. (e.g., `root` or `root.nested`)
+ * @param path Flat path. (e.g., 'root.nested')
+ */
+export declare const isFormErrorPathRoot: (path: string) => boolean;
+export declare const getRootFieldErrorList: (errors: FieldErrors) => import("react-hook-form").FieldError[];

package/dist/cjs/rhf/errors/roots/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRootFieldErrorList = exports.isFormErrorPathRoot = void 0;
+const utils_1 = require("../utils");
+const ROOT = 'root';
+/**
+ * Determine if an error path is root. (e.g., `root` or `root.nested`)
+ * @param path Flat path. (e.g., 'root.nested')
+ */
+const isFormErrorPathRoot = (path) => path === ROOT || path.startsWith(ROOT + '.');
+exports.isFormErrorPathRoot = isFormErrorPathRoot;
+const getRootFieldErrorList = (errors) => (0, utils_1.getFieldErrorListByFilter)(errors, exports.isFormErrorPathRoot);
+exports.getRootFieldErrorList = getRootFieldErrorList;

package/dist/cjs/rhf/errors/useFormErrorsEffect.d.ts

@@ -0,0 +1,3 @@
+import type { FieldErrors } from 'react-hook-form';
+declare const useFormErrorsEffect: <TReturn>(callback: (errors: FieldErrors) => TReturn) => void;
+export default useFormErrorsEffect;

package/dist/cjs/rhf/errors/useFormErrorsEffect.js

@@ -0,0 +1,14 @@
+"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 useFormErrorsEffect = (callback) => {
+    const { errors } = (0, react_hook_form_1.useFormState)();
+    react_1.default.useEffect(() => {
+        callback(errors);
+    }, [callback, errors]);
+};
+exports.default = useFormErrorsEffect;

package/dist/cjs/rhf/errors/useFormErrorsOnChange.d.ts

@@ -0,0 +1,6 @@
+import type { FieldErrors } from 'react-hook-form';
+/**
+ * Provide a callback to call when RHF errors change.
+ */
+declare const useFormErrorsOnChange: <TReturn>(callback: (errors: FieldErrors) => TReturn) => TReturn;
+export default useFormErrorsOnChange;

package/dist/cjs/rhf/errors/useFormErrorsOnChange.js

@@ -0,0 +1,15 @@
+"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");
+/**
+ * Provide a callback to call when RHF errors change.
+ */
+const useFormErrorsOnChange = (callback) => {
+    const { errors } = (0, react_hook_form_1.useFormState)();
+    return react_1.default.useMemo(() => callback(errors), [callback, errors]);
+};
+exports.default = useFormErrorsOnChange;

package/dist/cjs/rhf/errors/useFormRequestSubmit.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get callback to trigger submit manually on form.
+ * @link https://developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit
+ */
+declare const useFormRequestSubmit: (ref: React.RefObject<HTMLFormElement>) => HTMLFormElement['requestSubmit'];
+export default useFormRequestSubmit;

package/dist/cjs/rhf/errors/useFormRequestSubmit.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Get callback to trigger submit manually on form.
+ * @link https://developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit
+ */
+const useFormRequestSubmit = (ref) => (submitter) => {
+    // typeguard (should never happen at runtime when callback is called)
+    if (!ref.current)
+        throw new Error();
+    ref.current.requestSubmit(submitter);
+};
+exports.default = useFormRequestSubmit;

package/dist/cjs/rhf/errors/utils.d.ts

@@ -0,0 +1,9 @@
+import type { FieldError, FieldErrors } from 'react-hook-form';
+/**
+ * @returns A flattened {@link FieldErrors} record.
+ */
+export declare const getFieldErrorsByFilter: (errors: FieldErrors, where?: ((path: string, flattenedErrors: Record<string, unknown>) => boolean) | undefined) => Record<string, FieldError>;
+/**
+ * @returns An array of field errors. (Not a record.)
+ */
+export declare const getFieldErrorListByFilter: (errors: FieldErrors, where?: ((path: string, flattenedErrors: Record<string, unknown>) => boolean) | undefined) => FieldError[];

package/dist/cjs/rhf/errors/utils.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFieldErrorListByFilter = exports.getFieldErrorsByFilter = void 0;
+const flat_1 = require("flat");
+const react_hook_form_1 = require("react-hook-form");
+/**
+ * @returns A flattened {@link FieldErrors} record.
+ */
+const getFieldErrorsByFilter = (errors, where) => {
+    const keys = getFieldErrorOrphanKeysByFilter(errors, where);
+    const record = keys.reduce((acc, path) => {
+        acc[path] = (0, react_hook_form_1.get)(errors, path);
+        return acc;
+    }, {});
+    return record;
+};
+exports.getFieldErrorsByFilter = getFieldErrorsByFilter;
+/**
+ * @returns An array of field errors. (Not a record.)
+ */
+const getFieldErrorListByFilter = (errors, where) => {
+    const keys = getFieldErrorOrphanKeysByFilter(errors, where);
+    const fieldErrors = keys.map((key) => {
+        return (0, react_hook_form_1.get)(errors, key);
+    });
+    return fieldErrors;
+};
+exports.getFieldErrorListByFilter = getFieldErrorListByFilter;
+/**
+ * RHF uses deeply-nested object for errors, which reflects the structure of the form.
+ * And the type is quite complex. All this complicates the process of finding errors.
+ * This function automatically looks only for keys that end with `.ref`.
+ * (This makes sure we only look at the leaf nodes of the object tree.)
+ * This function also automatically removes the `.ref` suffix from the keys.
+ *
+ * @param where Filter callback.
+ * @param map Transformer callback.
+ * @returns Tuple of field errors and keys.
+ */
+const getFieldErrorOrphanKeysByFilter = (errors, where) => {
+    /**
+     * e.g.:
+     * ```js
+     * { root: { ref: undefined, message: 'Form is invalid.' }, email: { ref: Object, message: 'Invalid.' } }
+     * ```
+     * flattens to:
+     * ```js
+     * { 'root.ref': undefined, 'root.message': 'Form is invalid.', 'email.ref': Object, 'email.message': 'Invalid.' }
+     * ```
+     * returns (if no additional filter/map specified)
+     * ```js
+     * [ 'root', 'email' ]
+     * ```
+     */
+    const flattenedErrors = (0, flat_1.flatten)(errors);
+    const flattenedErrorObjectKeys = Object.keys(flattenedErrors);
+    // look for leaf node, which would have ref prop (e.g., `orphan_field.ref`)
+    const flattenedErrorObjectKeysEndingWithDotRef = flattenedErrorObjectKeys.filter((key) => key.match(regexEndsWithDotRef));
+    // remove `.ref` suffix to get flat field path (e.g., `name`, `address.street`)
+    const paths = flattenedErrorObjectKeysEndingWithDotRef.map((flattenedKey) => flattenedKey.replace(regexEndsWithDotRef, ''));
+    // filter via callback
+    const flattenedKeysFiltered = paths.filter((path) => where ? where(path, flattenedErrors) : true);
+    return flattenedKeysFiltered;
+};
+const regexEndsWithDotRef = /\.ref$/;

package/dist/esm/main.mjs

@@ -0,0 +1,17 @@
+import { default as e, FormErrorNonFieldMarkerDataHtmlAttribute as t } from "./rhf/errors/orphans/FormErrorNonFieldMarker.mjs";
+import { default as s } from "./rhf/errors/orphans/useFormErrorOrphansToConsoleError.mjs";
+import { default as f } from "./rhf/errors/orphans/useFormOrphanErrors.mjs";
+import { default as l } from "./rhf/errors/roots/useFormRootFieldErrors.mjs";
+import { default as d } from "./rhf/errors/useFormErrorsEffect.mjs";
+import { default as E } from "./rhf/errors/useFormErrorsOnChange.mjs";
+import { default as x } from "./rhf/errors/useFormRequestSubmit.mjs";
+export {
+  e as FormErrorNonFieldMarker,
+  t as FormErrorNonFieldMarkerDataHtmlAttribute,
+  s as useFormErrorOrphansToConsoleError,
+  d as useFormErrorsEffect,
+  E as useFormErrorsOnChange,
+  f as useFormOrphanErrors,
+  x as useFormRequestSubmit,
+  l as useFormRootFieldErrors
+};

package/dist/esm/node_modules/flat/index.mjs

@@ -0,0 +1,22 @@
+function d(t) {
+  return t && t.constructor && typeof t.constructor.isBuffer == "function" && t.constructor.isBuffer(t);
+}
+function A(t) {
+  return t;
+}
+function B(t, n) {
+  n = n || {};
+  const l = n.delimiter || ".", m = n.maxDepth, o = n.transformKey || A, f = {};
+  function i(s, u, r) {
+    r = r || 1, Object.keys(s).forEach(function(c) {
+      const e = s[c], x = n.safe && Array.isArray(e), a = Object.prototype.toString.call(e), O = d(e), b = a === "[object Object]" || a === "[object Array]", y = u ? u + l + o(c) : o(c);
+      if (!x && !O && b && Object.keys(e).length && (!n.maxDepth || r < m))
+        return i(e, y, r + 1);
+      f[y] = e;
+    });
+  }
+  return i(t), f;
+}
+export {
+  B as flatten
+};

package/dist/esm/rhf/errors/orphans/FormErrorNonFieldMarker.mjs

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+const o = ({ path: r }) => {
+  const t = {
+    [a]: r
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "alert",
+      "aria-hidden": "true",
+      style: { display: "none" },
+      ...t
+    }
+  );
+}, i = o, a = "data-grnwld-rhf-utils-marker-path";
+export {
+  a as FormErrorNonFieldMarkerDataHtmlAttribute,
+  i as default
+};

package/dist/esm/rhf/errors/orphans/useFormErrorOrphansToConsoleError.mjs

@@ -0,0 +1,16 @@
+import t from "react";
+import { useFormContext as n, useFormState as a } from "react-hook-form";
+import m from "./useFormOrphanErrors.mjs";
+const c = (e) => {
+  const { getValues: o } = n(), { errors: s } = a(), r = m(e);
+  t.useEffect(() => {
+    Object.keys(r).length && console.error("useFormErrorOrphansToConsoleError", {
+      location: window.location,
+      values: o(),
+      orphans: r
+    });
+  }, [s, o, r]);
+}, E = c;
+export {
+  E as default
+};

package/dist/esm/rhf/errors/orphans/useFormOrphanErrors.mjs

@@ -0,0 +1,13 @@
+import "react";
+import n from "../useFormErrorsOnChange.mjs";
+import { getOrphanFieldErrorsWithMarkerCheck as t } from "./utils.mjs";
+const e = (o) => n((r) => {
+  if (JSON.stringify(r) === "{}")
+    return {};
+  if (!o.current)
+    throw console.error(r), new Error("This should not happen.");
+  return t(r, o.current);
+}), p = e;
+export {
+  p as default
+};

package/dist/esm/rhf/errors/orphans/utils.mjs

@@ -0,0 +1,18 @@
+import { isFormErrorPathRoot as l } from "../roots/utils.mjs";
+import { getFieldErrorsByFilter as e } from "../utils.mjs";
+import { FormErrorNonFieldMarkerDataHtmlAttribute as m } from "./FormErrorNonFieldMarker.mjs";
+const n = (o) => e(o, (r, t) => t[r + ".ref"] === void 0 && // no ref
+!l(r)), p = (o, r) => {
+  const t = n(o);
+  return e(
+    t,
+    // if doesn't have alert, then it's an orphan
+    (i) => !r.querySelector(
+      `[role="alert"][${m}="${i}"]`
+    )
+  );
+};
+export {
+  n as getOrphanFieldErrors,
+  p as getOrphanFieldErrorsWithMarkerCheck
+};

package/dist/esm/rhf/errors/roots/useFormRootFieldErrors.mjs

@@ -0,0 +1,6 @@
+import o from "../useFormErrorsOnChange.mjs";
+import { getRootFieldErrorList as r } from "./utils.mjs";
+const t = () => o(r), m = t;
+export {
+  m as default
+};

package/dist/esm/rhf/errors/roots/utils.mjs

@@ -0,0 +1,6 @@
+import { getFieldErrorListByFilter as t } from "../utils.mjs";
+const r = "root", i = (o) => o === r || o.startsWith(r + "."), e = (o) => t(o, i);
+export {
+  e as getRootFieldErrorList,
+  i as isFormErrorPathRoot
+};

package/dist/esm/rhf/errors/useFormErrorsEffect.mjs

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

package/dist/esm/rhf/errors/useFormErrorsOnChange.mjs

@@ -0,0 +1,9 @@
+import e from "react";
+import { useFormState as t } from "react-hook-form";
+const n = (r) => {
+  const { errors: o } = t();
+  return e.useMemo(() => r(o), [r, o]);
+};
+export {
+  n as default
+};

package/dist/esm/rhf/errors/useFormRequestSubmit.mjs

@@ -0,0 +1,8 @@
+const r = (t) => (e) => {
+  if (!t.current)
+    throw new Error();
+  t.current.requestSubmit(e);
+}, u = r;
+export {
+  u as default
+};

package/dist/esm/rhf/errors/utils.mjs

@@ -0,0 +1,14 @@
+import { flatten as f } from "../../node_modules/flat/index.mjs";
+import { get as d } from "react-hook-form";
+const p = (e, t) => i(e, t).reduce((r, s) => (r[s] = d(e, s), r), {}), F = (e, t) => i(e, t).map((r) => d(e, r)), i = (e, t) => {
+  const o = f(e);
+  return Object.keys(o).filter((n) => n.match(l)).map(
+    (n) => n.replace(l, "")
+  ).filter(
+    (n) => t ? t(n, o) : !0
+  );
+}, l = /\.ref$/;
+export {
+  F as getFieldErrorListByFilter,
+  p as getFieldErrorsByFilter
+};

package/dist/types/main.d.ts

@@ -0,0 +1,7 @@
+export { default as FormErrorNonFieldMarker, FormErrorNonFieldMarkerDataHtmlAttribute, } from './rhf/errors/orphans/FormErrorNonFieldMarker';
+export { default as useFormErrorOrphansToConsoleError } from './rhf/errors/orphans/useFormErrorOrphansToConsoleError';
+export { default as useFormOrphanErrors } from './rhf/errors/orphans/useFormOrphanErrors';
+export { default as useFormRootFieldErrors } from './rhf/errors/roots/useFormRootFieldErrors';
+export { default as useFormErrorsEffect } from './rhf/errors/useFormErrorsEffect';
+export { default as useFormErrorsOnChange } from './rhf/errors/useFormErrorsOnChange';
+export { default as useFormRequestSubmit } from './rhf/errors/useFormRequestSubmit';

package/dist/types/rhf/errors/orphans/FormErrorNonFieldMarker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    /** Flat field name. (e.g., `address.street`) */
+    path: string;
+};
+/**
+ * Empty marker to indicate a non-field error is presented to user.
+ */
+declare const FormErrorNonFieldMarker: React.FC<Props>;
+export default FormErrorNonFieldMarker;
+export declare const FormErrorNonFieldMarkerDataHtmlAttribute = "data-grnwld-rhf-utils-marker-path";

package/dist/types/rhf/errors/orphans/useFormErrorOrphansToConsoleError.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+/**
+ * Orphans are field errors that do not have a ref.
+ * (Most commonly `root(.*)`, but these are filtered out. They are handled by `useFormRootFieldErrors`.)
+ * Outputs to `console.error` all errors with `ref: undefined` that do not begin with `root(.*)`.
+ * Sentry (or equivalent) should capture.
+ */
+declare const useFormErrorOrphansToConsoleError: (formRef: React.RefObject<HTMLFormElement>) => void;
+export default useFormErrorOrphansToConsoleError;

package/dist/types/rhf/errors/orphans/useFormOrphanErrors.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+/**
+ * Root field errors from form.
+ * These are typically displayed at the bottom of the form.
+ * (Root errors have to processed this way due to (potentially) recursive types.)
+ */
+declare const useFormOrphanErrors: (formRef: React.RefObject<HTMLFormElement>) => Record<string, import('react-hook-form').FieldError>;
+export default useFormOrphanErrors;

package/dist/types/rhf/errors/orphans/utils.d.ts

@@ -0,0 +1,4 @@
+import { FieldErrors } from 'react-hook-form';
+
+export declare const getOrphanFieldErrors: (errors: FieldErrors) => Record<string, import('react-hook-form').FieldError>;
+export declare const getOrphanFieldErrorsWithMarkerCheck: (errors: FieldErrors, formElement: HTMLFormElement) => Record<string, import('react-hook-form').FieldError>;

package/dist/types/rhf/errors/roots/useFormRootFieldErrors.d.ts

@@ -0,0 +1,2 @@
+declare const useFormRootFieldErrors: () => import('react-hook-form').FieldError[];
+export default useFormRootFieldErrors;

package/dist/types/rhf/errors/roots/utils.d.ts

@@ -0,0 +1,8 @@
+import { FieldErrors } from 'react-hook-form';
+
+/**
+ * Determine if an error path is root. (e.g., `root` or `root.nested`)
+ * @param path Flat path. (e.g., 'root.nested')
+ */
+export declare const isFormErrorPathRoot: (path: string) => boolean;
+export declare const getRootFieldErrorList: (errors: FieldErrors) => import('react-hook-form').FieldError[];

package/dist/types/rhf/errors/useFormErrorsEffect.d.ts

@@ -0,0 +1,4 @@
+import { FieldErrors } from 'react-hook-form';
+
+declare const useFormErrorsEffect: <TReturn>(callback: (errors: FieldErrors) => TReturn) => void;
+export default useFormErrorsEffect;

package/dist/types/rhf/errors/useFormErrorsOnChange.d.ts

@@ -0,0 +1,7 @@
+import { FieldErrors } from 'react-hook-form';
+
+/**
+ * Provide a callback to call when RHF errors change.
+ */
+declare const useFormErrorsOnChange: <TReturn>(callback: (errors: FieldErrors) => TReturn) => TReturn;
+export default useFormErrorsOnChange;

package/dist/types/rhf/errors/useFormRequestSubmit.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get callback to trigger submit manually on form.
+ * @link https://developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit
+ */
+declare const useFormRequestSubmit: (ref: React.RefObject<HTMLFormElement>) => HTMLFormElement['requestSubmit'];
+export default useFormRequestSubmit;

package/dist/types/rhf/errors/utils.d.ts

@@ -0,0 +1,10 @@
+import { FieldError, FieldErrors } from 'react-hook-form';
+
+/**
+ * @returns A flattened {@link FieldErrors} record.
+ */
+export declare const getFieldErrorsByFilter: (errors: FieldErrors, where?: ((path: string, flattenedErrors: Record<string, unknown>) => boolean) | undefined) => Record<string, FieldError>;
+/**
+ * @returns An array of field errors. (Not a record.)
+ */
+export declare const getFieldErrorListByFilter: (errors: FieldErrors, where?: ((path: string, flattenedErrors: Record<string, unknown>) => boolean) | undefined) => FieldError[];

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@paragrav/rhf-utils",
+  "author": "paragrav.dev",
+  "license": "MIT",
+  "version": "0.0.16",
+  "description": "Integration utilities for react-hook-form.",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/cjs/main.js",
+  "module": "./dist/esm/main.mjs",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/types/main.d.ts",
+        "default": "./dist/cjs/main.js"
+      },
+      "import": {
+        "types": "./dist/types/main.d.ts",
+        "default": "./dist/esm/main.mjs"
+      }
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "npm run validate && npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc -p ./tsconfig.cjs.json",
+    "build:esm": "vite build",
+    "lint": "eslint --ignore-path ./.gitignore --ext ts,tsx --report-unused-disable-directives --max-warnings 0 .",
+    "preinstall": "npx only-allow npm",
+    "prepare": "husky",
+    "prepublishOnly": "npm run build",
+    "test": "vitest",
+    "test:ct": "playwright test -c playwright-ct.config.ts",
+    "test:ct:ui": "playwright test -c playwright-ct.config.ts --ui",
+    "tsc": "tsc",
+    "validate": "npm run tsc & npm run lint & npm run test & npm run test:ct"
+  },
+  "dependencies": {
+    "flat": "^6.0.1"
+  },
+  "peerDependencies": {
+    "react-hook-form": "^7"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^3.3.4",
+    "@playwright/experimental-ct-react": "^1.42.1",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^18.19.26",
+    "@types/react": "^18.2.69",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.13.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.5",
+    "vite-plugin-dts": "^3.8.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.4.0",
+    "zod": "^3.22.4"
+  },
+  "engines": {
+    "node": ">=18.19.1",
+    "npm": "^10.2.4"
+  },
+  "packageManager": "npm@10.2.4",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/paragrav/rhf-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/paragrav/rhf-utils/issues"
+  },
+  "homepage": "https://github.com/paragrav/rhf-utils",
+  "keywords": [
+    "react-hook-form",
+    "zod",
+    "form",
+    "react"
+  ]
+}