@procore/data-table 13.0.0 → 13.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
- import React82, { forwardRef, useContext, useRef, useState, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, useEffect, Component as Component$1, createElement } from 'react';
2
- import { startsWith, equals, omit, isNil, mergeDeepLeft, symmetricDifference, intersection, isEmpty, groupBy } from 'ramda';
1
+ import React82, { useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, useEffect, Component as Component$1, createElement } from 'react';
2
+ import { startsWith, equals, omit, isNil, mergeDeepLeft, intersection, isEmpty, groupBy } from 'ramda';
3
3
  import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner, FlexList, Typography, Tooltip, Button, Required, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Pagination, Link, AvatarStack, Pill, Typeahead, UNSAFE_FilterToken, useI18n, I18nContext, UNSAFE_SuperSelect, Avatar, MultiSelect, H3, Checkbox, useVisibility, UNSAFE_useSuperSelectContext, DropdownFlyout, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
4
4
  import classnames from 'classnames/bind';
5
5
  import { Error as Error$1, Grip, Pencil, Building, Calendar as Calendar$1, CaretsInVertical, CaretsOutVertical, CaretsOutVerticalWithLine, CaretsIn, CaretsOut, ArrowDown, ArrowUp, CaretDown, CaretRight } from '@procore/core-icons';
@@ -55147,7 +55147,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
55147
55147
  var _a;
55148
55148
  const isNodeRootLevel = isNodeRootLevelOfGrid(selectionNode.parent);
55149
55149
  const nodeId = selectionNode.id;
55150
- const isRowSelected = !!selectionNode.isSelected();
55150
+ const isRowSelected2 = !!selectionNode.isSelected();
55151
55151
  const parentChildrenMap = {};
55152
55152
  if (selectionNode.group || ((_a = selectionNode.parent) == null ? void 0 : _a.group) && !isNodeRootLevel) {
55153
55153
  currentRows.forEach((row) => {
@@ -55166,7 +55166,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
55166
55166
  }
55167
55167
  });
55168
55168
  }
55169
- const selectedState = isRowSelected ? rowSelectionState.selected : rowSelectionState.unselected;
55169
+ const selectedState = isRowSelected2 ? rowSelectionState.selected : rowSelectionState.unselected;
55170
55170
  affectedRows[nodeId] = {
55171
55171
  node: selectionNode,
55172
55172
  selectedState
@@ -55212,7 +55212,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
55212
55212
  ).forEach((node) => {
55213
55213
  affectedRows[node.id] = {
55214
55214
  node,
55215
- selectedState: isRowSelected ? rowSelectionState.selected : rowSelectionState.unselected
55215
+ selectedState: isRowSelected2 ? rowSelectionState.selected : rowSelectionState.unselected
55216
55216
  };
55217
55217
  });
55218
55218
  }
@@ -55274,7 +55274,8 @@ function getSelectedState(node, affectedRows) {
55274
55274
  function ServerSideRowCheckbox(props) {
55275
55275
  var _a, _b, _c, _d;
55276
55276
  const { rowSelectionRef } = useInternalTableContext();
55277
- const indeterminate = ((_b = (_a = rowSelectionRef.current) == null ? void 0 : _a.affectedRows[props.node.id]) == null ? void 0 : _b.selectedState) === "indeterminate" ? true : false;
55277
+ const indeterminate = ((_b = (_a = rowSelectionRef.current) == null ? void 0 : _a.affectedRows[props.node.id]) == null ? void 0 : _b.selectedState) === "indeterminate";
55278
+ const { tableRef } = useInternalTableContext();
55278
55279
  const checked = getSelectedState(
55279
55280
  props.node,
55280
55281
  (_c = rowSelectionRef.current) == null ? void 0 : _c.affectedRows
@@ -55288,7 +55289,8 @@ function ServerSideRowCheckbox(props) {
55288
55289
  "data-qa": "rowCheckbox",
55289
55290
  onClick: noop2,
55290
55291
  onChange: () => {
55291
- props.node.setSelected(!props.node.isSelected());
55292
+ var _a2, _b2;
55293
+ 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]);
55292
55294
  }
55293
55295
  }
55294
55296
  ));
@@ -55685,19 +55687,32 @@ var DataTableCellRenderer = ({
55685
55687
  )
55686
55688
  ));
55687
55689
  };
55690
+ function getStartingValue(eventKey, editorType, existingValue) {
55691
+ if (eventKey && editorType === "input" && eventKey !== "Enter") {
55692
+ if (eventKey === "Backspace") {
55693
+ return "";
55694
+ }
55695
+ return eventKey;
55696
+ }
55697
+ return existingValue;
55698
+ }
55688
55699
  var DataTableCellEditor = React82.forwardRef(
55689
55700
  ({
55701
+ api,
55690
55702
  colDef,
55691
55703
  Component: Component4,
55692
55704
  context,
55693
55705
  data,
55694
55706
  editorType,
55707
+ eventKey,
55695
55708
  node,
55696
55709
  parseValue,
55697
55710
  stopEditing,
55698
55711
  value
55699
55712
  }, ref) => {
55700
55713
  var _a;
55714
+ const startingValue = getStartingValue(eventKey, editorType, value);
55715
+ const [currentValue, setCurrentValue] = useState(startingValue);
55701
55716
  const { rowHeight, tableRef } = useInternalTableContext();
55702
55717
  const inlineEditorRef = React82.useRef(null);
55703
55718
  const inputRef = React82.useRef(null);
@@ -55735,19 +55750,39 @@ var DataTableCellEditor = React82.forwardRef(
55735
55750
  }
55736
55751
  };
55737
55752
  });
55753
+ function handleKeyDown(event) {
55754
+ if (node.rowIndex !== null && colDef.field && editorType === "input" && !event.shiftKey && !event.metaKey && !event.altKey && !event.ctrlKey) {
55755
+ if (event.key === "ArrowUp") {
55756
+ stopEditing(true);
55757
+ api.setFocusedCell(node.rowIndex - 1, colDef.field, node.rowPinned);
55758
+ } else if (event.key === "ArrowDown" || event.key === "Enter") {
55759
+ stopEditing(true);
55760
+ api.setFocusedCell(node.rowIndex + 1, colDef.field, node.rowPinned);
55761
+ }
55762
+ }
55763
+ }
55738
55764
  React82.useEffect(() => {
55739
- var _a2, _b, _c, _d, _e, _f, _g;
55765
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
55740
55766
  if (editorType === "input") {
55741
- (_a2 = inputRef.current) == null ? void 0 : _a2.select();
55742
- (_b = inlineEditorRef.current) == null ? void 0 : _b.show();
55767
+ if (eventKey) {
55768
+ (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
55769
+ } else {
55770
+ (_b = inputRef.current) == null ? void 0 : _b.select();
55771
+ }
55772
+ (_c = inlineEditorRef.current) == null ? void 0 : _c.show();
55773
+ (_d = inputRef.current) == null ? void 0 : _d.addEventListener("keydown", handleKeyDown);
55743
55774
  } else if (editorType === "textarea") {
55744
- (_c = textAreaRef.current) == null ? void 0 : _c.select();
55745
- (_d = inlineEditorRef.current) == null ? void 0 : _d.show();
55775
+ (_e = textAreaRef.current) == null ? void 0 : _e.select();
55776
+ (_f = inlineEditorRef.current) == null ? void 0 : _f.show();
55746
55777
  } else {
55747
- (_e = selectRef.current) == null ? void 0 : _e.click();
55748
- (_f = selectRef.current) == null ? void 0 : _f.focus();
55749
- (_g = inlineEditorRef.current) == null ? void 0 : _g.show();
55778
+ (_g = selectRef.current) == null ? void 0 : _g.click();
55779
+ (_h = selectRef.current) == null ? void 0 : _h.focus();
55780
+ (_i = inlineEditorRef.current) == null ? void 0 : _i.show();
55750
55781
  }
55782
+ return () => {
55783
+ var _a3;
55784
+ (_a3 = inputRef.current) == null ? void 0 : _a3.removeEventListener("keydown", handleKeyDown);
55785
+ };
55751
55786
  }, []);
55752
55787
  const handleRefs = (editorType2) => {
55753
55788
  const getRef = (refType) => UNSAFE_mergeRefs(refType, ref);
@@ -55778,10 +55813,13 @@ var DataTableCellEditor = React82.forwardRef(
55778
55813
  parentId: context == null ? void 0 : context.parentId,
55779
55814
  rowPinned: node.rowPinned,
55780
55815
  rowHeight,
55781
- setDataValue: (field, newValue) => node.setDataValue(field, newValue),
55816
+ setDataValue: (field, newValue) => {
55817
+ node.setDataValue(field, newValue);
55818
+ setCurrentValue(newValue);
55819
+ },
55782
55820
  stopEditing,
55783
55821
  tableApi: tableRef == null ? void 0 : tableRef.current,
55784
- value,
55822
+ value: currentValue,
55785
55823
  ref: handleRefs(editorType)
55786
55824
  }
55787
55825
  )
@@ -56157,12 +56195,15 @@ var SortComponent = (props) => {
56157
56195
  }
56158
56196
  return null;
56159
56197
  };
56198
+ var isRowSelected = (rowNode) => {
56199
+ return Boolean(rowNode.selectable ? rowNode.isSelected() : true);
56200
+ };
56160
56201
  var GenericHeaderRenderer = (props) => {
56161
56202
  var _a;
56162
56203
  const colDef = props.column.getColDef();
56163
56204
  const HeaderNode = (_a = colDef.headerComponentParams) == null ? void 0 : _a.headerNode;
56164
56205
  const I18n = useI18nContext();
56165
- const { columnApi, gridApi, onServerSideDataRequest } = useInternalTableContext();
56206
+ const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
56166
56207
  const onSSDR = Boolean(onServerSideDataRequest);
56167
56208
  const [sortOrder, setSortOrder] = React82.useState(props.column.getSort());
56168
56209
  const [isFirstColumn2, setIsFirstColumn] = React82.useState(false);
@@ -56197,9 +56238,11 @@ var GenericHeaderRenderer = (props) => {
56197
56238
  };
56198
56239
  }, []);
56199
56240
  const onSortToggled = (event) => {
56200
- var _a2;
56241
+ var _a2, _b, _c;
56201
56242
  let currentSort = null;
56202
- if (event.target.parentElement === ((_a2 = checkbox.current) == null ? void 0 : _a2.parentElement)) {
56243
+ if (Array.from(((_b = (_a2 = checkbox.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.children) || []).includes(
56244
+ (_c = event.target) == null ? void 0 : _c.parentElement
56245
+ )) {
56203
56246
  return;
56204
56247
  }
56205
56248
  if (props.enableSorting) {
@@ -56251,6 +56294,9 @@ var GenericHeaderRenderer = (props) => {
56251
56294
  }, [props.column]);
56252
56295
  const [isExpandable, setIsExpandable] = React82.useState(false);
56253
56296
  React82.useEffect(() => {
56297
+ if (onSSDR) {
56298
+ return;
56299
+ }
56254
56300
  const hasExpandableNodes = !!findNode(
56255
56301
  (node) => node.isExpandable(),
56256
56302
  props.api
@@ -56378,14 +56424,9 @@ var GenericHeaderRenderer = (props) => {
56378
56424
  return;
56379
56425
  }
56380
56426
  function updateSelectAllCheckbox() {
56381
- const currentPageIds = getCurrentPageIds();
56382
- const selectedRowIds = (props.api.getSelectedRows() ?? []).map(
56383
- ({ id }) => id
56384
- );
56385
- const isAllSelected = currentPageIds.every(
56386
- (id) => selectedRowIds.includes(id)
56387
- );
56388
- const isPartialSelected = !isAllSelected && currentPageIds.some((id) => selectedRowIds.includes(id));
56427
+ const currentRows = getCurrentRows(gridApi);
56428
+ const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
56429
+ const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
56389
56430
  if (isAllSelected) {
56390
56431
  setSelectAll("all" /* All */);
56391
56432
  } else if (isPartialSelected) {
@@ -56397,55 +56438,20 @@ var GenericHeaderRenderer = (props) => {
56397
56438
  props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
56398
56439
  props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
56399
56440
  return () => {
56400
- props.api.removeEventListener(
56401
- "selectionChanged",
56402
- updateSelectAllCheckbox
56403
- );
56404
- props.api.removeEventListener(
56405
- "paginationChanged",
56406
- updateSelectAllCheckbox
56407
- );
56441
+ props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
56442
+ props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
56408
56443
  };
56409
56444
  }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
56410
- const getCurrentPageIds = () => {
56411
- const rowCount = props.api.getDisplayedRowCount();
56412
- const lastGridIndex = rowCount - 1;
56413
- const currentPage = props.api.paginationGetCurrentPage();
56414
- const pageSize = props.api.paginationGetPageSize();
56415
- const startPageIndex = currentPage * pageSize;
56416
- let endPageIndex = (currentPage + 1) * pageSize - 1;
56417
- if (endPageIndex > lastGridIndex) {
56418
- endPageIndex = lastGridIndex;
56419
- }
56420
- return [...Array(endPageIndex - startPageIndex + 1).keys()].map(
56421
- (index) => {
56422
- var _a2, _b;
56423
- return (_b = (_a2 = props.api.getDisplayedRowAtIndex(index + startPageIndex)) == null ? void 0 : _a2.data) == null ? void 0 : _b.id;
56424
- }
56425
- );
56426
- };
56427
- const handleSSRSelectAll = (param) => {
56428
- var _a2;
56429
- if (!props.selectionSSREnabled) {
56430
- return;
56431
- }
56432
- const selectedRowIds = (props.api.getSelectedRows() ?? []).map(
56433
- ({ id }) => id
56434
- );
56435
- const currentPageIds = getCurrentPageIds();
56436
- if (param === "all" /* All */) {
56437
- (_a2 = [.../* @__PURE__ */ new Set([...selectedRowIds, ...currentPageIds])]) == null ? void 0 : _a2.forEach(
56438
- (id) => {
56439
- var _a3;
56440
- (_a3 = props.api.getRowNode(id.toString())) == null ? void 0 : _a3.setSelected(true);
56441
- }
56442
- );
56443
- }
56444
- if (param === "none" /* None */) {
56445
- currentPageIds.forEach((id) => {
56446
- var _a3;
56447
- (_a3 = props.api.getRowNode(id.toString())) == null ? void 0 : _a3.setSelected(false);
56448
- });
56445
+ const toggleSelectAll = () => {
56446
+ var _a2, _b, _c;
56447
+ const nextSelectedState = selectAll === "all" /* All */ ? "none" /* None */ : "all" /* All */;
56448
+ setSelectAll(nextSelectedState);
56449
+ (_a2 = props.onSelectAll) == null ? void 0 : _a2.call(props, nextSelectedState);
56450
+ const isSelectAll = nextSelectedState == "all" /* All */;
56451
+ if (props.selectionSSREnabled) {
56452
+ 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();
56453
+ } else {
56454
+ isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
56449
56455
  }
56450
56456
  };
56451
56457
  return /* @__PURE__ */ React82.createElement(
@@ -56484,16 +56490,7 @@ var GenericHeaderRenderer = (props) => {
56484
56490
  indeterminate: selectAll === "partial",
56485
56491
  onClick: (e) => e.stopPropagation(),
56486
56492
  onChange: () => {
56487
- var _a2, _b;
56488
- if (selectAll === "all" /* All */) {
56489
- setSelectAll("none" /* None */);
56490
- (_a2 = props.onSelectAll) == null ? void 0 : _a2.call(props, "none" /* None */);
56491
- onSSDR ? handleSSRSelectAll("none" /* None */) : props.api.deselectAllFiltered();
56492
- } else {
56493
- setSelectAll("all" /* All */);
56494
- (_b = props.onSelectAll) == null ? void 0 : _b.call(props, "all" /* All */);
56495
- onSSDR ? handleSSRSelectAll("all" /* All */) : props.api.selectAllFiltered();
56496
- }
56493
+ toggleSelectAll();
56497
56494
  }
56498
56495
  }
56499
56496
  ),
@@ -58777,18 +58774,31 @@ var ClientSideRowModelModule = {
58777
58774
  rowModel: "clientSide",
58778
58775
  beans: [ClientSideRowModel, FilterStage, SortStage, FlattenStage, SortService, FilterService, ImmutableService]
58779
58776
  };
58777
+ var getSelectedRows = ({
58778
+ gridApi,
58779
+ rowSelectionRef
58780
+ }) => {
58781
+ var _a;
58782
+ const serverSideRows = Object.values(
58783
+ ((_a = rowSelectionRef == null ? void 0 : rowSelectionRef.current) == null ? void 0 : _a.affectedRows) || {}
58784
+ ).filter(
58785
+ (affectedRow) => affectedRow.selectedState === rowSelectionState.selected
58786
+ ).map((affectedRow) => affectedRow.node);
58787
+ return (gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide" ? serverSideRows : (gridApi == null ? void 0 : gridApi.getSelectedNodes()) ?? [];
58788
+ };
58780
58789
  var useRowSelectionState = () => {
58781
58790
  const [selectedRows, setSelectedRows] = React82.useState([]);
58782
- const { gridApi } = useInternalTableContext();
58791
+ const { gridApi, rowSelectionRef } = useInternalTableContext();
58783
58792
  React82.useEffect(() => {
58784
58793
  function selectionEventFunction() {
58785
- const rows = (gridApi == null ? void 0 : gridApi.getSelectedNodes()) ?? [];
58786
- setSelectedRows(rows);
58794
+ setSelectedRows(getSelectedRows({ gridApi, rowSelectionRef }));
58787
58795
  }
58788
58796
  selectionEventFunction();
58789
58797
  gridApi == null ? void 0 : gridApi.addEventListener("selectionChanged", selectionEventFunction);
58798
+ gridApi == null ? void 0 : gridApi.addEventListener("paginationChanged", selectionEventFunction);
58790
58799
  return () => {
58791
58800
  gridApi == null ? void 0 : gridApi.removeEventListener("selectionChanged", selectionEventFunction);
58801
+ gridApi == null ? void 0 : gridApi.removeEventListener("paginationChanged", selectionEventFunction);
58792
58802
  };
58793
58803
  }, [gridApi]);
58794
58804
  return selectedRows;
@@ -75696,6 +75706,7 @@ var useTableApi = ({
75696
75706
  filterStorage,
75697
75707
  onTableConfigChange,
75698
75708
  rowHeight,
75709
+ rowSelectionRef,
75699
75710
  setRowHeight: internalSetRowHeight,
75700
75711
  searchStorage
75701
75712
  } = useInternalTableContext();
@@ -75830,11 +75841,11 @@ var useTableApi = ({
75830
75841
  columnDefinition: colDef,
75831
75842
  node: { rowPinned: false },
75832
75843
  data: {}
75833
- }) === true
75844
+ })
75834
75845
  );
75835
75846
  }
75836
75847
  if (typeof colDef.bulkEditable === "boolean") {
75837
- return colDef.bulkEditable === true;
75848
+ return colDef.bulkEditable;
75838
75849
  }
75839
75850
  if (typeof colDef.editable === "function") {
75840
75851
  return (
@@ -75846,7 +75857,7 @@ var useTableApi = ({
75846
75857
  columnDefinition: colDef,
75847
75858
  node: { rowPinned: false },
75848
75859
  data: {}
75849
- }) === true
75860
+ })
75850
75861
  );
75851
75862
  }
75852
75863
  return colDef.editable === true;
@@ -76021,14 +76032,59 @@ var useTableApi = ({
76021
76032
  [internalSetRowHeight]
76022
76033
  );
76023
76034
  const gridApiMethods = React82.useMemo(
76024
- () => buildPartialTableApi({ gridApi, columnApi, rowHeight, filterStorage }),
76035
+ () => buildPartialTableApi({
76036
+ gridApi,
76037
+ columnApi,
76038
+ rowHeight,
76039
+ filterStorage,
76040
+ rowSelectionRef
76041
+ }),
76025
76042
  [columnApi, gridApi, rowHeight, filterStorage]
76026
76043
  );
76044
+ const onSelectionChanged = (rowNode) => {
76045
+ var _a;
76046
+ const isGrouped = rowNode.group || ((_a = rowNode.parent) == null ? void 0 : _a.group) && !isNodeRootLevelOfGrid(rowNode.parent);
76047
+ const currAffectedRows = rowSelectionRef.current.affectedRows;
76048
+ if (!isGrouped) {
76049
+ rowSelectionRef.current.affectedRows = {
76050
+ ...currAffectedRows,
76051
+ [rowNode.id]: {
76052
+ node: rowNode,
76053
+ selectedState: rowNode.isSelected() ? rowSelectionState.selected : rowSelectionState.unselected
76054
+ }
76055
+ };
76056
+ gridApi == null ? void 0 : gridApi.redrawRows({ rowNodes: [rowNode] });
76057
+ return;
76058
+ }
76059
+ const rowsToUpdate = getAffectedRows(
76060
+ getCurrentRows(gridApi),
76061
+ rowNode,
76062
+ currAffectedRows
76063
+ );
76064
+ const rowValues = Object.values(rowsToUpdate);
76065
+ rowValues.forEach((row) => {
76066
+ row.node.setSelected(
76067
+ row.selectedState === rowSelectionState.selected,
76068
+ false,
76069
+ "checkboxSelected"
76070
+ );
76071
+ });
76072
+ rowSelectionRef.current.affectedRows = {
76073
+ ...currAffectedRows,
76074
+ ...rowsToUpdate
76075
+ };
76076
+ gridApi == null ? void 0 : gridApi.redrawRows({
76077
+ rowNodes: rowValues.map((rowValue) => rowValue.node)
76078
+ });
76079
+ };
76027
76080
  const selectRows = React82.useCallback(
76028
76081
  (rowIds) => {
76029
76082
  rowIds == null ? void 0 : rowIds.forEach((id) => {
76030
- var _a;
76031
- (_a = gridApi == null ? void 0 : gridApi.getRowNode(id.toString())) == null ? void 0 : _a.setSelected(true);
76083
+ const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
76084
+ if (!rowNode)
76085
+ return;
76086
+ rowNode.setSelected(true);
76087
+ onSelectionChanged(rowNode);
76032
76088
  });
76033
76089
  },
76034
76090
  [gridApi]
@@ -76036,8 +76092,11 @@ var useTableApi = ({
76036
76092
  const deselectRows = React82.useCallback(
76037
76093
  (rowIds) => {
76038
76094
  rowIds == null ? void 0 : rowIds.forEach((id) => {
76039
- var _a;
76040
- (_a = gridApi == null ? void 0 : gridApi.getRowNode(id.toString())) == null ? void 0 : _a.setSelected(false);
76095
+ const rowNode = gridApi == null ? void 0 : gridApi.getRowNode(id.toString());
76096
+ if (!rowNode)
76097
+ return;
76098
+ rowNode.setSelected(false);
76099
+ onSelectionChanged(rowNode);
76041
76100
  });
76042
76101
  },
76043
76102
  [gridApi]
@@ -76086,7 +76145,8 @@ function buildPartialTableApi({
76086
76145
  gridApi,
76087
76146
  rowHeight,
76088
76147
  columnApi,
76089
- filterStorage
76148
+ filterStorage,
76149
+ rowSelectionRef
76090
76150
  }) {
76091
76151
  const setRowData = (rows) => {
76092
76152
  if ((gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide") {
@@ -76128,7 +76188,8 @@ function buildPartialTableApi({
76128
76188
  gridApi: detailGridApi,
76129
76189
  columnApi: detailGridColumnApi,
76130
76190
  rowHeight,
76131
- filterStorage
76191
+ filterStorage,
76192
+ rowSelectionRef
76132
76193
  }) : void 0;
76133
76194
  };
76134
76195
  const getTableConfiguration = () => {
@@ -76163,44 +76224,58 @@ function buildPartialTableApi({
76163
76224
  }
76164
76225
  return {};
76165
76226
  };
76166
- const getSelectedRows = () => {
76227
+ const getSelectedRows2 = () => {
76167
76228
  return (gridApi == null ? void 0 : gridApi.getSelectedRows()) || [];
76168
76229
  };
76169
- const selectAll = () => {
76170
- const model = gridApi == null ? void 0 : gridApi.getModel();
76171
- if ((model == null ? void 0 : model.getType()) === "clientSide") {
76172
- gridApi == null ? void 0 : gridApi.selectAll();
76173
- }
76174
- gridApi == null ? void 0 : gridApi.forEachNode(function(node) {
76175
- if (node.isSelected() === false) {
76176
- node.setSelected(true, void 0, "apiSelectAll");
76230
+ const rowsNeedingUpdateAfterSelectAll = (isSelectAll) => {
76231
+ const prevRowNodes = (gridApi == null ? void 0 : gridApi.getRenderedNodes()) || [];
76232
+ return prevRowNodes.filter((prevRowNode) => {
76233
+ if (!prevRowNode.selectable) {
76234
+ return false;
76177
76235
  }
76236
+ return isSelectAll ? !prevRowNode.isSelected() : prevRowNode.isSelected();
76178
76237
  });
76238
+ };
76239
+ const updateAffectedRowsOnToggle = (isSelected) => {
76240
+ const prevAffectedRows = rowSelectionRef.current.affectedRows;
76241
+ const currentRows = getCurrentRows(gridApi);
76242
+ rowSelectionRef.current.affectedRows = currentRows.reduce(
76243
+ (accum, rowNode) => {
76244
+ if (!rowNode.id) {
76245
+ return accum;
76246
+ }
76247
+ return {
76248
+ ...accum,
76249
+ [rowNode.id]: {
76250
+ node: rowNode,
76251
+ selectedState: isSelected ? rowSelectionState.selected : rowSelectionState.unselected
76252
+ }
76253
+ };
76254
+ },
76255
+ prevAffectedRows
76256
+ );
76257
+ };
76258
+ const selectAll = () => {
76259
+ const nodesToUpdate = rowsNeedingUpdateAfterSelectAll(true);
76260
+ gridApi == null ? void 0 : gridApi.selectAll();
76179
76261
  if ((gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide") {
76180
- gridApi == null ? void 0 : gridApi.redrawRows();
76262
+ updateAffectedRowsOnToggle(true);
76263
+ gridApi == null ? void 0 : gridApi.redrawRows({ rowNodes: nodesToUpdate });
76181
76264
  }
76182
76265
  };
76183
76266
  const deselectAll = () => {
76184
- const model = gridApi == null ? void 0 : gridApi.getModel();
76185
- if ((model == null ? void 0 : model.getType()) === "clientSide") {
76186
- gridApi == null ? void 0 : gridApi.deselectAll();
76187
- }
76188
- gridApi == null ? void 0 : gridApi.forEachNode(function(node) {
76189
- if (node.isSelected() === true) {
76190
- node.setSelected(false, void 0, "apiSelectAll");
76191
- }
76192
- });
76267
+ const nodesToUpdate = rowsNeedingUpdateAfterSelectAll(false);
76268
+ gridApi == null ? void 0 : gridApi.deselectAll();
76193
76269
  if ((gridApi == null ? void 0 : gridApi.getModel().getType()) === "serverSide") {
76194
- gridApi == null ? void 0 : gridApi.redrawRows();
76270
+ updateAffectedRowsOnToggle(false);
76271
+ gridApi == null ? void 0 : gridApi.redrawRows({ rowNodes: nodesToUpdate });
76195
76272
  }
76196
76273
  };
76197
76274
  const collapseAll = () => {
76198
76275
  gridApi == null ? void 0 : gridApi.collapseAll();
76199
76276
  };
76200
76277
  const expandAll = () => {
76201
- gridApi == null ? void 0 : gridApi.forEachNode((node) => {
76202
- node.setExpanded(true);
76203
- });
76278
+ gridApi == null ? void 0 : gridApi.expandAll();
76204
76279
  };
76205
76280
  const setRowNodeExpanded = (rowNode, expanded) => {
76206
76281
  return gridApi == null ? void 0 : gridApi.setRowNodeExpanded(rowNode, expanded);
@@ -76231,7 +76306,7 @@ function buildPartialTableApi({
76231
76306
  getFilteredAndSortedRowNodes,
76232
76307
  getRootAggregateData,
76233
76308
  getRowData,
76234
- getSelectedRows,
76309
+ getSelectedRows: getSelectedRows2,
76235
76310
  getTableConfiguration,
76236
76311
  refreshCells,
76237
76312
  setPinnedBottomRowData,
@@ -77187,42 +77262,6 @@ var Table = (props) => {
77187
77262
  },
77188
77263
  [props.onRowGroupOpened]
77189
77264
  );
77190
- const onSelectionChanged = (event) => {
77191
- if (!internalTableContext.onServerSideDataRequest || event.source === "apiSelectAll") {
77192
- return;
77193
- }
77194
- const previousSelectedIds = Object.keys(
77195
- rowSelectionRef.current.affectedRows
77196
- ).filter(
77197
- (nodeId) => rowSelectionRef.current.affectedRows[nodeId].selectedState === rowSelectionState.selected
77198
- );
77199
- const affectedRows = rowSelectionRef.current.affectedRows;
77200
- const eventSelectedIds = event.api.getSelectedNodes().map((node) => node.id);
77201
- const diff = symmetricDifference(eventSelectedIds, previousSelectedIds);
77202
- const selectionNode = event.api.getRowNode(diff[0]);
77203
- if (selectionNode === void 0) {
77204
- return;
77205
- }
77206
- const rowsToUpdate = getAffectedRows(
77207
- getCurrentRows(event.api),
77208
- selectionNode,
77209
- affectedRows
77210
- );
77211
- Object.values(rowsToUpdate).forEach((row) => {
77212
- row.node.setSelected(
77213
- row.selectedState === rowSelectionState.selected,
77214
- void 0,
77215
- event.source
77216
- );
77217
- });
77218
- rowSelectionRef.current.affectedRows = {
77219
- ...affectedRows,
77220
- ...rowsToUpdate
77221
- };
77222
- gridApi == null ? void 0 : gridApi.redrawRows({
77223
- rowNodes: Object.values(rowsToUpdate).map((val) => val.node)
77224
- });
77225
- };
77226
77265
  const getGroupRowAgg = React82.useCallback(
77227
77266
  (params) => {
77228
77267
  const agNodes = params.nodes;
@@ -77376,6 +77415,7 @@ var Table = (props) => {
77376
77415
  cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
77377
77416
  defaultColDef,
77378
77417
  enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
77418
+ enableCellEditingOnBackspace: true,
77379
77419
  excelStyles: transformToExcelStyles(props.excelDataTypeFormats),
77380
77420
  components: frameworkComponents,
77381
77421
  fullWidthCellRenderer: FullWidthCellRenderer(
@@ -77432,7 +77472,6 @@ var Table = (props) => {
77432
77472
  onRowDragMove,
77433
77473
  onRowGroupOpened: internalRowGroupOpened,
77434
77474
  onRowSelected: internalOnRowSelected,
77435
- onSelectionChanged,
77436
77475
  onSortChanged: onSortEventChanged,
77437
77476
  onFilterChanged,
77438
77477
  onFirstDataRendered: props.onFirstDataRendered,
@@ -77485,13 +77524,19 @@ var TablePagination = ({
77485
77524
  page: 0,
77486
77525
  items: 0
77487
77526
  });
77527
+ const { rowSelectionRef } = useInternalTableContext();
77488
77528
  React82.useEffect(() => {
77489
77529
  function onPaginationChanged(params) {
77530
+ var _a;
77490
77531
  if (gridApi && params.api.paginationGetCurrentPage() !== pagination.page || pagination.items !== params.api.paginationGetRowCount()) {
77491
77532
  setPagination({
77492
77533
  page: params.api.paginationGetCurrentPage(),
77493
77534
  items: params.api.paginationGetRowCount()
77494
77535
  });
77536
+ if (params.api.getModel().getType() === "serverSide") {
77537
+ ((_a = rowSelectionRef == null ? void 0 : rowSelectionRef.current) == null ? void 0 : _a.affectedRows) && (rowSelectionRef.current.affectedRows = {});
77538
+ gridApi == null ? void 0 : gridApi.deselectAll();
77539
+ }
77495
77540
  }
77496
77541
  }
77497
77542
  gridApi == null ? void 0 : gridApi.addEventListener("paginationChanged", onPaginationChanged);