@mui/x-data-grid 7.27.3 → 7.28.1

package/modern/locales/svSE.js

@@ -97,6 +97,7 @@ const svSEGrid = {
   filterValueFalse: 'falskt',
   // Column menu text
   columnMenuLabel: 'Meny',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Visa kolumner',
   columnMenuManageColumns: 'Hantera kolumner',
   columnMenuFilter: 'Filtrera',

package/modern/locales/trTR.js

@@ -96,6 +96,7 @@ const trTRGrid = {
   filterValueFalse: 'yanlış',
   // Column menu text
   columnMenuLabel: 'Menü',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Sütunları göster',
   columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre Ekle',

package/modern/locales/ukUA.js

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

package/modern/locales/urPK.js

@@ -96,6 +96,7 @@ const urPKGrid = {
   filterValueFalse: 'غلط',
   // Column menu text
   columnMenuLabel: 'مینیو',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'کالم دکھائیں',
   columnMenuManageColumns: 'کالم مینج کریں',
   columnMenuFilter: 'فلٹر',

package/modern/locales/viVN.js

@@ -97,6 +97,7 @@ const viVNGrid = {
   filterValueFalse: 'Không',
   // Column menu text
   columnMenuLabel: 'Danh mục',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Danh sách cột',
   columnMenuManageColumns: 'Quản lý cột',
   columnMenuFilter: 'Bộ lọc',

package/modern/locales/zhCN.js

@@ -96,6 +96,7 @@ const zhCNGrid = {
   filterValueFalse: '假',
   // Column menu text
   columnMenuLabel: '菜单',
+  columnMenuAriaLabel: columnName => `${columnName} 列菜单`,
   columnMenuShowColumns: '显示',
   columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',

package/modern/locales/zhHK.js

@@ -30,12 +30,11 @@ const zhHKGrid = {
   toolbarExportPrint: '列印',
   toolbarExportExcel: '下載為 Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '搜尋',
+  columnsManagementNoColumns: '沒有列',
+  columnsManagementShowHideAllText: '顯示/隱藏所有',
+  columnsManagementReset: '重置',
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '新增過濾器',
   filterPanelRemoveAll: '移除所有',
@@ -49,9 +48,9 @@ const zhHKGrid = {
   filterPanelInputPlaceholder: '過濾值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等於',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等於',
   filterOperatorStartsWith: '以。。開始',
   filterOperatorEndsWith: '以。。結束',
   filterOperatorIs: '是',
@@ -71,9 +70,9 @@ const zhHKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等於',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等於',
   headerFilterOperatorStartsWith: '以。。開始',
   headerFilterOperatorEndsWith: '以。。結束',
   headerFilterOperatorIs: '是',
@@ -87,7 +86,7 @@ const zhHKGrid = {
   headerFilterOperatorIsAnyOf: '是以下任一個',
   'headerFilterOperator=': '等於',
   'headerFilterOperator!=': '不等於',
-  'headerFilterOperator>': '比...更棒',
+  'headerFilterOperator>': '大於',
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '少於',
   'headerFilterOperator<=': '小於或等於',
@@ -97,6 +96,7 @@ const zhHKGrid = {
   filterValueFalse: '錯誤的',
   // Column menu text
   columnMenuLabel: '選單',
+  columnMenuAriaLabel: columnName => `${columnName} 欄目選單`,
   columnMenuShowColumns: '顯示欄目',
   columnMenuManageColumns: '管理欄目',
   columnMenuFilter: '篩選',

package/modern/locales/zhTW.js

@@ -30,12 +30,11 @@ const zhTWGrid = {
   toolbarExportPrint: '列印',
   toolbarExportExcel: '匯出 Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '搜尋',
+  columnsManagementNoColumns: '沒有欄位',
+  columnsManagementShowHideAllText: '顯示/隱藏所有',
+  columnsManagementReset: '重置',
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '增加篩選器',
   filterPanelRemoveAll: '清除所有',
@@ -49,9 +48,9 @@ const zhTWGrid = {
   filterPanelInputPlaceholder: '篩選值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等於',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等於',
   filterOperatorStartsWith: '以...開頭',
   filterOperatorEndsWith: '以...結束',
   filterOperatorIs: '為',
@@ -71,9 +70,9 @@ const zhTWGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等於',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等於',
   headerFilterOperatorStartsWith: '以...開頭',
   headerFilterOperatorEndsWith: '以...結束',
   headerFilterOperatorIs: '為',
@@ -97,6 +96,7 @@ const zhTWGrid = {
   filterValueFalse: '假',
   // Column menu text
   columnMenuLabel: '選單',
+  columnMenuAriaLabel: columnName => `${columnName} 欄位選單`,
   columnMenuShowColumns: '顯示欄位',
   columnMenuManageColumns: '管理欄位',
   columnMenuFilter: '篩選器',

package/node/components/cell/GridActionsCell.js

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

package/node/components/cell/GridCell.js

@@ -201,9 +201,9 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     const isRightPinned = pinnedPosition === _constants.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/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -43,6 +43,7 @@ const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.m
     event.stopPropagation();
     apiRef.current.toggleColumnMenu(colDef.field);
   }, [apiRef, colDef.field]);
+  const columnName = colDef.headerName ?? colDef.field;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
@@ -53,7 +54,7 @@ const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.m
         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/node/components/columnSelection/GridHeaderCheckbox.js

@@ -63,7 +63,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
 
   // 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
@@ -71,7 +71,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
       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/node/components/containers/GridRootStyles.js

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

package/node/components/panel/filterPanel/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  GridFilterInputValue: true,
   GridFilterPanel: true
 };
+Object.defineProperty(exports, "GridFilterInputValue", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterInputValue.GridFilterInputValue;
+  }
+});
 Object.defineProperty(exports, "GridFilterPanel", {
   enumerable: true,
   get: function () {
@@ -25,17 +32,6 @@ Object.keys(_GridFilterForm).forEach(function (key) {
   });
 });
 var _GridFilterInputValue = require("./GridFilterInputValue");
-Object.keys(_GridFilterInputValue).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridFilterInputValue[key];
-    }
-  });
-});
 var _GridFilterInputDate = require("./GridFilterInputDate");
 Object.keys(_GridFilterInputDate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/components/virtualization/GridBottomContainer.js

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

package/node/components/virtualization/GridTopContainer.js

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

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -28,9 +28,9 @@ const useUtilityClasses = (ownerState, position) => {
 const Scrollbar = (0, _system.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/node/constants/localeTextConstants.js

@@ -100,6 +100,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.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/node/hooks/features/editing/useGridRowEditing.js

@@ -29,6 +29,7 @@ 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 {
@@ -319,6 +320,7 @@ const useGridRowEditing = (apiRef, props) => {
       deleteValue,
       initialValue
     } = params;
+    const row = apiRef.current.getRow(id);
     const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
@@ -341,6 +343,7 @@ const useGridRowEditing = (apiRef, props) => {
       };
       return acc;
     }, {});
+    prevRowValuesLookup.current[id] = row;
     updateOrDeleteRowState(id, newProps);
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
@@ -351,7 +354,7 @@ const useGridRowEditing = (apiRef, props) => {
       const newValue = deleteValue ? (0, _utils3.getDefaultCellValue)(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({
         id,
-        row: apiRef.current.getRow(id),
+        row,
         props: newProps[field],
         hasChanged: newValue !== value
       })).then(processedProps => {
@@ -390,13 +393,14 @@ const useGridRowEditing = (apiRef, props) => {
       }
       updateOrDeleteRowState(id, null);
       updateRowInRowModesModel(id, null);
+      delete prevRowValuesLookup.current[id];
     };
     if (ignoreModifications) {
       finishRowEditMode();
       return;
     }
     const editingState = (0, _gridEditingSelectors.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 = _gridEditRowModel.GridRowModes.Edit;
@@ -413,11 +417,14 @@ const useGridRowEditing = (apiRef, props) => {
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
-        // Revert the mode in the rowModesModel prop back to "edit"
-        updateRowInRowModesModel(id, {
-          mode: _gridEditRowModel.GridRowModes.Edit
-        });
+        // The row might have been deleted
+        if (prevRowModesModel.current[id]) {
+          prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
+          // Revert the mode in the rowModesModel prop back to "edit"
+          updateRowInRowModesModel(id, {
+            mode: _gridEditRowModel.GridRowModes.Edit
+          });
+        }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -548,10 +555,12 @@ const useGridRowEditing = (apiRef, props) => {
     if (!editingState[id]) {
       return apiRef.current.getRow(id);
     }
-    let rowUpdate = (0, _extends2.default)({}, row);
+    let rowUpdate = (0, _extends2.default)({}, 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/node/hooks/features/export/useGridPrintExport.js

@@ -114,12 +114,13 @@ const useGridPrintExport = (apiRef, props) => {
     gridClone.style.contain = 'size';
     let gridToolbarElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.toolbarContainer}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.offsetHeight || 0;
+    const gridFooterElement = gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${_gridClasses.gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
-    if (normalizeOptions.hideFooter) {
-      gridClone.querySelector(`.${_gridClasses.gridClasses.footerContainer}`)?.remove();
+    if (normalizeOptions.hideFooter && gridFooterElement) {
+      gridFooterElement.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -128,11 +129,10 @@ 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.gridClasses.footerContainer}`);
       gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
       gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;

package/node/hooks/features/filter/useGridFilter.js

@@ -237,6 +237,11 @@ const useGridFilter = (apiRef, props) => {
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const filterModelToExport = (0, _gridFilterSelector.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/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowSelection = exports.rowSelectionStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/material/utils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -24,7 +25,7 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _constants = require("../../../internals/constants");
 var _gridClasses = require("../../../constants/gridClasses");
 var _domUtils = require("../../../utils/domUtils");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -72,7 +73,7 @@ const useGridRowSelection = (apiRef, props) => {
     disableRowSelectionOnClick,
     isRowSelectable: propIsRowSelectable
   } = props;
-  const canHaveMultipleSelection = (0, _utils.isMultipleRowSelectionEnabled)(props);
+  const canHaveMultipleSelection = (0, _utils2.isMultipleRowSelectionEnabled)(props);
   const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const isNestedData = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
@@ -144,7 +145,7 @@ const useGridRowSelection = (apiRef, props) => {
       if (isSelected) {
         addRow(id);
         if (applyAutoSelection) {
-          (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+          (0, _utils2.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
         }
       }
       apiRef.current.setRowSelectionModel(newSelection);
@@ -162,10 +163,10 @@ const useGridRowSelection = (apiRef, props) => {
       if (isSelected) {
         addRow(id);
         if (applyAutoSelection) {
-          (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+          (0, _utils2.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
         }
       } else if (applyAutoSelection) {
-        (0, _utils.findRowsToDeselect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
+        (0, _utils2.findRowsToDeselect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
       }
       const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
@@ -185,7 +186,7 @@ const useGridRowSelection = (apiRef, props) => {
             newSelection.add(rowId);
           };
           selectableIds.forEach(id => {
-            (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+            (0, _utils2.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           });
         }
       } else {
@@ -207,12 +208,12 @@ const useGridRowSelection = (apiRef, props) => {
         if (isSelected) {
           newSelection.add(id);
           if (applyAutoSelection) {
-            (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
+            (0, _utils2.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           }
         } else {
           removeRow(id);
           if (applyAutoSelection) {
-            (0, _utils.findRowsToDeselect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
+            (0, _utils2.findRowsToDeselect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, removeRow);
           }
         }
       });
@@ -222,6 +223,19 @@ 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) {
+      (0, _utils2.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
@@ -248,7 +262,8 @@ const useGridRowSelection = (apiRef, props) => {
   };
   const selectionPrivateApi = {
     selectRows,
-    selectRowRange
+    selectRowRange,
+    getPropagatedRowSelectionModel
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPublicApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionPrivateApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
@@ -256,7 +271,11 @@ const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
+  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+    if (isFirstRender.current) {
+      return;
+    }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
@@ -436,8 +455,27 @@ const useGridRowSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
+  const syncControlledState = (0, _utils.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);
+  });
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
@@ -448,15 +486,8 @@ 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) {
@@ -485,5 +516,10 @@ const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+  }, []);
 };
 exports.useGridRowSelection = useGridRowSelection;