@homebound/beam 2.97.5 → 2.98.0

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

@@ -188,7 +188,7 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  *
  * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
  */
-export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
+export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
 export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.

package/dist/components/Table/GridTable.js

@@ -103,8 +103,10 @@ function GridTable(props) {
     }, [columns, rows, sorting, sortState]);
     // Filter + flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
+        var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
+        const columnSizes = as === "virtual" ? calcVirtualGridColumns(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth) : undefined;
         function makeRowComponent(row) {
             // 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.
@@ -119,6 +121,7 @@ function GridTable(props) {
                     stickyHeader,
                     stickyOffset,
                     openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
+                    columnSizes,
                     ...sortProps,
                 }), `${row.kind}-${row.id}`) }), `${row.kind}-${row.id}`));
         }
@@ -303,11 +306,8 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, firstLastColumn
     return react_1.default.forwardRef(function VirtualRoot({ style, children }, ref) {
         // This re-renders each time we have new children in the view port
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style, css: {
-                ...Css_1.Css.dg.gtc(calcVirtualGridColumns(columns, firstLastColumnWidth)).$,
                 // Add an extra `> div` due to Item + itemContent both having divs
-                ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
-                // Add `display:contents` to Item to flatten it like we do GridRow
-                ...Css_1.Css.addIn("& > div", Css_1.Css.display("contents").$).$,
+                ...Css_1.Css.addIn("& > div + div > div", gs.betweenRowsCss || {}).$,
                 ...gs.rootCss,
                 ...xss,
             }, "data-testid": id }, { children: children }), void 0));
@@ -355,7 +355,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
     }, { claimedPercentages: 0, claimedPixels: firstLastColumnWidth ? firstLastColumnWidth * 2 : 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
-        return `calc((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
+        return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
     let sizes = columns.map(({ w }) => {
         if (typeof w === "undefined") {
@@ -394,12 +394,12 @@ function calcDivGridColumns(columns, firstLastColumnWidth) {
             return `${w}fr`;
         }
     });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth);
+    return maybeAddCardColumns(sizes, firstLastColumnWidth).join(" ");
 }
 exports.calcDivGridColumns = calcDivGridColumns;
 // If we're doing nested cards, we add extra 1st/last cells...
 function maybeAddCardColumns(sizes, firstLastColumnWidth) {
-    return (!firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`]).join(" ");
+    return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
 }
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
@@ -414,7 +414,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, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, ...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];
@@ -425,7 +425,7 @@ function GridRow(props) {
         // root-element > row-element > cell-elements, so that we can have a hook for
         // hovers and styling. In theory this would change with subgrids.
         // Only enable when using div as elements
-        ...(as === "table" ? {} : Css_1.Css.display("contents").$),
+        ...(as === "table" ? {} : as === "virtual" ? Css_1.Css.df.$ : Css_1.Css.display("contents").$),
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) &&
             style.rowHoverColor && {
             // Even though backgroundColor is set on the cellCss (due to display: content), the hover target is the row.
@@ -443,7 +443,11 @@ function GridRow(props) {
     const currentCard = openCardStyles && openCardStyles[openCardStyles.length - 1];
     let currentColspan = 1;
     const maybeStickyHeaderStyles = isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCardStyles && (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "first", maybeStickyHeaderStyles), columns.map((column, columnIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCardStyles &&
+                (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "first", {
+                    ...maybeStickyHeaderStyles,
+                    ...(columnSizes ? Css_1.Css.w(columnSizes[0]).$ : {}),
+                }), columns.map((column, columnIndex) => {
                 var _a;
                 // Decrement colspan count and skip if greater than 1.
                 if (currentColspan > 1) {
@@ -456,6 +460,7 @@ function GridRow(props) {
                     ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
                 const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as);
                 (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
+                const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
                 // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
                 // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
                 // a few descendent selectors. However, that approach means the root grid-applied
@@ -477,6 +482,10 @@ function GridRow(props) {
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
+                    // Non-virtualized tables use h100 so that all cells are the same height across the row.
+                    // Virtualized table rows use `display: flex;`, so the flex children are set to `align-self: stretch` by default, which achieves the same goal.
+                    // Though, we need to omit setting `h100` on the flex children, as a flex container needs a defined height set for `h100` to work on flex children
+                    ...(isHeader && as !== "virtual" ? Css_1.Css.h100.$ : undefined),
                     ...maybeStickyHeaderStyles,
                     // If we're within a card, use its background color
                     ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
@@ -484,6 +493,12 @@ function GridRow(props) {
                     ...(currentColspan > 1 ? Css_1.Css.gc(`span ${currentColspan}`).$ : {}),
                     // And finally the specific cell's css (if any from GridCellContent)
                     ...rowStyleCellCss,
+                    // For virtual tables we define the width of the column on each cell. Supports col spans.
+                    ...(columnSizes && {
+                        width: `calc(${columnSizes
+                            .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
+                            .join(" + ")})`,
+                    }),
                 };
                 const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
                     ? rowLinkRenderFn(as)
@@ -493,7 +508,11 @@ function GridRow(props) {
                             ? rowClickRenderFn(as)
                             : defaultRenderFn(as);
                 return renderFn(columnIndex, cellCss, content, row, rowStyle);
-            }), openCardStyles && (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "final", maybeStickyHeaderStyles)] }), void 0));
+            }), openCardStyles &&
+                (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "final", {
+                    ...maybeStickyHeaderStyles,
+                    ...(columnSizes ? Css_1.Css.w(columnSizes[columnSizes.length - 1]).$ : {}),
+                })] }), void 0));
 }
 // Fix to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
 const MemoizedGridRow = react_1.default.memo(GridRow);

package/dist/components/Table/styles.js

@@ -12,8 +12,7 @@ exports.defaultStyle = {
     lastCellCss: Css_1.Css.$,
     indentOneCss: Css_1.Css.pl4.$,
     indentTwoCss: Css_1.Css.pl7.$,
-    // Use h100 so that all cells are the same height when scrolled; set bgWhite for when we're laid over other rows.
-    headerCellCss: Css_1.Css.asfe.nowrap.py1.bgGray100.h100.aife.$,
+    headerCellCss: Css_1.Css.asfe.nowrap.py1.bgGray100.aife.$,
     firstRowMessageCss: Css_1.Css.px1.py2.$,
     rowHoverColor: Css_1.Palette.Gray200,
 };

package/package.json

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