@procore/data-table 14.37.0 → 14.39.0

package/dist/modern/index.js

@@ -54602,6 +54602,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 = {
@@ -54682,22 +54708,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) {
@@ -54820,11 +54835,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: {
@@ -55145,12 +55160,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;
@@ -55158,44 +55173,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
@@ -56488,9 +56504,10 @@ var GenericHeaderRenderer = (props) => {
   const {
     columnApi,
     tableRef,
+    onExpandOrCollapseAll,
     onServerSideDataRequest,
-    showExpandCollapseAllToggle,
-    onTableConfigChange
+    onTableConfigChange,
+    showExpandCollapseAllToggle
   } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React80.useState(props.column.getSort());
@@ -56679,9 +56696,11 @@ var GenericHeaderRenderer = (props) => {
           }
         });
         setExpansionVariant("tierOne");
+        onExpandOrCollapseAll?.(true);
       } else {
         props.api.collapseAll();
         setExpansionVariant("closed");
+        onExpandOrCollapseAll?.(false);
       }
       return;
     }
@@ -56696,10 +56715,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 = {
@@ -56871,7 +56893,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.createElement(ExpansionVariantIcon, { size: "sm" })
         )
@@ -57715,6 +57738,8 @@ var InternalTableContext = React80.createContext({
   gridApi: void 0,
   localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
+  onExpandOrCollapseAll: () => {
+  },
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
   },
@@ -76259,12 +76284,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 {
@@ -108808,6 +108833,7 @@ var DataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   showExpandCollapseAllToggle,
@@ -109054,6 +109080,7 @@ var DataTable = ({
         gridApi,
         initialTableConfig,
         onBulkEditUpdate,
+        onExpandOrCollapseAll,
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
@@ -109140,6 +109167,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 = useI18nContext();
@@ -109189,14 +109230,28 @@ var Table = (props) => {
   React80.useImperativeHandle(internalTableContext.tableRef, () => tableApi, [
     tableApi
   ]);
+  const {
+    groupIncludeFooter,
+    rowDragManaged,
+    rowModelType,
+    groupSelectsChildren,
+    groupDefaultExpanded
+  } = useComputeAgGridProps(props);
+  const { overrideEditable } = createColumnEditableUtils({
+    enableGroupHeaderEdit: props.enableGroupHeaderEdit
+  });
   const decoratedColDefs = React80.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.useMemo(
@@ -109938,13 +109993,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,
@@ -110002,8 +110054,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,
@@ -112032,6 +112084,7 @@ var ClientSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
@@ -112048,8 +112101,9 @@ var ClientSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onTableConfigChange,
       showExpandCollapseAllToggle: true,
       translations: translations2,
       localStoragePersistenceKey,
@@ -116440,6 +116494,7 @@ var ServerSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   enableCellTextSelection,
@@ -116458,9 +116513,10 @@ var ServerSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onServerSideDataRequest,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onServerSideDataRequest,
+      onTableConfigChange,
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.37.0",
+  "version": "14.39.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "author": "Procore Technologies",
   "homepage": "https://github.com/procore/core/tree/main/packages/data-table",
@@ -59,8 +59,7 @@
     "pseudo": "pseudolocalize run ./src/locales",
     "storybook": "storybook dev -p 6006",
     "storybook-static:server": "http-server ./storybook-static -p 6006 -c-1 --silent",
-    "test": "jest --runInBand --silent --logHeapUsage",
-    "test:coverage": "yarn test -- --collectCoverage",
+    "test": "jest --runInBand --silent --logHeapUsage --collectCoverage",
     "test:watch": "yarn run test --watch"
   },
   "peerDependencies": {
@@ -107,9 +106,9 @@
     "@dotenvx/dotenvx": "1.6.4",
     "@ngneat/falso": "6.4.0",
     "@procore/core-css": "10.17.0",
-    "@procore/core-icons": "^12.10.1",
+    "@procore/core-icons": "^12.11.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.31.0",
+    "@procore/core-react": "^12.33.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",