@multiplatform.one/table 6.0.4 → 6.3.0

package/src/components/DataTableFilterButton/index.tsx

@@ -0,0 +1,406 @@
+/**
+ * DataTableFilterButton — toolbar "Filter" affordance for filtering on ANY
+ * field, including hidden / non-column fields (the anti-Frappe-desk surface).
+ *
+ * Opens a FloatingPanel (anchored popover on desktop, sheet ≤860px / native —
+ * LC-06) with two stages:
+ *   1. a SEARCHABLE field list, visible columns grouped first, then
+ *      "More fields" (hidden/non-column) — scales to 50+ doctype fields
+ *   2. the SAME operator/value editor the column funnel uses (LC-16)
+ *
+ * Commit is LIVE (LC-21, no Apply button): picking field + operator + value
+ * applies immediately; outside click / Escape just closes. Chip presses
+ * reopen this editor pre-filled via the context filterUi channel.
+ */
+
+import { CaretLeftIcon, CaretRightIcon, FunnelIcon } from "@phosphor-icons/react";
+import { useDirection } from "@multiplatform.one/components";
+import { Button, FloatingPanel, SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { isWeb, Text, View, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t";
+import type { FilterOperator, FilterValue, ResolvedFilterField } from "../../types";
+import {
+  defaultOperatorForFilterType,
+  isFilterValueShape,
+  operatorNeedsNoValue,
+} from "../../utils/filterFields";
+import type { FilterEditTarget } from "../DataTable/DataTableStateContext";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor";
+
+interface FieldRowProps {
+  field: ResolvedFilterField;
+  highlighted: boolean;
+  onSelect: (field: ResolvedFilterField) => void;
+}
+
+function FieldRow({ field, highlighted, onSelect }: FieldRowProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View
+      role="option"
+      aria-selected={highlighted}
+      tabIndex={0}
+      cursor="pointer"
+      paddingHorizontal="$2.5"
+      paddingVertical="$2"
+      {...knobProps.borderRadius}
+      backgroundColor={highlighted ? "$color4" : "transparent"}
+      hoverStyle={{ backgroundColor: "$color4" }}
+      pressStyle={{ backgroundColor: "$color5" }}
+      focusVisibleStyle={{
+        outlineColor: "$outlineColor",
+        outlineWidth: 2,
+        outlineStyle: "solid",
+      }}
+      onPress={() => onSelect(field)}
+      onKeyDown={
+        ((e: KeyboardEvent) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect(field);
+          }
+        }) as unknown as () => void
+      }
+    >
+      <Text fontSize="$3" color="$color12" numberOfLines={1}>
+        {field.label}
+      </Text>
+    </View>
+  );
+}
+
+function GroupHeader({ children }: { children: string }) {
+  return (
+    <Text
+      fontSize="$1"
+      fontWeight="600"
+      color="$color10"
+      textTransform="uppercase"
+      letterSpacing={0.5}
+      paddingHorizontal="$2.5"
+      paddingTop="$2"
+      paddingBottom="$1"
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function DataTableFilterButton() {
+  const ctx = useDataTableState();
+  const { knobProps } = useResolvedKnobs();
+  const viewportGtSm = useViewportGtSm();
+  // "Back to field list" points toward the panel's start edge — directional,
+  // so the caret pair swaps under RTL (useDirection glyph-swap pattern).
+  const BackCaretIcon = useDirection() === "rtl" ? CaretRightIcon : CaretLeftIcon;
+
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [activeField, setActiveField] = useState<ResolvedFilterField | null>(null);
+  const [operator, setOperator] = useState<FilterOperator>("contains");
+  const [value, setValue] = useState("");
+  // Existing filter being edited: column funnel target or advanced filter id.
+  const [columnTarget, setColumnTarget] = useState<string | null>(null);
+  const advancedIdRef = useRef<string | null>(null);
+  const [editingExisting, setEditingExisting] = useState(false);
+
+  const fields: ResolvedFilterField[] = ctx?.computed?.filterFields ?? [];
+  const table = ctx?.table;
+
+  const visibleColumnIds = useMemo(() => {
+    if (!table) return new Set<string>();
+    return new Set(table.getVisibleLeafColumns().map((c: any) => c.id as string));
+  }, [table, open]);
+
+  const query = search.trim().toLowerCase();
+  const matching = useMemo(
+    () =>
+      query
+        ? fields.filter(
+            (f) => f.label.toLowerCase().includes(query) || f.id.toLowerCase().includes(query),
+          )
+        : fields,
+    [fields, query],
+  );
+  const columnFields = useMemo(
+    () => matching.filter((f) => visibleColumnIds.has(f.id)),
+    [matching, visibleColumnIds],
+  );
+  const moreFields = useMemo(
+    () => matching.filter((f) => !visibleColumnIds.has(f.id)),
+    [matching, visibleColumnIds],
+  );
+  const flatList = useMemo(() => [...columnFields, ...moreFields], [columnFields, moreFields]);
+
+  const resetEditor = useCallback(() => {
+    setActiveField(null);
+    setColumnTarget(null);
+    setEditingExisting(false);
+    advancedIdRef.current = null;
+    setSearch("");
+    setHighlightedIndex(0);
+  }, []);
+
+  // LIVE commit (LC-21): every operator/value change applies immediately.
+  const commit = useCallback(
+    (field: ResolvedFilterField, op: FilterOperator, val: string) => {
+      if (!ctx) return;
+      const noValue = operatorNeedsNoValue(op);
+      const filterValue: FilterValue = { operator: op, value: noValue ? null : val };
+      if (columnTarget) {
+        table?.getColumn(columnTarget)?.setFilterValue(filterValue);
+        return;
+      }
+      const meaningful = noValue || val !== "";
+      if (advancedIdRef.current) {
+        ctx.actions.updateFilter?.(advancedIdRef.current, {
+          columnId: field.id,
+          value: filterValue,
+          label: field.label,
+        });
+      } else if (meaningful) {
+        advancedIdRef.current =
+          ctx.actions.addFilter({
+            columnId: field.id,
+            value: filterValue,
+            label: field.label,
+          }) ?? null;
+      }
+    },
+    [ctx, columnTarget, table],
+  );
+
+  const handleSelectField = useCallback((field: ResolvedFilterField) => {
+    setActiveField(field);
+    setOperator(defaultOperatorForFilterType(field.type));
+    setValue("");
+    setEditingExisting(false);
+    advancedIdRef.current = null;
+    setColumnTarget(null);
+  }, []);
+
+  const handleOperatorChange = useCallback(
+    (op: FilterOperator) => {
+      setOperator(op);
+      if (activeField) commit(activeField, op, value);
+    },
+    [activeField, commit, value],
+  );
+
+  const handleValueChange = useCallback(
+    (val: string) => {
+      setValue(val);
+      if (activeField) commit(activeField, operator, val);
+    },
+    [activeField, commit, operator],
+  );
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      setOpen(next);
+      if (next) return;
+      // Closing: drop a committed filter whose value ended up empty — an
+      // empty-valued filter matches everything and would leave a junk chip.
+      const id = advancedIdRef.current;
+      if (id && !operatorNeedsNoValue(operator) && value === "") {
+        ctx?.actions.removeFilter(id);
+      }
+      resetEditor();
+    },
+    [ctx, operator, value, resetEditor],
+  );
+
+  // LC-21 (owner adjudication 2026-08-12): removing the filter edits filter
+  // state, it is not dismissal intent — the panel returns to the field list
+  // (stage 1) so the user can compose the next filter; outside click / Escape
+  // close.
+  const handleRemoveCurrent = useCallback(() => {
+    if (columnTarget) {
+      table?.getColumn(columnTarget)?.setFilterValue(undefined);
+    } else if (advancedIdRef.current) {
+      ctx?.actions.removeFilter(advancedIdRef.current);
+    }
+    advancedIdRef.current = null;
+    resetEditor();
+  }, [ctx, columnTarget, table, resetEditor]);
+
+  // Chip press → reopen the editor pre-filled (filterUi channel).
+  const editTarget = ctx?.filterUi?.editTarget ?? null;
+  useEffect(() => {
+    if (!editTarget || !ctx) return;
+    ctx.filterUi?.requestEdit(null); // consume the request
+    const openWith = (
+      field: ResolvedFilterField,
+      filterValue: FilterValue,
+      target: FilterEditTarget,
+    ) => {
+      setActiveField(field);
+      setOperator(filterValue.operator);
+      setValue(String(filterValue.value ?? ""));
+      setEditingExisting(true);
+      setColumnTarget(target.kind === "column" ? target.columnId : null);
+      advancedIdRef.current = target.kind === "advanced" ? target.filterId : null;
+      setOpen(true);
+    };
+    if (editTarget.kind === "advanced") {
+      const filter = ctx.state.filters.find((f) => f.id === editTarget.filterId);
+      const field = filter && fields.find((f) => f.id === filter.columnId);
+      if (filter && field) openWith(field, filter.value, editTarget);
+    } else if (editTarget.kind === "column") {
+      const columnFilter = ctx.state.columnFilters.find((cf) => cf.id === editTarget.columnId);
+      const field = fields.find((f) => f.id === editTarget.columnId);
+      if (field && columnFilter && isFilterValueShape(columnFilter.value)) {
+        openWith(field, columnFilter.value, editTarget);
+      }
+    } else {
+      resetEditor();
+      setOpen(true);
+    }
+  }, [editTarget, ctx, fields, resetEditor]);
+
+  // Keyboard navigation over the field list (web).
+  const handleListKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightedIndex((i) => Math.min(i + 1, flatList.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const field = flatList[highlightedIndex];
+        if (field) handleSelectField(field);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleOpenChange(false);
+      }
+    },
+    [flatList, highlightedIndex, handleSelectField, handleOpenChange],
+  );
+
+  if (!ctx || fields.length === 0) return null;
+
+  const activeChipCount =
+    (ctx.state.filters?.length ?? 0) +
+    (ctx.state.columnFilters?.filter((cf) => isFilterValueShape(cf.value)).length ?? 0);
+
+  // Who owns the trigger press depends on FloatingPanel's mode:
+  // - desktop web (floating): FloatingPanel opens on DOM mousedown (useClick)
+  //   — the Button must NOT also toggle `open` or every click double-toggles.
+  // - sheet (native / ≤860px web): the Button is the deepest pressable and
+  //   swallows the press before the sheet's trigger wrapper View sees it —
+  //   the Button itself must toggle `open` (harmless on native, where the
+  //   trigger subtree is pointerEvents="none" and the wrapper handles it).
+  const sheetMode = !isWeb || !viewportGtSm;
+  const trigger = (
+    <Button
+      size="$3"
+      variant="outlined"
+      aria-label={t("Filter")}
+      icon={<FunnelIcon size={14} weight={activeChipCount > 0 ? "fill" : "regular"} />}
+      {...(sheetMode ? { onPress: () => handleOpenChange(!open) } : {})}
+    >
+      {activeChipCount > 0 ? `${t("Filter")} (${activeChipCount})` : t("Filter")}
+    </Button>
+  );
+
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={handleOpenChange}
+      trigger={trigger}
+      fitContent
+      scrollable={false}
+    >
+      <YStack minWidth={280} maxWidth={360} {...knobProps.gap}>
+        {activeField ? (
+          // Stage 2 — operator/value editor (live commit, no Apply)
+          <YStack {...knobProps.gap}>
+            <XStack alignItems="center" gap="$2">
+              <Button
+                size="$2"
+                chromeless
+                aria-label={t("Back to field list")}
+                onPress={() => {
+                  resetEditor();
+                }}
+                icon={<BackCaretIcon size={14} />}
+              />
+              <Text fontSize={knobProps.sizeToken} fontWeight="600" color="$color11" flex={1}>
+                {t("Filter: {{column}}", { column: activeField.label })}
+              </Text>
+            </XStack>
+
+            <FilterOperatorValueEditor
+              fieldType={activeField.type}
+              operator={operator}
+              value={value}
+              onOperatorChange={handleOperatorChange}
+              onValueChange={handleValueChange}
+              options={activeField.options}
+            />
+
+            {editingExisting && (
+              <XStack justifyContent="flex-end">
+                <Button size="$2" variant="outlined" onPress={handleRemoveCurrent}>
+                  {t("Remove filter")}
+                </Button>
+              </XStack>
+            )}
+          </YStack>
+        ) : (
+          // Stage 1 — searchable field list, visible columns first
+          <YStack {...knobProps.gap} onKeyDown={handleListKeyDown as unknown as () => void}>
+            <SearchInput
+              value={search}
+              onChange={(text) => {
+                setSearch(text);
+                setHighlightedIndex(0);
+              }}
+              debounceMs={0}
+              placeholder={t("Search fields...")}
+              size="$3"
+              compact
+              aria-label={t("Search fields")}
+            />
+            <YStack
+              role="list"
+              aria-label={t("Filterable fields")}
+              maxHeight={320}
+              overflow="scroll"
+            >
+              {columnFields.length > 0 && <GroupHeader>{t("Columns")}</GroupHeader>}
+              {columnFields.map((field) => (
+                <FieldRow
+                  key={field.id}
+                  field={field}
+                  highlighted={flatList[highlightedIndex]?.id === field.id}
+                  onSelect={handleSelectField}
+                />
+              ))}
+              {moreFields.length > 0 && <GroupHeader>{t("More fields")}</GroupHeader>}
+              {moreFields.map((field) => (
+                <FieldRow
+                  key={field.id}
+                  field={field}
+                  highlighted={flatList[highlightedIndex]?.id === field.id}
+                  onSelect={handleSelectField}
+                />
+              ))}
+              {flatList.length === 0 && (
+                <Text fontSize="$2" color="$color10" padding="$2.5">
+                  {t("No fields match")}
+                </Text>
+              )}
+            </YStack>
+          </YStack>
+        )}
+      </YStack>
+    </FloatingPanel>
+  );
+}

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

@@ -0,0 +1,190 @@
+/**
+ * Hidden-field filtering surface: chips bar + toolbar filter button,
+ * integration-tested through the compound DataTable (context wiring,
+ * client-side pre-filter, live state).
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+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 departmentFilter(value: string): TableFilter {
+  return {
+    id: "flt-department",
+    columnId: "department",
+    value: { operator: "is", value },
+    label: "Department",
+  };
+}
+
+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("DataTableFilterChips", () => {
+  it("renders a chip for a hidden-field filter and filters the rows", async () => {
+    renderTable([emailFilter("corp")]);
+
+    // Chip label reads "Field: operator value"
+    expect(await screen.findByText("Email: contains corp")).toBeTruthy();
+
+    // Rows filtered on a field with NO visible column
+    await waitFor(() => {
+      expect(screen.getByText("Ada")).toBeTruthy();
+      expect(screen.getByText("Grace")).toBeTruthy();
+      expect(screen.queryByText("Alan")).toBeNull();
+    });
+  });
+
+  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]);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Email: contains corp")).toBeNull();
+      expect(screen.getByText("Alan")).toBeTruthy();
+    });
+  });
+
+  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();
+    // Select chips show the option label
+    expect(screen.getByText("Department: is Engineering")).toBeTruthy();
+
+    const clearAll = screen.getByRole("button", { name: "Clear all" });
+    await user.click(clearAll);
+
+    await waitFor(() => {
+      expect(screen.queryByText("Email: contains corp")).toBeNull();
+      expect(screen.queryByText("Department: is Engineering")).toBeNull();
+      expect(screen.getByText("Alan")).toBeTruthy();
+    });
+  });
+
+  it("does not render a chips bar when no filters are active", () => {
+    renderTable([]);
+    expect(screen.queryByLabelText("Active filters")).toBeNull();
+  });
+});
+
+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("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();
+    });
+  });
+});