@homebound/beam 4.41.0 → 4.42.0

package/dist/index.cjs

@@ -6937,7 +6937,8 @@ function memoizedTableStyles() {
       vAlign = rowHeight === "fixed" ? "center" : "top",
       cellTypography = "xs",
       highlightOnHover = true,
-      roundedHeader = true
+      roundedHeader = true,
+      columnStriping
     } = props;
     const key = safeKeys(props).sort().map((k) => `${k}_${props[k]}`).join("|");
     if (!cache[key]) {
@@ -7246,6 +7247,9 @@ function memoizedTableStyles() {
             paddingTop: "pt_4px",
             paddingBottom: "pb_4px"
           }
+        } : {},
+        ...columnStriping ? {
+          columnStripeColor: columnStriping
         } : {}
       };
     }
@@ -7354,7 +7358,8 @@ var gridStyleDefKeysRecord = {
   vAlign: true,
   cellTypography: true,
   highlightOnHover: true,
-  roundedHeader: true
+  roundedHeader: true,
+  columnStriping: true
 };
 function isGridStyleDef(style) {
   const keys = safeKeys(style);
@@ -9599,7 +9604,6 @@ function groupColumns(opts) {
   const {
     id,
     header,
-    bgColor,
     columns
   } = opts;
   return columns.map((column2) => ({
@@ -9609,7 +9613,6 @@ function groupColumns(opts) {
     groupId: id,
     groupLabel: header,
     groupHeader: header,
-    bgColor: column2.bgColor ?? bgColor,
     name: prefixGroupColumnName(header, column2.name)
   }));
 }
@@ -10960,6 +10963,7 @@ function RowImpl(props) {
     setResizedWidth,
     disableColumnResizing = true,
     calculatePreviewWidth,
+    stripedColumnIds,
     onDragStart,
     onDragEnd,
     onDrop,
@@ -10974,6 +10978,7 @@ function RowImpl(props) {
     api,
     visibleColumns: columns
   } = tableState;
+  const columnStripeColor = style.columnStripeColor;
   const {
     row,
     api: rowApi,
@@ -11171,6 +11176,12 @@ function RowImpl(props) {
       // Add right border on expandable header cells except the last column
       ...isExpandableHeader && columnIndex + currentColspan < columns.length && style.expandableHeaderNonLastColumnCss,
       ...isGroupHeader && style.groupHeaderCss,
+      ...columnStripeColor && stripedColumnIds?.has(column2.id) && {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": (0, import_runtime24.maybeCssVar)(maybeCssVar(columnStripeColor))
+        }]
+      },
+      // A leaf background is explicit and wins over the stripe.
       ...column2.bgColor && {
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": (0, import_runtime24.maybeCssVar)(column2.bgColor)
@@ -14624,6 +14635,7 @@ function GridTable(props) {
   const columns = useComputed(() => {
     return tableState.visibleColumns;
   }, [tableState]);
+  const stripedColumnIds = (0, import_react51.useMemo)(() => style.columnStripeColor ? getStripedColumnIds(columns) : void 0, [columns, style.columnStripeColor]);
   tableState.initSortState(props.sorting, columns);
   const {
     getCount
@@ -14753,7 +14765,8 @@ function GridTable(props) {
       resizedWidths,
       setResizedWidth: handleColumnResize,
       disableColumnResizing,
-      calculatePreviewWidth
+      calculatePreviewWidth,
+      stripedColumnIds
     } }, rs.key);
     const makeCompanionRow = (rs, resolved, isFirstBodyRow, isLastBodyRow) => {
       const levelStyle = style.levels && (typeof style.levels === "function" ? style.levels(rs.level) : style.levels[rs.level]);
@@ -14804,7 +14817,7 @@ function GridTable(props) {
       visibleDataRows2 = visibleDataRows2.slice(0, filterMaxRows);
     }
     return [tableHeadRows2, visibleDataRows2, keptSelectedRows2, pinnedRows2, tooManyClientSideRows2];
-  }, [as, api, style, rowStyles, maybeStyle, columnSizes, columns.length, getCount, filterMaxRows, cardHeight, cardImageFit]);
+  }, [as, api, style, rowStyles, maybeStyle, columnSizes, columns.length, stripedColumnIds, getCount, filterMaxRows, cardHeight, cardImageFit]);
   if (props.rowLookup) props.rowLookup.current = api.lookup;
   const noData = visibleDataRows.length === 0 && pinnedRows.length === 0;
   const firstRowMessage = noData && !emptyState && fallbackMessage || tooManyClientSideRows && "Hiding some rows, use filter..." || infoMessage;
@@ -15213,6 +15226,32 @@ function useColumnMeasureWidth() {
   return void 0;
 }
 var CARD_MIN_WIDTH_PX = 330;
+function getStripedColumnIds(columns) {
+  const ids = /* @__PURE__ */ new Set();
+  const contentColumns = columns.filter(isContentColumn);
+  if (contentColumns.some((column2) => column2.groupId)) {
+    const firstGroupStripes = contentColumns.findIndex((column2) => column2.groupId) > 0;
+    const ordinals = /* @__PURE__ */ new Map();
+    for (const column2 of contentColumns) {
+      const {
+        groupId
+      } = column2;
+      if (!groupId) continue;
+      let ordinal = ordinals.get(groupId);
+      if (ordinal === void 0) {
+        ordinal = ordinals.size;
+        ordinals.set(groupId, ordinal);
+      }
+      const stripes = firstGroupStripes ? ordinal % 2 === 0 : ordinal % 2 === 1;
+      if (stripes) ids.add(column2.id);
+    }
+    return ids;
+  }
+  contentColumns.forEach((column2, ordinal) => {
+    if (ordinal % 2 === 1) ids.add(column2.id);
+  });
+  return ids;
+}
 
 // src/components/ToggleChip.tsx
 var import_runtime44 = require("@homebound/truss/runtime");