@multiplatform.one/forms 7.4.0 → 7.5.0

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

@@ -1,7 +1,9 @@
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+import { Theme } from "tamagui";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Calendar } from "./Calendar";
+import { CalendarDays, isSameDay, useCalendarData } from "./parts";
 
 vi.mock("@tamagui/lucide-icons-2", () => ({
   ChevronLeft: () => null,
@@ -25,6 +27,54 @@ function getEnabledDayButtons(root: ParentNode): HTMLButtonElement[] {
   });
 }
 
+function getDayButtons(root: ParentNode): HTMLButtonElement[] {
+  const allButtons = Array.from(
+    root.querySelectorAll('button, [role="button"]'),
+  ) as HTMLButtonElement[];
+  return allButtons.filter((btn) => /^\d{1,2}$/.test(btn.textContent?.trim() ?? ""));
+}
+
+/** Tamagui emits opacity as `_o-<value>` (see StarInk.native.spec). */
+function opacityOf(el: HTMLElement): number {
+  const fromClass = el.className.match(/(?:^|\s)_o-([\d.]+)(?:\s|$)/);
+  if (fromClass) return Number(fromClass[1]);
+  if (el.style.opacity !== "") return Number(el.style.opacity);
+  const computed = getComputedStyle(el).opacity;
+  return computed === "" ? 1 : Number(computed);
+}
+
+function dayCell(root: ParentNode, year: number, monthIndex: number, date: number) {
+  return root.querySelector(
+    `[data-calendar-day="${year}-${monthIndex}-${date}"]`,
+  ) as HTMLElement | null;
+}
+
+function JuneGrid({
+  minDate,
+  maxDate,
+  selectionCapped,
+  selected,
+  onSelect,
+}: {
+  minDate?: Date;
+  maxDate?: Date;
+  selectionCapped?: boolean;
+  selected?: Date[];
+  onSelect?: (day: Date) => void;
+}) {
+  const calendarData = useCalendarData(new Date(2024, 5, 15));
+  return (
+    <CalendarDays
+      calendarData={calendarData}
+      minDate={minDate}
+      maxDate={maxDate}
+      selectionCapped={selectionCapped}
+      isSelected={(day) => (selected ?? []).some((d) => isSameDay(d, day))}
+      onSelect={onSelect ?? (() => {})}
+    />
+  );
+}
+
 describe("Calendar", () => {
   it("renders tabs and switches modes", async () => {
     const onDatesChange = vi.fn();
@@ -93,13 +143,14 @@ describe("Calendar", () => {
   });
 
   it("day cells paint nestedControl size, not the page press floor", () => {
+    // LC-76: compact steps space only. Default medium is nestedControlPxMap.medium = 32.
     const result = renderWithProviders(
       <Calendar showTabs={false} mode="single" selectedDates={[new Date(2024, 0, 15)]} />,
     );
     const days = getEnabledDayButtons(result.container);
     expect(days.length).toBeGreaterThan(0);
-    expect(days[0].getAttribute("data-nested-px")).toBe("28");
-    expect(days.every((day) => day.getAttribute("data-nested-px") === "28")).toBe(true);
+    expect(days[0].getAttribute("data-nested-px")).toBe("32");
+    expect(days.every((day) => day.getAttribute("data-nested-px") === "32")).toBe(true);
   });
 
   // LC-46 PLATFORM-PROP-BOUNDARY spec arm: the calendar nav Buttons
@@ -126,3 +177,107 @@ describe("Calendar", () => {
     }
   });
 });
+
+// MPO-58: out-of-range / cap must look unavailable. Bento paints aria-disabled
+// cells identical to choosable ones; we do not adopt that. Adjacent-month
+// dim is 0.45 (parts.tsx day-cell idiom); unavailable dim is 0.5 (Today
+// button + disabled trigger Box in the same file). No 'N of N' footer —
+// the floating family has no count idiom (G0-clay R5).
+describe("Calendar day-cell unavailable treatment (MPO-58)", () => {
+  const minDate = new Date(2024, 5, 5);
+  const maxDate = new Date(2024, 6, 31);
+
+  (["light", "dark"] as const).forEach((scheme) => {
+    it(`out-of-range current-month day is aria-disabled and dimmed (${scheme})`, () => {
+      const onSelect = vi.fn();
+      const result = renderWithProviders(
+        <Theme name={scheme}>
+          <JuneGrid minDate={minDate} maxDate={maxDate} onSelect={onSelect} />
+        </Theme>,
+      );
+
+      const outOfRange = dayCell(result.container, 2024, 5, 3);
+      const available = dayCell(result.container, 2024, 5, 15);
+      expect(outOfRange).toBeTruthy();
+      expect(available).toBeTruthy();
+      expect(outOfRange?.getAttribute("aria-disabled")).toBe("true");
+      expect(available?.getAttribute("aria-disabled")).toBeFalsy();
+      expect(opacityOf(outOfRange!)).toBe(0.5);
+      expect(opacityOf(available!)).toBe(1);
+
+      const classBefore = outOfRange!.className;
+      fireEvent.mouseEnter(outOfRange!);
+      fireEvent.mouseOver(outOfRange!);
+      fireEvent.click(outOfRange!);
+      fireEvent.keyDown(outOfRange!, { key: "Enter" });
+      fireEvent.keyDown(outOfRange!, { key: " " });
+      expect(onSelect).not.toHaveBeenCalled();
+      expect(outOfRange!.className).toBe(classBefore);
+    });
+  });
+
+  it("adjacent-month dimming and out-of-range dimming are distinguishable", () => {
+    const result = renderWithProviders(<JuneGrid minDate={minDate} maxDate={maxDate} />);
+
+    const currentOutOfRange = dayCell(result.container, 2024, 5, 3);
+    const adjacentInRange = dayCell(result.container, 2024, 6, 2);
+    const adjacentOutOfRange = dayCell(result.container, 2024, 4, 28);
+    expect(currentOutOfRange).toBeTruthy();
+    expect(adjacentInRange).toBeTruthy();
+    expect(adjacentOutOfRange).toBeTruthy();
+
+    expect(currentOutOfRange?.getAttribute("aria-disabled")).toBe("true");
+    expect(adjacentInRange?.getAttribute("aria-disabled")).toBeFalsy();
+    expect(adjacentOutOfRange?.getAttribute("aria-disabled")).toBe("true");
+
+    expect(opacityOf(currentOutOfRange!)).toBe(0.5);
+    expect(opacityOf(adjacentInRange!)).toBe(0.45);
+    expect(opacityOf(adjacentOutOfRange!)).toBe(0.5);
+    expect(opacityOf(currentOutOfRange!)).not.toBe(opacityOf(adjacentInRange!));
+  });
+
+  it("at the multiple-mode limit, unselected cells change appearance", async () => {
+    const onDatesChange = vi.fn();
+    const result = renderWithProviders(
+      <Calendar mode="multiple" limit={1} showTabs={false} onDatesChange={onDatesChange} />,
+    );
+    await waitFor(() => {
+      expect(getEnabledDayButtons(result.container).length).toBeGreaterThan(1);
+    });
+
+    const first = getEnabledDayButtons(result.container)[0];
+    await act(async () => {
+      fireEvent.click(first);
+    });
+    await waitFor(() => {
+      expect(onDatesChange.mock.calls.at(-1)?.[0]).toHaveLength(1);
+    });
+
+    const picked = onDatesChange.mock.calls.at(-1)?.[0][0] as Date;
+    const pickedKey = `${picked.getFullYear()}-${picked.getMonth()}-${picked.getDate()}`;
+    const unselected = getDayButtons(result.container).filter(
+      (btn) => btn.getAttribute("data-calendar-day") !== pickedKey,
+    );
+    const selected = getDayButtons(result.container).filter(
+      (btn) => btn.getAttribute("data-calendar-day") === pickedKey,
+    );
+    expect(unselected.length).toBeGreaterThan(0);
+    expect(unselected.every((btn) => btn.getAttribute("aria-disabled") === "true")).toBe(true);
+    expect(unselected.every((btn) => opacityOf(btn) === 0.5)).toBe(true);
+    expect(selected.length).toBeGreaterThan(0);
+    expect(selected.every((btn) => btn.getAttribute("aria-disabled") !== "true")).toBe(true);
+    expect(result.container.textContent).not.toMatch(/\b\d+\s+of\s+\d+\b/);
+  });
+
+  it("draws no N-of-N footer on the calendar grid", () => {
+    const result = renderWithProviders(
+      <JuneGrid
+        minDate={minDate}
+        maxDate={maxDate}
+        selectionCapped
+        selected={[new Date(2024, 5, 15)]}
+      />,
+    );
+    expect(result.container.textContent).not.toMatch(/\b\d+\s+of\s+\d+\b/);
+  });
+});

package/src/fields/DatePicker/Calendar.tsx

@@ -68,6 +68,7 @@ interface CalendarDayGridProps {
   mode: CalendarMode;
   minDate?: Date;
   maxDate?: Date;
+  selectionCapped?: boolean;
 }
 
 function CalendarDayGrid({
@@ -77,12 +78,14 @@ function CalendarDayGrid({
   mode,
   minDate,
   maxDate,
+  selectionCapped,
 }: CalendarDayGridProps) {
   return (
     <CalendarDays
       calendarData={calendarData}
       minDate={minDate}
       maxDate={maxDate}
+      selectionCapped={selectionCapped}
       skipEmptyWeeks
       isSelected={(day) => {
         if (mode === "range") {
@@ -142,6 +145,7 @@ interface CalendarPanelProps {
   mode: CalendarMode;
   minDate?: Date;
   maxDate?: Date;
+  selectionCapped?: boolean;
   showPrev?: boolean;
   showNext?: boolean;
 }
@@ -155,6 +159,7 @@ function CalendarPanel({
   mode,
   minDate,
   maxDate,
+  selectionCapped,
   showPrev = true,
   showNext = true,
 }: CalendarPanelProps) {
@@ -195,6 +200,7 @@ function CalendarPanel({
           mode={mode}
           minDate={minDate}
           maxDate={maxDate}
+          selectionCapped={selectionCapped}
         />
       </CalendarPanelFrame>
     </CalendarViewSwitcher>
@@ -230,6 +236,7 @@ export function Calendar({
   );
 
   const { displayDate, setDisplayDate, navigateMonth } = useDateNavigation();
+  const selectionCapped = mode === "multiple" && selectedDates.length >= limit;
   // v5 `sm` = minWidth 640 (`gtSm` died with the v5 media map, MPO-13 C4).
   const { sm: fullWidthMode } = useMedia();
 
@@ -344,7 +351,7 @@ export function Calendar({
         flexDirection="row"
         {...knobProps.gap}
         {...knobProps.panelPadding}
-        {...knobProps.borderRadiusOuter}
+        {...knobProps.borderRadiusNested}
         borderWidth={knobProps.borderRadius.borderWidth || 1}
         borderColor={formCommonColors.divider}
       >
@@ -358,6 +365,7 @@ export function Calendar({
             mode={mode}
             minDate={minDate}
             maxDate={maxDate}
+            selectionCapped={selectionCapped}
           />
         )}
 
@@ -372,6 +380,7 @@ export function Calendar({
               mode={mode}
               minDate={minDate}
               maxDate={maxDate}
+              selectionCapped={selectionCapped}
               showNext={false}
             />
             <Separator vertical />
@@ -384,6 +393,7 @@ export function Calendar({
               mode={mode}
               minDate={minDate}
               maxDate={maxDate}
+              selectionCapped={selectionCapped}
               showPrev={false}
             />
           </>

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

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import type { ComponentProps } from "react";
@@ -253,3 +254,30 @@ export const DatetimePickerWithSeconds = {
 export const SkeletonState: Story = {
   args: { label: "Birth Date", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "2024-03-12" },
+      { id: "2", label: "Beta", value: "2024-11-20" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "DatePicker",
+        field: "datepicker",
+        fieldProps: { placeholder: "Pick a date" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

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

@@ -3,6 +3,7 @@ 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";
+import { getFieldHeight } from "../../shared/utils";
 
 vi.mock("react-native", () => ({
   Platform: {
@@ -180,4 +181,56 @@ describe("DateRangePicker", () => {
       expect(onChange).not.toHaveBeenCalled();
     });
   });
+
+  describe("design law", () => {
+    it("renders a skeleton at the control recipe height (LC-20)", async () => {
+      const DateRangePicker = await loadDateRangePicker();
+      const result = renderWithProviders(<DateRangePicker label="Loading" name="l" skeleton />);
+      expect(result.container.querySelector("input")).toBeNull();
+      const skeleton = result.container.querySelector("[data-daterange-skeleton]") as HTMLElement;
+      expect(skeleton).toBeTruthy();
+      expect(skeletonHeight(skeleton)).toBe(getFieldHeight("$4"));
+    });
+
+    it("rings the outer trigger box, never the inner field (LC-71)", async () => {
+      const DateRangePicker = await loadDateRangePicker();
+      const result = renderWithProviders(<DateRangePicker label="Range" name="range" />);
+      const input = result.container.querySelector("input");
+      expect(input?.className).toMatch(/mp-input-area/);
+      const box = result.container.querySelector(".mp-composite-ring");
+      expect(box).toBeTruthy();
+      expect(box?.contains(input)).toBe(true);
+    });
+
+    it("paints range stripes with semantic fill, not a named motion (LC-24)", async () => {
+      const DateRangePicker = await loadDateRangePicker();
+      const result = renderWithProviders(
+        <DateRangePicker
+          label="Range"
+          value={{ start: new Date(2026, 2, 5), end: new Date(2026, 2, 12) }}
+        />,
+      );
+      const trigger = result.container.querySelector('[data-testid="date-picker-trigger"]');
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        if (trigger) {
+          fireEvent.mouseDown(trigger);
+          fireEvent.click(trigger);
+        }
+      });
+      await waitFor(() => {
+        expect(document.querySelector("[data-range-stripe]")).toBeTruthy();
+      });
+      const stripe = document.querySelector("[data-range-stripe]") as HTMLElement;
+      expect(stripe.getAttribute("data-range-stripe")).toMatch(/in-range|range-start|range-end/);
+      expect(stripe.getAttribute("transition")).not.toBe("quick");
+    });
+  });
 });
+
+function skeletonHeight(el: HTMLElement): number {
+  const attr = el.getAttribute("height");
+  if (attr && /^\d+(\.\d+)?$/.test(attr)) return Number(attr);
+  if (el.style.height.endsWith("px")) return Number.parseFloat(el.style.height);
+  return Number.parseFloat(getComputedStyle(el).height) || 0;
+}

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

@@ -1,6 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
 import { Text, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
@@ -109,3 +111,42 @@ export const FormBound: Story = {
     return <FormExample />;
   },
 };
+
+type InTableRow = {
+  id: string;
+  label: string;
+  value: { start: Date | null; end: Date | null };
+};
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      {
+        id: "1",
+        label: "Alpha",
+        value: { start: new Date("2024-11-04"), end: new Date("2024-11-15") },
+      },
+      {
+        id: "2",
+        label: "Beta",
+        value: { start: new Date("2024-12-02"), end: new Date("2024-12-13") },
+      },
+      { id: "3", label: "Gamma", value: { start: null, end: null } },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "DateRangePicker",
+        field: "daterangepicker",
+        fieldProps: { placeholder: "Start date – End date" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/DatePicker/DateRangePicker.tsx

@@ -1,13 +1,14 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { formatAbsoluteDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { type Popover, Separator, View, useMedia, useProps } from "tamagui";
+import { type Popover, type SizeTokens, Separator, View, useMedia, useProps } from "tamagui";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import {
   getFieldError,
+  getFieldHeight,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
@@ -110,6 +111,7 @@ function RangeDayGrid({
   minDate,
   maxDate,
 }: RangeDayGridProps) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <CalendarDays
       calendarData={calendarData}
@@ -134,7 +136,8 @@ function RangeDayGrid({
         }
         return (
           <View
-            transition="quick"
+            {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+            data-range-stripe={rangeStatus}
             position="absolute"
             height="100%"
             zIndex={0}
@@ -376,6 +379,8 @@ export function DateRangePicker<
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const visualHeight = getFieldHeight(resolvedSize);
 
   const initialRange = (valueProp ?? defaultValue) as DateRange | null | undefined;
   const [open, setOpen] = useState(false);
@@ -532,6 +537,8 @@ export function DateRangePicker<
             aria-invalid={hasError || undefined}
           />
         }
+        clearValue={formatRange(rangeStart, rangeEnd)}
+        onClear={() => handleClear(fieldChange)}
       >
         {calendarContent(fieldChange)}
       </DatePickerPopoverShell>
@@ -542,7 +549,14 @@ export function DateRangePicker<
   if (skeleton) {
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+        <InputParts size={resolvedSize}>
+          <Skeleton
+            variant="rounded"
+            width="100%"
+            height={visualHeight}
+            data-daterange-skeleton=""
+          />
+        </InputParts>
       </FieldLayout>
     );
   }

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

@@ -61,6 +61,23 @@ describe("DatetimePicker", () => {
       expect(input).not.toBeNull();
     });
 
+    it("empty trigger shows placeholder and a calendar glyph, not a clear affordance", () => {
+      const result = renderWithProviders(
+        <DatetimePicker label="Appointment" name="appt" placeholder="Choose a date and time" />,
+      );
+      const input = result.container.querySelector("input");
+      expect(input?.getAttribute("placeholder")).toBe("Choose a date and time");
+      expect(result.container.querySelector('[data-testid="date-picker-glyph"]')).toBeTruthy();
+      expect(result.container.querySelector('[data-testid="date-picker-clear"]')).toBeNull();
+    });
+
+    it("shows clear only when a datetime is set", () => {
+      const result = renderWithProviders(
+        <DatetimePicker label="Appointment" name="appt" value={new Date(2026, 2, 5, 14, 30)} />,
+      );
+      expect(result.container.querySelector('[data-testid="date-picker-clear"]')).toBeTruthy();
+    });
+
     // SB-KS-04: the trigger carried no id, so FieldLayout's label pointed at
     // nothing — one unidentified control and one dangling label per story.
     it("the trigger carries the field id the sibling label resolves to", () => {

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

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -14,7 +15,7 @@ const meta: Meta<typeof DatetimePicker> = {
     docs: {
       description: {
         component:
-          "Combined date + time picker with Date/Time tabs, 12h/24h formats, minute stepping, optional seconds, and a standalone controlled value API.",
+          "Combined date + time picker. Date stays a calendar grid; time uses iOS hour/minute/AM-PM wheels with a fixed centre band.",
       },
     },
   },
@@ -146,3 +147,30 @@ export const FormBound: Story = {
     return <FormExample />;
   },
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "2024-11-20T14:30:00Z" },
+      { id: "2", label: "Beta", value: "2024-06-15T09:00:00Z" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "DatetimePicker",
+        field: "datetimepicker",
+        fieldProps: { placeholder: "Pick date and time" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};