@mui/x-data-grid 6.10.1 → 6.11.0

package/node/components/cell/GridCell.js

@@ -22,10 +22,9 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _jsxRuntime = require("react/jsx-runtime");
 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 */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const EMPTY_CELL_PARAMS = {
@@ -185,6 +184,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       showRightBorder,
       colSpan,
       disableDragEvents,
+      isNotVisible,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -235,13 +235,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 === _models.GridCellModes.Edit) {
       return;
@@ -284,6 +294,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -296,27 +307,32 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    ref: handleRef,
-    className: (0, _clsx.default)(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
-  }));
+  const ariaV7 = rootProps.experimentalFeatures?.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+      ref: handleRef,
+      className: (0, _clsx.default)(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
+    }))
+  );
 });
 exports.GridCell = GridCell;
 const MemoizedCellWrapper = (0, _fastMemo.fastMemo)(GridCellWrapper);
@@ -363,6 +379,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
+  isNotVisible: _propTypes.default.bool,
   height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
@@ -388,6 +405,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       showRightBorder,
       colSpan,
       disableDragEvents,
+      isNotVisible,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -482,13 +500,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 === _models.GridCellModes.Edit) {
       return;
@@ -550,6 +578,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -562,27 +591,32 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    ref: handleRef,
-    className: (0, _clsx.default)(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
-  }));
+  const ariaV7 = rootProps.experimentalFeatures?.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+      ref: handleRef,
+      className: (0, _clsx.default)(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.default.any
   }),
   height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
+  isNotVisible: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onDragEnter: _propTypes.default.func,

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -51,6 +51,8 @@ const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnH
     ref: ref,
     className: (0, _clsx.default)(className, classes.root),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    role: "presentation"
+  }));
 });
 exports.GridBaseColumnHeaders = GridBaseColumnHeaders;

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -83,10 +83,12 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,
-      draggable: isDraggable
+      draggable: isDraggable,
+      role: "presentation"
     }, draggableContainerProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.titleContainer,
+        role: "presentation",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: classes.titleContainerContent,
           children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {

package/node/components/containers/GridMainContainer.js

@@ -1,14 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridMainContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,11 +38,15 @@ const GridMainContainerRoot = (0, _system.styled)('div', {
 const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMainContainerRoot, {
+  const getAriaAttributes = rootProps.experimentalFeatures?.ariaV7 // ariaV7 should never change
+  ? _useGridAriaAttributes.useGridAriaAttributes : null;
+  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMainContainerRoot, (0, _extends2.default)({
     ref: ref,
     className: classes.root,
-    ownerState: rootProps,
+    ownerState: rootProps
+  }, ariaAttributes, {
     children: props.children
-  });
+  }));
 });
 exports.GridMainContainer = GridMainContainer;

package/node/components/containers/GridRoot.js

@@ -12,14 +12,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _GridRootStyles = require("./GridRootStyles");
-var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
-var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
-var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
+var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -43,13 +41,12 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
-  const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
   const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
-  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(rootContainerRef, ref);
-  const pinnedRowsCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const getAriaAttributes = rootProps.experimentalFeatures?.ariaV7 // ariaV7 should never change
+  ? null : _useGridAriaAttributes.useGridAriaAttributes;
+  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
   const ownerState = (0, _extends2.default)({}, rootProps, {
     density: densityValue
   });
@@ -69,12 +66,8 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(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/node/components/containers/GridRootStyles.js

@@ -166,6 +166,7 @@ const GridRootStyles = (0, _styles.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})` : (0, _styles.alpha)(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--DataGrid-cellOffsetMultiplier': 2,
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -141,7 +141,7 @@ const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
         computedWidth = 0;
         flexColumns.push(newColumn);
       } else {
-        computedWidth = (0, _utils.clamp)(newColumn.width, newColumn.minWidth, newColumn.maxWidth);
+        computedWidth = (0, _utils.clamp)(newColumn.width || _colDef.GRID_STRING_COL_DEF.width, newColumn.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
       }
       widthAllocatedBeforeFlex += computedWidth;
       newColumn.computedWidth = computedWidth;

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

@@ -254,7 +254,7 @@ const useGridRowSelection = (apiRef, props) => {
     }
     if (field) {
       const column = apiRef.current.getColumn(field);
-      if (column.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
+      if (column?.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }

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

@@ -110,9 +110,33 @@ const useGridVirtualScroller = props => {
   const rowStyleCache = React.useRef(Object.create(null));
   const prevGetRowProps = React.useRef();
   const prevRootRowStyle = React.useRef();
-  const getRenderedColumnsRef = React.useRef((0, _reselect.defaultMemoize)((columns, firstColumnToRender, lastColumnToRender) => {
-    return columns.slice(firstColumnToRender, lastColumnToRender);
+  const getRenderedColumnsRef = React.useRef((0, _reselect.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 => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
     let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
@@ -319,6 +343,12 @@ const useGridVirtualScroller = props => {
   const handleTouchMove = (0, _utils.unstable_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
   }) => {
@@ -369,6 +399,28 @@ 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,
@@ -383,7 +435,14 @@ 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?.row || {},
       {
         style: rootRowStyle
@@ -399,7 +458,8 @@ 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) {
@@ -411,6 +471,8 @@ 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);
@@ -428,10 +490,12 @@ const useGridVirtualScroller = props => {
       rows.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
         rowId: id,
+        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
+        isNotVisible: isRowNotVisible,
         rowHeight: baseRowHeight,
         focusedCell: focusedCell,
         tabbableCell: tabbableCell,
-        renderedColumns: renderedColumns,
+        renderedColumns: renderedColumnsWithFocusedCell,
         visibleColumns: visibleColumns,
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
@@ -498,15 +562,18 @@ const useGridVirtualScroller = props => {
       onWheel: handleWheel,
       onTouchMove: handleTouchMove
     }, inputProps, {
-      style: inputProps.style ? (0, _extends2.default)({}, inputProps.style, rootStyle) : rootStyle
+      style: inputProps.style ? (0, _extends2.default)({}, inputProps.style, rootStyle) : rootStyle,
+      role: 'presentation'
     }),
     getContentProps: ({
       style
     } = {}) => ({
-      style: style ? (0, _extends2.default)({}, style, contentSize) : contentSize
+      style: style ? (0, _extends2.default)({}, style, contentSize) : contentSize,
+      role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef
+      ref: renderZoneRef,
+      role: 'rowgroup'
     })
   };
 };

package/node/hooks/utils/useGridAriaAttributes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridAriaAttributes = void 0;
+var _gridColumnsSelector = require("../features/columns/gridColumnsSelector");
+var _useGridSelector = require("./useGridSelector");
+var _useGridRootProps = require("./useGridRootProps");
+var _gridColumnGroupsSelector = require("../features/columnGrouping/gridColumnGroupsSelector");
+var _gridRowsSelector = require("../features/rows/gridRowsSelector");
+var _useGridPrivateApiContext = require("./useGridPrivateApiContext");
+const useGridAriaAttributes = () => {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
+  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  const pinnedRowsCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  let role = 'grid';
+  if (rootProps.experimentalFeatures?.ariaV7 && rootProps.treeData) {
+    role = 'treegrid';
+  }
+  return {
+    role,
+    'aria-colcount': visibleColumns.length,
+    'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
+    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+  };
+};
+exports.useGridAriaAttributes = useGridAriaAttributes;

package/node/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/node/internals/index.js

@@ -52,6 +52,7 @@ var _exportNames = {
   getTreeNodeDescendants: true,
   buildRootGroup: true,
   getRowIdFromRowModel: true,
+  GRID_ID_AUTOGENERATED: true,
   calculatePinnedRowsHeight: true,
   useGridRowsMeta: true,
   rowsMetaStateInitializer: true,
@@ -104,6 +105,12 @@ Object.defineProperty(exports, "GRID_DEFAULT_STRATEGY", {
     return _strategyProcessing.GRID_DEFAULT_STRATEGY;
   }
 });
+Object.defineProperty(exports, "GRID_ID_AUTOGENERATED", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.GRID_ID_AUTOGENERATED;
+  }
+});
 Object.defineProperty(exports, "GridBaseColumnHeaders", {
   enumerable: true,
   get: function () {