@multiplatform.one/table 6.7.0 → 7.1.0

package/src/components/TableInput/index.tsx

@@ -20,7 +20,7 @@
  * their own layer (frappe-ui).
  */
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Button,
   Field,
@@ -32,17 +32,24 @@ import {
 import { flexRender, getCoreRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
 import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack, YStack } from "tamagui";
+import { Table, getTableCellPadding } from "@multiplatform.one/table-primitives";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, XStack, YStack, isWeb } from "tamagui";
 import type {
   DataTableColumn,
   DataTableData,
   DataTableFieldProps,
   DataTableField,
 } from "../../types";
-import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableCell } from "../DataTableCell";
 import { withInterp } from "../../utils/withInterp";
-import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT } from "./shared";
+import {
+  childRowAttrs,
+  childTableKeyAction,
+  generateRowId,
+  isEmptyRows,
+  SKELETON_ROW_COUNT,
+} from "./shared";
 
 export interface TableInputProps<TData extends DataTableData = DataTableData> {
   /** Data array for the table (ignored in favor of form state in the form branch) */
@@ -83,6 +90,11 @@ export interface TableInputProps<TData extends DataTableData = DataTableData> {
   emptyMessage?: string;
   /** Accessible label */
   "aria-label"?: string;
+  /**
+   * Nested density (LC-73). Child tables sit on a form surface, so compact
+   * is the default — Frappe's grid is a dense in-list editor, not a page table.
+   */
+  compact?: boolean;
 }
 
 export function TableInput<TData extends DataTableData = DataTableData>({
@@ -105,6 +117,7 @@ export function TableInput<TData extends DataTableData = DataTableData>({
   defaultRow,
   emptyMessage,
   "aria-label": ariaLabel,
+  compact = true,
 }: TableInputProps<TData>) {
   const { t } = useTranslation();
   const { resolvedForm } = useFormField({ form: formProp });
@@ -139,6 +152,7 @@ export function TableInput<TData extends DataTableData = DataTableData>({
     defaultRow,
     emptyMessage: emptyMessage ?? t("No rows"),
     ariaLabel: resolvedAriaLabel,
+    compact,
     t,
   };
 
@@ -191,6 +205,7 @@ interface TableInputInnerProps<TData extends DataTableData> {
   defaultRow?: Partial<TData>;
   emptyMessage: string;
   ariaLabel: string;
+  compact: boolean;
   t: (key: string, options?: Record<string, unknown>) => string;
 }
 
@@ -209,8 +224,24 @@ function TableInputInner<TData extends DataTableData>({
   defaultRow,
   emptyMessage,
   ariaLabel,
+  compact,
   t,
 }: TableInputInnerProps<TData>) {
+  const { knobProps } = useResolvedKnobs({ compact });
+  const cellPad = getTableCellPadding(knobProps.space);
+  const chromePx = knobProps.nestedControl.px;
+  const [activeRowId, setActiveRowId] = useState<string | null>(null);
+  const pendingFocusRef = useRef<string | null>(null);
+  const gridRef = useRef<HTMLElement | null>(null);
+
+  const lastDataColumnId = useMemo(() => {
+    const last = columns[columns.length - 1];
+    if (!last) return null;
+    return typeof last.accessorKey === "string"
+      ? last.accessorKey
+      : last.id || String(last.accessorKey);
+  }, [columns]);
+
   const handleCellChange = useCallback(
     (rowIndex: number, columnId: string, value: unknown) => {
       onCellChange?.(rowIndex, columnId, value);
@@ -226,8 +257,10 @@ function TableInputInner<TData extends DataTableData>({
 
   const handleAddRow = useCallback(() => {
     if (maxRows && rows.length >= maxRows) return;
+    const id = generateRowId();
+    pendingFocusRef.current = id;
     const newRow = {
-      id: generateRowId(),
+      id,
       ...defaultRow,
     } as unknown as TData;
     commit([...rows, newRow]);
@@ -241,24 +274,84 @@ function TableInputInner<TData extends DataTableData>({
     [rows, commit, minRows],
   );
 
+  useEffect(() => {
+    const id = pendingFocusRef.current;
+    if (!id || typeof document === "undefined") return;
+    pendingFocusRef.current = null;
+    const focus = () => {
+      const row = gridRef.current?.querySelector(`[${childRowAttrs.rowId}="${id}"]`);
+      const el = row?.querySelector<HTMLElement>(
+        `[${childRowAttrs.columnId}] input:not([type="hidden"]):not([type="checkbox"]):not([disabled]), [${childRowAttrs.columnId}] textarea, [${childRowAttrs.columnId}] button, [${childRowAttrs.columnId}] [tabindex]:not([tabindex="-1"])`,
+      );
+      el?.focus();
+    };
+    requestAnimationFrame(focus);
+  }, [rows]);
+
+  const focusCell = useCallback((rowIndex: number, columnId: string) => {
+    const el = gridRef.current?.querySelector<HTMLElement>(
+      `[${childRowAttrs.rowIndex}="${rowIndex}"] [${childRowAttrs.columnId}="${columnId}"] input:not([type="hidden"]):not([disabled]), [${childRowAttrs.rowIndex}="${rowIndex}"] [${childRowAttrs.columnId}="${columnId}"] textarea, [${childRowAttrs.rowIndex}="${rowIndex}"] [${childRowAttrs.columnId}="${columnId}"] button, [${childRowAttrs.rowIndex}="${rowIndex}"] [${childRowAttrs.columnId}="${columnId}"] [tabindex]:not([tabindex="-1"])`,
+    );
+    el?.focus();
+  }, []);
+
+  const canAddRow = !maxRows || rows.length < maxRows;
+
+  const handleGridKeyDown = useCallback(
+    (e: {
+      key: string;
+      shiftKey: boolean;
+      altKey: boolean;
+      metaKey: boolean;
+      ctrlKey: boolean;
+      target: EventTarget | null;
+      preventDefault: () => void;
+    }) => {
+      if (readOnly || skeleton) return;
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      const row = target.closest(`[${childRowAttrs.row}]`) as HTMLElement | null;
+      if (!row) return;
+      const rowIndex = Number(row.getAttribute(childRowAttrs.rowIndex));
+      if (Number.isNaN(rowIndex)) return;
+      const action = childTableKeyAction(e, {
+        rowIndex,
+        rowCount: rows.length,
+        columnId:
+          target.closest(`[${childRowAttrs.columnId}]`)?.getAttribute(childRowAttrs.columnId) ??
+          null,
+        inLastDataCell: !!target.closest(`[${childRowAttrs.lastInput}="true"]`),
+        field:
+          target.closest(`[${childRowAttrs.field}]`)?.getAttribute(childRowAttrs.field) ?? null,
+        tagName: target.tagName,
+        listboxOpen:
+          typeof document !== "undefined" && !!document.querySelector('[role="listbox"]'),
+        canAddRow: Boolean(showAddRow && canAddRow),
+      });
+      if (!action) return;
+      e.preventDefault();
+      if (action.type === "addRow") handleAddRow();
+      else focusCell(action.rowIndex, action.columnId);
+    },
+    [readOnly, skeleton, rows.length, showAddRow, canAddRow, handleAddRow, focusCell],
+  );
+
   const tableColumns = useMemo(() => {
     const cols: ColumnDef<TData, unknown>[] = [];
 
-    // Row number column
     if (showRowNumbers) {
       cols.push({
         id: "_rowNumber",
         header: "#",
-        size: 50,
+        size: Math.max(36, chromePx),
         cell: ({ row }) => (
-          <Text color="$gray11" fontSize="$2">
+          <Text color="$color10" fontSize={knobProps.label.fontSize}>
             {row.index + 1}
           </Text>
         ),
       });
     }
 
-    // Data columns
     columns.forEach((col) => {
       const columnId =
         typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
@@ -278,6 +371,7 @@ function TableInputInner<TData extends DataTableData>({
               field={field}
               fieldProps={fieldProps}
               readOnly={readOnly}
+              compact={compact}
               columnId={columnId}
               columnLabel={typeof col.header === "string" ? col.header : undefined}
               rowIndex={row.index}
@@ -288,20 +382,20 @@ function TableInputInner<TData extends DataTableData>({
       } as ColumnDef<TData, unknown>);
     });
 
-    // Delete column
     if (showDeleteRow && !readOnly) {
       cols.push({
         id: "_actions",
         header: "",
-        size: 50,
+        size: chromePx + 16,
         cell: ({ row }) => {
           const canDelete = !minRows || rows.length > minRows;
           return (
             <Button
-              size="$2"
-              outlined
+              chromeless
+              compact={compact}
               onPress={() => handleDeleteRow(row.index)}
               disabled={!canDelete}
+              hitSlop={knobProps.nestedControl.hitSlop}
               aria-label={withInterp(t("Delete row {{row}}", { row: row.index + 1 }), {
                 row: row.index + 1,
               })}
@@ -324,6 +418,10 @@ function TableInputInner<TData extends DataTableData>({
     rows.length,
     minRows,
     t,
+    compact,
+    chromePx,
+    knobProps.label.fontSize,
+    knobProps.nestedControl.hitSlop,
   ]);
 
   const table = useReactTable({
@@ -335,18 +433,45 @@ function TableInputInner<TData extends DataTableData>({
     getRowId: (row, index) => String((row as DataTableData).id ?? index),
   });
 
-  const canAddRow = !maxRows || rows.length < maxRows;
-  // The primitives table renders CSS-table boxes (divs), so colSpan cannot
-  // span the empty-state message across columns. With no body rows to align,
-  // the empty (and skeleton-free) state flips the table to flex layout where
-  // a single auto-width cell genuinely fills the row.
+  // Empty state flips to flex so a single auto-width cell fills the row
+  // (colSpan is unreliable when displayMode is overridden).
   const isEmpty = !skeleton && rows.length === 0;
+  const showAdd = showAddRow && !readOnly;
+
+  const addRowControl =
+    skeleton && showAdd ? (
+      <XStack {...hairline.top} {...cellPad}>
+        <Skeleton variant="rounded" width={100} height={chromePx} />
+      </XStack>
+    ) : showAdd && !skeleton ? (
+      <XStack {...hairline.top} {...cellPad}>
+        <Button
+          chromeless
+          compact={compact}
+          onPress={handleAddRow}
+          disabled={!canAddRow}
+          icon={<PlusIcon size={16} />}
+        >
+          {t("Add Row")}
+        </Button>
+      </XStack>
+    ) : null;
 
   return (
-    <YStack gap="$2">
+    <YStack
+      ref={gridRef as never}
+      {...knobProps.surface}
+      {...knobProps.borderRadiusOuter}
+      elevation={knobProps.elevation}
+      overflow="hidden"
+      {...(isWeb ? { onKeyDown: handleGridKeyDown as never } : null)}
+    >
       <Table
         aria-label={ariaLabel}
         aria-busy={skeleton || undefined}
+        borderWidth={0}
+        borderRadius={0}
+        elevation={undefined}
         {...(isEmpty ? { displayMode: "flex" as const } : null)}
       >
         <Table.Head>
@@ -357,8 +482,6 @@ function TableInputInner<TData extends DataTableData>({
                   key={header.id}
                   style={{
                     width: header.getSize(),
-                    // Flex-mode headers don't get fixed-layout stretch; let
-                    // data columns grow so the header strip fills the row.
                     ...(isEmpty &&
                     header.column.id !== "_rowNumber" &&
                     header.column.id !== "_actions"
@@ -394,41 +517,59 @@ function TableInputInner<TData extends DataTableData>({
           ) : isEmpty ? (
             <Table.Row>
               <Table.Cell cellWidth="auto" justifyContent="center">
-                <Text color="$gray11">{emptyMessage}</Text>
+                <Text color="$color10">{emptyMessage}</Text>
               </Table.Cell>
             </Table.Row>
           ) : (
-            table.getRowModel().rows.map((row) => (
-              <Table.Row key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <Table.Cell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            ))
+            table.getRowModel().rows.map((row) => {
+              const isActive = activeRowId === row.id;
+              return (
+                <Table.Row
+                  key={row.id}
+                  {...{ [childRowAttrs.row]: "true" }}
+                  {...{ [childRowAttrs.rowId]: row.id }}
+                  {...{ [childRowAttrs.rowIndex]: String(row.index) }}
+                  {...{ [childRowAttrs.active]: isActive ? "true" : undefined }}
+                  backgroundColor={isActive ? "$color3" : undefined}
+                  hoverStyle={{ backgroundColor: "$backgroundHover" }}
+                  transition={knobProps.transition}
+                  // onFocusCapture is a web-only capture-phase handler outside
+                  // ThemedRowProps; the bag forwards it to the DOM <tr> (house
+                  // Record cast). Tracks the active row as focus enters it.
+                  {...({ onFocusCapture: () => setActiveRowId(row.id) } as Record<string, unknown>)}
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    const isData = cell.column.id !== "_rowNumber" && cell.column.id !== "_actions";
+                    const field = columns.find((col) => {
+                      const id =
+                        typeof col.accessorKey === "string"
+                          ? col.accessorKey
+                          : col.id || String(col.accessorKey);
+                      return id === cell.column.id;
+                    })?.field;
+                    return (
+                      <Table.Cell
+                        key={cell.id}
+                        {...(isData
+                          ? {
+                              [childRowAttrs.columnId]: cell.column.id,
+                              [childRowAttrs.field]: (field as string) || "input",
+                              [childRowAttrs.lastInput]:
+                                cell.column.id === lastDataColumnId ? "true" : undefined,
+                            }
+                          : null)}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </Table.Cell>
+                    );
+                  })}
+                </Table.Row>
+              );
+            })
           )}
         </Table.Body>
       </Table>
-
-      {showAddRow && !readOnly && !skeleton && (
-        <XStack>
-          <Button
-            size="$2"
-            outlined
-            onPress={handleAddRow}
-            disabled={!canAddRow}
-            icon={<PlusIcon size={16} />}
-          >
-            {t("Add Row")}
-          </Button>
-        </XStack>
-      )}
-      {skeleton && showAddRow && !readOnly && (
-        <XStack>
-          <Skeleton variant="rounded" width={100} height={28} />
-        </XStack>
-      )}
+      {addRowControl}
     </YStack>
   );
 }

package/src/components/TableInput/shared.ts

@@ -18,3 +18,60 @@ export const SKELETON_ROW_COUNT = 3;
 /** Required-validator emptiness for row arrays (default only catches null/""). */
 export const isEmptyRows = (value: unknown): boolean =>
   value === null || value === undefined || (Array.isArray(value) && value.length === 0);
+
+/** DOM hooks for Frappe-grid keyboard (Tab-on-last-adds-row, arrow between rows). */
+export const childRowAttrs = {
+  row: "data-child-row",
+  rowId: "data-child-row-id",
+  rowIndex: "data-child-row-index",
+  columnId: "data-column-id",
+  lastInput: "data-last-input",
+  field: "data-field",
+  active: "data-active",
+} as const;
+
+const STEPPER_FIELD = "stepper";
+
+/**
+ * Frappe grid_row.set_arrow_keys: Tab on the last data cell of the last row
+ * inserts a row; Up/Down move to the same column in the adjacent row.
+ * Returns the action the grid should take, or null when the event is not ours
+ * (textarea, stepper, open listbox, etc.).
+ */
+export function childTableKeyAction(
+  e: {
+    key: string;
+    shiftKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+  },
+  ctx: {
+    rowIndex: number;
+    rowCount: number;
+    columnId: string | null;
+    inLastDataCell: boolean;
+    field: string | null;
+    tagName: string;
+    listboxOpen: boolean;
+    canAddRow: boolean;
+  },
+): { type: "addRow" } | { type: "move"; rowIndex: number; columnId: string } | null {
+  if (e.altKey || e.metaKey || e.ctrlKey) return null;
+  if (ctx.tagName === "TEXTAREA") return null;
+  if (ctx.field === STEPPER_FIELD) return null;
+  if (ctx.listboxOpen) return null;
+
+  if (e.key === "Tab" && !e.shiftKey) {
+    if (ctx.inLastDataCell && ctx.rowIndex === ctx.rowCount - 1 && ctx.canAddRow) {
+      return { type: "addRow" };
+    }
+    return null;
+  }
+
+  if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return null;
+  if (!ctx.columnId) return null;
+  const next = e.key === "ArrowDown" ? ctx.rowIndex + 1 : ctx.rowIndex - 1;
+  if (next < 0 || next >= ctx.rowCount) return null;
+  return { type: "move", rowIndex: next, columnId: ctx.columnId };
+}

package/src/components/TableInput/tableInput.spec.tsx

@@ -37,6 +37,7 @@ import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumn, DataTableData } from "../../types";
 import { TableInput } from "./index";
 import { ChildTable } from "../ChildTable";
+import { childTableKeyAction } from "./shared";
 
 interface Row extends DataTableData {
   id: string;
@@ -456,3 +457,106 @@ describe("ChildTable — field wrapper integration", () => {
     expect(screen.getByRole("group", { name: /Line items/ })).toBeTruthy();
   });
 });
+
+describe("TableInput — Frappe grid + LC-71", () => {
+  const keys = {
+    key: "",
+    shiftKey: false,
+    altKey: false,
+    metaKey: false,
+    ctrlKey: false,
+  };
+
+  it("Tab on the last data cell of the last row adds a row", () => {
+    expect(
+      childTableKeyAction(
+        { ...keys, key: "Tab" },
+        {
+          rowIndex: 2,
+          rowCount: 3,
+          columnId: "urgent",
+          inLastDataCell: true,
+          field: "checkbox",
+          tagName: "INPUT",
+          listboxOpen: false,
+          canAddRow: true,
+        },
+      ),
+    ).toEqual({ type: "addRow" });
+  });
+
+  it("Tab on a middle cell does not add a row", () => {
+    expect(
+      childTableKeyAction(
+        { ...keys, key: "Tab" },
+        {
+          rowIndex: 2,
+          rowCount: 3,
+          columnId: "item",
+          inLastDataCell: false,
+          field: "input",
+          tagName: "INPUT",
+          listboxOpen: false,
+          canAddRow: true,
+        },
+      ),
+    ).toBeNull();
+  });
+
+  it("ArrowDown/Up move to the same column; stepper and textarea are ignored", () => {
+    expect(
+      childTableKeyAction(
+        { ...keys, key: "ArrowDown" },
+        {
+          rowIndex: 0,
+          rowCount: 3,
+          columnId: "item",
+          inLastDataCell: false,
+          field: "input",
+          tagName: "INPUT",
+          listboxOpen: false,
+          canAddRow: true,
+        },
+      ),
+    ).toEqual({ type: "move", rowIndex: 1, columnId: "item" });
+    expect(
+      childTableKeyAction(
+        { ...keys, key: "ArrowDown" },
+        {
+          rowIndex: 0,
+          rowCount: 3,
+          columnId: "qty",
+          inLastDataCell: false,
+          field: "stepper",
+          tagName: "INPUT",
+          listboxOpen: false,
+          canAddRow: true,
+        },
+      ),
+    ).toBeNull();
+  });
+
+  it("Add Row lives inside the grid frame (Frappe grid-footer)", () => {
+    const { container } = renderStandalone();
+    const add = screen.getByRole("button", { name: "Add Row" });
+    const frame = container.querySelector('[aria-label="Table input"]')?.parentElement;
+    expect(frame?.contains(add)).toBe(true);
+  });
+
+  it("focusing a cell marks that row active (LC-71 selected = fill)", async () => {
+    renderStandalone();
+    const input = screen.getByDisplayValue("Bracket");
+    expect(input.closest("[data-active='true']")).toBeNull();
+    await userEvent.click(input);
+    expect(input.closest("[data-active='true']")).toBeTruthy();
+  });
+
+  it("Tab on the last cell of the last row commits a new row through onChange", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<Controlled onChange={onChange} />);
+    const checkboxes = screen.getAllByRole("checkbox");
+    fireEvent.keyDown(checkboxes[checkboxes.length - 1], { key: "Tab" });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.calls[0][0]).toHaveLength(4);
+  });
+});

package/src/hooks/useDataTable.spec.ts

@@ -1,4 +1,6 @@
+import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, DataTableState, TableFilter } from "../types";
 import { useDataTable } from "./useDataTable";
 
 describe("useDataTable", () => {
@@ -9,8 +11,103 @@ describe("useDataTable", () => {
   it("should be defined", () => {
     expect(useDataTable).toBeDefined();
   });
+});
+
+// ---------------------------------------------------------------------------
+// controlledState adoption — the keep-rows-and-reconcile channel
+// (filter/sort changes from an OUTER surface adopt in place, no remount)
+// ---------------------------------------------------------------------------
+
+const data = [
+  { id: 1, name: "Alice", status: "Active" },
+  { id: 2, name: "Bob", status: "Lead" },
+  { id: 3, name: "Charlie", status: "Active" },
+];
+
+const columns: DataTableColumn<(typeof data)[number]>[] = [
+  { id: "name", accessorKey: "name", header: "Name" },
+  { id: "status", accessorKey: "status", header: "Status" },
+];
+
+const statusFilter = (value: string): TableFilter => ({
+  id: `status-${value}`,
+  columnId: "status",
+  value: { operator: "is", value },
+});
+
+function renderControlled(initialControlled: Partial<Pick<DataTableState, "filters" | "sorting">>) {
+  return renderHook(
+    ({ controlled }: { controlled: Partial<Pick<DataTableState, "filters" | "sorting">> }) =>
+      useDataTable({
+        data,
+        columns,
+        controlledState: controlled,
+        initialState: {
+          filters: initialControlled.filters ?? [],
+          sorting: initialControlled.sorting ?? [],
+          pagination: { pageIndex: 2, pageSize: 1 },
+        },
+      }),
+    { initialProps: { controlled: initialControlled } },
+  );
+}
+
+describe("useDataTable controlledState adoption", () => {
+  it("adopts an inbound filter CONTENT change in place and resets to page 0", () => {
+    const { result, rerender } = renderControlled({ filters: [] });
+    expect(result.current.state.filters).toEqual([]);
+    expect(result.current.state.pagination.pageIndex).toBe(2);
+
+    act(() => {
+      rerender({ controlled: { filters: [statusFilter("Active")] } });
+    });
+
+    expect(result.current.state.filters).toHaveLength(1);
+    expect(result.current.state.filters[0].columnId).toBe("status");
+    expect(result.current.state.pagination.pageIndex).toBe(0);
+  });
+
+  it("a same-content echo (new array identity) is a no-op — internal state is never fought", () => {
+    const initial = { filters: [statusFilter("Active")] };
+    const { result, rerender } = renderControlled(initial);
 
-  // Note: More comprehensive tests would require React Testing Library
-  // and rendering the hook in a test component. This is a placeholder
-  // for when the hook implementation is available.
+    // User pages forward through the table's own chrome.
+    act(() => {
+      result.current.actions.setPagination({ pageIndex: 1, pageSize: 1 });
+    });
+    expect(result.current.state.pagination.pageIndex).toBe(1);
+
+    // Outer surface re-renders with the SAME tuples in a fresh array.
+    act(() => {
+      rerender({ controlled: { filters: [statusFilter("Active")] } });
+    });
+
+    // No adoption: page position (user work) survives.
+    expect(result.current.state.pagination.pageIndex).toBe(1);
+    expect(result.current.state.filters).toHaveLength(1);
+  });
+
+  it("adopts an inbound sorting change in place and resets to page 0", () => {
+    const { result, rerender } = renderControlled({ sorting: [{ id: "name", desc: false }] });
+    expect(result.current.state.sorting).toEqual([{ id: "name", desc: false }]);
+    expect(result.current.state.pagination.pageIndex).toBe(2);
+
+    act(() => {
+      rerender({ controlled: { sorting: [{ id: "status", desc: true }] } });
+    });
+
+    expect(result.current.state.sorting).toEqual([{ id: "status", desc: true }]);
+    expect(result.current.state.pagination.pageIndex).toBe(0);
+  });
+
+  it("clearing filters through the channel adopts the empty set", () => {
+    const { result, rerender } = renderControlled({ filters: [statusFilter("Active")] });
+    expect(result.current.state.filters).toHaveLength(1);
+
+    act(() => {
+      rerender({ controlled: { filters: [] } });
+    });
+
+    expect(result.current.state.filters).toEqual([]);
+  });
 });