@multiplatform.one/table 7.8.0 → 7.11.0

package/src/components/DataTable/footerLayout.spec.tsx

@@ -0,0 +1,250 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+// Happy DOM has no viewport measurements. Keep the actual virtualizer and row renderer.
+vi.mock("@tanstack/react-virtual", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
+  return {
+    ...actual,
+    useVirtualizer: (options: Parameters<typeof actual.useVirtualizer>[0]) =>
+      actual.useVirtualizer({
+        ...options,
+        initialRect: { width: 800, height: 240 },
+        observeElementRect: (_instance, callback) => {
+          callback({ width: 800, height: 240 });
+          return () => {};
+        },
+        observeElementOffset: (_instance, callback) => {
+          callback(0, false);
+          return () => {};
+        },
+        scrollToFn: () => {},
+      }),
+  };
+});
+
+const data = [{ id: "1", account: "Account 1", balance: "10.00" }];
+const columns: DataTableColumn<(typeof data)[number]>[] = [
+  { accessorKey: "account", header: "Account", size: 320, footer: "Totals" },
+  { accessorKey: "balance", header: "Balance", size: 80, footer: "10.00" },
+];
+const allAuxiliaries = {
+  enableRowSelection: true,
+  showRowNumbers: true,
+  enableRowExpansion: true,
+  showDeleteRow: true,
+};
+
+function renderTable(props = {}, size: "small" | "medium" | "large" = "medium") {
+  return renderWithProviders(
+    <Preset overrides={{ size }}>
+      <DataTable
+        data={data}
+        columns={columns}
+        layout="table"
+        columnLayout="scroll"
+        enablePagination={false}
+        {...props}
+      />
+    </Preset>,
+  );
+}
+
+function cells(row: Element): HTMLElement[] {
+  return [...row.children].filter((element) =>
+    ["cell", "columnheader"].includes(element.getAttribute("role") ?? ""),
+  ) as HTMLElement[];
+}
+
+function width(cell: HTMLElement): number {
+  return Number.parseFloat(
+    cell.style.width || /(?:^| )_w-([\d.]+)px(?: |$)/.exec(cell.className)?.[1] || "NaN",
+  );
+}
+
+function rows(container: HTMLElement) {
+  const header = container.querySelector('thead [role="row"]')!;
+  const body = container.querySelector('[aria-label="Row 1"]')!;
+  const footer = container.querySelector('tfoot [role="row"]')!;
+  expect(header).not.toBeNull();
+  expect(body).not.toBeNull();
+  expect(footer).not.toBeNull();
+  return { header: cells(header), body: cells(body), footer: cells(footer) };
+}
+
+function expectPinned(cell: HTMLElement, side: "start" | "end", offset: number) {
+  expect(cell.style.position).toBe("sticky");
+  expect(cell.style[side === "start" ? "insetInlineStart" : "insetInlineEnd"]).toBe(`${offset}px`);
+  expect(cell.style.zIndex).toBe("2");
+  expect(cell.style.backgroundColor).toBe("var(--color2)");
+}
+
+let previousDirection: string | null;
+beforeEach(() => {
+  previousDirection = document.documentElement.getAttribute("dir");
+});
+afterEach(() => {
+  if (previousDirection === null) document.documentElement.removeAttribute("dir");
+  else document.documentElement.setAttribute("dir", previousDirection);
+});
+
+describe.each(["ltr", "rtl"])("footer layout in %s", (direction) => {
+  beforeEach(() => document.documentElement.setAttribute("dir", direction));
+
+  it.each([
+    { name: "no auxiliaries", props: {}, leading: 0, trailing: 0 },
+    { name: "selection", props: { enableRowSelection: true }, leading: 1, trailing: 0 },
+    { name: "row numbers", props: { showRowNumbers: true }, leading: 1, trailing: 0 },
+    { name: "expansion", props: { enableRowExpansion: true }, leading: 1, trailing: 0 },
+    { name: "delete", props: { showDeleteRow: true }, leading: 0, trailing: 1 },
+    { name: "all auxiliaries", props: allAuxiliaries, leading: 3, trailing: 1 },
+    {
+      name: "read-only auxiliaries",
+      props: { ...allAuxiliaries, readOnly: true },
+      leading: 3,
+      trailing: 0,
+    },
+    {
+      name: "read-only delete suppressed",
+      props: { showDeleteRow: true, readOnly: true },
+      leading: 0,
+      trailing: 0,
+    },
+    {
+      name: "compact auxiliaries",
+      props: { ...allAuxiliaries, compact: true },
+      leading: 3,
+      trailing: 1,
+    },
+  ])("matches resolved header/body slots with $name", ({ props, leading, trailing }) => {
+    const { container } = renderTable(props);
+    const row = rows(container);
+    const headerWidths = row.header.map(width);
+    expect(row.header).toHaveLength(leading + 2 + trailing);
+    expect(headerWidths.every((value) => Number.isFinite(value) && value > 0)).toBe(true);
+    expect(headerWidths.slice(leading, leading + 2)).toEqual([320, 80]);
+    expect(row.body.map(width)).toEqual(headerWidths);
+    expect(row.footer.map(width)).toEqual(headerWidths);
+    expect(row.footer[leading]).toHaveTextContent("Totals");
+    expect(row.footer[leading + 1]).toHaveTextContent("10.00");
+    const auxiliaryCells = [...row.footer.slice(0, leading), ...row.footer.slice(leading + 2)];
+    for (const cell of auxiliaryCells) {
+      expect(cell.textContent).toBe("");
+      expect(cell.tabIndex).toBe(-1);
+      expect(
+        cell.querySelector('button, input, [role="button"], [role="checkbox"], [tabindex]'),
+      ).toBeNull();
+    }
+  });
+
+  it.each(["left", "right"] as const)(
+    "resolves pinned %s footer paint like header/body",
+    async (side) => {
+      const utils = renderTable({ enableColumnPinning: true });
+      fireEvent.click(utils.getByLabelText("Pin Account column left"));
+      if (side === "right") fireEvent.click(utils.getByLabelText("Pin Account column right"));
+      await waitFor(() =>
+        expect(
+          (utils.container.querySelector("#account-header") as HTMLElement).style.position,
+        ).toBe("sticky"),
+      );
+      const row = rows(utils.container);
+      const index = row.header.findIndex((cell) => cell.id === "account-header");
+      const logicalSide = side === "left" ? "start" : "end";
+      expectPinned(row.header[index], logicalSide, 0);
+      expectPinned(row.body[index], logicalSide, 0);
+      expectPinned(row.footer[index], logicalSide, 0);
+      expect(row.footer[1 - index].style.position).not.toBe("sticky");
+    },
+  );
+
+  it("follows resolved auxiliary widths at small and large preset sizes", () => {
+    const widthsBySize = ["small", "large"].map((size) => {
+      const utils = renderTable(allAuxiliaries, size as "small" | "large");
+      const row = rows(utils.container);
+      const headerWidths = row.header.map(width);
+      expect(headerWidths).toHaveLength(6);
+      expect(headerWidths.slice(3, 5)).toEqual([320, 80]);
+      expect(row.body.map(width)).toEqual(headerWidths);
+      expect(row.footer.map(width)).toEqual(headerWidths);
+      utils.unmount();
+      return headerWidths;
+    });
+    for (const index of [0, 1, 2, 5]) {
+      expect(widthsBySize[0][index]).toBeLessThan(widthsBySize[1][index]);
+    }
+  });
+
+  it.each([false, true])(
+    "reserves auxiliary flow around both pin sides, readOnly=%s",
+    async (readOnly) => {
+      const utils = renderTable({ ...allAuxiliaries, readOnly, enableColumnPinning: true });
+      fireEvent.click(utils.getByLabelText("Pin Account column left"));
+      fireEvent.click(utils.getByLabelText("Pin Balance column left"));
+      fireEvent.click(utils.getByLabelText("Pin Balance column right"));
+      await waitFor(() => expect(rows(utils.container).header[3].style.position).toBe("sticky"));
+      const row = rows(utils.container);
+      const headerWidths = row.header.map(width);
+      const leadingWidth = headerWidths.slice(0, 3).reduce((sum, value) => sum + value, 0);
+      const trailingWidth = readOnly ? 0 : headerWidths[5];
+      expect(leadingWidth).toBeGreaterThan(0);
+      expect(row.body.map(width)).toEqual(headerWidths);
+      expect(row.footer.map(width)).toEqual(headerWidths);
+      for (const section of [row.header, row.body, row.footer]) {
+        expectPinned(section[3], "start", leadingWidth);
+        expectPinned(section[4], "end", trailingWidth);
+      }
+    },
+  );
+
+  it("keeps actual virtual rows and auxiliary footer slots aligned after pinned resize", async () => {
+    const utils = renderWithProviders(
+      <DataTable
+        data={[
+          { id: "1", rank: 1, label: "Record 1" },
+          { id: "2", rank: 2, label: "Record 2" },
+        ]}
+        columns={[
+          { accessorKey: "rank", header: "Rank", size: 48, minSize: 32, maxSize: 64, footer: "2" },
+          { accessorKey: "label", header: "Label", size: 320, footer: "Total" },
+        ]}
+        layout="table"
+        columnLayout="scroll"
+        enableColumnResizing
+        enableColumnPinning
+        enableVirtualization
+        virtualizationHeight={240}
+        enablePagination={false}
+        {...allAuxiliaries}
+      />,
+    );
+    const virtualRows = () =>
+      utils.container.querySelectorAll('tbody[role="presentation"] [role="rowgroup"] [role="row"]');
+    await waitFor(() => expect(virtualRows()).toHaveLength(2));
+    fireEvent.click(utils.getByLabelText("Pin Rank column left"));
+    fireEvent.click(utils.getByLabelText("Pin Label column left"));
+    const header = () => cells(utils.container.querySelector('thead [role="row"]')!);
+    const leadingWidth = header()
+      .slice(0, 3)
+      .reduce((sum, cell) => sum + width(cell), 0);
+    expect(width(header()[3])).toBe(48);
+    expectPinned(header()[4], "start", leadingWidth + 48);
+    const handle = utils.getByRole("separator", { name: "Resize Rank column" });
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 130 });
+    fireEvent.mouseUp(document, { clientX: 130 });
+    expect(width(header()[3])).toBe(64);
+    expectPinned(header()[4], "start", leadingWidth + 64);
+    const footer = cells(utils.container.querySelector('tfoot [role="row"]')!);
+    expect(virtualRows()).toHaveLength(2);
+    for (const section of [...virtualRows()].map(cells).concat([footer])) {
+      expect(section.map(width)).toEqual(header().map(width));
+      expectPinned(section[3], "start", leadingWidth);
+      expectPinned(section[4], "start", leadingWidth + 64);
+    }
+  });
+});

package/src/components/DataTable/index.native.tsx

@@ -17,12 +17,12 @@ import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { AsyncBoundary, EmptyState, useDirection } from "@multiplatform.one/components";
 import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
-import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
 import { ScrollView, Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
-import type { DataTableColumn, DataTableField } from "../../types";
+import type { DataTableColumn, DataTableField, SelectAllScope } from "../../types";
 import { DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
 import { withInterp } from "../../utils/withInterp";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
@@ -38,6 +38,7 @@ import { DataTableCell } from "../DataTableCell";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
 import { DataTableDocumentList } from "./DataTableDocumentList";
+import { DataTableMobileCards } from "./DataTableMobileCards";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 import { DataTableStateContext } from "./DataTableStateContext";
@@ -134,6 +135,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   virtualizationOverscan = 5,
   enableRowExpansion = false,
   renderSubComponent,
+  enableRowSelection = false,
+  selectAllScope: selectAllScopeProp,
   enableColumnPinning = false,
   maxPinnedColumns = 3,
   enableKeyboardNavigation: _enableKeyboardNavigation = false,
@@ -181,6 +184,9 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     compact,
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
+  // House selectAllScope knob (DG-TBL-03): prop overrides knob; default page.
+  const selectAllScope: SelectAllScope =
+    selectAllScopeProp ?? (knobProps.selectAllScope === "filtered" ? "filtered" : "page");
   const rowHeightPx = chrome.rowPx;
   // Collapsed expand-caret points toward inline-end, so it mirrors in RTL via
   // glyph swap (useDirection, Axiom 15); rotation sign flips so expanded
@@ -216,6 +222,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     virtualizationOverscan,
     enableRowExpansion,
     renderSubComponent,
+    enableRowSelection,
     enableColumnPinning,
     maxPinnedColumns,
     enableKeyboardNavigation: false,
@@ -225,6 +232,25 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     isFetching: isFetchingProp,
   });
 
+  const selectAllChecked =
+    enableRowSelection &&
+    (selectAllScope === "filtered"
+      ? table.getIsAllRowsSelected()
+      : table.getIsAllPageRowsSelected());
+  const selectAllIndeterminate =
+    enableRowSelection &&
+    (selectAllScope === "filtered"
+      ? table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+      : table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected());
+
+  const toggleSelectAll = useCallback(() => {
+    if (selectAllScope === "filtered") {
+      table.toggleAllRowsSelected();
+    } else {
+      table.toggleAllPageRowsSelected();
+    }
+  }, [selectAllScope, table]);
+
   const resolvedSize: "sm" | "md" | "lg" =
     size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
 
@@ -493,8 +519,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   // (see utils/rowPress.ts). Roving tabindex is a web-only concern.
   const rowPressActive = Boolean(onRowPress) && !disabled;
 
-  const deriveRowLabel = useCallback(
-    (row: (typeof tableRows)[0], index: number): string => {
+  const deriveRowIdentity = useCallback(
+    (row: (typeof tableRows)[0]): string | undefined => {
       const fromAccessor = rowLabel?.(row.original as TData);
       if (fromAccessor) return fromAccessor;
       let firstCellValue: unknown;
@@ -509,13 +535,33 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       ) {
         return String(firstCellValue);
       }
-      return withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 });
+      return undefined;
     },
-    [rowLabel, t],
+    [rowLabel],
+  );
+
+  const deriveRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string =>
+      deriveRowIdentity(row) ??
+      withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 }),
+    [deriveRowIdentity, t],
+  );
+
+  // Selection-toggle name: row identity beats a bare index ("Select row
+  // Bulbasaur", falling back to "Select row 3"), the same source the grid
+  // and the card list both read.
+  const deriveSelectRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string => {
+      const identity = deriveRowIdentity(row) ?? String(index + 1);
+      return withInterp(t("Select row {{row}}", { row: identity }), { row: identity });
+    },
+    [deriveRowIdentity, t],
   );
 
   const getRowPressProps = useCallback(
-    (row: (typeof tableRows)[0], index: number) => {
+    // The card list asks for the "card" variant. Native carries no DOM row
+    // role for it to override, so both variants land on role="button".
+    (row: (typeof tableRows)[0], index: number, _variant: "row" | "card" = "row") => {
       if (!rowPressActive) return {};
       return {
         onPress: () => onRowPress?.(row.original as TData, index),
@@ -551,101 +597,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     [renderRowContent, tableZebraOn, t, getRowPressProps],
   );
 
-  const renderMobileCard = useCallback(
-    (row: (typeof tableRows)[0], index: number, onDelete?: (idx: number) => void) => {
-      const rowData = row.original as TData;
-      const visibleCells = row.getVisibleCells();
-      return (
-        <View
-          key={`${row.id}-${index}`}
-          backgroundColor="$color1"
-          borderRadius="$4"
-          borderWidth={1}
-          borderColor="$borderColor"
-          padding="$3"
-          marginBottom="$2"
-          {...(getRowPressProps(row, index) as any)}
-          {...(rowIntentProps(rowData) as any)}
-        >
-          {showRowNumbers && (
-            <View
-              flexDirection="row"
-              justifyContent="space-between"
-              paddingBottom="$2"
-              {...hairline.bottom}
-              borderBottomColor="$borderColor"
-              marginBottom="$2"
-            >
-              <Text fontSize="$3" color="$color10" fontWeight="600">
-                #{index + 1}
-              </Text>
-              {showDeleteRow && !readOnly && (
-                <Button
-                  chromeless
-                  circular
-                  size="$2"
-                  icon={TrashIcon}
-                  disabled={disabled || tableRows.length <= minRows}
-                  onPress={() => onDelete?.(index)}
-                  aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-                    row: index + 1,
-                  })}
-                />
-              )}
-            </View>
-          )}
-          {visibleCells.map((cell: any) => {
-            const columnDef = cell.column.columnDef as DataTableColumn;
-            const headerLabel =
-              typeof columnDef.header === "string"
-                ? columnDef.header
-                : columnDef.id || cell.column.id;
-            return (
-              <View
-                key={cell.id}
-                flexDirection="row"
-                alignItems="center"
-                paddingVertical="$1.5"
-                gap="$2"
-              >
-                <Text fontSize="$3" color="$color10" fontWeight="500" width="40%" flexShrink={0}>
-                  {headerLabel}
-                </Text>
-                <View flex={1}>{renderCellContent(cell, index, rowData)}</View>
-              </View>
-            );
-          })}
-          {!showRowNumbers && showDeleteRow && !readOnly && (
-            <View paddingTop="$2" alignItems="flex-end">
-              <Button
-                chromeless
-                circular
-                size="$2"
-                icon={TrashIcon}
-                disabled={disabled || tableRows.length <= minRows}
-                onPress={() => onDelete?.(index)}
-                aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-                  row: index + 1,
-                })}
-              />
-            </View>
-          )}
-        </View>
-      );
-    },
-    [
-      showRowNumbers,
-      showDeleteRow,
-      readOnly,
-      disabled,
-      tableRows.length,
-      minRows,
-      renderCellContent,
-      t,
-      getRowPressProps,
-    ],
-  );
-
   const renderToolbarComponent = () => {
     if (renderToolbar) {
       return renderToolbar({
@@ -777,36 +728,37 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
               {showList ? (
                 <DataTableDocumentList
                   tableRows={displayRows}
+                  enableRowSelection={enableRowSelection}
                   disabled={disabled}
                   hasActiveFilters={computed.hasActiveFilters}
                   renderCellContent={renderCellContent}
                   compact={isCompact}
+                  selectRowLabel={deriveSelectRowLabel}
                   queryInFlight={queryInFlight}
                   {...(rowPressActive ? { getRowPressProps } : {})}
                 />
               ) : showCards ? (
                 <View flexDirection="column" gap="$2">
-                  {displayRows.length === 0 ? (
-                    queryInFlight ? null : (
-                      <EmptyState
-                        compact
-                        backgroundColor="$color1"
-                        borderRadius="$4"
-                        aria-live="polite"
-                        title={
-                          computed.hasActiveFilters ? t("No results found") : t("No data available")
-                        }
-                      />
-                    )
-                  ) : (
-                    displayRows.map((row, index) =>
-                      renderMobileCard(
-                        row,
-                        index,
-                        isFormMode ? effectiveHandleDeleteRow : handleDeleteRow,
-                      ),
-                    )
-                  )}
+                  <DataTableMobileCards
+                    tableRows={displayRows}
+                    enableRowSelection={enableRowSelection}
+                    showRowNumbers={showRowNumbers}
+                    showDeleteRow={showDeleteRow}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    dataLength={tableData.length}
+                    minRows={minRows}
+                    hasActiveFilters={computed.hasActiveFilters}
+                    renderCellContent={renderCellContent}
+                    onDeleteRow={isFormMode ? effectiveHandleDeleteRow : handleDeleteRow}
+                    selectAllChecked={selectAllChecked}
+                    selectAllIndeterminate={selectAllIndeterminate}
+                    onToggleSelectAll={toggleSelectAll}
+                    compact={isCompact}
+                    selectRowLabel={deriveSelectRowLabel}
+                    queryInFlight={queryInFlight}
+                    {...(rowPressActive ? { getRowPressProps } : {})}
+                  />
                   {enablePagination && (
                     <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
                       {renderPaginationComponent()}
@@ -1099,7 +1051,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       virtualizationHeight,
       virtualizationOverscan,
       renderRow,
-      renderMobileCard,
       renderSubComponent,
       footerGroups,
       sm,
@@ -1118,6 +1069,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       renderCellContent,
       rowPressActive,
       getRowPressProps,
+      enableRowSelection,
+      selectAllChecked,
+      selectAllIndeterminate,
+      toggleSelectAll,
+      deriveSelectRowLabel,
       displayRows,
       queryInFlight,
       t,

package/src/components/DataTable/nativeCardParity.spec.tsx

@@ -0,0 +1,95 @@
+/**
+ * One card renderer, two platforms.
+ *
+ * DataTableRoot.tsx (web) and index.native.tsx (native) are separate roots
+ * because native virtualizes through FlashList. The CARD LIST is not part
+ * of that split — a card has no platform-specific anatomy — so both roots
+ * render the same DataTableMobileCards rather than each drawing a card.
+ *
+ * MPO-285 shared the field RULE (classifyCardField, getColumnLabel) while
+ * leaving two copies of the JSX, and the two had already drifted: the
+ * native copy hardcoded its surface, and shipped without zebra striping,
+ * the selection checkbox, the empty states, and the TableCellContext that
+ * makes a field render chromeless. Sharing the rule alone does not stop
+ * that, because a new slot still has to be added twice.
+ *
+ * These assertions read source rather than render: the native root pulls in
+ * FlashList and the suite runs under happy-dom, so index.native.tsx is
+ * never the module a spec resolves. What the card DOES on native is covered
+ * by dataTableMobileCards.spec.tsx, which now describes both platforms.
+ */
+
+import { readdirSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const DIR = resolve(__dirname);
+
+function read(file: string): string {
+  return readFileSync(resolve(DIR, file), "utf-8");
+}
+
+/** A `<Component ... />` element at a call site, as text. */
+function callSite(source: string, component: string): string {
+  const start = source.indexOf(`<${component}`);
+  if (start === -1) return "";
+  const end = source.indexOf("/>", start);
+  return end === -1 ? "" : source.slice(start, end);
+}
+
+/** Prop names that call site passes. */
+function propNames(source: string, component: string): Set<string> {
+  const names = new Set<string>();
+  for (const match of callSite(source, component).matchAll(/(?:^|\s)([A-Za-z][A-Za-z0-9]*)=\{/g)) {
+    names.add(match[1]!);
+  }
+  return names;
+}
+
+const cardCallSite = (source: string) => callSite(source, "DataTableMobileCards");
+
+describe("DataTable card renderer parity", () => {
+  it("the native root renders DataTableMobileCards and carries no card of its own", () => {
+    const native = read("index.native.tsx");
+    expect(native).toMatch(
+      /import \{[^}]*DataTableMobileCards[^}]*\} from "\.\/DataTableMobileCards"/,
+    );
+    expect(cardCallSite(native)).not.toBe("");
+    expect(native).not.toMatch(/renderMobileCard/);
+  });
+
+  it("the native root reaches the card field rule through the component, not directly", () => {
+    // MPO-285 left index.native.tsx importing classifyCardField/getColumnLabel
+    // to feed its own JSX. With the JSX shared there is nothing left to feed:
+    // an import here again would mean a second card had grown back.
+    const native = read("index.native.tsx");
+    expect(native).not.toMatch(/\bclassifyCardField\b/);
+    expect(native).not.toMatch(/\bgetColumnLabel\b/);
+  });
+
+  it("exactly one file in the component draws a card", () => {
+    const drawers = readdirSync(DIR)
+      .filter(
+        (file) => file.endsWith(".tsx") && !file.includes(".spec.") && !file.includes(".stories."),
+      )
+      .filter((file) => read(file).includes('testID="data-table-card"'));
+    expect(drawers).toEqual(["DataTableMobileCards.tsx"]);
+  });
+
+  // Both roots hand their row views the same contract. A prop web passes and
+  // native does not is how the card lost selection and the empty states in
+  // the first place, so it is the drift worth failing a build over.
+  it.each(["DataTableMobileCards", "DataTableDocumentList"])(
+    "native passes every %s prop web passes",
+    (component) => {
+      const web = propNames(read("DataTableRoot.tsx"), component);
+      const native = propNames(read("index.native.tsx"), component);
+      expect(web.size).toBeGreaterThan(0);
+      expect([...web].filter((prop) => !native.has(prop)).sort()).toEqual([]);
+    },
+  );
+
+  it("native hands the card list its press props, so a card is pressable there too", () => {
+    expect(cardCallSite(read("index.native.tsx"))).toMatch(/getRowPressProps/);
+  });
+});