@homebound/beam 2.105.10 → 2.106.0

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

@@ -50,6 +50,10 @@ export interface GridStyle {
     presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
     /** Minimum table width in pixels. Used when calculating columns sizes */
     minWidthPx?: number;
+    /** Css to apply at each level of a parent/child nested table. */
+    levels?: Record<number, {
+        cellCss: Properties;
+    }>;
 }
 export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
 export interface NestedCardsStyle {

package/dist/components/Table/GridTable.js

@@ -136,7 +136,7 @@ function GridTable(props) {
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        function makeRowComponent(row) {
+        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 };
@@ -151,6 +151,7 @@ function GridTable(props) {
                     stickyOffset,
                     openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                     columnSizes,
+                    level,
                     ...sortProps,
                 }), void 0) }), `${row.kind}-${row.id}`));
         }
@@ -160,7 +161,7 @@ function GridTable(props) {
         // 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) {
+        function visit(row, level) {
             var _a;
             const matches = filters.length === 0 ||
                 row.pin ||
@@ -169,28 +170,28 @@ function GridTable(props) {
             let isCard = false;
             if (matches) {
                 isCard = nestedCards && nestedCards.maybeOpenCard(row);
-                filteredRows.push([row, makeRowComponent(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);
+                visitRows(row.children, isCard, level + 1);
             }
             !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
         }
-        function visitRows(rows, addSpacer) {
+        function visitRows(rows, addSpacer, level) {
             const length = rows.length;
             rows.forEach((row, i) => {
                 if (row.kind === "header") {
-                    headerRows.push([row, makeRowComponent(row)]);
+                    headerRows.push([row, makeRowComponent(row, level)]);
                     return;
                 }
-                visit(row);
+                visit(row, level);
                 addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
         }
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
-        visitRows(maybeSorted, !!nestedCards);
+        visitRows(maybeSorted, !!nestedCards, 0);
         nestedCards && nestedCards.done();
         return [headerRows, filteredRows];
     }, [
@@ -443,6 +444,9 @@ exports.calcColumnSizes = calcColumnSizes;
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
     const indent = (isGridCellContent(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
+    if (typeof indent === "number" && style.levels !== undefined) {
+        throw new Error("The indent param is deprecated for new beam fixed & flexible styles, use beamNestedFixedStyle or beamNestedFlexibleStyle");
+    }
     return indent === 1 ? style.indentOneCss || {} : indent === 2 ? style.indentTwoCss || {} : {};
 }
 function getFirstOrLastCellCss(style, columnIndex, columns) {
@@ -453,7 +457,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) {
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, ...others } = props;
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
@@ -480,7 +484,7 @@ function GridRow(props) {
     };
     let currentColspan = 1;
     const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, { children: columns.map((column, columnIndex) => {
-            var _a;
+            var _a, _b;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -522,6 +526,8 @@ function GridRow(props) {
                 ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                 // Then apply any header-specific override
                 ...(isHeader && style.headerCellCss),
+                // Or level-specific styling
+                ...(!isHeader && !!style.levels && ((_b = style.levels[level]) === null || _b === void 0 ? void 0 : _b.cellCss)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Add any cell specific style overrides

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

@@ -7,6 +7,10 @@ export declare const condensedStyle: GridStyle;
 /** Renders each row as a card. */
 export declare const cardStyle: GridStyle;
 export declare const beamFixedStyle: GridStyle;
-export declare const beamFlexibleStyle: GridStyle;
 export declare const beamGroupRowStyle: Properties;
 export declare const beamTotalsRowStyle: Properties;
+export declare const beamNestedFixedStyle: GridStyle;
+export declare const beamTotalsFixedStyle: GridStyle;
+export declare const beamFlexibleStyle: GridStyle;
+export declare const beamNestedFlexibleStyle: GridStyle;
+export declare const beamTotalsFlexibleStyle: GridStyle;

package/dist/components/Table/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.beamTotalsRowStyle = exports.beamGroupRowStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.beamTotalsFlexibleStyle = exports.beamNestedFlexibleStyle = exports.beamFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFixedStyle = exports.beamTotalsRowStyle = exports.beamGroupRowStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
@@ -46,13 +46,33 @@ exports.beamFixedStyle = {
     emptyCell: "-",
     presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
     rowHoverColor: Css_1.Palette.Gray200,
+    // Included as a hacky "treat indent as deprecated for this table" hint to GridTable
+    levels: {},
+};
+// The look & feel for parent rows' cells in a nested parent/child table.
+exports.beamGroupRowStyle = Css_1.Css.xsEm
+    .mhPx(56)
+    .gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$;
+// The look & feel for a totals row's cells.
+exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;
+exports.beamNestedFixedStyle = {
+    ...exports.beamFixedStyle,
+    levels: { 0: { cellCss: exports.beamGroupRowStyle } },
+};
+exports.beamTotalsFixedStyle = {
+    ...exports.beamFixedStyle,
+    cellCss: { ...exports.beamFixedStyle.cellCss, ...exports.beamTotalsRowStyle },
 };
 exports.beamFlexibleStyle = {
     ...exports.beamFixedStyle,
     cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
     presentationSettings: { borderless: false, typeScale: "xs", wrap: true },
 };
-exports.beamGroupRowStyle = Css_1.Css.xsEm
-    .mhPx(56)
-    .gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$;
-exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;
+exports.beamNestedFlexibleStyle = {
+    ...exports.beamFlexibleStyle,
+    levels: { 0: { cellCss: exports.beamGroupRowStyle } },
+};
+exports.beamTotalsFlexibleStyle = {
+    ...exports.beamFlexibleStyle,
+    cellCss: { ...exports.beamFlexibleStyle.cellCss, ...exports.beamTotalsRowStyle },
+};

package/package.json

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