@mui/x-data-grid-pro 7.12.1 → 7.14.0

package/hooks/features/rows/useGridRowAriaAttributes.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRowAriaAttributes = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useGridRowAriaAttributes = addTreeDataAttributes => {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const props = (0, _useGridRootProps.useGridRootProps)();
+  const getRowAriaAttributesCommunity = (0, _internals.useGridRowAriaAttributes)();
+  const filteredTopLevelRowCount = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilteredTopLevelRowCountSelector);
+  const filteredChildrenCountLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridFilteredChildrenCountLookupSelector);
+  const sortedVisibleRowPositionsLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridExpandedSortedRowTreeLevelPositionLookupSelector);
+  return React.useCallback((rowNode, index) => {
+    const ariaAttributes = getRowAriaAttributesCommunity(rowNode, index);
+    if (rowNode === null || !(props.treeData || addTreeDataAttributes)) {
+      return ariaAttributes;
+    }
+
+    // pinned and footer rows are not part of the rowgroup and should not get the set specific aria attributes
+    if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
+      return ariaAttributes;
+    }
+    ariaAttributes['aria-level'] = rowNode.depth + 1;
+    const filteredChildrenCount = filteredChildrenCountLookup[rowNode.id] ?? 0;
+    // aria-expanded should only be added to the rows that contain children
+    if (rowNode.type === 'group' && filteredChildrenCount > 0) {
+      ariaAttributes['aria-expanded'] = Boolean(rowNode.childrenExpanded);
+    }
+
+    // if the parent is null, set size and position cannot be determined
+    if (rowNode.parent !== null) {
+      ariaAttributes['aria-setsize'] = rowNode.parent === _xDataGrid.GRID_ROOT_GROUP_ID ? filteredTopLevelRowCount : filteredChildrenCountLookup[rowNode.parent];
+      ariaAttributes['aria-posinset'] = sortedVisibleRowPositionsLookup[rowNode.id];
+    }
+    return ariaAttributes;
+  }, [props.treeData, addTreeDataAttributes, filteredTopLevelRowCount, filteredChildrenCountLookup, sortedVisibleRowPositionsLookup, getRowAriaAttributesCommunity]);
+};
+exports.useGridRowAriaAttributes = useGridRowAriaAttributes;

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -92,7 +92,7 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
           key,
           field: null
         })),
-        hasServerChildren: !!count && count !== 0
+        serverChildrenCount: count
       };
     };
     const onDuplicatePath = (firstId, secondId, path) => {

package/hooks/features/serverSideTreeData/utils.d.ts

@@ -1,6 +1,7 @@
 import { GridRowId, GridRowTreeConfig } from '@mui/x-data-grid';
 export declare function skipFiltering(rowTree: GridRowTreeConfig): {
     filteredRowsLookup: Record<GridRowId, boolean>;
+    filteredChildrenCountLookup: Record<GridRowId, number>;
     filteredDescendantCountLookup: Record<GridRowId, number>;
 };
 export declare function skipSorting(rowTree: GridRowTreeConfig): GridRowId[];

package/hooks/features/serverSideTreeData/utils.js

@@ -9,14 +9,17 @@ var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 function skipFiltering(rowTree) {
   const filteredRowsLookup = {};
+  const filteredChildrenCountLookup = {};
   const filteredDescendantCountLookup = {};
   const nodes = Object.values(rowTree);
   for (let i = 0; i < nodes.length; i += 1) {
     const node = nodes[i];
     filteredRowsLookup[node.id] = true;
+    filteredChildrenCountLookup[node.id] = node.serverChildrenCount ?? 0;
   }
   return {
     filteredRowsLookup,
+    filteredChildrenCountLookup,
     filteredDescendantCountLookup
   };
 }

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -20,6 +20,7 @@ const filterRowTreeFromTreeData = params => {
     isRowMatchingFilters
   } = params;
   const filteredRowsLookup = {};
+  const filteredChildrenCountLookup = {};
   const filteredDescendantCountLookup = {};
   const filterCache = {};
   const filterResults = {
@@ -38,12 +39,16 @@ const filterRowTreeFromTreeData = params => {
       isRowMatchingFilters(row, undefined, filterResults);
       isMatchingFilters = (0, _internals.passFilterLogic)([filterResults.passingFilterItems], [filterResults.passingQuickFilterValues], params.filterModel, params.apiRef, filterCache);
     }
+    let filteredChildrenCount = 0;
     let filteredDescendantCount = 0;
     if (node.type === 'group') {
       node.children.forEach(childId => {
         const childNode = rowTree[childId];
         const childSubTreeSize = filterTreeNode(childNode, isMatchingFilters ?? isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
         filteredDescendantCount += childSubTreeSize;
+        if (childSubTreeSize > 0) {
+          filteredChildrenCount += 1;
+        }
       });
     }
     let shouldPassFilters;
@@ -68,6 +73,7 @@ const filterRowTreeFromTreeData = params => {
     if (!shouldPassFilters) {
       return 0;
     }
+    filteredChildrenCountLookup[node.id] = filteredChildrenCount;
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
     if (node.type === 'footer') {
       return filteredDescendantCount;
@@ -83,6 +89,7 @@ const filterRowTreeFromTreeData = params => {
   }
   return {
     filteredRowsLookup,
+    filteredChildrenCountLookup,
     filteredDescendantCountLookup
   };
 };

package/hooks/utils/useGridAriaAttributes.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;

package/hooks/utils/useGridAriaAttributes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridAriaAttributes = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridRootProps = require("./useGridRootProps");
+const useGridAriaAttributes = () => {
+  const ariaAttributesCommunity = (0, _internals.useGridAriaAttributes)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ariaAttributesPro = rootProps.treeData ? {
+    role: 'treegrid'
+  } : {};
+  return (0, _extends2.default)({}, ariaAttributesCommunity, ariaAttributesPro);
+};
+exports.useGridAriaAttributes = useGridAriaAttributes;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.12.1
+ * @mui/x-data-grid-pro v7.14.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/index.d.ts

@@ -2,6 +2,8 @@ export * from '@mui/x-data-grid/internals';
 export { GridColumnHeaders } from '../components/GridColumnHeaders';
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+export { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+export { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 export { useGridColumnPinning, columnPinningStateInitializer, } from '../hooks/features/columnPinning/useGridColumnPinning';
 export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 export { useGridColumnReorder, columnReorderStateInitializer, } from '../hooks/features/columnReorder/useGridColumnReorder';

package/internals/index.js

@@ -7,6 +7,8 @@ var _exportNames = {
   GridColumnHeaders: true,
   DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: true,
   useGridColumnHeaders: true,
+  useGridAriaAttributes: true,
+  useGridRowAriaAttributes: true,
   useGridColumnPinning: true,
   columnPinningStateInitializer: true,
   useGridColumnPinningPreProcessors: true,
@@ -127,6 +129,12 @@ Object.defineProperty(exports, "updateRowTree", {
     return _updateRowTree.updateRowTree;
   }
 });
+Object.defineProperty(exports, "useGridAriaAttributes", {
+  enumerable: true,
+  get: function () {
+    return _useGridAriaAttributes.useGridAriaAttributes;
+  }
+});
 Object.defineProperty(exports, "useGridColumnHeaders", {
   enumerable: true,
   get: function () {
@@ -193,6 +201,12 @@ Object.defineProperty(exports, "useGridLazyLoaderPreProcessors", {
     return _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors;
   }
 });
+Object.defineProperty(exports, "useGridRowAriaAttributes", {
+  enumerable: true,
+  get: function () {
+    return _useGridRowAriaAttributes.useGridRowAriaAttributes;
+  }
+});
 Object.defineProperty(exports, "useGridRowPinning", {
   enumerable: true,
   get: function () {
@@ -244,6 +258,8 @@ Object.keys(_internals).forEach(function (key) {
 var _GridColumnHeaders = require("../components/GridColumnHeaders");
 var _dataGridProDefaultSlotsComponents = require("../constants/dataGridProDefaultSlotsComponents");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
+var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
+var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
 var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");
 var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");

package/models/dataGridProProps.d.ts

@@ -112,7 +112,7 @@ interface DataGridProRegularProps<R extends GridValidRowModel> {
      * @param {R} row The row from which we want the path.
      * @returns {string[]} The path to the row.
      */
-    getTreeDataPath?: (row: R) => string[];
+    getTreeDataPath?: (row: R) => readonly string[];
 }
 export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState' | 'componentsProps' | 'slotProps'>, DataGridProRegularProps<R>, DataGridProDataSourceProps, DataGridProSharedPropsWithoutDefaultValue {
     /**

package/modern/DataGridPro/DataGridPro.js

@@ -10,7 +10,15 @@ import { useDataGridProComponent } from './useDataGridProComponent';
 import { useDataGridProProps } from './useDataGridProProps';
 import { getReleaseInfo } from '../utils/releaseInfo';
 import { propValidatorsDataGridPro } from '../internals/propValidation';
+import { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+import { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const configuration = {
+  hooks: {
+    useGridAriaAttributes,
+    useGridRowAriaAttributes
+  }
+};
 const releaseInfo = getReleaseInfo();
 const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
@@ -21,6 +29,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
+    configuration: configuration,
     props: props,
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
@@ -412,7 +421,7 @@ DataGridProRaw.propTypes = {
   /**
    * Determines if a row can be selected.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {boolean} A boolean indicating if the cell is selectable.
+   * @returns {boolean} A boolean indicating if the row is selectable.
    */
   isRowSelectable: PropTypes.func,
   /**

package/modern/components/GridDataSourceTreeDataGroupingCell.js

@@ -4,9 +4,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
 import Badge from '@mui/material/Badge';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import { useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector } from '../hooks/features/dataSource/gridDataSourceSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -29,10 +31,8 @@ function GridTreeDataGroupingCellIcon(props) {
     field,
     descendantCount
   } = props;
-  const loadingSelector = state => state.dataSource.loading[id] ?? false;
-  const errorSelector = state => state.dataSource.errors[id];
-  const isDataLoading = useGridSelector(apiRef, loadingSelector);
-  const error = useGridSelector(apiRef, errorSelector);
+  const isDataLoading = useGridSelectorV8(apiRef, gridDataSourceLoadingIdSelector, id);
+  const error = useGridSelectorV8(apiRef, gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
       // always fetch/get from cache the children when the node is expanded

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -5,8 +5,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
-import { fastMemo, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
+import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';

package/modern/hooks/features/dataSource/gridDataSourceSelector.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector } from '@mui/x-data-grid';
-import { createSelector } from '@mui/x-data-grid/internals';
+import { createSelector, createSelectorV8 } from '@mui/x-data-grid/internals';
 const computeStartEnd = paginationModel => {
   const start = paginationModel.page * paginationModel.pageSize;
   const end = start + paginationModel.pageSize - 1;
@@ -21,4 +21,6 @@ export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector,
 });
 export const gridDataSourceStateSelector = state => state.dataSource;
 export const gridDataSourceLoadingSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.loading);
-export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);
+export const gridDataSourceLoadingIdSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id) => dataSource.loading[id] ?? false);
+export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);
+export const gridDataSourceErrorSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id) => dataSource.errors[id]);

package/modern/hooks/features/rows/index.js

@@ -0,0 +1 @@
+export * from './useGridRowAriaAttributes';

package/modern/hooks/features/rows/useGridRowAriaAttributes.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useGridSelector, gridFilteredTopLevelRowCountSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { useGridRowAriaAttributes as useGridRowAriaAttributesCommunity, gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from '@mui/x-data-grid/internals';
+import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+export const useGridRowAriaAttributes = addTreeDataAttributes => {
+  const apiRef = useGridPrivateApiContext();
+  const props = useGridRootProps();
+  const getRowAriaAttributesCommunity = useGridRowAriaAttributesCommunity();
+  const filteredTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  const filteredChildrenCountLookup = useGridSelector(apiRef, gridFilteredChildrenCountLookupSelector);
+  const sortedVisibleRowPositionsLookup = useGridSelector(apiRef, gridExpandedSortedRowTreeLevelPositionLookupSelector);
+  return React.useCallback((rowNode, index) => {
+    const ariaAttributes = getRowAriaAttributesCommunity(rowNode, index);
+    if (rowNode === null || !(props.treeData || addTreeDataAttributes)) {
+      return ariaAttributes;
+    }
+
+    // pinned and footer rows are not part of the rowgroup and should not get the set specific aria attributes
+    if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
+      return ariaAttributes;
+    }
+    ariaAttributes['aria-level'] = rowNode.depth + 1;
+    const filteredChildrenCount = filteredChildrenCountLookup[rowNode.id] ?? 0;
+    // aria-expanded should only be added to the rows that contain children
+    if (rowNode.type === 'group' && filteredChildrenCount > 0) {
+      ariaAttributes['aria-expanded'] = Boolean(rowNode.childrenExpanded);
+    }
+
+    // if the parent is null, set size and position cannot be determined
+    if (rowNode.parent !== null) {
+      ariaAttributes['aria-setsize'] = rowNode.parent === GRID_ROOT_GROUP_ID ? filteredTopLevelRowCount : filteredChildrenCountLookup[rowNode.parent];
+      ariaAttributes['aria-posinset'] = sortedVisibleRowPositionsLookup[rowNode.id];
+    }
+    return ariaAttributes;
+  }, [props.treeData, addTreeDataAttributes, filteredTopLevelRowCount, filteredChildrenCountLookup, sortedVisibleRowPositionsLookup, getRowAriaAttributesCommunity]);
+};

package/modern/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -83,7 +83,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
           key,
           field: null
         })),
-        hasServerChildren: !!count && count !== 0
+        serverChildrenCount: count
       };
     };
     const onDuplicatePath = (firstId, secondId, path) => {

package/modern/hooks/features/serverSideTreeData/utils.js

@@ -2,14 +2,17 @@ import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 import { getTreeNodeDescendants } from '@mui/x-data-grid/internals';
 export function skipFiltering(rowTree) {
   const filteredRowsLookup = {};
+  const filteredChildrenCountLookup = {};
   const filteredDescendantCountLookup = {};
   const nodes = Object.values(rowTree);
   for (let i = 0; i < nodes.length; i += 1) {
     const node = nodes[i];
     filteredRowsLookup[node.id] = true;
+    filteredChildrenCountLookup[node.id] = node.serverChildrenCount ?? 0;
   }
   return {
     filteredRowsLookup,
+    filteredChildrenCountLookup,
     filteredDescendantCountLookup
   };
 }

package/modern/hooks/features/treeData/gridTreeDataUtils.js

@@ -14,6 +14,7 @@ export const filterRowTreeFromTreeData = params => {
     isRowMatchingFilters
   } = params;
   const filteredRowsLookup = {};
+  const filteredChildrenCountLookup = {};
   const filteredDescendantCountLookup = {};
   const filterCache = {};
   const filterResults = {
@@ -32,12 +33,16 @@ export const filterRowTreeFromTreeData = params => {
       isRowMatchingFilters(row, undefined, filterResults);
       isMatchingFilters = passFilterLogic([filterResults.passingFilterItems], [filterResults.passingQuickFilterValues], params.filterModel, params.apiRef, filterCache);
     }
+    let filteredChildrenCount = 0;
     let filteredDescendantCount = 0;
     if (node.type === 'group') {
       node.children.forEach(childId => {
         const childNode = rowTree[childId];
         const childSubTreeSize = filterTreeNode(childNode, isMatchingFilters ?? isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
         filteredDescendantCount += childSubTreeSize;
+        if (childSubTreeSize > 0) {
+          filteredChildrenCount += 1;
+        }
       });
     }
     let shouldPassFilters;
@@ -62,6 +67,7 @@ export const filterRowTreeFromTreeData = params => {
     if (!shouldPassFilters) {
       return 0;
     }
+    filteredChildrenCountLookup[node.id] = filteredChildrenCount;
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
     if (node.type === 'footer') {
       return filteredDescendantCount;
@@ -77,6 +83,7 @@ export const filterRowTreeFromTreeData = params => {
   }
   return {
     filteredRowsLookup,
+    filteredChildrenCountLookup,
     filteredDescendantCountLookup
   };
 };

package/modern/hooks/utils/useGridAriaAttributes.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useGridAriaAttributes as useGridAriaAttributesCommunity } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from './useGridRootProps';
+export const useGridAriaAttributes = () => {
+  const ariaAttributesCommunity = useGridAriaAttributesCommunity();
+  const rootProps = useGridRootProps();
+  const ariaAttributesPro = rootProps.treeData ? {
+    role: 'treegrid'
+  } : {};
+  return _extends({}, ariaAttributesCommunity, ariaAttributesPro);
+};

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.12.1
+ * @mui/x-data-grid-pro v7.14.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/index.js

@@ -3,8 +3,14 @@ export * from '@mui/x-data-grid/internals';
 export { GridColumnHeaders } from '../components/GridColumnHeaders';
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 
-// eslint-disable-next-line import/export
+/* eslint-disable import/export --
+ * x-data-grid-pro internals that are overriding the x-data-grid internals
+ */
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+export { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+export { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
+// eslint-enable import/export
+
 export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 export { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzE1NDQwMDAwMA==";
+  const releaseInfo = "MTcyNDM2MDQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/utils/tree/createRowTree.js

@@ -19,7 +19,7 @@ export const createRowTree = params => {
       previousTree: params.previousTree,
       id: node.id,
       path: node.path,
-      hasServerChildren: node.hasServerChildren,
+      serverChildrenCount: node.serverChildrenCount,
       onDuplicatePath: params.onDuplicatePath,
       treeDepths,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,

package/modern/utils/tree/insertDataRowInTree.js

@@ -16,7 +16,7 @@ export const insertDataRowInTree = ({
   onDuplicatePath,
   isGroupExpandedByDefault,
   defaultGroupingExpansionDepth,
-  hasServerChildren,
+  serverChildrenCount,
   groupsToFetch
 }) => {
   let parentNodeId = GRID_ROOT_GROUP_ID;
@@ -36,7 +36,7 @@ export const insertDataRowInTree = ({
       // We create a leaf node for the data row.
       if (existingNodeIdWithPartialPath == null) {
         let node;
-        if (hasServerChildren) {
+        if (serverChildrenCount !== undefined && serverChildrenCount !== 0) {
           node = {
             type: 'group',
             id,
@@ -49,7 +49,7 @@ export const insertDataRowInTree = ({
             children: [],
             childrenFromPath: {},
             childrenExpanded: false,
-            hasServerChildren: true
+            serverChildrenCount
           };
           const shouldFetchChildren = checkGroupChildrenExpansion(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault);
           if (shouldFetchChildren) {

package/modern/utils/tree/updateRowTree.js

@@ -13,7 +13,7 @@ export const updateRowTree = params => {
     const {
       id,
       path,
-      hasServerChildren
+      serverChildrenCount
     } = params.nodes.inserted[i];
     insertDataRowInTree({
       previousTree: params.previousTree,
@@ -22,7 +22,7 @@ export const updateRowTree = params => {
       updatedGroupsManager,
       id,
       path,
-      hasServerChildren,
+      serverChildrenCount,
       onDuplicatePath: params.onDuplicatePath,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,
       defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,
@@ -42,7 +42,7 @@ export const updateRowTree = params => {
     const {
       id,
       path,
-      hasServerChildren
+      serverChildrenCount
     } = params.nodes.modified[i];
     const pathInPreviousTree = getNodePathInTree({
       tree,
@@ -63,7 +63,7 @@ export const updateRowTree = params => {
         updatedGroupsManager,
         id,
         path,
-        hasServerChildren,
+        serverChildrenCount,
         onDuplicatePath: params.onDuplicatePath,
         isGroupExpandedByDefault: params.isGroupExpandedByDefault,
         defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.12.1",
+  "version": "7.14.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -34,15 +34,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
+    "@mui/system": "^5.16.7",
+    "@mui/utils": "^5.16.6",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-data-grid": "7.12.1",
-    "@mui/x-internals": "7.12.0",
-    "@mui/x-license": "7.12.0"
+    "@mui/x-data-grid": "7.14.0",
+    "@mui/x-internals": "7.14.0",
+    "@mui/x-license": "7.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzE1NDQwMDAwMA==";
+  const releaseInfo = "MTcyNDM2MDQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/utils/tree/createRowTree.js

@@ -25,7 +25,7 @@ const createRowTree = params => {
       previousTree: params.previousTree,
       id: node.id,
       path: node.path,
-      hasServerChildren: node.hasServerChildren,
+      serverChildrenCount: node.serverChildrenCount,
       onDuplicatePath: params.onDuplicatePath,
       treeDepths,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,

package/utils/tree/insertDataRowInTree.d.ts

@@ -44,7 +44,7 @@ interface InsertDataRowInTreeParams {
     onDuplicatePath?: GridTreePathDuplicateHandler;
     isGroupExpandedByDefault?: DataGridProProps['isGroupExpandedByDefault'];
     defaultGroupingExpansionDepth: number;
-    hasServerChildren?: boolean;
+    serverChildrenCount?: number;
     groupsToFetch?: Set<GridRowId>;
 }
 /**
@@ -53,5 +53,5 @@ interface InsertDataRowInTreeParams {
  * - if a node exists with the same partial path, it will register this node as the ancestor of the data row.
  * - if not, it will create an auto-generated node and register it as ancestor of the data row.
  */
-export declare const insertDataRowInTree: ({ id, path, updatedGroupsManager, previousTree, tree, treeDepths, onDuplicatePath, isGroupExpandedByDefault, defaultGroupingExpansionDepth, hasServerChildren, groupsToFetch, }: InsertDataRowInTreeParams) => void;
+export declare const insertDataRowInTree: ({ id, path, updatedGroupsManager, previousTree, tree, treeDepths, onDuplicatePath, isGroupExpandedByDefault, defaultGroupingExpansionDepth, serverChildrenCount, groupsToFetch, }: InsertDataRowInTreeParams) => void;
 export {};

package/utils/tree/insertDataRowInTree.js

@@ -22,7 +22,7 @@ const insertDataRowInTree = ({
   onDuplicatePath,
   isGroupExpandedByDefault,
   defaultGroupingExpansionDepth,
-  hasServerChildren,
+  serverChildrenCount,
   groupsToFetch
 }) => {
   let parentNodeId = _xDataGrid.GRID_ROOT_GROUP_ID;
@@ -42,7 +42,7 @@ const insertDataRowInTree = ({
       // We create a leaf node for the data row.
       if (existingNodeIdWithPartialPath == null) {
         let node;
-        if (hasServerChildren) {
+        if (serverChildrenCount !== undefined && serverChildrenCount !== 0) {
           node = {
             type: 'group',
             id,
@@ -55,7 +55,7 @@ const insertDataRowInTree = ({
             children: [],
             childrenFromPath: {},
             childrenExpanded: false,
-            hasServerChildren: true
+            serverChildrenCount
           };
           const shouldFetchChildren = (0, _utils.checkGroupChildrenExpansion)(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault);
           if (shouldFetchChildren) {