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

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/hooks/features/export/serializer/excelSerializer.js

@@ -131,7 +131,7 @@ export var serializeRow = function serializeRow(id, columns, api, defaultValueOp
         {
           // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
           // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
-          // About Date.UTC(): https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
+          // About Date.UTC(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
           var value = api.getCellParams(id, column.field).value;
           // value may be `undefined` in auto-generated grouping rows
           if (!value) {
@@ -174,7 +174,7 @@ export var serializeColumn = function serializeColumn(column, columnsStyles) {
     headerText: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
     // Excel width must stay between 0 and 255 (https://support.microsoft.com/en-us/office/change-the-column-width-and-row-height-72f5e3cc-994d-43e8-ae58-9774a0905f46)
     // From the example of column width behavior (https://docs.microsoft.com/en-US/office/troubleshoot/excel/determine-column-widths#example-of-column-width-behavior)
-    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the the font-size
+    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the font-size
     width: Math.min(255, column.width ? column.width / 7.5 : 8.43),
     style: _extends({}, type && (defaultColumnsStyles == null ? void 0 : defaultColumnsStyles[type]), columnsStyles == null ? void 0 : columnsStyles[field])
   };

package/legacy/hooks/features/rowGrouping/createGroupingColDef.js

@@ -46,25 +46,13 @@ var groupingFieldIndexComparator = function groupingFieldIndexComparator(v1, v2,
   return 1;
 };
 var getLeafProperties = function getLeafProperties(leafColDef) {
-  var _leafColDef$headerNam, _leafColDef$filterOpe;
+  var _leafColDef$headerNam;
   return {
     headerName: (_leafColDef$headerNam = leafColDef.headerName) != null ? _leafColDef$headerNam : leafColDef.field,
     sortable: leafColDef.sortable,
     filterable: leafColDef.filterable,
     valueOptions: isSingleSelectColDef(leafColDef) ? leafColDef.valueOptions : undefined,
-    filterOperators: (_leafColDef$filterOpe = leafColDef.filterOperators) == null ? void 0 : _leafColDef$filterOpe.map(function (operator) {
-      return _extends({}, operator, {
-        getApplyFilterFn: function getApplyFilterFn(filterItem, column) {
-          var originalFn = operator.getApplyFilterFn(filterItem, column);
-          if (!originalFn) {
-            return null;
-          }
-          return function (params) {
-            return originalFn(params);
-          };
-        }
-      });
-    }),
+    filterOperators: leafColDef.filterOperators,
     sortComparator: function sortComparator(v1, v2, cellParams1, cellParams2) {
       // We only want to sort the leaves
       if (cellParams1.rowNode.type === 'leaf' && cellParams2.rowNode.type === 'leaf') {
@@ -75,7 +63,6 @@ var getLeafProperties = function getLeafProperties(leafColDef) {
   };
 };
 var getGroupingCriteriaProperties = function getGroupingCriteriaProperties(groupedByColDef, applyHeaderName) {
-  var _groupedByColDef$filt;
   var properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
@@ -87,19 +74,7 @@ var getGroupingCriteriaProperties = function getGroupingCriteriaProperties(group
       }
       return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
     },
-    filterOperators: (_groupedByColDef$filt = groupedByColDef.filterOperators) == null ? void 0 : _groupedByColDef$filt.map(function (operator) {
-      return _extends({}, operator, {
-        getApplyFilterFn: function getApplyFilterFn(filterItem, column) {
-          var originalFn = operator.getApplyFilterFn(filterItem, column);
-          if (!originalFn) {
-            return null;
-          }
-          return function (params) {
-            return originalFn(params);
-          };
-        }
-      });
-    })
+    filterOperators: groupedByColDef.filterOperators
   };
   if (applyHeaderName) {
     var _groupedByColDef$head;

package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -38,23 +38,25 @@ var shouldApplyFilterItemOnGroup = function shouldApplyFilterItemOnGroup(columnF
  * - It is passing the filter
  */
 export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGroupingColumns(params) {
-  var rowTree = params.rowTree,
+  var apiRef = params.apiRef,
+    rowTree = params.rowTree,
     isRowMatchingFilters = params.isRowMatchingFilters,
     filterModel = params.filterModel;
   var filteredRowsLookup = {};
   var filteredDescendantCountLookup = {};
   var filterCache = {};
   var filterTreeNode = function filterTreeNode(node, areAncestorsExpanded, ancestorsResults) {
-    var isPassingFiltering = false;
     var filterResults = {
       passingFilterItems: null,
       passingQuickFilterValues: null
     };
+    var isPassingFiltering = false;
     if (isRowMatchingFilters && node.type !== 'footer') {
       var shouldApplyItem = node.type === 'group' && node.isAutoGenerated ? function (columnField) {
         return shouldApplyFilterItemOnGroup(columnField, node);
       } : undefined;
-      filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+      var row = apiRef.current.getRow(node.id);
+      isRowMatchingFilters(row, shouldApplyItem, filterResults);
     } else {
       isPassingFiltering = true;
     }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.9.0
+ * @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 = "MTY4NzM4MTIwMDAwMA==";
+  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/DataGridPremium/useDataGridPremiumComponent.js

@@ -62,7 +62,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridRowPinning(privateApiRef, props);
   useGridColumns(privateApiRef, props);
   useGridRows(privateApiRef, props);
-  useGridParamsApi(privateApiRef);
+  useGridParamsApi(privateApiRef, props);
   useGridDetailPanel(privateApiRef, props);
   useGridColumnSpanning(privateApiRef);
   useGridColumnGrouping(privateApiRef, props);

package/modern/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { tagInternalFilter } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector } from './gridAggregationSelectors';
 import { GridFooterCell } from '../../../components/GridFooterCell';
 import { GridAggregationHeader } from '../../../components/GridAggregationHeader';
@@ -82,19 +83,35 @@ const getWrappedFilterOperators = ({
   value: filterOperators,
   getCellAggregationResult
 }) => filterOperators.map(operator => {
-  return _extends({}, operator, {
-    getApplyFilterFn: (filterItem, column) => {
-      const originalFn = operator.getApplyFilterFn(filterItem, column);
-      if (!originalFn) {
-        return null;
+  const baseGetApplyFilterFn = operator.getApplyFilterFn;
+  const baseGetApplyFilterFnV7 = operator.getApplyFilterFnV7;
+  const getApplyFilterFn = tagInternalFilter((filterItem, colDef) => {
+    const filterFn = baseGetApplyFilterFn(filterItem, colDef);
+    if (!filterFn) {
+      return null;
+    }
+    return params => {
+      if (getCellAggregationResult(params.id, params.field) != null) {
+        return true;
       }
-      return params => {
-        if (getCellAggregationResult(params.id, params.field) != null) {
-          return true;
-        }
-        return originalFn(params);
-      };
+      return filterFn(params);
+    };
+  });
+  const getApplyFilterFnV7 = baseGetApplyFilterFnV7 === undefined ? undefined : tagInternalFilter((filterItem, colDef) => {
+    const filterFn = baseGetApplyFilterFnV7(filterItem, colDef);
+    if (!filterFn) {
+      return null;
     }
+    return (value, row, column, api) => {
+      if (getCellAggregationResult(row.id, column.field) != null) {
+        return true;
+      }
+      return filterFn(value, row, column, api);
+    };
+  });
+  return _extends({}, operator, {
+    getApplyFilterFn,
+    getApplyFilterFnV7
   });
 });
 

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/hooks/features/export/serializer/excelSerializer.js

@@ -102,7 +102,7 @@ export const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
         {
           // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
           // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
-          // About Date.UTC(): https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
+          // About Date.UTC(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
           const value = api.getCellParams(id, column.field).value;
           // value may be `undefined` in auto-generated grouping rows
           if (!value) {
@@ -149,7 +149,7 @@ export const serializeColumn = (column, columnsStyles) => {
     headerText: column.headerName ?? column.field,
     // Excel width must stay between 0 and 255 (https://support.microsoft.com/en-us/office/change-the-column-width-and-row-height-72f5e3cc-994d-43e8-ae58-9774a0905f46)
     // From the example of column width behavior (https://docs.microsoft.com/en-US/office/troubleshoot/excel/determine-column-widths#example-of-column-width-behavior)
-    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the the font-size
+    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the font-size
     width: Math.min(255, column.width ? column.width / 7.5 : 8.43),
     style: _extends({}, type && defaultColumnsStyles?.[type], columnsStyles?.[field])
   };

package/modern/hooks/features/rowGrouping/createGroupingColDef.js

@@ -48,17 +48,7 @@ const getLeafProperties = leafColDef => ({
   sortable: leafColDef.sortable,
   filterable: leafColDef.filterable,
   valueOptions: isSingleSelectColDef(leafColDef) ? leafColDef.valueOptions : undefined,
-  filterOperators: leafColDef.filterOperators?.map(operator => _extends({}, operator, {
-    getApplyFilterFn: (filterItem, column) => {
-      const originalFn = operator.getApplyFilterFn(filterItem, column);
-      if (!originalFn) {
-        return null;
-      }
-      return params => {
-        return originalFn(params);
-      };
-    }
-  })),
+  filterOperators: leafColDef.filterOperators,
   sortComparator: (v1, v2, cellParams1, cellParams2) => {
     // We only want to sort the leaves
     if (cellParams1.rowNode.type === 'leaf' && cellParams2.rowNode.type === 'leaf') {
@@ -79,17 +69,7 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
       }
       return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
     },
-    filterOperators: groupedByColDef.filterOperators?.map(operator => _extends({}, operator, {
-      getApplyFilterFn: (filterItem, column) => {
-        const originalFn = operator.getApplyFilterFn(filterItem, column);
-        if (!originalFn) {
-          return null;
-        }
-        return params => {
-          return originalFn(params);
-        };
-      }
-    }))
+    filterOperators: groupedByColDef.filterOperators
   };
   if (applyHeaderName) {
     properties.headerName = groupedByColDef.headerName ?? groupedByColDef.field;