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

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
   }, {
@@ -192,8 +186,6 @@ export const GridRootStyles = styled('div', {
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
     '--DataGrid-hasScrollY': '0',
-    '--DataGrid-offsetTop': '0px',
-    '--DataGrid-offsetLeft': '0px',
     '--DataGrid-scrollbarSize': '10px',
     '--DataGrid-rowWidth': '0px',
     '--DataGrid-columnsTotalWidth': '0px',
@@ -237,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'
@@ -431,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}`]: {
@@ -448,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
@@ -468,10 +477,6 @@ export const GridRootStyles = styled('div', {
         outlineOffset: '-1px'
       }
     },
-    [`& .${c.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     [`& .${c['row--editing']}`]: {
       boxShadow: t.shadows[2]
     },
@@ -510,6 +515,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.rowReorderCellContainer}`]: {
       padding: 0,
+      display: 'flex',
       alignItems: 'stretch'
     },
     [`.${c.withBorderColor}`]: {
@@ -529,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']}`]: {
@@ -562,8 +576,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.cellOffsetLeft}`]: {
       flex: '0 0 auto',
-      display: 'inline-block',
-      width: 'var(--DataGrid-offsetLeft)'
+      display: 'inline-block'
     },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',
@@ -607,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/GridFilterInputBoolean.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
@@ -24,7 +24,8 @@ function GridFilterInputBoolean(props) {
       focusElementRef,
       clearButton,
       tabIndex,
-      label: labelProp
+      label: labelProp,
+      variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -51,7 +52,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: labelId,
@@ -59,7 +60,8 @@ function GridFilterInputBoolean(props) {
         label: label,
         value: filterValueState,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
+        notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
         inputProps: {

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/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -50,6 +50,7 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
+      variant = 'standard',
       clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
@@ -90,7 +91,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -98,14 +99,15 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
         type: type || 'text',
         inputProps: {
           tabIndex,
           ref: focusElementRef,
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
-        native: isSelectNative
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
       }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -17,7 +17,8 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
-      InputProps
+      InputProps,
+      variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
@@ -52,7 +53,7 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
+    variant: variant,
     type: type || 'text',
     InputProps: _extends({}, applying || clearButton ? {
       endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,6 +5,9 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridOffsetsSelector } from '../../hooks/features/virtualization';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,20 +28,24 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column',
-  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
+  flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: rootProps
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsets.top}px, 0)`
+    }
   }, other));
 });
 export { GridVirtualScrollerRenderZone };

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/columnHeaders/useGridColumnHeaders.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
+import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { gridDimensionsSelector } from '../dimensions';
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridOffsetsSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
@@ -24,19 +25,11 @@ const SpaceFiller = styled('div')({
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
-  overridesResolver: (props, styles) => styles.columnHeaderRow
-})(({
-  ownerState: {
-    params: {
-      position
-    } = {},
-    leftOverflow = 0
-  }
-}) => ({
+  overridesResolver: (_, styles) => styles.columnHeaderRow
+})({
   display: 'flex',
-  height: 'var(--DataGrid-headerHeight)',
-  transform: position === undefined ? `translate3d(${leftOverflow !== 0 ? `calc(var(--DataGrid-offsetLeft) - ${leftOverflow}px)` : 'var(--DataGrid-offsetLeft)'}, 0, 0)` : undefined
-}));
+  height: 'var(--DataGrid-headerHeight)'
+});
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -56,10 +49,12 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
@@ -90,11 +85,18 @@ export const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFiller = (params, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && params?.position === undefined;
+    const isNotPinned = params?.position === undefined;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsets.left - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [params?.position === undefined && /*#__PURE__*/_jsx(SpaceFiller, {
+      children: [isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/_jsx(SpaceFiller, {
         className: gridClasses.columnHeader
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
@@ -128,13 +130,11 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: {
-        params
-      },
-      children: [columns, getFiller(params)]
+      ownerState: rootProps,
+      children: getFillers(params, columns, 0)
     });
   };
   const getColumnGroupHeaders = params => {
@@ -200,41 +200,39 @@ export const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      const children = depthInfo.elements.map(({
+        groupId,
+        width,
+        fields,
+        colIndex,
+        hasFocus,
+        tabIndex
+      }, groupIndex) => {
+        return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+          groupId: groupId,
+          width: width,
+          fields: fields,
+          colIndex: colIndex,
+          depth: depthIndex,
+          isLastColumn: colIndex === visibleColumns.length - fields.length,
+          maxDepth: headerToRender.length,
+          height: dimensions.headerHeight,
+          hasFocus: hasFocus,
+          tabIndex: tabIndex
+        }, groupIndex);
+      });
+      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: {
-          params,
-          leftOverflow: depthInfo.leftOverflow
-        },
-        children: [depthInfo.elements.map(({
-          groupId,
-          width,
-          fields,
-          colIndex,
-          hasFocus,
-          tabIndex
-        }, groupIndex) => {
-          return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
-            groupId: groupId,
-            width: width,
-            fields: fields,
-            colIndex: colIndex,
-            depth: depthIndex,
-            isLastColumn: colIndex === visibleColumns.length - fields.length,
-            maxDepth: headerToRender.length,
-            height: dimensions.headerHeight,
-            hasFocus: hasFocus,
-            tabIndex: tabIndex
-          }, groupIndex);
-        }), getFiller(params)]
+        ownerState: rootProps,
+        children: getFillers(params, children, depthInfo.leftOverflow)
       }, depthIndex));
     });
     return columns;
   };
   return {
     renderContext,
-    getFiller,
+    getFillers,
     getColumnHeaders,
     getColumnsToRender,
     getColumnGroupHeaders,

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/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -24,6 +24,13 @@ export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtua
  */
 export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
 
+/**
+ * Get the offsets
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridOffsetsSelector = createSelector(gridVirtualizationSelector, state => state.offsets);
+
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.