@homebound/beam 2.98.0 → 2.99.1

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { MutableRefObject, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
 import { Callback } from "../../types";
 export declare type ModalSize = "sm" | "md" | "lg" | "xl";
@@ -19,7 +19,12 @@ export interface ModalProps {
     forceScrolling?: boolean;
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: Callback;
+    /** Imperative API for interacting with the Modal */
+    api?: MutableRefObject<ModalApi | undefined>;
 }
+export declare type ModalApi = {
+    setSize: (size: ModalProps["size"]) => void;
+};
 /**
  * Internal component for displaying a Modal; see `useModal` for the public API.
  *

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const utils_1 = require("../../utils");
  * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
  */
 function Modal(props) {
-    const { size = "md", content, forceScrolling } = props;
+    const { size = "md", content, forceScrolling, api } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
     const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
@@ -37,13 +37,16 @@ function Modal(props) {
     }, ref);
     const { modalProps } = (0, react_aria_1.useModal)();
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)({ role: "dialog" }, ref);
-    const [width, height] = getSize(size);
+    const [[width, height], setSize] = (0, react_1.useState)(getSize(size));
     const contentRef = (0, react_1.useRef)(null);
     const modalBodyRef = (0, react_1.useRef)(null);
     const modalFooterRef = (0, react_1.useRef)(null);
     const modalHeaderRef = (0, react_1.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     (0, react_aria_1.usePreventScroll)();
+    if (api) {
+        api.current = { setSize: (size = "md") => setSize(getSize(size)) };
+    }
     const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling !== null && forceScrolling !== void 0 ? forceScrolling : false);
     (0, resize_observer_1.default)(contentRef, ({ target }) => {
         if (forceScrolling === undefined && !isFixedHeight) {

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

@@ -4,5 +4,6 @@ export interface UseModalHook {
     openModal: (props: ModalProps) => void;
     closeModal: Callback;
     addCanClose: (canClose: CheckFn) => void;
+    setSize: (size: ModalProps["size"]) => void;
 }
 export declare function useModal(): UseModalHook;

package/dist/components/Modal/useModal.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 function useModal() {
     const { modalState, modalCanCloseChecks } = (0, BeamContext_1.useBeamContext)();
     const lastCanClose = (0, react_1.useRef)();
+    const api = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         return () => {
             modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -16,7 +17,7 @@ function useModal() {
         openModal(props) {
             // TODO Check already open?
             // TODO Check can leave?
-            modalState.current = props;
+            modalState.current = { ...props, api };
         },
         closeModal() {
             var _a;
@@ -38,6 +39,12 @@ function useModal() {
             ];
             lastCanClose.current = canClose;
         },
+        setSize(size) {
+            var _a;
+            if (modalState.current && ((_a = modalState.current.api) === null || _a === void 0 ? void 0 : _a.current)) {
+                modalState.current.api.current.setSize(size);
+            }
+        },
     }), [modalState, modalCanCloseChecks]);
 }
 exports.useModal = useModal;

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

@@ -21,7 +21,14 @@ export interface GridStyle {
     firstNonHeaderRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
     cellCss?: Properties;
-    /** Applied to the header (really first) row div. */
+    /**
+     * Applied to the header row divs.
+     *
+     * NOTE `as=virtual`: When using a virtual table with the goal of adding space
+     * between the header and the first row use `firstNonHeaderRowCss` with a
+     * margin-top instead. Using `headerCellCss` will not work since the header
+     * rows are wrapper with Chrome rows.
+     */
     headerCellCss?: Properties;
     /** Applied to the first cell of all rows, i.e. for table-wide padding or left-side borders. */
     firstCellCss?: Properties;

package/dist/components/Table/GridTable.js

@@ -112,6 +112,7 @@ 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,
@@ -120,16 +121,18 @@ function GridTable(props) {
                     rowStyles,
                     stickyHeader,
                     stickyOffset,
-                    openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
+                    openCards: openCards ? openCards.currentOpenCards() : undefined,
                     columnSizes,
                     ...sortProps,
-                }), `${row.kind}-${row.id}`) }), `${row.kind}-${row.id}`));
+                }), void 0) }), `${row.kind}-${row.id}`));
         }
         // 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 = [];
         // 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);
+        // 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);
         // Depth-first to filter
         function visit(row) {
             var _a;
@@ -139,32 +142,38 @@ 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 = nestedCards && nestedCards.maybeOpenCard(row);
+                isCard = rowCards && rowCards.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)) {
-                nestedCards && matches && nestedCards.addSpacer();
+                rowCards && matches && rowCards.addSpacer();
                 visitRows(row.children, isCard);
             }
-            isCard && nestedCards && nestedCards.closeCard();
+            isCard && rowCards && rowCards.closeCard();
         }
         function visitRows(rows, addSpacer) {
             const length = rows.length;
             rows.forEach((row, i) => {
+                var _a;
                 if (row.kind === "header") {
-                    nestedCards && nestedCards.maybeOpenCard(row);
+                    // 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)]);
-                    nestedCards && nestedCards.closeCard();
+                    isHeaderNested && headerCards && headerCards.closeCard();
+                    isHeaderNested && headerCards && headerCards.done();
                     return;
                 }
                 visit(row);
-                addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
+                addSpacer && rowCards && i !== length - 1 && rowCards.addSpacer();
             });
         }
         // 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();
+        visitRows(maybeSorted, !!rowCards);
+        rowCards && rowCards.done();
         return [headerRows, filteredRows];
     }, [
         as,
@@ -214,15 +223,46 @@ 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, firstLastColumnWidth, xss, virtuosoRef) {
+function renderCssGrid(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: {
             ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastColumnWidth)).$,
-            // 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.
-            // The `div + div` is also the "owl operator", i.e. don't apply to the 1st row.
-            ...(style.betweenRowsCss ? Css_1.Css.addIn("& > div + div > *", style.betweenRowsCss).$ : {}),
-            // removes border between header and second row
-            ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn("& > div:nth-of-type(2) > *", style.firstNonHeaderRowCss).$ : {}),
+            /*
+              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
+              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.rootCss,
             ...xss,
         }, "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));
@@ -259,6 +299,7 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
 function renderVirtual(style, id, columns, headerRows, 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 : {};
@@ -279,35 +320,56 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
             // so instead drill into the 1st real content cell.
             return maybeContentsDiv.firstElementChild.getBoundingClientRect().height;
         }, itemContent: (index) => {
-            // We keep header and filter rows separate, but react-virtuoso is a flat list,
-            // so we pick the right header / first row message / actual row.
-            let i = index;
-            if (i < headerRows.length) {
-                return headerRows[i][1];
+            // 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
+            if (index < headerRows.length) {
+                return headerRows[index][1];
             }
-            i -= headerRows.length;
+            // Reset index
+            index -= headerRows.length;
+            // Show firstRowMessage as the first `filteredRow`
             if (firstRowMessage) {
-                if (i === 0) {
+                if (index === 0) {
                     return ((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));
                 }
-                i -= 1;
+                // Shift index -1 when there is a firstRowMessage to not skip the
+                // first `filteredRow`
+                index--;
             }
-            return filteredRows[i][1];
+            // Lastly render `filteredRow`
+            return filteredRows[index][1];
         }, totalCount: (headerRows.length || 0) + (firstRowMessage ? 1 : 0) + (filteredRows.length || 0) }, void 0));
 }
 /**
- * Customizes the `List` element that react-virtuoso renders, to have our css grid logic.
+ * A table might render two of these components to represent two virtual lists.
+ * This generally happens when `topItemCount` prop is used and React-Virtuoso
+ * creates to Virtual lists where the first represents, generally, the header
+ * rows and the second represents the non-header rows (list rows).
  *
- * We wrap this in memoizeOne so that React.createElement sees a consistent/stable component
- * 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).
+ * The main goal of this custom component is to:
+ * - Customize the list wrapper to our css grid logic styles
+ *
+ * We wrap this in memoizeOne so that React.createElement sees a
+ * consistent/stable component 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, firstLastColumnWidth, xss) => {
+const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColumnWidth, xss) => {
     return react_1.default.forwardRef(function VirtualRoot({ 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: {
+        // This VirtualRoot list represent the header when no styles are given. The
+        // table list generally has styles to scroll the page for windowing.
+        const isHeader = Object.keys(style || {}).length === 0;
+        // This re-renders each time we have new children in the viewport
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { ...style, ...(gs.nestedCards ? { minWidth: "fit-content" } : {}) }, css: {
                 // Add an extra `> div` due to Item + itemContent both having divs
-                ...Css_1.Css.addIn("& > div + div > div", gs.betweenRowsCss || {}).$,
+                ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
+                // Table list styles only
+                ...(isHeader
+                    ? {}
+                    : {
+                        ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
+                    }),
                 ...gs.rootCss,
                 ...xss,
             }, "data-testid": id }, { children: children }), void 0));
@@ -425,7 +487,8 @@ function GridRow(props) {
         // root-element > row-element > cell-elements, so that we can have a hook for
         // hovers and styling. In theory this would change with subgrids.
         // Only enable when using div as elements
-        ...(as === "table" ? {} : as === "virtual" ? Css_1.Css.df.$ : Css_1.Css.display("contents").$),
+        // 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" ? {} : as === "virtual" ? Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$ : Css_1.Css.display("contents").$),
         ...(((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.

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

@@ -1,5 +1,7 @@
 import { ReactElement } from "react";
-import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
+import { GridColumn, GridDataRow, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
+declare type Chrome = () => JSX.Element;
+declare type ChromeBuffer = Chrome[];
 /**
  * A helper class to create our nested card DOM shenanigans.
  *
@@ -12,22 +14,47 @@ import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardsStyle, NestedCar
  * a content row itself, the nested padding is handled separately by the
  * GridRow component.
  */
-declare type Chrome = () => JSX.Element;
-declare type ChromeBuffer = Chrome[];
 export declare class NestedCards {
-    private columns;
-    private filteredRows;
-    private style;
+    private readonly columns;
+    private readonly rows;
+    private readonly styles;
     private readonly openCards;
     private readonly chromeBuffer;
-    private readonly styles;
-    constructor(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], style: GridStyle);
+    private chromeRowIndex;
+    constructor(columns: GridColumn<any>[], rows: RowTuple<any>[], styles: NestedCardsStyle);
+    /**
+     * Maybe add an opening Chrome row to the given `row` if its a nested card.
+     *
+     * @param row The row which will be opened. The open Chrome row will appear
+     * above this row.
+     */
     maybeOpenCard(row: GridDataRow<any>): boolean;
     closeCard(): void;
     addSpacer(): void;
+    /**
+     * Close the remaining open rows with a close Chrome row.
+     *
+     * @param row The row that is completing/closing nested open Chrome rows.
+     */
     done(): void;
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards(): string;
+    /**
+     * Takes the current Chrome row buffer of close row(s), spacers, and open row,
+     * and creates a single chrome DOM row.
+     *
+     * This allows a minimal amount of DOM overhead, insofar as to the css-grid or
+     * react-virtuoso we only add 1 extra DOM node between each row of content to
+     * achieve our nested card look & feel.
+     *
+     * i.e.:
+     * - chrome row (open)
+     * - card1 content row
+     * - chrome row (card2 open)
+     * - nested card2 content row
+     * - chrome row (card2 close, card1 close)
+     */
+    maybeCreateChromeRow(): void;
 }
 /**
  * Draws the rounded corners (either open or close) for a new card.
@@ -55,23 +82,10 @@ export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column
  * have any open cards, but still want a space between top-level cards.
  */
 export declare function makeSpacer(height: number, openCards: string[], styles: NestedCardsStyle): Chrome;
-/**
- * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
- *
- * This allows a minimal amount of DOM overhead, insofar as to the css-grid or react-virtuoso we only
- * 1 extra DOM node between each row of content to achieve our nested card look & feel, i.e.:
- *
- * - chrome row (open)
- * - card1 content row
- * - chrome row (card2 open)
- * - nested card2 content row
- * - chrome row (card2 close, card1 close)
- */
-export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: ChromeBuffer): void;
 interface ChromeRowProps {
     chromeBuffer: ChromeBuffer;
     columns: number;
 }
 export declare function ChromeRow({ chromeBuffer, columns }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function dropChromeRows<R extends Kinded>(filteredRows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
+export declare function dropChromeRows<R extends Kinded>(rows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
 export {};

package/dist/components/Table/nestedCards.js

@@ -1,20 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropChromeRows = exports.ChromeRow = exports.maybeCreateChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
+exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = 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");
+/**
+ * A helper class to create our nested card DOM shenanigans.
+ *
+ * This acts as a one-off visitor that accepts "begin row", "between row",
+ * "end row" calls from GridTable while its translating the user's nested
+ * GridDataRows into a flat list of RowTuples, and interjects fake/chrome
+ * rows into `filteredRows` as necessary.
+ *
+ * Note that this class only handles *between row* chrome and that within
+ * a content row itself, the nested padding is handled separately by the
+ * GridRow component.
+ */
 class NestedCards {
-    constructor(columns, filteredRows, style) {
+    constructor(columns, 
+    // An array of rows which we will add open Chrome rows too to create the table.
+    rows, styles) {
         this.columns = columns;
-        this.filteredRows = filteredRows;
-        this.style = style;
+        this.rows = rows;
+        this.styles = styles;
         // A stack of the current cards we're showing
         this.openCards = [];
         // A buffer of the open/close/spacer rows we need between each content row.
         this.chromeBuffer = [];
-        this.styles = style.nestedCards;
+        this.chromeRowIndex = 0;
     }
+    /**
+     * Maybe add an opening Chrome row to the given `row` if its a nested card.
+     *
+     * @param row The row which will be opened. The open Chrome row will appear
+     * above this row.
+     */
     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
@@ -23,7 +43,7 @@ class NestedCards {
             this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "open"));
         }
         // But always close previous cards if needed
-        maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
+        this.maybeCreateChromeRow();
         return !!card;
     }
     closeCard() {
@@ -33,13 +53,43 @@ class NestedCards {
     addSpacer() {
         this.chromeBuffer.push(makeSpacer(this.styles.spacerPx, this.openCards, this.styles));
     }
+    /**
+     * Close the remaining open rows with a close Chrome row.
+     *
+     * @param row The row that is completing/closing nested open Chrome rows.
+     */
     done() {
-        maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
+        this.maybeCreateChromeRow();
     }
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards() {
         return this.openCards.join(":");
     }
+    /**
+     * Takes the current Chrome row buffer of close row(s), spacers, and open row,
+     * and creates a single chrome DOM row.
+     *
+     * This allows a minimal amount of DOM overhead, insofar as to the css-grid or
+     * react-virtuoso we only add 1 extra DOM node between each row of content to
+     * achieve our nested card look & feel.
+     *
+     * i.e.:
+     * - chrome row (open)
+     * - card1 content row
+     * - chrome row (card2 open)
+     * - nested card2 content row
+     * - chrome row (card2 close, card1 close)
+     */
+    maybeCreateChromeRow() {
+        if (this.chromeBuffer.length > 0) {
+            this.rows.push([
+                undefined,
+                (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...this.chromeBuffer], columns: this.columns.length }, this.chromeRowIndex++),
+            ]);
+            // clear the Chrome buffer
+            this.chromeBuffer.splice(0, this.chromeBuffer.length);
+        }
+    }
 }
 exports.NestedCards = NestedCards;
 /**
@@ -125,33 +175,13 @@ function makeSpacer(height, openCards, styles) {
     };
 }
 exports.makeSpacer = makeSpacer;
-/**
- * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
- *
- * This allows a minimal amount of DOM overhead, insofar as to the css-grid or react-virtuoso we only
- * 1 extra DOM node between each row of content to achieve our nested card look & feel, i.e.:
- *
- * - chrome row (open)
- * - card1 content row
- * - chrome row (card2 open)
- * - nested card2 content row
- * - chrome row (card2 close, card1 close)
- */
-function maybeCreateChromeRow(columns, filteredRows, chromeBuffer) {
-    if (chromeBuffer.length > 0) {
-        filteredRows.push([undefined, (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...chromeBuffer], columns: columns.length }, void 0)]);
-        // clear the buffer
-        chromeBuffer.splice(0, chromeBuffer.length);
-    }
-}
-exports.maybeCreateChromeRow = maybeCreateChromeRow;
 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));
 }
 exports.ChromeRow = ChromeRow;
-function dropChromeRows(filteredRows) {
-    return filteredRows.filter(([r]) => !!r);
+function dropChromeRows(rows) {
+    return rows.filter(([r]) => !!r);
 }
 exports.dropChromeRows = dropChromeRows;

package/dist/components/Table/styles.js

@@ -12,7 +12,7 @@ exports.defaultStyle = {
     lastCellCss: Css_1.Css.$,
     indentOneCss: Css_1.Css.pl4.$,
     indentTwoCss: Css_1.Css.pl7.$,
-    headerCellCss: Css_1.Css.asfe.nowrap.py1.bgGray100.aife.$,
+    headerCellCss: Css_1.Css.nowrap.py1.bgGray100.aife.$,
     firstRowMessageCss: Css_1.Css.px1.py2.$,
     rowHoverColor: Css_1.Palette.Gray200,
 };

package/dist/components/internal/CompoundField.js

@@ -4,40 +4,27 @@ exports.CompoundField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
-const utils_1 = require("../../utils");
 /** Internal component to help create compound fields */
 function CompoundField({ children }) {
     if ((children === null || children === void 0 ? void 0 : children.length) !== 2) {
         throw global.Error("CompoundField requires two children components");
     }
-    const [focusedEl, setFocusedEl] = (0, react_1.useState)();
     const commonStyles = Css_1.Css.df.aic.fs1.maxwPx(550).bt.bb.bGray300.$;
     const internalProps = { compound: true };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+            ...Css_1.Css.df.$,
+            "&:focus-within > div:nth-of-type(2)": Css_1.Css.bgLightBlue700.$, // Separation line when inputs are focused
+        } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                     ...commonStyles,
-                    ...Css_1.Css.bl.borderRadius("4px 0 0 4px").if(focusedEl === "left").bLightBlue700.$,
+                    ...Css_1.Css.bl.borderRadius("4px 0 0 4px").$,
+                    "&:focus-within": Css_1.Css.bLightBlue700.$,
                 } }, { children: (0, react_1.cloneElement)(children[0], {
-                    onFocus: () => {
-                        (0, utils_1.maybeCall)(children[0].props.onFocus);
-                        setFocusedEl("left");
-                    },
-                    onBlur: () => {
-                        (0, utils_1.maybeCall)(children[0].props.onBlur);
-                        setFocusedEl(undefined);
-                    },
                     internalProps,
-                }) }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.if(focusedEl !== undefined).bgLightBlue700.$ }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                }) }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.$ }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                     ...commonStyles,
-                    ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").if(focusedEl === "right").bLightBlue700.$,
+                    ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").$,
+                    "&:focus-within": Css_1.Css.bLightBlue700.$,
                 } }, { children: (0, react_1.cloneElement)(children[1], {
-                    onFocus: () => {
-                        (0, utils_1.maybeCall)(children[1].props.onFocus);
-                        setFocusedEl("right");
-                    },
-                    onBlur: () => {
-                        (0, utils_1.maybeCall)(children[1].props.onBlur);
-                        setFocusedEl(undefined);
-                    },
                     internalProps,
                 }) }), void 0)] }), void 0));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.98.0",
+  "version": "2.99.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,7 +48,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-stately": "^3.9.0",
-    "react-virtuoso": "^2.3.1",
+    "react-virtuoso": "^2.4.0",
     "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",