react-f0rm 0.8.0 → 0.10.0

package/dist/index.umd.js

@@ -222,6 +222,7 @@
       mode: options?.mode ?? "onSubmit",
       reValidateMode: options?.reValidateMode ?? "onChange",
       disabled: options?.disabled ?? false,
+      validateDeps: options?.validateDeps ? new Set(options.validateDeps.map((dep) => create$1(dep).key)) : void 0,
       initialValues: options?.initialValues ?? {},
       values: /* @__PURE__ */ new Map(),
       deleted: /* @__PURE__ */ new Set(),
@@ -263,18 +264,21 @@
     const { emitter, values, deleted } = form;
     values.set(path.key, value);
     reviveBranch(deleted, path);
+    pruneDirtyBaselines(form, path);
+    if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
     bumpDirtyVersion(form);
     if (options?.shouldTouch) setTouchedByPath(form, path);
     if (options?.shouldValidate) form.validators.get(path.key)?.();
     emit(emitter, "change", path);
   }
-  function changeValue(form, name, value) {
-    changeValueByPath(form, create$1(name), value);
+  function changeValue(form, name, value, options) {
+    changeValueByPath(form, create$1(name), value, options);
   }
-  function changeValueByPath(form, path, value) {
+  function changeValueByPath(form, path, value, options) {
+    if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
     const change = form.changeHandlers.get(path.key);
     if (change) change(value);
-    else setValueByPath(form, path, value);
+    else setValueByPath(form, path, value, options);
   }
   function getError(form, name) {
     return getErrorByPath(form, create$1(name));
@@ -302,13 +306,15 @@
   }
   function getFieldState(form, name) {
     const path = create$1(name);
-    const { initialValues, values, touched, validating } = form;
+    const { values, touched, validating } = form;
     const live = values.get(path.key);
     return {
       value: getValueByPath(form, path),
       error: getErrorByPath(form, path),
       errors: getFieldErrorsByPath(form, path),
-      isDirty: values.has(path.key) && get(initialValues, path.value) !== live,
+      // Same rule as getDirtyFields, 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,
       isTouched: touched.has(path.key),
       isValidating: validating.has(path.key)
     };
@@ -391,11 +397,39 @@
     });
     return dirty;
   }
-  function forEachDirtyField({ initialValues, values }, fn) {
-    for (const [key, value] of values) {
+  function forEachDirtyField(form, fn) {
+    for (const [key, value] of form.values) {
       const path = JSON.parse(key);
-      if (get(initialValues, path) !== value) fn(path.join("."));
+      if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
+    }
+  }
+  const dirtyBaselines = /* @__PURE__ */ new WeakMap();
+  function getDirtyBaseline(form, key, segments) {
+    const baselines = dirtyBaselines.get(form);
+    if (baselines?.has(key)) return baselines.get(key);
+    return get(form.initialValues, segments);
+  }
+  function setDirtyBaseline(form, { key }, value) {
+    let baselines = dirtyBaselines.get(form);
+    if (!baselines) {
+      baselines = /* @__PURE__ */ new Map();
+      dirtyBaselines.set(form, baselines);
     }
+    baselines.set(key, value);
+  }
+  function pruneDirtyBaselines(form, { key }) {
+    const baselines = dirtyBaselines.get(form);
+    if (!baselines?.size) return;
+    const stem = `${key.slice(0, -1)},`;
+    for (const baselineKey of baselines.keys()) {
+      if (baselineKey.startsWith(stem)) baselines.delete(baselineKey);
+    }
+  }
+  function clearDirtyBaselines(form, key) {
+    const baselines = dirtyBaselines.get(form);
+    if (!baselines) return;
+    if (key === void 0) baselines.clear();
+    else baselines.delete(key);
   }
   const dirtyFieldsCaches = /* @__PURE__ */ new WeakMap();
   function bumpDirtyVersion(form) {
@@ -444,6 +478,7 @@
     touched.delete(key);
     errors.delete(key);
     validating.delete(key);
+    clearDirtyBaselines(form, key);
     if (!hasLiveBranch(values, segments)) deleted.add(key);
     bumpDirtyVersion(form);
     emit(emitter, "change");
@@ -477,6 +512,7 @@
     form.parsedValues = void 0;
     form.values.clear();
     form.deleted.clear();
+    clearDirtyBaselines(form);
     bumpDirtyVersion(form);
     emit(form.emitter, "change");
   }
@@ -491,6 +527,7 @@
     const { emitter, touched, values, deleted, validating } = form;
     values.clear();
     deleted.clear();
+    clearDirtyBaselines(form);
     if (!options?.keepTouched) touched.clear();
     validating.clear();
     if (!options?.keepIsSubmitting) form.isSubmitting = false;
@@ -512,6 +549,7 @@
     const path = create$1(name);
     const { emitter, values, touched, errors, deleted } = form;
     values.delete(path.key);
+    clearDirtyBaselines(form, path.key);
     if (form.parsedValues !== void 0) {
       form.parsedValues = unset(form.parsedValues, path.value);
       const initial = get(form.initialValues, path.value);
@@ -557,34 +595,75 @@
   function isFieldError(value) {
     return !!value && typeof value === "object" && typeof value.type === "string" && typeof value.message === "string";
   }
-  function setFormErrors(form, result, segments = []) {
+  function setFormErrors(form, result, segments = [], footprint) {
     Object.entries(result).forEach(([key, value]) => {
       const path = [...segments, ...normalizePath(key)];
       if (typeof value === "string") {
-        if (value) setError(form, path, value);
+        if (value) {
+          setError(form, path, value);
+          recordFootprint(form, path, footprint);
+        }
       } else if (Array.isArray(value)) {
         setError(form, path, value);
+        recordFootprint(form, path, footprint);
       } else if (isFieldError(value)) {
         setError(form, path, value);
+        recordFootprint(form, path, footprint);
       } else if (value && typeof value === "object") {
-        setFormErrors(form, value, path);
+        setFormErrors(form, value, path, footprint);
       }
     });
   }
+  function recordFootprint(form, segments, footprint) {
+    if (!footprint) return;
+    const path = create$1(segments);
+    const stored = form.errors.get(path.key);
+    if (stored) footprint.set(path.key, stored);
+  }
   function setParsedValues(form, values) {
     if (values === void 0 || values === form.parsedValues) return;
     form.parsedValues = values;
     emit(form.emitter, "change");
   }
   function applyValidateResult(form, result) {
+    const footprint = form.validateDeps ? getFormErrorFootprint(form) : void 0;
+    if (footprint) {
+      clearFormValidateErrors(form, footprint);
+      footprint.clear();
+    }
     if (!result) return;
     if (typeof result === "object" && VALIDATION_OUTCOME in result) {
       const outcome = result;
-      if (outcome.errors) setFormErrors(form, outcome.errors);
+      if (outcome.errors) setFormErrors(form, outcome.errors, [], footprint);
       setParsedValues(form, outcome.values);
       return;
     }
-    setFormErrors(form, result);
+    setFormErrors(form, result, [], footprint);
+  }
+  const formErrorFootprints = /* @__PURE__ */ new WeakMap();
+  function getFormErrorFootprint(form) {
+    let footprint = formErrorFootprints.get(form);
+    if (!footprint) {
+      footprint = /* @__PURE__ */ new Map();
+      formErrorFootprints.set(form, footprint);
+    }
+    return footprint;
+  }
+  function hasFormValidateErrors(form) {
+    const footprint = formErrorFootprints.get(form);
+    if (!footprint) return false;
+    for (const [key, written] of footprint) {
+      if (form.errors.get(key) === written) return true;
+    }
+    return false;
+  }
+  function clearFormValidateErrors(form, footprint) {
+    for (const [key, written] of footprint) {
+      const stored = form.errors.get(key);
+      if (stored !== written) continue;
+      form.errors.delete(key);
+      emit(form.emitter, "errors", create$1(JSON.parse(key)));
+    }
   }
   const FORM_VALIDATING_KEY = "__form_validate__";
   function fieldsSettled(form) {
@@ -678,6 +757,13 @@
       else waiter.reject(outcome);
     }
   }
+  function revalidateFormOnChange(form, path, mode) {
+    if (!form.validateDeps?.has(path.key) || !form.validate) return;
+    if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || form.reValidateMode === "onChange" && hasFormValidateErrors(form)) {
+      runFormValidate(form).catch(() => {
+      });
+    }
+  }
   async function ensureValidate(form) {
     form.validators.forEach((validator) => validator());
     await waitUntil(
@@ -1429,6 +1515,7 @@
       setValueByPath(form, path, v);
       if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || liveErrors.length > 0 && form.reValidateMode === "onChange")
         validator();
+      revalidateFormOnChange(form, path, mode);
     });
     React.useEffect(() => {
       form.changeHandlers.set(path.key, onChange);
@@ -1901,6 +1988,7 @@
   exports.removeFieldByPath = removeFieldByPath;
   exports.reset = reset;
   exports.resetField = resetField;
+  exports.revalidateFormOnChange = revalidateFormOnChange;
   exports.setDisabled = setDisabled;
   exports.setError = setError;
   exports.setErrorByPath = setErrorByPath;