@dxos/react-hooks 0.8.4-main.1f223c7 → 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.
Files changed (50) hide show
  1. package/dist/lib/browser/index.mjs +147 -160
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +147 -160
  5. package/dist/lib/node-esm/index.mjs.map +4 -4
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/types/src/index.d.ts +2 -3
  8. package/dist/types/src/index.d.ts.map +1 -1
  9. package/dist/types/src/useControlledState.d.ts +2 -2
  10. package/dist/types/src/useControlledState.d.ts.map +1 -1
  11. package/dist/types/src/useDebugDeps.d.ts +1 -1
  12. package/dist/types/src/useDebugDeps.d.ts.map +1 -1
  13. package/dist/types/src/useDynamicRef.d.ts +3 -3
  14. package/dist/types/src/useDynamicRef.d.ts.map +1 -1
  15. package/dist/types/src/useForwardedRef.d.ts +23 -3
  16. package/dist/types/src/useForwardedRef.d.ts.map +1 -1
  17. package/dist/types/src/useId.d.ts.map +1 -1
  18. package/dist/types/src/useIsFocused.d.ts +1 -1
  19. package/dist/types/src/useIsFocused.d.ts.map +1 -1
  20. package/dist/types/src/useMediaQuery.d.ts +1 -1
  21. package/dist/types/src/useMediaQuery.d.ts.map +1 -1
  22. package/dist/types/src/useMulticastObservable.test.d.ts.map +1 -1
  23. package/dist/types/src/useTransitions.d.ts +2 -1
  24. package/dist/types/src/useTransitions.d.ts.map +1 -1
  25. package/dist/types/src/useViewportResize.d.ts +3 -0
  26. package/dist/types/src/useViewportResize.d.ts.map +1 -0
  27. package/dist/types/tsconfig.tsbuildinfo +1 -1
  28. package/package.json +16 -11
  29. package/src/index.ts +3 -3
  30. package/src/useControlledState.ts +22 -12
  31. package/src/useDebugDeps.ts +17 -8
  32. package/src/useDynamicRef.ts +5 -6
  33. package/src/useForwardedRef.ts +48 -13
  34. package/src/useId.ts +3 -2
  35. package/src/useIsFocused.ts +1 -1
  36. package/src/useMediaQuery.ts +8 -9
  37. package/src/{useMulticastObservable.test.tsx → useMulticastObservable.test.ts} +1 -3
  38. package/src/useTransitions.ts +3 -1
  39. package/src/{useResize.ts → useViewportResize.ts} +1 -1
  40. package/dist/types/src/useAsyncEffect.stories.d.ts +0 -9
  41. package/dist/types/src/useAsyncEffect.stories.d.ts.map +0 -1
  42. package/dist/types/src/useResize.d.ts +0 -3
  43. package/dist/types/src/useResize.d.ts.map +0 -1
  44. package/dist/types/src/useSignals.d.ts +0 -10
  45. package/dist/types/src/useSignals.d.ts.map +0 -1
  46. package/dist/types/src/useTrackProps.d.ts +0 -5
  47. package/dist/types/src/useTrackProps.d.ts.map +0 -1
  48. package/src/useAsyncEffect.stories.tsx +0 -34
  49. package/src/useSignals.ts +0 -27
  50. package/src/useTrackProps.ts +0 -40
@@ -1 +1 @@
1
- {"inputs":{"src/useAsyncEffect.ts":{"bytes":2988,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useAsyncState.ts":{"bytes":2577,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useControlledState.ts":{"bytes":2462,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDebugDeps.ts":{"bytes":3041,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaultValue.ts":{"bytes":4033,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaults.ts":{"bytes":1591,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDynamicRef.ts":{"bytes":3728,"imports":[{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useFileDownload.ts":{"bytes":2671,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useForwardedRef.ts":{"bytes":2045,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useId.ts":{"bytes":2466,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useIsFocused.ts":{"bytes":3909,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMediaQuery.ts":{"bytes":9396,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMulticastObservable.ts":{"bytes":2972,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useRefCallback.ts":{"bytes":1818,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useResize.ts":{"bytes":2826,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useSignals.ts":{"bytes":2923,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTimeout.ts":{"bytes":3956,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTrackProps.ts":{"bytes":3997,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"src/useTransitions.ts":{"bytes":7750,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":2309,"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/useResize.ts","kind":"import-statement","original":"./useResize"},{"path":"src/useSignals.ts","kind":"import-statement","original":"./useSignals"},{"path":"src/useTimeout.ts","kind":"import-statement","original":"./useTimeout"},{"path":"src/useTrackProps.ts","kind":"import-statement","original":"./useTrackProps"},{"path":"src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33287},"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":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/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}],"exports":["makeId","randomString","useAsyncEffect","useAsyncState","useControlledState","useDebugDeps","useDefaultValue","useDefaults","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useInterval","useIsFocused","useMediaQuery","useMulticastObservable","useOnTransition","useRefCallback","useResize","useSignalsEffect","useSignalsMemo","useStateWithRef","useTimeout","useTrackProps"],"entryPoint":"src/index.ts","inputs":{"src/useAsyncEffect.ts":{"bytesInOutput":405},"src/index.ts":{"bytesInOutput":0},"src/useAsyncState.ts":{"bytesInOutput":447},"src/useControlledState.ts":{"bytesInOutput":463},"src/useDebugDeps.ts":{"bytesInOutput":606},"src/useDefaultValue.ts":{"bytesInOutput":422},"src/useDefaults.ts":{"bytesInOutput":228},"src/useDynamicRef.ts":{"bytesInOutput":779},"src/useFileDownload.ts":{"bytesInOutput":416},"src/useForwardedRef.ts":{"bytesInOutput":343},"src/useId.ts":{"bytesInOutput":403},"src/useIsFocused.ts":{"bytesInOutput":833},"src/useMediaQuery.ts":{"bytesInOutput":1940},"src/useMulticastObservable.ts":{"bytesInOutput":368},"src/useRefCallback.ts":{"bytesInOutput":197},"src/useResize.ts":{"bytesInOutput":619},"src/useSignals.ts":{"bytesInOutput":664},"src/useTimeout.ts":{"bytesInOutput":946},"src/useTrackProps.ts":{"bytesInOutput":964},"src/useTransitions.ts":{"bytesInOutput":1406}},"bytes":13399}}}
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 useEffect3, useState as useState2 } from "react";
47
- var useControlledState = (controlledValue, onChange, ...deps) => {
48
- const [value, setValue] = useState2(controlledValue);
49
- useEffect3(() => {
50
- if (controlledValue !== void 0) {
51
- setValue(controlledValue);
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
- controlledValue,
55
- ...deps
75
+ value
56
76
  ]);
57
- useEffect3(() => {
58
- onChange?.(value);
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
- value,
61
- onChange
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 useEffect4, useRef } from "react";
71
- var useDebugDeps = (deps = []) => {
72
- const lastDeps = useRef([]);
73
- useEffect4(() => {
74
- console.group("deps changed", {
75
- previous: lastDeps.current.length,
76
- current: deps.length
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
- console.log("changed", {
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
- console.groupEnd();
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
- }, deps);
135
+ }, [
136
+ ...deps,
137
+ active
138
+ ]);
90
139
  };
91
140
 
92
141
  // src/useDefaultValue.ts
93
- import { useEffect as useEffect5, useMemo, useState as useState3 } from "react";
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] = useState3(reactiveValue ?? stableDefaultValue);
97
- useEffect5(() => {
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 useRef3 } from "react";
164
- var useForwardedRef = (ref) => {
165
- const innerRef = useRef3(null);
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
- if (!ref) {
168
- return;
169
- }
170
- if (typeof ref === "function") {
171
- ref(innerRef.current);
172
- } else {
173
- ref.current = innerRef.current;
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
- return innerRef;
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 useMemo4 } from "react";
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) => useMemo4(() => makeId(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 useRef4, useState as useState5 } from "react";
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 = useRef4(isFocused);
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 = true, fallback } = options;
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 useMemo5, useSyncExternalStore } from "react";
322
+ import { useMemo as useMemo6, useSyncExternalStore } from "react";
286
323
  var useMulticastObservable = (observable) => {
287
- const subscribeFn = useMemo5(() => (listener) => {
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/useResize.ts
307
- import { useLayoutEffect, useMemo as useMemo6 } from "react";
308
- var useResize = (handler, deps = [], delay = 800) => {
309
- const debouncedHandler = useMemo6(() => {
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 useEffect11, useRef as useRef6 } from "react";
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
- useEffect11(() => {
372
+ useEffect10(() => {
359
373
  callbackRef.current = callback;
360
374
  }, [
361
375
  callback
362
376
  ]);
363
- useEffect11(() => {
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
- useEffect11(() => {
390
+ useEffect10(() => {
377
391
  callbackRef.current = callback;
378
392
  }, [
379
393
  callback
380
394
  ]);
381
- useEffect11(() => {
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 useEffect13, useRef as useRef8, useState as useState8 } from "react";
432
- var isFunction = (functionToCheck) => {
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 = useRef8(currentValue);
438
- useEffect13(() => {
439
- const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
440
- const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
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 = useRef8(false);
438
+ const dirty = useRef7(false);
457
439
  const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
458
- useEffect13(() => {
440
+ useEffect11(() => {
459
441
  dirty.current = false;
460
442
  }, [
461
443
  currentValue,
462
444
  dirty
463
445
  ]);
464
- useEffect13(() => {
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
- useResize,
496
- useSignalsEffect,
497
- useSignalsMemo,
483
+ useScroller,
484
+ useSize,
498
485
  useStateWithRef,
499
486
  useTimeout,
500
- useTrackProps
487
+ useViewportResize
501
488
  };
502
489
  //# sourceMappingURL=index.mjs.map