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

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.14.0
+
+_Jul 21, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Export `GridBooleanCell` component from data grid (#5537) @cliedeman
+- ⚙️ Improve accessibility of the Export menu (#5486) @nogalpaulina
+- 🌍 Improvements to different locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.14.0` / `@mui/x-data-grid-pro@5.14.0` / `@mui/x-data-grid-premium@5.14.0`
+
+#### Changes
+
+- [DataGrid] Add generics to `GridPreProcessEditCellProps` (#5510) @YunosukeY
+- [DataGrid] Avoid inconsistent state export (#5390) @flaviendelangle
+- [DataGrid] Export `GridBooleanCell` component (#5537) @cliedeman
+- [DataGrid] Fix `date`/`dateTime` edit input font size to match view mode (#5304) @cherniavskii
+- [DataGrid] Fix loading overlay position (#5558) @DanailH
+- [DataGrid] Improve accessibility of the Export menu in the toolbar (#5486) @nogalpaulina
+- [DataGridPremium] Implement Aggregation - not publicly released (#4208) @flaviendelangle
+- [DataGridPremium] Fix crash when exporting all columns to Excel (#5425) @cherniavskii
+- [l10n] Add Traditional Chinese (zh-TW) locale (#5498) @happyincent
+
+### `@mui/x-date-pickers@v5.0.0-beta.2` / `@mui/x-date-picker-pro@5.0.0-beta.2`
+
+#### Changes
+
+- [l10n] Add Norwegian (nb-NO) locale (#5475) @elkebab
+
+### Docs
+
+- [docs] New page presenting the `apiRef` (#5273) @flaviendelangle
+- [docs] Remove blank line @oliviertassinari
+
+### Core
+
+- [core] Add missing comments on zh-TW translation (#5559) @flaviendelangle
+- [core] Polish on the bug issue template (#5525) @oliviertassinari
+- [test] Add more tests related to `isPrintableKey` (#5458) @mnajdova
+
 ## 5.13.1
 
 _Jul 15, 2022_
@@ -1466,7 +1509,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 - [core] Fix `yarn prettier` script (#3292) @oliviertassinari
 - [core] Improve tests for Tree Data (#3366) @flaviendelangle
 - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle
-- [core] Transition to a new StackOverflow tag (#3308) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari
 - [core] Update monorepo (#3370) @flaviendelangle
 - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle
 - [test] Replace `useFakeTimers` (#3323) @m4theushw

package/DataGridPro/useDataGridProComponent.js

@@ -59,7 +59,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/components/GridRowReorderCell.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '@mui/x-data-grid';
-declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element;
+declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element | null;
 export { GridRowReorderCell };
 export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element;

package/components/GridRowReorderCell.js

@@ -19,6 +19,8 @@ const useUtilityClasses = ownerState => {
 };
 
 const GridRowReorderCell = params => {
+  var _params$rowNode$posit;
+
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
@@ -57,6 +59,11 @@ const 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

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState' | 'disableColumnPinning'>>;
-export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -43,6 +43,8 @@ const mergeStateWithPinnedColumns = pinnedColumns => state => _extends({}, state
 });
 
 export const useGridColumnPinning = (apiRef, props) => {
+  var _props$initialState4;
+
   const 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
@@ -164,17 +166,24 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return initialValue;
   }, [apiRef, pinnedColumns]);
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState3, _pinnedColumnsToExpor, _pinnedColumnsToExpor2;
+
     const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+    const 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]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
 

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -12,6 +12,8 @@ export const 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/hooks/features/rowReorder/gridRowReorderColDef.js

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

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -62,11 +62,20 @@ export const 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/index.js

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

package/internals/index.d.ts

@@ -12,6 +12,7 @@ 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 type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps';
 export { buildRowTree } from '../utils/tree/buildRowTree';
 export type { BuildRowTreeGroupingCriteria } from '../utils/tree/buildRowTree';

package/internals/index.js

@@ -12,5 +12,6 @@ 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 { buildRowTree } from '../utils/tree/buildRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -59,7 +59,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

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

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/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/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.14.0
  *
  * 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,6 @@ 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 { 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 = "MTY1ODQ0MDgwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/legacy/utils/tree/sortRowTree.js

@@ -6,7 +6,10 @@ export var sortRowTree = function sortRowTree(params) {
       sortRowList = params.sortRowList;
   var sortedRows = []; // Group the rows by parent
 
-  var groupedByParentRows = new Map([[null, []]]);
+  var groupedByParentRows = new Map([[null, {
+    body: [],
+    footer: null
+  }]]);
 
   for (var i = 0; i < rowIds.length; i += 1) {
     var rowId = rowIds[i];
@@ -14,32 +17,42 @@ export var sortRowTree = function sortRowTree(params) {
     var group = groupedByParentRows.get(node.parent);
 
     if (!group) {
-      group = [];
+      group = {
+        body: [],
+        footer: null
+      };
       groupedByParentRows.set(node.parent, group);
     }
 
-    group.push(node);
+    if (node.position === 'footer') {
+      group.footer = node;
+    } else {
+      group.body.push(node);
+    }
   } // Apply the sorting to each list of children
 
 
   var sortedGroupedByParentRows = new Map();
-  groupedByParentRows.forEach(function (rowList, parent) {
-    if (rowList.length === 0) {
+  groupedByParentRows.forEach(function (group, parent) {
+    if (group.body.length === 0) {
       sortedGroupedByParentRows.set(parent, []);
     } else {
-      var depth = rowList[0].depth;
+      var groupSortedRows;
+      var depth = group.body[0].depth;
 
-      if (depth > 0 && disableChildrenSorting) {
-        sortedGroupedByParentRows.set(parent, rowList.map(function (row) {
-          return row.id;
-        }));
-      } else if (!sortRowList) {
-        sortedGroupedByParentRows.set(parent, rowList.map(function (row) {
+      if (depth > 0 && disableChildrenSorting || !sortRowList) {
+        groupSortedRows = group.body.map(function (row) {
           return row.id;
-        }));
+        });
       } else {
-        sortedGroupedByParentRows.set(parent, sortRowList(rowList));
+        groupSortedRows = sortRowList(group.body);
       }
+
+      if (group.footer != null) {
+        groupSortedRows.push(group.footer.id);
+      }
+
+      sortedGroupedByParentRows.set(parent, groupSortedRows);
     }
   }); // Flatten the sorted lists to have children just after their parent
 

package/modern/DataGridPro/useDataGridProComponent.js

@@ -57,7 +57,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/modern/components/GridRowReorderCell.js

@@ -57,6 +57,11 @@ const GridRowReorderCell = params => {
     onDragOver: publish('rowDragOver'),
     onDragEnd: publish('rowDragEnd')
   } : null;
+
+  if ((params.rowNode.position ?? 'body') !== 'body') {
+    return null;
+  }
+
   return /*#__PURE__*/_jsxs("div", _extends({
     className: classes.root,
     draggable: isDraggable

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

@@ -158,17 +158,22 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return initialValue;
   }, [apiRef, pinnedColumns]);
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+    const 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.initialState?.pinnedColumns != null || // Export if the model is not empty
+    (pinnedColumnsToExport.left ?? []).length > 0 || (pinnedColumnsToExport.right ?? []).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.initialState?.pinnedColumns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
 

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

@@ -12,6 +12,8 @@ export const 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/modern/hooks/features/rowReorder/gridRowReorderColDef.js

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

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

@@ -58,11 +58,20 @@ export const 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/modern/index.js

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

package/modern/internals/index.js

@@ -12,5 +12,6 @@ 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 { buildRowTree } from '../utils/tree/buildRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';

package/modern/utils/releaseInfo.js

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

package/modern/utils/tree/sortRowTree.js

@@ -7,7 +7,10 @@ export const sortRowTree = params => {
   } = params;
   let sortedRows = []; // Group the rows by parent
 
-  const groupedByParentRows = new Map([[null, []]]);
+  const groupedByParentRows = new Map([[null, {
+    body: [],
+    footer: null
+  }]]);
 
   for (let i = 0; i < rowIds.length; i += 1) {
     const rowId = rowIds[i];
@@ -15,28 +18,40 @@ export const sortRowTree = params => {
     let group = groupedByParentRows.get(node.parent);
 
     if (!group) {
-      group = [];
+      group = {
+        body: [],
+        footer: null
+      };
       groupedByParentRows.set(node.parent, group);
     }
 
-    group.push(node);
+    if (node.position === 'footer') {
+      group.footer = node;
+    } else {
+      group.body.push(node);
+    }
   } // Apply the sorting to each list of children
 
 
   const sortedGroupedByParentRows = new Map();
-  groupedByParentRows.forEach((rowList, parent) => {
-    if (rowList.length === 0) {
+  groupedByParentRows.forEach((group, parent) => {
+    if (group.body.length === 0) {
       sortedGroupedByParentRows.set(parent, []);
     } else {
-      const depth = rowList[0].depth;
+      let groupSortedRows;
+      const depth = group.body[0].depth;
 
-      if (depth > 0 && disableChildrenSorting) {
-        sortedGroupedByParentRows.set(parent, rowList.map(row => row.id));
-      } else if (!sortRowList) {
-        sortedGroupedByParentRows.set(parent, rowList.map(row => row.id));
+      if (depth > 0 && disableChildrenSorting || !sortRowList) {
+        groupSortedRows = group.body.map(row => row.id);
       } else {
-        sortedGroupedByParentRows.set(parent, sortRowList(rowList));
+        groupSortedRows = sortRowList(group.body);
       }
+
+      if (group.footer != null) {
+        groupSortedRows.push(group.footer.id);
+      }
+
+      sortedGroupedByParentRows.set(parent, groupSortedRows);
     }
   }); // Flatten the sorted lists to have children just after their parent
 

package/node/DataGridPro/useDataGridProComponent.js

@@ -78,7 +78,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);
-  (0, _internals.useGridPreferencesPanel)(apiRef);
+  (0, _internals.useGridPreferencesPanel)(apiRef, props);
   (0, _internals.useGridFilter)(apiRef, props);
   (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridDensity)(apiRef, props);

package/node/components/GridRowReorderCell.js

@@ -36,6 +36,8 @@ const useUtilityClasses = ownerState => {
 };
 
 const GridRowReorderCell = params => {
+  var _params$rowNode$posit;
+
   const apiRef = (0, _xDataGrid.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
@@ -74,6 +76,11 @@ const 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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     className: classes.root,
     draggable: isDraggable

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

@@ -67,6 +67,8 @@ const mergeStateWithPinnedColumns = pinnedColumns => state => (0, _extends2.defa
 });
 
 const useGridColumnPinning = (apiRef, props) => {
+  var _props$initialState4;
+
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _gridColumnPinningSelector.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
@@ -188,17 +190,24 @@ const useGridColumnPinning = (apiRef, props) => {
 
     return initialValue;
   }, [apiRef, pinnedColumns]);
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState3, _pinnedColumnsToExpor, _pinnedColumnsToExpor2;
+
     const pinnedColumnsToExport = (0, _gridColumnPinningSelector.gridPinnedColumnsSelector)(apiRef.current.state);
+    const 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 (0, _extends2.default)({}, prevState, {
       pinnedColumns: pinnedColumnsToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.pinnedColumns, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.pinnedColumns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
 

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

@@ -32,6 +32,8 @@ const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = (0, _extends2.default)({}, _xDataGrid.G
   sortable: false,
   filterable: false,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

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

@@ -25,6 +25,8 @@ const GRID_REORDER_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GRID_STRING_C
   disableExport: true,
   disableReorder: true,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   renderHeader: () => ' ',
   renderCell: _GridRowReorderCell.renderRowReorderCell
 });

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

@@ -70,11 +70,20 @@ const 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/node/index.js

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

package/node/internals/index.js

@@ -21,6 +21,7 @@ var _exportNames = {
   useGridRowReorderPreProcessors: true,
   useGridTreeData: true,
   useGridTreeDataPreProcessors: true,
+  TREE_DATA_STRATEGY: true,
   buildRowTree: true,
   sortRowTree: true
 };
@@ -36,6 +37,12 @@ Object.defineProperty(exports, "DataGridProVirtualScroller", {
     return _DataGridProVirtualScroller.DataGridProVirtualScroller;
   }
 });
+Object.defineProperty(exports, "TREE_DATA_STRATEGY", {
+  enumerable: true,
+  get: function () {
+    return _gridTreeDataUtils.TREE_DATA_STRATEGY;
+  }
+});
 Object.defineProperty(exports, "buildRowTree", {
   enumerable: true,
   get: function () {
@@ -179,6 +186,8 @@ var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
 
 var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
 
+var _gridTreeDataUtils = require("../hooks/features/treeData/gridTreeDataUtils");
+
 var _buildRowTree = require("../utils/tree/buildRowTree");
 
 var _sortRowTree = require("../utils/tree/sortRowTree");

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY1Nzg1NDAwMDAwMA==";
+  const releaseInfo = "MTY1ODQ0MDgwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/utils/tree/sortRowTree.js

@@ -14,7 +14,10 @@ const sortRowTree = params => {
   } = params;
   let sortedRows = []; // Group the rows by parent
 
-  const groupedByParentRows = new Map([[null, []]]);
+  const groupedByParentRows = new Map([[null, {
+    body: [],
+    footer: null
+  }]]);
 
   for (let i = 0; i < rowIds.length; i += 1) {
     const rowId = rowIds[i];
@@ -22,28 +25,40 @@ const sortRowTree = params => {
     let group = groupedByParentRows.get(node.parent);
 
     if (!group) {
-      group = [];
+      group = {
+        body: [],
+        footer: null
+      };
       groupedByParentRows.set(node.parent, group);
     }
 
-    group.push(node);
+    if (node.position === 'footer') {
+      group.footer = node;
+    } else {
+      group.body.push(node);
+    }
   } // Apply the sorting to each list of children
 
 
   const sortedGroupedByParentRows = new Map();
-  groupedByParentRows.forEach((rowList, parent) => {
-    if (rowList.length === 0) {
+  groupedByParentRows.forEach((group, parent) => {
+    if (group.body.length === 0) {
       sortedGroupedByParentRows.set(parent, []);
     } else {
-      const depth = rowList[0].depth;
+      let groupSortedRows;
+      const depth = group.body[0].depth;
 
-      if (depth > 0 && disableChildrenSorting) {
-        sortedGroupedByParentRows.set(parent, rowList.map(row => row.id));
-      } else if (!sortRowList) {
-        sortedGroupedByParentRows.set(parent, rowList.map(row => row.id));
+      if (depth > 0 && disableChildrenSorting || !sortRowList) {
+        groupSortedRows = group.body.map(row => row.id);
       } else {
-        sortedGroupedByParentRows.set(parent, sortRowList(rowList));
+        groupSortedRows = sortRowList(group.body);
       }
+
+      if (group.footer != null) {
+        groupSortedRows.push(group.footer.id);
+      }
+
+      sortedGroupedByParentRows.set(parent, groupSortedRows);
     }
   }); // Flatten the sorted lists to have children just after their parent
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "5.13.1",
+  "version": "5.14.0",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,8 +33,8 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@mui/utils": "^5.4.1",
-    "@mui/x-data-grid": "5.13.1",
-    "@mui/x-license-pro": "5.13.1",
+    "@mui/x-data-grid": "5.14.0",
+    "@mui/x-license-pro": "5.14.0",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",

package/utils/releaseInfo.js

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

package/utils/tree/sortRowTree.js

@@ -7,7 +7,10 @@ export const sortRowTree = params => {
   } = params;
   let sortedRows = []; // Group the rows by parent
 
-  const groupedByParentRows = new Map([[null, []]]);
+  const groupedByParentRows = new Map([[null, {
+    body: [],
+    footer: null
+  }]]);
 
   for (let i = 0; i < rowIds.length; i += 1) {
     const rowId = rowIds[i];
@@ -15,28 +18,40 @@ export const sortRowTree = params => {
     let group = groupedByParentRows.get(node.parent);
 
     if (!group) {
-      group = [];
+      group = {
+        body: [],
+        footer: null
+      };
       groupedByParentRows.set(node.parent, group);
     }
 
-    group.push(node);
+    if (node.position === 'footer') {
+      group.footer = node;
+    } else {
+      group.body.push(node);
+    }
   } // Apply the sorting to each list of children
 
 
   const sortedGroupedByParentRows = new Map();
-  groupedByParentRows.forEach((rowList, parent) => {
-    if (rowList.length === 0) {
+  groupedByParentRows.forEach((group, parent) => {
+    if (group.body.length === 0) {
       sortedGroupedByParentRows.set(parent, []);
     } else {
-      const depth = rowList[0].depth;
+      let groupSortedRows;
+      const depth = group.body[0].depth;
 
-      if (depth > 0 && disableChildrenSorting) {
-        sortedGroupedByParentRows.set(parent, rowList.map(row => row.id));
-      } else if (!sortRowList) {
-        sortedGroupedByParentRows.set(parent, rowList.map(row => row.id));
+      if (depth > 0 && disableChildrenSorting || !sortRowList) {
+        groupSortedRows = group.body.map(row => row.id);
       } else {
-        sortedGroupedByParentRows.set(parent, sortRowList(rowList));
+        groupSortedRows = sortRowList(group.body);
       }
+
+      if (group.footer != null) {
+        groupSortedRows.push(group.footer.id);
+      }
+
+      sortedGroupedByParentRows.set(parent, groupSortedRows);
     }
   }); // Flatten the sorted lists to have children just after their parent