@radix-ui/react-select 2.1.0-rc.1 → 2.1.0-rc.3

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