@mui/x-data-grid 5.8.0 → 5.11.0

package/node/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -21,8 +19,6 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _gridPreferencePanelSelector = require("./gridPreferencePanelSelector");
 
-var _useGridSelector = require("../../utils/useGridSelector");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -45,7 +41,6 @@ exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 
 const useGridPreferencesPanel = apiRef => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
-  const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -54,9 +49,10 @@ const useGridPreferencesPanel = apiRef => {
 
   const hidePreferences = React.useCallback(() => {
     logger.debug('Hiding Preferences Panel');
+    const preferencePanelState = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(apiRef.current.state);
 
     if (preferencePanelState.openedPanelValue) {
-      apiRef.current.publishEvent(_events.GridEvents.preferencePanelClose, {
+      apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
     }
@@ -67,7 +63,7 @@ const useGridPreferencesPanel = apiRef => {
       }
     }));
     apiRef.current.forceUpdate();
-  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   const doNotHidePanel = React.useCallback(() => {
@@ -87,7 +83,7 @@ const useGridPreferencesPanel = apiRef => {
         openedPanelValue: newValue
       })
     }));
-    apiRef.current.publishEvent(_events.GridEvents.preferencePanelOpen, {
+    apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
     apiRef.current.forceUpdate();

package/node/hooks/features/rows/gridRowsSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -12,10 +12,14 @@ const gridRowsStateSelector = state => state.rows;
 exports.gridRowsStateSelector = gridRowsStateSelector;
 const gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
 exports.gridRowCountSelector = gridRowCountSelector;
+const gridRowsLoadingSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.loading);
+exports.gridRowsLoadingSelector = gridRowsLoadingSelector;
 const gridTopLevelRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 exports.gridTopLevelRowCountSelector = gridTopLevelRowCountSelector;
 const gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.idRowsLookup);
 exports.gridRowsLookupSelector = gridRowsLookupSelector;
+const gridRowsIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.idToIdLookup);
+exports.gridRowsIdToIdLookupSelector = gridRowsIdToIdLookupSelector;
 const gridRowTreeSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.tree);
 exports.gridRowTreeSelector = gridRowTreeSelector;
 const gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupingName);

package/node/hooks/features/rows/gridRowsUtils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
+exports.getTreeNodeDescendants = void 0;
 
 /**
  * A helper function to check if the id provided is valid.
@@ -15,4 +16,31 @@ function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided
   if (id == null) {
     throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
-}
+}
+
+const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+  var _tree$parentId;
+
+  const children = (_tree$parentId = tree[parentId]) == null ? void 0 : _tree$parentId.children;
+
+  if (children == null) {
+    return [];
+  }
+
+  const validDescendants = [];
+
+  for (let i = 0; i < children.length; i += 1) {
+    const child = children[i];
+    const childNode = tree[child];
+
+    if (!skipAutoGeneratedRows || !childNode.isAutoGenerated) {
+      validDescendants.push(child);
+    }
+
+    validDescendants.push(...getTreeNodeDescendants(tree, childNode.id, skipAutoGeneratedRows));
+  }
+
+  return validDescendants;
+};
+
+exports.getTreeNodeDescendants = getTreeNodeDescendants;

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

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -23,6 +21,10 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
+var _gridSortingSelector = require("../sorting/gridSortingSelector");
+
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+
 var _gridRowsUtils = require("./gridRowsUtils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,8 +37,8 @@ function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   return id;
 }
 
-const convertGridRowsPropToState = ({
-  prevState,
+const convertRowsPropToState = ({
+  prevCache: prevState,
   rows,
   getRowId
 }) => {
@@ -45,6 +47,7 @@ const convertGridRowsPropToState = ({
   if (rows) {
     value = {
       idRowsLookup: {},
+      idToIdLookup: {},
       ids: []
     };
 
@@ -52,6 +55,7 @@ const convertGridRowsPropToState = ({
       const row = rows[i];
       const id = getGridRowId(row, getRowId);
       value.idRowsLookup[id] = row;
+      value.idToIdLookup[id] = id;
       value.ids.push(id);
     }
   } else {
@@ -64,41 +68,37 @@ const convertGridRowsPropToState = ({
   };
 };
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
   const {
     value
-  } = rowsCache.state;
+  } = rowsCache;
   const rowCount = rowCountProp != null ? rowCountProp : 0;
   const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', (0, _extends2.default)({}, value, {
     previousTree
   }));
   const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return (0, _extends2.default)({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
 };
 
 const rowsStateInitializer = (state, props, apiRef) => {
-  const rowsCache = {
-    state: convertGridRowsPropToState({
-      rows: props.rows,
-      getRowId: props.getRowId,
-      prevState: {
-        value: {
-          idRowsLookup: {},
-          ids: []
-        },
-        rowsBeforePartialUpdates: []
-      }
-    }),
-    timeout: null,
-    lastUpdateMs: Date.now()
-  };
+  apiRef.current.unstable_caches.rows = convertRowsPropToState({
+    rows: props.rows,
+    getRowId: props.getRowId,
+    prevCache: {
+      value: {
+        idRowsLookup: {},
+        idToIdLookup: {},
+        ids: []
+      },
+      rowsBeforePartialUpdates: []
+    }
+  });
   return (0, _extends2.default)({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
-    rowsCache // TODO remove from state
-
+    rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, null, apiRef, props.rowCount, props.loading)
   });
 };
 
@@ -111,9 +111,9 @@ const useGridRows = (apiRef, props) => {
   }
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
-
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const lastUpdateMs = React.useRef(Date.now());
+  const timeout = React.useRef(null);
   const getRow = React.useCallback(id => {
     var _ref;
 
@@ -125,50 +125,50 @@ const useGridRows = (apiRef, props) => {
     acc[id] = index;
     return acc;
   }, {}), [currentPage.rows]);
-  const throttledRowsChange = React.useCallback((newState, throttle) => {
+  const throttledRowsChange = React.useCallback((newCache, throttle) => {
     const run = () => {
-      rowsCache.current.timeout = null;
-      rowsCache.current.lastUpdateMs = Date.now();
+      timeout.current = null;
+      lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount)
+        rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount, props.loading)
       }));
-      apiRef.current.publishEvent(_events.GridEvents.rowsSet);
+      apiRef.current.publishEvent('rowsSet');
       apiRef.current.forceUpdate();
     };
 
-    if (rowsCache.current.timeout) {
-      clearTimeout(rowsCache.current.timeout);
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+      timeout.current = null;
     }
 
-    rowsCache.current.state = newState;
-    rowsCache.current.timeout = null;
+    apiRef.current.unstable_caches.rows = newCache;
 
     if (!throttle) {
       run();
       return;
     }
 
-    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
 
     if (throttleRemainingTimeMs > 0) {
-      rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+      timeout.current = setTimeout(run, throttleRemainingTimeMs);
       return;
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
   /**
    * API METHODS
    */
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows,
-      prevState: rowsCache.current.state,
+      prevCache: apiRef.current.unstable_caches.rows,
       getRowId: props.getRowId
     }), true);
-  }, [logger, props.getRowId, throttledRowsChange]);
+  }, [apiRef, logger, props.getRowId, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -188,13 +188,15 @@ const useGridRows = (apiRef, props) => {
     });
     const deletedRowIds = [];
     const newStateValue = {
-      idRowsLookup: (0, _extends2.default)({}, rowsCache.current.state.value.idRowsLookup),
-      ids: [...rowsCache.current.state.value.ids]
+      idRowsLookup: (0, _extends2.default)({}, apiRef.current.unstable_caches.rows.value.idRowsLookup),
+      idToIdLookup: (0, _extends2.default)({}, apiRef.current.unstable_caches.rows.value.idToIdLookup),
+      ids: [...apiRef.current.unstable_caches.rows.value.ids]
     };
     uniqUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newStateValue.idRowsLookup[id];
+        delete newStateValue.idToIdLookup[id];
         deletedRowIds.push(id);
         return;
       }
@@ -203,6 +205,7 @@ const useGridRows = (apiRef, props) => {
 
       if (!oldRow) {
         newStateValue.idRowsLookup[id] = partialRow;
+        newStateValue.idToIdLookup[id] = id;
         newStateValue.ids.push(id);
         return;
       }
@@ -214,11 +217,11 @@ const useGridRows = (apiRef, props) => {
       newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
     }
 
-    const state = (0, _extends2.default)({}, rowsCache.current.state, {
+    const state = (0, _extends2.default)({}, apiRef.current.unstable_caches.rows, {
       value: newStateValue
     });
     throttledRowsChange(state, true);
-  }, [apiRef, props.getRowId, throttledRowsChange, props.signature]);
+  }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   const getRowModels = React.useCallback(() => {
     const allRows = (0, _gridRowsSelector.gridRowIdsSelector)(apiRef);
     const idRowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
@@ -247,23 +250,82 @@ const useGridRows = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(_events.GridEvents.rowExpansionChange, newNode);
+    apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
   const getRowNode = React.useCallback(id => {
     var _gridRowTreeSelector$;
 
     return (_gridRowTreeSelector$ = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  const getRowGroupChildren = React.useCallback(({
+    skipAutoGeneratedRows = true,
+    groupId,
+    applySorting,
+    applyFiltering
+  }) => {
+    const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
+    let children;
+
+    if (applySorting) {
+      const groupNode = tree[groupId];
+
+      if (!groupNode) {
+        return [];
+      }
+
+      const sortedRowIds = (0, _gridSortingSelector.gridSortedRowIdsSelector)(apiRef);
+      children = [];
+      const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+
+      for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
+        const id = sortedRowIds[index];
+        const node = tree[id];
+
+        if (!skipAutoGeneratedRows || !node.isAutoGenerated) {
+          children.push(id);
+        }
+      }
+    } else {
+      children = (0, _gridRowsUtils.getTreeNodeDescendants)(tree, groupId, skipAutoGeneratedRows);
+    }
+
+    if (applyFiltering) {
+      const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
+      children = children.filter(childId => filteredRowsLookup[childId] !== false);
+    }
+
+    return children;
+  }, [apiRef]);
+  const setRowIndex = React.useCallback((rowId, targetIndex) => {
+    const allRows = (0, _gridRowsSelector.gridRowIdsSelector)(apiRef);
+    const oldIndex = allRows.findIndex(row => row === rowId);
+
+    if (oldIndex === -1 || oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
+    const updatedRows = [...allRows];
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        ids: updatedRows
+      })
+    }));
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   const rowApi = {
     getRow,
     getRowModels,
     getRowsCount,
     getAllRowIds,
     setRows,
+    setRowIndex,
     updateRows,
     setRowChildrenExpansion,
     getRowNode,
-    getRowIndexRelativeToVisibleRows
+    getRowIndexRelativeToVisibleRows,
+    getRowGroupChildren
   };
   /**
    * EVENTS
@@ -273,7 +335,7 @@ const useGridRows = (apiRef, props) => {
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
     let rows;
 
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       // The `props.rows` has not changed since the last row grouping
       // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
       rows = undefined;
@@ -284,12 +346,12 @@ const useGridRows = (apiRef, props) => {
       rows = props.rows;
     }
 
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      prevCache: apiRef.current.unstable_caches.rows
     }), false);
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  }, [logger, apiRef, props.rows, props.getRowId, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -302,8 +364,8 @@ const useGridRows = (apiRef, props) => {
       groupRows();
     }
   }, [apiRef, groupRows]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'GridRowApi');
   /**
    * EFFECTS
@@ -311,9 +373,8 @@ const useGridRows = (apiRef, props) => {
 
   React.useEffect(() => {
     return () => {
-      if (rowsCache.current.timeout !== null) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        clearTimeout(rowsCache.current.timeout);
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
       }
     };
   }, []); // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
@@ -324,20 +385,20 @@ const useGridRows = (apiRef, props) => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `GridEvents.rowGroupsPreProcessingChange` listener)
+    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
 
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       return;
     }
 
     logger.debug(`Updating all rows, new length ${props.rows.length}`);
-    throttledRowsChange(convertGridRowsPropToState({
+    throttledRowsChange(convertRowsPropToState({
       rows: props.rows,
       getRowId: props.getRowId,
-      prevState: rowsCache.current.state
+      prevCache: apiRef.current.unstable_caches.rows
     }), false);
-  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange, apiRef]);
 };
 
 exports.useGridRows = useGridRows;

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -25,9 +25,7 @@ var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -92,10 +90,11 @@ const useGridRowsMeta = (apiRef, props) => {
         if (getRowSpacing) {
           var _spacing$top, _spacing$bottom;
 
-          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
           const spacing = getRowSpacing((0, _extends2.default)({}, row, {
-            isFirstVisible: index === 0,
-            isLastVisible: index === currentPage.rows.length - 1
+            isFirstVisible: indexRelativeToCurrentPage === 0,
+            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+            indexRelativeToCurrentPage
           }));
           initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
@@ -147,14 +146,7 @@ const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlepipeProcessorRegister = React.useCallback(name => {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

package/node/hooks/features/rows/useGridRowsPreProcessors.js

@@ -10,6 +10,7 @@ var _strategyProcessing = require("../../core/strategyProcessing");
 const flatRowTreeCreationMethod = ({
   ids,
   idRowsLookup,
+  idToIdLookup,
   previousTree
 }) => {
   const tree = {};
@@ -35,6 +36,7 @@ const flatRowTreeCreationMethod = ({
     tree,
     treeDepth: 1,
     idRowsLookup,
+    idToIdLookup,
     ids
   };
 };

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

@@ -11,6 +11,8 @@ 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");
@@ -19,6 +21,8 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,7 +36,12 @@ function scrollIntoView(dimensions) {
     offsetHeight,
     offsetTop
   } = dimensions;
-  const elementBottom = offsetTop + offsetHeight;
+  const elementBottom = offsetTop + offsetHeight; // Always scroll to top when cell is higher than viewport to avoid scroll jump
+  // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
+
+  if (offsetHeight > clientHeight) {
+    return offsetTop;
+  }
 
   if (elementBottom - clientHeight > scrollTop) {
     return elementBottom - clientHeight;
@@ -49,6 +58,8 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumns (state) - can be after, async only
  * @requires useGridRows (state) - can be after, async only
  * @requires useGridRowsMeta (state) - can be after, async only
+ * @requires useGridFilter (state)
+ * @requires useGridColumnSpanning (method)
  */
 
 
@@ -56,6 +67,7 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const windowRef = apiRef.current.windowRef;
+  const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridVisibleSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
     const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
@@ -70,10 +82,27 @@ const useGridScroll = (apiRef, props) => {
 
     if (params.colIndex != null) {
       const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
+      let cellWidth;
+
+      if (typeof params.rowIndex !== 'undefined') {
+        var _visibleSortedRows$pa;
+
+        const rowId = (_visibleSortedRows$pa = visibleSortedRows[params.rowIndex]) == null ? void 0 : _visibleSortedRows$pa.id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
+
+        if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+          cellWidth = cellColSpanInfo.cellProps.width;
+        }
+      }
+
+      if (typeof cellWidth === 'undefined') {
+        cellWidth = visibleColumns[params.colIndex].computedWidth;
+      }
+
       scrollCoordinates.left = scrollIntoView({
         clientHeight: windowRef.current.clientWidth,
         scrollTop: windowRef.current.scrollLeft,
-        offsetHeight: visibleColumns[params.colIndex].computedWidth,
+        offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
@@ -100,7 +129,7 @@ const useGridScroll = (apiRef, props) => {
     }
 
     return false;
-  }, [logger, apiRef, windowRef, props.pagination]);
+  }, [logger, apiRef, windowRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (windowRef.current && params.left != null && colRef.current) {
       colRef.current.scrollLeft = params.left;