@homebound/beam 2.127.0 → 2.128.2

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

@@ -33,6 +33,8 @@ export interface GridStyle {
      * rows are wrapper with Chrome rows.
      */
     headerCellCss?: Properties;
+    /** Applied to 'kind: "totals"' cells */
+    totalsCellCss?: Properties;
     /** Applied to the first cell of all rows, i.e. for table-wide padding or left-side borders. */
     firstCellCss?: Properties;
     /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
@@ -151,7 +153,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     rowLookup?: MutableRefObject<GridRowLookup<R> | undefined>;
     /** Whether the header row should be sticky. */
     stickyHeader?: boolean;
-    stickyOffset?: string;
+    stickyOffset?: number;
     /** 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'. */

package/dist/components/Table/GridTable.js

@@ -88,7 +88,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     const tableRef = (0, react_1.useRef)(null);
@@ -121,15 +121,18 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sortOn, sortState]);
+    let hasTotalsRow = false;
     // 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" ||
+            row.kind === "totals" ||
             filters.length === 0 ||
             !!row.pin ||
             filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
+        hasTotalsRow || (hasTotalsRow = row.kind === "totals");
         // 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 : []]]);
@@ -148,7 +151,7 @@ function GridTable(props) {
         return acc;
     }, [filter, collapsedIds, columns]);
     // Flatten + component-ize the sorted rows.
-    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
+    let [headerRows, filteredRows, totalsRows] = (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.
@@ -161,7 +164,8 @@ function GridTable(props) {
                 style,
                 rowStyles,
                 stickyHeader,
-                stickyOffset,
+                // If we have a totals row then add the height of the totals row (52px) to the `stickyOffset` for the "header" kind
+                stickyOffset: hasTotalsRow && row.kind === "header" ? 52 + stickyOffset : stickyOffset,
                 openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                 columnSizes,
                 level,
@@ -172,6 +176,7 @@ 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 = [];
         // 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);
@@ -192,6 +197,10 @@ function GridTable(props) {
                     headerRows.push([row[0], makeRowComponent(row[0], level)]);
                     return;
                 }
+                if (row[0].kind === "totals") {
+                    totalsRows.push([row[0], makeRowComponent(row[0], level)]);
+                    return;
+                }
                 visit(row, level);
                 addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
@@ -200,7 +209,7 @@ function GridTable(props) {
         // 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);
         nestedCards && nestedCards.done();
-        return [headerRows, filteredRows];
+        return [headerRows, filteredRows, totalsRows];
     }, [
         as,
         maybeSorted,
@@ -252,7 +261,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.jsx)(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: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsx)(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: renders[_as](style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -262,7 +271,7 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
+function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: tableRef, css: {
             /*
               Using (n + 3) here to target all rows that are after the first non-header row. Since n starts at 0, we can use
@@ -274,10 +283,10 @@ function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id }, { children: [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)), filteredRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
+function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
     return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ ref: tableRef, css: {
             ...Css_1.Css.w100.add("borderCollapse", "collapse").$,
             ...Css_1.Css.addIn("& > tbody > tr ", style.betweenRowsCss || {})
@@ -286,7 +295,7 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: 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)), filteredRows.map(([, node]) => node)] }, void 0)] }), void 0));
 }
 /**
  * Uses react-virtuoso to render rows virtually.
@@ -308,7 +317,7 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef, tableRef) {
+function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef, tableRef) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
@@ -327,9 +336,15 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
-        topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), itemContent: (index) => {
-            // Since we have two arrays of rows: `headerRows` and `filteredRow` we
+        topItemCount: (stickyHeader ? headerRows.length + totalsRows.length : 0) + (firstRowMessage ? 1 : 0), itemContent: (index) => {
+            // Since we have three arrays of rows: `headerRows`, `totalsRows`, and `filteredRow` we
             // must determine which one to render.
+            // Determine if we need to render a totals row
+            if (index < totalsRows.length) {
+                return totalsRows[index][1];
+            }
+            // Reset index
+            index -= totalsRows.length;
             // Determine if we need to render a header row
             if (index < headerRows.length) {
                 return headerRows[index][1];
@@ -347,7 +362,7 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
             }
             // Lastly render `filteredRow`
             return filteredRows[index][1];
-        }, totalCount: (headerRows.length || 0) + (firstRowMessage ? 1 : 0) + (filteredRows.length || 0) }, void 0));
+        }, totalCount: (headerRows.length || 0) + (totalsRows.length || 0) + (firstRowMessage ? 1 : 0) + (filteredRows.length || 0) }, void 0));
 }
 /**
  * A table might render two of these components to represent two virtual lists.
@@ -473,8 +488,9 @@ function GridRow(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
+    // We treat the "header" and "totals" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
+    const isTotals = row.kind === "totals";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const Row = as === "table" ? "tr" : "div";
     const openCardStyles = typeof openCards === "string"
@@ -493,7 +509,7 @@ function GridRow(props) {
         }),
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
-        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z2.$ : undefined),
+        ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
     };
     let currentColspan = 1;
@@ -567,8 +583,10 @@ function GridRow(props) {
                 ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                 // Then apply any header-specific override
                 ...(isHeader && style.headerCellCss),
+                // Then apply any totals-specific override
+                ...(isTotals && style.totalsCellCss),
                 // Or level-specific styling
-                ...(!isHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
+                ...(!isHeader && !isTotals && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
                 // Level specific styling for the first content column
                 ...(applyFirstContentColumnStyles && !!style.levels && ((_e = style.levels[level]) === null || _e === void 0 ? void 0 : _e.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
@@ -770,7 +788,7 @@ function tableRowStyles(as, column) {
         : {};
 }
 function resolveStyles(style) {
-    const defKeys = ["inlineEditing", "grouped", "totals", "rowHeight"];
+    const defKeys = ["inlineEditing", "grouped", "rowHeight"];
     const keys = (0, utils_1.safeKeys)(style);
     if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {
         return (0, styles_1.getTableStyles)(style);

package/dist/components/Table/RowState.js

@@ -38,7 +38,13 @@ class RowState {
         this.activeRowId = undefined;
         // 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
+        (0, mobx_1.makeAutoObservable)(this, 
+        // We only shallow observe rows so that:
+        // a) we don't deeply/needlessly proxy-ize a large Apollo fragment cache, but
+        // b) if rows changes, we re-run computeds like getSelectedRows that may need to see the
+        // updated _contents_ of a given row, even if our other selected/visible 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(), () => {
             const map = new Map();
@@ -85,7 +91,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) && map.set(row.id, "checked"));
+                (0, visitor_1.visit)(this.rows, (row) => this.visibleRows.has(row.id) && row.kind !== "totals" && map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {

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

@@ -9,6 +9,5 @@ export interface GridStyleDef {
     inlineEditing?: boolean;
     grouped?: boolean;
     rowHeight?: "fixed" | "flexible";
-    totals?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef | undefined) => GridStyle;

package/dist/components/Table/styles.js

@@ -5,6 +5,7 @@ const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
     rootCss: Css_1.Css.gray700.$,
+    totalsCellCss: Css_1.Css.bgWhite.$,
     betweenRowsCss: Css_1.Css.bt.bGray400.$,
     firstNonHeaderRowCss: Css_1.Css.add({ borderTopStyle: "none" }).$,
     cellCss: Css_1.Css.py2.px3.$,
@@ -42,8 +43,8 @@ exports.cardStyle = {
 function memoizedTableStyles() {
     const cache = {};
     return (props) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", totals = false } = props || {};
-        const key = `${inlineEditing}|${grouped}|${rowHeight}|${totals}`;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible" } = props || {};
+        const key = `${inlineEditing}|${grouped}|${rowHeight}`;
         if (!cache[key]) {
             const groupedLevels = {
                 0: {
@@ -57,13 +58,13 @@ function memoizedTableStyles() {
                 emptyCell: "-",
                 firstRowMessageCss: Css_1.Css.tc.py3.$,
                 headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+                totalsCellCss: Css_1.Css.bgWhite.gray700.smEm.hPx(52).pt0.pbPx(12).boxShadow("none").$,
                 cellCss: {
                     ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
                     ...(rowHeight === "flexible" ? Css_1.Css.py2.$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
-                    ...(totals ? Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$ : {}),
                 },
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
-                levels: totals ? {} : grouped ? groupedLevels : defaultLevels,
+                levels: grouped ? groupedLevels : defaultLevels,
             };
         }
         return cache[key];

package/dist/hooks/useComputed.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComputed = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const mobx_1 = require("mobx");
 const react_1 = require("react");
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 /** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
 function useComputed(fn, deps) {
     // We always return the useRef value, and use this just to trigger re-renders

package/dist/inputs/Switch.js

@@ -29,7 +29,7 @@ function Switch(props) {
                 ...(labelStyle === "filter" && Css_1.Css.jcsb.aic.w("auto").sm.$),
                 ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
             }, "aria-label": label }, { children: [!hideLabel && labelStyle === "form" && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), !hideLabel && labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-hidden": "true", css: {
-                        ...Css_1.Css.wPx(toggleWidth(compact)).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
+                        ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
                         ...(isHovered && exports.switchHoverStyles),
                         ...(isKeyboardFocus && exports.switchFocusStyles),
                         ...(isDisabled && Css_1.Css.bgGray300.$),
@@ -49,8 +49,7 @@ exports.Switch = Switch;
 /** Styles */
 // Element sizes
 const toggleHeight = (isCompact) => (isCompact ? 16 : 24);
-const toggleWidth = (isCompact) => (isCompact ? 44 : 40);
-const circleDiameter = (isCompact) => (isCompact ? 14 : 20);
+const circleDiameter = (isCompact) => (isCompact ? 12 : 20);
 // Switcher/Toggle element styles
 exports.switchHoverStyles = Css_1.Css.bgGray400.$;
 exports.switchFocusStyles = Css_1.Css.bshFocus.$;
@@ -60,7 +59,7 @@ const switchCircleDefaultStyles = (isCompact) => ({
     ...Css_1.Css.wPx(circleDiameter(isCompact))
         .hPx(circleDiameter(isCompact))
         .br100.bgWhite.bshBasic.absolute.leftPx(2)
-        .topPx(isCompact ? 1 : 2).transition.df.aic.jcc.$,
+        .topPx(2).transition.df.aic.jcc.$,
     svg: Css_1.Css.hPx(toggleHeight(isCompact) / 2).wPx(toggleHeight(isCompact) / 2).$,
 });
 /**

package/package.json

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