@radix-ui/react-select 2.0.1-rc.9 → 2.1.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +81 -69
- package/dist/index.d.ts +81 -69
- package/dist/index.js +1064 -1229
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +1077 -1199
- package/dist/index.mjs.map +7 -1
- package/package.json +20 -21
- package/dist/index.d.ts.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,178 +1,163 @@
|
|
|
1
|
-
|
|
2
|
-
import {useState as $01b9c$useState, useRef as $01b9c$useRef, createElement as $01b9c$createElement, useCallback as $01b9c$useCallback, forwardRef as $01b9c$forwardRef, Fragment as $01b9c$Fragment, useEffect as $01b9c$useEffect, useMemo as $01b9c$useMemo} from "react";
|
|
3
|
-
import {createPortal as $01b9c$createPortal} from "react-dom";
|
|
4
|
-
import {clamp as $01b9c$clamp} from "@radix-ui/number";
|
|
5
|
-
import {composeEventHandlers as $01b9c$composeEventHandlers} from "@radix-ui/primitive";
|
|
6
|
-
import {createCollection as $01b9c$createCollection} from "@radix-ui/react-collection";
|
|
7
|
-
import {useComposedRefs as $01b9c$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
8
|
-
import {createContextScope as $01b9c$createContextScope} from "@radix-ui/react-context";
|
|
9
|
-
import {useDirection as $01b9c$useDirection} from "@radix-ui/react-direction";
|
|
10
|
-
import {DismissableLayer as $01b9c$DismissableLayer} from "@radix-ui/react-dismissable-layer";
|
|
11
|
-
import {useFocusGuards as $01b9c$useFocusGuards} from "@radix-ui/react-focus-guards";
|
|
12
|
-
import {FocusScope as $01b9c$FocusScope} from "@radix-ui/react-focus-scope";
|
|
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";
|
|
15
|
-
import {Portal as $01b9c$Portal} from "@radix-ui/react-portal";
|
|
16
|
-
import {Primitive as $01b9c$Primitive} from "@radix-ui/react-primitive";
|
|
17
|
-
import {Slot as $01b9c$Slot} from "@radix-ui/react-slot";
|
|
18
|
-
import {useCallbackRef as $01b9c$useCallbackRef} from "@radix-ui/react-use-callback-ref";
|
|
19
|
-
import {useControllableState as $01b9c$useControllableState} from "@radix-ui/react-use-controllable-state";
|
|
20
|
-
import {useLayoutEffect as $01b9c$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
|
|
21
|
-
import {usePrevious as $01b9c$usePrevious} from "@radix-ui/react-use-previous";
|
|
22
|
-
import {VisuallyHidden as $01b9c$VisuallyHidden} from "@radix-ui/react-visually-hidden";
|
|
23
|
-
import {hideOthers as $01b9c$hideOthers} from "aria-hidden";
|
|
24
|
-
import {RemoveScroll as $01b9c$RemoveScroll} from "react-remove-scroll";
|
|
1
|
+
"use client";
|
|
25
2
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
]
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
'Enter'
|
|
60
|
-
];
|
|
61
|
-
/* -------------------------------------------------------------------------------------------------
|
|
62
|
-
* Select
|
|
63
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SELECT_NAME = 'Select';
|
|
64
|
-
const [$cc7e05a45900e73f$var$Collection, $cc7e05a45900e73f$var$useCollection, $cc7e05a45900e73f$var$createCollectionScope] = $01b9c$createCollection($cc7e05a45900e73f$var$SELECT_NAME);
|
|
65
|
-
const [$cc7e05a45900e73f$var$createSelectContext, $cc7e05a45900e73f$export$286727a75dc039bd] = $01b9c$createContextScope($cc7e05a45900e73f$var$SELECT_NAME, [
|
|
66
|
-
$cc7e05a45900e73f$var$createCollectionScope,
|
|
67
|
-
$01b9c$createPopperScope
|
|
3
|
+
// packages/react/select/src/Select.tsx
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import * as ReactDOM from "react-dom";
|
|
6
|
+
import { clamp } from "@radix-ui/number";
|
|
7
|
+
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
8
|
+
import { createCollection } from "@radix-ui/react-collection";
|
|
9
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
10
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
11
|
+
import { useDirection } from "@radix-ui/react-direction";
|
|
12
|
+
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
|
|
13
|
+
import { useFocusGuards } from "@radix-ui/react-focus-guards";
|
|
14
|
+
import { FocusScope } from "@radix-ui/react-focus-scope";
|
|
15
|
+
import { useId } from "@radix-ui/react-id";
|
|
16
|
+
import * as PopperPrimitive from "@radix-ui/react-popper";
|
|
17
|
+
import { createPopperScope } from "@radix-ui/react-popper";
|
|
18
|
+
import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
|
|
19
|
+
import { Primitive } from "@radix-ui/react-primitive";
|
|
20
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
21
|
+
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
22
|
+
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
23
|
+
import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
|
|
24
|
+
import { usePrevious } from "@radix-ui/react-use-previous";
|
|
25
|
+
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
|
26
|
+
import { hideOthers } from "aria-hidden";
|
|
27
|
+
import { RemoveScroll } from "react-remove-scroll";
|
|
28
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
29
|
+
var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
|
|
30
|
+
var SELECTION_KEYS = [" ", "Enter"];
|
|
31
|
+
var SELECT_NAME = "Select";
|
|
32
|
+
var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
|
|
33
|
+
var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
|
|
34
|
+
createCollectionScope,
|
|
35
|
+
createPopperScope
|
|
68
36
|
]);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
37
|
+
var usePopperScope = createPopperScope();
|
|
38
|
+
var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
|
|
39
|
+
var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
|
|
40
|
+
var Select = (props) => {
|
|
41
|
+
const {
|
|
42
|
+
__scopeSelect,
|
|
43
|
+
children,
|
|
44
|
+
open: openProp,
|
|
45
|
+
defaultOpen,
|
|
46
|
+
onOpenChange,
|
|
47
|
+
value: valueProp,
|
|
48
|
+
defaultValue,
|
|
49
|
+
onValueChange,
|
|
50
|
+
dir,
|
|
51
|
+
name,
|
|
52
|
+
autoComplete,
|
|
53
|
+
disabled,
|
|
54
|
+
required
|
|
55
|
+
} = props;
|
|
56
|
+
const popperScope = usePopperScope(__scopeSelect);
|
|
57
|
+
const [trigger, setTrigger] = React.useState(null);
|
|
58
|
+
const [valueNode, setValueNode] = React.useState(null);
|
|
59
|
+
const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
|
|
60
|
+
const direction = useDirection(dir);
|
|
61
|
+
const [open = false, setOpen] = useControllableState({
|
|
62
|
+
prop: openProp,
|
|
63
|
+
defaultProp: defaultOpen,
|
|
64
|
+
onChange: onOpenChange
|
|
65
|
+
});
|
|
66
|
+
const [value, setValue] = useControllableState({
|
|
67
|
+
prop: valueProp,
|
|
68
|
+
defaultProp: defaultValue,
|
|
69
|
+
onChange: onValueChange
|
|
70
|
+
});
|
|
71
|
+
const triggerPointerDownPosRef = React.useRef(null);
|
|
72
|
+
const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
|
|
73
|
+
const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
|
|
74
|
+
const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
|
|
75
|
+
return /* @__PURE__ */ jsx(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ jsxs(
|
|
76
|
+
SelectProvider,
|
|
77
|
+
{
|
|
78
|
+
required,
|
|
79
|
+
scope: __scopeSelect,
|
|
80
|
+
trigger,
|
|
81
|
+
onTriggerChange: setTrigger,
|
|
82
|
+
valueNode,
|
|
83
|
+
onValueNodeChange: setValueNode,
|
|
84
|
+
valueNodeHasChildren,
|
|
85
|
+
onValueNodeHasChildrenChange: setValueNodeHasChildren,
|
|
86
|
+
contentId: useId(),
|
|
87
|
+
value,
|
|
88
|
+
onValueChange: setValue,
|
|
89
|
+
open,
|
|
90
|
+
onOpenChange: setOpen,
|
|
91
|
+
dir: direction,
|
|
92
|
+
triggerPointerDownPosRef,
|
|
93
|
+
disabled,
|
|
94
|
+
children: [
|
|
95
|
+
/* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
|
|
96
|
+
SelectNativeOptionsProvider,
|
|
97
|
+
{
|
|
98
|
+
scope: props.__scopeSelect,
|
|
99
|
+
onNativeOptionAdd: React.useCallback((option) => {
|
|
100
|
+
setNativeOptionsSet((prev) => new Set(prev).add(option));
|
|
101
|
+
}, []),
|
|
102
|
+
onNativeOptionRemove: React.useCallback((option) => {
|
|
103
|
+
setNativeOptionsSet((prev) => {
|
|
125
104
|
const optionsSet = new Set(prev);
|
|
126
105
|
optionsSet.delete(option);
|
|
127
106
|
return optionsSet;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
107
|
+
});
|
|
108
|
+
}, []),
|
|
109
|
+
children
|
|
110
|
+
}
|
|
111
|
+
) }),
|
|
112
|
+
isFormControl ? /* @__PURE__ */ jsxs(
|
|
113
|
+
BubbleSelect,
|
|
114
|
+
{
|
|
115
|
+
"aria-hidden": true,
|
|
116
|
+
required,
|
|
117
|
+
tabIndex: -1,
|
|
118
|
+
name,
|
|
119
|
+
autoComplete,
|
|
120
|
+
value,
|
|
121
|
+
onChange: (event) => setValue(event.target.value),
|
|
122
|
+
disabled,
|
|
123
|
+
children: [
|
|
124
|
+
value === void 0 ? /* @__PURE__ */ jsx("option", { value: "" }) : null,
|
|
125
|
+
Array.from(nativeOptionsSet)
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
nativeSelectKey
|
|
129
|
+
) : null
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
) });
|
|
145
133
|
};
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
const
|
|
153
|
-
const { __scopeSelect: __scopeSelect , disabled: disabled = false , ...triggerProps } = props;
|
|
154
|
-
const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
|
|
155
|
-
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$TRIGGER_NAME, __scopeSelect);
|
|
134
|
+
Select.displayName = SELECT_NAME;
|
|
135
|
+
var TRIGGER_NAME = "SelectTrigger";
|
|
136
|
+
var SelectTrigger = React.forwardRef(
|
|
137
|
+
(props, forwardedRef) => {
|
|
138
|
+
const { __scopeSelect, disabled = false, ...triggerProps } = props;
|
|
139
|
+
const popperScope = usePopperScope(__scopeSelect);
|
|
140
|
+
const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
|
|
156
141
|
const isDisabled = context.disabled || disabled;
|
|
157
|
-
const composedRefs =
|
|
158
|
-
const getItems =
|
|
159
|
-
const [searchRef, handleTypeaheadSearch, resetTypeahead] =
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
142
|
+
const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
|
|
143
|
+
const getItems = useCollection(__scopeSelect);
|
|
144
|
+
const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
|
|
145
|
+
const enabledItems = getItems().filter((item) => !item.disabled);
|
|
146
|
+
const currentItem = enabledItems.find((item) => item.value === context.value);
|
|
147
|
+
const nextItem = findNextItem(enabledItems, search, currentItem);
|
|
148
|
+
if (nextItem !== void 0) {
|
|
149
|
+
context.onValueChange(nextItem.value);
|
|
150
|
+
}
|
|
166
151
|
});
|
|
167
|
-
const handleOpen = ()=>{
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
152
|
+
const handleOpen = () => {
|
|
153
|
+
if (!isDisabled) {
|
|
154
|
+
context.onOpenChange(true);
|
|
155
|
+
resetTypeahead();
|
|
156
|
+
}
|
|
172
157
|
};
|
|
173
|
-
return
|
|
174
|
-
|
|
175
|
-
|
|
158
|
+
return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
|
|
159
|
+
Primitive.button,
|
|
160
|
+
{
|
|
176
161
|
type: "button",
|
|
177
162
|
role: "combobox",
|
|
178
163
|
"aria-controls": context.contentId,
|
|
@@ -180,1093 +165,986 @@ const $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 = /*#__PURE__*/ $01b9c$forwardRef
|
|
|
180
165
|
"aria-required": context.required,
|
|
181
166
|
"aria-autocomplete": "none",
|
|
182
167
|
dir: context.dir,
|
|
183
|
-
"data-state": context.open ?
|
|
168
|
+
"data-state": context.open ? "open" : "closed",
|
|
184
169
|
disabled: isDisabled,
|
|
185
|
-
"data-disabled": isDisabled ?
|
|
186
|
-
"data-placeholder":
|
|
187
|
-
|
|
188
|
-
ref: composedRefs
|
|
189
|
-
,
|
|
190
|
-
|
|
191
|
-
// Whilst browsers generally have no issue focusing the trigger when clicking
|
|
192
|
-
// on a label, Safari seems to struggle with the fact that there's no `onClick`.
|
|
193
|
-
// We force `focus` in this case. Note: this doesn't create any other side-effect
|
|
194
|
-
// because we are preventing default in `onPointerDown` so effectively
|
|
195
|
-
// this only runs for a label "click"
|
|
196
|
-
event.currentTarget.focus();
|
|
170
|
+
"data-disabled": isDisabled ? "" : void 0,
|
|
171
|
+
"data-placeholder": shouldShowPlaceholder(context.value) ? "" : void 0,
|
|
172
|
+
...triggerProps,
|
|
173
|
+
ref: composedRefs,
|
|
174
|
+
onClick: composeEventHandlers(triggerProps.onClick, (event) => {
|
|
175
|
+
event.currentTarget.focus();
|
|
197
176
|
}),
|
|
198
|
-
onPointerDown:
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
event.preventDefault();
|
|
212
|
-
}
|
|
177
|
+
onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => {
|
|
178
|
+
const target = event.target;
|
|
179
|
+
if (target.hasPointerCapture(event.pointerId)) {
|
|
180
|
+
target.releasePointerCapture(event.pointerId);
|
|
181
|
+
}
|
|
182
|
+
if (event.button === 0 && event.ctrlKey === false) {
|
|
183
|
+
handleOpen();
|
|
184
|
+
context.triggerPointerDownPosRef.current = {
|
|
185
|
+
x: Math.round(event.pageX),
|
|
186
|
+
y: Math.round(event.pageY)
|
|
187
|
+
};
|
|
188
|
+
event.preventDefault();
|
|
189
|
+
}
|
|
213
190
|
}),
|
|
214
|
-
onKeyDown:
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
191
|
+
onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => {
|
|
192
|
+
const isTypingAhead = searchRef.current !== "";
|
|
193
|
+
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
194
|
+
if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
|
|
195
|
+
if (isTypingAhead && event.key === " ") return;
|
|
196
|
+
if (OPEN_KEYS.includes(event.key)) {
|
|
197
|
+
handleOpen();
|
|
198
|
+
event.preventDefault();
|
|
199
|
+
}
|
|
223
200
|
})
|
|
224
|
-
|
|
225
|
-
});
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
const
|
|
233
|
-
|
|
234
|
-
const {
|
|
235
|
-
const
|
|
236
|
-
const
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
256
|
-
/*
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}, iconProps, {
|
|
264
|
-
ref: forwardedRef
|
|
265
|
-
}), children || '▼');
|
|
266
|
-
});
|
|
267
|
-
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$99b400cabb58c515, {
|
|
268
|
-
displayName: $cc7e05a45900e73f$var$ICON_NAME
|
|
269
|
-
});
|
|
270
|
-
/* -------------------------------------------------------------------------------------------------
|
|
271
|
-
* SelectPortal
|
|
272
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$PORTAL_NAME = 'SelectPortal';
|
|
273
|
-
const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
|
|
274
|
-
return /*#__PURE__*/ $01b9c$createElement($01b9c$Portal, $01b9c$babelruntimehelpersesmextends({
|
|
275
|
-
asChild: true
|
|
276
|
-
}, props));
|
|
201
|
+
}
|
|
202
|
+
) });
|
|
203
|
+
}
|
|
204
|
+
);
|
|
205
|
+
SelectTrigger.displayName = TRIGGER_NAME;
|
|
206
|
+
var VALUE_NAME = "SelectValue";
|
|
207
|
+
var SelectValue = React.forwardRef(
|
|
208
|
+
(props, forwardedRef) => {
|
|
209
|
+
const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
|
|
210
|
+
const context = useSelectContext(VALUE_NAME, __scopeSelect);
|
|
211
|
+
const { onValueNodeHasChildrenChange } = context;
|
|
212
|
+
const hasChildren = children !== void 0;
|
|
213
|
+
const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
|
|
214
|
+
useLayoutEffect(() => {
|
|
215
|
+
onValueNodeHasChildrenChange(hasChildren);
|
|
216
|
+
}, [onValueNodeHasChildrenChange, hasChildren]);
|
|
217
|
+
return /* @__PURE__ */ jsx(
|
|
218
|
+
Primitive.span,
|
|
219
|
+
{
|
|
220
|
+
...valueProps,
|
|
221
|
+
ref: composedRefs,
|
|
222
|
+
style: { pointerEvents: "none" },
|
|
223
|
+
children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx(Fragment, { children: placeholder }) : children
|
|
224
|
+
}
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
);
|
|
228
|
+
SelectValue.displayName = VALUE_NAME;
|
|
229
|
+
var ICON_NAME = "SelectIcon";
|
|
230
|
+
var SelectIcon = React.forwardRef(
|
|
231
|
+
(props, forwardedRef) => {
|
|
232
|
+
const { __scopeSelect, children, ...iconProps } = props;
|
|
233
|
+
return /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
|
|
234
|
+
}
|
|
235
|
+
);
|
|
236
|
+
SelectIcon.displayName = ICON_NAME;
|
|
237
|
+
var PORTAL_NAME = "SelectPortal";
|
|
238
|
+
var SelectPortal = (props) => {
|
|
239
|
+
return /* @__PURE__ */ jsx(PortalPrimitive, { asChild: true, ...props });
|
|
277
240
|
};
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
const [fragment, setFragment] = $01b9c$useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
|
|
287
|
-
$01b9c$useLayoutEffect(()=>{
|
|
288
|
-
setFragment(new DocumentFragment());
|
|
241
|
+
SelectPortal.displayName = PORTAL_NAME;
|
|
242
|
+
var CONTENT_NAME = "SelectContent";
|
|
243
|
+
var SelectContent = React.forwardRef(
|
|
244
|
+
(props, forwardedRef) => {
|
|
245
|
+
const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);
|
|
246
|
+
const [fragment, setFragment] = React.useState();
|
|
247
|
+
useLayoutEffect(() => {
|
|
248
|
+
setFragment(new DocumentFragment());
|
|
289
249
|
}, []);
|
|
290
250
|
if (!context.open) {
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
}, /*#__PURE__*/ $01b9c$createElement("div", null, props.children))), frag) : null;
|
|
251
|
+
const frag = fragment;
|
|
252
|
+
return frag ? ReactDOM.createPortal(
|
|
253
|
+
/* @__PURE__ */ jsx(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx("div", { children: props.children }) }) }),
|
|
254
|
+
frag
|
|
255
|
+
) : null;
|
|
297
256
|
}
|
|
298
|
-
return
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
257
|
+
return /* @__PURE__ */ jsx(SelectContentImpl, { ...props, ref: forwardedRef });
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
SelectContent.displayName = CONTENT_NAME;
|
|
261
|
+
var CONTENT_MARGIN = 10;
|
|
262
|
+
var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME);
|
|
263
|
+
var CONTENT_IMPL_NAME = "SelectContentImpl";
|
|
264
|
+
var SelectContentImpl = React.forwardRef(
|
|
265
|
+
(props, forwardedRef) => {
|
|
266
|
+
const {
|
|
267
|
+
__scopeSelect,
|
|
268
|
+
position = "item-aligned",
|
|
269
|
+
onCloseAutoFocus,
|
|
270
|
+
onEscapeKeyDown,
|
|
271
|
+
onPointerDownOutside,
|
|
272
|
+
//
|
|
273
|
+
// PopperContent props
|
|
274
|
+
side,
|
|
275
|
+
sideOffset,
|
|
276
|
+
align,
|
|
277
|
+
alignOffset,
|
|
278
|
+
arrowPadding,
|
|
279
|
+
collisionBoundary,
|
|
280
|
+
collisionPadding,
|
|
281
|
+
sticky,
|
|
282
|
+
hideWhenDetached,
|
|
283
|
+
avoidCollisions,
|
|
284
|
+
//
|
|
285
|
+
...contentProps
|
|
286
|
+
} = props;
|
|
287
|
+
const context = useSelectContext(CONTENT_NAME, __scopeSelect);
|
|
288
|
+
const [content, setContent] = React.useState(null);
|
|
289
|
+
const [viewport, setViewport] = React.useState(null);
|
|
290
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
291
|
+
const [selectedItem, setSelectedItem] = React.useState(null);
|
|
292
|
+
const [selectedItemText, setSelectedItemText] = React.useState(
|
|
293
|
+
null
|
|
319
294
|
);
|
|
320
|
-
const
|
|
321
|
-
const [
|
|
322
|
-
const
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
// the last element in the DOM (because of the `Portal`)
|
|
331
|
-
$01b9c$useFocusGuards();
|
|
332
|
-
const focusFirst = $01b9c$useCallback((candidates)=>{
|
|
333
|
-
const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
|
|
334
|
-
);
|
|
295
|
+
const getItems = useCollection(__scopeSelect);
|
|
296
|
+
const [isPositioned, setIsPositioned] = React.useState(false);
|
|
297
|
+
const firstValidItemFoundRef = React.useRef(false);
|
|
298
|
+
React.useEffect(() => {
|
|
299
|
+
if (content) return hideOthers(content);
|
|
300
|
+
}, [content]);
|
|
301
|
+
useFocusGuards();
|
|
302
|
+
const focusFirst = React.useCallback(
|
|
303
|
+
(candidates) => {
|
|
304
|
+
const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
|
|
335
305
|
const [lastItem] = restItems.slice(-1);
|
|
336
306
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
337
|
-
for (const candidate of candidates){
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;
|
|
345
|
-
candidate === null || candidate === void 0 || candidate.focus();
|
|
346
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
307
|
+
for (const candidate of candidates) {
|
|
308
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
309
|
+
candidate?.scrollIntoView({ block: "nearest" });
|
|
310
|
+
if (candidate === firstItem && viewport) viewport.scrollTop = 0;
|
|
311
|
+
if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;
|
|
312
|
+
candidate?.focus();
|
|
313
|
+
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
347
314
|
}
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
const handlePointerMove = (event)=>{
|
|
377
|
-
var _triggerPointerDownPo, _triggerPointerDownPo2, _triggerPointerDownPo3, _triggerPointerDownPo4;
|
|
378
|
-
pointerMoveDelta = {
|
|
379
|
-
x: Math.abs(Math.round(event.pageX) - ((_triggerPointerDownPo = (_triggerPointerDownPo2 = triggerPointerDownPosRef.current) === null || _triggerPointerDownPo2 === void 0 ? void 0 : _triggerPointerDownPo2.x) !== null && _triggerPointerDownPo !== void 0 ? _triggerPointerDownPo : 0)),
|
|
380
|
-
y: Math.abs(Math.round(event.pageY) - ((_triggerPointerDownPo3 = (_triggerPointerDownPo4 = triggerPointerDownPosRef.current) === null || _triggerPointerDownPo4 === void 0 ? void 0 : _triggerPointerDownPo4.y) !== null && _triggerPointerDownPo3 !== void 0 ? _triggerPointerDownPo3 : 0))
|
|
381
|
-
};
|
|
382
|
-
};
|
|
383
|
-
const handlePointerUp = (event)=>{
|
|
384
|
-
// If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.
|
|
385
|
-
if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) event.preventDefault();
|
|
386
|
-
else // otherwise, if the event was outside the content, close.
|
|
387
|
-
if (!content.contains(event.target)) onOpenChange(false);
|
|
388
|
-
document.removeEventListener('pointermove', handlePointerMove);
|
|
389
|
-
triggerPointerDownPosRef.current = null;
|
|
390
|
-
};
|
|
391
|
-
if (triggerPointerDownPosRef.current !== null) {
|
|
392
|
-
document.addEventListener('pointermove', handlePointerMove);
|
|
393
|
-
document.addEventListener('pointerup', handlePointerUp, {
|
|
394
|
-
capture: true,
|
|
395
|
-
once: true
|
|
396
|
-
});
|
|
315
|
+
},
|
|
316
|
+
[getItems, viewport]
|
|
317
|
+
);
|
|
318
|
+
const focusSelectedItem = React.useCallback(
|
|
319
|
+
() => focusFirst([selectedItem, content]),
|
|
320
|
+
[focusFirst, selectedItem, content]
|
|
321
|
+
);
|
|
322
|
+
React.useEffect(() => {
|
|
323
|
+
if (isPositioned) {
|
|
324
|
+
focusSelectedItem();
|
|
325
|
+
}
|
|
326
|
+
}, [isPositioned, focusSelectedItem]);
|
|
327
|
+
const { onOpenChange, triggerPointerDownPosRef } = context;
|
|
328
|
+
React.useEffect(() => {
|
|
329
|
+
if (content) {
|
|
330
|
+
let pointerMoveDelta = { x: 0, y: 0 };
|
|
331
|
+
const handlePointerMove = (event) => {
|
|
332
|
+
pointerMoveDelta = {
|
|
333
|
+
x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),
|
|
334
|
+
y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0))
|
|
335
|
+
};
|
|
336
|
+
};
|
|
337
|
+
const handlePointerUp = (event) => {
|
|
338
|
+
if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
|
|
339
|
+
event.preventDefault();
|
|
340
|
+
} else {
|
|
341
|
+
if (!content.contains(event.target)) {
|
|
342
|
+
onOpenChange(false);
|
|
397
343
|
}
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
344
|
+
}
|
|
345
|
+
document.removeEventListener("pointermove", handlePointerMove);
|
|
346
|
+
triggerPointerDownPosRef.current = null;
|
|
347
|
+
};
|
|
348
|
+
if (triggerPointerDownPosRef.current !== null) {
|
|
349
|
+
document.addEventListener("pointermove", handlePointerMove);
|
|
350
|
+
document.addEventListener("pointerup", handlePointerUp, { capture: true, once: true });
|
|
404
351
|
}
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
triggerPointerDownPosRef
|
|
409
|
-
]);
|
|
410
|
-
$01b9c$useEffect(()=>{
|
|
411
|
-
const close = ()=>onOpenChange(false)
|
|
412
|
-
;
|
|
413
|
-
window.addEventListener('blur', close);
|
|
414
|
-
window.addEventListener('resize', close);
|
|
415
|
-
return ()=>{
|
|
416
|
-
window.removeEventListener('blur', close);
|
|
417
|
-
window.removeEventListener('resize', close);
|
|
352
|
+
return () => {
|
|
353
|
+
document.removeEventListener("pointermove", handlePointerMove);
|
|
354
|
+
document.removeEventListener("pointerup", handlePointerUp, { capture: true });
|
|
418
355
|
};
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
);
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
356
|
+
}
|
|
357
|
+
}, [content, onOpenChange, triggerPointerDownPosRef]);
|
|
358
|
+
React.useEffect(() => {
|
|
359
|
+
const close = () => onOpenChange(false);
|
|
360
|
+
window.addEventListener("blur", close);
|
|
361
|
+
window.addEventListener("resize", close);
|
|
362
|
+
return () => {
|
|
363
|
+
window.removeEventListener("blur", close);
|
|
364
|
+
window.removeEventListener("resize", close);
|
|
365
|
+
};
|
|
366
|
+
}, [onOpenChange]);
|
|
367
|
+
const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {
|
|
368
|
+
const enabledItems = getItems().filter((item) => !item.disabled);
|
|
369
|
+
const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);
|
|
370
|
+
const nextItem = findNextItem(enabledItems, search, currentItem);
|
|
371
|
+
if (nextItem) {
|
|
372
|
+
setTimeout(() => nextItem.ref.current.focus());
|
|
373
|
+
}
|
|
433
374
|
});
|
|
434
|
-
const itemRefCallback =
|
|
375
|
+
const itemRefCallback = React.useCallback(
|
|
376
|
+
(node, value, disabled) => {
|
|
435
377
|
const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
|
|
436
|
-
const isSelectedItem = context.value !==
|
|
378
|
+
const isSelectedItem = context.value !== void 0 && context.value === value;
|
|
437
379
|
if (isSelectedItem || isFirstValidItem) {
|
|
438
|
-
|
|
439
|
-
|
|
380
|
+
setSelectedItem(node);
|
|
381
|
+
if (isFirstValidItem) firstValidItemFoundRef.current = true;
|
|
440
382
|
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
const handleItemLeave =
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
]);
|
|
448
|
-
const itemTextRefCallback = $01b9c$useCallback((node, value, disabled)=>{
|
|
383
|
+
},
|
|
384
|
+
[context.value]
|
|
385
|
+
);
|
|
386
|
+
const handleItemLeave = React.useCallback(() => content?.focus(), [content]);
|
|
387
|
+
const itemTextRefCallback = React.useCallback(
|
|
388
|
+
(node, value, disabled) => {
|
|
449
389
|
const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
|
|
450
|
-
const isSelectedItem = context.value !==
|
|
451
|
-
if (isSelectedItem || isFirstValidItem)
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
390
|
+
const isSelectedItem = context.value !== void 0 && context.value === value;
|
|
391
|
+
if (isSelectedItem || isFirstValidItem) {
|
|
392
|
+
setSelectedItemText(node);
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
[context.value]
|
|
396
|
+
);
|
|
397
|
+
const SelectPosition = position === "popper" ? SelectPopperPosition : SelectItemAlignedPosition;
|
|
398
|
+
const popperContentProps = SelectPosition === SelectPopperPosition ? {
|
|
399
|
+
side,
|
|
400
|
+
sideOffset,
|
|
401
|
+
align,
|
|
402
|
+
alignOffset,
|
|
403
|
+
arrowPadding,
|
|
404
|
+
collisionBoundary,
|
|
405
|
+
collisionPadding,
|
|
406
|
+
sticky,
|
|
407
|
+
hideWhenDetached,
|
|
408
|
+
avoidCollisions
|
|
467
409
|
} : {};
|
|
468
|
-
return
|
|
410
|
+
return /* @__PURE__ */ jsx(
|
|
411
|
+
SelectContentProvider,
|
|
412
|
+
{
|
|
469
413
|
scope: __scopeSelect,
|
|
470
|
-
content: content,
|
|
471
|
-
viewport: viewport,
|
|
472
|
-
onViewportChange: setViewport,
|
|
473
|
-
itemRefCallback: itemRefCallback,
|
|
474
|
-
selectedItem: selectedItem,
|
|
475
|
-
onItemLeave: handleItemLeave,
|
|
476
|
-
itemTextRefCallback: itemTextRefCallback,
|
|
477
|
-
focusSelectedItem: focusSelectedItem,
|
|
478
|
-
selectedItemText: selectedItemText,
|
|
479
|
-
position: position,
|
|
480
|
-
isPositioned: isPositioned,
|
|
481
|
-
searchRef: searchRef
|
|
482
|
-
}, /*#__PURE__*/ $01b9c$createElement($01b9c$RemoveScroll, {
|
|
483
|
-
as: $01b9c$Slot,
|
|
484
|
-
allowPinchZoom: true
|
|
485
|
-
}, /*#__PURE__*/ $01b9c$createElement($01b9c$FocusScope, {
|
|
486
|
-
asChild: true // we make sure we're not trapping once it's been closed
|
|
487
|
-
,
|
|
488
|
-
trapped: context.open,
|
|
489
|
-
onMountAutoFocus: (event)=>{
|
|
490
|
-
// we prevent open autofocus because we manually focus the selected item
|
|
491
|
-
event.preventDefault();
|
|
492
|
-
},
|
|
493
|
-
onUnmountAutoFocus: $01b9c$composeEventHandlers(onCloseAutoFocus, (event)=>{
|
|
494
|
-
var _context$trigger;
|
|
495
|
-
(_context$trigger = context.trigger) === null || _context$trigger === void 0 || _context$trigger.focus({
|
|
496
|
-
preventScroll: true
|
|
497
|
-
});
|
|
498
|
-
event.preventDefault();
|
|
499
|
-
})
|
|
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({
|
|
510
|
-
role: "listbox",
|
|
511
|
-
id: context.contentId,
|
|
512
|
-
"data-state": context.open ? 'open' : 'closed',
|
|
513
|
-
dir: context.dir,
|
|
514
|
-
onContextMenu: (event)=>event.preventDefault()
|
|
515
|
-
}, contentProps, popperContentProps, {
|
|
516
|
-
onPlaced: ()=>setIsPositioned(true)
|
|
517
|
-
,
|
|
518
|
-
ref: composedRefs,
|
|
519
|
-
style: {
|
|
520
|
-
// flex layout so we can place the scroll buttons properly
|
|
521
|
-
display: 'flex',
|
|
522
|
-
flexDirection: 'column',
|
|
523
|
-
// reset the outline by default as the content MAY get focused
|
|
524
|
-
outline: 'none',
|
|
525
|
-
...contentProps.style
|
|
526
|
-
},
|
|
527
|
-
onKeyDown: $01b9c$composeEventHandlers(contentProps.onKeyDown, (event)=>{
|
|
528
|
-
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; // select should not be navigated using tab key so we prevent it
|
|
529
|
-
if (event.key === 'Tab') event.preventDefault();
|
|
530
|
-
if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
|
|
531
|
-
if ([
|
|
532
|
-
'ArrowUp',
|
|
533
|
-
'ArrowDown',
|
|
534
|
-
'Home',
|
|
535
|
-
'End'
|
|
536
|
-
].includes(event.key)) {
|
|
537
|
-
const items = getItems().filter((item)=>!item.disabled
|
|
538
|
-
);
|
|
539
|
-
let candidateNodes = items.map((item)=>item.ref.current
|
|
540
|
-
);
|
|
541
|
-
if ([
|
|
542
|
-
'ArrowUp',
|
|
543
|
-
'End'
|
|
544
|
-
].includes(event.key)) candidateNodes = candidateNodes.slice().reverse();
|
|
545
|
-
if ([
|
|
546
|
-
'ArrowUp',
|
|
547
|
-
'ArrowDown'
|
|
548
|
-
].includes(event.key)) {
|
|
549
|
-
const currentElement = event.target;
|
|
550
|
-
const currentIndex = candidateNodes.indexOf(currentElement);
|
|
551
|
-
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
552
|
-
}
|
|
553
|
-
/**
|
|
554
|
-
* Imperative focus during keydown is risky so we prevent React's batching updates
|
|
555
|
-
* to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
|
|
556
|
-
*/ setTimeout(()=>focusFirst(candidateNodes)
|
|
557
|
-
);
|
|
558
|
-
event.preventDefault();
|
|
559
|
-
}
|
|
560
|
-
})
|
|
561
|
-
}))))));
|
|
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
414
|
content,
|
|
667
415
|
viewport,
|
|
416
|
+
onViewportChange: setViewport,
|
|
417
|
+
itemRefCallback,
|
|
668
418
|
selectedItem,
|
|
419
|
+
onItemLeave: handleItemLeave,
|
|
420
|
+
itemTextRefCallback,
|
|
421
|
+
focusSelectedItem,
|
|
669
422
|
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
423
|
position,
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
424
|
+
isPositioned,
|
|
425
|
+
searchRef,
|
|
426
|
+
children: /* @__PURE__ */ jsx(RemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
|
|
427
|
+
FocusScope,
|
|
428
|
+
{
|
|
429
|
+
asChild: true,
|
|
430
|
+
trapped: context.open,
|
|
431
|
+
onMountAutoFocus: (event) => {
|
|
432
|
+
event.preventDefault();
|
|
433
|
+
},
|
|
434
|
+
onUnmountAutoFocus: composeEventHandlers(onCloseAutoFocus, (event) => {
|
|
435
|
+
context.trigger?.focus({ preventScroll: true });
|
|
436
|
+
event.preventDefault();
|
|
437
|
+
}),
|
|
438
|
+
children: /* @__PURE__ */ jsx(
|
|
439
|
+
DismissableLayer,
|
|
440
|
+
{
|
|
441
|
+
asChild: true,
|
|
442
|
+
disableOutsidePointerEvents: true,
|
|
443
|
+
onEscapeKeyDown,
|
|
444
|
+
onPointerDownOutside,
|
|
445
|
+
onFocusOutside: (event) => event.preventDefault(),
|
|
446
|
+
onDismiss: () => context.onOpenChange(false),
|
|
447
|
+
children: /* @__PURE__ */ jsx(
|
|
448
|
+
SelectPosition,
|
|
449
|
+
{
|
|
450
|
+
role: "listbox",
|
|
451
|
+
id: context.contentId,
|
|
452
|
+
"data-state": context.open ? "open" : "closed",
|
|
453
|
+
dir: context.dir,
|
|
454
|
+
onContextMenu: (event) => event.preventDefault(),
|
|
455
|
+
...contentProps,
|
|
456
|
+
...popperContentProps,
|
|
457
|
+
onPlaced: () => setIsPositioned(true),
|
|
458
|
+
ref: composedRefs,
|
|
459
|
+
style: {
|
|
460
|
+
// flex layout so we can place the scroll buttons properly
|
|
461
|
+
display: "flex",
|
|
462
|
+
flexDirection: "column",
|
|
463
|
+
// reset the outline by default as the content MAY get focused
|
|
464
|
+
outline: "none",
|
|
465
|
+
...contentProps.style
|
|
466
|
+
},
|
|
467
|
+
onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
|
|
468
|
+
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
469
|
+
if (event.key === "Tab") event.preventDefault();
|
|
470
|
+
if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
|
|
471
|
+
if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
|
|
472
|
+
const items = getItems().filter((item) => !item.disabled);
|
|
473
|
+
let candidateNodes = items.map((item) => item.ref.current);
|
|
474
|
+
if (["ArrowUp", "End"].includes(event.key)) {
|
|
475
|
+
candidateNodes = candidateNodes.slice().reverse();
|
|
476
|
+
}
|
|
477
|
+
if (["ArrowUp", "ArrowDown"].includes(event.key)) {
|
|
478
|
+
const currentElement = event.target;
|
|
479
|
+
const currentIndex = candidateNodes.indexOf(currentElement);
|
|
480
|
+
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
481
|
+
}
|
|
482
|
+
setTimeout(() => focusFirst(candidateNodes));
|
|
483
|
+
event.preventDefault();
|
|
484
|
+
}
|
|
485
|
+
})
|
|
486
|
+
}
|
|
487
|
+
)
|
|
488
|
+
}
|
|
489
|
+
)
|
|
490
|
+
}
|
|
491
|
+
) })
|
|
492
|
+
}
|
|
493
|
+
);
|
|
494
|
+
}
|
|
495
|
+
);
|
|
496
|
+
SelectContentImpl.displayName = CONTENT_IMPL_NAME;
|
|
497
|
+
var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
|
|
498
|
+
var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
|
|
499
|
+
const { __scopeSelect, onPlaced, ...popperProps } = props;
|
|
500
|
+
const context = useSelectContext(CONTENT_NAME, __scopeSelect);
|
|
501
|
+
const contentContext = useSelectContentContext(CONTENT_NAME, __scopeSelect);
|
|
502
|
+
const [contentWrapper, setContentWrapper] = React.useState(null);
|
|
503
|
+
const [content, setContent] = React.useState(null);
|
|
504
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
|
|
505
|
+
const getItems = useCollection(__scopeSelect);
|
|
506
|
+
const shouldExpandOnScrollRef = React.useRef(false);
|
|
507
|
+
const shouldRepositionRef = React.useRef(true);
|
|
508
|
+
const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
|
|
509
|
+
const position = React.useCallback(() => {
|
|
510
|
+
if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
|
|
511
|
+
const triggerRect = context.trigger.getBoundingClientRect();
|
|
512
|
+
const contentRect = content.getBoundingClientRect();
|
|
513
|
+
const valueNodeRect = context.valueNode.getBoundingClientRect();
|
|
514
|
+
const itemTextRect = selectedItemText.getBoundingClientRect();
|
|
515
|
+
if (context.dir !== "rtl") {
|
|
516
|
+
const itemTextOffset = itemTextRect.left - contentRect.left;
|
|
517
|
+
const left = valueNodeRect.left - itemTextOffset;
|
|
518
|
+
const leftDelta = triggerRect.left - left;
|
|
519
|
+
const minContentWidth = triggerRect.width + leftDelta;
|
|
520
|
+
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
521
|
+
const rightEdge = window.innerWidth - CONTENT_MARGIN;
|
|
522
|
+
const clampedLeft = clamp(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
|
|
523
|
+
contentWrapper.style.minWidth = minContentWidth + "px";
|
|
524
|
+
contentWrapper.style.left = clampedLeft + "px";
|
|
525
|
+
} else {
|
|
526
|
+
const itemTextOffset = contentRect.right - itemTextRect.right;
|
|
527
|
+
const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
|
|
528
|
+
const rightDelta = window.innerWidth - triggerRect.right - right;
|
|
529
|
+
const minContentWidth = triggerRect.width + rightDelta;
|
|
530
|
+
const contentWidth = Math.max(minContentWidth, contentRect.width);
|
|
531
|
+
const leftEdge = window.innerWidth - CONTENT_MARGIN;
|
|
532
|
+
const clampedRight = clamp(right, [CONTENT_MARGIN, leftEdge - contentWidth]);
|
|
533
|
+
contentWrapper.style.minWidth = minContentWidth + "px";
|
|
534
|
+
contentWrapper.style.right = clampedRight + "px";
|
|
535
|
+
}
|
|
536
|
+
const items = getItems();
|
|
537
|
+
const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
|
|
538
|
+
const itemsHeight = viewport.scrollHeight;
|
|
539
|
+
const contentStyles = window.getComputedStyle(content);
|
|
540
|
+
const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);
|
|
541
|
+
const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);
|
|
542
|
+
const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);
|
|
543
|
+
const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);
|
|
544
|
+
const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
|
|
545
|
+
const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);
|
|
546
|
+
const viewportStyles = window.getComputedStyle(viewport);
|
|
547
|
+
const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);
|
|
548
|
+
const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);
|
|
549
|
+
const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
|
|
550
|
+
const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
|
|
551
|
+
const selectedItemHalfHeight = selectedItem.offsetHeight / 2;
|
|
552
|
+
const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;
|
|
553
|
+
const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
|
|
554
|
+
const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
|
|
555
|
+
const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
|
|
556
|
+
if (willAlignWithoutTopOverflow) {
|
|
557
|
+
const isLastItem = selectedItem === items[items.length - 1].ref.current;
|
|
558
|
+
contentWrapper.style.bottom = "0px";
|
|
559
|
+
const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight;
|
|
560
|
+
const clampedTriggerMiddleToBottomEdge = Math.max(
|
|
561
|
+
triggerMiddleToBottomEdge,
|
|
562
|
+
selectedItemHalfHeight + // viewport might have padding bottom, include it to avoid a scrollable viewport
|
|
563
|
+
(isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth
|
|
564
|
+
);
|
|
565
|
+
const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
|
|
566
|
+
contentWrapper.style.height = height + "px";
|
|
567
|
+
} else {
|
|
568
|
+
const isFirstItem = selectedItem === items[0].ref.current;
|
|
569
|
+
contentWrapper.style.top = "0px";
|
|
570
|
+
const clampedTopEdgeToTriggerMiddle = Math.max(
|
|
571
|
+
topEdgeToTriggerMiddle,
|
|
572
|
+
contentBorderTopWidth + viewport.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
|
|
573
|
+
(isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight
|
|
574
|
+
);
|
|
575
|
+
const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
|
|
576
|
+
contentWrapper.style.height = height + "px";
|
|
577
|
+
viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;
|
|
578
|
+
}
|
|
579
|
+
contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;
|
|
580
|
+
contentWrapper.style.minHeight = minContentHeight + "px";
|
|
581
|
+
contentWrapper.style.maxHeight = availableHeight + "px";
|
|
582
|
+
onPlaced?.();
|
|
583
|
+
requestAnimationFrame(() => shouldExpandOnScrollRef.current = true);
|
|
584
|
+
}
|
|
585
|
+
}, [
|
|
586
|
+
getItems,
|
|
587
|
+
context.trigger,
|
|
588
|
+
context.valueNode,
|
|
589
|
+
contentWrapper,
|
|
590
|
+
content,
|
|
591
|
+
viewport,
|
|
592
|
+
selectedItem,
|
|
593
|
+
selectedItemText,
|
|
594
|
+
context.dir,
|
|
595
|
+
onPlaced
|
|
596
|
+
]);
|
|
597
|
+
useLayoutEffect(() => position(), [position]);
|
|
598
|
+
const [contentZIndex, setContentZIndex] = React.useState();
|
|
599
|
+
useLayoutEffect(() => {
|
|
600
|
+
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
|
|
601
|
+
}, [content]);
|
|
602
|
+
const handleScrollButtonChange = React.useCallback(
|
|
603
|
+
(node) => {
|
|
604
|
+
if (node && shouldRepositionRef.current === true) {
|
|
605
|
+
position();
|
|
606
|
+
focusSelectedItem?.();
|
|
607
|
+
shouldRepositionRef.current = false;
|
|
608
|
+
}
|
|
609
|
+
},
|
|
610
|
+
[position, focusSelectedItem]
|
|
611
|
+
);
|
|
612
|
+
return /* @__PURE__ */ jsx(
|
|
613
|
+
SelectViewportProvider,
|
|
614
|
+
{
|
|
615
|
+
scope: __scopeSelect,
|
|
616
|
+
contentWrapper,
|
|
617
|
+
shouldExpandOnScrollRef,
|
|
618
|
+
onScrollButtonChange: handleScrollButtonChange,
|
|
619
|
+
children: /* @__PURE__ */ jsx(
|
|
620
|
+
"div",
|
|
621
|
+
{
|
|
622
|
+
ref: setContentWrapper,
|
|
623
|
+
style: {
|
|
624
|
+
display: "flex",
|
|
625
|
+
flexDirection: "column",
|
|
626
|
+
position: "fixed",
|
|
707
627
|
zIndex: contentZIndex
|
|
628
|
+
},
|
|
629
|
+
children: /* @__PURE__ */ jsx(
|
|
630
|
+
Primitive.div,
|
|
631
|
+
{
|
|
632
|
+
...popperProps,
|
|
633
|
+
ref: composedRefs,
|
|
634
|
+
style: {
|
|
635
|
+
// When we get the height of the content, it includes borders. If we were to set
|
|
636
|
+
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
637
|
+
boxSizing: "border-box",
|
|
638
|
+
// We need to ensure the content doesn't get taller than the wrapper
|
|
639
|
+
maxHeight: "100%",
|
|
640
|
+
...popperProps.style
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
)
|
|
708
644
|
}
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
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
|
|
645
|
+
)
|
|
646
|
+
}
|
|
647
|
+
);
|
|
723
648
|
});
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
const
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
649
|
+
SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
|
|
650
|
+
var POPPER_POSITION_NAME = "SelectPopperPosition";
|
|
651
|
+
var SelectPopperPosition = React.forwardRef((props, forwardedRef) => {
|
|
652
|
+
const {
|
|
653
|
+
__scopeSelect,
|
|
654
|
+
align = "start",
|
|
655
|
+
collisionPadding = CONTENT_MARGIN,
|
|
656
|
+
...popperProps
|
|
657
|
+
} = props;
|
|
658
|
+
const popperScope = usePopperScope(__scopeSelect);
|
|
659
|
+
return /* @__PURE__ */ jsx(
|
|
660
|
+
PopperPrimitive.Content,
|
|
661
|
+
{
|
|
662
|
+
...popperScope,
|
|
663
|
+
...popperProps,
|
|
664
|
+
ref: forwardedRef,
|
|
665
|
+
align,
|
|
666
|
+
collisionPadding,
|
|
667
|
+
style: {
|
|
668
|
+
// Ensure border-box for floating-ui calculations
|
|
669
|
+
boxSizing: "border-box",
|
|
670
|
+
...popperProps.style,
|
|
671
|
+
// re-namespace exposed content custom properties
|
|
672
|
+
...{
|
|
673
|
+
"--radix-select-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
674
|
+
"--radix-select-content-available-width": "var(--radix-popper-available-width)",
|
|
675
|
+
"--radix-select-content-available-height": "var(--radix-popper-available-height)",
|
|
676
|
+
"--radix-select-trigger-width": "var(--radix-popper-anchor-width)",
|
|
677
|
+
"--radix-select-trigger-height": "var(--radix-popper-anchor-height)"
|
|
743
678
|
}
|
|
744
|
-
|
|
745
|
-
}
|
|
746
|
-
|
|
747
|
-
displayName: $cc7e05a45900e73f$var$POPPER_POSITION_NAME
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
);
|
|
748
682
|
});
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
const { __scopeSelect
|
|
755
|
-
const contentContext =
|
|
756
|
-
const viewportContext =
|
|
757
|
-
const composedRefs =
|
|
758
|
-
const prevScrollTopRef =
|
|
759
|
-
return
|
|
760
|
-
|
|
683
|
+
SelectPopperPosition.displayName = POPPER_POSITION_NAME;
|
|
684
|
+
var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME, {});
|
|
685
|
+
var VIEWPORT_NAME = "SelectViewport";
|
|
686
|
+
var SelectViewport = React.forwardRef(
|
|
687
|
+
(props, forwardedRef) => {
|
|
688
|
+
const { __scopeSelect, nonce, ...viewportProps } = props;
|
|
689
|
+
const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
|
|
690
|
+
const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
|
|
691
|
+
const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
|
|
692
|
+
const prevScrollTopRef = React.useRef(0);
|
|
693
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
694
|
+
/* @__PURE__ */ jsx(
|
|
695
|
+
"style",
|
|
696
|
+
{
|
|
697
|
+
dangerouslySetInnerHTML: {
|
|
761
698
|
__html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
699
|
+
},
|
|
700
|
+
nonce
|
|
701
|
+
}
|
|
702
|
+
),
|
|
703
|
+
/* @__PURE__ */ jsx(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx(
|
|
704
|
+
Primitive.div,
|
|
705
|
+
{
|
|
706
|
+
"data-radix-select-viewport": "",
|
|
707
|
+
role: "presentation",
|
|
708
|
+
...viewportProps,
|
|
709
|
+
ref: composedRefs,
|
|
710
|
+
style: {
|
|
772
711
|
// we use position: 'relative' here on the `viewport` so that when we call
|
|
773
712
|
// `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
|
|
774
713
|
// (independent of the scrollUpButton).
|
|
775
|
-
position:
|
|
714
|
+
position: "relative",
|
|
776
715
|
flex: 1,
|
|
777
|
-
overflow:
|
|
716
|
+
overflow: "auto",
|
|
778
717
|
...viewportProps.style
|
|
779
|
-
|
|
780
|
-
|
|
718
|
+
},
|
|
719
|
+
onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
|
|
781
720
|
const viewport = event.currentTarget;
|
|
782
|
-
const { contentWrapper
|
|
783
|
-
if (shouldExpandOnScrollRef
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
}
|
|
721
|
+
const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;
|
|
722
|
+
if (shouldExpandOnScrollRef?.current && contentWrapper) {
|
|
723
|
+
const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
|
|
724
|
+
if (scrolledBy > 0) {
|
|
725
|
+
const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
|
|
726
|
+
const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
|
|
727
|
+
const cssHeight = parseFloat(contentWrapper.style.height);
|
|
728
|
+
const prevHeight = Math.max(cssMinHeight, cssHeight);
|
|
729
|
+
if (prevHeight < availableHeight) {
|
|
730
|
+
const nextHeight = prevHeight + scrolledBy;
|
|
731
|
+
const clampedNextHeight = Math.min(availableHeight, nextHeight);
|
|
732
|
+
const heightDiff = nextHeight - clampedNextHeight;
|
|
733
|
+
contentWrapper.style.height = clampedNextHeight + "px";
|
|
734
|
+
if (contentWrapper.style.bottom === "0px") {
|
|
735
|
+
viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
|
|
736
|
+
contentWrapper.style.justifyContent = "flex-end";
|
|
737
|
+
}
|
|
800
738
|
}
|
|
739
|
+
}
|
|
801
740
|
}
|
|
802
741
|
prevScrollTopRef.current = viewport.scrollTop;
|
|
803
|
-
|
|
804
|
-
}))));
|
|
805
|
-
});
|
|
806
|
-
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$9ed6e7b40248d36d, {
|
|
807
|
-
displayName: $cc7e05a45900e73f$var$VIEWPORT_NAME
|
|
808
|
-
});
|
|
809
|
-
/* -------------------------------------------------------------------------------------------------
|
|
810
|
-
* SelectGroup
|
|
811
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$GROUP_NAME = 'SelectGroup';
|
|
812
|
-
const [$cc7e05a45900e73f$var$SelectGroupContextProvider, $cc7e05a45900e73f$var$useSelectGroupContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$GROUP_NAME);
|
|
813
|
-
const $cc7e05a45900e73f$export$ee25a334c55de1f4 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
814
|
-
const { __scopeSelect: __scopeSelect , ...groupProps } = props;
|
|
815
|
-
const groupId = $01b9c$useId();
|
|
816
|
-
return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectGroupContextProvider, {
|
|
817
|
-
scope: __scopeSelect,
|
|
818
|
-
id: groupId
|
|
819
|
-
}, /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.div, $01b9c$babelruntimehelpersesmextends({
|
|
820
|
-
role: "group",
|
|
821
|
-
"aria-labelledby": groupId
|
|
822
|
-
}, groupProps, {
|
|
823
|
-
ref: forwardedRef
|
|
824
|
-
})));
|
|
825
|
-
});
|
|
826
|
-
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$ee25a334c55de1f4, {
|
|
827
|
-
displayName: $cc7e05a45900e73f$var$GROUP_NAME
|
|
828
|
-
});
|
|
829
|
-
/* -------------------------------------------------------------------------------------------------
|
|
830
|
-
* SelectLabel
|
|
831
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$LABEL_NAME = 'SelectLabel';
|
|
832
|
-
const $cc7e05a45900e73f$export$f67338d29bd972f8 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
833
|
-
const { __scopeSelect: __scopeSelect , ...labelProps } = props;
|
|
834
|
-
const groupContext = $cc7e05a45900e73f$var$useSelectGroupContext($cc7e05a45900e73f$var$LABEL_NAME, __scopeSelect);
|
|
835
|
-
return /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.div, $01b9c$babelruntimehelpersesmextends({
|
|
836
|
-
id: groupContext.id
|
|
837
|
-
}, labelProps, {
|
|
838
|
-
ref: forwardedRef
|
|
839
|
-
}));
|
|
840
|
-
});
|
|
841
|
-
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$f67338d29bd972f8, {
|
|
842
|
-
displayName: $cc7e05a45900e73f$var$LABEL_NAME
|
|
843
|
-
});
|
|
844
|
-
/* -------------------------------------------------------------------------------------------------
|
|
845
|
-
* SelectItem
|
|
846
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_NAME = 'SelectItem';
|
|
847
|
-
const [$cc7e05a45900e73f$var$SelectItemContextProvider, $cc7e05a45900e73f$var$useSelectItemContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$ITEM_NAME);
|
|
848
|
-
const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
849
|
-
const { __scopeSelect: __scopeSelect , value: value , disabled: disabled = false , textValue: textValueProp , ...itemProps } = props;
|
|
850
|
-
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
|
|
851
|
-
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_NAME, __scopeSelect);
|
|
852
|
-
const isSelected = context.value === value;
|
|
853
|
-
const [textValue, setTextValue] = $01b9c$useState(textValueProp !== null && textValueProp !== void 0 ? textValueProp : '');
|
|
854
|
-
const [isFocused, setIsFocused] = $01b9c$useState(false);
|
|
855
|
-
const composedRefs = $01b9c$useComposedRefs(forwardedRef, (node)=>{
|
|
856
|
-
var _contentContext$itemR;
|
|
857
|
-
return (_contentContext$itemR = contentContext.itemRefCallback) === null || _contentContext$itemR === void 0 ? void 0 : _contentContext$itemR.call(contentContext, node, value, disabled);
|
|
858
|
-
});
|
|
859
|
-
const textId = $01b9c$useId();
|
|
860
|
-
const handleSelect = ()=>{
|
|
861
|
-
if (!disabled) {
|
|
862
|
-
context.onValueChange(value);
|
|
863
|
-
context.onOpenChange(false);
|
|
742
|
+
})
|
|
864
743
|
}
|
|
744
|
+
) })
|
|
745
|
+
] });
|
|
746
|
+
}
|
|
747
|
+
);
|
|
748
|
+
SelectViewport.displayName = VIEWPORT_NAME;
|
|
749
|
+
var GROUP_NAME = "SelectGroup";
|
|
750
|
+
var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
|
|
751
|
+
var SelectGroup = React.forwardRef(
|
|
752
|
+
(props, forwardedRef) => {
|
|
753
|
+
const { __scopeSelect, ...groupProps } = props;
|
|
754
|
+
const groupId = useId();
|
|
755
|
+
return /* @__PURE__ */ jsx(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
|
|
756
|
+
}
|
|
757
|
+
);
|
|
758
|
+
SelectGroup.displayName = GROUP_NAME;
|
|
759
|
+
var LABEL_NAME = "SelectLabel";
|
|
760
|
+
var SelectLabel = React.forwardRef(
|
|
761
|
+
(props, forwardedRef) => {
|
|
762
|
+
const { __scopeSelect, ...labelProps } = props;
|
|
763
|
+
const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
|
|
764
|
+
return /* @__PURE__ */ jsx(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
|
|
765
|
+
}
|
|
766
|
+
);
|
|
767
|
+
SelectLabel.displayName = LABEL_NAME;
|
|
768
|
+
var ITEM_NAME = "SelectItem";
|
|
769
|
+
var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
|
|
770
|
+
var SelectItem = React.forwardRef(
|
|
771
|
+
(props, forwardedRef) => {
|
|
772
|
+
const {
|
|
773
|
+
__scopeSelect,
|
|
774
|
+
value,
|
|
775
|
+
disabled = false,
|
|
776
|
+
textValue: textValueProp,
|
|
777
|
+
...itemProps
|
|
778
|
+
} = props;
|
|
779
|
+
const context = useSelectContext(ITEM_NAME, __scopeSelect);
|
|
780
|
+
const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
|
|
781
|
+
const isSelected = context.value === value;
|
|
782
|
+
const [textValue, setTextValue] = React.useState(textValueProp ?? "");
|
|
783
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
784
|
+
const composedRefs = useComposedRefs(
|
|
785
|
+
forwardedRef,
|
|
786
|
+
(node) => contentContext.itemRefCallback?.(node, value, disabled)
|
|
787
|
+
);
|
|
788
|
+
const textId = useId();
|
|
789
|
+
const handleSelect = () => {
|
|
790
|
+
if (!disabled) {
|
|
791
|
+
context.onValueChange(value);
|
|
792
|
+
context.onOpenChange(false);
|
|
793
|
+
}
|
|
865
794
|
};
|
|
866
|
-
if (value ===
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
setTextValue((prevTextValue)=>{
|
|
875
|
-
var _node$textContent;
|
|
876
|
-
return prevTextValue || ((_node$textContent = node === null || node === void 0 ? void 0 : node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '').trim();
|
|
877
|
-
});
|
|
878
|
-
}, [])
|
|
879
|
-
}, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.ItemSlot, {
|
|
795
|
+
if (value === "") {
|
|
796
|
+
throw new Error(
|
|
797
|
+
"A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
|
|
798
|
+
);
|
|
799
|
+
}
|
|
800
|
+
return /* @__PURE__ */ jsx(
|
|
801
|
+
SelectItemContextProvider,
|
|
802
|
+
{
|
|
880
803
|
scope: __scopeSelect,
|
|
881
|
-
value
|
|
882
|
-
disabled
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
})
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
,
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
const
|
|
946
|
-
const
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
/*
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
return ()=>viewport.removeEventListener('scroll', handleScroll)
|
|
1008
|
-
;
|
|
1009
|
-
}
|
|
1010
|
-
}, [
|
|
1011
|
-
contentContext.viewport,
|
|
1012
|
-
contentContext.isPositioned
|
|
1013
|
-
]);
|
|
1014
|
-
return canScrollUp1 ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, $01b9c$babelruntimehelpersesmextends({}, props, {
|
|
1015
|
-
ref: composedRefs,
|
|
1016
|
-
onAutoScroll: ()=>{
|
|
1017
|
-
const { viewport: viewport , selectedItem: selectedItem } = contentContext;
|
|
1018
|
-
if (viewport && selectedItem) viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
|
|
804
|
+
value,
|
|
805
|
+
disabled,
|
|
806
|
+
textId,
|
|
807
|
+
isSelected,
|
|
808
|
+
onItemTextChange: React.useCallback((node) => {
|
|
809
|
+
setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
|
|
810
|
+
}, []),
|
|
811
|
+
children: /* @__PURE__ */ jsx(
|
|
812
|
+
Collection.ItemSlot,
|
|
813
|
+
{
|
|
814
|
+
scope: __scopeSelect,
|
|
815
|
+
value,
|
|
816
|
+
disabled,
|
|
817
|
+
textValue,
|
|
818
|
+
children: /* @__PURE__ */ jsx(
|
|
819
|
+
Primitive.div,
|
|
820
|
+
{
|
|
821
|
+
role: "option",
|
|
822
|
+
"aria-labelledby": textId,
|
|
823
|
+
"data-highlighted": isFocused ? "" : void 0,
|
|
824
|
+
"aria-selected": isSelected && isFocused,
|
|
825
|
+
"data-state": isSelected ? "checked" : "unchecked",
|
|
826
|
+
"aria-disabled": disabled || void 0,
|
|
827
|
+
"data-disabled": disabled ? "" : void 0,
|
|
828
|
+
tabIndex: disabled ? void 0 : -1,
|
|
829
|
+
...itemProps,
|
|
830
|
+
ref: composedRefs,
|
|
831
|
+
onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
|
|
832
|
+
onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
|
|
833
|
+
onPointerUp: composeEventHandlers(itemProps.onPointerUp, handleSelect),
|
|
834
|
+
onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => {
|
|
835
|
+
if (disabled) {
|
|
836
|
+
contentContext.onItemLeave?.();
|
|
837
|
+
} else {
|
|
838
|
+
event.currentTarget.focus({ preventScroll: true });
|
|
839
|
+
}
|
|
840
|
+
}),
|
|
841
|
+
onPointerLeave: composeEventHandlers(itemProps.onPointerLeave, (event) => {
|
|
842
|
+
if (event.currentTarget === document.activeElement) {
|
|
843
|
+
contentContext.onItemLeave?.();
|
|
844
|
+
}
|
|
845
|
+
}),
|
|
846
|
+
onKeyDown: composeEventHandlers(itemProps.onKeyDown, (event) => {
|
|
847
|
+
const isTypingAhead = contentContext.searchRef?.current !== "";
|
|
848
|
+
if (isTypingAhead && event.key === " ") return;
|
|
849
|
+
if (SELECTION_KEYS.includes(event.key)) handleSelect();
|
|
850
|
+
if (event.key === " ") event.preventDefault();
|
|
851
|
+
})
|
|
852
|
+
}
|
|
853
|
+
)
|
|
854
|
+
}
|
|
855
|
+
)
|
|
856
|
+
}
|
|
857
|
+
);
|
|
858
|
+
}
|
|
859
|
+
);
|
|
860
|
+
SelectItem.displayName = ITEM_NAME;
|
|
861
|
+
var ITEM_TEXT_NAME = "SelectItemText";
|
|
862
|
+
var SelectItemText = React.forwardRef(
|
|
863
|
+
(props, forwardedRef) => {
|
|
864
|
+
const { __scopeSelect, className, style, ...itemTextProps } = props;
|
|
865
|
+
const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
866
|
+
const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
867
|
+
const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
868
|
+
const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
|
|
869
|
+
const [itemTextNode, setItemTextNode] = React.useState(null);
|
|
870
|
+
const composedRefs = useComposedRefs(
|
|
871
|
+
forwardedRef,
|
|
872
|
+
(node) => setItemTextNode(node),
|
|
873
|
+
itemContext.onItemTextChange,
|
|
874
|
+
(node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)
|
|
875
|
+
);
|
|
876
|
+
const textContent = itemTextNode?.textContent;
|
|
877
|
+
const nativeOption = React.useMemo(
|
|
878
|
+
() => /* @__PURE__ */ jsx("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
|
|
879
|
+
[itemContext.disabled, itemContext.value, textContent]
|
|
880
|
+
);
|
|
881
|
+
const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
|
|
882
|
+
useLayoutEffect(() => {
|
|
883
|
+
onNativeOptionAdd(nativeOption);
|
|
884
|
+
return () => onNativeOptionRemove(nativeOption);
|
|
885
|
+
}, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
|
|
886
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
887
|
+
/* @__PURE__ */ jsx(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
|
|
888
|
+
itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null
|
|
889
|
+
] });
|
|
890
|
+
}
|
|
891
|
+
);
|
|
892
|
+
SelectItemText.displayName = ITEM_TEXT_NAME;
|
|
893
|
+
var ITEM_INDICATOR_NAME = "SelectItemIndicator";
|
|
894
|
+
var SelectItemIndicator = React.forwardRef(
|
|
895
|
+
(props, forwardedRef) => {
|
|
896
|
+
const { __scopeSelect, ...itemIndicatorProps } = props;
|
|
897
|
+
const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
|
|
898
|
+
return itemContext.isSelected ? /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
|
|
899
|
+
}
|
|
900
|
+
);
|
|
901
|
+
SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
|
|
902
|
+
var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
|
|
903
|
+
var SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
|
|
904
|
+
const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
905
|
+
const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
|
|
906
|
+
const [canScrollUp, setCanScrollUp] = React.useState(false);
|
|
907
|
+
const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
908
|
+
useLayoutEffect(() => {
|
|
909
|
+
if (contentContext.viewport && contentContext.isPositioned) {
|
|
910
|
+
let handleScroll2 = function() {
|
|
911
|
+
const canScrollUp2 = viewport.scrollTop > 0;
|
|
912
|
+
setCanScrollUp(canScrollUp2);
|
|
913
|
+
};
|
|
914
|
+
var handleScroll = handleScroll2;
|
|
915
|
+
const viewport = contentContext.viewport;
|
|
916
|
+
handleScroll2();
|
|
917
|
+
viewport.addEventListener("scroll", handleScroll2);
|
|
918
|
+
return () => viewport.removeEventListener("scroll", handleScroll2);
|
|
919
|
+
}
|
|
920
|
+
}, [contentContext.viewport, contentContext.isPositioned]);
|
|
921
|
+
return canScrollUp ? /* @__PURE__ */ jsx(
|
|
922
|
+
SelectScrollButtonImpl,
|
|
923
|
+
{
|
|
924
|
+
...props,
|
|
925
|
+
ref: composedRefs,
|
|
926
|
+
onAutoScroll: () => {
|
|
927
|
+
const { viewport, selectedItem } = contentContext;
|
|
928
|
+
if (viewport && selectedItem) {
|
|
929
|
+
viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
|
|
1019
930
|
}
|
|
1020
|
-
|
|
1021
|
-
}
|
|
1022
|
-
|
|
1023
|
-
displayName: $cc7e05a45900e73f$var$SCROLL_UP_BUTTON_NAME
|
|
931
|
+
}
|
|
932
|
+
}
|
|
933
|
+
) : null;
|
|
1024
934
|
});
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
const
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
if (viewport && selectedItem) viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
|
|
935
|
+
SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
|
|
936
|
+
var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
|
|
937
|
+
var SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
|
|
938
|
+
const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
939
|
+
const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
|
|
940
|
+
const [canScrollDown, setCanScrollDown] = React.useState(false);
|
|
941
|
+
const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
|
|
942
|
+
useLayoutEffect(() => {
|
|
943
|
+
if (contentContext.viewport && contentContext.isPositioned) {
|
|
944
|
+
let handleScroll2 = function() {
|
|
945
|
+
const maxScroll = viewport.scrollHeight - viewport.clientHeight;
|
|
946
|
+
const canScrollDown2 = Math.ceil(viewport.scrollTop) < maxScroll;
|
|
947
|
+
setCanScrollDown(canScrollDown2);
|
|
948
|
+
};
|
|
949
|
+
var handleScroll = handleScroll2;
|
|
950
|
+
const viewport = contentContext.viewport;
|
|
951
|
+
handleScroll2();
|
|
952
|
+
viewport.addEventListener("scroll", handleScroll2);
|
|
953
|
+
return () => viewport.removeEventListener("scroll", handleScroll2);
|
|
954
|
+
}
|
|
955
|
+
}, [contentContext.viewport, contentContext.isPositioned]);
|
|
956
|
+
return canScrollDown ? /* @__PURE__ */ jsx(
|
|
957
|
+
SelectScrollButtonImpl,
|
|
958
|
+
{
|
|
959
|
+
...props,
|
|
960
|
+
ref: composedRefs,
|
|
961
|
+
onAutoScroll: () => {
|
|
962
|
+
const { viewport, selectedItem } = contentContext;
|
|
963
|
+
if (viewport && selectedItem) {
|
|
964
|
+
viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
|
|
1056
965
|
}
|
|
1057
|
-
|
|
1058
|
-
}
|
|
1059
|
-
|
|
1060
|
-
displayName: $cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME
|
|
966
|
+
}
|
|
967
|
+
}
|
|
968
|
+
) : null;
|
|
1061
969
|
});
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
970
|
+
SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
|
|
971
|
+
var SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
|
|
972
|
+
const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
|
|
973
|
+
const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
|
|
974
|
+
const autoScrollTimerRef = React.useRef(null);
|
|
975
|
+
const getItems = useCollection(__scopeSelect);
|
|
976
|
+
const clearAutoScrollTimer = React.useCallback(() => {
|
|
977
|
+
if (autoScrollTimerRef.current !== null) {
|
|
978
|
+
window.clearInterval(autoScrollTimerRef.current);
|
|
979
|
+
autoScrollTimerRef.current = null;
|
|
980
|
+
}
|
|
981
|
+
}, []);
|
|
982
|
+
React.useEffect(() => {
|
|
983
|
+
return () => clearAutoScrollTimer();
|
|
984
|
+
}, [clearAutoScrollTimer]);
|
|
985
|
+
useLayoutEffect(() => {
|
|
986
|
+
const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
|
|
987
|
+
activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
|
|
988
|
+
}, [getItems]);
|
|
989
|
+
return /* @__PURE__ */ jsx(
|
|
990
|
+
Primitive.div,
|
|
991
|
+
{
|
|
992
|
+
"aria-hidden": true,
|
|
993
|
+
...scrollIndicatorProps,
|
|
994
|
+
ref: forwardedRef,
|
|
995
|
+
style: { flexShrink: 0, ...scrollIndicatorProps.style },
|
|
996
|
+
onPointerDown: composeEventHandlers(scrollIndicatorProps.onPointerDown, () => {
|
|
997
|
+
if (autoScrollTimerRef.current === null) {
|
|
998
|
+
autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
1071
999
|
}
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
clearAutoScrollTimer
|
|
1078
|
-
]); // When the viewport becomes scrollable on either side, the relevant scroll button will mount.
|
|
1079
|
-
// Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)
|
|
1080
|
-
// the viewport, potentially causing the active item to now be partially out of view.
|
|
1081
|
-
// We re-run the `scrollIntoView` logic to make sure it stays within the viewport.
|
|
1082
|
-
$01b9c$useLayoutEffect(()=>{
|
|
1083
|
-
var _activeItem$ref$curre;
|
|
1084
|
-
const activeItem = getItems().find((item)=>item.ref.current === document.activeElement
|
|
1085
|
-
);
|
|
1086
|
-
activeItem === null || activeItem === void 0 || (_activeItem$ref$curre = activeItem.ref.current) === null || _activeItem$ref$curre === void 0 || _activeItem$ref$curre.scrollIntoView({
|
|
1087
|
-
block: 'nearest'
|
|
1088
|
-
});
|
|
1089
|
-
}, [
|
|
1090
|
-
getItems
|
|
1091
|
-
]);
|
|
1092
|
-
return /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.div, $01b9c$babelruntimehelpersesmextends({
|
|
1093
|
-
"aria-hidden": true
|
|
1094
|
-
}, scrollIndicatorProps, {
|
|
1095
|
-
ref: forwardedRef,
|
|
1096
|
-
style: {
|
|
1097
|
-
flexShrink: 0,
|
|
1098
|
-
...scrollIndicatorProps.style
|
|
1099
|
-
},
|
|
1100
|
-
onPointerDown: $01b9c$composeEventHandlers(scrollIndicatorProps.onPointerDown, ()=>{
|
|
1101
|
-
if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
1102
|
-
}),
|
|
1103
|
-
onPointerMove: $01b9c$composeEventHandlers(scrollIndicatorProps.onPointerMove, ()=>{
|
|
1104
|
-
var _contentContext$onIte3;
|
|
1105
|
-
(_contentContext$onIte3 = contentContext.onItemLeave) === null || _contentContext$onIte3 === void 0 || _contentContext$onIte3.call(contentContext);
|
|
1106
|
-
if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
1107
|
-
}),
|
|
1108
|
-
onPointerLeave: $01b9c$composeEventHandlers(scrollIndicatorProps.onPointerLeave, ()=>{
|
|
1109
|
-
clearAutoScrollTimer();
|
|
1110
|
-
})
|
|
1111
|
-
}));
|
|
1112
|
-
});
|
|
1113
|
-
/* -------------------------------------------------------------------------------------------------
|
|
1114
|
-
* SelectSeparator
|
|
1115
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SEPARATOR_NAME = 'SelectSeparator';
|
|
1116
|
-
const $cc7e05a45900e73f$export$eba4b1df07cb1d3 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
1117
|
-
const { __scopeSelect: __scopeSelect , ...separatorProps } = props;
|
|
1118
|
-
return /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.div, $01b9c$babelruntimehelpersesmextends({
|
|
1119
|
-
"aria-hidden": true
|
|
1120
|
-
}, separatorProps, {
|
|
1121
|
-
ref: forwardedRef
|
|
1122
|
-
}));
|
|
1123
|
-
});
|
|
1124
|
-
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$eba4b1df07cb1d3, {
|
|
1125
|
-
displayName: $cc7e05a45900e73f$var$SEPARATOR_NAME
|
|
1126
|
-
});
|
|
1127
|
-
/* -------------------------------------------------------------------------------------------------
|
|
1128
|
-
* SelectArrow
|
|
1129
|
-
* -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ARROW_NAME = 'SelectArrow';
|
|
1130
|
-
const $cc7e05a45900e73f$export$314f4cb8f8099628 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
1131
|
-
const { __scopeSelect: __scopeSelect , ...arrowProps } = props;
|
|
1132
|
-
const popperScope = $cc7e05a45900e73f$var$usePopperScope(__scopeSelect);
|
|
1133
|
-
const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ARROW_NAME, __scopeSelect);
|
|
1134
|
-
const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ARROW_NAME, __scopeSelect);
|
|
1135
|
-
return context.open && contentContext.position === 'popper' ? /*#__PURE__*/ $01b9c$createElement($01b9c$Arrow, $01b9c$babelruntimehelpersesmextends({}, popperScope, arrowProps, {
|
|
1136
|
-
ref: forwardedRef
|
|
1137
|
-
})) : null;
|
|
1138
|
-
});
|
|
1139
|
-
/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$314f4cb8f8099628, {
|
|
1140
|
-
displayName: $cc7e05a45900e73f$var$ARROW_NAME
|
|
1141
|
-
});
|
|
1142
|
-
/* -----------------------------------------------------------------------------------------------*/ function $cc7e05a45900e73f$var$shouldShowPlaceholder(value) {
|
|
1143
|
-
return value === '' || value === undefined;
|
|
1144
|
-
}
|
|
1145
|
-
const $cc7e05a45900e73f$var$BubbleSelect = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
|
|
1146
|
-
const { value: value , ...selectProps } = props;
|
|
1147
|
-
const ref = $01b9c$useRef(null);
|
|
1148
|
-
const composedRefs = $01b9c$useComposedRefs(forwardedRef, ref);
|
|
1149
|
-
const prevValue = $01b9c$usePrevious(value); // Bubble value change to parents (e.g form change event)
|
|
1150
|
-
$01b9c$useEffect(()=>{
|
|
1151
|
-
const select = ref.current;
|
|
1152
|
-
const selectProto = window.HTMLSelectElement.prototype;
|
|
1153
|
-
const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value');
|
|
1154
|
-
const setValue = descriptor.set;
|
|
1155
|
-
if (prevValue !== value && setValue) {
|
|
1156
|
-
const event = new Event('change', {
|
|
1157
|
-
bubbles: true
|
|
1158
|
-
});
|
|
1159
|
-
setValue.call(select, value);
|
|
1160
|
-
select.dispatchEvent(event);
|
|
1000
|
+
}),
|
|
1001
|
+
onPointerMove: composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {
|
|
1002
|
+
contentContext.onItemLeave?.();
|
|
1003
|
+
if (autoScrollTimerRef.current === null) {
|
|
1004
|
+
autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
|
|
1161
1005
|
}
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
* as possible.
|
|
1169
|
-
*
|
|
1170
|
-
* We purposefully do not add the `value` attribute here to allow the value
|
|
1171
|
-
* to be set programatically and bubble to any parent form `onChange` event.
|
|
1172
|
-
* Adding the `value` will cause React to consider the programatic
|
|
1173
|
-
* dispatch a duplicate and it will get swallowed.
|
|
1174
|
-
*
|
|
1175
|
-
* We use `VisuallyHidden` rather than `display: "none"` because Safari autofill
|
|
1176
|
-
* won't work otherwise.
|
|
1177
|
-
*/ return /*#__PURE__*/ $01b9c$createElement($01b9c$VisuallyHidden, {
|
|
1178
|
-
asChild: true
|
|
1179
|
-
}, /*#__PURE__*/ $01b9c$createElement("select", $01b9c$babelruntimehelpersesmextends({}, selectProps, {
|
|
1180
|
-
ref: composedRefs,
|
|
1181
|
-
defaultValue: value
|
|
1182
|
-
})));
|
|
1006
|
+
}),
|
|
1007
|
+
onPointerLeave: composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {
|
|
1008
|
+
clearAutoScrollTimer();
|
|
1009
|
+
})
|
|
1010
|
+
}
|
|
1011
|
+
);
|
|
1183
1012
|
});
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
const
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1013
|
+
var SEPARATOR_NAME = "SelectSeparator";
|
|
1014
|
+
var SelectSeparator = React.forwardRef(
|
|
1015
|
+
(props, forwardedRef) => {
|
|
1016
|
+
const { __scopeSelect, ...separatorProps } = props;
|
|
1017
|
+
return /* @__PURE__ */ jsx(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
|
|
1018
|
+
}
|
|
1019
|
+
);
|
|
1020
|
+
SelectSeparator.displayName = SEPARATOR_NAME;
|
|
1021
|
+
var ARROW_NAME = "SelectArrow";
|
|
1022
|
+
var SelectArrow = React.forwardRef(
|
|
1023
|
+
(props, forwardedRef) => {
|
|
1024
|
+
const { __scopeSelect, ...arrowProps } = props;
|
|
1025
|
+
const popperScope = usePopperScope(__scopeSelect);
|
|
1026
|
+
const context = useSelectContext(ARROW_NAME, __scopeSelect);
|
|
1027
|
+
const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
|
|
1028
|
+
return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
|
|
1029
|
+
}
|
|
1030
|
+
);
|
|
1031
|
+
SelectArrow.displayName = ARROW_NAME;
|
|
1032
|
+
function shouldShowPlaceholder(value) {
|
|
1033
|
+
return value === "" || value === void 0;
|
|
1034
|
+
}
|
|
1035
|
+
var BubbleSelect = React.forwardRef(
|
|
1036
|
+
(props, forwardedRef) => {
|
|
1037
|
+
const { value, ...selectProps } = props;
|
|
1038
|
+
const ref = React.useRef(null);
|
|
1039
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
1040
|
+
const prevValue = usePrevious(value);
|
|
1041
|
+
React.useEffect(() => {
|
|
1042
|
+
const select = ref.current;
|
|
1043
|
+
const selectProto = window.HTMLSelectElement.prototype;
|
|
1044
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
|
1045
|
+
selectProto,
|
|
1046
|
+
"value"
|
|
1047
|
+
);
|
|
1048
|
+
const setValue = descriptor.set;
|
|
1049
|
+
if (prevValue !== value && setValue) {
|
|
1050
|
+
const event = new Event("change", { bubbles: true });
|
|
1051
|
+
setValue.call(select, value);
|
|
1052
|
+
select.dispatchEvent(event);
|
|
1053
|
+
}
|
|
1054
|
+
}, [prevValue, value]);
|
|
1055
|
+
return /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
|
|
1056
|
+
}
|
|
1057
|
+
);
|
|
1058
|
+
BubbleSelect.displayName = "BubbleSelect";
|
|
1059
|
+
function useTypeaheadSearch(onSearchChange) {
|
|
1060
|
+
const handleSearchChange = useCallbackRef(onSearchChange);
|
|
1061
|
+
const searchRef = React.useRef("");
|
|
1062
|
+
const timerRef = React.useRef(0);
|
|
1063
|
+
const handleTypeaheadSearch = React.useCallback(
|
|
1064
|
+
(key) => {
|
|
1065
|
+
const search = searchRef.current + key;
|
|
1066
|
+
handleSearchChange(search);
|
|
1067
|
+
(function updateSearch(value) {
|
|
1068
|
+
searchRef.current = value;
|
|
1203
1069
|
window.clearTimeout(timerRef.current);
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1070
|
+
if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
|
|
1071
|
+
})(search);
|
|
1072
|
+
},
|
|
1073
|
+
[handleSearchChange]
|
|
1074
|
+
);
|
|
1075
|
+
const resetTypeahead = React.useCallback(() => {
|
|
1076
|
+
searchRef.current = "";
|
|
1077
|
+
window.clearTimeout(timerRef.current);
|
|
1078
|
+
}, []);
|
|
1079
|
+
React.useEffect(() => {
|
|
1080
|
+
return () => window.clearTimeout(timerRef.current);
|
|
1081
|
+
}, []);
|
|
1082
|
+
return [searchRef, handleTypeaheadSearch, resetTypeahead];
|
|
1214
1083
|
}
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
*
|
|
1227
|
-
* Finally, if the normalized search is exactly one character, we exclude the
|
|
1228
|
-
* current item from the values because otherwise it would be the first to match always
|
|
1229
|
-
* and focus would never move. This is as opposed to the regular case, where we
|
|
1230
|
-
* don't want focus to move if the current item still matches.
|
|
1231
|
-
*/ function $cc7e05a45900e73f$var$findNextItem(items, search, currentItem) {
|
|
1232
|
-
const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
|
|
1233
|
-
);
|
|
1234
|
-
const normalizedSearch = isRepeated ? search[0] : search;
|
|
1235
|
-
const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
|
|
1236
|
-
let wrappedItems = $cc7e05a45900e73f$var$wrapArray(items, Math.max(currentItemIndex, 0));
|
|
1237
|
-
const excludeCurrentItem = normalizedSearch.length === 1;
|
|
1238
|
-
if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v)=>v !== currentItem
|
|
1239
|
-
);
|
|
1240
|
-
const nextItem = wrappedItems.find((item)=>item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
1241
|
-
);
|
|
1242
|
-
return nextItem !== currentItem ? nextItem : undefined;
|
|
1084
|
+
function findNextItem(items, search, currentItem) {
|
|
1085
|
+
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
1086
|
+
const normalizedSearch = isRepeated ? search[0] : search;
|
|
1087
|
+
const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;
|
|
1088
|
+
let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0));
|
|
1089
|
+
const excludeCurrentItem = normalizedSearch.length === 1;
|
|
1090
|
+
if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);
|
|
1091
|
+
const nextItem = wrappedItems.find(
|
|
1092
|
+
(item) => item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
1093
|
+
);
|
|
1094
|
+
return nextItem !== currentItem ? nextItem : void 0;
|
|
1243
1095
|
}
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
* Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
|
|
1247
|
-
*/ function $cc7e05a45900e73f$var$wrapArray(array, startIndex) {
|
|
1248
|
-
return array.map((_, index)=>array[(startIndex + index) % array.length]
|
|
1249
|
-
);
|
|
1096
|
+
function wrapArray(array, startIndex) {
|
|
1097
|
+
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
1250
1098
|
}
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1099
|
+
var Root2 = Select;
|
|
1100
|
+
var Trigger = SelectTrigger;
|
|
1101
|
+
var Value = SelectValue;
|
|
1102
|
+
var Icon = SelectIcon;
|
|
1103
|
+
var Portal = SelectPortal;
|
|
1104
|
+
var Content2 = SelectContent;
|
|
1105
|
+
var Viewport = SelectViewport;
|
|
1106
|
+
var Group = SelectGroup;
|
|
1107
|
+
var Label = SelectLabel;
|
|
1108
|
+
var Item = SelectItem;
|
|
1109
|
+
var ItemText = SelectItemText;
|
|
1110
|
+
var ItemIndicator = SelectItemIndicator;
|
|
1111
|
+
var ScrollUpButton = SelectScrollUpButton;
|
|
1112
|
+
var ScrollDownButton = SelectScrollDownButton;
|
|
1113
|
+
var Separator = SelectSeparator;
|
|
1114
|
+
var Arrow2 = SelectArrow;
|
|
1115
|
+
export {
|
|
1116
|
+
Arrow2 as Arrow,
|
|
1117
|
+
Content2 as Content,
|
|
1118
|
+
Group,
|
|
1119
|
+
Icon,
|
|
1120
|
+
Item,
|
|
1121
|
+
ItemIndicator,
|
|
1122
|
+
ItemText,
|
|
1123
|
+
Label,
|
|
1124
|
+
Portal,
|
|
1125
|
+
Root2 as Root,
|
|
1126
|
+
ScrollDownButton,
|
|
1127
|
+
ScrollUpButton,
|
|
1128
|
+
Select,
|
|
1129
|
+
SelectArrow,
|
|
1130
|
+
SelectContent,
|
|
1131
|
+
SelectGroup,
|
|
1132
|
+
SelectIcon,
|
|
1133
|
+
SelectItem,
|
|
1134
|
+
SelectItemIndicator,
|
|
1135
|
+
SelectItemText,
|
|
1136
|
+
SelectLabel,
|
|
1137
|
+
SelectPortal,
|
|
1138
|
+
SelectScrollDownButton,
|
|
1139
|
+
SelectScrollUpButton,
|
|
1140
|
+
SelectSeparator,
|
|
1141
|
+
SelectTrigger,
|
|
1142
|
+
SelectValue,
|
|
1143
|
+
SelectViewport,
|
|
1144
|
+
Separator,
|
|
1145
|
+
Trigger,
|
|
1146
|
+
Value,
|
|
1147
|
+
Viewport,
|
|
1148
|
+
createSelectScope
|
|
1149
|
+
};
|
|
1272
1150
|
//# sourceMappingURL=index.mjs.map
|