@homebound/beam 2.292.0 → 2.294.0

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

@@ -132,6 +132,10 @@ export interface GridTableProps<R extends Kinded, X> {
  * In a "kind" of cute way, headers are not modeled specially, i.e. they are just another
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
+ *
+ * For some rationale of our current/historical rendering approaches, see the following doc:
+ *
+ * https://docs.google.com/document/d/1DFnlkDubK4nG_GLf_hB8yp0flnSNt_3IBh5iOicuaFM/edit#heading=h.9m9cpwgeqfc9
  */
 export declare function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = any>(props: GridTableProps<R, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**

package/dist/components/Table/GridTable.js

@@ -80,6 +80,10 @@ exports.setGridTableDefaults = setGridTableDefaults;
  * In a "kind" of cute way, headers are not modeled specially, i.e. they are just another
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
+ *
+ * For some rationale of our current/historical rendering approaches, see the following doc:
+ *
+ * https://docs.google.com/document/d/1DFnlkDubK4nG_GLf_hB8yp0flnSNt_3IBh5iOicuaFM/edit#heading=h.9m9cpwgeqfc9
  */
 function GridTable(props) {
     var _a, _b, _c;
@@ -136,9 +140,18 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sortOn, sortState, caseSensitive]);
+    const keptSelectedDataRows = (0, hooks_1.useComputed)(() => tableState.keptSelectedRows, [tableState]);
+    // Sort the `keptSelectedDataRows` separately because the current sorting logic sorts within groups and these "kept" rows are now displayed in a flat list.
+    // It could also be the case that some of these rows are no longer in the `props.rows` list, and so wouldn't be sorted by the `maybeSorted` logic above.
+    const sortedKeptSelections = (0, react_1.useMemo)(() => {
+        if (sortOn === "client" && sortState && keptSelectedDataRows.length > 0) {
+            return (0, sortRows_1.sortRows)(columns, keptSelectedDataRows, sortState, caseSensitive);
+        }
+        return keptSelectedDataRows;
+    }, [columns, sortOn, sortState, caseSensitive, keptSelectedDataRows]);
     // Flatten + component-ize the sorted rows.
-    let [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, filteredRowIds] = (0, react_1.useMemo)(() => {
-        function makeRowComponent(row, level) {
+    let [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, keptSelectedRows, filteredRowIds] = (0, react_1.useMemo)(() => {
+        function makeRowComponent(row, level, isKeptSelectedRow = false, isLastKeptSelectionRow = false) {
             return ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...{
                     as,
                     columns,
@@ -153,6 +166,8 @@ function GridTable(props) {
                     omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
                     sortOn,
                     hasExpandableHeader,
+                    isKeptSelectedRow,
+                    isLastKeptSelectionRow,
                 } }, `${row.kind}-${row.id}`));
         }
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
@@ -160,8 +175,8 @@ function GridTable(props) {
         const expandableHeaderRows = [];
         const totalsRows = [];
         const visibleDataRows = [];
+        const keptSelectedRows = [];
         const filteredRowIds = [];
-        const hasTotalsRow = rows.some((row) => row.id === utils_1.TOTALS);
         const hasExpandableHeader = rows.some((row) => row.id === utils_1.EXPANDABLE_HEADER);
         function visit([row, children], level, visible) {
             visible && visibleDataRows.push([row, makeRowComponent(row, level)]);
@@ -194,14 +209,45 @@ function GridTable(props) {
         // Call `visitRows` with our a pre-filtered set list
         const filteredRows = filterRows(api, columns, maybeSorted, filter);
         visitRows(filteredRows, 0, true);
-        return [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, filteredRowIds];
-    }, [as, api, filter, maybeSorted, columns, style, rowStyles, sortOn, columnSizes, collapsedIds, getCount]);
+        // Check for any selected rows that are not displayed in the table because they don't match the current filter, or are no longer part of the `rows` prop.
+        // We persist these selected rows and hoist them to the top of the table.
+        if (sortedKeptSelections.length) {
+            // The "group row" for selected rows that are hidden by filters and add the children
+            const keptSelectionGroupRow = {
+                id: utils_1.KEPT_GROUP,
+                kind: utils_1.KEPT_GROUP,
+                children: sortedKeptSelections,
+                initCollapsed: true,
+                data: undefined,
+            };
+            keptSelectedRows.push([keptSelectionGroupRow, makeRowComponent(keptSelectionGroupRow, 1)], ...(collapsedIds.includes(utils_1.KEPT_GROUP)
+                ? []
+                : (sortedKeptSelections.map((row, idx) => [
+                    row,
+                    makeRowComponent(row, 1, true, idx === sortedKeptSelections.length - 1),
+                ]))));
+        }
+        return [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, keptSelectedRows, filteredRowIds];
+    }, [
+        as,
+        api,
+        filter,
+        maybeSorted,
+        columns,
+        style,
+        rowStyles,
+        sortOn,
+        columnSizes,
+        collapsedIds,
+        getCount,
+        sortedKeptSelections,
+    ]);
     // Once our header rows are created we can organize them in expected order.
     const tableHeadRows = expandableHeaderRows.concat(headerRows).concat(totalsRows);
     let tooManyClientSideRows = false;
     if (filterMaxRows && visibleDataRows.length > filterMaxRows) {
         tooManyClientSideRows = true;
-        visibleDataRows = visibleDataRows.slice(0, filterMaxRows);
+        visibleDataRows = visibleDataRows.slice(0, filterMaxRows + keptSelectedRows.length);
     }
     tableState.setMatchedRows(filteredRowIds);
     // Push back to the caller a way to ask us where a row is.
@@ -232,7 +278,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)(() => ({ tableState: tableState }), [tableState]);
-    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { 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.if(as === "virtual").w("calc(100% - 20px)").$ }), renders[_as](style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { 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.if(as === "virtual").w("calc(100% - 20px)").$ }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -242,7 +288,7 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
+function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
     return ((0, jsx_runtime_1.jsxs)("div", { 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.
@@ -259,10 +305,10 @@ function renderDiv(style, id, columns, visibleDataRows, firstRowMessage, stickyH
                     ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {}),
                     ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type > *`, style.firstNonHeaderRowCss).$ : {}),
                     ...(style.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
-                }, children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows.map(([, node]) => node)] })] }));
+                }, children: [keptSelectedRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows.map(([, node]) => node)] })] }));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
+function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
     return ((0, jsx_runtime_1.jsxs)("table", { css: {
             ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
             ...Css_1.Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
@@ -273,7 +319,7 @@ function renderTable(style, id, columns, visibleDataRows, firstRowMessage, stick
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("thead", { css: Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$, children: tableHeadRows.map(([, node]) => node) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })), visibleDataRows.map(([, node]) => node)] })] }));
+        }, "data-testid": id, children: [(0, jsx_runtime_1.jsx)("thead", { css: Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$, children: tableHeadRows.map(([, node]) => node) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [keptSelectedRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })), visibleDataRows.map(([, node]) => node)] })] }));
 }
 /**
  * Uses react-virtuoso to render rows virtually.
@@ -295,7 +341,7 @@ function renderTable(style, id, columns, visibleDataRows, firstRowMessage, stick
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, _stickyOffset, infiniteScroll) {
+function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, _stickyOffset, infiniteScroll) {
     var _a;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
@@ -310,13 +356,19 @@ function renderVirtual(style, id, columns, visibleDataRows, firstRowMessage, sti
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
-        topItemCount: (stickyHeader ? tableHeadRows.length : 0) + (firstRowMessage ? 1 : 0), itemContent: (index) => {
-            // Since we have 2 arrays of rows: `tableHeadRows`, and `filteredRow` we must determine which one to render.
+        topItemCount: stickyHeader ? tableHeadRows.length : 0, itemContent: (index) => {
+            // Since we have 3 arrays of rows: `tableHeadRows` and `visibleDataRows` and `keptSelectedRows` we must determine which one to render.
             if (index < tableHeadRows.length) {
                 return tableHeadRows[index][1];
             }
             // Reset index
             index -= tableHeadRows.length;
+            // Show keptSelectedRows if there are any
+            if (index < keptSelectedRows.length) {
+                return keptSelectedRows[index][1];
+            }
+            // Reset index
+            index -= keptSelectedRows.length;
             // Show firstRowMessage as the first `filteredRow`
             if (firstRowMessage) {
                 if (index === 0) {
@@ -326,9 +378,9 @@ function renderVirtual(style, id, columns, visibleDataRows, firstRowMessage, sti
                 // first `filteredRow`
                 index--;
             }
-            // Lastly render `filteredRow`
+            // Lastly render the table body rows
             return visibleDataRows[index][1];
-        }, totalCount: tableHeadRows.length + (firstRowMessage ? 1 : 0) + visibleDataRows.length, ...(infiniteScroll
+        }, totalCount: tableHeadRows.length + (firstRowMessage ? 1 : 0) + visibleDataRows.length + keptSelectedRows.length, ...(infiniteScroll
             ? {
                 increaseViewportBy: {
                     bottom: (_a = infiniteScroll.endOffsetPx) !== null && _a !== void 0 ? _a : 500,

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

@@ -16,7 +16,7 @@ import { TableState } from "./utils/TableState";
  * This is very similar to a `useRef`, except that the parent function has
  * immediate access to `api` and can use it for `useComputed`, instead of
  * having to wait for `ref.current` to be set after the child `GridTable`
- * has ran.
+ * has run.
  */
 export declare function useGridTableApi<R extends Kinded>(): GridTableApi<R>;
 /** Provides an imperative API for an application page to interact with the table. */

package/dist/components/Table/GridTableApi.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTableApiImpl = exports.useGridTableApi = void 0;
 const react_1 = require("react");
 const TableState_1 = require("./utils/TableState");
-const visitor_1 = require("./utils/visitor");
 /**
  * Creates an `api` handle to drive a `GridTable`.
  *
@@ -17,7 +16,7 @@ const visitor_1 = require("./utils/visitor");
  * This is very similar to a `useRef`, except that the parent function has
  * immediate access to `api` and can use it for `useComputed`, instead of
  * having to wait for `ref.current` to be set after the child `GridTable`
- * has ran.
+ * has run.
  */
 function useGridTableApi() {
     return (0, react_1.useMemo)(() => new GridTableApiImpl(), []);
@@ -42,16 +41,9 @@ class GridTableApiImpl {
     getSelectedRowIds(kind) {
         return this.getSelectedRows(kind).map((row) => row.id);
     }
-    // The any is not great, but getting the overload to handle the optional kind is annoying
+    // The `any` is not great, but getting the overload to handle the optional kind is annoying
     getSelectedRows(kind) {
-        const ids = this.tableState.selectedIds;
-        const selected = [];
-        (0, visitor_1.visit)(this.tableState.rows, (row) => {
-            if (row.selectable !== false && ids.includes(row.id) && (!kind || row.kind === kind)) {
-                selected.push(row);
-            }
-        });
-        return selected;
+        return this.tableState.selectedRows.filter((row) => !kind || row.kind === kind);
     }
     clearSelections(id) {
         this.tableState.selectRow("header", false);

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

@@ -50,6 +50,10 @@ export interface GridStyle {
     }>;
     /** Allows for customization of the background color used to denote an "active" row */
     activeBgColor?: Palette;
+    /** Defines styles for the group row which holds the selected rows that have been filtered out */
+    keptGroupRowCss?: Properties;
+    /** Defines styles for the last row `keptGroup` to provide separation from the rest of the table */
+    keptLastRowCss?: Properties;
 }
 export interface GridStyleDef {
     /** Changes the height of the rows when `rowHeight: fixed` to provide more space between rows for input fields. */

package/dist/components/Table/TableStyles.js

@@ -62,6 +62,8 @@ function memoizedTableStyles() {
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,
                 rowHoverColor: Css_1.Palette.LightBlue100,
+                keptGroupRowCss: Css_1.Css.bgYellow100.gray900.xsMd.$,
+                keptLastRowCss: Css_1.Css.boxShadow("inset 0px -14px 8px -11px rgba(63,63,63,.18)").$,
             };
         }
         return cache[key];

package/dist/components/Table/components/CollapseToggle.js

@@ -12,9 +12,11 @@ function CollapseToggle(props) {
     const isCollapsed = (0, hooks_1.useComputed)(() => tableState.isCollapsed(row.id), [tableState]);
     const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
     const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
-    // If we're not a header, only render a toggle if we have child rows to actually collapse
-    const isHeader = row.kind === "header";
-    if (!isHeader && (!row.children || row.children.length === 0)) {
+    // If we're not a header and not the selected group row, only render a toggle if we have child rows to actually collapse
+    const isHeader = row.kind === index_1.HEADER;
+    const isKeptGroup = row.kind === index_1.KEPT_GROUP;
+    const hasChildren = row.children ? row.children.length > 0 : false;
+    if (!isHeader && !isKeptGroup && !hasChildren) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(index_1.IconButton, { onClick: () => tableState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }));

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

@@ -0,0 +1,10 @@
+import { GridDataRow, GridStyle, RenderAs } from "..";
+interface KeptGroupRowProps {
+    as: RenderAs;
+    columnSizes: string[];
+    style: GridStyle;
+    row: GridDataRow<any>;
+    colSpan: number;
+}
+export declare function KeptGroupRow(props: KeptGroupRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/KeptGroupRow.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeptGroupRow = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../..");
+const Table_1 = require("..");
+const Css_1 = require("../../../Css");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+function KeptGroupRow(props) {
+    const { as, columnSizes, style, row, colSpan } = props;
+    const CellTag = as === "table" ? "td" : "div";
+    const { tableState } = (0, react_1.useContext)(Table_1.TableStateContext);
+    const numHiddenSelectedRows = (0, hooks_1.useComputed)(() => tableState.keptSelectedRows.length, [tableState]);
+    return ((0, jsx_runtime_1.jsx)(CellTag, { css: {
+            ...style.cellCss,
+            ...style.keptGroupRowCss,
+            ...Css_1.Css.pl0.w(`calc(${columnSizes.join(" + ")})`).$,
+        }, ...(as === "table" ? { colSpan } : {}), children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.gapPx(12).$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(38).df.jcc.$, children: (0, jsx_runtime_1.jsx)(Table_1.CollapseToggle, { row: row, compact: true }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.gap1.$, children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "infoCircle", inc: 2 }), `${numHiddenSelectedRows} selected ${(0, utils_1.pluralize)(numHiddenSelectedRows, "row")} hidden due to filters`] })] }) }));
+}
+exports.KeptGroupRow = KeptGroupRow;

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

@@ -18,6 +18,8 @@ interface RowProps<R extends Kinded> {
     cellHighlight: boolean;
     omitRowHover: boolean;
     hasExpandableHeader: boolean;
+    isKeptSelectedRow: boolean;
+    isLastKeptSelectionRow: boolean;
 }
 declare function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement;
 /**

package/dist/components/Table/components/Row.js

@@ -28,6 +28,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const cell_1 = require("./cell");
+const KeptGroupRow_1 = require("./KeptGroupRow");
 const sortRows_1 = require("../utils/sortRows");
 const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
@@ -38,7 +39,7 @@ const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, sortOn, columnSizes, level, getCount, api, cellHighlight, omitRowHover, hasExpandableHeader, ...others } = props;
+    const { as, columns, row, style, rowStyles, sortOn, columnSizes, level, getCount, api, cellHighlight, omitRowHover, hasExpandableHeader, isKeptSelectedRow, isLastKeptSelectionRow, ...others } = props;
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     const rowId = `${row.kind}_${row.id}`;
     const isActive = (0, hooks_1.useComputed)(() => tableState.activeRowId === rowId, [rowId, tableState]);
@@ -46,6 +47,7 @@ function RowImpl(props) {
     const isHeader = row.kind === utils_1.HEADER;
     const isTotals = row.kind === utils_1.TOTALS;
     const isExpandableHeader = row.kind === utils_1.EXPANDABLE_HEADER;
+    const isKeptGroupRow = row.kind === utils_1.KEPT_GROUP;
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const RowTag = as === "table" ? "tr" : "div";
     const revealOnRowHoverClass = "revealOnRowHover";
@@ -66,14 +68,15 @@ function RowImpl(props) {
             [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
             [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
         },
+        ...(isLastKeptSelectionRow && Css_1.Css.addIn("&>*", style.keptLastRowCss).$),
     };
     let currentColspan = 1;
     // Keep a running count of how many expanded columns are being shown.
     let currentExpandedColumnCount = 0;
-    let firstContentColumnStylesApplied = false;
+    let foundFirstContentColumn = false;
     let minStickyLeftOffset = 0;
     let expandColumnHidden = false;
-    return ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), children: columns.map((column, columnIndex) => {
+    return ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
             var _a, _b, _c, _d, _e;
             // If the expandable column was hidden, then we need to look at the previous column to format the `expandHeader` and 'header' kinds correctly.
             const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column;
@@ -94,8 +97,9 @@ function RowImpl(props) {
             // If we're rendering the Expandable Header row, then we might need to render the previous column's `expandHeader` property in the case where the column is hidden on expand.
             column = isExpandableHeader ? maybeExpandedColumn : column;
             const { wrapAction = true, isAction = false } = column;
-            const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
-            firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
+            const isFirstContentColumn = !isAction && !foundFirstContentColumn;
+            const applyFirstContentColumnStyles = !isHeader && isFirstContentColumn;
+            foundFirstContentColumn || (foundFirstContentColumn = applyFirstContentColumnStyles);
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -138,7 +142,7 @@ function RowImpl(props) {
             const isExpandable = (0, utils_2.isFunction)(column.expandColumns) ||
                 (column.expandColumns && column.expandColumns.length > 0) ||
                 column.expandedWidth !== undefined;
-            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset);
+            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader || isTotals || isExpandableHeader, column, columnIndex, maybeContent);
             const maybeSticky = (_b = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
@@ -215,14 +219,14 @@ function RowImpl(props) {
             const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
             const tooltip = (0, utils_1.isGridCellContent)(maybeContent) ? maybeContent.tooltip : undefined;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
-                ? (0, cell_1.rowLinkRenderFn)(as)
+                ? (0, cell_1.rowLinkRenderFn)(as, currentColspan)
                 : isHeader || isTotals || isExpandableHeader
                     ? (0, cell_1.headerRenderFn)(column, as, currentColspan)
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
-                        ? (0, cell_1.rowClickRenderFn)(as, api)
-                        : (0, cell_1.defaultRenderFn)(as);
+                        ? (0, cell_1.rowClickRenderFn)(as, api, currentColspan)
+                        : (0, cell_1.defaultRenderFn)(as, currentColspan);
             return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick, tooltip);
-        }) }));
+        })) }));
 }
 /**
  * Memoizes Rows so that re-rendering the table doesn't re-render every single row.

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

@@ -31,13 +31,13 @@ export type GridCellContent = {
 /** Allows rendering a specific cell. */
 export type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: VoidFunction | undefined, tooltip: ReactNode | undefined) => ReactNode;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-export declare const defaultRenderFn: (as: RenderAs) => RenderCellFn<any>;
+export declare const defaultRenderFn: (as: RenderAs, colSpan: number) => RenderCellFn<any>;
 /**
  * Sets up the `GridContext` so that header cells can access the current sort settings.
  * Used for the Header, Totals, and Expanded Header row's cells.
  * */
 export declare const headerRenderFn: (column: GridColumnWithId<any>, as: RenderAs, colSpan: number) => RenderCellFn<any>;
 /** Renders a cell element when a row link is in play. */
-export declare const rowLinkRenderFn: (as: RenderAs) => RenderCellFn<any>;
+export declare const rowLinkRenderFn: (as: RenderAs, colSpan: number) => RenderCellFn<any>;
 /** Renders a cell that will fire the RowStyle.onClick. */
-export declare const rowClickRenderFn: (as: RenderAs, api: GridTableApi<any>) => RenderCellFn<any>;
+export declare const rowClickRenderFn: (as: RenderAs, api: GridTableApi<any>, colSpan: number) => RenderCellFn<any>;

package/dist/components/Table/components/cell.js

@@ -6,9 +6,9 @@ const react_router_dom_1 = require("react-router-dom");
 const CssReset_1 = require("../../CssReset");
 const Css_1 = require("../../../Css");
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
+const defaultRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...Css_1.Css.cursor("default").$ }, className: classNames, onClick: onClick, children: content }, key));
+    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...Css_1.Css.cursor("default").$ }, className: classNames, onClick: onClick, ...(as === "table" && { colSpan }), children: content }, key));
 };
 exports.defaultRenderFn = defaultRenderFn;
 /**
@@ -21,20 +21,20 @@ const headerRenderFn = (column, as, colSpan) => (key, css, content, row, rowStyl
 };
 exports.headerRenderFn = headerRenderFn;
 /** Renders a cell element when a row link is in play. */
-const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
+const rowLinkRenderFn = (as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css }, className: classNames, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
+        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css }, className: classNames, colSpan: colSpan, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
     }
     return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}`, children: content }, key));
 };
 exports.rowLinkRenderFn = rowLinkRenderFn;
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
+const rowClickRenderFn = (as, api, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const Cell = as === "table" ? "td" : "div";
     return ((0, jsx_runtime_1.jsx)(Cell, { ...{ key }, css: { ...css }, className: classNames, onClick: (e) => {
             rowStyle.onClick(row, api);
             onClick && onClick();
-        }, children: content }));
+        }, ...(as === "table" && { colSpan }), children: content }));
 };
 exports.rowClickRenderFn = rowClickRenderFn;

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

@@ -1,4 +1,4 @@
-import { ObservableSet } from "mobx";
+import { ObservableMap, ObservableSet } from "mobx";
 import React from "react";
 import { GridDataRow } from "../components/Row";
 import { GridSortConfig } from "../GridTable";
@@ -22,8 +22,10 @@ export type SelectedState = "checked" | "unchecked" | "partial";
 export declare class TableState {
     private readonly collapsedRows;
     private persistCollapse;
-    private readonly selectedRows;
+    private readonly rowSelectedState;
+    selectedDataRows: ObservableMap<string, GridDataRow<any>>;
     private matchedRows;
+    keptSelectedRows: GridDataRow<any>[];
     rows: GridDataRow<any>[];
     activeRowId: string | undefined;
     activeCellId: string | undefined;
@@ -58,7 +60,8 @@ export declare class TableState {
     get expandedColumnIds(): string[];
     toggleExpandedColumn(columnId: string): void;
     setMatchedRows(rowIds: string[]): void;
-    get selectedIds(): string[];
+    /** Returns either all data rows (non-header, non-totals, etc) that are selected where `row.selectable !== false` */
+    get selectedRows(): GridDataRow<any>[];
     getSelected(id: string): SelectedState;
     selectRow(id: string, selected: boolean): void;
     get collapsedIds(): string[];

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

@@ -32,10 +32,18 @@ class TableState {
      */
     constructor() {
         // 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();
+        this.collapsedRows = new mobx_1.ObservableSet([]);
+        // This will include rows that are selected, are partially selected, or were at once selected but are now unchecked.
+        // Rows within this map may be in `this.rows` or removed from `this.rows`.
+        this.rowSelectedState = new mobx_1.ObservableMap();
+        // Keep a copy of all the selected GridDataRows - Do not include custom row kinds such as `header`, `totals`, etc.
+        // This allows us to keep track of rows that were selected, but may no longer be defined in `GridTable.rows`
+        // This will be used to determine which rows are considered "kept" rows when filtering is applied or `GridTableProp.rows` changes
+        this.selectedDataRows = new mobx_1.ObservableMap();
         // 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();
+        // All fully selected data rows that do not match the applied filter, if any. Will not include group/parent rows unless they `inferSelectedState: false`
+        this.keptSelectedRows = [];
         // The current list of rows, basically a useRef.current. Not reactive.
         this.rows = [];
         // Keeps track of the 'active' row, formatted `${row.kind}_${row.id}`
@@ -67,10 +75,32 @@ class TableState {
         });
         // 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 newlyKeptRows = [...this.selectedDataRows.values()].filter((row) => keptSelectionsFilter(row, this.matchedRows));
+            // If the kept rows went from empty to not empty, then introduce the SELECTED_GROUP row as collapsed
+            if (newlyKeptRows.length > 0 && this.keptSelectedRows.length === 0) {
+                this.collapsedRows.add(utils_1.KEPT_GROUP);
+            }
+            // When filters are applied, we need to determine if there are any selected rows that are no longer matched.
+            if (!mobx_1.comparer.shallow(newlyKeptRows, this.keptSelectedRows)) {
+                this.keptSelectedRows = newlyKeptRows;
+            }
+            // Re-derive the selected state for both the header and parent rows
             const map = new Map();
-            map.set("header", deriveParentSelected(this.rows.flatMap((row) => this.setNestedSelectedStates(row, map))));
+            map.set("header", deriveParentSelected([...this.rows, ...this.keptSelectedRows].flatMap((row) => this.setNestedSelectedStates(row, map))));
             // Merge the changes back into the selected rows state
-            this.selectedRows.merge(map);
+            this.rowSelectedState.merge(map);
+            // Update the selectedDataRows to include those that are fully selected based on the filter changes
+            [...this.rowSelectedState.entries()].forEach(([id, state]) => {
+                if (this.selectedDataRows.has(id) && state !== "checked") {
+                    this.selectedDataRows.delete(id);
+                }
+                else if (!this.selectedDataRows.has(id) && state === "checked") {
+                    const row = this.rows.find((row) => row.id === id);
+                    if (row) {
+                        this.selectedDataRows.set(id, row);
+                    }
+                }
+            });
         }, { equals: mobx_1.comparer.shallow });
     }
     loadCollapse(persistCollapse, rows) {
@@ -88,14 +118,22 @@ class TableState {
         }
     }
     loadSelected(rows) {
-        const allRows = flattenRows(rows);
-        const selectedRows = allRows.filter((row) => row.initSelected);
-        // Initialize with selected rows as defined
-        const map = new Map();
+        const selectedRows = [];
+        (0, visitor_1.visit)(rows, (row) => row.initSelected && selectedRows.push(row));
+        const selectedStateMap = new Map();
+        const selectedRowMap = new Map();
         selectedRows.forEach((row) => {
-            map.set(row.id, "checked");
+            selectedStateMap.set(row.id, "checked");
+            selectedRowMap.set(row.id, row);
         });
-        this.selectedRows.merge(map);
+        this.rowSelectedState.merge(selectedStateMap);
+        this.selectedDataRows.merge(selectedRowMap);
+        // Determine if we need to initially display the kept selected group
+        const newlyKeptRows = selectedRows.filter((row) => keptSelectionsFilter(row, this.matchedRows));
+        if (!mobx_1.comparer.shallow(newlyKeptRows, this.keptSelectedRows)) {
+            this.collapsedRows.add(utils_1.KEPT_GROUP);
+            this.keptSelectedRows = newlyKeptRows;
+        }
     }
     initSortState(sortConfig, columns) {
         var _a, _b;
@@ -180,6 +218,10 @@ class TableState {
         }
         // Finally replace our existing list of rows
         this.rows = rows;
+        // Update the selected rows map to include the rows' updated data
+        const selectedRows = new Map();
+        (0, visitor_1.visit)(this.rows, (row) => this.selectedDataRows.has(row.id) && selectedRows.set(row.id, row));
+        this.selectedDataRows.merge(selectedRows);
     }
     setColumns(columns, visibleColumnsStorageKey) {
         const isInitial = !this.columns || this.columns.length === 0;
@@ -299,59 +341,95 @@ class TableState {
             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.matchedRows.has(id) && v === "checked")
-            .map(([k]) => k);
-        // Hide our header marker
-        const headerIndex = ids.indexOf("header");
-        if (headerIndex > -1) {
-            ids.splice(headerIndex, 1);
-        }
-        return ids;
+    /** Returns either all data rows (non-header, non-totals, etc) that are selected where `row.selectable !== false` */
+    get selectedRows() {
+        return [...this.selectedDataRows.values()].filter((row) => row.selectable !== false && !utils_1.reservedRowKinds.includes(row.kind));
     }
     // Should be called in an Observer/useComputed to trigger re-renders
     getSelected(id) {
-        // We may not have every row in here, i.e. on 1st page load or after clicking here, so assume unchecked
-        return this.selectedRows.get(id) || "unchecked";
+        var _a;
+        // Return the row's selected state if it's been explicitly set. If it is in the selectedDataRows set, then it's selected. Otherwise, it's unchecked.
+        return (_a = this.rowSelectedState.get(id)) !== null && _a !== void 0 ? _a : (this.selectedDataRows.has(id) ? "checked" : "unchecked");
     }
     selectRow(id, selected) {
+        var _a;
         if (id === "header") {
             // Select/unselect all has special behavior
             if (selected) {
                 // 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.matchedRows.has(row.id) && row.kind !== "totals" && map.set(row.id, "checked"));
-                this.selectedRows.replace(map);
+                const selectedStateMap = new Map();
+                const selectedRowMap = new Map();
+                selectedStateMap.set("header", "checked");
+                (0, visitor_1.visit)(this.rows, (row) => {
+                    if (!utils_1.reservedRowKinds.includes(row.kind) && this.matchedRows.has(row.id)) {
+                        selectedStateMap.set(row.id, "checked");
+                        selectedRowMap.set(row.id, row);
+                    }
+                });
+                this.rowSelectedState.replace(selectedStateMap);
+                // Use `merge` to ensure we don't lose any row that were selected, but no longer in `this.rows` (i.e. due to server-side filtering)
+                this.selectedDataRows.merge(selectedRowMap);
             }
             else {
                 // Similarly "unmash" all rows + children.
-                this.selectedRows.clear();
+                this.rowSelectedState.clear();
+                this.selectedDataRows.clear();
+                this.keptSelectedRows = [];
             }
         }
         else {
             // This is the regular/non-header behavior to just add/remove the individual row id,
             // plus percolate the change down-to-child + up-to-parents.
             // Find the clicked on row
-            const curr = findRow(this.rows, id);
+            const curr = (_a = findRow(this.rows, id)) !== null && _a !== void 0 ? _a : (this.selectedDataRows.has(id) ? { row: this.selectedDataRows.get(id), parents: [] } : undefined);
             if (!curr) {
                 return;
             }
             // Everything here & down is deterministically on/off
-            const map = new Map();
-            (0, visitor_1.visit)([curr.row], (row) => this.matchedRows.has(row.id) && map.set(row.id, selected ? "checked" : "unchecked"));
+            const selectedStateMap = new Map();
+            (0, visitor_1.visit)([curr.row], (row) => {
+                // The `visit` method walks through the selected row and all of its children, if any.
+                // Depending on whether we are determining the clicked row's state or its children, then we handle updating the selection differently.
+                // We can tell if we are determining a child row's selected state by checking against the row selected `id` and the row we're currently evaluating `row.id`.
+                const isClickedRow = row.id === id;
+                // Only update the selected states if we're updating the clicked row, or if we are checking a child row, then the row must match the filter.
+                // Meaning, rows that are filtered out and displayed in the "selectedGroup" can only change their selection state by interacting with them directly.
+                if (isClickedRow || this.matchedRows.has(row.id)) {
+                    selectedStateMap.set(row.id, selected ? "checked" : "unchecked");
+                    if (selected) {
+                        this.selectedDataRows.set(row.id, row);
+                    }
+                    else {
+                        this.selectedDataRows.delete(row.id);
+                    }
+                }
+            });
             // 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()) {
                 // Only derive selected state of the parent row if `inferSelectedState` is not `false`
                 if (parent.children && parent.inferSelectedState !== false) {
-                    map.set(parent.id, deriveParentSelected(this.getMatchedChildrenStates(parent.children, map)));
+                    const selectedState = deriveParentSelected(this.getMatchedChildrenStates(parent.children, selectedStateMap));
+                    if (selectedState === "checked") {
+                        this.selectedDataRows.set(parent.id, parent);
+                    }
+                    else {
+                        this.selectedDataRows.delete(parent.id);
+                    }
+                    selectedStateMap.set(parent.id, selectedState);
                 }
             }
             // And do the header + top-level "children" as a final one-off
-            map.set("header", deriveParentSelected(this.getMatchedChildrenStates(this.rows, map)));
-            this.selectedRows.merge(map);
+            selectedStateMap.set("header", deriveParentSelected(this.getMatchedChildrenStates([...this.rows, ...this.keptSelectedRows], selectedStateMap)));
+            // And merge the new selected state map into the existing one
+            this.rowSelectedState.merge(selectedStateMap);
+            // Lastly, we need to update the `keptSelectedRows` if the row was deselected.
+            // (If selected === true, then it's not possible for the row to be in `keptSelectedRows` as you can only select rows that match the filter)
+            if (!selected) {
+                const newlyKeptRows = [...this.selectedDataRows.values()].filter((row) => keptSelectionsFilter(row, this.matchedRows));
+                if (!mobx_1.comparer.shallow(newlyKeptRows, this.keptSelectedRows)) {
+                    this.keptSelectedRows = newlyKeptRows;
+                }
+            }
         }
     }
     get collapsedIds() {
@@ -371,8 +449,8 @@ class TableState {
                 collapsedIds.splice(0, collapsedIds.length);
             }
             else {
-                // Otherwise push `header` to the list as a hint that we're in the collapsed-all state
-                collapsedIds.push("header");
+                // Otherwise push `header` and `selectedGroup` to the list as a hint that we're in the collapsed-all state
+                collapsedIds.push(utils_1.HEADER, utils_1.KEPT_GROUP);
                 // Find all non-leaf rows so that toggling "all collapsed" -> "all not collapsed" opens
                 // the parent rows of any level.
                 const parentIds = new Set();
@@ -397,6 +475,7 @@ class TableState {
             else {
                 collapsedIds.splice(i, 1);
             }
+            // TODO: Need to handle the kept selected group row.
             // If all rows have been expanded individually, but the 'header' was collapsed, then remove the header from the collapsedIds so it reverts to the expanded state
             if (collapsedIds.length === 1 && collapsedIds[0] === "header") {
                 collapsedIds.splice(0, 1);
@@ -415,13 +494,15 @@ class TableState {
     }
     getMatchedChildrenStates(children, map) {
         const respectedChildren = children.flatMap(getChildrenForDerivingSelectState);
+        // When determining the children selected states to base the parent's state from, then only base this off of rows that match the filter or are in the "hidden selected" group (via the `filter` below)
         return respectedChildren
-            .filter((row) => row.id !== "header" && this.matchedRows.has(row.id))
+            .filter((row) => row.id !== "header" && (this.matchedRows.has(row.id) || this.selectedDataRows.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
+    // Returns the selected states for the immediately children (if any) of the row passed in
     setNestedSelectedStates(row, map) {
-        if (this.matchedRows.has(row.id)) {
+        if (this.matchedRows.has(row.id) || this.selectedDataRows.has(row.id)) {
             // do not derive selected state if there are no children, or if `inferSelectedState` is set to false
             if (!row.children || row.inferSelectedState === false) {
                 return [this.getSelected(row.id)];
@@ -437,6 +518,7 @@ class TableState {
 exports.TableState = TableState;
 /** Returns the child rows needed for deriving the selected state of a parent/group row */
 function getChildrenForDerivingSelectState(row) {
+    // Only look deeper if the parent row does not infer its selected state
     if (row.children && row.inferSelectedState === false) {
         return [row, ...row.children.flatMap(getChildrenForDerivingSelectState)];
     }
@@ -445,6 +527,7 @@ function getChildrenForDerivingSelectState(row) {
 /** Provides a context for rows to access their table's `TableState`. */
 exports.TableStateContext = react_1.default.createContext({
     get tableState() {
+        console.log("wtf?");
         throw new Error("No TableStateContext provider");
     },
 });
@@ -534,3 +617,9 @@ function deriveSortState(currentSortState, clickedKey, initialSortState) {
     return initialSortState;
 }
 exports.deriveSortState = deriveSortState;
+function keptSelectionsFilter(row, matchedRows) {
+    return (!matchedRows.has(row.id) &&
+        row.selectable !== false &&
+        !utils_1.reservedRowKinds.includes(row.kind) &&
+        (!row.children || row.inferSelectedState === false));
+}

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

@@ -41,8 +41,8 @@ function selectColumn(columnDef) {
         id: "beamSelectColumn",
         clientSideSort: false,
         align: "center",
-        // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
-        w: "48px",
+        // Defining `w: 40px` to accommodate for the `16px` wide checkbox and `12px` of padding on either side.
+        w: "40px",
         wrapAction: false,
         isAction: true,
         expandColumns: undefined,
@@ -52,6 +52,7 @@ function selectColumn(columnDef) {
         // Use any of the user's per-row kind methods if they have them.
         ...columnDef,
     };
+    // Use newMethodMissingProxy so the user can use whatever kinds they want, i.e. `myRowKind: () => ...Toggle... `
     return (0, utils_2.newMethodMissingProxy)(base, (key) => {
         return (data, { row }) => ({
             content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id, disabled: row.selectable === false }),
@@ -82,6 +83,7 @@ function collapseColumn(columnDef) {
         totals: utils_1.emptyCell,
         ...columnDef,
     };
+    // Use newMethodMissingProxy so the user can use whatever kinds they want, i.e. `myRowKind: () => ...Collapse... `
     return (0, utils_2.newMethodMissingProxy)(base, (key) => {
         return (data, { row, level }) => ({
             content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row, compact: level > 0 }),

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

@@ -6,7 +6,7 @@ import { GridStyle } from "../TableStyles";
 import { GridCellAlignment, GridColumnWithId, Kinded, RenderAs } from "../types";
 import { Properties } from "../../../Css";
 /** If a column def return just string text for a given row, apply some default styling. */
-export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment, column: GridColumnWithId<any>, isExpandableHeader: boolean, isExpandable: boolean, minStickyLeftOffset: number): ReactNode;
+export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment, column: GridColumnWithId<any>, isExpandableHeader: boolean, isExpandable: boolean, minStickyLeftOffset: number, isKeptSelectedRow: boolean): ReactNode;
 export declare function isGridCellContent(content: ReactNode | GridCellContent): content is GridCellContent;
 /** Return the content for a given column def applied to a given row. */
 export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number, expanded: boolean): ReactNode | GridCellContent;
@@ -23,6 +23,7 @@ export declare function matchesFilter(maybeContent: ReactNode | GridCellContent,
 export declare const HEADER = "header";
 export declare const TOTALS = "totals";
 export declare const EXPANDABLE_HEADER = "expandableHeader";
+export declare const KEPT_GROUP = "keptGroup";
 export declare const reservedRowKinds: string[];
 export declare const zIndices: {
     stickyHeader: number;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zIndices = exports.reservedRowKinds = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("../../Icon");
 const ExpandableHeader_1 = require("../components/ExpandableHeader");
@@ -8,8 +8,12 @@ const SortHeader_1 = require("../components/SortHeader");
 const Css_1 = require("../../../Css");
 const getInteractiveElement_1 = require("../../../utils/getInteractiveElement");
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset) {
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
     var _a, _b, _c;
+    // Rows within the kept selection group cannot be collapsed
+    if (isKeptSelectedRow && column.id === "beamCollapseColumn") {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
     let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
@@ -153,7 +157,8 @@ exports.matchesFilter = matchesFilter;
 exports.HEADER = "header";
 exports.TOTALS = "totals";
 exports.EXPANDABLE_HEADER = "expandableHeader";
-exports.reservedRowKinds = [exports.HEADER, exports.TOTALS, exports.EXPANDABLE_HEADER];
+exports.KEPT_GROUP = "keptGroup";
+exports.reservedRowKinds = [exports.HEADER, exports.TOTALS, exports.EXPANDABLE_HEADER, exports.KEPT_GROUP];
 exports.zIndices = {
     stickyHeader: 4,
     stickyColumns: 3,

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./useBreakpoint";
 export * from "./useComputed";
+export * from "./useFilter";
 export * from "./useGroupBy";
 export * from "./useHover";
 export * from "./usePersistedFilter";

package/dist/hooks/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useBreakpoint"), exports);
 __exportStar(require("./useComputed"), exports);
+__exportStar(require("./useFilter"), exports);
 __exportStar(require("./useGroupBy"), exports);
 __exportStar(require("./useHover"), exports);
 __exportStar(require("./usePersistedFilter"), exports);

package/dist/hooks/useFilter.d.ts

@@ -0,0 +1,10 @@
+import { FilterDefs } from "..";
+interface UsePersistedFilterProps<F> {
+    filterDefs: FilterDefs<F>;
+}
+interface FilterHook<F> {
+    filter: F;
+    setFilter: (filter: F) => void;
+}
+export declare function useFilter<F>({ filterDefs }: UsePersistedFilterProps<F>): FilterHook<F>;
+export {};

package/dist/hooks/useFilter.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilter = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+function useFilter({ filterDefs }) {
+    const [filter, setFilter] = (0, react_1.useState)(Object.fromEntries((0, utils_1.safeEntries)(filterDefs)
+        .filter(([key, def]) => def(key).defaultValue !== undefined)
+        .map(([key, def]) => [key, def(key).defaultValue])));
+    return { setFilter, filter };
+}
+exports.useFilter = useFilter;

package/dist/utils/index.d.ts

@@ -31,3 +31,4 @@ export declare function areArraysEqual(a: any[], b: any[]): boolean;
 export declare function isPromise(obj: any | Promise<any>): obj is Promise<any>;
 export declare function isFunction(f: any): f is Function;
 export declare function isDefined<T extends any>(param: T | undefined | null): param is T;
+export declare function pluralize(count: number | unknown[], noun: string, pluralNoun?: string): string;

package/dist/utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDefined = exports.isFunction = exports.isPromise = exports.areArraysEqual = exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
+exports.pluralize = exports.isDefined = exports.isFunction = exports.isPromise = exports.areArraysEqual = exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
 /** Adapts our state to what useToggleState returns in a stateless manner. */
 function toToggleState(isSelected, onChange) {
     return {
@@ -97,3 +97,9 @@ function isDefined(param) {
     return param !== null && param !== undefined;
 }
 exports.isDefined = isDefined;
+function pluralize(count, noun, pluralNoun) {
+    if ((Array.isArray(count) ? count.length : count) === 1)
+        return noun;
+    return pluralNoun || `${noun}s`;
+}
+exports.pluralize = pluralize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.292.0",
+  "version": "2.294.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -36,19 +36,19 @@
     "@homebound/form-state": "^2.17.0",
     "@internationalized/number": "^3.0.3",
     "@popperjs/core": "^2.11.6",
-    "@react-aria/utils": "^3.13.2",
+    "@react-aria/utils": "^3.18.0",
     "change-case": "^4.1.2",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.0",
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^9.0.4",
     "memoize-one": "^5.2.1",
-    "react-aria": "^3.24.0",
+    "react-aria": "^3.26.0",
     "react-day-picker": "8.0.7",
     "react-popper": "^2.3.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-stately": "^3.22.0",
+    "react-stately": "^3.24.0",
     "react-virtuoso": "^4.2.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
@@ -81,16 +81,17 @@
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^7.0.20",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addons": "^7.0.20",
-    "@storybook/manager-api": "^7.0.20",
+    "@storybook/addon-docs": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/addon-mdx-gfm": "^7.0.26",
+    "@storybook/addons": "^7.0.26",
+    "@storybook/manager-api": "^7.0.26",
     "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-vite": "^7.0.20",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-vite": "^7.0.26",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@tsconfig/recommended": "^1.0.2",
     "@types/dompurify": "^2.2.3",
@@ -118,10 +119,9 @@
     "prettier": "^2.8.4",
     "prettier-plugin-organize-imports": "^3.2.2",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "semantic-release": "^20.1.0",
-    "storybook": "^7.0.20",
+    "storybook": "^7.0.26",
     "storybook-addon-designs": "beta",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",