@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.js
CHANGED
|
@@ -11,6 +11,7 @@ var $cg2C9$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-l
|
|
|
11
11
|
var $cg2C9$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
|
|
12
12
|
var $cg2C9$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
|
|
13
13
|
var $cg2C9$radixuireactid = require("@radix-ui/react-id");
|
|
14
|
+
var $cg2C9$radixuireactpopper = require("@radix-ui/react-popper");
|
|
14
15
|
var $cg2C9$radixuireactportal = require("@radix-ui/react-portal");
|
|
15
16
|
var $cg2C9$radixuireactprimitive = require("@radix-ui/react-primitive");
|
|
16
17
|
var $cg2C9$radixuireactslot = require("@radix-ui/react-slot");
|
|
@@ -45,6 +46,7 @@ $parcel$export(module.exports, "SelectItemIndicator", () => $1345bda09ffc1bc6$ex
|
|
|
45
46
|
$parcel$export(module.exports, "SelectScrollUpButton", () => $1345bda09ffc1bc6$export$d8117927658af6d7);
|
|
46
47
|
$parcel$export(module.exports, "SelectScrollDownButton", () => $1345bda09ffc1bc6$export$ff951e476c12189);
|
|
47
48
|
$parcel$export(module.exports, "SelectSeparator", () => $1345bda09ffc1bc6$export$eba4b1df07cb1d3);
|
|
49
|
+
$parcel$export(module.exports, "SelectArrow", () => $1345bda09ffc1bc6$export$314f4cb8f8099628);
|
|
48
50
|
$parcel$export(module.exports, "Root", () => $1345bda09ffc1bc6$export$be92b6f5f03c0fe9);
|
|
49
51
|
$parcel$export(module.exports, "Trigger", () => $1345bda09ffc1bc6$export$41fb9f06171c75f4);
|
|
50
52
|
$parcel$export(module.exports, "Value", () => $1345bda09ffc1bc6$export$4c8d1a57a761ef94);
|
|
@@ -60,6 +62,9 @@ $parcel$export(module.exports, "ItemIndicator", () => $1345bda09ffc1bc6$export$c
|
|
|
60
62
|
$parcel$export(module.exports, "ScrollUpButton", () => $1345bda09ffc1bc6$export$2f60d3ec9ad468f2);
|
|
61
63
|
$parcel$export(module.exports, "ScrollDownButton", () => $1345bda09ffc1bc6$export$bf1aedc3039c8d63);
|
|
62
64
|
$parcel$export(module.exports, "Separator", () => $1345bda09ffc1bc6$export$1ff3c3f08ae963c0);
|
|
65
|
+
$parcel$export(module.exports, "Arrow", () => $1345bda09ffc1bc6$export$21b07c8f274aebd5);
|
|
66
|
+
|
|
67
|
+
|
|
63
68
|
|
|
64
69
|
|
|
65
70
|
|
|
@@ -98,12 +103,15 @@ const $1345bda09ffc1bc6$var$SELECTION_KEYS = [
|
|
|
98
103
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$SELECT_NAME = 'Select';
|
|
99
104
|
const [$1345bda09ffc1bc6$var$Collection, $1345bda09ffc1bc6$var$useCollection, $1345bda09ffc1bc6$var$createCollectionScope] = $cg2C9$radixuireactcollection.createCollection($1345bda09ffc1bc6$var$SELECT_NAME);
|
|
100
105
|
const [$1345bda09ffc1bc6$var$createSelectContext, $1345bda09ffc1bc6$export$286727a75dc039bd] = $cg2C9$radixuireactcontext.createContextScope($1345bda09ffc1bc6$var$SELECT_NAME, [
|
|
101
|
-
$1345bda09ffc1bc6$var$createCollectionScope
|
|
106
|
+
$1345bda09ffc1bc6$var$createCollectionScope,
|
|
107
|
+
$cg2C9$radixuireactpopper.createPopperScope
|
|
102
108
|
]);
|
|
109
|
+
const $1345bda09ffc1bc6$var$usePopperScope = $cg2C9$radixuireactpopper.createPopperScope();
|
|
103
110
|
const [$1345bda09ffc1bc6$var$SelectProvider, $1345bda09ffc1bc6$var$useSelectContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$SELECT_NAME);
|
|
104
111
|
const [$1345bda09ffc1bc6$var$SelectNativeOptionsProvider, $1345bda09ffc1bc6$var$useSelectNativeOptionsContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$SELECT_NAME);
|
|
105
112
|
const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
106
113
|
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;
|
|
114
|
+
const popperScope = $1345bda09ffc1bc6$var$usePopperScope(__scopeSelect);
|
|
107
115
|
const [trigger, setTrigger] = $cg2C9$react.useState(null);
|
|
108
116
|
const [valueNode, setValueNode] = $cg2C9$react.useState(null);
|
|
109
117
|
const [valueNodeHasChildren, setValueNodeHasChildren] = $cg2C9$react.useState(false);
|
|
@@ -127,7 +135,7 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
|
127
135
|
// each time the options change.
|
|
128
136
|
const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value
|
|
129
137
|
).join(';');
|
|
130
|
-
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectProvider, {
|
|
138
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectProvider, {
|
|
131
139
|
required: required,
|
|
132
140
|
scope: __scopeSelect,
|
|
133
141
|
trigger: trigger,
|
|
@@ -173,7 +181,7 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
|
173
181
|
disabled: disabled
|
|
174
182
|
}, value === undefined ? /*#__PURE__*/ $cg2C9$react.createElement("option", {
|
|
175
183
|
value: ""
|
|
176
|
-
}) : null, Array.from(nativeOptionsSet)) : null);
|
|
184
|
+
}) : null, Array.from(nativeOptionsSet)) : null));
|
|
177
185
|
};
|
|
178
186
|
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$ef9b1a59e592288f, {
|
|
179
187
|
displayName: $1345bda09ffc1bc6$var$SELECT_NAME
|
|
@@ -183,6 +191,7 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
|
|
|
183
191
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$TRIGGER_NAME = 'SelectTrigger';
|
|
184
192
|
const $1345bda09ffc1bc6$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
185
193
|
const { __scopeSelect: __scopeSelect , disabled: disabled = false , ...triggerProps } = props;
|
|
194
|
+
const popperScope = $1345bda09ffc1bc6$var$usePopperScope(__scopeSelect);
|
|
186
195
|
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$TRIGGER_NAME, __scopeSelect);
|
|
187
196
|
const isDisabled = context.disabled || disabled;
|
|
188
197
|
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.onTriggerChange);
|
|
@@ -201,7 +210,9 @@ const $1345bda09ffc1bc6$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $cg2C9$react.forw
|
|
|
201
210
|
resetTypeahead();
|
|
202
211
|
}
|
|
203
212
|
};
|
|
204
|
-
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$
|
|
213
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactpopper.Anchor, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
214
|
+
asChild: true
|
|
215
|
+
}, popperScope), /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
205
216
|
type: "button",
|
|
206
217
|
role: "combobox",
|
|
207
218
|
"aria-controls": context.contentId,
|
|
@@ -250,7 +261,7 @@ const $1345bda09ffc1bc6$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $cg2C9$react.forw
|
|
|
250
261
|
event.preventDefault();
|
|
251
262
|
}
|
|
252
263
|
})
|
|
253
|
-
}));
|
|
264
|
+
})));
|
|
254
265
|
});
|
|
255
266
|
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$3ac1e88a1c0b9f1, {
|
|
256
267
|
displayName: $1345bda09ffc1bc6$var$TRIGGER_NAME
|
|
@@ -316,23 +327,32 @@ const $1345bda09ffc1bc6$export$c973a4b3cb86a03d = /*#__PURE__*/ $cg2C9$react.for
|
|
|
316
327
|
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
317
328
|
setFragment(new DocumentFragment());
|
|
318
329
|
}, []);
|
|
319
|
-
|
|
330
|
+
if (!context.open) {
|
|
331
|
+
const frag = fragment;
|
|
332
|
+
return frag ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(/*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentProvider, {
|
|
333
|
+
scope: props.__scopeSelect
|
|
334
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$Collection.Slot, {
|
|
335
|
+
scope: props.__scopeSelect
|
|
336
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement("div", null, props.children))), frag) : null;
|
|
337
|
+
}
|
|
338
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentImpl, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, props, {
|
|
320
339
|
ref: forwardedRef
|
|
321
|
-
}))
|
|
322
|
-
scope: props.__scopeSelect
|
|
323
|
-
}, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$Collection.Slot, {
|
|
324
|
-
scope: props.__scopeSelect
|
|
325
|
-
}, /*#__PURE__*/ $cg2C9$react.createElement("div", null, props.children))), fragment) : null);
|
|
340
|
+
}));
|
|
326
341
|
});
|
|
327
342
|
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$c973a4b3cb86a03d, {
|
|
328
343
|
displayName: $1345bda09ffc1bc6$var$CONTENT_NAME
|
|
329
344
|
});
|
|
330
|
-
|
|
345
|
+
/* -------------------------------------------------------------------------------------------------
|
|
346
|
+
* SelectContentImpl
|
|
347
|
+
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$CONTENT_MARGIN = 10;
|
|
331
348
|
const [$1345bda09ffc1bc6$var$SelectContentProvider, $1345bda09ffc1bc6$var$useSelectContentContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME);
|
|
349
|
+
const $1345bda09ffc1bc6$var$CONTENT_IMPL_NAME = 'SelectContentImpl';
|
|
332
350
|
const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
333
|
-
const { __scopeSelect: __scopeSelect , onCloseAutoFocus: onCloseAutoFocus ,
|
|
351
|
+
const { __scopeSelect: __scopeSelect , position: position = 'item-aligned' , onCloseAutoFocus: onCloseAutoFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , side: //
|
|
352
|
+
// PopperContent props
|
|
353
|
+
side , sideOffset: sideOffset , align: align , alignOffset: alignOffset , arrowPadding: arrowPadding , collisionBoundary: collisionBoundary , collisionPadding: collisionPadding , sticky: sticky , hideWhenDetached: hideWhenDetached , avoidCollisions: avoidCollisions , //
|
|
354
|
+
...contentProps } = props;
|
|
334
355
|
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME, __scopeSelect);
|
|
335
|
-
const [contentWrapper, setContentWrapper] = $cg2C9$react.useState(null);
|
|
336
356
|
const [content, setContent] = $cg2C9$react.useState(null);
|
|
337
357
|
const [viewport, setViewport] = $cg2C9$react.useState(null);
|
|
338
358
|
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node)
|
|
@@ -341,8 +361,6 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
341
361
|
const [selectedItemText, setSelectedItemText] = $cg2C9$react.useState(null);
|
|
342
362
|
const getItems = $1345bda09ffc1bc6$var$useCollection(__scopeSelect);
|
|
343
363
|
const [isPositioned, setIsPositioned] = $cg2C9$react.useState(false);
|
|
344
|
-
const shouldRepositionRef = $cg2C9$react.useRef(true);
|
|
345
|
-
const shouldExpandOnScrollRef = $cg2C9$react.useRef(false);
|
|
346
364
|
const firstValidItemFoundRef = $cg2C9$react.useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
|
|
347
365
|
$cg2C9$react.useEffect(()=>{
|
|
348
366
|
if (content) return $cg2C9$ariahidden.hideOthers(content);
|
|
@@ -351,12 +369,6 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
351
369
|
]); // Make sure the whole tree has focus guards as our `Select` may be
|
|
352
370
|
// the last element in the DOM (because of the `Portal`)
|
|
353
371
|
$cg2C9$radixuireactfocusguards.useFocusGuards();
|
|
354
|
-
const [contentZIndex, setContentZIndex] = $cg2C9$react.useState();
|
|
355
|
-
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
356
|
-
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
357
|
-
}, [
|
|
358
|
-
content
|
|
359
|
-
]);
|
|
360
372
|
const focusFirst = $cg2C9$react.useCallback((candidates)=>{
|
|
361
373
|
const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
|
|
362
374
|
);
|
|
@@ -377,101 +389,6 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
377
389
|
getItems,
|
|
378
390
|
viewport
|
|
379
391
|
]);
|
|
380
|
-
const position = $cg2C9$react.useCallback(()=>{
|
|
381
|
-
if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
|
|
382
|
-
const triggerRect = context.trigger.getBoundingClientRect(); // -----------------------------------------------------------------------------------------
|
|
383
|
-
// Horizontal positioning
|
|
384
|
-
// -----------------------------------------------------------------------------------------
|
|
385
|
-
const contentRect = content.getBoundingClientRect();
|
|
386
|
-
const valueNodeRect = context.valueNode.getBoundingClientRect();
|
|
387
|
-
const itemTextRect = selectedItemText.getBoundingClientRect();
|
|
388
|
-
if (context.dir !== 'rtl') {
|
|
389
|
-
const itemTextOffset = itemTextRect.left - contentRect.left;
|
|
390
|
-
const left = valueNodeRect.left - itemTextOffset;
|
|
391
|
-
const leftDelta = triggerRect.left - left;
|
|
392
|
-
const minContentWidth = triggerRect.width + leftDelta;
|
|
393
|
-
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
394
|
-
const rightEdge = window.innerWidth - $1345bda09ffc1bc6$var$CONTENT_MARGIN;
|
|
395
|
-
const clampedLeft = $cg2C9$radixuinumber.clamp(left, [
|
|
396
|
-
$1345bda09ffc1bc6$var$CONTENT_MARGIN,
|
|
397
|
-
rightEdge - contentWidth
|
|
398
|
-
]);
|
|
399
|
-
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
400
|
-
contentWrapper.style.left = clampedLeft + 'px';
|
|
401
|
-
} else {
|
|
402
|
-
const itemTextOffset = contentRect.right - itemTextRect.right;
|
|
403
|
-
const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
|
|
404
|
-
const rightDelta = window.innerWidth - triggerRect.right - right;
|
|
405
|
-
const minContentWidth = triggerRect.width + rightDelta;
|
|
406
|
-
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
407
|
-
const leftEdge = window.innerWidth - $1345bda09ffc1bc6$var$CONTENT_MARGIN;
|
|
408
|
-
const clampedRight = $cg2C9$radixuinumber.clamp(right, [
|
|
409
|
-
$1345bda09ffc1bc6$var$CONTENT_MARGIN,
|
|
410
|
-
leftEdge - contentWidth
|
|
411
|
-
]);
|
|
412
|
-
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
413
|
-
contentWrapper.style.right = clampedRight + 'px';
|
|
414
|
-
} // -----------------------------------------------------------------------------------------
|
|
415
|
-
// Vertical positioning
|
|
416
|
-
// -----------------------------------------------------------------------------------------
|
|
417
|
-
const items = getItems();
|
|
418
|
-
const availableHeight = window.innerHeight - $1345bda09ffc1bc6$var$CONTENT_MARGIN * 2;
|
|
419
|
-
const itemsHeight = viewport.scrollHeight;
|
|
420
|
-
const contentStyles = window.getComputedStyle(content);
|
|
421
|
-
const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
|
|
422
|
-
const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
|
|
423
|
-
const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
|
|
424
|
-
const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
|
|
425
|
-
const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore
|
|
426
|
-
const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
|
|
427
|
-
const viewportStyles = window.getComputedStyle(viewport);
|
|
428
|
-
const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
|
|
429
|
-
const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
|
|
430
|
-
const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - $1345bda09ffc1bc6$var$CONTENT_MARGIN;
|
|
431
|
-
const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
|
|
432
|
-
const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
|
|
433
|
-
const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
|
|
434
|
-
const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
|
|
435
|
-
const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
|
|
436
|
-
const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
|
|
437
|
-
if (willAlignWithoutTopOverflow) {
|
|
438
|
-
const isLastItem = selectedItem === items[items.length - 1].ref.current;
|
|
439
|
-
contentWrapper.style.bottom = "0px";
|
|
440
|
-
const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
|
|
441
|
-
const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
|
|
442
|
-
const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
|
|
443
|
-
contentWrapper.style.height = height + 'px';
|
|
444
|
-
} else {
|
|
445
|
-
const isFirstItem = selectedItem === items[0].ref.current;
|
|
446
|
-
contentWrapper.style.top = "0px";
|
|
447
|
-
const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight);
|
|
448
|
-
const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
|
|
449
|
-
contentWrapper.style.height = height + 'px';
|
|
450
|
-
viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
|
|
451
|
-
}
|
|
452
|
-
contentWrapper.style.margin = `${$1345bda09ffc1bc6$var$CONTENT_MARGIN}px 0`;
|
|
453
|
-
contentWrapper.style.minHeight = minContentHeight + 'px';
|
|
454
|
-
contentWrapper.style.maxHeight = availableHeight + 'px'; // -----------------------------------------------------------------------------------------
|
|
455
|
-
setIsPositioned(true); // we don't want the initial scroll position adjustment to trigger "expand on scroll"
|
|
456
|
-
// so we explicitly turn it on only after they've registered.
|
|
457
|
-
requestAnimationFrame(()=>shouldExpandOnScrollRef.current = true
|
|
458
|
-
);
|
|
459
|
-
}
|
|
460
|
-
}, [
|
|
461
|
-
getItems,
|
|
462
|
-
context.trigger,
|
|
463
|
-
context.valueNode,
|
|
464
|
-
contentWrapper,
|
|
465
|
-
content,
|
|
466
|
-
viewport,
|
|
467
|
-
selectedItem,
|
|
468
|
-
selectedItemText,
|
|
469
|
-
context.dir
|
|
470
|
-
]);
|
|
471
|
-
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>position()
|
|
472
|
-
, [
|
|
473
|
-
position
|
|
474
|
-
]);
|
|
475
392
|
const focusSelectedItem = $cg2C9$react.useCallback(()=>focusFirst([
|
|
476
393
|
selectedItem,
|
|
477
394
|
content
|
|
@@ -487,19 +404,6 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
487
404
|
}, [
|
|
488
405
|
isPositioned,
|
|
489
406
|
focusSelectedItem
|
|
490
|
-
]); // When the viewport becomes scrollable at the top, the scroll up button will mount.
|
|
491
|
-
// Because it is part of the normal flow, it will push down the viewport, thus throwing our
|
|
492
|
-
// trigger => selectedItem alignment off by the amount the viewport was pushed down.
|
|
493
|
-
// We wait for this to happen and then re-run the positining logic one more time to account for it.
|
|
494
|
-
const handleScrollButtonChange = $cg2C9$react.useCallback((node)=>{
|
|
495
|
-
if (node && shouldRepositionRef.current === true) {
|
|
496
|
-
position();
|
|
497
|
-
focusSelectedItem();
|
|
498
|
-
shouldRepositionRef.current = false;
|
|
499
|
-
}
|
|
500
|
-
}, [
|
|
501
|
-
position,
|
|
502
|
-
focusSelectedItem
|
|
503
407
|
]); // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
|
|
504
408
|
// and close on `pointerup` outside.
|
|
505
409
|
const { onOpenChange: onOpenChange , triggerPointerDownPosRef: triggerPointerDownPosRef } = context;
|
|
@@ -588,9 +492,21 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
588
492
|
}, [
|
|
589
493
|
context.value
|
|
590
494
|
]);
|
|
495
|
+
const SelectPosition = position === 'popper' ? $1345bda09ffc1bc6$var$SelectPopperPosition : $1345bda09ffc1bc6$var$SelectItemAlignedPosition; // Silently ignore props that are not supported by `SelectItemAlignedPosition`
|
|
496
|
+
const popperContentProps = SelectPosition === $1345bda09ffc1bc6$var$SelectPopperPosition ? {
|
|
497
|
+
side: side,
|
|
498
|
+
sideOffset: sideOffset,
|
|
499
|
+
align: align,
|
|
500
|
+
alignOffset: alignOffset,
|
|
501
|
+
arrowPadding: arrowPadding,
|
|
502
|
+
collisionBoundary: collisionBoundary,
|
|
503
|
+
collisionPadding: collisionPadding,
|
|
504
|
+
sticky: sticky,
|
|
505
|
+
hideWhenDetached: hideWhenDetached,
|
|
506
|
+
avoidCollisions: avoidCollisions
|
|
507
|
+
} : {};
|
|
591
508
|
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentProvider, {
|
|
592
509
|
scope: __scopeSelect,
|
|
593
|
-
contentWrapper: contentWrapper,
|
|
594
510
|
content: content,
|
|
595
511
|
viewport: viewport,
|
|
596
512
|
onViewportChange: setViewport,
|
|
@@ -598,22 +514,14 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
598
514
|
selectedItem: selectedItem,
|
|
599
515
|
onItemLeave: handleItemLeave,
|
|
600
516
|
itemTextRefCallback: itemTextRefCallback,
|
|
517
|
+
focusSelectedItem: focusSelectedItem,
|
|
601
518
|
selectedItemText: selectedItemText,
|
|
602
|
-
|
|
519
|
+
position: position,
|
|
603
520
|
isPositioned: isPositioned,
|
|
604
|
-
shouldExpandOnScrollRef: shouldExpandOnScrollRef,
|
|
605
521
|
searchRef: searchRef
|
|
606
522
|
}, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$reactremovescroll.RemoveScroll, {
|
|
607
523
|
as: $cg2C9$radixuireactslot.Slot,
|
|
608
524
|
allowPinchZoom: true
|
|
609
|
-
}, /*#__PURE__*/ $cg2C9$react.createElement("div", {
|
|
610
|
-
ref: setContentWrapper,
|
|
611
|
-
style: {
|
|
612
|
-
display: 'flex',
|
|
613
|
-
flexDirection: 'column',
|
|
614
|
-
position: 'fixed',
|
|
615
|
-
zIndex: contentZIndex
|
|
616
|
-
}
|
|
617
525
|
}, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactfocusscope.FocusScope, {
|
|
618
526
|
asChild: true // we make sure we're not trapping once it's been closed
|
|
619
527
|
,
|
|
@@ -629,30 +537,33 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
629
537
|
});
|
|
630
538
|
event.preventDefault();
|
|
631
539
|
})
|
|
632
|
-
}, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactdismissablelayer.DismissableLayer,
|
|
540
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactdismissablelayer.DismissableLayer, {
|
|
541
|
+
asChild: true,
|
|
542
|
+
disableOutsidePointerEvents: true,
|
|
543
|
+
onEscapeKeyDown: onEscapeKeyDown,
|
|
544
|
+
onPointerDownOutside: onPointerDownOutside // When focus is trapped, a focusout event may still happen.
|
|
545
|
+
,
|
|
546
|
+
onFocusOutside: (event)=>event.preventDefault()
|
|
547
|
+
,
|
|
548
|
+
onDismiss: ()=>context.onOpenChange(false)
|
|
549
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement(SelectPosition, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
|
|
633
550
|
role: "listbox",
|
|
634
551
|
id: context.contentId,
|
|
635
552
|
"data-state": context.open ? 'open' : 'closed',
|
|
636
553
|
dir: context.dir,
|
|
637
554
|
onContextMenu: (event)=>event.preventDefault()
|
|
638
|
-
}, contentProps, {
|
|
555
|
+
}, contentProps, popperContentProps, {
|
|
556
|
+
onPlaced: ()=>setIsPositioned(true)
|
|
557
|
+
,
|
|
639
558
|
ref: composedRefs,
|
|
640
559
|
style: {
|
|
560
|
+
// flex layout so we can place the scroll buttons properly
|
|
641
561
|
display: 'flex',
|
|
642
562
|
flexDirection: 'column',
|
|
643
|
-
//
|
|
644
|
-
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
645
|
-
boxSizing: 'border-box',
|
|
646
|
-
maxHeight: '100%',
|
|
563
|
+
// reset the outline by default as the content MAY get focused
|
|
647
564
|
outline: 'none',
|
|
648
565
|
...contentProps.style
|
|
649
566
|
},
|
|
650
|
-
disableOutsidePointerEvents: true // When focus is trapped, a focusout event may still happen.
|
|
651
|
-
,
|
|
652
|
-
onFocusOutside: (event)=>event.preventDefault()
|
|
653
|
-
,
|
|
654
|
-
onDismiss: ()=>context.onOpenChange(false)
|
|
655
|
-
,
|
|
656
567
|
onKeyDown: $cg2C9$radixuiprimitive.composeEventHandlers(contentProps.onKeyDown, (event)=>{
|
|
657
568
|
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; // select should not be navigated using tab key so we prevent it
|
|
658
569
|
if (event.key === 'Tab') event.preventDefault();
|
|
@@ -689,12 +600,200 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
|
|
|
689
600
|
})
|
|
690
601
|
}))))));
|
|
691
602
|
});
|
|
603
|
+
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$var$SelectContentImpl, {
|
|
604
|
+
displayName: $1345bda09ffc1bc6$var$CONTENT_IMPL_NAME
|
|
605
|
+
});
|
|
606
|
+
/* -------------------------------------------------------------------------------------------------
|
|
607
|
+
* SelectItemAlignedPosition
|
|
608
|
+
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$ITEM_ALIGNED_POSITION_NAME = 'SelectItemAlignedPosition';
|
|
609
|
+
const $1345bda09ffc1bc6$var$SelectItemAlignedPosition = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
610
|
+
const { __scopeSelect: __scopeSelect , onPlaced: onPlaced , ...popperProps } = props;
|
|
611
|
+
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME, __scopeSelect);
|
|
612
|
+
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$CONTENT_NAME, __scopeSelect);
|
|
613
|
+
const [contentWrapper, setContentWrapper] = $cg2C9$react.useState(null);
|
|
614
|
+
const [content, setContent] = $cg2C9$react.useState(null);
|
|
615
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node)
|
|
616
|
+
);
|
|
617
|
+
const getItems = $1345bda09ffc1bc6$var$useCollection(__scopeSelect);
|
|
618
|
+
const shouldExpandOnScrollRef = $cg2C9$react.useRef(false);
|
|
619
|
+
const shouldRepositionRef = $cg2C9$react.useRef(true);
|
|
620
|
+
const { viewport: viewport , selectedItem: selectedItem , selectedItemText: selectedItemText , focusSelectedItem: focusSelectedItem } = contentContext;
|
|
621
|
+
const position = $cg2C9$react.useCallback(()=>{
|
|
622
|
+
if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
|
|
623
|
+
const triggerRect = context.trigger.getBoundingClientRect(); // -----------------------------------------------------------------------------------------
|
|
624
|
+
// Horizontal positioning
|
|
625
|
+
// -----------------------------------------------------------------------------------------
|
|
626
|
+
const contentRect = content.getBoundingClientRect();
|
|
627
|
+
const valueNodeRect = context.valueNode.getBoundingClientRect();
|
|
628
|
+
const itemTextRect = selectedItemText.getBoundingClientRect();
|
|
629
|
+
if (context.dir !== 'rtl') {
|
|
630
|
+
const itemTextOffset = itemTextRect.left - contentRect.left;
|
|
631
|
+
const left = valueNodeRect.left - itemTextOffset;
|
|
632
|
+
const leftDelta = triggerRect.left - left;
|
|
633
|
+
const minContentWidth = triggerRect.width + leftDelta;
|
|
634
|
+
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
635
|
+
const rightEdge = window.innerWidth - $1345bda09ffc1bc6$var$CONTENT_MARGIN;
|
|
636
|
+
const clampedLeft = $cg2C9$radixuinumber.clamp(left, [
|
|
637
|
+
$1345bda09ffc1bc6$var$CONTENT_MARGIN,
|
|
638
|
+
rightEdge - contentWidth
|
|
639
|
+
]);
|
|
640
|
+
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
641
|
+
contentWrapper.style.left = clampedLeft + 'px';
|
|
642
|
+
} else {
|
|
643
|
+
const itemTextOffset = contentRect.right - itemTextRect.right;
|
|
644
|
+
const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
|
|
645
|
+
const rightDelta = window.innerWidth - triggerRect.right - right;
|
|
646
|
+
const minContentWidth = triggerRect.width + rightDelta;
|
|
647
|
+
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
648
|
+
const leftEdge = window.innerWidth - $1345bda09ffc1bc6$var$CONTENT_MARGIN;
|
|
649
|
+
const clampedRight = $cg2C9$radixuinumber.clamp(right, [
|
|
650
|
+
$1345bda09ffc1bc6$var$CONTENT_MARGIN,
|
|
651
|
+
leftEdge - contentWidth
|
|
652
|
+
]);
|
|
653
|
+
contentWrapper.style.minWidth = minContentWidth + 'px';
|
|
654
|
+
contentWrapper.style.right = clampedRight + 'px';
|
|
655
|
+
} // -----------------------------------------------------------------------------------------
|
|
656
|
+
// Vertical positioning
|
|
657
|
+
// -----------------------------------------------------------------------------------------
|
|
658
|
+
const items = getItems();
|
|
659
|
+
const availableHeight = window.innerHeight - $1345bda09ffc1bc6$var$CONTENT_MARGIN * 2;
|
|
660
|
+
const itemsHeight = viewport.scrollHeight;
|
|
661
|
+
const contentStyles = window.getComputedStyle(content);
|
|
662
|
+
const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
|
|
663
|
+
const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
|
|
664
|
+
const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
|
|
665
|
+
const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
|
|
666
|
+
const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore
|
|
667
|
+
const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
|
|
668
|
+
const viewportStyles = window.getComputedStyle(viewport);
|
|
669
|
+
const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
|
|
670
|
+
const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
|
|
671
|
+
const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - $1345bda09ffc1bc6$var$CONTENT_MARGIN;
|
|
672
|
+
const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
|
|
673
|
+
const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
|
|
674
|
+
const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
|
|
675
|
+
const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
|
|
676
|
+
const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
|
|
677
|
+
const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
|
|
678
|
+
if (willAlignWithoutTopOverflow) {
|
|
679
|
+
const isLastItem = selectedItem === items[items.length - 1].ref.current;
|
|
680
|
+
contentWrapper.style.bottom = "0px";
|
|
681
|
+
const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
|
|
682
|
+
const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
|
|
683
|
+
const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
|
|
684
|
+
contentWrapper.style.height = height + 'px';
|
|
685
|
+
} else {
|
|
686
|
+
const isFirstItem = selectedItem === items[0].ref.current;
|
|
687
|
+
contentWrapper.style.top = "0px";
|
|
688
|
+
const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight);
|
|
689
|
+
const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
|
|
690
|
+
contentWrapper.style.height = height + 'px';
|
|
691
|
+
viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
|
|
692
|
+
}
|
|
693
|
+
contentWrapper.style.margin = `${$1345bda09ffc1bc6$var$CONTENT_MARGIN}px 0`;
|
|
694
|
+
contentWrapper.style.minHeight = minContentHeight + 'px';
|
|
695
|
+
contentWrapper.style.maxHeight = availableHeight + 'px'; // -----------------------------------------------------------------------------------------
|
|
696
|
+
onPlaced === null || onPlaced === void 0 || onPlaced(); // we don't want the initial scroll position adjustment to trigger "expand on scroll"
|
|
697
|
+
// so we explicitly turn it on only after they've registered.
|
|
698
|
+
requestAnimationFrame(()=>shouldExpandOnScrollRef.current = true
|
|
699
|
+
);
|
|
700
|
+
}
|
|
701
|
+
}, [
|
|
702
|
+
getItems,
|
|
703
|
+
context.trigger,
|
|
704
|
+
context.valueNode,
|
|
705
|
+
contentWrapper,
|
|
706
|
+
content,
|
|
707
|
+
viewport,
|
|
708
|
+
selectedItem,
|
|
709
|
+
selectedItemText,
|
|
710
|
+
context.dir,
|
|
711
|
+
onPlaced
|
|
712
|
+
]);
|
|
713
|
+
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>position()
|
|
714
|
+
, [
|
|
715
|
+
position
|
|
716
|
+
]); // copy z-index from content to wrapper
|
|
717
|
+
const [contentZIndex, setContentZIndex] = $cg2C9$react.useState();
|
|
718
|
+
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
719
|
+
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
720
|
+
}, [
|
|
721
|
+
content
|
|
722
|
+
]); // When the viewport becomes scrollable at the top, the scroll up button will mount.
|
|
723
|
+
// Because it is part of the normal flow, it will push down the viewport, thus throwing our
|
|
724
|
+
// trigger => selectedItem alignment off by the amount the viewport was pushed down.
|
|
725
|
+
// We wait for this to happen and then re-run the positining logic one more time to account for it.
|
|
726
|
+
const handleScrollButtonChange = $cg2C9$react.useCallback((node)=>{
|
|
727
|
+
if (node && shouldRepositionRef.current === true) {
|
|
728
|
+
position();
|
|
729
|
+
focusSelectedItem === null || focusSelectedItem === void 0 || focusSelectedItem();
|
|
730
|
+
shouldRepositionRef.current = false;
|
|
731
|
+
}
|
|
732
|
+
}, [
|
|
733
|
+
position,
|
|
734
|
+
focusSelectedItem
|
|
735
|
+
]);
|
|
736
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectViewportProvider, {
|
|
737
|
+
scope: __scopeSelect,
|
|
738
|
+
contentWrapper: contentWrapper,
|
|
739
|
+
shouldExpandOnScrollRef: shouldExpandOnScrollRef,
|
|
740
|
+
onScrollButtonChange: handleScrollButtonChange
|
|
741
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement("div", {
|
|
742
|
+
ref: setContentWrapper,
|
|
743
|
+
style: {
|
|
744
|
+
display: 'flex',
|
|
745
|
+
flexDirection: 'column',
|
|
746
|
+
position: 'fixed',
|
|
747
|
+
zIndex: contentZIndex
|
|
748
|
+
}
|
|
749
|
+
}, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, popperProps, {
|
|
750
|
+
ref: composedRefs,
|
|
751
|
+
style: {
|
|
752
|
+
// When we get the height of the content, it includes borders. If we were to set
|
|
753
|
+
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
754
|
+
boxSizing: 'border-box',
|
|
755
|
+
// We need to ensure the content doesn't get taller than the wrapper
|
|
756
|
+
maxHeight: '100%',
|
|
757
|
+
...popperProps.style
|
|
758
|
+
}
|
|
759
|
+
}))));
|
|
760
|
+
});
|
|
761
|
+
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$var$SelectItemAlignedPosition, {
|
|
762
|
+
displayName: $1345bda09ffc1bc6$var$ITEM_ALIGNED_POSITION_NAME
|
|
763
|
+
});
|
|
764
|
+
/* -------------------------------------------------------------------------------------------------
|
|
765
|
+
* SelectPopperPosition
|
|
766
|
+
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$POPPER_POSITION_NAME = 'SelectPopperPosition';
|
|
767
|
+
const $1345bda09ffc1bc6$var$SelectPopperPosition = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
768
|
+
const { __scopeSelect: __scopeSelect , align: align = 'start' , collisionPadding: collisionPadding = $1345bda09ffc1bc6$var$CONTENT_MARGIN , ...popperProps } = props;
|
|
769
|
+
const popperScope = $1345bda09ffc1bc6$var$usePopperScope(__scopeSelect);
|
|
770
|
+
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactpopper.Content, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, popperScope, popperProps, {
|
|
771
|
+
ref: forwardedRef,
|
|
772
|
+
align: align,
|
|
773
|
+
collisionPadding: collisionPadding,
|
|
774
|
+
style: {
|
|
775
|
+
// Ensure border-box for floating-ui calculations
|
|
776
|
+
boxSizing: 'border-box',
|
|
777
|
+
...popperProps.style,
|
|
778
|
+
'--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',
|
|
779
|
+
'--radix-select-content-available-width': 'var(--radix-popper-available-width)',
|
|
780
|
+
'--radix-select-content-available-height': 'var(--radix-popper-available-height)',
|
|
781
|
+
'--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',
|
|
782
|
+
'--radix-select-trigger-height': 'var(--radix-popper-anchor-height)'
|
|
783
|
+
}
|
|
784
|
+
}));
|
|
785
|
+
});
|
|
786
|
+
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$var$SelectPopperPosition, {
|
|
787
|
+
displayName: $1345bda09ffc1bc6$var$POPPER_POSITION_NAME
|
|
788
|
+
});
|
|
692
789
|
/* -------------------------------------------------------------------------------------------------
|
|
693
790
|
* SelectViewport
|
|
694
|
-
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$
|
|
791
|
+
* -----------------------------------------------------------------------------------------------*/ const [$1345bda09ffc1bc6$var$SelectViewportProvider, $1345bda09ffc1bc6$var$useSelectViewportContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME, {});
|
|
792
|
+
const $1345bda09ffc1bc6$var$VIEWPORT_NAME = 'SelectViewport';
|
|
695
793
|
const $1345bda09ffc1bc6$export$9ed6e7b40248d36d = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
696
794
|
const { __scopeSelect: __scopeSelect , ...viewportProps } = props;
|
|
697
795
|
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$VIEWPORT_NAME, __scopeSelect);
|
|
796
|
+
const viewportContext = $1345bda09ffc1bc6$var$useSelectViewportContext($1345bda09ffc1bc6$var$VIEWPORT_NAME, __scopeSelect);
|
|
698
797
|
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, contentContext.onViewportChange);
|
|
699
798
|
const prevScrollTopRef = $cg2C9$react.useRef(0);
|
|
700
799
|
return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$react.Fragment, null, /*#__PURE__*/ $cg2C9$react.createElement("style", {
|
|
@@ -719,7 +818,7 @@ const $1345bda09ffc1bc6$export$9ed6e7b40248d36d = /*#__PURE__*/ $cg2C9$react.for
|
|
|
719
818
|
},
|
|
720
819
|
onScroll: $cg2C9$radixuiprimitive.composeEventHandlers(viewportProps.onScroll, (event)=>{
|
|
721
820
|
const viewport = event.currentTarget;
|
|
722
|
-
const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef } =
|
|
821
|
+
const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef } = viewportContext;
|
|
723
822
|
if (shouldExpandOnScrollRef !== null && shouldExpandOnScrollRef !== void 0 && shouldExpandOnScrollRef.current && contentWrapper) {
|
|
724
823
|
const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
|
|
725
824
|
if (scrolledBy > 0) {
|
|
@@ -931,8 +1030,9 @@ const $1345bda09ffc1bc6$export$6b9198de19accfe6 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
931
1030
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';
|
|
932
1031
|
const $1345bda09ffc1bc6$export$d8117927658af6d7 = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
933
1032
|
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
1033
|
+
const viewportContext = $1345bda09ffc1bc6$var$useSelectViewportContext($1345bda09ffc1bc6$var$SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
934
1034
|
const [canScrollUp1, setCanScrollUp] = $cg2C9$react.useState(false);
|
|
935
|
-
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef,
|
|
1035
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
936
1036
|
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
937
1037
|
if (contentContext.viewport && contentContext.isPositioned) {
|
|
938
1038
|
const viewport = contentContext.viewport;
|
|
@@ -965,8 +1065,9 @@ const $1345bda09ffc1bc6$export$d8117927658af6d7 = /*#__PURE__*/ $cg2C9$react.for
|
|
|
965
1065
|
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';
|
|
966
1066
|
const $1345bda09ffc1bc6$export$ff951e476c12189 = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
967
1067
|
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
1068
|
+
const viewportContext = $1345bda09ffc1bc6$var$useSelectViewportContext($1345bda09ffc1bc6$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
968
1069
|
const [canScrollDown1, setCanScrollDown] = $cg2C9$react.useState(false);
|
|
969
|
-
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef,
|
|
1070
|
+
const composedRefs = $cg2C9$radixuireactcomposerefs.useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
970
1071
|
$cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
971
1072
|
if (contentContext.viewport && contentContext.isPositioned) {
|
|
972
1073
|
const viewport = contentContext.viewport;
|
|
@@ -1058,6 +1159,21 @@ const $1345bda09ffc1bc6$export$eba4b1df07cb1d3 = /*#__PURE__*/ $cg2C9$react.forw
|
|
|
1058
1159
|
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$eba4b1df07cb1d3, {
|
|
1059
1160
|
displayName: $1345bda09ffc1bc6$var$SEPARATOR_NAME
|
|
1060
1161
|
});
|
|
1162
|
+
/* -------------------------------------------------------------------------------------------------
|
|
1163
|
+
* SelectArrow
|
|
1164
|
+
* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$ARROW_NAME = 'SelectArrow';
|
|
1165
|
+
const $1345bda09ffc1bc6$export$314f4cb8f8099628 = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
1166
|
+
const { __scopeSelect: __scopeSelect , ...arrowProps } = props;
|
|
1167
|
+
const popperScope = $1345bda09ffc1bc6$var$usePopperScope(__scopeSelect);
|
|
1168
|
+
const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$ARROW_NAME, __scopeSelect);
|
|
1169
|
+
const contentContext = $1345bda09ffc1bc6$var$useSelectContentContext($1345bda09ffc1bc6$var$ARROW_NAME, __scopeSelect);
|
|
1170
|
+
return context.open && contentContext.position === 'popper' ? /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactpopper.Arrow, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, popperScope, arrowProps, {
|
|
1171
|
+
ref: forwardedRef
|
|
1172
|
+
})) : null;
|
|
1173
|
+
});
|
|
1174
|
+
/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$314f4cb8f8099628, {
|
|
1175
|
+
displayName: $1345bda09ffc1bc6$var$ARROW_NAME
|
|
1176
|
+
});
|
|
1061
1177
|
/* -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$BubbleSelect = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
|
|
1062
1178
|
const { value: value , ...selectProps } = props;
|
|
1063
1179
|
const ref = $cg2C9$react.useRef(null);
|
|
@@ -1179,6 +1295,7 @@ const $1345bda09ffc1bc6$export$c3468e2714d175fa = $1345bda09ffc1bc6$export$6b919
|
|
|
1179
1295
|
const $1345bda09ffc1bc6$export$2f60d3ec9ad468f2 = $1345bda09ffc1bc6$export$d8117927658af6d7;
|
|
1180
1296
|
const $1345bda09ffc1bc6$export$bf1aedc3039c8d63 = $1345bda09ffc1bc6$export$ff951e476c12189;
|
|
1181
1297
|
const $1345bda09ffc1bc6$export$1ff3c3f08ae963c0 = $1345bda09ffc1bc6$export$eba4b1df07cb1d3;
|
|
1298
|
+
const $1345bda09ffc1bc6$export$21b07c8f274aebd5 = $1345bda09ffc1bc6$export$314f4cb8f8099628;
|
|
1182
1299
|
|
|
1183
1300
|
|
|
1184
1301
|
|