@procore/data-table 13.2.2 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 13.3.0
+
+### Minor Changes
+
+- c26355a12a: Allow selecting items across pages in SSRM
+
 ## 13.2.2
 
 ### Patch Changes

package/dist/legacy/index.d.mts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -588,13 +588,13 @@ interface TableApi {
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    selectRows: (rowIds: (string | number)[]) => void;
+    selectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Deselects row nodes by their respective row node IDs.
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    deselectRows: (rowIds: (string | number)[]) => void;
+    deselectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Set a function determining if selection is enabled for each row as it's loaded into the table.
      * Note: Changing this will not affect existing rows that have already been loaded. Additionally,

package/dist/legacy/index.d.ts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -588,13 +588,13 @@ interface TableApi {
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    selectRows: (rowIds: (string | number)[]) => void;
+    selectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Deselects row nodes by their respective row node IDs.
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    deselectRows: (rowIds: (string | number)[]) => void;
+    deselectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Set a function determining if selection is enabled for each row as it's loaded into the table.
      * Note: Changing this will not affect existing rows that have already been loaded. Additionally,

package/dist/legacy/index.js

@@ -55306,7 +55306,7 @@ function ClientSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.setSelected(!selected);
+        props.node.setSelected(!selected, void 0, "checkboxSelected");
       }
     }
   ));
@@ -55346,7 +55346,13 @@ function ServerSideRowCheckbox(props) {
       onClick: noop2,
       onChange: () => {
         var _a2, _b2;
-        props.node.isSelected() ? (_a2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a2.deselectRows([props.node.id]) : (_b2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b2.selectRows([props.node.id]);
+        props.node.isSelected() ? (_a2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a2.deselectRows(
+          [props.node.id],
+          "checkboxSelected"
+        ) : (_b2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b2.selectRows(
+          [props.node.id],
+          "checkboxSelected"
+        );
       }
     }
   ));
@@ -56482,8 +56488,12 @@ var GenericHeaderRenderer = (props) => {
     if (!onSSDR || !isFirstColumn2 || !props.selectionSSREnabled) {
       return;
     }
-    function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(props.api);
+    function updateSelectAllCheckbox(e) {
+      if (e.source === "uiSelectAll") {
+        return;
+      }
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const currentRows = getCurrentRows(props.api, isPagination);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -56500,19 +56510,36 @@ var GenericHeaderRenderer = (props) => {
       props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
       props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
     };
-  }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
-  const toggleSelectAll = () => {
+  }, [isFirstColumn2, props.selectionSSREnabled, props.api, onSSDR]);
+  const toggleSelectAll = React82__default.default.useCallback(() => {
     var _a2, _b, _c;
     const nextSelectedState = selectAll === "all" /* All */ ? "none" /* None */ : "all" /* All */;
     setSelectAll(nextSelectedState);
     (_a2 = props.onSelectAll) == null ? void 0 : _a2.call(props, nextSelectedState);
     const isSelectAll = nextSelectedState == "all" /* All */;
     if (props.selectionSSREnabled) {
-      isSelectAll ? (_b = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b.selectAll() : (_c = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _c.deselectAll();
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const rowsIdsToSelectOrDeselect = getCurrentRows(
+        props.api,
+        isPagination
+      ).map((node) => node.id);
+      isSelectAll ? (_b = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b.selectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      ) : (_c = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _c.deselectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      );
     } else {
       isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
     }
-  };
+  }, [
+    setSelectAll,
+    selectAll,
+    props.onSelectAll,
+    props.selectionSSREnabled,
+    props.api
+  ]);
   return /* @__PURE__ */ React82__default.default.createElement(
     coreReact.Flex,
     {
@@ -56548,9 +56575,7 @@ var GenericHeaderRenderer = (props) => {
           checked: selectAll === "all" /* All */,
           indeterminate: selectAll === "partial",
           onClick: (e) => e.stopPropagation(),
-          onChange: () => {
-            toggleSelectAll();
-          }
+          onChange: toggleSelectAll
         }
       ),
       /* @__PURE__ */ React82__default.default.createElement("div", { className: "ag-header-cell-label" }, /* @__PURE__ */ React82__default.default.createElement(
@@ -56622,6 +56647,20 @@ function GenericColumnGroupHeader(props) {
   ));
 }
 
+// src/utils/pagination.ts
+var getPaginationPageStartEnd = ({
+  activePage,
+  items: totalItems,
+  perPage
+}) => {
+  const numPages = Math.ceil(totalItems / perPage);
+  const actualActivePage = numPages === 0 ? 0 : activePage + 1;
+  return {
+    end: Math.min(actualActivePage * perPage, totalItems),
+    start: Math.max((actualActivePage - 1) * perPage, 0)
+  };
+};
+
 // src/utils/cellHelpers.tsx
 function withDataTableEditor(Component4, editorType) {
   return React82__default.default.forwardRef(
@@ -56703,7 +56742,7 @@ function getFrameworkComponents(headerMenuConfig, onSelectAll, selectionSSREnabl
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
-function getCurrentRows(gridApi) {
+function getCurrentRows(gridApi, useCurrentPageOnly) {
   var _a;
   let currentRows = [];
   if (((_a = gridApi == null ? void 0 : gridApi.getModel()) == null ? void 0 : _a.getType()) === "clientSide") {
@@ -56714,6 +56753,16 @@ function getCurrentRows(gridApi) {
     gridApi == null ? void 0 : gridApi.forEachNode((rowNode) => {
       currentRows.push(rowNode);
     });
+    if (useCurrentPageOnly) {
+      const { start, end } = getPaginationPageStartEnd({
+        items: (gridApi == null ? void 0 : gridApi.paginationGetRowCount()) || 0,
+        perPage: (gridApi == null ? void 0 : gridApi.paginationGetPageSize()) || 0,
+        activePage: (gridApi == null ? void 0 : gridApi.paginationGetCurrentPage()) || 0
+      });
+      return currentRows.filter(
+        (row2) => row2.rowIndex >= start && row2.rowIndex < end
+      );
+    }
   }
   return currentRows;
 }
@@ -58831,10 +58880,8 @@ var useRowSelectionState = () => {
     }
     selectionEventFunction();
     gridApi == null ? void 0 : gridApi.addEventListener("selectionChanged", selectionEventFunction);
-    gridApi == null ? void 0 : gridApi.addEventListener("paginationChanged", selectionEventFunction);
     return () => {
       gridApi == null ? void 0 : gridApi.removeEventListener("selectionChanged", selectionEventFunction);
-      gridApi == null ? void 0 : gridApi.removeEventListener("paginationChanged", selectionEventFunction);
     };
   }, [gridApi]);
   return selectedRows;
@@ -80871,24 +80918,24 @@ var useTableApi = ({
     });
   };
   const selectRows = React82__default.default.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds == null ? void 0 : rowIds.forEach((id) => {
         const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(true);
+        rowNode.setSelected(true, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
     [gridApi]
   );
   const deselectRows = React82__default.default.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds == null ? void 0 : rowIds.forEach((id) => {
         const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(false);
+        rowNode.setSelected(false, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
@@ -82271,19 +82318,13 @@ var TablePagination = ({
     page: 0,
     items: 0
   });
-  const { rowSelectionRef } = useInternalTableContext();
   React82__default.default.useEffect(() => {
     function onPaginationChanged(params) {
-      var _a;
       if (gridApi && params.api.paginationGetCurrentPage() !== pagination.page || pagination.items !== params.api.paginationGetRowCount()) {
         setPagination({
           page: params.api.paginationGetCurrentPage(),
           items: params.api.paginationGetRowCount()
         });
-        if (params.api.getModel().getType() === "serverSide") {
-          ((_a = rowSelectionRef == null ? void 0 : rowSelectionRef.current) == null ? void 0 : _a.affectedRows) && (rowSelectionRef.current.affectedRows = {});
-          gridApi == null ? void 0 : gridApi.deselectAll();
-        }
       }
     }
     gridApi == null ? void 0 : gridApi.addEventListener("paginationChanged", onPaginationChanged);

package/dist/legacy/index.mjs

@@ -55291,7 +55291,7 @@ function ClientSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.setSelected(!selected);
+        props.node.setSelected(!selected, void 0, "checkboxSelected");
       }
     }
   ));
@@ -55331,7 +55331,13 @@ function ServerSideRowCheckbox(props) {
       onClick: noop2,
       onChange: () => {
         var _a2, _b2;
-        props.node.isSelected() ? (_a2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a2.deselectRows([props.node.id]) : (_b2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b2.selectRows([props.node.id]);
+        props.node.isSelected() ? (_a2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a2.deselectRows(
+          [props.node.id],
+          "checkboxSelected"
+        ) : (_b2 = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b2.selectRows(
+          [props.node.id],
+          "checkboxSelected"
+        );
       }
     }
   ));
@@ -56467,8 +56473,12 @@ var GenericHeaderRenderer = (props) => {
     if (!onSSDR || !isFirstColumn2 || !props.selectionSSREnabled) {
       return;
     }
-    function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(props.api);
+    function updateSelectAllCheckbox(e) {
+      if (e.source === "uiSelectAll") {
+        return;
+      }
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const currentRows = getCurrentRows(props.api, isPagination);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -56485,19 +56495,36 @@ var GenericHeaderRenderer = (props) => {
       props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
       props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
     };
-  }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
-  const toggleSelectAll = () => {
+  }, [isFirstColumn2, props.selectionSSREnabled, props.api, onSSDR]);
+  const toggleSelectAll = React82.useCallback(() => {
     var _a2, _b, _c;
     const nextSelectedState = selectAll === "all" /* All */ ? "none" /* None */ : "all" /* All */;
     setSelectAll(nextSelectedState);
     (_a2 = props.onSelectAll) == null ? void 0 : _a2.call(props, nextSelectedState);
     const isSelectAll = nextSelectedState == "all" /* All */;
     if (props.selectionSSREnabled) {
-      isSelectAll ? (_b = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b.selectAll() : (_c = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _c.deselectAll();
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const rowsIdsToSelectOrDeselect = getCurrentRows(
+        props.api,
+        isPagination
+      ).map((node) => node.id);
+      isSelectAll ? (_b = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _b.selectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      ) : (_c = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _c.deselectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      );
     } else {
       isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
     }
-  };
+  }, [
+    setSelectAll,
+    selectAll,
+    props.onSelectAll,
+    props.selectionSSREnabled,
+    props.api
+  ]);
   return /* @__PURE__ */ React82.createElement(
     Flex,
     {
@@ -56533,9 +56560,7 @@ var GenericHeaderRenderer = (props) => {
           checked: selectAll === "all" /* All */,
           indeterminate: selectAll === "partial",
           onClick: (e) => e.stopPropagation(),
-          onChange: () => {
-            toggleSelectAll();
-          }
+          onChange: toggleSelectAll
         }
       ),
       /* @__PURE__ */ React82.createElement("div", { className: "ag-header-cell-label" }, /* @__PURE__ */ React82.createElement(
@@ -56607,6 +56632,20 @@ function GenericColumnGroupHeader(props) {
   ));
 }
 
+// src/utils/pagination.ts
+var getPaginationPageStartEnd = ({
+  activePage,
+  items: totalItems,
+  perPage
+}) => {
+  const numPages = Math.ceil(totalItems / perPage);
+  const actualActivePage = numPages === 0 ? 0 : activePage + 1;
+  return {
+    end: Math.min(actualActivePage * perPage, totalItems),
+    start: Math.max((actualActivePage - 1) * perPage, 0)
+  };
+};
+
 // src/utils/cellHelpers.tsx
 function withDataTableEditor(Component4, editorType) {
   return React82.forwardRef(
@@ -56688,7 +56727,7 @@ function getFrameworkComponents(headerMenuConfig, onSelectAll, selectionSSREnabl
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
-function getCurrentRows(gridApi) {
+function getCurrentRows(gridApi, useCurrentPageOnly) {
   var _a;
   let currentRows = [];
   if (((_a = gridApi == null ? void 0 : gridApi.getModel()) == null ? void 0 : _a.getType()) === "clientSide") {
@@ -56699,6 +56738,16 @@ function getCurrentRows(gridApi) {
     gridApi == null ? void 0 : gridApi.forEachNode((rowNode) => {
       currentRows.push(rowNode);
     });
+    if (useCurrentPageOnly) {
+      const { start, end } = getPaginationPageStartEnd({
+        items: (gridApi == null ? void 0 : gridApi.paginationGetRowCount()) || 0,
+        perPage: (gridApi == null ? void 0 : gridApi.paginationGetPageSize()) || 0,
+        activePage: (gridApi == null ? void 0 : gridApi.paginationGetCurrentPage()) || 0
+      });
+      return currentRows.filter(
+        (row2) => row2.rowIndex >= start && row2.rowIndex < end
+      );
+    }
   }
   return currentRows;
 }
@@ -58816,10 +58865,8 @@ var useRowSelectionState = () => {
     }
     selectionEventFunction();
     gridApi == null ? void 0 : gridApi.addEventListener("selectionChanged", selectionEventFunction);
-    gridApi == null ? void 0 : gridApi.addEventListener("paginationChanged", selectionEventFunction);
     return () => {
       gridApi == null ? void 0 : gridApi.removeEventListener("selectionChanged", selectionEventFunction);
-      gridApi == null ? void 0 : gridApi.removeEventListener("paginationChanged", selectionEventFunction);
     };
   }, [gridApi]);
   return selectedRows;
@@ -80856,24 +80903,24 @@ var useTableApi = ({
     });
   };
   const selectRows = React82.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds == null ? void 0 : rowIds.forEach((id) => {
         const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(true);
+        rowNode.setSelected(true, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
     [gridApi]
   );
   const deselectRows = React82.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds == null ? void 0 : rowIds.forEach((id) => {
         const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(false);
+        rowNode.setSelected(false, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
@@ -82256,19 +82303,13 @@ var TablePagination = ({
     page: 0,
     items: 0
   });
-  const { rowSelectionRef } = useInternalTableContext();
   React82.useEffect(() => {
     function onPaginationChanged(params) {
-      var _a;
       if (gridApi && params.api.paginationGetCurrentPage() !== pagination.page || pagination.items !== params.api.paginationGetRowCount()) {
         setPagination({
           page: params.api.paginationGetCurrentPage(),
           items: params.api.paginationGetRowCount()
         });
-        if (params.api.getModel().getType() === "serverSide") {
-          ((_a = rowSelectionRef == null ? void 0 : rowSelectionRef.current) == null ? void 0 : _a.affectedRows) && (rowSelectionRef.current.affectedRows = {});
-          gridApi == null ? void 0 : gridApi.deselectAll();
-        }
       }
     }
     gridApi == null ? void 0 : gridApi.addEventListener("paginationChanged", onPaginationChanged);

package/dist/modern/index.d.mts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -588,13 +588,13 @@ interface TableApi {
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    selectRows: (rowIds: (string | number)[]) => void;
+    selectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Deselects row nodes by their respective row node IDs.
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    deselectRows: (rowIds: (string | number)[]) => void;
+    deselectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Set a function determining if selection is enabled for each row as it's loaded into the table.
      * Note: Changing this will not affect existing rows that have already been loaded. Additionally,

package/dist/modern/index.d.ts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -588,13 +588,13 @@ interface TableApi {
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    selectRows: (rowIds: (string | number)[]) => void;
+    selectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Deselects row nodes by their respective row node IDs.
      * The row node ID is the one you provide from the callback `getRowId(data)`,
      * otherwise the ID is a number auto-generated by the grid when the row data is set.
      */
-    deselectRows: (rowIds: (string | number)[]) => void;
+    deselectRows: (rowIds: (string | number)[], source?: SelectionEventSourceType) => void;
     /**
      * Set a function determining if selection is enabled for each row as it's loaded into the table.
      * Note: Changing this will not affect existing rows that have already been loaded. Additionally,

package/dist/modern/index.js

@@ -55232,7 +55232,7 @@ function ClientSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.setSelected(!selected);
+        props.node.setSelected(!selected, void 0, "checkboxSelected");
       }
     }
   ));
@@ -55269,7 +55269,13 @@ function ServerSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.isSelected() ? tableRef?.current?.deselectRows([props.node.id]) : tableRef?.current?.selectRows([props.node.id]);
+        props.node.isSelected() ? tableRef?.current?.deselectRows(
+          [props.node.id],
+          "checkboxSelected"
+        ) : tableRef?.current?.selectRows(
+          [props.node.id],
+          "checkboxSelected"
+        );
       }
     }
   ));
@@ -56387,8 +56393,12 @@ var GenericHeaderRenderer = (props) => {
     if (!onSSDR || !isFirstColumn2 || !props.selectionSSREnabled) {
       return;
     }
-    function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(props.api);
+    function updateSelectAllCheckbox(e) {
+      if (e.source === "uiSelectAll") {
+        return;
+      }
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const currentRows = getCurrentRows(props.api, isPagination);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -56405,18 +56415,35 @@ var GenericHeaderRenderer = (props) => {
       props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
       props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
     };
-  }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
-  const toggleSelectAll = () => {
+  }, [isFirstColumn2, props.selectionSSREnabled, props.api, onSSDR]);
+  const toggleSelectAll = React82__default.default.useCallback(() => {
     const nextSelectedState = selectAll === "all" /* All */ ? "none" /* None */ : "all" /* All */;
     setSelectAll(nextSelectedState);
     props.onSelectAll?.(nextSelectedState);
     const isSelectAll = nextSelectedState == "all" /* All */;
     if (props.selectionSSREnabled) {
-      isSelectAll ? tableRef?.current?.selectAll() : tableRef?.current?.deselectAll();
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const rowsIdsToSelectOrDeselect = getCurrentRows(
+        props.api,
+        isPagination
+      ).map((node) => node.id);
+      isSelectAll ? tableRef?.current?.selectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      ) : tableRef?.current?.deselectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      );
     } else {
       isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
     }
-  };
+  }, [
+    setSelectAll,
+    selectAll,
+    props.onSelectAll,
+    props.selectionSSREnabled,
+    props.api
+  ]);
   return /* @__PURE__ */ React82__default.default.createElement(
     coreReact.Flex,
     {
@@ -56452,9 +56479,7 @@ var GenericHeaderRenderer = (props) => {
           checked: selectAll === "all" /* All */,
           indeterminate: selectAll === "partial",
           onClick: (e) => e.stopPropagation(),
-          onChange: () => {
-            toggleSelectAll();
-          }
+          onChange: toggleSelectAll
         }
       ),
       /* @__PURE__ */ React82__default.default.createElement("div", { className: "ag-header-cell-label" }, /* @__PURE__ */ React82__default.default.createElement(
@@ -56526,6 +56551,20 @@ function GenericColumnGroupHeader(props) {
   ));
 }
 
+// src/utils/pagination.ts
+var getPaginationPageStartEnd = ({
+  activePage,
+  items: totalItems,
+  perPage
+}) => {
+  const numPages = Math.ceil(totalItems / perPage);
+  const actualActivePage = numPages === 0 ? 0 : activePage + 1;
+  return {
+    end: Math.min(actualActivePage * perPage, totalItems),
+    start: Math.max((actualActivePage - 1) * perPage, 0)
+  };
+};
+
 // src/utils/cellHelpers.tsx
 function withDataTableEditor(Component4, editorType) {
   return React82__default.default.forwardRef(
@@ -56605,7 +56644,7 @@ function getFrameworkComponents(headerMenuConfig, onSelectAll, selectionSSREnabl
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
-function getCurrentRows(gridApi) {
+function getCurrentRows(gridApi, useCurrentPageOnly) {
   let currentRows = [];
   if (gridApi?.getModel()?.getType() === "clientSide") {
     gridApi?.forEachNodeAfterFilterAndSort((rowNode) => {
@@ -56615,6 +56654,16 @@ function getCurrentRows(gridApi) {
     gridApi?.forEachNode((rowNode) => {
       currentRows.push(rowNode);
     });
+    if (useCurrentPageOnly) {
+      const { start, end } = getPaginationPageStartEnd({
+        items: gridApi?.paginationGetRowCount() || 0,
+        perPage: gridApi?.paginationGetPageSize() || 0,
+        activePage: gridApi?.paginationGetCurrentPage() || 0
+      });
+      return currentRows.filter(
+        (row2) => row2.rowIndex >= start && row2.rowIndex < end
+      );
+    }
   }
   return currentRows;
 }
@@ -58723,10 +58772,8 @@ var useRowSelectionState = () => {
     }
     selectionEventFunction();
     gridApi?.addEventListener("selectionChanged", selectionEventFunction);
-    gridApi?.addEventListener("paginationChanged", selectionEventFunction);
     return () => {
       gridApi?.removeEventListener("selectionChanged", selectionEventFunction);
-      gridApi?.removeEventListener("paginationChanged", selectionEventFunction);
     };
   }, [gridApi]);
   return selectedRows;
@@ -80705,24 +80752,24 @@ var useTableApi = ({
     });
   };
   const selectRows = React82__default.default.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds?.forEach((id) => {
         const rowNode = gridApi?.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(true);
+        rowNode.setSelected(true, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
     [gridApi]
   );
   const deselectRows = React82__default.default.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds?.forEach((id) => {
         const rowNode = gridApi?.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(false);
+        rowNode.setSelected(false, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
@@ -82065,7 +82112,6 @@ var TablePagination = ({
     page: 0,
     items: 0
   });
-  const { rowSelectionRef } = useInternalTableContext();
   React82__default.default.useEffect(() => {
     function onPaginationChanged(params) {
       if (gridApi && params.api.paginationGetCurrentPage() !== pagination.page || pagination.items !== params.api.paginationGetRowCount()) {
@@ -82073,10 +82119,6 @@ var TablePagination = ({
           page: params.api.paginationGetCurrentPage(),
           items: params.api.paginationGetRowCount()
         });
-        if (params.api.getModel().getType() === "serverSide") {
-          rowSelectionRef?.current?.affectedRows && (rowSelectionRef.current.affectedRows = {});
-          gridApi?.deselectAll();
-        }
       }
     }
     gridApi?.addEventListener("paginationChanged", onPaginationChanged);

package/dist/modern/index.mjs

@@ -55217,7 +55217,7 @@ function ClientSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.setSelected(!selected);
+        props.node.setSelected(!selected, void 0, "checkboxSelected");
       }
     }
   ));
@@ -55254,7 +55254,13 @@ function ServerSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.isSelected() ? tableRef?.current?.deselectRows([props.node.id]) : tableRef?.current?.selectRows([props.node.id]);
+        props.node.isSelected() ? tableRef?.current?.deselectRows(
+          [props.node.id],
+          "checkboxSelected"
+        ) : tableRef?.current?.selectRows(
+          [props.node.id],
+          "checkboxSelected"
+        );
       }
     }
   ));
@@ -56372,8 +56378,12 @@ var GenericHeaderRenderer = (props) => {
     if (!onSSDR || !isFirstColumn2 || !props.selectionSSREnabled) {
       return;
     }
-    function updateSelectAllCheckbox() {
-      const currentRows = getCurrentRows(props.api);
+    function updateSelectAllCheckbox(e) {
+      if (e.source === "uiSelectAll") {
+        return;
+      }
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const currentRows = getCurrentRows(props.api, isPagination);
       const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
       const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
@@ -56390,18 +56400,35 @@ var GenericHeaderRenderer = (props) => {
       props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
       props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
     };
-  }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
-  const toggleSelectAll = () => {
+  }, [isFirstColumn2, props.selectionSSREnabled, props.api, onSSDR]);
+  const toggleSelectAll = React82.useCallback(() => {
     const nextSelectedState = selectAll === "all" /* All */ ? "none" /* None */ : "all" /* All */;
     setSelectAll(nextSelectedState);
     props.onSelectAll?.(nextSelectedState);
     const isSelectAll = nextSelectedState == "all" /* All */;
     if (props.selectionSSREnabled) {
-      isSelectAll ? tableRef?.current?.selectAll() : tableRef?.current?.deselectAll();
+      const isPagination = Boolean(props.api.paginationGetRowCount());
+      const rowsIdsToSelectOrDeselect = getCurrentRows(
+        props.api,
+        isPagination
+      ).map((node) => node.id);
+      isSelectAll ? tableRef?.current?.selectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      ) : tableRef?.current?.deselectRows(
+        rowsIdsToSelectOrDeselect,
+        "uiSelectAll"
+      );
     } else {
       isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
     }
-  };
+  }, [
+    setSelectAll,
+    selectAll,
+    props.onSelectAll,
+    props.selectionSSREnabled,
+    props.api
+  ]);
   return /* @__PURE__ */ React82.createElement(
     Flex,
     {
@@ -56437,9 +56464,7 @@ var GenericHeaderRenderer = (props) => {
           checked: selectAll === "all" /* All */,
           indeterminate: selectAll === "partial",
           onClick: (e) => e.stopPropagation(),
-          onChange: () => {
-            toggleSelectAll();
-          }
+          onChange: toggleSelectAll
         }
       ),
       /* @__PURE__ */ React82.createElement("div", { className: "ag-header-cell-label" }, /* @__PURE__ */ React82.createElement(
@@ -56511,6 +56536,20 @@ function GenericColumnGroupHeader(props) {
   ));
 }
 
+// src/utils/pagination.ts
+var getPaginationPageStartEnd = ({
+  activePage,
+  items: totalItems,
+  perPage
+}) => {
+  const numPages = Math.ceil(totalItems / perPage);
+  const actualActivePage = numPages === 0 ? 0 : activePage + 1;
+  return {
+    end: Math.min(actualActivePage * perPage, totalItems),
+    start: Math.max((actualActivePage - 1) * perPage, 0)
+  };
+};
+
 // src/utils/cellHelpers.tsx
 function withDataTableEditor(Component4, editorType) {
   return React82.forwardRef(
@@ -56590,7 +56629,7 @@ function getFrameworkComponents(headerMenuConfig, onSelectAll, selectionSSREnabl
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
-function getCurrentRows(gridApi) {
+function getCurrentRows(gridApi, useCurrentPageOnly) {
   let currentRows = [];
   if (gridApi?.getModel()?.getType() === "clientSide") {
     gridApi?.forEachNodeAfterFilterAndSort((rowNode) => {
@@ -56600,6 +56639,16 @@ function getCurrentRows(gridApi) {
     gridApi?.forEachNode((rowNode) => {
       currentRows.push(rowNode);
     });
+    if (useCurrentPageOnly) {
+      const { start, end } = getPaginationPageStartEnd({
+        items: gridApi?.paginationGetRowCount() || 0,
+        perPage: gridApi?.paginationGetPageSize() || 0,
+        activePage: gridApi?.paginationGetCurrentPage() || 0
+      });
+      return currentRows.filter(
+        (row2) => row2.rowIndex >= start && row2.rowIndex < end
+      );
+    }
   }
   return currentRows;
 }
@@ -58708,10 +58757,8 @@ var useRowSelectionState = () => {
     }
     selectionEventFunction();
     gridApi?.addEventListener("selectionChanged", selectionEventFunction);
-    gridApi?.addEventListener("paginationChanged", selectionEventFunction);
     return () => {
       gridApi?.removeEventListener("selectionChanged", selectionEventFunction);
-      gridApi?.removeEventListener("paginationChanged", selectionEventFunction);
     };
   }, [gridApi]);
   return selectedRows;
@@ -80690,24 +80737,24 @@ var useTableApi = ({
     });
   };
   const selectRows = React82.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds?.forEach((id) => {
         const rowNode = gridApi?.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(true);
+        rowNode.setSelected(true, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
     [gridApi]
   );
   const deselectRows = React82.useCallback(
-    (rowIds) => {
+    (rowIds, source) => {
       rowIds?.forEach((id) => {
         const rowNode = gridApi?.getRowNode(id.toString());
         if (!rowNode)
           return;
-        rowNode.setSelected(false);
+        rowNode.setSelected(false, void 0, source);
         onSelectionChanged(rowNode);
       });
     },
@@ -82050,7 +82097,6 @@ var TablePagination = ({
     page: 0,
     items: 0
   });
-  const { rowSelectionRef } = useInternalTableContext();
   React82.useEffect(() => {
     function onPaginationChanged(params) {
       if (gridApi && params.api.paginationGetCurrentPage() !== pagination.page || pagination.items !== params.api.paginationGetRowCount()) {
@@ -82058,10 +82104,6 @@ var TablePagination = ({
           page: params.api.paginationGetCurrentPage(),
           items: params.api.paginationGetRowCount()
         });
-        if (params.api.getModel().getType() === "serverSide") {
-          rowSelectionRef?.current?.affectedRows && (rowSelectionRef.current.affectedRows = {});
-          gridApi?.deselectAll();
-        }
       }
     }
     gridApi?.addEventListener("paginationChanged", onPaginationChanged);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "13.2.2",
+  "version": "13.3.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "main": "dist/legacy/index.js",
   "module": "dist/legacy/index.mjs",
@@ -103,7 +103,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.0.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "11.31.0",
+    "@procore/core-react": "11.31.1",
     "@procore/eslint-config": "10.0.0",
     "@procore/labs-financials-utils": "3.0.1",
     "@procore/labs-procore-environment": "3.2.0",