@mui/x-data-grid-premium 7.0.0-beta.6 → 7.0.0-beta.7

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦥 The Lazy loading feature is now stable and the `lazyLoading` feature flag was removed from the `experimentalFeatures` prop.
+- 🌍 Improve Japanese (ja-JP) locale for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
+- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+  The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
+
+#### `@mui/x-data-grid@7.0.0-beta.7`
+
+- [DataGrid] Fix focus visible style on scrollbar (#12402) @oliviertassinari
+- [DataGrid] Fix the issue where pressing the Delete key resets various cell values to an empty string. (#12216) @sooster910
+- [DataGrid] Make `rowCount` part of the state (#12381) @MBilalShafi
+- [DataGrid] Make column resizing and autosizing available in Community plan (#12420) @cherniavskii
+- [DataGrid] Remove `baseSwitch` slot (#12439) @romgrk
+- [l10n] Improve Japanese (ja-JP) locale (#12398) @makoto14
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.7`, plus:
+
+- [DataGridPro] Add `inputRef` to the props passed to `colDef.renderHeaderFilter` (#12328) @vovarudomanenko
+- [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii
+- [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii
+- [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.7` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.7`, plus:
+
+- [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.7`
+
+- [fields] Fix `tabIndex` on accessible field DOM structure (#12311) @flaviendelangle
+- [fields] Fix items alignment on multi input range fields (#12312) @flaviendelangle
+- [pickers] Improve the customization of the range picker calendar header (#11988) @flaviendelangle
+- [pickers] Keep the existing time when looking for closest enabled date (#12377) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.7`.
+
+### Charts
+
+#### `@mui/x-charts@7.0.0-beta.7`
+
+- [charts] Fix axis highlight when axis is reversed (#12407) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
+
+```diff
+ <SimpleTreeView
+-  onNodeFocus={onNodeFocus}
++  onItemFocus={onItemFocus}
+ />
+```
+
+#### `@mui/x-tree-view@7.0.0-beta.7`
+
+- [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte
+- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
+- [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte
+
+### Docs
+
+- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
+- [docs] Add missing luxon `Info` import (#12427) @LukasTy
+- [docs] Improve slots definitions for charts (#12408) @alexfauquette
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
+- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
+
+### Core
+
+- [core] Fix CI (#12414) @flaviendelangle
+- [core] Fix PR deploy link for Tree View doc pages (#12411) @flaviendelangle
+
 ## 7.0.0-beta.6
 
 _Mar 8, 2024_
@@ -1731,7 +1827,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus:
   The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented.
 
   ```ts
-  import { Settings } from 'luxon';
+  import { Settings, Info } from 'luxon';
 
   Settings.defaultWeekSettings = {
     firstDay: 1,
@@ -2521,6 +2617,26 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to @LukasTy who made this release possible.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.7`
+
+- [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.7`.
+
+### Docs
+
+- [docs] Add Pickers custom start of week section (#12425) @LukasTy
+
 ## 6.19.6
 
 _Mar 1, 2024_

package/DataGridPremium/DataGridPremium.js

@@ -295,7 +295,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    lazyLoading: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -722,6 +721,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: _propTypes.default.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: _propTypes.default.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

package/esm/DataGridPremium/DataGridPremium.js

@@ -288,7 +288,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -715,6 +714,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: PropTypes.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 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, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { getTotalHeaderHeight, 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, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
 export const cellSelectionStateInitializer = (state, props) => {
   var _props$cellSelectionM, _props$initialState;
@@ -23,6 +23,8 @@ export const useGridCellSelection = (apiRef, props) => {
   const mousePosition = React.useRef(null);
   const autoScrollRAF = React.useRef();
   const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -165,20 +167,16 @@ export const useGridCellSelection = (apiRef, props) => {
     };
   }, []);
   const startAutoScroll = React.useCallback(() => {
-    var _apiRef$current$virtu, _apiRef$current$virtu2;
+    var _apiRef$current$virtu;
     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 || (_apiRef$current$virtu2 = _apiRef$current$virtu2.current) == null ? void 0 : _apiRef$current$virtu2.getBoundingClientRect();
-    if (!virtualScrollerRect) {
-      return;
-    }
     function autoScroll() {
-      var _apiRef$current$virtu3;
-      if (!mousePosition.current || !((_apiRef$current$virtu3 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu3.current)) {
+      var _apiRef$current$virtu2;
+      if (!mousePosition.current || !((_apiRef$current$virtu2 = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu2.current)) {
         return;
       }
       const {
@@ -188,11 +186,10 @@ export const useGridCellSelection = (apiRef, props) => {
       const {
         height,
         width
-      } = virtualScrollerRect;
+      } = dimensions.viewportInnerSize;
       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;
@@ -223,9 +220,9 @@ export const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef]);
+  }, [apiRef, dimensions]);
   const handleCellMouseOver = React.useCallback((params, event) => {
-    var _apiRef$current$virtu4;
+    var _apiRef$current$virtu3;
     if (!lastMouseDownCell.current) {
       return;
     }
@@ -237,18 +234,20 @@ export const useGridCellSelection = (apiRef, props) => {
       id,
       field
     }, event.ctrlKey || event.metaKey);
-    const virtualScrollerRect = (_apiRef$current$virtu4 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu4 = _apiRef$current$virtu4.current) == null ? void 0 : _apiRef$current$virtu4.getBoundingClientRect();
+    const virtualScrollerRect = (_apiRef$current$virtu3 = apiRef.current.virtualScrollerRef) == null || (_apiRef$current$virtu3 = _apiRef$current$virtu3.current) == null ? void 0 : _apiRef$current$virtu3.getBoundingClientRect();
     if (!virtualScrollerRect) {
       return;
     }
     const {
-      height,
-      width,
       x,
       y
     } = virtualScrollerRect;
+    const {
+      height,
+      width
+    } = dimensions.viewportInnerSize;
     const mouseX = event.clientX - x;
-    const mouseY = event.clientY - y;
+    const mouseY = event.clientY - y - totalHeaderHeight;
     mousePosition.current = {
       x: mouseX,
       y: mouseY
@@ -263,7 +262,7 @@ export const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMDM3MDgwMDAwMA==";
   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/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -64,7 +64,7 @@ export declare const unwrapColumnFromAggregation: ({ column, }: {
     disableReorder?: boolean | undefined;
     disableExport?: boolean | undefined;
     colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<import("@mui/x-data-grid-pro").GridValidRowModel, any, any> | undefined;
-    renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridHeaderFilterCellProps) => React.ReactNode) | undefined;
+    renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode) | undefined;
     aggregable?: boolean | undefined;
     availableAggregationFunctions?: string[] | undefined;
     groupingValueGetter?: import("../../..").GridGroupingValueGetter<import("@mui/x-data-grid-pro").GridValidRowModel> | undefined;

package/hooks/features/cellSelection/useGridCellSelection.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const cellSelectionStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'cellSelectionModel' | 'initialState'>>;
-export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'cellSelection' | 'cellSelectionModel' | 'onCellSelectionModelChange' | 'pagination' | 'paginationMode' | 'ignoreValueFormatterDuringExport' | 'clipboardCopyCellDelimiter'>) => void;
+export declare const useGridCellSelection: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'cellSelection' | 'cellSelectionModel' | 'onCellSelectionModelChange' | 'pagination' | 'paginationMode' | 'ignoreValueFormatterDuringExport' | 'clipboardCopyCellDelimiter' | 'columnHeaderHeight'>) => void;

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -30,6 +30,8 @@ const useGridCellSelection = (apiRef, props) => {
   const mousePosition = React.useRef(null);
   const autoScrollRAF = React.useRef();
   const sortedRowIds = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridSortedRowIdsSelector);
+  const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridDimensionsSelector);
+  const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -176,10 +178,6 @@ const useGridCellSelection = (apiRef, props) => {
     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;
@@ -191,11 +189,10 @@ const useGridCellSelection = (apiRef, props) => {
       const {
         height,
         width
-      } = virtualScrollerRect;
+      } = dimensions.viewportInnerSize;
       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;
@@ -226,7 +223,7 @@ const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef]);
+  }, [apiRef, dimensions]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -244,13 +241,15 @@ const useGridCellSelection = (apiRef, props) => {
       return;
     }
     const {
-      height,
-      width,
       x,
       y
     } = virtualScrollerRect;
+    const {
+      height,
+      width
+    } = dimensions.viewportInnerSize;
     const mouseX = event.clientX - x;
-    const mouseY = event.clientY - y;
+    const mouseY = event.clientY - y - totalHeaderHeight;
     mousePosition.current = {
       x: mouseX,
       y: mouseY
@@ -265,7 +264,7 @@ const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
   const handleCellClick = (0, _utils.useEventCallback)((params, event) => {
     const {
       id,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.0.0-beta.6
+ * @mui/x-data-grid-premium v7.0.0-beta.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/models/gridApiPremium.d.ts

@@ -1,5 +1,5 @@
 import { GridPrivateOnlyApiCommon } from '@mui/x-data-grid/internals';
-import { GridApiCommon, GridColumnPinningApi, GridColumnResizeApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi } from '@mui/x-data-grid-pro';
+import { GridApiCommon, GridColumnPinningApi, GridDetailPanelApi, GridDetailPanelPrivateApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi, GridRowProApi } from '@mui/x-data-grid-pro';
 import { GridInitialStatePremium, GridStatePremium } from './gridStatePremium';
 import type { GridRowGroupingApi, GridExcelExportApi, GridAggregationApi } from '../hooks';
 import { GridCellSelectionApi } from '../hooks/features/cellSelection/gridCellSelectionInterfaces';
@@ -8,7 +8,7 @@ import type { DataGridPremiumProcessedProps } from './dataGridPremiumProps';
  * The api of `DataGridPremium`.
  * TODO: Do not redefine manually the pro features
  */
-export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridColumnResizeApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridCellSelectionApi, GridRowMultiSelectionApi, GridColumnReorderApi {
+export interface GridApiPremium extends GridApiCommon<GridStatePremium, GridInitialStatePremium>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowGroupingApi, GridExcelExportApi, GridAggregationApi, GridRowPinningApi, GridCellSelectionApi, GridRowMultiSelectionApi, GridColumnReorderApi {
 }
 export interface GridPrivateApiPremium extends GridApiPremium, GridPrivateOnlyApiCommon<GridApiPremium, GridPrivateApiPremium, DataGridPremiumProcessedProps>, GridDetailPanelPrivateApi {
 }

package/modern/DataGridPremium/DataGridPremium.js

@@ -288,7 +288,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    lazyLoading: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**
@@ -715,6 +714,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: PropTypes.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 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, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { getTotalHeaderHeight, 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, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from './gridCellSelectionSelector';
 export const cellSelectionStateInitializer = (state, props) => _extends({}, state, {
   cellSelection: _extends({}, props.cellSelectionModel ?? props.initialState?.cellSelection)
@@ -20,6 +20,8 @@ export const useGridCellSelection = (apiRef, props) => {
   const mousePosition = React.useRef(null);
   const autoScrollRAF = React.useRef();
   const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
@@ -166,10 +168,6 @@ export const useGridCellSelection = (apiRef, props) => {
     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;
@@ -181,11 +179,10 @@ export const useGridCellSelection = (apiRef, props) => {
       const {
         height,
         width
-      } = virtualScrollerRect;
+      } = dimensions.viewportInnerSize;
       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;
@@ -216,7 +213,7 @@ export const useGridCellSelection = (apiRef, props) => {
       autoScrollRAF.current = requestAnimationFrame(autoScroll);
     }
     autoScroll();
-  }, [apiRef]);
+  }, [apiRef, dimensions]);
   const handleCellMouseOver = React.useCallback((params, event) => {
     if (!lastMouseDownCell.current) {
       return;
@@ -234,13 +231,15 @@ export const useGridCellSelection = (apiRef, props) => {
       return;
     }
     const {
-      height,
-      width,
       x,
       y
     } = virtualScrollerRect;
+    const {
+      height,
+      width
+    } = dimensions.viewportInnerSize;
     const mouseX = event.clientX - x;
-    const mouseY = event.clientY - y;
+    const mouseY = event.clientY - y - totalHeaderHeight;
     mousePosition.current = {
       x: mouseX,
       y: mouseY
@@ -255,7 +254,7 @@ export const useGridCellSelection = (apiRef, props) => {
       // Mouse has left the sensitivity area while auto scroll is on
       stopAutoScroll();
     }
-  }, [apiRef, startAutoScroll, stopAutoScroll]);
+  }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
   const handleCellClick = useEventCallback((params, event) => {
     const {
       id,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.0.0-beta.6
+ * @mui/x-data-grid-premium v7.0.0-beta.7
  *
  * @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 = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMDM3MDgwMDAwMA==";
   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": "7.0.0-beta.6",
+  "version": "7.0.0-beta.7",
   "description": "The Premium plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -35,8 +35,8 @@
     "@babel/runtime": "^7.24.0",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
-    "@mui/x-data-grid": "7.0.0-beta.6",
-    "@mui/x-data-grid-pro": "7.0.0-beta.6",
+    "@mui/x-data-grid": "7.0.0-beta.7",
+    "@mui/x-data-grid-pro": "7.0.0-beta.7",
     "@mui/x-license": "7.0.0-beta.6",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.0",

package/utils/releaseInfo.js

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