@procore/data-table 14.37.0 → 14.39.0

package/dist/modern/index.cjs

@@ -54615,6 +54615,32 @@ function SingleSelectFilterRenderer({
   );
 }
 
+// src/utils/columnEditableHelpers.ts
+function createColumnEditableUtils(options) {
+  return {
+    overrideEditable: (columnEditable) => {
+      return (params) => {
+        const isGroupNodeExpanded = params.node.group && params.node.expanded;
+        if (params.node?.rowPinned || !options.enableGroupHeaderEdit && isGroupNodeExpanded && !params.node.footer) {
+          return false;
+        }
+        if (typeof columnEditable === "boolean") {
+          return columnEditable;
+        }
+        return columnEditable?.(params) ?? false;
+      };
+    }
+  };
+}
+function isColumnEditable(columnEditable) {
+  return (params) => {
+    if (typeof columnEditable === "boolean") {
+      return columnEditable;
+    }
+    return columnEditable?.(params) ?? false;
+  };
+}
+
 // src/utils/transformers.ts
 var emptyObject = {};
 var DEFAULT_AUTO_GROUP_COLUMN_DEFINITION = {
@@ -54695,22 +54721,11 @@ function transformToColumnDefinition(colDef = emptyObject) {
     valueSetter: colDef.valueSetter
   };
 }
-function isEditable(columnEditable) {
-  return (params) => {
-    if (params.node?.rowPinned || params.node.group && params.node.expanded && !params.node.footer) {
-      return false;
-    }
-    if (typeof columnEditable === "boolean") {
-      return columnEditable;
-    }
-    return columnEditable?.(params) ?? false;
-  };
-}
 function shouldHaveEditStyles(params) {
   if (!params.colDef?.cellEditor) {
     return false;
   }
-  return isEditable(params.colDef.editable);
+  return isColumnEditable(params.colDef.editable);
 }
 var toExcelCellClass = (className) => `excel-export--${className}`;
 function transformToExcelStyles(excelDataFormats) {
@@ -54833,11 +54848,11 @@ function transformColumnDefinitionToColDef(dataTableColumnDefinition, enableGrou
       parentData: context?.parentData,
       parentId: context?.parentId
     }) : aggFunc,
-    bulkEditable: isEditable(bulkEditable),
+    bulkEditable: isColumnEditable(bulkEditable),
     cellClass: cellExcelDataType ? toExcelCellClass(cellExcelDataType) : void 0,
     cellClassRules,
     comparator,
-    editable: isEditable(_editable),
+    editable: isColumnEditable(_editable),
     filter: getFilter(dataTableColumnDefinition),
     // set filter by default
     filterParams: {
@@ -55158,12 +55173,12 @@ function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidat
 }
 
 // src/CellRenderers/AutoGroupCell.scss
-var css5 = `._autoGroupCell_pq41h_1 {
+var css5 = `._autoGroupCell_1qx8z_1 {
   height: 100%;
   width: 100%;
 }
 
-._indent_pq41h_6 {
+._indent_1qx8z_6 {
   border-right: 1px solid #d6dadc;
   background: #f4f5f6;
   position: absolute;
@@ -55171,44 +55186,45 @@ var css5 = `._autoGroupCell_pq41h_1 {
   bottom: -1px;
   width: 12px;
 }
-._indent_pq41h_6._innermostLastIndent_pq41h_14 {
+._indent_1qx8z_6._innermostLastIndent_1qx8z_14 {
   bottom: 0px;
 }
 
-._expandableCaret_pq41h_18 {
+._expandableCaret_1qx8z_18 {
   margin-left: -8px;
   margin-right: 4px;
   width: 24px;
+  flex-shrink: 0;
 }
 
-._expandCaret_pq41h_24 {
+._expandCaret_1qx8z_25 {
   color: #2066df;
   cursor: pointer;
 }
 
-._collapseCaret_pq41h_29 {
+._collapseCaret_1qx8z_30 {
   color: #75838a;
   cursor: pointer;
 }
 
-._value_pq41h_34 {
+._value_1qx8z_35 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
 }
-._value_pq41h_34._footer_pq41h_39 {
+._value_1qx8z_35._footer_1qx8z_40 {
   color: #6a767c;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css5));
 var AutoGroupCell_default = {
-  "autoGroupCell": "_autoGroupCell_pq41h_1",
-  "indent": "_indent_pq41h_6",
-  "innermostLastIndent": "_innermostLastIndent_pq41h_14",
-  "expandableCaret": "_expandableCaret_pq41h_18",
-  "expandCaret": "_expandCaret_pq41h_24",
-  "collapseCaret": "_collapseCaret_pq41h_29",
-  "value": "_value_pq41h_34",
-  "footer": "_footer_pq41h_39"
+  "autoGroupCell": "_autoGroupCell_1qx8z_1",
+  "indent": "_indent_1qx8z_6",
+  "innermostLastIndent": "_innermostLastIndent_1qx8z_14",
+  "expandableCaret": "_expandableCaret_1qx8z_18",
+  "expandCaret": "_expandCaret_1qx8z_25",
+  "collapseCaret": "_collapseCaret_1qx8z_30",
+  "value": "_value_1qx8z_35",
+  "footer": "_footer_1qx8z_40"
 };
 
 // src/utils/rowSelectionHelpers.ts
@@ -56501,9 +56517,10 @@ var GenericHeaderRenderer = (props) => {
   const {
     columnApi,
     tableRef,
+    onExpandOrCollapseAll,
     onServerSideDataRequest,
-    showExpandCollapseAllToggle,
-    onTableConfigChange
+    onTableConfigChange,
+    showExpandCollapseAllToggle
   } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React80__default.default.useState(props.column.getSort());
@@ -56692,9 +56709,11 @@ var GenericHeaderRenderer = (props) => {
           }
         });
         setExpansionVariant("tierOne");
+        onExpandOrCollapseAll?.(true);
       } else {
         props.api.collapseAll();
         setExpansionVariant("closed");
+        onExpandOrCollapseAll?.(false);
       }
       return;
     }
@@ -56709,10 +56728,13 @@ var GenericHeaderRenderer = (props) => {
         props.api
       );
       setExpansionVariant(hasMoreExpandableNodes ? "tierOne" : "all");
+      onExpandOrCollapseAll?.(true);
     } else if (expansionVariant === "tierOne") {
       props.api.expandAll();
+      onExpandOrCollapseAll?.(true);
     } else {
       props.api.collapseAll();
+      onExpandOrCollapseAll?.(false);
     }
   }
   const tooltipText = {
@@ -56884,7 +56906,8 @@ var GenericHeaderRenderer = (props) => {
             "aria-label": tooltipText[expansionVariant],
             className: "expand-button",
             onClick: onExpandToggle,
-            role: "button"
+            role: "button",
+            "data-qa": "expand-or-collapse-all-button"
           },
           /* @__PURE__ */ React80__default.default.createElement(ExpansionVariantIcon, { size: "sm" })
         )
@@ -57728,6 +57751,8 @@ var InternalTableContext = React80__default.default.createContext({
   gridApi: void 0,
   localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
+  onExpandOrCollapseAll: () => {
+  },
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
   },
@@ -76272,12 +76297,12 @@ var MenuItemMapper = class MenuItemMapper2 extends BeanStub {
         if (ModuleRegistry.__assertRegistered(ModuleNames.ClipboardModule, "Cut from Menu", this.context.getGridId())) {
           const focusedCell = this.focusService.getFocusedCell();
           const rowNode = focusedCell ? this.rowPositionUtils.getRowNode(focusedCell) : null;
-          const isEditable2 = rowNode ? focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell.column.isCellEditable(rowNode) : false;
+          const isEditable = rowNode ? focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell.column.isCellEditable(rowNode) : false;
           return {
             name: localeTextFunc("cut", "Cut"),
             shortcut: localeTextFunc("ctrlX", "Ctrl+X"),
             icon: _.createIconNoSpan("clipboardCut", this.gridOptionsService, null),
-            disabled: !isEditable2 || this.gridOptionsService.is("suppressCutToClipboard"),
+            disabled: !isEditable || this.gridOptionsService.is("suppressCutToClipboard"),
             action: () => this.clipboardService.cutToClipboard(void 0, "contextMenu")
           };
         } else {
@@ -108821,6 +108846,7 @@ var DataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   showExpandCollapseAllToggle,
@@ -109067,6 +109093,7 @@ var DataTable = ({
         gridApi,
         initialTableConfig,
         onBulkEditUpdate,
+        onExpandOrCollapseAll,
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
@@ -109153,6 +109180,20 @@ function getServerSideDatasource(onServerSideDataRequestCallbackRef, onEmptyResp
   };
 }
 var minimumColumnWidth = 140;
+function useComputeAgGridProps(props) {
+  const internalTableContext = useInternalTableContext();
+  const onSSDR = internalTableContext.onServerSideDataRequest;
+  return {
+    groupIncludeFooter: !onSSDR && props.groupIncludeFooter === void 0 ? true : props.groupIncludeFooter,
+    rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
+    rowModelType: onSSDR ? "serverSide" : void 0,
+    groupSelectsChildren: (
+      // Always true for client side, defaults to true for server side
+      internalTableContext.totalRowCount > 0 && props.groupSelectsChildren !== false || !onSSDR
+    ),
+    groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
+  };
+}
 var Table = (props) => {
   const { suppressColumnVirtualisation = true, rowActionsConfig = {} } = props;
   const I18n = coreReact.useI18nContext();
@@ -109202,14 +109243,28 @@ var Table = (props) => {
   React80__default.default.useImperativeHandle(internalTableContext.tableRef, () => tableApi, [
     tableApi
   ]);
+  const {
+    groupIncludeFooter,
+    rowDragManaged,
+    rowModelType,
+    groupSelectsChildren,
+    groupDefaultExpanded
+  } = useComputeAgGridProps(props);
+  const { overrideEditable } = createColumnEditableUtils({
+    enableGroupHeaderEdit: props.enableGroupHeaderEdit
+  });
   const decoratedColDefs = React80__default.default.useMemo(
-    () => internalTableContext.columnDefinitions?.map(
-      (colDef) => transformToColDef(
+    () => internalTableContext.columnDefinitions?.map((colDef) => {
+      const newColDef = transformToColDef(
         colDef,
         internalTableContext.enableGroupEditAndValidation,
         internalTableContext.enableDynamicRowHeight
-      )
-    ),
+      );
+      return {
+        ...newColDef,
+        editable: overrideEditable(colDef.editable)
+      };
+    }),
     [internalTableContext.columnDefinitions]
   );
   const hasRowActions = React80__default.default.useMemo(
@@ -109951,13 +110006,10 @@ var Table = (props) => {
           getRowId: internalTableContext.getRowId,
           getRowStyle,
           groupAllowUnbalanced: true,
-          groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded,
-          groupIncludeFooter: !onSSDR && props.groupIncludeFooter === void 0 ? true : props.groupIncludeFooter,
+          groupDefaultExpanded,
+          groupIncludeFooter,
           getGroupRowAgg: props.getGroupRowAgg ? getGroupRowAgg : void 0,
-          groupSelectsChildren: (
-            // Always true for client side, defaults to true for server side
-            internalTableContext.totalRowCount > 0 && props.groupSelectsChildren !== false || !onSSDR
-          ),
+          groupSelectsChildren,
           groupSelectsFiltered: true,
           headerHeight: props.headerHeight,
           icons: tableIcons,
@@ -110015,8 +110067,8 @@ var Table = (props) => {
           pinnedBottomRowData: props.pinnedBottomRowData,
           rowBuffer: props.rowBuffer,
           rowClassRules,
-          rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
-          rowModelType: onSSDR ? "serverSide" : void 0,
+          rowDragManaged,
+          rowModelType,
           rowSelection: "multiple",
           ...serverSideInfiniteScroll,
           suppressClickEdit: true,
@@ -112045,6 +112097,7 @@ var ClientSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
@@ -112061,8 +112114,9 @@ var ClientSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onTableConfigChange,
       showExpandCollapseAllToggle: true,
       translations: translations2,
       localStoragePersistenceKey,
@@ -116453,6 +116507,7 @@ var ServerSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   enableCellTextSelection,
@@ -116471,9 +116526,10 @@ var ServerSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onServerSideDataRequest,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onServerSideDataRequest,
+      onTableConfigChange,
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,

package/dist/modern/index.d.cts

@@ -992,6 +992,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     groupsAlwaysExpanded?: boolean;
     groupDefaultExpanded?: number;
     groupIncludeFooter?: boolean;
+    enableGroupHeaderEdit?: boolean;
     groupSelectsChildren?: boolean;
     headerHeight?: number;
     hideActionsOnGroupedRow?: boolean;
@@ -1144,8 +1145,16 @@ interface DataTableProps {
     filterGroups?: FilterGroup[];
     getRowId?: (params: GetRowIdParams) => string;
     initialTableConfig?: DataTableConfig;
-    onTableConfigChange?: (config: DataTableConfig) => void;
+    /**
+     * Callback invoked when the row group expand/collapse state changes via
+     * the Expand/Collapse toggle button. Use this to track the table's
+     * expand/collapse state.
+     * @param expanded - `true` when groups are expanded at any level, `false`
+     * when all groups are collapsed.
+     */
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onServerSideDataRequest?: (params: ServerSideGetRowsParams) => Promise<SuccessParams | void> | void;
+    onTableConfigChange?: (config: DataTableConfig) => void;
     grandTotalsLabelRenderer?: React.FunctionComponent<GrandTotalsLabelRendererProps>;
     /**
      * Callback after bulk edit action is performed.
@@ -1373,6 +1382,7 @@ interface InternalTableContext {
     onServerSideDataRequest?: DataTableProps['onServerSideDataRequest'];
     updateServerSideDataSource: (params: UpdateServerSideDataSourceParams) => void;
     localStoragePersistenceKey?: string;
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onTableConfigChange: () => void;
     rowHeight: RowSize;
     rowSelectionRef?: React__default.MutableRefObject<RowSelectionRef>;
@@ -1453,7 +1463,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1490,7 +1500,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/modern/index.d.ts

@@ -992,6 +992,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     groupsAlwaysExpanded?: boolean;
     groupDefaultExpanded?: number;
     groupIncludeFooter?: boolean;
+    enableGroupHeaderEdit?: boolean;
     groupSelectsChildren?: boolean;
     headerHeight?: number;
     hideActionsOnGroupedRow?: boolean;
@@ -1144,8 +1145,16 @@ interface DataTableProps {
     filterGroups?: FilterGroup[];
     getRowId?: (params: GetRowIdParams) => string;
     initialTableConfig?: DataTableConfig;
-    onTableConfigChange?: (config: DataTableConfig) => void;
+    /**
+     * Callback invoked when the row group expand/collapse state changes via
+     * the Expand/Collapse toggle button. Use this to track the table's
+     * expand/collapse state.
+     * @param expanded - `true` when groups are expanded at any level, `false`
+     * when all groups are collapsed.
+     */
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onServerSideDataRequest?: (params: ServerSideGetRowsParams) => Promise<SuccessParams | void> | void;
+    onTableConfigChange?: (config: DataTableConfig) => void;
     grandTotalsLabelRenderer?: React.FunctionComponent<GrandTotalsLabelRendererProps>;
     /**
      * Callback after bulk edit action is performed.
@@ -1373,6 +1382,7 @@ interface InternalTableContext {
     onServerSideDataRequest?: DataTableProps['onServerSideDataRequest'];
     updateServerSideDataSource: (params: UpdateServerSideDataSourceParams) => void;
     localStoragePersistenceKey?: string;
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onTableConfigChange: () => void;
     rowHeight: RowSize;
     rowSelectionRef?: React__default.MutableRefObject<RowSelectionRef>;
@@ -1453,7 +1463,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
 
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1490,7 +1500,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
 
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;