@homebound/beam 2.79.2 → 2.80.0

package/dist/components/Icon.d.ts

@@ -22,6 +22,7 @@ export declare function Icon(props: IconProps): import("@emotion/react/jsx-runti
  * 3. Remove all fill attributes as these will be controlled by the wrapping component
  */
 export declare const Icons: {
+    drag: import("@emotion/react/jsx-runtime").JSX.Element;
     x: import("@emotion/react/jsx-runtime").JSX.Element;
     loader: import("@emotion/react/jsx-runtime").JSX.Element;
     linkExternal: import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Icon.js

@@ -20,6 +20,7 @@ exports.Icon = Icon;
  */
 exports.Icons = {
     // Actions
+    drag: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 8C7.44772 8 7 7.55228 7 7L7 5C7 4.44772 7.44772 4 8 4L10 4C10.5523 4 11 4.44772 11 5L11 7C11 7.55228 10.5523 8 10 8L8 8Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M8 14C7.44772 14 7 13.5523 7 13L7 11C7 10.4477 7.44772 10 8 10L10 10C10.5523 10 11 10.4477 11 11L11 13C11 13.5523 10.5523 14 10 14L8 14Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M8 20C7.44772 20 7 19.5523 7 19L7 17C7 16.4477 7.44772 16 8 16L10 16C10.5523 16 11 16.4477 11 17L11 19C11 19.5523 10.5523 20 10 20L8 20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14 8C13.4477 8 13 7.55228 13 7L13 5C13 4.44772 13.4477 4 14 4L16 4C16.5523 4 17 4.44772 17 5L17 7C17 7.55228 16.5523 8 16 8L14 8Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14 14C13.4477 14 13 13.5523 13 13L13 11C13 10.4477 13.4477 10 14 10L16 10C16.5523 10 17 10.4477 17 11L17 13C17 13.5523 16.5523 14 16 14L14 14Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14 20C13.4477 20 13 19.5523 13 19L13 17C13 16.4477 13.4477 16 14 16L16 16C16.5523 16 17 16.4477 17 17L17 19C17 19.5523 16.5523 20 16 20L14 20Z" }, void 0)] }, void 0)),
     x: ((0, jsx_runtime_1.jsx)("path", { d: "M16.192 6.34399L11.949 10.586L7.70697 6.34399L6.29297 7.75799L10.535 12L6.29297 16.242L7.70697 17.656L11.949 13.414L16.192 17.656L17.606 16.242L13.364 12L17.606 7.75799L16.192 6.34399Z" }, void 0)),
     loader: ((0, jsx_runtime_1.jsx)("path", { d: "M12 22C17.421 22 22 17.421 22 12H20C20 16.337 16.337 20 12 20C7.663 20 4 16.337 4 12C4 7.664 7.663 4 12 4V2C6.579 2 2 6.58 2 12C2 17.421 6.579 22 12 22Z" }, void 0)),
     linkExternal: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M13 3L16.293 6.293L9.29297 13.293L10.707 14.707L17.707 7.707L21 11V3H13Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M19 19H5V5H12L10 3H5C3.897 3 3 3.897 3 5V19C3 20.103 3.897 21 5 21H19C20.103 21 21 20.103 21 19V14L19 12V19Z" }, void 0)] }, void 0)),

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

@@ -41,8 +41,10 @@ export interface GridStyle {
     emptyCell?: ReactNode;
 }
 export interface NestedCardsStyle {
-    /** The space between top-level cards. */
-    topLevelSpacerPx: number;
+    /** 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).
      *
@@ -66,24 +68,17 @@ export interface NestedCardStyle {
     brPx: number;
     /** The left/right padding of the card. */
     pxPx: number;
-    /** The y spacing between each row within this card. */
-    spacerPx: number;
 }
 export interface GridTableDefaults {
     style: GridStyle;
     stickyHeader: boolean;
 }
-/** Our original table look & feel/style. */
-export declare const defaultStyle: GridStyle;
-/** Tightens up the padding of rows, great for rows that have form elements in them. */
-export declare const condensedStyle: GridStyle;
-/** Renders each row as a card. */
-export declare const cardStyle: GridStyle;
 /** Configures the default/app-wide GridStyle. */
 export declare function setDefaultStyle(style: GridStyle): void;
 /** Configures the default/app-wide GridTable settings. */
 export declare function setGridTableDefaults(opts: Partial<GridTableDefaults>): void;
 declare type RenderAs = "div" | "table" | "virtual";
+/** The GridDataRow is optional b/c the nested card chrome rows only have ReactElements. */
 export declare type RowTuple<R extends Kinded> = [GridDataRow<R> | undefined, ReactElement];
 /**
  * The sort settings for the current table; whether it's client-side or server-side.
@@ -170,7 +165,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
  * - Columns are mostly rendering logic
  *   - I.e. each column defines it's behavior for each given row `kind`
  *
- * In a kind of cute way, headers are not modeled specially, i.e. they are just another
+ * In a "kind" of cute way, headers are not modeled specially, i.e. they are just another
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
  */
@@ -186,8 +181,8 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  *
  * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
  */
-export declare function calcVirtualGridColumns(columns: GridColumn<any>[], maxCardPadding: number | undefined): string;
-export declare function calcDivGridColumns(columns: GridColumn<any>[], maxCardPadding: number | undefined): string;
+export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
+export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastCardWidth: number | undefined): string;
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *

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.cardStyle = exports.condensedStyle = exports.defaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
+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;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
@@ -38,6 +38,7 @@ const sortRows_1 = require("./sortRows");
 const useSortState_1 = require("./useSortState");
 const Css_1 = require("../../Css");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
 const emptyCell = () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
@@ -48,46 +49,8 @@ function setRunningInJest() {
     runningInJest = true;
 }
 exports.setRunningInJest = setRunningInJest;
-/** Our original table look & feel/style. */
-exports.defaultStyle = {
-    rootCss: Css_1.Css.gray700.$,
-    betweenRowsCss: Css_1.Css.bt.bGray400.$,
-    firstNonHeaderRowCss: Css_1.Css.add({ borderTopStyle: "none" }).$,
-    cellCss: Css_1.Css.py2.px3.$,
-    firstCellCss: Css_1.Css.pl1.$,
-    lastCellCss: Css_1.Css.$,
-    indentOneCss: Css_1.Css.pl4.$,
-    indentTwoCss: Css_1.Css.pl7.$,
-    // Use h100 so that all cells are the same height when scrolled; set bgWhite for when we're laid over other rows.
-    headerCellCss: Css_1.Css.asfe.nowrap.py1.bgGray100.h100.aife.$,
-    firstRowMessageCss: Css_1.Css.px1.py2.$,
-    rowHoverColor: Css_1.Palette.Gray200,
-};
-/** Tightens up the padding of rows, great for rows that have form elements in them. */
-exports.condensedStyle = {
-    ...exports.defaultStyle,
-    headerCellCss: Css_1.Css.bgGray100.tinyEm.$,
-    cellCss: Css_1.Css.aic.sm.py1.px2.$,
-    rootCss: Css_1.Css.dg.gray700.xs.$,
-};
-/** Renders each row as a card. */
-exports.cardStyle = {
-    ...exports.defaultStyle,
-    firstNonHeaderRowCss: Css_1.Css.mt2.$,
-    cellCss: Css_1.Css.p2.my1.bt.bb.bGray400.$,
-    firstCellCss: Css_1.Css.bl.add({ borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }).$,
-    lastCellCss: Css_1.Css.br.add({ borderTopRightRadius: "4px", borderBottomRightRadius: "4px" }).$,
-    // Undo the card look & feel for the header
-    headerCellCss: {
-        ...exports.defaultStyle.headerCellCss,
-        ...Css_1.Css.add({
-            border: "none",
-            borderRadius: "unset",
-        }).p1.m0.xsEm.gray700.$,
-    },
-};
 let defaults = {
-    style: exports.defaultStyle,
+    style: _1.defaultStyle,
     stickyHeader: false,
 };
 /** Configures the default/app-wide GridStyle. */
@@ -112,11 +75,12 @@ exports.setGridTableDefaults = setGridTableDefaults;
  * - Columns are mostly rendering logic
  *   - I.e. each column defines it's behavior for each given row `kind`
  *
- * In a kind of cute way, headers are not modeled specially, i.e. they are just another
+ * In a "kind" of cute way, headers are not modeled specially, i.e. they are just another
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
  */
 function GridTable(props) {
+    var _a;
     const { id = "grid-table", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, } = props;
     const [collapsedIds, toggleCollapsedId] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
@@ -132,7 +96,7 @@ function GridTable(props) {
         return rows;
     }, [columns, rows, sorting, sortState]);
     // Filter + flatten + component-ize the sorted rows.
-    let [headerRows, filteredRows, maxCardPadding] = (0, react_1.useMemo)(() => {
+    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
         function makeRowComponent(row) {
@@ -163,25 +127,23 @@ function GridTable(props) {
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
         const filteredRows = [];
-        // If we're doing nested cards, we will add extra first/last columns, and need to know how wide to make them
-        let maxCardPadding = undefined;
         // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
         const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style);
         // Depth-first to filter
         function visit(row) {
+            var _a;
             const matches = filters.length === 0 ||
+                row.pin ||
                 filters.every((filter) => columns.map((c) => applyRowFn(c, row)).some((maybeContent) => matchesFilter(maybeContent, filter)));
             // 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);
-                if (isCard && nestedCards) {
-                    maxCardPadding = nestedCards.maxCardPadding(maxCardPadding);
-                }
                 filteredRows.push([row, makeRowComponent(row)]);
             }
             const isCollapsed = collapsedIds.includes(row.id);
-            if (!isCollapsed && row.children) {
+            if (!isCollapsed && !!((_a = row.children) === null || _a === void 0 ? void 0 : _a.length)) {
+                nestedCards && matches && nestedCards.addSpacer();
                 visitRows(row.children, isCard);
             }
             isCard && nestedCards && nestedCards.closeCard();
@@ -190,17 +152,19 @@ function GridTable(props) {
             const length = rows.length;
             rows.forEach((row, i) => {
                 if (row.kind === "header") {
+                    nestedCards && nestedCards.maybeOpenCard(row);
                     headerRows.push([row, makeRowComponent(row)]);
+                    nestedCards && nestedCards.closeCard();
                     return;
                 }
                 visit(row);
-                addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacerBetweenChildren();
+                addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
         }
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
         visitRows(maybeSorted, !!nestedCards);
         nestedCards && nestedCards.done();
-        return [headerRows, filteredRows, maxCardPadding];
+        return [headerRows, filteredRows];
     }, [
         as,
         maybeSorted,
@@ -238,7 +202,7 @@ function GridTable(props) {
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef);
+    return renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, xss, virtuosoRef);
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -248,9 +212,9 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders as a CSS Grid, which is the default / most well-supported rendered. */
-function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef) {
+function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastCardWidth, xss, virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, maxCardPadding)).$,
+            ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastCardWidth)).$,
             ...Css_1.Css
                 // Apply the between-row styling with `div + div > *` so that we don't have to have conditional
                 // `if !lastRow add border` CSS applied via JS that would mean the row can't be React.memo'd.
@@ -263,7 +227,7 @@ function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMes
         }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.add("gridColumn", `${columns.length} span`).$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }), void 0)), filteredRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef) {
+function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, 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 || {})
@@ -293,8 +257,8 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, maxCardPadding, xss, virtuosoRef) {
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: { List: VirtualRoot(style, columns, id, maxCardPadding, xss) }, 
+function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: { List: VirtualRoot(style, columns, id, firstLastColumnWidth, xss) }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
         topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), 
         // Both the `Item` and `itemContent` use `display: contents`, so their height is 0,
@@ -323,11 +287,11 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
  * identity, even though technically we have a different "component" per the given set of props
  * (solely to capture as params that we can't pass through react-virtuoso's API as props).
  */
-const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, maxCardPadding, xss) => {
+const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, firstLastColumnWidth, xss) => {
     return react_1.default.forwardRef(({ style, children }, ref) => {
         // This re-renders each time we have new children in the view port
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style, css: {
-                ...Css_1.Css.dg.gtc(calcVirtualGridColumns(columns, maxCardPadding)).$,
+                ...Css_1.Css.dg.gtc(calcVirtualGridColumns(columns, firstLastColumnWidth)).$,
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
                 // Add `display:contents` to Item to flatten it like we do GridRow
@@ -348,7 +312,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, maxCardPadding,
  *
  * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
  */
-function calcVirtualGridColumns(columns, maxCardPadding) {
+function calcVirtualGridColumns(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))`
     //
@@ -400,10 +364,10 @@ function calcVirtualGridColumns(columns, maxCardPadding) {
             return fr(w);
         }
     });
-    return maybeAddCardColumns(sizes, maxCardPadding);
+    return maybeAddCardColumns(sizes, firstLastColumnWidth);
 }
 exports.calcVirtualGridColumns = calcVirtualGridColumns;
-function calcDivGridColumns(columns, maxCardPadding) {
+function calcDivGridColumns(columns, firstLastCardWidth) {
     const sizes = columns.map(({ w }) => {
         if (typeof w === "undefined") {
             // Hrm, I waffle between 'auto' or '1fr' being the better default here...
@@ -418,12 +382,12 @@ function calcDivGridColumns(columns, maxCardPadding) {
             return `${w}fr`;
         }
     });
-    return maybeAddCardColumns(sizes, maxCardPadding);
+    return maybeAddCardColumns(sizes, firstLastCardWidth);
 }
 exports.calcDivGridColumns = calcDivGridColumns;
 // If we're doing nested cards, we add extra 1st/last cells...
-function maybeAddCardColumns(sizes, maxCardPadding) {
-    return (!maxCardPadding ? sizes : [`${maxCardPadding}px`, ...sizes, `${maxCardPadding}px`]).join(" ");
+function maybeAddCardColumns(sizes, firstLastCardWidth) {
+    return (!firstLastCardWidth ? sizes : [`${firstLastCardWidth}px`, ...sizes, `${firstLastCardWidth}px`]).join(" ");
 }
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)

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

@@ -2,8 +2,9 @@ export * from "./CollapseToggle";
 export * from "./columns";
 export type { GridRowLookup } from "./GridRowLookup";
 export { GridSortContext } from "./GridSortContext";
-export { ASC, cardStyle, condensedStyle, defaultStyle, DESC, GridTable, setDefaultStyle, setGridTableDefaults, } from "./GridTable";
+export { ASC, DESC, GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
 export type { Direction, GridCellAlignment, GridCellContent, GridCollapseContext, GridColumn, GridDataRow, GridRowStyles, GridSortConfig, GridStyle, GridTableDefaults, GridTableProps, GridTableXss, Kinded, RowStyle, setRunningInJest, } from "./GridTable";
 export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";
 export type { SimpleHeaderAndDataOf, SimpleHeaderAndDataWith } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";
+export { cardStyle, condensedStyle, defaultStyle } from "./styles";

package/dist/components/Table/index.js

@@ -10,16 +10,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.ASC = exports.GridSortContext = void 0;
+exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
 var GridSortContext_1 = require("./GridSortContext");
 Object.defineProperty(exports, "GridSortContext", { enumerable: true, get: function () { return GridSortContext_1.GridSortContext; } });
 var GridTable_1 = require("./GridTable");
 Object.defineProperty(exports, "ASC", { enumerable: true, get: function () { return GridTable_1.ASC; } });
-Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return GridTable_1.cardStyle; } });
-Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return GridTable_1.condensedStyle; } });
-Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return GridTable_1.defaultStyle; } });
 Object.defineProperty(exports, "DESC", { enumerable: true, get: function () { return GridTable_1.DESC; } });
 Object.defineProperty(exports, "GridTable", { enumerable: true, get: function () { return GridTable_1.GridTable; } });
 Object.defineProperty(exports, "setDefaultStyle", { enumerable: true, get: function () { return GridTable_1.setDefaultStyle; } });
@@ -30,3 +27,7 @@ Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function
 Object.defineProperty(exports, "simpleRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleRows; } });
 var SortHeader_1 = require("./SortHeader");
 Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return styles_1.cardStyle; } });
+Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return styles_1.condensedStyle; } });
+Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return styles_1.defaultStyle; } });

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

@@ -22,9 +22,8 @@ export declare class NestedCards {
     constructor(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], style: GridStyle);
     maybeOpenCard(row: GridDataRow<any>): boolean;
     closeCard(): void;
-    addSpacerBetweenChildren(): void;
+    addSpacer(): void;
     done(): void;
-    maxCardPadding(current: number | undefined): number;
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards(): NestedCardStyle[];
 }

package/dist/components/Table/nestedCards.js

@@ -25,10 +25,10 @@ class NestedCards {
         this.openCards = [];
         // A buffer of the open/close/spacer rows we need between each content row.
         this.chromeBuffer = [];
-        this.styles = style.nestedCards.kinds;
+        this.styles = style.nestedCards;
     }
     maybeOpenCard(row) {
-        const card = this.styles[row.kind];
+        const card = this.styles.kinds[row.kind];
         // If this kind doesn't have a card defined, don't put it on the card stack
         if (card) {
             this.openCards.push(card);
@@ -42,19 +42,12 @@ class NestedCards {
         this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, "close"));
         this.openCards.pop();
     }
-    addSpacerBetweenChildren() {
-        const openCard = this.openCards[this.openCards.length - 1];
-        // If we're between two top-level cards, there is no open card, so fallback on topLevelSpacerPx
-        const height = (openCard === null || openCard === void 0 ? void 0 : openCard.spacerPx) || this.style.nestedCards.topLevelSpacerPx;
-        this.chromeBuffer.push(makeSpacer(height, this.openCards));
+    addSpacer() {
+        this.chromeBuffer.push(makeSpacer(this.styles.spacerPx, this.openCards));
     }
     done() {
         maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
     }
-    maxCardPadding(current) {
-        const padding = this.openCards.map((c) => c.pxPx + (!!c.bColor ? 1 : 0)).reduce((a, b) => a + b, 0);
-        return Math.max(padding, current || 0);
-    }
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards() {
         return [...this.openCards];

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

@@ -0,0 +1,7 @@
+import { GridStyle } from ".";
+/** Our original table look & feel/style. */
+export declare const defaultStyle: GridStyle;
+/** Tightens up the padding of rows, great for rows that have form elements in them. */
+export declare const condensedStyle: GridStyle;
+/** Renders each row as a card. */
+export declare const cardStyle: GridStyle;

package/dist/components/Table/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+const src_1 = require("../..");
+/** Our original table look & feel/style. */
+exports.defaultStyle = {
+    rootCss: src_1.Css.gray700.$,
+    betweenRowsCss: src_1.Css.bt.bGray400.$,
+    firstNonHeaderRowCss: src_1.Css.add({ borderTopStyle: "none" }).$,
+    cellCss: src_1.Css.py2.px3.$,
+    firstCellCss: src_1.Css.pl1.$,
+    lastCellCss: src_1.Css.$,
+    indentOneCss: src_1.Css.pl4.$,
+    indentTwoCss: src_1.Css.pl7.$,
+    // Use h100 so that all cells are the same height when scrolled; set bgWhite for when we're laid over other rows.
+    headerCellCss: src_1.Css.asfe.nowrap.py1.bgGray100.h100.aife.$,
+    firstRowMessageCss: src_1.Css.px1.py2.$,
+    rowHoverColor: src_1.Palette.Gray200,
+};
+/** Tightens up the padding of rows, great for rows that have form elements in them. */
+exports.condensedStyle = {
+    ...exports.defaultStyle,
+    headerCellCss: src_1.Css.bgGray100.tinyEm.$,
+    cellCss: src_1.Css.aic.sm.py1.px2.$,
+    rootCss: src_1.Css.dg.gray700.xs.$,
+};
+/** Renders each row as a card. */
+exports.cardStyle = {
+    ...exports.defaultStyle,
+    firstNonHeaderRowCss: src_1.Css.mt2.$,
+    cellCss: src_1.Css.p2.my1.bt.bb.bGray400.$,
+    firstCellCss: src_1.Css.bl.add({ borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }).$,
+    lastCellCss: src_1.Css.br.add({ borderTopRightRadius: "4px", borderBottomRightRadius: "4px" }).$,
+    // Undo the card look & feel for the header
+    headerCellCss: {
+        ...exports.defaultStyle.headerCellCss,
+        ...src_1.Css.add({
+            border: "none",
+            borderRadius: "unset",
+        }).p1.m0.xsEm.gray700.$,
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.79.2",
+  "version": "2.80.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,10 +89,12 @@
     "@types/dompurify": "^2.2.3",
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.5",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^16.9.11",
     "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
+    "array-move": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "chromatic": "^5.9.2",
@@ -114,9 +116,9 @@
     "prettier": "^2.2.1",
     "prettier-plugin-organize-imports": "^1.1.1",
     "react": "^16.14.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^16.14.0",
     "semantic-release": "^17.4.0",
-    "tinycolor2": "^1.4.1",
     "ts-jest": "^26.5.3",
     "ts-node": "^9.1.1",
     "tslib": "^2.1.0",