remix-validated-form 4.1.0-beta.1 → 4.1.0-beta.2

package/browser/ValidatedForm.d.ts

@@ -10,7 +10,7 @@ export declare type FormProps<DataType> = {
      * A submit callback that gets called when the form is submitted
      * after all validations have been run.
      */
-    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
     /**
      * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
      * The form will use the fetcher for loading states, action data, etc

package/browser/ValidatedForm.js

@@ -75,6 +75,22 @@ const FormResetter = ({ resetAfterSubmit, formRef, }) => {
     });
     return null;
 };
+function formEventProxy(event) {
+    let defaultPrevented = false;
+    return new Proxy(event, {
+        get: (target, prop) => {
+            if (prop === "preventDefault") {
+                return () => {
+                    defaultPrevented = true;
+                };
+            }
+            if (prop === "defaultPrevented") {
+                return defaultPrevented;
+            }
+            return target[prop];
+        },
+    });
+}
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -170,28 +186,36 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: async (e) => {
-            e.preventDefault();
-            startSubmit({ formAtom });
-            const result = await validator.validate(getDataFromForm(e.currentTarget));
-            if (result.error) {
-                endSubmit({ formAtom });
-                setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
-                if (!disableFocusOnError) {
-                    focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
-                }
+    const handleSubmit = async (e) => {
+        startSubmit({ formAtom });
+        const result = await validator.validate(getDataFromForm(e.currentTarget));
+        if (result.error) {
+            endSubmit({ formAtom });
+            setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+            if (!disableFocusOnError) {
+                focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
             }
-            else {
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, e);
-                if (fetcher)
-                    fetcher.submit(clickedButtonRef.current || e.currentTarget);
-                else
-                    submit(clickedButtonRef.current || e.currentTarget, {
-                        method,
-                        replace,
-                    });
-                clickedButtonRef.current = null;
+        }
+        else {
+            const eventProxy = formEventProxy(e);
+            await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, eventProxy));
+            if (eventProxy.defaultPrevented) {
+                endSubmit({ formAtom });
+                return;
             }
+            if (fetcher)
+                fetcher.submit(clickedButtonRef.current || e.currentTarget);
+            else
+                submit(clickedButtonRef.current || e.currentTarget, {
+                    method,
+                    replace,
+                });
+            clickedButtonRef.current = null;
+        }
+    };
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
+            e.preventDefault();
+            handleSubmit(e);
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);
             if (event.defaultPrevented)

package/browser/hooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { createGetInputProps, } from "./internal/getInputProps";
-import { useUnknownFormContextSelectAtom, useInternalFormContext, useFieldTouched, useFieldError, useFieldDefaultValue, useContextSelectAtom, useClearError, useSetTouched, } from "./internal/hooks";
+import { useInternalFormContext, useFieldTouched, useFieldError, useFieldDefaultValue, useContextSelectAtom, useClearError, useSetTouched, } from "./internal/hooks";
 import { hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, registerReceiveFocusAtom, validateFieldAtom, } from "./internal/state";
 /**
  * Returns whether or not the parent form is currently being submitted.
@@ -9,13 +9,19 @@ import { hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, registerReceiveFoc
  *
  * @param formId
  */
-export const useIsSubmitting = (formId) => useUnknownFormContextSelectAtom(formId, isSubmittingAtom, "useIsSubmitting");
+export const useIsSubmitting = (formId) => {
+    const formContext = useInternalFormContext(formId, "useIsSubmitting");
+    return useContextSelectAtom(formContext.formId, isSubmittingAtom);
+};
 /**
  * Returns whether or not the current form is valid.
  *
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
-export const useIsValid = (formId) => useUnknownFormContextSelectAtom(formId, isValidAtom, "useIsValid");
+export const useIsValid = (formId) => {
+    const formContext = useInternalFormContext(formId, "useIsValid");
+    return useContextSelectAtom(formContext.formId, isValidAtom);
+};
 /**
  * Provides the data and helpers necessary to set up a field.
  */

package/browser/internal/hooks.d.ts

@@ -7,7 +7,6 @@ declare type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
 declare const USE_HYDRATED_STATE: unique symbol;
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
 export declare const useContextSelectAtom: <T>(formId: string | symbol, selectorAtomCreator: FormSelectorAtomCreator<T>) => T extends Promise<infer V> ? V : T;
-export declare const useUnknownFormContextSelectAtom: <T>(formId: string | symbol | undefined, selectorAtomCreator: FormSelectorAtomCreator<T>, hookName: string) => T extends Promise<infer V> ? V : T;
 export declare const useHydratableSelector: <T, U>({ formId }: InternalFormContextValue, atomCreator: FormSelectorAtomCreator<T>, dataToUse: U | typeof USE_HYDRATED_STATE, selector?: (data: U) => T) => T | (T extends Promise<infer V> ? V : T);
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
 export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => import("..").FieldErrors | typeof USE_HYDRATED_STATE | undefined;

package/browser/internal/hooks.js

@@ -20,10 +20,6 @@ export const useContextSelectAtom = (formId, selectorAtomCreator) => {
     const selectorAtom = useMemo(() => selectorAtomCreator(formAtom), [formAtom, selectorAtomCreator]);
     return useAtomValue(selectorAtom, ATOM_SCOPE);
 };
-export const useUnknownFormContextSelectAtom = (formId, selectorAtomCreator, hookName) => {
-    const formContext = useInternalFormContext(formId, hookName);
-    return useContextSelectAtom(formContext.formId, selectorAtomCreator);
-};
 export const useHydratableSelector = ({ formId }, atomCreator, dataToUse, selector = identity) => {
     const dataFromState = useContextSelectAtom(formId, atomCreator);
     return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);

package/build/ValidatedForm.d.ts

@@ -10,7 +10,7 @@ export declare type FormProps<DataType> = {
      * A submit callback that gets called when the form is submitted
      * after all validations have been run.
      */
-    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
     /**
      * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
      * The form will use the fetcher for loading states, action data, etc

package/build/ValidatedForm.js

@@ -100,6 +100,22 @@ const FormResetter = ({ resetAfterSubmit, formRef, }) => {
     });
     return null;
 };
+function formEventProxy(event) {
+    let defaultPrevented = false;
+    return new Proxy(event, {
+        get: (target, prop) => {
+            if (prop === "preventDefault") {
+                return () => {
+                    defaultPrevented = true;
+                };
+            }
+            if (prop === "defaultPrevented") {
+                return defaultPrevented;
+            }
+            return target[prop];
+        },
+    });
+}
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -195,28 +211,36 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: async (e) => {
-            e.preventDefault();
-            startSubmit({ formAtom });
-            const result = await validator.validate(getDataFromForm(e.currentTarget));
-            if (result.error) {
-                endSubmit({ formAtom });
-                setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
-                if (!disableFocusOnError) {
-                    focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
-                }
+    const handleSubmit = async (e) => {
+        startSubmit({ formAtom });
+        const result = await validator.validate(getDataFromForm(e.currentTarget));
+        if (result.error) {
+            endSubmit({ formAtom });
+            setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+            if (!disableFocusOnError) {
+                focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
             }
-            else {
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, e);
-                if (fetcher)
-                    fetcher.submit(clickedButtonRef.current || e.currentTarget);
-                else
-                    submit(clickedButtonRef.current || e.currentTarget, {
-                        method,
-                        replace,
-                    });
-                clickedButtonRef.current = null;
+        }
+        else {
+            const eventProxy = formEventProxy(e);
+            await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, eventProxy));
+            if (eventProxy.defaultPrevented) {
+                endSubmit({ formAtom });
+                return;
             }
+            if (fetcher)
+                fetcher.submit(clickedButtonRef.current || e.currentTarget);
+            else
+                submit(clickedButtonRef.current || e.currentTarget, {
+                    method,
+                    replace,
+                });
+            clickedButtonRef.current = null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
+            e.preventDefault();
+            handleSubmit(e);
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);
             if (event.defaultPrevented)

package/build/hooks.js

@@ -12,14 +12,20 @@ const state_1 = require("./internal/state");
  *
  * @param formId
  */
-const useIsSubmitting = (formId) => (0, hooks_1.useUnknownFormContextSelectAtom)(formId, state_1.isSubmittingAtom, "useIsSubmitting");
+const useIsSubmitting = (formId) => {
+    const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsSubmitting");
+    return (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.isSubmittingAtom);
+};
 exports.useIsSubmitting = useIsSubmitting;
 /**
  * Returns whether or not the current form is valid.
  *
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
-const useIsValid = (formId) => (0, hooks_1.useUnknownFormContextSelectAtom)(formId, state_1.isValidAtom, "useIsValid");
+const useIsValid = (formId) => {
+    const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsValid");
+    return (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.isValidAtom);
+};
 exports.useIsValid = useIsValid;
 /**
  * Provides the data and helpers necessary to set up a field.

package/build/internal/hooks.d.ts

@@ -7,7 +7,6 @@ declare type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
 declare const USE_HYDRATED_STATE: unique symbol;
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
 export declare const useContextSelectAtom: <T>(formId: string | symbol, selectorAtomCreator: FormSelectorAtomCreator<T>) => T extends Promise<infer V> ? V : T;
-export declare const useUnknownFormContextSelectAtom: <T>(formId: string | symbol | undefined, selectorAtomCreator: FormSelectorAtomCreator<T>, hookName: string) => T extends Promise<infer V> ? V : T;
 export declare const useHydratableSelector: <T, U>({ formId }: InternalFormContextValue, atomCreator: FormSelectorAtomCreator<T>, dataToUse: U | typeof USE_HYDRATED_STATE, selector?: (data: U) => T) => T | (T extends Promise<infer V> ? V : T);
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
 export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => import("..").FieldErrors | typeof USE_HYDRATED_STATE | undefined;

package/build/internal/hooks.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.useSetTouched = exports.useClearError = exports.useFormUpdateAtom = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useHydratableSelector = exports.useUnknownFormContextSelectAtom = exports.useContextSelectAtom = exports.useInternalFormContext = void 0;
+exports.useSetTouched = exports.useClearError = exports.useFormUpdateAtom = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useHydratableSelector = exports.useContextSelectAtom = exports.useInternalFormContext = void 0;
 const react_1 = require("@remix-run/react");
 const utils_1 = require("jotai/utils");
 const get_1 = __importDefault(require("lodash/get"));
@@ -28,11 +28,6 @@ const useContextSelectAtom = (formId, selectorAtomCreator) => {
     return (0, utils_1.useAtomValue)(selectorAtom, state_1.ATOM_SCOPE);
 };
 exports.useContextSelectAtom = useContextSelectAtom;
-const useUnknownFormContextSelectAtom = (formId, selectorAtomCreator, hookName) => {
-    const formContext = (0, exports.useInternalFormContext)(formId, hookName);
-    return (0, exports.useContextSelectAtom)(formContext.formId, selectorAtomCreator);
-};
-exports.useUnknownFormContextSelectAtom = useUnknownFormContextSelectAtom;
 const useHydratableSelector = ({ formId }, atomCreator, dataToUse, selector = identity_1.default) => {
     const dataFromState = (0, exports.useContextSelectAtom)(formId, atomCreator);
     return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.0-beta.1",
+  "version": "4.1.0-beta.2",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -2,6 +2,7 @@ import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
+  FormEvent,
   RefObject,
   useCallback,
   useEffect,
@@ -53,7 +54,7 @@ export type FormProps<DataType> = {
   onSubmit?: (
     data: DataType,
     event: React.FormEvent<HTMLFormElement>
-  ) => Promise<void>;
+  ) => void | Promise<void>;
   /**
    * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
    * The form will use the fetcher for loading states, action data, etc
@@ -171,6 +172,25 @@ const FormResetter = ({
   return null;
 };
 
+function formEventProxy<T extends object>(event: T): T {
+  let defaultPrevented = false;
+  return new Proxy(event, {
+    get: (target, prop) => {
+      if (prop === "preventDefault") {
+        return () => {
+          defaultPrevented = true;
+        };
+      }
+
+      if (prop === "defaultPrevented") {
+        return defaultPrevented;
+      }
+
+      return target[prop as keyof T];
+    },
+  }) as T;
+}
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -305,6 +325,37 @@ export function ValidatedForm<DataType>({
     };
   }, []);
 
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    startSubmit({ formAtom });
+    const result = await validator.validate(getDataFromForm(e.currentTarget));
+    if (result.error) {
+      endSubmit({ formAtom });
+      setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+      if (!disableFocusOnError) {
+        focusFirstInvalidInput(
+          result.error.fieldErrors,
+          customFocusHandlers(),
+          formRef.current!
+        );
+      }
+    } else {
+      const eventProxy = formEventProxy(e);
+      await onSubmit?.(result.data, eventProxy);
+      if (eventProxy.defaultPrevented) {
+        endSubmit({ formAtom });
+        return;
+      }
+
+      if (fetcher) fetcher.submit(clickedButtonRef.current || e.currentTarget);
+      else
+        submit(clickedButtonRef.current || e.currentTarget, {
+          method,
+          replace,
+        });
+      clickedButtonRef.current = null;
+    }
+  };
+
   return (
     <Form
       ref={mergeRefs([formRef, formRefProp])}
@@ -313,33 +364,9 @@ export function ValidatedForm<DataType>({
       action={action}
       method={method}
       replace={replace}
-      onSubmit={async (e) => {
+      onSubmit={(e) => {
         e.preventDefault();
-        startSubmit({ formAtom });
-        const result = await validator.validate(
-          getDataFromForm(e.currentTarget)
-        );
-        if (result.error) {
-          endSubmit({ formAtom });
-          setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
-          if (!disableFocusOnError) {
-            focusFirstInvalidInput(
-              result.error.fieldErrors,
-              customFocusHandlers(),
-              formRef.current!
-            );
-          }
-        } else {
-          onSubmit?.(result.data, e);
-          if (fetcher)
-            fetcher.submit(clickedButtonRef.current || e.currentTarget);
-          else
-            submit(clickedButtonRef.current || e.currentTarget, {
-              method,
-              replace,
-            });
-          clickedButtonRef.current = null;
-        }
+        handleSubmit(e);
       }}
       onReset={(event) => {
         onReset?.(event);

package/src/hooks.ts

@@ -5,7 +5,6 @@ import {
   ValidationBehaviorOptions,
 } from "./internal/getInputProps";
 import {
-  useUnknownFormContextSelectAtom,
   useInternalFormContext,
   useFieldTouched,
   useFieldError,
@@ -29,16 +28,20 @@ import {
  *
  * @param formId
  */
-export const useIsSubmitting = (formId?: string) =>
-  useUnknownFormContextSelectAtom(formId, isSubmittingAtom, "useIsSubmitting");
+export const useIsSubmitting = (formId?: string) => {
+  const formContext = useInternalFormContext(formId, "useIsSubmitting");
+  return useContextSelectAtom(formContext.formId, isSubmittingAtom);
+};
 
 /**
  * Returns whether or not the current form is valid.
  *
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
-export const useIsValid = (formId?: string) =>
-  useUnknownFormContextSelectAtom(formId, isValidAtom, "useIsValid");
+export const useIsValid = (formId?: string) => {
+  const formContext = useInternalFormContext(formId, "useIsValid");
+  return useContextSelectAtom(formContext.formId, isValidAtom);
+};
 
 export type FieldProps = {
   /**

package/src/internal/hooks.ts

@@ -48,15 +48,6 @@ export const useContextSelectAtom = <T>(
   return useAtomValue(selectorAtom, ATOM_SCOPE);
 };
 
-export const useUnknownFormContextSelectAtom = <T>(
-  formId: string | symbol | undefined,
-  selectorAtomCreator: FormSelectorAtomCreator<T>,
-  hookName: string
-) => {
-  const formContext = useInternalFormContext(formId, hookName);
-  return useContextSelectAtom(formContext.formId, selectorAtomCreator);
-};
-
 export const useHydratableSelector = <T, U>(
   { formId }: InternalFormContextValue,
   atomCreator: FormSelectorAtomCreator<T>,