@mui/x-data-grid-pro 9.0.0-alpha.1 → 9.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,123 @@
 # Changelog
 
+## 9.0.0-alpha.2
+
+_Mar 5, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ✅ Stabilize Sankey chart
+- 🐞 Bugfixes and internal improvements
+
+The following team members contributed to this release:
+@aemartos, @alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @mj12albert, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-alpha.2`
+
+- [dataGrid] Fix keyboard nav with single-row checkbox selection (#21149) @mj12albert
+- [DataGrid] Add `checkboxColDef` prop to customize the selection column (#21331) @michelengelen
+- [DataGrid] Format pagination numbers by default (#21117) @siriwatknp
+- [DataGrid] Prevent unnecessary row selection checkbox rerendering (#21570) @arminmeh
+- [DataGrid] Make GridScrollArea overrides resolver dynamic (#21532) @sai6855
+
+#### `@mui/x-data-grid-pro@9.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.0.0-alpha.2`, plus:
+
+- [DataGridPro] Use `getRowId` prop to calculate the tree data row update (#21540) @arminmeh
+
+#### `@mui/x-data-grid-premium@9.0.0-alpha.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.0.0-alpha.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.0-alpha.2`
+
+- [pickers] Add `keepOpenDuringFieldFocus` prop (#20782) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.0.0-alpha.2`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-alpha.2`
+
+- [charts] Add `ChartsLayerContainer` component (#21264) @bernardobelchior
+- [charts] Add codemod for `ChartsContainer` rename (#21504) @JCQuintas
+- [charts] Add codemod for `ChartsDataProvider` rename (#21552) @JCQuintas
+- [charts] Add codemod for `ChartsZoomSlider` rename (#21597) @JCQuintas
+- [charts] Base the highlight items on the item identifiers (#21161) @alexfauquette
+- [charts] Deprecate `ChartDataProvider` in favour of `ChartsDataProvider` (#21191) @JCQuintas
+- [charts] Deprecate `highlighted` and `faded` classes (#21476) @alexfauquette
+- [charts] Migrate to latest v8 warning (#21518) @JCQuintas
+- [charts] Rename `ChartZoomSlider` to `ChartsZoomSlider` (#21553) @JCQuintas
+- [charts] Rename `WebGl` to `WebGL` (#21524) @JCQuintas
+- [charts] Rename `useSvgRef()` by `useChartsLayerContainerRef()` (#21494) @alexfauquette
+- [charts] Restore focus on last focused item (#21522) @alexfauquette
+- [charts] Warn users when controlled tooltip state does not match the trigger (#21520) @Copilot
+- [charts] Fix controlled tooltip position (#21603) @bernardobelchior
+
+#### `@mui/x-charts-pro@9.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.0.0-alpha.2`, plus:
+
+- [charts-pro] Center the watermark (#21550) @alexfauquette
+- [charts-pro] Stabilize `SankeyChart` API (#21133) @Copilot
+
+#### `@mui/x-charts-premium@9.0.0-alpha.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.0.0-alpha.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-alpha.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.0.0-alpha.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-alpha.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add backticks and parentheses to all functions and hooks (DX-173) (#21496) @mapache-salvaje
+- [docs] Remove mentions of `mySvgRef` (#21559) @bernardobelchior
+- [docs] Update Roadmap section in the docs  (#20892) @alelthomas
+- [docs] Add tutorial and example app for aggregation with row grouping (DX-162) (#21102) @mapache-salvaje
+- [docs] Fix missing codemod docs (#21604) @JCQuintas
+
+### Core
+
+- [code-infra] Add eslint rule to prevent `Math.random` in docs (#21505) @JCQuintas
+- [code-infra] Avoid static props for pageContent (#21038) @Janpot
+- [code-infra] Isolate `date-pickers-pro` in the browser tests (#21383) @Janpot
+- [code-infra] Remove `--coverage` (#21410) @Janpot
+- [code-infra] Remove unneeded `skipIf`s (#21569) @JCQuintas
+- [code-infra] Remove vale as a workspace dependency (#21489) @brijeshb42
+- [code-infra] Remove x-charts-vendor from nextjs processing (#21534) @brijeshb42
+- [code-infra] Set BASE_BRANCH env var in CircleCI config (#21548) @brijeshb42
+- [code-infra] Setup error code extraction (#21469) @brijeshb42
+- [code-infra] Setup flat build for packages (#21029) @brijeshb42
+- [code-infra] Upgrade test_unit to large resource class (#21558) @Janpot
+- [code-infra] Removed getTeamMembers function and usage from release script (#21605) @michelengelen
+
+### Miscellaneous
+
+- [x-license] Add Q1-2026 plan version with quantity and appType support (#21574) @aemartos
+- [x-license] Add v3 key format support, centralize test keys, and trim public API (#21485) @aemartos
+- [x-telemetry] telemetry opt-out by default, remove conf dependency (#21470) @aemartos
+- [x-telemetry] test: mock context module directly in sender tests (#21546) @aemartos
+
 ## 9.0.0-alpha.1
 
 _Feb 26, 2026_

package/DataGridPro/DataGrid.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGrid = DataGrid;
 exports.DataGridPremium = DataGridPremium;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 /**
  * @deprecated Import DataGridPro instead.
  */
@@ -12,7 +14,7 @@ function DataGrid() {
   if (process.env.NODE_ENV === 'production') {
     return null;
   }
-  throw new Error(["You try to import Data Grid from @mui/x-data-grid-pro but this module isn't exported from this npm package.", '', "Instead, you can do `import { DataGridPro } from '@mui/x-data-grid-pro'`.", ''].join('\n'));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Data Grid: DataGrid is not exported from @mui/x-data-grid-pro. ' + 'The Pro package exports DataGridPro instead. ' + "Use `import { DataGridPro } from '@mui/x-data-grid-pro'` or import DataGrid from @mui/x-data-grid." : (0, _formatErrorMessage2.default)(124));
 }
 
 /**
@@ -22,5 +24,5 @@ function DataGridPremium() {
   if (process.env.NODE_ENV === 'production') {
     return null;
   }
-  throw new Error(["You try to import Data Grid Premium from @mui/x-data-grid-pro but this module isn't exported from this npm package.", '', 'Instead, if you have a Premium plan license or want to try Premium, you can do this:', `import { DataGridPremium } from '@mui/x-data-grid-premium'`, '', "Otherwise, you can stay on the Pro plan: `import { DataGridPro } from '@mui/x-data-grid-pro'`.", ''].join('\n'));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Data Grid: DataGridPremium is not exported from @mui/x-data-grid-pro. ' + 'For Premium features, use @mui/x-data-grid-premium with a Premium plan license. ' + "Otherwise, use `import { DataGridPro } from '@mui/x-data-grid-pro'` for Pro features." : (0, _formatErrorMessage2.default)(125));
 }

package/DataGridPro/DataGrid.mjs

@@ -0,0 +1,20 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+/**
+ * @deprecated Import DataGridPro instead.
+ */
+export function DataGrid() {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Data Grid: DataGrid is not exported from @mui/x-data-grid-pro. ' + 'The Pro package exports DataGridPro instead. ' + "Use `import { DataGridPro } from '@mui/x-data-grid-pro'` or import DataGrid from @mui/x-data-grid." : _formatErrorMessage(124));
+}
+
+/**
+ * @deprecated Import DataGridPro instead.
+ */
+export function DataGridPremium() {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Data Grid: DataGridPremium is not exported from @mui/x-data-grid-pro. ' + 'For Premium features, use @mui/x-data-grid-premium with a Premium plan license. ' + "Otherwise, use `import { DataGridPro } from '@mui/x-data-grid-pro'` for Pro features." : _formatErrorMessage(125));
+}

package/{esm/DataGridPro/DataGridPro.d.ts → DataGridPro/DataGridPro.d.mts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type GridValidRowModel } from '@mui/x-data-grid';
-import type { DataGridProProps } from "../models/dataGridProProps.js";
-export type { GridProSlotsComponent as GridSlots } from "../models/index.js";
+import type { DataGridProProps } from "../models/dataGridProProps.mjs";
+export type { GridProSlotsComponent as GridSlots } from "../models/index.mjs";
 interface DataGridProComponent {
   <R extends GridValidRowModel = any>(props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
   propTypes?: any;

package/DataGridPro/DataGridPro.js

@@ -10,7 +10,8 @@ exports.DataGridPro = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _xLicense = require("@mui/x-license");
+var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
+var _Watermark = require("@mui/x-license/Watermark");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _material = require("@mui/x-data-grid/material");
@@ -34,8 +35,8 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc3MjA2NDAwMDAwMA==";
-const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
+const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
 });
@@ -43,7 +44,7 @@ const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps,
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
   const privateApiRef = (0, _internals.useGridApiInitialization)(props.apiRef, props);
   (0, _useDataGridProComponent.useDataGridProComponent)(privateApiRef, props, configuration);
-  (0, _xLicense.useLicenseVerifier)('x-data-grid-pro', releaseInfo);
+  (0, _useLicenseVerifier.useLicenseVerifier)('x-data-grid-pro', releaseInfo);
   if (process.env.NODE_ENV !== 'production') {
     (0, _internals.validateProps)(props, _propValidation.propValidatorsDataGridPro);
   }
@@ -124,6 +125,64 @@ DataGridProRaw.propTypes = {
    * Controls the modes of the cells.
    */
   cellModesModel: _propTypes.default.object,
+  /**
+   * Definition of the column rendered when the `checkboxSelection` prop is enabled.
+   *
+   * @warning
+   * Be careful when overriding `renderHeader` or `renderCell` in the `checkboxColDef` prop.
+   * The default implementation of these properties includes the logic for selecting all rows and selecting a single row, respectively.
+   * Overriding them without providing the same functionality will break the row selection.
+   */
+  checkboxColDef: _propTypes.default.shape({
+    align: _propTypes.default.oneOf(['center', 'left', 'right']),
+    cellClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+    colSpan: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
+    description: _propTypes.default.string,
+    disableColumnMenu: _propTypes.default.bool,
+    disableExport: _propTypes.default.bool,
+    disableReorder: _propTypes.default.bool,
+    display: _propTypes.default.oneOf(['flex', 'text']),
+    editable: _propTypes.default.bool,
+    examples: _propTypes.default.array,
+    filterable: _propTypes.default.bool,
+    filterOperators: _propTypes.default.arrayOf(_propTypes.default.shape({
+      getApplyFilterFn: _propTypes.default.func.isRequired,
+      getValueAsString: _propTypes.default.func,
+      headerLabel: _propTypes.default.string,
+      InputComponent: _propTypes.default.elementType,
+      InputComponentProps: _propTypes.default.object,
+      label: _propTypes.default.string,
+      requiresFilterValue: _propTypes.default.bool,
+      value: _propTypes.default.string.isRequired
+    })),
+    flex: _propTypes.default.number,
+    getApplyQuickFilterFn: _propTypes.default.func,
+    getSortComparator: _propTypes.default.func,
+    groupable: _propTypes.default.bool,
+    headerAlign: _propTypes.default.oneOf(['center', 'left', 'right']),
+    headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+    headerName: _propTypes.default.string,
+    hideable: _propTypes.default.bool,
+    hideSortIcons: _propTypes.default.bool,
+    maxWidth: _propTypes.default.number,
+    minWidth: _propTypes.default.number,
+    pinnable: _propTypes.default.bool,
+    preProcessEditCellProps: _propTypes.default.func,
+    renderCell: _propTypes.default.func,
+    renderEditCell: _propTypes.default.func,
+    renderHeader: _propTypes.default.func,
+    renderHeaderFilter: _propTypes.default.func,
+    resizable: _propTypes.default.bool,
+    rowSpanValueGetter: _propTypes.default.func,
+    sortable: _propTypes.default.bool,
+    sortComparator: _propTypes.default.func,
+    sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])),
+    valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
+    valueParser: _propTypes.default.func,
+    valueSetter: _propTypes.default.func,
+    width: _propTypes.default.number
+  }),
   /**
    * If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
    * @default false

package/{esm/DataGridPro/DataGridPro.js → DataGridPro/DataGridPro.mjs}

@@ -3,17 +3,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useLicenseVerifier, Watermark } from '@mui/x-license';
+import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
+import { Watermark } from '@mui/x-license/Watermark';
 import { GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { validateProps, useGridApiInitialization, useGridParamsOverridableMethods, useIsCellEditable } from '@mui/x-data-grid/internals';
 import { useMaterialCSSVariables } from '@mui/x-data-grid/material';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
-import { useDataGridProComponent } from "./useDataGridProComponent.js";
-import { useDataGridProProps } from "./useDataGridProProps.js";
-import { propValidatorsDataGridPro } from "../internals/propValidation.js";
-import { useGridAriaAttributesPro } from "../hooks/utils/useGridAriaAttributes.js";
-import { useGridRowAriaAttributesPro } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.mjs";
+import { useDataGridProComponent } from "./useDataGridProComponent.mjs";
+import { useDataGridProProps } from "./useDataGridProProps.mjs";
+import { propValidatorsDataGridPro } from "../internals/propValidation.mjs";
+import { useGridAriaAttributesPro } from "../hooks/utils/useGridAriaAttributes.mjs";
+import { useGridRowAriaAttributesPro } from "../hooks/features/rows/useGridRowAriaAttributes.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
@@ -27,7 +28,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc3MjA2NDAwMDAwMA==";
+const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -117,6 +118,64 @@ DataGridProRaw.propTypes = {
    * Controls the modes of the cells.
    */
   cellModesModel: PropTypes.object,
+  /**
+   * Definition of the column rendered when the `checkboxSelection` prop is enabled.
+   *
+   * @warning
+   * Be careful when overriding `renderHeader` or `renderCell` in the `checkboxColDef` prop.
+   * The default implementation of these properties includes the logic for selecting all rows and selecting a single row, respectively.
+   * Overriding them without providing the same functionality will break the row selection.
+   */
+  checkboxColDef: PropTypes.shape({
+    align: PropTypes.oneOf(['center', 'left', 'right']),
+    cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
+    description: PropTypes.string,
+    disableColumnMenu: PropTypes.bool,
+    disableExport: PropTypes.bool,
+    disableReorder: PropTypes.bool,
+    display: PropTypes.oneOf(['flex', 'text']),
+    editable: PropTypes.bool,
+    examples: PropTypes.array,
+    filterable: PropTypes.bool,
+    filterOperators: PropTypes.arrayOf(PropTypes.shape({
+      getApplyFilterFn: PropTypes.func.isRequired,
+      getValueAsString: PropTypes.func,
+      headerLabel: PropTypes.string,
+      InputComponent: PropTypes.elementType,
+      InputComponentProps: PropTypes.object,
+      label: PropTypes.string,
+      requiresFilterValue: PropTypes.bool,
+      value: PropTypes.string.isRequired
+    })),
+    flex: PropTypes.number,
+    getApplyQuickFilterFn: PropTypes.func,
+    getSortComparator: PropTypes.func,
+    groupable: PropTypes.bool,
+    headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
+    headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    headerName: PropTypes.string,
+    hideable: PropTypes.bool,
+    hideSortIcons: PropTypes.bool,
+    maxWidth: PropTypes.number,
+    minWidth: PropTypes.number,
+    pinnable: PropTypes.bool,
+    preProcessEditCellProps: PropTypes.func,
+    renderCell: PropTypes.func,
+    renderEditCell: PropTypes.func,
+    renderHeader: PropTypes.func,
+    renderHeaderFilter: PropTypes.func,
+    resizable: PropTypes.bool,
+    rowSpanValueGetter: PropTypes.func,
+    sortable: PropTypes.bool,
+    sortComparator: PropTypes.func,
+    sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
+    valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
+    valueParser: PropTypes.func,
+    valueSetter: PropTypes.func,
+    width: PropTypes.number
+  }),
   /**
    * If `true`, the Data Grid will display an extra column with checkboxes for selecting rows.
    * @default false

package/DataGridPro/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./DataGrid.mjs";
+export * from "./DataGridPro.mjs";
+export { DATA_GRID_PRO_PROPS_DEFAULT_VALUES } from "./useDataGridProProps.mjs";

package/DataGridPro/index.mjs

@@ -0,0 +1,3 @@
+export * from "./DataGrid.mjs";
+export * from "./DataGridPro.mjs";
+export { DATA_GRID_PRO_PROPS_DEFAULT_VALUES } from "./useDataGridProProps.mjs";

package/{esm/DataGridPro/useDataGridProComponent.d.ts → DataGridPro/useDataGridProComponent.d.mts}

@@ -1,5 +1,5 @@
 import type { RefObject } from '@mui/x-internals/types';
 import { type GridConfiguration } from '@mui/x-data-grid/internals';
-import type { GridPrivateApiPro } from "../models/gridApiPro.js";
-import type { DataGridProProcessedProps } from "../models/dataGridProProps.js";
+import type { GridPrivateApiPro } from "../models/gridApiPro.mjs";
+import type { DataGridProProcessedProps } from "../models/dataGridProProps.mjs";
 export declare const useDataGridProComponent: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps, configuration: GridConfiguration) => void;

package/{esm/DataGridPro/useDataGridProComponent.js → DataGridPro/useDataGridProComponent.mjs}

@@ -3,24 +3,24 @@
 import * as React from 'react';
 import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, useFirstRender } from '@mui/x-data-grid/internals';
 // Pro-only features
-import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
-import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
-import { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
-import { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
-import { useGridDataSourceTreeDataPreProcessors } from "../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js";
-import { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/features/columnPinning/useGridColumnPinning.js";
-import { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.js";
-import { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.js";
-import { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
-import { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
-import { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
-import { useGridLazyLoader } from "../hooks/features/lazyLoader/useGridLazyLoader.js";
-import { useGridLazyLoaderPreProcessors } from "../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js";
-import { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features/rowPinning/useGridRowPinning.js";
-import { useGridRowPinningPreProcessors } from "../hooks/features/rowPinning/useGridRowPinningPreProcessors.js";
-import { useGridDataSourcePro as useGridDataSource, dataSourceStateInitializer } from "../hooks/features/dataSource/useGridDataSourcePro.js";
-import { useGridDataSourceLazyLoader } from "../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js";
-import { useGridInfiniteLoadingIntersection } from "../hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.js";
+import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.mjs";
+import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.mjs";
+import { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.mjs";
+import { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.mjs";
+import { useGridDataSourceTreeDataPreProcessors } from "../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.mjs";
+import { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/features/columnPinning/useGridColumnPinning.mjs";
+import { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.mjs";
+import { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.mjs";
+import { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.mjs";
+import { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.mjs";
+import { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.mjs";
+import { useGridLazyLoader } from "../hooks/features/lazyLoader/useGridLazyLoader.mjs";
+import { useGridLazyLoaderPreProcessors } from "../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.mjs";
+import { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features/rowPinning/useGridRowPinning.mjs";
+import { useGridRowPinningPreProcessors } from "../hooks/features/rowPinning/useGridRowPinningPreProcessors.mjs";
+import { useGridDataSourcePro as useGridDataSource, dataSourceStateInitializer } from "../hooks/features/dataSource/useGridDataSourcePro.mjs";
+import { useGridDataSourceLazyLoader } from "../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.mjs";
+import { useGridInfiniteLoadingIntersection } from "../hooks/features/serverSideLazyLoader/useGridInfiniteLoadingIntersection.mjs";
 export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridInitialization(apiRef, props);
 

package/{esm/DataGridPro/useDataGridProProps.d.ts → DataGridPro/useDataGridProProps.d.mts}

@@ -1,5 +1,5 @@
 import { type GridValidRowModel } from '@mui/x-data-grid';
-import type { DataGridProProps, DataGridProProcessedProps, DataGridProPropsWithDefaultValue } from "../models/dataGridProProps.js";
+import type { DataGridProProps, DataGridProProcessedProps, DataGridProPropsWithDefaultValue } from "../models/dataGridProProps.mjs";
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
  */

package/{esm/DataGridPro/useDataGridProProps.js → DataGridPro/useDataGridProProps.mjs}

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material/styles';
 import { getThemeProps } from '@mui/system';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 import { computeSlots, ROW_SELECTION_PROPAGATION_DEFAULT } from '@mui/x-data-grid/internals';
-import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
+import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.mjs";
 const getDataGridProForcedProps = themedProps => _extends({
   signature: 'DataGridPro'
 }, themedProps.dataSource ? {

package/{esm/components/GridColumnHeaders.js → components/GridColumnHeaders.mjs}

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars, GridBaseColumnHeaders } from '@mui/x-data-grid/internals';
-import { useGridColumnHeadersPro } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+import { useGridColumnHeadersPro } from "../hooks/features/columnHeaders/useGridColumnHeaders.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div', {
   slot: 'internal',

package/{esm/components/GridColumnMenuPinningItem.js → components/GridColumnMenuPinningItem.mjs}

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import PropTypes from 'prop-types';
 import { GridPinnedColumnPosition } from '@mui/x-data-grid';
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.mjs";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuPinningItem(props) {
   const {

package/{esm/components/GridDataSourceTreeDataGroupingCell.js → components/GridDataSourceTreeDataGroupingCell.mjs}

@@ -3,9 +3,9 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
 import { vars, gridRowSelector } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
-import { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from "../hooks/features/dataSource/gridDataSourceSelector.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.mjs";
+import { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from "../hooks/features/dataSource/gridDataSourceSelector.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/{esm/components/GridDetailPanel.js → components/GridDetailPanel.mjs}

@@ -5,8 +5,8 @@ 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";
-import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled('div', {
   name: 'MuiDataGrid',

package/{esm/components/GridDetailPanelToggleCell.js → components/GridDetailPanelToggleCell.mjs}

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
 import { createSelector } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.mjs";
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/{esm/components/GridDetailPanels.js → components/GridDetailPanels.mjs}

@@ -3,11 +3,11 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
-import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowIdsSelector } from "../hooks/features/detailPanel/index.js";
-import { GridDetailPanel } from "./GridDetailPanel.js";
-import { gridDetailPanelRawHeightCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.js";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.mjs";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowIdsSelector } from "../hooks/features/detailPanel/index.mjs";
+import { GridDetailPanel } from "./GridDetailPanel.mjs";
+import { gridDetailPanelRawHeightCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {

package/{esm/components/GridProColumnMenu.d.ts → components/GridProColumnMenu.d.mts}

@@ -1,5 +1,5 @@
 import type { GridColumnMenuComponent } from '@mui/x-data-grid/internals';
-import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.js";
+import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.mjs";
 export declare const GRID_COLUMN_MENU_SLOTS_PRO: {
   columnMenuPinningItem: typeof GridColumnMenuPinningItem;
   columnMenuSortItem: typeof import("@mui/x-data-grid").GridColumnMenuSortItem;

package/{esm/components/GridProColumnMenu.js → components/GridProColumnMenu.mjs}

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.js";
+import { GridColumnMenuPinningItem } from "./GridColumnMenuPinningItem.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_COLUMN_MENU_SLOTS_PRO = _extends({}, GRID_COLUMN_MENU_SLOTS, {
   columnMenuPinningItem: GridColumnMenuPinningItem

package/{esm/components/GridRowReorderCell.js → components/GridRowReorderCell.mjs}

@@ -7,7 +7,7 @@ import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridClasses } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, isEventTargetInPortal, vars } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/{esm/components/GridTreeDataGroupingCell.js → components/GridTreeDataGroupingCell.mjs}

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { vars } from '@mui/x-data-grid/internals';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridHeaderFilterCell = void 0;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -337,7 +338,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
           return null;
         }
         if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-          return new Error(`Expected prop '${propName}' to be of type Element`);
+          return new Error(process.env.NODE_ENV !== "production" ? `Expected prop '${propName}' to be of type Element` : (0, _formatErrorMessage2.default)(49, propName));
         }
         return null;
       }