@mui/x-data-grid 8.29.1 → 8.29.3

package/CHANGELOG.md

@@ -5,6 +5,163 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.29.3
+
+_Aug 21, 2026_
+
+We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@LukasTy, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.29.3`
+
+- [DataGrid] Fix toolbar button stealing focus when a sibling's disabled state changes (#23265) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.29.3` [![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@8.29.3`.
+
+#### `@mui/x-data-grid-premium@8.29.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-data-grid-pro@8.29.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.29.3`
+
+- [fields] Keep the field editable on blank space clicks (#23372) @LukasTy
+- [pickers] Fix format placeholder brightness with a start adornment (#23205) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.29.3` [![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@8.29.3`, plus:
+
+- [DateRangePicker] Fix broken active range position underline in single input range fields (#23201) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@8.29.3`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.29.3` [![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@8.29.3`.
+
+#### `@mui/x-charts-premium@8.29.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-charts-pro@8.29.3`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.29.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.29.3` [![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@8.29.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.29.3`
+
+Internal changes.
+
+### Miscellaneous
+
+- [core] Fix `test-react-18` install failure on v8.x (#23202) @LukasTy
+
+## 8.29.2
+
+_Jul 2, 2026_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @timbuckley
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @brijeshb42, @cherniavskii, @LukasTy, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.29.2`
+
+- [DataGrid] Avoid reading `type` of `undefined` in `gridRowUtils` (#22963) @timbuckley
+- [DataGrid] Define `overflowAnchor` style at the right element (#22860) @arminmeh
+- [DataGrid] Fix panel placement jump on mount (#22946) @cherniavskii
+- [DataGrid] Fix scrollbars not showing up on scroll on iOS (#22884) @cherniavskii
+- [DataGrid] Wait for rows before reacting on `autosizeOnMount` (#22886) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.29.2` [![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@8.29.2`.
+
+#### `@mui/x-data-grid-premium@8.29.2` [![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@8.29.2`, plus:
+
+- [DataGridPremium] Escape `singleSelect` values in Excel export with `escapeFormulas` enabled (#22966) @Anexus5919
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.29.2`
+
+- [pickers] Fix localized digit crash (#23010) @alexfauquette
+- [pickers] Respect explicit `notched` prop on the outlined `PickersTextField` (#22875) (#22893) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.29.2` [![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@8.29.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.29.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.29.2` [![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@8.29.2`.
+
+#### `@mui/x-charts-premium@8.29.2` [![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@8.29.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.29.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.29.2` [![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@8.29.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.29.2`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Pin mui-public actions to nearest git hash (#22824) @brijeshb42
+- [internal] Switch resolutions to workspace overrides (#22865) @cherniavskii
+
+### Miscellaneous
+
+- [virtualizer] Improve the dimensions' initial state (#22890) @arminmeh
+- [virtualizer] Remeasure scrollbars when layout changes (#23003) @arminmeh
+
 ## 8.29.1
 
 _Jun 11, 2026_

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/GridRootStyles.js

@@ -126,11 +126,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflow: 'hidden',
-    overflowAnchor: 'none',
-    // Keep the same scrolling position
     transform: 'translate(0, 0)',
     // Create a stacking context to keep scrollbars from showing on top
 
+    [`& .${_gridClasses.gridClasses.virtualScroller}`]: {
+      overflowAnchor: 'none' // Keep the same scrolling position
+    },
     [`.${_gridClasses.gridClasses.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'

package/components/containers/GridRootStyles.mjs

@@ -120,11 +120,12 @@ export const GridRootStyles = styled('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflow: 'hidden',
-    overflowAnchor: 'none',
-    // Keep the same scrolling position
     transform: 'translate(0, 0)',
     // Create a stacking context to keep scrollbars from showing on top
 
+    [`& .${c.virtualScroller}`]: {
+      overflowAnchor: 'none' // Keep the same scrolling position
+    },
     [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'

package/components/filterPanel/FilterPanelTrigger.js

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

package/components/filterPanel/FilterPanelTrigger.mjs

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

package/components/panel/GridPanelContext.d.mts

@@ -1,8 +1,14 @@
 import * as React from 'react';
+export interface GridPanelTrigger {
+  setRef: (instance: HTMLElement | null) => void;
+  element: HTMLElement | null;
+}
 export interface GridPanelContextValue {
-  columnsPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  filterPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  aiAssistantPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+  triggers: {
+    filterPanel: GridPanelTrigger;
+    aiAssistantPanel: GridPanelTrigger;
+    columnsPanel: GridPanelTrigger;
+  };
 }
 export declare const GridPanelContext: React.Context<GridPanelContextValue | undefined>;
 export declare function useGridPanelContext(): GridPanelContextValue;

package/components/panel/GridPanelContext.d.ts

@@ -1,8 +1,14 @@
 import * as React from 'react';
+export interface GridPanelTrigger {
+  setRef: (instance: HTMLElement | null) => void;
+  element: HTMLElement | null;
+}
 export interface GridPanelContextValue {
-  columnsPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  filterPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  aiAssistantPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+  triggers: {
+    filterPanel: GridPanelTrigger;
+    aiAssistantPanel: GridPanelTrigger;
+    columnsPanel: GridPanelTrigger;
+  };
 }
 export declare const GridPanelContext: React.Context<GridPanelContextValue | undefined>;
 export declare function useGridPanelContext(): GridPanelContextValue;

package/components/panel/GridPanelContext.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridPanelContext = void 0;
 exports.GridPanelContextProvider = GridPanelContextProvider;
 exports.useGridPanelContext = useGridPanelContext;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const GridPanelContext = exports.GridPanelContext = /*#__PURE__*/React.createContext(undefined);
@@ -22,14 +24,46 @@ function useGridPanelContext() {
 function GridPanelContextProvider({
   children
 }) {
-  const columnsPanelTriggerRef = React.useRef(null);
-  const filterPanelTriggerRef = React.useRef(null);
-  const aiAssistantPanelTriggerRef = React.useRef(null);
+  const [triggerElements, setTriggerElements] = React.useState({
+    columnsPanel: null,
+    filterPanel: null,
+    aiAssistantPanel: null
+  });
+  const updateTriggerElement = React.useCallback((key, instance) => {
+    setTriggerElements(prev => {
+      if (prev[key] === instance) {
+        return prev;
+      }
+      return (0, _extends2.default)({}, prev, {
+        [key]: instance
+      });
+    });
+  }, []);
+  const setColumnsPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('columnsPanel', instance);
+  }, [updateTriggerElement]);
+  const setFilterPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('filterPanel', instance);
+  }, [updateTriggerElement]);
+  const setAiAssistantPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('aiAssistantPanel', instance);
+  }, [updateTriggerElement]);
   const value = React.useMemo(() => ({
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
-  }), []);
+    triggers: {
+      columnsPanel: {
+        element: triggerElements.columnsPanel,
+        setRef: setColumnsPanelTrigger
+      },
+      filterPanel: {
+        element: triggerElements.filterPanel,
+        setRef: setFilterPanelTrigger
+      },
+      aiAssistantPanel: {
+        element: triggerElements.aiAssistantPanel,
+        setRef: setAiAssistantPanelTrigger
+      }
+    }
+  }), [triggerElements, setColumnsPanelTrigger, setFilterPanelTrigger, setAiAssistantPanelTrigger]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContext.Provider, {
     value: value,
     children: children

package/components/panel/GridPanelContext.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
@@ -14,14 +15,46 @@ export function useGridPanelContext() {
 export function GridPanelContextProvider({
   children
 }) {
-  const columnsPanelTriggerRef = React.useRef(null);
-  const filterPanelTriggerRef = React.useRef(null);
-  const aiAssistantPanelTriggerRef = React.useRef(null);
+  const [triggerElements, setTriggerElements] = React.useState({
+    columnsPanel: null,
+    filterPanel: null,
+    aiAssistantPanel: null
+  });
+  const updateTriggerElement = React.useCallback((key, instance) => {
+    setTriggerElements(prev => {
+      if (prev[key] === instance) {
+        return prev;
+      }
+      return _extends({}, prev, {
+        [key]: instance
+      });
+    });
+  }, []);
+  const setColumnsPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('columnsPanel', instance);
+  }, [updateTriggerElement]);
+  const setFilterPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('filterPanel', instance);
+  }, [updateTriggerElement]);
+  const setAiAssistantPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('aiAssistantPanel', instance);
+  }, [updateTriggerElement]);
   const value = React.useMemo(() => ({
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
-  }), []);
+    triggers: {
+      columnsPanel: {
+        element: triggerElements.columnsPanel,
+        setRef: setColumnsPanelTrigger
+      },
+      filterPanel: {
+        element: triggerElements.filterPanel,
+        setRef: setFilterPanelTrigger
+      },
+      aiAssistantPanel: {
+        element: triggerElements.aiAssistantPanel,
+        setRef: setAiAssistantPanelTrigger
+      }
+    }
+  }), [triggerElements, setColumnsPanelTrigger, setFilterPanelTrigger, setAiAssistantPanelTrigger]);
   return /*#__PURE__*/_jsx(GridPanelContext.Provider, {
     value: value,
     children: children

package/components/panel/GridPreferencesPanel.js

@@ -20,21 +20,19 @@ function GridPreferencesPanel() {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const {
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
   let target = null;
   switch (preferencePanelState.openedPanelValue) {
     case _gridPreferencePanelsValue.GridPreferencePanelsValue.filters:
-      target = filterPanelTriggerRef.current;
+      target = triggers.filterPanel.element;
       break;
     case _gridPreferencePanelsValue.GridPreferencePanelsValue.columns:
-      target = columnsPanelTriggerRef.current;
+      target = triggers.columnsPanel.element;
       break;
     case _gridPreferencePanelsValue.GridPreferencePanelsValue.aiAssistant:
-      target = aiAssistantPanelTriggerRef.current;
+      target = triggers.aiAssistantPanel.element;
       break;
     default:
   }

package/components/panel/GridPreferencesPanel.mjs

@@ -13,21 +13,19 @@ export function GridPreferencesPanel() {
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const {
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
+    triggers
   } = useGridPanelContext();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
   let target = null;
   switch (preferencePanelState.openedPanelValue) {
     case GridPreferencePanelsValue.filters:
-      target = filterPanelTriggerRef.current;
+      target = triggers.filterPanel.element;
       break;
     case GridPreferencePanelsValue.columns:
-      target = columnsPanelTriggerRef.current;
+      target = triggers.columnsPanel.element;
       break;
     case GridPreferencePanelsValue.aiAssistant:
-      target = aiAssistantPanelTriggerRef.current;
+      target = triggers.aiAssistantPanel.element;
       break;
     default:
   }

package/components/toolbar/GridToolbarColumnsButton.js

@@ -34,10 +34,10 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-    columnsPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
-  const handleRef = (0, _useForkRef.default)(ref, columnsPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.columnsPanel.setRef);
   const showColumns = event => {
     if (preferencePanel.open && preferencePanel.openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();

package/components/toolbar/GridToolbarColumnsButton.mjs

@@ -27,10 +27,10 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const {
-    columnsPanelTriggerRef
+    triggers
   } = useGridPanelContext();
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const handleRef = useForkRef(ref, columnsPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.columnsPanel.setRef);
   const showColumns = event => {
     if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();

package/components/toolbar/GridToolbarFilterButton.js

@@ -62,9 +62,9 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
   const filterButtonId = (0, _useId.default)();
   const filterPanelId = (0, _useId.default)();
   const {
-    filterPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
-  const handleRef = (0, _useForkRef.default)(ref, filterPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.filterPanel.setRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');

package/components/toolbar/GridToolbarFilterButton.mjs

@@ -55,9 +55,9 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
   const filterButtonId = useId();
   const filterPanelId = useId();
   const {
-    filterPanelTriggerRef
+    triggers
   } = useGridPanelContext();
-  const handleRef = useForkRef(ref, filterPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.filterPanel.setRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');

package/components/toolbarV8/Toolbar.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';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.

package/components/toolbarV8/Toolbar.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';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.