From ede44a01f048cde6f26539aef8957e3278baae95 Mon Sep 17 00:00:00 2001
From: oatkiller <robert.austin@elastic.co>
Date: Fri, 20 Dec 2019 16:20:01 -0500
Subject: [PATCH] improve types and docs for useAutoupdatingClientRect

---
 .../view/use_autoupdating_client_rect.tsx     | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/use_autoupdating_client_rect.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/use_autoupdating_client_rect.tsx
index 31a9d5e3eb45fff..5f13995de1c2adc 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/use_autoupdating_client_rect.tsx
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/use_autoupdating_client_rect.tsx
@@ -7,22 +7,18 @@
 import { useCallback, useState, useEffect, useRef } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-/** Built in typescript DOM libs and the ResizeObserver polyfill have incompatible definitions of DOMRectReadOnly so we use this basic one
- */
-interface BasicDOMRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
 /**
- * Returns a DOMRect sometimes, and a `ref` callback. Put the `ref` as the `ref` property of an element, and
- * DOMRect will be the result of getBoundingClientRect on it.
- * Updates automatically when the window resizes. TODO: better Englishe here
+ * Returns a nullable DOMRect and a ref callback. Pass the refCallback to the
+ * `ref` property of a native element and this hook will return a DOMRect for
+ * it by calling `getBoundingClientRect`. This hook will observe the element
+ * with a resize observer and call getBoundingClientRect again after resizes.
+ *
+ * Note that the changes to the position of the element aren't automatically
+ * tracked. So if the element's position moves for some reason, be sure to
+ * handle that.
  */
-export function useAutoUpdatingClientRect(): [BasicDOMRect | null, (node: Element | null) => void] {
-  const [rect, setRect] = useState<BasicDOMRect | null>(null);
+export function useAutoUpdatingClientRect(): [DOMRect | null, (node: Element | null) => void] {
+  const [rect, setRect] = useState<DOMRect | null>(null);
   const nodeRef = useRef<Element | null>(null);
   const ref = useCallback((node: Element | null) => {
     nodeRef.current = node;