@homebound/beam 2.133.0 → 2.133.1

package/dist/components/Table/GridTable.js

@@ -92,7 +92,8 @@ function GridTable(props) {
     const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
     // 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);
+    // Use this ref to watch for changes in the GridTable's container and resize columns accordingly.
+    const resizeRef = (0, react_1.useRef)(null);
     const api = (0, react_1.useMemo)(() => {
         var _a;
         const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
@@ -111,7 +112,7 @@ function GridTable(props) {
     // (or us) is resetting component state more than necessary, so we track render counts from
     // here instead.
     const { getCount } = (0, useRenderCount_1.useRenderCount)();
-    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
+    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef);
     // Make a single copy of our current collapsed state, so we'll have a single observer.
     const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
     const [sortState, setSortKey, sortOn, caseSensitive] = (0, useSortState_1.useSortState)(columns, props.sorting);
@@ -122,7 +123,7 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sortOn, sortState, caseSensitive]);
-    let hasTotalsRow = false;
+    const hasTotalsRow = rows.some((row) => row.id === "totals");
     // Filter rows - ensures parent rows remain in the list if any children match the filter.
     const filterRows = (0, react_1.useCallback)((acc, row) => {
         var _a, _b, _c;
@@ -133,7 +134,6 @@ function GridTable(props) {
             filters.length === 0 ||
             !!row.pin ||
             filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
-        hasTotalsRow || (hasTotalsRow = row.kind === "totals");
         // If the row matches, add it in
         if (matches) {
             return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterRows, [])) !== null && _b !== void 0 ? _b : []]]);
@@ -227,6 +227,7 @@ function GridTable(props) {
         columnSizes,
         collapsedIds,
         getCount,
+        hasTotalsRow,
     ]);
     let tooManyClientSideRows = false;
     if (filterMaxRows && filteredRows.length > filterMaxRows) {
@@ -262,7 +263,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)(() => ({ rowState }), [rowState]);
-    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: renders[_as](style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ 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.$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -272,8 +273,8 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: tableRef, css: {
+function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             // Use `fit-content` to ensure the width of the table takes up the full width of its content.
             // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
             // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
@@ -292,8 +293,8 @@ function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, fir
         }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), 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, totalsRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
-    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ ref: tableRef, css: {
+function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
+    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
             ...Css_1.Css.w100.add("borderCollapse", "collapse").$,
             ...Css_1.Css.addIn("& > tbody > tr ", style.betweenRowsCss || {})
                 // removes border between header and second row
@@ -323,19 +324,14 @@ function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, f
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef, tableRef) {
+function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     // 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, 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: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
             // Applying a zIndex: 2 to ensure it stays on top of sticky columns
             TopItemList: react_1.default.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: ref, style: { ...props.style, ...{ zIndex: 2 } } }), void 0))),
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),

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

@@ -19,4 +19,4 @@ import { GridColumn, GridStyle } from "./GridTable";
  *
  * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
  */
-export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumn<any>[], tableRef: MutableRefObject<HTMLElement | null>, resizeTarget: MutableRefObject<HTMLElement | null> | undefined): string[];
+export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumn<any>[], resizeRef: MutableRefObject<HTMLElement | null>): string[];

package/dist/components/Table/columnSizes.js

@@ -24,8 +24,8 @@ const use_debounce_1 = require("use-debounce");
  *
  * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
  */
-function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
-    var _a, _b;
+function useSetupColumnSizes(style, columns, resizeRef) {
+    var _a;
     // Calculate the column sizes immediately rather than via the `debounce` method.
     // We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`,
     // which is used internally by `useDebounce`, so the frozen clock means the callback is never called.
@@ -41,8 +41,8 @@ function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
         setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
     }, [setTableWidth, setColumnSizes, columns, style]);
     const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
-    const target = (_b = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) !== null && _b !== void 0 ? _b : tableRef.current;
     const onResize = (0, react_1.useCallback)(() => {
+        const target = resizeRef.current;
         if (target && target.clientWidth !== tableWidth) {
             if (calculateImmediately.current) {
                 calculateImmediately.current = false;
@@ -52,8 +52,8 @@ function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
                 setTableAndColumnWidthsDebounced(target.clientWidth);
             }
         }
-    }, [target, tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
-    (0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
+    }, [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
+    (0, utils_1.useResizeObserver)({ ref: resizeRef, onResize });
     return columnSizes;
 }
 exports.useSetupColumnSizes = useSetupColumnSizes;

package/package.json

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