@homebound/beam 2.329.0 → 2.331.0

package/dist/components/Table/GridTable.js

@@ -235,7 +235,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
                     ...Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$,
                 }, children: tableHeadRows }), (0, jsx_runtime_1.jsxs)("div", { css: {
                     ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {}),
-                    ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type > *`, style.firstNonHeaderRowCss).$ : {}),
+                    ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type`, style.firstNonHeaderRowCss).$ : {}),
                     ...(style.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
                 }, children: [keptSelectedRows, firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows] })] }));
 }
@@ -245,7 +245,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
             ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
             ...Css_1.Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
                 // removes border between header and second row
-                .addIn("& > tbody > tr:first-of-type > *", style.firstNonHeaderRowCss || {}).$,
+                .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
             ...Css_1.Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
             ...Css_1.Css.addIn("& > thead > tr:first-of-type", style.firstRowCss).$,
             ...style.rootCss,
@@ -364,7 +364,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, xss) => {
                 ...(isHeader
                     ? Css_1.Css.addIn("& > div:first-of-type > *", gs.firstRowCss).$
                     : {
-                        ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
+                        ...Css_1.Css.addIn("& > div:first-of-type", gs.firstNonHeaderRowCss).$,
                         ...Css_1.Css.addIn("& > div:last-of-type > *", gs.lastRowCss).$,
                     }),
                 ...gs.rootCss,

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

@@ -13,6 +13,8 @@ export interface GridStyle {
     lastRowCss?: Properties;
     /** Applied on the first row of the table (could be the Header or Totals row). */
     firstRowCss?: Properties;
+    /** Applied to every non-header row of the table */
+    nonHeaderRowCss?: Properties;
     /** Applied to the first non-header row, i.e. if you want to cancel out `betweenRowsCss`. */
     firstNonHeaderRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
@@ -37,7 +39,9 @@ export interface GridStyle {
     /** Applied if there is a fallback/overflow message showing. */
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
-    rowHoverColor?: Palette;
+    rowHoverColor?: Palette | "none";
+    /** Applied on hover of a row */
+    nonHeaderRowHoverCss?: Properties;
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
     presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
@@ -45,6 +49,8 @@ export interface GridStyle {
     minWidthPx?: number;
     /** Css to apply at each level of a parent/child nested table. */
     levels?: Record<number, {
+        /** Number of pixels to indent the row. This value will be subtracted from the "first content column" width. First content column is the first column that is not an 'action' column (i.e. non-checkbox or non-collapse button column) */
+        rowIndent?: number;
         cellCss?: Properties;
         firstContentColumn?: Properties;
     }>;

package/dist/components/Table/TableStyles.js

@@ -92,17 +92,19 @@ exports.condensedStyle = {
 exports.cardStyle = {
     ...exports.defaultStyle,
     betweenRowsCss: {},
-    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" }).$,
+    nonHeaderRowCss: Css_1.Css.br4.overflowHidden.ba.bGray400.mt2.add("transition", "all 240ms").$,
+    firstRowCss: Css_1.Css.bl.br.bGray200.borderRadius("8px 8px 0 0").overflowHidden.$,
+    cellCss: Css_1.Css.p2.$,
     // Undo the card look & feel for the header
     headerCellCss: {
         ...exports.defaultStyle.headerCellCss,
-        ...Css_1.Css.add({
-            border: "none",
-            borderRadius: "unset",
-        }).p1.m0.xsMd.gray700.$,
+        ...Css_1.Css.p1.m0.xsMd.gray700.$,
+    },
+    rowHoverColor: "none",
+    nonHeaderRowHoverCss: Css_1.Css.bshHover.bGray700.$,
+    levels: {
+        1: { rowIndent: 24 },
+        2: { rowIndent: 48 },
     },
 };
 function resolveStyles(style) {

package/dist/components/Table/components/Row.js

@@ -13,7 +13,7 @@ const Css_1 = require("../../../Css");
 const utils_2 = require("../../../utils");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const { as, rs, style, rowStyles, columnSizes, getCount, cellHighlight, omitRowHover, hasExpandableHeader, ...others } = props;
     const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     // We're wrapped in observer, so can access these without useComputeds
@@ -28,14 +28,22 @@ function RowImpl(props) {
     const RowTag = as === "table" ? "tr" : "div";
     const sortOn = (_a = tableState.sortConfig) === null || _a === void 0 ? void 0 : _a.on;
     const revealOnRowHoverClass = "revealOnRowHover";
-    const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover;
+    const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover && style.rowHoverColor !== "none";
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
+    const levelIndent = style.levels && ((_b = style.levels[level]) === null || _b === void 0 ? void 0 : _b.rowIndent);
     const rowCss = {
+        ...(!utils_1.reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss),
         // Optionally include the row hover styles, by default they should be turned on.
         ...(showRowHoverColor && {
             // Even though backgroundColor is set on the cellCss, the hover target is the row.
-            "&:hover > *": Css_1.Css.bgColor((_b = style.rowHoverColor) !== null && _b !== void 0 ? _b : Css_1.Palette.Blue100).$,
+            "&:hover > *": Css_1.Css.bgColor((_c = style.rowHoverColor) !== null && _c !== void 0 ? _c : Css_1.Palette.Blue100).$,
         }),
+        ...(!utils_1.reservedRowKinds.includes(row.kind) &&
+            style.nonHeaderRowHoverCss && {
+            // Need to spread this to make TS happy.
+            ":hover": { ...style.nonHeaderRowHoverCss },
+        }),
+        ...(levelIndent && Css_1.Css.mlPx(levelIndent).$),
         // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
         ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
         // Apply `cursorPointer` to the row if it has a link or `onClick` value.
@@ -189,7 +197,8 @@ function RowImpl(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.Blue700}`).$,
                 // Define the width of the column on each cell. Supports col spans.
-                width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")})`,
+                // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly
+                width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`,
                 ...(typeof column.mw === "string" ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;

package/package.json

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