@homebound/beam 2.117.4 → 2.118.0

package/dist/components/Table/GridTable.js

@@ -127,6 +127,9 @@ 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)();
+    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
+    // Make a single copy of our current collapsed state, so we'll have a single observer.
+    const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
@@ -135,13 +138,34 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
-    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
-    // Make a single copy of our current collapsed state, so we'll have a single observer.
-    const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
-    // Filter + flatten + component-ize the sorted rows.
-    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
+    // Filter rows - ensures parent rows remain in the list if any children match the filter.
+    const filterRows = (0, react_1.useCallback)((acc, row) => {
+        var _a, _b, _c;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
+        const matches = row.kind === "header" ||
+            filters.length === 0 ||
+            !!row.pin ||
+            filters.every((f) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, f)));
+        // If the row matches, add it in
+        if (matches) {
+            return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterRows, [])) !== null && _b !== void 0 ? _b : []]]);
+        }
+        else {
+            // Otherwise, maybe one of the children match.
+            const isCollapsed = collapsedIds.includes(row.id);
+            if (!isCollapsed && !!((_c = row.children) === null || _c === void 0 ? void 0 : _c.length)) {
+                const matchedChildren = row.children.reduce(filterRows, []);
+                // If some children did match, then add the parent row with its matched children.
+                if (matchedChildren.length > 0) {
+                    return acc.concat([[row, matchedChildren]]);
+                }
+            }
+        }
+        return acc;
+    }, [filter, collapsedIds]);
+    // Flatten + component-ize the sorted rows.
+    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         function makeRowComponent(row, level) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
@@ -168,38 +192,30 @@ function GridTable(props) {
         const filteredRows = [];
         // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
         const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style.nestedCards);
-        // Depth-first to filter
-        function visit(row, level) {
-            var _a;
-            const matches = filters.length === 0 ||
-                row.pin ||
-                filters.every((filter) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, filter)));
-            let isCard = false;
-            // Even if we don't pass the filter, one of our children might, so we continue on after this check
-            if (matches) {
-                isCard = nestedCards && nestedCards.maybeOpenCard(row);
-                filteredRows.push([row, makeRowComponent(row, level)]);
-            }
+        function visit([row, children], level) {
+            let isCard = nestedCards && nestedCards.maybeOpenCard(row);
+            filteredRows.push([row, makeRowComponent(row, level)]);
             const isCollapsed = collapsedIds.includes(row.id);
-            if (!isCollapsed && !!((_a = row.children) === null || _a === void 0 ? void 0 : _a.length)) {
-                nestedCards && matches && nestedCards.addSpacer();
-                visitRows(row.children, isCard, level + 1);
+            if (!isCollapsed && children.length) {
+                nestedCards && nestedCards.addSpacer();
+                visitRows(children, isCard, level + 1);
             }
             !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
         }
         function visitRows(rows, addSpacer, level) {
             const length = rows.length;
             rows.forEach((row, i) => {
-                if (row.kind === "header") {
-                    headerRows.push([row, makeRowComponent(row, level)]);
+                if (row[0].kind === "header") {
+                    headerRows.push([row[0], makeRowComponent(row[0], level)]);
                     return;
                 }
                 visit(row, level);
                 addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
         }
+        // Call `visitRows` with our a pre-filtered set list
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
-        visitRows(maybeSorted, !!nestedCards, 0);
+        visitRows(maybeSorted.reduce(filterRows, []), !!nestedCards, 0);
         nestedCards && nestedCards.done();
         return [headerRows, filteredRows];
     }, [

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

@@ -34,6 +34,8 @@ export declare class RowState {
     get collapsedIds(): string[];
     isCollapsed(id: string): boolean;
     toggleCollapsed(id: string): void;
+    private getVisibleChildrenStates;
+    private setNestedSelectedStates;
 }
 /** Provides a context for rows to access their table's `RowState`. */
 export declare const RowStateContext: React.Context<{

package/dist/components/Table/RowState.js

@@ -37,6 +37,13 @@ class RowState {
         // 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, { rows: false }); // as any b/c rows is private, so the mapped type doesn't see it
+        // Whenever our `visibleRows` change (i.e. via filtering) then we need to re-derive header and parent rows' selected state.
+        (0, mobx_1.reaction)(() => [...this.visibleRows.values()].sort(), () => {
+            const map = new Map();
+            map.set("header", deriveParentSelected(this.rows.current.flatMap((row) => this.setNestedSelectedStates(row, map))));
+            // Merge the changes back into the selected rows state
+            this.selectedRows.merge(map);
+        }, { equals: mobx_1.comparer.shallow });
     }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
@@ -62,7 +69,7 @@ class RowState {
                 // Just mash the header + all rows + children as selected
                 const map = new Map();
                 map.set("header", "checked");
-                (0, visitor_1.visit)(this.rows.current, (row) => map.set(row.id, "checked"));
+                (0, visitor_1.visit)(this.rows.current, (row) => this.visibleRows.has(row.id) && map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {
@@ -80,19 +87,15 @@ class RowState {
             }
             // Everything here & down is deterministically on/off
             const map = new Map();
-            (0, visitor_1.visit)([curr.row], (row) => map.set(row.id, selected ? "checked" : "unchecked"));
+            (0, visitor_1.visit)([curr.row], (row) => this.visibleRows.has(row.id) && map.set(row.id, selected ? "checked" : "unchecked"));
             // Now walk up the parents and see if they are now-all-checked/now-all-unchecked/some-of-each
             for (const parent of [...curr.parents].reverse()) {
                 if (parent.children) {
-                    const children = parent.children.map((row) => map.get(row.id) || this.getSelected(row.id));
-                    map.set(parent.id, deriveParentSelected(children));
+                    map.set(parent.id, deriveParentSelected(this.getVisibleChildrenStates(parent.children, map)));
                 }
             }
             // And do the header + top-level "children" as a final one-off
-            const children = this.rows.current
-                .filter((row) => row.id !== "header")
-                .map((row) => map.get(row.id) || this.getSelected(row.id));
-            map.set("header", deriveParentSelected(children));
+            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows.current, map)));
             this.selectedRows.merge(map);
         }
     }
@@ -145,6 +148,24 @@ class RowState {
             localStorage.setItem(this.persistCollapse, JSON.stringify(collapsedIds));
         }
     }
+    getVisibleChildrenStates(children, map) {
+        return children
+            .filter((row) => row.id !== "header" && this.visibleRows.has(row.id))
+            .map((row) => map.get(row.id) || this.getSelected(row.id));
+    }
+    // Recursively traverse through rows to determine selected state of parent rows based on children
+    setNestedSelectedStates(row, map) {
+        if (this.visibleRows.has(row.id)) {
+            if (!row.children) {
+                return [this.getSelected(row.id)];
+            }
+            const childrenSelectedStates = row.children.flatMap((rc) => this.setNestedSelectedStates(rc, map));
+            const parentState = deriveParentSelected(childrenSelectedStates);
+            map.set(row.id, parentState);
+            return [parentState];
+        }
+        return [];
+    }
 }
 exports.RowState = RowState;
 /** Provides a context for rows to access their table's `RowState`. */
@@ -177,5 +198,5 @@ function findRow(rows, id) {
 function deriveParentSelected(children) {
     const allChecked = children.every((child) => child === "checked");
     const allUnchecked = children.every((child) => child === "unchecked");
-    return allChecked ? "checked" : allUnchecked ? "unchecked" : "partial";
+    return children.length === 0 ? "unchecked" : allChecked ? "checked" : allUnchecked ? "unchecked" : "partial";
 }

package/package.json

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