@mui/x-data-grid 9.6.0 → 9.7.0

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # Changelog
 
+## 9.7.0
+
+_Jun 25, 2026_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @mustafajw07
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @brijeshb42, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.7.0`
+
+- [DataGrid] Fix `CustomColumnMenuGrid` demo crashing (#22897) @sai6855
+- [DataGrid] Fix crash in `getRowValue` when `colDef` is `undefined` (#22838) @LukasTy
+- [DataGrid] Fix `longText` expand button submitting surrounding form (#22450) @siriwatknp
+- [DataGrid] Remove filename ignore list from `removePropTypesPlugin` in Babel config (#22727) @sai6855
+- [DataGrid] Deduplicate scroll-preserving focus logic (#22916) @sai6855
+- [DataGrid] Fix `singleSelect` clearing to use empty string instead of `null` (#22881) @michelengelen
+- [DataGrid] Wait for rows before reacting on `autosizeOnMount` (#22698) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@9.7.0` [![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@9.7.0`.
+
+#### `@mui/x-data-grid-premium@9.7.0` [![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@9.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.7.0`
+
+- [fields] Announce cardinal day in the day section `aria-valuetext` (#22922) @LukasTy
+- [fields] Avoid focusing the field on blank space clicks (#22285) @LukasTy
+- [pickers] Commit `TimeClock` value when the drag ends outside the clock (#22877) @LukasTy
+- [pickers] Respect explicit `notched` prop on the outlined PickersTextField (#22875) @LukasTy
+
+#### `@mui/x-date-pickers-pro@9.7.0` [![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@9.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.7.0`
+
+- [charts] Add demo for displaying the sum of all values from the stacked series on top of the stacked bars (#22879) @sai6855
+- [charts] Add `zAxis` custom scatter component demo (#22746) @mustafajw07
+- [charts] Apply axis `colorMap` to radial bar fill (#22800) @JCQuintas
+- [charts] Simplify classes type (#22626) @alexfauquette
+- [charts] Stable progressive scatter batching + responsive zoom/pan (#22862) @JCQuintas
+- [charts] Strip dev-only console diagnostics from production (#22917) @sai6855
+- [docs] Fix scatter renderer table blocking column (#22904) @JCQuintas
+- [docs] Make `ScatterAsyncRenderer` button bar responsive (#22905) @JCQuintas
+
+#### `@mui/x-charts-pro@9.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.7.0`.
+
+#### `@mui/x-charts-premium@9.7.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.7.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.7.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.7.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.3`
+
+- [scheduler] Highlight only the edited occurrence of a recurring event (#22873) @Anexus5919
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.7.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Fix react@^18 CI failing on nanoid trust-downgrade (#22923) @LukasTy
+- [code-infra] Reduce Netlify build parallelism to 2 (#22925) @LukasTy
+- [code-infra] Use Turbopack for docs in dev (#22882) @brijeshb42
+- [docs-infra] Pre-render API page descriptions (#22919) @brijeshb42
+- [internal] Use `@base-ui/utils/platform` for platform detection (#22710) @romgrk
+- [internal] Enforce top-level type imports (#22679) @Janpot
+
+### Miscellaneous
+
+- [internal] Enable mui/no-floating-cleanup and fix leaks (#22872) @romgrk
+- [infra] Update `.gitignore` to exclude `.claude` sub-directories (#22435) @michelengelen
+- [virtualizer] Improve the dimensions' initial state (#22885) @arminmeh
+
 ## 9.6.0
 
 _Jun 18, 2026_
@@ -115,7 +225,7 @@ Same changes as in `@mui/x-scheduler@9.0.0-beta.2`, plus:
 
 - [scheduler-premium] Expose premium model types through public API (#22798) @mustafajw07
 - [scheduler-premium] Remove non-functional `onPreferencesChange` prop from `EventTimelinePremium` (#22777) @rita-codes
-- [scheduler-premium] Validate the `FREQ` value in `parseRRule`] (#22786) @rita-codes 
+- [scheduler-premium] Validate the `FREQ` value in `parseRRule`] (#22786) @rita-codes
 
 ### Codemod
 

package/DataGrid/DataGrid.js

@@ -66,7 +66,7 @@ if (process.env.NODE_ENV !== "production") DataGridRaw.displayName = "DataGridRa
  */
 const DataGrid = exports.DataGrid = /*#__PURE__*/React.memo((0, _forwardRef.forwardRef)(DataGridRaw));
 if (process.env.NODE_ENV !== "production") DataGrid.displayName = "DataGrid";
-DataGridRaw.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? DataGridRaw.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -891,4 +891,4 @@ DataGridRaw.propTypes /* remove-proptypes */ = {
    * @default false
    */
   virtualizeColumnsWithAutoRowHeight: _propTypes.default.bool
-};
+} : void 0;

package/DataGrid/DataGrid.mjs

@@ -59,7 +59,7 @@ if (process.env.NODE_ENV !== "production") DataGridRaw.displayName = "DataGridRa
  */
 export const DataGrid = /*#__PURE__*/React.memo(forwardRef(DataGridRaw));
 if (process.env.NODE_ENV !== "production") DataGrid.displayName = "DataGrid";
-DataGridRaw.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? DataGridRaw.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -884,4 +884,4 @@ DataGridRaw.propTypes /* remove-proptypes */ = {
    * @default false
    */
   virtualizeColumnsWithAutoRowHeight: PropTypes.bool
-};
+} : void 0;

package/colDef/gridDateOperators.d.mts

@@ -1,3 +1,3 @@
-import { type GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.mjs";
+import type { GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.mjs";
 import type { GridFilterOperator } from "../models/gridFilterOperator.mjs";
 export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any, GridFilterInputDateProps>[];

package/colDef/gridDateOperators.d.ts

@@ -1,3 +1,3 @@
-import { type GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.js";
+import type { GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.js";
 import type { GridFilterOperator } from "../models/gridFilterOperator.js";
 export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any, GridFilterInputDateProps>[];

package/components/GridColumnHeaders.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.mjs";
+import type { UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.mjs";
 export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
   ref?: React.Ref<HTMLDivElement>;
 }

package/components/GridColumnHeaders.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+import type { UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
   ref?: React.Ref<HTMLDivElement>;
 }

package/components/GridFooter.d.mts

@@ -1,4 +1,4 @@
-import { type GridFooterContainerProps } from "./containers/GridFooterContainer.mjs";
+import type { GridFooterContainerProps } from "./containers/GridFooterContainer.mjs";
 declare const GridFooter: import("react").ForwardRefExoticComponent<GridFooterContainerProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridFooter.d.ts

@@ -1,4 +1,4 @@
-import { type GridFooterContainerProps } from "./containers/GridFooterContainer.js";
+import type { GridFooterContainerProps } from "./containers/GridFooterContainer.js";
 declare const GridFooter: import("react").ForwardRefExoticComponent<GridFooterContainerProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridLoadingOverlay.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GridOverlayProps } from "./containers/GridOverlay.mjs";
+import type { GridOverlayProps } from "./containers/GridOverlay.mjs";
 import type { GridLoadingOverlayVariant } from "../hooks/features/overlays/gridOverlaysInterfaces.mjs";
 export interface GridLoadingOverlayProps extends GridOverlayProps {
   /**

package/components/GridLoadingOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GridOverlayProps } from "./containers/GridOverlay.js";
+import type { GridOverlayProps } from "./containers/GridOverlay.js";
 import type { GridLoadingOverlayVariant } from "../hooks/features/overlays/gridOverlaysInterfaces.js";
 export interface GridLoadingOverlayProps extends GridOverlayProps {
   /**

package/components/GridNoColumnsOverlay.d.mts

@@ -1,4 +1,4 @@
-import { type GridOverlayProps } from "./containers/GridOverlay.mjs";
+import type { GridOverlayProps } from "./containers/GridOverlay.mjs";
 declare const GridNoColumnsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridNoColumnsOverlay.d.ts

@@ -1,4 +1,4 @@
-import { type GridOverlayProps } from "./containers/GridOverlay.js";
+import type { GridOverlayProps } from "./containers/GridOverlay.js";
 declare const GridNoColumnsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridNoResultsOverlay.d.mts

@@ -1,4 +1,4 @@
-import { type GridOverlayProps } from "./containers/GridOverlay.mjs";
+import type { GridOverlayProps } from "./containers/GridOverlay.mjs";
 export declare const GridNoResultsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridNoResultsOverlay.d.ts

@@ -1,4 +1,4 @@
-import { type GridOverlayProps } from "./containers/GridOverlay.js";
+import type { GridOverlayProps } from "./containers/GridOverlay.js";
 export declare const GridNoResultsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridNoRowsOverlay.d.mts

@@ -1,4 +1,4 @@
-import { type GridOverlayProps } from "./containers/GridOverlay.mjs";
+import type { GridOverlayProps } from "./containers/GridOverlay.mjs";
 declare const GridNoRowsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridNoRowsOverlay.d.ts

@@ -1,4 +1,4 @@
-import { type GridOverlayProps } from "./containers/GridOverlay.js";
+import type { GridOverlayProps } from "./containers/GridOverlay.js";
 declare const GridNoRowsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/GridRowCount.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 interface RowCountProps {
   rowCount: number;
   visibleRowCount: number;

package/components/GridRowCount.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 interface RowCountProps {
   rowCount: number;
   visibleRowCount: number;

package/components/GridSelectedRowCount.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 interface SelectedRowCountProps {
   selectedRowCount: number;
 }

package/components/GridSelectedRowCount.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 interface SelectedRowCountProps {
   selectedRowCount: number;
 }

package/components/cell/GridActionsCell.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { GridRowParams } from "../../models/params/gridRowParams.mjs";
 import type { GridRenderCellParams } from "../../models/params/gridCellParams.mjs";
-import { type GridMenuProps } from "../menu/GridMenu.mjs";
+import type { GridMenuProps } from "../menu/GridMenu.mjs";
 import type { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.mjs";
 interface GridActionsCellProps<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridRenderCellParams<R, V, F, N>, 'api'> {
   api?: GridRenderCellParams['api'];

package/components/cell/GridActionsCell.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { GridRowParams } from "../../models/params/gridRowParams.js";
 import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
-import { type GridMenuProps } from "../menu/GridMenu.js";
+import type { GridMenuProps } from "../menu/GridMenu.js";
 import type { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.js";
 interface GridActionsCellProps<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridRenderCellParams<R, V, F, N>, 'api'> {
   api?: GridRenderCellParams['api'];

package/components/cell/GridCell.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GridRowId } from "../../models/index.mjs";
+import type { GridRowId } from "../../models/index.mjs";
 import type { GridAlignment, GridStateColDef } from "../../models/colDef/gridColDef.mjs";
 import type { GridRowModel, GridTreeNode } from "../../models/gridRows.mjs";
 import { PinnedColumnPosition } from "../../internals/constants.mjs";

package/components/cell/GridCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GridRowId } from "../../models/index.js";
+import type { GridRowId } from "../../models/index.js";
 import type { GridAlignment, GridStateColDef } from "../../models/colDef/gridColDef.js";
 import type { GridRowModel, GridTreeNode } from "../../models/gridRows.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";

package/components/cell/GridCell.js

@@ -22,7 +22,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _store = require("@mui/x-internals/store");
 var _xVirtualizer = require("@mui/x-virtualizer");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
+var _focusElement = require("../../utils/focusElement");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -233,15 +233,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || cellRef.current;
-      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      (0, _focusElement.focusElement)(elementToFocus, apiRef);
     }
   }, [hasFocus, cellMode, apiRef]);
   if (isCellRowSpanned) {

package/components/cell/GridCell.mjs

@@ -17,7 +17,7 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useStore } from '@mui/x-internals/store';
 import { Rowspan } from '@mui/x-virtualizer';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.mjs";
+import { focusElement } from "../../utils/focusElement.mjs";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.mjs";
 import { GridCellModes } from "../../models/index.mjs";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
@@ -226,15 +226,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || cellRef.current;
-      if (doesSupportPreventScroll()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      focusElement(elementToFocus, apiRef);
     }
   }, [hasFocus, cellMode, apiRef]);
   if (isCellRowSpanned) {

package/components/cell/GridFooterCell.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import type { GridRenderCellParams } from "../../models/params/gridCellParams.mjs";
 interface GridFooterCellProps extends GridRenderCellParams {
   sx?: SxProps<Theme>;

package/components/cell/GridFooterCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 interface GridFooterCellProps extends GridRenderCellParams {
   sx?: SxProps<Theme>;

package/components/columnHeaders/GridBaseColumnHeaders.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
   sx?: SxProps<Theme>;
 }

package/components/columnHeaders/GridBaseColumnHeaders.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
   sx?: SxProps<Theme>;
 }

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -14,7 +14,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
-var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
+var _focusElement = require("../../utils/focusElement");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
@@ -102,15 +102,7 @@ function GridColumnGroupHeader(props) {
       if (!elementToFocus) {
         return;
       }
-      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      (0, _focusElement.focusElement)(elementToFocus, apiRef);
     }
   }, [apiRef, hasFocus]);
   const publish = React.useCallback(eventName => event => {

package/components/columnHeaders/GridColumnGroupHeader.mjs

@@ -7,7 +7,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
-import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.mjs";
+import { focusElement } from "../../utils/focusElement.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { gridColumnGroupsLookupSelector } from "../../hooks/features/columnGrouping/gridColumnGroupsSelector.mjs";
@@ -95,15 +95,7 @@ function GridColumnGroupHeader(props) {
       if (!elementToFocus) {
         return;
       }
-      if (doesSupportPreventScroll()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      focusElement(elementToFocus, apiRef);
     }
   }, [apiRef, hasFocus]);
   const publish = React.useCallback(eventName => event => {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -16,7 +16,7 @@ var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
+var _focusElement = require("../../utils/focusElement");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _getColumnMenuItemKeys = require("../../hooks/features/columnMenu/getColumnMenuItemKeys");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
@@ -209,15 +209,7 @@ function GridColumnHeaderItem(props) {
       if (!elementToFocus) {
         return;
       }
-      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      (0, _focusElement.focusElement)(elementToFocus, apiRef);
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/components/columnHeaders/GridColumnHeaderItem.mjs

@@ -9,7 +9,7 @@ import capitalize from '@mui/utils/capitalize';
 import useId from '@mui/utils/useId';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
-import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.mjs";
+import { focusElement } from "../../utils/focusElement.mjs";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
 import { getColumnMenuItemKeys } from "../../hooks/features/columnMenu/getColumnMenuItemKeys.mjs";
 import { ColumnHeaderMenuIcon } from "./ColumnHeaderMenuIcon.mjs";
@@ -202,15 +202,7 @@ function GridColumnHeaderItem(props) {
       if (!elementToFocus) {
         return;
       }
-      if (doesSupportPreventScroll()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      focusElement(elementToFocus, apiRef);
     }
   }, [apiRef, hasFocus]);
   const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({

package/components/columnHeaders/GridColumnHeaderSortIcon.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GridColumnSortButtonProps } from "../GridColumnSortButton.mjs";
+import type { GridColumnSortButtonProps } from "../GridColumnSortButton.mjs";
 export interface GridColumnHeaderSortIconProps extends GridColumnSortButtonProps {}
 declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridColumnHeaderSortIconRaw {

package/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type GridColumnSortButtonProps } from "../GridColumnSortButton.js";
+import type { GridColumnSortButtonProps } from "../GridColumnSortButton.js";
 export interface GridColumnHeaderSortIconProps extends GridColumnSortButtonProps {}
 declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridColumnHeaderSortIconRaw {

package/components/columnHeaders/GridGenericColumnHeaderItem.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { GridStateColDef } from "../../models/colDef/gridColDef.mjs";
 import type { GridSortDirection } from "../../models/gridSortModel.mjs";
-import { type GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.mjs";
+import type { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.mjs";
 import type { GridColumnGroup } from "../../models/gridColumnGrouping.mjs";
 interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
   classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { GridStateColDef } from "../../models/colDef/gridColDef.js";
 import type { GridSortDirection } from "../../models/gridSortModel.js";
-import { type GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
+import type { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
 import type { GridColumnGroup } from "../../models/gridColumnGrouping.js";
 interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
   classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;

package/components/columnsPanel/ColumnsPanelTrigger.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.mjs";
 export interface ColumnsPanelState {
   /**

package/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface ColumnsPanelState {
   /**

package/components/columnsPanel/ColumnsPanelTrigger.js

@@ -51,9 +51,9 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
-    columnsPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
-  const handleRef = (0, _useForkRef.default)(ref, columnsPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.columnsPanel.setRef);
   const handleClick = event => {
     if (open) {
       apiRef.current.hidePreferences();

package/components/columnsPanel/ColumnsPanelTrigger.mjs

@@ -43,9 +43,9 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
-    columnsPanelTriggerRef
+    triggers
   } = useGridPanelContext();
-  const handleRef = useForkRef(ref, columnsPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.columnsPanel.setRef);
   const handleClick = event => {
     if (open) {
       apiRef.current.hidePreferences();

package/components/containers/GridFooterContainer.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };

package/components/containers/GridFooterContainer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };