react-f0rm 1.3.0 → 1.4.0

package/dist/index.umd.js

@@ -309,6 +309,15 @@
   function isPromise(value) {
     return value && typeof value.then === "function";
   }
+  function extractEventValue(e, options) {
+    const target = e?.target;
+    if (!target) return e;
+    if (target.type === "file") return target.files;
+    if (target.type === "checkbox") return target.checked;
+    if (options?.valueAsNumber) return target.valueAsNumber;
+    if (options?.valueAsDate) return target.valueAsDate;
+    return target.value;
+  }
   function isEqual(a, b) {
     if (Object.is(a, b)) return true;
     if (a instanceof Date && b instanceof Date)
@@ -361,6 +370,11 @@
     const cache = valuesCaches.get(form);
     if (cache) cache.version++;
   }
+  const errorsCaches = /* @__PURE__ */ new WeakMap();
+  function bumpErrorsVersion(form) {
+    const cache = errorsCaches.get(form);
+    if (cache) cache.version++;
+  }
   const dirtyBaselines = /* @__PURE__ */ new WeakMap();
   function getDirtyBaseline(form, key, segments) {
     const baselines = dirtyBaselines.get(form);
@@ -430,6 +444,50 @@
     }
     return entries;
   }
+  function computeErrorsViews(form) {
+    const cached = errorsCaches.get(form);
+    if (cached && cached.version === 0) return;
+    const result = {};
+    const tree = {};
+    for (const [key, list] of form.errors) {
+      const segments = JSON.parse(key);
+      result[segments.join(".")] = list;
+      let node = tree;
+      for (let i = 0; i < segments.length - 1; i++) {
+        const segment = segments[i];
+        const slot = node[segment];
+        const container = slot && !(Array.isArray(slot) && slot.length > 0 && isFieldError(slot[0])) ? slot : typeof segments[i + 1] === "number" ? [] : {};
+        node[segment] = container;
+        node = container;
+      }
+      node[segments[segments.length - 1]] = list;
+    }
+    if (cached) {
+      cached.result = result;
+      cached.tree = tree;
+      cached.version = 0;
+    } else {
+      errorsCaches.set(form, { version: 0, result, tree });
+    }
+  }
+  function getErrorsRecord(form) {
+    computeErrorsViews(form);
+    return errorsCaches.get(form).result;
+  }
+  function getErrorsTree(form) {
+    computeErrorsViews(form);
+    return errorsCaches.get(form).tree;
+  }
+  function fieldPathToDottedKey(name) {
+    return create$1(name).value.join(".");
+  }
+  function dottedKeyToFieldPath(key) {
+    const segments = key.split(".");
+    const numeric = (segment) => /^(0|[1-9]\d*)$/.test(segment);
+    return segments.map(
+      (segment, i) => i > 0 && numeric(segment) ? `[${segment}]` : `${i > 0 ? "." : ""}${segment}`
+    ).join("");
+  }
   function getFirstError({ errors }) {
     return errors.values().next().value?.[0]?.message;
   }
@@ -441,6 +499,7 @@
     const list = normalizeErrors(error);
     if (list) errors.set(path.key, list);
     else errors.delete(path.key);
+    bumpErrorsVersion(form);
     emit(emitter, "errors", path);
     if (options?.shouldFocus) emit(emitter, "focusError", path.key);
   }
@@ -464,11 +523,13 @@
     const { emitter, errors } = form;
     if (name === void 0) {
       errors.clear();
+      bumpErrorsVersion(form);
       emit(emitter, "errors");
       return;
     }
     const paths = typeof name === "string" || isSegmentsPath(name) ? [create$1(name)] : name.map((one) => create$1(one));
     for (const { key } of paths) errors.delete(key);
+    bumpErrorsVersion(form);
     for (const path of paths) emit(emitter, "errors", path);
   }
   function setServerErrors(form, errors, options) {
@@ -484,10 +545,109 @@
       );
     }
   }
+  function clearServerErrors(form) {
+    let changed = false;
+    for (const [key, errors] of form.errors) {
+      const kept = errors.filter((error) => error.type !== "server");
+      if (kept.length === 0) {
+        form.errors.delete(key);
+        changed = true;
+      } else if (kept.length !== errors.length) {
+        form.errors.set(key, kept);
+        changed = true;
+      }
+    }
+    if (changed) {
+      bumpErrorsVersion(form);
+      emit(form.emitter, "errors");
+    }
+  }
   function hasErrors({ errors }) {
     return errors.size > 0;
   }
 
+  function hasStandardProps(schema) {
+    return !!schema && typeof schema === "object" && typeof schema["~standard"]?.validate === "function";
+  }
+  function toFieldError(issue) {
+    return { type: "standard", message: issue?.message || "Validation failed" };
+  }
+  function schemaToFieldValidator(schema) {
+    return async (value) => {
+      const result = await schema["~standard"].validate(value);
+      if (!result.issues?.length) return void 0;
+      return result.issues.map(toFieldError);
+    };
+  }
+  function schemaToFormValidator(schema) {
+    return async (values) => {
+      const result = await schema["~standard"].validate(values);
+      const { issues } = result;
+      if (!issues?.length) {
+        return {
+          [VALIDATION_OUTCOME]: true,
+          values: "value" in result ? result.value : void 0
+        };
+      }
+      const errors = {};
+      for (const issue of issues) {
+        const segments = toPathSegments(issue);
+        if (segments.length) {
+          assignAtPath(errors, segments, toFieldError(issue));
+        } else {
+          const slot = errors[FORM_ERROR] ??= [];
+          if (Array.isArray(slot)) slot.push(toFieldError(issue));
+        }
+      }
+      return { [VALIDATION_OUTCOME]: true, errors: pruneEmpty(errors) || {} };
+    };
+  }
+  function toPathSegments(issue) {
+    const path = issue.path || [];
+    const segments = [];
+    for (const segment of path) {
+      const key = typeof segment === "object" && segment !== null ? segment.key : segment;
+      segments.push(String(key));
+    }
+    return segments;
+  }
+  function assignAtPath(root, segments, error) {
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const segment = segments[i];
+      let next = node[segment];
+      if (next === void 0) {
+        next = node[segment] = {};
+      }
+      if (!isBranch(next)) return;
+      node = next;
+    }
+    const leaf = segments[segments.length - 1];
+    const slot = node[leaf];
+    if (slot === void 0) node[leaf] = [error];
+    else if (Array.isArray(slot)) slot.push(error);
+  }
+  function isBranch(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+  }
+  function pruneEmpty(node) {
+    let hasLeaf = false;
+    const result = {};
+    Object.entries(node).forEach(([key, value]) => {
+      if (isBranch(value)) {
+        const pruned = pruneEmpty(value);
+        if (pruned) {
+          result[key] = pruned;
+          hasLeaf = true;
+        }
+      } else {
+        result[key] = value;
+        hasLeaf = true;
+      }
+    });
+    return hasLeaf ? result : void 0;
+  }
+
   function isFieldDirtyByPath(form, path) {
     const live = form.values.get(path.key);
     return form.values.has(path.key) && getDirtyBaseline(form, path.key, path.value) !== live;
@@ -647,7 +807,7 @@
       if (!hasLiveBranch(values, segments)) deleted.add(key);
     }
     if (!options?.keepTouched) touched.delete(key);
-    if (!options?.keepError) errors.delete(key);
+    if (!options?.keepError && errors.delete(key)) bumpErrorsVersion(form);
     validating.delete(key);
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
@@ -769,6 +929,7 @@
       emit(emitter, "touched", path);
     }
     if (!options?.keepErrors && errors.delete(path.key)) {
+      bumpErrorsVersion(form);
       emit(emitter, "errors", path);
     }
     bumpDirtyVersion(form);
@@ -978,7 +1139,7 @@
     if (stored) footprint.set(path.key, stored);
   }
   function applyValidateResult(form, result) {
-    const footprint = form.validateDeps ? getFormErrorFootprint(form) : void 0;
+    const footprint = form.validateDeps || form.validateMode !== "onSubmit" ? getFormErrorFootprint(form) : void 0;
     if (footprint) {
       clearFormValidateErrors(form, footprint);
       footprint.clear();
@@ -1014,6 +1175,7 @@
       const stored = form.errors.get(key);
       if (stored !== written) continue;
       form.errors.delete(key);
+      bumpErrorsVersion(form);
       emit(form.emitter, "errors", create$1(JSON.parse(key)));
     }
   }
@@ -1207,6 +1369,10 @@
     if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || getFieldErrorsByPath(form, path).length > 0 && form.reValidateMode === "onChange")
       form.validators.get(path.key)?.();
     revalidateFormOnChange(form, path, mode);
+    if (form.validateMode === "onChange" && form.validate) {
+      runFormValidate(form).catch(() => {
+      });
+    }
     revalidateDependentsOnChange(form, path, mode);
   }
   function userChangeByPath(form, path, value) {
@@ -1221,6 +1387,327 @@
     const mode = entry.mode ?? form.mode;
     if (mode === "onBlur" || mode === "onTouched" || mode === "all" || getFieldErrorsByPath(form, path).length > 0 && form.reValidateMode === "onBlur")
       form.validators.get(path.key)?.();
+    if (form.validateMode === "onBlur" && form.validate) {
+      runFormValidate(form).catch(() => {
+      });
+    }
+  }
+
+  function removeFieldForUnmount(form, path) {
+    const { key } = path;
+    const snapshot = {
+      present: form.values.has(key),
+      value: form.values.get(key),
+      touched: form.touched.has(key),
+      errors: form.errors.get(key)
+    };
+    removeFieldByPath(form, path);
+    return snapshot;
+  }
+  function restoreRemovedField(form, path, snapshot) {
+    const { key } = path;
+    if (snapshot.present) {
+      setValueByPath(form, path, snapshot.value, { shouldDirty: false });
+    } else {
+      form.deleted.delete(key);
+      bumpValuesVersion(form);
+      emit(form.emitter, "change", path);
+    }
+    if (snapshot.touched) setTouchedByPath(form, path);
+    if (snapshot.errors) setErrorByPath(form, path, snapshot.errors);
+  }
+
+  function hasRuleConstraints(rules) {
+    return rules.required !== void 0 || rules.min !== void 0 || rules.max !== void 0 || rules.minLength !== void 0 || rules.maxLength !== void 0 || rules.pattern !== void 0 || rules.validate !== void 0;
+  }
+  function defaultMessage(type, bound) {
+    switch (type) {
+      case "required":
+        return "This field is required";
+      case "min":
+        return `Must be at least ${bound}`;
+      case "max":
+        return `Must be at most ${bound}`;
+      case "minLength":
+        return `Must be at least ${bound} characters`;
+      case "maxLength":
+        return `Must be at most ${bound} characters`;
+      case "pattern":
+        return "Invalid format";
+      default:
+        return "Invalid value";
+    }
+  }
+  function rulesToValidator(rules) {
+    return (value, meta) => {
+      if (rules.required) {
+        if (value === "" || value === void 0 || value === null || Array.isArray(value) && value.length === 0) {
+          return [
+            {
+              type: "required",
+              message: typeof rules.required === "string" ? rules.required : defaultMessage("required")
+            }
+          ];
+        }
+      }
+      const errors = [];
+      const message = (type, bound) => rules.messages?.[type] ?? defaultMessage(type, bound);
+      if (rules.min !== void 0) {
+        const n = Number(value);
+        if (!Number.isNaN(n) && n < rules.min) {
+          errors.push({ type: "min", message: message("min", rules.min) });
+        }
+      }
+      if (rules.max !== void 0) {
+        const n = Number(value);
+        if (!Number.isNaN(n) && n > rules.max) {
+          errors.push({ type: "max", message: message("max", rules.max) });
+        }
+      }
+      const isSized = typeof value === "string" || Array.isArray(value);
+      if (rules.minLength !== void 0 && isSized && value.length < rules.minLength) {
+        errors.push({
+          type: "minLength",
+          message: message("minLength", rules.minLength)
+        });
+      }
+      if (rules.maxLength !== void 0 && isSized && value.length > rules.maxLength) {
+        errors.push({
+          type: "maxLength",
+          message: message("maxLength", rules.maxLength)
+        });
+      }
+      if (rules.pattern && !rules.pattern.value.test(value)) {
+        errors.push({
+          type: "pattern",
+          // pattern.message is type-required but JS consumers may omit it.
+          message: rules.messages?.pattern ?? rules.pattern.message ?? defaultMessage("pattern")
+        });
+      }
+      if (rules.validate !== void 0) {
+        const fns = typeof rules.validate === "function" ? { validate: rules.validate } : rules.validate;
+        for (const [type, fn] of Object.entries(fns)) {
+          const result = fn(value, meta);
+          if (result === void 0) continue;
+          for (const entry of Array.isArray(result) ? result : [result]) {
+            errors.push(
+              typeof entry === "string" ? { type, message: entry } : { ...entry, type }
+            );
+          }
+        }
+      }
+      return errors.length ? errors : void 0;
+    };
+  }
+  function rulesToConstraintAttrs(rules) {
+    const attrs = {};
+    if (rules.required) attrs.required = true;
+    if (rules.min !== void 0) attrs.min = rules.min;
+    if (rules.max !== void 0) attrs.max = rules.max;
+    if (rules.minLength !== void 0) attrs.minLength = rules.minLength;
+    if (rules.maxLength !== void 0) attrs.maxLength = rules.maxLength;
+    if (rules.pattern) attrs.pattern = rules.pattern.value.source;
+    return attrs;
+  }
+
+  function registerField(form, name, options) {
+    const path = create$1(name);
+    const {
+      mode,
+      shouldUnregister,
+      eventToValue,
+      valueAsNumber,
+      valueAsDate,
+      rules
+    } = options ?? {};
+    const toValue = eventToValue ?? ((e) => {
+      const target = e?.target;
+      if (!target) return e;
+      if (target.type === "file") return target.files;
+      if (target.type === "checkbox") return target.checked;
+      if (valueAsNumber) return target.valueAsNumber;
+      if (valueAsDate) return target.valueAsDate;
+      return target.value;
+    });
+    let el = null;
+    let modeToken = null;
+    let disposeValidator = null;
+    let snapshot = null;
+    let offFocus = null;
+    let offBulkSync = null;
+    const syncDom = () => {
+      if (!el || el.type === "file") return;
+      const next = getValueByPath(form, path);
+      const asString = next == null ? "" : String(next);
+      if (el.value !== asString) el.value = asString;
+    };
+    const attach = (node) => {
+      if (snapshot) {
+        restoreRemovedField(form, path, snapshot);
+        snapshot = null;
+      }
+      el = node;
+      if (node.type !== "file" && getValueByPath(form, path) === void 0) {
+        seedValueByPath(
+          form,
+          path,
+          node.type === "checkbox" ? node.checked : node.value
+        );
+        emitChangeByPath(form, path);
+      }
+      modeToken = registerFieldMode(form, path, mode).token;
+      if (rules && hasRuleConstraints(rules)) {
+        const sync = rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0;
+        const rest = rules.required !== void 0 ? { ...rules, required: void 0 } : rules;
+        disposeValidator = registerValidatorByPath(form, path, {
+          validate: () => hasRuleConstraints(rest) ? rulesToValidator(rest) : void 0,
+          debounce: () => 0,
+          sync: () => sync
+        });
+      }
+      offFocus = on(
+        form.emitter,
+        "focusError",
+        (key, options2) => {
+          if (key !== path.key || !el || typeof el.focus !== "function") return;
+          el.focus();
+          if (options2?.shouldSelect && typeof el.select === "function") {
+            el.select();
+          }
+        }
+      );
+      offBulkSync = on(form.emitter, "change", (changed) => {
+        if (changed) return;
+        syncDom();
+      });
+    };
+    const detach = () => {
+      if (modeToken) {
+        unregisterFieldMode(form, path, modeToken);
+        modeToken = null;
+      }
+      if (disposeValidator) {
+        disposeValidator();
+        disposeValidator = null;
+      }
+      if (offFocus) {
+        offFocus();
+        offFocus = null;
+      }
+      if (offBulkSync) {
+        offBulkSync();
+        offBulkSync = null;
+      }
+      el = null;
+      if ((shouldUnregister ?? form.shouldUnregister) !== false) {
+        snapshot = removeFieldForUnmount(form, path);
+      }
+    };
+    return {
+      name: path.key,
+      onChange: (e) => changeValueByPath(form, path, toValue(e)),
+      onBlur: () => userBlur(form, path),
+      ref: (node) => {
+        if (node) attach(node);
+        else detach();
+      }
+    };
+  }
+
+  function readArray(form, path) {
+    const value = getValueByPath(form, path);
+    return Array.isArray(value) ? value : [];
+  }
+  function appendValueByPath(form, path, value) {
+    const arr = readArray(form, path);
+    setValueByPath(form, path, [...arr, value]);
+  }
+  function prependValueByPath(form, path, value) {
+    const arr = readArray(form, path);
+    setValueByPath(form, path, [value, ...arr]);
+  }
+  function insertValueByPath(form, path, index, value) {
+    const arr = readArray(form, path);
+    if (index < 0 || index > arr.length) return false;
+    setValueByPath(form, path, [
+      ...arr.slice(0, index),
+      value,
+      ...arr.slice(index)
+    ]);
+    return true;
+  }
+  function removeValueByPath(form, path, indices) {
+    const arr = readArray(form, path);
+    const drop = /* @__PURE__ */ new Set();
+    for (const index of Array.isArray(indices) ? indices : [indices]) {
+      if (index >= 0 && index < arr.length) drop.add(index);
+    }
+    if (drop.size === 0) return [];
+    const dropped = [...drop].sort((a, b) => b - a);
+    setValueByPath(
+      form,
+      path,
+      arr.filter((_, i) => !drop.has(i))
+    );
+    return dropped;
+  }
+  function moveValueByPath(form, path, from, to) {
+    const arr = readArray(form, path);
+    if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) {
+      return false;
+    }
+    if (from === to) return false;
+    const next = [...arr];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function swapValuesByPath(form, path, from, to) {
+    const arr = readArray(form, path);
+    if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) {
+      return false;
+    }
+    if (from === to) return false;
+    const next = [...arr];
+    [next[from], next[to]] = [next[to], next[from]];
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function replaceValuesByPath(form, path, values) {
+    setValueByPath(form, path, [...values]);
+  }
+  function updateValueByPath(form, path, index, value) {
+    const arr = readArray(form, path);
+    if (index < 0 || index >= arr.length) return false;
+    const next = [...arr];
+    next[index] = value;
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function appendValue(form, name, value) {
+    appendValueByPath(form, create$1(name), value);
+  }
+  function prependValue(form, name, value) {
+    prependValueByPath(form, create$1(name), value);
+  }
+  function insertValue(form, name, index, value) {
+    return insertValueByPath(form, create$1(name), index, value);
+  }
+  function removeValue(form, name, indices) {
+    return removeValueByPath(form, create$1(name), indices);
+  }
+  function moveValue(form, name, from, to) {
+    return moveValueByPath(form, create$1(name), from, to);
+  }
+  function swapValues(form, name, from, to) {
+    return swapValuesByPath(form, create$1(name), from, to);
+  }
+  function replaceValues(form, name, values) {
+    replaceValuesByPath(form, create$1(name), values);
+  }
+  function updateValue(form, name, index, value) {
+    return updateValueByPath(form, create$1(name), index, value);
   }
 
   function setIsSubmitting(form, value) {
@@ -1274,18 +1761,20 @@
       onValidSubmit,
       onInvalidSubmit,
       onAction,
-      shouldFocusError = true
+      shouldFocusError = true,
+      shouldUseNativeValidation = form.shouldUseNativeValidation
     } = options ?? {};
     return async (e) => {
       if (e && typeof e.preventDefault === "function") {
         e.preventDefault();
       }
       const formEl = e?.currentTarget;
+      clearServerErrors(form);
       form.isSubmitted = true;
       setIsSubmitting(form, true);
       incrementSubmitCount(form);
       const values = getValues(form);
-      if (formEl && typeof formEl.checkValidity === "function" && formEl.checkValidity() === false) {
+      if (shouldUseNativeValidation && formEl && typeof formEl.checkValidity === "function" && formEl.checkValidity() === false) {
         formEl.reportValidity();
         if (shouldFocusError && typeof formEl.querySelector === "function") {
           const invalid = formEl.querySelector(":invalid");
@@ -1311,7 +1800,14 @@
         const submitted = getValues(form);
         if (onSubmit) await onSubmit(submitted, e);
         if (onValidSubmit) await onValidSubmit(submitted, e);
-        if (onAction) await onAction(submitted, e);
+        if (onAction) {
+          const result = await onAction(submitted, e);
+          if (result && typeof result === "object" && result.errors !== void 0 && typeof result.errors === "object") {
+            setServerErrors(form, result.errors);
+            setSubmitSuccessful(form, false);
+            return;
+          }
+        }
         setSubmitSuccessful(form, true);
       } catch {
         setSubmitSuccessful(form, false);
@@ -1332,14 +1828,21 @@
     _setMaxListeners(emitter, 0);
     let source = options?.initialValues ?? {};
     if (typeof source === "function") source = source();
+    const validateOption = options?.validate;
+    const wrappedValidate = validateOption && hasStandardProps(validateOption) ? schemaToFormValidator(
+      validateOption
+    ) : validateOption;
     const form = {
       emitter,
       ...options,
+      validate: wrappedValidate,
       mode: options?.mode ?? "onSubmit",
       reValidateMode: options?.reValidateMode ?? "onChange",
+      validateMode: options?.validateMode ?? "onSubmit",
       disabled: options?.disabled ?? false,
       validateOnMount: options?.validateOnMount ?? false,
       asyncAlways: options?.asyncAlways ?? false,
+      shouldUseNativeValidation: options?.shouldUseNativeValidation ?? true,
       validateDeps: options?.validateDeps ? new Set(options.validateDeps.map((dep) => create$1(dep).key)) : void 0,
       initialValues: {},
       values: /* @__PURE__ */ new Map(),
@@ -1354,7 +1857,8 @@
       submitCount: 0,
       isSubmitSuccessful: void 0,
       isLoading: false,
-      status: void 0
+      status: void 0,
+      register: (name, registerOptions) => registerField(form, name, registerOptions)
     };
     if (isPromise(source)) {
       form.isLoading = true;
@@ -1376,94 +1880,44 @@
     return form;
   }
 
-  function defaultMessage(type, bound) {
-    switch (type) {
-      case "required":
-        return "This field is required";
-      case "min":
-        return `Must be at least ${bound}`;
-      case "max":
-        return `Must be at most ${bound}`;
-      case "minLength":
-        return `Must be at least ${bound} characters`;
-      case "maxLength":
-        return `Must be at most ${bound} characters`;
-      case "pattern":
-        return "Invalid format";
-      default:
-        return "Invalid value";
-    }
+  function errorIdFromKey(key) {
+    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
+    return id || "field";
   }
-  function rulesToValidator(rules) {
-    return (value, meta) => {
-      if (rules.required) {
-        if (value === "" || value === void 0 || value === null || Array.isArray(value) && value.length === 0) {
-          return [
-            {
-              type: "required",
-              message: typeof rules.required === "string" ? rules.required : defaultMessage("required")
-            }
-          ];
-        }
-      }
-      const errors = [];
-      const message = (type, bound) => rules.messages?.[type] ?? defaultMessage(type, bound);
-      if (rules.min !== void 0) {
-        const n = Number(value);
-        if (!Number.isNaN(n) && n < rules.min) {
-          errors.push({ type: "min", message: message("min", rules.min) });
-        }
-      }
-      if (rules.max !== void 0) {
-        const n = Number(value);
-        if (!Number.isNaN(n) && n > rules.max) {
-          errors.push({ type: "max", message: message("max", rules.max) });
-        }
-      }
-      const isSized = typeof value === "string" || Array.isArray(value);
-      if (rules.minLength !== void 0 && isSized && value.length < rules.minLength) {
-        errors.push({
-          type: "minLength",
-          message: message("minLength", rules.minLength)
-        });
-      }
-      if (rules.maxLength !== void 0 && isSized && value.length > rules.maxLength) {
-        errors.push({
-          type: "maxLength",
-          message: message("maxLength", rules.maxLength)
-        });
-      }
-      if (rules.pattern && !rules.pattern.value.test(value)) {
-        errors.push({
-          type: "pattern",
-          // pattern.message is type-required but JS consumers may omit it.
-          message: rules.messages?.pattern ?? rules.pattern.message ?? defaultMessage("pattern")
-        });
-      }
-      if (rules.validate !== void 0) {
-        const fns = typeof rules.validate === "function" ? { validate: rules.validate } : rules.validate;
-        for (const [type, fn] of Object.entries(fns)) {
-          const result = fn(value, meta);
-          if (result === void 0) continue;
-          for (const entry of Array.isArray(result) ? result : [result]) {
-            errors.push(
-              typeof entry === "string" ? { type, message: entry } : { ...entry, type }
-            );
-          }
-        }
-      }
-      return errors.length ? errors : void 0;
-    };
+  function fieldErrorId(name) {
+    return errorIdFromKey(create$1(name).key);
   }
-  function rulesToConstraintAttrs(rules) {
-    const attrs = {};
-    if (rules.required) attrs.required = true;
-    if (rules.min !== void 0) attrs.min = rules.min;
-    if (rules.max !== void 0) attrs.max = rules.max;
-    if (rules.minLength !== void 0) attrs.minLength = rules.minLength;
-    if (rules.maxLength !== void 0) attrs.maxLength = rules.maxLength;
-    if (rules.pattern) attrs.pattern = rules.pattern.value.source;
-    return attrs;
+
+  const fieldDisabledRegistry = /* @__PURE__ */ new WeakMap();
+  function registerFieldDisabled(form, path, disabled) {
+    if (disabled === void 0) return null;
+    let registry = fieldDisabledRegistry.get(form);
+    if (!registry) {
+      registry = /* @__PURE__ */ new Map();
+      fieldDisabledRegistry.set(form, registry);
+    }
+    const token = {};
+    registry.set(path.key, { disabled, token });
+    emit(form.emitter, "disabled", path);
+    return { token };
+  }
+  function unregisterFieldDisabled(form, path, token) {
+    const registry = fieldDisabledRegistry.get(form);
+    const entry = registry?.get(path.key);
+    if (registry && entry && entry.token === token) {
+      registry.delete(path.key);
+      emit(form.emitter, "disabled", path);
+    }
+  }
+  function hasDisabledAncestor(form, path) {
+    const registry = fieldDisabledRegistry.get(form);
+    if (!registry?.size) return false;
+    const segments = path.value;
+    for (let i = 1; i < segments.length; i++) {
+      const prefix = JSON.stringify(segments.slice(0, i));
+      if (registry.get(prefix)?.disabled) return true;
+    }
+    return false;
   }
 
   function isDescendant(key, ancestorKey) {
@@ -1495,6 +1949,41 @@
     });
     return unsubscribes.length === 1 ? unsubscribes[0] : () => unsubscribes.forEach((unsubscribe) => unsubscribe());
   }
+  function watch(form, event, getter, isEqual) {
+    const cache = { hasValue: false };
+    const consumers = /* @__PURE__ */ new Set();
+    const wake = () => {
+      if (isEqual && cache.hasValue) {
+        const next = getter();
+        if (isEqual(cache.value, next)) return;
+        cache.value = next;
+      } else {
+        cache.value = getter();
+        cache.hasValue = true;
+      }
+      consumers.forEach((invalidate) => invalidate());
+    };
+    const off = on(form.emitter, event, wake);
+    return {
+      getSnapshot: () => {
+        if (!cache.hasValue) {
+          cache.value = getter();
+          cache.hasValue = true;
+        }
+        return cache.value;
+      },
+      subscribe: (invalidate) => {
+        consumers.add(invalidate);
+        return () => {
+          consumers.delete(invalidate);
+        };
+      },
+      dispose: () => {
+        off();
+        consumers.clear();
+      }
+    };
+  }
 
   function useForm(options) {
     const [form] = React.useState(() => {
@@ -1603,8 +2092,13 @@
     const { key } = path;
     const scope = options?.exact === false ? "branch" : "leaf";
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(emitter, "change", path, scope, invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are `key` on purpose: useValue creates a fresh Path per render, so the object must stay out of the deps while the key string pins the subscription
+      (invalidate) => onPathEvent(
+        emitter,
+        "change",
+        create$1(JSON.parse(key)),
+        scope,
+        invalidate
+      ),
       [emitter, key, scope]
     );
     return useWatchCore(subscribeFactory, () => {
@@ -1615,6 +2109,9 @@
       return value === void 0 ? options?.defaultValue : value;
     });
   }
+  function useValues(form) {
+    return useWatch(form, "change", () => getValues(form));
+  }
   function useTouched(form, name) {
     return useTouchedByPath(form, create$1(name));
   }
@@ -1667,8 +2164,13 @@
     const { emitter } = form;
     const { key } = path;
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(emitter, "change", path, "leaf", invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- same key-pinning convention as useValueByPath
+      (invalidate) => onPathEvent(
+        emitter,
+        "change",
+        create$1(JSON.parse(key)),
+        "leaf",
+        invalidate
+      ),
       [emitter, key]
     );
     return useWatchCore(subscribeFactory, () => isFieldDirtyByPath(form, path));
@@ -1698,6 +2200,7 @@
       touchedFields: getTouchedFields(form),
       hasErrors: hasErrors(form),
       isValid: !hasErrors(form),
+      errors: getErrorsRecord(form),
       isSubmitting: form.isSubmitting,
       isSubmitted: form.isSubmitted,
       isValidating: form.validating.size > 0,
@@ -1709,7 +2212,7 @@
   }
   function isSameFormState(a, b) {
     const sameTouched = a.touchedFields.length === b.touchedFields.length && a.touchedFields.every((path, i) => path === b.touchedFields[i]);
-    return a.isDirty === b.isDirty && a.dirtyFields === b.dirtyFields && a.isTouched === b.isTouched && sameTouched && a.hasErrors === b.hasErrors && a.isValid === b.isValid && a.isSubmitting === b.isSubmitting && a.isSubmitted === b.isSubmitted && a.isValidating === b.isValidating && a.isSubmitSuccessful === b.isSubmitSuccessful && a.submitCount === b.submitCount && a.isLoading === b.isLoading && a.disabled === b.disabled;
+    return a.isDirty === b.isDirty && a.dirtyFields === b.dirtyFields && a.isTouched === b.isTouched && sameTouched && a.hasErrors === b.hasErrors && a.isValid === b.isValid && a.errors === b.errors && a.isSubmitting === b.isSubmitting && a.isSubmitted === b.isSubmitted && a.isValidating === b.isValidating && a.isSubmitSuccessful === b.isSubmitSuccessful && a.submitCount === b.submitCount && a.isLoading === b.isLoading && a.disabled === b.disabled;
   }
   function useFormState(form) {
     const getter = React.useCallback(() => getFormState(form), [form]);
@@ -1726,9 +2229,29 @@
     );
     return useWatchCore(subscribeFactory, getter, isSameFormState);
   }
+  function useStore(form, selector, isEqual2) {
+    const subscribeFactory = React.useCallback(
+      (invalidate) => {
+        const offs = FORM_STATE_EVENTS.map(
+          (event) => on(form.emitter, event, invalidate)
+        );
+        return () => {
+          for (const off of offs) off();
+        };
+      },
+      [form.emitter]
+    );
+    return useWatchCore(subscribeFactory, selector, isEqual2);
+  }
   function useHasErrors(form) {
     return useWatch(form, "errors", hasErrors.bind(null, form));
   }
+  function useErrors(form) {
+    return useWatch(form, "errors", () => getErrorsRecord(form));
+  }
+  function useErrorsTree(form) {
+    return useWatch(form, "errors", () => getErrorsTree(form));
+  }
   function useIsValid(form) {
     return useWatch(form, "errors", () => !hasErrors(form));
   }
@@ -1780,8 +2303,8 @@
   }
 
   function usePath(name) {
-    const path = React.useMemo(() => create$1(normalizePath(name)), [name]);
-    return React.useMemo(() => path, [path.key]);
+    const key = React.useMemo(() => create$1(normalizePath(name)).key, [name]);
+    return React.useMemo(() => create$1(JSON.parse(key)), [key]);
   }
 
   function useStage(value) {
@@ -1798,38 +2321,46 @@
   }
   function useUnmountRestore(teardown, restore) {
     const removedRef = React.useRef(false);
+    const teardownRef = useStage(teardown);
+    const restoreRef = useStage(restore);
     React.useEffect(() => {
+      const teardownOnce = teardownRef.current;
+      const restoreOnce = restoreRef.current;
       if (removedRef.current) {
         removedRef.current = false;
-        restore();
+        restoreOnce();
       }
       return () => {
         removedRef.current = true;
-        teardown();
+        teardownOnce();
       };
-    }, []);
+    }, [removedRef, teardownRef, restoreRef]);
   }
 
   function useValidate(validate, path, formProp, options) {
     const contextForm = React.useContext(FormContext);
     const form = formProp || contextForm;
     if (!form) throw new Error("no form provided");
-    const validateRef = React.useRef(validate);
-    validateRef.current = validate;
+    const validateOption = validate;
+    const validateRef = React.useRef(void 0);
+    validateRef.current = validateOption && hasStandardProps(validateOption) ? schemaToFieldValidator(validateOption) : validateOption;
     const debounceRef = React.useRef(options?.debounce ?? 0);
     debounceRef.current = options?.debounce ?? 0;
     const syncRef = React.useRef(options?.sync);
     syncRef.current = options?.sync;
     const asyncAlwaysRef = React.useRef(options?.asyncAlways ?? false);
     asyncAlwaysRef.current = options?.asyncAlways ?? false;
+    const validateOnMountRef = React.useRef(options?.validateOnMount);
+    validateOnMountRef.current = options?.validateOnMount;
     React.useEffect(() => {
-      const dispose = registerValidatorByPath(form, path, {
+      const spath = create$1(JSON.parse(path.key));
+      const dispose = registerValidatorByPath(form, spath, {
         validate: () => validateRef.current,
         debounce: () => debounceRef.current,
         sync: () => syncRef.current,
         asyncAlways: () => asyncAlwaysRef.current
       });
-      const validateOnMount = options?.validateOnMount ?? form.validateOnMount;
+      const validateOnMount = validateOnMountRef.current ?? form.validateOnMount;
       if (!validateOnMount || !validateRef.current && !syncRef.current) {
         return dispose;
       }
@@ -1854,34 +2385,7 @@
     return useStageFn(() => form.validators.get(path.key)?.());
   }
 
-  function removeFieldForUnmount(form, path) {
-    const { key } = path;
-    const snapshot = {
-      present: form.values.has(key),
-      value: form.values.get(key),
-      touched: form.touched.has(key),
-      errors: form.errors.get(key)
-    };
-    removeFieldByPath(form, path);
-    return snapshot;
-  }
-  function restoreRemovedField(form, path, snapshot) {
-    const { key } = path;
-    if (snapshot.present) {
-      setValueByPath(form, path, snapshot.value, { shouldDirty: false });
-    } else {
-      form.deleted.delete(key);
-      bumpValuesVersion(form);
-      emit(form.emitter, "change", path);
-    }
-    if (snapshot.touched) setTouchedByPath(form, path);
-    if (snapshot.errors) setErrorByPath(form, path, snapshot.errors);
-  }
-
   const uncontrolledSyncRegistry = /* @__PURE__ */ new WeakMap();
-  function hasRuleConstraints(rules) {
-    return rules.required !== void 0 || rules.min !== void 0 || rules.max !== void 0 || rules.minLength !== void 0 || rules.maxLength !== void 0 || rules.pattern !== void 0 || rules.validate !== void 0;
-  }
   function combineRulesAndValidate(rules, validate) {
     if (!rules || !hasRuleConstraints(rules)) return validate;
     const ruleValidator = rulesToValidator(rules);
@@ -1898,22 +2402,59 @@
       return isPromise(result) ? result.then(merge) : merge(result);
     };
   }
-  function useDelayedErrors(errors, delay) {
-    const [shown, setShown] = React.useState(errors);
-    React.useEffect(() => {
-      if (delay === void 0) return;
-      if (errors.length === 0) {
-        setShown(errors);
-        return;
-      }
-      if (shown.length > 0) {
-        setShown(errors);
-        return;
-      }
-      const timer = setTimeout(() => setShown(errors), delay);
-      return () => clearTimeout(timer);
-    }, [errors, delay, shown]);
-    return delay === void 0 ? errors : shown;
+  const NO_DELAYED_ERRORS = [];
+  function useDelayedErrors(form, path, delay) {
+    const pendingRef = React.useRef(false);
+    const prevRef = React.useRef(false);
+    const timerRef = React.useRef(null);
+    const subscribeFactory = React.useCallback(
+      (invalidate) => {
+        const spath = create$1(JSON.parse(path.key));
+        const clearTimer = () => {
+          if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+          }
+        };
+        pendingRef.current = false;
+        prevRef.current = false;
+        clearTimer();
+        const startWindow = () => {
+          clearTimer();
+          pendingRef.current = true;
+          timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            pendingRef.current = false;
+            invalidate();
+          }, delay);
+        };
+        const off = onKeyEvent(form.emitter, "errors", spath.key, () => {
+          const has = getFieldErrorsByPath(form, spath).length > 0;
+          const was = prevRef.current;
+          prevRef.current = has;
+          if (delay !== void 0) {
+            if (!has) {
+              if (pendingRef.current) {
+                clearTimer();
+                pendingRef.current = false;
+              }
+            } else if (!was || pendingRef.current) {
+              startWindow();
+            }
+          }
+          invalidate();
+        });
+        return () => {
+          off();
+          clearTimer();
+        };
+      },
+      [form, path.key, delay]
+    );
+    return useWatchCore(
+      subscribeFactory,
+      () => delay === void 0 || !pendingRef.current ? getFieldErrorsByPath(form, path) : NO_DELAYED_ERRORS
+    );
   }
   function useFieldValue(form, path, uncontrolled) {
     const snapshotRef = React.useRef({
@@ -1948,7 +2489,11 @@
     disabled,
     uncontrolled,
     asyncAlways,
-    mode: modeOption
+    mode: modeOption,
+    eventToValue,
+    valueAsNumber,
+    valueAsDate,
+    type
   }, Context) {
     const contextForm = React.useContext(Context);
     const form = f1 || contextForm;
@@ -1966,22 +2511,28 @@
       emitChangeByPath(form, path);
     });
     const restRules = rules ? { ...rules, required: void 0 } : void 0;
-    useValidate(combineRulesAndValidate(restRules, validate), path, form, {
+    const validateOption = validate;
+    const validateWrapped = validateOption && hasStandardProps(validateOption) ? schemaToFieldValidator(validateOption) : validateOption;
+    useValidate(combineRulesAndValidate(restRules, validateWrapped), path, form, {
       debounce: validateDebounce,
       validateOnMount,
       asyncAlways: asyncAlways ?? form.asyncAlways,
       sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0
     });
-    const liveErrors = useFieldErrorsByPath(form, path);
-    const errors = useDelayedErrors(liveErrors, delayError);
+    const errors = useDelayedErrors(form, path, delayError);
     const errorObject = errors[0];
     const error = errorObject?.message;
     const value = useFieldValue(form, path, !!uncontrolled);
     const isDirty = useWatchCore(
       React.useCallback(
         (invalidate) => uncontrolled ? () => {
-        } : onPathEvent(form.emitter, "change", path, "leaf", invalidate),
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- usePath memoizes the Path per key, so key pins the subscription like every path-scoped hook
+        } : onPathEvent(
+          form.emitter,
+          "change",
+          create$1(JSON.parse(path.key)),
+          "leaf",
+          invalidate
+        ),
         [form.emitter, path.key, uncontrolled]
       ),
       () => isFieldDirtyByPath(form, path)
@@ -1993,20 +2544,46 @@
       ),
       () => form.validating.has(path.key)
     );
-    const formDisabled = useWatch(form, "disabled", () => form.disabled);
+    const mergedDisabled = useWatchCore(
+      React.useCallback(
+        (invalidate) => onPathEvent(
+          form.emitter,
+          "disabled",
+          create$1(JSON.parse(path.key)),
+          "branch",
+          invalidate
+        ),
+        [form.emitter, path.key]
+      ),
+      () => form.disabled || disabled === true || disabled !== false && hasDisabledAncestor(form, path)
+    );
+    const disabledTokenRef = React.useRef(null);
+    React.useEffect(() => {
+      const spath = create$1(JSON.parse(path.key));
+      const registration = registerFieldDisabled(form, spath, disabled);
+      if (registration) disabledTokenRef.current = registration.token;
+      return () => {
+        if (disabledTokenRef.current !== null) {
+          unregisterFieldDisabled(form, spath, disabledTokenRef.current);
+          disabledTokenRef.current = null;
+        }
+      };
+    }, [form, path.key, disabled]);
     const onChange = useStageFn((v) => userChangeByPath(form, path, v));
     const onBlur = useStageFn(() => userBlur(form, path));
     React.useEffect(() => {
-      const { token, displaced } = registerFieldMode(form, path, modeOption);
-      return () => unregisterFieldMode(form, path, token);
+      const spath = create$1(JSON.parse(path.key));
+      const { token, displaced } = registerFieldMode(form, spath, modeOption);
+      return () => unregisterFieldMode(form, spath, token);
     }, [form, path.key, modeOption]);
     const depsKey = validateDeps?.length ? validateDeps.join("\n") : void 0;
+    const validateDepsRef = useStage(validateDeps);
     React.useEffect(() => {
       if (!depsKey) return;
-      const depKeys = validateDeps.map((dep) => create$1(dep).key);
+      const depKeys = validateDepsRef.current.map((dep) => create$1(dep).key);
       registerFieldValidateDeps(form, path.key, depKeys);
       return () => unregisterFieldValidateDeps(form, path.key, depKeys);
-    }, [form, path.key, depsKey]);
+    }, [form, path.key, depsKey, validateDepsRef]);
     const elementRef = React.useRef(null);
     const focusRef = React.useCallback((el) => {
       elementRef.current = el;
@@ -2028,7 +2605,7 @@
       [form, path.key]
     );
     React.useEffect(() => {
-      if (!uncontrolled) return;
+      const spath = create$1(JSON.parse(path.key));
       let entry = uncontrolledSyncRegistry.get(form);
       if (!entry) {
         const cells = /* @__PURE__ */ new Map();
@@ -2045,7 +2622,7 @@
         entry = { cells, off };
         uncontrolledSyncRegistry.set(form, entry);
       }
-      entry.cells.set(path.key, () => ({ el: elementRef.current, path }));
+      entry.cells.set(path.key, () => ({ el: elementRef.current, path: spath }));
       return () => {
         entry.cells.delete(path.key);
         if (entry.cells.size === 0) {
@@ -2065,6 +2642,16 @@
       if (snapshot) restoreRemovedField(form, path, snapshot);
     });
     useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
+    const extract = eventToValue ?? ((e) => extractEventValue(e, { valueAsNumber, valueAsDate }));
+    const inputProps = {
+      name: path.key,
+      ref: focusRef,
+      onChange: (e) => onChange(extract(e)),
+      onBlur,
+      disabled: mergedDisabled,
+      ...type === "checkbox" ? { checked: !!value } : type === "file" ? {} : uncontrolled ? { defaultValue: value } : { value: value ?? "" },
+      ...error ? { "aria-invalid": true, "aria-describedby": errorIdFromKey(path.key) } : {}
+    };
     return {
       form,
       value,
@@ -2076,8 +2663,9 @@
       onChange,
       onBlur,
       name: path.key,
-      disabled: formDisabled || !!disabled,
-      focusRef
+      disabled: mergedDisabled,
+      focusRef,
+      inputProps
     };
   }
   function useField(options) {
@@ -2117,12 +2705,6 @@
       () => getValueByPath(form, path) || [],
       [form, path]
     );
-    const setArray = React.useCallback(
-      (arr) => {
-        setValueByPath(form, path, arr);
-      },
-      [form, path]
-    );
     const computeFields = React.useCallback(() => {
       const arr = getArray();
       while (idsRef.current.length < arr.length) {
@@ -2174,56 +2756,39 @@
       }
     );
     const append = useStageFn((value) => {
-      const arr = getArray();
       idsRef.current.push(generateId(form));
-      setArray([...arr, value]);
+      appendValueByPath(form, path, value);
     });
     const prepend = useStageFn((value) => {
-      const arr = getArray();
       idsRef.current.unshift(generateId(form));
-      setArray([value, ...arr]);
+      prependValueByPath(form, path, value);
     });
     const insert = useStageFn((index, value) => {
-      const arr = getArray();
+      if (!insertValueByPath(form, path, index, value)) return;
       idsRef.current.splice(index, 0, generateId(form));
-      const newArr = [...arr.slice(0, index), value, ...arr.slice(index)];
-      setArray(newArr);
     });
-    const remove = useStageFn((index) => {
-      const arr = getArray();
-      idsRef.current.splice(index, 1);
-      const newArr = arr.filter((_, i) => i !== index);
-      setArray(newArr);
+    const remove = useStageFn((indices) => {
+      const dropped = removeValueByPath(form, path, indices);
+      for (const index of dropped) idsRef.current.splice(index, 1);
     });
     const swap = useStageFn((from, to) => {
-      const arr = getArray();
+      if (!swapValuesByPath(form, path, from, to)) return;
       [idsRef.current[from], idsRef.current[to]] = [
         idsRef.current[to],
         idsRef.current[from]
       ];
-      const newArr = [...arr];
-      [newArr[from], newArr[to]] = [newArr[to], newArr[from]];
-      setArray(newArr);
     });
     const move = useStageFn((from, to) => {
-      const arr = getArray();
+      if (!moveValueByPath(form, path, from, to)) return;
       const [id] = idsRef.current.splice(from, 1);
       idsRef.current.splice(to, 0, id);
-      const newArr = [...arr];
-      const [item] = newArr.splice(from, 1);
-      newArr.splice(to, 0, item);
-      setArray(newArr);
     });
     const replace = useStageFn((values) => {
       idsRef.current = values.map(() => generateId(form));
-      setArray([...values]);
+      replaceValuesByPath(form, path, values);
     });
     const update = useStageFn((index, value) => {
-      const arr = getArray();
-      if (index < 0 || index >= arr.length) return;
-      const newArr = [...arr];
-      newArr[index] = value;
-      setArray(newArr);
+      updateValueByPath(form, path, index, value);
     });
     return { fields, append, prepend, insert, remove, swap, move, replace, update };
   }
@@ -2309,7 +2874,10 @@
       return useFieldCore(options, Context);
     }
     function useFieldArray(options) {
-      return useFieldArrayCore(options, Context);
+      return useFieldArrayCore(
+        options,
+        Context
+      );
     }
     function useFieldArrayItem(options) {
       return useFieldArrayItemCore(options, Context);
@@ -2333,23 +2901,59 @@
 
   function useTransform(form, name, options = {}) {
     const path = usePath(name);
-    const { toDisplay, fromDisplay } = options;
+    const { toDisplay, fromDisplay, asyncDebounceMs } = options;
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(form.emitter, "change", path, "leaf", invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- usePath memoizes the Path per key, so key pins the subscription like every path-scoped hook
+      (invalidate) => onPathEvent(
+        form.emitter,
+        "change",
+        create$1(JSON.parse(path.key)),
+        "leaf",
+        invalidate
+      ),
       [form.emitter, path.key]
     );
     const raw = useWatchCore(subscribeFactory, () => getValueByPath(form, path));
     const value = toDisplay ? toDisplay(raw) : raw;
+    const timerRef = React.useRef(null);
+    const seqRef = React.useRef(0);
+    const fromDisplayRef = React.useRef(fromDisplay);
+    fromDisplayRef.current = fromDisplay;
+    const debounceRef = React.useRef(asyncDebounceMs ?? 0);
+    debounceRef.current = asyncDebounceMs ?? 0;
+    React.useEffect(
+      () => () => {
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+      },
+      []
+    );
     const onChange = React.useCallback(
       (display) => {
-        userChangeByPath(
-          form,
-          path,
-          fromDisplay ? fromDisplay(display) : display
-        );
+        const run = () => {
+          const seq = ++seqRef.current;
+          const transform = fromDisplayRef.current;
+          const commit = (next) => userChangeByPath(form, path, next);
+          if (!transform) {
+            commit(display);
+            return;
+          }
+          const result = transform(display);
+          if (isPromise(result)) {
+            result.then((next) => {
+              if (seqRef.current === seq) commit(next);
+            });
+          } else if (seqRef.current === seq) {
+            commit(result);
+          }
+        };
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = null;
+        if (debounceRef.current > 0) {
+          timerRef.current = setTimeout(run, debounceRef.current);
+        } else {
+          run();
+        }
       },
-      [form, path, fromDisplay]
+      [form, path]
     );
     return { value, onChange };
   }
@@ -2403,6 +3007,7 @@
     onInvalidSubmit,
     action,
     shouldFocusError,
+    shouldUseNativeValidation,
     ...props
   }) {
     const f2 = useForm({
@@ -2411,7 +3016,8 @@
       shouldUnregister,
       validateOnMount,
       disabled,
-      asyncAlways
+      asyncAlways,
+      shouldUseNativeValidation
     });
     const form = f1 || f2;
     React__namespace.useEffect(() => {
@@ -2422,10 +3028,12 @@
       onValidSubmit,
       onInvalidSubmit,
       shouldFocusError,
-      onAction: action ? (values2) => action(formDataFromValues(values2)) : void 0
+      shouldUseNativeValidation,
+      onAction: typeof action === "function" ? (values2) => action(formDataFromValues(values2)) : void 0
     });
     const { Provider } = context ?? FormContext;
-    return /* @__PURE__ */ React__namespace.createElement(Provider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, noValidate: true, onSubmit: submit }));
+    const nativeAction = typeof action === "string" ? action : void 0;
+    return /* @__PURE__ */ React__namespace.createElement(Provider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, action: nativeAction, noValidate: true, onSubmit: submit }));
   }
 
   function FormField({ children, ...options }) {
@@ -2440,19 +3048,12 @@
       ref.current = value;
     }
   }
-  function errorIdFromKey(key) {
-    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
-    return id || "field";
-  }
   function ariaProps(error, fieldKey, props) {
     return {
       "aria-invalid": error ? true : props["aria-invalid"],
       "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"]
     };
   }
-  function fieldErrorId(name) {
-    return errorIdFromKey(create$1(name).key);
-  }
   const Field = React__namespace.forwardRef(
     ({
       validate,
@@ -2479,6 +3080,10 @@
     }, ref) => {
       const innerRef = React__namespace.useRef(null);
       const [nativeInvalidCount, setNativeInvalidCount] = React__namespace.useState(0);
+      const contextForm = React__namespace.useContext(FormContext);
+      const resolvedForm = formProp ?? contextForm;
+      const validateOption = validate;
+      const validateWrapped = validateOption && hasStandardProps(validateOption) ? schemaToFieldValidator(validateOption) : validateOption;
       const {
         value,
         onChange,
@@ -2503,15 +3108,17 @@
         // uncontrolled path so no `value` prop ever reaches the element.
         uncontrolled: uncontrolled || props.type === "file",
         validate: (...params) => {
-          const el = innerRef.current;
-          if (el && typeof el.checkValidity === "function") {
-            el.setCustomValidity("");
-            if (el.checkValidity() === false) {
-              setNativeInvalidCount((count) => count + 1);
-              return void 0;
+          if (resolvedForm?.shouldUseNativeValidation !== false) {
+            const el = innerRef.current;
+            if (el && typeof el.checkValidity === "function") {
+              el.setCustomValidity("");
+              if (el.checkValidity() === false) {
+                setNativeInvalidCount((count) => count + 1);
+                return void 0;
+              }
             }
           }
-          if (validate) return validate(...params);
+          if (validateWrapped) return validateWrapped(...params);
         }
       });
       const mergedRef = React__namespace.useCallback(
@@ -2537,7 +3144,7 @@
         if (nativeInvalidCount > 0) innerRef.current?.reportValidity();
       }, [nativeInvalidCount]);
       const isFile = props.type === "file";
-      const toValue = eventToValue ?? (isFile ? (e) => e.target.files : valueAsNumber ? (e) => e.target.valueAsNumber : valueAsDate ? (e) => e.target.valueAsDate : (e) => e.target.value);
+      const toValue = eventToValue ?? ((e) => extractEventValue(e, { valueAsNumber, valueAsDate }));
       const valueProps = valueToProps ? valueToProps(value) : isFile ? {} : uncontrolled ? { defaultValue: value } : { value };
       const errorId = errorIdFromKey(fieldKey);
       const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
@@ -2689,18 +3296,25 @@
   exports.FormProvider = FormProvider;
   exports.Select = Select;
   exports.VALIDATION_OUTCOME = VALIDATION_OUTCOME;
+  exports.appendValue = appendValue;
+  exports.appendValueByPath = appendValueByPath;
   exports.changeValue = changeValue;
   exports.changeValueByPath = changeValueByPath;
   exports.clearErrors = clearErrors;
+  exports.clearServerErrors = clearServerErrors;
   exports.createForm = create;
   exports.createFormContext = createFormContext;
+  exports.dottedKeyToFieldPath = dottedKeyToFieldPath;
   exports.emitChangeByPath = emitChangeByPath;
   exports.ensureValidate = ensureValidate;
   exports.fieldErrorId = fieldErrorId;
+  exports.fieldPathToDottedKey = fieldPathToDottedKey;
   exports.getDirtyFields = getDirtyFields;
   exports.getError = getError;
   exports.getErrorByPath = getErrorByPath;
   exports.getErrors = getErrors;
+  exports.getErrorsRecord = getErrorsRecord;
+  exports.getErrorsTree = getErrorsTree;
   exports.getFieldErrors = getFieldErrors;
   exports.getFieldErrorsByPath = getFieldErrorsByPath;
   exports.getFieldState = getFieldState;
@@ -2714,14 +3328,25 @@
   exports.hasTouched = hasTouched;
   exports.hasTouchedByPath = hasTouchedByPath;
   exports.incrementSubmitCount = incrementSubmitCount;
+  exports.insertValue = insertValue;
+  exports.insertValueByPath = insertValueByPath;
   exports.isDirty = isDirty;
   exports.isFieldDirtyByPath = isFieldDirtyByPath;
   exports.isTouched = isTouched;
+  exports.moveValue = moveValue;
+  exports.moveValueByPath = moveValueByPath;
+  exports.prependValue = prependValue;
+  exports.prependValueByPath = prependValueByPath;
+  exports.registerField = registerField;
   exports.registerFieldMode = registerFieldMode;
   exports.registerFieldValidateDeps = registerFieldValidateDeps;
   exports.registerValidatorByPath = registerValidatorByPath;
   exports.removeField = removeField;
   exports.removeFieldByPath = removeFieldByPath;
+  exports.removeValue = removeValue;
+  exports.removeValueByPath = removeValueByPath;
+  exports.replaceValues = replaceValues;
+  exports.replaceValuesByPath = replaceValuesByPath;
   exports.reset = reset;
   exports.resetField = resetField;
   exports.revalidateDependentsOnChange = revalidateDependentsOnChange;
@@ -2743,15 +3368,21 @@
   exports.setValue = setValue;
   exports.setValueByPath = setValueByPath;
   exports.subscribe = subscribe;
+  exports.swapValues = swapValues;
+  exports.swapValuesByPath = swapValuesByPath;
   exports.trigger = trigger;
   exports.unregisterFieldMode = unregisterFieldMode;
   exports.unregisterFieldValidateDeps = unregisterFieldValidateDeps;
   exports.unsetValidatingByPath = unsetValidatingByPath;
+  exports.updateValue = updateValue;
+  exports.updateValueByPath = updateValueByPath;
   exports.useCanSubmit = useCanSubmit;
   exports.useCheckboxGroupContext = useCheckboxGroupContext;
   exports.useDirtyFields = useDirtyFields;
   exports.useError = useError;
   exports.useErrorByPath = useErrorByPath;
+  exports.useErrors = useErrors;
+  exports.useErrorsTree = useErrorsTree;
   exports.useField = useField;
   exports.useFieldArray = useFieldArray;
   exports.useFieldArrayItem = useFieldArrayItem;
@@ -2772,6 +3403,7 @@
   exports.useIsValid = useIsValid;
   exports.useIsValidating = useIsValidating;
   exports.useStatus = useStatus;
+  exports.useStore = useStore;
   exports.useSubmitCount = useSubmitCount;
   exports.useTouched = useTouched;
   exports.useTouchedByPath = useTouchedByPath;
@@ -2779,11 +3411,13 @@
   exports.useTransform = useTransform;
   exports.useValue = useValue;
   exports.useValueByPath = useValueByPath;
+  exports.useValues = useValues;
   exports.useWatch = useWatch;
   exports.useWatchCore = useWatchCore;
   exports.userBlur = userBlur;
   exports.userChangeByPath = userChangeByPath;
   exports.validate = validate;
+  exports.watch = watch;
 
 }));
 //# sourceMappingURL=index.umd.js.map