[DataGrid] Fix events naming (#1862)

docs/src/pages/components/data-grid/events/events.json

@@ -46,7 +46,7 @@
     "description": "Fired when a <code>mouseleave</code> event happens in a cell. Called with a <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a> object."
   },
   {
-    "name": "cellKeydown",
+    "name": "cellKeyDown",
     "description": "Fired when a <code>keydown</code> event happens in a cell. Called with a <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a> object."
   },
   {
@@ -114,7 +114,7 @@
     "description": "Fired when a row is selected or unselected. Called with a GridRowSelectedParams object."
   },
   {
-    "name": "columnHeaderKeydown",
+    "name": "columnHeaderKeyDown",
     "description": "Fired when a key is pressed in a column header. It&#39;s mapped do the <code>keydown</code> DOM event.\nCalled with a GridColumnHeaderParams object."
   },
   {
@@ -150,7 +150,7 @@
     "description": "Fired during the resizing of a column. Called with a GridColumnResizeParams object."
   },
   {
-    "name": "columnResizeCommitted",
+    "name": "columnWidthChange",
     "description": "Fired when a column is resized. Called with a GridColumnResizeParams object."
   },
   {
@@ -162,9 +162,8 @@
     "description": "Fired when the user stops resizing a column. Called with an object <code>{ field: string }</code>."
   },
   { "name": "columnOrderChange", "description": "Fired when the user ends resizing a column." },
-  { "name": "rowsCleared", "description": "Fired when the grid is emptied." },
   {
-    "name": "columnsUpdated",
+    "name": "columnsChange",
     "description": "Fired when the columns state is changed.\nCalled with an array of strings correspoding to the field names."
   },
   {

packages/grid/_modules_/grid/components/cell/GridCell.tsx

@@ -7,7 +7,7 @@ import {
   GRID_CELL_DOUBLE_CLICK,
   GRID_CELL_ENTER,
   GRID_CELL_FOCUS,
-  GRID_CELL_KEYDOWN,
+  GRID_CELL_KEY_DOWN,
   GRID_CELL_LEAVE,
   GRID_CELL_MOUSE_DOWN,
   GRID_CELL_MOUSE_UP,
@@ -126,7 +126,7 @@ export const GridCell = React.memo(function GridCell(props: GridCellProps) {
       onMouseOut: publish(GRID_CELL_OUT),
       onMouseEnter: publish(GRID_CELL_ENTER),
       onMouseLeave: publish(GRID_CELL_LEAVE),
-      onKeyDown: publish(GRID_CELL_KEYDOWN),
+      onKeyDown: publish(GRID_CELL_KEY_DOWN),
       onBlur: publishBlur(GRID_CELL_BLUR),
       onFocus: publish(GRID_CELL_FOCUS),
       onDragStart: publish(GRID_CELL_DRAG_START),

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 // @ts-expect-error fixed in Material-UI v5, types definitions were added.
 import { unstable_useId as useId } from '@material-ui/core/utils';
 import {
-  GRID_COLUMN_HEADER_KEYDOWN,
+  GRID_COLUMN_HEADER_KEY_DOWN,
   GRID_COLUMN_HEADER_CLICK,
   GRID_COLUMN_HEADER_DOUBLE_CLICK,
   GRID_COLUMN_HEADER_ENTER,
@@ -100,7 +100,7 @@ export function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
       onMouseOut: publish(GRID_COLUMN_HEADER_OUT),
       onMouseEnter: publish(GRID_COLUMN_HEADER_ENTER),
       onMouseLeave: publish(GRID_COLUMN_HEADER_LEAVE),
-      onKeyDown: publish(GRID_COLUMN_HEADER_KEYDOWN),
+      onKeyDown: publish(GRID_COLUMN_HEADER_KEY_DOWN),
       onFocus: publish(GRID_COLUMN_HEADER_FOCUS),
       onBlur: publish(GRID_COLUMN_HEADER_BLUR),
     }),

packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useForkRef } from '@material-ui/core/utils';
-import { GRID_CELL_NAVIGATION_KEYDOWN } from '../../constants/eventsConstants';
+import { GRID_CELL_NAVIGATION_KEY_DOWN } from '../../constants/eventsConstants';
 import { GridCellParams } from '../../models/params/gridCellParams';
 import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
@@ -44,7 +44,7 @@ export const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, Gri
           event.stopPropagation();
         }
         if (isNavigationKey(event.key) && !event.shiftKey) {
-          apiRef!.current.publishEvent(GRID_CELL_NAVIGATION_KEYDOWN, props, event);
+          apiRef!.current.publishEvent(GRID_CELL_NAVIGATION_KEY_DOWN, props, event);
         }
       },
       [apiRef, props],

packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
-  GRID_COLUMN_HEADER_NAVIGATION_KEYDOWN,
-  GRID_SELECTION_CHANGED,
+  GRID_COLUMN_HEADER_NAVIGATION_KEY_DOWN,
+  GRID_SELECTION_CHANGE,
 } from '../../constants/eventsConstants';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { visibleSortedGridRowIdsSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -45,7 +45,7 @@ export const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnH
           event.stopPropagation();
         }
         if (isNavigationKey(event.key) && !event.shiftKey) {
-          apiRef!.current.publishEvent(GRID_COLUMN_HEADER_NAVIGATION_KEYDOWN, props, event);
+          apiRef!.current.publishEvent(GRID_COLUMN_HEADER_NAVIGATION_KEY_DOWN, props, event);
         }
       },
       [apiRef, props],
@@ -56,7 +56,7 @@ export const GridHeaderCheckbox = React.forwardRef<HTMLInputElement, GridColumnH
     }, []);
 
     React.useEffect(() => {
-      return apiRef?.current.subscribeEvent(GRID_SELECTION_CHANGED, handleSelectionChange);
+      return apiRef?.current.subscribeEvent(GRID_SELECTION_CHANGE, handleSelectionChange);
     }, [apiRef, handleSelectionChange]);
 
     const CheckboxComponent = apiRef?.current.components.Checkbox!;

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -11,31 +11,10 @@ export const GRID_RESIZE = 'resize';
  */
 export const GRID_DEBOUNCED_RESIZE = 'debouncedResize';
 
-/**
- * Fired when a `focusout` event happens in the grid.
- * @ignore - do not document.
- * @event
- */
-export const GRID_FOCUS_OUT = 'focusout';
-
-/**
- * Fired when a `keydown` event happens in the grid.
- * @ignore - do not document.
- * @event
- */
-export const GRID_KEYDOWN = 'keydown';
-
-/**
- * Fired when a `keyup` event happens in the grid.
- * @ignore - do not document.
- * @event
- */
-export const GRID_KEYUP = 'keyup';
-
 /**
  * @ignore - do not document.
  */
-export const GRID_NATIVE_SCROLL = 'scroll';
+export const GRID_SCROLL = 'scroll';
 
 // GRID events
 
@@ -51,12 +30,6 @@ export const GRID_COMPONENT_ERROR = 'componentError';
  */
 export const GRID_UNMOUNT = 'unmount';
 
-/**
- * @ignore - do not document.
- * TODO remove
- */
-export const GRID_ELEMENT_FOCUS_OUT = 'gridFocusOut';
-
 /**
  * Fired when the mode of a cell changes. Called with a [[GridCellModeChangeParams]] object.
  * @event
@@ -115,7 +88,7 @@ export const GRID_CELL_LEAVE = 'cellLeave';
  * Fired when a `keydown` event happens in a cell. Called with a [[GridCellParams]] object.
  * @event
  */
-export const GRID_CELL_KEYDOWN = 'cellKeydown';
+export const GRID_CELL_KEY_DOWN = 'cellKeyDown';
 
 /**
  * Fired when the `blur` event of a cell is triggered. Called with a [[GridCellParams]] object.
@@ -203,7 +176,7 @@ export const GRID_CELL_EDIT_EXIT = 'cellEditExit';
  * @ignore - do not document.
  * @event
  */
-export const GRID_CELL_NAVIGATION_KEYDOWN = 'cellNavigationKeyDown';
+export const GRID_CELL_NAVIGATION_KEY_DOWN = 'cellNavigationKeyDown';
 
 /**
  * Fired when a row is clicked. Called with a [[GridRowParams]] object.
@@ -273,14 +246,14 @@ export const GRID_COLUMN_HEADER_FOCUS = 'columnHeaderFocus';
  * @ignore - do not document.
  * @event
  */
-export const GRID_COLUMN_HEADER_NAVIGATION_KEYDOWN = 'columnHeaderNavigationKeydown';
+export const GRID_COLUMN_HEADER_NAVIGATION_KEY_DOWN = 'columnHeaderNavigationKeyDown';
 
 /**
  * Fired when a key is pressed in a column header. It's mapped do the `keydown` DOM event.
  * Called with a [[GridColumnHeaderParams]] object.
  * @event
  */
-export const GRID_COLUMN_HEADER_KEYDOWN = 'columnHeaderKeydown';
+export const GRID_COLUMN_HEADER_KEY_DOWN = 'columnHeaderKeyDown';
 
 /**
  * Fired when a column header is clicked. Called with a [[GridColumnHeaderParams]] object.
@@ -360,7 +333,7 @@ export const GRID_COLUMN_HEADER_DRAG_END = 'columnHeaderDragEnd';
  * Called with a [[GridSelectionModelChangeParams]] object.
  * @event
  */
-export const GRID_SELECTION_CHANGED = 'selectionChange';
+export const GRID_SELECTION_CHANGE = 'selectionChange';
 
 /**
  * Fired when the current page change. Called with a [[GridPageChangeParams]] object.
@@ -372,7 +345,7 @@ export const GRID_PAGE_CHANGE = 'pageChange';
  * Fired when the page size change. Called with a [[GridPageChangeParams]] object.
  * @event
  */
-export const GRID_PAGESIZE_CHANGE = 'pageSizeChange';
+export const GRID_PAGE_SIZE_CHANGE = 'pageSizeChange';
 
 /**
  * Fired during the scroll of the grid viewport. Called with a [[GridScrollParams]] object.
@@ -404,7 +377,7 @@ export const GRID_COLUMN_RESIZE = 'columnResize';
  * Fired when a column is resized. Called with a [[GridColumnResizeParams]] object.
  * @event
  */
-export const GRID_COLUMN_RESIZE_COMMITTED = 'columnResizeCommitted';
+export const GRID_COLUMN_WIDTH_CHANGE = 'columnWidthChange';
 
 /**
  * Fired when the user starts resizing a column. Called with an object `{ field: string }`.
@@ -429,7 +402,7 @@ export const GRID_COLUMN_ORDER_CHANGE = 'columnOrderChange';
  * @ignore - do not document.
  * @event
  */
-export const GRID_ROWS_UPDATED = 'rowsUpdated';
+export const GRID_ROWS_UPDATE = 'rowsUpdate';
 
 /**
  * Fired when the rows are updated.
@@ -439,17 +412,20 @@ export const GRID_ROWS_UPDATED = 'rowsUpdated';
 export const GRID_ROWS_SET = 'rowsSet';
 
 /**
- * Fired when the grid is emptied.
+ * Implementation detail.
+ * Fired to reset the sortedRow when the set of rows changes.
+ * It's important as the rendered rows are coming from the sortedRow
+ * @ignore - do not document.
  * @event
  */
-export const GRID_ROWS_CLEARED = 'rowsCleared';
+export const GRID_ROWS_CLEAR = 'rowsClear';
 
 /**
  * Fired when the columns state is changed.
  * Called with an array of strings correspoding to the field names.
  * @event
  */
-export const GRID_COLUMNS_UPDATED = 'columnsUpdated';
+export const GRID_COLUMNS_CHANGE = 'columnsChange';
 
 /**
  * Fired when the sort model changes.

packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx

@@ -8,7 +8,7 @@ import {
   GRID_COLUMN_RESIZE_START,
   GRID_COLUMN_RESIZE_STOP,
   GRID_COLUMN_RESIZE,
-  GRID_COLUMN_RESIZE_COMMITTED,
+  GRID_COLUMN_WIDTH_CHANGE,
 } from '../../../constants/eventsConstants';
 import {
   GRID_COLUMN_HEADER_CSS_CLASS,
@@ -105,7 +105,7 @@ export const useGridColumnResize = (apiRef: GridApiRef) => {
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
       apiRef.current.publishEvent(GRID_COLUMN_RESIZE_STOP);
-      apiRef.current.publishEvent(GRID_COLUMN_RESIZE_COMMITTED, {
+      apiRef.current.publishEvent(GRID_COLUMN_WIDTH_CHANGE, {
         element: colElementRef.current,
         colDef: colDefRef.current,
         api: apiRef,
@@ -332,5 +332,5 @@ export const useGridColumnResize = (apiRef: GridApiRef) => {
   useGridApiEventHandler(apiRef, GRID_COLUMN_RESIZE_STOP, handleResizeStop);
 
   useGridApiOptionHandler(apiRef, GRID_COLUMN_RESIZE, options.onColumnResize);
-  useGridApiOptionHandler(apiRef, GRID_COLUMN_RESIZE_COMMITTED, options.onColumnResizeCommitted);
+  useGridApiOptionHandler(apiRef, GRID_COLUMN_WIDTH_CHANGE, options.onColumnResizeCommitted);
 };

packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
-  GRID_COLUMNS_UPDATED,
+  GRID_COLUMNS_CHANGE,
   GRID_COLUMN_ORDER_CHANGE,
-  GRID_COLUMN_RESIZE_COMMITTED,
+  GRID_COLUMN_WIDTH_CHANGE,
   GRID_COLUMN_VISIBILITY_CHANGE,
 } from '../../../constants/eventsConstants';
 import { GridApiRef } from '../../../models/api/gridApiRef';
@@ -129,7 +129,7 @@ export function useGridColumns(apiRef: GridApiRef, { columns }: { columns: GridC
       forceUpdate();
 
       if (apiRef.current && emit) {
-        apiRef.current.publishEvent(GRID_COLUMNS_UPDATED, newState.all);
+        apiRef.current.publishEvent(GRID_COLUMNS_CHANGE, newState.all);
       }
     },
     [logger, setGridState, forceUpdate, apiRef],
@@ -225,7 +225,7 @@ export function useGridColumns(apiRef: GridApiRef, { columns }: { columns: GridC
       const column = apiRef.current.getColumn(field);
       apiRef.current.updateColumn({ ...column, width });
 
-      apiRef.current.publishEvent(GRID_COLUMN_RESIZE_COMMITTED, {
+      apiRef.current.publishEvent(GRID_COLUMN_WIDTH_CHANGE, {
         element: apiRef.current.getColumnHeaderElement(field),
         colDef: column,
         api: apiRef,

packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {
-  GRID_COLUMNS_UPDATED,
+  GRID_COLUMNS_CHANGE,
   GRID_FILTER_MODEL_CHANGE,
   GRID_ROWS_SET,
-  GRID_ROWS_UPDATED,
+  GRID_ROWS_UPDATE,
 } from '../../../constants/eventsConstants';
 import { GridComponentProps } from '../../../GridComponentProps';
 import { GridApiRef } from '../../../models/api/gridApiRef';
@@ -294,7 +294,7 @@ export const useGridFilter = (
   );
 
   useGridApiEventHandler(apiRef, GRID_ROWS_SET, apiRef.current.applyFilters);
-  useGridApiEventHandler(apiRef, GRID_ROWS_UPDATED, apiRef.current.applyFilters);
+  useGridApiEventHandler(apiRef, GRID_ROWS_UPDATE, apiRef.current.applyFilters);
   useGridApiOptionHandler(apiRef, GRID_FILTER_MODEL_CHANGE, props.onFilterModelChange);
 
   React.useEffect(() => {
@@ -332,5 +332,5 @@ export const useGridFilter = (
     apiRef.current.applyFilters();
   }, [apiRef, logger]);
 
-  useGridApiEventHandler(apiRef, GRID_COLUMNS_UPDATED, onColUpdated);
+  useGridApiEventHandler(apiRef, GRID_COLUMNS_CHANGE, onColUpdated);
 };

packages/grid/_modules_/grid/hooks/features/filter/visibleGridRowsState.ts

@@ -2,7 +2,6 @@ import { GridRowId } from '../../../models/gridRows';
 
 export interface VisibleGridRowsState {
   visibleRowsLookup: Record<GridRowId, boolean>;
-
   visibleRows?: GridRowId[];
 }