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

package/CHANGELOG.md

@@ -3,6 +3,167 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.14.0
+
+_Aug 23, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow [filtering the axis on zoom](https://mui.com/x/react-charts/zoom-and-pan/#zoom-filtering), making the axis adapt by removing values outside the view.
+
+  <img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
+
+- 📊 Improve bar chart performances
+- 🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
+- 🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.14.0`
+
+- [DataGrid] Use readonly array result for `getTreeDataPath` (#11743) @pcorpet
+- [DataGrid] Use `event.key` for `Tab` and `Escape` keys (#14170) @k-rajat19
+- [DataGrid] Introduce selectors with arguments (#14236) @MBilalShafi
+- [DataGrid] include `api` in `gridCellParams` interface (#14201) @k-rajat19
+- [l10n] Improve Czech (cs-CZ) locale (#14135) @chirimiri22
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+
+#### `@mui/x-data-grid-pro@7.14.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.14.0`.
+
+#### `@mui/x-data-grid-premium@7.14.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.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working for a single cell on non-first page (#14261) @arminmeh
+- [DataGridPremium] Fix `onCellSelectionModelChange` not triggered when additional cell range is selected (#14199) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.14.0`
+
+- [l10n] Improve Chinese (zh-HK) locale (#13289) @yeeharn
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+- [l10n] Improve Vietnamese (vi-VN) locale (#14238) @locnbk2002
+- [TimePicker] Handle `Space` and `Enter` on the `TimeClock` component @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.14.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.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.14.0`
+
+- [charts] Fix grid overflow with zooming (#14280) @alexfauquette
+- [charts] Improve bar chart performances (#14278) @alexfauquette
+- [charts] Test pointer events (#14042) @alexfauquette
+- [charts] Use `isPointInside` function for both graphs and axis (#14222) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-alpha.2` [![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.14.0`, plus:
+
+- [charts-pro] Zoom axis filtering (#14121) @JCQuintas
+
+### Docs
+
+- [docs] Consistent use of UTC and timezones (#14250) @oliviertassinari
+- [docs] Fix missing leading slashes in URLs (#14249) @oliviertassinari
+- [docs] Dash usage revision on pickers pages (#14260) @arthurbalduini
+
+### Core
+
+- [core] Follow JSDocs convention @oliviertassinari
+- [core] Prepare for material v6 (#14143) @LukasTy
+- [code-infra] Set up `eslint-plugin-testing-library` (#14232) @LukasTy
+- [infra] Updated mui-x roadmap links with new project URL (#14271) @michelengelen
+
+## 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-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_
@@ -51,7 +212,7 @@ Same changes as in `@mui/x-date-pickers@7.12.1`.
 - [charts] Fix charts vendor publish config (#14073) @JCQuintas
 - [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.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-charts@7.12.1`, plus:
 

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/GridDataSourceTreeDataGroupingCell.js

@@ -11,9 +11,11 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _gridDataSourceSelector = require("../hooks/features/dataSource/gridDataSourceSelector");
 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; }
@@ -38,10 +40,8 @@ function GridTreeDataGroupingCellIcon(props) {
     field,
     descendantCount
   } = props;
-  const loadingSelector = state => state.dataSource.loading[id] ?? false;
-  const errorSelector = state => state.dataSource.errors[id];
-  const isDataLoading = (0, _xDataGrid.useGridSelector)(apiRef, loadingSelector);
-  const error = (0, _xDataGrid.useGridSelector)(apiRef, errorSelector);
+  const isDataLoading = (0, _internals.useGridSelectorV8)(apiRef, _gridDataSourceSelector.gridDataSourceLoadingIdSelector, id);
+  const error = (0, _internals.useGridSelectorV8)(apiRef, _gridDataSourceSelector.gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
       // always fetch/get from cache the children when the node is expanded

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/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/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/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/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 = "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/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/dataSource/gridDataSourceSelector.d.ts

@@ -1,4 +1,4 @@
-import { GridPaginationModel } from '@mui/x-data-grid';
+import { GridPaginationModel, GridRowId } from '@mui/x-data-grid';
 import { GridStatePro } from '../../../models/gridStatePro';
 export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").OutputSelector<import("@mui/x-data-grid/models/gridStateCommunity").GridStateCommunity, {
     start: number;
@@ -10,5 +10,7 @@ export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").Outpu
     filterModel: import("@mui/x-data-grid").GridFilterModel;
 }>;
 export declare const gridDataSourceStateSelector: (state: GridStatePro) => import("./interfaces").GridDataSourceState;
-export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<import("@mui/x-data-grid").GridRowId, boolean>>;
-export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<import("@mui/x-data-grid").GridRowId, any>>;
+export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<GridRowId, boolean>>;
+export declare const gridDataSourceLoadingIdSelector: import("@mui/x-data-grid/utils/createSelector").OutputSelectorV8<GridStatePro, GridRowId, boolean>;
+export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<GridRowId, any>>;
+export declare const gridDataSourceErrorSelector: import("@mui/x-data-grid/utils/createSelector").OutputSelectorV8<GridStatePro, GridRowId, any>;

package/hooks/features/dataSource/gridDataSourceSelector.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridGetRowsParamsSelector = exports.gridDataSourceStateSelector = exports.gridDataSourceLoadingSelector = exports.gridDataSourceErrorsSelector = void 0;
+exports.gridGetRowsParamsSelector = exports.gridDataSourceStateSelector = exports.gridDataSourceLoadingSelector = exports.gridDataSourceLoadingIdSelector = exports.gridDataSourceErrorsSelector = exports.gridDataSourceErrorSelector = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
@@ -29,4 +29,6 @@ const gridGetRowsParamsSelector = exports.gridGetRowsParamsSelector = (0, _inter
 const gridDataSourceStateSelector = state => state.dataSource;
 exports.gridDataSourceStateSelector = gridDataSourceStateSelector;
 const gridDataSourceLoadingSelector = exports.gridDataSourceLoadingSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.loading);
-const gridDataSourceErrorsSelector = exports.gridDataSourceErrorsSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.errors);
+const gridDataSourceLoadingIdSelector = exports.gridDataSourceLoadingIdSelector = (0, _internals.createSelectorV8)(gridDataSourceStateSelector, (dataSource, id) => dataSource.loading[id] ?? false);
+const gridDataSourceErrorsSelector = exports.gridDataSourceErrorsSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.errors);
+const gridDataSourceErrorSelector = exports.gridDataSourceErrorSelector = (0, _internals.createSelectorV8)(gridDataSourceStateSelector, (dataSource, id) => dataSource.errors[id]);

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>;