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

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

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EMPTY_DETAIL_PANELS = void 0;
 exports.areRenderContextsEqual = areRenderContextsEqual;
+exports.computeOffsetLeft = computeOffsetLeft;
 exports.useGridVirtualScroller = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _reselect = require("reselect");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridSelector = require("../../utils/useGridSelector");
-var _useLazyRef = require("../../utils/useLazyRef");
 var _useResizeObserver = require("../../utils/useResizeObserver");
 var _useRunOnce = require("../../utils/useRunOnce");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
@@ -24,7 +23,8 @@ var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _utils2 = require("../../../utils/utils");
+var _utils2 = require("../../utils");
+var _utils3 = require("../../../utils/utils");
 var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
@@ -60,40 +60,29 @@ const useGridVirtualScroller = () => {
   const scrollbarHorizontalRef = React.useRef(null);
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
+  const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
   (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,
     left: 0
   }).current;
   const prevTotalWidth = React.useRef(columnsTotalWidth);
-  const getRenderedColumns = (0, _useLazyRef.useLazyRef)(createGetRenderedColumns).current;
-  const indexOfRowWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return currentPage.rows.findIndex(row => row.id === cellFocus.id);
-    }
-    return -1;
-  }, [cellFocus, currentPage.rows]);
-  const indexOfColumnWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return visibleColumns.findIndex(column => column.field === cellFocus.field);
-    }
-    return -1;
-  }, [cellFocus, visibleColumns]);
+  const focusedCell = {
+    rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
+    columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
+  };
   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,
-          offsets: nextOffsets
+          renderContext: nextRenderContext
         })
       });
     });
@@ -107,7 +96,7 @@ const useGridVirtualScroller = () => {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
   const triggerUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
@@ -168,9 +157,12 @@ const useGridVirtualScroller = () => {
   const handleTouchMove = (0, _utils.unstable_useEventCallback)(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
-  const minFirstColumn = pinnedColumns.left.length;
-  const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
   const getRows = (params = {}) => {
+    if (!params.rows && !currentPage.range) {
+      return [];
+    }
+    const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
+    const currentRenderContext = params.renderContext ?? renderContext;
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -187,77 +179,57 @@ const useGridVirtualScroller = () => {
         rowIndexOffset = pinnedRows.top.length;
         break;
     }
-    const firstRowToRender = renderContext.firstRowIndex;
-    const lastRowToRender = renderContext.lastRowIndex;
-    const firstColumnToRender = renderContext.firstColumnIndex;
-    const lastColumnToRender = renderContext.lastColumnIndex;
-    if (!params.rows && !currentPage.range) {
-      return [];
-    }
-    const renderedRows = params.rows ?? currentPage.rows.slice(firstRowToRender, lastRowToRender);
-
-    // If the selected row is not within the current range of rows being displayed,
-    // we need to render it at either the top or bottom of the rows,
-    // depending on whether it is above or below the range.
-    let isRowWithFocusedCellNotInRange = false;
-    if (!isPinnedSection && indexOfRowWithFocusedCell > -1 && (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell)) {
-      isRowWithFocusedCellNotInRange = true;
-      const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-      if (indexOfRowWithFocusedCell > firstRowToRender) {
-        renderedRows.push(rowWithFocusedCell);
-      } else {
-        renderedRows.unshift(rowWithFocusedCell);
-      }
-    }
-    let isColumnWihFocusedCellNotInRange = false;
-    if (!isPinnedSection && (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell)) {
-      isColumnWihFocusedCellNotInRange = true;
-    }
-    const {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    } = getRenderedColumns(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1);
-    renderedRows.forEach(row => {
-      apiRef.current.calculateColSpan({
-        rowId: row.id,
-        minFirstColumn,
-        maxLastColumn,
-        columns: visibleColumns
-      });
-      if (pinnedColumns.left.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: 0,
-          maxLastColumn: pinnedColumns.left.length,
-          columns: visibleColumns
-        });
+    const rowModels = params.rows ?? currentPage.rows;
+    const firstRowToRender = currentRenderContext.firstRowIndex;
+    const lastRowToRender = Math.min(currentRenderContext.lastRowIndex, rowModels.length);
+    const rowIndexes = params.rows ? (0, _utils3.range)(0, params.rows.length) : (0, _utils3.range)(firstRowToRender, lastRowToRender);
+    let virtualRowIndex = -1;
+    if (!isPinnedSection && focusedCell.rowIndex !== -1) {
+      if (focusedCell.rowIndex < firstRowToRender) {
+        virtualRowIndex = focusedCell.rowIndex;
+        rowIndexes.unshift(virtualRowIndex);
       }
-      if (pinnedColumns.right.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
-          maxLastColumn: visibleColumns.length,
-          columns: visibleColumns
-        });
+      if (focusedCell.rowIndex >= lastRowToRender) {
+        virtualRowIndex = focusedCell.rowIndex;
+        rowIndexes.push(virtualRowIndex);
       }
-    });
+    }
     const rows = [];
     const rowProps = rootProps.slotProps?.row;
-    let isRowWithFocusedCellRendered = false;
-    for (let i = 0; i < renderedRows.length; i += 1) {
+    rowIndexes.forEach(rowIndexInPage => {
       const {
         id,
         model
-      } = renderedRows[i];
-      const rowIndexInPage = (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i;
-      let index = rowIndexOffset + rowIndexInPage;
-      if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
+      } = rowModels[rowIndexInPage];
+
+      // NOTE: This is an expensive feature, the colSpan code could be optimized.
+      if (hasColSpan) {
+        const minFirstColumn = pinnedColumns.left.length;
+        const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
+        apiRef.current.calculateColSpan({
+          rowId: id,
+          minFirstColumn,
+          maxLastColumn,
+          columns: visibleColumns
+        });
+        if (pinnedColumns.left.length > 0) {
+          apiRef.current.calculateColSpan({
+            rowId: id,
+            minFirstColumn: 0,
+            maxLastColumn: pinnedColumns.left.length,
+            columns: visibleColumns
+          });
+        }
+        if (pinnedColumns.right.length > 0) {
+          apiRef.current.calculateColSpan({
+            rowId: id,
+            minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
+            maxLastColumn: visibleColumns.length,
+            columns: visibleColumns
+          });
+        }
       }
-      const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
+      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -273,47 +245,46 @@ const useGridVirtualScroller = () => {
       if (isLastSection) {
         if (!isPinnedSection) {
           const lastIndex = currentPage.rows.length - 1;
-          const isLastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === lastIndex + 1 : firstRowToRender + i === lastIndex;
+          const isLastVisibleRowIndex = rowIndexInPage === lastIndex;
           if (isLastVisibleRowIndex) {
             isLastVisible = true;
           }
         } else {
-          isLastVisible = i === renderedRows.length - 1;
+          isLastVisible = rowIndexInPage === rowModels.length - 1;
         }
       }
-      const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
-      const columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
-      const renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange, ...renderedColumns] : renderedColumns;
+      const isVirtualRow = rowIndexInPage === virtualRowIndex;
+      const isNotVisible = isVirtualRow;
       let tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === id) {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
+      const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
       rows.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
         rowId: id,
-        index: index,
+        index: rowIndex,
+        selected: isSelected,
+        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
+        offsetLeft: offsetLeft,
+        dimensions: dimensions,
         rowHeight: baseRowHeight,
-        focusedCell: focusedCell,
         tabbableCell: tabbableCell,
-        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-        renderedColumns: renderedColumnsWithFocusedCell,
-        visibleColumns: visibleColumns,
         pinnedColumns: pinnedColumns,
-        firstColumnToRender: firstColumnToRender,
-        lastColumnToRender: lastColumnToRender,
-        selected: isSelected,
-        offsets: offsets,
-        dimensions: dimensions,
+        visibleColumns: visibleColumns,
+        renderContext: currentRenderContext,
+        focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isRowNotVisible
+        isNotVisible: isNotVisible
       }, rowProps), id));
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);
       }
-    }
+    });
     return rows;
   };
   const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
@@ -366,6 +337,9 @@ const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
+  (0, _utils2.useGridApiEventHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
+  (0, _utils2.useGridApiEventHandler)(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
+  (0, _utils2.useGridApiEventHandler)(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -400,29 +374,6 @@ const useGridVirtualScroller = () => {
   };
 };
 exports.useGridVirtualScroller = useGridVirtualScroller;
-function createGetRenderedColumns() {
-  return (0, _reselect.defaultMemoize)((columns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, indexOfColumnWithFocusedCell) => {
-    // If the selected column is not within the current range of columns being displayed,
-    // we need to render it at either the left or right of the columns,
-    // depending on whether it is above or below the range.
-    let focusedCellColumnIndexNotInRange;
-    const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender);
-    if (indexOfColumnWithFocusedCell > -1) {
-      // check if it is not on the left pinned column.
-      if (firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-      // check if it is not on the right pinned column.
-      else if (lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-    }
-    return {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    };
-  });
-}
 function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
@@ -505,7 +456,7 @@ function getNearestIndexToRender(inputs, offset) {
     // Check if all rows in this page are already measured
     allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= inputs.range.lastRowIndex;
   }
-  const lastMeasuredIndexRelativeToCurrentPage = (0, _utils2.clamp)(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
+  const lastMeasuredIndexRelativeToCurrentPage = (0, _utils3.clamp)(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
   if (allRowsMeasured || inputs.rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
     // If all rows were measured (when no row has "auto" as height) or all rows before the offset
     // were measured, then use a binary search because it's faster.
@@ -592,7 +543,7 @@ function getIndexesToRender({
   minFirstIndex,
   maxLastIndex
 }) {
-  return [(0, _utils2.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+  return [(0, _utils3.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils3.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 }
 function areRenderContextsEqual(context1, context2) {
   if (context1 === context2) {
@@ -600,14 +551,8 @@ function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-function computeOffsets(apiRef, renderContext, direction, pinnedLeftLength) {
+function computeOffsetLeft(columnPositions, 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
-  };
+  return 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 = exports.EMPTY_OFFSETS = void 0;
+exports.EMPTY_RENDER_CONTEXT = void 0;
 exports.useGridVirtualization = useGridVirtualization;
 exports.virtualizationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -12,10 +12,6 @@ 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,
@@ -26,8 +22,7 @@ const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT,
-    offsets: EMPTY_OFFSETS
+    renderContext: EMPTY_RENDER_CONTEXT
   };
   return (0, _extends2.default)({}, state, {
     virtualization

package/node/hooks/utils/useTimeout.js

@@ -1,18 +1,20 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Timeout = void 0;
 exports.useTimeout = useTimeout;
 var _useLazyRef = require("./useLazyRef");
 var _useOnMount = require("./useOnMount");
 class Timeout {
   constructor() {
-    this.currentId = 0;
+    this.currentId = null;
     this.clear = () => {
-      if (this.currentId !== 0) {
+      if (this.currentId !== null) {
         clearTimeout(this.currentId);
-        this.currentId = 0;
+        this.currentId = null;
       }
     };
     this.disposeEffect = () => {
@@ -22,11 +24,18 @@ class Timeout {
   static create() {
     return new Timeout();
   }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
   start(delay, fn) {
     this.clear();
-    this.currentId = setTimeout(fn, delay);
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
   }
 }
+exports.Timeout = Timeout;
 function useTimeout() {
   const timeout = (0, _useLazyRef.useLazyRef)(Timeout.create).current;
   (0, _useOnMount.useOnMount)(timeout.disposeEffect);

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.5
  *
  * @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/node/utils/utils.js

@@ -13,6 +13,7 @@ exports.isNumber = isNumber;
 exports.isObject = isObject;
 exports.localStorageAvailable = localStorageAvailable;
 exports.randomNumberBetween = randomNumberBetween;
+exports.range = range;
 function isNumber(value) {
   return typeof value === 'number' && !Number.isNaN(value);
 }
@@ -45,6 +46,16 @@ function escapeRegExp(value) {
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
+/**
+ * Create an array containing the range [from, to[
+ */
+exports.clamp = clamp;
+function range(from, to) {
+  return Array.from({
+    length: to - from
+  }).map((_, i) => from + i);
+}
+
 /**
  * Based on `fast-deep-equal`
  *
@@ -71,7 +82,7 @@ const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
  * SOFTWARE.
  * We only type the public interface to avoid dozens of `as` in the function.
  */
-exports.clamp = clamp;
+
 function isDeepEqual(a, b) {
   if (a === b) {
     return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-beta.3",
+  "version": "7.0.0-beta.5",
   "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;

package/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;
+}