@mui/x-data-grid-pro 6.5.0 → 6.7.0

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

@@ -10,7 +10,6 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
   var rowTree = params.rowTree,
     disableChildrenFiltering = params.disableChildrenFiltering,
     isRowMatchingFilters = params.isRowMatchingFilters;
-  var visibleRowsLookup = {};
   var filteredRowsLookup = {};
   var filteredDescendantCountLookup = {};
   var filterTreeNode = function filterTreeNode(node, isParentMatchingFilters, areAncestorsExpanded) {
@@ -53,13 +52,7 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
           break;
         }
     }
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
-
-    // TODO: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!shouldPassFilters) {
       return 0;
     }
@@ -77,7 +70,6 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
     }
   }
   return {
-    visibleRowsLookup: visibleRowsLookup,
     filteredRowsLookup: filteredRowsLookup,
     filteredDescendantCountLookup: filteredDescendantCountLookup
   };

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

@@ -11,6 +11,7 @@ import { GridTreeDataGroupingCell } from '../../../components';
 import { createRowTree } from '../../../utils/tree/createRowTree';
 import { sortRowTree } from '../../../utils/tree/sortRowTree';
 import { updateRowTree } from '../../../utils/tree/updateRowTree';
+import { getVisibleRowsLookup } from '../../../utils/tree/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(privateApiRef, props) {
   var setStrategyAvailability = React.useCallback(function () {
@@ -135,6 +136,7 @@ export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.5.0
+ * @mui/x-data-grid-pro v6.7.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/internals/index.js

@@ -25,4 +25,4 @@ export { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/use
 export { createRowTree } from '../utils/tree/createRowTree';
 export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
-export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';
+export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';

package/legacy/material/icons.js

@@ -14,7 +14,4 @@ export var GridPushPinLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("g", {
     d: "M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z",
     fillRule: "evenodd"
   })
-}), 'PushPinLeft');
-export var GridHighlightOffIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
-  d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-}), 'HighlightOff');
+}), 'PushPinLeft');

package/legacy/material/index.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridPushPinRightIcon, GridPushPinLeftIcon, GridHighlightOffIcon } from './icons';
+import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons';
 var iconSlots = {
   ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon,
-  HeaderFilterClearIcon: GridHighlightOffIcon
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
 };
 var materialSlots = _extends({}, iconSlots);
 export default materialSlots;

package/legacy/utils/releaseInfo.js

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

package/legacy/utils/tree/insertDataRowInTree.js

@@ -1,5 +1,5 @@
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
-import { addGroupDefaultExpansion, getGroupRowIdFromPath, insertNodeInTree, updateGroupNodeIdAndAutoGenerated } from './utils';
+import { updateGroupDefaultExpansion, getGroupRowIdFromPath, insertNodeInTree, updateGroupNodeIdAndAutoGenerated } from './utils';
 /**
  * Inserts a data row in a tree.
  * For each steps of its path:
@@ -40,12 +40,7 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
           groupingKey: key
         };
         updatedGroupsManager == null ? void 0 : updatedGroupsManager.addAction(parentNodeId, 'insertChildren');
-        insertNodeInTree({
-          node: leafNode,
-          previousTree: previousTree,
-          tree: tree,
-          treeDepths: treeDepths
-        });
+        insertNodeInTree(leafNode, tree, treeDepths, previousTree);
       } else {
         var existingNodeWithPartialPath = tree[existingNodeIdWithPartialPath];
 
@@ -87,19 +82,11 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
         groupingKey: key,
         groupingField: field,
         children: [],
-        childrenFromPath: {}
+        childrenFromPath: {},
+        childrenExpanded: false
       };
       updatedGroupsManager == null ? void 0 : updatedGroupsManager.addAction(parentNodeId, 'insertChildren');
-      insertNodeInTree({
-        node: addGroupDefaultExpansion({
-          node: autoGeneratedGroupNode,
-          defaultGroupingExpansionDepth: defaultGroupingExpansionDepth,
-          isGroupExpandedByDefault: isGroupExpandedByDefault
-        }),
-        previousTree: previousTree,
-        tree: tree,
-        treeDepths: treeDepths
-      });
+      insertNodeInTree(updateGroupDefaultExpansion(autoGeneratedGroupNode, defaultGroupingExpansionDepth, isGroupExpandedByDefault), tree, treeDepths, previousTree);
       parentNodeId = nodeId;
     }
     // For the intermediary steps of the path
@@ -118,13 +105,10 @@ export var insertDataRowInTree = function insertDataRowInTree(_ref) {
           groupingKey: key,
           groupingField: field,
           children: [],
-          childrenFromPath: {}
+          childrenFromPath: {},
+          childrenExpanded: false
         };
-        tree[existingNodeIdWithPartialPath] = addGroupDefaultExpansion({
-          node: groupNode,
-          defaultGroupingExpansionDepth: defaultGroupingExpansionDepth,
-          isGroupExpandedByDefault: isGroupExpandedByDefault
-        });
+        tree[existingNodeIdWithPartialPath] = updateGroupDefaultExpansion(groupNode, defaultGroupingExpansionDepth, isGroupExpandedByDefault);
       }
       parentNodeId = currentGroupNode.id;
     }

package/legacy/utils/tree/sortRowTree.js

@@ -1,11 +1,80 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+// Single-linked list node
+var Node = /*#__PURE__*/function () {
+  function Node(data, next) {
+    _classCallCheck(this, Node);
+    this.next = void 0;
+    this.data = void 0;
+    this.next = next;
+    this.data = data;
+  }
+  _createClass(Node, [{
+    key: "insertAfter",
+    value: function insertAfter(list) {
+      if (!list.first || !list.last) {
+        return;
+      }
+      var next = this.next;
+      this.next = list.first;
+      list.last.next = next;
+    }
+  }]);
+  return Node;
+}(); // Single-linked list container
+var List = /*#__PURE__*/function () {
+  function List(first, last) {
+    _classCallCheck(this, List);
+    this.first = void 0;
+    this.last = void 0;
+    this.first = first;
+    this.last = last;
+  }
+  _createClass(List, [{
+    key: "data",
+    value: function data() {
+      var array = [];
+      this.forEach(function (node) {
+        array.push(node.data);
+      });
+      return array;
+    }
+  }, {
+    key: "forEach",
+    value: function forEach(fn) {
+      var current = this.first;
+      while (current !== null) {
+        fn(current);
+        current = current.next;
+      }
+    }
+  }], [{
+    key: "from",
+    value: function from(array) {
+      if (array.length === 0) {
+        return new List(null, null);
+      }
+      var index = 0;
+      var first = new Node(array[index], null);
+      var current = first;
+      while (index + 1 < array.length) {
+        index += 1;
+        var _node = new Node(array[index], null);
+        current.next = _node;
+        current = _node;
+      }
+      return new List(first, current);
+    }
+  }]);
+  return List;
+}();
 export var sortRowTree = function sortRowTree(params) {
   var rowTree = params.rowTree,
     disableChildrenSorting = params.disableChildrenSorting,
     sortRowList = params.sortRowList,
     shouldRenderGroupBelowLeaves = params.shouldRenderGroupBelowLeaves;
-  var sortedRows = [];
   var sortedGroupedByParentRows = new Map();
   var sortGroup = function sortGroup(node) {
     var shouldSortGroup = !!sortRowList && (!disableChildrenSorting || node.depth === -1);
@@ -49,21 +118,12 @@ export var sortRowTree = function sortRowTree(params) {
     sortedGroupedByParentRows.set(node.id, sortedRowIds);
   };
   sortGroup(rowTree[GRID_ROOT_GROUP_ID]);
-
-  // Flatten the sorted lists to have children just after their parent
-  var insertRowListIntoSortedRows = function insertRowListIntoSortedRows(startIndex, rowList) {
-    sortedRows = [].concat(_toConsumableArray(sortedRows.slice(0, startIndex)), _toConsumableArray(rowList), _toConsumableArray(sortedRows.slice(startIndex)));
-    var treeSize = 0;
-    rowList.forEach(function (rowId) {
-      treeSize += 1;
-      var children = sortedGroupedByParentRows.get(rowId);
-      if (children != null && children.length) {
-        var subTreeSize = insertRowListIntoSortedRows(startIndex + treeSize, children);
-        treeSize += subTreeSize;
-      }
-    });
-    return treeSize;
-  };
-  insertRowListIntoSortedRows(0, sortedGroupedByParentRows.get(GRID_ROOT_GROUP_ID));
-  return sortedRows;
+  var rootList = List.from(sortedGroupedByParentRows.get(GRID_ROOT_GROUP_ID));
+  rootList.forEach(function (node) {
+    var children = sortedGroupedByParentRows.get(node.data);
+    if (children != null && children.length) {
+      node.insertAfter(List.from(children));
+    }
+  });
+  return rootList.data();
 };

package/legacy/utils/tree/utils.js

@@ -1,8 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _extends from "@babel/runtime/helpers/esm/extends";
 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 { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 export var getGroupRowIdFromPath = function getGroupRowIdFromPath(path) {
   var pathStr = path.map(function (groupingCriteria) {
@@ -25,10 +25,7 @@ export var getNodePathInTree = function getNodePathInTree(_ref) {
   path.reverse();
   return path;
 };
-export var addGroupDefaultExpansion = function addGroupDefaultExpansion(_ref2) {
-  var node = _ref2.node,
-    isGroupExpandedByDefault = _ref2.isGroupExpandedByDefault,
-    defaultGroupingExpansionDepth = _ref2.defaultGroupingExpansionDepth;
+export var updateGroupDefaultExpansion = function updateGroupDefaultExpansion(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault) {
   var childrenExpanded;
   if (node.id === GRID_ROOT_GROUP_ID) {
     childrenExpanded = true;
@@ -37,20 +34,15 @@ export var addGroupDefaultExpansion = function addGroupDefaultExpansion(_ref2) {
   } else {
     childrenExpanded = defaultGroupingExpansionDepth === -1 || defaultGroupingExpansionDepth > node.depth;
   }
-  return _extends({}, node, {
-    childrenExpanded: childrenExpanded
-  });
+  node.childrenExpanded = childrenExpanded;
+  return node;
 };
 
 /**
  * Insert a node in the tree
  */
-export var insertNodeInTree = function insertNodeInTree(_ref3) {
+export var insertNodeInTree = function insertNodeInTree(node, tree, treeDepths, previousTree) {
   var _treeDepths$node$dept;
-  var node = _ref3.node,
-    previousTree = _ref3.previousTree,
-    tree = _ref3.tree,
-    treeDepths = _ref3.treeDepths;
   // 1. Insert node in the tree.
   tree[node.id] = node;
 
@@ -59,11 +51,7 @@ export var insertNodeInTree = function insertNodeInTree(_ref3) {
 
   // 3. Register the new node in its parent.
   var parentNode = tree[node.parent];
-  if (node.type === 'footer') {
-    // For footers,
-    // Register the node from its parent `footerId` property.
-    parentNode.footerId = node.id;
-  } else if (node.type === 'group' || node.type === 'leaf') {
+  if (node.type === 'group' || node.type === 'leaf') {
     var _groupingField, _groupingKey, _parentNode$childrenF;
     // For groups and leaves,
     // Register the node from its parents `children` and `childrenFromPath` properties.
@@ -80,16 +68,20 @@ export var insertNodeInTree = function insertNodeInTree(_ref3) {
     } else {
       groupingField[groupingKeyName.toString()] = node.id;
     }
+  } else if (node.type === 'footer') {
+    // For footers,
+    // Register the node from its parent `footerId` property.
+    parentNode.footerId = node.id;
   }
 };
 
 /**
  * Removes a node from the tree
  */
-export var removeNodeFromTree = function removeNodeFromTree(_ref4) {
-  var node = _ref4.node,
-    tree = _ref4.tree,
-    treeDepths = _ref4.treeDepths;
+export var removeNodeFromTree = function removeNodeFromTree(_ref2) {
+  var node = _ref2.node,
+    tree = _ref2.tree,
+    treeDepths = _ref2.treeDepths;
   // 1. Remove node from the tree.
   delete tree[node.id];
 
@@ -117,10 +109,10 @@ export var removeNodeFromTree = function removeNodeFromTree(_ref4) {
     var _groupingField2, _groupingKey2, _parentNode$childrenF3, _parentNode$childrenF4;
     var groupingField = (_groupingField2 = node.groupingField) != null ? _groupingField2 : '__no_field__';
     var groupingKey = (_groupingKey2 = node.groupingKey) != null ? _groupingKey2 : '__no_key__';
-    var _ref5 = (_parentNode$childrenF3 = (_parentNode$childrenF4 = parentNode.childrenFromPath) == null ? void 0 : _parentNode$childrenF4[groupingField]) != null ? _parentNode$childrenF3 : {},
+    var _ref3 = (_parentNode$childrenF3 = (_parentNode$childrenF4 = parentNode.childrenFromPath) == null ? void 0 : _parentNode$childrenF4[groupingField]) != null ? _parentNode$childrenF3 : {},
       _groupingKey$toString = groupingKey.toString(),
-      childrenToRemove = _ref5[_groupingKey$toString],
-      newChildrenFromPathWithField = _objectWithoutProperties(_ref5, [_groupingKey$toString].map(_toPropertyKey));
+      childrenToRemove = _ref3[_groupingKey$toString],
+      newChildrenFromPathWithField = _objectWithoutProperties(_ref3, [_groupingKey$toString].map(_toPropertyKey));
 
     // TODO rows v6: Can we avoid this linear complexity ?
     var children = parentNode.children.filter(function (childId) {
@@ -142,12 +134,12 @@ export var removeNodeFromTree = function removeNodeFromTree(_ref4) {
 /**
  * Updates the `id` and `isAutoGenerated` properties of a group node.
  */
-export var updateGroupNodeIdAndAutoGenerated = function updateGroupNodeIdAndAutoGenerated(_ref6) {
-  var node = _ref6.node,
-    updatedNode = _ref6.updatedNode,
-    previousTree = _ref6.previousTree,
-    tree = _ref6.tree,
-    treeDepths = _ref6.treeDepths;
+export var updateGroupNodeIdAndAutoGenerated = function updateGroupNodeIdAndAutoGenerated(_ref4) {
+  var node = _ref4.node,
+    updatedNode = _ref4.updatedNode,
+    previousTree = _ref4.previousTree,
+    tree = _ref4.tree,
+    treeDepths = _ref4.treeDepths;
   // 1. Set the new parent for all children from the old group
   node.children.forEach(function (childId) {
     tree[childId] = _extends({}, tree[childId], {
@@ -164,12 +156,7 @@ export var updateGroupNodeIdAndAutoGenerated = function updateGroupNodeIdAndAuto
 
   // 3. Add the new group in the tree
   var groupNode = _extends({}, node, updatedNode);
-  insertNodeInTree({
-    previousTree: previousTree,
-    node: groupNode,
-    tree: tree,
-    treeDepths: treeDepths
-  });
+  insertNodeInTree(groupNode, tree, treeDepths, previousTree);
 };
 export var createUpdatedGroupsManager = function createUpdatedGroupsManager() {
   return {
@@ -181,4 +168,35 @@ export var createUpdatedGroupsManager = function createUpdatedGroupsManager() {
       this.value[groupId][action] = true;
     }
   };
+};
+export var getVisibleRowsLookup = function getVisibleRowsLookup(_ref5) {
+  var tree = _ref5.tree,
+    filteredRowsLookup = _ref5.filteredRowsLookup;
+  if (!filteredRowsLookup) {
+    return {};
+  }
+  var visibleRowsLookup = {};
+  var handleTreeNode = function handleTreeNode(node, areAncestorsExpanded) {
+    var isPassingFiltering = filteredRowsLookup[node.id];
+    if (node.type === 'group') {
+      node.children.forEach(function (childId) {
+        var childNode = tree[childId];
+        handleTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded);
+      });
+    }
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+
+    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
+    if (node.type === 'group' && node.footerId != null) {
+      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+  };
+  var nodes = Object.values(tree);
+  for (var i = 0; i < nodes.length; i += 1) {
+    var node = nodes[i];
+    if (node.depth === 0) {
+      handleTreeNode(node, true);
+    }
+  }
+  return visibleRowsLookup;
 };

package/material/icons.d.ts

@@ -4,6 +4,3 @@ export declare const GridPushPinRightIcon: import("@mui/material/OverridableComp
 export declare const GridPushPinLeftIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
-export declare const GridHighlightOffIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};

package/material/icons.js

@@ -14,7 +14,4 @@ export const GridPushPinLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("g", {
     d: "M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z",
     fillRule: "evenodd"
   })
-}), 'PushPinLeft');
-export const GridHighlightOffIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
-  d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-}), 'HighlightOff');
+}), 'PushPinLeft');

package/material/index.d.ts

@@ -2,6 +2,5 @@
 declare const materialSlots: {
     ColumnMenuPinLeftIcon: import("react").JSXElementConstructor<any>;
     ColumnMenuPinRightIcon: import("react").JSXElementConstructor<any>;
-    HeaderFilterClearIcon: import("react").JSXElementConstructor<any>;
 };
 export default materialSlots;

package/material/index.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridPushPinRightIcon, GridPushPinLeftIcon, GridHighlightOffIcon } from './icons';
+import { GridPushPinRightIcon, GridPushPinLeftIcon } from './icons';
 const iconSlots = {
   ColumnMenuPinRightIcon: GridPushPinRightIcon,
-  ColumnMenuPinLeftIcon: GridPushPinLeftIcon,
-  HeaderFilterClearIcon: GridHighlightOffIcon
+  ColumnMenuPinLeftIcon: GridPushPinLeftIcon
 };
 const materialSlots = _extends({}, iconSlots);
 export default materialSlots;

package/models/gridProIconSlotsComponent.d.ts

@@ -10,9 +10,4 @@ export interface GridProIconSlotsComponent {
      * @default GridPushPinRightIcon
      */
     ColumnMenuPinRightIcon: React.JSXElementConstructor<any>;
-    /**
-     * Component responsible for clear icon in header filter
-     * @default GridHighlightOffIcon
-     */
-    HeaderFilterClearIcon: React.JSXElementConstructor<any>;
 }

package/modern/DataGridPro/DataGridPro.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
@@ -19,11 +20,12 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -34,7 +36,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export const DataGridPro = /*#__PURE__*/React.memo(DataGridProRaw);
@@ -255,6 +257,11 @@ DataGridProRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/modern/components/DataGridProVirtualScroller.js

@@ -176,8 +176,17 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       bottomPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
     }
   }, []);
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = new Set();
+    expandedRowIds.forEach(id => {
+      lookup.add(id);
+    });
+    return lookup;
+  }, [expandedRowIds]);
   const getRowProps = React.useCallback(id => {
-    if (!expandedRowIds.includes(id)) {
+    if (!expandedRowIdsLookup.has(id)) {
       return null;
     }
     const height = detailPanelsHeights[id];
@@ -186,7 +195,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         marginBottom: height
       }
     };
-  }, [detailPanelsHeights, expandedRowIds]);
+  }, [detailPanelsHeights, expandedRowIdsLookup]);
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
@@ -226,15 +235,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-
-  // Create a lookup for faster check if the row is expanded
-  const expandedRowIdsLookup = React.useMemo(() => {
-    const lookup = {};
-    expandedRowIds.forEach(id => {
-      lookup[id] = true;
-    });
-    return lookup;
-  }, [expandedRowIds]);
   const getDetailPanel = rowId => {
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const content = detailPanelsContent[rowId];
@@ -275,7 +275,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       if (rootProps.getDetailPanelContent == null) {
         return;
       }
-      if (!expandedRowIdsLookup[rowId]) {
+      if (!expandedRowIdsLookup.has(rowId)) {
         return;
       }
       const detailPanel = getDetailPanel(rowId);

package/modern/components/GridColumnHeaders.js

@@ -10,9 +10,11 @@ import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridPinnedPosition } from '../hooks/features/columnPinning';
-import { filterColumns } from './DataGridProVirtualScroller';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { filterColumns } from './DataGridProVirtualScroller';
+import { GridScrollArea } from './GridScrollArea';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     leftPinnedColumns,
@@ -184,7 +186,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       })]
-    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
       children: [getColumnGroupHeaders({
@@ -200,7 +204,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
-    })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    }), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.right,
         showCellVerticalBorder: rootProps.showCellVerticalBorder