@mui/x-data-grid 8.0.0-beta.3 → 8.1.0

package/constants/localeTextConstants.js

@@ -10,6 +10,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   noResultsOverlayLabel: 'No results found.',
   noColumnsOverlayLabel: 'No columns',
   noColumnsOverlayManageColumns: 'Manage columns',
+  emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
   // Density selector toolbar button text
   toolbarDensity: 'Density',
   toolbarDensityLabel: 'Density',
@@ -29,22 +30,16 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
-  // Prompt toolbar field
-  toolbarPromptControlPlaceholder: 'Type a prompt…',
-  toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  toolbarPromptControlLabel: 'Prompt input',
-  toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  toolbarPromptControlSendActionLabel: 'Send',
-  toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
+  // Toolbar pivot button
+  toolbarPivot: 'Pivot',
+  // Toolbar AI Assistant button
+  toolbarAssistant: 'AI Assistant',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',
@@ -121,6 +116,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   columnMenuUnsort: 'Unsort',
   columnMenuSortAsc: 'Sort by ASC',
   columnMenuSortDesc: 'Sort by DESC',
+  columnMenuManagePivot: 'Manage pivot',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   columnHeaderFiltersLabel: 'Show filters',
@@ -193,5 +189,77 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   aggregationFunctionLabelAvg: 'avg',
   aggregationFunctionLabelMin: 'min',
   aggregationFunctionLabelMax: 'max',
-  aggregationFunctionLabelSize: 'size'
+  aggregationFunctionLabelSize: 'size',
+  // Pivot panel
+  pivotToggleLabel: 'Pivot',
+  pivotRows: 'Rows',
+  pivotColumns: 'Columns',
+  pivotValues: 'Values',
+  pivotCloseButton: 'Close pivot settings',
+  pivotSearchButton: 'Search fields',
+  pivotSearchControlPlaceholder: 'Search fields',
+  pivotSearchControlLabel: 'Search fields',
+  pivotSearchControlClear: 'Clear search',
+  pivotNoFields: 'No fields',
+  pivotMenuMoveUp: 'Move up',
+  pivotMenuMoveDown: 'Move down',
+  pivotMenuMoveToTop: 'Move to top',
+  pivotMenuMoveToBottom: 'Move to bottom',
+  pivotMenuRows: 'Rows',
+  pivotMenuColumns: 'Columns',
+  pivotMenuValues: 'Values',
+  pivotMenuOptions: 'Field options',
+  pivotMenuAddToRows: 'Add to Rows',
+  pivotMenuAddToColumns: 'Add to Columns',
+  pivotMenuAddToValues: 'Add to Values',
+  pivotMenuRemove: 'Remove',
+  pivotDragToRows: 'Drag here to create rows',
+  pivotDragToColumns: 'Drag here to create columns',
+  pivotDragToValues: 'Drag here to create values',
+  pivotYearColumnHeaderName: '(Year)',
+  pivotQuarterColumnHeaderName: '(Quarter)',
+  // AI Assistant panel
+  aiAssistantPanelTitle: 'AI Assistant',
+  aiAssistantPanelClose: 'Close AI Assistant',
+  aiAssistantPanelNewConversation: 'New conversation',
+  aiAssistantPanelConversationHistory: 'Conversation history',
+  aiAssistantPanelEmptyConversation: 'No prompt history',
+  aiAssistantSuggestions: 'Suggestions',
+  // Prompt field
+  promptFieldLabel: 'Prompt',
+  promptFieldPlaceholder: 'Type a prompt…',
+  promptFieldPlaceholderWithRecording: 'Type or record a prompt…',
+  promptFieldPlaceholderListening: 'Listening for prompt…',
+  promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldSend: 'Send',
+  promptFieldRecord: 'Record',
+  promptFieldStopRecording: 'Stop recording',
+  // Prompt
+  promptRerun: 'Run again',
+  promptProcessing: 'Processing…',
+  promptAppliedChanges: 'Applied changes',
+  // Prompt changes
+  promptChangeGroupDescription: column => `Group by ${column}`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `Aggregate ${column} (${aggregation})`,
+  promptChangeFilterLabel: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `${column} is any of: ${value}`;
+    }
+    return `${column} ${operator} ${value}`;
+  },
+  promptChangeFilterDescription: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `Filter where ${column} is any of: ${value}`;
+    }
+    return `Filter where ${column} ${operator} ${value}`;
+  },
+  promptChangeSortDescription: (column, direction) => `Sort by ${column} (${direction})`,
+  promptChangePivotEnableLabel: 'Pivot',
+  promptChangePivotEnableDescription: 'Enable pivot',
+  promptChangePivotColumnsLabel: count => `Columns (${count})`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `Rows (${count})`,
+  promptChangePivotValuesLabel: count => `Values (${count})`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
 };

package/context/GridContextProvider.js

@@ -10,7 +10,7 @@ var _GridApiContext = require("../components/GridApiContext");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _GridRootPropsContext = require("./GridRootPropsContext");
 var _GridConfigurationContext = require("../components/GridConfigurationContext");
-var _GridPreferencePanelContext = require("../components/panel/GridPreferencePanelContext");
+var _GridPanelContext = require("../components/panel/GridPanelContext");
 var _context = require("../utils/css/context");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridContextProvider({
@@ -28,7 +28,7 @@ function GridContextProvider({
         value: privateApiRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridApiContext.GridApiContext.Provider, {
           value: apiRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPreferencePanelContext.GridPreferencePanelContextProvider, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContext.GridPanelContextProvider, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.GridCSSVariablesContext, {
               children: children
             })

package/esm/DataGrid/DataGrid.js

@@ -12,17 +12,20 @@ import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
 import { useMaterialCSSVariables } from "../material/variables.js";
+import { useGridApiInitialization } from "../hooks/core/useGridApiInitialization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
-    useGridRowAriaAttributes
+    useGridRowAriaAttributes,
+    useCellAggregationResult: () => null
   }
 };
 const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
-  const privateApiRef = useDataGridComponent(props.apiRef, props);
+  const privateApiRef = useGridApiInitialization(props.apiRef, props);
+  useDataGridComponent(privateApiRef, props);
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, propValidatorsDataGrid);
   }

package/esm/DataGrid/index.d.ts

@@ -1 +1,2 @@
+import "../index.css";
 export * from "./DataGrid.js";

package/esm/DataGrid/index.js

@@ -1 +1,2 @@
+import "../index.css";
 export * from "./DataGrid.js";

package/esm/DataGrid/useDataGridComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../models/props/DataGridProps.js";
-import { GridApiCommunity, GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
-export declare const useDataGridComponent: (inputApiRef: RefObject<GridApiCommunity | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;
+import { GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
+export declare const useDataGridComponent: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/esm/DataGrid/useDataGridComponent.js

@@ -31,8 +31,8 @@ import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/featur
 import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
 import { propsStateInitializer } from "../hooks/core/useGridProps.js";
 import { useGridDataSource } from "../hooks/features/dataSource/useGridDataSource.js";
-export const useDataGridComponent = (inputApiRef, props) => {
-  const apiRef = useGridInitialization(inputApiRef, props);
+export const useDataGridComponent = (apiRef, props) => {
+  useGridInitialization(apiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
@@ -90,5 +90,4 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
   useGridDataSource(apiRef, props);
-  return apiRef;
 };

package/esm/components/GridColumnSortButton.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { GridSlotProps } from "../models/index.js";
+import { GridSortDirection } from "../models/gridSortModel.js";
+export type GridColumnSortButtonProps = GridSlotProps['baseIconButton'] & {
+  field: string;
+  direction: GridSortDirection;
+  index?: number;
+  sortingOrder: readonly GridSortDirection[];
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function GridColumnSortButton(props: GridColumnSortButtonProps): React.JSX.Element | null;
+declare namespace GridColumnSortButton {
+  var propTypes: any;
+}
+export { GridColumnSortButton };

package/{modern/components/columnHeaders/GridColumnHeaderSortIcon.js → esm/components/GridColumnSortButton.js}

@@ -1,23 +1,37 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["direction", "index", "sortingOrder", "disabled"];
+const _excluded = ["direction", "index", "sortingOrder", "disabled", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { GridIconButtonContainer } from "./GridIconButtonContainer.js";
+import { styled } from '@mui/system';
+import clsx from 'clsx';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../constants/gridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { vars } from "../constants/cssVariables.js";
+import { GridColumnUnsortedIcon } from "./GridColumnUnsortedIcon.js";
+import { NotRendered } from "../utils/assert.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
+    root: ['sortButton'],
     icon: ['sortIcon']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const GridColumnSortButtonRoot = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'SortButton'
+})({
+  transition: vars.transition(['opacity'], {
+    duration: vars.transitions.duration.short,
+    easing: vars.transitions.easing.easeInOut
+  })
+});
 function getIcon(icons, direction, className, sortingOrder) {
   let Icon;
   const iconProps = {};
@@ -26,7 +40,7 @@ function getIcon(icons, direction, className, sortingOrder) {
   } else if (direction === 'desc') {
     Icon = icons.columnSortedDescendingIcon;
   } else {
-    Icon = icons.columnUnsortedIcon;
+    Icon = GridColumnUnsortedIcon;
     iconProps.sortingOrder = sortingOrder;
   }
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
@@ -34,12 +48,13 @@ function getIcon(icons, direction, className, sortingOrder) {
     className: className
   }, iconProps)) : null;
 }
-function GridColumnHeaderSortIconRaw(props) {
+function GridColumnSortButton(props) {
   const {
       direction,
       index,
       sortingOrder,
-      disabled
+      disabled,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -52,16 +67,18 @@ function GridColumnHeaderSortIconRaw(props) {
   if (!iconElement) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-    tabIndex: -1,
+  const iconButton = /*#__PURE__*/_jsx(GridColumnSortButtonRoot, _extends({
+    as: rootProps.slots.baseIconButton,
+    ownerState: ownerState,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
-    disabled: disabled
+    disabled: disabled,
+    className: clsx(classes.root, className)
   }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
-  return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
       badgeContent: index,
       color: "default",
@@ -70,8 +87,7 @@ function GridColumnHeaderSortIconRaw(props) {
     }), index == null && iconButton]
   });
 }
-const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
-process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
+process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -80,6 +96,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   disabled: PropTypes.bool,
   field: PropTypes.string.isRequired,
   index: PropTypes.number,
+  onClick: PropTypes.func,
   sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
 } : void 0;
-export { GridColumnHeaderSortIcon };
+export { GridColumnSortButton };

package/esm/components/GridColumnUnsortedIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
+import { GridSortDirection } from "../models/gridSortModel.js";
+interface GridColumnUnsortedIconProps extends GridBaseIconProps {
+  sortingOrder: GridSortDirection[];
+}
+export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;
+export {};

package/esm/{material/icons → components}/GridColumnUnsortedIcon.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["sortingOrder"];
 import * as React from 'react';
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColumnHeaderSortIcon(props) {
   const {

package/esm/components/GridRowCount.js

@@ -23,8 +23,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'RowCount',
-  overridesResolver: (props, styles) => styles.rowCount
+  slot: 'RowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/esm/components/GridSelectedRowCount.js

@@ -23,8 +23,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridSelectedRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'SelectedRowCount',
-  overridesResolver: (props, styles) => styles.selectedRowCount
+  slot: 'SelectedRowCount'
 })({
   alignItems: 'center',
   display: 'flex',

package/esm/components/GridShadowScrollArea.d.ts

@@ -5,4 +5,5 @@ export interface GridShadowScrollAreaProps extends React.HTMLAttributes<HTMLDivE
 /**
  * Adds scroll shadows above and below content in a scrollable container.
  */
-export declare function GridShadowScrollArea(props: GridShadowScrollAreaProps): React.JSX.Element;
+declare const GridShadowScrollArea: React.ForwardRefExoticComponent<GridShadowScrollAreaProps> | React.ForwardRefExoticComponent<GridShadowScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export { GridShadowScrollArea };

package/esm/components/GridShadowScrollArea.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled, keyframes } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const reveal = keyframes({
   from: {
@@ -32,6 +34,7 @@ const ShadowScrollArea = styled('div', {
   animation-fill-mode: none;
   box-sizing: border-box;
   overflow: auto;
+  scrollbar-width: thin;
   scroll-timeline: --scroll-timeline block;
 
   &::before,
@@ -71,12 +74,21 @@ const ShadowScrollArea = styled('div', {
 /**
  * Adds scroll shadows above and below content in a scrollable container.
  */
-export function GridShadowScrollArea(props) {
+const GridShadowScrollArea = forwardRef(function GridShadowScrollArea(props, ref) {
   const {
       children
     } = props,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_jsx(ShadowScrollArea, _extends({}, rest, {
+    ref: ref,
     children: children
   }));
-}
+});
+process.env.NODE_ENV !== "production" ? GridShadowScrollArea.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node
+} : void 0;
+export { GridShadowScrollArea };

package/esm/components/GridSkeletonLoadingOverlay.js

@@ -23,8 +23,7 @@ import { attachPinnedStyle } from "../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SkeletonOverlay = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
+  slot: 'SkeletonLoadingOverlay'
 })({
   minWidth: '100%',
   width: 'max-content',

package/esm/components/base/GridOverlays.js

@@ -14,8 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
-  overridesResolver: (props, styles) => styles.overlayWrapper
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
 })(({
   overlayType,
   loadingOverlayVariant,
@@ -39,8 +38,7 @@ loadingOverlayVariant !== 'skeleton' ? {
 const GridOverlayWrapperInner = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
-  overridesResolver: (props, styles) => styles.overlayWrapperInner
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })({});
 const useUtilityClasses = ownerState => {
   const {
@@ -82,5 +80,5 @@ process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
-  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay', 'noColumnsOverlay'])
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay', 'noColumnsOverlay', 'emptyPivotOverlay'])
 } : void 0;

package/esm/components/cell/GridActionsCellItem.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
+import { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridActionsCellItemCommonProps {
   label: string;
-  icon?: React.ReactElement<any>;
+  icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
   component?: React.ElementType;
 }

package/esm/components/cell/GridActionsCellItem.js

@@ -65,7 +65,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
    */
   component: PropTypes.elementType,
   disabled: PropTypes.bool,
-  icon: PropTypes.element,
+  icon: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.element, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
   label: PropTypes.string.isRequired,
   showInMenu: PropTypes.bool,
   style: PropTypes.object

package/esm/components/cell/GridCell.js

@@ -21,6 +21,7 @@ import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.js";
 import { attachPinnedStyle } from "../../internals/utils/index.js";
+import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPinnedColumnPositionLookup = {
   [PinnedColumnPosition.LEFT]: GridPinnedColumnPosition.LEFT,
@@ -85,6 +86,8 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     rowId,
     field
   });
+  const config = useGridConfiguration();
+  const cellAggregationResult = config.hooks.useCellAggregationResult(rowId, field);
   const cellMode = editCellState ? GridCellModes.Edit : GridCellModes.View;
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
@@ -100,6 +103,10 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     })
   });
   cellParams.api = apiRef.current;
+  if (cellAggregationResult) {
+    cellParams.value = cellAggregationResult.value;
+    cellParams.formattedValue = column.valueFormatter ? column.valueFormatter(cellParams.value, row, column, apiRef) : cellParams.value;
+  }
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

package/esm/components/columnHeaders/GridBaseColumnHeaders.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeadersRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaders',
-  overridesResolver: (props, styles) => styles.columnHeaders
+  slot: 'ColumnHeaders'
 })({
   display: 'flex',
   flexDirection: 'column',

package/esm/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
-import { GridSortDirection } from "../../models/gridSortModel.js";
-export interface GridColumnHeaderSortIconProps {
-  field: string;
-  direction: GridSortDirection;
-  index: number | undefined;
-  sortingOrder: readonly GridSortDirection[];
-  disabled?: boolean;
-}
-declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): React.JSX.Element | null;
+import { GridColumnSortButtonProps } from "../GridColumnSortButton.js";
+export interface GridColumnHeaderSortIconProps extends GridColumnSortButtonProps {}
+declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): React.JSX.Element;
 declare namespace GridColumnHeaderSortIconRaw {
   var propTypes: any;
 }

package/esm/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -1,73 +1,14 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridIconButtonContainer } from "./GridIconButtonContainer.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    icon: ['sortIcon']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-function getIcon(icons, direction, className, sortingOrder) {
-  let Icon;
-  const iconProps = {};
-  if (direction === 'asc') {
-    Icon = icons.columnSortedAscendingIcon;
-  } else if (direction === 'desc') {
-    Icon = icons.columnSortedDescendingIcon;
-  } else {
-    Icon = icons.columnUnsortedIcon;
-    iconProps.sortingOrder = sortingOrder;
-  }
-  return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
-    fontSize: "small",
-    className: className
-  }, iconProps)) : null;
-}
+import { GridColumnSortButton } from "../GridColumnSortButton.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnHeaderSortIconRaw(props) {
-  const {
-      direction,
-      index,
-      sortingOrder,
-      disabled
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = _extends({}, props, {
-    classes: rootProps.classes
-  });
-  const classes = useUtilityClasses(ownerState);
-  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
-  if (!iconElement) {
-    return null;
-  }
-  const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-    tabIndex: -1,
-    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    size: "small",
-    disabled: disabled
-  }, rootProps.slotProps?.baseIconButton, other, {
-    children: iconElement
-  }));
-  return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
-    children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
-      badgeContent: index,
-      color: "default",
-      overlap: "circular",
-      children: iconButton
-    }), index == null && iconButton]
+  return /*#__PURE__*/_jsx(GridIconButtonContainer, {
+    children: /*#__PURE__*/_jsx(GridColumnSortButton, _extends({}, props, {
+      tabIndex: -1
+    }))
   });
 }
 const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
@@ -76,10 +17,21 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['default', 'inherit', 'primary']),
   direction: PropTypes.oneOf(['asc', 'desc']),
   disabled: PropTypes.bool,
+  edge: PropTypes.oneOf(['end', 'start', false]),
   field: PropTypes.string.isRequired,
+  id: PropTypes.string,
   index: PropTypes.number,
-  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
+  label: PropTypes.string,
+  role: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired,
+  style: PropTypes.object,
+  tabIndex: PropTypes.number,
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
 } : void 0;
 export { GridColumnHeaderSortIcon };

package/esm/components/columnHeaders/GridColumnHeaderTitle.js

@@ -22,8 +22,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridColumnHeaderTitleRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'ColumnHeaderTitle',
-  overridesResolver: (props, styles) => styles.columnHeaderTitle
+  slot: 'ColumnHeaderTitle'
 })({
   textOverflow: 'ellipsis',
   overflow: 'hidden',