@strapi/ui-primitives 1.7.4-alpha.0 → 1.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hooks/useCallbackRef.d.ts +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +492 -465
- package/package.json +8 -2
package/dist/index.js
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
import { jsx as d, jsxs as Ne, Fragment as Ae } from "react/jsx-runtime";
|
|
2
2
|
import * as r from "react";
|
|
3
|
-
import { composeEventHandlers as
|
|
3
|
+
import { composeEventHandlers as T } from "@radix-ui/primitive";
|
|
4
4
|
import { useComposedRefs as _ } from "@radix-ui/react-compose-refs";
|
|
5
5
|
import { createContextScope as Qe, createContext as et } from "@radix-ui/react-context";
|
|
6
6
|
import { DismissableLayer as tt } from "@radix-ui/react-dismissable-layer";
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
7
|
+
import { useFocusGuards as ot } from "@radix-ui/react-focus-guards";
|
|
8
|
+
import { FocusScope as nt } from "@radix-ui/react-focus-scope";
|
|
9
|
+
import { useId as ne } from "@radix-ui/react-id";
|
|
10
|
+
import * as le from "@radix-ui/react-popper";
|
|
11
|
+
import { createPopperScope as rt } from "@radix-ui/react-popper";
|
|
12
|
+
import { Portal as lt } from "@radix-ui/react-portal";
|
|
11
13
|
import { Primitive as N } from "@radix-ui/react-primitive";
|
|
12
14
|
import { useControllableState as ie } from "@radix-ui/react-use-controllable-state";
|
|
13
|
-
import {
|
|
15
|
+
import { useLayoutEffect as H } from "@radix-ui/react-use-layout-effect";
|
|
16
|
+
import { hideOthers as st } from "aria-hidden";
|
|
14
17
|
import * as _e from "react-dom";
|
|
15
|
-
import { RemoveScroll as
|
|
18
|
+
import { RemoveScroll as ct } from "react-remove-scroll";
|
|
16
19
|
import { Slot as Ie } from "@radix-ui/react-slot";
|
|
17
20
|
import { clamp as Ze } from "@radix-ui/number";
|
|
18
|
-
import { createCollection as
|
|
19
|
-
import { useDirection as
|
|
20
|
-
import { useFocusGuards as Rt } from "@radix-ui/react-focus-guards";
|
|
21
|
-
import { FocusScope as Nt } from "@radix-ui/react-focus-scope";
|
|
21
|
+
import { createCollection as Rt } from "@radix-ui/react-collection";
|
|
22
|
+
import { useDirection as Nt } from "@radix-ui/react-direction";
|
|
22
23
|
import { useCallbackRef as At } from "@radix-ui/react-use-callback-ref";
|
|
23
|
-
import {
|
|
24
|
+
import { useCallbackRef as Rn } from "@radix-ui/react-use-callback-ref";
|
|
24
25
|
import { usePrevious as _t } from "@radix-ui/react-use-previous";
|
|
25
26
|
import { VisuallyHidden as Mt } from "@radix-ui/react-visually-hidden";
|
|
26
27
|
let ye = /* @__PURE__ */ new Map();
|
|
@@ -69,48 +70,48 @@ function kt(n) {
|
|
|
69
70
|
itemMap: /* @__PURE__ */ new Map(),
|
|
70
71
|
listeners: /* @__PURE__ */ new Set()
|
|
71
72
|
}), i = (u) => {
|
|
72
|
-
const { scope:
|
|
73
|
-
return /* @__PURE__ */ d(o, { scope:
|
|
73
|
+
const { scope: m, children: S } = u, x = r.useRef(null), C = r.useRef(/* @__PURE__ */ new Map()).current, h = r.useRef(/* @__PURE__ */ new Set()).current;
|
|
74
|
+
return /* @__PURE__ */ d(o, { scope: m, itemMap: C, collectionRef: x, listeners: h, children: S });
|
|
74
75
|
};
|
|
75
76
|
i.displayName = s;
|
|
76
|
-
const c = `${n}CollectionSlot`, a = r.forwardRef((u,
|
|
77
|
-
const { scope:
|
|
78
|
-
return /* @__PURE__ */ d(Ie, { ref:
|
|
77
|
+
const c = `${n}CollectionSlot`, a = r.forwardRef((u, m) => {
|
|
78
|
+
const { scope: S, children: x } = u, C = l(c, S), h = _(m, C.collectionRef);
|
|
79
|
+
return /* @__PURE__ */ d(Ie, { ref: h, children: x });
|
|
79
80
|
});
|
|
80
81
|
a.displayName = c;
|
|
81
|
-
const
|
|
82
|
-
const { scope:
|
|
82
|
+
const g = `${n}CollectionItemSlot`, f = "data-radix-collection-item", v = r.forwardRef((u, m) => {
|
|
83
|
+
const { scope: S, children: x, ...C } = u, h = r.useRef(null), w = _(m, h), A = l(g, S);
|
|
83
84
|
return r.useEffect(() => {
|
|
84
|
-
const
|
|
85
|
-
return A.itemMap.set(
|
|
85
|
+
const V = Array.from(A.itemMap.values());
|
|
86
|
+
return A.itemMap.set(h, { ref: h, ...C }), A.listeners.forEach((M) => M(Array.from(A.itemMap.values()), V)), () => {
|
|
86
87
|
const M = Array.from(A.itemMap.values());
|
|
87
|
-
A.itemMap.delete(
|
|
88
|
+
A.itemMap.delete(h), A.listeners.forEach((E) => E(Array.from(A.itemMap.values()), M));
|
|
88
89
|
};
|
|
89
|
-
}), /* @__PURE__ */ d(Ie, { [f]: "", ref: w, children:
|
|
90
|
+
}), /* @__PURE__ */ d(Ie, { [f]: "", ref: w, children: x });
|
|
90
91
|
});
|
|
91
|
-
|
|
92
|
-
function
|
|
93
|
-
const
|
|
94
|
-
const
|
|
95
|
-
if (!
|
|
92
|
+
v.displayName = g;
|
|
93
|
+
function p(u) {
|
|
94
|
+
const m = l(`${n}CollectionConsumer`, u), S = r.useCallback(() => {
|
|
95
|
+
const C = m.collectionRef.current;
|
|
96
|
+
if (!C)
|
|
96
97
|
return [];
|
|
97
|
-
const
|
|
98
|
-
return Array.from(
|
|
99
|
-
(
|
|
98
|
+
const h = Array.from(C.querySelectorAll(`[${f}]`));
|
|
99
|
+
return Array.from(m.itemMap.values()).sort(
|
|
100
|
+
(V, M) => h.indexOf(V.ref.current) - h.indexOf(M.ref.current)
|
|
100
101
|
);
|
|
101
|
-
}, [
|
|
102
|
-
(
|
|
103
|
-
[
|
|
102
|
+
}, [m.collectionRef, m.itemMap]), x = r.useCallback(
|
|
103
|
+
(C) => (m.listeners.add(C), () => m.listeners.delete(C)),
|
|
104
|
+
[m.listeners]
|
|
104
105
|
);
|
|
105
|
-
return { getItems:
|
|
106
|
+
return { getItems: S, subscribe: x };
|
|
106
107
|
}
|
|
107
108
|
return [
|
|
108
|
-
{ Provider: i, Slot: a, ItemSlot:
|
|
109
|
-
|
|
109
|
+
{ Provider: i, Slot: a, ItemSlot: v },
|
|
110
|
+
p,
|
|
110
111
|
t
|
|
111
112
|
];
|
|
112
113
|
}
|
|
113
|
-
const
|
|
114
|
+
const Ft = [" ", "Enter", "ArrowUp", "ArrowDown"], Lt = ["Enter"], Je = (n) => !!(n.length === 1 && n.match(/\S| /)), it = "Combobox", [pe, xe] = kt(it), [Bt, Y] = et(it), Ht = ({ children: n }) => /* @__PURE__ */ d(le.Root, { children: /* @__PURE__ */ d(pe.Provider, { scope: void 0, children: n }) }), $t = (n) => {
|
|
114
115
|
const {
|
|
115
116
|
allowCustomValue: s = !1,
|
|
116
117
|
autocomplete: e = "none",
|
|
@@ -120,97 +121,110 @@ const Lt = [" ", "Enter", "ArrowUp", "ArrowDown"], Ft = ["Enter"], Je = (n) => !
|
|
|
120
121
|
onOpenChange: i,
|
|
121
122
|
value: c,
|
|
122
123
|
defaultValue: a,
|
|
123
|
-
onValueChange:
|
|
124
|
+
onValueChange: g,
|
|
124
125
|
disabled: f,
|
|
125
|
-
required:
|
|
126
|
-
locale:
|
|
126
|
+
required: v = !1,
|
|
127
|
+
locale: p = "en-EN",
|
|
127
128
|
onTextValueChange: u,
|
|
128
|
-
textValue:
|
|
129
|
-
defaultTextValue:
|
|
130
|
-
filterValue:
|
|
131
|
-
defaultFilterValue:
|
|
132
|
-
onFilterValueChange:
|
|
133
|
-
} = n, [w, A] = r.useState(null), [
|
|
129
|
+
textValue: m,
|
|
130
|
+
defaultTextValue: S,
|
|
131
|
+
filterValue: x,
|
|
132
|
+
defaultFilterValue: C,
|
|
133
|
+
onFilterValueChange: h
|
|
134
|
+
} = n, [w, A] = r.useState(null), [V, M] = r.useState(null), [E, k] = r.useState(null), [$, G] = r.useState(null), [F = !1, O] = ie({
|
|
134
135
|
prop: o,
|
|
135
136
|
defaultProp: l,
|
|
136
137
|
onChange: i
|
|
137
|
-
}), [L,
|
|
138
|
+
}), [L, B] = ie({
|
|
138
139
|
prop: c,
|
|
139
140
|
defaultProp: a,
|
|
140
|
-
onChange: m
|
|
141
|
-
}), [$, U] = ie({
|
|
142
|
-
prop: p,
|
|
143
|
-
defaultProp: h,
|
|
144
|
-
onChange: u
|
|
145
|
-
}), [Y, q] = ie({
|
|
146
|
-
prop: C,
|
|
147
|
-
defaultProp: v,
|
|
148
141
|
onChange: g
|
|
149
|
-
}),
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
142
|
+
}), [U, K] = ie({
|
|
143
|
+
prop: m,
|
|
144
|
+
defaultProp: S,
|
|
145
|
+
onChange: u
|
|
146
|
+
}), [X, Z] = ie({
|
|
147
|
+
prop: x,
|
|
148
|
+
defaultProp: C,
|
|
149
|
+
onChange: h
|
|
150
|
+
}), W = ne(), ue = r.useCallback(
|
|
151
|
+
(z, se) => {
|
|
152
|
+
const de = se.map((y) => y.ref.current), [J, ...ce] = de, [ee] = ce.slice(-1), b = $;
|
|
153
|
+
for (const y of z) {
|
|
154
|
+
if (y === b)
|
|
154
155
|
return;
|
|
155
|
-
if (y?.scrollIntoView({ block: "nearest" }), y ===
|
|
156
|
+
if (y?.scrollIntoView({ block: "nearest" }), y === J && V && (V.scrollTop = 0), y === ee && V && (V.scrollTop = V.scrollHeight), G(y), e === "both") {
|
|
156
157
|
const D = se.find((I) => I.ref.current === y);
|
|
157
|
-
D &&
|
|
158
|
+
D && K(D.textValue);
|
|
158
159
|
}
|
|
159
|
-
if (y !==
|
|
160
|
+
if (y !== b)
|
|
160
161
|
return;
|
|
161
162
|
}
|
|
162
163
|
},
|
|
163
|
-
[e,
|
|
164
|
+
[e, K, V, $]
|
|
164
165
|
);
|
|
165
166
|
return r.useEffect(() => {
|
|
166
|
-
e !== "both" &&
|
|
167
|
-
}, [
|
|
168
|
-
if (
|
|
169
|
-
return
|
|
170
|
-
}, [
|
|
167
|
+
e !== "both" && G(null);
|
|
168
|
+
}, [U, e]), r.useEffect(() => {
|
|
169
|
+
if (E && w)
|
|
170
|
+
return st([E, w]);
|
|
171
|
+
}, [E, w]), /* @__PURE__ */ d(Ht, { children: /* @__PURE__ */ d(
|
|
171
172
|
Bt,
|
|
172
173
|
{
|
|
173
174
|
allowCustomValue: s,
|
|
174
175
|
autocomplete: e,
|
|
175
|
-
required:
|
|
176
|
+
required: v,
|
|
176
177
|
trigger: w,
|
|
177
178
|
onTriggerChange: A,
|
|
178
|
-
contentId:
|
|
179
|
+
contentId: W,
|
|
179
180
|
value: L,
|
|
180
|
-
onValueChange:
|
|
181
|
-
open:
|
|
181
|
+
onValueChange: B,
|
|
182
|
+
open: F,
|
|
182
183
|
onOpenChange: O,
|
|
183
184
|
disabled: f,
|
|
184
|
-
locale:
|
|
185
|
+
locale: p,
|
|
185
186
|
focusFirst: ue,
|
|
186
|
-
textValue:
|
|
187
|
-
onTextValueChange:
|
|
187
|
+
textValue: U,
|
|
188
|
+
onTextValueChange: K,
|
|
188
189
|
onViewportChange: M,
|
|
189
190
|
onContentChange: k,
|
|
190
|
-
visuallyFocussedItem:
|
|
191
|
-
filterValue:
|
|
192
|
-
onFilterValueChange:
|
|
193
|
-
onVisuallyFocussedItemChange:
|
|
194
|
-
children:
|
|
191
|
+
visuallyFocussedItem: $,
|
|
192
|
+
filterValue: X,
|
|
193
|
+
onFilterValueChange: Z,
|
|
194
|
+
onVisuallyFocussedItemChange: G,
|
|
195
|
+
children: /* @__PURE__ */ d(
|
|
196
|
+
nt,
|
|
197
|
+
{
|
|
198
|
+
trapped: F,
|
|
199
|
+
onMountAutoFocus: (z) => {
|
|
200
|
+
z.preventDefault();
|
|
201
|
+
},
|
|
202
|
+
onUnmountAutoFocus: (z) => {
|
|
203
|
+
w?.focus({ preventScroll: !0 }), document.getSelection()?.empty(), z.preventDefault();
|
|
204
|
+
},
|
|
205
|
+
children: t
|
|
206
|
+
}
|
|
207
|
+
)
|
|
195
208
|
}
|
|
196
209
|
) });
|
|
197
210
|
}, Ut = "ComboboxTrigger", Kt = r.forwardRef((n, s) => {
|
|
198
|
-
const { ...e } = n, t =
|
|
199
|
-
return /* @__PURE__ */ d(
|
|
200
|
-
}),
|
|
201
|
-
const e =
|
|
211
|
+
const { ...e } = n, t = Y(Ut);
|
|
212
|
+
return /* @__PURE__ */ d(le.Anchor, { asChild: !0, children: /* @__PURE__ */ d("div", { ref: s, "data-disabled": t.disabled ? "" : void 0, ...e }) });
|
|
213
|
+
}), at = "ComboboxInput", Wt = r.forwardRef((n, s) => {
|
|
214
|
+
const e = Y(at), t = r.useRef(null), { getItems: o } = xe(void 0), { startsWith: l } = Me(e.locale, { sensitivity: "base" }), i = e.disabled, c = _(t, s, e.onTriggerChange), a = () => {
|
|
202
215
|
i || e.onOpenChange(!0);
|
|
203
|
-
},
|
|
204
|
-
return
|
|
205
|
-
setTimeout(() => {
|
|
216
|
+
}, g = Dt(e.filterValue);
|
|
217
|
+
return H(() => {
|
|
218
|
+
const f = setTimeout(() => {
|
|
206
219
|
if (e.textValue === "" || e.textValue === void 0 || e.filterValue === "" || e.filterValue === void 0)
|
|
207
220
|
return;
|
|
208
|
-
const
|
|
209
|
-
(
|
|
210
|
-
),
|
|
211
|
-
|
|
221
|
+
const v = o().find(
|
|
222
|
+
(u) => u.type === "option" && l(u.textValue, e.textValue)
|
|
223
|
+
), p = vo(g ?? "", e.filterValue);
|
|
224
|
+
v && !e.visuallyFocussedItem && p === e.filterValue.length && t.current.setSelectionRange(e.filterValue.length, e.textValue.length);
|
|
212
225
|
});
|
|
213
|
-
|
|
226
|
+
return () => clearTimeout(f);
|
|
227
|
+
}, [e.textValue, e.filterValue, l, e.visuallyFocussedItem, o, g]), /* @__PURE__ */ d(
|
|
214
228
|
"input",
|
|
215
229
|
{
|
|
216
230
|
type: "text",
|
|
@@ -228,51 +242,70 @@ const Lt = [" ", "Enter", "ArrowUp", "ArrowDown"], Ft = ["Enter"], Je = (n) => !
|
|
|
228
242
|
value: e.textValue ?? "",
|
|
229
243
|
...n,
|
|
230
244
|
ref: c,
|
|
231
|
-
onClick:
|
|
245
|
+
onClick: T(n.onClick, (f) => {
|
|
232
246
|
f.currentTarget.focus();
|
|
233
247
|
}),
|
|
234
|
-
onPointerDown:
|
|
248
|
+
onPointerDown: T(n.onPointerDown, (f) => {
|
|
235
249
|
f.button === 0 && f.ctrlKey === !1 && (a(), f.currentTarget.focus());
|
|
236
250
|
}),
|
|
237
|
-
onKeyDown:
|
|
251
|
+
onKeyDown: T(n.onKeyDown, (f) => {
|
|
238
252
|
if (["ArrowUp", "ArrowDown", "Home", "End"].includes(f.key))
|
|
239
253
|
setTimeout(() => {
|
|
240
|
-
let
|
|
241
|
-
if (["ArrowUp", "End"].includes(f.key) && (
|
|
254
|
+
let p = o().filter((u) => !u.disabled).map((u) => u.ref.current);
|
|
255
|
+
if (["ArrowUp", "End"].includes(f.key) && (p = p.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(f.key)) {
|
|
242
256
|
const u = e.visuallyFocussedItem ?? f.target;
|
|
243
|
-
let
|
|
244
|
-
|
|
257
|
+
let m = p.indexOf(u);
|
|
258
|
+
m === p.length - 1 && (m = -1), p = p.slice(m + 1);
|
|
245
259
|
}
|
|
246
|
-
if (["ArrowDown"].includes(f.key) && e.autocomplete === "both" &&
|
|
247
|
-
const [u, ...
|
|
248
|
-
e.textValue ===
|
|
260
|
+
if (["ArrowDown"].includes(f.key) && e.autocomplete === "both" && p.length > 1) {
|
|
261
|
+
const [u, ...m] = p, S = o().find((x) => x.ref.current === u).textValue;
|
|
262
|
+
e.textValue === S && (p = m);
|
|
249
263
|
}
|
|
250
|
-
e.focusFirst(
|
|
264
|
+
e.focusFirst(p, o());
|
|
251
265
|
}), f.preventDefault();
|
|
252
266
|
else if (["Escape"].includes(f.key))
|
|
253
267
|
e.open ? e.onOpenChange(!1) : (e.onValueChange(void 0), e.onTextValueChange("")), f.preventDefault();
|
|
254
|
-
else if (
|
|
268
|
+
else if (Lt.includes(f.key)) {
|
|
255
269
|
if (e.visuallyFocussedItem) {
|
|
256
|
-
const
|
|
257
|
-
|
|
270
|
+
const v = o().find((p) => p.ref.current === e.visuallyFocussedItem);
|
|
271
|
+
v && (e.onValueChange(v.value), e.onTextValueChange(v.textValue), e.autocomplete === "both" && e.onFilterValueChange(v.textValue), v.ref.current?.click());
|
|
272
|
+
} else {
|
|
273
|
+
const v = o().find(
|
|
274
|
+
(p) => p.type === "option" && !p.disabled && p.textValue === e.textValue
|
|
275
|
+
);
|
|
276
|
+
v && (e.onValueChange(v.value), e.onTextValueChange(v.textValue), e.autocomplete === "both" && e.onFilterValueChange(v.textValue), v.ref.current?.click());
|
|
258
277
|
}
|
|
259
278
|
e.onOpenChange(!1), f.preventDefault();
|
|
260
279
|
} else
|
|
261
280
|
e.onVisuallyFocussedItemChange(null);
|
|
262
281
|
}),
|
|
263
|
-
onChange:
|
|
282
|
+
onChange: T(n.onChange, (f) => {
|
|
264
283
|
e.onTextValueChange(f.currentTarget.value), e.autocomplete === "both" && e.onFilterValueChange(f.currentTarget.value);
|
|
265
284
|
}),
|
|
266
|
-
onKeyUp:
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
285
|
+
onKeyUp: T(n.onKeyUp, (f) => {
|
|
286
|
+
!e.open && (Je(f.key) || ["ArrowUp", "ArrowDown", "Home", "End", "Backspace"].includes(f.key)) && a(), setTimeout(() => {
|
|
287
|
+
if (e.autocomplete === "both" && Je(f.key) && e.filterValue !== void 0) {
|
|
288
|
+
const v = e.filterValue, p = o().find((u) => l(u.textValue, v));
|
|
289
|
+
p && e.onTextValueChange(p.textValue);
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
}),
|
|
293
|
+
onBlur: T(n.onBlur, () => {
|
|
294
|
+
e.onVisuallyFocussedItemChange(null);
|
|
295
|
+
const [f] = o().filter(
|
|
296
|
+
(p) => p.textValue === e.textValue && p.type === "option"
|
|
297
|
+
);
|
|
298
|
+
if (e.allowCustomValue) {
|
|
299
|
+
f && (e.onValueChange(f.value), e.autocomplete === "both" && e.onFilterValueChange(f.textValue));
|
|
300
|
+
return;
|
|
270
301
|
}
|
|
302
|
+
const [v] = o().filter((p) => p.value === e.value && p.type === "option");
|
|
303
|
+
f ? e.onValueChange(f.value) : v && e.textValue !== "" ? (e.onTextValueChange(v.textValue), e.autocomplete === "both" && e.onFilterValueChange(v.textValue)) : (e.onValueChange(void 0), e.onTextValueChange(""));
|
|
271
304
|
})
|
|
272
305
|
}
|
|
273
306
|
);
|
|
274
307
|
}), zt = r.forwardRef((n, s) => {
|
|
275
|
-
const { children: e, ...t } = n, o =
|
|
308
|
+
const { children: e, ...t } = n, o = Y(at), l = o.disabled, i = () => {
|
|
276
309
|
l || (o.onOpenChange(!0), o.trigger?.focus());
|
|
277
310
|
};
|
|
278
311
|
return /* @__PURE__ */ d(
|
|
@@ -288,23 +321,23 @@ const Lt = [" ", "Enter", "ArrowUp", "ArrowDown"], Ft = ["Enter"], Je = (n) => !
|
|
|
288
321
|
...t,
|
|
289
322
|
tabIndex: -1,
|
|
290
323
|
ref: s,
|
|
291
|
-
onClick:
|
|
324
|
+
onClick: T(t.onClick, () => {
|
|
292
325
|
o.trigger?.focus();
|
|
293
326
|
}),
|
|
294
|
-
onPointerDown:
|
|
327
|
+
onPointerDown: T(t.onPointerDown, (c) => {
|
|
295
328
|
c.button === 0 && c.ctrlKey === !1 && (i(), c.preventDefault());
|
|
296
329
|
}),
|
|
297
|
-
onKeyDown:
|
|
298
|
-
|
|
330
|
+
onKeyDown: T(t.onKeyDown, (c) => {
|
|
331
|
+
Ft.includes(c.key) && (i(), c.preventDefault());
|
|
299
332
|
}),
|
|
300
333
|
children: e || "▼"
|
|
301
334
|
}
|
|
302
335
|
);
|
|
303
|
-
}), Gt = "ComboboxPortal",
|
|
304
|
-
|
|
305
|
-
const
|
|
306
|
-
const e =
|
|
307
|
-
if (
|
|
336
|
+
}), Gt = "ComboboxPortal", ut = (n) => /* @__PURE__ */ d(lt, { asChild: !0, ...n });
|
|
337
|
+
ut.displayName = Gt;
|
|
338
|
+
const dt = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
339
|
+
const e = Y(dt), [t, o] = r.useState();
|
|
340
|
+
if (H(() => {
|
|
308
341
|
o(new DocumentFragment());
|
|
309
342
|
}, []), !e.open) {
|
|
310
343
|
const l = t;
|
|
@@ -316,32 +349,25 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
|
316
349
|
return /* @__PURE__ */ d(qt, { ...n, ref: s });
|
|
317
350
|
}), Yt = 10, qt = r.forwardRef(
|
|
318
351
|
(n, s) => {
|
|
319
|
-
const { onEscapeKeyDown: e, onPointerDownOutside: t, ...o } = n, l =
|
|
320
|
-
|
|
321
|
-
const
|
|
322
|
-
|
|
323
|
-
h && (a(h.value), l.autocomplete === "both" && m(h.textValue));
|
|
324
|
-
return;
|
|
325
|
-
}
|
|
326
|
-
const [C] = u().filter((v) => v.value === x && v.type === "option");
|
|
327
|
-
h ? a(h.value) : C && b !== "" ? (f(C.textValue), l.autocomplete === "both" && m(C.textValue)) : (a(void 0), f(""));
|
|
328
|
-
}, [l, u, m, f, a, b, x]);
|
|
329
|
-
return r.useEffect(() => {
|
|
330
|
-
const h = () => {
|
|
331
|
-
p(), c(!1);
|
|
352
|
+
const { onEscapeKeyDown: e, onPointerDownOutside: t, ...o } = n, l = Y(dt), i = _(s, (a) => l.onContentChange(a)), { onOpenChange: c } = l;
|
|
353
|
+
return ot(), r.useEffect(() => {
|
|
354
|
+
const a = () => {
|
|
355
|
+
c(!1);
|
|
332
356
|
};
|
|
333
|
-
return window.addEventListener("blur",
|
|
334
|
-
window.removeEventListener("blur",
|
|
357
|
+
return window.addEventListener("blur", a), window.addEventListener("resize", a), () => {
|
|
358
|
+
window.removeEventListener("blur", a), window.removeEventListener("resize", a);
|
|
335
359
|
};
|
|
336
|
-
}, [
|
|
360
|
+
}, [c]), /* @__PURE__ */ d(ct, { allowPinchZoom: !0, children: /* @__PURE__ */ d(
|
|
337
361
|
tt,
|
|
338
362
|
{
|
|
339
363
|
asChild: !0,
|
|
340
364
|
onEscapeKeyDown: e,
|
|
341
365
|
onPointerDownOutside: t,
|
|
342
|
-
onFocusOutside: (
|
|
366
|
+
onFocusOutside: (a) => {
|
|
367
|
+
a.preventDefault();
|
|
368
|
+
},
|
|
343
369
|
onDismiss: () => {
|
|
344
|
-
l.onOpenChange(!1), l.trigger?.focus({ preventScroll: !0 })
|
|
370
|
+
l.onOpenChange(!1), l.trigger?.focus({ preventScroll: !0 });
|
|
345
371
|
},
|
|
346
372
|
children: /* @__PURE__ */ d(
|
|
347
373
|
Xt,
|
|
@@ -349,7 +375,7 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
|
349
375
|
role: "listbox",
|
|
350
376
|
id: l.contentId,
|
|
351
377
|
"data-state": l.open ? "open" : "closed",
|
|
352
|
-
onContextMenu: (
|
|
378
|
+
onContextMenu: (a) => a.preventDefault(),
|
|
353
379
|
...o,
|
|
354
380
|
ref: i,
|
|
355
381
|
style: {
|
|
@@ -369,7 +395,7 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
|
369
395
|
(n, s) => {
|
|
370
396
|
const { align: e = "start", collisionPadding: t = Yt, ...o } = n;
|
|
371
397
|
return /* @__PURE__ */ d(
|
|
372
|
-
|
|
398
|
+
le.Content,
|
|
373
399
|
{
|
|
374
400
|
...o,
|
|
375
401
|
ref: s,
|
|
@@ -389,7 +415,7 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
|
389
415
|
);
|
|
390
416
|
}
|
|
391
417
|
), Zt = "ComboboxViewport", Jt = r.forwardRef((n, s) => {
|
|
392
|
-
const e =
|
|
418
|
+
const e = Y(Zt), t = _(s, e.onViewportChange);
|
|
393
419
|
return /* @__PURE__ */ Ne(Ae, { children: [
|
|
394
420
|
/* @__PURE__ */ d(
|
|
395
421
|
"style",
|
|
@@ -418,66 +444,66 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
|
418
444
|
}
|
|
419
445
|
) })
|
|
420
446
|
] });
|
|
421
|
-
}),
|
|
422
|
-
const { value: e, disabled: t = !1, textValue: o, ...l } = n, i = r.useRef(null), c = _(s, i), { getItems: a } =
|
|
423
|
-
onTextValueChange:
|
|
447
|
+
}), ft = "ComboboxItem", [Qt, pt] = et(ft), mt = r.forwardRef((n, s) => {
|
|
448
|
+
const { value: e, disabled: t = !1, textValue: o, ...l } = n, i = r.useRef(null), c = _(s, i), { getItems: a } = xe(void 0), {
|
|
449
|
+
onTextValueChange: g,
|
|
424
450
|
textValue: f,
|
|
425
|
-
visuallyFocussedItem:
|
|
426
|
-
...
|
|
427
|
-
} =
|
|
428
|
-
t || (
|
|
429
|
-
}, { startsWith: w } = Me(
|
|
430
|
-
|
|
451
|
+
visuallyFocussedItem: v,
|
|
452
|
+
...p
|
|
453
|
+
} = Y(ft), u = ne(), [m, S] = r.useState(o ?? ""), x = r.useMemo(() => v === a().find((M) => M.ref.current === i.current)?.ref.current, [a, v]), C = p.value === e, h = () => {
|
|
454
|
+
t || (p.onValueChange(e), g(m), p.onOpenChange(!1), p.autocomplete === "both" && p.onFilterValueChange(m), p.trigger?.focus({ preventScroll: !0 }));
|
|
455
|
+
}, { startsWith: w } = Me(p.locale, { sensitivity: "base" }), A = r.useCallback((M) => {
|
|
456
|
+
S((E) => E || (M?.textContent ?? "").trim());
|
|
431
457
|
}, []);
|
|
432
458
|
r.useEffect(() => {
|
|
433
|
-
|
|
434
|
-
}, [
|
|
435
|
-
const
|
|
436
|
-
return
|
|
459
|
+
C && f === void 0 && m !== "" && g(m);
|
|
460
|
+
}, [m, C, f, g]);
|
|
461
|
+
const V = ne();
|
|
462
|
+
return p.autocomplete === "list" && m && f && !w(m, f) || p.autocomplete === "both" && m && p.filterValue && !w(m, p.filterValue) ? null : /* @__PURE__ */ d(Qt, { textId: u, onTextValueChange: A, isSelected: C, children: /* @__PURE__ */ d(pe.ItemSlot, { scope: void 0, value: e, textValue: m, disabled: t, type: "option", children: /* @__PURE__ */ d(
|
|
437
463
|
N.div,
|
|
438
464
|
{
|
|
439
465
|
role: "option",
|
|
440
466
|
"aria-labelledby": u,
|
|
441
|
-
"data-highlighted":
|
|
442
|
-
"aria-selected":
|
|
443
|
-
"data-state":
|
|
467
|
+
"data-highlighted": x ? "" : void 0,
|
|
468
|
+
"aria-selected": C && x,
|
|
469
|
+
"data-state": C ? "checked" : "unchecked",
|
|
444
470
|
"aria-disabled": t || void 0,
|
|
445
471
|
"data-disabled": t ? "" : void 0,
|
|
446
472
|
tabIndex: t ? void 0 : -1,
|
|
447
473
|
...l,
|
|
448
|
-
id:
|
|
474
|
+
id: V,
|
|
449
475
|
ref: c,
|
|
450
|
-
onPointerUp:
|
|
476
|
+
onPointerUp: T(l.onPointerUp, h)
|
|
451
477
|
}
|
|
452
478
|
) }) });
|
|
453
479
|
}), eo = "ComboboxItemText", to = r.forwardRef((n, s) => {
|
|
454
|
-
const { className: e, style: t, ...o } = n, l =
|
|
480
|
+
const { className: e, style: t, ...o } = n, l = pt(eo), i = _(s, l.onTextValueChange);
|
|
455
481
|
return /* @__PURE__ */ d(N.span, { id: l.textId, ...o, ref: i });
|
|
456
482
|
}), oo = "ComboboxItemIndicator", no = r.forwardRef((n, s) => {
|
|
457
|
-
const { isSelected: e } =
|
|
483
|
+
const { isSelected: e } = pt(oo);
|
|
458
484
|
return e ? /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...n, ref: s }) : null;
|
|
459
|
-
}),
|
|
460
|
-
const { textValue: e = "", locale: t } =
|
|
485
|
+
}), ht = "ComboboxNoValueFound", ro = r.forwardRef((n, s) => {
|
|
486
|
+
const { textValue: e = "", locale: t } = Y(ht), [o, l] = r.useState([]), { subscribe: i } = xe(void 0), { startsWith: c } = Me(t, { sensitivity: "base" });
|
|
461
487
|
return r.useEffect(() => {
|
|
462
|
-
const a = i((
|
|
463
|
-
l(
|
|
488
|
+
const a = i((g) => {
|
|
489
|
+
l(g);
|
|
464
490
|
});
|
|
465
491
|
return () => {
|
|
466
492
|
a();
|
|
467
493
|
};
|
|
468
494
|
}, [i]), o.some((a) => c(a.textValue, e)) ? null : /* @__PURE__ */ d(N.div, { ...n, ref: s });
|
|
469
495
|
}), lo = r.forwardRef((n, s) => {
|
|
470
|
-
const { disabled: e = !1, ...t } = n, o =
|
|
496
|
+
const { disabled: e = !1, ...t } = n, o = Y(ht), { textValue: l, visuallyFocussedItem: i } = o, { getItems: c, subscribe: a } = xe(void 0), g = r.useRef(null), [f, v] = r.useState(!1), p = _(s, g), u = r.useMemo(() => i === c().find((x) => x.ref.current === g.current)?.ref.current, [c, i]), m = ne(), S = () => {
|
|
471
497
|
!e && l && (o.onValueChange(l), o.onTextValueChange(l), o.onOpenChange(!1), o.autocomplete === "both" && o.onFilterValueChange(l), o.trigger?.focus({ preventScroll: !0 }));
|
|
472
498
|
};
|
|
473
|
-
return
|
|
474
|
-
const
|
|
475
|
-
|
|
499
|
+
return H(() => {
|
|
500
|
+
const x = a((C) => {
|
|
501
|
+
v(!C.some((h) => h.textValue === l && h.type !== "create"));
|
|
476
502
|
});
|
|
477
|
-
return () => {
|
|
478
|
-
|
|
503
|
+
return c().length === 0 && v(!0), () => {
|
|
504
|
+
x();
|
|
479
505
|
};
|
|
480
|
-
}, [l, a]), !l || !f ? null : /* @__PURE__ */ d(
|
|
506
|
+
}, [l, a, c]), !l || !f ? null : /* @__PURE__ */ d(
|
|
481
507
|
pe.ItemSlot,
|
|
482
508
|
{
|
|
483
509
|
scope: void 0,
|
|
@@ -494,14 +520,14 @@ const at = "ComboboxContent", jt = r.forwardRef((n, s) => {
|
|
|
494
520
|
"data-disabled": e ? "" : void 0,
|
|
495
521
|
"data-highlighted": u ? "" : void 0,
|
|
496
522
|
...t,
|
|
497
|
-
id:
|
|
498
|
-
ref:
|
|
499
|
-
onPointerUp:
|
|
523
|
+
id: m,
|
|
524
|
+
ref: p,
|
|
525
|
+
onPointerUp: T(t.onPointerUp, S)
|
|
500
526
|
}
|
|
501
527
|
)
|
|
502
528
|
}
|
|
503
529
|
);
|
|
504
|
-
}), so = $t, co = Kt, io = Wt, ao = zt, uo =
|
|
530
|
+
}), so = $t, co = Kt, io = Wt, ao = zt, uo = ut, fo = jt, po = Jt, mo = mt, ho = to, go = no, xo = ro, Co = lo;
|
|
505
531
|
function vo(n, s) {
|
|
506
532
|
const e = Math.min(n.length, s.length);
|
|
507
533
|
for (let t = 0; t < e; t++)
|
|
@@ -511,7 +537,7 @@ function vo(n, s) {
|
|
|
511
537
|
}
|
|
512
538
|
const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
513
539
|
__proto__: null,
|
|
514
|
-
ComboboxItem:
|
|
540
|
+
ComboboxItem: mt,
|
|
515
541
|
Content: fo,
|
|
516
542
|
CreateItem: Co,
|
|
517
543
|
Icon: ao,
|
|
@@ -524,10 +550,10 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
524
550
|
TextInput: io,
|
|
525
551
|
Trigger: co,
|
|
526
552
|
Viewport: po
|
|
527
|
-
}, Symbol.toStringTag, { value: "Module" })), So = [" ", "Enter", "ArrowUp", "ArrowDown"], bo = [" ", "Enter"],
|
|
553
|
+
}, Symbol.toStringTag, { value: "Module" })), So = [" ", "Enter", "ArrowUp", "ArrowDown"], bo = [" ", "Enter"], me = "Select", [Ce, he, wo] = Rt(me), [ae, yo] = Qe(me, [
|
|
528
554
|
wo,
|
|
529
|
-
|
|
530
|
-
]), ve =
|
|
555
|
+
rt
|
|
556
|
+
]), ve = rt(), [Io, q] = ae(me), [To, Vo] = ae(me), Oe = (n) => {
|
|
531
557
|
const {
|
|
532
558
|
__scopeSelect: s,
|
|
533
559
|
children: e,
|
|
@@ -537,54 +563,54 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
537
563
|
value: i,
|
|
538
564
|
defaultValue: c,
|
|
539
565
|
onValueChange: a,
|
|
540
|
-
dir:
|
|
566
|
+
dir: g,
|
|
541
567
|
// name,
|
|
542
568
|
// autoComplete,
|
|
543
569
|
disabled: f,
|
|
544
|
-
required:
|
|
545
|
-
multi:
|
|
546
|
-
} = n, u = ve(s), [
|
|
570
|
+
required: v,
|
|
571
|
+
multi: p = !1
|
|
572
|
+
} = n, u = ve(s), [m, S] = r.useState(null), [x, C] = r.useState(null), [h, w] = r.useState(!1), A = Nt(g), [V = !1, M] = ie({
|
|
547
573
|
prop: t,
|
|
548
574
|
defaultProp: o,
|
|
549
575
|
onChange: l
|
|
550
|
-
}), [
|
|
576
|
+
}), [E, k] = ie({
|
|
551
577
|
prop: i,
|
|
552
578
|
defaultProp: c,
|
|
553
579
|
onChange(O) {
|
|
554
580
|
a && (Array.isArray(O), a(O));
|
|
555
581
|
}
|
|
556
|
-
}),
|
|
557
|
-
return /* @__PURE__ */ d(
|
|
582
|
+
}), $ = r.useRef(null), [G, F] = r.useState(/* @__PURE__ */ new Set());
|
|
583
|
+
return /* @__PURE__ */ d(le.Root, { ...u, children: /* @__PURE__ */ d(
|
|
558
584
|
Io,
|
|
559
585
|
{
|
|
560
|
-
required:
|
|
586
|
+
required: v,
|
|
561
587
|
scope: s,
|
|
562
|
-
trigger:
|
|
563
|
-
onTriggerChange:
|
|
564
|
-
valueNode:
|
|
565
|
-
onValueNodeChange:
|
|
566
|
-
valueNodeHasChildren:
|
|
588
|
+
trigger: m,
|
|
589
|
+
onTriggerChange: S,
|
|
590
|
+
valueNode: x,
|
|
591
|
+
onValueNodeChange: C,
|
|
592
|
+
valueNodeHasChildren: h,
|
|
567
593
|
onValueNodeHasChildrenChange: w,
|
|
568
|
-
contentId:
|
|
569
|
-
value:
|
|
594
|
+
contentId: ne(),
|
|
595
|
+
value: E,
|
|
570
596
|
onValueChange: k,
|
|
571
|
-
open:
|
|
597
|
+
open: V,
|
|
572
598
|
onOpenChange: M,
|
|
573
599
|
dir: A,
|
|
574
|
-
triggerPointerDownPosRef:
|
|
600
|
+
triggerPointerDownPosRef: $,
|
|
575
601
|
disabled: f,
|
|
576
|
-
multi:
|
|
602
|
+
multi: p,
|
|
577
603
|
children: /* @__PURE__ */ d(Ce.Provider, { scope: s, children: /* @__PURE__ */ d(
|
|
578
604
|
To,
|
|
579
605
|
{
|
|
580
606
|
scope: n.__scopeSelect,
|
|
581
607
|
onNativeOptionAdd: r.useCallback((O) => {
|
|
582
|
-
|
|
608
|
+
F((L) => new Set(L).add(O));
|
|
583
609
|
}, []),
|
|
584
610
|
onNativeOptionRemove: r.useCallback((O) => {
|
|
585
|
-
|
|
586
|
-
const
|
|
587
|
-
return
|
|
611
|
+
F((L) => {
|
|
612
|
+
const B = new Set(L);
|
|
613
|
+
return B.delete(O), B;
|
|
588
614
|
});
|
|
589
615
|
}, []),
|
|
590
616
|
children: e
|
|
@@ -593,19 +619,19 @@ const Tn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
593
619
|
}
|
|
594
620
|
) });
|
|
595
621
|
};
|
|
596
|
-
Oe.displayName =
|
|
597
|
-
const
|
|
622
|
+
Oe.displayName = me;
|
|
623
|
+
const gt = "SelectTrigger", De = r.forwardRef(
|
|
598
624
|
(n, s) => {
|
|
599
|
-
const { __scopeSelect: e, ...t } = n, o = ve(e), l =
|
|
600
|
-
const
|
|
601
|
-
if (
|
|
602
|
-
const
|
|
603
|
-
l.onValueChange(
|
|
625
|
+
const { __scopeSelect: e, ...t } = n, o = ve(e), l = q(gt, e), i = l.disabled, c = _(s, l.onTriggerChange), a = he(e), [g, f, v] = Vt((u) => {
|
|
626
|
+
const m = a().filter((C) => !C.disabled), S = m.find((C) => C.value === l.value), x = Et(m, u, S);
|
|
627
|
+
if (x !== void 0 && !Array.isArray(x.value)) {
|
|
628
|
+
const C = l.multi ? [x.value] : x.value;
|
|
629
|
+
l.onValueChange(C);
|
|
604
630
|
}
|
|
605
|
-
}),
|
|
606
|
-
i || (l.onOpenChange(!0),
|
|
631
|
+
}), p = () => {
|
|
632
|
+
i || (l.onOpenChange(!0), v());
|
|
607
633
|
};
|
|
608
|
-
return /* @__PURE__ */ d(
|
|
634
|
+
return /* @__PURE__ */ d(le.Anchor, { asChild: !0, ...o, children: /* @__PURE__ */ d(
|
|
609
635
|
N.div,
|
|
610
636
|
{
|
|
611
637
|
role: "combobox",
|
|
@@ -620,87 +646,87 @@ const mt = "SelectTrigger", De = r.forwardRef(
|
|
|
620
646
|
tabIndex: i ? void 0 : 0,
|
|
621
647
|
...t,
|
|
622
648
|
ref: c,
|
|
623
|
-
onClick:
|
|
649
|
+
onClick: T(t.onClick, (u) => {
|
|
624
650
|
u.currentTarget.focus();
|
|
625
651
|
}),
|
|
626
|
-
onPointerDown:
|
|
627
|
-
const
|
|
628
|
-
|
|
652
|
+
onPointerDown: T(t.onPointerDown, (u) => {
|
|
653
|
+
const m = u.target;
|
|
654
|
+
m.hasPointerCapture(u.pointerId) && m.releasePointerCapture(u.pointerId), (m.closest("button") ?? m.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (p(), l.triggerPointerDownPosRef.current = {
|
|
629
655
|
x: Math.round(u.pageX),
|
|
630
656
|
y: Math.round(u.pageY)
|
|
631
657
|
}, u.preventDefault());
|
|
632
658
|
}),
|
|
633
|
-
onKeyDown:
|
|
634
|
-
const
|
|
635
|
-
(
|
|
659
|
+
onKeyDown: T(t.onKeyDown, (u) => {
|
|
660
|
+
const m = g.current !== "", S = u.ctrlKey || u.altKey || u.metaKey, x = u.target;
|
|
661
|
+
(x.closest("button") ?? x.closest("div")) === u.currentTarget && (!S && u.key.length === 1 && f(u.key), !(m && u.key === " ") && So.includes(u.key) && (p(), u.preventDefault()));
|
|
636
662
|
})
|
|
637
663
|
}
|
|
638
664
|
) });
|
|
639
665
|
}
|
|
640
666
|
);
|
|
641
|
-
De.displayName =
|
|
642
|
-
const
|
|
667
|
+
De.displayName = gt;
|
|
668
|
+
const xt = "SelectValue", ke = r.forwardRef(
|
|
643
669
|
(n, s) => {
|
|
644
|
-
const { __scopeSelect: e, children: t, placeholder: o, ...l } = n, i =
|
|
645
|
-
|
|
670
|
+
const { __scopeSelect: e, children: t, placeholder: o, ...l } = n, i = q(xt, e), { onValueNodeHasChildrenChange: c } = i, a = t !== void 0, g = _(s, i.onValueNodeChange), [f, v] = r.useState([]), p = he(e);
|
|
671
|
+
H(() => {
|
|
646
672
|
c(a);
|
|
647
673
|
}, [c, a]), r.useLayoutEffect(() => {
|
|
648
674
|
if (Array.isArray(i.value) && f.length !== i.value.length) {
|
|
649
|
-
const
|
|
650
|
-
const
|
|
651
|
-
(
|
|
675
|
+
const m = setTimeout(() => {
|
|
676
|
+
const S = p().filter(
|
|
677
|
+
(x) => Array.isArray(x.value) ? !1 : i.value?.includes(x.value)
|
|
652
678
|
);
|
|
653
|
-
|
|
679
|
+
v(S);
|
|
654
680
|
});
|
|
655
681
|
return () => {
|
|
656
|
-
clearTimeout(
|
|
682
|
+
clearTimeout(m);
|
|
657
683
|
};
|
|
658
684
|
}
|
|
659
|
-
}, [i.value,
|
|
685
|
+
}, [i.value, p, f]);
|
|
660
686
|
let u;
|
|
661
687
|
if ((i.value === void 0 || i.value.length === 0) && o !== void 0)
|
|
662
688
|
u = /* @__PURE__ */ d("span", { children: o });
|
|
663
689
|
else if (typeof t == "function")
|
|
664
690
|
if (Array.isArray(i.value)) {
|
|
665
|
-
const
|
|
666
|
-
const
|
|
667
|
-
return
|
|
691
|
+
const m = i.value.map((S) => {
|
|
692
|
+
const x = f.find((C) => C.value === S);
|
|
693
|
+
return x ? t({ value: S, textValue: x?.textValue }) : null;
|
|
668
694
|
});
|
|
669
|
-
u =
|
|
695
|
+
u = m.every((S) => S === null) ? o : m;
|
|
670
696
|
} else
|
|
671
697
|
u = t(i.value);
|
|
672
698
|
else
|
|
673
699
|
u = t;
|
|
674
|
-
return /* @__PURE__ */ d(N.span, { ...l, ref:
|
|
700
|
+
return /* @__PURE__ */ d(N.span, { ...l, ref: g, children: u || null });
|
|
675
701
|
}
|
|
676
702
|
);
|
|
677
|
-
ke.displayName =
|
|
678
|
-
const
|
|
703
|
+
ke.displayName = xt;
|
|
704
|
+
const Eo = "SelectIcon", Fe = r.forwardRef(
|
|
679
705
|
(n, s) => {
|
|
680
706
|
const { __scopeSelect: e, children: t, ...o } = n;
|
|
681
707
|
return /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...o, ref: s, children: t || "▼" });
|
|
682
708
|
}
|
|
683
709
|
);
|
|
710
|
+
Fe.displayName = Eo;
|
|
711
|
+
const Po = "SelectPortal", Le = (n) => /* @__PURE__ */ d(lt, { asChild: !0, ...n });
|
|
684
712
|
Le.displayName = Po;
|
|
685
|
-
const
|
|
686
|
-
Fe.displayName = Vo;
|
|
687
|
-
const ne = "SelectContent", Be = r.forwardRef(
|
|
713
|
+
const re = "SelectContent", Be = r.forwardRef(
|
|
688
714
|
(n, s) => {
|
|
689
|
-
const e =
|
|
690
|
-
if (
|
|
715
|
+
const e = q(re, n.__scopeSelect), [t, o] = r.useState();
|
|
716
|
+
if (H(() => {
|
|
691
717
|
o(new DocumentFragment());
|
|
692
718
|
}, []), !e.open) {
|
|
693
719
|
const l = t;
|
|
694
720
|
return l ? _e.createPortal(
|
|
695
|
-
/* @__PURE__ */ d(
|
|
721
|
+
/* @__PURE__ */ d(Ct, { scope: n.__scopeSelect, children: /* @__PURE__ */ d(Ce.Slot, { scope: n.__scopeSelect, children: /* @__PURE__ */ d("div", { children: n.children }) }) }),
|
|
696
722
|
l
|
|
697
723
|
) : null;
|
|
698
724
|
}
|
|
699
|
-
return /* @__PURE__ */ d(
|
|
725
|
+
return /* @__PURE__ */ d(vt, { ...n, ref: s });
|
|
700
726
|
}
|
|
701
727
|
);
|
|
702
|
-
Be.displayName =
|
|
703
|
-
const
|
|
728
|
+
Be.displayName = re;
|
|
729
|
+
const j = 10, [Ct, Q] = ae(re), Ro = "SelectContentImpl", vt = r.forwardRef(
|
|
704
730
|
(n, s) => {
|
|
705
731
|
const {
|
|
706
732
|
__scopeSelect: e,
|
|
@@ -712,111 +738,111 @@ const z = 10, [gt, J] = ae(ne), Ro = "SelectContentImpl", xt = r.forwardRef(
|
|
|
712
738
|
// PopperContent props
|
|
713
739
|
side: c,
|
|
714
740
|
sideOffset: a,
|
|
715
|
-
align:
|
|
741
|
+
align: g,
|
|
716
742
|
alignOffset: f,
|
|
717
|
-
arrowPadding:
|
|
718
|
-
collisionBoundary:
|
|
743
|
+
arrowPadding: v,
|
|
744
|
+
collisionBoundary: p,
|
|
719
745
|
collisionPadding: u,
|
|
720
|
-
sticky:
|
|
721
|
-
hideWhenDetached:
|
|
722
|
-
avoidCollisions:
|
|
746
|
+
sticky: m,
|
|
747
|
+
hideWhenDetached: S,
|
|
748
|
+
avoidCollisions: x,
|
|
723
749
|
//
|
|
724
|
-
...
|
|
725
|
-
} = n,
|
|
750
|
+
...C
|
|
751
|
+
} = n, h = q(re, e), [w, A] = r.useState(null), [V, M] = r.useState(null), E = _(s, (b) => A(b)), [k, $] = r.useState(null), [G, F] = r.useState(null), O = he(e), [L, B] = r.useState(!1), U = r.useRef(!1);
|
|
726
752
|
r.useEffect(() => {
|
|
727
753
|
if (w)
|
|
728
|
-
return
|
|
729
|
-
}, [w]),
|
|
730
|
-
const
|
|
731
|
-
(
|
|
732
|
-
const [y, ...D] = O().map((R) => R.ref.current), [I] = D.slice(-1),
|
|
733
|
-
for (const R of
|
|
734
|
-
if (R ===
|
|
754
|
+
return st(w);
|
|
755
|
+
}, [w]), ot();
|
|
756
|
+
const K = r.useCallback(
|
|
757
|
+
(b) => {
|
|
758
|
+
const [y, ...D] = O().map((R) => R.ref.current), [I] = D.slice(-1), P = document.activeElement;
|
|
759
|
+
for (const R of b)
|
|
760
|
+
if (R === P || (R?.scrollIntoView({ block: "nearest" }), R === y && V && (V.scrollTop = 0), R === I && V && (V.scrollTop = V.scrollHeight), R?.focus(), document.activeElement !== P))
|
|
735
761
|
return;
|
|
736
762
|
},
|
|
737
|
-
[O,
|
|
738
|
-
),
|
|
739
|
-
() =>
|
|
740
|
-
[
|
|
763
|
+
[O, V]
|
|
764
|
+
), X = r.useCallback(
|
|
765
|
+
() => K([k, w]),
|
|
766
|
+
[K, k, w]
|
|
741
767
|
);
|
|
742
768
|
r.useEffect(() => {
|
|
743
|
-
L &&
|
|
744
|
-
}, [L,
|
|
745
|
-
const { onOpenChange:
|
|
769
|
+
L && X();
|
|
770
|
+
}, [L, X]);
|
|
771
|
+
const { onOpenChange: Z, triggerPointerDownPosRef: W } = h;
|
|
746
772
|
r.useEffect(() => {
|
|
747
773
|
if (w) {
|
|
748
|
-
let
|
|
774
|
+
let b = { x: 0, y: 0 };
|
|
749
775
|
const y = (I) => {
|
|
750
|
-
|
|
751
|
-
x: Math.abs(Math.round(I.pageX) - (
|
|
752
|
-
y: Math.abs(Math.round(I.pageY) - (
|
|
776
|
+
b = {
|
|
777
|
+
x: Math.abs(Math.round(I.pageX) - (W.current?.x ?? 0)),
|
|
778
|
+
y: Math.abs(Math.round(I.pageY) - (W.current?.y ?? 0))
|
|
753
779
|
};
|
|
754
780
|
}, D = (I) => {
|
|
755
|
-
|
|
781
|
+
b.x <= 10 && b.y <= 10 ? I.preventDefault() : w.contains(I.target) || Z(!1), document.removeEventListener("pointermove", y), W.current = null;
|
|
756
782
|
};
|
|
757
|
-
return
|
|
783
|
+
return W.current !== null && (document.addEventListener("pointermove", y), document.addEventListener("pointerup", D, { capture: !0, once: !0 })), () => {
|
|
758
784
|
document.removeEventListener("pointermove", y), document.removeEventListener("pointerup", D, { capture: !0 });
|
|
759
785
|
};
|
|
760
786
|
}
|
|
761
|
-
}, [w,
|
|
762
|
-
const
|
|
763
|
-
return window.addEventListener("blur",
|
|
764
|
-
window.removeEventListener("blur",
|
|
787
|
+
}, [w, Z, W]), r.useEffect(() => {
|
|
788
|
+
const b = () => Z(!1);
|
|
789
|
+
return window.addEventListener("blur", b), window.addEventListener("resize", b), () => {
|
|
790
|
+
window.removeEventListener("blur", b), window.removeEventListener("resize", b);
|
|
765
791
|
};
|
|
766
|
-
}, [
|
|
767
|
-
const [ue,
|
|
768
|
-
const y = O().filter((
|
|
792
|
+
}, [Z]);
|
|
793
|
+
const [ue, z] = Vt((b) => {
|
|
794
|
+
const y = O().filter((P) => !P.disabled), D = y.find((P) => P.ref.current === document.activeElement), I = Et(y, b, D);
|
|
769
795
|
I && setTimeout(() => I.ref.current.focus());
|
|
770
796
|
}), se = r.useCallback(
|
|
771
|
-
(
|
|
772
|
-
const I =
|
|
773
|
-
(
|
|
797
|
+
(b, y, D) => {
|
|
798
|
+
const I = !U.current && !D;
|
|
799
|
+
(h.value !== void 0 && h.value === y || I) && ($(b), I && (U.current = !0));
|
|
774
800
|
},
|
|
775
|
-
[
|
|
776
|
-
), de = r.useCallback(() => w?.focus(), [w]),
|
|
777
|
-
(
|
|
778
|
-
const I =
|
|
779
|
-
(
|
|
801
|
+
[h.value]
|
|
802
|
+
), de = r.useCallback(() => w?.focus(), [w]), J = r.useCallback(
|
|
803
|
+
(b, y, D) => {
|
|
804
|
+
const I = !U.current && !D;
|
|
805
|
+
(h.value !== void 0 && (Array.isArray(y) ? y.every((R) => h.value?.includes(R)) : h.value === y) || I) && F(b);
|
|
780
806
|
},
|
|
781
|
-
[
|
|
782
|
-
), ce = t === "popper" ? Te :
|
|
807
|
+
[h.value]
|
|
808
|
+
), ce = t === "popper" ? Te : St, ee = ce === Te ? {
|
|
783
809
|
side: c,
|
|
784
810
|
sideOffset: a,
|
|
785
|
-
align:
|
|
811
|
+
align: g,
|
|
786
812
|
alignOffset: f,
|
|
787
|
-
arrowPadding:
|
|
788
|
-
collisionBoundary:
|
|
813
|
+
arrowPadding: v,
|
|
814
|
+
collisionBoundary: p,
|
|
789
815
|
collisionPadding: u,
|
|
790
|
-
sticky:
|
|
791
|
-
hideWhenDetached:
|
|
792
|
-
avoidCollisions:
|
|
816
|
+
sticky: m,
|
|
817
|
+
hideWhenDetached: S,
|
|
818
|
+
avoidCollisions: x
|
|
793
819
|
} : {};
|
|
794
820
|
return /* @__PURE__ */ d(
|
|
795
|
-
|
|
821
|
+
Ct,
|
|
796
822
|
{
|
|
797
823
|
scope: e,
|
|
798
824
|
content: w,
|
|
799
|
-
viewport:
|
|
825
|
+
viewport: V,
|
|
800
826
|
onViewportChange: M,
|
|
801
827
|
itemRefCallback: se,
|
|
802
828
|
selectedItem: k,
|
|
803
829
|
onItemLeave: de,
|
|
804
|
-
itemTextRefCallback:
|
|
805
|
-
focusSelectedItem:
|
|
806
|
-
selectedItemText:
|
|
830
|
+
itemTextRefCallback: J,
|
|
831
|
+
focusSelectedItem: X,
|
|
832
|
+
selectedItemText: G,
|
|
807
833
|
position: t,
|
|
808
834
|
isPositioned: L,
|
|
809
835
|
searchRef: ue,
|
|
810
|
-
children: /* @__PURE__ */ d(
|
|
811
|
-
|
|
836
|
+
children: /* @__PURE__ */ d(ct, { as: Ie, allowPinchZoom: !0, children: /* @__PURE__ */ d(
|
|
837
|
+
nt,
|
|
812
838
|
{
|
|
813
839
|
asChild: !0,
|
|
814
|
-
trapped:
|
|
815
|
-
onMountAutoFocus: (
|
|
816
|
-
|
|
840
|
+
trapped: h.open,
|
|
841
|
+
onMountAutoFocus: (b) => {
|
|
842
|
+
b.preventDefault();
|
|
817
843
|
},
|
|
818
|
-
onUnmountAutoFocus:
|
|
819
|
-
|
|
844
|
+
onUnmountAutoFocus: T(o, (b) => {
|
|
845
|
+
h.trigger?.focus({ preventScroll: !0 }), document.getSelection()?.empty(), b.preventDefault();
|
|
820
846
|
}),
|
|
821
847
|
children: /* @__PURE__ */ d(
|
|
822
848
|
tt,
|
|
@@ -825,38 +851,38 @@ const z = 10, [gt, J] = ae(ne), Ro = "SelectContentImpl", xt = r.forwardRef(
|
|
|
825
851
|
disableOutsidePointerEvents: !0,
|
|
826
852
|
onEscapeKeyDown: l,
|
|
827
853
|
onPointerDownOutside: i,
|
|
828
|
-
onFocusOutside: (
|
|
829
|
-
onDismiss: () =>
|
|
854
|
+
onFocusOutside: (b) => b.preventDefault(),
|
|
855
|
+
onDismiss: () => h.onOpenChange(!1),
|
|
830
856
|
children: /* @__PURE__ */ d(
|
|
831
857
|
ce,
|
|
832
858
|
{
|
|
833
859
|
role: "listbox",
|
|
834
|
-
id:
|
|
835
|
-
"data-state":
|
|
836
|
-
"aria-multiselectable":
|
|
837
|
-
dir:
|
|
838
|
-
onContextMenu: (
|
|
839
|
-
...
|
|
840
|
-
...
|
|
841
|
-
onPlaced: () =>
|
|
842
|
-
ref:
|
|
860
|
+
id: h.contentId,
|
|
861
|
+
"data-state": h.open ? "open" : "closed",
|
|
862
|
+
"aria-multiselectable": h.multi ? "true" : void 0,
|
|
863
|
+
dir: h.dir,
|
|
864
|
+
onContextMenu: (b) => b.preventDefault(),
|
|
865
|
+
...C,
|
|
866
|
+
...ee,
|
|
867
|
+
onPlaced: () => B(!0),
|
|
868
|
+
ref: E,
|
|
843
869
|
style: {
|
|
844
870
|
// flex layout so we can place the scroll buttons properly
|
|
845
871
|
display: "flex",
|
|
846
872
|
flexDirection: "column",
|
|
847
873
|
// reset the outline by default as the content MAY get focused
|
|
848
874
|
outline: "none",
|
|
849
|
-
...
|
|
875
|
+
...C.style
|
|
850
876
|
},
|
|
851
|
-
onKeyDown:
|
|
852
|
-
const y =
|
|
853
|
-
if (
|
|
854
|
-
let I = O().filter((
|
|
855
|
-
if (["ArrowUp", "End"].includes(
|
|
856
|
-
const
|
|
877
|
+
onKeyDown: T(C.onKeyDown, (b) => {
|
|
878
|
+
const y = b.ctrlKey || b.altKey || b.metaKey;
|
|
879
|
+
if (b.key === "Tab" && b.preventDefault(), !y && b.key.length === 1 && z(b.key), ["ArrowUp", "ArrowDown", "Home", "End"].includes(b.key)) {
|
|
880
|
+
let I = O().filter((P) => !P.disabled).map((P) => P.ref.current);
|
|
881
|
+
if (["ArrowUp", "End"].includes(b.key) && (I = I.slice().reverse()), ["ArrowUp", "ArrowDown"].includes(b.key)) {
|
|
882
|
+
const P = b.target, R = I.indexOf(P);
|
|
857
883
|
I = I.slice(R + 1);
|
|
858
884
|
}
|
|
859
|
-
setTimeout(() =>
|
|
885
|
+
setTimeout(() => K(I)), b.preventDefault();
|
|
860
886
|
}
|
|
861
887
|
})
|
|
862
888
|
}
|
|
@@ -869,63 +895,63 @@ const z = 10, [gt, J] = ae(ne), Ro = "SelectContentImpl", xt = r.forwardRef(
|
|
|
869
895
|
);
|
|
870
896
|
}
|
|
871
897
|
);
|
|
872
|
-
|
|
873
|
-
const No = "SelectItemAlignedPosition",
|
|
898
|
+
vt.displayName = Ro;
|
|
899
|
+
const No = "SelectItemAlignedPosition", St = r.forwardRef(
|
|
874
900
|
(n, s) => {
|
|
875
|
-
const { __scopeSelect: e, onPlaced: t, ...o } = n, l =
|
|
876
|
-
if (l.trigger && l.valueNode && c &&
|
|
877
|
-
const
|
|
901
|
+
const { __scopeSelect: e, onPlaced: t, ...o } = n, l = q(re, e), i = Q(re, e), [c, a] = r.useState(null), [g, f] = r.useState(null), v = _(s, (E) => f(E)), p = he(e), u = r.useRef(!1), m = r.useRef(!0), { viewport: S, selectedItem: x, selectedItemText: C, focusSelectedItem: h } = i, w = r.useCallback(() => {
|
|
902
|
+
if (l.trigger && l.valueNode && c && g && S && x && C) {
|
|
903
|
+
const E = l.trigger.getBoundingClientRect(), k = g.getBoundingClientRect(), $ = l.valueNode.getBoundingClientRect(), G = C.getBoundingClientRect();
|
|
878
904
|
if (l.dir !== "rtl") {
|
|
879
|
-
const
|
|
880
|
-
c.style.minWidth = `${
|
|
905
|
+
const P = G.left - k.left, R = $.left - P, te = E.left - R, oe = E.width + te, Se = Math.max(oe, k.width), be = window.innerWidth - j, we = Ze(R, [j, be - Se]);
|
|
906
|
+
c.style.minWidth = `${oe}px`, c.style.left = `${we}px`;
|
|
881
907
|
} else {
|
|
882
|
-
const
|
|
883
|
-
c.style.minWidth = `${
|
|
908
|
+
const P = k.right - G.right, R = window.innerWidth - $.right - P, te = window.innerWidth - E.right - R, oe = E.width + te, Se = Math.max(oe, k.width), be = window.innerWidth - j, we = Ze(R, [j, be - Se]);
|
|
909
|
+
c.style.minWidth = `${oe}px`, c.style.right = `${we}px`;
|
|
884
910
|
}
|
|
885
|
-
const
|
|
886
|
-
if (y <=
|
|
887
|
-
const
|
|
911
|
+
const F = p(), O = window.innerHeight - j * 2, L = S.scrollHeight, B = window.getComputedStyle(g), U = parseInt(B.borderTopWidth, 10), K = parseInt(B.paddingTop, 10), X = parseInt(B.borderBottomWidth, 10), Z = parseInt(B.paddingBottom, 10), W = U + K + L + Z + X, ue = Math.min(x.offsetHeight * 5, W), z = window.getComputedStyle(S), se = parseInt(z.paddingTop, 10), de = parseInt(z.paddingBottom, 10), J = E.top + E.height / 2 - j, ce = O - J, ee = x.offsetHeight / 2, b = x.offsetTop + ee, y = U + K + b, D = W - y;
|
|
912
|
+
if (y <= J) {
|
|
913
|
+
const P = x === F[F.length - 1].ref.current;
|
|
888
914
|
c.style.bottom = "0px";
|
|
889
|
-
const R =
|
|
915
|
+
const R = g.clientHeight - S.offsetTop - S.offsetHeight, te = Math.max(
|
|
890
916
|
ce,
|
|
891
|
-
|
|
892
|
-
(
|
|
893
|
-
),
|
|
894
|
-
c.style.height = `${
|
|
917
|
+
ee + // viewport might have padding bottom, include it to avoid a scrollable viewport
|
|
918
|
+
(P ? de : 0) + R + X
|
|
919
|
+
), oe = y + te;
|
|
920
|
+
c.style.height = `${oe}px`;
|
|
895
921
|
} else {
|
|
896
|
-
const
|
|
922
|
+
const P = x === F[0].ref.current;
|
|
897
923
|
c.style.top = "0px";
|
|
898
|
-
const
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
(
|
|
924
|
+
const te = Math.max(
|
|
925
|
+
J,
|
|
926
|
+
U + S.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport
|
|
927
|
+
(P ? se : 0) + ee
|
|
902
928
|
) + D;
|
|
903
|
-
c.style.height = `${
|
|
929
|
+
c.style.height = `${te}px`, S.scrollTop = y - J + S.offsetTop;
|
|
904
930
|
}
|
|
905
|
-
c.style.margin = `${
|
|
931
|
+
c.style.margin = `${j}px 0`, c.style.minHeight = `${ue}px`, c.style.maxHeight = `${O}px`, t?.(), requestAnimationFrame(() => u.current = !0);
|
|
906
932
|
}
|
|
907
933
|
}, [
|
|
908
|
-
|
|
934
|
+
p,
|
|
909
935
|
l.trigger,
|
|
910
936
|
l.valueNode,
|
|
911
937
|
c,
|
|
912
|
-
|
|
913
|
-
|
|
938
|
+
g,
|
|
939
|
+
S,
|
|
940
|
+
x,
|
|
914
941
|
C,
|
|
915
|
-
v,
|
|
916
942
|
l.dir,
|
|
917
943
|
t
|
|
918
944
|
]);
|
|
919
|
-
|
|
920
|
-
const [A,
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
}, [
|
|
945
|
+
H(() => w(), [w]);
|
|
946
|
+
const [A, V] = r.useState();
|
|
947
|
+
H(() => {
|
|
948
|
+
g && V(window.getComputedStyle(g).zIndex);
|
|
949
|
+
}, [g]);
|
|
924
950
|
const M = r.useCallback(
|
|
925
|
-
(
|
|
926
|
-
|
|
951
|
+
(E) => {
|
|
952
|
+
E && m.current === !0 && (w(), h?.(), m.current = !1);
|
|
927
953
|
},
|
|
928
|
-
[w,
|
|
954
|
+
[w, h]
|
|
929
955
|
);
|
|
930
956
|
return /* @__PURE__ */ d(
|
|
931
957
|
_o,
|
|
@@ -948,7 +974,7 @@ const No = "SelectItemAlignedPosition", Ct = r.forwardRef(
|
|
|
948
974
|
N.div,
|
|
949
975
|
{
|
|
950
976
|
...o,
|
|
951
|
-
ref:
|
|
977
|
+
ref: v,
|
|
952
978
|
style: {
|
|
953
979
|
// When we get the height of the content, it includes borders. If we were to set
|
|
954
980
|
// the height without having `boxSizing: 'border-box'` it would be too big.
|
|
@@ -965,12 +991,12 @@ const No = "SelectItemAlignedPosition", Ct = r.forwardRef(
|
|
|
965
991
|
);
|
|
966
992
|
}
|
|
967
993
|
);
|
|
968
|
-
|
|
994
|
+
St.displayName = No;
|
|
969
995
|
const Ao = "SelectPopperPosition", Te = r.forwardRef(
|
|
970
996
|
(n, s) => {
|
|
971
|
-
const { __scopeSelect: e, align: t = "start", collisionPadding: o =
|
|
997
|
+
const { __scopeSelect: e, align: t = "start", collisionPadding: o = j, ...l } = n, i = ve(e);
|
|
972
998
|
return /* @__PURE__ */ d(
|
|
973
|
-
|
|
999
|
+
le.Content,
|
|
974
1000
|
{
|
|
975
1001
|
...i,
|
|
976
1002
|
...l,
|
|
@@ -993,11 +1019,11 @@ const Ao = "SelectPopperPosition", Te = r.forwardRef(
|
|
|
993
1019
|
);
|
|
994
1020
|
Te.displayName = Ao;
|
|
995
1021
|
const [_o, He] = ae(
|
|
996
|
-
|
|
1022
|
+
re,
|
|
997
1023
|
{}
|
|
998
|
-
),
|
|
1024
|
+
), Ve = "SelectViewport", $e = r.forwardRef(
|
|
999
1025
|
(n, s) => {
|
|
1000
|
-
const { __scopeSelect: e, ...t } = n, o =
|
|
1026
|
+
const { __scopeSelect: e, ...t } = n, o = Q(Ve, e), l = He(Ve, e), i = _(s, o.onViewportChange), c = r.useRef(0);
|
|
1001
1027
|
return /* @__PURE__ */ Ne(Ae, { children: [
|
|
1002
1028
|
/* @__PURE__ */ d(
|
|
1003
1029
|
"style",
|
|
@@ -1023,49 +1049,49 @@ const [_o, He] = ae(
|
|
|
1023
1049
|
overflow: "auto",
|
|
1024
1050
|
...t.style
|
|
1025
1051
|
},
|
|
1026
|
-
onScroll:
|
|
1027
|
-
const
|
|
1028
|
-
if (
|
|
1029
|
-
const
|
|
1030
|
-
if (
|
|
1031
|
-
const u = window.innerHeight -
|
|
1032
|
-
if (
|
|
1033
|
-
const
|
|
1034
|
-
f.style.height = `${
|
|
1052
|
+
onScroll: T(t.onScroll, (a) => {
|
|
1053
|
+
const g = a.currentTarget, { contentWrapper: f, shouldExpandOnScrollRef: v } = l;
|
|
1054
|
+
if (v?.current && f) {
|
|
1055
|
+
const p = Math.abs(c.current - g.scrollTop);
|
|
1056
|
+
if (p > 0) {
|
|
1057
|
+
const u = window.innerHeight - j * 2, m = parseFloat(f.style.minHeight), S = parseFloat(f.style.height), x = Math.max(m, S);
|
|
1058
|
+
if (x < u) {
|
|
1059
|
+
const C = x + p, h = Math.min(u, C), w = C - h;
|
|
1060
|
+
f.style.height = `${h}px`, f.style.bottom === "0px" && (g.scrollTop = w > 0 ? w : 0, f.style.justifyContent = "flex-end");
|
|
1035
1061
|
}
|
|
1036
1062
|
}
|
|
1037
1063
|
}
|
|
1038
|
-
c.current =
|
|
1064
|
+
c.current = g.scrollTop;
|
|
1039
1065
|
})
|
|
1040
1066
|
}
|
|
1041
1067
|
) })
|
|
1042
1068
|
] });
|
|
1043
1069
|
}
|
|
1044
1070
|
);
|
|
1045
|
-
$e.displayName =
|
|
1046
|
-
const
|
|
1071
|
+
$e.displayName = Ve;
|
|
1072
|
+
const bt = "SelectGroup", [Mo, Oo] = ae(bt), Ue = r.forwardRef(
|
|
1047
1073
|
(n, s) => {
|
|
1048
|
-
const { __scopeSelect: e, ...t } = n, o =
|
|
1074
|
+
const { __scopeSelect: e, ...t } = n, o = ne();
|
|
1049
1075
|
return /* @__PURE__ */ d(Mo, { scope: e, id: o, children: /* @__PURE__ */ d(N.div, { role: "group", "aria-labelledby": o, ...t, ref: s }) });
|
|
1050
1076
|
}
|
|
1051
1077
|
);
|
|
1052
|
-
Ue.displayName =
|
|
1053
|
-
const
|
|
1078
|
+
Ue.displayName = bt;
|
|
1079
|
+
const wt = "SelectLabel", Ke = r.forwardRef(
|
|
1054
1080
|
(n, s) => {
|
|
1055
|
-
const { __scopeSelect: e, ...t } = n, o = Oo(
|
|
1081
|
+
const { __scopeSelect: e, ...t } = n, o = Oo(wt, e);
|
|
1056
1082
|
return /* @__PURE__ */ d(N.div, { id: o.id, ...t, ref: s });
|
|
1057
1083
|
}
|
|
1058
1084
|
);
|
|
1059
|
-
Ke.displayName =
|
|
1060
|
-
const
|
|
1085
|
+
Ke.displayName = wt;
|
|
1086
|
+
const ge = "SelectItem", [Do, yt] = ae(ge), We = r.forwardRef(
|
|
1061
1087
|
(n, s) => {
|
|
1062
|
-
const { __scopeSelect: e, value: t, disabled: o = !1, textValue: l, ...i } = n, c =
|
|
1088
|
+
const { __scopeSelect: e, value: t, disabled: o = !1, textValue: l, ...i } = n, c = q(ge, e), a = Q(ge, e), g = typeof t == "string" ? Array.isArray(c.value) ? c.value.includes(t) : c.value === t : t.every((h) => c.value?.includes(h)), f = Array.isArray(c.value) && Array.isArray(t) && t.some((h) => c.value?.includes(h)), [v, p] = r.useState(l ?? ""), [u, m] = r.useState(!1), S = _(
|
|
1063
1089
|
s,
|
|
1064
|
-
(
|
|
1065
|
-
),
|
|
1090
|
+
(h) => a.itemRefCallback?.(h, t, o)
|
|
1091
|
+
), x = ne(), C = () => {
|
|
1066
1092
|
if (!o) {
|
|
1067
|
-
let
|
|
1068
|
-
f && !
|
|
1093
|
+
let h = c.multi && typeof t == "string" ? [t] : t;
|
|
1094
|
+
f && !g ? c.onValueChange(h) : Array.isArray(c.value) && (h = Pt(t, c.value)), c.onValueChange(h), c.multi || c.onOpenChange(!1);
|
|
1069
1095
|
}
|
|
1070
1096
|
};
|
|
1071
1097
|
if (!c.multi && Array.isArray(t))
|
|
@@ -1076,37 +1102,37 @@ const xe = "SelectItem", [Do, bt] = ae(xe), We = r.forwardRef(
|
|
|
1076
1102
|
scope: e,
|
|
1077
1103
|
value: t,
|
|
1078
1104
|
disabled: o,
|
|
1079
|
-
textId:
|
|
1080
|
-
isSelected:
|
|
1105
|
+
textId: x,
|
|
1106
|
+
isSelected: g,
|
|
1081
1107
|
isIntermediate: f,
|
|
1082
|
-
onItemTextChange: r.useCallback((
|
|
1083
|
-
|
|
1108
|
+
onItemTextChange: r.useCallback((h) => {
|
|
1109
|
+
p((w) => w || (h?.textContent ?? "").trim());
|
|
1084
1110
|
}, []),
|
|
1085
|
-
children: /* @__PURE__ */ d(Ce.ItemSlot, { scope: e, value: t, disabled: o, textValue:
|
|
1111
|
+
children: /* @__PURE__ */ d(Ce.ItemSlot, { scope: e, value: t, disabled: o, textValue: v, children: /* @__PURE__ */ d(
|
|
1086
1112
|
N.div,
|
|
1087
1113
|
{
|
|
1088
1114
|
role: "option",
|
|
1089
|
-
"aria-labelledby":
|
|
1115
|
+
"aria-labelledby": x,
|
|
1090
1116
|
"data-highlighted": u ? "" : void 0,
|
|
1091
|
-
"aria-selected": c.multi ? void 0 :
|
|
1092
|
-
"aria-checked": c.multi ?
|
|
1093
|
-
"data-state":
|
|
1117
|
+
"aria-selected": c.multi ? void 0 : g && u,
|
|
1118
|
+
"aria-checked": c.multi ? g : void 0,
|
|
1119
|
+
"data-state": g ? "checked" : "unchecked",
|
|
1094
1120
|
"aria-disabled": o || void 0,
|
|
1095
1121
|
"data-disabled": o ? "" : void 0,
|
|
1096
1122
|
tabIndex: o ? void 0 : -1,
|
|
1097
1123
|
...i,
|
|
1098
|
-
ref:
|
|
1099
|
-
onFocus:
|
|
1100
|
-
onBlur:
|
|
1101
|
-
onPointerUp:
|
|
1102
|
-
onPointerMove:
|
|
1103
|
-
o ? a.onItemLeave?.() :
|
|
1124
|
+
ref: S,
|
|
1125
|
+
onFocus: T(i.onFocus, () => m(!0)),
|
|
1126
|
+
onBlur: T(i.onBlur, () => m(!1)),
|
|
1127
|
+
onPointerUp: T(i.onPointerUp, C),
|
|
1128
|
+
onPointerMove: T(i.onPointerMove, (h) => {
|
|
1129
|
+
o ? a.onItemLeave?.() : h.currentTarget.focus({ preventScroll: !0 });
|
|
1104
1130
|
}),
|
|
1105
|
-
onPointerLeave:
|
|
1106
|
-
|
|
1131
|
+
onPointerLeave: T(i.onPointerLeave, (h) => {
|
|
1132
|
+
h.currentTarget === document.activeElement && a.onItemLeave?.();
|
|
1107
1133
|
}),
|
|
1108
|
-
onKeyDown:
|
|
1109
|
-
a.searchRef?.current !== "" &&
|
|
1134
|
+
onKeyDown: T(i.onKeyDown, (h) => {
|
|
1135
|
+
a.searchRef?.current !== "" && h.key === " " || (bo.includes(h.key) && C(), h.key === " " && h.preventDefault());
|
|
1110
1136
|
})
|
|
1111
1137
|
}
|
|
1112
1138
|
) })
|
|
@@ -1114,15 +1140,15 @@ const xe = "SelectItem", [Do, bt] = ae(xe), We = r.forwardRef(
|
|
|
1114
1140
|
);
|
|
1115
1141
|
}
|
|
1116
1142
|
);
|
|
1117
|
-
We.displayName =
|
|
1143
|
+
We.displayName = ge;
|
|
1118
1144
|
const fe = "SelectItemText", ze = r.forwardRef(
|
|
1119
1145
|
(n, s) => {
|
|
1120
|
-
const { __scopeSelect: e, className: t, style: o, ...l } = n, i =
|
|
1146
|
+
const { __scopeSelect: e, className: t, style: o, ...l } = n, i = q(fe, e), c = Q(fe, e), a = yt(fe, e), g = Vo(fe, e), [f, v] = r.useState(null), p = _(
|
|
1121
1147
|
s,
|
|
1122
|
-
(
|
|
1148
|
+
(C) => v(C),
|
|
1123
1149
|
a.onItemTextChange,
|
|
1124
|
-
(
|
|
1125
|
-
), u = f?.textContent,
|
|
1150
|
+
(C) => c.itemTextRefCallback?.(C, a.value, a.disabled)
|
|
1151
|
+
), u = f?.textContent, m = r.useMemo(
|
|
1126
1152
|
() => /* @__PURE__ */ d(
|
|
1127
1153
|
"option",
|
|
1128
1154
|
{
|
|
@@ -1133,37 +1159,37 @@ const fe = "SelectItemText", ze = r.forwardRef(
|
|
|
1133
1159
|
Array.isArray(a.value) ? a.value.join(";") : a.value
|
|
1134
1160
|
),
|
|
1135
1161
|
[a.disabled, a.value, u]
|
|
1136
|
-
), { onNativeOptionAdd:
|
|
1137
|
-
return
|
|
1138
|
-
/* @__PURE__ */ d(N.span, { id: a.textId, ...l, ref:
|
|
1162
|
+
), { onNativeOptionAdd: S, onNativeOptionRemove: x } = g;
|
|
1163
|
+
return H(() => (S(m), () => x(m)), [S, x, m]), /* @__PURE__ */ Ne(Ae, { children: [
|
|
1164
|
+
/* @__PURE__ */ d(N.span, { id: a.textId, ...l, ref: p }),
|
|
1139
1165
|
a.isSelected && i.valueNode && !i.valueNodeHasChildren ? _e.createPortal(l.children, i.valueNode) : null
|
|
1140
1166
|
] });
|
|
1141
1167
|
}
|
|
1142
1168
|
);
|
|
1143
1169
|
ze.displayName = fe;
|
|
1144
|
-
const
|
|
1170
|
+
const It = "SelectItemIndicator", Ge = r.forwardRef(
|
|
1145
1171
|
(n, s) => {
|
|
1146
|
-
const { __scopeSelect: e, children: t, ...o } = n, l =
|
|
1172
|
+
const { __scopeSelect: e, children: t, ...o } = n, l = yt(It, e);
|
|
1147
1173
|
return typeof t == "function" ? /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...o, ref: s, children: t({
|
|
1148
1174
|
isSelected: l.isSelected,
|
|
1149
1175
|
isIntermediate: l.isIntermediate
|
|
1150
1176
|
}) }) : l.isSelected ? /* @__PURE__ */ d(N.span, { "aria-hidden": !0, ...o, ref: s, children: t }) : null;
|
|
1151
1177
|
}
|
|
1152
1178
|
);
|
|
1153
|
-
Ge.displayName =
|
|
1154
|
-
const
|
|
1179
|
+
Ge.displayName = It;
|
|
1180
|
+
const Ee = "SelectScrollUpButton", je = r.forwardRef(
|
|
1155
1181
|
(n, s) => {
|
|
1156
|
-
const e =
|
|
1157
|
-
return
|
|
1182
|
+
const e = Q(Ee, n.__scopeSelect), t = He(Ee, n.__scopeSelect), [o, l] = r.useState(!1), i = _(s, t.onScrollButtonChange);
|
|
1183
|
+
return H(() => {
|
|
1158
1184
|
if (e.viewport && e.isPositioned) {
|
|
1159
1185
|
const c = e.viewport, a = () => {
|
|
1160
|
-
const
|
|
1161
|
-
l(
|
|
1186
|
+
const g = c.scrollTop > 0;
|
|
1187
|
+
l(g);
|
|
1162
1188
|
};
|
|
1163
1189
|
return a(), c.addEventListener("scroll", a), () => c.removeEventListener("scroll", a);
|
|
1164
1190
|
}
|
|
1165
1191
|
}, [e.viewport, e.isPositioned]), o ? /* @__PURE__ */ d(
|
|
1166
|
-
|
|
1192
|
+
Tt,
|
|
1167
1193
|
{
|
|
1168
1194
|
...n,
|
|
1169
1195
|
ref: i,
|
|
@@ -1175,20 +1201,20 @@ const Pe = "SelectScrollUpButton", je = r.forwardRef(
|
|
|
1175
1201
|
) : null;
|
|
1176
1202
|
}
|
|
1177
1203
|
);
|
|
1178
|
-
je.displayName =
|
|
1179
|
-
const
|
|
1204
|
+
je.displayName = Ee;
|
|
1205
|
+
const Pe = "SelectScrollDownButton", Ye = r.forwardRef(
|
|
1180
1206
|
(n, s) => {
|
|
1181
|
-
const e =
|
|
1182
|
-
return
|
|
1207
|
+
const e = Q(Pe, n.__scopeSelect), t = He(Pe, n.__scopeSelect), [o, l] = r.useState(!1), i = _(s, t.onScrollButtonChange);
|
|
1208
|
+
return H(() => {
|
|
1183
1209
|
if (e.viewport && e.isPositioned) {
|
|
1184
1210
|
const c = e.viewport, a = () => {
|
|
1185
|
-
const
|
|
1211
|
+
const g = c.scrollHeight - c.clientHeight, f = Math.ceil(c.scrollTop) < g;
|
|
1186
1212
|
l(f);
|
|
1187
1213
|
};
|
|
1188
1214
|
return a(), c.addEventListener("scroll", a), () => c.removeEventListener("scroll", a);
|
|
1189
1215
|
}
|
|
1190
1216
|
}, [e.viewport, e.isPositioned]), o ? /* @__PURE__ */ d(
|
|
1191
|
-
|
|
1217
|
+
Tt,
|
|
1192
1218
|
{
|
|
1193
1219
|
...n,
|
|
1194
1220
|
ref: i,
|
|
@@ -1200,13 +1226,13 @@ const Ve = "SelectScrollDownButton", Ye = r.forwardRef(
|
|
|
1200
1226
|
) : null;
|
|
1201
1227
|
}
|
|
1202
1228
|
);
|
|
1203
|
-
Ye.displayName =
|
|
1204
|
-
const
|
|
1229
|
+
Ye.displayName = Pe;
|
|
1230
|
+
const Tt = r.forwardRef(
|
|
1205
1231
|
(n, s) => {
|
|
1206
|
-
const { __scopeSelect: e, onAutoScroll: t, ...o } = n, l =
|
|
1232
|
+
const { __scopeSelect: e, onAutoScroll: t, ...o } = n, l = Q("SelectScrollButton", e), i = r.useRef(null), c = he(e), a = r.useCallback(() => {
|
|
1207
1233
|
i.current !== null && (window.clearInterval(i.current), i.current = null);
|
|
1208
1234
|
}, []);
|
|
1209
|
-
return r.useEffect(() => () => a(), [a]),
|
|
1235
|
+
return r.useEffect(() => () => a(), [a]), H(() => {
|
|
1210
1236
|
c().find((f) => f.ref.current === document.activeElement)?.ref.current?.scrollIntoView({ block: "nearest" });
|
|
1211
1237
|
}, [c]), /* @__PURE__ */ d(
|
|
1212
1238
|
N.div,
|
|
@@ -1215,10 +1241,10 @@ const yt = r.forwardRef(
|
|
|
1215
1241
|
...o,
|
|
1216
1242
|
ref: s,
|
|
1217
1243
|
style: { flexShrink: 0, ...o.style },
|
|
1218
|
-
onPointerMove:
|
|
1244
|
+
onPointerMove: T(o.onPointerMove, () => {
|
|
1219
1245
|
l.onItemLeave?.(), i.current === null && (i.current = window.setInterval(t, 50));
|
|
1220
1246
|
}),
|
|
1221
|
-
onPointerLeave:
|
|
1247
|
+
onPointerLeave: T(o.onPointerLeave, () => {
|
|
1222
1248
|
a();
|
|
1223
1249
|
})
|
|
1224
1250
|
}
|
|
@@ -1233,19 +1259,19 @@ const yt = r.forwardRef(
|
|
|
1233
1259
|
qe.displayName = ko;
|
|
1234
1260
|
const Re = "SelectArrow", Xe = r.forwardRef(
|
|
1235
1261
|
(n, s) => {
|
|
1236
|
-
const { __scopeSelect: e, ...t } = n, o = ve(e), l =
|
|
1237
|
-
return l.open && i.position === "popper" ? /* @__PURE__ */ d(
|
|
1262
|
+
const { __scopeSelect: e, ...t } = n, o = ve(e), l = q(Re, e), i = Q(Re, e);
|
|
1263
|
+
return l.open && i.position === "popper" ? /* @__PURE__ */ d(le.Arrow, { ...o, ...t, ref: s }) : null;
|
|
1238
1264
|
}
|
|
1239
1265
|
);
|
|
1240
1266
|
Xe.displayName = Re;
|
|
1241
|
-
const
|
|
1267
|
+
const Fo = "BubbleSelect", Lo = r.forwardRef(
|
|
1242
1268
|
(n, s) => {
|
|
1243
|
-
const { value: e, ...t } = n, o = r.useRef(null), l = _(s, o), i = _t(e), c =
|
|
1269
|
+
const { value: e, ...t } = n, o = r.useRef(null), l = _(s, o), i = _t(e), c = q(Fo, void 0);
|
|
1244
1270
|
r.useEffect(() => {
|
|
1245
|
-
const
|
|
1246
|
-
if (i !== e &&
|
|
1271
|
+
const g = o.current, f = window.HTMLSelectElement.prototype, p = Object.getOwnPropertyDescriptor(f, "value").set;
|
|
1272
|
+
if (i !== e && p) {
|
|
1247
1273
|
const u = new Event("change", { bubbles: !0 });
|
|
1248
|
-
|
|
1274
|
+
p.call(g, e), g.dispatchEvent(u);
|
|
1249
1275
|
}
|
|
1250
1276
|
}, [i, e]);
|
|
1251
1277
|
let a = e;
|
|
@@ -1260,13 +1286,13 @@ const Lo = "BubbleSelect", Fo = r.forwardRef(
|
|
|
1260
1286
|
) });
|
|
1261
1287
|
}
|
|
1262
1288
|
);
|
|
1263
|
-
|
|
1264
|
-
function
|
|
1289
|
+
Lo.displayName = "BubbleSelect";
|
|
1290
|
+
function Vt(n) {
|
|
1265
1291
|
const s = At(n), e = r.useRef(""), t = r.useRef(0), o = r.useCallback(
|
|
1266
1292
|
(i) => {
|
|
1267
1293
|
const c = e.current + i;
|
|
1268
|
-
s(c), function a(
|
|
1269
|
-
e.current =
|
|
1294
|
+
s(c), function a(g) {
|
|
1295
|
+
e.current = g, window.clearTimeout(t.current), g !== "" && (t.current = window.setTimeout(() => a(""), 1e3));
|
|
1270
1296
|
}(c);
|
|
1271
1297
|
},
|
|
1272
1298
|
[s]
|
|
@@ -1275,22 +1301,22 @@ function It(n) {
|
|
|
1275
1301
|
}, []);
|
|
1276
1302
|
return r.useEffect(() => () => window.clearTimeout(t.current), []), [e, o, l];
|
|
1277
1303
|
}
|
|
1278
|
-
function
|
|
1279
|
-
const o = s.length > 1 && Array.from(s).every((
|
|
1304
|
+
function Et(n, s, e) {
|
|
1305
|
+
const o = s.length > 1 && Array.from(s).every((g) => g === s[0]) ? s[0] : s, l = e ? n.indexOf(e) : -1;
|
|
1280
1306
|
let i = Bo(n, Math.max(l, 0));
|
|
1281
|
-
o.length === 1 && (i = i.filter((
|
|
1282
|
-
const a = i.find((
|
|
1307
|
+
o.length === 1 && (i = i.filter((g) => g !== e));
|
|
1308
|
+
const a = i.find((g) => g.textValue.toLowerCase().startsWith(o.toLowerCase()));
|
|
1283
1309
|
return a !== e ? a : void 0;
|
|
1284
1310
|
}
|
|
1285
1311
|
function Bo(n, s) {
|
|
1286
1312
|
return n.map((e, t) => n[(s + t) % n.length]);
|
|
1287
1313
|
}
|
|
1288
|
-
const
|
|
1314
|
+
const Pt = (n, s = []) => {
|
|
1289
1315
|
if (Array.isArray(n))
|
|
1290
|
-
return n.reduce((t, o) =>
|
|
1316
|
+
return n.reduce((t, o) => Pt(o, t), s);
|
|
1291
1317
|
const e = s.indexOf(n);
|
|
1292
1318
|
return e === -1 ? [...s, n] : [...s.slice(0, e), ...s.slice(e + 1)];
|
|
1293
|
-
}, Ho = Oe, $o = De, Uo = ke, Ko =
|
|
1319
|
+
}, Ho = Oe, $o = De, Uo = ke, Ko = Fe, Wo = Le, zo = Be, Go = $e, jo = Ue, Yo = Ke, qo = We, Xo = ze, Zo = Ge, Jo = je, Qo = Ye, en = qe, tn = Xe, Vn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
1294
1320
|
__proto__: null,
|
|
1295
1321
|
Arrow: tn,
|
|
1296
1322
|
Content: zo,
|
|
@@ -1308,12 +1334,12 @@ const Et = (n, s = []) => {
|
|
|
1308
1334
|
SelectArrow: Xe,
|
|
1309
1335
|
SelectContent: Be,
|
|
1310
1336
|
SelectGroup: Ue,
|
|
1311
|
-
SelectIcon:
|
|
1337
|
+
SelectIcon: Fe,
|
|
1312
1338
|
SelectItem: We,
|
|
1313
1339
|
SelectItemIndicator: Ge,
|
|
1314
1340
|
SelectItemText: ze,
|
|
1315
1341
|
SelectLabel: Ke,
|
|
1316
|
-
SelectPortal:
|
|
1342
|
+
SelectPortal: Le,
|
|
1317
1343
|
SelectScrollDownButton: Ye,
|
|
1318
1344
|
SelectScrollUpButton: je,
|
|
1319
1345
|
SelectSeparator: qe,
|
|
@@ -1328,5 +1354,6 @@ const Et = (n, s = []) => {
|
|
|
1328
1354
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
1329
1355
|
export {
|
|
1330
1356
|
Tn as Combobox,
|
|
1331
|
-
|
|
1357
|
+
Vn as Select,
|
|
1358
|
+
Rn as useCallbackRef
|
|
1332
1359
|
};
|