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

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@4.0.2 build:browser
+> remix-validated-form@4.1.0 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@4.0.2 build:main
+> remix-validated-form@4.1.0 build:main
 > tsc --module CommonJS --outDir ./build
 

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
@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -10,7 +10,7 @@ import { useDefaultValuesFromLoader, useErrorResponseForForm, useFormUpdateAtom,
 import { useMultiValueMap } from "./internal/MultiValueMap";
 import { addErrorAtom, clearErrorAtom, endSubmitAtom, formRegistry, resetAtom, setFieldErrorsAtom, startSubmitAtom, syncFormContextAtom, } from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
-import { mergeRefs, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
+import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
 function nonNull(value) {
     return value !== null;
@@ -75,13 +75,35 @@ 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];
+        },
+    });
+}
+const useFormAtom = (formId) => {
+    const formAtom = formRegistry(formId);
+    useEffect(() => () => formRegistry.remove(formId), [formId]);
+    return formAtom;
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
     var _a;
     const formId = useFormId(id);
-    const formAtom = formRegistry(formId);
+    const formAtom = useFormAtom(formId);
+    const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
     const contextValue = useMemo(() => ({
         formId,
         action,
@@ -170,28 +192,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/MultiValueMap.js

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 export class MultiValueMap {
     constructor() {
         this.dict = new Map();
@@ -30,10 +30,10 @@ export class MultiValueMap {
 }
 export const useMultiValueMap = () => {
     const ref = useRef(null);
-    return () => {
+    return useCallback(() => {
         if (ref.current)
             return ref.current;
         ref.current = new MultiValueMap();
         return ref.current;
-    };
+    }, []);
 };

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/browser/internal/logic/getCheckboxChecked copy.d.ts

@@ -0,0 +1 @@
+export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;

package/browser/internal/logic/getCheckboxChecked copy.js

@@ -0,0 +1,9 @@
+export const getCheckboxChecked = (checkboxValue = "on", newValue) => {
+    if (Array.isArray(newValue))
+        return newValue.includes(checkboxValue);
+    if (typeof newValue === "boolean")
+        return newValue;
+    if (typeof newValue === "string")
+        return newValue === checkboxValue;
+    return undefined;
+};

package/browser/internal/logic/getCheckboxChecked.d.ts

@@ -0,0 +1 @@
+export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;

package/browser/internal/logic/getCheckboxChecked.js

@@ -0,0 +1,9 @@
+export const getCheckboxChecked = (checkboxValue = "on", newValue) => {
+    if (Array.isArray(newValue))
+        return newValue.includes(checkboxValue);
+    if (typeof newValue === "boolean")
+        return newValue;
+    if (typeof newValue === "string")
+        return newValue === checkboxValue;
+    return undefined;
+};

package/browser/internal/logic/getRadioChecked.d.ts

@@ -0,0 +1 @@
+export declare const getRadioChecked: (radioValue: string | undefined, newValue: unknown) => boolean | undefined;

package/browser/internal/logic/getRadioChecked.js

@@ -0,0 +1,5 @@
+export const getRadioChecked = (radioValue = "on", newValue) => {
+    if (typeof newValue === "string")
+        return newValue === radioValue;
+    return undefined;
+};

package/browser/internal/logic/setFieldValue.d.ts

@@ -0,0 +1 @@
+export declare const setFieldValue: (formElement: HTMLFormElement, name: string, value: unknown) => void;

package/browser/internal/logic/setFieldValue.js

@@ -0,0 +1,40 @@
+import invariant from "tiny-invariant";
+import { getCheckboxChecked } from "./getCheckboxChecked";
+import { getRadioChecked } from "./getRadioChecked";
+const setElementValue = (element, value, name) => {
+    if (element instanceof HTMLSelectElement && element.multiple) {
+        invariant(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+        for (const option of element.options) {
+            option.selected = value.includes(option.value);
+        }
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        const newChecked = getCheckboxChecked(element.value, value);
+        invariant(newChecked !== undefined, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "radio") {
+        const newChecked = getRadioChecked(element.value, value);
+        invariant(newChecked !== undefined, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    invariant(typeof value === "string", `Invalid value for field "${name}" which is an ${element.constructor.name}. Expected string but received ${typeof value}`);
+    const input = element;
+    input.value = value;
+};
+export const setFieldValue = (formElement, name, value) => {
+    const controlElement = formElement.elements.namedItem(name);
+    if (!controlElement)
+        return;
+    if (controlElement instanceof RadioNodeList) {
+        for (const element of controlElement) {
+            setElementValue(element, value, name);
+        }
+    }
+    else {
+        setElementValue(controlElement, value, name);
+    }
+};

package/browser/internal/util.d.ts

@@ -2,3 +2,4 @@ import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useDeepEqualsMemo: <T>(item: T) => T;

package/browser/internal/util.js

@@ -1,4 +1,5 @@
-import { useEffect, useLayoutEffect } from "react";
+import { isEqual } from "lodash";
+import { useEffect, useLayoutEffect, useRef } from "react";
 export const omit = (obj, ...keys) => {
     const result = { ...obj };
     for (const key of keys) {
@@ -19,3 +20,13 @@ export const mergeRefs = (refs) => {
     };
 };
 export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export const useDeepEqualsMemo = (item) => {
+    const ref = useRef(item);
+    const areEqual = ref.current === item || isEqual(ref.current, item);
+    useEffect(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};

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
@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -100,13 +100,35 @@ 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];
+        },
+    });
+}
+const useFormAtom = (formId) => {
+    const formAtom = (0, state_1.formRegistry)(formId);
+    (0, react_2.useEffect)(() => () => state_1.formRegistry.remove(formId), [formId]);
+    return formAtom;
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
     var _a;
     const formId = useFormId(id);
-    const formAtom = (0, state_1.formRegistry)(formId);
+    const formAtom = useFormAtom(formId);
+    const providedDefaultValues = (0, util_1.useDeepEqualsMemo)(unMemoizedDefaults);
     const contextValue = (0, react_2.useMemo)(() => ({
         formId,
         action,
@@ -195,28 +217,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/MultiValueMap.js

@@ -34,11 +34,11 @@ class MultiValueMap {
 exports.MultiValueMap = MultiValueMap;
 const useMultiValueMap = () => {
     const ref = (0, react_1.useRef)(null);
-    return () => {
+    return (0, react_1.useCallback)(() => {
         if (ref.current)
             return ref.current;
         ref.current = new MultiValueMap();
         return ref.current;
-    };
+    }, []);
 };
 exports.useMultiValueMap = useMultiValueMap;

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/build/internal/logic/getCheckboxChecked.d.ts

@@ -0,0 +1 @@
+export declare const getCheckboxChecked: (checkboxValue: string | undefined, newValue: unknown) => boolean | undefined;

package/build/internal/logic/getCheckboxChecked.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCheckboxChecked = void 0;
+const getCheckboxChecked = (checkboxValue = "on", newValue) => {
+    if (Array.isArray(newValue))
+        return newValue.includes(checkboxValue);
+    if (typeof newValue === "boolean")
+        return newValue;
+    if (typeof newValue === "string")
+        return newValue === checkboxValue;
+    return undefined;
+};
+exports.getCheckboxChecked = getCheckboxChecked;

package/build/internal/logic/getRadioChecked.d.ts

@@ -0,0 +1 @@
+export declare const getRadioChecked: (radioValue: string | undefined, newValue: unknown) => boolean | undefined;

package/build/internal/logic/getRadioChecked.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRadioChecked = void 0;
+const getRadioChecked = (radioValue = "on", newValue) => {
+    if (typeof newValue === "string")
+        return newValue === radioValue;
+    return undefined;
+};
+exports.getRadioChecked = getRadioChecked;

package/build/internal/logic/setFieldValue.d.ts

@@ -0,0 +1 @@
+export declare const setFieldValue: (formElement: HTMLFormElement, name: string, value: unknown) => void;

package/build/internal/logic/setFieldValue.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFieldValue = void 0;
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const getCheckboxChecked_1 = require("./getCheckboxChecked");
+const getRadioChecked_1 = require("./getRadioChecked");
+const setElementValue = (element, value, name) => {
+    if (element instanceof HTMLSelectElement && element.multiple) {
+        (0, tiny_invariant_1.default)(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+        for (const option of element.options) {
+            option.selected = value.includes(option.value);
+        }
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        const newChecked = (0, getCheckboxChecked_1.getCheckboxChecked)(element.value, value);
+        (0, tiny_invariant_1.default)(newChecked, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "radio") {
+        const newChecked = (0, getRadioChecked_1.getRadioChecked)(element.value, value);
+        (0, tiny_invariant_1.default)(newChecked, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    (0, tiny_invariant_1.default)(typeof value === "string", `Must specify a string to set the value of ${element.constructor.name}`);
+    const input = element;
+    input.value = value;
+};
+const setFieldValue = (formElement, name, value) => {
+    const controlElement = formElement.elements.namedItem(name);
+    if (!controlElement)
+        return;
+    if (controlElement instanceof RadioNodeList) {
+        for (const element of controlElement) {
+            setElementValue(element, value, name);
+        }
+    }
+    else {
+        setElementValue(controlElement, value, name);
+    }
+};
+exports.setFieldValue = setFieldValue;

package/build/internal/util.d.ts

@@ -2,3 +2,4 @@ import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useDeepEqualsMemo: <T>(item: T) => T;

package/build/internal/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+exports.useDeepEqualsMemo = exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+const lodash_1 = require("lodash");
 const react_1 = require("react");
 const omit = (obj, ...keys) => {
     const result = { ...obj };
@@ -24,3 +25,14 @@ const mergeRefs = (refs) => {
 };
 exports.mergeRefs = mergeRefs;
 exports.useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
+const useDeepEqualsMemo = (item) => {
+    const ref = (0, react_1.useRef)(item);
+    const areEqual = ref.current === item || (0, lodash_1.isEqual)(ref.current, item);
+    (0, react_1.useEffect)(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};
+exports.useDeepEqualsMemo = useDeepEqualsMemo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.0-beta.1",
+  "version": "4.1.1",
   "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,
@@ -37,6 +38,7 @@ import {
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
+  useDeepEqualsMemo,
   useIsomorphicLayoutEffect as useLayoutEffect,
 } from "./internal/util";
 import { FieldErrors, Validator } from "./validation/types";
@@ -53,7 +55,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 +173,31 @@ 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;
+}
+
+const useFormAtom = (formId: string | symbol) => {
+  const formAtom = formRegistry(formId);
+  useEffect(() => () => formRegistry.remove(formId), [formId]);
+  return formAtom;
+};
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -180,7 +207,7 @@ export function ValidatedForm<DataType>({
   children,
   fetcher,
   action,
-  defaultValues: providedDefaultValues,
+  defaultValues: unMemoizedDefaults,
   formRef: formRefProp,
   onReset,
   subaction,
@@ -192,7 +219,8 @@ export function ValidatedForm<DataType>({
   ...rest
 }: FormProps<DataType>) {
   const formId = useFormId(id);
-  const formAtom = formRegistry(formId);
+  const formAtom = useFormAtom(formId);
+  const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
   const contextValue = useMemo<InternalFormContextValue>(
     () => ({
       formId,
@@ -305,6 +333,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 +372,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/MultiValueMap.ts

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 
 export class MultiValueMap<Key, Value> {
   private dict: Map<Key, Value[]> = new Map();
@@ -30,9 +30,9 @@ export class MultiValueMap<Key, Value> {
 
 export const useMultiValueMap = <Key, Value>() => {
   const ref = useRef<MultiValueMap<Key, Value> | null>(null);
-  return () => {
+  return useCallback(() => {
     if (ref.current) return ref.current;
     ref.current = new MultiValueMap();
     return ref.current;
-  };
+  }, []);
 };

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>,

package/src/internal/util.ts

@@ -1,5 +1,6 @@
+import { isEqual } from "lodash";
 import type React from "react";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -25,3 +26,14 @@ export const mergeRefs = <T = any>(
 
 export const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export const useDeepEqualsMemo = <T>(item: T): T => {
+  const ref = useRef<T>(item);
+  const areEqual = ref.current === item || isEqual(ref.current, item);
+  useEffect(() => {
+    if (!areEqual) {
+      ref.current = item;
+    }
+  });
+  return areEqual ? ref.current : item;
+};