remix-validated-form 5.1.4 → 5.1.6

package/browser/internal/state/arrayUtil.js

@@ -1,350 +0,0 @@
-import { getPath, setPath } from "set-get";
-import invariant from "tiny-invariant";
-////
-// All of these array helpers are written in a way that mutates the original array.
-// This is because we're working with immer.
-////
-export const getArray = (values, field) => {
-    const value = getPath(values, field);
-    if (value === undefined || value === null) {
-        const newValue = [];
-        setPath(values, field, newValue);
-        return newValue;
-    }
-    invariant(Array.isArray(value), `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`);
-    return value;
-};
-export const swap = (array, indexA, indexB) => {
-    const itemA = array[indexA];
-    const itemB = array[indexB];
-    const hasItemA = indexA in array;
-    const hasItemB = indexB in array;
-    // If we're dealing with a sparse array (i.e. one of the indeces doesn't exist),
-    // we should keep it sparse
-    if (hasItemA) {
-        array[indexB] = itemA;
-    }
-    else {
-        delete array[indexB];
-    }
-    if (hasItemB) {
-        array[indexA] = itemB;
-    }
-    else {
-        delete array[indexA];
-    }
-};
-// A splice that can handle sparse arrays
-function sparseSplice(array, start, deleteCount, item) {
-    // Inserting an item into an array won't behave as we need it to if the array isn't
-    // at least as long as the start index. We can force the array to be long enough like this.
-    if (array.length < start && item) {
-        array.length = start;
-    }
-    // If we just pass item in, it'll be undefined and splice will delete the item.
-    if (arguments.length === 4)
-        return array.splice(start, deleteCount, item);
-    return array.splice(start, deleteCount);
-}
-export const move = (array, from, to) => {
-    const [item] = sparseSplice(array, from, 1);
-    sparseSplice(array, to, 0, item);
-};
-export const insert = (array, index, value) => {
-    sparseSplice(array, index, 0, value);
-};
-export const remove = (array, index) => {
-    sparseSplice(array, index, 1);
-};
-export const replace = (array, index, value) => {
-    sparseSplice(array, index, 1, value);
-};
-/**
- * The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
- * We key those objects by full paths to the fields.
- * When we're doing array mutations, that makes it difficult to update those objects.
- */
-export const mutateAsArray = (field, obj, mutate) => {
-    const beforeKeys = new Set();
-    const arr = [];
-    for (const [key, value] of Object.entries(obj)) {
-        if (key.startsWith(field) && key !== field) {
-            beforeKeys.add(key);
-            setPath(arr, key.substring(field.length), value);
-        }
-    }
-    mutate(arr);
-    for (const key of beforeKeys) {
-        delete obj[key];
-    }
-    const newKeys = getDeepArrayPaths(arr);
-    for (const key of newKeys) {
-        const val = getPath(arr, key);
-        if (val !== undefined) {
-            obj[`${field}${key}`] = val;
-        }
-    }
-};
-const getDeepArrayPaths = (obj, basePath = "") => {
-    // This only needs to handle arrays and plain objects
-    // and we can assume the first call is always an array.
-    if (Array.isArray(obj)) {
-        return obj.flatMap((item, index) => getDeepArrayPaths(item, `${basePath}[${index}]`));
-    }
-    if (typeof obj === "object") {
-        return Object.keys(obj).flatMap((key) => getDeepArrayPaths(obj[key], `${basePath}.${key}`));
-    }
-    return [basePath];
-};
-if (import.meta.vitest) {
-    const { describe, expect, it } = import.meta.vitest;
-    // Count the actual number of items in the array
-    // instead of just getting the length.
-    // This is useful for validating that sparse arrays are handled correctly.
-    const countArrayItems = (arr) => {
-        let count = 0;
-        arr.forEach(() => count++);
-        return count;
-    };
-    describe("getArray", () => {
-        it("shoud get a deeply nested array that can be mutated to update the nested value", () => {
-            const values = {
-                d: [
-                    { foo: "bar", baz: [true, false] },
-                    { e: true, f: "hi" },
-                ],
-            };
-            const result = getArray(values, "d[0].baz");
-            const finalValues = {
-                d: [
-                    { foo: "bar", baz: [true, false, true] },
-                    { e: true, f: "hi" },
-                ],
-            };
-            expect(result).toEqual([true, false]);
-            result.push(true);
-            expect(values).toEqual(finalValues);
-        });
-        it("should return an empty array that can be mutated if result is null or undefined", () => {
-            const values = {};
-            const result = getArray(values, "a.foo[0].bar");
-            const finalValues = {
-                a: { foo: [{ bar: ["Bob ross"] }] },
-            };
-            expect(result).toEqual([]);
-            result.push("Bob ross");
-            expect(values).toEqual(finalValues);
-        });
-        it("should throw if the value is defined and not an array", () => {
-            const values = { foo: "foo" };
-            expect(() => getArray(values, "foo")).toThrow();
-        });
-    });
-    describe("swap", () => {
-        it("should swap two items", () => {
-            const array = [1, 2, 3];
-            swap(array, 0, 1);
-            expect(array).toEqual([2, 1, 3]);
-        });
-        it("should work for sparse arrays", () => {
-            // A bit of a sanity check for native array behavior
-            const arr = [];
-            arr[0] = true;
-            swap(arr, 0, 2);
-            expect(countArrayItems(arr)).toEqual(1);
-            expect(0 in arr).toBe(false);
-            expect(2 in arr).toBe(true);
-            expect(arr[2]).toEqual(true);
-        });
-    });
-    describe("move", () => {
-        it("should move an item to a new index", () => {
-            const array = [1, 2, 3];
-            move(array, 0, 1);
-            expect(array).toEqual([2, 1, 3]);
-        });
-        it("should work with sparse arrays", () => {
-            const array = [1];
-            move(array, 0, 2);
-            expect(countArrayItems(array)).toEqual(1);
-            expect(array).toEqual([undefined, undefined, 1]);
-        });
-    });
-    describe("insert", () => {
-        it("should insert an item at a new index", () => {
-            const array = [1, 2, 3];
-            insert(array, 1, 4);
-            expect(array).toEqual([1, 4, 2, 3]);
-        });
-        it("should be able to insert falsey values", () => {
-            const array = [1, 2, 3];
-            insert(array, 1, null);
-            expect(array).toEqual([1, null, 2, 3]);
-        });
-        it("should handle sparse arrays", () => {
-            const array = [];
-            array[2] = true;
-            insert(array, 0, true);
-            expect(countArrayItems(array)).toEqual(2);
-            expect(array).toEqual([true, undefined, undefined, true]);
-        });
-    });
-    describe("remove", () => {
-        it("should remove an item at a given index", () => {
-            const array = [1, 2, 3];
-            remove(array, 1);
-            expect(array).toEqual([1, 3]);
-        });
-        it("should handle sparse arrays", () => {
-            const array = [];
-            array[2] = true;
-            remove(array, 0);
-            expect(countArrayItems(array)).toEqual(1);
-            expect(array).toEqual([undefined, true]);
-        });
-    });
-    describe("replace", () => {
-        it("should replace an item at a given index", () => {
-            const array = [1, 2, 3];
-            replace(array, 1, 4);
-            expect(array).toEqual([1, 4, 3]);
-        });
-        it("should handle sparse arrays", () => {
-            const array = [];
-            array[2] = true;
-            replace(array, 0, true);
-            expect(countArrayItems(array)).toEqual(2);
-            expect(array).toEqual([true, undefined, true]);
-        });
-    });
-    describe("mutateAsArray", () => {
-        it("should handle swap", () => {
-            const values = {
-                myField: "something",
-                "myField[0]": "foo",
-                "myField[2]": "bar",
-                otherField: "baz",
-                "otherField[0]": "something else",
-            };
-            mutateAsArray("myField", values, (arr) => {
-                swap(arr, 0, 2);
-            });
-            expect(values).toEqual({
-                myField: "something",
-                "myField[0]": "bar",
-                "myField[2]": "foo",
-                otherField: "baz",
-                "otherField[0]": "something else",
-            });
-        });
-        it("should swap sparse arrays", () => {
-            const values = {
-                myField: "something",
-                "myField[0]": "foo",
-                otherField: "baz",
-                "otherField[0]": "something else",
-            };
-            mutateAsArray("myField", values, (arr) => {
-                swap(arr, 0, 2);
-            });
-            expect(values).toEqual({
-                myField: "something",
-                "myField[2]": "foo",
-                otherField: "baz",
-                "otherField[0]": "something else",
-            });
-        });
-        it("should handle arrays with nested values", () => {
-            const values = {
-                myField: "something",
-                "myField[0].title": "foo",
-                "myField[0].note": "bar",
-                "myField[2].title": "other",
-                "myField[2].note": "other",
-                otherField: "baz",
-                "otherField[0]": "something else",
-            };
-            mutateAsArray("myField", values, (arr) => {
-                swap(arr, 0, 2);
-            });
-            expect(values).toEqual({
-                myField: "something",
-                "myField[0].title": "other",
-                "myField[0].note": "other",
-                "myField[2].title": "foo",
-                "myField[2].note": "bar",
-                otherField: "baz",
-                "otherField[0]": "something else",
-            });
-        });
-        it("should handle move", () => {
-            const values = {
-                myField: "something",
-                "myField[0]": "foo",
-                "myField[1]": "bar",
-                "myField[2]": "baz",
-                "otherField[0]": "something else",
-            };
-            mutateAsArray("myField", values, (arr) => {
-                move(arr, 0, 2);
-            });
-            expect(values).toEqual({
-                myField: "something",
-                "myField[0]": "bar",
-                "myField[1]": "baz",
-                "myField[2]": "foo",
-                "otherField[0]": "something else",
-            });
-        });
-        it("should not create keys for `undefined`", () => {
-            const values = {
-                "myField[0]": "foo",
-            };
-            mutateAsArray("myField", values, (arr) => {
-                arr.unshift(undefined);
-            });
-            expect(Object.keys(values)).toHaveLength(1);
-            expect(values).toEqual({
-                "myField[1]": "foo",
-            });
-        });
-        it("should handle remove", () => {
-            const values = {
-                myField: "something",
-                "myField[0]": "foo",
-                "myField[1]": "bar",
-                "myField[2]": "baz",
-                "otherField[0]": "something else",
-            };
-            mutateAsArray("myField", values, (arr) => {
-                remove(arr, 1);
-            });
-            expect(values).toEqual({
-                myField: "something",
-                "myField[0]": "foo",
-                "myField[1]": "baz",
-                "otherField[0]": "something else",
-            });
-            expect("myField[2]" in values).toBe(false);
-        });
-    });
-    describe("getDeepArrayPaths", () => {
-        it("should return all paths recursively", () => {
-            const obj = [
-                true,
-                true,
-                [true, true],
-                { foo: true, bar: { baz: true, test: [true] } },
-            ];
-            expect(getDeepArrayPaths(obj, "myField")).toEqual([
-                "myField[0]",
-                "myField[1]",
-                "myField[2][0]",
-                "myField[2][1]",
-                "myField[3].foo",
-                "myField[3].bar.baz",
-                "myField[3].bar.test[0]",
-            ]);
-        });
-    });
-}

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

@@ -1,38 +0,0 @@
-import { Atom } from "jotai";
-export declare type InternalFormId = string | symbol;
-export declare const formAtomFamily: <T>(data: T) => {
-    (param: InternalFormId): Atom<T> & {
-        write: (get: {
-            <Value>(atom: Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: 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: T | ((prev: T) => T)) => void;
-        onMount?: (<S extends import("jotai/core/atom").SetAtom<T | ((prev: T) => T), void>>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: T;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
-export declare type FieldAtomKey = {
-    formId: InternalFormId;
-    field: string;
-};
-export declare const fieldAtomFamily: <T extends Atom<unknown>>(func: (key: FieldAtomKey) => T) => {
-    (param: FieldAtomKey): T;
-    remove(param: FieldAtomKey): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
-};

package/browser/internal/state/atomUtils.js

@@ -1,5 +0,0 @@
-import { atom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import isEqual from "lodash/isEqual";
-export const formAtomFamily = (data) => atomFamily((_) => atom(data));
-export const fieldAtomFamily = (func) => atomFamily(func, isEqual);

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

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

package/browser/internal/state/cleanup.js

@@ -1,6 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import { InternalFormId } from "./types";
-export declare type FieldState = {
-    refCount: number;
-    value: unknown;
-    defaultValue?: unknown;
-    hydrated: boolean;
-    valueUpdatePromise: Promise<void> | undefined;
-    resolveValueUpdate: (() => void) | undefined;
-};
-export declare type ControlledFieldState = {
-    forms: {
-        [formId: InternalFormId]: {
-            [fieldName: string]: FieldState | undefined;
-        };
-    };
-    register: (formId: InternalFormId, fieldName: string) => void;
-    unregister: (formId: InternalFormId, fieldName: string) => void;
-    getField: (formId: InternalFormId, fieldName: string) => FieldState | undefined;
-    setValue: (formId: InternalFormId, fieldName: string, value: unknown) => void;
-    hydrateWithDefault: (formId: InternalFormId, fieldName: string, defaultValue: unknown) => void;
-    awaitValueUpdate: (formId: InternalFormId, fieldName: string) => Promise<void>;
-    reset: (formId: InternalFormId) => void;
-};
-export declare const useControlledFieldStore: 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;
-}>;

package/browser/internal/state/controlledFieldStore.js

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

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

@@ -1,7 +0,0 @@
-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,36 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { useFieldDefaultValue } from "../hooks";
-import { useFormStore } from "./storeHooks";
-export const useControlledFieldValue = (context, field) => {
-    const value = useFormStore(context.formId, (state) => state.controlledFields.getValue(field));
-    const isFormHydrated = useFormStore(context.formId, (state) => state.isHydrated);
-    const defaultValue = useFieldDefaultValue(field, context);
-    return isFormHydrated ? value : defaultValue;
-};
-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 = useFormStore(context.formId, (state) => state.controlledFields.register);
-    const unregister = useFormStore(context.formId, (state) => state.controlledFields.unregister);
-    useEffect(() => {
-        register(field);
-        return () => unregister(field);
-    }, [context.formId, field, register, unregister]);
-};
-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 = useFormStore(formId, (state) => state.controlledFields.setValue);
-    return useCallback((field, value) => setValue(field, value), [setValue]);
-};
-export const useAwaitValue = (formId) => {
-    const awaitValue = useFormStore(formId, (state) => state.controlledFields.awaitValueUpdate);
-    return useCallback((field) => awaitValue(field), [awaitValue]);
-};

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

@@ -1,79 +0,0 @@
-import { WritableDraft } from "immer/dist/internal";
-import { FieldErrors, TouchedFields, ValidationResult, Validator } from "../../validation/types";
-import { InternalFormId } from "./types";
-export type SyncedFormProps = {
-    formId?: string;
-    action?: string;
-    subaction?: string;
-    defaultValues: {
-        [fieldName: string]: any;
-    };
-    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
-    validator: Validator<unknown>;
-};
-export type FormStoreState = {
-    forms: {
-        [formId: InternalFormId]: FormState;
-    };
-    form: (formId: InternalFormId) => FormState;
-    registerForm: (formId: InternalFormId) => void;
-    cleanupForm: (formId: InternalFormId) => void;
-};
-export type FormState = {
-    isHydrated: boolean;
-    isSubmitting: boolean;
-    hasBeenSubmitted: boolean;
-    fieldErrors: FieldErrors;
-    touchedFields: TouchedFields;
-    formProps?: SyncedFormProps;
-    formElement: HTMLFormElement | null;
-    currentDefaultValues: Record<string, any>;
-    isValid: () => boolean;
-    startSubmit: () => void;
-    endSubmit: () => void;
-    setTouched: (field: string, touched: boolean) => void;
-    setFieldError: (field: string, error: string) => void;
-    setFieldErrors: (errors: FieldErrors) => void;
-    clearFieldError: (field: string) => void;
-    reset: () => void;
-    syncFormProps: (props: SyncedFormProps) => 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;
-}>;