@homebound/beam 2.105.9 → 2.106.1

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

@@ -101,26 +101,42 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
+    // Calculate the column sizes immediately rather than via the `debounce` method.
+    // We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`, which is used by `useDebounce` and essentially turns off the callback.
+    const calculateImmediately = (0, react_1.useRef)(true);
     const [tableWidth, setTableWidth] = (0, react_1.useState)();
     // Calc our initial/first render sizes where we won't have a width yet
     const [columnSizes, setColumnSizes] = (0, react_1.useState)(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
-    const setTableWidthDebounced = (0, use_debounce_1.useDebouncedCallback)((width) => {
+    const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
         var _a;
         setTableWidth(width);
         setColumnSizes(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
-    }, 100);
+    }, [setTableWidth, setColumnSizes, columns, style]);
+    const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
     const onResize = (0, react_1.useCallback)(() => {
         const target = (resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) ? resizeTarget.current : tableRef.current;
         if (target && target.clientWidth !== tableWidth) {
-            setTableWidthDebounced(target.clientWidth);
+            if (calculateImmediately.current) {
+                calculateImmediately.current = false;
+                setTableAndColumnWidths(target.clientWidth);
+            }
+            else {
+                setTableAndColumnWidthsDebounced(target.clientWidth);
+            }
         }
-    }, [resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current, tableRef.current, setTableWidthDebounced]);
+    }, [
+        resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current,
+        tableRef.current,
+        setTableAndColumnWidths,
+        calculateImmediately,
+        setTableAndColumnWidthsDebounced,
+    ]);
     (0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
     // Filter + flatten + component-ize the sorted rows.
     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 };
@@ -135,6 +151,7 @@ function GridTable(props) {
                     stickyOffset,
                     openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                     columnSizes,
+                    level,
                     ...sortProps,
                 }), void 0) }), `${row.kind}-${row.id}`));
         }
@@ -144,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 ||
@@ -153,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];
     }, [
@@ -427,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) {
@@ -437,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];
@@ -464,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("%")) {
@@ -506,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/index.d.ts

@@ -7,4 +7,4 @@ export type { Direction, GridCellAlignment, GridCellContent, GridCollapseContext
 export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";
 export type { SimpleHeaderAndDataOf, SimpleHeaderAndDataWith } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";
-export { cardStyle, condensedStyle, defaultStyle } from "./styles";
+export { beamFixedStyle, beamFlexibleStyle, beamNestedFixedStyle, beamNestedFlexibleStyle, cardStyle, condensedStyle, defaultStyle, } from "./styles";

package/dist/components/Table/index.js

@@ -10,7 +10,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.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
 var GridSortContext_1 = require("./GridSortContext");
@@ -28,6 +28,10 @@ Object.defineProperty(exports, "simpleRows", { enumerable: true, get: function (
 var SortHeader_1 = require("./SortHeader");
 Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
 var styles_1 = require("./styles");
+Object.defineProperty(exports, "beamFixedStyle", { enumerable: true, get: function () { return styles_1.beamFixedStyle; } });
+Object.defineProperty(exports, "beamFlexibleStyle", { enumerable: true, get: function () { return styles_1.beamFlexibleStyle; } });
+Object.defineProperty(exports, "beamNestedFixedStyle", { enumerable: true, get: function () { return styles_1.beamNestedFixedStyle; } });
+Object.defineProperty(exports, "beamNestedFlexibleStyle", { enumerable: true, get: function () { return styles_1.beamNestedFlexibleStyle; } });
 Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return styles_1.cardStyle; } });
 Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return styles_1.condensedStyle; } });
 Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return styles_1.defaultStyle; } });

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.9",
+  "version": "2.106.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",