@homebound/beam 2.343.4 → 2.343.5

package/dist/components/Table/GridTable.js

@@ -293,7 +293,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)(() => ({ tableState: tableState }), [tableState]);
-    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap, children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.if(as === "virtual").w("calc(100% - 20px)").$ }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap, children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: (0, components_1.getTableRefWidthStyles)(as === "virtual") }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -391,7 +391,9 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
             // Show firstRowMessage as the first `filteredRow`
             if (firstRowMessage) {
                 if (index === 0) {
-                    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.add("gridColumn", `${columns.length} span`).$, children: (0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, children: firstRowMessage }) }));
+                    return (
+                    // Ensure the fallback message is the same width as the table
+                    (0, jsx_runtime_1.jsx)("div", { css: (0, components_1.getTableRefWidthStyles)(true), children: (0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, children: firstRowMessage }) }));
                 }
                 // Shift index -1 when there is a firstRowMessage to not skip the
                 // first `filteredRow`

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

@@ -48,3 +48,6 @@ export declare function recursivelyGetContainingRow<R extends Kinded>(rowId: str
     array: GridDataRow<R>[];
     parent: GridDataRow<R> | undefined;
 } | undefined;
+export declare function getTableRefWidthStyles(isVirtual: boolean): {
+    width: import("csstype").Property.Width<string | 0> | undefined;
+};

package/dist/components/Table/utils/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recursivelyGetContainingRow = exports.isCursorBelowMidpoint = exports.insertAtIndex = exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.getTableRefWidthStyles = exports.recursivelyGetContainingRow = exports.isCursorBelowMidpoint = exports.insertAtIndex = exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("../../Icon");
 const ExpandableHeader_1 = require("../components/ExpandableHeader");
@@ -200,3 +200,9 @@ function recursivelyGetContainingRow(rowId, rowArray, parent) {
     return undefined;
 }
 exports.recursivelyGetContainingRow = recursivelyGetContainingRow;
+function getTableRefWidthStyles(isVirtual) {
+    // If virtualized take some pixels off the width to accommodate when virtuoso's scrollbar is introduced.
+    // Otherwise a horizontal scrollbar will _always_ appear once the vertical scrollbar is needed
+    return Css_1.Css.w100.if(isVirtual).w("calc(100% - 20px)").$;
+}
+exports.getTableRefWidthStyles = getTableRefWidthStyles;

package/package.json

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