@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

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/GridScrollArea.js

@@ -10,7 +10,7 @@ import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
+import { useGridEvent } from "../hooks/utils/useGridEvent.js";
 import { useGridSelector } from "../hooks/utils/useGridSelector.js";
 import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
@@ -63,8 +63,8 @@ const offsetSelector = createSelector(gridDimensionsSelector, (dimensions, direc
 function GridScrollAreaWrapper(props) {
   const apiRef = useGridApiContext();
   const [dragging, setDragging] = React.useState(false);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  useGridEvent(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  useGridEvent(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
   if (!dragging) {
     return null;
   }
@@ -136,7 +136,7 @@ function GridScrollAreaContent(props) {
       });
     });
   });
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridEvent(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }

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

@@ -10,7 +10,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridEvent, useGridSelector } from "../hooks/index.js";
 import { PinnedColumnPosition } from "../internals/constants.js";
 import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
@@ -179,7 +179,7 @@ export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonL
       });
     }
   };
-  useGridApiEventHandler(apiRef, 'columnResize', handleColumnResize);
+  useGridEvent(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
     className: classes.root
   }, rest, {

package/esm/components/base/GridOverlays.js

@@ -82,5 +82,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;
 }
@@ -18,16 +18,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
 } & Omit<GridSlotProps['baseMenuItem'], 'component'>));
-declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
-  showInMenu?: false;
-  icon: React.ReactElement<any>;
-} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
-  label?: string;
-  color?: "default" | "inherit" | "primary";
-  edge?: "start" | "end" | false;
-} & import("../..").BaseIconButtonPropsOverrides & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "loading" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loadingIndicator"> & {
-  component?: React.ElementType;
-}, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<((GridActionsCellItemCommonProps & {
   showInMenu: true;
   /**
    * If false, the menu will not close when this item is clicked.
@@ -35,7 +26,27 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
    */
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
-} & Omit<import("../../models/gridBaseSlots").MenuItemProps & import("../..").BaseMenuItemPropsOverrides & import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
-  component?: React.ElementType;
-}, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+} & Omit<React.DOMAttributes<HTMLElement> & {
+  [k: `aria-${string}`]: any;
+  [k: `data-${string}`]: any;
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  inert?: boolean;
+  disabled?: boolean;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+  selected?: boolean;
+  value?: number | string | readonly string[];
+  style?: React.CSSProperties;
+} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) | Omit<GridActionsCellItemCommonProps & {
+  showInMenu?: false;
+  icon: React.ReactElement<any>;
+} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
+  label?: string;
+  color?: "default" | "inherit" | "primary";
+  edge?: "start" | "end" | false;
+} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/esm/components/cell/GridActionsCellItem.js

@@ -6,8 +6,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-
-// FIXME(v8:romgrk): Make parametric
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridActionsCellItem = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
@@ -61,12 +59,15 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  className: PropTypes.string,
   /**
    * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
    */
   component: PropTypes.elementType,
-  icon: PropTypes.element,
+  disabled: PropTypes.bool,
+  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
+  showInMenu: PropTypes.bool,
+  style: PropTypes.object
 } : void 0;
 export { GridActionsCellItem };

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/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/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
 export { GridCellCheckboxForwardRef };
-export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("@mui/x-data-grid").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;

package/esm/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("@mui/x-data-grid").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
 export { GridHeaderCheckbox };

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -14,6 +14,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
 import { NotRendered } from "../../utils/assert.js";
 import { GridShadowScrollArea } from "../GridShadowScrollArea.js";
+import { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -32,12 +33,15 @@ const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
-  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const initialColumnVisibilityModel = useGridSelector(apiRef, gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const rootProps = useGridRootProps();
   const [searchValue, setSearchValue] = React.useState('');
   const classes = useUtilityClasses(rootProps);
+  const columnDefinitions = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const pivotInitialColumns = useGridSelector(apiRef, gridPivotInitialColumnsSelector);
+  const columns = React.useMemo(() => pivotActive ? Array.from(pivotInitialColumns.values()) : columnDefinitions, [pivotActive, pivotInitialColumns, columnDefinitions]);
   const {
     sort,
     searchPredicate = defaultSearchPredicate,
@@ -100,7 +104,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();
     }
@@ -115,7 +119,7 @@ function GridColumnsManagement(props) {
   };
   const handleSearchReset = React.useCallback(() => {
     setSearchValue('');
-    searchInputRef.current.focus();
+    searchInputRef.current?.focus();
   }, []);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
@@ -167,7 +171,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
           className: classes.row,
-          disabled: column.hideable === false,
+          disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
           onClick: toggleColumn,
           name: column.field,
@@ -184,7 +188,7 @@ function GridColumnsManagement(props) {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-        disabled: hideableColumns.length === 0,
+        disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
@@ -193,7 +197,7 @@ function GridColumnsManagement(props) {
         density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
-        disabled: isResetDisabled
+        disabled: isResetDisabled || pivotActive
       }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsManagementReset')
       })) : null]
@@ -230,30 +234,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
-  searchInputProps: PropTypes.shape({
-    autoComplete: PropTypes.string,
-    className: PropTypes.string,
-    color: PropTypes.oneOf(['error', 'primary']),
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    fullWidth: PropTypes.bool,
-    helperText: PropTypes.string,
-    id: PropTypes.string,
-    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-      current: PropTypes.object
-    })]),
-    label: PropTypes.node,
-    onChange: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    placeholder: PropTypes.string,
-    role: PropTypes.string,
-    size: PropTypes.oneOf(['medium', 'small']),
-    slotProps: PropTypes.object,
-    style: PropTypes.object,
-    tabIndex: PropTypes.number,
-    type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), PropTypes.object]),
-    value: PropTypes.string
-  }),
+  searchInputProps: PropTypes.object,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),
   /**
@@ -276,7 +257,7 @@ const GridColumnsManagementScrollArea = styled(GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementScrollArea'
 })({
-  maxHeight: 400
+  maxHeight: 300
 });
 const GridColumnsManagementHeader = styled('div', {
   name: 'MuiDataGrid',