@tamagui/select 1.0.1-beta.118 → 1.0.1-beta.121
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/cjs/Select.js +36 -32
- package/dist/cjs/Select.js.map +2 -2
- package/dist/cjs/SelectContent.js +2 -1
- package/dist/cjs/SelectContent.js.map +2 -2
- package/dist/cjs/SelectImpl.js +154 -284
- package/dist/cjs/SelectImpl.js.map +2 -2
- package/dist/cjs/SelectScrollButton.js +54 -40
- package/dist/cjs/SelectScrollButton.js.map +2 -2
- package/dist/cjs/SelectViewport.js +10 -6
- package/dist/cjs/SelectViewport.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/Select.js +36 -32
- package/dist/esm/Select.js.map +2 -2
- package/dist/esm/SelectContent.js +3 -2
- package/dist/esm/SelectContent.js.map +2 -2
- package/dist/esm/SelectImpl.js +158 -286
- package/dist/esm/SelectImpl.js.map +2 -2
- package/dist/esm/SelectScrollButton.js +54 -40
- package/dist/esm/SelectScrollButton.js.map +2 -2
- package/dist/esm/SelectViewport.js +10 -6
- package/dist/esm/SelectViewport.js.map +2 -2
- package/dist/jsx/Select.js +34 -34
- package/dist/jsx/Select.js.map +2 -2
- package/dist/jsx/SelectContent.js +3 -2
- package/dist/jsx/SelectContent.js.map +2 -2
- package/dist/jsx/SelectImpl.js +128 -266
- package/dist/jsx/SelectImpl.js.map +2 -2
- package/dist/jsx/SelectScrollButton.js +53 -39
- package/dist/jsx/SelectScrollButton.js.map +2 -2
- package/dist/jsx/SelectViewport.js +10 -6
- package/dist/jsx/SelectViewport.js.map +2 -2
- package/package.json +15 -15
- package/src/Select.tsx +47 -49
- package/src/SelectContent.tsx +4 -2
- package/src/SelectImpl.tsx +179 -369
- package/src/SelectScrollButton.tsx +72 -54
- package/src/SelectViewport.tsx +12 -6
- package/src/types.tsx +9 -1
- package/types/Select.d.ts +15 -15
- package/types/Select.d.ts.map +1 -1
- package/types/SelectContent.d.ts +0 -1
- package/types/SelectContent.d.ts.map +1 -1
- package/types/SelectImpl.d.ts.map +1 -1
- package/types/SelectViewport.d.ts +3 -3
- package/types/SelectViewport.d.ts.map +1 -1
- package/types/types.d.ts +9 -1
- package/types/types.d.ts.map +1 -1
- package/types/constants.d.ts +0 -8
- package/types/constants.d.ts.map +0 -1
package/dist/jsx/SelectImpl.js
CHANGED
|
@@ -1,43 +1,46 @@
|
|
|
1
1
|
import {
|
|
2
|
-
detectOverflow,
|
|
3
2
|
flip,
|
|
3
|
+
inner,
|
|
4
4
|
offset,
|
|
5
|
+
shift,
|
|
5
6
|
size,
|
|
6
7
|
useClick,
|
|
7
8
|
useDismiss,
|
|
8
9
|
useFloating,
|
|
10
|
+
useInnerOffset,
|
|
9
11
|
useInteractions,
|
|
10
12
|
useListNavigation,
|
|
11
13
|
useRole,
|
|
12
14
|
useTypeahead
|
|
13
15
|
} from "@floating-ui/react-dom-interactions";
|
|
14
|
-
import {
|
|
16
|
+
import { useIsTouchDevice } from "@tamagui/core";
|
|
15
17
|
import * as React from "react";
|
|
16
|
-
import {
|
|
18
|
+
import { flushSync } from "react-dom";
|
|
19
|
+
import { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from "./constants";
|
|
17
20
|
import { SelectProvider, useSelectContext } from "./context";
|
|
18
21
|
const SelectInlineImpl = (props) => {
|
|
19
|
-
const {
|
|
20
|
-
__scopeSelect,
|
|
21
|
-
children,
|
|
22
|
-
open = false,
|
|
23
|
-
activeIndexRef,
|
|
24
|
-
selectedIndexRef,
|
|
25
|
-
listContentRef
|
|
26
|
-
} = props;
|
|
22
|
+
const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props;
|
|
27
23
|
const selectContext = useSelectContext("SelectSheetImpl", __scopeSelect);
|
|
28
24
|
const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } = selectContext;
|
|
29
|
-
const [showArrows, setShowArrows] = React.useState(false);
|
|
30
25
|
const [scrollTop, setScrollTop] = React.useState(0);
|
|
31
|
-
const
|
|
26
|
+
const touch = useIsTouchDevice();
|
|
32
27
|
const listItemsRef = React.useRef([]);
|
|
28
|
+
const overflowRef = React.useRef(null);
|
|
29
|
+
const upArrowRef = React.useRef(null);
|
|
30
|
+
const downArrowRef = React.useRef(null);
|
|
31
|
+
const allowSelectRef = React.useRef(false);
|
|
32
|
+
const allowMouseUpRef = React.useRef(true);
|
|
33
|
+
const selectTimeoutRef = React.useRef();
|
|
33
34
|
const [controlledScrolling, setControlledScrolling] = React.useState(false);
|
|
34
|
-
const [
|
|
35
|
+
const [fallback, setFallback] = React.useState(false);
|
|
36
|
+
const [innerOffset, setInnerOffset] = React.useState(0);
|
|
37
|
+
const [blockSelection, setBlockSelection] = React.useState(false);
|
|
38
|
+
const floatingStyle = React.useRef({});
|
|
35
39
|
React.useEffect(() => {
|
|
36
40
|
const frame = requestAnimationFrame(() => {
|
|
37
|
-
setShowArrows(open);
|
|
38
41
|
if (!open) {
|
|
39
42
|
setScrollTop(0);
|
|
40
|
-
|
|
43
|
+
setFallback(false);
|
|
41
44
|
setActiveIndex(null);
|
|
42
45
|
setControlledScrolling(false);
|
|
43
46
|
}
|
|
@@ -46,93 +49,56 @@ const SelectInlineImpl = (props) => {
|
|
|
46
49
|
cancelAnimationFrame(frame);
|
|
47
50
|
};
|
|
48
51
|
}, [open, setActiveIndex]);
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
const updateFloatingSize = size({
|
|
53
|
+
apply({
|
|
54
|
+
availableHeight,
|
|
55
|
+
rects: {
|
|
56
|
+
reference: { width }
|
|
57
|
+
}
|
|
58
|
+
}) {
|
|
59
|
+
floatingStyle.current = {
|
|
60
|
+
width,
|
|
61
|
+
maxHeight: availableHeight
|
|
62
|
+
};
|
|
63
|
+
},
|
|
64
|
+
padding: WINDOW_PADDING
|
|
65
|
+
});
|
|
66
|
+
const { x, y, reference, floating, strategy, context, refs } = useFloating({
|
|
57
67
|
open,
|
|
58
68
|
onOpenChange: setOpen,
|
|
59
|
-
placement: "bottom",
|
|
60
|
-
middleware:
|
|
61
|
-
offset(({ rects }) => {
|
|
62
|
-
var _a;
|
|
63
|
-
const index = (_a = activeIndexRef.current) != null ? _a : selectedIndexRef.current;
|
|
64
|
-
if (index == null) {
|
|
65
|
-
return 0;
|
|
66
|
-
}
|
|
67
|
-
const item = listItemsRef.current[index];
|
|
68
|
-
if (item == null) {
|
|
69
|
-
return 0;
|
|
70
|
-
}
|
|
71
|
-
const offsetTop = item.offsetTop;
|
|
72
|
-
const itemHeight = item.offsetHeight;
|
|
73
|
-
const height = rects.reference.height;
|
|
74
|
-
return -offsetTop - height - (itemHeight - height) / 2;
|
|
75
|
-
}),
|
|
76
|
-
{
|
|
77
|
-
name: "size",
|
|
78
|
-
async fn(args) {
|
|
79
|
-
var _a;
|
|
80
|
-
const {
|
|
81
|
-
elements: { floating: floating2 },
|
|
82
|
-
rects: { reference: reference2 },
|
|
83
|
-
middlewareData: middlewareData2
|
|
84
|
-
} = args;
|
|
85
|
-
const overflow = await detectOverflow(args, {
|
|
86
|
-
padding: WINDOW_PADDING
|
|
87
|
-
});
|
|
88
|
-
const top = Math.max(0, overflow.top);
|
|
89
|
-
const bottom = Math.max(0, overflow.bottom);
|
|
90
|
-
const nextY = args.y + top;
|
|
91
|
-
if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
|
|
92
|
-
return {
|
|
93
|
-
y: nextY,
|
|
94
|
-
data: {
|
|
95
|
-
y: middlewareData2.size.y
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
Object.assign(floating2.style, {
|
|
100
|
-
maxHeight: `${floating2.scrollHeight - Math.abs(top + bottom)}px`,
|
|
101
|
-
minWidth: `${reference2.width + getFloatingPadding(floating2) * 2}px`
|
|
102
|
-
});
|
|
103
|
-
return {
|
|
104
|
-
y: nextY,
|
|
105
|
-
data: {
|
|
106
|
-
y: top,
|
|
107
|
-
skip: true
|
|
108
|
-
},
|
|
109
|
-
reset: {
|
|
110
|
-
rects: true
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
] : [
|
|
69
|
+
placement: "bottom-start",
|
|
70
|
+
middleware: fallback ? [
|
|
116
71
|
offset(5),
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
72
|
+
...[
|
|
73
|
+
touch ? shift({ crossAxis: true, padding: WINDOW_PADDING }) : flip({ padding: WINDOW_PADDING })
|
|
74
|
+
],
|
|
75
|
+
updateFloatingSize
|
|
76
|
+
] : [
|
|
77
|
+
inner({
|
|
78
|
+
listRef: listItemsRef,
|
|
79
|
+
overflowRef,
|
|
80
|
+
index: selectedIndex,
|
|
81
|
+
offset: innerOffset,
|
|
82
|
+
onFallbackChange: setFallback,
|
|
83
|
+
padding: 10,
|
|
84
|
+
minItemsVisible: touch ? 10 : 4,
|
|
85
|
+
referenceOverflowThreshold: 20
|
|
86
|
+
}),
|
|
87
|
+
updateFloatingSize
|
|
127
88
|
]
|
|
128
89
|
});
|
|
129
90
|
const floatingRef = refs.floating;
|
|
130
|
-
const showUpArrow =
|
|
131
|
-
const showDownArrow =
|
|
91
|
+
const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD;
|
|
92
|
+
const showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
|
|
132
93
|
const interactions = useInteractions([
|
|
133
94
|
useClick(context, { pointerDown: true }),
|
|
95
|
+
useDismiss(context, { outsidePointerDown: false }),
|
|
134
96
|
useRole(context, { role: "listbox" }),
|
|
135
|
-
|
|
97
|
+
useInnerOffset(context, {
|
|
98
|
+
enabled: !fallback,
|
|
99
|
+
onChange: setInnerOffset,
|
|
100
|
+
overflowRef
|
|
101
|
+
}),
|
|
136
102
|
useListNavigation(context, {
|
|
137
103
|
listRef: listItemsRef,
|
|
138
104
|
activeIndex,
|
|
@@ -146,175 +112,7 @@ const SelectInlineImpl = (props) => {
|
|
|
146
112
|
activeIndex
|
|
147
113
|
})
|
|
148
114
|
]);
|
|
149
|
-
const
|
|
150
|
-
var _a;
|
|
151
|
-
if (middlewareType === "fallback") {
|
|
152
|
-
return;
|
|
153
|
-
}
|
|
154
|
-
const currentMaxHeight = Number(floating2.style.maxHeight.replace("px", ""));
|
|
155
|
-
const currentTop = Number(floating2.style.top.replace("px", ""));
|
|
156
|
-
const rect = floating2.getBoundingClientRect();
|
|
157
|
-
const rectTop = rect.top;
|
|
158
|
-
const rectBottom = rect.bottom;
|
|
159
|
-
const viewportHeight = (_a = visualViewport == null ? void 0 : visualViewport.height) != null ? _a : 0;
|
|
160
|
-
const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2;
|
|
161
|
-
if (amount < 0 && selectedIndexRef.current != null && Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)) {
|
|
162
|
-
floating2.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`;
|
|
163
|
-
}
|
|
164
|
-
if (amount > 0 && Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) && floating2.scrollHeight > floating2.offsetHeight) {
|
|
165
|
-
const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount);
|
|
166
|
-
const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount);
|
|
167
|
-
Object.assign(floating2.style, {
|
|
168
|
-
maxHeight: `${nextMaxHeight}px`,
|
|
169
|
-
top: `${nextTop}px`
|
|
170
|
-
});
|
|
171
|
-
if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
|
|
172
|
-
floating2.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating2);
|
|
173
|
-
}
|
|
174
|
-
return currentTop - nextTop;
|
|
175
|
-
}
|
|
176
|
-
}, [middlewareType, selectedIndexRef]);
|
|
177
|
-
const touchPageYRef = React.useRef(null);
|
|
178
|
-
const handleWheel = React.useCallback((event) => {
|
|
179
|
-
var _a, _b, _c;
|
|
180
|
-
const pinching = event.ctrlKey;
|
|
181
|
-
const currentTarget = event.currentTarget;
|
|
182
|
-
function isWheelEvent(event2) {
|
|
183
|
-
return typeof event2.deltaY === "number";
|
|
184
|
-
}
|
|
185
|
-
function isTouchEvent(event2) {
|
|
186
|
-
return event2.touches != null;
|
|
187
|
-
}
|
|
188
|
-
if (Math.abs(((_a = currentTarget == null ? void 0 : currentTarget.offsetHeight) != null ? _a : 0) - (((_b = visualViewport == null ? void 0 : visualViewport.height) != null ? _b : 0) - WINDOW_PADDING * 2)) > 1 && !pinching) {
|
|
189
|
-
event.preventDefault();
|
|
190
|
-
} else if (isWheelEvent(event) && isFirefox) {
|
|
191
|
-
currentTarget.scrollTop += event.deltaY;
|
|
192
|
-
}
|
|
193
|
-
if (!pinching) {
|
|
194
|
-
let delta = 5;
|
|
195
|
-
if (isTouchEvent(event)) {
|
|
196
|
-
const currentPageY = touchPageYRef.current;
|
|
197
|
-
const pageY = (_c = event.touches[0]) == null ? void 0 : _c.pageY;
|
|
198
|
-
if (pageY != null) {
|
|
199
|
-
touchPageYRef.current = pageY;
|
|
200
|
-
if (currentPageY != null) {
|
|
201
|
-
delta = currentPageY - pageY;
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta);
|
|
206
|
-
setScrollTop(currentTarget.scrollTop);
|
|
207
|
-
forceUpdate();
|
|
208
|
-
}
|
|
209
|
-
}, [forceUpdate, increaseHeight]);
|
|
210
|
-
React.useEffect(() => {
|
|
211
|
-
function onTouchEnd() {
|
|
212
|
-
touchPageYRef.current = null;
|
|
213
|
-
}
|
|
214
|
-
const floating2 = floatingRef.current;
|
|
215
|
-
if (open && floating2 && middlewareType === "align") {
|
|
216
|
-
floating2.addEventListener("wheel", handleWheel);
|
|
217
|
-
floating2.addEventListener("touchmove", handleWheel);
|
|
218
|
-
floating2.addEventListener("touchend", onTouchEnd, { passive: true });
|
|
219
|
-
return () => {
|
|
220
|
-
floating2.removeEventListener("wheel", handleWheel);
|
|
221
|
-
floating2.removeEventListener("touchmove", handleWheel);
|
|
222
|
-
floating2.removeEventListener("touchend", onTouchEnd);
|
|
223
|
-
};
|
|
224
|
-
}
|
|
225
|
-
}, [open, floatingRef, handleWheel, middlewareType]);
|
|
226
|
-
React.useEffect(() => {
|
|
227
|
-
window.addEventListener("resize", update);
|
|
228
|
-
return () => {
|
|
229
|
-
window.removeEventListener("resize", update);
|
|
230
|
-
};
|
|
231
|
-
}, [update]);
|
|
232
|
-
React.useLayoutEffect(() => {
|
|
233
|
-
var _a, _b, _c;
|
|
234
|
-
const floating2 = floatingRef.current;
|
|
235
|
-
if (open && controlledScrolling && floating2) {
|
|
236
|
-
const item = activeIndex != null ? listItemsRef.current[activeIndex] : selectedIndex != null ? listItemsRef.current[selectedIndex] : null;
|
|
237
|
-
if (item && prevActiveIndex != null) {
|
|
238
|
-
const itemHeight = (_b = (_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
|
|
239
|
-
const floatingHeight = floating2.offsetHeight;
|
|
240
|
-
const top = item.offsetTop;
|
|
241
|
-
const bottom = top + itemHeight;
|
|
242
|
-
if (top < floating2.scrollTop + 20) {
|
|
243
|
-
const diff = floating2.scrollTop - top + 20;
|
|
244
|
-
floating2.scrollTop -= diff;
|
|
245
|
-
if (activeIndex != selectedIndex && activeIndex != null) {
|
|
246
|
-
increaseHeight(floating2, -diff);
|
|
247
|
-
}
|
|
248
|
-
} else if (bottom > floatingHeight + floating2.scrollTop - 20) {
|
|
249
|
-
const diff = bottom - floatingHeight - floating2.scrollTop + 20;
|
|
250
|
-
floating2.scrollTop += diff;
|
|
251
|
-
if (activeIndex != selectedIndex && activeIndex != null) {
|
|
252
|
-
floating2.scrollTop -= (_c = increaseHeight(floating2, diff)) != null ? _c : 0;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
}, [
|
|
258
|
-
open,
|
|
259
|
-
controlledScrolling,
|
|
260
|
-
prevActiveIndex,
|
|
261
|
-
activeIndex,
|
|
262
|
-
selectedIndex,
|
|
263
|
-
floatingRef,
|
|
264
|
-
increaseHeight
|
|
265
|
-
]);
|
|
266
|
-
React.useLayoutEffect(() => {
|
|
267
|
-
var _a, _b;
|
|
268
|
-
const floating2 = refs.floating.current;
|
|
269
|
-
const reference2 = refs.reference.current;
|
|
270
|
-
if (open && floating2 && reference2 && floating2.offsetHeight < floating2.scrollHeight) {
|
|
271
|
-
const referenceRect = reference2.getBoundingClientRect();
|
|
272
|
-
if (middlewareType === "fallback") {
|
|
273
|
-
const item = listItemsRef.current[selectedIndex];
|
|
274
|
-
if (item) {
|
|
275
|
-
floating2.scrollTop = item.offsetTop - floating2.clientHeight + referenceRect.height;
|
|
276
|
-
}
|
|
277
|
-
return;
|
|
278
|
-
}
|
|
279
|
-
floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
|
|
280
|
-
const closeToBottom = ((_b = visualViewport == null ? void 0 : visualViewport.height) != null ? _b : 0) + getVisualOffsetTop() - referenceRect.bottom < FALLBACK_THRESHOLD;
|
|
281
|
-
const closeToTop = referenceRect.top < FALLBACK_THRESHOLD;
|
|
282
|
-
if (floating2.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
|
|
283
|
-
setMiddlewareType("fallback");
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
}, [
|
|
287
|
-
open,
|
|
288
|
-
increaseHeight,
|
|
289
|
-
selectedIndex,
|
|
290
|
-
middlewareType,
|
|
291
|
-
refs.floating,
|
|
292
|
-
refs.reference,
|
|
293
|
-
middlewareData
|
|
294
|
-
]);
|
|
295
|
-
React.useLayoutEffect(() => {
|
|
296
|
-
if (open && selectedIndex != null) {
|
|
297
|
-
requestAnimationFrame(() => {
|
|
298
|
-
var _a;
|
|
299
|
-
(_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.focus({ preventScroll: true });
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
}, [listItemsRef, selectedIndex, open]);
|
|
303
|
-
React.useEffect(() => {
|
|
304
|
-
const frame = requestAnimationFrame(() => {
|
|
305
|
-
setShowArrows(open);
|
|
306
|
-
if (!open) {
|
|
307
|
-
setScrollTop(0);
|
|
308
|
-
setMiddlewareType("align");
|
|
309
|
-
setActiveIndex(null);
|
|
310
|
-
setControlledScrolling(false);
|
|
311
|
-
}
|
|
312
|
-
});
|
|
313
|
-
return () => cancelAnimationFrame(frame);
|
|
314
|
-
}, [open, setActiveIndex]);
|
|
315
|
-
return <SelectProvider scope={__scopeSelect} {...selectContext} increaseHeight={increaseHeight} floatingRef={floatingRef} setValueAtIndex={(index, value) => {
|
|
316
|
-
listContentRef.current[index] = value;
|
|
317
|
-
}} interactions={{
|
|
115
|
+
const interactionsContext = {
|
|
318
116
|
...interactions,
|
|
319
117
|
getReferenceProps() {
|
|
320
118
|
return interactions.getReferenceProps({
|
|
@@ -340,7 +138,7 @@ const SelectInlineImpl = (props) => {
|
|
|
340
138
|
outline: 0,
|
|
341
139
|
listStyleType: "none",
|
|
342
140
|
scrollbarWidth: "none",
|
|
343
|
-
|
|
141
|
+
...floatingStyle.current,
|
|
344
142
|
...props2 == null ? void 0 : props2.style
|
|
345
143
|
},
|
|
346
144
|
onPointerEnter() {
|
|
@@ -352,12 +150,76 @@ const SelectInlineImpl = (props) => {
|
|
|
352
150
|
onKeyDown() {
|
|
353
151
|
setControlledScrolling(true);
|
|
354
152
|
},
|
|
153
|
+
onContextMenu(e) {
|
|
154
|
+
e.preventDefault();
|
|
155
|
+
},
|
|
355
156
|
onScroll(event) {
|
|
356
|
-
setScrollTop(event.currentTarget.scrollTop);
|
|
157
|
+
flushSync(() => setScrollTop(event.currentTarget.scrollTop));
|
|
357
158
|
}
|
|
358
159
|
});
|
|
359
160
|
}
|
|
360
|
-
}
|
|
161
|
+
};
|
|
162
|
+
React.useLayoutEffect(() => {
|
|
163
|
+
if (open) {
|
|
164
|
+
selectTimeoutRef.current = setTimeout(() => {
|
|
165
|
+
allowSelectRef.current = true;
|
|
166
|
+
}, 300);
|
|
167
|
+
return () => {
|
|
168
|
+
clearTimeout(selectTimeoutRef.current);
|
|
169
|
+
};
|
|
170
|
+
} else {
|
|
171
|
+
allowSelectRef.current = false;
|
|
172
|
+
allowMouseUpRef.current = true;
|
|
173
|
+
setInnerOffset(0);
|
|
174
|
+
setFallback(false);
|
|
175
|
+
setBlockSelection(false);
|
|
176
|
+
}
|
|
177
|
+
}, [open]);
|
|
178
|
+
React.useLayoutEffect(() => {
|
|
179
|
+
function onPointerDown(e) {
|
|
180
|
+
var _a, _b, _c;
|
|
181
|
+
const target = e.target;
|
|
182
|
+
if (!((_a = refs.floating.current) == null ? void 0 : _a.contains(target)) && !((_b = upArrowRef.current) == null ? void 0 : _b.contains(target)) && !((_c = downArrowRef.current) == null ? void 0 : _c.contains(target))) {
|
|
183
|
+
setOpen(false);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
if (open) {
|
|
187
|
+
document.addEventListener("pointerdown", onPointerDown);
|
|
188
|
+
return () => {
|
|
189
|
+
document.removeEventListener("pointerdown", onPointerDown);
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
}, [open, refs, setOpen]);
|
|
193
|
+
React.useLayoutEffect(() => {
|
|
194
|
+
var _a, _b;
|
|
195
|
+
if (open && controlledScrolling) {
|
|
196
|
+
requestAnimationFrame(() => {
|
|
197
|
+
var _a2;
|
|
198
|
+
if (activeIndex != null) {
|
|
199
|
+
(_a2 = listItemsRef.current[activeIndex]) == null ? void 0 : _a2.scrollIntoView({ block: "nearest" });
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
setScrollTop((_b = (_a = refs.floating.current) == null ? void 0 : _a.scrollTop) != null ? _b : 0);
|
|
204
|
+
}, [open, refs, controlledScrolling, activeIndex]);
|
|
205
|
+
React.useLayoutEffect(() => {
|
|
206
|
+
if (open && fallback) {
|
|
207
|
+
requestAnimationFrame(() => {
|
|
208
|
+
var _a;
|
|
209
|
+
if (selectedIndex != null) {
|
|
210
|
+
(_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
}, [open, fallback, selectedIndex]);
|
|
215
|
+
React.useLayoutEffect(() => {
|
|
216
|
+
if (refs.floating.current && fallback) {
|
|
217
|
+
refs.floating.current.style.maxHeight = "";
|
|
218
|
+
}
|
|
219
|
+
}, [refs, fallback]);
|
|
220
|
+
return <SelectProvider scope={__scopeSelect} {...selectContext} setScrollTop={setScrollTop} setInnerOffset={setInnerOffset} floatingRef={floatingRef} setValueAtIndex={(index, value) => {
|
|
221
|
+
listContentRef.current[index] = value;
|
|
222
|
+
}} fallback={fallback} interactions={interactionsContext} floatingContext={context} activeIndex={activeIndex} canScrollDown={!!showDownArrow} canScrollUp={!!showUpArrow} controlledScrolling dataRef={context.dataRef} listRef={listItemsRef} blockSelection={blockSelection} allowMouseUpRef={allowMouseUpRef} upArrowRef={upArrowRef} downArrowRef={downArrowRef} selectTimeoutRef={selectTimeoutRef} allowSelectRef={allowSelectRef}>{children}</SelectProvider>;
|
|
361
223
|
};
|
|
362
224
|
const userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
|
|
363
225
|
const isFirefox = userAgent.toLowerCase().includes("firefox");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SelectImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n detectOverflow,\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport * as React from 'react'\n\nimport { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { ScopedProps, SelectProps } from './types'\n\nexport type SelectImplProps = ScopedProps<SelectProps> & {\n activeIndexRef: any\n selectedIndexRef: any\n listContentRef: any\n}\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const {\n __scopeSelect,\n children,\n open = false,\n activeIndexRef,\n selectedIndexRef,\n listContentRef,\n } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } =\n selectContext\n const [showArrows, setShowArrows] = React.useState(false)\n const [scrollTop, setScrollTop] = React.useState(0)\n const prevActiveIndex = usePrevious<number | null>(activeIndex)\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [middlewareType, setMiddlewareType] = React.useState<'align' | 'fallback'>('align')\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n setShowArrows(open)\n\n if (!open) {\n setScrollTop(0)\n setMiddlewareType('align')\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n function getFloatingPadding(floating: HTMLElement | null) {\n if (!floating) {\n return 0\n }\n return Number(getComputedStyle(floating).paddingLeft?.replace('px', ''))\n }\n\n const { x, y, reference, floating, strategy, context, refs, middlewareData, update } =\n useFloating({\n open,\n onOpenChange: setOpen,\n placement: 'bottom',\n middleware:\n middlewareType === 'align'\n ? [\n offset(({ rects }) => {\n const index = activeIndexRef.current ?? selectedIndexRef.current\n\n if (index == null) {\n return 0\n }\n\n const item = listItemsRef.current[index]\n\n if (item == null) {\n return 0\n }\n\n const offsetTop = item.offsetTop\n const itemHeight = item.offsetHeight\n const height = rects.reference.height\n\n return -offsetTop - height - (itemHeight - height) / 2\n }),\n // Custom `size` that can handle the opposite direction of the placement\n {\n name: 'size',\n async fn(args) {\n const {\n elements: { floating },\n rects: { reference },\n middlewareData,\n } = args\n\n const overflow = await detectOverflow(args, {\n padding: WINDOW_PADDING,\n })\n\n const top = Math.max(0, overflow.top)\n const bottom = Math.max(0, overflow.bottom)\n const nextY = args.y + top\n\n if (middlewareData.size?.skip) {\n return {\n y: nextY,\n data: {\n y: middlewareData.size.y,\n },\n }\n }\n\n Object.assign(floating.style, {\n maxHeight: `${floating.scrollHeight - Math.abs(top + bottom)}px`,\n minWidth: `${reference.width + getFloatingPadding(floating) * 2}px`,\n })\n\n return {\n y: nextY,\n data: {\n y: top,\n skip: true,\n },\n reset: {\n rects: true,\n },\n }\n },\n },\n ]\n : [\n offset(5),\n flip(),\n size({\n apply({ rects, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`,\n })\n },\n padding: WINDOW_PADDING,\n }),\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n showArrows &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { pointerDown: true }),\n useRole(context, { role: 'listbox' }),\n useDismiss(context),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const increaseHeight = React.useCallback(\n (floating: HTMLElement, amount = 0) => {\n if (middlewareType === 'fallback') {\n return\n }\n\n const currentMaxHeight = Number(floating.style.maxHeight.replace('px', ''))\n const currentTop = Number(floating.style.top.replace('px', ''))\n const rect = floating.getBoundingClientRect()\n const rectTop = rect.top\n const rectBottom = rect.bottom\n const viewportHeight = visualViewport?.height ?? 0\n const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2\n\n if (\n amount < 0 &&\n selectedIndexRef.current != null &&\n Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)\n ) {\n floating.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`\n }\n\n if (\n amount > 0 &&\n Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) &&\n floating.scrollHeight > floating.offsetHeight\n ) {\n const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount)\n\n const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount)\n\n Object.assign(floating.style, {\n maxHeight: `${nextMaxHeight}px`,\n top: `${nextTop}px`,\n })\n\n if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {\n floating.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating)\n }\n\n return currentTop - nextTop\n }\n },\n [middlewareType, selectedIndexRef]\n )\n\n const touchPageYRef = React.useRef<number | null>(null)\n\n const handleWheel = React.useCallback(\n (event: WheelEvent | TouchEvent) => {\n const pinching = event.ctrlKey\n\n const currentTarget = event.currentTarget as HTMLElement\n\n function isWheelEvent(event: any): event is WheelEvent {\n return typeof event.deltaY === 'number'\n }\n\n function isTouchEvent(event: any): event is TouchEvent {\n return event.touches != null\n }\n\n if (\n Math.abs(\n (currentTarget?.offsetHeight ?? 0) - ((visualViewport?.height ?? 0) - WINDOW_PADDING * 2)\n ) > 1 &&\n !pinching\n ) {\n event.preventDefault()\n } else if (isWheelEvent(event) && isFirefox) {\n // Firefox needs this to propagate scrolling\n // during momentum scrolling phase if the\n // height reached its maximum (at boundaries)\n currentTarget.scrollTop += event.deltaY\n }\n\n if (!pinching) {\n let delta = 5\n\n if (isTouchEvent(event)) {\n const currentPageY = touchPageYRef.current\n const pageY = event.touches[0]?.pageY\n\n if (pageY != null) {\n touchPageYRef.current = pageY\n\n if (currentPageY != null) {\n delta = currentPageY - pageY\n }\n }\n }\n\n increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta)\n setScrollTop(currentTarget.scrollTop)\n // Ensure derived data (scroll arrows) is fresh\n forceUpdate()\n }\n },\n [forceUpdate, increaseHeight]\n )\n\n // Handle `onWheel` event in an effect to remove the `passive` option so we\n // can .preventDefault() it\n React.useEffect(() => {\n function onTouchEnd() {\n touchPageYRef.current = null\n }\n\n const floating = floatingRef.current\n if (open && floating && middlewareType === 'align') {\n floating.addEventListener('wheel', handleWheel)\n floating.addEventListener('touchmove', handleWheel)\n floating.addEventListener('touchend', onTouchEnd, { passive: true })\n return () => {\n floating.removeEventListener('wheel', handleWheel)\n floating.removeEventListener('touchmove', handleWheel)\n floating.removeEventListener('touchend', onTouchEnd)\n }\n }\n }, [open, floatingRef, handleWheel, middlewareType])\n\n // Ensure the menu remains attached to the reference element when resizing.\n React.useEffect(() => {\n window.addEventListener('resize', update)\n return () => {\n window.removeEventListener('resize', update)\n }\n }, [update])\n\n // Scroll the active or selected item into view when in `controlledScrolling`\n // mode (i.e. arrow key nav).\n React.useLayoutEffect(() => {\n const floating = floatingRef.current\n\n if (open && controlledScrolling && floating) {\n const item =\n activeIndex != null\n ? listItemsRef.current[activeIndex]\n : selectedIndex != null\n ? listItemsRef.current[selectedIndex]\n : null\n\n if (item && prevActiveIndex != null) {\n const itemHeight = listItemsRef.current[prevActiveIndex]?.offsetHeight ?? 0\n\n const floatingHeight = floating.offsetHeight\n const top = item.offsetTop\n const bottom = top + itemHeight\n\n if (top < floating.scrollTop + 20) {\n const diff = floating.scrollTop - top + 20\n floating.scrollTop -= diff\n\n if (activeIndex != selectedIndex && activeIndex != null) {\n increaseHeight(floating, -diff)\n }\n } else if (bottom > floatingHeight + floating.scrollTop - 20) {\n const diff = bottom - floatingHeight - floating.scrollTop + 20\n\n floating.scrollTop += diff\n\n if (activeIndex != selectedIndex && activeIndex != null) {\n floating.scrollTop -= increaseHeight(floating, diff) ?? 0\n }\n }\n }\n }\n }, [\n open,\n controlledScrolling,\n prevActiveIndex,\n activeIndex,\n selectedIndex,\n floatingRef,\n increaseHeight,\n ])\n\n // Sync the height and the scrollTop values and device whether to use fallback\n // positioning.\n React.useLayoutEffect(() => {\n const floating = refs.floating.current\n const reference = refs.reference.current\n\n if (open && floating && reference && floating.offsetHeight < floating.scrollHeight) {\n const referenceRect = reference.getBoundingClientRect()\n\n if (middlewareType === 'fallback') {\n const item = listItemsRef.current[selectedIndex]\n if (item) {\n floating.scrollTop = item.offsetTop - floating.clientHeight + referenceRect.height\n }\n return\n }\n\n floating.scrollTop = middlewareData.size?.y\n\n const closeToBottom =\n (visualViewport?.height ?? 0) + getVisualOffsetTop() - referenceRect.bottom <\n FALLBACK_THRESHOLD\n const closeToTop = referenceRect.top < FALLBACK_THRESHOLD\n\n if (floating.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {\n setMiddlewareType('fallback')\n }\n }\n }, [\n open,\n increaseHeight,\n selectedIndex,\n middlewareType,\n refs.floating,\n refs.reference,\n // Always re-run this effect when the position has been computed so the\n // .scrollTop change works with fresh sizing.\n middlewareData,\n ])\n\n React.useLayoutEffect(() => {\n if (open && selectedIndex != null) {\n requestAnimationFrame(() => {\n listItemsRef.current[selectedIndex]?.focus({ preventScroll: true })\n })\n }\n }, [listItemsRef, selectedIndex, open])\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n setShowArrows(open)\n\n if (!open) {\n setScrollTop(0)\n setMiddlewareType('align')\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => cancelAnimationFrame(frame)\n }, [open, setActiveIndex])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n increaseHeight={increaseHeight}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n interactions={{\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n userSelect: 'none',\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n },\n onPointerMove() {\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onScroll(event) {\n setScrollTop(event.currentTarget.scrollTop)\n },\n })\n },\n }}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\nconst isFirefox = userAgent.toLowerCase().includes('firefox')\n\nfunction getVisualOffsetTop() {\n return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport?.offsetTop ?? 0 : 0\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import {\n SideObject,\n detectOverflow,\n flip,\n inner,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInnerOffset,\n useInteractions,\n useListNavigation,\n useRole,\n useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useForceUpdate, useIsTouchDevice } from '@tamagui/core'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { ScopedProps, SelectProps } from './types'\n\nexport type SelectImplProps = ScopedProps<SelectProps> & {\n activeIndexRef: any\n selectedIndexRef: any\n listContentRef: any\n}\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props\n\n const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } =\n selectContext\n const [scrollTop, setScrollTop] = React.useState(0)\n const touch = useIsTouchDevice()\n\n const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n const overflowRef = React.useRef<null | SideObject>(null)\n const upArrowRef = React.useRef<HTMLDivElement | null>(null)\n const downArrowRef = React.useRef<HTMLDivElement | null>(null)\n const allowSelectRef = React.useRef(false)\n const allowMouseUpRef = React.useRef(true)\n const selectTimeoutRef = React.useRef<any>()\n\n const [controlledScrolling, setControlledScrolling] = React.useState(false)\n const [fallback, setFallback] = React.useState(false)\n const [innerOffset, setInnerOffset] = React.useState(0)\n const [blockSelection, setBlockSelection] = React.useState(false)\n const floatingStyle = React.useRef({})\n\n // Wait for scroll position to settle before showing arrows to prevent\n // interference with pointer events.\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => {\n if (!open) {\n setScrollTop(0)\n setFallback(false)\n setActiveIndex(null)\n setControlledScrolling(false)\n }\n })\n return () => {\n cancelAnimationFrame(frame)\n }\n }, [open, setActiveIndex])\n\n const updateFloatingSize = size({\n apply({\n availableHeight,\n rects: {\n reference: { width },\n },\n }) {\n floatingStyle.current = {\n width: width,\n maxHeight: availableHeight,\n }\n },\n padding: WINDOW_PADDING,\n })\n\n const { x, y, reference, floating, strategy, context, refs } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: 'bottom-start',\n middleware: fallback\n ? [\n offset(5),\n ...[\n touch\n ? shift({ crossAxis: true, padding: WINDOW_PADDING })\n : flip({ padding: WINDOW_PADDING }),\n ],\n updateFloatingSize,\n ]\n : [\n inner({\n listRef: listItemsRef,\n overflowRef,\n index: selectedIndex,\n offset: innerOffset,\n onFallbackChange: setFallback,\n padding: 10,\n minItemsVisible: touch ? 10 : 4,\n referenceOverflowThreshold: 20,\n }),\n updateFloatingSize,\n ],\n })\n\n const floatingRef = refs.floating\n\n const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD\n const showDownArrow =\n open &&\n floatingRef.current &&\n scrollTop <\n floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n const interactions = useInteractions([\n useClick(context, { pointerDown: true }),\n useDismiss(context, { outsidePointerDown: false }),\n useRole(context, { role: 'listbox' }),\n useInnerOffset(context, {\n enabled: !fallback,\n onChange: setInnerOffset,\n overflowRef,\n }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n }),\n useTypeahead(context, {\n listRef: listContentRef,\n onMatch: open ? setActiveIndex : setSelectedIndex,\n selectedIndex,\n activeIndex,\n }),\n ])\n\n const interactionsContext = {\n ...interactions,\n getReferenceProps() {\n return interactions.getReferenceProps({\n ref: reference,\n className: 'SelectTrigger',\n onKeyDown(event) {\n if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\n event.preventDefault()\n setOpen(true)\n }\n },\n })\n },\n getFloatingProps(props) {\n return interactions.getFloatingProps({\n ref: floating,\n className: 'Select',\n ...props,\n style: {\n position: strategy,\n top: y ?? '',\n left: x ?? '',\n outline: 0,\n listStyleType: 'none',\n scrollbarWidth: 'none',\n ...floatingStyle.current,\n ...props?.style,\n },\n onPointerEnter() {\n setControlledScrolling(false)\n },\n onPointerMove() {\n setControlledScrolling(false)\n },\n onKeyDown() {\n setControlledScrolling(true)\n },\n onContextMenu(e) {\n e.preventDefault()\n },\n onScroll(event) {\n // In React 18, the ScrollArrows need to synchronously know this value to prevent\n // painting at the wrong time.\n flushSync(() => setScrollTop(event.currentTarget.scrollTop))\n },\n })\n },\n }\n\n // effects\n\n React.useLayoutEffect(() => {\n if (open) {\n selectTimeoutRef.current = setTimeout(() => {\n allowSelectRef.current = true\n }, 300)\n\n return () => {\n clearTimeout(selectTimeoutRef.current)\n }\n } else {\n allowSelectRef.current = false\n allowMouseUpRef.current = true\n setInnerOffset(0)\n setFallback(false)\n setBlockSelection(false)\n }\n }, [open])\n\n // Replacement for `useDismiss` as the arrows are outside of the floating\n // element DOM tree.\n React.useLayoutEffect(() => {\n function onPointerDown(e: PointerEvent) {\n const target = e.target as Node\n if (\n !refs.floating.current?.contains(target) &&\n !upArrowRef.current?.contains(target) &&\n !downArrowRef.current?.contains(target)\n ) {\n setOpen(false)\n }\n }\n\n if (open) {\n document.addEventListener('pointerdown', onPointerDown)\n return () => {\n document.removeEventListener('pointerdown', onPointerDown)\n }\n }\n }, [open, refs, setOpen])\n\n // Scroll the `activeIndex` item into view only in \"controlledScrolling\"\n // (keyboard nav) mode.\n React.useLayoutEffect(() => {\n if (open && controlledScrolling) {\n requestAnimationFrame(() => {\n if (activeIndex != null) {\n listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })\n }\n })\n }\n\n setScrollTop(refs.floating.current?.scrollTop ?? 0)\n }, [open, refs, controlledScrolling, activeIndex])\n\n // Scroll the `selectedIndex` into view upon opening the floating element.\n React.useLayoutEffect(() => {\n if (open && fallback) {\n requestAnimationFrame(() => {\n if (selectedIndex != null) {\n listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })\n }\n })\n }\n }, [open, fallback, selectedIndex])\n\n // Unset the height limiting for fallback mode. This gets executed prior to\n // the positioning call.\n React.useLayoutEffect(() => {\n if (refs.floating.current && fallback) {\n refs.floating.current.style.maxHeight = ''\n }\n }, [refs, fallback])\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n return (\n <SelectProvider\n scope={__scopeSelect}\n {...(selectContext as Required<typeof selectContext>)}\n setScrollTop={setScrollTop}\n setInnerOffset={setInnerOffset}\n floatingRef={floatingRef}\n setValueAtIndex={(index, value) => {\n listContentRef.current[index] = value\n }}\n fallback={fallback}\n interactions={interactionsContext}\n floatingContext={context}\n activeIndex={activeIndex}\n canScrollDown={!!showDownArrow}\n canScrollUp={!!showUpArrow}\n controlledScrolling\n dataRef={context.dataRef}\n listRef={listItemsRef}\n blockSelection={blockSelection}\n allowMouseUpRef={allowMouseUpRef}\n upArrowRef={upArrowRef}\n downArrowRef={downArrowRef}\n selectTimeoutRef={selectTimeoutRef}\n allowSelectRef={allowSelectRef}\n >\n {children}\n {/* {isFormControl ? (\n <BubbleSelect\n ref={setBubbleSelect}\n aria-hidden\n tabIndex={-1}\n name={name}\n autoComplete={autoComplete}\n value={value}\n // enable form autofill\n onChange={(event) => setValue(event.target.value)}\n />\n ) : null} */}\n </SelectProvider>\n )\n}\n\n// Cross browser fixes for pinch-zooming/backdrop-filter \uD83D\uDE44\nconst userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''\nconst isFirefox = userAgent.toLowerCase().includes('firefox')\n\nfunction getVisualOffsetTop() {\n return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport?.offsetTop ?? 0 : 0\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|