@zeno-lib/forms 0.8.0 → 0.9.1

package/dist/create-zeno-form.d.mts

@@ -1,7 +1,7 @@
 import { FieldControlProps } from "./lib/use-field-control.mjs";
 import { ValidationMode } from "./lib/validation-modes.mjs";
-import { DeepKeys, DeepValue, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from "@tanstack/react-form";
-import { ComponentProps, ReactNode } from "react";
+import { AppFieldExtendedReactFieldGroupApi, AppFieldExtendedReactFormApi, BaseFormOptions, DeepKeys, DeepValue, FieldsMap, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn, WithFormProps } from "@tanstack/react-form";
+import { ComponentProps, PropsWithChildren, ReactNode } from "react";
 //#region src/create-zeno-form.d.ts
 type StandardSchema<T> = {
   readonly "~standard": {
@@ -122,17 +122,26 @@ type CreateZenoFormConfig<FC extends Record<string, AnyComponent>, FMC extends R
  */
 export declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>>(config: CreateZenoFormConfig<FC, FMC>): {
   useAppFields: <TForm extends AnyAppForm>(form: TForm) => FieldWrappers<FC, FormDataOf<TForm>>;
-  useAppForm: <TFormData, 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>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>;
+  useAppForm: <TFormData, 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>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>;
   useForm: <TFormData, TOnMount extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnChange extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnChangeAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnBlur extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnBlurAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnSubmit extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnSubmitAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnDynamic extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnDynamicAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnServer extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TSubmitMeta = unknown>(options: UseFormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & import("@tanstack/react-form").ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<FMC> & {
     AppField: import("@tanstack/react-form").FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, NoInfer<FC>>;
-    AppForm: import("react").ComponentType<import("react").PropsWithChildren<{}>>;
-  } & FieldWrappers<FC, FormDataOf<import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>>> & FMC;
-  withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, FC, FMC, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").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: import("react").PropsWithChildren<NoInfer<TRenderProps> & {
-    form: import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC> | import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC>;
+    AppForm: import("react").ComponentType<PropsWithChildren<{}>>;
+  } & FieldWrappers<FC, FormDataOf<AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>>> & FMC;
+  withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, ...options }: BaseFormOptions<TFieldGroupData, TSubmitMeta> & {
+    props?: TRenderProps;
+    render: (props: PropsWithChildren<NoInfer<TRenderProps> & {
+      group: AppFieldExtendedReactFieldGroupApi<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>, unknown extends TSubmitMeta ? never : TSubmitMeta, FC, FMC & FieldWrappers<FC, TFieldGroupData>>;
+    }>) => ReactNode;
+  }) => <TFormData, TFields extends import("@tanstack/react-form").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: PropsWithChildren<NoInfer<TRenderProps> & {
+    form: AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC> | AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC>;
     fields: TFields;
   }>) => ReturnType<import("react").FunctionComponent>;
-  withForm: <TFormData, 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, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
-    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, [unknown] extends [FC] ? any : FC, [unknown] extends [FMC] ? any : FMC>;
+  withForm: <TFormData, TOnMount extends SyncValidator<TFormData>, TOnChange extends SyncValidator<TFormData>, TOnChangeAsync extends AsyncValidator<TFormData>, TOnBlur extends SyncValidator<TFormData>, TOnBlurAsync extends AsyncValidator<TFormData>, TOnSubmit extends SyncValidator<TFormData>, TOnSubmitAsync extends AsyncValidator<TFormData>, TOnDynamic extends SyncValidator<TFormData>, TOnDynamicAsync extends AsyncValidator<TFormData>, TOnServer extends AsyncValidator<TFormData>, TSubmitMeta, TRenderProps extends object = {}>({ render, ...options }: Omit<WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC, TRenderProps>, "render"> & {
+    render: (props: PropsWithChildren<NoInfer<TRenderProps> & {
+      form: AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC & FieldWrappers<FC, TFormData>>;
+    }>) => ReactNode;
+  }) => import("react").FunctionComponent<PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, [unknown] extends [FC] ? any : FC, [unknown] extends [FMC] ? any : FMC>;
   }>>;
 };
 //#endregion

package/dist/create-zeno-form.mjs

@@ -62,27 +62,63 @@ function withComponentDefaults(components, defaultProps) {
 function createZenoForm(config) {
 	const fieldComponents = withComponentDefaults(config.fieldComponents, config.defaultProps);
 	const formComponents = withComponentDefaults(config.formComponents, config.defaultProps);
-	const { useAppForm, withFieldGroup, withForm } = createFormHook({
+	const { useAppForm, withFieldGroup: withTanStackFieldGroup, withForm: withTanStackForm } = createFormHook({
 		fieldComponents,
 		fieldContext,
 		formComponents,
 		formContext
 	});
+	const fieldsByForm = /* @__PURE__ */ new WeakMap();
+	function getAppFields(form) {
+		const cached = fieldsByForm.get(form);
+		if (cached !== void 0) return cached;
+		const Field = form.AppField;
+		const wrappers = {};
+		for (const key of Object.keys(fieldComponents)) {
+			const Impl = fieldComponents[key];
+			wrappers[key] = ({ name, validators, listeners, ...props }) => /* @__PURE__ */ jsx(Field, {
+				listeners,
+				name,
+				validators,
+				children: () => /* @__PURE__ */ jsx(Impl, { ...props })
+			});
+		}
+		fieldsByForm.set(form, wrappers);
+		return wrappers;
+	}
 	function useAppFields(form) {
-		return useMemo(() => {
-			const Field = form.AppField;
-			const wrappers = {};
-			for (const key of Object.keys(fieldComponents)) {
-				const Impl = fieldComponents[key];
-				wrappers[key] = ({ name, validators, listeners, ...props }) => /* @__PURE__ */ jsx(Field, {
-					listeners,
-					name,
-					validators,
-					children: () => /* @__PURE__ */ jsx(Impl, { ...props })
-				});
-			}
-			return wrappers;
-		}, [form]);
+		return getAppFields(form);
+	}
+	function withNamedFields(target) {
+		for (const [name, field] of Object.entries(getAppFields(target))) if (!(name in target)) Object.assign(target, { [name]: field });
+		return target;
+	}
+	/**
+	* TanStack's `withForm`, whose `render` gets a `form` carrying the typed
+	* fields, as `useForm`'s does: `<form.InputField name="email" />`.
+	*/
+	function withForm({ render, ...options }) {
+		return withTanStackForm({
+			...options,
+			render: (props) => render({
+				...props,
+				form: withNamedFields(props.form)
+			})
+		});
+	}
+	/**
+	* TanStack's `withFieldGroup`, whose `render` gets a `group` carrying the
+	* typed fields of the group's own values, as `useForm`'s form does:
+	* `<group.InputField name="street" />`.
+	*/
+	function withFieldGroup({ render, ...options }) {
+		return withTanStackFieldGroup({
+			...options,
+			render: (props) => render({
+				...props,
+				group: withNamedFields(props.group)
+			})
+		});
 	}
 	function useForm(options) {
 		const { schema, validators: validatorsInput, validationLogic: userValidationLogic, disabled = false, hideFieldErrors = false, requiredIndicator = true, unsavedChangesWarning = false, defaultValues: userDefaultValues, onSubmit: userOnSubmit, ...rest } = options;
@@ -145,8 +181,7 @@ function createZenoForm(config) {
 		});
 		useDisabledOption(form, disabled);
 		useUnsavedChangesWarning(form, unsavedChangesWarning);
-		const fields = useAppFields(form);
-		return useMemo(() => Object.assign(form, fields, formComponents), [form, fields]);
+		return useMemo(() => Object.assign(form, getAppFields(form), formComponents), [form]);
 	}
 	return {
 		useAppFields,

package/dist/lib/use-rebased-default-values.mjs

@@ -1,14 +1,15 @@
 "use client";
 import { evaluate } from "@tanstack/react-form";
-import { useCallback, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 //#region src/lib/use-rebased-default-values.ts
 function useRebasedDefaultValues(callerDefaults) {
 	const liveForm = useRef(null);
 	const lastCallerDefaults = useRef(callerDefaults);
 	let defaultValues = callerDefaults;
-	if (evaluate(lastCallerDefaults.current, callerDefaults)) {
-		if (liveForm.current) defaultValues = liveForm.current.options.defaultValues;
-	} else lastCallerDefaults.current = callerDefaults;
+	if (liveForm.current && evaluate(lastCallerDefaults.current, callerDefaults)) defaultValues = liveForm.current.options.defaultValues;
+	useLayoutEffect(() => {
+		lastCallerDefaults.current = callerDefaults;
+	}, [callerDefaults]);
 	const onMount = useCallback((props) => {
 		liveForm.current = props.formApi;
 	}, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"

package/src/composition.test.tsx

@@ -0,0 +1,140 @@
+import { cleanup, render, screen, within } from "@zeno-lib/test/testing-library"
+import userEvent from "@zeno-lib/test/user-event"
+import { afterEach, describe, expect, test, vi } from "vitest"
+import { z } from "zod"
+import {
+  Form,
+  FormProvider,
+  useAppForm,
+  useForm,
+  withFieldGroup,
+  withForm,
+} from "./create-form"
+
+const STREET_LABEL = /Street/
+const CITY_LABEL = /City/
+const BILLING_STREET_LABEL = /Billing street/
+
+afterEach(() => {
+  cleanup()
+})
+
+const address = z.object({ city: z.string(), street: z.string() })
+const schema = z.object({ billing: address, shipping: address })
+type Values = z.infer<typeof schema>
+const VALUES: Values = {
+  billing: { city: "", street: "" },
+  shipping: { city: "", street: "" },
+}
+
+const AddressGroup = withFieldGroup({
+  defaultValues: VALUES.billing,
+  props: { title: "" },
+  render: ({ group, title }) => (
+    <fieldset aria-label={title}>
+      <group.InputField label="Street" name="street" />
+      <group.InputField label="City" name="city" />
+    </fieldset>
+  ),
+})
+
+describe("withFieldGroup", () => {
+  test("a group's named field binds under the group's path", async () => {
+    const user = userEvent.setup()
+    let current: { state: { values: Values } } | undefined
+    function H() {
+      const form = useForm({ onSubmit: vi.fn(), schema })
+      current = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <AddressGroup fields="billing" form={form} title="Billing" />
+            <AddressGroup fields="shipping" form={form} title="Shipping" />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<H />)
+    const shipping = within(screen.getByRole("group", { name: "Shipping" }))
+    const street = shipping.getByLabelText(STREET_LABEL) as HTMLInputElement
+    expect(street.name).toBe("shipping.street")
+    await user.type(street, "Main St")
+    expect(current?.state.values.shipping.street).toBe("Main St")
+    expect(current?.state.values.billing.street).toBe("")
+  })
+
+  test("a group nested in a group binds under both paths", async () => {
+    const user = userEvent.setup()
+    const Nested = withFieldGroup({
+      defaultValues: { billing: VALUES.billing },
+      render: ({ group }) => (
+        <AddressGroup fields="billing" form={group} title="Nested" />
+      ),
+    })
+    const nestedSchema = z.object({ order: z.object({ billing: address }) })
+    let current: { state: { values: z.infer<typeof nestedSchema> } } | undefined
+    function H() {
+      const form = useForm({ onSubmit: vi.fn(), schema: nestedSchema })
+      current = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <Nested fields="order" form={form} />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<H />)
+    const city = screen.getByLabelText(CITY_LABEL) as HTMLInputElement
+    expect(city.name).toBe("order.billing.city")
+    await user.type(city, "Bern")
+    expect(current?.state.values.order.billing.city).toBe("Bern")
+  })
+})
+
+describe("withForm", () => {
+  const BillingSection = withForm({
+    defaultValues: VALUES,
+    render: ({ form }) => (
+      <form.InputField label="Billing street" name="billing.street" />
+    ),
+  })
+
+  test("a section's form has the fields when useAppForm made it", async () => {
+    const user = userEvent.setup()
+    let current: { state: { values: Values } } | undefined
+    function H() {
+      const form = useAppForm({ defaultValues: VALUES, onSubmit: vi.fn() })
+      current = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <BillingSection form={form} />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<H />)
+    await user.type(screen.getByLabelText(BILLING_STREET_LABEL), "Main St")
+    expect(current?.state.values.billing.street).toBe("Main St")
+  })
+
+  test("a section keeps the fields of useForm's form as they are", () => {
+    const seen: unknown[] = []
+    function H() {
+      const form = useForm({ onSubmit: vi.fn(), schema })
+      seen.push(form.InputField)
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <BillingSection form={form} />
+          </Form>
+        </FormProvider>
+      )
+    }
+    const { rerender } = render(<H />)
+    rerender(<H />)
+    expect(seen).toHaveLength(2)
+    expect(seen[1]).toBe(seen[0])
+  })
+})

package/src/create-zeno-form.tsx

@@ -3,14 +3,24 @@
 
 import type {
   AnyFormApi,
+  AppFieldExtendedReactFieldGroupApi,
+  AppFieldExtendedReactFormApi,
+  BaseFormOptions,
   DeepKeys,
   DeepValue,
+  FieldsMap,
   FormAsyncValidateOrFn,
   FormOptions,
   FormValidateOrFn,
+  WithFormProps,
 } from "@tanstack/react-form"
 import { createFormHook } from "@tanstack/react-form"
-import { type ComponentProps, type ReactNode, useMemo } from "react"
+import {
+  type ComponentProps,
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+} from "react"
 import { applyValidationError } from "./lib/apply-validation-error"
 import { fieldContext, formContext } from "./lib/contexts"
 import { withDefaultProps } from "./lib/default-props"
@@ -394,42 +404,211 @@ export function createZenoForm<
     config.formComponents,
     config.defaultProps
   )
-  const { useAppForm, withFieldGroup, withForm } = createFormHook({
+  const {
+    useAppForm,
+    withFieldGroup: withTanStackFieldGroup,
+    withForm: withTanStackForm,
+  } = createFormHook({
     fieldComponents,
     fieldContext,
     formComponents,
     formContext,
   })
 
-  function useAppFields<TForm extends AnyAppForm>(form: TForm) {
-    type T = FormDataOf<TForm>
-    return useMemo(() => {
-      const Field = form.AppField as React.ComponentType<{
+  // One set of named fields per form, shared by `useForm`, `useAppFields` and
+  // every section and group that renders the form.
+  const fieldsByForm = new WeakMap<object, Record<string, AnyComponent>>()
+
+  function getAppFields<TForm extends AnyAppForm>(form: TForm) {
+    type Fields = FieldWrappers<FC, FormDataOf<TForm>>
+    const cached = fieldsByForm.get(form)
+    if (cached !== undefined) {
+      return cached as Fields
+    }
+    const Field = form.AppField as React.ComponentType<{
+      name: string
+      validators?: AnyFieldValidators
+      listeners?: AnyFieldListeners
+      children: () => ReactNode
+    }>
+    const wrappers: Record<string, AnyComponent> = {}
+    for (const key of Object.keys(fieldComponents)) {
+      const Impl = fieldComponents[key] as AnyComponent
+      wrappers[key] = ({
+        name,
+        validators,
+        listeners,
+        ...props
+      }: {
         name: string
         validators?: AnyFieldValidators
         listeners?: AnyFieldListeners
-        children: () => ReactNode
-      }>
-      const wrappers: Record<string, AnyComponent> = {}
-      for (const key of Object.keys(fieldComponents)) {
-        const Impl = fieldComponents[key] as AnyComponent
-        wrappers[key] = ({
-          name,
-          validators,
-          listeners,
-          ...props
-        }: {
-          name: string
-          validators?: AnyFieldValidators
-          listeners?: AnyFieldListeners
-        }) => (
-          <Field listeners={listeners} name={name} validators={validators}>
-            {() => <Impl {...props} />}
-          </Field>
-        )
+      }) => (
+        <Field listeners={listeners} name={name} validators={validators}>
+          {() => <Impl {...props} />}
+        </Field>
+      )
+    }
+    fieldsByForm.set(form, wrappers)
+    return wrappers as Fields
+  }
+
+  function useAppFields<TForm extends AnyAppForm>(form: TForm) {
+    return getAppFields(form)
+  }
+
+  // Puts the named fields on `target` (a section's form, a group) where it has
+  // none of that name. The same fields every time, so running it on each
+  // render changes nothing after the first.
+  function withNamedFields<T extends AnyAppForm>(target: T): T {
+    for (const [name, field] of Object.entries(getAppFields(target))) {
+      if (!(name in target)) {
+        Object.assign(target, { [name]: field })
       }
-      return wrappers as FieldWrappers<FC, T>
-    }, [form])
+    }
+    return target
+  }
+
+  /**
+   * TanStack's `withForm`, whose `render` gets a `form` carrying the typed
+   * fields, as `useForm`'s does: `<form.InputField name="email" />`.
+   */
+  function withForm<
+    TFormData,
+    TOnMount extends SyncValidator<TFormData>,
+    TOnChange extends SyncValidator<TFormData>,
+    TOnChangeAsync extends AsyncValidator<TFormData>,
+    TOnBlur extends SyncValidator<TFormData>,
+    TOnBlurAsync extends AsyncValidator<TFormData>,
+    TOnSubmit extends SyncValidator<TFormData>,
+    TOnSubmitAsync extends AsyncValidator<TFormData>,
+    TOnDynamic extends SyncValidator<TFormData>,
+    TOnDynamicAsync extends AsyncValidator<TFormData>,
+    TOnServer extends AsyncValidator<TFormData>,
+    TSubmitMeta,
+    // biome-ignore lint/complexity/noBannedTypes: TanStack's own default, so a section without `props` infers as it does.
+    TRenderProps extends object = {},
+  >({
+    render,
+    ...options
+  }: Omit<
+    WithFormProps<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta,
+      FC,
+      FMC,
+      TRenderProps
+    >,
+    "render"
+  > & {
+    render: (
+      props: PropsWithChildren<
+        NoInfer<TRenderProps> & {
+          // The named fields ride in the form components' slot, so the type
+          // stays TanStack's and a nested `withFieldGroup` still infers it.
+          form: AppFieldExtendedReactFormApi<
+            TFormData,
+            TOnMount,
+            TOnChange,
+            TOnChangeAsync,
+            TOnBlur,
+            TOnBlurAsync,
+            TOnSubmit,
+            TOnSubmitAsync,
+            TOnDynamic,
+            TOnDynamicAsync,
+            TOnServer,
+            TSubmitMeta,
+            FC,
+            FMC & FieldWrappers<FC, TFormData>
+          >
+        }
+      >
+    ) => ReactNode
+  }) {
+    return withTanStackForm<
+      TFormData,
+      TOnMount,
+      TOnChange,
+      TOnChangeAsync,
+      TOnBlur,
+      TOnBlurAsync,
+      TOnSubmit,
+      TOnSubmitAsync,
+      TOnDynamic,
+      TOnDynamicAsync,
+      TOnServer,
+      TSubmitMeta,
+      TRenderProps
+    >({
+      ...options,
+      render: (props) =>
+        render({
+          ...props,
+          form: withNamedFields(props.form),
+        } as Parameters<typeof render>[0]),
+    })
+  }
+
+  /**
+   * TanStack's `withFieldGroup`, whose `render` gets a `group` carrying the
+   * typed fields of the group's own values, as `useForm`'s form does:
+   * `<group.InputField name="street" />`.
+   */
+  function withFieldGroup<
+    TFieldGroupData,
+    TSubmitMeta,
+    // biome-ignore lint/complexity/noBannedTypes: TanStack's own default, so a group without `props` infers as it does.
+    TRenderProps extends object = {},
+  >({
+    render,
+    ...options
+  }: BaseFormOptions<TFieldGroupData, TSubmitMeta> & {
+    props?: TRenderProps
+    render: (
+      props: PropsWithChildren<
+        NoInfer<TRenderProps> & {
+          // As `withForm`'s, with TanStack's own arguments for the rest.
+          group: AppFieldExtendedReactFieldGroupApi<
+            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>,
+            unknown extends TSubmitMeta ? never : TSubmitMeta,
+            FC,
+            FMC & FieldWrappers<FC, TFieldGroupData>
+          >
+        }
+      >
+    ) => ReactNode
+  }) {
+    return withTanStackFieldGroup<TFieldGroupData, TSubmitMeta, TRenderProps>({
+      ...options,
+      render: (props) =>
+        render({
+          ...props,
+          group: withNamedFields(props.group),
+        } as Parameters<typeof render>[0]),
+    })
   }
 
   // An unset generic defaults to its constraint, which is what TanStack's own
@@ -647,10 +826,9 @@ export function createZenoForm<
     useDisabledOption(form, disabled)
     useUnsavedChangesWarning(form, unsavedChangesWarning)
 
-    const fields = useAppFields(form)
     return useMemo(
-      () => Object.assign(form, fields, formComponents),
-      [form, fields]
+      () => Object.assign(form, getAppFields(form), formComponents),
+      [form]
     )
   }
 

package/src/default-props.test.tsx

@@ -15,7 +15,7 @@ afterEach(() => {
   vi.unstubAllGlobals()
 })
 
-const { useForm } = createZenoForm({
+const { useAppForm, useForm, withFieldGroup, withForm } = createZenoForm({
   defaultProps: {
     FormError: { submitErrorMessage: "Not saved. Try again later." },
     MoneyField: { currency: "CHF", currencyDisplay: "code", placeholder: "0" },
@@ -162,4 +162,28 @@ describe("createZenoForm({ defaultProps })", () => {
     render(<AppFieldHarness />)
     expect(addonOf("Amount")).toBe("CHF")
   })
+
+  test("a section's and a group's fields get their defaults too", () => {
+    const AmountSection = withForm({
+      defaultValues: VALUES,
+      render: ({ form }) => <form.MoneyField label="Amount" name="amount" />,
+    })
+    const FeeGroup = withFieldGroup({
+      defaultValues: { fee: VALUES.fee },
+      render: ({ group }) => <group.MoneyField label="Fee" name="fee" />,
+    })
+    function SectionHarness() {
+      // `useAppForm`'s form has no named fields until a section renders it.
+      const form = useAppForm({ defaultValues: VALUES, onSubmit: vi.fn() })
+      return (
+        <FormProvider form={form}>
+          <AmountSection form={form} />
+          <FeeGroup fields={{ fee: "fee" }} form={form} />
+        </FormProvider>
+      )
+    }
+    render(<SectionHarness />)
+    expect(addonOf("Amount")).toBe("CHF")
+    expect(addonOf("Fee")).toBe("CHF")
+  })
 })

package/src/form-dialog.test.tsx

@@ -7,7 +7,7 @@ import {
   within,
 } from "@zeno-lib/test/testing-library"
 import userEvent from "@zeno-lib/test/user-event"
-import { type ReactNode, useState } from "react"
+import { type ReactNode, StrictMode, useState } from "react"
 import { afterEach, describe, expect, onTestFinished, test, vi } from "vitest"
 import { z } from "zod"
 import { useForm } from "./create-form"
@@ -178,6 +178,13 @@ describe("FormDialog", () => {
     expect(name.value).toBe("Ada")
   })
 
+  test("opens with per-session defaults under Strict Mode", async () => {
+    const user = userEvent.setup()
+    render(<Harness />, { wrapper: StrictMode })
+    const name = await openEdit(user)
+    expect(name.value).toBe("Ada")
+  })
+
   test("an edit opened on a record with keys the schema lacks saves to a .strict() schema", async () => {
     const user = userEvent.setup()
     const strictSchema = schema.strict()

package/src/lib/use-rebased-default-values.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import { type AnyFormApi, evaluate } from "@tanstack/react-form"
-import { useCallback, useRef } from "react"
+import { useCallback, useLayoutEffect, useRef } from "react"
 
 // TanStack's `useForm` calls `formApi.update(options)` after every render. While
 // the form is untouched, `update` re-applies `options.defaultValues` whenever it
@@ -24,14 +24,19 @@ function useRebasedDefaultValues<T>(callerDefaults: T): {
   const lastCallerDefaults = useRef(callerDefaults)
 
   let defaultValues = callerDefaults
-  if (evaluate(lastCallerDefaults.current, callerDefaults)) {
-    if (liveForm.current) {
-      defaultValues = liveForm.current.options.defaultValues as T
-    }
-  } else {
-    lastCallerDefaults.current = callerDefaults
+  if (
+    liveForm.current &&
+    evaluate(lastCallerDefaults.current, callerDefaults)
+  ) {
+    defaultValues = liveForm.current.options.defaultValues as T
   }
 
+  // Write on commit, not during render: under Strict Mode the second render
+  // would see the new defaults as unchanged and forward the old ones.
+  useLayoutEffect(() => {
+    lastCallerDefaults.current = callerDefaults
+  }, [callerDefaults])
+
   const onMount = useCallback((props: { formApi: AnyFormApi }) => {
     liveForm.current = props.formApi
   }, [])

package/src/use-form.reset-defaults.test.tsx

@@ -65,30 +65,35 @@ function titleInput() {
 }
 
 describe("useForm — reset(values) rebases defaults", () => {
-  test("reset after submit sticks across rerenders with fixed defaults", async () => {
-    const user = userEvent.setup()
-    let state: Captured | undefined
-    const capture = vi.fn((next: Captured) => {
-      state = next
-    })
-    const record = { title: "Draft" }
-    const { rerender } = render(<EditTitle capture={capture} record={record} />)
+  for (const reactStrictMode of [false, true]) {
+    test(`reset after submit sticks across rerenders with fixed defaults (reactStrictMode: ${reactStrictMode})`, async () => {
+      const user = userEvent.setup()
+      let state: Captured | undefined
+      const capture = vi.fn((next: Captured) => {
+        state = next
+      })
+      const record = { title: "Draft" }
+      const { rerender } = render(
+        <EditTitle capture={capture} record={record} />,
+        { reactStrictMode }
+      )
 
-    await user.clear(titleInput())
-    await user.type(titleInput(), "Saved title")
-    await user.click(screen.getByRole("button", { name: SAVE }))
+      await user.clear(titleInput())
+      await user.type(titleInput(), "Saved title")
+      await user.click(screen.getByRole("button", { name: SAVE }))
 
-    await waitFor(() => expect(state?.isTouched).toBe(false))
-    for (const tick of [1, 2, 3]) {
-      rerender(<EditTitle capture={capture} record={record} tick={tick} />)
-    }
-    await act(() => Promise.resolve())
+      await waitFor(() => expect(state?.isTouched).toBe(false))
+      for (const tick of [1, 2, 3]) {
+        rerender(<EditTitle capture={capture} record={record} tick={tick} />)
+      }
+      await act(() => Promise.resolve())
 
-    expect(titleInput().value).toBe("Saved title")
-    expect(state?.values).toEqual({ title: "Saved title" })
-    expect(state?.isDefaultValue).toBe(true)
-    expect(state?.isDirty).toBe(false)
-  })
+      expect(titleInput().value).toBe("Saved title")
+      expect(state?.values).toEqual({ title: "Saved title" })
+      expect(state?.isDefaultValue).toBe(true)
+      expect(state?.isDirty).toBe(false)
+    })
+  }
 
   test("new caller defaults apply while the form is untouched", async () => {
     let state: Captured | undefined

package/src/with-form.test-d.ts

@@ -37,6 +37,31 @@ const AddressGroup = withFieldGroup({
   render: () => null,
 })
 
+// A section's `form` and a group's `group` carry the fields themselves.
+withForm({
+  defaultValues: VALUES,
+  render: ({ form }) => {
+    form.InputField({ name: "address.city" })
+    // @ts-expect-error — not a path of the form
+    form.InputField({ name: "phone" })
+    return null
+  },
+})
+
+withFieldGroup({
+  defaultValues: VALUES.address,
+  props: { label: "" },
+  render: ({ group, label }) => {
+    expectTypeOf(label).toEqualTypeOf<string>()
+    expectTypeOf(group.state.values).toEqualTypeOf<Values["address"]>()
+    const { InputField } = group
+    InputField({ name: "street" })
+    // @ts-expect-error — a path of the form, not of the group
+    InputField({ name: "address.street" })
+    return null
+  },
+})
+
 test("withForm takes the form useForm returns, with a schema", () => {
   const form = useForm({ onSubmit: () => undefined, schema })
   EmailSection({ form, title: "Email" })

package/src/with-form.test.tsx

@@ -2,13 +2,7 @@ import { cleanup, render, screen } from "@zeno-lib/test/testing-library"
 import userEvent from "@zeno-lib/test/user-event"
 import { afterEach, expect, test, vi } from "vitest"
 import { z } from "zod"
-import {
-  Form,
-  FormProvider,
-  useAppFields,
-  useForm,
-  withForm,
-} from "./create-form"
+import { Form, FormProvider, useForm, withForm } from "./create-form"
 
 const CITY = /City/
 
@@ -24,10 +18,7 @@ type Profile = z.infer<typeof schema>
 
 const AddressSection = withForm({
   defaultValues: {} as Profile,
-  render: ({ form }) => {
-    const { InputField } = useAppFields(form)
-    return <InputField label="City" name="address.city" />
-  },
+  render: ({ form }) => <form.InputField label="City" name="address.city" />,
 })
 
 test("a withForm section edits and validates the parent's form", async () => {