@multiplatform.one/forms 7.7.6 → 7.10.0

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");

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -45,6 +45,14 @@ function getZone(container: Element): HTMLElement {
   return zone as HTMLElement;
 }
 
+function borderWidthAtomPx(el: HTMLElement, prefix: string): number {
+  const atom = el.className.split(/\s+/).find((cls) => cls.startsWith(prefix));
+  // No atom means the side declares no width and falls through to the UA
+  // initial, which is exactly the defect — report it as such, not as 0.
+  if (!atom) return Number.NaN;
+  return Number.parseFloat(atom.slice(prefix.length));
+}
+
 async function pickFile(container: Element, file: File) {
   const input = container.querySelector("input[type='file']") as HTMLInputElement | null;
   expect(input).toBeTruthy();
@@ -317,6 +325,27 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(zone.textContent).toContain("Choose File");
   });
 
+  it("hangs the file list off ONE top hairline — bottom/left/right are 0, not the UA 3px initial (MPO-124)", async () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
+
+    const zone = getZone(container);
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+
+    // The frame declares `borderStyle: dashed` for all four sides. A side that
+    // declares no width therefore does not render nothing — it renders the CSS
+    // initial `medium` (3px) in `currentColor` ($color12), which is a heavy
+    // dashed BOX around the picked files instead of the one hairline the
+    // divider contract asks for.
+    expect(borderWidthAtomPx(flist, "_btw-")).toBe(1);
+    for (const prefix of ["_bbw-", "_blw-", "_brw-"] as const) {
+      expect(borderWidthAtomPx(flist, prefix)).toBe(0);
+    }
+  });
+
   it("keeps compact a space-only dial — CTA stays 44 and remove stays nested 32 (LC-76)", async () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" compact />,

package/src/fields/FileUpload/index.tsx

@@ -170,6 +170,12 @@ const DropOverlayFrame = styled(YStack, {
 const UploadFileListFrame = styled(YStack, {
   width: "100%",
   borderTopWidth: 1,
+  // A side with a declared style and no declared width is NOT a side with no
+  // border: it takes the CSS initial `medium` (3px) in `currentColor`, which
+  // boxed the picked files in a heavy $color12 dash (MPO-124).
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  borderRightWidth: 0,
   borderStyle: "dashed",
   borderTopColor: formDropzoneColors.border,
 });