@homebound/beam 2.243.1 → 2.244.0

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

@@ -25,9 +25,8 @@ function ExpandableHeader(props) {
                 await tableState.loadExpandedColumns(column);
                 setIsLoading(false);
             }
-            else {
-                tableState.toggleExpandedColumn(column.id);
-            }
+            // manually calling this as loadExpandedColumns does not toggle
+            tableState.toggleExpandedColumn(column.id);
         }, "data-testid": "expandableColumn", children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.tl.lineClamp2
                     .if(applyStickyStyles)
                     .sticky.leftPx(minStickyLeftOffset + 12)

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

@@ -47,6 +47,10 @@ 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>[]): 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;

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

@@ -166,7 +166,7 @@ class TableState {
                 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 || readLocalCollapseState(this.persistCollapse).includes(maybeNewRowId)));
+                    (!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));
@@ -183,32 +183,81 @@ class TableState {
     setColumns(columns, visibleColumnsStorageKey) {
         const isInitial = !this.columns || this.columns.length === 0;
         if (columns !== this.columns) {
-            this.columns = 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));
-            const expandedColumnIds = columns.filter((c) => c.initExpanded).map((c) => c.id);
-            if (isInitial)
-                this.expandedColumns.replace(expandedColumnIds);
+            // 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 any subsequent render, we start with an empty array.
+            // (We'll add to this after figuring out which columns are new vs existing.)
+            const columnIdsToExpand = isInitial ? localStorageColumns : [];
+            // 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));
+            // Send the new array of columns along to be parsed and expanded.
+            this.parseAndUpdateExpandedColumns(columns.filter((c) => columnIdsToExpand.includes(c.id)));
+            this.columns = columns;
+        }
+    }
+    /** Determines which columns to expand immediately vs 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) {
+            Promise.all(asyncColumnsToExpand.map(async (c) => await this.loadExpandedColumns(c))).then(() => 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 dont have anything in our cache and our expanded columns are a function
+        // 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));
         }
-        // once column is in local cache, then toggle
-        this.toggleExpandedColumn(column.id);
     }
-    // if there is a promise, then load the expandable columns from the cache, if not then return the expandedColumns
+    // 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 : [];
     }
     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);
     }
@@ -225,6 +274,9 @@ class TableState {
         else {
             this.expandedColumns.add(columnId);
         }
+        if (this.persistCollapse) {
+            sessionStorage.setItem(getColumnStorageKey(this.persistCollapse), JSON.stringify(this.expandedColumnIds));
+        }
     }
     setMatchedRows(rowIds) {
         // ObservableSet doesn't seem to do a `diff` inside `replace` before firing
@@ -385,11 +437,14 @@ exports.TableStateContext = react_1.default.createContext({
         throw new Error("No TableStateContext provider");
     },
 });
-// Get the rows that are already in the toggled state, so we can keep them toggled
-function readLocalCollapseState(persistCollapse) {
+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) : [];
+}
 // Get the columns that are already in the visible state so we keep them toggled.
 function readOrSetLocalVisibleColumnState(columns, storageKey) {
     const storageValue = sessionStorage.getItem(storageKey);
@@ -436,6 +491,9 @@ function flattenRows(rows) {
     const childRows = rows.flatMap((r) => (r.children ? flattenRows(r.children) : []));
     return [...rows, ...childRows];
 }
+function getColumnStorageKey(storageKey) {
+    return `expandedColumn_${storageKey}`;
+}
 // Exported for testing purposes
 function deriveSortState(currentSortState, clickedKey, initialSortState) {
     var _a;

package/package.json

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