@homebound/beam 2.102.3 → 2.102.7

package/dist/components/IconButton.js

@@ -41,6 +41,6 @@ function IconButton(props) {
 }
 exports.IconButton = IconButton;
 const iconButtonStylesReset = Css_1.Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0.dif.aic.jcc.transition.$;
-exports.iconButtonStylesHover = Css_1.Css.bgGray100.$;
+exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
 const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

package/dist/components/Table/GridTable.js

@@ -109,7 +109,6 @@ function GridTable(props) {
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
             const sortProps = row.kind === "header" ? { sorting, sortState, setSortKey } : { sorting };
             const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
-            const openCards = row.kind === "header" ? headerCards : rowCards;
             return ((0, jsx_runtime_1.jsx)(exports.GridCollapseContext.Provider, Object.assign({ value: row.kind === "header" ? collapseAllContext : collapseRowContext }, { children: (0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
                     as,
                     columns,
@@ -118,7 +117,7 @@ function GridTable(props) {
                     rowStyles,
                     stickyHeader,
                     stickyOffset,
-                    openCards: openCards ? openCards.currentOpenCards() : undefined,
+                    openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                     columnSizes,
                     ...sortProps,
                 }), void 0) }), `${row.kind}-${row.id}`));
@@ -127,9 +126,7 @@ function GridTable(props) {
         const headerRows = [];
         const filteredRows = [];
         // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
-        // for the header and row (non-header rows) cards.
-        const headerCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, headerRows, style.nestedCards);
-        const rowCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style.nestedCards);
+        const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style.nestedCards);
         // Depth-first to filter
         function visit(row) {
             var _a;
@@ -139,38 +136,30 @@ function GridTable(props) {
             // Even if we don't pass the filter, one of our children might, so we continue on after this check
             let isCard = false;
             if (matches) {
-                isCard = rowCards && rowCards.maybeOpenCard(row);
+                isCard = nestedCards && nestedCards.maybeOpenCard(row);
                 filteredRows.push([row, makeRowComponent(row)]);
             }
             const isCollapsed = collapsedIds.includes(row.id);
             if (!isCollapsed && !!((_a = row.children) === null || _a === void 0 ? void 0 : _a.length)) {
-                rowCards && matches && rowCards.addSpacer();
+                nestedCards && matches && nestedCards.addSpacer();
                 visitRows(row.children, isCard);
             }
-            isCard && rowCards && rowCards.closeCard();
+            !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
         }
         function visitRows(rows, addSpacer) {
             const length = rows.length;
             rows.forEach((row, i) => {
-                var _a;
                 if (row.kind === "header") {
-                    // Flag to determine if the header has nested card styles.
-                    // This will determine if we should include opening and closing
-                    // Chrome rows.
-                    const isHeaderNested = !!((_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds["header"]);
-                    isHeaderNested && headerCards && headerCards.maybeOpenCard(row);
                     headerRows.push([row, makeRowComponent(row)]);
-                    isHeaderNested && headerCards && headerCards.closeCard();
-                    isHeaderNested && headerCards && headerCards.done();
                     return;
                 }
                 visit(row);
-                addSpacer && rowCards && i !== length - 1 && rowCards.addSpacer();
+                addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
         }
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
-        visitRows(maybeSorted, !!rowCards);
-        rowCards && rowCards.done();
+        visitRows(maybeSorted, !!nestedCards);
+        nestedCards && nestedCards.done();
         return [headerRows, filteredRows];
     }, [
         as,
@@ -221,49 +210,19 @@ const renders = {
 };
 /** Renders table using divs with flexbox rows, which is the default render */
 function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
-    var _a;
-    // We must determine if the header is using nested card styles to account for
-    // the opening and closing Chrome rows.
-    const isNestedCardStyleHeader = !!((_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds["header"]);
-    /*
-      Determine at what CSS selector index is the first non header row. Note that
-      CSS selectors are not zero-based, unlike JavaScript, so we must add 1 to
-      what we'd normally expect.
-  
-      Ex: When we don't have nestedCard styled headers, then we don't have opening
-      and closing Chrome rows. Therefore, the first non-header row is the second
-      row and since CSS selectors are not zero-based, we are aiming for a value
-      of 2 (1 + 1).
-  
-      Ex: When we have nestedCard styled headers, then we have opening and closing
-      Chrome rows. Therefore, the first non-header row is the fourth row because:
-      - Row 1 is the opening Chrome Row
-      - Row 2 is the header
-      - Row 3 is the closing Chrome Row
-      - Row 4 is the first non-header row
-      And since CSS selectors are not zero-based, we are aiming for a value of 4
-      (3 + 1).
-    */
-    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
+              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.
-    
               Inspired by: https://stackoverflow.com/a/25005740/2551333
             */
-            ...(style.betweenRowsCss
-                ? Css_1.Css.addIn(`& > div:nth-of-type(n + ${firstNonHeaderRowIndex + 1}) > *`, style.betweenRowsCss).$
-                : {}),
-            ...(style.firstNonHeaderRowCss
-                ? Css_1.Css.addIn(`& > div:nth-of-type(${firstNonHeaderRowIndex}) > *`, style.firstNonHeaderRowCss).$
-                : {}),
+            ...(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,
             ...xss,
-        }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0), filteredRows.map(([, node]) => node)] }), void 0));
+        }, "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) {
@@ -310,16 +269,7 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
-        topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), itemSize: (el) => {
-            const maybeContentsDiv = el.firstElementChild;
-            // If it is a chrome row, then we are not using `display: contents;`, return the height of this element.
-            if ("chrome" in maybeContentsDiv.dataset) {
-                return maybeContentsDiv.getBoundingClientRect().height || 1;
-            }
-            // Both the `Item` and `itemContent` use `display: contents`, so their height is 0,
-            // so instead drill into the 1st real content cell.
-            return maybeContentsDiv.firstElementChild.getBoundingClientRect().height;
-        }, itemContent: (index) => {
+        topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), itemContent: (index) => {
             // Since we have two arrays of rows: `headerRows` and `filteredRow` we
             // must determine which one to render.
             // Determine if we need to render a header row
@@ -407,7 +357,7 @@ function calcColumnSizes(columns, firstLastColumnWidth) {
         else {
             throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
         }
-    }, { claimedPercentages: 0, claimedPixels: firstLastColumnWidth ? firstLastColumnWidth * 2 : 0, totalFr: 0 });
+    }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
@@ -455,93 +405,84 @@ function GridRow(props) {
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
+    const Row = as === "table" ? "tr" : "div";
+    const openCardStyles = typeof openCards === "string"
+        ? openCards
+            .split(":")
+            .map((openCardKind) => style.nestedCards.kinds[openCardKind])
+            .filter((style) => style)
+        : undefined;
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
-        // For virtual tables use `display: flex` to keep all cells on the same row, but use `flexNone` to ensure the cells stay their defined widths
-        ...(as === "table" ? {} : Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$),
+        // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
+        ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) &&
             style.rowHoverColor && {
             // Even though backgroundColor is set on the cellCss (due to display: content), the hover target is the row.
             "&:hover > *": Css_1.Css.cursorPointer.bgColor(maybeDarken(rowStyleCellCss === null || rowStyleCellCss === void 0 ? void 0 : rowStyleCellCss.backgroundColor, style.rowHoverColor)).$,
         }),
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
+        // Maybe add the sticky header styles
         ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined),
+        ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style),
     };
-    const Row = as === "table" ? "tr" : "div";
-    const openCardStyles = typeof openCards === "string"
-        ? openCards
-            .split(":")
-            .map((openCardKind) => style.nestedCards.kinds[openCardKind])
-            .filter((style) => style)
-        : undefined;
-    const currentCard = openCardStyles && openCardStyles[openCardStyles.length - 1];
     let currentColspan = 1;
-    const maybeStickyHeaderStyles = isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCardStyles &&
-                (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "first", {
-                    ...maybeStickyHeaderStyles,
-                    ...(columnSizes ? Css_1.Css.w(columnSizes[0]).$ : {}),
-                }), columns.map((column, columnIndex) => {
-                var _a;
-                // Decrement colspan count and skip if greater than 1.
-                if (currentColspan > 1) {
-                    currentColspan -= 1;
-                    return;
-                }
-                const maybeContent = applyRowFn(column, row);
-                currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
-                const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
-                    ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
-                const alignment = getAlignment(column, maybeContent);
-                const justificationCss = getJustification(column, maybeContent, as, alignment);
-                const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
-                (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
-                const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
-                // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
-                // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
-                // a few descendent selectors. However, that approach means the root grid-applied
-                // CSS has a high-specificity and so its harder for per-page/per-cell business logic
-                // to override it. So, we just calc the combined table-wide+per-cell-overridden CSS here,
-                // in a very CSS-in-JS idiomatic manner.
-                //
-                // In practice we've not seen any performance issues with this from our "large but
-                // not Google spreadsheets" tables.
-                const cellCss = {
-                    // Adding display flex so we can align content within the cells
-                    ...Css_1.Css.df.$,
-                    // Apply any static/all-cell styling
-                    ...style.cellCss,
-                    // Then override with first/last cell styling
-                    ...getFirstOrLastCellCss(style, columnIndex, columns),
-                    // Then override with per-cell/per-row justification/indentation
-                    ...justificationCss,
-                    ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
-                    // Then apply any header-specific override
-                    ...(isHeader && style.headerCellCss),
-                    // If we're within a card, use its background color
-                    ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
-                    // And finally the specific cell's css (if any from GridCellContent)
-                    ...rowStyleCellCss,
-                    // Define the width of the column on each cell. Supports col spans.
-                    ...(columnSizes && {
-                        width: `calc(${columnSizes
-                            .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
-                            .join(" + ")})`,
-                    }),
-                };
-                const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
-                    ? rowLinkRenderFn(as)
-                    : isHeader
-                        ? headerRenderFn(columns, column, sortState, setSortKey, as)
-                        : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)
-                            ? rowClickRenderFn(as)
-                            : defaultRenderFn(as);
-                return renderFn(columnIndex, cellCss, content, row, rowStyle);
-            }), openCardStyles &&
-                (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "final", {
-                    ...maybeStickyHeaderStyles,
-                    ...(columnSizes ? Css_1.Css.w(columnSizes[columnSizes.length - 1]).$ : {}),
-                })] }), void 0));
+    const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, { children: columns.map((column, columnIndex) => {
+            var _a;
+            // Decrement colspan count and skip if greater than 1.
+            if (currentColspan > 1) {
+                currentColspan -= 1;
+                return;
+            }
+            const maybeContent = applyRowFn(column, row);
+            currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+            const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
+                ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
+            const alignment = getAlignment(column, maybeContent);
+            const justificationCss = getJustification(column, maybeContent, as, alignment);
+            const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
+            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
+            const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
+            // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
+            // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
+            // a few descendent selectors. However, that approach means the root grid-applied
+            // CSS has a high-specificity and so its harder for per-page/per-cell business logic
+            // to override it. So, we just calc the combined table-wide+per-cell-overridden CSS here,
+            // in a very CSS-in-JS idiomatic manner.
+            //
+            // In practice we've not seen any performance issues with this from our "large but
+            // not Google spreadsheets" tables.
+            const cellCss = {
+                // Adding display flex so we can align content within the cells
+                ...Css_1.Css.df.$,
+                // Apply any static/all-cell styling
+                ...style.cellCss,
+                // Then override with first/last cell styling
+                ...getFirstOrLastCellCss(style, columnIndex, columns),
+                // Then override with per-cell/per-row justification/indentation
+                ...justificationCss,
+                ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
+                // Then apply any header-specific override
+                ...(isHeader && style.headerCellCss),
+                // And finally the specific cell's css (if any from GridCellContent)
+                ...rowStyleCellCss,
+                // Define the width of the column on each cell. Supports col spans.
+                ...(columnSizes && {
+                    width: `calc(${columnSizes
+                        .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
+                        .join(" + ")})`,
+                }),
+            };
+            const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
+                ? rowLinkRenderFn(as)
+                : isHeader
+                    ? headerRenderFn(columns, column, sortState, setSortKey, as)
+                    : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)
+                        ? rowClickRenderFn(as)
+                        : defaultRenderFn(as);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle);
+        }) }), void 0));
+    return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
 // Fix to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
 const MemoizedGridRow = react_1.default.memo(GridRow);

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

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { GridColumn, GridDataRow, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
+import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
 declare type Chrome = () => JSX.Element;
 declare type ChromeBuffer = Chrome[];
 /**
@@ -71,10 +71,23 @@ export declare class NestedCards {
  */
 export declare function makeOpenOrCloseCard(openCards: string[], cardStyles: NestedCardStyleByKind, kind: "open" | "close"): Chrome;
 /**
- * For the first or last cell of actual content, wrap them in divs that re-create the
- * outer cards' padding + background.
+ * Wraps a row within its parent cards. Creates a wrapping div to add the card padding.
+ * Adds non-leaf card padding and borders, e.g. if the current row is a non-leaf then it will already be in `openCards`
+ * Example:
+ * <div parent> <div child> <div grandchild /> </div> </div>
  */
-export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column: "first" | "final", styles?: {}): any;
+export declare function wrapCard(openCards: NestedCardStyle[], row: JSX.Element): JSX.Element;
+export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyles: NestedCardStyle[] | undefined, style: GridStyle): {
+    paddingTop?: import("csstype").Property.PaddingTop<0 | (string & {})> | undefined;
+    paddingBottom?: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    borderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
+    backgroundColor?: import("csstype").Property.BackgroundColor | undefined;
+    borderColor?: import("csstype").Property.BorderColor | undefined;
+    borderStyle?: import("csstype").Property.BorderStyle | undefined;
+    borderWidth?: import("csstype").Property.BorderWidth<0 | (string & {})> | undefined;
+    paddingLeft?: import("csstype").Property.PaddingLeft<0 | (string & {})> | undefined;
+    paddingRight?: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
+};
 /**
  * Create a spacer between rows of children.
  *
@@ -88,4 +101,5 @@ interface ChromeRowProps {
 }
 export declare function ChromeRow({ chromeBuffer, columns }: 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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
+exports.isLeafRow = exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.getNestedCardStyles = exports.wrapCard = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
@@ -37,8 +37,8 @@ class NestedCards {
      */
     maybeOpenCard(row) {
         const card = this.styles.kinds[row.kind];
-        // If this kind doesn't have a card defined, don't put it on the card stack
-        if (card) {
+        // If this kind doesn't have a card defined or is a leaf card (which handle their own card styles in GridRow), then don't put it on the card stack
+        if (card && !isLeafRow(row)) {
             this.openCards.push(row.kind);
             this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "open"));
         }
@@ -138,21 +138,47 @@ function makeOpenOrCloseCard(openCards, cardStyles, kind) {
 }
 exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
 /**
- * For the first or last cell of actual content, wrap them in divs that re-create the
- * outer cards' padding + background.
+ * Wraps a row within its parent cards. Creates a wrapping div to add the card padding.
+ * Adds non-leaf card padding and borders, e.g. if the current row is a non-leaf then it will already be in `openCards`
+ * Example:
+ * <div parent> <div child> <div grandchild /> </div> </div>
  */
-function maybeAddCardPadding(openCards, column, styles) {
-    let div = undefined;
+function wrapCard(openCards, row) {
+    let div = row;
     [...openCards].reverse().forEach((card) => {
         div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-                ...Css_1.Css.h100.bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).$,
-                ...(column === "first" && Css_1.Css.plPx(card.pxPx).if(!!card.bColor).bl.$),
-                ...(column === "final" && Css_1.Css.prPx(card.pxPx).if(!!card.bColor).br.$),
+                ...Css_1.Css.h100.pxPx(card.pxPx).bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).bl.br.$,
             } }, { children: div }), void 0));
     });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-cardpadding": "true" }, (styles ? { css: styles } : {}), { children: div }), void 0));
+    return div;
 }
-exports.maybeAddCardPadding = maybeAddCardPadding;
+exports.wrapCard = wrapCard;
+function getNestedCardStyles(row, openCardStyles, style) {
+    var _a, _b, _c;
+    const leafCardStyles = isLeafRow(row) ? (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds[row.kind] : undefined;
+    // Calculate the horizontal space already allocated by the open cards (paddings and borders)
+    const openCardWidth = openCardStyles ? openCardStyles.reduce((acc, o) => acc + o.pxPx + (o.bColor ? 1 : 0), 0) : 0;
+    // Subtract the openCardWidth from the `firstLastColumnWidth` to determine the amount of padding to add to this card.
+    // Also if it is a leaf card, then we need to additionally subtract out the border width to have it properly line up with the chrome rows
+    const currentCardPaddingWidth = ((_c = (_b = style.nestedCards) === null || _b === void 0 ? void 0 : _b.firstLastColumnWidth) !== null && _c !== void 0 ? _c : 0) - openCardWidth - ((leafCardStyles === null || leafCardStyles === void 0 ? void 0 : leafCardStyles.bColor) ? 1 : 0);
+    return {
+        // Card styles apply a calculated padding to ensure the content lines up properly across all columns
+        ...(currentCardPaddingWidth ? Css_1.Css.pxPx(currentCardPaddingWidth).$ : undefined),
+        // Leaf cards define their own borders + padding
+        ...(leafCardStyles
+            ? // We can have versions of the same card as a leaf and not as a leaf.
+                // When it is not a leaf then it has chrome rows that create the top and bottom "padding" based on border-radius size. (brPx = "chrome" row height)
+                // When it is a leaf, then we need to apply the brPx to the row to ensure consistent spacing between leaf & non-leaf renders
+                // Additionally, if the leaf card has a border, then subtract the 1px border width from the padding to keep consistent with the "chrome" row
+                Css_1.Css.pyPx(leafCardStyles.brPx - (leafCardStyles.bColor ? 1 : 0))
+                    .borderRadius(`${leafCardStyles.brPx}px`)
+                    .bgColor(leafCardStyles.bgColor)
+                    .if(!!leafCardStyles.bColor)
+                    .bc(leafCardStyles.bColor).ba.$
+            : undefined),
+    };
+}
+exports.getNestedCardStyles = getNestedCardStyles;
 /**
  * Create a spacer between rows of children.
  *
@@ -178,10 +204,14 @@ 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}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }), void 0));
+    (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));
 }
 exports.ChromeRow = ChromeRow;
 function dropChromeRows(rows) {
     return rows.filter(([r]) => !!r);
 }
 exports.dropChromeRows = dropChromeRows;
+function isLeafRow(row) {
+    return row.children === undefined || row.children.length === 0;
+}
+exports.isLeafRow = isLeafRow;

package/dist/components/Table/useSortState.js

@@ -51,6 +51,11 @@ function deriveSortState(currentSortState, clickedKey, initialSortState) {
     if (!currentSortState || clickedKey !== currentKey) {
         return [clickedKey, GridTable_1.ASC];
     }
+    // If there is an `initialSortState` and we're clicking on that same key, then flip the sort.
+    // Handles cases where the initial sort is DESC so that we can allow for DESC to ASC sorting.
+    if (initialSortState && initialSortState[0] === clickedKey) {
+        return [clickedKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC];
+    }
     // Otherwise when clicking the current column, toggle through sort states
     if (currentDirection === GridTable_1.ASC) {
         // if ASC -> go to desc

package/dist/components/index.d.ts

@@ -1,7 +1,6 @@
 export * from "./Chip";
 export * from "./Chips";
 export * from "./Table/GridTable";
-export { makeOpenOrCloseCard, makeSpacer, maybeAddCardPadding } from "./Table/nestedCards";
 export * from "./ToggleChip";
 export * from "./ToggleChips";
 export * from "./Alert";

package/dist/components/index.js

@@ -10,14 +10,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = exports.maybeAddCardPadding = exports.makeSpacer = exports.makeOpenOrCloseCard = void 0;
+exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
 __exportStar(require("./Chip"), exports);
 __exportStar(require("./Chips"), exports);
 __exportStar(require("./Table/GridTable"), exports);
-var nestedCards_1 = require("./Table/nestedCards");
-Object.defineProperty(exports, "makeOpenOrCloseCard", { enumerable: true, get: function () { return nestedCards_1.makeOpenOrCloseCard; } });
-Object.defineProperty(exports, "makeSpacer", { enumerable: true, get: function () { return nestedCards_1.makeSpacer; } });
-Object.defineProperty(exports, "maybeAddCardPadding", { enumerable: true, get: function () { return nestedCards_1.maybeAddCardPadding; } });
 __exportStar(require("./ToggleChip"), exports);
 __exportStar(require("./ToggleChips"), exports);
 __exportStar(require("./Alert"), exports);

package/dist/utils/rtl.js

@@ -38,8 +38,7 @@ function cell(r, row, column) {
 }
 exports.cell = cell;
 function cellOf(r, tableTestId, rowNum, column) {
-    const nonPaddingColumns = Array.from(row(r, rowNum, tableTestId).childNodes).filter((node) => !("cardpadding" in node.dataset));
-    return nonPaddingColumns[column];
+    return row(r, rowNum, tableTestId).childNodes[column];
 }
 exports.cellOf = cellOf;
 function cellAnd(r, row, column, testId) {
@@ -48,8 +47,8 @@ function cellAnd(r, row, column, testId) {
 }
 exports.cellAnd = cellAnd;
 function row(r, row, tableTestId = "gridTable") {
-    const nonChromeRows = Array.from(r.getByTestId(tableTestId).childNodes).filter((node) => !("chrome" in node.dataset));
-    return nonChromeRows[row];
+    const dataRows = Array.from(r.getByTestId(tableTestId).querySelectorAll("[data-gridrow]"));
+    return dataRows[row];
 }
 exports.row = row;
 function rowAnd(r, rowNum, testId) {

package/package.json

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