@multiplatform.one/table 7.28.1 → 7.29.0

package/src/components/DataTable/DataTableInfiniteTail.tsx

@@ -0,0 +1,94 @@
+/**
+ * Infinite mode tail, shared by the web and native roots: the load-more
+ * trigger each platform supplies, an append skeleton bounded by the actual
+ * load (no infinite spinner), and an honest, announced end-of-data state
+ * (DG-ST-01/04).
+ */
+
+import { Skeleton } from "@multiplatform.one/components";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, View } from "tamagui";
+import type { DataTableInfiniteState } from "../../types";
+import { bidiIsolate, withInterp } from "../../utils/withInterp";
+
+export interface DataTableInfiniteTailProps {
+  infinite: DataTableInfiniteState;
+  /** Rows on screen now, for "Showing N of M". */
+  visibleCount: number;
+  /** False when the virtualizer draws its own skeleton row. */
+  showAppendSkeleton: boolean;
+  rowHeightPx: number;
+  fontSize: any;
+  gapProps?: Record<string, unknown>;
+  /** The platform's load-more trigger; absent once the data is exhausted. */
+  sentinel?: ReactNode;
+}
+
+export function DataTableInfiniteTail({
+  infinite,
+  visibleCount,
+  showAppendSkeleton,
+  rowHeightPx,
+  fontSize,
+  gapProps,
+  sentinel,
+}: DataTableInfiniteTailProps) {
+  const { t } = useTranslation();
+  return (
+    <View flexDirection="column" width="100%">
+      {sentinel}
+      {showAppendSkeleton && infinite.isAppending ? (
+        <View
+          flexDirection="column"
+          width="100%"
+          {...gapProps}
+          paddingVertical="$2"
+          aria-hidden
+          {...({ "data-testid": "infinite-append-skeleton" } as any)}
+        >
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} width="100%" height={rowHeightPx - 8} />
+          ))}
+        </View>
+      ) : null}
+      <Text
+        role="status"
+        aria-live="polite"
+        textAlign="center"
+        paddingVertical="$2"
+        fontSize={fontSize}
+        color="$color10"
+        {...({ "data-testid": "infinite-status" } as any)}
+      >
+        {/* Numeric labels are bidi-isolated so RTL contexts keep
+            the interpolated runs in order (FSI…PDI). */}
+        {infinite.isAppending
+          ? t("Loading more rows…")
+          : infinite.exhausted
+            ? typeof infinite.totalCount === "number" && infinite.totalCount > 0
+              ? bidiIsolate(
+                  withInterp(t("All {{count}} rows loaded", { count: infinite.totalCount }), {
+                    count: infinite.totalCount,
+                  }),
+                )
+              : t("End of results")
+            : typeof infinite.totalCount === "number"
+              ? bidiIsolate(
+                  withInterp(
+                    t("Showing {{visible}} of {{total}} rows", {
+                      visible: visibleCount,
+                      total: infinite.totalCount,
+                    }),
+                    { visible: visibleCount, total: infinite.totalCount },
+                  ),
+                )
+              : bidiIsolate(
+                  withInterp(t("Showing {{visible}} rows", { visible: visibleCount }), {
+                    visible: visibleCount,
+                  }),
+                )}
+      </Text>
+    </View>
+  );
+}

package/src/components/DataTable/DataTableRoot.tsx

@@ -22,13 +22,8 @@ import { flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useEffect, useRef, useMemo, useCallback, useState } from "react";
-import {
-  AsyncBoundary,
-  EmptyState,
-  Skeleton,
-  Tooltip,
-  useDirection,
-} from "@multiplatform.one/components";
+import { AsyncBoundary, EmptyState, Tooltip, useDirection } from "@multiplatform.one/components";
+import type { FontSizeTokens } from "tamagui";
 import { Text, View, isWeb, useMedia } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
@@ -59,6 +54,8 @@ import type {
 import { DataTableCardControls, DataTableCardSortControl } from "./DataTableCardControls";
 import { DataTableMobileCards } from "./DataTableMobileCards";
 import { DataTableDocumentList } from "./DataTableDocumentList";
+import { DataTableInfiniteTail } from "./DataTableInfiniteTail";
+import { CellContent } from "./CellContent";
 import { DataTableVirtualized } from "./DataTableVirtualized";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome";
@@ -749,7 +746,11 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
             justifyContent={alignToFlex(customAlign)}
             {...({ "data-cell-align": customAlign } as any)}
           >
-            {flexRender(columnDef.cell, cell.getContext())}
+            <CellContent
+              cellDef={columnDef.cell}
+              ctx={cell.getContext()}
+              fontSize={knobProps.label.fontSize as FontSizeTokens}
+            />
           </View>
         );
       }
@@ -785,7 +786,14 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
         />
       );
     },
-    [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact],
+    [
+      handleCellChange,
+      readOnly,
+      disabled,
+      knobProps.sizeToken,
+      knobProps.label.fontSize,
+      isCompact,
+    ],
   );
 
   const extraColumnsBefore =
@@ -2224,79 +2232,27 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
               </View>
             )}
 
-            {/* Infinite mode tail: sentinel (non-virtualized trigger), append
-                skeleton (bounded by the actual load — no infinite spinner),
-                and an honest, announced end-of-data state (DG-ST-01/04). */}
             {infinite ? (
-              <View flexDirection="column" width="100%">
-                {!isVirtualized && !infinite.exhausted && isWeb ? (
-                  <View
-                    // @ts-ignore web ref for IntersectionObserver
-                    ref={sentinelRef as any}
-                    height={1}
-                    width="100%"
-                    aria-hidden
-                    {...({ "data-testid": "infinite-sentinel" } as any)}
-                  />
-                ) : null}
-                {!isVirtualized && infinite.isAppending ? (
-                  <View
-                    flexDirection="column"
-                    width="100%"
-                    {...knobProps.gap}
-                    paddingVertical="$2"
-                    aria-hidden
-                    {...({ "data-testid": "infinite-append-skeleton" } as any)}
-                  >
-                    {Array.from({ length: 3 }).map((_, i) => (
-                      <Skeleton key={i} width="100%" height={rowHeightPx - 8} />
-                    ))}
-                  </View>
-                ) : null}
-                <Text
-                  role="status"
-                  aria-live="polite"
-                  textAlign="center"
-                  paddingVertical="$2"
-                  fontSize={knobProps.sizeToken}
-                  color="$color10"
-                  {...({ "data-testid": "infinite-status" } as any)}
-                >
-                  {/* Numeric labels are bidi-isolated so RTL contexts keep
-                      the interpolated runs in order (FSI…PDI). */}
-                  {infinite.isAppending
-                    ? t("Loading more rows…")
-                    : infinite.exhausted
-                      ? typeof infinite.totalCount === "number" && infinite.totalCount > 0
-                        ? bidiIsolate(
-                            withInterp(
-                              t("All {{count}} rows loaded", { count: infinite.totalCount }),
-                              {
-                                count: infinite.totalCount,
-                              },
-                            ),
-                          )
-                        : t("End of results")
-                      : typeof infinite.totalCount === "number"
-                        ? bidiIsolate(
-                            withInterp(
-                              t("Showing {{visible}} of {{total}} rows", {
-                                visible: tableRows.length,
-                                total: infinite.totalCount,
-                              }),
-                              { visible: tableRows.length, total: infinite.totalCount },
-                            ),
-                          )
-                        : bidiIsolate(
-                            withInterp(
-                              t("Showing {{visible}} rows", { visible: tableRows.length }),
-                              {
-                                visible: tableRows.length,
-                              },
-                            ),
-                          )}
-                </Text>
-              </View>
+              <DataTableInfiniteTail
+                infinite={infinite}
+                visibleCount={tableRows.length}
+                showAppendSkeleton={!isVirtualized}
+                rowHeightPx={rowHeightPx}
+                fontSize={knobProps.sizeToken}
+                gapProps={knobProps.gap}
+                sentinel={
+                  !isVirtualized && !infinite.exhausted && isWeb ? (
+                    <View
+                      // @ts-ignore web ref for IntersectionObserver
+                      ref={sentinelRef as any}
+                      height={1}
+                      width="100%"
+                      aria-hidden
+                      {...({ "data-testid": "infinite-sentinel" } as any)}
+                    />
+                  ) : null
+                }
+              />
             ) : null}
 
             {enableRowSelection && bulkBarPlacement === "bottom" ? (

package/src/components/DataTable/NativeInfiniteSentinel.tsx

@@ -0,0 +1,45 @@
+/**
+ * Native load-more trigger for DataTable's infinite mode.
+ *
+ * Web watches its sentinel with an IntersectionObserver. React Native has
+ * none, and the table never sees its host's scroll events: the backoffice
+ * list scrolls the whole screen in a ScrollView the table sits inside. So
+ * the sentinel asks where it is on screen, on a short interval while more
+ * pages exist, and fires once it comes within `leadPx` of the window's
+ * bottom edge, the same lead web gives its observer.
+ */
+
+import { type ComponentRef, useEffect, useRef } from "react";
+import { Dimensions, View } from "react-native";
+
+export const NATIVE_SENTINEL_POLL_MS = 250;
+
+export interface NativeInfiniteSentinelProps {
+  onVisible: () => void;
+  leadPx: number;
+}
+
+export function NativeInfiniteSentinel({ onVisible, leadPx }: NativeInfiniteSentinelProps) {
+  const ref = useRef<ComponentRef<typeof View>>(null);
+  const onVisibleRef = useRef(onVisible);
+  onVisibleRef.current = onVisible;
+
+  useEffect(() => {
+    let active = true;
+    const timer = setInterval(() => {
+      ref.current?.measureInWindow((_x, y, width) => {
+        // An unmeasured view reports all zeros; width 0 means not laid out.
+        if (!active || width <= 0) return;
+        if (y <= Dimensions.get("window").height + leadPx) onVisibleRef.current();
+      });
+    }, NATIVE_SENTINEL_POLL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [leadPx]);
+
+  return (
+    <View ref={ref} style={{ height: 1, width: "100%" }} aria-hidden testID="infinite-sentinel" />
+  );
+}

package/src/components/DataTable/cellWeight.native.spec.tsx

@@ -0,0 +1,82 @@
+/**
+ * MPO-446 table arm (native): the native root renders body cells through the
+ * same CellContent as web, so a primitive value rides house Text and takes
+ * the fontWeight and bodyFont knobs. index.native.tsx pulls in FlashList and
+ * the suite runs under happy-dom, so the root is read as source (the
+ * ./nativeCardParity.spec.tsx precedent) and CellContent renders under the
+ * native platform flags.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { Text as RawText } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CellContent } from "./CellContent";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+afterEach(cleanup);
+
+function classes(el: Element, prefix: string): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith(prefix))
+    .sort();
+}
+
+function explicit(prefix: string, props: Record<string, string>): string[] {
+  renderWithProviders(<RawText {...props}>probe</RawText>);
+  const got = classes(screen.getByText("probe"), prefix);
+  cleanup();
+  return got;
+}
+
+describe("DataTable custom cell values follow the text knobs (native, MPO-446)", () => {
+  it("really is running with the native platform flags", async () => {
+    const platform = await import("@multiplatform.one/platform");
+    expect(platform.isWeb).toBe(false);
+    expect(platform.isNative).toBe(true);
+  });
+
+  it("the native root renders body cells through CellContent with the value voice size", () => {
+    const native = readFileSync(resolve(__dirname, "index.native.tsx"), "utf-8");
+    const start = native.indexOf("<CellContent");
+    expect(start).toBeGreaterThan(-1);
+    const site = native.slice(start, native.indexOf("/>", start));
+    expect(site).toMatch(/cellDef=\{columnDef\.cell\}/);
+    expect(site).toMatch(/fontSize=\{knobProps\.label\.fontSize/);
+  });
+
+  it.each([
+    ["regular", "400"],
+    ["bold", "700"],
+  ] as const)("string and number values paint the knob weight at %s", (fontWeight, want) => {
+    const expected = explicit("_fow-", { fontWeight: want });
+    for (const value of ["Bulbasaur", 4461]) {
+      renderWithProviders(
+        <Preset overrides={{ fontWeight }}>
+          <CellContent cellDef={() => value} ctx={{}} fontSize="$3" />
+        </Preset>,
+      );
+      expect(classes(screen.getByText(String(value)), "_fow-"), String(value)).toEqual(expected);
+      cleanup();
+    }
+  });
+
+  it("string values take the bodyFont family", () => {
+    const expected = explicit("_ff-", { fontFamily: "$mono" });
+    renderWithProviders(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <CellContent cellDef={() => "Bulbasaur"} ctx={{}} fontSize="$3" />
+      </Preset>,
+    );
+    expect(classes(screen.getByText("Bulbasaur"), "_ff-")).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,147 @@
+/**
+ * MPO-446 table arm (web): a DataTable custom cell's value takes the
+ * fontWeight and bodyFont knobs.
+ *
+ * `cell: (info) => info.getValue()` returns a primitive, and flexRender
+ * dropped it as a bare text node into the cell's alignment View: a div with
+ * no text voice, so the value painted the page's 400 under Weight bold. The
+ * value now rides house Text (./CellContent.tsx). ./cellWeight.native.spec.tsx
+ * is the native arm.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { act, cleanup, screen } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { Text as RawText } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { CellContent } from "./CellContent";
+import { DataTable } from "./index";
+
+type Row = { id: number; name: string; status: string; amount: string };
+
+const rows: Row[] = [{ id: 4461, name: "Bulbasaur", status: "sleeping", amount: "12.50" }];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "id", accessorKey: "id", header: "ID", cell: (info) => info.getValue() },
+  { id: "name", accessorKey: "name", header: "Name", cell: (info) => info.getValue() },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: "Status",
+    cell: (info) => <RawText fontWeight="300">{String(info.getValue())}</RawText>,
+  },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    field: "money",
+    fieldProps: { currency: "USD", locale: "en-US" },
+  },
+];
+
+const weights = [
+  ["regular", "400"],
+  ["bold", "700"],
+] as const;
+
+afterEach(cleanup);
+
+function classes(el: Element, prefix: string): string[] {
+  return String(el.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith(prefix))
+    .sort();
+}
+
+/** The class a prop paints, read off a raw node so no house wiring is involved. */
+function explicit(prefix: string, props: Record<string, string>): string[] {
+  renderWithProviders(<RawText {...props}>probe</RawText>);
+  const got = classes(screen.getByText("probe"), prefix);
+  cleanup();
+  return got;
+}
+
+function renderTable(overrides: Record<string, string>) {
+  return renderWithProviders(
+    <Preset overrides={overrides as never}>
+      <DataTable
+        data={rows}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="table"
+        enablePagination={false}
+        readOnly
+      />
+    </Preset>,
+  );
+}
+
+describe("DataTable custom cell values follow the text knobs (web, MPO-446)", () => {
+  it.each(weights)("string and number values paint the knob weight at %s", (fontWeight, want) => {
+    const expected = explicit("_fow-", { fontWeight: want });
+    renderTable({ fontWeight });
+    for (const text of ["Bulbasaur", "4461"]) {
+      const node = screen.getByText(text);
+      expect(node.closest("[data-cell-align]")).not.toBe(node);
+      expect(classes(node, "_fow-"), text).toEqual(expected);
+    }
+  });
+
+  it("string values take the bodyFont family", () => {
+    const expected = explicit("_ff-", { fontFamily: "$mono" });
+    renderTable({ bodyFont: "mono" });
+    expect(classes(screen.getByText("Bulbasaur"), "_ff-")).toEqual(expected);
+  });
+
+  it.each(weights)("a money value paints the knob weight at %s", (fontWeight, want) => {
+    const expected = explicit("_fow-", { fontWeight: want });
+    renderTable({ fontWeight });
+    expect(classes(screen.getByText(/12\.50/), "_fow-")).toEqual(expected);
+  });
+
+  it("a renderer that returns an element keeps its own weight", () => {
+    const expected = explicit("_fow-", { fontWeight: "300" });
+    renderTable({ fontWeight: "bold" });
+    expect(classes(screen.getByText("sleeping"), "_fow-")).toEqual(expected);
+  });
+});
+
+describe("CellContent keeps flexRender's component identity per renderer", () => {
+  function Counter({ start }: { start: number }): ReactNode {
+    const [n, setN] = useState(start);
+    return (
+      <RawText onPress={() => setN((v) => v + 1)} data-testid="counter">
+        {n}
+      </RawText>
+    );
+  }
+
+  it("a renderer's hook state survives a re-render with the same renderer", () => {
+    const render = (ctx: unknown) => <Counter start={(ctx as { start: number }).start} />;
+    const { rerender } = renderWithProviders(
+      <CellContent cellDef={render} ctx={{ start: 1 }} fontSize="$3" />,
+    );
+    act(() => screen.getByTestId("counter").click());
+    expect(screen.getByTestId("counter").textContent).toBe("2");
+    rerender(<CellContent cellDef={render} ctx={{ start: 1 }} fontSize="$3" />);
+    expect(screen.getByTestId("counter").textContent).toBe("2");
+  });
+
+  it("a new renderer mounts its own hooks instead of reading the old renderer's slots", () => {
+    const first = () => {
+      const [label] = useState("first renderer");
+      return label;
+    };
+    const second = () => {
+      const [label] = useState("second renderer");
+      return label;
+    };
+    const { rerender } = renderWithProviders(
+      <CellContent cellDef={first} ctx={{}} fontSize="$3" />,
+    );
+    expect(screen.getByText("first renderer")).toBeInTheDocument();
+    rerender(<CellContent cellDef={second} ctx={{}} fontSize="$3" />);
+    expect(screen.getByText("second renderer")).toBeInTheDocument();
+  });
+});