@procore/data-table 14.41.0 → 14.43.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 14.43.0
+
+### Minor Changes
+
+- b910752: Fix bulk edit crash for custom fields with peopleMultiSelect editor
+
+### Patch Changes
+
+- Updated dependencies [26ca426]
+  - @procore/labs-datetime-select@0.2.2
+
+## 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

package/dist/legacy/index.cjs

@@ -103435,7 +103435,7 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "currency":
+    case "currency": {
       const {
         placeholder: currencyPlaceholder,
         ...currencyParams
@@ -103453,7 +103453,8 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "dateSelect":
+    }
+    case "dateSelect": {
       const dateSelectParams = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.DateSelect,
@@ -103466,7 +103467,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "dateTimeSelect":
+    }
+    case "dateTimeSelect": {
       const dateTimeSelectParams = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         labsDatetimeSelect.DateTimeSelectField,
@@ -103479,7 +103481,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "multiSelect":
+    }
+    case "multiSelect": {
       const {
         placeholder: multiSelectPlaceholder,
         ...multiSelectParams
@@ -103501,6 +103504,7 @@ var BulkEditInput = (props) => {
           placeholder: multiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "number":
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.Number,
@@ -103514,7 +103518,7 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "person":
+    case "person": {
       const {
         placeholder: personPlaceholder,
         ...personParams
@@ -103537,7 +103541,8 @@ var BulkEditInput = (props) => {
           placeholder: personPlaceholder ?? placeholderForField
         }
       );
-    case "peopleMultiSelect":
+    }
+    case "peopleMultiSelect": {
       const {
         placeholder: peopleMultiSelectPlaceholder,
         ...peopleMultiSelectParams
@@ -103560,6 +103565,7 @@ var BulkEditInput = (props) => {
           placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "radio":
       return /* @__PURE__ */ React80__default.default.createElement(
         RadioList,
@@ -103573,7 +103579,7 @@ var BulkEditInput = (props) => {
           options
         }
       );
-    case "select":
+    case "select": {
       const {
         placeholder: selectPlaceholder,
         ...selectParams
@@ -103595,7 +103601,8 @@ var BulkEditInput = (props) => {
           placeholder: selectPlaceholder ?? placeholderForField
         }
       );
-    case "company":
+    }
+    case "company": {
       const {
         placeholder: companyPlaceholder,
         ...companyParams
@@ -103618,7 +103625,8 @@ var BulkEditInput = (props) => {
           placeholder: companyPlaceholder ?? placeholderForField
         }
       );
-    case "companiesMultiSelect":
+    }
+    case "companiesMultiSelect": {
       const {
         placeholder: companiesMultiSelectPlaceholder,
         ...companiesBulkEditorParams
@@ -103641,6 +103649,7 @@ var BulkEditInput = (props) => {
           placeholder: companiesMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     default:
       if (props.editor && (customBulkEditorFields == null ? void 0 : customBulkEditorFields[props.editor])) {
         return /* @__PURE__ */ React80__default.default.createElement(
@@ -104497,6 +104506,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 +109932,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
     ]

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;

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;

package/dist/legacy/index.js

@@ -103422,7 +103422,7 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "currency":
+    case "currency": {
       const {
         placeholder: currencyPlaceholder,
         ...currencyParams
@@ -103440,7 +103440,8 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "dateSelect":
+    }
+    case "dateSelect": {
       const dateSelectParams = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         Form.DateSelect,
@@ -103453,7 +103454,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "dateTimeSelect":
+    }
+    case "dateTimeSelect": {
       const dateTimeSelectParams = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         DateTimeSelectField,
@@ -103466,7 +103468,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "multiSelect":
+    }
+    case "multiSelect": {
       const {
         placeholder: multiSelectPlaceholder,
         ...multiSelectParams
@@ -103488,6 +103491,7 @@ var BulkEditInput = (props) => {
           placeholder: multiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "number":
       return /* @__PURE__ */ React80.createElement(
         Form.Number,
@@ -103501,7 +103505,7 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "person":
+    case "person": {
       const {
         placeholder: personPlaceholder,
         ...personParams
@@ -103524,7 +103528,8 @@ var BulkEditInput = (props) => {
           placeholder: personPlaceholder ?? placeholderForField
         }
       );
-    case "peopleMultiSelect":
+    }
+    case "peopleMultiSelect": {
       const {
         placeholder: peopleMultiSelectPlaceholder,
         ...peopleMultiSelectParams
@@ -103547,6 +103552,7 @@ var BulkEditInput = (props) => {
           placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "radio":
       return /* @__PURE__ */ React80.createElement(
         RadioList,
@@ -103560,7 +103566,7 @@ var BulkEditInput = (props) => {
           options
         }
       );
-    case "select":
+    case "select": {
       const {
         placeholder: selectPlaceholder,
         ...selectParams
@@ -103582,7 +103588,8 @@ var BulkEditInput = (props) => {
           placeholder: selectPlaceholder ?? placeholderForField
         }
       );
-    case "company":
+    }
+    case "company": {
       const {
         placeholder: companyPlaceholder,
         ...companyParams
@@ -103605,7 +103612,8 @@ var BulkEditInput = (props) => {
           placeholder: companyPlaceholder ?? placeholderForField
         }
       );
-    case "companiesMultiSelect":
+    }
+    case "companiesMultiSelect": {
       const {
         placeholder: companiesMultiSelectPlaceholder,
         ...companiesBulkEditorParams
@@ -103628,6 +103636,7 @@ var BulkEditInput = (props) => {
           placeholder: companiesMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     default:
       if (props.editor && (customBulkEditorFields == null ? void 0 : customBulkEditorFields[props.editor])) {
         return /* @__PURE__ */ React80.createElement(
@@ -104484,6 +104493,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 +109919,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
     ]

package/dist/modern/index.cjs

@@ -103323,7 +103323,7 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "currency":
+    case "currency": {
       const {
         placeholder: currencyPlaceholder,
         ...currencyParams
@@ -103341,7 +103341,8 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "dateSelect":
+    }
+    case "dateSelect": {
       const dateSelectParams = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.DateSelect,
@@ -103354,7 +103355,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "dateTimeSelect":
+    }
+    case "dateTimeSelect": {
       const dateTimeSelectParams = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         labsDatetimeSelect.DateTimeSelectField,
@@ -103367,7 +103369,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "multiSelect":
+    }
+    case "multiSelect": {
       const {
         placeholder: multiSelectPlaceholder,
         ...multiSelectParams
@@ -103389,6 +103392,7 @@ var BulkEditInput = (props) => {
           placeholder: multiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "number":
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.Number,
@@ -103402,7 +103406,7 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "person":
+    case "person": {
       const {
         placeholder: personPlaceholder,
         ...personParams
@@ -103425,7 +103429,8 @@ var BulkEditInput = (props) => {
           placeholder: personPlaceholder ?? placeholderForField
         }
       );
-    case "peopleMultiSelect":
+    }
+    case "peopleMultiSelect": {
       const {
         placeholder: peopleMultiSelectPlaceholder,
         ...peopleMultiSelectParams
@@ -103448,6 +103453,7 @@ var BulkEditInput = (props) => {
           placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "radio":
       return /* @__PURE__ */ React80__default.default.createElement(
         RadioList,
@@ -103461,7 +103467,7 @@ var BulkEditInput = (props) => {
           options
         }
       );
-    case "select":
+    case "select": {
       const {
         placeholder: selectPlaceholder,
         ...selectParams
@@ -103483,7 +103489,8 @@ var BulkEditInput = (props) => {
           placeholder: selectPlaceholder ?? placeholderForField
         }
       );
-    case "company":
+    }
+    case "company": {
       const {
         placeholder: companyPlaceholder,
         ...companyParams
@@ -103506,7 +103513,8 @@ var BulkEditInput = (props) => {
           placeholder: companyPlaceholder ?? placeholderForField
         }
       );
-    case "companiesMultiSelect":
+    }
+    case "companiesMultiSelect": {
       const {
         placeholder: companiesMultiSelectPlaceholder,
         ...companiesBulkEditorParams
@@ -103529,6 +103537,7 @@ var BulkEditInput = (props) => {
           placeholder: companiesMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     default:
       if (props.editor && customBulkEditorFields?.[props.editor]) {
         return /* @__PURE__ */ React80__default.default.createElement(
@@ -104363,6 +104372,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 +109750,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
     ]

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;

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;

package/dist/modern/index.js

@@ -103310,7 +103310,7 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "currency":
+    case "currency": {
       const {
         placeholder: currencyPlaceholder,
         ...currencyParams
@@ -103328,7 +103328,8 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "dateSelect":
+    }
+    case "dateSelect": {
       const dateSelectParams = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         Form.DateSelect,
@@ -103341,7 +103342,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "dateTimeSelect":
+    }
+    case "dateTimeSelect": {
       const dateTimeSelectParams = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         DateTimeSelectField,
@@ -103354,7 +103356,8 @@ var BulkEditInput = (props) => {
           name: field.input.name
         }
       );
-    case "multiSelect":
+    }
+    case "multiSelect": {
       const {
         placeholder: multiSelectPlaceholder,
         ...multiSelectParams
@@ -103376,6 +103379,7 @@ var BulkEditInput = (props) => {
           placeholder: multiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "number":
       return /* @__PURE__ */ React80.createElement(
         Form.Number,
@@ -103389,7 +103393,7 @@ var BulkEditInput = (props) => {
           value: field.input.value ?? ""
         }
       );
-    case "person":
+    case "person": {
       const {
         placeholder: personPlaceholder,
         ...personParams
@@ -103412,7 +103416,8 @@ var BulkEditInput = (props) => {
           placeholder: personPlaceholder ?? placeholderForField
         }
       );
-    case "peopleMultiSelect":
+    }
+    case "peopleMultiSelect": {
       const {
         placeholder: peopleMultiSelectPlaceholder,
         ...peopleMultiSelectParams
@@ -103435,6 +103440,7 @@ var BulkEditInput = (props) => {
           placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     case "radio":
       return /* @__PURE__ */ React80.createElement(
         RadioList,
@@ -103448,7 +103454,7 @@ var BulkEditInput = (props) => {
           options
         }
       );
-    case "select":
+    case "select": {
       const {
         placeholder: selectPlaceholder,
         ...selectParams
@@ -103470,7 +103476,8 @@ var BulkEditInput = (props) => {
           placeholder: selectPlaceholder ?? placeholderForField
         }
       );
-    case "company":
+    }
+    case "company": {
       const {
         placeholder: companyPlaceholder,
         ...companyParams
@@ -103493,7 +103500,8 @@ var BulkEditInput = (props) => {
           placeholder: companyPlaceholder ?? placeholderForField
         }
       );
-    case "companiesMultiSelect":
+    }
+    case "companiesMultiSelect": {
       const {
         placeholder: companiesMultiSelectPlaceholder,
         ...companiesBulkEditorParams
@@ -103516,6 +103524,7 @@ var BulkEditInput = (props) => {
           placeholder: companiesMultiSelectPlaceholder ?? placeholderForField
         }
       );
+    }
     default:
       if (props.editor && customBulkEditorFields?.[props.editor]) {
         return /* @__PURE__ */ React80.createElement(
@@ -104350,6 +104359,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 +109737,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
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.41.0",
+  "version": "14.43.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,7 +75,7 @@
   "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.2",
     "@procore/labs-group-by-select": "4.1.0",
     "@procore/toast-alert": "^5.1.2",
     "@procore/web-sdk-storage": "^0.1.0",
@@ -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.35.0",
+    "@procore/core-react": "^12.37.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",
@@ -132,7 +132,7 @@
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@typescript-eslint/parser": "5.48.1",
     "css-loader": "6.7.1",
-    "cypress": "^13.15.1",
+    "cypress": "^13.17.0",
     "cypress-axe": "1.5.0",
     "cypress-multi-reporters": "^2.0.5",
     "cypress-real-events": "^1.11.0",