feat(utils): created a new useResizeObserver implementation

Note: This is fully backwards compatible but the old API will be removed
in the next major version bump.

The new `useResizeObserver` implementation provides a `ref` and a
`refHandler` where the `refHandler` should be passed to the DOM node
that is being watched. The `target` API is kind of deprecated since it
does some weird things and doesn't help with the resize observer loop
behavior.

When using the new API, the event handlers will now use a "subscription"
model where only a single `ResizeObserver` is created instead of multiple
since it helps increase performance.

Author: mlaursen

packages/documentation/src/components/Demos/Utils/ResizeObserverExample.tsx

@@ -8,7 +8,7 @@ import React, {
 } from "react";
 import { Button } from "@react-md/button";
 import {
-  ObservedResizeEventHandler,
+  OnResizeObserverChange,
   ResizeObserver,
   useToggle,
 } from "@react-md/utils";
@@ -23,7 +23,7 @@ const DEFAULT_WIDTH = 150;
 interface Size {
   height: number;
   width: number;
-  onResize: ObservedResizeEventHandler;
+  onResize: OnResizeObserverChange;
 }
 
 /**
@@ -36,7 +36,7 @@ function useSize(): Size {
     width: DEFAULT_WIDTH,
   });
 
-  const onResize: ObservedResizeEventHandler = (event) => {
+  const onResize: OnResizeObserverChange = (event) => {
     const { height, width } = event;
     setSize({ height, width });
   };

packages/utils/src/layout/GridList.tsx

@@ -11,7 +11,7 @@ import cn from "classnames";
 
 import applyRef from "../applyRef";
 import bem from "../bem";
-import useResizeObserver from "../sizing/useResizeObserver";
+import { useResizeObserver } from "../sizing/useResizeObserver";
 import GridListCell from "./GridListCell";
 import getScrollbarSize from "./scrollbarSize";
 import { GridListSizeProvider, GridListSize } from "./context";

packages/utils/src/sizing/ResizeObserver.tsx

@@ -1,9 +1,7 @@
 import React, { ElementType, ReactElement, useCallback, useState } from "react";
 
-import useResizeObserver, {
-  ObservedResizeEventHandler,
-  ResizeObserverTarget,
-} from "./useResizeObserver";
+import { useResizeObserver, OnResizeObserverChange } from "./useResizeObserver";
+import { ResizeObserverTarget } from "./useResizeObserverV1";
 
 export interface ResizeObserverProps {
   /**
@@ -51,13 +49,16 @@ export interface ResizeObserverProps {
    * the next height, width, scrollHeight, scrollWidth, and the element that is
    * being observed.
    */
-  onResize: ObservedResizeEventHandler;
+  onResize: OnResizeObserverChange;
 }
 
 /**
  * The resize observer is used to track the size changes for a single element in
- * a page.  This is a bit different than a normal `ResizeListener` since it does
+ * a page. This is a bit different than a normal `ResizeListener` since it does
  * not rely on entire page size changes.
+ *
+ * @deprecated 2.3.0 You should really use the `useResizeObserver` hook instead
+ * since it offers a lot more flexibility and functionality than this component.
  */
 function ResizeObserver({
   disableHeight = false,