@tanstack/solid-form 1.25.0 → 1.26.0

package/dist/source/createFormHook.jsx

@@ -1,5 +1,6 @@
 import { createContext, splitProps, useContext } from 'solid-js';
 import { createForm } from './createForm';
+import { createFieldGroup } from './createFieldGroup';
 export function createFormHookContexts() {
     // We should never hit the `null` case here
     const fieldContext = createContext(null);
@@ -52,9 +53,22 @@ export function createFormHook(opts) {
     function withForm({ render, props, }) {
         return (innerProps) => render({ ...props, ...innerProps });
     }
+    function withFieldGroup({ render, props, defaultValues, }) {
+        return function Render(innerProps) {
+            const fieldGroupProps = {
+                form: innerProps.form,
+                fields: innerProps.fields,
+                defaultValues,
+                formComponents: opts.formComponents,
+            };
+            const fieldGroupApi = createFieldGroup(() => fieldGroupProps);
+            return render({ ...props, ...innerProps, group: fieldGroupApi });
+        };
+    }
     return {
         useAppForm,
         withForm,
+        withFieldGroup,
     };
 }
 //# sourceMappingURL=createFormHook.jsx.map

package/dist/source/createFormHook.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createFormHook.jsx","sourceRoot":"","sources":["../../src/createFormHook.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"createFormHook.jsx","sourceRoot":"","sources":["../../src/createFormHook.tsx"],"names":[],"mappings":"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"}

package/dist/source/index.d.ts

@@ -2,5 +2,6 @@ export * from '@tanstack/form-core';
 export { useStore } from '@tanstack/solid-store';
 export * from './createField';
 export * from './createForm';
+export * from './createFieldGroup';
 export * from './createFormHook';
 export * from './types';

package/dist/source/index.jsx

@@ -2,6 +2,7 @@ export * from '@tanstack/form-core';
 export { useStore } from '@tanstack/solid-store';
 export * from './createField';
 export * from './createForm';
+export * from './createFieldGroup';
 export * from './createFormHook';
 export * from './types';
 //# sourceMappingURL=index.jsx.map

package/dist/source/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@tanstack/solid-store": "^0.7.7",
-    "@tanstack/form-core": "1.25.0"
+    "@tanstack/form-core": "1.26.0"
   },
   "devDependencies": {
     "solid-js": "^1.9.9",

package/src/createField.tsx

@@ -11,12 +11,13 @@ import type {
   DeepValue,
   FieldAsyncValidateOrFn,
   FieldValidateOrFn,
+  FieldValidators,
   FormAsyncValidateOrFn,
   FormValidateOrFn,
   Narrow,
 } from '@tanstack/form-core'
 
-import type { Accessor, Component, JSX, JSXElement } from 'solid-js'
+import type { Accessor, JSX, JSXElement } from 'solid-js'
 import type { CreateFieldOptions, CreateFieldOptionsBound } from './types'
 
 interface SolidFieldApi<
@@ -625,6 +626,94 @@ interface FieldComponentProps<
   ) => JSXElement
 }
 
+/**
+ * A type alias representing a field component for a form lens data type.
+ */
+export type LensFieldComponent<
+  in out TLensData,
+  in out TParentSubmitMeta,
+  in out ExtendedApi = {},
+> = <
+  const TName extends DeepKeys<TLensData>,
+  TData extends DeepValue<TLensData, TName>,
+  TOnMount extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnChange extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnChangeAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+  TOnBlur extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnBlurAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+  TOnSubmit extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnSubmitAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+  TOnDynamic extends undefined | FieldValidateOrFn<unknown, string, TData>,
+  TOnDynamicAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<unknown, string, TData>,
+>({
+  children,
+  ...fieldOptions
+}: Omit<
+  FieldComponentBoundProps<
+    unknown,
+    string,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    undefined | FormAsyncValidateOrFn<unknown>,
+    TParentSubmitMeta,
+    ExtendedApi
+  >,
+  'name' | 'validators'
+> & {
+  name: TName
+  validators?: Omit<
+    FieldValidators<
+      unknown,
+      string,
+      TData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync
+    >,
+    'onChangeListenTo' | 'onBlurListenTo'
+  > & {
+    /**
+     * An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes
+     */
+    onChangeListenTo?: DeepKeys<TLensData>[]
+    /**
+     * An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes
+     */
+    onBlurListenTo?: DeepKeys<TLensData>[]
+  }
+}) => JSX.Element
+
 export function Field<
   TParentData,
   TName extends DeepKeys<TParentData>,

package/src/createFieldGroup.tsx

@@ -0,0 +1,239 @@
+import { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'
+import { useStore } from '@tanstack/solid-store'
+import { onCleanup, onMount } from 'solid-js'
+import type { Component, JSX, ParentProps } from 'solid-js'
+import type {
+  DeepKeysOfType,
+  FieldGroupState,
+  FieldsMap,
+  FormAsyncValidateOrFn,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+import type { LensFieldComponent } from './createField'
+import type { AppFieldExtendedSolidFormApi } from './createFormHook'
+
+/**
+ * @private
+ */
+export type AppFieldExtendedSolidFieldGroupApi<
+  TFormData,
+  TFieldGroupData,
+  TFields extends
+    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+    | FieldsMap<TFormData, TFieldGroupData>,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TSubmitMeta,
+  TFieldComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+> = FieldGroupApi<
+  TFormData,
+  TFieldGroupData,
+  TFields,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnDynamic,
+  TOnDynamicAsync,
+  TOnServer,
+  TSubmitMeta
+> &
+  NoInfer<TFormComponents> & {
+    AppField: LensFieldComponent<
+      TFieldGroupData,
+      TSubmitMeta,
+      NoInfer<TFieldComponents>
+    >
+    AppForm: Component<ParentProps>
+    /**
+     * A solid component to render form fields. With this, you can render and manage individual form fields.
+     */
+    Field: LensFieldComponent<TFieldGroupData, TSubmitMeta>
+
+    /**
+     * A `Subscribe` function that allows you to listen and solid 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.
+     */
+    Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {
+      selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected
+      children: ((state: NoInfer<TSelected>) => JSX.Element) | JSX.Element
+    }) => JSX.Element
+  }
+
+export function createFieldGroup<
+  TFormData,
+  TFieldGroupData,
+  TFields extends
+    | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+    | FieldsMap<TFormData, TFieldGroupData>,
+  TOnMount extends undefined | FormValidateOrFn<TFormData>,
+  TOnChange extends undefined | FormValidateOrFn<TFormData>,
+  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+  TComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+  TSubmitMeta = never,
+>(
+  opts: () => {
+    form:
+      | AppFieldExtendedSolidFormApi<
+          TFormData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TOnDynamic,
+          TOnDynamicAsync,
+          TOnServer,
+          TSubmitMeta,
+          TComponents,
+          TFormComponents
+        >
+      | AppFieldExtendedSolidFieldGroupApi<
+          // Since this only occurs if you nest it within other form lenses, it can be more
+          // lenient with the types.
+          unknown,
+          TFormData,
+          string | FieldsMap<unknown, TFormData>,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          any,
+          TSubmitMeta,
+          TComponents,
+          TFormComponents
+        >
+    fields: TFields
+    defaultValues?: TFieldGroupData
+    onSubmitMeta?: TSubmitMeta
+    formComponents: TFormComponents
+  },
+): AppFieldExtendedSolidFieldGroupApi<
+  TFormData,
+  TFieldGroupData,
+  TFields,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TOnDynamic,
+  TOnDynamicAsync,
+  TOnServer,
+  TSubmitMeta,
+  TComponents,
+  TFormComponents
+> {
+  const options = opts()
+  const api = new FieldGroupApi(options)
+  const form =
+    options.form instanceof FieldGroupApi
+      ? (options.form.form as AppFieldExtendedSolidFormApi<
+          TFormData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TOnDynamic,
+          TOnDynamicAsync,
+          TOnServer,
+          TSubmitMeta,
+          TComponents,
+          TFormComponents
+        >)
+      : options.form
+
+  const extendedApi: AppFieldExtendedSolidFieldGroupApi<
+    TFormData,
+    TFieldGroupData,
+    TFields,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  > = api as never
+
+  extendedApi.AppForm = (appFormProps) => <form.AppForm {...appFormProps} />
+  extendedApi.AppField = (props) => (
+    <form.AppField {...(api.getFormFieldOptions(props) as any)} />
+  )
+  extendedApi.Field = (props) => (
+    <form.Field {...(api.getFormFieldOptions(props) as any)} />
+  )
+  extendedApi.Subscribe = (props) => {
+    const data = useStore(api.store, props.selector)
+
+    return functionalUpdate(props.children, data()) as Element
+  }
+
+  let mounted = false
+  onMount(() => {
+    const cleanupFn = api.mount()
+    mounted = true
+    onCleanup(() => {
+      cleanupFn()
+      mounted = false
+    })
+  })
+
+  return Object.assign(extendedApi, {
+    ...options.formComponents,
+  }) as AppFieldExtendedSolidFieldGroupApi<
+    TFormData,
+    TFieldGroupData,
+    TFields,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TOnServer,
+    TSubmitMeta,
+    TComponents,
+    TFormComponents
+  >
+}

package/src/createFormHook.tsx

@@ -1,9 +1,14 @@
 import { createContext, splitProps, useContext } from 'solid-js'
 import { createForm } from './createForm'
+import { createFieldGroup } from './createFieldGroup'
+import type { AppFieldExtendedSolidFieldGroupApi } from './createFieldGroup'
 import type {
   AnyFieldApi,
   AnyFormApi,
+  BaseFormOptions,
+  DeepKeysOfType,
   FieldApi,
+  FieldsMap,
   FormAsyncValidateOrFn,
   FormOptions,
   FormValidateOrFn,
@@ -142,8 +147,10 @@ interface CreateFormHookProps<
   formComponents: TFormComponents
   formContext: Context<AnyFormApi>
 }
-
-type AppFieldExtendedSolidFormApi<
+/**
+ * @private
+ */
+export type AppFieldExtendedSolidFormApi<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
   TOnChange extends undefined | FormValidateOrFn<TFormData>,
@@ -247,6 +254,43 @@ export interface WithFormProps<
   ) => JSXElement
 }
 
+export interface WithFieldGroupProps<
+  TFieldGroupData,
+  TFieldComponents extends Record<string, Component<any>>,
+  TFormComponents extends Record<string, Component<any>>,
+  TSubmitMeta,
+  TRenderProps extends Record<string, unknown> = Record<string, never>,
+> extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {
+  // Optional, but adds props to the `render` function outside of `form`
+  props?: TRenderProps
+  render: (
+    props: ParentProps<
+      NoInfer<TRenderProps> & {
+        group: AppFieldExtendedSolidFieldGroupApi<
+          unknown,
+          TFieldGroupData,
+          string | FieldsMap<unknown, TFieldGroupData>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          undefined | FormAsyncValidateOrFn<unknown>,
+          // this types it as 'never' in the render prop. It should prevent any
+          // untyped meta passed to the handleSubmit by accident.
+          unknown extends TSubmitMeta ? never : TSubmitMeta,
+          TFieldComponents,
+          TFormComponents
+        >
+      }
+    >,
+  ) => JSXElement
+}
+
 export function createFormHook<
   const TComponents extends Record<string, Component<any>>,
   const TFormComponents extends Record<string, Component<any>>,
@@ -416,8 +460,96 @@ export function createFormHook<
     return (innerProps) => render({ ...props, ...innerProps })
   }
 
+  function withFieldGroup<
+    TFieldGroupData,
+    TSubmitMeta,
+    TRenderProps extends Record<string, unknown> = {},
+  >({
+    render,
+    props,
+    defaultValues,
+  }: WithFieldGroupProps<
+    TFieldGroupData,
+    TComponents,
+    TFormComponents,
+    TSubmitMeta,
+    TRenderProps
+  >): <
+    TFormData,
+    TFields extends
+      | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>
+      | FieldsMap<TFormData, TFieldGroupData>,
+    TOnMount extends undefined | FormValidateOrFn<TFormData>,
+    TOnChange extends undefined | FormValidateOrFn<TFormData>,
+    TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnBlur extends undefined | FormValidateOrFn<TFormData>,
+    TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
+    TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
+    TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
+    TFormSubmitMeta,
+  >(
+    params: ParentProps<
+      NoInfer<TRenderProps> & {
+        form:
+          | AppFieldExtendedSolidFormApi<
+              TFormData,
+              TOnMount,
+              TOnChange,
+              TOnChangeAsync,
+              TOnBlur,
+              TOnBlurAsync,
+              TOnSubmit,
+              TOnSubmitAsync,
+              TOnDynamic,
+              TOnDynamicAsync,
+              TOnServer,
+              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,
+              TComponents,
+              TFormComponents
+            >
+          | AppFieldExtendedSolidFieldGroupApi<
+              // Since this only occurs if you nest it within other field groups, it can be more
+              // lenient with the types.
+              unknown,
+              TFormData,
+              string | FieldsMap<unknown, TFormData>,
+              any,
+              any,
+              any,
+              any,
+              any,
+              any,
+              any,
+              any,
+              any,
+              any,
+              unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta,
+              TComponents,
+              TFormComponents
+            >
+        fields: TFields
+      }
+    >,
+  ) => JSXElement {
+    return function Render(innerProps) {
+      const fieldGroupProps = {
+        form: innerProps.form,
+        fields: innerProps.fields,
+        defaultValues,
+        formComponents: opts.formComponents,
+      }
+      const fieldGroupApi = createFieldGroup(() => fieldGroupProps)
+
+      return render({ ...props, ...innerProps, group: fieldGroupApi as any })
+    }
+  }
+
   return {
     useAppForm,
     withForm,
+    withFieldGroup,
   }
 }

package/src/index.tsx

@@ -4,5 +4,6 @@ export { useStore } from '@tanstack/solid-store'
 
 export * from './createField'
 export * from './createForm'
+export * from './createFieldGroup'
 export * from './createFormHook'
 export * from './types'