@choice-ui/react 2.0.1 → 2.0.2
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/components/button/dist/index.js +7 -0
- package/dist/components/checkbox/dist/index.d.ts +10 -1
- package/dist/components/checkbox/dist/index.js +49 -5
- package/dist/components/colors/dist/index.d.ts +39 -6
- package/dist/components/colors/src/color-image-paint/color-image-paint.js +2 -2
- package/dist/components/command/dist/index.d.ts +13 -0
- package/dist/components/dropdown/dist/index.d.ts +6 -0
- package/dist/components/dropdown/dist/index.js +20 -10
- package/dist/components/emoji-picker/dist/index.d.ts +29 -1
- package/dist/components/emoji-picker/dist/index.js +144 -42
- package/dist/components/form/src/adapters/range-adapter.js +2 -2
- package/dist/components/icon-button/dist/index.d.ts +1 -1
- package/dist/components/icon-button/dist/index.js +39 -0
- package/dist/components/list/dist/index.d.ts +1 -1
- package/dist/components/md-render/src/md-render.js +4 -0
- package/dist/components/md-render/src/types.d.ts +3 -0
- package/dist/components/menus/dist/index.d.ts +5 -0
- package/dist/components/menus/dist/index.js +32 -3
- package/dist/components/numeric-input/dist/index.d.ts +2 -0
- package/dist/components/numeric-input/dist/index.js +64 -24
- package/dist/components/numeric-input/src/hooks/use-input-interactions.d.ts +3 -1
- package/dist/components/numeric-input/src/hooks/use-input-interactions.js +7 -3
- package/dist/components/numeric-input/src/hooks/use-numeric-input.js +15 -4
- package/dist/components/numeric-input/src/numeric-input.js +5 -4
- package/dist/components/numeric-input/src/utils/value-comparator.js +1 -5
- package/dist/components/radio/dist/index.d.ts +9 -1
- package/dist/components/radio/dist/index.js +50 -6
- package/dist/components/range/dist/index.d.ts +276 -20
- package/dist/components/range/dist/index.js +1030 -602
- package/dist/components/scroll-area/dist/index.d.ts +4 -27
- package/dist/components/scroll-area/dist/index.js +96 -123
- package/dist/components/textarea/dist/index.js +3 -1
- package/dist/components/tooltip/dist/index.d.ts +2 -0
- package/dist/components/tooltip/dist/index.js +23 -5
- package/dist/components/virtual-select/dist/index.d.ts +48 -0
- package/package.json +19 -31
|
@@ -61,9 +61,9 @@ declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & reac
|
|
|
61
61
|
};
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
|
-
* Merged scroll state and visibility management hook
|
|
64
|
+
* Merged scroll state and visibility management hook
|
|
65
65
|
*/
|
|
66
|
-
declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null): {
|
|
66
|
+
declare function useScrollStateAndVisibility(viewport: HTMLDivElement | null, content: HTMLDivElement | null): {
|
|
67
67
|
scrollState: ScrollState;
|
|
68
68
|
isHovering: boolean;
|
|
69
69
|
isScrolling: boolean;
|
|
@@ -86,7 +86,7 @@ declare function useThumbStyle(scrollState: ScrollState, orientation: "vertical"
|
|
|
86
86
|
top?: undefined;
|
|
87
87
|
};
|
|
88
88
|
/**
|
|
89
|
-
*
|
|
89
|
+
* High-performance thumb drag hook
|
|
90
90
|
*/
|
|
91
91
|
declare function useThumbDrag(viewport: HTMLDivElement | null, scrollState: ScrollState, orientation: "vertical" | "horizontal"): {
|
|
92
92
|
isDragging: boolean;
|
|
@@ -102,27 +102,4 @@ declare function useHasOverflow(scrollState: ScrollState, orientation: "vertical
|
|
|
102
102
|
*/
|
|
103
103
|
declare function useScrollbarShouldShow(type: ScrollbarVisibilityType, hasOverflow: boolean, isScrolling: boolean, isHovering: boolean): boolean;
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
averageFrameTime: number;
|
|
107
|
-
droppedFrames: number;
|
|
108
|
-
maxFrameTime: number;
|
|
109
|
-
scrollEventFrequency: number;
|
|
110
|
-
updateFrequency: number;
|
|
111
|
-
}
|
|
112
|
-
interface PerformanceMonitorOptions {
|
|
113
|
-
enabled?: boolean;
|
|
114
|
-
frameTimeThreshold?: number;
|
|
115
|
-
logInterval?: number;
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* 🔍 ScrollArea performance monitoring Hook
|
|
119
|
-
*
|
|
120
|
-
* Used to monitor and diagnose scroll performance issues, including:
|
|
121
|
-
* - Frame rate monitoring
|
|
122
|
-
* - Event frequency statistics
|
|
123
|
-
* - Performance bottleneck detection
|
|
124
|
-
* - Real-time performance reporting
|
|
125
|
-
*/
|
|
126
|
-
declare function useScrollPerformanceMonitor(viewport: HTMLDivElement | null, options?: PerformanceMonitorOptions): PerformanceMetrics | null;
|
|
127
|
-
|
|
128
|
-
export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollPerformanceMonitor, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };
|
|
105
|
+
export { ScrollArea, type ScrollAreaProps, type ScrollbarProps, type ThumbProps, useHasOverflow, useScrollStateAndVisibility, useScrollbarShouldShow, useThumbDrag, useThumbStyle };
|
|
@@ -1,15 +1,29 @@
|
|
|
1
1
|
import { forwardRef, useState, useId, useMemo, createContext, useCallback, useRef, useEffect, useContext } from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
var ScrollAreaStateContext = createContext(null);
|
|
5
|
+
var ScrollAreaConfigContext = createContext(null);
|
|
6
|
+
var ERROR_MESSAGE = "ScrollArea compound components must be used within ScrollArea";
|
|
7
|
+
function useScrollAreaStateContext() {
|
|
8
|
+
const context = useContext(ScrollAreaStateContext);
|
|
9
|
+
if (!context) {
|
|
10
|
+
throw new Error(ERROR_MESSAGE);
|
|
11
|
+
}
|
|
12
|
+
return context;
|
|
13
|
+
}
|
|
14
|
+
function useScrollAreaConfigContext() {
|
|
15
|
+
const context = useContext(ScrollAreaConfigContext);
|
|
7
16
|
if (!context) {
|
|
8
|
-
throw new Error(
|
|
17
|
+
throw new Error(ERROR_MESSAGE);
|
|
9
18
|
}
|
|
10
19
|
return context;
|
|
11
20
|
}
|
|
12
|
-
function
|
|
21
|
+
function useScrollAreaContext() {
|
|
22
|
+
const state = useScrollAreaStateContext();
|
|
23
|
+
const config = useScrollAreaConfigContext();
|
|
24
|
+
return { ...state, ...config };
|
|
25
|
+
}
|
|
26
|
+
function useScrollStateAndVisibility(viewport, content) {
|
|
13
27
|
const [scrollState, setScrollState] = useState({
|
|
14
28
|
scrollLeft: 0,
|
|
15
29
|
scrollTop: 0,
|
|
@@ -23,8 +37,6 @@ function useScrollStateAndVisibility(viewport) {
|
|
|
23
37
|
const scrollTimeoutRef = useRef();
|
|
24
38
|
const rafRef = useRef();
|
|
25
39
|
const resizeObserverRef = useRef();
|
|
26
|
-
const mutationObserverRef = useRef();
|
|
27
|
-
const mutationTimeoutRef = useRef();
|
|
28
40
|
const lastUpdateTimeRef = useRef(0);
|
|
29
41
|
const minUpdateIntervalRef = useRef(16);
|
|
30
42
|
const updateScrollState = useCallback(() => {
|
|
@@ -36,36 +48,36 @@ function useScrollStateAndVisibility(viewport) {
|
|
|
36
48
|
cancelAnimationFrame(rafRef.current);
|
|
37
49
|
}
|
|
38
50
|
rafRef.current = requestAnimationFrame(() => {
|
|
51
|
+
rafRef.current = void 0;
|
|
39
52
|
updateScrollState();
|
|
40
53
|
});
|
|
41
54
|
return;
|
|
42
55
|
}
|
|
43
56
|
if (rafRef.current) {
|
|
44
57
|
cancelAnimationFrame(rafRef.current);
|
|
58
|
+
rafRef.current = void 0;
|
|
45
59
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
return prevState;
|
|
68
|
-
});
|
|
60
|
+
const newState = {
|
|
61
|
+
scrollLeft: viewport.scrollLeft,
|
|
62
|
+
scrollTop: viewport.scrollTop,
|
|
63
|
+
scrollWidth: viewport.scrollWidth,
|
|
64
|
+
scrollHeight: viewport.scrollHeight,
|
|
65
|
+
clientWidth: viewport.clientWidth,
|
|
66
|
+
clientHeight: viewport.clientHeight
|
|
67
|
+
};
|
|
68
|
+
setScrollState((prevState) => {
|
|
69
|
+
const scrollLeftChanged = Math.abs(prevState.scrollLeft - newState.scrollLeft) > 0.5;
|
|
70
|
+
const scrollTopChanged = Math.abs(prevState.scrollTop - newState.scrollTop) > 0.5;
|
|
71
|
+
const scrollWidthChanged = prevState.scrollWidth !== newState.scrollWidth;
|
|
72
|
+
const scrollHeightChanged = prevState.scrollHeight !== newState.scrollHeight;
|
|
73
|
+
const clientWidthChanged = prevState.clientWidth !== newState.clientWidth;
|
|
74
|
+
const clientHeightChanged = prevState.clientHeight !== newState.clientHeight;
|
|
75
|
+
const hasChanges = scrollLeftChanged || scrollTopChanged || scrollWidthChanged || scrollHeightChanged || clientWidthChanged || clientHeightChanged;
|
|
76
|
+
if (hasChanges) {
|
|
77
|
+
lastUpdateTimeRef.current = now;
|
|
78
|
+
return newState;
|
|
79
|
+
}
|
|
80
|
+
return prevState;
|
|
69
81
|
});
|
|
70
82
|
}, [viewport]);
|
|
71
83
|
const delayedUpdateScrollState = useCallback(() => {
|
|
@@ -102,54 +114,19 @@ function useScrollStateAndVisibility(viewport) {
|
|
|
102
114
|
passive: true,
|
|
103
115
|
signal,
|
|
104
116
|
capture: false
|
|
105
|
-
// Avoid unnecessary event capture
|
|
106
117
|
});
|
|
107
118
|
window.addEventListener("resize", handleResize, {
|
|
108
119
|
passive: true,
|
|
109
120
|
signal
|
|
110
121
|
});
|
|
111
122
|
if (window.ResizeObserver) {
|
|
112
|
-
resizeObserverRef.current = new ResizeObserver((
|
|
113
|
-
|
|
114
|
-
if (entry.target === viewport) {
|
|
115
|
-
updateScrollState();
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
123
|
+
resizeObserverRef.current = new ResizeObserver(() => {
|
|
124
|
+
updateScrollState();
|
|
119
125
|
});
|
|
120
126
|
resizeObserverRef.current.observe(viewport);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
const hasLayoutChanges = mutations.some((mutation) => {
|
|
125
|
-
if (mutation.type === "childList") {
|
|
126
|
-
return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
|
|
127
|
-
}
|
|
128
|
-
if (mutation.type === "attributes") {
|
|
129
|
-
const attr = mutation.attributeName;
|
|
130
|
-
return attr === "style" || attr === "class";
|
|
131
|
-
}
|
|
132
|
-
return mutation.type === "characterData";
|
|
133
|
-
});
|
|
134
|
-
if (!hasLayoutChanges) return;
|
|
135
|
-
if (mutationTimeoutRef.current) {
|
|
136
|
-
clearTimeout(mutationTimeoutRef.current);
|
|
137
|
-
}
|
|
138
|
-
mutationTimeoutRef.current = window.setTimeout(() => {
|
|
139
|
-
updateScrollState();
|
|
140
|
-
}, 16);
|
|
141
|
-
});
|
|
142
|
-
mutationObserverRef.current.observe(viewport, {
|
|
143
|
-
childList: true,
|
|
144
|
-
subtree: true,
|
|
145
|
-
attributes: true,
|
|
146
|
-
attributeFilter: ["style", "class"],
|
|
147
|
-
// Only listen to attributes that affect layout
|
|
148
|
-
characterData: true,
|
|
149
|
-
characterDataOldValue: false,
|
|
150
|
-
// No need for old value, improve performance
|
|
151
|
-
attributeOldValue: false
|
|
152
|
-
});
|
|
127
|
+
if (content) {
|
|
128
|
+
resizeObserverRef.current.observe(content);
|
|
129
|
+
}
|
|
153
130
|
}
|
|
154
131
|
delayedUpdateScrollState();
|
|
155
132
|
return () => {
|
|
@@ -158,10 +135,6 @@ function useScrollStateAndVisibility(viewport) {
|
|
|
158
135
|
clearTimeout(scrollTimeoutRef.current);
|
|
159
136
|
scrollTimeoutRef.current = void 0;
|
|
160
137
|
}
|
|
161
|
-
if (mutationTimeoutRef.current) {
|
|
162
|
-
clearTimeout(mutationTimeoutRef.current);
|
|
163
|
-
mutationTimeoutRef.current = void 0;
|
|
164
|
-
}
|
|
165
138
|
if (rafRef.current) {
|
|
166
139
|
cancelAnimationFrame(rafRef.current);
|
|
167
140
|
rafRef.current = void 0;
|
|
@@ -170,12 +143,8 @@ function useScrollStateAndVisibility(viewport) {
|
|
|
170
143
|
resizeObserverRef.current.disconnect();
|
|
171
144
|
resizeObserverRef.current = void 0;
|
|
172
145
|
}
|
|
173
|
-
if (mutationObserverRef.current) {
|
|
174
|
-
mutationObserverRef.current.disconnect();
|
|
175
|
-
mutationObserverRef.current = void 0;
|
|
176
|
-
}
|
|
177
146
|
};
|
|
178
|
-
}, [viewport, handleScroll, delayedUpdateScrollState]);
|
|
147
|
+
}, [viewport, content, handleScroll, delayedUpdateScrollState, updateScrollState]);
|
|
179
148
|
const handleMouseEnter = useCallback(() => setIsHovering(true), []);
|
|
180
149
|
const handleMouseLeave = useCallback(() => setIsHovering(false), []);
|
|
181
150
|
return {
|
|
@@ -229,16 +198,13 @@ function useThumbDrag(viewport, scrollState, orientation) {
|
|
|
229
198
|
const isDragging = useRef(false);
|
|
230
199
|
const startPos = useRef(0);
|
|
231
200
|
const startScroll = useRef(0);
|
|
232
|
-
const rafId = useRef();
|
|
233
201
|
const cleanupRef = useRef(null);
|
|
202
|
+
const scrollStateRef = useRef(scrollState);
|
|
203
|
+
scrollStateRef.current = scrollState;
|
|
234
204
|
const dragContextRef = useRef(null);
|
|
235
205
|
useEffect(() => {
|
|
236
206
|
return () => {
|
|
237
207
|
isDragging.current = false;
|
|
238
|
-
if (rafId.current) {
|
|
239
|
-
cancelAnimationFrame(rafId.current);
|
|
240
|
-
rafId.current = void 0;
|
|
241
|
-
}
|
|
242
208
|
if (cleanupRef.current) {
|
|
243
209
|
cleanupRef.current();
|
|
244
210
|
cleanupRef.current = null;
|
|
@@ -248,13 +214,21 @@ function useThumbDrag(viewport, scrollState, orientation) {
|
|
|
248
214
|
const handleMouseDown = useCallback(
|
|
249
215
|
(e) => {
|
|
250
216
|
if (!viewport) return;
|
|
217
|
+
const currentScrollState = scrollStateRef.current;
|
|
251
218
|
const target = e.currentTarget;
|
|
252
219
|
const scrollbar = target.closest('[role="scrollbar"]');
|
|
253
220
|
if (!scrollbar) return;
|
|
254
221
|
const scrollbarRect = scrollbar.getBoundingClientRect();
|
|
255
|
-
const scrollableRange = orientation === "vertical" ? Math.max(0,
|
|
222
|
+
const scrollableRange = orientation === "vertical" ? Math.max(0, currentScrollState.scrollHeight - currentScrollState.clientHeight) : Math.max(0, currentScrollState.scrollWidth - currentScrollState.clientWidth);
|
|
256
223
|
const scrollbarRange = orientation === "vertical" ? scrollbarRect.height : scrollbarRect.width;
|
|
257
224
|
if (scrollableRange <= 0 || scrollbarRange <= 0) return;
|
|
225
|
+
const thumbFraction = Math.max(
|
|
226
|
+
0.1,
|
|
227
|
+
orientation === "vertical" ? currentScrollState.clientHeight / currentScrollState.scrollHeight : currentScrollState.clientWidth / currentScrollState.scrollWidth
|
|
228
|
+
);
|
|
229
|
+
const thumbSizePixels = scrollbarRange * thumbFraction;
|
|
230
|
+
const effectiveTrackRange = scrollbarRange - thumbSizePixels;
|
|
231
|
+
if (effectiveTrackRange <= 0) return;
|
|
258
232
|
dragContextRef.current = {
|
|
259
233
|
scrollbarRect,
|
|
260
234
|
scrollableRange,
|
|
@@ -262,34 +236,26 @@ function useThumbDrag(viewport, scrollState, orientation) {
|
|
|
262
236
|
};
|
|
263
237
|
isDragging.current = true;
|
|
264
238
|
startPos.current = orientation === "vertical" ? e.clientY : e.clientX;
|
|
265
|
-
startScroll.current = orientation === "vertical" ?
|
|
266
|
-
const scrollRatio = scrollableRange /
|
|
239
|
+
startScroll.current = orientation === "vertical" ? currentScrollState.scrollTop : currentScrollState.scrollLeft;
|
|
240
|
+
const scrollRatio = scrollableRange / effectiveTrackRange;
|
|
267
241
|
const handleMouseMove = (e2) => {
|
|
268
242
|
if (!isDragging.current || !viewport || !dragContextRef.current) return;
|
|
269
|
-
|
|
270
|
-
|
|
243
|
+
const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
|
|
244
|
+
const delta = currentPos - startPos.current;
|
|
245
|
+
const scrollDelta = delta * scrollRatio;
|
|
246
|
+
const newScrollValue = Math.max(
|
|
247
|
+
0,
|
|
248
|
+
Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
|
|
249
|
+
);
|
|
250
|
+
if (orientation === "vertical") {
|
|
251
|
+
viewport.scrollTop = newScrollValue;
|
|
252
|
+
} else {
|
|
253
|
+
viewport.scrollLeft = newScrollValue;
|
|
271
254
|
}
|
|
272
|
-
rafId.current = requestAnimationFrame(() => {
|
|
273
|
-
const currentPos = orientation === "vertical" ? e2.clientY : e2.clientX;
|
|
274
|
-
const delta = currentPos - startPos.current;
|
|
275
|
-
const scrollDelta = delta * scrollRatio;
|
|
276
|
-
const newScrollValue = Math.max(
|
|
277
|
-
0,
|
|
278
|
-
Math.min(startScroll.current + scrollDelta, dragContextRef.current.scrollableRange)
|
|
279
|
-
);
|
|
280
|
-
if (orientation === "vertical") {
|
|
281
|
-
viewport.scrollTop = newScrollValue;
|
|
282
|
-
} else {
|
|
283
|
-
viewport.scrollLeft = newScrollValue;
|
|
284
|
-
}
|
|
285
|
-
});
|
|
286
255
|
};
|
|
287
256
|
const handleMouseUp = () => {
|
|
288
257
|
isDragging.current = false;
|
|
289
258
|
dragContextRef.current = null;
|
|
290
|
-
if (rafId.current) {
|
|
291
|
-
cancelAnimationFrame(rafId.current);
|
|
292
|
-
}
|
|
293
259
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
294
260
|
document.removeEventListener("mouseup", handleMouseUp);
|
|
295
261
|
cleanupRef.current = null;
|
|
@@ -303,7 +269,7 @@ function useThumbDrag(viewport, scrollState, orientation) {
|
|
|
303
269
|
document.addEventListener("mouseup", handleMouseUp, { passive: true });
|
|
304
270
|
e.preventDefault();
|
|
305
271
|
},
|
|
306
|
-
[viewport, orientation
|
|
272
|
+
[viewport, orientation]
|
|
307
273
|
);
|
|
308
274
|
return {
|
|
309
275
|
isDragging: isDragging.current,
|
|
@@ -609,6 +575,8 @@ var ScrollAreaScrollbar = forwardRef(
|
|
|
609
575
|
scrollbarXId,
|
|
610
576
|
scrollbarYId
|
|
611
577
|
} = useScrollAreaContext();
|
|
578
|
+
const scrollStateRef = useRef(scrollState);
|
|
579
|
+
scrollStateRef.current = scrollState;
|
|
612
580
|
const hasOverflow = useHasOverflow(scrollState, orientation);
|
|
613
581
|
const shouldShow = useScrollbarShouldShow(type, hasOverflow, isScrolling, isHovering);
|
|
614
582
|
const scrollPercentage = useMemo(() => {
|
|
@@ -619,15 +587,23 @@ var ScrollAreaScrollbar = forwardRef(
|
|
|
619
587
|
const maxScroll = scrollState.scrollWidth - scrollState.clientWidth;
|
|
620
588
|
return maxScroll > 0 ? Math.round(scrollState.scrollLeft / maxScroll * 100) : 0;
|
|
621
589
|
}
|
|
622
|
-
}, [
|
|
590
|
+
}, [
|
|
591
|
+
orientation,
|
|
592
|
+
scrollState.scrollTop,
|
|
593
|
+
scrollState.scrollLeft,
|
|
594
|
+
scrollState.scrollHeight,
|
|
595
|
+
scrollState.clientHeight,
|
|
596
|
+
scrollState.scrollWidth,
|
|
597
|
+
scrollState.clientWidth
|
|
598
|
+
]);
|
|
623
599
|
const handleTrackClick = useCallback(
|
|
624
600
|
(e) => {
|
|
625
601
|
if (!viewport) return;
|
|
626
602
|
if (e.target === e.currentTarget) {
|
|
627
|
-
handleScrollbarTrackClick(e, viewport,
|
|
603
|
+
handleScrollbarTrackClick(e, viewport, scrollStateRef.current, orientation);
|
|
628
604
|
}
|
|
629
605
|
},
|
|
630
|
-
[viewport,
|
|
606
|
+
[viewport, orientation]
|
|
631
607
|
);
|
|
632
608
|
const tv = useMemo(
|
|
633
609
|
() => ScrollTv({
|
|
@@ -746,7 +722,7 @@ var ScrollAreaRoot = forwardRef(
|
|
|
746
722
|
const viewportId = `scroll-viewport${reactId}`;
|
|
747
723
|
const scrollbarXId = `scroll-x${reactId}`;
|
|
748
724
|
const scrollbarYId = `scroll-y${reactId}`;
|
|
749
|
-
const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport);
|
|
725
|
+
const { scrollState, isHovering, isScrolling, handleMouseEnter, handleMouseLeave } = useScrollStateAndVisibility(viewport, content);
|
|
750
726
|
const staticConfig = useMemo(
|
|
751
727
|
() => ({
|
|
752
728
|
orientation,
|
|
@@ -757,11 +733,14 @@ var ScrollAreaRoot = forwardRef(
|
|
|
757
733
|
}),
|
|
758
734
|
[orientation, scrollbarMode, hoverBoundary, variant, type]
|
|
759
735
|
);
|
|
760
|
-
const
|
|
736
|
+
const stateValue = useMemo(
|
|
737
|
+
() => ({ scrollState, isHovering, isScrolling }),
|
|
738
|
+
[scrollState, isHovering, isScrolling]
|
|
739
|
+
);
|
|
740
|
+
const configValue = useMemo(
|
|
761
741
|
() => ({
|
|
762
742
|
content,
|
|
763
743
|
orientation: staticConfig.orientation,
|
|
764
|
-
scrollState,
|
|
765
744
|
scrollbarMode: staticConfig.scrollbarMode,
|
|
766
745
|
hoverBoundary: staticConfig.hoverBoundary,
|
|
767
746
|
scrollbarX,
|
|
@@ -777,9 +756,6 @@ var ScrollAreaRoot = forwardRef(
|
|
|
777
756
|
variant: staticConfig.variant,
|
|
778
757
|
viewport,
|
|
779
758
|
type: staticConfig.type,
|
|
780
|
-
isHovering,
|
|
781
|
-
isScrolling,
|
|
782
|
-
// Add ID-related values
|
|
783
759
|
rootId,
|
|
784
760
|
viewportId,
|
|
785
761
|
scrollbarXId,
|
|
@@ -787,14 +763,11 @@ var ScrollAreaRoot = forwardRef(
|
|
|
787
763
|
}),
|
|
788
764
|
[
|
|
789
765
|
content,
|
|
790
|
-
scrollState,
|
|
791
766
|
scrollbarX,
|
|
792
767
|
scrollbarY,
|
|
793
768
|
thumbX,
|
|
794
769
|
thumbY,
|
|
795
770
|
viewport,
|
|
796
|
-
isHovering,
|
|
797
|
-
isScrolling,
|
|
798
771
|
staticConfig,
|
|
799
772
|
rootId,
|
|
800
773
|
viewportId,
|
|
@@ -859,7 +832,7 @@ var ScrollAreaRoot = forwardRef(
|
|
|
859
832
|
}
|
|
860
833
|
return scrollbars;
|
|
861
834
|
}, [orientation]);
|
|
862
|
-
return /* @__PURE__ */ jsx(
|
|
835
|
+
return /* @__PURE__ */ jsx(ScrollAreaConfigContext.Provider, { value: configValue, children: /* @__PURE__ */ jsx(ScrollAreaStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsxs(
|
|
863
836
|
"div",
|
|
864
837
|
{
|
|
865
838
|
ref,
|
|
@@ -875,13 +848,13 @@ var ScrollAreaRoot = forwardRef(
|
|
|
875
848
|
autoScrollbars
|
|
876
849
|
]
|
|
877
850
|
}
|
|
878
|
-
) });
|
|
851
|
+
) }) });
|
|
879
852
|
}
|
|
880
853
|
);
|
|
881
854
|
ScrollAreaRoot.displayName = "ScrollArea.Root";
|
|
882
855
|
var ScrollAreaViewport = forwardRef(
|
|
883
856
|
({ className, children, ...props }, ref) => {
|
|
884
|
-
const { setViewport, orientation, viewportId } =
|
|
857
|
+
const { setViewport, orientation, viewportId } = useScrollAreaConfigContext();
|
|
885
858
|
const scrollClass = useMemo(() => {
|
|
886
859
|
switch (orientation) {
|
|
887
860
|
case "horizontal":
|
|
@@ -918,7 +891,7 @@ var ScrollAreaViewport = forwardRef(
|
|
|
918
891
|
ScrollAreaViewport.displayName = "ScrollArea.Viewport";
|
|
919
892
|
var ScrollAreaContent = forwardRef(
|
|
920
893
|
({ as: As = "div", className, children, ...props }, ref) => {
|
|
921
|
-
const { setContent, orientation } =
|
|
894
|
+
const { setContent, orientation } = useScrollAreaConfigContext();
|
|
922
895
|
const setRef = useCallback(
|
|
923
896
|
(node) => {
|
|
924
897
|
setContent(node);
|
|
@@ -10,6 +10,7 @@ interface TooltipProps {
|
|
|
10
10
|
className?: string;
|
|
11
11
|
content?: React.ReactNode;
|
|
12
12
|
disabled?: boolean;
|
|
13
|
+
interactive?: boolean;
|
|
13
14
|
offset?: number;
|
|
14
15
|
onOpenChange?: (open: boolean) => void;
|
|
15
16
|
open?: boolean;
|
|
@@ -23,6 +24,7 @@ interface TooltipProps {
|
|
|
23
24
|
withArrow?: boolean;
|
|
24
25
|
}
|
|
25
26
|
interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
|
|
27
|
+
interactive?: boolean;
|
|
26
28
|
portalId?: string;
|
|
27
29
|
variant?: "default" | "light";
|
|
28
30
|
withArrow?: boolean;
|
|
@@ -128,7 +128,15 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
|
|
|
128
128
|
});
|
|
129
129
|
var TooltipContent = forwardRef(
|
|
130
130
|
function TooltipContent2(props, propRef) {
|
|
131
|
-
const {
|
|
131
|
+
const {
|
|
132
|
+
className,
|
|
133
|
+
withArrow = true,
|
|
134
|
+
variant = "default",
|
|
135
|
+
children,
|
|
136
|
+
portalId,
|
|
137
|
+
interactive = true,
|
|
138
|
+
...rest
|
|
139
|
+
} = props;
|
|
132
140
|
const state = useTooltipState();
|
|
133
141
|
const ref = useMergeRefs([state.refs.setFloating, propRef]);
|
|
134
142
|
const { isInstantPhase, currentId } = useDelayGroup(state.context, {
|
|
@@ -157,19 +165,27 @@ var TooltipContent = forwardRef(
|
|
|
157
165
|
});
|
|
158
166
|
const tv = useMemo(() => tooltipContentVariants({ variant }), [variant]);
|
|
159
167
|
if (state.disabled || !isMounted) return null;
|
|
168
|
+
const floatingProps = state.getFloatingProps(rest);
|
|
160
169
|
return /* @__PURE__ */ jsx(FloatingPortal, { id: portalId, children: /* @__PURE__ */ jsx(
|
|
161
170
|
"div",
|
|
162
171
|
{
|
|
163
172
|
ref,
|
|
164
|
-
style:
|
|
165
|
-
|
|
173
|
+
style: {
|
|
174
|
+
...state.floatingStyles,
|
|
175
|
+
pointerEvents: interactive ? void 0 : "none"
|
|
176
|
+
},
|
|
177
|
+
...floatingProps,
|
|
166
178
|
className: "z-tooltip",
|
|
167
179
|
children: /* @__PURE__ */ jsxs(
|
|
168
180
|
"div",
|
|
169
181
|
{
|
|
170
182
|
className: tcx(tv.root({ className })),
|
|
171
183
|
"data-state": state.open ? "open" : "closed",
|
|
172
|
-
style:
|
|
184
|
+
style: {
|
|
185
|
+
...styles,
|
|
186
|
+
pointerEvents: interactive ? void 0 : "none",
|
|
187
|
+
cursor: interactive ? void 0 : "default"
|
|
188
|
+
},
|
|
173
189
|
children: [
|
|
174
190
|
children,
|
|
175
191
|
withArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant })
|
|
@@ -272,7 +288,8 @@ function TooltipRoot(props) {
|
|
|
272
288
|
withArrow = true,
|
|
273
289
|
variant = "default",
|
|
274
290
|
offset: offset2 = 8,
|
|
275
|
-
portalId = PORTAL_ROOT_ID
|
|
291
|
+
portalId = PORTAL_ROOT_ID,
|
|
292
|
+
interactive = true
|
|
276
293
|
} = props;
|
|
277
294
|
const tooltip = useTooltip({
|
|
278
295
|
placement,
|
|
@@ -291,6 +308,7 @@ function TooltipRoot(props) {
|
|
|
291
308
|
variant,
|
|
292
309
|
portalId,
|
|
293
310
|
className,
|
|
311
|
+
interactive,
|
|
294
312
|
children: [
|
|
295
313
|
content,
|
|
296
314
|
shortcut && /* @__PURE__ */ jsx(
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
|
|
2
|
+
import { FloatingFocusManagerProps } from '@floating-ui/react';
|
|
3
|
+
import { default as React } from 'react';
|
|
4
|
+
interface VirtualSelectOption<T = unknown> {
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
data?: T;
|
|
9
|
+
}
|
|
10
|
+
interface VirtualSelectProps<T = unknown> {
|
|
11
|
+
className?: string;
|
|
12
|
+
closeOnEscape?: boolean;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
emptyText?: string;
|
|
15
|
+
focusManagerProps?: Partial<FloatingFocusManagerProps>;
|
|
16
|
+
matchTriggerWidth?: boolean;
|
|
17
|
+
maxHeight?: number;
|
|
18
|
+
onChange?: (value: string) => void;
|
|
19
|
+
onOpenChange?: (open: boolean) => void;
|
|
20
|
+
open?: boolean;
|
|
21
|
+
options: VirtualSelectOption<T>[];
|
|
22
|
+
overscan?: number;
|
|
23
|
+
placeholder?: string;
|
|
24
|
+
placement?: "bottom-start" | "bottom-end";
|
|
25
|
+
portalId?: string;
|
|
26
|
+
readOnly?: boolean;
|
|
27
|
+
renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
|
|
28
|
+
renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
|
|
29
|
+
root?: HTMLElement | null;
|
|
30
|
+
searchPlaceholder?: string;
|
|
31
|
+
size?: "default" | "large";
|
|
32
|
+
value?: string | null;
|
|
33
|
+
variant?: "default" | "light" | "reset";
|
|
34
|
+
}
|
|
35
|
+
interface VirtualSelectComponentType {
|
|
36
|
+
<T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
|
|
37
|
+
displayName?: string;
|
|
38
|
+
Content: typeof MenuContextContent;
|
|
39
|
+
Divider: typeof MenuDivider;
|
|
40
|
+
Empty: typeof MenuEmpty;
|
|
41
|
+
Item: typeof MenuContextItem;
|
|
42
|
+
Search: typeof MenuSearch;
|
|
43
|
+
Trigger: typeof MenuTrigger;
|
|
44
|
+
Value: typeof MenuValue;
|
|
45
|
+
}
|
|
46
|
+
declare const VirtualSelect: VirtualSelectComponentType;
|
|
47
|
+
|
|
48
|
+
export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };
|