@mui/x-data-grid 8.4.0 → 8.5.0

package/CHANGELOG.md

@@ -5,6 +5,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.0
+
+_May 29, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add support for exporting `RadarChartPro`, `FunnelChart` and `Heatmap` as image and PDF.
+- 📊 `RadarChart` is now stable.
+
+Special thanks go out to the community members for their valuable contributions:
+@xBlizZer, @sai6855, @alisasanib.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.0`
+
+- [DataGrid] Avoid ResizeObserver loop error (#17984) @cherniavskii
+- [DataGrid] Fix column management `toggleColumn` event type (#18023) @KenanYusuf
+- [DataGrid] Remove unnecessary `any` type (#17979) @sai6855
+
+#### `@mui/x-data-grid-pro@8.5.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@8.5.0`, plus:
+
+- [DataGridPro] Allow multi sorting without modifier key (#17925) @cherniavskii
+- [DataGridPro] Row reordering icon improvements (#17947) @KenanYusuf
+- [DataGridPro] Fix pinned columns order in column management (#17950) @alisasanib
+
+#### `@mui/x-data-grid-premium@8.5.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@8.5.0`, plus:
+
+- [DataGridPremium] Export `GridApiPremium` type (#18037) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.5.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@8.5.0`, plus:
+
+- [DateRangePicker] Allow to override the format in the field (#17972) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.5.0`
+
+- [charts] Add `render` prop to charts toolbar components (#17649) @bernardobelchior
+- [charts] Add configurable slots to toolbar (#17712) @bernardobelchior
+- [charts] Export `useFunnelSeries` and `useRadarSeries` (#18034) @JCQuintas
+- [charts] Expose `ChartApi` through context (#18004) @bernardobelchior
+- [charts] Mark Radar chart as stable (#17946) @alexfauquette
+- [charts] Only update store if interaction item is different (#17851) @bernardobelchior
+- [charts] Reuse shared date utils (#18014) @JCQuintas
+- [charts] Use Map for string cache instead of object (#17982) @bernardobelchior
+- [charts] Fix Population pyramid demo (#17987) @oliviertassinari
+
+#### `@mui/x-charts-pro@8.5.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@8.5.0`, plus:
+
+- [charts-pro] Add range selection to zoom slider (#17949) @bernardobelchior
+- [charts-pro] Allow configuring zoom slider tooltip (#18030) @bernardobelchior
+- [charts-pro] Allow exporting a funnel chart (#17957) @bernardobelchior
+- [charts-pro] Allow exporting a heatmap chart (#17916) @bernardobelchior
+- [charts-pro] Allow exporting a radar chart (#17968) @bernardobelchior
+- [charts-pro] Always show both zoom slider tooltips (#18027) @bernardobelchior
+- [charts-pro] Show zoom slider tooltip when selecting range (#18028) @bernardobelchior
+- [charts-pro] Split `ChartAxisZoomSlider` into smaller files (#18011) @bernardobelchior
+- [charts-pro] Update zoom slider range selection cursor (#17977) @bernardobelchior
+- [charts-pro] Add support for Heatmap legend (#17943) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.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@8.5.0`.
+
+### Docs
+
+- [docs] Fix derived column pivoting demo crash (#17944) @arminmeh
+- [docs] Fix light/dark mode blink on pickers overview (#18002) @alexfauquette
+- [docs] Fix scatter shape demo causing horizontal overflow (#17974) @bernardobelchior
+
+### Core
+
+- [code-infra] Add bundle size monitor (#17754) @Janpot
+- [code-infra] Enable `babel-plugin-display-name` in vitest (#17903) @JCQuintas
+- [infra] Remove last deprecated `ponyfillGlobal` usage (#18003) @LukasTy
+- [infra] Use `babel-plugin-display-name` from npm (#18040) @LukasTy
+- [x-telemetry] Remove deprecated `ponyfillGlobal` (#17986) @xBlizZer
+
 ## 8.4.0
 
 _May 21, 2025_

package/DataGrid/DataGrid.js

@@ -29,7 +29,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
+const DataGridRaw = function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(props.apiRef, props);
   (0, _useDataGridComponent.useDataGridComponent)(privateApiRef, props);
@@ -48,7 +48,8 @@ const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref)
       ref: ref
     }))
   });
-});
+};
+if (process.env.NODE_ENV !== "production") DataGridRaw.displayName = "DataGridRaw";
 /**
  * Features:
  * - [DataGrid](https://mui.com/x/react-data-grid/features/)
@@ -56,7 +57,7 @@ const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref)
  * API:
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
-const DataGrid = exports.DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+const DataGrid = exports.DataGrid = /*#__PURE__*/React.memo((0, _forwardRef.forwardRef)(DataGridRaw));
 if (process.env.NODE_ENV !== "production") DataGrid.displayName = "DataGrid";
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/GridColumnHeaders.js

@@ -55,6 +55,7 @@ const GridColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnHeaders.displayName = "GridColumnHeaders";
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridFooter.js

@@ -38,6 +38,7 @@ const GridFooter = exports.GridFooter = (0, _forwardRef.forwardRef)(function Gri
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFooter.displayName = "GridFooter";
 process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridLoadingOverlay.js

@@ -55,6 +55,7 @@ const GridLoadingOverlay = exports.GridLoadingOverlay = (0, _forwardRef.forwardR
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})
   }));
 });
+if (process.env.NODE_ENV !== "production") GridLoadingOverlay.displayName = "GridLoadingOverlay";
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridNoColumnsOverlay.js

@@ -34,6 +34,7 @@ const GridNoColumnsOverlay = exports.GridNoColumnsOverlay = (0, _forwardRef.forw
     }))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridNoColumnsOverlay.displayName = "GridNoColumnsOverlay";
 process.env.NODE_ENV !== "production" ? GridNoColumnsOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridNoResultsOverlay.js

@@ -19,4 +19,5 @@ const GridNoResultsOverlay = exports.GridNoResultsOverlay = (0, _forwardRef.forw
     ref: ref,
     children: noResultsOverlayLabel
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridNoResultsOverlay.displayName = "GridNoResultsOverlay";

package/components/GridNoRowsOverlay.js

@@ -21,6 +21,7 @@ const GridNoRowsOverlay = exports.GridNoRowsOverlay = (0, _forwardRef.forwardRef
     children: noRowsLabel
   }));
 });
+if (process.env.NODE_ENV !== "production") GridNoRowsOverlay.displayName = "GridNoRowsOverlay";
 process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridRow.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
@@ -85,7 +85,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
+  const handleRef = (0, _useForkRef.default)(ref, refProp);
   const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
   const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
     rowId,
@@ -309,6 +309,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     })]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridRowCount.js

@@ -59,6 +59,7 @@ const GridRowCount = exports.GridRowCount = (0, _forwardRef.forwardRef)(function
     children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRowCount.displayName = "GridRowCount";
 process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridSelectedRowCount.js

@@ -63,6 +63,7 @@ const GridSelectedRowCount = exports.GridSelectedRowCount = (0, _forwardRef.forw
     children: rowSelectedText
   }));
 });
+if (process.env.NODE_ENV !== "production") GridSelectedRowCount.displayName = "GridSelectedRowCount";
 process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridShadowScrollArea.js

@@ -92,6 +92,7 @@ const GridShadowScrollArea = exports.GridShadowScrollArea = (0, _forwardRef.forw
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridShadowScrollArea.displayName = "GridShadowScrollArea";
 process.env.NODE_ENV !== "production" ? GridShadowScrollArea.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridSkeletonLoadingOverlay.js

@@ -194,6 +194,7 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridSkeletonLoadingOverlayInner.displayName = "GridSkeletonLoadingOverlayInner";
 const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _forwardRef.forwardRef)(function GridSkeletonLoadingOverlay(props, forwardedRef) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
@@ -203,4 +204,5 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
     skeletonRowsCount: skeletonRowsCount,
     ref: forwardedRef
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridSkeletonLoadingOverlay.displayName = "GridSkeletonLoadingOverlay";

package/components/cell/GridActionsCell.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -38,8 +38,8 @@ function GridActionsCell(props) {
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
   const isRtl = (0, _RtlProvider.useRtl)();
-  const menuId = (0, _utils.unstable_useId)();
-  const buttonId = (0, _utils.unstable_useId)();
+  const menuId = (0, _useId.default)();
+  const buttonId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (!hasActions(colDef)) {
     throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');

package/components/cell/GridActionsCellItem.js

@@ -62,6 +62,7 @@ const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwar
     children: label
   }));
 });
+if (process.env.NODE_ENV !== "production") GridActionsCellItem.displayName = "GridActionsCellItem";
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/cell/GridCell.js

@@ -11,7 +11,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _forwardRef = require("@mui/x-internals/forwardRef");
@@ -26,7 +29,7 @@ var _constants = require("../../internals/constants");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
-var _utils2 = require("../../internals/utils");
+var _utils = require("../../internals/utils");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
@@ -49,9 +52,9 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
+    root: ['cell', `cell--text${(0, _capitalize.default)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 let warnedOnce = false;
 
@@ -150,7 +153,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   }
   const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
+  const handleRef = (0, _useForkRef.default)(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
   const ownerState = {
@@ -201,7 +204,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
         border: 0
       };
     }
-    const cellStyle = (0, _utils2.attachPinnedStyle)((0, _extends2.default)({
+    const cellStyle = (0, _utils.attachPinnedStyle)((0, _extends2.default)({
       '--width': `${width}px`
     }, styleProp), isRtl, pinnedPosition, pinnedOffset);
     const isLeftPinned = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
@@ -219,7 +222,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
     }
-    const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
+    const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
@@ -316,6 +319,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridCell.displayName = "GridCell";
 process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/cell/GridEditBooleanCell.js

@@ -12,7 +12,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -25,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['editBooleanCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridEditBooleanCell(props) {
   const {
@@ -39,7 +41,7 @@ function GridEditBooleanCell(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const inputRef = React.useRef(null);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const [valueState, setValueState] = React.useState(value);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {
@@ -61,7 +63,7 @@ function GridEditBooleanCell(props) {
   React.useEffect(() => {
     setValueState(value);
   }, [value]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (hasFocus) {
       inputRef.current.focus();
     }

package/components/cell/GridEditDateCell.js

@@ -11,7 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _styles = require("@mui/material/styles");
 var _assert = require("../../utils/assert");
 var _gridClasses = require("../../constants/gridClasses");
@@ -29,7 +30,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['editInputCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridEditDateCell(props) {
   const {
@@ -111,7 +112,7 @@ function GridEditDateCell(props) {
       return state;
     });
   }, [valueTransformed]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (hasFocus) {
       inputRef.current.focus();
     }

package/components/cell/GridEditInputCell.js

@@ -10,7 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _assert = require("../../utils/assert");
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['editInputCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridEditInputCellRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
@@ -83,7 +84,7 @@ const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef
       setValueState(value);
     }
   }, [meta, value]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (hasFocus) {
       inputRef.current.focus();
     }
@@ -105,6 +106,7 @@ const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridEditInputCell.displayName = "GridEditInputCell";
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/cell/GridEditSingleSelectCell.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _gridEditCellParams = require("../../models/params/gridEditCellParams");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridEditRowModel = require("../../models/gridEditRowModel");
@@ -44,7 +44,7 @@ function GridEditSingleSelectCell(props) {
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (hasFocus) {
       inputRef.current?.focus();
     }

package/components/cell/GridSkeletonCell.js

@@ -11,9 +11,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
-var _utils2 = require("../../utils/utils");
+var _utils = require("../../utils/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,11 +36,11 @@ const useUtilityClasses = ownerState => {
     empty
   } = ownerState;
   const slots = {
-    root: ['cell', 'cellSkeleton', `cell--text${align ? (0, _utils.unstable_capitalize)(align) : 'Left'}`, empty && 'cellEmpty']
+    root: ['cell', 'cellSkeleton', `cell--text${align ? (0, _capitalize.default)(align) : 'Left'}`, empty && 'cellEmpty']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const randomNumberGenerator = (0, _utils2.createRandomNumberGenerator)(12345);
+const randomNumberGenerator = (0, _utils.createRandomNumberGenerator)(12345);
 function GridSkeletonCell(props) {
   const {
       field,

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -49,4 +49,5 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = (0, _forwardRef.fo
     role: "presentation",
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridBaseColumnHeaders.displayName = "GridBaseColumnHeaders";

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnGroupHeader = GridColumnGroupHeader;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -18,7 +19,7 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
-var _utils2 = require("../../internals/utils");
+var _utils = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnGroupHeader(props) {
   const {
@@ -87,7 +88,7 @@ function GridColumnGroupHeader(props) {
     isDragging: false
   });
   const label = headerName ?? groupId;
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
   const classes = useUtilityClasses(ownerState);
   React.useLayoutEffect(() => {
@@ -114,7 +115,7 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -9,7 +9,8 @@ exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButtonWrapp
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _hooks = require("../../hooks");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     icon: ['filterIcon']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButtonWrapped(props) {
   if (!props.counter) {
@@ -54,9 +55,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const labelId = (0, _utils.unstable_useId)();
+  const labelId = (0, _useId.default)();
   const isOpen = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelSelectorWithLabel, labelId);
-  const panelId = (0, _utils.unstable_useId)();
+  const panelId = (0, _useId.default)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();