remix-validated-form 4.1.4-beta.0 → 4.1.6

package/build/internal/getInputProps.js

@@ -5,27 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createGetInputProps = void 0;
 const omitBy_1 = __importDefault(require("lodash/omitBy"));
+const getCheckboxChecked_1 = require("./logic/getCheckboxChecked");
+const getRadioChecked_1 = require("./logic/getRadioChecked");
 const defaultValidationBehavior = {
     initial: "onBlur",
     whenTouched: "onChange",
     whenSubmitted: "onChange",
 };
-const getCheckboxDefaultChecked = (value, defaultValue) => {
-    if (Array.isArray(defaultValue))
-        return defaultValue.includes(value);
-    if (typeof defaultValue === "boolean")
-        return defaultValue;
-    if (typeof defaultValue === "string")
-        return defaultValue === value;
-    return undefined;
-};
 const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
     const validationBehaviors = {
         ...defaultValidationBehavior,
         ...validationBehavior,
     };
     return (props = {}) => {
-        var _a, _b;
         const behavior = hasBeenSubmitted
             ? validationBehaviors.whenSubmitted
             : touched
@@ -51,12 +43,10 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
             name,
         };
         if (props.type === "checkbox") {
-            const value = (_a = props.value) !== null && _a !== void 0 ? _a : "on";
-            inputProps.defaultChecked = getCheckboxDefaultChecked(value, defaultValue);
+            inputProps.defaultChecked = (0, getCheckboxChecked_1.getCheckboxChecked)(props.value, defaultValue);
         }
         else if (props.type === "radio") {
-            const value = (_b = props.value) !== null && _b !== void 0 ? _b : "on";
-            inputProps.defaultChecked = defaultValue === value;
+            inputProps.defaultChecked = (0, getRadioChecked_1.getRadioChecked)(props.value, defaultValue);
         }
         else {
             inputProps.defaultValue = defaultValue;

package/build/internal/hooks.d.ts

@@ -1,22 +1,21 @@
-import { Atom } from "jotai";
+import { Atom, WritableAtom } from "jotai";
 import { useUpdateAtom } from "jotai/utils";
-import { ValidationErrorResponseData } from "..";
+import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
-import { FormAtom } from "./state";
-declare type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
-declare const USE_HYDRATED_STATE: unique symbol;
+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;
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
-export declare const useContextSelectAtom: <T>(formId: string | symbol, selectorAtomCreator: FormSelectorAtomCreator<T>) => T extends Promise<infer V> ? V : T;
-export declare const useHydratableSelector: <T, U>({ formId }: InternalFormContextValue, atomCreator: FormSelectorAtomCreator<T>, dataToUse: U | typeof USE_HYDRATED_STATE, selector?: (data: U) => T) => T | (T extends Promise<infer V> ? V : T);
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
-export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => import("..").FieldErrors | typeof USE_HYDRATED_STATE | undefined;
+export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
 export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
-export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => any;
+export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
+    [fieldName: string]: any;
+}>;
 export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
-export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
-export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const 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 useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
-export declare const useFormUpdateAtom: typeof useUpdateAtom;
-export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
-export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;
-export {};
+export declare const useClearError: ({ formId }: InternalFormContextValue) => (name: string) => void;
+export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (name: string, touched: boolean) => void;

package/build/internal/hooks.js

@@ -3,36 +3,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetTouched = exports.useClearError = exports.useFormUpdateAtom = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useHydratableSelector = exports.useContextSelectAtom = exports.useInternalFormContext = void 0;
+exports.useSetTouched = exports.useClearError = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useInternalFormContext = exports.useFormAtomValue = exports.useFormAtom = exports.useFormUpdateAtom = void 0;
 const react_1 = require("@remix-run/react");
+const jotai_1 = require("jotai");
 const utils_1 = require("jotai/utils");
 const get_1 = __importDefault(require("lodash/get"));
-const identity_1 = __importDefault(require("lodash/identity"));
 const react_2 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const constants_1 = require("./constants");
 const formContext_1 = require("./formContext");
+const hydratable_1 = require("./hydratable");
 const state_1 = require("./state");
-const USE_HYDRATED_STATE = Symbol("USE_HYDRATED_STATE");
+const useFormUpdateAtom = (atom) => (0, utils_1.useUpdateAtom)(atom, state_1.ATOM_SCOPE);
+exports.useFormUpdateAtom = useFormUpdateAtom;
+const useFormAtom = (anAtom) => (0, jotai_1.useAtom)(anAtom, state_1.ATOM_SCOPE);
+exports.useFormAtom = useFormAtom;
+const useFormAtomValue = (anAtom) => (0, utils_1.useAtomValue)(anAtom, state_1.ATOM_SCOPE);
+exports.useFormAtomValue = useFormAtomValue;
 const useInternalFormContext = (formId, hookName) => {
     const formContext = (0, react_2.useContext)(formContext_1.InternalFormContext);
     if (formId)
         return { formId };
     if (formContext)
         return formContext;
-    throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
+    throw new Error(`Unable to determine form for ${hookName}. Please use it inside a ValidatedForm or pass a 'formId'.`);
 };
 exports.useInternalFormContext = useInternalFormContext;
-const useContextSelectAtom = (formId, selectorAtomCreator) => {
-    const formAtom = (0, state_1.formRegistry)(formId);
-    const selectorAtom = (0, react_2.useMemo)(() => selectorAtomCreator(formAtom), [formAtom, selectorAtomCreator]);
-    return (0, utils_1.useAtomValue)(selectorAtom, state_1.ATOM_SCOPE);
-};
-exports.useContextSelectAtom = useContextSelectAtom;
-const useHydratableSelector = ({ formId }, atomCreator, dataToUse, selector = identity_1.default) => {
-    const dataFromState = (0, exports.useContextSelectAtom)(formId, atomCreator);
-    return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);
-};
-exports.useHydratableSelector = useHydratableSelector;
 function useErrorResponseForForm({ fetcher, subaction, formId, }) {
     var _a;
     const actionData = (0, react_1.useActionData)();
@@ -54,8 +50,8 @@ function useErrorResponseForForm({ fetcher, subaction, formId, }) {
 exports.useErrorResponseForForm = useErrorResponseForForm;
 const useFieldErrorsForForm = (context) => {
     const response = useErrorResponseForForm(context);
-    const hydrated = (0, exports.useContextSelectAtom)(context.formId, state_1.isHydratedAtom);
-    return hydrated ? USE_HYDRATED_STATE : response === null || response === void 0 ? void 0 : response.fieldErrors;
+    const hydrated = (0, exports.useFormAtomValue)((0, state_1.isHydratedAtom)(context.formId));
+    return hydratable_1.hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, hydrated);
 };
 exports.useFieldErrorsForForm = useFieldErrorsForForm;
 const useDefaultValuesFromLoader = ({ formId, }) => {
@@ -74,7 +70,7 @@ const useDefaultValuesFromLoader = ({ formId, }) => {
 exports.useDefaultValuesFromLoader = useDefaultValuesFromLoader;
 const useDefaultValuesForForm = (context) => {
     const { formId, defaultValuesProp } = context;
-    const hydrated = (0, exports.useContextSelectAtom)(formId, state_1.isHydratedAtom);
+    const hydrated = (0, exports.useFormAtomValue)((0, state_1.isHydratedAtom)(formId));
     const errorResponse = useErrorResponseForForm(context);
     const defaultValuesFromLoader = (0, exports.useDefaultValuesFromLoader)(context);
     // Typical flow is:
@@ -83,12 +79,14 @@ const useDefaultValuesForForm = (context) => {
     // - State gets hydrated with default values
     // - After submit, we may need to use values from the error
     if (hydrated)
-        return USE_HYDRATED_STATE;
-    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields)
-        return errorResponse.repopulateFields;
+        return hydratable_1.hydratable.hydratedData();
+    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
+        (0, tiny_invariant_1.default)(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
+        return hydratable_1.hydratable.serverData(errorResponse.repopulateFields);
+    }
     if (defaultValuesProp)
-        return defaultValuesProp;
-    return defaultValuesFromLoader;
+        return hydratable_1.hydratable.serverData(defaultValuesProp);
+    return hydratable_1.hydratable.serverData(defaultValuesFromLoader);
 };
 exports.useDefaultValuesForForm = useDefaultValuesForForm;
 const useHasActiveFormSubmit = ({ fetcher, }) => {
@@ -99,32 +97,32 @@ const useHasActiveFormSubmit = ({ fetcher, }) => {
     return hasActiveSubmission;
 };
 exports.useHasActiveFormSubmit = useHasActiveFormSubmit;
-const useFieldTouched = (name, { formId }) => {
-    const atomCreator = (0, react_2.useMemo)(() => (0, state_1.fieldTouchedAtom)(name), [name]);
-    return (0, exports.useContextSelectAtom)(formId, atomCreator);
-};
+const useFieldTouched = (field, { formId }) => (0, exports.useFormAtom)((0, state_1.fieldTouchedAtom)({ formId, field }));
 exports.useFieldTouched = useFieldTouched;
 const useFieldError = (name, context) => {
-    return (0, exports.useHydratableSelector)(context, (0, react_2.useMemo)(() => (0, state_1.fieldErrorAtom)(name), [name]), (0, exports.useFieldErrorsForForm)(context), (fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]);
+    const fieldErrors = (0, exports.useFieldErrorsForForm)(context);
+    const [state, set] = (0, exports.useFormAtom)((0, state_1.fieldErrorAtom)({ formId: context.formId, field: name }));
+    return [
+        fieldErrors.map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]).hydrateTo(state),
+        set,
+    ];
 };
 exports.useFieldError = useFieldError;
 const useFieldDefaultValue = (name, context) => {
-    return (0, exports.useHydratableSelector)(context, (0, react_2.useMemo)(() => (0, state_1.fieldDefaultValueAtom)(name), [name]), (0, exports.useDefaultValuesForForm)(context), (val) => (0, get_1.default)(val, name));
+    const defaultValues = (0, exports.useDefaultValuesForForm)(context);
+    const { defaultValues: state } = (0, exports.useFormAtomValue)((0, state_1.formPropsAtom)(context.formId));
+    return defaultValues
+        .map((val) => (0, get_1.default)(val, name))
+        .hydrateTo(state[name]);
 };
 exports.useFieldDefaultValue = useFieldDefaultValue;
-const useFormUpdateAtom = (atom) => (0, utils_1.useUpdateAtom)(atom, state_1.ATOM_SCOPE);
-exports.useFormUpdateAtom = useFormUpdateAtom;
-const useClearError = (context) => {
-    const clearError = (0, exports.useFormUpdateAtom)(state_1.clearErrorAtom);
-    return (0, react_2.useCallback)((name) => {
-        clearError({ name, formAtom: (0, state_1.formRegistry)(context.formId) });
-    }, [clearError, context.formId]);
+const useClearError = ({ formId }) => {
+    const updateError = (0, exports.useFormUpdateAtom)((0, state_1.setFieldErrorAtom)(formId));
+    return (0, react_2.useCallback)((name) => updateError({ field: name, error: undefined }), [updateError]);
 };
 exports.useClearError = useClearError;
-const useSetTouched = (context) => {
-    const setTouched = (0, exports.useFormUpdateAtom)(state_1.setTouchedAtom);
-    return (0, react_2.useCallback)((name, touched) => {
-        setTouched({ name, formAtom: (0, state_1.formRegistry)(context.formId), touched });
-    }, [setTouched, context.formId]);
+const useSetTouched = ({ formId }) => {
+    const setTouched = (0, exports.useFormUpdateAtom)((0, state_1.setTouchedAtom)(formId));
+    return (0, react_2.useCallback)((name, touched) => setTouched({ field: name, touched }), [setTouched]);
 };
 exports.useSetTouched = useSetTouched;

package/build/internal/logic/elementUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const isMultiselect: (node: Node) => node is HTMLSelectElement;
+export declare const isCheckbox: (node: Node | RadioNodeList) => node is HTMLInputElement;
+export declare const isRadio: (node: Node) => node is HTMLInputElement;

package/build/internal/logic/elementUtils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRadio = exports.isCheckbox = exports.isMultiselect = void 0;
+const isMultiselect = (node) => node instanceof HTMLSelectElement && node.multiple;
+exports.isMultiselect = isMultiselect;
+const isCheckbox = (node) => node instanceof HTMLInputElement && node.type === "checkbox";
+exports.isCheckbox = isCheckbox;
+const isRadio = (node) => node instanceof HTMLInputElement && node.type === "radio";
+exports.isRadio = isRadio;

package/build/internal/logic/setInputValueInForm.js

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

package/build/internal/state/controlledFields.js

@@ -15,10 +15,18 @@ const refCountAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(0)
 const fieldValueAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
 const fieldValueHydratedAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(false));
 const pendingValidateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
-const valueSerializerAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)({ serializer: JSON.stringify }));
+const valueSerializerAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)({
+    serializer: (value) => {
+        if (value === undefined)
+            return "";
+        return JSON.stringify(value);
+    },
+}));
 const registerAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
+    // We don't set hydrated here because it gets set when we know
+    // we have the right default values
     if (newRefCount === 1) {
         set((0, exports.controlledFieldsAtom)(formId), (prev) => ({
             ...prev,
@@ -33,6 +41,7 @@ const unregisterAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) =>
         set((0, exports.controlledFieldsAtom)(formId), (prev) => (0, omit_1.default)(prev, field));
         fieldValueAtom.remove({ formId, field });
         pendingValidateAtom.remove({ formId, field });
+        fieldValueHydratedAtom.remove({ formId, field });
     }
 });
 exports.setControlledFieldValueAtom = (0, jotai_1.atom)(null, async (_get, set, { formId, field, value, }) => {
@@ -51,7 +60,7 @@ const useControlledFieldValue = (formId, field) => {
     const [isFieldHydrated, setIsFieldHydrated] = (0, hooks_1.useFormAtom)(fieldValueHydratedAtom({ formId, field }));
     (0, react_1.useEffect)(() => {
         if (isHydrated && !isFieldHydrated) {
-            setValue({ formId, field, value: defaultValue });
+            setValue(defaultValue);
             setIsFieldHydrated(true);
         }
     }, [