@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -1,161 +1,234 @@
 /**
- * DataTableMobileCards - mobile card view for DataTable.
+ * DataTableMobileCards - stacked card-list view for DataTable.
  *
- * Renders data as stacked cards instead of table rows when the
- * screen is at the mobile breakpoint (sm === false).
+ * Renders each row as a card instead of a grid row. Used when the
+ * resolved layout is "cards" (below the `$sm` breakpoint with
+ * layout="auto", or forced via layout="cards").
+ *
+ * Card anatomy (knobs system): `surface` + `cardSurface` fragments own
+ * the card frame; the first visible column renders as the card title in
+ * the header row (with selection checkbox / row number / delete), and
+ * the remaining visible columns render as label/value rows. Column
+ * visibility and order from table state apply unchanged — cells come
+ * from `row.getVisibleCells()`. Values render through the same cell
+ * renderers as the grid, inside `TableCellContext` so fields stay
+ * chromeless (useIsInTableCell).
  */
 
 import { TrashIcon } from "@phosphor-icons/react";
-import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { EmptyState } from "@multiplatform.one/components";
+import { Button, Checkbox } from "@multiplatform.one/forms";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback } from "react";
-import { Text, View } from "tamagui";
+import { Text, View, XStack } from "tamagui";
 import { useTranslation } from "react-i18next";
+import { TableCellContext } from "@multiplatform.one/table-primitives";
 import type { DataTableColumn } from "../../types";
+import { withInterp } from "../../utils/withInterp";
+
+/** Resolve the human label for a column (string header, else column id). */
+function getColumnLabel(cell: any): string {
+  const columnDef = cell.column.columnDef as DataTableColumn;
+  return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
+}
 
 export interface DataTableMobileCardsProps<TData> {
   tableRows: any[];
+  enableRowSelection?: boolean;
   showRowNumbers: boolean;
   showDeleteRow: boolean;
   readOnly: boolean;
+  /** Table-level disabled state (UX-011): controls render inert + LC-40 visible. */
+  disabled?: boolean;
   dataLength: number;
   minRows: number;
   hasActiveFilters: boolean;
   renderCellContent: (cell: any, rowIndex: number, rowData: TData) => React.ReactNode;
   onDeleteRow: (rowIndex: number) => void;
+  selectAllChecked?: boolean;
+  selectAllIndeterminate?: boolean;
+  onToggleSelectAll?: () => void;
+  compact?: boolean;
 }
 
 export function DataTableMobileCards<TData extends Record<string, any>>({
   tableRows,
+  enableRowSelection = false,
   showRowNumbers,
   showDeleteRow,
   readOnly,
+  disabled = false,
   dataLength,
   minRows,
   hasActiveFilters,
   renderCellContent,
   onDeleteRow,
+  selectAllChecked = false,
+  selectAllIndeterminate = false,
+  onToggleSelectAll,
+  compact = false,
 }: DataTableMobileCardsProps<TData>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  const tableZebraOn = knobProps.tableZebra === "on";
 
   const renderMobileCard = useCallback(
     (row: any, index: number) => {
       const rowData = row.original as TData;
       const visibleCells = row.getVisibleCells();
+      const [titleCell, ...detailCells] = visibleCells;
+      const showDelete = showDeleteRow && !readOnly;
 
       return (
         <View
           key={`${row.id}-${index}`}
-          backgroundColor="$color1"
-          {...knobProps.borderRadius}
+          testID="data-table-card"
+          {...knobProps.surface}
+          {...knobProps.cardSurface}
+          elevation={knobProps.elevation}
           borderColor="$color6"
-          {...knobProps.panelPadding}
-          marginBottom="$2"
+          {...(tableZebraOn && index % 2 === 1 ? { backgroundColor: "$color2" } : {})}
+          {...({
+            "data-table-zebra": tableZebraOn ? (index % 2 === 0 ? "even" : "odd") : "off",
+          } as any)}
         >
-          {/* Row number */}
-          {showRowNumbers && (
-            <View
-              flexDirection="row"
-              justifyContent="space-between"
-              paddingBottom="$2"
-              borderBottomWidth={1}
-              borderBottomColor="$color6"
-              marginBottom="$2"
-            >
-              <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="600">
-                #{index + 1}
-              </Text>
-              {showDeleteRow && !readOnly && (
-                <Button
-                  chromeless
-                  circular
-                  size="$2"
-                  icon={TrashIcon}
-                  disabled={dataLength <= minRows}
-                  onPress={() => onDeleteRow(index)}
-                  aria-label={t("Delete row")}
-                />
-              )}
-            </View>
-          )}
-
-          {/* Field rows */}
-          {visibleCells.map((cell: any) => {
-            const columnDef = cell.column.columnDef as DataTableColumn;
-            const headerLabel =
-              typeof columnDef.header === "string"
-                ? columnDef.header
-                : columnDef.id || cell.column.id;
-
-            return (
+          {/* Card header: selection + primary-column title + row number + delete */}
+          <XStack
+            alignItems="center"
+            gap="$2"
+            {...(detailCells.length > 0
+              ? {
+                  paddingBottom: "$2",
+                  marginBottom: "$2",
+                  ...hairline.bottom,
+                  borderBottomColor: "$color6",
+                }
+              : {})}
+          >
+            {enableRowSelection && (
+              <Checkbox
+                checked={row.getIsSelected()}
+                onChange={(checked) => {
+                  if (disabled) return;
+                  row.toggleSelected(!!checked);
+                }}
+                disabled={disabled}
+                checkboxProps={{
+                  "aria-label": withInterp(t("Select row {{row}}", { row: index + 1 }), {
+                    row: index + 1,
+                  }),
+                }}
+                compact={compact}
+              />
+            )}
+            {titleCell ? (
               <View
-                key={cell.id}
-                flexDirection="row"
-                alignItems="center"
-                paddingVertical="$1.5"
-                gap="$2"
+                flex={1}
+                minWidth={0}
+                aria-label={getColumnLabel(titleCell)}
+                {...({ "data-card-slot": "title" } as any)}
               >
-                <Text
-                  fontSize={knobProps.sizeToken}
-                  color="$color10"
-                  fontWeight="500"
-                  width="40%"
-                  flexShrink={0}
-                >
-                  {headerLabel}
-                </Text>
-                <View flex={1}>{renderCellContent(cell, index, rowData)}</View>
+                <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                  {renderCellContent(titleCell, index, rowData)}
+                </TableCellContext.Provider>
               </View>
-            );
-          })}
-
-          {/* Delete button (if no row numbers shown) */}
-          {!showRowNumbers && showDeleteRow && !readOnly && (
-            <View paddingTop="$2" alignItems="flex-end">
+            ) : (
+              <View flex={1} />
+            )}
+            {showRowNumbers && (
+              <Text fontSize={knobProps.sizeToken} color="$color10" fontWeight="600">
+                #{index + 1}
+              </Text>
+            )}
+            {showDelete && (
               <Button
                 chromeless
                 circular
                 size="$2"
                 icon={TrashIcon}
-                disabled={dataLength <= minRows}
+                disabled={disabled || dataLength <= minRows}
                 onPress={() => onDeleteRow(index)}
-                aria-label={t("Delete row")}
+                aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
+                  row: index + 1,
+                })}
               />
+            )}
+          </XStack>
+
+          {/* Field rows: remaining visible columns as label/value pairs */}
+          {detailCells.map((cell: any) => (
+            <View
+              key={cell.id}
+              flexDirection="row"
+              alignItems="center"
+              paddingVertical="$1.5"
+              gap="$2"
+            >
+              <Text
+                fontSize={knobProps.sizeToken}
+                color="$color10"
+                fontWeight="500"
+                width="40%"
+                flexShrink={0}
+              >
+                {getColumnLabel(cell)}
+              </Text>
+              <View flex={1} minWidth={0}>
+                <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                  {renderCellContent(cell, index, rowData)}
+                </TableCellContext.Provider>
+              </View>
             </View>
-          )}
+          ))}
         </View>
       );
     },
     [
+      enableRowSelection,
       showRowNumbers,
       showDeleteRow,
       readOnly,
+      disabled,
       dataLength,
       minRows,
       renderCellContent,
       onDeleteRow,
+      compact,
       knobProps,
+      tableZebraOn,
       t,
     ],
   );
 
   return (
-    <View flexDirection="column" {...knobProps.gap}>
+    <View flexDirection="column" {...knobProps.gap} testID="data-table-cards">
+      {enableRowSelection && tableRows.length > 0 && (
+        <XStack alignItems="center" gap="$2" paddingBottom="$2">
+          <Checkbox
+            checked={selectAllIndeterminate ? "indeterminate" : selectAllChecked}
+            onChange={(checked) => {
+              if (disabled || checked === "indeterminate") return;
+              const shouldSelect = checked === true;
+              if (shouldSelect !== selectAllChecked) onToggleSelectAll?.();
+            }}
+            disabled={disabled}
+            checkboxProps={{ "aria-label": t("Select all rows") }}
+            compact={compact}
+          />
+          <Text fontSize={knobProps.sizeToken} color="$color10">
+            {t("Select all")}
+          </Text>
+        </XStack>
+      )}
       {tableRows.length === 0 ? (
-        <View
-          padding="$8"
-          alignItems="center"
-          justifyContent="center"
+        <EmptyState
+          compact
           backgroundColor="$color1"
           {...knobProps.borderRadius}
           aria-live="polite"
-        >
-          <Text color="$color10" fontSize={knobProps.sizeToken}>
-            {hasActiveFilters ? t("No results found") : t("No data available")}
-          </Text>
-        </View>
+          title={hasActiveFilters ? t("No results found") : t("No data available")}
+        />
       ) : (
         tableRows.map((row: any, index: number) => renderMobileCard(row, index))
       )}