@homebound/beam 2.105.8 → 2.106.0

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

@@ -48,6 +48,12 @@ export interface GridStyle {
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
     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 {
@@ -164,6 +170,8 @@ export interface GridTableProps<R extends Kinded, S, X> {
     xss?: X;
     /** Experimental API allowing one to scroll to a table index. Primarily intended for stories at the moment */
     api?: MutableRefObject<GridTableApi | undefined>;
+    /** Experimental, expecting to be removed - Specify the element in which the table should resize its columns against. If not set, the table will resize columns based on its owns container's width */
+    resizeTarget?: MutableRefObject<HTMLElement | null>;
 }
 /** NOTE: This API is experimental and primarily intended for story and testing purposes */
 export declare type GridTableApi = {
@@ -190,7 +198,7 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
+export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined, tableWidth: number | undefined, tableMinWidthPx?: number): string[];
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *

package/dist/components/Table/GridTable.js

@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
@@ -39,6 +40,7 @@ const sortRows_1 = require("./sortRows");
 const useSortState_1 = require("./useSortState");
 const Css_1 = require("../../Css");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const use_debounce_1 = require("use-debounce");
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
@@ -81,10 +83,11 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d, _e;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, resizeTarget, } = props;
     const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
     // 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);
     if (api) {
         api.current = {
             scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
@@ -98,12 +101,42 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
-    const columnSizes = (0, react_1.useMemo)(() => { var _a; return calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth); }, [columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth]);
+    // 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 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));
+    }, [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) {
+            if (calculateImmediately.current) {
+                calculateImmediately.current = false;
+                setTableAndColumnWidths(target.clientWidth);
+            }
+            else {
+                setTableAndColumnWidthsDebounced(target.clientWidth);
+            }
+        }
+    }, [
+        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 };
@@ -118,6 +151,7 @@ function GridTable(props) {
                     stickyOffset,
                     openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                     columnSizes,
+                    level,
                     ...sortProps,
                 }), void 0) }), `${row.kind}-${row.id}`));
         }
@@ -127,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 ||
@@ -136,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];
     }, [
@@ -176,6 +210,7 @@ function GridTable(props) {
         collapseAllContext,
         collapseRowContext,
         observeRows,
+        columnSizes,
     ]);
     let tooManyClientSideRows = false;
     if (filterMaxRows && filteredRows.length > filterMaxRows) {
@@ -208,7 +243,7 @@ function GridTable(props) {
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -218,10 +253,8 @@ 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) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            // Ensure all rows extend the same width
-            ...Css_1.Css.mw("fit-content").$,
+function renderDiv(style, id, columns, headerRows, 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
               the + operator as an offset.
@@ -230,17 +263,19 @@ function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage
             ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div:nth-of-type(n+3) > *`, style.betweenRowsCss).$ : {}),
             ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:nth-of-type(2) > *`, style.firstNonHeaderRowCss).$ : {}),
             ...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));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
-    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
+function renderTable(style, id, columns, headerRows, 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 || {})
                 // removes border between header and second row
                 .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
             ...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));
 }
@@ -264,16 +299,19 @@ 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) {
+function renderVirtual(style, id, columns, headerRows, 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;
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
         return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, 
-        // Add `minWidth: fit-content` to ensure a sticky header and the virtualized table body maintain same width
-        style: { minWidth: "fit-content" }, components: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, scrollerRef: (ref) => {
+            // This is fired multiple times per render. Only set `tableRef.current` if it has changed
+            if (ref && tableRef.current !== ref) {
+                tableRef.current = ref;
+            }
+        }, components: {
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
@@ -330,6 +368,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
                         ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
                     }),
                 ...gs.rootCss,
+                ...(gs.minWidthPx ? Css_1.Css.mwPx(gs.minWidthPx).$ : {}),
                 ...xss,
             }, "data-testid": id }, { children: children }), void 0));
     });
@@ -338,7 +377,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-function calcColumnSizes(columns, firstLastColumnWidth) {
+function calcColumnSizes(columns, firstLastColumnWidth, tableWidth, tableMinWidthPx = 0) {
     // For both default columns (1fr) as well as `w: 4fr` columns, we translate the width into an expression that looks like:
     // calc((100% - allOtherPercent - allOtherPx) * ((myFr / totalFr))`
     //
@@ -369,6 +408,14 @@ function calcColumnSizes(columns, firstLastColumnWidth) {
     }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
+        // If the tableWidth, then return a pixel value
+        if (tableWidth) {
+            const widthBasis = Math.max(tableWidth, tableMinWidthPx);
+            // When the tableWidth is defined, then we need to account for the `firstLastColumnWidth`s.
+            return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels - (firstLastColumnWidth !== null && firstLastColumnWidth !== void 0 ? firstLastColumnWidth : 0) * 2) *
+                (myFr / totalFr)}px)`;
+        }
+        // Otherwise return the `calc()` value
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
     let sizes = columns.map(({ w }) => {
@@ -390,16 +437,16 @@ function calcColumnSizes(columns, firstLastColumnWidth) {
             return fr(w);
         }
     });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth);
-}
-exports.calcColumnSizes = calcColumnSizes;
-// If we're doing nested cards, we add extra 1st/last cells...
-function maybeAddCardColumns(sizes, firstLastColumnWidth) {
+    // If we're doing nested cards, we add extra 1st/last cells...
     return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
 }
+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) {
@@ -410,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];
@@ -437,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("%")) {
@@ -479,17 +526,19 @@ 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
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // Define the width of the column on each cell. Supports col spans.
-                ...(columnSizes && {
+                ...{
                     width: `calc(${columnSizes
                         .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
                         .join(" + ")})`,
-                    ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
-                }),
+                },
+                ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
                 ? rowLinkRenderFn(as)

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

@@ -97,9 +97,8 @@ export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyle
 export declare function makeSpacer(height: number, openCards: string[], styles: NestedCardsStyle): Chrome;
 interface ChromeRowProps {
     chromeBuffer: ChromeBuffer;
-    columns: number;
 }
-export declare function ChromeRow({ chromeBuffer, columns }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ChromeRow({ chromeBuffer }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function dropChromeRows<R extends Kinded>(rows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
 export declare function isLeafRow<R extends Kinded>(row: GridDataRow<R>): boolean;
 export {};

package/dist/components/Table/nestedCards.js

@@ -82,10 +82,7 @@ class NestedCards {
      */
     maybeCreateChromeRow() {
         if (this.chromeBuffer.length > 0) {
-            this.rows.push([
-                undefined,
-                (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...this.chromeBuffer], columns: this.columns.length }, this.chromeRowIndex++),
-            ]);
+            this.rows.push([undefined, (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...this.chromeBuffer] }, this.chromeRowIndex++)]);
             // clear the Chrome buffer
             this.chromeBuffer.splice(0, this.chromeBuffer.length);
         }
@@ -201,10 +198,8 @@ function makeSpacer(height, openCards, styles) {
     };
 }
 exports.makeSpacer = makeSpacer;
-function ChromeRow({ chromeBuffer, columns }) {
-    return (
-    // We add 2 to account for our dedicated open/close columns
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns + 2}`).$ }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }), void 0));
+function ChromeRow({ chromeBuffer }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }, void 0));
 }
 exports.ChromeRow = ChromeRow;
 function dropChromeRows(rows) {

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.8",
+  "version": "2.106.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -53,7 +53,8 @@
     "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
-    "use-query-params": "^1.2.2"
+    "use-query-params": "^1.2.2",
+    "use-debounce": "^7.0.1"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",