@dxos/react-hooks 0.8.4-main.1da679c → 0.8.4-main.21d9917
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 +147 -160
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +147 -160
- 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 +2 -3
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useControlledState.d.ts +2 -2
- package/dist/types/src/useControlledState.d.ts.map +1 -1
- package/dist/types/src/useDebugDeps.d.ts +1 -1
- package/dist/types/src/useDebugDeps.d.ts.map +1 -1
- package/dist/types/src/useDynamicRef.d.ts +3 -3
- package/dist/types/src/useDynamicRef.d.ts.map +1 -1
- package/dist/types/src/useForwardedRef.d.ts +23 -3
- package/dist/types/src/useForwardedRef.d.ts.map +1 -1
- package/dist/types/src/useId.d.ts.map +1 -1
- package/dist/types/src/useIsFocused.d.ts +1 -1
- package/dist/types/src/useIsFocused.d.ts.map +1 -1
- package/dist/types/src/useMediaQuery.d.ts +1 -1
- package/dist/types/src/useMediaQuery.d.ts.map +1 -1
- package/dist/types/src/useMulticastObservable.test.d.ts.map +1 -1
- package/dist/types/src/useTransitions.d.ts +2 -1
- package/dist/types/src/useTransitions.d.ts.map +1 -1
- package/dist/types/src/useViewportResize.d.ts +3 -0
- package/dist/types/src/useViewportResize.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +16 -11
- package/src/index.ts +3 -3
- package/src/useControlledState.ts +22 -12
- package/src/useDebugDeps.ts +17 -8
- package/src/useDynamicRef.ts +5 -6
- package/src/useForwardedRef.ts +48 -13
- package/src/useId.ts +3 -2
- package/src/useIsFocused.ts +1 -1
- package/src/useMediaQuery.ts +8 -9
- package/src/{useMulticastObservable.test.tsx → useMulticastObservable.test.ts} +1 -3
- package/src/useTransitions.ts +3 -1
- package/src/{useResize.ts → useViewportResize.ts} +1 -1
- package/dist/types/src/useAsyncEffect.stories.d.ts +0 -9
- package/dist/types/src/useAsyncEffect.stories.d.ts.map +0 -1
- package/dist/types/src/useResize.d.ts +0 -3
- package/dist/types/src/useResize.d.ts.map +0 -1
- package/dist/types/src/useSignals.d.ts +0 -10
- package/dist/types/src/useSignals.d.ts.map +0 -1
- package/dist/types/src/useTrackProps.d.ts +0 -5
- package/dist/types/src/useTrackProps.d.ts.map +0 -1
- package/src/useAsyncEffect.stories.tsx +0 -34
- package/src/useSignals.ts +0 -27
- package/src/useTrackProps.ts +0 -40
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/useAsyncEffect.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/useAsyncEffect.ts":{"bytes":2994,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useAsyncState.ts":{"bytes":2583,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDynamicRef.ts":{"bytes":3588,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useControlledState.ts":{"bytes":3703,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"}],"format":"esm"},"src/useDebugDeps.ts":{"bytes":3943,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaultValue.ts":{"bytes":4039,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaults.ts":{"bytes":1597,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useFileDownload.ts":{"bytes":2677,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useForwardedRef.ts":{"bytes":6112,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useId.ts":{"bytes":2520,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useIsFocused.ts":{"bytes":3927,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMediaQuery.ts":{"bytes":9262,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMulticastObservable.ts":{"bytes":2978,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useRefCallback.ts":{"bytes":1824,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useViewportResize.ts":{"bytes":2884,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTimeout.ts":{"bytes":3962,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTransitions.ts":{"bytes":7869,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":2366,"imports":[{"path":"src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"src/useControlledState.ts","kind":"import-statement","original":"./useControlledState"},{"path":"src/useDebugDeps.ts","kind":"import-statement","original":"./useDebugDeps"},{"path":"src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"src/useDefaults.ts","kind":"import-statement","original":"./useDefaults"},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"src/useViewportResize.ts","kind":"import-statement","original":"./useViewportResize"},{"path":"src/useTimeout.ts","kind":"import-statement","original":"./useTimeout"},{"path":"src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"mini-virtual-list","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33879},"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":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","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},{"path":"react","kind":"import-statement","external":true},{"path":"mini-virtual-list","kind":"import-statement","external":true}],"exports":["makeId","mergeRefs","randomString","setRef","useAsyncEffect","useAsyncState","useControlledState","useDebugDeps","useDefaultValue","useDefaults","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useInterval","useIsFocused","useMediaQuery","useMergeRefs","useMulticastObservable","useOnTransition","useRefCallback","useScroller","useSize","useStateWithRef","useTimeout","useViewportResize"],"entryPoint":"src/index.ts","inputs":{"src/useAsyncEffect.ts":{"bytesInOutput":405},"src/index.ts":{"bytesInOutput":58},"src/useAsyncState.ts":{"bytesInOutput":447},"src/useControlledState.ts":{"bytesInOutput":756},"src/useDynamicRef.ts":{"bytesInOutput":724},"src/useDebugDeps.ts":{"bytesInOutput":966},"src/useDefaultValue.ts":{"bytesInOutput":422},"src/useDefaults.ts":{"bytesInOutput":228},"src/useFileDownload.ts":{"bytesInOutput":416},"src/useForwardedRef.ts":{"bytesInOutput":840},"src/useId.ts":{"bytesInOutput":421},"src/useIsFocused.ts":{"bytesInOutput":833},"src/useMediaQuery.ts":{"bytesInOutput":1941},"src/useMulticastObservable.ts":{"bytesInOutput":368},"src/useRefCallback.ts":{"bytesInOutput":197},"src/useViewportResize.ts":{"bytesInOutput":627},"src/useTimeout.ts":{"bytesInOutput":946},"src/useTransitions.ts":{"bytesInOutput":1409}},"bytes":12980}}}
|
|
@@ -43,58 +43,107 @@ var useAsyncState = (cb, deps = []) => {
|
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
// src/useControlledState.ts
|
|
46
|
-
import { useEffect as
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
|
|
47
|
+
|
|
48
|
+
// src/useDynamicRef.ts
|
|
49
|
+
import { useCallback, useEffect as useEffect3, useRef, useState as useState2 } from "react";
|
|
50
|
+
var useStateWithRef = (valueProp) => {
|
|
51
|
+
const [value, setValue] = useState2(valueProp);
|
|
52
|
+
const valueRef = useRef(valueProp);
|
|
53
|
+
const setter = useCallback((value2) => {
|
|
54
|
+
if (typeof value2 === "function") {
|
|
55
|
+
setValue((current) => {
|
|
56
|
+
valueRef.current = value2(current);
|
|
57
|
+
return valueRef.current;
|
|
58
|
+
});
|
|
59
|
+
} else {
|
|
60
|
+
valueRef.current = value2;
|
|
61
|
+
setValue(value2);
|
|
52
62
|
}
|
|
63
|
+
}, []);
|
|
64
|
+
return [
|
|
65
|
+
value,
|
|
66
|
+
setter,
|
|
67
|
+
valueRef
|
|
68
|
+
];
|
|
69
|
+
};
|
|
70
|
+
var useDynamicRef = (value) => {
|
|
71
|
+
const valueRef = useRef(value);
|
|
72
|
+
useEffect3(() => {
|
|
73
|
+
valueRef.current = value;
|
|
53
74
|
}, [
|
|
54
|
-
|
|
55
|
-
...deps
|
|
75
|
+
value
|
|
56
76
|
]);
|
|
57
|
-
|
|
58
|
-
|
|
77
|
+
return valueRef;
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
// src/useControlledState.ts
|
|
81
|
+
var useControlledState = (valueProp, onChange) => {
|
|
82
|
+
const [value, setControlledValue] = useState3(valueProp);
|
|
83
|
+
useEffect4(() => {
|
|
84
|
+
setControlledValue(valueProp);
|
|
59
85
|
}, [
|
|
60
|
-
|
|
61
|
-
|
|
86
|
+
valueProp
|
|
87
|
+
]);
|
|
88
|
+
const onChangeRef = useRef2(onChange);
|
|
89
|
+
const valueRef = useDynamicRef(valueProp);
|
|
90
|
+
const setValue = useCallback2((nextValue) => {
|
|
91
|
+
const value2 = isFunction(nextValue) ? nextValue(valueRef.current) : nextValue;
|
|
92
|
+
setControlledValue(value2);
|
|
93
|
+
onChangeRef.current?.(value2);
|
|
94
|
+
}, [
|
|
95
|
+
valueRef,
|
|
96
|
+
onChangeRef
|
|
62
97
|
]);
|
|
63
98
|
return [
|
|
64
99
|
value,
|
|
65
100
|
setValue
|
|
66
101
|
];
|
|
67
102
|
};
|
|
103
|
+
function isFunction(value) {
|
|
104
|
+
return typeof value === "function";
|
|
105
|
+
}
|
|
68
106
|
|
|
69
107
|
// src/useDebugDeps.ts
|
|
70
|
-
import { useEffect as
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
108
|
+
import { useEffect as useEffect5, useRef as useRef3 } from "react";
|
|
109
|
+
import { log } from "@dxos/log";
|
|
110
|
+
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-primitives/react-hooks/src/useDebugDeps.ts";
|
|
111
|
+
var useDebugDeps = (deps = [], label = "useDebugDeps", active = true) => {
|
|
112
|
+
const lastDeps = useRef3([]);
|
|
113
|
+
useEffect5(() => {
|
|
114
|
+
if (!active) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const diff = {};
|
|
78
118
|
for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
|
|
79
|
-
if (lastDeps.current[i] !== deps[i]) {
|
|
80
|
-
|
|
81
|
-
index: i,
|
|
119
|
+
if (lastDeps.current[i] !== deps[i] || i > lastDeps.current.length) {
|
|
120
|
+
diff[i] = {
|
|
82
121
|
previous: lastDeps.current[i],
|
|
83
122
|
current: deps[i]
|
|
84
|
-
}
|
|
123
|
+
};
|
|
85
124
|
}
|
|
86
125
|
}
|
|
87
|
-
|
|
126
|
+
if (Object.keys(diff).length > 0) {
|
|
127
|
+
log.warn(`Updated: ${label} [${lastDeps.current.length}/${deps.length}]`, diff, {
|
|
128
|
+
F: __dxlog_file,
|
|
129
|
+
L: 30,
|
|
130
|
+
S: void 0,
|
|
131
|
+
C: (f, a) => f(...a)
|
|
132
|
+
});
|
|
133
|
+
}
|
|
88
134
|
lastDeps.current = deps;
|
|
89
|
-
},
|
|
135
|
+
}, [
|
|
136
|
+
...deps,
|
|
137
|
+
active
|
|
138
|
+
]);
|
|
90
139
|
};
|
|
91
140
|
|
|
92
141
|
// src/useDefaultValue.ts
|
|
93
|
-
import { useEffect as
|
|
142
|
+
import { useEffect as useEffect6, useMemo, useState as useState4 } from "react";
|
|
94
143
|
var useDefaultValue = (reactiveValue, getDefaultValue) => {
|
|
95
144
|
const stableDefaultValue = useMemo(getDefaultValue, []);
|
|
96
|
-
const [value, setValue] =
|
|
97
|
-
|
|
145
|
+
const [value, setValue] = useState4(reactiveValue ?? stableDefaultValue);
|
|
146
|
+
useEffect6(() => {
|
|
98
147
|
setValue(reactiveValue ?? stableDefaultValue);
|
|
99
148
|
}, [
|
|
100
149
|
reactiveValue,
|
|
@@ -113,39 +162,6 @@ var useDefaults = (value, defaults) => {
|
|
|
113
162
|
]);
|
|
114
163
|
};
|
|
115
164
|
|
|
116
|
-
// src/useDynamicRef.ts
|
|
117
|
-
import { useCallback } from "@preact-signals/safe-react/react";
|
|
118
|
-
import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
|
|
119
|
-
var useStateWithRef = (value$) => {
|
|
120
|
-
const [value, setValue] = useState4(value$);
|
|
121
|
-
const valueRef = useRef2(value$);
|
|
122
|
-
const setter = useCallback((value2) => {
|
|
123
|
-
if (typeof value2 === "function") {
|
|
124
|
-
setValue((current) => {
|
|
125
|
-
valueRef.current = value2(current);
|
|
126
|
-
return valueRef.current;
|
|
127
|
-
});
|
|
128
|
-
} else {
|
|
129
|
-
valueRef.current = value2;
|
|
130
|
-
setValue(value2);
|
|
131
|
-
}
|
|
132
|
-
}, []);
|
|
133
|
-
return [
|
|
134
|
-
value,
|
|
135
|
-
setter,
|
|
136
|
-
valueRef
|
|
137
|
-
];
|
|
138
|
-
};
|
|
139
|
-
var useDynamicRef = (value) => {
|
|
140
|
-
const valueRef = useRef2(value);
|
|
141
|
-
useEffect6(() => {
|
|
142
|
-
valueRef.current = value;
|
|
143
|
-
}, [
|
|
144
|
-
value
|
|
145
|
-
]);
|
|
146
|
-
return valueRef;
|
|
147
|
-
};
|
|
148
|
-
|
|
149
165
|
// src/useFileDownload.ts
|
|
150
166
|
import { useMemo as useMemo3 } from "react";
|
|
151
167
|
var useFileDownload = () => {
|
|
@@ -160,38 +176,59 @@ var useFileDownload = () => {
|
|
|
160
176
|
};
|
|
161
177
|
|
|
162
178
|
// src/useForwardedRef.ts
|
|
163
|
-
import { useEffect as useEffect7, useRef as
|
|
164
|
-
var useForwardedRef = (
|
|
165
|
-
const
|
|
179
|
+
import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4 } from "react";
|
|
180
|
+
var useForwardedRef = (forwardedRef) => {
|
|
181
|
+
const localRef = useRef4(null);
|
|
166
182
|
useEffect7(() => {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
183
|
+
setRef(forwardedRef, localRef.current);
|
|
184
|
+
}, [
|
|
185
|
+
forwardedRef
|
|
186
|
+
]);
|
|
187
|
+
return localRef;
|
|
188
|
+
};
|
|
189
|
+
function setRef(ref, value) {
|
|
190
|
+
if (typeof ref === "function") {
|
|
191
|
+
return ref(value);
|
|
192
|
+
} else if (ref) {
|
|
193
|
+
ref.current = value;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
var mergeRefs = (refs) => {
|
|
197
|
+
return (value) => {
|
|
198
|
+
const cleanups = [];
|
|
199
|
+
for (const ref of refs) {
|
|
200
|
+
const cleanup = setRef(ref, value);
|
|
201
|
+
cleanups.push(typeof cleanup === "function" ? cleanup : () => setRef(ref, null));
|
|
174
202
|
}
|
|
175
|
-
|
|
176
|
-
|
|
203
|
+
return () => {
|
|
204
|
+
for (const cleanup of cleanups) cleanup();
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
};
|
|
208
|
+
var useMergeRefs = (refs) => {
|
|
209
|
+
return useMemo4(() => mergeRefs(refs), [
|
|
210
|
+
...refs
|
|
211
|
+
]);
|
|
177
212
|
};
|
|
178
213
|
|
|
179
214
|
// src/useId.ts
|
|
180
215
|
import alea from "alea";
|
|
181
|
-
import { useMemo as
|
|
216
|
+
import { useMemo as useMemo5 } from "react";
|
|
182
217
|
var Alea = alea;
|
|
183
218
|
var prng = new Alea("@dxos/react-hooks");
|
|
184
219
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
185
|
-
var useId = (namespace, propsId, opts) =>
|
|
186
|
-
propsId
|
|
187
|
-
|
|
220
|
+
var useId = (namespace, propsId, opts) => {
|
|
221
|
+
return useMemo5(() => makeId(namespace, propsId, opts), [
|
|
222
|
+
propsId
|
|
223
|
+
]);
|
|
224
|
+
};
|
|
188
225
|
var makeId = (namespace, propsId, opts) => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;
|
|
189
226
|
|
|
190
227
|
// src/useIsFocused.ts
|
|
191
|
-
import { useEffect as useEffect8, useRef as
|
|
228
|
+
import { useEffect as useEffect8, useRef as useRef5, useState as useState5 } from "react";
|
|
192
229
|
var useIsFocused = (inputRef) => {
|
|
193
230
|
const [isFocused, setIsFocused] = useState5(void 0);
|
|
194
|
-
const isFocusedRef =
|
|
231
|
+
const isFocusedRef = useRef5(isFocused);
|
|
195
232
|
isFocusedRef.current = isFocused;
|
|
196
233
|
useEffect8(() => {
|
|
197
234
|
const input = inputRef.current;
|
|
@@ -226,7 +263,7 @@ var breakpointMediaQueries = {
|
|
|
226
263
|
"2xl": "(min-width: 1536px)"
|
|
227
264
|
};
|
|
228
265
|
var useMediaQuery = (query, options = {}) => {
|
|
229
|
-
const { ssr =
|
|
266
|
+
const { ssr = false, fallback } = options;
|
|
230
267
|
const queries = (Array.isArray(query) ? query : [
|
|
231
268
|
query
|
|
232
269
|
]).map((query2) => query2 in breakpointMediaQueries ? breakpointMediaQueries[query2] : query2);
|
|
@@ -282,9 +319,9 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
282
319
|
};
|
|
283
320
|
|
|
284
321
|
// src/useMulticastObservable.ts
|
|
285
|
-
import { useMemo as
|
|
322
|
+
import { useMemo as useMemo6, useSyncExternalStore } from "react";
|
|
286
323
|
var useMulticastObservable = (observable) => {
|
|
287
|
-
const subscribeFn =
|
|
324
|
+
const subscribeFn = useMemo6(() => (listener) => {
|
|
288
325
|
const subscription = observable.subscribe(listener);
|
|
289
326
|
return () => subscription.unsubscribe();
|
|
290
327
|
}, [
|
|
@@ -303,10 +340,10 @@ var useRefCallback = () => {
|
|
|
303
340
|
};
|
|
304
341
|
};
|
|
305
342
|
|
|
306
|
-
// src/
|
|
307
|
-
import { useLayoutEffect, useMemo as
|
|
308
|
-
var
|
|
309
|
-
const debouncedHandler =
|
|
343
|
+
// src/useViewportResize.ts
|
|
344
|
+
import { useLayoutEffect, useMemo as useMemo7 } from "react";
|
|
345
|
+
var useViewportResize = (handler, deps = [], delay = 800) => {
|
|
346
|
+
const debouncedHandler = useMemo7(() => {
|
|
310
347
|
let timeout;
|
|
311
348
|
return (event) => {
|
|
312
349
|
clearTimeout(timeout);
|
|
@@ -328,39 +365,16 @@ var useResize = (handler, deps = [], delay = 800) => {
|
|
|
328
365
|
]);
|
|
329
366
|
};
|
|
330
367
|
|
|
331
|
-
// src/useSignals.ts
|
|
332
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
333
|
-
import { computed, effect } from "@preact-signals/safe-react";
|
|
334
|
-
import { useRef as useRef5 } from "@preact-signals/safe-react/react";
|
|
335
|
-
import { useEffect as useEffect10, useMemo as useMemo7 } from "react";
|
|
336
|
-
var useSignalsEffect = (cb, deps) => {
|
|
337
|
-
const callback = useRef5(cb);
|
|
338
|
-
callback.current = cb;
|
|
339
|
-
useEffect10(() => {
|
|
340
|
-
return effect(() => {
|
|
341
|
-
return callback.current();
|
|
342
|
-
});
|
|
343
|
-
}, deps ?? []);
|
|
344
|
-
};
|
|
345
|
-
var useSignalsMemo = (cb, deps) => {
|
|
346
|
-
var _effect = _useSignals();
|
|
347
|
-
try {
|
|
348
|
-
return useMemo7(() => computed(cb), deps ?? []).value;
|
|
349
|
-
} finally {
|
|
350
|
-
_effect.f();
|
|
351
|
-
}
|
|
352
|
-
};
|
|
353
|
-
|
|
354
368
|
// src/useTimeout.ts
|
|
355
|
-
import { useEffect as
|
|
369
|
+
import { useEffect as useEffect10, useRef as useRef6 } from "react";
|
|
356
370
|
var useTimeout = (callback, delay = 0, deps = []) => {
|
|
357
371
|
const callbackRef = useRef6(callback);
|
|
358
|
-
|
|
372
|
+
useEffect10(() => {
|
|
359
373
|
callbackRef.current = callback;
|
|
360
374
|
}, [
|
|
361
375
|
callback
|
|
362
376
|
]);
|
|
363
|
-
|
|
377
|
+
useEffect10(() => {
|
|
364
378
|
if (delay == null) {
|
|
365
379
|
return;
|
|
366
380
|
}
|
|
@@ -373,12 +387,12 @@ var useTimeout = (callback, delay = 0, deps = []) => {
|
|
|
373
387
|
};
|
|
374
388
|
var useInterval = (callback, delay = 0, deps = []) => {
|
|
375
389
|
const callbackRef = useRef6(callback);
|
|
376
|
-
|
|
390
|
+
useEffect10(() => {
|
|
377
391
|
callbackRef.current = callback;
|
|
378
392
|
}, [
|
|
379
393
|
callback
|
|
380
394
|
]);
|
|
381
|
-
|
|
395
|
+
useEffect10(() => {
|
|
382
396
|
if (delay == null) {
|
|
383
397
|
return;
|
|
384
398
|
}
|
|
@@ -395,49 +409,17 @@ var useInterval = (callback, delay = 0, deps = []) => {
|
|
|
395
409
|
]);
|
|
396
410
|
};
|
|
397
411
|
|
|
398
|
-
// src/useTrackProps.ts
|
|
399
|
-
import { useEffect as useEffect12, useRef as useRef7 } from "react";
|
|
400
|
-
import { log } from "@dxos/log";
|
|
401
|
-
var __dxlog_file = "/__w/dxos/dxos/packages/ui/primitives/react-hooks/src/useTrackProps.ts";
|
|
402
|
-
var useTrackProps = (props, componentName = "Component", active = true) => {
|
|
403
|
-
const prevProps = useRef7(props);
|
|
404
|
-
useEffect12(() => {
|
|
405
|
-
const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);
|
|
406
|
-
if (changes.length > 0) {
|
|
407
|
-
if (active) {
|
|
408
|
-
log.info("props changed", {
|
|
409
|
-
componentName,
|
|
410
|
-
keys: changes.map(([key]) => key).join(","),
|
|
411
|
-
props: Object.fromEntries(changes.map(([key]) => [
|
|
412
|
-
key,
|
|
413
|
-
{
|
|
414
|
-
from: prevProps.current[key],
|
|
415
|
-
to: props[key]
|
|
416
|
-
}
|
|
417
|
-
]))
|
|
418
|
-
}, {
|
|
419
|
-
F: __dxlog_file,
|
|
420
|
-
L: 22,
|
|
421
|
-
S: void 0,
|
|
422
|
-
C: (f, a) => f(...a)
|
|
423
|
-
});
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
prevProps.current = props;
|
|
427
|
-
});
|
|
428
|
-
};
|
|
429
|
-
|
|
430
412
|
// src/useTransitions.ts
|
|
431
|
-
import { useEffect as
|
|
432
|
-
var
|
|
413
|
+
import { useEffect as useEffect11, useRef as useRef7, useState as useState8 } from "react";
|
|
414
|
+
var isFunction2 = (functionToCheck) => {
|
|
433
415
|
return functionToCheck instanceof Function;
|
|
434
416
|
};
|
|
435
417
|
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
436
418
|
const [hasTransitioned, setHasTransitioned] = useState8(false);
|
|
437
|
-
const previousValue =
|
|
438
|
-
|
|
439
|
-
const toValueValid =
|
|
440
|
-
const fromValueValid =
|
|
419
|
+
const previousValue = useRef7(currentValue);
|
|
420
|
+
useEffect11(() => {
|
|
421
|
+
const toValueValid = isFunction2(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
422
|
+
const fromValueValid = isFunction2(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
441
423
|
if (fromValueValid && toValueValid && !hasTransitioned) {
|
|
442
424
|
setHasTransitioned(true);
|
|
443
425
|
} else if ((!fromValueValid || !toValueValid) && hasTransitioned) {
|
|
@@ -453,15 +435,15 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
|
453
435
|
return hasTransitioned;
|
|
454
436
|
};
|
|
455
437
|
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
456
|
-
const dirty =
|
|
438
|
+
const dirty = useRef7(false);
|
|
457
439
|
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
458
|
-
|
|
440
|
+
useEffect11(() => {
|
|
459
441
|
dirty.current = false;
|
|
460
442
|
}, [
|
|
461
443
|
currentValue,
|
|
462
444
|
dirty
|
|
463
445
|
]);
|
|
464
|
-
|
|
446
|
+
useEffect11(() => {
|
|
465
447
|
if (hasTransitioned && !dirty.current) {
|
|
466
448
|
callback();
|
|
467
449
|
dirty.current = true;
|
|
@@ -472,9 +454,14 @@ var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
|
472
454
|
callback
|
|
473
455
|
]);
|
|
474
456
|
};
|
|
457
|
+
|
|
458
|
+
// src/index.ts
|
|
459
|
+
import { useSize, useScroller } from "mini-virtual-list";
|
|
475
460
|
export {
|
|
476
461
|
makeId,
|
|
462
|
+
mergeRefs,
|
|
477
463
|
randomString,
|
|
464
|
+
setRef,
|
|
478
465
|
useAsyncEffect,
|
|
479
466
|
useAsyncState,
|
|
480
467
|
useControlledState,
|
|
@@ -489,14 +476,14 @@ export {
|
|
|
489
476
|
useInterval,
|
|
490
477
|
useIsFocused,
|
|
491
478
|
useMediaQuery,
|
|
479
|
+
useMergeRefs,
|
|
492
480
|
useMulticastObservable,
|
|
493
481
|
useOnTransition,
|
|
494
482
|
useRefCallback,
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
useSignalsMemo,
|
|
483
|
+
useScroller,
|
|
484
|
+
useSize,
|
|
498
485
|
useStateWithRef,
|
|
499
486
|
useTimeout,
|
|
500
|
-
|
|
487
|
+
useViewportResize
|
|
501
488
|
};
|
|
502
489
|
//# sourceMappingURL=index.mjs.map
|