@mui/x-data-grid 8.3.0 → 8.4.0

package/esm/components/GridApiContext.js

@@ -2,6 +2,4 @@
 
 import * as React from 'react';
 export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridApiContext.displayName = 'GridApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridApiContext.displayName = "GridApiContext";

package/esm/components/GridColumnUnsortedIcon.js

@@ -13,4 +13,5 @@ export const GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColum
   const [nextSortDirection] = sortingOrder;
   const Icon = nextSortDirection === 'asc' ? rootProps.slots.columnSortedAscendingIcon : rootProps.slots.columnSortedDescendingIcon;
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, other)) : null;
-});
+});
+if (process.env.NODE_ENV !== "production") GridColumnUnsortedIcon.displayName = "GridColumnUnsortedIcon";

package/esm/components/GridConfigurationContext.js

@@ -2,6 +2,4 @@
 
 import * as React from 'react';
 export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridConfigurationContext.displayName = 'GridConfigurationContext';
-}
+if (process.env.NODE_ENV !== "production") GridConfigurationContext.displayName = "GridConfigurationContext";

package/esm/components/GridRow.js

@@ -246,6 +246,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
+  if (process.env.NODE_ENV !== "production") getCell.displayName = "getCell";
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedColumnPosition.LEFT);

package/esm/components/cell/GridActionsCell.js

@@ -258,4 +258,5 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };
-export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

package/esm/components/cell/GridBooleanCell.js

@@ -115,10 +115,12 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   value: PropTypes.any
 } : void 0;
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
-};
+};
+if (process.env.NODE_ENV !== "production") renderBooleanCell.displayName = "renderBooleanCell";

package/esm/components/cell/GridEditBooleanCell.js

@@ -136,4 +136,5 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditBooleanCell };
-export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditBooleanCell.displayName = "renderEditBooleanCell";

package/esm/components/cell/GridEditDateCell.js

@@ -190,4 +190,5 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditDateCell };
-export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditDateCell.displayName = "renderEditDateCell";

package/esm/components/cell/GridEditInputCell.js

@@ -165,4 +165,5 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditInputCell };
-export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditInputCell.displayName = "renderEditInputCell";

package/esm/components/cell/GridEditSingleSelectCell.js

@@ -186,4 +186,5 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditSingleSelectCell };
-export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditSingleSelectCell.displayName = "renderEditSingleSelectCell";

package/esm/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -60,4 +60,5 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       }))
     }))
   });
-});
+});
+if (process.env.NODE_ENV !== "production") ColumnHeaderMenuIcon.displayName = "ColumnHeaderMenuIcon";

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -110,7 +110,7 @@ function GridColumnHeaderItem(props) {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
-    onDragEnd: publish('columnHeaderDragEnd')
+    onDragEndCapture: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
     onMouseDown: publish('columnSeparatorMouseDown'),

package/esm/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -58,6 +58,7 @@ function GridColumnHeaderSeparatorRaw(props) {
   );
 }
 const GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSeparator.displayName = "GridColumnHeaderSeparator";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -12,6 +12,7 @@ function GridColumnHeaderSortIconRaw(props) {
   });
 }
 const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSortIcon.displayName = "GridColumnHeaderSortIcon";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -8,8 +8,8 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { objectShallowCompare, useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { getCheckboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { checkboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -57,11 +57,13 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     }
   }, []);
   const isSelectable = apiRef.current.isRowSelectable(id);
-  const checkboxPropsSelector = getCheckboxPropsSelector(id, rootProps.rowSelectionPropagation?.parents ?? false);
   const {
     isIndeterminate,
     isChecked
-  } = useGridSelector(apiRef, checkboxPropsSelector, undefined, objectShallowCompare);
+  } = useGridSelector(apiRef, checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }

package/esm/components/containers/GridRootStyles.js

@@ -657,7 +657,7 @@ export const GridRootStyles = styled('div', {
         borderTop: 'none'
       }
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {

package/esm/components/panel/GridPanelContext.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridPanelContext.displayName = "GridPanelContext";
 export function useGridPanelContext() {
   const context = React.useContext(GridPanelContext);
   if (context === undefined) {

package/esm/components/quickFilter/QuickFilterContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const QuickFilterContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") QuickFilterContext.displayName = "QuickFilterContext";
 export function useQuickFilterContext() {
   const context = React.useContext(QuickFilterContext);
   if (context === undefined) {

package/esm/components/toolbarV8/Toolbar.js

@@ -12,6 +12,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { ToolbarContext } from "./ToolbarContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { sortByDocumentPosition } from "./utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -59,21 +60,11 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   const classes = useUtilityClasses(rootProps);
   const [focusableItemId, setFocusableItemId] = React.useState(null);
   const [items, setItems] = React.useState([]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-    if (focusableItemId === id) {
-      setFocusableItemId(null);
-    }
-  }, [focusableItemId]);
+  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
   const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
     let index = startIndex;
-    const itemCount = items.length;
+    const sortedItems = getSortedItems();
+    const itemCount = sortedItems.length;
 
     // Look for enabled items in the specified direction
     for (let i = 0; i < itemCount; i += 1) {
@@ -93,53 +84,93 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
       }
 
       // Return if we found an enabled item
-      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
+      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
         return index;
       }
     }
 
     // If we've checked all items and found none enabled
     return -1;
-  }, [items]);
+  }, [getSortedItems]);
+  const registerItem = React.useCallback((id, itemRef) => {
+    setItems(prevItems => [...prevItems, {
+      id,
+      ref: itemRef
+    }]);
+  }, []);
+  const unregisterItem = React.useCallback(id => {
+    setItems(prevItems => prevItems.filter(i => i.id !== id));
+  }, []);
   const onItemKeyDown = React.useCallback(event => {
     if (!focusableItemId) {
       return;
     }
-    const currentIndex = items.findIndex(item => item.id === focusableItemId);
+    const sortedItems = getSortedItems();
+    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
     let newIndex = -1;
     if (event.key === 'ArrowRight') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, 1);
+      newIndex = findEnabledItem(focusableItemIndex, 1);
     } else if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, -1);
+      newIndex = findEnabledItem(focusableItemIndex, -1);
     } else if (event.key === 'Home') {
       event.preventDefault();
       newIndex = findEnabledItem(-1, 1, false);
     } else if (event.key === 'End') {
       event.preventDefault();
-      newIndex = findEnabledItem(items.length, -1, false);
+      newIndex = findEnabledItem(sortedItems.length, -1, false);
     }
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+
+    // TODO: Check why this is necessary
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, focusableItemId, findEnabledItem]);
+  }, [getSortedItems, focusableItemId, findEnabledItem]);
   const onItemFocus = React.useCallback(id => {
     if (focusableItemId !== id) {
       setFocusableItemId(id);
     }
-  }, [focusableItemId]);
+  }, [focusableItemId, setFocusableItemId]);
   const onItemDisabled = React.useCallback(id => {
-    const currentIndex = items.findIndex(item => item.id === id);
+    const sortedItems = getSortedItems();
+    const currentIndex = sortedItems.findIndex(item => item.id === id);
     const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, findEnabledItem]);
+  }, [getSortedItems, findEnabledItem]);
+  React.useEffect(() => {
+    const sortedItems = getSortedItems();
+    if (sortedItems.length > 0) {
+      // Set initial focusable item
+      if (!focusableItemId) {
+        setFocusableItemId(sortedItems[0].id);
+        return;
+      }
+      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
+      if (!sortedItems[focusableItemIndex]) {
+        // Last item has been removed from the items array
+        const item = sortedItems[sortedItems.length - 1];
+        if (item) {
+          setFocusableItemId(item.id);
+          item.ref.current?.focus();
+        }
+      } else if (focusableItemIndex === -1) {
+        // Focused item has been removed from the items array
+        const item = sortedItems[focusableItemIndex];
+        if (item) {
+          setFocusableItemId(item.id);
+          item.ref.current?.focus();
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSortedItems, findEnabledItem]);
   const contextValue = React.useMemo(() => ({
     focusableItemId,
     registerItem,
@@ -156,11 +187,6 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }, other, {
     ref
   }));
-  React.useEffect(() => {
-    if (items.length > 0) {
-      setFocusableItemId(items[0].id);
-    }
-  }, [items]);
   return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
     value: contextValue,
     children: element

package/esm/components/toolbarV8/ToolbarContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
 export function useToolbarContext() {
   const context = React.useContext(ToolbarContext);
   if (context === undefined) {

package/esm/components/toolbarV8/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function sortByDocumentPosition(a: {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}, b: {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}): 0 | 1 | -1;

package/esm/components/toolbarV8/utils.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-bitwise */
+export function sortByDocumentPosition(a, b) {
+  if (!a.ref.current || !b.ref.current) {
+    return 0;
+  }
+  const position = a.ref.current.compareDocumentPosition(b.ref.current);
+  if (!position) {
+    return 0;
+  }
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+    return -1;
+  }
+  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+    return 1;
+  }
+  return 0;
+}

package/esm/context/GridRootPropsContext.js

@@ -2,7 +2,5 @@
 
 import * as React from 'react';
 const GridRootPropsContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridRootPropsContext.displayName = 'GridRootPropsContext';
-}
+if (process.env.NODE_ENV !== "production") GridRootPropsContext.displayName = "GridRootPropsContext";
 export { GridRootPropsContext };

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

@@ -75,7 +75,7 @@ export const useGridColumnHeaders = props => {
   useGridEvent(apiRef, 'columnResizeStart', handleColumnResizeStart);
   useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridEvent(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  useGridEvent(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridEvent(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -113,6 +113,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -181,6 +182,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
   const getColumnGroupHeaders = ({
     depth,
     params

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -302,13 +302,21 @@ export function getFirstNonSpannedColumnToRender({
   visibleRows
 }) {
   let firstNonSpannedColumnToRender = firstColumnToRender;
-  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
-    const row = visibleRows[i];
-    if (row) {
-      const rowId = visibleRows[i].id;
-      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
-      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
-        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+  let foundStableColumn = false;
+
+  // Keep checking columns until we find one that's not spanned in any visible row
+  while (!foundStableColumn && firstNonSpannedColumnToRender >= 0) {
+    foundStableColumn = true;
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = visibleRows[i];
+      if (row) {
+        const rowId = visibleRows[i].id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstNonSpannedColumnToRender);
+        if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan && cellColSpanInfo.leftVisibleCellIndex < firstNonSpannedColumnToRender) {
+          firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+          foundStableColumn = false;
+          break; // Check the new column index against the visible rows, because it might be spanned
+        }
       }
     }
   }

package/esm/hooks/features/overlays/useGridOverlays.js

@@ -61,6 +61,7 @@ export const useGridOverlays = () => {
       children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
     }));
   };
+  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
   return {
     getOverlay,
     overlaysProps

package/esm/hooks/features/pagination/useGridPaginationModel.js

@@ -138,7 +138,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -92,7 +92,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * API METHODS
    */
-  const setRowSelectionModel = React.useCallback(model => {
+  const setRowSelectionModel = React.useCallback((model, reason) => {
     if (props.signature === GridSignature.DataGrid && !canHaveMultipleSelection && (model.type !== 'include' || model.ids.size > 1)) {
       throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
@@ -101,7 +101,7 @@ export const useGridRowSelection = (apiRef, props) => {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => _extends({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
-      }));
+      }), reason);
     }
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => {
@@ -142,7 +142,7 @@ export const useGridRowSelection = (apiRef, props) => {
           findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
         }
       }
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
     } else {
       logger.debug(`Toggling selection for row ${id}`);
       const selectionModel = gridRowSelectionStateSelector(apiRef);
@@ -168,7 +168,7 @@ export const useGridRowSelection = (apiRef, props) => {
       }
       const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       }
     }
   }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
@@ -235,7 +235,7 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
   const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
@@ -360,7 +360,7 @@ export const useGridRowSelection = (apiRef, props) => {
           apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
         }
       } else {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
   }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree, getRowsToBeSelected]);
@@ -427,7 +427,7 @@ export const useGridRowSelection = (apiRef, props) => {
   const toggleAllRows = React.useCallback(value => {
     const filterModel = gridFilterModelSelector(apiRef);
     const quickFilterModel = gridQuickFilterValuesSelector(apiRef);
-    const hasFilters = filterModel.items.length > 0 || (quickFilterModel?.length || 0) > 0;
+    const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
     if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',

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

@@ -5,7 +5,10 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import { type GridRowSelectionPropagation } from "../../../models/gridRowSelectionModel.js";
 import { type RowSelectionManager } from "../../../models/gridRowSelectionManager.js";
 export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
-export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, RowSelectionManager, {
+export declare const checkboxPropsSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, {
+  groupId: GridRowId;
+  autoSelectParents: boolean;
+}, {
   isIndeterminate: boolean;
   isChecked: boolean;
 }>;

package/esm/hooks/features/rowSelection/utils.js

@@ -27,41 +27,42 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-
-// TODO v8: Use `createSelectorV8`
-export function getCheckboxPropsSelector(groupId, autoSelectParents) {
-  return createSelector(gridRowTreeSelector, gridSortedRowIdsSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionManager) => {
-    const groupNode = rowTree[groupId];
-    if (!groupNode || groupNode.type !== 'group') {
-      return {
-        isIndeterminate: false,
-        isChecked: rowSelectionManager.has(groupId)
-      };
+export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+  groupId,
+  autoSelectParents
+}) => {
+  const groupNode = rowTree[groupId];
+  if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
+    return {
+      isIndeterminate: false,
+      isChecked: rowSelectionManager.has(groupId)
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (filteredRowsLookup[itemToTraverseId] === false ||
+    // Perf: Skip checking the rest of the descendants if we already
+    // know that there is a selected and an unselected descendant
+    hasSelectedDescendant && hasUnSelectedDescendant) {
+      return;
     }
-    if (rowSelectionManager.has(groupId)) {
-      return {
-        isIndeterminate: false,
-        isChecked: true
-      };
+    const node = rowTree[itemToTraverseId];
+    if (node?.type === 'group') {
+      node.children.forEach(traverseDescendants);
     }
-    let selectableDescendantsCount = 0;
-    let selectedDescendantsCount = 0;
-    const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
-    for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
-      const id = sortedRowIds[index];
-      if (filteredRowsLookup[id] !== false) {
-        selectableDescendantsCount += 1;
-        if (rowSelectionManager.has(id)) {
-          selectedDescendantsCount += 1;
-        }
-      }
+    if (rowSelectionManager.has(itemToTraverseId)) {
+      hasSelectedDescendant = true;
+    } else {
+      hasUnSelectedDescendant = true;
     }
-    return {
-      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || !rowSelectionManager.has(groupId)),
-      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionManager.has(groupId)
-    };
-  });
-}
+  };
+  traverseDescendants(groupId);
+  return {
+    isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+  };
+});
 export function isMultipleRowSelectionEnabled(props) {
   if (props.signature === GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.

package/esm/hooks/features/virtualization/useGridVirtualScroller.js

@@ -218,12 +218,13 @@ export const useGridVirtualScroller = () => {
     scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-
-    // Prevents batching render context changes
-    ReactDOM.flushSync(() => {
-      updateRenderContext(nextRenderContext);
-    });
-    scrollTimeout.start(1000, triggerUpdateRenderContext);
+    if (!areRenderContextsEqual(nextRenderContext, renderContext)) {
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
+      scrollTimeout.start(1000, triggerUpdateRenderContext);
+    }
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {