@homebound/beam 2.195.0 → 2.196.0

package/dist/components/Table/GridTable.js

@@ -137,6 +137,7 @@ function GridTable(props) {
                 getCount,
                 api,
                 cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
+                omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
                 ...sortProps,
             }), `${row.kind}-${row.id}`));
         }
@@ -157,7 +158,6 @@ function GridTable(props) {
             }
         }
         function visitRows(rows, level, visible) {
-            const length = rows.length;
             rows.forEach((row, i) => {
                 if (row[0].kind === "header") {
                     headerRows.push([row[0], makeRowComponent(row[0], level)]);

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

@@ -61,6 +61,7 @@ export interface GridStyleDef {
     cellHighlight?: boolean;
     allWhite?: boolean;
     bordered?: boolean;
+    rowHover?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 /** Defines row-specific styling for each given row `kind` in `R` */

package/dist/components/Table/TableStyles.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, rowHover = true, } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
@@ -50,6 +50,7 @@ function memoizedTableStyles() {
                 }),
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,
+                rowHoverColor: Css_1.Palette.LightBlue100,
             };
         }
         return cache[key];
@@ -114,6 +115,7 @@ function resolveStyles(style) {
         "cellHighlight",
         "allWhite",
         "bordered",
+        "rowHover",
     ];
     const keys = (0, utils_1.safeKeys)(style);
     if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {

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

@@ -19,6 +19,7 @@ interface RowProps<R extends Kinded, S> {
     getCount: (id: string) => object;
     api: GridTableApi<R>;
     cellHighlight: boolean;
+    omitRowHover: boolean;
 }
 declare function RowImpl<R extends Kinded, S>(props: RowProps<R, S>): ReactElement;
 /**

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

@@ -33,7 +33,7 @@ const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, omitRowHover, ...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]);
@@ -45,12 +45,15 @@ function RowImpl(props) {
     const revealOnRowHoverClass = "revealOnRowHover";
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
-        // 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.$).$),
-        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && {
+        // Optionally include the row hover styles, by default they should be turned on.
+        ...(!omitRowHover && {
             // Even though backgroundColor is set on the cellCss, the hover target is the row.
-            "&:hover > *": Css_1.Css.cursorPointer.bgColor((_a = style.rowHoverColor) !== null && _a !== void 0 ? _a : Css_1.Palette.LightBlue100).$,
+            "&:hover > *": Css_1.Css.bgColor((_a = style.rowHoverColor) !== null && _a !== void 0 ? _a : Css_1.Palette.LightBlue100).$,
         }),
+        // 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.
+        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && { "&:hover": Css_1.Css.cursorPointer.$ }),
         ...(0, utils_1.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),

package/package.json

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