@mui/x-data-grid 5.10.0 → 5.11.0

package/modern/components/base/GridBody.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
@@ -46,7 +45,7 @@ function GridBody(props) {
   apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
 
   const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(GridEvents.resize, size);
+    apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
     children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {

package/modern/components/base/GridOverlays.js

@@ -7,7 +7,6 @@ import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/featu
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
-import { GridEvents } from '../../models/events';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridOverlayWrapper(props) {
@@ -19,7 +18,7 @@ function GridOverlayWrapper(props) {
     setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
   }, [apiRef]);
   useEnhancedEffect(() => {
-    return apiRef.current.subscribeEvent(GridEvents.viewportInnerSizeChange, handleViewportSizeChange);
+    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
   }, [apiRef, handleViewportSizeChange]);
   let height = viewportInnerSize?.height ?? 0;
 

package/modern/components/cell/GridActionsCell.js

@@ -46,10 +46,16 @@ const GridActionsCell = props => {
     }
   }, [hasFocus]);
   React.useEffect(() => {
-    if (focusedButtonIndex >= 0) {
-      const child = rootRef.current?.children[focusedButtonIndex];
-      child.focus();
+    if (focusedButtonIndex < 0 || !rootRef.current) {
+      return;
+    }
+
+    if (focusedButtonIndex >= rootRef.current.children.length) {
+      return;
     }
+
+    const child = rootRef.current.children[focusedButtonIndex];
+    child.focus();
   }, [focusedButtonIndex]);
   React.useEffect(() => {
     if (!hasFocus) {
@@ -75,6 +81,11 @@ const GridActionsCell = props => {
   const iconButtons = options.filter(option => !option.props.showInMenu);
   const menuButtons = options.filter(option => option.props.showInMenu);
   const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+  React.useEffect(() => {
+    if (focusedButtonIndex >= numberOfButtons) {
+      setFocusedButtonIndex(numberOfButtons - 1);
+    }
+  }, [focusedButtonIndex, numberOfButtons]);
 
   const showMenu = () => {
     setOpen(true);

package/modern/components/cell/GridCell.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { ownerDocument, capitalize } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { GridEvents, GridCellModes } from '../../models';
+import { GridCellModes } from '../../models';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
@@ -192,13 +192,13 @@ function GridCell(props) {
     "aria-colspan": colSpan,
     style: style,
     tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
-    onClick: publish(GridEvents.cellClick, onClick),
-    onDoubleClick: publish(GridEvents.cellDoubleClick, onDoubleClick),
-    onMouseDown: publish(GridEvents.cellMouseDown, onMouseDown),
-    onMouseUp: publishMouseUp(GridEvents.cellMouseUp),
-    onKeyDown: publish(GridEvents.cellKeyDown, onKeyDown),
-    onDragEnter: publish(GridEvents.cellDragEnter, onDragEnter),
-    onDragOver: publish(GridEvents.cellDragOver, onDragOver)
+    onClick: publish('cellClick', onClick),
+    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+    onMouseDown: publish('cellMouseDown', onMouseDown),
+    onMouseUp: publishMouseUp('cellMouseUp'),
+    onKeyDown: publish('cellKeyDown', onKeyDown),
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
   }, other, {
     onFocus: handleFocus,
     children: renderChildren()

package/modern/components/cell/GridEditBooleanCell.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -19,14 +20,15 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function GridEditBooleanCell(props) {
+function GridEditBooleanCell(props) {
   const {
     id: idProp,
     value,
     api,
     field,
     className,
-    hasFocus
+    hasFocus,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -38,15 +40,20 @@ export function GridEditBooleanCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const handleChange = React.useCallback(event => {
+  const handleChange = React.useCallback(async event => {
     const newValue = event.target.checked;
+
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+
     setValueState(newValue);
-    api.setEditCellValue({
+    await api.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
-  }, [api, field, idProp]);
+  }, [api, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);
@@ -68,4 +75,92 @@ export function GridEditBooleanCell(props) {
     }, rootProps.componentsProps?.baseCheckbox))
   }));
 }
+
+process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditBooleanCell };
 export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));

package/modern/components/cell/GridEditDateCell.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase from '@mui/material/InputBase';
@@ -19,7 +20,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function GridEditDateCell(props) {
+function GridEditDateCell(props) {
   const {
     id,
     value: valueProp,
@@ -27,7 +28,8 @@ export function GridEditDateCell(props) {
     field,
     colDef,
     hasFocus,
-    inputProps
+    inputProps,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -64,7 +66,7 @@ export function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const handleChange = React.useCallback(event => {
+  const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
     let newParsedDate;
 
@@ -83,6 +85,10 @@ export function GridEditDateCell(props) {
       }
     }
 
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
+
     setValueState({
       parsed: newParsedDate,
       formatted: newFormattedDate
@@ -92,7 +98,7 @@ export function GridEditDateCell(props) {
       field,
       value: newParsedDate
     }, event);
-  }, [api, field, id]);
+  }, [api, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(state => {
       if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {
@@ -119,4 +125,92 @@ export function GridEditDateCell(props) {
     onChange: handleChange
   }, other));
 }
+
+process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditDateCell };
 export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));

package/modern/components/cell/GridEditInputCell.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -48,7 +48,8 @@ function GridEditInputCell(props) {
     colDef,
     hasFocus,
     debounceMs = rootProps.experimentalFeatures?.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME,
-    isProcessingProps
+    isProcessingProps,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -58,8 +59,13 @@ function GridEditInputCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const handleChange = React.useCallback(event => {
+  const handleChange = React.useCallback(async event => {
     const newValue = event.target.value;
+
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+
     setValueState(newValue);
     api.setEditCellValue({
       id,
@@ -67,7 +73,7 @@ function GridEditInputCell(props) {
       value: newValue,
       debounceMs
     }, event);
-  }, [api, debounceMs, field, id]);
+  }, [api, debounceMs, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);
@@ -146,6 +152,14 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   isProcessingProps: PropTypes.bool,
   isValidating: PropTypes.bool,
 
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
   /**
    * The row model of the row that the current cell belongs to.
    */
@@ -154,7 +168,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
 } : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -8,7 +8,6 @@ import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
-import { GridEvents } from '../../models/events/gridEvents';
 import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -32,7 +31,8 @@ function GridEditSingleSelectCell(props) {
     row,
     colDef,
     hasFocus,
-    error
+    error,
+    onValueChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -77,6 +77,11 @@ function GridEditSingleSelectCell(props) {
     const target = event.target; // NativeSelect casts the value to a string.
 
     const formattedTargetValue = getValueFromValueOptions(target.value, valueOptionsFormatted);
+
+    if (onValueChange) {
+      await onValueChange(event, formattedTargetValue);
+    }
+
     const isValid = await api.setEditCellValue({
       id,
       field,
@@ -103,7 +108,7 @@ function GridEditSingleSelectCell(props) {
       if (event.key) {
         // TODO v6: remove once we stop ignoring events fired from portals
         const params = api.getCellParams(id, field);
-        api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+        api.publishEvent('cellNavigationKeyDown', params, event);
       }
     }
   };
@@ -212,6 +217,14 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isProcessingProps: PropTypes.bool,
   isValidating: PropTypes.bool,
 
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
   /**
    * The row model of the row that the current cell belongs to.
    */
@@ -220,7 +233,17 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
 } : void 0;
 export { GridEditSingleSelectCell };
 export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));

package/modern/components/cell/index.js

@@ -1,4 +1,6 @@
 export * from './GridCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
 export * from './GridEditInputCell';
 export * from './GridEditSingleSelectCell';
 export * from './GridActionsCell';

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
@@ -85,25 +84,25 @@ function GridColumnHeaderItem(props) {
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
   }, [apiRef, column.field]);
   const mouseEventsHandlers = {
-    onClick: publish(GridEvents.columnHeaderClick),
-    onDoubleClick: publish(GridEvents.columnHeaderDoubleClick),
-    onMouseOver: publish(GridEvents.columnHeaderOver),
+    onClick: publish('columnHeaderClick'),
+    onDoubleClick: publish('columnHeaderDoubleClick'),
+    onMouseOver: publish('columnHeaderOver'),
     // TODO remove as it's not used
-    onMouseOut: publish(GridEvents.columnHeaderOut),
+    onMouseOut: publish('columnHeaderOut'),
     // TODO remove as it's not used
-    onMouseEnter: publish(GridEvents.columnHeaderEnter),
+    onMouseEnter: publish('columnHeaderEnter'),
     // TODO remove as it's not used
-    onMouseLeave: publish(GridEvents.columnHeaderLeave),
+    onMouseLeave: publish('columnHeaderLeave'),
     // TODO remove as it's not used
-    onKeyDown: publish(GridEvents.columnHeaderKeyDown),
-    onFocus: publish(GridEvents.columnHeaderFocus),
-    onBlur: publish(GridEvents.columnHeaderBlur)
+    onKeyDown: publish('columnHeaderKeyDown'),
+    onFocus: publish('columnHeaderFocus'),
+    onBlur: publish('columnHeaderBlur')
   };
   const draggableEventHandlers = {
-    onDragStart: publish(GridEvents.columnHeaderDragStart),
-    onDragEnter: publish(GridEvents.columnHeaderDragEnter),
-    onDragOver: publish(GridEvents.columnHeaderDragOver),
-    onDragEnd: publish(GridEvents.columnHeaderDragEnd)
+    onDragStart: publish('columnHeaderDragStart'),
+    onDragEnter: publish('columnHeaderDragEnter'),
+    onDragOver: publish('columnHeaderDragOver'),
+    onDragEnd: publish('columnHeaderDragEnd')
   };
   const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
@@ -115,7 +114,7 @@ function GridColumnHeaderItem(props) {
 
   const classes = useUtilityClasses(ownerState);
   const width = column.computedWidth;
-  let ariaSort;
+  let ariaSort = 'none';
 
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
@@ -198,7 +197,7 @@ function GridColumnHeaderItem(props) {
       resizable: !rootProps.disableColumnResize && !!column.resizable,
       resizing: isResizing,
       height: headerHeight,
-      onMouseDown: publish(GridEvents.columnSeparatorMouseDown),
+      onMouseDown: publish('columnSeparatorMouseDown'),
       side: separatorSide
     }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
       columnMenuId: columnMenuId,

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useForkRef } from '@mui/material/utils';
-import { GridEvents } from '../../models/events';
 import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -48,7 +47,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       value: event.target.checked,
       id
     };
-    apiRef.current.publishEvent(GridEvents.rowSelectionCheckboxChange, params, event);
+    apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
 
   React.useLayoutEffect(() => {
@@ -71,7 +70,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
   const isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));