[core] Drop useGridContainerProps

docs/src/pages/components/data-grid/events/events.json

@@ -147,5 +147,9 @@
     "name": "stateChange",
     "description": "Fired when the state of the grid is updated. Called with a GridState object."
   },
-  { "name": "unmount", "description": "Fired when the grid is unmounted." }
+  { "name": "unmount", "description": "Fired when the grid is unmounted." },
+  {
+    "name": "viewportInnerSizeChange",
+    "description": "Fired when the inner size of the viewport changes. Called with an ElementSize object."
+  }
 ]

packages/grid/_modules_/grid/components/GridRow.tsx

@@ -13,7 +13,6 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../GridComponentProps';
 import { GridStateColDef } from '../models/colDef/gridColDef';
 import { GridCellIdentifier } from '../hooks/features/focus/gridFocusState';
-import { GridScrollBarState } from '../models/gridContainerProps';
 import { gridColumnsMetaSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 
@@ -31,7 +30,6 @@ export interface GridRowProps {
   cellFocus: GridCellIdentifier | null;
   cellTabIndex: GridCellIdentifier | null;
   editRowsState: GridEditRowsModel;
-  scrollBarState: GridScrollBarState;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
 }
@@ -79,7 +77,6 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
     cellFocus,
     cellTabIndex,
     editRowsState,
-    scrollBarState, // to be removed
     onClick,
     onDoubleClick,
     ...other
@@ -88,6 +85,10 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const columnsMeta = useGridSelector(apiRef, gridColumnsMetaSelector);
+  const { hasScrollX, hasScrollY } = apiRef.current.getRootDimensions() ?? {
+    hasScrollX: false,
+    hasScrollY: false,
+  };
 
   const ownerState = {
     selected,
@@ -141,8 +142,7 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
     const indexRelativeToAllColumns = firstColumnToRender + i;
 
     const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    const removeLastBorderRight =
-      isLastColumn && scrollBarState.hasScrollX && !scrollBarState.hasScrollY;
+    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
     const showRightBorder = !isLastColumn
       ? rootProps.showCellRightBorder
       : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
@@ -256,7 +256,6 @@ GridRow.propTypes = {
   row: PropTypes.object.isRequired,
   rowHeight: PropTypes.number.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  scrollBarState: PropTypes.object.isRequired,
   selected: PropTypes.bool.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
 } as any;

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -30,8 +30,6 @@ interface GridColumnHeaderItemProps {
   sortIndex?: number;
   filterItemsCounter?: number;
   hasFocus?: boolean;
-  hasScrollX: boolean;
-  hasScrollY: boolean;
   tabIndex: 0 | -1;
 }
 
@@ -79,8 +77,6 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     filterItemsCounter,
     hasFocus,
     tabIndex,
-    hasScrollX,
-    hasScrollY,
     extendRowFullWidth,
   } = props;
   const apiRef = useGridApiContext();
@@ -89,6 +85,10 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   const columnMenuId = useId();
   const columnMenuButtonId = useId();
   const iconButtonRef = React.useRef<HTMLButtonElement>(null);
+  const { hasScrollX, hasScrollY } = apiRef.current.getRootDimensions() ?? {
+    hasScrollX: false,
+    hasScrollY: false,
+  };
 
   let headerComponent: React.ReactNode = null;
   if (column.renderHeader) {
@@ -250,8 +250,6 @@ GridColumnHeaderItem.propTypes = {
   extendRowFullWidth: PropTypes.bool.isRequired,
   filterItemsCounter: PropTypes.number,
   hasFocus: PropTypes.bool,
-  hasScrollX: PropTypes.bool.isRequired,
-  hasScrollY: PropTypes.bool.isRequired,
   headerHeight: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
   isLastColumn: PropTypes.bool.isRequired,

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeadersInner.tsx

@@ -5,8 +5,6 @@ import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { unstable_gridScrollBarSizeSelector } from '../../hooks/features/container/gridContainerSizesSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridClasses } from '../..';
 
@@ -57,11 +55,10 @@ export const GridColumnHeadersInner = React.forwardRef<HTMLDivElement, GridColum
     const { isDragging, className, ...other } = props;
     const apiRef = useGridApiContext();
     const rootProps = useGridRootProps();
-    const scrollBarState = useGridSelector(apiRef, unstable_gridScrollBarSizeSelector);
 
     const ownerState = {
       isDragging,
-      hasScrollX: scrollBarState.hasScrollX,
+      hasScrollX: apiRef.current.getRootDimensions()?.hasScrollX ?? false,
       classes: rootProps.classes,
     };
     const classes = useUtilityClasses(ownerState);

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -7,6 +7,10 @@ export enum GridEvents {
    * Fired when the grid is resized with a debounced time of 60ms. Called with a [[ElementSize]] object.
    */
   debouncedResize = 'debouncedResize',
+  /**
+   * Fired when the inner size of the viewport changes. Called with an [[ElementSize]] object.
+   */
+  viewportInnerSizeChange = 'viewportInnerSizeChange',
   /**
    * Fired when an exception is thrown in the grid.
    */

packages/grid/_modules_/grid/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -6,7 +6,6 @@ import {
   visibleGridColumnsSelector,
   gridColumnsMetaSelector,
 } from '../columns/gridColumnsSelector';
-import { unstable_gridScrollBarSizeSelector } from '../container/gridContainerSizesSelector';
 import {
   gridTabIndexColumnHeaderSelector,
   gridTabIndexCellSelector,
@@ -36,7 +35,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   const apiRef = useGridApiContext();
   const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector);
   const columnsMeta = useGridSelector(apiRef, gridColumnsMetaSelector);
-  const scrollBarState = useGridSelector(apiRef, unstable_gridScrollBarSizeSelector);
   const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
   const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
   const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
@@ -173,8 +171,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           isResizing={resizeCol === column.field}
           isLastColumn={columnIndex === columns.length - 1}
           extendRowFullWidth={!rootProps.disableExtendRowFullWidth}
-          hasScrollX={scrollBarState.hasScrollX}
-          hasScrollY={scrollBarState.hasScrollY}
           hasFocus={hasFocus}
           tabIndex={tabIndex}
         />,

packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts

@@ -115,9 +115,8 @@ const upsertColumnsState = (columnUpdates: GridColDef[], prevColumnsState?: Grid
 /**
  * @requires useGridColumnsPreProcessing (method)
  * @requires useGridParamsApi (method)
- * @requires useGridContainerProps (state)
+ * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
- * TODO: Impossible priority - useGridContainerProps also needs to be after useGridColumns
  */
 export function useGridColumns(
   apiRef: GridApiRef,
@@ -153,11 +152,6 @@ export function useGridColumns(
   });
   const [, setGridState, forceUpdate] = useGridState(apiRef);
 
-  // On the first render, `useGridContainerProps` has not yet initialized its state because it is called after `useGridColumns`
-  // But it viewport width would always be 0 on the 1st render since the DOM Node is not mounted yet, so we can provide a safe fallback here
-  // TODO: Fix when removing `viewportSizes` from the state
-  const viewportSizes = apiRef.current.state.viewportSizes?.width ?? 0;
-
   const setGridColumnsState = React.useCallback(
     (columnsState: GridColumnsState, emit = true) => {
       logger.debug('Updating columns state.');
@@ -211,12 +205,11 @@ export function useGridColumns(
 
   const setColumnsState = React.useCallback(
     (newState: RawGridColumnsState, emit?: boolean) => {
+      const dimensions = apiRef.current.getRootDimensions();
       logger.debug('updating GridColumns with new state');
 
-      // Avoid dependency on gridState to avoid infinite loop
-      const viewportWidth = apiRef.current.state.viewportSizes.width;
       let newColumns: GridColumns = newState.all.map((field) => newState.lookup[field]);
-      newColumns = hydrateColumnsWidth(newColumns, viewportWidth);
+      newColumns = hydrateColumnsWidth(newColumns, dimensions?.viewportInnerSize.width ?? 0);
 
       const columnState: GridColumnsState = {
         all: newColumns.map((col) => col.field),
@@ -341,19 +334,6 @@ export function useGridColumns(
     setColumnsState(columnState);
   }, [logger, apiRef, setColumnsState, props.columns, props.columnTypes]);
 
-  React.useEffect(() => {
-    logger.debug(`GridColumns gridState.viewportSizes.width, changed ${viewportSizes}`);
-
-    // This hook is meant to update the column's width when the viewport changes
-    // We can skip the whole block if the width is missing
-    if (viewportSizes === 0) {
-      return;
-    }
-
-    // Avoid dependency on gridState as I only want to update cols when viewport size changed.
-    setColumnsState(apiRef.current.state.columns);
-  }, [apiRef, setColumnsState, viewportSizes, logger]);
-
   const handlePreProcessorRegister = React.useCallback(
     (name) => {
       if (name !== GridPreProcessingGroup.hydrateColumns) {
@@ -373,7 +353,16 @@ export function useGridColumns(
     [apiRef, logger, setColumnsState, props.columns, props.columnTypes],
   );
 
+  const prevInnerWidth = React.useRef<number | null>(null);
+  const handleGridSizeChange = (viewportInnerSize) => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setColumnsState(apiRef.current.state.columns);
+    }
+  };
+
   useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
 
   // Grid Option Handlers
   useGridApiOptionHandler(