@mui/x-data-grid 7.27.3 → 7.28.1

package/CHANGELOG.md

@@ -3,6 +3,143 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.28.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@jyash97, @nusr.
+
+Following are all team members who have contributed to this release:
+@arminmeh, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.28.1`
+
+- [DataGrid] Fix error while editing rows with custom id (@arminmeh) (#17050)
+
+#### `@mui/x-data-grid-pro@7.28.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.28.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (@arminmeh) (#17032)
+
+#### `@mui/x-data-grid-premium@7.28.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.28.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (@arminmeh) (#17074)
+
+### Tree View
+
+#### `@mui/x-tree-view@7.28.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.28.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-tree-view@7.28.1`, plus:
+
+- [TreeView] Allow moving an item after the last children of some other item (@jyash97) (#17065)
+
+### Docs
+
+- [docs] Fix Data Grid advanced list view demo (#17066) @KenanYusuf
+- [docs] Fix custom detail panel toggle state update (@nusr) (#17018)
+
+## 7.28.0
+
+_Mar 17, 2025_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add support for `@mui/material` version 7 in all X packages
+- 🐞 Bugfixes
+- 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
+- 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@Blake-McCullough, @hlavacz, @yelahj, @k-rajat19, @nusr.
+Following are all team members who have contributed to this release:
+@arminmeh, @flaviendelangle, @LukasTy, @michelengelen, @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.28.0`
+
+- [DataGrid] Add click propagation and prevents default on `toggleMenu` click (#16909) @michelengelen
+- [DataGrid] Fix `processRowUpdate()` error if the row is removed before it is executed (#16904) @arminmeh
+- [DataGrid] Fix bug with adding and removing columns in active edit state (#16916) @Blake-McCullough
+- [DataGrid] Fix visual issue with pinned columns and row spanning (#16942) @MBilalShafi
+- [DataGrid] Make column header menu button aria-labels unique (#16925) @owais635
+- [DataGrid] Fix `printOptions` not respecting `hideFooter` root prop (#16915) @k-rajat19
+- [l10n] Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales (#16917 and #16887) @nusr
+- [l10n] Improve Czech (cs-CZ) and Slovak (sk-Sk) locales (#16996) @hlavacz
+- [l10n] Improve Korean (ko-KR) locale (#16998) @yelahj
+
+#### `@mui/x-data-grid-pro@7.28.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.28.0`, plus:
+
+- [DataGridPro] Fix header filters not displaying restored values (#16976) @MBilalShafi
+- [DataGridPro] Fix infinite loading not reacting when scrolling to the end (#16939) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.28.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.28.0`, plus:
+
+- [DataGridPremium] Fix selection propagation issues with controlled state (#16995) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.28.0`
+
+- [l10n] Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales (#16997) @nusr
+
+#### `@mui/x-date-pickers-pro@7.28.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.28.0`, plus:
+
+- [DateRangeCalendar] Do not update the previewed day when hovering a day and the value is empty (#16892) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@7.28.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.28.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.28.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.28.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.28.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.28.0`.
+
+### Docs
+
+- [docs] Fix link to the lazy loading demo for the DataGrid (#16912) @nusr
+
+### Core
+
+- [core] Allow `@mui/material` v7 in dependencies (#16951) @LukasTy
+- [infra] Make tests on React 18 part of pipeline (#16958) @LukasTy
+
 ## 7.27.3
 
 _Mar 7, 2025_

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.14 || ^6.0.0",
+  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.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/cell/GridActionsCell.js

@@ -90,7 +90,9 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
-  const toggleMenu = () => {
+  const toggleMenu = event => {
+    event.stopPropagation();
+    event.preventDefault();
     if (open) {
       hideMenu();
     } else {

package/components/cell/GridCell.js

@@ -193,9 +193,9 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     const isRightPinned = pinnedPosition === PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
-      cellStyle.zIndex = 5;
+      cellStyle.zIndex = 10;
       if (isLeftPinned || isRightPinned) {
-        cellStyle.zIndex = 6;
+        cellStyle.zIndex = 40;
       }
     }
     return cellStyle;

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -35,6 +35,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
     event.stopPropagation();
     apiRef.current.toggleColumnMenu(colDef.field);
   }, [apiRef, colDef.field]);
+  const columnName = colDef.headerName ?? colDef.field;
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
@@ -45,7 +46,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         ref: iconButtonRef,
         tabIndex: -1,
         className: classes.button,
-        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        "aria-label": apiRef.current.getLocaleText('columnMenuAriaLabel')(columnName),
         size: "small",
         onClick: handleMenuIconClick,
         "aria-haspopup": "menu",

package/components/columnSelection/GridHeaderCheckbox.js

@@ -55,7 +55,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to an object to make O(1) checking if a row exists or not
     // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
@@ -63,7 +63,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       acc[id] = true;
       return acc;
     }, {});
-  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);

package/components/containers/GridRootStyles.js

@@ -485,14 +485,14 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 4,
+      zIndex: 40,
       // Should be above the column separator
       background: 'var(--DataGrid-pinnedBackground)'
     },
     [`& .${c.columnSeparator}`]: {
       position: 'absolute',
       overflow: 'hidden',
-      zIndex: 3,
+      zIndex: 30,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -732,7 +732,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 3,
+      zIndex: 30,
       background: 'var(--DataGrid-pinnedBackground)',
       '&.Mui-selected': {
         backgroundColor: pinnedSelectedBackgroundColor

package/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
@@ -10,6 +11,9 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFiel
      */
     isFilterActive?: boolean;
 };
+export type ItemPlusTag = GridFilterItem & {
+    fromInput?: string;
+};
 declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
 declare namespace GridFilterInputValue {
     var propTypes: any;

package/components/panel/filterPanel/index.d.ts

@@ -1,5 +1,5 @@
 export * from './GridFilterForm';
-export * from './GridFilterInputValue';
+export { GridFilterInputValue, type GridTypeFilterInputValueProps } from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
 export * from './GridFilterInputBoolean';

package/components/panel/filterPanel/index.js

@@ -1,5 +1,5 @@
 export * from "./GridFilterForm.js";
-export * from "./GridFilterInputValue.js";
+export { GridFilterInputValue } from "./GridFilterInputValue.js";
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
 export * from "./GridFilterInputBoolean.js";

package/components/virtualization/GridBottomContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 4,
+  zIndex: 40,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
 });
 export function GridBottomContainer(props) {

package/components/virtualization/GridTopContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 4,
+  zIndex: 40,
   top: 0
 });
 export function GridTopContainer(props) {

package/components/virtualization/GridVirtualScrollbar.js

@@ -21,9 +21,9 @@ const useUtilityClasses = (ownerState, position) => {
 const Scrollbar = styled('div')({
   position: 'absolute',
   display: 'inline-block',
-  zIndex: 6,
+  zIndex: 60,
   '&:hover': {
-    zIndex: 7
+    zIndex: 70
   },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need

package/constants/localeTextConstants.js

@@ -94,6 +94,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterValueFalse: 'false',
   // Column menu text
   columnMenuLabel: 'Menu',
+  columnMenuAriaLabel: columnName => `${columnName} column menu`,
   columnMenuShowColumns: 'Show columns',
   columnMenuManageColumns: 'Manage columns',
   columnMenuFilter: 'Filter',

package/hooks/features/editing/useGridRowEditing.js

@@ -21,6 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
+  const prevRowValuesLookup = React.useRef({});
   const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
@@ -311,6 +312,7 @@ export const useGridRowEditing = (apiRef, props) => {
       deleteValue,
       initialValue
     } = params;
+    const row = apiRef.current.getRow(id);
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
@@ -333,6 +335,7 @@ export const useGridRowEditing = (apiRef, props) => {
       };
       return acc;
     }, {});
+    prevRowValuesLookup.current[id] = row;
     updateOrDeleteRowState(id, newProps);
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
@@ -343,7 +346,7 @@ export const useGridRowEditing = (apiRef, props) => {
       const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({
         id,
-        row: apiRef.current.getRow(id),
+        row,
         props: newProps[field],
         hasChanged: newValue !== value
       })).then(processedProps => {
@@ -382,13 +385,14 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       updateOrDeleteRowState(id, null);
       updateRowInRowModesModel(id, null);
+      delete prevRowValuesLookup.current[id];
     };
     if (ignoreModifications) {
       finishRowEditMode();
       return;
     }
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
+    const row = prevRowValuesLookup.current[id];
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
     if (isSomeFieldProcessingProps) {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
@@ -405,11 +409,14 @@ export const useGridRowEditing = (apiRef, props) => {
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
-        // Revert the mode in the rowModesModel prop back to "edit"
-        updateRowInRowModesModel(id, {
-          mode: GridRowModes.Edit
-        });
+        // The row might have been deleted
+        if (prevRowModesModel.current[id]) {
+          prevRowModesModel.current[id].mode = GridRowModes.Edit;
+          // Revert the mode in the rowModesModel prop back to "edit"
+          updateRowInRowModesModel(id, {
+            mode: GridRowModes.Edit
+          });
+        }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -540,10 +547,12 @@ export const useGridRowEditing = (apiRef, props) => {
     if (!editingState[id]) {
       return apiRef.current.getRow(id);
     }
-    let rowUpdate = _extends({}, row);
+    let rowUpdate = _extends({}, prevRowValuesLookup.current[id], row);
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
-      if (column.valueSetter) {
+      // Column might have been removed
+      // see https://github.com/mui/mui-x/pull/16888
+      if (column?.valueSetter) {
         rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;

package/hooks/features/export/useGridPrintExport.js

@@ -106,12 +106,13 @@ export const useGridPrintExport = (apiRef, props) => {
     gridClone.style.contain = 'size';
     let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
+    const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
-    if (normalizeOptions.hideFooter) {
-      gridClone.querySelector(`.${gridClasses.footerContainer}`)?.remove();
+    if (normalizeOptions.hideFooter && gridFooterElement) {
+      gridFooterElement.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -120,11 +121,10 @@ export const useGridPrintExport = (apiRef, props) => {
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
-    if (!normalizeOptions.hideFooter) {
+    if (!normalizeOptions.hideFooter && gridFooterElement) {
       // the footer is always being placed at the bottom of the page as if all rows are exported
       // so if getRowsToExport is being used to only export a subset of rows then we need to
       // adjust the footer position to be correctly placed at the bottom of the grid
-      const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
       gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
       gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;

package/hooks/features/filter/useGridFilter.js

@@ -228,6 +228,11 @@ export const useGridFilter = (apiRef, props) => {
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const filterModelToExport = gridFilterModelSelector(apiRef);
+
+    // Remove the additional `fromInput` property from the filter model
+    filterModelToExport.items.forEach(item => {
+      delete item.fromInput;
+    });
     const shouldExportFilterModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
     !context.exportOnlyDirtyModels ||

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useEventCallback } from '@mui/material/utils';
 import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
@@ -213,6 +214,19 @@ export const useGridRowSelection = (apiRef, props) => {
       apiRef.current.setRowSelectionModel(Array.from(newSelection));
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
+  const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
+    if (!isNestedData || !applyAutoSelection || inputSelectionModel.length === 0) {
+      return inputSelectionModel;
+    }
+    const propagatedSelectionModel = new Set(inputSelectionModel);
+    const addRow = rowId => {
+      propagatedSelectionModel.add(rowId);
+    };
+    for (const id of inputSelectionModel) {
+      findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow, propagatedSelectionModel);
+    }
+    return Array.from(propagatedSelectionModel);
+  }, [apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, isNestedData, applyAutoSelection]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -239,7 +253,8 @@ export const useGridRowSelection = (apiRef, props) => {
   };
   const selectionPrivateApi = {
     selectRows,
-    selectRowRange
+    selectRowRange,
+    getPropagatedRowSelectionModel
   };
   useGridApiMethod(apiRef, selectionPublicApi, 'public');
   useGridApiMethod(apiRef, selectionPrivateApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
@@ -247,7 +262,11 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
+  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+    if (isFirstRender.current) {
+      return;
+    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -427,8 +446,27 @@ export const useGridRowSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
+  const syncControlledState = useEventCallback(() => {
+    if (!props.rowSelection) {
+      apiRef.current.setRowSelectionModel([]);
+      return;
+    }
+    if (propRowSelectionModel === undefined) {
+      return;
+    }
+    if (!applyAutoSelection || !isNestedData || propRowSelectionModel.length === 0) {
+      apiRef.current.setRowSelectionModel(propRowSelectionModel);
+      return;
+    }
+    const newSelectionModel = apiRef.current.getPropagatedRowSelectionModel(propRowSelectionModel);
+    if (newSelectionModel.length !== propRowSelectionModel.length || !newSelectionModel.every(id => propRowSelectionModel.includes(id))) {
+      apiRef.current.setRowSelectionModel(newSelectionModel);
+      return;
+    }
+    apiRef.current.setRowSelectionModel(propRowSelectionModel);
+  });
   useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
-  useGridApiEventHandler(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
   useGridApiEventHandler(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));
   useGridApiEventHandler(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
@@ -439,15 +477,8 @@ export const useGridRowSelection = (apiRef, props) => {
    * EFFECTS
    */
   React.useEffect(() => {
-    if (propRowSelectionModel !== undefined) {
-      apiRef.current.setRowSelectionModel(propRowSelectionModel);
-    }
-  }, [apiRef, propRowSelectionModel, props.rowSelection]);
-  React.useEffect(() => {
-    if (!props.rowSelection) {
-      apiRef.current.setRowSelectionModel([]);
-    }
-  }, [apiRef, props.rowSelection]);
+    syncControlledState();
+  }, [apiRef, propRowSelectionModel, props.rowSelection, syncControlledState]);
   const isStateControlled = propRowSelectionModel != null;
   React.useEffect(() => {
     if (isStateControlled || !props.rowSelection) {
@@ -476,4 +507,9 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+  }, []);
 };

package/hooks/features/rowSelection/utils.d.ts

@@ -2,12 +2,12 @@ import { RefObject } from '@mui/x-internals/types';
 import type { GridRowId, GridRowTreeConfig } from '../../../models/gridRows';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import type { GridRowSelectionPropagation } from '../../../models/gridRowSelectionModel';
+import { type GridRowSelectionPropagation } from '../../../models/gridRowSelectionModel';
 export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
 export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, {
     isIndeterminate: boolean;
     isChecked: boolean;
 }>;
 export declare function isMultipleRowSelectionEnabled(props: Pick<DataGridProcessedProps, 'signature' | 'disableMultipleRowSelection' | 'checkboxSelection'>): boolean;
-export declare const findRowsToSelect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void) => void;
+export declare const findRowsToSelect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void, selectedIds?: Set<GridRowId>) => void;
 export declare const findRowsToDeselect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, deselectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, removeRow: (rowId: GridRowId) => void) => void;

package/hooks/features/rowSelection/utils.js

@@ -2,7 +2,7 @@ import { GridSignature } from "../../utils/useGridApiEventHandler.js";
 import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
 import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
 import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
-import { selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
+import { gridRowSelectionStateSelector, selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { createSelector } from "../../../utils/createSelector.js";
 export const ROW_SELECTION_PROPAGATION_DEFAULT = {
@@ -94,9 +94,8 @@ const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
   const parentNode = tree[parent];
   return parentNode.children.filter(childId => childId !== id && filteredRows[childId] !== false);
 };
-export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow) => {
+export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow, selectedIds = new Set(gridRowSelectionStateSelector(apiRef.current.state))) => {
   const filteredRows = gridFilteredRowsLookupSelector(apiRef);
-  const selectedIdsLookup = selectedIdsLookupSelector(apiRef);
   const selectedDescendants = new Set([]);
   if (!autoSelectDescendants && !autoSelectParents) {
     return;
@@ -113,11 +112,14 @@ export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendant
   }
   if (autoSelectParents) {
     const checkAllDescendantsSelected = rowId => {
-      if (selectedIdsLookup[rowId] !== rowId && !selectedDescendants.has(rowId)) {
+      if (!selectedIds.has(rowId) && !selectedDescendants.has(rowId)) {
         return false;
       }
       const node = tree[rowId];
-      if (node?.type !== 'group') {
+      if (!node) {
+        return false;
+      }
+      if (node.type !== 'group') {
         return true;
       }
       return node.children.every(checkAllDescendantsSelected);
@@ -126,7 +128,7 @@ export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendant
       const siblings = getFilteredRowNodeSiblings(tree, filteredRows, rowId);
       if (siblings.length === 0 || siblings.every(checkAllDescendantsSelected)) {
         const rowNode = tree[rowId];
-        const parent = rowNode.parent;
+        const parent = rowNode?.parent;
         if (parent != null && parent !== GRID_ROOT_GROUP_ID && apiRef.current.isRowSelectable(parent)) {
           addRow(parent);
           selectedDescendants.add(parent);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.27.3
+ * @mui/x-data-grid v7.28.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/arSD.js

@@ -97,6 +97,7 @@ const arSDGrid = {
   filterValueFalse: 'خاطئ',
   // Column menu text
   columnMenuLabel: 'القائمة',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'إظهار الأعمدة',
   columnMenuManageColumns: 'إدارة الأعمدة',
   columnMenuFilter: 'المرشِح',

package/locales/beBY.js

@@ -113,6 +113,7 @@ const beBYGrid = {
   filterValueFalse: 'няпраўда',
   // Column menu text
   columnMenuLabel: 'Меню',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Паказаць слупкі',
   columnMenuManageColumns: 'Кіраваць слупкамі',
   columnMenuFilter: 'Фільтр',

package/locales/bgBG.js

@@ -97,6 +97,7 @@ const bgBGGrid = {
   filterValueFalse: 'невярно',
   // Column menu text
   columnMenuLabel: 'Меню',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Покажи колоните',
   columnMenuManageColumns: 'Управление на колони',
   columnMenuFilter: 'Филтри',