@dxos/react-hooks 0.7.5-main.499c70c → 0.7.5-main.5ae2ba8

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

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useLayoutEffect, useMemo } from 'react';
+
+export const useResize = (
+  handler: (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);
+    };
+  }, [handler, delay]);
+
+  return useLayoutEffect(() => {
+    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"}