react-f0rm 0.10.0 → 0.11.1

package/dist/index.umd.js

@@ -58,6 +58,7 @@
     pathCache.set(path, value);
     return value;
   }
+  const isIndex = (segment) => /^-?\d+$/.test(segment);
   function parsePath(path) {
     const result = [];
     let identifier = "";
@@ -90,7 +91,7 @@
             throw new TypeError(`Unterminated bracket in path: ${path}`);
           }
           const content = path.slice(i + 1, close);
-          result.push(/^-?\d+$/.test(content) ? Number(content) : content);
+          result.push(isIndex(content) ? Number(content) : content);
           i = close;
         }
       } else {
@@ -127,9 +128,10 @@
   function set(values, path, value) {
     if (!path.length) return value;
     const [prop, ...props] = path;
-    if (typeof prop === "number") {
+    const index = typeof prop === "number" ? prop : Array.isArray(values) && typeof prop === "string" && isIndex(prop) ? Number(prop) : void 0;
+    if (index !== void 0) {
       const arr = Array.isArray(values) ? values.slice() : [];
-      arr[prop] = set(arr[prop], props, value);
+      arr[index] = set(arr[index], props, value);
       return arr;
     }
     return { ...values, [prop]: set(values && values[prop], props, value) };
@@ -143,7 +145,7 @@
       const prop = path[i];
       if (!owned.has(container)) {
         let copy;
-        if (typeof prop === "number") {
+        if (typeof prop === "number" || Array.isArray(container) && typeof prop === "string" && isIndex(prop)) {
           copy = Array.isArray(container) ? container.slice() : [];
         } else {
           copy = { ...container };
@@ -253,9 +255,16 @@
     return getValueByPath(form, create$1(name));
   }
   function getValueByPath({ initialValues, parsedValues, values, deleted }, path) {
-    if (values.has(path.key)) return values.get(path.key);
-    if (deleted.has(path.key)) return void 0;
-    return get(parsedValues ?? initialValues, path.value);
+    const { key, value: segments } = path;
+    if (values.has(key)) return values.get(key);
+    if (deleted.has(key)) return void 0;
+    for (let i = segments.length - 1; i > 0; i--) {
+      const ancestorKey = JSON.stringify(segments.slice(0, i));
+      if (values.has(ancestorKey)) {
+        return get(values.get(ancestorKey), segments.slice(i));
+      }
+    }
+    return get(parsedValues ?? initialValues, segments);
   }
   function setValue(form, name, value, options) {
     setValueByPath(form, create$1(name), value, options);
@@ -263,6 +272,7 @@
   function setValueByPath(form, path, value, options) {
     const { emitter, values, deleted } = form;
     values.set(path.key, value);
+    pruneDescendantKeys(values, path);
     reviveBranch(deleted, path);
     pruneDirtyBaselines(form, path);
     if (options?.shouldDirty === false) setDirtyBaseline(form, path, value);
@@ -496,6 +506,13 @@
     }
     return false;
   }
+  function pruneDescendantKeys(values, { key }) {
+    if (!values.size) return;
+    const stem = `${key.slice(0, -1)},`;
+    for (const k of values.keys()) {
+      if (k.startsWith(stem)) values.delete(k);
+    }
+  }
   function reviveBranch(deleted, { key }) {
     if (!deleted.size) return;
     for (const tombstone of deleted) {
@@ -1557,6 +1574,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;
@@ -1592,6 +1624,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());
@@ -1649,6 +1689,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;
@@ -1676,12 +1770,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);
@@ -2012,6 +2110,7 @@
   exports.useErrorByPath = useErrorByPath;
   exports.useField = useField;
   exports.useFieldArray = useFieldArray;
+  exports.useFieldArrayItem = useFieldArrayItem;
   exports.useFieldErrors = useFieldErrors;
   exports.useFieldErrorsByPath = useFieldErrorsByPath;
   exports.useForm = useForm;