@procore/data-table 13.1.1 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 13.2.0
+
+### Minor Changes
+
+- 04d6c4f48c: Allow autoGroupColumnDefinition to be added to nested tables and fix nested table column header icons to display correctly
+
 ## 13.1.1
 
 ### Patch Changes

package/dist/legacy/index.d.mts

@@ -669,6 +669,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/legacy/index.d.ts

@@ -669,6 +669,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/legacy/index.js

@@ -54589,6 +54589,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: (params == null ? void 0 : params.node.rowPinned) ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   var _a;
   return ((_a = colDef.children) == null ? void 0 : _a.length) > 0;
@@ -55041,6 +55050,44 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      var _a;
+      const cellRendererSelector = (_a = columnDefinition.cellRendererSelector) == null ? void 0 : _a.call(columnDefinition, params);
+      return {
+        component: (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -56218,7 +56265,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = (_a = colDef.headerComponentParams) == null ? void 0 : _a.headerNode;
   const I18n = coreReact.useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82__default.default.useState(false);
@@ -56226,7 +56273,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = React82.useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56322,14 +56369,16 @@ var GenericHeaderRenderer = (props) => {
   });
   const [expansionVariant, setExpansionVariant] = React82__default.default.useState("closed");
   React82__default.default.useEffect(() => {
+    var _a2;
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi == null ? void 0 : gridApi.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    (_a2 = props.api) == null ? void 0 : _a2.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi == null ? void 0 : gridApi.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      var _a3;
+      (_a3 = props.api) == null ? void 0 : _a3.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82__default.default.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56439,7 +56488,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73511,6 +73560,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73519,6 +73569,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73532,6 +73589,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73554,7 +73612,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73566,6 +73624,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight == null ? void 0 : getRowHeight(detailRowConfig.customFooters)
@@ -76982,61 +77041,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82__default.default.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          var _a2;
-          const cellRendererSelector = (_a2 = columnDefinition.cellRendererSelector) == null ? void 0 : _a2.call(columnDefinition, params);
-          let component = (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82__default.default.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props == null ? void 0 : props.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props == null ? void 0 : props.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82__default.default.useMemo(() => {
-    if (props == null ? void 0 : props.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props == null ? void 0 : props.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params == null ? void 0 : params.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props == null ? void 0 : props.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82__default.default.useCallback(
     (event) => {
       var _a2, _b2, _c;

package/dist/legacy/index.mjs

@@ -2,7 +2,7 @@ import React82, { useState, forwardRef, useContext, useRef, useImperativeHandle,
 import { startsWith, equals, omit, isNil, mergeDeepLeft, intersection, isEmpty, groupBy } from 'ramda';
 import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner, FlexList, Typography, Tooltip, Button, Required, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Pagination, Link, AvatarStack, Pill, Typeahead, UNSAFE_FilterToken, useI18n, I18nContext, UNSAFE_SuperSelect, Avatar, MultiSelect, H3, Checkbox, useVisibility, UNSAFE_useSuperSelectContext, DropdownFlyout, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
-import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, ArrowDown, ArrowUp, CaretDown, CaretRight } from '@procore/core-icons';
+import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, CaretDown, CaretRight, ArrowDown, ArrowUp } from '@procore/core-icons';
 import classNames from 'classnames';
 import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
 import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
@@ -54574,6 +54574,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: (params == null ? void 0 : params.node.rowPinned) ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   var _a;
   return ((_a = colDef.children) == null ? void 0 : _a.length) > 0;
@@ -55026,6 +55035,44 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      var _a;
+      const cellRendererSelector = (_a = columnDefinition.cellRendererSelector) == null ? void 0 : _a.call(columnDefinition, params);
+      return {
+        component: (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -56203,7 +56250,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = (_a = colDef.headerComponentParams) == null ? void 0 : _a.headerNode;
   const I18n = useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82.useState(false);
@@ -56211,7 +56258,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56307,14 +56354,16 @@ var GenericHeaderRenderer = (props) => {
   });
   const [expansionVariant, setExpansionVariant] = React82.useState("closed");
   React82.useEffect(() => {
+    var _a2;
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi == null ? void 0 : gridApi.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    (_a2 = props.api) == null ? void 0 : _a2.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi == null ? void 0 : gridApi.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      var _a3;
+      (_a3 = props.api) == null ? void 0 : _a3.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56424,7 +56473,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73496,6 +73545,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73504,6 +73554,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73517,6 +73574,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73539,7 +73597,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73551,6 +73609,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight == null ? void 0 : getRowHeight(detailRowConfig.customFooters)
@@ -76967,61 +77026,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          var _a2;
-          const cellRendererSelector = (_a2 = columnDefinition.cellRendererSelector) == null ? void 0 : _a2.call(columnDefinition, params);
-          let component = (cellRendererSelector == null ? void 0 : cellRendererSelector.component) ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector == null ? void 0 : cellRendererSelector.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props == null ? void 0 : props.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props == null ? void 0 : props.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82.useMemo(() => {
-    if (props == null ? void 0 : props.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props == null ? void 0 : props.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params == null ? void 0 : params.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props == null ? void 0 : props.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82.useCallback(
     (event) => {
       var _a2, _b2, _c;

package/dist/modern/index.d.mts

@@ -669,6 +669,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/modern/index.d.ts

@@ -669,6 +669,7 @@ interface GetDetailRowDataParams<TRow = any> extends Omit<AgGetDetailRowDataPara
 }
 type GetRowHeightWithFooters = (customFooters: CustomFooterConfig[] | undefined) => (params: Partial<RowHeightParams>) => number;
 interface DetailRowConfig<TRow = any> {
+    autoGroupColumnDefinition?: ColumnDefinition;
     columnDefinitions: ColumnDefinition[];
     getDetailRowData: (params: GetDetailRowDataParams<TRow>) => void;
     height?: 'auto' | number;

package/dist/modern/index.js

@@ -54532,6 +54532,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: params?.node.rowPinned ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   return colDef.children?.length > 0;
 }
@@ -54974,6 +54983,43 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
+      return {
+        component: cellRendererSelector?.component ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector?.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -56130,7 +56176,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = colDef.headerComponentParams?.headerNode;
   const I18n = coreReact.useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82__default.default.useState(false);
@@ -56138,7 +56184,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = React82.useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56236,11 +56282,11 @@ var GenericHeaderRenderer = (props) => {
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi?.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    props.api?.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      props.api?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82__default.default.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56347,7 +56393,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73356,6 +73402,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73364,6 +73411,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73377,6 +73431,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73398,7 +73453,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73410,6 +73465,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight?.(detailRowConfig.customFooters)
@@ -76792,60 +76848,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82__default.default.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
-          let component = cellRendererSelector?.component ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector?.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82__default.default.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props?.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props?.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82__default.default.useMemo(() => {
-    if (props?.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props?.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params?.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props?.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82__default.default.useCallback(
     (event) => {
       internalTableContext.analytics?.client.addEvent(

package/dist/modern/index.mjs

@@ -2,7 +2,7 @@ import React82, { useState, forwardRef, useContext, useRef, useImperativeHandle,
 import { startsWith, equals, omit, isNil, mergeDeepLeft, intersection, isEmpty, groupBy } from 'ramda';
 import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner, FlexList, Typography, Tooltip, Button, Required, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Pagination, Link, AvatarStack, Pill, Typeahead, UNSAFE_FilterToken, useI18n, I18nContext, UNSAFE_SuperSelect, Avatar, MultiSelect, H3, Checkbox, useVisibility, UNSAFE_useSuperSelectContext, DropdownFlyout, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
-import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, ArrowDown, ArrowUp, CaretDown, CaretRight } from '@procore/core-icons';
+import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, CaretDown, CaretRight, ArrowDown, ArrowUp } from '@procore/core-icons';
 import classNames from 'classnames';
 import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
 import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
@@ -54517,6 +54517,15 @@ function getCheckboxColumn(columnApi) {
 
 // src/utils/transformers.ts
 var emptyObject = {};
+var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
+  headerName: "",
+  cellRendererSelector(params) {
+    return {
+      component: params?.node.rowPinned ? GrandTotalsLabelRenderer : void 0
+    };
+  },
+  lockPosition: true
+};
 function isColGroupDef(colDef) {
   return colDef.children?.length > 0;
 }
@@ -54959,6 +54968,43 @@ function getFilterParams(columnDefinition) {
   }
   return filterProps;
 }
+function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  return {
+    ...columnDefinition,
+    cellRendererSelector: (params) => {
+      const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
+      return {
+        component: cellRendererSelector?.component ?? AutoGroupCellRenderer,
+        params: {
+          ...columnDefinition.cellRendererParams,
+          ...cellRendererSelector?.params,
+          checkbox(_params) {
+            if (_params.node) {
+              return isRowSelectable({
+                ..._params.node,
+                data: _params.node.data ?? _params.node.aggData
+              });
+            }
+            return false;
+          },
+          siblingGroupsRowSelectionDisabled
+        }
+      };
+    }
+  };
+}
+function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled) {
+  const colDef = columnDefinition ? transformToColDef(
+    columnDefinition,
+    enableGroupEditAndValidation,
+    enableDynamicRowHeight
+  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+  return addAutoGroupParams(
+    colDef,
+    isRowSelectable,
+    siblingGroupsRowSelectionDisabled
+  );
+}
 
 // src/CellRenderers/AutoGroupCell.scss
 var css5 = `._autoGroupCell_15e3f_1 {
@@ -56115,7 +56161,7 @@ var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = colDef.headerComponentParams?.headerNode;
   const I18n = useI18nContext();
-  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82.useState(false);
@@ -56123,7 +56169,7 @@ var GenericHeaderRenderer = (props) => {
   const headerCellRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
-    api: gridApi,
+    api: props.api,
     colDef,
     column: props.column,
     columnApi,
@@ -56221,11 +56267,11 @@ var GenericHeaderRenderer = (props) => {
     const onExpandAllChange = (event) => {
       setExpansionVariant(event.source === "expandAll" ? "all" : "closed");
     };
-    gridApi?.addEventListener("expandOrCollapseAll", onExpandAllChange);
+    props.api?.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      gridApi?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      props.api?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
     };
-  }, [gridApi]);
+  }, [props.api]);
   React82.useEffect(() => {
     const hasTierOneCollapsedNodes = !!findNode(
       (node) => node.level === 0 && !node.expanded,
@@ -56332,7 +56378,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(gridApi);
+      const currentRows = getCurrentRows(props.api);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -73341,6 +73387,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
     }
   };
   const rowHeightConfig = detailRowConfig.height === "auto" || detailRowConfig.height === void 0 ? { detailRowAutoHeight: true } : { detailRowHeight: detailRowConfig.height };
+  const isRowSelectable = () => deprecatedDetailRowSelectionEnabled ?? false;
   return {
     isRowMaster: detailRowConfig.isExpandable,
     masterDetail: true,
@@ -73349,6 +73396,13 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
       return {
         detailGridOptions: {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
+          autoGroupColumnDef: getDecoratedAutoGroupColDef(
+            detailRowConfig.autoGroupColumnDefinition,
+            enableGroupEditAndValidation,
+            enableDynamicRowHeight,
+            isRowSelectable,
+            false
+          ),
           context: {
             parentId: masterGridParams.node.id.replace("detail_", ""),
             parentData: masterGridParams.node.data
@@ -73362,6 +73416,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
               )
             )
           ),
+          isRowSelectable,
           onGridReady: onGridReadyOrValueChange,
           onCellValueChanged: onGridReadyOrValueChange,
           onRowDataChanged: onGridReadyOrValueChange,
@@ -73383,7 +73438,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           rowMultiSelectWithClick: detailRowConfig.rowMultiSelectWithClick,
           suppressRowClickSelection: detailRowConfig.suppressRowClickSelection ?? true,
           ensureDomOrder: true,
-          frameworkComponents,
+          components: frameworkComponents,
           icons: tableIcons,
           loadingOverlayComponent: "loadingOverlayRenderer",
           loadingOverlayComponentParams: {
@@ -73395,6 +73450,7 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           rowDragManaged: true,
           singleClickEdit: true,
+          suppressAggFuncInHeader: true,
           suppressContextMenu: true,
           suppressColumnVirtualisation: true,
           getRowHeight: getRowHeight?.(detailRowConfig.customFooters)
@@ -76777,60 +76833,16 @@ var Table = (props) => {
     },
     [props]
   );
-  const addAutoGroupParams = React82.useCallback(
-    function addAutoGroupParams2(columnDefinition) {
-      return {
-        ...columnDefinition,
-        cellRendererSelector: (params) => {
-          const cellRendererSelector = columnDefinition.cellRendererSelector?.(params);
-          let component = cellRendererSelector?.component ?? "autoGroupCellRenderer";
-          return {
-            component,
-            params: {
-              ...columnDefinition.cellRendererParams,
-              ...cellRendererSelector?.params,
-              checkbox(_params) {
-                if (_params.node) {
-                  return isRowSelectable({
-                    ..._params.node,
-                    data: _params.node.data ?? _params.node.aggData
-                  });
-                }
-                return false;
-              },
-              siblingGroupsRowSelectionDisabled: props.siblingGroupsRowSelectionDisabled
-            }
-          };
-        }
-      };
-    },
-    [isRowSelectable]
+  const decoratedAutoGroupColDef = React82.useMemo(
+    () => getDecoratedAutoGroupColDef(
+      props?.autoGroupColumnDefinition,
+      internalTableContext.enableGroupEditAndValidation,
+      internalTableContext.enableDynamicRowHeight,
+      isRowSelectable,
+      props.siblingGroupsRowSelectionDisabled
+    ),
+    [props?.autoGroupColumnDefinition]
   );
-  const decoratedAutoGroupColDef = React82.useMemo(() => {
-    if (props?.autoGroupColumnDefinition) {
-      return addAutoGroupParams(
-        transformToColDef(
-          props?.autoGroupColumnDefinition,
-          internalTableContext.enableGroupEditAndValidation,
-          internalTableContext.enableDynamicRowHeight
-        )
-      );
-    }
-    return addAutoGroupParams({
-      headerName: "",
-      cellRendererSelector: (params) => {
-        if (params?.node.rowPinned) {
-          return {
-            component: GrandTotalsLabelRenderer
-          };
-        }
-        return {
-          component: void 0
-        };
-      },
-      lockPosition: true
-    });
-  }, [props?.autoGroupColumnDefinition, addAutoGroupParams]);
   const onColumnGroupOpened = React82.useCallback(
     (event) => {
       internalTableContext.analytics?.client.addEvent(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "13.1.1",
+  "version": "13.2.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "main": "dist/legacy/index.js",
   "module": "dist/legacy/index.mjs",
@@ -101,7 +101,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.0.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "11.30.0",
+    "@procore/core-react": "11.31.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/labs-financials-utils": "3.0.1",
     "@procore/labs-procore-environment": "3.2.0",