@dxos/react-hooks 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.4-main.a4bbb77",
+  "version": "0.8.4-main.ae835ea",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,13 +28,14 @@
     "@preact-signals/safe-react": "^0.9.0",
     "alea": "^1.0.1",
     "lodash.defaultsdeep": "^4.6.1",
-    "@dxos/async": "0.8.4-main.a4bbb77",
-    "@dxos/log": "0.8.4-main.a4bbb77"
+    "mini-virtual-list": "^0.3.2",
+    "@dxos/async": "0.8.4-main.ae835ea",
+    "@dxos/log": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~19.2.0",
-    "@types/react-dom": "~19.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "react": "~19.2.0",
     "react-dom": "~19.2.0"
   },

package/src/index.ts

@@ -16,7 +16,9 @@ export * from './useIsFocused';
 export * from './useMediaQuery';
 export * from './useMulticastObservable';
 export * from './useRefCallback';
-export * from './useResize';
+export * from './useViewportResize';
 export * from './useSignals';
 export * from './useTimeout';
 export * from './useTransitions';
+
+export { useSize, useScroller } from 'mini-virtual-list';

package/src/useControlledState.ts

@@ -7,6 +7,7 @@ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 /**
  * A stateful hook with a controlled value.
  * NOTE: Be careful not to provide an inlinde default array.
+ * @deprecated Use Radix `useControllableState`.
  */
 export const useControlledState = <T>(
   controlledValue: T,

package/src/useDynamicRef.ts

@@ -3,12 +3,12 @@
 //
 
 import { useCallback } from '@preact-signals/safe-react/react';
-import { type Dispatch, type MutableRefObject, type SetStateAction, useEffect, useRef, useState } from 'react';
+import { type Dispatch, type RefObject, type SetStateAction, useEffect, useRef, useState } from 'react';
 
 /**
  * Like `useState` but with an additional dynamic value.
  */
-export const useStateWithRef = <T>(valueParam: T): [T, Dispatch<SetStateAction<T>>, MutableRefObject<T>] => {
+export const useStateWithRef = <T>(valueParam: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>] => {
   const [value, setValue] = useState<T>(valueParam);
   const valueRef = useRef<T>(valueParam);
   const setter = useCallback<Dispatch<SetStateAction<T>>>((value) => {
@@ -29,7 +29,7 @@ export const useStateWithRef = <T>(valueParam: T): [T, Dispatch<SetStateAction<T
 /**
  * Ref that is updated by a dependency.
  */
-export const useDynamicRef = <T>(value: T): MutableRefObject<T> => {
+export const useDynamicRef = <T>(value: T): RefObject<T> => {
   const valueRef = useRef<T>(value);
   useEffect(() => {
     valueRef.current = value;

package/src/useForwardedRef.ts

@@ -2,25 +2,28 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ForwardedRef, useEffect, useRef } from 'react';
+import { type ForwardedRef, type RefObject, useEffect, useRef } from 'react';
 
 /**
  * Combines a possibly undefined forwarded ref with a locally defined ref.
- * @deprecated Use `useComposedRefs` from @radix-ui/react-compose-refs
  */
-export const useForwardedRef = <T>(ref: ForwardedRef<T>) => {
-  const innerRef = useRef<T>(null);
+export const useForwardedRef = <T>(ref: ForwardedRef<T>): RefObject<T | null> => {
+  const innerRef = useRef<T | null>(null);
   useEffect(() => {
-    if (!ref) {
-      return;
-    }
-
-    if (typeof ref === 'function') {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
+    updateRef(ref, innerRef.current);
+  }, [ref]);
 
   return innerRef;
 };
+
+export const updateRef = <T>(ref: ForwardedRef<T>, value: T): void => {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === 'function') {
+    ref(value);
+  } else {
+    ref.current = value;
+  }
+};

package/src/useMediaQuery.ts

@@ -29,8 +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 { ssr = false, fallback } = options;
 
   const queries = (Array.isArray(query) ? query : [query]).map((query) =>
     query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,

package/src/useTransitions.ts

@@ -48,7 +48,9 @@ export const useDidTransition = <T>(
  * Executes a callback function when a specified transition occurs in a value.
  *
  * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
- * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
+ * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed.
+ */
+// TODO(wittjosiah): Seems overwrought.
 export const useOnTransition = <T>(
   currentValue: T,
   fromValue: T | ((value: T) => boolean),

package/src/{useResize.ts → useViewportResize.ts}

@@ -4,7 +4,7 @@
 
 import { useLayoutEffect, useMemo } from 'react';
 
-export const useResize = (
+export const useViewportResize = (
   handler: (event?: Event) => void,
   deps: Parameters<typeof useLayoutEffect>[1] = [],
   delay: number = 800,

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

@@ -1,3 +0,0 @@
-import { useLayoutEffect } from 'react';
-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 +0,0 @@
-{"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,GACpB,SAAS,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,EAChC,OAAM,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAM,EAChD,QAAO,MAAY,SAiBpB,CAAC"}