@tanstack/form-core 0.41.3 → 0.42.0

package/dist/esm/metaHelper.d.ts

@@ -0,0 +1,8 @@
+import { FormApi } from './FormApi.js';
+import { Validator } from './types.js';
+import { DeepKeys } from './util-types.js';
+type ArrayFieldMode = 'insert' | 'remove' | 'swap' | 'move';
+export declare function metaHelper<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(formApi: FormApi<TFormData, TFormValidator>): {
+    handleArrayFieldMetaShift: (field: DeepKeys<TFormData>, index: number, mode: ArrayFieldMode, secondIndex?: number) => void;
+};
+export {};

package/dist/esm/metaHelper.js

@@ -0,0 +1,116 @@
+function metaHelper(formApi) {
+  function handleArrayFieldMetaShift(field, index, mode, secondIndex) {
+    const affectedFields = getAffectedFields(field, index, mode, secondIndex);
+    const handlers = {
+      insert: () => handleInsertMode(affectedFields, field, index),
+      remove: () => handleRemoveMode(affectedFields),
+      swap: () => secondIndex !== void 0 && handleSwapMode(affectedFields, field, index, secondIndex),
+      move: () => secondIndex !== void 0 && handleMoveMode(affectedFields, field, index, secondIndex)
+    };
+    handlers[mode]();
+  }
+  function getFieldPath(field, index) {
+    return `${field}[${index}]`;
+  }
+  function getAffectedFields(field, index, mode, secondIndex) {
+    const affectedFieldKeys = [getFieldPath(field, index)];
+    if (mode === "swap") {
+      affectedFieldKeys.push(getFieldPath(field, secondIndex));
+    } else if (mode === "move") {
+      const [startIndex, endIndex] = [
+        Math.min(index, secondIndex),
+        Math.max(index, secondIndex)
+      ];
+      for (let i = startIndex; i <= endIndex; i++) {
+        affectedFieldKeys.push(getFieldPath(field, i));
+      }
+    } else {
+      const currentValue = formApi.getFieldValue(field);
+      const fieldItems = Array.isArray(currentValue) ? currentValue.length : 0;
+      for (let i = index + 1; i < fieldItems; i++) {
+        affectedFieldKeys.push(getFieldPath(field, i));
+      }
+    }
+    return Object.keys(formApi.fieldInfo).filter(
+      (fieldKey) => affectedFieldKeys.some((key) => fieldKey.startsWith(key))
+    );
+  }
+  function updateIndex(fieldKey, direction) {
+    return fieldKey.replace(/\[(\d+)\]/, (_, num) => {
+      const currIndex = parseInt(num, 10);
+      const newIndex = direction === "up" ? currIndex + 1 : Math.max(0, currIndex - 1);
+      return `[${newIndex}]`;
+    });
+  }
+  function shiftMeta(fields, direction) {
+    const sortedFields = direction === "up" ? fields : [...fields].reverse();
+    sortedFields.forEach((fieldKey) => {
+      const nextFieldKey = updateIndex(fieldKey.toString(), direction);
+      const nextFieldMeta = formApi.getFieldMeta(nextFieldKey);
+      if (nextFieldMeta) {
+        formApi.setFieldMeta(fieldKey, nextFieldMeta);
+      }
+    });
+  }
+  const getEmptyFieldMeta = () => ({
+    isValidating: false,
+    isTouched: false,
+    isBlurred: false,
+    isDirty: false,
+    isPristine: true,
+    errors: [],
+    errorMap: {}
+  });
+  const handleInsertMode = (fields, field, insertIndex) => {
+    shiftMeta(fields, "down");
+    fields.forEach((fieldKey) => {
+      if (fieldKey.toString().startsWith(getFieldPath(field, insertIndex))) {
+        formApi.setFieldMeta(fieldKey, getEmptyFieldMeta());
+      }
+    });
+  };
+  const handleRemoveMode = (fields) => {
+    shiftMeta(fields, "up");
+  };
+  const handleMoveMode = (fields, field, fromIndex, toIndex) => {
+    const fromFields = new Map(
+      Object.keys(formApi.fieldInfo).filter(
+        (fieldKey) => fieldKey.startsWith(getFieldPath(field, fromIndex))
+      ).map((fieldKey) => [
+        fieldKey,
+        formApi.getFieldMeta(fieldKey)
+      ])
+    );
+    shiftMeta(fields, fromIndex < toIndex ? "up" : "down");
+    Object.keys(formApi.fieldInfo).filter((fieldKey) => fieldKey.startsWith(getFieldPath(field, toIndex))).forEach((fieldKey) => {
+      const fromKey = fieldKey.replace(
+        getFieldPath(field, toIndex),
+        getFieldPath(field, fromIndex)
+      );
+      const fromMeta = fromFields.get(fromKey);
+      if (fromMeta) {
+        formApi.setFieldMeta(fieldKey, fromMeta);
+      }
+    });
+  };
+  const handleSwapMode = (fields, field, index, secondIndex) => {
+    fields.forEach((fieldKey) => {
+      if (!fieldKey.toString().startsWith(getFieldPath(field, index))) return;
+      const swappedKey = fieldKey.toString().replace(
+        getFieldPath(field, index),
+        getFieldPath(field, secondIndex)
+      );
+      const [meta1, meta2] = [
+        formApi.getFieldMeta(fieldKey),
+        formApi.getFieldMeta(swappedKey)
+      ];
+      if (meta1) formApi.setFieldMeta(swappedKey, meta1);
+      if (meta2) formApi.setFieldMeta(fieldKey, meta2);
+    });
+  };
+  return { handleArrayFieldMetaShift };
+}
+export {
+  metaHelper
+};
+//# sourceMappingURL=metaHelper.js.map

package/dist/esm/metaHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metaHelper.js","sources":["../../src/metaHelper.ts"],"sourcesContent":["import type { FieldMeta } from './FieldApi'\nimport type { FormApi } from './FormApi'\nimport type { Validator } from './types'\nimport type { DeepKeys } from './util-types'\n\ntype ArrayFieldMode = 'insert' | 'remove' | 'swap' | 'move'\n\nexport function metaHelper<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(formApi: FormApi<TFormData, TFormValidator>) {\n  function handleArrayFieldMetaShift(\n    field: DeepKeys<TFormData>,\n    index: number,\n    mode: ArrayFieldMode,\n    secondIndex?: number,\n  ) {\n    const affectedFields = getAffectedFields(field, index, mode, secondIndex)\n\n    const handlers = {\n      insert: () => handleInsertMode(affectedFields, field, index),\n      remove: () => handleRemoveMode(affectedFields),\n      swap: () =>\n        secondIndex !== undefined &&\n        handleSwapMode(affectedFields, field, index, secondIndex),\n      move: () =>\n        secondIndex !== undefined &&\n        handleMoveMode(affectedFields, field, index, secondIndex),\n    }\n\n    handlers[mode]()\n  }\n\n  function getFieldPath(field: DeepKeys<TFormData>, index: number): string {\n    return `${field}[${index}]`\n  }\n\n  function getAffectedFields(\n    field: DeepKeys<TFormData>,\n    index: number,\n    mode: ArrayFieldMode,\n    secondIndex?: number,\n  ): DeepKeys<TFormData>[] {\n    const affectedFieldKeys = [getFieldPath(field, index)]\n\n    if (mode === 'swap') {\n      affectedFieldKeys.push(getFieldPath(field, secondIndex!))\n    } else if (mode === 'move') {\n      const [startIndex, endIndex] = [\n        Math.min(index, secondIndex!),\n        Math.max(index, secondIndex!),\n      ]\n      for (let i = startIndex; i <= endIndex; i++) {\n        affectedFieldKeys.push(getFieldPath(field, i))\n      }\n    } else {\n      const currentValue = formApi.getFieldValue(field)\n      const fieldItems = Array.isArray(currentValue) ? currentValue.length : 0\n      for (let i = index + 1; i < fieldItems; i++) {\n        affectedFieldKeys.push(getFieldPath(field, i))\n      }\n    }\n\n    return Object.keys(formApi.fieldInfo).filter((fieldKey) =>\n      affectedFieldKeys.some((key) => fieldKey.startsWith(key)),\n    ) as DeepKeys<TFormData>[]\n  }\n\n  function updateIndex(\n    fieldKey: string,\n    direction: 'up' | 'down',\n  ): DeepKeys<TFormData> {\n    return fieldKey.replace(/\\[(\\d+)\\]/, (_, num) => {\n      const currIndex = parseInt(num, 10)\n      const newIndex =\n        direction === 'up' ? currIndex + 1 : Math.max(0, currIndex - 1)\n      return `[${newIndex}]`\n    }) as DeepKeys<TFormData>\n  }\n\n  function shiftMeta(fields: DeepKeys<TFormData>[], direction: 'up' | 'down') {\n    const sortedFields = direction === 'up' ? fields : [...fields].reverse()\n\n    sortedFields.forEach((fieldKey) => {\n      const nextFieldKey = updateIndex(fieldKey.toString(), direction)\n      const nextFieldMeta = formApi.getFieldMeta(nextFieldKey)\n      if (nextFieldMeta) {\n        formApi.setFieldMeta(fieldKey, nextFieldMeta)\n      }\n    })\n  }\n\n  const getEmptyFieldMeta = (): FieldMeta => ({\n    isValidating: false,\n    isTouched: false,\n    isBlurred: false,\n    isDirty: false,\n    isPristine: true,\n    errors: [],\n    errorMap: {},\n  })\n\n  const handleInsertMode = (\n    fields: DeepKeys<TFormData>[],\n    field: DeepKeys<TFormData>,\n    insertIndex: number,\n  ) => {\n    shiftMeta(fields, 'down')\n\n    fields.forEach((fieldKey) => {\n      if (fieldKey.toString().startsWith(getFieldPath(field, insertIndex))) {\n        formApi.setFieldMeta(fieldKey, getEmptyFieldMeta())\n      }\n    })\n  }\n\n  const handleRemoveMode = (fields: DeepKeys<TFormData>[]) => {\n    shiftMeta(fields, 'up')\n  }\n\n  const handleMoveMode = (\n    fields: DeepKeys<TFormData>[],\n    field: DeepKeys<TFormData>,\n    fromIndex: number,\n    toIndex: number,\n  ) => {\n    // Store the original field meta that will be reapplied at the destination index\n    const fromFields = new Map(\n      Object.keys(formApi.fieldInfo)\n        .filter((fieldKey) =>\n          fieldKey.startsWith(getFieldPath(field, fromIndex)),\n        )\n        .map((fieldKey) => [\n          fieldKey as DeepKeys<TFormData>,\n          formApi.getFieldMeta(fieldKey as DeepKeys<TFormData>),\n        ]),\n    )\n\n    shiftMeta(fields, fromIndex < toIndex ? 'up' : 'down')\n\n    // Reapply the stored field meta at the destination index\n    Object.keys(formApi.fieldInfo)\n      .filter((fieldKey) => fieldKey.startsWith(getFieldPath(field, toIndex)))\n      .forEach((fieldKey) => {\n        const fromKey = fieldKey.replace(\n          getFieldPath(field, toIndex),\n          getFieldPath(field, fromIndex),\n        ) as DeepKeys<TFormData>\n\n        const fromMeta = fromFields.get(fromKey)\n        if (fromMeta) {\n          formApi.setFieldMeta(fieldKey as DeepKeys<TFormData>, fromMeta)\n        }\n      })\n  }\n\n  const handleSwapMode = (\n    fields: DeepKeys<TFormData>[],\n    field: DeepKeys<TFormData>,\n    index: number,\n    secondIndex: number,\n  ) => {\n    fields.forEach((fieldKey) => {\n      if (!fieldKey.toString().startsWith(getFieldPath(field, index))) return\n\n      const swappedKey = fieldKey\n        .toString()\n        .replace(\n          getFieldPath(field, index),\n          getFieldPath(field, secondIndex),\n        ) as DeepKeys<TFormData>\n\n      const [meta1, meta2] = [\n        formApi.getFieldMeta(fieldKey),\n        formApi.getFieldMeta(swappedKey),\n      ]\n\n      if (meta1) formApi.setFieldMeta(swappedKey, meta1)\n      if (meta2) formApi.setFieldMeta(fieldKey, meta2)\n    })\n  }\n\n  return { handleArrayFieldMetaShift }\n}\n"],"names":[],"mappings":"AAOO,SAAS,WAGd,SAA6C;AAC7C,WAAS,0BACP,OACA,OACA,MACA,aACA;AACA,UAAM,iBAAiB,kBAAkB,OAAO,OAAO,MAAM,WAAW;AAExE,UAAM,WAAW;AAAA,MACf,QAAQ,MAAM,iBAAiB,gBAAgB,OAAO,KAAK;AAAA,MAC3D,QAAQ,MAAM,iBAAiB,cAAc;AAAA,MAC7C,MAAM,MACJ,gBAAgB,UAChB,eAAe,gBAAgB,OAAO,OAAO,WAAW;AAAA,MAC1D,MAAM,MACJ,gBAAgB,UAChB,eAAe,gBAAgB,OAAO,OAAO,WAAW;AAAA,IAC5D;AAEA,aAAS,IAAI,EAAE;AAAA,EAAA;AAGR,WAAA,aAAa,OAA4B,OAAuB;AAChE,WAAA,GAAG,KAAK,IAAI,KAAK;AAAA,EAAA;AAG1B,WAAS,kBACP,OACA,OACA,MACA,aACuB;AACvB,UAAM,oBAAoB,CAAC,aAAa,OAAO,KAAK,CAAC;AAErD,QAAI,SAAS,QAAQ;AACnB,wBAAkB,KAAK,aAAa,OAAO,WAAY,CAAC;AAAA,IAAA,WAC/C,SAAS,QAAQ;AACpB,YAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,QAC7B,KAAK,IAAI,OAAO,WAAY;AAAA,QAC5B,KAAK,IAAI,OAAO,WAAY;AAAA,MAC9B;AACA,eAAS,IAAI,YAAY,KAAK,UAAU,KAAK;AAC3C,0BAAkB,KAAK,aAAa,OAAO,CAAC,CAAC;AAAA,MAAA;AAAA,IAC/C,OACK;AACC,YAAA,eAAe,QAAQ,cAAc,KAAK;AAChD,YAAM,aAAa,MAAM,QAAQ,YAAY,IAAI,aAAa,SAAS;AACvE,eAAS,IAAI,QAAQ,GAAG,IAAI,YAAY,KAAK;AAC3C,0BAAkB,KAAK,aAAa,OAAO,CAAC,CAAC;AAAA,MAAA;AAAA,IAC/C;AAGF,WAAO,OAAO,KAAK,QAAQ,SAAS,EAAE;AAAA,MAAO,CAAC,aAC5C,kBAAkB,KAAK,CAAC,QAAQ,SAAS,WAAW,GAAG,CAAC;AAAA,IAC1D;AAAA,EAAA;AAGO,WAAA,YACP,UACA,WACqB;AACrB,WAAO,SAAS,QAAQ,aAAa,CAAC,GAAG,QAAQ;AACzC,YAAA,YAAY,SAAS,KAAK,EAAE;AAC5B,YAAA,WACJ,cAAc,OAAO,YAAY,IAAI,KAAK,IAAI,GAAG,YAAY,CAAC;AAChE,aAAO,IAAI,QAAQ;AAAA,IAAA,CACpB;AAAA,EAAA;AAGM,WAAA,UAAU,QAA+B,WAA0B;AACpE,UAAA,eAAe,cAAc,OAAO,SAAS,CAAC,GAAG,MAAM,EAAE,QAAQ;AAE1D,iBAAA,QAAQ,CAAC,aAAa;AACjC,YAAM,eAAe,YAAY,SAAS,SAAA,GAAY,SAAS;AACzD,YAAA,gBAAgB,QAAQ,aAAa,YAAY;AACvD,UAAI,eAAe;AACT,gBAAA,aAAa,UAAU,aAAa;AAAA,MAAA;AAAA,IAC9C,CACD;AAAA,EAAA;AAGH,QAAM,oBAAoB,OAAkB;AAAA,IAC1C,cAAc;AAAA,IACd,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,CAAC;AAAA,IACT,UAAU,CAAA;AAAA,EAAC;AAGb,QAAM,mBAAmB,CACvB,QACA,OACA,gBACG;AACH,cAAU,QAAQ,MAAM;AAEjB,WAAA,QAAQ,CAAC,aAAa;AACvB,UAAA,SAAS,WAAW,WAAW,aAAa,OAAO,WAAW,CAAC,GAAG;AAC5D,gBAAA,aAAa,UAAU,mBAAmB;AAAA,MAAA;AAAA,IACpD,CACD;AAAA,EACH;AAEM,QAAA,mBAAmB,CAAC,WAAkC;AAC1D,cAAU,QAAQ,IAAI;AAAA,EACxB;AAEA,QAAM,iBAAiB,CACrB,QACA,OACA,WACA,YACG;AAEH,UAAM,aAAa,IAAI;AAAA,MACrB,OAAO,KAAK,QAAQ,SAAS,EAC1B;AAAA,QAAO,CAAC,aACP,SAAS,WAAW,aAAa,OAAO,SAAS,CAAC;AAAA,MAAA,EAEnD,IAAI,CAAC,aAAa;AAAA,QACjB;AAAA,QACA,QAAQ,aAAa,QAA+B;AAAA,MACrD,CAAA;AAAA,IACL;AAEA,cAAU,QAAQ,YAAY,UAAU,OAAO,MAAM;AAGrD,WAAO,KAAK,QAAQ,SAAS,EAC1B,OAAO,CAAC,aAAa,SAAS,WAAW,aAAa,OAAO,OAAO,CAAC,CAAC,EACtE,QAAQ,CAAC,aAAa;AACrB,YAAM,UAAU,SAAS;AAAA,QACvB,aAAa,OAAO,OAAO;AAAA,QAC3B,aAAa,OAAO,SAAS;AAAA,MAC/B;AAEM,YAAA,WAAW,WAAW,IAAI,OAAO;AACvC,UAAI,UAAU;AACJ,gBAAA,aAAa,UAAiC,QAAQ;AAAA,MAAA;AAAA,IAChE,CACD;AAAA,EACL;AAEA,QAAM,iBAAiB,CACrB,QACA,OACA,OACA,gBACG;AACI,WAAA,QAAQ,CAAC,aAAa;AACvB,UAAA,CAAC,SAAS,WAAW,WAAW,aAAa,OAAO,KAAK,CAAC,EAAG;AAE3D,YAAA,aAAa,SAChB,SAAA,EACA;AAAA,QACC,aAAa,OAAO,KAAK;AAAA,QACzB,aAAa,OAAO,WAAW;AAAA,MACjC;AAEI,YAAA,CAAC,OAAO,KAAK,IAAI;AAAA,QACrB,QAAQ,aAAa,QAAQ;AAAA,QAC7B,QAAQ,aAAa,UAAU;AAAA,MACjC;AAEA,UAAI,MAAO,SAAQ,aAAa,YAAY,KAAK;AACjD,UAAI,MAAO,SAAQ,aAAa,UAAU,KAAK;AAAA,IAAA,CAChD;AAAA,EACH;AAEA,SAAO,EAAE,0BAA0B;AACrC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/form-core",
-  "version": "0.41.3",
+  "version": "0.42.0",
   "description": "Powerful, type-safe, framework agnostic forms.",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/FieldApi.ts

@@ -989,12 +989,15 @@ export class FieldApi<
    */
   validate = (
     cause: ValidationCause,
+    opts?: { skipFormValidation?: boolean },
   ): ValidationError[] | Promise<ValidationError[]> => {
     // If the field is pristine, do not validate
     if (!this.state.meta.isTouched) return []
 
     // Attempt to sync validate first
-    const { fieldsErrorMap } = this.form.validateSync(cause)
+    const { fieldsErrorMap } = opts?.skipFormValidation
+      ? { fieldsErrorMap: {} as never }
+      : this.form.validateSync(cause)
     const { hasErrored } = this.validateSync(
       cause,
       fieldsErrorMap[this.name] ?? {},
@@ -1008,7 +1011,9 @@ export class FieldApi<
     }
 
     // No error? Attempt async validation
-    const formValidationResultPromise = this.form.validateAsync(cause)
+    const formValidationResultPromise = opts?.skipFormValidation
+      ? Promise.resolve({})
+      : this.form.validateAsync(cause)
     return this.validateAsync(cause, formValidationResultPromise)
   }
 

package/src/FormApi.ts

@@ -13,6 +13,7 @@ import {
   isStandardSchemaValidator,
   standardSchemaValidator,
 } from './standardSchemaValidator'
+import { metaHelper } from './metaHelper'
 import type { StandardSchemaV1 } from './standardSchemaValidator'
 import type { FieldApi, FieldMeta, FieldMetaBase } from './FieldApi'
 import type {
@@ -722,7 +723,7 @@ export class FormApi<
   }
 
   /**
-   * Validates form and all fields in using the correct handlers for a given validation cause.
+   * Validates all fields using the correct handlers for a given validation cause.
    */
   validateAllFields = async (cause: ValidationCause) => {
     const fieldValidationPromises: Promise<ValidationError[]>[] = [] as any
@@ -735,7 +736,9 @@ export class FormApi<
         // Validate the field
         fieldValidationPromises.push(
           // Remember, `validate` is either a sync operation or a promise
-          Promise.resolve().then(() => fieldInstance.validate(cause)),
+          Promise.resolve().then(() =>
+            fieldInstance.validate(cause, { skipFormValidation: true }),
+          ),
         )
         // If any fields are not touched
         if (!field.instance.state.meta.isTouched) {
@@ -1076,9 +1079,19 @@ export class FormApi<
       this.baseStore.setState((prev) => ({ ...prev, isSubmitting: false }))
     }
 
-    // Validate form and all fields
     await this.validateAllFields('submit')
 
+    if (!this.state.isFieldsValid) {
+      done()
+      this.options.onSubmitInvalid?.({
+        value: this.state.values,
+        formApi: this,
+      })
+      return
+    }
+
+    await this.validate('submit')
+
     // Fields are invalid, do not submit
     if (!this.state.isValid) {
       done()
@@ -1253,9 +1266,6 @@ export class FormApi<
     this.validateField(field, 'change')
   }
 
-  /**
-   * Inserts a value into an array field at the specified index, shifting the subsequent values to the right.
-   */
   insertFieldValue = async <TField extends DeepKeys<TFormData>>(
     field: TField,
     index: number,
@@ -1278,6 +1288,11 @@ export class FormApi<
 
     // Validate the whole array + all fields that have shifted
     await this.validateField(field, 'change')
+
+    // Shift down all meta after validating to make sure the new field has been mounted
+    metaHelper(this).handleArrayFieldMetaShift(field, index, 'insert')
+
+    await this.validateArrayFieldsStartingFrom(field, index, 'change')
   }
 
   /**
@@ -1330,6 +1345,9 @@ export class FormApi<
       opts,
     )
 
+    // Shift up all meta
+    metaHelper(this).handleArrayFieldMetaShift(field, index, 'remove')
+
     if (lastIndex !== null) {
       const start = `${field}[${lastIndex}]`
       const fieldsToDelete = Object.keys(this.fieldInfo).filter((f) =>
@@ -1364,6 +1382,9 @@ export class FormApi<
       opts,
     )
 
+    // Swap meta
+    metaHelper(this).handleArrayFieldMetaShift(field, index1, 'swap', index2)
+
     // Validate the whole array
     this.validateField(field, 'change')
     // Validate the swapped fields
@@ -1389,6 +1410,9 @@ export class FormApi<
       opts,
     )
 
+    // Move meta between index1 and index2
+    metaHelper(this).handleArrayFieldMetaShift(field, index1, 'move', index2)
+
     // Validate the whole array
     this.validateField(field, 'change')
     // Validate the moved fields

package/src/metaHelper.ts

@@ -0,0 +1,184 @@
+import type { FieldMeta } from './FieldApi'
+import type { FormApi } from './FormApi'
+import type { Validator } from './types'
+import type { DeepKeys } from './util-types'
+
+type ArrayFieldMode = 'insert' | 'remove' | 'swap' | 'move'
+
+export function metaHelper<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(formApi: FormApi<TFormData, TFormValidator>) {
+  function handleArrayFieldMetaShift(
+    field: DeepKeys<TFormData>,
+    index: number,
+    mode: ArrayFieldMode,
+    secondIndex?: number,
+  ) {
+    const affectedFields = getAffectedFields(field, index, mode, secondIndex)
+
+    const handlers = {
+      insert: () => handleInsertMode(affectedFields, field, index),
+      remove: () => handleRemoveMode(affectedFields),
+      swap: () =>
+        secondIndex !== undefined &&
+        handleSwapMode(affectedFields, field, index, secondIndex),
+      move: () =>
+        secondIndex !== undefined &&
+        handleMoveMode(affectedFields, field, index, secondIndex),
+    }
+
+    handlers[mode]()
+  }
+
+  function getFieldPath(field: DeepKeys<TFormData>, index: number): string {
+    return `${field}[${index}]`
+  }
+
+  function getAffectedFields(
+    field: DeepKeys<TFormData>,
+    index: number,
+    mode: ArrayFieldMode,
+    secondIndex?: number,
+  ): DeepKeys<TFormData>[] {
+    const affectedFieldKeys = [getFieldPath(field, index)]
+
+    if (mode === 'swap') {
+      affectedFieldKeys.push(getFieldPath(field, secondIndex!))
+    } else if (mode === 'move') {
+      const [startIndex, endIndex] = [
+        Math.min(index, secondIndex!),
+        Math.max(index, secondIndex!),
+      ]
+      for (let i = startIndex; i <= endIndex; i++) {
+        affectedFieldKeys.push(getFieldPath(field, i))
+      }
+    } else {
+      const currentValue = formApi.getFieldValue(field)
+      const fieldItems = Array.isArray(currentValue) ? currentValue.length : 0
+      for (let i = index + 1; i < fieldItems; i++) {
+        affectedFieldKeys.push(getFieldPath(field, i))
+      }
+    }
+
+    return Object.keys(formApi.fieldInfo).filter((fieldKey) =>
+      affectedFieldKeys.some((key) => fieldKey.startsWith(key)),
+    ) as DeepKeys<TFormData>[]
+  }
+
+  function updateIndex(
+    fieldKey: string,
+    direction: 'up' | 'down',
+  ): DeepKeys<TFormData> {
+    return fieldKey.replace(/\[(\d+)\]/, (_, num) => {
+      const currIndex = parseInt(num, 10)
+      const newIndex =
+        direction === 'up' ? currIndex + 1 : Math.max(0, currIndex - 1)
+      return `[${newIndex}]`
+    }) as DeepKeys<TFormData>
+  }
+
+  function shiftMeta(fields: DeepKeys<TFormData>[], direction: 'up' | 'down') {
+    const sortedFields = direction === 'up' ? fields : [...fields].reverse()
+
+    sortedFields.forEach((fieldKey) => {
+      const nextFieldKey = updateIndex(fieldKey.toString(), direction)
+      const nextFieldMeta = formApi.getFieldMeta(nextFieldKey)
+      if (nextFieldMeta) {
+        formApi.setFieldMeta(fieldKey, nextFieldMeta)
+      }
+    })
+  }
+
+  const getEmptyFieldMeta = (): FieldMeta => ({
+    isValidating: false,
+    isTouched: false,
+    isBlurred: false,
+    isDirty: false,
+    isPristine: true,
+    errors: [],
+    errorMap: {},
+  })
+
+  const handleInsertMode = (
+    fields: DeepKeys<TFormData>[],
+    field: DeepKeys<TFormData>,
+    insertIndex: number,
+  ) => {
+    shiftMeta(fields, 'down')
+
+    fields.forEach((fieldKey) => {
+      if (fieldKey.toString().startsWith(getFieldPath(field, insertIndex))) {
+        formApi.setFieldMeta(fieldKey, getEmptyFieldMeta())
+      }
+    })
+  }
+
+  const handleRemoveMode = (fields: DeepKeys<TFormData>[]) => {
+    shiftMeta(fields, 'up')
+  }
+
+  const handleMoveMode = (
+    fields: DeepKeys<TFormData>[],
+    field: DeepKeys<TFormData>,
+    fromIndex: number,
+    toIndex: number,
+  ) => {
+    // Store the original field meta that will be reapplied at the destination index
+    const fromFields = new Map(
+      Object.keys(formApi.fieldInfo)
+        .filter((fieldKey) =>
+          fieldKey.startsWith(getFieldPath(field, fromIndex)),
+        )
+        .map((fieldKey) => [
+          fieldKey as DeepKeys<TFormData>,
+          formApi.getFieldMeta(fieldKey as DeepKeys<TFormData>),
+        ]),
+    )
+
+    shiftMeta(fields, fromIndex < toIndex ? 'up' : 'down')
+
+    // Reapply the stored field meta at the destination index
+    Object.keys(formApi.fieldInfo)
+      .filter((fieldKey) => fieldKey.startsWith(getFieldPath(field, toIndex)))
+      .forEach((fieldKey) => {
+        const fromKey = fieldKey.replace(
+          getFieldPath(field, toIndex),
+          getFieldPath(field, fromIndex),
+        ) as DeepKeys<TFormData>
+
+        const fromMeta = fromFields.get(fromKey)
+        if (fromMeta) {
+          formApi.setFieldMeta(fieldKey as DeepKeys<TFormData>, fromMeta)
+        }
+      })
+  }
+
+  const handleSwapMode = (
+    fields: DeepKeys<TFormData>[],
+    field: DeepKeys<TFormData>,
+    index: number,
+    secondIndex: number,
+  ) => {
+    fields.forEach((fieldKey) => {
+      if (!fieldKey.toString().startsWith(getFieldPath(field, index))) return
+
+      const swappedKey = fieldKey
+        .toString()
+        .replace(
+          getFieldPath(field, index),
+          getFieldPath(field, secondIndex),
+        ) as DeepKeys<TFormData>
+
+      const [meta1, meta2] = [
+        formApi.getFieldMeta(fieldKey),
+        formApi.getFieldMeta(swappedKey),
+      ]
+
+      if (meta1) formApi.setFieldMeta(swappedKey, meta1)
+      if (meta2) formApi.setFieldMeta(fieldKey, meta2)
+    })
+  }
+
+  return { handleArrayFieldMetaShift }
+}