@homebound/beam 2.117.4 → 2.118.2

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

@@ -149,6 +149,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     /** Whether the header row should be sticky. */
     stickyHeader?: boolean;
     stickyOffset?: string;
+    /** Configures sorting via a hash, does not need to be stable. */
     sorting?: GridSortConfig<S>;
     /** Shown in the first row slot, if there are no rows to show, i.e. 'No rows found'. */
     fallbackMessage?: string;

package/dist/components/Table/GridTable.js

@@ -85,7 +85,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api: callerApi, resizeTarget, activeRowId, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api: callerApi, resizeTarget, activeRowId, } = props;
     // Create a ref that always contains the latest rows, for our effectively-singleton RowState to use
     const rowsRef = (0, react_1.useRef)(rows);
     rowsRef.current = rows;
@@ -127,25 +127,49 @@ 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 [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
+    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, sortOn] = (0, useSortState_1.useSortState)(columns, props.sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
-        if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
+        if (sortOn === "client" && sortState) {
             // If using client-side sort, the sortState use S = number
             return (0, sortRows_1.sortRows)(columns, rows, sortState);
         }
         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)(() => {
+    }, [columns, rows, sortOn, sortState]);
+    // 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, columns]);
+    // 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.
-            const sortProps = row.kind === "header" ? { sorting, sortState, setSortKey } : { sorting };
+            const sortProps = row.kind === "header" ? { sortOn, sortState, setSortKey } : { sortOn };
             const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
             return ((0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
                 as,
@@ -168,48 +192,40 @@ 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];
     }, [
         as,
         maybeSorted,
         columns,
-        filter,
+        filterRows,
         style,
         rowStyles,
-        sorting,
+        sortOn,
         setSortKey,
         sortState,
         stickyHeader,
@@ -224,7 +240,7 @@ function GridTable(props) {
         tooManyClientSideRows = true;
         filteredRows = filteredRows.slice(0, filterMaxRows);
     }
-    rowState.visibleRows.replace(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
+    rowState.setVisibleRows(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
     // Push back to the caller a way to ask us where a row is.
     const { rowLookup } = props;
     if (rowLookup) {
@@ -468,7 +484,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, getCount, api, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, openCards, columnSizes, level, getCount, api, ...others } = props;
     const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
     const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === `${row.kind}_${row.id}`, [row, rowState]);
     // We treat the "header" kind as special for "good defaults" styling
@@ -511,12 +527,12 @@ function GridRow(props) {
             }
             const maybeContent = applyRowFn(column, row, api);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
-            const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
-                ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
+            const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
+                (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = getAlignment(column, maybeContent);
             const justificationCss = getJustification(column, maybeContent, as, alignment);
-            const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
-            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
+            const content = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment);
+            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader, column, columnIndex, maybeContent);
             const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
             const maybeSticky = (_b = ((isGridCellContent(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes

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

@@ -1,4 +1,3 @@
-import { ObservableSet } from "mobx";
 import React, { MutableRefObject } from "react";
 import { GridDataRow } from "./GridTable";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
@@ -22,18 +21,21 @@ export declare class RowState {
     private persistCollapse;
     private readonly collapsedRows;
     private readonly selectedRows;
-    visibleRows: ObservableSet<string>;
+    private visibleRows;
     activeRowId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined, activeRowId: string | undefined);
+    setVisibleRows(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 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,23 @@ 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 });
+    }
+    setVisibleRows(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);
+        }
     }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
@@ -62,7 +79,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 +97,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 +158,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 +208,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/dist/components/Table/sortRows.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { GridCellContent, GridColumn, GridDataRow, GridSortConfig, Kinded } from "./GridTable";
-import { SortState } from "./useSortState";
+import { GridCellContent, GridColumn, GridDataRow, Kinded } from "./GridTable";
+import { SortOn, SortState } from "./useSortState";
 export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>): GridDataRow<R>[];
-export declare function ensureClientSideSortValueIsSortable(sorting: GridSortConfig<any> | undefined, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;
+export declare function ensureClientSideSortValueIsSortable(sortOn: SortOn, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

package/dist/components/Table/sortRows.js

@@ -64,11 +64,8 @@ function sortValue(value) {
     }
     return maybeFn;
 }
-function ensureClientSideSortValueIsSortable(sorting, isHeader, column, idx, maybeContent) {
-    if (process.env.NODE_ENV !== "production" &&
-        !isHeader &&
-        (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" &&
-        column.clientSideSort !== false) {
+function ensureClientSideSortValueIsSortable(sortOn, isHeader, column, idx, maybeContent) {
+    if (process.env.NODE_ENV !== "production" && !isHeader && sortOn === "client" && column.clientSideSort !== false) {
         const value = sortValue(maybeContent);
         if (!canClientSideSort(value)) {
             throw new Error(`Column ${idx} passed an unsortable value, use GridCellContent or clientSideSort=false`);

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

@@ -8,6 +8,7 @@ import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
  * b) it's index in the `columns` array, if client-side sorting
  */
 export declare type SortState<S> = readonly [S, Direction];
+export declare type SortOn = "client" | "server" | undefined;
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
-export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void];
+export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void, SortOn];
 export declare function deriveSortState<S>(currentSortState: SortState<S> | undefined, clickedKey: S, initialSortState: SortState<S> | undefined): SortState<S> | undefined;

package/dist/components/Table/useSortState.js

@@ -28,20 +28,26 @@ function useSortState(columns, sorting) {
         else {
             return sorting === null || sorting === void 0 ? void 0 : sorting.value;
         }
-    }, [sorting, columns]);
+    }, 
+    // We want to allow the user to not memoize `GridTableProps.sorting` b/c for the
+    // initialSortState calc, it's just a bunch of surely hard-coded primitives like
+    // sort on client/server, which column is initial.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columns]);
     const [sortState, setSortState] = (0, react_1.useState)(initialSortState);
     // Make a custom setSortKey that is useState-like but contains the ASC->DESC->RESET logic.
+    const onSort = (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" ? sorting.onSort : undefined;
     const setSortKey = (0, react_1.useCallback)((clickedKey) => {
         const newState = deriveSortState(sortState, clickedKey, initialSortState);
         setSortState(newState);
-        if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server") {
+        if (onSort) {
             const [newKey, newDirection] = newState !== null && newState !== void 0 ? newState : [undefined, undefined];
-            sorting.onSort(newKey, newDirection);
+            onSort(newKey, newDirection);
         }
     }, 
     // Note that sorting.onSort is not listed here, so we bind to whatever the 1st sorting.onSort was
-    [sortState, setSortState]);
-    return [sortState, setSortKey];
+    [initialSortState, sortState, onSort]);
+    return [sortState, setSortKey, sorting === null || sorting === void 0 ? void 0 : sorting.on];
 }
 exports.useSortState = useSortState;
 // Exported for testing purposes

package/package.json

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