From a3ca034b3539f3739566cb5753c37431c382dfbf Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chancedigital.io>
Date: Mon, 22 Jun 2020 14:23:36 -0700
Subject: [PATCH] rect: update deps + broaden types

---
 .../examples/change-observed-ref.example.tsx  | 29 +++++++++++++++++++
 packages/rect/package.json                    |  2 +-
 packages/rect/src/index.tsx                   | 14 +++++----
 yarn.lock                                     |  8 ++---
 4 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 packages/rect/examples/change-observed-ref.example.tsx

diff --git a/packages/rect/examples/change-observed-ref.example.tsx b/packages/rect/examples/change-observed-ref.example.tsx
new file mode 100644
index 000000000..ba50d93d0
--- /dev/null
+++ b/packages/rect/examples/change-observed-ref.example.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { useRect } from "@reach/rect";
+
+let name = "Change the observed ref";
+
+function Example() {
+  const refLeft = React.useRef<HTMLTextAreaElement>(null);
+  const refRight = React.useRef<HTMLTextAreaElement>(null);
+  const [whichRect, setWhichRect] = React.useState(true);
+  const rect = useRect(whichRect ? refLeft : refRight);
+  return (
+    <div>
+      <pre>
+        {whichRect ? "left" : "right"}: {JSON.stringify(rect, null, 2)}
+      </pre>
+      <button onClick={() => setWhichRect(!whichRect)}>
+        Toggle Observed Ref
+      </button>
+      <div>
+        <textarea ref={refLeft} defaultValue="resize this" />
+        <textarea ref={refRight} defaultValue="resize this" />
+      </div>
+    </div>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default { title: "Rect" };
diff --git a/packages/rect/package.json b/packages/rect/package.json
index 71d1ef0df..3145b417d 100644
--- a/packages/rect/package.json
+++ b/packages/rect/package.json
@@ -13,7 +13,7 @@
     "build": "ts-node ../../scripts/build"
   },
   "dependencies": {
-    "@reach/observe-rect": "1.1.0",
+    "@reach/observe-rect": "1.2.0",
     "@reach/utils": "0.10.4",
     "prop-types": "^15.7.2",
     "tslib": "^2.0.0"
diff --git a/packages/rect/src/index.tsx b/packages/rect/src/index.tsx
index 5be0e407c..4e1a44c82 100644
--- a/packages/rect/src/index.tsx
+++ b/packages/rect/src/index.tsx
@@ -65,7 +65,10 @@ export type RectProps = {
    *
    * @see Docs https://reacttraining.com/reach-ui/rect#rect-onchange
    */
-  children(args: { rect: PRect | null; ref: React.Ref<any> }): JSX.Element;
+  children(args: {
+    rect: PRect | null;
+    ref: React.RefObject<any>;
+  }): JSX.Element;
 };
 
 if (__DEV__) {
@@ -86,8 +89,8 @@ if (__DEV__) {
  * @param observe
  * @param onChange
  */
-export function useRect<T extends HTMLElement = HTMLElement>(
-  nodeRef: React.RefObject<T>,
+export function useRect<T extends Element = HTMLElement>(
+  nodeRef: React.RefObject<T | undefined | null>,
   observe: boolean = true,
   onChange?: (rect: DOMRect) => void
 ): null | DOMRect {
@@ -114,12 +117,13 @@ export function useRect<T extends HTMLElement = HTMLElement>(
   }, [element]);
 
   useIsomorphicLayoutEffect(() => {
+    let observer: ReturnType<typeof observeRect>;
     if (!element) {
       console.warn("You need to place the ref");
       return cleanup;
     }
 
-    let observer = observeRect(element, (rect) => {
+    observer = observeRect(element, (rect) => {
       onChangeRef.current && onChangeRef.current(rect);
       setRect(rect);
     });
@@ -128,7 +132,7 @@ export function useRect<T extends HTMLElement = HTMLElement>(
     return cleanup;
 
     function cleanup() {
-      observer.unobserve();
+      observer && observer.unobserve();
     }
   }, [observe, element]);
 
diff --git a/yarn.lock b/yarn.lock
index 1f3e9c7b7..af42692e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3112,10 +3112,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@reach/observe-rect@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.1.0.tgz#4e967a93852b6004c3895d9ed8d4e5b41895afde"
-  integrity sha512-kE+jvoj/OyJV24C03VvLt5zclb9ArJi04wWXMMFwQvdZjdHoBlN4g0ZQFjyy/ejPF1Z/dpUD5dhRdBiUmIGZTA==
+"@reach/observe-rect@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
+  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
 
 "@reach/router@^1.2.1", "@reach/router@^1.3.3":
   version "1.3.3"