remix-validated-form 4.5.2 → 4.6.0-beta.0

package/dist/remix-validated-form.es.js

@@ -31,7 +31,6 @@ var __objRest = (source, exclude) => {
 };
 import React, { createContext, useDebugValue, useContext, useCallback, useEffect, useMemo, useRef, useLayoutEffect, useState } from "react";
 import { useActionData, useMatches, useTransition, Form, useSubmit } from "@remix-run/react";
-import { json } from "@remix-run/server-runtime";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function listCacheClear$1() {
   this.__data__ = [];
@@ -1408,14 +1407,19 @@ const hydratable = {
   hydratedData,
   from
 };
+var baseSet = _baseSet;
+function set(object, path, value) {
+  return object == null ? object : baseSet(object, path, value);
+}
+var set_1 = set;
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
-  const setState = (partial, replace) => {
+  const setState = (partial, replace2) => {
     const nextState = typeof partial === "function" ? partial(state) : partial;
     if (nextState !== state) {
       const previousState = state;
-      state = replace ? nextState : Object.assign({}, state, nextState);
+      state = replace2 ? nextState : Object.assign({}, state, nextState);
       listeners.forEach((listener) => listener(state, previousState));
     }
   };
@@ -1900,80 +1904,88 @@ an.applyPatches.bind(an);
 an.createDraft.bind(an);
 an.finishDraft.bind(an);
 const immerImpl = (initializer) => (set2, get2, store) => {
-  store.setState = (updater, replace, ...a2) => {
+  store.setState = (updater, replace2, ...a2) => {
     const nextState = typeof updater === "function" ? fn(updater) : updater;
-    return set2(nextState, replace, ...a2);
+    return set2(nextState, replace2, ...a2);
   };
   return initializer(store.setState, get2, store);
 };
 const immer = immerImpl;
-const useControlledFieldStore = create$1()(immer((set2, get2) => ({
-  forms: {},
-  register: (formId, field) => set2((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: void 0,
-        hydrated: false,
-        valueUpdatePromise: void 0,
-        resolveValueUpdate: void 0
-      };
+const getArray = (values, field) => {
+  const value = get_1(values, field);
+  if (value === void 0 || value === null) {
+    const newValue = [];
+    set_1(values, field, newValue);
+    return newValue;
+  }
+  invariant(Array.isArray(value), `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`);
+  return value;
+};
+const swap = (array, indexA, indexB) => {
+  const itemA = array[indexA];
+  const itemB = array[indexB];
+  const hasItemA = indexA in array;
+  const hasItemB = indexB in array;
+  if (hasItemA) {
+    array[indexB] = itemA;
+  } else {
+    delete array[indexB];
+  }
+  if (hasItemB) {
+    array[indexA] = itemB;
+  } else {
+    delete array[indexA];
+  }
+};
+function sparseSplice(array, start, deleteCount, item) {
+  if (array.length < start && item) {
+    array.length = start;
+  }
+  if (arguments.length === 4)
+    return array.splice(start, deleteCount, item);
+  return array.splice(start, deleteCount);
+}
+const move = (array, from2, to) => {
+  const [item] = sparseSplice(array, from2, 1);
+  sparseSplice(array, to, 0, item);
+};
+const insert = (array, index, value) => {
+  sparseSplice(array, index, 0, value);
+};
+const remove = (array, index) => {
+  sparseSplice(array, index, 1);
+};
+const replace = (array, index, value) => {
+  sparseSplice(array, index, 1, value);
+};
+const mutateAsArray = (field, obj, mutate) => {
+  const beforeKeys = /* @__PURE__ */ new Set();
+  const arr = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (key.startsWith(field) && key !== field) {
+      beforeKeys.add(key);
     }
-  }),
-  unregister: (formId, field) => set2((state) => {
-    var _a;
-    const formState = (_a = state.forms) == null ? void 0 : _a[formId];
-    const fieldState = formState == null ? 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 = get2().forms) == null ? void 0 : _a[formId]) == null ? void 0 : _b[field];
-  },
-  setValue: (formId, field, value) => set2((state) => {
-    var _a, _b;
-    const fieldState = (_b = (_a = state.forms) == null ? void 0 : _a[formId]) == null ? 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) => set2((state) => {
-    var _a;
-    const fieldState = (_a = state.forms[formId]) == null ? void 0 : _a[field];
-    if (!fieldState)
-      return;
-    fieldState.value = defaultValue;
-    fieldState.defaultValue = defaultValue;
-    fieldState.hydrated = true;
-  }),
-  awaitValueUpdate: async (formId, field) => {
-    var _a;
-    await ((_a = get2().getField(formId, field)) == null ? void 0 : _a.valueUpdatePromise);
-  },
-  reset: (formId) => set2((state) => {
-    const formState = state.forms[formId];
-    if (!formState)
-      return;
-    Object.values(formState).forEach((field) => {
-      if (!field)
-        return;
-      field.value = field.defaultValue;
-    });
-  })
-})));
+    set_1(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 = get_1(arr, key);
+    obj[`${field}${key}`] = val;
+  }
+};
+const getDeepArrayPaths = (obj, basePath = "") => {
+  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];
+};
 const noOp = () => {
 };
 const defaultFormState = {
@@ -1990,9 +2002,9 @@ const defaultFormState = {
   setFieldError: noOp,
   setFieldErrors: noOp,
   clearFieldError: noOp,
+  currentDefaultValues: {},
   reset: () => noOp,
   syncFormProps: noOp,
-  setHydrated: noOp,
   setFormElement: noOp,
   validateField: async () => null,
   validate: async () => {
@@ -2002,15 +2014,40 @@ const defaultFormState = {
     throw new Error("Submit called before form was initialized.");
   },
   resetFormElement: noOp,
-  getValues: () => new FormData()
+  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 = (formId, set2, get2) => ({
+const createFormState = (set2, get2) => ({
   isHydrated: false,
   isSubmitting: false,
   hasBeenSubmitted: false,
   touchedFields: {},
   fieldErrors: {},
   formElement: null,
+  currentDefaultValues: {},
   isValid: () => Object.keys(get2().fieldErrors).length === 0,
   startSubmit: () => set2((state) => {
     state.isSubmitting = true;
@@ -2032,17 +2069,22 @@ const createFormState = (formId, set2, get2) => ({
     delete state.fieldErrors[fieldName];
   }),
   reset: () => set2((state) => {
+    var _a, _b;
     state.fieldErrors = {};
     state.touchedFields = {};
     state.hasBeenSubmitted = false;
+    const nextDefaults = (_b = (_a = state.formProps) == null ? void 0 : _a.defaultValues) != null ? _b : {};
+    state.controlledFields.values = nextDefaults;
+    state.currentDefaultValues = nextDefaults;
   }),
   syncFormProps: (props) => set2((state) => {
+    if (!state.isHydrated) {
+      state.controlledFields.values = props.defaultValues;
+      state.currentDefaultValues = props.defaultValues;
+    }
     state.formProps = props;
     state.isHydrated = true;
   }),
-  setHydrated: () => set2((state) => {
-    state.isHydrated = true;
-  }),
   setFormElement: (formElement) => {
     if (get2().formElement === formElement)
       return;
@@ -2056,7 +2098,7 @@ const createFormState = (formId, set2, get2) => ({
     invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
     const validator = (_a = get2().formProps) == null ? void 0 : _a.validator;
     invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
-    await ((_c = (_b = useControlledFieldStore.getState()).awaitValueUpdate) == null ? void 0 : _c.call(_b, formId, field));
+    await ((_c = (_b = get2().controlledFields).awaitValueUpdate) == null ? void 0 : _c.call(_b, field));
     const { error } = await validator.validateField(new FormData(formElement), field);
     if (error) {
       get2().setFieldError(field, error);
@@ -2080,16 +2122,139 @@ const createFormState = (formId, set2, get2) => ({
   submit: () => {
     const formElement = get2().formElement;
     invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
-    formElement.submit();
+    formElement.requestSubmit();
   },
   getValues: () => {
-    const formElement = get2().formElement;
-    invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
-    return new FormData(formElement);
+    var _a;
+    return new FormData((_a = get2().formElement) != null ? _a : void 0);
   },
   resetFormElement: () => {
     var _a;
     return (_a = get2().formElement) == null ? void 0 : _a.reset();
+  },
+  controlledFields: {
+    values: {},
+    refCounts: {},
+    valueUpdatePromises: {},
+    valueUpdateResolvers: {},
+    register: (fieldName) => {
+      set2((state) => {
+        var _a;
+        const current = (_a = state.controlledFields.refCounts[fieldName]) != null ? _a : 0;
+        state.controlledFields.refCounts[fieldName] = current + 1;
+      });
+    },
+    unregister: (fieldName) => {
+      if (get2() === null || get2() === void 0)
+        return;
+      set2((state) => {
+        var _a, _b, _c;
+        const current = (_a = state.controlledFields.refCounts[fieldName]) != null ? _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);
+        if (!isNested) {
+          set_1(state.controlledFields.values, fieldName, get_1((_b = state.formProps) == null ? void 0 : _b.defaultValues, fieldName));
+          set_1(state.currentDefaultValues, fieldName, get_1((_c = state.formProps) == null ? void 0 : _c.defaultValues, fieldName));
+        }
+        delete state.controlledFields.refCounts[fieldName];
+      });
+    },
+    getValue: (fieldName) => get_1(get2().controlledFields.values, fieldName),
+    setValue: (fieldName, value) => {
+      set2((state) => {
+        set_1(state.controlledFields.values, fieldName, value);
+      });
+      get2().controlledFields.kickoffValueUpdate(fieldName);
+    },
+    kickoffValueUpdate: (fieldName) => {
+      const clear = () => set2((state) => {
+        delete state.controlledFields.valueUpdateResolvers[fieldName];
+        delete state.controlledFields.valueUpdatePromises[fieldName];
+      });
+      set2((state) => {
+        const promise = new Promise((resolve) => {
+          state.controlledFields.valueUpdateResolvers[fieldName] = resolve;
+        }).then(clear);
+        state.controlledFields.valueUpdatePromises[fieldName] = promise;
+      });
+    },
+    awaitValueUpdate: async (fieldName) => {
+      await get2().controlledFields.valueUpdatePromises[fieldName];
+    },
+    array: {
+      push: (fieldName, item) => {
+        set2((state) => {
+          getArray(state.controlledFields.values, fieldName).push(item);
+          getArray(state.currentDefaultValues, fieldName).push(item);
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      swap: (fieldName, indexA, indexB) => {
+        set2((state) => {
+          swap(getArray(state.controlledFields.values, fieldName), indexA, indexB);
+          swap(getArray(state.currentDefaultValues, fieldName), indexA, indexB);
+          mutateAsArray(fieldName, state.touchedFields, (array) => swap(array, indexA, indexB));
+          mutateAsArray(fieldName, state.fieldErrors, (array) => swap(array, indexA, indexB));
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      move: (fieldName, from2, to) => {
+        set2((state) => {
+          move(getArray(state.controlledFields.values, fieldName), from2, to);
+          move(getArray(state.currentDefaultValues, fieldName), from2, to);
+          mutateAsArray(fieldName, state.touchedFields, (array) => move(array, from2, to));
+          mutateAsArray(fieldName, state.fieldErrors, (array) => move(array, from2, to));
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      insert: (fieldName, index, item) => {
+        set2((state) => {
+          insert(getArray(state.controlledFields.values, fieldName), index, item);
+          insert(getArray(state.currentDefaultValues, fieldName), index, item);
+          mutateAsArray(fieldName, state.touchedFields, (array) => insert(array, index, false));
+          mutateAsArray(fieldName, state.fieldErrors, (array) => insert(array, index, void 0));
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      remove: (fieldName, index) => {
+        set2((state) => {
+          remove(getArray(state.controlledFields.values, fieldName), index);
+          remove(getArray(state.currentDefaultValues, fieldName), index);
+          mutateAsArray(fieldName, state.touchedFields, (array) => remove(array, index));
+          mutateAsArray(fieldName, state.fieldErrors, (array) => remove(array, index));
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      pop: (fieldName) => {
+        set2((state) => {
+          getArray(state.controlledFields.values, fieldName).pop();
+          getArray(state.currentDefaultValues, fieldName).pop();
+          mutateAsArray(fieldName, state.touchedFields, (array) => array.pop());
+          mutateAsArray(fieldName, state.fieldErrors, (array) => array.pop());
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      unshift: (fieldName, value) => {
+        set2((state) => {
+          getArray(state.controlledFields.values, fieldName).unshift(value);
+          getArray(state.currentDefaultValues, fieldName).unshift(value);
+          mutateAsArray(fieldName, state.touchedFields, (array) => array.unshift(false));
+          mutateAsArray(fieldName, state.fieldErrors, (array) => array.unshift(void 0));
+        });
+      },
+      replace: (fieldName, index, item) => {
+        set2((state) => {
+          replace(getArray(state.controlledFields.values, fieldName), index, item);
+          replace(getArray(state.currentDefaultValues, fieldName), index, item);
+          mutateAsArray(fieldName, state.touchedFields, (array) => replace(array, index, item));
+          mutateAsArray(fieldName, state.fieldErrors, (array) => replace(array, index, item));
+        });
+        get2().controlledFields.kickoffValueUpdate(fieldName);
+      }
+    }
   }
 });
 const useRootFormStore = create$1()(immer((set2, get2) => ({
@@ -2107,7 +2272,7 @@ const useRootFormStore = create$1()(immer((set2, get2) => ({
     if (get2().forms[formId])
       return;
     set2((state) => {
-      state.forms[formId] = createFormState(formId, (setter) => set2((state2) => setter(state2.forms[formId])), () => get2().forms[formId]);
+      state.forms[formId] = createFormState((setter) => set2((state2) => setter(state2.forms[formId])), () => get2().forms[formId]);
     });
   }
 })));
@@ -2195,10 +2360,11 @@ const useClearError = (context) => {
   const { formId } = context;
   return useFormStore(formId, (state) => state.clearFieldError);
 };
+const useCurrentDefaultValueForField = (formId, field) => useFormStore(formId, (state) => get_1(state.currentDefaultValues, field));
 const useFieldDefaultValue = (name, context) => {
   const defaultValues = useDefaultValuesForForm(context);
-  const state = useSyncedDefaultValues(context.formId);
-  return defaultValues.map((val) => get_1(val, name)).hydrateTo(get_1(state, name));
+  const state = useCurrentDefaultValueForField(context.formId, name);
+  return defaultValues.map((val) => get_1(val, name)).hydrateTo(state);
 };
 const useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
 const useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());
@@ -2232,53 +2398,33 @@ const useFormSubactionProp = (formId) => useFormStore(formId, (state) => {
 });
 const useFormValues = (formId) => useFormStore(formId, (state) => state.getValues);
 const useControlledFieldValue = (context, field) => {
-  const value = useControlledFieldStore((state) => {
-    var _a;
-    return (_a = state.getField(context.formId, field)) == null ? void 0 : _a.value;
-  });
+  const value = useFormStore(context.formId, (state) => state.controlledFields.getValue(field));
   const isFormHydrated = useFormStore(context.formId, (state) => state.isHydrated);
   const defaultValue = useFieldDefaultValue(field, context);
-  const isFieldHydrated = useControlledFieldStore((state) => {
-    var _a, _b;
-    return (_b = (_a = state.getField(context.formId, field)) == null ? void 0 : _a.hydrated) != null ? _b : false;
-  });
-  const hydrateWithDefault = useControlledFieldStore((state) => state.hydrateWithDefault);
-  useEffect(() => {
-    if (isFormHydrated && !isFieldHydrated) {
-      hydrateWithDefault(context.formId, field, defaultValue);
-    }
-  }, [
-    context.formId,
-    defaultValue,
-    field,
-    hydrateWithDefault,
-    isFieldHydrated,
-    isFormHydrated
-  ]);
-  return isFieldHydrated ? value : defaultValue;
+  return isFormHydrated ? value : defaultValue;
 };
-const useControllableValue = (context, field) => {
-  const resolveUpdate = useControlledFieldStore((state) => {
-    var _a;
-    return (_a = state.getField(context.formId, field)) == null ? void 0 : _a.resolveValueUpdate;
-  });
+const useRegisterControlledField = (context, field) => {
+  const resolveUpdate = useFormStore(context.formId, (state) => state.controlledFields.valueUpdateResolvers[field]);
   useEffect(() => {
     resolveUpdate == null ? void 0 : resolveUpdate();
   }, [resolveUpdate]);
-  const register = useControlledFieldStore((state) => state.register);
-  const unregister = useControlledFieldStore((state) => state.unregister);
+  const register = useFormStore(context.formId, (state) => state.controlledFields.register);
+  const unregister = useFormStore(context.formId, (state) => state.controlledFields.unregister);
   useEffect(() => {
-    register(context.formId, field);
-    return () => unregister(context.formId, field);
+    register(field);
+    return () => unregister(field);
   }, [context.formId, field, register, unregister]);
-  const setControlledFieldValue = useControlledFieldStore((state) => state.setValue);
-  const setValue = useCallback((value2) => setControlledFieldValue(context.formId, field, value2), [context.formId, field, setControlledFieldValue]);
+};
+const useControllableValue = (context, field) => {
+  useRegisterControlledField(context, field);
+  const setControlledFieldValue = useFormStore(context.formId, (state) => state.controlledFields.setValue);
+  const setValue = useCallback((value2) => setControlledFieldValue(field, value2), [field, setControlledFieldValue]);
   const value = useControlledFieldValue(context, field);
   return [value, setValue];
 };
 const useUpdateControllableValue = (formId) => {
-  const setValue = useControlledFieldStore((state) => state.setValue);
-  return useCallback((field, value) => setValue(formId, field, value), [formId, setValue]);
+  const setValue = useFormStore(formId, (state) => state.controlledFields.setValue);
+  return useCallback((field, value) => setValue(field, value), [setValue]);
 };
 const useIsSubmitting = (formId) => {
   const formContext = useInternalFormContext(formId, "useIsSubmitting");
@@ -2343,6 +2489,28 @@ const useUpdateControlledField = (formId) => {
   const context = useInternalFormContext(formId, "useControlField");
   return useUpdateControllableValue(context.formId);
 };
+/**
+ * @remix-run/server-runtime v1.6.5
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+const json = (data, init = {}) => {
+  let responseInit = typeof init === "number" ? {
+    status: init
+  } : init;
+  let headers = new Headers(responseInit.headers);
+  if (!headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json; charset=utf-8");
+  }
+  return new Response(JSON.stringify(data), __spreadProps(__spreadValues({}, responseInit), {
+    headers
+  }));
+};
 function validationError(error, repopulateFields, init) {
   return json({
     fieldErrors: error.fieldErrors,
@@ -2623,7 +2791,7 @@ function ValidatedForm(_a) {
     resetAfterSubmit = false,
     disableFocusOnError,
     method,
-    replace,
+    replace: replace2,
     id
   } = _b, rest = __objRest(_b, [
     "validator",
@@ -2660,7 +2828,6 @@ function ValidatedForm(_a) {
   const setFieldErrors = useSetFieldErrors(formId);
   const setFieldError = useFormStore(formId, (state) => state.setFieldError);
   const reset = useFormStore(formId, (state) => state.reset);
-  const resetControlledFields = useControlledFieldStore((state) => state.reset);
   const startSubmit = useFormStore(formId, (state) => state.startSubmit);
   const endSubmit = useFormStore(formId, (state) => state.endSubmit);
   const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
@@ -2726,7 +2893,7 @@ function ValidatedForm(_a) {
       if (fetcher)
         fetcher.submit(submitter || e2.currentTarget);
       else
-        submit(submitter || target, { replace });
+        submit(submitter || target, { replace: replace2 });
     }
   };
   return /* @__PURE__ */ React.createElement(Form$1, __spreadProps(__spreadValues({
@@ -2735,7 +2902,7 @@ function ValidatedForm(_a) {
     id,
     action,
     method,
-    replace,
+    replace: replace2,
     onSubmit: (e2) => {
       e2.preventDefault();
       handleSubmit(e2, e2.currentTarget, e2.nativeEvent);
@@ -2745,7 +2912,6 @@ function ValidatedForm(_a) {
       if (event.defaultPrevented)
         return;
       reset();
-      resetControlledFields(formId);
     }
   }), /* @__PURE__ */ React.createElement(InternalFormContext.Provider, {
     value: contextValue
@@ -2762,11 +2928,6 @@ function ValidatedForm(_a) {
     name: FORM_ID_FIELD
   }), children)));
 }
-var baseSet = _baseSet;
-function set(object, path, value) {
-  return object == null ? object : baseSet(object, path, value);
-}
-var set_1 = set;
 const objectFromPathEntries = (entries) => {
   const map = new MultiValueMap();
   entries.forEach(([key, value]) => map.add(key, value));
@@ -2910,5 +3071,74 @@ const useFormContext = (formId) => {
     getValues
   ]);
 };
-export { ValidatedForm, createValidator, setFormDefaults, useControlField, useField, useFormContext, useIsSubmitting, useIsValid, useUpdateControlledField, validationError };
+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 = __spreadValues({
+    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 === void 0 || 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: (from2, to) => {
+      arr.move(field, from2, to);
+      maybeValidate();
+    },
+    insert: (index, value2) => {
+      arr.insert(field, index, value2);
+      maybeValidate();
+    },
+    unshift: (value2) => {
+      arr.unshift(field, value2);
+      maybeValidate();
+    },
+    remove: (index) => {
+      arr.remove(field, index);
+      maybeValidate();
+    },
+    pop: () => {
+      arr.pop(field);
+      maybeValidate();
+    },
+    replace: (index, value2) => {
+      arr.replace(field, index, value2);
+      maybeValidate();
+    }
+  }), [arr, field, maybeValidate]);
+  const arrayValue = useMemo(() => value != null ? value : [], [value]);
+  return [arrayValue, helpers, error];
+};
+function useFieldArray(name, { formId, validationBehavior } = {}) {
+  const context = useInternalFormContext(formId, "FieldArray");
+  return useInternalFieldArray(context, name, validationBehavior);
+}
+const FieldArray = ({
+  name,
+  children,
+  formId,
+  validationBehavior
+}) => {
+  const context = useInternalFormContext(formId, "FieldArray");
+  const [value, helpers, error] = useInternalFieldArray(context, name, validationBehavior);
+  return children(value, helpers, error);
+};
+export { FieldArray, ValidatedForm, createValidator, setFormDefaults, useControlField, useField, useFieldArray, useFormContext, useIsSubmitting, useIsValid, useUpdateControlledField, validationError };
 //# sourceMappingURL=remix-validated-form.es.js.map