@multiplatform.one/table 7.34.3 → 7.35.0

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -10,7 +10,7 @@
 import { dataTableChrome, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 import { Skeleton } from "@multiplatform.one/components";
-import { Text, View } from "tamagui";
+import { SizableText, Text, View } from "tamagui";
 
 export interface DataTableVirtualizedProps {
   virtualItems: any[];
@@ -168,7 +168,9 @@ export function DataTableVirtualized({
                   <Text fontFamily="$mono" fontSize="$3">
                     {row.getIsExpanded() ? "▼" : "▶"}
                   </Text>
-                  <Text fontWeight="600">{String(row.groupingValue ?? "—")}</Text>
+                  <SizableText fontFamily="$heading" size="$4">
+                    {String(row.groupingValue ?? "—")}
+                  </SizableText>
                   <Text color="$placeholderColor" fontSize="$2">
                     ({row.subRows?.length ?? 0})
                   </Text>

package/src/components/DataTable/FieldsInCells.stories.tsx

@@ -187,7 +187,6 @@ const meta: Meta<typeof DataTable> = {
   },
   argTypes: {
     readOnly: { control: "boolean" },
-    compact: { control: "boolean" },
     disabled: { control: "boolean" },
     // compact is not pinned — density rides the Preset / Storybook control.
   },

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

@@ -221,43 +221,29 @@ describe("DataTable Compound Component", () => {
     expect(capturedContext!.computed.hasActiveFilters).toBe(true);
   });
 
-  it("DataTableContext cascades size and compact props to sub-components", () => {
+  it("DataTableContext cascades size to sub-components", () => {
     let capturedSize: string | undefined;
-    let capturedCompact: boolean | undefined;
 
     function ContextConsumer() {
       const ctx = DataTableContext.useStyledContext();
-      capturedSize = ctx.size;
-      capturedCompact = ctx.compact;
-      return (
-        <div data-testid="context-consumer">
-          size={ctx.size} compact={String(ctx.compact)}
-        </div>
-      );
+      capturedSize = String(ctx.size);
+      return <div data-testid="context-consumer">size={ctx.size}</div>;
     }
 
-    // Test with explicit size="sm" and compact={true}
     renderWithProviders(
-      <DataTableContext.Provider size="sm" compact={true}>
+      <DataTableContext.Provider size="$3">
         <ContextConsumer />
       </DataTableContext.Provider>,
     );
+    expect(capturedSize).toBe("$3");
 
-    expect(capturedSize).toBe("sm");
-    expect(capturedCompact).toBe(true);
-
-    // Test with different values to ensure cascading works
     capturedSize = undefined;
-    capturedCompact = undefined;
-
     renderWithProviders(
-      <DataTableContext.Provider size="lg" compact={false}>
+      <DataTableContext.Provider size="$5">
         <ContextConsumer />
       </DataTableContext.Provider>,
     );
-
-    expect(capturedSize).toBe("lg");
-    expect(capturedCompact).toBe(false);
+    expect(capturedSize).toBe("$5");
   });
 
   it("DataTableStateContext provides table instance, state, actions, computed to sub-components", () => {

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

@@ -52,6 +52,49 @@ describe("DataTableDocumentList", () => {
     );
   });
 
+  it("stacks compact indicators and activity under the subject instead of beside it", () => {
+    const width = window.innerWidth;
+    window.innerWidth = 390;
+    try {
+      const { container } = renderList({
+        enableRowSelection: true,
+        columns: [
+          ...columns,
+          { id: "priority", accessorKey: "status", meta: { role: "indicator" } },
+          { id: "_activity", accessorKey: "owner" },
+          { accessorKey: "id", header: "Points", align: "right" },
+        ],
+      });
+      const row = container.querySelector('[data-testid="data-table-list-row"]')!;
+      const subject = row.querySelector('[data-list-slot="title"]')!.parentElement!;
+      expect(getComputedStyle(row).flexWrap).toBe("nowrap");
+      expect(getComputedStyle(subject).flexGrow).toBe("1");
+      expect(getComputedStyle(subject).minWidth).toBe("0px");
+      const line = subject.querySelector('[data-list-slot="trailing-line"]')!;
+      expect(line).not.toBeNull();
+      expect(getComputedStyle(line).flexWrap).toBe("wrap");
+      for (const slot of ["trailing", "indicator", "actions"]) {
+        const cell = row.querySelector(`[data-list-slot="${slot}"]`)!;
+        expect(line.contains(cell)).toBe(true);
+      }
+      expect(row.querySelector('[data-list-slot="trailing-cluster"]')).toBeNull();
+    } finally {
+      window.innerWidth = width;
+    }
+  });
+
+  it("leaves out a meta line whose field is empty", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={[{ ...tasks[0], owner: "" }, tasks[1]]}
+        columns={columns}
+        layout="list"
+        onStateChange={vi.fn()}
+      />,
+    );
+    expect(slots(container, "meta")).toEqual(["Grace"]);
+  });
+
   it("splits a row into title, muted meta and a trailing indicator", () => {
     const { container } = renderList();
     expect(slots(container, "title")[0]).toBe("Ship the card layout");
@@ -97,6 +140,57 @@ describe("DataTableDocumentList", () => {
     expect(slots(container, "actions")).not.toContain("Ada");
   });
 
+  it("metas share ONE subtitle line under the title instead of stacking a line per column", () => {
+    const { container } = renderList({
+      data: tasks.map((task) => ({ ...task, team: "Core", city: "Paris" })),
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { accessorKey: "owner", header: "Owner" },
+        { accessorKey: "team", header: "Team" },
+        { accessorKey: "city", header: "City" },
+      ],
+    });
+    const row = container.querySelector('[data-testid="data-table-list-row"]') as HTMLElement;
+    const lines = row.querySelectorAll('[data-list-slot="meta-line"]');
+    expect(lines.length).toBe(1);
+    expect(
+      Array.from(lines[0].querySelectorAll('[data-list-slot="meta"]')).map((n) => n.textContent),
+    ).toEqual(["Ada", "Core", "Paris"]);
+    // The subject column holds exactly two lines: the title and that meta line.
+    const subject = row.querySelector('[data-list-slot="title"]')?.parentElement as HTMLElement;
+    expect(subject.children.length).toBe(2);
+  });
+
+  it("numeric and date columns leave the meta line for fixed-width trailing columns", () => {
+    const { container } = renderList({
+      data: tasks.map((task, i) => ({ ...task, due: `2026-10-2${i}`, points: 3 + i })),
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { accessorKey: "owner", header: "Owner" },
+        { accessorKey: "due", header: "Due", field: "datepicker" },
+        { accessorKey: "points", header: "Points", align: "right" },
+      ],
+    });
+    const row = container.querySelector('[data-testid="data-table-list-row"]') as HTMLElement;
+    const trailing = Array.from(row.querySelectorAll('[data-list-slot="trailing"]'));
+    // The date cell draws its own picker display; the number is plain text.
+    expect(trailing).toHaveLength(2);
+    expect(trailing[1].textContent).toBe("3");
+    expect(trailing[0].closest('[data-list-slot="trailing-cluster"]')).not.toBeNull();
+    expect(slots(row, "meta")).toEqual(["Ada"]);
+  });
+
+  it("an explicit trailing role reaches the trailing cluster whatever the column's field", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { accessorKey: "owner", header: "Owner", meta: { role: "trailing" } },
+      ],
+    });
+    expect(slots(container, "trailing")).toContain("Ada");
+    expect(slots(container, "meta")).not.toContain("Ada");
+  });
+
   it("a list is not a form: column headers never reprint as row labels", () => {
     renderList();
     expect(screen.queryByText("Owner")).toBeNull();

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

@@ -215,12 +215,12 @@ describe("DataTableMobileCards", () => {
 
     it("in dark an odd card's background differs from an even card's", () => {
       const [even, odd] = cardFills("dark");
-      expect(even).toEqual(["_bg-color2"]);
+      expect(even).toEqual(["_bg-background"]);
       expect(odd).toEqual(["_bg-color3"]);
     });
 
-    it("leaves light on $background and $color2", () => {
-      expect(cardFills("light").slice(0, 2)).toEqual([["_bg-background"], ["_bg-color2"]]);
+    it("keeps light on $background and $color3", () => {
+      expect(cardFills("light").slice(0, 2)).toEqual([["_bg-background"], ["_bg-color3"]]);
     });
   });
 
@@ -289,24 +289,18 @@ describe("DataTableMobileCards", () => {
     });
 
     it("presses one ramp step above the rest fill, floored at $color4", () => {
-      expect(matrix()).toEqual({
-        "light none zebra-off": ["background>color4", "background>color4"],
-        "light none zebra-on": ["background>color4", "color2>color4"],
-        "light small zebra-off": ["background>color4", "background>color4"],
-        "light small zebra-on": ["background>color4", "color2>color4"],
-        "light medium zebra-off": ["background>color4", "background>color4"],
-        "light medium zebra-on": ["background>color4", "color2>color4"],
-        "light large zebra-off": ["background>color4", "background>color4"],
-        "light large zebra-on": ["background>color4", "color2>color4"],
-        "dark none zebra-off": ["background>color4", "background>color4"],
-        "dark none zebra-on": ["background>color4", "color2>color4"],
-        "dark small zebra-off": ["color2>color4", "color2>color4"],
-        "dark small zebra-on": ["color2>color4", "color3>color4"],
-        "dark medium zebra-off": ["color3>color4", "color3>color4"],
-        "dark medium zebra-on": ["color3>color4", "color4>color5"],
-        "dark large zebra-off": ["color4>color5", "color4>color5"],
-        "dark large zebra-on": ["color4>color5", "color5>color6"],
-      });
+      expect(matrix()).toEqual(
+        Object.fromEntries(
+          schemes.flatMap((scheme) =>
+            elevations.flatMap((elevation) =>
+              zebras.map((zebra) => [
+                `${scheme} ${elevation} zebra-${zebra}`,
+                ["background>color4", zebra === "on" ? "color3>color4" : "background>color4"],
+              ]),
+            ),
+          ),
+        ),
+      );
     });
 
     it("owns its press fill whatever press props a root hands it (the native root's shape)", () => {
@@ -345,7 +339,10 @@ describe("DataTableMobileCards", () => {
           />
         </Preset>,
       );
-      expect(cards(container).slice(0, 2).map(paint)).toEqual(["color4>color5", "color5>color6"]);
+      expect(cards(container).slice(0, 2).map(paint)).toEqual([
+        "background>color4",
+        "color3>color4",
+      ]);
     });
   });
 });

package/src/components/DataTable/documentListSlots.ts

@@ -1,14 +1,16 @@
 /**
  * Document-list slot taxonomy (Polaris Index / Frappe list, not a grid).
  *
- * A list row is subject-led: title + stacked muted meta, then a trailing
- * indicator cluster and actions. Remaining columns never lay out as equal
- * grid tracks — that is the table layout.
+ * A list row is subject-led: title over ONE wrapping line of muted meta, then
+ * a trailing cluster of fixed-width numeric/date columns, indicators and
+ * actions. Remaining columns never lay out as equal grid tracks — that is the
+ * table layout — and never stack one line per column (a desk row is one 48–56
+ * px record, not a key-value card).
  */
 
 import type { DataTableColumn, DataTableField } from "../../types";
 
-export type DocumentListSlot = "title" | "indicator" | "meta" | "actions" | "skip";
+export type DocumentListSlot = "title" | "indicator" | "trailing" | "meta" | "actions" | "skip";
 
 const INDICATOR_FIELDS = new Set<DataTableField>([
   "select",
@@ -17,6 +19,17 @@ const INDICATOR_FIELDS = new Set<DataTableField>([
   "radiogroup",
 ]);
 
+/** Numbers and dates read as aligned trailing columns (Finder size/modified). */
+const TRAILING_FIELDS = new Set<DataTableField>([
+  "stepper",
+  "slider",
+  "money",
+  "datepicker",
+  "datetimepicker",
+  "timepicker",
+  "duration",
+]);
+
 const INDICATOR_IDS = new Set(["status", "priority", "workflow_state", "state"]);
 
 export function classifyDocumentListSlot(cell: {
@@ -28,11 +41,15 @@ export function classifyDocumentListSlot(cell: {
   if (role === "title") return "title";
   if (role === "indicator") return "indicator";
   if (role === "actions") return "actions";
+  if (role === "trailing") return "trailing";
   if (role === "hidden" || role === "skip") return "skip";
   if (id.startsWith("_")) return "actions";
   if (INDICATOR_IDS.has(id) || (def.field != null && INDICATOR_FIELDS.has(def.field))) {
     return "indicator";
   }
+  if ((def.field != null && TRAILING_FIELDS.has(def.field)) || def.align === "right") {
+    return "trailing";
+  }
   return "meta";
 }
 
@@ -41,17 +58,19 @@ export function partitionDocumentListCells<
 >(
   visibleCells: TCell[],
   titleCell: TCell | undefined,
-): { indicators: TCell[]; metas: TCell[]; actions: TCell[] } {
+): { indicators: TCell[]; trailing: TCell[]; metas: TCell[]; actions: TCell[] } {
   const rest = visibleCells.filter((cell) => cell.id !== titleCell?.id);
   const indicators: TCell[] = [];
+  const trailing: TCell[] = [];
   const metas: TCell[] = [];
   const actions: TCell[] = [];
   for (const cell of rest) {
     const slot = classifyDocumentListSlot(cell);
     if (slot === "indicator") indicators.push(cell);
+    else if (slot === "trailing") trailing.push(cell);
     else if (slot === "actions") actions.push(cell);
     else if (slot === "skip" || slot === "title") continue;
     else metas.push(cell);
   }
-  return { indicators, metas, actions };
+  return { indicators, trailing, metas, actions };
 }

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

@@ -1,5 +1,5 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } 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";
@@ -39,9 +39,9 @@ const allAuxiliaries = {
   showDeleteRow: true,
 };
 
-function renderTable(props = {}, size: "small" | "medium" | "large" = "medium") {
+function renderTable(props = {}, size?: "$3" | "$5") {
   return renderWithProviders(
-    <Preset overrides={{ size }}>
+    <Surface size={size}>
       <DataTable
         data={data}
         columns={columns}
@@ -50,7 +50,7 @@ function renderTable(props = {}, size: "small" | "medium" | "large" = "medium")
         enablePagination={false}
         {...props}
       />
-    </Preset>,
+    </Surface>,
   );
 }
 
@@ -162,9 +162,9 @@ describe.each(["ltr", "rtl"])("footer layout in %s", (direction) => {
     },
   );
 
-  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");
+  it("follows resolved auxiliary widths at the $3 and $5 size tokens", () => {
+    const widthsBySize = (["$3", "$5"] as const).map((size) => {
+      const utils = renderTable(allAuxiliaries, size);
       const row = rows(utils.container);
       const headerWidths = row.header.map(width);
       expect(headerWidths).toHaveLength(6);