@dxos/react-hooks 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.4-main.fffef41",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -17,32 +21,30 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@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.fffef41",
-    "@dxos/log": "0.8.4-main.fffef41"
+    "@dxos/async": "0.8.4-staging.60fe92afc8",
+    "@dxos/log": "0.8.4-staging.60fe92afc8"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3"
   },
   "publishConfig": {
     "access": "public"

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';
@@ -17,8 +21,5 @@ export * from './useMediaQuery';
 export * from './useMulticastObservable';
 export * from './useRefCallback';
 export * from './useViewportResize';
-export * from './useSignals';
 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/useControlledState.ts

@@ -8,19 +8,19 @@ import { useDynamicRef } from './useDynamicRef';
 
 /**
  * A stateful hook with a controlled value.
- * @deprecated Use Radix `useControllableState` (NOTE: `useControlledState` is not compatible with `useControllableState`)
+ * NOTE: Consider using Radix's `useControllableState`.
  */
 export const useControlledState = <T>(
-  valueParam: T,
+  valueProp: T,
   onChange?: (value: T) => void,
 ): [T, Dispatch<SetStateAction<T>>] => {
-  const [value, setControlledValue] = useState(valueParam);
+  const [value, setControlledValue] = useState(valueProp);
   useEffect(() => {
-    setControlledValue(valueParam);
-  }, [valueParam]);
+    setControlledValue(valueProp);
+  }, [valueProp]);
 
   const onChangeRef = useRef(onChange);
-  const valueRef = useDynamicRef(valueParam);
+  const valueRef = useDynamicRef(valueProp);
   const setValue = useCallback<Dispatch<SetStateAction<T>>>(
     (nextValue) => {
       const value = isFunction(nextValue) ? nextValue(valueRef.current) : nextValue;

package/src/useDebugDeps.ts

@@ -4,23 +4,32 @@
 
 import { type DependencyList, useEffect, useRef } from 'react';
 
+import { log } from '@dxos/log';
+
 /**
  * Util to log deps that have changed.
  */
-export const useDebugDeps = (deps: DependencyList = [], active = true) => {
+export const useDebugDeps = (deps: DependencyList = [], label = 'useDebugDeps', active = true) => {
   const lastDeps = useRef<DependencyList>([]);
   useEffect(() => {
-    console.group('deps changed', { previous: lastDeps.current.length, current: deps.length });
+    if (!active) {
+      return;
+    }
+
+    const diff: Record<number, { previous: any; current: any }> = {};
     for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
-      if (lastDeps.current[i] !== deps[i] && active) {
-        console.log('changed', {
-          index: i,
+      if (lastDeps.current[i] !== deps[i] || i > lastDeps.current.length) {
+        diff[i] = {
           previous: lastDeps.current[i],
           current: deps[i],
-        });
+        };
       }
     }
-    console.groupEnd();
+
+    if (Object.keys(diff).length > 0) {
+      log.warn(`Updated: ${label} [${lastDeps.current.length}/${deps.length}]`, diff);
+    }
+
     lastDeps.current = deps;
-  }, deps);
+  }, [...deps, active]);
 };

package/src/useDynamicRef.ts

@@ -2,15 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useCallback } from '@preact-signals/safe-react/react';
-import { type Dispatch, type RefObject, type SetStateAction, useEffect, useRef, useState } from 'react';
+import { type Dispatch, type RefObject, type SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
 
 /**
  * Like `useState` but with an additional dynamic value.
  */
-export const useStateWithRef = <T>(valueParam: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>] => {
-  const [value, setValue] = useState<T>(valueParam);
-  const valueRef = useRef<T>(valueParam);
+export const useStateWithRef = <T>(valueProp: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>] => {
+  const [value, setValue] = useState<T>(valueProp);
+  const valueRef = useRef<T>(valueProp);
   const setter = useCallback<Dispatch<SetStateAction<T>>>((value) => {
     if (typeof value === 'function') {
       setValue((current) => {

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();
+      }
     };
   };
 };
@@ -57,5 +59,5 @@ export const mergeRefs = <T>(refs: (Ref<T> | undefined)[]): Ref<T> => {
  * The returned ref is memoized and only changes when the refs array changes.
  */
 export const useMergeRefs = <T>(refs: (Ref<T> | undefined)[]): Ref<T> => {
-  return useMemo(() => mergeRefs(refs), refs);
+  return useMemo(() => mergeRefs(refs), [...refs]);
 };

package/src/useId.ts

@@ -19,8 +19,9 @@ export const randomString = (n = 4) =>
     .toString(16)
     .slice(2, n + 2);
 
-export const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>
-  useMemo(() => makeId(namespace, propsId, opts), [propsId]);
+export const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) => {
+  return useMemo(() => makeId(namespace, propsId, opts), [propsId]);
+};
 
 export const makeId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>
   propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;

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/useMulticastObservable.test.ts

@@ -15,7 +15,7 @@ describe('useMulticastObservable', () => {
     const observable = MulticastObservable.from(event, 0);
     const { result } = renderHook(() => useMulticastObservable(observable));
     expect(result.current).toEqual(0);
-    act(() => event.emit(1));
+    await act(async () => event.emit(1));
     await expect.poll(() => result.current).toEqual(1);
   });
 });

package/src/useViewportResize.ts

@@ -5,23 +5,48 @@
 import { useLayoutEffect, useMemo } from 'react';
 
 export const useViewportResize = (
-  handler: (event?: Event) => void,
+  cb: (event?: Event) => void,
   deps: Parameters<typeof useLayoutEffect>[1] = [],
   delay: number = 800,
 ) => {
-  const debouncedHandler = useMemo(() => {
-    let timeout: ReturnType<typeof setTimeout>;
-    return (event?: Event) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        handler(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;
+          // The debounced callback can outlive the DOM realm: in jsdom/happy-dom test runs the
+          // timer survives environment teardown (e.g. story roots that are never unmounted), and
+          // callbacks here read DOM globals such as `getComputedStyle`. Skip dispatch once the
+          // realm is gone.
+          if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+            return;
+          }
+          cb(event);
+        }, delay);
+      },
+      cancel: () => {
+        if (timeout !== undefined) {
+          clearTimeout(timeout);
+          timeout = undefined;
+        }
+      },
     };
-  }, [handler, delay]);
+  }, [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]);
 };

package/dist/types/src/useSignals.d.ts

@@ -1,10 +0,0 @@
-import { type DependencyList } from 'react';
-/**
- * Like `useEffect` but also tracks signals inside of the callback.
- */
-export declare const useSignalsEffect: (cb: () => void | (() => void), deps?: DependencyList) => void;
-/**
- * Like `useMemo` but also tracks signals inside of the callback.
- */
-export declare const useSignalsMemo: <T>(cb: () => T, deps?: DependencyList) => T;
-//# sourceMappingURL=useSignals.d.ts.map

package/dist/types/src/useSignals.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSignals.d.ts","sourceRoot":"","sources":["../../../src/useSignals.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,OAAO,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,IAAI,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,EAAE,OAAO,cAAc,SAQpF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,IAAI,MAAM,CAAC,EAAE,OAAO,cAAc,MAEnE,CAAC"}

package/src/useSignals.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { computed, effect } from '@preact-signals/safe-react';
-import { useRef } from '@preact-signals/safe-react/react';
-import { type DependencyList, useEffect, useMemo } from 'react';
-
-/**
- * Like `useEffect` but also tracks signals inside of the callback.
- */
-export const useSignalsEffect = (cb: () => void | (() => void), deps?: DependencyList) => {
-  const callback = useRef(cb);
-  callback.current = cb;
-  useEffect(() => {
-    return effect(() => {
-      return callback.current();
-    });
-  }, deps ?? []);
-};
-
-/**
- * Like `useMemo` but also tracks signals inside of the callback.
- */
-export const useSignalsMemo = <T>(cb: () => T, deps?: DependencyList) => {
-  return useMemo(() => computed(cb), deps ?? []).value;
-};