@homebound/beam 2.111.0 → 2.112.0

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

@@ -245,6 +245,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     clientSideSort?: boolean;
     /** This column's sort by value (if server-side sorting). */
     serverSideSortKey?: S;
+    /** Allows the column to stay in place when the user scrolls horizontally */
+    sticky?: "left" | "right";
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
@@ -284,6 +286,8 @@ export declare type GridCellContent = {
     indent?: 1 | 2;
     colspan?: number;
     typeScale?: Typography;
+    /** Allows the cell to stay in place when the user scrolls horizontally */
+    sticky?: "left" | "right";
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -474,12 +474,12 @@ function GridRow(props) {
         }),
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
-        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined),
+        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z2.$ : undefined),
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style),
     };
     let currentColspan = 1;
     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;
+            var _a, _b, _c, _d;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -500,6 +500,27 @@ function GridRow(props) {
             const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, 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.$),
+                    ...(maybeSticky === "left"
+                        ? Css_1.Css.left(maybeNestedCardColumnIndex === 0
+                            ? 0
+                            : `calc(${columnSizes.slice(0, maybeNestedCardColumnIndex).join(" + ")})`).$
+                        : {}),
+                    ...(maybeSticky === "right"
+                        ? Css_1.Css.right(maybeNestedCardColumnIndex + 1 === columnSizes.length
+                            ? 0
+                            : `calc(${columnSizes.slice(maybeNestedCardColumnIndex + 1 - columnSizes.length).join(" + ")})`).$
+                        : {}),
+                }
+                : {};
             // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
             // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
             // a few descendent selectors. However, that approach means the root grid-applied
@@ -512,6 +533,8 @@ function GridRow(props) {
             const cellCss = {
                 // Adding display flex so we can align content within the cells
                 ...Css_1.Css.df.$,
+                // Apply sticky column/cell styles
+                ...maybeStickyColumnStyles,
                 // Apply any static/all-cell styling
                 ...style.cellCss,
                 // Then override with first/last cell styling
@@ -522,7 +545,7 @@ function GridRow(props) {
                 // Then apply any header-specific override
                 ...(isHeader && style.headerCellCss),
                 // Or level-specific styling
-                ...(!isHeader && !!style.levels && ((_b = style.levels[level]) === null || _b === void 0 ? void 0 : _b.cellCss)),
+                ...(!isHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Add any cell specific style overrides

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

@@ -88,6 +88,12 @@ export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyle
     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.
  *

package/dist/components/Table/nestedCards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isLeafRow = exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.getNestedCardStyles = exports.wrapCard = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
+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");
@@ -176,6 +176,21 @@ function getNestedCardStyles(row, openCardStyles, style) {
     };
 }
 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.
  *

package/package.json

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