@mui/x-data-grid-pro 5.16.0 → 5.17.2

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

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

package/index.js

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

package/legacy/DataGridPro/DataGridPro.js

@@ -276,6 +276,7 @@ DataGridProRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -670,6 +671,14 @@ DataGridProRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -915,6 +924,14 @@ DataGridProRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -11,6 +11,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+import { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoader';
+import { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
 import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
@@ -25,6 +27,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
+  useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
@@ -78,6 +81,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
+  useGridLazyLoader(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);

package/legacy/DataGridPro/useDataGridProProps.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -15,6 +15,7 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
+  rowsLoadingMode: GridFeatureModeConstant.client,
   getDetailPanelHeight: function getDetailPanelHeight() {
     return 500;
   }

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/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.16.0
+/** @license MUI v5.17.2
  *
  * 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/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY2MTM3ODQwMDAwMA==";
+  var releaseInfo = "MTY2MjY3NDQwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/models/dataGridProProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridRowTreeNodeConfig, GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel } from '@mui/x-data-grid';
+import { GridRowTreeNodeConfig, GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridFeatureMode } from '@mui/x-data-grid';
 import { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing } from '@mui/x-data-grid/internals';
 import type { GridPinnedColumns } from '../hooks/features/columnPinning';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
@@ -7,6 +7,13 @@ import { GridApiPro } from './gridApiPro';
 import { GridGroupingColDefOverride, GridGroupingColDefOverrideParams } from './gridGroupingColDefOverride';
 import { GridInitialStatePro } from './gridStatePro';
 export interface GridExperimentalProFeatures extends GridExperimentalFeatures {
+    /**
+     * Enables the data grid to lazy load rows while scrolling.
+     */
+    lazyLoading: boolean;
+    /**
+     * Enables the the ability for rows to be pinned in data grid.
+     */
     rowPinning: boolean;
 }
 /**
@@ -76,6 +83,13 @@ export interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefau
      * @default false
      */
     rowReordering: boolean;
+    /**
+     * Loading rows can be processed on the server or client-side.
+     * Set it to 'client' if you would like enable infnite loading.
+     * Set it to 'server' if you would like to enable lazy loading.
+     * * @default "client"
+     */
+    rowsLoadingMode: GridFeatureMode;
 }
 export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState'> {
     /**
@@ -160,6 +174,13 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onRowOrderChange?: GridEventListener<'rowOrderChange'>;
+    /**
+     * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+     * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+     * @param {MuiEvent<{}>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onFetchRows?: GridEventListener<'fetchRows'>;
     /**
      * Rows data to pin on top or bottom.
      */

package/models/gridFetchRowsParams.d.ts

@@ -0,0 +1,22 @@
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid/models';
+/**
+ * Object passed as parameter to the [[onFetchRows]] option.
+ */
+export interface GridFetchRowsParams {
+    /**
+     * The index of the first row to render.
+     */
+    firstRowToRender: number;
+    /**
+     * The index of the last row to render.
+     */
+    lastRowToRender: number;
+    /**
+     * The sort model used to sort the grid.
+     */
+    sortModel: GridSortModel;
+    /**
+     * The filter model.
+     */
+    filterModel: GridFilterModel;
+}

package/models/gridFetchRowsParams.js

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

package/models/index.d.ts

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

package/models/index.js

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