react-animated-select 0.7.5 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js DELETED
@@ -1,1096 +0,0 @@
1
- "use client";
2
- import { jsx as O, jsxs as q } from "react/jsx-runtime";
3
- import { createContext as we, useState as U, useRef as F, useInsertionEffect as yt, isValidElement as xe, cloneElement as bt, useMemo as _, useLayoutEffect as ne, useEffect as oe, useCallback as K, useContext as B, useEffectEvent as ot, Children as it, useSyncExternalStore as re, memo as se, Fragment as at, Component as vt, useId as wt, useImperativeHandle as xt, useReducer as Ot } from "react";
4
- import { flushSync as St, createPortal as Et } from "react-dom";
5
- import './index.css';const Y = we(null), ce = we(null), de = we(null), kt = (e, t) => {
6
- const n = typeof t == "function" ? t(e) : t;
7
- return n === e ? e : Object.keys(n).some((s) => !Object.is(n[s], e[s])) ? { ...e, ...n } : e;
8
- }, Me = (e) => {
9
- let t = e;
10
- const n = /* @__PURE__ */ new Set();
11
- return {
12
- get: () => t,
13
- set: (r) => {
14
- Object.keys(r).every((s) => Object.is(r[s], t[s])) || (t = { ...t, ...r }, n.forEach((s) => s()));
15
- },
16
- subscribe: (r) => (n.add(r), () => n.delete(r))
17
- };
18
- }, Re = (e) => {
19
- const t = F(e);
20
- yt(() => {
21
- t.current = e;
22
- });
23
- const [n] = U(() => Object.fromEntries(
24
- Object.keys(e).map((r) => [r, (...s) => t.current[r](...s)])
25
- ));
26
- return n;
27
- }, lt = (e, t) => {
28
- const [n, r] = U(e);
29
- return n === e || t(n, e) ? n : (r(e), e);
30
- }, Ct = (e, t) => e === t || !!e && !!t && Object.keys(e).length === Object.keys(t).length && Object.keys(e).every((n) => Object.is(e[n], t[n])), Ie = (e, t, n = 0) => {
31
- if (Object.is(e, t)) return !0;
32
- if (n > 12 || typeof e != "object" || typeof t != "object" || e === null || t === null || Array.isArray(e) !== Array.isArray(t)) return !1;
33
- if (e.$$typeof || t.$$typeof) return e.$$typeof === t.$$typeof && e.type === t.type && e.key === t.key && Ie(e.props, t.props, n + 1);
34
- const r = Object.keys(e);
35
- return r.length === Object.keys(t).length && r.every((s) => Object.hasOwn(t, s) && Ie(e[s], t[s], n + 1));
36
- }, Tt = /* @__PURE__ */ new Set(["style", "texts", "icons", "attrs"]), Mt = (e, t) => {
37
- const n = Object.keys(t);
38
- return n.length === Object.keys(e).length && n.every(
39
- (r) => Tt.has(r) ? Ct(e[r], t[r]) : Object.is(e[r], t[r])
40
- );
41
- }, It = (e) => lt(e, Mt), Ne = (e) => lt(e, Ie), he = {
42
- XMark: ({ className: e = "", ...t }) => /* @__PURE__ */ O(
43
- "svg",
44
- {
45
- className: e,
46
- viewBox: "0 0 320 512",
47
- fill: "currentColor",
48
- "aria-hidden": "true",
49
- height: "1em",
50
- width: "1em",
51
- ...t,
52
- children: /* @__PURE__ */ O("path", { d: "M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z" })
53
- }
54
- ),
55
- ArrowUp: ({ className: e = "", ...t }) => /* @__PURE__ */ O(
56
- "svg",
57
- {
58
- className: e,
59
- viewBox: "0 0 448 512",
60
- fill: "currentColor",
61
- "aria-hidden": "true",
62
- height: "1em",
63
- width: "1em",
64
- ...t,
65
- children: /* @__PURE__ */ O("path", { d: "M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z" })
66
- }
67
- ),
68
- Checkmark: ({ className: e = "", ...t }) => /* @__PURE__ */ O(
69
- "svg",
70
- {
71
- className: e,
72
- viewBox: "0 0 24 24",
73
- fill: "currentColor",
74
- "aria-hidden": "true",
75
- height: "1em",
76
- width: "1em",
77
- ...t,
78
- children: /* @__PURE__ */ O("path", { d: "M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z" })
79
- }
80
- )
81
- }, ae = (e, t) => {
82
- if (!e) return null;
83
- const n = (r = {}) => ({
84
- ...t,
85
- ...r,
86
- style: {
87
- ...t?.style,
88
- ...r?.style
89
- }
90
- });
91
- return typeof e == "string" ? /* @__PURE__ */ O("img", { src: e, ...n(), className: ue("rac-icon", t?.className), alt: "" }) : xe(e) ? bt(e, n(e.props)) : typeof e == "function" || typeof e == "object" && e.$$typeof ? /* @__PURE__ */ O(e, { ...n() }) : null;
92
- }, Oe = (e, t) => `${e}-${String(t).replace(/[^A-Za-z0-9-]/gu, (n) => `_${n.codePointAt(0).toString(36)}_`)}`, X = (e) => e ? "" : void 0, ue = (e, t) => t ? `${e} ${t}` : e, Ve = (e, t, n) => e.jsx || (t && "original" in e ? t(e.original, { selected: n, disabled: !!e.disabled }) : null), Be = /* @__PURE__ */ q("span", { className: "rac-dots", "aria-hidden": "true", children: [
93
- /* @__PURE__ */ O("i", {}),
94
- /* @__PURE__ */ O("i", {}),
95
- /* @__PURE__ */ O("i", {})
96
- ] }), Nt = (() => {
97
- try {
98
- return process.env.NODE_ENV !== "production";
99
- } catch {
100
- return !1;
101
- }
102
- })(), ze = /* @__PURE__ */ new Set(), le = (e, t) => {
103
- !Nt || ze.has(e) || (ze.add(e), console.warn(`[react-animated-select] ${t}`));
104
- }, Q = (e) => {
105
- e?.stopPropagation(), e?.preventDefault();
106
- }, At = { index: -1, fallback: -1, ready: !1 }, ye = ({ index: e, fallback: t }) => e === -1 ? t : e, $t = 10, Lt = 500, Dt = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End"]), jt = (e, t) => _(() => {
107
- const n = new Set(e.map((s) => s.group).filter(Boolean)), r = (s) => !!s && !s.disabled && !s.loading && (s.groupHeader ? n.has(s.name) : !s.group || t.has(s.group));
108
- return { reach: r, list: e.flatMap((s, c) => r(s) ? [c] : []) };
109
- }, [e, t]), Pt = (e, t, n, r) => {
110
- const s = e.length - 1;
111
- if (s < 0) return -1;
112
- if (n === "Home") return e[0];
113
- if (n === "End") return e[s];
114
- const c = n === "ArrowUp" || n === "PageUp" ? -1 : 1, i = e.indexOf(t);
115
- if (i === -1) return e[c > 0 ? 0 : s];
116
- const a = i + c * (n.startsWith("Page") ? $t : 1);
117
- return a >= 0 && a <= s ? e[a] : n.startsWith("Page") || r ? e[a < 0 ? 0 : s] : e[(a + e.length) % e.length];
118
- }, Rt = (e, t, n, r) => {
119
- const s = [...r].every((o) => o === r[0]), c = s ? r[0] : r, i = t.filter((o) => "original" in e[o]), a = Math.max(i.indexOf(n) + (s ? 1 : 0), 0);
120
- for (let o = 0; o < i.length; o++) {
121
- const p = i[(a + o) % i.length];
122
- if (String(e[p].name).toLowerCase().startsWith(c)) return p;
123
- }
124
- return -1;
125
- };
126
- function Vt({ props: e, state: t, setState: n, normalizedOptions: r, expandedGroups: s, selected: c, selectedIDs: i, visibility: a, setVisibility: o, modelActions: p, loadMoreOnce: l, highlightStore: g }) {
127
- const { disabled: y, multiple: h, hasMore: S, loadButton: w, loadOffset: f, loadAhead: m, icons: D, onFocus: L, onBlur: C } = e, { selectOption: j, clear: M, removeOption: u } = p, { deleting: x } = t, { reach: E, list: $ } = jt(r, s), k = F({ lastWindowFocusTime: 0, justFocused: !1, focusTimeout: null, query: "", queryTimeout: null }), V = _(() => {
128
- const d = new Set(h ? i.map((T) => T.id) : c ? [c.id] : []), v = d.size ? r.findIndex((T) => d.has(T.id) && E(T)) : -1;
129
- return v !== -1 ? v : $.find((T) => !r[T].groupHeader) ?? $[0] ?? -1;
130
- }, [r, c, i, h, E, $]), I = (d) => {
131
- !w && a && S && d >= r.length - m && l();
132
- };
133
- ne(() => {
134
- const { index: d } = g.get();
135
- g.set({ fallback: V, index: d !== -1 && E(r[d]) ? d : -1 }), I(ye(g.get()));
136
- }), oe(() => {
137
- const d = k.current, v = () => d.lastWindowFocusTime = Date.now();
138
- return window.addEventListener("focus", v), () => {
139
- window.removeEventListener("focus", v), clearTimeout(d.focusTimeout), clearTimeout(d.queryTimeout);
140
- };
141
- }, []);
142
- const A = (d) => {
143
- g.set({ index: d }), I(d);
144
- }, b = (d, v) => {
145
- const T = k.current;
146
- clearTimeout(T.queryTimeout), T.queryTimeout = setTimeout(() => T.query = "", Lt), T.query += d.toLowerCase();
147
- const H = Rt(r, $, v, T.query);
148
- H !== -1 && A(H), a || o(!0);
149
- };
150
- return Re({
151
- highlight: A,
152
- handleListScroll: (d) => {
153
- if (w) return;
154
- const { scrollTop: v, scrollHeight: T, clientHeight: H } = d.currentTarget;
155
- T - v <= H + f && l();
156
- },
157
- handleBlur: (d) => {
158
- const v = d.relatedTarget?.closest(".rac-options");
159
- d.currentTarget.contains(d.relatedTarget) || v || (C?.(d), x && n({ deleting: !1 }), a && o(!1));
160
- },
161
- // [DOC: select-behavior]
162
- handleFocus: (d) => {
163
- d.currentTarget.contains(d.relatedTarget) || L?.(d), !(y || x || document.hidden || Date.now() - k.current.lastWindowFocusTime < 100) && (a || (clearTimeout(k.current.focusTimeout), k.current.focusTimeout = setTimeout(() => k.current.justFocused = !1, 200), k.current.justFocused = !0, o(!0)));
164
- },
165
- toggleVisibility: (d) => {
166
- if (x) {
167
- Q(d), n({ deleting: !1 });
168
- return;
169
- }
170
- y || k.current.justFocused || o(!a);
171
- },
172
- handleKeyDown: (d) => {
173
- if (y || d.nativeEvent?.isComposing) return;
174
- const { key: v } = d, T = ye(g.get());
175
- if (v.length === 1 && !d.ctrlKey && !d.metaKey && !d.altKey && (v !== " " || k.current.query)) {
176
- d.preventDefault(), b(v, T);
177
- return;
178
- }
179
- if (Dt.has(v)) {
180
- d.preventDefault(), (a || v === "Home" || v === "End") && A(Pt($, T, v, !w && S)), a || o(!0);
181
- return;
182
- }
183
- switch (v) {
184
- case "Enter":
185
- case " ":
186
- d.preventDefault(), a ? T !== -1 && r[T] && (A(T), j(r[T], d)) : o(!0);
187
- break;
188
- // [DOC: select-behavior]
189
- case "Escape":
190
- if (x) n({ deleting: !1 });
191
- else if (a) o(!1);
192
- else break;
193
- Q(d);
194
- break;
195
- case "Tab":
196
- a && o(!1);
197
- break;
198
- // [DOC: select-behavior]
199
- case "Backspace":
200
- case "Delete": {
201
- const H = i.at(-1);
202
- if (h && v === "Backspace" && D.remove && H) u(H.id);
203
- else if (D.clear && (c || H)) M();
204
- else break;
205
- d.preventDefault();
206
- break;
207
- }
208
- }
209
- }
210
- });
211
- }
212
- const Bt = ["group", "disabled", "options", "items", "children"], He = ["name", "label", "id", "value"], ge = (e) => e != null && e !== "", ct = (e) => e !== null && typeof e == "object" && !Array.isArray(e), Se = (e) => ct(e) && [Object.prototype, null].includes(Object.getPrototypeOf(e)), Ht = (e) => {
213
- try {
214
- const t = String(e);
215
- return t.startsWith("[object ") ? null : t;
216
- } catch {
217
- return null;
218
- }
219
- }, Fe = (e, t = !1) => {
220
- if (t && typeof e.group == "string") return e.group;
221
- const n = He.find((c) => ge(e[c]));
222
- if (n) return String(e[n]);
223
- const r = !Se(e) && Ht(e);
224
- if (r) return r;
225
- const s = Object.entries(e).find(([c, i]) => !Bt.includes(c) && ge(i));
226
- return s ? String(s[1]) : null;
227
- }, Ft = (e) => Se(e) && ("options" in e || "group" in e && !He.some((t) => t in e)), Ke = (e, t, n, r, s, { emptyOption: c, invalidOption: i, disabledOption: a }) => {
228
- const o = `${n}-${t}`;
229
- if (e == null || e === "")
230
- return { id: o, userId: null, name: c, raw: e, disabled: !0, type: "normal", group: r, groupDisabled: s };
231
- if (typeof e == "function")
232
- return { id: o, userId: null, name: i, raw: e, disabled: !0, invalid: !0, type: "normal", group: r };
233
- if (ct(e)) {
234
- const p = s || e.disabled === !0, l = e.value !== void 0 ? e.value : e.id !== void 0 ? e.id : e, g = Fe(e) || (p ? a : c);
235
- return {
236
- id: o,
237
- userId: e.id ?? e.value ?? e.name ?? e.label,
238
- name: g,
239
- raw: l,
240
- original: e,
241
- disabled: p || g === c,
242
- type: typeof l == "boolean" ? "boolean" : "normal",
243
- group: r || e.group || null,
244
- groupDisabled: s
245
- };
246
- }
247
- return { id: o, userId: e, name: String(e), raw: e, original: e, disabled: s, type: typeof e == "boolean" ? "boolean" : "normal", group: r };
248
- }, Gt = ({
249
- options: e,
250
- jsxOptions: t,
251
- childrenFirst: n,
252
- hasMore: r,
253
- loadButton: s,
254
- loadPending: c,
255
- loadingTitle: i,
256
- emptyOption: a,
257
- invalidOption: o,
258
- disabledOption: p,
259
- emptyGroup: l
260
- }) => {
261
- const g = { emptyOption: a, invalidOption: o, disabledOption: p }, y = /* @__PURE__ */ new Map(), h = [], S = /* @__PURE__ */ new Set(), w = (u) => {
262
- let x = u;
263
- for (let E = 1; S.has(x); E++) x = `${u}~${E}`;
264
- return S.add(x), x;
265
- }, f = t.map((u, x) => {
266
- if (u.isGroupMarker) return { ...u, type: "group-marker" };
267
- const E = !u.label && !ge(u.userId) && !ge(u.value) && !u.hasJsx;
268
- return {
269
- ...u,
270
- id: w(`jsx-${u.id}`),
271
- index: x,
272
- userId: u.userId,
273
- raw: u.value,
274
- original: u.value,
275
- name: u.label || (ge(u.value) ? String(u.value) : a),
276
- disabled: !!u.disabled || E,
277
- type: typeof u.value == "boolean" ? "boolean" : "normal",
278
- group: u.group || null
279
- };
280
- });
281
- let m = 0;
282
- const D = (u, x = null, E = !1, $ = "0") => {
283
- Array.isArray(u) || (u = [u]), u.forEach((k, V) => {
284
- const I = `${$}-${V}`;
285
- if (Ft(k)) {
286
- const A = Fe(k, !0) || l;
287
- y.has(A) || y.set(A, { disabled: !!k.disabled, items: [] }), k.options ? D(k.options, A, E || !!k.disabled, I) : h.push({ id: `empty-${A}-${I}`, name: A, group: A, isPlaceholder: !0, type: "group-marker", index: m++ });
288
- } else Se(k) && !He.some((A) => A in k) && !k.group ? Object.values(k).forEach((A, b) => h.push({ ...Ke(A, `${I}-${b}`, "default", x, E, g), index: m++ })) : h.push({ ...Ke(k, I, "default", x, E, g), index: m++ });
289
- });
290
- };
291
- D(e);
292
- const L = n ? [...f, ...h] : [...h, ...f], C = [], j = /* @__PURE__ */ new Set();
293
- L.forEach((u) => {
294
- if (!u.group) {
295
- C.push({ type: "item", data: u });
296
- return;
297
- }
298
- j.has(u.group) || (j.add(u.group), C.push({ type: "group", name: u.group })), y.has(u.group) || y.set(u.group, { items: [] });
299
- const x = y.get(u.group);
300
- u.isGroupMarker ? (x.className = u.className, x.style = u.style, u.disabled && (x.disabled = !0)) : u.isPlaceholder || x.items.push(u);
301
- });
302
- const M = [];
303
- return C.forEach((u) => {
304
- if (u.type === "item") {
305
- M.push(u.data);
306
- return;
307
- }
308
- const x = y.get(u.name);
309
- M.push({
310
- className: x?.className || "",
311
- id: `group-header-${u.name}`,
312
- disabled: !!x?.disabled,
313
- style: x?.style || {},
314
- groupHeader: !0,
315
- name: u.name,
316
- type: "group"
317
- }), x?.items.forEach((E) => M.push(E));
318
- }), r && s && M.push({ id: "special-load-more-id", name: i, loadMore: !0, loading: c, type: "special" }), M;
319
- }, Rn = (e) => {
320
- const t = () => null;
321
- return t.racKind = "define", t.racRender = e, t.displayName = `defineOption(${e.name || "anonymous"})`, t;
322
- }, qe = { selected: null, selectedIDs: [] }, fe = (e) => {
323
- try {
324
- return JSON.stringify(e);
325
- } catch {
326
- return;
327
- }
328
- }, dt = (e, t) => e === t || e !== e && t !== t, be = (e) => typeof e == "object" && e !== null, Wt = (e, t) => dt(e, t) || be(e) && be(t) && fe(e) !== void 0 && fe(e) === fe(t), zt = (e, t, n, r) => {
329
- if (e == null || Array.isArray(e) && e.length === 0) return qe;
330
- const s = r.length ? new Map(t.map((l) => [l.id, l])) : null, c = s ? [...r.map((l) => s.get(l)).filter(Boolean), ...t] : t, i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map(), o = (l) => "original" in l && !i.has(l.id), p = (l) => {
331
- const g = be(l);
332
- let y = c.find((m) => o(m) && dt(m.original, l));
333
- const h = g ? fe(l) : void 0;
334
- if (!y && h !== void 0 && (y = c.find((m) => o(m) && be(m.original) && fe(m.original) === h)), y)
335
- return i.add(y.id), y;
336
- const S = String(g ? l.id || l.value || h || "object" : l), w = (a.get(S) ?? -1) + 1;
337
- a.set(S, w);
338
- const f = `virtual-${S}-${w}`;
339
- return g ? { id: f, name: Fe(l) || String(l.id || "Selected Object"), raw: l.value ?? l.id ?? l, original: l, userId: l.id ?? l.value ?? null, virtual: !0 } : { id: f, name: String(l), raw: l, original: l, userId: l, virtual: !0 };
340
- };
341
- return n ? { selected: null, selectedIDs: (Array.isArray(e) ? e : [e]).map(p) } : { selected: p(Array.isArray(e) ? e[0] : e), selectedIDs: qe.selectedIDs };
342
- }, _e = {
343
- x: ["width", "marginLeft", "marginRight", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"],
344
- y: ["height", "marginTop", "marginBottom", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]
345
- }, Kt = { x: { minWidth: "0px", maxWidth: "none" }, y: { minHeight: "0px", maxHeight: "none" } }, ut = we(null);
346
- let Ae = null;
347
- const qt = () => Ae ??= (queueMicrotask(() => {
348
- Ae = null;
349
- }), {});
350
- function ie({
351
- as: e = "div",
352
- axis: t = "y",
353
- fade: n = !1,
354
- in: r,
355
- unmountOnExit: s = !0,
356
- easing: c,
357
- duration: i,
358
- group: a,
359
- nodeRef: o,
360
- onEntered: p,
361
- onExited: l,
362
- ...g
363
- }) {
364
- const y = B(Y), h = B(ut), S = r === void 0 && !!h, w = S ? h.present : !!r, f = i ?? y?.duration ?? 300, m = c ?? y?.easing ?? "ease", D = F(null), L = o ?? D, C = F(null), j = F(!1), M = F({ restart: () => {
365
- } }), [u] = U(() => S && h.appear ? !w : w), x = F(u), [E, $] = U(!w);
366
- w && E && $(!1);
367
- const k = ot(() => {
368
- if (a?.delete(M.current), w) {
369
- C.current = null, p?.();
370
- return;
371
- }
372
- l?.(), S && h.onExited(), s && (C.current = null, $(!0));
373
- });
374
- return ne(() => {
375
- const I = L.current;
376
- if (!I) return;
377
- const A = n ? [..._e[t], "opacity"] : _e[t], b = { overflow: "hidden", textOverflow: "clip", ...Kt[t] }, d = { ...Object.fromEntries(A.map((P) => [P, P === "opacity" ? 0 : "0px"])), ...b }, v = () => {
378
- const P = getComputedStyle(I);
379
- return { ...Object.fromEntries(A.map((G) => [G, P[G]])), ...b };
380
- }, T = (P, G) => {
381
- const ee = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, z = C.current = I.animate([P, G], { duration: ee ? 0 : f, easing: m, fill: x.current ? "backwards" : "both" });
382
- if (z.onfinish = () => {
383
- C.current === z && j.current && k();
384
- }, M.current.frames = [P, G], !a) return;
385
- const R = z.timeline?.currentTime;
386
- R != null && (z.startTime = R, z.currentTime = 0), M.current.batch = qt(), a.add(M.current);
387
- }, H = () => {
388
- const [P, G] = M.current.frames, ee = C.current.effect.getComputedTiming().progress ?? 0, z = (R) => parseFloat(P[R]) + (parseFloat(G[R]) - parseFloat(P[R])) * ee;
389
- return { ...Object.fromEntries(A.map((R) => [R, R === "opacity" ? z(R) : `${z(R)}px`])), ...b };
390
- };
391
- if (M.current.restart = (P) => {
392
- const G = C.current;
393
- if (G?.playState !== "running" || !P && M.current.batch === Ae) return;
394
- const ee = H();
395
- G.cancel(), T(ee, x.current ? v() : d);
396
- }, x.current === w) {
397
- !w && !C.current && I.animate && (C.current = I.animate([d, d], { fill: "forwards" }));
398
- return;
399
- }
400
- x.current = w;
401
- const J = C.current;
402
- if (J?.playState === "running") {
403
- if (!a) {
404
- J.reverse();
405
- return;
406
- }
407
- M.current.restart(!0);
408
- } else {
409
- if (J?.cancel(), !I.animate) {
410
- k();
411
- return;
412
- }
413
- w ? T(d, v()) : T(v(), d);
414
- }
415
- a?.forEach((P) => P !== M.current && P.restart());
416
- }, [w, t, n, f, m, L, a]), ne(() => {
417
- const I = M.current;
418
- return j.current = !0, C.current?.playState === "running" && a?.add(I), () => {
419
- j.current = !1, a?.delete(I);
420
- };
421
- }, [a]), E && s ? null : /* @__PURE__ */ O(e, { ref: L, ...g });
422
- }
423
- const _t = ({ id: e, present: t, appear: n, onExited: r, children: s }) => {
424
- const c = _(() => ({ present: t, appear: n, onExited: () => r(e) }), [e, t, n, r]);
425
- return /* @__PURE__ */ O(ut.Provider, { value: c, children: s });
426
- }, Ue = (e, t, n = !0) => {
427
- const r = it.toArray(t).filter(xe), s = new Set(r.map((o) => o.key)), c = new Map(e.map((o) => [o.key, o])), i = r.map((o) => ({ key: o.key, el: o, present: !0, appear: c.get(o.key)?.appear ?? n }));
428
- let a = 0;
429
- return e.forEach((o) => {
430
- s.has(o.key) ? o.present && (a = i.findIndex((p) => p.key === o.key) + 1) : i.splice(a++, 0, o.present ? { ...o, present: !1 } : o);
431
- }), { children: t, list: i };
432
- };
433
- function $e({ children: e, hold: t = !1 }) {
434
- const [n, r] = U(() => ({ ...Ue([], e, !1), hold: t }));
435
- let s = n;
436
- s.children !== e && (s = { ...s, ...Ue(s.list, e) }), s.hold !== t && (s = { ...s, hold: t, list: t ? s.list : s.list.filter((i) => i.present) }), s !== n && r(s);
437
- const c = K((i) => r(
438
- (a) => !a.hold && a.list.some((o) => o.key === i && !o.present) ? { ...a, list: a.list.filter((o) => o.key !== i) } : a
439
- ), []);
440
- return n.list.map(
441
- ({ key: i, el: a, present: o, appear: p }) => /* @__PURE__ */ O(_t, { id: i, present: o, appear: p, onExited: c, children: a }, i)
442
- );
443
- }
444
- const ft = "rac-chip-slot", Le = "rac-flip", Ge = [], Ut = 0.25, Yt = { hoverId: null, swipedId: null, held: !1, breaks: Ge }, De = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, ve = (e) => Array.from(e.children).filter((t) => t.classList.contains(ft)), Ye = (e) => Array.from(e.children).some((t) => t.getAnimations?.().some((n) => n.constructor === Animation && n.id !== Le && n.playState === "running")), Jt = (e, t) => e.length === t.length && e.every((n, r) => n === t[r]), Xt = (e) => {
445
- const t = [];
446
- let n = -1 / 0;
447
- for (const r of e) {
448
- const s = r.getBoundingClientRect();
449
- s.top >= n - 1 && (t.push([]), n = s.bottom), t.at(-1).push(r), n = Math.max(n, s.bottom);
450
- }
451
- return t;
452
- }, gt = (e, t, n, r) => {
453
- const s = e.cloneNode(!0), { height: c, paddingInlineEnd: i } = getComputedStyle(e);
454
- s.style.cssText = `visibility: hidden; pointer-events: none; height: ${c}; min-height: 0; padding-inline-end: calc(${i} + ${n}px)`, s.querySelectorAll(`:scope > :not(.${ft})`).forEach((l) => l.remove()), r && ve(s).forEach((l) => r.has(l.dataset.id) || l.remove()), n && s.querySelectorAll(".rac-chip-del").forEach((l) => l.remove());
455
- const a = ve(s), o = new Map(a.map((l, g) => [l.dataset.id, g]));
456
- t?.slice(1).forEach((l, g) => {
457
- const y = Math.min(...l.map((S) => o.get(S) ?? 1 / 0)), h = Math.max(...t[g].map((S) => o.get(S) ?? -1).filter((S) => S < y));
458
- h >= 0 && a[h].after(Object.assign(document.createElement("div"), { className: "rac-spacer" }));
459
- }), e.style.position = "absolute", e.after(s), s.getAnimations?.({ subtree: !0 }).forEach((l) => l.effect?.getComputedTiming().endTime < 1 / 0 && l.finish());
460
- const p = Xt(a).map((l) => l.map((g) => g.dataset.id));
461
- return s.remove(), e.style.position = "", p;
462
- }, pt = (e, t) => {
463
- const n = t ? t.slice(0, -1).map((s) => s.at(-1)) : Ge, { breaks: r } = e.get();
464
- return Jt(r, n) ? r : n;
465
- }, Je = (e, t, n, r) => pt(e, r && n.length ? gt(t, null, r, new Set(n.map((s) => s.id))) : null), Xe = (e, t, n) => {
466
- n.rows = gt(t, n.rows, n.reserve), e.set({ held: !0, breaks: pt(e, n.rows) });
467
- }, Ze = (e, t, n, r) => {
468
- if (!e.animate) return;
469
- e.getAnimations().forEach((a) => a.id === Le && a.cancel());
470
- const s = e.getBoundingClientRect(), c = t.left - s.left, i = t.top - s.top;
471
- (Math.abs(c) > 0.5 || Math.abs(i) > 0.5) && e.animate([{ transform: `translate(${c}px, ${i}px)` }, { transform: "none" }], { id: Le, duration: n, easing: r });
472
- }, Zt = (e, t, n, r, s) => {
473
- if (!e || n === t.value) return;
474
- const c = getComputedStyle(e), i = t.anim ? c.height : t.root;
475
- t.anim?.cancel(), t.root = c.height;
476
- const a = !t.value || i === t.root || !e.animate || De();
477
- if (t.value = n, t.anim = null, a) return;
478
- const o = { overflow: "hidden", alignItems: "flex-start" }, p = t.anim = e.animate([{ ...o, height: i }, { ...o, height: t.root }], { duration: r, easing: s });
479
- p.onfinish = () => {
480
- t.anim === p && (t.anim = null);
481
- };
482
- };
483
- function Qt(e) {
484
- const { selectRef: t, duration: n, easing: r, multiple: s, deleteInline: c, deleteAlways: i, icons: a } = B(Y), { selectedIDs: o, deleting: p, visibility: l, active: g } = B(de), { setDeleting: y, setVisibility: h } = B(ce), [S, w] = U(0), [f] = U(() => Me(Yt)), [m] = U(() => /* @__PURE__ */ new Set()), D = re(f.subscribe, () => f.get().held, () => !1), L = re(f.subscribe, () => f.get().breaks, () => Ge), C = F({ rows: null, reserve: 0, chips: e }), j = F(null), M = F({ value: 0, root: "", anim: null }), u = F(null), x = F(null), E = c && !i && !p && !!a.remove, $ = E ? S + Ut : 0, k = s && E && !S, V = ot((b) => {
485
- const d = u.current, v = C.current;
486
- d && (b && f.get().held && Xe(f, d, v), Zt(t.current, M.current, d.offsetHeight, n, r), f.get().held || f.set({ breaks: Je(f, d, v.chips, v.reserve) }));
487
- });
488
- ne(() => {
489
- const b = C.current, d = u.current, v = b.chips !== e;
490
- Object.assign(b, { chips: e, reserve: $ }), v && d && Ye(d) && Xe(f, d, b), V(!v);
491
- }, [e, $, f]), ne(() => {
492
- const b = () => V(!0), d = typeof ResizeObserver > "u" ? null : new ResizeObserver(b);
493
- return d?.observe(u.current), document.fonts?.addEventListener("loadingdone", b), () => {
494
- d?.disconnect(), document.fonts?.removeEventListener("loadingdone", b);
495
- };
496
- }, []);
497
- const I = K(() => {
498
- const b = u.current;
499
- if (!b || !f.get().held || Ye(b)) return;
500
- const d = ve(b), v = d.map((H) => H.getBoundingClientRect()), T = Je(f, b, C.current.chips, C.current.reserve);
501
- C.current.rows = null, St(() => f.set({ held: !1, breaks: T })), De() || d.forEach((H, J) => H.isConnected && Ze(H, v[J], n, r));
502
- }, [f, n, r]), A = K(() => {
503
- u.current && (j.current = new Map(ve(u.current).map((b) => [b, b.getBoundingClientRect()])));
504
- }, []);
505
- return ne(() => {
506
- const b = j.current;
507
- !b || L !== f.get().breaks || (j.current = null, De() || b.forEach((d, v) => v.isConnected && Ze(v, d, n, r)));
508
- }, [L, e, f, n, r]), oe(() => () => M.current.anim?.cancel(), []), oe(() => {
509
- p && l && h(!1), p && (!o.length || !g) && y(!1), f.set({ hoverId: null, ...!g && { swipedId: null } });
510
- }, [o.length, p, l, g, y, h, f]), ne(() => {
511
- const b = x.current;
512
- if (!k || !b) return;
513
- const d = getComputedStyle(b);
514
- w(b.getBoundingClientRect().width + parseFloat(d.marginLeft) + parseFloat(d.marginRight));
515
- }, [k]), { chipStore: f, delGroup: m, valueRef: u, delIconRef: x, probe: k, settle: I, held: D, snapshot: A };
516
- }
517
- const Qe = 1, et = 2, en = 600, tn = 10, tt = 30, nn = se(function({ element: t, deleting: n, locked: r, chipStore: s, delGroup: c }) {
518
- const { selectRef: i, deleteInline: a, deleteAlways: o, icons: p, texts: l, valueAsOption: g, renderOption: y } = B(Y), h = !!p.remove, { setVisibility: S, setDeleting: w, removeOption: f } = B(ce), m = F({ longPressTimer: null, longPress: !1, x: 0, y: 0 }), D = re(s.subscribe, () => {
519
- const { hoverId: b, swipedId: d } = s.get();
520
- return (b === t.id ? Qe : 0) | (d === t.id ? et : 0);
521
- }, () => 0), L = !!(D & Qe), C = !!(D & et), j = K((b) => {
522
- const { clientX: d, clientY: v } = b.touches[0];
523
- Object.assign(m.current, { x: d, y: v, longPress: !1 }), clearTimeout(m.current.longPressTimer), h && (m.current.longPressTimer = setTimeout(() => {
524
- w(!0), m.current.longPress = !0, i.current?.focus(), S(!1), window.navigator.vibrate?.(50);
525
- }, en));
526
- }, [h, w, S, i]), M = K((b) => {
527
- const { clientX: d, clientY: v } = b.touches[0], T = m.current.x - d;
528
- Math.hypot(T, m.current.y - v) > tn && clearTimeout(m.current.longPressTimer), T > tt && !C ? s.set({ hoverId: null, swipedId: t.id }) : T < -tt && C && s.set({ swipedId: null });
529
- }, [t.id, C, s]), u = K(() => clearTimeout(m.current.longPressTimer), []), x = K(() => s.set({ hoverId: t.id, swipedId: null }), [t.id, s]), E = K(() => {
530
- s.get().hoverId === t.id && s.set({ hoverId: null });
531
- }, [t.id, s]);
532
- oe(() => () => clearTimeout(m.current.longPressTimer), []);
533
- const $ = g ? Ve(t, y, !0) : null, k = $ ? /* @__PURE__ */ O("div", { className: "rac-option-jsx", children: $ }) : /* @__PURE__ */ O("span", { className: "rac-chip-text", children: t.name || l.emptyOption }), V = K((b) => {
534
- s.set({ swipedId: null }), f(t.id), Q(b);
535
- }, [t.id, f, s]), I = K((b) => {
536
- Q(b), m.current.longPress ? m.current.longPress = !1 : n && V(b);
537
- }, [n, V]), A = h && (o || !r && (L || C || n));
538
- return /* @__PURE__ */ q(
539
- "div",
540
- {
541
- className: ue("rac-chip", $ && t.className),
542
- style: $ ? t.style : void 0,
543
- ...!r && { onTouchStart: j, onTouchMove: M, onTouchEnd: u, onTouchCancel: u, onMouseEnter: x, onMouseLeave: E, onClick: I },
544
- children: [
545
- k,
546
- /* @__PURE__ */ O(
547
- ie,
548
- {
549
- "aria-label": `${l.remove} ${t.name ?? ""}`.trim(),
550
- group: a && !o && !n ? c : void 0,
551
- onMouseDown: Q,
552
- onClick: V,
553
- className: "rac-chip-del",
554
- disabled: r,
555
- tabIndex: -1,
556
- type: "button",
557
- in: A,
558
- as: "button",
559
- axis: "x",
560
- children: ae(p.remove)
561
- }
562
- )
563
- ]
564
- }
565
- );
566
- }), rn = se(function({ element: t, chipStore: n, settle: r, ...s }) {
567
- const c = re(n.subscribe, () => n.get().breaks.includes(t.id), () => !1);
568
- return /* @__PURE__ */ q(at, { children: [
569
- /* @__PURE__ */ O(ie, { className: "rac-chip-slot", onEntered: r, onExited: r, unmountOnExit: !1, "data-id": t.id, axis: "x", fade: !0, children: /* @__PURE__ */ O(nn, { element: t, chipStore: n, ...s }) }),
570
- c && /* @__PURE__ */ O("div", { className: "rac-spacer" })
571
- ] });
572
- }), sn = { position: "absolute", visibility: "hidden", pointerEvents: "none" }, je = [], on = () => {
573
- }, an = (e) => e == null ? "" : typeof e == "object" ? fe(e) ?? "" : String(e), ln = se(function() {
574
- const { selectRef: t, multiple: n, name: r, required: s } = B(Y), { selected: c, selectedIDs: i, disabled: a } = B(de);
575
- if (!r && !s) return null;
576
- const o = (n ? i : c ? [c] : je).map((g) => an(g.original)), p = o.length ? o : n && !s ? je : [""], l = () => t.current?.focus();
577
- return p.map(
578
- (g, y) => /* @__PURE__ */ O("input", { className: "rac-input", name: r, value: g, required: s && !y, disabled: a, tabIndex: -1, "aria-hidden": "true", onChange: on, onFocus: l }, y)
579
- );
580
- });
581
- class cn extends vt {
582
- getSnapshotBeforeUpdate(t) {
583
- return t.chips !== this.props.chips && this.props.take(), null;
584
- }
585
- componentDidUpdate() {
586
- }
587
- render() {
588
- return null;
589
- }
590
- }
591
- const nt = (e, t) => {
592
- const n = new Set(e.map((i) => i.id)), r = new Map(t.map(([i, a]) => [a.id, i])), s = t.filter(([, i]) => !n.has(i.id)), c = new Set(t.map(([i]) => i));
593
- return e.map((i) => {
594
- if (r.has(i.id)) return [r.get(i.id), i];
595
- const a = s.findIndex(([, p]) => Wt(p.original, i.original));
596
- if (a >= 0) return [s.splice(a, 1)[0][0], i];
597
- let o = i.id;
598
- for (; c.has(o); ) o += "~";
599
- return c.add(o), [o, i];
600
- });
601
- }, dn = (e) => {
602
- const [t, n] = U(() => ({ chips: e, keyed: nt(e, []) }));
603
- if (t.chips === e) return t.keyed;
604
- const r = nt(e, t.keyed);
605
- return n({ chips: e, keyed: r }), r;
606
- }, un = se(function() {
607
- const { selectedText: t, icons: n, valueAsOption: r, renderOption: s } = B(Y), { selectedIDs: c, title: i, valueOption: a, hasActualValue: o, loading: p, error: l, deleting: g, active: y } = B(de), h = c.length > 0 && !t, S = h ? c : je, { chipStore: w, delGroup: f, valueRef: m, delIconRef: D, probe: L, settle: C, held: j, snapshot: M } = Qt(S), u = dn(S), [x] = U(() => /* @__PURE__ */ new Set()), E = r && a ? Ve(a, s, !0) : null, $ = p && !l && !o, k = `${E ? a.id : i}${$ ? "-loading" : ""}`, V = a?.type === "boolean" ? String(a.raw) : void 0;
608
- return /* @__PURE__ */ q("div", { className: "rac-value", ref: m, children: [
609
- /* @__PURE__ */ O(cn, { chips: S, take: M }),
610
- /* @__PURE__ */ O($e, { children: !h && /* @__PURE__ */ q(ie, { axis: "x", fade: !0, group: x, className: ue("rac-title", E && a.className), style: E ? a.style : void 0, "data-bool": V, onEntered: C, onExited: C, children: [
611
- E ? /* @__PURE__ */ O("div", { className: "rac-option-jsx", children: E }) : i,
612
- $ && Be
613
- ] }, k) }),
614
- /* @__PURE__ */ O($e, { hold: j, children: u.map(
615
- ([I, A]) => /* @__PURE__ */ O(
616
- rn,
617
- {
618
- element: A,
619
- deleting: g,
620
- locked: !y,
621
- chipStore: w,
622
- delGroup: f,
623
- settle: C
624
- },
625
- I
626
- )
627
- ) }),
628
- L && /* @__PURE__ */ O("button", { type: "button", className: "rac-chip-del", tabIndex: -1, "aria-hidden": "true", ref: D, style: sn, children: ae(n.remove) })
629
- ] });
630
- }), fn = se(function() {
631
- const { selectRef: t, selectId: n, highlightStore: r, positionStore: s, className: c, style: i, duration: a, easing: o, deleteInline: p, icons: l, texts: g, placeholder: y, id: h, required: S, attrs: w } = B(Y), { visibility: f, active: m, hasActualValue: D, deleting: L, loading: C, loadPending: j, error: M, normalizedOptions: u } = B(de), { handleBlur: x, handleFocus: E, handleKeyDown: $, toggleVisibility: k, clear: V } = B(ce), I = re(s.subscribe, () => s.get().upward, () => !1), A = re(r.subscribe, () => {
632
- const v = f ? u[ye(r.get())] : null;
633
- return v ? Oe(n, v.id) : void 0;
634
- }, () => {
635
- }), b = !!l.clear && D && m && !L, d = !!l.arrow && m && !L;
636
- return /* @__PURE__ */ q(
637
- "div",
638
- {
639
- ...w,
640
- id: h,
641
- ref: t,
642
- style: { "--rac-duration": `${a}ms`, "--rac-ease": o, ...i },
643
- className: ue("rac-select", c),
644
- ...m && {
645
- onKeyDown: $,
646
- onFocus: E,
647
- onClick: k,
648
- onBlur: x
649
- },
650
- "aria-disabled": !m,
651
- "aria-activedescendant": A,
652
- "aria-controls": `${n}-listbox`,
653
- tabIndex: m ? 0 : -1,
654
- "aria-expanded": f,
655
- "aria-busy": C || j || void 0,
656
- "aria-label": w["aria-label"] ?? (w["aria-labelledby"] ? void 0 : y),
657
- "aria-required": S || void 0,
658
- "aria-haspopup": "listbox",
659
- role: "combobox",
660
- "data-placement": I ? "top" : "bottom",
661
- "data-inline-delete": X(p),
662
- "data-empty": X(!D),
663
- "data-deleting": X(L),
664
- "data-error": X(M),
665
- children: [
666
- /* @__PURE__ */ O(un, {}),
667
- /* @__PURE__ */ q($e, { children: [
668
- b && /* @__PURE__ */ O(ie, { as: "button", type: "button", axis: "x", className: "rac-clear", tabIndex: -1, "aria-label": g.clear, onMouseDown: Q, onClick: V, children: ae(l.clear) }, "clear"),
669
- d && /* @__PURE__ */ O(ie, { axis: "x", className: "rac-arrow", "aria-hidden": "true", children: ae(l.arrow) }, "arrow")
670
- ] }),
671
- /* @__PURE__ */ O(ln, {})
672
- ]
673
- }
674
- );
675
- }), ke = 0, gn = 1, rt = 2, ht = (e) => {
676
- const { highlightStore: t } = B(Y), n = F(null), r = re(t.subscribe, () => {
677
- const s = t.get();
678
- return ye(s) !== e ? ke : s.ready ? rt : gn;
679
- }, () => ke);
680
- return ne(() => {
681
- r === rt && n.current?.scrollIntoView?.({ block: "nearest" });
682
- }, [r]), [n, r !== ke];
683
- }, pn = se(function({ option: t, index: n, open: r, hasChildren: s }) {
684
- const { selectId: c, icons: i } = B(Y), { selectOption: a, highlight: o } = B(ce), [p, l] = ht(n), g = s && !t.disabled;
685
- return /* @__PURE__ */ q(
686
- "div",
687
- {
688
- className: ue("rac-group", t.className),
689
- onMouseEnter: () => g && o(n),
690
- onClick: (y) => a(t, y),
691
- "data-highlighted": X(l),
692
- "data-disabled": X(t.disabled),
693
- id: Oe(c, t.id),
694
- "data-open": X(r),
695
- style: t.style,
696
- ref: p,
697
- children: [
698
- /* @__PURE__ */ O("span", { className: "rac-group-text", children: t.name }),
699
- /* @__PURE__ */ O(ie, { axis: "x", in: s && !t.disabled, className: "rac-group-arrow", "aria-hidden": "true", children: ae(i.arrow) })
700
- ]
701
- }
702
- );
703
- }), hn = se(function({ option: t, index: n, isSelected: r, showCheckbox: s }) {
704
- const { selectId: c, icons: i, renderOption: a } = B(Y), { selectOption: o, highlight: p } = B(ce), [l, g] = ht(n), y = !t.disabled && !t.loading, h = Ve(t, a, r);
705
- return /* @__PURE__ */ q(
706
- "div",
707
- {
708
- className: ue("rac-option", t.className),
709
- onMouseEnter: () => y && p(n),
710
- onClick: (S) => !t.loading && o(t, S),
711
- "aria-disabled": t.disabled || t.loading,
712
- "data-invalid": X(t.invalid),
713
- "data-bool": typeof t.raw == "boolean" ? String(t.raw) : void 0,
714
- "data-highlighted": X(g),
715
- "data-loading": X(t.loading),
716
- id: Oe(c, t.id),
717
- "aria-selected": r,
718
- style: t.style,
719
- role: "option",
720
- ref: l,
721
- children: [
722
- h ? /* @__PURE__ */ O("div", { className: "rac-option-jsx", children: h }) : /* @__PURE__ */ O("span", { className: "rac-option-text", children: t.name }),
723
- t.loading && Be,
724
- s && /* @__PURE__ */ q("div", { className: "rac-check", "data-default": X(!i.checkbox), children: [
725
- ae(i.check, { className: "rac-checkmark" }),
726
- ae(i.checkbox, { className: "rac-check-icon" })
727
- ] })
728
- ]
729
- }
730
- );
731
- }), mn = se(function() {
732
- const { selectId: t, multiple: n } = B(Y), { normalizedOptions: r, selected: s, selectedIDs: c, expandedGroups: i } = B(de), a = s?.id;
733
- return _(() => {
734
- const o = new Set(c.map((f) => f.id)), p = r.reduce((f, m) => (m.group && (f[m.group] = (f[m.group] || 0) + 1), f), {}), l = [];
735
- let g = [], y = null, h = null;
736
- const S = () => {
737
- y !== null && g.length && l.push(
738
- /* @__PURE__ */ O(ie, { axis: "y", in: i.has(y), className: "rac-group-items", role: "group", "aria-labelledby": h, children: g }, `slide-${y}`)
739
- ), g = [];
740
- }, w = (f, m) => /* @__PURE__ */ O(
741
- hn,
742
- {
743
- isSelected: o.has(f.id) || a === f.id,
744
- showCheckbox: n && !f.disabled,
745
- option: f,
746
- index: m
747
- },
748
- f.id
749
- );
750
- return r.forEach((f, m) => {
751
- f.groupHeader ? (S(), y = f.name, h = Oe(t, f.id), l.push(
752
- /* @__PURE__ */ O(
753
- pn,
754
- {
755
- hasChildren: p[f.name] > 0,
756
- open: i.has(f.name),
757
- option: f,
758
- index: m
759
- },
760
- f.id
761
- )
762
- )) : f.group ? g.push(w(f, m)) : (S(), y = null, l.push(w(f, m)));
763
- }), S(), l;
764
- }, [r, a, c, i, n, t]);
765
- }), yn = (e = {}) => Object.fromEntries(Object.entries(e).filter(([t]) => t.startsWith("--"))), bn = (e, t, n, r) => {
766
- const s = e.getBoundingClientRect(), c = getComputedStyle(e), i = s.left - parseFloat(c.marginLeft) - t.left, a = n ? s.bottom + parseFloat(c.marginBottom) - t.top + r : s.top - parseFloat(c.marginTop) - t.bottom - r;
767
- Math.abs(i) > 0.5 && (e.style.left = `${t.left - i}px`), Math.abs(a) > 0.5 && (e.style[n ? "bottom" : "top"] = `${parseFloat(e.style[n ? "bottom" : "top"]) + (n ? a : -a)}px`);
768
- }, vn = ({ selectRef: e, panelRef: t, open: n, offset: r, store: s }) => {
769
- const c = F(0), i = K((o) => {
770
- const p = e.current;
771
- if (!p) return;
772
- const l = n && o ? o.scrollHeight : 0;
773
- l && (c.current = l), c.current || (c.current = parseFloat(getComputedStyle(p).getPropertyValue("--rac-list-max-height")) || 250);
774
- const g = p.getBoundingClientRect(), y = window.innerHeight - g.bottom, h = y < c.current && g.top > y;
775
- s.set({ upward: h }), !(!n || !o) && (o.style.width = `${g.width}px`, o.style.left = `${g.left}px`, o.style.top = h ? "auto" : `${g.bottom + r}px`, o.style.bottom = h ? `${window.innerHeight - g.top + r}px` : "auto", bn(o, g, h, r));
776
- }, [e, n, r, s]), a = K((o) => {
777
- o && i(o.parentElement);
778
- }, [i]);
779
- return ne(() => {
780
- const o = () => i(t.current);
781
- o(), window.addEventListener("resize", o);
782
- const p = [() => window.removeEventListener("resize", o)];
783
- if (n) {
784
- if (window.addEventListener("scroll", o, { capture: !0, passive: !0 }), p.push(() => window.removeEventListener("scroll", o, { capture: !0 })), typeof ResizeObserver < "u") {
785
- const l = new ResizeObserver(o);
786
- e.current && l.observe(e.current), t.current && l.observe(t.current), p.push(() => l.disconnect());
787
- }
788
- } else if (typeof IntersectionObserver < "u") {
789
- const l = new IntersectionObserver(o, { threshold: [0, 0.25, 0.5, 0.75, 1] });
790
- e.current && l.observe(e.current), p.push(() => l.disconnect());
791
- }
792
- return () => p.forEach((l) => l());
793
- }, [n, i, e, t]), [re(s.subscribe, () => s.get().upward, () => !1), a];
794
- }, wn = (e) => (typeof e == "function" ? e() : e) || document.body, xn = () => () => {
795
- }, On = se(function() {
796
- const { selectRef: t, selectId: n, positionStore: r, multiple: s, offset: c, duration: i, easing: a, animateOpacity: o, keepMounted: p, optionsClassName: l, style: g, container: y, hasMore: h, loadButton: S, texts: w } = B(Y), { visibility: f, normalizedOptions: m, loading: D, error: L } = B(de), { handleListScroll: C, setListReady: j } = B(ce), M = f && m.length > 0, u = re(xn, () => !0, () => !1), x = F(null), [E, $] = vn({ selectRef: t, panelRef: x, open: f && u, offset: c, store: r }), k = K(() => j(!0), [j]);
797
- return u ? Et(
798
- /* @__PURE__ */ O(
799
- ie,
800
- {
801
- axis: "y",
802
- fade: o,
803
- in: M,
804
- nodeRef: x,
805
- unmountOnExit: !p,
806
- onEntered: k,
807
- onMouseDown: (V) => V.preventDefault(),
808
- className: ue("rac-options", l),
809
- "data-placement": E ? "top" : "bottom",
810
- style: { ...yn(g), "--rac-duration": `${i}ms`, "--rac-ease": a, pointerEvents: M ? "auto" : "none", position: "fixed" },
811
- children: /* @__PURE__ */ q(
812
- "div",
813
- {
814
- onScroll: C,
815
- className: "rac-list",
816
- "aria-multiselectable": s,
817
- id: `${n}-listbox`,
818
- "aria-label": w.list,
819
- role: "listbox",
820
- tabIndex: "-1",
821
- ref: $,
822
- children: [
823
- /* @__PURE__ */ O(mn, {}),
824
- L ? /* @__PURE__ */ O("div", { className: "rac-option", "data-error": "", children: /* @__PURE__ */ O("span", { className: "rac-option-text", children: w.error }) }) : (D || !S && h) && /* @__PURE__ */ q("div", { className: "rac-option", "data-loading": "", children: [
825
- /* @__PURE__ */ O("span", { className: "rac-option-text", children: D ? w.loading : w.loadingMore }),
826
- Be
827
- ] })
828
- ]
829
- }
830
- )
831
- }
832
- ),
833
- wn(y)
834
- ) : null;
835
- }), mt = [];
836
- function Sn({ props: e, jsxOptions: t, state: n, setState: r, setVisibility: s, loadMoreOnce: c }) {
837
- const { onChange: i, disabled: a, loading: o, error: p, multiple: l, childrenFirst: g, groupsClosed: y, hasMore: h, loadButton: S, placeholder: w, selectedText: f, texts: m } = e, { disabledOption: D, emptyOption: L, invalidOption: C, emptyGroup: j } = m, { loadPending: M, internalValue: u, toggledGroups: x, picked: E } = n, $ = Ne(e.options), k = Ne(e.value), V = k !== void 0, I = V ? k : u, A = M ? m.loadingMore : m.loadMore, b = _(() => Gt({
838
- options: $,
839
- jsxOptions: t,
840
- childrenFirst: g,
841
- hasMore: h,
842
- loadButton: S,
843
- loadPending: M,
844
- loadingTitle: A,
845
- emptyOption: L,
846
- invalidOption: C,
847
- disabledOption: D,
848
- emptyGroup: j
849
- }), [$, t, g, h, S, M, A, L, C, D, j]), d = _(() => new Set(
850
- b.filter((N) => N.groupHeader && !N.disabled && y === x.has(N.name)).map((N) => N.name)
851
- ), [b, x, y]), { selected: v, selectedIDs: T } = _(() => zt(I, b, l, E), [I, b, l, E]), H = b.length > 0, J = !a && H, P = I != null && !(Array.isArray(I) && !I.length) && !(Se(I) && !Object.keys(I).length), G = P && f ? null : v, ee = _(() => P && f ? f : v ? v.name : p ? m.error : o ? m.loading : a ? m.disabled : H ? w : m.empty, [p, o, a, P, f, v, H, w, m]), z = (N) => r((W) => {
852
- const te = new Set(W.toggledGroups);
853
- return te.has(N) ? te.delete(N) : te.add(N), { toggledGroups: te };
854
- }), R = (N, W, te) => {
855
- r(V ? { picked: te } : { internalValue: N, picked: te }), i?.(N, W);
856
- }, pe = (N) => R(N.map((W) => W.original), N.map((W) => W.userId), N.map((W) => W.id)), We = Re({
857
- toggleGroup: z,
858
- selectOption: (N, W) => {
859
- if (N.groupHeader) {
860
- Q(W), N.disabled || z(N.name);
861
- return;
862
- }
863
- if (N.disabled || N.loadMore) {
864
- Q(W), N.loadMore && !N.loading && c();
865
- return;
866
- }
867
- if (l) {
868
- Q(W);
869
- const te = T.some((Ee) => Ee.id === N.id);
870
- pe(te ? T.filter((Ee) => Ee.id !== N.id) : [...T, N]);
871
- return;
872
- }
873
- v?.id !== N.id && R(N.original, N.userId, [N.id]), s(!1);
874
- },
875
- clear: (N) => {
876
- Q(N), R(l ? [] : null, l ? [] : null, mt);
877
- },
878
- removeOption: (N) => pe(T.filter((W) => W.id !== N))
879
- });
880
- return { normalizedOptions: b, expandedGroups: d, selected: v, selectedIDs: T, hasOptions: H, active: J, hasActualValue: P, title: ee, valueOption: G, actions: We };
881
- }
882
- const En = (e) => ({
883
- internalVisibility: !1,
884
- deleting: !1,
885
- loadPending: !1,
886
- toggledGroups: /* @__PURE__ */ new Set(),
887
- internalValue: e.defaultValue,
888
- picked: mt
889
- });
890
- function kn(e, t) {
891
- const { ref: n, open: r, onOpenChange: s, hasMore: c, loadMore: i, loadButton: a, error: o, disabled: p, loading: l } = e, g = wt(), y = _(() => g.replace(/:/g, ""), [g]), h = F(null);
892
- xt(n, () => h.current);
893
- const [S, w] = Ot(kt, e, En), { internalVisibility: f, deleting: m, loadPending: D } = S, [L] = U(() => Me(At)), [C] = U(() => Me({ upward: !1 })), j = r !== void 0, M = j ? !!r : f, u = F(!1), x = F(!1), E = Re({
894
- // [DOC: select-store]
895
- setVisibility: (R) => {
896
- R !== M && (j || w({ internalVisibility: R }), s?.(R));
897
- },
898
- // [DOC: select-store]
899
- loadMoreOnce: () => {
900
- if (!c || u.current) return;
901
- if (!i) return le("no loadMore", "`hasMore` is set, but there is no `loadMore` to call.");
902
- u.current = !0, w({ loadPending: !0 });
903
- const R = () => w({ loadPending: !1 });
904
- try {
905
- i()?.then?.(R, R);
906
- } catch (pe) {
907
- u.current = !1, R(), (globalThis.reportError ?? console.error)(pe);
908
- }
909
- },
910
- setListReady: (R) => L.set({ ready: R }),
911
- setDeleting: (R) => w({ deleting: R })
912
- }), $ = Sn({ props: e, jsxOptions: t, state: S, setState: w, setVisibility: E.setVisibility, loadMoreOnce: E.loadMoreOnce }), { normalizedOptions: k, expandedGroups: V, selected: I, selectedIDs: A, hasOptions: b, active: d, hasActualValue: v, title: T, valueOption: H, actions: J } = $, P = d && M, G = Vt({
913
- props: e,
914
- state: S,
915
- setState: w,
916
- normalizedOptions: k,
917
- expandedGroups: V,
918
- selected: I,
919
- selectedIDs: A,
920
- visibility: P,
921
- highlightStore: L,
922
- setVisibility: E.setVisibility,
923
- loadMoreOnce: E.loadMoreOnce,
924
- modelActions: J
925
- });
926
- oe(() => {
927
- w({ loadPending: !1 });
928
- }, [k.length, c, a]), oe(() => {
929
- D || (u.current = !1);
930
- }, [D]), oe(() => {
931
- P && h.current && document.activeElement !== h.current && h.current.focus(), P || L.set({ index: -1, ready: !1 });
932
- }, [P, L]), oe(() => {
933
- x.current && !d && E.setVisibility(!1), x.current = d;
934
- }, [d, E]);
935
- const ee = _(() => ({ ...E, ...J, ...G }), [E, J, G]), z = _(() => ({
936
- visibility: P,
937
- deleting: m,
938
- loadPending: D,
939
- expandedGroups: V,
940
- selectedIDs: A,
941
- normalizedOptions: k,
942
- selected: I,
943
- hasOptions: b,
944
- active: d,
945
- hasActualValue: v,
946
- title: T,
947
- valueOption: H,
948
- disabled: p,
949
- loading: l,
950
- error: o
951
- }), [P, m, D, V, A, k, I, b, d, v, T, H, p, l, o]);
952
- return { selectId: y, selectRef: h, highlightStore: L, positionStore: C, state: z, actions: ee };
953
- }
954
- const Cn = {}, Z = (e) => e != null && e !== "", Pe = (e) => e ? typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(Pe).join(" ").replace(/\s+/g, " ").trim() : xe(e) ? Pe(e.props.children) : "" : "", Tn = ({ name: e, label: t, id: n, value: r, className: s, style: c, children: i, disabled: a, group: o }, p, l) => {
955
- const g = Pe(i), y = r !== void 0 ? r : g;
956
- return i != null && !g && !Z(t) && !Z(e) && !Z(n) && !Z(r) && le("no text", "<Option> has content but no text to show in the title or chips. Add a `label` (or `value`), or enable `valueAsOption`."), {
957
- id: Z(n) ? String(n) : p,
958
- userId: Z(n) ? n : y,
959
- value: y,
960
- label: Z(t) ? String(t) : Z(e) ? String(e) : g || (Z(n) ? String(n) : ""),
961
- jsx: i,
962
- hasJsx: i != null,
963
- className: s,
964
- style: c,
965
- disabled: !!a,
966
- group: o || l || null
967
- };
968
- }, Mn = ({ name: e, label: t, value: n, id: r, disabled: s, className: c = "", style: i = Cn }, a) => {
969
- const o = e ?? t ?? r ?? n;
970
- return { disabled: !!s, isGroupMarker: !0, group: Z(o) ? String(o) : a, className: c, style: i };
971
- }, In = (e) => `<${typeof e == "string" ? e : e?.displayName || e?.name || "Component"}>`, me = (e, t, n = null, r = "o", s = []) => (it.toArray(e).forEach((c) => {
972
- if (!xe(c)) {
973
- le("text", `Text inside <Select> or <OptGroup> is ignored ("${String(c).slice(0, 30)}"). Wrap it in <Option>.`);
974
- return;
975
- }
976
- const i = `${r}-${String(c.key).slice(1).replace(/[:$]/g, (o) => o === ":" ? "-" : "k").replace(/[^\p{L}\p{N}-]/gu, "")}`, a = c.type?.racKind;
977
- if (c.type === at) me(c.props.children, t, n, i, s);
978
- else if (a === "option") s.push(Tn(c.props, i, n));
979
- else if (a === "define") me(c.type.racRender(c.props), t, n, i, s);
980
- else if (a === "group") {
981
- const o = Mn(c.props, t);
982
- s.push(o), me(c.props.children, t, o.group, i, s);
983
- } else {
984
- const o = In(c.type);
985
- le(`child ${o}`, `${o} inside <Select> is ignored: only <Option/>, <OptGroup/> and defineOption() components are read. Put custom content inside <Option>, or wrap the component with defineOption().`);
986
- }
987
- }), s), Nn = /* @__PURE__ */ new Set(["ref", "options", "value", "defaultValue", "onChange", "children", "loadMore", "open", "onOpenChange", "onFocus", "onBlur", "childrenFirst", "groupsClosed", "disabled", "loading", "error"]), An = /^(aria|data)-/, Ce = {
988
- options: [],
989
- value: void 0,
990
- defaultValue: void 0,
991
- onChange: void 0,
992
- multiple: !1,
993
- childrenFirst: !1,
994
- groupsClosed: !1,
995
- disabled: !1,
996
- loading: !1,
997
- error: !1,
998
- open: void 0,
999
- onOpenChange: void 0,
1000
- onFocus: void 0,
1001
- onBlur: void 0,
1002
- id: void 0,
1003
- name: void 0,
1004
- required: !1,
1005
- hasMore: !1,
1006
- loadMore: void 0,
1007
- loadButton: !1,
1008
- loadOffset: 100,
1009
- loadAhead: 3,
1010
- placeholder: "Choose option",
1011
- selectedText: void 0,
1012
- texts: {
1013
- empty: "No options",
1014
- disabled: "Disabled",
1015
- loading: "Loading",
1016
- error: "Failed to load",
1017
- clear: "Clear selection",
1018
- remove: "Remove",
1019
- loadMore: "Load more",
1020
- loadingMore: "Loading",
1021
- emptyOption: "Empty option",
1022
- invalidOption: "Invalid option",
1023
- disabledOption: "Disabled option",
1024
- emptyGroup: "Empty group",
1025
- list: "Options"
1026
- },
1027
- renderOption: void 0,
1028
- valueAsOption: !1,
1029
- icons: { arrow: he.ArrowUp, clear: he.XMark, remove: he.XMark, check: he.Checkmark, checkbox: void 0 },
1030
- deleteInline: !1,
1031
- deleteAlways: !1,
1032
- className: "",
1033
- optionsClassName: "",
1034
- style: {},
1035
- container: void 0,
1036
- duration: 300,
1037
- easing: "ease",
1038
- offset: 1,
1039
- animateOpacity: !0,
1040
- keepMounted: !1
1041
- }, st = {
1042
- visibility: "open",
1043
- setVisibility: "onOpenChange",
1044
- ownBehavior: "open without onOpenChange",
1045
- onOpen: "onOpenChange",
1046
- onClose: "onOpenChange",
1047
- unmount: "keepMounted (inverted)",
1048
- showDelete: "deleteAlways",
1049
- OpenIcon: "icons.arrow",
1050
- ClearIcon: "icons.clear",
1051
- DelIcon: "icons.remove",
1052
- Checkmark: "icons.check",
1053
- Checkbox: "icons.checkbox",
1054
- emptyText: "texts.empty",
1055
- disabledText: "texts.disabled",
1056
- loadingText: "texts.loading",
1057
- errorText: "texts.error",
1058
- clearText: "texts.clear",
1059
- removeText: "texts.remove",
1060
- loadButtonText: "texts.loadMore",
1061
- loadMoreText: "texts.loadingMore",
1062
- emptyOption: "texts.emptyOption",
1063
- invalidOption: "texts.invalidOption",
1064
- disabledOption: "texts.disabledOption"
1065
- }, Te = (e, t) => {
1066
- const n = { ...e };
1067
- for (const r in t) t[r] !== void 0 && (n[r] = t[r]);
1068
- return n;
1069
- };
1070
- function Vn(e) {
1071
- for (const h in e) h in st && le(`renamed ${h}`, `The \`${h}\` prop was removed. Use \`${st[h]}\`.`);
1072
- e.value !== void 0 && !e.onChange && le("read-only value", "`value` is set without `onChange`, so the Select is read-only. Pass `onChange`, or `defaultValue` instead of `value`.");
1073
- const t = Te(Ce, e);
1074
- t.texts = Te(Ce.texts, e.texts), t.icons = Te(Ce.icons, e.icons);
1075
- const n = t.texts.emptyGroup, r = Ne(_(() => me(t.children, n), [t.children, n])), { selectId: s, selectRef: c, highlightStore: i, positionStore: a, state: o, actions: p } = kn(t, r), l = {}, g = {};
1076
- for (const h in t) Nn.has(h) || ((An.test(h) ? g : l)[h] = t[h]);
1077
- const y = It({ ...l, attrs: g, selectId: s, selectRef: c, highlightStore: i, positionStore: a });
1078
- return /* @__PURE__ */ O(Y.Provider, { value: y, children: /* @__PURE__ */ O(ce.Provider, { value: p, children: /* @__PURE__ */ q(de.Provider, { value: o, children: [
1079
- /* @__PURE__ */ O(fn, {}),
1080
- /* @__PURE__ */ O(On, {})
1081
- ] }) }) });
1082
- }
1083
- function $n() {
1084
- return le("option outside", "<Option/> was rendered outside <Select>, or inside a component that <Select> cannot read. Use it as a direct child, or wrap the component with defineOption()."), null;
1085
- }
1086
- $n.racKind = "option";
1087
- function Ln() {
1088
- return null;
1089
- }
1090
- Ln.racKind = "group";
1091
- export {
1092
- Ln as OptGroup,
1093
- $n as Option,
1094
- Vn as Select,
1095
- Rn as defineOption
1096
- };