@mui/x-data-grid 6.10.2 → 6.11.0

package/CHANGELOG.md

@@ -3,6 +3,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.11.0
+
+_Aug 4, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⌚️ Move the tree view component from `@mui/lab` package
+
+  The `<TreeView />` component has been moved to the MUI X repository.
+  It is now accessible from its own package: `@mui/x-tree-view`.
+
+- 🌍 Improve Hebrew (he-IL), Finnish (fi-FI), and Italian (it-IT) locales on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.11.0`
+
+- [DataGrid] Add `ariaV7` experimental flag (#9496) @cherniavskii
+- [DataGrid] Fix cell size when column width is set to `undefined` (#9871) @gitstart
+- [l10n] Improve Hebrew (he-IL) locale (#9820) @itayG98
+- [l10n] Improve Finnish (fi-FI) locale (#9848) @sambbaahh
+- [l10n] Improve Italian (it-IT) locale (#9627) @fabio-rizzello-omnia
+
+#### `@mui/x-data-grid-pro@v6.11.0` [![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.11.0`.
+
+#### `@mui/x-data-grid-premium@v6.11.0` [![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.11.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.11.0`
+
+- [fields] Correctly handle events with a complete value insertion (#9896) @LukasTy
+- [fields] Fix hours editing on dayjs with timezone and DST (#9901) @flaviendelangle
+- [fields] Fix section clearing with timezone (#9819) @flaviendelangle
+- [pickers] Add `CalendarHeader` slot (#7784) @flaviendelangle
+- [pickers] Allow to override the `InputProps` of the `TextField` using the `slotProps` (#9849) @flaviendelangle
+- [pickers] Allow to override the opening aria text using the `localeText` prop on the pickers (#9870) @flaviendelangle
+- [pickers] Fix `sx` and `className` props on `MobileDateRangePicker` (#9853) @flaviendelangle
+- [pickers] Fix default descriptions (#9887) @LukasTy
+- [pickers] Fix offset management on dayjs adapter (#9884) @flaviendelangle
+- [pickers] Use device motion reduction preference (#9823) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.11.0` [![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.11.0`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.6`
+
+- [charts] Add TS definition to the exported elements (#9885) @alexfauquette
+- [charts] Add sparkline (#9662) @alexfauquette
+- [charts] Fix missing configuration types (#9886) @alexfauquette
+- [charts] Introduce dataset to simplify plot of data from API (#9774) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.0`
+
+- [TreeView] Add missing exported types (#9862) @flaviendelangle
+- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
+- [TreeView] Create the package on the X repository (#9798) @flaviendelangle
+- [TreeView] Improve props typing (#9855) @flaviendelangle
+
+### Docs
+
+- [docs] Add Tree View doc (#9825) @flaviendelangle
+- [docs] Add charts nav item (#9821) @LukasTy
+- [docs] Add charts to MUI X introduction pages (#9704) @joserodolfofreitas
+- [docs] Add example for avoiding picker views layout shift (#9781) @noraleonte
+- [docs] Consistency of Next.js App Router @oliviertassinari
+- [docs] Fix API page regression: bring back slots section (#9866) @alexfauquette
+- [docs] Fix demo using Pro while it's MIT (#9842) @oliviertassinari
+- [docs] Get ready for next docs-infra change @oliviertassinari
+- [docs] Improve the slots documentation `Recommended usage` section (#9892) @flaviendelangle
+
+### Core
+
+- [core] Fix font loading issue dev-mode (#9843) @oliviertassinari
+- [core] Fix pipeline (#9894) @LukasTy
+- [core] Fix the link-check script on Windows (#9888) @alexfauquette
+- [core] Fix v7 capitalization (#9878) @oliviertassinari
+- [core] Regen doc (#9902) @flaviendelangle
+- [core] Remove benchmark package (#9413) @LukasTy
+- [core] Stop using the deprecated `JSX` global namespace (#9854) @flaviendelangle
+- [core] Update monorepo (#9846) @flaviendelangle
+- [core] Update tree data API docs (#9827) @cherniavskii
+- [test] Add pickers e2e tests (#9747) @LukasTy
+- [test] Data grid e2e tests follow-up (#9822) @cherniavskii
+
 ## 6.10.2
 
 _Jul 27, 2023_

package/DataGrid/DataGrid.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DataGridProps } from '../models/props/DataGridProps';
 import { GridValidRowModel } from '../models/gridRows';
 interface DataGridComponent {
-    <R extends GridValidRowModel = any>(props: DataGridProps<R> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+    <R extends GridValidRowModel = any>(props: DataGridProps<R> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
     propTypes?: any;
 }
 export declare const DataGrid: DataGridComponent;

package/DataGrid/DataGrid.js

@@ -161,6 +161,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    ariaV7: PropTypes.bool,
     columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
@@ -199,7 +200,7 @@ DataGridRaw.propTypes = {
   /**
    * Function that returns the element to render in row detail.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {JSX.Element} The row detail element.
+   * @returns {React.JSX.Element} The row detail element.
    */
   getDetailPanelContent: PropTypes.func,
   /**

package/colDef/utils.d.ts

@@ -10,7 +10,7 @@ export declare const GLOBAL_API_REF: {
 };
 /**
  * A tagger to determine if the filter is internal or custom user-supplied.
- * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * To be a valid internal filter, the v7 function *must* be defined/redefined at
  * the same time as the legacy one.
  * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
  */

package/colDef/utils.js

@@ -8,7 +8,7 @@ export const GLOBAL_API_REF = {
 
 /**
  * A tagger to determine if the filter is internal or custom user-supplied.
- * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * To be a valid internal filter, the v7 function *must* be defined/redefined at
  * the same time as the legacy one.
  * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
  */

package/components/cell/GridCell.js

@@ -4,7 +4,6 @@ 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", "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';
@@ -156,7 +155,7 @@ const GridCellWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(CellComponent, cellProps);
 });
 const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment;
+  var _rootProps$experiment, _rootProps$experiment2;
   const {
       align,
       children: childrenProp,
@@ -287,6 +286,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     children = /*#__PURE__*/_jsx("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -299,27 +299,32 @@ const GridCell = /*#__PURE__*/React.forwardRef((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
-  }));
+  const 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
+    }))
+  );
 });
 const MemoizedCellWrapper = fastMemo(GridCellWrapper);
 process.env.NODE_ENV !== "production" ? GridCellWrapper.propTypes = {
@@ -379,7 +384,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
 } : void 0;
 export { MemoizedCellWrapper as GridCellWrapper, GridCell };
 const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment2;
+  var _rootProps$experiment3, _rootProps$experiment4;
   const {
       column,
       rowId,
@@ -527,7 +532,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   let 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 = event => {
       const focusedCell = gridFocusCellSelector(apiRef);
       if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
@@ -565,6 +570,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     children = /*#__PURE__*/_jsx("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -577,27 +583,32 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((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
-  }));
+  const 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 --------------------------------

package/components/columnHeaders/GridBaseColumnHeaders.js

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

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -75,10 +75,12 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
   }, 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/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";
 const useUtilityClasses = ownerState => {
   const {
@@ -25,12 +27,17 @@ const GridMainContainerRoot = styled('div', {
   overflow: 'hidden'
 }));
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _rootProps$experiment;
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(GridMainContainerRoot, {
+  const getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? useGridAriaAttributes : null;
+  const 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/components/containers/GridRoot.js

@@ -6,14 +6,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";
 const useUtilityClasses = ownerState => {
   const {
@@ -27,6 +25,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+  var _rootProps$experiment;
   const rootProps = useGridRootProps();
   const {
       children,
@@ -34,13 +33,12 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
-  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? null : useGridAriaAttributes;
+  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
   const ownerState = _extends({}, rootProps, {
     density: densityValue
   });
@@ -60,12 +58,8 @@ const 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/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -40,7 +40,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         minFirstColumn: number;
         maxLastColumn: number;
     } | null;
-    getColumnGroupHeaders: (params?: GetHeadersParams) => JSX.Element[] | null;
+    getColumnGroupHeaders: (params?: GetHeadersParams) => React.JSX.Element[] | null;
     isDragging: boolean;
     getRootProps: (other?: {}) => {
         style: {

package/hooks/features/columns/gridColumnsUtils.js

@@ -1,5 +1,5 @@
 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';
@@ -127,7 +127,7 @@ export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
         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/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -33,15 +33,16 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
         rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
         rowIndexOffset?: number | undefined;
         onRowRender?: ((rowId: GridRowId) => void) | undefined;
-    }) => JSX.Element[] | null;
+    }) => React.JSX.Element[] | null;
     getRootProps: (inputProps?: {
         style?: object;
     }) => {
         style: React.CSSProperties;
+        role: string;
         ref: ((instance: HTMLDivElement | null) => void) | null;
-        onScroll: (event: React.UIEvent<Element, UIEvent>) => void;
-        onWheel: (event: React.WheelEvent<Element>) => void;
-        onTouchMove: (event: React.TouchEvent<Element>) => void;
+        onScroll: (event: React.UIEvent) => void;
+        onWheel: (event: React.WheelEvent) => void;
+        onTouchMove: (event: React.TouchEvent) => void;
     };
     getContentProps: ({ style }?: {
         style?: object | undefined;
@@ -51,9 +52,11 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             height: number;
             minHeight: string;
         };
+        role: string;
     };
     getRenderZoneProps: () => {
         ref: React.RefObject<HTMLDivElement>;
+        role: string;
     };
 };
 export {};

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -553,15 +553,18 @@ export const 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: ({
       style
     } = {}) => ({
-      style: style ? _extends({}, style, contentSize) : contentSize
+      style: style ? _extends({}, style, contentSize) : contentSize,
+      role: 'presentation'
     }),
     getRenderZoneProps: () => ({
-      ref: renderZoneRef
+      ref: renderZoneRef,
+      role: 'rowgroup'
     })
   };
 };

package/hooks/utils/useGridAriaAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare const useGridAriaAttributes: () => {
+    role: string;
+    'aria-colcount': number;
+    'aria-rowcount': number;
+    'aria-multiselectable': boolean;
+};

package/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 const useGridAriaAttributes = () => {
+  var _rootProps$experiment;
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  let role = 'grid';
+  if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 && rootProps.treeData) {
+    role = 'treegrid';
+  }
+  return {
+    role,
+    'aria-colcount': visibleColumns.length,
+    'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
+    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+  };
+};

package/index.js

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

package/legacy/DataGrid/DataGrid.js

@@ -163,6 +163,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    ariaV7: PropTypes.bool,
     columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
@@ -201,7 +202,7 @@ DataGridRaw.propTypes = {
   /**
    * Function that returns the element to render in row detail.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {JSX.Element} The row detail element.
+   * @returns {React.JSX.Element} The row detail element.
    */
   getDetailPanelContent: PropTypes.func,
   /**

package/legacy/colDef/utils.js

@@ -8,7 +8,7 @@ export var GLOBAL_API_REF = {
 
 /**
  * A tagger to determine if the filter is internal or custom user-supplied.
- * To be a valid internal filter, the V7 function *must* be defined/redefined at
+ * To be a valid internal filter, the v7 function *must* be defined/redefined at
  * the same time as the legacy one.
  * https://github.com/mui/mui-x/pull/9254#discussion_r1231095551
  */