@homebound/beam 2.101.0 → 2.101.4

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

@@ -8,7 +8,7 @@ export declare type GridTableXss = Xss<Margin>;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare type Direction = "ASC" | "DESC";
-export declare const emptyCell: () => ReactNode;
+export declare const emptyCell: GridCellContent;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 export declare function setRunningInJest(): void;
 /** Completely static look & feel, i.e. nothing that is based on row kinds/content. */
@@ -212,7 +212,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
  * column being sorted, in which case we use the GridCellContent.value.
  */
 export declare type GridColumn<R extends Kinded, S = {}> = {
-    [K in R["kind"]]: string | (DiscriminateUnion<R, "kind", K> extends {
+    [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
     } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
 } & {

package/dist/components/Table/GridTable.js

@@ -42,8 +42,7 @@ const tinycolor2_1 = __importDefault(require("tinycolor2"));
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
-const emptyCell = () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
-exports.emptyCell = emptyCell;
+exports.emptyCell = { content: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0), value: "" };
 let runningInJest = false;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 function setRunningInJest() {
@@ -247,6 +246,8 @@ function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage
     */
     const firstNonHeaderRowIndex = (!isNestedCardStyleHeader ? 1 : 3) + 1;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+            // Ensure all rows extend the same width
+            ...Css_1.Css.mw("fit-content").$,
             /*
               Using n + (firstNonHeaderRowIndex + 1) here to target all rows that
               are after the first non-header row. Since n starts at 0, we can use
@@ -302,7 +303,9 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
         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, components: {
+    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: {
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
@@ -358,7 +361,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
         // table list generally has styles to scroll the page for windowing.
         const isHeader = Object.keys(style || {}).length === 0;
         // This re-renders each time we have new children in the viewport
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { ...style, ...(gs.nestedCards ? { minWidth: "fit-content" } : {}) }, css: {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { ...style, ...{ minWidth: "fit-content" } }, css: {
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
                 // Table list styles only

package/dist/inputs/TextFieldBase.js

@@ -33,7 +33,7 @@ function TextFieldBase(props) {
     const fieldHeight = 40;
     const compactFieldHeight = 32;
     const fieldStyles = {
-        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$,
+        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .hPx(fieldHeight - maybeSmaller)

package/package.json

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