@dxos/react-hooks 0.7.5-main.9d2a38b → 0.7.5-main.c41020f

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

@@ -1 +1 @@
-{"version":3,"file":"useAsyncState.d.ts","sourceRoot":"","sources":["../../../src/useAsyncState.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,MACzB,MAAM,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,SAC1B,GAAG,EAAE,KACV,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAYzD,CAAC"}
+{"version":3,"file":"useAsyncState.d.ts","sourceRoot":"","sources":["../../../src/useAsyncState.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,MACzB,MAAM,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,SAC1B,GAAG,EAAE,KACV,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAazD,CAAC"}

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

@@ -0,0 +1,6 @@
+import { type Dispatch, type SetStateAction } from 'react';
+/**
+ * A stateful hook with a controlled value.
+ */
+export declare const useControlledState: <T>(controlledValue: T, ...deps: any[]) => [T, Dispatch<SetStateAction<T>>];
+//# sourceMappingURL=useControlledState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.d.ts","sourceRoot":"","sources":["../../../src/useControlledState.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,mBAAmB,CAAC,WAAW,GAAG,EAAE,KAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CASzG,CAAC"}

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

@@ -1,2 +1,5 @@
+/**
+ * Ref that is updated by a dependency.
+ */
 export declare const useDynamicRef: <T>(value: T) => import("react").MutableRefObject<T>;
 //# sourceMappingURL=useDynamicRef.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDynamicRef.d.ts","sourceRoot":"","sources":["../../../src/useDynamicRef.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,CAAC,wCAOxC,CAAC"}
+{"version":3,"file":"useDynamicRef.d.ts","sourceRoot":"","sources":["../../../src/useDynamicRef.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,CAAC,wCAOxC,CAAC"}

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

@@ -1,3 +1,7 @@
 import { type ForwardedRef } from 'react';
+/**
+ * Combines a possibly undefined forwarded ref with a locally defined ref.
+ * See also: react-merge-refs
+ */
 export declare const useForwardedRef: <T>(ref: ForwardedRef<T>) => import("react").RefObject<T>;
 //# sourceMappingURL=useForwardedRef.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useForwardedRef.d.ts","sourceRoot":"","sources":["../../../src/useForwardedRef.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAE7D,eAAO,MAAM,eAAe,GAAI,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,iCAgBtD,CAAC"}
+{"version":3,"file":"useForwardedRef.d.ts","sourceRoot":"","sources":["../../../src/useForwardedRef.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,iCAetD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../src/useMediaQuery.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,UAAW,MAAM,GAAG,MAAM,EAAE,YAAW,oBAAoB,KAAQ,OAAO,EA0DnG,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../src/useMediaQuery.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,UAAW,MAAM,GAAG,MAAM,EAAE,YAAW,oBAAoB,KAAQ,OAAO,EA2DnG,CAAC"}

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

@@ -1,3 +1,3 @@
 import { useLayoutEffect } from 'react';
-export declare const useResize: (handler: (event?: Event) => void, deps?: Parameters<typeof useLayoutEffect>[1]) => void;
+export declare const useResize: (handler: (event?: Event) => void, deps?: Parameters<typeof useLayoutEffect>[1], delay?: number) => void;
 //# sourceMappingURL=useResize.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../../src/useResize.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,SAAS,YACX,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,SAC1B,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAO5C,CAAC"}
+{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../../src/useResize.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAW,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,SAAS,YACX,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,SAC1B,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,UACpC,MAAM,SAiBd,CAAC"}

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

@@ -0,0 +1,5 @@
+/**
+ * Use to debug which props have changed to trigger re-renders in a React component.
+ */
+export declare const useTrackProps: <T extends Record<string, unknown>>(props: T, componentName?: string, active?: boolean) => void;
+//# sourceMappingURL=useTrackProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackProps.d.ts","sourceRoot":"","sources":["../../../src/useTrackProps.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,SACtD,CAAC,mDA2BT,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.c41020f",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -24,8 +25,8 @@
   ],
   "dependencies": {
     "alea": "^1.0.1",
-    "@dxos/async": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b"
+    "@dxos/async": "0.7.5-main.c41020f",
+    "@dxos/log": "0.7.5-main.c41020f"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",

package/src/index.ts

@@ -4,7 +4,7 @@
 
 export * from './useAsyncEffect';
 export * from './useAsyncState';
-export * from './useControlledValue';
+export * from './useControlledState';
 export * from './useDebugReactDeps';
 export * from './useDefaultValue';
 export * from './useDynamicRef';
@@ -16,4 +16,5 @@ export * from './useMediaQuery';
 export * from './useMulticastObservable';
 export * from './useRefCallback';
 export * from './useResize';
+export * from './useTrackProps';
 export * from './useTransitions';

package/src/useAsyncEffect.ts

@@ -33,6 +33,8 @@ import { log } from '@dxos/log';
  * @param deps
  *
  * NOTE: This effect does not cancel the async operation if the component is unmounted.
+ *
+ * @deprecated
  */
 export const useAsyncEffect = <T>(
   callback: (isMounted: () => boolean) => Promise<T> | undefined,
@@ -46,7 +48,6 @@ export const useAsyncEffect = <T>(
     let mounted = true;
     let value: T | undefined;
     const asyncResult = callback(() => mounted);
-
     void Promise.resolve(asyncResult)
       .then((result) => {
         value = result;

package/src/useAsyncState.ts

@@ -15,6 +15,7 @@ export const useAsyncState = <T>(
   useEffect(() => {
     const t = setTimeout(async () => {
       const data = await cb();
+      // TODO(dmaretskyi): Potential race condition here.
       setValue(data);
     });
 

package/src/{useControlledValue.ts → useControlledState.ts}

@@ -7,11 +7,8 @@ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 /**
  * A stateful hook with a controlled value.
  */
-export const useControlledValue = <TValue>(
-  controlledValue: TValue,
-  ...deps: any[]
-): [TValue, Dispatch<SetStateAction<TValue>>] => {
-  const [value, setValue] = useState<TValue>(controlledValue);
+export const useControlledState = <T>(controlledValue: T, ...deps: any[]): [T, Dispatch<SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(controlledValue);
   useEffect(() => {
     if (controlledValue !== undefined) {
       setValue(controlledValue);

package/src/useDynamicRef.ts

@@ -4,6 +4,9 @@
 
 import { useEffect, useRef } from 'react';
 
+/**
+ * Ref that is updated by a dependency.
+ */
 export const useDynamicRef = <T>(value: T) => {
   const ref = useRef<T>(value);
   useEffect(() => {

package/src/useForwardedRef.ts

@@ -4,9 +4,12 @@
 
 import { type ForwardedRef, useRef, useEffect } from 'react';
 
+/**
+ * Combines a possibly undefined forwarded ref with a locally defined ref.
+ * See also: react-merge-refs
+ */
 export const useForwardedRef = <T>(ref: ForwardedRef<T>) => {
   const innerRef = useRef<T>(null);
-
   useEffect(() => {
     if (!ref) {
       return;

package/src/useMediaQuery.ts

@@ -29,6 +29,7 @@ const breakpointMediaQueries: Record<string, string> = {
  * @see Docs https://chakra-ui.com/docs/hooks/use-media-query
  */
 export const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {
+  // TODO(wittjosiah): Why is the default here true?
   const { ssr = true, fallback } = options;
 
   const queries = (Array.isArray(query) ? query : [query]).map((query) =>

package/src/useResize.ts

@@ -1,16 +1,27 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect, useMemo } from 'react';
 
 export const useResize = (
   handler: (event?: Event) => void,
-  deps: Parameters<typeof useLayoutEffect>[1] = [handler],
+  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);
+    };
+  }, [handler, delay]);
+
   return useLayoutEffect(() => {
-    window.visualViewport?.addEventListener('resize', handler);
-    handler();
-    return () => window.visualViewport?.removeEventListener('resize', handler);
-  }, deps);
+    window.visualViewport?.addEventListener('resize', debouncedHandler);
+    debouncedHandler();
+    return () => window.visualViewport?.removeEventListener('resize', debouncedHandler);
+  }, [debouncedHandler, ...deps]);
 };

package/src/useTrackProps.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useRef, useEffect } from 'react';
+
+import { log } from '@dxos/log';
+
+/**
+ * Use to debug which props have changed to trigger re-renders in a React component.
+ */
+export const useTrackProps = <T extends Record<string, unknown>>(
+  props: T,
+  componentName = 'Component',
+  active = true,
+) => {
+  const prevProps = useRef<T>(props);
+  useEffect(() => {
+    const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);
+    if (changes.length > 0) {
+      if (active) {
+        log.info('props changed', {
+          componentName,
+          keys: changes.map(([key]) => key).join(','),
+          props: Object.fromEntries(
+            changes.map(([key]) => [
+              key,
+              {
+                from: prevProps.current[key],
+                to: props[key],
+              },
+            ]),
+          ),
+        });
+      }
+    }
+
+    prevProps.current = props;
+  });
+};

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

@@ -1,6 +0,0 @@
-import { type Dispatch, type SetStateAction } from 'react';
-/**
- * A stateful hook with a controlled value.
- */
-export declare const useControlledValue: <TValue>(controlledValue: TValue, ...deps: any[]) => [TValue, Dispatch<SetStateAction<TValue>>];
-//# sourceMappingURL=useControlledValue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useControlledValue.d.ts","sourceRoot":"","sources":["../../../src/useControlledValue.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,mBACtB,MAAM,WACd,GAAG,EAAE,KACb,CAAC,MAAM,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAS3C,CAAC"}