@homebound/beam 2.136.0 → 2.136.1

package/dist/components/Table/GridTable.js

@@ -140,8 +140,8 @@ function GridTable(props) {
         }
         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)) {
+            // Always filter children rows whether or not they are collapsed in order to determine proper "selected" state of the group row.
+            if (!!((_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) {
@@ -152,7 +152,7 @@ function GridTable(props) {
         return acc;
     }, [filter, collapsedIds, columns]);
     // Flatten + component-ize the sorted rows.
-    let [headerRows, filteredRows, totalsRows] = (0, react_1.useMemo)(() => {
+    let [headerRows, visibleDataRows, totalsRows, filteredRowIds] = (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.
@@ -178,20 +178,25 @@ function GridTable(props) {
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
         const totalsRows = [];
-        const filteredRows = [];
+        const visibleDataRows = [];
+        const filteredRowIds = [];
         // 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);
-        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 && children.length) {
-                nestedCards && nestedCards.addSpacer();
-                visitRows(children, isCard, level + 1);
+        const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, visibleDataRows, style.nestedCards);
+        function visit([row, children], level, visible) {
+            let isCard = visible && nestedCards && nestedCards.maybeOpenCard(row);
+            visible && visibleDataRows.push([row, makeRowComponent(row, level)]);
+            // This row may be invisible (because it's parent is collapsed), but we still want
+            // to consider it matched if it or it's parent matched a filter.
+            filteredRowIds.push(row.id);
+            if (children.length) {
+                // Consider "isCollapsed" as true if the parent wasn't visible.
+                const isCollapsed = !visible || collapsedIds.includes(row.id);
+                !isCollapsed && nestedCards && nestedCards.addSpacer();
+                visitRows(children, isCard, level + 1, !isCollapsed);
             }
-            !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
+            visible && !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
         }
-        function visitRows(rows, addSpacer, level) {
+        function visitRows(rows, addSpacer, level, visible) {
             const length = rows.length;
             rows.forEach((row, i) => {
                 if (row[0].kind === "header") {
@@ -202,15 +207,15 @@ function GridTable(props) {
                     totalsRows.push([row[0], makeRowComponent(row[0], level)]);
                     return;
                 }
-                visit(row, level);
-                addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
+                visit(row, level, visible);
+                visible && 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.reduce(filterRows, []), !!nestedCards, 0);
+        visitRows(maybeSorted.reduce(filterRows, []), !!nestedCards, 0, true);
         nestedCards && nestedCards.done();
-        return [headerRows, filteredRows, totalsRows];
+        return [headerRows, visibleDataRows, totalsRows, filteredRowIds];
     }, [
         as,
         maybeSorted,
@@ -230,21 +235,21 @@ function GridTable(props) {
         hasTotalsRow,
     ]);
     let tooManyClientSideRows = false;
-    if (filterMaxRows && filteredRows.length > filterMaxRows) {
+    if (filterMaxRows && visibleDataRows.length > filterMaxRows) {
         tooManyClientSideRows = true;
-        filteredRows = filteredRows.slice(0, filterMaxRows);
+        visibleDataRows = visibleDataRows.slice(0, filterMaxRows);
     }
-    rowState.setVisibleRows(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
+    rowState.setMatchedRows(filteredRowIds);
     // Push back to the caller a way to ask us where a row is.
     const { rowLookup } = props;
     if (rowLookup) {
         // Refs are cheap to assign to, so we don't bother doing this in a useEffect
-        rowLookup.current = (0, GridRowLookup_1.createRowLookup)(columns, filteredRows, virtuosoRef);
+        rowLookup.current = (0, GridRowLookup_1.createRowLookup)(columns, visibleDataRows, virtuosoRef);
     }
     (0, react_1.useEffect)(() => {
-        setRowCount && (filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length) !== undefined && setRowCount(filteredRows.length);
-    }, [filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length, setRowCount]);
-    const noData = filteredRows.length === 0;
+        setRowCount && (visibleDataRows === null || visibleDataRows === void 0 ? void 0 : visibleDataRows.length) !== undefined && setRowCount(visibleDataRows.length);
+    }, [visibleDataRows === null || visibleDataRows === void 0 ? void 0 : visibleDataRows.length, setRowCount]);
+    const noData = visibleDataRows.length === 0;
     const firstRowMessage = (noData && fallbackMessage) || (tooManyClientSideRows && "Hiding some rows, use filter...") || infoMessage;
     const borderless = (_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.borderless;
     const typeScale = (_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.typeScale;
@@ -263,7 +268,7 @@ function GridTable(props) {
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
     const rowStateContext = (0, react_1.useMemo)(() => ({ rowState }), [rowState]);
-    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -273,7 +278,7 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
+function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             // Use `fit-content` to ensure the width of the table takes up the full width of its content.
             // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
@@ -290,10 +295,10 @@ function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, fir
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), filteredRows.map(([, node]) => node)] }), void 0));
+        }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), visibleDataRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
+function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
             ...Css_1.Css.w100.add("borderCollapse", "collapse").$,
             ...Css_1.Css.addIn("& > tbody > tr ", style.betweenRowsCss || {})
@@ -302,7 +307,7 @@ function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, f
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: [...totalsRows, ...headerRows].map(([, node]) => node) }, void 0), (0, jsx_runtime_1.jsxs)("tbody", { children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: columns.length, css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }, void 0)), filteredRows.map(([, node]) => node)] }, void 0)] }), void 0));
+        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: [...totalsRows, ...headerRows].map(([, node]) => node) }, void 0), (0, jsx_runtime_1.jsxs)("tbody", { children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: columns.length, css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }, void 0)), visibleDataRows.map(([, node]) => node)] }, void 0)] }), void 0));
 }
 /**
  * Uses react-virtuoso to render rows virtually.
@@ -324,7 +329,7 @@ function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, f
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
+function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
@@ -363,8 +368,8 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows,
                 index--;
             }
             // Lastly render `filteredRow`
-            return filteredRows[index][1];
-        }, totalCount: (headerRows.length || 0) + (totalsRows.length || 0) + (firstRowMessage ? 1 : 0) + (filteredRows.length || 0) }, void 0));
+            return visibleDataRows[index][1];
+        }, totalCount: (headerRows.length || 0) + (totalsRows.length || 0) + (firstRowMessage ? 1 : 0) + (visibleDataRows.length || 0) }, void 0));
 }
 /**
  * A table might render two of these components to represent two virtual lists.

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

@@ -20,7 +20,7 @@ export declare class RowState {
     private readonly collapsedRows;
     private persistCollapse;
     private readonly selectedRows;
-    private visibleRows;
+    private matchedRows;
     rows: GridDataRow<any>[];
     activeRowId: string | undefined;
     /**
@@ -29,14 +29,14 @@ export declare class RowState {
     constructor();
     loadCollapse(persistCollapse: string | undefined, rows: GridDataRow<any>[]): void;
     setRows(rows: GridDataRow<any>[]): void;
-    setVisibleRows(rowIds: string[]): void;
+    setMatchedRows(rowIds: string[]): void;
     get selectedIds(): string[];
     getSelected(id: string): SelectedState;
     selectRow(id: string, selected: boolean): void;
     get collapsedIds(): string[];
     isCollapsed(id: string): boolean;
     toggleCollapsed(id: string): void;
-    private getVisibleChildrenStates;
+    private getMatchedChildrenStates;
     private setNestedSelectedStates;
 }
 /** Provides a context for rows to access their table's `RowState`. */

package/dist/components/Table/RowState.js

@@ -30,8 +30,8 @@ class RowState {
         // A set of just row ids, i.e. not row.kind+row.id
         this.collapsedRows = new mobx_1.ObservableSet();
         this.selectedRows = new mobx_1.ObservableMap();
-        // Set of just row ids. Keeps track of which rows are visible. Used to filter out non-visible rows from `selectedIds`
-        this.visibleRows = new mobx_1.ObservableSet();
+        // Set of just row ids. Keeps track of which rows match the filter. Used to filter rows from `selectedIds`
+        this.matchedRows = new mobx_1.ObservableSet();
         // The current list of rows, basically a useRef.current. Not reactive.
         this.rows = [];
         // Keeps track of the 'active' row, formatted `${row.kind}_${row.id}`
@@ -42,11 +42,11 @@ class RowState {
         // 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/visible row states don't change.
+        // 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 });
-        // 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(), () => {
+        // Whenever our `matchedRows` change (i.e. via filtering) then we need to re-derive header and parent rows' selected state.
+        (0, mobx_1.reaction)(() => [...this.matchedRows.values()].sort(), () => {
             const map = new Map();
             map.set("header", deriveParentSelected(this.rows.flatMap((row) => this.setNestedSelectedStates(row, map))));
             // Merge the changes back into the selected rows state
@@ -95,20 +95,20 @@ class RowState {
         // Finally replace our existing list of rows
         this.rows = rows;
     }
-    setVisibleRows(rowIds) {
+    setMatchedRows(rowIds) {
         // ObservableSet doesn't seem to do a `diff` inside `replace` before firing
         // observers/reactions that watch it, which can lead to render loops with the
         // application page is observing `GridTableApi.getSelectedRows`, and merely
         // the act of rendering GridTable (w/o row changes) causes it's `useComputed`
         // to be triggered.
-        if (!mobx_1.comparer.shallow(rowIds, [...this.visibleRows.values()])) {
-            this.visibleRows.replace(rowIds);
+        if (!mobx_1.comparer.shallow(rowIds, [...this.matchedRows.values()])) {
+            this.matchedRows.replace(rowIds);
         }
     }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
         const ids = [...this.selectedRows.entries()]
-            .filter(([id, v]) => this.visibleRows.has(id) && v === "checked")
+            .filter(([id, v]) => this.matchedRows.has(id) && v === "checked")
             .map(([k]) => k);
         // Hide our header marker
         const headerIndex = ids.indexOf("header");
@@ -129,7 +129,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, (row) => this.visibleRows.has(row.id) && row.kind !== "totals" && map.set(row.id, "checked"));
+                (0, visitor_1.visit)(this.rows, (row) => this.matchedRows.has(row.id) && row.kind !== "totals" && map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {
@@ -147,15 +147,15 @@ class RowState {
             }
             // Everything here & down is deterministically on/off
             const map = new Map();
-            (0, visitor_1.visit)([curr.row], (row) => this.visibleRows.has(row.id) && map.set(row.id, selected ? "checked" : "unchecked"));
+            (0, visitor_1.visit)([curr.row], (row) => this.matchedRows.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) {
-                    map.set(parent.id, deriveParentSelected(this.getVisibleChildrenStates(parent.children, map)));
+                    map.set(parent.id, deriveParentSelected(this.getMatchedChildrenStates(parent.children, map)));
                 }
             }
             // And do the header + top-level "children" as a final one-off
-            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows, map)));
+            map.set("header", deriveParentSelected(this.getMatchedChildrenStates(this.rows, map)));
             this.selectedRows.merge(map);
         }
     }
@@ -218,14 +218,14 @@ class RowState {
             sessionStorage.setItem(this.persistCollapse, JSON.stringify(collapsedIds));
         }
     }
-    getVisibleChildrenStates(children, map) {
+    getMatchedChildrenStates(children, map) {
         return children
-            .filter((row) => row.id !== "header" && this.visibleRows.has(row.id))
+            .filter((row) => row.id !== "header" && this.matchedRows.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 (this.matchedRows.has(row.id)) {
             if (!row.children) {
                 return [this.getSelected(row.id)];
             }

package/package.json

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