[core] Drop useGridContainerProps

[flaviendelangle]

Rebased upon #3074

Closes #1775

Changes

• New method apiRef.current.getRootDimensions to get the current dimensions of the grid. Returns the following object

export interface GridDimensions {
  viewportOuterSize: ElementSize;
  viewportInnerSize: ElementSize;
  hasScrollX: boolean;
  hasScrollY: boolean;
}

• New event viewportInnerSizeChange to re-compute the column flex widths and the autoPageSize

• New method unstable_getViewportPageSize

• Remove state.containerSizes, state.viewportSizes and state.scrollBar

Render count

I counted the amount of rerenders in GridBody when mounting a DataGrid without any further interaction.
Those renders can be synchronous and do not mean that React is actually committing anything to the DOM.

Async data fetching

const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
});

return (
    <div style={{ height: 400, width: '100%' }}>
        <DataGrid {...data} autoPageSize />
    </div>
);

Before: 12 renders
After: 5 renders

Sync data fetching with props.autoPageSize

const data = React.useMemo(() => getData(10, 10), [])

return (
    <div style={{ height: 400, width: '100%' }}>
        <DataGrid {...data} autoPageSize />
    </div>
);

Before: 7 renders
After: 2 renders

Sync data fetching without props.autoPageSize

const data = React.useMemo(() => getData(10, 10), [])

return (
    <div style={{ height: 400, width: '100%' }}>
        <DataGrid {...data} />
    </div>
);

Before: 7 renders
After: 2 renders

Why add this logic in useGridDimensions (ex useGridResizeContainer)

If we put this logic in GridVirtualScroller, then during the 1st render of the Rows and the Header, we don't have the dimensions yet. Which cuases flickering on the borders.

[flaviendelangle]

I even removed virtualScrollerRowCount which was just passing a variable from useCurrentPageRows
We now only have the inner and outer dimensions

export interface GridDimensions {
  viewportOuterSize: ElementSize;
  viewportInnerSize: ElementSize;
  hasScrollX: boolean;
  hasScrollY: boolean;
}

[m4theushw]

Why this change?

[flaviendelangle]

Otherwise, in the e2e test you fake the timers so you never apply the setTimeout of debouncedResize and the dimensions ref is never set.

[flaviendelangle]

To give more context:
In useGridDimensions (and before in useGridContainerResize) we have the following logic:

const isTestEnvironment = process.env.NODE_ENV === 'test';

[...]

if (isTestEnvironment) {
  // We don't need to debounce the resize for tests.
  resize();
  return;
}

debounceResize();

Which solves allow to test post-resize result synchronously in all tests except the e2e / regressions
In e2e tests we have no test impacted to my knowledge.
In regressions it causes issues because we never set the dimensions ref and therefore never triggers behavior like the autoPageSize.

I spent a few hours trying to fix this. I can't get Webpack to use NODE_ENV === "test" because it wants to have its mode equal to the NODE_ENV and it only has development and production modes.
So I just removed the mock of the timer, I am now only mocking the initial time to have reliable snapshots but not how the time evolve.

[m4theushw]

I spent a few hours trying to fix this. I can't get Webpack to use NODE_ENV === "test" because it wants to have its mode equal to the NODE_ENV and it only has development and production modes.

It may be an useless question, but did you try webpack.DefinePlugin?

[flaviendelangle]

Yes
If you put process.env.NODE_ENV: "test" it complains that the NODE_ENV should always be equal to the mode

[m4theushw]

Actually I don't wanna approve yet. There're a few regressions pointed by argos.

The lighter horizontal scrollbar means that the overlay is on top of it. This means that users are trapped and can't scroll to the right. The vertical alignment of the text is also wrong.

From what I found, horizontalScrollbarSize begins as 0 and is never updated once the value is available.

https://github.com/mui-org/material-ui-x/blob/2409df34aa924b4dd0d2ef80d59f2812974a1171/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx#L56

I believe fixing this also fixes the inconsistency in the infinite loading demo.

There still is 2 Argos changes but I think those are normal. I fixed the overlay position.

[flaviendelangle]

Replaced by GridDimensionsApi

[flaviendelangle]

This state has been removed

[flaviendelangle]

This state has been removed

[flaviendelangle]

This state has been removed