@procore/data-table 14.40.0 → 14.42.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 14.42.0
+
+### Minor Changes
+
+- 433e594: Add a callOnRowDragEndAfterLeave prop to know where rows are moved if the user drags a row outside the table
+
+## 14.41.0
+
+### Minor Changes
+
+- f1804f1: Support using required and optional groups at the same time
+
+### Patch Changes
+
+- 83c2765: Fixed variable name conflicting with type name that leads to an error on storybook.
+- Updated dependencies [27c6ad8]
+  - @procore/toast-alert@5.1.2
+
 ## 14.40.0
 
 ### Minor Changes

package/dist/legacy/index.cjs

@@ -103539,13 +103539,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103557,7 +103557,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -104497,6 +104497,63 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
   };
 };
 
+// src/utils/dragging.ts
+function handleDragStopped({
+  event,
+  internalTableContext,
+  moveColumnEvent: moveColumnEvent2,
+  rowDragMoveEvent: rowDragMoveEvent2,
+  rowDragEndEvent: rowDragEndEvent2,
+  tableProps
+}) {
+  var _a, _b, _c;
+  if (event.target.className.includes("ag-header-cell")) {
+    internalTableContext.onTableConfigChange();
+  }
+  if (moveColumnEvent2) {
+    (_b = internalTableContext.analytics) == null ? void 0 : _b.client.addEvent(
+      "design_system.data_table.column.repositioned",
+      {
+        client: internalTableContext.analytics.clientName,
+        column: (_a = moveColumnEvent2.column) == null ? void 0 : _a.getColId(),
+        position: moveColumnEvent2.toIndex
+      }
+    );
+    if (tableProps.onRowDragEnd) {
+      const allColumns = event.columnApi.getAllGridColumns();
+      const firstVisibleColumnIndex = allColumns.findIndex(
+        (col) => col.isVisible()
+      );
+      if (moveColumnEvent2.toIndex === firstVisibleColumnIndex || ((_c = moveColumnEvent2.column) == null ? void 0 : _c.getColDef().rowDrag)) {
+        adjustRowDragIcon(event.api, event.columnApi);
+      }
+    }
+    moveColumnEvent2 = void 0;
+  }
+  if (tableProps.onRowDragEnd && rowDragMoveEvent2) {
+    if (rowDragEndEvent2 && rowDragEndEvent2.overIndex >= 0) {
+      tableProps.onRowDragEnd(
+        rowDragEndEvent2.node.data,
+        rowDragEndEvent2.node.rowIndex,
+        rowDragEndEvent2.node,
+        rowDragEndEvent2.overNode
+      );
+    } else if (tableProps.callOnRowDragEndAfterLeave) {
+      tableProps.onRowDragEnd(
+        rowDragMoveEvent2.node.data,
+        rowDragMoveEvent2.node.rowIndex,
+        rowDragMoveEvent2.node,
+        rowDragMoveEvent2.overNode
+      );
+    }
+    if (tableProps.rows && !tableProps.rowDragManaged) {
+      event.api.setRowData(tableProps.rows);
+    }
+  }
+  rowDragMoveEvent2 = void 0;
+  rowDragEndEvent2 = void 0;
+}
+
 // src/utils/expandRows.ts
 function getStringifiedRoute(node) {
   var _a;
@@ -109866,50 +109923,18 @@ var Table = (props) => {
   }
   const onDragStopped = React80__default.default.useCallback(
     // eslint-disable-next-line complexity
-    (event) => {
-      var _a2, _b2, _c2;
-      if (event.target.className.includes("ag-header-cell")) {
-        internalTableContext.onTableConfigChange();
-      }
-      if (moveColumnEvent) {
-        (_b2 = internalTableContext.analytics) == null ? void 0 : _b2.client.addEvent(
-          "design_system.data_table.column.repositioned",
-          {
-            client: internalTableContext.analytics.clientName,
-            column: (_a2 = moveColumnEvent.column) == null ? void 0 : _a2.getColId(),
-            position: moveColumnEvent.toIndex
-          }
-        );
-        if (props.onRowDragEnd) {
-          const allColumns = event.columnApi.getAllGridColumns();
-          const firstVisibleColumnIndex = allColumns.findIndex(
-            (col) => col.isVisible()
-          );
-          if (moveColumnEvent.toIndex === firstVisibleColumnIndex || ((_c2 = moveColumnEvent.column) == null ? void 0 : _c2.getColDef().rowDrag)) {
-            adjustRowDragIcon(event.api, event.columnApi);
-          }
-        }
-        moveColumnEvent = void 0;
-      }
-      if (props.onRowDragEnd && rowDragMoveEvent) {
-        if (rowDragEndEvent && rowDragEndEvent.overIndex >= 0) {
-          props.onRowDragEnd(
-            rowDragEndEvent.node.data,
-            rowDragEndEvent.node.rowIndex,
-            rowDragEndEvent.node,
-            rowDragEndEvent.overNode
-          );
-        }
-        if (props.rows && !props.rowDragManaged) {
-          event.api.setRowData(props.rows);
-        }
-      }
-      rowDragMoveEvent = void 0;
-      rowDragEndEvent = void 0;
-    },
+    (event) => handleDragStopped({
+      event,
+      internalTableContext,
+      moveColumnEvent,
+      rowDragMoveEvent,
+      rowDragEndEvent,
+      tableProps: props
+    }),
     [
       internalTableContext.onTableConfigChange,
       props.onRowDragEnd,
+      props.callOnRowDragEndAfterLeave,
       props.rowDragManaged,
       props.rows
     ]
@@ -112126,7 +112151,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80__default.default.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -112149,24 +112174,26 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80__default.default.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80__default.default.useCallback(() => {
     var _a;
-    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection([])) ?? [];
+    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80__default.default.useCallback(
     (newValue) => {
       var _a;
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection(fields)) ?? fields;
       if (!ramda.equals(selectedColumns, newValue)) {
-        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(fields);
+        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80__default.default.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112310,7 +112337,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80__default.default.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80__default.default.createElement(
     QuickFilters,

package/dist/legacy/index.d.cts

@@ -1006,6 +1006,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     modules: Module[];
     onCellValueChanged?: (params: CellValueChangeParams<any>) => void;
     onRowDragEnd?: (row: TRow, endIndex: number, node: Pick<RowNode, 'childIndex' | 'group'>, overNode?: Pick<RowNode, 'childIndex' | 'group' | 'data'>) => void;
+    callOnRowDragEndAfterLeave?: boolean;
     onRowGroupOpened?: (event: RowGroupToggledEvent<TRow>) => void;
     onRowSelected?: (event: RowSelectedEvent) => void;
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
@@ -1452,6 +1453,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1486,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1524,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/legacy/index.d.ts

@@ -1006,6 +1006,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     modules: Module[];
     onCellValueChanged?: (params: CellValueChangeParams<any>) => void;
     onRowDragEnd?: (row: TRow, endIndex: number, node: Pick<RowNode, 'childIndex' | 'group'>, overNode?: Pick<RowNode, 'childIndex' | 'group' | 'data'>) => void;
+    callOnRowDragEndAfterLeave?: boolean;
     onRowGroupOpened?: (event: RowGroupToggledEvent<TRow>) => void;
     onRowSelected?: (event: RowSelectedEvent) => void;
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
@@ -1452,6 +1453,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1486,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1524,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/legacy/index.js

@@ -103526,13 +103526,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103544,7 +103544,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -104484,6 +104484,63 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
   };
 };
 
+// src/utils/dragging.ts
+function handleDragStopped({
+  event,
+  internalTableContext,
+  moveColumnEvent: moveColumnEvent2,
+  rowDragMoveEvent: rowDragMoveEvent2,
+  rowDragEndEvent: rowDragEndEvent2,
+  tableProps
+}) {
+  var _a, _b, _c;
+  if (event.target.className.includes("ag-header-cell")) {
+    internalTableContext.onTableConfigChange();
+  }
+  if (moveColumnEvent2) {
+    (_b = internalTableContext.analytics) == null ? void 0 : _b.client.addEvent(
+      "design_system.data_table.column.repositioned",
+      {
+        client: internalTableContext.analytics.clientName,
+        column: (_a = moveColumnEvent2.column) == null ? void 0 : _a.getColId(),
+        position: moveColumnEvent2.toIndex
+      }
+    );
+    if (tableProps.onRowDragEnd) {
+      const allColumns = event.columnApi.getAllGridColumns();
+      const firstVisibleColumnIndex = allColumns.findIndex(
+        (col) => col.isVisible()
+      );
+      if (moveColumnEvent2.toIndex === firstVisibleColumnIndex || ((_c = moveColumnEvent2.column) == null ? void 0 : _c.getColDef().rowDrag)) {
+        adjustRowDragIcon(event.api, event.columnApi);
+      }
+    }
+    moveColumnEvent2 = void 0;
+  }
+  if (tableProps.onRowDragEnd && rowDragMoveEvent2) {
+    if (rowDragEndEvent2 && rowDragEndEvent2.overIndex >= 0) {
+      tableProps.onRowDragEnd(
+        rowDragEndEvent2.node.data,
+        rowDragEndEvent2.node.rowIndex,
+        rowDragEndEvent2.node,
+        rowDragEndEvent2.overNode
+      );
+    } else if (tableProps.callOnRowDragEndAfterLeave) {
+      tableProps.onRowDragEnd(
+        rowDragMoveEvent2.node.data,
+        rowDragMoveEvent2.node.rowIndex,
+        rowDragMoveEvent2.node,
+        rowDragMoveEvent2.overNode
+      );
+    }
+    if (tableProps.rows && !tableProps.rowDragManaged) {
+      event.api.setRowData(tableProps.rows);
+    }
+  }
+  rowDragMoveEvent2 = void 0;
+  rowDragEndEvent2 = void 0;
+}
+
 // src/utils/expandRows.ts
 function getStringifiedRoute(node) {
   var _a;
@@ -109853,50 +109910,18 @@ var Table = (props) => {
   }
   const onDragStopped = React80.useCallback(
     // eslint-disable-next-line complexity
-    (event) => {
-      var _a2, _b2, _c2;
-      if (event.target.className.includes("ag-header-cell")) {
-        internalTableContext.onTableConfigChange();
-      }
-      if (moveColumnEvent) {
-        (_b2 = internalTableContext.analytics) == null ? void 0 : _b2.client.addEvent(
-          "design_system.data_table.column.repositioned",
-          {
-            client: internalTableContext.analytics.clientName,
-            column: (_a2 = moveColumnEvent.column) == null ? void 0 : _a2.getColId(),
-            position: moveColumnEvent.toIndex
-          }
-        );
-        if (props.onRowDragEnd) {
-          const allColumns = event.columnApi.getAllGridColumns();
-          const firstVisibleColumnIndex = allColumns.findIndex(
-            (col) => col.isVisible()
-          );
-          if (moveColumnEvent.toIndex === firstVisibleColumnIndex || ((_c2 = moveColumnEvent.column) == null ? void 0 : _c2.getColDef().rowDrag)) {
-            adjustRowDragIcon(event.api, event.columnApi);
-          }
-        }
-        moveColumnEvent = void 0;
-      }
-      if (props.onRowDragEnd && rowDragMoveEvent) {
-        if (rowDragEndEvent && rowDragEndEvent.overIndex >= 0) {
-          props.onRowDragEnd(
-            rowDragEndEvent.node.data,
-            rowDragEndEvent.node.rowIndex,
-            rowDragEndEvent.node,
-            rowDragEndEvent.overNode
-          );
-        }
-        if (props.rows && !props.rowDragManaged) {
-          event.api.setRowData(props.rows);
-        }
-      }
-      rowDragMoveEvent = void 0;
-      rowDragEndEvent = void 0;
-    },
+    (event) => handleDragStopped({
+      event,
+      internalTableContext,
+      moveColumnEvent,
+      rowDragMoveEvent,
+      rowDragEndEvent,
+      tableProps: props
+    }),
     [
       internalTableContext.onTableConfigChange,
       props.onRowDragEnd,
+      props.callOnRowDragEndAfterLeave,
       props.rowDragManaged,
       props.rows
     ]
@@ -112113,7 +112138,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -112136,24 +112161,26 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80.useCallback(() => {
     var _a;
-    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection([])) ?? [];
+    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80.useCallback(
     (newValue) => {
       var _a;
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection(fields)) ?? fields;
       if (!equals(selectedColumns, newValue)) {
-        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(fields);
+        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112297,7 +112324,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80.createElement(
     QuickFilters,

package/dist/modern/index.cjs

@@ -103427,13 +103427,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103445,7 +103445,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -104363,6 +104363,62 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
   };
 };
 
+// src/utils/dragging.ts
+function handleDragStopped({
+  event,
+  internalTableContext,
+  moveColumnEvent: moveColumnEvent2,
+  rowDragMoveEvent: rowDragMoveEvent2,
+  rowDragEndEvent: rowDragEndEvent2,
+  tableProps
+}) {
+  if (event.target.className.includes("ag-header-cell")) {
+    internalTableContext.onTableConfigChange();
+  }
+  if (moveColumnEvent2) {
+    internalTableContext.analytics?.client.addEvent(
+      "design_system.data_table.column.repositioned",
+      {
+        client: internalTableContext.analytics.clientName,
+        column: moveColumnEvent2.column?.getColId(),
+        position: moveColumnEvent2.toIndex
+      }
+    );
+    if (tableProps.onRowDragEnd) {
+      const allColumns = event.columnApi.getAllGridColumns();
+      const firstVisibleColumnIndex = allColumns.findIndex(
+        (col) => col.isVisible()
+      );
+      if (moveColumnEvent2.toIndex === firstVisibleColumnIndex || moveColumnEvent2.column?.getColDef().rowDrag) {
+        adjustRowDragIcon(event.api, event.columnApi);
+      }
+    }
+    moveColumnEvent2 = void 0;
+  }
+  if (tableProps.onRowDragEnd && rowDragMoveEvent2) {
+    if (rowDragEndEvent2 && rowDragEndEvent2.overIndex >= 0) {
+      tableProps.onRowDragEnd(
+        rowDragEndEvent2.node.data,
+        rowDragEndEvent2.node.rowIndex,
+        rowDragEndEvent2.node,
+        rowDragEndEvent2.overNode
+      );
+    } else if (tableProps.callOnRowDragEndAfterLeave) {
+      tableProps.onRowDragEnd(
+        rowDragMoveEvent2.node.data,
+        rowDragMoveEvent2.node.rowIndex,
+        rowDragMoveEvent2.node,
+        rowDragMoveEvent2.overNode
+      );
+    }
+    if (tableProps.rows && !tableProps.rowDragManaged) {
+      event.api.setRowData(tableProps.rows);
+    }
+  }
+  rowDragMoveEvent2 = void 0;
+  rowDragEndEvent2 = void 0;
+}
+
 // src/utils/expandRows.ts
 function getStringifiedRoute(node) {
   return node.getRoute()?.map((r) => typeof r === "object" ? JSON.stringify(r) : r);
@@ -109685,49 +109741,18 @@ var Table = (props) => {
   }
   const onDragStopped = React80__default.default.useCallback(
     // eslint-disable-next-line complexity
-    (event) => {
-      if (event.target.className.includes("ag-header-cell")) {
-        internalTableContext.onTableConfigChange();
-      }
-      if (moveColumnEvent) {
-        internalTableContext.analytics?.client.addEvent(
-          "design_system.data_table.column.repositioned",
-          {
-            client: internalTableContext.analytics.clientName,
-            column: moveColumnEvent.column?.getColId(),
-            position: moveColumnEvent.toIndex
-          }
-        );
-        if (props.onRowDragEnd) {
-          const allColumns = event.columnApi.getAllGridColumns();
-          const firstVisibleColumnIndex = allColumns.findIndex(
-            (col) => col.isVisible()
-          );
-          if (moveColumnEvent.toIndex === firstVisibleColumnIndex || moveColumnEvent.column?.getColDef().rowDrag) {
-            adjustRowDragIcon(event.api, event.columnApi);
-          }
-        }
-        moveColumnEvent = void 0;
-      }
-      if (props.onRowDragEnd && rowDragMoveEvent) {
-        if (rowDragEndEvent && rowDragEndEvent.overIndex >= 0) {
-          props.onRowDragEnd(
-            rowDragEndEvent.node.data,
-            rowDragEndEvent.node.rowIndex,
-            rowDragEndEvent.node,
-            rowDragEndEvent.overNode
-          );
-        }
-        if (props.rows && !props.rowDragManaged) {
-          event.api.setRowData(props.rows);
-        }
-      }
-      rowDragMoveEvent = void 0;
-      rowDragEndEvent = void 0;
-    },
+    (event) => handleDragStopped({
+      event,
+      internalTableContext,
+      moveColumnEvent,
+      rowDragMoveEvent,
+      rowDragEndEvent,
+      tableProps: props
+    }),
     [
       internalTableContext.onTableConfigChange,
       props.onRowDragEnd,
+      props.callOnRowDragEndAfterLeave,
       props.rowDragManaged,
       props.rows
     ]
@@ -111900,7 +111925,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80__default.default.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -111923,22 +111948,24 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80__default.default.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80__default.default.useCallback(() => {
-    tableRef?.current?.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = modifyRowGroupFieldsOnSelection?.([]) ?? [];
+    tableRef?.current?.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80__default.default.useCallback(
     (newValue) => {
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = modifyRowGroupFieldsOnSelection?.(fields) ?? fields;
       if (!ramda.equals(selectedColumns, newValue)) {
-        tableRef?.current?.setRowGrouping(fields);
+        tableRef?.current?.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80__default.default.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112080,7 +112107,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80__default.default.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80__default.default.createElement(
     QuickFilters,

package/dist/modern/index.d.cts

@@ -1006,6 +1006,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     modules: Module[];
     onCellValueChanged?: (params: CellValueChangeParams<any>) => void;
     onRowDragEnd?: (row: TRow, endIndex: number, node: Pick<RowNode, 'childIndex' | 'group'>, overNode?: Pick<RowNode, 'childIndex' | 'group' | 'data'>) => void;
+    callOnRowDragEndAfterLeave?: boolean;
     onRowGroupOpened?: (event: RowGroupToggledEvent<TRow>) => void;
     onRowSelected?: (event: RowSelectedEvent) => void;
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
@@ -1452,6 +1453,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1486,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1524,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/modern/index.d.ts

@@ -1006,6 +1006,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     modules: Module[];
     onCellValueChanged?: (params: CellValueChangeParams<any>) => void;
     onRowDragEnd?: (row: TRow, endIndex: number, node: Pick<RowNode, 'childIndex' | 'group'>, overNode?: Pick<RowNode, 'childIndex' | 'group' | 'data'>) => void;
+    callOnRowDragEndAfterLeave?: boolean;
     onRowGroupOpened?: (event: RowGroupToggledEvent<TRow>) => void;
     onRowSelected?: (event: RowSelectedEvent) => void;
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
@@ -1452,6 +1453,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1486,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1524,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/modern/index.js

@@ -103414,13 +103414,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103432,7 +103432,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -104350,6 +104350,62 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
   };
 };
 
+// src/utils/dragging.ts
+function handleDragStopped({
+  event,
+  internalTableContext,
+  moveColumnEvent: moveColumnEvent2,
+  rowDragMoveEvent: rowDragMoveEvent2,
+  rowDragEndEvent: rowDragEndEvent2,
+  tableProps
+}) {
+  if (event.target.className.includes("ag-header-cell")) {
+    internalTableContext.onTableConfigChange();
+  }
+  if (moveColumnEvent2) {
+    internalTableContext.analytics?.client.addEvent(
+      "design_system.data_table.column.repositioned",
+      {
+        client: internalTableContext.analytics.clientName,
+        column: moveColumnEvent2.column?.getColId(),
+        position: moveColumnEvent2.toIndex
+      }
+    );
+    if (tableProps.onRowDragEnd) {
+      const allColumns = event.columnApi.getAllGridColumns();
+      const firstVisibleColumnIndex = allColumns.findIndex(
+        (col) => col.isVisible()
+      );
+      if (moveColumnEvent2.toIndex === firstVisibleColumnIndex || moveColumnEvent2.column?.getColDef().rowDrag) {
+        adjustRowDragIcon(event.api, event.columnApi);
+      }
+    }
+    moveColumnEvent2 = void 0;
+  }
+  if (tableProps.onRowDragEnd && rowDragMoveEvent2) {
+    if (rowDragEndEvent2 && rowDragEndEvent2.overIndex >= 0) {
+      tableProps.onRowDragEnd(
+        rowDragEndEvent2.node.data,
+        rowDragEndEvent2.node.rowIndex,
+        rowDragEndEvent2.node,
+        rowDragEndEvent2.overNode
+      );
+    } else if (tableProps.callOnRowDragEndAfterLeave) {
+      tableProps.onRowDragEnd(
+        rowDragMoveEvent2.node.data,
+        rowDragMoveEvent2.node.rowIndex,
+        rowDragMoveEvent2.node,
+        rowDragMoveEvent2.overNode
+      );
+    }
+    if (tableProps.rows && !tableProps.rowDragManaged) {
+      event.api.setRowData(tableProps.rows);
+    }
+  }
+  rowDragMoveEvent2 = void 0;
+  rowDragEndEvent2 = void 0;
+}
+
 // src/utils/expandRows.ts
 function getStringifiedRoute(node) {
   return node.getRoute()?.map((r) => typeof r === "object" ? JSON.stringify(r) : r);
@@ -109672,49 +109728,18 @@ var Table = (props) => {
   }
   const onDragStopped = React80.useCallback(
     // eslint-disable-next-line complexity
-    (event) => {
-      if (event.target.className.includes("ag-header-cell")) {
-        internalTableContext.onTableConfigChange();
-      }
-      if (moveColumnEvent) {
-        internalTableContext.analytics?.client.addEvent(
-          "design_system.data_table.column.repositioned",
-          {
-            client: internalTableContext.analytics.clientName,
-            column: moveColumnEvent.column?.getColId(),
-            position: moveColumnEvent.toIndex
-          }
-        );
-        if (props.onRowDragEnd) {
-          const allColumns = event.columnApi.getAllGridColumns();
-          const firstVisibleColumnIndex = allColumns.findIndex(
-            (col) => col.isVisible()
-          );
-          if (moveColumnEvent.toIndex === firstVisibleColumnIndex || moveColumnEvent.column?.getColDef().rowDrag) {
-            adjustRowDragIcon(event.api, event.columnApi);
-          }
-        }
-        moveColumnEvent = void 0;
-      }
-      if (props.onRowDragEnd && rowDragMoveEvent) {
-        if (rowDragEndEvent && rowDragEndEvent.overIndex >= 0) {
-          props.onRowDragEnd(
-            rowDragEndEvent.node.data,
-            rowDragEndEvent.node.rowIndex,
-            rowDragEndEvent.node,
-            rowDragEndEvent.overNode
-          );
-        }
-        if (props.rows && !props.rowDragManaged) {
-          event.api.setRowData(props.rows);
-        }
-      }
-      rowDragMoveEvent = void 0;
-      rowDragEndEvent = void 0;
-    },
+    (event) => handleDragStopped({
+      event,
+      internalTableContext,
+      moveColumnEvent,
+      rowDragMoveEvent,
+      rowDragEndEvent,
+      tableProps: props
+    }),
     [
       internalTableContext.onTableConfigChange,
       props.onRowDragEnd,
+      props.callOnRowDragEndAfterLeave,
       props.rowDragManaged,
       props.rows
     ]
@@ -111887,7 +111912,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -111910,22 +111935,24 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80.useCallback(() => {
-    tableRef?.current?.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = modifyRowGroupFieldsOnSelection?.([]) ?? [];
+    tableRef?.current?.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80.useCallback(
     (newValue) => {
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = modifyRowGroupFieldsOnSelection?.(fields) ?? fields;
       if (!equals(selectedColumns, newValue)) {
-        tableRef?.current?.setRowGrouping(fields);
+        tableRef?.current?.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112067,7 +112094,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80.createElement(
     QuickFilters,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.40.0",
+  "version": "14.42.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",
@@ -75,9 +75,9 @@
   "dependencies": {
     "@procore/cdn-translations": "0.1.13",
     "@procore/error-pages": "^0.2.3",
-    "@procore/labs-datetime-select": "^0.2.0",
+    "@procore/labs-datetime-select": "^0.2.1",
     "@procore/labs-group-by-select": "4.1.0",
-    "@procore/toast-alert": "^5.1.1",
+    "@procore/toast-alert": "^5.1.2",
     "@procore/web-sdk-storage": "^0.1.0",
     "classnames": "2.5.1",
     "date-fns": "2.29.1",
@@ -108,7 +108,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "^12.12.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.34.1",
+    "@procore/core-react": "^12.36.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",