@mui/x-data-grid 8.18.0 → 8.20.0

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -70,7 +70,6 @@ const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = (0, _utils.isMultipleRowSelectionEnabled)(props);
-  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
@@ -109,6 +108,14 @@ const useGridRowSelection = (apiRef, props) => {
     const currentModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef);
     if (currentModel !== model) {
       logger.debug(`Setting selection model`);
+
+      // clear the reference to the last selected row if that row is not in the model anymore
+      if (lastRowToggled.current !== null) {
+        const isInModel = model.ids.has(lastRowToggled.current);
+        if (model.type === 'include' && !isInModel || model.type === 'exclude' && isInModel) {
+          lastRowToggled.current = null;
+        }
+      }
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
       }), reason);
@@ -136,7 +143,8 @@ const useGridRowSelection = (apiRef, props) => {
     if (!apiRef.current.isRowSelectable(id)) {
       return;
     }
-    lastRowToggled.current = id;
+    const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
+    lastRowToggled.current = isSelected ? id : null;
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
       const newSelectionModel = {
@@ -181,12 +189,13 @@ const useGridRowSelection = (apiRef, props) => {
         apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       }
     }
-  }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
+  }, [apiRef, logger, applyAutoSelection, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
   const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
     logger.debug(`Setting selection for several rows`);
     if (props.rowSelection === false) {
       return;
     }
+    const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     const selectableIds = new Set();
     for (let i = 0; i < ids.length; i += 1) {
       const id = ids[i];
@@ -247,7 +256,7 @@ const useGridRowSelection = (apiRef, props) => {
     if (isSelectionValid) {
       apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
     }
-  }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
+  }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
   const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
     if (!isNestedData || !applyAutoSelection || inputSelectionModel.type === 'exclude' || inputSelectionModel.ids.size === 0 && inputSelectionModel.type === 'include') {
       return inputSelectionModel;
@@ -256,6 +265,7 @@ const useGridRowSelection = (apiRef, props) => {
       type: inputSelectionModel.type,
       ids: new Set(inputSelectionModel.ids)
     };
+    const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     const selectionManager = (0, _gridRowSelectionManager.createRowSelectionManager)(propagatedSelectionModel);
     const addRow = rowId => {
       selectionManager.select(rowId);
@@ -264,7 +274,7 @@ const useGridRowSelection = (apiRef, props) => {
       (0, _utils.findRowsToSelect)(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow, selectionManager);
     }
     return propagatedSelectionModel;
-  }, [apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, isNestedData, applyAutoSelection]);
+  }, [apiRef, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, isNestedData, applyAutoSelection]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -333,7 +343,7 @@ const useGridRowSelection = (apiRef, props) => {
       if (!props.rowSelectionPropagation?.parents) {
         continue;
       }
-      const node = tree[id];
+      const node = rowTree[id];
       if (node?.type === 'group') {
         const isAutoGenerated = node.isAutoGenerated;
         if (isAutoGenerated) {
@@ -374,7 +384,7 @@ const useGridRowSelection = (apiRef, props) => {
         apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree, getRowsToBeSelected]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, getRowsToBeSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 
@@ -538,7 +548,6 @@ const useGridRowSelection = (apiRef, props) => {
     }
     apiRef.current.setRowSelectionModel(propRowSelectionModel);
   });
-  (0, _useGridEvent.useGridEvent)(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   (0, _useGridEvent.useGridEvent)(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
   (0, _useGridEvent.useGridEvent)(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   (0, _useGridEvent.useGridEvent)(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));

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

@@ -13,6 +13,7 @@ export declare const checkboxPropsSelector: (args_0: import("react").RefObject<{
 }) => {
   isIndeterminate: boolean;
   isChecked: boolean;
+  isSelectable: boolean;
 };
 export declare function isMultipleRowSelectionEnabled(props: Pick<DataGridProcessedProps, 'signature' | 'disableMultipleRowSelection' | 'checkboxSelection'>): boolean;
 export declare const findRowsToSelect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void, rowSelectionManager?: RowSelectionManager) => void;

package/hooks/features/rowSelection/utils.js

@@ -12,6 +12,8 @@ var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _createSelector = require("../../../utils/createSelector");
+var _columns = require("../columns");
+var _gridPropsSelectors = require("../../core/gridPropsSelectors");
 const ROW_SELECTION_PROPAGATION_DEFAULT = exports.ROW_SELECTION_PROPAGATION_DEFAULT = {
   parents: true,
   descendants: true
@@ -34,15 +36,25 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-const checkboxPropsSelector = exports.checkboxPropsSelector = (0, _createSelector.createSelector)(_gridRowsSelector.gridRowTreeSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+const checkboxPropsSelector = exports.checkboxPropsSelector = (0, _createSelector.createSelector)(_columns.gridColumnDefinitionsSelector, _gridRowsSelector.gridRowTreeSelector, _gridFilterSelector.gridFilteredRowsLookupSelector, _gridRowSelectionSelector.gridRowSelectionManagerSelector, _gridRowsSelector.gridRowsLookupSelector, _gridPropsSelectors.gridRowSelectableSelector, (columns, rowTree, filteredRowsLookup, rowSelectionManager, rowsLookup, isRowSelectable, {
   groupId,
   autoSelectParents
 }) => {
   const groupNode = rowTree[groupId];
+  const rowParams = {
+    id: groupId,
+    row: rowsLookup[groupId],
+    columns
+  };
+  let isSelectable = true;
+  if (typeof isRowSelectable === 'function') {
+    isSelectable = isRowSelectable(rowParams);
+  }
   if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
     return {
       isIndeterminate: false,
-      isChecked: rowSelectionManager.has(groupId)
+      isChecked: rowSelectionManager.has(groupId),
+      isSelectable
     };
   }
   let hasSelectedDescendant = false;
@@ -67,7 +79,8 @@ const checkboxPropsSelector = exports.checkboxPropsSelector = (0, _createSelecto
   traverseDescendants(groupId);
   return {
     isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
-    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false,
+    isSelectable
   };
 });
 function isMultipleRowSelectionEnabled(props) {

package/hooks/features/rows/useGridRowSpanning.js

@@ -16,8 +16,7 @@ var _gridVirtualizationSelectors = require("../virtualization/gridVirtualization
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _utils = require("../../../utils/utils");
-var _pagination = require("../pagination");
-var _gridRowsSelector = require("./gridRowsSelector");
+var _useRunOncePerLoop = require("../../utils/useRunOncePerLoop");
 const EMPTY_CACHES = {
   spannedCells: {},
   hiddenCells: {},
@@ -31,13 +30,6 @@ const EMPTY_STATE = {
   caches: EMPTY_CACHES,
   processedRange: EMPTY_RANGE
 };
-
-/**
- * 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
- * compromising performance.
- */
-const DEFAULT_ROWS_TO_PROCESS = 20;
 const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToProcess, resetState) => {
   const virtualizer = apiRef.current.virtualizer;
   const previousState = resetState ? EMPTY_STATE : _features.Rowspan.selectors.state(virtualizer.store.state);
@@ -135,66 +127,26 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     processedRange
   };
 };
-const getInitialRangeToProcess = (props, apiRef) => {
-  const rowCount = (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef).length;
-  if (props.pagination) {
-    const pageSize = (0, _pagination.gridPageSizeSelector)(apiRef);
-    let paginationLastRowIndex = DEFAULT_ROWS_TO_PROCESS;
-    if (pageSize > 0) {
-      paginationLastRowIndex = pageSize - 1;
-    }
-    return {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(paginationLastRowIndex, rowCount)
-    };
-  }
-  return {
-    firstRowIndex: 0,
-    lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, rowCount)
-  };
-};
 
 /**
  * @requires columnsStateInitializer (method) - should be initialized before
  * @requires rowsStateInitializer (method) - should be initialized before
  * @requires filterStateInitializer (method) - should be initialized before
  */
-const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (!props.rowSpanning) {
-    return (0, _extends2.default)({}, state, {
-      rowSpanning: EMPTY_STATE
-    });
-  }
-  const rowIds = state.rows.dataRowIds || [];
-  const orderedFields = state.columns.orderedFields || [];
-  const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
-  const columnsLookup = state.columns.lookup;
-  const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
-  if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
-    return (0, _extends2.default)({}, state, {
-      rowSpanning: EMPTY_STATE
-    });
-  }
-  const rangeToProcess = getInitialRangeToProcess(props, apiRef);
-  const rows = rowIds.map(id => ({
-    id,
-    model: dataRowIdToModelLookup[id]
-  }));
-  const colDefs = orderedFields.map(field => columnsLookup[field]);
-  const rowSpanning = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true);
+const rowSpanningStateInitializer = state => {
   return (0, _extends2.default)({}, state, {
-    rowSpanning
+    rowSpanning: EMPTY_STATE
   });
 };
 exports.rowSpanningStateInitializer = rowSpanningStateInitializer;
 const useGridRowSpanning = (apiRef, props) => {
-  const store = apiRef.current.virtualizer.store;
   const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
+    const store = apiRef.current.virtualizer.store;
     const {
       range,
       rows: visibleRows
     } = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
-    if (resetState && store.getSnapshot().rowSpanning !== EMPTY_STATE) {
+    if (resetState) {
       store.set('rowSpanning', EMPTY_STATE);
     }
     if (range === null || !(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
@@ -220,7 +172,7 @@ const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     store.set('rowSpanning', newState);
-  }, [apiRef, store]);
+  }, [apiRef]);
 
   // Reset events trigger a full re-computation of the row spanning state:
   // - The `rowSpanning` prop is updated (feature flag)
@@ -228,26 +180,37 @@ const useGridRowSpanning = (apiRef, props) => {
   // - The sorting is applied
   // - The `paginationModel` is updated
   // - The rows are updated
+  const {
+    schedule: deferredUpdateRowSpanningState,
+    cancel
+  } = (0, _useRunOncePerLoop.useRunOncePerLoop)(updateRowSpanningState);
   const resetRowSpanningState = React.useCallback(() => {
     const renderContext = (0, _gridVirtualizationSelectors.gridRenderContextSelector)(apiRef);
     if (!(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
       return;
     }
-    updateRowSpanningState(renderContext, true);
-  }, [apiRef, updateRowSpanningState]);
-  (0, _useGridEvent.useGridEvent)(apiRef, 'renderedRowsIntervalChange', (0, _utils.runIf)(props.rowSpanning, updateRowSpanningState));
+    deferredUpdateRowSpanningState(renderContext, true);
+  }, [apiRef, deferredUpdateRowSpanningState]);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'renderedRowsIntervalChange', (0, _utils.runIf)(props.rowSpanning, renderContext => {
+    const didHavePendingReset = cancel();
+    updateRowSpanningState(renderContext, didHavePendingReset);
+  }));
   (0, _useGridEvent.useGridEvent)(apiRef, 'sortedRowsSet', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
   (0, _useGridEvent.useGridEvent)(apiRef, 'paginationModelChange', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
   (0, _useGridEvent.useGridEvent)(apiRef, 'filteredRowsSet', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnsChange', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
   React.useEffect(() => {
+    const store = apiRef.current.virtualizer?.store;
+    if (!store) {
+      return;
+    }
     if (!props.rowSpanning) {
       if (store.state.rowSpanning !== EMPTY_STATE) {
         store.set('rowSpanning', EMPTY_STATE);
       }
-    } else if (store.state.rowSpanning.caches === EMPTY_CACHES) {
-      resetRowSpanningState();
+    } else if (store.state.rowSpanning === EMPTY_STATE) {
+      updateRowSpanningState((0, _gridVirtualizationSelectors.gridRenderContextSelector)(apiRef));
     }
-  }, [apiRef, store, resetRowSpanningState, props.rowSpanning]);
+  }, [apiRef, props.rowSpanning, updateRowSpanningState]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

package/hooks/features/rows/useGridRows.js

@@ -60,7 +60,8 @@ const useGridRows = (apiRef, props, configuration) => {
 
   // Get overridable methods from configuration
   const {
-    setRowIndex
+    setRowIndex,
+    setRowPosition
   } = configuration.hooks.useGridRowsOverridableMethods(apiRef, props);
   const getRow = React.useCallback(id => {
     const model = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id];
@@ -345,6 +346,7 @@ const useGridRows = (apiRef, props, configuration) => {
   };
   const rowProApi = {
     setRowIndex,
+    setRowPosition,
     setRowChildrenExpansion,
     getRowGroupChildren,
     expandAllRows,

package/hooks/features/rows/useGridRowsOverridableMethods.d.ts

@@ -3,4 +3,5 @@ import { GridRowId } from "../../../models/gridRows.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 export declare const useGridRowsOverridableMethods: (apiRef: RefObject<GridPrivateApiCommunity>) => {
   setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
+  setRowPosition: (sourceRowId: GridRowId, targetRowId: GridRowId, position: import("../../../internals/index.js").RowReorderDropPosition) => void | Promise<void>;
 };

package/hooks/features/rows/useGridRowsOverridableMethods.js

@@ -9,20 +9,69 @@ exports.useGridRowsOverridableMethods = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _gridRowsSelector = require("./gridRowsSelector");
+var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsUtils = require("./gridRowsUtils");
 const useGridRowsOverridableMethods = apiRef => {
+  const setRowPosition = React.useCallback((sourceRowId, targetRowId, position) => {
+    const sourceNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, sourceRowId);
+    const targetNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, targetRowId);
+    if (!sourceNode) {
+      throw new Error(`MUI X: No row with id #${sourceRowId} found.`);
+    }
+    if (!targetNode) {
+      throw new Error(`MUI X: No row with id #${targetRowId} found.`);
+    }
+    if (sourceNode.type !== 'leaf') {
+      throw new Error(`MUI X: The row reordering does not support reordering of footer or grouping rows.`);
+    }
+    if (position === 'inside') {
+      throw new Error(`MUI X: The 'inside' position is only supported for tree data. Use 'above' or 'below' for flat data.`);
+    }
+
+    // Get the target index from the targetRowId using the lookup selector
+    const sortedFilteredRowIndexLookup = (0, _gridFilterSelector.gridExpandedSortedRowIndexLookupSelector)(apiRef);
+    const targetRowIndexUnadjusted = sortedFilteredRowIndexLookup[targetRowId];
+    if (targetRowIndexUnadjusted === undefined) {
+      throw new Error(`MUI X: Target row with id #${targetRowId} not found in current view.`);
+    }
+    const sourceRowIndex = sortedFilteredRowIndexLookup[sourceRowId];
+    if (sourceRowIndex === undefined) {
+      throw new Error(`MUI X: Source row with id #${sourceRowId} not found in current view.`);
+    }
+    const dragDirection = targetRowIndexUnadjusted < sourceRowIndex ? 'up' : 'down';
+    let targetRowIndex;
+    if (dragDirection === 'up') {
+      targetRowIndex = position === 'above' ? targetRowIndexUnadjusted : targetRowIndexUnadjusted + 1;
+    } else {
+      targetRowIndex = position === 'above' ? targetRowIndexUnadjusted - 1 : targetRowIndexUnadjusted;
+    }
+    if (targetRowIndex === sourceRowIndex) {
+      return;
+    }
+    apiRef.current.setState(state => {
+      const group = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
+      const allRows = group.children;
+      const updatedRows = [...allRows];
+      updatedRows.splice(targetRowIndex, 0, updatedRows.splice(sourceRowIndex, 1)[0]);
+      return (0, _extends2.default)({}, state, {
+        rows: (0, _extends2.default)({}, state.rows, {
+          tree: (0, _extends2.default)({}, state.rows.tree, {
+            [_gridRowsUtils.GRID_ROOT_GROUP_ID]: (0, _extends2.default)({}, group, {
+              children: updatedRows
+            })
+          })
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef]);
   const setRowIndex = React.useCallback((rowId, targetIndex) => {
     const node = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
     if (!node) {
       throw new Error(`MUI X: No row with id #${rowId} found.`);
     }
-
-    // TODO: Remove irrelevant checks
-    if (node.parent !== _gridRowsUtils.GRID_ROOT_GROUP_ID) {
-      throw new Error(`MUI X: The row reordering do not support reordering of grouped rows yet.`);
-    }
     if (node.type !== 'leaf') {
-      throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
+      throw new Error(`MUI X: The row reordering does not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
       const group = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[_gridRowsUtils.GRID_ROOT_GROUP_ID];
@@ -46,7 +95,8 @@ const useGridRowsOverridableMethods = apiRef => {
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef]);
   return {
-    setRowIndex
+    setRowIndex,
+    setRowPosition
   };
 };
 exports.useGridRowsOverridableMethods = useGridRowsOverridableMethods;

package/hooks/features/scroll/useGridScroll.js

@@ -9,7 +9,6 @@ var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
-var _useGridSelector = require("../../utils/useGridSelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
@@ -53,7 +52,6 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef);
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
@@ -68,6 +66,7 @@ const useGridScroll = (apiRef, props) => {
       const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
       let cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
+        const visibleSortedRows = (0, _gridFilterSelector.gridExpandedSortedRowEntriesSelector)(apiRef);
         const rowId = visibleSortedRows[params.rowIndex]?.id;
         const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
         if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
@@ -104,7 +103,7 @@ const useGridScroll = (apiRef, props) => {
       return true;
     }
     return false;
-  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
+  }, [logger, apiRef, virtualScrollerRef, props.pagination]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;

package/hooks/features/sorting/gridSortingUtils.js

@@ -10,9 +10,7 @@ var _warning = require("@mui/x-internals/warning");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
-    if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
-    }
+    (0, _warning.warnOnce)(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     return [model[0]];
   }
   return model;

package/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">) => void;
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode" | "signature">) => void;

package/hooks/features/sorting/useGridSorting.js

@@ -245,7 +245,9 @@ const useGridSorting = (apiRef, props) => {
    * 1ST RENDER
    */
   (0, _useFirstRender.useFirstRender)(() => {
-    apiRef.current.applySorting();
+    if (props.signature === 'DataGrid') {
+      apiRef.current.applySorting();
+    }
   });
 
   /**

package/hooks/features/virtualization/useGridVirtualization.js

@@ -39,9 +39,6 @@ const virtualizationStateInitializer = (state, props) => {
 };
 exports.virtualizationStateInitializer = virtualizationStateInitializer;
 function useGridVirtualization(apiRef, rootProps) {
-  const {
-    virtualizer
-  } = apiRef.current;
   const {
     autoHeight,
     disableVirtualization
@@ -52,7 +49,14 @@ function useGridVirtualization(apiRef, rootProps) {
    */
 
   const setVirtualization = enabled => {
+    const {
+      virtualizer
+    } = apiRef.current;
     enabled && (enabled = HAS_LAYOUT);
+    const snapshot = virtualizer.store.getSnapshot();
+    if (snapshot.virtualization.enabled === enabled && snapshot.virtualization.enabledForRows === enabled && snapshot.virtualization.enabledForColumns === enabled) {
+      return;
+    }
     virtualizer.store.set('virtualization', (0, _extends2.default)({}, virtualizer.store.state.virtualization, {
       enabled,
       enabledForColumns: enabled,
@@ -60,7 +64,14 @@ function useGridVirtualization(apiRef, rootProps) {
     }));
   };
   const setColumnVirtualization = enabled => {
+    const {
+      virtualizer
+    } = apiRef.current;
     enabled && (enabled = HAS_LAYOUT);
+    const snapshot = virtualizer.store.getSnapshot();
+    if (snapshot.virtualization.enabledForColumns === enabled) {
+      return;
+    }
     virtualizer.store.set('virtualization', (0, _extends2.default)({}, virtualizer.store.state.virtualization, {
       enabledForColumns: enabled
     }));
@@ -70,7 +81,12 @@ function useGridVirtualization(apiRef, rootProps) {
     unstable_setColumnVirtualization: setColumnVirtualization
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, api, 'public');
-  const forceUpdateRenderContext = virtualizer.api.forceUpdateRenderContext;
+  const forceUpdateRenderContext = () => {
+    const {
+      virtualizer
+    } = apiRef.current;
+    virtualizer?.api.scheduleUpdateRenderContext();
+  };
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
@@ -85,7 +101,10 @@ function useGridVirtualization(apiRef, rootProps) {
 
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
+    if (!apiRef.current.virtualizer) {
+      return;
+    }
     setVirtualization(!rootProps.disableVirtualization);
-  }, [disableVirtualization, autoHeight]);
+  }, [apiRef, disableVirtualization, autoHeight]);
   /* eslint-enable react-hooks/exhaustive-deps */
 }

package/hooks/utils/useGridEvent.js

@@ -33,7 +33,9 @@ function useGridEvent(apiRef, eventName, handler, options) {
   const cleanupTokenRef = React.useRef(null);
   if (!subscription.current && handlerRef.current) {
     const enhancedHandler = (params, event, details) => {
-      if (!event.defaultMuiPrevented) {
+      // Check for the existence of the event once more to avoid Safari 26 issue
+      // https://github.com/mui/mui-x/issues/20159
+      if (event && !event.defaultMuiPrevented) {
         handlerRef.current?.(params, event, details);
       }
     };
@@ -60,7 +62,9 @@ function useGridEvent(apiRef, eventName, handler, options) {
   React.useEffect(() => {
     if (!subscription.current && handlerRef.current) {
       const enhancedHandler = (params, event, details) => {
-        if (!event.defaultMuiPrevented) {
+        // Check for the existence of the event once more to avoid Safari 26 issue
+        // https://github.com/mui/mui-x/issues/20159
+        if (event && !event.defaultMuiPrevented) {
           handlerRef.current?.(params, event, details);
         }
       };

package/hooks/utils/useGridSelector.js

@@ -39,10 +39,8 @@ const createRefs = () => ({
 const EMPTY = [];
 const emptyGetSnapshot = () => null;
 function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      (0, _warning.warnOnce)(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-    }
+  if (!apiRef.current.state) {
+    (0, _warning.warnOnce)(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
   }
   const refs = (0, _useLazyRef.useLazyRef)(createRefs);
   const didInit = refs.current.selector !== null;

package/hooks/utils/useRunOncePerLoop.d.ts

@@ -1 +1,4 @@
-export declare function useRunOncePerLoop<T extends (...args: any[]) => void>(callback: T, nextFrame?: boolean): (...args: Parameters<T>) => void;
+export declare function useRunOncePerLoop<T extends (...args: any[]) => void>(callback: T): {
+  schedule: (...args: Parameters<T>) => void;
+  cancel: () => boolean;
+};

package/hooks/utils/useRunOncePerLoop.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -6,28 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRunOncePerLoop = useRunOncePerLoop;
 var React = _interopRequireWildcard(require("react"));
-function useRunOncePerLoop(callback, nextFrame = false) {
-  const scheduledRef = React.useRef(false);
+function useRunOncePerLoop(callback) {
+  const scheduledCallbackRef = React.useRef(null);
   const schedule = React.useCallback((...args) => {
-    if (scheduledRef.current) {
-      return;
+    // for robustness, a fallback in case we don't react to state updates and layoutEffect is not run
+    // if we react to state updates, layoutEffect will run before microtasks
+    if (!scheduledCallbackRef.current) {
+      queueMicrotask(() => {
+        if (scheduledCallbackRef.current) {
+          scheduledCallbackRef.current();
+        }
+      });
     }
-    scheduledRef.current = true;
-    const runner = () => {
-      scheduledRef.current = false;
+    scheduledCallbackRef.current = () => {
+      scheduledCallbackRef.current = null;
       callback(...args);
     };
-    if (nextFrame) {
-      if (typeof requestAnimationFrame === 'function') {
-        requestAnimationFrame(runner);
-      }
-      return;
+  }, [callback]);
+  React.useLayoutEffect(() => {
+    if (scheduledCallbackRef.current) {
+      scheduledCallbackRef.current();
     }
-    if (typeof queueMicrotask === 'function') {
-      queueMicrotask(runner);
-    } else {
-      Promise.resolve().then(runner);
+  });
+  return {
+    schedule,
+    cancel: () => {
+      if (scheduledCallbackRef.current) {
+        scheduledCallbackRef.current = null;
+        return true;
+      }
+      return false;
     }
-  }, [callback, nextFrame]);
-  return schedule;
+  };
 }

package/index.js

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