@homebound/beam 2.105.8 → 2.105.9

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

@@ -48,6 +48,8 @@ export interface GridStyle {
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
     presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
+    /** Minimum table width in pixels. Used when calculating columns sizes */
+    minWidthPx?: number;
 }
 export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
 export interface NestedCardsStyle {
@@ -164,6 +166,8 @@ export interface GridTableProps<R extends Kinded, S, X> {
     xss?: X;
     /** Experimental API allowing one to scroll to a table index. Primarily intended for stories at the moment */
     api?: MutableRefObject<GridTableApi | undefined>;
+    /** Experimental, expecting to be removed - Specify the element in which the table should resize its columns against. If not set, the table will resize columns based on its owns container's width */
+    resizeTarget?: MutableRefObject<HTMLElement | null>;
 }
 /** NOTE: This API is experimental and primarily intended for story and testing purposes */
 export declare type GridTableApi = {
@@ -190,7 +194,7 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
+export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined, tableWidth: number | undefined, tableMinWidthPx?: number): string[];
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *

package/dist/components/Table/GridTable.js

@@ -24,6 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
@@ -39,6 +40,7 @@ const sortRows_1 = require("./sortRows");
 const useSortState_1 = require("./useSortState");
 const Css_1 = require("../../Css");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const use_debounce_1 = require("use-debounce");
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
@@ -81,10 +83,11 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d, _e;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, resizeTarget, } = props;
     const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
+    const tableRef = (0, react_1.useRef)(null);
     if (api) {
         api.current = {
             scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
@@ -98,7 +101,21 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
-    const columnSizes = (0, react_1.useMemo)(() => { var _a; return calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth); }, [columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth]);
+    const [tableWidth, setTableWidth] = (0, react_1.useState)();
+    // Calc our initial/first render sizes where we won't have a width yet
+    const [columnSizes, setColumnSizes] = (0, react_1.useState)(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
+    const setTableWidthDebounced = (0, use_debounce_1.useDebouncedCallback)((width) => {
+        var _a;
+        setTableWidth(width);
+        setColumnSizes(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
+    }, 100);
+    const onResize = (0, react_1.useCallback)(() => {
+        const target = (resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) ? resizeTarget.current : tableRef.current;
+        if (target && target.clientWidth !== tableWidth) {
+            setTableWidthDebounced(target.clientWidth);
+        }
+    }, [resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current, tableRef.current, setTableWidthDebounced]);
+    (0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
     // Filter + flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
@@ -176,6 +193,7 @@ function GridTable(props) {
         collapseAllContext,
         collapseRowContext,
         observeRows,
+        columnSizes,
     ]);
     let tooManyClientSideRows = false;
     if (filterMaxRows && filteredRows.length > filterMaxRows) {
@@ -208,7 +226,7 @@ function GridTable(props) {
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -218,10 +236,8 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            // Ensure all rows extend the same width
-            ...Css_1.Css.mw("fit-content").$,
+function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: tableRef, css: {
             /*
               Using (n + 3) here to target all rows that are after the first non-header row. Since n starts at 0, we can use
               the + operator as an offset.
@@ -230,17 +246,19 @@ function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage
             ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div:nth-of-type(n+3) > *`, style.betweenRowsCss).$ : {}),
             ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:nth-of-type(2) > *`, style.firstNonHeaderRowCss).$ : {}),
             ...style.rootCss,
+            ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
         }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), filteredRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
-    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
+function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
+    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ ref: tableRef, css: {
             ...Css_1.Css.w100.add("borderCollapse", "collapse").$,
             ...Css_1.Css.addIn("& > tbody > tr ", style.betweenRowsCss || {})
                 // removes border between header and second row
                 .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
             ...style.rootCss,
+            ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
         }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: headerRows.map(([, node]) => node) }, void 0), (0, jsx_runtime_1.jsxs)("tbody", { children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: columns.length, css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }, void 0)), filteredRows.map(([, node]) => node)] }, void 0)] }), void 0));
 }
@@ -264,16 +282,19 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
+function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef, tableRef) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
         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, 
-        // Add `minWidth: fit-content` to ensure a sticky header and the virtualized table body maintain same width
-        style: { minWidth: "fit-content" }, components: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, scrollerRef: (ref) => {
+            // This is fired multiple times per render. Only set `tableRef.current` if it has changed
+            if (ref && tableRef.current !== ref) {
+                tableRef.current = ref;
+            }
+        }, components: {
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
@@ -330,6 +351,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
                         ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
                     }),
                 ...gs.rootCss,
+                ...(gs.minWidthPx ? Css_1.Css.mwPx(gs.minWidthPx).$ : {}),
                 ...xss,
             }, "data-testid": id }, { children: children }), void 0));
     });
@@ -338,7 +360,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-function calcColumnSizes(columns, firstLastColumnWidth) {
+function calcColumnSizes(columns, firstLastColumnWidth, tableWidth, tableMinWidthPx = 0) {
     // For both default columns (1fr) as well as `w: 4fr` columns, we translate the width into an expression that looks like:
     // calc((100% - allOtherPercent - allOtherPx) * ((myFr / totalFr))`
     //
@@ -369,6 +391,14 @@ function calcColumnSizes(columns, firstLastColumnWidth) {
     }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
+        // If the tableWidth, then return a pixel value
+        if (tableWidth) {
+            const widthBasis = Math.max(tableWidth, tableMinWidthPx);
+            // When the tableWidth is defined, then we need to account for the `firstLastColumnWidth`s.
+            return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels - (firstLastColumnWidth !== null && firstLastColumnWidth !== void 0 ? firstLastColumnWidth : 0) * 2) *
+                (myFr / totalFr)}px)`;
+        }
+        // Otherwise return the `calc()` value
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
     let sizes = columns.map(({ w }) => {
@@ -390,13 +420,10 @@ function calcColumnSizes(columns, firstLastColumnWidth) {
             return fr(w);
         }
     });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth);
-}
-exports.calcColumnSizes = calcColumnSizes;
-// If we're doing nested cards, we add extra 1st/last cells...
-function maybeAddCardColumns(sizes, firstLastColumnWidth) {
+    // If we're doing nested cards, we add extra 1st/last cells...
     return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
 }
+exports.calcColumnSizes = calcColumnSizes;
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
     const indent = (isGridCellContent(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
@@ -484,12 +511,12 @@ function GridRow(props) {
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // Define the width of the column on each cell. Supports col spans.
-                ...(columnSizes && {
+                ...{
                     width: `calc(${columnSizes
                         .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
                         .join(" + ")})`,
-                    ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
-                }),
+                },
+                ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
                 ? rowLinkRenderFn(as)

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

@@ -97,9 +97,8 @@ export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyle
 export declare function makeSpacer(height: number, openCards: string[], styles: NestedCardsStyle): Chrome;
 interface ChromeRowProps {
     chromeBuffer: ChromeBuffer;
-    columns: number;
 }
-export declare function ChromeRow({ chromeBuffer, columns }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ChromeRow({ chromeBuffer }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function dropChromeRows<R extends Kinded>(rows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
 export declare function isLeafRow<R extends Kinded>(row: GridDataRow<R>): boolean;
 export {};

package/dist/components/Table/nestedCards.js

@@ -82,10 +82,7 @@ class NestedCards {
      */
     maybeCreateChromeRow() {
         if (this.chromeBuffer.length > 0) {
-            this.rows.push([
-                undefined,
-                (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...this.chromeBuffer], columns: this.columns.length }, this.chromeRowIndex++),
-            ]);
+            this.rows.push([undefined, (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...this.chromeBuffer] }, this.chromeRowIndex++)]);
             // clear the Chrome buffer
             this.chromeBuffer.splice(0, this.chromeBuffer.length);
         }
@@ -201,10 +198,8 @@ function makeSpacer(height, openCards, styles) {
     };
 }
 exports.makeSpacer = makeSpacer;
-function ChromeRow({ chromeBuffer, columns }) {
-    return (
-    // We add 2 to account for our dedicated open/close columns
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns + 2}`).$ }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }), void 0));
+function ChromeRow({ chromeBuffer }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }, void 0));
 }
 exports.ChromeRow = ChromeRow;
 function dropChromeRows(rows) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.105.8",
+  "version": "2.105.9",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -53,7 +53,8 @@
     "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
-    "use-query-params": "^1.2.2"
+    "use-query-params": "^1.2.2",
+    "use-debounce": "^7.0.1"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",