Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-core-ui/src/hooks/useAutofocusInput.ts

@@ -0,0 +1,13 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export function useAutofocusInput() {
+  const [ref, setRef] = useState<RefObject<HTMLInputElement>>(null);
+
+  useEffect(() => {
+    if (!ref?.current?.focus) return;
+
+    ref.current.focus();
+  }, [ref]);
+
+  return setRef;
+}

packages/noodl-core-ui/src/hooks/useTrackBounds.ts

@@ -0,0 +1,27 @@
+import React, { useLayoutEffect, useState } from "react";
+
+/**
+ * Track the Bounding Client Rect on a HTMLElement.
+ *
+ * @param ref The HTML Element we are tracking.
+ * @returns ref.current.getBoundingClientRect() result.
+ */
+export function useTrackBounds(ref: React.MutableRefObject<HTMLElement>) {
+  const [bounds, setBounds] = useState<DOMRect | null>(null);
+
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(() => {
+      const newBounds = ref.current?.getBoundingClientRect();
+      setBounds(newBounds);
+    });
+    observer.observe(ref.current);
+
+    setBounds(ref.current?.getBoundingClientRect());
+
+    return function () {
+      observer.disconnect();
+    };
+  }, [ref]);
+
+  return bounds;
+}