@dxos/react-hooks 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.4-main.72ec0f3",
+  "version": "0.8.4-main.74a063c4e0",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,24 +29,24 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@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.72ec0f3",
-    "@dxos/log": "0.8.4-main.72ec0f3"
+    "@dxos/async": "0.8.4-main.74a063c4e0",
+    "@dxos/log": "0.8.4-main.74a063c4e0"
   },
   "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,6 +2,9 @@
 // Copyright 2022 DXOS.org
 //
 
+export { useComposedRefs } from '@radix-ui/react-compose-refs';
+export { useSize, useScroller } from 'mini-virtual-list';
+
 export * from './useAsyncEffect';
 export * from './useAsyncState';
 export * from './useControlledState';
@@ -17,8 +20,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/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

@@ -57,5 +57,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,7 +5,7 @@
 import { useLayoutEffect, useMemo } from 'react';
 
 export const useViewportResize = (
-  handler: (event?: Event) => void,
+  cb: (event?: Event) => void,
   deps: Parameters<typeof useLayoutEffect>[1] = [],
   delay: number = 800,
 ) => {
@@ -14,10 +14,10 @@ export const useViewportResize = (
     return (event?: Event) => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
-        handler(event);
+        cb(event);
       }, delay);
     };
-  }, [handler, delay]);
+  }, [cb, delay]);
 
   return useLayoutEffect(() => {
     window.visualViewport?.addEventListener('resize', debouncedHandler);

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