@tanstack/react-form 0.0.9 → 0.0.10

package/build/stats-react.json

@@ -11,11 +11,11 @@
             "children": [
               {
                 "name": "@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
-                "uid": "766a-45"
+                "uid": "5ac5-45"
               },
               {
                 "name": "@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js",
-                "uid": "766a-51"
+                "uid": "5ac5-51"
               }
             ]
           },
@@ -24,29 +24,29 @@
             "children": [
               {
                 "name": "form-core/build/esm/index.js",
-                "uid": "766a-47"
+                "uid": "5ac5-47"
               },
               {
                 "name": "react-form/src",
                 "children": [
                   {
-                    "uid": "766a-53",
+                    "uid": "5ac5-53",
                     "name": "formContext.ts"
                   },
                   {
-                    "uid": "766a-55",
+                    "uid": "5ac5-55",
                     "name": "useField.tsx"
                   },
                   {
-                    "uid": "766a-57",
+                    "uid": "5ac5-57",
                     "name": "useForm.tsx"
                   },
                   {
-                    "uid": "766a-59",
+                    "uid": "5ac5-59",
                     "name": "createFormFactory.ts"
                   },
                   {
-                    "uid": "766a-61",
+                    "uid": "5ac5-61",
                     "name": "index.ts"
                   }
                 ]
@@ -54,7 +54,7 @@
             ]
           },
           {
-            "uid": "766a-49",
+            "uid": "5ac5-49",
             "name": "\u0000rollupPluginBabelHelpers.js"
           }
         ]
@@ -63,282 +63,282 @@
     "isRoot": true
   },
   "nodeParts": {
-    "766a-45": {
+    "5ac5-45": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "766a-44"
+      "mainUid": "5ac5-44"
     },
-    "766a-47": {
+    "5ac5-47": {
       "renderedLength": 23508,
       "gzipLength": 5149,
       "brotliLength": 0,
-      "mainUid": "766a-46"
+      "mainUid": "5ac5-46"
     },
-    "766a-49": {
+    "5ac5-49": {
       "renderedLength": 431,
       "gzipLength": 240,
       "brotliLength": 0,
-      "mainUid": "766a-48"
+      "mainUid": "5ac5-48"
     },
-    "766a-51": {
+    "5ac5-51": {
       "renderedLength": 978,
       "gzipLength": 456,
       "brotliLength": 0,
-      "mainUid": "766a-50"
+      "mainUid": "5ac5-50"
     },
-    "766a-53": {
+    "5ac5-53": {
       "renderedLength": 296,
       "gzipLength": 200,
       "brotliLength": 0,
-      "mainUid": "766a-52"
+      "mainUid": "5ac5-52"
     },
-    "766a-55": {
+    "5ac5-55": {
       "renderedLength": 2096,
       "gzipLength": 779,
       "brotliLength": 0,
-      "mainUid": "766a-54"
+      "mainUid": "5ac5-54"
     },
-    "766a-57": {
-      "renderedLength": 1287,
-      "gzipLength": 495,
+    "5ac5-57": {
+      "renderedLength": 1070,
+      "gzipLength": 437,
       "brotliLength": 0,
-      "mainUid": "766a-56"
+      "mainUid": "5ac5-56"
     },
-    "766a-59": {
+    "5ac5-59": {
       "renderedLength": 217,
       "gzipLength": 138,
       "brotliLength": 0,
-      "mainUid": "766a-58"
+      "mainUid": "5ac5-58"
     },
-    "766a-61": {
+    "5ac5-61": {
       "renderedLength": 0,
       "gzipLength": 0,
       "brotliLength": 0,
-      "mainUid": "766a-60"
+      "mainUid": "5ac5-60"
     }
   },
   "nodeMetas": {
-    "766a-44": {
+    "5ac5-44": {
       "id": "/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "766a-45"
+        "index.production.js": "5ac5-45"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "766a-46"
+          "uid": "5ac5-46"
         },
         {
-          "uid": "766a-50"
+          "uid": "5ac5-50"
         }
       ]
     },
-    "766a-46": {
+    "5ac5-46": {
       "id": "/packages/form-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "766a-47"
+        "index.production.js": "5ac5-47"
       },
       "imported": [
         {
-          "uid": "766a-44"
+          "uid": "5ac5-44"
         }
       ],
       "importedBy": [
         {
-          "uid": "766a-60"
+          "uid": "5ac5-60"
         },
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         },
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         }
       ]
     },
-    "766a-48": {
+    "5ac5-48": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "766a-49"
+        "index.production.js": "5ac5-49"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         }
       ]
     },
-    "766a-50": {
+    "5ac5-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": "766a-51"
+        "index.production.js": "5ac5-51"
       },
       "imported": [
         {
-          "uid": "766a-63"
+          "uid": "5ac5-63"
         },
         {
-          "uid": "766a-44"
+          "uid": "5ac5-44"
         }
       ],
       "importedBy": [
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         },
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         }
       ]
     },
-    "766a-52": {
+    "5ac5-52": {
       "id": "/packages/react-form/src/formContext.ts",
       "moduleParts": {
-        "index.production.js": "766a-53"
+        "index.production.js": "5ac5-53"
       },
       "imported": [
         {
-          "uid": "766a-62"
+          "uid": "5ac5-62"
         }
       ],
       "importedBy": [
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         },
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         }
       ]
     },
-    "766a-54": {
+    "5ac5-54": {
       "id": "/packages/react-form/src/useField.tsx",
       "moduleParts": {
-        "index.production.js": "766a-55"
+        "index.production.js": "5ac5-55"
       },
       "imported": [
         {
-          "uid": "766a-62"
+          "uid": "5ac5-62"
         },
         {
-          "uid": "766a-50"
+          "uid": "5ac5-50"
         },
         {
-          "uid": "766a-46"
+          "uid": "5ac5-46"
         },
         {
-          "uid": "766a-52"
+          "uid": "5ac5-52"
         }
       ],
       "importedBy": [
         {
-          "uid": "766a-60"
+          "uid": "5ac5-60"
         },
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         },
         {
-          "uid": "766a-58"
+          "uid": "5ac5-58"
         }
       ]
     },
-    "766a-56": {
+    "5ac5-56": {
       "id": "/packages/react-form/src/useForm.tsx",
       "moduleParts": {
-        "index.production.js": "766a-57"
+        "index.production.js": "5ac5-57"
       },
       "imported": [
         {
-          "uid": "766a-48"
+          "uid": "5ac5-48"
         },
         {
-          "uid": "766a-46"
+          "uid": "5ac5-46"
         },
         {
-          "uid": "766a-50"
+          "uid": "5ac5-50"
         },
         {
-          "uid": "766a-62"
+          "uid": "5ac5-62"
         },
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         },
         {
-          "uid": "766a-52"
+          "uid": "5ac5-52"
         }
       ],
       "importedBy": [
         {
-          "uid": "766a-60"
+          "uid": "5ac5-60"
         },
         {
-          "uid": "766a-58"
+          "uid": "5ac5-58"
         }
       ]
     },
-    "766a-58": {
+    "5ac5-58": {
       "id": "/packages/react-form/src/createFormFactory.ts",
       "moduleParts": {
-        "index.production.js": "766a-59"
+        "index.production.js": "5ac5-59"
       },
       "imported": [
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         },
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         }
       ],
       "importedBy": [
         {
-          "uid": "766a-60"
+          "uid": "5ac5-60"
         }
       ]
     },
-    "766a-60": {
+    "5ac5-60": {
       "id": "/packages/react-form/src/index.ts",
       "moduleParts": {
-        "index.production.js": "766a-61"
+        "index.production.js": "5ac5-61"
       },
       "imported": [
         {
-          "uid": "766a-46"
+          "uid": "5ac5-46"
         },
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         },
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         },
         {
-          "uid": "766a-58"
+          "uid": "5ac5-58"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "766a-62": {
+    "5ac5-62": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "766a-56"
+          "uid": "5ac5-56"
         },
         {
-          "uid": "766a-54"
+          "uid": "5ac5-54"
         },
         {
-          "uid": "766a-52"
+          "uid": "5ac5-52"
         }
       ],
       "isExternal": true
     },
-    "766a-63": {
+    "5ac5-63": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "766a-50"
+          "uid": "5ac5-50"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -39,12 +39,16 @@ declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
     children: (fieldApi: FieldApi<TData, TFormData>) => any;
 } & UseFieldOptions<TData, TFormData>): JSX.Element;
 
+type FormSubmitEvent = React.FormEvent<HTMLFormElement>;
 declare module '@tanstack/form-core' {
     interface Register {
-        FormSubmitEvent: React.FormEvent<HTMLFormElement>;
+        FormSubmitEvent: FormSubmitEvent;
     }
     interface FormApi<TFormData> {
-        Form: FormComponent;
+        Provider: (props: {
+            children: any;
+        }) => any;
+        getFormProps: () => FormProps;
         Field: FieldComponent<TFormData, TFormData>;
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
@@ -54,12 +58,11 @@ declare module '@tanstack/form-core' {
         }) => any;
     }
 }
-declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
-type FormProps = React.HTMLProps<HTMLFormElement> & {
-    children: React.ReactNode;
-    noFormElement?: boolean;
+type FormProps = {
+    onSubmit: (e: FormSubmitEvent) => void;
+    disabled: boolean;
 };
-type FormComponent = (props: FormProps) => any;
+declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
 
 type FormFactory<TFormData> = {
     useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
@@ -68,4 +71,4 @@ type FormFactory<TFormData> = {
 };
 declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
 
-export { Field, FieldComponent, FormComponent, FormFactory, FormProps, UseField, createFormFactory, useField, useForm };
+export { Field, FieldComponent, FormFactory, FormProps, UseField, createFormFactory, useField, useForm };

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

@@ -1,6 +1,6 @@
 export type { ChangeProps, DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, InputProps, RequiredByKey, Updater, UpdaterFn, UserChangeProps, UserInputProps, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
 export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
-export type { FormComponent, FormProps } from './useForm';
+export type { FormProps } from './useForm';
 export { useForm } from './useForm';
 export type { UseField, FieldComponent } from './useField';
 export { useField, Field } from './useField';

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

@@ -3,12 +3,16 @@ import { FormApi } from '@tanstack/form-core';
 import type { NoInfer } from '@tanstack/react-store';
 import React from 'react';
 import { type UseField, type FieldComponent } from './useField';
+export type FormSubmitEvent = React.FormEvent<HTMLFormElement>;
 declare module '@tanstack/form-core' {
     interface Register {
-        FormSubmitEvent: React.FormEvent<HTMLFormElement>;
+        FormSubmitEvent: FormSubmitEvent;
     }
     interface FormApi<TFormData> {
-        Form: FormComponent;
+        Provider: (props: {
+            children: any;
+        }) => any;
+        getFormProps: () => FormProps;
         Field: FieldComponent<TFormData, TFormData>;
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
@@ -18,9 +22,8 @@ declare module '@tanstack/form-core' {
         }) => any;
     }
 }
-export declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
-export type FormProps = React.HTMLProps<HTMLFormElement> & {
-    children: React.ReactNode;
-    noFormElement?: boolean;
+export type FormProps = {
+    onSubmit: (e: FormSubmitEvent) => void;
+    disabled: boolean;
 };
-export type FormComponent = (props: FormProps) => any;
+export declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;

package/build/umd/index.development.js

@@ -929,7 +929,20 @@
     const [formApi] = React__default["default"].useState(() => {
       // @ts-ignore
       const api = new FormApi(opts);
-      api.Form = createFormComponent(api);
+
+      api.Provider = props => /*#__PURE__*/React__default["default"].createElement(formContext.Provider, _extends({}, props, {
+        value: {
+          formApi: api
+        }
+      }));
+
+      api.getFormProps = () => {
+        return {
+          onSubmit: formApi.handleSubmit,
+          disabled: api.state.isSubmitting
+        };
+      };
+
       api.Field = Field;
       api.useField = useField;
 
@@ -947,30 +960,11 @@
 
       return api;
     });
+    formApi.useStore(state => state.isSubmitting);
     formApi.update(opts);
     return formApi;
   }
 
-  function createFormComponent(formApi) {
-    const Form = ({
-      children,
-      noFormElement,
-      ...rest
-    }) => {
-      const isSubmitting = formApi.useStore(state => state.isSubmitting);
-      return /*#__PURE__*/React__default["default"].createElement(formContext.Provider, {
-        value: {
-          formApi
-        }
-      }, noFormElement ? children : /*#__PURE__*/React__default["default"].createElement("form", _extends({
-        onSubmit: formApi.handleSubmit,
-        disabled: isSubmitting
-      }, rest), children));
-    };
-
-    return Form;
-  }
-
   function createFormFactory(defaultOpts) {
     return {
       useForm: opts => {