@mui/x-data-grid 7.23.5 → 7.24.0

package/hooks/features/scroll/useGridScroll.d.ts

@@ -9,4 +9,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFilter (state)
  * @requires useGridColumnSpanning (method)
  */
-export declare const useGridScroll: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "unstable_listView">) => void;
+export declare const useGridScroll: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "unstable_listView">) => void;

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

@@ -8,10 +8,10 @@ export declare const mergeStateWithSortModel: (sortModel: GridSortModel, disable
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridSortingModelApplier | null;
+export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: React.RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
 export declare const getNextGridSortDirection: (sortingOrder: readonly GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
 export declare const gridStringOrNumberComparator: GridComparatorFn;
 export declare const gridNumberComparator: GridComparatorFn;

package/hooks/features/sorting/gridSortingUtils.js

@@ -19,7 +19,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -72,7 +72,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 export const buildAggregatedSortingApplier = (sortModel, apiRef) => {

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

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

package/hooks/features/statePersistence/useGridStatePersistence.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridStatePersistence: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridStatePersistence: (apiRef: React.RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/virtualization/gridFocusedVirtualCellSelector.d.ts

@@ -0,0 +1,6 @@
+export declare const gridFocusedVirtualCellSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, {
+    rowIndex: number;
+    columnIndex: number;
+    id?: import("../../..").GridRowId | undefined;
+    field?: string | undefined;
+} | null>;

package/hooks/features/virtualization/gridFocusedVirtualCellSelector.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createSelector } from 'reselect';
+import { createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { gridRenderContextSelector } from "./gridVirtualizationSelectors.js";
+import { gridFocusCellSelector } from "../focus/index.js";
+import { gridVisibleRowsSelector } from "../pagination/index.js";
+import { gridRowsLookupSelector } from "../rows/index.js";
+const gridIsFocusedCellOutOfContex = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
+  if (!focusedCell) {
+    return false;
+  }
+  const row = rows[focusedCell.id];
+  if (!row) {
+    return false;
+  }
+  const rowIndex = currentPage.rowToIndexMap.get(row);
+  const columnIndex = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex).findIndex(column => column.field === focusedCell.field);
+  const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
+  return !isInRenderContext;
+});
+export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContex, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridRowsLookupSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
+  if (!isFocusedCellOutOfRenderContext) {
+    return null;
+  }
+  const row = rows[focusedCell.id];
+  if (!row) {
+    return null;
+  }
+  const rowIndex = currentPage.rowToIndexMap.get(row);
+  if (rowIndex === undefined) {
+    return null;
+  }
+  const columnIndex = visibleColumns.findIndex(column => column.field === focusedCell.field);
+  if (columnIndex === -1) {
+    return null;
+  }
+  return _extends({}, focusedCell, {
+    rowIndex,
+    columnIndex
+  });
+});

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPinnedRowsPosition } from '../rows/gridRowsInterfaces';
-import type { GridRenderContext, GridColumnsRenderContext, GridRowEntry, GridRowId } from '../../../models';
+import { type GridRenderContext, type GridColumnsRenderContext, type GridRowEntry, type GridRowId } from '../../../models';
 export type VirtualScroller = ReturnType<typeof useGridVirtualScroller>;
 export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
 export declare const useGridVirtualScroller: () => {
@@ -15,7 +15,7 @@ export declare const useGridVirtualScroller: () => {
         ref: (node: HTMLDivElement | null) => (() => void) | undefined;
     };
     getScrollerProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         onScroll: (event: React.UIEvent) => void;
         onWheel: (event: React.WheelEvent) => void;
         onTouchMove: (event: React.TouchEvent) => void;
@@ -26,16 +26,17 @@ export declare const useGridVirtualScroller: () => {
     getContentProps: () => {
         style: React.CSSProperties;
         role: string;
+        ref: (node: HTMLDivElement | null) => void;
     };
     getRenderZoneProps: () => {
         role: string;
     };
     getScrollbarVerticalProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         role: string;
     };
     getScrollbarHorizontalProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         role: string;
     };
 };

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -13,7 +13,6 @@ import { useRunOnce } from "../../utils/useRunOnce.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
 import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
-import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
 import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { useGridApiEventHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
@@ -26,6 +25,7 @@ import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { minimalContentHeight } from "../rows/gridRowsUtils.js";
+import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -73,12 +73,9 @@ export const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = useRtl();
-  const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
-  const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
   const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
@@ -86,6 +83,8 @@ export const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
+  const isRenderContextReady = React.useRef(false);
+  const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
     if (!node) {
@@ -93,7 +92,10 @@ export const useGridVirtualScroller = () => {
     }
     const initialRect = node.getBoundingClientRect();
     let lastSize = roundDimensions(initialRect);
-    apiRef.current.publishEvent('resize', lastSize);
+    if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
+      previousSize.current = lastSize;
+      apiRef.current.publishEvent('resize', lastSize);
+    }
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
@@ -134,17 +136,15 @@ export const useGridVirtualScroller = () => {
    * work that's not necessary. Thus we store the context at the start of the scroll in `frozenContext`, and the rows
    * that are part of this old context will keep their same render context as to avoid re-rendering.
    */
-  const scrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
+  const scrollPosition = React.useRef(rootProps.initialState?.scroll ?? EMPTY_SCROLL_POSITION);
+  const ignoreNextScrollEvent = React.useRef(false);
   const previousContextScrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
   const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
+  const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
   const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
-  const focusedCell = {
-    rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
-    columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
-  };
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
@@ -228,6 +228,10 @@ export const useGridVirtualScroller = () => {
     updateRenderContext(nextRenderContext);
   };
   const handleScroll = useEventCallback(event => {
+    if (ignoreNextScrollEvent.current) {
+      ignoreNextScrollEvent.current = false;
+      return;
+    }
     const {
       scrollTop,
       scrollLeft
@@ -286,14 +290,14 @@ export const useGridVirtualScroller = () => {
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = params.rows ? range(0, params.rows.length) : range(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
-    if (!isPinnedSection && focusedCell.rowIndex !== -1) {
-      if (focusedCell.rowIndex < firstRowToRender) {
-        virtualRowIndex = focusedCell.rowIndex;
-        rowIndexes.unshift(virtualRowIndex);
+    if (!isPinnedSection && focusedVirtualCell) {
+      if (focusedVirtualCell.rowIndex < firstRowToRender) {
+        rowIndexes.unshift(focusedVirtualCell.rowIndex);
+        virtualRowIndex = focusedVirtualCell.rowIndex;
       }
-      if (focusedCell.rowIndex >= lastRowToRender) {
-        virtualRowIndex = focusedCell.rowIndex;
-        rowIndexes.push(virtualRowIndex);
+      if (focusedVirtualCell.rowIndex > lastRowToRender) {
+        rowIndexes.push(focusedVirtualCell.rowIndex);
+        virtualRowIndex = focusedVirtualCell.rowIndex;
       }
     }
     const rows = [];
@@ -333,7 +337,6 @@ export const useGridVirtualScroller = () => {
           });
         }
       }
-      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -358,19 +361,16 @@ export const useGridVirtualScroller = () => {
           isLastVisible = isLastVisibleInSection;
         }
       }
-      const isVirtualRow = rowIndexInPage === virtualRowIndex;
-      const isNotVisible = isVirtualRow;
-      let tabbableCell = null;
-      if (cellTabIndex !== null && cellTabIndex.id === id) {
-        const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
-        tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
-      }
       let currentRenderContext = baseRenderContext;
       if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
+      const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
+      const isVirtualFocusColumn = focusedVirtualCell?.rowIndex === rowIndex;
       const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
+      const firstColumnIndex = currentRenderContext.firstColumnIndex;
+      const lastColumnIndex = currentRenderContext.lastColumnIndex;
       rows.push(/*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -378,19 +378,21 @@ export const useGridVirtualScroller = () => {
         selected: isSelected,
         offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
-        dimensions: dimensions,
+        columnsTotalWidth: dimensions.columnsTotalWidth,
         rowHeight: baseRowHeight,
-        tabbableCell: tabbableCell,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
-        renderContext: currentRenderContext,
-        focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
+        firstColumnIndex: firstColumnIndex,
+        lastColumnIndex: lastColumnIndex,
+        focusedColumnIndex: isVirtualFocusColumn ? focusedVirtualCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isNotVisible,
-        showBottomBorder: showBottomBorder
+        isNotVisible: isVirtualFocusRow,
+        showBottomBorder: showBottomBorder,
+        scrollbarWidth: dimensions.hasScrollY ? dimensions.scrollbarSize : 0,
+        gridHasFiller: dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width
       }, rowProps), id));
-      if (isNotVisible) {
+      if (isVirtualFocusRow) {
         return;
       }
       const panel = panels.get(id);
@@ -421,18 +423,21 @@ export const useGridVirtualScroller = () => {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
-  React.useEffect(() => {
-    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [apiRef, contentSize]);
-  useEnhancedEffect(() => {
-    // TODO a scroll reset should not be necessary
-    if (enabledForColumns) {
-      scrollerRef.current.scrollLeft = 0;
+  const onContentSizeApplied = React.useCallback(node => {
+    if (!node) {
+      return;
     }
-    if (enabledForRows) {
-      scrollerRef.current.scrollTop = 0;
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange', {
+      columnsTotalWidth,
+      contentHeight
+    });
+  }, [apiRef, columnsTotalWidth, contentHeight]);
+  useEnhancedEffect(() => {
+    if (!isRenderContextReady.current) {
+      return;
     }
-  }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+    apiRef.current.updateRenderContext?.();
+  }, [apiRef, enabledForColumns, enabledForRows]);
   useEnhancedEffect(() => {
     if (listView) {
       scrollerRef.current.scrollLeft = 0;
@@ -447,6 +452,53 @@ export const useGridVirtualScroller = () => {
       left: scrollPosition.current.left,
       renderContext: initialRenderContext
     });
+    isRenderContextReady.current = true;
+    if (rootProps.initialState?.scroll && scrollerRef.current) {
+      const scroller = scrollerRef.current;
+      const {
+        top,
+        left
+      } = rootProps.initialState.scroll;
+
+      // On initial mount, if we have columns available, we can restore the horizontal scroll immediately, but we need to skip the resulting scroll event, otherwise we would recalculate the render context at position top=0, left=restoredValue, but the initial render context is already calculated based on the initial value of scrollPosition ref.
+      const isScrollRestored = {
+        top: !(top > 0),
+        left: !(left > 0)
+      };
+      if (!isScrollRestored.left && columnsTotalWidth) {
+        scroller.scrollLeft = left;
+        ignoreNextScrollEvent.current = true;
+        isScrollRestored.left = true;
+      }
+
+      // For the sake of completeness, but I'm not sure if contentHeight is ever available at this point. Maybe when virtualisation is disabled?
+      if (!isScrollRestored.top && contentHeight) {
+        scroller.scrollTop = top;
+        ignoreNextScrollEvent.current = true;
+        isScrollRestored.top = true;
+      }
+
+      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise there's nowhere to scroll), but before paint to avoid reflows
+      if (!isScrollRestored.top || !isScrollRestored.left) {
+        const unsubscribeContentSizeChange = apiRef.current.subscribeEvent('virtualScrollerContentSizeChange', params => {
+          if (!isScrollRestored.left && params.columnsTotalWidth) {
+            scroller.scrollLeft = left;
+            ignoreNextScrollEvent.current = true;
+            isScrollRestored.left = true;
+          }
+          if (!isScrollRestored.top && params.contentHeight) {
+            scroller.scrollTop = top;
+            ignoreNextScrollEvent.current = true;
+            isScrollRestored.top = true;
+          }
+          if (isScrollRestored.left && isScrollRestored.top) {
+            unsubscribeContentSizeChange();
+          }
+        });
+        return unsubscribeContentSizeChange;
+      }
+    }
+    return undefined;
   });
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
@@ -474,7 +526,8 @@ export const useGridVirtualScroller = () => {
     }),
     getContentProps: () => ({
       style: contentSize,
-      role: 'presentation'
+      role: 'presentation',
+      ref: onContentSizeApplied
     }),
     getRenderZoneProps: () => ({
       role: 'rowgroup'

package/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -17,5 +17,5 @@ export declare const EMPTY_RENDER_CONTEXT: {
     lastColumnIndex: number;
 };
 export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
-export declare function useGridVirtualization(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export declare function useGridVirtualization(apiRef: React.RefObject<GridPrivateApiCommunity>, props: RootProps): void;
 export {};

package/hooks/utils/useGridApiContext.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../models/api/gridApiCommon';
 import { GridApiCommunity } from '../../models/api/gridApiCommunity';
-export declare function useGridApiContext<Api extends GridApiCommon = GridApiCommunity>(): React.MutableRefObject<Api>;
+export declare function useGridApiContext<Api extends GridApiCommon = GridApiCommunity>(): React.RefObject<Api>;

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -15,8 +15,8 @@ declare enum GridSignature {
 interface RegistryContainer {
     registry: CleanupTracking | null;
 }
-export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
+export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends GridEvents>(apiRef: React.RefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
 export declare const unstable_resetCleanupTracking: () => void;
-export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
-export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
+export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends GridEvents>(apiRef: React.RefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
+export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: React.RefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
 export { GridSignature };

package/hooks/utils/useGridApiEventHandler.js

@@ -24,7 +24,7 @@ export function createUseGridApiEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(null);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/hooks/utils/useGridApiMethod.d.ts

@@ -3,5 +3,5 @@ import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 type GetPublicApiType<PrivateApi> = PrivateApi extends {
     getPublicApi: () => infer PublicApi;
 } ? PublicApi : never;
-export declare function useGridApiMethod<PrivateApi extends GridPrivateApiCommon, PublicApi extends GetPublicApiType<PrivateApi>, PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>, V extends 'public' | 'private', T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>>(privateApiRef: React.MutableRefObject<PrivateApi>, apiMethods: T, visibility: V): void;
+export declare function useGridApiMethod<PrivateApi extends GridPrivateApiCommon, PublicApi extends GetPublicApiType<PrivateApi>, PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>, V extends 'public' | 'private', T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>>(privateApiRef: React.RefObject<PrivateApi>, apiMethods: T, visibility: V): void;
 export {};

package/hooks/utils/useGridApiRef.d.ts

@@ -4,4 +4,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.MutableRefObject<Api>;
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.RefObject<Api>;

package/hooks/utils/useGridInitializeState.d.ts

@@ -5,6 +5,6 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
-export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.MutableRefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
-export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.MutableRefObject<PrivateApi>, props: P) => void;
+export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.RefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.RefObject<PrivateApi>, props: P) => void;
 export {};

package/hooks/utils/useGridLogger.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Logger } from '../../models/logger';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare function useGridLogger<PrivateApi extends GridPrivateApiCommon>(privateApiRef: React.MutableRefObject<PrivateApi>, name: string): Logger;
+export declare function useGridLogger<PrivateApi extends GridPrivateApiCommon>(privateApiRef: React.RefObject<PrivateApi>, name: string): Logger;

package/hooks/utils/useGridNativeEventListener.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridNativeEventListener: <PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap>(apiRef: React.MutableRefObject<PrivateApi>, ref: React.MutableRefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: (event: HTMLElementEventMap[K]) => any, options?: AddEventListenerOptions) => void;
+export declare const useGridNativeEventListener: <PrivateApi extends GridPrivateApiCommon, K extends keyof HTMLElementEventMap>(apiRef: React.RefObject<PrivateApi>, ref: React.RefObject<HTMLDivElement | null> | (() => HTMLElement | undefined | null), eventName: K, handler?: (event: HTMLElementEventMap[K]) => any, options?: AddEventListenerOptions) => void;

package/hooks/utils/useGridPrivateApiContext.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { GridPrivateApiCommunity } from '../../models/api/gridApiCommunity';
 export declare const GridPrivateApiContext: React.Context<unknown>;
-export declare function useGridPrivateApiContext<PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(): React.MutableRefObject<PrivateApi>;
+export declare function useGridPrivateApiContext<PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(): React.RefObject<PrivateApi>;

package/hooks/utils/useGridSelector.d.ts

@@ -5,6 +5,6 @@ import type { OutputSelector, OutputSelectorV8 } from '../../utils/createSelecto
 type Selector<Api extends GridApiCommon, Args, T> = ((state: Api['state']) => T) | OutputSelectorV8<Api['state'], Args, T>;
 export declare const objectShallowCompare: typeof fastObjectShallowCompare;
 export declare const argsEqual: (prev: any, curr: any) => boolean;
-export declare const useGridSelector: <Api extends GridApiCommon, T>(apiRef: React.MutableRefObject<Api>, selector: ((state: Api["state"]) => T) | OutputSelector<Api["state"], T>, equals?: (a: T, b: T) => boolean) => T;
-export declare const useGridSelectorV8: <Api extends GridApiCommon, Args, T>(apiRef: React.MutableRefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: <U = T>(a: U, b: U) => boolean) => T;
+export declare const useGridSelector: <Api extends GridApiCommon, T>(apiRef: React.RefObject<Api>, selector: ((state: Api["state"]) => T) | OutputSelector<Api["state"], T>, equals?: (a: T, b: T) => boolean) => T;
+export declare const useGridSelectorV8: <Api extends GridApiCommon, Args, T>(apiRef: React.RefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: <U = T>(a: U, b: U) => boolean) => T;
 export {};

package/hooks/utils/useGridVisibleRows.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import type { GridApiCommon, GridRowEntry } from '../../models';
-export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
-    rows: GridRowEntry<import("../..").GridValidRowModel>[];
+import type { GridApiCommon } from '../../models';
+export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.RefObject<Api>, props?: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
+    rows: import("../..").GridRowEntry<import("../..").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;
     } | null;
+    rowToIndexMap: Map<import("../..").GridValidRowModel, number>;
 };
 /**
  * Computes the list of rows that are reachable by scroll.
@@ -15,10 +16,11 @@ export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.M
  * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
-export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
-    rows: GridRowEntry<import("../..").GridValidRowModel>[];
+export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.RefObject<Api>, props?: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
+    rows: import("../..").GridRowEntry<import("../..").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;
     } | null;
+    rowToIndexMap: Map<import("../..").GridValidRowModel, number>;
 };

package/hooks/utils/useGridVisibleRows.js

@@ -1,27 +1,7 @@
-import * as React from 'react';
-import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from "../features/pagination/gridPaginationSelector.js";
-import { gridExpandedSortedRowEntriesSelector } from "../features/filter/gridFilterSelector.js";
+import { gridVisibleRowsSelector } from "../features/pagination/gridPaginationSelector.js";
+import { useGridSelector } from "./index.js";
 export const getVisibleRows = (apiRef, props) => {
-  let rows;
-  let range;
-  if (props.pagination && props.paginationMode === 'client') {
-    range = gridPaginationRowRangeSelector(apiRef);
-    rows = gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef);
-  } else {
-    rows = gridExpandedSortedRowEntriesSelector(apiRef);
-    if (rows.length === 0) {
-      range = null;
-    } else {
-      range = {
-        firstRowIndex: 0,
-        lastRowIndex: rows.length - 1
-      };
-    }
-  }
-  return {
-    rows,
-    range
-  };
+  return gridVisibleRowsSelector(apiRef);
 };
 
 /**
@@ -31,10 +11,7 @@ export const getVisibleRows = (apiRef, props) => {
  * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
+
 export const useGridVisibleRows = (apiRef, props) => {
-  const response = getVisibleRows(apiRef, props);
-  return React.useMemo(() => ({
-    rows: response.rows,
-    range: response.range
-  }), [response.rows, response.range]);
+  return useGridSelector(apiRef, gridVisibleRowsSelector);
 };

package/index.js

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

package/internals/constants.d.ts

@@ -1,3 +1,9 @@
 export declare const GRID_TREE_DATA_GROUPING_FIELD = "__tree_data_group__";
 export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
 export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";
+export declare enum PinnedColumnPosition {
+    NONE = 0,
+    LEFT = 1,
+    RIGHT = 2,
+    VIRTUAL = 3
+}

package/internals/constants.js

@@ -1,3 +1,10 @@
 export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
 export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+export let PinnedColumnPosition = /*#__PURE__*/function (PinnedColumnPosition) {
+  PinnedColumnPosition[PinnedColumnPosition["NONE"] = 0] = "NONE";
+  PinnedColumnPosition[PinnedColumnPosition["LEFT"] = 1] = "LEFT";
+  PinnedColumnPosition[PinnedColumnPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedColumnPosition[PinnedColumnPosition["VIRTUAL"] = 3] = "VIRTUAL";
+  return PinnedColumnPosition;
+}({});

package/internals/index.d.ts

@@ -76,6 +76,7 @@ export type * from '../models/props/DataGridProps';
 export type * from '../models/gridDataSource';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
+export * from '../utils/rtlFlipSide';
 export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8, } from '../utils/createSelector';
 export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';

package/internals/index.js

@@ -61,6 +61,7 @@ export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibl
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 export { getColumnsToExport, defaultGetRowsToExport } from "../hooks/features/export/utils.js";
 export * from "../utils/createControllablePromise.js";
+export * from "../utils/rtlFlipSide.js";
 export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8 } from "../utils/createSelector.js";
 export { useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";