@multiplatform.one/table 7.4.1 → 7.6.0

package/src/components/SimpleTable/index.tsx

@@ -10,7 +10,11 @@
  */
 
 import { EmptyState } from "@multiplatform.one/components";
-import { ensureFocusVisibleRing, hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  useResolvedKnobs,
+  type DisabledRecipe,
+} from "@multiplatform.one/theme";
 import { useCallback, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, ViewProps } from "tamagui";
@@ -106,27 +110,45 @@ type KnobBody = {
   color?: string;
 };
 
+/** Inner grid rules follow the borderWidth knob (LC-18). Zero means zero. */
+function gridRule(borderWidth: number, on: boolean) {
+  if (!on || borderWidth === 0) return {};
+  return {
+    borderBottomWidth: borderWidth,
+    borderBottomColor: "$borderColor" as const,
+  };
+}
+
+/** Cell inset rides `space` (SP-EDGE: padding/height, never an outer row inset). */
+function cellPad(gap: string) {
+  return { paddingHorizontal: gap, paddingVertical: gap };
+}
+
+/** LC-40: disabled rows wash chrome (keepLabel) or dim the assembly (dimWhole). */
+function disabledChrome(disabled: boolean, disabledState: DisabledRecipe) {
+  if (!disabled) return {};
+  if (disabledState.style === "dimWhole") {
+    return { ...disabledState.assemblyKnobProps, "aria-disabled": true as const };
+  }
+  return { ...disabledState.surfaceKnobProps, "aria-disabled": true as const };
+}
+
 function AlignedCellText({
   children,
   align,
   body,
-  sizeToken,
-  emphasized,
-  muted,
+  fontSize,
 }: {
   children: string | number;
   align?: "left" | "center" | "right";
   body: KnobBody;
-  sizeToken: string;
-  emphasized?: boolean;
-  muted?: boolean;
+  fontSize: FontSizeTokens;
 }) {
   return (
     <Text
       {...body}
-      fontSize={sizeToken as FontSizeTokens}
-      color={muted ? "$color11" : "$color12"}
-      fontWeight={emphasized ? "600" : body.fontWeight}
+      fontSize={fontSize}
+      color="$color12"
       display="block"
       width="100%"
       textAlign={align ?? "left"}
@@ -144,20 +166,14 @@ function renderCellContent(
   col: SimpleTableColumn,
   row: Record<string, any>,
   rowIndex: number,
-  colIndex: number,
   body: KnobBody,
-  sizeToken: string,
+  fontSize: FontSizeTokens,
 ): ReactNode {
   const raw = row[col.accessorKey];
   const rendered = col.cell ? col.cell(raw, row, rowIndex) : raw;
   if (rendered == null || typeof rendered === "string" || typeof rendered === "number") {
     return (
-      <AlignedCellText
-        align={col.align}
-        body={body}
-        sizeToken={sizeToken}
-        emphasized={colIndex === 0}
-      >
+      <AlignedCellText align={col.align} body={body} fontSize={fontSize}>
         {rendered ?? ""}
       </AlignedCellText>
     );
@@ -304,7 +320,7 @@ function SimpleTableMobileCards({
   disabled,
 }: SimpleTableMobileCardsProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ component: "SimpleTable" });
+  const { knobProps, disabledState } = useResolvedKnobs({ component: "SimpleTable" });
   const { rowPressActive, getRowPressProps } = useSimpleTableRowPress({
     data,
     columns,
@@ -314,12 +330,18 @@ function SimpleTableMobileCards({
   });
   const tableZebraOn = knobProps.tableZebra === "on";
   const [titleCol, ...detailCols] = columns;
+  const typeSize = knobProps.label.fontSize;
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
 
   if (data.length === 0) {
     return (
-      <View flexDirection="column" {...knobProps.gap}>
+      <View
+        flexDirection="column"
+        {...knobProps.gap}
+        {...disabledChrome(Boolean(disabled), disabledState)}
+      >
         {caption ? (
-          <Text {...knobProps.label} color="$color11">
+          <Text {...knobProps.label} color={knobProps.textAccentColor}>
             {caption}
           </Text>
         ) : null}
@@ -335,7 +357,7 @@ function SimpleTableMobileCards({
       {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}
     >
       {caption ? (
-        <Text {...knobProps.label} color="$color11">
+        <Text {...knobProps.label} color={knobProps.textAccentColor}>
           {caption}
         </Text>
       ) : null}
@@ -355,8 +377,9 @@ function SimpleTableMobileCards({
             elevation={knobProps.elevation}
             {...(tableZebraOn && rowIndex % 2 === 1 ? { backgroundColor: "$color2" } : {})}
             {...(intent ? { theme: intent, backgroundColor: "$color3" as const } : {})}
-            hoverStyle={{ backgroundColor: "$backgroundHover" }}
-            {...({ animation: "quick" } as any)}
+            {...(disabled ? {} : { hoverStyle: { backgroundColor: "$backgroundHover" } })}
+            {...motion}
+            {...disabledChrome(Boolean(disabled), disabledState)}
             {...({
               "data-table-zebra": tableZebraOn ? (rowIndex % 2 === 0 ? "even" : "odd") : "off",
             } as any)}
@@ -366,22 +389,16 @@ function SimpleTableMobileCards({
               <View
                 {...(detailCols.length > 0
                   ? {
-                      paddingBottom: "$2",
-                      marginBottom: "$2",
-                      ...hairline.bottom,
-                      borderBottomColor: "$color6",
+                      paddingBottom: knobProps.gap.gap,
+                      marginBottom: knobProps.gap.gap,
+                      ...gridRule(knobProps.surface.borderWidth, true),
                     }
                   : {})}
               >
                 {typeof titleRendered === "string" ||
                 typeof titleRendered === "number" ||
                 titleRendered == null ? (
-                  <AlignedCellText
-                    align={titleCol.align}
-                    body={knobProps.body}
-                    sizeToken={knobProps.sizeToken}
-                    emphasized
-                  >
+                  <AlignedCellText align={titleCol.align} body={knobProps.body} fontSize={typeSize}>
                     {titleRendered ?? ""}
                   </AlignedCellText>
                 ) : (
@@ -394,15 +411,13 @@ function SimpleTableMobileCards({
                 key={col.accessorKey}
                 flexDirection="row"
                 alignItems="center"
-                paddingVertical="$1.5"
-                gap="$2"
-                {...(detailIndex < detailCols.length - 1
-                  ? { ...hairline.bottom, borderBottomColor: "$color6" }
-                  : {})}
+                {...cellPad(knobProps.gap.gap)}
+                {...knobProps.gap}
+                {...gridRule(knobProps.surface.borderWidth, detailIndex < detailCols.length - 1)}
               >
                 <Text
                   {...knobProps.label}
-                  color="$color10"
+                  color={knobProps.textAccentColor}
                   width="40%"
                   flexShrink={0}
                   numberOfLines={1}
@@ -411,14 +426,7 @@ function SimpleTableMobileCards({
                   {col.header}
                 </Text>
                 <View flex={1} minWidth={0}>
-                  {renderCellContent(
-                    col,
-                    row,
-                    rowIndex,
-                    detailIndex + 1,
-                    knobProps.body,
-                    knobProps.sizeToken,
-                  )}
+                  {renderCellContent(col, row, rowIndex, knobProps.body, typeSize)}
                 </View>
               </View>
             ))}
@@ -458,7 +466,7 @@ export function SimpleTableDesktop({
   disabled,
   ...props
 }: SimpleTableDesktopProps) {
-  const { knobProps } = useResolvedKnobs({ component: "SimpleTable" });
+  const { knobProps, disabledState } = useResolvedKnobs({ component: "SimpleTable" });
   const { t } = useTranslation();
   const { rowPressActive, getRowPressProps } = useSimpleTableRowPress({
     data,
@@ -469,112 +477,117 @@ export function SimpleTableDesktop({
   });
   const tableZebraOn = knobProps.tableZebra === "on";
   const ariaLabel = caption ? undefined : props["aria-label"];
+  const typeSize = knobProps.label.fontSize;
+  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
+  const pad = cellPad(knobProps.gap.gap);
+  const frameBorder = knobProps.surface.borderWidth;
 
   return (
-    <View
+    <Table
       {...props}
       minWidth={0}
-      // overflow="auto" (scrollbar only when content overflows) is web-only —
-      // outside RN's "scroll" | "hidden" | "visible" union (house Record cast).
-      {...({ overflow: "auto" } as Record<string, unknown>)}
+      {...({
+        overflow: "auto",
+        "data-simple-table-frame": "true",
+        "data-border-width": String(frameBorder),
+        "data-animation": knobProps.transition ? "on" : "none",
+      } as Record<string, unknown>)}
+      {...disabledChrome(Boolean(disabled), disabledState)}
+      aria-label={ariaLabel}
+      {...({ "aria-rowcount": data.length + 1 } as any)}
     >
-      <Table aria-label={ariaLabel} {...({ "aria-rowcount": data.length + 1 } as any)}>
-        {caption ? (
-          <Table.Caption>
-            <Text {...knobProps.label} color="$color11">
-              {caption}
-            </Text>
-          </Table.Caption>
-        ) : null}
-        <Table.Head>
-          <Table.Row>
-            {columns.map((col, colIndex) => (
-              <Table.HeaderCell
-                key={col.accessorKey}
-                justifyContent={alignToFlex(col.align)}
-                cellLocation={cellLocationFor(colIndex, columns.length)}
-                data-align={col.align ?? "left"}
+      {caption ? (
+        <Table.Caption>
+          <Text {...knobProps.label} color={knobProps.textAccentColor}>
+            {caption}
+          </Text>
+        </Table.Caption>
+      ) : null}
+      <Table.Head borderBottomWidth={frameBorder} borderBottomColor="$borderColor">
+        <Table.Row>
+          {columns.map((col, colIndex) => (
+            <Table.HeaderCell
+              key={col.accessorKey}
+              justifyContent={alignToFlex(col.align)}
+              cellLocation={cellLocationFor(colIndex, columns.length)}
+              data-align={col.align ?? "left"}
+              data-cell-pad={knobProps.gap.gap}
+              borderRadius={0}
+              {...pad}
+            >
+              {/* Block text filling the cell + textAlign: alignment that
+                  works in the real <th> (display:table-cell — flex props
+                  are inert there) and in the flex displayMode alike. */}
+              <Text
+                {...knobProps.label}
+                color={knobProps.textAccentColor}
+                display="block"
+                width="100%"
+                textAlign={col.align ?? "left"}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                {...(col.align === "right" ? ({ fontVariant: ["tabular-nums"] } as any) : {})}
               >
-                {/* Block text filling the cell + textAlign: alignment that
-                    works in the real <th> (display:table-cell — flex props
-                    are inert there) and in the flex displayMode alike. */}
-                <Text
-                  {...knobProps.body}
-                  {...knobProps.label}
-                  color="$color11"
-                  fontWeight="600"
-                  display="block"
-                  width="100%"
-                  textAlign={col.align ?? "left"}
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                  {...(col.align === "right" ? ({ fontVariant: ["tabular-nums"] } as any) : {})}
-                >
-                  {col.header}
-                </Text>
-              </Table.HeaderCell>
-            ))}
+                {col.header}
+              </Text>
+            </Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Head>
+      <Table.Body {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}>
+        {data.length === 0 ? (
+          <Table.Row>
+            <Table.Cell
+              cellWidth="auto"
+              borderRadius={0}
+              {...({ colSpan: Math.max(columns.length, 1) } as any)}
+            >
+              <EmptyState compact aria-live="polite" title={t("No data available")} />
+            </Table.Cell>
           </Table.Row>
-        </Table.Head>
-        <Table.Body {...(rowPressActive ? ({ "data-row-press-scope": "true" } as any) : {})}>
-          {data.length === 0 ? (
-            <Table.Row>
-              <Table.Cell cellWidth="auto" {...({ colSpan: Math.max(columns.length, 1) } as any)}>
-                <EmptyState compact aria-live="polite" title={t("No data available")} />
-              </Table.Cell>
-            </Table.Row>
-          ) : (
-            data.map((row, rowIndex) => {
-              const intent = row._intent as IntentName | undefined;
-              const intentProps = intent ? { [intent]: true } : {};
-              const isLast = rowIndex === data.length - 1;
-              const zebraFill =
-                !intent && tableZebraOn && rowIndex % 2 === 1
-                  ? { backgroundColor: "$color2" as const }
-                  : {};
-
-              return (
-                <Table.Row
-                  key={resolveRowId(row, rowIndex, getRowId)}
-                  rowLocation={rowLocationFor(rowIndex, data.length)}
-                  hoverStyle={{ backgroundColor: "$backgroundHover" }}
-                  {...({ animation: "quick" } as any)}
-                  {...zebraFill}
-                  {...intentProps}
-                  {...({
-                    "data-table-zebra": tableZebraOn
-                      ? rowIndex % 2 === 0
-                        ? "even"
-                        : "odd"
-                      : "off",
-                  } as any)}
-                  {...(getRowPressProps(row, rowIndex) as any)}
-                >
-                  {columns.map((col, colIndex) => (
-                    <Table.Cell
-                      key={col.accessorKey}
-                      justifyContent={alignToFlex(col.align)}
-                      cellLocation={cellLocationFor(colIndex, columns.length)}
-                      data-align={col.align ?? "left"}
-                      {...(!isLast ? { ...hairline.bottom, borderBottomColor: "$color6" } : {})}
-                    >
-                      {renderCellContent(
-                        col,
-                        row,
-                        rowIndex,
-                        colIndex,
-                        knobProps.body,
-                        knobProps.sizeToken,
-                      )}
-                    </Table.Cell>
-                  ))}
-                </Table.Row>
-              );
-            })
-          )}
-        </Table.Body>
-      </Table>
-    </View>
+        ) : (
+          data.map((row, rowIndex) => {
+            const intent = row._intent as IntentName | undefined;
+            const intentProps = intent ? { [intent]: true } : {};
+            const isLast = rowIndex === data.length - 1;
+            const zebraFill =
+              !intent && tableZebraOn && rowIndex % 2 === 1
+                ? { backgroundColor: "$color2" as const }
+                : {};
+
+            return (
+              <Table.Row
+                key={resolveRowId(row, rowIndex, getRowId)}
+                rowLocation={rowLocationFor(rowIndex, data.length)}
+                {...(disabled ? {} : { hoverStyle: { backgroundColor: "$backgroundHover" } })}
+                {...motion}
+                {...zebraFill}
+                {...intentProps}
+                {...({
+                  "data-table-zebra": tableZebraOn ? (rowIndex % 2 === 0 ? "even" : "odd") : "off",
+                } as any)}
+                {...(getRowPressProps(row, rowIndex) as any)}
+              >
+                {columns.map((col, colIndex) => (
+                  <Table.Cell
+                    key={col.accessorKey}
+                    justifyContent={alignToFlex(col.align)}
+                    cellLocation={cellLocationFor(colIndex, columns.length)}
+                    data-align={col.align ?? "left"}
+                    data-cell-pad={knobProps.gap.gap}
+                    borderRadius={0}
+                    {...pad}
+                    {...gridRule(frameBorder, !isLast)}
+                  >
+                    {renderCellContent(col, row, rowIndex, knobProps.body, typeSize)}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            );
+          })
+        )}
+      </Table.Body>
+    </Table>
   );
 }
 
@@ -599,7 +612,16 @@ export function SimpleTable({
   // Card layout below `$sm` (layout="auto") or when pinned via layout="cards"
   if (layout === "cards" || (layout === "auto" && sm === false)) {
     return (
-      <View {...knobProps.containerRadius} {...props} testID="simple-table-cards">
+      <View
+        {...knobProps.containerRadius}
+        {...props}
+        testID="simple-table-cards"
+        {...({
+          "data-simple-table-frame": "true",
+          "data-border-width": String(knobProps.surface.borderWidth),
+          "data-animation": knobProps.transition ? "on" : "none",
+        } as Record<string, unknown>)}
+      >
         <SimpleTableMobileCards
           data={data}
           columns={columns}

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

@@ -297,4 +297,124 @@ describe("SimpleTable", () => {
     fireEvent.click(cards[1]);
     expect(onRowPress).toHaveBeenCalledWith(expect.objectContaining({ name: "Item 2" }), 1);
   });
+
+  it("owns grid rules from the borderWidth knob (LC-18) and keeps cells square", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "age", header: "Age" },
+    ];
+    const data = [
+      { name: "A", age: 1 },
+      { name: "B", age: 2 },
+    ];
+
+    const { container: none } = renderWithProviders(
+      <Preset overrides={{ borderWidth: "none", borderRadius: "none" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    expect(none.querySelector("[data-simple-table-frame]")?.getAttribute("data-border-width")).toBe(
+      "0",
+    );
+    const noneCells = none.querySelectorAll("td, [role='cell']");
+    expect(noneCells.length).toBeGreaterThan(0);
+    for (const cell of noneCells) {
+      const border = getComputedStyle(cell).borderBottomWidth;
+      expect(border === "0px" || border === "").toBe(true);
+      const radius = getComputedStyle(cell).borderRadius;
+      expect(radius === "0px" || radius === "").toBe(true);
+    }
+
+    const { container: large } = renderWithProviders(
+      <Preset overrides={{ borderWidth: "large" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    expect(
+      large.querySelector("[data-simple-table-frame]")?.getAttribute("data-border-width"),
+    ).toBe("2");
+    const bodyCells = large.querySelectorAll("tbody td, tbody [role='cell']");
+    const firstRowCell = bodyCells[0];
+    expect(firstRowCell).toBeTruthy();
+    expect(
+      Number.parseFloat(getComputedStyle(firstRowCell as Element).borderBottomWidth),
+    ).toBeGreaterThan(0);
+  });
+
+  it("uses label type and the fontWeight knob, never weight 600", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "age", header: "Age" },
+    ];
+    const { container } = renderWithProviders(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <SimpleTableDesktop data={[{ name: "Ada", age: 36 }]} columns={columns} />
+      </Preset>,
+    );
+    const texts = Array.from(container.querySelectorAll("span")).filter((node) =>
+      /Name|Ada/.test(node.textContent ?? ""),
+    );
+    expect(texts.length).toBeGreaterThan(0);
+    for (const node of texts) {
+      const weight = getComputedStyle(node).fontWeight;
+      expect(["400", "700", "normal", "bold"]).toContain(weight);
+      expect(weight).not.toBe("600");
+    }
+  });
+
+  it("drops motion when animation is none and steps cell pad with space", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "age", header: "Age" },
+    ];
+    const data = [{ name: "Ada", age: 36 }];
+
+    const { container: still } = renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    expect(still.querySelector("[data-simple-table-frame]")?.getAttribute("data-animation")).toBe(
+      "none",
+    );
+
+    const { container: small } = renderWithProviders(
+      <Preset overrides={{ space: "small" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    const { container: large } = renderWithProviders(
+      <Preset overrides={{ space: "large" }}>
+        <SimpleTableDesktop data={data} columns={columns} />
+      </Preset>,
+    );
+    const smallPad = small.querySelector("[data-cell-pad]")?.getAttribute("data-cell-pad");
+    const largePad = large.querySelector("[data-cell-pad]")?.getAttribute("data-cell-pad");
+    expect(smallPad).toBeTruthy();
+    expect(largePad).toBeTruthy();
+    expect(smallPad).not.toBe(largePad);
+  });
+
+  it("disabled rows stay visible, inert, and visually distinct (LC-40)", () => {
+    const columns: SimpleTableColumn[] = [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "city", header: "City" },
+    ];
+    const onRowPress = vi.fn();
+    const { container } = renderWithProviders(
+      <SimpleTableDesktop
+        disabled
+        data={[{ name: "Ada", city: "Portland" }]}
+        columns={columns}
+        onRowPress={onRowPress}
+      />,
+    );
+    const frame = container.querySelector("[data-simple-table-frame]");
+    expect(frame?.getAttribute("aria-disabled")).toBe("true");
+    expect(container.textContent).toContain("Ada");
+    const row = container.querySelector('[data-row-press="true"]');
+    expect(row).toBeNull();
+    fireEvent.click(container.querySelector("tbody tr, [role='row']") as Element);
+    expect(onRowPress).not.toHaveBeenCalled();
+  });
 });

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

@@ -78,6 +78,8 @@ export interface TableInputProps<TData extends DataTableData = DataTableData> {
    * is the default — Frappe's grid is a dense in-list editor, not a page table.
    */
   compact?: boolean;
+  /** Leading grab handle + keyboard reorder via kanbanDnd (web implements). */
+  enableReorder?: boolean;
 }
 
 export function TableInput<TData extends DataTableData = DataTableData>({
@@ -262,14 +264,14 @@ function TableInputInner<TData extends DataTableData>({
     <XStack backgroundColor="$color2" {...hairline.bottom} {...cellPad}>
       {showRowNumbers && (
         <View width={indexWidth} paddingHorizontal="$1">
-          <Text fontWeight="600" color="$color10" fontSize={knobProps.label.fontSize}>
+          <Text fontWeight="400" color="$color10" fontSize={knobProps.label.fontSize}>
             #
           </Text>
         </View>
       )}
       {columns.map((col, index) => (
         <View key={columnIds[index]} flex={1} paddingHorizontal="$1">
-          <Text fontWeight="600" color="$color12" fontSize={knobProps.label.fontSize}>
+          <Text fontWeight="400" color="$color12" fontSize={knobProps.label.fontSize}>
             {typeof col.header === "string" ? col.header : columnIds[index]}
           </Text>
         </View>
@@ -367,7 +369,7 @@ function TableInputInner<TData extends DataTableData>({
   return (
     <YStack
       {...knobProps.surface}
-      {...knobProps.borderRadiusOuter}
+      {...knobProps.borderRadiusNested}
       elevation={knobProps.elevation}
       overflow="hidden"
       accessibilityLabel={ariaLabel}