@mui/x-data-grid 5.13.1 → 5.15.1

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -27,10 +27,16 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 
 var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
 
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function enrichPageRowsWithPinnedRows(apiRef, rows) {
+  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef) || {};
+  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
+}
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -40,20 +46,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
+
+
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
+  const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   /**
    * @param {number} colIndex Index of the column to focus
    * @param {number} rowIndex index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
    */
 
-  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
-    var _visibleSortedRows$ro;
-
+  const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left') => {
     const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
-    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
     const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
 
     if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
@@ -62,12 +68,15 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       } else if (closestColumnToUse === 'right') {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
-    }
+    } // `scrollToIndexes` requires a rowIndex relative to all visible rows.
+    // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
+
 
-    logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
+    const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === rowId);
+    logger.debug(`Navigating to cell row ${rowIndexRelativeToAllRows}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
-      rowIndex
+      rowIndex: rowIndexRelativeToAllRows
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setCellFocus(rowId, field);
@@ -80,19 +89,21 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  const getRowIdFromIndex = React.useCallback(rowIndex => {
+    return currentPageRows[rowIndex].id;
+  }, [currentPageRows]);
   const handleCellNavigationKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
 
-    if (!currentPage.range || !dimensions) {
+    if (currentPageRows.length === 0 || !dimensions) {
       return;
     }
 
     const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
-    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const rowIndexBefore = visibleSortedRows.findIndex(row => row.id === params.id);
-    const firstRowIndexInPage = currentPage.range.firstRowIndex;
-    const lastRowIndexInPage = currentPage.range.lastRowIndex;
+    const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
     let shouldPreventDefault = true;
@@ -103,7 +114,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, rowIndexBefore + 1);
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));
           }
 
           break;
@@ -112,7 +123,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowUp':
         {
           if (rowIndexBefore > firstRowIndexInPage) {
-            goToCell(colIndexBefore, rowIndexBefore - 1);
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore - 1));
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -123,7 +134,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
+            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
 
           break;
@@ -132,7 +143,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowLeft':
         {
           if (colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -142,9 +153,9 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
+            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
+            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
 
           break;
@@ -165,7 +176,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
           }
 
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -174,7 +185,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -186,7 +197,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
           const nextRowIndex = Math.max(rowIndexBefore - viewportPageSize, firstRowIndexInPage);
 
           if (nextRowIndex !== rowIndexBefore && nextRowIndex >= firstRowIndexInPage) {
-            goToCell(colIndexBefore, nextRowIndex);
+            goToCell(colIndexBefore, getRowIdFromIndex(nextRowIndex));
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -197,9 +208,9 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'Home':
         {
           if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            goToCell(firstColIndex, firstRowIndexInPage);
+            goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
           } else {
-            goToCell(firstColIndex, rowIndexBefore);
+            goToCell(firstColIndex, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -208,9 +219,9 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'End':
         {
           if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            goToCell(lastColIndex, lastRowIndexInPage);
+            goToCell(lastColIndex, getRowIdFromIndex(lastRowIndexInPage));
           } else {
-            goToCell(lastColIndex, rowIndexBefore);
+            goToCell(lastColIndex, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -225,10 +236,8 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPage, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
-    var _currentPage$range$fi, _currentPage$range, _currentPage$range$la, _currentPage$range2;
-
     const headerTitleNode = event.currentTarget.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
     const isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
 
@@ -246,8 +255,8 @@ const useGridKeyboardNavigation = (apiRef, props) => {
 
     const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const firstRowIndexInPage = (_currentPage$range$fi = (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) != null ? _currentPage$range$fi : null;
-    const lastRowIndexInPage = (_currentPage$range$la = (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex) != null ? _currentPage$range$la : null;
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
     let shouldPreventDefault = true;
@@ -256,7 +265,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowDown':
         {
           if (firstRowIndexInPage !== null) {
-            goToCell(colIndexBefore, firstRowIndexInPage);
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
 
           break;
@@ -283,7 +292,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
-            goToCell(colIndexBefore, Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -325,7 +334,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPage, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {

package/node/hooks/features/pagination/useGridPage.js

@@ -85,13 +85,14 @@ const useGridPage = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     var _props$initialState, _props$initialState$p;
 
     const pageToExport = (0, _gridPaginationSelector.gridPageSelector)(apiRef);
-    const shouldExportPage = // Always export if the page is controlled
+    const shouldExportPage = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page is controlled
     props.page != null || // Always export if the page has been initialized
-    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page is not equal to the default value
     pageToExport !== 0;
 
     if (!shouldExportPage) {

package/node/hooks/features/pagination/useGridPageSize.js

@@ -19,6 +19,8 @@ var _density = require("../density");
 
 var _pipeProcessing = require("../../core/pipeProcessing");
 
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -70,13 +72,14 @@ const useGridPageSize = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     var _props$initialState, _props$initialState$p;
 
     const pageSizeToExport = (0, _gridPaginationSelector.gridPageSizeSelector)(apiRef);
-    const shouldExportPageSize = // Always export if the page size is controlled
+    const shouldExportPageSize = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page size is controlled
     props.pageSize != null || // Always export if the page size has been initialized
-    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size is not equal to the default value
     pageSizeToExport !== defaultPageSize(props.autoPageSize);
 
     if (!shouldExportPageSize) {
@@ -117,7 +120,8 @@ const useGridPageSize = (apiRef, props) => {
       return;
     }
 
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
+    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);

package/node/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -39,7 +39,9 @@ const preferencePanelStateInitializer = (state, props) => {
 
 exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 
-const useGridPreferencesPanel = apiRef => {
+const useGridPreferencesPanel = (apiRef, props) => {
+  var _props$initialState3;
+
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
@@ -96,17 +98,23 @@ const useGridPreferencesPanel = apiRef => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState2;
+
     const preferencePanelToExport = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(apiRef.current.state);
+    const shouldExportPreferencePanel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the panel was initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.preferencePanel) != null || // Always export if the panel is opened
+    preferencePanelToExport.open;
 
-    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+    if (!shouldExportPreferencePanel) {
       return prevState;
     }
 
     return (0, _extends2.default)({}, prevState, {
       preferencePanel: preferencePanelToExport
     });
-  }, [apiRef]);
+  }, [apiRef, (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.preferencePanel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const preferencePanel = context.stateToRestore.preferencePanel;
 

package/node/hooks/features/rows/gridRowsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridAdditionalRowGroupsSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -27,4 +27,26 @@ exports.gridRowGroupingNameSelector = gridRowGroupingNameSelector;
 const gridRowTreeDepthSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.treeDepth);
 exports.gridRowTreeDepthSelector = gridRowTreeDepthSelector;
 const gridRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.ids);
-exports.gridRowIdsSelector = gridRowIdsSelector;
+/**
+ * @ignore - do not document.
+ */
+
+exports.gridRowIdsSelector = gridRowIdsSelector;
+const gridAdditionalRowGroupsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows == null ? void 0 : rows.additionalRowGroups);
+/**
+ * @ignore - do not document.
+ */
+
+exports.gridAdditionalRowGroupsSelector = gridAdditionalRowGroupsSelector;
+const gridPinnedRowsSelector = (0, _createSelector.createSelector)(gridAdditionalRowGroupsSelector, additionalRowGroups => additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows);
+/**
+ * @ignore - do not document.
+ */
+
+exports.gridPinnedRowsSelector = gridPinnedRowsSelector;
+const gridPinnedRowsCountSelector = (0, _createSelector.createSelector)(gridPinnedRowsSelector, pinnedRows => {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  return ((pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.length) || 0) + ((pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.length) || 0);
+});
+exports.gridPinnedRowsCountSelector = gridPinnedRowsCountSelector;

package/node/hooks/features/rows/gridRowsUtils.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.calculatePinnedRowsHeight = calculatePinnedRowsHeight;
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
 exports.getTreeNodeDescendants = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.createRowsInternalCache = void 0;
 
@@ -12,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _gridRowsSelector = require("./gridRowsSelector");
+
 const _excluded = ["rowsBeforePartialUpdates"];
 
 /**
@@ -73,7 +76,7 @@ const getRowsStateFromCache = ({
     previousTree
   }));
   const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
-  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null).length;
+  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null && !node.isPinned).length;
   return (0, _extends2.default)({}, processedGroupingResponse, {
     groupingResponseBeforeRowHydration: groupingResponse,
     loading: loadingProp,
@@ -109,4 +112,22 @@ const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
   return validDescendants;
 };
 
-exports.getTreeNodeDescendants = getTreeNodeDescendants;
+exports.getTreeNodeDescendants = getTreeNodeDescendants;
+
+function calculatePinnedRowsHeight(apiRef) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
+  const topPinnedRowsHeight = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.reduce((acc, value) => {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0)) || 0;
+  const bottomPinnedRowsHeight = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.reduce((acc, value) => {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0)) || 0;
+  return {
+    top: topPinnedRowsHeight,
+    bottom: bottomPinnedRowsHeight
+  };
+}

package/node/hooks/features/rows/index.js

@@ -4,6 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  gridRowsStateSelector: true,
+  gridRowCountSelector: true,
+  gridRowsLoadingSelector: true,
+  gridTopLevelRowCountSelector: true,
+  gridRowsLookupSelector: true,
+  gridRowsIdToIdLookupSelector: true,
+  gridRowTreeSelector: true,
+  gridRowGroupingNameSelector: true,
+  gridRowTreeDepthSelector: true,
+  gridRowIdsSelector: true,
   checkGridRowIdIsValid: true
 };
 Object.defineProperty(exports, "checkGridRowIdIsValid", {
@@ -12,6 +22,66 @@ Object.defineProperty(exports, "checkGridRowIdIsValid", {
     return _gridRowsUtils.checkGridRowIdIsValid;
   }
 });
+Object.defineProperty(exports, "gridRowCountSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowCountSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowGroupingNameSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowGroupingNameSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowIdsSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowTreeDepthSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowTreeDepthSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowTreeSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowTreeSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowsIdToIdLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowsIdToIdLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowsLoadingSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowsLoadingSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowsLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowsLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridRowsStateSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridRowsStateSelector;
+  }
+});
+Object.defineProperty(exports, "gridTopLevelRowCountSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsSelector.gridTopLevelRowCountSelector;
+  }
+});
 
 var _gridRowsMetaSelector = require("./gridRowsMetaSelector");
 
@@ -43,16 +113,4 @@ Object.keys(_gridRowsMetaState).forEach(function (key) {
 
 var _gridRowsSelector = require("./gridRowsSelector");
 
-Object.keys(_gridRowsSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridRowsSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridRowsSelector[key];
-    }
-  });
-});
-
 var _gridRowsUtils = require("./gridRowsUtils");

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -29,6 +29,8 @@ var _gridSortingSelector = require("../sorting/gridSortingSelector");
 
 var _pipeProcessing = require("../../core/pipeProcessing");
 
+var _gridRowsSelector = require("./gridRowsSelector");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,13 +64,14 @@ const useGridRowsMeta = (apiRef, props) => {
   const paginationState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationSelector);
   const sortingState = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortingStateSelector);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
   const hydrateRowsMeta = React.useCallback(() => {
+    var _pinnedRows$top, _pinnedRows$bottom;
+
     hasRowWithAutoHeight.current = false;
     const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef.current.state, apiRef.current.instanceId);
-    const positions = [];
-    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
-      positions.push(acc);
 
+    const calculateRowProcessedSizes = row => {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
@@ -140,9 +143,22 @@ const useGridRowsMeta = (apiRef, props) => {
 
       const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
       rowsHeightLookup.current[row.id].sizes = processedSizes;
+      return processedSizes;
+    };
+
+    const positions = [];
+    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
+      positions.push(acc);
+      const processedSizes = calculateRowProcessedSizes(row);
       const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
       return acc + finalRowHeight;
     }, 0);
+    pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(row => {
+      calculateRowProcessedSizes(row);
+    });
+    pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(row => {
+      calculateRowProcessedSizes(row);
+    });
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
         rowsMeta: {
@@ -158,7 +174,7 @@ const useGridRowsMeta = (apiRef, props) => {
     }
 
     apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   const getRowHeight = React.useCallback(rowId => {
     const height = rowsHeightLookup.current[rowId];
     return height ? height.sizes.base : rowHeightFromDensity;

package/node/hooks/features/rows/useGridRowsPreProcessors.js

@@ -18,7 +18,8 @@ const flatRowTreeCreationMethod = ({
   for (let i = 0; i < ids.length; i += 1) {
     const rowId = ids[i];
 
-    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null && // pinned row can be unpinned
+    !previousTree[rowId].isPinned) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {

package/node/hooks/features/scroll/useGridScroll.js

@@ -23,6 +23,8 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 
+var _gridClasses = require("../../../constants/gridClasses");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -108,13 +110,17 @@ const useGridScroll = (apiRef, props) => {
     }
 
     if (params.rowIndex != null) {
+      var _querySelector, _querySelector2;
+
       const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state);
       const page = (0, _gridPaginationSelector.gridPageSelector)(apiRef);
       const pageSize = (0, _gridPaginationSelector.gridPageSizeSelector)(apiRef);
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
+      const topPinnedRowsHeight = ((_querySelector = windowRef.current.querySelector(`.${_gridClasses.gridClasses['pinnedRows--top']}`)) == null ? void 0 : _querySelector.clientHeight) || 0;
+      const bottomPinnedRowsHeight = ((_querySelector2 = windowRef.current.querySelector(`.${_gridClasses.gridClasses['pinnedRows--bottom']}`)) == null ? void 0 : _querySelector2.clientHeight) || 0;
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: windowRef.current.clientHeight,
+        clientHeight: windowRef.current.clientHeight - topPinnedRowsHeight - bottomPinnedRowsHeight,
         scrollTop: windowRef.current.scrollTop,
         offsetHeight: targetOffsetHeight,
         offsetTop: rowsMeta.positions[elementIndex]