@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/cjs/SelectImpl.js
CHANGED
|
@@ -25,33 +25,34 @@ __export(SelectImpl_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(SelectImpl_exports);
|
|
27
27
|
var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
|
|
28
|
-
var
|
|
28
|
+
var import_core = require("@tamagui/core");
|
|
29
29
|
var React = __toESM(require("react"));
|
|
30
|
+
var import_react_dom = require("react-dom");
|
|
30
31
|
var import_constants = require("./constants");
|
|
31
32
|
var import_context = require("./context");
|
|
32
33
|
const SelectInlineImpl = (props) => {
|
|
33
|
-
const {
|
|
34
|
-
__scopeSelect,
|
|
35
|
-
children,
|
|
36
|
-
open = false,
|
|
37
|
-
activeIndexRef,
|
|
38
|
-
selectedIndexRef,
|
|
39
|
-
listContentRef
|
|
40
|
-
} = props;
|
|
34
|
+
const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props;
|
|
41
35
|
const selectContext = (0, import_context.useSelectContext)("SelectSheetImpl", __scopeSelect);
|
|
42
36
|
const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } = selectContext;
|
|
43
|
-
const [showArrows, setShowArrows] = React.useState(false);
|
|
44
37
|
const [scrollTop, setScrollTop] = React.useState(0);
|
|
45
|
-
const
|
|
38
|
+
const touch = (0, import_core.useIsTouchDevice)();
|
|
46
39
|
const listItemsRef = React.useRef([]);
|
|
40
|
+
const overflowRef = React.useRef(null);
|
|
41
|
+
const upArrowRef = React.useRef(null);
|
|
42
|
+
const downArrowRef = React.useRef(null);
|
|
43
|
+
const allowSelectRef = React.useRef(false);
|
|
44
|
+
const allowMouseUpRef = React.useRef(true);
|
|
45
|
+
const selectTimeoutRef = React.useRef();
|
|
47
46
|
const [controlledScrolling, setControlledScrolling] = React.useState(false);
|
|
48
|
-
const [
|
|
47
|
+
const [fallback, setFallback] = React.useState(false);
|
|
48
|
+
const [innerOffset, setInnerOffset] = React.useState(0);
|
|
49
|
+
const [blockSelection, setBlockSelection] = React.useState(false);
|
|
50
|
+
const floatingStyle = React.useRef({});
|
|
49
51
|
React.useEffect(() => {
|
|
50
52
|
const frame = requestAnimationFrame(() => {
|
|
51
|
-
setShowArrows(open);
|
|
52
53
|
if (!open) {
|
|
53
54
|
setScrollTop(0);
|
|
54
|
-
|
|
55
|
+
setFallback(false);
|
|
55
56
|
setActiveIndex(null);
|
|
56
57
|
setControlledScrolling(false);
|
|
57
58
|
}
|
|
@@ -60,92 +61,56 @@ const SelectInlineImpl = (props) => {
|
|
|
60
61
|
cancelAnimationFrame(frame);
|
|
61
62
|
};
|
|
62
63
|
}, [open, setActiveIndex]);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
const updateFloatingSize = (0, import_react_dom_interactions.size)({
|
|
65
|
+
apply({
|
|
66
|
+
availableHeight,
|
|
67
|
+
rects: {
|
|
68
|
+
reference: { width }
|
|
69
|
+
}
|
|
70
|
+
}) {
|
|
71
|
+
floatingStyle.current = {
|
|
72
|
+
width,
|
|
73
|
+
maxHeight: availableHeight
|
|
74
|
+
};
|
|
75
|
+
},
|
|
76
|
+
padding: import_constants.WINDOW_PADDING
|
|
77
|
+
});
|
|
78
|
+
const { x, y, reference, floating, strategy, context, refs } = (0, import_react_dom_interactions.useFloating)({
|
|
71
79
|
open,
|
|
72
80
|
onOpenChange: setOpen,
|
|
73
|
-
placement: "bottom",
|
|
74
|
-
middleware:
|
|
75
|
-
(0, import_react_dom_interactions.offset)(({ rects }) => {
|
|
76
|
-
const index = activeIndexRef.current ?? selectedIndexRef.current;
|
|
77
|
-
if (index == null) {
|
|
78
|
-
return 0;
|
|
79
|
-
}
|
|
80
|
-
const item = listItemsRef.current[index];
|
|
81
|
-
if (item == null) {
|
|
82
|
-
return 0;
|
|
83
|
-
}
|
|
84
|
-
const offsetTop = item.offsetTop;
|
|
85
|
-
const itemHeight = item.offsetHeight;
|
|
86
|
-
const height = rects.reference.height;
|
|
87
|
-
return -offsetTop - height - (itemHeight - height) / 2;
|
|
88
|
-
}),
|
|
89
|
-
{
|
|
90
|
-
name: "size",
|
|
91
|
-
async fn(args) {
|
|
92
|
-
var _a;
|
|
93
|
-
const {
|
|
94
|
-
elements: { floating: floating2 },
|
|
95
|
-
rects: { reference: reference2 },
|
|
96
|
-
middlewareData: middlewareData2
|
|
97
|
-
} = args;
|
|
98
|
-
const overflow = await (0, import_react_dom_interactions.detectOverflow)(args, {
|
|
99
|
-
padding: import_constants.WINDOW_PADDING
|
|
100
|
-
});
|
|
101
|
-
const top = Math.max(0, overflow.top);
|
|
102
|
-
const bottom = Math.max(0, overflow.bottom);
|
|
103
|
-
const nextY = args.y + top;
|
|
104
|
-
if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
|
|
105
|
-
return {
|
|
106
|
-
y: nextY,
|
|
107
|
-
data: {
|
|
108
|
-
y: middlewareData2.size.y
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
}
|
|
112
|
-
Object.assign(floating2.style, {
|
|
113
|
-
maxHeight: `${floating2.scrollHeight - Math.abs(top + bottom)}px`,
|
|
114
|
-
minWidth: `${reference2.width + getFloatingPadding(floating2) * 2}px`
|
|
115
|
-
});
|
|
116
|
-
return {
|
|
117
|
-
y: nextY,
|
|
118
|
-
data: {
|
|
119
|
-
y: top,
|
|
120
|
-
skip: true
|
|
121
|
-
},
|
|
122
|
-
reset: {
|
|
123
|
-
rects: true
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
] : [
|
|
81
|
+
placement: "bottom-start",
|
|
82
|
+
middleware: fallback ? [
|
|
129
83
|
(0, import_react_dom_interactions.offset)(5),
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
84
|
+
...[
|
|
85
|
+
touch ? (0, import_react_dom_interactions.shift)({ crossAxis: true, padding: import_constants.WINDOW_PADDING }) : (0, import_react_dom_interactions.flip)({ padding: import_constants.WINDOW_PADDING })
|
|
86
|
+
],
|
|
87
|
+
updateFloatingSize
|
|
88
|
+
] : [
|
|
89
|
+
(0, import_react_dom_interactions.inner)({
|
|
90
|
+
listRef: listItemsRef,
|
|
91
|
+
overflowRef,
|
|
92
|
+
index: selectedIndex,
|
|
93
|
+
offset: innerOffset,
|
|
94
|
+
onFallbackChange: setFallback,
|
|
95
|
+
padding: 10,
|
|
96
|
+
minItemsVisible: touch ? 10 : 4,
|
|
97
|
+
referenceOverflowThreshold: 20
|
|
98
|
+
}),
|
|
99
|
+
updateFloatingSize
|
|
140
100
|
]
|
|
141
101
|
});
|
|
142
102
|
const floatingRef = refs.floating;
|
|
143
|
-
const showUpArrow =
|
|
144
|
-
const showDownArrow =
|
|
103
|
+
const showUpArrow = open && scrollTop > import_constants.SCROLL_ARROW_THRESHOLD;
|
|
104
|
+
const showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - import_constants.SCROLL_ARROW_THRESHOLD;
|
|
145
105
|
const interactions = (0, import_react_dom_interactions.useInteractions)([
|
|
146
106
|
(0, import_react_dom_interactions.useClick)(context, { pointerDown: true }),
|
|
107
|
+
(0, import_react_dom_interactions.useDismiss)(context, { outsidePointerDown: false }),
|
|
147
108
|
(0, import_react_dom_interactions.useRole)(context, { role: "listbox" }),
|
|
148
|
-
(0, import_react_dom_interactions.
|
|
109
|
+
(0, import_react_dom_interactions.useInnerOffset)(context, {
|
|
110
|
+
enabled: !fallback,
|
|
111
|
+
onChange: setInnerOffset,
|
|
112
|
+
overflowRef
|
|
113
|
+
}),
|
|
149
114
|
(0, import_react_dom_interactions.useListNavigation)(context, {
|
|
150
115
|
listRef: listItemsRef,
|
|
151
116
|
activeIndex,
|
|
@@ -159,230 +124,135 @@ const SelectInlineImpl = (props) => {
|
|
|
159
124
|
activeIndex
|
|
160
125
|
})
|
|
161
126
|
]);
|
|
162
|
-
const
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
const visualMaxHeight = viewportHeight - import_constants.WINDOW_PADDING * 2;
|
|
173
|
-
if (amount < 0 && selectedIndexRef.current != null && Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - import_constants.WINDOW_PADDING)) {
|
|
174
|
-
floating2.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`;
|
|
175
|
-
}
|
|
176
|
-
if (amount > 0 && Math.round(rectTop) > Math.round(import_constants.WINDOW_PADDING - getVisualOffsetTop()) && floating2.scrollHeight > floating2.offsetHeight) {
|
|
177
|
-
const nextTop = Math.max(import_constants.WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount);
|
|
178
|
-
const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount);
|
|
179
|
-
Object.assign(floating2.style, {
|
|
180
|
-
maxHeight: `${nextMaxHeight}px`,
|
|
181
|
-
top: `${nextTop}px`
|
|
182
|
-
});
|
|
183
|
-
if (nextTop - import_constants.WINDOW_PADDING > getVisualOffsetTop()) {
|
|
184
|
-
floating2.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating2);
|
|
185
|
-
}
|
|
186
|
-
return currentTop - nextTop;
|
|
187
|
-
}
|
|
188
|
-
}, [middlewareType, selectedIndexRef]);
|
|
189
|
-
const touchPageYRef = React.useRef(null);
|
|
190
|
-
const handleWheel = React.useCallback((event) => {
|
|
191
|
-
var _a;
|
|
192
|
-
const pinching = event.ctrlKey;
|
|
193
|
-
const currentTarget = event.currentTarget;
|
|
194
|
-
function isWheelEvent(event2) {
|
|
195
|
-
return typeof event2.deltaY === "number";
|
|
196
|
-
}
|
|
197
|
-
function isTouchEvent(event2) {
|
|
198
|
-
return event2.touches != null;
|
|
199
|
-
}
|
|
200
|
-
if (Math.abs(((currentTarget == null ? void 0 : currentTarget.offsetHeight) ?? 0) - (((visualViewport == null ? void 0 : visualViewport.height) ?? 0) - import_constants.WINDOW_PADDING * 2)) > 1 && !pinching) {
|
|
201
|
-
event.preventDefault();
|
|
202
|
-
} else if (isWheelEvent(event) && isFirefox) {
|
|
203
|
-
currentTarget.scrollTop += event.deltaY;
|
|
204
|
-
}
|
|
205
|
-
if (!pinching) {
|
|
206
|
-
let delta = 5;
|
|
207
|
-
if (isTouchEvent(event)) {
|
|
208
|
-
const currentPageY = touchPageYRef.current;
|
|
209
|
-
const pageY = (_a = event.touches[0]) == null ? void 0 : _a.pageY;
|
|
210
|
-
if (pageY != null) {
|
|
211
|
-
touchPageYRef.current = pageY;
|
|
212
|
-
if (currentPageY != null) {
|
|
213
|
-
delta = currentPageY - pageY;
|
|
127
|
+
const interactionsContext = {
|
|
128
|
+
...interactions,
|
|
129
|
+
getReferenceProps() {
|
|
130
|
+
return interactions.getReferenceProps({
|
|
131
|
+
ref: reference,
|
|
132
|
+
className: "SelectTrigger",
|
|
133
|
+
onKeyDown(event) {
|
|
134
|
+
if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
|
|
135
|
+
event.preventDefault();
|
|
136
|
+
setOpen(true);
|
|
214
137
|
}
|
|
215
138
|
}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
139
|
+
});
|
|
140
|
+
},
|
|
141
|
+
getFloatingProps(props2) {
|
|
142
|
+
return interactions.getFloatingProps({
|
|
143
|
+
ref: floating,
|
|
144
|
+
className: "Select",
|
|
145
|
+
...props2,
|
|
146
|
+
style: {
|
|
147
|
+
position: strategy,
|
|
148
|
+
top: y ?? "",
|
|
149
|
+
left: x ?? "",
|
|
150
|
+
outline: 0,
|
|
151
|
+
listStyleType: "none",
|
|
152
|
+
scrollbarWidth: "none",
|
|
153
|
+
...floatingStyle.current,
|
|
154
|
+
...props2 == null ? void 0 : props2.style
|
|
155
|
+
},
|
|
156
|
+
onPointerEnter() {
|
|
157
|
+
setControlledScrolling(false);
|
|
158
|
+
},
|
|
159
|
+
onPointerMove() {
|
|
160
|
+
setControlledScrolling(false);
|
|
161
|
+
},
|
|
162
|
+
onKeyDown() {
|
|
163
|
+
setControlledScrolling(true);
|
|
164
|
+
},
|
|
165
|
+
onContextMenu(e) {
|
|
166
|
+
e.preventDefault();
|
|
167
|
+
},
|
|
168
|
+
onScroll(event) {
|
|
169
|
+
(0, import_react_dom.flushSync)(() => setScrollTop(event.currentTarget.scrollTop));
|
|
170
|
+
}
|
|
171
|
+
});
|
|
225
172
|
}
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
173
|
+
};
|
|
174
|
+
React.useLayoutEffect(() => {
|
|
175
|
+
if (open) {
|
|
176
|
+
selectTimeoutRef.current = setTimeout(() => {
|
|
177
|
+
allowSelectRef.current = true;
|
|
178
|
+
}, 300);
|
|
231
179
|
return () => {
|
|
232
|
-
|
|
233
|
-
floating2.removeEventListener("touchmove", handleWheel);
|
|
234
|
-
floating2.removeEventListener("touchend", onTouchEnd);
|
|
180
|
+
clearTimeout(selectTimeoutRef.current);
|
|
235
181
|
};
|
|
182
|
+
} else {
|
|
183
|
+
allowSelectRef.current = false;
|
|
184
|
+
allowMouseUpRef.current = true;
|
|
185
|
+
setInnerOffset(0);
|
|
186
|
+
setFallback(false);
|
|
187
|
+
setBlockSelection(false);
|
|
236
188
|
}
|
|
237
|
-
}, [open
|
|
238
|
-
React.useEffect(() => {
|
|
239
|
-
window.addEventListener("resize", update);
|
|
240
|
-
return () => {
|
|
241
|
-
window.removeEventListener("resize", update);
|
|
242
|
-
};
|
|
243
|
-
}, [update]);
|
|
189
|
+
}, [open]);
|
|
244
190
|
React.useLayoutEffect(() => {
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
const itemHeight = ((_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) ?? 0;
|
|
251
|
-
const floatingHeight = floating2.offsetHeight;
|
|
252
|
-
const top = item.offsetTop;
|
|
253
|
-
const bottom = top + itemHeight;
|
|
254
|
-
if (top < floating2.scrollTop + 20) {
|
|
255
|
-
const diff = floating2.scrollTop - top + 20;
|
|
256
|
-
floating2.scrollTop -= diff;
|
|
257
|
-
if (activeIndex != selectedIndex && activeIndex != null) {
|
|
258
|
-
increaseHeight(floating2, -diff);
|
|
259
|
-
}
|
|
260
|
-
} else if (bottom > floatingHeight + floating2.scrollTop - 20) {
|
|
261
|
-
const diff = bottom - floatingHeight - floating2.scrollTop + 20;
|
|
262
|
-
floating2.scrollTop += diff;
|
|
263
|
-
if (activeIndex != selectedIndex && activeIndex != null) {
|
|
264
|
-
floating2.scrollTop -= increaseHeight(floating2, diff) ?? 0;
|
|
265
|
-
}
|
|
266
|
-
}
|
|
191
|
+
function onPointerDown(e) {
|
|
192
|
+
var _a, _b, _c;
|
|
193
|
+
const target = e.target;
|
|
194
|
+
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))) {
|
|
195
|
+
setOpen(false);
|
|
267
196
|
}
|
|
268
197
|
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
increaseHeight
|
|
277
|
-
]);
|
|
198
|
+
if (open) {
|
|
199
|
+
document.addEventListener("pointerdown", onPointerDown);
|
|
200
|
+
return () => {
|
|
201
|
+
document.removeEventListener("pointerdown", onPointerDown);
|
|
202
|
+
};
|
|
203
|
+
}
|
|
204
|
+
}, [open, refs, setOpen]);
|
|
278
205
|
React.useLayoutEffect(() => {
|
|
279
206
|
var _a;
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
const item = listItemsRef.current[selectedIndex];
|
|
286
|
-
if (item) {
|
|
287
|
-
floating2.scrollTop = item.offsetTop - floating2.clientHeight + referenceRect.height;
|
|
207
|
+
if (open && controlledScrolling) {
|
|
208
|
+
requestAnimationFrame(() => {
|
|
209
|
+
var _a2;
|
|
210
|
+
if (activeIndex != null) {
|
|
211
|
+
(_a2 = listItemsRef.current[activeIndex]) == null ? void 0 : _a2.scrollIntoView({ block: "nearest" });
|
|
288
212
|
}
|
|
289
|
-
|
|
290
|
-
}
|
|
291
|
-
floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
|
|
292
|
-
const closeToBottom = ((visualViewport == null ? void 0 : visualViewport.height) ?? 0) + getVisualOffsetTop() - referenceRect.bottom < import_constants.FALLBACK_THRESHOLD;
|
|
293
|
-
const closeToTop = referenceRect.top < import_constants.FALLBACK_THRESHOLD;
|
|
294
|
-
if (floating2.offsetHeight < import_constants.MIN_HEIGHT || closeToTop || closeToBottom) {
|
|
295
|
-
setMiddlewareType("fallback");
|
|
296
|
-
}
|
|
213
|
+
});
|
|
297
214
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
increaseHeight,
|
|
301
|
-
selectedIndex,
|
|
302
|
-
middlewareType,
|
|
303
|
-
refs.floating,
|
|
304
|
-
refs.reference,
|
|
305
|
-
middlewareData
|
|
306
|
-
]);
|
|
215
|
+
setScrollTop(((_a = refs.floating.current) == null ? void 0 : _a.scrollTop) ?? 0);
|
|
216
|
+
}, [open, refs, controlledScrolling, activeIndex]);
|
|
307
217
|
React.useLayoutEffect(() => {
|
|
308
|
-
if (open &&
|
|
218
|
+
if (open && fallback) {
|
|
309
219
|
requestAnimationFrame(() => {
|
|
310
220
|
var _a;
|
|
311
|
-
(
|
|
221
|
+
if (selectedIndex != null) {
|
|
222
|
+
(_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
|
|
223
|
+
}
|
|
312
224
|
});
|
|
313
225
|
}
|
|
314
|
-
}, [
|
|
315
|
-
React.
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
setMiddlewareType("align");
|
|
321
|
-
setActiveIndex(null);
|
|
322
|
-
setControlledScrolling(false);
|
|
323
|
-
}
|
|
324
|
-
});
|
|
325
|
-
return () => cancelAnimationFrame(frame);
|
|
326
|
-
}, [open, setActiveIndex]);
|
|
226
|
+
}, [open, fallback, selectedIndex]);
|
|
227
|
+
React.useLayoutEffect(() => {
|
|
228
|
+
if (refs.floating.current && fallback) {
|
|
229
|
+
refs.floating.current.style.maxHeight = "";
|
|
230
|
+
}
|
|
231
|
+
}, [refs, fallback]);
|
|
327
232
|
return /* @__PURE__ */ React.createElement(import_context.SelectProvider, {
|
|
328
233
|
scope: __scopeSelect,
|
|
329
234
|
...selectContext,
|
|
330
|
-
|
|
235
|
+
setScrollTop,
|
|
236
|
+
setInnerOffset,
|
|
331
237
|
floatingRef,
|
|
332
238
|
setValueAtIndex: (index, value) => {
|
|
333
239
|
listContentRef.current[index] = value;
|
|
334
240
|
},
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
getReferenceProps() {
|
|
338
|
-
return interactions.getReferenceProps({
|
|
339
|
-
ref: reference,
|
|
340
|
-
className: "SelectTrigger",
|
|
341
|
-
onKeyDown(event) {
|
|
342
|
-
if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
|
|
343
|
-
event.preventDefault();
|
|
344
|
-
setOpen(true);
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
});
|
|
348
|
-
},
|
|
349
|
-
getFloatingProps(props2) {
|
|
350
|
-
return interactions.getFloatingProps({
|
|
351
|
-
ref: floating,
|
|
352
|
-
className: "Select",
|
|
353
|
-
...props2,
|
|
354
|
-
style: {
|
|
355
|
-
position: strategy,
|
|
356
|
-
top: y ?? "",
|
|
357
|
-
left: x ?? "",
|
|
358
|
-
outline: 0,
|
|
359
|
-
listStyleType: "none",
|
|
360
|
-
scrollbarWidth: "none",
|
|
361
|
-
userSelect: "none",
|
|
362
|
-
...props2 == null ? void 0 : props2.style
|
|
363
|
-
},
|
|
364
|
-
onPointerEnter() {
|
|
365
|
-
setControlledScrolling(false);
|
|
366
|
-
},
|
|
367
|
-
onPointerMove() {
|
|
368
|
-
setControlledScrolling(false);
|
|
369
|
-
},
|
|
370
|
-
onKeyDown() {
|
|
371
|
-
setControlledScrolling(true);
|
|
372
|
-
},
|
|
373
|
-
onScroll(event) {
|
|
374
|
-
setScrollTop(event.currentTarget.scrollTop);
|
|
375
|
-
}
|
|
376
|
-
});
|
|
377
|
-
}
|
|
378
|
-
},
|
|
241
|
+
fallback,
|
|
242
|
+
interactions: interactionsContext,
|
|
379
243
|
floatingContext: context,
|
|
380
244
|
activeIndex,
|
|
381
245
|
canScrollDown: !!showDownArrow,
|
|
382
246
|
canScrollUp: !!showUpArrow,
|
|
383
247
|
controlledScrolling: true,
|
|
384
248
|
dataRef: context.dataRef,
|
|
385
|
-
listRef: listItemsRef
|
|
249
|
+
listRef: listItemsRef,
|
|
250
|
+
blockSelection,
|
|
251
|
+
allowMouseUpRef,
|
|
252
|
+
upArrowRef,
|
|
253
|
+
downArrowRef,
|
|
254
|
+
selectTimeoutRef,
|
|
255
|
+
allowSelectRef
|
|
386
256
|
}, children);
|
|
387
257
|
};
|
|
388
258
|
const userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
|
|
@@ -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,
|
|
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
|
}
|