remix-validated-form 4.6.4 → 4.6.6

package/dist/index.cjs.js

@@ -0,0 +1,1928 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from2, except, desc) => {
+  if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+    for (let key of __getOwnPropNames(from2))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc(from2, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FieldArray: () => FieldArray,
+  ValidatedForm: () => ValidatedForm,
+  createValidator: () => createValidator,
+  setFormDefaults: () => setFormDefaults,
+  useControlField: () => useControlField,
+  useField: () => useField,
+  useFieldArray: () => useFieldArray,
+  useFormContext: () => useFormContext,
+  useIsSubmitting: () => useIsSubmitting,
+  useIsValid: () => useIsValid,
+  useUpdateControlledField: () => useUpdateControlledField,
+  validationError: () => validationError
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hooks.ts
+var import_react5 = require("react");
+
+// src/internal/getInputProps.ts
+var R = __toESM(require("remeda"));
+
+// src/internal/logic/getCheckboxChecked.ts
+var getCheckboxChecked = (checkboxValue = "on", newValue) => {
+  if (Array.isArray(newValue))
+    return newValue.some((val) => val === true || val === checkboxValue);
+  if (typeof newValue === "boolean")
+    return newValue;
+  if (typeof newValue === "string")
+    return newValue === checkboxValue;
+  return void 0;
+};
+
+// src/internal/logic/getRadioChecked.ts
+var getRadioChecked = (radioValue = "on", newValue) => {
+  if (typeof newValue === "string")
+    return newValue === radioValue;
+  return void 0;
+};
+if (void 0) {
+  const { it, expect } = void 0;
+  it("getRadioChecked", () => {
+    expect(getRadioChecked("on", "on")).toBe(true);
+    expect(getRadioChecked("on", void 0)).toBe(void 0);
+    expect(getRadioChecked("trueValue", void 0)).toBe(void 0);
+    expect(getRadioChecked("trueValue", "bob")).toBe(false);
+    expect(getRadioChecked("trueValue", "trueValue")).toBe(true);
+  });
+}
+
+// src/internal/getInputProps.ts
+var defaultValidationBehavior = {
+  initial: "onBlur",
+  whenTouched: "onChange",
+  whenSubmitted: "onChange"
+};
+var createGetInputProps = ({
+  clearError,
+  validate,
+  defaultValue,
+  touched,
+  setTouched,
+  hasBeenSubmitted,
+  validationBehavior,
+  name
+}) => {
+  const validationBehaviors = {
+    ...defaultValidationBehavior,
+    ...validationBehavior
+  };
+  return (props = {}) => {
+    const behavior = hasBeenSubmitted ? validationBehaviors.whenSubmitted : touched ? validationBehaviors.whenTouched : validationBehaviors.initial;
+    const inputProps = {
+      ...props,
+      onChange: (...args) => {
+        var _a;
+        if (behavior === "onChange")
+          validate();
+        else
+          clearError();
+        return (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, ...args);
+      },
+      onBlur: (...args) => {
+        var _a;
+        if (behavior === "onBlur")
+          validate();
+        setTouched(true);
+        return (_a = props == null ? void 0 : props.onBlur) == null ? void 0 : _a.call(props, ...args);
+      },
+      name
+    };
+    if (props.type === "checkbox") {
+      inputProps.defaultChecked = getCheckboxChecked(props.value, defaultValue);
+    } else if (props.type === "radio") {
+      inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
+    } else if (props.value === void 0) {
+      inputProps.defaultValue = defaultValue;
+    }
+    return R.omitBy(inputProps, (value) => value === void 0);
+  };
+};
+
+// src/internal/hooks.ts
+var import_react2 = require("@remix-run/react");
+var import_react3 = require("react");
+
+// ../set-get/src/stringToPathArray.ts
+var stringToPathArray = (path) => {
+  if (path.length === 0)
+    return [];
+  const match = path.match(/^\[(.+?)\](.*)$/) || path.match(/^\.?([^\.\[\]]+)(.*)$/);
+  if (match) {
+    const [_, key, rest] = match;
+    return [/^\d+$/.test(key) ? Number(key) : key, ...stringToPathArray(rest)];
+  }
+  return [path];
+};
+
+// ../set-get/src/setPath.ts
+function setPath(object, path, defaultValue) {
+  return _setPathNormalized(object, stringToPathArray(path), defaultValue);
+}
+function _setPathNormalized(object, path, value) {
+  var _a;
+  const leadingSegments = path.slice(0, -1);
+  const lastSegment = path[path.length - 1];
+  let obj = object;
+  for (let i = 0; i < leadingSegments.length; i++) {
+    const segment = leadingSegments[i];
+    if (obj[segment] === void 0) {
+      const nextSegment = (_a = leadingSegments[i + 1]) != null ? _a : lastSegment;
+      obj[segment] = typeof nextSegment === "number" ? [] : {};
+    }
+    obj = obj[segment];
+  }
+  obj[lastSegment] = value;
+  return object;
+}
+
+// ../set-get/src/getPath.ts
+var R2 = __toESM(require("remeda"));
+var getPath = (object, path) => R2.pathOr(object, stringToPathArray(path), void 0);
+
+// src/internal/hooks.ts
+var import_tiny_invariant3 = __toESM(require("tiny-invariant"));
+
+// src/internal/constants.ts
+var FORM_ID_FIELD = "__rvfInternalFormId";
+var FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults";
+var formDefaultValuesKey = (formId) => `${FORM_DEFAULTS_FIELD}_${formId}`;
+
+// src/internal/formContext.ts
+var import_react = require("react");
+var InternalFormContext = (0, import_react.createContext)(null);
+
+// src/internal/hydratable.ts
+var serverData = (data) => ({
+  hydrateTo: () => data,
+  map: (fn) => serverData(fn(data))
+});
+var hydratedData = () => ({
+  hydrateTo: (hydratedData2) => hydratedData2,
+  map: () => hydratedData()
+});
+var from = (data, hydrated) => hydrated ? hydratedData() : serverData(data);
+var hydratable = {
+  serverData,
+  hydratedData,
+  from
+};
+
+// src/internal/state/createFormStore.ts
+var import_tiny_invariant2 = __toESM(require("tiny-invariant"));
+var import_zustand = __toESM(require("zustand"));
+var import_immer = require("zustand/middleware/immer");
+
+// src/internal/logic/requestSubmit.ts
+var requestSubmit = (element, submitter) => {
+  if (typeof Object.getPrototypeOf(element).requestSubmit === "function" && true) {
+    element.requestSubmit(submitter);
+    return;
+  }
+  if (submitter) {
+    validateSubmitter(element, submitter);
+    submitter.click();
+    return;
+  }
+  const dummySubmitter = document.createElement("input");
+  dummySubmitter.type = "submit";
+  dummySubmitter.hidden = true;
+  element.appendChild(dummySubmitter);
+  dummySubmitter.click();
+  element.removeChild(dummySubmitter);
+};
+function validateSubmitter(element, submitter) {
+  const isHtmlElement = submitter instanceof HTMLElement;
+  if (!isHtmlElement) {
+    raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
+  }
+  const hasSubmitType = "type" in submitter && submitter.type === "submit";
+  if (!hasSubmitType)
+    raise(TypeError, "The specified element is not a submit button");
+  const isForCorrectForm = "form" in submitter && submitter.form === element;
+  if (!isForCorrectForm)
+    raise(
+      DOMException,
+      "The specified element is not owned by this form element",
+      "NotFoundError"
+    );
+}
+function raise(errorConstructor, message, name) {
+  throw new errorConstructor(
+    "Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".",
+    name
+  );
+}
+if (void 0) {
+  const { it, expect } = void 0;
+  it("should validate the submitter", () => {
+    const form = document.createElement("form");
+    document.body.appendChild(form);
+    const submitter = document.createElement("input");
+    expect(() => validateSubmitter(null, null)).toThrow();
+    expect(() => validateSubmitter(form, null)).toThrow();
+    expect(() => validateSubmitter(form, submitter)).toThrow();
+    expect(
+      () => validateSubmitter(form, document.createElement("div"))
+    ).toThrow();
+    submitter.type = "submit";
+    expect(() => validateSubmitter(form, submitter)).toThrow();
+    form.appendChild(submitter);
+    expect(() => validateSubmitter(form, submitter)).not.toThrow();
+    form.removeChild(submitter);
+    expect(() => validateSubmitter(form, submitter)).toThrow();
+    document.body.appendChild(submitter);
+    form.id = "test-form";
+    submitter.setAttribute("form", "test-form");
+    expect(() => validateSubmitter(form, submitter)).not.toThrow();
+    const button = document.createElement("button");
+    button.type = "submit";
+    form.appendChild(button);
+    expect(() => validateSubmitter(form, button)).not.toThrow();
+  });
+}
+
+// src/internal/state/arrayUtil.ts
+var import_tiny_invariant = __toESM(require("tiny-invariant"));
+var getArray = (values, field) => {
+  const value = getPath(values, field);
+  if (value === void 0 || value === null) {
+    const newValue = [];
+    setPath(values, field, newValue);
+    return newValue;
+  }
+  (0, import_tiny_invariant.default)(
+    Array.isArray(value),
+    `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`
+  );
+  return value;
+};
+var 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);
+}
+var move = (array, from2, to) => {
+  const [item] = sparseSplice(array, from2, 1);
+  sparseSplice(array, to, 0, item);
+};
+var insert = (array, index, value) => {
+  sparseSplice(array, index, 0, value);
+};
+var remove = (array, index) => {
+  sparseSplice(array, index, 1);
+};
+var replace = (array, index, value) => {
+  sparseSplice(array, index, 1, value);
+};
+var 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);
+      setPath(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 = getPath(arr, key);
+    if (val !== void 0) {
+      obj[`${field}${key}`] = val;
+    }
+  }
+};
+var 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];
+};
+if (void 0) {
+  const { describe, expect, it } = void 0;
+  const countArrayItems = (arr) => {
+    let count = 0;
+    arr.forEach(() => count++);
+    return count;
+  };
+  describe("getArray", () => {
+    it("shoud get a deeply nested array that can be mutated to update the nested value", () => {
+      const values = {
+        d: [
+          { foo: "bar", baz: [true, false] },
+          { e: true, f: "hi" }
+        ]
+      };
+      const result = getArray(values, "d[0].baz");
+      const finalValues = {
+        d: [
+          { foo: "bar", baz: [true, false, true] },
+          { e: true, f: "hi" }
+        ]
+      };
+      expect(result).toEqual([true, false]);
+      result.push(true);
+      expect(values).toEqual(finalValues);
+    });
+    it("should return an empty array that can be mutated if result is null or undefined", () => {
+      const values = {};
+      const result = getArray(values, "a.foo[0].bar");
+      const finalValues = {
+        a: { foo: [{ bar: ["Bob ross"] }] }
+      };
+      expect(result).toEqual([]);
+      result.push("Bob ross");
+      expect(values).toEqual(finalValues);
+    });
+    it("should throw if the value is defined and not an array", () => {
+      const values = { foo: "foo" };
+      expect(() => getArray(values, "foo")).toThrow();
+    });
+  });
+  describe("swap", () => {
+    it("should swap two items", () => {
+      const array = [1, 2, 3];
+      swap(array, 0, 1);
+      expect(array).toEqual([2, 1, 3]);
+    });
+    it("should work for sparse arrays", () => {
+      const arr = [];
+      arr[0] = true;
+      swap(arr, 0, 2);
+      expect(countArrayItems(arr)).toEqual(1);
+      expect(0 in arr).toBe(false);
+      expect(2 in arr).toBe(true);
+      expect(arr[2]).toEqual(true);
+    });
+  });
+  describe("move", () => {
+    it("should move an item to a new index", () => {
+      const array = [1, 2, 3];
+      move(array, 0, 1);
+      expect(array).toEqual([2, 1, 3]);
+    });
+    it("should work with sparse arrays", () => {
+      const array = [1];
+      move(array, 0, 2);
+      expect(countArrayItems(array)).toEqual(1);
+      expect(array).toEqual([void 0, void 0, 1]);
+    });
+  });
+  describe("insert", () => {
+    it("should insert an item at a new index", () => {
+      const array = [1, 2, 3];
+      insert(array, 1, 4);
+      expect(array).toEqual([1, 4, 2, 3]);
+    });
+    it("should be able to insert falsey values", () => {
+      const array = [1, 2, 3];
+      insert(array, 1, null);
+      expect(array).toEqual([1, null, 2, 3]);
+    });
+    it("should handle sparse arrays", () => {
+      const array = [];
+      array[2] = true;
+      insert(array, 0, true);
+      expect(countArrayItems(array)).toEqual(2);
+      expect(array).toEqual([true, void 0, void 0, true]);
+    });
+  });
+  describe("remove", () => {
+    it("should remove an item at a given index", () => {
+      const array = [1, 2, 3];
+      remove(array, 1);
+      expect(array).toEqual([1, 3]);
+    });
+    it("should handle sparse arrays", () => {
+      const array = [];
+      array[2] = true;
+      remove(array, 0);
+      expect(countArrayItems(array)).toEqual(1);
+      expect(array).toEqual([void 0, true]);
+    });
+  });
+  describe("replace", () => {
+    it("should replace an item at a given index", () => {
+      const array = [1, 2, 3];
+      replace(array, 1, 4);
+      expect(array).toEqual([1, 4, 3]);
+    });
+    it("should handle sparse arrays", () => {
+      const array = [];
+      array[2] = true;
+      replace(array, 0, true);
+      expect(countArrayItems(array)).toEqual(2);
+      expect(array).toEqual([true, void 0, true]);
+    });
+  });
+  describe("mutateAsArray", () => {
+    it("should handle swap", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[2]": "bar",
+        otherField: "baz",
+        "otherField[0]": "something else"
+      };
+      mutateAsArray("myField", values, (arr) => {
+        swap(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0]": "bar",
+        "myField[2]": "foo",
+        otherField: "baz",
+        "otherField[0]": "something else"
+      });
+    });
+    it("should swap sparse arrays", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        otherField: "baz",
+        "otherField[0]": "something else"
+      };
+      mutateAsArray("myField", values, (arr) => {
+        swap(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[2]": "foo",
+        otherField: "baz",
+        "otherField[0]": "something else"
+      });
+    });
+    it("should handle arrays with nested values", () => {
+      const values = {
+        myField: "something",
+        "myField[0].title": "foo",
+        "myField[0].note": "bar",
+        "myField[2].title": "other",
+        "myField[2].note": "other",
+        otherField: "baz",
+        "otherField[0]": "something else"
+      };
+      mutateAsArray("myField", values, (arr) => {
+        swap(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0].title": "other",
+        "myField[0].note": "other",
+        "myField[2].title": "foo",
+        "myField[2].note": "bar",
+        otherField: "baz",
+        "otherField[0]": "something else"
+      });
+    });
+    it("should handle move", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[1]": "bar",
+        "myField[2]": "baz",
+        "otherField[0]": "something else"
+      };
+      mutateAsArray("myField", values, (arr) => {
+        move(arr, 0, 2);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0]": "bar",
+        "myField[1]": "baz",
+        "myField[2]": "foo",
+        "otherField[0]": "something else"
+      });
+    });
+    it("should not create keys for `undefined`", () => {
+      const values = {
+        "myField[0]": "foo"
+      };
+      mutateAsArray("myField", values, (arr) => {
+        arr.unshift(void 0);
+      });
+      expect(Object.keys(values)).toHaveLength(1);
+      expect(values).toEqual({
+        "myField[1]": "foo"
+      });
+    });
+    it("should handle remove", () => {
+      const values = {
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[1]": "bar",
+        "myField[2]": "baz",
+        "otherField[0]": "something else"
+      };
+      mutateAsArray("myField", values, (arr) => {
+        remove(arr, 1);
+      });
+      expect(values).toEqual({
+        myField: "something",
+        "myField[0]": "foo",
+        "myField[1]": "baz",
+        "otherField[0]": "something else"
+      });
+      expect("myField[2]" in values).toBe(false);
+    });
+  });
+  describe("getDeepArrayPaths", () => {
+    it("should return all paths recursively", () => {
+      const obj = [
+        true,
+        true,
+        [true, true],
+        { foo: true, bar: { baz: true, test: [true] } }
+      ];
+      expect(getDeepArrayPaths(obj, "myField")).toEqual([
+        "myField[0]",
+        "myField[1]",
+        "myField[2][0]",
+        "myField[2][1]",
+        "myField[3].foo",
+        "myField[3].bar.baz",
+        "myField[3].bar.test[0]"
+      ]);
+    });
+  });
+}
+
+// src/internal/state/createFormStore.ts
+var noOp = () => {
+};
+var 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
+    }
+  }
+};
+var createFormState = (set, get) => ({
+  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 ? void 0 : _a.defaultValues) != null ? _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) => {
+    if (get().formElement === formElement)
+      return;
+    set((state) => {
+      state.formElement = formElement;
+    });
+  },
+  validateField: async (field) => {
+    var _a, _b, _c;
+    const formElement = get().formElement;
+    (0, import_tiny_invariant2.default)(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+    const validator = (_a = get().formProps) == null ? void 0 : _a.validator;
+    (0, import_tiny_invariant2.default)(
+      validator,
+      "Cannot validator. This is probably a bug in remix-validated-form."
+    );
+    await ((_c = (_b = get().controlledFields).awaitValueUpdate) == null ? 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;
+    (0, import_tiny_invariant2.default)(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+    const validator = (_a = get().formProps) == null ? void 0 : _a.validator;
+    (0, import_tiny_invariant2.default)(
+      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;
+    (0, import_tiny_invariant2.default)(
+      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);
+  },
+  resetFormElement: () => {
+    var _a;
+    return (_a = get().formElement) == null ? void 0 : _a.reset();
+  },
+  controlledFields: {
+    values: {},
+    refCounts: {},
+    valueUpdatePromises: {},
+    valueUpdateResolvers: {},
+    register: (fieldName) => {
+      set((state) => {
+        var _a;
+        const current = (_a = state.controlledFields.refCounts[fieldName]) != null ? _a : 0;
+        state.controlledFields.refCounts[fieldName] = current + 1;
+      });
+    },
+    unregister: (fieldName) => {
+      if (get() === null || get() === void 0)
+        return;
+      set((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) {
+          setPath(
+            state.controlledFields.values,
+            fieldName,
+            getPath((_b = state.formProps) == null ? void 0 : _b.defaultValues, fieldName)
+          );
+          setPath(
+            state.currentDefaultValues,
+            fieldName,
+            getPath((_c = state.formProps) == null ? 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) => {
+          getArray(state.controlledFields.values, fieldName).push(item);
+          getArray(state.currentDefaultValues, fieldName).push(item);
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      swap: (fieldName, indexA, indexB) => {
+        set((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)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      move: (fieldName, from2, to) => {
+        set((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)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      insert: (fieldName, index, item) => {
+        set((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)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      remove: (fieldName, index) => {
+        set((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)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      pop: (fieldName) => {
+        set((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()
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      },
+      unshift: (fieldName, value) => {
+        set((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) => {
+        set((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)
+          );
+        });
+        get().controlledFields.kickoffValueUpdate(fieldName);
+      }
+    }
+  }
+});
+var useRootFormStore = (0, import_zustand.default)()(
+  (0, import_immer.immer)((set, get) => ({
+    forms: {},
+    form: (formId) => {
+      var _a;
+      return (_a = get().forms[formId]) != null ? _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((state2) => setter(state2.forms[formId])),
+          () => get().forms[formId]
+        );
+      });
+    }
+  }))
+);
+
+// src/internal/state/storeHooks.ts
+var useFormStore = (formId, selector) => {
+  return useRootFormStore((state) => selector(state.form(formId)));
+};
+
+// src/internal/hooks.ts
+var useInternalFormContext = (formId, hookName) => {
+  const formContext = (0, import_react3.useContext)(InternalFormContext);
+  if (formId)
+    return { formId };
+  if (formContext)
+    return formContext;
+  throw new Error(
+    `Unable to determine form for ${hookName}. Please use it inside a ValidatedForm or pass a 'formId'.`
+  );
+};
+function useErrorResponseForForm({
+  fetcher,
+  subaction,
+  formId
+}) {
+  var _a;
+  const actionData = (0, import_react2.useActionData)();
+  if (fetcher) {
+    if ((_a = fetcher.data) == null ? void 0 : _a.fieldErrors)
+      return fetcher.data;
+    return null;
+  }
+  if (!(actionData == null ? void 0 : actionData.fieldErrors))
+    return null;
+  if (typeof formId === "string" && actionData.formId)
+    return actionData.formId === formId ? actionData : null;
+  if (!subaction && !actionData.subaction || actionData.subaction === subaction)
+    return actionData;
+  return null;
+}
+var useFieldErrorsForForm = (context) => {
+  const response = useErrorResponseForForm(context);
+  const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
+  return hydratable.from(response == null ? void 0 : response.fieldErrors, hydrated);
+};
+var useDefaultValuesFromLoader = ({
+  formId
+}) => {
+  const matches = (0, import_react2.useMatches)();
+  if (typeof formId === "string") {
+    const dataKey = formDefaultValuesKey(formId);
+    const match = matches.reverse().find((match2) => match2.data && dataKey in match2.data);
+    return match == null ? void 0 : match.data[dataKey];
+  }
+  return null;
+};
+var useDefaultValuesForForm = (context) => {
+  const { formId, defaultValuesProp } = context;
+  const hydrated = useFormStore(formId, (state) => state.isHydrated);
+  const errorResponse = useErrorResponseForForm(context);
+  const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
+  if (hydrated)
+    return hydratable.hydratedData();
+  if (errorResponse == null ? void 0 : errorResponse.repopulateFields) {
+    (0, import_tiny_invariant3.default)(
+      typeof errorResponse.repopulateFields === "object",
+      "repopulateFields returned something other than an object"
+    );
+    return hydratable.serverData(errorResponse.repopulateFields);
+  }
+  if (defaultValuesProp)
+    return hydratable.serverData(defaultValuesProp);
+  return hydratable.serverData(defaultValuesFromLoader);
+};
+var useHasActiveFormSubmit = ({
+  fetcher
+}) => {
+  const transition = (0, import_react2.useTransition)();
+  const hasActiveSubmission = fetcher ? fetcher.state === "submitting" : !!transition.submission;
+  return hasActiveSubmission;
+};
+var useFieldTouched = (field, { formId }) => {
+  const touched = useFormStore(formId, (state) => state.touchedFields[field]);
+  const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
+  const setTouched = (0, import_react3.useCallback)(
+    (touched2) => setFieldTouched(field, touched2),
+    [field, setFieldTouched]
+  );
+  return [touched, setTouched];
+};
+var useFieldError = (name, context) => {
+  const fieldErrors = useFieldErrorsForForm(context);
+  const state = useFormStore(
+    context.formId,
+    (state2) => state2.fieldErrors[name]
+  );
+  return fieldErrors.map((fieldErrors2) => fieldErrors2 == null ? void 0 : fieldErrors2[name]).hydrateTo(state);
+};
+var useClearError = (context) => {
+  const { formId } = context;
+  return useFormStore(formId, (state) => state.clearFieldError);
+};
+var useCurrentDefaultValueForField = (formId, field) => useFormStore(formId, (state) => getPath(state.currentDefaultValues, field));
+var useFieldDefaultValue = (name, context) => {
+  const defaultValues = useDefaultValuesForForm(context);
+  const state = useCurrentDefaultValueForField(context.formId, name);
+  return defaultValues.map((val) => getPath(val, name)).hydrateTo(state);
+};
+var useInternalIsSubmitting = (formId) => useFormStore(formId, (state) => state.isSubmitting);
+var useInternalIsValid = (formId) => useFormStore(formId, (state) => state.isValid());
+var useInternalHasBeenSubmitted = (formId) => useFormStore(formId, (state) => state.hasBeenSubmitted);
+var useValidateField = (formId) => useFormStore(formId, (state) => state.validateField);
+var useValidate = (formId) => useFormStore(formId, (state) => state.validate);
+var noOpReceiver = () => () => {
+};
+var useRegisterReceiveFocus = (formId) => useFormStore(
+  formId,
+  (state) => {
+    var _a, _b;
+    return (_b = (_a = state.formProps) == null ? void 0 : _a.registerReceiveFocus) != null ? _b : noOpReceiver;
+  }
+);
+var defaultDefaultValues = {};
+var useSyncedDefaultValues = (formId) => useFormStore(
+  formId,
+  (state) => {
+    var _a, _b;
+    return (_b = (_a = state.formProps) == null ? void 0 : _a.defaultValues) != null ? _b : defaultDefaultValues;
+  }
+);
+var useSetTouched = ({ formId }) => useFormStore(formId, (state) => state.setTouched);
+var useTouchedFields = (formId) => useFormStore(formId, (state) => state.touchedFields);
+var useFieldErrors = (formId) => useFormStore(formId, (state) => state.fieldErrors);
+var useSetFieldErrors = (formId) => useFormStore(formId, (state) => state.setFieldErrors);
+var useResetFormElement = (formId) => useFormStore(formId, (state) => state.resetFormElement);
+var useSubmitForm = (formId) => useFormStore(formId, (state) => state.submit);
+var useFormActionProp = (formId) => useFormStore(formId, (state) => {
+  var _a;
+  return (_a = state.formProps) == null ? void 0 : _a.action;
+});
+var useFormSubactionProp = (formId) => useFormStore(formId, (state) => {
+  var _a;
+  return (_a = state.formProps) == null ? void 0 : _a.subaction;
+});
+var useFormValues = (formId) => useFormStore(formId, (state) => state.getValues);
+
+// src/internal/state/controlledFields.ts
+var import_react4 = require("react");
+var useControlledFieldValue = (context, field) => {
+  const value = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.getValue(field)
+  );
+  const isFormHydrated = useFormStore(
+    context.formId,
+    (state) => state.isHydrated
+  );
+  const defaultValue = useFieldDefaultValue(field, context);
+  return isFormHydrated ? value : defaultValue;
+};
+var useRegisterControlledField = (context, field) => {
+  const resolveUpdate = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.valueUpdateResolvers[field]
+  );
+  (0, import_react4.useEffect)(() => {
+    resolveUpdate == null ? void 0 : resolveUpdate();
+  }, [resolveUpdate]);
+  const register = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.register
+  );
+  const unregister = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.unregister
+  );
+  (0, import_react4.useEffect)(() => {
+    register(field);
+    return () => unregister(field);
+  }, [context.formId, field, register, unregister]);
+};
+var useControllableValue = (context, field) => {
+  useRegisterControlledField(context, field);
+  const setControlledFieldValue = useFormStore(
+    context.formId,
+    (state) => state.controlledFields.setValue
+  );
+  const setValue = (0, import_react4.useCallback)(
+    (value2) => setControlledFieldValue(field, value2),
+    [field, setControlledFieldValue]
+  );
+  const value = useControlledFieldValue(context, field);
+  return [value, setValue];
+};
+var useUpdateControllableValue = (formId) => {
+  const setValue = useFormStore(
+    formId,
+    (state) => state.controlledFields.setValue
+  );
+  return (0, import_react4.useCallback)(
+    (field, value) => setValue(field, value),
+    [setValue]
+  );
+};
+
+// src/hooks.ts
+var useIsSubmitting = (formId) => {
+  const formContext = useInternalFormContext(formId, "useIsSubmitting");
+  return useInternalIsSubmitting(formContext.formId);
+};
+var useIsValid = (formId) => {
+  const formContext = useInternalFormContext(formId, "useIsValid");
+  return useInternalIsValid(formContext.formId);
+};
+var useField = (name, options) => {
+  const { formId: providedFormId, handleReceiveFocus } = options != null ? options : {};
+  const formContext = useInternalFormContext(providedFormId, "useField");
+  const defaultValue = useFieldDefaultValue(name, formContext);
+  const [touched, setTouched] = useFieldTouched(name, formContext);
+  const error = useFieldError(name, formContext);
+  const clearError = useClearError(formContext);
+  const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
+  const validateField = useValidateField(formContext.formId);
+  const registerReceiveFocus = useRegisterReceiveFocus(formContext.formId);
+  (0, import_react5.useEffect)(() => {
+    if (handleReceiveFocus)
+      return registerReceiveFocus(name, handleReceiveFocus);
+  }, [handleReceiveFocus, name, registerReceiveFocus]);
+  const field = (0, import_react5.useMemo)(() => {
+    const helpers = {
+      error,
+      clearError: () => clearError(name),
+      validate: () => {
+        validateField(name);
+      },
+      defaultValue,
+      touched,
+      setTouched
+    };
+    const getInputProps = createGetInputProps({
+      ...helpers,
+      name,
+      hasBeenSubmitted,
+      validationBehavior: options == null ? void 0 : options.validationBehavior
+    });
+    return {
+      ...helpers,
+      getInputProps
+    };
+  }, [
+    error,
+    clearError,
+    defaultValue,
+    touched,
+    setTouched,
+    name,
+    hasBeenSubmitted,
+    options == null ? void 0 : options.validationBehavior,
+    validateField
+  ]);
+  return field;
+};
+var useControlField = (name, formId) => {
+  const context = useInternalFormContext(formId, "useControlField");
+  const [value, setValue] = useControllableValue(context, name);
+  return [value, setValue];
+};
+var useUpdateControlledField = (formId) => {
+  const context = useInternalFormContext(formId, "useControlField");
+  return useUpdateControllableValue(context.formId);
+};
+
+// src/server.ts
+var import_server_runtime = require("@remix-run/server-runtime");
+function validationError(error, repopulateFields, init) {
+  return (0, import_server_runtime.json)(
+    {
+      fieldErrors: error.fieldErrors,
+      subaction: error.subaction,
+      repopulateFields,
+      formId: error.formId
+    },
+    { status: 422, ...init }
+  );
+}
+var setFormDefaults = (formId, defaultValues) => ({
+  [formDefaultValuesKey(formId)]: defaultValues
+});
+
+// src/ValidatedForm.tsx
+var import_react9 = require("@remix-run/react");
+var import_react10 = require("react");
+var R4 = __toESM(require("remeda"));
+
+// src/internal/MultiValueMap.ts
+var import_react6 = require("react");
+var MultiValueMap = class {
+  constructor() {
+    this.dict = /* @__PURE__ */ new Map();
+    this.add = (key, value) => {
+      if (this.dict.has(key)) {
+        this.dict.get(key).push(value);
+      } else {
+        this.dict.set(key, [value]);
+      }
+    };
+    this.delete = (key) => {
+      this.dict.delete(key);
+    };
+    this.remove = (key, value) => {
+      if (!this.dict.has(key))
+        return;
+      const array = this.dict.get(key);
+      const index = array.indexOf(value);
+      if (index !== -1)
+        array.splice(index, 1);
+      if (array.length === 0)
+        this.dict.delete(key);
+    };
+    this.getAll = (key) => {
+      var _a;
+      return (_a = this.dict.get(key)) != null ? _a : [];
+    };
+    this.entries = () => this.dict.entries();
+    this.values = () => this.dict.values();
+    this.has = (key) => this.dict.has(key);
+  }
+};
+var useMultiValueMap = () => {
+  const ref = (0, import_react6.useRef)(null);
+  return (0, import_react6.useCallback)(() => {
+    if (ref.current)
+      return ref.current;
+    ref.current = new MultiValueMap();
+    return ref.current;
+  }, []);
+};
+
+// src/internal/submissionCallbacks.ts
+var import_react7 = require("react");
+function useSubmitComplete(isSubmitting, callback) {
+  const isPending = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
+    if (isSubmitting) {
+      isPending.current = true;
+    }
+    if (!isSubmitting && isPending.current) {
+      isPending.current = false;
+      callback();
+    }
+  });
+}
+
+// src/internal/util.ts
+var import_react8 = require("react");
+var R3 = __toESM(require("remeda"));
+var mergeRefs = (refs) => {
+  return (value) => {
+    refs.filter(Boolean).forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+};
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react8.useLayoutEffect : import_react8.useEffect;
+var useDeepEqualsMemo = (item) => {
+  const ref = (0, import_react8.useRef)(item);
+  const areEqual = ref.current === item || R3.equals(ref.current, item);
+  (0, import_react8.useEffect)(() => {
+    if (!areEqual) {
+      ref.current = item;
+    }
+  });
+  return areEqual ? ref.current : item;
+};
+
+// src/ValidatedForm.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var getDataFromForm = (el) => new FormData(el);
+function nonNull(value) {
+  return value !== null;
+}
+var focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) => {
+  var _a;
+  const namesInOrder = [...formElement.elements].map((el) => {
+    const input = el instanceof RadioNodeList ? el[0] : el;
+    if (input instanceof HTMLElement && "name" in input)
+      return input.name;
+    return null;
+  }).filter(nonNull).filter((name) => name in fieldErrors);
+  const uniqueNamesInOrder = R4.uniq(namesInOrder);
+  for (const fieldName of uniqueNamesInOrder) {
+    if (customFocusHandlers.has(fieldName)) {
+      customFocusHandlers.getAll(fieldName).forEach((handler) => {
+        handler();
+      });
+      break;
+    }
+    const elem = formElement.elements.namedItem(fieldName);
+    if (!elem)
+      continue;
+    if (elem instanceof RadioNodeList) {
+      const selectedRadio = (_a = [...elem].filter(
+        (item) => item instanceof HTMLInputElement
+      ).find((item) => item.value === elem.value)) != null ? _a : elem[0];
+      if (selectedRadio && selectedRadio instanceof HTMLInputElement) {
+        selectedRadio.focus();
+        break;
+      }
+    }
+    if (elem instanceof HTMLElement) {
+      if (elem instanceof HTMLInputElement && elem.type === "hidden") {
+        continue;
+      }
+      elem.focus();
+      break;
+    }
+  }
+};
+var useFormId = (providedId) => {
+  const [symbolId] = (0, import_react10.useState)(() => Symbol("remix-validated-form-id"));
+  return providedId != null ? providedId : symbolId;
+};
+var FormResetter = ({
+  resetAfterSubmit,
+  formRef
+}) => {
+  const isSubmitting = useIsSubmitting();
+  const isValid = useIsValid();
+  useSubmitComplete(isSubmitting, () => {
+    var _a;
+    if (isValid && resetAfterSubmit) {
+      (_a = formRef.current) == null ? void 0 : _a.reset();
+    }
+  });
+  return null;
+};
+function formEventProxy(event) {
+  let defaultPrevented = false;
+  return new Proxy(event, {
+    get: (target, prop) => {
+      if (prop === "preventDefault") {
+        return () => {
+          defaultPrevented = true;
+        };
+      }
+      if (prop === "defaultPrevented") {
+        return defaultPrevented;
+      }
+      return target[prop];
+    }
+  });
+}
+function ValidatedForm({
+  validator,
+  onSubmit,
+  children,
+  fetcher,
+  action,
+  defaultValues: unMemoizedDefaults,
+  formRef: formRefProp,
+  onReset,
+  subaction,
+  resetAfterSubmit = false,
+  disableFocusOnError,
+  method,
+  replace: replace2,
+  id,
+  ...rest
+}) {
+  var _a;
+  const formId = useFormId(id);
+  const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
+  const contextValue = (0, import_react10.useMemo)(
+    () => ({
+      formId,
+      action,
+      subaction,
+      defaultValuesProp: providedDefaultValues,
+      fetcher
+    }),
+    [action, fetcher, formId, providedDefaultValues, subaction]
+  );
+  const backendError = useErrorResponseForForm(contextValue);
+  const backendDefaultValues = useDefaultValuesFromLoader(contextValue);
+  const hasActiveSubmission = useHasActiveFormSubmit(contextValue);
+  const formRef = (0, import_react10.useRef)(null);
+  const Form = (_a = fetcher == null ? void 0 : fetcher.Form) != null ? _a : import_react9.Form;
+  const submit = (0, import_react9.useSubmit)();
+  const setFieldErrors = useSetFieldErrors(formId);
+  const setFieldError = useFormStore(formId, (state) => state.setFieldError);
+  const reset = useFormStore(formId, (state) => state.reset);
+  const startSubmit = useFormStore(formId, (state) => state.startSubmit);
+  const endSubmit = useFormStore(formId, (state) => state.endSubmit);
+  const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
+  const setFormElementInState = useFormStore(
+    formId,
+    (state) => state.setFormElement
+  );
+  const cleanupForm = useRootFormStore((state) => state.cleanupForm);
+  const registerForm = useRootFormStore((state) => state.registerForm);
+  const customFocusHandlers = useMultiValueMap();
+  const registerReceiveFocus = (0, import_react10.useCallback)(
+    (fieldName, handler) => {
+      customFocusHandlers().add(fieldName, handler);
+      return () => {
+        customFocusHandlers().remove(fieldName, handler);
+      };
+    },
+    [customFocusHandlers]
+  );
+  useIsomorphicLayoutEffect(() => {
+    registerForm(formId);
+    return () => cleanupForm(formId);
+  }, [cleanupForm, formId, registerForm]);
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    syncFormProps({
+      action,
+      defaultValues: (_a2 = providedDefaultValues != null ? providedDefaultValues : backendDefaultValues) != null ? _a2 : {},
+      subaction,
+      registerReceiveFocus,
+      validator
+    });
+  }, [
+    action,
+    providedDefaultValues,
+    registerReceiveFocus,
+    subaction,
+    syncFormProps,
+    backendDefaultValues,
+    validator
+  ]);
+  useIsomorphicLayoutEffect(() => {
+    setFormElementInState(formRef.current);
+  }, [setFormElementInState]);
+  (0, import_react10.useEffect)(() => {
+    var _a2;
+    setFieldErrors((_a2 = backendError == null ? void 0 : backendError.fieldErrors) != null ? _a2 : {});
+    if (!disableFocusOnError && (backendError == null ? void 0 : backendError.fieldErrors)) {
+      focusFirstInvalidInput(
+        backendError.fieldErrors,
+        customFocusHandlers(),
+        formRef.current
+      );
+    }
+  }, [
+    backendError == null ? void 0 : backendError.fieldErrors,
+    customFocusHandlers,
+    disableFocusOnError,
+    setFieldErrors,
+    setFieldError
+  ]);
+  useSubmitComplete(hasActiveSubmission, () => {
+    endSubmit();
+  });
+  const handleSubmit = async (e, target, nativeEvent) => {
+    startSubmit();
+    const submitter = nativeEvent.submitter;
+    const formDataToValidate = getDataFromForm(e.currentTarget);
+    if (submitter == null ? void 0 : submitter.name) {
+      formDataToValidate.append(submitter.name, submitter.value);
+    }
+    const result = await validator.validate(formDataToValidate);
+    if (result.error) {
+      setFieldErrors(result.error.fieldErrors);
+      endSubmit();
+      if (!disableFocusOnError) {
+        focusFirstInvalidInput(
+          result.error.fieldErrors,
+          customFocusHandlers(),
+          formRef.current
+        );
+      }
+    } else {
+      setFieldErrors({});
+      const eventProxy = formEventProxy(e);
+      await (onSubmit == null ? void 0 : onSubmit(result.data, eventProxy));
+      if (eventProxy.defaultPrevented) {
+        endSubmit();
+        return;
+      }
+      if (fetcher)
+        fetcher.submit(submitter || e.currentTarget);
+      else
+        submit(submitter || target, {
+          replace: replace2,
+          method: (submitter == null ? void 0 : submitter.formMethod) || method
+        });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Form,
+    {
+      ref: mergeRefs([formRef, formRefProp]),
+      ...rest,
+      id,
+      action,
+      method,
+      replace: replace2,
+      onSubmit: (e) => {
+        e.preventDefault();
+        handleSubmit(
+          e,
+          e.currentTarget,
+          e.nativeEvent
+        );
+      },
+      onReset: (event) => {
+        onReset == null ? void 0 : onReset(event);
+        if (event.defaultPrevented)
+          return;
+        reset();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormResetter, { formRef, resetAfterSubmit }),
+        subaction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }),
+        id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", value: id, name: FORM_ID_FIELD }),
+        children
+      ] }) })
+    }
+  );
+}
+
+// src/validation/createValidator.ts
+var R5 = __toESM(require("remeda"));
+
+// src/internal/flatten.ts
+var objectFromPathEntries = (entries) => {
+  const map = new MultiValueMap();
+  entries.forEach(([key, value]) => map.add(key, value));
+  return [...map.entries()].reduce(
+    (acc, [key, value]) => setPath(acc, key, value.length === 1 ? value[0] : value),
+    {}
+  );
+};
+
+// src/validation/createValidator.ts
+var preprocessFormData = (data) => {
+  if ("entries" in data && typeof data.entries === "function")
+    return objectFromPathEntries([...data.entries()]);
+  return objectFromPathEntries(Object.entries(data));
+};
+var omitInternalFields = (data) => R5.omit(data, [FORM_ID_FIELD]);
+function createValidator(validator) {
+  return {
+    validate: async (value) => {
+      const data = preprocessFormData(value);
+      const result = await validator.validate(omitInternalFields(data));
+      if (result.error) {
+        return {
+          data: void 0,
+          error: {
+            fieldErrors: result.error,
+            subaction: data.subaction,
+            formId: data[FORM_ID_FIELD]
+          },
+          submittedData: data,
+          formId: data[FORM_ID_FIELD]
+        };
+      }
+      return {
+        data: result.data,
+        error: void 0,
+        submittedData: data,
+        formId: data[FORM_ID_FIELD]
+      };
+    },
+    validateField: (data, field) => validator.validateField(preprocessFormData(data), field)
+  };
+}
+
+// src/userFacingFormContext.ts
+var import_react12 = require("react");
+
+// src/unreleased/formStateHooks.ts
+var import_react11 = require("react");
+var useFormState = (formId) => {
+  const formContext = useInternalFormContext(formId, "useFormState");
+  const isSubmitting = useInternalIsSubmitting(formContext.formId);
+  const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
+  const touchedFields = useTouchedFields(formContext.formId);
+  const isValid = useInternalIsValid(formContext.formId);
+  const action = useFormActionProp(formContext.formId);
+  const subaction = useFormSubactionProp(formContext.formId);
+  const syncedDefaultValues = useSyncedDefaultValues(formContext.formId);
+  const defaultValuesToUse = useDefaultValuesForForm(formContext);
+  const hydratedDefaultValues = defaultValuesToUse.hydrateTo(syncedDefaultValues);
+  const fieldErrorsFromState = useFieldErrors(formContext.formId);
+  const fieldErrorsToUse = useFieldErrorsForForm(formContext);
+  const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
+  return (0, import_react11.useMemo)(
+    () => ({
+      action,
+      subaction,
+      defaultValues: hydratedDefaultValues,
+      fieldErrors: hydratedFieldErrors != null ? hydratedFieldErrors : {},
+      hasBeenSubmitted,
+      isSubmitting,
+      touchedFields,
+      isValid
+    }),
+    [
+      action,
+      hasBeenSubmitted,
+      hydratedDefaultValues,
+      hydratedFieldErrors,
+      isSubmitting,
+      isValid,
+      subaction,
+      touchedFields
+    ]
+  );
+};
+var useFormHelpers = (formId) => {
+  const formContext = useInternalFormContext(formId, "useFormHelpers");
+  const setTouched = useSetTouched(formContext);
+  const validateField = useValidateField(formContext.formId);
+  const validate = useValidate(formContext.formId);
+  const clearError = useClearError(formContext);
+  const setFieldErrors = useSetFieldErrors(formContext.formId);
+  const reset = useResetFormElement(formContext.formId);
+  const submit = useSubmitForm(formContext.formId);
+  const getValues = useFormValues(formContext.formId);
+  return (0, import_react11.useMemo)(
+    () => ({
+      setTouched,
+      validateField,
+      clearError,
+      validate,
+      clearAllErrors: () => setFieldErrors({}),
+      reset,
+      submit,
+      getValues
+    }),
+    [
+      clearError,
+      reset,
+      setFieldErrors,
+      setTouched,
+      submit,
+      validate,
+      validateField,
+      getValues
+    ]
+  );
+};
+
+// src/userFacingFormContext.ts
+var useFormContext = (formId) => {
+  const context = useInternalFormContext(formId, "useFormContext");
+  const state = useFormState(formId);
+  const {
+    clearError: internalClearError,
+    setTouched,
+    validateField,
+    clearAllErrors,
+    validate,
+    reset,
+    submit,
+    getValues
+  } = useFormHelpers(formId);
+  const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
+  const clearError = (0, import_react12.useCallback)(
+    (...names) => {
+      names.forEach((name) => {
+        internalClearError(name);
+      });
+    },
+    [internalClearError]
+  );
+  return (0, import_react12.useMemo)(
+    () => ({
+      ...state,
+      setFieldTouched: setTouched,
+      validateField,
+      clearError,
+      registerReceiveFocus,
+      clearAllErrors,
+      validate,
+      reset,
+      submit,
+      getValues
+    }),
+    [
+      clearAllErrors,
+      clearError,
+      registerReceiveFocus,
+      reset,
+      setTouched,
+      state,
+      submit,
+      validate,
+      validateField,
+      getValues
+    ]
+  );
+};
+
+// src/internal/state/fieldArray.tsx
+var import_react13 = require("react");
+var import_react14 = require("react");
+var import_tiny_invariant4 = __toESM(require("tiny-invariant"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var 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 = (0, import_react14.useCallback)(() => {
+    if (behavior === "onChange") {
+      validateField(field);
+    }
+  }, [behavior, field, validateField]);
+  (0, import_tiny_invariant4.default)(
+    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 = (0, import_react13.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 = (0, import_react13.useMemo)(() => value != null ? value : [], [value]);
+  return [arrayValue, helpers, error];
+};
+function useFieldArray(name, { formId, validationBehavior } = {}) {
+  const context = useInternalFormContext(formId, "FieldArray");
+  return useInternalFieldArray(context, name, validationBehavior);
+}
+var FieldArray = ({
+  name,
+  children,
+  formId,
+  validationBehavior
+}) => {
+  const context = useInternalFormContext(formId, "FieldArray");
+  const [value, helpers, error] = useInternalFieldArray(
+    context,
+    name,
+    validationBehavior
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: children(value, helpers, error) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FieldArray,
+  ValidatedForm,
+  createValidator,
+  setFormDefaults,
+  useControlField,
+  useField,
+  useFieldArray,
+  useFormContext,
+  useIsSubmitting,
+  useIsValid,
+  useUpdateControlledField,
+  validationError
+});
+//# sourceMappingURL=index.cjs.js.map