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

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.10.0
  *
  * @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 = "MTY4OTE5OTIwMDAwMA==";
   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

@@ -285,6 +285,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
       value: PropTypes.any
     })).isRequired,
     logicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: PropTypes.bool,
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
@@ -740,7 +741,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/aggregation/wrapColumnWithAggregation.js

@@ -122,20 +122,20 @@ const getWrappedRenderHeader = ({
   value: renderHeader,
   aggregationRule
 }) => {
-  const wrappedRenderCell = params => {
-    const aggregationMeta = {
+  const wrappedRenderHeader = params => {
+    const aggregation = {
       aggregationRule
     };
-    if (!renderHeader) {
-      return /*#__PURE__*/_jsx(GridAggregationHeader, _extends({}, params, {
-        aggregation: aggregationMeta
+    if (renderHeader) {
+      return renderHeader(_extends({}, params, {
+        aggregation
       }));
     }
-    return renderHeader(_extends({}, params, {
-      aggregation: aggregationMeta
+    return /*#__PURE__*/_jsx(GridAggregationHeader, _extends({}, params, {
+      aggregation: aggregation
     }));
   };
-  return wrappedRenderCell;
+  return wrappedRenderHeader;
 };
 
 /**
@@ -166,9 +166,9 @@ export const wrapColumnWithAggregationValue = ({
     }
     return aggregationResult;
   };
-  const aggregationWrappedProperties = {};
+  let didWrapSomeProperty = false;
   const wrappedColumn = _extends({}, column, {
-    aggregationWrappedProperties
+    aggregationWrappedColumn: column
   });
   const wrapColumnProperty = (property, wrapper) => {
     const originalValue = column[property];
@@ -180,10 +180,7 @@ export const wrapColumnWithAggregationValue = ({
       getCellAggregationResult
     });
     if (wrappedProperty !== originalValue) {
-      aggregationWrappedProperties[property] = {
-        original: originalValue,
-        wrapped: wrappedProperty
-      };
+      didWrapSomeProperty = true;
       wrappedColumn[property] = wrappedProperty;
     }
   };
@@ -192,7 +189,7 @@ export const wrapColumnWithAggregationValue = ({
   wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
   wrapColumnProperty('renderHeader', getWrappedRenderHeader);
   wrapColumnProperty('filterOperators', getWrappedFilterOperators);
-  if (Object.keys(aggregationWrappedProperties).length === 0) {
+  if (!didWrapSomeProperty) {
     return column;
   }
   return wrappedColumn;
@@ -204,23 +201,5 @@ export const wrapColumnWithAggregationValue = ({
 export const unwrapColumnFromAggregation = ({
   column
 }) => {
-  if (!column.aggregationWrappedProperties) {
-    return column;
-  }
-  const originalProperties = Object.entries(column.aggregationWrappedProperties);
-  if (originalProperties.length === 0) {
-    return column;
-  }
-  const unwrappedColumn = _extends({}, column);
-  originalProperties.forEach(([propertyName, {
-    original,
-    wrapped
-  }]) => {
-    // The value changed since we wrapped it
-    if (wrapped !== column[propertyName]) {
-      return;
-    }
-    unwrappedColumn[propertyName] = original;
-  });
-  return unwrappedColumn;
+  return column.aggregationWrappedColumn ?? column;
 };

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.10.0
  *
  * @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 = "MTY4OTE5OTIwMDAwMA==";
   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

@@ -294,6 +294,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
       value: _propTypes.default.any
     })).isRequired,
     logicOperator: _propTypes.default.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: _propTypes.default.bool,
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
@@ -749,7 +750,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/aggregation/wrapColumnWithAggregation.js

@@ -131,20 +131,20 @@ const getWrappedRenderHeader = ({
   value: renderHeader,
   aggregationRule
 }) => {
-  const wrappedRenderCell = params => {
-    const aggregationMeta = {
+  const wrappedRenderHeader = params => {
+    const aggregation = {
       aggregationRule
     };
-    if (!renderHeader) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAggregationHeader.GridAggregationHeader, (0, _extends2.default)({}, params, {
-        aggregation: aggregationMeta
+    if (renderHeader) {
+      return renderHeader((0, _extends2.default)({}, params, {
+        aggregation
       }));
     }
-    return renderHeader((0, _extends2.default)({}, params, {
-      aggregation: aggregationMeta
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAggregationHeader.GridAggregationHeader, (0, _extends2.default)({}, params, {
+      aggregation: aggregation
     }));
   };
-  return wrappedRenderCell;
+  return wrappedRenderHeader;
 };
 
 /**
@@ -175,9 +175,9 @@ const wrapColumnWithAggregationValue = ({
     }
     return aggregationResult;
   };
-  const aggregationWrappedProperties = {};
+  let didWrapSomeProperty = false;
   const wrappedColumn = (0, _extends2.default)({}, column, {
-    aggregationWrappedProperties
+    aggregationWrappedColumn: column
   });
   const wrapColumnProperty = (property, wrapper) => {
     const originalValue = column[property];
@@ -189,10 +189,7 @@ const wrapColumnWithAggregationValue = ({
       getCellAggregationResult
     });
     if (wrappedProperty !== originalValue) {
-      aggregationWrappedProperties[property] = {
-        original: originalValue,
-        wrapped: wrappedProperty
-      };
+      didWrapSomeProperty = true;
       wrappedColumn[property] = wrappedProperty;
     }
   };
@@ -201,7 +198,7 @@ const wrapColumnWithAggregationValue = ({
   wrapColumnProperty('renderCell', getAggregationValueWrappedRenderCell);
   wrapColumnProperty('renderHeader', getWrappedRenderHeader);
   wrapColumnProperty('filterOperators', getWrappedFilterOperators);
-  if (Object.keys(aggregationWrappedProperties).length === 0) {
+  if (!didWrapSomeProperty) {
     return column;
   }
   return wrappedColumn;
@@ -214,24 +211,6 @@ exports.wrapColumnWithAggregationValue = wrapColumnWithAggregationValue;
 const unwrapColumnFromAggregation = ({
   column
 }) => {
-  if (!column.aggregationWrappedProperties) {
-    return column;
-  }
-  const originalProperties = Object.entries(column.aggregationWrappedProperties);
-  if (originalProperties.length === 0) {
-    return column;
-  }
-  const unwrappedColumn = (0, _extends2.default)({}, column);
-  originalProperties.forEach(([propertyName, {
-    original,
-    wrapped
-  }]) => {
-    // The value changed since we wrapped it
-    if (wrapped !== column[propertyName]) {
-      return;
-    }
-    unwrappedColumn[propertyName] = original;
-  });
-  return unwrappedColumn;
+  return column.aggregationWrappedColumn ?? column;
 };
 exports.unwrapColumnFromAggregation = unwrapColumnFromAggregation;