remix-validated-form 4.5.4 → 4.6.0-beta.0

package/.turbo/turbo-build.log

@@ -1,17 +1,17 @@
 $ vite build
 vite v2.9.5 building for production...
 transforming...
-✓ 482 modules transformed.
+✓ 483 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   45.80 KiB / gzip: 17.20 KiB
-dist/remix-validated-form.cjs.js.map 254.77 KiB
-dist/remix-validated-form.es.js   101.57 KiB / gzip: 23.90 KiB
-dist/remix-validated-form.es.js.map 262.81 KiB
-dist/remix-validated-form.umd.js   46.00 KiB / gzip: 17.31 KiB
-dist/remix-validated-form.umd.js.map 254.75 KiB
+dist/remix-validated-form.cjs.js   49.71 KiB / gzip: 18.12 KiB
+dist/remix-validated-form.cjs.js.map 281.88 KiB
+dist/remix-validated-form.es.js   109.95 KiB / gzip: 25.38 KiB
+dist/remix-validated-form.es.js.map 290.49 KiB
+dist/remix-validated-form.umd.js   49.91 KiB / gzip: 18.22 KiB
+dist/remix-validated-form.umd.js.map 281.85 KiB
 
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 2738ms.
+[vite:dts] Declaration files built in 2756ms.
 
 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'

package/browser/ValidatedForm.js

@@ -7,7 +7,6 @@ import { FORM_ID_FIELD } from "./internal/constants";
 import { InternalFormContext, } from "./internal/formContext";
 import { useDefaultValuesFromLoader, useErrorResponseForForm, useHasActiveFormSubmit, useSetFieldErrors, } from "./internal/hooks";
 import { useMultiValueMap } from "./internal/MultiValueMap";
-import { useControlledFieldStore } from "./internal/state/controlledFieldStore";
 import { useRootFormStore, } from "./internal/state/createFormStore";
 import { useFormStore } from "./internal/state/storeHooks";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
@@ -115,7 +114,6 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const setFieldErrors = useSetFieldErrors(formId);
     const setFieldError = useFormStore(formId, (state) => state.setFieldError);
     const reset = useFormStore(formId, (state) => state.reset);
-    const resetControlledFields = useControlledFieldStore((state) => state.reset);
     const startSubmit = useFormStore(formId, (state) => state.startSubmit);
     const endSubmit = useFormStore(formId, (state) => state.endSubmit);
     const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
@@ -200,6 +198,5 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (event.defaultPrevented)
                 return;
             reset();
-            resetControlledFields(formId);
         }, children: _jsx(InternalFormContext.Provider, { value: contextValue, children: _jsxs(_Fragment, { 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) }, void 0));
 }

package/browser/index.d.ts

@@ -4,3 +4,4 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
 export * from "./userFacingFormContext";
+export { FieldArray, useFieldArray, type FieldArrayProps, type FieldArrayHelpers, } from "./internal/state/fieldArray";

package/browser/index.js

@@ -4,3 +4,4 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
 export * from "./userFacingFormContext";
+export { FieldArray, useFieldArray, } from "./internal/state/fieldArray";

package/browser/internal/hooks.d.ts

@@ -13,6 +13,7 @@ export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextV
 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 useCurrentDefaultValueForField: (formId: InternalFormId, field: string) => any;
 export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
 export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolean;
 export declare const useInternalIsValid: (formId: InternalFormId) => boolean;

package/browser/internal/hooks.js

@@ -92,12 +92,11 @@ export const useClearError = (context) => {
     const { formId } = context;
     return useFormStore(formId, (state) => state.clearFieldError);
 };
+export const useCurrentDefaultValueForField = (formId, field) => useFormStore(formId, (state) => lodashGet(state.currentDefaultValues, field));
 export const useFieldDefaultValue = (name, context) => {
     const defaultValues = useDefaultValuesForForm(context);
-    const state = useSyncedDefaultValues(context.formId);
-    return defaultValues
-        .map((val) => lodashGet(val, name))
-        .hydrateTo(lodashGet(state, name));
+    const state = useCurrentDefaultValueForField(context.formId, name);
+    return defaultValues.map((val) => lodashGet(val, name)).hydrateTo(state);
 };
 export const useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
 export const useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());

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

@@ -1,6 +1,7 @@
 import { InternalFormContextValue } from "../formContext";
 import { InternalFormId } from "./types";
 export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
+export declare const useRegisterControlledField: (context: InternalFormContextValue, field: string) => void;
 export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
 export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
 export declare const useAwaitValue: (formId: InternalFormId) => (field: string) => Promise<void>;

package/browser/internal/state/controlledFields.js

@@ -1,48 +1,36 @@
 import { useCallback, useEffect } from "react";
 import { useFieldDefaultValue } from "../hooks";
-import { useControlledFieldStore } from "./controlledFieldStore";
 import { useFormStore } from "./storeHooks";
 export const useControlledFieldValue = (context, field) => {
-    const value = useControlledFieldStore((state) => { var _a; return (_a = state.getField(context.formId, field)) === null || _a === void 0 ? void 0 : _a.value; });
+    const value = useFormStore(context.formId, (state) => state.controlledFields.getValue(field));
     const isFormHydrated = useFormStore(context.formId, (state) => state.isHydrated);
     const defaultValue = useFieldDefaultValue(field, context);
-    const isFieldHydrated = useControlledFieldStore((state) => { var _a, _b; return (_b = (_a = state.getField(context.formId, field)) === null || _a === void 0 ? void 0 : _a.hydrated) !== null && _b !== void 0 ? _b : false; });
-    const hydrateWithDefault = useControlledFieldStore((state) => state.hydrateWithDefault);
-    useEffect(() => {
-        if (isFormHydrated && !isFieldHydrated) {
-            hydrateWithDefault(context.formId, field, defaultValue);
-        }
-    }, [
-        context.formId,
-        defaultValue,
-        field,
-        hydrateWithDefault,
-        isFieldHydrated,
-        isFormHydrated,
-    ]);
-    return isFieldHydrated ? value : defaultValue;
+    return isFormHydrated ? value : defaultValue;
 };
-export const useControllableValue = (context, field) => {
-    const resolveUpdate = useControlledFieldStore((state) => { var _a; return (_a = state.getField(context.formId, field)) === null || _a === void 0 ? void 0 : _a.resolveValueUpdate; });
+export const useRegisterControlledField = (context, field) => {
+    const resolveUpdate = useFormStore(context.formId, (state) => state.controlledFields.valueUpdateResolvers[field]);
     useEffect(() => {
         resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
     }, [resolveUpdate]);
-    const register = useControlledFieldStore((state) => state.register);
-    const unregister = useControlledFieldStore((state) => state.unregister);
+    const register = useFormStore(context.formId, (state) => state.controlledFields.register);
+    const unregister = useFormStore(context.formId, (state) => state.controlledFields.unregister);
     useEffect(() => {
-        register(context.formId, field);
-        return () => unregister(context.formId, field);
+        register(field);
+        return () => unregister(field);
     }, [context.formId, field, register, unregister]);
-    const setControlledFieldValue = useControlledFieldStore((state) => state.setValue);
-    const setValue = useCallback((value) => setControlledFieldValue(context.formId, field, value), [context.formId, field, setControlledFieldValue]);
+};
+export const useControllableValue = (context, field) => {
+    useRegisterControlledField(context, field);
+    const setControlledFieldValue = useFormStore(context.formId, (state) => state.controlledFields.setValue);
+    const setValue = useCallback((value) => setControlledFieldValue(field, value), [field, setControlledFieldValue]);
     const value = useControlledFieldValue(context, field);
     return [value, setValue];
 };
 export const useUpdateControllableValue = (formId) => {
-    const setValue = useControlledFieldStore((state) => state.setValue);
-    return useCallback((field, value) => setValue(formId, field, value), [formId, setValue]);
+    const setValue = useFormStore(formId, (state) => state.controlledFields.setValue);
+    return useCallback((field, value) => setValue(field, value), [setValue]);
 };
 export const useAwaitValue = (formId) => {
-    const awaitValue = useControlledFieldStore((state) => state.awaitValueUpdate);
-    return useCallback((field) => awaitValue(formId, field), [awaitValue, formId]);
+    const awaitValue = useFormStore(formId, (state) => state.controlledFields.awaitValueUpdate);
+    return useCallback((field) => awaitValue(field), [awaitValue]);
 };

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

@@ -27,6 +27,7 @@ export declare type FormState = {
     touchedFields: TouchedFields;
     formProps?: SyncedFormProps;
     formElement: HTMLFormElement | null;
+    currentDefaultValues: Record<string, any>;
     isValid: () => boolean;
     startSubmit: () => void;
     endSubmit: () => void;
@@ -36,13 +37,42 @@ export declare type FormState = {
     clearFieldError: (field: string) => void;
     reset: () => void;
     syncFormProps: (props: SyncedFormProps) => void;
-    setHydrated: () => void;
     setFormElement: (formElement: HTMLFormElement | null) => void;
     validateField: (fieldName: string) => Promise<string | null>;
     validate: () => Promise<ValidationResult<unknown>>;
     resetFormElement: () => void;
     submit: () => void;
     getValues: () => FormData;
+    controlledFields: {
+        values: {
+            [fieldName: string]: any;
+        };
+        refCounts: {
+            [fieldName: string]: number;
+        };
+        valueUpdatePromises: {
+            [fieldName: string]: Promise<void>;
+        };
+        valueUpdateResolvers: {
+            [fieldName: string]: () => void;
+        };
+        register: (fieldName: string) => void;
+        unregister: (fieldName: string) => void;
+        setValue: (fieldName: string, value: unknown) => void;
+        kickoffValueUpdate: (fieldName: string) => void;
+        getValue: (fieldName: string) => unknown;
+        awaitValueUpdate: (fieldName: string) => Promise<void>;
+        array: {
+            push: (fieldName: string, value: unknown) => void;
+            swap: (fieldName: string, indexA: number, indexB: number) => void;
+            move: (fieldName: string, fromIndex: number, toIndex: number) => void;
+            insert: (fieldName: string, index: number, value: unknown) => void;
+            unshift: (fieldName: string, value: unknown) => void;
+            remove: (fieldName: string, index: number) => void;
+            pop: (fieldName: string) => void;
+            replace: (fieldName: string, index: number, value: unknown) => void;
+        };
+    };
 };
 export declare const useRootFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStoreState>, "setState"> & {
     setState(nextStateOrUpdater: FormStoreState | Partial<FormStoreState> | ((state: WritableDraft<FormStoreState>) => void), shouldReplace?: boolean | undefined): void;

package/browser/internal/state/createFormStore.js

@@ -1,7 +1,9 @@
+import lodashGet from "lodash/get";
+import lodashSet from "lodash/set";
 import invariant from "tiny-invariant";
 import create from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { useControlledFieldStore } from "./controlledFieldStore";
+import * as arrayUtil from "./arrayUtil";
 const noOp = () => { };
 const defaultFormState = {
     isHydrated: false,
@@ -17,9 +19,9 @@ const defaultFormState = {
     setFieldError: noOp,
     setFieldErrors: noOp,
     clearFieldError: noOp,
+    currentDefaultValues: {},
     reset: () => noOp,
     syncFormProps: noOp,
-    setHydrated: noOp,
     setFormElement: noOp,
     validateField: async () => null,
     validate: async () => {
@@ -30,8 +32,32 @@ const defaultFormState = {
     },
     resetFormElement: noOp,
     getValues: () => new FormData(),
+    controlledFields: {
+        values: {},
+        refCounts: {},
+        valueUpdatePromises: {},
+        valueUpdateResolvers: {},
+        register: noOp,
+        unregister: noOp,
+        setValue: noOp,
+        getValue: noOp,
+        kickoffValueUpdate: noOp,
+        awaitValueUpdate: async () => {
+            throw new Error("AwaitValueUpdate called before form was initialized.");
+        },
+        array: {
+            push: noOp,
+            swap: noOp,
+            move: noOp,
+            insert: noOp,
+            unshift: noOp,
+            remove: noOp,
+            pop: noOp,
+            replace: noOp,
+        },
+    },
 };
-const createFormState = (formId, set, get) => ({
+const createFormState = (set, get) => ({
     // It's not "hydrated" until the form props are synced
     isHydrated: false,
     isSubmitting: false,
@@ -39,6 +65,7 @@ const createFormState = (formId, set, get) => ({
     touchedFields: {},
     fieldErrors: {},
     formElement: null,
+    currentDefaultValues: {},
     isValid: () => Object.keys(get().fieldErrors).length === 0,
     startSubmit: () => set((state) => {
         state.isSubmitting = true;
@@ -60,17 +87,22 @@ const createFormState = (formId, set, get) => ({
         delete state.fieldErrors[fieldName];
     }),
     reset: () => set((state) => {
+        var _a, _b;
         state.fieldErrors = {};
         state.touchedFields = {};
         state.hasBeenSubmitted = false;
+        const nextDefaults = (_b = (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.defaultValues) !== null && _b !== void 0 ? _b : {};
+        state.controlledFields.values = nextDefaults;
+        state.currentDefaultValues = nextDefaults;
     }),
     syncFormProps: (props) => set((state) => {
+        if (!state.isHydrated) {
+            state.controlledFields.values = props.defaultValues;
+            state.currentDefaultValues = props.defaultValues;
+        }
         state.formProps = props;
         state.isHydrated = true;
     }),
-    setHydrated: () => set((state) => {
-        state.isHydrated = true;
-    }),
     setFormElement: (formElement) => {
         // This gets called frequently, so we want to avoid calling set() every time
         // Or else we wind up with an infinite loop
@@ -88,7 +120,7 @@ const createFormState = (formId, set, get) => ({
         invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
         const validator = (_a = get().formProps) === null || _a === void 0 ? void 0 : _a.validator;
         invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
-        await ((_c = (_b = useControlledFieldStore.getState()).awaitValueUpdate) === null || _c === void 0 ? void 0 : _c.call(_b, formId, field));
+        await ((_c = (_b = get().controlledFields).awaitValueUpdate) === null || _c === void 0 ? void 0 : _c.call(_b, field));
         const { error } = await validator.validateField(new FormData(formElement), field);
         if (error) {
             get().setFieldError(field, error);
@@ -117,6 +149,141 @@ const createFormState = (formId, set, get) => ({
     },
     getValues: () => { var _a; return new FormData((_a = get().formElement) !== null && _a !== void 0 ? _a : undefined); },
     resetFormElement: () => { var _a; return (_a = get().formElement) === null || _a === void 0 ? void 0 : _a.reset(); },
+    controlledFields: {
+        values: {},
+        refCounts: {},
+        valueUpdatePromises: {},
+        valueUpdateResolvers: {},
+        register: (fieldName) => {
+            set((state) => {
+                var _a;
+                const current = (_a = state.controlledFields.refCounts[fieldName]) !== null && _a !== void 0 ? _a : 0;
+                state.controlledFields.refCounts[fieldName] = current + 1;
+            });
+        },
+        unregister: (fieldName) => {
+            // For this helper in particular, we may run into a case where state is undefined.
+            // When the whole form unmounts, the form state may be cleaned up before the fields are.
+            if (get() === null || get() === undefined)
+                return;
+            set((state) => {
+                var _a, _b, _c;
+                const current = (_a = state.controlledFields.refCounts[fieldName]) !== null && _a !== void 0 ? _a : 0;
+                if (current > 1) {
+                    state.controlledFields.refCounts[fieldName] = current - 1;
+                    return;
+                }
+                const isNested = Object.keys(state.controlledFields.refCounts).some((key) => fieldName.startsWith(key) && key !== fieldName);
+                // When nested within a field array, we should leave resetting up to the field array
+                if (!isNested) {
+                    lodashSet(state.controlledFields.values, fieldName, lodashGet((_b = state.formProps) === null || _b === void 0 ? void 0 : _b.defaultValues, fieldName));
+                    lodashSet(state.currentDefaultValues, fieldName, lodashGet((_c = state.formProps) === null || _c === void 0 ? void 0 : _c.defaultValues, fieldName));
+                }
+                delete state.controlledFields.refCounts[fieldName];
+            });
+        },
+        getValue: (fieldName) => lodashGet(get().controlledFields.values, fieldName),
+        setValue: (fieldName, value) => {
+            set((state) => {
+                lodashSet(state.controlledFields.values, fieldName, value);
+            });
+            get().controlledFields.kickoffValueUpdate(fieldName);
+        },
+        kickoffValueUpdate: (fieldName) => {
+            const clear = () => set((state) => {
+                delete state.controlledFields.valueUpdateResolvers[fieldName];
+                delete state.controlledFields.valueUpdatePromises[fieldName];
+            });
+            set((state) => {
+                const promise = new Promise((resolve) => {
+                    state.controlledFields.valueUpdateResolvers[fieldName] = resolve;
+                }).then(clear);
+                state.controlledFields.valueUpdatePromises[fieldName] = promise;
+            });
+        },
+        awaitValueUpdate: async (fieldName) => {
+            await get().controlledFields.valueUpdatePromises[fieldName];
+        },
+        array: {
+            push: (fieldName, item) => {
+                set((state) => {
+                    arrayUtil
+                        .getArray(state.controlledFields.values, fieldName)
+                        .push(item);
+                    arrayUtil.getArray(state.currentDefaultValues, fieldName).push(item);
+                    // New item added to the end, no need to update touched or error
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+            swap: (fieldName, indexA, indexB) => {
+                set((state) => {
+                    arrayUtil.swap(arrayUtil.getArray(state.controlledFields.values, fieldName), indexA, indexB);
+                    arrayUtil.swap(arrayUtil.getArray(state.currentDefaultValues, fieldName), indexA, indexB);
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => arrayUtil.swap(array, indexA, indexB));
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => arrayUtil.swap(array, indexA, indexB));
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+            move: (fieldName, from, to) => {
+                set((state) => {
+                    arrayUtil.move(arrayUtil.getArray(state.controlledFields.values, fieldName), from, to);
+                    arrayUtil.move(arrayUtil.getArray(state.currentDefaultValues, fieldName), from, to);
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => arrayUtil.move(array, from, to));
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => arrayUtil.move(array, from, to));
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+            insert: (fieldName, index, item) => {
+                set((state) => {
+                    arrayUtil.insert(arrayUtil.getArray(state.controlledFields.values, fieldName), index, item);
+                    arrayUtil.insert(arrayUtil.getArray(state.currentDefaultValues, fieldName), index, item);
+                    // Even though this is a new item, we need to push around other items.
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => arrayUtil.insert(array, index, false));
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => arrayUtil.insert(array, index, undefined));
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+            remove: (fieldName, index) => {
+                set((state) => {
+                    arrayUtil.remove(arrayUtil.getArray(state.controlledFields.values, fieldName), index);
+                    arrayUtil.remove(arrayUtil.getArray(state.currentDefaultValues, fieldName), index);
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => arrayUtil.remove(array, index));
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => arrayUtil.remove(array, index));
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+            pop: (fieldName) => {
+                set((state) => {
+                    arrayUtil.getArray(state.controlledFields.values, fieldName).pop();
+                    arrayUtil.getArray(state.currentDefaultValues, fieldName).pop();
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => array.pop());
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => array.pop());
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+            unshift: (fieldName, value) => {
+                set((state) => {
+                    arrayUtil
+                        .getArray(state.controlledFields.values, fieldName)
+                        .unshift(value);
+                    arrayUtil
+                        .getArray(state.currentDefaultValues, fieldName)
+                        .unshift(value);
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => array.unshift(false));
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => array.unshift(undefined));
+                });
+            },
+            replace: (fieldName, index, item) => {
+                set((state) => {
+                    arrayUtil.replace(arrayUtil.getArray(state.controlledFields.values, fieldName), index, item);
+                    arrayUtil.replace(arrayUtil.getArray(state.currentDefaultValues, fieldName), index, item);
+                    arrayUtil.mutateAsArray(fieldName, state.touchedFields, (array) => arrayUtil.replace(array, index, item));
+                    arrayUtil.mutateAsArray(fieldName, state.fieldErrors, (array) => arrayUtil.replace(array, index, item));
+                });
+                get().controlledFields.kickoffValueUpdate(fieldName);
+            },
+        },
+    },
 });
 export const useRootFormStore = create()(immer((set, get) => ({
     forms: {},
@@ -133,7 +300,7 @@ export const useRootFormStore = create()(immer((set, get) => ({
         if (get().forms[formId])
             return;
         set((state) => {
-            state.forms[formId] = createFormState(formId, (setter) => set((state) => setter(state.forms[formId])), () => get().forms[formId]);
+            state.forms[formId] = createFormState((setter) => set((state) => setter(state.forms[formId])), () => get().forms[formId]);
         });
     },
 })));