@mui/x-data-grid 7.22.0 → 7.22.2

package/CHANGELOG.md

@@ -3,6 +3,132 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.2
+
+_Nov 8, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 👨🏽‍💻 API enhancements
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@clins1994, @GuillaumeMeheut, @k-rajat19.
+Following are all team members who have contributed to this release:
+@LukasTy, @MBilalShafi, @KenanYusuf, @arminmeh.
+
+### Upcoming alpha
+
+Keep an eye out for the MUI⠀X `v8.0.0-aplha.0` release soon. It will follow a weekly release schedule as always until it is stable.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.2`
+
+- [DataGrid] Fix `null` reference error in `GridVirtualScrollbar` (#15289) @MBilalShafi
+- [DataGrid] Fix filtering with `boolean` column type (#15257) @k-rajat19
+- [DataGrid] Improve row selection propagation trigger (#15274) @MBilalShafi
+- [DataGrid] Preprocess edit cell props on backspace/delete (#15223) @KenanYusuf
+- [DataGrid] Add a recipe to persist column width and order (#15309) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.22.2` [![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.22.2`, plus:
+
+- [DataGridPro] Apply default properties if they are not passed in a reorder column (#15320) @k-rajat19
+- [DataGridPro] Toggle row expansion with `Enter` key in Tree data (#15313) @k-rajat19
+
+#### `@mui/x-data-grid-premium@7.22.2` [![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.22.2`, plus:
+
+- [DataGridPremium] Fix incorrect rows selection count when selection propagation is enabled with row grouping (#15222) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.2`
+
+- [pickers] Add support for `moment-hijri@3.0.0` (#15248) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.2` [![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.22.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.22.2`
+
+- [charts] Allow `SeriesValueFormatter` to return `null` value (#15295) @clins1994
+- [charts] Allow configuring the `domainLimit` for each axis. (#15325) @GuillaumeMeheut
+
+#### `@mui/x-charts-pro@7.0.0-beta.7` [![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.22.2`.
+
+## 7.22.1
+
+_Nov 1, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Polish (pl-PL) locale on the Date Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@wojtkolos, @dpak-maurya, @k-rajat19.
+Following are all team members who have contributed to this release:
+@LukasTy, @arminmeh, @MBilalShafi, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.1`
+
+- [DataGrid] Fix right column group header border (#15152) @KenanYusuf
+- [DataGrid] Fix scroll jump when holding down arrow keys (#15167) @arminmeh
+- [DataGrid] Move `rowGroupingModelChange` handler to respective hook (#15127) @MBilalShafi
+- [DataGrid] Prevent error when deleting the last row (#15153) @dpak-maurya
+- [DataGrid] Fix overlay height in autoHeight mode (#15205) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.22.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.22.1`, plus:
+
+- [DataGridPro] Add list view tests (#15166) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+- [DataGridPremium] Keep focus on the grouping cell on space bar press #15155 @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.1`
+
+- [l10n] Improve Polish (pl-PL) locale (#15177) @wojtkolos
+
+#### `@mui/x-date-pickers-pro@7.22.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.22.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.1`
+
+- [TreeView] Export `TreeItem2DragAndDropOverlay` and `TreeItem2LabelInput` from the root of each package (#15208) @flaviendelangle
+- [TreeView] Fix drag and drop color usage (#15149) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.22.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.22.1`.
+
+### Docs
+
+- [docs] Add section explaining how to keep the selection while filtering in Data grid docs (#15199) @arminmeh
+
 ## 7.22.0
 
 _Oct 25, 2024_

package/colDef/gridBooleanOperators.js

@@ -1,14 +1,12 @@
-import { GridFilterInputBoolean } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
+import { GridFilterInputBoolean, sanitizeFilterItemValue } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
 export const getGridBooleanOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
+    const sanitizedValue = sanitizeFilterItemValue(filterItem.value);
+    if (sanitizedValue === undefined) {
       return null;
     }
-    const valueAsBoolean = String(filterItem.value) === 'true';
-    return value => {
-      return Boolean(value) === valueAsBoolean;
-    };
+    return value => Boolean(value) === sanitizedValue;
   },
   InputComponent: GridFilterInputBoolean
 }];

package/components/GridRow.js

@@ -16,7 +16,7 @@ import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";

package/components/cell/GridBooleanCell.js

@@ -10,6 +10,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -116,7 +117,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
+  if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

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

@@ -9,6 +9,7 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldP
      */
     isFilterActive?: boolean;
 };
+export declare const sanitizeFilterItemValue: (value: any) => boolean | undefined;
 declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
 declare namespace GridFilterInputBoolean {
     var propTypes: any;

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -7,6 +7,15 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const sanitizeFilterItemValue = value => {
+  if (String(value).toLowerCase() === 'true') {
+    return true;
+  }
+  if (String(value).toLowerCase() === 'false') {
+    return false;
+  }
+  return undefined;
+};
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -27,7 +36,7 @@ function GridFilterInputBoolean(props) {
       variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  const [filterValueState, setFilterValueState] = React.useState(item.value || '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = useGridRootProps();
   const labelId = useId();
   const selectId = useId();
@@ -35,14 +44,14 @@ function GridFilterInputBoolean(props) {
   const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
-    const value = event.target.value;
+    const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
     applyValue(_extends({}, item, {
-      value: Boolean(value)
+      value
     }));
   }, [applyValue, item]);
   React.useEffect(() => {
-    setFilterValueState(item.value || '');
+    setFilterValueState(sanitizeFilterItemValue(item.value));
   }, [item.value]);
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/_jsxs(BooleanOperatorContainer, {
@@ -57,7 +66,7 @@ function GridFilterInputBoolean(props) {
         labelId: labelId,
         id: selectId,
         label: label,
-        value: filterValueState,
+        value: filterValueState === undefined ? '' : String(filterValueState),
         onChange: onFilterChange,
         variant: variant,
         notched: variant === 'outlined' ? true : undefined,

package/components/virtualization/GridVirtualScrollbar.js

@@ -70,9 +70,13 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
   const onScrollerScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
+    lastPosition.current = scroller[propertyScroll];
     if (isLocked.current) {
       isLocked.current = false;
       return;
@@ -80,11 +84,13 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
     if (isLocked.current) {
       isLocked.current = false;
       return;

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -223,7 +223,6 @@ export const useGridColumnHeaders = props => {
       return null;
     }
     const {
-      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
@@ -292,7 +291,7 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length,
+        sectionLength: rowStructure.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/hooks/features/editing/useGridCellEditing.js

@@ -241,26 +241,45 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = useEventCallback(params => {
+  const updateStateToStartCellEditMode = useEventCallback(async params => {
     const {
       id,
       field,
       deleteValue,
       initialValue
     } = params;
-    let newValue = apiRef.current.getCellValue(id, field);
+    const value = apiRef.current.getCellValue(id, field);
+    let newValue = value;
     if (deleteValue) {
       newValue = getDefaultCellValue(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }
-    const newProps = {
+    const column = apiRef.current.getColumn(field);
+    const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
+    let newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false
+      isProcessingProps: shouldProcessEditCellProps
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
+    if (shouldProcessEditCellProps) {
+      newProps = await Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps,
+        hasChanged: newValue !== value
+      }));
+      // Check if still in edit mode before updating
+      if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
+        const editingState = gridEditRowsStateSelector(apiRef.current.state);
+        updateOrDeleteFieldState(id, field, _extends({}, newProps, {
+          value: editingState[id][field].value,
+          isProcessingProps: false
+        }));
+      }
+    }
   });
   const stopCellEditMode = React.useCallback(params => {
     const {

package/hooks/features/editing/useGridRowEditing.js

@@ -318,10 +318,11 @@ export const useGridRowEditing = (apiRef, props) => {
       if (!cellParams.isEditable) {
         return acc;
       }
+      const column = apiRef.current.getColumn(field);
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+          newValue = getDefaultCellValue(column);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -329,7 +330,7 @@ export const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false
+        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -337,6 +338,26 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
+    columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
+      const column = apiRef.current.getColumn(field);
+      const value = apiRef.current.getCellValue(id, field);
+      const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;
+      Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps[field],
+        hasChanged: newValue !== value
+      })).then(processedProps => {
+        // Check if still in edit mode before updating
+        if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
+          const editingState = gridEditRowsStateSelector(apiRef.current.state);
+          updateOrDeleteFieldState(id, field, _extends({}, processedProps, {
+            value: editingState[id][field].value,
+            isProcessingProps: false
+          }));
+        }
+      });
+    });
   });
   const stopRowEditMode = React.useCallback(params => {
     const {

package/hooks/features/focus/useGridFocus.js

@@ -335,7 +335,7 @@ export const useGridFocus = (apiRef, props) => {
           paginationMode: props.paginationMode
         });
         const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
-        nextRowId = nextRow.id ?? null;
+        nextRowId = nextRow?.id ?? null;
       }
       apiRef.current.setState(state => _extends({}, state, {
         focus: {

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
+import { GRID_TREE_DATA_GROUPING_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
+import { isGroupingColumn } from "../../../internals/utils/gridRowGroupingUtils.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
@@ -9,7 +11,6 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSel
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
 import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
@@ -458,9 +459,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             break;
           }
           const colDef = params.colDef;
-          if (colDef &&
-          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-          colDef.field === '__tree_data_group__') {
+          if (colDef && (colDef.field === GRID_TREE_DATA_GROUPING_FIELD || isGroupingColumn(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

package/hooks/features/listView/useGridListView.d.ts

@@ -7,4 +7,4 @@ export type GridListViewState = (GridListColDef & {
     computedWidth: number;
 }) | undefined;
 export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_listColumn'>>;
-export declare function useGridListView(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listColumn'>): void;
+export declare function useGridListView(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;

package/hooks/features/listView/useGridListView.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridDimensionsSelector } from "../dimensions/index.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
-  listViewColumn: _extends({}, props.unstable_listColumn, {
+  listViewColumn: props.unstable_listColumn ? _extends({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 export function useGridListView(apiRef, props) {
   /*
@@ -48,6 +49,11 @@ export function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      warnOnce(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
   return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;

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

@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;
+export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "filterMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -4,7 +4,7 @@ import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEve
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector, gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
@@ -13,7 +13,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../..
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";
@@ -171,30 +171,33 @@ export const useGridRowSelection = (apiRef, props) => {
     let newSelection;
     if (resetSelection) {
       if (isSelected) {
-        newSelection = selectableIds;
+        newSelection = new Set(selectableIds);
         if (applyAutoSelection) {
           const addRow = rowId => {
-            newSelection.push(rowId);
+            newSelection.add(rowId);
           };
           selectableIds.forEach(id => {
             findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           });
         }
       } else {
-        newSelection = [];
+        newSelection = new Set();
+      }
+      const currentLookup = selectedIdsLookupSelector(apiRef);
+      if (newSelection.size === Object.keys(currentLookup).length && Array.from(newSelection).every(id => currentLookup[id] === id)) {
+        return;
       }
     } else {
-      // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
-      const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+      newSelection = new Set(Object.values(selectedIdsLookupSelector(apiRef)));
       const addRow = rowId => {
-        selectionLookup[rowId] = rowId;
+        newSelection.add(rowId);
       };
       const removeRow = rowId => {
-        delete selectionLookup[rowId];
+        newSelection.delete(rowId);
       };
       selectableIds.forEach(id => {
         if (isSelected) {
-          selectionLookup[id] = id;
+          newSelection.add(id);
           if (applyAutoSelection) {
             findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           }
@@ -205,11 +208,10 @@ export const useGridRowSelection = (apiRef, props) => {
           }
         }
       });
-      newSelection = Object.values(selectionLookup);
     }
-    const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+    const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(Array.from(newSelection));
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
   const selectRowRange = React.useCallback(({
@@ -252,13 +254,20 @@ export const useGridRowSelection = (apiRef, props) => {
       return;
     }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
 
     // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+    const isNonExistent = id => {
+      if (props.filterMode === 'server') {
+        return !rowsLookup[id];
+      }
+      return filteredRowsLookup[id] !== true;
+    };
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] !== true) {
+      if (isNonExistent(id)) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -284,15 +293,20 @@ export const useGridRowSelection = (apiRef, props) => {
         }
       }
     });
-    if (hasChanged || isNestedData && !sortModelUpdated) {
+
+    // For nested data, on row tree updation (filtering, adding rows, etc.) when the selection is
+    // not empty, we need to re-run scanning of the tree to propagate the selection changes
+    // Example: A parent whose de-selected children are filtered out should now be selected
+    const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && Object.keys(selectionLookup).length > 0;
+    if (hasChanged || shouldReapplyPropagation && !sortModelUpdated) {
       const newSelection = Object.values(selectionLookup);
-      if (isNestedData) {
+      if (shouldReapplyPropagation) {
         apiRef.current.selectRows(newSelection, true, true);
       } else {
         apiRef.current.setRowSelectionModel(newSelection);
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, tree]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 

package/hooks/features/rows/useGridRowSpanning.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -15,7 +17,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', GRID_DETAIL_PANEL_TOGGLE_FIELD]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

package/hooks/features/scroll/useGridScroll.js

@@ -48,8 +48,6 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
@@ -103,20 +101,18 @@ export const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
-      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
-      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {