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

package/DataGrid/DataGrid.js

@@ -19,17 +19,20 @@ var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
 var _propValidation = require("../internals/utils/propValidation");
 var _variables = require("../material/variables");
+var _useGridApiInitialization = require("../hooks/core/useGridApiInitialization");
 var _jsxRuntime = require("react/jsx-runtime");
 const configuration = {
   hooks: {
     useCSSVariables: _variables.useMaterialCSSVariables,
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
-    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
+    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
+    useCellAggregationResult: () => null
   }
 };
 const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
-  const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
+  const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(props.apiRef, props);
+  (0, _useDataGridComponent.useDataGridComponent)(privateApiRef, props);
   if (process.env.NODE_ENV !== 'production') {
     (0, _propValidation.validateProps)(props, _propValidation.propValidatorsDataGrid);
   }

package/DataGrid/index.d.ts

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

package/DataGrid/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+require("../index.css");
 var _DataGrid = require("./DataGrid");
 Object.keys(_DataGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/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/DataGrid/useDataGridComponent.js

@@ -37,8 +37,8 @@ var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
 var _useGridListView = require("../hooks/features/listView/useGridListView");
 var _useGridProps = require("../hooks/core/useGridProps");
 var _useGridDataSource = require("../hooks/features/dataSource/useGridDataSource");
-const useDataGridComponent = (inputApiRef, props) => {
-  const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
+const useDataGridComponent = (apiRef, props) => {
+  (0, _useGridInitialization.useGridInitialization)(apiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
@@ -96,6 +96,5 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _virtualization.useGridVirtualization)(apiRef, props);
   (0, _useGridListView.useGridListView)(apiRef, props);
   (0, _useGridDataSource.useGridDataSource)(apiRef, props);
-  return apiRef;
 };
 exports.useDataGridComponent = useDataGridComponent;

package/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/components/GridColumnSortButton.js

@@ -0,0 +1,109 @@
+"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.GridColumnSortButton = GridColumnSortButton;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _system = require("@mui/system");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _gridClasses = require("../constants/gridClasses");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _cssVariables = require("../constants/cssVariables");
+var _GridColumnUnsortedIcon = require("./GridColumnUnsortedIcon");
+var _assert = require("../utils/assert");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["direction", "index", "sortingOrder", "disabled", "className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['sortButton'],
+    icon: ['sortIcon']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridColumnSortButtonRoot = (0, _system.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'SortButton'
+})({
+  transition: _cssVariables.vars.transition(['opacity'], {
+    duration: _cssVariables.vars.transitions.duration.short,
+    easing: _cssVariables.vars.transitions.easing.easeInOut
+  })
+});
+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 = _GridColumnUnsortedIcon.GridColumnUnsortedIcon;
+    iconProps.sortingOrder = sortingOrder;
+  }
+  return Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({
+    fontSize: "small",
+    className: className
+  }, iconProps)) : null;
+}
+function GridColumnSortButton(props) {
+  const {
+      direction,
+      index,
+      sortingOrder,
+      disabled,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
+  if (!iconElement) {
+    return null;
+  }
+  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnSortButtonRoot, (0, _extends2.default)({
+    as: rootProps.slots.baseIconButton,
+    ownerState: ownerState,
+    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    size: "small",
+    disabled: disabled,
+    className: (0, _clsx.default)(classes.root, className)
+  }, rootProps.slotProps?.baseIconButton, other, {
+    children: iconElement
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+      badgeContent: index,
+      color: "default",
+      overlap: "circular",
+      children: iconButton
+    }), index == null && iconButton]
+  });
+}
+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"  |
+  // ----------------------------------------------------------------------
+  direction: _propTypes.default.oneOf(['asc', 'desc']),
+  disabled: _propTypes.default.bool,
+  field: _propTypes.default.string.isRequired,
+  index: _propTypes.default.number,
+  onClick: _propTypes.default.func,
+  sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired
+} : void 0;

package/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/{material/icons → components}/GridColumnUnsortedIcon.js

@@ -9,7 +9,7 @@ exports.GridColumnUnsortedIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["sortingOrder"];
 const GridColumnUnsortedIcon = exports.GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColumnHeaderSortIcon(props) {

package/components/GridRowCount.js

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

package/components/GridSelectedRowCount.js

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

package/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/components/GridShadowScrollArea.js

@@ -5,11 +5,13 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridShadowScrollArea = GridShadowScrollArea;
+exports.GridShadowScrollArea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const reveal = (0, _system.keyframes)({
@@ -40,6 +42,7 @@ const ShadowScrollArea = (0, _system.styled)('div', {
   animation-fill-mode: none;
   box-sizing: border-box;
   overflow: auto;
+  scrollbar-width: thin;
   scroll-timeline: --scroll-timeline block;
 
   &::before,
@@ -79,12 +82,20 @@ const ShadowScrollArea = (0, _system.styled)('div', {
 /**
  * Adds scroll shadows above and below content in a scrollable container.
  */
-function GridShadowScrollArea(props) {
+const GridShadowScrollArea = exports.GridShadowScrollArea = (0, _forwardRef.forwardRef)(function GridShadowScrollArea(props, ref) {
   const {
       children
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowScrollArea, (0, _extends2.default)({}, 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.default.node
+} : void 0;

package/components/GridSkeletonLoadingOverlay.js

@@ -31,8 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
 const SkeletonOverlay = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
+  slot: 'SkeletonLoadingOverlay'
 })({
   minWidth: '100%',
   width: 'max-content',

package/components/base/GridOverlays.js

@@ -22,8 +22,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridOverlayWrapperRoot = (0, _system.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,
@@ -47,8 +46,7 @@ loadingOverlayVariant !== 'skeleton' ? {
 const GridOverlayWrapperInner = (0, _system.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 {
@@ -90,5 +88,5 @@ process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   loadingOverlayVariant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
-  overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay', 'noColumnsOverlay'])
+  overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay', 'noColumnsOverlay', 'emptyPivotOverlay'])
 } : void 0;

package/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/components/cell/GridActionsCellItem.js

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

package/components/cell/GridCell.js

@@ -27,6 +27,7 @@ var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanni
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
 var _utils2 = require("../../internals/utils");
+var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
@@ -93,6 +94,8 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     rowId,
     field
   });
+  const config = (0, _useGridConfiguration.useGridConfiguration)();
+  const cellAggregationResult = config.hooks.useCellAggregationResult(rowId, field);
   const cellMode = editCellState ? _models.GridCellModes.Edit : _models.GridCellModes.View;
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
@@ -108,6 +111,10 @@ const GridCell = (0, _forwardRef.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 = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

package/components/columnHeaders/GridBaseColumnHeaders.js

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

package/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/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -1,81 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridColumnHeaderSortIcon = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _gridClasses = require("../../constants/gridClasses");
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridIconButtonContainer = require("./GridIconButtonContainer");
+var _GridColumnSortButton = require("../GridColumnSortButton");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["direction", "index", "sortingOrder", "disabled"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    icon: ['sortIcon']
-  };
-  return (0, _composeClasses.default)(slots, _gridClasses.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__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({
-    fontSize: "small",
-    className: className
-  }, iconProps)) : null;
-}
 function GridColumnHeaderSortIconRaw(props) {
-  const {
-      direction,
-      index,
-      sortingOrder,
-      disabled
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = (0, _extends2.default)({}, props, {
-    classes: rootProps.classes
-  });
-  const classes = useUtilityClasses(ownerState);
-  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
-  if (!iconElement) {
-    return null;
-  }
-  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-    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__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
-    children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
-      badgeContent: index,
-      color: "default",
-      overlap: "circular",
-      children: iconButton
-    }), index == null && iconButton]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridIconButtonContainer.GridIconButtonContainer, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnSortButton.GridColumnSortButton, (0, _extends2.default)({}, props, {
+      tabIndex: -1
+    }))
   });
 }
 const GridColumnHeaderSortIcon = exports.GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
@@ -84,9 +25,20 @@ 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.default.string,
+  color: _propTypes.default.oneOf(['default', 'inherit', 'primary']),
   direction: _propTypes.default.oneOf(['asc', 'desc']),
   disabled: _propTypes.default.bool,
+  edge: _propTypes.default.oneOf(['end', 'start', false]),
   field: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string,
   index: _propTypes.default.number,
-  sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired
+  label: _propTypes.default.string,
+  role: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
 } : void 0;

package/components/columnHeaders/GridColumnHeaderTitle.js

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

package/components/columnHeaders/GridIconButtonContainer.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridIconButtonContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
-  slot: 'IconButtonContainer',
-  overridesResolver: (props, styles) => styles.iconButtonContainer
+  slot: 'IconButtonContainer'
 })(() => ({
   display: 'flex',
   visibility: 'hidden',

package/components/columnsManagement/GridColumnsManagement.js

@@ -21,6 +21,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _utils = require("./utils");
 var _assert = require("../../utils/assert");
 var _GridShadowScrollArea = require("../GridShadowScrollArea");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
@@ -41,12 +42,15 @@ const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const searchInputRef = React.useRef(null);
-  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
   const initialColumnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [searchValue, setSearchValue] = React.useState('');
   const classes = useUtilityClasses(rootProps);
+  const columnDefinitions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
+  const pivotActive = (0, _useGridSelector.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
+  const pivotInitialColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotInitialColumnsSelector);
+  const columns = React.useMemo(() => pivotActive ? Array.from(pivotInitialColumns.values()) : columnDefinitions, [pivotActive, pivotInitialColumns, columnDefinitions]);
   const {
     sort,
     searchPredicate = _utils.defaultSearchPredicate,
@@ -109,7 +113,7 @@ function GridColumnsManagement(props) {
   const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
     if (autoFocusSearchField) {
-      searchInputRef.current.focus();
+      searchInputRef.current?.focus();
     } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
       firstSwitchRef.current.focus();
     }
@@ -124,7 +128,7 @@ function GridColumnsManagement(props) {
   };
   const handleSearchReset = React.useCallback(() => {
     setSearchValue('');
-    searchInputRef.current.focus();
+    searchInputRef.current?.focus();
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
@@ -176,7 +180,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
           className: classes.row,
-          disabled: column.hideable === false,
+          disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
           onClick: toggleColumn,
           name: column.field,
@@ -193,7 +197,7 @@ function GridColumnsManagement(props) {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-        disabled: hideableColumns.length === 0,
+        disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
@@ -202,7 +206,7 @@ function GridColumnsManagement(props) {
         density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
-        disabled: isResetDisabled
+        disabled: isResetDisabled || pivotActive
       }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsManagementReset')
       })) : null]
@@ -262,7 +266,7 @@ const GridColumnsManagementScrollArea = (0, _styles.styled)(_GridShadowScrollAre
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementScrollArea'
 })({
-  maxHeight: 400
+  maxHeight: 300
 });
 const GridColumnsManagementHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',