@tanstack/react-form 0.0.1

package/build/stats-react.json

@@ -0,0 +1,367 @@
+{
+  "version": 2,
+  "tree": {
+    "name": "root",
+    "children": [
+      {
+        "name": "index.production.js",
+        "children": [
+          {
+            "uid": "52cd-45",
+            "name": "\u0000rollupPluginBabelHelpers.js"
+          },
+          {
+            "name": "node_modules/.pnpm",
+            "children": [
+              {
+                "name": "@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
+                "uid": "52cd-47"
+              },
+              {
+                "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": "52cd-51"
+              }
+            ]
+          },
+          {
+            "name": "packages",
+            "children": [
+              {
+                "name": "form-core/build/esm/index.js",
+                "uid": "52cd-49"
+              },
+              {
+                "name": "react-form/src",
+                "children": [
+                  {
+                    "uid": "52cd-53",
+                    "name": "formContext.ts"
+                  },
+                  {
+                    "uid": "52cd-55",
+                    "name": "useField.ts"
+                  },
+                  {
+                    "uid": "52cd-57",
+                    "name": "Field.tsx"
+                  },
+                  {
+                    "uid": "52cd-59",
+                    "name": "useForm.tsx"
+                  },
+                  {
+                    "uid": "52cd-61",
+                    "name": "index.ts"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "isRoot": true
+  },
+  "nodeParts": {
+    "52cd-45": {
+      "renderedLength": 431,
+      "gzipLength": 240,
+      "brotliLength": 0,
+      "mainUid": "52cd-44"
+    },
+    "52cd-47": {
+      "renderedLength": 1288,
+      "gzipLength": 497,
+      "brotliLength": 0,
+      "mainUid": "52cd-46"
+    },
+    "52cd-49": {
+      "renderedLength": 20344,
+      "gzipLength": 4529,
+      "brotliLength": 0,
+      "mainUid": "52cd-48"
+    },
+    "52cd-51": {
+      "renderedLength": 978,
+      "gzipLength": 456,
+      "brotliLength": 0,
+      "mainUid": "52cd-50"
+    },
+    "52cd-53": {
+      "renderedLength": 369,
+      "gzipLength": 218,
+      "brotliLength": 0,
+      "mainUid": "52cd-52"
+    },
+    "52cd-55": {
+      "renderedLength": 850,
+      "gzipLength": 417,
+      "brotliLength": 0,
+      "mainUid": "52cd-54"
+    },
+    "52cd-57": {
+      "renderedLength": 370,
+      "gzipLength": 227,
+      "brotliLength": 0,
+      "mainUid": "52cd-56"
+    },
+    "52cd-59": {
+      "renderedLength": 2160,
+      "gzipLength": 767,
+      "brotliLength": 0,
+      "mainUid": "52cd-58"
+    },
+    "52cd-61": {
+      "renderedLength": 0,
+      "gzipLength": 0,
+      "brotliLength": 0,
+      "mainUid": "52cd-60"
+    }
+  },
+  "nodeMetas": {
+    "52cd-44": {
+      "id": "\u0000rollupPluginBabelHelpers.js",
+      "moduleParts": {
+        "index.production.js": "52cd-45"
+      },
+      "imported": [],
+      "importedBy": [
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-56"
+        }
+      ]
+    },
+    "52cd-46": {
+      "id": "/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
+      "moduleParts": {
+        "index.production.js": "52cd-47"
+      },
+      "imported": [],
+      "importedBy": [
+        {
+          "uid": "52cd-48"
+        },
+        {
+          "uid": "52cd-50"
+        }
+      ]
+    },
+    "52cd-48": {
+      "id": "/packages/form-core/build/esm/index.js",
+      "moduleParts": {
+        "index.production.js": "52cd-49"
+      },
+      "imported": [
+        {
+          "uid": "52cd-46"
+        }
+      ],
+      "importedBy": [
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-56"
+        },
+        {
+          "uid": "52cd-54"
+        }
+      ]
+    },
+    "52cd-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": "52cd-51"
+      },
+      "imported": [
+        {
+          "uid": "52cd-63"
+        },
+        {
+          "uid": "52cd-46"
+        }
+      ],
+      "importedBy": [
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-54"
+        }
+      ]
+    },
+    "52cd-52": {
+      "id": "/packages/react-form/src/formContext.ts",
+      "moduleParts": {
+        "index.production.js": "52cd-53"
+      },
+      "imported": [
+        {
+          "uid": "52cd-62"
+        }
+      ],
+      "importedBy": [
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-54"
+        }
+      ]
+    },
+    "52cd-54": {
+      "id": "/packages/react-form/src/useField.ts",
+      "moduleParts": {
+        "index.production.js": "52cd-55"
+      },
+      "imported": [
+        {
+          "uid": "52cd-62"
+        },
+        {
+          "uid": "52cd-50"
+        },
+        {
+          "uid": "52cd-48"
+        },
+        {
+          "uid": "52cd-52"
+        }
+      ],
+      "importedBy": [
+        {
+          "uid": "52cd-60"
+        },
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-56"
+        }
+      ]
+    },
+    "52cd-56": {
+      "id": "/packages/react-form/src/Field.tsx",
+      "moduleParts": {
+        "index.production.js": "52cd-57"
+      },
+      "imported": [
+        {
+          "uid": "52cd-44"
+        },
+        {
+          "uid": "52cd-62"
+        },
+        {
+          "uid": "52cd-48"
+        },
+        {
+          "uid": "52cd-54"
+        }
+      ],
+      "importedBy": [
+        {
+          "uid": "52cd-60"
+        },
+        {
+          "uid": "52cd-58"
+        }
+      ]
+    },
+    "52cd-58": {
+      "id": "/packages/react-form/src/useForm.tsx",
+      "moduleParts": {
+        "index.production.js": "52cd-59"
+      },
+      "imported": [
+        {
+          "uid": "52cd-44"
+        },
+        {
+          "uid": "52cd-48"
+        },
+        {
+          "uid": "52cd-50"
+        },
+        {
+          "uid": "52cd-62"
+        },
+        {
+          "uid": "52cd-56"
+        },
+        {
+          "uid": "52cd-54"
+        },
+        {
+          "uid": "52cd-52"
+        }
+      ],
+      "importedBy": [
+        {
+          "uid": "52cd-60"
+        }
+      ]
+    },
+    "52cd-60": {
+      "id": "/packages/react-form/src/index.ts",
+      "moduleParts": {
+        "index.production.js": "52cd-61"
+      },
+      "imported": [
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-56"
+        },
+        {
+          "uid": "52cd-54"
+        }
+      ],
+      "importedBy": [],
+      "isEntry": true
+    },
+    "52cd-62": {
+      "id": "react",
+      "moduleParts": {},
+      "imported": [],
+      "importedBy": [
+        {
+          "uid": "52cd-58"
+        },
+        {
+          "uid": "52cd-56"
+        },
+        {
+          "uid": "52cd-54"
+        },
+        {
+          "uid": "52cd-52"
+        }
+      ],
+      "isExternal": true
+    },
+    "52cd-63": {
+      "id": "use-sync-external-store/shim/with-selector",
+      "moduleParts": {},
+      "imported": [],
+      "importedBy": [
+        {
+          "uid": "52cd-50"
+        }
+      ],
+      "isExternal": true
+    }
+  },
+  "env": {
+    "rollup": "2.78.1"
+  },
+  "options": {
+    "gzip": true,
+    "brotli": false,
+    "sourcemap": false
+  }
+}

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

@@ -0,0 +1,69 @@
+import type { DeepKeys, DeepValue, RequiredByKey, Updater } from './utils';
+import type { FormApi, ValidationError } from './FormApi';
+import { Store } from '@tanstack/store';
+declare type ValidateOn = 'change' | 'blur' | 'submit';
+export declare type FieldOptions<TData, TFormData> = {
+    name: unknown extends TFormData ? string : DeepKeys<TFormData>;
+    defaultValue?: TData;
+    form?: FormApi<TFormData>;
+    validate?: (value: TData, fieldApi: FieldApi<TData, TFormData>) => ValidationError;
+    validateAsync?: (value: TData, fieldApi: FieldApi<TData, TFormData>) => ValidationError | Promise<ValidationError>;
+    validatePristine?: boolean;
+    validateOn?: ValidateOn;
+    validateAsyncOn?: ValidateOn;
+    validateAsyncDebounceMs?: number;
+    filterValue?: (value: TData) => TData;
+    defaultMeta?: Partial<FieldMeta>;
+    change?: boolean;
+    blur?: boolean;
+    submit?: boolean;
+};
+export declare type FieldMeta = {
+    isTouched: boolean;
+    touchedError?: ValidationError;
+    error?: ValidationError;
+    isValidating: boolean;
+};
+export declare type ChangeProps<TData> = {
+    onChange?: (updater: Updater<TData>) => void;
+    onBlur?: (event: any) => void;
+};
+export declare type InputProps = {
+    onChange?: (event: any) => void;
+    onBlur?: (event: any) => void;
+};
+export declare type FieldApiOptions<TData, TFormData> = RequiredByKey<FieldOptions<TData, TFormData>, 'form'>;
+export declare type FieldState<TData> = {
+    value: TData;
+    meta: FieldMeta;
+};
+export declare class FieldApi<TData, TFormData> {
+    #private;
+    uid: number;
+    form: FormApi<TFormData>;
+    name: DeepKeys<TFormData>;
+    store: Store<FieldState<TData>>;
+    state: FieldState<TData>;
+    options: RequiredByKey<FieldOptions<TData, TFormData>, 'validateOn' | 'validateAsyncOn'>;
+    constructor(opts: FieldApiOptions<TData, TFormData>);
+    mount: () => () => void;
+    update: (opts: FieldApiOptions<TData, TFormData>) => void;
+    getValue: () => TData;
+    setValue: (updater: Updater<TData>, options?: {
+        touch?: boolean;
+        notify?: boolean;
+    }) => void;
+    getMeta: () => FieldMeta;
+    setMeta: (updater: Updater<FieldMeta>) => void;
+    getInfo: () => Record<DeepKeys<TFormData>, import("./FormApi").FieldInfo<TFormData>>[DeepKeys<TFormData>];
+    pushValue: (value: TData) => void;
+    insertValue: (index: number, value: TData) => void;
+    removeValue: (index: number) => void;
+    swapValues: (aIndex: number, bIndex: number) => void;
+    getSubField: <TName extends DeepKeys<TData>>(name: TName) => FieldApi<DeepValue<TData, TName>, TFormData>;
+    validate: () => Promise<ValidationError>;
+    validateAsync: () => Promise<ValidationError>;
+    getChangeProps: <T extends ChangeProps<any>>(props?: T) => ChangeProps<TData> & Omit<T, keyof ChangeProps<TData>>;
+    getInputProps: <T extends InputProps>(props?: T) => InputProps & Omit<T, keyof InputProps>;
+}
+export {};

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

@@ -0,0 +1,74 @@
+import type { FormEvent } from 'react';
+import { Store } from '@tanstack/store';
+import type { DeepKeys, DeepValue, Updater } from './utils';
+import type { FieldApi, FieldMeta } from './FieldApi';
+export declare type FormOptions<TData> = {
+    defaultValues?: TData;
+    defaultState?: Partial<FormState<TData>>;
+    onSubmit?: (values: TData, formApi: FormApi<TData>) => Promise<any>;
+    onInvalidSubmit?: (values: TData, formApi: FormApi<TData>) => void;
+    validate?: (values: TData, formApi: FormApi<TData>) => Promise<any>;
+    debugForm?: boolean;
+    validatePristine?: boolean;
+};
+export declare type FieldInfo<TFormData> = {
+    instances: Record<string, FieldApi<any, TFormData>>;
+} & ValidationMeta;
+export declare type ValidationMeta = {
+    validationCount?: number;
+    validationPromise?: Promise<ValidationError>;
+    validationResolve?: (error: ValidationError) => void;
+    validationReject?: (error: unknown) => void;
+};
+export declare type ValidationError = undefined | false | null | string;
+export declare type FormState<TData> = {
+    values: TData;
+    isFormValidating: boolean;
+    formValidationCount: number;
+    isFormValid: boolean;
+    formError?: ValidationError;
+    fieldMeta: Record<DeepKeys<TData>, FieldMeta>;
+    isFieldsValidating: boolean;
+    isFieldsValid: boolean;
+    isSubmitting: boolean;
+    isTouched: boolean;
+    isSubmitted: boolean;
+    isValidating: boolean;
+    isValid: boolean;
+    canSubmit: boolean;
+    submissionAttempts: number;
+};
+export declare function getDefaultFormState<TData>(defaultState: Partial<FormState<TData>>): FormState<TData>;
+export declare class FormApi<TFormData> {
+    options: FormOptions<TFormData>;
+    store: Store<FormState<TFormData>>;
+    state: FormState<TFormData>;
+    fieldInfo: Record<DeepKeys<TFormData>, FieldInfo<TFormData>>;
+    fieldName?: string;
+    validationMeta: ValidationMeta;
+    constructor(opts?: FormOptions<TFormData>);
+    update: (options: FormOptions<TFormData>) => void;
+    reset: () => void;
+    validateAllFields: () => Promise<ValidationError[]>;
+    validateForm: () => Promise<ValidationError>;
+    handleSubmit: (e: FormEvent & {
+        __handled?: boolean;
+    }) => Promise<void>;
+    getFieldValue: <TField extends DeepKeys<TFormData>>(field: TField) => DeepValue<TFormData, TField>;
+    getFieldMeta: <TField extends DeepKeys<TFormData>>(field: TField) => FieldMeta;
+    getFieldInfo: <TField extends DeepKeys<TFormData>>(field: TField) => Record<DeepKeys<TFormData>, FieldInfo<TFormData>>[TField];
+    setFieldMeta: <TField extends DeepKeys<TFormData>>(field: TField, updater: Updater<FieldMeta>) => void;
+    setFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, updater: Updater<DeepValue<TFormData, TField>, DeepValue<TFormData, TField>>, opts?: {
+        touch?: boolean;
+    }) => void;
+    pushFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, value: DeepValue<TFormData, TField>, opts?: {
+        touch?: boolean;
+    }) => void;
+    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?: {
+        touch?: boolean;
+    }) => void;
+    swapFieldValues: <TField extends DeepKeys<TFormData>>(field: TField, index1: number, index2: number) => void;
+}

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

@@ -0,0 +1,3 @@
+export * from './FormApi';
+export * from './FieldApi';
+export * from './utils';

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

@@ -0,0 +1,16 @@
+export declare type UpdaterFn<TInput, TOutput = TInput> = (input: TInput) => TOutput;
+export declare type Updater<TInput, TOutput = TInput> = TOutput | UpdaterFn<TInput, TOutput>;
+export declare function functionalUpdate<TInput, TOutput = TInput>(updater: Updater<TInput, TOutput>, input: TInput): TOutput;
+export declare function getBy(obj: any, path: any): any;
+export declare function setBy(obj: any, _path: any, updater: Updater<any>): any;
+export declare type RequiredByKey<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+declare type ComputeRange<N extends number, Result extends Array<unknown> = []> = Result['length'] extends N ? Result : ComputeRange<N, [...Result, Result['length']]>;
+declare type Index40 = ComputeRange<40>[number];
+declare type IsTuple<T> = T extends readonly any[] & {
+    length: infer Length;
+} ? Length extends Index40 ? T : never : never;
+declare 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 declare 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;
+declare type DeepKeysPrefix<T, TPrefix> = TPrefix extends keyof T & (number | string) ? `${TPrefix}.${DeepKeys<T[TPrefix]> & string}` : never;
+export declare type DeepValue<T, TProp> = T extends Record<string | number, any> ? TProp extends `${infer TBranch}.${infer TDeepProp}` ? DeepValue<T[TBranch], TDeepProp> : T[TProp & string] : never;
+export {};

package/build/types/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * react-form
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { DeepKeys, FieldApi, DeepValue, FieldOptions, FormApi, FormState, FormOptions } from '@tanstack/form-core';
+import { NoInfer } from '@tanstack/react-store';
+import React from 'react';
+
+declare 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 createFieldComponent<TFormData>(formApi: FormApi<TFormData>): FieldComponent<TFormData>;
+declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
+    children: (fieldApi: FieldApi<TData, TFormData>) => any;
+} & FieldOptions<TData, TFormData>): any;
+
+declare type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
+    name: TField;
+} & FieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
+declare function createUseField<TFormData>(formApi: FormApi<TFormData>): UseField<TFormData>;
+declare function useField<TData, TFormData>(opts: FieldOptions<TData, TFormData> & {}): FieldApi<TData, TFormData>;
+
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData> {
+        Form: FormComponent;
+        Field: FieldComponent<TFormData>;
+        useField: UseField<TFormData>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+            children: ((state: NoInfer<TSelected>) => React.ReactNode) | React.ReactNode;
+        }) => any;
+    }
+}
+declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
+declare type FormProps = React.HTMLProps<HTMLFormElement> & {
+    children: React.ReactNode;
+    noFormElement?: boolean;
+};
+declare type FormComponent = (props: FormProps) => any;
+declare function createFormComponent(formApi: FormApi<any>): FormComponent;
+
+export { Field, FieldComponent, FormComponent, FormProps, UseField, createFieldComponent, createFormComponent, createUseField, useField, useForm };

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

@@ -0,0 +1,9 @@
+import { type DeepKeys, type DeepValue, type FieldApi, type FieldOptions, type FormApi } from '@tanstack/form-core';
+export declare 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;
+export declare function createFieldComponent<TFormData>(formApi: FormApi<TFormData>): FieldComponent<TFormData>;
+export declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
+    children: (fieldApi: FieldApi<TData, TFormData>) => any;
+} & FieldOptions<TData, TFormData>): any;

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

@@ -0,0 +1,4 @@
+import { FormApi } from '@tanstack/form-core';
+import * as React from 'react';
+export declare const formContext: React.Context<FormApi<any>>;
+export declare function useFormContext(customFormApi?: FormApi<any>): FormApi<any>;

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

@@ -0,0 +1,3 @@
+export * from './useForm';
+export * from './Field';
+export * from './useField';

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

@@ -0,0 +1,7 @@
+import type { DeepKeys, DeepValue, FieldOptions, FormApi } from '@tanstack/form-core';
+import { FieldApi } from '@tanstack/form-core';
+export declare type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
+    name: TField;
+} & FieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
+export declare function createUseField<TFormData>(formApi: FormApi<TFormData>): UseField<TFormData>;
+export declare function useField<TData, TFormData>(opts: FieldOptions<TData, TFormData> & {}): FieldApi<TData, TFormData>;

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

@@ -0,0 +1,25 @@
+import type { FormState, FormOptions } from '@tanstack/form-core';
+import { FormApi } from '@tanstack/form-core';
+import type { NoInfer } from '@tanstack/react-store';
+import React from 'react';
+import { type FieldComponent } from './Field';
+import { type UseField } from './useField';
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData> {
+        Form: FormComponent;
+        Field: FieldComponent<TFormData>;
+        useField: UseField<TFormData>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+            children: ((state: NoInfer<TSelected>) => React.ReactNode) | React.ReactNode;
+        }) => any;
+    }
+}
+export declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
+export declare type FormProps = React.HTMLProps<HTMLFormElement> & {
+    children: React.ReactNode;
+    noFormElement?: boolean;
+};
+export declare type FormComponent = (props: FormProps) => any;
+export declare function createFormComponent(formApi: FormApi<any>): FormComponent;