@mui/x-data-grid-pro 5.13.1 → 5.15.1

package/legacy/components/DataGridProVirtualScroller.js

@@ -8,12 +8,13 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
-import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
+import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelExpandedRowIdsSelector } from '../hooks/features/detailPanel';
 import { GridDetailPanel } from './GridDetailPanel';
+import { gridPinnedRowsSelector } from '../hooks/features/rowPinning/gridRowPinningSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var filterColumns = function filterColumns(pinnedColumns, columns) {
@@ -47,12 +48,13 @@ export var filterColumns = function filterColumns(pinnedColumns, columns) {
 };
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-      leftPinnedColumns = ownerState.leftPinnedColumns,
-      rightPinnedColumns = ownerState.rightPinnedColumns;
+  var classes = ownerState.classes;
   var slots = {
-    leftPinnedColumns: ['pinnedColumns', leftPinnedColumns && leftPinnedColumns.length > 0 && 'pinnedColumns--left'],
-    rightPinnedColumns: ['pinnedColumns', rightPinnedColumns && rightPinnedColumns.length > 0 && 'pinnedColumns--right'],
+    leftPinnedColumns: ['pinnedColumns', 'pinnedColumns--left'],
+    rightPinnedColumns: ['pinnedColumns', 'pinnedColumns--right'],
+    topPinnedRows: ['pinnedRows', 'pinnedRows--top'],
+    bottomPinnedRows: ['pinnedRows', 'pinnedRows--bottom'],
+    pinnedRowsRenderZone: ['pinnedRowsRenderZone'],
     detailPanels: ['detailPanels'],
     detailPanel: ['detailPanel']
   };
@@ -72,6 +74,10 @@ var getOverlayAlpha = function getOverlayAlpha(elevation) {
   return alphaValue / 100;
 };
 
+var getBoxShadowColor = function getBoxShadowColor(theme) {
+  return alpha(theme.palette.common.black, 0.21);
+};
+
 var VirtualScrollerDetailPanels = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
@@ -81,6 +87,7 @@ var VirtualScrollerDetailPanels = styled('div', {
 })({
   position: 'relative'
 });
+var darkModeBackgroundImage = "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(2)), ", ").concat(alpha('#fff', getOverlayAlpha(2)), ")");
 var VirtualScrollerPinnedColumns = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -90,22 +97,52 @@ var VirtualScrollerPinnedColumns = styled('div', {
 })(function (_ref3) {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
+  var boxShadowColor = getBoxShadowColor(theme);
   return _extends({
     position: 'sticky',
     overflow: 'hidden',
     zIndex: 1,
-    boxShadow: theme.shadows[2],
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
-    backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(2)), ", ").concat(alpha('#fff', getOverlayAlpha(2)), ")")
+    backgroundImage: darkModeBackgroundImage
   }, ownerState.side === GridPinnedPosition.left && {
     left: 0,
-    float: 'left'
+    float: 'left',
+    boxShadow: "2px 0px 4px -2px ".concat(boxShadowColor)
   }, ownerState.side === GridPinnedPosition.right && {
     right: 0,
-    float: 'right'
+    float: 'right',
+    boxShadow: "-2px 0px 4px -2px ".concat(boxShadowColor)
+  });
+});
+var VirtualScrollerPinnedRows = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedRows',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses['pinnedRows--top']), styles['pinnedRows--top']), _defineProperty({}, "&.".concat(gridClasses['pinnedRows--bottom']), styles['pinnedRows--bottom']), styles.pinnedRows];
+  }
+})(function (_ref6) {
+  var theme = _ref6.theme,
+      ownerState = _ref6.ownerState;
+  var boxShadowColor = getBoxShadowColor(theme);
+  return _extends({
+    position: 'sticky',
+    // should be above the detail panel
+    zIndex: 3,
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: darkModeBackgroundImage
+  }, ownerState.position === 'top' && {
+    top: 0,
+    boxShadow: "0px 3px 4px -2px ".concat(boxShadowColor)
+  }, ownerState.position === 'bottom' && {
+    boxShadow: "0px -3px 4px -2px ".concat(boxShadowColor),
+    bottom: 0
   });
 });
+var VirtualScrollerPinnedRowsRenderZone = styled('div')({
+  position: 'absolute'
+});
 var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
   var className = props.className,
       disableVirtualization = props.disableVirtualization,
@@ -119,8 +156,11 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var detailPanelsHeights = useGridSelector(apiRef, gridDetailPanelExpandedRowsHeightCacheSelector);
   var leftColumns = React.useRef(null);
   var rightColumns = React.useRef(null);
-  var handleRenderZonePositioning = React.useCallback(function (_ref4) {
-    var top = _ref4.top;
+  var topPinnedRowsRenderZoneRef = React.useRef(null);
+  var bottomPinnedRowsRenderZoneRef = React.useRef(null);
+  var handleRenderZonePositioning = React.useCallback(function (_ref7) {
+    var top = _ref7.top,
+        left = _ref7.left;
 
     if (leftColumns.current) {
       leftColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
@@ -129,6 +169,14 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     if (rightColumns.current) {
       rightColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
     }
+
+    if (topPinnedRowsRenderZoneRef.current) {
+      topPinnedRowsRenderZoneRef.current.style.transform = "translate3d(".concat(left, "px, 0px, 0px)");
+    }
+
+    if (bottomPinnedRowsRenderZoneRef.current) {
+      bottomPinnedRowsRenderZoneRef.current.style.transform = "translate3d(".concat(left, "px, 0px, 0px)");
+    }
   }, []);
 
   var getRowProps = function getRowProps(id) {
@@ -151,10 +199,19 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       leftPinnedColumns = _filterColumns2[0],
       rightPinnedColumns = _filterColumns2[1];
 
+  var pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  var topPinnedRowsData = React.useMemo(function () {
+    return (pinnedRows == null ? void 0 : pinnedRows.top) || [];
+  }, [pinnedRows == null ? void 0 : pinnedRows.top]);
+  var bottomPinnedRowsData = React.useMemo(function () {
+    return (pinnedRows == null ? void 0 : pinnedRows.bottom) || [];
+  }, [pinnedRows == null ? void 0 : pinnedRows.bottom]);
   var ownerState = {
     classes: rootProps.classes,
     leftPinnedColumns: leftPinnedColumns,
-    rightPinnedColumns: rightPinnedColumns
+    rightPinnedColumns: rightPinnedColumns,
+    topPinnedRowsCount: topPinnedRowsData.length,
+    bottomPinnedRowsCount: bottomPinnedRowsData.length
   };
   var classes = useUtilityClasses(ownerState);
 
@@ -188,10 +245,6 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  var contentProps = getContentProps();
-  var pinnedColumnsStyle = {
-    minHeight: contentProps.style.minHeight
-  };
 
   var getDetailPanels = function getDetailPanels() {
     var panels = [];
@@ -232,8 +285,73 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   };
 
   var detailPanels = getDetailPanels();
-  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({}, getRootProps(other), {
-    children: /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
+  var topPinnedRows = getRows({
+    renderContext: renderContext,
+    rows: topPinnedRowsData
+  });
+  var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+  var mainRows = getRows({
+    renderContext: renderContext,
+    rowIndexOffset: topPinnedRowsData.length
+  });
+  var bottomPinnedRows = getRows({
+    renderContext: renderContext,
+    rows: bottomPinnedRowsData,
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+  });
+  var contentProps = getContentProps();
+  var pinnedColumnsStyle = {
+    minHeight: contentProps.style.minHeight
+  };
+
+  if (contentProps.style.minHeight && contentProps.style.minHeight === '100%') {
+    contentProps.style.minHeight = "calc(100% - ".concat(pinnedRowsHeight.top, "px - ").concat(pinnedRowsHeight.bottom, "px)");
+  }
+
+  return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
+    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+      className: classes.topPinnedRows,
+      ownerState: {
+        position: 'top'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.top
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: topPinnedRowsData
+        })
+      }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: topPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: topPinnedRows
+      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          ignoreAutoHeight: true,
+          availableSpace: 0,
+          rows: topPinnedRowsData
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
@@ -246,12 +364,11 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext: renderContext
-        })
+        children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
@@ -264,13 +381,58 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]
-    }))
+    })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+      className: classes.bottomPinnedRows,
+      ownerState: {
+        position: 'bottom'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.bottom
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: bottomPinnedRowsData,
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+        })
+      }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: bottomPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: bottomPinnedRows
+      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: bottomPinnedRowsData,
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+        })
+      })]
+    }) : null]
   }));
 });
 export { DataGridProVirtualScroller };

package/legacy/components/GridRowReorderCell.js

@@ -17,6 +17,8 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 };
 
 var GridRowReorderCell = function GridRowReorderCell(params) {
+  var _params$rowNode$posit;
+
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
@@ -59,6 +61,11 @@ var GridRowReorderCell = function GridRowReorderCell(params) {
     onDragOver: publish('rowDragOver'),
     onDragEnd: publish('rowDragEnd')
   } : null;
+
+  if (((_params$rowNode$posit = params.rowNode.position) != null ? _params$rowNode$posit : 'body') !== 'body') {
+    return null;
+  }
+
   return /*#__PURE__*/_jsxs("div", _extends({
     className: classes.root,
     draggable: isDraggable
@@ -72,5 +79,9 @@ var GridRowReorderCell = function GridRowReorderCell(params) {
 
 export { GridRowReorderCell };
 export var renderRowReorderCell = function renderRowReorderCell(params) {
+  if (params.rowNode.isPinned) {
+    return null;
+  }
+
   return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
 };

package/legacy/hooks/features/columnPinning/useGridColumnPinning.js

@@ -54,6 +54,8 @@ var mergeStateWithPinnedColumns = function mergeStateWithPinnedColumns(pinnedCol
 };
 
 export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
+  var _props$initialState4;
+
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
   // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
   // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
@@ -183,17 +185,24 @@ export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
 
     return initialValue;
   }, [apiRef, pinnedColumns]);
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
+    var _props$initialState3, _pinnedColumnsToExpor, _pinnedColumnsToExpor2;
+
     var pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+    var shouldExportPinnedColumns = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.pinnedColumns != null || // Always export if the model has been initialized
+    ((_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.pinnedColumns) != null || // Export if the model is not empty
+    ((_pinnedColumnsToExpor = pinnedColumnsToExport.left) != null ? _pinnedColumnsToExpor : []).length > 0 || ((_pinnedColumnsToExpor2 = pinnedColumnsToExport.right) != null ? _pinnedColumnsToExpor2 : []).length > 0;
 
-    if ((!pinnedColumnsToExport.left || pinnedColumnsToExport.left.length === 0) && (!pinnedColumnsToExport.right || pinnedColumnsToExport.right.length === 0)) {
+    if (!shouldExportPinnedColumns) {
       return prevState;
     }
 
     return _extends({}, prevState, {
       pinnedColumns: pinnedColumnsToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.pinnedColumns, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.pinnedColumns]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var newPinnedColumns = context.stateToRestore.pinnedColumns;
 

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

@@ -12,6 +12,8 @@ export var GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF,
   sortable: false,
   filterable: false,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/legacy/hooks/features/index.js

@@ -4,4 +4,5 @@ export * from './columnReorder';
 export * from './columnResize';
 export * from './rowReorder';
 export * from './treeData';
-export * from './detailPanel';
+export * from './detailPanel';
+export * from './rowPinning';

package/legacy/hooks/features/rowPinning/gridRowPinningInterface.js

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

package/legacy/hooks/features/rowPinning/gridRowPinningSelector.js

@@ -0,0 +1 @@
+export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '@mui/x-data-grid/internals';

package/legacy/hooks/features/rowPinning/index.js

@@ -0,0 +1 @@
+export * from './gridRowPinningInterface';

package/legacy/hooks/features/rowPinning/useGridRowPinning.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '@mui/x-data-grid';
+import { getRowIdFromRowModel } from '@mui/x-data-grid/internals';
+
+function createPinnedRowsInternalCache(pinnedRows, getRowId) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  var cache = {
+    topIds: [],
+    bottomIds: [],
+    idLookup: {}
+  };
+  pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(function (rowModel) {
+    var id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.topIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(function (rowModel) {
+    var id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.bottomIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  return cache;
+}
+
+export var rowPinningStateInitializer = function rowPinningStateInitializer(state, props, apiRef) {
+  var _props$experimentalFe, _state$rows;
+
+  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.rowPinning)) {
+    return state;
+  }
+
+  apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
+  return _extends({}, state, {
+    rows: _extends({}, state.rows, {
+      additionalRowGroups: _extends({}, (_state$rows = state.rows) == null ? void 0 : _state$rows.additionalRowGroups, {
+        pinnedRows: {
+          top: [],
+          bottom: []
+        }
+      })
+    })
+  });
+};
+export var useGridRowPinning = function useGridRowPinning(apiRef, props) {
+  var _props$experimentalFe3;
+
+  var setPinnedRows = React.useCallback(function (newPinnedRows) {
+    var _props$experimentalFe2;
+
+    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.rowPinning)) {
+      return;
+    }
+
+    apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.rowPinning, props.getRowId]);
+  useGridApiMethod(apiRef, {
+    unstable_setPinnedRows: setPinnedRows
+  }, 'rowPinningApi');
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    apiRef.current.unstable_setPinnedRows(props.pinnedRows);
+  }, [apiRef, props.pinnedRows]);
+};

package/legacy/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -0,0 +1,89 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+export function addPinnedRow(_ref) {
+  var _groupingParams$addit;
+
+  var groupingParams = _ref.groupingParams,
+      rowModel = _ref.rowModel,
+      rowId = _ref.rowId,
+      position = _ref.position,
+      apiRef = _ref.apiRef;
+
+  var idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+
+  var tree = _extends({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+
+
+  idRowsLookup[rowId] = rowModel; // Do not push it to ids list so that pagination is not affected by pinned rows
+  // ids.push(rowId);
+
+  tree[rowId] = {
+    id: rowId,
+    isAutoGenerated: false,
+    parent: null,
+    depth: 0,
+    groupingKey: null,
+    groupingField: null,
+    isPinned: true
+  };
+  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = _extends({}, rowModel);
+  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  var previousPinnedRows = ((_groupingParams$addit = groupingParams.additionalRowGroups) == null ? void 0 : _groupingParams$addit.pinnedRows) || {};
+  var newPinnedRow = {
+    id: rowId,
+    model: rowModel
+  };
+  return _extends({}, groupingParams, {
+    idRowsLookup: idRowsLookup,
+    tree: tree,
+    additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+      pinnedRows: _extends({}, previousPinnedRows, _defineProperty({}, position, [].concat(_toConsumableArray(previousPinnedRows[position] || []), [newPinnedRow])))
+    })
+  });
+}
+export var useGridRowPinningPreProcessors = function useGridRowPinningPreProcessors(apiRef) {
+  var addPinnedRows = React.useCallback(function (groupingParams) {
+    var _pinnedRowsCache$topI, _pinnedRowsCache$bott;
+
+    var pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
+
+    var newGroupingParams = _extends({}, groupingParams, {
+      additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+        // reset pinned rows state
+        pinnedRows: {}
+      })
+    });
+
+    (_pinnedRowsCache$topI = pinnedRowsCache.topIds) == null ? void 0 : _pinnedRowsCache$topI.forEach(function (rowId) {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId: rowId,
+        position: 'top',
+        apiRef: apiRef
+      });
+    });
+    (_pinnedRowsCache$bott = pinnedRowsCache.bottomIds) == null ? void 0 : _pinnedRowsCache$bott.forEach(function (rowId) {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId: rowId,
+        position: 'bottom',
+        apiRef: apiRef
+      });
+    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from `ids`
+
+    newGroupingParams.ids = newGroupingParams.ids.filter(function (rowId) {
+      if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].isPinned) {
+        return false;
+      }
+
+      return true;
+    });
+    return newGroupingParams;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addPinnedRows);
+};

package/legacy/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -13,6 +13,8 @@ export var GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableExport: true,
   disableReorder: true,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   renderHeader: function renderHeader() {
     return ' ';
   },

package/legacy/hooks/features/rowReorder/useGridRowReorder.js

@@ -64,10 +64,16 @@ export var useGridRowReorder = function useGridRowReorder(apiRef, props) {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   var handleDragOver = React.useCallback(function (params, event) {
+    var _apiRef$current$getRo;
+
     if (dragRowId === '') {
       return;
     }
 
+    if ((_apiRef$current$getRo = apiRef.current.getRowNode(params.id)) != null && _apiRef$current$getRo.isPinned) {
+      return;
+    }
+
     logger.debug("Dragging over row ".concat(params.id));
     event.preventDefault(); // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.

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

@@ -60,11 +60,20 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
 
+    if (node.footerId != null) {
+      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+
     if (!shouldPassFilters) {
       return 0;
     }
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
+
+    if (node.position === 'footer') {
+      return filteredDescendantCount;
+    }
+
     return filteredDescendantCount + 1;
   };
 

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.13.1
+/** @license MUI v5.15.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/internals/index.js

@@ -12,5 +12,8 @@ export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorde
 export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
 export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
+export { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
+export { useGridRowPinningPreProcessors, addPinnedRow } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export { buildRowTree } from '../utils/tree/buildRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';

package/legacy/utils/releaseInfo.js

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