@homebound/beam 2.417.6 → 2.417.7

package/dist/index.d.cts

@@ -5314,7 +5314,7 @@ declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row:
 declare const ASC: "ASC";
 declare const DESC: "DESC";
 declare const emptyCell: GridCellContent;
-declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[]): Properties;
+declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[], colspan?: number): Properties;
 /** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
 declare function isJSX(content: any): boolean;
 declare function getAlignment(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
@@ -5392,23 +5392,27 @@ type LabelSuffixStyle = {
 interface GridStyle {
     /** Applied to the base div element. */
     rootCss?: Properties;
-    /** Applied with the owl operator between rows for rendering border lines. */
+    /**
+     * Applied as the base body-row cell styling (commonly used for row separators).
+     * This is applied to body rows broadly (including the last body row); use
+     * `lastRowCellCss`/`lastRowCss` to adjust/cancel any final-row treatment.
+     */
     betweenRowsCss?: Properties;
-    /** Applied on the last row of the table. */
+    /** Applied on the last row of the table, typically to override/cancel `betweenRowsCss`. */
     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 the first body row, i.e. if you want to cancel out `betweenRowsCss`. */
+    firstBodyRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
     cellCss?: Properties;
     /**
      * Applied to the header row divs.
      *
      * NOTE `as=virtual`: When using a virtual table with the goal of adding space
-     * between the header and the first row use `firstNonHeaderRowCss` with a
+     * between the header and the first row use `firstBodyRowCss` with a
      * margin-top instead. Using `headerCellCss` will not work since the header
      * rows are wrapper with Chrome rows.
      */
@@ -5423,6 +5427,18 @@ interface GridStyle {
     firstCellCss?: Properties;
     /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
     lastCellCss?: Properties;
+    /** Applied to every cell in the first table-head row (expandableHeader/header/totals). */
+    firstRowCellCss?: Properties;
+    /** Applied to the first cell in the first table-head row. */
+    firstRowFirstCellCss?: Properties;
+    /** Applied to the last cell in the first table-head row. */
+    firstRowLastCellCss?: Properties;
+    /** Applied to every cell in the last table-body row. */
+    lastRowCellCss?: Properties;
+    /** Applied to the first cell in the last table-body row. */
+    lastRowFirstCellCss?: Properties;
+    /** Applied to the last cell in the last table-body row. */
+    lastRowLastCellCss?: Properties;
     /** Applied if there is a fallback/overflow message showing. */
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
@@ -5510,6 +5526,9 @@ interface RowProps<R extends Kinded> {
     cellHighlight: boolean;
     omitRowHover: boolean;
     hasExpandableHeader: boolean;
+    isFirstHeadRow: boolean;
+    isFirstBodyRow: boolean;
+    isLastBodyRow: boolean;
     resizedWidths: ResizedWidths;
     setResizedWidth: (columnId: string, width: number, columnIndex: number) => void;
     disableColumnResizing: boolean;

package/dist/index.d.ts

@@ -5314,7 +5314,7 @@ declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row:
 declare const ASC: "ASC";
 declare const DESC: "DESC";
 declare const emptyCell: GridCellContent;
-declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[]): Properties;
+declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[], colspan?: number): Properties;
 /** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
 declare function isJSX(content: any): boolean;
 declare function getAlignment(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
@@ -5392,23 +5392,27 @@ type LabelSuffixStyle = {
 interface GridStyle {
     /** Applied to the base div element. */
     rootCss?: Properties;
-    /** Applied with the owl operator between rows for rendering border lines. */
+    /**
+     * Applied as the base body-row cell styling (commonly used for row separators).
+     * This is applied to body rows broadly (including the last body row); use
+     * `lastRowCellCss`/`lastRowCss` to adjust/cancel any final-row treatment.
+     */
     betweenRowsCss?: Properties;
-    /** Applied on the last row of the table. */
+    /** Applied on the last row of the table, typically to override/cancel `betweenRowsCss`. */
     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 the first body row, i.e. if you want to cancel out `betweenRowsCss`. */
+    firstBodyRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
     cellCss?: Properties;
     /**
      * Applied to the header row divs.
      *
      * NOTE `as=virtual`: When using a virtual table with the goal of adding space
-     * between the header and the first row use `firstNonHeaderRowCss` with a
+     * between the header and the first row use `firstBodyRowCss` with a
      * margin-top instead. Using `headerCellCss` will not work since the header
      * rows are wrapper with Chrome rows.
      */
@@ -5423,6 +5427,18 @@ interface GridStyle {
     firstCellCss?: Properties;
     /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
     lastCellCss?: Properties;
+    /** Applied to every cell in the first table-head row (expandableHeader/header/totals). */
+    firstRowCellCss?: Properties;
+    /** Applied to the first cell in the first table-head row. */
+    firstRowFirstCellCss?: Properties;
+    /** Applied to the last cell in the first table-head row. */
+    firstRowLastCellCss?: Properties;
+    /** Applied to every cell in the last table-body row. */
+    lastRowCellCss?: Properties;
+    /** Applied to the first cell in the last table-body row. */
+    lastRowFirstCellCss?: Properties;
+    /** Applied to the last cell in the last table-body row. */
+    lastRowLastCellCss?: Properties;
     /** Applied if there is a fallback/overflow message showing. */
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
@@ -5510,6 +5526,9 @@ interface RowProps<R extends Kinded> {
     cellHighlight: boolean;
     omitRowHover: boolean;
     hasExpandableHeader: boolean;
+    isFirstHeadRow: boolean;
+    isFirstBodyRow: boolean;
+    isLastBodyRow: boolean;
     resizedWidths: ResizedWidths;
     setResizedWidth: (columnId: string, width: number, columnIndex: number) => void;
     disableColumnResizing: boolean;

package/dist/index.js

@@ -7156,21 +7156,19 @@ function memoizedTableStyles() {
         cellCss: {
           ...Css[cellTypography].gray900.bgWhite.ai(alignItems).pxPx(12).boxShadow(`inset 0 -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
           ...rowHeight === "flexible" ? Css.pyPx(12).$ : Css.wsnw.hPx(inlineEditing ? 48 : 36).$,
-          ...cellHighlight ? { "&:hover": Css.bgGray100.$ } : {},
-          ...bordered && { "&:first-child": Css.bl.bcGray200.$, "&:last-child": Css.br.bcGray200.$ }
+          ...cellHighlight ? { "&:hover": Css.bgGray100.$ } : {}
         },
-        firstRowCss: {
-          ...Css.addIn("& > *:first-of-type", Css.borderRadius("8px 0 0 0 ").$).addIn(
-            "& > *:last-of-type",
-            Css.borderRadius("0 8px 0 0").$
-          ).$,
-          ...bordered && Css.addIn("& > *", Css.bt.bcGray200.$).$
-        },
-        // Only apply border radius styles to the last row when using the `bordered` style table.
-        lastRowCss: bordered ? Css.addIn("& > *:first-of-type", Css.borderRadius("0 0 0 8px").$).addIn(
-          "& > *:last-of-type",
-          Css.borderRadius("0 0 8px 0").$
-        ).$ : Css.addIn("> *", Css.bsh0.$).$,
+        firstCellCss: bordered ? Css.bl.bcGray200.$ : void 0,
+        lastCellCss: bordered ? Css.br.bcGray200.$ : void 0,
+        firstRowCellCss: bordered ? Css.bt.bcGray200.$ : void 0,
+        firstRowFirstCellCss: Css.borderRadius("8px 0 0 0 ").$,
+        firstRowLastCellCss: Css.borderRadius("0 8px 0 0").$,
+        // Keep `betweenRowsCss` on all body rows, but on the final body row
+        // remove the inset shadow and, when bordered, replace it with a true bottom border.
+        lastRowCellCss: bordered ? Css.bsh0.bb.bcGray200.$ : Css.bsh0.$,
+        // Only apply bottom corner radii to the final body-row cells when using `bordered`.
+        lastRowFirstCellCss: bordered ? Css.borderRadius("0 0 0 8px").$ : void 0,
+        lastRowLastCellCss: bordered ? Css.borderRadius("0 0 8px 0").$ : void 0,
         presentationSettings: {
           borderless: true,
           typeScale: "xs",
@@ -7189,6 +7187,7 @@ function memoizedTableStyles() {
 var getTableStyles = memoizedTableStyles();
 var totalsRowHeight = 40;
 var expandableHeaderRowHeight = 40;
+var tableRowPrintBreakCss = Css.add("pageBreakAfter", "auto").add("pageBreakInside", "avoid").$;
 var defaultStyle = getTableStyles({});
 var condensedStyle = {
   ...getTableStyles({ rowHeight: "fixed" }),
@@ -7457,10 +7456,10 @@ function applyRowFn(column2, row, api, level, expanded, dragData) {
 var ASC = "ASC";
 var DESC = "DESC";
 var emptyCell = { content: () => /* @__PURE__ */ jsx31(Fragment9, {}), value: "" };
-function getFirstOrLastCellCss(style, columnIndex, columns) {
+function getFirstOrLastCellCss(style, columnIndex, columns, colspan = 1) {
   return {
     ...columnIndex === 0 ? style.firstCellCss : {},
-    ...columnIndex === columns.length - 1 ? style.lastCellCss : {}
+    ...columnIndex + colspan >= columns.length ? style.lastCellCss : {}
   };
 }
 function isJSX(content) {
@@ -7851,7 +7850,7 @@ function ColumnResizeHandle({
 import { useContext as useContext8 } from "react";
 import { jsx as jsx33, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 function KeptGroupRow(props) {
-  const { as, columnSizes, style, row, colSpan } = props;
+  const { as, columnSizes, style, row, colSpan, isLastBodyRow } = props;
   const CellTag = as === "table" ? "td" : "div";
   const { tableState } = useContext8(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
@@ -7860,6 +7859,10 @@ function KeptGroupRow(props) {
     {
       css: {
         ...style.cellCss,
+        ...style.betweenRowsCss,
+        ...isLastBodyRow && style.lastRowCellCss,
+        ...isLastBodyRow && style.lastRowFirstCellCss,
+        ...isLastBodyRow && style.lastRowLastCellCss,
         ...style.keptGroupRowCss,
         ...Css.pl0.w(`calc(${columnSizes.join(" + ")})`).$
       },
@@ -8174,6 +8177,9 @@ function RowImpl(props) {
     cellHighlight,
     omitRowHover,
     hasExpandableHeader,
+    isFirstHeadRow,
+    isFirstBodyRow,
+    isLastBodyRow,
     resizedWidths,
     setResizedWidth,
     disableColumnResizing = true,
@@ -8192,6 +8198,8 @@ function RowImpl(props) {
   const isTotals = row.kind === TOTALS;
   const isExpandableHeader = row.kind === EXPANDABLE_HEADER;
   const isKeptGroupRow = row.kind === KEPT_GROUP;
+  const isBodyRow = !isHeader && !isTotals && !isExpandableHeader;
+  const isFirstHeadCellRow = isExpandableHeader || !hasExpandableHeader && (isHeader || isTotals);
   const rowStyle = rowStyles?.[row.kind];
   const RowTag = as === "table" ? "tr" : "div";
   const sortOn = tableState.sortConfig?.on;
@@ -8207,6 +8215,9 @@ function RowImpl(props) {
   };
   const rowCss = {
     ...!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss,
+    ...isFirstBodyRow && style.firstBodyRowCss,
+    ...isFirstHeadRow && style.firstRowCss,
+    ...as === "table" && tableRowPrintBreakCss,
     // 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.
@@ -8219,6 +8230,7 @@ function RowImpl(props) {
     ...levelIndent && Css.mlPx(levelIndent).$,
     // For virtual tables use `display: flex` to keep all cells on the same row.
     ...as === "table" ? {} : Css.relative.df.fg1.fs1.$,
+    ...isLastBodyRow && style.lastRowCss,
     // Apply `cursorPointer` to the row if it has a link or `onClick` value.
     ...(rowStyle?.rowLink || rowStyle?.onClick) && { "&:hover": Css.cursorPointer.$ },
     ...maybeApplyFunction(row, rowStyle?.rowCss),
@@ -8239,7 +8251,17 @@ function RowImpl(props) {
     [onDragOver]
   );
   const onDragOverDebounced = useDebouncedCallback4(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ jsx34(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref, className: BorderHoverParent, children: isKeptGroupRow ? /* @__PURE__ */ jsx34(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ jsx34(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref, className: BorderHoverParent, children: isKeptGroupRow ? /* @__PURE__ */ jsx34(
+    KeptGroupRow,
+    {
+      as,
+      style,
+      columnSizes,
+      row,
+      colSpan: columns.length,
+      isLastBodyRow
+    }
+  ) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
@@ -8323,8 +8345,16 @@ function RowImpl(props) {
       ...maybeStickyColumnStyles,
       // Apply any static/all-cell styling
       ...style.cellCss,
+      // Apply between-row cell styling for body rows.
+      ...isBodyRow && style.betweenRowsCss,
+      ...isFirstHeadCellRow && style.firstRowCellCss,
+      ...isLastBodyRow && style.lastRowCellCss,
       // Then override with first/last cell styling
-      ...getFirstOrLastCellCss(style, columnIndex, columns),
+      ...getFirstOrLastCellCss(style, columnIndex, columns, currentColspan),
+      ...columnIndex === 0 && isFirstHeadCellRow && style.firstRowFirstCellCss,
+      ...columnIndex === columns.length - 1 && isFirstHeadCellRow && style.firstRowLastCellCss,
+      ...columnIndex === 0 && isLastBodyRow && style.lastRowFirstCellCss,
+      ...columnIndex === columns.length - 1 && isLastBodyRow && style.lastRowLastCellCss,
       // Then override with per-cell/per-row justification
       ...justificationCss,
       // Then apply any header-specific override
@@ -8340,7 +8370,7 @@ function RowImpl(props) {
       // Only apply if not the last column in the table AND when this column is the last column in the group of expandable column or not expanded AND
       ...hasExpandableHeader && columnIndex + currentColspan < columns.length && (isHeader || isTotals) && currentExpandedColumnCount === 0 && Css.boxShadow(`inset -1px -1px 0 ${"rgba(236, 235, 235, 1)" /* Gray200 */}`).$,
       // Or level-specific styling
-      ...!isHeader && !isTotals && !isExpandableHeader && levelStyle?.cellCss,
+      ...isBodyRow && levelStyle?.cellCss,
       // Level specific styling for the first content column
       ...applyFirstContentColumnStyles && levelStyle?.firstContentColumn,
       // The specific cell's css (if any from GridCellContent)
@@ -8535,6 +8565,7 @@ function TextFieldBase(props) {
     },
     input: {
       ...Css.w100.mw0.outline0.fg1.bgTransparent.$,
+      // Keep `addIn` for `::selection` until we finish the StyleX migration.
       // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
       ...contrast && !inputStylePalette && Css.addIn("&::selection", Css.bgGray800.$).$,
       // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
@@ -13778,7 +13809,25 @@ function GridTable(props) {
     let visibleDataRows2 = [];
     const { visibleRows } = tableState;
     const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === EXPANDABLE_HEADER);
+    const bodyRowsCount = visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind)).length;
+    const onlyKeptBodyRows = bodyRowsCount > 0 && visibleRows.every(
+      (rs) => (
+        // For our purposes, "body rows" are any non-header / non-totals rows.
+        [HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind) || rs.isKept || rs.kind === KEPT_GROUP
+      )
+    );
+    let bodyRowsSeen = 0;
+    let foundFirstBodyRow = false;
+    let foundFirstHeadRow = false;
     visibleRows.forEach((rs) => {
+      const isHeadRow = [HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind);
+      const isFirstHeadRow = isHeadRow && !foundFirstHeadRow;
+      const isBodyRow = ![HEADER, EXPANDABLE_HEADER, TOTALS].includes(rs.kind);
+      const isFirstBodyRow = isBodyRow && !foundFirstBodyRow;
+      if (isHeadRow) foundFirstHeadRow = true;
+      if (isBodyRow) bodyRowsSeen += 1;
+      if (isBodyRow) foundFirstBodyRow = true;
+      const isLastBodyRow = isBodyRow && bodyRowsSeen === bodyRowsCount && !onlyKeptBodyRows;
       const row = /* @__PURE__ */ jsx81(
         Row,
         {
@@ -13797,6 +13846,9 @@ function GridTable(props) {
             cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
             omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
             hasExpandableHeader,
+            isFirstHeadRow,
+            isFirstBodyRow,
+            isLastBodyRow,
             resizedWidths,
             setResizedWidth: handleColumnResize,
             disableColumnResizing,
@@ -13895,27 +13947,30 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
           "div",
           {
             css: {
-              ...style.firstRowCss && Css.addIn("& > div:first-of-type", style.firstRowCss).$,
               ...Css.if(stickyHeader).sticky.topPx(stickyOffset).z(zIndices.stickyHeader).$
             },
             children: tableHeadRows
           }
         ),
-        /* @__PURE__ */ jsxs48(
-          "div",
-          {
-            css: {
-              ...style.betweenRowsCss ? Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {},
-              ...style.firstNonHeaderRowCss ? Css.addIn(`& > div:first-of-type`, style.firstNonHeaderRowCss).$ : {},
-              ...style.lastRowCss && Css.addIn("& > div:last-of-type", style.lastRowCss).$
-            },
-            children: [
-              keptSelectedRows,
-              firstRowMessage && /* @__PURE__ */ jsx81("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage }),
-              visibleDataRows
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs48("div", { children: [
+          keptSelectedRows,
+          firstRowMessage && /* @__PURE__ */ jsx81(
+            "div",
+            {
+              css: {
+                ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                ...style.firstRowMessageCss,
+                ...visibleDataRows.length === 0 && style.lastRowCss,
+                ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+              },
+              "data-gridrow": true,
+              children: firstRowMessage
+            }
+          ),
+          visibleDataRows
+        ] })
       ]
     }
   );
@@ -13927,10 +13982,6 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
       ref: tableContainerRef,
       css: {
         ...Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
-        ...Css.addIn("& tr ", { pageBreakAfter: "auto", pageBreakInside: "avoid" }).$,
-        ...Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {}).addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
-        ...Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
-        ...Css.addIn("& > thead > tr:first-of-type", style.firstRowCss).$,
         ...style.rootCss,
         ...style.minWidthPx ? Css.mwPx(style.minWidthPx).$ : {},
         ...xss
@@ -13940,7 +13991,30 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
         /* @__PURE__ */ jsx81("thead", { css: Css.if(stickyHeader).sticky.topPx(stickyOffset).z(zIndices.stickyHeader).$, children: tableHeadRows }),
         /* @__PURE__ */ jsxs48("tbody", { children: [
           keptSelectedRows,
-          firstRowMessage && /* @__PURE__ */ jsx81("tr", { children: /* @__PURE__ */ jsx81("td", { colSpan: columns.length, css: { ...style.firstRowMessageCss }, children: firstRowMessage }) }),
+          firstRowMessage && /* @__PURE__ */ jsx81(
+            "tr",
+            {
+              css: {
+                ...tableRowPrintBreakCss,
+                ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                ...visibleDataRows.length === 0 && style.lastRowCss
+              },
+              children: /* @__PURE__ */ jsx81(
+                "td",
+                {
+                  colSpan: columns.length,
+                  css: {
+                    ...style.betweenRowsCss,
+                    ...style.firstRowMessageCss,
+                    ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                    ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                    ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+                  },
+                  children: firstRowMessage
+                }
+              )
+            }
+          ),
           visibleDataRows
         ] })
       ]
@@ -13993,7 +14067,28 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
           if (index === 0) {
             return (
               // Ensure the fallback message is the same width as the table
-              /* @__PURE__ */ jsx81("div", { css: getTableRefWidthStyles(true), children: /* @__PURE__ */ jsx81("div", { css: { ...style.firstRowMessageCss }, children: firstRowMessage }) })
+              /* @__PURE__ */ jsx81(
+                "div",
+                {
+                  css: {
+                    ...getTableRefWidthStyles(true),
+                    ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
+                    ...visibleDataRows.length === 0 && style.lastRowCss
+                  },
+                  children: /* @__PURE__ */ jsx81(
+                    "div",
+                    {
+                      css: {
+                        ...style.firstRowMessageCss,
+                        ...visibleDataRows.length === 0 && style.lastRowCellCss,
+                        ...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
+                        ...visibleDataRows.length === 0 && style.lastRowLastCellCss
+                      },
+                      children: firstRowMessage
+                    }
+                  )
+                }
+              )
             );
           }
           index--;
@@ -14031,20 +14126,12 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
 var VirtualRoot = memoizeOne(
   (gs, _columns, id, xss) => {
     return React13.forwardRef(function VirtualRoot2({ style, children }, ref) {
-      const isHeader = Object.keys(style || {}).length === 0;
       return /* @__PURE__ */ jsx81(
         "div",
         {
           ref,
           style: { ...style, ...{ minWidth: "fit-content" } },
           css: {
-            // Add an extra `> div` due to Item + itemContent both having divs
-            ...Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
-            // Table list styles only
-            ...isHeader ? Css.addIn("& > div:first-of-type > *", gs.firstRowCss).$ : {
-              ...Css.addIn("& > div:first-of-type", gs.firstNonHeaderRowCss).$,
-              ...Css.addIn("& > div:last-of-type > *", gs.lastRowCss).$
-            },
             ...gs.rootCss,
             ...gs.minWidthPx ? Css.mwPx(gs.minWidthPx).$ : {},
             ...xss