remix-validated-form 4.1.0-beta.3 → 4.1.3

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.2 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@4.0.2 build:main
+> remix-validated-form@4.1.2 build:main
 > tsc --module CommonJS --outDir ./build
 

package/browser/ValidatedForm.d.ts

@@ -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;
@@ -99,10 +99,11 @@ const useFormAtom = (formId) => {
 /**
  * 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 = useFormAtom(formId);
+    const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
     const contextValue = useMemo(() => ({
         formId,
         action,
@@ -186,9 +187,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 clickedButtonRef.current = submitButton;
             }
         }
-        window.addEventListener("click", handleClick);
+        window.addEventListener("click", handleClick, { capture: true });
         return () => {
-            window.removeEventListener("click", handleClick);
+            window.removeEventListener("click", handleClick, { capture: true });
         };
     }, []);
     const handleSubmit = async (e) => {
@@ -208,10 +209,15 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 endSubmit({ formAtom });
                 return;
             }
+            // We deviate from the remix code here a bit because of our async submit.
+            // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
+            // but we already have the form in `formRef.current` so we can just use that.
+            // If we use `event.currentTarget` here, it will break because `currentTarget`
+            // will have changed since the start of the submission.
             if (fetcher)
-                fetcher.submit(clickedButtonRef.current || e.currentTarget);
+                fetcher.submit(clickedButtonRef.current || formRef.current);
             else
-                submit(clickedButtonRef.current || e.currentTarget, {
+                submit(clickedButtonRef.current || formRef.current, {
                     method,
                     replace,
                 });

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-valtio.d.ts

@@ -0,0 +1,18 @@
+import { useUpdateAtom } from "jotai/utils";
+import { FieldErrors, ValidationErrorResponseData } from "..";
+import { InternalFormContextValue } from "./formContext";
+import { Hydratable } from "./hydratable";
+export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
+export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
+export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
+export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
+export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
+    [fieldName: string]: any;
+}>;
+export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
+export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
+export declare const useFormUpdateAtom: typeof useUpdateAtom;
+export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
+export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;

package/browser/internal/hooks-valtio.js

@@ -0,0 +1,110 @@
+import { useActionData, useMatches, useTransition } from "@remix-run/react";
+import { useUpdateAtom } from "jotai/utils";
+import lodashGet from "lodash/get";
+import { useCallback, useContext } from "react";
+import invariant from "tiny-invariant";
+import { formDefaultValuesKey } from "./constants";
+import { InternalFormContext } from "./formContext";
+import { hydratable } from "./hydratable";
+import { ATOM_SCOPE, clearErrorAtom, formRegistry, setTouchedAtom, } from "./state";
+import { useFormData } from "./state-valtio";
+export const useInternalFormContext = (formId, hookName) => {
+    const formContext = useContext(InternalFormContext);
+    if (formId)
+        return { formId };
+    if (formContext)
+        return formContext;
+    throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
+};
+export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
+    var _a;
+    const actionData = useActionData();
+    if (fetcher) {
+        if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
+            return fetcher.data;
+        return null;
+    }
+    if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
+        return null;
+    // If there's an explicit id, we should ignore data that has the wrong id
+    if (typeof formId === "string" && actionData.formId)
+        return actionData.formId === formId ? actionData : null;
+    if ((!subaction && !actionData.subaction) ||
+        actionData.subaction === subaction)
+        return actionData;
+    return null;
+}
+export const useFieldErrorsForForm = (context) => {
+    const response = useErrorResponseForForm(context);
+    const form = useFormData(context.formId);
+    return hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, form.hydrated);
+};
+export const useDefaultValuesFromLoader = ({ formId, }) => {
+    const matches = useMatches();
+    if (typeof formId === "string") {
+        const dataKey = formDefaultValuesKey(formId);
+        // If multiple loaders declare the same default values,
+        // we should use the data from the deepest route.
+        const match = matches
+            .reverse()
+            .find((match) => match.data && dataKey in match.data);
+        return match === null || match === void 0 ? void 0 : match.data[dataKey];
+    }
+    return null;
+};
+export const useDefaultValuesForForm = (context) => {
+    const { formId, defaultValuesProp } = context;
+    const form = useFormData(formId);
+    const errorResponse = useErrorResponseForForm(context);
+    const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
+    // Typical flow is:
+    // - Default values only available from props or server
+    //   - Props have a higher priority than server
+    // - State gets hydrated with default values
+    // - After submit, we may need to use values from the error
+    if (form.hydrated)
+        return hydratable.hydratedData();
+    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
+        invariant(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
+        return hydratable.serverData(errorResponse.repopulateFields);
+    }
+    if (defaultValuesProp)
+        return hydratable.serverData(defaultValuesProp);
+    return hydratable.serverData(defaultValuesFromLoader);
+};
+export const useHasActiveFormSubmit = ({ fetcher, }) => {
+    const transition = useTransition();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    return hasActiveSubmission;
+};
+export const useFieldTouched = (name, { formId }) => {
+    const form = useFormData(formId);
+    return form.touchedFields[name];
+};
+export const useFieldError = (name, context) => {
+    const fieldErrors = useFieldErrorsForForm(context);
+    const form = useFormData(context.formId);
+    return fieldErrors
+        .map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name])
+        .hydrateTo(form.fieldErrors[name]);
+};
+export const useFieldDefaultValue = (name, context) => {
+    const defaultValues = useDefaultValuesForForm(context);
+    const state = useFormData(context.formId);
+    return defaultValues.map((val) => lodashGet(val, name)).hydrateTo(state);
+};
+export const useFormUpdateAtom = (atom) => useUpdateAtom(atom, ATOM_SCOPE);
+export const useClearError = (context) => {
+    const clearError = useFormUpdateAtom(clearErrorAtom);
+    return useCallback((name) => {
+        clearError({ name, formAtom: formRegistry(context.formId) });
+    }, [clearError, context.formId]);
+};
+export const useSetTouched = (context) => {
+    const setTouched = useFormUpdateAtom(setTouchedAtom);
+    return useCallback((name, touched) => {
+        setTouched({ name, formAtom: formRegistry(context.formId), touched });
+    }, [setTouched, context.formId]);
+};

package/browser/internal/hooks-zustand.d.ts

@@ -0,0 +1,16 @@
+import { FieldErrors, ValidationErrorResponseData } from "..";
+import { InternalFormContextValue } from "./formContext";
+import { Hydratable } from "./hydratable";
+export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
+export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
+export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
+export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
+export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
+    [fieldName: string]: any;
+}>;
+export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
+export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
+export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
+export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;

package/browser/internal/hooks-zustand.js

@@ -0,0 +1,100 @@
+import { useActionData, useMatches, useTransition } from "@remix-run/react";
+import lodashGet from "lodash/get";
+import { useContext } from "react";
+import invariant from "tiny-invariant";
+import { formDefaultValuesKey } from "./constants";
+import { InternalFormContext } from "./formContext";
+import { hydratable } from "./hydratable";
+import { useStore } from "./state-zustand";
+export const useInternalFormContext = (formId, hookName) => {
+    const formContext = useContext(InternalFormContext);
+    if (formId)
+        return { formId };
+    if (formContext)
+        return formContext;
+    throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
+};
+export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
+    var _a;
+    const actionData = useActionData();
+    if (fetcher) {
+        if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
+            return fetcher.data;
+        return null;
+    }
+    if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
+        return null;
+    // If there's an explicit id, we should ignore data that has the wrong id
+    if (typeof formId === "string" && actionData.formId)
+        return actionData.formId === formId ? actionData : null;
+    if ((!subaction && !actionData.subaction) ||
+        actionData.subaction === subaction)
+        return actionData;
+    return null;
+}
+export const useFieldErrorsForForm = (context) => {
+    const response = useErrorResponseForForm(context);
+    const hydrated = useStore((state) => state.form(context.formId).hydrated);
+    return hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, hydrated);
+};
+export const useDefaultValuesFromLoader = ({ formId, }) => {
+    const matches = useMatches();
+    if (typeof formId === "string") {
+        const dataKey = formDefaultValuesKey(formId);
+        // If multiple loaders declare the same default values,
+        // we should use the data from the deepest route.
+        const match = matches
+            .reverse()
+            .find((match) => match.data && dataKey in match.data);
+        return match === null || match === void 0 ? void 0 : match.data[dataKey];
+    }
+    return null;
+};
+export const useDefaultValuesForForm = (context) => {
+    const { formId, defaultValuesProp } = context;
+    const hydrated = useStore((state) => state.form(formId).hydrated);
+    const errorResponse = useErrorResponseForForm(context);
+    const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
+    // Typical flow is:
+    // - Default values only available from props or server
+    //   - Props have a higher priority than server
+    // - State gets hydrated with default values
+    // - After submit, we may need to use values from the error
+    if (hydrated)
+        return hydratable.hydratedData();
+    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
+        invariant(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
+        return hydratable.serverData(errorResponse.repopulateFields);
+    }
+    if (defaultValuesProp)
+        return hydratable.serverData(defaultValuesProp);
+    return hydratable.serverData(defaultValuesFromLoader);
+};
+export const useHasActiveFormSubmit = ({ fetcher, }) => {
+    const transition = useTransition();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    return hasActiveSubmission;
+};
+export const useFieldTouched = (name, { formId }) => {
+    return useStore((state) => state.form(formId).touchedFields[name]);
+};
+export const useFieldError = (name, context) => {
+    const state = useStore((state) => state.form(context.formId).fieldErrors[name]);
+    return useFieldErrorsForForm(context)
+        .map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name])
+        .hydrateTo(state);
+};
+export const useFieldDefaultValue = (name, context) => {
+    const state = useStore((state) => state.form(context.formId).defaultValues[name]);
+    return useDefaultValuesForForm(context)
+        .map((val) => lodashGet(val, name))
+        .hydrateTo(state);
+};
+export const useClearError = (context) => {
+    return useStore((state) => state.helpers(context.formId).clearError);
+};
+export const useSetTouched = (context) => {
+    return useStore((state) => state.helpers(context.formId).setTouched);
+};

package/browser/internal/hydratable.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The purpose of this type is to simplify the logic
+ * around data that needs to come from the server initially,
+ * but from the internal state after hydration.
+ */
+export declare type Hydratable<T> = {
+    hydrateTo: (data: T) => T;
+    map: <U>(fn: (data: T) => U) => Hydratable<U>;
+};
+export declare const hydratable: {
+    serverData: <T>(data: T) => Hydratable<T>;
+    hydratedData: <T_1>() => Hydratable<T_1>;
+    from: <T_2>(data: T_2, hydrated: boolean) => Hydratable<T_2>;
+};

package/browser/internal/hydratable.js

@@ -0,0 +1,14 @@
+const serverData = (data) => ({
+    hydrateTo: () => data,
+    map: (fn) => serverData(fn(data)),
+});
+const hydratedData = () => ({
+    hydrateTo: (hydratedData) => hydratedData,
+    map: () => hydratedData(),
+});
+const from = (data, hydrated) => hydrated ? hydratedData() : serverData(data);
+export const hydratable = {
+    serverData,
+    hydratedData,
+    from,
+};

package/browser/internal/immerMiddleware.d.ts

@@ -0,0 +1,6 @@
+import { Draft } from "immer";
+import { State, StateCreator } from "zustand";
+declare type TImmerConfigFn<T extends State> = (partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void;
+declare type TImmerConfig<T extends State> = StateCreator<T, TImmerConfigFn<T>>;
+export declare const immer: <T extends object>(config: TImmerConfig<T>) => StateCreator<T, import("zustand").SetState<T>, import("zustand").GetState<T>, import("zustand").StoreApi<T>>;
+export {};

package/browser/internal/immerMiddleware.js

@@ -0,0 +1,7 @@
+import produce from "immer";
+export const immer = (config) => (set, get, api) => config((partial, replace) => {
+    const nextState = typeof partial === "function"
+        ? produce(partial)
+        : partial;
+    return set(nextState, replace);
+}, get, api);

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.some((val) => val === true || val === 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/logic/setInputValueInForm.d.ts

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

package/browser/internal/logic/setInputValueInForm.js

@@ -0,0 +1,120 @@
+import invariant from "tiny-invariant";
+import { getCheckboxChecked } from "./getCheckboxChecked";
+/**
+ * Helper class to track the values being set on uncontrolled fields.
+ * HTML is super permissive with inputs that all share the same `name`.
+ *
+ * This class is strict in the sense that, if the user provides an array value,
+ * the values inside the array must be in the same order as the elements in the DOM.
+ * Doing this allows us to be flexible with what types of form controls the user is using.
+ *
+ * This is how HTML tracks inputs of the same name as well.
+ * `new FormData(formElement).getAll('myField')` will return values in DOM order.
+ */
+class Values {
+    constructor(values) {
+        this.hasSetRadioValue = false;
+        this.bool = (value) => {
+            if (getCheckboxChecked(value, this.values[0])) {
+                this.values.shift();
+                return true;
+            }
+            return false;
+        };
+        this.radio = (value) => {
+            if (this.hasSetRadioValue)
+                return false;
+            const result = this.bool(value);
+            if (result)
+                this.hasSetRadioValue = true;
+            return result;
+        };
+        this.str = () => { var _a; return String((_a = this.values.pop()) !== null && _a !== void 0 ? _a : ""); };
+        this.allValues = () => this.values;
+        this.warnIfLeftovers = (field) => {
+            if (this.values.length > 0) {
+                console.warn(`Could not determine how to use the value for the field ${field}. ` +
+                    `Leftover values were: ${this.values.join(", ")}.`);
+            }
+        };
+        const unknownValues = Array.isArray(values) ? values : [values];
+        this.values = unknownValues;
+    }
+}
+/**
+ * This subclass is order-permissive, meaning the user doesn't have to worry about
+ * the order in which the inputs occur in the DOM.
+ * This is useful for multiselects and checkbox groups and provides a better DX than
+ * the order-strict version.
+ */
+class PermissiveValues extends Values {
+    constructor() {
+        super(...arguments);
+        this.remove = (value) => {
+            const index = this.values.indexOf(value);
+            const deleted = this.values.splice(index, 1);
+            return deleted.length > 0;
+        };
+        this.bool = (value) => {
+            if (getCheckboxChecked(value, this.values)) {
+                this.remove(value) || this.remove(true);
+                return true;
+            }
+            return false;
+        };
+    }
+}
+const isMultiselect = (node) => node instanceof HTMLSelectElement && node.multiple;
+const isCheckbox = (node) => node instanceof HTMLInputElement && node.type === "checkbox";
+const isRadio = (node) => node instanceof HTMLInputElement && node.type === "radio";
+const setElementValue = (element, values, field) => {
+    if (isMultiselect(element)) {
+        for (const option of element.options) {
+            option.selected = values.bool(option.value);
+        }
+        return;
+    }
+    if (isCheckbox(element)) {
+        element.checked = values.bool(element.value);
+        return;
+    }
+    if (isRadio(element)) {
+        element.checked = values.radio(element.value);
+        return;
+    }
+    const input = element;
+    invariant(input.type !== "hidden", `Cannot set value on hidden input if it is not a controlled field. Field being updated was ${field}.`);
+    input.value = values.str();
+};
+const areElementsTheSameType = (nodes) => {
+    const getType = (node) => {
+        if (node instanceof HTMLInputElement)
+            return node.type;
+        if (node instanceof HTMLSelectElement)
+            return node.multiple ? "select" : "multiselect";
+        return null;
+    };
+    const firstElementInstance = nodes[0].constructor;
+    const firstElementType = getType(nodes[0]);
+    return nodes.every((element) => element.constructor === firstElementInstance &&
+        getType(element) === firstElementType);
+};
+export const setInputValueInForm = (formElement, name, value) => {
+    const controlElement = formElement.elements.namedItem(name);
+    if (!controlElement)
+        return;
+    if (controlElement instanceof RadioNodeList) {
+        const values = areElementsTheSameType([...controlElement])
+            ? new PermissiveValues(value)
+            : new Values(value);
+        for (const element of controlElement) {
+            setElementValue(element, values, name);
+        }
+        values.warnIfLeftovers(name);
+    }
+    else {
+        const values = new PermissiveValues(value);
+        setElementValue(controlElement, values, name);
+        values.warnIfLeftovers(name);
+    }
+};

package/browser/internal/setFieldValue.d.ts

@@ -0,0 +1,20 @@
+import { InternalFormId } from "./state/atomUtils";
+declare type ControlledDataItem = Record<string, unknown[]>;
+declare class ValidatedFormData {
+    #private;
+    constructor(formData: FormData, customData: ControlledDataItem);
+    get: (fieldName: string) => any;
+    getAll: (fieldName: string) => any[];
+    has: (fieldName: string) => boolean;
+    append: (fieldName: string, value: any) => void;
+    delete: (fieldName: string) => void;
+    set: (fieldName: string, value: any) => void;
+    entries: () => IterableIterator<[string, any[]]>;
+    values: () => IterableIterator<any[]>;
+    [Symbol.iterator]: () => IterableIterator<[string, any[]]>;
+    setRepeated: (fieldName: string, value: any[]) => void;
+    changedFields(): Generator<readonly [string, any[]], void, unknown>;
+}
+export declare type FormValuesUpdater = (formData: ValidatedFormData) => void;
+export declare const useSetFormValues: (formId: InternalFormId) => (arg: FormValuesUpdater) => Promise<void>;
+export {};