@mui/x-data-grid 8.0.0-beta.2 → 8.0.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);
   }
@@ -66,11 +69,11 @@ DataGridRaw.propTypes = {
     current: _propTypes.default.object
   }),
   /**
-   * The label of the Data Grid.
+   * The `aria-label` of the Data Grid.
    */
   'aria-label': _propTypes.default.string,
   /**
-   * The id of the element containing a label for the Data Grid.
+   * The `id` of the element containing a label for the Data Grid.
    */
   'aria-labelledby': _propTypes.default.string,
   /**
@@ -367,6 +370,12 @@ DataGridRaw.propTypes = {
    * @default false
    */
   keepNonExistentRowsSelected: _propTypes.default.bool,
+  /**
+   * The label of the Data Grid.
+   * If the `showToolbar` prop is `true`, the label will be displayed in the toolbar and applied to the `aria-label` attribute of the grid.
+   * If the `showToolbar` prop is `false`, the label will not be visible but will be applied to the `aria-label` attribute of the grid.
+   */
+  label: _propTypes.default.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false

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

@@ -23,7 +23,7 @@ const DATA_GRID_FORCED_PROPS = {
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid',
-  unstable_listView: false
+  listView: false
 };
 const getDataGridForcedProps = themedProps => (0, _extends2.default)({}, DATA_GRID_FORCED_PROPS, themedProps.dataSource ? {
   filterMode: 'server',

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

@@ -17,7 +17,7 @@ var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _constants = require("../constants");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
+var _useGridEvent = require("../hooks/utils/useGridEvent");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _densitySelector = require("../hooks/features/density/densitySelector");
@@ -70,8 +70,8 @@ const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelect
 function GridScrollAreaWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const [dragging, setDragging] = React.useState(false);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
   if (!dragging) {
     return null;
   }
@@ -143,7 +143,7 @@ function GridScrollAreaContent(props) {
       });
     });
   });
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'scrollPositionChange', handleScrolling);
   if (!canScrollMore) {
     return null;
   }

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

@@ -187,7 +187,7 @@ const GridSkeletonLoadingOverlayInner = exports.GridSkeletonLoadingOverlayInner
       });
     }
   };
-  (0, _hooks.useGridApiEventHandler)(apiRef, 'columnResize', handleColumnResize);
+  (0, _hooks.useGridEvent)(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
     className: classes.root
   }, rest, {

package/components/base/GridOverlays.js

@@ -90,5 +90,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;
 }
@@ -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/components/cell/GridActionsCellItem.js

@@ -14,7 +14,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "icon", "showInMenu", "onClick"],
-  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"]; // FIXME(v8:romgrk): Make parametric
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (!props.showInMenu) {
@@ -67,11 +67,14 @@ 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.default.string,
   /**
    * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
    */
   component: _propTypes.default.elementType,
-  icon: _propTypes.default.element,
+  disabled: _propTypes.default.bool,
+  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
+  showInMenu: _propTypes.default.bool,
+  style: _propTypes.default.object
 } : void 0;

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/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/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/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 };