@mui/x-data-grid-pro 5.15.3 → 5.17.1

package/legacy/components/DataGridProVirtualScroller.js

@@ -287,17 +287,20 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var detailPanels = getDetailPanels();
   var topPinnedRows = getRows({
     renderContext: renderContext,
-    rows: topPinnedRowsData
+    rows: topPinnedRowsData,
+    position: 'center'
   });
   var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
   var mainRows = getRows({
     renderContext: renderContext,
-    rowIndexOffset: topPinnedRowsData.length
+    rowIndexOffset: topPinnedRowsData.length,
+    position: 'center'
   });
   var bottomPinnedRows = getRows({
     renderContext: renderContext,
     rows: bottomPinnedRowsData,
-    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+    position: 'center'
   });
   var contentProps = getContentProps();
   var pinnedColumnsStyle = {
@@ -329,8 +332,8 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -346,9 +349,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
-          ignoreAutoHeight: true,
           availableSpace: 0,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'right'
         })
       })]
     }) : null, /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
@@ -364,8 +367,8 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
         children: mainRows
@@ -381,8 +384,8 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'right'
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
@@ -408,9 +411,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -427,9 +430,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'right'
         })
       })]
     }) : null]

package/legacy/components/GridDetailPanelToggleCell.js

@@ -125,7 +125,8 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/components/GridTreeDataGroupingCell.js

@@ -160,7 +160,8 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/legacy/hooks/features/columnReorder/useGridColumnReorder.js

@@ -41,6 +41,7 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
     y: 0
   });
   var originColumnIndex = React.useRef(null);
+  var forbiddenIndexes = React.useRef({});
   var removeDnDStylesTimeout = React.useRef();
   var ownerState = {
     classes: props.classes
@@ -74,6 +75,73 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
       dragColNode.current.classList.remove(classes.columnHeaderDragging);
     });
     originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+    var draggingColumnGroupPath = apiRef.current.unstable_getColumnGroupPath(params.field);
+    var columnIndex = originColumnIndex.current;
+    var allColumns = apiRef.current.getAllColumns();
+    var groupsLookup = apiRef.current.unstable_getAllGroupDetails(); // The limitingGroupId is the id of the group from which the dragged column should not escape
+
+    var limitingGroupId = null;
+    draggingColumnGroupPath.forEach(function (groupId) {
+      var _groupsLookup$groupId;
+
+      if (!((_groupsLookup$groupId = groupsLookup[groupId]) != null && _groupsLookup$groupId.freeReordering)) {
+        var _allColumns$groupPath, _allColumns$groupPath2;
+
+        // Only consider group that are made of more than one column
+        if (columnIndex > 0 && (_allColumns$groupPath = allColumns[columnIndex - 1].groupPath) != null && _allColumns$groupPath.includes(groupId)) {
+          limitingGroupId = groupId;
+        } else if (columnIndex + 1 < allColumns.length && (_allColumns$groupPath2 = allColumns[columnIndex + 1].groupPath) != null && _allColumns$groupPath2.includes(groupId)) {
+          limitingGroupId = groupId;
+        }
+      }
+    });
+    forbiddenIndexes.current = {};
+
+    var _loop = function _loop(indexToForbid) {
+      var leftIndex = indexToForbid <= columnIndex ? indexToForbid - 1 : indexToForbid;
+      var rightIndex = indexToForbid < columnIndex ? indexToForbid : indexToForbid + 1;
+
+      if (limitingGroupId !== null) {
+        var _allColumns$leftIndex, _allColumns$rightInde;
+
+        // verify this indexToForbid will be linked to the limiting group. Otherwise forbid it
+        var allowIndex = false;
+
+        if (leftIndex >= 0 && (_allColumns$leftIndex = allColumns[leftIndex].groupPath) != null && _allColumns$leftIndex.includes(limitingGroupId)) {
+          allowIndex = true;
+        } else if (rightIndex < allColumns.length && (_allColumns$rightInde = allColumns[rightIndex].groupPath) != null && _allColumns$rightInde.includes(limitingGroupId)) {
+          allowIndex = true;
+        }
+
+        if (!allowIndex) {
+          forbiddenIndexes.current[indexToForbid] = true;
+        }
+      } // Verify we are not splitting another group
+
+
+      if (leftIndex >= 0 && rightIndex < allColumns.length) {
+        var _allColumns$rightInde2, _allColumns$rightInde3;
+
+        (_allColumns$rightInde2 = allColumns[rightIndex]) == null ? void 0 : (_allColumns$rightInde3 = _allColumns$rightInde2.groupPath) == null ? void 0 : _allColumns$rightInde3.forEach(function (groupId) {
+          var _allColumns$leftIndex2;
+
+          if ((_allColumns$leftIndex2 = allColumns[leftIndex].groupPath) != null && _allColumns$leftIndex2.includes(groupId)) {
+            if (!draggingColumnGroupPath.includes(groupId)) {
+              var _groupsLookup$groupId2;
+
+              // moving here split the group groupId in two distincts chunks
+              if (!((_groupsLookup$groupId2 = groupsLookup[groupId]) != null && _groupsLookup$groupId2.freeReordering)) {
+                forbiddenIndexes.current[indexToForbid] = true;
+              }
+            }
+          }
+        });
+      }
+    };
+
+    for (var indexToForbid = 0; indexToForbid < allColumns.length; indexToForbid += 1) {
+      _loop(indexToForbid);
+    }
   }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
   var handleDragEnter = React.useCallback(function (params, event) {
     event.preventDefault(); // Prevent drag events propagation.
@@ -104,19 +172,47 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
       var targetCol = apiRef.current.getColumn(params.field);
       var dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
       var visibleColumns = apiRef.current.getVisibleColumns();
+      var allColumns = apiRef.current.getAllColumns();
       var cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
       var hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
       var hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
 
       if (hasMovedLeft || hasMovedRight) {
         var canBeReordered;
+        var indexOffsetInHiddenColumns = 0;
 
         if (!targetCol.disableReorder) {
           canBeReordered = true;
         } else if (hasMovedLeft) {
-          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+          canBeReordered = targetColVisibleIndex > 0 && !visibleColumns[targetColVisibleIndex - 1].disableReorder;
         } else {
-          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+          canBeReordered = targetColVisibleIndex < visibleColumns.length - 1 && !visibleColumns[targetColVisibleIndex + 1].disableReorder;
+        }
+
+        if (forbiddenIndexes.current[targetColIndex]) {
+          var nextVisibleColumnField;
+          var indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+
+          if (hasMovedLeft) {
+            nextVisibleColumnField = targetColVisibleIndex > 0 ? visibleColumns[targetColVisibleIndex - 1].field : null;
+
+            while (indexWithOffset > 0 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns -= 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          } else {
+            nextVisibleColumnField = targetColVisibleIndex + 1 < visibleColumns.length ? visibleColumns[targetColVisibleIndex + 1].field : null;
+
+            while (indexWithOffset < allColumns.length - 1 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns += 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          }
+
+          if (forbiddenIndexes.current[indexWithOffset] || allColumns[indexWithOffset].field === nextVisibleColumnField) {
+            // If we ended up on a visible column, or a forbidden one, we can not do the reorder
+            canBeReordered = false;
+          }
         }
 
         var canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
@@ -124,7 +220,7 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
         });
 
         if (canBeReorderedProcessed) {
-          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+          apiRef.current.setColumnIndex(dragColField, targetColIndex + indexOffsetInHiddenColumns);
         }
       }
 

package/legacy/hooks/features/columnResize/useGridColumnResize.js

@@ -1,10 +1,11 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
 //
@@ -106,6 +107,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridColumnResize');
   var colDefRef = React.useRef();
   var colElementRef = React.useRef();
+  var colGroupingElementRef = React.useRef();
   var colCellElementsRef = React.useRef();
   var theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -126,7 +128,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     colElementRef.current.style.width = "".concat(newWidth, "px");
     colElementRef.current.style.minWidth = "".concat(newWidth, "px");
     colElementRef.current.style.maxWidth = "".concat(newWidth, "px");
-    colCellElementsRef.current.forEach(function (element) {
+    [].concat(_toConsumableArray(colCellElementsRef.current), _toConsumableArray(colGroupingElementRef.current)).forEach(function (element) {
       var div = element;
       var finalWidth;
 
@@ -182,7 +184,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   var handleColumnResizeMouseDown = useEventCallback(function (_ref, event) {
-    var _apiRef$current$colum;
+    var _apiRef$current$colum, _apiRef$current$colum2;
 
     var colDef = _ref.colDef;
 
@@ -204,6 +206,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector("[data-field=\"".concat(colDef.field, "\"]"));
+    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     var doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
@@ -252,7 +255,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   var handleTouchStart = useEventCallback(function (event) {
-    var _apiRef$current$colum2;
+    var _apiRef$current$colum3, _apiRef$current$colum4;
 
     var cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']); // Let the event bubble if the target is not a col separator
 
@@ -275,12 +278,13 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
     var field = getFieldFromHeaderElem(colElementRef.current);
     var colDef = apiRef.current.getColumn(field);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum3 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum3.current, field);
     logger.debug("Start Resize on col ".concat(colDef.field));
     apiRef.current.publishEvent('columnResizeStart', {
       field: field
     }, event);
     colDefRef.current = colDef;
-    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
+    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum4 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum4.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     resizeDirection.current = getResizeDirection(event.target, theme.direction);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
@@ -324,9 +328,9 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     };
   }, [apiRef, handleTouchStart, stopListening]);
   useGridNativeEventListener(apiRef, function () {
-    var _apiRef$current$colum3;
+    var _apiRef$current$colum5;
 
-    return (_apiRef$current$colum3 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum3.current;
+    return (_apiRef$current$colum5 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum5.current;
   }, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });

package/legacy/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -3,6 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
+import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
 export var useGridDetailPanelPreProcessors = function useGridDetailPanelPreProcessors(apiRef, props) {
   var addToggleColumn = React.useCallback(function (columnsState) {
     if (props.getDetailPanelContent == null) {
@@ -30,5 +31,19 @@ export var useGridDetailPanelPreProcessors = function useGridDetailPanelPreProce
     });
     return columnsState;
   }, [apiRef, props.getDetailPanelContent]);
+  var addExpandedClassToRow = React.useCallback(function (classes, id) {
+    if (props.getDetailPanelContent == null) {
+      return classes;
+    }
+
+    var expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+
+    if (!expandedRowIds.includes(id)) {
+      return classes;
+    }
+
+    return [].concat(_toConsumableArray(classes), ['MuiDataGrid-row--detailPanelExpanded']);
+  }, [apiRef, props.getDetailPanelContent]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'rowClassName', addExpandedClassToRow);
 };

package/legacy/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector, GridFeatureModeConstant } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
@@ -14,9 +14,9 @@ export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props)
   var contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
   var isInScrollBottomArea = React.useRef(false);
   var handleRowsScrollEnd = React.useCallback(function (scrollPosition) {
-    var dimensions = apiRef.current.getRootDimensions();
+    var dimensions = apiRef.current.getRootDimensions(); // Prevent the infite loading working in combination with lazy loading
 
-    if (!dimensions) {
+    if (!dimensions || props.rowsLoadingMode !== GridFeatureModeConstant.client) {
       return;
     }
 
@@ -36,7 +36,7 @@ export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props)
       apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
       isInScrollBottomArea.current = true;
     }
-  }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
+  }, [contentHeight, props.scrollEndThreshold, props.rowsLoadingMode, visibleColumns, apiRef, currentPage.rows.length]);
   var handleGridScroll = React.useCallback(function (_ref) {
     var left = _ref.left,
         top = _ref.top;

package/legacy/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -0,0 +1,185 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { useGridApiEventHandler, GridFeatureModeConstant, useGridSelector, gridSortModelSelector, gridFilterModelSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
+import { useGridVisibleRows, getRenderableIndexes } from '@mui/x-data-grid/internals';
+
+function findSkeletonRowsSection(visibleRows, range) {
+  var firstRowIndex = range.firstRowIndex,
+      lastRowIndex = range.lastRowIndex;
+  var visibleRowsSection = visibleRows.slice(range.firstRowIndex, range.lastRowIndex);
+  var startIndex = 0;
+  var endIndex = visibleRowsSection.length - 1;
+  var isSkeletonSectionFound = false;
+
+  while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
+    if (!visibleRowsSection[startIndex].model && !visibleRowsSection[endIndex].model) {
+      isSkeletonSectionFound = true;
+    }
+
+    if (visibleRowsSection[startIndex].model) {
+      startIndex += 1;
+      firstRowIndex += 1;
+    }
+
+    if (visibleRowsSection[endIndex].model) {
+      endIndex -= 1;
+      lastRowIndex -= 1;
+    }
+  }
+
+  return isSkeletonSectionFound ? {
+    firstRowIndex: firstRowIndex,
+    lastRowIndex: lastRowIndex
+  } : undefined;
+}
+
+function isLazyLoadingDisabled(_ref) {
+  var lazyLoadingFeatureFlag = _ref.lazyLoadingFeatureFlag,
+      rowsLoadingMode = _ref.rowsLoadingMode,
+      gridDimensions = _ref.gridDimensions;
+
+  if (!lazyLoadingFeatureFlag || !gridDimensions) {
+    return true;
+  }
+
+  if (rowsLoadingMode !== GridFeatureModeConstant.server) {
+    return true;
+  }
+
+  return false;
+}
+/**
+ * @requires useGridRows (state)
+ * @requires useGridPagination (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+
+
+export var useGridLazyLoader = function useGridLazyLoader(apiRef, props) {
+  var _props$experimentalFe;
+
+  var visibleRows = useGridVisibleRows(apiRef, props);
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  var renderedRowsIntervalCache = React.useRef({
+    firstRowToRender: 0,
+    lastRowToRender: 0
+  });
+
+  var _ref2 = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {},
+      lazyLoading = _ref2.lazyLoading;
+
+  var getCurrentIntervalToRender = React.useCallback(function () {
+    var currentRenderContext = apiRef.current.unstable_getRenderContext();
+
+    var _getRenderableIndexes = getRenderableIndexes({
+      firstIndex: currentRenderContext.firstRowIndex,
+      lastIndex: currentRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: visibleRows.rows.length,
+      buffer: props.rowBuffer
+    }),
+        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
+        firstRowToRender = _getRenderableIndexes2[0],
+        lastRowToRender = _getRenderableIndexes2[1];
+
+    return {
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender
+    };
+  }, [apiRef, props.rowBuffer, visibleRows.rows.length]);
+  var handleRenderedRowsIntervalChange = React.useCallback(function (params) {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    var fetchRowsParams = {
+      firstRowToRender: params.firstRowToRender,
+      lastRowToRender: params.lastRowToRender,
+      sortModel: sortModel,
+      filterModel: filterModel
+    };
+
+    if (renderedRowsIntervalCache.current.firstRowToRender === params.firstRowToRender && renderedRowsIntervalCache.current.lastRowToRender === params.lastRowToRender) {
+      return;
+    }
+
+    if (sortModel.length === 0 && filterModel.items.length === 0) {
+      var skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
+        firstRowIndex: params.firstRowToRender,
+        lastRowIndex: params.lastRowToRender
+      });
+
+      if (!skeletonRowsSection) {
+        return;
+      }
+
+      fetchRowsParams.firstRowToRender = skeletonRowsSection.firstRowIndex;
+      fetchRowsParams.lastRowToRender = skeletonRowsSection.lastRowIndex;
+    }
+
+    renderedRowsIntervalCache.current = params;
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, sortModel, filterModel, visibleRows.rows, lazyLoading]);
+  var handleGridSortModelChange = React.useCallback(function (newSortModel) {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+
+    var _getCurrentIntervalTo = getCurrentIntervalToRender(),
+        firstRowToRender = _getCurrentIntervalTo.firstRowToRender,
+        lastRowToRender = _getCurrentIntervalTo.lastRowToRender;
+
+    var fetchRowsParams = {
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      sortModel: newSortModel,
+      filterModel: filterModel
+    };
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, filterModel, lazyLoading, getCurrentIntervalToRender]);
+  var handleGridFilterModelChange = React.useCallback(function (newFilterModel) {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (isLazyLoadingDisabled({
+      lazyLoadingFeatureFlag: lazyLoading,
+      rowsLoadingMode: props.rowsLoadingMode,
+      gridDimensions: dimensions
+    })) {
+      return;
+    }
+
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+
+    var _getCurrentIntervalTo2 = getCurrentIntervalToRender(),
+        firstRowToRender = _getCurrentIntervalTo2.firstRowToRender,
+        lastRowToRender = _getCurrentIntervalTo2.lastRowToRender;
+
+    var fetchRowsParams = {
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      sortModel: sortModel,
+      filterModel: newFilterModel
+    };
+    apiRef.current.publishEvent('fetchRows', fetchRowsParams);
+  }, [apiRef, props.rowsLoadingMode, sortModel, lazyLoading, getCurrentIntervalToRender]);
+  useGridApiEventHandler(apiRef, 'renderedRowsIntervalChange', handleRenderedRowsIntervalChange);
+  useGridApiEventHandler(apiRef, 'sortModelChange', handleGridSortModelChange);
+  useGridApiEventHandler(apiRef, 'filterModelChange', handleGridFilterModelChange);
+  useGridApiOptionHandler(apiRef, 'fetchRows', props.onFetchRows);
+};

package/legacy/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import * as React from 'react';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GridFeatureModeConstant } from '@mui/x-data-grid';
+export var GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
+
+var getSkeletonRowId = function getSkeletonRowId(index) {
+  return "".concat(GRID_SKELETON_ROW_ROOT_ID, "-").concat(index);
+};
+
+export var useGridLazyLoaderPreProcessors = function useGridLazyLoaderPreProcessors(apiRef, props) {
+  var _props$experimentalFe;
+
+  var _ref = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {},
+      lazyLoading = _ref.lazyLoading;
+
+  var addSkeletonRows = React.useCallback(function (groupingParams) {
+    if (!lazyLoading || props.rowsLoadingMode !== GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+      return groupingParams;
+    }
+
+    var newRowsIds = _toConsumableArray(groupingParams.ids);
+
+    for (var i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+      var skeletonId = getSkeletonRowId(i);
+      newRowsIds.push(skeletonId);
+    }
+
+    return _extends({}, groupingParams, {
+      ids: newRowsIds
+    });
+  }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addSkeletonRows);
+};

package/legacy/hooks/features/treeData/gridTreeDataUtils.js

@@ -29,7 +29,7 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
           passingFilterItems = _isRowMatchingFilters.passingFilterItems,
           passingQuickFilterValues = _isRowMatchingFilters.passingQuickFilterValues;
 
-      isMatchingFilters = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+      isMatchingFilters = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, params.apiRef);
     }
 
     var filteredDescendantCount = 0;

package/legacy/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -115,7 +115,8 @@ export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(
       rowTree: rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
       disableChildrenFiltering: props.disableChildrenFiltering,
-      filterModel: params.filterModel
+      filterModel: params.filterModel,
+      apiRef: apiRef
     });
   }, [apiRef, props.disableChildrenFiltering]);
   var sortRows = React.useCallback(function (params) {

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.3
+/** @license MUI v5.17.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/models/gridFetchRowsParams.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/index.js

@@ -1,3 +1,4 @@
 export * from './gridGroupingColDefOverride';
 export * from './gridRowScrollEndParams';
-export * from './gridRowOrderChangeParams';
+export * from './gridRowOrderChangeParams';
+export * from './gridFetchRowsParams';

package/legacy/utils/domUtils.js

@@ -6,6 +6,11 @@ export function getFieldFromHeaderElem(colCellEl) {
 export function findHeaderElementFromField(elem, field) {
   return elem.querySelector("[data-field=\"".concat(field, "\"]"));
 }
+export function findGroupHeaderElementsFromField(elem, field) {
+  var _elem$querySelectorAl;
+
+  return Array.from((_elem$querySelectorAl = elem.querySelectorAll("[data-fields*=\"|-".concat(field, "-|\"]"))) != null ? _elem$querySelectorAl : []);
+}
 export function findGridCellElementsFromCol(col, api) {
   var root = findParentElementFromClassName(col, 'MuiDataGrid-root');