@zeno-lib/forms 0.9.0 → 0.9.1

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.9.0",
+  "version": "0.9.1",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"

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