@dxos/react-hooks 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.4-main.ef1bc66f44",
+  "version": "0.8.4-main.f466a3d56e",
   "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",
@@ -21,20 +21,19 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
+    "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-id": "1.1.0",
     "alea": "^1.0.1",
     "lodash.defaultsdeep": "^4.6.1",
     "mini-virtual-list": "^0.3.2",
-    "@dxos/async": "0.8.4-main.ef1bc66f44",
-    "@dxos/log": "0.8.4-main.ef1bc66f44"
+    "@dxos/async": "0.8.4-main.f466a3d56e",
+    "@dxos/log": "0.8.4-main.f466a3d56e"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",

package/src/index.ts

@@ -2,7 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
+export { useComposedRefs } from '@radix-ui/react-compose-refs';
+export { useSize, useScroller } from 'mini-virtual-list';
+
 export * from './useAsyncEffect';
+export * from './useAtomState';
 export * from './useAsyncState';
 export * from './useControlledState';
 export * from './useDebugDeps';
@@ -19,5 +23,3 @@ export * from './useRefCallback';
 export * from './useViewportResize';
 export * from './useTimeout';
 export * from './useTransitions';
-
-export { useSize, useScroller } from 'mini-virtual-list';

package/src/useAtomState.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomSet, useAtomValue } from '@effect-atom/atom-react';
+import { useMemo, useState } from 'react';
+
+export type AtomState<T> = {
+  atom: Atom.Writable<T>;
+  value: T;
+  set: (value: T | ((value: T) => T)) => void;
+};
+
+/**
+ * Wraps a writable atom together with its current value and setter.
+ * The atom is created once on first render; `initialValue` is only used to seed it.
+ */
+export const useAtomState = <T>(initialValue: T): AtomState<T> => {
+  const [atom] = useState(() => Atom.make(initialValue));
+  const value = useAtomValue(atom);
+  const set = useAtomSet(atom);
+  return useMemo(() => ({ atom, value, set }), [atom, value, set]);
+};

package/src/useForwardedRef.ts

@@ -47,7 +47,9 @@ export const mergeRefs = <T>(refs: (Ref<T> | undefined)[]): Ref<T> => {
     }
 
     return () => {
-      for (const cleanup of cleanups) cleanup();
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
     };
   };
 };

package/src/useIsFocused.ts

@@ -3,7 +3,7 @@
 //
 
 // Based upon the useIsFocused hook which is part of the `rci` project:
-/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused
+/// https://github.com/leonardodino/rci/blob/main/packages/use-w-focused
 
 import { type RefObject, useEffect, useRef, useState } from 'react';
 

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]);
 };