@multiplatform.one/forms 7.7.6 → 7.8.0

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

@@ -0,0 +1,144 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@tanstack/react-form";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { DatetimePicker } from "./DatetimePicker.native";
+import { DatePicker } from "./index.native";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+// RNW omits React Native's accessibilityValue object. Bridge that native
+// contract for this harness; the actual iOS AX tree remains the runtime gate.
+vi.mock("react-native-web", async (importOriginal) => {
+  const native = await importOriginal<typeof import("react-native")>();
+  return {
+    ...native,
+    Pressable: ({ accessibilityValue, ...props }: import("react-native").PressableProps) => (
+      <native.Pressable {...props} aria-valuetext={accessibilityValue?.text} />
+    ),
+  };
+});
+
+const picked = new Date(2026, 2, 5, 14, 30);
+vi.mock("../nativeDateTime/OsDateTimeSheet", () => ({
+  OsDateTimeSheet: ({ open, onConfirm }: { open: boolean; onConfirm: (date: Date) => void }) =>
+    open ? (
+      <div role="dialog" aria-label="OS date and time">
+        <button onClick={() => onConfirm(new Date(2026, 2, 5, 14, 30))}>
+          Confirm OS selection
+        </button>
+      </div>
+    ) : null,
+}));
+
+describe("native DatetimePicker ownership", () => {
+  it.each([
+    { Control: DatePicker, name: "Date" },
+    { Control: DatetimePicker, name: "Date and time" },
+  ])(
+    "keeps $name paint inert and exposes its current value on the press owner",
+    ({ Control, name }) => {
+      const result = renderWithProviders(<Control value={picked} />);
+      const trigger = result.getByRole("button", { name });
+      expect(trigger.getAttribute("aria-valuetext")).toContain("Mar 5, 2026");
+      const painted = result.getByTestId("date-picker-trigger");
+      const paintAncestors: HTMLElement[] = [];
+      for (let el = painted.parentElement; el && el !== trigger; el = el.parentElement) {
+        paintAncestors.push(el);
+      }
+      expect(paintAncestors.some((el) => getComputedStyle(el).pointerEvents === "none")).toBe(true);
+    },
+  );
+
+  it("opens from its full-width native target and commits exactly once", () => {
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+    const result = renderWithProviders(
+      <DatetimePicker onChange={onChange} onValueChange={onValueChange} />,
+    );
+    const trigger = result.getByRole("button", { name: "Date and time" });
+    expect(getComputedStyle(trigger).width).toBe("100%");
+    fireEvent.click(trigger);
+    expect(result.getAllByRole("dialog")).toHaveLength(1);
+    fireEvent.click(result.getByRole("button", { name: "Confirm OS selection" }));
+    expect(result.queryByRole("dialog")).toBeNull();
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(picked);
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith(picked);
+    expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026");
+  });
+
+  it("keeps native read-only text undimmed, without a picker press target", () => {
+    const result = renderWithProviders(<DatetimePicker value={picked} readOnly />);
+    const input = result.container.querySelector("input")!;
+    expect(input.value).toContain("Mar 5, 2026");
+    expect(input.disabled).toBe(false);
+    expect(input.readOnly).toBe(true);
+    expect(result.queryByRole("button")).toBeNull();
+    fireEvent.click(input);
+    expect(result.queryByRole("dialog")).toBeNull();
+    for (let el: HTMLElement | null = input; el && el !== result.container; el = el.parentElement) {
+      const opacity = getComputedStyle(el).opacity;
+      expect(opacity === "" || Number(opacity) === 1).toBe(true);
+    }
+  });
+
+  it("keeps a disabled value visible while declining activation", () => {
+    const result = renderWithProviders(<DatetimePicker value={picked} disabled />);
+    const trigger = result.getByRole("button", { name: "Date and time" });
+    expect(trigger.getAttribute("aria-disabled")).toBe("true");
+    expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026");
+    fireEvent.click(trigger);
+    expect(result.queryByRole("dialog")).toBeNull();
+  });
+
+  it("adopts controlled values after mount without emitting changes or opening", async () => {
+    const onChange = vi.fn();
+    const onValueChange = vi.fn();
+    const result = renderWithProviders(
+      <DatetimePicker value={null} onChange={onChange} onValueChange={onValueChange} />,
+    );
+    expect(result.container.querySelector("input")?.value).toBe("");
+    result.rerender(
+      <DatetimePicker value={picked} onChange={onChange} onValueChange={onValueChange} />,
+    );
+    await waitFor(() =>
+      expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026"),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(result.queryByRole("dialog")).toBeNull();
+  });
+
+  it("adopts form values after mount without emitting changes or opening", async () => {
+    const onChange = vi.fn();
+    let update: ((date: Date) => void) | undefined;
+    function Example() {
+      const form = useForm({ defaultValues: { when: null as Date | null } });
+      update = (date) => form.setFieldValue("when", date);
+      return (
+        <Form form={form}>
+          <DatetimePicker name="when" onChange={onChange} />
+        </Form>
+      );
+    }
+    const result = renderWithProviders(<Example />);
+    expect(result.container.querySelector("input")?.value).toBe("");
+    await act(async () => update?.(picked));
+    await waitFor(() =>
+      expect(result.container.querySelector("input")?.value).toContain("Mar 5, 2026"),
+    );
+    expect(onChange).not.toHaveBeenCalled();
+    expect(result.queryByRole("dialog")).toBeNull();
+  });
+
+  it("gives the native trigger box the row width its text section needs", () => {
+    const result = renderWithProviders(<DatetimePicker value={picked} />);
+    const box = result.getByTestId("date-picker-trigger");
+    expect(getComputedStyle(box).flexGrow).toBe("1");
+    expect(getComputedStyle(box).minWidth).toBe("0px");
+  });
+});

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

@@ -142,38 +142,63 @@ export function DatetimePicker<
     hasError?: boolean,
     blurHandler?: (...args: unknown[]) => void,
     fieldChange?: (value: unknown) => void,
-  ) => (
-    <>
-      <DatePickerInputTrigger
-        value={display}
-        placeholder={placeholder}
-        disabled={disabled || readOnly}
-        open={open}
-        onReset={() => commit(null, fieldChange)}
-        onButtonPress={() => !disabled && !readOnly && setOpen(true)}
-        error={!!hasError}
-        id={id}
-        aria-label={hasLabel ? undefined : t("Date and time")}
-        aria-required={required || undefined}
-        aria-invalid={hasError || undefined}
-      />
-      <OsDateTimeSheet
-        open={open}
-        value={selected ?? new Date()}
-        mode="datetime"
-        minDate={minDate}
-        maxDate={maxDate}
-        onCancel={() => {
-          setOpen(false);
-          blurHandler?.();
-        }}
-        onConfirm={(date) => {
-          commit(date, fieldChange);
-          blurHandler?.();
-        }}
-      />
-    </>
-  );
+  ) => {
+    if (readOnly) {
+      return (
+        <InputParts.Box>
+          <InputParts.Area
+            value={display}
+            readOnly
+            aria-readonly="true"
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+            placeholder={placeholder}
+          />
+        </InputParts.Box>
+      );
+    }
+    return (
+      <>
+        <RNPressable
+          onPress={() => !disabled && setOpen(true)}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityLabel={hasLabel ? undefined : t("Date and time")}
+          accessibilityValue={{ text: display || placeholder }}
+          style={{ width: "100%" }}
+        >
+          <DatePickerInputTrigger
+            value={display}
+            placeholder={placeholder}
+            disabled={disabled}
+            open={open}
+            onReset={() => commit(null, fieldChange)}
+            onButtonPress={() => {}}
+            error={!!hasError}
+            id={id}
+            aria-label={hasLabel ? undefined : t("Date and time")}
+            aria-required={required || undefined}
+            aria-invalid={hasError || undefined}
+          />
+        </RNPressable>
+        <OsDateTimeSheet
+          open={open}
+          value={selected ?? new Date()}
+          mode="datetime"
+          minDate={minDate}
+          maxDate={maxDate}
+          onCancel={() => {
+            setOpen(false);
+            blurHandler?.();
+          }}
+          onConfirm={(date) => {
+            commit(date, fieldChange);
+            blurHandler?.();
+          }}
+        />
+      </>
+    );
+  };
 
   if (skeleton) {
     return (

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

@@ -50,6 +50,28 @@ export const Baseline: Story = {
   ),
 };
 
+export const StateContract: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | null>(null);
+    const [edits, setEdits] = useState(0);
+    const saved = new Date(2026, 0, 15, 9, 30);
+    return (
+      <YStack gap="$4" maxWidth={400}>
+        <DatetimePicker label="Saved date and time" defaultValue={saved} />
+        <DatetimePicker
+          label="Programmatic date and time"
+          value={value}
+          onChange={() => setEdits((count) => count + 1)}
+        />
+        <Button onPress={() => setValue(new Date(2026, 2, 5, 14, 30))}>Load date and time</Button>
+        <Text>{`User edits: ${edits}`}</Text>
+        <DatetimePicker label="Read-only date and time" value={saved} readOnly />
+        <DatetimePicker label="Disabled date and time" value={saved} disabled />
+      </YStack>
+    );
+  },
+};
+
 export const TwentyFourHour: Story = {
   args: { timeFormat: "24h", helperText: "24-hour format" },
 };

package/src/fields/DatePicker/MonthPicker.tsx

@@ -2,6 +2,7 @@ import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons-2";
 import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
 import { Text, View, useProps, type Popover } from "tamagui";
+import { useGlyphColor } from "@multiplatform.one/theme";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import { t } from "../../shared/t";
@@ -107,6 +108,7 @@ function MonthPickerBody({
   maxYear,
 }: MonthPickerBodyProps) {
   const { knobProps } = useCalendarKnobs();
+  const glyphColor = useGlyphColor();
   const { px } = knobProps.nestedControl;
   const [viewMode, setViewMode] = useState<ViewMode>("month");
   const year = displayDate.getFullYear();
@@ -122,6 +124,7 @@ function MonthPickerBody({
   const handleSelectYear = useCallback(
     (selectedYear: number) => {
       const newDate = new Date(displayDate);
+      newDate.setDate(1);
       newDate.setFullYear(selectedYear);
       onSetDisplayDate(newDate);
       setViewMode("month");
@@ -131,6 +134,7 @@ function MonthPickerBody({
 
   const handlePrevYear = useCallback(() => {
     const newDate = new Date(displayDate);
+    newDate.setDate(1);
     newDate.setFullYear(newDate.getFullYear() - 1);
     if (minYear && newDate.getFullYear() < minYear) return;
     onSetDisplayDate(newDate);
@@ -138,6 +142,7 @@ function MonthPickerBody({
 
   const handleNextYear = useCallback(() => {
     const newDate = new Date(displayDate);
+    newDate.setDate(1);
     newDate.setFullYear(newDate.getFullYear() + 1);
     if (maxYear && newDate.getFullYear() > maxYear) return;
     onSetDisplayDate(newDate);
@@ -171,7 +176,7 @@ function MonthPickerBody({
         {...knobProps.gap}
         width={px * 7}
         {...animation}
-        transition="medium"
+        transition={knobProps.transition}
       >
         <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
           <CalendarChromeButton
@@ -181,7 +186,7 @@ function MonthPickerBody({
             label={t("Previous year")}
           >
             <View opacity={prevDisabled ? 0.4 : 1}>
-              <ChevronLeft size={16} />
+              <ChevronLeft size={knobProps.controlIcon.width} color={glyphColor} />
             </View>
           </CalendarChromeButton>
 
@@ -198,7 +203,7 @@ function MonthPickerBody({
             label={t("Next year")}
           >
             <View opacity={nextDisabled ? 0.4 : 1}>
-              <ChevronRight size={16} />
+              <ChevronRight size={knobProps.controlIcon.width} color={glyphColor} />
             </View>
           </CalendarChromeButton>
         </View>

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -209,6 +209,7 @@ function DualCalendarBody({
 
   const prevMonthDate = useMemo(() => {
     const date = new Date(displayDate);
+    date.setDate(1);
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);
@@ -223,6 +224,7 @@ function DualCalendarBody({
   const handleSetDisplayForPrev = useCallback(
     (date: Date) => {
       const next = new Date(date);
+      next.setDate(1);
       next.setMonth(next.getMonth() + 1);
       setDisplayDate(next);
     },
@@ -231,7 +233,7 @@ function DualCalendarBody({
 
   if (!fullWidthMode) {
     return (
-      <View {...knobProps.panelPadding}>
+      <View>
         <SingleCalendar
           displayDate={displayDate}
           selectedDates={selectedDates}
@@ -247,7 +249,7 @@ function DualCalendarBody({
   }
 
   return (
-    <View flexDirection="row" {...knobProps.gap} {...knobProps.panelPadding}>
+    <View flexDirection="row" {...knobProps.gap}>
       <SingleCalendar
         displayDate={prevMonthDate}
         selectedDates={selectedDates}

package/src/fields/DatePicker/index.native.tsx

@@ -158,6 +158,7 @@ export function DatePicker<
           disabled={disabled}
           accessibilityRole="button"
           accessibilityLabel={hasLabel ? undefined : t("Date")}
+          accessibilityValue={{ text: formatDateDisplay(selectedDate) || placeholder }}
           style={{ width: "100%" }}
         >
           <DatePickerInputTrigger

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

@@ -0,0 +1,56 @@
+import { act, fireEvent, renderHook } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { CalendarViewSwitcher, useCalendarData, useDateNavigation, type ViewMode } from "./parts";
+
+function MonthCursor({ initial, view }: { initial: Date; view: ViewMode }) {
+  const [date, setDate] = useState(initial);
+  const [viewMode, setViewMode] = useState(view);
+  const [yearPageStart, setYearPageStart] = useState(2020);
+  const calendarData = useCalendarData(date);
+  return (
+    <>
+      <output data-testid="display-month">{`${date.getFullYear()}-${date.getMonth() + 1}`}</output>
+      <CalendarViewSwitcher
+        calendarData={calendarData}
+        displayDate={date}
+        onSetDisplayDate={setDate}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+        yearPageStart={yearPageStart}
+        setYearPageStart={setYearPageStart}
+      >
+        <span>Day view</span>
+      </CalendarViewSwitcher>
+    </>
+  );
+}
+
+describe("calendar display-month navigation", () => {
+  it.each([
+    ["next", 3],
+    ["prev", 1],
+  ] as const)("moves %s from March 31 without skipping a month", (direction, month) => {
+    const initial = new Date(2024, 2, 31);
+    const { result } = renderHook(() => useDateNavigation(initial));
+    act(() => result.current.navigateMonth(direction));
+    expect(result.current.displayDate.getFullYear()).toBe(2024);
+    expect(result.current.displayDate.getMonth()).toBe(month);
+    expect(initial.getDate()).toBe(31);
+  });
+
+  it("selects February from a January 31 display cursor", async () => {
+    const result = renderWithProviders(
+      <MonthCursor initial={new Date(2024, 0, 31)} view="month" />,
+    );
+    await act(async () => fireEvent.click(result.getByText("Feb")));
+    expect(result.getByTestId("display-month").textContent).toBe("2024-2");
+  });
+
+  it("keeps February when switching a leap-day cursor to a non-leap year", async () => {
+    const result = renderWithProviders(<MonthCursor initial={new Date(2024, 1, 29)} view="year" />);
+    await act(async () => fireEvent.click(result.getByText("2025")));
+    expect(result.getByTestId("display-month").textContent).toBe("2025-2");
+  });
+});

package/src/fields/DatePicker/parts.tsx

@@ -10,6 +10,7 @@ import {
   formatAbsoluteDate,
   getMonthNames,
   useAccentOnSurface,
+  useGlyphColor,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import {
@@ -23,7 +24,8 @@ import {
 } from "react";
 import { AnimatePresence, Text, View, isWeb } from "tamagui";
 
-import { FloatingPanel } from "../../FloatingPanel";
+import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "../../FloatingPanel";
+import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
 import { Input as InputParts } from "../../InputParts";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -141,6 +143,7 @@ export function useDateNavigation(initialDate?: Date) {
   const navigateMonth = useCallback((direction: "prev" | "next") => {
     setDisplayDate((prev) => {
       const next = new Date(prev);
+      next.setDate(1);
       next.setMonth(next.getMonth() + (direction === "prev" ? -1 : 1));
       return next;
     });
@@ -199,7 +202,7 @@ export function CalendarPanelFrame({ children }: { children: ReactNode }) {
       flexDirection="column"
       alignItems="center"
       {...knobProps.gap}
-      width={px * 7}
+      minWidth={px * 7}
       alignSelf="center"
       {...knobProps.panelPadding}
       data-testid="date-picker-calendar"
@@ -484,7 +487,7 @@ export function CalendarDays({
   return (
     <AnimatePresence key={animationKey}>
       <View
-        transition="medium"
+        transition={knobProps.transition}
         {...animation}
         alignSelf="center"
         gap="$1"
@@ -616,6 +619,7 @@ export function CalendarHeader({
   showNext = true,
 }: CalendarHeaderProps) {
   const { knobProps } = useCalendarKnobs();
+  const glyphColor = useGlyphColor();
   const { px } = knobProps.nestedControl;
   return (
     <View
@@ -627,7 +631,7 @@ export function CalendarHeader({
     >
       {showPrev && onPrevMonth ? (
         <CalendarChromeButton onPress={onPrevMonth} label={t("Previous month")}>
-          <CaretLeftIcon size={16} color="currentColor" />
+          <CaretLeftIcon size={knobProps.controlIcon.width} color={glyphColor} />
         </CalendarChromeButton>
       ) : (
         <View width={px} height={px} />
@@ -648,7 +652,7 @@ export function CalendarHeader({
 
       {showNext && onNextMonth ? (
         <CalendarChromeButton onPress={onNextMonth} label={t("Next month")}>
-          <CaretRightIcon size={16} color="currentColor" />
+          <CaretRightIcon size={knobProps.controlIcon.width} color={glyphColor} />
         </CalendarChromeButton>
       ) : (
         <View width={px} height={px} />
@@ -677,7 +681,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
     <AnimatePresence key={animationKey}>
       <View
         {...animation}
-        transition="quick"
+        transition={knobProps.transition}
         flexDirection="row"
         flexWrap="wrap"
         width={px * 7}
@@ -752,6 +756,7 @@ export function YearGrid({
   onNextPage,
 }: YearGridProps) {
   const { knobProps } = useCalendarKnobs();
+  const glyphColor = useGlyphColor();
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
   const cellW = (px * 7) / 3;
   const years = useMemo(() => {
@@ -768,18 +773,24 @@ export function YearGrid({
     <View width={px * 7} alignSelf="center" {...knobProps.gap}>
       <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
         <CalendarChromeButton onPress={onPrevPage} label={t("Previous years")}>
-          <CaretLeftIcon size={16} color="currentColor" />
+          <CaretLeftIcon size={knobProps.controlIcon.width} color={glyphColor} />
         </CalendarChromeButton>
         <Text {...knobProps.label} {...knobProps.textWeight}>
           {years[0]} – {years[years.length - 1]}
         </Text>
         <CalendarChromeButton onPress={onNextPage} label={t("Next years")}>
-          <CaretRightIcon size={16} color="currentColor" />
+          <CaretRightIcon size={knobProps.controlIcon.width} color={glyphColor} />
         </CalendarChromeButton>
       </View>
 
       <AnimatePresence key={animationKey}>
-        <View {...animation} transition="quick" flexDirection="row" flexWrap="wrap" width={px * 7}>
+        <View
+          {...animation}
+          transition={knobProps.transition}
+          flexDirection="row"
+          flexWrap="wrap"
+          width={px * 7}
+        >
           {years.map((year) => {
             const isSelected = year === selectedYear;
             return (
@@ -863,6 +874,7 @@ export function DatePickerClearButton({
 }) {
   return (
     <InputParts.Button
+      {...floatingPanelActionProps}
       data-testid="date-picker-clear"
       aria-label={label ?? t("Clear date")}
       disabled={disabled}
@@ -894,8 +906,10 @@ export function DatePickerInputTrigger({
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid,
 }: DatePickerInputTriggerProps) {
-  const handleTriggerKey = (e: { key?: string; code?: string; preventDefault?: () => void }) => {
-    if (disabled) return;
+  const handleTriggerKey = (
+    e: PanelActionEvent & { key?: string; code?: string; preventDefault?: () => void },
+  ) => {
+    if (disabled || isNestedPanelAction(e)) return;
     const key = e.key;
     if (key === "Enter" || key === " " || key === "ArrowDown" || e.code === "Space") {
       e.preventDefault?.();
@@ -920,9 +934,13 @@ export function DatePickerInputTrigger({
       alignItems="center"
       width="100%"
       cursor={disabled ? "not-allowed" : "pointer"}
+      // Native parents own the tap; expanded field paint must not consume it.
+      pointerEvents={isWeb ? undefined : "none"}
     >
       <InputParts.Box
         theme={error ? "red" : undefined}
+        // Yoga has no intrinsic TextInput width to size this row child.
+        {...(isWeb ? undefined : { flex: 1, minWidth: 0 })}
         // Elevation is an overlay recipe: it belongs on the open panel, never
         // on the closed text-field trigger.
         elevation={undefined}
@@ -1014,7 +1032,8 @@ export function DatePickerPopoverShell({
       triggerEnd={triggerEnd ?? nativeClear}
       disabled={disabled}
       sizing="grow"
-      widthMode="at-least-trigger"
+      contentPadding="none"
+      widthMode="fit-content"
       triggerA11y={triggerA11y}
     >
       {children}
@@ -1051,6 +1070,7 @@ export function CalendarViewSwitcher({
   const handleSelectMonth = useCallback(
     (month: number) => {
       const newDate = new Date(displayDate);
+      newDate.setDate(1);
       newDate.setMonth(month);
       onSetDisplayDate(newDate);
       setViewMode("day");
@@ -1061,6 +1081,7 @@ export function CalendarViewSwitcher({
   const handleSelectYear = useCallback(
     (year: number) => {
       const newDate = new Date(displayDate);
+      newDate.setDate(1);
       newDate.setFullYear(year);
       onSetDisplayDate(newDate);
       setViewMode("month");