@homebound/beam 2.209.3 → 2.209.4

package/dist/components/Table/GridTable.js

@@ -118,7 +118,8 @@ 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, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef);
+    const expandedColumnIds = (0, hooks_1.useComputed)(() => tableState.expandedColumnIds, [tableState]);
+    const columnSizes = (0, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef, expandedColumnIds);
     // Make a single copy of our current collapsed state, so we'll have a single observer.
     const collapsedIds = (0, hooks_1.useComputed)(() => tableState.collapsedIds, [tableState]);
     const sortState = (0, hooks_1.useComputed)(() => (0, mobx_1.toJS)(tableState.sortState), [tableState]);
@@ -365,7 +366,11 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, expandableHea
             }
             // Lastly render `filteredRow`
             return visibleDataRows[index][1];
-        }, totalCount: (headerRows.length || 0) + (totalsRows.length || 0) + (firstRowMessage ? 1 : 0) + (visibleDataRows.length || 0) }, void 0));
+        }, totalCount: headerRows.length +
+            totalsRows.length +
+            expandableHeaderRows.length +
+            (firstRowMessage ? 1 : 0) +
+            visibleDataRows.length }, void 0));
 }
 /**
  * A table might render two of these components to represent two virtual lists.

package/dist/components/Table/components/Row.js

@@ -72,9 +72,10 @@ function RowImpl(props) {
     let firstContentColumnStylesApplied = false;
     let minStickyLeftOffset = 0;
     return ((0, jsx_runtime_1.jsx)(RowTag, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f;
             // Need to keep track of the expanded columns so we can add borders as expected for the header rows
             const isExpanded = tableState.expandedColumnIds.includes(column.id);
+            const numExpandedColumns = isExpanded ? (_b = (_a = column.expandColumns) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
             const { wrapAction = true, isAction = false } = column;
             const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
             firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
@@ -84,12 +85,13 @@ function RowImpl(props) {
                     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 row required special border styling
+            // 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)) {
                 // When the value of `currentExpandedColumnCount` is 0, then we have started over.
                 // If the current column `isExpanded`, then store the number of expandable columns.
                 if (currentExpandedColumnCount === 0 && isExpanded) {
-                    currentExpandedColumnCount = (_b = (_a = column.expandColumns) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+                    currentExpandedColumnCount = numExpandedColumns;
                 }
                 else if (currentExpandedColumnCount > 0) {
                     // If value is great than 0, then decrement. Once the value equals 0, then the special styling will be applied below.
@@ -102,19 +104,22 @@ function RowImpl(props) {
                 return null;
             }
             const maybeContent = (0, utils_1.applyRowFn)(column, row, api, level, isExpanded);
-            const numExpandedColumns = isExpandableHeader && isExpanded ? (_d = (_c = column.expandColumns) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0 : 0;
-            currentColspan = (0, utils_1.isGridCellContent)(maybeContent)
-                ? (_e = maybeContent.colspan) !== null && _e !== void 0 ? _e : numExpandedColumns + 1
-                : numExpandedColumns + 1;
+            // Only use the `numExpandedColumns` as the `colspan` when rendering the "Expandable Header"
+            currentColspan =
+                (0, utils_1.isGridCellContent)(maybeContent) && typeof maybeContent.colspan === "number"
+                    ? maybeContent.colspan
+                    : isExpandableHeader
+                        ? numExpandedColumns + 1
+                        : 1;
             const revealOnRowHover = (0, utils_1.isGridCellContent)(maybeContent) ? maybeContent.revealOnRowHover : false;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = (0, utils_1.getAlignment)(column, maybeContent);
             const justificationCss = (0, utils_1.getJustification)(column, maybeContent, as, alignment);
-            const isExpandable = column.expandColumns !== undefined && column.expandColumns.length > 0;
+            const isExpandable = (column.expandColumns && column.expandColumns.length > 0) || column.expandedWidth !== undefined;
             const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader || isTotals || isExpandableHeader, column, columnIndex, maybeContent);
-            const maybeSticky = (_f = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _f !== void 0 ? _f : undefined;
+            const maybeSticky = (_c = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _c !== void 0 ? _c : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
                 ? {
                     ...Css_1.Css.sticky.z(utils_1.zIndices.stickyColumns).bgWhite.$,
@@ -167,13 +172,13 @@ function RowImpl(props) {
                     currentExpandedColumnCount === 0 &&
                     Css_1.Css.boxShadow(`inset -1px -1px 0 ${Css_1.Palette.Gray200}`).$),
                 // Or level-specific styling
-                ...(!isHeader && !isTotals && !isExpandableHeader && !!style.levels && ((_g = style.levels[level]) === null || _g === void 0 ? void 0 : _g.cellCss)),
+                ...(!isHeader && !isTotals && !isExpandableHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
                 // Level specific styling for the first content column
-                ...(applyFirstContentColumnStyles && !!style.levels && ((_h = style.levels[level]) === null || _h === void 0 ? void 0 : _h.firstContentColumn)),
+                ...(applyFirstContentColumnStyles && !!style.levels && ((_e = style.levels[level]) === null || _e === void 0 ? void 0 : _e.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
-                ...(isActive ? Css_1.Css.bgColor((_j = style.activeBgColor) !== null && _j !== void 0 ? _j : Css_1.Palette.LightBlue50).$ : {}),
+                ...(isActive ? Css_1.Css.bgColor((_f = style.activeBgColor) !== null && _f !== void 0 ? _f : Css_1.Palette.LightBlue50).$ : {}),
                 // Add any cell specific style overrides
                 ...((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // And any cell specific css
@@ -186,12 +191,10 @@ function RowImpl(props) {
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
-            // If the expandable header is expanded, then we need to set a colspan on it which includes all expanded columns + this column.
-            const expandableHeaderColSpan = (isExpandableHeader && isExpanded ? (_l = (_k = column.expandColumns) === null || _k === void 0 ? void 0 : _k.length) !== null && _l !== void 0 ? _l : 0 : 0) + 1;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? (0, cell_1.rowLinkRenderFn)(as)
                 : isHeader || isTotals || isExpandableHeader
-                    ? (0, cell_1.headerRenderFn)(column, as, expandableHeaderColSpan)
+                    ? (0, cell_1.headerRenderFn)(column, as, currentColspan)
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? (0, cell_1.rowClickRenderFn)(as, api)
                         : (0, cell_1.defaultRenderFn)(as);

package/dist/components/Table/hooks/useSetupColumnSizes.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject } from "react";
 import { GridStyle } from "../TableStyles";
-import { GridColumn } from "../types";
+import { GridColumnWithId } from "../types";
 /**
  * Calculates an array of sizes for each of our columns.
  *
@@ -20,4 +20,4 @@ import { GridColumn } from "../types";
  *
  * 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>[], resizeRef: MutableRefObject<HTMLElement | null>): string[];
+export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumnWithId<any>[], resizeRef: MutableRefObject<HTMLElement | null>, expandedColumnIds: string[]): string[];

package/dist/components/Table/hooks/useSetupColumnSizes.js

@@ -24,17 +24,17 @@ 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, resizeRef) {
+function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds) {
     // 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.
     const calculateImmediately = (0, react_1.useRef)(true);
     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)((0, columns_1.calcColumnSizes)(columns, tableWidth, style.minWidthPx));
+    const [columnSizes, setColumnSizes] = (0, react_1.useState)((0, columns_1.calcColumnSizes)(columns, tableWidth, style.minWidthPx, expandedColumnIds));
     const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
         setTableWidth(width);
-        setColumnSizes((0, columns_1.calcColumnSizes)(columns, width, style.minWidthPx));
+        setColumnSizes((0, columns_1.calcColumnSizes)(columns, width, style.minWidthPx, expandedColumnIds));
     }, [setTableWidth, setColumnSizes, columns, style]);
     // Used to recalculate our columns sizes when columns change
     (0, react_1.useEffect)(() => {

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

@@ -52,6 +52,10 @@ export declare type GridColumn<R extends Kinded> = {
      * - The default value is `1fr`
      */
     w?: number | string;
+    /** Represents the width the column will get when expanded. This prop is treated the same as the `GridColumn.w` prop.
+     *  Example: Collapsed state shows number of books. Expanded state shows titles of books.
+     */
+    expandedWidth?: number | string;
     /** The minimum width the column can shrink to */
     mw?: string;
     /** The column's default alignment for each cell. */

package/dist/components/Table/utils/columns.d.ts

@@ -28,7 +28,7 @@ export declare function collapseColumn<T extends Kinded>(columnDef?: Partial<Gri
  * 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>[], tableWidth: number | undefined, tableMinWidthPx?: number): string[];
+export declare function calcColumnSizes(columns: GridColumnWithId<any>[], tableWidth: number | undefined, tableMinWidthPx: number | undefined, expandedColumnIds: string[]): string[];
 /** Assign column ids if missing */
 export declare function assignDefaultColumnIds<T extends Kinded>(columns: GridColumn<T>[]): GridColumnWithId<T>[];
 export declare const generateColumnId: (columnIndex: number) => string;

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

@@ -97,7 +97,7 @@ function nonKindDefaults() {
  * 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, tableWidth, tableMinWidthPx = 0) {
+function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds) {
     // 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))`
     //
@@ -106,7 +106,8 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0) {
     // Unfortunately, something about having our header & body rows in separate divs (which is controlled
     // by react-virtuoso), even if they have the same width, for some reason `fr` units between the two
     // will resolve every slightly differently, where as this approach they will match exactly.
-    const { claimedPercentages, claimedPixels, totalFr } = columns.reduce((acc, { w }) => {
+    const { claimedPercentages, claimedPixels, totalFr } = columns.reduce((acc, { id, w: _w, expandedWidth }) => {
+        const w = expandedColumnIds.includes(id) && expandedWidth !== undefined ? expandedWidth : _w;
         if (typeof w === "undefined") {
             return { ...acc, totalFr: acc.totalFr + 1 };
         }
@@ -136,7 +137,8 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0) {
         // Otherwise return the `calc()` value
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
-    let sizes = columns.map(({ w }) => {
+    let sizes = columns.map(({ id, expandedWidth, w: _w }) => {
+        const w = expandedColumnIds.includes(id) && expandedWidth !== undefined ? expandedWidth : _w;
         if (typeof w === "undefined") {
             return fr(1);
         }
@@ -164,8 +166,8 @@ function assignDefaultColumnIds(columns) {
     // exists as part of `selectColumn` and `collapseColumn`.
     return columns.map((c, idx) => {
         var _a;
-        const { expandColumns = [] } = c;
-        const expandColumnsWithId = expandColumns.map((ec, ecIdx) => {
+        const { expandColumns } = c;
+        const expandColumnsWithId = expandColumns === null || expandColumns === void 0 ? void 0 : expandColumns.map((ec, ecIdx) => {
             var _a;
             return ({
                 ...ec,

package/package.json

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