@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/ColumnHeaderFilter/index.tsx

@@ -4,12 +4,20 @@
  */
 
 import { FunnelIcon } from "@phosphor-icons/react";
-import { Button, Input, Select } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState, useMemo } from "react";
+import { Button } from "@multiplatform.one/forms";
+import {
+  MIN_PRESS_TARGET,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { useState } from "react";
 import { Tooltip } from "@multiplatform.one/components";
 import { Popover, Text, View, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t";
 import type { FilterOperator } from "../../types";
+import { operatorNeedsNoValue } from "../../utils/filterFields";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor";
 
 export type ColumnFilterType = "text" | "number" | "date" | "boolean" | "select";
 
@@ -27,55 +35,14 @@ export interface ColumnHeaderFilterProps {
   isFiltered?: boolean;
 }
 
-const TEXT_OPERATORS: FilterOperator[] = [
-  "contains",
-  "doesNotContain",
-  "is",
-  "isNot",
-  "startsWith",
-  "endsWith",
-  "isEmpty",
-  "isNotEmpty",
-];
-
-const NUMBER_OPERATORS: FilterOperator[] = [
-  "is",
-  "isNot",
-  "isLessThan",
-  "isGreaterThan",
-  "isLessThanOrEqual",
-  "isGreaterThanOrEqual",
-];
-
-const DATE_OPERATORS: FilterOperator[] = [
-  "is",
-  "isNot",
-  "isBefore",
-  "isAfter",
-  "isOnOrBefore",
-  "isOnOrAfter",
-];
-
-const BOOLEAN_OPERATORS: FilterOperator[] = ["is", "isNot"];
-
-const OPERATOR_LABELS: Record<string, string> = {
-  contains: "Contains",
-  doesNotContain: "Does not contain",
-  is: "Is",
-  isNot: "Is not",
-  startsWith: "Starts with",
-  endsWith: "Ends with",
-  isEmpty: "Is empty",
-  isNotEmpty: "Is not empty",
-  isLessThan: "Less than",
-  isGreaterThan: "Greater than",
-  isLessThanOrEqual: "Less than or equal",
-  isGreaterThanOrEqual: "Greater than or equal",
-  isBefore: "Before",
-  isAfter: "After",
-  isOnOrBefore: "On or before",
-  isOnOrAfter: "On or after",
-};
+// DG-LAY-04 / SP-FIXED: the funnel glyph stays small (~22px incl. padding) but
+// the press target is floored at 44×44; negative margins keep header row
+// height and column flow unchanged (same pattern as Chip dismiss).
+const FILTER_TRIGGER_VISUAL = 22;
+const FILTER_TRIGGER_OUTSET = Math.max(
+  0,
+  Math.ceil((MIN_PRESS_TARGET - FILTER_TRIGGER_VISUAL) / 2),
+);
 
 export function ColumnHeaderFilter({
   columnId: _columnId,
@@ -91,34 +58,10 @@ export function ColumnHeaderFilter({
   const [operator, setOperator] = useState<FilterOperator>("contains");
   const [value, setValue] = useState<string>("");
 
-  // Get operators based on column type
-  const operators = useMemo(() => {
-    switch (columnType) {
-      case "number":
-        return NUMBER_OPERATORS;
-      case "date":
-        return DATE_OPERATORS;
-      case "boolean":
-        return BOOLEAN_OPERATORS;
-      case "select":
-        return ["is", "isNot", "isAnyOf"] as FilterOperator[];
-      default:
-        return TEXT_OPERATORS;
-    }
-  }, [columnType]);
-
-  // Convert operators to forms Select options
-  const operatorOptions = useMemo(
-    () =>
-      operators.map((op) => ({
-        value: op,
-        label: OPERATOR_LABELS[op] || op,
-      })),
-    [operators],
-  );
-
+  // 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 = () => {
-    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+    if (operatorNeedsNoValue(operator)) {
       onFilterChange({ operator, value: null });
     } else {
       onFilterChange({ operator, value });
@@ -126,39 +69,29 @@ export function ColumnHeaderFilter({
     setOpen(false);
   };
 
+  // LC-21 (owner adjudication 2026-08-12): Clear edits the filter, it is not
+  // dismissal intent — the panel stays open so the user can compose the next
+  // filter; outside click / Escape / Apply close.
   const handleClear = () => {
     setValue("");
     setOperator("contains");
     onFilterChange(undefined);
-    setOpen(false);
   };
 
-  const needsValueInput = !["isEmpty", "isNotEmpty"].includes(operator);
-
-  // Boolean options for forms Select
-  const booleanOptions = [
-    { value: "true", label: "True" },
-    { value: "false", label: "False" },
-  ];
-
-  // Convert column options to forms Select format
-  const selectOptions = useMemo(
-    () =>
-      options?.map((opt) => ({
-        value: String(opt.value),
-        label: opt.label,
-      })) || [],
-    [options],
-  );
-
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <Tooltip content={isFiltered ? "Edit filter" : "Filter this column"}>
+      <Tooltip content={isFiltered ? t("Edit filter") : t("Filter this column")}>
         <Popover.Trigger asChild>
           <View
             padding="$1"
             borderRadius="$2"
             cursor="pointer"
+            {...pressTargetStyle()}
+            alignItems="center"
+            justifyContent="center"
+            marginVertical={-FILTER_TRIGGER_OUTSET}
+            marginHorizontal={-FILTER_TRIGGER_OUTSET}
+            hitSlop={pressTargetHitSlop(FILTER_TRIGGER_VISUAL)}
             hoverStyle={{ backgroundColor: "$color4" }}
             pressStyle={{ backgroundColor: "$color5" }}
             onPress={(e) => {
@@ -192,77 +125,28 @@ export function ColumnHeaderFilter({
 
         <YStack {...knobProps.gap}>
           <Text fontSize={knobProps.sizeToken} fontWeight="600" color="$color11">
-            Filter: {columnLabel}
+            {t("Filter: {{column}}", { column: columnLabel })}
           </Text>
 
-          {/* Operator select */}
-          <Select
-            label="Condition"
-            value={operator}
-            onValueChange={(v) => {
-              if (typeof v === "string") {
-                setOperator(v as FilterOperator);
-              }
-            }}
-            options={operatorOptions}
-            size="$3"
-            compact
+          {/* Shared operator/value editor (LC-16 — same one the toolbar filter uses) */}
+          <FilterOperatorValueEditor
+            fieldType={columnType}
+            operator={operator}
+            value={value}
+            onOperatorChange={setOperator}
+            onValueChange={setValue}
+            options={options}
           />
 
-          {/* Value input */}
-          {needsValueInput && (
-            <YStack gap="$1">
-              {columnType === "boolean" ? (
-                <Select
-                  label="Value"
-                  value={value}
-                  onValueChange={(v) => {
-                    if (typeof v === "string") {
-                      setValue(v);
-                    }
-                  }}
-                  options={booleanOptions}
-                  placeholder="Select..."
-                  size="$3"
-                  compact
-                />
-              ) : columnType === "select" && options ? (
-                <Select
-                  label="Value"
-                  value={value}
-                  onValueChange={(v) => {
-                    if (typeof v === "string") {
-                      setValue(v);
-                    }
-                  }}
-                  options={selectOptions}
-                  placeholder="Select..."
-                  size="$3"
-                  compact
-                />
-              ) : (
-                <Input
-                  label="Value"
-                  value={value}
-                  onChangeText={setValue}
-                  placeholder={columnType === "date" ? "YYYY-MM-DD" : "Enter value..."}
-                  size="$3"
-                  compact
-                  {...(columnType === "number" && { keyboardType: "numeric" })}
-                />
-              )}
-            </YStack>
-          )}
-
           {/* Actions */}
           <XStack gap="$2" justifyContent="flex-end">
             {isFiltered && (
               <Button size="$2" variant="outlined" onPress={handleClear}>
-                Clear
+                {t("Clear")}
               </Button>
             )}
             <Button size="$2" onPress={handleApply}>
-              Apply
+              {t("Apply")}
             </Button>
           </XStack>
         </YStack>
@@ -270,5 +154,3 @@ export function ColumnHeaderFilter({
     </Popover>
   );
 }
-
-export default ColumnHeaderFilter;

package/src/components/DataTable/DataTable.spec.tsx

@@ -1,6 +1,8 @@
 import { createColumnHelper } from "@tanstack/react-table";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumn } from "../../types";
 import { DataTable } from "./index";
@@ -311,6 +313,29 @@ describe("DataTable", () => {
 
       expect(container).toBeDefined();
     });
+
+    it("filters rendered rows when typing in the global search input", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableGlobalSearch={true}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByText("John")).toBeDefined();
+      expect(screen.getByText("Jane")).toBeDefined();
+
+      await user.type(screen.getByPlaceholderText("Search..."), "Charlie");
+
+      await waitFor(() => {
+        expect(screen.queryByText("John")).toBeNull();
+      });
+      expect(screen.getByText("Charlie")).toBeDefined();
+      expect(screen.queryByText("Jane")).toBeNull();
+    });
   });
 
   describe("column visibility", () => {
@@ -551,6 +576,41 @@ describe("DataTable", () => {
   });
 
   describe("error handling", () => {
+    it("renders error chrome instead of rows when state.error is set (DG-ST-01 / Axiom 6)", () => {
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          initialState={{ error: "The rows could not be loaded." }}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      // A failed load must never masquerade as data or empty chrome
+      expect(document.querySelector('[data-async-state="error"]')).toBeTruthy();
+      expect(screen.getByText("The rows could not be loaded.")).toBeDefined();
+      expect(screen.queryByText("John")).toBeNull();
+      // Without onRetry the error chrome renders without an unreachable action
+      expect(screen.queryByText("Retry")).toBeNull();
+    });
+
+    it("fires onRetry from the error chrome's Retry action (DG-ST-01 'with retry')", async () => {
+      const onRetry = vi.fn();
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          initialState={{ error: "The rows could not be loaded." }}
+          onRetry={onRetry}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByText("Retry"));
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+
     it("should handle invalid data gracefully", () => {
       const invalidData = [{ invalidField: "value" }];
 
@@ -571,4 +631,291 @@ describe("DataTable", () => {
       expect(container).toBeDefined();
     });
   });
+
+  describe("row selection + bulk bar (DG-TBL-02/03)", () => {
+    const bulkActions = [
+      {
+        id: "export",
+        label: "Export",
+        onExecute: vi.fn((_items: Person[], clear: () => void) => clear()),
+      },
+      {
+        id: "delete",
+        label: "Delete",
+        variant: "destructive" as const,
+        onExecute: vi.fn((_items: Person[], clear: () => void) => clear()),
+      },
+    ];
+
+    it("does not show selection UI when enableRowSelection is false", () => {
+      renderWithProviders(
+        <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
+      );
+
+      expect(screen.queryByLabelText("Select all rows")).toBeNull();
+      expect(screen.queryByLabelText(/^Select row/)).toBeNull();
+      expect(screen.queryByText(/selected/)).toBeNull();
+    });
+
+    it("renders checkboxes when enableRowSelection is true", () => {
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByLabelText("Select all rows")).toBeDefined();
+      // Row identity is templated into the name (DG-A11Y-06); without an
+      // initialized i18n instance the raw key renders, so match the prefix.
+      expect(screen.getAllByLabelText(/^Select row/).length).toBe(sampleData.length);
+    });
+
+    it("auto-shows selection toolbar with count and clear after selecting a row", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      expect(screen.queryByText("1 selected")).toBeNull();
+
+      await user.click(screen.getAllByLabelText(/^Select row/)[0]!);
+
+      expect(await screen.findByText("1 selected")).toBeDefined();
+      expect(screen.getByLabelText("Clear selection")).toBeDefined();
+      expect(screen.getByText("Export")).toBeDefined();
+    });
+
+    it("clears selection from the bulk bar", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getAllByLabelText(/^Select row/)[0]!);
+      expect(await screen.findByText("1 selected")).toBeDefined();
+
+      await user.click(screen.getByLabelText("Clear selection"));
+      await waitFor(() => {
+        expect(screen.queryByText("1 selected")).toBeNull();
+      });
+    });
+
+    it("select-all (page scope) selects visible page rows", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          selectAllScope="page"
+          enablePagination
+          initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("2 selected")).toBeDefined();
+    });
+
+    it("select-all (filtered scope) selects all matching rows", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          selectAllScope="filtered"
+          enablePagination
+          initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("5 selected")).toBeDefined();
+    });
+
+    it("selectAllScope defaults to page from the house knob", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          enablePagination
+          initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("2 selected")).toBeDefined();
+    });
+
+    it("house knob selectAllScope=filtered drives select-all when no prop is set", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Preset overrides={{ selectAllScope: "filtered" }}>
+          <DataTable
+            data={sampleData}
+            columns={columns}
+            enableRowSelection
+            enablePagination
+            initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+            bulkActions={bulkActions}
+            onStateChange={vi.fn()}
+          />
+        </Preset>,
+      );
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("5 selected")).toBeDefined();
+    });
+
+    it("selectAllScope prop overrides the house knob", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <Preset overrides={{ selectAllScope: "filtered" }}>
+          <DataTable
+            data={sampleData}
+            columns={columns}
+            enableRowSelection
+            selectAllScope="page"
+            enablePagination
+            initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+            bulkActions={bulkActions}
+            onStateChange={vi.fn()}
+          />
+        </Preset>,
+      );
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("2 selected")).toBeDefined();
+    });
+
+    it("page scope exposes a scope switch; count reflects the expanded scope", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          selectAllScope="page"
+          enablePagination
+          initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      // No switch until the page is fully selected.
+      expect(screen.queryByText("Select all 5")).toBeNull();
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("2 selected")).toBeDefined();
+
+      // Page fully selected but more rows match → scope switch appears.
+      const switchButton = await screen.findByText("Select all 5");
+      await user.click(switchButton);
+
+      // Count reflects the all-matching scope; the switch disappears.
+      expect(await screen.findByText("5 selected")).toBeDefined();
+      await waitFor(() => {
+        expect(screen.queryByText("Select all 5")).toBeNull();
+      });
+    });
+
+    it("filtered scope never shows the scope switch", async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          selectAllScope="filtered"
+          enablePagination
+          initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+          bulkActions={bulkActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByLabelText("Select all rows"));
+      expect(await screen.findByText("5 selected")).toBeDefined();
+      expect(screen.queryByText(/Select all \d/)).toBeNull();
+    });
+
+    it("overflows bulk actions beyond 5 into the more menu", async () => {
+      const manyActions = Array.from({ length: 6 }, (_, i) => ({
+        id: `action-${i}`,
+        label: `Action ${i + 1}`,
+        onExecute: vi.fn(),
+      }));
+
+      const user = userEvent.setup();
+      renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection
+          bulkActions={manyActions}
+          onStateChange={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getAllByLabelText(/^Select row/)[0]!);
+      expect(await screen.findByText("1 selected")).toBeDefined();
+      expect(screen.getByText("Action 1")).toBeDefined();
+      expect(screen.getByText("Action 5")).toBeDefined();
+      expect(screen.queryByText("Action 6")).toBeNull();
+      expect(screen.getByLabelText("More bulk actions")).toBeDefined();
+    });
+  });
+
+  describe("tableZebra house knob", () => {
+    it("defaults off — all body rows marked data-table-zebra=off", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ tableZebra: "off" }}>
+          <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />
+        </Preset>,
+      );
+      const rows = container.querySelectorAll("[data-table-zebra]");
+      expect(rows.length).toBeGreaterThan(1);
+      for (const row of Array.from(rows)) {
+        expect(row.getAttribute("data-table-zebra")).toBe("off");
+      }
+    });
+
+    it("stripes odd/even when tableZebra is on", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ tableZebra: "on" }}>
+          <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />
+        </Preset>,
+      );
+      const even = container.querySelectorAll("[data-table-zebra='even']");
+      const odd = container.querySelectorAll("[data-table-zebra='odd']");
+      expect(even.length).toBeGreaterThan(0);
+      expect(odd.length).toBeGreaterThan(0);
+    });
+  });
 });