@mui/x-data-grid 8.5.0 → 8.5.1

package/CHANGELOG.md

@@ -5,6 +5,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.1
+
+<!-- generated comparing v8.5.0..master -->
+
+_Jun 5, 2025_
+
+We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Allow exporting pie charts
+- 📚 Documentation improvements
+- 🌎 Improve Portuguese (ptPT) translations on the Data Grid
+- 🌎 Improve Portuguese (ptPT, ptBR) translations on Charts
+- 🌎 Improve Arabic (ar-SD) locale
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions: @moosekebab, @TiagoPortfolio.
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @arminmeh.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.1`
+
+- [DataGrid] Fix `registerPipeProcessor()` for Node v20 (#18241) @arminmeh
+- [DataGrid] Fix background color in column header filler cells (#18188) @KenanYusuf
+- [DataGrid] Keep pipe pre-processors execution order when callback reference changes (#17558) @arminmeh
+- [DataGrid] Use `useComponentRenderer` from x-internals (#18203) @bernardobelchior
+- [l10n] Improve Arabic (ar-SD) locale (#17959) @moosekebab
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#18064) @TiagoPortfolio
+
+#### `@mui/x-data-grid-pro@8.5.1` [![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.5.1`, plus:
+
+- [DataGridPro] Skip rendering detail panels of the rows turned into skeleton rows with lazy loading (#17958) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.1` [![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.5.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.1`
+
+- [pickers] Fix `transformOrigin` resolving based on popper `placement` (#18206) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.5.1` [![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.5.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.1`
+
+- [charts] Allow skipping tooltip render (#18050) @alexfauquette
+- [charts] Fix act warnings in toolbar tests (#18212) @JCQuintas
+- [charts] Fix prop typo in `extendVertically` (#18211) @JCQuintas
+- [charts] Fix responsive height for ChartsWrapper (#18183) @alexfauquette
+- [charts] Improve charts toolbar accessibility (#18056) @bernardobelchior
+- [charts] Let line series propagate null from the dataset (#18223) @alexfauquette
+- [l10n] Add Portuguese locales for charts (pt-PT, pt-BR) (#18069) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.1` [![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.5.1`, plus:
+
+- [charts-pro] Add `linear-sharp` curve as alternative to square edge (#17966) @JCQuintas
+- [charts-pro] Add correct classes to `FunnelSectionLabel` (#18061) @JCQuintas
+- [charts-pro] Allow exporting a pie chart (#18063) @bernardobelchior
+- [charts-pro] Fix initial render for zoom slider selection (#18208) @bernardobelchior
+- [charts-pro] Fix props being passed to DOM in FunnelChart (#18192) @JCQuintas
+- [charts-pro] Show axis value in zoom slider tooltip (#18054) @bernardobelchior
+- [charts-pro] Render the toolbar in the heatmap chart (#18247) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.1` [![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.5.1`.
+
+### Docs
+
+- [docs] Update `valueFormatter` signature in migration guide (#18226) @michelengelen
+
+### Core
+
+- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
+- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
+- chore(deps): bump babel (#18157) @renovate[bot]
+- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
+- chore(deps): bump material ui (#17802) @renovate[bot]
+- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
+- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
+- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
+- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
+- [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
+- [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
+- [code-infra] Remove `istanbul` references (#18194) @JCQuintas
+- [code-infra] Remove codesandbox:ci (#18179) @JCQuintas
+- [code-infra] Replace `mocha` with `vitest` on e2e and regression tests (#18071) @JCQuintas
+- [code-infra] Upgrade @mui/internal-test-utils (#18191) @JCQuintas
+- [code-infra] Use vitest for `no-direct-state-access` tests (#18209) @JCQuintas
+- [infra] Improve test setup (#18228) @LukasTy
+- [infra] Update bug and feature request templates to standardize label types (#18198) @michelengelen
+- [infra] Use `playwright` docker image (#18186) @LukasTy
+
 ## 8.5.0
 
 _May 29, 2025_

package/components/columnsPanel/ColumnsPanelTrigger.d.ts

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

package/components/columnsPanel/ColumnsPanelTrigger.js

@@ -13,11 +13,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _GridPanelContext = require("../panel/GridPanelContext");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick", "onPointerUp"];
 /**
@@ -68,7 +68,7 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
     }
     onPointerUp?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,

package/components/containers/GridRootStyles.d.ts

@@ -1,5 +1,5 @@
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/components/containers/GridRootStyles.js

@@ -832,6 +832,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       marginRight: _cssVariables.vars.spacing(2)
     },
     /* ScrollbarFiller styles */
+    [`& .${_gridClasses.gridClasses.columnHeaders} .${_gridClasses.gridClasses.scrollbarFiller}`]: {
+      backgroundColor: headerBackground
+    },
     [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
@@ -853,6 +856,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
+    [`& .${_gridClasses.gridClasses.columnHeaders} .${_gridClasses.gridClasses.filler}`]: {
+      backgroundColor: headerBackground
+    },
     /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
     [`& .${_gridClasses.gridClasses['main--hiddenContent']}`]: {
       [`& .${_gridClasses.gridClasses.virtualScrollerContent}`]: {

package/components/export/ExportCsv.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { GridCsvExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportCsvProps = GridSlotProps['baseButton'] & {

package/components/export/ExportCsv.js

@@ -11,9 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "options", "onClick"];
 /**
@@ -41,7 +41,7 @@ const ExportCsv = exports.ExportCsv = (0, _forwardRef.forwardRef)(function Expor
     apiRef.current.exportDataAsCsv(options);
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref

package/components/export/ExportPrint.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { GridPrintExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportPrintProps = GridSlotProps['baseButton'] & {

package/components/export/ExportPrint.js

@@ -11,9 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "options", "onClick"];
 /**
@@ -41,7 +41,7 @@ const ExportPrint = exports.ExportPrint = (0, _forwardRef.forwardRef)(function E
     apiRef.current.exportDataAsPrint(options);
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref

package/components/filterPanel/FilterPanelTrigger.d.ts

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

package/components/filterPanel/FilterPanelTrigger.js

@@ -12,12 +12,12 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _GridPanelContext = require("../panel/GridPanelContext");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick", "onPointerUp"];
 /**
@@ -71,7 +71,7 @@ const FilterPanelTrigger = exports.FilterPanelTrigger = (0, _forwardRef.forwardR
     }
     onPointerUp?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,

package/components/quickFilter/QuickFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { QuickFilterState } from "./QuickFilterContext.js";
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from "../../models/index.js";
 export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**

package/components/quickFilter/QuickFilter.js

@@ -14,8 +14,8 @@ var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _filter = require("../../hooks/features/filter");
@@ -137,7 +137,7 @@ function QuickFilter(props) {
       ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
     }
   }, []);
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)('div', render, (0, _extends2.default)({
+  const element = (0, _useComponentRenderer.useComponentRenderer)('div', render, (0, _extends2.default)({
     className: resolvedClassName
   }, other, {
     ref

package/components/quickFilter/QuickFilterClear.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterClearProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {

package/components/quickFilter/QuickFilterClear.js

@@ -11,8 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick"];
@@ -45,7 +45,7 @@ const QuickFilterClear = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(
     clearValue();
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
     className: resolvedClassName,
     tabIndex: -1
   }, other, {

package/components/quickFilter/QuickFilterControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterControlProps = Omit<GridSlotProps['baseTextField'], 'className'> & {

package/components/quickFilter/QuickFilterControl.js

@@ -12,8 +12,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "slotProps", "onKeyDown", "onChange"];
@@ -72,7 +72,7 @@ const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardR
     onValueChange(event);
     onChange?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseTextField, render, (0, _extends2.default)({}, rootProps.slotProps?.baseTextField, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseTextField, render, (0, _extends2.default)({}, rootProps.slotProps?.baseTextField, {
     slotProps: (0, _extends2.default)({
       htmlInput: (0, _extends2.default)({
         role: 'searchbox',

package/components/quickFilter/QuickFilterTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {

package/components/quickFilter/QuickFilterTrigger.js

@@ -11,9 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick"];
@@ -49,7 +49,7 @@ const QuickFilterTrigger = exports.QuickFilterTrigger = (0, _forwardRef.forwardR
     onExpandedChange(!state.expanded);
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     className: resolvedClassName,
     'aria-controls': controlId,
     'aria-expanded': state.expanded

package/components/toolbarV8/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.

package/components/toolbarV8/Toolbar.js

@@ -14,9 +14,9 @@ var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _ToolbarContext = require("./ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _utils = require("./utils");
@@ -187,7 +187,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     onItemFocus,
     onItemDisabled
   }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
+  const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
     'aria-label': rootProps.label || undefined,

package/components/toolbarV8/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
   /**

package/components/toolbarV8/ToolbarButton.js

@@ -13,8 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _ToolbarContext = require("./ToolbarContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
@@ -78,7 +78,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
     }
     previousAriaDisabled.current = ariaDisabled;
   }, [ariaDisabled, id, onItemDisabled]);
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
     tabIndex: focusableItemId === id ? 0 : -1
   }, other, {
     disabled,

package/esm/components/columnsPanel/ColumnsPanelTrigger.d.ts

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

package/esm/components/columnsPanel/ColumnsPanelTrigger.js

@@ -6,11 +6,11 @@ import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that opens and closes the columns panel.
@@ -60,7 +60,7 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
     }
     onPointerUp?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,

package/esm/components/containers/GridRootStyles.d.ts

@@ -1,5 +1,5 @@
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
-export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/esm/components/containers/GridRootStyles.js

@@ -826,6 +826,9 @@ export const GridRootStyles = styled('div', {
       marginRight: vars.spacing(2)
     },
     /* ScrollbarFiller styles */
+    [`& .${c.columnHeaders} .${c.scrollbarFiller}`]: {
+      backgroundColor: headerBackground
+    },
     [`.${c.scrollbarFiller}`]: {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
@@ -847,6 +850,9 @@ export const GridRootStyles = styled('div', {
     [`& .${c['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
+    [`& .${c.columnHeaders} .${c.filler}`]: {
+      backgroundColor: headerBackground
+    },
     /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
     [`& .${c['main--hiddenContent']}`]: {
       [`& .${c.virtualScrollerContent}`]: {

package/esm/components/export/ExportCsv.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { GridCsvExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportCsvProps = GridSlotProps['baseButton'] & {

package/esm/components/export/ExportCsv.js

@@ -4,9 +4,9 @@ const _excluded = ["render", "options", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that triggers a CSV export.
@@ -33,7 +33,7 @@ const ExportCsv = forwardRef(function ExportCsv(props, ref) {
     apiRef.current.exportDataAsCsv(options);
     onClick?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref

package/esm/components/export/ExportPrint.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { GridPrintExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportPrintProps = GridSlotProps['baseButton'] & {

package/esm/components/export/ExportPrint.js

@@ -4,9 +4,9 @@ const _excluded = ["render", "options", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that triggers a print export.
@@ -33,7 +33,7 @@ const ExportPrint = forwardRef(function ExportPrint(props, ref) {
     apiRef.current.exportDataAsPrint(options);
     onClick?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     onClick: handleClick
   }, other, {
     ref

package/esm/components/filterPanel/FilterPanelTrigger.d.ts

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

package/esm/components/filterPanel/FilterPanelTrigger.js

@@ -5,12 +5,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import useForkRef from '@mui/utils/useForkRef';
 import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridFilterActiveItemsSelector, gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that opens and closes the filter panel.
@@ -63,7 +63,7 @@ const FilterPanelTrigger = forwardRef(function FilterPanelTrigger(props, ref) {
     }
     onPointerUp?.(event);
   };
-  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+  const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
     id: buttonId,
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,

package/esm/components/quickFilter/QuickFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { QuickFilterState } from "./QuickFilterContext.js";
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from "../../models/index.js";
 export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**

package/esm/components/quickFilter/QuickFilter.js

@@ -7,8 +7,8 @@ import debounce from '@mui/utils/debounce';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { QuickFilterContext } from "./QuickFilterContext.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
@@ -129,7 +129,7 @@ function QuickFilter(props) {
       ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
     }
   }, []);
-  const element = useGridComponentRenderer('div', render, _extends({
+  const element = useComponentRenderer('div', render, _extends({
     className: resolvedClassName
   }, other, {
     ref