@homebound/beam 2.343.2 → 2.343.4

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/inputs/internal/ComboBoxBase.js

@@ -59,7 +59,7 @@ function ComboBoxBase(props) {
         // Though, it is possible that the `options` prop has changed, which is a dependency on this `useMemo`.
         // That could trigger an unnecessary new reference for `selectedOptions`, and cause additional renders or unexpected state changes.
         // We should avoid updating `selectedOptions` unless `values` has actually changed.
-        if (!(0, fast_deep_equal_1.default)(values.sort(), selectedOptionsRef.current.map(getOptionValue).sort())) {
+        if (!(0, fast_deep_equal_1.default)([...values].sort(), selectedOptionsRef.current.map(getOptionValue).sort())) {
             selectedOptionsRef.current = options.filter((o) => values.includes(getOptionValue(o)));
         }
         return selectedOptionsRef.current;

package/package.json

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