@mui/x-data-grid-premium 8.0.0-alpha.1 → 8.0.0-alpha.11

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");
@@ -26,11 +27,15 @@ const configuration = {
   }
 };
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
+const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+  packageName: "x-data-grid-premium",
+  releaseInfo: releaseInfo
+});
 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);
@@ -41,18 +46,13 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
     privateApiRef: privateApiRef,
     configuration: configuration,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGridPro.GridRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
-      sx: props.sx,
-      ref: ref
-    }, props.forwardedProps, {
-      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",
-          releaseInfo: releaseInfo
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridFooterPlaceholder, {})]
+      sx: props.sx
+    }, props.slotProps?.root, {
+      ref: ref,
+      children: watermark
     }))
   });
 });
@@ -63,7 +63,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Aggregation functions available on the grid.
-   * @default GRID_AGGREGATION_FUNCTIONS
+   * @default GRID_AGGREGATION_FUNCTIONS when `unstable_dataSource` is not provided, `{}` when `unstable_dataSource` is provided
    */
   aggregationFunctions: _propTypes.default.object,
   /**
@@ -81,7 +81,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
   apiRef: _propTypes.default.shape({
-    current: _propTypes.default.object.isRequired
+    current: _propTypes.default.object
   }),
   /**
    * The label of the Data Grid.
@@ -116,6 +116,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 +194,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
@@ -311,7 +312,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, then the feature is fully disabled, and neither property nor method calls will have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    ariaV8: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**
@@ -340,11 +340,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.
@@ -459,14 +454,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     clipboardExport: _propTypes.default.bool,
     csvExport: _propTypes.default.bool
   }), _propTypes.default.bool]),
-  /**
-   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
-   * will select all the rows under it.
-   * If `deselect`, it will deselect all the rows under it.
-   * Works only if `checkboxSelection` is enabled.
-   * @default "deselect"
-   */
-  indeterminateCheckboxAction: _propTypes.default.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGridPremium.
    * The data in it is set in the state on initialization but isn't controlled.
@@ -934,14 +921,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Controls the modes of the rows.
    */
   rowModesModel: _propTypes.default.object,
-  /**
-   * The milliseconds delay to wait after measuring the row height before recalculating row positions.
-   * Setting it to a lower value could be useful when using dynamic row height,
-   * but might reduce performance when displaying a large number of rows.
-   * @default 166
-   * @deprecated
-   */
-  rowPositionsDebounceMs: _propTypes.default.number,
   /**
    * If `true`, the reordering of rows is enabled.
    * @default false
@@ -971,7 +950,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * - Deselecting a descendant of a selected parent deselects the parent automatically.
    *
    * Works with tree data and row grouping on the client-side only.
-   * @default { parents: false, descendants: false }
+   * @default { parents: true, descendants: true }
    */
   rowSelectionPropagation: _propTypes.default.shape({
     descendants: _propTypes.default.bool,
@@ -981,7 +960,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.
    * Set it to 'server' if you would like to enable lazy loading.
-   * * @default "client"
+   * @default "client"
    */
   rowsLoadingMode: _propTypes.default.oneOf(['client', 'server']),
   /**
@@ -989,12 +968,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: _propTypes.default.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
   scrollbarSize: _propTypes.default.number,
   /**
    * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
+   * If combined with `unstable_lazyLoading`, it defines the area where the next data request is triggered.
    * @default 80
    */
   scrollEndThreshold: _propTypes.default.number,
@@ -1058,6 +1043,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   treeData: _propTypes.default.bool,
   unstable_dataSource: _propTypes.default.shape({
+    getAggregatedValue: _propTypes.default.func,
     getChildrenCount: _propTypes.default.func,
     getGroupKey: _propTypes.default.func,
     getRows: _propTypes.default.func.isRequired,
@@ -1068,6 +1054,18 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     get: _propTypes.default.func.isRequired,
     set: _propTypes.default.func.isRequired
   }),
+  /**
+   * Used together with `unstable_dataSource` to enable lazy loading.
+   * If enabled, the grid stops adding `paginationModel` to the data requests (`getRows`)
+   * and starts sending `start` and `end` values depending on the loading mode and the scroll position.
+   * @default false
+   */
+  unstable_lazyLoading: _propTypes.default.bool,
+  /**
+   * If positive, the Data Grid will throttle data source requests on rendered rows interval change.
+   * @default 500
+   */
+  unstable_lazyLoadingRequestThrottleMs: _propTypes.default.number,
   /**
    * Definition of the column rendered when the `unstable_listView` prop is enabled.
    */
@@ -1085,10 +1083,13 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   unstable_listView: _propTypes.default.bool,
   unstable_onDataSourceError: _propTypes.default.func,
   /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
    * @default false
    */
-  unstable_rowSpanning: _propTypes.default.bool
+  virtualizeColumnsWithAutoRowHeight: _propTypes.default.bool
 } : void 0;
 /**
  * Demos:

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
-export declare const useDataGridPremiumComponent: (inputApiRef: React.MutableRefObject<GridApiPremium> | undefined, props: DataGridPremiumProcessedProps) => React.MutableRefObject<GridPrivateApiPremium>;
+export declare const useDataGridPremiumComponent: (inputApiRef: RefObject<GridApiPremium | null> | undefined, props: DataGridPremiumProcessedProps) => import("react").RefObject<GridPrivateApiPremium>;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataGridPremiumComponent = void 0;
 var _internals = require("@mui/x-data-grid-pro/internals");
+var _useGridDataSourcePremium = require("../hooks/features/dataSource/useGridDataSourcePremium");
 var _useGridAggregation = require("../hooks/features/aggregation/useGridAggregation");
 var _useGridAggregationPreProcessors = require("../hooks/features/aggregation/useGridAggregationPreProcessors");
 var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
@@ -39,7 +40,6 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAggregation.aggregationStateInitializer, apiRef, props);
@@ -49,6 +49,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowPinningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
@@ -59,17 +60,18 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.virtualizationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.dataSourceStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _internals.useGridTreeData)(apiRef, props);
   (0, _useGridAggregation.useGridAggregation)(apiRef, props);
+  (0, _useGridDataSourcePremium.useGridDataSourcePremium)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridRowSelection)(apiRef, props);
   (0, _useGridCellSelection.useGridCellSelection)(apiRef, props);
@@ -97,6 +99,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _internals.useGridInfiniteLoader)(apiRef, props);
   (0, _internals.useGridLazyLoader)(apiRef, props);
+  (0, _internals.useGridDataSourceLazyLoader)(apiRef, props);
   (0, _internals.useGridColumnMenu)(apiRef);
   (0, _internals.useGridCsvExport)(apiRef, props);
   (0, _internals.useGridPrintExport)(apiRef, props);
@@ -105,7 +108,6 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridDimensions)(apiRef, props);
   (0, _internals.useGridEvents)(apiRef, props);
   (0, _internals.useGridStatePersistence)(apiRef);
-  (0, _internals.useGridDataSource)(apiRef, props);
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
   return apiRef;

package/DataGridPremium/useDataGridPremiumProps.js

@@ -42,18 +42,20 @@ 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,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+    aggregationFunctions: {}
+  } : {}, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Data Grid Premium
 
 This package is the Premium plan edition of the Data Grid components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 

package/components/GridAggregationHeader.js

@@ -20,7 +20,12 @@ const _excluded = ["renderHeader"];
 const GridAggregationHeaderRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'AggregationColumnHeader',
-  overridesResolver: (_, styles) => styles.aggregationColumnHeader
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.aggregationColumnHeader, ownerState.colDef.headerAlign === 'left' && styles['aggregationColumnHeader--alignLeft'], ownerState.colDef.headerAlign === 'center' && styles['aggregationColumnHeader--alignCenter'], ownerState.colDef.headerAlign === 'right' && styles['aggregationColumnHeader--alignRight']];
+  }
 })({
   display: 'flex',
   flexDirection: 'column',

package/components/GridColumnMenuAggregationItem.js

@@ -1,19 +1,18 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnMenuAggregationItem = GridColumnMenuAggregationItem;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
-var React = _interopRequireWildcard(require("react"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _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");
@@ -22,18 +21,27 @@ var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
 var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["native"];
 function GridColumnMenuAggregationItem(props) {
   const {
     colDef
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const inputRef = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const id = (0, _utils.unstable_useId)();
   const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAggregationSelectors.gridAggregationModelSelector);
   const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
     aggregationFunctions: rootProps.aggregationFunctions,
-    colDef
-  }), [colDef, rootProps.aggregationFunctions]);
+    colDef,
+    isDataSource: !!rootProps.unstable_dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+  const _ref = rootProps.slotProps?.baseSelect || {},
+    {
+      native: isBaseSelectNative = false
+    } = _ref,
+    baseSelectProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const selectedAggregationRule = React.useMemo(() => {
     if (!colDef || !aggregationModel[colDef.field]) {
       return '';
@@ -42,12 +50,13 @@ function GridColumnMenuAggregationItem(props) {
     if ((0, _gridAggregationUtils.canColumnHaveAggregationFunction)({
       colDef,
       aggregationFunctionName,
-      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
+      isDataSource: !!rootProps.unstable_dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
@@ -60,47 +69,66 @@ 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",
-        fullWidth: true,
-        sx: {
-          minWidth: 150
+  const handleMenuItemKeyDown = React.useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleSelectKeyDown = React.useCallback(event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === ' ') {
+      event.stopPropagation();
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
+    inert: true,
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuAggregationIcon, {
+      fontSize: "small"
+    }),
+    onKeyDown: handleMenuItemKeyDown,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+      size: "small",
+      fullWidth: true,
+      sx: {
+        minWidth: 150
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        id: `${id}-label`,
+        htmlFor: `${id}-input`,
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        labelId: `${id}-label`,
+        inputRef: inputRef,
+        id: `${id}-input`,
+        value: selectedAggregationRule,
+        label: label,
+        color: "primary",
+        onChange: handleAggregationItemChange,
+        MenuProps: {
+          PaperProps: {
+            onKeyDown: handleSelectKeyDown
+          }
         },
-        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))]
-        })]
-      })
-    })]
+        onBlur: event => event.stopPropagation(),
+        native: isBaseSelectNative,
+        fullWidth: true
+      }, baseSelectProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          value: "",
+          children: "..."
+        })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+          key: aggFunc,
+          value: aggFunc,
+          native: isBaseSelectNative
+        }), (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+          apiRef,
+          aggregationRule: {
+            aggregationFunctionName: aggFunc,
+            aggregationFunction: rootProps.aggregationFunctions[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
   }));
 });