@dxos/react-hooks 0.10.0 → 0.11.1

package/dist/lib/index.mjs

@@ -0,0 +1,481 @@
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useScroller, useSize } from "mini-virtual-list";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Atom, useAtomSet, useAtomValue } from "@effect-atom/atom-react";
+import { log } from "@dxos/log";
+import defaultsDeep from "lodash.defaultsdeep";
+import alea from "alea";
+//#region src/useAsyncEffect.ts
+/**
+* Async version of useEffect.
+* The `AbortController` can be used to detect if the component has been unmounted and
+* can be used to propagate abort signals to downstream async operations (e.g., `fetch`).
+*/
+var useAsyncEffect = (cb, deps) => {
+	useEffect(() => {
+		const controller = new AbortController();
+		let cleanup;
+		const t = setTimeout(async () => {
+			if (!controller.signal.aborted) cleanup = await cb(controller);
+		});
+		return () => {
+			clearTimeout(t);
+			controller.abort();
+			cleanup?.();
+		};
+	}, deps ?? []);
+};
+//#endregion
+//#region src/useAtomState.ts
+/**
+* Wraps a writable atom together with its current value and setter.
+* The atom is created once on first render; `initialValue` is only used to seed it.
+*/
+var useAtomState = (initialValue) => {
+	const [atom] = useState(() => Atom.make(initialValue));
+	const value = useAtomValue(atom);
+	const set = useAtomSet(atom);
+	return useMemo(() => ({
+		atom,
+		value,
+		set
+	}), [
+		atom,
+		value,
+		set
+	]);
+};
+//#endregion
+//#region src/useAsyncState.ts
+/**
+* NOTE: Use with care and when necessary to be able to cancel an async operation when unmounting.
+*/
+var useAsyncState = (cb, deps = []) => {
+	const [value, setValue] = useState();
+	useEffect(() => {
+		let disposed = false;
+		const t = setTimeout(async () => {
+			const data = await cb();
+			if (!disposed) setValue(data);
+		});
+		return () => {
+			disposed = true;
+			clearTimeout(t);
+		};
+	}, deps);
+	return [value, setValue];
+};
+//#endregion
+//#region src/useDynamicRef.ts
+/**
+* Like `useState` but with an additional dynamic value.
+*/
+var useStateWithRef = (valueProp) => {
+	const [value, setValue] = useState(valueProp);
+	const valueRef = useRef(valueProp);
+	return [
+		value,
+		useCallback((value) => {
+			if (typeof value === "function") setValue((current) => {
+				valueRef.current = value(current);
+				return valueRef.current;
+			});
+			else {
+				valueRef.current = value;
+				setValue(value);
+			}
+		}, []),
+		valueRef
+	];
+};
+/**
+* Ref that is updated by a dependency.
+*/
+var useDynamicRef = (value) => {
+	const valueRef = useRef(value);
+	useEffect(() => {
+		valueRef.current = value;
+	}, [value]);
+	return valueRef;
+};
+//#endregion
+//#region src/useControlledState.ts
+/**
+* A stateful hook with a controlled value.
+* NOTE: Consider using Radix's `useControllableState`.
+*/
+var useControlledState = (valueProp, onChange) => {
+	const [value, setControlledValue] = useState(valueProp);
+	useEffect(() => {
+		setControlledValue(valueProp);
+	}, [valueProp]);
+	const onChangeRef = useRef(onChange);
+	const valueRef = useDynamicRef(valueProp);
+	return [value, useCallback((nextValue) => {
+		const value = isFunction$1(nextValue) ? nextValue(valueRef.current) : nextValue;
+		setControlledValue(value);
+		onChangeRef.current?.(value);
+	}, [valueRef, onChangeRef])];
+};
+function isFunction$1(value) {
+	return typeof value === "function";
+}
+//#endregion
+//#region src/useDebugDeps.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-primitives/react-hooks/src/useDebugDeps.ts";
+/**
+* Util to log deps that have changed.
+*/
+var useDebugDeps = (deps = [], label = "useDebugDeps", active = true) => {
+	const lastDeps = useRef([]);
+	useEffect(() => {
+		if (!active) return;
+		const diff = {};
+		for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) if (lastDeps.current[i] !== deps[i] || i > lastDeps.current.length) diff[i] = {
+			previous: lastDeps.current[i],
+			current: deps[i]
+		};
+		if (Object.keys(diff).length > 0) log.warn(`Updated: ${label} [${lastDeps.current.length}/${deps.length}]`, diff, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 30,
+			S: void 0
+		});
+		lastDeps.current = deps;
+	}, [...deps, active]);
+};
+//#endregion
+//#region src/useDefaultValue.ts
+/**
+* A custom React hook that provides a stable default value for a potentially undefined reactive value.
+* The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,
+* ensuring stability across all re-renders, even if the defaultValue prop changes.
+*
+* Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.
+*
+* @param reactiveValue - The value that may change over time.
+* @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.
+* @returns - The reactiveValue if it's defined, otherwise the defaultValue.
+*/
+var useDefaultValue = (reactiveValue, getDefaultValue) => {
+	const stableDefaultValue = useMemo(getDefaultValue, []);
+	const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
+	useEffect(() => {
+		setValue(reactiveValue ?? stableDefaultValue);
+	}, [reactiveValue, stableDefaultValue]);
+	return value;
+};
+//#endregion
+//#region src/useDefaults.ts
+/**
+* Returns a memo-ized deep-merged object of the default and value.
+* If value is undefined or null, then returns the default.
+*/
+var useDefaults = (value, defaults) => {
+	return useMemo(() => defaultsDeep({}, defaults, value), [value, defaults]);
+};
+//#endregion
+//#region src/useFileDownload.ts
+/**
+* File download anchor.
+*
+* ```
+* const download = useDownload();
+* const handleDownload = (data: string) => {
+*   download(new Blob([data], { type: 'text/plain' }), 'test.txt');
+* };
+* ```
+*/
+var useFileDownload = () => {
+	return 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();
+	}, []);
+};
+//#endregion
+//#region src/useForwardedRef.ts
+/**
+* Combines a possibly undefined forwarded ref with a locally defined ref.
+* Returns a stable ref object that synchronizes with the forwarded ref.
+*
+* Best practice: This hook creates a stable local ref and synchronizes it with the forwarded ref.
+* The returned ref object is stable across renders, preventing infinite loops caused by ref identity changes.
+*
+* NOTE: This pattern doesn't update refs once they are set. If this is required, use `useMergeRefs`.
+*/
+var useForwardedRef = (forwardedRef) => {
+	const localRef = useRef(null);
+	useEffect(() => {
+		setRef(forwardedRef, localRef.current);
+	}, [forwardedRef]);
+	return localRef;
+};
+/**
+* Sets a value on a React ref, handling both callback refs and ref objects.
+* Returns a cleanup function if the ref is a callback ref.
+*/
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Merges multiple refs into a single ref callback.
+* Returns a ref callback that synchronizes all provided refs and handles cleanup.
+*/
+var mergeRefs = (refs) => {
+	return (value) => {
+		const cleanups = [];
+		for (const ref of refs) {
+			const cleanup = setRef(ref, value);
+			cleanups.push(typeof cleanup === "function" ? cleanup : () => setRef(ref, null));
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	};
+};
+/**
+* Hook that merges multiple refs into a single stable ref callback.
+* The returned ref is memoized and only changes when the refs array changes.
+*/
+var useMergeRefs = (refs) => {
+	return useMemo(() => mergeRefs(refs), [...refs]);
+};
+//#endregion
+//#region src/useId.ts
+var prng = new alea("@dxos/react-hooks");
+var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
+var useId = (namespace, propsId, opts) => {
+	return useMemo(() => makeId(namespace, propsId, opts), [propsId]);
+};
+var makeId = (namespace, propsId, opts) => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;
+//#endregion
+//#region src/useIsFocused.ts
+var useIsFocused = (inputRef) => {
+	const [isFocused, setIsFocused] = useState(void 0);
+	const isFocusedRef = useRef(isFocused);
+	isFocusedRef.current = isFocused;
+	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;
+};
+//#endregion
+//#region src/useMediaQuery.ts
+var breakpointMediaQueries = {
+	"sm": "(min-width: 640px)",
+	"md": "(min-width: 768px)",
+	"lg": "(min-width: 1024px)",
+	"xl": "(min-width: 1280px)",
+	"2xl": "(min-width: 1536px)"
+};
+/**
+* React hook that tracks state of a CSS media query.
+*
+* @param query the media query to match, or a recognized breakpoint token
+* @param options the media query options { fallback, ssr }
+*
+* @see Docs https://chakra-ui.com/docs/hooks/use-media-query
+*/
+var useMediaQuery = (query, options = {}) => {
+	const { ssr = false, fallback } = options;
+	const queries = (Array.isArray(query) ? query : [query]).map((query) => query in breakpointMediaQueries ? breakpointMediaQueries[query] : query);
+	let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];
+	fallbackValues = fallbackValues.filter((v) => v != null);
+	const [value, setValue] = useState(() => {
+		return queries.map((query, index) => ({
+			media: query,
+			matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches
+		}));
+	});
+	useEffect(() => {
+		setValue(queries.map((query) => ({
+			media: query,
+			matches: document.defaultView?.matchMedia(query).matches
+		})));
+		const mql = queries.map((query) => document.defaultView?.matchMedia(query));
+		const handler = (evt) => {
+			setValue((prev) => {
+				return prev.slice().map((item) => {
+					if (item.media === evt.media) return {
+						...item,
+						matches: evt.matches
+					};
+					return item;
+				});
+			});
+		};
+		mql.forEach((mql) => {
+			if (typeof mql?.addListener === "function") mql?.addListener(handler);
+			else mql?.addEventListener("change", handler);
+		});
+		return () => {
+			mql.forEach((mql) => {
+				if (typeof mql?.removeListener === "function") mql?.removeListener(handler);
+				else mql?.removeEventListener("change", handler);
+			});
+		};
+	}, [document.defaultView]);
+	return value.map((item) => !!item.matches);
+};
+//#endregion
+//#region src/useMulticastObservable.ts
+/**
+* Subscribe to a MulticastObservable and return the latest value.
+* @param observable the observable to subscribe to. Will resubscribe if the observable changes.
+*/
+var useMulticastObservable = (observable) => {
+	return useSyncExternalStore(useMemo(() => (listener) => {
+		const subscription = observable.subscribe(listener);
+		return () => subscription.unsubscribe();
+	}, [observable]), () => observable.get());
+};
+//#endregion
+//#region src/useRefCallback.ts
+/**
+* Custom React Hook that creates a ref callback and a state variable.
+* The ref callback sets the state variable when the ref changes.
+*
+* @returns An object containing the ref callback and the current value of the ref.
+*/
+var useRefCallback = () => {
+	const [value, setValue] = useState(null);
+	return {
+		refCallback: (value) => setValue(value),
+		value
+	};
+};
+//#endregion
+//#region src/useViewportResize.ts
+var useViewportResize = (cb, deps = [], delay = 800) => {
+	const { handler: debouncedHandler, cancel } = useMemo(() => {
+		let timeout;
+		return {
+			handler: (event) => {
+				if (timeout !== void 0) clearTimeout(timeout);
+				timeout = setTimeout(() => {
+					timeout = void 0;
+					if (typeof document === "undefined" || typeof getComputedStyle === "undefined") return;
+					cb(event);
+				}, delay);
+			},
+			cancel: () => {
+				if (timeout !== void 0) {
+					clearTimeout(timeout);
+					timeout = void 0;
+				}
+			}
+		};
+	}, [cb, delay]);
+	return useLayoutEffect(() => {
+		window.visualViewport?.addEventListener("resize", debouncedHandler);
+		debouncedHandler();
+		return () => {
+			window.visualViewport?.removeEventListener("resize", debouncedHandler);
+			cancel();
+		};
+	}, [
+		debouncedHandler,
+		cancel,
+		...deps
+	]);
+};
+//#endregion
+//#region src/useTimeout.ts
+var useTimeout = (callback, delay = 0, deps = []) => {
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		if (delay == null) return;
+		const t = setTimeout(() => callbackRef.current?.(), delay);
+		return () => clearTimeout(t);
+	}, [delay, ...deps]);
+};
+var useInterval = (callback, delay = 0, deps = []) => {
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		if (delay == null) return;
+		const i = setInterval(async () => {
+			if (await callbackRef.current?.() === false) clearInterval(i);
+		}, delay);
+		return () => clearInterval(i);
+	}, [delay, ...deps]);
+};
+//#endregion
+//#region src/useTransitions.ts
+var isFunction = (functionToCheck) => {
+	return functionToCheck instanceof Function;
+};
+/**
+* This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.
+*
+* @param currentValue - The value that is being monitored for transitions.
+* @param fromValue - The *from* value or a predicate function that determines the start of the transition.
+* @param toValue - The *to* value or a predicate function that determines the end of the transition.
+* @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.
+*
+* @internal Consider using `useOnTransition` for handling transitions instead of this hook.
+*/
+var useDidTransition = (currentValue, fromValue, toValue) => {
+	const [hasTransitioned, setHasTransitioned] = useState(false);
+	const previousValue = useRef(currentValue);
+	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;
+};
+/**
+* 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.
+*/
+var useOnTransition = (currentValue, fromValue, toValue, callback) => {
+	const dirty = useRef(false);
+	const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
+	useEffect(() => {
+		dirty.current = false;
+	}, [currentValue, dirty]);
+	useEffect(() => {
+		if (hasTransitioned && !dirty.current) {
+			callback();
+			dirty.current = true;
+		}
+	}, [
+		hasTransitioned,
+		dirty,
+		callback
+	]);
+};
+//#endregion
+export { makeId, mergeRefs, randomString, setRef, useAsyncEffect, useAsyncState, useAtomState, useComposedRefs, useControlledState, useDebugDeps, useDefaultValue, useDefaults, useDidTransition, useDynamicRef, useFileDownload, useForwardedRef, useId, useInterval, useIsFocused, useMediaQuery, useMergeRefs, useMulticastObservable, useOnTransition, useRefCallback, useScroller, useSize, useStateWithRef, useTimeout, useViewportResize };
+
+//# sourceMappingURL=index.mjs.map

package/dist/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/useAsyncEffect.ts","../../src/useAtomState.ts","../../src/useAsyncState.ts","../../src/useDynamicRef.ts","../../src/useControlledState.ts","../../src/useDebugDeps.ts","../../src/useDefaultValue.ts","../../src/useDefaults.ts","../../src/useFileDownload.ts","../../src/useForwardedRef.ts","../../src/useId.ts","../../src/useIsFocused.ts","../../src/useMediaQuery.ts","../../src/useMulticastObservable.ts","../../src/useRefCallback.ts","../../src/useViewportResize.ts","../../src/useTimeout.ts","../../src/useTransitions.ts"],"sourcesContent":["//\n// Copyright 2022 DXOS.org\n//\n\nimport { type DependencyList, type EffectCallback, useEffect } from 'react';\n\n/**\n * Async version of useEffect.\n * The `AbortController` can be used to detect if the component has been unmounted and\n * can be used to propagate abort signals to downstream async operations (e.g., `fetch`).\n */\nexport const useAsyncEffect = (\n  cb: (controller: AbortController) => Promise<EffectCallback | void>,\n  deps?: DependencyList,\n) => {\n  useEffect(() => {\n    const controller = new AbortController();\n    let cleanup: EffectCallback | void;\n    // NOTE: Timeout enables us to immediately cancel. if the component is unmounted.\n    const t = setTimeout(async () => {\n      if (!controller.signal.aborted) {\n        cleanup = await cb(controller);\n      }\n    });\n\n    return () => {\n      clearTimeout(t);\n      controller.abort();\n      cleanup?.();\n    };\n  }, deps ?? []);\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { Atom, useAtomSet, useAtomValue } from '@effect-atom/atom-react';\nimport { useMemo, useState } from 'react';\n\nexport type AtomState<T> = {\n  atom: Atom.Writable<T>;\n  value: T;\n  set: (value: T | ((value: T) => T)) => void;\n};\n\n/**\n * Wraps a writable atom together with its current value and setter.\n * The atom is created once on first render; `initialValue` is only used to seed it.\n */\nexport const useAtomState = <T>(initialValue: T): AtomState<T> => {\n  const [atom] = useState(() => Atom.make(initialValue));\n  const value = useAtomValue(atom);\n  const set = useAtomSet(atom);\n  return useMemo(() => ({ atom, value, set }), [atom, value, set]);\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * NOTE: Use with care and when necessary to be able to cancel an async operation when unmounting.\n */\nexport const useAsyncState = <T>(\n  cb: () => Promise<T | undefined>,\n  deps: any[] = [],\n): [T | undefined, Dispatch<SetStateAction<T | undefined>>] => {\n  const [value, setValue] = useState<T | undefined>();\n  useEffect(() => {\n    let disposed = false;\n    const t = setTimeout(async () => {\n      const data = await cb();\n      if (!disposed) {\n        setValue(data);\n      }\n    });\n\n    return () => {\n      disposed = true;\n      clearTimeout(t);\n    };\n  }, deps);\n\n  return [value, setValue];\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Dispatch, type RefObject, type SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Like `useState` but with an additional dynamic value.\n */\nexport const useStateWithRef = <T>(valueProp: T): [T, Dispatch<SetStateAction<T>>, RefObject<T>] => {\n  const [value, setValue] = useState<T>(valueProp);\n  const valueRef = useRef<T>(valueProp);\n  const setter = useCallback<Dispatch<SetStateAction<T>>>((value) => {\n    if (typeof value === 'function') {\n      setValue((current) => {\n        valueRef.current = (value as Function)(current);\n        return valueRef.current;\n      });\n    } else {\n      valueRef.current = value;\n      setValue(value);\n    }\n  }, []);\n\n  return [value, setter, valueRef];\n};\n\n/**\n * Ref that is updated by a dependency.\n */\nexport const useDynamicRef = <T>(value: T): RefObject<T> => {\n  const valueRef = useRef<T>(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  return valueRef;\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useDynamicRef } from './useDynamicRef';\n\n/**\n * A stateful hook with a controlled value.\n * NOTE: Consider using Radix's `useControllableState`.\n */\nexport const useControlledState = <T>(\n  valueProp: T,\n  onChange?: (value: T) => void,\n): [T, Dispatch<SetStateAction<T>>] => {\n  const [value, setControlledValue] = useState(valueProp);\n  useEffect(() => {\n    setControlledValue(valueProp);\n  }, [valueProp]);\n\n  const onChangeRef = useRef(onChange);\n  const valueRef = useDynamicRef(valueProp);\n  const setValue = useCallback<Dispatch<SetStateAction<T>>>(\n    (nextValue) => {\n      const value = isFunction(nextValue) ? nextValue(valueRef.current) : nextValue;\n      setControlledValue(value);\n      onChangeRef.current?.(value);\n    },\n    [valueRef, onChangeRef],\n  );\n\n  return [value, setValue];\n};\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n  return typeof value === 'function';\n}\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Util to log deps that have changed.\n */\nexport const useDebugDeps = (deps: DependencyList = [], label = 'useDebugDeps', active = true) => {\n  const lastDeps = useRef<DependencyList>([]);\n  useEffect(() => {\n    if (!active) {\n      return;\n    }\n\n    const diff: Record<number, { previous: any; current: any }> = {};\n    for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n      if (lastDeps.current[i] !== deps[i] || i > lastDeps.current.length) {\n        diff[i] = {\n          previous: lastDeps.current[i],\n          current: deps[i],\n        };\n      }\n    }\n\n    if (Object.keys(diff).length > 0) {\n      log.warn(`Updated: ${label} [${lastDeps.current.length}/${deps.length}]`, diff);\n    }\n\n    lastDeps.current = deps;\n  }, [...deps, active]);\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useMemo, useState } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, getDefaultValue: () => T): T => {\n  // Memoize defaultValue with an empty dependency array.\n  // This ensures that the defaultValue instance remains stable across all re-renders,\n  // regardless of whether the defaultValue changes.\n  const stableDefaultValue = useMemo(getDefaultValue, []);\n  const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n  useEffect(() => {\n    setValue(reactiveValue ?? stableDefaultValue);\n  }, [reactiveValue, stableDefaultValue]);\n\n  return value;\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport { useMemo } from 'react';\n\n/**\n * Returns a memo-ized deep-merged object of the default and value.\n * If value is undefined or null, then returns the default.\n */\nexport const useDefaults = <T>(value: T | undefined | null, defaults: T): T => {\n  return useMemo(() => defaultsDeep({}, defaults, value), [value, defaults]);\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n *   download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n  return useMemo(\n    () => (data: Blob | string, filename: string) => {\n      const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n      const element = document.createElement('a');\n      element.setAttribute('href', url);\n      element.setAttribute('download', filename);\n      element.setAttribute('target', 'download');\n      element.click();\n    },\n    [],\n  );\n};\n","//\n// Copyright 2022 DXOS.org\n//\n\nimport { type ForwardedRef, type Ref, type RefCallback, useEffect, useMemo, useRef } from 'react';\n\n/**\n * Combines a possibly undefined forwarded ref with a locally defined ref.\n * Returns a stable ref object that synchronizes with the forwarded ref.\n *\n * Best practice: This hook creates a stable local ref and synchronizes it with the forwarded ref.\n * The returned ref object is stable across renders, preventing infinite loops caused by ref identity changes.\n *\n * NOTE: This pattern doesn't update refs once they are set. If this is required, use `useMergeRefs`.\n */\nexport const useForwardedRef = <T>(forwardedRef: ForwardedRef<T>) => {\n  const localRef = useRef<T>(null as T);\n  useEffect(() => {\n    setRef(forwardedRef, localRef.current);\n  }, [forwardedRef]);\n\n  return localRef;\n};\n\n/**\n * Sets a value on a React ref, handling both callback refs and ref objects.\n * Returns a cleanup function if the ref is a callback ref.\n */\nexport function setRef<T>(ref: Ref<T> | undefined | null, value: T | null): ReturnType<RefCallback<T>> {\n  if (typeof ref === 'function') {\n    return ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n}\n\n/**\n * Merges multiple refs into a single ref callback.\n * Returns a ref callback that synchronizes all provided refs and handles cleanup.\n */\nexport const mergeRefs = <T>(refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return (value: T | null) => {\n    const cleanups: (() => void)[] = [];\n    for (const ref of refs) {\n      const cleanup = setRef(ref, value);\n      cleanups.push(typeof cleanup === 'function' ? cleanup : () => setRef(ref, null));\n    }\n\n    return () => {\n      for (const cleanup of cleanups) {\n        cleanup();\n      }\n    };\n  };\n};\n\n/**\n * Hook that merges multiple refs into a single stable ref callback.\n * The returned ref is memoized and only changes when the refs array changes.\n */\nexport const useMergeRefs = <T>(refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return useMemo(() => mergeRefs(refs), [...refs]);\n};\n","//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n  new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n  prng()\n    .toString(16)\n    .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) => {\n  return useMemo(() => makeId(namespace, propsId, opts), [propsId]);\n};\n\nexport const makeId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n  propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;\n","//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-w-focused\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement | null>) => {\n  const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n  const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n  isFocusedRef.current = isFocused;\n\n  useEffect(() => {\n    const input = inputRef.current;\n    if (!input) {\n      return;\n    }\n\n    const onFocus = () => setIsFocused(true);\n    const onBlur = () => setIsFocused(false);\n    input.addEventListener('focus', onFocus);\n    input.addEventListener('blur', onBlur);\n\n    if (isFocusedRef.current === undefined) {\n      setIsFocused(document.activeElement === input);\n    }\n\n    return () => {\n      input.removeEventListener('focus', onFocus);\n      input.removeEventListener('blur', onBlur);\n    };\n  }, [inputRef, setIsFocused]);\n\n  return isFocused;\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config.\nconst breakpointMediaQueries: Record<string, string> = {\n  'sm': '(min-width: 640px)',\n  'md': '(min-width: 768px)',\n  'lg': '(min-width: 1024px)',\n  'xl': '(min-width: 1280px)',\n  '2xl': '(min-width: 1536px)',\n};\n\nexport type UseMediaQueryOptions = {\n  fallback?: boolean | boolean[];\n  ssr?: boolean;\n};\n\n/**\n * React hook that tracks state of a CSS media query.\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n  const { ssr = false, fallback } = options;\n\n  const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n    query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n  );\n\n  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n  fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n  const [value, setValue] = useState(() => {\n    return queries.map((query, index) => ({\n      media: query,\n      matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n    }));\n  });\n\n  useEffect(() => {\n    setValue(\n      queries.map((query) => ({\n        media: query,\n        matches: document.defaultView?.matchMedia(query).matches,\n      })),\n    );\n\n    const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n    const handler = (evt: MediaQueryListEvent) => {\n      setValue((prev) => {\n        return prev.slice().map((item) => {\n          if (item.media === evt.media) {\n            return { ...item, matches: evt.matches };\n          }\n          return item;\n        });\n      });\n    };\n\n    mql.forEach((mql) => {\n      if (typeof mql?.addListener === 'function') {\n        mql?.addListener(handler);\n      } else {\n        mql?.addEventListener('change', handler);\n      }\n    });\n\n    return () => {\n      mql.forEach((mql) => {\n        if (typeof mql?.removeListener === 'function') {\n          mql?.removeListener(handler);\n        } else {\n          mql?.removeEventListener('change', handler);\n        }\n      });\n    };\n  }, [document.defaultView]);\n\n  return value.map((item) => !!item.matches);\n};\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo, useSyncExternalStore } from 'react';\n\nimport { type MulticastObservable } from '@dxos/async';\n\n/**\n * Subscribe to a MulticastObservable and return the latest value.\n * @param observable the observable to subscribe to. Will resubscribe if the observable changes.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useMulticastObservable = <T>(observable: MulticastObservable<T>): T => {\n  // Make sure useSyncExternalStore is stable in respect to the observable.\n  const subscribeFn = useMemo(\n    () => (listener: () => void) => {\n      const subscription = observable.subscribe(listener);\n      return () => subscription.unsubscribe();\n    },\n    [observable],\n  );\n\n  // useSyncExternalStore will resubscribe to the observable and update the value if the subscribeFn changes.\n  return useSyncExternalStore(subscribeFn, () => observable.get());\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n  const [value, setValue] = useState<T | null>(null);\n  return { refCallback: (value: T) => setValue(value), value };\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { useLayoutEffect, useMemo } from 'react';\n\nexport const useViewportResize = (\n  cb: (event?: Event) => void,\n  deps: Parameters<typeof useLayoutEffect>[1] = [],\n  delay: number = 800,\n) => {\n  // The cleanup must cancel the pending debounce timeout. Otherwise, if the\n  // component unmounts during the `delay` window (common in jsdom/happy-dom\n  // test teardown), the callback fires against a torn-down DOM and surfaces\n  // as `ReferenceError: getComputedStyle is not defined`.\n  const { handler: debouncedHandler, cancel } = useMemo(() => {\n    let timeout: ReturnType<typeof setTimeout> | undefined;\n    return {\n      handler: (event?: Event) => {\n        if (timeout !== undefined) {\n          clearTimeout(timeout);\n        }\n        timeout = setTimeout(() => {\n          timeout = undefined;\n          // The debounced callback can outlive the DOM realm: in jsdom/happy-dom test runs the\n          // timer survives environment teardown (e.g. story roots that are never unmounted), and\n          // callbacks here read DOM globals such as `getComputedStyle`. Skip dispatch once the\n          // realm is gone.\n          if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {\n            return;\n          }\n          cb(event);\n        }, delay);\n      },\n      cancel: () => {\n        if (timeout !== undefined) {\n          clearTimeout(timeout);\n          timeout = undefined;\n        }\n      },\n    };\n  }, [cb, delay]);\n\n  return useLayoutEffect(() => {\n    window.visualViewport?.addEventListener('resize', debouncedHandler);\n    debouncedHandler();\n    return () => {\n      window.visualViewport?.removeEventListener('resize', debouncedHandler);\n      cancel();\n    };\n  }, [debouncedHandler, cancel, ...deps]);\n};\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useTimeout = (callback?: () => Promise<void>, delay = 0, deps: any[] = []) => {\n  const callbackRef = useRef(callback);\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    if (delay == null) {\n      return;\n    }\n\n    const t = setTimeout(() => callbackRef.current?.(), delay);\n    return () => clearTimeout(t);\n  }, [delay, ...deps]);\n};\n\nexport const useInterval = (\n  callback?: (() => Promise<void | boolean>) | (() => void | boolean),\n  delay = 0,\n  deps: any[] = [],\n) => {\n  const callbackRef = useRef(callback);\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    if (delay == null) {\n      return;\n    }\n\n    const i = setInterval(async () => {\n      const result = await callbackRef.current?.();\n      if (result === false) {\n        clearInterval(i);\n      }\n    }, delay);\n    return () => clearInterval(i);\n  }, [delay, ...deps]);\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n  return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n  currentValue: T,\n  fromValue: T | ((value: T) => boolean),\n  toValue: T | ((value: T) => boolean),\n) => {\n  const [hasTransitioned, setHasTransitioned] = useState(false);\n  const previousValue = useRef<T>(currentValue);\n\n  useEffect(() => {\n    const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n    const fromValueValid = isFunction<T>(fromValue)\n      ? fromValue(previousValue.current)\n      : fromValue === previousValue.current;\n\n    if (fromValueValid && toValueValid && !hasTransitioned) {\n      setHasTransitioned(true);\n    } else if ((!fromValueValid || !toValueValid) && hasTransitioned) {\n      setHasTransitioned(false);\n    }\n\n    previousValue.current = currentValue;\n  }, [currentValue, fromValue, toValue, hasTransitioned]);\n\n  return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed.\n */\n// TODO(wittjosiah): Seems overwrought.\nexport const useOnTransition = <T>(\n  currentValue: T,\n  fromValue: T | ((value: T) => boolean),\n  toValue: T | ((value: T) => boolean),\n  callback: () => void,\n) => {\n  const dirty = useRef(false);\n  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n  useEffect(() => {\n    dirty.current = false;\n  }, [currentValue, dirty]);\n\n  useEffect(() => {\n    if (hasTransitioned && !dirty.current) {\n      callback();\n      dirty.current = true;\n    }\n  }, [hasTransitioned, dirty, callback]);\n};\n"],"mappings":"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"}