@multiplatform.one/forms 6.4.3 → 6.6.0

package/src/fields/Combobox/index.tsx

@@ -333,7 +333,7 @@ const ComboboxItem = memo(function ComboboxItem({
         ? // Two-line rows need to grow past the size-variant height.
           { height: "auto", paddingVertical: "$2" }
         : undefined)}
-      {...(ctx.knobProps.transition ? { animation: ctx.knobProps.transition } : undefined)}
+      {...(ctx.knobProps.transition ? { transition: ctx.knobProps.transition } : undefined)}
     >
       {option.description ? (
         <YStack flex={1} minWidth={0}>
@@ -1258,6 +1258,11 @@ function FloatingComboboxCore({
         : {
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
+            // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
+            // trigger (the 36px "Allocated To" quick filter breaking the
+            // list's 44px control row) — same floor the house Select holds
+            // on both its trigger variants.
+            minHeight: 44,
           })}
     >
       <SyncFocusToOpen open={open} />
@@ -1497,7 +1502,7 @@ function FloatingComboboxCore({
                           : undefined
                       }
                       onPress={handleCreate}
-                      {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+                      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
                     >
                       <PlusIcon size={14} color={knobProps.textAccentColor} />
                       <Text
@@ -1538,7 +1543,7 @@ function FloatingComboboxCore({
                       : "transparent"
                   }
                   pressStyle={{ backgroundColor: formInputColors.background.focus }}
-                  {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+                  {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
                 >
                   <PlusIcon size={14} color={knobProps.textAccentColor} />
                   <Text

package/src/fields/DatePicker/DatePicker.spec.tsx

@@ -223,6 +223,99 @@ describe("DatePicker", () => {
     });
   });
 
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The form branch only ever displayed the mount-time value (`selectedDate`
+    // was never re-synced from field state), so a value applied AFTER first
+    // paint — create-mode engine seeding, form.setFieldValue, live server
+    // merge — never rendered. Adopting a programmatic value must not emit
+    // onChange (LC-14: a seeded value is not a user edit).
+    const getDisplayInput = (container: ParentNode) =>
+      container.querySelector("input") as HTMLInputElement | null;
+
+    it("standalone controlled: a value arriving after mount displays, without onChange", async () => {
+      const DatePicker = await loadDatePicker();
+      const onChange = vi.fn();
+      const onValueChange = vi.fn();
+      const result = renderWithProviders(
+        <DatePicker
+          label="Due Date"
+          value={null}
+          onChange={onChange}
+          onValueChange={onValueChange}
+        />,
+      );
+      expect(getDisplayInput(result.container)?.value ?? "").toBe("");
+
+      // Late seed: the upstream doc value (frappe wire string) arrives after
+      // first paint.
+      result.rerender(
+        <DatePicker
+          label="Due Date"
+          value="2026-03-05"
+          onChange={onChange}
+          onValueChange={onValueChange}
+        />,
+      );
+      await waitFor(() => {
+        expect(getDisplayInput(result.container)?.value).toBe("Mar 5, 2026");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
+    it("form-integrated: a field value set after mount displays, without onChange", async () => {
+      const DatePicker = await loadDatePicker();
+      const onChange = vi.fn();
+      let formApi: { setFieldValue: (name: "date", value: string | null) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { date: null as string | null } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <DatePicker label="Due Date" name="date" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      expect(getDisplayInput(result.container)?.value ?? "").toBe("");
+
+      await act(async () => {
+        formApi?.setFieldValue("date", "2026-03-05");
+      });
+      await waitFor(() => {
+        expect(getDisplayInput(result.container)?.value).toBe("Mar 5, 2026");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("form-integrated: clearing the field value programmatically clears the display", async () => {
+      const DatePicker = await loadDatePicker();
+      const onChange = vi.fn();
+      let formApi: { setFieldValue: (name: "date", value: string | null) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { date: "2026-03-05" as string | null } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <DatePicker label="Due Date" name="date" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      await waitFor(() => {
+        expect(getDisplayInput(result.container)?.value).toBe("Mar 5, 2026");
+      });
+
+      await act(async () => {
+        formApi?.setFieldValue("date", null);
+      });
+      await waitFor(() => {
+        expect(getDisplayInput(result.container)?.value ?? "").toBe("");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
   describe("date utilities", () => {
     it("formats display values in the house absolute register and handles null", () => {
       expect(formatDateDisplay(null)).toBe("");

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -116,7 +116,8 @@ export const Disabled: Story = {
 export const WithError: Story = {
   args: {
     label: "Required Date",
-    error: "Please select a date",
+    // DG-COPY-02: error copy states the rule broken — never "please"/"invalid"/"error".
+    error: "A date is required",
     required: true,
   },
 };

package/src/fields/DatePicker/DateRangePicker.spec.tsx

@@ -1,6 +1,8 @@
+import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
 
 vi.mock("react-native", () => ({
   Platform: {
@@ -87,4 +89,74 @@ describe("DateRangePicker", () => {
       expect(input?.value ?? "").toContain("–");
     });
   });
+
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The form branch displays from `rangeStart`/`rangeEnd`, which only user
+    // picks and the standalone `value` prop used to update — a field value
+    // applied AFTER first paint (create-mode engine seeding, setFieldValue)
+    // never rendered. Adopting a programmatic value must not emit onChange
+    // (LC-14: a seeded value is not a user edit).
+    it("form-integrated: a field value set after mount displays, without onChange", async () => {
+      const DateRangePicker = await loadDateRangePicker();
+      const onChange = vi.fn();
+      type Range = { start: Date; end: Date } | null;
+      let formApi: { setFieldValue: (name: "range", value: Range) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { range: null as Range } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <DateRangePicker label="Range" name="range" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const getInput = () => result.container.querySelector("input") as HTMLInputElement | null;
+      expect(getInput()?.value ?? "").toBe("");
+
+      await act(async () => {
+        formApi?.setFieldValue("range", {
+          start: new Date(2026, 2, 5),
+          end: new Date(2026, 2, 12),
+        });
+      });
+      await waitFor(() => {
+        expect(getInput()?.value).toBe("Mar 5, 2026 – Mar 12, 2026");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("form-integrated: clearing the field value programmatically clears the display", async () => {
+      const DateRangePicker = await loadDateRangePicker();
+      const onChange = vi.fn();
+      type Range = { start: Date; end: Date } | null;
+      let formApi: { setFieldValue: (name: "range", value: Range) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: {
+            range: { start: new Date(2026, 2, 5), end: new Date(2026, 2, 12) } as Range,
+          },
+        });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <DateRangePicker label="Range" name="range" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const getInput = () => result.container.querySelector("input") as HTMLInputElement | null;
+      await waitFor(() => {
+        expect(getInput()?.value).toBe("Mar 5, 2026 – Mar 12, 2026");
+      });
+
+      await act(async () => {
+        formApi?.setFieldValue("range", null);
+      });
+      await waitFor(() => {
+        expect(getInput()?.value ?? "").toBe("");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -32,6 +32,7 @@ import {
   useDateNavigation,
   yearPageSize,
 } from "./parts";
+import { FieldValueSync } from "./fieldValueSync";
 
 import type { ViewMode } from "./parts";
 
@@ -471,24 +472,31 @@ export function DateRangePicker<
     setOpen(true);
   }, [setDisplayDate]);
 
-  // Keep standalone/controlled state in sync when the parent value changes.
-  // Skip while a range is half-picked (start set, end pending): the first click
-  // of a new range used to call onChange(null), and syncing that null wiped
-  // rangeStart so the second click could never complete (SB-T2-03).
+  // Adopt an externally-applied value (controlled `value` prop or the live
+  // TanStack field value) into the display state without emitting onChange
+  // (LC-14). Skip while a range is half-picked (start set, end pending): the
+  // first click of a new range used to call onChange(null), and syncing that
+  // null wiped rangeStart so the second click could never complete (SB-T2-03).
   const pickingRangeRef = useRef(false);
-  useEffect(() => {
-    if (valueProp === undefined) return;
-    if (pickingRangeRef.current && valueProp == null) return;
+  const adoptExternalValue = useCallback((raw: unknown) => {
+    const next = (raw ?? null) as DateRange | null;
+    if (pickingRangeRef.current && next == null) return;
     pickingRangeRef.current = false;
-    const nextStart = valueProp?.start ?? null;
-    const nextEnd = valueProp?.end ?? null;
+    const nextStart = next?.start ?? null;
+    const nextEnd = next?.end ?? null;
     setRangeStart((prev) =>
       prev === nextStart || (prev && nextStart && isSameDay(prev, nextStart)) ? prev : nextStart,
     );
     setRangeEnd((prev) =>
       prev === nextEnd || (prev && nextEnd && isSameDay(prev, nextEnd)) ? prev : nextEnd,
     );
-  }, [valueProp]);
+  }, []);
+
+  // Keep standalone/controlled state in sync when the parent value changes.
+  useEffect(() => {
+    if (valueProp === undefined) return;
+    adoptExternalValue(valueProp);
+  }, [valueProp, adoptExternalValue]);
 
   const closePopover = useCallback(() => {
     setOpen(false);
@@ -647,26 +655,32 @@ export function DateRangePicker<
         const resolvedError = getFieldError(field, errorProp);
 
         return (
-          <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
-            error={resolvedError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
-            disabled={disabled}
-          >
-            <InputParts size={size || knobProps.sizeToken}>
-              {renderPopover(
-                !!resolvedError,
-                mergeFieldHandler(field, "handleBlur", _onBlur),
-                mergeFieldHandler(field, "handleChange"),
-              )}
-            </InputParts>
-          </FieldLayout>
+          <>
+            {/* Form branch displays from `rangeStart`/`rangeEnd` — keep them
+                synced to the live field value (late seeds / programmatic
+                updates). */}
+            <FieldValueSync value={field.state.value} onSync={adoptExternalValue} />
+            <FieldLayout
+              id={id}
+              label={label}
+              labelProps={labelProps}
+              error={resolvedError}
+              helperText={helperText}
+              required={required}
+              size={size}
+              knobProps={knobProps}
+              // LC-40: see standalone branch — FieldLayout carries dimWhole.
+              disabled={disabled}
+            >
+              <InputParts size={size || knobProps.sizeToken}>
+                {renderPopover(
+                  !!resolvedError,
+                  mergeFieldHandler(field, "handleBlur", _onBlur),
+                  mergeFieldHandler(field, "handleChange"),
+                )}
+              </InputParts>
+            </FieldLayout>
+          </>
         );
       }}
     </Field>

package/src/fields/DatePicker/DatetimePicker.spec.tsx

@@ -146,4 +146,43 @@ describe("DatetimePicker", () => {
       expect(onSubmit.mock.calls[0][0].appt).toBeInstanceOf(Date);
     });
   });
+
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The form branch displays from `selectedDatetime`, kept synced to the
+    // live field value by DatePickerFieldValueSync — a value applied AFTER
+    // first paint (create-mode engine seeding, setFieldValue, live server
+    // merge) must render. Adopting a programmatic value must not emit
+    // onChange (LC-14: a seeded value is not a user edit).
+    it("form-integrated: a field value set after mount displays, without onChange", async () => {
+      const onChange = vi.fn();
+      const onValueChange = vi.fn();
+      let formApi: { setFieldValue: (name: "appt", value: Date | null) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { appt: null as Date | null } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <DatetimePicker
+              name="appt"
+              label="Appointment"
+              onChange={onChange}
+              onValueChange={onValueChange}
+            />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const getInput = () => result.container.querySelector("input") as HTMLInputElement | null;
+      expect(getInput()?.value ?? "").toBe("");
+
+      await act(async () => {
+        formApi?.setFieldValue("appt", new Date(2026, 2, 5, 14, 30));
+      });
+      await waitFor(() => {
+        expect(getInput()?.value ?? "").toContain("Mar 5, 2026");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/fields/DatePicker/DatetimePicker.tsx

@@ -368,7 +368,7 @@ function TimeSection({
                 backgroundColor={isSelected ? formInputColors.background.focus : "transparent"}
                 hoverStyle={{ backgroundColor: formInputColors.background.focus }}
                 onPress={() => handlePeriodChange(p)}
-                {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+                {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
               >
                 <Text
                   fontSize="$3"

package/src/fields/DatePicker/MonthPicker.spec.tsx

@@ -142,4 +142,65 @@ describe("MonthPicker", () => {
       );
     });
   });
+
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // `selectedValue` was hardcoded to null at mount and only user picks set
+    // it, so a field value applied at ANY point (even the Field-level
+    // defaultValue) never displayed. The form branch now adopts the live
+    // field value — without emitting onChange (LC-14: a seeded value is not
+    // a user edit).
+    it("form-integrated: a field value set after mount displays, without onChange", async () => {
+      const onChange = vi.fn();
+      let formApi:
+        | { setFieldValue: (name: "month", value: { month: number; year: number } | null) => void }
+        | undefined;
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: { month: null as { month: number; year: number } | null },
+        });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <MonthPicker name="month" label="Month" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const getInput = () => result.container.querySelector("input") as HTMLInputElement | null;
+      expect(getInput()?.value ?? "").toBe("");
+
+      await act(async () => {
+        formApi?.setFieldValue("month", { month: 2, year: 2026 });
+      });
+      await waitFor(() => {
+        expect(getInput()?.value).toBe("March 2026");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("form-integrated: a Field-level defaultValue displays at mount", async () => {
+      const onChange = vi.fn();
+      const TestComponent = () => {
+        const form = useForm({
+          defaultValues: { month: undefined as { month: number; year: number } | undefined },
+        });
+        return (
+          <Form form={form}>
+            <MonthPicker
+              name="month"
+              label="Month"
+              defaultValue={{ month: 6, year: 2025 }}
+              onChange={onChange}
+            />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      await waitFor(() => {
+        const input = result.container.querySelector("input") as HTMLInputElement | null;
+        expect(input?.value).toBe("July 2025");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/fields/DatePicker/MonthPicker.tsx

@@ -5,7 +5,6 @@ import { Text, View, useProps, type Popover } from "tamagui";
 
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
   getFieldError,
@@ -28,6 +27,7 @@ import {
   useDateNavigation,
   yearPageSize,
 } from "./parts";
+import { FieldValueSync } from "./fieldValueSync";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -264,6 +264,27 @@ export function MonthPicker<
   const { displayDate, setDisplayDate } = useDateNavigation();
   const popoverRef = useRef<Popover>(null);
 
+  // Display comes from `selectedValue`, which only user picks used to set —
+  // a field value applied AFTER mount (create-mode seeding, setFieldValue,
+  // even the Field-level defaultValue) never rendered. Adopt the live field
+  // value without emitting onChange (LC-14). Identity is preserved when the
+  // month is unchanged so the close-on-select effect never re-fires.
+  const adoptFieldValue = useCallback((raw: unknown) => {
+    const next =
+      raw !== null &&
+      typeof raw === "object" &&
+      typeof (raw as MonthPickerValue).month === "number" &&
+      typeof (raw as MonthPickerValue).year === "number"
+        ? (raw as MonthPickerValue)
+        : null;
+    setSelectedValue((prev) =>
+      prev === next ||
+      (prev !== null && next !== null && prev.month === next.month && prev.year === next.year)
+        ? prev
+        : next,
+    );
+  }, []);
+
   const closePopover = useCallback(() => {
     setOpen(false);
     popoverRef.current?.close();
@@ -395,26 +416,31 @@ export function MonthPicker<
         const resolvedError = getFieldError(field, errorProp);
 
         return (
-          <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
-            error={resolvedError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
-            disabled={disabled}
-          >
-            <InputParts size={size || knobProps.sizeToken}>
-              {renderPopover(
-                !!resolvedError,
-                mergeFieldHandler(field, "handleBlur", _onBlur),
-                mergeFieldHandler(field, "handleChange"),
-              )}
-            </InputParts>
-          </FieldLayout>
+          <>
+            {/* Form branch displays from `selectedValue` — keep it synced to
+                the live field value (late seeds / programmatic updates). */}
+            <FieldValueSync value={field.state.value} onSync={adoptFieldValue} />
+            <FieldLayout
+              id={id}
+              label={label}
+              labelProps={labelProps}
+              error={resolvedError}
+              helperText={helperText}
+              required={required}
+              size={size}
+              knobProps={knobProps}
+              // LC-40: see standalone branch — FieldLayout carries dimWhole.
+              disabled={disabled}
+            >
+              <InputParts size={size || knobProps.sizeToken}>
+                {renderPopover(
+                  !!resolvedError,
+                  mergeFieldHandler(field, "handleBlur", _onBlur),
+                  mergeFieldHandler(field, "handleChange"),
+                )}
+              </InputParts>
+            </FieldLayout>
+          </>
         );
       }}
     </Field>

package/src/fields/DatePicker/MultiDatePicker.spec.tsx

@@ -1,6 +1,8 @@
+import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
 
 vi.mock("react-native", () => ({
   Platform: {
@@ -90,4 +92,36 @@ describe("MultiDatePicker", () => {
       expect(input?.value ?? "").toBe("");
     });
   });
+
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The form branch displays from `selectedDates`, which only user picks
+    // and the standalone `value` prop used to update — a field value applied
+    // AFTER first paint (create-mode engine seeding, setFieldValue) never
+    // rendered. Adopting a programmatic value must not emit onChange (LC-14).
+    it("form-integrated: a field value set after mount displays, without onChange", async () => {
+      const MultiDatePicker = await loadMultiDatePicker();
+      const onChange = vi.fn();
+      let formApi: { setFieldValue: (name: "dates", value: Date[]) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { dates: [] as Date[] } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <MultiDatePicker label="Dates" name="dates" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      const getInput = () => result.container.querySelector("input") as HTMLInputElement | null;
+      expect(getInput()?.value ?? "").toBe("");
+
+      await act(async () => {
+        formApi?.setFieldValue("dates", [new Date(2026, 2, 5)]);
+      });
+      await waitFor(() => {
+        expect(getInput()?.value).toBe("Mar 5, 2026");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
 });