react-f0rm 0.9.0 → 0.11.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(),
@@ -594,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) {
@@ -715,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(
@@ -1466,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);
@@ -1507,6 +1557,21 @@
   function generateId() {
     return `_${++idCounter}`;
   }
+  const arrayIdsRegistry = /* @__PURE__ */ new WeakMap();
+  function getArrayIds(form, key) {
+    return arrayIdsRegistry.get(form)?.get(key);
+  }
+  function registerArrayIds(form, key, ids) {
+    let registry = arrayIdsRegistry.get(form);
+    if (!registry) {
+      registry = /* @__PURE__ */ new Map();
+      arrayIdsRegistry.set(form, registry);
+    }
+    registry.set(key, ids);
+  }
+  function bumpReducer(count) {
+    return count + 1;
+  }
   function useFieldArrayCore(options, Context) {
     const contextForm = React.useContext(Context);
     const form = options.form || contextForm;
@@ -1542,6 +1607,14 @@
       () => onPathEvent(form.emitter, "change", path, "branch", syncFields),
       [form.emitter, path]
     );
+    registerArrayIds(form, path.key, idsRef.current);
+    React.useEffect(() => {
+      registerArrayIds(form, path.key, idsRef.current);
+      return () => {
+        const registry = arrayIdsRegistry.get(form);
+        if (registry?.get(path.key) === idsRef.current) registry.delete(path.key);
+      };
+    }, [form, path.key]);
     const append = useStageFn((value) => {
       const arr = getArray();
       idsRef.current.push(generateId());
@@ -1599,6 +1672,60 @@
   function useFieldArray(options) {
     return useFieldArrayCore(options, FormContext);
   }
+  function useFieldArrayItemCore(options, Context) {
+    const contextForm = React.useContext(Context);
+    const form = options.form || contextForm;
+    if (!form) throw new Error("no form provided");
+    const { id } = options;
+    const arrayPath = usePath(options.name);
+    const computeIndex = React.useCallback(
+      () => getArrayIds(form, arrayPath.key)?.indexOf(id) ?? -1,
+      [form, arrayPath.key, id]
+    );
+    const computeValue = React.useCallback(
+      (index2) => {
+        const arr = getValueByPath(form, arrayPath);
+        return Array.isArray(arr) ? arr[index2] : void 0;
+      },
+      [form, arrayPath]
+    );
+    const index = computeIndex();
+    const value = computeValue(index);
+    const lastRef = React.useRef({ index, value });
+    lastRef.current = { index, value };
+    const computeRef = useStage({ computeIndex, computeValue });
+    const [, bump] = React.useReducer(bumpReducer, 0);
+    React.useEffect(
+      () => onPathEvent(form.emitter, "change", arrayPath, "leaf", () => {
+        const { computeIndex: idx, computeValue: val } = computeRef.current;
+        const nextIndex = idx();
+        if (nextIndex !== lastRef.current.index || !Object.is(val(nextIndex), lastRef.current.value))
+          bump();
+      }),
+      [form.emitter, arrayPath, computeRef]
+    );
+    const itemPath = usePath([...arrayPath.value, index]);
+    const errors = useFieldErrorsByPath(form, itemPath);
+    const setValue = useStageFn((v) => {
+      if (index < 0) return;
+      const arr = [...getValueByPath(form, arrayPath) ?? []];
+      if (index >= arr.length) return;
+      arr[index] = v;
+      setValueByPath(form, arrayPath, arr);
+    });
+    return {
+      value,
+      setValue,
+      errors,
+      error: errors[0]?.message,
+      name: itemPath.key,
+      index,
+      form
+    };
+  }
+  function useFieldArrayItem(options) {
+    return useFieldArrayItemCore(options, FormContext);
+  }
 
   const FormContext = React.createContext(null);
   const FormProvider = FormContext.Provider;
@@ -1626,12 +1753,16 @@
     function useFieldArray(options) {
       return useFieldArrayCore(options, Context);
     }
+    function useFieldArrayItem(options) {
+      return useFieldArrayItemCore(options, Context);
+    }
     return {
       context: Context,
       FormProvider: FormProvider2,
       useFormContext: useFormContext2,
       useField,
-      useFieldArray
+      useFieldArray,
+      useFieldArrayItem
     };
   }
   const CheckboxGroupContext = React.createContext(null);
@@ -1938,6 +2069,7 @@
   exports.removeFieldByPath = removeFieldByPath;
   exports.reset = reset;
   exports.resetField = resetField;
+  exports.revalidateFormOnChange = revalidateFormOnChange;
   exports.setDisabled = setDisabled;
   exports.setError = setError;
   exports.setErrorByPath = setErrorByPath;
@@ -1961,6 +2093,7 @@
   exports.useErrorByPath = useErrorByPath;
   exports.useField = useField;
   exports.useFieldArray = useFieldArray;
+  exports.useFieldArrayItem = useFieldArrayItem;
   exports.useFieldErrors = useFieldErrors;
   exports.useFieldErrorsByPath = useFieldErrorsByPath;
   exports.useForm = useForm;