npm - @mui/x-data-grid-pro - Versions diffs - 7.17.0 → 7.19.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,209 @@
 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_
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+- 💫 Support [Row spanning](https://mui.com/x/react-data-grid/row-spanning/) on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
+  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="data grid row spanning" />
+- ⏰ Support `date-fns` v4 (#14673) @LukasTy
+- 🎉 Add option for Pickers to change the order of displayed years (#11780) @thomasmoon
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+### Data Grid
+#### `@mui/x-data-grid@7.18.0`
+- [DataGrid] Add default reset value in row edit mode (#14050) @michelengelen
+- [DataGrid] Add `columnGroupHeaderHeight` prop for sizing column group headers (#14637) @KenanYusuf
+- [DataGrid] Fix `document` reference when the grid is rendered in a popup window (#14649) @arminmeh
+- [DataGrid] Remove `minFirstColumn` from `GetHeadersParams` interface (#14450) @k-rajat19
+- [DataGrid] Row spanning (#14124) @MBilalShafi
+#### `@mui/x-data-grid-pro@7.18.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.18.0`, plus:
+- [DataGridPro] Fix `onRowsScrollEnd` being triggered instantly when bottom pinned row is present (#14602) @arminmeh
+- [DataGridPro] Fix header filters rendering issue for `isEmpty` and `isNotEmpty` filter operators (#14493) @k-rajat19
+- [DataGridPro] Fix pinned columns in RTL mode (#14586) @KenanYusuf
+#### `@mui/x-data-grid-premium@7.18.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.18.0`.
+### Date and Time Pickers
+#### `@mui/x-date-pickers@7.18.0`
+- [pickers] Add option to change the order of displayed years (#11780) @thomasmoon
+- [pickers] Support `date-fns` v4 (#14673) @LukasTy
+#### `@mui/x-date-pickers-pro@7.18.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.18.0`.
+### Charts
+#### `@mui/x-charts@7.18.0`
+- [charts] Add a `PolarProvider` to manage polar axes (#14642) @alexfauquette
+- [charts] Fix `LineChart` animation being stuck with initial drawing area value (#14553) @JCQuintas
+- [charts] Fix legend slot typing (#14657) @alexfauquette
+- [charts] Pass the axis index to extremum getter (#14641) @alexfauquette
+- [charts] Provide hooks to create custom tooltip (#14377) @alexfauquette
+#### `@mui/x-charts-pro@7.0.0-beta.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.18.0`.
+### Tree View
+#### `@mui/x-tree-view@7.18.0`
+- [TreeView] Add `"use client"` directive to every public component and hook (#14579) @flaviendelangle
+### Docs
+- [docs] Add `groupingValueGetter` callout in column definition docs (#14599) @michelengelen
+- [docs] Clean v6 => v7 migration guide (#14652) @flaviendelangle
+- [docs] Copy `vale-action.yml` from main repo @oliviertassinari
+- [docs] Edit the Pickers Getting started doc (#14555) @samuelsycamore
+- [docs] Fix TypeScript capitalization @oliviertassinari
+- [docs] Fix Vale error @oliviertassinari
+- [docs] Make the migration guide diff a bit easier to read @oliviertassinari
+- [docs] Report Vale at warning level (#14660) @oliviertassinari
+- [docs] Warn about the `valueGetter` and `valueFormatter` signature change (#14613) @cherniavskii
+- [docs] Polish code formatting (#14603) @oliviertassinari
+- [test] Spy on `observe` method to avoid flaky wait for a callback (#14640) @arminmeh
+### Core
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix failing CI on `master` (#14644) @cherniavskii
+- [core] Fix `package.json` repository rule @oliviertassinari
+- [core] MUI X repository moved to a new location @oliviertassinari
+- [docs-infra] Strengthen CSP (#14581) @oliviertassinari
+- [license] Finish renaming of LicensingModel (#14615) @oliviertassinari
 ## 7.17.0
 _Sep 13, 2024_
@@ -75,7 +278,7 @@ Same changes as in `@mui/x-charts@7.17.0`.
 ### Docs
 - [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
-- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
+- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
 - [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
 - [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
 - [docs] Match title with blog posts @oliviertassinari
@@ -195,7 +398,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 - 💫 Support Material UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii
-You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
+You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
 - 🐞 Bugfixes
@@ -240,7 +443,7 @@ Same changes as in `@mui/x-charts@7.15.0`, plus:
 - [docs] Fix sentence case `h2` @oliviertassinari
 - [docs] Clarify contribution guide references @oliviertassinari
-- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
 - [docs] Fix outdated link to support page @oliviertassinari
 - [docs] Fix use of Material UI @oliviertassinari
 - [docs] Update deprecated props in docs (#14295) @JCQuintas
@@ -498,7 +701,7 @@ The [Pro plan](https://mui.com/x/introduction/licensing/#pro-plan) is receiving
 As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.
-This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
+This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
 ### Highlights
@@ -563,7 +766,7 @@ Same changes as in `@mui/x-date-pickers@7.12.0`.
 #### `@mui/x-charts@7.12.0`
 - [charts] Fix incorrect `axisId` prop being allowed in xAxis/yAxis config. Use `id` instead. (#13986) @JCQuintas
-- [charts] Use vendor to have Common JS bundle working out of the box (#13608) @alexfauquette
+- [charts] Use vendor to have CommonJS bundle working out of the box (#13608) @alexfauquette
 - [charts] Divide the `SeriesProvider` to use in filtering (#14026) @JCQuintas
 ### Tree View

package/DataGridPro/DataGridPro.js CHANGED Viewed

@@ -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,
   /**
@@ -134,6 +139,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: _propTypes.default.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -366,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,
@@ -851,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.
@@ -935,5 +961,10 @@ DataGridProRaw.propTypes = {
     get: _propTypes.default.func.isRequired,
     set: _propTypes.default.func.isRequired
   }),
-  unstable_onDataSourceError: _propTypes.default.func
+  unstable_onDataSourceError: _propTypes.default.func,
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  unstable_rowSpanning: _propTypes.default.bool
 };

package/DataGridPro/useDataGridProComponent.js CHANGED Viewed

@@ -57,6 +57,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.preferencePanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.filterStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowSpanningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnReorder.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
@@ -74,6 +75,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _useGridRowPinning.useGridRowPinning)(apiRef, props);
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
+  (0, _internals.useGridRowSpanning)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);
   (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
   (0, _internals.useGridColumnSpanning)(apiRef);

package/DataGridPro/useDataGridProProps.js CHANGED Viewed

@@ -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/components/headerFiltering/GridHeaderFilterCell.js CHANGED Viewed

@@ -38,6 +38,16 @@ const dateSx = {
     color: 'transparent'
   }
 };
+const defaultInputComponents = {
+  string: _xDataGrid.GridFilterInputValue,
+  number: _xDataGrid.GridFilterInputValue,
+  date: _xDataGrid.GridFilterInputDate,
+  dateTime: _xDataGrid.GridFilterInputDate,
+  boolean: _xDataGrid.GridFilterInputBoolean,
+  singleSelect: _xDataGrid.GridFilterInputSingleSelect,
+  actions: null,
+  custom: null
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       colIndex,
@@ -86,7 +96,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
   }, [colDef.field, filterModel, filterableColumnsLookup]);
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
-  const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent : null;
+  const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
     if (item.value && !updatedItem.value) {
       apiRef.current.deleteFilterItem(updatedItem);

package/esm/DataGridPro/DataGridPro.js CHANGED Viewed

@@ -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,
   /**
@@ -127,6 +132,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -359,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,
@@ -844,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.
@@ -928,5 +954,10 @@ DataGridProRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
-  unstable_onDataSourceError: PropTypes.func
+  unstable_onDataSourceError: PropTypes.func,
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  unstable_rowSpanning: PropTypes.bool
 };

package/esm/DataGridPro/useDataGridProComponent.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
 import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -50,6 +50,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
   useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
@@ -67,6 +68,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
+  useGridRowSpanning(apiRef, props);
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);

package/esm/DataGridPro/useDataGridProProps.js CHANGED Viewed

@@ -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/components/headerFiltering/GridHeaderFilterCell.js CHANGED Viewed

@@ -6,7 +6,7 @@ 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 { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
@@ -30,6 +30,16 @@ const dateSx = {
     color: 'transparent'
   }
 };
+const defaultInputComponents = {
+  string: GridFilterInputValue,
+  number: GridFilterInputValue,
+  date: GridFilterInputDate,
+  dateTime: GridFilterInputDate,
+  boolean: GridFilterInputBoolean,
+  singleSelect: GridFilterInputSingleSelect,
+  actions: null,
+  custom: null
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       colIndex,
@@ -78,7 +88,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
   }, [colDef.field, filterModel, filterableColumnsLookup]);
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
-  const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent : null;
+  const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
     if (item.value && !updatedItem.value) {
       apiRef.current.deleteFilterItem(updatedItem);

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js CHANGED Viewed

@@ -124,16 +124,13 @@ export const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnFilters({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }), getColumnFilters({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnFilters({
         position: GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       })]
     });

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyNjE5NjQwMDAwMA==";
+  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/columnHeaders/useGridColumnHeaders.js CHANGED Viewed

@@ -132,16 +132,13 @@ const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnFilters({
         position: _xDataGrid.GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }), getColumnFilters({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnFilters({
         position: _xDataGrid.GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       })]
     });

package/hooks/features/columnReorder/useGridColumnReorder.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.17.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,
   /**
@@ -127,6 +132,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -359,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,
@@ -844,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.
@@ -928,5 +954,10 @@ DataGridProRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
-  unstable_onDataSourceError: PropTypes.func
+  unstable_onDataSourceError: PropTypes.func,
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  unstable_rowSpanning: PropTypes.bool
 };

package/modern/DataGridPro/useDataGridProComponent.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
 import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -50,6 +50,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
   useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
@@ -67,6 +68,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
+  useGridRowSpanning(apiRef, props);
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);

package/modern/DataGridPro/useDataGridProProps.js CHANGED Viewed

@@ -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/components/headerFiltering/GridHeaderFilterCell.js CHANGED Viewed

@@ -6,7 +6,7 @@ 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 { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, shouldCellShowLeftBorder, shouldCellShowRightBorder } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
@@ -30,6 +30,16 @@ const dateSx = {
     color: 'transparent'
   }
 };
+const defaultInputComponents = {
+  string: GridFilterInputValue,
+  number: GridFilterInputValue,
+  date: GridFilterInputDate,
+  dateTime: GridFilterInputDate,
+  boolean: GridFilterInputBoolean,
+  singleSelect: GridFilterInputSingleSelect,
+  actions: null,
+  custom: null
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       colIndex,
@@ -78,7 +88,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     return filterModelItem ? !filterableColumnsLookup[filterModelItem.field] : false;
   }, [colDef.field, filterModel, filterableColumnsLookup]);
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
-  const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent : null;
+  const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
     if (item.value && !updatedItem.value) {
       apiRef.current.deleteFilterItem(updatedItem);

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js CHANGED Viewed

@@ -124,16 +124,13 @@ export const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnFilters({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }), getColumnFilters({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnFilters({
         position: GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       })]
     });

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.17.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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyNjE5NjQwMDAwMA==";
+  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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.17.0",
+  "version": "7.19.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,7 +29,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/mui-x.git",
+    "url": "git+https://github.com/mui/mui-x.git",
     "directory": "packages/x-data-grid-pro"
   },
   "dependencies": {
@@ -39,9 +39,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "7.17.0",
-    "@mui/x-license": "7.17.0",
-    "@mui/x-internals": "7.17.0"
+    "@mui/x-data-grid": "7.19.0",
+    "@mui/x-internals": "7.18.0",
+    "@mui/x-license": "7.18.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcyNjE5NjQwMDAwMA==";
+  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