@mui/x-data-grid 8.18.0 → 8.20.0

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -113,15 +113,32 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
+    if (!(0, _keyboardUtils.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 = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
+    const lastColIndex = Math.max(0, (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1);
     const columnGroupMaxDepth = (0, _gridColumnGroupsSelector.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':
         {
@@ -189,6 +206,36 @@ 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
@@ -202,27 +249,43 @@ 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 = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
     const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector)(apiRef) === params.field;
-    if (isEditing || isHeaderMenuOpen || !(0, _keyboardUtils.isNavigationKey)(event.key)) {
+    if (isHeaderMenuOpen || isEditing && event.key !== 'Tab') {
+      return;
+    }
+    if (!(0, _keyboardUtils.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 = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
+    const lastColIndex = Math.max(0, (0, _gridColumnsSelector.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;
         }
@@ -276,6 +339,29 @@ 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
@@ -289,7 +375,7 @@ 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 = (0, _focus.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
@@ -304,15 +390,32 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       depth,
       maxDepth
     } = params;
+    if (!(0, _keyboardUtils.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 = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
+    const lastColIndex = Math.max(0, (0, _gridColumnsSelector.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':
         {
@@ -363,6 +466,37 @@ 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
@@ -376,7 +510,7 @@ 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 ((0, _domUtils.isEventTargetInPortal)(event)) {
@@ -385,7 +519,12 @@ 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 === _gridEditRowModel.GridCellModes.Edit || !(0, _keyboardUtils.isNavigationKey)(event.key)) {
+    if (cellParams.cellMode === _gridEditRowModel.GridCellModes.Edit || !(0, _keyboardUtils.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, {
@@ -399,14 +538,22 @@ 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 = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
+    const lastColIndex = Math.max(0, (0, _gridColumnsSelector.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':
         {
@@ -420,10 +567,8 @@ 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;
         }
@@ -455,10 +600,29 @@ 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;
@@ -522,7 +686,7 @@ 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/hooks/features/pagination/useGridPaginationMeta.js

@@ -14,7 +14,6 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridPaginationSelector = require("./gridPaginationSelector");
 const useGridPaginationMeta = (apiRef, props) => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPaginationMeta');
-  const paginationMeta = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationMetaSelector);
   apiRef.current.registerControlState({
     stateId: 'paginationMeta',
     propModel: props.paginationMeta,
@@ -27,6 +26,7 @@ const useGridPaginationMeta = (apiRef, props) => {
    * API METHODS
    */
   const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    const paginationMeta = (0, _gridPaginationSelector.gridPaginationMetaSelector)(apiRef);
     if (paginationMeta === newPaginationMeta) {
       return;
     }
@@ -36,7 +36,7 @@ const useGridPaginationMeta = (apiRef, props) => {
         meta: newPaginationMeta
       })
     }));
-  }, [apiRef, logger, paginationMeta]);
+  }, [apiRef, logger]);
   const paginationMetaApi = {
     setPaginationMeta
   };

package/hooks/features/pagination/useGridPaginationModel.js

@@ -68,6 +68,7 @@ const useGridPaginationModel = (apiRef, props) => {
       pageSize: currentModel.pageSize
     });
   }, [apiRef, logger]);
+  const debouncedSetPage = React.useMemo(() => (0, _debounce.default)(setPage, 0), [setPage]);
   const setPageSize = React.useCallback(pageSize => {
     const currentModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
     if (pageSize === currentModel.pageSize) {
@@ -162,9 +163,11 @@ const useGridPaginationModel = (apiRef, props) => {
     }
     const pageCount = (0, _gridPaginationSelector.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
@@ -172,7 +175,7 @@ const useGridPaginationModel = (apiRef, props) => {
   const navigateToStart = React.useCallback(() => {
     const paginationModel = (0, _gridPaginationSelector.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
@@ -182,7 +185,7 @@ const useGridPaginationModel = (apiRef, props) => {
         top: 0
       });
     }
-  }, [apiRef]);
+  }, [apiRef, debouncedSetPage]);
   const debouncedNavigateToStart = React.useMemo(() => (0, _debounce.default)(navigateToStart, 0), [navigateToStart]);
 
   /**

package/hooks/features/pagination/useGridRowCount.js

@@ -10,16 +10,13 @@ exports.useGridRowCount = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _store = require("@mui/x-internals/store");
 var _filter = require("../filter");
 var _utils = require("../../utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridPaginationSelector = require("./gridPaginationSelector");
 const useGridRowCount = (apiRef, props) => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridRowCount');
-  const visibleTopLevelRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const rowCountState = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationRowCountSelector);
-  const paginationMeta = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationMetaSelector);
-  const paginationModel = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const previousPageSize = (0, _useLazyRef.default)(() => (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef).pageSize);
   apiRef.current.registerControlState({
     stateId: 'paginationRowCount',
@@ -33,6 +30,7 @@ const useGridRowCount = (apiRef, props) => {
    * API METHODS
    */
   const setRowCount = React.useCallback(newRowCount => {
+    const rowCountState = (0, _gridPaginationSelector.gridPaginationRowCountSelector)(apiRef);
     if (rowCountState === newRowCount) {
       return;
     }
@@ -42,7 +40,7 @@ const useGridRowCount = (apiRef, props) => {
         rowCount: newRowCount
       })
     }));
-  }, [apiRef, logger, rowCountState]);
+  }, [apiRef, logger]);
   const paginationRowCountApi = {
     setRowCount
   };
@@ -90,29 +88,47 @@ const useGridRowCount = (apiRef, props) => {
     }
     if (model.pageSize !== previousPageSize.current) {
       previousPageSize.current = model.pageSize;
+      const rowCountState = (0, _gridPaginationSelector.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]);
   (0, _utils.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]);
+  (0, _store.useStoreEffect)(
+  // typings not supported currently, but methods work
+  apiRef.current.store, () => {
+    const isLastPage = (0, _gridPaginationSelector.gridPaginationMetaSelector)(apiRef).hasNextPage === false;
+    if (isLastPage) {
+      return true;
+    }
+    if (props.paginationMode === 'client') {
+      return (0, _filter.gridFilteredTopLevelRowCountSelector)(apiRef);
+    }
+    return undefined;
+  }, (_, isLastPageOrRowCount) => {
+    if (isLastPageOrRowCount === true && (0, _gridPaginationSelector.gridPaginationRowCountSelector)(apiRef) !== -1) {
+      const visibleTopLevelRowCount = (0, _filter.gridFilteredTopLevelRowCountSelector)(apiRef);
+      const paginationModel = (0, _gridPaginationSelector.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((0, _filter.gridFilteredTopLevelRowCountSelector)(apiRef));
     }
-  }, [apiRef, visibleTopLevelRowCount, isLastPage, rowCountState, paginationModel]);
+  }, [apiRef, props.paginationMode]);
 };
 exports.useGridRowCount = useGridRowCount;

package/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/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/hooks/features/rowReorder/gridRowReorderSelector.js

@@ -3,7 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridRowReorderStateSelector = exports.gridIsRowDragActiveSelector = void 0;
+exports.gridRowReorderStateSelector = exports.gridRowDropTargetSelector = exports.gridRowDropTargetRowIdSelector = exports.gridRowDropPositionSelector = exports.gridIsRowDragActiveSelector = exports.gridDraggedRowIdSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridRowReorderStateSelector = exports.gridRowReorderStateSelector = (0, _createSelector.createRootSelector)(state => state.rowReorder);
-const gridIsRowDragActiveSelector = exports.gridIsRowDragActiveSelector = (0, _createSelector.createSelector)(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);
+const gridIsRowDragActiveSelector = exports.gridIsRowDragActiveSelector = (0, _createSelector.createSelector)(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);
+
+// Selector for the entire drop target state
+const gridRowDropTargetSelector = exports.gridRowDropTargetSelector = (0, _createSelector.createSelector)(gridRowReorderStateSelector, rowReorder => rowReorder?.dropTarget ?? {
+  rowId: null,
+  position: null
+});
+const gridRowDropTargetRowIdSelector = exports.gridRowDropTargetRowIdSelector = (0, _createSelector.createSelector)(gridRowDropTargetSelector, dropTarget => dropTarget.rowId ?? null);
+
+// Selector for a specific row's drop position
+const gridRowDropPositionSelector = exports.gridRowDropPositionSelector = (0, _createSelector.createSelector)(gridRowDropTargetSelector, (dropTarget, rowId) => {
+  if (dropTarget.rowId === rowId) {
+    return dropTarget.position;
+  }
+  return null;
+});
+
+// Selector for the dragged row ID
+const gridDraggedRowIdSelector = exports.gridDraggedRowIdSelector = (0, _createSelector.createSelector)(gridRowReorderStateSelector, rowReorder => rowReorder?.draggedRowId ?? null);