Show all CAD files in FileTree (#1642)

src/hooks/useDocumentHasFocus.ts

@@ -0,0 +1,31 @@
+// Based on https://learnersbucket.com/examples/interview/usehasfocus-hook-in-react/
+import { useState, useEffect } from 'react'
+
+export const useDocumentHasFocus = () => {
+  // get the initial state
+  const [focus, setFocus] = useState(document.hasFocus())
+
+  useEffect(() => {
+    // helper functions to update the status
+    const onFocus = () => setFocus(true)
+    const onBlur = () => setFocus(false)
+
+    // assign the listener
+    // update the status on the event
+    if (globalThis.window && typeof globalThis.window !== 'undefined') {
+      globalThis.window.addEventListener('focus', onFocus)
+      globalThis.window.addEventListener('blur', onBlur)
+    }
+
+    // remove the listener
+    return () => {
+      if (globalThis.window && typeof globalThis.window !== 'undefined') {
+        globalThis.window.removeEventListener('focus', onFocus)
+        globalThis.window.removeEventListener('blur', onBlur)
+      }
+    }
+  }, [])
+
+  // return the status
+  return focus
+}