@mui/x-data-grid 7.0.0-beta.3 → 7.0.0-beta.4

package/constants/gridClasses.d.ts

@@ -43,6 +43,10 @@ export interface GridClasses {
      * Styles applied to the cell element if the cell is in edit mode.
      */
     'cell--editing': string;
+    /**
+     * Styles applied to the cell element in flex display mode.
+     */
+    'cell--flex': string;
     /**
      * Styles applied to the cell element if `align="center"`.
      */
@@ -55,10 +59,6 @@ export interface GridClasses {
      * Styles applied to the cell element if `align="right"`.
      */
     'cell--textRight': string;
-    /**
-     * Styles applied to the cell element if the cell has a custom renderer.
-     */
-    'cell--withRenderer': string;
     /**
      * Styles applied to the cell element if it is at the top edge of a cell selection range.
      */
@@ -91,10 +91,6 @@ export interface GridClasses {
      * Styles applied to the cell element.
      */
     cell: string;
-    /**
-     * Styles applied to the element that wraps the cell content.
-     */
-    cellContent: string;
     /**
      * Styles applied to the cell checkbox element.
      */
@@ -529,6 +525,26 @@ export interface GridClasses {
      * Styles applied to the horizontal scrollbar.
      */
     'scrollbar--vertical': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell.
+     */
+    scrollbarFiller: string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell, in header position.
+     */
+    'scrollbarFiller--header': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell, with a border top.
+     */
+    'scrollbarFiller--borderTop': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell.
+     */
+    'scrollbarFiller--pinnedRight': string;
     /**
      * Styles applied to the footer selected row count element.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/features/clipboard/useGridClipboard.js

@@ -54,7 +54,7 @@ export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
-    if (!((event.ctrlKey || event.metaKey) && event.key === 'c')) {
+    if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
       return;
     }
 

package/hooks/features/editing/useGridCellEditing.js

@@ -9,7 +9,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
@@ -99,12 +99,11 @@ export const useGridCellEditing = (apiRef, props) => {
       }
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if (isPasteShortcut(event)) {
         reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Delete on Windows, Backspace on macOS
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridCellEditStartReasons.deleteKeyDown;
       }
       if (reason) {

package/hooks/features/editing/useGridRowEditing.js

@@ -9,7 +9,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -160,12 +160,11 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       if (isPrintableKey(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if (isPasteShortcut(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Delete on Windows, Backspace on macOS
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridRowEditStartReasons.deleteKeyDown;
       }
       if (reason) {

package/hooks/features/sorting/useGridSorting.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -214,7 +213,7 @@ export const useGridSorting = (apiRef, props) => {
       return;
     }
     // Ctrl + Enter opens the column menu
-    if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
+    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn, props.disableColumnSorting]);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.3
+ * @mui/x-data-grid v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -70,7 +70,7 @@ export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/ex
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
-export { isNavigationKey } from '../utils/keyboardUtils';
+export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';
 export * from '../utils/fastMemo';
 export { buildWarning } from '../utils/warning';

package/internals/index.js

@@ -56,7 +56,7 @@ export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/ex
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
-export { isNavigationKey } from '../utils/keyboardUtils';
+export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';
 export * from '../utils/fastMemo';
 export { buildWarning } from '../utils/warning';

package/models/colDef/gridColDef.d.ts

@@ -141,6 +141,12 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * Class name that will be added in cells for that column.
      */
     cellClassName?: GridCellClassNamePropType<R, V>;
+    /**
+     * Display mode for the cell:
+     *  - 'text': For text-based cells (default)
+     *  - 'flex': For cells with HTMLElement children
+     */
+    display?: 'text' | 'flex';
     /**
      * Allows to override the component rendered as cell for this column.
      * @template R, V, F

package/modern/colDef/gridActionsColDef.js

@@ -8,6 +8,7 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   // @ts-ignore
   aggregable: false,
   width: 100,
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   headerName: '',

package/modern/colDef/gridBooleanColDef.js

@@ -25,6 +25,7 @@ const stringToBoolean = value => {
 };
 export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   renderCell: renderBooleanCell,

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -19,6 +19,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
     const rowId = apiRef.current.getRowId(row);

package/modern/components/GridScrollbarFillerCell.js

@@ -1,34 +1,19 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass as getClassName } from '../constants';
+import { gridClasses } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
-  root: getClassName('scrollbarFiller'),
-  header: getClassName('scrollbarFiller--header'),
-  borderTop: getClassName('scrollbarFiller--borderTop'),
-  pinnedRight: getClassName('scrollbarFiller--pinnedRight')
+  root: gridClasses.scrollbarFiller,
+  header: gridClasses['scrollbarFiller--header'],
+  borderTop: gridClasses['scrollbarFiller--borderTop'],
+  pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
 };
-const Style = styled('div')({
-  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  alignSelf: 'stretch',
-  [`&.${classes.borderTop}`]: {
-    borderTop: '1px solid var(--DataGrid-rowBorderColor)'
-  },
-  [`&.${classes.pinnedRight}`]: {
-    backgroundColor: 'var(--DataGrid-pinnedBackground)'
-  },
-  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
-    position: 'sticky',
-    right: 0
-  }
-});
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
   pinnedRight
 }) {
-  return /*#__PURE__*/_jsx(Style, {
+  return /*#__PURE__*/_jsx("div", {
     role: "presentation",
     className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
   });

package/modern/components/cell/GridCell.js

@@ -58,8 +58,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode'],
-    content: ['cellContent']
+    root: ['cell', `cell--text${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -139,6 +138,9 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
+  if (column.display === 'flex') {
+    classNames.push(gridClasses['cell--flex']);
+  }
   if (getCellClassName) {
     classNames.push(getCellClassName(cellParamsWithAPI));
   }
@@ -247,12 +249,11 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }
   let children;
-  if (editCellState == null && column.renderCell) {
+  let title;
+  if (editCellState === null && column.renderCell) {
     children = column.renderCell(cellParamsWithAPI);
-    classNames.push(gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses?.['cell--withRenderer']);
   }
-  if (editCellState != null && column.renderEditCell) {
+  if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -266,12 +267,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   if (children === undefined) {
     const valueString = valueToRender?.toString();
-    children = /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      title: valueString,
-      role: "presentation",
-      children: valueString
-    });
+    children = valueString;
+    title = valueString;
   }
   if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
     children = /*#__PURE__*/React.cloneElement(children, {
@@ -291,6 +288,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
     style: style,
+    title: title,
     tabIndex: tabIndex,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -4,7 +4,6 @@ const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
-import { isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -62,7 +61,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
   }, [hasFocus]);
   const handleKeyDown = React.useCallback(event => {
-    if (isSpaceKey(event.key)) {
+    if (event.key === ' ') {
       // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
       // TODO: Remove and add a check inside useGridKeyboardNavigation
       event.stopPropagation();

package/modern/components/containers/GridRootStyles.js

@@ -47,6 +47,8 @@ export const GridRootStyles = styled('div', {
     [`&.${c.autosizing}`]: styles.autosizing
   }, {
     [`& .${c.editBooleanCell}`]: styles.editBooleanCell
+  }, {
+    [`& .${c.cell}`]: styles.cell
   }, {
     [`& .${c['cell--editing']}`]: styles['cell--editing']
   }, {
@@ -55,12 +57,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
   }, {
     [`& .${c['cell--textRight']}`]: styles['cell--textRight']
-  },
-  // TODO v6: Remove
-  {
-    [`& .${c['cell--withRenderer']}`]: styles['cell--withRenderer']
-  }, {
-    [`& .${c.cell}`]: styles.cell
   }, {
     [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
   }, {
@@ -71,8 +67,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight']
   }, {
     [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder']
-  }, {
-    [`& .${c.cellContent}`]: styles.cellContent
   }, {
     [`& .${c.cellCheckbox}`]: styles.cellCheckbox
   }, {
@@ -235,9 +229,21 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeaderTitleContainerContent} > *`]: {
         overflow: 'visible !important'
       },
-      [`& .${c.cell} > *`]: {
+      '@media (hover: hover)': {
+        [`& .${c.iconButtonContainer}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        },
+        [`& .${c.menuIcon}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        }
+      },
+      [`& .${c.cell}`]: {
         overflow: 'visible !important',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        minWidth: 'max-content !important',
+        maxWidth: 'max-content !important'
       },
       [`& .${c.groupingCriteriaCell}`]: {
         width: 'unset'
@@ -429,15 +435,19 @@ export const GridRootStyles = styled('div', {
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
-      display: 'flex',
-      alignItems: 'center',
       height: 'var(--height)',
       minWidth: 'var(--width)',
       maxWidth: 'var(--width)',
+      lineHeight: 'calc(var(--height) - 1px)',
+      // -1px for the border
+
       '--width': '0px',
       '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
@@ -446,9 +456,10 @@ export const GridRootStyles = styled('div', {
     [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
       userSelect: 'none'
     },
-    [`& .${c.row}:not(.${c['row--dynamicHeight']}) > .${c.cell}`]: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap'
+    [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
+      overflow: 'initial',
+      whiteSpace: 'initial',
+      lineHeight: 'inherit'
     },
     [`& .${c.cellEmpty}`]: {
       padding: 0
@@ -466,10 +477,6 @@ export const GridRootStyles = styled('div', {
         outlineOffset: '-1px'
       }
     },
-    [`& .${c.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     [`& .${c['row--editing']}`]: {
       boxShadow: t.shadows[2]
     },
@@ -508,6 +515,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.rowReorderCellContainer}`]: {
       padding: 0,
+      display: 'flex',
       alignItems: 'stretch'
     },
     [`.${c.withBorderColor}`]: {
@@ -527,13 +535,21 @@ export const GridRootStyles = styled('div', {
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
+    [`& .${c['cell--flex']}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 'inherit'
+    },
     [`& .${c['cell--textLeft']}`]: {
+      textAlign: 'left',
       justifyContent: 'flex-start'
     },
     [`& .${c['cell--textRight']}`]: {
+      textAlign: 'right',
       justifyContent: 'flex-end'
     },
     [`& .${c['cell--textCenter']}`]: {
+      textAlign: 'center',
       justifyContent: 'center'
     },
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
@@ -604,6 +620,21 @@ export const GridRootStyles = styled('div', {
       flex: '0 0 28px',
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
+    },
+    /* ScrollbarFiller styles */
+    [`.${c.scrollbarFiller}`]: {
+      minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      alignSelf: 'stretch',
+      [`&.${c['scrollbarFiller--borderTop']}`]: {
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      },
+      [`&.${c['scrollbarFiller--pinnedRight']}`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)'
+      },
+      [`&.${c['scrollbarFiller--pinnedRight']}:not(.${c['scrollbarFiller--header']})`]: {
+        position: 'sticky',
+        right: 0
+      }
     }
   });
   return gridStyle;

package/modern/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -51,8 +51,14 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value)) {
       return [];
     }
-    return item.value;
-  }, [item.value]);
+    return item.value.reduce((acc, value) => {
+      const resolvedValue = resolvedValueOptions.find(v => getOptionValue(v) === value);
+      if (resolvedValue != null) {
+        acc.push(resolvedValue);
+      }
+      return acc;
+    }, []);
+  }, [getOptionValue, item.value, resolvedValueOptions]);
   const handleChange = React.useCallback((event, value) => {
     applyValue(_extends({}, item, {
       value: value.map(getOptionValue)

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -53,7 +53,7 @@ export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
-    if (!((event.ctrlKey || event.metaKey) && event.key === 'c')) {
+    if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
       return;
     }
 

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -9,7 +9,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
@@ -99,12 +99,11 @@ export const useGridCellEditing = (apiRef, props) => {
       }
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if (isPasteShortcut(event)) {
         reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Delete on Windows, Backspace on macOS
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridCellEditStartReasons.deleteKeyDown;
       }
       if (reason) {

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -9,7 +9,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -159,12 +159,11 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       if (isPrintableKey(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if (isPasteShortcut(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Delete on Windows, Backspace on macOS
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridRowEditStartReasons.deleteKeyDown;
       }
       if (reason) {

package/modern/hooks/features/sorting/useGridSorting.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -208,7 +207,7 @@ export const useGridSorting = (apiRef, props) => {
       return;
     }
     // Ctrl + Enter opens the column menu
-    if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
+    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn, props.disableColumnSorting]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.3
+ * @mui/x-data-grid v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the