@mui/x-data-grid-pro 8.4.0 → 8.5.1

package/CHANGELOG.md

@@ -5,6 +5,221 @@
 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_
+
+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/DataGridPro/DataGridPro.js

@@ -29,7 +29,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
+const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -56,6 +56,7 @@ const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps,
     }))
   });
 });
+if (process.env.NODE_ENV !== "production") DataGridProRaw.displayName = "DataGridProRaw";
 /**
  * Features:
  * - [DataGridPro](https://mui.com/x/react-data-grid/features/)
@@ -532,6 +533,13 @@ DataGridProRaw.propTypes = {
    * @default "error" ("warn" in dev mode)
    */
   logLevel: _propTypes.default.oneOf(['debug', 'error', 'info', 'warn', false]),
+  /**
+   * If set to "always", the multi-sorting is applied without modifier key.
+   * Otherwise, the modifier key is required for multi-sorting to be applied.
+   * @see See https://mui.com/x/react-data-grid/sorting/#multi-sorting
+   * @default "withModifierKey"
+   */
+  multipleColumnsSortingMode: _propTypes.default.oneOf(['always', 'withModifierKey']),
   /**
    * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
    */

package/DataGridPro/useDataGridProComponent.js

@@ -30,16 +30,20 @@ const useDataGridProComponent = (apiRef, props) => {
 
   /**
    * Register all pre-processors called during state initialization here.
+   * Some pre-processors are changing the same part of the state (like the order of the columns).
+   * Order them in descending order of priority.
+   * For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
+   * Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
+   * Desired autogenerated columns order is:
+   * left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
    */
-  (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
-  (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
+  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
   (0, _useGridDataSourceTreeDataPreProcessors.useGridDataSourceTreeDataPreProcessors)(apiRef, props);
+  (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
   (0, _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors)(apiRef, props);
   (0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
-  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
-  // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
-  // Because it changes the order of the columns.
+  (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props);
   (0, _internals.useGridRowsPreProcessors)(apiRef);
 

package/DataGridPro/useDataGridProProps.js

@@ -41,7 +41,8 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PRO_PROPS_DEFAULT_V
   treeData: false,
   lazyLoading: false,
   lazyLoadingRequestThrottleMs: 500,
-  listView: false
+  listView: false,
+  multipleColumnsSortingMode: 'withModifierKey'
 });
 const defaultSlots = _dataGridProDefaultSlotsComponents.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProProps = inProps => {

package/components/GridColumnHeaders.js

@@ -63,6 +63,7 @@ const GridColumnHeaders = exports.GridColumnHeaders = (0, _forwardRef.forwardRef
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {})]
   }));
 });
+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/GridDetailPanel.d.ts

@@ -10,5 +10,5 @@ interface GridDetailPanelProps extends Pick<React.HTMLAttributes<HTMLDivElement>
    */
   height: number | 'auto';
 }
-declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element;
+declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element | null;
 export { GridDetailPanel };

package/components/GridDetailPanel.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridDetailPanel = GridDetailPanel;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
+var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -33,6 +34,7 @@ function GridDetailPanel(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = rootProps;
   const hasAutoHeight = height === 'auto';
+  const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, rowId);
   React.useLayoutEffect(() => {
     if (hasAutoHeight && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -44,6 +46,9 @@ function GridDetailPanel(props) {
     const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
     apiRef.current.storeDetailPanelHeight(rowId, observedHeight);
   }, hasAutoHeight);
+  if (rowNode?.type === 'skeletonRow') {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailPanel, {
     ref: ref,
     ownerState: ownerState,

package/components/GridProColumnMenu.js

@@ -26,4 +26,5 @@ const GridProColumnMenu = exports.GridProColumnMenu = (0, _forwardRef.forwardRef
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO,
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridProColumnMenu.displayName = "GridProColumnMenu";

package/components/GridRowReorderCell.js

@@ -10,6 +10,7 @@ exports.renderRowReorderCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -22,10 +23,17 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
-    placeholder: ['rowReorderCellPlaceholder']
+    placeholder: ['rowReorderCellPlaceholder'],
+    icon: ['rowReorderIcon']
   };
   return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
+const RowReorderIcon = (0, _system.styled)('svg', {
+  name: 'MuiDataGrid',
+  slot: 'RowReorderIcon'
+})({
+  color: _internals.vars.colors.foreground.muted
+});
 function GridRowReorderCell(params) {
   const apiRef = (0, _xDataGrid.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -82,7 +90,12 @@ function GridRowReorderCell(params) {
     className: classes.root,
     draggable: isDraggable
   }, draggableEventHandlers, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.rowReorderIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RowReorderIcon, {
+      as: rootProps.slots.rowReorderIcon,
+      ownerState: ownerState,
+      className: classes.icon,
+      fontSize: "small"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.placeholder,
       children: cellValue
     })]

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -12,7 +12,9 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -69,7 +71,7 @@ const useUtilityClasses = ownerState => {
     input: ['columnHeaderFilterInput'],
     operatorLabel: ['columnHeaderFilterOperatorLabel']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
 const DEFAULT_INPUT_COMPONENTS = {
   string: _xDataGrid.GridFilterInputValue,
@@ -105,7 +107,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
   const columnFields = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnFieldsSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const cellRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
+  const handleRef = (0, _useForkRef.default)(ref, cellRef);
   const inputRef = React.useRef(null);
   const buttonRef = React.useRef(null);
   const editingField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringEditFieldSelector);
@@ -223,7 +225,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     showRightBorder
   });
   const classes = useUtilityClasses(ownerState);
-  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(item.operator)}`);
+  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _capitalize.default)(item.operator)}`);
   const isNoInputOperator = currentOperator.requiresFilterValue === false;
   const isApplied = item?.value !== undefined || isNoInputOperator;
   const isFilterActive = isApplied || hasFocus;
@@ -289,7 +291,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
         slotProps: {
           root: {
             size: 'small',
-            label: (0, _utils.unstable_capitalize)(label),
+            label: (0, _capitalize.default)(label),
             placeholder: ''
           }
         }
@@ -299,6 +301,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     }) : null]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridHeaderFilterCell.displayName = "GridHeaderFilterCell";
 process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/headerFiltering/GridHeaderFilterMenu.js

@@ -9,7 +9,8 @@ exports.GridHeaderFilterMenu = GridHeaderFilterMenu;
 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 _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridHeaderFilterMenu({
@@ -60,7 +61,7 @@ function GridHeaderFilterMenu({
         children: apiRef.current.getLocaleText('headerFilterClear')
       }, "filter-menu-clear-filter"), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseDivider, {}, "filter-menu-divider")], operators.map(op => {
         const selected = op.value === item.operator;
-        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(op.value)}`);
+        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _capitalize.default)(op.value)}`);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
           iconStart: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.menuItemCheckIcon, {
             fontSize: "small"
@@ -140,5 +141,5 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
     value: _propTypes.default.string.isRequired
   })).isRequired,
   showClearItem: _propTypes.default.bool.isRequired,
-  target: _utils.HTMLElementType
+  target: _HTMLElementType.default
 } : void 0;

package/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -11,7 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xDataGrid = require("@mui/x-data-grid");
-var _utils = require("@mui/utils");
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,8 +29,8 @@ function GridHeaderFilterMenuContainer(props) {
       clearFilterItem
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const buttonId = (0, _utils.unstable_useId)();
-  const menuId = (0, _utils.unstable_useId)();
+  const buttonId = (0, _useId.default)();
+  const menuId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _xDataGrid.useGridApiContext)();
   const menuOpenField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringMenuSelector);
@@ -84,7 +85,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterMenuContainer.propTypes
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   applyFilterChanges: _propTypes.default.func.isRequired,
-  buttonRef: _utils.refType,
+  buttonRef: _refType.default,
   clearFilterItem: _propTypes.default.func,
   disabled: _propTypes.default.bool,
   field: _propTypes.default.string.isRequired,

package/esm/DataGridPro/DataGridPro.js

@@ -22,7 +22,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc0Nzc3ODQwMDAwMA==";
+const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -49,6 +49,7 @@ const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
     }))
   });
 });
+if (process.env.NODE_ENV !== "production") DataGridProRaw.displayName = "DataGridProRaw";
 /**
  * Features:
  * - [DataGridPro](https://mui.com/x/react-data-grid/features/)
@@ -525,6 +526,13 @@ DataGridProRaw.propTypes = {
    * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
+  /**
+   * If set to "always", the multi-sorting is applied without modifier key.
+   * Otherwise, the modifier key is required for multi-sorting to be applied.
+   * @see See https://mui.com/x/react-data-grid/sorting/#multi-sorting
+   * @default "withModifierKey"
+   */
+  multipleColumnsSortingMode: PropTypes.oneOf(['always', 'withModifierKey']),
   /**
    * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
    */

package/esm/DataGridPro/useDataGridProComponent.js

@@ -23,16 +23,20 @@ export const useDataGridProComponent = (apiRef, props) => {
 
   /**
    * Register all pre-processors called during state initialization here.
+   * Some pre-processors are changing the same part of the state (like the order of the columns).
+   * Order them in descending order of priority.
+   * For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
+   * Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
+   * Desired autogenerated columns order is:
+   * left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
    */
-  useGridRowSelectionPreProcessors(apiRef, props);
-  useGridRowReorderPreProcessors(apiRef, props);
+  useGridDetailPanelPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDataSourceTreeDataPreProcessors(apiRef, props);
+  useGridRowSelectionPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
-  useGridDetailPanelPreProcessors(apiRef, props);
-  // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
-  // Because it changes the order of the columns.
+  useGridRowReorderPreProcessors(apiRef, props);
   useGridColumnPinningPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
 

package/esm/DataGridPro/useDataGridProProps.js

@@ -33,7 +33,8 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   treeData: false,
   lazyLoading: false,
   lazyLoadingRequestThrottleMs: 500,
-  listView: false
+  listView: false,
+  multipleColumnsSortingMode: 'withModifierKey'
 });
 const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProProps = inProps => {

package/esm/components/GridColumnHeaders.js

@@ -55,6 +55,7 @@ const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
     children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/_jsx(Filler, {})]
   }));
 });
+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/esm/components/GridDetailPanel.d.ts

@@ -10,5 +10,5 @@ interface GridDetailPanelProps extends Pick<React.HTMLAttributes<HTMLDivElement>
    */
   height: number | 'auto';
 }
-declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element;
+declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element | null;
 export { GridDetailPanel };

package/esm/components/GridDetailPanel.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { gridRowNodeSelector } from '@mui/x-data-grid';
 import { vars } from '@mui/x-data-grid/internals';
 import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -27,6 +28,7 @@ function GridDetailPanel(props) {
   const rootProps = useGridRootProps();
   const ownerState = rootProps;
   const hasAutoHeight = height === 'auto';
+  const rowNode = gridRowNodeSelector(apiRef, rowId);
   React.useLayoutEffect(() => {
     if (hasAutoHeight && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
@@ -38,6 +40,9 @@ function GridDetailPanel(props) {
     const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
     apiRef.current.storeDetailPanelHeight(rowId, observedHeight);
   }, hasAutoHeight);
+  if (rowNode?.type === 'skeletonRow') {
+    return null;
+  }
   return /*#__PURE__*/_jsx(DetailPanel, {
     ref: ref,
     ownerState: ownerState,

package/esm/components/GridProColumnMenu.js

@@ -18,4 +18,5 @@ export const GridProColumnMenu = forwardRef(function GridProColumnMenu(props, re
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PRO,
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridProColumnMenu.displayName = "GridProColumnMenu";

package/esm/components/GridRowReorderCell.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridClasses } from '@mui/x-data-grid';
-import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
+import { gridEditRowsStateSelector, isEventTargetInPortal, vars } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -13,10 +14,17 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
-    placeholder: ['rowReorderCellPlaceholder']
+    placeholder: ['rowReorderCellPlaceholder'],
+    icon: ['rowReorderIcon']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const RowReorderIcon = styled('svg', {
+  name: 'MuiDataGrid',
+  slot: 'RowReorderIcon'
+})({
+  color: vars.colors.foreground.muted
+});
 function GridRowReorderCell(params) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -73,7 +81,12 @@ function GridRowReorderCell(params) {
     className: classes.root,
     draggable: isDraggable
   }, draggableEventHandlers, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.rowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(RowReorderIcon, {
+      as: rootProps.slots.rowReorderIcon,
+      ownerState: ownerState,
+      className: classes.icon,
+      fontSize: "small"
+    }), /*#__PURE__*/_jsx("div", {
       className: classes.placeholder,
       children: cellValue
     })]

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -5,7 +5,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector, gridClasses } from '@mui/x-data-grid';
 import { PinnedColumnPosition, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, attachPinnedStyle, vars } from '@mui/x-data-grid/internals';
@@ -291,6 +293,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     }) : null]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridHeaderFilterCell.displayName = "GridHeaderFilterCell";
 process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/headerFiltering/GridHeaderFilterMenu.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_capitalize as capitalize, HTMLElementType } from '@mui/utils';
+import capitalize from '@mui/utils/capitalize';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useGridRootProps, useGridApiContext, GridMenu } from '@mui/x-data-grid';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridHeaderFilterMenu({

package/esm/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -4,7 +4,8 @@ const _excluded = ["operators", "item", "field", "buttonRef", "headerFilterMenuR
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridApiContext, useGridSelector } from '@mui/x-data-grid';
-import { refType, unstable_useId as useId } from '@mui/utils';
+import refType from '@mui/utils/refType';
+import useId from '@mui/utils/useId';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPipeProcessor, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, gridExistingPinnedColumnSelector } from '@mui/x-data-grid/internals';
 export const useGridColumnPinningPreProcessors = (apiRef, props) => {
   const {
     disableColumnPinning
@@ -20,12 +20,12 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     apiRef.current.state = _extends({}, savedState, {
       columns: columnsState
     });
-    const visibleColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+    const pinnedColumns = gridExistingPinnedColumnSelector(apiRef);
     apiRef.current.state = savedState;
     // HACK: Ends here //
 
-    const leftPinnedColumns = visibleColumns.left.map(c => c.field);
-    const rightPinnedColumns = visibleColumns.right.map(c => c.field);
+    const leftPinnedColumns = pinnedColumns.left;
+    const rightPinnedColumns = pinnedColumns.right;
     let newOrderedFields;
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {

package/esm/hooks/features/detailPanel/useGridDetailPanel.js

@@ -174,7 +174,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     }
     updateCachesIfNeeded();
     const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef);
-    initialValue.detail = heightCache[row.id].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
+    initialValue.detail = heightCache[row.id]?.height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
     return initialValue;
   }, [apiRef, updateCachesIfNeeded]);
   const enabled = props.getDetailPanelContent !== undefined;

package/esm/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -6,28 +6,26 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from
 import { gridDetailPanelExpandedRowIdsSelector } from "./gridDetailPanelSelector.js";
 export const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
-    if (props.getDetailPanelContent == null) {
-      // Remove the toggle column, when it exists
-      if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-        delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
-        columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
-      }
-      return columnsState;
-    }
-
-    // Don't add the toggle column if there's already one
-    // The user might have manually added it to have it in a custom position
-    if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-      return columnsState;
-    }
-
-    // Otherwise, add the toggle column at the beginning
-    columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
-    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+    const detailPanelToggleColumn = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
     });
+    const shouldHaveToggleColumn = !!props.getDetailPanelContent;
+    const hasToggleColumn = columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
+    if (shouldHaveToggleColumn && !hasToggleColumn) {
+      columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
+      columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
+    } else if (!shouldHaveToggleColumn && hasToggleColumn) {
+      delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
+      columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
+    } else if (shouldHaveToggleColumn && hasToggleColumn) {
+      columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, detailPanelToggleColumn, columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+      // If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
+        columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD)];
+      }
+    }
     return columnsState;
-  }, [privateApiRef, props.getDetailPanelContent]);
+  }, [privateApiRef, props.columns, props.getDetailPanelContent]);
   const addExpandedClassToRow = React.useCallback((classes, id) => {
     if (props.getDetailPanelContent == null) {
       return classes;

package/esm/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -28,19 +28,21 @@ export const useGridRowReorderPreProcessors = (privateApiRef, props) => {
       headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
     });
     const shouldHaveReorderColumn = props.rowReordering;
-    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
-    if (shouldHaveReorderColumn && haveReorderColumn) {
-      columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
-      return columnsState;
-    }
-    if (shouldHaveReorderColumn && !haveReorderColumn) {
+    const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+    if (shouldHaveReorderColumn && !hasReorderColumn) {
       columnsState.lookup[reorderColumn.field] = reorderColumn;
       columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
-    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+    } else if (!shouldHaveReorderColumn && hasReorderColumn) {
       delete columnsState.lookup[reorderColumn.field];
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
+    } else if (shouldHaveReorderColumn && hasReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
+      // If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === GRID_REORDER_COL_DEF.field)) {
+        columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
+      }
     }
     return columnsState;
-  }, [privateApiRef, classes, props.rowReordering]);
+  }, [privateApiRef, classes, props.columns, props.rowReordering]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateReorderColumn);
 };

package/esm/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { GridStrategyGroup, useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "../treeData/gridTreeDataGroupColDef.js";
 import { skipFiltering, skipSorting } from "./utils.js";
@@ -56,8 +56,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/esm/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { GridStrategyGroup, useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "./gridTreeDataGroupColDef.js";
 import { filterRowTreeFromTreeData, TreeDataStrategy } from "./gridTreeDataUtils.js";
@@ -56,8 +56,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.4.0
+ * @mui/x-data-grid-pro v8.5.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -28,12 +28,12 @@ const useGridColumnPinningPreProcessors = (apiRef, props) => {
     apiRef.current.state = (0, _extends2.default)({}, savedState, {
       columns: columnsState
     });
-    const visibleColumns = (0, _internals.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
+    const pinnedColumns = (0, _internals.gridExistingPinnedColumnSelector)(apiRef);
     apiRef.current.state = savedState;
     // HACK: Ends here //
 
-    const leftPinnedColumns = visibleColumns.left.map(c => c.field);
-    const rightPinnedColumns = visibleColumns.right.map(c => c.field);
+    const leftPinnedColumns = pinnedColumns.left;
+    const rightPinnedColumns = pinnedColumns.right;
     let newOrderedFields;
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -183,7 +183,7 @@ const useGridDetailPanel = (apiRef, props) => {
     }
     updateCachesIfNeeded();
     const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef);
-    initialValue.detail = heightCache[row.id].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
+    initialValue.detail = heightCache[row.id]?.height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
     return initialValue;
   }, [apiRef, updateCachesIfNeeded]);
   const enabled = props.getDetailPanelContent !== undefined;

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -14,28 +14,26 @@ var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
 var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
 const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
-    if (props.getDetailPanelContent == null) {
-      // Remove the toggle column, when it exists
-      if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-        delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
-        columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD);
-      }
-      return columnsState;
-    }
-
-    // Don't add the toggle column if there's already one
-    // The user might have manually added it to have it in a custom position
-    if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
-      return columnsState;
-    }
-
-    // Otherwise, add the toggle column at the beginning
-    columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
-    columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+    const detailPanelToggleColumn = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
       headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
     });
+    const shouldHaveToggleColumn = !!props.getDetailPanelContent;
+    const hasToggleColumn = columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
+    if (shouldHaveToggleColumn && !hasToggleColumn) {
+      columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
+      columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
+    } else if (!shouldHaveToggleColumn && hasToggleColumn) {
+      delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
+      columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD);
+    } else if (shouldHaveToggleColumn && hasToggleColumn) {
+      columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, detailPanelToggleColumn, columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+      // If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
+        columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD)];
+      }
+    }
     return columnsState;
-  }, [privateApiRef, props.getDetailPanelContent]);
+  }, [privateApiRef, props.columns, props.getDetailPanelContent]);
   const addExpandedClassToRow = React.useCallback((classes, id) => {
     if (props.getDetailPanelContent == null) {
       return classes;

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -36,20 +36,22 @@ const useGridRowReorderPreProcessors = (privateApiRef, props) => {
       headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
     });
     const shouldHaveReorderColumn = props.rowReordering;
-    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
-    if (shouldHaveReorderColumn && haveReorderColumn) {
-      columnsState.lookup[reorderColumn.field] = (0, _extends2.default)({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
-      return columnsState;
-    }
-    if (shouldHaveReorderColumn && !haveReorderColumn) {
+    const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+    if (shouldHaveReorderColumn && !hasReorderColumn) {
       columnsState.lookup[reorderColumn.field] = reorderColumn;
       columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
-    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+    } else if (!shouldHaveReorderColumn && hasReorderColumn) {
       delete columnsState.lookup[reorderColumn.field];
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
+    } else if (shouldHaveReorderColumn && hasReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = (0, _extends2.default)({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
+      // If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
+      if (!props.columns.some(col => col.field === _gridRowReorderColDef.GRID_REORDER_COL_DEF.field)) {
+        columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
+      }
     }
     return columnsState;
-  }, [privateApiRef, classes, props.rowReordering]);
+  }, [privateApiRef, classes, props.columns, props.rowReordering]);
   (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateColumns', updateReorderColumn);
 };
 exports.useGridRowReorderPreProcessors = useGridRowReorderPreProcessors;

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -64,8 +64,7 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -64,8 +64,7 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       }
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
       if (prevGroupingColumn == null) {
-        const index = columnsState.orderedFields[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
-        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+        columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
       delete columnsState.lookup[groupingColDefField];

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.4.0
+ * @mui/x-data-grid-pro v8.5.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -35,15 +35,15 @@
     "directory": "packages/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
-    "@mui/utils": "^7.0.2",
+    "@babel/runtime": "^7.27.4",
+    "@mui/utils": "^7.1.1",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-internals": "8.4.0",
-    "@mui/x-license": "8.4.0",
-    "@mui/x-data-grid": "8.4.0"
+    "@mui/x-internals": "8.5.1",
+    "@mui/x-data-grid": "8.5.1",
+    "@mui/x-license": "8.5.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",