@multiplatform.one/table 6.7.0 → 7.1.0

package/src/components/SimpleTable/simpleTable.spec.tsx

@@ -1,20 +1,15 @@
 /**
- * SimpleTable tests - 4 focused tests for Task Group 6.
- *
- * 1. Basic data rendering (array of objects with column config produces correct cells)
- * 2. Column alignment prop (align: "left" | "center" | "right") applies correctly
- * 3. Intent props on rows (data objects with _intent: "error" render error-themed rows)
- * 4. Responsive card layout on mobile (renders cards instead of table rows when sm media query matches)
+ * SimpleTable tests.
  *
  * Note: In the happy-dom test env, Tamagui's useMedia returns { sm: false }
  * (mobile breakpoint), so the component renders in card mode by default.
- * Tests 1-2 test the table rendering directly by importing the internal
- * SimpleTableDesktop component. Test 4 tests the responsive switching
- * by verifying card mode behavior on mobile.
+ * Grid tests import SimpleTableDesktop; card tests use SimpleTable.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { Preset } from "@multiplatform.one/theme";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { SimpleTable, SimpleTableDesktop } from "./index";
 import type { SimpleTableColumn } from "./index";
 
@@ -157,8 +152,8 @@ describe("SimpleTable", () => {
     expect(container.textContent).toContain("Item 2");
     expect(container.textContent).toContain("200");
 
-    // In card mode, header labels appear as field labels within cards
-    expect(container.textContent).toContain("Name");
+    // First column is the card title (no repeated "Name" label); remaining
+    // columns render as label/value rows.
     expect(container.textContent).toContain("Value");
 
     // Card mode should not render table structure
@@ -169,4 +164,137 @@ describe("SimpleTable", () => {
     const hasCardLayout = container.querySelector('[data-testid="simple-table-cards"]');
     expect(hasCardLayout).not.toBeNull();
   });
+
+  it("spans the empty state across every column", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "age", header: "Age" },
+      { accessorKey: "city", header: "City" },
+    ];
+    const { container } = renderWithProviders(
+      <SimpleTableDesktop data={[]} columns={columns} aria-label="Empty" />,
+    );
+    const emptyCell = container.querySelector("tbody td, tbody [role='cell']");
+    expect(emptyCell).not.toBeNull();
+    expect(emptyCell?.getAttribute("colspan") ?? emptyCell?.getAttribute("colSpan")).toBe("3");
+    expect(container.textContent).toContain("No data available");
+  });
+
+  it("stripes rows when tableZebra is on and defaults off", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "age", header: "Age" },
+    ];
+    const data = [
+      { name: "A", age: 1 },
+      { name: "B", age: 2 },
+    ];
+
+    const { container: off } = renderWithProviders(
+      <Preset overrides={{ tableZebra: "off" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    for (const row of off.querySelectorAll("[data-table-zebra]")) {
+      expect(row.getAttribute("data-table-zebra")).toBe("off");
+    }
+
+    const { container: on } = renderWithProviders(
+      <Preset overrides={{ tableZebra: "on" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    expect(on.querySelectorAll("[data-table-zebra='even']").length).toBeGreaterThan(0);
+    expect(on.querySelectorAll("[data-table-zebra='odd']").length).toBeGreaterThan(0);
+  });
+
+  it("renders a custom cell renderer and a visible caption", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      {
+        accessorKey: "age",
+        header: "Age",
+        cell: (value) => `age:${value}`,
+      },
+    ];
+    const { container } = renderWithProviders(
+      <SimpleTableDesktop caption="Crew" data={[{ name: "Ada", age: 36 }]} columns={columns} />,
+    );
+    expect(container.textContent).toContain("Crew");
+    expect(container.textContent).toContain("age:36");
+    expect(container.querySelector("caption")).not.toBeNull();
+  });
+
+  it("activates onRowPress with one roving tab stop (LC-49) and keyboard (LC-50)", async () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "city", header: "City" },
+    ];
+    const data = [
+      { name: "Alice", city: "Portland" },
+      { name: "Bob", city: "Seattle" },
+      { name: "Carol", city: "Austin" },
+    ];
+    const onRowPress = vi.fn();
+    const { container } = renderWithProviders(
+      <SimpleTableDesktop
+        data={data}
+        columns={columns}
+        onRowPress={onRowPress}
+        rowLabel={(row) => row.name}
+      />,
+    );
+
+    const rows = Array.from(container.querySelectorAll('[data-row-press="true"]')) as HTMLElement[];
+    expect(rows).toHaveLength(3);
+    expect(rows.map((row) => row.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+
+    fireEvent.click(rows[1]);
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenCalledWith(expect.objectContaining({ name: "Bob" }), 1);
+
+    rows[0].focus();
+    fireEvent.keyDown(rows[0], { key: "Enter" });
+    expect(onRowPress).toHaveBeenCalledTimes(2);
+    fireEvent.keyDown(rows[0], { key: " " });
+    expect(onRowPress).toHaveBeenCalledTimes(3);
+    fireEvent.keyDown(rows[0], { key: "Enter", repeat: true });
+    expect(onRowPress).toHaveBeenCalledTimes(3);
+
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(rows[1]);
+    await waitFor(() => {
+      expect(rows.map((row) => row.getAttribute("tabindex"))).toEqual(["-1", "0", "-1"]);
+    });
+    fireEvent.keyDown(rows[1], { key: "End" });
+    expect(document.activeElement).toBe(rows[2]);
+    fireEvent.keyDown(rows[2], { key: "Home" });
+    expect(document.activeElement).toBe(rows[0]);
+  });
+
+  it("cards with onRowPress expose one roving tab stop and role=button", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "value", header: "Value" },
+    ];
+    const onRowPress = vi.fn();
+    const { container } = renderWithProviders(
+      <SimpleTable
+        data={[
+          { name: "Item 1", value: "100" },
+          { name: "Item 2", value: "200" },
+        ]}
+        columns={columns}
+        onRowPress={onRowPress}
+      />,
+    );
+    const cards = Array.from(
+      container.querySelectorAll('[data-row-press="true"]'),
+    ) as HTMLElement[];
+    expect(cards).toHaveLength(2);
+    expect(cards[0].getAttribute("role")).toBe("button");
+    expect(cards.map((card) => card.getAttribute("tabindex"))).toEqual(["0", "-1"]);
+    fireEvent.click(cards[1]);
+    expect(onRowPress).toHaveBeenCalledWith(expect.objectContaining({ name: "Item 2" }), 1);
+  });
 });

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

@@ -9,7 +9,7 @@
  * - No Frappe-style `idx` bookkeeping — array order is row order.
  */
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   Button,
   Field,
@@ -21,6 +21,8 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
+import { getTableCellPadding } from "@multiplatform.one/table-primitives";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Text, View, XStack, YStack } from "tamagui";
 import type {
   DataTableColumn,
@@ -71,6 +73,11 @@ export interface TableInputProps<TData extends DataTableData = DataTableData> {
   emptyMessage?: string;
   /** Accessible label */
   "aria-label"?: string;
+  /**
+   * Nested density (LC-73). Child tables sit on a form surface, so compact
+   * is the default — Frappe's grid is a dense in-list editor, not a page table.
+   */
+  compact?: boolean;
 }
 
 export function TableInput<TData extends DataTableData = DataTableData>({
@@ -93,6 +100,7 @@ export function TableInput<TData extends DataTableData = DataTableData>({
   defaultRow,
   emptyMessage,
   "aria-label": ariaLabel,
+  compact = true,
 }: TableInputProps<TData>) {
   const { t } = useTranslation();
   const { resolvedForm } = useFormField({ form: formProp });
@@ -127,6 +135,7 @@ export function TableInput<TData extends DataTableData = DataTableData>({
     defaultRow,
     emptyMessage: emptyMessage ?? t("No rows"),
     ariaLabel: resolvedAriaLabel,
+    compact,
     t,
   };
 
@@ -179,6 +188,7 @@ interface TableInputInnerProps<TData extends DataTableData> {
   defaultRow?: Partial<TData>;
   emptyMessage: string;
   ariaLabel: string;
+  compact: boolean;
   t: (key: string, options?: Record<string, unknown>) => string;
 }
 
@@ -197,8 +207,16 @@ function TableInputInner<TData extends DataTableData>({
   defaultRow,
   emptyMessage,
   ariaLabel,
+  compact,
   t,
 }: TableInputInnerProps<TData>) {
+  const { knobProps } = useResolvedKnobs({ compact });
+  const cellPad = getTableCellPadding(knobProps.space);
+  const chromePx = knobProps.nestedControl.px;
+  const indexWidth = Math.max(36, chromePx);
+  const actionWidth = chromePx + 16;
+  const [activeRowId, setActiveRowId] = useState<string | null>(null);
+
   const handleCellChange = useCallback(
     (rowIndex: number, columnId: string, value: unknown) => {
       onCellChange?.(rowIndex, columnId, value);
@@ -241,99 +259,91 @@ function TableInputInner<TData extends DataTableData>({
   );
 
   const renderHeader = () => (
-    <XStack
-      backgroundColor="$gray3"
-      borderBottomWidth={1}
-      borderBottomColor="$borderColor"
-      paddingVertical="$2"
-      paddingHorizontal="$2"
-    >
+    <XStack backgroundColor="$color2" {...hairline.bottom} {...cellPad}>
       {showRowNumbers && (
-        <View width={40} paddingHorizontal="$1">
-          <Text fontWeight="600" color="$gray11" fontSize="$2">
+        <View width={indexWidth} paddingHorizontal="$1">
+          <Text fontWeight="600" color="$color10" fontSize={knobProps.label.fontSize}>
             #
           </Text>
         </View>
       )}
       {columns.map((col, index) => (
         <View key={columnIds[index]} flex={1} paddingHorizontal="$1">
-          <Text fontWeight="600" color="$gray12" fontSize="$2">
+          <Text fontWeight="600" color="$color12" fontSize={knobProps.label.fontSize}>
             {typeof col.header === "string" ? col.header : columnIds[index]}
           </Text>
         </View>
       ))}
-      {showDeleteRow && !readOnly && <View width={50} />}
+      {showDeleteRow && !readOnly && <View width={actionWidth} />}
     </XStack>
   );
 
-  const renderRow = ({ item, index }: { item: TData; index: number }) => (
-    <XStack
-      borderBottomWidth={1}
-      borderBottomColor="$borderColor"
-      paddingVertical="$2"
-      paddingHorizontal="$2"
-      backgroundColor={index % 2 === 0 ? "$background" : "$gray2"}
-    >
-      {showRowNumbers && (
-        <View width={40} paddingHorizontal="$1" justifyContent="center">
-          <Text color="$gray11" fontSize="$2">
-            {index + 1}
-          </Text>
-        </View>
-      )}
-      {columns.map((col, colIndex) => {
-        const columnId = columnIds[colIndex];
-        const value = item[columnId as keyof TData];
-        const field = (col.field || "input") as DataTableField;
-        const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
+  const renderRow = ({ item, index }: { item: TData; index: number }) => {
+    const rowId = String((item as DataTableData).id ?? index);
+    const isActive = activeRowId === rowId;
+    return (
+      <XStack
+        {...hairline.bottom}
+        {...cellPad}
+        backgroundColor={isActive ? "$color3" : undefined}
+        onPressIn={() => setActiveRowId(rowId)}
+      >
+        {showRowNumbers && (
+          <View width={indexWidth} paddingHorizontal="$1" justifyContent="center">
+            <Text color="$color10" fontSize={knobProps.label.fontSize}>
+              {index + 1}
+            </Text>
+          </View>
+        )}
+        {columns.map((col, colIndex) => {
+          const columnId = columnIds[colIndex];
+          const value = item[columnId as keyof TData];
+          const field = (col.field || "input") as DataTableField;
+          const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
 
-        return (
-          <View key={columnId} flex={1} paddingHorizontal="$1">
-            <DataTableCell
-              value={value}
-              onChange={(newValue) => handleCellChange(index, columnId, newValue)}
-              field={field}
-              fieldProps={fieldProps}
-              readOnly={readOnly}
-              columnId={columnId}
-              columnLabel={typeof col.header === "string" ? col.header : undefined}
-              rowIndex={index}
-              rowData={item}
-            />
+          return (
+            <View key={columnId} flex={1} paddingHorizontal="$1">
+              <DataTableCell
+                value={value}
+                onChange={(newValue) => handleCellChange(index, columnId, newValue)}
+                field={field}
+                fieldProps={fieldProps}
+                readOnly={readOnly}
+                compact={compact}
+                columnId={columnId}
+                columnLabel={typeof col.header === "string" ? col.header : undefined}
+                rowIndex={index}
+                rowData={item}
+              />
+            </View>
+          );
+        })}
+        {showDeleteRow && !readOnly && (
+          <View width={actionWidth} justifyContent="center" alignItems="center">
+            <Button
+              chromeless
+              compact={compact}
+              onPress={() => handleDeleteRow(index)}
+              disabled={!canDelete}
+              hitSlop={knobProps.nestedControl.hitSlop}
+              aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
+                row: index + 1,
+              })}
+            >
+              <TrashIcon size={16} color="$red10" />
+            </Button>
           </View>
-        );
-      })}
-      {showDeleteRow && !readOnly && (
-        <View width={50} justifyContent="center" alignItems="center">
-          <Button
-            size="$2"
-            outlined
-            onPress={() => handleDeleteRow(index)}
-            disabled={!canDelete}
-            aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-              row: index + 1,
-            })}
-          >
-            <TrashIcon size={16} color="$red10" />
-          </Button>
-        </View>
-      )}
-    </XStack>
-  );
+        )}
+      </XStack>
+    );
+  };
 
   const renderSkeletonRows = () => (
     <YStack>
       {Array.from({ length: SKELETON_ROW_COUNT }, (_, rowIndex) => (
-        <XStack
-          key={`skeleton-${rowIndex}`}
-          borderBottomWidth={1}
-          borderBottomColor="$borderColor"
-          paddingVertical="$2"
-          paddingHorizontal="$2"
-          alignItems="center"
-        >
+        <XStack key={`skeleton-${rowIndex}`} {...hairline.bottom} {...cellPad} alignItems="center">
           {showRowNumbers && (
-            <View width={40} paddingHorizontal="$1">
+            <View width={indexWidth} paddingHorizontal="$1">
               <Skeleton variant="rounded" width={16} height={16} />
             </View>
           )}
@@ -342,7 +352,7 @@ function TableInputInner<TData extends DataTableData>({
               <Skeleton variant="rounded" width="70%" height={16} />
             </View>
           ))}
-          {showDeleteRow && !readOnly && <View width={50} />}
+          {showDeleteRow && !readOnly && <View width={actionWidth} />}
         </XStack>
       ))}
     </YStack>
@@ -350,15 +360,15 @@ function TableInputInner<TData extends DataTableData>({
 
   const renderEmpty = () => (
     <View padding="$4" alignItems="center">
-      <Text color="$gray11">{emptyMessage}</Text>
+      <Text color="$color10">{emptyMessage}</Text>
     </View>
   );
 
   return (
     <YStack
-      borderWidth={1}
-      borderColor="$borderColor"
-      borderRadius="$2"
+      {...knobProps.surface}
+      {...knobProps.borderRadiusOuter}
+      elevation={knobProps.elevation}
       overflow="hidden"
       accessibilityLabel={ariaLabel}
       aria-busy={skeleton || undefined}
@@ -377,10 +387,10 @@ function TableInputInner<TData extends DataTableData>({
         />
       )}
       {showAddRow && !readOnly && !skeleton && (
-        <XStack padding="$2" borderTopWidth={1} borderTopColor="$borderColor">
+        <XStack {...hairline.top} {...cellPad}>
           <Button
-            size="$2"
-            outlined
+            chromeless
+            compact={compact}
             onPress={handleAddRow}
             disabled={!canAddRow}
             icon={<PlusIcon size={16} />}