Repository: material-ui
Issue: Add ResizeObserver abstraction
Labels: new feature,waiting for 👍

- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Summary 💡

Make it easier to react to changes from an element's position.

## Examples 🌈

```jsx
import { useResizeObserver } from '@material-ui/core';

const [rect, ref] = useResizeObserver();

return (
  <div ref={ref}>
    {JSON.stringify(rect)}
  </div>
);
```

## Motivation 🔦

The platform has a built-in module to observe any changes to `element.getBoundingClientRect()`: the [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) API.
Over the history of the project, we have seen a couple of issues that we can solve with it:

- #9337: correctly position the tab indicator. The interesting part of this issue is how many duplicate issues it has: A LOT. There is also a relatively simple workaround (but requires time and attention from the developers): a ref with an imperative update() method to reposition.
- #22303: notify popper.js to update the position when the size of the referred element changes.
- https://github.com/mui-org/material-ui/pull/14084#issuecomment-462192106: we could use it to implement auto collapsing breadcrumbs.
- #23641: sync the height of the textarea when the width changes.
- DataGrid: replace the [`createDetectElementResize()`](https://github.com/mui-org/material-ui-x/blob/4447b4471d6aa60fcbc2d984f5cdfb040f722b44/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js) module.
- #27439 : already uses the ResizeObserver API to re-compute the height of the content of `MasonryItem` whenever the content's rect height changes.

So far, we didn't move forward in this direction because of the [limited support of the platform](https://caniuse.com/#feat=resizeobserver). However, the timing is probably good now: https://twitter.com/addyosmani/status/1248899086490558465. For our components, we could make the hook nop if the API isn't available (consider it a progressive enhancement) and in the documentation of the hook suggest a polyfill like https://github.com/que-etc/resize-observer-polyfill  compatibility with older browsers is required.

## Browser support

We support [browsers](https://next.material-ui.com/getting-started/supported-platforms/#browser) that aren't supported by [this API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). We could provide this as a progressive enhancement. 
In the data grid, we use [createDetectElementResize](https://github.com/mui-org/material-ui-x/blob/4447b4471d6aa60fcbc2d984f5cdfb040f722b44/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js) to work around the issue but it requires a DOM node, it can be a "heavy" solution. I think that it's simpler to go down the "progressive enhancement" direction.

## Benchmark

- https://blueprintjs.com/docs/#core/components/resize-sensor
- https://github.com/souporserious/react-measure
- https://react-restart.github.io/hooks/api/useResizeObserver
- https://reach.tech/rect/
- https://elastic.github.io/eui/#/utilities/resize-observer
- https://github.com/wellyshen/react-cool-dimensions
- https://github.com/envato/react-breakpoints
- https://github.com/ctrlplusb/react-sizeme