@mui/x-data-grid 6.0.0-alpha.0 → 6.0.0-alpha.2

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

@@ -8,7 +8,6 @@ import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
-import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
@@ -16,7 +15,8 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
+import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
+import { getMinimalContentHeight } from '../rows/gridRowsUtils'; // Uses binary search to avoid looping through all possible positions
 
 import { jsx as _jsx } from "react/jsx-runtime";
 export function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
@@ -67,7 +67,6 @@ export const useGridVirtualScroller = props => {
   } = props;
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -87,16 +86,16 @@ export const useGridVirtualScroller = props => {
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
-    const lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0);
-    const lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
-    let allRowsMeasured = lastMeasuredIndex === Infinity;
+    let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
 
     if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
       // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
     }
 
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+    const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
+
+    if (allRowsMeasured || 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.
       return binarySearch(offset, rowsMeta.positions);
@@ -106,7 +105,7 @@ export const useGridVirtualScroller = props => {
     // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
 
 
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
@@ -414,19 +413,14 @@ export const useGridVirtualScroller = props => {
       height,
       minHeight: shouldExtendContent ? '100%' : 'auto'
     };
-
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = 2 * rowHeight; // Give room to show the overlay when there's no row.
-    }
-
     return size;
-  }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
+  }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {
-    contentSize.height = 2 * rowHeight; // Give room to show the overlay when there no rows.
+    contentSize.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
   }
 
   const rootStyle = {};

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/internals/index.js

@@ -26,6 +26,7 @@ export { useGridEditing as useGridEditing_new, editingStateInitializer as editin
 export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
+export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';

package/modern/models/gridFeatureMode.js

@@ -1,4 +1 @@
-export const GridFeatureModeConstant = {
-  client: 'client',
-  server: 'server'
-};
+export {};

package/node/DataGrid/useDataGridProps.js

@@ -62,7 +62,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableVirtualization: false,
   disableIgnoreModificationsIfProcessingProps: false,
   editMode: _models.GridEditModes.Cell,
-  filterMode: _models.GridFeatureModeConstant.client,
+  filterMode: 'client',
   headerHeight: 56,
   hideFooter: false,
   hideFooterPagination: false,
@@ -71,14 +71,14 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
   pagination: false,
-  paginationMode: _models.GridFeatureModeConstant.client,
+  paginationMode: 'client',
   rowHeight: 52,
   rowsPerPageOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellRightBorder: false,
   showColumnRightBorder: false,
   sortingOrder: ['asc', 'desc', null],
-  sortingMode: _models.GridFeatureModeConstant.client,
+  sortingMode: 'client',
   throttleRowsMs: 0,
   disableColumnReorder: false,
   disableColumnResize: false,

package/node/components/DataGridVirtualScroller.js

@@ -21,6 +21,8 @@ var _GridVirtualScrollerRenderZone = require("./virtualization/GridVirtualScroll
 
 var _useGridVirtualScroller = require("../hooks/features/virtualization/useGridVirtualScroller");
 
+var _GridOverlays = require("./base/GridOverlays");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "disableVirtualization"];
@@ -44,14 +46,14 @@ const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridV
     ref,
     disableVirtualization
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScroller.GridVirtualScroller, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScroller.GridVirtualScroller, (0, _extends2.default)({
     className: className
   }, getRootProps(other), {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
         children: getRows()
       }))
-    }))
+    }))]
   }));
 });
 exports.DataGridVirtualScroller = DataGridVirtualScroller;

package/node/components/GridPagination.js

@@ -75,8 +75,7 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
-    ref: ref // @ts-ignore
-    ,
+    ref: ref,
     component: "div",
     count: paginationState.rowCount,
     page: paginationState.page <= lastPage ? paginationState.page : lastPage,

package/node/components/GridRow.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridRow = GridRow;
+exports.GridRow = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -89,7 +89,7 @@ const EmptyCell = ({
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var _apiRef$current$getRo;
 
   const {
@@ -121,8 +121,9 @@ function GridRow(props) {
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
-  const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeDepthSelector);
+  const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderGroupingMaxDepthSelector);
+  const handleRef = (0, _material.useForkRef)(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const {
@@ -361,6 +362,7 @@ function GridRow(props) {
   }
 
   const randomNumber = (0, _utils.randomNumberBetween)(10000, 20, 80);
+  const rowType = apiRef.current.getRowNode(rowId).type;
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
@@ -372,7 +374,7 @@ function GridRow(props) {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      if (row) {
+      if (rowType !== 'skeletonRow') {
         const {
           colSpan,
           width
@@ -407,7 +409,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -420,8 +422,8 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
+exports.GridRow = GridRow;
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/node/components/base/GridBody.js

@@ -17,8 +17,6 @@ var _GridMainContainer = require("../containers/GridMainContainer");
 
 var _GridAutoSizer = require("../GridAutoSizer");
 
-var _GridOverlays = require("./GridOverlays");
-
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -72,7 +70,7 @@ function GridBody(props) {
     apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeadersComponent, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeadersComponent, {
       ref: columnsContainerRef,
       innerRef: columnHeadersRef
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAutoSizer.GridAutoSizer, {

package/node/components/base/GridOverlays.js

@@ -13,6 +13,12 @@ var React = _interopRequireWildcard(require("react"));
 
 var _utils = require("@mui/material/utils");
 
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 
 var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
@@ -23,7 +29,9 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
-var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
+
+var _gridClasses = require("../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -31,12 +39,44 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const GridOverlayWrapperRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  overridesResolver: (props, styles) => styles.overlayWrapper
+})({
+  position: 'sticky',
+  // To stay in place while scrolling
+  top: 0,
+  left: 0,
+  width: 0,
+  // To stay above the content instead of shifting it down
+  height: 0,
+  // To stay above the content instead of shifting it down
+  zIndex: 4 // Should be above pinned columns, pinned rows and detail panel
+
+});
+const GridOverlayWrapperInner = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  overridesResolver: (props, styles) => styles.overlayWrapperInner
+})({});
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['overlayWrapper'],
+    inner: ['overlayWrapperInner']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+
 function GridOverlayWrapper(props) {
   var _viewportInnerSize$he, _viewportInnerSize$wi;
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const totalHeaderHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityTotalHeaderHeightSelector);
   const [viewportInnerSize, setViewportInnerSize] = React.useState(() => {
     var _apiRef$current$getRo, _apiRef$current$getRo2;
 
@@ -53,22 +93,27 @@ function GridOverlayWrapper(props) {
   let height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
 
   if (rootProps.autoHeight && height === 0) {
-    height = 'auto';
+    height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
   }
 
+  const classes = useUtilityClasses((0, _extends2.default)({}, props, {
+    classes: rootProps.classes
+  }));
+
   if (!viewportInnerSize) {
     return null;
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    style: {
-      height,
-      width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
-      position: 'absolute',
-      top: totalHeaderHeight,
-      bottom: height === 'auto' ? 0 : undefined
-    }
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, {
+    className: (0, _clsx.default)(classes.root),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
+      className: (0, _clsx.default)(classes.inner),
+      style: {
+        height,
+        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+      }
+    }, props))
+  });
 }
 
 function GridOverlays() {

package/node/components/cell/GridBooleanCell.js

@@ -23,6 +23,8 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
+var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "getValue"];
@@ -153,7 +155,7 @@ const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 exports.GridBooleanCell = GridBooleanCell;
 
 const renderBooleanCell = params => {
-  if (params.rowNode.isAutoGenerated) {
+  if ((0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
     return '';
   }
 

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -102,17 +102,12 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     }
   }, [apiRef, props]);
 
-  if (rowNode.position === 'footer') {
+  if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
 
   const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
-
-  if (rowNode.isPinned) {
-    return null;
-  }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseCheckbox, (0, _extends2.default)({
     ref: handleRef,
     tabIndex: tabIndex,

package/node/components/containers/GridOverlay.js

@@ -50,13 +50,8 @@ const GridOverlayRoot = (0, _styles.styled)('div', {
 })(({
   theme
 }) => ({
-  position: 'absolute',
-  top: 0,
-  zIndex: 4,
-  // should be above pinned columns, pinned rows and detail panel
   width: '100%',
   height: '100%',
-  pointerEvents: 'none',
   display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',

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

@@ -263,7 +263,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   }), [currentOperator]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
     ref: ref,
-    className: classes.root
+    className: classes.root,
+    "data-id": item.id
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
       variant: "standard",

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -98,11 +98,15 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => {
+          var _item$value;
+
+          return (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
-        }, index)))
+                  ${(_item$value = item.value) != null ? _item$value : ''}`
+          }, index));
+        })
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -274,7 +274,7 @@ const useGridColumnHeaders = props => {
 
     const columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

package/node/hooks/features/editRows/useGridCellEditing.new.js

@@ -15,6 +15,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _utils = require("@mui/utils");
+
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
@@ -29,7 +31,7 @@ var _warning = require("../../../utils/warning");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
-var _utils = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
 
@@ -128,6 +130,10 @@ const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridEditCellParams.GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -209,7 +215,7 @@ const useGridCellEditing = (apiRef, props) => {
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? _gridEditRowModel.GridCellModes.Edit : _gridEditRowModel.GridCellModes.View;
   }, [apiRef]);
-  const updateCellModesModel = React.useCallback(newModel => {
+  const updateCellModesModel = (0, _utils.unstable_useEventCallback)(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
 
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
@@ -226,7 +232,7 @@ const useGridCellEditing = (apiRef, props) => {
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
-  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  });
   const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
     // We use the ref because it always contain the up-to-date value, different from the state
     // that needs a rerender to reflect the new value
@@ -283,7 +289,7 @@ const useGridCellEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = React.useCallback(params => {
+  const updateStateToStartCellEditMode = (0, _utils.unstable_useEventCallback)(params => {
     const {
       id,
       field,
@@ -296,7 +302,7 @@ const useGridCellEditing = (apiRef, props) => {
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, updateOrDeleteFieldState]);
+  });
   const stopCellEditMode = React.useCallback(params => {
     const {
       id,
@@ -308,7 +314,7 @@ const useGridCellEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStopCellEditMode = React.useCallback(async params => {
+  const updateStateToStopCellEditMode = (0, _utils.unstable_useEventCallback)(async params => {
     const {
       id,
       field,
@@ -353,7 +359,11 @@ const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevCellModesModel.current[id][field].mode = _gridEditRowModel.GridCellModes.Edit;
+        prevCellModesModel.current[id][field].mode = _gridEditRowModel.GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+        updateFieldInCellModesModel(id, field, {
+          mode: _gridEditRowModel.GridCellModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -375,7 +385,7 @@ const useGridCellEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishCellEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
+  });
   const setCellEditingEditCellValue = React.useCallback(async params => {
     var _editingState$id, _editingState$id$fiel;
 
@@ -462,10 +472,10 @@ const useGridCellEditing = (apiRef, props) => {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = (0, _utils.deepClone)(cellModesModel); // Do a deep-clone because the attributes might be changed later
+    prevCellModesModel.current = (0, _utils2.deepClone)(cellModesModel); // Do a deep-clone because the attributes might be changed later
 
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {

package/node/hooks/features/editRows/useGridEditing.new.js

@@ -21,6 +21,8 @@ var _useGridRowEditing = require("./useGridRowEditing.new");
 
 var _gridEditRowsSelector = require("./gridEditRowsSelector");
 
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -39,7 +41,7 @@ const useGridEditing = (apiRef, props) => {
     isCellEditable: isCellEditableProp
   } = props;
   const isCellEditable = React.useCallback(params => {
-    if (params.rowNode.isAutoGenerated) {
+    if ((0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode)) {
       return false;
     }
 
@@ -55,7 +57,7 @@ const useGridEditing = (apiRef, props) => {
       return isCellEditableProp(params);
     }
 
-    if (params.rowNode.isPinned) {
+    if (params.rowNode.type === 'pinnedRow') {
       return false;
     }
 

package/node/hooks/features/editRows/useGridEditing.old.js

@@ -26,6 +26,8 @@ var _useGridCellEditing = require("./useGridCellEditing.old");
 
 var _useGridRowEditing = require("./useGridRowEditing.old");
 
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -56,7 +58,7 @@ function useGridEditing(apiRef, props) {
     stateSelector: _gridEditRowsSelector.gridEditRowsStateSelector,
     changeEvent: 'editRowsModelChange'
   });
-  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isCellEditable = React.useCallback(params => !(0, _gridRowsUtils.isAutoGeneratedRow)(params.rowNode) && params.rowNode.type !== 'pinnedRow' && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
 
   const maybeDebounce = (id, field, debounceMs, callback) => {