@mui/x-data-grid 5.10.0 → 5.11.0

package/components/toolbar/GridToolbarExport.js

@@ -1,24 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["csvOptions", "printOptions"];
+const _excluded = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridToolbarExportContainer } from './GridToolbarExportContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export const GridCsvExportMenuItem = props => {
   const apiRef = useGridApiContext();
   const {
     hideMenu,
     options
   } = props;
-
-  if (options != null && options.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(MenuItem, {
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
@@ -33,11 +27,6 @@ export const GridPrintExportMenuItem = props => {
     hideMenu,
     options
   } = props;
-
-  if (options != null && options.disableToolbarButton) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(MenuItem, {
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
@@ -49,21 +38,27 @@ export const GridPrintExportMenuItem = props => {
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
     csvOptions = {},
-    printOptions = {}
+    printOptions = {},
+    excelOptions
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  if (csvOptions != null && csvOptions.disableToolbarButton && printOptions != null && printOptions.disableToolbarButton) {
+  const apiRef = useGridApiContext();
+  const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
+    excelOptions,
+    csvOptions,
+    printOptions
+  }).sort((a, b) => a.componentName > b.componentName ? 1 : -1);
+
+  if (preProcessedButtons.length === 0) {
     return null;
   }
 
-  return /*#__PURE__*/_jsxs(GridToolbarExportContainer, _extends({}, other, {
+  return /*#__PURE__*/_jsx(GridToolbarExportContainer, _extends({}, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GridCsvExportMenuItem, {
-      options: csvOptions
-    }), /*#__PURE__*/_jsx(GridPrintExportMenuItem, {
-      options: printOptions
-    })]
+    children: preProcessedButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button.component, {
+      key: index
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material/TextField';
+export declare type GridToolbarQuickFilterProps = TextFieldProps & {
+    /**
+     * Function responsible for parsing text input in an array of independent values for quick filtering.
+     * @param {string} input The value entered by the user
+     * @returns {any[]} The array of value on which quick filter is applied
+     */
+    quickFilterParser?: (input: string) => any[];
+    /**
+     * The debounce time in milliseconds.
+     * @default 500
+     */
+    debounceMs?: number;
+};
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): JSX.Element;
+declare namespace GridToolbarQuickFilter {
+    var propTypes: any;
+}
+export { GridToolbarQuickFilter };

package/components/toolbar/GridToolbarQuickFilter.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["quickFilterParser", "debounceMs"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/Search';
+import { styled } from '@mui/material/styles';
+import { debounce } from '@mui/material/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridToolbarQuickFilterRoot = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter',
+  overridesResolver: (props, styles) => styles.toolbarQuickFilter
+})(({
+  theme
+}) => ({
+  width: 'auto',
+  paddingBottom: theme.spacing(0.5),
+  '& .MuiSvgIcon-root': {
+    marginRight: theme.spacing(0.5)
+  },
+  '& .MuiInput-underline:before': {
+    borderBottom: `1px solid ${theme.palette.divider}`
+  }
+}));
+
+const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
+
+function GridToolbarQuickFilter(props) {
+  var _rootProps$components;
+
+  const {
+    quickFilterParser = defaultSearchValueParser,
+    debounceMs = 500
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const [searchValue, setSearchValue] = React.useState('');
+  const updateSearchValue = React.useCallback(newSearchValue => {
+    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+  }, [apiRef, quickFilterParser]);
+  const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  const handleSearchValueChange = React.useCallback(event => {
+    const newSearchValue = event.target.value;
+    setSearchValue(newSearchValue);
+    debouncedUpdateSearchValue(newSearchValue);
+  }, [debouncedUpdateSearchValue]);
+  return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
+    as: rootProps.components.BaseTextField,
+    variant: "standard",
+    value: searchValue,
+    onChange: handleSearchValueChange,
+    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
+    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+    type: "search",
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(SearchIcon, {
+        fontSize: "small"
+      })
+    }
+  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+}
+
+process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The debounce time in milliseconds.
+   * @default 500
+   */
+  debounceMs: PropTypes.number,
+
+  /**
+   * Function responsible for parsing text input in an array of independent values for quick filtering.
+   * @param {string} input The value entered by the user
+   * @returns {any[]} The array of value on which quick filter is applied
+   */
+  quickFilterParser: PropTypes.func
+} : void 0;
+export { GridToolbarQuickFilter };

package/components/toolbar/index.d.ts

@@ -1,6 +1,8 @@
 export * from './GridToolbar';
 export * from './GridToolbarColumnsButton';
 export * from './GridToolbarDensitySelector';
-export * from './GridToolbarExport';
+export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, } from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport, } from './GridToolbarExport';
 export * from './GridToolbarFilterButton';
 export * from './GridToolbarExportContainer';
+export * from './GridToolbarQuickFilter';

package/components/toolbar/index.js

@@ -1,6 +1,7 @@
 export * from './GridToolbar';
 export * from './GridToolbarColumnsButton';
 export * from './GridToolbarDensitySelector';
-export * from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
 export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
+export * from './GridToolbarExportContainer';
+export * from './GridToolbarQuickFilter';

package/components/virtualization/GridVirtualScroller.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-declare const GridVirtualScroller: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import { SxProps, Theme } from '@mui/material/styles';
+declare const GridVirtualScroller: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScroller };

package/components/virtualization/GridVirtualScrollerContent.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import { SxProps, Theme } from '@mui/material/styles';
+declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerContent };

package/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+import { SxProps, Theme } from '@mui/material/styles';
+declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerRenderZone };

package/constants/localeTextConstants.js

@@ -18,11 +18,16 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipHide: 'Hide filters',
   toolbarFiltersTooltipShow: 'Show filters',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterLabel: 'Search',
+  toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
+  toolbarExportExcel: 'Download as Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Find column',
   columnsPanelTextFieldPlaceholder: 'Column title',

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -17,6 +17,13 @@ export interface GridPipeProcessingLookup {
     hydrateColumns: {
         value: GridHydrateColumnsValue;
     };
+    exportMenu: {
+        value: {
+            component: React.ReactElement;
+            componentName: string;
+        }[];
+        context: any;
+    };
     preferencePanel: {
         value: React.ReactNode;
         context: GridPreferencePanelsValue;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -20,7 +20,7 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -30,12 +30,12 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
@@ -25,7 +24,7 @@ export const GRID_STRATEGIES_PROCESSORS = {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -35,12 +34,12 @@ export const GRID_STRATEGIES_PROCESSORS = {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *
@@ -74,7 +73,7 @@ export const useGridStrategyProcessing = apiRef => {
     }
 
     if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
-      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+      apiRef.current.publishEvent('activeStrategyProcessorChange', processorName);
     }
 
     return cleanup;
@@ -113,7 +112,7 @@ export const useGridStrategyProcessing = apiRef => {
       group: strategyGroup,
       isAvailable
     });
-    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   const strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/hooks/core/useGridApiInitialization.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
@@ -15,6 +14,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new EventManager(),
+      unstable_caches: {},
       state: {},
       instanceId: globalId
     };
@@ -43,7 +43,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     };
   }, [apiRef]);
   const showError = React.useCallback(args => {
-    apiRef.current.publishEvent(GridEvents.componentError, args);
+    apiRef.current.publishEvent('componentError', args);
   }, [apiRef]);
   useGridApiMethod(apiRef, {
     subscribeEvent,
@@ -53,7 +53,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
-      api.publishEvent(GridEvents.unmount);
+      api.publishEvent('unmount');
     };
   }, [apiRef]);
   return apiRef;

package/hooks/core/useGridErrorHandler.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiEventHandler } from '../utils/useGridApiEventHandler';
 export function useGridErrorHandler(apiRef, props) {
   const handleError = React.useCallback(args => {
@@ -12,5 +11,5 @@ export function useGridErrorHandler(apiRef, props) {
   React.useEffect(() => {
     handleError(props.error);
   }, [handleError, props.error]);
-  useGridApiEventHandler(apiRef, GridEvents.componentError, handleError);
+  useGridApiEventHandler(apiRef, 'componentError', handleError);
 }

package/hooks/core/useGridStateInitialization.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["stateId"];
 import * as React from 'react';
 import { GridSignature } from '../utils/useGridApiEventHandler';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 export const useGridStateInitialization = (apiRef, props) => {
@@ -66,7 +65,7 @@ export const useGridStateInitialization = (apiRef, props) => {
       apiRef.current.state = newState;
 
       if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent(GridEvents.stateChange, newState);
+        apiRef.current.publishEvent('stateChange', newState);
       }
     }
 

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -13,7 +13,6 @@ import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
@@ -129,11 +128,11 @@ export const useGridColumnHeaders = props => {
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
   const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleColumnResizeStop);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnReorderStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScroll);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll);
 
   const getColumns = (params, other = {}) => {
     const {

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
 export const columnMenuStateInitializer = state => _extends({}, state, {
@@ -78,7 +77,7 @@ export const useGridColumnMenu = apiRef => {
    * EVENTS
    */
 
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerWheel, apiRef.current.hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerTouchMove, apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/hooks/features/columns/useGridColumnSpanning.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
 
 /**
  * @requires useGridColumns (method, event)
@@ -105,5 +104,5 @@ export const useGridColumnSpanning = apiRef => {
     // `colSpan` needs to be recalculated after column reordering
     lookup.current = {};
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };

package/hooks/features/columns/useGridColumns.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
@@ -51,13 +50,13 @@ export function useGridColumns(apiRef, props) {
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,
     stateSelector: gridColumnVisibilityModelSelector,
-    changeEvent: GridEvents.columnVisibilityModelChange
+    changeEvent: 'columnVisibilityModelChange'
   });
   const setGridColumnsState = React.useCallback(columnsState => {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+    apiRef.current.publishEvent('columnsChange', columnsState.all);
   }, [logger, apiRef]);
   /**
    * API METHODS
@@ -135,7 +134,7 @@ export function useGridColumns(apiRef, props) {
         colDef: newColumn,
         isVisible
       };
-      apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
+      apiRef.current.publishEvent('columnVisibilityChange', params);
     }
   }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
@@ -159,7 +158,7 @@ export function useGridColumns(apiRef, props) {
       targetIndex: targetIndexPosition,
       oldIndex: oldIndexPosition
     };
-    apiRef.current.publishEvent(GridEvents.columnOrderChange, params);
+    apiRef.current.publishEvent('columnOrderChange', params);
   }, [apiRef, logger, setGridColumnsState]);
   const setColumnWidth = React.useCallback((field, width) => {
     logger.debug(`Updating column ${field} width to ${width}`);
@@ -170,7 +169,7 @@ export function useGridColumns(apiRef, props) {
     });
 
     apiRef.current.updateColumns([newColumn]);
-    apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+    apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
       width
@@ -256,7 +255,7 @@ export function useGridColumns(apiRef, props) {
     apiRef.current.setState(mergeColumnsState(columnsState));
 
     if (initialState != null) {
-      apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+      apiRef.current.publishEvent('columnsChange', columnsState.all);
     }
 
     return params;
@@ -287,8 +286,8 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
   /**
    * APPLIERS
    */

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare function useGridDimensions(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight'>): void;
+export declare function useGridDimensions(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight'>): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { debounce, ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -101,12 +100,12 @@ export function useGridDimensions(apiRef, props) {
     fullDimensionsRef.current = newFullDimensions;
 
     if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
-      apiRef.current.publishEvent(GridEvents.viewportInnerSizeChange, newFullDimensions.viewportInnerSize);
+      apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
   const resize = React.useCallback(() => {
     updateGridDimensionsRef();
-    apiRef.current.publishEvent(GridEvents.debouncedResize, rootDimensionsRef.current);
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
   }, [apiRef, updateGridDimensionsRef]);
   const getRootDimensions = React.useCallback(() => fullDimensionsRef.current, []);
   const getViewportPageSize = React.useCallback(() => {
@@ -172,10 +171,10 @@ export function useGridDimensions(apiRef, props) {
     debounceResize();
   }, [props.autoHeight, debounceResize, logger, resize]);
   useEnhancedEffect(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
-  useGridApiOptionHandler(apiRef, GridEvents.debouncedResize, props.onResize);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'pageChange', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'pageSizeChange', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'columnsChange', updateGridDimensionsRef);
+  useGridApiEventHandler(apiRef, 'resize', handleResize);
+  useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
 }

package/hooks/features/editRows/useGridCellEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'onProcessRowUpdateError'>) => void;
+export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature'>) => void;