@dxos/react-hooks 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.28f8d3d",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -26,10 +27,12 @@
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
     "alea": "^1.0.1",
-    "@dxos/async": "0.8.3-staging.0fa589b",
-    "@dxos/log": "0.8.3-staging.0fa589b"
+    "lodash.defaultsdeep": "^4.6.1",
+    "@dxos/async": "0.8.4-main.28f8d3d",
+    "@dxos/log": "0.8.4-main.28f8d3d"
   },
   "devDependencies": {
+    "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './useAsyncState';
 export * from './useControlledState';
 export * from './useDebugReactDeps';
 export * from './useDefaultValue';
+export * from './useDefaults';
 export * from './useDynamicRef';
 export * from './useFileDownload';
 export * from './useForwardedRef';
@@ -16,5 +17,6 @@ export * from './useMediaQuery';
 export * from './useMulticastObservable';
 export * from './useRefCallback';
 export * from './useResize';
+export * from './useTimeout';
 export * from './useTrackProps';
 export * from './useTransitions';

package/src/useAsyncEffect.ts

@@ -4,59 +4,11 @@
 
 import { useEffect } from 'react';
 
-import { log } from '@dxos/log';
-
-/**
- * Process async event with optional non-async destructor.
- * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js
- *
- * ```tsx
- * useAsyncEffect(async () => {
- *   await test();
- * }, []);
- * ```
- *
- * The callback may check of the component is still mounted before doing state updates.
- *
- * ```tsx
- * const [value, setValue] = useState<string>();
- * useAsyncEffect<string>(async (isMounted) => {
- *   const value = await test();
- *   if (!isMounted()) {
- *     setValue(value);
- *   }
- * }, () => console.log('Unmounted'), []);
- * ```
- *
- * @param callback Receives a getter function that determines if the component is still mounted.
- * @param destructor Receives the value returned from the callback.
- * @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,
-  destructor?: ((value?: T) => void) | any[],
-  deps?: any[],
-) => {
-  const [effectDestructor, effectDeps] =
-    typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];
-
+export const useAsyncEffect = <T>(callback: () => Promise<T> | void, deps?: any[]) => {
   useEffect(() => {
-    let mounted = true;
-    let value: T | undefined;
-    const asyncResult = callback(() => mounted);
-    void Promise.resolve(asyncResult)
-      .then((result) => {
-        value = result;
-      })
-      .catch(log.catch);
-
-    return () => {
-      mounted = false;
-      effectDestructor?.(value);
-    };
-  }, effectDeps);
+    const t = setTimeout(() => {
+      void callback();
+    });
+    return () => clearTimeout(t);
+  }, deps);
 };

package/src/useAsyncState.ts

@@ -14,7 +14,7 @@ export const useAsyncState = <T>(
   const [value, setValue] = useState<T | undefined>();
   useEffect(() => {
     let disposed = false;
-    queueMicrotask(async () => {
+    const t = setTimeout(async () => {
       const data = await cb();
       if (!disposed) {
         setValue(data);
@@ -23,6 +23,7 @@ export const useAsyncState = <T>(
 
     return () => {
       disposed = true;
+      clearTimeout(t);
     };
   }, deps);
 

package/src/useControlledState.ts

@@ -7,7 +7,11 @@ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 /**
  * A stateful hook with a controlled value.
  */
-export const useControlledState = <T>(controlledValue: T, ...deps: any[]): [T, Dispatch<SetStateAction<T>>] => {
+export const useControlledState = <T>(
+  controlledValue: T,
+  onChange?: (value: T) => void,
+  ...deps: any[]
+): [T, Dispatch<SetStateAction<T>>] => {
   const [value, setValue] = useState<T>(controlledValue);
   useEffect(() => {
     if (controlledValue !== undefined) {
@@ -15,5 +19,9 @@ export const useControlledState = <T>(controlledValue: T, ...deps: any[]): [T, D
     }
   }, [controlledValue, ...deps]);
 
+  useEffect(() => {
+    onChange?.(value);
+  }, [value, onChange]);
+
   return [value, setValue];
 };

package/src/useDefaultValue.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 /**
  * A custom React hook that provides a stable default value for a potentially undefined reactive value.
@@ -21,7 +21,6 @@ export const useDefaultValue = <T>(reactiveValue: T | undefined | null, getDefau
   // regardless of whether the defaultValue changes.
   const stableDefaultValue = useMemo(getDefaultValue, []);
   const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
-
   useEffect(() => {
     setValue(reactiveValue ?? stableDefaultValue);
   }, [reactiveValue, stableDefaultValue]);

package/src/useDefaults.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import defaultsDeep from 'lodash.defaultsdeep';
+import { useMemo } from 'react';
+
+/**
+ * Returns a memo-ized deep-merged object of the default and value.
+ * If value is undefined or null, then returns the default.
+ */
+export const useDefaults = <T>(value: T | undefined | null, defaults: T): T => {
+  return useMemo(() => defaultsDeep({}, defaults, value), [value, defaults]);
+};

package/src/useForwardedRef.ts

@@ -2,11 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ForwardedRef, useRef, useEffect } from 'react';
+import { type ForwardedRef, useEffect, useRef } from 'react';
 
 /**
  * Combines a possibly undefined forwarded ref with a locally defined ref.
- * See also: react-merge-refs
+ * @deprecated Use @radix-ui/react-compose-refs
  */
 export const useForwardedRef = <T>(ref: ForwardedRef<T>) => {
   const innerRef = useRef<T>(null);

package/src/useIsFocused.ts

@@ -5,7 +5,7 @@
 // Based upon the useIsFocused hook which is part of the `rci` project:
 /// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused
 
-import { useEffect, useRef, useState, type RefObject } from 'react';
+import { type RefObject, useEffect, useRef, useState } from 'react';
 
 export const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {
   const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);

package/src/useTimeout.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useRef } from 'react';
+
+export const useTimeout = (callback: (() => Promise<void>) | undefined, delay = 0, deps: any[] = []) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay == null) {
+      return;
+    }
+
+    const timeout = setTimeout(() => callbackRef.current?.(), delay);
+    return () => clearTimeout(timeout);
+  }, [delay, ...deps]);
+};

package/src/useTrackProps.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { log } from '@dxos/log';
 

package/src/useTransitions.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useRef, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {
   return functionToCheck instanceof Function;

package/dist/lib/node/index.cjs

@@ -1,413 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  makeId: () => makeId,
-  randomString: () => randomString,
-  useAsyncEffect: () => useAsyncEffect,
-  useAsyncState: () => useAsyncState,
-  useControlledState: () => useControlledState,
-  useDebugReactDeps: () => useDebugReactDeps,
-  useDefaultValue: () => useDefaultValue,
-  useDidTransition: () => useDidTransition,
-  useDynamicRef: () => useDynamicRef,
-  useFileDownload: () => useFileDownload,
-  useForwardedRef: () => useForwardedRef,
-  useId: () => useId,
-  useIsFocused: () => useIsFocused,
-  useMediaQuery: () => useMediaQuery,
-  useMulticastObservable: () => useMulticastObservable,
-  useOnTransition: () => useOnTransition,
-  useRefCallback: () => useRefCallback,
-  useResize: () => useResize,
-  useTrackProps: () => useTrackProps
-});
-module.exports = __toCommonJS(node_exports);
-var import_react = require("react");
-var import_log = require("@dxos/log");
-var import_react2 = require("react");
-var import_react3 = require("react");
-var import_react4 = require("react");
-var import_react5 = require("react");
-var import_react6 = require("react");
-var import_react7 = require("react");
-var import_react8 = require("react");
-var import_alea = __toESM(require("alea"));
-var import_react9 = require("react");
-var import_react10 = require("react");
-var import_react11 = require("react");
-var import_react12 = require("react");
-var import_react13 = require("react");
-var import_react14 = require("react");
-var import_react15 = require("react");
-var import_log2 = require("@dxos/log");
-var import_react16 = require("react");
-var useAsyncEffect = (callback, destructor, deps) => {
-  const [effectDestructor, effectDeps] = typeof destructor === "function" ? [
-    destructor,
-    deps
-  ] : [
-    void 0,
-    destructor
-  ];
-  (0, import_react.useEffect)(() => {
-    let mounted = true;
-    let value;
-    const asyncResult = callback(() => mounted);
-    void Promise.resolve(asyncResult).then((result) => {
-      value = result;
-    }).catch(import_log.log.catch);
-    return () => {
-      mounted = false;
-      effectDestructor?.(value);
-    };
-  }, effectDeps);
-};
-var useAsyncState = (cb, deps = []) => {
-  const [value, setValue] = (0, import_react2.useState)();
-  (0, import_react2.useEffect)(() => {
-    let disposed = false;
-    queueMicrotask(async () => {
-      const data = await cb();
-      if (!disposed) {
-        setValue(data);
-      }
-    });
-    return () => {
-      disposed = true;
-    };
-  }, deps);
-  return [
-    value,
-    setValue
-  ];
-};
-var useControlledState = (controlledValue, ...deps) => {
-  const [value, setValue] = (0, import_react3.useState)(controlledValue);
-  (0, import_react3.useEffect)(() => {
-    if (controlledValue !== void 0) {
-      setValue(controlledValue);
-    }
-  }, [
-    controlledValue,
-    ...deps
-  ]);
-  return [
-    value,
-    setValue
-  ];
-};
-var useDebugReactDeps = (deps = []) => {
-  const lastDeps = (0, import_react4.useRef)([]);
-  (0, import_react4.useEffect)(() => {
-    console.group("deps changed", {
-      old: lastDeps.current.length,
-      new: deps.length
-    });
-    for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
-      console.log(i, lastDeps.current[i] === deps[i] ? "SAME" : "CHANGED", {
-        previous: lastDeps.current[i],
-        current: deps[i]
-      });
-    }
-    console.groupEnd();
-    lastDeps.current = deps;
-  }, deps);
-};
-var useDefaultValue = (reactiveValue, getDefaultValue) => {
-  const stableDefaultValue = (0, import_react5.useMemo)(getDefaultValue, []);
-  const [value, setValue] = (0, import_react5.useState)(reactiveValue ?? stableDefaultValue);
-  (0, import_react5.useEffect)(() => {
-    setValue(reactiveValue ?? stableDefaultValue);
-  }, [
-    reactiveValue,
-    stableDefaultValue
-  ]);
-  return value;
-};
-var useDynamicRef = (value) => {
-  const ref = (0, import_react6.useRef)(value);
-  (0, import_react6.useEffect)(() => {
-    ref.current = value;
-  }, [
-    value
-  ]);
-  return ref;
-};
-var useFileDownload = () => {
-  return (0, import_react7.useMemo)(() => (data, filename) => {
-    const url = typeof data === "string" ? data : URL.createObjectURL(data);
-    const element = document.createElement("a");
-    element.setAttribute("href", url);
-    element.setAttribute("download", filename);
-    element.setAttribute("target", "download");
-    element.click();
-  }, []);
-};
-var useForwardedRef = (ref) => {
-  const innerRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
-    if (!ref) {
-      return;
-    }
-    if (typeof ref === "function") {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
-  return innerRef;
-};
-var Alea = import_alea.default;
-var prng = new Alea("@dxos/react-hooks");
-var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
-var useId = (namespace, propsId, opts) => (0, import_react9.useMemo)(() => makeId(namespace, propsId, opts), [
-  propsId
-]);
-var makeId = (namespace, propsId, opts) => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;
-var useIsFocused = (inputRef) => {
-  const [isFocused, setIsFocused] = (0, import_react10.useState)(void 0);
-  const isFocusedRef = (0, import_react10.useRef)(isFocused);
-  isFocusedRef.current = isFocused;
-  (0, import_react10.useEffect)(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-    const onFocus = () => setIsFocused(true);
-    const onBlur = () => setIsFocused(false);
-    input.addEventListener("focus", onFocus);
-    input.addEventListener("blur", onBlur);
-    if (isFocusedRef.current === void 0) {
-      setIsFocused(document.activeElement === input);
-    }
-    return () => {
-      input.removeEventListener("focus", onFocus);
-      input.removeEventListener("blur", onBlur);
-    };
-  }, [
-    inputRef,
-    setIsFocused
-  ]);
-  return isFocused;
-};
-var breakpointMediaQueries = {
-  sm: "(min-width: 640px)",
-  md: "(min-width: 768px)",
-  lg: "(min-width: 1024px)",
-  xl: "(min-width: 1280px)",
-  "2xl": "(min-width: 1536px)"
-};
-var useMediaQuery = (query, options = {}) => {
-  const { ssr = true, fallback } = options;
-  const queries = (Array.isArray(query) ? query : [
-    query
-  ]).map((query2) => query2 in breakpointMediaQueries ? breakpointMediaQueries[query2] : query2);
-  let fallbackValues = Array.isArray(fallback) ? fallback : [
-    fallback
-  ];
-  fallbackValues = fallbackValues.filter((v) => v != null);
-  const [value, setValue] = (0, import_react11.useState)(() => {
-    return queries.map((query2, index) => ({
-      media: query2,
-      matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
-    }));
-  });
-  (0, import_react11.useEffect)(() => {
-    setValue(queries.map((query2) => ({
-      media: query2,
-      matches: document.defaultView?.matchMedia(query2).matches
-    })));
-    const mql = queries.map((query2) => document.defaultView?.matchMedia(query2));
-    const handler = (evt) => {
-      setValue((prev) => {
-        return prev.slice().map((item) => {
-          if (item.media === evt.media) {
-            return {
-              ...item,
-              matches: evt.matches
-            };
-          }
-          return item;
-        });
-      });
-    };
-    mql.forEach((mql2) => {
-      if (typeof mql2?.addListener === "function") {
-        mql2?.addListener(handler);
-      } else {
-        mql2?.addEventListener("change", handler);
-      }
-    });
-    return () => {
-      mql.forEach((mql2) => {
-        if (typeof mql2?.removeListener === "function") {
-          mql2?.removeListener(handler);
-        } else {
-          mql2?.removeEventListener("change", handler);
-        }
-      });
-    };
-  }, [
-    document.defaultView
-  ]);
-  return value.map((item) => !!item.matches);
-};
-var useMulticastObservable = (observable) => {
-  const subscribeFn = (0, import_react12.useMemo)(() => (listener) => {
-    const subscription = observable.subscribe(listener);
-    return () => subscription.unsubscribe();
-  }, [
-    observable
-  ]);
-  return (0, import_react12.useSyncExternalStore)(subscribeFn, () => observable.get());
-};
-var useRefCallback = () => {
-  const [value, setValue] = (0, import_react13.useState)(null);
-  return {
-    refCallback: (value2) => setValue(value2),
-    value
-  };
-};
-var useResize = (handler, deps = [], delay = 800) => {
-  const debouncedHandler = (0, import_react14.useMemo)(() => {
-    let timeout;
-    return (event) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        handler(event);
-      }, delay);
-    };
-  }, [
-    handler,
-    delay
-  ]);
-  return (0, import_react14.useLayoutEffect)(() => {
-    window.visualViewport?.addEventListener("resize", debouncedHandler);
-    debouncedHandler();
-    return () => window.visualViewport?.removeEventListener("resize", debouncedHandler);
-  }, [
-    debouncedHandler,
-    ...deps
-  ]);
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/primitives/react-hooks/src/useTrackProps.ts";
-var useTrackProps = (props, componentName = "Component", active = true) => {
-  const prevProps = (0, import_react15.useRef)(props);
-  (0, import_react15.useEffect)(() => {
-    const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);
-    if (changes.length > 0) {
-      if (active) {
-        import_log2.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]
-            }
-          ]))
-        }, {
-          F: __dxlog_file,
-          L: 22,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    }
-    prevProps.current = props;
-  });
-};
-var isFunction = (functionToCheck) => {
-  return functionToCheck instanceof Function;
-};
-var useDidTransition = (currentValue, fromValue, toValue) => {
-  const [hasTransitioned, setHasTransitioned] = (0, import_react16.useState)(false);
-  const previousValue = (0, import_react16.useRef)(currentValue);
-  (0, import_react16.useEffect)(() => {
-    const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
-    const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
-    if (fromValueValid && toValueValid && !hasTransitioned) {
-      setHasTransitioned(true);
-    } else if ((!fromValueValid || !toValueValid) && hasTransitioned) {
-      setHasTransitioned(false);
-    }
-    previousValue.current = currentValue;
-  }, [
-    currentValue,
-    fromValue,
-    toValue,
-    hasTransitioned
-  ]);
-  return hasTransitioned;
-};
-var useOnTransition = (currentValue, fromValue, toValue, callback) => {
-  const dirty = (0, import_react16.useRef)(false);
-  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
-  (0, import_react16.useEffect)(() => {
-    dirty.current = false;
-  }, [
-    currentValue,
-    dirty
-  ]);
-  (0, import_react16.useEffect)(() => {
-    if (hasTransitioned && !dirty.current) {
-      callback();
-      dirty.current = true;
-    }
-  }, [
-    hasTransitioned,
-    dirty,
-    callback
-  ]);
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  makeId,
-  randomString,
-  useAsyncEffect,
-  useAsyncState,
-  useControlledState,
-  useDebugReactDeps,
-  useDefaultValue,
-  useDidTransition,
-  useDynamicRef,
-  useFileDownload,
-  useForwardedRef,
-  useId,
-  useIsFocused,
-  useMediaQuery,
-  useMulticastObservable,
-  useOnTransition,
-  useRefCallback,
-  useResize,
-  useTrackProps
-});
-//# sourceMappingURL=index.cjs.map