remix-validated-form 4.2.0 → 4.4.0

package/src/internal/getInputProps.test.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi } from "vitest";
+import {
+  createGetInputProps,
+  CreateGetInputPropsOptions,
+} from "./getInputProps";
+
+const fakeEvent = { fake: "event" } as any;
+
+describe("getInputProps", () => {
+  describe("initial", () => {
+    it("should validate on blur by default", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: false,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should respect provided validation behavior", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: false,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          initial: "onChange",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).toBeCalledTimes(1);
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should not validate when behavior is onSubmit", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: false,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          initial: "onSubmit",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).not.toBeCalled();
+    });
+  });
+
+  describe("whenTouched", () => {
+    it("should validate on change by default", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).toBeCalledTimes(1);
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should respect provided validation behavior", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          whenTouched: "onBlur",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+  });
+
+  describe("whenSubmitted", () => {
+    it("should validate on change by default", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: true,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).toBeCalledTimes(1);
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should respect provided validation behavior", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: true,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          whenSubmitted: "onBlur",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+  });
+});

package/src/internal/getInputProps.ts

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

package/src/internal/hooks.ts

@@ -1,6 +1,4 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import { Atom, useAtom, WritableAtom } from "jotai";
-import { useAtomValue, useUpdateAtom } from "jotai/utils";
 import lodashGet from "lodash/get";
 import { useCallback, useContext } from "react";
 import invariant from "tiny-invariant";
@@ -8,25 +6,8 @@ import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext, InternalFormContextValue } from "./formContext";
 import { Hydratable, hydratable } from "./hydratable";
-import {
-  ATOM_SCOPE,
-  fieldErrorAtom,
-  fieldTouchedAtom,
-  formPropsAtom,
-  isHydratedAtom,
-  setFieldErrorAtom,
-  setTouchedAtom,
-} from "./state";
-
-export const useFormUpdateAtom: typeof useUpdateAtom = (atom) =>
-  useUpdateAtom(atom, ATOM_SCOPE);
-
-export const useFormAtom = <Value, Update, Result extends void | Promise<void>>(
-  anAtom: WritableAtom<Value, Update, Result>
-) => useAtom(anAtom, ATOM_SCOPE);
-
-export const useFormAtomValue = <Value>(anAtom: Atom<Value>) =>
-  useAtomValue(anAtom, ATOM_SCOPE);
+import { InternalFormId } from "./state/storeFamily";
+import { useFormStore } from "./state/storeHooks";
 
 export const useInternalFormContext = (
   formId?: string | symbol,
@@ -72,7 +53,7 @@ export const useFieldErrorsForForm = (
   context: InternalFormContextValue
 ): Hydratable<FieldErrors | undefined> => {
   const response = useErrorResponseForForm(context);
-  const hydrated = useFormAtomValue(isHydratedAtom(context.formId));
+  const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
   return hydratable.from(response?.fieldErrors, hydrated);
 };
 
@@ -97,7 +78,7 @@ export const useDefaultValuesForForm = (
   context: InternalFormContextValue
 ): Hydratable<{ [fieldName: string]: any }> => {
   const { formId, defaultValuesProp } = context;
-  const hydrated = useFormAtomValue(isHydratedAtom(formId));
+  const hydrated = useFormStore(formId, (state) => state.isHydrated);
   const errorResponse = useErrorResponseForForm(context);
   const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
 
@@ -133,20 +114,31 @@ export const useHasActiveFormSubmit = ({
 export const useFieldTouched = (
   field: string,
   { formId }: InternalFormContextValue
-) => useFormAtom(fieldTouchedAtom({ formId, field }));
+) => {
+  const touched = useFormStore(formId, (state) => state.touchedFields[field]);
+  const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
+  const setTouched = useCallback(
+    (touched: boolean) => setFieldTouched(field, touched),
+    [field, setFieldTouched]
+  );
+  return [touched, setTouched] as const;
+};
 
 export const useFieldError = (
   name: string,
   context: InternalFormContextValue
 ) => {
   const fieldErrors = useFieldErrorsForForm(context);
-  const [state, set] = useFormAtom(
-    fieldErrorAtom({ formId: context.formId, field: name })
+  const state = useFormStore(
+    context.formId,
+    (state) => state.fieldErrors[name]
   );
-  return [
-    fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state),
-    set,
-  ] as const;
+  return fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state);
+};
+
+export const useClearError = (context: InternalFormContextValue) => {
+  const { formId } = context;
+  return useFormStore(formId, (state) => state.clearFieldError);
 };
 
 export const useFieldDefaultValue = (
@@ -154,26 +146,58 @@ export const useFieldDefaultValue = (
   context: InternalFormContextValue
 ) => {
   const defaultValues = useDefaultValuesForForm(context);
-  const { defaultValues: state } = useFormAtomValue(
-    formPropsAtom(context.formId)
-  );
+  const state = useSyncedDefaultValues(context.formId);
   return defaultValues
     .map((val) => lodashGet(val, name))
     .hydrateTo(lodashGet(state, name));
 };
 
-export const useClearError = ({ formId }: InternalFormContextValue) => {
-  const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));
-  return useCallback(
-    (name: string) => updateError({ field: name, error: undefined }),
-    [updateError]
+export const useInternalIsSubmitting = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.isSubmitting);
+
+export const useInternalIsValid = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.isValid());
+
+export const useInternalHasBeenSubmitted = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.hasBeenSubmitted);
+
+export const useValidateField = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.validateField);
+
+export const useValidate = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.validate);
+
+const noOpReceiver = () => () => {};
+export const useRegisterReceiveFocus = (formId: InternalFormId) =>
+  useFormStore(
+    formId,
+    (state) => state.formProps?.registerReceiveFocus ?? noOpReceiver
   );
-};
 
-export const useSetTouched = ({ formId }: InternalFormContextValue) => {
-  const setTouched = useFormUpdateAtom(setTouchedAtom(formId));
-  return useCallback(
-    (name: string, touched: boolean) => setTouched({ field: name, touched }),
-    [setTouched]
+const defaultDefaultValues = {};
+export const useSyncedDefaultValues = (formId: InternalFormId) =>
+  useFormStore(
+    formId,
+    (state) => state.formProps?.defaultValues ?? defaultDefaultValues
   );
-};
+
+export const useSetTouched = ({ formId }: InternalFormContextValue) =>
+  useFormStore(formId, (state) => state.setTouched);
+
+export const useTouchedFields = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.touchedFields);
+
+export const useFieldErrors = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.fieldErrors);
+
+export const useSetFieldErrors = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.setFieldErrors);
+
+export const useResetFormElement = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.resetFormElement);
+
+export const useFormActionProp = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.formProps?.action);
+
+export const useFormSubactionProp = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.formProps?.subaction);

package/src/internal/logic/getRadioChecked.ts

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

package/src/internal/state/cleanup.ts

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

package/src/internal/state/controlledFieldStore.ts

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

package/src/internal/state/controlledFields.ts

@@ -0,0 +1,78 @@
+import { useCallback, useEffect } from "react";
+import { InternalFormContextValue } from "../formContext";
+import { useFieldDefaultValue } from "../hooks";
+import { controlledFieldStore } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
+
+export const useControlledFieldValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  const useValueStore = controlledFieldStore(context.formId);
+  const value = useValueStore((state) => state.fields[field]?.value);
+
+  const useFormStore = formStore(context.formId);
+  const isFormHydrated = useFormStore((state) => state.isHydrated);
+  const defaultValue = useFieldDefaultValue(field, context);
+
+  const isFieldHydrated = useValueStore(
+    (state) => state.fields[field]?.hydrated ?? false
+  );
+  const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
+
+  useEffect(() => {
+    if (isFormHydrated && !isFieldHydrated) {
+      hydrateWithDefault(field, defaultValue);
+    }
+  }, [
+    defaultValue,
+    field,
+    hydrateWithDefault,
+    isFieldHydrated,
+    isFormHydrated,
+  ]);
+
+  return isFieldHydrated ? value : defaultValue;
+};
+
+export const useControllableValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  const useValueStore = controlledFieldStore(context.formId);
+
+  const resolveUpdate = useValueStore(
+    (state) => state.fields[field]?.resolveValueUpdate
+  );
+  useEffect(() => {
+    resolveUpdate?.();
+  }, [resolveUpdate]);
+
+  const register = useValueStore((state) => state.register);
+  const unregister = useValueStore((state) => state.unregister);
+  useEffect(() => {
+    register(field);
+    return () => unregister(field);
+  }, [context.formId, field, register, unregister]);
+
+  const setControlledFieldValue = useValueStore((state) => state.setValue);
+  const setValue = useCallback(
+    (value: unknown) => setControlledFieldValue(field, value),
+    [field, setControlledFieldValue]
+  );
+
+  const value = useControlledFieldValue(context, field);
+
+  return [value, setValue] as const;
+};
+
+export const useUpdateControllableValue = (formId: InternalFormId) => {
+  const useValueStore = controlledFieldStore(formId);
+  return useValueStore((state) => state.setValue);
+};
+
+export const useAwaitValue = (formId: InternalFormId) => {
+  const useValueStore = controlledFieldStore(formId);
+  return useValueStore((state) => state.awaitValueUpdate);
+};