@mui/x-data-grid 8.18.0 → 8.20.0

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

@@ -62,7 +62,6 @@ export const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
-  const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
@@ -101,6 +100,14 @@ export const useGridRowSelection = (apiRef, props) => {
     const currentModel = 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 => _extends({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
       }), reason);
@@ -128,7 +135,8 @@ export const useGridRowSelection = (apiRef, props) => {
     if (!apiRef.current.isRowSelectable(id)) {
       return;
     }
-    lastRowToggled.current = id;
+    const tree = gridRowTreeSelector(apiRef);
+    lastRowToggled.current = isSelected ? id : null;
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
       const newSelectionModel = {
@@ -173,12 +181,13 @@ export 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 = gridRowTreeSelector(apiRef);
     const selectableIds = new Set();
     for (let i = 0; i < ids.length; i += 1) {
       const id = ids[i];
@@ -239,7 +248,7 @@ export 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;
@@ -248,6 +257,7 @@ export const useGridRowSelection = (apiRef, props) => {
       type: inputSelectionModel.type,
       ids: new Set(inputSelectionModel.ids)
     };
+    const tree = gridRowTreeSelector(apiRef);
     const selectionManager = createRowSelectionManager(propagatedSelectionModel);
     const addRow = rowId => {
       selectionManager.select(rowId);
@@ -256,7 +266,7 @@ export const useGridRowSelection = (apiRef, props) => {
       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
@@ -325,7 +335,7 @@ export 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) {
@@ -366,7 +376,7 @@ export 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;
 
@@ -530,7 +540,6 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     apiRef.current.setRowSelectionModel(propRowSelectionModel);
   });
-  useGridEvent(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   useGridEvent(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
   useGridEvent(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   useGridEvent(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));

package/esm/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/esm/hooks/features/rowSelection/utils.js

@@ -3,8 +3,10 @@ import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
 import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
 import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
 import { gridRowSelectionManagerSelector } from "./gridRowSelectionSelector.js";
-import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { createSelector } from "../../../utils/createSelector.js";
+import { gridColumnDefinitionsSelector } from "../columns/index.js";
+import { gridRowSelectableSelector } from "../../core/gridPropsSelectors.js";
 export const ROW_SELECTION_PROPAGATION_DEFAULT = {
   parents: true,
   descendants: true
@@ -27,15 +29,25 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+export const checkboxPropsSelector = createSelector(gridColumnDefinitionsSelector, gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, gridRowsLookupSelector, 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;
@@ -60,7 +72,8 @@ export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFil
   traverseDescendants(groupId);
   return {
     isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
-    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false,
+    isSelectable
   };
 });
 export function isMultipleRowSelectionEnabled(props) {

package/esm/hooks/features/rows/useGridRowSpanning.js

@@ -9,8 +9,7 @@ import { gridRenderContextSelector } from "../virtualization/gridVirtualizationS
 import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
 import { useGridEvent } from "../../utils/useGridEvent.js";
 import { runIf } from "../../../utils/utils.js";
-import { gridPageSizeSelector } from "../pagination/index.js";
-import { gridDataRowIdsSelector } from "./gridRowsSelector.js";
+import { useRunOncePerLoop } from "../../utils/useRunOncePerLoop.js";
 const EMPTY_CACHES = {
   spannedCells: {},
   hiddenCells: {},
@@ -24,13 +23,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 : Rowspan.selectors.state(virtualizer.store.state);
@@ -128,65 +120,25 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     processedRange
   };
 };
-const getInitialRangeToProcess = (props, apiRef) => {
-  const rowCount = gridDataRowIdsSelector(apiRef).length;
-  if (props.pagination) {
-    const pageSize = 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
  */
-export const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (!props.rowSpanning) {
-    return _extends({}, 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 _extends({}, 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);
+export const rowSpanningStateInitializer = state => {
   return _extends({}, state, {
-    rowSpanning
+    rowSpanning: EMPTY_STATE
   });
 };
 export 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
     } = getVisibleRows(apiRef);
-    if (resetState && store.getSnapshot().rowSpanning !== EMPTY_STATE) {
+    if (resetState) {
       store.set('rowSpanning', EMPTY_STATE);
     }
     if (range === null || !isRowContextInitialized(renderContext)) {
@@ -212,7 +164,7 @@ export 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)
@@ -220,25 +172,36 @@ export const useGridRowSpanning = (apiRef, props) => {
   // - The sorting is applied
   // - The `paginationModel` is updated
   // - The rows are updated
+  const {
+    schedule: deferredUpdateRowSpanningState,
+    cancel
+  } = useRunOncePerLoop(updateRowSpanningState);
   const resetRowSpanningState = React.useCallback(() => {
     const renderContext = gridRenderContextSelector(apiRef);
     if (!isRowContextInitialized(renderContext)) {
       return;
     }
-    updateRowSpanningState(renderContext, true);
-  }, [apiRef, updateRowSpanningState]);
-  useGridEvent(apiRef, 'renderedRowsIntervalChange', runIf(props.rowSpanning, updateRowSpanningState));
+    deferredUpdateRowSpanningState(renderContext, true);
+  }, [apiRef, deferredUpdateRowSpanningState]);
+  useGridEvent(apiRef, 'renderedRowsIntervalChange', runIf(props.rowSpanning, renderContext => {
+    const didHavePendingReset = cancel();
+    updateRowSpanningState(renderContext, didHavePendingReset);
+  }));
   useGridEvent(apiRef, 'sortedRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
   useGridEvent(apiRef, 'paginationModelChange', runIf(props.rowSpanning, resetRowSpanningState));
   useGridEvent(apiRef, 'filteredRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
   useGridEvent(apiRef, 'columnsChange', 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(gridRenderContextSelector(apiRef));
     }
-  }, [apiRef, store, resetRowSpanningState, props.rowSpanning]);
+  }, [apiRef, props.rowSpanning, updateRowSpanningState]);
 };

package/esm/hooks/features/rows/useGridRows.js

@@ -52,7 +52,8 @@ export 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 = gridRowsLookupSelector(apiRef)[id];
@@ -337,6 +338,7 @@ export const useGridRows = (apiRef, props, configuration) => {
   };
   const rowProApi = {
     setRowIndex,
+    setRowPosition,
     setRowChildrenExpansion,
     getRowGroupChildren,
     expandAllRows,

package/esm/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/esm/hooks/features/rows/useGridRowsOverridableMethods.js

@@ -1,20 +1,69 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridRowTreeSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
+import { gridExpandedSortedRowIndexLookupSelector } from "../filter/gridFilterSelector.js";
 import { GRID_ROOT_GROUP_ID } from "./gridRowsUtils.js";
 export const useGridRowsOverridableMethods = apiRef => {
+  const setRowPosition = React.useCallback((sourceRowId, targetRowId, position) => {
+    const sourceNode = gridRowNodeSelector(apiRef, sourceRowId);
+    const targetNode = 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 = 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 = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
+      const allRows = group.children;
+      const updatedRows = [...allRows];
+      updatedRows.splice(targetRowIndex, 0, updatedRows.splice(sourceRowIndex, 1)[0]);
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          tree: _extends({}, state.rows.tree, {
+            [GRID_ROOT_GROUP_ID]: _extends({}, group, {
+              children: updatedRows
+            })
+          })
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef]);
   const setRowIndex = React.useCallback((rowId, targetIndex) => {
     const node = gridRowNodeSelector(apiRef, rowId);
     if (!node) {
       throw new Error(`MUI X: No row with id #${rowId} found.`);
     }
-
-    // TODO: Remove irrelevant checks
-    if (node.parent !== 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 = gridRowTreeSelector(apiRef)[GRID_ROOT_GROUP_ID];
@@ -38,6 +87,7 @@ export const useGridRowsOverridableMethods = apiRef => {
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef]);
   return {
-    setRowIndex
+    setRowIndex,
+    setRowPosition
   };
 };

package/esm/hooks/features/scroll/useGridScroll.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
-import { useGridSelector } from "../../utils/useGridSelector.js";
 import { gridPageSelector, gridPageSizeSelector } from "../pagination/gridPaginationSelector.js";
 import { gridRowCountSelector } from "../rows/gridRowsSelector.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
@@ -47,7 +46,6 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef);
     const totalRowCount = gridRowCountSelector(apiRef);
@@ -62,6 +60,7 @@ export const useGridScroll = (apiRef, props) => {
       const columnPositions = gridColumnPositionsSelector(apiRef);
       let cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
+        const visibleSortedRows = gridExpandedSortedRowEntriesSelector(apiRef);
         const rowId = visibleSortedRows[params.rowIndex]?.id;
         const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
         if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
@@ -98,7 +97,7 @@ export 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/esm/hooks/features/sorting/gridSortingUtils.js

@@ -3,9 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { gridRowNodeSelector } from "../rows/gridRowsSelector.js";
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
-    if (process.env.NODE_ENV !== 'production') {
-      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');
-    }
+    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/esm/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/esm/hooks/features/sorting/useGridSorting.js

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

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

@@ -30,9 +30,6 @@ export const virtualizationStateInitializer = (state, props) => {
   });
 };
 export function useGridVirtualization(apiRef, rootProps) {
-  const {
-    virtualizer
-  } = apiRef.current;
   const {
     autoHeight,
     disableVirtualization
@@ -43,7 +40,14 @@ export function useGridVirtualization(apiRef, rootProps) {
    */
 
   const setVirtualization = enabled => {
+    const {
+      virtualizer
+    } = apiRef.current;
     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', _extends({}, virtualizer.store.state.virtualization, {
       enabled,
       enabledForColumns: enabled,
@@ -51,7 +55,14 @@ export function useGridVirtualization(apiRef, rootProps) {
     }));
   };
   const setColumnVirtualization = enabled => {
+    const {
+      virtualizer
+    } = apiRef.current;
     enabled &&= HAS_LAYOUT;
+    const snapshot = virtualizer.store.getSnapshot();
+    if (snapshot.virtualization.enabledForColumns === enabled) {
+      return;
+    }
     virtualizer.store.set('virtualization', _extends({}, virtualizer.store.state.virtualization, {
       enabledForColumns: enabled
     }));
@@ -61,7 +72,12 @@ export function useGridVirtualization(apiRef, rootProps) {
     unstable_setColumnVirtualization: setColumnVirtualization
   };
   useGridApiMethod(apiRef, api, 'public');
-  const forceUpdateRenderContext = virtualizer.api.forceUpdateRenderContext;
+  const forceUpdateRenderContext = () => {
+    const {
+      virtualizer
+    } = apiRef.current;
+    virtualizer?.api.scheduleUpdateRenderContext();
+  };
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
@@ -76,7 +92,10 @@ export 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/esm/hooks/utils/useGridEvent.js

@@ -24,7 +24,9 @@ export 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);
       }
     };
@@ -51,7 +53,9 @@ export 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/esm/hooks/utils/useGridSelector.js

@@ -31,10 +31,8 @@ const createRefs = () => ({
 const EMPTY = [];
 const emptyGetSnapshot = () => null;
 export function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      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) {
+    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 = useLazyRef(createRefs);
   const didInit = refs.current.selector !== null;

package/esm/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/esm/hooks/utils/useRunOncePerLoop.js

@@ -1,26 +1,36 @@
+'use client';
+
 import * as React from 'react';
-export function useRunOncePerLoop(callback, nextFrame = false) {
-  const scheduledRef = React.useRef(false);
+export 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/esm/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