@mui/x-data-grid 6.10.2 → 6.11.0

package/locales/fiFI.js

@@ -37,7 +37,7 @@ const fiFIGrid = {
   columnsPanelHideAllButton: 'Piilota kaikki',
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Poista kaikki',
   filterPanelDeleteIconLabel: 'Poista',
   filterPanelLogicOperator: 'Logiikkaoperaattori',
   filterPanelOperator: 'Operaattorit',
@@ -48,7 +48,7 @@ const fiFIGrid = {
   filterPanelInputPlaceholder: 'Suodattimen arvo',
   // Filter operators text
   filterOperatorContains: 'sisältää',
-  filterOperatorEquals: 'on yhtä suuri',
+  filterOperatorEquals: 'on yhtä suuri kuin',
   filterOperatorStartsWith: 'alkaa',
   filterOperatorEndsWith: 'päättyy',
   filterOperatorIs: 'on',
@@ -59,35 +59,33 @@ const fiFIGrid = {
   filterOperatorOnOrBefore: 'on sama tai ennen',
   filterOperatorIsEmpty: 'on tyhjä',
   filterOperatorIsNotEmpty: 'ei ole tyhjä',
-  filterOperatorIsAnyOf: 'mikä tahansa seuraavista',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  filterOperatorIsAnyOf: 'on mikä tahansa seuraavista',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Sisältää',
+  headerFilterOperatorEquals: 'On yhtä suuri kuin',
+  headerFilterOperatorStartsWith: 'Alkaa',
+  headerFilterOperatorEndsWith: 'Päättyy',
+  headerFilterOperatorIs: 'On',
+  headerFilterOperatorNot: 'Ei ole',
+  headerFilterOperatorAfter: 'On jälkeen',
+  headerFilterOperatorOnOrAfter: 'On sama tai jälkeen',
+  headerFilterOperatorBefore: 'On ennen',
+  headerFilterOperatorOnOrBefore: 'On sama tai ennen',
+  headerFilterOperatorIsEmpty: 'On tyhjä',
+  headerFilterOperatorIsNotEmpty: 'Ei ole tyhjä',
+  headerFilterOperatorIsAnyOf: 'On mikä tahansa seuraavista',
+  'headerFilterOperator=': 'On yhtä suuri kuin',
+  'headerFilterOperator!=': 'Ei ole yhtä suuri kuin',
+  'headerFilterOperator>': 'Enemmän kuin',
+  'headerFilterOperator>=': 'Enemmän tai yhtä paljon kuin',
+  'headerFilterOperator<': 'Vähemmän kuin',
+  'headerFilterOperator<=': 'Vähemmän tai yhtä paljon kuin',
   // Filter values text
   filterValueAny: 'mikä tahansa',
   filterValueTrue: 'tosi',

package/locales/heIL.js

@@ -68,26 +68,25 @@ const heILGrid = {
   // 'filterOperator<=': '<=',
 
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'מכיל',
+  headerFilterOperatorEquals: 'שווה',
+  headerFilterOperatorStartsWith: 'מתחיל ב-',
+  headerFilterOperatorEndsWith: 'נגמר ב-',
+  headerFilterOperatorIs: 'הינו',
+  headerFilterOperatorNot: 'אינו',
+  headerFilterOperatorAfter: 'אחרי',
+  headerFilterOperatorOnOrAfter: 'ב- או אחרי',
+  headerFilterOperatorBefore: 'לפני',
+  headerFilterOperatorOnOrBefore: 'ב- או לפני',
+  headerFilterOperatorIsEmpty: 'ריק',
+  headerFilterOperatorIsNotEmpty: 'אינו ריק',
+  headerFilterOperatorIsAnyOf: 'הוא אחד מ-',
+  'headerFilterOperator=': 'שווה',
+  'headerFilterOperator!=': 'אינו שווה',
+  'headerFilterOperator>': 'גדול מ-',
+  'headerFilterOperator>=': 'גדול שווה ל-',
+  'headerFilterOperator<': 'קטן מ-',
+  'headerFilterOperator<=': 'קטן שווה ל-',
   // Filter values text
   filterValueAny: 'כל ערך',
   filterValueTrue: 'כן',
@@ -140,15 +139,13 @@ const heILGrid = {
   expandDetailPanel: 'הרחב',
   collapseDetailPanel: 'כווץ',
   // Row reordering text
-  rowReorderingHeaderName: 'סידור שורות'
-
+  rowReorderingHeaderName: 'סידור שורות',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'צבירה',
+  aggregationFunctionLabelSum: 'סכום',
+  aggregationFunctionLabelAvg: 'ממוצע',
+  aggregationFunctionLabelMin: 'מינימום',
+  aggregationFunctionLabelMax: 'מקסימום',
+  aggregationFunctionLabelSize: 'גודל'
 };
-
 export const heIL = getGridLocalization(heILGrid, heILCore);

package/locales/itIT.js

@@ -37,7 +37,7 @@ const itITGrid = {
   columnsPanelHideAllButton: 'Nascondi tutto',
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Rimuovi filtri',
   filterPanelDeleteIconLabel: 'Rimuovi',
   filterPanelLogicOperator: 'Operatore logico',
   filterPanelOperator: 'Operatori',
@@ -60,34 +60,32 @@ const itITGrid = {
   filterOperatorIsEmpty: 'è vuoto',
   filterOperatorIsNotEmpty: 'non è vuoto',
   filterOperatorIsAnyOf: 'è uno tra',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'Contiene',
+  headerFilterOperatorEquals: 'uguale a',
+  headerFilterOperatorStartsWith: 'comincia per',
+  headerFilterOperatorEndsWith: 'termina per',
+  headerFilterOperatorIs: 'uguale a',
+  headerFilterOperatorNot: 'diversa da',
+  headerFilterOperatorAfter: 'dopo il',
+  headerFilterOperatorOnOrAfter: 'a partire dal',
+  headerFilterOperatorBefore: 'prima del',
+  headerFilterOperatorOnOrBefore: 'fino al',
+  headerFilterOperatorIsEmpty: 'è vuoto',
+  headerFilterOperatorIsNotEmpty: 'non è vuoto',
+  headerFilterOperatorIsAnyOf: 'è uno tra',
+  'headerFilterOperator=': 'uguale a',
+  'headerFilterOperator!=': 'diverso da',
+  'headerFilterOperator>': 'maggiore di',
+  'headerFilterOperator>=': 'maggiore o uguale a',
+  'headerFilterOperator<': 'minore di',
+  'headerFilterOperator<=': 'minore o uguale a',
   // Filter values text
   filterValueAny: 'qualunque',
   filterValueTrue: 'vero',
@@ -95,7 +93,7 @@ const itITGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Mostra le colonne',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Gestisci colonne',
   columnMenuFilter: 'Filtra',
   columnMenuHideColumn: 'Nascondi',
   columnMenuUnsort: "Annulla l'ordinamento",
@@ -139,15 +137,13 @@ const itITGrid = {
   expandDetailPanel: 'Espandi',
   collapseDetailPanel: 'Comprimi',
   // Row reordering text
-  rowReorderingHeaderName: 'Riordinamento righe'
-
+  rowReorderingHeaderName: 'Riordinamento righe',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'aggregazione',
+  aggregationFunctionLabelSum: 'somma',
+  aggregationFunctionLabelAvg: 'media',
+  aggregationFunctionLabelMin: 'minimo',
+  aggregationFunctionLabelMax: 'massimo',
+  aggregationFunctionLabelSize: 'numero di elementi'
 };
-
 export const itIT = getGridLocalization(itITGrid, itITCore);

package/models/gridFilterOperator.d.ts

@@ -38,7 +38,7 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
     /**
      * The callback that generates a filtering function for a given filter item and column.
      * This function can return `null` to skip filtering for this item and column.
-     * This function uses the more performant V7 API.
+     * This function uses the more performant v7 API.
      * @param {GridFilterItem} filterItem The filter item with which we want to filter the column.
      * @param {GridColDef} column The column from which we want to filter the rows.
      * @returns {null | ApplyFilterFnV7} The function to call to check if a row pass this filter item or not.

package/models/props/DataGridProps.d.ts

@@ -35,6 +35,12 @@ export interface GridExperimentalFeatures {
      * Only works if NODE_ENV=test.
      */
     warnIfFocusStateIsNotSynced: boolean;
+    /**
+     * Enables accessibility improvements that will be enabled by default in v7.
+     * If you rely on the v6 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
+     * @default false
+     */
+    ariaV7: boolean;
 }
 /**
  * The props users can give to the `DataGrid` component.
@@ -391,7 +397,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * 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?: (params: GridRowParams<R>) => React.ReactNode;
     /**

package/modern/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/modern/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/modern/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';
@@ -286,6 +285,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     children = /*#__PURE__*/_jsx("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -298,27 +298,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.experimentalFeatures?.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 = {
@@ -563,6 +568,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     children = /*#__PURE__*/_jsx("div", {
       className: classes.content,
       title: valueString,
+      role: "presentation",
       children: valueString
     });
   }
@@ -575,27 +581,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.experimentalFeatures?.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/modern/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/modern/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/modern/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 {
@@ -27,10 +29,14 @@ const GridMainContainerRoot = styled('div', {
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  return /*#__PURE__*/_jsx(GridMainContainerRoot, {
+  const getAriaAttributes = rootProps.experimentalFeatures?.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/modern/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 {
@@ -34,13 +32,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.experimentalFeatures?.ariaV7 // ariaV7 should never change
+  ? null : useGridAriaAttributes;
+  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
   const ownerState = _extends({}, rootProps, {
     density: densityValue
   });
@@ -60,12 +57,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/modern/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/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -549,15 +549,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/modern/hooks/utils/useGridAriaAttributes.js

@@ -0,0 +1,24 @@
+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 = () => {
+  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.experimentalFeatures?.ariaV7 && rootProps.treeData) {
+    role = 'treegrid';
+  }
+  return {
+    role,
+    'aria-colcount': visibleColumns.length,
+    'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
+    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+  };
+};

package/modern/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