@multiplatform.one/frappe-ui 7.66.0 → 7.67.0

package/src/fields/Date/nativeIsCatalog.spec.tsx

@@ -0,0 +1,26 @@
+/**
+ * The Frappe `Date` field has no native fork (FZ-8000, LC-175): iOS and
+ * Android resolve the same catalog field the web does, and forms'
+ * `DatePicker`, `DatetimePicker` and `TimePicker` open the OS sheet
+ * themselves (`OsDateTimeSheet`, with the catalog overlay when the optional
+ * `@react-native-community/datetimepicker` peer is absent, FZ-7357).
+ */
+
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import * as catalog from "./catalog";
+import * as entry from "./index";
+
+const here = (file: string) => fileURLToPath(new URL(file, import.meta.url));
+
+describe("native Date field", () => {
+  it("is not forked: no index.native.tsx sits beside the catalog field", () => {
+    expect(existsSync(here("./index.tsx"))).toBe(true);
+    expect(existsSync(here("./index.native.tsx"))).toBe(false);
+  });
+
+  it("is the catalog field on every platform", () => {
+    expect(entry.Date).toBe(catalog.Date);
+  });
+});

package/src/fields/Date/typeParity.spec.tsx

@@ -5,16 +5,12 @@
  * The web field used to render ONE date-only calendar whatever the type
  * (SB-M-617): a `Datetime` dropped its time component from the picker, and a
  * `Time` rendered EMPTY, because the calendar adopts its value through
- * `coerceToDate` and `new Date("09:00")` is an Invalid Date. Native, meanwhile,
- * had just been activated with all three implemented. These cases pin the
- * three web controls — display, edit, and the exact wire string — and then
- * drive the SAME pick through both platform halves and assert the emitted
- * strings are byte-identical, which is the only reason one `wire.ts` body is
- * worth sharing.
- *
- * The suite runs on web, so the native half's two native-only edges are mocked
- * exactly as `nativePresentation.spec.tsx` mocks them: the OS picker (recorded
- * rather than rendered) and the platform flags. The web half imports neither.
+ * `coerceToDate` and `new Date("09:00")` is an Invalid Date. These cases pin
+ * the three web controls — display, edit, and the exact wire string — and
+ * then assert the moment an OS sheet commits on native serializes to the same
+ * bytes. Native has no fork of this field (FZ-8000): the same catalog field
+ * runs there, forms' pickers commit a `Date` from `OsDateTimeSheet`, and the
+ * catalog writes it through the one `wire.ts` body.
  */
 
 import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
@@ -23,38 +19,6 @@ import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
 // import transforms the whole fields graph.
 vi.setConfig({ testTimeout: 240_000 });
 
-const mockState = vi.hoisted(() => ({
-  isIos: true,
-  isAndroid: false,
-  /** Props of every mounted OS picker, newest last. */
-  picks: [] as Record<string, unknown>[],
-}));
-
-vi.mock("./dateTimePickerLoader", () => ({
-  loadDateTimePicker: () => (props: Record<string, unknown>) => {
-    mockState.picks.push(props);
-    return null;
-  },
-}));
-
-vi.mock("@multiplatform.one/platform", async (importOriginal) => {
-  const actual = (await importOriginal()) as Record<string, unknown>;
-  const real = actual.platform as Record<string, unknown>;
-  return {
-    ...actual,
-    platform: new Proxy(
-      {},
-      {
-        get(_target, prop) {
-          if (prop === "isIos") return mockState.isIos;
-          if (prop === "isAndroid") return mockState.isAndroid;
-          return real[prop as string];
-        },
-      },
-    ),
-  };
-});
-
 // Mock react-native-reanimated to prevent ESM module resolution failures
 // (same shim as tests/fieldRenderers.spec.tsx).
 vi.mock("react-native-reanimated", () => ({
@@ -95,9 +59,9 @@ vi.mock("react-native-reanimated", () => ({
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
 import React from "react";
+import { toFrappeDateValue } from "./wire";
 
 const loadWebDateField = async () => (await import(".")).Date;
-const loadNativeDateField = async () => (await import("./index.native")).Date;
 
 /** Intl puts a narrow no-break space before the meridiem; no test should care. */
 const norm = (value: string) => value.replace(/\s+/gu, " ").trim();
@@ -180,16 +144,13 @@ async function selectPeriod(period: "AM" | "PM") {
 // (110-155s quiet, past 240s under load), and charging it to an assertion made
 // whichever case ran first time out.
 beforeAll(async () => {
-  await Promise.all([loadWebDateField(), loadNativeDateField()]);
+  await loadWebDateField();
 }, 900_000);
 
 beforeEach(() => {
   // Both halves portal their surfaces, so a previous case's chrome would
   // otherwise still be in the document when the next one queries it.
   cleanup();
-  mockState.picks.length = 0;
-  mockState.isIos = true;
-  mockState.isAndroid = false;
 });
 
 // ---------------------------------------------------------------------------
@@ -356,41 +317,14 @@ describe("web Date field — type=datetime renders date AND time", () => {
 // Cross-half parity — the reason one `wire.ts` body is shared
 // ---------------------------------------------------------------------------
 
-/** Drive the native half through a pick and return the single emitted string. */
-async function nativePick(
-  type: "date" | "datetime" | "time",
-  value: string,
-  triggerText: string,
-  steps: Date[],
-): Promise<string> {
-  const DateField = await loadNativeDateField();
-  const onChange = vi.fn();
-  const result = renderWithProviders(
-    <DateField label="Field" value={value} onChange={onChange} type={type} />,
-  );
-  await pressText(result.container, triggerText);
-  await waitFor(() => expect(mockState.picks.length).toBeGreaterThan(0), { timeout: 30_000 });
-
-  for (const [index, step] of steps.entries()) {
-    const onPickerChange = mockState.picks[mockState.picks.length - 1].onChange as (
-      event: unknown,
-      date?: Date,
-    ) => void;
-    await act(async () => {
-      onPickerChange({ type: "set" }, step);
-    });
-    // A datetime runs calendar → Next → wheel; the sheet's Next is the seam.
-    if (index === 0 && steps.length > 1) {
-      await pressText(document.body, "Next");
-      await waitFor(() => expect(mockState.picks[mockState.picks.length - 1].mode).toBe("time"), {
-        timeout: 30_000,
-      });
-    }
-  }
-  await pressText(document.body, "Done");
-
-  expect(onChange).toHaveBeenCalledTimes(1);
-  return onChange.mock.calls[0][0] as string;
+/**
+ * What the catalog writes for the moment an OS sheet commits on native: forms'
+ * native `DatePicker` and `DatetimePicker` hand the field a `Date`, and its
+ * `TimePicker` an `HH:mm:ss` string, through the same `onChange` the web
+ * pickers use.
+ */
+function nativeWrite(type: "date" | "datetime" | "time", committed: Date): string {
+  return toFrappeDateValue(committed, type);
 }
 
 /** Drive the web half through the equivalent pick and return the last string. */
@@ -419,9 +353,7 @@ describe("web and native persist byte-identical wire strings", () => {
         fireEvent.click(dayCell(15)!);
       });
     });
-    cleanup();
-    mockState.picks.length = 0;
-    const native = await nativePick("date", "2026-03-05", "Mar 5, 2026", [new Date(2026, 2, 15)]);
+    const native = nativeWrite("date", new Date(2026, 2, 15));
 
     expect({ web, native }).toEqual({ web: "2026-03-15", native: "2026-03-15" });
     expect(web).toBe(native);
@@ -431,11 +363,7 @@ describe("web and native persist byte-identical wire strings", () => {
     const web = await webPick("time", "09:00:00", async () => {
       await selectPeriod("PM");
     });
-    cleanup();
-    mockState.picks.length = 0;
-    const native = await nativePick("time", "09:00:00", "9:00 AM", [
-      new Date(2026, 2, 5, 21, 0, 0),
-    ]);
+    const native = nativeWrite("time", new Date(2026, 2, 5, 21, 0, 0));
 
     expect({ web, native }).toEqual({ web: "21:00:00", native: "21:00:00" });
     expect(web).toBe(native);
@@ -448,14 +376,8 @@ describe("web and native persist byte-identical wire strings", () => {
         fireEvent.click(dayCell(20)!);
       });
     });
-    cleanup();
-    mockState.picks.length = 0;
-    // The native two-step: the calendar commits the day (dropping the clock,
-    // which is why the wheel step re-supplies it), then the wheel commits it.
-    const native = await nativePick("datetime", "2026-03-05 14:30:00", "Mar 5, 2026, 2:30 PM", [
-      new Date(2026, 2, 20),
-      new Date(2026, 0, 1, 14, 30),
-    ]);
+    // The OS sheet's calendar-then-wheel commits one moment from both halves.
+    const native = nativeWrite("datetime", new Date(2026, 2, 20, 14, 30));
 
     expect({ web, native }).toEqual({
       web: "2026-03-20 14:30:00",

package/src/frappeRemainder.designLaw.spec.ts

@@ -84,13 +84,14 @@ describe("Frappe remainder wrappers — design-law 100%", () => {
     expect(stories).toMatch(/from ["']\.\/ChartCard["']/);
   });
 
-  it("FrappeImageView uses catalog Card, controlIcon icons, and no media pip (R11/R12)", () => {
+  it("FrappeImageView is the MPO ImageGrid photos grid, controlIcon icons, and no media pip (R11/R12, LC-264)", () => {
     const source = read("FrappeImageView.tsx");
-    expect(source).toContain("Card");
+    expect(source).toMatch(/ImageGrid[\s\S]*from "@multiplatform.one\/components"/);
+    expect(source).toContain('variant="photos"');
     expect(source).toContain("controlIcon");
     expect(source).not.toMatch(/size=\{48\}/);
     expect(source).not.toContain("<Tint");
-    expect(source).toContain("No status pip");
+    expect(source).toMatch(/no pip/i);
   });
 
   it("FrappeTreeView uses label fragment and controlIcon, not 12/14px", () => {
@@ -156,10 +157,10 @@ describe("Frappe remainder wrappers — design-law 100%", () => {
     expect(list).toContain("formCommonColors.muted");
   });
 
-  it("native Date trigger/actions are house Button", () => {
-    const source = read("fields/Date/index.native.tsx");
-    expect(source).toMatch(/Button[\s\S]*from "@multiplatform.one\/forms"/);
-    expect(source).not.toMatch(/Button.*from "tamagui"/);
+  it("native Date is the catalog field on the forms pickers, not a fork (LC-175)", () => {
+    const source = read("fields/Date/catalog.tsx");
+    expect(source).toMatch(/DatePicker[\s\S]*from "@multiplatform.one\/forms"/);
+    expect(read("fields/Date/index.tsx")).toContain('export { Date } from "./catalog"');
   });
 
   it("fieldRegistry TextEditor fallback is Skeleton; SmallText/LongText use textAreaProps", () => {

package/src/insights/InsightsFacetTags.tsx

@@ -1,97 +1,7 @@
-import { Tags, Text, XStack, isWeb } from "@multiplatform.one/components";
-import {
-  ensureFocusVisibleRing,
-  ensureKeyboardModalityTracking,
-  keyboardFocusRingProps,
-  useResolvedKnobs,
-  wasKeyboardFocus,
-} from "@multiplatform.one/theme";
-import { useState } from "react";
+import { Chip, Tags } from "@multiplatform.one/components";
 import { useTranslation } from "react-i18next";
 import type { InsightsCount } from "./insightsData";
 
-const chipFocusRing = ensureFocusVisibleRing(keyboardFocusRingProps);
-
-interface FacetTagChipProps {
-  value: string;
-  count: number;
-  label: string;
-  tint?: string;
-  onPress: () => void;
-  testID?: string;
-}
-
-/**
- * A pressable facet value painted from its tint's ramp (DF-04), at the
- * compact nestedControl height with the press target restored by hitSlop
- * (LC-54, LC-73); the keyboard ring rides the whole chip (LC-71).
- */
-function FacetTagChip({ value, count, label, tint = "gray", onPress, testID }: FacetTagChipProps) {
-  const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
-  const nested = knobProps.nestedControl;
-  const [kbFocus, setKbFocus] = useState(false);
-  if (isWeb) ensureKeyboardModalityTracking();
-  return (
-    <XStack
-      {...knobProps.borderRadius}
-      role="button"
-      tabIndex={0}
-      aria-label={t("{{value}}, {{count}} records", { value: label, count })}
-      cursor="pointer"
-      alignItems="center"
-      gap="$1.5"
-      paddingHorizontal="$2"
-      minHeight={nested.px}
-      height={nested.px}
-      hitSlop={nested.hitSlop}
-      data-nested-px={nested.px}
-      backgroundColor={`$${tint}3` as never}
-      hoverStyle={{ backgroundColor: `$${tint}4` as never }}
-      pressStyle={{ backgroundColor: `$${tint}5` as never }}
-      outlineWidth={0}
-      focusStyle={{ outlineWidth: 0 }}
-      focusVisibleStyle={chipFocusRing}
-      {...(isWeb
-        ? {
-            onFocus: () => {
-              if (wasKeyboardFocus()) setKbFocus(true);
-            },
-            onBlur: () => setKbFocus(false),
-            onKeyDown: (event: { key?: string; preventDefault?: () => void }) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault?.();
-                onPress();
-              }
-            },
-          }
-        : undefined)}
-      {...(kbFocus ? keyboardFocusRingProps : undefined)}
-      onPress={onPress}
-      testID={testID ? `${testID}-${value}` : undefined}
-    >
-      <XStack
-        width="$1"
-        height="$1"
-        borderRadius={1000}
-        backgroundColor={`$${tint}9` as never}
-        flexShrink={0}
-      />
-      <Text
-        {...knobProps.label}
-        color={`$${tint}11` as never}
-        textTransform="capitalize"
-        userSelect="none"
-      >
-        {label}
-      </Text>
-      <Text {...knobProps.label} color={`$${tint}11` as never} opacity={0.7} userSelect="none">
-        {count}
-      </Text>
-    </XStack>
-  );
-}
-
 export interface InsightsFacetTagsProps {
   distribution: readonly InsightsCount[];
   label: (value: string) => string;
@@ -100,7 +10,10 @@ export interface InsightsFacetTagsProps {
   testID?: string;
 }
 
-/** A facet's values with their record counts, each opening the list narrowed to it. */
+/**
+ * A facet's values with their record counts as MPO `Chip`s painted from each
+ * value's ramp (DF-04, LC-175), each opening the list narrowed to it.
+ */
 export function InsightsFacetTags({
   distribution,
   label,
@@ -115,16 +28,22 @@ export function InsightsFacetTags({
       enableAdd={false}
       enableRemove={false}
       labels={{ noTags: t("No values yet") }}
-      renderTag={(tag) => (
-        <FacetTagChip
-          value={tag.id}
-          count={distribution.find((entry) => entry.value === tag.id)?.count ?? 0}
-          label={tag.label}
-          tint={tint?.(tag.id)}
-          onPress={() => onSelect(tag.id)}
-          testID={testID}
-        />
-      )}
+      renderTag={(tag) => {
+        const count = distribution.find((entry) => entry.value === tag.id)?.count ?? 0;
+        const hue = tint?.(tag.id) ?? "gray";
+        return (
+          <Chip
+            color={hue}
+            swatch={`$${hue}9` as never}
+            count={count}
+            aria-label={t("{{value}}, {{count}} records", { value: tag.label, count })}
+            onPress={() => onSelect(tag.id)}
+            testID={testID ? `${testID}-${tag.id}` : undefined}
+          >
+            {tag.label}
+          </Chip>
+        );
+      }}
     />
   );
 }

package/src/list/FacetBadge.tsx

@@ -1,44 +1,22 @@
-import { Text, XStack } from "@multiplatform.one/components";
-import { hairlineWidth, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Chip, type ChipSize } from "@multiplatform.one/components";
 import type { SizeTokens } from "tamagui";
-import { facetBadgeSteps } from "./facetBadgeSteps";
 
 export interface FacetBadgeProps {
   label: string;
   /** Theme ramp (`"green"`) painting the badge (LC-147). */
   tint?: string;
-  /** Size token (Tamagui's own `size`); below `$true` the badge draws a step smaller. */
+  /** Size token (Tamagui's own `size`); omitted, the chip takes the ambient size. */
   size?: SizeTokens;
 }
 
 /**
- * One facet value as a static badge at the ambient size token, the tint's
- * step-4 fill, step-7 border and step-12 text (DF-04, AA in both schemes).
+ * One facet value as a static MPO `Chip` tinted from its ramp: the ramp's
+ * step-4 fill and step-12 ink, AA in both schemes (DF-04, LC-175).
  */
 export function FacetBadge({ label, tint = "gray", size }: FacetBadgeProps) {
-  const { knobProps } = useResolvedKnobs({ size });
-  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   return (
-    <XStack
-      {...knobProps.borderRadius}
-      paddingHorizontal={small ? "$1.5" : "$2"}
-      paddingVertical={small ? "$0.5" : "$1"}
-      backgroundColor={`$${tint}${facetBadgeSteps.fill}` as never}
-      borderColor={`$${tint}${facetBadgeSteps.border}` as never}
-      borderWidth={hairlineWidth}
-      alignItems="center"
-    >
-      <Text
-        {...knobProps.label}
-        {...knobProps.body}
-        textTransform="capitalize"
-        fontWeight="700"
-        color={`$${tint}${facetBadgeSteps.ink}` as never}
-        {...(small ? { fontSize: "$1" as const } : null)}
-        letterSpacing={0.3}
-      >
-        {label}
-      </Text>
-    </XStack>
+    <Chip color={tint} size={size as ChipSize | undefined}>
+      {label}
+    </Chip>
   );
 }

package/src/list/FacetRail.spec.tsx

@@ -1,11 +1,11 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { chipFrameGeometry, chipTextSize } from "@multiplatform.one/components";
 import {
   applyThemeScale,
   createDefaultThemeConfig,
   DEFAULT_SCALE_ID,
   densePreset,
   Surface,
-  sizeRecipeForToken,
   sizeKeyBelow,
 } from "@multiplatform.one/theme";
 import { cleanup, fireEvent } from "@testing-library/react";
@@ -22,26 +22,25 @@ const options = [
   { value: "fire", label: "Fire", count: 2 },
 ];
 
-describe("FacetRail chip recipes", () => {
+describe("FacetRail chips are MPO Chips (LC-175)", () => {
   for (const scaleId of [DEFAULT_SCALE_ID, "dense"]) {
     for (const size of ["$true", "$3", "$5"] as const) {
-      it(`${scaleId} at ${size} paints one full step below its controls`, () => {
+      it(`${scaleId} at ${size} paints the MPO chip one full step below its controls`, () => {
         applyThemeScale(config.scales![scaleId]);
         const token = sizeKeyBelow(size);
-        const recipe = sizeRecipeForToken(token, { family: "chip" });
-        const count = sizeRecipeForToken(sizeKeyBelow(token), { family: "chip" });
+        const geometry = chipFrameGeometry(token);
+        const font = chipTextSize(token as "$2");
         const result = renderWithProviders(
           <Surface size={size}>
             <FacetRail label="Type" value="" options={options} onChange={() => {}} />
           </Surface>,
         );
         const frame = result.getByRole("radio", { name: "Fire 2" });
+        expect(frame.hasAttribute("data-chip")).toBe(true);
         const style = getComputedStyle(frame);
-        expect(style.height).toBe(`${recipe.height}px`);
-        expect(style.paddingLeft).toBe(`${recipe.paddingHorizontal}px`);
-        expect(style.gap).toBe(`${recipe.gap}px`);
-        expect(getComputedStyle(result.getByText("Fire")).fontSize).toBe(`${recipe.fontSize}px`);
-        expect(getComputedStyle(result.getByText("2")).fontSize).toBe(`${count.fontSize}px`);
+        expect(style.paddingLeft).toBe(`${geometry.paddingHorizontal}px`);
+        expect(getComputedStyle(result.getByText("Fire")).fontSize).toBe(`${font}px`);
+        expect(getComputedStyle(result.getByText("2")).fontSize).toBe(`${font}px`);
       });
     }
   }
@@ -53,6 +52,8 @@ describe("FacetRail chip recipes", () => {
     );
     const fire = result.getByRole("radio", { name: "Fire 2" });
     expect(fire.getAttribute("aria-checked")).toBe("true");
+    expect(fire.getAttribute("tabindex")).toBe("0");
+    expect(result.getByRole("radio", { name: "All 6" }).getAttribute("tabindex")).toBe("-1");
     fireEvent.click(fire);
     expect(onChange).toHaveBeenLastCalledWith("");
     fireEvent.keyDown(fire, { key: "ArrowLeft" });