@homebound/beam 2.304.1 → 2.305.0

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

@@ -1,5 +1,6 @@
-import { GridDataRow, SelectedState } from "../../..";
+import { GridDataRow } from "../components/Row";
 import { RowStates } from "./RowStates";
+import { SelectedState } from "./TableState";
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -7,6 +8,7 @@ import { RowStates } from "./RowStates";
  * that uses parent/children easier to write, i.e. selected-ness and collapsed-ness.
  */
 export declare class RowState {
+    private states;
     /** Our row, only ref observed, so we don't crawl into GraphQL fragments. */
     row: GridDataRow<any>;
     /** Our children row states, as of the latest `props.rows`, without any filtering applied. */

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowState = void 0;
 const mobx_1 = require("mobx");
-const src_1 = require("../../..");
+const utils_1 = require("./utils");
 /**
  * A reactive/observable state of each GridDataRow's current behavior.
  *
@@ -15,6 +15,7 @@ class RowState {
     // isEffectiveMatched = isDirectlyMatched || hasMatchedChildren
     constructor(states, row) {
         var _a;
+        this.states = states;
         /** 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. */
@@ -108,21 +109,19 @@ class RowState {
      * child of a selected parent row.
      */
     select(selected) {
-        if (this.row.selectable === false)
-            return;
-        this.selected = selected;
+        if (this.row.selectable !== false) {
+            this.selected = selected;
+        }
         // We don't check inferSelectedState here, b/c even if the parent is considered selectable
         // on its own, we still push down selected-ness to our visible children.
-        if (this.children) {
-            for (const child of this.visibleChildren) {
-                child.select(selected);
-            }
+        for (const child of this.visibleChildren) {
+            child.select(selected);
         }
     }
     /** 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)
+        if (this.row.kind === utils_1.KEPT_GROUP)
             return;
         this.removed = this.selected && this.removed !== "hard" ? "soft" : "hard";
     }
@@ -136,7 +135,7 @@ class RowState {
         // - or it has (probably) been server-side filtered
         return (this.selected &&
             // Headers, totals, etc., do not need keeping
-            !src_1.reservedRowKinds.includes(this.row.kind) &&
+            !utils_1.reservedRowKinds.includes(this.row.kind) &&
             !this.isParent &&
             (!this.isMatched || this.removed === "soft"));
     }
@@ -144,15 +143,15 @@ class RowState {
         return this.row.inferSelectedState !== false;
     }
     get visibleChildren() {
-        var _a, _b, _c;
-        // 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 : [];
+        var _a, _b;
+        // The keptGroup is special and its children are the dynamically kept rows
+        if (this.row.kind === utils_1.KEPT_GROUP)
+            return this.states.keptRows;
         // 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 : [];
+        return (_b = (_a = this.children) === null || _a === void 0 ? void 0 : _a.filter((c) => c.isMatched === true && c.removed !== "hard")) !== null && _b !== void 0 ? _b : [];
     }
     /**
      * Returns whether this row should act like a parent.

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

@@ -31,5 +31,5 @@ export declare class RowStates {
     get keptRows(): RowState[];
     get collapsedRows(): RowState[];
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
-    private creatKeptGroupRow;
+    private createKeptGroupRow;
 }

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

@@ -14,7 +14,7 @@ class RowStates {
         this.map = new mobx_1.ObservableMap();
         this.storage = new RowStorage_1.RowStorage(this);
         // Pre-create our keptGroupRow for if/when we need it.
-        this.keptGroupRow = this.creatKeptGroupRow();
+        this.keptGroupRow = this.createKeptGroupRow();
         this.header = undefined;
         /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
         this.topRows = [];
@@ -65,22 +65,16 @@ class RowStates {
         this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(row));
         // And attach them to the header for select-all/etc. to work
         if (this.header) {
-            this.header.children = this.topRows.filter((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind));
+            this.header.children = [
+                // Always add the keptGroupRow, and we'll use keptGroupRow.isMatched=true/false to keep it
+                // from messing up "header is all selected" if its hidden/when there are no kept rows.
+                this.keptGroupRow,
+                ...this.topRows.filter((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind)),
+            ];
         }
         // Then mark any remaining as removed
         for (const state of existing)
             state.markRemoved();
-        const keptRows = this.keptRows;
-        if (keptRows.length > 0) {
-            // Stitch the current keptRows into the placeholder keptGroupRow
-            this.keptGroupRow.children = keptRows;
-            this.keptGroupRow.row.children = keptRows.map((rs) => rs.row);
-            // And then stitch the keptGroupRow itself into the root header, so that the kept rows
-            // are treated as just another child for the header's select/unselect all to work.
-            if (this.header) {
-                this.header.children.unshift(this.keptGroupRow);
-            }
-        }
         // After the first load of real data, we detach collapse state, to respect
         // any incoming initCollapsed.
         if (this.topRows.some((rs) => !utils_1.reservedRowKinds.includes(rs.row.kind))) {
@@ -134,6 +128,11 @@ class RowStates {
                 rs.isMatched = ids.includes(rs.row.id);
             }
         }
+        // We cheat a little and pretend the "kept group matches the filter" not based on it itself
+        // literally matching the filter, or its children matching the filter (which is typically
+        // how the filter logic works), but if it just has any child rows at all (which actually means
+        // its children did _not_ match the filter, but are kept).
+        this.keptGroupRow.isMatched = this.keptRows.length > 0;
     }
     /** Returns kept rows, i.e. those that were user-selected but then client-side or server-side filtered. */
     get keptRows() {
@@ -143,10 +142,20 @@ class RowStates {
         return this.allStates.filter((rs) => rs.collapsed);
     }
     /** Create our synthetic "group row" for kept rows, that users never pass in, but we self-inject as needed. */
-    creatKeptGroupRow() {
+    createKeptGroupRow() {
         // The "group row" for selected rows that are hidden by filters and add the children
-        const keptGroupRow = { id: utils_1.KEPT_GROUP, kind: utils_1.KEPT_GROUP, initCollapsed: true, data: undefined };
-        return new RowState_1.RowState(this, keptGroupRow);
+        const keptGroupRow = {
+            id: utils_1.KEPT_GROUP,
+            kind: utils_1.KEPT_GROUP,
+            initCollapsed: true,
+            selectable: false,
+            data: undefined,
+            children: [],
+        };
+        const rs = new RowState_1.RowState(this, keptGroupRow);
+        // Make the RowState behave like a parent, even though we calc its visibleChildren.
+        rs.children = [];
+        return rs;
     }
 }
 exports.RowStates = RowStates;

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

@@ -45,12 +45,8 @@ class TableState {
         // 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, {
-            // We only shallow observe rows so that:
-            // a) we don't deeply/needlessly proxy-ize a large Apollo fragment cache, but
-            // b) if rows changes, we re-run computeds like getSelectedRows that may need to see the
-            // 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,
+            // We use `ref`s so that observables can watch the immutable data change w/o deeply proxy-ifying Apollo fragments
+            rows: mobx_1.observable.ref,
             columns: mobx_1.observable.ref,
         });
         // If the kept rows went from empty to not empty, then introduce the SELECTED_GROUP row as collapsed
@@ -119,10 +115,6 @@ 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;

package/package.json

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