@homebound/beam 2.329.0 → 2.330.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">;

package/dist/components/Table/TableStyles.js

@@ -92,18 +92,16 @@ 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.$,
 };
 function resolveStyles(style) {
     const defKeysRecord = {

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

@@ -28,14 +28,20 @@ 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 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).$,
         }),
+        ...(!utils_1.reservedRowKinds.includes(row.kind) &&
+            style.nonHeaderRowHoverCss && {
+            // Need to spread this to make TS happy.
+            ":hover": { ...style.nonHeaderRowHoverCss },
+        }),
         // 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.

package/package.json

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