[data grid] use event.key for Tab and Escape keys (#14170)

Co-authored-by: Rom Grk <romgrk.cc@gmail.com>

packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx

@@ -4,7 +4,6 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import {
@@ -111,13 +110,14 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) {
       setOpen(false);
       return;
     }
-    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+    if (reason === 'backdropClick' || event.key === 'Escape') {
       const params = apiRef.current.getCellParams(id, field);
       apiRef.current.publishEvent('cellEditStop', {
         ...params,
-        reason: isEscapeKey(event.key)
-          ? GridCellEditStopReasons.escapeKeyDown
-          : GridCellEditStopReasons.cellFocusOut,
+        reason:
+          event.key === 'Escape'
+            ? GridCellEditStopReasons.escapeKeyDown
+            : GridCellEditStopReasons.cellFocusOut,
       });
     }
   };

packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
 
-import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../../utils/keyboardUtils';
 import { GridColumnMenuContainerProps } from './GridColumnMenuProps';
 import { gridClasses } from '../../../constants/gridClasses';
 
@@ -18,7 +18,7 @@ const GridColumnMenuContainer = React.forwardRef<HTMLUListElement, GridColumnMen
 
     const handleListKeyDown = React.useCallback(
       (event: React.KeyboardEvent) => {
-        if (isTabKey(event.key)) {
+        if (event.key === 'Tab') {
           event.preventDefault();
         }
         if (isHideMenuKey(event.key)) {

packages/x-data-grid/src/components/panel/GridPanel.tsx

@@ -7,7 +7,6 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
@@ -68,7 +67,7 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
-      if (isEscapeKey(event.key)) {
+      if (event.key === 'Escape') {
         apiRef.current.hidePreferences();
       }
     },

packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx

@@ -8,7 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { GridDensity } from '../../models/gridDensity';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridDensityOption } from '../../models/api/gridDensityApi';
@@ -83,7 +83,7 @@ const GridToolbarDensitySelector = React.forwardRef<
   };
 
   const handleListKeyDown = (event: React.KeyboardEvent) => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx

@@ -4,7 +4,7 @@ import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui
 import MenuList from '@mui/material/MenuList';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -43,7 +43,7 @@ const GridToolbarExportContainer = React.forwardRef<
   const handleMenuClose = () => setOpen(false);
 
   const handleListKeyDown = (event: React.KeyboardEvent) => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

packages/x-data-grid/src/utils/keyboardUtils.ts

@@ -1,15 +1,5 @@
 import * as React from 'react';
 
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isEscapeKey = (key: string): boolean => key === 'Escape';
-
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isTabKey = (key: string): boolean => key === 'Tab';
-
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 // So event.key.length === 1 is often enough.
@@ -50,7 +40,7 @@ export const isNavigationKey = (key: string) =>
 export const isKeyboardEvent = (event: any): event is React.KeyboardEvent<HTMLElement> =>
   !!event.key;
 
-export const isHideMenuKey = (key: React.KeyboardEvent['key']) => isTabKey(key) || isEscapeKey(key);
+export const isHideMenuKey = (key: React.KeyboardEvent['key']) => key === 'Tab' || key === 'Escape';
 
 // In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
 // However, maybe it's overkill to fix, so let's be lazy.