@homebound/beam 2.343.3 → 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/components/Row.js

@@ -98,12 +98,6 @@ function RowImpl(props) {
             const isFirstContentColumn = !isAction && !foundFirstContentColumn;
             const applyFirstContentColumnStyles = !isHeader && isFirstContentColumn;
             foundFirstContentColumn || (foundFirstContentColumn = applyFirstContentColumnStyles);
-            if (column.mw) {
-                // Validate the column's minWidth definition if set.
-                if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
-                    throw new Error("Beam Table column min-width definition only supports px or percentage values");
-                }
-            }
             // When using the variation of the table with an EXPANDABLE_HEADER, then our HEADER and TOTAL rows have special border styling
             // Keep track of the when we get to the last expanded column so we can apply this styling properly.
             if (hasExpandableHeader && (isHeader || isTotals)) {
@@ -219,7 +213,6 @@ function RowImpl(props) {
                 // Define the width of the column on each cell. Supports col spans.
                 // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly
                 width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`,
-                ...(typeof column.mw === "string" ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;

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

@@ -54,7 +54,7 @@ export type GridColumn<R extends Kinded> = {
      *  Example: Collapsed state shows number of books. Expanded state shows titles of books.
      */
     expandedWidth?: number | string;
-    /** The minimum width the column can shrink to */
+    /** The minimum width the column can shrink to. This must be defined in pixels */
     mw?: string;
     /** The column's default alignment for each cell. */
     align?: GridCellAlignment;

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

@@ -131,34 +131,60 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColum
             throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
         }
     }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
+    // In the event a column defines a fractional unit (fr) as the `w` value and a `mw` value in pixels,
+    // it is possible that the min-width value will kick in and throw off our claimedPixel and totalFr calculations.
+    // Once a `tableWidth` is defined, then we can adjust the claimedPixels and totalFr based on minWidth being present for any columns
+    let adjustedClaimedPixels = claimedPixels;
+    let adjustedTotalFr = totalFr;
+    if (tableWidth) {
+        columns.forEach(({ w, mw }) => {
+            const frUnit = parseFr(w);
+            if (mw === undefined || frUnit === undefined)
+                return;
+            const mwPx = Number(mw.replace("px", ""));
+            const calcedWidth = (tableWidth - (claimedPercentages / 100) * tableWidth - adjustedClaimedPixels) * (frUnit / adjustedTotalFr);
+            // If the calculated width is less than the minWidth, then this column will be sized via pixels instead of `fr` units.
+            if (calcedWidth < mwPx) {
+                // Adjust the claimedPixels and totalFr accordingly
+                adjustedClaimedPixels += mwPx;
+                adjustedTotalFr -= frUnit;
+            }
+        });
+    }
     // This is our "fake but for some reason it lines up better" fr calc
-    function fr(myFr) {
+    function fr(myFr, mw) {
         // If the tableWidth, then return a pixel value
         if (tableWidth) {
             const widthBasis = Math.max(tableWidth, tableMinWidthPx);
-            return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels) * (myFr / totalFr)}px)`;
+            const calcedWidth = (widthBasis - (claimedPercentages / 100) * widthBasis - adjustedClaimedPixels) * (myFr / adjustedTotalFr);
+            return `${Math.max(calcedWidth, mw)}px`;
         }
         // Otherwise return the `calc()` value
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
-    const sizes = columns.map(({ id, expandedWidth, w: _w }) => {
+    const sizes = columns.map(({ id, expandedWidth, w: _w, mw: _mw }) => {
+        // Ensure `mw` is a pixel value if defined
+        if (_mw !== undefined && !_mw.endsWith("px")) {
+            throw new Error("Beam Table column minWidth definition only supports pixel units");
+        }
+        const mw = _mw ? Number(_mw.replace("px", "")) : 0;
         const w = expandedColumnIds.includes(id) && expandedWidth !== undefined ? expandedWidth : _w;
         if (typeof w === "undefined") {
-            return fr(1);
+            return fr(1, mw);
         }
         else if (typeof w === "string") {
             if (w.endsWith("%") || w.endsWith("px")) {
                 return w;
             }
             else if (w.endsWith("fr")) {
-                return fr(Number(w.replace("fr", "")));
+                return fr(Number(w.replace("fr", "")), mw);
             }
             else {
                 throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
             }
         }
         else {
-            return fr(w);
+            return fr(w, mw);
         }
     });
     return sizes;
@@ -226,3 +252,12 @@ function dragHandleColumn(columnDef) {
     });
 }
 exports.dragHandleColumn = dragHandleColumn;
+function parseFr(w) {
+    return typeof w === "number"
+        ? w
+        : typeof w === "undefined"
+            ? 1
+            : typeof w === "string" && w.endsWith("fr")
+                ? Number(w.replace("fr", ""))
+                : undefined;
+}

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