@tanstack/react-form 0.37.0 → 0.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/types.d.cts +0 -8
- package/dist/cjs/useField.cjs.map +1 -1
- package/dist/cjs/useField.d.cts +5 -4
- package/dist/cjs/useForm.cjs.map +1 -1
- package/dist/cjs/useForm.d.cts +3 -14
- package/dist/esm/types.d.ts +0 -8
- package/dist/esm/useField.d.ts +5 -4
- package/dist/esm/useField.js.map +1 -1
- package/dist/esm/useForm.d.ts +3 -14
- package/dist/esm/useForm.js.map +1 -1
- package/package.json +2 -2
- package/src/types.ts +0 -8
- package/src/useField.tsx +5 -5
- package/src/useForm.tsx +3 -14
package/dist/cjs/types.d.cts
CHANGED
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
|
|
2
|
-
import { FunctionComponent } from 'react';
|
|
3
2
|
/**
|
|
4
3
|
* The field options.
|
|
5
4
|
*/
|
|
6
5
|
export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
|
|
7
6
|
mode?: 'value' | 'array';
|
|
8
7
|
};
|
|
9
|
-
/**
|
|
10
|
-
* The return type of React.ReactNode appears to change between React 4.9 and 5.0
|
|
11
|
-
*
|
|
12
|
-
* This means that if we replace this type with React.ReactNode, there will be
|
|
13
|
-
* random typings the fail between React 4.9 and 5.0. This is a hack that resolves this issue.
|
|
14
|
-
*/
|
|
15
|
-
export type NodeType = ReturnType<FunctionComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { FunctionComponent } from 'react'\nimport type {
|
|
1
|
+
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ninterface ReactFieldApi<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> {\n /**\n * A pre-bound and type-safe sub-field component using this field as a root.\n */\n Field: FieldComponent<TParentData, TFormValidator>\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n) {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api & ReactFieldApi<TParentData, TFormValidator> =\n api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update(opts)\n })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value ?? []).length]\n }\n : undefined,\n )\n\n return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => ReactNode\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>): ReactNode => {\n const fieldApi = useField(fieldOptions as any)\n\n return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","jsx","Fragment","functionalUpdate"],"mappings":";;;;;;;AAiDO,SAAS,SAWd,MAOA;AACA,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AA4DO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAWC,2BAAAA,IAAAC,WAAAA,UAAA,EAAA,UAAAC,SAAAA,iBAAiB,UAAU,QAAe,GAAE;AACzD;;;"}
|
package/dist/cjs/useField.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
|
|
2
|
-
import {
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { UseFieldOptions } from './types.cjs';
|
|
3
4
|
interface ReactFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
|
|
4
5
|
/**
|
|
5
6
|
* A pre-bound and type-safe sub-field component using this field as a root.
|
|
@@ -23,16 +24,16 @@ export declare function useField<TParentData, TName extends DeepKeys<TParentData
|
|
|
23
24
|
* @param children A render function that takes a field API instance and returns a React element.
|
|
24
25
|
*/
|
|
25
26
|
type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
|
|
26
|
-
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) =>
|
|
27
|
+
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => ReactNode;
|
|
27
28
|
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
28
29
|
/**
|
|
29
30
|
* A type alias representing a field component for a specific form data type.
|
|
30
31
|
*/
|
|
31
|
-
export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) =>
|
|
32
|
+
export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => ReactNode;
|
|
32
33
|
/**
|
|
33
34
|
* A function component that takes field options and a render function as children and returns a React component.
|
|
34
35
|
*
|
|
35
36
|
* The `Field` component uses the `useField` hook internally to manage the field instance.
|
|
36
37
|
*/
|
|
37
|
-
export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) =>
|
|
38
|
+
export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) => ReactNode;
|
|
38
39
|
export {};
|
package/dist/cjs/useForm.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { FieldComponent, UseField } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\
|
|
1
|
+
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { ReactNode } from 'react'\nimport type { FieldComponent, UseField } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<TFormData, TFormValidator>\n /**\n * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n */\n useField: UseField<TFormData, TFormValidator>\n /**\n * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n */\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: ReactFormExtendedApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = function APIField(props) {\n return <Field {...props} form={api} />\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n extendedApi.useField = (props) => useField({ ...props, form: api })\n extendedApi.useStore = (selector) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store, selector)\n }\n extendedApi.Subscribe = (props) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store, props.selector),\n )\n }\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAqDO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAIA,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,SAAA,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAQC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AAEY,gBAAA,WAAW,CAAC,UAAUC,SAAAA,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACtD,gBAAA,WAAW,CAAC,aAAa;AAE5B,aAAAC,oBAAS,IAAI,OAAO,QAAQ;AAAA,IACrC;AACY,gBAAA,YAAY,CAAC,UAAU;AAC1B,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAO,MAAM,QAAQ;AAAA,MACpC;AAAA,IACF;AAEO,WAAA;AAAA,EAAA,CACR;AAEyBE,sDAAA,QAAQ,OAAO,EAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CA,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
|
package/dist/cjs/useForm.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { FieldComponent, UseField } from './useField.cjs';
|
|
3
4
|
import { NoInfer } from '@tanstack/react-store';
|
|
4
|
-
import { NodeType } from './types.cjs';
|
|
5
5
|
/**
|
|
6
6
|
* Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
|
|
7
7
|
*/
|
|
@@ -22,20 +22,9 @@ export interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormD
|
|
|
22
22
|
* A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
|
|
23
23
|
*/
|
|
24
24
|
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
|
25
|
-
/**
|
|
26
|
-
TypeScript versions <=5.0.4 have a bug that prevents
|
|
27
|
-
the type of the `TSelected` generic from being inferred
|
|
28
|
-
from the return type of this method.
|
|
29
|
-
|
|
30
|
-
In these versions, `TSelected` will fall back to the default
|
|
31
|
-
type (or `unknown` if that's not defined).
|
|
32
|
-
|
|
33
|
-
@see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
|
|
34
|
-
@see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
|
|
35
|
-
*/
|
|
36
25
|
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
|
37
|
-
children: ((state: NoInfer<TSelected>) =>
|
|
38
|
-
}) =>
|
|
26
|
+
children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
|
|
27
|
+
}) => ReactNode;
|
|
39
28
|
}
|
|
40
29
|
/**
|
|
41
30
|
* An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
|
|
2
|
-
import { FunctionComponent } from 'react';
|
|
3
2
|
/**
|
|
4
3
|
* The field options.
|
|
5
4
|
*/
|
|
6
5
|
export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
|
|
7
6
|
mode?: 'value' | 'array';
|
|
8
7
|
};
|
|
9
|
-
/**
|
|
10
|
-
* The return type of React.ReactNode appears to change between React 4.9 and 5.0
|
|
11
|
-
*
|
|
12
|
-
* This means that if we replace this type with React.ReactNode, there will be
|
|
13
|
-
* random typings the fail between React 4.9 and 5.0. This is a hack that resolves this issue.
|
|
14
|
-
*/
|
|
15
|
-
export type NodeType = ReturnType<FunctionComponent>;
|
package/dist/esm/useField.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
|
|
2
|
-
import {
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { UseFieldOptions } from './types.js';
|
|
3
4
|
interface ReactFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
|
|
4
5
|
/**
|
|
5
6
|
* A pre-bound and type-safe sub-field component using this field as a root.
|
|
@@ -23,16 +24,16 @@ export declare function useField<TParentData, TName extends DeepKeys<TParentData
|
|
|
23
24
|
* @param children A render function that takes a field API instance and returns a React element.
|
|
24
25
|
*/
|
|
25
26
|
type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
|
|
26
|
-
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) =>
|
|
27
|
+
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => ReactNode;
|
|
27
28
|
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
28
29
|
/**
|
|
29
30
|
* A type alias representing a field component for a specific form data type.
|
|
30
31
|
*/
|
|
31
|
-
export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) =>
|
|
32
|
+
export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => ReactNode;
|
|
32
33
|
/**
|
|
33
34
|
* A function component that takes field options and a render function as children and returns a React component.
|
|
34
35
|
*
|
|
35
36
|
* The `Field` component uses the `useField` hook internally to manage the field instance.
|
|
36
37
|
*/
|
|
37
|
-
export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) =>
|
|
38
|
+
export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) => ReactNode;
|
|
38
39
|
export {};
|
package/dist/esm/useField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { FunctionComponent } from 'react'\nimport type {
|
|
1
|
+
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { FunctionComponent, ReactNode } from 'react'\nimport type { UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ninterface ReactFieldApi<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> {\n /**\n * A pre-bound and type-safe sub-field component using this field as a root.\n */\n Field: FieldComponent<TParentData, TFormValidator>\n}\n\n/**\n * A type representing a hook for using a field in a form with the given form data type.\n *\n * A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field.\n */\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A hook for managing a field in a form.\n * @param opts An object with field options.\n *\n * @returns The `FieldApi` instance for the specified field.\n */\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n) {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api & ReactFieldApi<TParentData, TFormValidator> =\n api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update(opts)\n })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value ?? []).length]\n }\n : undefined,\n )\n\n return fieldApi\n}\n\n/**\n * @param children A render function that takes a field API instance and returns a React element.\n */\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => ReactNode\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n/**\n * A type alias representing a field component for a specific form data type.\n */\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n>) => ReactNode\n\n/**\n * A function component that takes field options and a render function as children and returns a React component.\n *\n * The `Field` component uses the `useField` hook internally to manage the field instance.\n */\nexport const Field = (<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>): ReactNode => {\n const fieldApi = useField(fieldOptions as any)\n\n return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":[],"mappings":";;;;;AAiDO,SAAS,SAWd,MAOA;AACA,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,EAAE,EAAE,MAAM;AAAA,IAAA,IAE3D;AAAA,EACN;AAEO,SAAA;AACT;AA4DO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMiB;AACT,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAW,oBAAA,UAAA,EAAA,UAAA,iBAAiB,UAAU,QAAe,GAAE;AACzD;"}
|
package/dist/esm/useForm.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FormApi, FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { FieldComponent, UseField } from './useField.js';
|
|
3
4
|
import { NoInfer } from '@tanstack/react-store';
|
|
4
|
-
import { NodeType } from './types.js';
|
|
5
5
|
/**
|
|
6
6
|
* Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
|
|
7
7
|
*/
|
|
@@ -22,20 +22,9 @@ export interface ReactFormApi<TFormData, TFormValidator extends Validator<TFormD
|
|
|
22
22
|
* A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
|
|
23
23
|
*/
|
|
24
24
|
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
|
25
|
-
/**
|
|
26
|
-
TypeScript versions <=5.0.4 have a bug that prevents
|
|
27
|
-
the type of the `TSelected` generic from being inferred
|
|
28
|
-
from the return type of this method.
|
|
29
|
-
|
|
30
|
-
In these versions, `TSelected` will fall back to the default
|
|
31
|
-
type (or `unknown` if that's not defined).
|
|
32
|
-
|
|
33
|
-
@see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
|
|
34
|
-
@see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
|
|
35
|
-
*/
|
|
36
25
|
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
|
37
|
-
children: ((state: NoInfer<TSelected>) =>
|
|
38
|
-
}) =>
|
|
26
|
+
children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
|
|
27
|
+
}) => ReactNode;
|
|
39
28
|
}
|
|
40
29
|
/**
|
|
41
30
|
* An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
|
package/dist/esm/useForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { FieldComponent, UseField } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { ReactNode } from 'react'\nimport type { FieldComponent, UseField } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<TFormData, TFormValidator>\n /**\n * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.\n */\n useField: UseField<TFormData, TFormValidator>\n /**\n * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state\n */\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = FormApi<TFormData, TFormValidator> & ReactFormApi<TFormData, TFormValidator>\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: ReactFormExtendedApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = function APIField(props) {\n return <Field {...props} form={api} />\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n extendedApi.useField = (props) => useField({ ...props, form: api })\n extendedApi.useStore = (selector) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store, selector)\n }\n extendedApi.Subscribe = (props) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store, props.selector),\n )\n }\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi\n}\n"],"names":[],"mappings":";;;;;;AAqDO,SAAS,QAGd,MAA+C;AAC/C,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACU,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAQ,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AAEY,gBAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACtD,gBAAA,WAAW,CAAC,aAAa;AAE5B,aAAA,SAAS,IAAI,OAAO,QAAQ;AAAA,IACrC;AACY,gBAAA,YAAY,CAAC,UAAU;AAC1B,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAO,MAAM,QAAQ;AAAA,MACpC;AAAA,IACF;AAEO,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,EAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
4
4
|
"description": "Powerful, type-safe forms for React.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@remix-run/node": "^2.14.0",
|
|
71
71
|
"@tanstack/react-store": "^0.5.6",
|
|
72
72
|
"decode-formdata": "^0.8.0",
|
|
73
|
-
"@tanstack/form-core": "0.
|
|
73
|
+
"@tanstack/form-core": "0.38.0"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
76
|
"@tanstack/start": "^1.81.1",
|
package/src/types.ts
CHANGED
|
@@ -28,11 +28,3 @@ export type UseFieldOptions<
|
|
|
28
28
|
> & {
|
|
29
29
|
mode?: 'value' | 'array'
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* The return type of React.ReactNode appears to change between React 4.9 and 5.0
|
|
34
|
-
*
|
|
35
|
-
* This means that if we replace this type with React.ReactNode, there will be
|
|
36
|
-
* random typings the fail between React 4.9 and 5.0. This is a hack that resolves this issue.
|
|
37
|
-
*/
|
|
38
|
-
export type NodeType = ReturnType<FunctionComponent>
|
package/src/useField.tsx
CHANGED
|
@@ -2,8 +2,8 @@ import React, { useState } from 'react'
|
|
|
2
2
|
import { useStore } from '@tanstack/react-store'
|
|
3
3
|
import { FieldApi, functionalUpdate } from '@tanstack/form-core'
|
|
4
4
|
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
|
|
5
|
-
import type { FunctionComponent } from 'react'
|
|
6
|
-
import type {
|
|
5
|
+
import type { FunctionComponent, ReactNode } from 'react'
|
|
6
|
+
import type { UseFieldOptions } from './types'
|
|
7
7
|
import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'
|
|
8
8
|
|
|
9
9
|
interface ReactFieldApi<
|
|
@@ -125,7 +125,7 @@ type FieldComponentProps<
|
|
|
125
125
|
TFormValidator,
|
|
126
126
|
TData
|
|
127
127
|
>,
|
|
128
|
-
) =>
|
|
128
|
+
) => ReactNode
|
|
129
129
|
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>
|
|
130
130
|
|
|
131
131
|
/**
|
|
@@ -154,7 +154,7 @@ export type FieldComponent<
|
|
|
154
154
|
TData
|
|
155
155
|
>,
|
|
156
156
|
'form'
|
|
157
|
-
>) =>
|
|
157
|
+
>) => ReactNode
|
|
158
158
|
|
|
159
159
|
/**
|
|
160
160
|
* A function component that takes field options and a render function as children and returns a React component.
|
|
@@ -180,7 +180,7 @@ export const Field = (<
|
|
|
180
180
|
TFieldValidator,
|
|
181
181
|
TFormValidator,
|
|
182
182
|
TData
|
|
183
|
-
>):
|
|
183
|
+
>): ReactNode => {
|
|
184
184
|
const fieldApi = useField(fieldOptions as any)
|
|
185
185
|
|
|
186
186
|
return (<>{functionalUpdate(children, fieldApi as any)}</>) as never
|
package/src/useForm.tsx
CHANGED
|
@@ -3,10 +3,10 @@ import { useStore } from '@tanstack/react-store'
|
|
|
3
3
|
import React, { useState } from 'react'
|
|
4
4
|
import { Field, useField } from './useField'
|
|
5
5
|
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
|
|
6
|
+
import type { ReactNode } from 'react'
|
|
6
7
|
import type { FieldComponent, UseField } from './useField'
|
|
7
8
|
import type { NoInfer } from '@tanstack/react-store'
|
|
8
9
|
import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
|
|
9
|
-
import type { NodeType } from './types'
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
|
|
@@ -33,20 +33,9 @@ export interface ReactFormApi<
|
|
|
33
33
|
* A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
|
|
34
34
|
*/
|
|
35
35
|
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
|
36
|
-
/**
|
|
37
|
-
TypeScript versions <=5.0.4 have a bug that prevents
|
|
38
|
-
the type of the `TSelected` generic from being inferred
|
|
39
|
-
from the return type of this method.
|
|
40
|
-
|
|
41
|
-
In these versions, `TSelected` will fall back to the default
|
|
42
|
-
type (or `unknown` if that's not defined).
|
|
43
|
-
|
|
44
|
-
@see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
|
|
45
|
-
@see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
|
|
46
|
-
*/
|
|
47
36
|
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
|
|
48
|
-
children: ((state: NoInfer<TSelected>) =>
|
|
49
|
-
}) =>
|
|
37
|
+
children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
|
|
38
|
+
}) => ReactNode
|
|
50
39
|
}
|
|
51
40
|
|
|
52
41
|
/**
|