@mui/x-data-grid 7.25.0 → 7.26.0

package/hooks/features/sorting/gridSortingSelector.js

@@ -24,15 +24,16 @@ export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRow
       id,
       model
     });
-  }
-  const rowNode = rowTree[id];
-  if (rowNode && isAutogeneratedRowNode(rowNode)) {
-    acc.push({
-      id,
-      model: {
-        [GRID_ID_AUTOGENERATED]: id
-      }
-    });
+  } else {
+    const rowNode = rowTree[id];
+    if (rowNode && isAutogeneratedRowNode(rowNode)) {
+      acc.push({
+        id,
+        model: {
+          [GRID_ID_AUTOGENERATED]: id
+        }
+      });
+    }
   }
   return acc;
 }, []));

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

@@ -47,6 +47,12 @@ export declare const useGridVirtualScroller: () => {
             left: number;
         }>;
     };
+    getScrollAreaProps: () => {
+        scrollPosition: React.RefObject<{
+            top: number;
+            left: number;
+        }>;
+    };
 };
 export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;
 export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridColumnsRenderContext, pinnedLeftLength: number): number;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -6,15 +6,15 @@ import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
 import { useRtl } from '@mui/system/RtlProvider';
 import reactMajor from '@mui/x-internals/reactMajor';
+import { gridDimensionsSelector, gridColumnsTotalWidthSelector, gridContentHeightSelector, gridHasFillerSelector, gridRowHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 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 { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { useGridApiEventHandler } from "../../utils/index.js";
+import { useGridApiOptionHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
 import { clamp, range } from "../../../utils/utils.js";
 import { selectedIdsLookupSelector } from "../rowSelection/gridRowSelectionSelector.js";
@@ -57,8 +57,6 @@ export const useGridVirtualScroller = () => {
   const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef));
   const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const pinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
   const pinnedColumns = listView ? EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
@@ -71,10 +69,14 @@ export const useGridVirtualScroller = () => {
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const contentHeight = dimensions.contentSize.height;
-  const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
   const isRenderContextReady = React.useRef(false);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
+  const contentHeight = useGridSelector(apiRef, gridContentHeightSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const needsHorizontalScrollbar = useGridSelector(apiRef, needsHorizontalScrollbarSelector);
+  const verticalScrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
@@ -141,7 +143,7 @@ export const useGridVirtualScroller = () => {
   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 scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
@@ -156,19 +158,21 @@ export const useGridVirtualScroller = () => {
     });
 
     // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // So we wait until we have valid dimensions before publishing the first event.
-    if (dimensions.isReady && didRowsIntervalChange) {
+    // but only does something if we already have a render context, because
+    // otherwise we would call an update directly on mount
+    const isReady = gridDimensionsSelector(apiRef.current.state).isReady;
+    if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
     previousContextScrollPosition.current = scrollPosition.current;
-  }, [apiRef, dimensions.isReady]);
+  }, [apiRef]);
   const triggerUpdateRenderContext = useEventCallback(() => {
     const scroller = scrollerRef.current;
     if (!scroller) {
       return undefined;
     }
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
     const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
 
@@ -188,7 +192,7 @@ export const useGridVirtualScroller = () => {
     const columnScroll = Math.abs(scrollPosition.current.left - previousContextScrollPosition.current.left);
 
     // PERF: use the computed minimum column width instead of a static one
-    const didCrossThreshold = rowScroll >= dimensions.rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
+    const didCrossThreshold = rowScroll >= rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
     const didChangeDirection = scrollCache.direction !== direction;
     const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
@@ -210,7 +214,7 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -222,6 +226,10 @@ export const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!gridDimensionsSelector(apiRef.current.state).isReady && (enabledForRows || enabledForColumns)) {
+      return;
+    }
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
     // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
@@ -250,7 +258,12 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const baseRenderContext = params.renderContext ?? renderContext;
+    let baseRenderContext = renderContext;
+    if (params.renderContext) {
+      baseRenderContext = params.renderContext;
+      baseRenderContext.firstColumnIndex = renderContext.firstColumnIndex;
+      baseRenderContext.lastColumnIndex = renderContext.lastColumnIndex;
+    }
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -344,7 +357,7 @@ export const useGridVirtualScroller = () => {
         }
       }
       let currentRenderContext = baseRenderContext;
-      if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
+      if (frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
       const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
@@ -359,7 +372,7 @@ export const useGridVirtualScroller = () => {
         index: rowIndex,
         selected: isSelected,
         offsetLeft: offsetLeft,
-        columnsTotalWidth: dimensions.columnsTotalWidth,
+        columnsTotalWidth: columnsTotalWidth,
         rowHeight: baseRowHeight,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
@@ -370,8 +383,8 @@ export const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isVirtualFocusRow,
         showBottomBorder: showBottomBorder,
-        scrollbarWidth: dimensions.hasScrollY ? dimensions.scrollbarSize : 0,
-        gridHasFiller: dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width
+        scrollbarWidth: verticalScrollbarWidth,
+        gridHasFiller: gridHasFiller
       }, rowProps), id));
       if (isVirtualFocusRow) {
         return;
@@ -388,7 +401,6 @@ export const useGridVirtualScroller = () => {
     });
     return rows;
   };
-  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth > outerSize.width;
   const scrollerStyle = React.useMemo(() => ({
     overflowX: !needsHorizontalScrollbar || listView ? 'hidden' : undefined,
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
@@ -424,14 +436,11 @@ export const useGridVirtualScroller = () => {
       scrollerRef.current.scrollLeft = 0;
     }
   }, [listView, scrollerRef]);
-  useRunOnce(outerSize.width !== 0, () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
-    const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-    updateRenderContext(initialRenderContext);
+  useRunOnce(renderContext !== EMPTY_RENDER_CONTEXT, () => {
     apiRef.current.publishEvent('scrollPositionChange', {
       top: scrollPosition.current.top,
       left: scrollPosition.current.left,
-      renderContext: initialRenderContext
+      renderContext
     });
     isRenderContextReady.current = true;
     if (rootProps.initialState?.scroll && scrollerRef.current) {
@@ -484,9 +493,9 @@ export const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  useGridApiEventHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -522,9 +531,16 @@ export const useGridVirtualScroller = () => {
       ref: scrollbarHorizontalRef,
       role: 'presentation',
       scrollPosition
+    }),
+    getScrollAreaProps: () => ({
+      scrollPosition
     })
   };
 };
+// dimension selectors
+function needsHorizontalScrollbarSelector(state) {
+  return state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width;
+}
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);

package/hooks/utils/useGridSelector.d.ts

@@ -5,6 +5,13 @@ 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;
+type Refs<T> = {
+    state: T;
+    equals: <U = T>(a: U, b: U) => boolean;
+    selector: Selector<any, any, T>;
+    args: any;
+    subscription: undefined | (() => void);
+};
 export declare const useGridSelector: <Api extends GridApiCommon, T>(apiRef: 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: RefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: <U = T>(a: U, b: U) => boolean) => T;
+export declare const useGridSelectorV8: <Api extends GridApiCommon, Args, T>(apiRef: RefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: Refs<T>["equals"]) => T;
 export {};

package/hooks/utils/useGridSelector.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useLazyRef } from "./useLazyRef.js";
-import { useOnMount } from "./useOnMount.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
@@ -42,8 +42,10 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: null
+  args: undefined
 });
+const EMPTY = [];
+const emptyGetSnapshot = () => null;
 
 // TODO v8: Remove this function
 export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
@@ -60,15 +62,31 @@ export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = 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 null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };
 
@@ -96,14 +114,30 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
       setState(newState);
     }
   }
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
       const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };

package/hooks/utils/useIsSSR.d.ts

@@ -0,0 +1 @@
+export declare const useIsSSR: () => boolean;

package/hooks/utils/useIsSSR.js

@@ -0,0 +1,5 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+const emptySubscribe = () => () => {};
+const clientSnapshot = () => false;
+const serverSnapshot = () => true;
+export const useIsSSR = () => useSyncExternalStore(emptySubscribe, clientSnapshot, serverSnapshot);

package/index.js

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

package/internals/index.d.ts

@@ -30,6 +30,7 @@ export { useGridDensity, densityStateInitializer } from '../hooks/features/densi
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
+export { defaultGridFilterLookup } from '../hooks/features/filter/gridFilterState';
 export { passFilterLogic } from '../hooks/features/filter/gridFilterUtils';
 export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, } from '../hooks/features/filter/gridFilterSelector';
 export { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
@@ -52,7 +53,6 @@ export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from '../hooks/features/rows/gridRowsUtils';
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, } from '../hooks/features/rows/gridRowsSelector';
 export { headerFilteringStateInitializer, useGridHeaderFiltering, } from '../hooks/features/headerFiltering/useGridHeaderFiltering';
-export { calculatePinnedRowsHeight } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowSelection, rowSelectionStateInitializer, } from '../hooks/features/rowSelection/useGridRowSelection';
 export { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
 export { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
@@ -61,6 +61,7 @@ export { gridSortedRowIndexLookupSelector } from '../hooks/features/sorting/grid
 export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { dimensionsStateInitializer, useGridDimensions, } from '../hooks/features/dimensions/useGridDimensions';
+export * from '../hooks/features/dimensions/gridDimensionsSelectors';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export type { GridRestoreStatePreProcessingContext } from '../hooks/features/statePersistence/gridStatePersistenceInterface';
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS, } from '../hooks/features/virtualization/useGridVirtualScroller';

package/internals/index.js

@@ -22,6 +22,7 @@ export { useGridDensity, densityStateInitializer } from "../hooks/features/densi
 export { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.js";
 export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.js";
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
+export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
 export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
@@ -42,7 +43,6 @@ export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
 export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from "../hooks/features/rows/gridRowsUtils.js";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
-export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
@@ -50,6 +50,7 @@ export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/grid
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
+export * from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 export { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export * from "../hooks/features/virtualization/index.js";

package/models/api/gridStateApi.d.ts

@@ -8,6 +8,7 @@ export interface GridStateApi<State extends GridStateCommunity> {
     state: State;
     /**
      * Forces the grid to rerender. It's often used after a state update.
+     * @deprecated no longer needed.
      */
     forceUpdate: () => void;
     /**

package/models/events/gridEventLookup.d.ts

@@ -401,6 +401,12 @@ export interface GridControlledStateReasonLookup {
     pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
 }
 export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
+    /**
+     * Fired when rootElementRef.current becomes available.
+     */
+    rootMount: {
+        params: HTMLElement;
+    };
     /**
      * Fired when the grid is unmounted.
      */

package/modern/DataGrid/useDataGridComponent.js

@@ -41,7 +41,6 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
@@ -54,10 +53,11 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/modern/components/GridRow.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
@@ -78,7 +80,10 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const isRowReorderingEnabled = useGridSelectorV8(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = useGridSelectorV8(apiRef, gridRowIsEditingSelector, rowId);
+  const editing = useGridSelectorV8(apiRef, gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
   const editable = rootProps.editMode === GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -296,7 +301,8 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: clsx(gridClasses.cell, gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
-      pinnedRight: pinnedColumns.right.length > 0
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });

package/modern/components/GridScrollArea.js

@@ -8,12 +8,12 @@ import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
-import { useGridSelector } from "../hooks/utils/useGridSelector.js";
-import { gridDimensionsSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { useGridSelector, useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
+import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
-import { gridColumnsTotalWidthSelector } from "../hooks/features/columns/gridColumnsSelector.js";
 import { useTimeout } from "../hooks/utils/useTimeout.js";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
+import { createSelectorV8 } from "../utils/createSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -48,21 +48,38 @@ const GridScrollAreaRawRoot = styled('div', {
     right: 0
   }
 }));
-function GridScrollAreaRaw(props) {
+const offsetSelector = createSelectorV8(gridDimensionsSelector, (dimensions, direction) => {
+  if (direction === 'left') {
+    return dimensions.leftPinnedWidth;
+  }
+  if (direction === 'right') {
+    return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  }
+  return 0;
+});
+function GridScrollAreaWrapper(props) {
+  const apiRef = useGridApiContext();
+  const [dragging, setDragging] = React.useState(false);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
+  if (!dragging) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props));
+}
+function GridScrollAreaContent(props) {
   const {
-    scrollDirection
+    scrollDirection,
+    scrollPosition
   } = props;
   const rootRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const timeout = useTimeout();
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const scrollPosition = React.useRef({
-    left: 0,
-    top: 0
-  });
+  const sideOffset = useGridSelectorV8(apiRef, offsetSelector, scrollDirection);
   const getCanScrollMore = () => {
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     if (scrollDirection === 'left') {
       // Only render if the user has not reached yet the start of the list
       return scrollPosition.current.left > 0;
@@ -74,7 +91,6 @@ function GridScrollAreaRaw(props) {
     }
     return false;
   };
-  const [dragging, setDragging] = React.useState(false);
   const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
   const rootProps = useGridRootProps();
   const ownerState = _extends({}, rootProps, {
@@ -88,12 +104,11 @@ function GridScrollAreaRaw(props) {
     top: totalHeaderHeight - headerHeight
   };
   if (scrollDirection === 'left') {
-    style.left = dimensions.leftPinnedWidth;
+    style.left = sideOffset;
   } else if (scrollDirection === 'right') {
-    style.right = dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+    style.right = sideOffset;
   }
-  const handleScrolling = newScrollPosition => {
-    scrollPosition.current = newScrollPosition;
+  const handleScrolling = () => {
     setCanScrollMore(getCanScrollMore);
   };
   const handleDragOver = useEventCallback(event => {
@@ -118,16 +133,8 @@ function GridScrollAreaRaw(props) {
       });
     });
   });
-  const handleColumnHeaderDragStart = useEventCallback(() => {
-    setDragging(true);
-  });
-  const handleColumnHeaderDragEnd = useEventCallback(() => {
-    setDragging(false);
-  });
   useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
-  if (!dragging || !canScrollMore) {
+  if (!canScrollMore) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
@@ -138,4 +145,4 @@ function GridScrollAreaRaw(props) {
     style: style
   });
 }
-export const GridScrollArea = fastMemo(GridScrollAreaRaw);
+export const GridScrollArea = fastMemo(GridScrollAreaWrapper);

package/modern/components/GridSkeletonLoadingOverlay.js

@@ -8,8 +8,9 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
 import { PinnedColumnPosition } from "../internals/constants.js";
+import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";