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