@dxos/react-hooks 0.8.4-main.cb12b3f963 → 0.8.4-main.d05539e30a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.4-main.cb12b3f963",
+  "version": "0.8.4-main.d05539e30a",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
@@ -32,8 +32,8 @@
     "alea": "^1.0.1",
     "lodash.defaultsdeep": "^4.6.1",
     "mini-virtual-list": "^0.3.2",
-    "@dxos/async": "0.8.4-main.cb12b3f963",
-    "@dxos/log": "0.8.4-main.cb12b3f963"
+    "@dxos/async": "0.8.4-main.d05539e30a",
+    "@dxos/log": "0.8.4-main.d05539e30a"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",

package/src/useViewportResize.ts

@@ -9,19 +9,37 @@ export const useViewportResize = (
   deps: Parameters<typeof useLayoutEffect>[1] = [],
   delay: number = 800,
 ) => {
-  const debouncedHandler = useMemo(() => {
-    let timeout: ReturnType<typeof setTimeout>;
-    return (event?: Event) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        cb(event);
-      }, delay);
+  // The cleanup must cancel the pending debounce timeout. Otherwise, if the
+  // component unmounts during the `delay` window (common in jsdom/happy-dom
+  // test teardown), the callback fires against a torn-down DOM and surfaces
+  // as `ReferenceError: getComputedStyle is not defined`.
+  const { handler: debouncedHandler, cancel } = useMemo(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    return {
+      handler: (event?: Event) => {
+        if (timeout !== undefined) {
+          clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => {
+          timeout = undefined;
+          cb(event);
+        }, delay);
+      },
+      cancel: () => {
+        if (timeout !== undefined) {
+          clearTimeout(timeout);
+          timeout = undefined;
+        }
+      },
     };
   }, [cb, delay]);
 
   return useLayoutEffect(() => {
     window.visualViewport?.addEventListener('resize', debouncedHandler);
     debouncedHandler();
-    return () => window.visualViewport?.removeEventListener('resize', debouncedHandler);
-  }, [debouncedHandler, ...deps]);
+    return () => {
+      window.visualViewport?.removeEventListener('resize', debouncedHandler);
+      cancel();
+    };
+  }, [debouncedHandler, cancel, ...deps]);
 };