@mui/x-data-grid 6.10.1 → 6.11.0

package/legacy/components/cell/GridCell.js

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -150,7 +149,7 @@ var GridCellWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(CellComponent, cellProps);
 });
 var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$experiment;
+  var _rootProps$experiment, _rootProps$experiment2;
   var align = props.align,
     childrenProp = props.children,
     editCellState = props.editCellState,
@@ -173,6 +172,7 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     row = props.row,
     colSpan = props.colSpan,
     disableDragEvents = props.disableDragEvents,
+    isNotVisible = props.isNotVisible,
     onClick = props.onClick,
     onDoubleClick = props.onDoubleClick,
     onMouseDown = props.onMouseDown,
@@ -228,13 +228,23 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, [apiRef, field, rowId]);
-  var style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    var 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(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -277,6 +287,7 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = /*#__PURE__*/_jsx("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -289,27 +300,32 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)
   };
-  return /*#__PURE__*/_jsx("div", _extends({
-    ref: handleRef,
-    className: clsx(className, classes.root),
-    role: "cell",
-    "data-field": field,
-    "data-colindex": colIndex,
-    "aria-colindex": colIndex + 1,
-    "aria-colspan": colSpan,
-    style: style,
-    tabIndex: tabIndex,
-    onClick: publish('cellClick', onClick),
-    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
-    onMouseOver: publish('cellMouseOver', onMouseOver),
-    onMouseDown: publishMouseDown('cellMouseDown'),
-    onMouseUp: publishMouseUp('cellMouseUp'),
-    onKeyDown: publish('cellKeyDown', onKeyDown),
-    onKeyUp: publish('cellKeyUp', onKeyUp)
-  }, draggableEventHandlers, other, {
-    onFocus: handleFocus,
-    children: children
-  }));
+  var ariaV7 = (_rootProps$experiment2 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment2.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      ref: handleRef,
+      className: clsx(className, classes.root),
+      role: ariaV7 ? 'gridcell' : 'cell',
+      "data-field": field,
+      "data-colindex": colIndex,
+      "aria-colindex": colIndex + 1,
+      "aria-colspan": colSpan,
+      style: style,
+      tabIndex: tabIndex,
+      onClick: publish('cellClick', onClick),
+      onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+      onMouseOver: publish('cellMouseOver', onMouseOver),
+      onMouseDown: publishMouseDown('cellMouseDown'),
+      onMouseUp: publishMouseUp('cellMouseUp'),
+      onKeyDown: publish('cellKeyDown', onKeyDown),
+      onKeyUp: publish('cellKeyUp', onKeyUp)
+    }, draggableEventHandlers, other, {
+      onFocus: handleFocus,
+      children: children
+    }))
+  );
 });
 var MemoizedCellWrapper = fastMemo(GridCellWrapper);
 process.env.NODE_ENV !== "production" ? GridCellWrapper.propTypes = {
@@ -354,6 +370,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,
@@ -368,7 +385,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
 } : void 0;
 export { MemoizedCellWrapper as GridCellWrapper, GridCell };
 var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$experiment2;
+  var _rootProps$experiment3, _rootProps$experiment4;
   var column = props.column,
     rowId = props.rowId,
     editCellState = props.editCellState,
@@ -383,6 +400,7 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     row = props.row,
     colSpan = props.colSpan,
     disableDragEvents = props.disableDragEvents,
+    isNotVisible = props.isNotVisible,
     onClick = props.onClick,
     onDoubleClick = props.onDoubleClick,
     onMouseDown = props.onMouseDown,
@@ -480,13 +498,23 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, [apiRef, field, rowId]);
-  var style = {
-    minWidth: width,
-    maxWidth: width,
-    minHeight: height,
-    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-  };
+  var style = React.useMemo(function () {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0
+      };
+    }
+    var 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(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -510,7 +538,7 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return null;
   }
   var handleFocus = other.onFocus;
-  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.warnIfFocusStateIsNotSynced) {
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment3 = rootProps.experimentalFeatures) != null && _rootProps$experiment3.warnIfFocusStateIsNotSynced) {
     handleFocus = function handleFocus(event) {
       var focusedCell = gridFocusCellSelector(apiRef);
       if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
@@ -550,6 +578,7 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = /*#__PURE__*/_jsx("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -562,27 +591,32 @@ var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)
   };
-  return /*#__PURE__*/_jsx("div", _extends({
-    ref: handleRef,
-    className: clsx(className, classNames, classes.root),
-    role: "cell",
-    "data-field": field,
-    "data-colindex": colIndex,
-    "aria-colindex": colIndex + 1,
-    "aria-colspan": colSpan,
-    style: style,
-    tabIndex: tabIndex,
-    onClick: publish('cellClick', onClick),
-    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
-    onMouseOver: publish('cellMouseOver', onMouseOver),
-    onMouseDown: publishMouseDown('cellMouseDown'),
-    onMouseUp: publishMouseUp('cellMouseUp'),
-    onKeyDown: publish('cellKeyDown', onKeyDown),
-    onKeyUp: publish('cellKeyUp', onKeyUp)
-  }, draggableEventHandlers, other, {
-    onFocus: handleFocus,
-    children: children
-  }));
+  var ariaV7 = (_rootProps$experiment4 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment4.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      ref: handleRef,
+      className: clsx(className, classNames, classes.root),
+      role: ariaV7 ? 'gridcell' : 'cell',
+      "data-field": field,
+      "data-colindex": colIndex,
+      "aria-colindex": colIndex + 1,
+      "aria-colspan": colSpan,
+      style: style,
+      tabIndex: tabIndex,
+      onClick: publish('cellClick', onClick),
+      onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+      onMouseOver: publish('cellMouseOver', onMouseOver),
+      onMouseDown: publishMouseDown('cellMouseDown'),
+      onMouseUp: publishMouseUp('cellMouseUp'),
+      onKeyDown: publish('cellKeyDown', onKeyDown),
+      onKeyUp: publish('cellKeyUp', onKeyUp)
+    }, draggableEventHandlers, other, {
+      onFocus: handleFocus,
+      children: children
+    }))
+  );
 });
 process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -602,6 +636,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/legacy/components/columnHeaders/GridBaseColumnHeaders.js

@@ -40,5 +40,7 @@ export var GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridCo
     ref: ref,
     className: clsx(className, classes.root),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    role: "presentation"
+  }));
 });

package/legacy/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -81,10 +81,12 @@ var GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGen
   }, other, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
-      draggable: isDraggable
+      draggable: isDraggable,
+      role: "presentation"
     }, draggableContainerProps, {
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.titleContainer,
+        role: "presentation",
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.titleContainerContent,
           children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {

package/legacy/components/containers/GridMainContainer.js

@@ -1,8 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -27,12 +29,17 @@ var GridMainContainerRoot = styled('div', {
   };
 });
 export var GridMainContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _rootProps$experiment;
   var rootProps = useGridRootProps();
   var classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(GridMainContainerRoot, {
+  var getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? useGridAriaAttributes : null;
+  var ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  return /*#__PURE__*/_jsx(GridMainContainerRoot, _extends({
     ref: ref,
     className: classes.root,
-    ownerState: rootProps,
+    ownerState: rootProps
+  }, ariaAttributes, {
     children: props.children
-  });
+  }));
 });

package/legacy/components/containers/GridRoot.js

@@ -7,14 +7,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { GridRootStyles } from './GridRootStyles';
-import { gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var autoHeight = ownerState.autoHeight,
@@ -26,18 +24,18 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+  var _rootProps$experiment;
   var rootProps = useGridRootProps();
   var children = props.children,
     className = props.className,
     other = _objectWithoutProperties(props, _excluded);
   var apiRef = useGridPrivateApiContext();
-  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   var rootContainerRef = React.useRef(null);
   var handleRef = useForkRef(rootContainerRef, ref);
-  var pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  var getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? null : useGridAriaAttributes;
+  var ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
   var ownerState = _extends({}, rootProps, {
     density: densityValue
   });
@@ -60,12 +58,8 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
     ref: handleRef,
     className: clsx(className, classes.root),
-    ownerState: ownerState,
-    role: "grid",
-    "aria-colcount": visibleColumns.length,
-    "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    "aria-multiselectable": !rootProps.disableMultipleRowSelection
-  }, other, {
+    ownerState: ownerState
+  }, ariaAttributes, other, {
     children: children
   }));
 });

package/legacy/components/containers/GridRootStyles.js

@@ -39,6 +39,7 @@ export var GridRootStyles = styled('div', {
     '--unstable_DataGrid-radius': typeof radius === 'number' ? "".concat(radius, "px") : radius,
     '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
     '--unstable_DataGrid-overlayBackground': theme.vars ? "rgba(".concat(theme.vars.palette.background.defaultChannel, " / ").concat(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/legacy/hooks/features/columns/gridColumnsUtils.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY } from '../../../colDef';
+import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF } from '../../../colDef';
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 import { gridDensityFactorSelector } from '../density/densitySelector';
@@ -130,7 +130,7 @@ export var hydrateColumnsWidth = function hydrateColumnsWidth(rawState, viewport
         computedWidth = 0;
         flexColumns.push(newColumn);
       } else {
-        computedWidth = clamp(newColumn.width, newColumn.minWidth, newColumn.maxWidth);
+        computedWidth = clamp(newColumn.width || GRID_STRING_COL_DEF.width, newColumn.minWidth || GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
       newColumn.computedWidth = computedWidth;

package/legacy/hooks/features/rowSelection/useGridRowSelection.js

@@ -272,7 +272,7 @@ export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
     }
     if (field) {
       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;
       }
     }

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["style"],
@@ -106,9 +107,35 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var rowStyleCache = React.useRef(Object.create(null));
   var prevGetRowProps = React.useRef();
   var prevRootRowStyle = React.useRef();
-  var getRenderedColumnsRef = React.useRef(defaultMemoize(function (columns, firstColumnToRender, lastColumnToRender) {
-    return columns.slice(firstColumnToRender, lastColumnToRender);
+  var getRenderedColumnsRef = React.useRef(defaultMemoize(function (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.
+    var focusedCellColumnIndexNotInRange;
+    var 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: focusedCellColumnIndexNotInRange,
+      renderedColumns: renderedColumns
+    };
   }, MEMOIZE_OPTIONS));
+  var indexOfColumnWithFocusedCell = React.useMemo(function () {
+    if (cellFocus !== null) {
+      return visibleColumns.findIndex(function (column) {
+        return column.field === cellFocus.field;
+      });
+    }
+    return -1;
+  }, [cellFocus, visibleColumns]);
   var getNearestIndexToRender = React.useCallback(function (offset) {
     var _currentPage$range, _currentPage$range2;
     var lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
@@ -324,6 +351,14 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var handleTouchMove = useEventCallback(function (event) {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
+  var indexOfRowWithFocusedCell = React.useMemo(function () {
+    if (cellFocus !== null) {
+      return currentPage.rows.findIndex(function (row) {
+        return row.id === cellFocus.id;
+      });
+    }
+    return -1;
+  }, [cellFocus, currentPage.rows]);
   var getRows = function getRows() {
     var _rootProps$slotProps;
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
@@ -382,6 +417,28 @@ export var useGridVirtualScroller = function 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.
+
+    var isRowWithFocusedCellNotInRange = false;
+    if (indexOfRowWithFocusedCell > -1) {
+      var 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: minFirstColumn,
+          maxLastColumn: maxLastColumn,
+          columns: visibleColumns
+        });
+      }
+    }
     var _getRenderableIndexes11 = getRenderableIndexes({
         firstIndex: nextRenderContext.firstColumnIndex,
         lastIndex: nextRenderContext.lastColumnIndex,
@@ -399,7 +456,13 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       lastRowToRender: lastRowToRender,
       visibleRows: currentPage.rows
     });
-    var renderedColumns = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender);
+    var isColumnWihFocusedCellNotInRange = false;
+    if (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell) {
+      isColumnWihFocusedCellNotInRange = true;
+    }
+    var _getRenderedColumnsRe = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1),
+      focusedCellColumnIndexNotInRange = _getRenderedColumnsRe.focusedCellColumnIndexNotInRange,
+      renderedColumns = _getRenderedColumnsRe.renderedColumns;
     var _ref4 = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row) || {},
       rootRowStyle = _ref4.style,
       rootRowProps = _objectWithoutProperties(_ref4, _excluded);
@@ -413,7 +476,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       var _renderedRows$_i = renderedRows[_i],
         _id = _renderedRows$_i.id,
         _model = _renderedRows$_i.model;
-      var lastVisibleRowIndex = firstRowToRender + _i === currentPage.rows.length - 1;
+      var isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === _id;
+      var lastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + _i === currentPage.rows.length : firstRowToRender + _i === currentPage.rows.length - 1;
       var baseRowHeight = !apiRef.current.rowHasAutoHeight(_id) ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
       var isSelected = void 0;
       if (selectedRowsLookup[_id] == null) {
@@ -425,6 +489,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         onRowRender(_id);
       }
       var focusedCell = cellFocus !== null && cellFocus.id === _id ? cellFocus.field : null;
+      var columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
+      var renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange].concat(_toConsumableArray(renderedColumns)) : renderedColumns;
       var tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === _id) {
         var cellParams = apiRef.current.getCellParams(_id, cellTabIndex.field);
@@ -440,10 +506,12 @@ export var useGridVirtualScroller = function 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,
@@ -512,19 +580,22 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         onWheel: handleWheel,
         onTouchMove: handleTouchMove
       }, inputProps, {
-        style: inputProps.style ? _extends({}, inputProps.style, rootStyle) : rootStyle
+        style: inputProps.style ? _extends({}, inputProps.style, rootStyle) : rootStyle,
+        role: 'presentation'
       });
     },
     getContentProps: function getContentProps() {
       var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
         style = _ref6.style;
       return {
-        style: style ? _extends({}, style, contentSize) : contentSize
+        style: style ? _extends({}, style, contentSize) : contentSize,
+        role: 'presentation'
       };
     },
     getRenderZoneProps: function getRenderZoneProps() {
       return {
-        ref: renderZoneRef
+        ref: renderZoneRef,
+        role: 'rowgroup'
       };
     }
   };

package/legacy/hooks/utils/useGridAriaAttributes.js

@@ -0,0 +1,25 @@
+import { gridVisibleColumnDefinitionsSelector } from '../features/columns/gridColumnsSelector';
+import { useGridSelector } from './useGridSelector';
+import { useGridRootProps } from './useGridRootProps';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../features/columnGrouping/gridColumnGroupsSelector';
+import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../features/rows/gridRowsSelector';
+import { useGridPrivateApiContext } from './useGridPrivateApiContext';
+export var useGridAriaAttributes = function useGridAriaAttributes() {
+  var _rootProps$experiment;
+  var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  var pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  var role = 'grid';
+  if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 && rootProps.treeData) {
+    role = 'treegrid';
+  }
+  return {
+    role: role,
+    'aria-colcount': visibleColumns.length,
+    'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
+    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+  };
+};

package/legacy/index.js

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

package/legacy/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';