@radix-ui/react-select 1.1.2 → 1.2.0-rc.1
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/index.d.ts +27 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +274 -157
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +274 -159
- package/dist/index.module.js.map +1 -1
- package/package.json +4 -2
package/dist/index.module.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import $01b9c$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import {useState as $01b9c$useState, useRef as $01b9c$useRef, createElement as $01b9c$createElement, useCallback as $01b9c$useCallback, forwardRef as $01b9c$forwardRef,
|
|
2
|
+
import {useState as $01b9c$useState, useRef as $01b9c$useRef, createElement as $01b9c$createElement, useCallback as $01b9c$useCallback, forwardRef as $01b9c$forwardRef, useEffect as $01b9c$useEffect, Fragment as $01b9c$Fragment, useMemo as $01b9c$useMemo} from "react";
|
|
3
3
|
import {createPortal as $01b9c$createPortal} from "react-dom";
|
|
4
4
|
import {clamp as $01b9c$clamp} from "@radix-ui/number";
|
|
5
5
|
import {composeEventHandlers as $01b9c$composeEventHandlers} from "@radix-ui/primitive";
|
|
@@ -11,6 +11,7 @@ import {DismissableLayer as $01b9c$DismissableLayer} from "@radix-ui/react-dismi
|
|
|
11
11
|
import {useFocusGuards as $01b9c$useFocusGuards} from "@radix-ui/react-focus-guards";
|
|
12
12
|
import {FocusScope as $01b9c$FocusScope} from "@radix-ui/react-focus-scope";
|
|
13
13
|
import {useId as $01b9c$useId} from "@radix-ui/react-id";
|
|
14
|
+
import {createPopperScope as $01b9c$createPopperScope, Root as $01b9c$Root, Anchor as $01b9c$Anchor, Content as $01b9c$Content, Arrow as $01b9c$Arrow} from "@radix-ui/react-popper";
|
|
14
15
|
import {Portal as $01b9c$Portal} from "@radix-ui/react-portal";
|
|
15
16
|
import {Primitive as $01b9c$Primitive} from "@radix-ui/react-primitive";
|
|
16
17
|
import {Slot as $01b9c$Slot} from "@radix-ui/react-slot";
|
|
@@ -42,6 +43,8 @@ import {RemoveScroll as $01b9c$RemoveScroll} from "react-remove-scroll";
|
|
|
42
43
|
|
|
43
44
|
|
|
44
45
|
|
|
46
|
+
|
|
47
|
+
|
|
45
48
|
|
|
46
49
|
|
|
47
50
|
|
|
@@ -60,12 +63,15 @@ const $cc7e05a45900e73f$var$SELECTION_KEYS = [
|
|
|
60
63
|
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SELECT_NAME = 'Select';
|
|
61
64
|
const [$cc7e05a45900e73f$var$Collection, $cc7e05a45900e73f$var$useCollection, $cc7e05a45900e73f$var$createCollectionScope] = $01b9c$createCollection($cc7e05a45900e73f$var$SELECT_NAME);
|
|
62
65
|
const [$cc7e05a45900e73f$var$createSelectContext, $cc7e05a45900e73f$export$286727a75dc039bd] = $01b9c$createContextScope($cc7e05a45900e73f$var$SELECT_NAME, [
|
|
63
|
-
$cc7e05a45900e73f$var$createCollectionScope
|
|
66
|
+
$cc7e05a45900e73f$var$createCollectionScope,
|
|
67
|
+
$01b9c$createPopperScope
|
|
64
68
|
]);
|
|
69
|
+
const $cc7e05a45900e73f$var$usePopperScope = $01b9c$createPopperScope();
|
|
65
70
|
const [$cc7e05a45900e73f$var$SelectProvider, $cc7e05a45900e73f$var$useSelectContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
|
|
66
71
|
const [$cc7e05a45900e73f$var$SelectNativeOptionsProvider, $cc7e05a45900e73f$var$useSelectNativeOptionsContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
|
|
67
72
|
const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
|
|
68
73
|
const { __scopeSelect: __scopeSelect , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange , dir: dir , name: name , autoComplete: autoComplete , disabled: disabled , required: required } = props;
|
|
74
|
+
const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
|
|
69
75
|
const [trigger, setTrigger] = $01b9c$useState(null);
|
|
70
76
|
const [valueNode, setValueNode] = $01b9c$useState(null);
|
|
71
77
|
const [valueNodeHasChildren, setValueNodeHasChildren] = $01b9c$useState(false);
|
|
@@ -89,7 +95,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
|
|
|
89
95
|
// each time the options change.
|
|
90
96
|
const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value
|
|
91
97
|
).join(';');
|
|
92
|
-
return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectProvider, {
|
|
98
|
+
return /*#__PURE__*/ $01b9c$createElement($01b9c$Root, popperScope, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectProvider, {
|
|
93
99
|
required: required,
|
|
94
100
|
scope: __scopeSelect,
|
|
95
101
|
trigger: trigger,
|
|
@@ -135,7 +141,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
|
|
|
135
141
|
disabled: disabled
|
|
136
142
|
}, value === undefined ? /*#__PURE__*/ $01b9c$createElement("option", {
|
|
137
143
|
value: ""
|
|
138
|
-
}) : null, Array.from(nativeOptionsSet)) : null);
|
|
144
|
+
}) : null, Array.from(nativeOptionsSet)) : null));
|
|
139
145
|
};
|
|
140
146
|
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$ef9b1a59e592288f, {
|
|
141
147
|
displayName: $cc7e05a45900e73f$var$SELECT_NAME
|
|
@@ -145,6 +151,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
|
|
|
145
151
|
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$TRIGGER_NAME = 'SelectTrigger';
|
|
146
152
|
const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
147
153
|
const { __scopeSelect: __scopeSelect , disabled: disabled = false , ...triggerProps } = props;
|
|
154
|
+
const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
|
|
148
155
|
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$TRIGGER_NAME, __scopeSelect);
|
|
149
156
|
const isDisabled = context.disabled || disabled;
|
|
150
157
|
const composedRefs = $01b9c$useComposedRefs(forwardedRef, context.onTriggerChange);
|
|
@@ -163,7 +170,9 @@ const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $01b9c$forwardRef
|
|
|
163
170
|
resetTypeahead();
|
|
164
171
|
}
|
|
165
172
|
};
|
|
166
|
-
return /*#__PURE__*/ $01b9c$createElement($01b9c$
|
|
173
|
+
return /*#__PURE__*/ $01b9c$createElement($01b9c$Anchor, $01b9c$babelruntimehelpersesmextends({
|
|
174
|
+
asChild: true
|
|
175
|
+
}, popperScope), /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.button, $01b9c$babelruntimehelpersesmextends({
|
|
167
176
|
type: "button",
|
|
168
177
|
role: "combobox",
|
|
169
178
|
"aria-controls": context.contentId,
|
|
@@ -212,7 +221,7 @@ const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $01b9c$forwardRef
|
|
|
212
221
|
event.preventDefault();
|
|
213
222
|
}
|
|
214
223
|
})
|
|
215
|
-
}));
|
|
224
|
+
})));
|
|
216
225
|
});
|
|
217
226
|
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$3ac1e88a1c0b9f1, {
|
|
218
227
|
displayName: $cc7e05a45900e73f$var$TRIGGER_NAME
|
|
@@ -278,23 +287,32 @@ const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ $01b9c$forwardRe
|
|
|
278
287
|
$01b9c$useLayoutEffect(()=>{
|
|
279
288
|
setFragment(new DocumentFragment());
|
|
280
289
|
}, []);
|
|
281
|
-
|
|
290
|
+
if (!context.open) {
|
|
291
|
+
const frag = fragment;
|
|
292
|
+
return frag ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentProvider, {
|
|
293
|
+
scope: props.__scopeSelect
|
|
294
|
+
}, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.Slot, {
|
|
295
|
+
scope: props.__scopeSelect
|
|
296
|
+
}, /*#__PURE__*/ $01b9c$createElement("div", null, props.children))), frag) : null;
|
|
297
|
+
}
|
|
298
|
+
return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentImpl, $01b9c$babelruntimehelpersesmextends({}, props, {
|
|
282
299
|
ref: forwardedRef
|
|
283
|
-
}))
|
|
284
|
-
scope: props.__scopeSelect
|
|
285
|
-
}, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.Slot, {
|
|
286
|
-
scope: props.__scopeSelect
|
|
287
|
-
}, /*#__PURE__*/ $01b9c$createElement("div", null, props.children))), fragment) : null);
|
|
300
|
+
}));
|
|
288
301
|
});
|
|
289
302
|
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$c973a4b3cb86a03d, {
|
|
290
303
|
displayName: $cc7e05a45900e73f$var$CONTENT_NAME
|
|
291
304
|
});
|
|
292
|
-
|
|
305
|
+
/* -------------------------------------------------------------------------------------------------
|
|
306
|
+
* SelectContentImpl
|
|
307
|
+
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$CONTENT_MARGIN = 10;
|
|
293
308
|
const [$cc7e05a45900e73f$var$SelectContentProvider, $cc7e05a45900e73f$var$useSelectContentContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME);
|
|
309
|
+
const $cc7e05a45900e73f$var$CONTENT_IMPL_NAME = 'SelectContentImpl';
|
|
294
310
|
const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
295
|
-
const { __scopeSelect: __scopeSelect , onCloseAutoFocus: onCloseAutoFocus ,
|
|
311
|
+
const { __scopeSelect: __scopeSelect , position: position = 'item-aligned' , onCloseAutoFocus: onCloseAutoFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , side: //
|
|
312
|
+
// PopperContent props
|
|
313
|
+
side , sideOffset: sideOffset , align: align , alignOffset: alignOffset , arrowPadding: arrowPadding , collisionBoundary: collisionBoundary , collisionPadding: collisionPadding , sticky: sticky , hideWhenDetached: hideWhenDetached , avoidCollisions: avoidCollisions , //
|
|
314
|
+
...contentProps } = props;
|
|
296
315
|
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
|
|
297
|
-
const [contentWrapper, setContentWrapper] = $01b9c$useState(null);
|
|
298
316
|
const [content, setContent] = $01b9c$useState(null);
|
|
299
317
|
const [viewport, setViewport] = $01b9c$useState(null);
|
|
300
318
|
const composedRefs = $01b9c$useComposedRefs(forwardedRef, (node)=>setContent(node)
|
|
@@ -303,8 +321,6 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
303
321
|
const [selectedItemText, setSelectedItemText] = $01b9c$useState(null);
|
|
304
322
|
const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
|
|
305
323
|
const [isPositioned, setIsPositioned] = $01b9c$useState(false);
|
|
306
|
-
const shouldRepositionRef = $01b9c$useRef(true);
|
|
307
|
-
const shouldExpandOnScrollRef = $01b9c$useRef(false);
|
|
308
324
|
const firstValidItemFoundRef = $01b9c$useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
|
|
309
325
|
$01b9c$useEffect(()=>{
|
|
310
326
|
if (content) return $01b9c$hideOthers(content);
|
|
@@ -313,12 +329,6 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
313
329
|
]); // Make sure the whole tree has focus guards as our `Select` may be
|
|
314
330
|
// the last element in the DOM (because of the `Portal`)
|
|
315
331
|
$01b9c$useFocusGuards();
|
|
316
|
-
const [contentZIndex, setContentZIndex] = $01b9c$useState();
|
|
317
|
-
$01b9c$useLayoutEffect(()=>{
|
|
318
|
-
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
319
|
-
}, [
|
|
320
|
-
content
|
|
321
|
-
]);
|
|
322
332
|
const focusFirst = $01b9c$useCallback((candidates)=>{
|
|
323
333
|
const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
|
|
324
334
|
);
|
|
@@ -339,101 +349,6 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
339
349
|
getItems,
|
|
340
350
|
viewport
|
|
341
351
|
]);
|
|
342
|
-
const position = $01b9c$useCallback(()=>{
|
|
343
|
-
if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
|
|
344
|
-
const triggerRect = context.trigger.getBoundingClientRect(); // -----------------------------------------------------------------------------------------
|
|
345
|
-
// Horizontal positioning
|
|
346
|
-
// -----------------------------------------------------------------------------------------
|
|
347
|
-
const contentRect = content.getBoundingClientRect();
|
|
348
|
-
const valueNodeRect = context.valueNode.getBoundingClientRect();
|
|
349
|
-
const itemTextRect = selectedItemText.getBoundingClientRect();
|
|
350
|
-
if (context.dir !== 'rtl') {
|
|
351
|
-
const itemTextOffset = itemTextRect.left - contentRect.left;
|
|
352
|
-
const left = valueNodeRect.left - itemTextOffset;
|
|
353
|
-
const leftDelta = triggerRect.left - left;
|
|
354
|
-
const minContentWidth = triggerRect.width + leftDelta;
|
|
355
|
-
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
356
|
-
const rightEdge = window.innerWidth - $cc7e05a45900e73f$var$CONTENT_MARGIN;
|
|
357
|
-
const clampedLeft = $01b9c$clamp(left, [
|
|
358
|
-
$cc7e05a45900e73f$var$CONTENT_MARGIN,
|
|
359
|
-
rightEdge - contentWidth
|
|
360
|
-
]);
|
|
361
|
-
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
362
|
-
contentWrapper.style.left = clampedLeft + 'px';
|
|
363
|
-
} else {
|
|
364
|
-
const itemTextOffset = contentRect.right - itemTextRect.right;
|
|
365
|
-
const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
|
|
366
|
-
const rightDelta = window.innerWidth - triggerRect.right - right;
|
|
367
|
-
const minContentWidth = triggerRect.width + rightDelta;
|
|
368
|
-
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
369
|
-
const leftEdge = window.innerWidth - $cc7e05a45900e73f$var$CONTENT_MARGIN;
|
|
370
|
-
const clampedRight = $01b9c$clamp(right, [
|
|
371
|
-
$cc7e05a45900e73f$var$CONTENT_MARGIN,
|
|
372
|
-
leftEdge - contentWidth
|
|
373
|
-
]);
|
|
374
|
-
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
375
|
-
contentWrapper.style.right = clampedRight + 'px';
|
|
376
|
-
} // -----------------------------------------------------------------------------------------
|
|
377
|
-
// Vertical positioning
|
|
378
|
-
// -----------------------------------------------------------------------------------------
|
|
379
|
-
const items = getItems();
|
|
380
|
-
const availableHeight = window.innerHeight - $cc7e05a45900e73f$var$CONTENT_MARGIN * 2;
|
|
381
|
-
const itemsHeight = viewport.scrollHeight;
|
|
382
|
-
const contentStyles = window.getComputedStyle(content);
|
|
383
|
-
const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
|
|
384
|
-
const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
|
|
385
|
-
const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
|
|
386
|
-
const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
|
|
387
|
-
const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore
|
|
388
|
-
const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
|
|
389
|
-
const viewportStyles = window.getComputedStyle(viewport);
|
|
390
|
-
const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
|
|
391
|
-
const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
|
|
392
|
-
const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - $cc7e05a45900e73f$var$CONTENT_MARGIN;
|
|
393
|
-
const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
|
|
394
|
-
const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
|
|
395
|
-
const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
|
|
396
|
-
const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
|
|
397
|
-
const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
|
|
398
|
-
const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
|
|
399
|
-
if (willAlignWithoutTopOverflow) {
|
|
400
|
-
const isLastItem = selectedItem === items[items.length - 1].ref.current;
|
|
401
|
-
contentWrapper.style.bottom = "0px";
|
|
402
|
-
const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
|
|
403
|
-
const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
|
|
404
|
-
const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
|
|
405
|
-
contentWrapper.style.height = height + 'px';
|
|
406
|
-
} else {
|
|
407
|
-
const isFirstItem = selectedItem === items[0].ref.current;
|
|
408
|
-
contentWrapper.style.top = "0px";
|
|
409
|
-
const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight);
|
|
410
|
-
const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
|
|
411
|
-
contentWrapper.style.height = height + 'px';
|
|
412
|
-
viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
|
|
413
|
-
}
|
|
414
|
-
contentWrapper.style.margin = `${$cc7e05a45900e73f$var$CONTENT_MARGIN}px 0`;
|
|
415
|
-
contentWrapper.style.minHeight = minContentHeight + 'px';
|
|
416
|
-
contentWrapper.style.maxHeight = availableHeight + 'px'; // -----------------------------------------------------------------------------------------
|
|
417
|
-
setIsPositioned(true); // we don't want the initial scroll position adjustment to trigger "expand on scroll"
|
|
418
|
-
// so we explicitly turn it on only after they've registered.
|
|
419
|
-
requestAnimationFrame(()=>shouldExpandOnScrollRef.current = true
|
|
420
|
-
);
|
|
421
|
-
}
|
|
422
|
-
}, [
|
|
423
|
-
getItems,
|
|
424
|
-
context.trigger,
|
|
425
|
-
context.valueNode,
|
|
426
|
-
contentWrapper,
|
|
427
|
-
content,
|
|
428
|
-
viewport,
|
|
429
|
-
selectedItem,
|
|
430
|
-
selectedItemText,
|
|
431
|
-
context.dir
|
|
432
|
-
]);
|
|
433
|
-
$01b9c$useLayoutEffect(()=>position()
|
|
434
|
-
, [
|
|
435
|
-
position
|
|
436
|
-
]);
|
|
437
352
|
const focusSelectedItem = $01b9c$useCallback(()=>focusFirst([
|
|
438
353
|
selectedItem,
|
|
439
354
|
content
|
|
@@ -449,19 +364,6 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
449
364
|
}, [
|
|
450
365
|
isPositioned,
|
|
451
366
|
focusSelectedItem
|
|
452
|
-
]); // When the viewport becomes scrollable at the top, the scroll up button will mount.
|
|
453
|
-
// Because it is part of the normal flow, it will push down the viewport, thus throwing our
|
|
454
|
-
// trigger => selectedItem alignment off by the amount the viewport was pushed down.
|
|
455
|
-
// We wait for this to happen and then re-run the positining logic one more time to account for it.
|
|
456
|
-
const handleScrollButtonChange = $01b9c$useCallback((node)=>{
|
|
457
|
-
if (node && shouldRepositionRef.current === true) {
|
|
458
|
-
position();
|
|
459
|
-
focusSelectedItem();
|
|
460
|
-
shouldRepositionRef.current = false;
|
|
461
|
-
}
|
|
462
|
-
}, [
|
|
463
|
-
position,
|
|
464
|
-
focusSelectedItem
|
|
465
367
|
]); // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
|
|
466
368
|
// and close on `pointerup` outside.
|
|
467
369
|
const { onOpenChange: onOpenChange , triggerPointerDownPosRef: triggerPointerDownPosRef } = context;
|
|
@@ -550,9 +452,21 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
550
452
|
}, [
|
|
551
453
|
context.value
|
|
552
454
|
]);
|
|
455
|
+
const SelectPosition = position === 'popper' ? $cc7e05a45900e73f$var$SelectPopperPosition : $cc7e05a45900e73f$var$SelectItemAlignedPosition; // Silently ignore props that are not supported by `SelectItemAlignedPosition`
|
|
456
|
+
const popperContentProps = SelectPosition === $cc7e05a45900e73f$var$SelectPopperPosition ? {
|
|
457
|
+
side: side,
|
|
458
|
+
sideOffset: sideOffset,
|
|
459
|
+
align: align,
|
|
460
|
+
alignOffset: alignOffset,
|
|
461
|
+
arrowPadding: arrowPadding,
|
|
462
|
+
collisionBoundary: collisionBoundary,
|
|
463
|
+
collisionPadding: collisionPadding,
|
|
464
|
+
sticky: sticky,
|
|
465
|
+
hideWhenDetached: hideWhenDetached,
|
|
466
|
+
avoidCollisions: avoidCollisions
|
|
467
|
+
} : {};
|
|
553
468
|
return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentProvider, {
|
|
554
469
|
scope: __scopeSelect,
|
|
555
|
-
contentWrapper: contentWrapper,
|
|
556
470
|
content: content,
|
|
557
471
|
viewport: viewport,
|
|
558
472
|
onViewportChange: setViewport,
|
|
@@ -560,22 +474,14 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
560
474
|
selectedItem: selectedItem,
|
|
561
475
|
onItemLeave: handleItemLeave,
|
|
562
476
|
itemTextRefCallback: itemTextRefCallback,
|
|
477
|
+
focusSelectedItem: focusSelectedItem,
|
|
563
478
|
selectedItemText: selectedItemText,
|
|
564
|
-
|
|
479
|
+
position: position,
|
|
565
480
|
isPositioned: isPositioned,
|
|
566
|
-
shouldExpandOnScrollRef: shouldExpandOnScrollRef,
|
|
567
481
|
searchRef: searchRef
|
|
568
482
|
}, /*#__PURE__*/ $01b9c$createElement($01b9c$RemoveScroll, {
|
|
569
483
|
as: $01b9c$Slot,
|
|
570
484
|
allowPinchZoom: true
|
|
571
|
-
}, /*#__PURE__*/ $01b9c$createElement("div", {
|
|
572
|
-
ref: setContentWrapper,
|
|
573
|
-
style: {
|
|
574
|
-
display: 'flex',
|
|
575
|
-
flexDirection: 'column',
|
|
576
|
-
position: 'fixed',
|
|
577
|
-
zIndex: contentZIndex
|
|
578
|
-
}
|
|
579
485
|
}, /*#__PURE__*/ $01b9c$createElement($01b9c$FocusScope, {
|
|
580
486
|
asChild: true // we make sure we're not trapping once it's been closed
|
|
581
487
|
,
|
|
@@ -591,30 +497,33 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
591
497
|
});
|
|
592
498
|
event.preventDefault();
|
|
593
499
|
})
|
|
594
|
-
}, /*#__PURE__*/ $01b9c$createElement($01b9c$DismissableLayer,
|
|
500
|
+
}, /*#__PURE__*/ $01b9c$createElement($01b9c$DismissableLayer, {
|
|
501
|
+
asChild: true,
|
|
502
|
+
disableOutsidePointerEvents: true,
|
|
503
|
+
onEscapeKeyDown: onEscapeKeyDown,
|
|
504
|
+
onPointerDownOutside: onPointerDownOutside // When focus is trapped, a focusout event may still happen.
|
|
505
|
+
,
|
|
506
|
+
onFocusOutside: (event)=>event.preventDefault()
|
|
507
|
+
,
|
|
508
|
+
onDismiss: ()=>context.onOpenChange(false)
|
|
509
|
+
}, /*#__PURE__*/ $01b9c$createElement(SelectPosition, $01b9c$babelruntimehelpersesmextends({
|
|
595
510
|
role: "listbox",
|
|
596
511
|
id: context.contentId,
|
|
597
512
|
"data-state": context.open ? 'open' : 'closed',
|
|
598
513
|
dir: context.dir,
|
|
599
514
|
onContextMenu: (event)=>event.preventDefault()
|
|
600
|
-
}, contentProps, {
|
|
515
|
+
}, contentProps, popperContentProps, {
|
|
516
|
+
onPlaced: ()=>setIsPositioned(true)
|
|
517
|
+
,
|
|
601
518
|
ref: composedRefs,
|
|
602
519
|
style: {
|
|
520
|
+
// flex layout so we can place the scroll buttons properly
|
|
603
521
|
display: 'flex',
|
|
604
522
|
flexDirection: 'column',
|
|
605
|
-
//
|
|
606
|
-
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
607
|
-
boxSizing: 'border-box',
|
|
608
|
-
maxHeight: '100%',
|
|
523
|
+
// reset the outline by default as the content MAY get focused
|
|
609
524
|
outline: 'none',
|
|
610
525
|
...contentProps.style
|
|
611
526
|
},
|
|
612
|
-
disableOutsidePointerEvents: true // When focus is trapped, a focusout event may still happen.
|
|
613
|
-
,
|
|
614
|
-
onFocusOutside: (event)=>event.preventDefault()
|
|
615
|
-
,
|
|
616
|
-
onDismiss: ()=>context.onOpenChange(false)
|
|
617
|
-
,
|
|
618
527
|
onKeyDown: $01b9c$composeEventHandlers(contentProps.onKeyDown, (event)=>{
|
|
619
528
|
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; // select should not be navigated using tab key so we prevent it
|
|
620
529
|
if (event.key === 'Tab') event.preventDefault();
|
|
@@ -651,12 +560,200 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
|
|
|
651
560
|
})
|
|
652
561
|
}))))));
|
|
653
562
|
});
|
|
563
|
+
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$var$SelectContentImpl, {
|
|
564
|
+
displayName: $cc7e05a45900e73f$var$CONTENT_IMPL_NAME
|
|
565
|
+
});
|
|
566
|
+
/* -------------------------------------------------------------------------------------------------
|
|
567
|
+
* SelectItemAlignedPosition
|
|
568
|
+
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_ALIGNED_POSITION_NAME = 'SelectItemAlignedPosition';
|
|
569
|
+
const $cc7e05a45900e73f$var$SelectItemAlignedPosition = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
570
|
+
const { __scopeSelect: __scopeSelect , onPlaced: onPlaced , ...popperProps } = props;
|
|
571
|
+
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
|
|
572
|
+
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
|
|
573
|
+
const [contentWrapper, setContentWrapper] = $01b9c$useState(null);
|
|
574
|
+
const [content, setContent] = $01b9c$useState(null);
|
|
575
|
+
const composedRefs = $01b9c$useComposedRefs(forwardedRef, (node)=>setContent(node)
|
|
576
|
+
);
|
|
577
|
+
const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
|
|
578
|
+
const shouldExpandOnScrollRef = $01b9c$useRef(false);
|
|
579
|
+
const shouldRepositionRef = $01b9c$useRef(true);
|
|
580
|
+
const { viewport: viewport , selectedItem: selectedItem , selectedItemText: selectedItemText , focusSelectedItem: focusSelectedItem } = contentContext;
|
|
581
|
+
const position = $01b9c$useCallback(()=>{
|
|
582
|
+
if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
|
|
583
|
+
const triggerRect = context.trigger.getBoundingClientRect(); // -----------------------------------------------------------------------------------------
|
|
584
|
+
// Horizontal positioning
|
|
585
|
+
// -----------------------------------------------------------------------------------------
|
|
586
|
+
const contentRect = content.getBoundingClientRect();
|
|
587
|
+
const valueNodeRect = context.valueNode.getBoundingClientRect();
|
|
588
|
+
const itemTextRect = selectedItemText.getBoundingClientRect();
|
|
589
|
+
if (context.dir !== 'rtl') {
|
|
590
|
+
const itemTextOffset = itemTextRect.left - contentRect.left;
|
|
591
|
+
const left = valueNodeRect.left - itemTextOffset;
|
|
592
|
+
const leftDelta = triggerRect.left - left;
|
|
593
|
+
const minContentWidth = triggerRect.width + leftDelta;
|
|
594
|
+
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
595
|
+
const rightEdge = window.innerWidth - $cc7e05a45900e73f$var$CONTENT_MARGIN;
|
|
596
|
+
const clampedLeft = $01b9c$clamp(left, [
|
|
597
|
+
$cc7e05a45900e73f$var$CONTENT_MARGIN,
|
|
598
|
+
rightEdge - contentWidth
|
|
599
|
+
]);
|
|
600
|
+
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
601
|
+
contentWrapper.style.left = clampedLeft + 'px';
|
|
602
|
+
} else {
|
|
603
|
+
const itemTextOffset = contentRect.right - itemTextRect.right;
|
|
604
|
+
const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
|
|
605
|
+
const rightDelta = window.innerWidth - triggerRect.right - right;
|
|
606
|
+
const minContentWidth = triggerRect.width + rightDelta;
|
|
607
|
+
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
608
|
+
const leftEdge = window.innerWidth - $cc7e05a45900e73f$var$CONTENT_MARGIN;
|
|
609
|
+
const clampedRight = $01b9c$clamp(right, [
|
|
610
|
+
$cc7e05a45900e73f$var$CONTENT_MARGIN,
|
|
611
|
+
leftEdge - contentWidth
|
|
612
|
+
]);
|
|
613
|
+
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
614
|
+
contentWrapper.style.right = clampedRight + 'px';
|
|
615
|
+
} // -----------------------------------------------------------------------------------------
|
|
616
|
+
// Vertical positioning
|
|
617
|
+
// -----------------------------------------------------------------------------------------
|
|
618
|
+
const items = getItems();
|
|
619
|
+
const availableHeight = window.innerHeight - $cc7e05a45900e73f$var$CONTENT_MARGIN * 2;
|
|
620
|
+
const itemsHeight = viewport.scrollHeight;
|
|
621
|
+
const contentStyles = window.getComputedStyle(content);
|
|
622
|
+
const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
|
|
623
|
+
const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
|
|
624
|
+
const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
|
|
625
|
+
const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
|
|
626
|
+
const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore
|
|
627
|
+
const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
|
|
628
|
+
const viewportStyles = window.getComputedStyle(viewport);
|
|
629
|
+
const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
|
|
630
|
+
const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
|
|
631
|
+
const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - $cc7e05a45900e73f$var$CONTENT_MARGIN;
|
|
632
|
+
const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
|
|
633
|
+
const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
|
|
634
|
+
const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
|
|
635
|
+
const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
|
|
636
|
+
const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
|
|
637
|
+
const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
|
|
638
|
+
if (willAlignWithoutTopOverflow) {
|
|
639
|
+
const isLastItem = selectedItem === items[items.length - 1].ref.current;
|
|
640
|
+
contentWrapper.style.bottom = "0px";
|
|
641
|
+
const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
|
|
642
|
+
const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
|
|
643
|
+
const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
|
|
644
|
+
contentWrapper.style.height = height + 'px';
|
|
645
|
+
} else {
|
|
646
|
+
const isFirstItem = selectedItem === items[0].ref.current;
|
|
647
|
+
contentWrapper.style.top = "0px";
|
|
648
|
+
const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight);
|
|
649
|
+
const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
|
|
650
|
+
contentWrapper.style.height = height + 'px';
|
|
651
|
+
viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
|
|
652
|
+
}
|
|
653
|
+
contentWrapper.style.margin = `${$cc7e05a45900e73f$var$CONTENT_MARGIN}px 0`;
|
|
654
|
+
contentWrapper.style.minHeight = minContentHeight + 'px';
|
|
655
|
+
contentWrapper.style.maxHeight = availableHeight + 'px'; // -----------------------------------------------------------------------------------------
|
|
656
|
+
onPlaced === null || onPlaced === void 0 || onPlaced(); // we don't want the initial scroll position adjustment to trigger "expand on scroll"
|
|
657
|
+
// so we explicitly turn it on only after they've registered.
|
|
658
|
+
requestAnimationFrame(()=>shouldExpandOnScrollRef.current = true
|
|
659
|
+
);
|
|
660
|
+
}
|
|
661
|
+
}, [
|
|
662
|
+
getItems,
|
|
663
|
+
context.trigger,
|
|
664
|
+
context.valueNode,
|
|
665
|
+
contentWrapper,
|
|
666
|
+
content,
|
|
667
|
+
viewport,
|
|
668
|
+
selectedItem,
|
|
669
|
+
selectedItemText,
|
|
670
|
+
context.dir,
|
|
671
|
+
onPlaced
|
|
672
|
+
]);
|
|
673
|
+
$01b9c$useLayoutEffect(()=>position()
|
|
674
|
+
, [
|
|
675
|
+
position
|
|
676
|
+
]); // copy z-index from content to wrapper
|
|
677
|
+
const [contentZIndex, setContentZIndex] = $01b9c$useState();
|
|
678
|
+
$01b9c$useLayoutEffect(()=>{
|
|
679
|
+
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
680
|
+
}, [
|
|
681
|
+
content
|
|
682
|
+
]); // When the viewport becomes scrollable at the top, the scroll up button will mount.
|
|
683
|
+
// Because it is part of the normal flow, it will push down the viewport, thus throwing our
|
|
684
|
+
// trigger => selectedItem alignment off by the amount the viewport was pushed down.
|
|
685
|
+
// We wait for this to happen and then re-run the positining logic one more time to account for it.
|
|
686
|
+
const handleScrollButtonChange = $01b9c$useCallback((node)=>{
|
|
687
|
+
if (node && shouldRepositionRef.current === true) {
|
|
688
|
+
position();
|
|
689
|
+
focusSelectedItem === null || focusSelectedItem === void 0 || focusSelectedItem();
|
|
690
|
+
shouldRepositionRef.current = false;
|
|
691
|
+
}
|
|
692
|
+
}, [
|
|
693
|
+
position,
|
|
694
|
+
focusSelectedItem
|
|
695
|
+
]);
|
|
696
|
+
return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectViewportProvider, {
|
|
697
|
+
scope: __scopeSelect,
|
|
698
|
+
contentWrapper: contentWrapper,
|
|
699
|
+
shouldExpandOnScrollRef: shouldExpandOnScrollRef,
|
|
700
|
+
onScrollButtonChange: handleScrollButtonChange
|
|
701
|
+
}, /*#__PURE__*/ $01b9c$createElement("div", {
|
|
702
|
+
ref: setContentWrapper,
|
|
703
|
+
style: {
|
|
704
|
+
display: 'flex',
|
|
705
|
+
flexDirection: 'column',
|
|
706
|
+
position: 'fixed',
|
|
707
|
+
zIndex: contentZIndex
|
|
708
|
+
}
|
|
709
|
+
}, /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.div, $01b9c$babelruntimehelpersesmextends({}, popperProps, {
|
|
710
|
+
ref: composedRefs,
|
|
711
|
+
style: {
|
|
712
|
+
// When we get the height of the content, it includes borders. If we were to set
|
|
713
|
+
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
714
|
+
boxSizing: 'border-box',
|
|
715
|
+
// We need to ensure the content doesn't get taller than the wrapper
|
|
716
|
+
maxHeight: '100%',
|
|
717
|
+
...popperProps.style
|
|
718
|
+
}
|
|
719
|
+
}))));
|
|
720
|
+
});
|
|
721
|
+
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$var$SelectItemAlignedPosition, {
|
|
722
|
+
displayName: $cc7e05a45900e73f$var$ITEM_ALIGNED_POSITION_NAME
|
|
723
|
+
});
|
|
724
|
+
/* -------------------------------------------------------------------------------------------------
|
|
725
|
+
* SelectPopperPosition
|
|
726
|
+
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$POPPER_POSITION_NAME = 'SelectPopperPosition';
|
|
727
|
+
const $cc7e05a45900e73f$var$SelectPopperPosition = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
728
|
+
const { __scopeSelect: __scopeSelect , align: align = 'start' , collisionPadding: collisionPadding = $cc7e05a45900e73f$var$CONTENT_MARGIN , ...popperProps } = props;
|
|
729
|
+
const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
|
|
730
|
+
return /*#__PURE__*/ $01b9c$createElement($01b9c$Content, $01b9c$babelruntimehelpersesmextends({}, popperScope, popperProps, {
|
|
731
|
+
ref: forwardedRef,
|
|
732
|
+
align: align,
|
|
733
|
+
collisionPadding: collisionPadding,
|
|
734
|
+
style: {
|
|
735
|
+
// Ensure border-box for floating-ui calculations
|
|
736
|
+
boxSizing: 'border-box',
|
|
737
|
+
...popperProps.style,
|
|
738
|
+
'--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',
|
|
739
|
+
'--radix-select-content-available-width': 'var(--radix-popper-available-width)',
|
|
740
|
+
'--radix-select-content-available-height': 'var(--radix-popper-available-height)',
|
|
741
|
+
'--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',
|
|
742
|
+
'--radix-select-trigger-height': 'var(--radix-popper-anchor-height)'
|
|
743
|
+
}
|
|
744
|
+
}));
|
|
745
|
+
});
|
|
746
|
+
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$var$SelectPopperPosition, {
|
|
747
|
+
displayName: $cc7e05a45900e73f$var$POPPER_POSITION_NAME
|
|
748
|
+
});
|
|
654
749
|
/* -------------------------------------------------------------------------------------------------
|
|
655
750
|
* SelectViewport
|
|
656
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$
|
|
751
|
+
* -----------------------------------------------------------------------------------------------*/ const [$cc7e05a45900e73f$var$SelectViewportProvider, $cc7e05a45900e73f$var$useSelectViewportContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, {});
|
|
752
|
+
const $cc7e05a45900e73f$var$VIEWPORT_NAME = 'SelectViewport';
|
|
657
753
|
const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
658
754
|
const { __scopeSelect: __scopeSelect , ...viewportProps } = props;
|
|
659
755
|
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
|
|
756
|
+
const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
|
|
660
757
|
const composedRefs = $01b9c$useComposedRefs(forwardedRef, contentContext.onViewportChange);
|
|
661
758
|
const prevScrollTopRef = $01b9c$useRef(0);
|
|
662
759
|
return /*#__PURE__*/ $01b9c$createElement($01b9c$Fragment, null, /*#__PURE__*/ $01b9c$createElement("style", {
|
|
@@ -681,7 +778,7 @@ const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ $01b9c$forwardRe
|
|
|
681
778
|
},
|
|
682
779
|
onScroll: $01b9c$composeEventHandlers(viewportProps.onScroll, (event)=>{
|
|
683
780
|
const viewport = event.currentTarget;
|
|
684
|
-
const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef } =
|
|
781
|
+
const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef } = viewportContext;
|
|
685
782
|
if (shouldExpandOnScrollRef !== null && shouldExpandOnScrollRef !== void 0 && shouldExpandOnScrollRef.current && contentWrapper) {
|
|
686
783
|
const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
|
|
687
784
|
if (scrolledBy > 0) {
|
|
@@ -893,8 +990,9 @@ const $cc7e05a45900e73f$export$6b9198de19accfe6 = /*#__PURE__*/ $01b9c$forwardRe
|
|
|
893
990
|
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';
|
|
894
991
|
const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
895
992
|
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
993
|
+
const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
896
994
|
const [canScrollUp1, setCanScrollUp] = $01b9c$useState(false);
|
|
897
|
-
const composedRefs = $01b9c$useComposedRefs(forwardedRef,
|
|
995
|
+
const composedRefs = $01b9c$useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
898
996
|
$01b9c$useLayoutEffect(()=>{
|
|
899
997
|
if (contentContext.viewport && contentContext.isPositioned) {
|
|
900
998
|
const viewport = contentContext.viewport;
|
|
@@ -927,8 +1025,9 @@ const $cc7e05a45900e73f$export$d8117927658af6d7 = /*#__PURE__*/ $01b9c$forwardRe
|
|
|
927
1025
|
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';
|
|
928
1026
|
const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
929
1027
|
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
1028
|
+
const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
930
1029
|
const [canScrollDown1, setCanScrollDown] = $01b9c$useState(false);
|
|
931
|
-
const composedRefs = $01b9c$useComposedRefs(forwardedRef,
|
|
1030
|
+
const composedRefs = $01b9c$useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
932
1031
|
$01b9c$useLayoutEffect(()=>{
|
|
933
1032
|
if (contentContext.viewport && contentContext.isPositioned) {
|
|
934
1033
|
const viewport = contentContext.viewport;
|
|
@@ -1020,6 +1119,21 @@ const $cc7e05a45900e73f$export$eba4b1df07cb1d3 = /*#__PURE__*/ $01b9c$forwardRef
|
|
|
1020
1119
|
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$eba4b1df07cb1d3, {
|
|
1021
1120
|
displayName: $cc7e05a45900e73f$var$SEPARATOR_NAME
|
|
1022
1121
|
});
|
|
1122
|
+
/* -------------------------------------------------------------------------------------------------
|
|
1123
|
+
* SelectArrow
|
|
1124
|
+
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ARROW_NAME = 'SelectArrow';
|
|
1125
|
+
const $cc7e05a45900e73f$export$314f4cb8f8099628 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
1126
|
+
const { __scopeSelect: __scopeSelect , ...arrowProps } = props;
|
|
1127
|
+
const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
|
|
1128
|
+
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ARROW_NAME, __scopeSelect);
|
|
1129
|
+
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ARROW_NAME, __scopeSelect);
|
|
1130
|
+
return context.open && contentContext.position === 'popper' ? /*#__PURE__*/ $01b9c$createElement($01b9c$Arrow, $01b9c$babelruntimehelpersesmextends({}, popperScope, arrowProps, {
|
|
1131
|
+
ref: forwardedRef
|
|
1132
|
+
})) : null;
|
|
1133
|
+
});
|
|
1134
|
+
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$314f4cb8f8099628, {
|
|
1135
|
+
displayName: $cc7e05a45900e73f$var$ARROW_NAME
|
|
1136
|
+
});
|
|
1023
1137
|
/* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$BubbleSelect = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
1024
1138
|
const { value: value , ...selectProps } = props;
|
|
1025
1139
|
const ref = $01b9c$useRef(null);
|
|
@@ -1141,9 +1255,10 @@ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b919
|
|
|
1141
1255
|
const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
|
|
1142
1256
|
const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
|
|
1143
1257
|
const $cc7e05a45900e73f$export$1ff3c3f08ae963c0 = $cc7e05a45900e73f$export$eba4b1df07cb1d3;
|
|
1258
|
+
const $cc7e05a45900e73f$export$21b07c8f274aebd5 = $cc7e05a45900e73f$export$314f4cb8f8099628;
|
|
1144
1259
|
|
|
1145
1260
|
|
|
1146
1261
|
|
|
1147
1262
|
|
|
1148
|
-
export {$cc7e05a45900e73f$export$286727a75dc039bd as createSelectScope, $cc7e05a45900e73f$export$ef9b1a59e592288f as Select, $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 as SelectTrigger, $cc7e05a45900e73f$export$e288731fd71264f0 as SelectValue, $cc7e05a45900e73f$export$99b400cabb58c515 as SelectIcon, $cc7e05a45900e73f$export$b2af6c9944296213 as SelectPortal, $cc7e05a45900e73f$export$c973a4b3cb86a03d as SelectContent, $cc7e05a45900e73f$export$9ed6e7b40248d36d as SelectViewport, $cc7e05a45900e73f$export$ee25a334c55de1f4 as SelectGroup, $cc7e05a45900e73f$export$f67338d29bd972f8 as SelectLabel, $cc7e05a45900e73f$export$13ef48a934230896 as SelectItem, $cc7e05a45900e73f$export$3572fb0fb821ff49 as SelectItemText, $cc7e05a45900e73f$export$6b9198de19accfe6 as SelectItemIndicator, $cc7e05a45900e73f$export$d8117927658af6d7 as SelectScrollUpButton, $cc7e05a45900e73f$export$ff951e476c12189 as SelectScrollDownButton, $cc7e05a45900e73f$export$eba4b1df07cb1d3 as SelectSeparator, $cc7e05a45900e73f$export$be92b6f5f03c0fe9 as Root, $cc7e05a45900e73f$export$41fb9f06171c75f4 as Trigger, $cc7e05a45900e73f$export$4c8d1a57a761ef94 as Value, $cc7e05a45900e73f$export$f04a61298a47a40f as Icon, $cc7e05a45900e73f$export$602eac185826482c as Portal, $cc7e05a45900e73f$export$7c6e2c02157bb7d2 as Content, $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 as Viewport, $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 as Group, $cc7e05a45900e73f$export$b04be29aa201d4f5 as Label, $cc7e05a45900e73f$export$6d08773d2e66f8f2 as Item, $cc7e05a45900e73f$export$d6e5bf9c43ea9319 as ItemText, $cc7e05a45900e73f$export$c3468e2714d175fa as ItemIndicator, $cc7e05a45900e73f$export$2f60d3ec9ad468f2 as ScrollUpButton, $cc7e05a45900e73f$export$bf1aedc3039c8d63 as ScrollDownButton, $cc7e05a45900e73f$export$1ff3c3f08ae963c0 as Separator};
|
|
1263
|
+
export {$cc7e05a45900e73f$export$286727a75dc039bd as createSelectScope, $cc7e05a45900e73f$export$ef9b1a59e592288f as Select, $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 as SelectTrigger, $cc7e05a45900e73f$export$e288731fd71264f0 as SelectValue, $cc7e05a45900e73f$export$99b400cabb58c515 as SelectIcon, $cc7e05a45900e73f$export$b2af6c9944296213 as SelectPortal, $cc7e05a45900e73f$export$c973a4b3cb86a03d as SelectContent, $cc7e05a45900e73f$export$9ed6e7b40248d36d as SelectViewport, $cc7e05a45900e73f$export$ee25a334c55de1f4 as SelectGroup, $cc7e05a45900e73f$export$f67338d29bd972f8 as SelectLabel, $cc7e05a45900e73f$export$13ef48a934230896 as SelectItem, $cc7e05a45900e73f$export$3572fb0fb821ff49 as SelectItemText, $cc7e05a45900e73f$export$6b9198de19accfe6 as SelectItemIndicator, $cc7e05a45900e73f$export$d8117927658af6d7 as SelectScrollUpButton, $cc7e05a45900e73f$export$ff951e476c12189 as SelectScrollDownButton, $cc7e05a45900e73f$export$eba4b1df07cb1d3 as SelectSeparator, $cc7e05a45900e73f$export$314f4cb8f8099628 as SelectArrow, $cc7e05a45900e73f$export$be92b6f5f03c0fe9 as Root, $cc7e05a45900e73f$export$41fb9f06171c75f4 as Trigger, $cc7e05a45900e73f$export$4c8d1a57a761ef94 as Value, $cc7e05a45900e73f$export$f04a61298a47a40f as Icon, $cc7e05a45900e73f$export$602eac185826482c as Portal, $cc7e05a45900e73f$export$7c6e2c02157bb7d2 as Content, $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 as Viewport, $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 as Group, $cc7e05a45900e73f$export$b04be29aa201d4f5 as Label, $cc7e05a45900e73f$export$6d08773d2e66f8f2 as Item, $cc7e05a45900e73f$export$d6e5bf9c43ea9319 as ItemText, $cc7e05a45900e73f$export$c3468e2714d175fa as ItemIndicator, $cc7e05a45900e73f$export$2f60d3ec9ad468f2 as ScrollUpButton, $cc7e05a45900e73f$export$bf1aedc3039c8d63 as ScrollDownButton, $cc7e05a45900e73f$export$1ff3c3f08ae963c0 as Separator, $cc7e05a45900e73f$export$21b07c8f274aebd5 as Arrow};
|
|
1149
1264
|
//# sourceMappingURL=index.module.js.map
|