@homebound/beam 4.40.1 → 4.42.0

package/dist/index.d.cts

@@ -5974,6 +5974,8 @@ type RowProps<R extends Kinded> = {
     setResizedWidth: (columnId: string, width: number, columnIndex: number) => void;
     disableColumnResizing: boolean;
     calculatePreviewWidth: (columnId: string, newWidth: number, columnIndex: number) => number;
+    /** Column ids that take `columnStriping`. Stable until the visible columns change. */
+    stripedColumnIds?: ReadonlySet<string>;
     onDragStart?: (row: GridDataRow<R>, event: React__default.DragEvent<HTMLElement>) => void;
     onDragEnd?: (row: GridDataRow<R>, event: React__default.DragEvent<HTMLElement>) => void;
     onDrop?: (row: GridDataRow<R>, event: React__default.DragEvent<HTMLElement>) => void;
@@ -6324,6 +6326,8 @@ type GridStyle = {
     });
     /** Allows for customization of the background color used to denote an "active" row */
     activeBgColor?: BeamColor;
+    /** Resolved `columnStriping` color. */
+    columnStripeColor?: BeamColor;
     /** Defines styles for the group row which holds the selected rows that have been filtered out */
     keptGroupRowCss?: Properties;
     /** Defines styles for the last row `keptGroup` to provide separation from the rest of the table */
@@ -6356,6 +6360,11 @@ type GridStyleDef = {
     highlightOnHover?: boolean;
     /** Rounds the top corners of the first head-row cells. Defaults to true */
     roundedHeader?: boolean;
+    /**
+     * Zebra on the 2nd, 4th, 6th… content column. A leading group is striped only when a content column precedes it.
+     * Select, collapse, and gutter columns are skipped. A column `bgColor` wins.
+     */
+    columnStriping?: BeamColor;
 };
 declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 /** Defines row-specific styling for each given row `kind` in `R` */
@@ -9533,6 +9542,8 @@ type GridTableLayoutProps<F extends Record<string, unknown>, R extends Kinded, X
     /** Shows "N Rows Selected · Clear" before the columns selector; Clear deselects every row. */
     selectionSummary?: boolean;
     hideEditColumns?: boolean;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     totalCount?: number;
     /** When true, shows a view toggle button and renders the table with `as="card"` when in card view. */
     withCardView?: boolean;
@@ -10334,8 +10345,6 @@ declare function useSetupColumnSizes<R extends Kinded>(style: GridStyle, columns
 declare function groupColumns<T extends Kinded>(opts: {
     id: string;
     header: string;
-    /** Paints every cell in the group. A leaf's own `bgColor` wins. */
-    bgColor?: BeamColor;
     columns: Array<Omit<GridColumn<T>, "groupHeader">>;
 }): GridColumn<T>[];
 /** Provides default styling for a GridColumn representing a Date. */
@@ -11030,6 +11039,8 @@ interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose">
 type EditColumnsButtonProps<R extends Kinded> = {
     columns: GridColumn<R>[];
     api: GridTableApi<R>;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     defaultOpen?: boolean;
 } & Pick<OverlayTriggerProps, "placement" | "disabled" | "tooltip">;
 declare function EditColumnsButton<R extends Kinded>(props: EditColumnsButtonProps<R>): React$1.JSX.Element;

package/dist/index.d.ts

@@ -5974,6 +5974,8 @@ type RowProps<R extends Kinded> = {
     setResizedWidth: (columnId: string, width: number, columnIndex: number) => void;
     disableColumnResizing: boolean;
     calculatePreviewWidth: (columnId: string, newWidth: number, columnIndex: number) => number;
+    /** Column ids that take `columnStriping`. Stable until the visible columns change. */
+    stripedColumnIds?: ReadonlySet<string>;
     onDragStart?: (row: GridDataRow<R>, event: React__default.DragEvent<HTMLElement>) => void;
     onDragEnd?: (row: GridDataRow<R>, event: React__default.DragEvent<HTMLElement>) => void;
     onDrop?: (row: GridDataRow<R>, event: React__default.DragEvent<HTMLElement>) => void;
@@ -6324,6 +6326,8 @@ type GridStyle = {
     });
     /** Allows for customization of the background color used to denote an "active" row */
     activeBgColor?: BeamColor;
+    /** Resolved `columnStriping` color. */
+    columnStripeColor?: BeamColor;
     /** Defines styles for the group row which holds the selected rows that have been filtered out */
     keptGroupRowCss?: Properties;
     /** Defines styles for the last row `keptGroup` to provide separation from the rest of the table */
@@ -6356,6 +6360,11 @@ type GridStyleDef = {
     highlightOnHover?: boolean;
     /** Rounds the top corners of the first head-row cells. Defaults to true */
     roundedHeader?: boolean;
+    /**
+     * Zebra on the 2nd, 4th, 6th… content column. A leading group is striped only when a content column precedes it.
+     * Select, collapse, and gutter columns are skipped. A column `bgColor` wins.
+     */
+    columnStriping?: BeamColor;
 };
 declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 /** Defines row-specific styling for each given row `kind` in `R` */
@@ -9533,6 +9542,8 @@ type GridTableLayoutProps<F extends Record<string, unknown>, R extends Kinded, X
     /** Shows "N Rows Selected · Clear" before the columns selector; Clear deselects every row. */
     selectionSummary?: boolean;
     hideEditColumns?: boolean;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     totalCount?: number;
     /** When true, shows a view toggle button and renders the table with `as="card"` when in card view. */
     withCardView?: boolean;
@@ -10334,8 +10345,6 @@ declare function useSetupColumnSizes<R extends Kinded>(style: GridStyle, columns
 declare function groupColumns<T extends Kinded>(opts: {
     id: string;
     header: string;
-    /** Paints every cell in the group. A leaf's own `bgColor` wins. */
-    bgColor?: BeamColor;
     columns: Array<Omit<GridColumn<T>, "groupHeader">>;
 }): GridColumn<T>[];
 /** Provides default styling for a GridColumn representing a Date. */
@@ -11030,6 +11039,8 @@ interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose">
 type EditColumnsButtonProps<R extends Kinded> = {
     columns: GridColumn<R>[];
     api: GridTableApi<R>;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     defaultOpen?: boolean;
 } & Pick<OverlayTriggerProps, "placement" | "disabled" | "tooltip">;
 declare function EditColumnsButton<R extends Kinded>(props: EditColumnsButtonProps<R>): React$1.JSX.Element;

package/dist/index.js

@@ -6440,7 +6440,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]) {
@@ -6749,6 +6750,9 @@ function memoizedTableStyles() {
             paddingTop: "pt_4px",
             paddingBottom: "pb_4px"
           }
+        } : {},
+        ...columnStriping ? {
+          columnStripeColor: columnStriping
         } : {}
       };
     }
@@ -6857,7 +6861,8 @@ var gridStyleDefKeysRecord = {
   vAlign: true,
   cellTypography: true,
   highlightOnHover: true,
-  roundedHeader: true
+  roundedHeader: true,
+  columnStriping: true
 };
 function isGridStyleDef(style) {
   const keys = safeKeys(style);
@@ -9102,7 +9107,6 @@ function groupColumns(opts) {
   const {
     id,
     header,
-    bgColor,
     columns
   } = opts;
   return columns.map((column2) => ({
@@ -9112,7 +9116,6 @@ function groupColumns(opts) {
     groupId: id,
     groupLabel: header,
     groupHeader: header,
-    bgColor: column2.bgColor ?? bgColor,
     name: prefixGroupColumnName(header, column2.name)
   }));
 }
@@ -10463,6 +10466,7 @@ function RowImpl(props) {
     setResizedWidth,
     disableColumnResizing = true,
     calculatePreviewWidth,
+    stripedColumnIds,
     onDragStart,
     onDragEnd,
     onDrop,
@@ -10477,6 +10481,7 @@ function RowImpl(props) {
     api,
     visibleColumns: columns
   } = tableState;
+  const columnStripeColor = style.columnStripeColor;
   const {
     row,
     api: rowApi,
@@ -10674,6 +10679,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": maybeCssVar_12(maybeCssVar(columnStripeColor))
+        }]
+      },
+      // A leaf background is explicit and wins over the stripe.
       ...column2.bgColor && {
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": maybeCssVar_12(column2.bgColor)
@@ -14127,6 +14138,7 @@ function GridTable(props) {
   const columns = useComputed(() => {
     return tableState.visibleColumns;
   }, [tableState]);
+  const stripedColumnIds = useMemo16(() => style.columnStripeColor ? getStripedColumnIds(columns) : void 0, [columns, style.columnStripeColor]);
   tableState.initSortState(props.sorting, columns);
   const {
     getCount
@@ -14256,7 +14268,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]);
@@ -14307,7 +14320,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;
@@ -14716,6 +14729,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
 import { trussProps as trussProps34 } from "@homebound/truss/runtime";
@@ -25139,7 +25178,8 @@ function EditColumnsButton(props) {
     defaultOpen,
     disabled,
     columns,
-    api
+    api,
+    shareColumnVisibility = false
   } = props;
   const state = useMenuTriggerState4({
     defaultOpen
@@ -25154,26 +25194,13 @@ function EditColumnsButton(props) {
   const {
     sm
   } = useBreakpoint();
-  const options = useMemo42(() => columns.filter((column2) => column2.canHide).filter((column2) => {
-    if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
-      console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
-      return false;
-    }
-    return true;
-  }).map((column2) => ({
-    label: column2.name,
-    value: column2.id,
-    tooltip: column2.tooltip
-  })), [columns]);
+  const options = useMemo42(() => buildColumnOptions(columns, shareColumnVisibility), [columns, shareColumnVisibility]);
   const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
   const setSelectedValues = useCallback27((ids) => {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
-  const hasHiddenColumn = useMemo42(() => {
-    const selectableOptionValues = options.map((option) => option.value);
-    return selectableOptionValues.some((option) => !selectedValues.includes(option));
-  }, [options, selectedValues]);
+  const hasHiddenColumn = useMemo42(() => options.some((option) => option.ids.some((id) => !selectedValues.includes(id))), [options, selectedValues]);
   return /* @__PURE__ */ jsx179(OverlayTrigger, { ...props, trigger: sm ? {
     icon: hasHiddenColumn ? "columnsBadged" : "columns",
     variant: "outline"
@@ -25201,7 +25228,7 @@ function EditColumnsButton(props) {
         /* @__PURE__ */ jsx179("span", { className: "fw4 fz_14px lh_20px mw0", children: option.label }),
         option.tooltip ? /* @__PURE__ */ jsx179(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
       ] }),
-      /* @__PURE__ */ jsx179(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
+      /* @__PURE__ */ jsx179(Switch, { compact: true, selected: option.ids.every((id) => selectedValues.includes(id)), onChange: (value) => setSelectedValues(value ? [...selectedValues, ...option.ids] : selectedValues.filter((id) => !option.ids.includes(id))), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
     /* @__PURE__ */ jsx179("div", { ...trussProps105({
       display: "df",
@@ -25218,6 +25245,54 @@ function EditColumnsButton(props) {
     }), children: /* @__PURE__ */ jsx179(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
+function buildColumnOptions(columns, shareColumnVisibility) {
+  const hideable = columns.filter((column2) => {
+    if (!column2.canHide) return false;
+    if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
+      console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
+      return false;
+    }
+    return true;
+  });
+  if (!shareColumnVisibility) {
+    return hideable.map((column2) => ({
+      label: column2.name,
+      value: column2.id,
+      ids: [column2.id],
+      tooltip: column2.tooltip
+    }));
+  }
+  const byLabel = /* @__PURE__ */ new Map();
+  const warnedLabels = /* @__PURE__ */ new Set();
+  for (const column2 of hideable) {
+    const label = leafColumnName(column2);
+    const existing = byLabel.get(label);
+    if (!existing) {
+      byLabel.set(label, {
+        label,
+        value: column2.id,
+        ids: [column2.id],
+        tooltip: column2.tooltip
+      });
+      continue;
+    }
+    existing.ids.push(column2.id);
+    if (existing.tooltip !== column2.tooltip && !warnedLabels.has(label)) {
+      warnedLabels.add(label);
+      console.warn(`Edit Columns columns labeled "${label}" have different tooltips. Using the first.`);
+    }
+  }
+  return [...byLabel.values()];
+}
+function leafColumnName(column2) {
+  const {
+    name,
+    groupLabel
+  } = column2;
+  const prefix = groupLabel ? `${groupLabel}: ` : void 0;
+  if (name && prefix && name.startsWith(prefix)) return name.slice(prefix.length);
+  return name;
+}
 function closeMenuOnClickTooltip(tooltip, closeMenu) {
   if (typeof tooltip !== "function") return tooltip;
   return () => {
@@ -25442,6 +25517,7 @@ function GridTableLayoutActionsComponent(props) {
     searchProps,
     hasHideableColumns,
     columns,
+    shareColumnVisibility,
     api,
     withCardView,
     view,
@@ -25535,7 +25611,7 @@ function GridTableLayoutActionsComponent(props) {
       ] }),
       (hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ jsxs96("div", { className: "df aic g_12px", children: [
         selectionSummary && api && /* @__PURE__ */ jsx184(SelectionSummaryAction, { api, numberOnly: sm }),
-        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx184(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx184(EditColumnsButton, { columns, api, shareColumnVisibility, tooltip: "Display columns" }),
         withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx184(ViewToggleButton, { view, onChange: setView }),
         !!actions?.length && /* @__PURE__ */ jsx184(HeaderActions, { actions, ...testId.actions })
       ] })
@@ -26414,6 +26490,7 @@ function GridTableLayoutComponent(props) {
     actions,
     selectionSummary = false,
     hideEditColumns = false,
+    shareColumnVisibility = false,
     withCardView,
     defaultView = "list",
     emptyFallback: layoutEmptyFallback,
@@ -26468,6 +26545,7 @@ function GridTableLayoutComponent(props) {
       searchProps: filterSearchProps,
       hasHideableColumns,
       columns,
+      shareColumnVisibility,
       api,
       withCardView,
       view,