@mui/x-data-grid 8.18.0 → 8.20.0

package/esm/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -106,15 +106,32 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
+    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled for header/all, or if we are tabbing to the content area while `tabNavigation` is enabled for content only
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'content' && event.shiftKey)) {
+      return;
+    }
     const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
-    const lastRowIndexInPage = currentPageRows.length - 1;
+    const lastRowIndexInPage = currentPageRows.length > 0 ? currentPageRows.length - 1 : null;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     const columnGroupMaxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the header area while only content `tabNavigation` is enabled, go to the first cell
+    if (event.key === 'Tab' && props.tabNavigation === 'content' && !event.shiftKey) {
+      if (firstRowIndexInPage !== null) {
+        goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+        event.preventDefault();
+      }
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
@@ -182,6 +199,36 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           }
           break;
         }
+      case 'Tab':
+        {
+          if (event.shiftKey) {
+            // if the key is pressed on the first column header, Shift+Tab should go to the group header if it is there or allow default behavior
+            if (colIndexBefore === firstColIndex) {
+              if (columnGroupMaxDepth > 0) {
+                goToGroupHeader(lastColIndex, columnGroupMaxDepth - 1, event);
+              } else {
+                shouldPreventDefault = false;
+              }
+            } else {
+              goToHeader(colIndexBefore - 1, event);
+            }
+          } else if (colIndexBefore === lastColIndex) {
+            // the key is pressed at the last column header. go to the first header filter or the first cell
+            if (headerFilteringEnabled) {
+              goToHeaderFilter(firstColIndex, event);
+            }
+            // this point can be reached if tabbing is enabled for all content or just header.
+            // if it is not enabled for all content or there is no data, then do not focus on the first cell
+            else if (props.tabNavigation === 'all' && firstRowIndexInPage !== null) {
+              goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+            } else {
+              shouldPreventDefault = false;
+            }
+          } else {
+            goToHeader(colIndexBefore + 1, event);
+          }
+          break;
+        }
       case ' ':
         {
           // prevent Space event from scrolling
@@ -195,27 +242,43 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
     const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
-    if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
+    if (isHeaderMenuOpen || isEditing && event.key !== 'Tab') {
+      return;
+    }
+    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled for header/all, or if we are tabbing to the content area while `tabNavigation` is enabled for content only
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'content' && event.shiftKey)) {
       return;
     }
     const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const firstRowIndexInPage = 0;
-    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
+    const lastRowIndexInPage = currentPageRows.length > 0 ? currentPageRows.length - 1 : null;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the header area while only content `tabNavigation` is enabled, go to the first cell
+    if (event.key === 'Tab' && props.tabNavigation === 'content' && !event.shiftKey) {
+      if (firstRowIndexInPage !== null) {
+        goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+        event.preventDefault();
+      }
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
-          const rowId = getRowIdFromIndex(firstRowIndexInPage);
-          if (firstRowIndexInPage !== null && rowId != null) {
-            goToCell(colIndexBefore, rowId);
+          if (firstRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
           break;
         }
@@ -269,6 +332,29 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           goToHeaderFilter(lastColIndex, event);
           break;
         }
+      case 'Tab':
+        {
+          if (event.shiftKey) {
+            // if the key is pressed on the first header filter, Shift+Tab should go to the column header
+            if (colIndexBefore === firstColIndex) {
+              goToHeader(lastColIndex, event);
+            } else {
+              goToHeaderFilter(colIndexBefore - 1, event);
+            }
+          } else if (colIndexBefore === lastColIndex) {
+            // the key is pressed at the last header filter.
+            // this point can be reached if `tabNavigation` is enabled for all content or just header.
+            // if it is not enabled for all content or there is no data, then do not focus on the first cell
+            if (props.tabNavigation === 'all' && firstRowIndexInPage !== null) {
+              goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+            } else {
+              shouldPreventDefault = false;
+            }
+          } else {
+            goToHeaderFilter(colIndexBefore + 1, event);
+          }
+          break;
+        }
       case ' ':
         {
           // prevent Space event from scrolling
@@ -282,7 +368,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
@@ -297,15 +383,32 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       depth,
       maxDepth
     } = params;
+    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled for header/all, or if we are tabbing to the content area while `tabNavigation` is enabled for content only
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'content' && event.shiftKey)) {
+      return;
+    }
     const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const currentColIndex = apiRef.current.getColumnIndex(currentField);
     const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
-    const firstRowIndexInPage = 0;
-    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
+    const lastRowIndexInPage = currentPageRows.length > 0 ? currentPageRows.length - 1 : null;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the header area while only content `tabNavigation` is enabled, go to the first cell
+    if (event.key === 'Tab' && props.tabNavigation === 'content' && !event.shiftKey) {
+      if (firstRowIndexInPage !== null) {
+        goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+        event.preventDefault();
+      }
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
@@ -356,6 +459,37 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           goToGroupHeader(lastColIndex, currentDepth, event);
           break;
         }
+      case 'Tab':
+        {
+          if (event.shiftKey) {
+            const remainingLeftColumns = fields.indexOf(currentField);
+            const targetColIndex = currentColIndex - remainingLeftColumns - 1;
+            if (targetColIndex < firstColIndex) {
+              if (depth === 0) {
+                // if the key is pressed on the first column group header at the top level, Shift+Tab should allow default behavior
+                shouldPreventDefault = false;
+              } else {
+                // Navigate to last column group header at the previous depth
+                goToGroupHeader(lastColIndex, currentDepth - 1, event);
+              }
+            } else {
+              goToGroupHeader(targetColIndex, currentDepth, event);
+            }
+          } else {
+            const remainingRightColumns = fields.length - fields.indexOf(currentField) - 1;
+            const targetColIndex = currentColIndex + remainingRightColumns + 1;
+            if (targetColIndex > lastColIndex && depth === maxDepth - 1) {
+              // the key is pressed at the last column group header at the deepest level. go to the first column header
+              goToHeader(firstColIndex, event);
+            } else if (targetColIndex > lastColIndex) {
+              // go down a depth level
+              goToGroupHeader(firstColIndex, currentDepth + 1, event);
+            } else {
+              goToGroupHeader(targetColIndex, currentDepth, event);
+            }
+          }
+          break;
+        }
       case ' ':
         {
           // prevent Space event from scrolling
@@ -369,7 +503,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (isEventTargetInPortal(event)) {
@@ -378,7 +512,12 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
     // Get the most recent params because the cell mode may have changed by another listener
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    if (cellParams.cellMode === GridCellModes.Edit || !isNavigationKey(event.key)) {
+    if (cellParams.cellMode === GridCellModes.Edit || !isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled or if we are tabbing to the header area while `tabNavigation` is enabled for header only (with Shift+Tab)
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'header' && !event.shiftKey)) {
       return;
     }
     const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
@@ -392,14 +531,22 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (currentPageRows.length === 0) {
       return;
     }
+    const previousAreaNavigationFn = headerFilteringEnabled ? goToHeaderFilter : goToHeader;
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the content area while only header `tabNavigation` is enabled, go to the last header filter or column header
+    if (event.key === 'Tab' && props.tabNavigation === 'header' && event.shiftKey) {
+      previousAreaNavigationFn(lastColIndex, event);
+      event.preventDefault();
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
@@ -413,10 +560,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           if (rowIndexBefore > firstRowIndexInPage) {
             goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore - 1));
-          } else if (headerFilteringEnabled) {
-            goToHeaderFilter(colIndexBefore, event);
           } else {
-            goToHeader(colIndexBefore, event);
+            previousAreaNavigationFn(colIndexBefore, event);
           }
           break;
         }
@@ -448,10 +593,29 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'Tab':
         {
-          // "Tab" is only triggered by the row / cell editing feature
-          if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
-          } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
+          if (event.shiftKey) {
+            // if the key is pressed on the first cell, Shift+Tab should go to the last column header
+            // same is if `tabNavigation` is enabled for header only
+            if (colIndexBefore === firstColIndex && rowIndexBefore === firstRowIndexInPage) {
+              if (props.tabNavigation === 'all') {
+                previousAreaNavigationFn(lastColIndex, event);
+              } else {
+                shouldPreventDefault = false;
+              }
+            } else if (colIndexBefore === firstColIndex) {
+              goToCell(lastColIndex, getRowIdFromIndex(rowIndexBefore - 1));
+            } else {
+              goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
+            }
+          } else if (colIndexBefore === lastColIndex) {
+            // the key is pressed at the last column. if it is also the last row, do not to anything to allow the default behavior
+            // otherwise, go to the first column of the next row
+            if (rowIndexBefore !== lastRowIndexInPage) {
+              goToCell(firstColIndex, getRowIdFromIndex(rowIndexBefore + 1));
+            } else {
+              shouldPreventDefault = false;
+            }
+          } else {
             goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
           break;
@@ -515,7 +679,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

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

@@ -2,12 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridLogger, useGridSelector, useGridApiMethod } from "../../utils/index.js";
+import { useGridLogger, useGridApiMethod } from "../../utils/index.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPaginationMetaSelector } from "./gridPaginationSelector.js";
 export const useGridPaginationMeta = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationMeta');
-  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
   apiRef.current.registerControlState({
     stateId: 'paginationMeta',
     propModel: props.paginationMeta,
@@ -20,6 +19,7 @@ export const useGridPaginationMeta = (apiRef, props) => {
    * API METHODS
    */
   const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    const paginationMeta = gridPaginationMetaSelector(apiRef);
     if (paginationMeta === newPaginationMeta) {
       return;
     }
@@ -29,7 +29,7 @@ export const useGridPaginationMeta = (apiRef, props) => {
         meta: newPaginationMeta
       })
     }));
-  }, [apiRef, logger, paginationMeta]);
+  }, [apiRef, logger]);
   const paginationMetaApi = {
     setPaginationMeta
   };

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

@@ -60,6 +60,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       pageSize: currentModel.pageSize
     });
   }, [apiRef, logger]);
+  const debouncedSetPage = React.useMemo(() => debounce(setPage, 0), [setPage]);
   const setPageSize = React.useCallback(pageSize => {
     const currentModel = gridPaginationModelSelector(apiRef);
     if (pageSize === currentModel.pageSize) {
@@ -154,9 +155,11 @@ export const useGridPaginationModel = (apiRef, props) => {
     }
     const pageCount = gridPageCountSelector(apiRef);
     if (paginationModel.page > pageCount - 1) {
-      apiRef.current.setPage(Math.max(0, pageCount - 1));
+      queueMicrotask(() => {
+        debouncedSetPage(Math.max(0, pageCount - 1));
+      });
     }
-  }, [apiRef]);
+  }, [apiRef, debouncedSetPage]);
 
   /**
    * Goes to the first row of the grid
@@ -164,7 +167,7 @@ export const useGridPaginationModel = (apiRef, props) => {
   const navigateToStart = React.useCallback(() => {
     const paginationModel = gridPaginationModelSelector(apiRef);
     if (paginationModel.page !== 0) {
-      apiRef.current.setPage(0);
+      debouncedSetPage(0);
     }
 
     // If the page was not changed it might be needed to scroll to the top
@@ -174,7 +177,7 @@ export const useGridPaginationModel = (apiRef, props) => {
         top: 0
       });
     }
-  }, [apiRef]);
+  }, [apiRef, debouncedSetPage]);
   const debouncedNavigateToStart = React.useMemo(() => debounce(navigateToStart, 0), [navigateToStart]);
 
   /**

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

@@ -3,16 +3,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { useStoreEffect } from '@mui/x-internals/store';
 import { gridFilteredTopLevelRowCountSelector } from "../filter/index.js";
-import { useGridLogger, useGridSelector, useGridApiMethod, useGridEvent } from "../../utils/index.js";
+import { useGridLogger, useGridApiMethod, useGridEvent } from "../../utils/index.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPaginationRowCountSelector, gridPaginationMetaSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 export const useGridRowCount = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowCount');
-  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const rowCountState = useGridSelector(apiRef, gridPaginationRowCountSelector);
-  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
-  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const previousPageSize = useLazyRef(() => gridPaginationModelSelector(apiRef).pageSize);
   apiRef.current.registerControlState({
     stateId: 'paginationRowCount',
@@ -26,6 +23,7 @@ export const useGridRowCount = (apiRef, props) => {
    * API METHODS
    */
   const setRowCount = React.useCallback(newRowCount => {
+    const rowCountState = gridPaginationRowCountSelector(apiRef);
     if (rowCountState === newRowCount) {
       return;
     }
@@ -35,7 +33,7 @@ export const useGridRowCount = (apiRef, props) => {
         rowCount: newRowCount
       })
     }));
-  }, [apiRef, logger, rowCountState]);
+  }, [apiRef, logger]);
   const paginationRowCountApi = {
     setRowCount
   };
@@ -83,28 +81,46 @@ export const useGridRowCount = (apiRef, props) => {
     }
     if (model.pageSize !== previousPageSize.current) {
       previousPageSize.current = model.pageSize;
+      const rowCountState = gridPaginationRowCountSelector(apiRef);
       if (rowCountState === -1) {
         // Row count unknown and page size changed, reset the page
         apiRef.current.setPage(0);
       }
     }
-  }, [props.paginationMode, previousPageSize, rowCountState, apiRef]);
+  }, [props.paginationMode, previousPageSize, apiRef]);
   useGridEvent(apiRef, 'paginationModelChange', handlePaginationModelChange);
 
   /**
    * EFFECTS
    */
   React.useEffect(() => {
-    if (props.paginationMode === 'client') {
-      apiRef.current.setRowCount(visibleTopLevelRowCount);
-    } else if (props.rowCount != null) {
+    if (props.paginationMode === 'server' && props.rowCount != null) {
       apiRef.current.setRowCount(props.rowCount);
     }
-  }, [apiRef, props.paginationMode, visibleTopLevelRowCount, props.rowCount]);
-  const isLastPage = paginationMeta.hasNextPage === false;
-  React.useEffect(() => {
-    if (isLastPage && rowCountState === -1) {
+  }, [apiRef, props.paginationMode, props.rowCount]);
+  useStoreEffect(
+  // typings not supported currently, but methods work
+  apiRef.current.store, () => {
+    const isLastPage = gridPaginationMetaSelector(apiRef).hasNextPage === false;
+    if (isLastPage) {
+      return true;
+    }
+    if (props.paginationMode === 'client') {
+      return gridFilteredTopLevelRowCountSelector(apiRef);
+    }
+    return undefined;
+  }, (_, isLastPageOrRowCount) => {
+    if (isLastPageOrRowCount === true && gridPaginationRowCountSelector(apiRef) !== -1) {
+      const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
+      const paginationModel = gridPaginationModelSelector(apiRef);
       apiRef.current.setRowCount(paginationModel.pageSize * paginationModel.page + visibleTopLevelRowCount);
+    } else if (typeof isLastPageOrRowCount === 'number') {
+      apiRef.current.setRowCount(isLastPageOrRowCount);
+    }
+  });
+  React.useEffect(() => {
+    if (props.paginationMode === 'client') {
+      apiRef.current.setRowCount(gridFilteredTopLevelRowCountSelector(apiRef));
     }
-  }, [apiRef, visibleTopLevelRowCount, isLastPage, rowCountState, paginationModel]);
+  }, [apiRef, props.paginationMode]);
 };

package/esm/hooks/features/rowReorder/gridRowReorderInterfaces.d.ts

@@ -1,3 +1,5 @@
+import type { GridRowId } from "../../../models/gridRows.js";
+import type { RowReorderDropPosition } from "../../../models/api/gridRowApi.js";
 /**
  * The row reorder state.
  */
@@ -6,4 +8,21 @@ export interface GridRowReorderState {
    * Whether a row drag operation is currently active.
    */
   isActive: boolean;
+  /**
+   * The row ID being dragged.
+   */
+  draggedRowId: GridRowId | null;
+  /**
+   * The current drop target information.
+   */
+  dropTarget?: {
+    /**
+     * The row ID where the drop indicator should be shown.
+     */
+    rowId: GridRowId;
+    /**
+     * The position of the drop indicator relative to the target row.
+     */
+    position: RowReorderDropPosition;
+  };
 }

package/esm/hooks/features/rowReorder/gridRowReorderSelector.d.ts

@@ -1,5 +1,24 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import type { GridRowId } from "../../../models/gridRows.js";
 export declare const gridRowReorderStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("./gridRowReorderInterfaces.js").GridRowReorderState>;
 export declare const gridIsRowDragActiveSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => boolean;
+} | null>) => boolean;
+export declare const gridRowDropTargetSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
+  rowId: GridRowId;
+  position: import("../../../internals/index.js").RowReorderDropPosition;
+} | {
+  rowId: null;
+  position: null;
+};
+export declare const gridRowDropTargetRowIdSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridRowId | null;
+export declare const gridRowDropPositionSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>, rowId: GridRowId) => import("../../../internals/index.js").RowReorderDropPosition | null;
+export declare const gridDraggedRowIdSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridRowId | null;

package/esm/hooks/features/rowReorder/gridRowReorderSelector.js

@@ -1,3 +1,21 @@
 import { createRootSelector, createSelector } from "../../../utils/createSelector.js";
 export const gridRowReorderStateSelector = createRootSelector(state => state.rowReorder);
-export const gridIsRowDragActiveSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);
+export const gridIsRowDragActiveSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);
+
+// Selector for the entire drop target state
+export const gridRowDropTargetSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.dropTarget ?? {
+  rowId: null,
+  position: null
+});
+export const gridRowDropTargetRowIdSelector = createSelector(gridRowDropTargetSelector, dropTarget => dropTarget.rowId ?? null);
+
+// Selector for a specific row's drop position
+export const gridRowDropPositionSelector = createSelector(gridRowDropTargetSelector, (dropTarget, rowId) => {
+  if (dropTarget.rowId === rowId) {
+    return dropTarget.position;
+  }
+  return null;
+});
+
+// Selector for the dragged row ID
+export const gridDraggedRowIdSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.draggedRowId ?? null);