@homebound/beam 2.302.1 → 2.303.0

package/dist/components/Table/GridTable.js

@@ -232,7 +232,9 @@ function GridTable(props) {
     if (tooManyClientSideRows) {
         visibleDataRows = visibleDataRows.slice(0, filterMaxRows + keptSelectedRows.length);
     }
-    tableState.setMatchedRows(filteredRowIds);
+    (0, react_1.useEffect)(() => {
+        tableState.setMatchedRows(filteredRowIds);
+    }, [tableState, filteredRowIds]);
     // Push back to the caller a way to ask us where a row is.
     const { rowLookup } = props;
     if (rowLookup) {

package/dist/components/Table/GridTableApi.js

@@ -31,7 +31,8 @@ class GridTableApiImpl {
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */
     init(persistCollapse, virtuosoRef, rows) {
-        this.tableState.loadCollapse(persistCollapse, rows);
+        if (persistCollapse)
+            this.tableState.loadCollapse(persistCollapse);
         this.virtuosoRef = virtuosoRef;
     }
     scrollToIndex(index) {

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

@@ -1,4 +1,5 @@
 import { GridDataRow, SelectedState } from "../../..";
+import { RowStates } from "./RowStates";
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -8,19 +9,36 @@ import { GridDataRow, SelectedState } from "../../..";
 export declare class RowState {
     /** Our row, only ref observed, so we don't crawl into GraphQL fragments. */
     row: GridDataRow<any>;
-    /** Our parent RowState, or the `header` RowState if we're a top-level row. */
-    parent: RowState | undefined;
     /** 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 our `row` had been in `props.rows`, but was removed, i.e. probably by server-side filters. */
-    wasRemoved: boolean;
-    constructor(parent: RowState | undefined, row: GridDataRow<any>);
+    /** Whether we are collapsed. */
+    collapsed: boolean;
     /**
-     * Whether we are currently selected, for `GridTableApi.getSelectedRows`.
+     * Whether our `row` had been in `props.rows`, but then removed _while being
+     * selected_, i.e. potentially by server-side filters.
+     *
+     * We have had a large foot-gun where users "select a row", change the filters,
+     * the row disappears (filtered out), and the user clicks "Go!", but the table
+     * thinks their previously-selected row is gone (b/c it's not in view), and
+     * then the row is inappropriately deleted/unassociated/etc. (b/c in the user's
+     * head, it is "still selected").
+     *
+     * To avoid this, we by default keep selected rows, as "kept rows", to make
+     * extra sure the user wants them to go away.
+     *
+     * Soft-deleted rows are rows that were removed from `props.rows` (i.e. we
+     * suspect are just hidden by a changed server-side-filter), and hard-deleted
+     * rows are rows the page called `api.deleteRow` and confirmed it should be
+     * actively removed.
+     */
+    removed: false | "soft" | "hard";
+    constructor(states: RowStates, row: GridDataRow<any>);
+    /**
+     * Whether we are effectively selected, for `GridTableApi.getSelectedRows`.
      *
      * Note that we don't use "I'm selected || my parent is selected" logic here, because whether a child is selected
      * is actually based on whether it was _visible at the time the parent was selected_. So, we can't just assume
@@ -44,6 +62,9 @@ export declare class RowState {
      * child of a selected parent row.
      */
     select(selected: boolean): void;
+    /** Marks the row as removed from `props.rows`, to potentially become kept. */
+    markRemoved(): void;
+    toggleCollapsed(): void;
     /** Whether this is a selected-but-filtered-out row that we should hoist to the top. */
     get isKept(): boolean;
     private get inferSelectedState();

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

@@ -13,22 +13,42 @@ class RowState {
     // ...eventually...
     // isDirectlyMatched = accept filters in the constructor and do match here
     // isEffectiveMatched = isDirectlyMatched || hasMatchedChildren
-    constructor(parent, row) {
+    constructor(states, row) {
+        var _a;
         /** 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 our `row` had been in `props.rows`, but was removed, i.e. probably by server-side filters. */
-        this.wasRemoved = false;
-        this.parent = parent;
+        /** Whether we are collapsed. */
+        this.collapsed = false;
+        /**
+         * Whether our `row` had been in `props.rows`, but then removed _while being
+         * selected_, i.e. potentially by server-side filters.
+         *
+         * We have had a large foot-gun where users "select a row", change the filters,
+         * the row disappears (filtered out), and the user clicks "Go!", but the table
+         * thinks their previously-selected row is gone (b/c it's not in view), and
+         * then the row is inappropriately deleted/unassociated/etc. (b/c in the user's
+         * head, it is "still selected").
+         *
+         * To avoid this, we by default keep selected rows, as "kept rows", to make
+         * extra sure the user wants them to go away.
+         *
+         * Soft-deleted rows are rows that were removed from `props.rows` (i.e. we
+         * suspect are just hidden by a changed server-side-filter), and hard-deleted
+         * rows are rows the page called `api.deleteRow` and confirmed it should be
+         * actively removed.
+         */
+        this.removed = 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 });
     }
     /**
-     * Whether we are currently selected, for `GridTableApi.getSelectedRows`.
+     * Whether we are effectively selected, for `GridTableApi.getSelectedRows`.
      *
      * Note that we don't use "I'm selected || my parent is selected" logic here, because whether a child is selected
      * is actually based on whether it was _visible at the time the parent was selected_. So, we can't just assume
@@ -99,6 +119,16 @@ class RowState {
             }
         }
     }
+    /** Marks the row as removed from `props.rows`, to potentially become kept. */
+    markRemoved() {
+        // The kept group is never in `props.rows`, so ignore asks to delete it
+        if (this.row.kind === src_1.KEPT_GROUP)
+            return;
+        this.removed = this.selected && this.removed !== "hard" ? "soft" : "hard";
+    }
+    toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+    }
     /** Whether this is a selected-but-filtered-out row that we should hoist to the top. */
     get isKept() {
         // this row is "kept" if it is selected, and:
@@ -108,7 +138,7 @@ class RowState {
             // Headers, totals, etc., do not need keeping
             !src_1.reservedRowKinds.includes(this.row.kind) &&
             !this.isParent &&
-            (!this.isMatched || this.wasRemoved));
+            (!this.isMatched || this.removed === "soft"));
     }
     get inferSelectedState() {
         return this.row.inferSelectedState !== false;
@@ -118,7 +148,11 @@ class RowState {
         // The keptGroup should treat all of its children as visible, as this makes select/unselect all work.
         if (this.row.kind === src_1.KEPT_GROUP)
             return (_a = this.children) !== null && _a !== void 0 ? _a : [];
-        return (_c = (_b = this.children) === null || _b === void 0 ? void 0 : _b.filter((c) => c.isMatched === true)) !== null && _c !== void 0 ? _c : [];
+        // 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 (_c = (_b = this.children) === null || _b === void 0 ? void 0 : _b.filter((c) => c.isMatched === true && c.removed !== "hard")) !== null && _c !== void 0 ? _c : [];
     }
     /**
      * Returns whether this row should act like a parent.

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

@@ -1,11 +1,17 @@
-import { GridDataRow } from "../../..";
+import { GridDataRow } from "../components/Row";
 import { RowState } from "./RowState";
+import { RowStorage } from "./RowStorage";
 /**
  * Manages our tree of observable RowStates that manage each GridDataRow's behavior.
  */
 export declare class RowStates {
     private map;
-    keptGroupRow: RowState;
+    storage: RowStorage;
+    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();
     /** Returns a flat list of all of our RowStates. */
     get allStates(): RowState[];
     /** Returns the `RowState` for the given `id`. We should probably require `kind`. */
@@ -18,7 +24,12 @@ export declare class RowStates {
     setRows(rows: GridDataRow<any>[]): 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;
     setMatchedRows(ids: string[]): void;
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows(): RowState[];
+    get collapsedRows(): RowState[];
+    /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
+    private creatKeptGroupRow;
 }

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

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowStates = void 0;
 const mobx_1 = require("mobx");
-const src_1 = require("../../..");
 const RowState_1 = require("./RowState");
+const RowStorage_1 = require("./RowStorage");
+const utils_1 = require("./utils");
 /**
  * Manages our tree of observable RowStates that manage each GridDataRow's behavior.
  */
@@ -11,8 +12,13 @@ class RowStates {
     constructor() {
         // A flat map of all row id -> RowState
         this.map = new mobx_1.ObservableMap();
+        this.storage = new RowStorage_1.RowStorage(this);
         // Pre-create our keptGroupRow for if/when we need it.
-        this.keptGroupRow = creatKeptGroupRow();
+        this.keptGroupRow = this.creatKeptGroupRow();
+        this.header = undefined;
+        /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
+        this.topRows = [];
+        this.map.set(this.keptGroupRow.row.id, this.keptGroupRow);
     }
     /** Returns a flat list of all of our RowStates. */
     get allStates() {
@@ -32,77 +38,115 @@ class RowStates {
      */
     setRows(rows) {
         const existing = new Set(this.map.values());
+        const states = this;
         const map = this.map;
-        function addRowAndChildren(parent, row) {
+        function addRowAndChildren(row) {
             var _a;
             // This should really be kind+id, but a lot of our lookups just use id
             const key = row.id;
             let state = map.get(key);
             if (!state) {
-                state = new RowState_1.RowState(parent, row);
+                state = new RowState_1.RowState(states, row);
                 map.set(key, state);
             }
             else {
-                state.parent = parent;
                 state.row = row;
-                state.wasRemoved = false;
+                state.removed = false;
                 existing.delete(state);
             }
-            state.children = (_a = row.children) === null || _a === void 0 ? void 0 : _a.map((child) => addRowAndChildren(state, child));
+            state.children = (_a = row.children) === null || _a === void 0 ? void 0 : _a.map((child) => addRowAndChildren(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 header = rows.find((r) => r.kind === src_1.HEADER);
-        const headerState = header ? addRowAndChildren(undefined, header) : undefined;
+        const headerRow = rows.find((r) => r.kind === utils_1.HEADER);
+        this.header = headerRow ? addRowAndChildren(headerRow) : undefined;
         // Add the top-level rows
-        const children = rows.filter((row) => row !== header).map((row) => addRowAndChildren(headerState, row));
+        this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(row));
         // And attach them to the header for select-all/etc. to work
-        if (headerState) {
-            headerState.children = children.filter((rs) => !src_1.reservedRowKinds.includes(rs.row.kind));
+        if (this.header) {
+            this.header.children = this.topRows.filter((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind));
         }
         // Then mark any remaining as removed
-        for (const state of existing) {
-            state.wasRemoved = true;
-        }
+        for (const state of existing)
+            state.markRemoved();
         const keptRows = this.keptRows;
         if (keptRows.length > 0) {
             // Stitch the current keptRows into the placeholder keptGroupRow
-            keptRows.forEach((rs) => (rs.parent = this.keptGroupRow));
             this.keptGroupRow.children = keptRows;
             this.keptGroupRow.row.children = keptRows.map((rs) => rs.row);
             // And then stitch the keptGroupRow itself into the root header, so that the kept rows
             // are treated as just another child for the header's select/unselect all to work.
-            if (headerState) {
-                this.keptGroupRow.parent = headerState;
-                headerState.children.unshift(this.keptGroupRow);
+            if (this.header) {
+                this.header.children.unshift(this.keptGroupRow);
             }
         }
+        // After the first load of real data, we detach collapse state, to respect
+        // any incoming initCollapsed.
+        if (this.topRows.some((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind))) {
+            this.storage.done();
+        }
     }
     /** Fully delete `ids`, so they don't show up in kept rows anymore. */
     delete(ids) {
-        var _a;
         for (const id of ids) {
             const rs = this.map.get(id);
-            if (rs && rs.parent) {
-                rs.parent.children = (_a = rs.parent.children) === null || _a === void 0 ? void 0 : _a.filter((o) => o !== rs);
-            }
+            if (rs)
+                rs.removed = "hard";
             this.map.delete(id);
         }
     }
+    /** Implements special collapse behavior, which is just the header's collapse/uncollapse. */
+    toggleCollapsed(id) {
+        const rs = this.get(id);
+        if (rs === this.header) {
+            if (rs.collapsed) {
+                // The header being "opened" opens everything
+                for (const rs of this.allStates)
+                    rs.collapsed = false;
+            }
+            else {
+                // The header being "closed" marks all non-leaf rows as collapsed,
+                // so that when the user re-opens them, they open a level at a time.
+                for (const rs of this.allStates) {
+                    if (rs.children)
+                        rs.collapsed = true;
+                }
+            }
+        }
+        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;
+            }
+        }
+    }
     setMatchedRows(ids) {
         for (const rs of this.allStates) {
-            rs.isMatched = ids.includes(rs.row.id);
+            // 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);
+            }
         }
     }
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows() {
         return this.allStates.filter((rs) => rs.isKept);
     }
+    get collapsedRows() {
+        return this.allStates.filter((rs) => rs.collapsed);
+    }
+    /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
+    creatKeptGroupRow() {
+        // The "group row" for selected rows that are hidden by filters and add the children
+        const keptGroupRow = { id: utils_1.KEPT_GROUP, kind: utils_1.KEPT_GROUP, initCollapsed: true, data: undefined };
+        return new RowState_1.RowState(this, keptGroupRow);
+    }
 }
 exports.RowStates = RowStates;
-function creatKeptGroupRow() {
-    // The "group row" for selected rows that are hidden by filters and add the children
-    const keptGroupRow = { id: src_1.KEPT_GROUP, kind: src_1.KEPT_GROUP, initCollapsed: true, data: undefined };
-    return new RowState_1.RowState(undefined, keptGroupRow);
-}

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

@@ -0,0 +1,27 @@
+import { RowStates } from "./RowStates";
+/**
+ * Manages loading/saving our currently-collapsed rows to session storage.
+ *
+ * This is useful for pages that the user has to go in-out/out-of a lot, and
+ * want it to restore, as much as possible, like their previous visit. Granted,
+ * we try to superdrawer most of these experiences to avoid the user having to
+ * jump off-page.
+ *
+ * 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 {
+    private states;
+    private historicalIds;
+    constructor(states: RowStates);
+    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;
+    /**
+     * Returns if this row had been collapsed.
+     *
+     * Technically we return `undefined` if a) there is no persisted state for this row, or b) we are
+     * past the first real-data load, and thus should prefer new incoming rows' `initCollapsed` flag.
+     */
+    wasCollapsed(id: string): boolean | undefined;
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowStorage = void 0;
+const mobx_1 = require("mobx");
+/**
+ * Manages loading/saving our currently-collapsed rows to session storage.
+ *
+ * This is useful for pages that the user has to go in-out/out-of a lot, and
+ * want it to restore, as much as possible, like their previous visit. Granted,
+ * we try to superdrawer most of these experiences to avoid the user having to
+ * jump off-page.
+ *
+ * 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.
+ */
+class RowStorage {
+    constructor(states) {
+        this.states = states;
+    }
+    load(persistCollapse) {
+        // Load what our previously collapsed rows were
+        const ids = sessionStorage.getItem(persistCollapse);
+        if (ids) {
+            this.historicalIds = JSON.parse(ids);
+        }
+        // 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)));
+    }
+    /** Once the first real-data load is done, we ignore historical ids so that we prefer any new data's `initCollapsed`. */
+    done() {
+        this.historicalIds = undefined;
+    }
+    /**
+     * Returns if this row had been collapsed.
+     *
+     * Technically we return `undefined` if a) there is no persisted state for this row, or b) we are
+     * past the first real-data load, and thus should prefer new incoming rows' `initCollapsed` flag.
+     */
+    wasCollapsed(id) {
+        var _a;
+        return (_a = this.historicalIds) === null || _a === void 0 ? void 0 : _a.includes(id);
+    }
+}
+exports.RowStorage = RowStorage;

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

@@ -20,9 +20,8 @@ export type SelectedState = "checked" | "unchecked" | "partial";
  * changes.
  */
 export declare class TableState {
-    private readonly collapsedRows;
     private persistCollapse;
-    rows: GridDataRow<any>[];
+    private rows;
     private readonly rowStates;
     activeRowId: string | undefined;
     activeCellId: string | undefined;
@@ -39,7 +38,7 @@ export declare class TableState {
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor();
-    loadCollapse(persistCollapse: string | undefined, rows: GridDataRow<any>[]): void;
+    loadCollapse(persistCollapse: string): void;
     initSortState(sortConfig: GridSortConfig | undefined, columns: GridColumnWithId<any>[]): void;
     setSortKey(clickedColumnId: string): void;
     get sortState(): SortState | undefined;

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

@@ -31,8 +31,6 @@ class TableState {
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor() {
-        // A set of just row ids, i.e. not row.kind+row.id
-        this.collapsedRows = new mobx_1.ObservableSet([]);
         // The current list of rows, basically a useRef.current. Only shallow reactive.
         this.rows = [];
         this.rowStates = new RowStates_1.RowStates();
@@ -67,23 +65,13 @@ class TableState {
         // 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) => {
             if (prev.length === 0 && curr.length > 0) {
-                this.collapsedRows.add(utils_1.KEPT_GROUP);
+                this.rowStates.get(utils_1.KEPT_GROUP).collapsed = true;
             }
         });
     }
-    loadCollapse(persistCollapse, rows) {
+    loadCollapse(persistCollapse) {
         this.persistCollapse = persistCollapse;
-        const sessionStorageIds = persistCollapse ? sessionStorage.getItem(persistCollapse) : null;
-        // Initialize with our collapsed rows based on what is in sessionStorage. Otherwise check if any rows have been defined as collapsed
-        const collapsedGridRowIds = sessionStorageIds ? JSON.parse(sessionStorageIds) : getCollapsedIdsFromRows(rows);
-        // If we have some initial rows to collapse, then set the internal prop
-        if (collapsedGridRowIds.length > 0) {
-            this.collapsedRows.replace(collapsedGridRowIds);
-            // If `persistCollapse` is set, but sessionStorageIds was not defined, then add them now.
-            if (this.persistCollapse && !sessionStorageIds) {
-                sessionStorage.setItem(this.persistCollapse, JSON.stringify(collapsedGridRowIds));
-            }
-        }
+        this.rowStates.storage.load(persistCollapse);
     }
     initSortState(sortConfig, columns) {
         var _a, _b;
@@ -139,36 +127,10 @@ class TableState {
     }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
-        // If the set of rows are different
         if (rows !== this.rows) {
             this.rowStates.setRows(rows);
-            const currentCollapsedIds = this.collapsedIds;
-            // Create a list of the (maybe) new rows that should be initially collapsed
-            const maybeNewCollapsedRowIds = flattenRows(rows)
-                .filter((r) => r.initCollapsed)
-                .map((r) => r.id);
-            // Check against local storage for collapsed state only if this is the first render of "data" (non-header or totals) rows.
-            const checkLocalStorage = this.persistCollapse && !this.rows.some((r) => r.kind !== "totals" && r.kind !== "header");
-            // If the list of collapsed rows are different, then determine which are net-new rows and should be added to the newCollapsedIds array
-            if (currentCollapsedIds.length !== maybeNewCollapsedRowIds.length ||
-                !currentCollapsedIds.every((id) => maybeNewCollapsedRowIds.includes(id))) {
-                // Flatten out the existing rows to make checking for new rows easier
-                const flattenedExistingIds = flattenRows(this.rows).map((r) => r.id);
-                const newCollapsedIds = maybeNewCollapsedRowIds.filter((maybeNewRowId) => !flattenedExistingIds.includes(maybeNewRowId) &&
-                    // Using `!` on `this.persistCollapse!` as `checkLocalStorage` ensures this.persistCollapse is truthy
-                    (!checkLocalStorage || readCollapsedRowStorage(this.persistCollapse).includes(maybeNewRowId)));
-                // If there are new rows that should be collapsed then update the collapsedRows arrays
-                if (newCollapsedIds.length > 0) {
-                    this.collapsedRows.replace(currentCollapsedIds.concat(newCollapsedIds));
-                    // Also update our persistCollapse if set
-                    if (this.persistCollapse) {
-                        sessionStorage.setItem(this.persistCollapse, JSON.stringify(currentCollapsedIds.concat(newCollapsedIds)));
-                    }
-                }
-            }
+            this.rows = rows;
         }
-        // Finally replace our existing list of rows
-        this.rows = rows;
     }
     setColumns(columns, visibleColumnsStorageKey) {
         const isInitial = !this.columns || this.columns.length === 0;
@@ -290,7 +252,7 @@ class TableState {
     }
     /** Returns kept group row, with the latest kept children, if any. */
     get keptRowGroup() {
-        return this.rowStates.keptGroupRow.row;
+        return this.rowStates.get(utils_1.KEPT_GROUP).row;
     }
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows() {
@@ -299,77 +261,25 @@ class TableState {
     // Should be called in an Observer/useComputed to trigger re-renders
     getSelected(id) {
         const rs = this.rowStates.get(id);
+        // The header has special behavior to "see through" selectable parents
         return id === utils_1.HEADER ? rs.selectedStateForHeader : rs.selectedState;
     }
     selectRow(id, selected) {
         this.rowStates.get(id).select(selected);
     }
     get collapsedIds() {
-        return [...this.collapsedRows.values()];
+        return this.rowStates.collapsedRows.map((rs) => rs.row.id);
     }
     // Should be called in an Observer/useComputed to trigger re-renders
     isCollapsed(id) {
-        return this.collapsedRows.has(id);
+        return this.rowStates.get(id).collapsed;
     }
     toggleCollapsed(id) {
-        const collapsedIds = [...this.collapsedRows.values()];
-        // We have different behavior when going from expand/collapse all.
-        if (id === "header") {
-            const isAllCollapsed = collapsedIds.includes("header");
-            if (isAllCollapsed) {
-                // Expand all means keep `collapsedIds` empty
-                collapsedIds.splice(0, collapsedIds.length);
-            }
-            else {
-                // Otherwise push `header` and `selectedGroup` to the list as a hint that we're in the collapsed-all state
-                collapsedIds.push(utils_1.HEADER, utils_1.KEPT_GROUP);
-                // Find all non-leaf rows so that toggling "all collapsed" -> "all not collapsed" opens
-                // the parent rows of any level.
-                const parentIds = new Set();
-                const todo = [...this.rows];
-                while (todo.length > 0) {
-                    const r = todo.pop();
-                    if (r.children) {
-                        parentIds.add(r.id);
-                        todo.push(...r.children);
-                    }
-                }
-                // And then mark all parent rows as collapsed.
-                collapsedIds.push(...parentIds);
-            }
-        }
-        else {
-            // This is the regular/non-header behavior to just add/remove the individual row id
-            const i = collapsedIds.indexOf(id);
-            if (i === -1) {
-                collapsedIds.push(id);
-            }
-            else {
-                collapsedIds.splice(i, 1);
-            }
-            // TODO: Need to handle the kept selected group row.
-            // If all rows have been expanded individually, but the 'header' was collapsed, then remove the header from the collapsedIds so it reverts to the expanded state
-            if (collapsedIds.length === 1 && collapsedIds[0] === "header") {
-                collapsedIds.splice(0, 1);
-            }
-            else {
-                // If every top level child has been collapsed, then push "header" into the array to be considered collapsed as well.
-                if (this.rows.every((maybeParent) => (maybeParent.children ? collapsedIds.includes(maybeParent.id) : true))) {
-                    collapsedIds.push("header");
-                }
-            }
-        }
-        this.collapsedRows.replace(collapsedIds);
-        if (this.persistCollapse) {
-            sessionStorage.setItem(this.persistCollapse, JSON.stringify(collapsedIds));
-        }
+        this.rowStates.toggleCollapsed(id);
     }
     deleteRows(ids) {
         this.rows = this.rows.filter((row) => !ids.includes(row.id));
         this.rowStates.delete(ids);
-        ids.forEach((id) => {
-            this.collapsedRows.delete(id);
-        });
     }
 }
 exports.TableState = TableState;
@@ -380,10 +290,6 @@ exports.TableStateContext = react_1.default.createContext({
         throw new Error("No TableStateContext provider");
     },
 });
-function readCollapsedRowStorage(persistCollapse) {
-    const collapsedGridRowIds = sessionStorage.getItem(persistCollapse);
-    return collapsedGridRowIds ? JSON.parse(collapsedGridRowIds) : [];
-}
 function readExpandedColumnsStorage(persistCollapse) {
     const expandedGridColumnIds = sessionStorage.getItem(getColumnStorageKey(persistCollapse));
     return expandedGridColumnIds ? JSON.parse(expandedGridColumnIds) : [];
@@ -398,21 +304,6 @@ function readOrSetLocalVisibleColumnState(columns, storageKey) {
     sessionStorage.setItem(storageKey, JSON.stringify(visibleColumnIds));
     return visibleColumnIds;
 }
-function getCollapsedIdsFromRows(rows) {
-    return rows.reduce((acc, r) => {
-        if (r.initCollapsed) {
-            acc.push(r.id);
-        }
-        if (r.children) {
-            acc.push(...getCollapsedIdsFromRows(r.children));
-        }
-        return acc;
-    }, []);
-}
-function flattenRows(rows) {
-    const childRows = rows.flatMap((r) => (r.children ? flattenRows(r.children) : []));
-    return [...rows, ...childRows];
-}
 function getColumnStorageKey(storageKey) {
     return `expandedColumn_${storageKey}`;
 }

package/package.json

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