@tanstack/react-form 0.0.7 → 0.0.9

package/build/stats-react.json

@@ -11,11 +11,11 @@
             "children": [
               {
                 "name": "@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
-                "uid": "b353-47"
+                "uid": "766a-45"
               },
               {
                 "name": "@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js",
-                "uid": "b353-53"
+                "uid": "766a-51"
               }
             ]
           },
@@ -24,33 +24,29 @@
             "children": [
               {
                 "name": "form-core/build/esm/index.js",
-                "uid": "b353-49"
+                "uid": "766a-47"
               },
               {
                 "name": "react-form/src",
                 "children": [
                   {
-                    "uid": "b353-55",
+                    "uid": "766a-53",
                     "name": "formContext.ts"
                   },
                   {
-                    "uid": "b353-57",
-                    "name": "useField.ts"
+                    "uid": "766a-55",
+                    "name": "useField.tsx"
                   },
                   {
-                    "uid": "b353-59",
-                    "name": "Field.tsx"
-                  },
-                  {
-                    "uid": "b353-61",
+                    "uid": "766a-57",
                     "name": "useForm.tsx"
                   },
                   {
-                    "uid": "b353-63",
+                    "uid": "766a-59",
                     "name": "createFormFactory.ts"
                   },
                   {
-                    "uid": "b353-65",
+                    "uid": "766a-61",
                     "name": "index.ts"
                   }
                 ]
@@ -58,7 +54,7 @@
             ]
           },
           {
-            "uid": "b353-51",
+            "uid": "766a-49",
             "name": "\u0000rollupPluginBabelHelpers.js"
           }
         ]
@@ -67,334 +63,282 @@
     "isRoot": true
   },
   "nodeParts": {
-    "b353-47": {
+    "766a-45": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "b353-46"
+      "mainUid": "766a-44"
     },
-    "b353-49": {
-      "renderedLength": 23458,
-      "gzipLength": 5139,
+    "766a-47": {
+      "renderedLength": 23508,
+      "gzipLength": 5149,
       "brotliLength": 0,
-      "mainUid": "b353-48"
+      "mainUid": "766a-46"
     },
-    "b353-51": {
+    "766a-49": {
       "renderedLength": 431,
       "gzipLength": 240,
       "brotliLength": 0,
-      "mainUid": "b353-50"
+      "mainUid": "766a-48"
     },
-    "b353-53": {
+    "766a-51": {
       "renderedLength": 978,
       "gzipLength": 456,
       "brotliLength": 0,
-      "mainUid": "b353-52"
+      "mainUid": "766a-50"
     },
-    "b353-55": {
+    "766a-53": {
       "renderedLength": 296,
       "gzipLength": 200,
       "brotliLength": 0,
-      "mainUid": "b353-54"
+      "mainUid": "766a-52"
     },
-    "b353-57": {
-      "renderedLength": 610,
-      "gzipLength": 324,
+    "766a-55": {
+      "renderedLength": 2096,
+      "gzipLength": 779,
       "brotliLength": 0,
-      "mainUid": "b353-56"
+      "mainUid": "766a-54"
     },
-    "b353-59": {
-      "renderedLength": 320,
-      "gzipLength": 203,
+    "766a-57": {
+      "renderedLength": 1287,
+      "gzipLength": 495,
       "brotliLength": 0,
-      "mainUid": "b353-58"
+      "mainUid": "766a-56"
     },
-    "b353-61": {
-      "renderedLength": 1264,
-      "gzipLength": 486,
+    "766a-59": {
+      "renderedLength": 217,
+      "gzipLength": 138,
       "brotliLength": 0,
-      "mainUid": "b353-60"
+      "mainUid": "766a-58"
     },
-    "b353-63": {
-      "renderedLength": 242,
-      "gzipLength": 153,
-      "brotliLength": 0,
-      "mainUid": "b353-62"
-    },
-    "b353-65": {
+    "766a-61": {
       "renderedLength": 0,
       "gzipLength": 0,
       "brotliLength": 0,
-      "mainUid": "b353-64"
+      "mainUid": "766a-60"
     }
   },
   "nodeMetas": {
-    "b353-46": {
+    "766a-44": {
       "id": "/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "b353-47"
+        "index.production.js": "766a-45"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "b353-48"
+          "uid": "766a-46"
         },
         {
-          "uid": "b353-52"
+          "uid": "766a-50"
         }
       ]
     },
-    "b353-48": {
+    "766a-46": {
       "id": "/packages/form-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "b353-49"
+        "index.production.js": "766a-47"
       },
       "imported": [
         {
-          "uid": "b353-46"
+          "uid": "766a-44"
         }
       ],
       "importedBy": [
         {
-          "uid": "b353-64"
+          "uid": "766a-60"
         },
         {
-          "uid": "b353-60"
+          "uid": "766a-56"
         },
         {
-          "uid": "b353-58"
-        },
-        {
-          "uid": "b353-56"
+          "uid": "766a-54"
         }
       ]
     },
-    "b353-50": {
+    "766a-48": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "b353-51"
+        "index.production.js": "766a-49"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "b353-60"
+          "uid": "766a-56"
         }
       ]
     },
-    "b353-52": {
+    "766a-50": {
       "id": "/node_modules/.pnpm/@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "b353-53"
+        "index.production.js": "766a-51"
       },
       "imported": [
         {
-          "uid": "b353-67"
+          "uid": "766a-63"
         },
         {
-          "uid": "b353-46"
+          "uid": "766a-44"
         }
       ],
       "importedBy": [
         {
-          "uid": "b353-60"
+          "uid": "766a-56"
         },
         {
-          "uid": "b353-56"
+          "uid": "766a-54"
         }
       ]
     },
-    "b353-54": {
+    "766a-52": {
       "id": "/packages/react-form/src/formContext.ts",
       "moduleParts": {
-        "index.production.js": "b353-55"
+        "index.production.js": "766a-53"
       },
       "imported": [
         {
-          "uid": "b353-66"
+          "uid": "766a-62"
         }
       ],
       "importedBy": [
         {
-          "uid": "b353-60"
+          "uid": "766a-56"
         },
         {
-          "uid": "b353-56"
+          "uid": "766a-54"
         }
       ]
     },
-    "b353-56": {
-      "id": "/packages/react-form/src/useField.ts",
+    "766a-54": {
+      "id": "/packages/react-form/src/useField.tsx",
       "moduleParts": {
-        "index.production.js": "b353-57"
+        "index.production.js": "766a-55"
       },
       "imported": [
         {
-          "uid": "b353-66"
+          "uid": "766a-62"
         },
         {
-          "uid": "b353-52"
+          "uid": "766a-50"
         },
         {
-          "uid": "b353-48"
+          "uid": "766a-46"
         },
         {
-          "uid": "b353-54"
+          "uid": "766a-52"
         }
       ],
       "importedBy": [
         {
-          "uid": "b353-64"
-        },
-        {
-          "uid": "b353-60"
+          "uid": "766a-60"
         },
         {
-          "uid": "b353-58"
+          "uid": "766a-56"
         },
         {
-          "uid": "b353-62"
+          "uid": "766a-58"
         }
       ]
     },
-    "b353-58": {
-      "id": "/packages/react-form/src/Field.tsx",
-      "moduleParts": {
-        "index.production.js": "b353-59"
-      },
-      "imported": [
-        {
-          "uid": "b353-66"
-        },
-        {
-          "uid": "b353-48"
-        },
-        {
-          "uid": "b353-56"
-        }
-      ],
-      "importedBy": [
-        {
-          "uid": "b353-64"
-        },
-        {
-          "uid": "b353-60"
-        },
-        {
-          "uid": "b353-62"
-        }
-      ]
-    },
-    "b353-60": {
+    "766a-56": {
       "id": "/packages/react-form/src/useForm.tsx",
       "moduleParts": {
-        "index.production.js": "b353-61"
+        "index.production.js": "766a-57"
       },
       "imported": [
         {
-          "uid": "b353-50"
+          "uid": "766a-48"
         },
         {
-          "uid": "b353-48"
+          "uid": "766a-46"
         },
         {
-          "uid": "b353-52"
+          "uid": "766a-50"
         },
         {
-          "uid": "b353-66"
+          "uid": "766a-62"
         },
         {
-          "uid": "b353-58"
+          "uid": "766a-54"
         },
         {
-          "uid": "b353-56"
-        },
-        {
-          "uid": "b353-54"
+          "uid": "766a-52"
         }
       ],
       "importedBy": [
         {
-          "uid": "b353-64"
+          "uid": "766a-60"
         },
         {
-          "uid": "b353-62"
+          "uid": "766a-58"
         }
       ]
     },
-    "b353-62": {
+    "766a-58": {
       "id": "/packages/react-form/src/createFormFactory.ts",
       "moduleParts": {
-        "index.production.js": "b353-63"
+        "index.production.js": "766a-59"
       },
       "imported": [
         {
-          "uid": "b353-56"
-        },
-        {
-          "uid": "b353-60"
+          "uid": "766a-54"
         },
         {
-          "uid": "b353-58"
+          "uid": "766a-56"
         }
       ],
       "importedBy": [
         {
-          "uid": "b353-64"
+          "uid": "766a-60"
         }
       ]
     },
-    "b353-64": {
+    "766a-60": {
       "id": "/packages/react-form/src/index.ts",
       "moduleParts": {
-        "index.production.js": "b353-65"
+        "index.production.js": "766a-61"
       },
       "imported": [
         {
-          "uid": "b353-48"
+          "uid": "766a-46"
         },
         {
-          "uid": "b353-60"
+          "uid": "766a-56"
         },
         {
-          "uid": "b353-58"
+          "uid": "766a-54"
         },
         {
-          "uid": "b353-56"
-        },
-        {
-          "uid": "b353-62"
+          "uid": "766a-58"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "b353-66": {
+    "766a-62": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "b353-60"
-        },
-        {
-          "uid": "b353-58"
+          "uid": "766a-56"
         },
         {
-          "uid": "b353-56"
+          "uid": "766a-54"
         },
         {
-          "uid": "b353-54"
+          "uid": "766a-52"
         }
       ],
       "isExternal": true
     },
-    "b353-67": {
+    "766a-63": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "b353-52"
+          "uid": "766a-50"
         }
       ],
       "isExternal": true

package/build/types/form-core/src/FieldApi.d.ts

@@ -4,6 +4,7 @@ import { Store } from '@tanstack/store';
 export type ValidationCause = 'change' | 'blur' | 'submit';
 export interface FieldOptions<TData, TFormData> {
     name: unknown extends TFormData ? string : DeepKeys<TFormData>;
+    index?: TData extends any[] ? number : never;
     defaultValue?: TData;
     validate?: (value: TData, fieldApi: FieldApi<TData, TFormData>) => ValidationError;
     validateAsync?: (value: TData, fieldApi: FieldApi<TData, TFormData>) => ValidationError | Promise<ValidationError>;
@@ -63,7 +64,7 @@ export declare class FieldApi<TData, TFormData> {
     getMeta: () => FieldMeta;
     setMeta: (updater: Updater<FieldMeta>) => void;
     getInfo: () => Record<DeepKeys<TFormData>, import("./FormApi").FieldInfo<TFormData>>[DeepKeys<TFormData>];
-    pushValue: (value: TData) => void;
+    pushValue: (value: TData extends any[] ? TData[number] : never) => void;
     insertValue: (index: number, value: TData) => void;
     removeValue: (index: number) => void;
     swapValues: (aIndex: number, bIndex: number) => void;

package/build/types/form-core/src/FormApi.d.ts

@@ -53,7 +53,7 @@ export declare class FormApi<TFormData> {
     fieldName?: string;
     validationMeta: ValidationMeta;
     constructor(opts?: FormOptions<TFormData>);
-    update: (options: FormOptions<TFormData>) => void;
+    update: (options?: FormOptions<TFormData>) => void;
     reset: () => void;
     validateAllFields: () => Promise<ValidationError[]>;
     validateForm: () => Promise<ValidationError>;
@@ -71,7 +71,7 @@ export declare class FormApi<TFormData> {
     insertFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, index: number, value: DeepValue<TFormData, TField>, opts?: {
         touch?: boolean;
     }) => void;
-    spliceFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, index: number, opts?: {
+    removeFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, index: number, opts?: {
         touch?: boolean;
     }) => void;
     swapFieldValues: <TField extends DeepKeys<TFormData>>(field: TField, index1: number, index2: number) => void;

package/build/types/form-core/src/utils.d.ts

@@ -10,7 +10,13 @@ type IsTuple<T> = T extends readonly any[] & {
     length: infer Length;
 } ? Length extends Index40 ? T : never : never;
 type AllowedIndexes<Tuple extends ReadonlyArray<any>, Keys extends number = never> = Tuple extends readonly [] ? Keys : Tuple extends readonly [infer _, ...infer Tail] ? AllowedIndexes<Tail, Keys | Tail['length']> : Keys;
-export type DeepKeys<T> = unknown extends T ? keyof T : object extends T ? string : T extends readonly any[] & IsTuple<T> ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>> : T extends any[] ? never & 'Dynamic length array indexing is not supported' : T extends Date ? never : T extends object ? (keyof T & string) | DeepKeysPrefix<T, keyof T> : never;
+export type DeepKeys<T> = unknown extends T ? keyof T : object extends T ? string : T extends readonly any[] & IsTuple<T> ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>> : T extends any[] ? DeepKeys<T[number]> : T extends Date ? never : T extends object ? (keyof T & string) | DeepKeysPrefix<T, keyof T> : never;
 type DeepKeysPrefix<T, TPrefix> = TPrefix extends keyof T & (number | string) ? `${TPrefix}.${DeepKeys<T[TPrefix]> & string}` : never;
 export type DeepValue<T, TProp> = T extends Record<string | number, any> ? TProp extends `${infer TBranch}.${infer TDeepProp}` ? DeepValue<T[TBranch], TDeepProp> : T[TProp & string] : never;
+type Narrowable = string | number | bigint | boolean;
+type NarrowRaw<A> = (A extends [] ? [] : never) | (A extends Narrowable ? A : never) | {
+    [K in keyof A]: A[K] extends Function ? A[K] : NarrowRaw<A[K]>;
+};
+export type Narrow<A> = Try<A, [], NarrowRaw<A>>;
+type Try<A1, A2, Catch = never> = A1 extends A2 ? A1 : Catch;
 export {};

package/build/types/index.d.ts

@@ -8,35 +8,36 @@
  *
  * @license MIT
  */
-import { DeepKeys, FieldApi, DeepValue, FieldOptions, FormOptions, FormApi, FormState } from '@tanstack/form-core';
+import { FieldApi, DeepKeys, FieldOptions, Narrow, DeepValue, FormState, FormOptions, FormApi } from '@tanstack/form-core';
 export { ChangeProps, DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, InputProps, RequiredByKey, Updater, UpdaterFn, UserChangeProps, UserInputProps, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
 import { NoInfer } from '@tanstack/react-store';
 import React from 'react';
 
-type FieldComponent<TFormData> = <TField extends DeepKeys<TFormData>>({ children, ...fieldOptions }: {
-    children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any;
-    name: TField;
-} & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any;
-declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
-    children: (fieldApi: FieldApi<TData, TFormData>) => any;
-} & FieldOptions<TData, TFormData>): any;
-
-type FormFactory<TFormData> = {
-    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
-    useField: UseField<TFormData>;
-    Field: FieldComponent<TFormData>;
-};
-declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
-
 declare module '@tanstack/form-core' {
-    interface FieldOptions<TData, TFormData> {
-        formFactory?: FormFactory<TFormData>;
+    interface FieldApi<TData, TFormData> {
+        Field: FieldComponent<TData, TFormData>;
     }
 }
+type UseFieldOptions<TData, TFormData> = FieldOptions<TData, TFormData> & {
+    mode?: 'value' | 'array';
+};
 type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
-    name: TField;
-} & FieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
-declare function useField<TData, TFormData>(opts: FieldOptions<TData, TFormData> & {}): FieldApi<TData, TFormData>;
+    name: Narrow<TField>;
+} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
+declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): FieldApi<TData, TFormData>;
+type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
+type FieldComponent<TParentData, TFormData> = <TField>({ children, ...fieldOptions }: {
+    children: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
+} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
+    name?: TField extends undefined ? TField : DeepKeys<TParentData>;
+    index: number;
+} : {
+    name: TField extends undefined ? TField : DeepKeys<TParentData>;
+    index?: never;
+})) => any;
+declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
+    children: (fieldApi: FieldApi<TData, TFormData>) => any;
+} & UseFieldOptions<TData, TFormData>): JSX.Element;
 
 declare module '@tanstack/form-core' {
     interface Register {
@@ -44,7 +45,7 @@ declare module '@tanstack/form-core' {
     }
     interface FormApi<TFormData> {
         Form: FormComponent;
-        Field: FieldComponent<TFormData>;
+        Field: FieldComponent<TFormData, TFormData>;
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
@@ -60,4 +61,11 @@ type FormProps = React.HTMLProps<HTMLFormElement> & {
 };
 type FormComponent = (props: FormProps) => any;
 
+type FormFactory<TFormData> = {
+    useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
+    useField: UseField<TFormData>;
+    Field: FieldComponent<TFormData, TFormData>;
+};
+declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
+
 export { Field, FieldComponent, FormComponent, FormFactory, FormProps, UseField, createFormFactory, useField, useForm };

package/build/types/react-form/src/createFormFactory.d.ts

@@ -1,9 +1,8 @@
 import type { FormApi, FormOptions } from '@tanstack/form-core';
-import { type UseField } from './useField';
-import { type FieldComponent } from './Field';
+import { type UseField, type FieldComponent } from './useField';
 export type FormFactory<TFormData> = {
     useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
     useField: UseField<TFormData>;
-    Field: FieldComponent<TFormData>;
+    Field: FieldComponent<TFormData, TFormData>;
 };
 export declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;

package/build/types/react-form/src/formContext.d.ts

@@ -1,4 +1,10 @@
 import type { FormApi } from '@tanstack/form-core';
 import * as React from 'react';
-export declare const formContext: React.Context<FormApi<any> | null>;
-export declare function useFormContext(): FormApi<any>;
+export declare const formContext: React.Context<{
+    formApi: FormApi<any>;
+    parentFieldName?: string | undefined;
+} | null>;
+export declare function useFormContext(): {
+    formApi: FormApi<any>;
+    parentFieldName?: string | undefined;
+};

package/build/types/react-form/src/index.d.ts

@@ -2,9 +2,7 @@ export type { ChangeProps, DeepKeys, DeepValue, FieldApiOptions, FieldInfo, Fiel
 export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
 export type { FormComponent, FormProps } from './useForm';
 export { useForm } from './useForm';
-export type { FieldComponent } from './Field';
-export { Field } from './Field';
-export type { UseField } from './useField';
-export { useField } from './useField';
+export type { UseField, FieldComponent } from './useField';
+export { useField, Field } from './useField';
 export type { FormFactory } from './createFormFactory';
 export { createFormFactory } from './createFormFactory';