@multiplatform.one/table 7.7.6 → 7.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table",
-  "version": "7.7.6",
+  "version": "7.10.0",
   "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
   "keywords": [
     "cross-platform",
@@ -80,13 +80,13 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/table-core": "^8.21.3",
     "tamagui": "2.7.6",
-    "@multiplatform.one/components": "7.7.6",
-    "@multiplatform.one/forms": "7.7.6",
-    "@multiplatform.one/platform": "7.7.6",
-    "@multiplatform.one/rich-text": "7.7.6",
-    "@multiplatform.one/router": "7.7.6",
-    "@multiplatform.one/table-primitives": "7.7.6",
-    "@multiplatform.one/theme": "7.7.6"
+    "@multiplatform.one/rich-text": "7.10.0",
+    "@multiplatform.one/platform": "7.10.0",
+    "@multiplatform.one/router": "7.10.0",
+    "@multiplatform.one/theme": "7.10.0",
+    "@multiplatform.one/table-primitives": "7.10.0",
+    "@multiplatform.one/components": "7.10.0",
+    "@multiplatform.one/forms": "7.10.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -98,10 +98,10 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.7.6",
-    "@multiplatform.one/router": "7.7.6",
-    "@multiplatform.one/storybook": "7.7.6",
-    "@multiplatform.one/test-utils": "7.7.6"
+    "@multiplatform.one/router": "7.10.0",
+    "@multiplatform.one/config": "7.10.0",
+    "@multiplatform.one/storybook": "7.10.0",
+    "@multiplatform.one/test-utils": "7.10.0"
   },
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/components/ColumnHeaderFilter/ColumnHeaderFilter.spec.tsx

@@ -1,6 +1,7 @@
-import { fireEvent } from "@testing-library/react";
+import { createEvent, fireEvent, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useTheme } from "tamagui";
 import { ColumnHeaderFilter } from "./index";
 
 const renderTrigger = (props: Partial<Parameters<typeof ColumnHeaderFilter>[0]> = {}) =>
@@ -18,6 +19,33 @@ const trigger = (container: HTMLElement) =>
   container.querySelector('[aria-label="Filter column Status"]') as HTMLElement;
 
 describe("ColumnHeaderFilter trigger", () => {
+  it.each(["Enter", " "])("opens with %s without triggering header shortcuts", (key) => {
+    const parentKeyDown = vi.fn();
+    const { container } = renderWithProviders(
+      <div onKeyDown={parentKeyDown}>
+        <ColumnHeaderFilter
+          columnId="status"
+          columnLabel="Status"
+          columnType="text"
+          onFilterChange={() => {}}
+        />
+      </div>,
+    );
+    const floor = trigger(container);
+    expect(floor.tabIndex).toBe(0);
+    const event = createEvent.keyDown(floor, { key, bubbles: true, cancelable: true });
+    fireEvent(floor, event);
+    expect(event.defaultPrevented).toBe(true);
+    expect(parentKeyDown).not.toHaveBeenCalled();
+    expect(document.body.textContent).toContain("Filter: Status");
+  });
+
+  it("keeps ordinary typing out of the opener", () => {
+    const { container } = renderTrigger();
+    fireEvent.keyDown(trigger(container), { key: "x" });
+    expect(document.body.textContent).not.toContain("Filter: Status");
+  });
+
   it("renders the funnel trigger with its column-scoped name", () => {
     const { container } = renderTrigger();
     expect(trigger(container)).not.toBeNull();
@@ -61,6 +89,8 @@ describe("ColumnHeaderFilter press-floor paint (LC-54 amendment)", () => {
     const { container } = renderTrigger();
     const floor = trigger(container);
     expect(floor.className).not.toMatch(paintedStateAtom);
+    expect(floor.className).toContain("mp-chip-dismiss");
+    expect(floor.firstElementChild?.className).toContain("mp-chip-dismiss-ring");
   });
 
   it("positive control: the glyph-scale ring is where the hover fill lives", () => {
@@ -75,11 +105,116 @@ describe("ColumnHeaderFilter press-floor paint (LC-54 amendment)", () => {
     expect(ring.querySelector("svg")).not.toBeNull();
   });
 
-  it("an applied filter keeps full rest opacity (honest active state)", () => {
-    // 0.7 compiles to the `_o-0--7` atom (dots escape as double dashes).
-    const idle = renderTrigger();
-    expect(trigger(idle.container).className).toMatch(/_o-0--7/);
-    const filtered = renderTrigger({ isFiltered: true });
-    expect(trigger(filtered.container).className).not.toMatch(/_o-0--7/);
+  for (const isFiltered of [false, true]) {
+    it(`keeps enabled glyph ink at full rest opacity (filtered=${isFiltered})`, () => {
+      let expectedInk = "";
+      function Sample() {
+        const theme = useTheme();
+        // This provider has no accent ramp; the active hook uses readable ink.
+        expectedInk = String(isFiltered ? theme.color12?.val : theme.color11?.val);
+        return (
+          <ColumnHeaderFilter
+            columnId="status"
+            columnLabel="Status"
+            columnType="text"
+            onFilterChange={() => {}}
+            isFiltered={isFiltered}
+          />
+        );
+      }
+      const { container } = renderWithProviders(<Sample />);
+      const svg = trigger(container).querySelector("svg")!;
+      expect(svg.getAttribute("fill")).toBe(expectedInk);
+      expect(svg.getAttribute("fill")).not.toContain("var(");
+      for (
+        let node = svg.parentElement;
+        node && node !== document.body;
+        node = node.parentElement
+      ) {
+        expect(Number(getComputedStyle(node).opacity || 1)).toBe(1);
+      }
+    });
+  }
+});
+
+describe("ColumnHeaderFilter applied draft", () => {
+  const input = () => screen.getByPlaceholderText("Enter value...") as HTMLInputElement;
+  const apply = () => fireEvent.click(screen.getByRole("button", { name: "Apply" }));
+  const sample = (filterValue: { operator: string; value: unknown } | undefined) => (
+    <ColumnHeaderFilter
+      columnId="status"
+      columnLabel="Status"
+      columnType="text"
+      filterValue={filterValue}
+      isFiltered={filterValue !== undefined}
+      onFilterChange={() => {}}
+    />
+  );
+
+  it("opens with the supplied operator and value", () => {
+    const { container } = renderTrigger({ filterValue: { operator: "is", value: "corp" } });
+    fireEvent.click(trigger(container));
+    expect(input().value).toBe("corp");
+    expect(screen.getByRole("combobox", { name: "Condition" }).textContent).toBe("Is");
+  });
+
+  it("keeps an open draft when an external filter update arrives", () => {
+    const result = renderWithProviders(sample({ operator: "contains", value: "corp" }));
+    fireEvent.click(trigger(result.container));
+    fireEvent.change(input(), { target: { value: "draft" } });
+    result.rerender(sample({ operator: "is", value: "external" }));
+    expect(input().value).toBe("draft");
+    expect(screen.getByRole("combobox", { name: "Condition" }).textContent).toBe("Contains");
+  });
+
+  it("reads the latest external filter when reopened", async () => {
+    const result = renderWithProviders(sample({ operator: "contains", value: "corp" }));
+    fireEvent.click(trigger(result.container));
+    apply();
+    await waitFor(() => expect(screen.queryByPlaceholderText("Enter value...")).toBeNull());
+    result.rerender(sample({ operator: "is", value: "external" }));
+    fireEvent.click(trigger(result.container));
+    expect(input().value).toBe("external");
+    expect(screen.getByRole("combobox", { name: "Condition" }).textContent).toBe("Is");
+  });
+
+  it("clears without closing, then applies the newly composed draft", () => {
+    const onFilterChange = vi.fn();
+    const { container } = renderTrigger({
+      isFiltered: true,
+      filterValue: { operator: "contains", value: "corp" },
+      onFilterChange,
+    });
+    fireEvent.click(trigger(container));
+    fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+    expect(onFilterChange).toHaveBeenLastCalledWith(undefined);
+    expect(input().value).toBe("");
+    fireEvent.change(input(), { target: { value: "next" } });
+    apply();
+    expect(onFilterChange).toHaveBeenLastCalledWith({ operator: "contains", value: "next" });
+  });
+
+  it("resets to the default when the applied filter was removed while closed", async () => {
+    const result = renderWithProviders(sample({ operator: "is", value: "corp" }));
+    fireEvent.click(trigger(result.container));
+    fireEvent.change(input(), { target: { value: "draft" } });
+    apply();
+    await waitFor(() => expect(screen.queryByPlaceholderText("Enter value...")).toBeNull());
+    result.rerender(sample(undefined));
+    fireEvent.click(trigger(result.container));
+    expect(input().value).toBe("");
+    expect(screen.getByRole("combobox", { name: "Condition" }).textContent).toBe("Contains");
+  });
+
+  it("uses an offered numeric condition initially and after Clear", () => {
+    const onFilterChange = vi.fn();
+    const { container } = renderTrigger({ columnType: "number", isFiltered: true, onFilterChange });
+    fireEvent.click(trigger(container));
+    expect(screen.getByRole("combobox", { name: "Condition" }).textContent).toBe("Is");
+    fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+    expect(screen.getByRole("combobox", { name: "Condition" }).textContent).toBe("Is");
+    fireEvent.change(input(), { target: { value: "50" } });
+    apply();
+    expect(onFilterChange).toHaveBeenLastCalledWith({ operator: "is", value: "50" });
   });
 });

package/src/components/ColumnHeaderFilter/ColumnHeaderFilter.stories.tsx

@@ -1,8 +1,12 @@
 import type { Meta } from "@storybook/react-native-web-vite";
-import { YStack, Text } from "tamagui";
+import { useState } from "react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { YStack, XStack, Text } from "tamagui";
+import { ColumnHeaderFilter, type ColumnFilterType } from "./index";
 
 const meta: Meta = {
   title: "Table/ColumnHeaderFilter",
+  component: ColumnHeaderFilter,
   parameters: {
     status: { type: "stable" },
   },
@@ -10,14 +14,47 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default = {
-  name: "Main",
-  render: () => (
-    <YStack padding="$4">
-      <Text fontSize="$2" color="$color10">
-        ColumnHeaderFilter provides AG Grid-style column filtering with operators and value inputs.
-        It requires a DataTable column context. See DataTable stories for integrated usage.
+function ControlledColumn({
+  initiallyFiltered = false,
+  columnType = "text",
+}: {
+  initiallyFiltered?: boolean;
+  columnType?: ColumnFilterType;
+}) {
+  const label = columnType === "number" ? "Amount" : "Invoice";
+  const { knobProps } = useResolvedKnobs();
+  const [filter, setFilter] = useState<{ operator: string; value: string } | undefined>(
+    initiallyFiltered ? { operator: "contains", value: "corp" } : undefined,
+  );
+  return (
+    <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+      <XStack alignItems="center" {...knobProps.gap}>
+        <Text {...knobProps.label}>{label}</Text>
+        <ColumnHeaderFilter
+          columnId="invoice"
+          columnLabel={label}
+          columnType={columnType}
+          filterValue={filter}
+          isFiltered={filter !== undefined}
+          onFilterChange={setFilter}
+        />
+      </XStack>
+      <Text {...knobProps.body} aria-live="polite">
+        {filter ? `Applied: ${filter.operator} ${filter.value ?? ""}` : "No filter applied"}
       </Text>
     </YStack>
-  ),
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <ControlledColumn />,
+};
+
+export const Filtered = {
+  render: () => <ControlledColumn initiallyFiltered />,
+};
+
+export const NumberColumn = {
+  render: () => <ControlledColumn columnType="number" />,
 };

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.spec.tsx

@@ -171,8 +171,10 @@ describe("DataTable", () => {
         />,
       );
 
-      // In test env sm===false → mobile card view renders, column names appear as labels per row
-      const firstNameLabels = getAllByText("First Name");
+      // In test env sm===false → mobile card view renders. A bare string field
+      // carries its column name in a VisuallyHidden node ("First Name: "), so
+      // the printed "First Name" of the grid header is deliberately absent.
+      const firstNameLabels = getAllByText("First Name:");
       expect(firstNameLabels.length).toBeGreaterThan(0);
     });
 
@@ -187,7 +189,7 @@ describe("DataTable", () => {
       );
 
       // In test env sm===false → mobile card view renders
-      const firstNameLabels = getAllByText("First Name");
+      const firstNameLabels = getAllByText("First Name:");
       expect(firstNameLabels.length).toBeGreaterThan(0);
     });