@mui/x-data-grid-premium 8.0.0-alpha.3 → 8.0.0-alpha.5

package/esm/DataGridPremium/DataGridPremium.js

@@ -39,7 +39,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
       style: props.style,
       sx: props.sx,
       ref: ref
-    }, props.forwardedProps, {
+    }, props.slotProps?.root, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-premium",
@@ -109,6 +109,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 +187,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 +333,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.
@@ -965,6 +961,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -1073,11 +1074,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   unstable_listView: PropTypes.bool,
   unstable_onDataSourceError: PropTypes.func,
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: PropTypes.bool,
   /**
    * 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.

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,

package/esm/components/GridColumnMenuAggregationItem.js

@@ -4,8 +4,6 @@ import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { unstable_useId as useId } from '@mui/utils';
@@ -52,47 +50,44 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
-    disableRipple: true,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        size: "small",
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+    inert: true,
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
+      fontSize: "small"
+    }),
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      size: "small",
+      fullWidth: true,
+      sx: {
+        minWidth: 150
+      },
+      children: [/*#__PURE__*/_jsx(InputLabel, {
+        id: `${id}-label`,
+        children: label
+      }), /*#__PURE__*/_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__*/_jsx(InputLabel, {
-          id: `${id}-label`,
-          children: label
-        }), /*#__PURE__*/_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__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: "",
-            children: "..."
-          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: aggFunc,
-            children: getAggregationFunctionLabel({
-              apiRef,
-              aggregationRule: {
-                aggregationFunctionName: aggFunc,
-                aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-              }
-            })
-          }, aggFunc))]
-        })]
-      })
-    })]
+        children: [/*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+          value: "",
+          children: "..."
+        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+          value: aggFunc,
+          children: getAggregationFunctionLabel({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: aggFunc,
+              aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+            }
+          })
+        }, aggFunc))]
+      })]
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {

package/esm/components/GridColumnMenuRowGroupItem.js

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from "../hooks/features/rowGrouping/gridRowGroupingUtils.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowGroupItem(props) {
   const {
     colDef,
@@ -23,16 +21,13 @@ export function GridColumnMenuRowGroupItem(props) {
     };
     const groupedColumn = columnsLookup[field];
     const name = groupedColumn.headerName ?? field;
-    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
       disabled: !groupedColumn.groupable,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     }, field);
   };
   if (!colDef || !isGroupingColumn(colDef.field)) {

package/esm/components/GridColumnMenuRowUngroupItem.js

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowUngroupItem(props) {
   const {
     colDef,
@@ -28,25 +26,19 @@ export function GridColumnMenuRowUngroupItem(props) {
   };
   const name = columnsLookup[colDef.field].headerName ?? colDef.field;
   if (rowGroupingModel.includes(colDef.field)) {
-    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     });
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: groupColumn,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('groupColumn')(name)
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('groupColumn')(name)
   });
 }

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -32,7 +32,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = _extends({}, GROUPING_COL
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = gridRowGroupingSanitizedModelSelector({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -63,10 +65,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
+  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/hooks/features/aggregation/gridAggregationSelectors.d.ts

@@ -5,9 +5,9 @@ export declare const gridAggregationStateSelector: (state: GridStatePremium) =>
  * If a column is not in the model, it is not aggregated.
  * @category Aggregation
  */
-export declare const gridAggregationModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationModel>;
+export declare const gridAggregationModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationState, import("./gridAggregationInterfaces").GridAggregationModel>;
 /**
  * Get the aggregation results as a lookup.
  * @category Aggregation
  */
-export declare const gridAggregationLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationLookup>;
+export declare const gridAggregationLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridAggregationInterfaces").GridAggregationState, import("./gridAggregationInterfaces").GridAggregationLookup>;

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -40,7 +40,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = (0, _extends2.default)({}
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -71,10 +73,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: (0, _internals.isSingleSelectColDef)(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

package/hooks/features/rowGrouping/gridRowGroupingSelector.d.ts

@@ -1,3 +1,3 @@
 import { GridStatePremium } from '../../../models/gridStatePremium';
-export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
-export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, string[]>;
+export declare const gridRowGroupingModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("./gridRowGroupingInterfaces").GridRowGroupingState, import("./gridRowGroupingInterfaces").GridRowGroupingModel>;
+export declare const gridRowGroupingSanitizedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStatePremium, import("@mui/x-data-grid").GridColumnLookup, string[]>;

package/index.js

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

package/modern/DataGridPremium/DataGridPremium.js

@@ -39,7 +39,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
       style: props.style,
       sx: props.sx,
       ref: ref
-    }, props.forwardedProps, {
+    }, props.slotProps?.root, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         children: /*#__PURE__*/_jsx(Watermark, {
           packageName: "x-data-grid-premium",
@@ -109,6 +109,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 +187,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 +333,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.
@@ -965,6 +961,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: PropTypes.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: PropTypes.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -1073,11 +1074,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   unstable_listView: PropTypes.bool,
   unstable_onDataSourceError: PropTypes.func,
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: PropTypes.bool,
   /**
    * 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.

package/modern/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,

package/modern/components/GridColumnMenuAggregationItem.js

@@ -4,8 +4,6 @@ import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { unstable_useId as useId } from '@mui/utils';
@@ -52,47 +50,44 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
-    disableRipple: true,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        size: "small",
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+    inert: true,
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
+      fontSize: "small"
+    }),
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      size: "small",
+      fullWidth: true,
+      sx: {
+        minWidth: 150
+      },
+      children: [/*#__PURE__*/_jsx(InputLabel, {
+        id: `${id}-label`,
+        children: label
+      }), /*#__PURE__*/_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__*/_jsx(InputLabel, {
-          id: `${id}-label`,
-          children: label
-        }), /*#__PURE__*/_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__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: "",
-            children: "..."
-          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: aggFunc,
-            children: getAggregationFunctionLabel({
-              apiRef,
-              aggregationRule: {
-                aggregationFunctionName: aggFunc,
-                aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-              }
-            })
-          }, aggFunc))]
-        })]
-      })
-    })]
+        children: [/*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+          value: "",
+          children: "..."
+        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+          value: aggFunc,
+          children: getAggregationFunctionLabel({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: aggFunc,
+              aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+            }
+          })
+        }, aggFunc))]
+      })]
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {

package/modern/components/GridColumnMenuRowGroupItem.js

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from "../hooks/features/rowGrouping/gridRowGroupingUtils.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowGroupItem(props) {
   const {
     colDef,
@@ -23,16 +21,13 @@ export function GridColumnMenuRowGroupItem(props) {
     };
     const groupedColumn = columnsLookup[field];
     const name = groupedColumn.headerName ?? field;
-    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
       disabled: !groupedColumn.groupable,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     }, field);
   };
   if (!colDef || !isGroupingColumn(colDef.field)) {

package/modern/components/GridColumnMenuRowUngroupItem.js

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowUngroupItem(props) {
   const {
     colDef,
@@ -28,25 +26,19 @@ export function GridColumnMenuRowUngroupItem(props) {
   };
   const name = columnsLookup[colDef.field].headerName ?? colDef.field;
   if (rowGroupingModel.includes(colDef.field)) {
-    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     });
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: groupColumn,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('groupColumn')(name)
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('groupColumn')(name)
   });
 }

package/modern/hooks/features/rowGrouping/createGroupingColDef.js

@@ -32,7 +32,9 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = _extends({}, GROUPING_COL
  * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
  */
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
-  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const model = gridRowGroupingSanitizedModelSelector({
+    current: cellParams1.api
+  });
   const groupingField1 = cellParams1.rowNode.groupingField ?? null;
   const groupingField2 = cellParams2.rowNode.groupingField ?? null;
   if (groupingField1 === groupingField2) {
@@ -63,10 +65,12 @@ const getLeafProperties = leafColDef => ({
     return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
   }
 });
+const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) => groupedByColDef.valueFormatter(value, row, groupedByColDef, apiRef);
 const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria