@homebound/beam 2.71.4 → 2.71.8

package/dist/components/Layout/FullBleed.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+/** Provides a way to extend the full width of the ScrollableParent */
+export declare function FullBleed({ children, omitPadding }: {
+    children: ReactElement;
+    omitPadding?: boolean;
+}): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Layout/FullBleed.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullBleed = void 0;
+const react_1 = require("react");
+const ScrollableParent_1 = require("./ScrollableParent");
+const Css_1 = require("../../Css");
+/** Provides a way to extend the full width of the ScrollableParent */
+function FullBleed({ children, omitPadding = false }) {
+    const { pr, pl } = (0, ScrollableParent_1.useScrollableParent)();
+    return !pr && !pl
+        ? children
+        : (0, react_1.cloneElement)(children, {
+            style: Css_1.Css.ml(`-${pl}`).mr(`-${pr}`).if(!omitPadding).pl(pl).pr(pr).$,
+        });
+}
+exports.FullBleed = FullBleed;

package/dist/components/Layout/ScrollableContent.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode, ReactPortal } from "react";
 /** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-export declare function ScrollableContent({ children }: {
+export declare function ScrollableContent({ children, virtualized, }: {
     children: ReactNode;
+    virtualized?: boolean;
 }): ReactPortal;

package/dist/components/Layout/ScrollableContent.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollableContent = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_dom_1 = require("react-dom");
+const FullBleed_1 = require("./FullBleed");
 const ScrollableParent_1 = require("./ScrollableParent");
+const Css_1 = require("../../Css");
 /** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-function ScrollableContent({ children }) {
-    const { scrollableEl } = (0, ScrollableParent_1.useScrollableParent)();
-    return (0, react_dom_1.createPortal)(children, scrollableEl);
+function ScrollableContent({ children, virtualized = false, }) {
+    const { scrollableEl, pl } = (0, ScrollableParent_1.useScrollableParent)();
+    return (0, react_dom_1.createPortal)(!virtualized ? (children) : (
+    // To prevent Virtuoso's scrollbar from being set in based on the Layout's padding, we will use the FullBleed component w/o padding to push it back over
+    (0, jsx_runtime_1.jsx)(FullBleed_1.FullBleed, Object.assign({ omitPadding: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.pl(pl).$ }, { children: children }), void 0) }), void 0)), scrollableEl);
 }
 exports.ScrollableContent = ScrollableContent;

package/dist/components/Layout/ScrollableParent.d.ts

@@ -2,6 +2,8 @@ import { PropsWithChildren } from "react";
 import { Properties } from "../../Css";
 interface ScrollableParentContextProps {
     scrollableEl: HTMLElement;
+    pr: string | number;
+    pl: string | number;
 }
 interface ScrollableParentContextProviderProps {
     xss?: Properties;

package/dist/components/Layout/ScrollableParent.js

@@ -6,15 +6,23 @@ const react_1 = require("react");
 const Css_1 = require("../../Css");
 const ScrollableParentContext = (0, react_1.createContext)({
     scrollableEl: document.createElement("div"),
+    pr: 0,
+    pl: 0,
 });
 function ScrollableParent({ children, xss }) {
-    const scrollableEl = (0, react_1.useMemo)(() => document.createElement("div"), []);
+    const scrollableEl = (0, react_1.useMemo)(() => {
+        const el = document.createElement("div");
+        // Ensure this wrapping div takes up the full height of its container
+        el.style.height = "100%";
+        return el;
+    }, []);
     const scrollableRef = (0, react_1.useRef)(null);
-    const context = { scrollableEl };
+    const { paddingLeft, paddingRight, ...otherXss } = xss || {};
+    const context = { scrollableEl, pl: paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : 0, pr: paddingRight !== null && paddingRight !== void 0 ? paddingRight : 0 };
     (0, react_1.useEffect)(() => {
         scrollableRef.current.appendChild(scrollableEl);
     }, [scrollableEl]);
-    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.mh0.mw0.df.fdc.$, ...xss } }, { children: [children, (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.overflowAuto.$, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.mh0.mw0.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.pl(context.pl).pr(context.pr).$ }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.pl(context.pl).pr(context.pr).$, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {

package/dist/components/Layout/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./FullBleed";
 export * from "./PreventBrowserScroll";
 export * from "./ScrollableContent";
 export * from "./ScrollableParent";

package/dist/components/Layout/index.js

@@ -10,6 +10,7 @@ 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 });
+__exportStar(require("./FullBleed"), exports);
 __exportStar(require("./PreventBrowserScroll"), exports);
 __exportStar(require("./ScrollableContent"), exports);
 __exportStar(require("./ScrollableParent"), exports);

package/dist/components/Modal/OpenModal.d.ts

@@ -1,8 +1,16 @@
 import { ModalProps } from "./Modal";
+export interface OpenModalProps {
+    /** The custom modal content to show. */
+    children: JSX.Element;
+    /** The size to use. */
+    size?: ModalProps["size"];
+    /** Whether to force the modal to stay open. This is useful for stories where ruler/tape extensions cause the modal to close. */
+    keepOpen?: boolean;
+}
 /**
- * A component for testing open modals in unit tests.
+ * A component for testing open modals in stories and unit tests.
  *
- * Current, calling `render(<ModalComponent />)` in a test currently doesn't work, because
+ * Currently, calling `render(<ModalComponent />)` in a test currently doesn't work, because
  * nothing has called `useModal` to get the header & footer mounted into the DOM.
  *
  * So instead tests can call:
@@ -18,7 +26,4 @@ import { ModalProps } from "./Modal";
  * And `OpenModal` will do a boilerplate `openModal` call, so that the content
  * shows up in the DOM as expected.
  */
-export declare function OpenModal(props: {
-    children: JSX.Element;
-    size?: ModalProps["size"];
-}): JSX.Element;
+export declare function OpenModal(props: OpenModalProps): JSX.Element;

package/dist/components/Modal/OpenModal.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenModal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
+const Modal_1 = require("./Modal");
 const useModal_1 = require("./useModal");
 /**
- * A component for testing open modals in unit tests.
+ * A component for testing open modals in stories and unit tests.
  *
- * Current, calling `render(<ModalComponent />)` in a test currently doesn't work, because
+ * Currently, calling `render(<ModalComponent />)` in a test currently doesn't work, because
  * nothing has called `useModal` to get the header & footer mounted into the DOM.
  *
  * So instead tests can call:
@@ -25,8 +26,17 @@ const useModal_1 = require("./useModal");
  */
 function OpenModal(props) {
     const { openModal } = (0, useModal_1.useModal)();
-    const { size, children } = props;
-    (0, react_1.useEffect)(() => openModal({ size, content: children }), [openModal, size, children]);
-    return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" }, void 0);
+    const { size, children, keepOpen } = props;
+    (0, react_1.useEffect)(() => {
+        if (!keepOpen) {
+            openModal({ size, content: children });
+        }
+    }, [keepOpen, openModal, size, children]);
+    if (keepOpen) {
+        return (0, jsx_runtime_1.jsx)(Modal_1.Modal, { size: size, content: children }, void 0);
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" }, void 0);
+    }
 }
 exports.OpenModal = OpenModal;

package/dist/components/Table/GridTable.js

@@ -130,7 +130,7 @@ function GridTable(props) {
         return rows;
     }, [columns, rows, sorting, sortState]);
     // Filter + flatten + component-ize the sorted rows.
-    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
+    let [headerRows, filteredRows, maxCardPadding] = (0, react_1.useMemo)(() => {
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
         function makeRowComponent(row) {
@@ -161,6 +161,8 @@ function GridTable(props) {
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
         const filteredRows = [];
+        // If we're doing nested cards, we will add extra first/last columns, and need to know how wide to make them
+        let maxCardPadding = undefined;
         // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
         const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style);
         // Depth-first to filter
@@ -171,6 +173,9 @@ function GridTable(props) {
             let isCard = false;
             if (matches) {
                 isCard = nestedCards && nestedCards.maybeOpenCard(row);
+                if (isCard && nestedCards) {
+                    maxCardPadding = nestedCards.maxCardPadding(maxCardPadding);
+                }
                 filteredRows.push([row, makeRowComponent(row)]);
             }
             const isCollapsed = collapsedIds.includes(row.id);
@@ -193,7 +198,7 @@ function GridTable(props) {
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
         visitRows(maybeSorted, !!nestedCards);
         nestedCards && nestedCards.done();
-        return [headerRows, filteredRows];
+        return [headerRows, filteredRows, maxCardPadding];
     }, [
         as,
         maybeSorted,
@@ -231,7 +236,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 renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, xss, virtuosoRef);
+    return renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef);
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -241,9 +246,9 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders as a CSS Grid, which is the default / most well-supported rendered. */
-function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, xss, virtuosoRef) {
+function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.dg.gtc(calcGridColumns(columns)).$,
+            ...Css_1.Css.dg.gtc(calcGridColumns(columns, maxCardPadding)).$,
             ...Css_1.Css
                 // Apply the between-row styling with `div + div > *` so that we don't have to have conditional
                 // `if !lastRow add border` CSS applied via JS that would mean the row can't be React.memo'd.
@@ -256,7 +261,7 @@ function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMes
         }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.add("gridColumn", `${columns.length} span`).$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }), 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, xss, virtuosoRef) {
+function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, 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 || {})
@@ -286,8 +291,8 @@ 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, xss, virtuosoRef) {
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: { List: VirtualRoot(style, columns, id, xss) }, 
+function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef) {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: { List: VirtualRoot(style, columns, id, maxCardPadding, xss) }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
         topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), 
         // Both the `Item` and `itemContent` use `display: contents`, so their height is 0,
@@ -316,11 +321,11 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
  * identity, even though technically we have a different "component" per the given set of props
  * (solely to capture as params that we can't pass through react-virtuoso's API as props).
  */
-const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, xss) => {
+const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, maxCardPadding, xss) => {
     return react_1.default.forwardRef(({ style, children }, ref) => {
         // This re-renders each time we have new children in the view port
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style, css: {
-                ...Css_1.Css.dg.gtc(calcGridColumns(columns)).$,
+                ...Css_1.Css.dg.gtc(calcGridColumns(columns, maxCardPadding)).$,
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
                 // Add `display:contents` to Item to flatten it like we do GridRow
@@ -330,11 +335,16 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, xss) => {
             }, "data-testid": id }, { children: children }), void 0));
     });
 });
-function calcGridColumns(columns) {
-    return (columns
+function calcGridColumns(columns, maxCardPadding) {
+    let sizes = columns.map((c) => {
         // Default to auto, but use `c.w` as a fr if numeric or else `c.w` as-if if a string
-        .map((c) => (typeof c.w === "string" ? c.w : c.w !== undefined ? `${c.w}fr` : "auto"))
-        .join(" "));
+        return typeof c.w === "string" ? c.w : c.w !== undefined ? `${c.w}fr` : "auto";
+    });
+    // If we're doing nested cards, we add extra 1st/last cells...
+    if (maxCardPadding) {
+        sizes = [`${maxCardPadding}px`, ...sizes, `${maxCardPadding}px`];
+    }
+    return sizes.join(" ");
 }
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
@@ -369,52 +379,49 @@ function GridRow(props) {
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
     };
     const Row = as === "table" ? "tr" : "div";
-    const div = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { children: columns.map((column, columnIndex) => {
-            const maybeContent = applyRowFn(column, row);
-            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 content = toContent(maybeContent, isHeader, canSortColumn);
-            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
-            const card = openCards && openCards.length > 0 && openCards[openCards.length - 1];
-            // 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
-                ...getJustification(column, maybeContent, as),
-                ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
-                // Then apply any header-specific override
-                ...(isHeader && style.headerCellCss),
-                ...(isHeader && stickyHeader && Css_1.Css.sticky.top(stickyOffset).z1.$),
-                // And finally the specific cell's css (if any from GridCellContent)
-                ...rowStyleCellCss,
-            };
-            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);
-            let rendered = renderFn(columnIndex, cellCss, content, row, rowStyle);
-            // Sneak in card padding for the 1st / last cells
-            if (card) {
-                rendered = (0, nestedCards_1.maybeAddCardPadding)(columns, openCards, columnIndex, rendered);
-            }
-            return rendered;
-        }) }), void 0));
+    const currentCard = openCards && openCards.length > 0 && openCards[openCards.length - 1];
+    const div = ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "first"), columns.map((column, columnIndex) => {
+                const maybeContent = applyRowFn(column, row);
+                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 content = toContent(maybeContent, isHeader, canSortColumn);
+                (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
+                // 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
+                    ...getJustification(column, maybeContent, as),
+                    ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
+                    // Then apply any header-specific override
+                    ...(isHeader && style.headerCellCss),
+                    ...(isHeader && stickyHeader && Css_1.Css.sticky.top(stickyOffset).z1.$),
+                    // 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,
+                };
+                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);
+            }), openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "final")] }), void 0));
     // Because of useToggleIds, this provider should basically never trigger a re-render, which is
     // good because we don't want the context to change and re-render every row just because some
     // other unrelated rows have collapsed/uncollapsed.

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

@@ -24,6 +24,7 @@ export declare class NestedCards {
     closeCard(): void;
     addSpacerBetweenChildren(): void;
     done(): void;
+    maxCardPadding(current: number | undefined): number;
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards(): NestedCardStyle[];
 }
@@ -45,7 +46,7 @@ export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind:
  * For the first or last cell of actual content, wrap them in divs that re-create the
  * outer cards' padding + background.
  */
-export declare function maybeAddCardPadding(columns: GridColumn<any>[], openCards: NestedCardStyle[], columnIndex: number, div: any): any;
+export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column: "first" | "final"): any;
 /**
  * Create a spacer between rows of children.
  *
@@ -63,7 +64,7 @@ export declare function makeSpacer(height: number, openCards: NestedCardStyle[])
  * - card1 content row
  * - chrome row (card2 open)
  * - nested card2 content row
- * - chrome row (card2 close, card1 cloard)
+ * - chrome row (card2 close, card1 close)
  */
 export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: JSX.Element[]): void;
 export declare function dropChromeRows<R extends Kinded>(filteredRows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];

package/dist/components/Table/nestedCards.js

@@ -51,6 +51,10 @@ class NestedCards {
     done() {
         maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
     }
+    maxCardPadding(current) {
+        const padding = this.openCards.map((c) => c.pxPx + (!!c.bColor ? 1 : 0)).reduce((a, b) => a + b, 0);
+        return Math.max(padding, current || 0);
+    }
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards() {
         return [...this.openCards];
@@ -71,7 +75,7 @@ exports.NestedCards = NestedCards;
  * row separate from the card's actual content.
  */
 function makeOpenOrCloseCard(openCards, kind) {
-    let div = null;
+    let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
     const place = kind === "open" ? "Top" : "Bottom";
     const btOrBb = kind === "open" ? "bt" : "bb";
     // Create nesting for the all open cards, i.e.:
@@ -80,16 +84,17 @@ function makeOpenOrCloseCard(openCards, kind) {
     // | card1 | card2 / ... card3 ... \ card2 | card1 |
     // | card1 | card2 | ... card3 ... | card2 | card1 |
     //
-    [...openCards].reverse().forEach((card) => {
+    [...openCards].reverse().forEach((card, i) => {
+        const first = i === 0;
         div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                 ...Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).$,
                 // Only the 1st div needs border left/right radius + border top/bottom.
-                ...(!div &&
+                ...(first &&
                     Css_1.Css.add({
                         [`border${place}RightRadius`]: `${card.brPx}px`,
                         [`border${place}LeftRadius`]: `${card.brPx}px`,
                     }).hPx(card.brPx).$),
-                ...(card.bColor && Css_1.Css.bc(card.bColor).bl.br.if(!div)[btOrBb].$),
+                ...(card.bColor && Css_1.Css.bc(card.bColor).bl.br.if(first)[btOrBb].$),
             } }, { children: div }), void 0));
     });
     return div;
@@ -99,20 +104,13 @@ exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
  * For the first or last cell of actual content, wrap them in divs that re-create the
  * outer cards' padding + background.
  */
-function maybeAddCardPadding(columns, openCards, columnIndex, div) {
-    const isFirst = columnIndex === 0;
-    const isFinal = columnIndex === columns.length - 1;
-    if (!isFirst && !isFinal) {
-        // Even if we don't need the nested color+padding of each open card, at
-        // least add the background color of the closed open card.
-        const card = openCards[openCards.length - 1];
-        return !card ? div : (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).$ }, { children: div }), void 0);
-    }
+function maybeAddCardPadding(openCards, column) {
+    let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
     [...openCards].reverse().forEach((card) => {
         div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-                ...Css_1.Css.bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).$,
-                ...(isFirst && Css_1.Css.plPx(card.pxPx).if(!!card.bColor).bl.$),
-                ...(isFinal && Css_1.Css.prPx(card.pxPx).if(!!card.bColor).br.$),
+                ...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.$),
             } }, { children: div }), void 0));
     });
     return div;
@@ -144,13 +142,14 @@ exports.makeSpacer = makeSpacer;
  * - card1 content row
  * - chrome row (card2 open)
  * - nested card2 content row
- * - chrome row (card2 close, card1 cloard)
+ * - chrome row (card2 close, card1 close)
  */
 function maybeCreateChromeRow(columns, filteredRows, chromeBuffer) {
     if (chromeBuffer.length > 0) {
         filteredRows.push([
             undefined,
-            (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns.length}`).$ }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c }, i))) }), void 0),
+            // 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.length + 2}`).$ }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c }, i))) }), void 0),
         ]);
         // clear the buffer
         chromeBuffer.splice(0, chromeBuffer.length);

package/package.json

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