@multiplatform.one/table 7.6.3 → 7.7.1

package/src/components/DataTableFilterButton/DataTableFilterButton.spec.tsx

@@ -0,0 +1,128 @@
+/**
+ * DataTableFilterButton spec (MPO-113). The button owns the toolbar Filter
+ * surface: trigger, searchable field list, live-commit into the shared
+ * operator/value editor. Chip rendering belongs to DataTableFilterChips.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
+import { DataTable } from "../DataTable";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+  department: string;
+};
+
+const data: Person[] = [
+  { id: 1, firstName: "Ada", age: 36, email: "ada@corp.com", department: "Engineering" },
+  { id: 2, firstName: "Grace", age: 45, email: "grace@corp.com", department: "Engineering" },
+  { id: 3, firstName: "Alan", age: 41, email: "alan@other.org", department: "Marketing" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const filterableFields: FilterableField[] = [
+  { id: "email", label: "Email", type: "text" },
+  {
+    id: "department",
+    label: "Department",
+    type: "select",
+    options: [
+      { label: "Engineering", value: "Engineering" },
+      { label: "Marketing", value: "Marketing" },
+    ],
+  },
+];
+
+function emailFilter(value: string): TableFilter {
+  return {
+    id: "flt-email",
+    columnId: "email",
+    value: { operator: "contains", value },
+    label: "Email",
+  };
+}
+
+function renderTable(initialFilters: TableFilter[] = []) {
+  return renderWithProviders(
+    <DataTable
+      data={data}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      filterableFields={filterableFields}
+      enableFiltering
+      enableGlobalSearch
+      initialState={{ filters: initialFilters }}
+      aria-label="People table"
+    />,
+  );
+}
+
+describe("DataTableFilterButton", () => {
+  it("renders the toolbar Filter affordance when filterableFields exist", async () => {
+    renderTable([]);
+    expect(await screen.findByRole("button", { name: "Filter" })).toBeTruthy();
+  });
+
+  it("shows the active filter count on the trigger", async () => {
+    renderTable([emailFilter("corp")]);
+    expect(await screen.findByText("Filter (1)")).toBeTruthy();
+  });
+
+  it("field list is a single-tab-stop listbox (LC-49 / LC-71)", async () => {
+    renderTable([]);
+    fireEvent.click(await screen.findByRole("button", { name: "Filter" }));
+    const listbox = await screen.findByRole("listbox", { name: "Filterable fields" });
+    expect(listbox.getAttribute("tabindex")).toBe("0");
+    const options = screen.getAllByRole("option");
+    expect(options.length).toBeGreaterThan(0);
+    for (const option of options) {
+      expect(option.getAttribute("tabindex")).toBe("-1");
+    }
+  });
+
+  it("opens a searchable field list with visible columns grouped before hidden fields", async () => {
+    renderTable([]);
+
+    fireEvent.click(await screen.findByRole("button", { name: "Filter" }));
+
+    expect(await screen.findByText("Columns")).toBeTruthy();
+    expect(screen.getByText("More fields")).toBeTruthy();
+
+    expect(screen.getByText("Email")).toBeTruthy();
+    expect(screen.getByText("Department")).toBeTruthy();
+
+    const search = screen.getByPlaceholderText("Search fields...");
+    fireEvent.change(search, { target: { value: "dep" } });
+    await waitFor(() => {
+      expect(screen.queryByText("Email")).toBeNull();
+      expect(screen.getByText("Department")).toBeTruthy();
+    });
+  });
+
+  it("live-commits a hidden-field filter (no Apply button)", async () => {
+    renderTable([]);
+
+    fireEvent.click(await screen.findByRole("button", { name: "Filter" }));
+    fireEvent.click(await screen.findByText("Email"));
+
+    expect(await screen.findByText("Condition")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Apply" })).toBeNull();
+
+    const valueInput = await screen.findByPlaceholderText("Enter value...");
+    fireEvent.change(valueInput, { target: { value: "other" } });
+
+    await waitFor(() => {
+      expect(screen.getByText("Email: contains other")).toBeTruthy();
+      expect(screen.getByText("Alan")).toBeTruthy();
+      expect(screen.queryByText("Ada")).toBeNull();
+    });
+  });
+});

package/src/components/DataTableFilterButton/DataTableFilterButton.stories.tsx

@@ -0,0 +1,99 @@
+/**
+ * DataTableFilterButton — toolbar Filter affordance. It reads
+ * DataTableStateContext, so these stories mount it the way the toolbar does:
+ * inside DataTable with filterableFields. Stage 1 is the searchable field
+ * list (visible columns first, then More fields). Stage 2 is the shared
+ * operator/value editor (MPO-101). Commit is live (LC-21).
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
+import { DataTable } from "../DataTable";
+
+const meta: Meta = {
+  title: "Table/DataTableFilterButton",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Toolbar Filter control for any field, including hidden ones. Opens a " +
+          "FloatingPanel with a searchable field list, then the shared operator/value editor.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Person {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+  department: string;
+}
+
+const people: Person[] = [
+  { id: 1, firstName: "Ada", age: 36, email: "ada@corp.com", department: "Engineering" },
+  { id: 2, firstName: "Grace", age: 45, email: "grace@corp.com", department: "Engineering" },
+  { id: 3, firstName: "Alan", age: 41, email: "alan@other.org", department: "Marketing" },
+  { id: 4, firstName: "Katherine", age: 29, email: "kate@corp.com", department: "Design" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const filterableFields: FilterableField[] = [
+  { id: "firstName", label: "First Name", type: "text" },
+  { id: "age", label: "Age", type: "number" },
+  { id: "email", label: "Email", type: "text" },
+  {
+    id: "department",
+    label: "Department",
+    type: "select",
+    options: [
+      { label: "Engineering", value: "Engineering" },
+      { label: "Marketing", value: "Marketing" },
+      { label: "Design", value: "Design" },
+    ],
+  },
+];
+
+function emailContains(value: string): TableFilter {
+  return {
+    id: "flt-email",
+    columnId: "email",
+    value: { operator: "contains", value },
+    label: "Email",
+  };
+}
+
+function FilterTable({ initialFilters = [] }: { initialFilters?: TableFilter[] }) {
+  return (
+    <YStack padding="$4" width="100%">
+      <DataTable
+        data={people}
+        columns={columns}
+        filterableFields={filterableFields}
+        enableFiltering
+        enableGlobalSearch
+        initialState={{ filters: initialFilters }}
+        aria-label="People with toolbar filter"
+      />
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <FilterTable />,
+};
+
+/** Active filters turn the trigger accent and stamp the count (Filter (N)). */
+export const ActiveCount = {
+  render: () => <FilterTable initialFilters={[emailContains("corp")]} />,
+};

package/src/components/DataTableFilterChips/DataTableFilterChips.spec.tsx

@@ -1,12 +1,11 @@
 /**
- * Hidden-field filtering surface: chips bar + toolbar filter button,
- * integration-tested through the compound DataTable (context wiring,
- * client-side pre-filter, live state).
+ * Hidden-field filtering surface: chips bar, integration-tested through
+ * the compound DataTable (context wiring, client-side pre-filter, live
+ * state). The toolbar Filter button lives in DataTableFilterButton.spec.tsx.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
 import { DataTable } from "../DataTable";
@@ -91,14 +90,13 @@ describe("DataTableFilterChips", () => {
   });
 
   it("removing the chip restores the rows", async () => {
-    const user = userEvent.setup();
     renderTable([emailFilter("corp")]);
 
     expect(await screen.findByText("Email: contains corp")).toBeTruthy();
     expect(screen.queryByText("Alan")).toBeNull();
 
     const removeButtons = screen.getAllByRole("button", { name: "Remove" });
-    await user.click(removeButtons[0]);
+    fireEvent.click(removeButtons[0]);
 
     await waitFor(() => {
       expect(screen.queryByText("Email: contains corp")).toBeNull();
@@ -107,7 +105,6 @@ describe("DataTableFilterChips", () => {
   });
 
   it("shows Clear all at 2+ chips and clears every filter at once", async () => {
-    const user = userEvent.setup();
     renderTable([emailFilter("corp"), departmentFilter("Engineering")]);
 
     expect(await screen.findByText("Email: contains corp")).toBeTruthy();
@@ -115,7 +112,7 @@ describe("DataTableFilterChips", () => {
     expect(screen.getByText("Department: is Engineering")).toBeTruthy();
 
     const clearAll = screen.getByRole("button", { name: "Clear all" });
-    await user.click(clearAll);
+    fireEvent.click(clearAll);
 
     await waitFor(() => {
       expect(screen.queryByText("Email: contains corp")).toBeNull();
@@ -138,75 +135,3 @@ describe("DataTableFilterChips", () => {
     expect(remove.className).toMatch(/mp-chip-dismiss/);
   });
 });
-
-describe("DataTableFilterButton", () => {
-  it("renders the toolbar Filter affordance when filterableFields exist", async () => {
-    renderTable([]);
-    expect(await screen.findByRole("button", { name: "Filter" })).toBeTruthy();
-  });
-
-  it("shows the active filter count on the trigger", async () => {
-    renderTable([emailFilter("corp")]);
-    expect(await screen.findByText("Filter (1)")).toBeTruthy();
-  });
-
-  it("field list is a single-tab-stop listbox (LC-49 / LC-71)", async () => {
-    const user = userEvent.setup();
-    renderTable([]);
-    await user.click(await screen.findByRole("button", { name: "Filter" }));
-    const listbox = await screen.findByRole("listbox", { name: "Filterable fields" });
-    expect(listbox.getAttribute("tabindex")).toBe("0");
-    const options = screen.getAllByRole("option");
-    expect(options.length).toBeGreaterThan(0);
-    for (const option of options) {
-      expect(option.getAttribute("tabindex")).toBe("-1");
-    }
-  });
-
-  it("opens a searchable field list with visible columns grouped before hidden fields", async () => {
-    const user = userEvent.setup();
-    renderTable([]);
-
-    const trigger = await screen.findByRole("button", { name: "Filter" });
-    await user.click(trigger);
-
-    // Group headers
-    expect(await screen.findByText("Columns")).toBeTruthy();
-    expect(screen.getByText("More fields")).toBeTruthy();
-
-    // Hidden fields listed
-    expect(screen.getByText("Email")).toBeTruthy();
-    expect(screen.getByText("Department")).toBeTruthy();
-
-    // Search narrows the list
-    const search = screen.getByPlaceholderText("Search fields...");
-    await user.type(search, "dep");
-    await waitFor(() => {
-      expect(screen.queryByText("Email")).toBeNull();
-      expect(screen.getByText("Department")).toBeTruthy();
-    });
-  });
-
-  it("live-commits a hidden-field filter (no Apply button)", async () => {
-    const user = userEvent.setup();
-    renderTable([]);
-
-    await user.click(await screen.findByRole("button", { name: "Filter" }));
-    await user.click(await screen.findByText("Email"));
-
-    // Operator/value editor opens with the shared editor (Condition select)
-    expect(await screen.findByText("Condition")).toBeTruthy();
-    // No Apply button in the live-commit surface (LC-21)
-    expect(screen.queryByRole("button", { name: "Apply" })).toBeNull();
-
-    const valueInput = await screen.findByPlaceholderText("Enter value...");
-    await user.type(valueInput, "other");
-
-    // Filter applied live: chip + filtered rows without any Apply press
-    await waitFor(() => {
-      expect(screen.getByText("Email: contains other")).toBeTruthy();
-      expect(screen.getByText("Alan")).toBeTruthy();
-      expect(screen.queryByText("Ada")).toBeNull();
-    });
-  });
-});

package/src/components/DataTableFilterChips/DataTableFilterChips.stories.tsx

@@ -0,0 +1,105 @@
+/**
+ * DataTableFilterChips — every active filter as a removable pill under the
+ * toolbar (Axiom 6 HONEST STATE), including filters on fields with no
+ * visible column. Chip press reopens the shared editor; X removes; Clear
+ * all appears at 2+ chips.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import type { DataTableColumn, FilterableField, TableFilter } from "../../types";
+import { DataTable } from "../DataTable";
+
+const meta: Meta = {
+  title: "Table/DataTableFilterChips",
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Wrapping pills for every active filter. Gray fill, two focusables per chip " +
+          "(edit + dismiss), Clear all from the second chip on.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+interface Person {
+  id: number;
+  firstName: string;
+  age: number;
+  email: string;
+  department: string;
+}
+
+const people: Person[] = [
+  { id: 1, firstName: "Ada", age: 36, email: "ada@corp.com", department: "Engineering" },
+  { id: 2, firstName: "Grace", age: 45, email: "grace@corp.com", department: "Engineering" },
+  { id: 3, firstName: "Alan", age: 41, email: "alan@other.org", department: "Marketing" },
+  { id: 4, firstName: "Katherine", age: 29, email: "kate@corp.com", department: "Design" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const filterableFields: FilterableField[] = [
+  { id: "email", label: "Email", type: "text" },
+  {
+    id: "department",
+    label: "Department",
+    type: "select",
+    options: [
+      { label: "Engineering", value: "Engineering" },
+      { label: "Marketing", value: "Marketing" },
+      { label: "Design", value: "Design" },
+    ],
+  },
+];
+
+function emailContains(value: string): TableFilter {
+  return {
+    id: "flt-email",
+    columnId: "email",
+    value: { operator: "contains", value },
+    label: "Email",
+  };
+}
+
+function departmentIs(value: string): TableFilter {
+  return {
+    id: "flt-department",
+    columnId: "department",
+    value: { operator: "is", value },
+    label: "Department",
+  };
+}
+
+function ChipTable({ initialFilters }: { initialFilters: TableFilter[] }) {
+  return (
+    <YStack padding="$4" width="100%">
+      <DataTable
+        data={people}
+        columns={columns}
+        filterableFields={filterableFields}
+        enableFiltering
+        enableGlobalSearch
+        initialState={{ filters: initialFilters }}
+        aria-label="People with filter chips"
+      />
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <ChipTable initialFilters={[emailContains("corp")]} />,
+};
+
+/** Clear all lands once two chips are active. */
+export const ClearAll = {
+  render: () => <ChipTable initialFilters={[emailContains("corp"), departmentIs("Engineering")]} />,
+};

package/src/components/DataTableFilterChips/FilterChip.spec.tsx

@@ -0,0 +1,77 @@
+/**
+ * FilterChip unit specs — the pill on its own, no DataTable around it.
+ *
+ * DataTableFilterChips.spec.tsx drives the chip through the compound table and
+ * proves the bar's behaviour. This file pins the chip's OWN contract, which the
+ * bar cannot state: the `onPress`/no-`onPress` split (an editable chip is a
+ * button, a display-only chip is not), that dismiss does not also fire the edit
+ * press, and that Enter/Space activate both focusables.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FilterChip } from "./FilterChip";
+
+describe("FilterChip", () => {
+  it("renders the label and a dismiss button", () => {
+    renderWithProviders(<FilterChip label="Email: contains corp" onRemove={vi.fn()} />);
+    expect(screen.getByText("Email: contains corp")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+  });
+
+  it("with onPress the pill is an edit button; both focusables are tab stops (LC-71)", () => {
+    renderWithProviders(
+      <FilterChip label="Email: contains corp" onPress={vi.fn()} onRemove={vi.fn()} />,
+    );
+    const edit = screen.getByRole("button", { name: "Edit filter Email: contains corp" });
+    const remove = screen.getByRole("button", { name: "Remove" });
+    expect(edit.getAttribute("tabindex")).toBe("0");
+    expect(remove.getAttribute("tabindex")).toBe("0");
+    expect(remove.className).toMatch(/mp-chip-dismiss/);
+  });
+
+  it("without onPress the pill is display-only: no edit button, dismiss still works", () => {
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Department: is Engineering" onRemove={onRemove} />);
+    expect(screen.queryByRole("button", { name: /Edit filter/ })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("pressing the pill edits and does not remove", () => {
+    const onPress = vi.fn();
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={onRemove} />);
+    fireEvent.click(screen.getByRole("button", { name: "Edit filter Age: gt 30" }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onRemove).not.toHaveBeenCalled();
+  });
+
+  it("pressing dismiss removes without also firing the chip's edit press", () => {
+    const onPress = vi.fn();
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={onRemove} />);
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("Enter and Space activate the edit press", () => {
+    const onPress = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={vi.fn()} />);
+    const edit = screen.getByRole("button", { name: "Edit filter Age: gt 30" });
+    fireEvent.keyDown(edit, { key: "Enter" });
+    fireEvent.keyDown(edit, { key: " " });
+    expect(onPress).toHaveBeenCalledTimes(2);
+  });
+
+  it("Enter on the dismiss glyph removes and does not bubble into the edit press", () => {
+    const onPress = vi.fn();
+    const onRemove = vi.fn();
+    renderWithProviders(<FilterChip label="Age: gt 30" onPress={onPress} onRemove={onRemove} />);
+    fireEvent.keyDown(screen.getByRole("button", { name: "Remove" }), { key: "Enter" });
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

package/src/components/DataTableFilterChips/FilterChip.stories.tsx

@@ -0,0 +1,111 @@
+/**
+ * FilterChip — one active filter as a pill, standalone.
+ *
+ * DataTableFilterChips stories show the bar; this file shows the unit the bar
+ * is made of, with no table around it. Two focusables, two rings (LC-71):
+ * pressing the pill reopens the editor and rings the pill, pressing the X
+ * removes the filter and rings the glyph, never the 44px hit box. A chip with
+ * no `onPress` is display-only — no button role, no pill ring, dismiss still
+ * works.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, XStack, YStack } from "tamagui";
+import { FilterChip } from "./FilterChip";
+
+const meta: Meta<typeof FilterChip> = {
+  title: "Table/FilterChip",
+  component: FilterChip,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "One active filter as a removable pill. Gray fill, label, dismiss glyph. " +
+          "Editable chips take a button role and a focus ring; display-only chips take neither.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+/** Editable: the pill is a button (edit) and the X is a second button (remove). */
+export const Default = {
+  name: "Main",
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <FilterChip
+        label="Email contains corp"
+        onPress={action("press")}
+        onRemove={action("remove")}
+      />
+    </YStack>
+  ),
+};
+
+/** Without `onPress` the chip is display-only: no button role on the pill. */
+export const DisplayOnly = {
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <FilterChip label="Department is Engineering" onRemove={action("remove")} />
+    </YStack>
+  ),
+};
+
+/** A row of siblings, as the chips bar renders them. Long labels do not truncate. */
+export const Row = {
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <XStack gap="$2" flexWrap="wrap">
+        <FilterChip
+          label="Email contains corp"
+          onPress={action("press")}
+          onRemove={action("remove")}
+        />
+        <FilterChip
+          label="Department is Engineering"
+          onPress={action("press")}
+          onRemove={action("remove")}
+        />
+        <FilterChip
+          label="Age is greater than 30"
+          onPress={action("press")}
+          onRemove={action("remove")}
+        />
+      </XStack>
+    </YStack>
+  ),
+};
+
+function RemovableRow() {
+  const [labels, setLabels] = useState([
+    "Email contains corp",
+    "Department is Engineering",
+    "Age is greater than 30",
+  ]);
+  return (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <XStack gap="$2" flexWrap="wrap">
+        {labels.map((label) => (
+          <FilterChip
+            key={label}
+            label={label}
+            onPress={action("press")}
+            onRemove={() => setLabels((current) => current.filter((item) => item !== label))}
+          />
+        ))}
+      </XStack>
+      <Paragraph size="$2" testID="chip-count">
+        {`${labels.length} active`}
+      </Paragraph>
+    </YStack>
+  );
+}
+
+/** Dismiss actually removes: press an X and the count drops. */
+export const Removable = {
+  render: () => <RemovableRow />,
+};