@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.5

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.
Files changed (90) hide show
  1. package/CHANGELOG.md +138 -14
  2. package/DataGrid/DataGrid.js +2 -0
  3. package/colDef/gridBooleanOperators.js +1 -1
  4. package/components/GridRow.d.ts +7 -9
  5. package/components/GridRow.js +36 -47
  6. package/components/cell/GridCell.d.ts +2 -1
  7. package/components/cell/GridCell.js +7 -3
  8. package/components/cell/GridSkeletonCell.d.ts +3 -2
  9. package/components/cell/GridSkeletonCell.js +14 -6
  10. package/components/columnSelection/GridCellCheckboxRenderer.js +6 -4
  11. package/components/columnsManagement/GridColumnsManagement.js +1 -1
  12. package/components/containers/GridRootStyles.js +9 -2
  13. package/components/virtualization/GridBottomContainer.js +1 -1
  14. package/components/virtualization/GridTopContainer.js +1 -1
  15. package/components/virtualization/GridVirtualScroller.js +2 -2
  16. package/components/virtualization/GridVirtualScrollerRenderZone.js +9 -3
  17. package/hooks/features/columnHeaders/useGridColumnHeaders.js +11 -8
  18. package/hooks/features/columns/gridColumnsSelector.d.ts +6 -0
  19. package/hooks/features/columns/gridColumnsSelector.js +8 -1
  20. package/hooks/features/columns/useGridColumns.js +4 -0
  21. package/hooks/features/editing/useGridRowEditing.js +1 -2
  22. package/hooks/features/filter/useGridFilter.js +2 -2
  23. package/hooks/features/rows/useGridRows.js +8 -4
  24. package/hooks/features/rows/useGridRowsMeta.js +5 -13
  25. package/hooks/features/sorting/gridSortingUtils.js +9 -1
  26. package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts +0 -9
  27. package/hooks/features/virtualization/gridVirtualizationSelectors.js +0 -7
  28. package/hooks/features/virtualization/useGridVirtualScroller.d.ts +3 -0
  29. package/hooks/features/virtualization/useGridVirtualScroller.js +82 -138
  30. package/hooks/features/virtualization/useGridVirtualization.d.ts +0 -8
  31. package/hooks/features/virtualization/useGridVirtualization.js +1 -6
  32. package/hooks/utils/useTimeout.d.ts +5 -3
  33. package/hooks/utils/useTimeout.js +13 -5
  34. package/index.js +1 -1
  35. package/models/colDef/gridColDef.d.ts +7 -0
  36. package/modern/DataGrid/DataGrid.js +2 -0
  37. package/modern/colDef/gridBooleanOperators.js +1 -1
  38. package/modern/components/GridRow.js +35 -46
  39. package/modern/components/cell/GridCell.js +7 -3
  40. package/modern/components/cell/GridSkeletonCell.js +14 -6
  41. package/modern/components/columnSelection/GridCellCheckboxRenderer.js +6 -4
  42. package/modern/components/columnsManagement/GridColumnsManagement.js +1 -1
  43. package/modern/components/containers/GridRootStyles.js +9 -2
  44. package/modern/components/virtualization/GridBottomContainer.js +1 -1
  45. package/modern/components/virtualization/GridTopContainer.js +1 -1
  46. package/modern/components/virtualization/GridVirtualScroller.js +2 -2
  47. package/modern/components/virtualization/GridVirtualScrollerRenderZone.js +8 -3
  48. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +11 -8
  49. package/modern/hooks/features/columns/gridColumnsSelector.js +8 -1
  50. package/modern/hooks/features/columns/useGridColumns.js +2 -0
  51. package/modern/hooks/features/editing/useGridRowEditing.js +1 -2
  52. package/modern/hooks/features/filter/useGridFilter.js +2 -2
  53. package/modern/hooks/features/rows/useGridRows.js +8 -4
  54. package/modern/hooks/features/rows/useGridRowsMeta.js +5 -13
  55. package/modern/hooks/features/sorting/gridSortingUtils.js +9 -1
  56. package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js +0 -7
  57. package/modern/hooks/features/virtualization/useGridVirtualScroller.js +80 -136
  58. package/modern/hooks/features/virtualization/useGridVirtualization.js +1 -6
  59. package/modern/hooks/utils/useTimeout.js +13 -5
  60. package/modern/index.js +1 -1
  61. package/modern/utils/utils.js +9 -0
  62. package/node/DataGrid/DataGrid.js +1 -0
  63. package/node/colDef/gridBooleanOperators.js +1 -1
  64. package/node/components/GridRow.js +35 -46
  65. package/node/components/cell/GridCell.js +7 -3
  66. package/node/components/cell/GridSkeletonCell.js +15 -7
  67. package/node/components/columnSelection/GridCellCheckboxRenderer.js +6 -4
  68. package/node/components/columnsManagement/GridColumnsManagement.js +1 -1
  69. package/node/components/containers/GridRootStyles.js +9 -2
  70. package/node/components/virtualization/GridBottomContainer.js +1 -1
  71. package/node/components/virtualization/GridTopContainer.js +1 -1
  72. package/node/components/virtualization/GridVirtualScroller.js +2 -2
  73. package/node/components/virtualization/GridVirtualScrollerRenderZone.js +7 -2
  74. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +8 -5
  75. package/node/hooks/features/columns/gridColumnsSelector.js +9 -2
  76. package/node/hooks/features/columns/useGridColumns.js +2 -0
  77. package/node/hooks/features/editing/useGridRowEditing.js +1 -2
  78. package/node/hooks/features/filter/useGridFilter.js +2 -2
  79. package/node/hooks/features/rows/useGridRows.js +8 -4
  80. package/node/hooks/features/rows/useGridRowsMeta.js +5 -13
  81. package/node/hooks/features/sorting/gridSortingUtils.js +9 -1
  82. package/node/hooks/features/virtualization/gridVirtualizationSelectors.js +1 -8
  83. package/node/hooks/features/virtualization/useGridVirtualScroller.js +81 -136
  84. package/node/hooks/features/virtualization/useGridVirtualization.js +2 -7
  85. package/node/hooks/utils/useTimeout.js +13 -4
  86. package/node/index.js +1 -1
  87. package/node/utils/utils.js +12 -1
  88. package/package.json +1 -1
  89. package/utils/utils.d.ts +4 -0
  90. package/utils/utils.js +9 -0
@@ -4,19 +4,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.GridSkeletonCell = GridSkeletonCell;
7
+ exports.GridSkeletonCell = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
13
13
  var _utils = require("@mui/utils");
14
+ var _fastMemo = require("../../utils/fastMemo");
15
+ var _utils2 = require("../../utils/utils");
14
16
  var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
15
17
  var _gridClasses = require("../../constants/gridClasses");
16
18
  var _jsxRuntime = require("react/jsx-runtime");
17
- const _excluded = ["field", "align", "width", "contentWidth"];
19
+ const _excluded = ["field", "align", "width", "height"];
18
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
19
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
+ const randomWidth = (0, _utils2.randomNumberBetween)(10000, 20, 80);
20
23
  const useUtilityClasses = ownerState => {
21
24
  const {
22
25
  align,
@@ -31,7 +34,7 @@ function GridSkeletonCell(props) {
31
34
  const {
32
35
  align,
33
36
  width,
34
- contentWidth
37
+ height
35
38
  } = props,
36
39
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
37
40
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -40,14 +43,18 @@ function GridSkeletonCell(props) {
40
43
  align
41
44
  };
42
45
  const classes = useUtilityClasses(ownerState);
46
+ const contentWidth = Math.round(randomWidth());
43
47
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
44
48
  className: classes.root,
45
49
  style: {
46
- width
50
+ height,
51
+ maxWidth: width,
52
+ minWidth: width
47
53
  }
48
54
  }, other, {
49
55
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
50
- width: `${contentWidth}%`
56
+ width: `${contentWidth}%`,
57
+ height: 25
51
58
  })
52
59
  }));
53
60
  }
@@ -57,7 +64,8 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
57
64
  // | To update them edit the TypeScript types and run "yarn proptypes" |
58
65
  // ----------------------------------------------------------------------
59
66
  align: _propTypes.default.string.isRequired,
60
- contentWidth: _propTypes.default.number.isRequired,
61
67
  field: _propTypes.default.string.isRequired,
68
+ height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
62
69
  width: _propTypes.default.number.isRequired
63
- } : void 0;
70
+ } : void 0;
71
+ const Memoized = exports.GridSkeletonCell = (0, _fastMemo.fastMemo)(GridSkeletonCell);
@@ -45,7 +45,6 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
45
45
  const checkboxElement = React.useRef(null);
46
46
  const rippleRef = React.useRef(null);
47
47
  const handleRef = (0, _utils.unstable_useForkRef)(checkboxElement, ref);
48
- const element = apiRef.current.getCellElement(id, field);
49
48
  const handleChange = event => {
50
49
  const params = {
51
50
  value: event.target.checked,
@@ -54,10 +53,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
54
53
  apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
55
54
  };
56
55
  React.useLayoutEffect(() => {
57
- if (tabIndex === 0 && element) {
58
- element.tabIndex = -1;
56
+ if (tabIndex === 0) {
57
+ const element = apiRef.current.getCellElement(id, field);
58
+ if (element) {
59
+ element.tabIndex = -1;
60
+ }
59
61
  }
60
- }, [element, tabIndex]);
62
+ }, [apiRef, tabIndex, id, field]);
61
63
  React.useEffect(() => {
62
64
  if (hasFocus) {
63
65
  const input = checkboxElement.current?.querySelector('input');
@@ -161,7 +161,7 @@ function GridColumnsManagement(props) {
161
161
  ownerState: rootProps,
162
162
  children: apiRef.current.getLocaleText('columnsManagementNoColumns')
163
163
  })]
164
- }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
164
+ }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
165
165
  ownerState: rootProps,
166
166
  className: classes.footer,
167
167
  children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
@@ -348,7 +348,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
348
348
  [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
349
349
  visibility: 'hidden',
350
350
  position: 'absolute',
351
- zIndex: 100,
351
+ zIndex: 3,
352
352
  display: 'flex',
353
353
  flexDirection: 'column',
354
354
  justifyContent: 'center',
@@ -469,7 +469,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
469
469
  lineHeight: 'inherit'
470
470
  },
471
471
  [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
472
- padding: 0
472
+ padding: 0,
473
+ height: 'unset'
473
474
  },
474
475
  [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--selectionMode']}`]: {
475
476
  cursor: 'default'
@@ -585,6 +586,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
585
586
  flex: '0 0 auto',
586
587
  display: 'inline-block'
587
588
  },
589
+ [`& .${_gridClasses.gridClasses.cellSkeleton}`]: {
590
+ flex: '0 0 auto',
591
+ height: '100%',
592
+ display: 'inline-flex',
593
+ alignItems: 'center'
594
+ },
588
595
  [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
589
596
  display: 'flex',
590
597
  width: '100%',
@@ -22,7 +22,7 @@ const useUtilityClasses = () => {
22
22
  };
23
23
  const Element = (0, _system.styled)('div')({
24
24
  position: 'sticky',
25
- zIndex: 2,
25
+ zIndex: 4,
26
26
  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
27
27
  });
28
28
  function GridBottomContainer(props) {
@@ -22,7 +22,7 @@ const useUtilityClasses = () => {
22
22
  };
23
23
  const Element = (0, _system.styled)('div')({
24
24
  position: 'sticky',
25
- zIndex: 2,
25
+ zIndex: 4,
26
26
  top: 0,
27
27
  '&::after': {
28
28
  content: '" "',
@@ -93,9 +93,9 @@ function GridVirtualScroller(props) {
93
93
  virtualScroller: virtualScroller
94
94
  })
95
95
  })]
96
- })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
96
+ })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
97
97
  position: "vertical"
98
- }, getScrollbarVerticalProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
98
+ }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
99
99
  position: "horizontal"
100
100
  }, getScrollbarHorizontalProps())), props.children]
101
101
  }));
@@ -13,6 +13,7 @@ var _system = require("@mui/system");
13
13
  var _utils = require("@mui/utils");
14
14
  var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
15
15
  var _useGridSelector = require("../../hooks/utils/useGridSelector");
16
+ var _rows = require("../../hooks/features/rows");
16
17
  var _virtualization = require("../../hooks/features/virtualization");
17
18
  var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
18
19
  var _gridClasses = require("../../constants/gridClasses");
@@ -47,13 +48,17 @@ const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = /*
47
48
  const apiRef = (0, _useGridApiContext.useGridApiContext)();
48
49
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
49
50
  const classes = useUtilityClasses(rootProps);
50
- const offsets = (0, _useGridSelector.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
51
+ const offsetTop = (0, _useGridSelector.useGridSelector)(apiRef, () => {
52
+ const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
53
+ const rowsMeta = (0, _rows.gridRowsMetaSelector)(apiRef.current.state);
54
+ return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
55
+ });
51
56
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
52
57
  ref: ref,
53
58
  className: (0, _clsx.default)(classes.root, className),
54
59
  ownerState: rootProps,
55
60
  style: {
56
- transform: `translate3d(0, ${offsets.top}px, 0)`
61
+ transform: `translate3d(0, ${offsetTop}px, 0)`
57
62
  }
58
63
  }, other));
59
64
  });
@@ -16,6 +16,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
16
16
  var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
17
17
  var _dimensions = require("../dimensions");
18
18
  var _virtualization = require("../virtualization");
19
+ var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
19
20
  var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
20
21
  var _columns = require("../columns");
21
22
  var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerCell");
@@ -25,7 +26,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
25
26
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
26
27
  const SpaceFiller = (0, _styles.styled)('div')({
27
28
  /* GridRootStyles conflict */
28
- '&&': {
29
+ '&&&': {
29
30
  padding: 0,
30
31
  width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
31
32
  }
@@ -57,14 +58,16 @@ const useGridColumnHeaders = props => {
57
58
  const [dragCol, setDragCol] = React.useState('');
58
59
  const [resizeCol, setResizeCol] = React.useState('');
59
60
  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
61
+ const theme = (0, _styles.useTheme)();
60
62
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
61
63
  const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
62
64
  const innerRef = React.useRef(null);
63
65
  const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
64
66
  const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
65
- const offsets = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
67
+ const columnPositions = (0, _utils2.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
66
68
  const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
67
- const visiblePinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
69
+ const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
70
+ const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
68
71
  React.useEffect(() => {
69
72
  apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
70
73
  }, [apiRef]);
@@ -96,8 +99,8 @@ const useGridColumnHeaders = props => {
96
99
  const getFillers = (params, children, leftOverflow, borderTop = false) => {
97
100
  const isPinnedRight = params?.position === _columns.GridPinnedColumnPosition.RIGHT;
98
101
  const isNotPinned = params?.position === undefined;
99
- const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
100
- const leftOffsetWidth = offsets.left - leftOverflow;
102
+ const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
103
+ const leftOffsetWidth = offsetLeft - leftOverflow;
101
104
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
102
105
  children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
103
106
  role: "presentation",
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
6
+ exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
7
7
  var _createSelector = require("../../../utils/createSelector");
8
8
  var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
9
9
  var _gridCoreSelector = require("../../core/gridCoreSelector");
@@ -141,4 +141,11 @@ const gridFilterableColumnLookupSelector = exports.gridFilterableColumnLookupSel
141
141
  acc[col.field] = col;
142
142
  }
143
143
  return acc;
144
- }, {}));
144
+ }, {}));
145
+
146
+ /**
147
+ * Checks if some column has a colSpan field.
148
+ * @category Columns
149
+ * @ignore - Do not document
150
+ */
151
+ const gridHasColSpanSelector = exports.gridHasColSpanSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));
@@ -55,6 +55,7 @@ function useGridColumns(apiRef, props) {
55
55
  logger.debug('Updating columns state.');
56
56
  apiRef.current.setState(mergeColumnsState(columnsState));
57
57
  apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
58
+ apiRef.current.updateRenderContext?.();
58
59
  apiRef.current.forceUpdate();
59
60
  }, [logger, apiRef]);
60
61
 
@@ -84,6 +85,7 @@ function useGridColumns(apiRef, props) {
84
85
  keepOnlyColumnsToUpsert: false
85
86
  })
86
87
  }));
88
+ apiRef.current.updateRenderContext?.();
87
89
  apiRef.current.forceUpdate();
88
90
  }
89
91
  }, [apiRef]);
@@ -30,7 +30,7 @@ const useGridRowEditing = (apiRef, props) => {
30
30
  const [rowModesModel, setRowModesModel] = React.useState({});
31
31
  const rowModesModelRef = React.useRef(rowModesModel);
32
32
  const prevRowModesModel = React.useRef({});
33
- const focusTimeout = React.useRef(null);
33
+ const focusTimeout = React.useRef();
34
34
  const nextFocusedCell = React.useRef(null);
35
35
  const {
36
36
  processRowUpdate,
@@ -85,7 +85,6 @@ const useGridRowEditing = (apiRef, props) => {
85
85
  // focus we check if the next cell that received focus is from a different row.
86
86
  nextFocusedCell.current = null;
87
87
  focusTimeout.current = setTimeout(() => {
88
- focusTimeout.current = null;
89
88
  if (nextFocusedCell.current?.id !== params.id) {
90
89
  // The row might have been deleted during the click
91
90
  if (!apiRef.current.getRow(params.id)) {
@@ -115,7 +115,7 @@ const useGridFilter = (apiRef, props) => {
115
115
  const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
116
116
  const existingItems = [...filterModel.items];
117
117
  items.forEach(item => {
118
- const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
118
+ const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
119
119
  if (itemIndex === -1) {
120
120
  existingItems.push(item);
121
121
  } else {
@@ -123,7 +123,7 @@ const useGridFilter = (apiRef, props) => {
123
123
  }
124
124
  });
125
125
  apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
126
- items
126
+ items: existingItems
127
127
  }), 'upsertFilterItems');
128
128
  }, [apiRef]);
129
129
  const deleteFilterItem = React.useCallback(itemToDelete => {
@@ -270,13 +270,16 @@ const useGridRows = (apiRef, props) => {
270
270
  const dataRowIdToIdLookup = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef));
271
271
  const rootGroup = tree[_gridRowsUtils.GRID_ROOT_GROUP_ID];
272
272
  const rootGroupChildren = [...rootGroup.children];
273
+ const seenIds = new Set();
273
274
  for (let i = 0; i < newRows.length; i += 1) {
274
275
  const rowModel = newRows[i];
275
276
  const rowId = (0, _gridRowsUtils.getRowIdFromRowModel)(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
276
- const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
277
- delete dataRowIdToModelLookup[replacedRowId];
278
- delete dataRowIdToIdLookup[replacedRowId];
279
- delete tree[replacedRowId];
277
+ const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
278
+ if (!seenIds.has(removedRowId)) {
279
+ delete dataRowIdToModelLookup[removedRowId];
280
+ delete dataRowIdToIdLookup[removedRowId];
281
+ delete tree[removedRowId];
282
+ }
280
283
  const rowTreeNodeConfig = {
281
284
  id: rowId,
282
285
  depth: 0,
@@ -287,6 +290,7 @@ const useGridRows = (apiRef, props) => {
287
290
  dataRowIdToModelLookup[rowId] = rowModel;
288
291
  dataRowIdToIdLookup[rowId] = rowId;
289
292
  tree[rowId] = rowTreeNodeConfig;
293
+ seenIds.add(rowId);
290
294
  }
291
295
  tree[_gridRowsUtils.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
292
296
  children: rootGroupChildren
@@ -115,14 +115,9 @@ const useGridRowsMeta = (apiRef, props) => {
115
115
  } else {
116
116
  rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
117
117
  }
118
- const initialHeights = {};
119
- /* eslint-disable-next-line no-restricted-syntax */
120
- for (const key in sizes) {
121
- if (/^base[A-Z]/.test(key)) {
122
- initialHeights[key] = sizes[key];
123
- }
124
- }
125
- initialHeights.baseCenter = baseRowHeight;
118
+ const initialHeights = {
119
+ baseCenter: baseRowHeight
120
+ };
126
121
  if (getRowSpacing) {
127
122
  const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
128
123
  const spacing = getRowSpacing((0, _extends2.default)({}, row, {
@@ -140,19 +135,16 @@ const useGridRowsMeta = (apiRef, props) => {
140
135
  const positions = [];
141
136
  const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
142
137
  positions.push(acc);
143
- let maximumBaseSize = 0;
144
138
  let otherSizes = 0;
145
139
  const processedSizes = calculateRowProcessedSizes(row);
146
140
  /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
147
141
  for (const key in processedSizes) {
148
142
  const value = processedSizes[key];
149
- if (/^base[A-Z]/.test(key)) {
150
- maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
151
- } else {
143
+ if (key !== 'baseCenter') {
152
144
  otherSizes += value;
153
145
  }
154
146
  }
155
- return acc + maximumBaseSize + otherSizes;
147
+ return acc + processedSizes.baseCenter + otherSizes;
156
148
  }, 0);
157
149
  pinnedRows?.top?.forEach(row => {
158
150
  calculateRowProcessedSizes(row);
@@ -37,7 +37,15 @@ const parseSortItem = (sortItem, apiRef) => {
37
37
  if (!column || sortItem.sort === null) {
38
38
  return null;
39
39
  }
40
- const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
40
+ let comparator;
41
+ if (column.getSortComparator) {
42
+ comparator = column.getSortComparator(sortItem.sort);
43
+ } else {
44
+ comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
45
+ }
46
+ if (!comparator) {
47
+ return null;
48
+ }
41
49
  const getSortCellParams = id => ({
42
50
  id,
43
51
  field: column.field,
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = exports.gridOffsetsSelector = void 0;
6
+ exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = void 0;
7
7
  var _createSelector = require("../../../utils/createSelector");
8
8
  /**
9
9
  * Get the columns state
@@ -31,13 +31,6 @@ const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumn
31
31
  */
32
32
  const gridRenderContextSelector = exports.gridRenderContextSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.renderContext);
33
33
 
34
- /**
35
- * Get the offsets
36
- * @category Virtualization
37
- * @ignore - do not document.
38
- */
39
- const gridOffsetsSelector = exports.gridOffsetsSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.offsets);
40
-
41
34
  /**
42
35
  * Get the render context, with only columns filled in.
43
36
  * This is cached, so it can be used to only re-render when the column interval changes.