@homebound/beam 2.310.0 → 2.312.0

package/dist/components/Table/GridTable.d.ts

@@ -1,4 +1,5 @@
 import { MutableRefObject } from "react";
+import { DiscriminateUnion, GridRowKind } from "../index";
 import { GridTableApi } from "./GridTableApi";
 import { GridStyle, GridStyleDef, RowStyles } from "./TableStyles";
 import { Direction, GridColumn, GridTableXss, InfiniteScroll, Kinded, RenderAs } from "./types";
@@ -41,6 +42,18 @@ export type GridSortConfig = {
     /** Callback for when the column is sorted (if server-side sorting). Parameters set to `undefined` is a signal to return to the initial sort state */
     onSort: (orderBy: string | undefined, direction: Direction | undefined) => void;
 };
+/** Allows listening to per-kind row selection changes. */
+export type OnRowSelect<R extends Kinded> = {
+    [K in R["kind"]]?: DiscriminateUnion<R, "kind", K> extends {
+        data: infer D;
+    } ? (data: D, isSelected: boolean, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+    }) => void : (data: undefined, isSelected: boolean, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+    }) => void;
+};
 export interface GridTableProps<R extends Kinded, X> {
     id?: string;
     /**
@@ -114,6 +127,8 @@ export interface GridTableProps<R extends Kinded, X> {
      ** `endOffsetPx` is the number of pixels from the bottom of the list to eagerly trigger `onEndReached`. The default is is 500px.
      */
     infiniteScroll?: InfiniteScroll;
+    /** Callback for when a row is selected or unselected. */
+    onRowSelect?: OnRowSelect<R>;
 }
 /**
  * Renders data in our table layout.

package/dist/components/Table/GridTable.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
+const mobx_1 = require("mobx");
 const react_1 = __importStar(require("react"));
 const react_virtuoso_1 = require("react-virtuoso");
 const PresentationContext_1 = require("../PresentationContext");
@@ -36,7 +37,6 @@ const GridTableApi_1 = require("./GridTableApi");
 const useSetupColumnSizes_1 = require("./hooks/useSetupColumnSizes");
 const TableStyles_1 = require("./TableStyles");
 const columns_1 = require("./utils/columns");
-const GridRowLookup_1 = require("./utils/GridRowLookup");
 const TableState_1 = require("./utils/TableState");
 const utils_1 = require("./utils/utils");
 const Css_1 = require("../../Css");
@@ -85,7 +85,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c;
-    const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, persistCollapse, resizeTarget, activeRowId, activeCellId, visibleColumnsStorageKey, infiniteScroll, } = props;
+    const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, persistCollapse, resizeTarget, activeRowId, activeCellId, visibleColumnsStorageKey, infiniteScroll, onRowSelect, } = props;
     const columnsWithIds = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
@@ -93,8 +93,9 @@ function GridTable(props) {
     const resizeRef = (0, react_1.useRef)(null);
     const api = (0, react_1.useMemo)(() => {
         var _a;
+        // Let the user pass in their own api handle, otherwise make our own
         const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
-        api.init(persistCollapse, virtuosoRef, rows);
+        api.init(persistCollapse, virtuosoRef);
         api.setActiveRowId(activeRowId);
         api.setActiveCellId(activeCellId);
         // Push the initial columns directly into tableState, b/c that is what
@@ -105,25 +106,27 @@ function GridTable(props) {
     }, [props.api]);
     const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
     const { tableState } = api;
-    tableState.setRows(rows);
+    tableState.onRowSelect = onRowSelect;
+    // Use a single useEffect to push props into the TableState observable, that
+    // way we avoid React warnings when the observable mutations cause downstream
+    // components to be marked for re-render. Mobx will ignore setter calls that
+    // don't actually change the value, so we can do this in a single useEffect.
     (0, react_1.useEffect)(() => {
-        tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
-    }, [tableState, columnsWithIds, visibleColumnsStorageKey]);
+        // Use runInAction so mobx delays any reactions until all the mutations happen
+        (0, mobx_1.runInAction)(() => {
+            tableState.setRows(rows);
+            tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
+            tableState.setSearch(filter);
+            tableState.activeRowId = activeRowId;
+            tableState.activeCellId = activeCellId;
+        });
+    }, [tableState, rows, columnsWithIds, visibleColumnsStorageKey, activeRowId, activeCellId, filter]);
     const columns = (0, hooks_1.useComputed)(() => {
         return tableState.visibleColumns;
     }, [tableState]);
     // Initialize the sort state. This will only happen on the first render.
     // Once the `TableState.sort` is defined, it will not re-initialize.
     tableState.initSortState(props.sorting, columns);
-    (0, react_1.useEffect)(() => {
-        tableState.activeRowId = activeRowId;
-    }, [tableState, activeRowId]);
-    (0, react_1.useEffect)(() => {
-        tableState.activeCellId = activeCellId;
-    }, [tableState, activeCellId]);
-    (0, react_1.useEffect)(() => {
-        tableState.setSearch(filter);
-    }, [tableState, filter]);
     // We track render count at the table level, which seems odd (we should be able to track this
     // internally within each GridRow using a useRef), but we have suspicions that react-virtuoso
     // (or us) is resetting component state more than necessary, so we track render counts from
@@ -134,51 +137,41 @@ function GridTable(props) {
     const columnSizes = (0, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef, expandedColumnIds);
     // Flatten, hide-if-filtered, hide-if-collapsed, and component-ize the sorted rows.
     const [tableHeadRows, visibleDataRows, keptSelectedRows, tooManyClientSideRows] = (0, hooks_1.useComputed)(() => {
-        const columns = tableState.visibleColumns;
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
         const expandableHeaderRows = [];
         const totalsRows = [];
         const keptSelectedRows = [];
         let visibleDataRows = [];
-        const { visibleRows, keptRows } = tableState;
+        const { visibleRows } = tableState;
         const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === utils_1.EXPANDABLE_HEADER);
         // Get the flat list or rows from the header down...
         visibleRows.forEach((rs) => {
-            const row = rs.row;
-            const tuple = [
-                row,
-                (0, jsx_runtime_1.jsx)(Row_1.Row, { ...{
-                        as,
-                        columns,
-                        row,
-                        style,
-                        rowStyles,
-                        columnSizes,
-                        level: rs.level,
-                        getCount,
-                        api,
-                        cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
-                        omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
-                        hasExpandableHeader,
-                        isKeptSelectedRow: rs.isKept,
-                        isLastKeptSelectionRow: keptRows[keptRows.length - 1] === rs.row,
-                    } }, `${row.kind}-${row.id}`),
-            ];
-            if (row.kind === "header") {
-                headerRows.push(tuple);
+            const row = ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...{
+                    as,
+                    rs,
+                    style,
+                    rowStyles,
+                    columnSizes,
+                    getCount,
+                    cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
+                    omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
+                    hasExpandableHeader,
+                } }, rs.key));
+            if (rs.kind === "header") {
+                headerRows.push(row);
             }
-            else if (row.kind === "expandableHeader") {
-                expandableHeaderRows.push(tuple);
+            else if (rs.kind === "expandableHeader") {
+                expandableHeaderRows.push(row);
             }
-            else if (row.kind === "totals") {
-                totalsRows.push(tuple);
+            else if (rs.kind === "totals") {
+                totalsRows.push(row);
             }
-            else if (rs.isKept || row.kind === utils_1.KEPT_GROUP) {
-                keptSelectedRows.push(tuple);
+            else if (rs.isKept || rs.kind === utils_1.KEPT_GROUP) {
+                keptSelectedRows.push(row);
             }
             else {
-                visibleDataRows.push(tuple);
+                visibleDataRows.push(row);
             }
         });
         // Once our header rows are created we can organize them in expected order.
@@ -190,11 +183,9 @@ function GridTable(props) {
         return [tableHeadRows, visibleDataRows, keptSelectedRows, tooManyClientSideRows];
     }, [as, api, style, rowStyles, maybeStyle, columnSizes, getCount, filterMaxRows]);
     // Push back to the caller a way to ask us where a row is.
-    const { rowLookup } = props;
-    if (rowLookup) {
-        // Refs are cheap to assign to, so we don't bother doing this in a useEffect
-        rowLookup.current = (0, GridRowLookup_1.createRowLookup)(columns, visibleDataRows, virtuosoRef);
-    }
+    // Refs are cheap to assign to, so we don't bother doing this in a useEffect
+    if (props.rowLookup)
+        props.rowLookup.current = api.lookup;
     const noData = visibleDataRows.length === 0;
     const firstRowMessage = (noData && fallbackMessage) || (tooManyClientSideRows && "Hiding some rows, use filter...") || infoMessage;
     const borderless = (_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.borderless;
@@ -237,11 +228,11 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
         }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("div", { css: {
                     ...(style.firstRowCss && Css_1.Css.addIn("& > div:first-of-type", style.firstRowCss).$),
                     ...Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$,
-                }, children: tableHeadRows.map(([, node]) => node) }), (0, jsx_runtime_1.jsxs)("div", { css: {
+                }, children: tableHeadRows }), (0, jsx_runtime_1.jsxs)("div", { css: {
                     ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {}),
                     ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type > *`, style.firstNonHeaderRowCss).$ : {}),
                     ...(style.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
-                }, children: [keptSelectedRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows.map(([, node]) => node)] })] }));
+                }, children: [keptSelectedRows, firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows] })] }));
 }
 /** Renders as a table, primarily/solely for good print support. */
 function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
@@ -255,7 +246,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("thead", { css: Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$, children: tableHeadRows.map(([, node]) => node) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [keptSelectedRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })), visibleDataRows.map(([, node]) => node)] })] }));
+        }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("thead", { css: Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$, children: tableHeadRows }), (0, jsx_runtime_1.jsxs)("tbody", { children: [keptSelectedRows, firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })), visibleDataRows] })] }));
 }
 /**
  * Uses react-virtuoso to render rows virtually.
@@ -295,13 +286,13 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
         topItemCount: stickyHeader ? tableHeadRows.length : 0, itemContent: (index) => {
             // Since we have 3 arrays of rows: `tableHeadRows` and `visibleDataRows` and `keptSelectedRows` we must determine which one to render.
             if (index < tableHeadRows.length) {
-                return tableHeadRows[index][1];
+                return tableHeadRows[index];
             }
             // Reset index
             index -= tableHeadRows.length;
             // Show keptSelectedRows if there are any
             if (index < keptSelectedRows.length) {
-                return keptSelectedRows[index][1];
+                return keptSelectedRows[index];
             }
             // Reset index
             index -= keptSelectedRows.length;
@@ -315,14 +306,17 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
                 index--;
             }
             // Lastly render the table body rows
-            return visibleDataRows[index][1];
+            return visibleDataRows[index];
         }, totalCount: tableHeadRows.length + (firstRowMessage ? 1 : 0) + visibleDataRows.length + keptSelectedRows.length, ...(infiniteScroll
             ? {
                 increaseViewportBy: {
                     bottom: (_a = infiniteScroll.endOffsetPx) !== null && _a !== void 0 ? _a : 500,
                     top: 0,
                 },
-                endReached: infiniteScroll.onEndReached,
+                // Add a `index > 0` check b/c Virtuoso is calling this in storybook
+                // with `endReached(0)` at odd times, like on page unload/story load,
+                // which then causes our test data to have duplicate ids in it.
+                endReached: (index) => (index > 0 ? infiniteScroll.onEndReached(index) : 0),
             }
             : {}) }));
 }

package/dist/components/Table/GridTableApi.d.ts

@@ -1,5 +1,6 @@
 import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
+import { GridRowLookup } from "../index";
 import { GridDataRow } from "./components/Row";
 import { DiscriminateUnion, Kinded } from "./types";
 import { TableState } from "./utils/TableState";
@@ -47,11 +48,20 @@ export type GridTableApi<R extends Kinded> = {
     getVisibleColumnIds(): string[];
     setVisibleColumns(ids: string[]): void;
 };
+/** Adds per-row methods to the `api`, i.e. for getting currently-visible children. */
+export type GridRowApi<R extends Kinded> = GridTableApi<R> & {
+    getVisibleChildren(): GridDataRow<R>[];
+    getVisibleChildren<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
+    getSelectedChildren(): GridDataRow<R>[];
+    getSelectedChildren<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
+};
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
-    readonly tableState: TableState;
+    readonly tableState: TableState<R>;
     virtuosoRef: MutableRefObject<VirtuosoHandle | null>;
+    lookup: GridRowLookup<R>;
+    constructor();
     /** Called once by the GridTable when it takes ownership of this api instance. */
-    init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>, rows: GridDataRow<R>[]): void;
+    init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>): void;
     scrollToIndex(index: number): void;
     getSelectedRowIds(kind?: string): string[];
     getSelectedRows(kind?: string): any;

package/dist/components/Table/GridTableApi.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTableApiImpl = exports.useGridTableApi = void 0;
 const react_1 = require("react");
+const index_1 = require("../index");
 const TableState_1 = require("./utils/TableState");
 /**
  * Creates an `api` handle to drive a `GridTable`.
@@ -28,13 +29,16 @@ class GridTableApiImpl {
         // This is public to GridTable but not exported outside of Beam
         this.tableState = new TableState_1.TableState(this);
         this.virtuosoRef = { current: null };
+        // This instance gets spread into each row's GridRowApi, so bind the methods up-front
+        bindMethods(this);
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */
-    init(persistCollapse, virtuosoRef, rows) {
+    init(persistCollapse, virtuosoRef) {
         // Technically this drives both row-collapse and column-expanded
         if (persistCollapse)
             this.tableState.loadCollapse(persistCollapse);
         this.virtuosoRef = virtuosoRef;
+        this.lookup = (0, index_1.createRowLookup)(this, virtuosoRef);
     }
     scrollToIndex(index) {
         this.virtuosoRef.current && this.virtuosoRef.current.scrollToIndex(index);
@@ -75,3 +79,9 @@ class GridTableApiImpl {
     }
 }
 exports.GridTableApiImpl = GridTableApiImpl;
+function bindMethods(instance) {
+    Object.getOwnPropertyNames(Object.getPrototypeOf(instance)).forEach((key) => {
+        if (instance[key] instanceof Function && key !== "constructor")
+            instance[key] = instance[key].bind(instance);
+    });
+}

package/dist/components/Table/components/Row.d.ts

@@ -1,35 +1,29 @@
 import { ReactElement } from "react";
-import { GridTableApi } from "../GridTableApi";
 import { GridStyle, RowStyles } from "../TableStyles";
-import { DiscriminateUnion, GridColumnWithId, IfAny, Kinded, Pin, RenderAs } from "../types";
+import { DiscriminateUnion, IfAny, Kinded, Pin, RenderAs } from "../types";
+import { RowState } from "../utils/RowState";
 import { AnyObject } from "../../../types";
 interface RowProps<R extends Kinded> {
     as: RenderAs;
-    columns: GridColumnWithId<R>[];
-    row: GridDataRow<R>;
+    rs: RowState<R>;
     style: GridStyle;
     rowStyles: RowStyles<R> | undefined;
     columnSizes: string[];
-    level: number;
     getCount: (id: string) => object;
-    api: GridTableApi<R>;
     cellHighlight: boolean;
     omitRowHover: boolean;
     hasExpandableHeader: boolean;
-    isKeptSelectedRow: boolean;
-    isLastKeptSelectionRow: boolean;
 }
 declare function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement;
 /**
- * Memoizes Rows so that re-rendering the table doesn't re-render every single row.
+ * Memoizes rows so that re-rendering the table doesn't re-render every single row.
  *
- * We use a custom `propsAreEqual` for the `RowProps.row` property, which we memoize
- * based on the `GridDataRow.data` prop, such that if a table re-renders (i.e. for a cache
- * updated) and technically creates new row instances, but a row's `row.data` points to the
- * same/unchanged Apollo cache fragment, then we won't re-render that row.
+ * We used to have a custom `propsAreEqual` method that would only compare `props.rows`
+ * on the `data` attribute, b/c our `createRows` methods do not create stable row identities;
+ * i.e. if one row changes, they all change.
  *
- * Note that if you're using virtualization, it can be surprising how unnoticeable broken row
- * memoization is.
+ * However, now RowState.row synthesizes a `row` that only reactively changes when
+ * that row's `data` explicitly changes, so we no longer need a custom `propsAreEqual` here.
  */
 export declare const Row: typeof RowImpl;
 /** A specific kind of row, including the GridDataRow props. */

package/dist/components/Table/components/Row.js

@@ -1,49 +1,24 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const cell_1 = require("./cell");
 const KeptGroupRow_1 = require("./KeptGroupRow");
 const sortRows_1 = require("../utils/sortRows");
 const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
 const Css_1 = require("../../../Css");
-const hooks_1 = require("../../../hooks");
 const utils_2 = require("../../../utils");
-const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a, _b;
-    const { as, columns, row, style, rowStyles, columnSizes, level, getCount, api, cellHighlight, omitRowHover, hasExpandableHeader, isKeptSelectedRow, isLastKeptSelectionRow, ...others } = props;
+    const { as, rs, style, rowStyles, columnSizes, getCount, cellHighlight, omitRowHover, hasExpandableHeader, ...others } = props;
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
-    const sortOn = (_a = tableState.sortConfig) === null || _a === void 0 ? void 0 : _a.on;
-    const rowId = `${row.kind}_${row.id}`;
-    const isActive = (0, hooks_1.useComputed)(() => tableState.activeRowId === rowId, [rowId, tableState]);
+    // We're wrapped in observer, so can access these without useComputeds
+    const { api, visibleColumns: columns } = tableState;
+    const { row, api: rowApi, isActive, isKept: isKeptRow, isLastKeptRow, level } = rs;
     // We treat the "header" and "totals" kind as special for "good defaults" styling
     const isHeader = row.kind === utils_1.HEADER;
     const isTotals = row.kind === utils_1.TOTALS;
@@ -51,6 +26,7 @@ function RowImpl(props) {
     const isKeptGroupRow = row.kind === utils_1.KEPT_GROUP;
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const RowTag = as === "table" ? "tr" : "div";
+    const sortOn = (_a = tableState.sortConfig) === null || _a === void 0 ? void 0 : _a.on;
     const revealOnRowHoverClass = "revealOnRowHover";
     const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover;
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
@@ -69,7 +45,7 @@ function RowImpl(props) {
             [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
             [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
         },
-        ...(isLastKeptSelectionRow && Css_1.Css.addIn("&>*", style.keptLastRowCss).$),
+        ...(isLastKeptRow && Css_1.Css.addIn("&>*", style.keptLastRowCss).$),
     };
     let currentColspan = 1;
     // Keep a running count of how many expanded columns are being shown.
@@ -127,7 +103,7 @@ function RowImpl(props) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = (0, utils_1.applyRowFn)(column, row, api, level, isExpanded);
+            const maybeContent = (0, utils_1.applyRowFn)(column, row, rowApi, level, isExpanded);
             // Only use the `numExpandedColumns` as the `colspan` when rendering the "Expandable Header"
             currentColspan =
                 (0, utils_1.isGridCellContent)(maybeContent) && typeof maybeContent.colspan === "number"
@@ -143,7 +119,7 @@ function RowImpl(props) {
             const isExpandable = (0, utils_2.isFunction)(column.expandColumns) ||
                 (column.expandColumns && column.expandColumns.length > 0) ||
                 column.expandedWidth !== undefined;
-            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow);
+            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptRow);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader || isTotals || isExpandableHeader, column, columnIndex, maybeContent);
             const maybeSticky = (_a = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _a !== void 0 ? _a : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
@@ -230,19 +206,14 @@ function RowImpl(props) {
         })) }));
 }
 /**
- * Memoizes Rows so that re-rendering the table doesn't re-render every single row.
+ * Memoizes rows so that re-rendering the table doesn't re-render every single row.
  *
- * We use a custom `propsAreEqual` for the `RowProps.row` property, which we memoize
- * based on the `GridDataRow.data` prop, such that if a table re-renders (i.e. for a cache
- * updated) and technically creates new row instances, but a row's `row.data` points to the
- * same/unchanged Apollo cache fragment, then we won't re-render that row.
+ * We used to have a custom `propsAreEqual` method that would only compare `props.rows`
+ * on the `data` attribute, b/c our `createRows` methods do not create stable row identities;
+ * i.e. if one row changes, they all change.
  *
- * Note that if you're using virtualization, it can be surprising how unnoticeable broken row
- * memoization is.
+ * However, now RowState.row synthesizes a `row` that only reactively changes when
+ * that row's `data` explicitly changes, so we no longer need a custom `propsAreEqual` here.
  */
 // Declared as a const + `as typeof RowImpl` to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
-exports.Row = react_1.default.memo((0, mobx_react_1.observer)(RowImpl), (one, two) => {
-    const { row: row1, ...others1 } = one;
-    const { row: row2, ...others2 } = two;
-    return (0, shallowEqual_1.shallowEqual)(row1, row2) && (0, shallowEqual_1.shallowEqual)(others1, others2);
-});
+exports.Row = (0, mobx_react_1.observer)(RowImpl);

package/dist/components/Table/hooks/useSetupColumnSizes.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject } from "react";
 import { GridStyle } from "../TableStyles";
-import { GridColumnWithId } from "../types";
+import { GridColumnWithId, Kinded } from "../types";
 /**
  * Calculates an array of sizes for each of our columns.
  *
@@ -20,4 +20,4 @@ import { GridColumnWithId } from "../types";
  *
  * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
  */
-export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumnWithId<any>[], resizeRef: MutableRefObject<HTMLElement | null>, expandedColumnIds: string[]): string[];
+export declare function useSetupColumnSizes<R extends Kinded>(style: GridStyle, columns: GridColumnWithId<R>[], resizeRef: MutableRefObject<HTMLElement | null>, expandedColumnIds: string[]): string[];

package/dist/components/Table/types.d.ts

@@ -1,15 +1,13 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactNode } from "react";
 import { GridCellContent } from "./components/cell";
-import { GridDataRow, GridRowKind } from "./components/Row";
-import { GridTableApi } from "./GridTableApi";
+import { GridRowKind } from "./components/Row";
+import { GridRowApi } from "./GridTableApi";
 import { Margin, Xss } from "../../Css";
 export type Kinded = {
     kind: string;
 };
 export type GridTableXss = Xss<Margin>;
 export type RenderAs = "div" | "table" | "virtual";
-export type RowTuple<R extends Kinded> = [GridDataRow<R>, ReactElement];
-export type ParentChildrenTuple<R extends Kinded> = [GridDataRow<R>, ParentChildrenTuple<R>[]];
 export type Direction = "ASC" | "DESC";
 export type MaybeFn<T> = T | (() => T);
 export type GridCellAlignment = "left" | "right" | "center";
@@ -35,12 +33,12 @@ export type GridColumn<R extends Kinded> = {
         data: infer D;
     } ? (data: D, opts: {
         row: GridRowKind<R, K>;
-        api: GridTableApi<R>;
+        api: GridRowApi<R>;
         level: number;
         expanded: boolean;
     }) => ReactNode | GridCellContent : (data: undefined, opts: {
         row: GridRowKind<R, K>;
-        api: GridTableApi<R>;
+        api: GridRowApi<R>;
         level: number;
         expanded: boolean;
     }) => ReactNode | GridCellContent);

package/dist/components/Table/utils/ColumnState.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnWithId } from "../types";
+import { GridColumnWithId, Kinded } from "../types";
 import { ColumnStates } from "./ColumnStates";
 import { ColumnStorage } from "./ColumnStorage";
 /**
@@ -7,18 +7,18 @@ import { ColumnStorage } from "./ColumnStorage";
  * This is primarily for tracking visible/expanded columns for tables
  * that use the expandable columns feature.
  */
-export declare class ColumnState {
+export declare class ColumnState<R extends Kinded> {
     private states;
-    column: GridColumnWithId<any>;
-    children: ColumnState[] | undefined;
+    column: GridColumnWithId<R>;
+    children: ColumnState<R>[] | undefined;
     private visible;
     private expanded;
-    constructor(states: ColumnStates, storage: ColumnStorage, column: GridColumnWithId<any>);
+    constructor(states: ColumnStates<R>, storage: ColumnStorage<R>, column: GridColumnWithId<R>);
     setVisible(visible: boolean): void;
     get isExpanded(): boolean;
     toggleExpanded(): void;
     /** Calls the `column.expandColumns` function, if set, and adds the resulting columns. */
     doExpand(force?: boolean): Promise<void>;
     /** Returns this column, if visible, and its children, if expanded. */
-    get maybeSelfAndChildren(): ColumnState[];
+    get maybeSelfAndChildren(): ColumnState<R>[];
 }

package/dist/components/Table/utils/ColumnStates.d.ts

@@ -1,7 +1,7 @@
-import { GridColumnWithId } from "../../..";
+import { GridColumnWithId, Kinded } from "../../..";
 import { ColumnState } from "./ColumnState";
 /** A reactive/observable wrapper around our columns. */
-export declare class ColumnStates {
+export declare class ColumnStates<R extends Kinded> {
     private columns;
     private map;
     private storage;
@@ -14,15 +14,15 @@ export declare class ColumnStates {
      * So like you expand a column, and new columns show up, but we'll remember they
      * were hidden last time you looked at this specific expansion of columns.
      */
-    setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
+    setColumns(columns: GridColumnWithId<R>[], visibleColumnsStorageKey: string | undefined): void;
     /** Adds a column to our state, i.e. maybe a dynamically loaded column. */
-    addColumn(column: GridColumnWithId<any>): ColumnState;
+    addColumn(column: GridColumnWithId<R>): ColumnState<R>;
     /** Returns the `ColumnState` for the given `id`. */
-    get(id: string): ColumnState;
+    get(id: string): ColumnState<R>;
     /** Returns all currently-expanded columns. */
-    get expandedColumns(): ColumnState[];
+    get expandedColumns(): ColumnState<R>[];
     /** Returns a flat list of all visible columns. */
-    get allVisibleColumns(): ColumnState[];
+    get allVisibleColumns(): ColumnState<R>[];
     setVisibleColumns(ids: string[]): void;
     loadExpanded(storageKey: string): void;
     loadVisible(storageKey: string): void;

package/dist/components/Table/utils/ColumnStorage.d.ts

@@ -1,10 +1,11 @@
+import { Kinded } from "../types";
 import { ColumnStates } from "./ColumnStates";
 /** Loads/saves the column state from sessionStorage. */
-export declare class ColumnStorage {
+export declare class ColumnStorage<R extends Kinded> {
     private states;
     private expandedIds;
     private visibleIds;
-    constructor(states: ColumnStates);
+    constructor(states: ColumnStates<R>);
     loadExpanded(persistCollapse: string): void;
     loadVisible(storageKey: string): void;
     wasExpanded(id: string): boolean | undefined;

package/dist/components/Table/utils/GridRowLookup.d.ts

@@ -1,7 +1,8 @@
 import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
 import { GridDataRow } from "../components/Row";
-import { DiscriminateUnion, GridColumnWithId, Kinded, RowTuple } from "../types";
+import { GridTableApiImpl } from "../GridTableApi";
+import { DiscriminateUnion, GridColumnWithId, Kinded } from "../types";
 /**
  * Allows a caller to ask for the currently shown rows, given the current sorting/filtering.
  *
@@ -22,6 +23,6 @@ interface NextPrev<R extends Kinded> {
     next: GridDataRow<R> | undefined;
     prev: GridDataRow<R> | undefined;
 }
-export declare function createRowLookup<R extends Kinded>(columns: GridColumnWithId<R>[], filteredRows: RowTuple<R>[], virtuosoRef: MutableRefObject<VirtuosoHandle | null>): GridRowLookup<R>;
+export declare function createRowLookup<R extends Kinded>(api: GridTableApiImpl<R>, virtuosoRef: MutableRefObject<VirtuosoHandle | null>): GridRowLookup<R>;
 export declare function getKinds<R extends Kinded>(columns: GridColumnWithId<R>[]): R[];
 export {};

package/dist/components/Table/utils/GridRowLookup.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getKinds = exports.createRowLookup = void 0;
 const types_1 = require("../types");
-function createRowLookup(columns, filteredRows, virtuosoRef) {
+function createRowLookup(api, virtuosoRef) {
     return {
         scrollTo(kind, id) {
             if (virtuosoRef.current === null) {
@@ -10,16 +10,17 @@ function createRowLookup(columns, filteredRows, virtuosoRef) {
                 // element and calling .scrollIntoView, just not doing that yet.
                 throw new Error("scrollTo is only supported for as=virtual");
             }
-            const index = filteredRows.findIndex(([r]) => r && r.kind === kind && r.id === id);
+            const index = api.tableState.visibleRows.findIndex((r) => r && r.kind === kind && r.row.id === id);
             virtuosoRef.current.scrollToIndex({ index, behavior: "smooth" });
         },
         currentList() {
-            return filteredRows.map((r) => r[0]);
+            return api.tableState.visibleRows.map((rs) => rs.row);
         },
         lookup(row, additionalFilter = () => true) {
             var _a, _b;
             var _c;
-            const rows = filteredRows.map((r) => r[0]).filter(additionalFilter);
+            const rows = this.currentList().filter(additionalFilter);
+            const columns = api.tableState.visibleColumns;
             // Ensure we have `result.kind = {}` for each kind
             const result = Object.fromEntries(getKinds(columns).map((kind) => [kind, {}]));
             // This is an admittedly cute/fancy scan, instead of just `rows.findIndex`, but

package/dist/components/Table/utils/RowState.d.ts

@@ -1,4 +1,6 @@
+import { Kinded } from "../../..";
 import { GridDataRow } from "../components/Row";
+import { GridRowApi } from "../GridTableApi";
 import { RowStates } from "./RowStates";
 import { SelectedState } from "./TableState";
 /**
@@ -7,13 +9,15 @@ import { SelectedState } from "./TableState";
  * We set up the RowStates in a tree, just like GridDataRow, to make business logic
  * that uses parent/children easier to write, i.e. selected-ness and collapsed-ness.
  */
-export declare class RowState {
+export declare class RowState<R extends Kinded> {
     private states;
-    parent: RowState | undefined;
-    /** Our row, only ref observed, so we don't crawl into GraphQL fragments. */
-    row: GridDataRow<any>;
+    parent: RowState<R> | undefined;
+    /** Our row, not actually observed, b/c each `createRows` calc creates unstable rows. */
+    private _row;
+    /** Our data, only ref observed, so we don't crawl into GraphQL fragments. */
+    private _data;
     /** Our children row states, as of the latest `props.rows`, without any filtering applied. */
-    children: RowState[] | undefined;
+    children: RowState<R>[] | undefined;
     /** Whether we are *directly* selected. */
     selected: boolean;
     /** Whether we are collapsed. */
@@ -37,7 +41,12 @@ export declare class RowState {
      * actively removed.
      */
     removed: false | "soft" | "hard";
-    constructor(states: RowStates, parent: RowState | undefined, row: GridDataRow<any>);
+    private isCalculatingDirectMatch;
+    constructor(states: RowStates<R>, parent: RowState<R> | undefined, row: GridDataRow<R>);
+    /** Returns a stable-ish row identity that will only change if our `data` changes. */
+    get row(): GridDataRow<R>;
+    /** Accepts a new unstable row, i.e. each `createRows` creates a new row literal. */
+    set row(row: GridDataRow<R>);
     /**
      * Whether we match a client-side filter; true if no filter is in place.
      *
@@ -75,11 +84,16 @@ export declare class RowState {
     toggleCollapsed(): void;
     /** Whether this is a selected-but-filtered-out row that we should hoist to the top. */
     get isKept(): boolean;
+    get isLastKeptRow(): boolean;
+    get key(): string;
+    get kind(): string;
+    get isActive(): boolean;
     get level(): number;
     private get inferSelectedState();
     /** Returns this row and, if we're not collapsed, our children. */
-    get selfAndMaybeChildren(): RowState[];
+    get selfAndMaybeChildren(): RowState<R>[];
     private get visibleChildren();
+    private get visibleDirectlyMatchedChildren();
     /** The `visibleChildren`, but with the current sort config applied. */
     private get visibleSortedChildren();
     /**
@@ -95,6 +109,7 @@ export declare class RowState {
      */
     private get isParent();
     private get isPinned();
+    get api(): GridRowApi<R>;
     get isReservedKind(): boolean;
     /** A dedicated method to "looking down" recursively, to avoid loops in `isMatched`. */
     private get hasDirectlyMatchedChildren();

package/dist/components/Table/utils/RowState.js

@@ -39,10 +39,39 @@ class RowState {
          * actively removed.
          */
         this.removed = false;
+        this.isCalculatingDirectMatch = false;
         this.row = row;
         this.selected = !!row.initSelected;
         this.collapsed = (_a = states.storage.wasCollapsed(row.id)) !== null && _a !== void 0 ? _a : !!row.initCollapsed;
-        (0, mobx_1.makeAutoObservable)(this, { row: mobx_1.observable.ref }, { name: `RowState@${row.id}` });
+        (0, mobx_1.makeAutoObservable)(this, 
+        // 'as any' because the fields are private so don't show up in the type
+        {
+            _row: false,
+            _data: mobx_1.observable.ref,
+            isCalculatingDirectMatch: false,
+        }, { name: `RowState@${row.id}` });
+        // Ideally we could hook up this reaction conditionally, but for the header RowState,
+        // we're initialized by GridTableApiImpl, before TableState.onRowSelect has a chance
+        // to be set to GridTableProps.onRowSelect, so for now just always hook up this reaction.
+        (0, mobx_1.reaction)(() => this.selectedState, (state) => {
+            var _a;
+            const isSelected = state === "checked";
+            const tableFn = (_a = states.table.onRowSelect) === null || _a === void 0 ? void 0 : _a[this.row.kind];
+            tableFn && tableFn(this.row.data, isSelected, { row, api: states.table.api });
+        });
+    }
+    /** Returns a stable-ish row identity that will only change if our `data` changes. */
+    get row() {
+        // This is a noop, but makes mobx see `_data` as a dependency
+        return Object.assign(this._row, { data: this._data });
+    }
+    /** Accepts a new unstable row, i.e. each `createRows` creates a new row literal. */
+    set row(row) {
+        // If `_data` is a stable GraphQL fragment, but row is just a new literal around
+        // it, this won't actually cause any reactivity changes. But once _data does change,
+        // then anyone watching `.row` will see the new row instance + new data.
+        this._row = row;
+        this._data = row.data;
     }
     /**
      * Whether we match a client-side filter; true if no filter is in place.
@@ -148,6 +177,21 @@ class RowState {
             !this.isParent &&
             (!this.isMatched || this.removed === "soft"));
     }
+    get isLastKeptRow() {
+        if (!this.isKept)
+            return false;
+        const { keptRows } = this.states.table;
+        return keptRows[keptRows.length - 1] === this;
+    }
+    get key() {
+        return `${this.row.kind}-${this.row.id}`;
+    }
+    get kind() {
+        return this.row.kind;
+    }
+    get isActive() {
+        return this.states.table.activeRowId === `${this.row.kind}_${this.row.id}`;
+    }
     get level() {
         // Make the header level -1, so the top-level rows are level 0
         return !this.parent ? -1 : this.parent.level + 1;
@@ -176,6 +220,28 @@ class RowState {
         // any kept row children, as they will cause its hasDirectlyMatchedChildren to be true.
         (rs.isReservedKind && rs.row.kind !== utils_1.KEPT_GROUP) || rs.isMatched || rs.isPinned)) !== null && _b !== void 0 ? _b : []);
     }
+    // This is a copy/paste of visibleChildren, but using isDirectlyMatched instead of isMatched
+    // to avoid a cycle, i.e.:
+    //
+    // 1. A parent row evals its own isDirectlyMatched
+    // 2. The parent row has a cell that calculates "sum of visible children"
+    // 3. To know whether the sum cell matches the filter, "1234", we need to render the cell
+    // 4. If rendering the parent cell called `visibleChildren` directly, that method checks
+    //    "is the parent directly matched?" (so that child of matched parents are always shown),
+    //     but now we've looped--deciding the content of the parent cell itself requires knowing
+    //     if the parent cell matched (b/c that controls which children are visible).
+    //
+    // We side-step this by assuming that the `GridRowApi.getVisibleChildren` can use the
+    // slightly-less accurate "my children are visible if they're directly matched".
+    get visibleDirectlyMatchedChildren() {
+        var _a, _b;
+        if (this.row.kind === utils_1.KEPT_GROUP)
+            return this.states.keptRows;
+        return ((_b = (_a = this.children) === null || _a === void 0 ? void 0 : _a.filter((rs) => (rs.isReservedKind && rs.row.kind !== utils_1.KEPT_GROUP) ||
+            rs.isDirectlyMatched ||
+            rs.hasDirectlyMatchedChildren ||
+            rs.isPinned)) !== null && _b !== void 0 ? _b : []);
+    }
     /** The `visibleChildren`, but with the current sort config applied. */
     get visibleSortedChildren() {
         let rows = this.visibleChildren;
@@ -203,6 +269,28 @@ class RowState {
     get isPinned() {
         return typeof this.row.pin === "string" || (!!this.row.pin && this.row.pin.filter !== true);
     }
+    // mobx will cache this getter for us
+    get api() {
+        const rs = this;
+        // Copy the GridTableApi + the getVisibleChildren GridRowApi method
+        return {
+            ...this.states.table.api,
+            // The caller can invoke this observable without their own useComputed,
+            // b/c we wrap all rows in an observer
+            getVisibleChildren(kind) {
+                // Avoid infinite loop if a cell asks for getVisibleChildren while calculating isMatched
+                const children = rs.isCalculatingDirectMatch
+                    ? rs.visibleDirectlyMatchedChildren.map((cs) => cs.row)
+                    : rs.visibleChildren.map((cs) => cs.row);
+                return !kind ? children : children.filter((r) => r.kind === kind);
+            },
+            getSelectedChildren(kind) {
+                var _a;
+                const children = ((_a = rs.children) !== null && _a !== void 0 ? _a : []).filter((cs) => cs.isSelected).map((cs) => cs.row);
+                return !kind ? children : children.filter((r) => r.kind === kind);
+            },
+        };
+    }
     get isReservedKind() {
         return utils_1.reservedRowKinds.includes(this.row.kind);
     }
@@ -218,21 +306,27 @@ class RowState {
         return !!this.parent && (this.parent.isDirectlyMatched || this.parent.hasDirectlyMatchedParent);
     }
     get isDirectlyMatched() {
-        // Reserved rows like the header can never be directly matched, and treating them
-        // as matched currently throws off the header's select all/etc. behavior
-        if (this.isReservedKind)
-            return false;
-        // Ignore hard-deleted rows, i.e. from `api.deleteRows`; in theory any hard-deleted
-        // rows should be removed from `this.children` anyway, by a change to `props.rows`,
-        // but just in case the user calls _only_ `api.deleteRows`, and expects the row to
-        // go away, go ahead and filter them out here.
-        if (this.removed === "hard")
-            return false;
-        // Reacts to either search state or visibleColumns state changing
-        const { visibleColumns, api, search } = this.states.table;
-        return search.every((term) => visibleColumns
-            .map((c) => (0, utils_1.applyRowFn)(c, this.row, api, 0, false))
-            .some((maybeContent) => (0, utils_1.matchesFilter)(maybeContent, term)));
+        this.isCalculatingDirectMatch = true;
+        try {
+            // Reserved rows like the header can never be directly matched, and treating them
+            // as matched currently throws off the header's select all/etc. behavior
+            if (this.isReservedKind)
+                return false;
+            // Ignore hard-deleted rows, i.e. from `api.deleteRows`; in theory any hard-deleted
+            // rows should be removed from `this.children` anyway, by a change to `props.rows`,
+            // but just in case the user calls _only_ `api.deleteRows`, and expects the row to
+            // go away, go ahead and filter them out here.
+            if (this.removed === "hard")
+                return false;
+            // Reacts to either search state or visibleColumns state changing
+            const { visibleColumns, search } = this.states.table;
+            return search.every((term) => visibleColumns
+                .map((c) => (0, utils_1.applyRowFn)(c, this.row, this.api, 0, false))
+                .some((maybeContent) => (0, utils_1.matchesFilter)(maybeContent, term)));
+        }
+        finally {
+            this.isCalculatingDirectMatch = false;
+        }
     }
     /** Used by node when doing `console.log(rs)`. */
     [Symbol.for("nodejs.util.inspect.custom")]() {

package/dist/components/Table/utils/RowStates.d.ts

@@ -1,3 +1,4 @@
+import { Kinded } from "../../..";
 import { GridDataRow } from "../components/Row";
 import { RowState } from "./RowState";
 import { RowStorage } from "./RowStorage";
@@ -5,33 +6,33 @@ import { TableState } from "./TableState";
 /**
  * Manages our tree of observable RowStates that manage each GridDataRow's behavior.
  */
-export declare class RowStates {
+export declare class RowStates<R extends Kinded> {
     private map;
-    readonly table: TableState;
-    readonly storage: RowStorage;
+    readonly table: TableState<R>;
+    readonly storage: RowStorage<R>;
     private readonly header;
     private keptGroupRow;
     /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
     private topRows;
-    constructor(table: TableState);
+    constructor(table: TableState<R>);
     /** Returns a flat list of all of our RowStates. */
-    get allStates(): RowState[];
+    get allStates(): RowState<R>[];
     /** Returns the `RowState` for the given `id`. We should probably require `kind`. */
-    get(id: string): RowState;
+    get(id: string): RowState<R>;
     /**
      * Merge a new set of `rows` prop into our state.
      *
      * Any missing rows are marked as `wasRemoved` so we can consider them "kept" if they're also selected.
      */
-    setRows(rows: GridDataRow<any>[]): void;
+    setRows(rows: GridDataRow<R>[]): void;
     /** Fully delete `ids`, so they don't show up in kept rows anymore. */
     delete(ids: string[]): void;
     /** Implements special collapse behavior, which is just the header's collapse/uncollapse. */
     toggleCollapsed(id: string): void;
-    get visibleRows(): RowState[];
+    get visibleRows(): RowState<R>[];
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
-    get keptRows(): RowState[];
-    get collapsedRows(): RowState[];
+    get keptRows(): RowState<R>[];
+    get collapsedRows(): RowState<R>[];
     private createHeaderRow;
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
     private createKeptGroupRow;

package/dist/components/Table/utils/RowStates.js

@@ -13,14 +13,11 @@ class RowStates {
         // A flat map of all row id -> RowState
         this.map = new mobx_1.ObservableMap();
         this.storage = new RowStorage_1.RowStorage(this);
-        // Pre-create the header to drive select-all/etc. behavior, even if the user
-        // doesn't pass an explicit `header` GridDataRow in `rows.props`
-        this.header = this.createHeaderRow();
-        // Pre-create our keptGroupRow for if/when we need it.
-        this.keptGroupRow = this.createKeptGroupRow(this.header);
         /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
         this.topRows = [];
         this.table = table;
+        this.header = this.createHeaderRow();
+        this.keptGroupRow = this.createKeptGroupRow(this.header);
         this.map.set(this.header.row.id, this.header);
         this.map.set(this.keptGroupRow.row.id, this.keptGroupRow);
     }
@@ -170,4 +167,4 @@ class RowStates {
     }
 }
 exports.RowStates = RowStates;
-const missingHeader = { kind: "header", id: "header", data: undefined };
+const missingHeader = { kind: "header", id: "header", data: "MISSING" };

package/dist/components/Table/utils/RowStorage.d.ts

@@ -1,3 +1,4 @@
+import { Kinded } from "../../..";
 import { RowStates } from "./RowStates";
 /**
  * Manages loading/saving our currently-collapsed rows to session storage.
@@ -10,10 +11,10 @@ import { RowStates } from "./RowStates";
  * Unlike most of our other states, this is not directly reactive/an observable,
  * although we do reactive to collapsedRows changing to persist the new state.
  */
-export declare class RowStorage {
+export declare class RowStorage<R extends Kinded> {
     private states;
     private historicalIds;
-    constructor(states: RowStates);
+    constructor(states: RowStates<R>);
     load(persistCollapse: string): void;
     /** Once the first real-data load is done, we ignore historical ids so that we prefer any new data's `initCollapsed`. */
     done(): void;

package/dist/components/Table/utils/TableState.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Kinded, OnRowSelect } from "../..";
 import { GridDataRow } from "../components/Row";
 import { GridSortConfig } from "../GridTable";
 import { GridTableApi } from "../GridTableApi";
@@ -20,11 +21,11 @@ export type SelectedState = "checked" | "unchecked" | "partial";
  * that need to change their toggle/select on/off in response to parent/child
  * changes.
  */
-export declare class TableState {
+export declare class TableState<R extends Kinded> {
     private persistCollapse;
     private rows;
-    columns: GridColumnWithId<any>[];
-    readonly api: GridTableApi<any>;
+    columns: GridColumnWithId<R>[];
+    readonly api: GridTableApi<R>;
     private readonly rowStates;
     private readonly columnStates;
     activeRowId: string | undefined;
@@ -35,22 +36,23 @@ export declare class TableState {
     sort: SortState;
     private initialSortState;
     private onSort;
+    onRowSelect: OnRowSelect<any> | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor(api: GridTableApi<any>);
     loadCollapse(persistCollapse: string): void;
-    initSortState(sortConfig: GridSortConfig | undefined, columns: GridColumnWithId<any>[]): void;
+    initSortState(sortConfig: GridSortConfig | undefined, columns: GridColumnWithId<R>[]): void;
     setSortKey(clickedColumnId: string): void;
     get sortState(): SortState | undefined;
     /** Returns a client-side sort function, if applicable. */
-    get sortFn(): ((a: RowState, b: RowState) => number) | undefined;
-    setRows(rows: GridDataRow<any>[]): void;
-    setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
+    get sortFn(): ((a: RowState<R>, b: RowState<R>) => number) | undefined;
+    setRows(rows: GridDataRow<R>[]): void;
+    setColumns(columns: GridColumnWithId<R>[], visibleColumnsStorageKey: string | undefined): void;
     setSearch(search: string | undefined): void;
-    get visibleRows(): RowState[];
+    get visibleRows(): RowState<R>[];
     /** Returns visible columns, i.e. those that are visible + any expanded children. */
-    get visibleColumns(): GridColumnWithId<any>[];
+    get visibleColumns(): GridColumnWithId<R>[];
     /** Implements GridTableApi.visibleColumnIds. */
     get visibleColumnIds(): string[];
     setVisibleColumns(ids: string[]): void;
@@ -59,12 +61,15 @@ export declare class TableState {
     toggleExpandedColumn(columnId: string): void;
     numberOfExpandedChildren(columnId: string): number;
     loadExpandedColumns(columnId: string): Promise<void>;
-    /** Returns selected data rows (non-header, non-totals, etc.), ignoring rows that have `row.selectable !== false`. */
-    get selectedRows(): GridDataRow<any>[];
+    /**
+     * Returns selected data rows (non-header, non-totals, etc.), ignoring rows that
+     * have `row.selectable !== false`.
+     */
+    get selectedRows(): GridDataRow<R>[];
     /** Returns kept group row, with the latest kept children, if any. */
-    get keptRowGroup(): GridDataRow<any>;
+    get keptRowGroup(): GridDataRow<R>;
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
-    get keptRows(): GridDataRow<any>[];
+    get keptRows(): GridDataRow<R>[];
     getSelected(id: string): SelectedState;
     selectRow(id: string, selected: boolean): void;
     get collapsedIds(): string[];
@@ -74,7 +79,7 @@ export declare class TableState {
 }
 /** Provides a context for rows to access their table's `TableState`. */
 export declare const TableStateContext: React.Context<{
-    tableState: TableState;
+    tableState: TableState<any>;
 }>;
 export declare function deriveSortState(currentSortState: SortState, clickedKey: string, initialSortState: SortState | undefined): SortState | undefined;
 type ColumnSort = {

package/dist/components/Table/utils/TableState.js

@@ -45,6 +45,7 @@ class TableState {
         // Tracks the active sort column(s), so GridTable or SortHeaders can reactively
         // re-render (for GridTable, only if client-side sorting)
         this.sort = {};
+        this.onRowSelect = undefined;
         this.api = api;
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
         // that it'll be a stable identity for GridTable to useMemo against.
@@ -129,10 +130,8 @@ class TableState {
     }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
-        if (rows !== this.rows) {
-            this.rowStates.setRows(rows);
-            this.rows = rows;
-        }
+        this.rowStates.setRows(rows);
+        this.rows = rows;
     }
     setColumns(columns, visibleColumnsStorageKey) {
         if (columns !== this.columns) {
@@ -175,7 +174,10 @@ class TableState {
     loadExpandedColumns(columnId) {
         return this.columnStates.get(columnId).doExpand();
     }
-    /** Returns selected data rows (non-header, non-totals, etc.), ignoring rows that have `row.selectable !== false`. */
+    /**
+     * Returns selected data rows (non-header, non-totals, etc.), ignoring rows that
+     * have `row.selectable !== false`.
+     */
     get selectedRows() {
         return this.rowStates.allStates
             .filter((rs) => rs.isSelected && !utils_1.reservedRowKinds.includes(rs.row.kind))

package/dist/components/Table/utils/columns.d.ts

@@ -28,7 +28,7 @@ export declare function collapseColumn<T extends Kinded>(columnDef?: Partial<Gri
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-export declare function calcColumnSizes(columns: GridColumnWithId<any>[], tableWidth: number | undefined, tableMinWidthPx: number | undefined, expandedColumnIds: string[]): string[];
+export declare function calcColumnSizes<R extends Kinded>(columns: GridColumnWithId<R>[], tableWidth: number | undefined, tableMinWidthPx: number | undefined, expandedColumnIds: string[]): string[];
 /** Assign column ids if missing. */
 export declare function assignDefaultColumnIds<T extends Kinded>(columns: GridColumn<T>[]): GridColumnWithId<T>[];
 export declare const generateColumnId: (columnIndex: number) => string;

package/dist/components/Table/utils/utils.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { GridCellContent } from "../components/cell";
 import { GridDataRow } from "../components/Row";
-import { GridTableApi } from "../GridTableApi";
+import { GridRowApi } from "../GridTableApi";
 import { GridStyle } from "../TableStyles";
 import { GridCellAlignment, GridColumnWithId, Kinded, RenderAs } from "../types";
 import { Properties } from "../../../Css";
@@ -9,7 +9,7 @@ import { Properties } from "../../../Css";
 export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment, column: GridColumnWithId<any>, isExpandableHeader: boolean, isExpandable: boolean, minStickyLeftOffset: number, isKeptSelectedRow: boolean): ReactNode;
 export declare function isGridCellContent(content: ReactNode | GridCellContent): content is GridCellContent;
 /** Return the content for a given column def applied to a given row. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number, expanded: boolean): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridRowApi<R>, level: number, expanded: boolean): ReactNode | GridCellContent;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare const emptyCell: GridCellContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.310.0",
+  "version": "2.312.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",