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

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