@mui/x-data-grid-premium 8.0.0-alpha.4 → 8.0.0-alpha.6

package/CHANGELOG.md

@@ -5,6 +5,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.6
+
+_Dec 26, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Improve Data Grid scrolling performance
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@JoepVerkoelen, @k-rajat19, @lauri865.
+Following are all team members who have contributed to this release:
+@flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `sanitizeFilterItemValue()` utility is not exported anymore.
+
+#### `@mui/x-data-grid@8.0.0-alpha.6`
+
+- [DataGrid] Avoid subscribing to `renderContext` state in grid root for better scroll performance (#15986) @lauri865
+- [DataGrid] Fix header filters showing clear button while empty (#15829) @k-rajat19
+- [DataGrid] Improve test coverage of server side data source (#15942) @MBilalShafi
+- [DataGrid] Move progress components to leaf import (#15914) @romgrk
+- [DataGrid] Move skeleton to leaf import (#15931) @romgrk
+- [DataGrid] Replace `forwardRef` with a shim for forward compatibility (#15955) @lauri865
+- [l10n] Improve Dutch (nl-NL) locale (#15994) @JoepVerkoelen
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.6` [![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.0.0-alpha.6`, plus:
+
+- [DataGridPremium] Fix column unpinning with row grouping (#15908) @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.6`
+
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` to get the actions in the `actionBar` slot and in internal components (#15843) @flaviendelangle
+- [pickers] Use `usePickerContext()` to get the view-related props in the layout, toolbar and tabs slots (#15606) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.6`
+
+No changes since `@mui/x-charts@v8.0.0-alpha.5`.
+
+#### `@mui/x-charts-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.6`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.5`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.6` [![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.0.0-alpha.6`.
+
+### Docs
+
+- [docs] Remove production profiler from docs build (#15959) @lauri865
+- [code-infra] Add new `next-env.d.ts` changes (#15947) @JCQuintas
+
+## 8.0.0-alpha.5
+
+_Dec 19, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@good-jinu, @k-rajat19.
+Following are all team members who have contributed to this release:
+@alexfauquette, @cherniavskii, @flaviendelangle, @KenanYusuf, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+
+  - For `.root` element, use `slotProps.root`.
+  - For `.main` element (the one with `role="grid"`), use `slotProps.main`.
+
+- `detailPanelExpandedRowIds` and `onDetailPanelExpandedRowIdsChange` props use a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array:
+
+  ```diff
+  -detailPanelExpandedRowIds?: GridRowId[];
+  +detailPanelExpandedRowIds?: Set<GridRowId>;
+
+  -onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void;
+  +onDetailPanelExpandedRowIdsChange?: (ids: Set<GridRowId>, details: GridCallbackDetails) => void;
+  ```
+
+- `apiRef.current.getExpandedDetailPanels` and `apiRef.current.setExpandedDetailPanels` methods receive and return a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array.
+- `gridDetailPanelExpandedRowIdsSelector` returns a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array.
+- `gridDetailPanelExpandedRowsHeightCacheSelector` was removed.
+
+#### `@mui/x-data-grid@8.0.0-alpha.5`
+
+- [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15915) @k-rajat19
+- [DataGrid] Fix autosizing with virtualized columns (#15116) @k-rajat19
+- [DataGrid] Move `<Badge />` to leaf import (#15879) @romgrk
+- [DataGrid] Move `<ListItemText />` and `<ListItemIcon />` to leaf import (#15869) @romgrk
+- [DataGrid] Remove the Joy UI demo (#15913) @romgrk
+- [DataGrid] Update quick filter input variant (#15909) @KenanYusuf
+- [DataGrid] Use `slotProps` to forward props to `.main` and `.root` elements (#15870) @MBilalShafi
+- [l10n] Improve Korean(ko-KR) locale (#15878) @good-jinu
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.5` [![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.0.0-alpha.5`, plus:
+
+- [DataGridPro] Use `Set` for `detailPanelExpandedRowIds` (#15835) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.5` [![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.0.0-alpha.5`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `<PickersMonth />` component has been moved inside the Month Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#month-calendar).
+
+- The `<PickersYear />` component has been moved inside the Year Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#year-calendar).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.5`
+
+- [pickers] Add verification to disable skipped hours in spring forward DST (#15849) @flaviendelangle
+- [pickers] Remove `PickersMonth` and `PickersYear` from the theme and remove the `div` wrapping each button (#15806) @flaviendelangle
+- [pickers] Use the new `ownerState` object on the `<PickersTextField />` component (#15863) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.5` [![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.0.0-alpha.5`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.5`
+
+- [charts] Fix `<ScatterChart />` value type if `null` (#15917) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.5` [![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.0.0-alpha.5`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.5`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.4`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.5` [![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.0.0-alpha.5`.
+
+### Core
+
+- [code-infra] Remove `@mui/material-nextjs` dependency (#15925) @LukasTy
+
 ## 8.0.0-alpha.4
 
 _Dec 13, 2024_
@@ -39,6 +220,7 @@ Following are all team members who have contributed to this release:
   -const output = useGridSelector(apiRef, selector, equals)
   +const output = useGridSelector(apiRef, selector, arguments, equals)
   ```
+
 - The default variant for text fields and selects in the filter panel has been changed to `outlined`.
 - The "row spanning" feature is now stable.
   ```diff

package/DataGridPremium/DataGridPremium.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xLicense = require("@mui/x-license");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useDataGridPremiumComponent = require("./useDataGridPremiumComponent");
 var _useDataGridPremiumProps = require("./useDataGridPremiumProps");
 var _releaseInfo = require("../utils/releaseInfo");
@@ -30,7 +31,7 @@ let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [..._internals.propValidatorsDataGrid, ..._internals.propValidatorsDataGridPro];
 }
-const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(inProps, ref) {
+const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(inProps, ref) {
   const props = (0, _useDataGridPremiumProps.useDataGridPremiumProps)(inProps);
   const privateApiRef = (0, _useDataGridPremiumComponent.useDataGridPremiumComponent)(props.apiRef, props);
   (0, _xLicense.useLicenseVerifier)('x-data-grid-premium', releaseInfo);
@@ -44,9 +45,9 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGridPro.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
-    }, props.forwardedProps, {
+      sx: props.sx
+    }, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridBody, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
           packageName: "x-data-grid-premium",
@@ -116,6 +117,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   autosizeOptions: _propTypes.default.shape({
     columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    disableColumnVirtualization: _propTypes.default.bool,
     expand: _propTypes.default.bool,
     includeHeaders: _propTypes.default.bool,
     includeOutliers: _propTypes.default.bool,
@@ -193,7 +195,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * The row ids to show the detail panel.
    */
-  detailPanelExpandedRowIds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired),
+  detailPanelExpandedRowIds: _propTypes.default /* @typescript-to-proptypes-ignore */.instanceOf(Set),
   /**
    * If `true`, aggregation is disabled.
    * @default false
@@ -339,11 +341,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: _propTypes.default.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.

package/DataGridPremium/useDataGridPremiumProps.js

@@ -42,12 +42,12 @@ const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PREMIUM_PROPS_D
 });
 const defaultSlots = _dataGridPremiumDefaultSlotsComponents.DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridPremiumProps = inProps => {
-  const themedProps = (0, _internals.useProps)(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => (0, _extends2.default)({}, _xDataGridPro.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => (0, _internals.computeSlots)({
     defaultSlots,

package/components/GridColumnMenuAggregationItem.js

@@ -12,8 +12,6 @@ var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toP
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _utils = require("@mui/utils");
@@ -60,47 +58,44 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
-    disableRipple: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuAggregationIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
-        size: "small",
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+    inert: true,
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuAggregationIcon, {
+      fontSize: "small"
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+      size: "small",
+      fullWidth: true,
+      sx: {
+        minWidth: 150
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        id: `${id}-label`,
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, {
+        labelId: `${id}-label`,
+        id: `${id}-input`,
+        value: selectedAggregationRule,
+        label: label,
+        color: "primary",
+        onChange: handleAggregationItemChange,
+        onBlur: event => event.stopPropagation(),
         fullWidth: true,
-        sx: {
-          minWidth: 150
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
-          id: `${id}-label`,
-          children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, {
-          labelId: `${id}-label`,
-          id: `${id}-input`,
-          value: selectedAggregationRule,
-          label: label,
-          color: "primary",
-          onChange: handleAggregationItemChange,
-          onBlur: event => event.stopPropagation(),
-          fullWidth: true,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
-            value: "",
-            children: "..."
-          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
-            value: aggFunc,
-            children: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
-              apiRef,
-              aggregationRule: {
-                aggregationFunctionName: aggFunc,
-                aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-              }
-            })
-          }, aggFunc))]
-        })]
-      })
-    })]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+          value: "",
+          children: "..."
+        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+          value: aggFunc,
+          children: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: aggFunc,
+              aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+            }
+          })
+        }, aggFunc))]
+      })]
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {

package/components/GridColumnMenuRowGroupItem.js

@@ -1,14 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnMenuRowGroupItem = GridColumnMenuRowGroupItem;
 var React = _interopRequireWildcard(require("react"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridRowGroupingSelector = require("../hooks/features/rowGrouping/gridRowGroupingSelector");
@@ -31,16 +28,13 @@ function GridColumnMenuRowGroupItem(props) {
     };
     const groupedColumn = columnsLookup[field];
     const name = groupedColumn.headerName ?? field;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
       disabled: !groupedColumn.groupable,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     }, field);
   };
   if (!colDef || !(0, _gridRowGroupingUtils.isGroupingColumn)(colDef.field)) {

package/components/GridColumnMenuRowUngroupItem.js

@@ -1,14 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnMenuRowUngroupItem = GridColumnMenuRowUngroupItem;
 var React = _interopRequireWildcard(require("react"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridRowGroupingSelector = require("../hooks/features/rowGrouping/gridRowGroupingSelector");
@@ -36,25 +33,19 @@ function GridColumnMenuRowUngroupItem(props) {
   };
   const name = columnsLookup[colDef.field].headerName ?? colDef.field;
   if (rowGroupingModel.includes(colDef.field)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: groupColumn,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuGroupIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('groupColumn')(name)
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuGroupIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('groupColumn')(name)
   });
 }

package/components/GridDataSourceGroupingCriteriaCell.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -55,7 +54,7 @@ function GridGroupingCriteriaCellIcon(props) {
   if (isDataLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.loadingContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCircularProgress, {
         size: "1rem",
         color: "inherit"
       })

package/components/GridPremiumColumnMenu.d.ts

@@ -30,4 +30,4 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
         displayOrder: number;
     };
 };
-export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;

package/components/GridPremiumColumnMenu.js

@@ -11,6 +11,7 @@ exports.GridPremiumColumnMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridColumnMenuAggregationItem = require("./GridColumnMenuAggregationItem");
 var _rowGrouping = require("../hooks/features/rowGrouping");
 var _GridColumnMenuRowGroupItem = require("./GridColumnMenuRowGroupItem");
@@ -37,11 +38,10 @@ const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = exports.GRID_COLUMN_MENU_SLOT_PROPS_
     displayOrder: 27
   }
 });
-const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridGenericColumnMenu, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+const GridPremiumColumnMenu = exports.GridPremiumColumnMenu = (0, _forwardRef.forwardRef)(function GridPremiumColumnMenuSimple(props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM,
+    ref: ref
   }));
 });

package/esm/DataGridPremium/DataGridPremium.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot, GridContextProvider } from '@mui/x-data-grid-pro';
 import { propValidatorsDataGrid, propValidatorsDataGridPro, validateProps } from '@mui/x-data-grid-pro/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
 import { getReleaseInfo } from "../utils/releaseInfo.js";
@@ -23,7 +24,7 @@ let dataGridPremiumPropValidators;
 if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
-const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(inProps, ref) {
+const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
   const props = useDataGridPremiumProps(inProps);
   const privateApiRef = useDataGridPremiumComponent(props.apiRef, props);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
@@ -37,9 +38,9 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
-    }, props.forwardedProps, {
+      sx: props.sx
+    }, props.slotProps?.root, {
+      ref: ref,
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-premium",
@@ -109,6 +110,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   autosizeOptions: PropTypes.shape({
     columns: PropTypes.arrayOf(PropTypes.string),
+    disableColumnVirtualization: PropTypes.bool,
     expand: PropTypes.bool,
     includeHeaders: PropTypes.bool,
     includeOutliers: PropTypes.bool,
@@ -186,7 +188,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * The row ids to show the detail panel.
    */
-  detailPanelExpandedRowIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+  detailPanelExpandedRowIds: PropTypes /* @typescript-to-proptypes-ignore */.instanceOf(Set),
   /**
    * If `true`, aggregation is disabled.
    * @default false
@@ -332,11 +334,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
-  /**
-   * Forwarded props for the Data Grid root element.
-   * @ignore - do not document.
-   */
-  forwardedProps: PropTypes.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.

package/esm/DataGridPremium/useDataGridPremiumProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT, GridSignature } from '@mui/x-data-grid-pro';
-import { computeSlots, useProps } from '@mui/x-data-grid-pro/internals';
+import { computeSlots } from '@mui/x-data-grid-pro/internals';
 import { GRID_AGGREGATION_FUNCTIONS } from "../hooks/features/aggregation/index.js";
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridPremiumDefaultSlotsComponents.js";
 const getDataGridPremiumForcedProps = themedProps => _extends({
@@ -34,12 +34,12 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
 });
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridPremiumProps = inProps => {
-  const themedProps = useProps(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,