react-f0rm 1.2.0 → 1.3.0

package/dist/index.umd.js

@@ -433,14 +433,16 @@
   function getFirstError({ errors }) {
     return errors.values().next().value?.[0]?.message;
   }
-  function setError(form, name, error) {
-    setErrorByPath(form, create$1(name), error);
+  function setError(form, name, error, options) {
+    setErrorByPath(form, create$1(name), error, options);
   }
-  function setErrorByPath({ emitter, errors }, path, error) {
+  function setErrorByPath(form, path, error, options) {
+    const { emitter, errors } = form;
     const list = normalizeErrors(error);
     if (list) errors.set(path.key, list);
     else errors.delete(path.key);
     emit(emitter, "errors", path);
+    if (options?.shouldFocus) emit(emitter, "focusError", path.key);
   }
   function normalizeErrors(error) {
     if (typeof error === "string") {
@@ -486,6 +488,48 @@
     return errors.size > 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;
+  }
+  function isDirty(form) {
+    let dirty = false;
+    forEachDirtyField(form, () => {
+      dirty = true;
+    });
+    return dirty;
+  }
+  function forEachDirtyField(form, fn) {
+    for (const [key, value] of form.values) {
+      const path = JSON.parse(key);
+      if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
+    }
+  }
+  function computeDirtyFields(form) {
+    const dirtyFields = {};
+    forEachDirtyField(form, (key) => {
+      dirtyFields[key] = true;
+    });
+    return dirtyFields;
+  }
+  function sameDirtyKeys(a, b) {
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length) return false;
+    return aKeys.every((key) => b[key] === true);
+  }
+  function getDirtyFields(form) {
+    let cache = dirtyFieldsCaches.get(form);
+    if (!cache) {
+      cache = { version: 0, result: computeDirtyFields(form) };
+      dirtyFieldsCaches.set(form, cache);
+    } else if (cache.version > 0) {
+      const result = computeDirtyFields(form);
+      if (!sameDirtyKeys(cache.result, result)) cache.result = result;
+      cache.version = 0;
+    }
+    return cache.result;
+  }
+
   function setTouched(form, name) {
     setTouchedByPath(form, create$1(name));
   }
@@ -553,11 +597,12 @@
   }
   function setValueByPath(form, path, value, options) {
     const { emitter, values, deleted } = form;
-    values.set(path.key, value);
+    const next = typeof value === "function" ? value(getValueByPath(form, path)) : value;
+    values.set(path.key, next);
     pruneDescendantKeys(values, path);
     reviveBranch(deleted, path);
     pruneDirtyBaselines(form, path);
-    if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
+    if (options?.shouldDirty === false) setDirtyBaseline(form, path, next);
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
     if (options?.shouldTouch) setTouchedByPath(form, path);
@@ -578,15 +623,14 @@
   }
   function getFieldState(form, name) {
     const path = create$1(name);
-    const { values, touched, validating } = form;
-    const live = values.get(path.key);
+    const { touched, validating } = form;
     return {
       value: getValueByPath(form, path),
       error: getErrorByPath(form, path),
       errors: getFieldErrorsByPath(form, path),
-      // Same rule as getDirtyFields, committed baselines included: the field
+      // The shared per-field rule (committed baselines included): the field
       // is dirty while its live value differs from its effective baseline.
-      isDirty: values.has(path.key) && getDirtyBaseline(form, path.key, path.value) !== live,
+      isDirty: isFieldDirtyByPath(form, path),
       isTouched: touched.has(path.key),
       isValidating: validating.has(path.key)
     };
@@ -691,7 +735,8 @@
     validating.clear();
     if (!options?.keepIsSubmitting) form.isSubmitting = false;
     if (!options?.keepSubmitCount) form.submitCount = 0;
-    if (!options?.keepIsSubmitted) form.isSubmitSuccessful = void 0;
+    if (!options?.keepIsSubmitted) form.isSubmitted = false;
+    if (!options?.keepIsSubmitSuccessful) form.isSubmitSuccessful = void 0;
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
     for (const { segments, value } of keptValues) {
@@ -730,44 +775,6 @@
     bumpValuesVersion(form);
   }
 
-  function isDirty(form) {
-    let dirty = false;
-    forEachDirtyField(form, () => {
-      dirty = true;
-    });
-    return dirty;
-  }
-  function forEachDirtyField(form, fn) {
-    for (const [key, value] of form.values) {
-      const path = JSON.parse(key);
-      if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
-    }
-  }
-  function computeDirtyFields(form) {
-    const dirtyFields = {};
-    forEachDirtyField(form, (key) => {
-      dirtyFields[key] = true;
-    });
-    return dirtyFields;
-  }
-  function sameDirtyKeys(a, b) {
-    const aKeys = Object.keys(a);
-    if (aKeys.length !== Object.keys(b).length) return false;
-    return aKeys.every((key) => b[key] === true);
-  }
-  function getDirtyFields(form) {
-    let cache = dirtyFieldsCaches.get(form);
-    if (!cache) {
-      cache = { version: 0, result: computeDirtyFields(form) };
-      dirtyFieldsCaches.set(form, cache);
-    } else if (cache.version > 0) {
-      const result = computeDirtyFields(form);
-      if (!sameDirtyKeys(cache.result, result)) cache.result = result;
-      cache.version = 0;
-    }
-    return cache.result;
-  }
-
   function unsetValidatingByPath({ emitter, validating }, path) {
     validating.delete(path.key);
     emit(emitter, "validating", path);
@@ -808,6 +815,25 @@
       errorSource = "sync";
       return true;
     };
+    const collectSyncErrors = () => {
+      const sync = registration.sync();
+      if (!sync) return null;
+      const errors = sync(getValueByPath(form, path), { form, path });
+      if (errors === void 0) return null;
+      const list = Array.isArray(errors) ? errors : [errors];
+      return list.length ? list : null;
+    };
+    const land = (result) => {
+      if (registration.asyncAlways?.()) {
+        const gate = collectSyncErrors();
+        const own = result === void 0 ? [] : Array.isArray(result) ? result : [result];
+        setErrorByPath(form, path, [...gate ?? [], ...own]);
+        errorSource = hasErrors2(result) ? "validator" : gate ? "sync" : null;
+      } else {
+        setErrorByPath(form, path, result);
+        errorSource = hasErrors2(result) ? "validator" : null;
+      }
+    };
     const supersede = () => {
       if (timer !== null) {
         clearTimeout(timer);
@@ -837,8 +863,7 @@
         throw e;
       }
       if (!isPromise(result)) {
-        setErrorByPath(form, path, result);
-        errorSource = hasErrors2(result) ? "validator" : null;
+        land(result);
         unmark();
         return;
       }
@@ -846,8 +871,7 @@
       result.then(
         (error) => {
           if (lock === round) {
-            setErrorByPath(form, path, error);
-            errorSource = hasErrors2(error) ? "validator" : null;
+            land(error);
           }
         }
       ).catch(() => {
@@ -860,7 +884,7 @@
     };
     const run = () => {
       timer = null;
-      if (runSync()) {
+      if (runSync() && !registration.asyncAlways?.()) {
         supersede();
         unmark();
         return;
@@ -868,7 +892,7 @@
       runValidator();
     };
     const kick = () => {
-      if (runSync()) {
+      if (runSync() && !registration.asyncAlways?.()) {
         supersede();
         unmark();
         return;
@@ -1215,6 +1239,10 @@
     form.disabled = value;
     emit(form.emitter, "disabled");
   }
+  function setStatus(form, value) {
+    form.status = value;
+    emit(form.emitter, "status");
+  }
   function nameToPath(name) {
     if (name.startsWith("[")) {
       try {
@@ -1253,6 +1281,7 @@
         e.preventDefault();
       }
       const formEl = e?.currentTarget;
+      form.isSubmitted = true;
       setIsSubmitting(form, true);
       incrementSubmitCount(form);
       const values = getValues(form);
@@ -1309,6 +1338,8 @@
       mode: options?.mode ?? "onSubmit",
       reValidateMode: options?.reValidateMode ?? "onChange",
       disabled: options?.disabled ?? false,
+      validateOnMount: options?.validateOnMount ?? false,
+      asyncAlways: options?.asyncAlways ?? false,
       validateDeps: options?.validateDeps ? new Set(options.validateDeps.map((dep) => create$1(dep).key)) : void 0,
       initialValues: {},
       values: /* @__PURE__ */ new Map(),
@@ -1319,18 +1350,20 @@
       validating: /* @__PURE__ */ new Set(),
       parsedValues: void 0,
       isSubmitting: false,
+      isSubmitted: false,
       submitCount: 0,
       isSubmitSuccessful: void 0,
-      isLoading: false
+      isLoading: false,
+      status: void 0
     };
     if (isPromise(source)) {
       form.isLoading = true;
       emit(emitter, "loading");
       Promise.resolve(source).then(
         (resolved) => {
+          setInitialValues(form, resolved ?? {});
           form.isLoading = false;
           emit(emitter, "loading");
-          setInitialValues(form, resolved ?? {});
         },
         (error) => {
           form.isLoading = false;
@@ -1362,9 +1395,9 @@
     }
   }
   function rulesToValidator(rules) {
-    return (value) => {
+    return (value, meta) => {
       if (rules.required) {
-        if (value === "" || value === void 0 || value === null) {
+        if (value === "" || value === void 0 || value === null || Array.isArray(value) && value.length === 0) {
           return [
             {
               type: "required",
@@ -1387,13 +1420,14 @@
           errors.push({ type: "max", message: message("max", rules.max) });
         }
       }
-      if (rules.minLength !== void 0 && typeof value === "string" && value.length < rules.minLength) {
+      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 && typeof value === "string" && value.length > rules.maxLength) {
+      if (rules.maxLength !== void 0 && isSized && value.length > rules.maxLength) {
         errors.push({
           type: "maxLength",
           message: message("maxLength", rules.maxLength)
@@ -1406,207 +1440,32 @@
           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;
     };
   }
-
-  var shim = {exports: {}};
-
-  var useSyncExternalStoreShim_production = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim.production.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var hasRequiredUseSyncExternalStoreShim_production;
-
-  function requireUseSyncExternalStoreShim_production () {
-  	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
-  	hasRequiredUseSyncExternalStoreShim_production = 1;
-  	var React$1 = React;
-  	function is(x, y) {
-  	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-  	}
-  	var objectIs = "function" === typeof Object.is ? Object.is : is,
-  	  useState = React$1.useState,
-  	  useEffect = React$1.useEffect,
-  	  useLayoutEffect = React$1.useLayoutEffect,
-  	  useDebugValue = React$1.useDebugValue;
-  	function useSyncExternalStore$2(subscribe, getSnapshot) {
-  	  var value = getSnapshot(),
-  	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
-  	    inst = _useState[0].inst,
-  	    forceUpdate = _useState[1];
-  	  useLayoutEffect(
-  	    function () {
-  	      inst.value = value;
-  	      inst.getSnapshot = getSnapshot;
-  	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	    },
-  	    [subscribe, value, getSnapshot]
-  	  );
-  	  useEffect(
-  	    function () {
-  	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	      return subscribe(function () {
-  	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	      });
-  	    },
-  	    [subscribe]
-  	  );
-  	  useDebugValue(value);
-  	  return value;
-  	}
-  	function checkIfSnapshotChanged(inst) {
-  	  var latestGetSnapshot = inst.getSnapshot;
-  	  inst = inst.value;
-  	  try {
-  	    var nextValue = latestGetSnapshot();
-  	    return !objectIs(inst, nextValue);
-  	  } catch (error) {
-  	    return true;
-  	  }
-  	}
-  	function useSyncExternalStore$1(subscribe, getSnapshot) {
-  	  return getSnapshot();
-  	}
-  	var shim =
-  	  "undefined" === typeof window ||
-  	  "undefined" === typeof window.document ||
-  	  "undefined" === typeof window.document.createElement
-  	    ? useSyncExternalStore$1
-  	    : useSyncExternalStore$2;
-  	useSyncExternalStoreShim_production.useSyncExternalStore =
-  	  void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
-  	return useSyncExternalStoreShim_production;
+  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;
   }
 
-  var useSyncExternalStoreShim_development = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim.development.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var hasRequiredUseSyncExternalStoreShim_development;
-
-  function requireUseSyncExternalStoreShim_development () {
-  	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-  	hasRequiredUseSyncExternalStoreShim_development = 1;
-  	"production" !== process.env.NODE_ENV &&
-  	  (function () {
-  	    function is(x, y) {
-  	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
-  	    }
-  	    function useSyncExternalStore$2(subscribe, getSnapshot) {
-  	      didWarnOld18Alpha ||
-  	        void 0 === React$1.startTransition ||
-  	        ((didWarnOld18Alpha = true),
-  	        console.error(
-  	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-  	        ));
-  	      var value = getSnapshot();
-  	      if (!didWarnUncachedGetSnapshot) {
-  	        var cachedValue = getSnapshot();
-  	        objectIs(value, cachedValue) ||
-  	          (console.error(
-  	            "The result of getSnapshot should be cached to avoid an infinite loop"
-  	          ),
-  	          (didWarnUncachedGetSnapshot = true));
-  	      }
-  	      cachedValue = useState({
-  	        inst: { value: value, getSnapshot: getSnapshot }
-  	      });
-  	      var inst = cachedValue[0].inst,
-  	        forceUpdate = cachedValue[1];
-  	      useLayoutEffect(
-  	        function () {
-  	          inst.value = value;
-  	          inst.getSnapshot = getSnapshot;
-  	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	        },
-  	        [subscribe, value, getSnapshot]
-  	      );
-  	      useEffect(
-  	        function () {
-  	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	          return subscribe(function () {
-  	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
-  	          });
-  	        },
-  	        [subscribe]
-  	      );
-  	      useDebugValue(value);
-  	      return value;
-  	    }
-  	    function checkIfSnapshotChanged(inst) {
-  	      var latestGetSnapshot = inst.getSnapshot;
-  	      inst = inst.value;
-  	      try {
-  	        var nextValue = latestGetSnapshot();
-  	        return !objectIs(inst, nextValue);
-  	      } catch (error) {
-  	        return true;
-  	      }
-  	    }
-  	    function useSyncExternalStore$1(subscribe, getSnapshot) {
-  	      return getSnapshot();
-  	    }
-  	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-  	      "function" ===
-  	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
-  	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-  	    var React$1 = React,
-  	      objectIs = "function" === typeof Object.is ? Object.is : is,
-  	      useState = React$1.useState,
-  	      useEffect = React$1.useEffect,
-  	      useLayoutEffect = React$1.useLayoutEffect,
-  	      useDebugValue = React$1.useDebugValue,
-  	      didWarnOld18Alpha = false,
-  	      didWarnUncachedGetSnapshot = false,
-  	      shim =
-  	        "undefined" === typeof window ||
-  	        "undefined" === typeof window.document ||
-  	        "undefined" === typeof window.document.createElement
-  	          ? useSyncExternalStore$1
-  	          : useSyncExternalStore$2;
-  	    useSyncExternalStoreShim_development.useSyncExternalStore =
-  	      void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
-  	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
-  	      "function" ===
-  	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
-  	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  	  })();
-  	return useSyncExternalStoreShim_development;
-  }
-
-  var hasRequiredShim;
-
-  function requireShim () {
-  	if (hasRequiredShim) return shim.exports;
-  	hasRequiredShim = 1;
-
-  	if (process.env.NODE_ENV === 'production') {
-  	  shim.exports = requireUseSyncExternalStoreShim_production();
-  	} else {
-  	  shim.exports = requireUseSyncExternalStoreShim_development();
-  	}
-  	return shim.exports;
-  }
-
-  var shimExports = requireShim();
-
   function isDescendant(key, ancestorKey) {
     return key.startsWith(`${ancestorKey.slice(0, -1)},`);
   }
@@ -1677,6 +1536,19 @@
       seeded.source = values;
       setInitialValues(form, values);
     }, [form, values]);
+    React.useEffect(() => {
+      if (!form.validateOnMount || !form.validate) return;
+      const run = () => {
+        void runFormValidate(form).catch(() => void 0);
+      };
+      if (!form.isLoading) {
+        run();
+        return;
+      }
+      return on(form.emitter, "loading", () => {
+        run();
+      });
+    }, [form]);
     return form;
   }
   function useWatchCore(subscribeFactory, getter, isEqual2) {
@@ -1713,7 +1585,7 @@
       },
       [subscribeFactory, cache]
     );
-    return shimExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   }
   function useWatch(formOrEmitter, event, getter, isEqual2) {
     const emitter = "emitter" in formOrEmitter ? formOrEmitter.emitter : formOrEmitter;
@@ -1723,18 +1595,25 @@
     );
     return useWatchCore(subscribeFactory, getter, isEqual2);
   }
-  function useValue(form, name) {
-    return useValueByPath(form, create$1(name));
+  function useValue(form, name, options) {
+    return useValueByPath(form, create$1(name), options);
   }
-  function useValueByPath(form, path) {
+  function useValueByPath(form, path, options) {
     const { emitter } = form;
     const { key } = path;
+    const scope = options?.exact === false ? "branch" : "leaf";
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(emitter, "change", path, "leaf", invalidate),
+      (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
-      [emitter, key]
+      [emitter, key, scope]
     );
-    return useWatchCore(subscribeFactory, getValueByPath.bind(null, form, path));
+    return useWatchCore(subscribeFactory, () => {
+      if (options?.exact === false) {
+        return get(getValues(form), path.value);
+      }
+      const value = getValueByPath(form, path);
+      return value === void 0 ? options?.defaultValue : value;
+    });
   }
   function useTouched(form, name) {
     return useTouchedByPath(form, create$1(name));
@@ -1781,6 +1660,19 @@
   function useIsDirty(form) {
     return useWatch(form, "change", isDirty.bind(null, form));
   }
+  function useIsFieldDirty(form, name) {
+    return useIsFieldDirtyByPath(form, create$1(name));
+  }
+  function useIsFieldDirtyByPath(form, path) {
+    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
+      [emitter, key]
+    );
+    return useWatchCore(subscribeFactory, () => isFieldDirtyByPath(form, path));
+  }
   function useDirtyFields(form) {
     return useWatch(form, "change", getDirtyFields.bind(null, form));
   }
@@ -1807,6 +1699,7 @@
       hasErrors: hasErrors(form),
       isValid: !hasErrors(form),
       isSubmitting: form.isSubmitting,
+      isSubmitted: form.isSubmitted,
       isValidating: form.validating.size > 0,
       isSubmitSuccessful: form.isSubmitSuccessful,
       submitCount: form.submitCount,
@@ -1816,7 +1709,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.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.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]);
@@ -1845,6 +1738,9 @@
   function useIsLoading(form) {
     return useWatch(form, "loading", () => form.isLoading);
   }
+  function useStatus(form) {
+    return useWatch(form, "status", () => form.status);
+  }
   function useCanSubmit(form) {
     const { emitter } = form;
     const subscribeFactory = React.useCallback(
@@ -1900,6 +1796,19 @@
       [ref]
     );
   }
+  function useUnmountRestore(teardown, restore) {
+    const removedRef = React.useRef(false);
+    React.useEffect(() => {
+      if (removedRef.current) {
+        removedRef.current = false;
+        restore();
+      }
+      return () => {
+        removedRef.current = true;
+        teardown();
+      };
+    }, []);
+  }
 
   function useValidate(validate, path, formProp, options) {
     const contextForm = React.useContext(FormContext);
@@ -1911,20 +1820,67 @@
     debounceRef.current = options?.debounce ?? 0;
     const syncRef = React.useRef(options?.sync);
     syncRef.current = options?.sync;
-    React.useEffect(
-      () => registerValidatorByPath(form, path, {
+    const asyncAlwaysRef = React.useRef(options?.asyncAlways ?? false);
+    asyncAlwaysRef.current = options?.asyncAlways ?? false;
+    React.useEffect(() => {
+      const dispose = registerValidatorByPath(form, path, {
         validate: () => validateRef.current,
         debounce: () => debounceRef.current,
-        sync: () => syncRef.current
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are `path.key` on purpose: usePath returns a stable Path per key, so re-subscribing on key (not object identity) is enough
-      [form, path.key]
-    );
+        sync: () => syncRef.current,
+        asyncAlways: () => asyncAlwaysRef.current
+      });
+      const validateOnMount = options?.validateOnMount ?? form.validateOnMount;
+      if (!validateOnMount || !validateRef.current && !syncRef.current) {
+        return dispose;
+      }
+      let disposed = false;
+      const kick = () => {
+        if (disposed) return;
+        form.validators.get(path.key)?.();
+      };
+      if (!form.isLoading) {
+        kick();
+      } else {
+        const off = on(form.emitter, "loading", () => {
+          off();
+          kick();
+        });
+      }
+      return () => {
+        disposed = true;
+        dispose();
+      };
+    }, [form, path.key]);
     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;
+    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;
@@ -1987,9 +1943,11 @@
     rules,
     validateDebounce,
     validateDeps,
+    validateOnMount,
     delayError,
     disabled,
     uncontrolled,
+    asyncAlways,
     mode: modeOption
   }, Context) {
     const contextForm = React.useContext(Context);
@@ -2010,6 +1968,8 @@
     const restRules = rules ? { ...rules, required: void 0 } : void 0;
     useValidate(combineRulesAndValidate(restRules, validate), 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);
@@ -2017,6 +1977,22 @@
     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
+        [form.emitter, path.key, uncontrolled]
+      ),
+      () => isFieldDirtyByPath(form, path)
+    );
+    const validating = useWatchCore(
+      React.useCallback(
+        (invalidate) => onKeyEvent(form.emitter, "validating", path.key, invalidate),
+        [form.emitter, path.key]
+      ),
+      () => form.validating.has(path.key)
+    );
     const formDisabled = useWatch(form, "disabled", () => form.disabled);
     const onChange = useStageFn((v) => userChangeByPath(form, path, v));
     const onBlur = useStageFn(() => userBlur(form, path));
@@ -2051,20 +2027,52 @@
       ),
       [form, path.key]
     );
-    React.useEffect(
-      () => () => {
-        if ((shouldUnregister ?? form.shouldUnregister) !== false) {
-          removeFieldByPath(form, path);
+    React.useEffect(() => {
+      if (!uncontrolled) return;
+      let entry = uncontrolledSyncRegistry.get(form);
+      if (!entry) {
+        const cells = /* @__PURE__ */ new Map();
+        const off = on(form.emitter, "change", (changed) => {
+          if (changed) return;
+          for (const read of cells.values()) {
+            const { el, path: path2 } = read();
+            if (!el || el.type === "file") continue;
+            const next = getValueByPath(form, path2);
+            const asString = next == null ? "" : String(next);
+            if (el.value !== asString) el.value = asString;
+          }
+        });
+        entry = { cells, off };
+        uncontrolledSyncRegistry.set(form, entry);
+      }
+      entry.cells.set(path.key, () => ({ el: elementRef.current, path }));
+      return () => {
+        entry.cells.delete(path.key);
+        if (entry.cells.size === 0) {
+          entry.off();
+          uncontrolledSyncRegistry.delete(form);
         }
-      },
-      [path, form, shouldUnregister]
-    );
+      };
+    }, [form, path.key, uncontrolled]);
+    const removalSnapshotRef = React.useRef(null);
+    const teardownOnUnmount = useStageFn(() => {
+      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
+      removalSnapshotRef.current = removeFieldForUnmount(form, path);
+    });
+    const restoreAfterStrictMode = useStageFn(() => {
+      const snapshot = removalSnapshotRef.current;
+      removalSnapshotRef.current = null;
+      if (snapshot) restoreRemovedField(form, path, snapshot);
+    });
+    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
     return {
       form,
       value,
       error,
       errorObject,
       errors,
+      isDirty,
+      validating,
       onChange,
       onBlur,
       name: path.key,
@@ -2101,6 +2109,8 @@
     const contextForm = React.useContext(Context);
     const form = options.form || contextForm;
     if (!form) throw new Error("no form provided");
+    const keyName = options.keyName ?? "id";
+    const { rules, shouldUnregister } = options;
     const path = usePath(options.name);
     const idsRef = React.useRef([]);
     const getArray = React.useCallback(
@@ -2121,8 +2131,12 @@
       while (idsRef.current.length > arr.length) {
         idsRef.current.pop();
       }
-      return idsRef.current.map((id, index) => ({ id, index }));
-    }, [getArray, form]);
+      return idsRef.current.map((id, index) => ({
+        id,
+        index,
+        [keyName]: id
+      }));
+    }, [getArray, form, keyName]);
     const [fields, syncFields] = React.useReducer(
       computeFields,
       void 0,
@@ -2140,6 +2154,25 @@
         if (registry?.get(path.key) === idsRef.current) registry.delete(path.key);
       };
     }, [form, path.key]);
+    const removalSnapshotRef = React.useRef(null);
+    const teardownOnUnmount = useStageFn(() => {
+      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
+      removalSnapshotRef.current = removeFieldForUnmount(form, path);
+    });
+    const restoreAfterStrictMode = useStageFn(() => {
+      const snapshot = removalSnapshotRef.current;
+      removalSnapshotRef.current = null;
+      if (snapshot) restoreRemovedField(form, path, snapshot);
+    });
+    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
+    useValidate(
+      rules ? rulesToValidator({ ...rules, required: void 0 }) : void 0,
+      path,
+      form,
+      {
+        sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0
+      }
+    );
     const append = useStageFn((value) => {
       const arr = getArray();
       idsRef.current.push(generateId(form));
@@ -2298,6 +2331,29 @@
     return group;
   }
 
+  function useTransform(form, name, options = {}) {
+    const path = usePath(name);
+    const { toDisplay, fromDisplay } = 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
+      [form.emitter, path.key]
+    );
+    const raw = useWatchCore(subscribeFactory, () => getValueByPath(form, path));
+    const value = toDisplay ? toDisplay(raw) : raw;
+    const onChange = React.useCallback(
+      (display) => {
+        userChangeByPath(
+          form,
+          path,
+          fromDisplay ? fromDisplay(display) : display
+        );
+      },
+      [form, path, fromDisplay]
+    );
+    return { value, onChange };
+  }
+
   function appendFormDataValue(fd, key, value) {
     if (value == null) return;
     if (Array.isArray(value)) {
@@ -2339,6 +2395,9 @@
     initialValues,
     values,
     shouldUnregister,
+    validateOnMount,
+    disabled,
+    asyncAlways,
     onSubmit,
     onValidSubmit,
     onInvalidSubmit,
@@ -2346,8 +2405,18 @@
     shouldFocusError,
     ...props
   }) {
-    const f2 = useForm({ initialValues, values, shouldUnregister });
+    const f2 = useForm({
+      initialValues,
+      values,
+      shouldUnregister,
+      validateOnMount,
+      disabled,
+      asyncAlways
+    });
     const form = f1 || f2;
+    React__namespace.useEffect(() => {
+      if (disabled !== void 0) setDisabled(form, disabled);
+    }, [form, disabled]);
     const submit = handleSubmit(form, {
       onSubmit,
       onValidSubmit,
@@ -2398,6 +2467,10 @@
       shouldUnregister,
       rules,
       validateDebounce,
+      validateOnMount,
+      valueAsNumber,
+      valueAsDate,
+      asyncAlways,
       disabled,
       delayError,
       mode,
@@ -2421,8 +2494,10 @@
         shouldUnregister,
         rules,
         validateDebounce,
+        validateOnMount,
         delayError,
         disabled,
+        asyncAlways,
         mode,
         // File inputs cannot be value-controlled at all — force the
         // uncontrolled path so no `value` prop ever reaches the element.
@@ -2462,12 +2537,14 @@
         if (nativeInvalidCount > 0) innerRef.current?.reportValidity();
       }, [nativeInvalidCount]);
       const isFile = props.type === "file";
-      const toValue = eventToValue ?? (isFile ? (e) => e.target.files : (e) => e.target.value);
+      const toValue = eventToValue ?? (isFile ? (e) => e.target.files : valueAsNumber ? (e) => e.target.valueAsNumber : valueAsDate ? (e) => e.target.valueAsDate : (e) => e.target.value);
       const valueProps = valueToProps ? valueToProps(value) : isFile ? {} : uncontrolled ? { defaultValue: value } : { value };
       const errorId = errorIdFromKey(fieldKey);
+      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Component,
         {
+          ...constraintAttrs,
           ...props,
           name: fieldKey,
           onBlur,
@@ -2490,6 +2567,8 @@
       validate,
       rules,
       validateDebounce,
+      validateOnMount,
+      asyncAlways,
       disabled,
       delayError,
       mode,
@@ -2510,13 +2589,17 @@
         validate,
         rules,
         validateDebounce,
+        validateOnMount,
+        asyncAlways,
         delayError,
         disabled,
         mode
       });
+      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
       return /* @__PURE__ */ React__namespace.createElement(
         "input",
         {
+          ...constraintAttrs,
           ...props,
           name: fieldKey,
           onBlur,
@@ -2545,6 +2628,8 @@
       validate,
       rules,
       validateDebounce,
+      validateOnMount,
+      asyncAlways,
       disabled,
       delayError,
       mode,
@@ -2565,13 +2650,17 @@
         validate,
         rules,
         validateDebounce,
+        validateOnMount,
+        asyncAlways,
         delayError,
         disabled,
         mode
       });
+      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
       return /* @__PURE__ */ React__namespace.createElement(
         "select",
         {
+          ...constraintAttrs,
           ...props,
           name: fieldKey,
           onBlur,
@@ -2626,6 +2715,7 @@
   exports.hasTouchedByPath = hasTouchedByPath;
   exports.incrementSubmitCount = incrementSubmitCount;
   exports.isDirty = isDirty;
+  exports.isFieldDirtyByPath = isFieldDirtyByPath;
   exports.isTouched = isTouched;
   exports.registerFieldMode = registerFieldMode;
   exports.registerFieldValidateDeps = registerFieldValidateDeps;
@@ -2636,6 +2726,7 @@
   exports.resetField = resetField;
   exports.revalidateDependentsOnChange = revalidateDependentsOnChange;
   exports.revalidateFormOnChange = revalidateFormOnChange;
+  exports.runFormValidate = runFormValidate;
   exports.seedValueByPath = seedValueByPath;
   exports.setDisabled = setDisabled;
   exports.setError = setError;
@@ -2644,6 +2735,7 @@
   exports.setInitialValues = setInitialValues;
   exports.setIsSubmitting = setIsSubmitting;
   exports.setServerErrors = setServerErrors;
+  exports.setStatus = setStatus;
   exports.setSubmitSuccessful = setSubmitSuccessful;
   exports.setTouched = setTouched;
   exports.setTouchedByPath = setTouchedByPath;
@@ -2672,15 +2764,19 @@
   exports.useFormState = useFormState;
   exports.useHasErrors = useHasErrors;
   exports.useIsDirty = useIsDirty;
+  exports.useIsFieldDirty = useIsFieldDirty;
+  exports.useIsFieldDirtyByPath = useIsFieldDirtyByPath;
   exports.useIsLoading = useIsLoading;
   exports.useIsSubmitSuccessful = useIsSubmitSuccessful;
   exports.useIsSubmitting = useIsSubmitting;
   exports.useIsValid = useIsValid;
   exports.useIsValidating = useIsValidating;
+  exports.useStatus = useStatus;
   exports.useSubmitCount = useSubmitCount;
   exports.useTouched = useTouched;
   exports.useTouchedByPath = useTouchedByPath;
   exports.useTouchedFields = useTouchedFields;
+  exports.useTransform = useTransform;
   exports.useValue = useValue;
   exports.useValueByPath = useValueByPath;
   exports.useWatch = useWatch;