@multiplatform.one/table 7.7.6 → 7.8.0

package/src/components/ColumnHeaderFilter/index.tsx

@@ -6,21 +6,30 @@
 import { FunnelIcon } from "@phosphor-icons/react";
 import { Button } from "@multiplatform.one/forms";
 import {
+  ensureCompositeFocusRing,
   MIN_PRESS_TARGET,
   pressTargetHitSlop,
   pressTargetStyle,
+  useAccentOnSurface,
   useResolvedKnobs,
+  useGlyphColor,
 } from "@multiplatform.one/theme";
-import { useState } from "react";
+import { useId, useRef, useState } from "react";
 import { Tooltip } from "@multiplatform.one/components";
-import { Popover, Text, View, XStack, YStack } from "tamagui";
+import { Popover, Text, View, XStack, YStack, isWeb, type TamaguiElement } from "tamagui";
 import { t } from "../../shared/t";
-import type { FilterOperator } from "../../types";
+import type { DataTableColumnType, FilterOperator } from "../../types";
 import { iconSizeForToken } from "../../utils/chromeIcons";
-import { operatorNeedsNoValue } from "../../utils/filterFields";
+import { defaultOperatorForFilterType, operatorNeedsNoValue } from "../../utils/filterFields";
 import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor";
 
-export type ColumnFilterType = "text" | "number" | "date" | "boolean" | "select";
+/**
+ * The funnel's column type IS the table's column type — one vocabulary, not a
+ * second copy (LC-16). Kept as a named alias because consumers import it.
+ * Adding `"money"` to DataTableColumnType therefore reaches the funnel too
+ * (MPO-252).
+ */
+export type ColumnFilterType = DataTableColumnType;
 
 export interface ColumnHeaderFilterProps {
   columnId: string;
@@ -49,17 +58,38 @@ export function ColumnHeaderFilter({
   columnId: _columnId,
   columnLabel,
   columnType,
-  filterValue: _filterValue,
+  filterValue,
   onFilterChange,
   options,
   isFiltered,
 }: ColumnHeaderFilterProps) {
   const { knobProps } = useResolvedKnobs();
+  const idleColor = useGlyphColor("$color11");
+  const activeColor = useAccentOnSurface();
+  const glyphColor = isFiltered ? activeColor : idleColor;
+  // The nested Tooltip has its own Popper context. Keep this trigger and
+  // editor anchored to the same instance rather than its nearest overlay.
+  const popoverScope = useId();
+  const triggerRef = useRef<TamaguiElement | null>(null);
+  const returnFocusRef = useRef(true);
+  ensureCompositeFocusRing();
   const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const [open, setOpen] = useState(false);
-  const [operator, setOperator] = useState<FilterOperator>("contains");
+  const [operator, setOperator] = useState<FilterOperator>(() =>
+    defaultOperatorForFilterType(columnType),
+  );
   const [value, setValue] = useState<string>("");
 
+  const handleOpenChange = (next: boolean) => {
+    // Reopening reads the applied filter. External updates while editing
+    // leave the current draft alone, including the stay-open Clear flow.
+    if (next && !open) {
+      setOperator(filterValue?.operator ?? defaultOperatorForFilterType(columnType));
+      setValue(filterValue?.value == null ? "" : String(filterValue.value));
+    }
+    setOpen(next);
+  };
+
   // Apply is the explicit done affordance of this draft editor — commit-and-
   // close is its stated intent (LC-21 allows an explicit done/close control).
   const handleApply = () => {
@@ -76,58 +106,85 @@ export function ColumnHeaderFilter({
   // filter; outside click / Escape / Apply close.
   const handleClear = () => {
     setValue("");
-    setOperator("contains");
+    setOperator(defaultOperatorForFilterType(columnType));
     onFilterChange(undefined);
   };
 
   return (
-    <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
+    <Popover scope={popoverScope} open={open} onOpenChange={handleOpenChange} disableFocus>
+      {/* Inherit the nearest Popover before entering Tooltip. An explicit
+          scope makes Tamagui register web anchors only on mouse hover,
+          leaving keyboard opens without a reference. */}
+      <Popover.Anchor>
+        <Tooltip content={isFiltered ? t("Edit filter") : t("Filter this column")}>
+          <Popover.Trigger scope={popoverScope} 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
+              negative outsets. Painted hover and keyboard focus feedback
+              ride the glyph-scale ring inside
               (Chip dismiss anatomy). */}
-          <View
-            cursor="pointer"
-            {...pressTargetStyle()}
-            alignItems="center"
-            justifyContent="center"
-            marginVertical={-FILTER_TRIGGER_OUTSET}
-            marginHorizontal={-FILTER_TRIGGER_OUTSET}
-            hitSlop={pressTargetHitSlop(FILTER_TRIGGER_VISUAL)}
-            // 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);
-            }}
-            role="button"
-            aria-label={`Filter column ${columnLabel}`}
-          >
             <View
-              padding="$1"
-              borderRadius="$2"
+              ref={triggerRef}
+              cursor="pointer"
+              {...pressTargetStyle()}
               alignItems="center"
               justifyContent="center"
-              hoverStyle={{ backgroundColor: "$color4" }}
+              marginVertical={-FILTER_TRIGGER_OUTSET}
+              marginHorizontal={-FILTER_TRIGGER_OUTSET}
+              hitSlop={pressTargetHitSlop(FILTER_TRIGGER_VISUAL)}
+              // Enabled glyphs keep readable ink; hue and weight distinguish
+              // an applied filter from the secondary-color idle affordance.
+              // Shared unpainted press-floor / painted glyph-ring anatomy.
+              className="mp-chip-dismiss"
+              tabIndex={0}
+              onKeyDown={
+                ((event: { key?: string; preventDefault(): void; stopPropagation(): void }) => {
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleOpenChange(true);
+                }) as unknown as () => void
+              }
+              onPress={(e) => {
+                e.stopPropagation();
+                handleOpenChange(true);
+              }}
+              role="button"
+              aria-label={`Filter column ${columnLabel}`}
             >
-              <FunnelIcon
-                size={iconPx}
-                color={isFiltered ? "var(--accentColor)" : "var(--color10)"}
-                weight={isFiltered ? "fill" : "regular"}
-              />
+              <View
+                className="mp-chip-dismiss-ring"
+                padding="$1"
+                borderRadius="$2"
+                alignItems="center"
+                justifyContent="center"
+                hoverStyle={{ backgroundColor: "$color4" }}
+                pressStyle={{ backgroundColor: "$color5" }}
+              >
+                <FunnelIcon
+                  size={iconPx}
+                  color={glyphColor}
+                  weight={isFiltered ? "fill" : "regular"}
+                />
+              </View>
             </View>
-          </View>
-        </Popover.Trigger>
-      </Tooltip>
+          </Popover.Trigger>
+        </Tooltip>
+      </Popover.Anchor>
 
       <Popover.Content
+        scope={popoverScope}
+        onPointerDownOutside={() => {
+          returnFocusRef.current = false;
+        }}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (isWeb && returnFocusRef.current) {
+            (triggerRef.current as HTMLElement | null)?.focus();
+          }
+          returnFocusRef.current = true;
+        }}
         {...knobProps.elevatedSurface}
         {...knobProps.panelPadding}
         minWidth={240}
@@ -135,7 +192,7 @@ export function ColumnHeaderFilter({
         enterStyle={{ y: -5, opacity: 0 }}
         exitStyle={{ y: -5, opacity: 0 }}
       >
-        <Popover.Arrow borderColor="$borderColor" backgroundColor="$color1" />
+        <Popover.Arrow scope={popoverScope} borderColor="$borderColor" backgroundColor="$color1" />
 
         <YStack {...knobProps.gap}>
           <Text {...knobProps.label} fontWeight="400" color="$color11">
@@ -155,7 +212,7 @@ export function ColumnHeaderFilter({
           {/* Actions */}
           <XStack {...knobProps.gap} justifyContent="flex-end">
             {isFiltered && (
-              <Button size={knobProps.sizeToken} variant="outlined" onPress={handleClear}>
+              <Button size={knobProps.sizeToken} onPress={handleClear}>
                 {t("Clear")}
               </Button>
             )}

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

@@ -16,8 +16,11 @@ import {
   DataTableFilters,
   DataTablePagination,
   DataTableToolbar,
+  formatMoney,
+  type RowAccumulator,
+  sumMoneyByCurrency,
 } from "../../index";
-import { DataTable } from "./index";
+import { DataTable, useDataTableState } from "./index";
 
 const meta: Meta<typeof DataTable> = {
   title: "Table/DataTable",
@@ -204,11 +207,7 @@ const columns: DataTableColumn<User>[] = [
   columnHelper.display({
     id: "actions",
     header: "Actions",
-    cell: (_info) => (
-      <Button size="$2" variant="outlined">
-        Edit
-      </Button>
-    ),
+    cell: (_info) => <Button size="$2">Edit</Button>,
     enableSorting: false,
     enableColumnFilter: false,
   }) as DataTableColumn<User>,
@@ -321,14 +320,7 @@ const AdvancedTableStory = () => {
           enableGlobalSearch={true}
           enableViews={true}
           renderToolbar={(props) => (
-            <DataTableToolbar
-              {...props}
-              customActions={
-                <Button size="$3" variant="outlined">
-                  Export CSV
-                </Button>
-              }
-            />
+            <DataTableToolbar {...props} customActions={<Button size="$3">Export CSV</Button>} />
           )}
           renderFilters={(props) => (
             <DataTableFilters {...props} availableColumns={columnsWithCounts} maxFilters={5} />
@@ -3090,3 +3082,183 @@ export const CustomCellAlignment: Story = {
     },
   },
 };
+
+// ---------------------------------------------------------------------------
+// Running balance (MPO-250) — a column that is a function of every row before
+// it. The fold runs BEFORE pagination, so page two continues instead of
+// restarting at zero, and its final value paints a footer total.
+// ---------------------------------------------------------------------------
+
+interface Posting extends DataTableData {
+  id: string;
+  date: string;
+  payee: string;
+  /** Cents. Integers here; a real ledger uses the "money" column type. */
+  amount: number;
+  /** Derived by the accumulator — declared so a column can name it. */
+  running?: number;
+}
+
+const registerPostings: Posting[] = [
+  { id: "P-01", date: "2026-01-02", payee: "Opening deposit", amount: 250_000 },
+  { id: "P-02", date: "2026-01-04", payee: "Rent", amount: -180_000 },
+  { id: "P-03", date: "2026-01-05", payee: "Grocers", amount: -8_450 },
+  { id: "P-04", date: "2026-01-07", payee: "Payroll", amount: 412_300 },
+  { id: "P-05", date: "2026-01-09", payee: "Utilities", amount: -14_600 },
+  { id: "P-06", date: "2026-01-11", payee: "Coffee roaster", amount: -1_875 },
+  { id: "P-07", date: "2026-01-14", payee: "Refund", amount: 3_200 },
+  { id: "P-08", date: "2026-01-16", payee: "Insurance", amount: -62_000 },
+  { id: "P-09", date: "2026-01-19", payee: "Consulting", amount: 150_000 },
+  { id: "P-10", date: "2026-01-21", payee: "Hardware", amount: -47_990 },
+  { id: "P-11", date: "2026-01-24", payee: "Payroll", amount: 412_300 },
+  { id: "P-12", date: "2026-01-27", payee: "Taxes", amount: -305_000 },
+];
+
+const cents = (value: number | undefined) =>
+  value == null ? "" : formatCurrency(value / 100, { symbol: "$", fractionDigits: "auto" });
+
+/**
+ * The fold. A module constant, not an inline literal — the table refolds
+ * whenever this identity changes.
+ */
+const registerBalance: RowAccumulator<Posting, number> = {
+  initial: 0,
+  reduce: (carried, row) => carried + row.amount,
+  derive: (carried) => ({ running: carried }),
+  order: (a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0),
+  total: (carried) => carried,
+};
+
+/** Reads the fold's end value off the table state — the total row. */
+const RegisterTotal = () => {
+  const context = useDataTableState();
+  return <Text fontWeight="700">{cents(context?.computed.foldTotal as number | undefined)}</Text>;
+};
+
+const registerColumns: DataTableColumn<Posting>[] = [
+  { id: "date", accessorKey: "date", header: "Date", width: 120 },
+  { id: "payee", accessorKey: "payee", header: "Payee", sortable: true },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    align: "right",
+    cell: (info) => <Text>{cents(info.getValue() as number)}</Text>,
+    footer: () => <Text fontWeight="700">Total</Text>,
+  },
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    align: "right",
+    // Not sortable on purpose: sorting a fold column reorders it WITHOUT
+    // refolding, so the figures stop reading down the column as a
+    // progression. The contract is on RowAccumulator.
+    sortable: false,
+    cell: (info) => <Text fontWeight="600">{cents(info.getValue() as number)}</Text>,
+    footer: () => <RegisterTotal />,
+  },
+];
+
+export const RunningBalance: Story = {
+  render: () => (
+    <DataTable
+      data={registerPostings}
+      columns={registerColumns as DataTableColumn<Record<string, any>>[]}
+      rowAccumulator={registerBalance as RowAccumulator<Record<string, any>>}
+      layout="table"
+      columnLayout="auto"
+      enableFiltering={false}
+      enableGlobalSearch={false}
+      initialState={{ pagination: { pageIndex: 0, pageSize: 5 } }}
+      aria-label="Account register with a running balance"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A running balance is a FOLD over the rows in a total order, so it has to be computed before the table paginates. Page through this table: the Balance column continues onto page two rather than restarting, because `rowAccumulator` runs once over the whole row set before the row model. Its `total` is read once at the end and painted in the footer through `useDataTableState().computed.foldTotal`. Sorting on Payee reorders rows for display and does NOT refold — the balance stays attached to its own row.",
+      },
+    },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Money column (MPO-252) — a Currency field is a decimal STRING. It sorts
+// numerically, filters with the numeric operators, formats from the ROW's own
+// currency, and totals per currency because two currencies never convert.
+// ---------------------------------------------------------------------------
+
+interface Charge extends DataTableData {
+  id: string;
+  vendor: string;
+  amount: string;
+  currency: string;
+}
+
+const charges: Charge[] = [
+  { id: "C-1", vendor: "Coffee roaster", amount: "9.00", currency: "USD" },
+  { id: "C-2", vendor: "Bookshop", amount: "10.00", currency: "USD" },
+  { id: "C-3", vendor: "Chai stall", amount: "250.75", currency: "INR" },
+  { id: "C-4", vendor: "Refund", amount: "-455.87", currency: "USD" },
+  { id: "C-5", vendor: "Hosting", amount: "1200.00", currency: "INR" },
+  { id: "C-6", vendor: "Domain", amount: "9.99", currency: "USD" },
+];
+
+/** One figure per currency — the mixed-currency rule, rendered. */
+const ChargeTotals = () => {
+  const totals = sumMoneyByCurrency(
+    charges,
+    (row) => row.amount,
+    (row) => row.currency,
+  );
+  return (
+    <YStack>
+      {Object.entries(totals).map(([code, total]) => (
+        <Text key={code} fontWeight="700">
+          {formatMoney(total, code)}
+        </Text>
+      ))}
+    </YStack>
+  );
+};
+
+const chargeColumns: DataTableColumn<Charge>[] = [
+  { id: "vendor", accessorKey: "vendor", header: "Vendor" },
+  { id: "currency", accessorKey: "currency", header: "Currency" },
+  {
+    id: "amount",
+    accessorKey: "amount",
+    header: "Amount",
+    field: "money",
+    // Safe now: the money type carries an exact decimal comparator, so
+    // "9.00" sorts BELOW "10.00". As a "text" column this was silently wrong.
+    sortable: true,
+    filterable: true,
+    fieldProps: { currencyField: "currency" },
+    footer: () => <ChargeTotals />,
+  },
+];
+
+export const MoneyColumn: Story = {
+  render: () => (
+    <DataTable
+      data={charges}
+      columns={chargeColumns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      columnLayout="auto"
+      enablePagination={false}
+      readOnly
+      aria-label="Charges with a money column"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`field: "money"` types a column as a decimal STRING rather than as text. Sort on Amount: `9.00` orders below `10.00`, which the text fallback got backwards in silence. The column filter offers `is less than` / `is greater than` / `between` instead of `contains`. Each row formats in its OWN currency (`fieldProps.currencyField`), and the footer totals PER currency — two currencies are two figures and neither converts, because there is no rate in the table.',
+      },
+    },
+  },
+};

package/src/components/DataTable/DataTableCardControls.tsx

@@ -89,7 +89,6 @@ export function DataTableCardControls({
           <DropdownMenu.Trigger asChild>
             <Button
               size={knobProps.sizeToken}
-              variant="outlined"
               icon={<CaretUpDownIcon size={chrome.iconPx} />}
               aria-label={t("Sort rows")}
               disabled={disabled}
@@ -134,18 +133,17 @@ export function DataTableCardControls({
           </DropdownMenu.Content>
         </DropdownMenu>
       )}
-      {enableFiltering &&
-        availableColumns.length > 0 && (
-          // DataTableFilters (chrome) has no disabled API — the wrapper is the
-          // LC-40 carrier and interaction gate for the disabled table.
-          <View
-            {...(disabled
-              ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
-              : {})}
-          >
-            <DataTableFilters compact availableColumns={availableColumns} />
-          </View>
-        )}
+      {enableFiltering && availableColumns.length > 0 && (
+        // DataTableFilters (chrome) has no disabled API — the wrapper is the
+        // LC-40 carrier and interaction gate for the disabled table.
+        <View
+          {...(disabled
+            ? { ...disabledState.chromeKnobProps, pointerEvents: "none" as const }
+            : {})}
+        >
+          <DataTableFilters compact availableColumns={availableColumns} />
+        </View>
+      )}
     </XStack>
   );
 }

package/src/components/DataTable/DataTableRoot.tsx

@@ -62,6 +62,7 @@ import { DataTableDocumentList } from "./DataTableDocumentList";
 import { DataTableVirtualized } from "./DataTableVirtualized";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableCellKeyboardProps, tableRowStateProps } from "./rowStateChrome";
+import { warnColumnWidthIgnored } from "../../shared/devWarn";
 import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
 import { mapFieldToFilterType } from "../../utils/filterFields";
 import { INFINITE_TRIGGER_ROWS } from "../../utils/paginationDefaults";
@@ -125,6 +126,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   pageSizeOptions,
   paginationMode = "pages",
   loadPage,
+  rowAccumulator,
   enableColumnVisibility = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -176,6 +178,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
   "aria-describedby": ariaDescribedBy,
   ...props
 }: DataTableRootProps<TData>) {
+  warnColumnWidthIgnored({ columnLayout, enableColumnResizing, columns });
   const { t } = useTranslation();
   const { sm } = useMedia();
   // Resolved responsive layout: cards below `$sm` (W11 compact class) unless
@@ -224,6 +227,7 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
     enablePagination,
     paginationMode,
     loadPage,
+    rowAccumulator,
     enableColumnVisibility,
     enableColumnOrdering,
     enableColumnResizing,
@@ -1670,22 +1674,21 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                                           {sortDirection === "asc" && (
                                             <CaretDownIcon
                                               size={chrome.iconPx}
-                                              color={
-                                                sortDirection ? "var(--color10)" : "var(--color8)"
-                                              }
+                                              color="var(--color11)"
                                             />
                                           )}
                                           {sortDirection === "desc" && (
                                             <CaretDownIcon
                                               size={chrome.iconPx}
-                                              color={
-                                                sortDirection ? "var(--color10)" : "var(--color8)"
-                                              }
+                                              color="var(--color11)"
                                               style={{ transform: "rotate(180deg)" }}
                                             />
                                           )}
                                           {sortDirection === false && (
-                                            <CaretUpDownIcon size={chrome.iconPx} color="$color8" />
+                                            <CaretUpDownIcon
+                                              size={chrome.iconPx}
+                                              color="var(--color11)"
+                                            />
                                           )}
                                         </View>
                                       </Tooltip>
@@ -2082,13 +2085,36 @@ export function DataTableRoot<TData extends Record<string, any> = Record<string,
                     <Table.Foot>
                       {footerGroups.map((footerGroup: any) => (
                         <Table.Row key={footerGroup.id}>
-                          {footerGroup.headers.map((header: any) => (
-                            <Table.Cell key={header.id}>
-                              {header.isPlaceholder
-                                ? null
-                                : flexRender(header.column.columnDef.footer, header.getContext())}
-                            </Table.Cell>
-                          ))}
+                          {footerGroup.headers.map((header: any) => {
+                            const columnAlign = resolveColumnAlign({
+                              ...(header.column.columnDef as DataTableColumn),
+                              id: header.column.id,
+                            });
+                            return (
+                              <Table.Cell
+                                key={header.id}
+                                justifyContent={alignToFlex(columnAlign)}
+                                data-align={columnAlign}
+                              >
+                                {header.isPlaceholder ? null : (
+                                  <View
+                                    width="100%"
+                                    minWidth={0}
+                                    flexDirection="row"
+                                    alignItems="center"
+                                    justifyContent={alignToFlex(columnAlign)}
+                                    data-cell-align={columnAlign}
+                                    style={isWeb ? { textAlign: columnAlign } : undefined}
+                                  >
+                                    {flexRender(
+                                      header.column.columnDef.footer,
+                                      header.getContext(),
+                                    )}
+                                  </View>
+                                )}
+                              </Table.Cell>
+                            );
+                          })}
                         </Table.Row>
                       ))}
                     </Table.Foot>

package/src/components/DataTable/DataTableStateContext.ts

@@ -62,6 +62,13 @@ export interface DataTableStateContextValue<TData = any> {
     totalRows: number;
     hasActiveFilters: boolean;
     activeFilterCount: number;
+    /**
+     * The row accumulator's `total(finalAccumulator, rowCount)` — the fold
+     * read once at the end (MPO-250). A column's TanStack `footer` renderer
+     * reads it from here to paint a total row; the table already renders a
+     * footer whenever any column defines one.
+     */
+    foldTotal?: unknown;
     [key: string]: any;
   };
 }