@dxos/react-hooks 0.7.4 → 0.7.5-feature-compute.4d9d99a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +14 -1
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +20 -8
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +14 -1
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useAsyncState.d.ts.map +1 -1
- package/dist/types/src/useForwardedRef.d.ts +3 -0
- package/dist/types/src/useForwardedRef.d.ts.map +1 -1
- package/dist/types/src/useResize.d.ts +3 -0
- package/dist/types/src/useResize.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/package.json +3 -3
- package/src/index.ts +1 -0
- package/src/useAsyncState.ts +1 -0
- package/src/useForwardedRef.ts +3 -1
- package/src/useResize.ts +16 -0
|
@@ -260,6 +260,18 @@ var useRefCallback = () => {
|
|
|
260
260
|
};
|
|
261
261
|
};
|
|
262
262
|
|
|
263
|
+
// packages/ui/primitives/react-hooks/src/useResize.ts
|
|
264
|
+
import { useLayoutEffect } from "react";
|
|
265
|
+
var useResize = (handler, deps = [
|
|
266
|
+
handler
|
|
267
|
+
]) => {
|
|
268
|
+
return useLayoutEffect(() => {
|
|
269
|
+
window.visualViewport?.addEventListener("resize", handler);
|
|
270
|
+
handler();
|
|
271
|
+
return () => window.visualViewport?.removeEventListener("resize", handler);
|
|
272
|
+
}, deps);
|
|
273
|
+
};
|
|
274
|
+
|
|
263
275
|
// packages/ui/primitives/react-hooks/src/useTransitions.ts
|
|
264
276
|
import { useRef as useRef5, useEffect as useEffect10, useState as useState7 } from "react";
|
|
265
277
|
var isFunction = (functionToCheck) => {
|
|
@@ -321,6 +333,7 @@ export {
|
|
|
321
333
|
useMediaQuery,
|
|
322
334
|
useMulticastObservable,
|
|
323
335
|
useOnTransition,
|
|
324
|
-
useRefCallback
|
|
336
|
+
useRefCallback,
|
|
337
|
+
useResize
|
|
325
338
|
};
|
|
326
339
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledValue.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useTransitions.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n */\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\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 const t = setTimeout(async () => {\n const data = await cb();\n setValue(data);\n });\n\n return () => clearTimeout(t);\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(\n controlledValue: TValue,\n ...deps: any[]\n): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } 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\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\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, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\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 useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\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-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\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\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\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\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 = true, 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 2024 DXOS.org\n//\n\nimport { useRef, useEffect, 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. */\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"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,iBAAiB;AAE1B,SAASC,WAAW;AA8Bb,IAAMC,iBAAiB,CAC5BC,UACAC,YACAC,SAAAA;AAEA,QAAM,CAACC,kBAAkBC,UAAAA,IACvB,OAAOH,eAAe,aAAa;IAACA;IAAYC;MAAQ;IAACG;IAAWJ;;AAEtEK,YAAU,MAAA;AACR,QAAIC,UAAU;AACd,QAAIC;AACJ,UAAMC,cAAcT,SAAS,MAAMO,OAAAA;AAEnC,SAAKG,QAAQC,QAAQF,WAAAA,EAClBG,KAAK,CAACC,WAAAA;AACLL,cAAQK;IACV,CAAA,EACCC,MAAMC,IAAID,KAAK;AAElB,WAAO,MAAA;AACLP,gBAAU;AACVJ,yBAAmBK,KAAAA;IACrB;EACF,GAAGJ,UAAAA;AACL;;;ACxDA,SAA6CY,aAAAA,YAAWC,gBAAgB;AAKjE,IAAMC,gBAAgB,CAC3BC,IACAC,OAAc,CAAA,MAAE;AAEhB,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAAA;AAC1BC,EAAAA,WAAU,MAAA;AACR,UAAMC,IAAIC,WAAW,YAAA;AACnB,YAAMC,OAAO,MAAMR,GAAAA;
|
|
6
|
-
"names": ["useEffect", "log", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "catch", "log", "useEffect", "useState", "useAsyncState", "cb", "deps", "value", "setValue", "useState", "useEffect", "t", "setTimeout", "data", "clearTimeout", "useEffect", "useState", "useControlledValue", "controlledValue", "deps", "value", "setValue", "useState", "useEffect", "undefined", "useEffect", "useRef", "useDebugReactDeps", "deps", "lastDeps", "useRef", "useEffect", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "log", "previous", "groupEnd", "useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useEffect", "useRef", "useDynamicRef", "value", "ref", "useRef", "useEffect", "current", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useMemo", "useSyncExternalStore", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "useOnTransition", "callback", "dirty"]
|
|
3
|
+
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledValue.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useResize.ts", "../../../src/useTransitions.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n */\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\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 const t = setTimeout(async () => {\n const data = await cb();\n // TODO(dmaretskyi): Potential race condition here.\n setValue(data);\n });\n\n return () => clearTimeout(t);\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(\n controlledValue: TValue,\n ...deps: any[]\n): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } 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\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\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, useRef, useEffect } from 'react';\n\n/**\n * Combines a possibly undefined forwarded ref with a locally defined ref.\n */\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\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 useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\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-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\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\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\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\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 = true, 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 2023 DXOS.org\n//\n\nimport { useLayoutEffect } from 'react';\n\nexport const useResize = (\n handler: (event?: Event) => void,\n deps: Parameters<typeof useLayoutEffect>[1] = [handler],\n) => {\n return useLayoutEffect(() => {\n window.visualViewport?.addEventListener('resize', handler);\n handler();\n return () => window.visualViewport?.removeEventListener('resize', handler);\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, 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. */\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"],
|
|
5
|
+
"mappings": ";AAIA,SAASA,iBAAiB;AAE1B,SAASC,WAAW;AA8Bb,IAAMC,iBAAiB,CAC5BC,UACAC,YACAC,SAAAA;AAEA,QAAM,CAACC,kBAAkBC,UAAAA,IACvB,OAAOH,eAAe,aAAa;IAACA;IAAYC;MAAQ;IAACG;IAAWJ;;AAEtEK,YAAU,MAAA;AACR,QAAIC,UAAU;AACd,QAAIC;AACJ,UAAMC,cAAcT,SAAS,MAAMO,OAAAA;AAEnC,SAAKG,QAAQC,QAAQF,WAAAA,EAClBG,KAAK,CAACC,WAAAA;AACLL,cAAQK;IACV,CAAA,EACCC,MAAMC,IAAID,KAAK;AAElB,WAAO,MAAA;AACLP,gBAAU;AACVJ,yBAAmBK,KAAAA;IACrB;EACF,GAAGJ,UAAAA;AACL;;;ACxDA,SAA6CY,aAAAA,YAAWC,gBAAgB;AAKjE,IAAMC,gBAAgB,CAC3BC,IACAC,OAAc,CAAA,MAAE;AAEhB,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAAA;AAC1BC,EAAAA,WAAU,MAAA;AACR,UAAMC,IAAIC,WAAW,YAAA;AACnB,YAAMC,OAAO,MAAMR,GAAAA;AAEnBG,eAASK,IAAAA;IACX,CAAA;AAEA,WAAO,MAAMC,aAAaH,CAAAA;EAC5B,GAAGL,IAAAA;AAEH,SAAO;IAACC;IAAOC;;AACjB;;;ACrBA,SAA6CO,aAAAA,YAAWC,YAAAA,iBAAgB;AAKjE,IAAMC,qBAAqB,CAChCC,oBACGC,SAAAA;AAEH,QAAM,CAACC,OAAOC,QAAAA,IAAYC,UAAiBJ,eAAAA;AAC3CK,EAAAA,WAAU,MAAA;AACR,QAAIL,oBAAoBM,QAAW;AACjCH,eAASH,eAAAA;IACX;EACF,GAAG;IAACA;OAAoBC;GAAK;AAE7B,SAAO;IAACC;IAAOC;;AACjB;;;ACfA,SAA8BI,aAAAA,YAAWC,cAAc;AAMhD,IAAMC,oBAAoB,CAACC,OAAuB,CAAA,MAAE;AACzD,QAAMC,WAAWC,OAAuB,CAAA,CAAE;AAC1CC,EAAAA,WAAU,MAAA;AACRC,YAAQC,MAAM,gBAAgB;MAAEC,KAAKL,SAASM,QAAQC;MAAQC,KAAKT,KAAKQ;IAAO,CAAA;AAC/E,aAASE,IAAI,GAAGA,IAAIC,KAAKC,IAAIX,SAASM,QAAQC,UAAU,GAAGR,KAAKQ,UAAU,CAAA,GAAIE,KAAK;AACjFN,cAAQS,IAAIH,GAAGT,SAASM,QAAQG,CAAAA,MAAOV,KAAKU,CAAAA,IAAK,SAAS,WAAW;QACnEI,UAAUb,SAASM,QAAQG,CAAAA;QAC3BH,SAASP,KAAKU,CAAAA;MAChB,CAAA;IACF;AAEAN,YAAQW,SAAQ;AAChBd,aAASM,UAAUP;EACrB,GAAGA,IAAAA;AACL;;;ACtBA,SAASgB,aAAAA,YAAWC,YAAAA,WAAUC,eAAe;AAatC,IAAMC,kBAAkB,CAAIC,eAAqCC,oBAAAA;AAItE,QAAMC,qBAAqBC,QAAQF,iBAAiB,CAAA,CAAE;AACtD,QAAM,CAACG,OAAOC,QAAAA,IAAYC,UAASN,iBAAiBE,kBAAAA;AAEpDK,EAAAA,WAAU,MAAA;AACRF,aAASL,iBAAiBE,kBAAAA;EAC5B,GAAG;IAACF;IAAeE;GAAmB;AAEtC,SAAOE;AACT;;;ACzBA,SAASI,aAAAA,YAAWC,UAAAA,eAAc;AAE3B,IAAMC,gBAAgB,CAAIC,UAAAA;AAC/B,QAAMC,MAAMC,QAAUF,KAAAA;AACtBG,EAAAA,WAAU,MAAA;AACRF,QAAIG,UAAUJ;EAChB,GAAG;IAACA;GAAM;AAEV,SAAOC;AACT;;;ACTA,SAASI,WAAAA,gBAAe;AAYjB,IAAMC,kBAAkB,MAAA;AAC7B,SAAOC,SACL,MAAM,CAACC,MAAqBC,aAAAA;AAC1B,UAAMC,MAAM,OAAOF,SAAS,WAAWA,OAAOG,IAAIC,gBAAgBJ,IAAAA;AAClE,UAAMK,UAAUC,SAASC,cAAc,GAAA;AACvCF,YAAQG,aAAa,QAAQN,GAAAA;AAC7BG,YAAQG,aAAa,YAAYP,QAAAA;AACjCI,YAAQG,aAAa,UAAU,UAAA;AAC/BH,YAAQI,MAAK;EACf,GACA,CAAA,CAAE;AAEN;;;ACxBA,SAA4BC,UAAAA,SAAQC,aAAAA,kBAAiB;AAK9C,IAAMC,kBAAkB,CAAIC,QAAAA;AACjC,QAAMC,WAAWC,QAAU,IAAA;AAC3BC,EAAAA,WAAU,MAAA;AACR,QAAI,CAACH,KAAK;AACR;IACF;AAEA,QAAI,OAAOA,QAAQ,YAAY;AAC7BA,UAAIC,SAASG,OAAO;IACtB,OAAO;AACLJ,UAAII,UAAUH,SAASG;IACzB;EACF,CAAA;AAEA,SAAOH;AACT;;;ACpBA,OAAOI,UAAU;AACjB,SAASC,WAAAA,gBAAe;AAMxB,IAAMC,OAAoBC;AAE1B,IAAMC,OAAO,IAAIF,KAAK,mBAAA;AAGf,IAAMG,eAAe,CAACC,IAAI,MAC/BF,KAAAA,EACGG,SAAS,EAAA,EACTC,MAAM,GAAGF,IAAI,CAAA;AAEX,IAAMG,QAAQ,CAACC,WAAmBC,SAAkBC,SACzDC,SAAQ,MAAMF,WAAW,GAAGD,SAAAA,IAAaL,aAAaO,MAAMN,KAAK,CAAA,CAAA,IAAM;EAACK;CAAQ;;;ACflF,SAASG,aAAAA,YAAWC,UAAAA,SAAQC,YAAAA,iBAAgC;AAErD,IAAMC,eAAe,CAACC,aAAAA;AAC3B,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,UAA8BC,MAAAA;AAChE,QAAMC,eAAeC,QAA4BL,SAAAA;AAEjDI,eAAaE,UAAUN;AAEvBO,EAAAA,WAAU,MAAA;AACR,UAAMC,QAAQT,SAASO;AACvB,QAAI,CAACE,OAAO;AACV;IACF;AAEA,UAAMC,UAAU,MAAMR,aAAa,IAAA;AACnC,UAAMS,SAAS,MAAMT,aAAa,KAAA;AAClCO,UAAMG,iBAAiB,SAASF,OAAAA;AAChCD,UAAMG,iBAAiB,QAAQD,MAAAA;AAE/B,QAAIN,aAAaE,YAAYH,QAAW;AACtCF,mBAAaW,SAASC,kBAAkBL,KAAAA;IAC1C;AAEA,WAAO,MAAA;AACLA,YAAMM,oBAAoB,SAASL,OAAAA;AACnCD,YAAMM,oBAAoB,QAAQJ,MAAAA;IACpC;EACF,GAAG;IAACX;IAAUE;GAAa;AAE3B,SAAOD;AACT;;;AC/BA,SAASe,aAAAA,YAAWC,YAAAA,iBAAgB;AAQpC,IAAMC,yBAAiD;EACrDC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJ,OAAO;AACT;AAUO,IAAMC,gBAAgB,CAACC,OAA0BC,UAAgC,CAAC,MAAC;AACxF,QAAM,EAAEC,MAAM,MAAMC,SAAQ,IAAKF;AAEjC,QAAMG,WAAWC,MAAMC,QAAQN,KAAAA,IAASA,QAAQ;IAACA;KAAQO,IAAI,CAACP,WAC5DA,UAASN,yBAAyBA,uBAAuBM,MAAAA,IAASA,MAAAA;AAGpE,MAAIQ,iBAAiBH,MAAMC,QAAQH,QAAAA,IAAYA,WAAW;IAACA;;AAC3DK,mBAAiBA,eAAeC,OAAO,CAACC,MAAMA,KAAK,IAAA;AAEnD,QAAM,CAACC,OAAOC,QAAAA,IAAYC,UAAS,MAAA;AACjC,WAAOT,QAAQG,IAAI,CAACP,QAAOc,WAAW;MACpCC,OAAOf;MACPgB,SAASd,MAAM,CAAC,CAACM,eAAeM,KAAAA,IAASG,SAASC,aAAaC,WAAWnB,MAAAA,EAAOgB;IACnF,EAAA;EACF,CAAA;AAEAI,EAAAA,WAAU,MAAA;AACRR,aACER,QAAQG,IAAI,CAACP,YAAW;MACtBe,OAAOf;MACPgB,SAASC,SAASC,aAAaC,WAAWnB,MAAAA,EAAOgB;IACnD,EAAA,CAAA;AAGF,UAAMK,MAAMjB,QAAQG,IAAI,CAACP,WAAUiB,SAASC,aAAaC,WAAWnB,MAAAA,CAAAA;AAEpE,UAAMsB,UAAU,CAACC,QAAAA;AACfX,eAAS,CAACY,SAAAA;AACR,eAAOA,KAAKC,MAAK,EAAGlB,IAAI,CAACmB,SAAAA;AACvB,cAAIA,KAAKX,UAAUQ,IAAIR,OAAO;AAC5B,mBAAO;cAAE,GAAGW;cAAMV,SAASO,IAAIP;YAAQ;UACzC;AACA,iBAAOU;QACT,CAAA;MACF,CAAA;IACF;AAEAL,QAAIM,QAAQ,CAACN,SAAAA;AACX,UAAI,OAAOA,MAAKO,gBAAgB,YAAY;AAC1CP,QAAAA,MAAKO,YAAYN,OAAAA;MACnB,OAAO;AACLD,QAAAA,MAAKQ,iBAAiB,UAAUP,OAAAA;MAClC;IACF,CAAA;AAEA,WAAO,MAAA;AACLD,UAAIM,QAAQ,CAACN,SAAAA;AACX,YAAI,OAAOA,MAAKS,mBAAmB,YAAY;AAC7CT,UAAAA,MAAKS,eAAeR,OAAAA;QACtB,OAAO;AACLD,UAAAA,MAAKU,oBAAoB,UAAUT,OAAAA;QACrC;MACF,CAAA;IACF;EACF,GAAG;IAACL,SAASC;GAAY;AAEzB,SAAOP,MAAMJ,IAAI,CAACmB,SAAS,CAAC,CAACA,KAAKV,OAAO;AAC3C;;;ACpFA,SAASgB,WAAAA,UAASC,4BAA4B;AASvC,IAAMC,yBAAyB,CAAIC,eAAAA;AAExC,QAAMC,cAAcC,SAClB,MAAM,CAACC,aAAAA;AACL,UAAMC,eAAeJ,WAAWK,UAAUF,QAAAA;AAC1C,WAAO,MAAMC,aAAaE,YAAW;EACvC,GACA;IAACN;GAAW;AAId,SAAOO,qBAAqBN,aAAa,MAAMD,WAAWQ,IAAG,CAAA;AAC/D;;;ACrBA,SAA2BC,YAAAA,iBAAgB;AAQpC,IAAMC,iBAAiB,MAAA;AAC5B,QAAM,CAACC,OAAOC,QAAAA,IAAYC,UAAmB,IAAA;AAC7C,SAAO;IAAEC,aAAa,CAACH,WAAaC,SAASD,MAAAA;IAAQA;EAAM;AAC7D;;;ACXA,SAASI,uBAAuB;AAEzB,IAAMC,YAAY,CACvBC,SACAC,OAA8C;EAACD;MAAQ;AAEvD,SAAOE,gBAAgB,MAAA;AACrBC,WAAOC,gBAAgBC,iBAAiB,UAAUL,OAAAA;AAClDA,YAAAA;AACA,WAAO,MAAMG,OAAOC,gBAAgBE,oBAAoB,UAAUN,OAAAA;EACpE,GAAGC,IAAAA;AACL;;;ACXA,SAASM,UAAAA,SAAQC,aAAAA,aAAWC,YAAAA,iBAAgB;AAE5C,IAAMC,aAAa,CAAIC,oBAAAA;AACrB,SAAOA,2BAA2BC;AACpC;AAYO,IAAMC,mBAAmB,CAC9BC,cACAC,WACAC,YAAAA;AAEA,QAAM,CAACC,iBAAiBC,kBAAAA,IAAsBC,UAAS,KAAA;AACvD,QAAMC,gBAAgBC,QAAUP,YAAAA;AAEhCQ,EAAAA,YAAU,MAAA;AACR,UAAMC,eAAeb,WAAcM,OAAAA,IAAWA,QAAQF,YAAAA,IAAgBE,YAAYF;AAClF,UAAMU,iBAAiBd,WAAcK,SAAAA,IACjCA,UAAUK,cAAcK,OAAO,IAC/BV,cAAcK,cAAcK;AAEhC,QAAID,kBAAkBD,gBAAgB,CAACN,iBAAiB;AACtDC,yBAAmB,IAAA;IACrB,YAAY,CAACM,kBAAkB,CAACD,iBAAiBN,iBAAiB;AAChEC,yBAAmB,KAAA;IACrB;AAEAE,kBAAcK,UAAUX;EAC1B,GAAG;IAACA;IAAcC;IAAWC;IAASC;GAAgB;AAEtD,SAAOA;AACT;AAOO,IAAMS,kBAAkB,CAC7BZ,cACAC,WACAC,SACAW,aAAAA;AAEA,QAAMC,QAAQP,QAAO,KAAA;AACrB,QAAMJ,kBAAkBJ,iBAAiBC,cAAcC,WAAWC,OAAAA;AAElEM,EAAAA,YAAU,MAAA;AACRM,UAAMH,UAAU;EAClB,GAAG;IAACX;IAAcc;GAAM;AAExBN,EAAAA,YAAU,MAAA;AACR,QAAIL,mBAAmB,CAACW,MAAMH,SAAS;AACrCE,eAAAA;AACAC,YAAMH,UAAU;IAClB;EACF,GAAG;IAACR;IAAiBW;IAAOD;GAAS;AACvC;",
|
|
6
|
+
"names": ["useEffect", "log", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "catch", "log", "useEffect", "useState", "useAsyncState", "cb", "deps", "value", "setValue", "useState", "useEffect", "t", "setTimeout", "data", "clearTimeout", "useEffect", "useState", "useControlledValue", "controlledValue", "deps", "value", "setValue", "useState", "useEffect", "undefined", "useEffect", "useRef", "useDebugReactDeps", "deps", "lastDeps", "useRef", "useEffect", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "log", "previous", "groupEnd", "useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useEffect", "useRef", "useDynamicRef", "value", "ref", "useRef", "useEffect", "current", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useMemo", "useSyncExternalStore", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback", "useLayoutEffect", "useResize", "handler", "deps", "useLayoutEffect", "window", "visualViewport", "addEventListener", "removeEventListener", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "useOnTransition", "callback", "dirty"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytes":5018,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytes":5018,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytes":2443,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytes":2080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts":{"bytes":3192,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4114,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDynamicRef.ts":{"bytes":1251,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1994,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts":{"bytes":3033,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useResize.ts":{"bytes":1712,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7867,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1999,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"packages/ui/primitives/react-hooks/src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"packages/ui/primitives/react-hooks/src/useControlledValue.ts","kind":"import-statement","original":"./useControlledValue"},{"path":"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts","kind":"import-statement","original":"./useDebugReactDeps"},{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"packages/ui/primitives/react-hooks/src/useResize.ts","kind":"import-statement","original":"./useResize"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":25414},"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useAsyncEffect","useAsyncState","useControlledValue","useDebugReactDeps","useDefaultValue","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useMulticastObservable","useOnTransition","useRefCallback","useResize"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytesInOutput":581},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytesInOutput":350},"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytesInOutput":372},"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts":{"bytesInOutput":567},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":422},"packages/ui/primitives/react-hooks/src/useDynamicRef.ts":{"bytesInOutput":217},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":343},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts":{"bytesInOutput":368},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197},"packages/ui/primitives/react-hooks/src/useResize.ts":{"bytesInOutput":301},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1406}},"bytes":9904}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -43,7 +43,8 @@ __export(node_exports, {
|
|
|
43
43
|
useMediaQuery: () => useMediaQuery,
|
|
44
44
|
useMulticastObservable: () => useMulticastObservable,
|
|
45
45
|
useOnTransition: () => useOnTransition,
|
|
46
|
-
useRefCallback: () => useRefCallback
|
|
46
|
+
useRefCallback: () => useRefCallback,
|
|
47
|
+
useResize: () => useResize
|
|
47
48
|
});
|
|
48
49
|
module.exports = __toCommonJS(node_exports);
|
|
49
50
|
var import_react = require("react");
|
|
@@ -62,6 +63,7 @@ var import_react11 = require("react");
|
|
|
62
63
|
var import_react12 = require("react");
|
|
63
64
|
var import_react13 = require("react");
|
|
64
65
|
var import_react14 = require("react");
|
|
66
|
+
var import_react15 = require("react");
|
|
65
67
|
var useAsyncEffect = (callback, destructor, deps) => {
|
|
66
68
|
const [effectDestructor, effectDeps] = typeof destructor === "function" ? [
|
|
67
69
|
destructor,
|
|
@@ -283,13 +285,22 @@ var useRefCallback = () => {
|
|
|
283
285
|
value
|
|
284
286
|
};
|
|
285
287
|
};
|
|
288
|
+
var useResize = (handler, deps = [
|
|
289
|
+
handler
|
|
290
|
+
]) => {
|
|
291
|
+
return (0, import_react14.useLayoutEffect)(() => {
|
|
292
|
+
window.visualViewport?.addEventListener("resize", handler);
|
|
293
|
+
handler();
|
|
294
|
+
return () => window.visualViewport?.removeEventListener("resize", handler);
|
|
295
|
+
}, deps);
|
|
296
|
+
};
|
|
286
297
|
var isFunction = (functionToCheck) => {
|
|
287
298
|
return functionToCheck instanceof Function;
|
|
288
299
|
};
|
|
289
300
|
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
290
|
-
const [hasTransitioned, setHasTransitioned] = (0,
|
|
291
|
-
const previousValue = (0,
|
|
292
|
-
(0,
|
|
301
|
+
const [hasTransitioned, setHasTransitioned] = (0, import_react15.useState)(false);
|
|
302
|
+
const previousValue = (0, import_react15.useRef)(currentValue);
|
|
303
|
+
(0, import_react15.useEffect)(() => {
|
|
293
304
|
const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
294
305
|
const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
295
306
|
if (fromValueValid && toValueValid && !hasTransitioned) {
|
|
@@ -307,15 +318,15 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
|
307
318
|
return hasTransitioned;
|
|
308
319
|
};
|
|
309
320
|
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
310
|
-
const dirty = (0,
|
|
321
|
+
const dirty = (0, import_react15.useRef)(false);
|
|
311
322
|
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
312
|
-
(0,
|
|
323
|
+
(0, import_react15.useEffect)(() => {
|
|
313
324
|
dirty.current = false;
|
|
314
325
|
}, [
|
|
315
326
|
currentValue,
|
|
316
327
|
dirty
|
|
317
328
|
]);
|
|
318
|
-
(0,
|
|
329
|
+
(0, import_react15.useEffect)(() => {
|
|
319
330
|
if (hasTransitioned && !dirty.current) {
|
|
320
331
|
callback();
|
|
321
332
|
dirty.current = true;
|
|
@@ -343,6 +354,7 @@ var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
|
343
354
|
useMediaQuery,
|
|
344
355
|
useMulticastObservable,
|
|
345
356
|
useOnTransition,
|
|
346
|
-
useRefCallback
|
|
357
|
+
useRefCallback,
|
|
358
|
+
useResize
|
|
347
359
|
});
|
|
348
360
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledValue.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useTransitions.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n */\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\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 const t = setTimeout(async () => {\n const data = await cb();\n setValue(data);\n });\n\n return () => clearTimeout(t);\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(\n controlledValue: TValue,\n ...deps: any[]\n): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } 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\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\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, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\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 useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\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-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\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\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\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\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 = true, 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 2024 DXOS.org\n//\n\nimport { useRef, useEffect, 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. */\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"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["import_react", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "catch", "log", "useAsyncState", "cb", "setValue", "useState", "t", "setTimeout", "data", "clearTimeout", "useControlledValue", "controlledValue", "useDebugReactDeps", "lastDeps", "useRef", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "previous", "groupEnd", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "useDynamicRef", "ref", "useFileDownload", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useForwardedRef", "innerRef", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "isFocusedRef", "input", "onFocus", "onBlur", "addEventListener", "activeElement", "removeEventListener", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "index", "media", "matches", "defaultView", "matchMedia", "mql", "handler", "evt", "prev", "item", "forEach", "addListener", "removeListener", "useMulticastObservable", "observable", "subscribeFn", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useRefCallback", "refCallback", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "previousValue", "toValueValid", "fromValueValid", "useOnTransition", "dirty"]
|
|
3
|
+
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledValue.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useResize.ts", "../../../src/useTransitions.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n */\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\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 const t = setTimeout(async () => {\n const data = await cb();\n // TODO(dmaretskyi): Potential race condition here.\n setValue(data);\n });\n\n return () => clearTimeout(t);\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(\n controlledValue: TValue,\n ...deps: any[]\n): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } 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\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\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, useRef, useEffect } from 'react';\n\n/**\n * Combines a possibly undefined forwarded ref with a locally defined ref.\n */\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\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 useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\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-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\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\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\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\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 = true, 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 2023 DXOS.org\n//\n\nimport { useLayoutEffect } from 'react';\n\nexport const useResize = (\n handler: (event?: Event) => void,\n deps: Parameters<typeof useLayoutEffect>[1] = [handler],\n) => {\n return useLayoutEffect(() => {\n window.visualViewport?.addEventListener('resize', handler);\n handler();\n return () => window.visualViewport?.removeEventListener('resize', handler);\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, 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. */\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "catch", "log", "useAsyncState", "cb", "setValue", "useState", "t", "setTimeout", "data", "clearTimeout", "useControlledValue", "controlledValue", "useDebugReactDeps", "lastDeps", "useRef", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "previous", "groupEnd", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "useDynamicRef", "ref", "useFileDownload", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useForwardedRef", "innerRef", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "isFocusedRef", "input", "onFocus", "onBlur", "addEventListener", "activeElement", "removeEventListener", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "index", "media", "matches", "defaultView", "matchMedia", "mql", "handler", "evt", "prev", "item", "forEach", "addListener", "removeListener", "useMulticastObservable", "observable", "subscribeFn", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useRefCallback", "refCallback", "useResize", "useLayoutEffect", "window", "visualViewport", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "previousValue", "toValueValid", "fromValueValid", "useOnTransition", "dirty"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytes":5018,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytes":5018,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytes":2443,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytes":2080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts":{"bytes":3192,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4114,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDynamicRef.ts":{"bytes":1251,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1994,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts":{"bytes":3033,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useResize.ts":{"bytes":1712,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7867,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1999,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"packages/ui/primitives/react-hooks/src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"packages/ui/primitives/react-hooks/src/useControlledValue.ts","kind":"import-statement","original":"./useControlledValue"},{"path":"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts","kind":"import-statement","original":"./useDebugReactDeps"},{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"packages/ui/primitives/react-hooks/src/useResize.ts","kind":"import-statement","original":"./useResize"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":25414},"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useAsyncEffect","useAsyncState","useControlledValue","useDebugReactDeps","useDefaultValue","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useMulticastObservable","useOnTransition","useRefCallback","useResize"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytesInOutput":581},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytesInOutput":350},"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytesInOutput":372},"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts":{"bytesInOutput":567},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":422},"packages/ui/primitives/react-hooks/src/useDynamicRef.ts":{"bytesInOutput":217},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":343},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts":{"bytesInOutput":368},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197},"packages/ui/primitives/react-hooks/src/useResize.ts":{"bytesInOutput":301},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1406}},"bytes":9904}}}
|
|
@@ -262,6 +262,18 @@ var useRefCallback = () => {
|
|
|
262
262
|
};
|
|
263
263
|
};
|
|
264
264
|
|
|
265
|
+
// packages/ui/primitives/react-hooks/src/useResize.ts
|
|
266
|
+
import { useLayoutEffect } from "react";
|
|
267
|
+
var useResize = (handler, deps = [
|
|
268
|
+
handler
|
|
269
|
+
]) => {
|
|
270
|
+
return useLayoutEffect(() => {
|
|
271
|
+
window.visualViewport?.addEventListener("resize", handler);
|
|
272
|
+
handler();
|
|
273
|
+
return () => window.visualViewport?.removeEventListener("resize", handler);
|
|
274
|
+
}, deps);
|
|
275
|
+
};
|
|
276
|
+
|
|
265
277
|
// packages/ui/primitives/react-hooks/src/useTransitions.ts
|
|
266
278
|
import { useRef as useRef5, useEffect as useEffect10, useState as useState7 } from "react";
|
|
267
279
|
var isFunction = (functionToCheck) => {
|
|
@@ -323,6 +335,7 @@ export {
|
|
|
323
335
|
useMediaQuery,
|
|
324
336
|
useMulticastObservable,
|
|
325
337
|
useOnTransition,
|
|
326
|
-
useRefCallback
|
|
338
|
+
useRefCallback,
|
|
339
|
+
useResize
|
|
327
340
|
};
|
|
328
341
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledValue.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useTransitions.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n */\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\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 const t = setTimeout(async () => {\n const data = await cb();\n setValue(data);\n });\n\n return () => clearTimeout(t);\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(\n controlledValue: TValue,\n ...deps: any[]\n): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } 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\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\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, useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\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 useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\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-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\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\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\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\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 = true, 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 2024 DXOS.org\n//\n\nimport { useRef, useEffect, 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. */\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"],
|
|
5
|
-
"mappings": ";;;AAIA,SAASA,iBAAiB;AAE1B,SAASC,WAAW;AA8Bb,IAAMC,iBAAiB,CAC5BC,UACAC,YACAC,SAAAA;AAEA,QAAM,CAACC,kBAAkBC,UAAAA,IACvB,OAAOH,eAAe,aAAa;IAACA;IAAYC;MAAQ;IAACG;IAAWJ;;AAEtEK,YAAU,MAAA;AACR,QAAIC,UAAU;AACd,QAAIC;AACJ,UAAMC,cAAcT,SAAS,MAAMO,OAAAA;AAEnC,SAAKG,QAAQC,QAAQF,WAAAA,EAClBG,KAAK,CAACC,WAAAA;AACLL,cAAQK;IACV,CAAA,EACCC,MAAMC,IAAID,KAAK;AAElB,WAAO,MAAA;AACLP,gBAAU;AACVJ,yBAAmBK,KAAAA;IACrB;EACF,GAAGJ,UAAAA;AACL;;;ACxDA,SAA6CY,aAAAA,YAAWC,gBAAgB;AAKjE,IAAMC,gBAAgB,CAC3BC,IACAC,OAAc,CAAA,MAAE;AAEhB,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAAA;AAC1BC,EAAAA,WAAU,MAAA;AACR,UAAMC,IAAIC,WAAW,YAAA;AACnB,YAAMC,OAAO,MAAMR,GAAAA;
|
|
6
|
-
"names": ["useEffect", "log", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "catch", "log", "useEffect", "useState", "useAsyncState", "cb", "deps", "value", "setValue", "useState", "useEffect", "t", "setTimeout", "data", "clearTimeout", "useEffect", "useState", "useControlledValue", "controlledValue", "deps", "value", "setValue", "useState", "useEffect", "undefined", "useEffect", "useRef", "useDebugReactDeps", "deps", "lastDeps", "useRef", "useEffect", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "log", "previous", "groupEnd", "useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useEffect", "useRef", "useDynamicRef", "value", "ref", "useRef", "useEffect", "current", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useMemo", "useSyncExternalStore", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "useOnTransition", "callback", "dirty"]
|
|
3
|
+
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledValue.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useResize.ts", "../../../src/useTransitions.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n */\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\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 const t = setTimeout(async () => {\n const data = await cb();\n // TODO(dmaretskyi): Potential race condition here.\n setValue(data);\n });\n\n return () => clearTimeout(t);\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledValue = <TValue>(\n controlledValue: TValue,\n ...deps: any[]\n): [TValue, Dispatch<SetStateAction<TValue>>] => {\n const [value, setValue] = useState<TValue>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\n// TODO(burdon): Move to react-hooks.\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } 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\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\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, useRef, useEffect } from 'react';\n\n/**\n * Combines a possibly undefined forwarded ref with a locally defined ref.\n */\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\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 useMemo(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [propsId]);\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-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\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\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\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\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 = true, 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 2023 DXOS.org\n//\n\nimport { useLayoutEffect } from 'react';\n\nexport const useResize = (\n handler: (event?: Event) => void,\n deps: Parameters<typeof useLayoutEffect>[1] = [handler],\n) => {\n return useLayoutEffect(() => {\n window.visualViewport?.addEventListener('resize', handler);\n handler();\n return () => window.visualViewport?.removeEventListener('resize', handler);\n }, deps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, 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. */\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useEffect", "log", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "catch", "log", "useEffect", "useState", "useAsyncState", "cb", "deps", "value", "setValue", "useState", "useEffect", "t", "setTimeout", "data", "clearTimeout", "useEffect", "useState", "useControlledValue", "controlledValue", "deps", "value", "setValue", "useState", "useEffect", "undefined", "useEffect", "useRef", "useDebugReactDeps", "deps", "lastDeps", "useRef", "useEffect", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "log", "previous", "groupEnd", "useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useEffect", "useRef", "useDynamicRef", "value", "ref", "useRef", "useEffect", "current", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useRef", "useEffect", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useMemo", "useSyncExternalStore", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback", "useLayoutEffect", "useResize", "handler", "deps", "useLayoutEffect", "window", "visualViewport", "addEventListener", "removeEventListener", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "useOnTransition", "callback", "dirty"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytes":5018,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytes":5018,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytes":2443,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytes":2080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts":{"bytes":3192,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":4114,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useDynamicRef.ts":{"bytes":1251,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2740,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1994,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2163,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytes":3990,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9390,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts":{"bytes":3033,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytes":1879,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useResize.ts":{"bytes":1712,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7867,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1999,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"packages/ui/primitives/react-hooks/src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"packages/ui/primitives/react-hooks/src/useControlledValue.ts","kind":"import-statement","original":"./useControlledValue"},{"path":"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts","kind":"import-statement","original":"./useDebugReactDeps"},{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"packages/ui/primitives/react-hooks/src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"packages/ui/primitives/react-hooks/src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"packages/ui/primitives/react-hooks/src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"packages/ui/primitives/react-hooks/src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"packages/ui/primitives/react-hooks/src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"packages/ui/primitives/react-hooks/src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"packages/ui/primitives/react-hooks/src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"packages/ui/primitives/react-hooks/src/useResize.ts","kind":"import-statement","original":"./useResize"},{"path":"packages/ui/primitives/react-hooks/src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-hooks/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":25416},"packages/ui/primitives/react-hooks/dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["randomString","useAsyncEffect","useAsyncState","useControlledValue","useDebugReactDeps","useDefaultValue","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useMulticastObservable","useOnTransition","useRefCallback","useResize"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useAsyncEffect.ts":{"bytesInOutput":581},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useAsyncState.ts":{"bytesInOutput":350},"packages/ui/primitives/react-hooks/src/useControlledValue.ts":{"bytesInOutput":372},"packages/ui/primitives/react-hooks/src/useDebugReactDeps.ts":{"bytesInOutput":567},"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":422},"packages/ui/primitives/react-hooks/src/useDynamicRef.ts":{"bytesInOutput":217},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":343},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytesInOutput":326},"packages/ui/primitives/react-hooks/src/useIsFocused.ts":{"bytesInOutput":833},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytesInOutput":1940},"packages/ui/primitives/react-hooks/src/useMulticastObservable.ts":{"bytesInOutput":368},"packages/ui/primitives/react-hooks/src/useRefCallback.ts":{"bytesInOutput":197},"packages/ui/primitives/react-hooks/src/useResize.ts":{"bytesInOutput":301},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytesInOutput":1406}},"bytes":9997}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
|
|
@@ -1 +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,
|
|
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,CAazD,CAAC"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import { type ForwardedRef } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Combines a possibly undefined forwarded ref with a locally defined ref.
|
|
4
|
+
*/
|
|
2
5
|
export declare const useForwardedRef: <T>(ref: ForwardedRef<T>) => import("react").RefObject<T>;
|
|
3
6
|
//# sourceMappingURL=useForwardedRef.d.ts.map
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"useForwardedRef.d.ts","sourceRoot":"","sources":["../../../src/useForwardedRef.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,iCAetD,CAAC"}
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":"5.7.2"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-hooks",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.5-feature-compute.4d9d99a",
|
|
4
4
|
"description": "React hooks supporting DXOS React primitives.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"alea": "^1.0.1",
|
|
27
|
-
"@dxos/async": "0.7.
|
|
28
|
-
"@dxos/log": "0.7.
|
|
27
|
+
"@dxos/async": "0.7.5-feature-compute.4d9d99a",
|
|
28
|
+
"@dxos/log": "0.7.5-feature-compute.4d9d99a"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/react": "~18.2.0",
|
package/src/index.ts
CHANGED
package/src/useAsyncState.ts
CHANGED
package/src/useForwardedRef.ts
CHANGED
|
@@ -4,9 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
import { type ForwardedRef, useRef, useEffect } from 'react';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Combines a possibly undefined forwarded ref with a locally defined ref.
|
|
9
|
+
*/
|
|
7
10
|
export const useForwardedRef = <T>(ref: ForwardedRef<T>) => {
|
|
8
11
|
const innerRef = useRef<T>(null);
|
|
9
|
-
|
|
10
12
|
useEffect(() => {
|
|
11
13
|
if (!ref) {
|
|
12
14
|
return;
|
package/src/useResize.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useLayoutEffect } from 'react';
|
|
6
|
+
|
|
7
|
+
export const useResize = (
|
|
8
|
+
handler: (event?: Event) => void,
|
|
9
|
+
deps: Parameters<typeof useLayoutEffect>[1] = [handler],
|
|
10
|
+
) => {
|
|
11
|
+
return useLayoutEffect(() => {
|
|
12
|
+
window.visualViewport?.addEventListener('resize', handler);
|
|
13
|
+
handler();
|
|
14
|
+
return () => window.visualViewport?.removeEventListener('resize', handler);
|
|
15
|
+
}, deps);
|
|
16
|
+
};
|