@homebound/beam 2.307.0 → 2.308.1

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

@@ -1,7 +1,7 @@
 import { MutableRefObject } from "react";
 import { GridTableApi } from "./GridTableApi";
 import { GridStyle, GridStyleDef, RowStyles } from "./TableStyles";
-import { Direction, GridColumn, GridColumnWithId, GridTableXss, InfiniteScroll, Kinded, ParentChildrenTuple, RenderAs } from "./types";
+import { Direction, GridColumn, GridTableXss, InfiniteScroll, Kinded, RenderAs } from "./types";
 import { GridRowLookup } from "./utils/GridRowLookup";
 import { Only } from "../../Css";
 import { GridDataRow } from "./components/Row";
@@ -138,11 +138,3 @@ export interface GridTableProps<R extends Kinded, X> {
  * https://docs.google.com/document/d/1DFnlkDubK4nG_GLf_hB8yp0flnSNt_3IBh5iOicuaFM/edit#heading=h.9m9cpwgeqfc9
  */
 export declare function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = any>(props: GridTableProps<R, X>): import("@emotion/react/jsx-runtime").JSX.Element;
-/**
- * Filters rows given a client-side text `filter.
- *
- * Ensures parent rows remain in the list if any children match the filter.
- *
- * We return a copy of `[Parent, [Child]]` tuples so that we don't modify the `GridDataRow.children`.
- */
-export declare function filterRows<R extends Kinded>(api: GridTableApi<R>, columns: GridColumnWithId<R>[], rows: GridDataRow<R>[], filter: string | undefined): [string[], ParentChildrenTuple<R>[]];

package/dist/components/Table/GridTable.js

@@ -26,10 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterRows = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = void 0;
+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");
@@ -38,7 +37,6 @@ const useSetupColumnSizes_1 = require("./hooks/useSetupColumnSizes");
 const TableStyles_1 = require("./TableStyles");
 const columns_1 = require("./utils/columns");
 const GridRowLookup_1 = require("./utils/GridRowLookup");
-const sortRows_1 = require("./utils/sortRows");
 const TableState_1 = require("./utils/TableState");
 const utils_1 = require("./utils/utils");
 const Css_1 = require("../../Css");
@@ -117,16 +115,15 @@ function GridTable(props) {
     // 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);
-    const [sortOn, caseSensitive] = (0, hooks_1.useComputed)(() => {
-        const { sortConfig } = tableState;
-        return [sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on, (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on) === "client" ? !!sortConfig.caseSensitive : false];
-    }, [tableState]);
     (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
@@ -135,111 +132,63 @@ function GridTable(props) {
     // Our column sizes use either `w` or `expandedWidth`, so see which columns are currently expanded
     const expandedColumnIds = (0, hooks_1.useComputed)(() => tableState.expandedColumnIds, [tableState]);
     const columnSizes = (0, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef, expandedColumnIds);
-    // Make a single copy of our current collapsed state, so we'll have a single observer.
-    const collapsedIds = (0, hooks_1.useComputed)(() => tableState.collapsedIds, [tableState]);
-    const sortState = (0, hooks_1.useComputed)(() => (0, mobx_1.toJS)(tableState.sortState), [tableState]);
-    const maybeSorted = (0, react_1.useMemo)(() => {
-        if (sortOn === "client" && sortState) {
-            // If using client-side sort, the sortState use S = number
-            return (0, sortRows_1.sortRows)(columns, rows, sortState, caseSensitive);
-        }
-        return rows;
-    }, [columns, rows, sortOn, sortState, caseSensitive]);
-    const [keptGroupRow, keptDataRows] = (0, hooks_1.useComputed)(() => [tableState.keptRowGroup, tableState.keptRows], [tableState]);
-    // Sort the `keptSelectedDataRows` separately because the current sorting logic sorts within groups and these "kept" rows are now displayed in a flat list.
-    // It could also be the case that some of these rows are no longer in the `props.rows` list, and so wouldn't be sorted by the `maybeSorted` logic above.
-    const sortedKeptSelections = (0, react_1.useMemo)(() => {
-        if (sortOn === "client" && sortState && keptDataRows.length > 0) {
-            return (0, sortRows_1.sortRows)(columns, keptDataRows, sortState, caseSensitive);
-        }
-        return keptDataRows;
-    }, [columns, sortOn, sortState, caseSensitive, keptDataRows]);
     // Flatten, hide-if-filtered, hide-if-collapsed, and component-ize the sorted rows.
-    let [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, keptSelectedRows, filteredRowIds] = (0, react_1.useMemo)(() => {
-        const hasExpandableHeader = maybeSorted.some((row) => row.id === utils_1.EXPANDABLE_HEADER);
-        const makeRowComponent = (row, level, isKeptSelectedRow = false, isLastKeptSelectionRow = false) => ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...{
-                as,
-                columns,
-                row,
-                style,
-                rowStyles,
-                columnSizes,
-                level,
-                getCount,
-                api,
-                cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
-                omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
-                hasExpandableHeader,
-                isKeptSelectedRow,
-                isLastKeptSelectionRow,
-            } }, `${row.kind}-${row.id}`));
+    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 visibleDataRows = [];
         const keptSelectedRows = [];
-        // Flatten the tuple tree into lists of rows
-        function visitRows(tuples, level) {
-            tuples.forEach(([row, children]) => {
-                if (row.kind === "header") {
-                    headerRows.push([row, makeRowComponent(row, level)]);
-                }
-                else if (row.kind === "totals") {
-                    totalsRows.push([row, makeRowComponent(row, level)]);
-                }
-                else if (row.kind === "expandableHeader") {
-                    expandableHeaderRows.push([row, makeRowComponent(row, level)]);
-                }
-                else {
-                    visibleDataRows.push([row, makeRowComponent(row, level)]);
-                    // tuples has already been client-side filtered, so just check collapsed
-                    if (children.length && !collapsedIds.includes(row.id)) {
-                        visitRows(children, level + 1);
-                    }
-                }
-            });
-        }
-        // Call `visitRows` with our post-filtered list
-        const [filteredRowIds, filteredRows] = filterRows(api, columns, maybeSorted, filter);
-        visitRows(filteredRows, 0);
-        // Check for any selected rows that are not displayed in the table because they don't
-        // match the current filter, or are no longer part of the `rows` prop. We persist these
-        // selected rows and hoist them to the top of the table.
-        if (sortedKeptSelections.length) {
-            keptSelectedRows.push([keptGroupRow, makeRowComponent(keptGroupRow, 1)]);
-            if (!collapsedIds.includes(utils_1.KEPT_GROUP)) {
-                keptSelectedRows.push(...sortedKeptSelections.map((row, idx) => {
-                    const isLast = idx === sortedKeptSelections.length - 1;
-                    return [row, makeRowComponent(row, 1, true, isLast)];
-                }));
+        let visibleDataRows = [];
+        const { visibleRows, keptRows } = 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);
+            }
+            else if (row.kind === "expandableHeader") {
+                expandableHeaderRows.push(tuple);
+            }
+            else if (row.kind === "totals") {
+                totalsRows.push(tuple);
+            }
+            else if (rs.isKept || row.kind === utils_1.KEPT_GROUP) {
+                keptSelectedRows.push(tuple);
+            }
+            else {
+                visibleDataRows.push(tuple);
             }
+        });
+        // Once our header rows are created we can organize them in expected order.
+        const tableHeadRows = expandableHeaderRows.concat(headerRows).concat(totalsRows);
+        const tooManyClientSideRows = !!filterMaxRows && visibleDataRows.length > filterMaxRows;
+        if (tooManyClientSideRows) {
+            visibleDataRows = visibleDataRows.slice(0, filterMaxRows + keptSelectedRows.length);
         }
-        return [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, keptSelectedRows, filteredRowIds];
-    }, [
-        as,
-        api,
-        filter,
-        maybeSorted,
-        columns,
-        style,
-        rowStyles,
-        maybeStyle,
-        columnSizes,
-        collapsedIds,
-        getCount,
-        keptGroupRow,
-        sortedKeptSelections,
-    ]);
-    // Once our header rows are created we can organize them in expected order.
-    const tableHeadRows = expandableHeaderRows.concat(headerRows).concat(totalsRows);
-    const tooManyClientSideRows = filterMaxRows && visibleDataRows.length > filterMaxRows;
-    if (tooManyClientSideRows) {
-        visibleDataRows = visibleDataRows.slice(0, filterMaxRows + keptSelectedRows.length);
-    }
-    (0, react_1.useEffect)(() => {
-        tableState.setMatchedRows(filteredRowIds);
-    }, [tableState, filteredRowIds]);
+        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) {
@@ -417,48 +366,3 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, xss) => {
             }, "data-testid": id, children: children }));
     });
 });
-/**
- * Filters rows given a client-side text `filter.
- *
- * Ensures parent rows remain in the list if any children match the filter.
- *
- * We return a copy of `[Parent, [Child]]` tuples so that we don't modify the `GridDataRow.children`.
- */
-function filterRows(api, columns, rows, filter) {
-    // Make a flat list of ids, in addition to the tuple tree
-    const filteredRowIds = [];
-    // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
-    const filters = (filter && filter.split(/ +/)) || [];
-    // Make a functions to do recursion
-    function acceptAll(acc, row) {
-        var _a, _b;
-        filteredRowIds.push(row.id);
-        return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(acceptAll, [])) !== null && _b !== void 0 ? _b : []]]);
-    }
-    function filterFn(acc, row) {
-        var _a, _b, _c, _d;
-        const matches = utils_1.reservedRowKinds.includes(row.kind) ||
-            filters.length === 0 ||
-            filters.every((f) => columns.map((c) => (0, utils_1.applyRowFn)(c, row, api, 0, false)).some((maybeContent) => (0, utils_1.matchesFilter)(maybeContent, f)));
-        if (matches) {
-            filteredRowIds.push(row.id);
-            // A matched parent means show all it's children
-            return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(acceptAll, [])) !== null && _b !== void 0 ? _b : []]]);
-        }
-        else {
-            // An unmatched parent but with matched children means show the parent
-            const matchedChildren = (_d = (_c = row.children) === null || _c === void 0 ? void 0 : _c.reduce(filterFn, [])) !== null && _d !== void 0 ? _d : [];
-            if (matchedChildren.length > 0 ||
-                typeof row.pin === "string" ||
-                (row.pin !== undefined && row.pin.filter !== true)) {
-                filteredRowIds.push(row.id);
-                return acc.concat([[row, matchedChildren]]);
-            }
-            else {
-                return acc;
-            }
-        }
-    }
-    return [filteredRowIds, rows.reduce(filterFn, [])];
-}
-exports.filterRows = filterRows;

package/dist/components/Table/GridTableApi.js

@@ -26,7 +26,7 @@ exports.useGridTableApi = useGridTableApi;
 class GridTableApiImpl {
     constructor() {
         // This is public to GridTable but not exported outside of Beam
-        this.tableState = new TableState_1.TableState();
+        this.tableState = new TableState_1.TableState(this);
         this.virtuosoRef = { current: null };
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */

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

@@ -1,4 +1,4 @@
-import { GridColumnWithId } from "../../..";
+import { GridColumnWithId } from "../types";
 import { ColumnStates } from "./ColumnStates";
 import { ColumnStorage } from "./ColumnStorage";
 /**

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnState = void 0;
 const mobx_1 = require("mobx");
-const src_1 = require("../../..");
+const columns_1 = require("./columns");
 const index_1 = require("../../../utils/index");
 /**
  * A reactive/observable wrapper around each GridColumn.
@@ -24,7 +24,7 @@ class ColumnState {
             this.expanded = true;
             this.doExpand();
         }
-        (0, mobx_1.makeAutoObservable)(this, { column: mobx_1.observable.ref });
+        (0, mobx_1.makeAutoObservable)(this, { column: mobx_1.observable.ref }, { name: `ColumnState@${column.id}` });
     }
     setVisible(visible) {
         const wasVisible = this.visible;
@@ -55,7 +55,7 @@ class ColumnState {
             return;
         if ((0, index_1.isFunction)(expandColumns)) {
             const ecs = await expandColumns();
-            this.children = (0, src_1.assignDefaultColumnIds)(ecs).map((ec) => this.states.addColumn(ec));
+            this.children = (0, columns_1.assignDefaultColumnIds)(ecs).map((ec) => this.states.addColumn(ec));
         }
         else if (expandColumns) {
             this.children = expandColumns.map((ec) => this.states.addColumn(ec));

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

@@ -9,12 +9,11 @@ import { SelectedState } from "./TableState";
  */
 export declare class RowState {
     private states;
+    parent: RowState | undefined;
     /** Our row, only ref observed, so we don't crawl into GraphQL fragments. */
     row: GridDataRow<any>;
     /** Our children row states, as of the latest `props.rows`, without any filtering applied. */
     children: RowState[] | undefined;
-    /** Whether we match a client-side filter; true if no filter is in place. */
-    isMatched: boolean;
     /** Whether we are *directly* selected. */
     selected: boolean;
     /** Whether we are collapsed. */
@@ -38,7 +37,14 @@ export declare class RowState {
      * actively removed.
      */
     removed: false | "soft" | "hard";
-    constructor(states: RowStates, row: GridDataRow<any>);
+    constructor(states: RowStates, parent: RowState | undefined, row: GridDataRow<any>);
+    /**
+     * Whether we match a client-side filter; true if no filter is in place.
+     *
+     * We should try and keep this based solely on "does/does not match the filter",
+     * and do any overrides for things like pinning/kept rows/etc. elsewhere.
+     */
+    get isMatched(): boolean;
     /**
      * Whether we are effectively selected, for `GridTableApi.getSelectedRows`.
      *
@@ -69,8 +75,13 @@ 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 level(): number;
     private get inferSelectedState();
+    /** Returns this row and, if we're not collapsed, our children. */
+    get selfAndMaybeChildren(): RowState[];
     private get visibleChildren();
+    /** The `visibleChildren`, but with the current sort config applied. */
+    private get visibleSortedChildren();
     /**
      * Returns whether this row should act like a parent.
      *
@@ -83,4 +94,11 @@ export declare class RowState {
      * they want the row to be selectable.
      */
     private get isParent();
+    private get isPinned();
+    get isReservedKind(): boolean;
+    /** A dedicated method to "looking down" recursively, to avoid loops in `isMatched`. */
+    private get hasDirectlyMatchedChildren();
+    /** A dedicated method to "looking up" recursively, to avoid loops in `isMatched`. */
+    private get hasDirectlyMatchedParent();
+    private get isDirectlyMatched();
 }

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

@@ -10,16 +10,12 @@ const utils_1 = require("./utils");
  * that uses parent/children easier to write, i.e. selected-ness and collapsed-ness.
  */
 class RowState {
-    // ...eventually...
-    // isDirectlyMatched = accept filters in the constructor and do match here
-    // isEffectiveMatched = isDirectlyMatched || hasMatchedChildren
-    constructor(states, row) {
+    constructor(states, parent, row) {
         var _a;
         this.states = states;
+        this.parent = parent;
         /** Our children row states, as of the latest `props.rows`, without any filtering applied. */
         this.children = undefined;
-        /** Whether we match a client-side filter; true if no filter is in place. */
-        this.isMatched = true;
         /** Whether we are *directly* selected. */
         this.selected = false;
         /** Whether we are collapsed. */
@@ -46,7 +42,20 @@ class RowState {
         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 });
+        (0, mobx_1.makeAutoObservable)(this, { row: mobx_1.observable.ref }, { name: `RowState@${row.id}` });
+    }
+    /**
+     * Whether we match a client-side filter; true if no filter is in place.
+     *
+     * We should try and keep this based solely on "does/does not match the filter",
+     * and do any overrides for things like pinning/kept rows/etc. elsewhere.
+     */
+    get isMatched() {
+        return (this.isDirectlyMatched ||
+            // A matched parent means show all it's children
+            this.hasDirectlyMatchedParent ||
+            // An unmatched parent but with matched children means show the parent
+            this.hasDirectlyMatchedChildren);
     }
     /**
      * Whether we are effectively selected, for `GridTableApi.getSelectedRows`.
@@ -135,23 +144,47 @@ class RowState {
         // - or it has (probably) been server-side filtered
         return (this.selected &&
             // Headers, totals, etc., do not need keeping
-            !utils_1.reservedRowKinds.includes(this.row.kind) &&
+            !this.isReservedKind &&
             !this.isParent &&
             (!this.isMatched || this.removed === "soft"));
     }
+    get level() {
+        // Make the header level -1, so the top-level rows are level 0
+        return !this.parent ? -1 : this.parent.level + 1;
+    }
     get inferSelectedState() {
         return this.row.inferSelectedState !== false;
     }
+    /** Returns this row and, if we're not collapsed, our children. */
+    get selfAndMaybeChildren() {
+        // The header always returns all children/top rows, even if collapsed
+        if (this.children && (!this.collapsed || this.row.kind === utils_1.HEADER)) {
+            return [this, ...this.visibleSortedChildren.flatMap((c) => c.selfAndMaybeChildren)];
+        }
+        else {
+            return [this];
+        }
+    }
     get visibleChildren() {
         var _a, _b;
         // The keptGroup is special and its children are the dynamically kept rows
         if (this.row.kind === utils_1.KEPT_GROUP)
             return this.states.keptRows;
-        // 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.
-        return (_b = (_a = this.children) === null || _a === void 0 ? void 0 : _a.filter((c) => c.isMatched === true && c.removed !== "hard")) !== null && _b !== void 0 ? _b : [];
+        return ((_b = (_a = this.children) === null || _a === void 0 ? void 0 : _a.filter((rs) => 
+        // Reserved rows are always visible, even though they're not considered matched.
+        // ...except for the kept group: its `isMatched` will become true whenever it has
+        // 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 : []);
+    }
+    /** The `visibleChildren`, but with the current sort config applied. */
+    get visibleSortedChildren() {
+        let rows = this.visibleChildren;
+        const { sortFn } = this.states.table;
+        // We need to make a copy for mobx to see the sort as a change, and also to not mutate
+        // the original/unsorted array if we need to revert to the original sort order.
+        if (sortFn)
+            rows = [...rows].sort(sortFn);
+        return rows;
     }
     /**
      * Returns whether this row should act like a parent.
@@ -167,9 +200,43 @@ class RowState {
     get isParent() {
         return !!this.children && this.children.length > 0 && this.inferSelectedState;
     }
-    /** Pretty toString. */
+    get isPinned() {
+        return typeof this.row.pin === "string" || (!!this.row.pin && this.row.pin.filter !== true);
+    }
+    get isReservedKind() {
+        return utils_1.reservedRowKinds.includes(this.row.kind);
+    }
+    /** A dedicated method to "looking down" recursively, to avoid loops in `isMatched`. */
+    get hasDirectlyMatchedChildren() {
+        // The keptGroup is special and its children are the dynamically kept rows
+        if (this.row.kind === utils_1.KEPT_GROUP)
+            return this.states.keptRows.length > 0;
+        return !!this.children && this.children.some((c) => c.isDirectlyMatched || c.hasDirectlyMatchedChildren);
+    }
+    /** A dedicated method to "looking up" recursively, to avoid loops in `isMatched`. */
+    get hasDirectlyMatchedParent() {
+        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)));
+    }
+    /** Used by node when doing `console.log(rs)`. */
     [Symbol.for("nodejs.util.inspect.custom")]() {
-        return `RowState ${this.row.kind}-${this.row.id}`;
+        return `RowState@${this.row.id}`;
     }
 }
 exports.RowState = RowState;

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

@@ -1,17 +1,19 @@
 import { GridDataRow } from "../components/Row";
 import { RowState } from "./RowState";
 import { RowStorage } from "./RowStorage";
+import { TableState } from "./TableState";
 /**
  * Manages our tree of observable RowStates that manage each GridDataRow's behavior.
  */
 export declare class RowStates {
     private map;
-    storage: RowStorage;
+    readonly table: TableState;
+    readonly storage: RowStorage;
+    private readonly header;
     private keptGroupRow;
-    private header;
     /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
     private topRows;
-    constructor();
+    constructor(table: TableState);
     /** Returns a flat list of all of our RowStates. */
     get allStates(): RowState[];
     /** Returns the `RowState` for the given `id`. We should probably require `kind`. */
@@ -26,10 +28,11 @@ export declare class RowStates {
     delete(ids: string[]): void;
     /** Implements special collapse behavior, which is just the header's collapse/uncollapse. */
     toggleCollapsed(id: string): void;
-    setMatchedRows(ids: string[]): void;
+    get visibleRows(): RowState[];
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows(): RowState[];
     get collapsedRows(): RowState[];
+    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

@@ -9,15 +9,19 @@ const utils_1 = require("./utils");
  * Manages our tree of observable RowStates that manage each GridDataRow's behavior.
  */
 class RowStates {
-    constructor() {
+    constructor(table) {
         // 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 = undefined;
+        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.map.set(this.header.row.id, this.header);
         this.map.set(this.keptGroupRow.row.id, this.keptGroupRow);
     }
     /** Returns a flat list of all of our RowStates. */
@@ -37,43 +41,50 @@ class RowStates {
      * Any missing rows are marked as `wasRemoved` so we can consider them "kept" if they're also selected.
      */
     setRows(rows) {
-        const existing = new Set(this.map.values());
         const states = this;
         const map = this.map;
-        function addRowAndChildren(row) {
+        // Keep track of ids as we add them, to detect duplicates
+        const seenIds = new Set();
+        // Keep track of existing rows, so we can mark any that are missing as removed
+        const maybeKept = new Set(this.map.values());
+        function addRowAndChildren(parent, row) {
             var _a;
-            // This should really be kind+id, but a lot of our lookups just use id
+            // This should really be kind+id, but nearly all of our existing API uses just ids,
+            // b/c we assume our ids are tagged/unique across parent/child kinds anyway. So go
+            // ahead and enforce "row.id must be unique across kinds" b/c pragmatically that is
+            // baked into the current API signatures.
             const key = row.id;
+            if (seenIds.has(key)) {
+                throw new Error(`Duplicate row id ${key}`);
+            }
+            else {
+                seenIds.add(key);
+            }
             let state = map.get(key);
             if (!state) {
-                state = new RowState_1.RowState(states, row);
+                state = new RowState_1.RowState(states, parent, row);
                 map.set(key, state);
             }
             else {
+                state.parent = parent;
                 state.row = row;
                 state.removed = false;
-                existing.delete(state);
+                maybeKept.delete(state);
             }
-            state.children = (_a = row.children) === null || _a === void 0 ? void 0 : _a.map((child) => addRowAndChildren(child));
+            state.children = (_a = row.children) === null || _a === void 0 ? void 0 : _a.map((child) => addRowAndChildren(state, child));
             return state;
         }
         // Probe for the header row, so we can create it as a root RowState, even
         // though we don't require the user to model their GridDataRows that way.
         const headerRow = rows.find((r) => r.kind === utils_1.HEADER);
-        this.header = headerRow ? addRowAndChildren(headerRow) : undefined;
+        this.header.row = headerRow || missingHeader;
         // Add the top-level rows
-        this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(row));
-        // And attach them to the header for select-all/etc. to work
-        if (this.header) {
-            this.header.children = [
-                // Always add the keptGroupRow, and we'll use keptGroupRow.isMatched=true/false to keep it
-                // from messing up "header is all selected" if its hidden/when there are no kept rows.
-                this.keptGroupRow,
-                ...this.topRows.filter((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind)),
-            ];
-        }
+        this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(this.header, row));
+        // Always add the keptGroupRow, and we'll use keptGroupRow.isMatched=true/false to keep it
+        // from messing up "header is all selected" if its hidden/when there are no kept rows.
+        this.header.children = [this.keptGroupRow, ...this.topRows];
         // Then mark any remaining as removed
-        for (const state of existing)
+        for (const state of maybeKept)
             state.markRemoved();
         // After the first load of real data, we detach collapse state, to respect
         // any incoming initCollapsed.
@@ -110,29 +121,24 @@ class RowStates {
         }
         else {
             rs.toggleCollapsed();
-            // The header might still be collapsed, even though the user has opened all the top-level rows
-            if (this.topRows.every((rs) => !rs.children || !rs.collapsed) && this.header) {
-                this.header.collapsed = false;
-            }
-            // Alternatively, if the user has collapsed all top-level rows, then collapse the header as well.
-            if (this.topRows.every((rs) => !rs.children || rs.collapsed) && this.header) {
-                this.header.collapsed = true;
+            // Ignore the kept group
+            const topGroupRows = this.topRows.filter((rs) => !rs.isReservedKind && rs.children);
+            if (topGroupRows.length > 0) {
+                // The header might still be collapsed, even though the user has opened all the top-level rows
+                if (topGroupRows.every((rs) => !rs.collapsed))
+                    this.header.collapsed = false;
+                // Alternatively, if the user has collapsed all top-level rows, then collapse the header as well.
+                if (topGroupRows.every((rs) => rs.collapsed))
+                    this.header.collapsed = true;
             }
         }
     }
-    setMatchedRows(ids) {
-        for (const rs of this.allStates) {
-            // Don't mark headers, kept rows, etc. as unmatched, b/c they will always be visible,
-            // i.e. the kept group row, if we've included it, is always matched.
-            if (!utils_1.reservedRowKinds.includes(rs.row.kind)) {
-                rs.isMatched = ids.includes(rs.row.id);
-            }
+    get visibleRows() {
+        const rows = this.header.selfAndMaybeChildren;
+        if (this.header.row === missingHeader) {
+            rows.splice(0, 1);
         }
-        // We cheat a little and pretend the "kept group matches the filter" not based on it itself
-        // literally matching the filter, or its children matching the filter (which is typically
-        // how the filter logic works), but if it just has any child rows at all (which actually means
-        // its children did _not_ match the filter, but are kept).
-        this.keptGroupRow.isMatched = this.keptRows.length > 0;
+        return rows;
     }
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows() {
@@ -141,8 +147,12 @@ class RowStates {
     get collapsedRows() {
         return this.allStates.filter((rs) => rs.collapsed);
     }
+    createHeaderRow() {
+        // We'll switch the rs.row from the `missingHeader` to the real header from the props.rows later
+        return new RowState_1.RowState(this, undefined, missingHeader);
+    }
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
-    createKeptGroupRow() {
+    createKeptGroupRow(header) {
         // The "group row" for selected rows that are hidden by filters and add the children
         const keptGroupRow = {
             id: utils_1.KEPT_GROUP,
@@ -151,11 +161,13 @@ class RowStates {
             selectable: false,
             data: undefined,
             children: [],
+            pin: { at: "first", filter: true },
         };
-        const rs = new RowState_1.RowState(this, keptGroupRow);
+        const rs = new RowState_1.RowState(this, header, keptGroupRow);
         // Make the RowState behave like a parent, even though we calc its visibleChildren.
         rs.children = [];
         return rs;
     }
 }
 exports.RowStates = RowStates;
+const missingHeader = { kind: "header", id: "header", data: undefined };

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowStorage = void 0;
 const mobx_1 = require("mobx");
-const src_1 = require("../../..");
+const utils_1 = require("./utils");
 /**
  * Manages loading/saving our currently-collapsed rows to session storage.
  *
@@ -20,7 +20,7 @@ class RowStorage {
     }
     load(persistCollapse) {
         // Load what our previously collapsed rows were
-        this.historicalIds = (0, src_1.loadArrayOrUndefined)(persistCollapse);
+        this.historicalIds = (0, utils_1.loadArrayOrUndefined)(persistCollapse);
         // And store new collapsed rows going forward
         (0, mobx_1.reaction)(() => this.states.collapsedRows.map((rs) => rs.row.id), (rowIds) => sessionStorage.setItem(persistCollapse, JSON.stringify(rowIds)));
     }

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

@@ -1,7 +1,9 @@
 import React from "react";
 import { GridDataRow } from "../components/Row";
 import { GridSortConfig } from "../GridTable";
+import { GridTableApi } from "../GridTableApi";
 import { Direction, GridColumnWithId } from "../types";
+import { RowState } from "./RowState";
 export type SelectedState = "checked" | "unchecked" | "partial";
 /**
  * Stores the collapsed & selected state of rows.
@@ -22,10 +24,13 @@ export declare class TableState {
     private persistCollapse;
     private rows;
     columns: GridColumnWithId<any>[];
+    readonly api: GridTableApi<any>;
     private readonly rowStates;
     private readonly columnStates;
     activeRowId: string | undefined;
     activeCellId: string | undefined;
+    /** Stores the current client-side type-ahead search/filter. */
+    search: string[];
     sortConfig: GridSortConfig | undefined;
     sort: SortState;
     private initialSortState;
@@ -33,13 +38,17 @@ export declare class TableState {
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor();
+    constructor(api: GridTableApi<any>);
     loadCollapse(persistCollapse: string): void;
     initSortState(sortConfig: GridSortConfig | undefined, columns: GridColumnWithId<any>[]): 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;
+    setSearch(search: string | undefined): void;
+    get visibleRows(): RowState[];
     /** Returns visible columns, i.e. those that are visible + any expanded children. */
     get visibleColumns(): GridColumnWithId<any>[];
     /** Implements GridTableApi.visibleColumnIds. */
@@ -50,8 +59,6 @@ export declare class TableState {
     toggleExpandedColumn(columnId: string): void;
     numberOfExpandedChildren(columnId: string): number;
     loadExpandedColumns(columnId: string): Promise<void>;
-    /** Called when GridTable has re-calced the rows that pass the client-side filter, or all rows. */
-    setMatchedRows(rowIds: string[]): void;
     /** Returns selected data rows (non-header, non-totals, etc.), ignoring rows that have `row.selectable !== false`. */
     get selectedRows(): GridDataRow<any>[];
     /** Returns kept group row, with the latest kept children, if any. */

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.deriveSortState = exports.TableStateContext = exports.TableState = void 0;
 const mobx_1 = require("mobx");
 const react_1 = __importDefault(require("react"));
+const components_1 = require("../..");
 const ColumnStates_1 = require("./ColumnStates");
 const RowStates_1 = require("./RowStates");
 const utils_1 = require("./utils");
@@ -28,26 +29,30 @@ class TableState {
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor() {
+    constructor(api) {
         // The current list of rows, basically a useRef.current. Only shallow reactive.
         this.rows = [];
         // The current list of columns, basically a useRef.current. Only ref reactive.
         this.columns = [];
-        this.rowStates = new RowStates_1.RowStates();
+        this.rowStates = new RowStates_1.RowStates(this);
         this.columnStates = new ColumnStates_1.ColumnStates();
         // Keeps track of the 'active' row, formatted `${row.kind}_${row.id}`
         this.activeRowId = undefined;
         // Keeps track of the 'active' cell, formatted `${row.kind}_${row.id}_${column.name}`
         this.activeCellId = undefined;
+        /** Stores the current client-side type-ahead search/filter. */
+        this.search = [];
         // Tracks the active sort column(s), so GridTable or SortHeaders can reactively
         // re-render (for GridTable, only if client-side sorting)
         this.sort = {};
+        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.
         (0, mobx_1.makeAutoObservable)(this, {
             // We use `ref`s so that observables can watch the immutable data change w/o deeply proxy-ifying Apollo fragments
             rows: mobx_1.observable.ref,
             columns: mobx_1.observable.ref,
+            search: mobx_1.observable.ref,
         });
         // If the kept rows went from empty to not empty, then introduce the SELECTED_GROUP row as collapsed
         (0, mobx_1.reaction)(() => [...this.keptRows.values()], (curr, prev) => {
@@ -113,6 +118,15 @@ class TableState {
     get sortState() {
         return this.sort.current ? this.sort : undefined;
     }
+    /** Returns a client-side sort function, if applicable. */
+    get sortFn() {
+        const { sortState, sortConfig, visibleColumns } = this;
+        if (!sortState || (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on) !== "client")
+            return undefined;
+        // sortRows.ts wants to sort based on the GridDataRow, so make a small `rowStateFn` adapter
+        const dataRowFn = (0, components_1.sortFn)(visibleColumns, sortState, !!sortConfig.caseSensitive);
+        return (a, b) => dataRowFn(a.row, b.row);
+    }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
         if (rows !== this.rows) {
@@ -126,6 +140,13 @@ class TableState {
             this.columns = columns;
         }
     }
+    setSearch(search) {
+        // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
+        this.search = (search && search.split(/ +/)) || [];
+    }
+    get visibleRows() {
+        return this.rowStates.visibleRows;
+    }
     /** Returns visible columns, i.e. those that are visible + any expanded children. */
     get visibleColumns() {
         return this.columnStates.allVisibleColumns.map((cs) => cs.column);
@@ -154,10 +175,6 @@ class TableState {
     loadExpandedColumns(columnId) {
         return this.columnStates.get(columnId).doExpand();
     }
-    /** Called when GridTable has re-calced the rows that pass the client-side filter, or all rows. */
-    setMatchedRows(rowIds) {
-        this.rowStates.setMatchedRows(rowIds);
-    }
     /** Returns selected data rows (non-header, non-totals, etc.), ignoring rows that have `row.selectable !== false`. */
     get selectedRows() {
         return this.rowStates.allStates

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

@@ -4,4 +4,6 @@ import { GridDataRow } from "../components/Row";
 import { GridColumnWithId, Kinded } from "../types";
 import { SortOn, SortState } from "./TableState";
 export declare function sortRows<R extends Kinded>(columns: GridColumnWithId<R>[], rows: GridDataRow<R>[], sortState: SortState, caseSensitive: boolean): GridDataRow<R>[];
+/** Creates a comparator for two GridDataRows based on the current sortState. */
+export declare function sortFn<R extends Kinded>(columns: GridColumnWithId<R>[], sortState: SortState, caseSensitive: boolean): (a: GridDataRow<R>, b: GridDataRow<R>) => number;
 export declare function ensureClientSideSortValueIsSortable(sortOn: SortOn, isHeader: boolean, column: GridColumnWithId<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

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

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensureClientSideSortValueIsSortable = exports.sortRows = void 0;
+exports.ensureClientSideSortValueIsSortable = exports.sortFn = exports.sortRows = void 0;
 const utils_1 = require("./utils");
 // Returns a shallow copy of the `rows` parameter sorted based on `sortState`
+// We really only use this for tests; in production the RowState.visibleSortedChildren uses the sortFn
 function sortRows(columns, rows, sortState, caseSensitive) {
-    const sorted = sortBatch(columns, rows, sortState, caseSensitive);
+    const fn = sortFn(columns, sortState, caseSensitive);
+    // Sort this level first
+    const sorted = [...rows].sort(fn);
     // Recursively sort child rows
     sorted.forEach((row, i) => {
         if (row.children) {
@@ -14,7 +17,8 @@ function sortRows(columns, rows, sortState, caseSensitive) {
     return sorted;
 }
 exports.sortRows = sortRows;
-function sortBatch(columns, batch, sortState, caseSensitive) {
+/** Creates a comparator for two GridDataRows based on the current sortState. */
+function sortFn(columns, sortState, caseSensitive) {
     // When client-side sort, the sort value is the column index
     const { current, persistent } = sortState !== null && sortState !== void 0 ? sortState : {};
     const { columnId, direction } = current !== null && current !== void 0 ? current : {};
@@ -23,8 +27,7 @@ function sortBatch(columns, batch, sortState, caseSensitive) {
     const invert = direction === "DESC";
     const primaryInvert = persistentSortDirection === "DESC";
     const primaryColumn = persistentSortColumnId && columns.find((c) => c.id === persistentSortColumnId);
-    // Make a shallow copy for sorting to avoid mutating the original list
-    return [...batch].sort((a, b) => {
+    return (a, b) => {
         if (a.pin || b.pin) {
             // If both rows are pinned, we don't sort within them, because by pinning the page is taking
             // explicit ownership over the order of the rows (and we also don't support "levels of pins",
@@ -39,13 +42,14 @@ function sortBatch(columns, batch, sortState, caseSensitive) {
             // When primary key exist sort that priority first
             const primaryCompare = compare(primaryColumn, a, b, primaryInvert, caseSensitive);
             // if both rows are not primary sort equivalent
-            if (primaryCompare !== 0) {
+            if (primaryCompare !== 0)
                 return primaryCompare;
-            }
+            // Fall through to the secondary sort
         }
         return column ? compare(column, a, b, invert, caseSensitive) : 0;
-    });
+    };
 }
+exports.sortFn = sortFn;
 function getPin(pin) {
     return typeof pin === "string" ? pin : pin === null || pin === void 0 ? void 0 : pin.at;
 }

package/package.json

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