@homebound/beam 2.302.2 → 2.304.0

package/dist/components/Table/GridTable.js

@@ -99,17 +99,21 @@ function GridTable(props) {
         api.init(persistCollapse, virtuosoRef, rows);
         api.setActiveRowId(activeRowId);
         api.setActiveCellId(activeCellId);
+        // Push the initial columns directly into tableState, b/c that is what
+        // makes the tests pass, but then further updates we'll do through useEffect
+        // to avoid "Cannot update component during render" errors.
+        api.tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
         return api;
     }, [props.api]);
     const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
     const { tableState } = api;
     tableState.setRows(rows);
-    tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
-    const columns = (0, hooks_1.useComputed)(() => tableState.columns
-        .filter((c) => tableState.visibleColumnIds.includes(c.id))
-        .flatMap((c) => c.expandColumns && tableState.expandedColumnIds.includes(c.id)
-        ? [c, ...tableState.getExpandedColumns(c)]
-        : [c]), [tableState]);
+    (0, react_1.useEffect)(() => {
+        tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
+    }, [tableState, columnsWithIds, visibleColumnsStorageKey]);
+    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);
@@ -128,6 +132,7 @@ function GridTable(props) {
     // (or us) is resetting component state more than necessary, so we track render counts from
     // here instead.
     const { getCount } = (0, useRenderCount_1.useRenderCount)();
+    // 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.

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

@@ -22,28 +22,30 @@ export declare function useGridTableApi<R extends Kinded>(): GridTableApi<R>;
 /** Provides an imperative API for an application page to interact with the table. */
 export type GridTableApi<R extends Kinded> = {
     /** Scrolls row `index` into view; only supported with `as=virtual` and after a `useEffect`. */
-    scrollToIndex: (index: number) => void;
+    scrollToIndex(index: number): void;
     /** Returns the ids of currently-selected rows. */
     getSelectedRowIds(): string[];
     getSelectedRowIds<K extends R["kind"]>(kind: K): string[];
     /** Returns the currently-selected rows. */
     getSelectedRows(): GridDataRow<R>[];
+    /** Returns the currently-selected rows of the given `kind`. */
     getSelectedRows<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
-    /** Deselects all rows */
+    /** Set selected state of a row by id. */
+    selectRow(id: string, selected?: boolean): void;
+    /** De-selects all selected rows. */
     clearSelections(): void;
+    /** Whether a row is currently collapsed. */
+    isCollapsedRow(id: string): boolean;
+    /** Toggle collapse state of a row by id. */
+    toggleCollapsedRow(id: string): void;
     /** Sets the internal state of 'activeRowId' */
-    setActiveRowId: (id: string | undefined) => void;
+    setActiveRowId(id: string | undefined): void;
     /** Sets the internal state of 'activeCellId' */
-    setActiveCellId: (id: string | undefined) => void;
-    /** Set selected state of a row by id */
-    selectRow: (id: string, selected?: boolean) => void;
-    /** Deletes a row from the table */
-    deleteRows: (ids: string[]) => void;
-    /** Toggle collapse state of a row by id */
-    toggleCollapsedRow: (id: string) => void;
-    isCollapsedRow: (id: string) => boolean;
-    setVisibleColumns: (ids: string[]) => void;
-    getVisibleColumnIds: () => string[];
+    setActiveCellId(id: string | undefined): void;
+    /** Deletes a row from the table, i.e. so it's not detected as kept. */
+    deleteRows(ids: string[]): void;
+    getVisibleColumnIds(): string[];
+    setVisibleColumns(ids: string[]): void;
 };
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
     readonly tableState: TableState;

package/dist/components/Table/GridTableApi.js

@@ -31,7 +31,9 @@ class GridTableApiImpl {
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */
     init(persistCollapse, virtuosoRef, rows) {
-        this.tableState.loadCollapse(persistCollapse, rows);
+        // Technically this drives both row-collapse and column-expanded
+        if (persistCollapse)
+            this.tableState.loadCollapse(persistCollapse);
         this.virtuosoRef = virtuosoRef;
     }
     scrollToIndex(index) {

package/dist/components/Table/components/EditColumnsButton.js

@@ -24,22 +24,23 @@ function EditColumnsButton(props) {
             : (0, OverlayTrigger_1.isIconButton)(trigger)
                 ? trigger.icon
                 : trigger.name);
-    const { options } = (0, react_1.useMemo)(() => {
-        return columns.reduce((acc, column) => {
-            // Only include options that can be hidden and have the `name` property defined.
-            if (!column.canHide)
-                return acc;
-            if (!column.name || column.name.length === 0 || !column.id || column.id.length === 0) {
-                console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column);
-                return acc;
-            }
-            // Add current column as an option
-            return { ...acc, options: acc.options.concat({ label: column.name, value: column.id }) };
-        }, { options: [] });
-    }, [columns]);
+    const options = (0, react_1.useMemo)(() => columns
+        // Only include options that can be hidden
+        .filter((column) => column.canHide)
+        // And have the `name` property defined
+        .filter((column) => {
+        if (!column.name || column.name.length === 0 || !column.id || column.id.length === 0) {
+            console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column);
+            return false;
+        }
+        return true;
+    })
+        .map((column) => ({ label: column.name, value: column.id })), [columns]);
     const selectedValues = (0, hooks_1.useComputed)(() => api.getVisibleColumnIds(), [api]);
-    const setSelectedValues = (0, react_1.useCallback)((values) => {
-        api.setVisibleColumns(columns.filter((column) => (column.canHide ? values.includes(column.id) : true)).map((c) => c.id));
+    const setSelectedValues = (0, react_1.useCallback)((ids) => {
+        // Doesn't `options` already filter us to non-hidden/valid-id columns? I.e. could we just do:
+        // api.setVisibleColumns(ids);
+        api.setVisibleColumns(columns.filter((column) => (column.canHide ? ids.includes(column.id) : true)).map((c) => c.id));
     }, [columns, api]);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsxs)("div", { css: {
                 ...Css_1.Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,

package/dist/components/Table/components/ExpandableHeader.js

@@ -22,7 +22,7 @@ function ExpandableHeader(props) {
     return ((0, jsx_runtime_1.jsxs)("button", { ...hoverProps, css: Css_1.Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.lightBlue700.if(isHovered).bgGray100.$, onClick: async () => {
             if ((0, utils_2.isFunction)(column.expandColumns)) {
                 setIsLoading(true);
-                await tableState.loadExpandedColumns(column);
+                await tableState.loadExpandedColumns(column.id);
                 setIsLoading(false);
             }
             // manually calling this as loadExpandedColumns does not toggle

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

@@ -78,11 +78,11 @@ function RowImpl(props) {
     let minStickyLeftOffset = 0;
     let expandColumnHidden = false;
     return ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d;
             // If the expandable column was hidden, then we need to look at the previous column to format the `expandHeader` and 'header' kinds correctly.
             const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column;
             // Figure out if this column should be considered 'expanded' or not. If the column is hidden on expand, then we need to look at the previous column to see if it's expanded.
-            const isExpanded = tableState.expandedColumnIds.includes(maybeExpandedColumn.id);
+            const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
             // If the column is hidden on expand, we don't want to render it. We'll flag that it was hidden, so on the next column we can render this column's "expandHeader" property.
             if (column.hideOnExpand && isExpanded) {
                 expandColumnHidden = true;
@@ -90,9 +90,9 @@ function RowImpl(props) {
             }
             // Need to keep track of the expanded columns so we can add borders as expected for the header rows
             const numExpandedColumns = isExpanded
-                ? ((_a = tableState.getExpandedColumns(maybeExpandedColumn)) === null || _a === void 0 ? void 0 : _a.length)
+                ? tableState.numberOfExpandedChildren(maybeExpandedColumn.id)
                     ? // Subtract 1 if the column is hidden on expand, since we're not rendering it.
-                        tableState.getExpandedColumns(maybeExpandedColumn).length - (maybeExpandedColumn.hideOnExpand ? 1 : 0)
+                        tableState.numberOfExpandedChildren(maybeExpandedColumn.id) - (maybeExpandedColumn.hideOnExpand ? 1 : 0)
                     : 0
                 : 0;
             // If we're rendering the Expandable Header row, then we might need to render the previous column's `expandHeader` property in the case where the column is hidden on expand.
@@ -145,7 +145,7 @@ function RowImpl(props) {
                 column.expandedWidth !== undefined;
             const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader || isTotals || isExpandableHeader, column, columnIndex, maybeContent);
-            const maybeSticky = (_b = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
+            const maybeSticky = (_a = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _a !== void 0 ? _a : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
                 ? {
                     ...Css_1.Css.sticky.z(utils_1.zIndices.stickyColumns).bgWhite.$,
@@ -199,13 +199,13 @@ function RowImpl(props) {
                     currentExpandedColumnCount === 0 &&
                     Css_1.Css.boxShadow(`inset -1px -1px 0 ${Css_1.Palette.Gray200}`).$),
                 // Or level-specific styling
-                ...(!isHeader && !isTotals && !isExpandableHeader && !!style.levels && ((_c = style.levels[level]) === null || _c === void 0 ? void 0 : _c.cellCss)),
+                ...(!isHeader && !isTotals && !isExpandableHeader && !!style.levels && ((_b = style.levels[level]) === null || _b === void 0 ? void 0 : _b.cellCss)),
                 // Level specific styling for the first content column
-                ...(applyFirstContentColumnStyles && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.firstContentColumn)),
+                ...(applyFirstContentColumnStyles && !!style.levels && ((_c = style.levels[level]) === null || _c === void 0 ? void 0 : _c.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
-                ...(isActive ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$ : {}),
+                ...(isActive ? Css_1.Css.bgColor((_d = style.activeBgColor) !== null && _d !== void 0 ? _d : Css_1.Palette.LightBlue50).$ : {}),
                 // Add any cell specific style overrides
                 ...((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // And any cell specific css

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

@@ -85,6 +85,12 @@ export type GridColumn<R extends Kinded> = {
     /** Determines whether this column should be hidden when expanded (only the 'expandColumns' would show) */
     hideOnExpand?: boolean;
 };
+/**
+ * Adds an `id` to `GridColumn`, for use in storage/APIs.
+ *
+ * Ideally we'd require this on `GridColumn` itself, but that would be
+ * a large breaking change for a lot of tables that don't need column ids.
+ */
 export type GridColumnWithId<R extends Kinded> = GridColumn<R> & {
     id: string;
     expandColumns?: GridColumnWithId<R>[] | (() => Promise<GridColumn<R>[]>);
@@ -102,6 +108,6 @@ export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 export type InfiniteScroll = {
     /** will be called when the user scrolls to the end of the list with the last item index as an argument.  */
     onEndReached: (index: number) => void;
-    /** The number of pixels from the bottom of the list to eagerly trigger `onEndReached`. The default is is 500px. */
+    /** The number of pixels from the bottom of the list to eagerly trigger `onEndReached`. The default is 500px. */
     endOffsetPx?: number;
 };

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

@@ -0,0 +1,24 @@
+import { GridColumnWithId } from "../../..";
+import { ColumnStates } from "./ColumnStates";
+import { ColumnStorage } from "./ColumnStorage";
+/**
+ * A reactive/observable wrapper around each GridColumn.
+ *
+ * This is primarily for tracking visible/expanded columns for tables
+ * that use the expandable columns feature.
+ */
+export declare class ColumnState {
+    private states;
+    column: GridColumnWithId<any>;
+    children: ColumnState[] | undefined;
+    private visible;
+    private expanded;
+    constructor(states: ColumnStates, storage: ColumnStorage, column: GridColumnWithId<any>);
+    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[];
+}

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnState = void 0;
+const mobx_1 = require("mobx");
+const src_1 = require("../../..");
+const index_1 = require("../../../utils/index");
+/**
+ * A reactive/observable wrapper around each GridColumn.
+ *
+ * This is primarily for tracking visible/expanded columns for tables
+ * that use the expandable columns feature.
+ */
+class ColumnState {
+    constructor(states, storage, column) {
+        var _a, _b, _c;
+        this.states = states;
+        this.children = undefined;
+        this.visible = true;
+        this.expanded = false;
+        this.column = column;
+        // If the user sets `canHide: true`, we default to hidden unless they set `initVisible: true`
+        this.visible = (_a = storage.wasVisible(column.id)) !== null && _a !== void 0 ? _a : (column.canHide ? (_b = column.initVisible) !== null && _b !== void 0 ? _b : false : true);
+        if (this.visible && ((_c = storage.wasExpanded(column.id)) !== null && _c !== void 0 ? _c : column.initExpanded)) {
+            this.expanded = true;
+            this.doExpand();
+        }
+        (0, mobx_1.makeAutoObservable)(this, { column: mobx_1.observable.ref });
+    }
+    setVisible(visible) {
+        const wasVisible = this.visible;
+        this.visible = visible;
+        // If an expandable header is becoming visible for the 1st time, expand it
+        if (!wasVisible && visible && this.column.initExpanded && this.children === undefined) {
+            this.expanded = true;
+            this.doExpand();
+        }
+    }
+    get isExpanded() {
+        return this.expanded;
+    }
+    toggleExpanded() {
+        const wasExpanded = this.expanded;
+        this.expanded = !this.expanded;
+        // The first time we expand, fetch our children. Note that ExpandableHeader
+        // technically pre-loads our children, so it can show a spinner while loading,
+        // and only after loading is complete, tell our column to expand.
+        if (!wasExpanded)
+            this.doExpand();
+    }
+    /** Calls the `column.expandColumns` function, if set, and adds the resulting columns. */
+    async doExpand(force = false) {
+        const { expandColumns } = this.column;
+        // If we've already got the children, don't re-expand unless forced (i.e. props.columns changed)
+        if (this.children !== undefined && !force)
+            return;
+        if ((0, index_1.isFunction)(expandColumns)) {
+            const ecs = await expandColumns();
+            this.children = (0, src_1.assignDefaultColumnIds)(ecs).map((ec) => this.states.addColumn(ec));
+        }
+        else if (expandColumns) {
+            this.children = expandColumns.map((ec) => this.states.addColumn(ec));
+        }
+    }
+    /** Returns this column, if visible, and its children, if expanded. */
+    get maybeSelfAndChildren() {
+        if (!this.visible) {
+            return [];
+        }
+        else if (this.expanded && this.children) {
+            // Maybe do the `hideOnExpand` thing here? Seems cute, but the Row rendering still
+            // needs to do the "look back to the prior column for the expandableHeader cell" logic.
+            // if (this.column.hideOnExpand) {
+            //   return this.children.flatMap((c) => c.selfAndMaybeChildren);
+            // }
+            return [this, ...this.children.flatMap((c) => c.maybeSelfAndChildren)];
+        }
+        else {
+            return [this];
+        }
+    }
+}
+exports.ColumnState = ColumnState;

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

@@ -0,0 +1,29 @@
+import { GridColumnWithId } from "../../..";
+import { ColumnState } from "./ColumnState";
+/** A reactive/observable wrapper around our columns. */
+export declare class ColumnStates {
+    private columns;
+    private map;
+    private storage;
+    constructor();
+    /**
+     * Updates our internal columns states when `props.columns` changes.
+     *
+     * We handle sessionStorage here b/c we allow the user to either provide their own
+     * storage key, or calc the storage key based on the currently-visible columns.
+     * 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;
+    /** Adds a column to our state, i.e. maybe a dynamically loaded column. */
+    addColumn(column: GridColumnWithId<any>): ColumnState;
+    /** Returns the `ColumnState` for the given `id`. */
+    get(id: string): ColumnState;
+    /** Returns all currently-expanded columns. */
+    get expandedColumns(): ColumnState[];
+    /** Returns a flat list of all visible columns. */
+    get allVisibleColumns(): ColumnState[];
+    setVisibleColumns(ids: string[]): void;
+    loadExpanded(storageKey: string): void;
+    loadVisible(storageKey: string): void;
+}

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnStates = void 0;
+const change_case_1 = require("change-case");
+const mobx_1 = require("mobx");
+const ColumnState_1 = require("./ColumnState");
+const ColumnStorage_1 = require("./ColumnStorage");
+/** A reactive/observable wrapper around our columns. */
+class ColumnStates {
+    constructor() {
+        // The top-level list of columns
+        this.columns = [];
+        this.map = new Map();
+        this.storage = new ColumnStorage_1.ColumnStorage(this);
+        (0, mobx_1.makeAutoObservable)(this);
+    }
+    /**
+     * Updates our internal columns states when `props.columns` changes.
+     *
+     * We handle sessionStorage here b/c we allow the user to either provide their own
+     * storage key, or calc the storage key based on the currently-visible columns.
+     * 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, visibleColumnsStorageKey) {
+        if (columns.some((c) => c.canHide)) {
+            // We optionally auto-calc visible columns based on the currently-_potentially_-visible columns
+            visibleColumnsStorageKey !== null && visibleColumnsStorageKey !== void 0 ? visibleColumnsStorageKey : (visibleColumnsStorageKey = (0, change_case_1.camelCase)(columns.map((c) => c.id).join()));
+            this.loadVisible(visibleColumnsStorageKey);
+        }
+        this.columns = columns.map((c) => this.addColumn(c));
+        // After the very first non-zero `setColumns`, we disconnect from sessionStorage
+        if (columns.length > 0)
+            this.storage.done();
+    }
+    /** Adds a column to our state, i.e. maybe a dynamically loaded column. */
+    addColumn(column) {
+        const existing = this.map.get(column.id);
+        if (!existing) {
+            const cs = new ColumnState_1.ColumnState(this, this.storage, column);
+            this.map.set(column.id, cs);
+            return cs;
+        }
+        else {
+            existing.column = column;
+            // Any time a column is re-added (i.e. props.columns changed), re-expand it
+            if (existing.isExpanded)
+                existing.doExpand(true);
+            return existing;
+        }
+    }
+    /** Returns the `ColumnState` for the given `id`. */
+    get(id) {
+        const cs = this.map.get(id);
+        if (!cs)
+            throw new Error(`No ColumnState for ${id}`);
+        return cs;
+    }
+    /** Returns all currently-expanded columns. */
+    get expandedColumns() {
+        return this.columns.filter((cs) => cs.isExpanded);
+    }
+    /** Returns a flat list of all visible columns. */
+    get allVisibleColumns() {
+        return this.columns.flatMap((cs) => cs.maybeSelfAndChildren);
+    }
+    setVisibleColumns(ids) {
+        for (const cs of this.map.values()) {
+            cs.setVisible(ids.includes(cs.column.id));
+        }
+    }
+    loadExpanded(storageKey) {
+        this.storage.loadExpanded(storageKey);
+    }
+    loadVisible(storageKey) {
+        this.storage.loadVisible(storageKey);
+    }
+}
+exports.ColumnStates = ColumnStates;

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

@@ -0,0 +1,13 @@
+import { ColumnStates } from "./ColumnStates";
+/** Loads/saves the column state from sessionStorage. */
+export declare class ColumnStorage {
+    private states;
+    private expandedIds;
+    private visibleIds;
+    constructor(states: ColumnStates);
+    loadExpanded(persistCollapse: string): void;
+    loadVisible(storageKey: string): void;
+    wasExpanded(id: string): boolean | undefined;
+    wasVisible(id: string): boolean | undefined;
+    done(): void;
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnStorage = void 0;
+const mobx_1 = require("mobx");
+const utils_1 = require("./utils");
+/** Loads/saves the column state from sessionStorage. */
+class ColumnStorage {
+    constructor(states) {
+        this.states = states;
+    }
+    loadExpanded(persistCollapse) {
+        const key = `expandedColumn_${persistCollapse}`;
+        this.expandedIds = (0, utils_1.loadArrayOrUndefined)(key);
+        (0, mobx_1.reaction)(() => this.states.expandedColumns.map((cs) => cs.column.id), (columnIds) => sessionStorage.setItem(key, JSON.stringify(columnIds)));
+    }
+    loadVisible(storageKey) {
+        this.visibleIds = (0, utils_1.loadArrayOrUndefined)(storageKey);
+        // Unlike the others, where we only store the value on change, we immediately
+        // store this value (but I'm not sure why...), hence using `autorun`.
+        (0, mobx_1.autorun)(() => {
+            const columnIds = this.states.allVisibleColumns.map((cs) => cs.column.id);
+            sessionStorage.setItem(storageKey, JSON.stringify(columnIds));
+        });
+    }
+    wasExpanded(id) {
+        var _a;
+        return (_a = this.expandedIds) === null || _a === void 0 ? void 0 : _a.includes(id);
+    }
+    wasVisible(id) {
+        var _a;
+        return (_a = this.visibleIds) === null || _a === void 0 ? void 0 : _a.includes(id);
+    }
+    done() {
+        this.expandedIds = undefined;
+    }
+}
+exports.ColumnStorage = ColumnStorage;

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.