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

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.13.0
+
+_Aug 16, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow to [edit the label](https://mui.com/x/react-tree-view/rich-tree-view/editing/) of Tree View's items.
+
+  <img width="344" src="https://github.com/user-attachments/assets/1a6cf765-2dc8-4906-bd93-139086eed148" alt="Item label editing" />
+
+- 🔧 Improve rows accessibility on the Data Grid features "Tree Data" and "Row Grouping". Certain "Row Grouping" accessibility updates will only be applied if experimental feature flag is enabled. See the [documentation](https://mui.com/x/react-data-grid/row-grouping/#accessibility-changes-in-v8) for more information.
+- 🌍 Improve Vietnamese (vi-VN) locale on the Data Grid
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.13.0`
+
+- [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
+- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
+- [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
+- [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
+
+#### `@mui/x-data-grid-pro@7.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.13.0`, plus:
+
+- [DataGridPro] Fix Tree Data and Row Grouping rows accessibility (#13623) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.13.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.13.0`
+
+- [pickers] Fix date and time merging to retain milliseconds (#14173) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.13.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.13.0`
+
+- [charts] Add `baseline` property to the `LineChart` `series` (#14153) @JCQuintas
+- [charts] Fix issue where tooltip would disappear on mouse click (#14187) @alexfauquette
+- [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
+- [charts] Support axis with the same value for all data points (#14191) @alexfauquette
+
+#### `@mui/x-date-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.13.0`
+
+- [TreeView] Add label editing feature (#13388) @noraleonte
+- [TreeView] Fix the parameters passed for the `canMoveItemToNewPosition` prop (#14176) @flaviendelangle
+
+### Docs
+
+- [docs] Extract dataset in the Line chart docs (#14034) @alexfauquette
+- [docs] Remove redundant encoding in the mock data source server (#14185) @MBilalShafi
+- [docs] Use Netflix financial results to document bar charts (#13991) @alexfauquette
+- [docs] Remove relience of abbreviations (#14226) @oliviertassinari
+
+### Core
+
+- [core] Bump monorepo (#14141) @Janpot
+- [core] Fix ESLint issue (#14207) @LukasTy
+- [core] Fix Netlify build cache issue (#14182) @cherniavskii
+- [code-infra] Refactor Netlify `cache-docs` plugin setup (#14105) @LukasTy
+- [internals] Move utils needed for tree view virtualization to shared package (#14202) @flaviendelangle
+
 ## 7.12.1
 
 _Aug 8, 2024_

package/DataGridPro/DataGridPro.js

@@ -16,9 +16,17 @@ var _useDataGridProComponent = require("./useDataGridProComponent");
 var _useDataGridProProps = require("./useDataGridProProps");
 var _releaseInfo = require("../utils/releaseInfo");
 var _propValidation = require("../internals/propValidation");
+var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
+var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 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 configuration = {
+  hooks: {
+    useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
+    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
+  }
+};
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
@@ -29,6 +37,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridContextProvider, {
     privateApiRef: privateApiRef,
+    configuration: configuration,
     props: props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGrid.GridRoot, (0, _extends2.default)({
       className: props.className,
@@ -420,7 +429,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.default.func,
   /**

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -282,4 +283,4 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
   width: _propTypes.default.number.isRequired
 } : void 0;
-const Memoized = exports.GridHeaderFilterCell = (0, _internals.fastMemo)(GridHeaderFilterCell);
+const Memoized = exports.GridHeaderFilterCell = (0, _fastMemo.fastMemo)(GridHeaderFilterCell);

package/esm/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/esm/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/esm/hooks/features/rows/index.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzE1NDQwMDAwMA==";
+  const releaseInfo = "MTcyMzc1NTYwMDAwMA==";
   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/esm/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/esm/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/esm/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/hooks/features/rows/index.d.ts

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

package/hooks/features/rows/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useGridRowAriaAttributes = require("./useGridRowAriaAttributes");
+Object.keys(_useGridRowAriaAttributes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRowAriaAttributes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRowAriaAttributes[key];
+    }
+  });
+});

package/hooks/features/rows/useGridRowAriaAttributes.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridTreeNode } from '@mui/x-data-grid';
+export declare const useGridRowAriaAttributes: (addTreeDataAttributes?: boolean) => (rowNode: GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;

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.13.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/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/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/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.13.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 = "MTcyMzc1NTYwMDAwMA==";
   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.13.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -40,9 +40,9 @@
     "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.13.0",
+    "@mui/x-internals": "7.13.0",
+    "@mui/x-license": "7.13.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 = "MTcyMzc1NTYwMDAwMA==";
   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) {

package/utils/tree/models.d.ts

@@ -6,7 +6,7 @@ export interface RowTreeBuilderGroupingCriterion {
 export interface RowTreeBuilderNode {
     id: GridRowId;
     path: RowTreeBuilderGroupingCriterion[];
-    hasServerChildren?: boolean;
+    serverChildrenCount?: number;
 }
 /**
  * Callback called when trying to insert a data row in the tree in place of an already existing data row.

package/utils/tree/updateRowTree.js

@@ -20,7 +20,7 @@ const updateRowTree = params => {
     const {
       id,
       path,
-      hasServerChildren
+      serverChildrenCount
     } = params.nodes.inserted[i];
     (0, _insertDataRowInTree.insertDataRowInTree)({
       previousTree: params.previousTree,
@@ -29,7 +29,7 @@ const updateRowTree = params => {
       updatedGroupsManager,
       id,
       path,
-      hasServerChildren,
+      serverChildrenCount,
       onDuplicatePath: params.onDuplicatePath,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,
       defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,
@@ -49,7 +49,7 @@ const updateRowTree = params => {
     const {
       id,
       path,
-      hasServerChildren
+      serverChildrenCount
     } = params.nodes.modified[i];
     const pathInPreviousTree = (0, _utils.getNodePathInTree)({
       tree,
@@ -70,7 +70,7 @@ const updateRowTree = params => {
         updatedGroupsManager,
         id,
         path,
-        hasServerChildren,
+        serverChildrenCount,
         onDuplicatePath: params.onDuplicatePath,
         isGroupExpandedByDefault: params.isGroupExpandedByDefault,
         defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,