@mui/x-data-grid-pro 7.18.0 → 7.19.0

package/CHANGELOG.md

@@ -3,6 +3,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.19.0
+
+_Oct 4, 2024_
+
+We'd like to offer a big thanks to the 26 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔁 Automatic parents and children selection for Data Grid ["tree data"](https://mui.com/x/react-data-grid/tree-data/) and ["row grouping"](https://mui.com/x/react-data-grid/row-grouping/) features
+- 💫 Support `minHeight` and `maxHeight` on flex parent container for the Data Grid component
+- 🎁 Export `publicAPI` from the `useTreeItem2Utils` hook for the Tree View
+- 🌍 Improve Bulgarian (bg-BG), Croatian (hr-HR), French (fr-FR), German (de-DE), Japanese (ja-JP) and Vietnamese (vi-VN) locales and add Portuguese (pt-PT) locale on the Data Grid component
+- 🌏 Improve Czech (cs-CZ) and Portuguese (pt-BR) locales and add Bulgarian (bg-BG), Croatian (hr-HR) and Portuguese (pt-PT) locales on the Pickers components
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks goes out to our community contributors who have helped make this release possible:
+@AWAIS97, @chucamphong, @GMchris, @JakubSveda, @k-rajat19, @k725, @lhilgert9, @ruiaraujo012, @Sanderand, @thomasmoon, @vallereaugabriel.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @arthurbalduini, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @MBilalShafi, @michelengelen, @noraleonte, @oliviertassinari, @romgrk, @sai6855, @samuelsycamore.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.19.0`
+
+- [DataGrid] Fix column definition `undefined` value (#14456) @sai6855
+- [DataGrid] Fix `checkboxSelectionVisibleOnly` reset the selection on filtering (#14677) @MBilalShafi
+- [DataGrid] Fix background colors when `CSSVarsProvider` is used (#12901) @cherniavskii
+- [DataGrid] Fix error when initializing aggregation with row spanning (#14710) @MBilalShafi
+- [DataGrid] Fix scroll to cell logic for keyboard navigating cells and drag selection with pinned columns (#14550) @KenanYusuf
+- [DataGrid] Support `minHeight` and `maxHeight` on flex parent container (#14614) @cherniavskii
+- [l10n] Add missing Portuguese (pt-PT) translations (#14707) @ruiaraujo012
+- [l10n] Improve Bulgarian (bg-BG) locale (#14451) @GMchris
+- [l10n] Improve Croatian (hr-HR) locale (#14794) @arminmeh
+- [l10n] Improve French (fr-FR) locale (#14750) @vallereaugabriel
+- [l10n] Improve German (de-DE) locale (#14755) @lhilgert9
+- [l10n] Improve Japanese (ja-JP) locale (#14381) @k725
+- [l10n] Improve Vietnamese (vi-VN) locale (#14769) @chucamphong
+
+#### `@mui/x-data-grid-pro@7.19.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.19.0`, plus:
+
+- [DataGridPro] Fix dragging styles removal in column reorder (#14680) @k-rajat19
+- [DataGridPro] Fix row pre-processing running with a stale data source (#14810) @MBilalShafi
+- [DataGridPro] Fix `onRowsScrollEnd` not firing on very fast scrolling (#14171) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.19.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.19.0`, plus:
+
+- [DataGridPremium] Automatic parents and children selection (#13757) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.19.0`
+
+- [pickers] Fix left-right keyboard nav with `yearsOrder="desc"` and `direction="rtl"` (#14682) @thomasmoon
+- [pickers] Improve `PickerValidDate` type (#14771) @flaviendelangle
+- [pickers] Improve typing of the range pickers (#14716) @flaviendelangle
+- [l10n] Add Bulgarian (bg-BG) locale (#14469) @GMchris
+- [l10n] Add Croatian (hr-HR) locale (#14795) @arminmeh
+- [l10n] Add Portuguese (pt-PT) locale (#14722) @ruiaraujo012
+- [l10n] Improve Czech (cs-CZ) locale (#14732) @JakubSveda
+- [l10n] Improve Portuguese (pt-BR) locale (#14725) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.19.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.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.19.0`
+
+- [charts] Fix `LineChart` area animation being stuck when resizing container (#14711) @alexfauquette
+- [charts] Improve types and start using `warnOnce` (#14792) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-beta.3` [![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.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.19.0`
+
+- [TreeView] Apply experimental features in `getDefaultizedParams` instead of in the plugin render (#14661) @flaviendelangle
+- [TreeView] Export `publicAPI` form `useTreeItem2Utils` (#14729) @noraleonte
+- [TreeView] Fix cursor navigation interfering with browser shortcut keys  (#14798) @sai6855
+- [TreeView] Fix invalid test for items reordering (#14665) @flaviendelangle
+- [TreeView] Remove `instance.getTreeItemIdAttribute` (#14667) @flaviendelangle
+
+### Docs
+
+- [docs] Added warning callout for Firefox reordering bug  (#14516) @michelengelen
+- [docs] Copyedit `pages.ts` navigation (#14782) @samuelsycamore
+- [docs] Fix typo in row spanning doc (#14770) @flaviendelangle
+- [docs] Fix typo in the Tree View migration guide to v7 (#14727) @Sanderand
+- [docs] Fix typo in usage of Moment guide for UTC and timezones (#14780) @AWAIS97
+- [docs] Fix what's new link to use absolute URL (#14543) @oliviertassinari
+
+### Core
+
+- [core] Fix class name composition order (#14775) @oliviertassinari
+- [core] Replace minWidth, maxWidth with width (#14776) @oliviertassinari
+- [code-infra] Remove custom playwright installation steps (#14728) @Janpot
+- [code-infra] Replace or remove all instances of `e` identifier (#14724) @samuelsycamore
+- [infra] Adds community contribution section to the changelog script (#14799) @michelengelen
+- [infra] Fix line break in Stack Overflow message @oliviertassinari
+- [test] Fix `Escape` event firing event (#14797) @oliviertassinari
+
 ## 7.18.0
 
 _Sep 20, 2024_

package/DataGridPro/DataGridPro.js

@@ -83,6 +83,11 @@ DataGridProRaw.propTypes = {
   /**
    * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
+   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+   * @example
+   * <div style={{ display: 'flex', flexDirection: 'column' }}>
+   *   <DataGrid />
+   * </div>
    */
   autoHeight: _propTypes.default.bool,
   /**
@@ -371,7 +376,7 @@ DataGridProRaw.propTypes = {
    */
   headerFilterHeight: _propTypes.default.number,
   /**
-   * If `true`, enables the data grid filtering on header feature.
+   * If `true`, the header filters feature is enabled.
    * @default false
    */
   headerFilters: _propTypes.default.bool,
@@ -856,6 +861,22 @@ DataGridProRaw.propTypes = {
    * Sets the row selection model of the Data Grid.
    */
   rowSelectionModel: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired), _propTypes.default.number, _propTypes.default.string]),
+  /**
+   * When `rowSelectionPropagation.descendants` is set to `true`.
+   * - Selecting a parent will auto-select all its filtered descendants.
+   * - Deselecting a parent will auto-deselect all its filtered descendants.
+   *
+   * When `rowSelectionPropagation.parents=true`
+   * - Selecting all descendants of a parent would auto-select it.
+   * - Deselecting a descendant of a selected parent would deselect the parent.
+   *
+   * Works with tree data and row grouping on the client-side only.
+   * @default { parents: false, descendants: false }
+   */
+  rowSelectionPropagation: _propTypes.default.shape({
+    descendants: _propTypes.default.bool,
+    parents: _propTypes.default.bool
+  }),
   /**
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.

package/DataGridPro/useDataGridProProps.js

@@ -33,6 +33,7 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PRO_PROPS_DEFAULT_V
   getDetailPanelHeight: () => 500,
   headerFilters: false,
   keepColumnPositionIfDraggedOutside: false,
+  rowSelectionPropagation: _internals.ROW_SELECTION_PROPAGATION_DEFAULT,
   rowReordering: false,
   rowsLoadingMode: 'client',
   scrollEndThreshold: 80,

package/esm/DataGridPro/DataGridPro.js

@@ -76,6 +76,11 @@ DataGridProRaw.propTypes = {
   /**
    * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
+   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+   * @example
+   * <div style={{ display: 'flex', flexDirection: 'column' }}>
+   *   <DataGrid />
+   * </div>
    */
   autoHeight: PropTypes.bool,
   /**
@@ -364,7 +369,7 @@ DataGridProRaw.propTypes = {
    */
   headerFilterHeight: PropTypes.number,
   /**
-   * If `true`, enables the data grid filtering on header feature.
+   * If `true`, the header filters feature is enabled.
    * @default false
    */
   headerFilters: PropTypes.bool,
@@ -849,6 +854,22 @@ DataGridProRaw.propTypes = {
    * Sets the row selection model of the Data Grid.
    */
   rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  /**
+   * When `rowSelectionPropagation.descendants` is set to `true`.
+   * - Selecting a parent will auto-select all its filtered descendants.
+   * - Deselecting a parent will auto-deselect all its filtered descendants.
+   *
+   * When `rowSelectionPropagation.parents=true`
+   * - Selecting all descendants of a parent would auto-select it.
+   * - Deselecting a descendant of a selected parent would deselect the parent.
+   *
+   * Works with tree data and row grouping on the client-side only.
+   * @default { parents: false, descendants: false }
+   */
+  rowSelectionPropagation: PropTypes.shape({
+    descendants: PropTypes.bool,
+    parents: PropTypes.bool
+  }),
   /**
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.

package/esm/DataGridPro/useDataGridProProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
-import { computeSlots, useProps } from '@mui/x-data-grid/internals';
+import { computeSlots, useProps, ROW_SELECTION_PROPAGATION_DEFAULT } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
 const getDataGridProForcedProps = themedProps => _extends({
   signature: 'DataGridPro'
@@ -25,6 +25,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   getDetailPanelHeight: () => 500,
   headerFilters: false,
   keepColumnPositionIfDraggedOutside: false,
+  rowSelectionPropagation: ROW_SELECTION_PROPAGATION_DEFAULT,
   rowReordering: false,
   rowsLoadingMode: 'client',
   scrollEndThreshold: 80,

package/esm/hooks/features/columnReorder/useGridColumnReorder.js

@@ -206,6 +206,11 @@ export const useGridColumnReorder = (apiRef, props) => {
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
     clearTimeout(removeDnDStylesTimeout.current);
+
+    // For more information check here https://github.com/mui/mui-x/issues/14678
+    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    }
     dragColNode.current = null;
 
     // Check if the column was dropped outside the grid.
@@ -228,7 +233,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       })
     }));
     apiRef.current.forceUpdate();
-  }, [props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, apiRef]);
+  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleDragStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   useGridApiEventHandler(apiRef, 'columnHeaderDragOver', handleDragOver);

package/esm/hooks/features/dataSource/useGridDataSource.js

@@ -128,9 +128,9 @@ export const useGridDataSource = (apiRef, props) => {
       apiRef.current.updateServerRows(getRowsResponse.rows, rowNode.path);
       apiRef.current.setRowChildrenExpansion(id, true);
     } catch (error) {
-      const e = error;
-      apiRef.current.unstable_dataSource.setChildrenFetchError(id, e);
-      onError?.(e, fetchParams);
+      const childrenFetchError = error;
+      apiRef.current.unstable_dataSource.setChildrenFetchError(id, childrenFetchError);
+      onError?.(childrenFetchError, fetchParams);
     } finally {
       apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
       nestedDataManager.setRequestSettled(id);

package/esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridSelector, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+import { useGridVisibleRows, useTimeout } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { styled } from '@mui/system';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,6 +20,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const observer = React.useRef();
+  const updateTargetTimeout = useTimeout();
   const triggerElement = React.useRef(null);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const handleLoadMoreRows = useEventCallback(([entry]) => {
@@ -58,11 +59,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       observer.current.observe(triggerElement.current);
     }
   }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
-  const triggerRef = React.useCallback(node => {
-    // Prevent the infite loading working in combination with lazy loading
-    if (!isEnabled) {
-      return;
-    }
+  const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();
       triggerElement.current = node;
@@ -70,7 +67,23 @@ export const useGridInfiniteLoader = (apiRef, props) => {
         observer.current?.observe(triggerElement.current);
       }
     }
-  }, [isEnabled]);
+  };
+  const triggerRef = React.useCallback(node => {
+    // Prevent the infite loading working in combination with lazy loading
+    if (!isEnabled) {
+      return;
+    }
+
+    // If the user scrolls through the grid too fast it might happen that the observer is connected to the trigger element
+    // that will be intersecting the root inside the same render cycle (but not intersecting at the time of the connection).
+    // This will cause the observer to not call the callback with `isIntersecting` set to `true`.
+    // https://www.w3.org/TR/intersection-observer/#event-loop
+    // Delaying the connection to the next cycle helps since the observer will always call the callback the first time it is connected.
+    // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe
+    // Related to
+    // https://github.com/mui/mui-x/issues/14116
+    updateTargetTimeout.start(0, () => updateTarget(node));
+  }, [isEnabled, updateTargetTimeout]);
   const getInfiniteLoadingTriggerElement = React.useCallback(({
     lastRowId
   }) => {

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyNjc4NjgwMDAwMA==";
+  const releaseInfo = "MTcyNzk4OTIwMDAwMA==";
   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/hooks/features/columnReorder/useGridColumnReorder.js

@@ -215,6 +215,11 @@ const useGridColumnReorder = (apiRef, props) => {
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
     clearTimeout(removeDnDStylesTimeout.current);
+
+    // For more information check here https://github.com/mui/mui-x/issues/14678
+    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    }
     dragColNode.current = null;
 
     // Check if the column was dropped outside the grid.
@@ -237,7 +242,7 @@ const useGridColumnReorder = (apiRef, props) => {
       })
     }));
     apiRef.current.forceUpdate();
-  }, [props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, apiRef]);
+  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleDragStart);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragOver', handleDragOver);

package/hooks/features/dataSource/useGridDataSource.js

@@ -137,9 +137,9 @@ const useGridDataSource = (apiRef, props) => {
       apiRef.current.updateServerRows(getRowsResponse.rows, rowNode.path);
       apiRef.current.setRowChildrenExpansion(id, true);
     } catch (error) {
-      const e = error;
-      apiRef.current.unstable_dataSource.setChildrenFetchError(id, e);
-      onError?.(e, fetchParams);
+      const childrenFetchError = error;
+      apiRef.current.unstable_dataSource.setChildrenFetchError(id, childrenFetchError);
+      onError?.(childrenFetchError, fetchParams);
     } finally {
       apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
       nestedDataManager.setRequestSettled(id);

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -28,6 +28,7 @@ const useGridInfiniteLoader = (apiRef, props) => {
   const visibleColumns = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnDefinitionsSelector);
   const currentPage = (0, _internals.useGridVisibleRows)(apiRef, props);
   const observer = React.useRef();
+  const updateTargetTimeout = (0, _internals.useTimeout)();
   const triggerElement = React.useRef(null);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const handleLoadMoreRows = (0, _useEventCallback.default)(([entry]) => {
@@ -66,11 +67,7 @@ const useGridInfiniteLoader = (apiRef, props) => {
       observer.current.observe(triggerElement.current);
     }
   }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
-  const triggerRef = React.useCallback(node => {
-    // Prevent the infite loading working in combination with lazy loading
-    if (!isEnabled) {
-      return;
-    }
+  const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();
       triggerElement.current = node;
@@ -78,7 +75,23 @@ const useGridInfiniteLoader = (apiRef, props) => {
         observer.current?.observe(triggerElement.current);
       }
     }
-  }, [isEnabled]);
+  };
+  const triggerRef = React.useCallback(node => {
+    // Prevent the infite loading working in combination with lazy loading
+    if (!isEnabled) {
+      return;
+    }
+
+    // If the user scrolls through the grid too fast it might happen that the observer is connected to the trigger element
+    // that will be intersecting the root inside the same render cycle (but not intersecting at the time of the connection).
+    // This will cause the observer to not call the callback with `isIntersecting` set to `true`.
+    // https://www.w3.org/TR/intersection-observer/#event-loop
+    // Delaying the connection to the next cycle helps since the observer will always call the callback the first time it is connected.
+    // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe
+    // Related to
+    // https://github.com/mui/mui-x/issues/14116
+    updateTargetTimeout.start(0, () => updateTarget(node));
+  }, [isEnabled, updateTargetTimeout]);
   const getInfiniteLoadingTriggerElement = React.useCallback(({
     lastRowId
   }) => {

package/index.js

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

package/material/index.d.ts

@@ -1,5 +1,5 @@
 declare const materialSlots: {
-    columnMenuPinLeftIcon: import("react").JSXElementConstructor<any>;
-    columnMenuPinRightIcon: import("react").JSXElementConstructor<any>;
+    columnMenuPinLeftIcon: React.JSXElementConstructor<any>;
+    columnMenuPinRightIcon: React.JSXElementConstructor<any>;
 };
 export default materialSlots;

package/modern/DataGridPro/DataGridPro.js

@@ -76,6 +76,11 @@ DataGridProRaw.propTypes = {
   /**
    * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
+   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+   * @example
+   * <div style={{ display: 'flex', flexDirection: 'column' }}>
+   *   <DataGrid />
+   * </div>
    */
   autoHeight: PropTypes.bool,
   /**
@@ -364,7 +369,7 @@ DataGridProRaw.propTypes = {
    */
   headerFilterHeight: PropTypes.number,
   /**
-   * If `true`, enables the data grid filtering on header feature.
+   * If `true`, the header filters feature is enabled.
    * @default false
    */
   headerFilters: PropTypes.bool,
@@ -849,6 +854,22 @@ DataGridProRaw.propTypes = {
    * Sets the row selection model of the Data Grid.
    */
   rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  /**
+   * When `rowSelectionPropagation.descendants` is set to `true`.
+   * - Selecting a parent will auto-select all its filtered descendants.
+   * - Deselecting a parent will auto-deselect all its filtered descendants.
+   *
+   * When `rowSelectionPropagation.parents=true`
+   * - Selecting all descendants of a parent would auto-select it.
+   * - Deselecting a descendant of a selected parent would deselect the parent.
+   *
+   * Works with tree data and row grouping on the client-side only.
+   * @default { parents: false, descendants: false }
+   */
+  rowSelectionPropagation: PropTypes.shape({
+    descendants: PropTypes.bool,
+    parents: PropTypes.bool
+  }),
   /**
    * Loading rows can be processed on the server or client-side.
    * Set it to 'client' if you would like enable infnite loading.

package/modern/DataGridPro/useDataGridProProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
-import { computeSlots, useProps } from '@mui/x-data-grid/internals';
+import { computeSlots, useProps, ROW_SELECTION_PROPAGATION_DEFAULT } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
 const getDataGridProForcedProps = themedProps => _extends({
   signature: 'DataGridPro'
@@ -25,6 +25,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   getDetailPanelHeight: () => 500,
   headerFilters: false,
   keepColumnPositionIfDraggedOutside: false,
+  rowSelectionPropagation: ROW_SELECTION_PROPAGATION_DEFAULT,
   rowReordering: false,
   rowsLoadingMode: 'client',
   scrollEndThreshold: 80,

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -206,6 +206,11 @@ export const useGridColumnReorder = (apiRef, props) => {
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
     clearTimeout(removeDnDStylesTimeout.current);
+
+    // For more information check here https://github.com/mui/mui-x/issues/14678
+    if (dragColNode.current.classList.contains(classes.columnHeaderDragging)) {
+      dragColNode.current.classList.remove(classes.columnHeaderDragging);
+    }
     dragColNode.current = null;
 
     // Check if the column was dropped outside the grid.
@@ -228,7 +233,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       })
     }));
     apiRef.current.forceUpdate();
-  }, [props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, apiRef]);
+  }, [apiRef, props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, classes.columnHeaderDragging]);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleDragStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   useGridApiEventHandler(apiRef, 'columnHeaderDragOver', handleDragOver);

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

@@ -128,9 +128,9 @@ export const useGridDataSource = (apiRef, props) => {
       apiRef.current.updateServerRows(getRowsResponse.rows, rowNode.path);
       apiRef.current.setRowChildrenExpansion(id, true);
     } catch (error) {
-      const e = error;
-      apiRef.current.unstable_dataSource.setChildrenFetchError(id, e);
-      onError?.(e, fetchParams);
+      const childrenFetchError = error;
+      apiRef.current.unstable_dataSource.setChildrenFetchError(id, childrenFetchError);
+      onError?.(childrenFetchError, fetchParams);
     } finally {
       apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
       nestedDataManager.setRequestSettled(id);

package/modern/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useGridSelector, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridVisibleRows } from '@mui/x-data-grid/internals';
+import { useGridVisibleRows, useTimeout } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { styled } from '@mui/system';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,6 +20,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const observer = React.useRef();
+  const updateTargetTimeout = useTimeout();
   const triggerElement = React.useRef(null);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const handleLoadMoreRows = useEventCallback(([entry]) => {
@@ -58,11 +59,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       observer.current.observe(triggerElement.current);
     }
   }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
-  const triggerRef = React.useCallback(node => {
-    // Prevent the infite loading working in combination with lazy loading
-    if (!isEnabled) {
-      return;
-    }
+  const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();
       triggerElement.current = node;
@@ -70,7 +67,23 @@ export const useGridInfiniteLoader = (apiRef, props) => {
         observer.current?.observe(triggerElement.current);
       }
     }
-  }, [isEnabled]);
+  };
+  const triggerRef = React.useCallback(node => {
+    // Prevent the infite loading working in combination with lazy loading
+    if (!isEnabled) {
+      return;
+    }
+
+    // If the user scrolls through the grid too fast it might happen that the observer is connected to the trigger element
+    // that will be intersecting the root inside the same render cycle (but not intersecting at the time of the connection).
+    // This will cause the observer to not call the callback with `isIntersecting` set to `true`.
+    // https://www.w3.org/TR/intersection-observer/#event-loop
+    // Delaying the connection to the next cycle helps since the observer will always call the callback the first time it is connected.
+    // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe
+    // Related to
+    // https://github.com/mui/mui-x/issues/14116
+    updateTargetTimeout.start(0, () => updateTarget(node));
+  }, [isEnabled, updateTargetTimeout]);
   const getInfiniteLoadingTriggerElement = React.useCallback(({
     lastRowId
   }) => {

package/modern/index.js

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

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyNjc4NjgwMDAwMA==";
+  const releaseInfo = "MTcyNzk4OTIwMDAwMA==";
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.18.0",
+  "version": "7.19.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -39,7 +39,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "7.18.0",
+    "@mui/x-data-grid": "7.19.0",
     "@mui/x-internals": "7.18.0",
     "@mui/x-license": "7.18.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 = "MTcyNjc4NjgwMDAwMA==";
+  const releaseInfo = "MTcyNzk4OTIwMDAwMA==";
   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