@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTableFilterChips/index.tsx

@@ -0,0 +1,127 @@
+/**
+ * DataTableFilterChips — the visibility surface for EVERY active filter
+ * (Axiom 6 HONEST STATE): toolbar/hidden-field filters AND column-funnel
+ * filters render as removable chips under the toolbar, so the user always
+ * sees what is filtering the data — especially filters on fields with no
+ * visible column.
+ *
+ * Chip press reopens the shared editor pre-filled (filterUi channel), the X
+ * removes (44px target via Chip), "Clear all" appears at 2+ chips.
+ */
+
+import { Button } from "@multiplatform.one/forms";
+import { Chip } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useMemo } from "react";
+import { View, XStack } from "tamagui";
+import { t } from "../../shared/t";
+import type { FilterValue, ResolvedFilterField } from "../../types";
+import { getFilterChipLabel, isFilterValueShape } from "../../utils/filterFields";
+import type { FilterEditTarget } from "../DataTable/DataTableStateContext";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+interface FilterChipModel {
+  key: string;
+  label: string;
+  target: FilterEditTarget;
+  onRemove: () => void;
+}
+
+export function DataTableFilterChips() {
+  const ctx = useDataTableState();
+  const { knobProps } = useResolvedKnobs();
+
+  const fields: ResolvedFilterField[] = ctx?.computed?.filterFields ?? [];
+  const fieldFor = useCallback((id: string) => fields.find((f) => f.id === id), [fields]);
+
+  const chips = useMemo<FilterChipModel[]>(() => {
+    if (!ctx) return [];
+    const items: FilterChipModel[] = [];
+    for (const filter of ctx.state.filters ?? []) {
+      const field = fieldFor(filter.columnId);
+      const label = getFilterChipLabel(
+        field?.label ?? filter.label ?? filter.columnId,
+        filter.value,
+        field?.options,
+      );
+      items.push({
+        key: `advanced-${filter.id}`,
+        label,
+        target: { kind: "advanced", filterId: filter.id },
+        onRemove: () => ctx.actions.removeFilter(filter.id),
+      });
+    }
+    for (const columnFilter of ctx.state.columnFilters ?? []) {
+      if (!isFilterValueShape(columnFilter.value)) continue;
+      const field = fieldFor(columnFilter.id);
+      const label = getFilterChipLabel(
+        field?.label ?? columnFilter.id,
+        columnFilter.value as FilterValue,
+        field?.options,
+      );
+      items.push({
+        key: `column-${columnFilter.id}`,
+        label,
+        target: { kind: "column", columnId: columnFilter.id },
+        onRemove: () => ctx.table.getColumn(columnFilter.id)?.setFilterValue(undefined),
+      });
+    }
+    return items;
+  }, [ctx, ctx?.state.filters, ctx?.state.columnFilters, fieldFor]);
+
+  const handleClearAll = useCallback(() => {
+    if (!ctx) return;
+    ctx.actions.setFilters([]);
+    // Only clear funnel (FilterValue-shaped) column filters — leave faceted /
+    // plain-value column filters some other surface may own.
+    ctx.table.setColumnFilters((prev: Array<{ id: string; value: unknown }>) =>
+      prev.filter((cf) => !isFilterValueShape(cf.value)),
+    );
+  }, [ctx]);
+
+  if (!ctx || chips.length === 0) return null;
+
+  return (
+    <XStack
+      flexWrap="wrap"
+      alignItems="center"
+      gap="$2"
+      paddingVertical="$1.5"
+      aria-label={t("Active filters")}
+    >
+      {chips.map((chip) => (
+        <View
+          key={chip.key}
+          role="button"
+          tabIndex={0}
+          aria-label={t("Edit filter {{label}}", { label: chip.label })}
+          cursor="pointer"
+          {...knobProps.borderRadius}
+          focusVisibleStyle={{
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+          }}
+          onPress={() => ctx.filterUi?.requestEdit(chip.target)}
+          onKeyDown={
+            ((e: KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                ctx.filterUi?.requestEdit(chip.target);
+              }
+            }) as unknown as () => void
+          }
+        >
+          <Chip color="blue" onDismiss={chip.onRemove}>
+            {chip.label}
+          </Chip>
+        </View>
+      ))}
+      {chips.length >= 2 && (
+        <Button size="$2" chromeless onPress={handleClearAll}>
+          {t("Clear all")}
+        </Button>
+      )}
+    </XStack>
+  );
+}

package/src/components/DataTableFilters/index.tsx

@@ -19,6 +19,7 @@ import type {
   TableFilter,
 } from "../../types";
 import { getFilterDescription } from "../../utils/filterUtils";
+import { t } from "../../shared/t";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export interface DataTableFiltersProps {
@@ -57,9 +58,11 @@ export function DataTableFilters(props: DataTableFiltersProps) {
 
   const canAddMoreFilters = filters.length < maxFilters;
 
+  // LC-21 (owner adjudication 2026-08-12): the builder stays open after Add
+  // Filter — it resets its form so the user composes the next filter; Cancel,
+  // outside click, or Escape close.
   const handleAddFilter = (filter: Omit<TableFilter, "id">) => {
     onAddFilter(filter);
-    setShowFilterBuilder(false);
   };
 
   const handleUpdateFilter = (filterId: string, updates: Partial<TableFilter>) => {
@@ -93,7 +96,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
               icon={<PlusIcon size={16} />}
               disabled={!canAddMoreFilters}
             >
-              Add Filter
+              {t("Add Filter")}
             </Button>
           </Popover.Trigger>
           <Popover.Content
@@ -127,7 +130,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
             onPress={onClearFilters}
             icon={<XIcon size={16} />}
           >
-            Clear
+            {t("Clear")}
           </Button>
         )}
       </XStack>
@@ -150,7 +153,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
         <XStack alignItems="center" gap="$2">
           <FunnelIcon size={16} aria-hidden />
           <Text fontSize="$4" fontWeight="600" id="filters-heading">
-            Filters
+            {t("Filters")}
           </Text>
           {showFilterCount && filters.length > 0 && (
             <View
@@ -168,7 +171,11 @@ export function DataTableFilters(props: DataTableFiltersProps) {
         </XStack>
 
         <XStack
-          {...({ tag: "fieldset" } as object)}
+          {...({ render: "fieldset" } as object)}
+          borderWidth={0}
+          margin={0}
+          padding={0}
+          minWidth={0}
           alignItems="center"
           gap="$2"
           aria-label="Filter management actions"
@@ -184,7 +191,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
                 aria-expanded={showFilterBuilder}
                 aria-haspopup="dialog"
               >
-                Add Filter
+                {t("Add Filter")}
               </Button>
             </Popover.Trigger>
             <Popover.Content
@@ -222,7 +229,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
               icon={<XIcon size={16} />}
               aria-label="Clear all filters"
             >
-              Clear All
+              {t("Clear All")}
             </Button>
           )}
         </XStack>
@@ -234,7 +241,7 @@ export function DataTableFilters(props: DataTableFiltersProps) {
       {filters.length > 0 ? (
         <ScrollView maxHeight={200}>
           <YStack
-            {...({ tag: "ul" } as object)}
+            {...({ render: "ul" } as object)}
             gap="$2"
             padding={0}
             margin={0}
@@ -255,13 +262,13 @@ export function DataTableFilters(props: DataTableFiltersProps) {
         </ScrollView>
       ) : (
         <View
-          {...({ tag: "output" } as object)}
+          {...({ render: "output" } as object)}
           padding="$4"
           alignItems="center"
           aria-live="polite"
         >
           <Text fontSize="$3" color="$color10">
-            No filters applied
+            {t("No filters applied")}
           </Text>
         </View>
       )}
@@ -394,7 +401,7 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
       return (
         <XStack gap="$2">
           <Input
-            placeholder="Min value"
+            placeholder={t("Min value")}
             value={filterValues[0] || ""}
             onChangeText={(text) => {
               const newValues = [...filterValues];
@@ -403,7 +410,7 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
             }}
           />
           <Input
-            placeholder="Max value"
+            placeholder={t("Max value")}
             value={filterValues[1] || ""}
             onChangeText={(text) => {
               const newValues = [...filterValues];
@@ -454,7 +461,7 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
 
       return (
         <Input
-          placeholder="Enter values separated by commas"
+          placeholder={t("Enter values separated by commas")}
           value={filterValues.join(", ")}
           onChangeText={(text) => {
             setFilterValues(text.split(",").map((v) => v.trim()));
@@ -467,8 +474,8 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
     if (selectedColumn.type === "date") {
       return (
         <Input
-          label="Value"
-          placeholder="YYYY-MM-DD"
+          label={t("Value")}
+          placeholder={t("YYYY-MM-DD")}
           value={filterValue}
           onChangeText={setFilterValue}
         />
@@ -478,7 +485,7 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
     if (selectedColumn.type === "boolean") {
       return (
         <Select
-          label="Value"
+          label={t("Value")}
           value={filterValue}
           onValueChange={(v) => {
             if (typeof v === "string") {
@@ -486,10 +493,10 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
             }
           }}
           options={[
-            { value: "true", label: "True" },
-            { value: "false", label: "False" },
+            { value: "true", label: t("True") },
+            { value: "false", label: t("False") },
           ]}
-          placeholder="Select value"
+          placeholder={t("Select value")}
         />
       );
     }
@@ -497,7 +504,7 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
     if (selectedColumn.options) {
       return (
         <Select
-          label="Value"
+          label={t("Value")}
           value={filterValue}
           onValueChange={(v) => {
             if (typeof v === "string") {
@@ -508,15 +515,15 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
             value: option.value.toString(),
             label: option.label,
           }))}
-          placeholder="Select value"
+          placeholder={t("Select value")}
         />
       );
     }
 
     return (
       <Input
-        label="Value"
-        placeholder="Enter value"
+        label={t("Value")}
+        placeholder={t("Enter value")}
         value={filterValue}
         onChangeText={setFilterValue}
         {...(selectedColumn.type === "number" && { keyboardType: "numeric" })}
@@ -527,12 +534,12 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
   return (
     <YStack {...knobProps.panelPadding} gap="$4" minWidth={builderMinWidth}>
       <Text fontSize="$4" fontWeight="600">
-        Add Filter
+        {t("Add Filter")}
       </Text>
 
       {/* Column Selection */}
       <Select
-        label="Column"
+        label={t("Column")}
         value={selectedColumnId}
         onValueChange={(v) => {
           if (typeof v === "string") {
@@ -540,13 +547,13 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
           }
         }}
         options={columnOptions}
-        placeholder="Select column"
+        placeholder={t("Select column")}
       />
 
       {/* Operator Selection */}
       {selectedColumnId && (
         <Select
-          label="Condition"
+          label={t("Condition")}
           value={selectedOperator}
           onValueChange={(v) => {
             if (typeof v === "string") {
@@ -563,14 +570,14 @@ function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilde
       {/* Actions */}
       <XStack gap="$2" justifyContent="flex-end">
         <Button size={knobProps.sizeToken} variant="outlined" onPress={onCancel}>
-          Cancel
+          {t("Cancel")}
         </Button>
         <Button
           size={knobProps.sizeToken}
           onPress={handleAddFilter}
           disabled={!selectedColumnId || !selectedOperator}
         >
-          Add Filter
+          {t("Add Filter")}
         </Button>
       </XStack>
     </YStack>
@@ -604,7 +611,7 @@ function ActiveFilter({
 
   return (
     <XStack
-      {...({ tag: "li" } as object)}
+      {...({ render: "li" } as object)}
       alignItems="center"
       justifyContent="space-between"
       padding="$3"
@@ -676,5 +683,6 @@ function getOperatorLabel(operator: FilterOperator): string {
     isNoneOf: "Is none of",
   };
 
-  return labels[operator] || operator;
+  const label = labels[operator];
+  return label ? t(label) : operator;
 }

package/src/components/DataTableGrouping/DataTableGrouping.spec.tsx

@@ -1,7 +1,8 @@
-import { screen } from "@testing-library/react";
+import { fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import "@testing-library/jest-dom";
+import { DataTable } from "../DataTable";
 import { type AggregationConfig, DataTableGrouping, groupData } from "./index";
 
 // Test data type
@@ -149,6 +150,124 @@ describe("DataTableGrouping", () => {
     expect(mockRenderGroupHeader).toHaveBeenCalled();
   });
 
+  it("shows an expand affordance (aria-expanded) on single-level group headers", () => {
+    renderWithProviders(
+      <DataTableGrouping data={salesData} columns={columns} groupBy={["region"]} />,
+    );
+
+    // Single-level groups have items (no child groups) — they are still
+    // expandable and must expose the expanded state.
+    const headers = screen.getAllByRole("button", { expanded: false });
+    expect(headers.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("expands and collapses a group with the keyboard (Enter)", () => {
+    renderWithProviders(
+      <DataTableGrouping data={salesData} columns={columns} groupBy={["region"]} />,
+    );
+
+    // Items hidden while collapsed.
+    expect(screen.queryByText("Alice")).not.toBeInTheDocument();
+
+    const header = screen
+      .getAllByRole("button")
+      .find((el) => el.textContent?.includes("North America"))!;
+    fireEvent.keyDown(header, { key: "Enter" });
+
+    expect(screen.getAllByText("Alice").length).toBeGreaterThan(0);
+    expect(header).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.keyDown(header, { key: "Enter" });
+    expect(screen.queryByText("Alice")).not.toBeInTheDocument();
+  });
+
+  it("keeps a group expanded when data changes (uncontrolled expansion, stable keys)", () => {
+    const { rerender } = renderWithProviders(
+      <DataTableGrouping data={salesData} columns={columns} groupBy={["region"]} />,
+    );
+
+    const header = screen
+      .getAllByRole("button")
+      .find((el) => el.textContent?.includes("North America"))!;
+    fireEvent.click(header);
+    expect(screen.getAllByText("Alice").length).toBeGreaterThan(0);
+
+    // New row lands in the expanded group — expansion must survive the data
+    // change because group keys are value paths, not indexes.
+    const withExtra = [
+      ...salesData,
+      {
+        id: "5",
+        region: "North America",
+        category: "Appliances",
+        salesperson: "Zoe",
+        quantity: 2,
+        unitPrice: 50,
+        totalRevenue: 100,
+      },
+    ];
+    rerender(<DataTableGrouping data={withExtra} columns={columns} groupBy={["region"]} />);
+
+    expect(screen.getAllByText("Zoe").length).toBeGreaterThan(0);
+  });
+
+  it("groups the current view when composed in a DataTable (sorted order, not insertion order)", () => {
+    // Insertion order: Charlie(Sales), Alice(Eng), Bob(Sales). Sorted by name
+    // asc the view is Alice, Bob, Charlie — so groups must come out
+    // Eng-then-Sales with Bob before Charlie inside Sales. The pre-fix code
+    // consumed the pre-sort filtered model and emitted insertion order.
+    const rows = [
+      { id: "1", dept: "Sales", name: "Charlie" },
+      { id: "2", dept: "Eng", name: "Alice" },
+      { id: "3", dept: "Sales", name: "Bob" },
+    ];
+    const tableCols = [
+      { id: "name", accessorKey: "name", header: "Name" },
+      { id: "dept", accessorKey: "dept", header: "Dept" },
+    ];
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={tableCols as any}
+        initialState={{
+          sorting: [{ id: "name", desc: false }],
+          // Hide the table's own cells so the grouping panel is the only
+          // surface rendering these strings (unambiguous DOM order asserts).
+          columnVisibility: { name: false, dept: false },
+        }}
+      >
+        <DataTable.Grouping
+          groupBy={["dept"]}
+          columns={[{ accessorKey: "name", header: "Name" }]}
+          expandedGroups={new Set(["Eng", "Sales"])}
+        />
+      </DataTable>,
+    );
+
+    const names = screen.getAllByText(/^(Alice|Bob|Charlie)$/).map((el) => el.textContent);
+    expect(names).toEqual(["Alice", "Bob", "Charlie"]);
+
+    const groupHeaders = screen.getAllByText(/^(Eng|Sales)$/).map((el) => el.textContent);
+    expect(groupHeaders).toEqual(["Eng", "Sales"]);
+  });
+
+  it("renders falsy group values (0) as their own group, not 'No Value'", () => {
+    const data = [
+      { id: "1", region: "A", quantity: 0 },
+      { id: "2", region: "B", quantity: 5 },
+    ];
+    const cols = [
+      { accessorKey: "region", header: "Region", type: "string" as const },
+      { accessorKey: "quantity", header: "Qty", type: "number" as const },
+    ];
+
+    renderWithProviders(<DataTableGrouping data={data} columns={cols} groupBy={["quantity"]} />);
+
+    expect(screen.getByText("0")).toBeInTheDocument();
+    expect(screen.queryByText("No Value")).not.toBeInTheDocument();
+  });
+
   it("handles custom group footers", () => {
     const mockRenderGroupFooter = vi.fn(() => <div>Custom Footer</div>);
 
@@ -312,6 +431,59 @@ describe("groupData", () => {
     expect(result).toHaveLength(2); // One with undefined key, one with valid key
   });
 
+  it("does not collapse distinct falsy group values (0, false, '') into one group", () => {
+    const data = [
+      { k: 0, v: 1 },
+      { k: false, v: 2 },
+      { k: "", v: 3 },
+      { k: null, v: 4 },
+      { k: "x", v: 5 },
+    ];
+
+    const result = groupData(data, ["k"], []);
+
+    // 0, false, "", null, "x" are five distinct group keys.
+    expect(result).toHaveLength(5);
+    const zeroGroup = result?.find((g) => g.key === "0");
+    expect(zeroGroup?.count).toBe(1);
+    expect(zeroGroup?.items[0]).toEqual({ k: 0, v: 1 });
+  });
+
+  it("min/max never produce NaN for non-numeric values", () => {
+    const data = [
+      { region: "A", when: "2024-01-15T10:00:00.000Z" },
+      { region: "A", when: "not-a-date" },
+    ];
+    const aggregations: AggregationConfig[] = [
+      { column: "when", function: "min" },
+      { column: "when", function: "max" },
+    ];
+
+    const result = groupData(data, ["region"], aggregations);
+    const group = result?.[0];
+
+    expect(Number.isNaN(group?.aggregations.when.min)).toBe(false);
+    expect(Number.isNaN(group?.aggregations.when.max)).toBe(false);
+  });
+
+  it("min/max skip non-numeric values instead of poisoning the result", () => {
+    const data = [
+      { region: "A", score: 5 },
+      { region: "A", score: "oops" },
+      { region: "A", score: 12 },
+    ];
+    const aggregations: AggregationConfig[] = [
+      { column: "score", function: "min" },
+      { column: "score", function: "max" },
+    ];
+
+    const result = groupData(data, ["region"], aggregations);
+    const group = result?.[0];
+
+    expect(group?.aggregations.score.min).toBe(5);
+    expect(group?.aggregations.score.max).toBe(12);
+  });
+
   it("creates proper path for nested groups", () => {
     const result = groupData(salesData, ["region", "category"], []);