remix-validated-form 5.1.4 → 5.1.6

package/browser/internal/state/createFormStore.js

@@ -1,306 +0,0 @@
-import { getPath, setPath } from "set-get";
-import invariant from "tiny-invariant";
-import create from "zustand";
-import { immer } from "zustand/middleware/immer";
-import { requestSubmit } from "../logic/requestSubmit";
-import * as arrayUtil from "./arrayUtil";
-const noOp = () => { };
-const defaultFormState = {
-    isHydrated: false,
-    isSubmitting: false,
-    hasBeenSubmitted: false,
-    touchedFields: {},
-    fieldErrors: {},
-    formElement: null,
-    isValid: () => true,
-    startSubmit: noOp,
-    endSubmit: noOp,
-    setTouched: noOp,
-    setFieldError: noOp,
-    setFieldErrors: noOp,
-    clearFieldError: noOp,
-    currentDefaultValues: {},
-    reset: () => noOp,
-    syncFormProps: noOp,
-    setFormElement: noOp,
-    validateField: async () => null,
-    validate: async () => {
-        throw new Error("Validate called before form was initialized.");
-    },
-    submit: async () => {
-        throw new Error("Submit called before form was initialized.");
-    },
-    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 = (set, get) => ({
-    // It's not "hydrated" until the form props are synced
-    isHydrated: false,
-    isSubmitting: false,
-    hasBeenSubmitted: false,
-    touchedFields: {},
-    fieldErrors: {},
-    formElement: null,
-    currentDefaultValues: {},
-    isValid: () => Object.keys(get().fieldErrors).length === 0,
-    startSubmit: () => set((state) => {
-        state.isSubmitting = true;
-        state.hasBeenSubmitted = true;
-    }),
-    endSubmit: () => set((state) => {
-        state.isSubmitting = false;
-    }),
-    setTouched: (fieldName, touched) => set((state) => {
-        state.touchedFields[fieldName] = touched;
-    }),
-    setFieldError: (fieldName, error) => set((state) => {
-        state.fieldErrors[fieldName] = error;
-    }),
-    setFieldErrors: (errors) => set((state) => {
-        state.fieldErrors = errors;
-    }),
-    clearFieldError: (fieldName) => set((state) => {
-        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;
-    }),
-    setFormElement: (formElement) => {
-        // This gets called frequently, so we want to avoid calling set() every time
-        // Or else we wind up with an infinite loop
-        if (get().formElement === formElement)
-            return;
-        set((state) => {
-            // weird type issue here
-            // seems to be because formElement is a writable draft
-            state.formElement = formElement;
-        });
-    },
-    validateField: async (field) => {
-        var _a, _b, _c;
-        const formElement = get().formElement;
-        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 = 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);
-            return error;
-        }
-        else {
-            get().clearFieldError(field);
-            return null;
-        }
-    },
-    validate: async () => {
-        var _a;
-        const formElement = get().formElement;
-        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.");
-        const result = await validator.validate(new FormData(formElement));
-        if (result.error)
-            get().setFieldErrors(result.error.fieldErrors);
-        return result;
-    },
-    submit: () => {
-        const formElement = get().formElement;
-        invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
-        requestSubmit(formElement);
-    },
-    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) {
-                    setPath(state.controlledFields.values, fieldName, getPath((_b = state.formProps) === null || _b === void 0 ? void 0 : _b.defaultValues, fieldName));
-                    setPath(state.currentDefaultValues, fieldName, getPath((_c = state.formProps) === null || _c === void 0 ? void 0 : _c.defaultValues, fieldName));
-                }
-                delete state.controlledFields.refCounts[fieldName];
-            });
-        },
-        getValue: (fieldName) => getPath(get().controlledFields.values, fieldName),
-        setValue: (fieldName, value) => {
-            set((state) => {
-                setPath(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: {},
-    form: (formId) => {
-        var _a;
-        return (_a = get().forms[formId]) !== null && _a !== void 0 ? _a : defaultFormState;
-    },
-    cleanupForm: (formId) => {
-        set((state) => {
-            delete state.forms[formId];
-        });
-    },
-    registerForm: (formId) => {
-        if (get().forms[formId])
-            return;
-        set((state) => {
-            state.forms[formId] = createFormState((setter) => set((state) => setter(state.forms[formId])), () => get().forms[formId]);
-        });
-    },
-})));

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

@@ -1,28 +0,0 @@
-import React from "react";
-export type FieldArrayValidationBehavior = "onChange" | "onSubmit";
-export type FieldArrayValidationBehaviorOptions = {
-    initial: FieldArrayValidationBehavior;
-    whenSubmitted: FieldArrayValidationBehavior;
-};
-export type FieldArrayHelpers<Item = any> = {
-    push: (item: Item) => void;
-    swap: (indexA: number, indexB: number) => void;
-    move: (from: number, to: number) => void;
-    insert: (index: number, value: Item) => void;
-    unshift: (value: Item) => void;
-    remove: (index: number) => void;
-    pop: () => void;
-    replace: (index: number, value: Item) => void;
-};
-export type UseFieldArrayOptions = {
-    formId?: string;
-    validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
-};
-export declare function useFieldArray<Item = any>(name: string, { formId, validationBehavior }?: UseFieldArrayOptions): [itemDefaults: Item[], helpers: FieldArrayHelpers<any>, error: string | undefined];
-export type FieldArrayProps = {
-    name: string;
-    children: (itemDefaults: any[], helpers: FieldArrayHelpers, error: string | undefined) => React.ReactNode;
-    formId?: string;
-    validationBehavior?: FieldArrayValidationBehaviorOptions;
-};
-export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => JSX.Element;

package/browser/internal/state/fieldArray.js

@@ -1,74 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useCallback } from "react";
-import invariant from "tiny-invariant";
-import { useFieldDefaultValue, useFieldError, useInternalFormContext, useInternalHasBeenSubmitted, useValidateField, } from "../hooks";
-import { useRegisterControlledField } from "./controlledFields";
-import { useFormStore } from "./storeHooks";
-const useInternalFieldArray = (context, field, validationBehavior) => {
-    const value = useFieldDefaultValue(field, context);
-    useRegisterControlledField(context, field);
-    const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
-    const validateField = useValidateField(context.formId);
-    const error = useFieldError(field, context);
-    const resolvedValidationBehavior = {
-        initial: "onSubmit",
-        whenSubmitted: "onChange",
-        ...validationBehavior,
-    };
-    const behavior = hasBeenSubmitted
-        ? resolvedValidationBehavior.whenSubmitted
-        : resolvedValidationBehavior.initial;
-    const maybeValidate = useCallback(() => {
-        if (behavior === "onChange") {
-            validateField(field);
-        }
-    }, [behavior, field, validateField]);
-    invariant(value === undefined || value === null || Array.isArray(value), `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`);
-    const arr = useFormStore(context.formId, (state) => state.controlledFields.array);
-    const helpers = useMemo(() => ({
-        push: (item) => {
-            arr.push(field, item);
-            maybeValidate();
-        },
-        swap: (indexA, indexB) => {
-            arr.swap(field, indexA, indexB);
-            maybeValidate();
-        },
-        move: (from, to) => {
-            arr.move(field, from, to);
-            maybeValidate();
-        },
-        insert: (index, value) => {
-            arr.insert(field, index, value);
-            maybeValidate();
-        },
-        unshift: (value) => {
-            arr.unshift(field, value);
-            maybeValidate();
-        },
-        remove: (index) => {
-            arr.remove(field, index);
-            maybeValidate();
-        },
-        pop: () => {
-            arr.pop(field);
-            maybeValidate();
-        },
-        replace: (index, value) => {
-            arr.replace(field, index, value);
-            maybeValidate();
-        },
-    }), [arr, field, maybeValidate]);
-    const arrayValue = useMemo(() => value !== null && value !== void 0 ? value : [], [value]);
-    return [arrayValue, helpers, error];
-};
-export function useFieldArray(name, { formId, validationBehavior } = {}) {
-    const context = useInternalFormContext(formId, "FieldArray");
-    return useInternalFieldArray(context, name, validationBehavior);
-}
-export const FieldArray = ({ name, children, formId, validationBehavior, }) => {
-    const context = useInternalFormContext(formId, "FieldArray");
-    const [value, helpers, error] = useInternalFieldArray(context, name, validationBehavior);
-    return _jsx(_Fragment, { children: children(value, helpers, error) });
-};

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

@@ -1,9 +0,0 @@
-/**
- * This is basically what `atomFamily` from jotai does,
- * but it doesn't make sense to include the entire jotai library just for that api.
- */
-export declare type InternalFormId = string | symbol;
-export declare const storeFamily: <T>(create: (formId: InternalFormId) => T) => {
-    (formId: InternalFormId): T;
-    remove(formId: InternalFormId): void;
-};

package/browser/internal/state/storeFamily.js

@@ -1,18 +0,0 @@
-/**
- * This is basically what `atomFamily` from jotai does,
- * but it doesn't make sense to include the entire jotai library just for that api.
- */
-export const storeFamily = (create) => {
-    const stores = new Map();
-    const family = (formId) => {
-        if (stores.has(formId))
-            return stores.get(formId);
-        const store = create(formId);
-        stores.set(formId, store);
-        return store;
-    };
-    family.remove = (formId) => {
-        stores.delete(formId);
-    };
-    return family;
-};

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

@@ -1,3 +0,0 @@
-import { FormState } from "./createFormStore";
-import { InternalFormId } from "./types";
-export declare const useFormStore: <T>(formId: InternalFormId, selector: (state: FormState) => T) => T;

package/browser/internal/state/storeHooks.js

@@ -1,4 +0,0 @@
-import { useRootFormStore } from "./createFormStore";
-export const useFormStore = (formId, selector) => {
-    return useRootFormStore((state) => selector(state.form(formId)));
-};

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

@@ -1 +0,0 @@
-export type InternalFormId = string | symbol;

package/browser/internal/state/types.js

@@ -1 +0,0 @@
-export {};