@mui/x-data-grid 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/DataGrid/DataGrid.js

@@ -4,11 +4,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
+import { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+import { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const configuration = {
+  hooks: {
+    useGridAriaAttributes,
+    useGridRowAriaAttributes
+  }
+};
 let propValidators;
 if (process.env.NODE_ENV !== 'production') {
   propValidators = [...propValidatorsDataGrid,
@@ -23,6 +31,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   }
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
+    configuration: configuration,
     props: props,
     children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
@@ -321,7 +330,7 @@ DataGridRaw.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/components/GridColumnHeaders.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { fastMemo } from '../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/components/GridConfigurationContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridConfigurationContext: React.Context<unknown>;

package/components/GridConfigurationContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  GridConfigurationContext.displayName = 'GridConfigurationContext';
+}

package/components/GridHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { fastMemo } from '../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/components/GridRow.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { fastMemo } from '../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridClasses } from '../constants/gridClasses';
@@ -20,11 +20,11 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
+import { useGridConfiguration } from '../hooks/utils/useGridConfiguration';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width
@@ -68,12 +68,12 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
+  const configuration = useGridConfiguration();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const handleRef = useForkRef(ref, refProp);
@@ -85,11 +85,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
-  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
-
   const classes = composeGridClasses(rootProps.classes, {
     root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
   });
+  const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -212,6 +211,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
@@ -308,10 +308,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "data-rowindex": index,
     role: "row",
     className: clsx(...rowClassNames, classes.root, className),
-    "aria-rowindex": ariaRowIndex,
-    "aria-selected": selected,
     style: style
-  }, eventHandlers, other, {
+  }, ariaAttributes, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
       className: gridClasses.cellOffsetLeft,

package/components/GridScrollArea.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled } from '@mui/system';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass, gridClasses } from '../constants';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
@@ -13,7 +14,6 @@ import { gridDensityFactorSelector } from '../hooks/features/density/densitySele
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useTimeout } from '../hooks/utils/useTimeout';
 import { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
-import { fastMemo } from '../utils/fastMemo';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;

package/components/GridSkeletonLoadingOverlay.js

@@ -119,7 +119,7 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
         if (hasScrollbarFiller) {
           rowCells.push( /*#__PURE__*/_jsx(GridScrollbarFillerCell, {
             pinnedRight: pinnedColumns.right.length > 0
-          }));
+          }, `skeleton-scrollbar-filler-${i}`));
         }
       }
       array.push( /*#__PURE__*/_jsx("div", {

package/components/cell/GridCell.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { GridCellModes } from '../../models';

package/components/cell/GridSkeletonCell.js

@@ -3,10 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
-import clsx from 'clsx';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { createRandomNumberGenerator } from '../../utils/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';

package/components/containers/GridRootStyles.js

@@ -668,9 +668,16 @@ export const GridRootStyles = styled('div', {
     [`& .${c['filler--borderTop']}`]: {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)'
     },
-    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
     [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
-      [`& .${c.virtualScrollerContent}, & .${c['scrollbar--vertical']}, & .${c.pinnedRows}`]: {
+      [`& .${c.virtualScrollerContent}`]: {
+        // We use visibility hidden so that the virtual scroller content retains its height.
+        // Position fixed is used to remove the virtual scroller content from the flow.
+        // https://github.com/mui/mui-x/issues/14061
+        position: 'fixed',
+        visibility: 'hidden'
+      },
+      [`& .${c['scrollbar--vertical']}, & .${c.pinnedRows}, & .${c.virtualScroller} > .${c.filler}`]: {
         display: 'none'
       }
     }

package/components/virtualization/GridMainContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { useGridConfiguration } from '../../hooks/utils/useGridConfiguration';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridPanelAnchor = styled('div')({
   position: 'absolute',
@@ -19,8 +19,9 @@ const Element = styled('div', {
   overflow: 'hidden'
 });
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const ariaAttributes = useGridAriaAttributes();
   const rootProps = useGridRootProps();
+  const configuration = useGridConfiguration();
+  const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/_jsxs(Element, _extends({
     ref: ref,
     ownerState: rootProps,

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { fastMemo } from '../../utils/fastMemo';
+import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';

package/context/GridContextProvider.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
+import { GridConfiguration } from '../models/configuration/gridConfiguration';
 type GridContextProviderProps = {
     privateApiRef: React.MutableRefObject<GridPrivateApiCommunity>;
+    configuration: GridConfiguration;
     props: {};
     children: React.ReactNode;
 };
-export declare function GridContextProvider({ privateApiRef, props, children }: GridContextProviderProps): React.JSX.Element;
+export declare function GridContextProvider({ privateApiRef, configuration, props, children, }: GridContextProviderProps): React.JSX.Element;
 export {};

package/context/GridContextProvider.js

@@ -2,20 +2,25 @@ import * as React from 'react';
 import { GridApiContext } from '../components/GridApiContext';
 import { GridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { GridRootPropsContext } from './GridRootPropsContext';
+import { GridConfigurationContext } from '../components/GridConfigurationContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
   privateApiRef,
+  configuration,
   props,
   children
 }) {
   const apiRef = React.useRef(privateApiRef.current.getPublicApi());
-  return /*#__PURE__*/_jsx(GridRootPropsContext.Provider, {
-    value: props,
-    children: /*#__PURE__*/_jsx(GridPrivateApiContext.Provider, {
-      value: privateApiRef,
-      children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
-        value: apiRef,
-        children: children
+  return /*#__PURE__*/_jsx(GridConfigurationContext.Provider, {
+    value: configuration,
+    children: /*#__PURE__*/_jsx(GridRootPropsContext.Provider, {
+      value: props,
+      children: /*#__PURE__*/_jsx(GridPrivateApiContext.Provider, {
+        value: privateApiRef,
+        children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
+          value: apiRef,
+          children: children
+        })
       })
     })
   });

package/hooks/core/useGridStateInitialization.js

@@ -48,9 +48,7 @@ export const useGridStateInitialization = apiRef => {
     if (!ignoreSetState) {
       // We always assign it as we mutate rows for perf reason.
       apiRef.current.state = newState;
-      if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent('stateChange', newState);
-      }
+      apiRef.current.publishEvent('stateChange', newState);
       apiRef.current.store.update(newState);
     }
     if (updatedControlStateIds.length === 1) {

package/hooks/features/dimensions/useGridDimensions.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { throttle } from '@mui/x-internals/throttle';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { throttle } from '../../../utils/throttle';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { gridDimensionsSelector } from './gridDimensionsSelectors';

package/hooks/features/export/serializers/csvSerializer.js

@@ -1,6 +1,9 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { warnOnce } from '../../../../internals/utils/warning';
 function sanitizeCellValue(value, csvOptions) {
+  if (value === null || value === undefined) {
+    return '';
+  }
   const valueStr = typeof value === 'string' ? value : `${value}`;
   if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
     const escapedValue = valueStr.replace(/"/g, '""');
@@ -51,9 +54,7 @@ class CSVRow {
     if (!this.isEmpty) {
       this.rowString += this.options.csvOptions.delimiter;
     }
-    if (value === null || value === undefined) {
-      this.rowString += '';
-    } else if (typeof this.options.sanitizeCellValue === 'function') {
+    if (typeof this.options.sanitizeCellValue === 'function') {
       this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;

package/hooks/features/filter/gridFilterSelector.d.ts

@@ -1,3 +1,4 @@
+import { GridRowId } from '../../../models/gridRows';
 import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 /**
@@ -19,41 +20,53 @@ export declare const gridVisibleRowsLookupSelector: (state: GridStateCommunity)
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, boolean>>;
+export declare const gridFilteredRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, boolean>>;
 /**
  * @category Filtering
  * @ignore - do not document.
  */
-export declare const gridFilteredDescendantCountLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, number>>;
+export declare const gridFilteredChildrenCountLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridFilteredDescendantCountLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;
 /**
  * Get the id and the model of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridExpandedSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../models/gridRows").GridRowEntry<import("../../../models/gridRows").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export declare const gridExpandedSortedRowIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridExpandedSortedRowIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRowId[]>;
 /**
  * Get the id and the model of the rows accessible after the filtering process.
  * Contains the collapsed children.
  * @category Filtering
  */
-export declare const gridFilteredSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridFilteredSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../models/gridRows").GridRowEntry<import("../../../models/gridRows").GridValidRowModel>[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
  * Contains the collapsed children.
  * @category Filtering
  */
-export declare const gridFilteredSortedRowIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowId[]>;
+export declare const gridFilteredSortedRowIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRowId[]>;
+/**
+ * Get the ids to position in the current tree level lookup of the rows accessible after the filtering process.
+ * Does not contain the collapsed children.
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, number>>;
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering
  */
-export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../models/gridRows").GridRowEntry<import("../../../models/gridRows").GridValidRowModel>[]>;
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering

package/hooks/features/filter/gridFilterSelector.js

@@ -32,6 +32,12 @@ export const gridVisibleRowsLookupSelector = state => state.visibleRowsLookup;
  */
 export const gridFilteredRowsLookupSelector = createSelector(gridFilterStateSelector, filterState => filterState.filteredRowsLookup);
 
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export const gridFilteredChildrenCountLookupSelector = createSelector(gridFilterStateSelector, filterState => filterState.filteredChildrenCountLookup);
+
 /**
  * @category Filtering
  * @ignore - do not document.
@@ -66,6 +72,34 @@ export const gridFilteredSortedRowEntriesSelector = createSelectorMemoized(gridF
  */
 export const gridFilteredSortedRowIdsSelector = createSelectorMemoized(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.map(row => row.id));
 
+/**
+ * Get the ids to position in the current tree level lookup of the rows accessible after the filtering process.
+ * Does not contain the collapsed children.
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export const gridExpandedSortedRowTreeLevelPositionLookupSelector = createSelectorMemoized(gridExpandedSortedRowIdsSelector, gridRowTreeSelector, (visibleSortedRowIds, rowTree) => {
+  const depthPositionCounter = {};
+  let lastDepth = 0;
+  return visibleSortedRowIds.reduce((acc, rowId) => {
+    const rowNode = rowTree[rowId];
+    if (!depthPositionCounter[rowNode.depth]) {
+      depthPositionCounter[rowNode.depth] = 0;
+    }
+
+    // going deeper in the tree should reset the counter
+    // since it might have been used in some other branch at the same level, up in the tree
+    // going back up should keep the counter and continue where it left off
+    if (rowNode.depth > lastDepth) {
+      depthPositionCounter[rowNode.depth] = 0;
+    }
+    lastDepth = rowNode.depth;
+    depthPositionCounter[rowNode.depth] += 1;
+    acc[rowId] = depthPositionCounter[rowNode.depth];
+    return acc;
+  }, {});
+});
+
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering

package/hooks/features/filter/gridFilterState.d.ts

@@ -17,6 +17,12 @@ export interface GridFilterState {
      * This is the equivalent of the `visibleRowsLookup` if all the groups were expanded.
      */
     filteredRowsLookup: Record<GridRowId, boolean>;
+    /**
+     * Amount of children that are passing the filters or have children that are passing the filter (does not count grand children).
+     * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters.
+     * If `GridDataSource` is being used to load the data, the value is `-1` if there are some children but the count is unknown.
+     */
+    filteredChildrenCountLookup: Record<GridRowId, number>;
     /**
      * Amount of descendants that are passing the filters.
      * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).

package/hooks/features/filter/index.d.ts

@@ -1,3 +1,4 @@
 export type { GridFilterState, GridFilterInitialState } from './gridFilterState';
 export { getDefaultGridFilterModel } from './gridFilterState';
-export * from './gridFilterSelector';
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector, } from './gridFilterSelector';
+export type { GridFilterActiveItemsLookup } from './gridFilterSelector';

package/hooks/features/filter/index.js

@@ -1,2 +1,2 @@
 export { getDefaultGridFilterModel } from './gridFilterState';
-export * from './gridFilterSelector';
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from './gridFilterSelector';

package/hooks/features/filter/useGridFilter.js

@@ -23,6 +23,7 @@ export const filterStateInitializer = (state, props, apiRef) => {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
       filteredRowsLookup: {},
+      filteredChildrenCountLookup: {},
       filteredDescendantCountLookup: {}
     },
     visibleRowsLookup: {}
@@ -273,6 +274,7 @@ export const useGridFilter = (apiRef, props) => {
     if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
         filteredRowsLookup: {},
+        filteredChildrenCountLookup: {},
         filteredDescendantCountLookup: {}
       };
     }
@@ -301,6 +303,7 @@ export const useGridFilter = (apiRef, props) => {
     }
     return {
       filteredRowsLookup,
+      filteredChildrenCountLookup: {},
       filteredDescendantCountLookup: {}
     };
   }, [apiRef, props.filterMode, getRowId, getRowsRef]);

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -105,6 +105,9 @@ export const useGridRowSelection = (apiRef, props) => {
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => gridRowSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
+    if (props.rowSelection === false) {
+      return false;
+    }
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
@@ -113,7 +116,7 @@ export const useGridRowSelection = (apiRef, props) => {
       return false;
     }
     return true;
-  }, [apiRef, propIsRowSelectable]);
+  }, [apiRef, props.rowSelection, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => selectedGridRowsSelector(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
     if (!apiRef.current.isRowSelectable(id)) {

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

@@ -0,0 +1,2 @@
+import { GetRowAriaAttributesFn } from '../../../models/configuration/gridRowConfiguration';
+export declare const useGridRowAriaAttributes: () => GetRowAriaAttributesFn;