@homebound/beam 4.46.1 → 4.47.1

package/dist/index.cjs

@@ -245,6 +245,7 @@ __export(index_exports, {
   actionColumn: () => actionColumn,
   applyRowFn: () => applyRowFn,
   assignDefaultColumnIds: () => assignDefaultColumnIds,
+  beamCollapseColumnId: () => beamCollapseColumnId,
   beamEnvironmentBannerLayoutHeightVar: () => beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar: () => beamFloatingRightOffsetVar,
   beamLayoutContentPaddingXVar: () => beamLayoutContentPaddingXVar,
@@ -255,6 +256,7 @@ __export(index_exports, {
   beamPageHeaderLayoutHeightVar: () => beamPageHeaderLayoutHeightVar,
   beamRightPaneContentMinVar: () => beamRightPaneContentMinVar,
   beamRightPaneWidthVar: () => beamRightPaneWidthVar,
+  beamSelectColumnId: () => beamSelectColumnId,
   beamSideNavLayoutWidthVar: () => beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar: () => beamTableActionsHeightVar,
   beamWorkflowLayoutFooterHeightVar: () => beamWorkflowLayoutFooterHeightVar,
@@ -299,7 +301,9 @@ __export(index_exports, {
   chipHoverOnlyStyles: () => chipHoverOnlyStyles,
   chipHoverStyles: () => chipHoverStyles,
   collapseColumn: () => collapseColumn,
+  collapseTogglePx: () => collapseTogglePx,
   column: () => column,
+  columnWidthKeyVersion: () => columnWidthKeyVersion,
   condensedStyle: () => condensedStyle,
   contrastDataTheme: () => contrastDataTheme,
   createRowLookup: () => createRowLookup,
@@ -327,6 +331,7 @@ __export(index_exports, {
   fieldCell: () => fieldCell,
   fieldColumn: () => fieldColumn,
   filterTestIdPrefix: () => filterTestIdPrefix,
+  firstContentControlPx: () => firstContentControlPx,
   formatDate: () => formatDate,
   formatDateRange: () => formatDateRange,
   formatPlainDate: () => formatPlainDate,
@@ -357,6 +362,7 @@ __export(index_exports, {
   isListBoxSection: () => isListBoxSection,
   isPersistentItem: () => isPersistentItem,
   isPersistentKey: () => isPersistentKey,
+  isRowControlColumn: () => isRowControlColumn,
   isValidDate: () => isValidDate,
   joinDocumentTitleSegments: () => joinDocumentTitleSegments,
   layoutGutterLeftColumnId: () => layoutGutterLeftColumnId,
@@ -395,6 +401,7 @@ __export(index_exports, {
   rightPaneOpenActions: () => rightPaneOpenActions,
   rightPaneOpenStore: () => rightPaneOpenStore,
   rowClickRenderFn: () => rowClickRenderFn,
+  rowControlColumns: () => rowControlColumns,
   rowLinkRenderFn: () => rowLinkRenderFn,
   selectColumn: () => selectColumn,
   setDefaultStyle: () => setDefaultStyle,
@@ -403,6 +410,7 @@ __export(index_exports, {
   setRunningInJest: () => setRunningInJest,
   shouldShowEnvironmentBanner: () => shouldShowEnvironmentBanner,
   shouldSkipScrollTo: () => shouldSkipScrollTo,
+  showsCollapseToggle: () => showsCollapseToggle,
   simpleDataRows: () => simpleDataRows,
   simpleGroupHeader: () => simpleGroupHeader,
   simpleHeader: () => simpleHeader,
@@ -417,6 +425,7 @@ __export(index_exports, {
   switchHoverStyles: () => switchHoverStyles,
   switchSelectedHoverStyles: () => switchSelectedHoverStyles,
   toContent: () => toContent,
+  toLayoutColumns: () => toLayoutColumns,
   toLimitAndOffset: () => toLimitAndOffset,
   toPageNumberSize: () => toPageNumberSize,
   toggleFilter: () => toggleFilter,
@@ -6973,38 +6982,14 @@ function memoizedTableStyles() {
               }]
             }
           },
-          firstContentColumn: {
-            ...{
-              fontWeight: "fw4",
-              fontSize: "fz_14px",
-              lineHeight: "lh_20px"
-            },
-            ...allWhite && {
-              fontWeight: "fw6",
-              fontSize: "fz_14px",
-              lineHeight: "lh_20px",
+          // Hierarchy type and indent are applied per row. All-white group rows keep a primary label color.
+          ...allWhite ? {
+            firstContentColumn: {
               color: ["color_var", {
                 "--color": "var(--b-on-surface)"
               }]
             }
-          }
-        },
-        2: {
-          firstContentColumn: {
-            fontWeight: "fw4",
-            fontSize: "fz_12px",
-            lineHeight: "lh_16px",
-            paddingLeft: "pl3"
-          }
-        },
-        // Add 12 more pixels of padding for each level of nesting
-        3: {
-          firstContentColumn: {
-            fontWeight: "fw4",
-            fontSize: "fz_12px",
-            lineHeight: "lh_16px",
-            paddingLeft: "pl_36px"
-          }
+          } : {}
         }
       };
       const defaultLevels = {
@@ -7192,11 +7177,12 @@ function memoizedTableStyles() {
             "--borderColor": "var(--b-surface-separator)"
           }]
         } : void 0,
+        // One corner each. A single column is both the first and last cell, and the shorthand would replace the other side.
         firstRowFirstCellCss: roundedHeader ? {
-          borderRadius: "bra_8px_0_0_0"
+          borderTopLeftRadius: "btlr_8px"
         } : void 0,
         firstRowLastCellCss: roundedHeader ? {
-          borderRadius: "bra_0_8px_0_0"
+          borderTopRightRadius: "btrr_8px"
         } : void 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.
@@ -7212,10 +7198,10 @@ function memoizedTableStyles() {
         },
         // Only apply bottom corner radii to the final body-row cells when using `bordered`.
         lastRowFirstCellCss: bordered ? {
-          borderRadius: "bra_0_0_0_8px"
+          borderBottomLeftRadius: "bblr_8px"
         } : void 0,
         lastRowLastCellCss: bordered ? {
-          borderRadius: "bra_0_0_8px_0"
+          borderBottomRightRadius: "bbrr_8px"
         } : void 0,
         presentationSettings: {
           borderless: true,
@@ -7269,6 +7255,42 @@ var tableRowPrintBreakCss = {
   pageBreakAfter: "pgba_auto",
   pageBreakInside: "pgbi_avoid"
 };
+var hierarchyIndentPx = 28;
+var tableCellPaddingXPx = 12;
+function hierarchyIndentPaddingPx(level) {
+  if (level <= 0) return void 0;
+  return tableCellPaddingXPx + hierarchyIndentPx * level;
+}
+function hierarchyFirstContentCss(opts) {
+  const {
+    level,
+    skipIndent,
+    maxLevel
+  } = opts;
+  const paddingLeft = skipIndent ? void 0 : hierarchyIndentPaddingPx(level);
+  const type = hierarchyLevelType(level, maxLevel);
+  if (!type && paddingLeft === void 0) return void 0;
+  return {
+    ...type ?? {},
+    ...paddingLeft !== void 0 ? {
+      paddingLeft: ["pl_var", {
+        "--paddingLeft": `${paddingLeft}px`
+      }]
+    } : {}
+  };
+}
+function hierarchyLevelType(level, maxLevel) {
+  if (level >= maxLevel) return void 0;
+  return level === 0 ? {
+    fontWeight: "fw6",
+    fontSize: "fz_14px",
+    lineHeight: "lh_20px"
+  } : {
+    fontWeight: "fw6",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px"
+  };
+}
 var loadingTableCss = {
   opacity: "o50",
   pointerEvents: "pen"
@@ -7770,10 +7792,7 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 var __maybeInc4 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
-function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isGroupHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
-  if (isKeptSelectedRow && column2.id === "beamCollapseColumn") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
-  }
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isGroupHeader, isExpandable, minStickyLeftOffset) {
   let content2 = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
   if (typeof content2 === "function") {
     content2 = content2();
@@ -8800,6 +8819,8 @@ var RowStates = class {
   keptGroupRow;
   /** The first level of rows, i.e. not the header (or kept group), but the totals + top-level children. */
   topRows = [];
+  /** Deepest data-row level from the latest `setRows`. `0` when every body row is top-level. */
+  maxNestingLevel = 0;
   constructor(table) {
     this.table = table;
     this.header = this.createHeaderRow();
@@ -8827,7 +8848,8 @@ var RowStates = class {
     const map = this.map;
     const seenIds = /* @__PURE__ */ new Set();
     const maybeKept = new Set(this.map.values());
-    function addRowAndChildren(parent, row) {
+    let maxNestingLevel = 0;
+    function addRowAndChildren(parent, row, level) {
       const key = row.id;
       if (seenIds.has(key)) {
         throw new Error(`Duplicate row id ${key}`);
@@ -8844,12 +8866,15 @@ var RowStates = class {
         state.removed = false;
         maybeKept.delete(state);
       }
-      state.children = row.children?.map((child) => addRowAndChildren(state, child));
+      const reserved = reservedRowKinds.includes(row.kind);
+      if (!reserved && level > maxNestingLevel) maxNestingLevel = level;
+      state.children = row.children?.map((child) => addRowAndChildren(state, child, reserved ? level : level + 1));
       return state;
     }
     const headerRow = rows.find((r) => r.kind === HEADER);
     this.header.row = headerRow || missingHeader;
-    this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(this.header, row));
+    this.topRows = rows.filter((row) => row !== headerRow).map((row) => addRowAndChildren(this.header, row, 0));
+    this.maxNestingLevel = maxNestingLevel;
     this.header.children = [this.keptGroupRow, ...this.topRows];
     for (const state of maybeKept) state.markRemoved();
     if (this.topRows.some((rs) => !reservedRowKinds.includes(rs.row.kind))) {
@@ -9051,6 +9076,8 @@ var TableState = class {
   persistCollapse;
   // The current list of rows, basically a useRef.current. Only shallow reactive.
   rows = [];
+  /** Deepest data-row level, set with the rows. `0` when the table has a single level. Every row's type is chosen from this. */
+  maxNestingLevel = 0;
   // The current list of columns, basically a useRef.current. Only ref reactive.
   columns = [];
   api;
@@ -9148,6 +9175,7 @@ var TableState = class {
   setRows(rows) {
     this.rowStates.setRows(rows);
     this.rows = rows;
+    this.maxNestingLevel = this.rowStates.maxNestingLevel;
   }
   setColumns(columns, visibleColumnsStorageKey) {
     if (columns !== this.columns) {
@@ -9164,10 +9192,22 @@ var TableState = class {
   get visibleRows() {
     return this.rowStates.visibleRows;
   }
-  /** Returns visible columns, i.e. those that are visible + any expanded children. */
+  /** Visible columns, including any expanded children. */
   get visibleColumns() {
     return this.columnStates.allVisibleColumns("web").map((cs) => cs.column);
   }
+  /** Visible columns that take a layout slot. Select and collapse are left out. */
+  get layoutColumns() {
+    return toLayoutColumns(this.visibleColumns);
+  }
+  /** Select and collapse, when those columns are visible. Drawn in the first content cell. */
+  get controlColumns() {
+    return rowControlColumns(this.visibleColumns);
+  }
+  /** Extra width the first content column needs for the in-cell checkbox and chevron. */
+  get controlWidthPx() {
+    return firstContentControlPx(this.controlColumns);
+  }
   /** Returns visible columns, i.e. those that are visible + any expanded children. */
   get visibleCsvColumns() {
     return this.columnStates.allVisibleColumns("csv").map((cs) => cs.column);
@@ -9286,23 +9326,23 @@ function deriveSortState(currentSortState, clickedKey, initialSortState) {
 
 // src/components/Table/components/CollapseToggle.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+function showsCollapseToggle(row, isKeptSelectedRow = false) {
+  if (isKeptSelectedRow) return false;
+  if (row.kind === HEADER || row.kind === KEPT_GROUP) return true;
+  return !!row.children?.length;
+}
 function CollapseToggle(props) {
   const { row, compact } = props;
   const { tableState } = (0, import_react19.useContext)(TableStateContext);
   const isCollapsed = useComputed(() => tableState.isCollapsed(row.id), [tableState]);
   const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
   const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
-  const isHeader = row.kind === HEADER;
-  const isKeptGroup = row.kind === KEPT_GROUP;
-  const hasChildren = row.children ? row.children.length > 0 : false;
-  if (!isHeader && !isKeptGroup && !hasChildren) {
-    return null;
-  }
+  if (!showsCollapseToggle(row)) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     IconButton,
     {
       onClick: () => tableState.toggleCollapsed(row.id),
-      icon: isHeader ? headerIconKey : iconKey,
+      icon: row.kind === HEADER ? headerIconKey : iconKey,
       compact
     }
   );
@@ -9675,14 +9715,14 @@ function actionColumn(columnDef) {
     wrapAction: false
   };
 }
+var beamSelectColumnId = "beamSelectColumn";
+var beamCollapseColumnId = "beamCollapseColumn";
 function selectColumn(columnDef) {
   const base = {
     ...nonKindDefaults(),
-    id: "beamSelectColumn",
+    id: beamSelectColumnId,
     clientSideSort: false,
     align: "center",
-    // Defining `w: 40px` to accommodate for the `16px` wide checkbox and `12px` of padding on either side.
-    w: "40px",
     wrapAction: false,
     isAction: true,
     // Select Column should not display the select toggle for group, expandable, or totals header rows.
@@ -9703,11 +9743,9 @@ function selectColumn(columnDef) {
 function collapseColumn(columnDef) {
   const base = {
     ...nonKindDefaults(),
-    id: "beamCollapseColumn",
+    id: beamCollapseColumnId,
     clientSideSort: false,
     align: "center",
-    // Defining `w: 38px` based on the designs
-    w: "38px",
     wrapAction: false,
     isAction: true,
     // Collapse Column should not display the collapse toggle for group, expandable, or totals header rows.
@@ -9718,10 +9756,9 @@ function collapseColumn(columnDef) {
   };
   return newMethodMissingProxy(base, (key) => {
     return (data, {
-      row,
-      level
+      row
     }) => ({
-      content: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CollapseToggle, { row, compact: level > 0 })
+      content: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CollapseToggle, { row })
     });
   });
 }
@@ -9755,6 +9792,37 @@ var layoutGutterRightColumnId = "beamLayoutGutterRight";
 function isContentColumn(column2) {
   return !column2.isAction && !column2.isLayoutGutter;
 }
+function isRowControlColumn(column2) {
+  return column2.id === beamSelectColumnId || column2.id === beamCollapseColumnId;
+}
+function rowControlColumns(columns) {
+  const collapse = columns.find((column2) => column2.id === beamCollapseColumnId);
+  const select = columns.find((column2) => column2.id === beamSelectColumnId);
+  return [collapse, select].filter((column2) => !!column2);
+}
+var collapseTogglePx = 28;
+var collapseControlPx = collapseTogglePx + 8;
+var selectControlPx = 24;
+function firstContentControlPx(columns) {
+  return columns.reduce((width2, column2) => {
+    if (column2.id === beamCollapseColumnId) return width2 + collapseControlPx;
+    if (column2.id === beamSelectColumnId) return width2 + selectControlPx;
+    return width2;
+  }, 0);
+}
+function toLayoutColumns(columns) {
+  const controlSticky = columns.find((column2) => isRowControlColumn(column2) && column2.sticky)?.sticky;
+  const layout = columns.filter((column2) => !isRowControlColumn(column2));
+  if (!controlSticky) return layout;
+  const index = layout.findIndex((column2) => isContentColumn(column2));
+  if (index < 0 || layout[index].sticky) return layout;
+  const next = layout.slice();
+  next[index] = {
+    ...layout[index],
+    sticky: controlSticky
+  };
+  return next;
+}
 function layoutGutterColumn(side, sticky, gutterPx) {
   const id = side === "left" ? layoutGutterLeftColumnId : layoutGutterRightColumnId;
   const base = {
@@ -9839,51 +9907,58 @@ function resolveTableContentWidth(tableWidth, columnSizes, minWidthPx = 0) {
   if (sum === null) return void 0;
   return Math.max(minWidthPx, sum);
 }
-function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths) {
+function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths, controlPx = 0) {
+  const firstContentIndex = columns.findIndex((column2) => isContentColumn(column2));
+  const firstContentId = firstContentIndex >= 0 ? columns[firstContentIndex].id : void 0;
+  const controlBonus = firstContentId !== void 0 && resizedWidths?.[firstContentId] === void 0 ? controlPx : 0;
   const {
     claimedPercentages,
     claimedPixels,
     totalFr
-  } = columns.reduce((acc, {
-    id,
-    w: _w,
-    expandedWidth
-  }) => {
-    const resizedWidth = resizedWidths?.[id];
-    const w = resizedWidth !== void 0 ? `${resizedWidth}px` : expandedColumnIds.includes(id) && expandedWidth !== void 0 ? expandedWidth : _w;
-    if (typeof w === "undefined") {
-      return {
-        ...acc,
-        totalFr: acc.totalFr + 1
-      };
-    } else if (typeof w === "number") {
-      return {
-        ...acc,
-        totalFr: acc.totalFr + w
-      };
-    } else if (w.endsWith("fr")) {
-      return {
-        ...acc,
-        totalFr: acc.totalFr + Number(w.replace("fr", ""))
-      };
-    } else if (w.endsWith("px")) {
-      return {
-        ...acc,
-        claimedPixels: acc.claimedPixels + Number(w.replace("px", ""))
-      };
-    } else if (w.endsWith("%")) {
-      return {
-        ...acc,
-        claimedPercentages: acc.claimedPercentages + Number(w.replace("%", ""))
-      };
-    } else {
-      throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
+  } = columns.reduce(
+    (acc, {
+      id,
+      w: _w,
+      expandedWidth
+    }) => {
+      const resizedWidth = resizedWidths?.[id];
+      const w = resizedWidth !== void 0 ? `${resizedWidth}px` : expandedColumnIds.includes(id) && expandedWidth !== void 0 ? expandedWidth : _w;
+      if (typeof w === "undefined") {
+        return {
+          ...acc,
+          totalFr: acc.totalFr + 1
+        };
+      } else if (typeof w === "number") {
+        return {
+          ...acc,
+          totalFr: acc.totalFr + w
+        };
+      } else if (w.endsWith("fr")) {
+        return {
+          ...acc,
+          totalFr: acc.totalFr + Number(w.replace("fr", ""))
+        };
+      } else if (w.endsWith("px")) {
+        return {
+          ...acc,
+          claimedPixels: acc.claimedPixels + Number(w.replace("px", ""))
+        };
+      } else if (w.endsWith("%")) {
+        return {
+          ...acc,
+          claimedPercentages: acc.claimedPercentages + Number(w.replace("%", ""))
+        };
+      } else {
+        throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
+      }
+    },
+    // Count the control width in the claimed pixels so fr columns shrink, then add it onto the first content column once sizes are resolved.
+    {
+      claimedPercentages: 0,
+      claimedPixels: controlBonus,
+      totalFr: 0
     }
-  }, {
-    claimedPercentages: 0,
-    claimedPixels: 0,
-    totalFr: 0
-  });
+  );
   let adjustedClaimedPixels = claimedPixels;
   let adjustedTotalFr = totalFr;
   if (tableWidth) {
@@ -9935,25 +10010,34 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColum
       return fr(w, mw);
     }
   });
+  if (controlBonus > 0 && firstContentIndex >= 0) {
+    sizes2[firstContentIndex] = withControlWidth(sizes2[firstContentIndex], controlBonus);
+  }
   return sizes2;
 }
-function calcColumnLayout(columns, probeWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths, columnsMayExceedMeasure) {
+function withControlWidth(size, controlPx) {
+  if (size.endsWith("px")) {
+    return `${parseFloat(size) + controlPx}px`;
+  }
+  return `calc(${size} + ${controlPx}px)`;
+}
+function calcColumnLayout(columns, probeWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths, columnsMayExceedMeasure, controlPx = 0) {
   if (probeWidth === void 0) {
     return {
-      columnSizes: calcColumnSizes(columns, void 0, tableMinWidthPx, expandedColumnIds, resizedWidths),
+      columnSizes: calcColumnSizes(columns, void 0, tableMinWidthPx, expandedColumnIds, resizedWidths, controlPx),
       contentWidth: void 0
     };
   }
   if (!columnsMayExceedMeasure) {
     return {
-      columnSizes: calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths),
+      columnSizes: calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths, controlPx),
       contentWidth: probeWidth
     };
   }
-  let columnSizes = calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths);
+  let columnSizes = calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths, controlPx);
   const contentWidth = resolveTableContentWidth(probeWidth, columnSizes, tableMinWidthPx) ?? probeWidth;
   if (contentWidth > probeWidth + 1) {
-    columnSizes = calcColumnSizes(columns, contentWidth, tableMinWidthPx, expandedColumnIds, resizedWidths);
+    columnSizes = calcColumnSizes(columns, contentWidth, tableMinWidthPx, expandedColumnIds, resizedWidths, controlPx);
   }
   return {
     columnSizes,
@@ -10451,15 +10535,25 @@ function useColumnResizing(storageKey) {
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
 var import_use_debounce2 = require("use-debounce");
-function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, columnsMayExceedMeasure) {
+var columnWidthKeyVersion = 2;
+function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, columnsMayExceedMeasure, controlPx = 0) {
+  const widthStorageKey = visibleColumnsStorageKey && controlPx > 0 ? `${visibleColumnsStorageKey}__v${columnWidthKeyVersion}` : visibleColumnsStorageKey;
   const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
-    disableColumnResizing ? void 0 : visibleColumnsStorageKey
+    disableColumnResizing ? void 0 : widthStorageKey
   );
   const calculateImmediately = (0, import_react28.useRef)(true);
   const [tableWidth, setTableWidth] = (0, import_react28.useState)();
   const [contentWidth, setContentWidth] = (0, import_react28.useState)();
   const [columnSizes, setColumnSizes] = (0, import_react28.useState)(
-    () => calcColumnLayout(columns, void 0, style.minWidthPx, expandedColumnIds, resizedWidths, columnsMayExceedMeasure).columnSizes
+    () => calcColumnLayout(
+      columns,
+      void 0,
+      style.minWidthPx,
+      expandedColumnIds,
+      resizedWidths,
+      columnsMayExceedMeasure,
+      controlPx
+    ).columnSizes
   );
   const prevTableWidthRef = (0, import_react28.useRef)(tableWidth);
   const applyColumnLayout = (0, import_react28.useCallback)(
@@ -10470,13 +10564,14 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
         style.minWidthPx,
         expandedColumnIds,
         resizedWidths,
-        columnsMayExceedMeasure
+        columnsMayExceedMeasure,
+        controlPx
       );
       setTableWidth(probeWidth);
       setContentWidth(layout.contentWidth);
       setColumnSizes(layout.columnSizes);
     },
-    [columns, style.minWidthPx, expandedColumnIds, resizedWidths, columnsMayExceedMeasure]
+    [columns, style.minWidthPx, expandedColumnIds, resizedWidths, columnsMayExceedMeasure, controlPx]
   );
   (0, import_react28.useEffect)(() => {
     if (!prevTableWidthRef.current) {
@@ -10601,14 +10696,41 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content2, row, rowStyle, clas
     colSpan
   }, children: content2 }, key);
 };
-var headerRenderFn = (column2, as, colSpan) => (key, css2, content2, row, rowStyle, classNames, onClick, tooltip) => {
-  const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
-    ...css2
-  }), ...as === "table" && {
-    colSpan
-  }, children: content2 }, key);
-};
+function withRowControls(content2, controls, alignment, rowLink) {
+  if (controls.length === 0) return content2;
+  const justify = alignment === "center" ? "center" : alignment === "right" ? "flex-end" : "flex-start";
+  const body = rowLink ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_router_dom2.Link, { to: rowLink, ...(0, import_runtime21.mergeProps)(navLink, void 0, {
+    textDecoration: "tdn",
+    color: "c_unset",
+    display: "df",
+    alignItems: "aifs",
+    minWidth: "mw0",
+    flexShrink: "fs1"
+  }), children: content2 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "df aifs mw0 fs1", children: content2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime21.trussProps)({
+    display: "df",
+    alignItems: "aifs",
+    gap: "g_1",
+    width: "w100",
+    minWidth: "mw0",
+    justifyContent: ["jc_var", {
+      "--justifyContent": (0, import_runtime21.maybeCssVar)(justify)
+    }]
+  }), children: [
+    controls,
+    body
+  ] });
+}
+function headerRenderFn(column2, as, colSpan) {
+  return (key, css2, content2, row, rowStyle, classNames, onClick, tooltip) => {
+    const Cell = as === "table" ? "th" : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Cell, { ...(0, import_runtime21.mergeProps)(classNames, void 0, {
+      ...css2
+    }), ...as === "table" && {
+      colSpan
+    }, children: content2 }, key);
+  };
+}
 var rowLinkRenderFn = (as, colSpan) => (key, css2, content2, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
@@ -10990,9 +11112,10 @@ function RowImpl(props) {
     tableState
   } = (0, import_react33.useContext)(TableStateContext);
   const {
-    api,
-    visibleColumns: columns
+    api
   } = tableState;
+  const columns = tableState.layoutColumns;
+  const controlColumns = tableState.controlColumns;
   const columnStripeColor = style.columnStripeColor;
   const {
     row,
@@ -11019,6 +11142,7 @@ function RowImpl(props) {
   const rowStyleCellCss = maybeApplyFunction2(row, rowStyle?.cellCss);
   const levelStyle = style.levels && (typeof style.levels === "function" ? style.levels(level) : style.levels[level]);
   const levelIndent = levelStyle?.rowIndent;
+  const hasCollapseColumn = controlColumns.some((column2) => column2.id === beamCollapseColumnId);
   const containerCss = {
     ...{
       transition: "tsn_padding_0_25s_ease_in_out"
@@ -11087,8 +11211,8 @@ function RowImpl(props) {
       wrapAction = true
     } = column2;
     const isFirstContentColumn = isContentColumn(column2) && !foundFirstContentColumn;
+    foundFirstContentColumn ||= isFirstContentColumn;
     const applyFirstContentColumnStyles = !isHeader && isFirstContentColumn;
-    foundFirstContentColumn ||= applyFirstContentColumnStyles;
     if (hasExpandableHeader && (isHeader || isTotals)) {
       if (currentExpandedColumnCount === 0 && isExpanded) {
         currentExpandedColumnCount = numExpandedColumns;
@@ -11116,7 +11240,34 @@ function RowImpl(props) {
     const alignment = isGroupHeader ? "left" : getAlignment(column2, maybeContent);
     const justificationCss = getJustification(column2, maybeContent, as, alignment);
     const isExpandable = isFunction(column2.expandColumns) || column2.expandColumns && column2.expandColumns.length > 0 || column2.expandedWidth !== void 0;
-    const content2 = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column2, isExpandableHeader, isGroupHeader, isExpandable, minStickyLeftOffset, isKeptRow);
+    const content2 = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column2, isExpandableHeader, isGroupHeader, isExpandable, minStickyLeftOffset);
+    const controlNodes = isFirstContentColumn && controlColumns.length > 0 ? controlColumns.flatMap((controlColumn) => {
+      const maybeControl = applyRowFn(controlColumn, row, rowApi, level, isExpanded, dragData);
+      if (isEmptyContent(maybeControl)) return [];
+      if (controlColumn.id === beamCollapseColumnId && !showsCollapseToggle(row, isKeptRow)) {
+        return [/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": true, ...(0, import_runtime24.trussProps)({
+          flexShrink: "fs0",
+          display: "df",
+          alignItems: "aic",
+          height: "h_1lh",
+          minHeight: "mh0",
+          width: ["w_var", {
+            "--width": `${collapseTogglePx}px`
+          }]
+        }) }, controlColumn.id)];
+      }
+      return [/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        "span",
+        {
+          className: "fs0 df aic h_1lh mh0",
+          onClick: (event) => event.stopPropagation(),
+          children: toContent(maybeControl, isHeader, false, false, style, as, "left", controlColumn, isExpandableHeader, isGroupHeader, false, minStickyLeftOffset)
+        },
+        controlColumn.id
+      )];
+    }) : [];
+    const contentRowLink = controlNodes.length > 0 && wrapAction && rowStyle?.rowLink ? rowStyle.rowLink(row) : void 0;
+    const renderedContent = withRowControls(content2, controlNodes, alignment, contentRowLink);
     ensureClientSideSortValueIsSortable(sortOn, isHeader || isTotals || isExpandableHeader || isGroupHeader, column2, columnIndex, maybeContent);
     const maybeSticky = (isGridCellContent(maybeContent) && maybeContent.sticky || column2.sticky) ?? void 0;
     const maybeStickyColumnStyles = maybeSticky && columnSizes ? {
@@ -11213,6 +11364,13 @@ function RowImpl(props) {
       ...isBodyRow && levelStyle?.cellCss,
       // Level specific styling for the first content column
       ...applyFirstContentColumnStyles && levelStyle?.firstContentColumn,
+      // pl3 above is only for tables without a chevron. Hierarchy padding replaces it when we have a collapse column.
+      // Cards indent the whole row, so don't also pad the cell.
+      ...isBodyRow && applyFirstContentColumnStyles && hierarchyFirstContentCss({
+        level,
+        skipIndent: levelIndent !== void 0 || !hasCollapseColumn,
+        maxLevel: tableState.maxNestingLevel
+      }),
       // Apply any declarative column border styling after header/body defaults.
       ...getColumnBorderCss(column2.border, style),
       // The specific cell's css (if any from GridCellContent)
@@ -11265,8 +11423,8 @@ function RowImpl(props) {
     };
     const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : void 0;
     const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : void 0;
-    const renderFn = (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction ? rowLinkRenderFn(as, currentColspan) : isHeader || isTotals || isExpandableHeader || isGroupHeader ? headerRenderFn(column2, as, currentColspan) : rowStyle?.onClick && wrapAction ? rowClickRenderFn(as, api, currentColspan) : defaultRenderFn(as, currentColspan);
-    const cellElement = renderFn(columnIndex, cellCss, content2, row, rowStyle, void 0, cellOnClick, tooltip);
+    const renderFn = contentRowLink ? isHeader || isTotals || isExpandableHeader || isGroupHeader ? headerRenderFn(column2, as, currentColspan) : defaultRenderFn(as, currentColspan) : (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction ? rowLinkRenderFn(as, currentColspan) : isHeader || isTotals || isExpandableHeader || isGroupHeader ? headerRenderFn(column2, as, currentColspan) : rowStyle?.onClick && wrapAction ? rowClickRenderFn(as, api, currentColspan) : defaultRenderFn(as, currentColspan);
+    const cellElement = renderFn(columnIndex, cellCss, renderedContent, row, rowStyle, void 0, cellOnClick, tooltip);
     if (!disableColumnResizing && isHeader && columnIndex < columns.length - 1 && currentColspan === 1 && isContentColumn(column2)) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
@@ -11311,6 +11469,16 @@ function consecutiveGroupSpan(columns, columnIndex) {
   while (columns[columnIndex + span]?.groupId === groupId) span += 1;
   return span;
 }
+function isEmptyContent(maybeContent) {
+  if (maybeContent == null || maybeContent === false || maybeContent === "") return true;
+  if (maybeContent === emptyCell) return true;
+  if (isGridCellContent(maybeContent)) {
+    const content2 = maybeContent.content;
+    if (content2 == null || content2 === false || content2 === "") return true;
+    if (content2 === emptyCell.content) return true;
+  }
+  return false;
+}
 
 // src/components/Table/components/RowGroup.tsx
 var import_react34 = require("react");
@@ -14650,7 +14818,9 @@ 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]);
+  const layoutColumns = useComputed(() => tableState.layoutColumns, [tableState]);
+  const controlWidthPx = useComputed(() => tableState.controlWidthPx, [tableState]);
+  const stripedColumnIds = (0, import_react51.useMemo)(() => style.columnStripeColor ? getStripedColumnIds(layoutColumns) : void 0, [layoutColumns, style.columnStripeColor]);
   tableState.initSortState(props.sorting, columns);
   const {
     getCount
@@ -14664,14 +14834,14 @@ function GridTable(props) {
     setResizedWidth,
     setResizedWidths,
     resetColumnWidths
-  } = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, columnsMayExceedMeasure);
+  } = useSetupColumnSizes(style, layoutColumns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, columnsMayExceedMeasure, controlWidthPx);
   (0, import_react51.useEffect)(() => {
     api.resetColumnWidthsFn = !disableColumnResizing ? resetColumnWidths : void 0;
   }, [api, resetColumnWidths, disableColumnResizing]);
   const {
     handleColumnResize,
     calculatePreviewWidth
-  } = useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths);
+  } = useColumnResizeHandlers(layoutColumns, columnSizes, tableWidth, setResizedWidth, setResizedWidths);
   function recursiveSetDraggedOver(rows2, draggedOver) {
     rows2.forEach((r) => {
       tableState.maybeSetRowDraggedOver(r.id, draggedOver);
@@ -14786,7 +14956,7 @@ function GridTable(props) {
     const makeCompanionRow = (rs, resolved, isFirstBodyRow, isLastBodyRow) => {
       const levelStyle = style.levels && (typeof style.levels === "function" ? style.levels(rs.level) : style.levels[rs.level]);
       const rowStyle = rowStyles?.[rs.row.kind];
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CompanionRow, { as, style, columnSizes, rowId: rs.row.id, colSpan: columns.length, isFirstBodyRow, isLastBodyRow, position: resolved.position, companion: resolved.content, levelIndent: levelStyle?.rowIndent, rowCss: maybeApplyFunction(rs.row, rowStyle?.rowCss), cellCss: maybeApplyFunction(rs.row, rowStyle?.cellCss) }, `${rs.key}-companion`);
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CompanionRow, { as, style, columnSizes, rowId: rs.row.id, colSpan: layoutColumns.length, isFirstBodyRow, isLastBodyRow, position: resolved.position, companion: resolved.content, levelIndent: levelStyle?.rowIndent, rowCss: maybeApplyFunction(rs.row, rowStyle?.rowCss), cellCss: maybeApplyFunction(rs.row, rowStyle?.cellCss) }, `${rs.key}-companion`);
     };
     const makeRowGroup = (rs, isFirstBodyRow, isLastBodyRow, inHead) => {
       const resolved = rs.companion;
@@ -14832,7 +15002,7 @@ function GridTable(props) {
       visibleDataRows2 = visibleDataRows2.slice(0, filterMaxRows);
     }
     return [tableHeadRows2, visibleDataRows2, keptSelectedRows2, pinnedRows2, tooManyClientSideRows2];
-  }, [as, api, style, rowStyles, maybeStyle, columnSizes, columns.length, stripedColumnIds, getCount, filterMaxRows, cardHeight, cardImageFit]);
+  }, [as, api, style, rowStyles, maybeStyle, columnSizes, layoutColumns, 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;
@@ -14875,7 +15045,7 @@ function GridTable(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref: resizeRef, ...(0, import_runtime43.trussProps)(getTableRefWidthStyles(as === "virtual", columnMeasureWidth)), ...tid.probe }),
     loading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ...(0, import_runtime43.trussProps)(loadingOverlayCss), ...tid.loadingOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Loader, { ...tid.loadingSpinner, size: "md" }) }),
-    as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition, loading }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition, loading }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, loading, infiniteScroll, tableContainerRef, persistScrollPosition)
+    as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition, loading }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(VirtualGridTableView, { style: tableStyle, id, columns: layoutColumns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition, loading }) : renders[_as](tableStyle, id, layoutColumns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, loading, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
 var loadingOverlayCss = {
@@ -18856,7 +19026,8 @@ var widths = {
   md: 480,
   lg: 640,
   xl: 800,
-  xxl: 900
+  xxl: 900,
+  "3xl": 1180
 };
 var defaultMinHeight = 204;
 function getSize(size) {
@@ -34392,6 +34563,7 @@ var togglePressStyles = {
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
+  beamCollapseColumnId,
   beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar,
   beamLayoutContentPaddingXVar,
@@ -34402,6 +34574,7 @@ var togglePressStyles = {
   beamPageHeaderLayoutHeightVar,
   beamRightPaneContentMinVar,
   beamRightPaneWidthVar,
+  beamSelectColumnId,
   beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar,
   beamWorkflowLayoutFooterHeightVar,
@@ -34446,7 +34619,9 @@ var togglePressStyles = {
   chipHoverOnlyStyles,
   chipHoverStyles,
   collapseColumn,
+  collapseTogglePx,
   column,
+  columnWidthKeyVersion,
   condensedStyle,
   contrastDataTheme,
   createRowLookup,
@@ -34474,6 +34649,7 @@ var togglePressStyles = {
   fieldCell,
   fieldColumn,
   filterTestIdPrefix,
+  firstContentControlPx,
   formatDate,
   formatDateRange,
   formatPlainDate,
@@ -34504,6 +34680,7 @@ var togglePressStyles = {
   isListBoxSection,
   isPersistentItem,
   isPersistentKey,
+  isRowControlColumn,
   isValidDate,
   joinDocumentTitleSegments,
   layoutGutterLeftColumnId,
@@ -34542,6 +34719,7 @@ var togglePressStyles = {
   rightPaneOpenActions,
   rightPaneOpenStore,
   rowClickRenderFn,
+  rowControlColumns,
   rowLinkRenderFn,
   selectColumn,
   setDefaultStyle,
@@ -34550,6 +34728,7 @@ var togglePressStyles = {
   setRunningInJest,
   shouldShowEnvironmentBanner,
   shouldSkipScrollTo,
+  showsCollapseToggle,
   simpleDataRows,
   simpleGroupHeader,
   simpleHeader,
@@ -34564,6 +34743,7 @@ var togglePressStyles = {
   switchHoverStyles,
   switchSelectedHoverStyles,
   toContent,
+  toLayoutColumns,
   toLimitAndOffset,
   toPageNumberSize,
   toggleFilter,