@dxos/react-hooks 0.4.8-main.05fda5d → 0.4.8-main.07ec94b
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 +76 -13
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +74 -12
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/types/src/index.d.ts +2 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useDefaultValue.d.ts +13 -0
- package/dist/types/src/useDefaultValue.d.ts.map +1 -0
- package/dist/types/src/useTransitions.d.ts +7 -0
- package/dist/types/src/useTransitions.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/index.ts +2 -0
- package/src/useDefaultValue.ts +28 -0
- package/src/useTransitions.ts +74 -0
|
@@ -1,7 +1,19 @@
|
|
|
1
|
+
// packages/ui/primitives/react-hooks/src/useDefaultValue.ts
|
|
2
|
+
import { useEffect, useState, useMemo } from "react";
|
|
3
|
+
var useDefaultValue = (reactiveValue, defaultValue) => {
|
|
4
|
+
const stableDefaultValue = useMemo(() => defaultValue, []);
|
|
5
|
+
const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
|
|
6
|
+
useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [
|
|
7
|
+
reactiveValue,
|
|
8
|
+
stableDefaultValue
|
|
9
|
+
]);
|
|
10
|
+
return value;
|
|
11
|
+
};
|
|
12
|
+
|
|
1
13
|
// packages/ui/primitives/react-hooks/src/useFileDownload.ts
|
|
2
|
-
import { useMemo } from "react";
|
|
14
|
+
import { useMemo as useMemo2 } from "react";
|
|
3
15
|
var useFileDownload = () => {
|
|
4
|
-
return
|
|
16
|
+
return useMemo2(() => (data, filename) => {
|
|
5
17
|
const url = typeof data === "string" ? data : URL.createObjectURL(data);
|
|
6
18
|
const element = document.createElement("a");
|
|
7
19
|
element.setAttribute("href", url);
|
|
@@ -12,10 +24,10 @@ var useFileDownload = () => {
|
|
|
12
24
|
};
|
|
13
25
|
|
|
14
26
|
// packages/ui/primitives/react-hooks/src/useForwardedRef.ts
|
|
15
|
-
import { useRef, useEffect } from "react";
|
|
27
|
+
import { useRef, useEffect as useEffect2 } from "react";
|
|
16
28
|
var useForwardedRef = (ref) => {
|
|
17
29
|
const innerRef = useRef(null);
|
|
18
|
-
|
|
30
|
+
useEffect2(() => {
|
|
19
31
|
if (!ref) {
|
|
20
32
|
return;
|
|
21
33
|
}
|
|
@@ -30,21 +42,21 @@ var useForwardedRef = (ref) => {
|
|
|
30
42
|
|
|
31
43
|
// packages/ui/primitives/react-hooks/src/useId.ts
|
|
32
44
|
import alea from "alea";
|
|
33
|
-
import { useMemo as
|
|
45
|
+
import { useMemo as useMemo3 } from "react";
|
|
34
46
|
var Alea = alea;
|
|
35
47
|
var prng = new Alea("@dxos/react-hooks");
|
|
36
48
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
37
|
-
var useId = (namespace, propsId, opts) =>
|
|
49
|
+
var useId = (namespace, propsId, opts) => useMemo3(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
|
|
38
50
|
propsId
|
|
39
51
|
]);
|
|
40
52
|
|
|
41
53
|
// packages/ui/primitives/react-hooks/src/useIsFocused.ts
|
|
42
|
-
import { useEffect as
|
|
54
|
+
import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
|
|
43
55
|
var useIsFocused = (inputRef) => {
|
|
44
|
-
const [isFocused, setIsFocused] =
|
|
56
|
+
const [isFocused, setIsFocused] = useState2(void 0);
|
|
45
57
|
const isFocusedRef = useRef2(isFocused);
|
|
46
58
|
isFocusedRef.current = isFocused;
|
|
47
|
-
|
|
59
|
+
useEffect3(() => {
|
|
48
60
|
const input = inputRef.current;
|
|
49
61
|
if (!input) {
|
|
50
62
|
return;
|
|
@@ -68,7 +80,7 @@ var useIsFocused = (inputRef) => {
|
|
|
68
80
|
};
|
|
69
81
|
|
|
70
82
|
// packages/ui/primitives/react-hooks/src/useMediaQuery.ts
|
|
71
|
-
import { useEffect as
|
|
83
|
+
import { useEffect as useEffect4, useState as useState3 } from "react";
|
|
72
84
|
var breakpointMediaQueries = {
|
|
73
85
|
sm: "(min-width: 640px)",
|
|
74
86
|
md: "(min-width: 768px)",
|
|
@@ -85,13 +97,13 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
85
97
|
fallback
|
|
86
98
|
];
|
|
87
99
|
fallbackValues = fallbackValues.filter((v) => v != null);
|
|
88
|
-
const [value, setValue] =
|
|
100
|
+
const [value, setValue] = useState3(() => {
|
|
89
101
|
return queries.map((query2, index) => ({
|
|
90
102
|
media: query2,
|
|
91
103
|
matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
|
|
92
104
|
}));
|
|
93
105
|
});
|
|
94
|
-
|
|
106
|
+
useEffect4(() => {
|
|
95
107
|
setValue(queries.map((query2) => ({
|
|
96
108
|
media: query2,
|
|
97
109
|
matches: document.defaultView?.matchMedia(query2).matches
|
|
@@ -131,12 +143,63 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
131
143
|
]);
|
|
132
144
|
return value.map((item) => !!item.matches);
|
|
133
145
|
};
|
|
146
|
+
|
|
147
|
+
// packages/ui/primitives/react-hooks/src/useTransitions.ts
|
|
148
|
+
import { useRef as useRef3, useEffect as useEffect5, useState as useState4 } from "react";
|
|
149
|
+
var isFunction = (functionToCheck) => {
|
|
150
|
+
return functionToCheck instanceof Function;
|
|
151
|
+
};
|
|
152
|
+
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
153
|
+
const [hasTransitioned, setHasTransitioned] = useState4(false);
|
|
154
|
+
const previousValue = useRef3(currentValue);
|
|
155
|
+
useEffect5(() => {
|
|
156
|
+
const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
157
|
+
const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
158
|
+
const transitioned = fromValueValid && toValueValid;
|
|
159
|
+
if (transitioned) {
|
|
160
|
+
setHasTransitioned(true);
|
|
161
|
+
} else {
|
|
162
|
+
setHasTransitioned(false);
|
|
163
|
+
}
|
|
164
|
+
previousValue.current = currentValue;
|
|
165
|
+
}, [
|
|
166
|
+
currentValue,
|
|
167
|
+
fromValue,
|
|
168
|
+
toValue,
|
|
169
|
+
setHasTransitioned,
|
|
170
|
+
previousValue
|
|
171
|
+
]);
|
|
172
|
+
return hasTransitioned;
|
|
173
|
+
};
|
|
174
|
+
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
175
|
+
const dirty = useRef3(false);
|
|
176
|
+
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
177
|
+
useEffect5(() => {
|
|
178
|
+
dirty.current = false;
|
|
179
|
+
}, [
|
|
180
|
+
currentValue,
|
|
181
|
+
dirty
|
|
182
|
+
]);
|
|
183
|
+
useEffect5(() => {
|
|
184
|
+
if (hasTransitioned && !dirty.current) {
|
|
185
|
+
callback();
|
|
186
|
+
dirty.current = true;
|
|
187
|
+
}
|
|
188
|
+
}, [
|
|
189
|
+
hasTransitioned,
|
|
190
|
+
dirty,
|
|
191
|
+
callback
|
|
192
|
+
]);
|
|
193
|
+
};
|
|
134
194
|
export {
|
|
135
195
|
randomString,
|
|
196
|
+
useDefaultValue,
|
|
197
|
+
useDidTransition,
|
|
136
198
|
useFileDownload,
|
|
137
199
|
useForwardedRef,
|
|
138
200
|
useId,
|
|
139
201
|
useIsFocused,
|
|
140
|
-
useMediaQuery
|
|
202
|
+
useMediaQuery,
|
|
203
|
+
useOnTransition
|
|
141
204
|
};
|
|
142
205
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts"],
|
|
4
|
-
"sourcesContent": ["//\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 { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\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"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,eAAe;AAYjB,IAAMC,kBAAkB,MAAA;AAC7B,SAAOC,
|
|
6
|
-
"names": ["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"]
|
|
3
|
+
"sources": ["../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts"],
|
|
4
|
+
"sourcesContent": ["//\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, defaultValue: 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(() => defaultValue, []);\n const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n return value;\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 { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\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 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\n const fromValueValid = isFunction<T>(fromValue)\n ? fromValue(previousValue.current)\n : fromValue === previousValue.current;\n\n const transitioned = fromValueValid && toValueValid;\n\n if (transitioned) {\n setHasTransitioned(true);\n } else {\n setHasTransitioned(false);\n }\n\n previousValue.current = currentValue;\n }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);\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: ((value: T) => boolean) | T,\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,WAAWC,UAAUC,eAAe;AAatC,IAAMC,kBAAkB,CAAIC,eAAqCC,iBAAAA;AAItE,QAAMC,qBAAqBC,QAAQ,MAAMF,cAAc,CAAA,CAAE;AACzD,QAAM,CAACG,OAAOC,QAAAA,IAAYC,SAASN,iBAAiBE,kBAAAA;AAEpDK,YAAU,MAAMF,SAASL,iBAAiBE,kBAAAA,GAAqB;IAACF;IAAeE;GAAmB;AAElG,SAAOE;AACT;;;ACvBA,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,SAASC,QAAQC,aAAAA,kBAAiB;AAE3B,IAAMC,kBAAkB,CAAIC,QAAAA;AACjC,QAAMC,WAAWC,OAAU,IAAA;AAE3BC,EAAAA,WAAU,MAAA;AACR,QAAI,CAACH,KAAK;AACR;IACF;AACA,QAAI,OAAOA,QAAQ,YAAY;AAC7BA,UAAIC,SAASG,OAAO;IACtB,OAAO;AACLJ,UAAII,UAAUH,SAASG;IACzB;EACF,CAAA;AAEA,SAAOH;AACT;;;ACjBA,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,UAAAA,SAAQC,aAAAA,YAAWC,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,WAAU,MAAA;AACR,UAAMC,eAAeb,WAAcM,OAAAA,IAAWA,QAAQF,YAAAA,IAAgBE,YAAYF;AAElF,UAAMU,iBAAiBd,WAAcK,SAAAA,IACjCA,UAAUK,cAAcK,OAAO,IAC/BV,cAAcK,cAAcK;AAEhC,UAAMC,eAAeF,kBAAkBD;AAEvC,QAAIG,cAAc;AAChBR,yBAAmB,IAAA;IACrB,OAAO;AACLA,yBAAmB,KAAA;IACrB;AAEAE,kBAAcK,UAAUX;EAC1B,GAAG;IAACA;IAAcC;IAAWC;IAASE;IAAoBE;GAAc;AAExE,SAAOH;AACT;AAOO,IAAMU,kBAAkB,CAC7Bb,cACAC,WACAC,SACAY,aAAAA;AAEA,QAAMC,QAAQR,QAAO,KAAA;AACrB,QAAMJ,kBAAkBJ,iBAAiBC,cAAcC,WAAWC,OAAAA;AAElEM,EAAAA,WAAU,MAAA;AACRO,UAAMJ,UAAU;EAClB,GAAG;IAACX;IAAce;GAAM;AAExBP,EAAAA,WAAU,MAAA;AACR,QAAIL,mBAAmB,CAACY,MAAMJ,SAAS;AACrCG,eAAAA;AACAC,YAAMJ,UAAU;IAClB;EACF,GAAG;IAACR;IAAiBY;IAAOD;GAAS;AACvC;",
|
|
6
|
+
"names": ["useEffect", "useState", "useMemo", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "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", "useRef", "useEffect", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "transitioned", "useOnTransition", "callback", "dirty"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"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":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"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":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7689,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1095,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"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/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":15579},"packages/ui/primitives/react-hooks/dist/lib/browser/index.mjs":{"imports":[{"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}],"exports":["randomString","useDefaultValue","useDidTransition","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useOnTransition"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":382},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":331},"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/useTransitions.ts":{"bytesInOutput":1384}},"bytes":6229}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -29,21 +29,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var node_exports = {};
|
|
30
30
|
__export(node_exports, {
|
|
31
31
|
randomString: () => randomString,
|
|
32
|
+
useDefaultValue: () => useDefaultValue,
|
|
33
|
+
useDidTransition: () => useDidTransition,
|
|
32
34
|
useFileDownload: () => useFileDownload,
|
|
33
35
|
useForwardedRef: () => useForwardedRef,
|
|
34
36
|
useId: () => useId,
|
|
35
37
|
useIsFocused: () => useIsFocused,
|
|
36
|
-
useMediaQuery: () => useMediaQuery
|
|
38
|
+
useMediaQuery: () => useMediaQuery,
|
|
39
|
+
useOnTransition: () => useOnTransition
|
|
37
40
|
});
|
|
38
41
|
module.exports = __toCommonJS(node_exports);
|
|
39
42
|
var import_react = require("react");
|
|
40
43
|
var import_react2 = require("react");
|
|
41
|
-
var import_alea = __toESM(require("alea"));
|
|
42
44
|
var import_react3 = require("react");
|
|
45
|
+
var import_alea = __toESM(require("alea"));
|
|
43
46
|
var import_react4 = require("react");
|
|
44
47
|
var import_react5 = require("react");
|
|
48
|
+
var import_react6 = require("react");
|
|
49
|
+
var import_react7 = require("react");
|
|
50
|
+
var useDefaultValue = (reactiveValue, defaultValue) => {
|
|
51
|
+
const stableDefaultValue = (0, import_react.useMemo)(() => defaultValue, []);
|
|
52
|
+
const [value, setValue] = (0, import_react.useState)(reactiveValue ?? stableDefaultValue);
|
|
53
|
+
(0, import_react.useEffect)(() => setValue(reactiveValue ?? stableDefaultValue), [
|
|
54
|
+
reactiveValue,
|
|
55
|
+
stableDefaultValue
|
|
56
|
+
]);
|
|
57
|
+
return value;
|
|
58
|
+
};
|
|
45
59
|
var useFileDownload = () => {
|
|
46
|
-
return (0,
|
|
60
|
+
return (0, import_react2.useMemo)(() => (data, filename) => {
|
|
47
61
|
const url = typeof data === "string" ? data : URL.createObjectURL(data);
|
|
48
62
|
const element = document.createElement("a");
|
|
49
63
|
element.setAttribute("href", url);
|
|
@@ -53,8 +67,8 @@ var useFileDownload = () => {
|
|
|
53
67
|
}, []);
|
|
54
68
|
};
|
|
55
69
|
var useForwardedRef = (ref) => {
|
|
56
|
-
const innerRef = (0,
|
|
57
|
-
(0,
|
|
70
|
+
const innerRef = (0, import_react3.useRef)(null);
|
|
71
|
+
(0, import_react3.useEffect)(() => {
|
|
58
72
|
if (!ref) {
|
|
59
73
|
return;
|
|
60
74
|
}
|
|
@@ -69,14 +83,14 @@ var useForwardedRef = (ref) => {
|
|
|
69
83
|
var Alea = import_alea.default;
|
|
70
84
|
var prng = new Alea("@dxos/react-hooks");
|
|
71
85
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
72
|
-
var useId = (namespace, propsId, opts) => (0,
|
|
86
|
+
var useId = (namespace, propsId, opts) => (0, import_react4.useMemo)(() => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`, [
|
|
73
87
|
propsId
|
|
74
88
|
]);
|
|
75
89
|
var useIsFocused = (inputRef) => {
|
|
76
|
-
const [isFocused, setIsFocused] = (0,
|
|
77
|
-
const isFocusedRef = (0,
|
|
90
|
+
const [isFocused, setIsFocused] = (0, import_react5.useState)(void 0);
|
|
91
|
+
const isFocusedRef = (0, import_react5.useRef)(isFocused);
|
|
78
92
|
isFocusedRef.current = isFocused;
|
|
79
|
-
(0,
|
|
93
|
+
(0, import_react5.useEffect)(() => {
|
|
80
94
|
const input = inputRef.current;
|
|
81
95
|
if (!input) {
|
|
82
96
|
return;
|
|
@@ -114,13 +128,13 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
114
128
|
fallback
|
|
115
129
|
];
|
|
116
130
|
fallbackValues = fallbackValues.filter((v) => v != null);
|
|
117
|
-
const [value, setValue] = (0,
|
|
131
|
+
const [value, setValue] = (0, import_react6.useState)(() => {
|
|
118
132
|
return queries.map((query2, index) => ({
|
|
119
133
|
media: query2,
|
|
120
134
|
matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
|
|
121
135
|
}));
|
|
122
136
|
});
|
|
123
|
-
(0,
|
|
137
|
+
(0, import_react6.useEffect)(() => {
|
|
124
138
|
setValue(queries.map((query2) => ({
|
|
125
139
|
media: query2,
|
|
126
140
|
matches: document.defaultView?.matchMedia(query2).matches
|
|
@@ -160,13 +174,61 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
160
174
|
]);
|
|
161
175
|
return value.map((item) => !!item.matches);
|
|
162
176
|
};
|
|
177
|
+
var isFunction = (functionToCheck) => {
|
|
178
|
+
return functionToCheck instanceof Function;
|
|
179
|
+
};
|
|
180
|
+
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
181
|
+
const [hasTransitioned, setHasTransitioned] = (0, import_react7.useState)(false);
|
|
182
|
+
const previousValue = (0, import_react7.useRef)(currentValue);
|
|
183
|
+
(0, import_react7.useEffect)(() => {
|
|
184
|
+
const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
185
|
+
const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
186
|
+
const transitioned = fromValueValid && toValueValid;
|
|
187
|
+
if (transitioned) {
|
|
188
|
+
setHasTransitioned(true);
|
|
189
|
+
} else {
|
|
190
|
+
setHasTransitioned(false);
|
|
191
|
+
}
|
|
192
|
+
previousValue.current = currentValue;
|
|
193
|
+
}, [
|
|
194
|
+
currentValue,
|
|
195
|
+
fromValue,
|
|
196
|
+
toValue,
|
|
197
|
+
setHasTransitioned,
|
|
198
|
+
previousValue
|
|
199
|
+
]);
|
|
200
|
+
return hasTransitioned;
|
|
201
|
+
};
|
|
202
|
+
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
203
|
+
const dirty = (0, import_react7.useRef)(false);
|
|
204
|
+
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
205
|
+
(0, import_react7.useEffect)(() => {
|
|
206
|
+
dirty.current = false;
|
|
207
|
+
}, [
|
|
208
|
+
currentValue,
|
|
209
|
+
dirty
|
|
210
|
+
]);
|
|
211
|
+
(0, import_react7.useEffect)(() => {
|
|
212
|
+
if (hasTransitioned && !dirty.current) {
|
|
213
|
+
callback();
|
|
214
|
+
dirty.current = true;
|
|
215
|
+
}
|
|
216
|
+
}, [
|
|
217
|
+
hasTransitioned,
|
|
218
|
+
dirty,
|
|
219
|
+
callback
|
|
220
|
+
]);
|
|
221
|
+
};
|
|
163
222
|
// Annotate the CommonJS export names for ESM import in node:
|
|
164
223
|
0 && (module.exports = {
|
|
165
224
|
randomString,
|
|
225
|
+
useDefaultValue,
|
|
226
|
+
useDidTransition,
|
|
166
227
|
useFileDownload,
|
|
167
228
|
useForwardedRef,
|
|
168
229
|
useId,
|
|
169
230
|
useIsFocused,
|
|
170
|
-
useMediaQuery
|
|
231
|
+
useMediaQuery,
|
|
232
|
+
useOnTransition
|
|
171
233
|
});
|
|
172
234
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts"],
|
|
4
|
-
"sourcesContent": ["//\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 { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\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"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["import_react", "
|
|
3
|
+
"sources": ["../../../src/useDefaultValue.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useTransitions.ts"],
|
|
4
|
+
"sourcesContent": ["//\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, defaultValue: 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(() => defaultValue, []);\n const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);\n\n return value;\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 { useRef, useEffect } from 'react';\n\nexport const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n\n useEffect(() => {\n if (!ref) {\n return;\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 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\n const fromValueValid = isFunction<T>(fromValue)\n ? fromValue(previousValue.current)\n : fromValue === previousValue.current;\n\n const transitioned = fromValueValid && toValueValid;\n\n if (transitioned) {\n setHasTransitioned(true);\n } else {\n setHasTransitioned(false);\n }\n\n previousValue.current = currentValue;\n }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);\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: ((value: T) => boolean) | T,\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", "useDefaultValue", "reactiveValue", "defaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "useFileDownload", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useForwardedRef", "ref", "innerRef", "useRef", "current", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "undefined", "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", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "previousValue", "toValueValid", "fromValueValid", "transitioned", "useOnTransition", "callback", "dirty"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"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":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytes":3999,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytes":2684,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytes":1711,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useId.ts":{"bytes":2123,"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":3922,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/useTransitions.ts":{"bytes":7689,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-hooks/src/index.ts":{"bytes":1095,"imports":[{"path":"packages/ui/primitives/react-hooks/src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"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/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":15579},"packages/ui/primitives/react-hooks/dist/lib/node/index.cjs":{"imports":[{"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}],"exports":["randomString","useDefaultValue","useDidTransition","useFileDownload","useForwardedRef","useId","useIsFocused","useMediaQuery","useOnTransition"],"entryPoint":"packages/ui/primitives/react-hooks/src/index.ts","inputs":{"packages/ui/primitives/react-hooks/src/useDefaultValue.ts":{"bytesInOutput":382},"packages/ui/primitives/react-hooks/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-hooks/src/useFileDownload.ts":{"bytesInOutput":416},"packages/ui/primitives/react-hooks/src/useForwardedRef.ts":{"bytesInOutput":331},"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/useTransitions.ts":{"bytesInOutput":1384}},"bytes":6229}}}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
export * from './useDefaultValue';
|
|
1
2
|
export * from './useFileDownload';
|
|
2
3
|
export * from './useForwardedRef';
|
|
3
4
|
export * from './useId';
|
|
4
5
|
export * from './useIsFocused';
|
|
5
6
|
export * from './useMediaQuery';
|
|
7
|
+
export * from './useTransitions';
|
|
6
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A custom React hook that provides a stable default value for a potentially undefined reactive value.
|
|
3
|
+
* The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,
|
|
4
|
+
* ensuring stability across all re-renders, even if the defaultValue prop changes.
|
|
5
|
+
*
|
|
6
|
+
* Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.
|
|
7
|
+
*
|
|
8
|
+
* @param reactiveValue - The value that may change over time.
|
|
9
|
+
* @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.
|
|
10
|
+
* @returns - The reactiveValue if it's defined, otherwise the defaultValue.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useDefaultValue: <T>(reactiveValue: T | null | undefined, defaultValue: T) => T;
|
|
13
|
+
//# sourceMappingURL=useDefaultValue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDefaultValue.d.ts","sourceRoot":"","sources":["../../../src/useDefaultValue.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,gEAU3B,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Executes a callback function when a specified transition occurs in a value.
|
|
3
|
+
*
|
|
4
|
+
* This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
|
|
5
|
+
* When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
|
|
6
|
+
export declare const useOnTransition: <T>(currentValue: T, fromValue: T | ((value: T) => boolean), toValue: T | ((value: T) => boolean), callback: () => void) => void;
|
|
7
|
+
//# sourceMappingURL=useTransitions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTransitions.d.ts","sourceRoot":"","sources":["../../../src/useTransitions.ts"],"names":[],"mappings":"AAiDA;;;;kHAIkH;AAClH,eAAO,MAAM,eAAe,qDAEI,OAAO,+BACb,OAAO,aACrB,MAAM,IAAI,SAerB,CAAC"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
// Copyright 2022 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
export * from './useDefaultValue';
|
|
5
6
|
export * from './useFileDownload';
|
|
6
7
|
export * from './useForwardedRef';
|
|
7
8
|
export * from './useId';
|
|
8
9
|
export * from './useIsFocused';
|
|
9
10
|
export * from './useMediaQuery';
|
|
11
|
+
export * from './useTransitions';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useEffect, useState, useMemo } from 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* A custom React hook that provides a stable default value for a potentially undefined reactive value.
|
|
9
|
+
* The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,
|
|
10
|
+
* ensuring stability across all re-renders, even if the defaultValue prop changes.
|
|
11
|
+
*
|
|
12
|
+
* Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.
|
|
13
|
+
*
|
|
14
|
+
* @param reactiveValue - The value that may change over time.
|
|
15
|
+
* @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.
|
|
16
|
+
* @returns - The reactiveValue if it's defined, otherwise the defaultValue.
|
|
17
|
+
*/
|
|
18
|
+
export const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {
|
|
19
|
+
// Memoize defaultValue with an empty dependency array.
|
|
20
|
+
// This ensures that the defaultValue instance remains stable across all re-renders,
|
|
21
|
+
// regardless of whether the defaultValue changes.
|
|
22
|
+
const stableDefaultValue = useMemo(() => defaultValue, []);
|
|
23
|
+
const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
|
|
24
|
+
|
|
25
|
+
useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);
|
|
26
|
+
|
|
27
|
+
return value;
|
|
28
|
+
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useRef, useEffect, useState } from 'react';
|
|
6
|
+
|
|
7
|
+
const isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {
|
|
8
|
+
return functionToCheck instanceof Function;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.
|
|
13
|
+
*
|
|
14
|
+
* @param currentValue - The value that is being monitored for transitions.
|
|
15
|
+
* @param fromValue - The *from* value or a predicate function that determines the start of the transition.
|
|
16
|
+
* @param toValue - The *to* value or a predicate function that determines the end of the transition.
|
|
17
|
+
* @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.
|
|
18
|
+
*
|
|
19
|
+
* @internal Consider using `useOnTransition` for handling transitions instead of this hook.
|
|
20
|
+
*/
|
|
21
|
+
export const useDidTransition = <T>(
|
|
22
|
+
currentValue: T,
|
|
23
|
+
fromValue: T | ((value: T) => boolean),
|
|
24
|
+
toValue: T | ((value: T) => boolean),
|
|
25
|
+
) => {
|
|
26
|
+
const [hasTransitioned, setHasTransitioned] = useState(false);
|
|
27
|
+
const previousValue = useRef<T>(currentValue);
|
|
28
|
+
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
31
|
+
|
|
32
|
+
const fromValueValid = isFunction<T>(fromValue)
|
|
33
|
+
? fromValue(previousValue.current)
|
|
34
|
+
: fromValue === previousValue.current;
|
|
35
|
+
|
|
36
|
+
const transitioned = fromValueValid && toValueValid;
|
|
37
|
+
|
|
38
|
+
if (transitioned) {
|
|
39
|
+
setHasTransitioned(true);
|
|
40
|
+
} else {
|
|
41
|
+
setHasTransitioned(false);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
previousValue.current = currentValue;
|
|
45
|
+
}, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);
|
|
46
|
+
|
|
47
|
+
return hasTransitioned;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Executes a callback function when a specified transition occurs in a value.
|
|
52
|
+
*
|
|
53
|
+
* This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.
|
|
54
|
+
* When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */
|
|
55
|
+
export const useOnTransition = <T>(
|
|
56
|
+
currentValue: T,
|
|
57
|
+
fromValue: T | ((value: T) => boolean),
|
|
58
|
+
toValue: ((value: T) => boolean) | T,
|
|
59
|
+
callback: () => void,
|
|
60
|
+
) => {
|
|
61
|
+
const dirty = useRef(false);
|
|
62
|
+
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
63
|
+
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
dirty.current = false;
|
|
66
|
+
}, [currentValue, dirty]);
|
|
67
|
+
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (hasTransitioned && !dirty.current) {
|
|
70
|
+
callback();
|
|
71
|
+
dirty.current = true;
|
|
72
|
+
}
|
|
73
|
+
}, [hasTransitioned, dirty, callback]);
|
|
74
|
+
};
|