remix-validated-form 4.6.11 → 5.0.0

package/src/internal/state/fieldArray.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from "react";
+import { nanoid } from "nanoid";
+import React, { useMemo, useRef, useState } from "react";
 import { useCallback } from "react";
 import invariant from "tiny-invariant";
 import { InternalFormContextValue } from "../formContext";
@@ -7,8 +8,9 @@ import {
   useFieldError,
   useInternalFormContext,
   useInternalHasBeenSubmitted,
-  useValidateField,
+  useSmartValidate,
 } from "../hooks";
+import * as arrayUtil from "./arrayUtil";
 import { useRegisterControlledField } from "./controlledFields";
 import { useFormStore } from "./storeHooks";
 
@@ -19,6 +21,19 @@ export type FieldArrayValidationBehaviorOptions = {
   whenSubmitted: FieldArrayValidationBehavior;
 };
 
+export type FieldArrayItem<T> = {
+  /**
+   * The default value of the item.
+   * This does not update as the field is changed by the user.
+   */
+  defaultValue: T;
+  /**
+   * A unique key for the item.
+   * Use this as the key prop when rendering the item.
+   */
+  key: string;
+};
+
 const useInternalFieldArray = (
   context: InternalFormContextValue,
   field: string,
@@ -27,7 +42,7 @@ const useInternalFieldArray = (
   const value = useFieldDefaultValue(field, context);
   useRegisterControlledField(context, field);
   const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
-  const validateField = useValidateField(context.formId);
+  const validateField = useSmartValidate(context.formId);
   const error = useFieldError(field, context);
 
   const resolvedValidationBehavior: FieldArrayValidationBehaviorOptions = {
@@ -42,7 +57,7 @@ const useInternalFieldArray = (
 
   const maybeValidate = useCallback(() => {
     if (behavior === "onChange") {
-      validateField(field);
+      validateField({ alwaysIncludeErrorsFromFields: [field] });
     }
   }, [behavior, field, validateField]);
 
@@ -56,47 +71,74 @@ const useInternalFieldArray = (
     (state) => state.controlledFields.array
   );
 
+  const arrayValue = useMemo<unknown[]>(() => value ?? [], [value]);
+  const keyRef = useRef<string[]>([]);
+
+  // If the lengths don't match up it means one of two things
+  // 1. The array has been modified outside of this hook
+  // 2. We're initializing the array
+  if (keyRef.current.length !== arrayValue.length) {
+    keyRef.current = arrayValue.map(() => nanoid());
+  }
+
   const helpers = useMemo(
     () => ({
       push: (item: any) => {
         arr.push(field, item);
+        keyRef.current.push(nanoid());
         maybeValidate();
       },
       swap: (indexA: number, indexB: number) => {
         arr.swap(field, indexA, indexB);
+        arrayUtil.swap(keyRef.current, indexA, indexB);
         maybeValidate();
       },
       move: (from: number, to: number) => {
         arr.move(field, from, to);
+        arrayUtil.move(keyRef.current, from, to);
         maybeValidate();
       },
       insert: (index: number, value: any) => {
         arr.insert(field, index, value);
+        arrayUtil.insert(keyRef.current, index, nanoid());
         maybeValidate();
       },
       unshift: (value: any) => {
         arr.unshift(field, value);
+        keyRef.current.unshift(nanoid());
         maybeValidate();
       },
       remove: (index: number) => {
         arr.remove(field, index);
+        arrayUtil.remove(keyRef.current, index);
         maybeValidate();
       },
       pop: () => {
         arr.pop(field);
+        keyRef.current.pop();
         maybeValidate();
       },
       replace: (index: number, value: any) => {
         arr.replace(field, index, value);
+        keyRef.current[index] = nanoid();
         maybeValidate();
       },
     }),
     [arr, field, maybeValidate]
   );
 
-  const arrayValue = useMemo(() => value ?? [], [value]);
-
-  return [arrayValue, helpers, error] as const;
+  const valueWithKeys = useMemo(() => {
+    const result: { defaultValue: any; key: string }[] = [];
+    arrayValue.forEach((item, index) => {
+      result[index] = {
+        key: keyRef.current[index],
+        defaultValue: item,
+      };
+    });
+    return result;
+  }, [arrayValue]);
+
+  return [valueWithKeys, helpers, error] as const;
 };
 
 export type FieldArrayHelpers<Item = any> = {
@@ -122,29 +164,29 @@ export function useFieldArray<Item = any>(
   const context = useInternalFormContext(formId, "FieldArray");
 
   return useInternalFieldArray(context, name, validationBehavior) as [
-    itemDefaults: Item[],
+    items: FieldArrayItem<Item>[],
     helpers: FieldArrayHelpers,
     error: string | undefined
   ];
 }
 
-export type FieldArrayProps = {
+export type FieldArrayProps<Item> = {
   name: string;
   children: (
-    itemDefaults: any[],
-    helpers: FieldArrayHelpers,
+    items: FieldArrayItem<Item>[],
+    helpers: FieldArrayHelpers<Item>,
     error: string | undefined
   ) => React.ReactNode;
   formId?: string;
   validationBehavior?: FieldArrayValidationBehaviorOptions;
 };
 
-export const FieldArray = ({
+export function FieldArray<Item = any>({
   name,
   children,
   formId,
   validationBehavior,
-}: FieldArrayProps) => {
+}: FieldArrayProps<Item>) {
   const context = useInternalFormContext(formId, "FieldArray");
   const [value, helpers, error] = useInternalFieldArray(
     context,
@@ -152,4 +194,4 @@ export const FieldArray = ({
     validationBehavior
   );
   return <>{children(value, helpers, error)}</>;
-};
+}

package/src/server.ts

@@ -42,6 +42,9 @@ export type FormDefaults = {
   [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };
 
+// FIXME: Remove after https://github.com/egoist/tsup/issues/813 is fixed
+export type internal_FORM_DEFAULTS_FIELD = typeof FORM_DEFAULTS_FIELD;
+
 export const setFormDefaults = <DataType = any>(
   formId: string,
   defaultValues: Partial<DataType>

package/src/unreleased/formStateHooks.ts

@@ -11,7 +11,6 @@ import {
   useTouchedFields,
   useInternalIsValid,
   useFieldErrors,
-  useValidateField,
   useValidate,
   useSetFieldErrors,
   useResetFormElement,
@@ -20,6 +19,7 @@ import {
   useFormSubactionProp,
   useSubmitForm,
   useFormValues,
+  useSmartValidate,
 } from "../internal/hooks";
 import {
   FieldErrors,
@@ -133,7 +133,7 @@ export type FormHelpers = {
 export const useFormHelpers = (formId?: string): FormHelpers => {
   const formContext = useInternalFormContext(formId, "useFormHelpers");
   const setTouched = useSetTouched(formContext);
-  const validateField = useValidateField(formContext.formId);
+  const validateField = useSmartValidate(formContext.formId);
   const validate = useValidate(formContext.formId);
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
@@ -143,7 +143,12 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
   return useMemo(
     () => ({
       setTouched,
-      validateField,
+      validateField: async (fieldName: string) => {
+        const res = await validateField({
+          alwaysIncludeErrorsFromFields: [fieldName],
+        });
+        return res.error?.fieldErrors[fieldName] ?? null;
+      },
       clearError,
       validate,
       clearAllErrors: () => setFieldErrors({}),

package/src/validation/types.ts

@@ -44,7 +44,10 @@ export type Validator<DataType> = {
   validate: (
     unvalidatedData: GenericObject
   ) => Promise<ValidationResult<DataType>>;
-  validateField: (
+  /**
+   * @deprecated Will be removed in a future version of remix-validated-form
+   */
+  validateField?: (
     unvalidatedData: GenericObject,
     field: string
   ) => Promise<ValidateFieldResult>;