@homebound/beam 2.100.0 → 2.101.0

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

@@ -185,18 +185,10 @@ export declare type GridTableApi = {
  */
 export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, S, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
- * Creates a `grid-template-column` specific to our virtual output.
- *
- * Because of two things:
- *
- * a) react-virtuoso puts the header in a different div than the normal rows, and
- *
- * b) content-aware sizing just in general look janky/constantly resize while scrolling
- *
- * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
+ * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
+ * Enforces only fixed-sized units (% and px)
  */
-export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
-export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
+export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *
@@ -225,21 +217,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
 } & {
     /**
-     * The column's grid column width.
-     *
-     * For `as=div` output:
-     *
-     * - Any CSS grid units are supported
-     * - Numbers are treated as `fr` units
-     * - The default value is `auto`, which in CSS grid will do content-aware/responsive layout.
-     *
-     * For `as=virtual` output:
-     *
-     * - Only px, percentage, or fr units are supported, due to a) react-virtuoso puts the sticky header
-     * rows in a separate `div` and so we end up with two `grid-template-columns`, so cannot rely on
-     * any content-aware sizing, and b) content-aware sizing in a scrolling/virtual table results in
-     * a ~janky experience as the columns will constantly resize as new/different content is put in/out
-     * of the DOM.
+     * The column's width.
+     * - Only px, percentage, or fr units are supported, due to each GridRow acting as an independent table. This ensures consistent alignment between rows.
      * - Numbers are treated as `fr` units
      * - The default value is `1fr`
      */
@@ -277,7 +256,7 @@ export declare type GridCellAlignment = "left" | "right" | "center";
  * primitive value for filtering and sorting.
  */
 export declare type GridCellContent = {
-    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avaid perf overhead. */
+    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avoid perf overhead. */
     content: ReactNode | (() => ReactNode);
     alignment?: GridCellAlignment;
     /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */

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.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
+exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcColumnSizes = 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");
@@ -104,7 +104,7 @@ function GridTable(props) {
         var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        const columnSizes = as === "virtual" ? calcVirtualGridColumns(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth) : undefined;
+        const columnSizes = calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth);
         function makeRowComponent(row) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
@@ -217,11 +217,11 @@ exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
 const renders = {
     table: renderTable,
-    div: renderCssGrid,
+    div: renderDiv,
     virtual: renderVirtual,
 };
-/** Renders as a CSS Grid, which is the default / most well-supported rendered. */
-function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
+/** Renders table using divs with flexbox rows, which is the default render */
+function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
     var _a;
     // We must determine if the header is using nested card styles to account for
     // the opening and closing Chrome rows.
@@ -247,7 +247,6 @@ function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMes
     */
     const firstNonHeaderRowIndex = (!isNestedCardStyleHeader ? 1 : 3) + 1;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastColumnWidth)).$,
             /*
               Using n + (firstNonHeaderRowIndex + 1) here to target all rows that
               are after the first non-header row. Since n starts at 0, we can use
@@ -263,7 +262,7 @@ function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMes
                 : {}),
             ...style.rootCss,
             ...xss,
-        }, "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));
+        }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), 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, _firstLastColumnWidth, xss, _virtuosoRef) {
@@ -346,7 +345,7 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
  * rows and the second represents the non-header rows (list rows).
  *
  * The main goal of this custom component is to:
- * - Customize the list wrapper to our css grid logic styles
+ * - Customize the list wrapper to our styles
  *
  * We wrap this in memoizeOne so that React.createElement sees a
  * consistent/stable component identity, even though technically we have a
@@ -374,17 +373,10 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
     });
 });
 /**
- * Creates a `grid-template-column` specific to our virtual output.
- *
- * Because of two things:
- *
- * a) react-virtuoso puts the header in a different div than the normal rows, and
- *
- * b) content-aware sizing just in general look janky/constantly resize while scrolling
- *
- * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
+ * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
+ * Enforces only fixed-sized units (% and px)
  */
-function calcVirtualGridColumns(columns, firstLastColumnWidth) {
+function calcColumnSizes(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))`
     //
@@ -410,7 +402,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
             return { ...acc, claimedPercentages: acc.claimedPercentages + Number(w.replace("%", "")) };
         }
         else {
-            throw new Error("as=virtual only supports px, percentage, or fr units");
+            throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
         }
     }, { claimedPercentages: 0, claimedPixels: firstLastColumnWidth ? firstLastColumnWidth * 2 : 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
@@ -429,7 +421,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
                 return fr(Number(w.replace("fr", "")));
             }
             else {
-                throw new Error("as=virtual only supports px, percentage, or fr units");
+                throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
             }
         }
         else {
@@ -438,25 +430,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
     });
     return maybeAddCardColumns(sizes, firstLastColumnWidth);
 }
-exports.calcVirtualGridColumns = calcVirtualGridColumns;
-function calcDivGridColumns(columns, firstLastColumnWidth) {
-    const sizes = columns.map(({ w }) => {
-        if (typeof w === "undefined") {
-            // Hrm, I waffle between 'auto' or '1fr' being the better default here...
-            return "auto";
-        }
-        else if (typeof w === "string") {
-            // Use whatever the user passed in
-            return w;
-        }
-        else {
-            // Otherwise assume fr units
-            return `${w}fr`;
-        }
-    });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth).join(" ");
-}
-exports.calcDivGridColumns = calcDivGridColumns;
+exports.calcColumnSizes = calcColumnSizes;
 // If we're doing nested cards, we add extra 1st/last cells...
 function maybeAddCardColumns(sizes, firstLastColumnWidth) {
     return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
@@ -480,19 +454,15 @@ function GridRow(props) {
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
-        // We add a display-contents so that we can have "row-level" div elements in our
-        // DOM structure. I.e. grid is normally root-element > cell-elements, but we want
-        // root-element > row-element > cell-elements, so that we can have a hook for
-        // hovers and styling. In theory this would change with subgrids.
-        // Only enable when using div as elements
         // For virtual tables use `display: flex` to keep all cells on the same row, but use `flexNone` to ensure the cells stay their defined widths
-        ...(as === "table" ? {} : as === "virtual" ? Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$ : Css_1.Css.display("contents").$),
+        ...(as === "table" ? {} : Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$),
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) &&
             style.rowHoverColor && {
             // Even though backgroundColor is set on the cellCss (due to display: content), the hover target is the row.
             "&:hover > *": Css_1.Css.cursorPointer.bgColor(maybeDarken(rowStyleCellCss === null || rowStyleCellCss === void 0 ? void 0 : rowStyleCellCss.backgroundColor, style.rowHoverColor)).$,
         }),
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
+        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined),
     };
     const Row = as === "table" ? "tr" : "div";
     const openCardStyles = typeof openCards === "string"
@@ -543,18 +513,11 @@ function GridRow(props) {
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
-                    // Non-virtualized tables use h100 so that all cells are the same height across the row.
-                    // Virtualized table rows use `display: flex;`, so the flex children are set to `align-self: stretch` by default, which achieves the same goal.
-                    // Though, we need to omit setting `h100` on the flex children, as a flex container needs a defined height set for `h100` to work on flex children
-                    ...(isHeader && as !== "virtual" ? Css_1.Css.h100.$ : undefined),
-                    ...maybeStickyHeaderStyles,
                     // If we're within a card, use its background color
                     ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
-                    // Add in colspan css if needed
-                    ...(currentColspan > 1 ? Css_1.Css.gc(`span ${currentColspan}`).$ : {}),
                     // And finally the specific cell's css (if any from GridCellContent)
                     ...rowStyleCellCss,
-                    // For virtual tables we define the width of the column on each cell. Supports col spans.
+                    // Define the width of the column on each cell. Supports col spans.
                     ...(columnSizes && {
                         width: `calc(${columnSizes
                             .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
@@ -641,8 +604,8 @@ function applyRowFn(column, row) {
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 const defaultRenderFn = (as) => (key, css, content) => {
-    const Row = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
+    const Cell = as === "table" ? "td" : "div";
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
 exports.GridCollapseContext = react_1.default.createContext({
     headerCollapsed: false,

package/package.json

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