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

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

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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 renderSingleSelectOptions = ({
@@ -58,6 +58,7 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
+      variant = 'standard',
       clearButton
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -98,7 +99,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         id: id,
@@ -106,14 +107,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/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -13,7 +13,7 @@ var _utils = require("@mui/utils");
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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; }
 function GridFilterInputValue(props) {
@@ -26,7 +26,8 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
-      InputProps
+      InputProps,
+      variant = 'standard'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = (0, _useTimeout.useTimeout)();
@@ -61,7 +62,7 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
+    variant: variant,
     type: type || 'text',
     InputProps: (0, _extends2.default)({}, applying || clearButton ? {
       endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -11,6 +11,9 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _virtualization = require("../../hooks/features/virtualization");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,19 +37,23 @@ const VirtualScrollerRenderZoneRoot = (0, _system.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 = exports.GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
+  const offsets = (0, _useGridSelector.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: rootProps
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsets.top}px, 0)`
+    }
   }, other));
 });

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

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _utils2 = require("../../utils");
+var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
@@ -32,19 +33,11 @@ const SpaceFiller = (0, _styles.styled)('div')({
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.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)'
+});
 const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -64,10 +57,12 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
   const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const offsets = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
   const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const visiblePinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
@@ -98,11 +93,18 @@ const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFiller = (params, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === _columns.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [params?.position === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
+      children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
         className: _gridClasses.gridClasses.columnHeader
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         header: true,
@@ -136,13 +138,11 @@ const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: {
-        params
-      },
-      children: [columns, getFiller(params)]
+      ownerState: rootProps,
+      children: getFillers(params, columns, 0)
     });
   };
   const getColumnGroupHeaders = params => {
@@ -208,41 +208,39 @@ const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
+      const children = depthInfo.elements.map(({
+        groupId,
+        width,
+        fields,
+        colIndex,
+        hasFocus,
+        tabIndex
+      }, groupIndex) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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/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/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = void 0;
+exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = exports.gridOffsetsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 /**
  * Get the columns state
@@ -31,6 +31,13 @@ const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumn
  */
 const gridRenderContextSelector = exports.gridRenderContextSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.renderContext);
 
+/**
+ * Get the offsets
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+const gridOffsetsSelector = exports.gridOffsetsSelector = (0, _createSelector.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.

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -48,7 +48,6 @@ const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const theme = (0, _styles.useTheme)();
-  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
   const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
   const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
@@ -64,6 +63,7 @@ const useGridVirtualScroller = () => {
   (0, _useResizeObserver.useResizeObserver)(mainRef, () => apiRef.current.resize());
   const previousContext = React.useRef(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
   const previousRowContext = React.useRef(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
+  const offsets = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridOffsetsSelector);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const scrollPosition = React.useRef({
     top: 0,
@@ -83,22 +83,17 @@ const useGridVirtualScroller = () => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(() => {
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const top = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state).positions[renderContext.firstRowIndex];
-    const left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
-    gridRootRef.current?.style.setProperty('--DataGrid-offsetTop', `${top}px`);
-    gridRootRef.current?.style.setProperty('--DataGrid-offsetLeft', `${left}px`);
-  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
   const updateRenderContext = React.useCallback((nextRenderContext, rawRenderContext) => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
     }
     const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
+    const nextOffsets = computeOffsets(apiRef, nextRenderContext, theme.direction, pinnedColumns.left.length);
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
         virtualization: (0, _extends2.default)({}, state.virtualization, {
-          renderContext: nextRenderContext
+          renderContext: nextRenderContext,
+          offsets: nextOffsets
         })
       });
     });
@@ -112,7 +107,7 @@ const useGridVirtualScroller = () => {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
   const triggerUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
@@ -308,6 +303,7 @@ const useGridVirtualScroller = () => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -355,9 +351,6 @@ const useGridVirtualScroller = () => {
       // TODO a scroll reset should not be necessary
       scrollerRef.current.scrollLeft = 0;
       scrollerRef.current.scrollTop = 0;
-    } else {
-      gridRootRef.current?.style.setProperty('--DataGrid-offsetTop', '0px');
-      gridRootRef.current?.style.setProperty('--DataGrid-offsetLeft', '0px');
     }
   }, [enabled, gridRootRef, scrollerRef]);
   (0, _useRunOnce.useRunOnce)(outerSize.width !== 0, () => {
@@ -606,4 +599,15 @@ function areRenderContextsEqual(context1, context2) {
     return true;
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+}
+function computeOffsets(apiRef, renderContext, direction, pinnedLeftLength) {
+  const factor = direction === 'ltr' ? 1 : -1;
+  const rowPositions = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state).positions;
+  const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
+  const top = rowPositions[renderContext.firstRowIndex] ?? 0;
+  const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
+  return {
+    top,
+    left
+  };
 }

package/node/hooks/features/virtualization/useGridVirtualization.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EMPTY_RENDER_CONTEXT = void 0;
+exports.EMPTY_RENDER_CONTEXT = exports.EMPTY_OFFSETS = void 0;
 exports.useGridVirtualization = useGridVirtualization;
 exports.virtualizationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -12,6 +12,10 @@ var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 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 EMPTY_OFFSETS = exports.EMPTY_OFFSETS = {
+  top: 0,
+  left: 0
+};
 const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -22,7 +26,8 @@ const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT
+    renderContext: EMPTY_RENDER_CONTEXT,
+    offsets: EMPTY_OFFSETS
   };
   return (0, _extends2.default)({}, state, {
     virtualization

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.2
+ * @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.2",
+  "version": "7.0.0-beta.4",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@mui/system": "^5.15.7",
-    "@mui/utils": "^5.15.7",
+    "@mui/system": "^5.15.9",
+    "@mui/utils": "^5.15.9",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"

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;