@multiplatform.one/table 6.4.3 → 6.6.0

package/src/components/DataTable/DataTableRoot.tsx

@@ -62,6 +62,7 @@ import { DataTableVirtualized } from "./DataTableVirtualized";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
 import { mapFieldToFilterType } from "../../utils/filterFields";
 import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
+import { isInteractiveInnerTarget } from "../../utils/rowPress";
 import { bidiIsolate, withInterp } from "../../utils/withInterp";
 
 const SELECTION_COL_WIDTH = 40;
@@ -134,6 +135,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   maxPinnedColumns = 3,
   enableGrouping = false,
   enableKeyboardNavigation = false,
+  onRowPress,
+  rowLabel,
   enableRowSelection = false,
   selectAllScope: selectAllScopeProp,
   bulkActions,
@@ -473,6 +476,159 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       : undefined,
   });
 
+  const isSSR = typeof window === "undefined";
+
+  // ---- Row press (onRowPress): the ROW is one pressable unit ----
+
+  const rowPressActive = Boolean(onRowPress) && !disabled;
+  // LC-49 roving anchor: the row set exposes exactly one tab stop — the
+  // focused row while focus is inside the set, else the first row.
+  const [rowPressAnchor, setRowPressAnchor] = useState(0);
+  const effectiveRowPressAnchor = Math.min(rowPressAnchor, Math.max(tableRows.length - 1, 0));
+
+  // Row identity for accessible names (DG-A11Y-06): consumer accessor →
+  // first visible column's cell value → undefined (caller picks its own
+  // positional fallback). Shared by the row-press label and the selection
+  // checkbox name so "which row is this control for" reads the same
+  // everywhere.
+  const deriveRowIdentity = useCallback(
+    (row: any): string | undefined => {
+      const fromAccessor = rowLabel?.(row.original as TData);
+      if (fromAccessor) return fromAccessor;
+      let firstCellValue: unknown;
+      try {
+        firstCellValue = row.getVisibleCells()[0]?.getValue();
+      } catch {
+        firstCellValue = undefined;
+      }
+      if (
+        (typeof firstCellValue === "string" && firstCellValue.length > 0) ||
+        typeof firstCellValue === "number"
+      ) {
+        return String(firstCellValue);
+      }
+      return undefined;
+    },
+    [rowLabel],
+  );
+
+  // Accessible name per pressable row: identity, else positional "Row {{row}}".
+  const deriveRowLabel = useCallback(
+    (row: any, rowIndex: number): string =>
+      deriveRowIdentity(row) ??
+      withInterp(t("Row {{row}}", { row: rowIndex + 1 }), { row: rowIndex + 1 }),
+    [deriveRowIdentity, t],
+  );
+
+  // Selection-toggle name: row identity beats a bare index ("Select row
+  // Bulbasaur", falling back to "Select row 3") so AT and automation can
+  // target a specific row's checkbox by name.
+  const deriveSelectRowLabel = useCallback(
+    (row: any, rowIndex: number): string => {
+      const identity = deriveRowIdentity(row) ?? String(rowIndex + 1);
+      return withInterp(t("Select row {{row}}", { row: identity }), { row: identity });
+    },
+    [deriveRowIdentity, t],
+  );
+
+  const activateRowPress = useCallback(
+    (row: any, rowIndex: number) => {
+      onRowPress?.(row.original as TData, rowIndex);
+    },
+    [onRowPress],
+  );
+
+  /**
+   * Press/keyboard/AT props for one pressable row (grid `<tr>`, virtualized
+   * row host, or mobile card). Spread LAST so the roving tabIndex overrides
+   * the static -1 the grid row carries otherwise.
+   *
+   * - Pointer: activation skips presses originating on inner interactive
+   *   elements (isInteractiveInnerTarget — the stopPropagation contract's
+   *   defensive arm).
+   * - Keyboard (LC-50): Enter AND Space each synthesize exactly one
+   *   activation (repeat + defaultPrevented guarded); arrows/Home/End rove
+   *   within the row set; Shift+Tab exits (no key trap).
+   */
+  const getRowPressProps = useCallback(
+    (row: any, rowIndex: number, variant: "row" | "card" = "row") => {
+      if (!rowPressActive) return {};
+      const handlePress = (event: any) => {
+        if (event?.defaultPrevented) return;
+        const targetEl = event?.target ?? event?.nativeEvent?.target;
+        if (isWeb && typeof Element !== "undefined" && targetEl instanceof Element) {
+          const boundary = targetEl.closest('[data-row-press="true"]');
+          if (isInteractiveInnerTarget(targetEl, boundary)) return;
+        }
+        activateRowPress(row, rowIndex);
+      };
+      return {
+        "aria-label": deriveRowLabel(row, rowIndex),
+        onPress: handlePress,
+        cursor: "pointer" as const,
+        pressStyle: { backgroundColor: "$color4" },
+        ...(variant === "card" ? { role: "button" as const } : {}),
+        ...(isWeb && !isSSR
+          ? {
+              tabIndex: rowIndex === effectiveRowPressAnchor ? 0 : -1,
+              focusVisibleStyle: ensureFocusVisibleRing({ outlineOffset: -2 }),
+              "data-row-press": "true",
+              onFocus: (e: React.FocusEvent) => {
+                // Only a focused ROW moves the anchor; focus on an inner
+                // control (own tab stop) leaves the roving state alone.
+                if (e.target === e.currentTarget) setRowPressAnchor(rowIndex);
+              },
+              onBlur: (e: React.FocusEvent) => {
+                const next = e.relatedTarget;
+                if (!(next instanceof Element) || !next.closest('[data-row-press="true"]')) {
+                  setRowPressAnchor(0);
+                }
+              },
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.defaultPrevented) return;
+                // Keys on focused inner controls belong to those controls.
+                if (e.target !== e.currentTarget) return;
+                const key = e.key;
+                if (key === "Enter" || key === " " || key === "Spacebar") {
+                  // preventDefault stops Space page-scroll; stopPropagation
+                  // keeps the container-level keyboard nav (Excel mode) from
+                  // double-activating the same physical key.
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (e.repeat) return;
+                  activateRowPress(row, rowIndex);
+                  return;
+                }
+                if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  const rowEl = e.currentTarget as HTMLElement;
+                  const scope =
+                    rowEl.closest('[data-row-press-scope="true"]') ?? rowEl.ownerDocument;
+                  const pressRows = Array.from(
+                    scope.querySelectorAll('[data-row-press="true"]'),
+                  ) as HTMLElement[];
+                  const currentIdx = pressRows.indexOf(rowEl);
+                  if (currentIdx < 0) return;
+                  const nextIdx =
+                    key === "Home"
+                      ? 0
+                      : key === "End"
+                        ? pressRows.length - 1
+                        : Math.min(
+                            Math.max(currentIdx + (key === "ArrowDown" ? 1 : -1), 0),
+                            pressRows.length - 1,
+                          );
+                  pressRows[nextIdx]?.focus();
+                }
+              },
+            }
+          : {}),
+      };
+    },
+    [rowPressActive, deriveRowLabel, activateRowPress, effectiveRowPressAnchor, isSSR],
+  );
+
   const handleCellChange = useCallback(
     async (rowIndex: number, columnId: string, newValue: any) => {
       if (readOnly || disabled) return;
@@ -519,7 +675,28 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       const value = cell.getValue();
 
       if (columnDef.cell && !columnDef.field) {
-        return flexRender(columnDef.cell, cell.getContext());
+        // DG-TBL-01 for CUSTOM cell renderers: the cell box's own
+        // justifyContent no-ops in the semantic-table displayMode
+        // (display: table-cell is not a flex container), so the column's
+        // resolved alignment rides this full-width flex container instead —
+        // consumers never self-align. The built-in DataTableCell branch
+        // below aligns internally (CellWrapper) and stays unwrapped.
+        const customAlign = resolveColumnAlign({
+          ...(columnDef as DataTableColumn),
+          id: cell.column.id,
+        });
+        return (
+          <View
+            width="100%"
+            minWidth={0}
+            flexDirection="row"
+            alignItems="center"
+            justifyContent={alignToFlex(customAlign)}
+            {...({ "data-cell-align": customAlign } as any)}
+          >
+            {flexRender(columnDef.cell, cell.getContext())}
+          </View>
+        );
       }
 
       const columnField = getColumnField(columnDef);
@@ -556,8 +733,6 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     [handleCellChange, readOnly, disabled, knobProps.sizeToken, isCompact],
   );
 
-  const isSSR = typeof window === "undefined";
-
   const extraColumnsBefore =
     (enableRowSelection ? 1 : 0) + (showRowNumbers ? 1 : 0) + (enableRowExpansion ? 1 : 0);
   const extraColumnsAfter = showDeleteRow && !readOnly ? 1 : 0;
@@ -651,10 +826,9 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 disabled={disabled}
                 checkboxProps={{
                   // Row identity in the name so repeated per-row actions are
-                  // differentiated for screen readers (DG-A11Y-06).
-                  "aria-label": withInterp(t("Select row {{row}}", { row: rowIndex + 1 }), {
-                    row: rowIndex + 1,
-                  }),
+                  // differentiated for screen readers (DG-A11Y-06). The
+                  // aria-label rides the role="checkbox" frame itself.
+                  "aria-label": deriveSelectRowLabel(row, rowIndex),
                 }}
                 compact={isCompact}
               />
@@ -840,6 +1014,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
       minRows,
       isCompact,
       t,
+      deriveSelectRowLabel,
       ExpandCaretIcon,
       expandedCaretRotation,
       clipBodyCells,
@@ -1084,6 +1259,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   selectAllIndeterminate={selectAllIndeterminate}
                   onToggleSelectAll={toggleSelectAll}
                   compact={isCompact}
+                  selectRowLabel={deriveSelectRowLabel}
+                  {...(rowPressActive ? { getRowPressProps } : {})}
                 />
               </>
             ) : (
@@ -1099,7 +1276,13 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                 }}
                 flexDirection="column"
                 width="100%"
-                flexGrow={1}
+                // Grow 0 / shrink 1 / basis auto: the grid frame hugs its
+                // rows and only compresses (into internal scroll) when the
+                // parent is shorter. flexGrow 1 stretched the frame to fill
+                // tall parents, painting a dead zone between the last row
+                // and the frame's bottom border on short pages (the frame
+                // claimed data area that held no data — Axiom 6/LC-37).
+                flexGrow={0}
                 flexShrink={1}
                 flexBasis="auto"
                 minHeight={0}
@@ -1144,6 +1327,8 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                   // to it instead of the scrolling content View. Content
                   // fits the max-content box, so nothing needs the clip.
                   {...(hScroll && enableColumnPinning ? { overflow: "visible" as any } : {})}
+                  // Roving-focus DOM scope for onRowPress arrow keys (LC-49).
+                  {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}
                 >
                   {/* Table Header */}
                   <Table.Head zIndex="$1" aria-label={t("Table headers")}>
@@ -1553,6 +1738,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                             extraColumnsAfter={extraColumnsAfter}
                             table={table}
                             hasInfiniteTail={hasInfiniteTail}
+                            {...(rowPressActive ? { getRowPressProps } : {})}
                           />
                         </Table.Cell>
                       </Table.Row>
@@ -1646,6 +1832,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                     : "odd"
                                   : "off",
                               } as any)}
+                              {...(getRowPressProps(row, index) as any)}
                             >
                               {renderRowContent(row, index, isLastRow)}
                             </Table.Row>

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -42,6 +42,12 @@ export interface DataTableVirtualizedProps {
    * scroll range so appended pages grow geometry seamlessly.
    */
   hasInfiniteTail?: boolean;
+  /**
+   * onRowPress support: press/keyboard/AT props for one pressable row
+   * (built by DataTableRoot; spread on the row host so virtual rows keep
+   * the same activation + roving-focus contract as grid rows).
+   */
+  getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
 }
 
 export function DataTableVirtualized({
@@ -60,6 +66,7 @@ export function DataTableVirtualized({
   getColSizeProps,
   renderRowContent,
   hasInfiniteTail = false,
+  getRowPressProps,
 }: DataTableVirtualizedProps) {
   return (
     <div
@@ -188,6 +195,7 @@ export function DataTableVirtualized({
               }
               role="row"
               aria-rowindex={virtualRow.index + 1}
+              {...(getRowPressProps ? (getRowPressProps(row, virtualRow.index) as any) : {})}
             >
               {/* div cells (role="cell" via the primitive): a real <td> is
                   not a valid child of the absolutely-positioned div rows */}

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

@@ -213,7 +213,10 @@ describe("DataTable card layout", () => {
           onStateChange={vi.fn()}
         />,
       );
-      expect(getAllByLabelText(/^Select row \d+$/).length).toBe(sampleData.length);
+      // Selection toggles are named by ROW IDENTITY (first cell value /
+      // rowLabel), not a bare position — "Select row Alice", not "Select
+      // row 1" (DG-A11Y-06; selectionSemantics.spec pins the derivation).
+      expect(getAllByLabelText(/^Select row .+$/).length).toBe(sampleData.length);
       expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
     });
   });

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

@@ -0,0 +1,124 @@
+/**
+ * Custom-cell alignment (DG-TBL-01 / LC-44 ROW-LINE).
+ *
+ * Custom `cell` renderers historically LOST the column's `align` on web:
+ * in the semantic-table displayMode (columnLayout="auto") `Table.Cell` is
+ * `display: table-cell`, where the cell box's own flex `justifyContent` is
+ * a no-op — only the built-in DataTableCell self-aligned, and every custom
+ * renderer had to hand-roll its own alignment wrapper (the InsightsRowLink
+ * class of bug). The fix: DataTable wraps flexRender output in a
+ * full-width flex container driven by the resolved column align
+ * (`data-cell-align`), in every displayMode, so custom cells align like
+ * built-ins with zero consumer code.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Text } from "tamagui";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Pokemon = {
+  id: number;
+  name: string;
+  xp: number;
+  active: boolean;
+};
+
+const sampleData: Pokemon[] = [
+  { id: 1, name: "Bulbasaur", xp: 64, active: true },
+  { id: 2, name: "Charmander", xp: 62, active: false },
+];
+
+const customColumns: DataTableColumn<Pokemon>[] = [
+  {
+    id: "name",
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ getValue }) => <Text>{String(getValue())}</Text>,
+  },
+  {
+    id: "xp",
+    accessorKey: "xp",
+    header: "XP",
+    align: "right",
+    cell: ({ getValue }) => <Text>{String(getValue())}</Text>,
+  },
+  {
+    id: "active",
+    accessorKey: "active",
+    header: "Active",
+    align: "center",
+    cell: ({ getValue }) => <Text>{getValue() ? "yes" : "no"}</Text>,
+  },
+  // Built-in field path (no custom cell) — must NOT grow a wrapper.
+  // (accessor `id`, not `xp`: the custom XP column also paints its value,
+  // and duplicated cell text breaks the single-match queries below.)
+  { id: "plain_id", accessorKey: "id", header: "Plain ID", field: "stepper" },
+];
+
+function alignContainerOf(el: HTMLElement): HTMLElement | null {
+  return el.closest("[data-cell-align]") as HTMLElement | null;
+}
+
+function renderTable(columnLayout: "auto" | "equal") {
+  return renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={customColumns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      columnLayout={columnLayout}
+      enablePagination={false}
+      readOnly
+    />,
+  );
+}
+
+describe.each(["auto", "equal"] as const)(
+  "DataTable custom-cell alignment (columnLayout=%s)",
+  (columnLayout) => {
+    it("wraps custom cells in an alignment container driven by the column align", () => {
+      renderTable(columnLayout);
+
+      const nameContainer = alignContainerOf(screen.getByText("Bulbasaur"));
+      expect(nameContainer).not.toBeNull();
+      expect(nameContainer!.getAttribute("data-cell-align")).toBe("left");
+
+      // The wrapper is a full-width flex row whose justifyContent follows
+      // the resolved align (this is what display:table-cell's dead
+      // justifyContent could not do). happy-dom does not resolve tamagui's
+      // class-based styles, so computed flex geometry (display:flex,
+      // justify-content, shared ink edges ±1px) is pinned in the live
+      // browser probe `p-results/table-rowpress/probe.mjs`; here the
+      // structural contract is the container + its declared alignment.
+      const xpContainer = alignContainerOf(screen.getByText("64"));
+      expect(xpContainer).not.toBeNull();
+      expect(xpContainer!.getAttribute("data-cell-align")).toBe("right");
+
+      const centerContainer = alignContainerOf(screen.getAllByText("yes")[0]);
+      expect(centerContainer).not.toBeNull();
+      expect(centerContainer!.getAttribute("data-cell-align")).toBe("center");
+    });
+
+    it("headers carry the same resolved alignment as their cells", () => {
+      const { container } = renderTable(columnLayout);
+      const xpHeader = container.querySelector("#xp-header");
+      expect(xpHeader?.getAttribute("data-align")).toBe("right");
+      const nameHeader = container.querySelector("#name-header");
+      expect(nameHeader?.getAttribute("data-align")).toBe("left");
+    });
+
+    it("built-in field cells stay unwrapped (they self-align internally)", () => {
+      const { container } = renderTable(columnLayout);
+      // Body cells for the plain field column contain no alignment wrapper.
+      const bodyCells = Array.from(
+        container.querySelectorAll('[data-align="right"]'),
+      ) as HTMLElement[];
+      const plainFieldCells = bodyCells.filter(
+        (cell) => cell.id === "" && !cell.querySelector("[data-cell-align]"),
+      );
+      expect(plainFieldCells.length).toBeGreaterThan(0);
+    });
+  },
+);

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

@@ -156,7 +156,8 @@ describe("DataTable disabled contract (grid layout)", () => {
         onStateChange={vi.fn()}
       />,
     );
-    const rowCheckbox = getAllByLabelText(/^Select row 1$/)[0];
+    // Selection toggles are named by row identity (first cell value).
+    const rowCheckbox = getAllByLabelText(/^Select row John$/)[0];
     fireEvent.click(rowCheckbox);
     await waitFor(() => {
       expect(container.querySelectorAll('[aria-checked="true"]').length).toBe(0);
@@ -233,8 +234,8 @@ describe("DataTable disabled contract (card layout)", () => {
       expect(onDataChange).not.toHaveBeenCalled();
     });
 
-    // Selection does not toggle.
-    fireEvent.click(getAllByLabelText(/^Select row 1$/)[0]);
+    // Selection does not toggle. (Toggles are named by row identity.)
+    fireEvent.click(getAllByLabelText(/^Select row John$/)[0]);
     await waitFor(() => {
       expect(container.querySelectorAll('[aria-checked="true"]').length).toBe(0);
     });

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

@@ -134,6 +134,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   enableColumnPinning = false,
   maxPinnedColumns = 3,
   enableKeyboardNavigation: _enableKeyboardNavigation = false,
+  onRowPress,
+  rowLabel,
   readOnly = false,
   onCellChange,
   name,
@@ -456,6 +458,47 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
 
   const tableZebraOn = knobProps.tableZebra === "on";
 
+  // ---- Row press (onRowPress): the ROW is one pressable unit ----
+  // Native twin of the web contract: press anywhere on the row activates.
+  // Inner controls need no isolation walk here — native nested pressables
+  // claim the gesture responder, so a child press never bubbles to the row
+  // (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 fromAccessor = rowLabel?.(row.original as TData);
+      if (fromAccessor) return fromAccessor;
+      let firstCellValue: unknown;
+      try {
+        firstCellValue = row.getVisibleCells()[0]?.getValue();
+      } catch {
+        firstCellValue = undefined;
+      }
+      if (
+        (typeof firstCellValue === "string" && firstCellValue.length > 0) ||
+        typeof firstCellValue === "number"
+      ) {
+        return String(firstCellValue);
+      }
+      return withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 });
+    },
+    [rowLabel, t],
+  );
+
+  const getRowPressProps = useCallback(
+    (row: (typeof tableRows)[0], index: number) => {
+      if (!rowPressActive) return {};
+      return {
+        onPress: () => onRowPress?.(row.original as TData, index),
+        role: "button" as const,
+        "aria-label": deriveRowLabel(row, index),
+        pressStyle: { backgroundColor: "$color4" },
+      };
+    },
+    [rowPressActive, onRowPress, deriveRowLabel],
+  );
+
   const renderRow = useCallback(
     (row: (typeof tableRows)[0], index: number) => (
       <Table.Row
@@ -467,11 +510,12 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
         {...({
           "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
         } as any)}
+        {...(getRowPressProps(row, index) as any)}
       >
         {renderRowContent(row, index)}
       </Table.Row>
     ),
-    [renderRowContent, tableZebraOn, t],
+    [renderRowContent, tableZebraOn, t, getRowPressProps],
   );
 
   const renderMobileCard = useCallback(
@@ -487,6 +531,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
           borderColor="$borderColor"
           padding="$3"
           marginBottom="$2"
+          {...(getRowPressProps(row, index) as any)}
         >
           {showRowNumbers && (
             <View
@@ -563,6 +608,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       minRows,
       renderCellContent,
       t,
+      getRowPressProps,
     ],
   );