@multiplatform.one/table 6.7.0 → 7.0.0

package/src/components/ColumnHeaderFilter/index.tsx

@@ -82,9 +82,13 @@ export function ColumnHeaderFilter({
     <Popover open={open} onOpenChange={setOpen}>
       <Tooltip content={isFiltered ? t("Edit filter") : t("Filter this column")}>
         <Popover.Trigger asChild>
+          {/* LC-54 amendment (2026-08-13): the grown press target NEVER
+              paints — hover/press fills on this box spread across the full
+              44px floor and bled into the neighboring header rows via the
+              negative outsets. Floor-wide feedback is subtree opacity; the
+              painted hover chrome rides the glyph-scale ring inside
+              (Chip dismiss anatomy). */}
           <View
-            padding="$1"
-            borderRadius="$2"
             cursor="pointer"
             {...pressTargetStyle()}
             alignItems="center"
@@ -92,8 +96,11 @@ export function ColumnHeaderFilter({
             marginVertical={-FILTER_TRIGGER_OUTSET}
             marginHorizontal={-FILTER_TRIGGER_OUTSET}
             hitSlop={pressTargetHitSlop(FILTER_TRIGGER_VISUAL)}
-            hoverStyle={{ backgroundColor: "$color4" }}
-            pressStyle={{ backgroundColor: "$color5" }}
+            // Axiom 6 HONEST STATE: an applied filter is an active signal —
+            // it keeps full strength; only the idle affordance rests dimmed.
+            opacity={isFiltered ? 1 : 0.7}
+            hoverStyle={{ opacity: 1 }}
+            pressStyle={{ opacity: 0.9 }}
             onPress={(e) => {
               e.stopPropagation();
               setOpen(true);
@@ -101,11 +108,19 @@ export function ColumnHeaderFilter({
             role="button"
             aria-label={`Filter column ${columnLabel}`}
           >
-            <FunnelIcon
-              size={14}
-              color={isFiltered ? "var(--accentColor)" : "var(--color10)"}
-              weight={isFiltered ? "fill" : "regular"}
-            />
+            <View
+              padding="$1"
+              borderRadius="$2"
+              alignItems="center"
+              justifyContent="center"
+              hoverStyle={{ backgroundColor: "$color4" }}
+            >
+              <FunnelIcon
+                size={14}
+                color={isFiltered ? "var(--accentColor)" : "var(--color10)"}
+                weight={isFiltered ? "fill" : "regular"}
+              />
+            </View>
           </View>
         </Popover.Trigger>
       </Tooltip>
@@ -120,7 +135,10 @@ export function ColumnHeaderFilter({
         transition={knobProps.transition}
         enterStyle={{ y: -5, opacity: 0 }}
         exitStyle={{ y: -5, opacity: 0 }}
-        elevate
+        // Knob elevation channel, not `elevate`: Popover.Content has no such
+        // variant in tamagui 2.0, so the bare boolean leaked to the DOM
+        // (LC-46 class) and painted no shadow.
+        elevation={knobProps.elevation}
       >
         <Popover.Arrow borderWidth={1} borderColor="$color6" />
 

package/src/components/DataTable/DataTable.stories.tsx

@@ -2779,6 +2779,36 @@ export const CardLayout: Story = {
   render: () => <CardLayoutStory />,
 };
 
+/**
+ * Subject-led document rows (desk List / Polaris Index): checkbox, title
+ * with stacked meta, trailing status. Not a column grid.
+ */
+const documentListColumns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "Name", meta: { role: "title" } },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "status", header: "Status" },
+];
+
+export const DocumentList: Story = {
+  render: () => (
+    <View padding="$4" maxWidth={720} width="100%">
+      <DataTable
+        data={sampleData}
+        columns={documentListColumns}
+        layout="list"
+        enableGlobalSearch
+        enableSorting
+        enableRowSelection
+        enablePagination
+        enableFiltering={false}
+        initialState={{ pagination: { pageIndex: 0, pageSize: 8 } }}
+        aria-label="Document list"
+      />
+    </View>
+  ),
+};
+
 /** Default responsive behavior: grid at desktop width, cards below `$sm`. */
 export const CardLayoutAuto: Story = {
   args: {

package/src/components/DataTable/DataTableDocumentList.tsx

@@ -0,0 +1,224 @@
+/**
+ * DataTableDocumentList — subject-led document rows (desk List view).
+ *
+ * One horizontal row per document: checkbox | title + stacked meta | trailing
+ * indicators | actions. No key-value labels, no card chrome, no grid headers,
+ * no wrapping into a column grid (Polaris Index / Frappe list). Stacked-group
+ * radius (LC-72): first row top corners, last row bottom, interiors square.
+ * LC-71: selected = fill; keyboard ring rides the row when it is the tab stop.
+ */
+
+import { EmptyState } from "@multiplatform.one/components";
+import { Checkbox } from "@multiplatform.one/forms";
+import {
+  getGroupPosition,
+  hairline,
+  stackRadiusProps,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { TableCellContext } from "@multiplatform.one/table-primitives";
+import type React from "react";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { View, XStack, YStack } from "tamagui";
+import type { DataTableColumn } from "../../types";
+import { withInterp } from "../../utils/withInterp";
+import { partitionDocumentListCells } from "./documentListSlots";
+import { tableRowStateProps } from "./rowStateChrome";
+
+/** Subject cell: explicit title role, else first non-action / non-`_` column. */
+export function pickDocumentListTitleCell<
+  TCell extends { id: string; column: { id: string; columnDef: unknown } },
+>(visibleCells: TCell[]): TCell | undefined {
+  const titled = visibleCells.find((cell) => {
+    const meta = (cell.column.columnDef as DataTableColumn).meta;
+    return meta?.role === "title";
+  });
+  if (titled) return titled;
+  const content = visibleCells.find((cell) => {
+    const id = String(cell.column.id ?? "");
+    const meta = (cell.column.columnDef as DataTableColumn).meta;
+    return !id.startsWith("_") && meta?.role !== "actions";
+  });
+  return content ?? visibleCells[0];
+}
+
+export interface DataTableDocumentListProps<TData> {
+  tableRows: any[];
+  enableRowSelection?: boolean;
+  disabled?: boolean;
+  hasActiveFilters: boolean;
+  renderCellContent: (cell: any, rowIndex: number, rowData: TData) => React.ReactNode;
+  compact?: boolean;
+  selectRowLabel?: (row: any, rowIndex: number) => string;
+  getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
+  /** In-flight refetch: do not paint empty-state over a blank body. */
+  queryInFlight?: boolean;
+}
+
+export function DataTableDocumentList<TData extends Record<string, any>>({
+  tableRows,
+  enableRowSelection = false,
+  disabled = false,
+  hasActiveFilters,
+  renderCellContent,
+  compact = false,
+  selectRowLabel,
+  getRowPressProps,
+  queryInFlight = false,
+}: DataTableDocumentListProps<TData>) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const tableZebraOn = knobProps.tableZebra === "on";
+  const rowPad = knobProps.panelPadding.padding;
+
+  const renderRow = useCallback(
+    (row: any, index: number) => {
+      const rowData = row.original as TData;
+      const visibleCells = row.getVisibleCells();
+      const titleCell = pickDocumentListTitleCell(visibleCells);
+      const { indicators, metas, actions } = partitionDocumentListCells(visibleCells, titleCell);
+      const position = getGroupPosition(index, tableRows.length);
+      const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+      const selected = Boolean(enableRowSelection && row.getIsSelected?.());
+      const rowState = tableRowStateProps({
+        selected,
+        zebraOn: tableZebraOn,
+        index,
+      });
+
+      return (
+        <View key={`${row.id}-${index}`}>
+          {index > 0 ? <View {...hairline.line} /> : null}
+          <XStack
+            testID="data-table-list-row"
+            alignItems="center"
+            gap="$3"
+            paddingHorizontal={rowPad}
+            paddingVertical="$2"
+            minHeight={44}
+            overflow="hidden"
+            display="flex"
+            flexDirection="row"
+            flexWrap="nowrap"
+            width="100%"
+            {...({ "data-list-wrap": "nowrap" } as any)}
+            {...corners}
+            {...rowState}
+            hoverStyle={{
+              ...(rowState.hoverStyle as object),
+              ...corners,
+            }}
+            {...(getRowPressProps ? (getRowPressProps(row, index, "row") as any) : {})}
+          >
+            {enableRowSelection && (
+              <Checkbox
+                checked={row.getIsSelected()}
+                onChange={(checked) => {
+                  if (disabled) return;
+                  row.toggleSelected(!!checked);
+                }}
+                disabled={disabled}
+                checkboxProps={{
+                  "aria-label":
+                    selectRowLabel?.(row, index) ??
+                    withInterp(t("Select row {{row}}", { row: index + 1 }), {
+                      row: index + 1,
+                    }),
+                }}
+                compact={compact}
+              />
+            )}
+            <YStack flex={1} minWidth={0} gap="$1" overflow="hidden">
+              {titleCell ? (
+                <View minWidth={0} {...({ "data-list-slot": "title" } as any)}>
+                  <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                    {renderCellContent(titleCell, index, rowData)}
+                  </TableCellContext.Provider>
+                </View>
+              ) : (
+                <View flex={1} />
+              )}
+              {metas.map((cell: any) => (
+                <View
+                  key={cell.id}
+                  minWidth={0}
+                  opacity={0.7}
+                  overflow="hidden"
+                  {...({ "data-list-slot": "meta" } as any)}
+                >
+                  <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                    {renderCellContent(cell, index, rowData)}
+                  </TableCellContext.Provider>
+                </View>
+              ))}
+            </YStack>
+            {indicators.length > 0 ? (
+              <XStack flexShrink={0} gap="$2" alignItems="center" flexWrap="nowrap" maxWidth="40%">
+                {indicators.map((cell: any) => (
+                  <View
+                    key={cell.id}
+                    flexShrink={0}
+                    {...({ "data-list-slot": "indicator" } as any)}
+                  >
+                    <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                      {renderCellContent(cell, index, rowData)}
+                    </TableCellContext.Provider>
+                  </View>
+                ))}
+              </XStack>
+            ) : null}
+            {actions.length > 0 ? (
+              <XStack flexShrink={0} gap="$1" alignItems="center" flexWrap="nowrap">
+                {actions.map((cell: any) => (
+                  <View key={cell.id} flexShrink={0} {...({ "data-list-slot": "actions" } as any)}>
+                    <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                      {renderCellContent(cell, index, rowData)}
+                    </TableCellContext.Provider>
+                  </View>
+                ))}
+              </XStack>
+            ) : null}
+          </XStack>
+        </View>
+      );
+    },
+    [
+      compact,
+      disabled,
+      enableRowSelection,
+      getRowPressProps,
+      knobProps.borderRadius.borderRadius,
+      renderCellContent,
+      rowPad,
+      selectRowLabel,
+      t,
+      tableRows.length,
+      tableZebraOn,
+    ],
+  );
+
+  return (
+    <View
+      flexDirection="column"
+      display="flex"
+      testID="data-table-list"
+      {...({ "data-list-layout": "list" } as any)}
+      {...(getRowPressProps ? ({ "data-row-press-scope": "true" } as any) : {})}
+    >
+      {tableRows.length === 0 ? (
+        queryInFlight ? null : (
+          <EmptyState
+            compact
+            backgroundColor="$color1"
+            {...knobProps.borderRadius}
+            aria-live="polite"
+            title={hasActiveFilters ? t("No results found") : t("No data available")}
+          />
+        )
+      ) : (
+        tableRows.map((row: any, index: number) => renderRow(row, index))
+      )}
+    </View>
+  );
+}

package/src/components/DataTable/DataTableMobileCards.tsx

@@ -27,9 +27,16 @@ 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). */
+/**
+ * Resolve the human label for a column: `meta.label` → string header →
+ * column id. `meta.label` is the explicit label channel for columns whose
+ * header is a render function or a bare glyph (the liked heart) — without
+ * it a card field row would print the raw column id (`_liked_by`).
+ */
 function getColumnLabel(cell: any): string {
   const columnDef = cell.column.columnDef as DataTableColumn;
+  const metaLabel = columnDef.meta?.label;
+  if (typeof metaLabel === "string" && metaLabel) return metaLabel;
   return typeof columnDef.header === "string" ? columnDef.header : columnDef.id || cell.column.id;
 }
 
@@ -62,6 +69,8 @@ export interface DataTableMobileCardsProps<TData> {
    * roving focus, and inner-control isolation as grid rows.
    */
   getRowPressProps?: (row: any, rowIndex: number, variant?: "row" | "card") => Record<string, any>;
+  /** In-flight refetch: do not paint empty-state over a blank body. */
+  queryInFlight?: boolean;
 }
 
 export function DataTableMobileCards<TData extends Record<string, any>>({
@@ -82,6 +91,7 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
   compact = false,
   selectRowLabel,
   getRowPressProps,
+  queryInFlight = false,
 }: DataTableMobileCardsProps<TData>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -248,13 +258,15 @@ export function DataTableMobileCards<TData extends Record<string, any>>({
         </XStack>
       )}
       {tableRows.length === 0 ? (
-        <EmptyState
-          compact
-          backgroundColor="$color1"
-          {...knobProps.borderRadius}
-          aria-live="polite"
-          title={hasActiveFilters ? t("No results found") : t("No data available")}
-        />
+        queryInFlight ? null : (
+          <EmptyState
+            compact
+            backgroundColor="$color1"
+            {...knobProps.borderRadius}
+            aria-live="polite"
+            title={hasActiveFilters ? t("No results found") : t("No data available")}
+          />
+        )
       ) : (
         tableRows.map((row: any, index: number) => renderMobileCard(row, index))
       )}