@procore/data-table 14.41.0 → 14.42.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/dist/legacy/index.cjs

@@ -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
     ]

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

@@ -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
     ]

package/dist/modern/index.cjs

@@ -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
     ]

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

@@ -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
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.41.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,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.1",
     "@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.36.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",