@tanstack/react-form 0.20.2 → 0.21.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 +8 -0
- package/dist/cjs/useField.cjs +3 -3
- package/dist/cjs/useField.cjs.map +1 -1
- package/dist/cjs/useField.d.cts +4 -7
- package/dist/cjs/useForm.cjs.map +1 -1
- package/dist/cjs/useForm.d.cts +3 -3
- package/dist/esm/types.d.ts +8 -0
- package/dist/esm/useField.d.ts +4 -7
- package/dist/esm/useField.js +3 -3
- package/dist/esm/useField.js.map +1 -1
- package/dist/esm/useForm.d.ts +3 -3
- package/dist/esm/useForm.js.map +1 -1
- package/package.json +2 -2
- package/src/tests/useField.test-d.tsx +2 -0
- package/src/types.ts +9 -0
- package/src/useField.tsx +10 -25
- package/src/useForm.tsx +5 -4
package/dist/cjs/types.d.cts
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
|
|
2
|
+
import { FunctionComponent } from 'rehackt';
|
|
2
3
|
|
|
3
4
|
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> & {
|
|
4
5
|
mode?: 'value' | 'array';
|
|
5
6
|
};
|
|
7
|
+
/**
|
|
8
|
+
* The return type of React.ReactNode appears to change between React 4.9 and 5.0
|
|
9
|
+
*
|
|
10
|
+
* This means that if we replace this type with React.ReactNode, there will be
|
|
11
|
+
* random typings the fail between React 4.9 and 5.0. This is a hack that resolves this issue.
|
|
12
|
+
*/
|
|
13
|
+
export type NodeType = ReturnType<FunctionComponent>;
|
package/dist/cjs/useField.cjs
CHANGED
|
@@ -27,13 +27,13 @@ function useField(opts) {
|
|
|
27
27
|
);
|
|
28
28
|
return fieldApi;
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
const Field = ({
|
|
31
31
|
children,
|
|
32
32
|
...fieldOptions
|
|
33
|
-
}) {
|
|
33
|
+
}) => {
|
|
34
34
|
const fieldApi = useField(fieldOptions);
|
|
35
35
|
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formCore.functionalUpdate(children, fieldApi) });
|
|
36
|
-
}
|
|
36
|
+
};
|
|
37
37
|
exports.Field = Field;
|
|
38
38
|
exports.useField = useField;
|
|
39
39
|
//# sourceMappingURL=useField.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\nimport type {
|
|
1
|
+
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\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 Field: FieldComponent<TParentData, TFormValidator>\n }\n}\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\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): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n api.Field = Field as never\n\n return api\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 as never).length]\n }\n : undefined,\n )\n\n return fieldApi as never\n}\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 ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\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>) => NodeType\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>): NodeType => {\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":";;;;;;;AA0CO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAIA,QAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,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,KAAc,EAAE,MAAM;AAAA,IAE9D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AAiDO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAWC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAAC,SAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;;;"}
|
package/dist/cjs/useField.d.cts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { default as React } from 'rehackt';
|
|
2
1
|
import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
|
|
3
|
-
import { UseFieldOptions } from './types.cjs';
|
|
2
|
+
import { NodeType, UseFieldOptions } from './types.cjs';
|
|
4
3
|
|
|
5
4
|
declare module '@tanstack/form-core' {
|
|
6
5
|
interface FieldApi<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>> {
|
|
@@ -10,10 +9,8 @@ declare module '@tanstack/form-core' {
|
|
|
10
9
|
export type UseField<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>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
11
10
|
export declare function useField<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>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
12
11
|
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>> = {
|
|
13
|
-
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) =>
|
|
12
|
+
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => NodeType;
|
|
14
13
|
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
15
|
-
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'>) =>
|
|
16
|
-
export declare
|
|
17
|
-
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => any;
|
|
18
|
-
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): React.JSX.Element;
|
|
14
|
+
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'>) => NodeType;
|
|
15
|
+
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>) => NodeType;
|
|
19
16
|
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, {
|
|
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 'rehackt'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n }\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n api.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n api.useField = (props) => useField({ ...props, form: api })\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\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 as any\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAmCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAIA,QAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAASC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyBE,4BAAAA,0BAAA,QAAQ,OAAO,CAAA,CAAE;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 'rehackt';
|
|
3
2
|
import { FieldComponent, UseField } from './useField.cjs';
|
|
4
3
|
import { NoInfer } from '@tanstack/react-store';
|
|
4
|
+
import { NodeType } from './types.cjs';
|
|
5
5
|
|
|
6
6
|
declare module '@tanstack/form-core' {
|
|
7
7
|
interface FormApi<TFormData, TFormValidator> {
|
|
@@ -21,8 +21,8 @@ declare module '@tanstack/form-core' {
|
|
|
21
21
|
@see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
|
|
22
22
|
*/
|
|
23
23
|
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
|
24
|
-
children: ((state: NoInfer<TSelected>) =>
|
|
25
|
-
}) =>
|
|
24
|
+
children: ((state: NoInfer<TSelected>) => NodeType) | NodeType;
|
|
25
|
+
}) => NodeType;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
|
|
2
|
+
import { FunctionComponent } from 'rehackt';
|
|
2
3
|
|
|
3
4
|
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> & {
|
|
4
5
|
mode?: 'value' | 'array';
|
|
5
6
|
};
|
|
7
|
+
/**
|
|
8
|
+
* The return type of React.ReactNode appears to change between React 4.9 and 5.0
|
|
9
|
+
*
|
|
10
|
+
* This means that if we replace this type with React.ReactNode, there will be
|
|
11
|
+
* random typings the fail between React 4.9 and 5.0. This is a hack that resolves this issue.
|
|
12
|
+
*/
|
|
13
|
+
export type NodeType = ReturnType<FunctionComponent>;
|
package/dist/esm/useField.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { default as React } from 'rehackt';
|
|
2
1
|
import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
|
|
3
|
-
import { UseFieldOptions } from './types.js';
|
|
2
|
+
import { NodeType, UseFieldOptions } from './types.js';
|
|
4
3
|
|
|
5
4
|
declare module '@tanstack/form-core' {
|
|
6
5
|
interface FieldApi<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>> {
|
|
@@ -10,10 +9,8 @@ declare module '@tanstack/form-core' {
|
|
|
10
9
|
export type UseField<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>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
11
10
|
export declare function useField<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>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
12
11
|
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>> = {
|
|
13
|
-
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) =>
|
|
12
|
+
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => NodeType;
|
|
14
13
|
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
15
|
-
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'>) =>
|
|
16
|
-
export declare
|
|
17
|
-
children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => any;
|
|
18
|
-
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): React.JSX.Element;
|
|
14
|
+
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'>) => NodeType;
|
|
15
|
+
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>) => NodeType;
|
|
19
16
|
export {};
|
package/dist/esm/useField.js
CHANGED
|
@@ -25,13 +25,13 @@ function useField(opts) {
|
|
|
25
25
|
);
|
|
26
26
|
return fieldApi;
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
const Field = ({
|
|
29
29
|
children,
|
|
30
30
|
...fieldOptions
|
|
31
|
-
}) {
|
|
31
|
+
}) => {
|
|
32
32
|
const fieldApi = useField(fieldOptions);
|
|
33
33
|
return /* @__PURE__ */ jsx(Fragment, { children: functionalUpdate(children, fieldApi) });
|
|
34
|
-
}
|
|
34
|
+
};
|
|
35
35
|
export {
|
|
36
36
|
Field,
|
|
37
37
|
useField
|
package/dist/esm/useField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\nimport type {
|
|
1
|
+
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\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 Field: FieldComponent<TParentData, TFormValidator>\n }\n}\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\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): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n api.Field = Field as never\n\n return api\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 as never).length]\n }\n : undefined,\n )\n\n return fieldApi as never\n}\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 ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\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>) => NodeType\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>): NodeType => {\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":";;;;;AA0CO,SAAS,SAWd,MAOsE;AACtE,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,QAAI,QAAQ;AAEL,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,KAAc,EAAE,MAAM;AAAA,IAE9D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AAiDO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAW,oBAAA,UAAA,EAAA,UAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;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 'rehackt';
|
|
3
2
|
import { FieldComponent, UseField } from './useField.js';
|
|
4
3
|
import { NoInfer } from '@tanstack/react-store';
|
|
4
|
+
import { NodeType } from './types.js';
|
|
5
5
|
|
|
6
6
|
declare module '@tanstack/form-core' {
|
|
7
7
|
interface FormApi<TFormData, TFormValidator> {
|
|
@@ -21,8 +21,8 @@ declare module '@tanstack/form-core' {
|
|
|
21
21
|
@see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
|
|
22
22
|
*/
|
|
23
23
|
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
|
24
|
-
children: ((state: NoInfer<TSelected>) =>
|
|
25
|
-
}) =>
|
|
24
|
+
children: ((state: NoInfer<TSelected>) => NodeType) | NodeType;
|
|
25
|
+
}) => NodeType;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;
|
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, {
|
|
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 'rehackt'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n }\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n api.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n api.useField = (props) => useField({ ...props, form: api })\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\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 as any\n}\n"],"names":[],"mappings":";;;;;;AAmCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAAS,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,CAAA,CAAE;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.21.0",
|
|
4
4
|
"description": "Powerful, type-safe forms for React.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@tanstack/react-store": "^0.3.1",
|
|
45
45
|
"decode-formdata": "^0.4.0",
|
|
46
46
|
"rehackt": "^0.0.3",
|
|
47
|
-
"@tanstack/form-core": "0.
|
|
47
|
+
"@tanstack/form-core": "0.21.0"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"react": "^17.0.0 || ^18.0.0"
|
|
@@ -17,12 +17,14 @@ it('should type state.value properly', () => {
|
|
|
17
17
|
name="firstName"
|
|
18
18
|
children={(field) => {
|
|
19
19
|
assertType<'test'>(field.state.value)
|
|
20
|
+
return null
|
|
20
21
|
}}
|
|
21
22
|
/>
|
|
22
23
|
<form.Field
|
|
23
24
|
name="age"
|
|
24
25
|
children={(field) => {
|
|
25
26
|
assertType<84>(field.state.value)
|
|
27
|
+
return null
|
|
26
28
|
}}
|
|
27
29
|
/>
|
|
28
30
|
</>
|
package/src/types.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type {
|
|
|
4
4
|
FieldApiOptions,
|
|
5
5
|
Validator,
|
|
6
6
|
} from '@tanstack/form-core'
|
|
7
|
+
import type { FunctionComponent } from 'rehackt'
|
|
7
8
|
|
|
8
9
|
export type UseFieldOptions<
|
|
9
10
|
TParentData,
|
|
@@ -24,3 +25,11 @@ export type UseFieldOptions<
|
|
|
24
25
|
> & {
|
|
25
26
|
mode?: 'value' | 'array'
|
|
26
27
|
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* The return type of React.ReactNode appears to change between React 4.9 and 5.0
|
|
31
|
+
*
|
|
32
|
+
* This means that if we replace this type with React.ReactNode, there will be
|
|
33
|
+
* random typings the fail between React 4.9 and 5.0. This is a hack that resolves this issue.
|
|
34
|
+
*/
|
|
35
|
+
export type NodeType = ReturnType<FunctionComponent>
|
package/src/useField.tsx
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import React, { useState } from 'rehackt'
|
|
1
|
+
import React, { type FunctionComponent, useState } from 'rehackt'
|
|
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 { UseFieldOptions } from './types'
|
|
6
|
-
import type {
|
|
7
|
-
DeepKeys,
|
|
8
|
-
DeepValue,
|
|
9
|
-
Narrow,
|
|
10
|
-
Validator,
|
|
11
|
-
} from '@tanstack/form-core'
|
|
5
|
+
import type { NodeType, UseFieldOptions } from './types'
|
|
6
|
+
import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'
|
|
12
7
|
|
|
13
8
|
declare module '@tanstack/form-core' {
|
|
14
9
|
// eslint-disable-next-line no-shadow
|
|
@@ -117,7 +112,7 @@ type FieldComponentProps<
|
|
|
117
112
|
TFormValidator,
|
|
118
113
|
TData
|
|
119
114
|
>,
|
|
120
|
-
) =>
|
|
115
|
+
) => NodeType
|
|
121
116
|
} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>
|
|
122
117
|
|
|
123
118
|
export type FieldComponent<
|
|
@@ -143,9 +138,9 @@ export type FieldComponent<
|
|
|
143
138
|
TData
|
|
144
139
|
>,
|
|
145
140
|
'form'
|
|
146
|
-
>) =>
|
|
141
|
+
>) => NodeType
|
|
147
142
|
|
|
148
|
-
export
|
|
143
|
+
export const Field = (<
|
|
149
144
|
TParentData,
|
|
150
145
|
TName extends DeepKeys<TParentData>,
|
|
151
146
|
TFieldValidator extends
|
|
@@ -158,24 +153,14 @@ export function Field<
|
|
|
158
153
|
>({
|
|
159
154
|
children,
|
|
160
155
|
...fieldOptions
|
|
161
|
-
}:
|
|
162
|
-
children: (
|
|
163
|
-
fieldApi: FieldApi<
|
|
164
|
-
TParentData,
|
|
165
|
-
TName,
|
|
166
|
-
TFieldValidator,
|
|
167
|
-
TFormValidator,
|
|
168
|
-
TData
|
|
169
|
-
>,
|
|
170
|
-
) => any
|
|
171
|
-
} & UseFieldOptions<
|
|
156
|
+
}: FieldComponentProps<
|
|
172
157
|
TParentData,
|
|
173
158
|
TName,
|
|
174
159
|
TFieldValidator,
|
|
175
160
|
TFormValidator,
|
|
176
161
|
TData
|
|
177
|
-
>) {
|
|
162
|
+
>): NodeType => {
|
|
178
163
|
const fieldApi = useField(fieldOptions as any)
|
|
179
164
|
|
|
180
|
-
return <>{functionalUpdate(children, fieldApi as any)}</>
|
|
181
|
-
}
|
|
165
|
+
return (<>{functionalUpdate(children, fieldApi as any)}</>) as never
|
|
166
|
+
}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>
|
package/src/useForm.tsx
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { FormApi, functionalUpdate } from '@tanstack/form-core'
|
|
2
2
|
import { useStore } from '@tanstack/react-store'
|
|
3
|
-
import React, {
|
|
3
|
+
import React, { useState } from 'rehackt'
|
|
4
4
|
import { Field, type FieldComponent, type UseField, useField } from './useField'
|
|
5
5
|
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
|
|
6
6
|
import type { NoInfer } from '@tanstack/react-store'
|
|
7
7
|
import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
|
|
8
|
+
import type { NodeType } from './types'
|
|
8
9
|
|
|
9
10
|
declare module '@tanstack/form-core' {
|
|
10
11
|
// eslint-disable-next-line no-shadow
|
|
@@ -27,8 +28,8 @@ declare module '@tanstack/form-core' {
|
|
|
27
28
|
@see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
|
|
28
29
|
*/
|
|
29
30
|
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
|
|
30
|
-
children: ((state: NoInfer<TSelected>) =>
|
|
31
|
-
}) =>
|
|
31
|
+
children: ((state: NoInfer<TSelected>) => NodeType) | NodeType
|
|
32
|
+
}) => NodeType
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
|
|
@@ -41,7 +42,7 @@ export function useForm<
|
|
|
41
42
|
const [formApi] = useState(() => {
|
|
42
43
|
const api = new FormApi<TFormData, TFormValidator>(opts)
|
|
43
44
|
api.Field = function APIField(props) {
|
|
44
|
-
return <Field {...props} form={api} />
|
|
45
|
+
return (<Field {...props} form={api} />) as never
|
|
45
46
|
}
|
|
46
47
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
47
48
|
api.useField = (props) => useField({ ...props, form: api })
|