@radix-ui/react-select 2.1.0-rc.2 → 2.1.0-rc.4

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