remix-validated-form 4.2.0 → 4.4.0

package/.turbo/turbo-build.log

@@ -1,9 +1,15 @@
-$ npm run build:browser && npm run build:main
-
-> remix-validated-form@4.1.9 build:browser
-> tsc --module ESNext --outDir ./browser
-
-
-> remix-validated-form@4.1.9 build:main
-> tsc --module CommonJS --outDir ./build
-
+$ vite build
+vite v2.9.5 building for production...
+transforming...
+✓ 321 modules transformed.
+rendering chunks...
+dist/remix-validated-form.cjs.js   43.86 KiB / gzip: 16.69 KiB
+dist/remix-validated-form.es.js   98.55 KiB / gzip: 23.34 KiB
+dist/remix-validated-form.umd.js   44.11 KiB / gzip: 16.80 KiB
+
+[vite:dts] Start generate declaration files...
+[vite:dts] Declaration files built in 1687ms.
+
+No name was provided for external module 'react' in output.globals – guessing 'React'
+No name was provided for external module '@remix-run/react' in output.globals – guessing 'react'
+No name was provided for external module '@remix-run/server-runtime' in output.globals – guessing 'serverRuntime'

package/README.md

@@ -24,6 +24,7 @@ To run `sample-app`:
 git clone https://github.com/airjp73/remix-validated-form
 cd ./remix-validated-form
 yarn install
+yarn build
 yarn sample-app
 ```
 

package/browser/ValidatedForm.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Form as RemixForm, useSubmit } from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import invariant from "tiny-invariant";
 import { useIsSubmitting, useIsValid } from "./hooks";
 import { FORM_ID_FIELD } from "./internal/constants";
 import { InternalFormContext, } from "./internal/formContext";
-import { useDefaultValuesFromLoader, useErrorResponseForForm, useFormUpdateAtom, useHasActiveFormSubmit, } from "./internal/hooks";
+import { useDefaultValuesFromLoader, useErrorResponseForForm, useHasActiveFormSubmit, useSetFieldErrors, } from "./internal/hooks";
 import { useMultiValueMap } from "./internal/MultiValueMap";
-import { cleanupFormState, endSubmitAtom, fieldErrorsAtom, formElementAtom, formPropsAtom, isHydratedAtom, resetAtom, setFieldErrorAtom, startSubmitAtom, } from "./internal/state";
+import { cleanupFormState } from "./internal/state/cleanup";
+import { useControlledFieldStore, useFormStore, } from "./internal/state/storeHooks";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
@@ -111,30 +111,19 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const formRef = useRef(null);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
     const submit = useSubmit();
-    const setFieldErrors = useFormUpdateAtom(fieldErrorsAtom(formId));
-    const setFieldError = useFormUpdateAtom(setFieldErrorAtom(formId));
-    const reset = useFormUpdateAtom(resetAtom(formId));
-    const startSubmit = useFormUpdateAtom(startSubmitAtom(formId));
-    const endSubmit = useFormUpdateAtom(endSubmitAtom(formId));
-    const syncFormProps = useFormUpdateAtom(formPropsAtom(formId));
-    const setHydrated = useFormUpdateAtom(isHydratedAtom(formId));
-    const setFormElementInState = useFormUpdateAtom(formElementAtom(formId));
+    const setFieldErrors = useSetFieldErrors(formId);
+    const setFieldError = useFormStore(formId, (state) => state.setFieldError);
+    const reset = useFormStore(formId, (state) => state.reset);
+    const resetControlledFields = useControlledFieldStore(formId, (state) => state.reset);
+    const startSubmit = useFormStore(formId, (state) => state.startSubmit);
+    const endSubmit = useFormStore(formId, (state) => state.endSubmit);
+    const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
+    const setHydrated = useFormStore(formId, (state) => state.setHydrated);
+    const setFormElementInState = useFormStore(formId, (state) => state.setFormElement);
     useEffect(() => {
-        setHydrated(true);
+        setHydrated();
         return () => cleanupFormState(formId);
     }, [formId, setHydrated]);
-    const validateField = useCallback(async (field) => {
-        invariant(formRef.current, "Cannot find reference to form");
-        const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
-        if (error) {
-            setFieldError({ field, error });
-            return error;
-        }
-        else {
-            setFieldError({ field, error: undefined });
-            return null;
-        }
-    }, [setFieldError, validator]);
     const customFocusHandlers = useMultiValueMap();
     const registerReceiveFocus = useCallback((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);
@@ -148,8 +137,8 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             action,
             defaultValues: (_a = providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues) !== null && _a !== void 0 ? _a : {},
             subaction,
-            validateField,
             registerReceiveFocus,
+            validator,
         });
     }, [
         action,
@@ -157,8 +146,8 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         registerReceiveFocus,
         subaction,
         syncFormProps,
-        validateField,
         backendDefaultValues,
+        validator,
     ]);
     useEffect(() => {
         var _a;
@@ -227,5 +216,6 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (event.defaultPrevented)
                 return;
             reset();
+            resetControlledFields();
         }, children: _jsxs(InternalFormContext.Provider, { value: contextValue, children: [_jsx(FormResetter, { formRef: formRef, resetAfterSubmit: resetAfterSubmit }, void 0), subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), id && _jsx("input", { type: "hidden", value: id, name: FORM_ID_FIELD }, void 0), children] }, void 0) }, void 0));
 }

package/browser/hooks.d.ts

@@ -63,3 +63,5 @@ export declare const useField: (name: string, options?: {
      */
     formId?: string | undefined;
 } | undefined) => FieldProps;
+export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
+export declare const useUpdateControlledField: (formId?: string | undefined) => (fieldName: string, value: unknown) => void;

package/browser/hooks.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from "react";
 import { createGetInputProps, } from "./internal/getInputProps";
-import { useInternalFormContext, useFieldTouched, useFieldError, useFormAtomValue, useFieldDefaultValue, } from "./internal/hooks";
-import { formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, } from "./internal/state";
+import { useInternalFormContext, useFieldTouched, useFieldError, useFieldDefaultValue, useClearError, useInternalIsSubmitting, useInternalIsValid, useInternalHasBeenSubmitted, useValidateField, useRegisterReceiveFocus, } from "./internal/hooks";
+import { useControllableValue, useUpdateControllableValue, } from "./internal/state/controlledFields";
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
@@ -11,7 +11,7 @@ import { formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, } f
  */
 export const useIsSubmitting = (formId) => {
     const formContext = useInternalFormContext(formId, "useIsSubmitting");
-    return useFormAtomValue(isSubmittingAtom(formContext.formId));
+    return useInternalIsSubmitting(formContext.formId);
 };
 /**
  * Returns whether or not the current form is valid.
@@ -20,7 +20,7 @@ export const useIsSubmitting = (formId) => {
  */
 export const useIsValid = (formId) => {
     const formContext = useInternalFormContext(formId, "useIsValid");
-    return useFormAtomValue(isValidAtom(formContext.formId));
+    return useInternalIsValid(formContext.formId);
 };
 /**
  * Provides the data and helpers necessary to set up a field.
@@ -30,9 +30,11 @@ export const useField = (name, options) => {
     const formContext = useInternalFormContext(providedFormId, "useField");
     const defaultValue = useFieldDefaultValue(name, formContext);
     const [touched, setTouched] = useFieldTouched(name, formContext);
-    const [error, setError] = useFieldError(name, formContext);
-    const hasBeenSubmitted = useFormAtomValue(hasBeenSubmittedAtom(formContext.formId));
-    const { validateField, registerReceiveFocus } = useFormAtomValue(formPropsAtom(formContext.formId));
+    const error = useFieldError(name, formContext);
+    const clearError = useClearError(formContext);
+    const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
+    const validateField = useValidateField(formContext.formId);
+    const registerReceiveFocus = useRegisterReceiveFocus(formContext.formId);
     useEffect(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
@@ -40,7 +42,7 @@ export const useField = (name, options) => {
     const field = useMemo(() => {
         const helpers = {
             error,
-            clearError: () => setError(undefined),
+            clearError: () => clearError(name),
             validate: () => {
                 validateField(name);
             },
@@ -60,14 +62,23 @@ export const useField = (name, options) => {
         };
     }, [
         error,
+        clearError,
         defaultValue,
         touched,
         setTouched,
         name,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        setError,
         validateField,
     ]);
     return field;
 };
+export const useControlField = (name, formId) => {
+    const context = useInternalFormContext(formId, "useControlField");
+    const [value, setValue] = useControllableValue(context, name);
+    return [value, setValue];
+};
+export const useUpdateControlledField = (formId) => {
+    const context = useInternalFormContext(formId, "useControlField");
+    return useUpdateControllableValue(context.formId);
+};

package/browser/internal/MultiValueMap.d.ts

@@ -1,9 +1,11 @@
 export declare class MultiValueMap<Key, Value> {
     private dict;
     add: (key: Key, value: Value) => void;
+    delete: (key: Key) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
     entries: () => IterableIterator<[Key, Value[]]>;
+    values: () => IterableIterator<Value[]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/MultiValueMap.js

@@ -10,6 +10,9 @@ export class MultiValueMap {
                 this.dict.set(key, [value]);
             }
         };
+        this.delete = (key) => {
+            this.dict.delete(key);
+        };
         this.remove = (key, value) => {
             if (!this.dict.has(key))
                 return;
@@ -25,6 +28,7 @@ export class MultiValueMap {
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
         this.entries = () => this.dict.entries();
+        this.values = () => this.dict.values();
         this.has = (key) => this.dict.has(key);
     }
 }

package/browser/internal/getInputProps.js

@@ -42,7 +42,8 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
         else if (props.type === "radio") {
             inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
         }
-        else {
+        else if (props.value === undefined) {
+            // We should only set the defaultValue if the input is uncontrolled.
             inputProps.defaultValue = defaultValue;
         }
         return omitBy(inputProps, (value) => value === undefined);

package/browser/internal/hooks.d.ts

@@ -1,11 +1,7 @@
-import { Atom, WritableAtom } from "jotai";
-import { useUpdateAtom } from "jotai/utils";
 import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
 import { Hydratable } from "./hydratable";
-export declare const useFormUpdateAtom: typeof useUpdateAtom;
-export declare const useFormAtom: <Value, Update, Result extends void | Promise<void>>(anAtom: WritableAtom<Value, Update, Result>) => [Value extends Promise<infer V> ? V : Value, import("jotai/core/atom").SetAtom<Update, Result>];
-export declare const useFormAtomValue: <Value>(anAtom: Atom<Value>) => Value extends Promise<infer V> ? V : Value;
+import { InternalFormId } from "./state/storeFamily";
 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>;
@@ -14,8 +10,23 @@ export declare const useDefaultValuesForForm: (context: InternalFormContextValue
     [fieldName: string]: any;
 }>;
 export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
-export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => [boolean, (update: boolean) => void];
-export declare const useFieldError: (name: string, context: InternalFormContextValue) => readonly [string | undefined, (update?: string | undefined) => void];
+export declare const useFieldTouched: (field: string, { formId }: InternalFormContextValue) => readonly [boolean, (touched: boolean) => void];
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const useClearError: (context: InternalFormContextValue) => (field: string) => void;
 export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
-export declare const useClearError: ({ formId }: InternalFormContextValue) => (name: string) => void;
-export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (name: string, touched: boolean) => void;
+export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolean;
+export declare const useInternalIsValid: (formId: InternalFormId) => boolean;
+export declare const useInternalHasBeenSubmitted: (formId: InternalFormId) => boolean;
+export declare const useValidateField: (formId: InternalFormId) => (fieldName: string) => Promise<string | null>;
+export declare const useValidate: (formId: InternalFormId) => () => Promise<void>;
+export declare const useRegisterReceiveFocus: (formId: InternalFormId) => (fieldName: string, handler: () => void) => () => void;
+export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
+    [fieldName: string]: any;
+};
+export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (field: string, touched: boolean) => void;
+export declare const useTouchedFields: (formId: InternalFormId) => import("..").TouchedFields;
+export declare const useFieldErrors: (formId: InternalFormId) => FieldErrors;
+export declare const useSetFieldErrors: (formId: InternalFormId) => (errors: FieldErrors) => void;
+export declare const useResetFormElement: (formId: InternalFormId) => () => void;
+export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
+export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;

package/browser/internal/hooks.js

@@ -1,16 +1,11 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import { useAtom } from "jotai";
-import { useAtomValue, 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, fieldErrorAtom, fieldTouchedAtom, formPropsAtom, isHydratedAtom, setFieldErrorAtom, setTouchedAtom, } from "./state";
-export const useFormUpdateAtom = (atom) => useUpdateAtom(atom, ATOM_SCOPE);
-export const useFormAtom = (anAtom) => useAtom(anAtom, ATOM_SCOPE);
-export const useFormAtomValue = (anAtom) => useAtomValue(anAtom, ATOM_SCOPE);
+import { useFormStore } from "./state/storeHooks";
 export const useInternalFormContext = (formId, hookName) => {
     const formContext = useContext(InternalFormContext);
     if (formId)
@@ -39,7 +34,7 @@ export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
 }
 export const useFieldErrorsForForm = (context) => {
     const response = useErrorResponseForForm(context);
-    const hydrated = useFormAtomValue(isHydratedAtom(context.formId));
+    const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
     return hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, hydrated);
 };
 export const useDefaultValuesFromLoader = ({ formId, }) => {
@@ -57,7 +52,7 @@ export const useDefaultValuesFromLoader = ({ formId, }) => {
 };
 export const useDefaultValuesForForm = (context) => {
     const { formId, defaultValuesProp } = context;
-    const hydrated = useFormAtomValue(isHydratedAtom(formId));
+    const hydrated = useFormStore(formId, (state) => state.isHydrated);
     const errorResponse = useErrorResponseForForm(context);
     const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
     // Typical flow is:
@@ -82,27 +77,41 @@ export const useHasActiveFormSubmit = ({ fetcher, }) => {
         : !!transition.submission;
     return hasActiveSubmission;
 };
-export const useFieldTouched = (field, { formId }) => useFormAtom(fieldTouchedAtom({ formId, field }));
+export const useFieldTouched = (field, { formId }) => {
+    const touched = useFormStore(formId, (state) => state.touchedFields[field]);
+    const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
+    const setTouched = useCallback((touched) => setFieldTouched(field, touched), [field, setFieldTouched]);
+    return [touched, setTouched];
+};
 export const useFieldError = (name, context) => {
     const fieldErrors = useFieldErrorsForForm(context);
-    const [state, set] = useFormAtom(fieldErrorAtom({ formId: context.formId, field: name }));
-    return [
-        fieldErrors.map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]).hydrateTo(state),
-        set,
-    ];
+    const state = useFormStore(context.formId, (state) => state.fieldErrors[name]);
+    return fieldErrors.map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]).hydrateTo(state);
+};
+export const useClearError = (context) => {
+    const { formId } = context;
+    return useFormStore(formId, (state) => state.clearFieldError);
 };
 export const useFieldDefaultValue = (name, context) => {
     const defaultValues = useDefaultValuesForForm(context);
-    const { defaultValues: state } = useFormAtomValue(formPropsAtom(context.formId));
+    const state = useSyncedDefaultValues(context.formId);
     return defaultValues
         .map((val) => lodashGet(val, name))
         .hydrateTo(lodashGet(state, name));
 };
-export const useClearError = ({ formId }) => {
-    const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));
-    return useCallback((name) => updateError({ field: name, error: undefined }), [updateError]);
-};
-export const useSetTouched = ({ formId }) => {
-    const setTouched = useFormUpdateAtom(setTouchedAtom(formId));
-    return useCallback((name, touched) => setTouched({ field: name, touched }), [setTouched]);
-};
+export const useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
+export const useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());
+export const useInternalHasBeenSubmitted = (formId) => useFormStore(formId, (state) => state.hasBeenSubmitted);
+export const useValidateField = (formId) => useFormStore(formId, (state) => state.validateField);
+export const useValidate = (formId) => useFormStore(formId, (state) => state.validate);
+const noOpReceiver = () => () => { };
+export const useRegisterReceiveFocus = (formId) => useFormStore(formId, (state) => { var _a, _b; return (_b = (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.registerReceiveFocus) !== null && _b !== void 0 ? _b : noOpReceiver; });
+const defaultDefaultValues = {};
+export const useSyncedDefaultValues = (formId) => useFormStore(formId, (state) => { var _a, _b; return (_b = (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.defaultValues) !== null && _b !== void 0 ? _b : defaultDefaultValues; });
+export const useSetTouched = ({ formId }) => useFormStore(formId, (state) => state.setTouched);
+export const useTouchedFields = (formId) => useFormStore(formId, (state) => state.touchedFields);
+export const useFieldErrors = (formId) => useFormStore(formId, (state) => state.fieldErrors);
+export const useSetFieldErrors = (formId) => useFormStore(formId, (state) => state.setFieldErrors);
+export const useResetFormElement = (formId) => useFormStore(formId, (state) => state.resetFormElement);
+export const useFormActionProp = (formId) => useFormStore(formId, (state) => { var _a; return (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.action; });
+export const useFormSubactionProp = (formId) => useFormStore(formId, (state) => { var _a; return (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.subaction; });

package/browser/internal/logic/getRadioChecked.js

@@ -3,3 +3,13 @@ export const getRadioChecked = (radioValue = "on", newValue) => {
         return newValue === radioValue;
     return undefined;
 };
+if (import.meta.vitest) {
+    const { it, expect } = import.meta.vitest;
+    it("getRadioChecked", () => {
+        expect(getRadioChecked("on", "on")).toBe(true);
+        expect(getRadioChecked("on", undefined)).toBe(undefined);
+        expect(getRadioChecked("trueValue", undefined)).toBe(undefined);
+        expect(getRadioChecked("trueValue", "bob")).toBe(false);
+        expect(getRadioChecked("trueValue", "trueValue")).toBe(true);
+    });
+}

package/browser/internal/reset.d.ts

@@ -0,0 +1,28 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const resetAtom: {
+    (param: InternalFormId): import("jotai").Atom<null> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: unknown) => void;
+        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};

package/browser/internal/reset.js

@@ -0,0 +1,13 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import lodashGet from "lodash/get";
+import { fieldErrorsAtom, formPropsAtom, hasBeenSubmittedAtom, touchedFieldsAtom, } from "./state";
+import { controlledFieldsAtom } from "./state/controlledFields";
+export const resetAtom = atomFamily((formId) => atom(null, (get, set) => {
+    set(fieldErrorsAtom(formId), {});
+    set(touchedFieldsAtom(formId), {});
+    set(hasBeenSubmittedAtom(formId), false);
+    const { defaultValues } = get(formPropsAtom(formId));
+    const controlledFields = get(controlledFieldsAtom(formId));
+    Object.entries(controlledFields).forEach(([name, atom]) => set(atom, lodashGet(defaultValues, name)));
+}));

package/browser/internal/state/cleanup.d.ts

@@ -0,0 +1,2 @@
+import { InternalFormId } from "./storeFamily";
+export declare const cleanupFormState: (formId: InternalFormId) => void;

package/browser/internal/state/cleanup.js

@@ -0,0 +1,6 @@
+import { controlledFieldStore } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
+export const cleanupFormState = (formId) => {
+    formStore.remove(formId);
+    controlledFieldStore.remove(formId);
+};

package/browser/internal/state/controlledFieldStore.d.ts

@@ -0,0 +1,24 @@
+export declare type ControlledFieldState = {
+    fields: {
+        [fieldName: string]: {
+            refCount: number;
+            value: unknown;
+            defaultValue?: unknown;
+            hydrated: boolean;
+            valueUpdatePromise: Promise<void> | undefined;
+            resolveValueUpdate: (() => void) | undefined;
+        } | undefined;
+    };
+    register: (fieldName: string) => void;
+    unregister: (fieldName: string) => void;
+    setValue: (fieldName: string, value: unknown) => void;
+    hydrateWithDefault: (fieldName: string, defaultValue: unknown) => void;
+    awaitValueUpdate: (fieldName: string) => Promise<void>;
+    reset: () => void;
+};
+export declare const controlledFieldStore: {
+    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ControlledFieldState>, "setState"> & {
+        setState(nextStateOrUpdater: ControlledFieldState | Partial<ControlledFieldState> | ((state: import("immer/dist/internal").WritableDraft<ControlledFieldState>) => void), shouldReplace?: boolean | undefined): void;
+    }>;
+    remove(formId: import("./storeFamily").InternalFormId): void;
+};

package/browser/internal/state/controlledFieldStore.js

@@ -0,0 +1,57 @@
+import create from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { storeFamily } from "./storeFamily";
+export const controlledFieldStore = storeFamily(() => create()(immer((set, get, api) => ({
+    fields: {},
+    register: (field) => set((state) => {
+        if (state.fields[field]) {
+            state.fields[field].refCount++;
+        }
+        else {
+            state.fields[field] = {
+                refCount: 1,
+                value: undefined,
+                hydrated: false,
+                valueUpdatePromise: undefined,
+                resolveValueUpdate: undefined,
+            };
+        }
+    }),
+    unregister: (field) => set((state) => {
+        const fieldState = state.fields[field];
+        if (!fieldState)
+            return;
+        fieldState.refCount--;
+        if (fieldState.refCount === 0)
+            delete state.fields[field];
+    }),
+    setValue: (field, value) => set((state) => {
+        const fieldState = state.fields[field];
+        if (!fieldState)
+            return;
+        fieldState.value = value;
+        const promise = new Promise((resolve) => {
+            fieldState.resolveValueUpdate = resolve;
+        });
+        fieldState.valueUpdatePromise = promise;
+    }),
+    hydrateWithDefault: (field, defaultValue) => set((state) => {
+        const fieldState = state.fields[field];
+        if (!fieldState)
+            return;
+        fieldState.value = defaultValue;
+        fieldState.defaultValue = defaultValue;
+        fieldState.hydrated = true;
+    }),
+    awaitValueUpdate: async (field) => {
+        var _a;
+        await ((_a = get().fields[field]) === null || _a === void 0 ? void 0 : _a.valueUpdatePromise);
+    },
+    reset: () => set((state) => {
+        Object.values(state.fields).forEach((field) => {
+            if (!field)
+                return;
+            field.value = field.defaultValue;
+        });
+    }),
+}))));

package/browser/internal/state/controlledFields.d.ts

@@ -1,62 +1,6 @@
-import { PrimitiveAtom } from "jotai";
-import { InternalFormId } from "./atomUtils";
-export declare const controlledFieldsAtom: {
-    (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void;
-        onMount?: (<S extends (update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: Record<string, PrimitiveAtom<unknown>>;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
-export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
-    write: (get: {
-        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-    } & {
-        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-            unstable_promise: true;
-        }): Value_3 | Promise<Value_3>;
-        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-            unstable_promise: true;
-        }): Value_4 | Promise<Value_4>;
-        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-            unstable_promise: true;
-        }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-    }, set: {
-        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-    }, update: {
-        formId: InternalFormId;
-        field: string;
-        value: unknown;
-    }) => Promise<void>;
-    onMount?: (<S extends (update: {
-        formId: InternalFormId;
-        field: string;
-        value: unknown;
-    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
-} & {
-    init: null;
-};
-export declare const useControlledFieldValue: (formId: InternalFormId, field: string) => any;
-export declare const useControllableValue: (formId: InternalFormId, field: string) => readonly [any, (value: unknown) => Promise<void>];
+import { InternalFormContextValue } from "../formContext";
+import { InternalFormId } from "./storeFamily";
+export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
+export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (fieldName: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (fieldName: string) => Promise<void>;