@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.10

package/modern/hooks/features/virtualization/gridFocusedVirtualCellSelector.js

@@ -0,0 +1,33 @@
+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";
+const gridIsFocusedCellOutOfContext = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, (focusedCell, renderContext, currentPage, visibleColumns) => {
+  if (!focusedCell) {
+    return false;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  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(gridIsFocusedCellOutOfContext, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, focusedCell) => {
+  if (!isFocusedCellOutOfRenderContext) {
+    return null;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  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/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -4,8 +4,8 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
-import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useRtl } from '@mui/system/RtlProvider';
+import reactMajor from '@mui/x-internals/reactMajor';
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.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,10 @@ 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 { EMPTY_PINNED_COLUMN_FIELDS } from "../columns/index.js";
+import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
+import { isJSDOM } from "../../../utils/isJSDOM.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -45,14 +48,6 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-let isJSDOM = false;
-try {
-  if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom/.test(window.navigator.userAgent);
-  }
-} catch (_) {
-  /* ignore */
-}
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -65,20 +60,13 @@ export const useGridVirtualScroller = () => {
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedColumns = listView ? {
-    left: [],
-    right: []
-  } : pinnedColumnDefinitions;
+  const pinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+  const pinnedColumns = listView ? EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
   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 currentPage = useGridVisibleRows(apiRef);
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
@@ -86,7 +74,49 @@ export const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
-  useResizeObserver(mainRef, () => apiRef.current.resize());
+  const isRenderContextReady = React.useRef(false);
+  const previousSize = React.useRef(null);
+  const mainRefCallback = React.useCallback(node => {
+    mainRef.current = node;
+    if (!node) {
+      return undefined;
+    }
+    const initialRect = node.getBoundingClientRect();
+    let lastSize = {
+      width: roundToDecimalPlaces(initialRect.width, 1),
+      height: roundToDecimalPlaces(initialRect.height, 1)
+    };
+    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;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const newSize = {
+        width: roundToDecimalPlaces(entry.contentRect.width, 1),
+        height: roundToDecimalPlaces(entry.contentRect.height, 1)
+      };
+      if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
+        return;
+      }
+      apiRef.current.publishEvent('resize', newSize);
+      lastSize = newSize;
+    });
+    observer.observe(node);
+    if (reactMajor >= 19) {
+      return () => {
+        mainRef.current = null;
+        observer.disconnect();
+      };
+    }
+    return undefined;
+  }, [apiRef, mainRef]);
 
   /*
    * Scroll context logic
@@ -103,17 +133,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;
@@ -137,9 +165,17 @@ export const useGridVirtualScroller = () => {
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef, dimensions.isReady]);
   const triggerUpdateRenderContext = useEventCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) {
+      return undefined;
+    }
+    const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
+    const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
+
+    // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
-      top: scrollerRef.current.scrollTop,
-      left: scrollerRef.current.scrollLeft
+      top: clamp(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? clamp(scroller.scrollLeft, -maxScrollLeft, 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -192,30 +228,15 @@ export const useGridVirtualScroller = () => {
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
   };
-  const handleScroll = useEventCallback(event => {
-    const {
-      scrollTop,
-      scrollLeft
-    } = event.currentTarget;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
+  const handleScroll = useEventCallback(() => {
+    if (ignoreNextScrollEvent.current) {
+      ignoreNextScrollEvent.current = false;
       return;
     }
-    if (!isRtl) {
-      if (scrollLeft < 0) {
-        return;
-      }
-    }
-    if (isRtl) {
-      if (scrollLeft > 0) {
-        return;
-      }
-    }
     const nextRenderContext = triggerUpdateRenderContext();
     apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollTop,
-      left: scrollLeft,
+      top: scrollPosition.current.top,
+      left: scrollPosition.current.left,
       renderContext: nextRenderContext
     });
   });
@@ -251,14 +272,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 = [];
@@ -298,7 +319,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) {
@@ -323,39 +343,37 @@ 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,
         index: rowIndex,
         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);
@@ -386,22 +404,21 @@ export const useGridVirtualScroller = () => {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
-  React.useEffect(() => {
-    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [apiRef, contentSize]);
-  useEnhancedEffect(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
-  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;
@@ -416,6 +433,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
@@ -428,7 +492,7 @@ export const useGridVirtualScroller = () => {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef
+      ref: mainRefCallback
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
@@ -443,18 +507,21 @@ export const useGridVirtualScroller = () => {
     }),
     getContentProps: () => ({
       style: contentSize,
-      role: 'presentation'
+      role: 'presentation',
+      ref: onContentSizeApplied
     }),
     getRenderZoneProps: () => ({
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     })
   };
 };
@@ -485,7 +552,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false
+    listView: rootProps.unstable_listView ?? false,
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -495,6 +563,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return _extends({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -533,11 +606,13 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
       positions: inputs.rowsMeta.positions,
       lastSize: inputs.lastRowHeight
     });
-    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-      const row = inputs.rows[i];
-      hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+    if (!inputs.virtualizeColumnsWithAutoRowHeight) {
+      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+        const row = inputs.rows[i];
+        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+      }
     }
-    if (!hasRowWithAutoHeight) {
+    if (!hasRowWithAutoHeight || inputs.virtualizeColumnsWithAutoRowHeight) {
       firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
         atStart: true,
         lastPosition: inputs.columnsTotalWidth

package/modern/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/modern/hooks/utils/useGridApiRef.js

@@ -2,4 +2,4 @@ import * as React from 'react';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export const useGridApiRef = () => React.useRef({});
+export const useGridApiRef = () => React.useRef(null);

package/modern/hooks/utils/useGridSelector.js

@@ -6,20 +6,11 @@ import { useOnMount } from "./useOnMount.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
-// TODO v8: Remove this function
-function applySelector(apiRef, selector) {
-  if (isOutputSelector(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
-}
-
-// TODO v8: Rename this function to `applySelector`
-function applySelectorV8(apiRef, selector, args, instanceId) {
+function applySelector(apiRef, selector, args, instanceId) {
   if (isOutputSelector(selector)) {
     return selector(apiRef, args);
   }
-  return selector(apiRef.current.state, instanceId);
+  return selector(apiRef.current.state, args, instanceId);
 }
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
@@ -44,36 +35,7 @@ const createRefs = () => ({
   selector: null,
   args: null
 });
-
-// TODO v8: Remove this function
-export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
-    }
-  }
-  const refs = useLazyRef(createRefs);
-  const didInit = refs.current.selector !== null;
-  const [state, setState] = React.useState(
-  // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelector(apiRef, selector));
-  refs.current.state = state;
-  refs.current.equals = equals;
-  refs.current.selector = selector;
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(apiRef, refs.current.selector);
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
-      }
-    });
-  });
-  return state;
-};
-
-// TODO v8: Rename this function to `useGridSelector`
-export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+export const useGridSelector = (apiRef, selector, args = undefined, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
       warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -83,14 +45,14 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   const didInit = refs.current.selector !== null;
   const [state, setState] = React.useState(
   // We don't use an initialization function to avoid allocations
-  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId));
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
   refs.current.args = args;
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
     if (!refs.current.equals(refs.current.state, newState)) {
       refs.current.state = newState;
       setState(newState);
@@ -98,7 +60,7 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   }
   useOnMount(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+      const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/modern/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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.1
+ * @mui/x-data-grid v8.0.0-alpha.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/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;
+}({});