@homebound/beam 2.179.0 → 2.180.0

package/dist/components/Table/GridRowLookup.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getKinds = exports.createRowLookup = void 0;
 const GridTable_1 = require("./GridTable");
-const nestedCards_1 = require("./nestedCards");
 function createRowLookup(columns, filteredRows, virtuosoRef) {
     return {
         scrollTo(kind, id) {
@@ -15,14 +14,12 @@ function createRowLookup(columns, filteredRows, virtuosoRef) {
             virtuosoRef.current.scrollToIndex({ index, behavior: "smooth" });
         },
         currentList() {
-            return (0, nestedCards_1.dropChromeRows)(filteredRows).map((r) => r[0]);
+            return filteredRows.map((r) => r[0]);
         },
         lookup(row, additionalFilter = () => true) {
             var _a, _b;
             var _c;
-            const rows = (0, nestedCards_1.dropChromeRows)(filteredRows)
-                .map((r) => r[0])
-                .filter(additionalFilter);
+            const rows = filteredRows.map((r) => r[0]).filter(additionalFilter);
             // Ensure we have `result.kind = {}` for each kind
             const result = Object.fromEntries(getKinds(columns).map((kind) => [kind, {}]));
             // This is an admittedly cute/fancy scan, instead of just `rows.findIndex`, but

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

@@ -47,8 +47,6 @@ export interface GridStyle {
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
     rowHoverColor?: Palette;
-    /** Styling for our special "nested card" output mode. */
-    nestedCards?: NestedCardsStyle;
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
     presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
@@ -62,38 +60,6 @@ export interface GridStyle {
     /** Allows for customization of the background color used to denote an "active" row */
     activeBgColor?: Palette;
 }
-export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
-export interface NestedCardsStyle {
-    /** Space between each card. */
-    spacerPx: number;
-    /** Width of the first and last "hidden" columns used to align nested columns. */
-    firstLastColumnWidth: number;
-    /**
-     * Per-kind styling for nested cards (see `cardStyle` if you only need a flat list of cards).
-     *
-     * Entries are optional, i.e. you can leave out kinds and they won't be wrapped/turned into cards.
-     */
-    kinds: NestedCardStyleByKind;
-    /** Allows for customization of the border color used to denote an "active" row */
-    activeBColor?: Palette;
-}
-/**
- * Styles for making cards nested within other cards.
- *
- * Because all of our output renderers (i.e. CSS grid and react-virtuoso) fundamentally need a flat
- * list of elements, to create the look & feel of "nested cards", GridTable creates extra "chrome"
- * elements like open card, close, and card padding.
- */
-export interface NestedCardStyle {
-    /** The card background color. */
-    bgColor: string;
-    /** The optional border color, assumes 1px solid if set. */
-    bColor?: string;
-    /** I.e. 4px border radius. */
-    brPx: number;
-    /** The left/right padding of the card. */
-    pxPx: number;
-}
 export interface GridTableDefaults {
     style: GridStyle | GridStyleDef;
     stickyHeader: boolean;
@@ -216,7 +182,7 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined, tableWidth: number | undefined, tableMinWidthPx?: number): string[];
+export declare function calcColumnSizes(columns: GridColumn<any>[], tableWidth: number | undefined, tableMinWidthPx?: number): string[];
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *

package/dist/components/Table/GridTable.js

@@ -35,7 +35,6 @@ const columnSizes_1 = require("./columnSizes");
 const GridRowLookup_1 = require("./GridRowLookup");
 const GridSortContext_1 = require("./GridSortContext");
 const GridTableApi_1 = require("./GridTableApi");
-const nestedCards_1 = require("./nestedCards");
 const RowState_1 = require("./RowState");
 const SortHeader_1 = require("./SortHeader");
 const sortRows_1 = require("./sortRows");
@@ -88,7 +87,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  * special styling to the row that uses `kind: "header"`.)
  */
 function GridTable(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, persistCollapse, resizeTarget, activeRowId, activeCellId, } = props;
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
@@ -143,7 +142,6 @@ function GridTable(props) {
                 stickyHeader,
                 // If we have a totals row then add the height of the totals row (52px) to the `stickyOffset` for the "header" kind
                 stickyOffset: hasTotalsRow && row.kind === "header" ? 52 + stickyOffset : stickyOffset,
-                openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                 columnSizes,
                 level,
                 getCount,
@@ -156,10 +154,7 @@ function GridTable(props) {
         const totalsRows = [];
         const visibleDataRows = [];
         const filteredRowIds = [];
-        // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
-        const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, visibleDataRows, style.nestedCards);
         function visit([row, children], level, visible) {
-            let isCard = visible && nestedCards && nestedCards.maybeOpenCard(row);
             visible && visibleDataRows.push([row, makeRowComponent(row, level)]);
             // This row may be invisible (because it's parent is collapsed), but we still want
             // to consider it matched if it or it's parent matched a filter.
@@ -167,12 +162,10 @@ function GridTable(props) {
             if (children.length) {
                 // Consider "isCollapsed" as true if the parent wasn't visible.
                 const isCollapsed = !visible || collapsedIds.includes(row.id);
-                !isCollapsed && nestedCards && nestedCards.addSpacer();
-                visitRows(children, isCard, level + 1, !isCollapsed);
+                visitRows(children, level + 1, !isCollapsed);
             }
-            visible && !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
         }
-        function visitRows(rows, addSpacer, level, visible) {
+        function visitRows(rows, level, visible) {
             const length = rows.length;
             rows.forEach((row, i) => {
                 if (row[0].kind === "header") {
@@ -184,14 +177,11 @@ function GridTable(props) {
                     return;
                 }
                 visit(row, level, visible);
-                visible && addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
         }
         // Call `visitRows` with our a pre-filtered set list
-        // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
         const filteredRows = filterRows(api, columns, maybeSorted, filter);
-        visitRows(filteredRows, !!nestedCards, 0, true);
-        nestedCards && nestedCards.done();
+        visitRows(filteredRows, 0, true);
         return [headerRows, visibleDataRows, totalsRows, filteredRowIds];
     }, [
         as,
@@ -245,7 +235,7 @@ function GridTable(props) {
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
     const rowStateContext = (0, react_1.useMemo)(() => ({ rowState }), [rowState]);
-    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.if(as === "virtual").w("calc(100% - 20px)").$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.if(as === "virtual").w("calc(100% - 20px)").$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -255,7 +245,7 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
+function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             // Use `fit-content` to ensure the width of the table takes up the full width of its content.
             // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
@@ -267,7 +257,9 @@ function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows,
               the + operator as an offset.
               Inspired by: https://stackoverflow.com/a/25005740/2551333
             */
-            ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div:nth-of-type(n+${headerRows.length + totalsRows.length + 2}) > *`, style.betweenRowsCss).$ : {}),
+            ...(style.betweenRowsCss
+                ? Css_1.Css.addIn(`& > div:nth-of-type(n+${headerRows.length + totalsRows.length + 2}) > *`, style.betweenRowsCss).$
+                : {}),
             ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:nth-of-type(2) > *`, style.firstNonHeaderRowCss).$ : {}),
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
@@ -275,7 +267,7 @@ function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows,
         }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), visibleDataRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
+function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, 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 || {})
@@ -306,7 +298,7 @@ function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
+function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
@@ -316,7 +308,7 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRo
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
             // Applying a zIndex: 2 to ensure it stays on top of sticky columns
             TopItemList: react_1.default.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: ref, style: { ...props.style, ...{ zIndex: 2 } } }), void 0))),
-            List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
+            List: VirtualRoot(listStyle, columns, id, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
@@ -362,7 +354,7 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRo
  * 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, xss) => {
     return react_1.default.forwardRef(function VirtualRoot({ style, children }, ref) {
         // This VirtualRoot list represent the header when no styles are given. The
         // table list generally has styles to scroll the page for windowing.
@@ -387,7 +379,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
-function calcColumnSizes(columns, firstLastColumnWidth, tableWidth, tableMinWidthPx = 0) {
+function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0) {
     // 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))`
     //
@@ -418,12 +410,11 @@ function calcColumnSizes(columns, firstLastColumnWidth, tableWidth, tableMinWidt
     }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
+        console.log("tableWidth", tableWidth);
         // If the tableWidth, then return a pixel value
         if (tableWidth) {
             const widthBasis = Math.max(tableWidth, tableMinWidthPx);
-            // When the tableWidth is defined, then we need to account for the `firstLastColumnWidth`s.
-            return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels - (firstLastColumnWidth !== null && firstLastColumnWidth !== void 0 ? firstLastColumnWidth : 0) * 2) *
-                (myFr / totalFr)}px)`;
+            return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels) * (myFr / totalFr)}px)`;
         }
         // Otherwise return the `calc()` value
         return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
@@ -447,8 +438,7 @@ function calcColumnSizes(columns, firstLastColumnWidth, tableWidth, tableMinWidt
             return fr(w);
         }
     });
-    // If we're doing nested cards, we add extra 1st/last cells...
-    return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
+    return sizes;
 }
 exports.calcColumnSizes = calcColumnSizes;
 exports.nonKindGridColumnKeys = [
@@ -478,7 +468,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, openCards, columnSizes, level, getCount, api, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, ...others } = props;
     const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
     const rowId = `${row.kind}_${row.id}`;
     const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === rowId, [rowId, rowState]);
@@ -487,12 +477,6 @@ function GridRow(props) {
     const isTotals = row.kind === "totals";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const Row = as === "table" ? "tr" : "div";
-    const openCardStyles = typeof openCards === "string"
-        ? openCards
-            .split(":")
-            .map((openCardKind) => style.nestedCards.kinds[openCardKind])
-            .filter((style) => style)
-        : undefined;
     const revealOnRowHoverClass = "revealOnRowHover";
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
@@ -505,7 +489,6 @@ function GridRow(props) {
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
         ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
-        ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
         ...{
             [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
             [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
@@ -513,8 +496,8 @@ function GridRow(props) {
     };
     let currentColspan = 1;
     let firstContentColumnStylesApplied = false;
-    const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d, _e, _f;
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
+            var _a, _b, _c, _d, _e;
             const { wrapAction = true, isAction = false } = column;
             const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
             firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
@@ -538,25 +521,17 @@ function GridRow(props) {
             const justificationCss = getJustification(column, maybeContent, as, alignment);
             const content = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader, column, columnIndex, maybeContent);
-            const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
             const maybeSticky = (_b = ((isGridCellContent(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
                 ? {
-                    ...Css_1.Css.sticky.z1.$,
-                    // Need to apply a background to this cell to avoid content beneath it being shown when sticky.
-                    // Assumes background is white for non-nestedCard styles. This can be overridden via cellCss.
-                    ...(((_c = style.nestedCards) === null || _c === void 0 ? void 0 : _c.kinds)
-                        ? Css_1.Css.bgColor((0, nestedCards_1.getCurrentBgColor)(row, openCardStyles, style.nestedCards.kinds)).$
-                        : Css_1.Css.bgWhite.$),
+                    ...Css_1.Css.sticky.z1.bgWhite.$,
                     ...(maybeSticky === "left"
-                        ? Css_1.Css.left(maybeNestedCardColumnIndex === 0
-                            ? 0
-                            : `calc(${columnSizes.slice(0, maybeNestedCardColumnIndex).join(" + ")})`).$
+                        ? Css_1.Css.left(columnIndex === 0 ? 0 : `calc(${columnSizes.slice(0, columnIndex).join(" + ")})`).$
                         : {}),
                     ...(maybeSticky === "right"
-                        ? Css_1.Css.right(maybeNestedCardColumnIndex + 1 === columnSizes.length
+                        ? Css_1.Css.right(columnIndex + 1 === columnSizes.length
                             ? 0
-                            : `calc(${columnSizes.slice(maybeNestedCardColumnIndex + 1 - columnSizes.length).join(" + ")})`).$
+                            : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`).$
                         : {}),
                 }
                 : {};
@@ -589,15 +564,13 @@ function GridRow(props) {
                 // Then apply any totals-specific override
                 ...(isTotals && style.totalsCellCss),
                 // Or level-specific styling
-                ...(!isHeader && !isTotals && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
+                ...(!isHeader && !isTotals && !!style.levels && ((_c = style.levels[level]) === null || _c === void 0 ? void 0 : _c.cellCss)),
                 // Level specific styling for the first content column
-                ...(applyFirstContentColumnStyles && !!style.levels && ((_e = style.levels[level]) === null || _e === void 0 ? void 0 : _e.firstContentColumn)),
+                ...(applyFirstContentColumnStyles && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
-                ...(style.nestedCards === undefined && isActive
-                    ? Css_1.Css.bgColor((_f = style.activeBgColor) !== null && _f !== void 0 ? _f : Css_1.Palette.LightBlue50).$
-                    : {}),
+                ...(isActive ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$ : {}),
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // And any cell specific css
@@ -605,11 +578,7 @@ function GridRow(props) {
                 // Apply cell highlight styles to active cell and hover
                 ...Css_1.Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$,
                 // Define the width of the column on each cell. Supports col spans.
-                ...{
-                    width: `calc(${columnSizes
-                        .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
-                        .join(" + ")})`,
-                },
+                width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")})`,
                 ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
@@ -623,7 +592,6 @@ function GridRow(props) {
                         : defaultRenderFn(as);
             return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick);
         }) }), void 0));
-    return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
 /**
  * Memoizes GridRows so that re-rendering the table doesn't re-render every single row.

package/dist/components/Table/columnSizes.js

@@ -25,18 +25,16 @@ const use_debounce_1 = require("use-debounce");
  * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
  */
 function useSetupColumnSizes(style, columns, resizeRef) {
-    var _a;
     // Calculate the column sizes immediately rather than via the `debounce` method.
     // We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`,
     // which is used internally by `useDebounce`, so the frozen clock means the callback is never called.
     const calculateImmediately = (0, react_1.useRef)(true);
     const [tableWidth, setTableWidth] = (0, react_1.useState)();
     // Calc our initial/first render sizes where we won't have a width yet
-    const [columnSizes, setColumnSizes] = (0, react_1.useState)((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
+    const [columnSizes, setColumnSizes] = (0, react_1.useState)((0, GridTable_1.calcColumnSizes)(columns, tableWidth, style.minWidthPx));
     const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
-        var _a;
         setTableWidth(width);
-        setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
+        setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, width, style.minWidthPx));
     }, [setTableWidth, setColumnSizes, columns, style]);
     // Used to recalculate our columns sizes when columns change
     (0, react_1.useEffect)(() => {

package/dist/inputs/index.d.ts

@@ -15,3 +15,4 @@ export * from "./TextField";
 export type { TextFieldApi } from "./TextField";
 export * from "./ToggleChipGroup";
 export type { Value } from "./Value";
+export * from "./ToggleButton";

package/dist/inputs/index.js

@@ -25,3 +25,4 @@ __exportStar(require("./Switch"), exports);
 __exportStar(require("./TextAreaField"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./ToggleChipGroup"), exports);
+__exportStar(require("./ToggleButton"), exports);

package/package.json

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

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

@@ -1,111 +0,0 @@
-import { ReactElement } from "react";
-import { GridColumn, GridDataRow, GridStyle, 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.
- *
- * 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.
- */
-export declare class NestedCards {
-    private readonly columns;
-    private readonly rows;
-    private readonly styles;
-    private readonly openCards;
-    private readonly chromeBuffer;
-    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.
- *
- * We have to do this as synthetic rows to support:
- *
- * - parent card 1 open
- * - parent card 1 content
- * - ...N child cards...
- * - parent card 1 close
- *
- * I.e. due to the flatness of our DOM, we inherently have to add a "close"
- * row separate from the card's actual content.
- */
-export declare function makeOpenOrCloseCard(openCards: string[], cardStyles: NestedCardStyleByKind, kind: "open" | "close"): Chrome;
-/**
- * Wraps a row within its parent cards. Creates a wrapping div to add the card padding.
- * Adds non-leaf card padding and borders, e.g. if the current row is a non-leaf then it will already be in `openCards`
- * Example:
- * <div parent> <div child> <div grandchild /> </div> </div>
- */
-export declare function wrapCard(openCards: NestedCardStyle[], row: JSX.Element): JSX.Element;
-export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyles: NestedCardStyle[] | undefined, style: GridStyle, isActive: boolean): {
-    boxShadow?: import("csstype").Property.BoxShadow | undefined;
-    paddingTop?: import("csstype").Property.PaddingTop<0 | (string & {})> | undefined;
-    paddingBottom?: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
-    borderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
-    backgroundColor?: import("csstype").Property.BackgroundColor | undefined;
-    borderColor?: import("csstype").Property.BorderColor | undefined;
-    borderStyle?: import("csstype").Property.BorderStyle | undefined;
-    borderWidth?: import("csstype").Property.BorderWidth<0 | (string & {})> | undefined;
-    paddingLeft?: import("csstype").Property.PaddingLeft<0 | (string & {})> | undefined;
-    paddingRight?: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
-};
-/**
- * Returns the background color for the row.
- * Either based on the current row's card having a defined background color, or the last opened card's background color
- * Defaults to White.
- */
-export declare function getCurrentBgColor(row: GridDataRow<any>, openCardStyles: NestedCardStyle[] | undefined, nestedKinds: NestedCardStyleByKind): string;
-/**
- * Create a spacer between rows of children.
- *
- * Our height is not based on `openCards`, b/c for the top-most level, we won't
- * have any open cards, but still want a space between top-level cards.
- */
-export declare function makeSpacer(height: number, openCards: string[], styles: NestedCardsStyle): Chrome;
-interface ChromeRowProps {
-    chromeBuffer: ChromeBuffer;
-}
-export declare function ChromeRow({ chromeBuffer }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function dropChromeRows<R extends Kinded>(rows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
-export declare function isLeafRow<R extends Kinded>(row: GridDataRow<R>): boolean;
-export {};

package/dist/components/Table/nestedCards.js

@@ -1,230 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isLeafRow = exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.getCurrentBgColor = exports.getNestedCardStyles = exports.wrapCard = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const Css_1 = require("../../Css");
-/**
- * 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, 
-    // An array of rows which we will add open Chrome rows too to create the table.
-    rows, styles) {
-        this.columns = columns;
-        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.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 or is a leaf card (which handle their own card styles in GridRow), then don't put it on the card stack
-        if (card && !isLeafRow(row)) {
-            this.openCards.push(row.kind);
-            this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "open"));
-        }
-        // But always close previous cards if needed
-        this.maybeCreateChromeRow();
-        return !!card;
-    }
-    closeCard() {
-        this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "close"));
-        this.openCards.pop();
-    }
-    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() {
-        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] }, this.chromeRowIndex++)]);
-            // clear the Chrome buffer
-            this.chromeBuffer.splice(0, this.chromeBuffer.length);
-        }
-    }
-}
-exports.NestedCards = NestedCards;
-/**
- * Draws the rounded corners (either open or close) for a new card.
- *
- * We have to do this as synthetic rows to support:
- *
- * - parent card 1 open
- * - parent card 1 content
- * - ...N child cards...
- * - parent card 1 close
- *
- * I.e. due to the flatness of our DOM, we inherently have to add a "close"
- * row separate from the card's actual content.
- */
-function makeOpenOrCloseCard(openCards, cardStyles, kind) {
-    const scopeCards = [...openCards];
-    return () => {
-        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.:
-        //
-        // | card1 | card2  --------------   card2 | card1 |
-        // | card1 | card2 / ... card3 ... \ card2 | card1 |
-        // | card1 | card2 | ... card3 ... | card2 | card1 |
-        //
-        [...scopeCards]
-            .map((cardKind) => cardStyles[cardKind])
-            .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.
-                    ...(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(first)[btOrBb].$),
-                } }, { children: div }), void 0));
-        });
-        return div;
-    };
-}
-exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
-/**
- * Wraps a row within its parent cards. Creates a wrapping div to add the card padding.
- * Adds non-leaf card padding and borders, e.g. if the current row is a non-leaf then it will already be in `openCards`
- * Example:
- * <div parent> <div child> <div grandchild /> </div> </div>
- */
-function wrapCard(openCards, row) {
-    let div = row;
-    [...openCards].reverse().forEach((card) => {
-        div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.pxPx(card.pxPx).bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0));
-    });
-    return div;
-}
-exports.wrapCard = wrapCard;
-function getNestedCardStyles(row, openCardStyles, style, isActive) {
-    var _a, _b, _c, _d, _e;
-    const leafCardStyles = isLeafRow(row) ? (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds[row.kind] : undefined;
-    // Calculate the horizontal space already allocated by the open cards (paddings and borders)
-    const openCardWidth = openCardStyles ? openCardStyles.reduce((acc, o) => acc + o.pxPx + (o.bColor ? 1 : 0), 0) : 0;
-    // Subtract the openCardWidth from the `firstLastColumnWidth` to determine the amount of padding to add to this card.
-    // Also if it is a leaf card, then we need to additionally subtract out the border width to have it properly line up with the chrome rows
-    const currentCardPaddingWidth = ((_c = (_b = style.nestedCards) === null || _b === void 0 ? void 0 : _b.firstLastColumnWidth) !== null && _c !== void 0 ? _c : 0) - openCardWidth - ((leafCardStyles === null || leafCardStyles === void 0 ? void 0 : leafCardStyles.bColor) ? 1 : 0);
-    return {
-        // Card styles apply a calculated padding to ensure the content lines up properly across all columns
-        ...(currentCardPaddingWidth ? Css_1.Css.pxPx(currentCardPaddingWidth).$ : undefined),
-        // Leaf cards define their own borders + padding
-        ...(leafCardStyles
-            ? // We can have versions of the same card as a leaf and not as a leaf.
-                // When it is not a leaf then it has chrome rows that create the top and bottom "padding" based on border-radius size. (brPx = "chrome" row height)
-                // When it is a leaf, then we need to apply the brPx to the row to ensure consistent spacing between leaf & non-leaf renders
-                // Additionally, if the leaf card has a border, then subtract the 1px border width from the padding to keep consistent with the "chrome" row
-                {
-                    ...Css_1.Css.pyPx(leafCardStyles.brPx - (leafCardStyles.bColor ? 1 : 0))
-                        .borderRadius(`${leafCardStyles.brPx}px`)
-                        .bgColor(leafCardStyles.bgColor)
-                        .if(!!leafCardStyles.bColor)
-                        .bc(leafCardStyles.bColor).ba.$,
-                    ...(isActive
-                        ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px ${(_e = (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.activeBColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue700}`).$
-                        : {}),
-                }
-            : undefined),
-    };
-}
-exports.getNestedCardStyles = getNestedCardStyles;
-/**
- * Returns the background color for the row.
- * Either based on the current row's card having a defined background color, or the last opened card's background color
- * Defaults to White.
- */
-function getCurrentBgColor(row, openCardStyles, nestedKinds) {
-    if (nestedKinds[row.kind]) {
-        return nestedKinds[row.kind].bgColor;
-    }
-    if (openCardStyles && openCardStyles.length > 0) {
-        return openCardStyles[openCardStyles.length - 1].bgColor;
-    }
-    return Css_1.Palette.White;
-}
-exports.getCurrentBgColor = getCurrentBgColor;
-/**
- * Create a spacer between rows of children.
- *
- * Our height is not based on `openCards`, b/c for the top-most level, we won't
- * have any open cards, but still want a space between top-level cards.
- */
-function makeSpacer(height, openCards, styles) {
-    const scopeCards = [...openCards];
-    return () => {
-        let div = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(height).$ }, void 0);
-        // Start at the current/inside card, and wrap outward padding + borders.
-        // | card1 | card2 | ... card3 ... | card2 | card1 |
-        [...scopeCards]
-            .map((cardKind) => styles.kinds[cardKind])
-            .reverse()
-            .forEach((card) => {
-            div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0));
-        });
-        return div;
-    };
-}
-exports.makeSpacer = makeSpacer;
-function ChromeRow({ chromeBuffer }) {
-    return ((0, jsx_runtime_1.jsx)("div", { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }, void 0));
-}
-exports.ChromeRow = ChromeRow;
-function dropChromeRows(rows) {
-    return rows.filter(([r]) => !!r);
-}
-exports.dropChromeRows = dropChromeRows;
-function isLeafRow(row) {
-    return row.children === undefined || row.children.length === 0;
-}
-exports.isLeafRow = isLeafRow;