@mui/x-data-grid 7.24.1 → 7.25.0

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

@@ -6,7 +6,7 @@ import { gridRenderContextSelector } from "./gridVirtualizationSelectors.js";
 import { gridFocusCellSelector } from "../focus/index.js";
 import { gridVisibleRowsSelector } from "../pagination/index.js";
 import { gridRowsLookupSelector } from "../rows/index.js";
-const gridIsFocusedCellOutOfContex = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
+const gridIsFocusedCellOutOfContext = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
   if (!focusedCell) {
     return false;
   }
@@ -19,7 +19,7 @@ const gridIsFocusedCellOutOfContex = createSelector(gridFocusCellSelector, gridR
   const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
   return !isInRenderContext;
 });
-export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContex, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridRowsLookupSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
+export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContext, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridRowsLookupSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
   if (!isFocusedCellOutOfRenderContext) {
     return null;
   }

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

@@ -25,7 +25,9 @@ import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { minimalContentHeight } from "../rows/gridRowsUtils.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "../columns/index.js";
 import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
@@ -58,17 +60,13 @@ export const useGridVirtualScroller = () => {
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedColumns = listView ? {
-    left: [],
-    right: []
-  } : pinnedColumnDefinitions;
+  const pinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+  const pinnedColumns = listView ? EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = useRtl();
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
+  const currentPage = useGridVisibleRows(apiRef);
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
@@ -84,7 +82,10 @@ export const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = roundDimensions(initialRect);
+    let lastSize = {
+      width: roundToDecimalPlaces(initialRect.width, 1),
+      height: roundToDecimalPlaces(initialRect.height, 1)
+    };
     if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
       previousSize.current = lastSize;
       apiRef.current.publishEvent('resize', lastSize);
@@ -97,7 +98,10 @@ export const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = roundDimensions(entry.contentRect);
+      const newSize = {
+        width: roundToDecimalPlaces(entry.contentRect.width, 1),
+        height: roundToDecimalPlaces(entry.contentRect.height, 1)
+      };
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -165,9 +169,13 @@ export const useGridVirtualScroller = () => {
     if (!scroller) {
       return undefined;
     }
+    const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
+    const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
+
+    // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
-      top: scroller.scrollTop,
-      left: scroller.scrollLeft
+      top: clamp(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? clamp(scroller.scrollLeft, -maxScrollLeft, 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -220,34 +228,15 @@ export const useGridVirtualScroller = () => {
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
   };
-  const handleScroll = useEventCallback(event => {
+  const handleScroll = useEventCallback(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
       return;
     }
-    const {
-      scrollTop,
-      scrollLeft
-    } = event.currentTarget;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
-      return;
-    }
-    if (!isRtl) {
-      if (scrollLeft < 0) {
-        return;
-      }
-    }
-    if (isRtl) {
-      if (scrollLeft > 0) {
-        return;
-      }
-    }
     const nextRenderContext = triggerUpdateRenderContext();
     apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollTop,
-      left: scrollLeft,
+      top: scrollPosition.current.top,
+      left: scrollPosition.current.left,
       renderContext: nextRenderContext
     });
   });
@@ -369,7 +358,6 @@ export const useGridVirtualScroller = () => {
         rowId: id,
         index: rowIndex,
         selected: isSelected,
-        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
         columnsTotalWidth: dimensions.columnsTotalWidth,
         rowHeight: baseRowHeight,
@@ -527,11 +515,13 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     })
   };
 };
@@ -573,6 +563,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return _extends({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -824,13 +819,4 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
-}
-
-// Round to avoid issues with subpixel rendering
-// https://github.com/mui/mui-x/issues/15721
-function roundDimensions(dimensions) {
-  return {
-    width: Math.round(dimensions.width * 10) / 10,
-    height: Math.round(dimensions.height * 10) / 10
-  };
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.24.1
+ * @mui/x-data-grid v7.25.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/models/api/index.js

@@ -1,4 +1,3 @@
-export * from "./gridParamsApi.js";
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
 export * from "./gridRowApi.js";

package/modern/utils/roundToDecimalPlaces.js

@@ -0,0 +1,3 @@
+export function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}

package/modern/utils/utils.js

@@ -196,4 +196,9 @@ export function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
+export function eslintUseValue(_) {}
+export const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};

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/components/GridRow.js

@@ -14,6 +14,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 +34,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 +82,11 @@ 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);
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -153,7 +163,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 +205,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 +227,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 +245,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);
@@ -324,7 +331,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/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