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

package/modern/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/modern/utils/keyboardUtils.js

@@ -1,12 +1,12 @@
-export const isEscapeKey = key => key === 'Escape'; // TODO remove
-export const isEnterKey = key => key === 'Enter'; // TODO remove
-export const isTabKey = key => key === 'Tab'; // TODO remove
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+export const isEscapeKey = key => key === 'Escape';
 
-export const isSpaceKey = key => key === ' ';
-export const isArrowKeys = key => key.indexOf('Arrow') === 0;
-export const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
-export const isPageKeys = key => key.indexOf('Page') === 0;
-export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+export const isTabKey = key => key === 'Tab';
 
 // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
@@ -22,9 +22,18 @@ export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
 export const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
-export const isCellEnterEditModeKeys = event => isEnterKey(event.key) || isDeleteKeys(event.key) || isPrintableKey(event);
+export const isCellEnterEditModeKeys = event => isPrintableKey(event) || event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete';
 export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
-export const isNavigationKey = key => isHomeOrEndKeys(key) || isArrowKeys(key) || isPageKeys(key) || isSpaceKey(key);
+export const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 export const isKeyboardEvent = event => !!event.key;
-export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+
+// 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.
+export function isPasteShortcut(event) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && !event.shiftKey && !event.altKey) {
+    return true;
+  }
+  return false;
+}

package/node/colDef/gridActionsColDef.js

@@ -15,6 +15,7 @@ const GRID_ACTIONS_COL_DEF = exports.GRID_ACTIONS_COL_DEF = (0, _extends2.defaul
   // @ts-ignore
   aggregable: false,
   width: 100,
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   headerName: '',

package/node/colDef/gridBooleanColDef.js

@@ -32,6 +32,7 @@ const stringToBoolean = value => {
 };
 const GRID_BOOLEAN_COL_DEF = exports.GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'boolean',
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   renderCell: _GridBooleanCell.renderBooleanCell,

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -28,6 +28,7 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef);
     const rowId = apiRef.current.getRowId(row);

package/node/components/GridScrollbarFillerCell.js

@@ -7,37 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridScrollbarFillerCell = GridScrollbarFillerCell;
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const classes = {
-  root: (0, _constants.getDataGridUtilityClass)('scrollbarFiller'),
-  header: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--header'),
-  borderTop: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--borderTop'),
-  pinnedRight: (0, _constants.getDataGridUtilityClass)('scrollbarFiller--pinnedRight')
+  root: _constants.gridClasses.scrollbarFiller,
+  header: _constants.gridClasses['scrollbarFiller--header'],
+  borderTop: _constants.gridClasses['scrollbarFiller--borderTop'],
+  pinnedRight: _constants.gridClasses['scrollbarFiller--pinnedRight']
 };
-const Style = (0, _styles.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__*/(0, _jsxRuntime.jsx)(Style, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "presentation",
     className: (0, _clsx.default)(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
   });

package/node/components/cell/GridCell.js

@@ -67,8 +67,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${(0, _utils.unstable_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${(0, _utils.unstable_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 (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -148,6 +147,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.gridClasses['cell--flex']);
+  }
   if (getCellClassName) {
     classNames.push(getCellClassName(cellParamsWithAPI));
   }
@@ -256,12 +258,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.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
@@ -275,12 +276,8 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   if (children === undefined) {
     const valueString = valueToRender?.toString();
-    children = /*#__PURE__*/(0, _jsxRuntime.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, {
@@ -300,6 +297,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/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -10,7 +10,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -71,7 +70,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
     }
   }, [hasFocus]);
   const handleKeyDown = React.useCallback(event => {
-    if ((0, _keyboardUtils.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/node/components/containers/GridRootStyles.js

@@ -54,6 +54,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
   }, {
     [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
+  }, {
+    [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
   }, {
     [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
   }, {
@@ -62,12 +64,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
   }, {
     [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
-  },
-  // TODO v6: Remove
-  {
-    [`& .${_gridClasses.gridClasses['cell--withRenderer']}`]: styles['cell--withRenderer']
-  }, {
-    [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
   }, {
@@ -78,8 +74,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
   }, {
     [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
-  }, {
-    [`& .${_gridClasses.gridClasses.cellContent}`]: styles.cellContent
   }, {
     [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
   }, {
@@ -242,9 +236,21 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent} > *`]: {
         overflow: 'visible !important'
       },
-      [`& .${_gridClasses.gridClasses.cell} > *`]: {
+      '@media (hover: hover)': {
+        [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        },
+        [`& .${_gridClasses.gridClasses.menuIcon}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important'
+        }
+      },
+      [`& .${_gridClasses.gridClasses.cell}`]: {
         overflow: 'visible !important',
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        minWidth: 'max-content !important',
+        maxWidth: 'max-content !important'
       },
       [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
         width: 'unset'
@@ -436,15 +442,19 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.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
     },
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
@@ -453,9 +463,10 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
       userSelect: 'none'
     },
-    [`& .${_gridClasses.gridClasses.row}:not(.${_gridClasses.gridClasses['row--dynamicHeight']}) > .${_gridClasses.gridClasses.cell}`]: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap'
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {
+      overflow: 'initial',
+      whiteSpace: 'initial',
+      lineHeight: 'inherit'
     },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
       padding: 0
@@ -473,10 +484,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         outlineOffset: '-1px'
       }
     },
-    [`& .${_gridClasses.gridClasses.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     [`& .${_gridClasses.gridClasses['row--editing']}`]: {
       boxShadow: t.shadows[2]
     },
@@ -515,6 +522,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: {
       padding: 0,
+      display: 'flex',
       alignItems: 'stretch'
     },
     [`.${_gridClasses.gridClasses.withBorderColor}`]: {
@@ -534,13 +542,21 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 'inherit'
+    },
     [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: {
+      textAlign: 'left',
       justifyContent: 'flex-start'
     },
     [`& .${_gridClasses.gridClasses['cell--textRight']}`]: {
+      textAlign: 'right',
       justifyContent: 'flex-end'
     },
     [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: {
+      textAlign: 'center',
       justifyContent: 'center'
     },
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
@@ -611,6 +627,21 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       flex: '0 0 28px',
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
+    },
+    /* ScrollbarFiller styles */
+    [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
+      minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      alignSelf: 'stretch',
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: {
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      },
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)'
+      },
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}:not(.${_gridClasses.gridClasses['scrollbarFiller--header']})`]: {
+        position: 'sticky',
+        right: 0
+      }
     }
   });
   return gridStyle;

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

@@ -60,8 +60,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((0, _extends2.default)({}, item, {
       value: value.map(getOptionValue)

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/node/hooks/features/clipboard/useGridClipboard.js

@@ -61,7 +61,7 @@ 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/node/hooks/features/editing/useGridCellEditing.js

@@ -108,12 +108,11 @@ const useGridCellEditing = (apiRef, props) => {
       }
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if ((0, _keyboardUtils.isPasteShortcut)(event)) {
         reason = _gridEditCellParams.GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = _gridEditCellParams.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 = _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown;
       }
       if (reason) {

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

@@ -168,12 +168,11 @@ const useGridRowEditing = (apiRef, props) => {
       }
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if ((0, _keyboardUtils.isPasteShortcut)(event)) {
         reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = _gridRowParams.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 = _gridRowParams.GridRowEditStartReasons.deleteKeyDown;
       }
       if (reason) {

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

@@ -8,7 +8,6 @@ exports.useGridSorting = exports.sortingStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
-var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -218,7 +217,7 @@ const useGridSorting = (apiRef, props) => {
       return;
     }
     // Ctrl + Enter opens the column menu
-    if ((0, _keyboardUtils.isEnterKey)(event.key) && !event.ctrlKey && !event.metaKey) {
+    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn, props.disableColumnSorting]);

package/node/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/node/internals/index.js

@@ -85,6 +85,7 @@ var _exportNames = {
   getActiveElement: true,
   isEventTargetInPortal: true,
   isNavigationKey: true,
+  isPasteShortcut: true,
   buildWarning: true,
   exportAs: true,
   useGridPrivateApiContext: true,
@@ -330,6 +331,12 @@ Object.defineProperty(exports, "isNavigationKey", {
     return _keyboardUtils.isNavigationKey;
   }
 });
+Object.defineProperty(exports, "isPasteShortcut", {
+  enumerable: true,
+  get: function () {
+    return _keyboardUtils.isPasteShortcut;
+  }
+});
 Object.defineProperty(exports, "isSingleSelectColDef", {
   enumerable: true,
   get: function () {

package/node/utils/keyboardUtils.js

@@ -3,24 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPageKeys = exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHomeOrEndKeys = exports.isHideMenuKey = exports.isEscapeKey = exports.isEnterKey = exports.isDeleteKeys = exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.isArrowKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
+exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHideMenuKey = exports.isEscapeKey = exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
+exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
-exports.isTabKey = exports.isSpaceKey = void 0;
-const isEscapeKey = key => key === 'Escape'; // TODO remove
+exports.isTabKey = void 0;
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+const isEscapeKey = key => key === 'Escape';
+
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
 exports.isEscapeKey = isEscapeKey;
-const isEnterKey = key => key === 'Enter'; // TODO remove
-exports.isEnterKey = isEnterKey;
-const isTabKey = key => key === 'Tab'; // TODO remove
-exports.isTabKey = isTabKey;
-const isSpaceKey = key => key === ' ';
-exports.isSpaceKey = isSpaceKey;
-const isArrowKeys = key => key.indexOf('Arrow') === 0;
-exports.isArrowKeys = isArrowKeys;
-const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
-exports.isHomeOrEndKeys = isHomeOrEndKeys;
-const isPageKeys = key => key.indexOf('Page') === 0;
-exports.isPageKeys = isPageKeys;
-const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
+const isTabKey = key => key === 'Tab';
 
 // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
@@ -29,7 +25,7 @@ const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
 // However, we also need to ignore shortcuts, for example: select all:
 // - Windows: Ctrl+A, event.ctrlKey is true
 // - macOS: ⌘ Command+A, event.metaKey is true
-exports.isDeleteKeys = isDeleteKeys;
+exports.isTabKey = isTabKey;
 function isPrintableKey(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
@@ -38,15 +34,24 @@ const GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = ['
 const GRID_CELL_EDIT_COMMIT_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
 const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
 exports.isMultipleKey = isMultipleKey;
-const isCellEnterEditModeKeys = event => isEnterKey(event.key) || isDeleteKeys(event.key) || isPrintableKey(event);
+const isCellEnterEditModeKeys = event => isPrintableKey(event) || event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete';
 exports.isCellEnterEditModeKeys = isCellEnterEditModeKeys;
 const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
 exports.isCellExitEditModeKeys = isCellExitEditModeKeys;
 const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 exports.isCellEditCommitKeys = isCellEditCommitKeys;
-const isNavigationKey = key => isHomeOrEndKeys(key) || isArrowKeys(key) || isPageKeys(key) || isSpaceKey(key);
+const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 exports.isNavigationKey = isNavigationKey;
 const isKeyboardEvent = event => !!event.key;
 exports.isKeyboardEvent = isKeyboardEvent;
 const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
-exports.isHideMenuKey = isHideMenuKey;
+
+// 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.
+exports.isHideMenuKey = isHideMenuKey;
+function isPasteShortcut(event) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && !event.shiftKey && !event.altKey) {
+    return true;
+  }
+  return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-beta.3",
+  "version": "7.0.0-beta.4",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/utils/keyboardUtils.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
 export declare const isEscapeKey: (key: string) => boolean;
-export declare const isEnterKey: (key: string) => boolean;
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
 export declare const isTabKey: (key: string) => boolean;
-export declare const isSpaceKey: (key: string) => boolean;
-export declare const isArrowKeys: (key: string) => boolean;
-export declare const isHomeOrEndKeys: (key: string) => boolean;
-export declare const isPageKeys: (key: string) => boolean;
-export declare const isDeleteKeys: (key: string) => boolean;
 export declare function isPrintableKey(event: React.KeyboardEvent<HTMLElement>): boolean;
 export declare const GRID_MULTIPLE_SELECTION_KEYS: string[];
 export declare const GRID_CELL_EXIT_EDIT_MODE_KEYS: string[];
@@ -18,3 +18,4 @@ export declare const isCellEditCommitKeys: (key: string) => boolean;
 export declare const isNavigationKey: (key: string) => boolean;
 export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEvent<HTMLElement>;
 export declare const isHideMenuKey: (key: React.KeyboardEvent['key']) => boolean;
+export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;