@procore/data-table 13.0.0 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 13.1.0
+
+### Minor Changes
+
+- f00d979137: Change keyboard interactions to improve editing
+
+### Patch Changes
+
+- 02726b2511: Using the passed in `maxHeight` prop to set table `maxHeight` instead of `height`
+- 08839931f5: Fix selectAll for serverSide table
+
 ## 13.0.0
 
 ### Major Changes

package/dist/legacy/index.js

@@ -55162,7 +55162,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
   var _a;
   const isNodeRootLevel = isNodeRootLevelOfGrid(selectionNode.parent);
   const nodeId = selectionNode.id;
-  const isRowSelected = !!selectionNode.isSelected();
+  const isRowSelected2 = !!selectionNode.isSelected();
   const parentChildrenMap = {};
   if (selectionNode.group || ((_a = selectionNode.parent) == null ? void 0 : _a.group) && !isNodeRootLevel) {
     currentRows.forEach((row) => {
@@ -55181,7 +55181,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
       }
     });
   }
-  const selectedState = isRowSelected ? rowSelectionState.selected : rowSelectionState.unselected;
+  const selectedState = isRowSelected2 ? rowSelectionState.selected : rowSelectionState.unselected;
   affectedRows[nodeId] = {
     node: selectionNode,
     selectedState
@@ -55227,7 +55227,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
     ).forEach((node) => {
       affectedRows[node.id] = {
         node,
-        selectedState: isRowSelected ? rowSelectionState.selected : rowSelectionState.unselected
+        selectedState: isRowSelected2 ? rowSelectionState.selected : rowSelectionState.unselected
       };
     });
   }
@@ -55289,7 +55289,8 @@ function getSelectedState(node, affectedRows) {
 function ServerSideRowCheckbox(props) {
   var _a, _b, _c, _d;
   const { rowSelectionRef } = useInternalTableContext();
-  const indeterminate = ((_b = (_a = rowSelectionRef.current) == null ? void 0 : _a.affectedRows[props.node.id]) == null ? void 0 : _b.selectedState) === "indeterminate" ? true : false;
+  const indeterminate = ((_b = (_a = rowSelectionRef.current) == null ? void 0 : _a.affectedRows[props.node.id]) == null ? void 0 : _b.selectedState) === "indeterminate";
+  const { tableRef } = useInternalTableContext();
   const checked = getSelectedState(
     props.node,
     (_c = rowSelectionRef.current) == null ? void 0 : _c.affectedRows
@@ -55303,7 +55304,8 @@ function ServerSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.setSelected(!props.node.isSelected());
+        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]);
       }
     }
   ));
@@ -55700,19 +55702,32 @@ var DataTableCellRenderer = ({
     )
   ));
 };
+function getStartingValue(eventKey, editorType, existingValue) {
+  if (eventKey && editorType === "input" && eventKey !== "Enter") {
+    if (eventKey === "Backspace") {
+      return "";
+    }
+    return eventKey;
+  }
+  return existingValue;
+}
 var DataTableCellEditor = React82__default.default.forwardRef(
   ({
+    api,
     colDef,
     Component: Component4,
     context,
     data,
     editorType,
+    eventKey,
     node,
     parseValue,
     stopEditing,
     value
   }, ref) => {
     var _a;
+    const startingValue = getStartingValue(eventKey, editorType, value);
+    const [currentValue, setCurrentValue] = React82.useState(startingValue);
     const { rowHeight, tableRef } = useInternalTableContext();
     const inlineEditorRef = React82__default.default.useRef(null);
     const inputRef = React82__default.default.useRef(null);
@@ -55750,19 +55765,39 @@ var DataTableCellEditor = React82__default.default.forwardRef(
         }
       };
     });
+    function handleKeyDown(event) {
+      if (node.rowIndex !== null && colDef.field && editorType === "input" && !event.shiftKey && !event.metaKey && !event.altKey && !event.ctrlKey) {
+        if (event.key === "ArrowUp") {
+          stopEditing(true);
+          api.setFocusedCell(node.rowIndex - 1, colDef.field, node.rowPinned);
+        } else if (event.key === "ArrowDown" || event.key === "Enter") {
+          stopEditing(true);
+          api.setFocusedCell(node.rowIndex + 1, colDef.field, node.rowPinned);
+        }
+      }
+    }
     React82__default.default.useEffect(() => {
-      var _a2, _b, _c, _d, _e, _f, _g;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
       if (editorType === "input") {
-        (_a2 = inputRef.current) == null ? void 0 : _a2.select();
-        (_b = inlineEditorRef.current) == null ? void 0 : _b.show();
+        if (eventKey) {
+          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        } else {
+          (_b = inputRef.current) == null ? void 0 : _b.select();
+        }
+        (_c = inlineEditorRef.current) == null ? void 0 : _c.show();
+        (_d = inputRef.current) == null ? void 0 : _d.addEventListener("keydown", handleKeyDown);
       } else if (editorType === "textarea") {
-        (_c = textAreaRef.current) == null ? void 0 : _c.select();
-        (_d = inlineEditorRef.current) == null ? void 0 : _d.show();
+        (_e = textAreaRef.current) == null ? void 0 : _e.select();
+        (_f = inlineEditorRef.current) == null ? void 0 : _f.show();
       } else {
-        (_e = selectRef.current) == null ? void 0 : _e.click();
-        (_f = selectRef.current) == null ? void 0 : _f.focus();
-        (_g = inlineEditorRef.current) == null ? void 0 : _g.show();
+        (_g = selectRef.current) == null ? void 0 : _g.click();
+        (_h = selectRef.current) == null ? void 0 : _h.focus();
+        (_i = inlineEditorRef.current) == null ? void 0 : _i.show();
       }
+      return () => {
+        var _a3;
+        (_a3 = inputRef.current) == null ? void 0 : _a3.removeEventListener("keydown", handleKeyDown);
+      };
     }, []);
     const handleRefs = (editorType2) => {
       const getRef = (refType) => coreReact.UNSAFE_mergeRefs(refType, ref);
@@ -55793,10 +55828,13 @@ var DataTableCellEditor = React82__default.default.forwardRef(
           parentId: context == null ? void 0 : context.parentId,
           rowPinned: node.rowPinned,
           rowHeight,
-          setDataValue: (field, newValue) => node.setDataValue(field, newValue),
+          setDataValue: (field, newValue) => {
+            node.setDataValue(field, newValue);
+            setCurrentValue(newValue);
+          },
           stopEditing,
           tableApi: tableRef == null ? void 0 : tableRef.current,
-          value,
+          value: currentValue,
           ref: handleRefs(editorType)
         }
       )
@@ -56172,12 +56210,15 @@ var SortComponent = (props) => {
   }
   return null;
 };
+var isRowSelected = (rowNode) => {
+  return Boolean(rowNode.selectable ? rowNode.isSelected() : true);
+};
 var GenericHeaderRenderer = (props) => {
   var _a;
   const colDef = props.column.getColDef();
   const HeaderNode = (_a = colDef.headerComponentParams) == null ? void 0 : _a.headerNode;
   const I18n = coreReact.useI18nContext();
-  const { columnApi, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82__default.default.useState(false);
@@ -56212,9 +56253,11 @@ var GenericHeaderRenderer = (props) => {
     };
   }, []);
   const onSortToggled = (event) => {
-    var _a2;
+    var _a2, _b, _c;
     let currentSort = null;
-    if (event.target.parentElement === ((_a2 = checkbox.current) == null ? void 0 : _a2.parentElement)) {
+    if (Array.from(((_b = (_a2 = checkbox.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.children) || []).includes(
+      (_c = event.target) == null ? void 0 : _c.parentElement
+    )) {
       return;
     }
     if (props.enableSorting) {
@@ -56266,6 +56309,9 @@ var GenericHeaderRenderer = (props) => {
   }, [props.column]);
   const [isExpandable, setIsExpandable] = React82__default.default.useState(false);
   React82__default.default.useEffect(() => {
+    if (onSSDR) {
+      return;
+    }
     const hasExpandableNodes = !!findNode(
       (node) => node.isExpandable(),
       props.api
@@ -56393,14 +56439,9 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentPageIds = getCurrentPageIds();
-      const selectedRowIds = (props.api.getSelectedRows() ?? []).map(
-        ({ id }) => id
-      );
-      const isAllSelected = currentPageIds.every(
-        (id) => selectedRowIds.includes(id)
-      );
-      const isPartialSelected = !isAllSelected && currentPageIds.some((id) => selectedRowIds.includes(id));
+      const currentRows = getCurrentRows(gridApi);
+      const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
+      const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
         setSelectAll("all" /* All */);
       } else if (isPartialSelected) {
@@ -56412,55 +56453,20 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
     props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
     return () => {
-      props.api.removeEventListener(
-        "selectionChanged",
-        updateSelectAllCheckbox
-      );
-      props.api.removeEventListener(
-        "paginationChanged",
-        updateSelectAllCheckbox
-      );
+      props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
+      props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
     };
   }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
-  const getCurrentPageIds = () => {
-    const rowCount = props.api.getDisplayedRowCount();
-    const lastGridIndex = rowCount - 1;
-    const currentPage = props.api.paginationGetCurrentPage();
-    const pageSize = props.api.paginationGetPageSize();
-    const startPageIndex = currentPage * pageSize;
-    let endPageIndex = (currentPage + 1) * pageSize - 1;
-    if (endPageIndex > lastGridIndex) {
-      endPageIndex = lastGridIndex;
-    }
-    return [...Array(endPageIndex - startPageIndex + 1).keys()].map(
-      (index) => {
-        var _a2, _b;
-        return (_b = (_a2 = props.api.getDisplayedRowAtIndex(index + startPageIndex)) == null ? void 0 : _a2.data) == null ? void 0 : _b.id;
-      }
-    );
-  };
-  const handleSSRSelectAll = (param) => {
-    var _a2;
-    if (!props.selectionSSREnabled) {
-      return;
-    }
-    const selectedRowIds = (props.api.getSelectedRows() ?? []).map(
-      ({ id }) => id
-    );
-    const currentPageIds = getCurrentPageIds();
-    if (param === "all" /* All */) {
-      (_a2 = [.../* @__PURE__ */ new Set([...selectedRowIds, ...currentPageIds])]) == null ? void 0 : _a2.forEach(
-        (id) => {
-          var _a3;
-          (_a3 = props.api.getRowNode(id.toString())) == null ? void 0 : _a3.setSelected(true);
-        }
-      );
-    }
-    if (param === "none" /* None */) {
-      currentPageIds.forEach((id) => {
-        var _a3;
-        (_a3 = props.api.getRowNode(id.toString())) == null ? void 0 : _a3.setSelected(false);
-      });
+  const toggleSelectAll = () => {
+    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();
+    } else {
+      isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
     }
   };
   return /* @__PURE__ */ React82__default.default.createElement(
@@ -56499,16 +56505,7 @@ var GenericHeaderRenderer = (props) => {
           indeterminate: selectAll === "partial",
           onClick: (e) => e.stopPropagation(),
           onChange: () => {
-            var _a2, _b;
-            if (selectAll === "all" /* All */) {
-              setSelectAll("none" /* None */);
-              (_a2 = props.onSelectAll) == null ? void 0 : _a2.call(props, "none" /* None */);
-              onSSDR ? handleSSRSelectAll("none" /* None */) : props.api.deselectAllFiltered();
-            } else {
-              setSelectAll("all" /* All */);
-              (_b = props.onSelectAll) == null ? void 0 : _b.call(props, "all" /* All */);
-              onSSDR ? handleSSRSelectAll("all" /* All */) : props.api.selectAllFiltered();
-            }
+            toggleSelectAll();
           }
         }
       ),
@@ -58792,18 +58789,31 @@ var ClientSideRowModelModule = {
   rowModel: "clientSide",
   beans: [ClientSideRowModel, FilterStage, SortStage, FlattenStage, SortService, FilterService, ImmutableService]
 };
+var getSelectedRows = ({
+  gridApi,
+  rowSelectionRef
+}) => {
+  var _a;
+  const serverSideRows = Object.values(
+    ((_a = rowSelectionRef == null ? void 0 : rowSelectionRef.current) == null ? void 0 : _a.affectedRows) || {}
+  ).filter(
+    (affectedRow) => affectedRow.selectedState === rowSelectionState.selected
+  ).map((affectedRow) => affectedRow.node);
+  return (gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide" ? serverSideRows : (gridApi == null ? void 0 : gridApi.getSelectedNodes()) ?? [];
+};
 var useRowSelectionState = () => {
   const [selectedRows, setSelectedRows] = React82__default.default.useState([]);
-  const { gridApi } = useInternalTableContext();
+  const { gridApi, rowSelectionRef } = useInternalTableContext();
   React82__default.default.useEffect(() => {
     function selectionEventFunction() {
-      const rows = (gridApi == null ? void 0 : gridApi.getSelectedNodes()) ?? [];
-      setSelectedRows(rows);
+      setSelectedRows(getSelectedRows({ gridApi, rowSelectionRef }));
     }
     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;
@@ -75711,6 +75721,7 @@ var useTableApi = ({
     filterStorage,
     onTableConfigChange,
     rowHeight,
+    rowSelectionRef,
     setRowHeight: internalSetRowHeight,
     searchStorage
   } = useInternalTableContext();
@@ -75845,11 +75856,11 @@ var useTableApi = ({
             columnDefinition: colDef,
             node: { rowPinned: false },
             data: {}
-          }) === true
+          })
         );
       }
       if (typeof colDef.bulkEditable === "boolean") {
-        return colDef.bulkEditable === true;
+        return colDef.bulkEditable;
       }
       if (typeof colDef.editable === "function") {
         return (
@@ -75861,7 +75872,7 @@ var useTableApi = ({
             columnDefinition: colDef,
             node: { rowPinned: false },
             data: {}
-          }) === true
+          })
         );
       }
       return colDef.editable === true;
@@ -76036,14 +76047,59 @@ var useTableApi = ({
     [internalSetRowHeight]
   );
   const gridApiMethods = React82__default.default.useMemo(
-    () => buildPartialTableApi({ gridApi, columnApi, rowHeight, filterStorage }),
+    () => buildPartialTableApi({
+      gridApi,
+      columnApi,
+      rowHeight,
+      filterStorage,
+      rowSelectionRef
+    }),
     [columnApi, gridApi, rowHeight, filterStorage]
   );
+  const onSelectionChanged = (rowNode) => {
+    var _a;
+    const isGrouped = rowNode.group || ((_a = rowNode.parent) == null ? void 0 : _a.group) && !isNodeRootLevelOfGrid(rowNode.parent);
+    const currAffectedRows = rowSelectionRef.current.affectedRows;
+    if (!isGrouped) {
+      rowSelectionRef.current.affectedRows = {
+        ...currAffectedRows,
+        [rowNode.id]: {
+          node: rowNode,
+          selectedState: rowNode.isSelected() ? rowSelectionState.selected : rowSelectionState.unselected
+        }
+      };
+      gridApi == null ? void 0 : gridApi.redrawRows({ rowNodes: [rowNode] });
+      return;
+    }
+    const rowsToUpdate = getAffectedRows(
+      getCurrentRows(gridApi),
+      rowNode,
+      currAffectedRows
+    );
+    const rowValues = Object.values(rowsToUpdate);
+    rowValues.forEach((row) => {
+      row.node.setSelected(
+        row.selectedState === rowSelectionState.selected,
+        false,
+        "checkboxSelected"
+      );
+    });
+    rowSelectionRef.current.affectedRows = {
+      ...currAffectedRows,
+      ...rowsToUpdate
+    };
+    gridApi == null ? void 0 : gridApi.redrawRows({
+      rowNodes: rowValues.map((rowValue) => rowValue.node)
+    });
+  };
   const selectRows = React82__default.default.useCallback(
     (rowIds) => {
       rowIds == null ? void 0 : rowIds.forEach((id) => {
-        var _a;
-        (_a = gridApi == null ? void 0 : gridApi.getRowNode(id.toString())) == null ? void 0 : _a.setSelected(true);
+        const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
+        if (!rowNode)
+          return;
+        rowNode.setSelected(true);
+        onSelectionChanged(rowNode);
       });
     },
     [gridApi]
@@ -76051,8 +76107,11 @@ var useTableApi = ({
   const deselectRows = React82__default.default.useCallback(
     (rowIds) => {
       rowIds == null ? void 0 : rowIds.forEach((id) => {
-        var _a;
-        (_a = gridApi == null ? void 0 : gridApi.getRowNode(id.toString())) == null ? void 0 : _a.setSelected(false);
+        const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
+        if (!rowNode)
+          return;
+        rowNode.setSelected(false);
+        onSelectionChanged(rowNode);
       });
     },
     [gridApi]
@@ -76101,7 +76160,8 @@ function buildPartialTableApi({
   gridApi,
   rowHeight,
   columnApi,
-  filterStorage
+  filterStorage,
+  rowSelectionRef
 }) {
   const setRowData = (rows) => {
     if ((gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide") {
@@ -76143,7 +76203,8 @@ function buildPartialTableApi({
       gridApi: detailGridApi,
       columnApi: detailGridColumnApi,
       rowHeight,
-      filterStorage
+      filterStorage,
+      rowSelectionRef
     }) : void 0;
   };
   const getTableConfiguration = () => {
@@ -76178,44 +76239,58 @@ function buildPartialTableApi({
     }
     return {};
   };
-  const getSelectedRows = () => {
+  const getSelectedRows2 = () => {
     return (gridApi == null ? void 0 : gridApi.getSelectedRows()) || [];
   };
-  const selectAll = () => {
-    const model = gridApi == null ? void 0 : gridApi.getModel();
-    if ((model == null ? void 0 : model.getType()) === "clientSide") {
-      gridApi == null ? void 0 : gridApi.selectAll();
-    }
-    gridApi == null ? void 0 : gridApi.forEachNode(function(node) {
-      if (node.isSelected() === false) {
-        node.setSelected(true, void 0, "apiSelectAll");
+  const rowsNeedingUpdateAfterSelectAll = (isSelectAll) => {
+    const prevRowNodes = (gridApi == null ? void 0 : gridApi.getRenderedNodes()) || [];
+    return prevRowNodes.filter((prevRowNode) => {
+      if (!prevRowNode.selectable) {
+        return false;
       }
+      return isSelectAll ? !prevRowNode.isSelected() : prevRowNode.isSelected();
     });
+  };
+  const updateAffectedRowsOnToggle = (isSelected) => {
+    const prevAffectedRows = rowSelectionRef.current.affectedRows;
+    const currentRows = getCurrentRows(gridApi);
+    rowSelectionRef.current.affectedRows = currentRows.reduce(
+      (accum, rowNode) => {
+        if (!rowNode.id) {
+          return accum;
+        }
+        return {
+          ...accum,
+          [rowNode.id]: {
+            node: rowNode,
+            selectedState: isSelected ? rowSelectionState.selected : rowSelectionState.unselected
+          }
+        };
+      },
+      prevAffectedRows
+    );
+  };
+  const selectAll = () => {
+    const nodesToUpdate = rowsNeedingUpdateAfterSelectAll(true);
+    gridApi == null ? void 0 : gridApi.selectAll();
     if ((gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide") {
-      gridApi == null ? void 0 : gridApi.redrawRows();
+      updateAffectedRowsOnToggle(true);
+      gridApi == null ? void 0 : gridApi.redrawRows({ rowNodes: nodesToUpdate });
     }
   };
   const deselectAll = () => {
-    const model = gridApi == null ? void 0 : gridApi.getModel();
-    if ((model == null ? void 0 : model.getType()) === "clientSide") {
-      gridApi == null ? void 0 : gridApi.deselectAll();
-    }
-    gridApi == null ? void 0 : gridApi.forEachNode(function(node) {
-      if (node.isSelected() === true) {
-        node.setSelected(false, void 0, "apiSelectAll");
-      }
-    });
+    const nodesToUpdate = rowsNeedingUpdateAfterSelectAll(false);
+    gridApi == null ? void 0 : gridApi.deselectAll();
     if ((gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide") {
-      gridApi == null ? void 0 : gridApi.redrawRows();
+      updateAffectedRowsOnToggle(false);
+      gridApi == null ? void 0 : gridApi.redrawRows({ rowNodes: nodesToUpdate });
     }
   };
   const collapseAll = () => {
     gridApi == null ? void 0 : gridApi.collapseAll();
   };
   const expandAll = () => {
-    gridApi == null ? void 0 : gridApi.forEachNode((node) => {
-      node.setExpanded(true);
-    });
+    gridApi == null ? void 0 : gridApi.expandAll();
   };
   const setRowNodeExpanded = (rowNode, expanded) => {
     return gridApi == null ? void 0 : gridApi.setRowNodeExpanded(rowNode, expanded);
@@ -76246,7 +76321,7 @@ function buildPartialTableApi({
     getFilteredAndSortedRowNodes,
     getRootAggregateData,
     getRowData,
-    getSelectedRows,
+    getSelectedRows: getSelectedRows2,
     getTableConfiguration,
     refreshCells,
     setPinnedBottomRowData,
@@ -77202,42 +77277,6 @@ var Table = (props) => {
     },
     [props.onRowGroupOpened]
   );
-  const onSelectionChanged = (event) => {
-    if (!internalTableContext.onServerSideDataRequest || event.source === "apiSelectAll") {
-      return;
-    }
-    const previousSelectedIds = Object.keys(
-      rowSelectionRef.current.affectedRows
-    ).filter(
-      (nodeId) => rowSelectionRef.current.affectedRows[nodeId].selectedState === rowSelectionState.selected
-    );
-    const affectedRows = rowSelectionRef.current.affectedRows;
-    const eventSelectedIds = event.api.getSelectedNodes().map((node) => node.id);
-    const diff = ramda.symmetricDifference(eventSelectedIds, previousSelectedIds);
-    const selectionNode = event.api.getRowNode(diff[0]);
-    if (selectionNode === void 0) {
-      return;
-    }
-    const rowsToUpdate = getAffectedRows(
-      getCurrentRows(event.api),
-      selectionNode,
-      affectedRows
-    );
-    Object.values(rowsToUpdate).forEach((row) => {
-      row.node.setSelected(
-        row.selectedState === rowSelectionState.selected,
-        void 0,
-        event.source
-      );
-    });
-    rowSelectionRef.current.affectedRows = {
-      ...affectedRows,
-      ...rowsToUpdate
-    };
-    gridApi == null ? void 0 : gridApi.redrawRows({
-      rowNodes: Object.values(rowsToUpdate).map((val) => val.node)
-    });
-  };
   const getGroupRowAgg = React82__default.default.useCallback(
     (params) => {
       const agNodes = params.nodes;
@@ -77391,6 +77430,7 @@ var Table = (props) => {
             cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
             defaultColDef,
             enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
+            enableCellEditingOnBackspace: true,
             excelStyles: transformToExcelStyles(props.excelDataTypeFormats),
             components: frameworkComponents,
             fullWidthCellRenderer: FullWidthCellRenderer(
@@ -77447,7 +77487,6 @@ var Table = (props) => {
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
             onRowSelected: internalOnRowSelected,
-            onSelectionChanged,
             onSortChanged: onSortEventChanged,
             onFilterChanged,
             onFirstDataRendered: props.onFirstDataRendered,
@@ -77500,13 +77539,19 @@ 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);