@homebound/beam 2.303.0 → 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,6 +31,7 @@ class GridTableApiImpl {
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */
     init(persistCollapse, virtuosoRef, rows) {
+        // Technically this drives both row-collapse and column-expanded
         if (persistCollapse)
             this.tableState.loadCollapse(persistCollapse);
         this.virtuosoRef = virtuosoRef;

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/RowStorage.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowStorage = void 0;
 const mobx_1 = require("mobx");
+const src_1 = require("../../..");
 /**
  * Manages loading/saving our currently-collapsed rows to session storage.
  *
@@ -19,12 +20,9 @@ class RowStorage {
     }
     load(persistCollapse) {
         // Load what our previously collapsed rows were
-        const ids = sessionStorage.getItem(persistCollapse);
-        if (ids) {
-            this.historicalIds = JSON.parse(ids);
-        }
+        this.historicalIds = (0, src_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)));
+        (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() {

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

@@ -1,4 +1,3 @@
-import { ObservableSet } from "mobx";
 import React from "react";
 import { GridDataRow } from "../components/Row";
 import { GridSortConfig } from "../GridTable";
@@ -22,18 +21,15 @@ export type SelectedState = "checked" | "unchecked" | "partial";
 export declare class TableState {
     private persistCollapse;
     private rows;
+    columns: GridColumnWithId<any>[];
     private readonly rowStates;
+    private readonly columnStates;
     activeRowId: string | undefined;
     activeCellId: string | undefined;
     sortConfig: GridSortConfig | undefined;
     sort: SortState;
     private initialSortState;
     private onSort;
-    columns: GridColumnWithId<any>[];
-    private expandedColumns;
-    visibleColumns: ObservableSet<string>;
-    private visibleColumnsStorageKey;
-    private loadedColumns;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
@@ -44,16 +40,16 @@ export declare class TableState {
     get sortState(): SortState | undefined;
     setRows(rows: GridDataRow<any>[]): void;
     setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
-    /** Determines which columns to expand immediately vs async */
-    parseAndUpdateExpandedColumns(columnsToExpand: GridColumnWithId<any>[]): Promise<void>;
-    /** Updates the state of which columns are expanded */
-    updateExpandedColumns(newColumns: GridColumnWithId<any>[]): void;
-    loadExpandedColumns(column: GridColumnWithId<any>): Promise<void>;
-    getExpandedColumns(column: GridColumnWithId<any>): GridColumnWithId<any>[];
-    setVisibleColumns(ids: string[]): void;
+    /** Returns visible columns, i.e. those that are visible + any expanded children. */
+    get visibleColumns(): GridColumnWithId<any>[];
+    /** Implements GridTableApi.visibleColumnIds. */
     get visibleColumnIds(): string[];
+    setVisibleColumns(ids: string[]): void;
     get expandedColumnIds(): string[];
+    isExpandedColumn(columnId: string): boolean;
     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`. */

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

@@ -4,13 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deriveSortState = exports.TableStateContext = exports.TableState = void 0;
-const change_case_1 = require("change-case");
 const mobx_1 = require("mobx");
 const react_1 = __importDefault(require("react"));
+const ColumnStates_1 = require("./ColumnStates");
 const RowStates_1 = require("./RowStates");
 const utils_1 = require("./utils");
-const utils_2 = require("../../../utils");
-const columns_1 = require("./columns");
 /**
  * Stores the collapsed & selected state of rows.
  *
@@ -33,7 +31,10 @@ class TableState {
     constructor() {
         // 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.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}`
@@ -41,15 +42,6 @@ class TableState {
         // Tracks the active sort column(s), so GridTable or SortHeaders can reactively
         // re-render (for GridTable, only if client-side sorting)
         this.sort = {};
-        // Non-reactive list of our columns
-        this.columns = [];
-        // An observable set of column ids to keep track of which columns are currently expanded
-        this.expandedColumns = new mobx_1.ObservableSet();
-        // An observable set of column ids to keep track of which columns are visible
-        this.visibleColumns = new mobx_1.ObservableSet();
-        this.visibleColumnsStorageKey = "";
-        // Cache for already loaded expandable columns
-        this.loadedColumns = new Map();
         // 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, {
@@ -59,8 +51,7 @@ class TableState {
             // updated _contents_ of a given row, even if our other selected/matched row states don't change.
             // (as any b/c rows is private, so the mapped type doesn't see it)
             rows: mobx_1.observable.shallow,
-            // Do not observe columns, expect this to be a non-reactive value for us to base our reactive values off of.
-            columns: false,
+            columns: 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) => {
@@ -72,6 +63,7 @@ class TableState {
     loadCollapse(persistCollapse) {
         this.persistCollapse = persistCollapse;
         this.rowStates.storage.load(persistCollapse);
+        this.columnStates.loadExpanded(persistCollapse);
     }
     initSortState(sortConfig, columns) {
         var _a, _b;
@@ -127,118 +119,48 @@ class TableState {
     }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
+        // Note that because of using `rows: observable.shallow` above, this is always
+        // false, and this logic runs on every render. We can eventually fix this, but it
+        // is convenient b/c it puts no-longer-kept rows back into the right spot in their
+        // parents.
         if (rows !== this.rows) {
             this.rowStates.setRows(rows);
             this.rows = rows;
         }
     }
     setColumns(columns, visibleColumnsStorageKey) {
-        const isInitial = !this.columns || this.columns.length === 0;
         if (columns !== this.columns) {
-            this.visibleColumnsStorageKey = visibleColumnsStorageKey !== null && visibleColumnsStorageKey !== void 0 ? visibleColumnsStorageKey : (0, change_case_1.camelCase)(columns.map((c) => c.id).join());
-            this.visibleColumns.replace(readOrSetLocalVisibleColumnState(columns, this.visibleColumnsStorageKey));
-            // Figure out which columns need to be expanded when rendering a new set of columns
-            const localStorageColumns = this.persistCollapse ? readExpandedColumnsStorage(this.persistCollapse) : [];
-            // On initial render the columns we start with is whatever is in local storage.
-            // On subsequent renders we want to keep the columns that were previously expanded.
-            const columnIdsToExpand = isInitial ? localStorageColumns : this.expandedColumnIds;
-            // Create a list of all existing column ids. (We ignore the `initExpanded` property for existing columns)
-            const existingColumnIds = this.columns.map((c) => c.id);
-            // Add any columns to our array that are new columns that should be initially expanded.
-            columnIdsToExpand.push(...columns.filter((c) => !existingColumnIds.includes(c.id) && c.initExpanded).map((c) => c.id));
-            // Clear the cache to force to re-fetch the expanded columns.
-            this.loadedColumns.clear();
-            // Send the new array of columns along to be parsed and expanded.
-            this.parseAndUpdateExpandedColumns(columns.filter((c) => columnIdsToExpand.includes(c.id)));
+            this.columnStates.setColumns(columns, visibleColumnsStorageKey);
             this.columns = columns;
         }
     }
-    /** Determines which columns to expand immediately vs async */
-    async parseAndUpdateExpandedColumns(columnsToExpand) {
-        // Separate out which columns need to be loaded async vs which can be loaded immediately.
-        const [localColumnsToExpand, asyncColumnsToExpand] = columnsToExpand.reduce((acc, c) => {
-            if ((0, utils_2.isFunction)(c.expandColumns)) {
-                return [acc[0], acc[1].concat(c)];
-            }
-            return [acc[0].concat(c), acc[1]];
-        }, [[], []]);
-        // Handle all async expanding columns using a Promise.all.
-        // This will allow the table to render immediately, then cause a rerender with the new columns
-        if (asyncColumnsToExpand.length > 0) {
-            // Note: Not using a Promise.all because there seems to be a bug in Apollo with applying TypePolicies when using Promise.all.
-            // TODO: Update comment with Apollo issue link.
-            // Promise.all(asyncColumnsToExpand.map(async (c) => await this.loadExpandedColumns(c))).then(() =>
-            //   this.updateExpandedColumns(asyncColumnsToExpand),
-            // );
-            // Instead, doing each async request in sequence for now.
-            for await (const column of asyncColumnsToExpand) {
-                await this.loadExpandedColumns(column);
-            }
-            this.updateExpandedColumns(asyncColumnsToExpand);
-        }
-        // For local columns, we skip the Promise in order to have the correct state on the initial load.
-        if (localColumnsToExpand.length > 0) {
-            this.updateExpandedColumns(localColumnsToExpand);
-        }
-    }
-    /** Updates the state of which columns are expanded */
-    updateExpandedColumns(newColumns) {
-        const newColumnIds = newColumns.map((c) => c.id);
-        // If there is a difference between list of current expanded columns vs list we just created, then replace
-        const isDifferent = newColumnIds.length !== this.expandedColumnIds.length ||
-            !this.expandedColumnIds.every((c) => newColumnIds.includes(c));
-        if (isDifferent) {
-            // Note: `this.expandedColumns` is a Set, so it will take care of dedupe-ing.
-            this.expandedColumns.replace([...this.expandedColumnIds, ...newColumnIds]);
-            // Update session storage if necessary.
-            if (this.persistCollapse) {
-                sessionStorage.setItem(getColumnStorageKey(this.persistCollapse), JSON.stringify([...this.expandedColumns]));
-            }
-        }
-    }
-    // load and trigger column to be expanded
-    async loadExpandedColumns(column) {
-        // if we don't have anything in our cache and our expanded columns are a function
-        if (!this.loadedColumns.has(column.id) && (0, utils_2.isFunction)(column.expandColumns)) {
-            // set our result to the function call of expandColumns
-            const result = await column.expandColumns();
-            // once we have the loaded columns, add result to local cache
-            this.loadedColumns.set(column.id, (0, columns_1.assignDefaultColumnIds)(result));
-        }
+    /** Returns visible columns, i.e. those that are visible + any expanded children. */
+    get visibleColumns() {
+        return this.columnStates.allVisibleColumns.map((cs) => cs.column);
     }
-    // if there is a promise, then grab the already loaded expandable columns from the cache, if not then return the expandedColumns property
-    getExpandedColumns(column) {
-        var _a, _b;
-        return (0, utils_2.isFunction)(column.expandColumns) ? (_a = this.loadedColumns.get(column.id)) !== null && _a !== void 0 ? _a : [] : (_b = column.expandColumns) !== null && _b !== void 0 ? _b : [];
+    /** Implements GridTableApi.visibleColumnIds. */
+    get visibleColumnIds() {
+        return this.visibleColumns.map((cs) => cs.id);
     }
     setVisibleColumns(ids) {
-        // If we have a new visible columns, then we need to check if some need to be initially expanded when made visible
-        if (ids.length > this.visibleColumnIds.length) {
-            // Get a list of columns that are just now being made visible.
-            const newlyVisibleIds = ids.filter((id) => !this.visibleColumnIds.includes(id));
-            // Figure out if any of these newly visible columns needs to be initially expanded.
-            const columnsToExpand = this.columns.filter((c) => newlyVisibleIds.includes(c.id) && c.initExpanded);
-            this.parseAndUpdateExpandedColumns(columnsToExpand);
-        }
-        sessionStorage.setItem(this.visibleColumnsStorageKey, JSON.stringify(ids));
-        this.visibleColumns.replace(ids);
-    }
-    get visibleColumnIds() {
-        return [...this.visibleColumns.values()];
+        this.columnStates.setVisibleColumns(ids);
     }
     get expandedColumnIds() {
-        return [...this.expandedColumns.values()];
+        return this.columnStates.expandedColumns.map((cs) => cs.column.id);
+    }
+    isExpandedColumn(columnId) {
+        return this.columnStates.get(columnId).isExpanded;
     }
     toggleExpandedColumn(columnId) {
-        if (this.expandedColumns.has(columnId)) {
-            this.expandedColumns.delete(columnId);
-        }
-        else {
-            this.expandedColumns.add(columnId);
-        }
-        if (this.persistCollapse) {
-            sessionStorage.setItem(getColumnStorageKey(this.persistCollapse), JSON.stringify(this.expandedColumnIds));
-        }
+        this.columnStates.get(columnId).toggleExpanded();
+    }
+    numberOfExpandedChildren(columnId) {
+        var _a, _b;
+        // Should this be only _visible_ children?
+        return (_b = (_a = this.columnStates.get(columnId).children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    }
+    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) {
@@ -286,27 +208,9 @@ exports.TableState = TableState;
 /** Provides a context for rows to access their table's `TableState`. */
 exports.TableStateContext = react_1.default.createContext({
     get tableState() {
-        console.log("wtf?");
         throw new Error("No TableStateContext provider");
     },
 });
-function readExpandedColumnsStorage(persistCollapse) {
-    const expandedGridColumnIds = sessionStorage.getItem(getColumnStorageKey(persistCollapse));
-    return expandedGridColumnIds ? JSON.parse(expandedGridColumnIds) : [];
-}
-// Get the columns that are already in the visible state so we keep them toggled.
-function readOrSetLocalVisibleColumnState(columns, storageKey) {
-    const storageValue = sessionStorage.getItem(storageKey);
-    if (storageValue) {
-        return JSON.parse(storageValue);
-    }
-    const visibleColumnIds = columns.filter((c) => c.initVisible || !c.canHide).map((c) => c.id);
-    sessionStorage.setItem(storageKey, JSON.stringify(visibleColumnIds));
-    return visibleColumnIds;
-}
-function getColumnStorageKey(storageKey) {
-    return `expandedColumn_${storageKey}`;
-}
 // Exported for testing purposes
 function deriveSortState(currentSortState, clickedKey, initialSortState) {
     var _a;

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

@@ -29,6 +29,6 @@ export declare function collapseColumn<T extends Kinded>(columnDef?: Partial<Gri
  * Enforces only fixed-sized units (% and px)
  */
 export declare function calcColumnSizes(columns: GridColumnWithId<any>[], tableWidth: number | undefined, tableMinWidthPx: number | undefined, expandedColumnIds: string[]): string[];
-/** Assign column ids if missing */
+/** Assign column ids if missing. */
 export declare function assignDefaultColumnIds<T extends Kinded>(columns: GridColumn<T>[]): GridColumnWithId<T>[];
 export declare const generateColumnId: (columnIndex: number) => string;

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

@@ -162,13 +162,12 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColum
     return sizes;
 }
 exports.calcColumnSizes = calcColumnSizes;
-/** Assign column ids if missing */
+/** Assign column ids if missing. */
 function assignDefaultColumnIds(columns) {
-    // Note: we are not _always_ spreading the `c` property as we need to be able to return the whole proxy object that
-    // exists as part of `selectColumn` and `collapseColumn`.
     return columns.map((c, idx) => {
         var _a;
         const { expandColumns } = c;
+        // If `expandColumns` is a function, we don't instrument it atm.
         const expandColumnsWithId = (0, utils_2.isFunction)(expandColumns)
             ? expandColumns
             : expandColumns === null || expandColumns === void 0 ? void 0 : expandColumns.map((ec, ecIdx) => {
@@ -182,7 +181,13 @@ function assignDefaultColumnIds(columns) {
                     expandColumns: undefined,
                 });
             });
-        return Object.assign(c, { id: (_a = c.id) !== null && _a !== void 0 ? _a : (0, exports.generateColumnId)(idx), expandColumns: expandColumnsWithId });
+        // We use `Object.assign` instead of spreading the `c` property to maintain
+        // the proxy objects if the user used selectColumn/collapseColumn, which have
+        // method-missing hooks that render empty cells for any non-header rows.
+        return Object.assign(c, {
+            id: (_a = c.id) !== null && _a !== void 0 ? _a : (0, exports.generateColumnId)(idx),
+            expandColumns: expandColumnsWithId,
+        });
     });
 }
 exports.assignDefaultColumnIds = assignDefaultColumnIds;

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

@@ -32,3 +32,5 @@ export declare const zIndices: {
     expandableHeaderTitle: number;
     expandableHeaderIcon: number;
 };
+/** Loads an array from sessionStorage, if it exists, or `undefined`. */
+export declare function loadArrayOrUndefined(key: string): any;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("../../Icon");
 const ExpandableHeader_1 = require("../components/ExpandableHeader");
@@ -166,3 +166,9 @@ exports.zIndices = {
     expandableHeaderTitle: 2,
     expandableHeaderIcon: 1,
 };
+/** Loads an array from sessionStorage, if it exists, or `undefined`. */
+function loadArrayOrUndefined(key) {
+    const ids = sessionStorage.getItem(key);
+    return ids ? JSON.parse(ids) : undefined;
+}
+exports.loadArrayOrUndefined = loadArrayOrUndefined;

package/package.json

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