diff --git a/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx index 328bd0110969..baab9cfbdcd1 100644 --- a/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx +++ b/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, }); } }; diff --git a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx index 7e283fc151ca..1f14ea92cb31 100644 --- a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx +++ b/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 { - if (isTabKey(event.key)) { + if (event.key === 'Tab') { event.preventDefault(); } if (isHideMenuKey(event.key)) { diff --git a/packages/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx index 2106407887cf..5e920533987a 100644 --- a/packages/x-data-grid/src/components/panel/GridPanel.tsx +++ b/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((props, ref) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { - if (isEscapeKey(event.key)) { + if (event.key === 'Escape') { apiRef.current.hidePreferences(); } }, diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx index 26b3fc9e9622..5e185987fa16 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx +++ b/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)) { diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx index 879e6ed01221..2c00e4ba0b8b 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx +++ b/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)) { diff --git a/packages/x-data-grid/src/utils/keyboardUtils.ts b/packages/x-data-grid/src/utils/keyboardUtils.ts index 358005ebf306..c70617d75671 100644 --- a/packages/x-data-grid/src/utils/keyboardUtils.ts +++ b/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 => !!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.