@mui/x-data-grid 6.10.1 → 6.10.2

package/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.10.2
+
+_Jul 27, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve scatter charts performance
+- 📚 Redesigned component API documentation and side navigation
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.2`
+
+- [DataGrid] Fix quick filter & aggregation error (#9729) @romgrk
+- [DataGrid] Fix row click propagation causing error in nested grid (#9741) @cherniavskii
+- [DataGrid] Keep focused cell in the DOM (#7357) @yaredtsy
+- [l10n] Improve Finnish (fi-FI) locale (#9746) @sambbaahh
+
+#### `@mui/x-data-grid-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.2`.
+
+#### `@mui/x-data-grid-premium@v6.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.2`, plus:
+
+- [DataGridPremium] Allow to customize grouping cell offset (#9417) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.2`
+
+- [pickers] Remove the `endOfDate` from `DigitalClock` timeOptions (#9800) @noraleonte
+
+#### `@mui/x-date-pickers-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.2`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.5`
+
+- [charts] Improve JSDoc for axis-related props (#9779) @flaviendelangle
+- [charts] Improve performances of Scatter component (#9527) @flaviendelangle
+
+### Docs
+
+- [docs] Add `pnpm` in more places @oliviertassinari
+- [docs] Add `pnpm` installation instructions for MUI X (#9707) @richbustos
+- [docs] Align pickers "uncontrolled vs controlled" sections (#9772) @LukasTy
+- [docs] Apply style guide to the data grid Layout page (#9673) @richbustos
+- [docs] Differentiate between packages in `slotProps` docs (#9668) @cherniavskii
+- [docs] Fix charts width in axis pages (#9801) @alexfauquette
+- [docs] Fix wrong prop name in the Editing page (#9753) @m4theushw
+- [docs] New component API page and side nav design (#9187) @alexfauquette
+- [docs] Update overview page with up to date information about the plans (#9512) @joserodolfofreitas
+
+### Core
+
+- [core] Use PR charts version in preview (#9787) @alexfauquette
+- [license] Allow overriding the license on specific parts of the page (#9717) @Janpot
+- [license] Throw in dev mode after 30 days (#9701) @oliviertassinari
+- [license] Only throw in dev mode (#9803) @oliviertassinari
+- [test] Fail the CI when new unexpected files are created (#9728) @oliviertassinari
+
 ## 6.10.1
 
 _Jul 20, 2023_

package/components/GridRow.d.ts

@@ -28,6 +28,8 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
     tabbableCell: string | null;
     row?: GridRowModel;
     isLastVisible?: boolean;
+    focusedCellColumnIndexNotInRange?: number;
+    isNotVisible?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;

package/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -64,10 +64,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       position,
       rowHeight,
       className,
+      visibleColumns,
       renderedColumns,
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
+      focusedCellColumnIndexNotInRange,
+      isNotVisible,
+      focusedCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -173,7 +177,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
       // User clicked a button from the "actions" column type
       const column = apiRef.current.getColumn(field);
-      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -190,6 +194,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     var _editRowsState$rowId$, _editRowsState$rowId;
     const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
     const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    let cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
     return /*#__PURE__*/_jsx(CellComponent, _extends({
       column: column,
       width: cellProps.width,
@@ -200,7 +208,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       colIndex: cellProps.indexRelativeToAllColumns,
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
     }, slotProps == null ? void 0 : slotProps.cell), column.field);
   };
   const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
@@ -222,25 +231,35 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       minHeight = maximumSize;
     }
   }
-  const style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight
-  });
-  if (sizes != null && sizes.spacingTop) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-  if (sizes != null && sizes.spacingBottom) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    let propertyValue = style[property];
-    // avoid overriding existing value
-    if (typeof propertyValue !== 'number') {
-      propertyValue = parseInt(propertyValue || '0', 10);
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        opacity: 0,
+        width: 0,
+        height: 0
+      };
     }
-    propertyValue += sizes.spacingBottom;
-    style[property] = propertyValue;
-  }
+    const rowStyle = _extends({}, styleProp, {
+      maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+      // max-height doesn't support "auto"
+      minHeight
+    });
+    if (sizes != null && sizes.spacingTop) {
+      const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+      rowStyle[property] = sizes.spacingTop;
+    }
+    if (sizes != null && sizes.spacingBottom) {
+      const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+      let propertyValue = rowStyle[property];
+      // avoid overriding existing value
+      if (typeof propertyValue !== 'number') {
+        propertyValue = parseInt(propertyValue || '0', 10);
+      }
+      propertyValue += sizes.spacingBottom;
+      rowStyle[property] = propertyValue;
+    }
+    return rowStyle;
+  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   if (typeof rootProps.getRowClassName === 'function') {
     var _currentPage$range;
@@ -261,7 +280,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
-    const indexRelativeToAllColumns = firstColumnToRender + i;
+    let indexRelativeToAllColumns = firstColumnToRender + i;
+    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
+      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
+      } else {
+        indexRelativeToAllColumns -= 1;
+      }
+    }
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
       if (rowType !== 'skeletonRow') {
@@ -324,12 +350,14 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If `null`, no cell in this row has focus.
    */
   focusedCell: PropTypes.string,
+  focusedCellColumnIndexNotInRange: PropTypes.number,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
+  isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

package/components/cell/GridCell.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { GridRowId, GridCellMode } from '../../models';
+import { GridRowId, GridCellMode, GridEditCellProps } from '../../models';
 import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
-import { GridEditCellProps } from '../../models/gridEditRowModel';
 type GridCellV7Props = {
     align: GridAlignment;
     className?: string;
@@ -13,6 +12,7 @@ type GridCellV7Props = {
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
+    isNotVisible?: boolean;
     editCellState: GridEditCellProps<any> | null;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;

package/components/cell/GridCell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -177,6 +177,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       showRightBorder,
       colSpan,
       disableDragEvents,
+      isNotVisible,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -227,13 +228,23 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
-  const style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    const cellStyle = {
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+    };
 
+    return cellStyle;
+  }, [width, height, isNotVisible]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -353,6 +364,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: PropTypes.bool,
     value: PropTypes.any
   }),
+  isNotVisible: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
@@ -380,6 +392,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       showRightBorder,
       colSpan,
       disableDragEvents,
+      isNotVisible,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -474,13 +487,23 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
-  const style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    const cellStyle = {
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+    };
 
+    return cellStyle;
+  }, [width, height, isNotVisible]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -594,6 +617,7 @@ process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
     value: PropTypes.any
   }),
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  isNotVisible: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onDragEnter: PropTypes.func,

package/components/containers/GridRootStyles.js

@@ -159,6 +159,7 @@ export const GridRootStyles = styled('div', {
     '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
     '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
     '--unstable_DataGrid-overlayBackground': theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--DataGrid-cellOffsetMultiplier': 2,
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -249,7 +249,7 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     if (field) {
       const column = apiRef.current.getColumn(field);
-      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -98,9 +98,33 @@ export const useGridVirtualScroller = props => {
   const rowStyleCache = React.useRef(Object.create(null));
   const prevGetRowProps = React.useRef();
   const prevRootRowStyle = React.useRef();
-  const getRenderedColumnsRef = React.useRef(defaultMemoize((columns, firstColumnToRender, lastColumnToRender) => {
-    return columns.slice(firstColumnToRender, lastColumnToRender);
+  const getRenderedColumnsRef = React.useRef(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
+    };
   }, MEMOIZE_OPTIONS));
+  const indexOfColumnWithFocusedCell = React.useMemo(() => {
+    if (cellFocus !== null) {
+      return visibleColumns.findIndex(column => column.field === cellFocus.field);
+    }
+    return -1;
+  }, [cellFocus, visibleColumns]);
   const getNearestIndexToRender = React.useCallback(offset => {
     var _currentPage$range, _currentPage$range2;
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
@@ -308,6 +332,12 @@ export const useGridVirtualScroller = props => {
   const handleTouchMove = useEventCallback(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
+  const indexOfRowWithFocusedCell = React.useMemo(() => {
+    if (cellFocus !== null) {
+      return currentPage.rows.findIndex(row => row.id === cellFocus.id);
+    }
+    return -1;
+  }, [cellFocus, currentPage.rows]);
   const getRows = (params = {
     renderContext
   }) => {
@@ -359,6 +389,28 @@ export const useGridVirtualScroller = props => {
         });
       }
     }
+    // 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 (indexOfRowWithFocusedCell > -1) {
+      const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
+      if (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell) {
+        isRowWithFocusedCellNotInRange = true;
+        if (indexOfRowWithFocusedCell > firstRowToRender) {
+          renderedRows.push(rowWithFocusedCell);
+        } else {
+          renderedRows.unshift(rowWithFocusedCell);
+        }
+        apiRef.current.calculateColSpan({
+          rowId: rowWithFocusedCell.id,
+          minFirstColumn,
+          maxLastColumn,
+          columns: visibleColumns
+        });
+      }
+    }
     const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
@@ -373,7 +425,14 @@ export const useGridVirtualScroller = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
-    const renderedColumns = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender);
+    let isColumnWihFocusedCellNotInRange = false;
+    if (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell) {
+      isColumnWihFocusedCellNotInRange = true;
+    }
+    const {
+      focusedCellColumnIndexNotInRange,
+      renderedColumns
+    } = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1);
     const _ref = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row) || {},
       {
         style: rootRowStyle
@@ -390,7 +449,8 @@ export const useGridVirtualScroller = props => {
         id,
         model
       } = renderedRows[i];
-      const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
+      const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
+      const lastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -402,6 +462,8 @@ export const useGridVirtualScroller = props => {
         onRowRender(id);
       }
       const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
+      const columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
+      const renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange, ...renderedColumns] : renderedColumns;
       let tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === id) {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
@@ -419,10 +481,12 @@ export const useGridVirtualScroller = props => {
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
+        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
+        isNotVisible: isRowNotVisible,
         rowHeight: baseRowHeight,
         focusedCell: focusedCell,
         tabbableCell: tabbableCell,
-        renderedColumns: renderedColumns,
+        renderedColumns: renderedColumnsWithFocusedCell,
         visibleColumns: visibleColumns,
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,

package/index.js

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

package/internals/index.d.ts

@@ -43,7 +43,7 @@ export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRo
 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';
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from '../hooks/features/rows/gridRowsUtils';
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, } from '../hooks/features/rows/gridRowsSelector';
 export { headerFilteringStateInitializer, useGridHeaderFiltering, } from '../hooks/features/headerFiltering/useGridHeaderFiltering';
 export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';

package/internals/index.js

@@ -34,7 +34,7 @@ export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreP
 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';
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from '../hooks/features/rows/gridRowsUtils';
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '../hooks/features/rows/gridRowsSelector';
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from '../hooks/features/headerFiltering/useGridHeaderFiltering';
 export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';

package/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -69,6 +69,8 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     lastColumnToRender = props.lastColumnToRender,
     _props$isLastVisible = props.isLastVisible,
     isLastVisible = _props$isLastVisible === void 0 ? false : _props$isLastVisible,
+    focusedCellColumnIndexNotInRange = props.focusedCellColumnIndexNotInRange,
+    isNotVisible = props.isNotVisible,
     focusedCell = props.focusedCell,
     tabbableCell = props.tabbableCell,
     onClick = props.onClick,
@@ -180,7 +182,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
 
       // User clicked a button from the "actions" column type
       var column = apiRef.current.getColumn(field);
-      if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -195,6 +197,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     var _editRowsState$rowId$, _editRowsState$rowId;
     var disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
     var editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    var cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
     return /*#__PURE__*/_jsx(CellComponent, _extends({
       column: column,
       width: cellProps.width,
@@ -205,7 +211,8 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       colIndex: cellProps.indexRelativeToAllColumns,
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
     }, slotProps == null ? void 0 : slotProps.cell), column.field);
   };
   var sizes = useGridSelector(apiRef, function () {
@@ -232,25 +239,35 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       minHeight = maximumSize;
     }
   }
-  var style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: minHeight
-  });
-  if (sizes != null && sizes.spacingTop) {
-    var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-  if (sizes != null && sizes.spacingBottom) {
-    var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    var propertyValue = style[_property];
-    // avoid overriding existing value
-    if (typeof propertyValue !== 'number') {
-      propertyValue = parseInt(propertyValue || '0', 10);
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        opacity: 0,
+        width: 0,
+        height: 0
+      };
     }
-    propertyValue += sizes.spacingBottom;
-    style[_property] = propertyValue;
-  }
+    var rowStyle = _extends({}, styleProp, {
+      maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+      // max-height doesn't support "auto"
+      minHeight: minHeight
+    });
+    if (sizes != null && sizes.spacingTop) {
+      var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+      rowStyle[property] = sizes.spacingTop;
+    }
+    if (sizes != null && sizes.spacingBottom) {
+      var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+      var propertyValue = rowStyle[_property];
+      // avoid overriding existing value
+      if (typeof propertyValue !== 'number') {
+        propertyValue = parseInt(propertyValue || '0', 10);
+      }
+      propertyValue += sizes.spacingBottom;
+      rowStyle[_property] = propertyValue;
+    }
+    return rowStyle;
+  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   var rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   if (typeof rootProps.getRowClassName === 'function') {
     var _currentPage$range;
@@ -272,6 +289,13 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   for (var i = 0; i < renderedColumns.length; i += 1) {
     var column = renderedColumns[i];
     var indexRelativeToAllColumns = firstColumnToRender + i;
+    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
+      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
+      } else {
+        indexRelativeToAllColumns -= 1;
+      }
+    }
     var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
       if (rowType !== 'skeletonRow') {
@@ -331,12 +355,14 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * If `null`, no cell in this row has focus.
    */
   focusedCell: PropTypes.string,
+  focusedCellColumnIndexNotInRange: PropTypes.number,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
+  isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,