@mui/x-data-grid-premium 6.9.1 → 6.9.2

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.9.2
+
+_Jul 6, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Auto-scroll when making range selection (#8661) @m4theushw
+
+- 📚 New page: Components lifecycle (#8372) @flaviendelangle
+
+  Clarify pickers events and value updates in a [single docs page](https://mui.com/x/react-date-pickers/lifecycle/).
+
+- 🥧 Add pie chart component
+
+  They are fresh from the code editor. You can visit [pie charts docs](https://mui.com/x/react-charts/pie/) or their [demo page](https://mui.com/x/react-charts/pie-demo/).
+
+  <img width="380" alt="pie-charts" src="https://github.com/mui/mui-x/assets/13808724/fe908c45-803c-4316-b913-dbd2f9f0551e">
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.2` / `@mui/x-data-grid-pro@v6.9.2` / `@mui/x-data-grid-premium@v6.9.2`
+
+#### Changes
+
+- [DataGrid] Fix `RangeError` when using flex columns (#9554) @cherniavskii
+- [DataGrid] Fix React 17 editing bug (#9530) @romgrk
+- [DataGrid] Use `getRowId` in filtering (#9564) @romgrk
+- [DataGrid] Correctly reflect `TablePagination`'s `rowsPerPageOptions` shape to `pageSizeOptions` (#9438) @burakkgunduzz
+- [DataGridPremium] Auto-scroll when making range selection (#8661) @m4theushw
+- [l10n] Improve Spanish (es-ES) locale (#9500) @fufex
+
+### `@mui/x-date-pickers@v6.9.2` / `@mui/x-date-pickers-pro@v6.9.2`
+
+#### Changes
+
+- [pickers] Forward digital clock classes (#9555) @YoonjiJang
+- [pickers] Rename `internal` folder to `internals` on `@mui/x-date-picker-pro` (#9571) @flaviendelangle
+
+### `@mui/x-charts@6.0.0-alpha.2`
+
+#### Changes
+
+- [charts] Add pie chart component (#9395) @alexfauquette
+
+### Docs
+
+- [docs] Add pickers playground (#9164) @LukasTy
+- [docs] Fix API links for pickers (#9573) @alexfauquette
+- [docs] Fix demos with `ToggleButtonGroup` (#9548) @flaviendelangle
+- [docs] Fix typos in pagination documentation page (#9332) @RatherBeLunar
+- [docs] Hide ads on paid content @oliviertassinari
+- [docs] Move the charts in the sidebar (#9437) @flaviendelangle
+- [docs] New page: Components lifecycle (#8372) @flaviendelangle
+- [docs] Remove outdated header tag @oliviertassinari
+
+### Core
+
+- [core] Fix typo in priority support @oliviertassinari
+- [core] Remove mention of Crowdin @oliviertassinari
+
 ## 6.9.1
 
 _Jun 30, 2023_

package/DataGridPremium/DataGridPremium.js

@@ -740,7 +740,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   /**
    * If `true`, pagination is enabled.
    * @default false

package/README.md

@@ -7,7 +7,7 @@ It's part of MUI X, an open core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 // with npm
 npm install @mui/x-data-grid-premium
 

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useEventCallback } from '@mui/material/utils';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
@@ -13,10 +13,15 @@ export const cellSelectionStateInitializer = (state, props) => {
 function isKeyboardEvent(event) {
   return !!event.key;
 }
+const AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrolling
+const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
+
 export const useGridCellSelection = (apiRef, props) => {
   const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef();
   const lastMouseDownCell = React.useRef();
+  const mousePosition = React.useRef(null);
+  const autoScrollRAF = React.useRef();
   const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -113,8 +118,16 @@ export const useGridCellSelection = (apiRef, props) => {
     }
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
-  const handleCellMouseDown = React.useCallback((params, event) => {
+  const handleMouseUp = useEventCallback(() => {
     var _apiRef$current$rootE, _apiRef$current$rootE2;
+    lastMouseDownCell.current = null;
+    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.remove(gridClasses['root--disableUserSelection']);
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopAutoScroll();
+  });
+  const handleCellMouseDown = React.useCallback((params, event) => {
+    var _apiRef$current$rootE3, _apiRef$current$rootE4, _apiRef$current$rootE5;
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
     const isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -129,20 +142,86 @@ export const useGridCellSelection = (apiRef, props) => {
       id: params.id,
       field: params.field
     };
-    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
-  }, [apiRef, hasClickedValidCellForRangeSelection]);
-  const handleCellMouseUp = React.useCallback(() => {
-    var _apiRef$current$rootE3, _apiRef$current$rootE4;
-    lastMouseDownCell.current = null;
-    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.remove(gridClasses['root--disableUserSelection']);
-  }, [apiRef]);
+    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.add(gridClasses['root--disableUserSelection']);
+    const document = ownerDocument((_apiRef$current$rootE5 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE5.current);
+    document.addEventListener('mouseup', handleMouseUp, {
+      once: true
+    });
+  }, [apiRef, handleMouseUp, hasClickedValidCellForRangeSelection]);
+  const stopAutoScroll = React.useCallback(() => {
+    if (autoScrollRAF.current) {
+      cancelAnimationFrame(autoScrollRAF.current);
+      autoScrollRAF.current = null;
+    }
+  }, []);
   const handleCellFocusIn = React.useCallback(params => {
     cellWithVirtualFocus.current = {
       id: params.id,
       field: params.field
     };
   }, []);
+  const startAutoScroll = React.useCallback(() => {
+    var _apiRef$current$virtu, _apiRef$current$virtu2, _apiRef$current$virtu3;
+    if (autoScrollRAF.current) {
+      return;
+    }
+    if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
+      return;
+    }
+    const virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu3 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    function autoScroll() {
+      var _apiRef$current$virtu4;
+      if (!mousePosition.current || !((_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu4.current)) {
+        return;
+      }
+      const {
+        x: mouseX,
+        y: mouseY
+      } = mousePosition.current;
+      const {
+        height,
+        width
+      } = virtualScrollerRect;
+      let deltaX = 0;
+      let deltaY = 0;
+      let factor = 0;
+      const dimensions = apiRef.current.getRootDimensions();
+      if (mouseY <= AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollY) {
+        // When scrolling up, the multiplier increases going closer to the top edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseY) / -AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseY >= height - AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollY) {
+        // When scrolling down, the multiplier increases going closer to the bottom edge
+        factor = (mouseY - (height - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseX <= AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollX) {
+        // When scrolling left, the multiplier increases going closer to the left edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseX) / -AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      } else if (mouseX >= width - AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollX) {
+        // When scrolling right, the multiplier increases going closer to the right edge
+        factor = (mouseX - (width - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        const {
+          scrollLeft,
+          scrollTop
+        } = apiRef.current.virtualScrollerRef.current;
+        apiRef.current.scroll({
+          top: scrollTop + deltaY * factor,
+          left: scrollLeft + deltaX * factor
+        });
+      }
+      autoScrollRAF.current = requestAnimationFrame(autoScroll);
+    }
+    autoScroll();
+  }, [apiRef]);
   const handleCellMouseOver = React.useCallback((params, event) => {
+    var _apiRef$current$virtu5, _apiRef$current$virtu6;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -154,7 +233,33 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-  }, [apiRef]);
+    const virtualScrollerRect = (_apiRef$current$virtu5 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu6 = _apiRef$current$virtu5.current) == null ? void 0 : _apiRef$current$virtu6.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    const {
+      height,
+      width,
+      x,
+      y
+    } = virtualScrollerRect;
+    const mouseX = event.clientX - x;
+    const mouseY = event.clientY - y;
+    mousePosition.current = {
+      x: mouseX,
+      y: mouseY
+    };
+    const hasEnteredVerticalSensitivityArea = mouseY <= AUTO_SCROLL_SENSITIVITY || mouseY >= height - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredHorizontalSensitivityArea = mouseX <= AUTO_SCROLL_SENSITIVITY || mouseX >= width - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredSensitivityArea = hasEnteredVerticalSensitivityArea || hasEnteredHorizontalSensitivityArea;
+    if (hasEnteredSensitivityArea) {
+      // Mouse has entered the sensitity area for the first time
+      startAutoScroll();
+    } else {
+      // Mouse has left the sensitivity area while auto scroll is on
+      stopAutoScroll();
+    }
+  }, [apiRef, startAutoScroll, stopAutoScroll]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -225,6 +330,10 @@ export const useGridCellSelection = (apiRef, props) => {
       id: visibleRows.rows[endRowIndex].id,
       field: visibleColumns[endColumnIndex].field
     };
+    apiRef.current.scrollToIndexes({
+      rowIndex: endRowIndex,
+      colIndex: endColumnIndex
+    });
     const {
       id,
       field
@@ -238,13 +347,21 @@ export const useGridCellSelection = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfCellSelectionIsEnabled(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfCellSelectionIsEnabled(handleCellKeyDown));
   useGridApiEventHandler(apiRef, 'cellMouseDown', runIfCellSelectionIsEnabled(handleCellMouseDown));
-  useGridApiEventHandler(apiRef, 'cellMouseUp', runIfCellSelectionIsEnabled(handleCellMouseUp));
   useGridApiEventHandler(apiRef, 'cellMouseOver', runIfCellSelectionIsEnabled(handleCellMouseOver));
   React.useEffect(() => {
     if (props.unstable_cellSelectionModel) {
       apiRef.current.unstable_setCellSelectionModel(props.unstable_cellSelectionModel);
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
+  React.useEffect(() => {
+    var _apiRef$current$rootE6;
+    const rootRef = (_apiRef$current$rootE6 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE6.current;
+    return () => {
+      stopAutoScroll();
+      const document = ownerDocument(rootRef);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [apiRef, handleMouseUp, stopAutoScroll]);
   const checkIfCellIsSelected = React.useCallback((isSelected, {
     id,
     field

package/index.js

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

package/legacy/DataGridPremium/DataGridPremium.js

@@ -740,7 +740,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   /**
    * If `true`, pagination is enabled.
    * @default false

package/legacy/hooks/features/cellSelection/useGridCellSelection.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useEventCallback } from '@mui/material/utils';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
@@ -17,10 +17,15 @@ export var cellSelectionStateInitializer = function cellSelectionStateInitialize
 function isKeyboardEvent(event) {
   return !!event.key;
 }
+var AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrolling
+var AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
+
 export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
   var visibleRows = useGridVisibleRows(apiRef, props);
   var cellWithVirtualFocus = React.useRef();
   var lastMouseDownCell = React.useRef();
+  var mousePosition = React.useRef(null);
+  var autoScrollRAF = React.useRef();
   var ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   var ignoreValueFormatter = (_typeof(ignoreValueFormatterProp) === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   var clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -130,8 +135,16 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
     }
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
-  var handleCellMouseDown = React.useCallback(function (params, event) {
+  var handleMouseUp = useEventCallback(function () {
     var _apiRef$current$rootE, _apiRef$current$rootE2;
+    lastMouseDownCell.current = null;
+    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.remove(gridClasses['root--disableUserSelection']);
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopAutoScroll();
+  });
+  var handleCellMouseDown = React.useCallback(function (params, event) {
+    var _apiRef$current$rootE3, _apiRef$current$rootE4, _apiRef$current$rootE5;
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
     var isMacOs = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
@@ -146,20 +159,82 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
       id: params.id,
       field: params.field
     };
-    (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE2 = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE2.classList.add(gridClasses['root--disableUserSelection']);
-  }, [apiRef, hasClickedValidCellForRangeSelection]);
-  var handleCellMouseUp = React.useCallback(function () {
-    var _apiRef$current$rootE3, _apiRef$current$rootE4;
-    lastMouseDownCell.current = null;
-    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.remove(gridClasses['root--disableUserSelection']);
-  }, [apiRef]);
+    (_apiRef$current$rootE3 = apiRef.current.rootElementRef) == null ? void 0 : (_apiRef$current$rootE4 = _apiRef$current$rootE3.current) == null ? void 0 : _apiRef$current$rootE4.classList.add(gridClasses['root--disableUserSelection']);
+    var document = ownerDocument((_apiRef$current$rootE5 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE5.current);
+    document.addEventListener('mouseup', handleMouseUp, {
+      once: true
+    });
+  }, [apiRef, handleMouseUp, hasClickedValidCellForRangeSelection]);
+  var stopAutoScroll = React.useCallback(function () {
+    if (autoScrollRAF.current) {
+      cancelAnimationFrame(autoScrollRAF.current);
+      autoScrollRAF.current = null;
+    }
+  }, []);
   var handleCellFocusIn = React.useCallback(function (params) {
     cellWithVirtualFocus.current = {
       id: params.id,
       field: params.field
     };
   }, []);
+  var startAutoScroll = React.useCallback(function () {
+    var _apiRef$current$virtu, _apiRef$current$virtu2, _apiRef$current$virtu3;
+    if (autoScrollRAF.current) {
+      return;
+    }
+    if (!((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current)) {
+      return;
+    }
+    var virtualScrollerRect = (_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu3 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    function autoScroll() {
+      var _apiRef$current$virtu4;
+      if (!mousePosition.current || !((_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu4.current)) {
+        return;
+      }
+      var _mousePosition$curren = mousePosition.current,
+        mouseX = _mousePosition$curren.x,
+        mouseY = _mousePosition$curren.y;
+      var height = virtualScrollerRect.height,
+        width = virtualScrollerRect.width;
+      var deltaX = 0;
+      var deltaY = 0;
+      var factor = 0;
+      var dimensions = apiRef.current.getRootDimensions();
+      if (mouseY <= AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollY) {
+        // When scrolling up, the multiplier increases going closer to the top edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseY) / -AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseY >= height - AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollY) {
+        // When scrolling down, the multiplier increases going closer to the bottom edge
+        factor = (mouseY - (height - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseX <= AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollX) {
+        // When scrolling left, the multiplier increases going closer to the left edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseX) / -AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      } else if (mouseX >= width - AUTO_SCROLL_SENSITIVITY && dimensions != null && dimensions.hasScrollX) {
+        // When scrolling right, the multiplier increases going closer to the right edge
+        factor = (mouseX - (width - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        var _apiRef$current$virtu5 = apiRef.current.virtualScrollerRef.current,
+          scrollLeft = _apiRef$current$virtu5.scrollLeft,
+          scrollTop = _apiRef$current$virtu5.scrollTop;
+        apiRef.current.scroll({
+          top: scrollTop + deltaY * factor,
+          left: scrollLeft + deltaX * factor
+        });
+      }
+      autoScrollRAF.current = requestAnimationFrame(autoScroll);
+    }
+    autoScroll();
+  }, [apiRef]);
   var handleCellMouseOver = React.useCallback(function (params, event) {
+    var _apiRef$current$virtu6, _apiRef$current$virtu7;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -169,7 +244,31 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
       id: id,
       field: field
     }, event.ctrlKey || event.metaKey);
-  }, [apiRef]);
+    var virtualScrollerRect = (_apiRef$current$virtu6 = apiRef.current.virtualScrollerRef) == null ? void 0 : (_apiRef$current$virtu7 = _apiRef$current$virtu6.current) == null ? void 0 : _apiRef$current$virtu7.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    var height = virtualScrollerRect.height,
+      width = virtualScrollerRect.width,
+      x = virtualScrollerRect.x,
+      y = virtualScrollerRect.y;
+    var mouseX = event.clientX - x;
+    var mouseY = event.clientY - y;
+    mousePosition.current = {
+      x: mouseX,
+      y: mouseY
+    };
+    var hasEnteredVerticalSensitivityArea = mouseY <= AUTO_SCROLL_SENSITIVITY || mouseY >= height - AUTO_SCROLL_SENSITIVITY;
+    var hasEnteredHorizontalSensitivityArea = mouseX <= AUTO_SCROLL_SENSITIVITY || mouseX >= width - AUTO_SCROLL_SENSITIVITY;
+    var hasEnteredSensitivityArea = hasEnteredVerticalSensitivityArea || hasEnteredHorizontalSensitivityArea;
+    if (hasEnteredSensitivityArea) {
+      // Mouse has entered the sensitity area for the first time
+      startAutoScroll();
+    } else {
+      // Mouse has left the sensitivity area while auto scroll is on
+      stopAutoScroll();
+    }
+  }, [apiRef, startAutoScroll, stopAutoScroll]);
   var handleCellClick = useEventCallback(function (params, event) {
     var id = params.id,
       field = params.field;
@@ -228,6 +327,10 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
       id: visibleRows.rows[endRowIndex].id,
       field: visibleColumns[endColumnIndex].field
     };
+    apiRef.current.scrollToIndexes({
+      rowIndex: endRowIndex,
+      colIndex: endColumnIndex
+    });
     var id = params.id,
       field = params.field;
     apiRef.current.unstable_selectCellRange({
@@ -239,13 +342,21 @@ export var useGridCellSelection = function useGridCellSelection(apiRef, props) {
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfCellSelectionIsEnabled(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfCellSelectionIsEnabled(handleCellKeyDown));
   useGridApiEventHandler(apiRef, 'cellMouseDown', runIfCellSelectionIsEnabled(handleCellMouseDown));
-  useGridApiEventHandler(apiRef, 'cellMouseUp', runIfCellSelectionIsEnabled(handleCellMouseUp));
   useGridApiEventHandler(apiRef, 'cellMouseOver', runIfCellSelectionIsEnabled(handleCellMouseOver));
   React.useEffect(function () {
     if (props.unstable_cellSelectionModel) {
       apiRef.current.unstable_setCellSelectionModel(props.unstable_cellSelectionModel);
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
+  React.useEffect(function () {
+    var _apiRef$current$rootE6;
+    var rootRef = (_apiRef$current$rootE6 = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE6.current;
+    return function () {
+      stopAutoScroll();
+      var document = ownerDocument(rootRef);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [apiRef, handleMouseUp, stopAutoScroll]);
   var checkIfCellIsSelected = React.useCallback(function (isSelected, _ref5) {
     var id = _ref5.id,
       field = _ref5.field;

package/legacy/index.js

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

package/legacy/utils/releaseInfo.js

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

@@ -740,7 +740,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   /**
    * If `true`, pagination is enabled.
    * @default false

package/modern/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useEventCallback } from '@mui/material/utils';
+import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
@@ -10,10 +10,15 @@ export const cellSelectionStateInitializer = (state, props) => _extends({}, stat
 function isKeyboardEvent(event) {
   return !!event.key;
 }
+const AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrolling
+const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
+
 export const useGridCellSelection = (apiRef, props) => {
   const visibleRows = useGridVisibleRows(apiRef, props);
   const cellWithVirtualFocus = React.useRef();
   const lastMouseDownCell = React.useRef();
+  const mousePosition = React.useRef(null);
+  const autoScrollRAF = React.useRef();
   const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -110,6 +115,13 @@ export const useGridCellSelection = (apiRef, props) => {
     }
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
+  const handleMouseUp = useEventCallback(() => {
+    lastMouseDownCell.current = null;
+    apiRef.current.rootElementRef?.current?.classList.remove(gridClasses['root--disableUserSelection']);
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopAutoScroll();
+  });
   const handleCellMouseDown = React.useCallback((params, event) => {
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
@@ -126,17 +138,81 @@ export const useGridCellSelection = (apiRef, props) => {
       field: params.field
     };
     apiRef.current.rootElementRef?.current?.classList.add(gridClasses['root--disableUserSelection']);
-  }, [apiRef, hasClickedValidCellForRangeSelection]);
-  const handleCellMouseUp = React.useCallback(() => {
-    lastMouseDownCell.current = null;
-    apiRef.current.rootElementRef?.current?.classList.remove(gridClasses['root--disableUserSelection']);
-  }, [apiRef]);
+    const document = ownerDocument(apiRef.current.rootElementRef?.current);
+    document.addEventListener('mouseup', handleMouseUp, {
+      once: true
+    });
+  }, [apiRef, handleMouseUp, hasClickedValidCellForRangeSelection]);
+  const stopAutoScroll = React.useCallback(() => {
+    if (autoScrollRAF.current) {
+      cancelAnimationFrame(autoScrollRAF.current);
+      autoScrollRAF.current = null;
+    }
+  }, []);
   const handleCellFocusIn = React.useCallback(params => {
     cellWithVirtualFocus.current = {
       id: params.id,
       field: params.field
     };
   }, []);
+  const startAutoScroll = React.useCallback(() => {
+    if (autoScrollRAF.current) {
+      return;
+    }
+    if (!apiRef.current.virtualScrollerRef?.current) {
+      return;
+    }
+    const virtualScrollerRect = apiRef.current.virtualScrollerRef?.current?.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    function autoScroll() {
+      if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
+        return;
+      }
+      const {
+        x: mouseX,
+        y: mouseY
+      } = mousePosition.current;
+      const {
+        height,
+        width
+      } = virtualScrollerRect;
+      let deltaX = 0;
+      let deltaY = 0;
+      let factor = 0;
+      const dimensions = apiRef.current.getRootDimensions();
+      if (mouseY <= AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollY) {
+        // When scrolling up, the multiplier increases going closer to the top edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseY) / -AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseY >= height - AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollY) {
+        // When scrolling down, the multiplier increases going closer to the bottom edge
+        factor = (mouseY - (height - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseX <= AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollX) {
+        // When scrolling left, the multiplier increases going closer to the left edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseX) / -AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      } else if (mouseX >= width - AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollX) {
+        // When scrolling right, the multiplier increases going closer to the right edge
+        factor = (mouseX - (width - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        const {
+          scrollLeft,
+          scrollTop
+        } = apiRef.current.virtualScrollerRef.current;
+        apiRef.current.scroll({
+          top: scrollTop + deltaY * factor,
+          left: scrollLeft + deltaX * factor
+        });
+      }
+      autoScrollRAF.current = requestAnimationFrame(autoScroll);
+    }
+    autoScroll();
+  }, [apiRef]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -149,7 +225,33 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-  }, [apiRef]);
+    const virtualScrollerRect = apiRef.current.virtualScrollerRef?.current?.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    const {
+      height,
+      width,
+      x,
+      y
+    } = virtualScrollerRect;
+    const mouseX = event.clientX - x;
+    const mouseY = event.clientY - y;
+    mousePosition.current = {
+      x: mouseX,
+      y: mouseY
+    };
+    const hasEnteredVerticalSensitivityArea = mouseY <= AUTO_SCROLL_SENSITIVITY || mouseY >= height - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredHorizontalSensitivityArea = mouseX <= AUTO_SCROLL_SENSITIVITY || mouseX >= width - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredSensitivityArea = hasEnteredVerticalSensitivityArea || hasEnteredHorizontalSensitivityArea;
+    if (hasEnteredSensitivityArea) {
+      // Mouse has entered the sensitity area for the first time
+      startAutoScroll();
+    } else {
+      // Mouse has left the sensitivity area while auto scroll is on
+      stopAutoScroll();
+    }
+  }, [apiRef, startAutoScroll, stopAutoScroll]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,
@@ -220,6 +322,10 @@ export const useGridCellSelection = (apiRef, props) => {
       id: visibleRows.rows[endRowIndex].id,
       field: visibleColumns[endColumnIndex].field
     };
+    apiRef.current.scrollToIndexes({
+      rowIndex: endRowIndex,
+      colIndex: endColumnIndex
+    });
     const {
       id,
       field
@@ -233,13 +339,20 @@ export const useGridCellSelection = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfCellSelectionIsEnabled(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfCellSelectionIsEnabled(handleCellKeyDown));
   useGridApiEventHandler(apiRef, 'cellMouseDown', runIfCellSelectionIsEnabled(handleCellMouseDown));
-  useGridApiEventHandler(apiRef, 'cellMouseUp', runIfCellSelectionIsEnabled(handleCellMouseUp));
   useGridApiEventHandler(apiRef, 'cellMouseOver', runIfCellSelectionIsEnabled(handleCellMouseOver));
   React.useEffect(() => {
     if (props.unstable_cellSelectionModel) {
       apiRef.current.unstable_setCellSelectionModel(props.unstable_cellSelectionModel);
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
+  React.useEffect(() => {
+    const rootRef = apiRef.current.rootElementRef?.current;
+    return () => {
+      stopAutoScroll();
+      const document = ownerDocument(rootRef);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [apiRef, handleMouseUp, stopAutoScroll]);
   const checkIfCellIsSelected = React.useCallback((isSelected, {
     id,
     field

package/modern/index.js

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

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4ODA5NDAwMDAwMA==";
+  const releaseInfo = "MTY4ODU5MDgwMDAwMA==";
   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/node/DataGridPremium/DataGridPremium.js

@@ -749,7 +749,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.number.isRequired
+  })]).isRequired),
   /**
    * If `true`, pagination is enabled.
    * @default false

package/node/hooks/features/cellSelection/useGridCellSelection.js

@@ -20,10 +20,15 @@ exports.cellSelectionStateInitializer = cellSelectionStateInitializer;
 function isKeyboardEvent(event) {
   return !!event.key;
 }
+const AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrolling
+const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
+
 const useGridCellSelection = (apiRef, props) => {
   const visibleRows = (0, _internals.useGridVisibleRows)(apiRef, props);
   const cellWithVirtualFocus = React.useRef();
   const lastMouseDownCell = React.useRef();
+  const mousePosition = React.useRef(null);
+  const autoScrollRAF = React.useRef();
   const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -120,6 +125,13 @@ const useGridCellSelection = (apiRef, props) => {
     }
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
+  const handleMouseUp = (0, _utils.useEventCallback)(() => {
+    lastMouseDownCell.current = null;
+    apiRef.current.rootElementRef?.current?.classList.remove(_xDataGridPro.gridClasses['root--disableUserSelection']);
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    stopAutoScroll();
+  });
   const handleCellMouseDown = React.useCallback((params, event) => {
     // Skip if the click comes from the right-button or, only on macOS, Ctrl is pressed
     // Fix for https://github.com/mui/mui-x/pull/6567#issuecomment-1329155578
@@ -136,17 +148,81 @@ const useGridCellSelection = (apiRef, props) => {
       field: params.field
     };
     apiRef.current.rootElementRef?.current?.classList.add(_xDataGridPro.gridClasses['root--disableUserSelection']);
-  }, [apiRef, hasClickedValidCellForRangeSelection]);
-  const handleCellMouseUp = React.useCallback(() => {
-    lastMouseDownCell.current = null;
-    apiRef.current.rootElementRef?.current?.classList.remove(_xDataGridPro.gridClasses['root--disableUserSelection']);
-  }, [apiRef]);
+    const document = (0, _utils.ownerDocument)(apiRef.current.rootElementRef?.current);
+    document.addEventListener('mouseup', handleMouseUp, {
+      once: true
+    });
+  }, [apiRef, handleMouseUp, hasClickedValidCellForRangeSelection]);
+  const stopAutoScroll = React.useCallback(() => {
+    if (autoScrollRAF.current) {
+      cancelAnimationFrame(autoScrollRAF.current);
+      autoScrollRAF.current = null;
+    }
+  }, []);
   const handleCellFocusIn = React.useCallback(params => {
     cellWithVirtualFocus.current = {
       id: params.id,
       field: params.field
     };
   }, []);
+  const startAutoScroll = React.useCallback(() => {
+    if (autoScrollRAF.current) {
+      return;
+    }
+    if (!apiRef.current.virtualScrollerRef?.current) {
+      return;
+    }
+    const virtualScrollerRect = apiRef.current.virtualScrollerRef?.current?.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    function autoScroll() {
+      if (!mousePosition.current || !apiRef.current.virtualScrollerRef?.current) {
+        return;
+      }
+      const {
+        x: mouseX,
+        y: mouseY
+      } = mousePosition.current;
+      const {
+        height,
+        width
+      } = virtualScrollerRect;
+      let deltaX = 0;
+      let deltaY = 0;
+      let factor = 0;
+      const dimensions = apiRef.current.getRootDimensions();
+      if (mouseY <= AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollY) {
+        // When scrolling up, the multiplier increases going closer to the top edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseY) / -AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseY >= height - AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollY) {
+        // When scrolling down, the multiplier increases going closer to the bottom edge
+        factor = (mouseY - (height - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaY = AUTO_SCROLL_SPEED;
+      } else if (mouseX <= AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollX) {
+        // When scrolling left, the multiplier increases going closer to the left edge
+        factor = (AUTO_SCROLL_SENSITIVITY - mouseX) / -AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      } else if (mouseX >= width - AUTO_SCROLL_SENSITIVITY && dimensions?.hasScrollX) {
+        // When scrolling right, the multiplier increases going closer to the right edge
+        factor = (mouseX - (width - AUTO_SCROLL_SENSITIVITY)) / AUTO_SCROLL_SENSITIVITY;
+        deltaX = AUTO_SCROLL_SPEED;
+      }
+      if (deltaX !== 0 || deltaY !== 0) {
+        const {
+          scrollLeft,
+          scrollTop
+        } = apiRef.current.virtualScrollerRef.current;
+        apiRef.current.scroll({
+          top: scrollTop + deltaY * factor,
+          left: scrollLeft + deltaX * factor
+        });
+      }
+      autoScrollRAF.current = requestAnimationFrame(autoScroll);
+    }
+    autoScroll();
+  }, [apiRef]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -159,7 +235,33 @@ const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-  }, [apiRef]);
+    const virtualScrollerRect = apiRef.current.virtualScrollerRef?.current?.getBoundingClientRect();
+    if (!virtualScrollerRect) {
+      return;
+    }
+    const {
+      height,
+      width,
+      x,
+      y
+    } = virtualScrollerRect;
+    const mouseX = event.clientX - x;
+    const mouseY = event.clientY - y;
+    mousePosition.current = {
+      x: mouseX,
+      y: mouseY
+    };
+    const hasEnteredVerticalSensitivityArea = mouseY <= AUTO_SCROLL_SENSITIVITY || mouseY >= height - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredHorizontalSensitivityArea = mouseX <= AUTO_SCROLL_SENSITIVITY || mouseX >= width - AUTO_SCROLL_SENSITIVITY;
+    const hasEnteredSensitivityArea = hasEnteredVerticalSensitivityArea || hasEnteredHorizontalSensitivityArea;
+    if (hasEnteredSensitivityArea) {
+      // Mouse has entered the sensitity area for the first time
+      startAutoScroll();
+    } else {
+      // Mouse has left the sensitivity area while auto scroll is on
+      stopAutoScroll();
+    }
+  }, [apiRef, startAutoScroll, stopAutoScroll]);
   const handleCellClick = (0, _utils.useEventCallback)((params, event) => {
     const {
       id,
@@ -230,6 +332,10 @@ const useGridCellSelection = (apiRef, props) => {
       id: visibleRows.rows[endRowIndex].id,
       field: visibleColumns[endColumnIndex].field
     };
+    apiRef.current.scrollToIndexes({
+      rowIndex: endRowIndex,
+      colIndex: endColumnIndex
+    });
     const {
       id,
       field
@@ -243,13 +349,20 @@ const useGridCellSelection = (apiRef, props) => {
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellFocusIn', runIfCellSelectionIsEnabled(handleCellFocusIn));
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfCellSelectionIsEnabled(handleCellKeyDown));
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellMouseDown', runIfCellSelectionIsEnabled(handleCellMouseDown));
-  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellMouseUp', runIfCellSelectionIsEnabled(handleCellMouseUp));
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellMouseOver', runIfCellSelectionIsEnabled(handleCellMouseOver));
   React.useEffect(() => {
     if (props.unstable_cellSelectionModel) {
       apiRef.current.unstable_setCellSelectionModel(props.unstable_cellSelectionModel);
     }
   }, [apiRef, props.unstable_cellSelectionModel]);
+  React.useEffect(() => {
+    const rootRef = apiRef.current.rootElementRef?.current;
+    return () => {
+      stopAutoScroll();
+      const document = (0, _utils.ownerDocument)(rootRef);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [apiRef, handleMouseUp, stopAutoScroll]);
   const checkIfCellIsSelected = React.useCallback((isSelected, {
     id,
     field

package/node/index.js

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

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY4ODA5NDAwMDAwMA==";
+  const releaseInfo = "MTY4ODU5MDgwMDAwMA==";
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "6.9.1",
+  "version": "6.9.2",
   "description": "The Premium plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,8 +33,8 @@
   "dependencies": {
     "@babel/runtime": "^7.22.5",
     "@mui/utils": "^5.13.6",
-    "@mui/x-data-grid": "6.9.1",
-    "@mui/x-data-grid-pro": "6.9.1",
+    "@mui/x-data-grid": "6.9.2",
+    "@mui/x-data-grid-pro": "6.9.2",
     "@mui/x-license-pro": "6.9.0",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4ODA5NDAwMDAwMA==";
+  const releaseInfo = "MTY4ODU5MDgwMDAwMA==";
   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