@zeno-lib/forms 0.7.1 → 0.9.0

package/src/lib/schema-defaults.ts

@@ -1,4 +1,5 @@
-// Extract default values from a Zod schema for `useForm`.
+// Extract default values from a Zod schema for `useForm`, and keep the values
+// a caller passes to the schema's shape (`pickSchemaShape`, below).
 //
 // Tier A+ semantics:
 //   - `.default(...)` / `.prefault(...)` values flow through.
@@ -23,6 +24,7 @@ type SchemaDef = {
   readonly type?: string
   readonly innerType?: SchemaNode
   readonly shape?: Record<string, SchemaNode>
+  readonly catchall?: SchemaNode
   readonly in?: SchemaNode
   readonly element?: SchemaNode
   readonly defaultValue?: unknown
@@ -148,6 +150,71 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   )
 }
 
+// `.strict()` sets `catchall` to `z.never()`; a plain `z.object` leaves it
+// unset. Either way the schema accepts no key outside its `shape`.
+function acceptsOnlyShape(def: SchemaDef): boolean {
+  return def.catchall === undefined || getDef(def.catchall)?.type === "never"
+}
+
+function pickShape(node: SchemaNode, value: unknown): unknown {
+  let current: SchemaNode | undefined = node
+  for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
+    const def: SchemaDef | undefined = getDef(current)
+    switch (def?.type) {
+      case "object": {
+        const { shape } = def
+        if (!(shape && isPlainObject(value) && acceptsOnlyShape(def))) {
+          return value
+        }
+        const result: Record<string, unknown> = {}
+        for (const [key, field] of Object.entries(shape)) {
+          if (Object.hasOwn(value, key)) {
+            result[key] = pickShape(field, value[key])
+          }
+        }
+        return result
+      }
+      case "array": {
+        const { element } = def
+        return element && Array.isArray(value)
+          ? value.map((item) => pickShape(element, item))
+          : value
+      }
+      case "default":
+      case "nonoptional":
+      case "nullable":
+      case "optional":
+      case "prefault":
+      case "readonly":
+        current = def.innerType
+        continue
+      case "pipe":
+        current = def.in
+        continue
+      default:
+        return value
+    }
+  }
+  return value
+}
+
+// `value` with only the keys `schema` describes, so a form can start from a
+// record as read (`{ id, createdAt, … }`) without a `.strict()` schema
+// rejecting the rest on every submit. An object keeps the keys in its
+// `shape`, an array maps its `element` over every item, and the wrappers
+// unwrap as in `extractDefaultForField`. Where the shape isn't certain (a
+// union, a record, a loose or catchall object, `any`, a non-Zod schema) or the
+// value doesn't fit it (`null`, a string where an object is expected), the
+// value is kept as is. A key the value lacks stays absent: filling it is
+// `extractZodDefaults`' job.
+function pickSchemaShape<T>(schema: SchemaNode, value: T): T {
+  try {
+    return pickShape(schema, value) as T
+  } catch {
+    return value
+  }
+}
+
 // User-supplied values always win on conflict. Plain objects on both sides
 // recurse so nested `z.object(...)` defaults aren't clobbered by partial user
 // objects. Arrays, dates, class instances are treated atomically (user value
@@ -173,4 +240,9 @@ function deepMergeDefaults(
   return result
 }
 
-export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults }
+export {
+  deepMergeDefaults,
+  extractZodDefaultAt,
+  extractZodDefaults,
+  pickSchemaShape,
+}

package/src/lib/submit-action.ts

@@ -7,6 +7,7 @@ import {
   toActionError,
 } from "./action-result"
 import { applyValidationError } from "./apply-validation-error"
+import { pickSchemaShape } from "./schema-defaults"
 import { ValidationError } from "./validation-error"
 import { getFormSchema } from "./validation-modes"
 
@@ -179,14 +180,28 @@ async function submitAction(
 
   const { reset } = options
   if (reset === true) {
-    formApi.reset(result.data)
+    formApi.reset(toFormValues(formApi, result.data))
   } else if (reset === "values") {
     formApi.reset(value)
   } else if (typeof reset === "function") {
-    formApi.reset((reset as (data: unknown) => unknown)(result.data))
+    formApi.reset(
+      toFormValues(formApi, (reset as (data: unknown) => unknown)(result.data))
+    )
   }
   return result
 }
 
+// What the action returned, kept to the keys the form's own schema describes
+// (not `options.schema`, which is the action's), so a saved record's `id` or
+// `updatedAt` doesn't become a form value that a `.strict()` schema rejects on
+// the next submit. The submitted values need none of this: they already have
+// the form's shape.
+function toFormValues(formApi: FormApiLike, data: unknown): unknown {
+  const schema = getFormSchema(formApi as AnyFormApi)
+  return schema
+    ? pickSchemaShape(schema as Parameters<typeof pickSchemaShape>[0], data)
+    : data
+}
+
 export type { FormApiLike, SubmitActionOptions, SubmitActionSchema }
 export { applyActionError, submitAction }

package/src/submit-action.test.tsx

@@ -508,6 +508,51 @@ describe("submitAction — success", () => {
     expect(form.state.isDirty).toBe(false)
   })
 
+  // An action that returns the saved row, with keys the form doesn't edit.
+  type SavedProfile = Profile & { id: number; updatedAt: string }
+  const resets = {
+    "a reset function": (saved: SavedProfile): Profile => saved,
+    "reset: true": true,
+  } as const
+
+  for (const [label, reset] of Object.entries(resets)) {
+    test(`${label} rebases on the saved row's form keys only, so the next save passes a .strict() schema`, async () => {
+      const user = userEvent.setup()
+      const save = vi.fn((input: Profile) =>
+        Promise.resolve<ActionResult<SavedProfile>>({
+          data: { ...input, id: 7, updatedAt: "2026-01-01" },
+          ok: true,
+        })
+      )
+      function Harness() {
+        const form = useForm({
+          defaultValues: { email: "ada@example.com", name: "Ada" },
+          onSubmit: (submit) => submitAction(submit, save, { reset }),
+          schema: profileSchema.strict(),
+        })
+        const { SubmitButton } = form
+        return (
+          <FormProvider form={form}>
+            <Form>
+              <SubmitButton>Submit</SubmitButton>
+            </Form>
+          </FormProvider>
+        )
+      }
+      render(<Harness />)
+
+      await user.click(screen.getByRole("button", SUBMIT))
+      await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(1))
+      await user.click(screen.getByRole("button", SUBMIT))
+
+      await vi.waitFor(() => expect(save).toHaveBeenCalledTimes(2))
+      expect(save).toHaveBeenLastCalledWith({
+        email: "ada@example.com",
+        name: "Ada",
+      })
+    })
+  }
+
   test('reset: "values" rebases the form on the submitted values', async () => {
     const user = userEvent.setup()
     const formRef: { current: unknown } = { current: undefined }

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

@@ -48,6 +48,29 @@ test("schema path: defaultValues is PartialFormData (deep partial for plain obje
   })
 })
 
+test("schema path: defaultValues takes a record with keys the schema lacks", () => {
+  // A row as read: `useForm` keeps the keys the schema describes at runtime,
+  // and the form stays typed from the schema.
+  const invoiceSchema = z
+    .object({
+      lines: z.array(z.object({ label: z.string() }).strict()),
+      number: z.string(),
+    })
+    .strict()
+  const row = {
+    createdAt: new Date(),
+    id: 7,
+    lines: [{ id: 1, invoiceId: 7, label: "Design" }],
+    number: "2026-001",
+  }
+  const form = useForm({
+    defaultValues: row,
+    onSubmit: () => undefined,
+    schema: invoiceSchema,
+  })
+  expectTypeOf(form.state.values).toEqualTypeOf<z.input<typeof invoiceSchema>>()
+})
+
 test("schema path: validationLogic is forbidden (type never)", () => {
   // Error lands on the overall call argument, not on `validationLogic`:
   // `validationLogic: never` makes the whole options object incompatible.

package/src/use-form.test.tsx

@@ -62,6 +62,52 @@ describe("useForm — schema-derived defaults", () => {
   })
 })
 
+describe("useForm — defaultValues from a record", () => {
+  test("an edit form opened with a record as read submits to a .strict() schema", async () => {
+    const user = userEvent.setup()
+    const schema = z
+      .object({
+        address: z.object({ city: z.string() }).strict(),
+        email: z.email(),
+        lines: z.array(z.object({ label: z.string() }).strict()),
+      })
+      .strict()
+    const record = {
+      address: { city: "Geneva", updatedAt: "2026-01-01" },
+      createdAt: new Date("2026-01-01"),
+      email: "ada@example.com",
+      id: 7,
+      lines: [{ id: 1, label: "Design" }],
+    }
+    const onSubmit = vi.fn()
+    function Harness() {
+      const form = useForm({
+        defaultValues: record,
+        onSubmit: ({ value }) => onSubmit(value),
+        schema,
+      })
+      const { EmailField, SubmitButton } = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <EmailField label="Email" name="email" />
+            <SubmitButton>Submit</SubmitButton>
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<Harness />)
+    await user.click(screen.getByRole("button", { name: "Submit" }))
+    await vi.waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        address: { city: "Geneva" },
+        email: "ada@example.com",
+        lines: [{ label: "Design" }],
+      })
+    )
+  })
+})
+
 describe("useForm — required indicator", () => {
   test("`*` rendered next to required field labels (schema-derived)", () => {
     const schema = z.object({

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 () => {