@tanstack/react-form 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -53,7 +53,8 @@
   "dependencies": {
     "@tanstack/react-store": "0.1.3",
     "@tanstack/store": "0.1.3",
-    "@tanstack/form-core": "0.2.0"
+    "use-isomorphic-layout-effect": "^1.1.2",
+    "@tanstack/form-core": "0.3.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/tests/useField.test.tsx

@@ -71,7 +71,7 @@ describe('useField', () => {
                   onBlur={field.handleBlur}
                   onChange={(e) => field.setValue(e.target.value)}
                 />
-                <p>{field.getMeta().error}</p>
+                <p>{field.getMeta().errors}</p>
               </div>
             )}
           />
@@ -112,7 +112,7 @@ describe('useField', () => {
                   onBlur={field.handleBlur}
                   onChange={(e) => field.handleChange(e.target.value)}
                 />
-                <p>{field.getMeta().error}</p>
+                <p>{field.getMeta().errorMap?.onChange}</p>
               </div>
             )}
           />
@@ -127,6 +127,56 @@ describe('useField', () => {
     expect(getByText(error)).toBeInTheDocument()
   })
 
+  it('should validate on change and on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChange={(value) =>
+              value === 'other' ? onChangeError : undefined
+            }
+            onBlur={(value) => (value === 'other' ? onBlurError : undefined)}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                <p>{field.getMeta().errorMap?.onChange}</p>
+                <p>{field.getMeta().errorMap?.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    expect(queryByText(onBlurError)).toBeInTheDocument()
+  })
+
   it('should validate async on change', async () => {
     type Person = {
       firstName: string
@@ -157,7 +207,7 @@ describe('useField', () => {
                   onBlur={field.handleBlur}
                   onChange={(e) => field.handleChange(e.target.value)}
                 />
-                <p>{field.getMeta().error}</p>
+                <p>{field.getMeta().errorMap?.onChange}</p>
               </div>
             )}
           />
@@ -173,6 +223,63 @@ describe('useField', () => {
     expect(getByText(error)).toBeInTheDocument()
   })
 
+  it('should validate async on change and async on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            onChangeAsync={async () => {
+              await sleep(10)
+              return onChangeError
+            }}
+            onBlurAsync={async () => {
+              await sleep(10)
+              return onBlurError
+            }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                <p>{field.getMeta().errorMap?.onChange}</p>
+                <p>{field.getMeta().errorMap?.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(onChangeError))
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    await waitFor(() => getByText(onBlurError))
+    expect(getByText(onBlurError)).toBeInTheDocument()
+  })
+
   it('should validate async on change with debounce', async () => {
     type Person = {
       firstName: string
@@ -205,7 +312,7 @@ describe('useField', () => {
                   onBlur={field.handleBlur}
                   onChange={(e) => field.handleChange(e.target.value)}
                 />
-                <p>{field.getMeta().error}</p>
+                <p>{field.getMeta().errors}</p>
               </div>
             )}
           />

package/src/useField.tsx

@@ -8,7 +8,7 @@ import type {
 } from '@tanstack/form-core'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
 import { useFormContext, formContext } from './formContext'
-import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'
 import type { UseFieldOptions } from './types'
 
 declare module '@tanstack/form-core' {

package/src/useForm.tsx

@@ -5,7 +5,7 @@ import { useStore } from '@tanstack/react-store'
 import React, { type ReactNode, useState } from 'react'
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { formContext } from './formContext'
-import { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow

package/build/legacy/createFormFactory.cjs

@@ -1,42 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/createFormFactory.ts
-var createFormFactory_exports = {};
-__export(createFormFactory_exports, {
-  createFormFactory: () => createFormFactory
-});
-module.exports = __toCommonJS(createFormFactory_exports);
-var import_useField = require("./useField.cjs");
-var import_useForm = require("./useForm.cjs");
-function createFormFactory(defaultOpts) {
-  return {
-    useForm: (opts) => {
-      const formOptions = Object.assign({}, defaultOpts, opts);
-      return (0, import_useForm.useForm)(formOptions);
-    },
-    useField: import_useField.useField,
-    Field: import_useField.Field
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createFormFactory
-});
-//# sourceMappingURL=createFormFactory.cjs.map

package/build/legacy/createFormFactory.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoE;AACpE,qBAAwB;AAQjB,SAAS,kBACd,aACwB;AACxB,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,iBAAO,wBAAmB,WAAW;AAAA,IACvC;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;","names":[]}

package/build/legacy/createFormFactory.d.cts

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

package/build/legacy/createFormFactory.d.ts

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

package/build/legacy/createFormFactory.js

@@ -1,17 +0,0 @@
-// src/createFormFactory.ts
-import { Field, useField } from "./useField.js";
-import { useForm } from "./useForm.js";
-function createFormFactory(defaultOpts) {
-  return {
-    useForm: (opts) => {
-      const formOptions = Object.assign({}, defaultOpts, opts);
-      return useForm(formOptions);
-    },
-    useField,
-    Field
-  };
-}
-export {
-  createFormFactory
-};
-//# sourceMappingURL=createFormFactory.js.map

package/build/legacy/createFormFactory.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      const formOptions = Object.assign({}, defaultOpts, opts)\n      return useForm<TFormData>(formOptions)\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"mappings":";AAEA,SAA6C,OAAO,gBAAgB;AACpE,SAAS,eAAe;AAQjB,SAAS,kBACd,aACwB;AACxB,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,aAAO,QAAmB,WAAW;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/build/legacy/formContext.cjs

@@ -1,51 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/formContext.ts
-var formContext_exports = {};
-__export(formContext_exports, {
-  formContext: () => formContext,
-  useFormContext: () => useFormContext
-});
-module.exports = __toCommonJS(formContext_exports);
-var React = __toESM(require("react"), 1);
-var formContext = React.createContext(null);
-function useFormContext() {
-  const formApi = React.useContext(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  formContext,
-  useFormContext
-});
-//# sourceMappingURL=formContext.cjs.map

package/build/legacy/formContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n  formApi: FormApi<any>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = React.useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEhB,IAAM,cAAoB,oBAGvB,IAAK;AAER,SAAS,iBAAiB;AAC/B,QAAM,UAAgB,iBAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}

package/build/legacy/formContext.d.cts

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

package/build/legacy/formContext.d.ts

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

package/build/legacy/formContext.js

@@ -1,15 +0,0 @@
-// src/formContext.ts
-import * as React from "react";
-var formContext = React.createContext(null);
-function useFormContext() {
-  const formApi = React.useContext(formContext);
-  if (!formApi) {
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  }
-  return formApi;
-}
-export {
-  formContext,
-  useFormContext
-};
-//# sourceMappingURL=formContext.js.map

package/build/legacy/formContext.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n  formApi: FormApi<any>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = React.useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"mappings":";AACA,YAAY,WAAW;AAEhB,IAAM,cAAoB,oBAGvB,IAAK;AAER,SAAS,iBAAiB;AAC/B,QAAM,UAAgB,iBAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}

package/build/legacy/index.cjs

@@ -1,46 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Field: () => import_useField.Field,
-  FieldApi: () => import_form_core.FieldApi,
-  FormApi: () => import_form_core.FormApi,
-  createFormFactory: () => import_createFormFactory.createFormFactory,
-  functionalUpdate: () => import_form_core.functionalUpdate,
-  useField: () => import_useField.useField,
-  useForm: () => import_useForm.useForm
-});
-module.exports = __toCommonJS(src_exports);
-var import_form_core = require("@tanstack/form-core");
-var import_useForm = require("./useForm.cjs");
-var import_useField = require("./useField.cjs");
-var import_createFormFactory = require("./createFormFactory.cjs");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Field,
-  FieldApi,
-  FormApi,
-  createFormFactory,
-  functionalUpdate,
-  useField,
-  useForm
-});
-//# sourceMappingURL=index.cjs.map

package/build/legacy/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n  DeepKeys,\n  DeepValue,\n  FieldApiOptions,\n  FieldInfo,\n  FieldMeta,\n  FieldOptions,\n  FieldState,\n  FormOptions,\n  FormState,\n  RequiredByKey,\n  Updater,\n  UpdaterFn,\n  ValidationCause,\n  ValidationError,\n  ValidationMeta,\n} from '@tanstack/form-core'\n\nexport { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'\n\nexport { useForm } from './useForm'\n\nexport type { UseField, FieldComponent } from './useField'\nexport { useField, Field } from './useField'\n\nexport type { FormFactory } from './createFormFactory'\nexport { createFormFactory } from './createFormFactory'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA,uBAAoD;AAEpD,qBAAwB;AAGxB,sBAAgC;AAGhC,+BAAkC;","names":[]}

package/build/legacy/index.d.cts

@@ -1,7 +0,0 @@
-export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
-export { useForm } from './useForm.cjs';
-export { Field, FieldComponent, UseField, useField } from './useField.cjs';
-export { FormFactory, createFormFactory } from './createFormFactory.cjs';
-import '@tanstack/react-store';
-import 'react';
-import './types.cjs';

package/build/legacy/index.d.ts

@@ -1,7 +0,0 @@
-export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
-export { useForm } from './useForm.js';
-export { Field, FieldComponent, UseField, useField } from './useField.js';
-export { FormFactory, createFormFactory } from './createFormFactory.js';
-import '@tanstack/react-store';
-import 'react';
-import './types.js';

package/build/legacy/index.js

@@ -1,15 +0,0 @@
-// src/index.ts
-import { FormApi, FieldApi, functionalUpdate } from "@tanstack/form-core";
-import { useForm } from "./useForm.js";
-import { useField, Field } from "./useField.js";
-import { createFormFactory } from "./createFormFactory.js";
-export {
-  Field,
-  FieldApi,
-  FormApi,
-  createFormFactory,
-  functionalUpdate,
-  useField,
-  useForm
-};
-//# sourceMappingURL=index.js.map

package/build/legacy/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n  DeepKeys,\n  DeepValue,\n  FieldApiOptions,\n  FieldInfo,\n  FieldMeta,\n  FieldOptions,\n  FieldState,\n  FormOptions,\n  FormState,\n  RequiredByKey,\n  Updater,\n  UpdaterFn,\n  ValidationCause,\n  ValidationError,\n  ValidationMeta,\n} from '@tanstack/form-core'\n\nexport { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'\n\nexport { useForm } from './useForm'\n\nexport type { UseField, FieldComponent } from './useField'\nexport { useField, Field } from './useField'\n\nexport type { FormFactory } from './createFormFactory'\nexport { createFormFactory } from './createFormFactory'\n"],"mappings":";AAkBA,SAAS,SAAS,UAAU,wBAAwB;AAEpD,SAAS,eAAe;AAGxB,SAAS,UAAU,aAAa;AAGhC,SAAS,yBAAyB;","names":[]}

package/build/legacy/types.cjs

@@ -1,19 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/types.ts
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.cjs.map

package/build/legacy/types.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/types.ts"],"sourcesContent":["import type { FieldOptions } from '@tanstack/form-core'\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/build/legacy/types.d.cts

@@ -1,7 +0,0 @@
-import { FieldOptions } from '@tanstack/form-core';
-
-type UseFieldOptions<TData, TFormData> = FieldOptions<TData, TFormData> & {
-    mode?: 'value' | 'array';
-};
-
-export { UseFieldOptions };

package/build/legacy/types.d.ts

@@ -1,7 +0,0 @@
-import { FieldOptions } from '@tanstack/form-core';
-
-type UseFieldOptions<TData, TFormData> = FieldOptions<TData, TFormData> & {
-    mode?: 'value' | 'array';
-};
-
-export { UseFieldOptions };

package/build/legacy/types.js

@@ -1 +0,0 @@
-//# sourceMappingURL=types.js.map

package/build/legacy/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/useField.cjs

@@ -1,80 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/useField.tsx
-var useField_exports = {};
-__export(useField_exports, {
-  Field: () => Field,
-  useField: () => useField
-});
-module.exports = __toCommonJS(useField_exports);
-var import_react = __toESM(require("react"), 1);
-var import_react_store = require("@tanstack/react-store");
-var import_form_core = require("@tanstack/form-core");
-var import_formContext = require("./formContext.cjs");
-var import_useIsomorphicLayoutEffect = require("./utils/useIsomorphicLayoutEffect.cjs");
-function useField(opts) {
-  const { formApi, parentFieldName } = (0, import_formContext.useFormContext)();
-  const [fieldApi] = (0, import_react.useState)(() => {
-    const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
-    const api = new import_form_core.FieldApi({ ...opts, form: formApi, name });
-    api.Field = Field;
-    return api;
-  });
-  (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
-    fieldApi.update({ ...opts, form: formApi });
-  });
-  (0, import_react_store.useStore)(
-    fieldApi.store,
-    opts.mode === "array" ? (state) => {
-      return [state.meta, Object.keys(state.value || []).length];
-    } : void 0
-  );
-  (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => fieldApi.mount(), [fieldApi]);
-  return fieldApi;
-}
-function Field({
-  children,
-  ...fieldOptions
-}) {
-  const fieldApi = useField(fieldOptions);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_formContext.formContext.Provider,
-    {
-      value: { formApi: fieldApi.form, parentFieldName: fieldApi.name },
-      children: (0, import_form_core.functionalUpdate)(children, fieldApi)
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Field,
-  useField
-});
-//# sourceMappingURL=useField.cjs.map

package/build/legacy/useField.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\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, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store as any,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,yBAAyB;AAOzB,uBAA2C;AAC3C,yBAA4C;AAC5C,uCAA0C;AAiBnC,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,CAAC,QAAQ,QAAI,uBAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,0BAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,kEAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,kEAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC,+BAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,cAAU,mCAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":["React"]}