@homebound/beam 2.99.0 → 2.101.1

package/dist/components/Icon.d.ts

@@ -9,7 +9,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
     /** The size of the icon in increments, i.e. 1 == 8px, default is 3 == 24px. */
     inc?: number;
     /** Styles overrides */
-    xss?: Xss<Margin>;
+    xss?: Xss<Margin | "visibility">;
 }
 export declare const Icon: React.MemoExoticComponent<(props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 /**

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;
@@ -96,13 +103,13 @@ export declare type RowTuple<R extends Kinded> = [GridDataRow<R> | undefined, Re
 export declare type GridSortConfig<S> = {
     on: "client";
     /** The optional initial column (index in columns) and direction to sort. */
-    initial?: [S | GridColumn<any>, Direction];
+    initial?: [S | GridColumn<any>, Direction] | undefined;
 } | {
     on: "server";
     /** The current sort by value + direction (if server-side sorting). */
     value?: [S, Direction];
-    /** Callback for when the column is sorted (if server-side sorting). */
-    onSort: (orderBy: S, direction: Direction) => void;
+    /** Callback for when the column is sorted (if server-side sorting). Parameters set to `undefined` is a signal to return to the initial sort state */
+    onSort: (orderBy: S | undefined, direction: Direction | undefined) => void;
 };
 export interface GridTableProps<R extends Kinded, S, X> {
     id?: string;
@@ -178,18 +185,10 @@ export declare type GridTableApi = {
  */
 export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, S, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
- * Creates a `grid-template-column` specific to our virtual output.
- *
- * Because of two things:
- *
- * a) react-virtuoso puts the header in a different div than the normal rows, and
- *
- * b) content-aware sizing just in general look janky/constantly resize while scrolling
- *
- * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
+ * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
+ * Enforces only fixed-sized units (% and px)
  */
-export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
-export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
+export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *
@@ -218,21 +217,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
 } & {
     /**
-     * The column's grid column width.
-     *
-     * For `as=div` output:
-     *
-     * - Any CSS grid units are supported
-     * - Numbers are treated as `fr` units
-     * - The default value is `auto`, which in CSS grid will do content-aware/responsive layout.
-     *
-     * For `as=virtual` output:
-     *
-     * - Only px, percentage, or fr units are supported, due to a) react-virtuoso puts the sticky header
-     * rows in a separate `div` and so we end up with two `grid-template-columns`, so cannot rely on
-     * any content-aware sizing, and b) content-aware sizing in a scrolling/virtual table results in
-     * a ~janky experience as the columns will constantly resize as new/different content is put in/out
-     * of the DOM.
+     * The column's width.
+     * - Only px, percentage, or fr units are supported, due to each GridRow acting as an independent table. This ensures consistent alignment between rows.
      * - Numbers are treated as `fr` units
      * - The default value is `1fr`
      */
@@ -270,7 +256,7 @@ export declare type GridCellAlignment = "left" | "right" | "center";
  * primitive value for filtering and sorting.
  */
 export declare type GridCellContent = {
-    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avaid perf overhead. */
+    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avoid perf overhead. */
     content: ReactNode | (() => ReactNode);
     alignment?: GridCellAlignment;
     /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */

package/dist/components/Table/GridTable.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcDivGridColumns = exports.calcVirtualGridColumns = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
+exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
@@ -92,12 +92,10 @@ function GridTable(props) {
         };
     }
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
-    // Disclaimer that technically even though this is a useMemo, sortRows is mutating `rows` directly
     const maybeSorted = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
             // If using client-side sort, the sortState use S = number
-            (0, sortRows_1.sortRows)(columns, rows, sortState);
-            return rows;
+            return (0, sortRows_1.sortRows)(columns, rows, sortState);
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
@@ -106,12 +104,13 @@ function GridTable(props) {
         var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        const columnSizes = as === "virtual" ? calcVirtualGridColumns(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth) : undefined;
+        const columnSizes = calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth);
         function makeRowComponent(row) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // 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 +119,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 +140,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,
@@ -210,22 +217,54 @@ exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
 const renders = {
     table: renderTable,
-    div: renderCssGrid,
+    div: renderDiv,
     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) {
+/** 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: {
-            ...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).$ : {}),
+            // 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
+              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));
+        }, "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));
 }
 /** Renders as a table, primarily/solely for good print support. */
 function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
@@ -259,6 +298,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,52 +319,66 @@ 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).
+ *
+ * The main goal of this custom component is to:
+ * - Customize the list wrapper to our 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).
+ * 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, ...(gs.nestedCards ? { minWidth: "fit-content" } : {}) }, 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, ...{ minWidth: "fit-content" } }, css: {
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...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));
     });
 });
 /**
- * Creates a `grid-template-column` specific to our virtual output.
- *
- * Because of two things:
- *
- * a) react-virtuoso puts the header in a different div than the normal rows, and
- *
- * b) content-aware sizing just in general look janky/constantly resize while scrolling
- *
- * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
+ * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
+ * Enforces only fixed-sized units (% and px)
  */
-function calcVirtualGridColumns(columns, firstLastColumnWidth) {
+function calcColumnSizes(columns, firstLastColumnWidth) {
     // For both default columns (1fr) as well as `w: 4fr` columns, we translate the width into an expression that looks like:
     // calc((100% - allOtherPercent - allOtherPx) * ((myFr / totalFr))`
     //
@@ -350,7 +404,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
             return { ...acc, claimedPercentages: acc.claimedPercentages + Number(w.replace("%", "")) };
         }
         else {
-            throw new Error("as=virtual only supports px, percentage, or fr units");
+            throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
         }
     }, { claimedPercentages: 0, claimedPixels: firstLastColumnWidth ? firstLastColumnWidth * 2 : 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
@@ -369,7 +423,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
                 return fr(Number(w.replace("fr", "")));
             }
             else {
-                throw new Error("as=virtual only supports px, percentage, or fr units");
+                throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
             }
         }
         else {
@@ -378,25 +432,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
     });
     return maybeAddCardColumns(sizes, firstLastColumnWidth);
 }
-exports.calcVirtualGridColumns = calcVirtualGridColumns;
-function calcDivGridColumns(columns, firstLastColumnWidth) {
-    const sizes = columns.map(({ w }) => {
-        if (typeof w === "undefined") {
-            // Hrm, I waffle between 'auto' or '1fr' being the better default here...
-            return "auto";
-        }
-        else if (typeof w === "string") {
-            // Use whatever the user passed in
-            return w;
-        }
-        else {
-            // Otherwise assume fr units
-            return `${w}fr`;
-        }
-    });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth).join(" ");
-}
-exports.calcDivGridColumns = calcDivGridColumns;
+exports.calcColumnSizes = calcColumnSizes;
 // If we're doing nested cards, we add extra 1st/last cells...
 function maybeAddCardColumns(sizes, firstLastColumnWidth) {
     return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
@@ -420,19 +456,15 @@ function GridRow(props) {
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
-        // We add a display-contents so that we can have "row-level" div elements in our
-        // DOM structure. I.e. grid is normally root-element > cell-elements, but we want
-        // 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
         // 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").$),
+        ...(as === "table" ? {} : Css_1.Css.df.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),
+        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined),
     };
     const Row = as === "table" ? "tr" : "div";
     const openCardStyles = typeof openCards === "string"
@@ -483,18 +515,11 @@ function GridRow(props) {
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
-                    // Non-virtualized tables use h100 so that all cells are the same height across the row.
-                    // Virtualized table rows use `display: flex;`, so the flex children are set to `align-self: stretch` by default, which achieves the same goal.
-                    // Though, we need to omit setting `h100` on the flex children, as a flex container needs a defined height set for `h100` to work on flex children
-                    ...(isHeader && as !== "virtual" ? Css_1.Css.h100.$ : undefined),
-                    ...maybeStickyHeaderStyles,
                     // If we're within a card, use its background color
                     ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
-                    // Add in colspan css if needed
-                    ...(currentColspan > 1 ? Css_1.Css.gc(`span ${currentColspan}`).$ : {}),
                     // And finally the specific cell's css (if any from GridCellContent)
                     ...rowStyleCellCss,
-                    // For virtual tables we define the width of the column on each cell. Supports col spans.
+                    // Define the width of the column on each cell. Supports col spans.
                     ...(columnSizes && {
                         width: `calc(${columnSizes
                             .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
@@ -581,8 +606,8 @@ function applyRowFn(column, row) {
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 const defaultRenderFn = (as) => (key, css, content) => {
-    const Row = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
+    const Cell = as === "table" ? "td" : "div";
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
 exports.GridCollapseContext = react_1.default.createContext({
     headerCollapsed: false,

package/dist/components/Table/SortHeader.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const Icon_1 = require("../Icon");
 const GridSortContext_1 = require("./GridSortContext");
 const Css_1 = require("../../Css");
+const hooks_1 = require("../../hooks");
 const useTestIds_1 = require("../../utils/useTestIds");
 /**
  * Wraps column header names with up/down sorting icons.
@@ -20,8 +21,12 @@ const useTestIds_1 = require("../../utils/useTestIds");
  */
 function SortHeader(props) {
     const { content, xss } = props;
+    const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
     const { sorted, toggleSort } = (0, react_1.useContext)(GridSortContext_1.GridSortContext);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.cursorPointer.selectNone.$, ...xss }, onClick: toggleSort }, { children: [content, sorted === "ASC" && (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: "sortUp", inc: 2 }, tid.icon, { xss: Css_1.Css.mlPx(4).$ }), void 0), sorted === "DESC" && (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: "sortDown", inc: 2 }, tid.icon, { xss: Css_1.Css.mlPx(4).$ }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss } }, hoverProps, { onClick: toggleSort }, { children: [content, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: Css_1.Css.ml1
+                        .visibility("hidden")
+                        .if(isHovered || sorted !== undefined)
+                        .visibility("visible").$, inc: 2 }, tid.icon), void 0) }), void 0)] }), void 0));
 }
 exports.SortHeader = SortHeader;

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/sortRows.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
 import { GridCellContent, GridColumn, GridDataRow, GridSortConfig, Kinded } from "./GridTable";
 import { SortState } from "./useSortState";
-export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>): void;
+export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>): GridDataRow<R>[];
 export declare function ensureClientSideSortValueIsSortable(sorting: GridSortConfig<any> | undefined, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

package/dist/components/Table/sortRows.js

@@ -2,21 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureClientSideSortValueIsSortable = exports.sortRows = void 0;
 const GridTable_1 = require("./GridTable");
-// We currently mutate `rows` while sorting; this would be bad if rows was directly
-// read from an immutable store like the apollo cache, but we basically always make
-// a copy in the process of adding our `kind` tags.
-//
-// I suppose that is an interesting idea, would we ever want to render a GQL query/cache
-// result directly into the table without first doing a kind-mapping? Like maybe we could
-// use __typename as the kind.
+// Returns a shallow copy of the `rows` parameter sorted based on `sortState`
 function sortRows(columns, rows, sortState) {
-    sortBatch(columns, rows, sortState);
+    const sorted = sortBatch(columns, rows, sortState);
     // Recursively sort child rows
-    for (const row of rows) {
+    sorted.forEach((row, i) => {
         if (row.children) {
-            sortRows(columns, row.children, sortState);
+            sorted[i] = { ...sorted[i], children: sortRows(columns, row.children, sortState) };
         }
-    }
+    });
+    return sorted;
 }
 exports.sortRows = sortRows;
 function sortBatch(columns, batch, sortState) {
@@ -24,7 +19,8 @@ function sortBatch(columns, batch, sortState) {
     const [value, direction] = sortState;
     const column = columns[value];
     const invert = direction === "DESC";
-    batch.sort((a, b) => {
+    // Make a shallow copy for sorting to avoid mutating the original list
+    return [...batch].sort((a, b) => {
         const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a));
         const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b));
         const v1e = v1 === null || v1 === undefined;

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

@@ -10,3 +10,4 @@ import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
 export declare type SortState<S> = readonly [S, Direction];
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
 export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void];
+export declare function deriveSortState<S>(currentSortState: SortState<S> | undefined, clickedKey: S, initialSortState: SortState<S> | undefined): SortState<S> | undefined;

package/dist/components/Table/useSortState.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSortState = void 0;
+exports.deriveSortState = exports.useSortState = void 0;
 const react_1 = require("react");
 const GridTable_1 = require("./GridTable");
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
@@ -8,34 +8,34 @@ function useSortState(columns, sorting) {
     // If we're server-side sorting, use the caller's `sorting.value` prop to initialize our internal
     // `useState`. After this, we ignore `sorting.value` because we assume it should match what our
     // `setSortState` just changed anyway (in response to the user sorting a column).
-    const [sortState, setSortState] = (0, react_1.useState)(() => {
+    const initialSortState = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client") {
             const { initial } = sorting;
-            if (initial) {
+            if (initial === undefined && "initial" in sorting) {
+                // if explicitly set to `undefined`, then do not sort
+                return undefined;
+            }
+            else if (initial) {
                 const key = typeof initial[0] === "number" ? initial[0] : columns.indexOf(initial[0]);
                 return [key, initial[1]];
             }
             else {
                 // If no explicit sorting, assume 1st column ascending
                 const firstSortableColumn = columns.findIndex((c) => c.clientSideSort !== false);
-                return [firstSortableColumn, "ASC"];
+                return [firstSortableColumn, GridTable_1.ASC];
             }
         }
         else {
             return sorting === null || sorting === void 0 ? void 0 : sorting.value;
         }
-    });
-    // Make a custom setSortKey that is useState-like but contains the invert-if-same-column-clicked-twice logic.
+    }, [sorting, columns]);
+    const [sortState, setSortState] = (0, react_1.useState)(initialSortState);
+    // Make a custom setSortKey that is useState-like but contains the ASC->DESC->RESET logic.
     const setSortKey = (0, react_1.useCallback)((clickedKey) => {
-        const [currentKey, currentDirection] = sortState || [];
-        const [newKey, newDirection] = 
-        // If clickedKey === currentKey, then toggle direction
-        clickedKey === currentKey
-            ? [currentKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC]
-            : // Otherwise, use the new key, and default to ascending
-                [clickedKey, GridTable_1.ASC];
-        setSortState([newKey, newDirection]);
+        const newState = deriveSortState(sortState, clickedKey, initialSortState);
+        setSortState(newState);
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server") {
+            const [newKey, newDirection] = newState !== null && newState !== void 0 ? newState : [undefined, undefined];
             sorting.onSort(newKey, newDirection);
         }
     }, 
@@ -44,3 +44,19 @@ function useSortState(columns, sorting) {
     return [sortState, setSortKey];
 }
 exports.useSortState = useSortState;
+// Exported for testing purposes
+function deriveSortState(currentSortState, clickedKey, initialSortState) {
+    const [currentKey, currentDirection] = currentSortState || [];
+    // If the current sort state is not defined, or clicking a new column, then sort ASC on the clicked key
+    if (!currentSortState || clickedKey !== currentKey) {
+        return [clickedKey, GridTable_1.ASC];
+    }
+    // Otherwise when clicking the current column, toggle through sort states
+    if (currentDirection === GridTable_1.ASC) {
+        // if ASC -> go to desc
+        return [clickedKey, GridTable_1.DESC];
+    }
+    // Else, direction is already DESC, so revert to original sort value.
+    return initialSortState;
+}
+exports.deriveSortState = deriveSortState;

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.99.0",
+  "version": "2.101.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",