@mui/x-data-grid-pro 7.22.3 → 7.23.1

package/CHANGELOG.md

@@ -3,6 +3,166 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.23.1
+
+_Dec 5, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve German locale on the Data Grid component
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lhilgert9.
+
+Following are all team members who have contributed to this release:
+@arthurbalduini, @cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy and @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.1`
+
+- [DataGrid] Make column autosizing work with flex columns (#15712) @cherniavskii
+- [l10n] Improve German (de-DE) locale (#15641) @lhilgert9
+
+#### `@mui/x-data-grid-pro@7.23.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-data-grid@7.23.1`, plus:
+
+- [DataGridPro] Cleanup pinned rows on removal (#15702) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.23.1` [![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.23.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.1`
+
+- [TimePicker] Prevent mouse events after `touchend` event (#15430) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.23.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-date-pickers@7.23.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.23.1`
+
+- [charts] Improve SVG `pattern` and `gradient` support (#15724) @JCQuintas
+
+#### `@mui/x-charts-pro@7.23.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.23.1`.
+
+### Docs
+
+- [docs] Fix Pickers theme augmentation example (#15675) @LukasTy
+- [docs] Remove duplicated warning (#15715) @cherniavskii
+- [test] Force hover in headless Chrome (#15711) @cherniavskii
+- [docs-infra] Bump `@mui/internal-markdown` to support nested demo imports (#15738) @alexfauquette
+- [docs] Improve SEO titles for the Data Grid (#15695) @MBilalShafi
+
+### Core
+
+- [core] Add `@mui/x-tree-view-pro` to `releaseChangelog` (#15747) @flaviendelangle
+
+## 7.23.0
+
+_Nov 29, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Support for a new display mode on the Data Grid with the [List View feature](https://mui.com/x/react-data-grid/list-view/), offering an extremely flexible way to render datasets and enabling developers to adapt how data is displayed across different screen sizes.
+
+  https://github.com/user-attachments/assets/61286adc-03fc-4323-9739-8ca726fcc16c
+
+- ⚛️ React 19 support
+- 📚 Documentation improvements
+- 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
+- 🌍 Improve Dutch locale on the Date and Time Picker components.
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@dloeda, @headironc, @mathzdev, @nphmuller, @lhilgert9, @lauri865.
+Following are all team members who have contributed to this release:
+@oliviertassinari, @arminmeh, @KenanYusuf, @flaviendelangle, @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@v7.23.0`
+
+- [DataGrid] React 19 support (#15557) @arminmeh
+- [DataGrid] Change test dom check from `/jsdom/` to `/jsdom|HappyDOM/`. (#15642) @jedesroches
+- [DataGrid] Fix last separator not being hidden when grid is scrollable (#15551) @KenanYusuf
+- [DataGrid] Fix order of spread props on toolbar items (#15556) @KenanYusuf
+- [DataGrid] Fix row-spanning in combination with column-pinning (#15460) @lhilgert9
+- [DataGrid] Improve resize performance (#15592) @lauri865
+- [DataGrid] Support column virtualization with dynamic row height (#15567) @cherniavskii
+- [DataGrid] Improve `GridCell` performance (#15621) @lauri865
+- [l10n] Improve Chinese (zh-CN) locale (#15570) @headironc
+- [l10n] Improve Portuguese (pt-PT) locale (#15561) @mathzdev
+
+#### `@mui/x-data-grid-pro@v7.23.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@v7.23.0`, plus:
+
+- [DataGridPro] Fix header filtering with `boolean` column type (#15640) @k-rajat19
+- [DataGridPro] Fix pagination state not updating if the data source response has no rows (#15643) @zinoroman
+- [DataGridPro] Fix selection propagation issue on initialization (#15593) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@v7.23.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@v7.23.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@v7.23.0`
+
+- [pickers] React 19 support (#15557) @arminmeh
+- [pickers] Fix DST issue with `America/Asuncion` timezone and `AdapterMoment` (#15653) @flaviendelangle
+- [pickers] Use `props.referenceDate` timezone when `props.value` and `props.defaultValue` are not defined (#15544) @flaviendelangle
+- [l10n] Improve Dutch (nl-NL) locale (#15564) @nphmuller
+
+#### `@mui/x-date-pickers-pro@v7.23.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@v7.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@v7.23.0`
+
+- [charts] React 19 support (#15557) @arminmeh
+- [charts] Prevent invalid `releasePointerCapture` (#15609) @alexfauquette
+
+#### `@mui/x-charts-pro@v7.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@v7.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@v7.23.0`
+
+- [TreeView] React 19 support (#15557) @arminmeh
+
+#### `@mui/x-tree-view-pro@7.23.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-tree-view@7.23.0`.
+
+### Docs
+
+- [docs] Add data caching to lazy loaded detail panel demo (#15555) @cherniavskii
+- [docs] Remove selectors section from list view docs (#15639) @KenanYusuf
+- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
+
+### Core
+
+- [core] Update @mui/monorepo (#15574) @oliviertassinari
+
 ## 7.22.3
 
 _Nov 21, 2024_

package/DataGridPro/DataGridPro.js

@@ -989,5 +989,13 @@ DataGridProRaw.propTypes = {
    * If `true`, the Data Grid will auto span the cells over the rows having the same value.
    * @default false
    */
-  unstable_rowSpanning: _propTypes.default.bool
+  unstable_rowSpanning: _propTypes.default.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: _propTypes.default.bool
 };

package/README.md

@@ -15,9 +15,9 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@mui/material": "^5.15.14 || ^6.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -98,7 +98,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
-    if (item.value && !updatedItem.value) {
+    if (item.value && updatedItem.value === undefined) {
       apiRef.current.deleteFilterItem(updatedItem);
       return;
     }
@@ -199,7 +199,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const classes = useUtilityClasses(ownerState);
   const isNoInputOperator = currentOperator.requiresFilterValue === false;
-  const isApplied = Boolean(item?.value) || isNoInputOperator;
+  const isApplied = item?.value !== undefined || isNoInputOperator;
   const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
@@ -269,7 +269,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   /**
-   * Class name that will be added in the column header cell.
+   * Class name added to the column header cell.
    */
   headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   headerFilterMenuRef: _propTypes.default.shape({

package/esm/DataGridPro/DataGridPro.js

@@ -982,5 +982,13 @@ DataGridProRaw.propTypes = {
    * If `true`, the Data Grid will auto span the cells over the rows having the same value.
    * @default false
    */
-  unstable_rowSpanning: PropTypes.bool
+  unstable_rowSpanning: PropTypes.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool
 };

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -90,7 +90,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
-    if (item.value && !updatedItem.value) {
+    if (item.value && updatedItem.value === undefined) {
       apiRef.current.deleteFilterItem(updatedItem);
       return;
     }
@@ -191,7 +191,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const classes = useUtilityClasses(ownerState);
   const isNoInputOperator = currentOperator.requiresFilterValue === false;
-  const isApplied = Boolean(item?.value) || isNoInputOperator;
+  const isApplied = item?.value !== undefined || isNoInputOperator;
   const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
-   * Class name that will be added in the column header cell.
+   * Class name added to the column header cell.
    */
   headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   headerFilterMenuRef: PropTypes.shape({

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

@@ -52,7 +52,7 @@ export const useGridDataSource = (apiRef, props) => {
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
       apiRef.current.setRows(rows);
-      if (cachedData.rowCount) {
+      if (cachedData.rowCount !== undefined) {
         apiRef.current.setRowCount(cachedData.rowCount);
       }
       return;
@@ -64,7 +64,7 @@ export const useGridDataSource = (apiRef, props) => {
     try {
       const getRowsResponse = await getRows(fetchParams);
       apiRef.current.unstable_dataSource.cache.set(fetchParams, getRowsResponse);
-      if (getRowsResponse.rowCount) {
+      if (getRowsResponse.rowCount !== undefined) {
         apiRef.current.setRowCount(getRowsResponse.rowCount);
       }
       apiRef.current.setRows(getRowsResponse.rows);

package/esm/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -60,14 +60,31 @@ export function addPinnedRow({
   });
 }
 export const useGridRowPinningPreProcessors = apiRef => {
+  const prevPinnedRowsCacheRef = React.useRef(null);
   const addPinnedRows = React.useCallback(groupingParams => {
     const pinnedRowsCache = apiRef.current.caches.pinnedRows || {};
+    const prevPinnedRowsCache = prevPinnedRowsCacheRef.current;
+    prevPinnedRowsCacheRef.current = pinnedRowsCache;
     let newGroupingParams = _extends({}, groupingParams, {
       additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
         // reset pinned rows state
         pinnedRows: {}
       })
     });
+    if (prevPinnedRowsCache) {
+      const pinnedRowCleanup = rowId => {
+        const node = newGroupingParams.tree[rowId];
+        if (node?.type === 'pinnedRow') {
+          delete newGroupingParams.tree[rowId];
+          delete newGroupingParams.dataRowIdToModelLookup[rowId];
+          delete newGroupingParams.dataRowIdToIdLookup[rowId];
+          delete apiRef.current.caches.rows.dataRowIdToIdLookup[rowId];
+          delete apiRef.current.caches.rows.dataRowIdToModelLookup[rowId];
+        }
+      };
+      prevPinnedRowsCache.topIds?.forEach(pinnedRowCleanup);
+      prevPinnedRowsCache.bottomIds?.forEach(pinnedRowCleanup);
+    }
     pinnedRowsCache.topIds?.forEach(rowId => {
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
   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/dataSource/useGridDataSource.js

@@ -61,7 +61,7 @@ const useGridDataSource = (apiRef, props) => {
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
       apiRef.current.setRows(rows);
-      if (cachedData.rowCount) {
+      if (cachedData.rowCount !== undefined) {
         apiRef.current.setRowCount(cachedData.rowCount);
       }
       return;
@@ -73,7 +73,7 @@ const useGridDataSource = (apiRef, props) => {
     try {
       const getRowsResponse = await getRows(fetchParams);
       apiRef.current.unstable_dataSource.cache.set(fetchParams, getRowsResponse);
-      if (getRowsResponse.rowCount) {
+      if (getRowsResponse.rowCount !== undefined) {
         apiRef.current.setRowCount(getRowsResponse.rowCount);
       }
       apiRef.current.setRows(getRowsResponse.rows);

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
 import { GridRowId, GridRowModel } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-import { GridPinnedRowsProp } from './gridRowPinningInterface';
+import type { GridPinnedRowsProp } from './gridRowPinningInterface';
 type GridPinnedRowPosition = keyof GridPinnedRowsProp;
 export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, isAutoGenerated, }: {
     groupingParams: GridHydrateRowsValue;

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -69,14 +69,31 @@ function addPinnedRow({
   });
 }
 const useGridRowPinningPreProcessors = apiRef => {
+  const prevPinnedRowsCacheRef = React.useRef(null);
   const addPinnedRows = React.useCallback(groupingParams => {
     const pinnedRowsCache = apiRef.current.caches.pinnedRows || {};
+    const prevPinnedRowsCache = prevPinnedRowsCacheRef.current;
+    prevPinnedRowsCacheRef.current = pinnedRowsCache;
     let newGroupingParams = (0, _extends2.default)({}, groupingParams, {
       additionalRowGroups: (0, _extends2.default)({}, groupingParams.additionalRowGroups, {
         // reset pinned rows state
         pinnedRows: {}
       })
     });
+    if (prevPinnedRowsCache) {
+      const pinnedRowCleanup = rowId => {
+        const node = newGroupingParams.tree[rowId];
+        if (node?.type === 'pinnedRow') {
+          delete newGroupingParams.tree[rowId];
+          delete newGroupingParams.dataRowIdToModelLookup[rowId];
+          delete newGroupingParams.dataRowIdToIdLookup[rowId];
+          delete apiRef.current.caches.rows.dataRowIdToIdLookup[rowId];
+          delete apiRef.current.caches.rows.dataRowIdToModelLookup[rowId];
+        }
+      };
+      prevPinnedRowsCache.topIds?.forEach(pinnedRowCleanup);
+      prevPinnedRowsCache.bottomIds?.forEach(pinnedRowCleanup);
+    }
     pinnedRowsCache.topIds?.forEach(rowId => {
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,

package/index.js

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

package/modern/DataGridPro/DataGridPro.js

@@ -982,5 +982,13 @@ DataGridProRaw.propTypes = {
    * If `true`, the Data Grid will auto span the cells over the rows having the same value.
    * @default false
    */
-  unstable_rowSpanning: PropTypes.bool
+  unstable_rowSpanning: PropTypes.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool
 };

package/modern/components/headerFiltering/GridHeaderFilterCell.js

@@ -90,7 +90,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const currentOperator = React.useMemo(() => filterOperators.find(operator => operator.value === item.operator) ?? filterOperators[0], [item.operator, filterOperators]);
   const InputComponent = colDef.filterable || isFilterReadOnly ? currentOperator.InputComponent ?? defaultInputComponents[colDef.type] : null;
   const applyFilterChanges = React.useCallback(updatedItem => {
-    if (item.value && !updatedItem.value) {
+    if (item.value && updatedItem.value === undefined) {
       apiRef.current.deleteFilterItem(updatedItem);
       return;
     }
@@ -191,7 +191,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const classes = useUtilityClasses(ownerState);
   const isNoInputOperator = currentOperator.requiresFilterValue === false;
-  const isApplied = Boolean(item?.value) || isNoInputOperator;
+  const isApplied = item?.value !== undefined || isNoInputOperator;
   const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;
   return /*#__PURE__*/_jsxs("div", _extends({
@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
-   * Class name that will be added in the column header cell.
+   * Class name added to the column header cell.
    */
   headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   headerFilterMenuRef: PropTypes.shape({

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

@@ -52,7 +52,7 @@ export const useGridDataSource = (apiRef, props) => {
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
       apiRef.current.setRows(rows);
-      if (cachedData.rowCount) {
+      if (cachedData.rowCount !== undefined) {
         apiRef.current.setRowCount(cachedData.rowCount);
       }
       return;
@@ -64,7 +64,7 @@ export const useGridDataSource = (apiRef, props) => {
     try {
       const getRowsResponse = await getRows(fetchParams);
       apiRef.current.unstable_dataSource.cache.set(fetchParams, getRowsResponse);
-      if (getRowsResponse.rowCount) {
+      if (getRowsResponse.rowCount !== undefined) {
         apiRef.current.setRowCount(getRowsResponse.rowCount);
       }
       apiRef.current.setRows(getRowsResponse.rows);

package/modern/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -60,14 +60,31 @@ export function addPinnedRow({
   });
 }
 export const useGridRowPinningPreProcessors = apiRef => {
+  const prevPinnedRowsCacheRef = React.useRef(null);
   const addPinnedRows = React.useCallback(groupingParams => {
     const pinnedRowsCache = apiRef.current.caches.pinnedRows || {};
+    const prevPinnedRowsCache = prevPinnedRowsCacheRef.current;
+    prevPinnedRowsCacheRef.current = pinnedRowsCache;
     let newGroupingParams = _extends({}, groupingParams, {
       additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
         // reset pinned rows state
         pinnedRows: {}
       })
     });
+    if (prevPinnedRowsCache) {
+      const pinnedRowCleanup = rowId => {
+        const node = newGroupingParams.tree[rowId];
+        if (node?.type === 'pinnedRow') {
+          delete newGroupingParams.tree[rowId];
+          delete newGroupingParams.dataRowIdToModelLookup[rowId];
+          delete newGroupingParams.dataRowIdToIdLookup[rowId];
+          delete apiRef.current.caches.rows.dataRowIdToIdLookup[rowId];
+          delete apiRef.current.caches.rows.dataRowIdToModelLookup[rowId];
+        }
+      };
+      prevPinnedRowsCache.topIds?.forEach(pinnedRowCleanup);
+      prevPinnedRowsCache.bottomIds?.forEach(pinnedRowCleanup);
+    }
     pinnedRowsCache.topIds?.forEach(rowId => {
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.22.3
+ * @mui/x-data-grid-pro v7.23.1
  *
  * @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 = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
   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.22.3",
+  "version": "7.23.1",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -39,17 +39,17 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "7.22.3",
-    "@mui/x-internals": "7.21.0",
-    "@mui/x-license": "7.21.0"
+    "@mui/x-internals": "7.23.0",
+    "@mui/x-license": "7.23.0",
+    "@mui/x-data-grid": "7.23.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

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 = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMzM1MzIwMDAwMA==";
   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