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

package/legacy/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 @@ var DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps,
   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 @@ var DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps,
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export var 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/legacy/components/DataGridProVirtualScroller.js

@@ -180,8 +180,17 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       bottomPinnedRowsRenderZoneRef.current.style.transform = "translate3d(".concat(left, "px, 0px, 0px)");
     }
   }, []);
+
+  // Create a lookup for faster check if the row is expanded
+  var expandedRowIdsLookup = React.useMemo(function () {
+    var lookup = new Set();
+    expandedRowIds.forEach(function (id) {
+      lookup.add(id);
+    });
+    return lookup;
+  }, [expandedRowIds]);
   var getRowProps = React.useCallback(function (id) {
-    if (!expandedRowIds.includes(id)) {
+    if (!expandedRowIdsLookup.has(id)) {
       return null;
     }
     var height = detailPanelsHeights[id];
@@ -190,7 +199,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
         marginBottom: height
       }
     };
-  }, [detailPanelsHeights, expandedRowIds]);
+  }, [detailPanelsHeights, expandedRowIdsLookup]);
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl'),
     _filterColumns2 = _slicedToArray(_filterColumns, 2),
@@ -236,15 +245,6 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-
-  // Create a lookup for faster check if the row is expanded
-  var expandedRowIdsLookup = React.useMemo(function () {
-    var lookup = {};
-    expandedRowIds.forEach(function (id) {
-      lookup[id] = true;
-    });
-    return lookup;
-  }, [expandedRowIds]);
   var getDetailPanel = function getDetailPanel(rowId) {
     var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     var content = detailPanelsContent[rowId];
@@ -285,7 +285,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       if (rootProps.getDetailPanelContent == null) {
         return;
       }
-      if (!expandedRowIdsLookup[rowId]) {
+      if (!expandedRowIdsLookup.has(rowId)) {
         return;
       }
       var detailPanel = getDetailPanel(rowId);

package/legacy/components/GridColumnHeaders.js

@@ -12,9 +12,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var leftPinnedColumns = ownerState.leftPinnedColumns,
     rightPinnedColumns = ownerState.rightPinnedColumns,
@@ -191,7 +193,9 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       })]
-    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
       children: [getColumnGroupHeaders({
@@ -207,7 +211,9 @@ var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders
         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

package/legacy/components/GridScrollArea.js

@@ -0,0 +1,143 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getTotalHeaderHeight } from '@mui/x-data-grid/internals';
+import { getDataGridUtilityClass, gridClasses, gridDensityFactorSelector, useGridApiContext, useGridApiEventHandler, useGridSelector, gridColumnsTotalWidthSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CLIFF = 1;
+var SLOP = 1.5;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var scrollDirection = ownerState.scrollDirection,
+    classes = ownerState.classes;
+  var slots = {
+    root: ['scrollArea', "scrollArea--".concat(scrollDirection)]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+var GridScrollAreaRawRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses['scrollArea--left']), styles['scrollArea--left']), _defineProperty({}, "&.".concat(gridClasses['scrollArea--right']), styles['scrollArea--right']), styles.scrollArea];
+  }
+})(function () {
+  var _ref3;
+  return _ref3 = {
+    position: 'absolute',
+    top: 0,
+    zIndex: 101,
+    width: 20,
+    bottom: 0
+  }, _defineProperty(_ref3, "&.".concat(gridClasses['scrollArea--left']), {
+    left: 0
+  }), _defineProperty(_ref3, "&.".concat(gridClasses['scrollArea--right']), {
+    right: 0
+  }), _ref3;
+});
+function GridScrollAreaRaw(props) {
+  var scrollDirection = props.scrollDirection;
+  var rootRef = React.useRef(null);
+  var apiRef = useGridApiContext();
+  var timeout = React.useRef();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dragging = _React$useState2[0],
+    setDragging = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    canScrollMore = _React$useState4[0],
+    setCanScrollMore = _React$useState4[1];
+  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  var scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  var rootProps = useGridRootProps();
+  var ownerState = _extends({}, rootProps, {
+    scrollDirection: scrollDirection
+  });
+  var classes = useUtilityClasses(ownerState);
+  var totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
+  var headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  var handleScrolling = React.useCallback(function (newScrollPosition) {
+    scrollPosition.current = newScrollPosition;
+    var dimensions = apiRef.current.getRootDimensions();
+    setCanScrollMore(function () {
+      if (scrollDirection === 'left') {
+        // Only render if the user has not reached yet the start of the list
+        return scrollPosition.current.left > 0;
+      }
+      if (scrollDirection === 'right') {
+        // Only render if the user has not reached yet the end of the list
+        var maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
+        return scrollPosition.current.left < maxScrollLeft;
+      }
+      return false;
+    });
+  }, [apiRef, columnsTotalWidth, scrollDirection]);
+  var handleDragOver = React.useCallback(function (event) {
+    var offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+    clearTimeout(timeout.current);
+    // Avoid freeze and inertia.
+    timeout.current = setTimeout(function () {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  }, [scrollDirection, apiRef]);
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(timeout.current);
+    };
+  }, []);
+  var handleColumnHeaderDragStart = useEventCallback(function () {
+    setDragging(true);
+  });
+  var handleColumnHeaderDragEnd = useEventCallback(function () {
+    setDragging(false);
+  });
+  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
+  if (!dragging || !canScrollMore) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: clsx(classes.root),
+    ownerState: ownerState,
+    onDragOver: handleDragOver,
+    style: {
+      height: headerHeight,
+      top: totalHeaderHeight - headerHeight
+    }
+  });
+}
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: PropTypes.oneOf(['left', 'right']).isRequired
+} : void 0;
+var GridScrollArea = /*#__PURE__*/React.memo(GridScrollAreaRaw);
+export { GridScrollArea };

package/legacy/hooks/features/columnResize/useGridColumnResize.js

@@ -133,7 +133,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
       div.style.maxWidth = finalWidth;
     });
   };
-  var handleResizeMouseUp = useEventCallback(function (nativeEvent) {
+  var finishResize = function finishResize(nativeEvent) {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
     apiRef.current.updateColumns([colDefRef.current]);
@@ -150,7 +150,8 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
       }
     });
     logger.debug("Updating col ".concat(colDefRef.current.field, " with new width: ").concat(colDefRef.current.width));
-  });
+  };
+  var handleResizeMouseUp = useEventCallback(finishResize);
   var handleResizeMouseMove = useEventCallback(function (nativeEvent) {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
@@ -200,21 +201,16 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
+
+    // Fixes https://github.com/mui/mui-x/issues/4777
+    colElementRef.current.style.pointerEvents = 'none';
   });
   var handleTouchEnd = useEventCallback(function (nativeEvent) {
     var finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-    apiRef.current.updateColumns([colDefRef.current]);
-    clearTimeout(stopResizeEventTimeout.current);
-    stopResizeEventTimeout.current = setTimeout(function () {
-      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
-    });
-    logger.debug("Updating col ".concat(colDefRef.current.field, " with new width: ").concat(colDefRef.current.width));
+    finishResize(nativeEvent);
   });
   var handleTouchMove = useEventCallback(function (nativeEvent) {
     var finger = trackFinger(nativeEvent, touchId.current);
@@ -277,7 +273,10 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);
     doc.removeEventListener('touchend', handleTouchEnd);
-  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+    if (colElementRef.current) {
+      colElementRef.current.style.pointerEvents = 'unset';
+    }
+  }, [apiRef, colElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   var handleResizeStart = React.useCallback(function (_ref2) {
     var field = _ref2.field;
     apiRef.current.setState(function (state) {

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

@@ -173,15 +173,13 @@ export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
   var addDetailHeight = React.useCallback(function (initialValue, row) {
     var _heightCache$row$id;
     if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
-      return _extends({}, initialValue, {
-        detail: 0
-      });
+      initialValue.detail = 0;
+      return initialValue;
     }
     updateCachesIfNeeded();
     var heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef);
-    return _extends({}, initialValue, {
-      detail: (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
-    });
+    initialValue.detail = (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0; // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+    return initialValue;
   }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   var isFirstRender = React.useRef(true);

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.6.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/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY4NDQ0MzYwMDAwMA==";
+  var releaseInfo = "MTY4NTU3MDQwMDAwMA==";
   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/utils.js

@@ -181,4 +181,35 @@ export var createUpdatedGroupsManager = function createUpdatedGroupsManager() {
       this.value[groupId][action] = true;
     }
   };
+};
+export var getVisibleRowsLookup = function getVisibleRowsLookup(_ref7) {
+  var tree = _ref7.tree,
+    filteredRowsLookup = _ref7.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/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