@mui/x-data-grid 7.24.1 → 7.26.0

package/node/DataGrid/DataGrid.js

@@ -25,17 +25,11 @@ const configuration = {
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [..._propValidation.propValidatorsDataGrid,
-  // Only validate in MIT version
-  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
-}
 const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    (0, _propValidation.validateProps)(props, propValidators);
+    (0, _propValidation.validateProps)(props, _propValidation.propValidatorsDataGrid);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContextProvider.GridContextProvider, {
     privateApiRef: privateApiRef,

package/node/DataGrid/useDataGridComponent.js

@@ -47,7 +47,6 @@ const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSelection.rowSelectionStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumns.columnsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
@@ -60,10 +59,11 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
-  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_virtualization.virtualizationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);

package/node/components/GridRow.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -14,6 +15,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _gridClasses = require("../constants/gridClasses");
 var _composeGridClasses = require("../utils/composeGridClasses");
@@ -33,8 +35,16 @@ var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const isRowReorderingEnabledSelector = (0, _createSelector.createSelectorV8)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, rowReordering) => {
+  if (!rowReordering) {
+    return false;
+  }
+  const isEditingRows = !(0, _isObjectEmpty.isObjectEmpty)(editRows);
+  return !isEditingRows;
+});
 const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
@@ -73,10 +83,14 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
-  const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
+  const rowReordering = rootProps.rowReordering;
+  const isRowReorderingEnabled = (0, _useGridSelector.useGridSelectorV8)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
+  const editing = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -153,7 +167,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const rowReordering = rootProps.rowReordering;
   const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), _useGridSelector.objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
@@ -196,6 +209,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
+
+  /* Start of rendering */
+  if (!rowNode) {
+    return null;
+  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -213,14 +231,12 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
         align: column.align
       }, column.field);
     }
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
-    const isEditingRows = Object.keys(editRowsState).length > 0;
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
     const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
@@ -233,20 +249,15 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
       isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       showLeftBorder: showLeftBorder,
-      showRightBorder: showRightBorder
+      showRightBorder: showRightBorder,
+      row: row,
+      rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
-
-  /* Start of rendering */
-
-  if (!rowNode) {
-    return null;
-  }
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _constants.PinnedColumnPosition.LEFT);
@@ -297,7 +308,8 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       role: "presentation",
       className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-      pinnedRight: pinnedColumns.right.length > 0
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });
@@ -324,7 +336,6 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isNotVisible: _propTypes.default.bool.isRequired,
   lastColumnIndex: _propTypes.default.number.isRequired,
   offsetLeft: _propTypes.default.number.isRequired,
-  offsetTop: _propTypes.default.number,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,

package/node/components/GridScrollArea.js

@@ -19,9 +19,9 @@ var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _densitySelector = require("../hooks/features/density/densitySelector");
-var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
+var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -56,21 +56,38 @@ const GridScrollAreaRawRoot = (0, _system.styled)('div', {
     right: 0
   }
 }));
-function GridScrollAreaRaw(props) {
+const offsetSelector = (0, _createSelector.createSelectorV8)(_gridDimensionsSelectors.gridDimensionsSelector, (dimensions, direction) => {
+  if (direction === 'left') {
+    return dimensions.leftPinnedWidth;
+  }
+  if (direction === 'right') {
+    return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  return 0;
+});
+function GridScrollAreaWrapper(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const [dragging, setDragging] = React.useState(false);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  if (!dragging) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaContent, (0, _extends2.default)({}, props));
+}
+function GridScrollAreaContent(props) {
   const {
-    scrollDirection
+    scrollDirection,
+    scrollPosition
   } = props;
   const rootRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const timeout = (0, _useTimeout.useTimeout)();
   const densityFactor = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
-  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const scrollPosition = React.useRef({
-    left: 0,
-    top: 0
-  });
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const sideOffset = (0, _useGridSelector.useGridSelectorV8)(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
+    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
     if (scrollDirection === 'left') {
       // Only render if the user has not reached yet the start of the list
       return scrollPosition.current.left > 0;
@@ -82,7 +99,6 @@ function GridScrollAreaRaw(props) {
     }
     return false;
   };
-  const [dragging, setDragging] = React.useState(false);
   const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = (0, _extends2.default)({}, rootProps, {
@@ -96,12 +112,11 @@ function GridScrollAreaRaw(props) {
     top: totalHeaderHeight - headerHeight
   };
   if (scrollDirection === 'left') {
-    style.left = dimensions.leftPinnedWidth;
+    style.left = sideOffset;
   } else if (scrollDirection === 'right') {
-    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+    style.right = sideOffset;
   }
-  const handleScrolling = newScrollPosition => {
-    scrollPosition.current = newScrollPosition;
+  const handleScrolling = () => {
     setCanScrollMore(getCanScrollMore);
   };
   const handleDragOver = (0, _utils.unstable_useEventCallback)(event => {
@@ -126,16 +141,8 @@ function GridScrollAreaRaw(props) {
       });
     });
   });
-  const handleColumnHeaderDragStart = (0, _utils.unstable_useEventCallback)(() => {
-    setDragging(true);
-  });
-  const handleColumnHeaderDragEnd = (0, _utils.unstable_useEventCallback)(() => {
-    setDragging(false);
-  });
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'scrollPositionChange', handleScrolling);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
-  if (!dragging || !canScrollMore) {
+  if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
@@ -146,4 +153,4 @@ function GridScrollAreaRaw(props) {
     style: style
   });
 }
-const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaRaw);
+const GridScrollArea = exports.GridScrollArea = (0, _fastMemo.fastMemo)(GridScrollAreaWrapper);

package/node/components/GridSkeletonLoadingOverlay.js

@@ -18,6 +18,7 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
 var _constants = require("../internals/constants");
+var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
 var _gridClasses = require("../constants/gridClasses");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _cellBorderUtils = require("../utils/cellBorderUtils");
@@ -62,7 +63,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _for
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
   const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
-  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnsTotalWidthSelector);
+  const totalWidth = (0, _hooks.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
   const positions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridColumnPositionsSelector);
   const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
   const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);

package/node/components/cell/GridCell.js

@@ -19,15 +19,16 @@ var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _constants = require("../../internals/constants");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
 var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup = {
   [_constants.PinnedColumnPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
@@ -35,30 +36,6 @@ const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup =
   [_constants.PinnedColumnPosition.NONE]: undefined,
   [_constants.PinnedColumnPosition.VIRTUAL]: undefined
 };
-const EMPTY_CELL_PARAMS = {
-  id: -1,
-  field: '__unset__',
-  row: {},
-  rowNode: {
-    id: -1,
-    depth: 0,
-    type: 'leaf',
-    parent: -1,
-    groupingKey: null
-  },
-  colDef: {
-    type: 'string',
-    field: '__unset__',
-    computedWidth: 0
-  },
-  cellMode: _models.GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
-};
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -82,8 +59,9 @@ let warnedOnce = false;
 const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const {
       column,
+      row,
       rowId,
-      editCellState,
+      rowNode,
       align,
       colIndex,
       width,
@@ -107,22 +85,29 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       onDragOver
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const field = column.field;
-  const cellParams = (0, _useGridSelector.useGridSelector)(apiRef, () => {
-    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
-    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
-    // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    const row = apiRef.current.getRow(rowId);
-    if (!row) {
-      return EMPTY_CELL_PARAMS;
-    }
-    const result = apiRef.current.getCellParams(rowId, field);
-    result.api = apiRef.current;
-    return result;
-  }, _useGridSelector.objectShallowCompare);
+  const editCellState = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridEditingSelectors.gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const cellMode = editCellState ? _models.GridCellModes.Edit : _models.GridCellModes.View;
+  const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
+    colDef: column,
+    cellMode,
+    rowNode: rowNode,
+    tabIndex: (0, _useGridSelector.useGridSelector)(apiRef, () => {
+      const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+    }),
+    hasFocus: (0, _useGridSelector.useGridSelector)(apiRef, () => {
+      const focus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+      return focus?.id === rowId && focus.field === field;
+    })
+  });
+  cellParams.api = apiRef.current;
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
@@ -130,7 +115,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const hiddenCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector);
   const spannedCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningSpannedCellsSelector);
   const {
-    cellMode,
     hasFocus,
     isEditable = false,
     value
@@ -252,9 +236,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       }, style)
     });
   }
-  if (cellParams === EMPTY_CELL_PARAMS) {
-    return null;
-  }
   let handleFocus = other.onFocus;
   if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
@@ -338,16 +319,12 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   colSpan: _propTypes.default.number,
   column: _propTypes.default.object.isRequired,
   disableDragEvents: _propTypes.default.bool,
-  editCellState: _propTypes.default.shape({
-    changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: _propTypes.default.bool,
-    isValidating: _propTypes.default.bool,
-    value: _propTypes.default.any
-  }),
   isNotVisible: _propTypes.default.bool.isRequired,
   pinnedOffset: _propTypes.default.number,
   pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
+  row: _propTypes.default.object.isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  rowNode: _propTypes.default.object.isRequired,
   showLeftBorder: _propTypes.default.bool.isRequired,
   showRightBorder: _propTypes.default.bool.isRequired,
   width: _propTypes.default.number.isRequired

package/node/components/containers/GridRoot.js

@@ -20,6 +20,7 @@ var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiCont
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _useIsSSR = require("../../hooks/utils/useIsSSR");
 var _GridHeader = require("../GridHeader");
 var _base = require("../base");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,16 +46,17 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = (0, _useIsSSR.useIsSSR)();
+  if (isSSR) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({