@floegence/floe-webapp-core 0.91.4 → 0.91.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/components/ui/PromptCard.js +105 -100
- package/dist/components/ui/Select.d.ts +2 -0
- package/dist/components/ui/Select.js +41 -41
- package/dist/floe.css +2 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,96 +1,100 @@
|
|
|
1
|
-
import { createComponent as u, Portal as
|
|
2
|
-
import { createUniqueId as
|
|
1
|
+
import { createComponent as u, Portal as ye, use as J, setAttribute as y, insert as d, spread as we, mergeProps as Se, effect as N, setStyleProperty as M, className as Ce, template as O, delegateEvents as Me } from "solid-js/web";
|
|
2
|
+
import { createUniqueId as ke, createSignal as z, onCleanup as Z, createMemo as F, createEffect as W, untrack as p, Show as E } from "solid-js";
|
|
3
3
|
import { useOverlayMask as Pe } from "../../hooks/useOverlayMask.js";
|
|
4
|
-
import { deferAfterPaint as
|
|
5
|
-
import { ensureSurfacePortalInteractionTracking as
|
|
6
|
-
import { cn as
|
|
7
|
-
import { readViewportSnapshot as
|
|
8
|
-
import { X as
|
|
9
|
-
import { Button as
|
|
4
|
+
import { deferAfterPaint as ue } from "../../utils/defer.js";
|
|
5
|
+
import { ensureSurfacePortalInteractionTracking as Ee, resolveSurfacePortalHost as $e, resolveSurfacePortalScale as De, resolveSurfacePortalBoundaryRect as Le, projectSurfacePortalPosition as Ae, readFreshInteractionSnapshot as Te, resolveSurfacePortalMount as Ie, isSurfacePortalMode as ze } from "./dialogSurfaceScope.js";
|
|
6
|
+
import { cn as fe } from "../../utils/cn.js";
|
|
7
|
+
import { readViewportSnapshot as Fe, observeViewport as Oe } from "../../viewport.js";
|
|
8
|
+
import { X as Be, Plus as He, ArrowUp as qe } from "../icons/index.js";
|
|
9
|
+
import { Button as ee } from "./Button.js";
|
|
10
10
|
import { Select as Re } from "./Select.js";
|
|
11
11
|
import { createFloatingPresence as Ve } from "./floatingPresence.js";
|
|
12
|
-
var
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
var _e = /* @__PURE__ */ O("<span class=floe-prompt-card-icon aria-hidden=true>"), Ne = /* @__PURE__ */ O("<div class=floe-prompt-card-references>"), We = /* @__PURE__ */ O("<input type=file multiple hidden tabindex=-1>"), Xe = /* @__PURE__ */ O("<div class=floe-prompt-card-feedback>"), Ke = /* @__PURE__ */ O("<div class=floe-prompt-card-positioner><div role=dialog aria-modal=false tabindex=-1 data-floe-prompt-card data-floe-input-surface data-floe-surface=floating data-floe-local-interaction-surface=true><header class=floe-prompt-card-header><h2></h2></header><div><div class=floe-prompt-card-question></div><div class=floe-prompt-card-composer><div class=floe-prompt-card-field><textarea class=floe-prompt-card-input rows=2></textarea></div><div class=floe-prompt-card-actions><div class=floe-prompt-card-tools>");
|
|
13
|
+
function at(t) {
|
|
14
|
+
Ee();
|
|
15
|
+
const te = ke(), [me, ne] = z(!1), [he, ae] = z(!1), c = () => t.busy || me();
|
|
16
|
+
let X = !1;
|
|
17
|
+
Z(() => {
|
|
18
|
+
X = !0;
|
|
19
19
|
});
|
|
20
|
-
const [h,
|
|
20
|
+
const [h, ge] = z(Fe(window)), [$, ve] = z(), [K, be] = z({
|
|
21
21
|
width: 0,
|
|
22
22
|
height: 0
|
|
23
|
-
}),
|
|
23
|
+
}), xe = F((n) => t.open ? t.anchor : n), w = Ve({
|
|
24
24
|
open: () => t.open,
|
|
25
|
-
element:
|
|
25
|
+
element: $
|
|
26
26
|
});
|
|
27
|
-
let
|
|
28
|
-
const
|
|
29
|
-
t.open && !c() && !t.inputDisabled &&
|
|
27
|
+
let g, U, D = !1, j, B;
|
|
28
|
+
const Q = () => queueMicrotask(() => {
|
|
29
|
+
!X && t.open && !c() && !t.inputDisabled && g?.isConnected && g.focus({
|
|
30
|
+
preventScroll: !0
|
|
31
|
+
});
|
|
32
|
+
}), Y = (n) => {
|
|
33
|
+
t.open && !c() && !t.inputDisabled && n.length && (t.attachment?.onFiles(n), Q());
|
|
30
34
|
};
|
|
31
35
|
W(() => {
|
|
32
|
-
(!t.open || c() || t.inputDisabled) &&
|
|
36
|
+
(!t.open || c() || t.inputDisabled) && ae(!1);
|
|
33
37
|
});
|
|
34
|
-
const
|
|
38
|
+
const L = F(() => !w.mounted() || t.portalScope === "viewport" ? {
|
|
35
39
|
host: null,
|
|
36
40
|
boundaryHost: null,
|
|
37
41
|
mountHost: null,
|
|
38
42
|
mode: "global"
|
|
39
43
|
} : $e({
|
|
40
44
|
owner: t.owner
|
|
41
|
-
})), H = () =>
|
|
45
|
+
})), H = () => ze(L()), A = F(() => (h(), K(), H() ? De(L()) : {
|
|
42
46
|
x: h().fixedScale,
|
|
43
47
|
y: h().fixedScale
|
|
44
48
|
}));
|
|
45
49
|
W(() => {
|
|
46
|
-
|
|
50
|
+
w.mounted() && Z(Oe(window, ge));
|
|
47
51
|
}), W(() => {
|
|
48
|
-
const n =
|
|
49
|
-
if (!
|
|
50
|
-
const a = () =>
|
|
52
|
+
const n = $();
|
|
53
|
+
if (!w.mounted() || !n) return;
|
|
54
|
+
const a = () => be((s) => {
|
|
51
55
|
const f = n.offsetWidth, m = n.offsetHeight;
|
|
52
56
|
return s.width === f && s.height === m ? s : {
|
|
53
57
|
width: f,
|
|
54
58
|
height: m
|
|
55
59
|
};
|
|
56
60
|
}), i = new ResizeObserver(a);
|
|
57
|
-
i.observe(n), a(),
|
|
61
|
+
i.observe(n), a(), Z(() => i.disconnect());
|
|
58
62
|
});
|
|
59
|
-
const
|
|
60
|
-
const n = h(), a = H() ?
|
|
63
|
+
const S = F(() => {
|
|
64
|
+
const n = h(), a = H() ? Le(L()) : n.visible, i = n.visible.width < 640 ? 8 : 12, s = t.viewportInsets, f = Math.max(n.visible.left, a.left) + Math.max(n.safeArea.left, s?.left ?? 0) + i, m = Math.max(n.visible.top, a.top) + Math.max(n.safeArea.top, s?.top ?? 0) + i, C = Math.min(n.visible.right, a.right) - Math.max(n.safeArea.right, s?.right ?? 0) - i, k = Math.min(n.visible.bottom, a.bottom) - Math.max(n.safeArea.bottom, s?.bottom ?? 0) - i, o = Math.max(0, C - f), v = Math.min(K().width * A().x, o), P = Math.max(0, k - m), e = Math.min(K().height * A().y, P), r = xe(), l = (R, V, _) => Math.max(V, Math.min(R, _)), b = l(r ? r.x + 8 : f + (o - v) / 2, f, C - v), x = !r || r.y + 8 + e <= k, T = r ? x ? r.y + 8 : r.y - e - 8 : m + Math.max(0, (P - e) * 0.32), I = l(T, m, k - e);
|
|
61
65
|
return {
|
|
62
|
-
x:
|
|
66
|
+
x: b,
|
|
63
67
|
y: I,
|
|
64
68
|
availableWidth: o,
|
|
65
|
-
maxHeight:
|
|
66
|
-
side: !r || I !== T ? "edge" :
|
|
67
|
-
originX: r ? l(r.x -
|
|
69
|
+
maxHeight: P,
|
|
70
|
+
side: !r || I !== T ? "edge" : x ? "bottom" : "top",
|
|
71
|
+
originX: r ? l(r.x - b, 16, v - 16) : v / 2
|
|
68
72
|
};
|
|
69
|
-
}),
|
|
70
|
-
x: (
|
|
71
|
-
y: (
|
|
72
|
-
}),
|
|
73
|
-
c() || !t.open ||
|
|
74
|
-
!t.open &&
|
|
73
|
+
}), ie = F(() => H() ? Ae(S(), L()) : {
|
|
74
|
+
x: (S().x + h().fixedOffset.left) / h().fixedScale,
|
|
75
|
+
y: (S().y + h().fixedOffset.top) / h().fixedScale
|
|
76
|
+
}), q = (n) => {
|
|
77
|
+
c() || !t.open || D || (t.onClose(), n && ue(() => p(() => {
|
|
78
|
+
!t.open && U?.isConnected && U.focus({
|
|
75
79
|
preventScroll: !0
|
|
76
80
|
});
|
|
77
81
|
})));
|
|
78
82
|
};
|
|
79
83
|
W(() => {
|
|
80
84
|
if (!t.open) return;
|
|
81
|
-
const n = document.activeElement, i = t.owner ??
|
|
82
|
-
i && !
|
|
83
|
-
!t.open || t.autoFocus === !1 || !
|
|
85
|
+
const n = document.activeElement, i = t.owner ?? Te()?.target?.closest("button, a[href], input, [tabindex]") ?? (n instanceof HTMLElement && n !== document.body ? n : void 0);
|
|
86
|
+
i && !p($)?.contains(i) && !t.containsTarget?.(i) && (U = i), queueMicrotask(() => {
|
|
87
|
+
!t.open || t.autoFocus === !1 || !g?.isConnected || (g.focus({
|
|
84
88
|
preventScroll: !0
|
|
85
|
-
}),
|
|
89
|
+
}), g.setSelectionRange(g.value.length, g.value.length));
|
|
86
90
|
});
|
|
87
91
|
}), Pe({
|
|
88
92
|
open: () => t.open,
|
|
89
|
-
root:
|
|
90
|
-
containsTarget: (n) => !!(n instanceof Node &&
|
|
91
|
-
onClose: () =>
|
|
93
|
+
root: $,
|
|
94
|
+
containsTarget: (n) => !!(n instanceof Node && $()?.contains(n)) || !!t.containsTarget?.(n) || !!(n instanceof Node && document.getElementById(B?.getAttribute("aria-controls") ?? "")?.parentElement?.contains(n)),
|
|
95
|
+
onClose: () => q(!0),
|
|
92
96
|
onInteractOutside: (n) => {
|
|
93
|
-
n.type === "pointerdown" &&
|
|
97
|
+
n.type === "pointerdown" && q(!1);
|
|
94
98
|
},
|
|
95
99
|
// Related previews belong to pointer ownership, but own their Escape command.
|
|
96
100
|
closeOnEscape: "none",
|
|
@@ -101,41 +105,41 @@ function nt(t) {
|
|
|
101
105
|
restoreFocus: !1,
|
|
102
106
|
blockHotkeys: !1
|
|
103
107
|
});
|
|
104
|
-
const
|
|
105
|
-
!t.open || c() || t.submitDisabled || (
|
|
106
|
-
if (!
|
|
108
|
+
const re = () => {
|
|
109
|
+
!t.open || c() || t.submitDisabled || (ne(!0), ue(() => p(() => {
|
|
110
|
+
if (!X)
|
|
107
111
|
try {
|
|
108
112
|
t.open && t.onSubmit();
|
|
109
113
|
} finally {
|
|
110
|
-
|
|
114
|
+
ne(!1);
|
|
111
115
|
}
|
|
112
116
|
})));
|
|
113
117
|
};
|
|
114
|
-
return u(
|
|
118
|
+
return u(E, {
|
|
115
119
|
get when() {
|
|
116
|
-
return
|
|
120
|
+
return w.mounted();
|
|
117
121
|
},
|
|
118
122
|
get children() {
|
|
119
|
-
return u(
|
|
123
|
+
return u(ye, {
|
|
120
124
|
get mount() {
|
|
121
|
-
return
|
|
125
|
+
return Ie(L());
|
|
122
126
|
},
|
|
123
127
|
get children() {
|
|
124
|
-
var n =
|
|
128
|
+
var n = Ke(), a = n.firstChild, i = a.firstChild, s = i.firstChild, f = i.nextSibling, m = f.firstChild, C = m.nextSibling, k = C.firstChild, o = k.firstChild, v = k.nextSibling, P = v.firstChild;
|
|
125
129
|
return a.$$keydown = (e) => {
|
|
126
|
-
e.key !== "Escape" || e.defaultPrevented || e.isComposing ||
|
|
127
|
-
}, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(),
|
|
130
|
+
e.key !== "Escape" || e.defaultPrevented || e.isComposing || D || B?.getAttribute("aria-expanded") === "true" && B.contains(e.target) || (e.preventDefault(), e.stopPropagation(), q(!0));
|
|
131
|
+
}, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(), J(ve, a), y(a, "aria-labelledby", te), d(i, u(E, {
|
|
128
132
|
get when() {
|
|
129
133
|
return t.icon;
|
|
130
134
|
},
|
|
131
135
|
get children() {
|
|
132
|
-
var e =
|
|
136
|
+
var e = _e();
|
|
133
137
|
return d(e, () => t.icon), e;
|
|
134
138
|
}
|
|
135
|
-
}), s),
|
|
139
|
+
}), s), y(s, "id", te), d(s, () => t.title), d(i, u(ee, {
|
|
136
140
|
variant: "ghost",
|
|
137
141
|
size: "icon",
|
|
138
|
-
icon:
|
|
142
|
+
icon: Be,
|
|
139
143
|
class: "floe-prompt-card-close",
|
|
140
144
|
get disabled() {
|
|
141
145
|
return c();
|
|
@@ -146,55 +150,55 @@ function nt(t) {
|
|
|
146
150
|
get "aria-label"() {
|
|
147
151
|
return t.closeLabel;
|
|
148
152
|
},
|
|
149
|
-
onClick: () =>
|
|
150
|
-
}), null),
|
|
153
|
+
onClick: () => q(!0)
|
|
154
|
+
}), null), we(f, Se(() => t.bodyProps, {
|
|
151
155
|
get class() {
|
|
152
|
-
return
|
|
156
|
+
return fe("floe-prompt-card-body", t.bodyProps?.class);
|
|
153
157
|
}
|
|
154
|
-
}), !1, !0), d(m, () => t.question),
|
|
155
|
-
!t.attachment || !e.dataTransfer?.files.length || (e.preventDefault(),
|
|
156
|
-
}),
|
|
158
|
+
}), !1, !0), d(m, () => t.question), C.addEventListener("drop", (e) => {
|
|
159
|
+
!t.attachment || !e.dataTransfer?.files.length || (e.preventDefault(), Y(Array.from(e.dataTransfer.files)));
|
|
160
|
+
}), C.addEventListener("dragover", (e) => {
|
|
157
161
|
t.attachment && !c() && !t.inputDisabled && e.dataTransfer?.types.includes("Files") && e.preventDefault();
|
|
158
162
|
}), o.$$keydown = (e) => {
|
|
159
|
-
e.key === "Enter" && !e.shiftKey && !e.isComposing && !
|
|
163
|
+
e.key === "Enter" && !e.shiftKey && !e.isComposing && !D && (e.preventDefault(), re());
|
|
160
164
|
}, o.addEventListener("compositionend", (e) => {
|
|
161
|
-
|
|
165
|
+
D = !1, t.onValueChange(e.currentTarget.value);
|
|
162
166
|
}), o.addEventListener("compositionupdate", (e) => t.onValueChange(e.currentTarget.value)), o.addEventListener("compositionstart", () => {
|
|
163
|
-
|
|
167
|
+
D = !0;
|
|
164
168
|
}), o.$$input = (e) => t.onValueChange(e.currentTarget.value), o.addEventListener("paste", (e) => {
|
|
165
|
-
!t.attachment || !e.clipboardData?.files.length || (e.preventDefault(),
|
|
166
|
-
}),
|
|
167
|
-
|
|
168
|
-
}, o), d(
|
|
169
|
+
!t.attachment || !e.clipboardData?.files.length || (e.preventDefault(), Y(Array.from(e.clipboardData.files)));
|
|
170
|
+
}), J((e) => {
|
|
171
|
+
g = e, t.editorRef?.(e);
|
|
172
|
+
}, o), d(C, u(E, {
|
|
169
173
|
get when() {
|
|
170
174
|
return t.references;
|
|
171
175
|
},
|
|
172
176
|
get children() {
|
|
173
|
-
var e =
|
|
177
|
+
var e = Ne();
|
|
174
178
|
return d(e, () => t.references), N(() => e.inert = !!c()), e;
|
|
175
179
|
}
|
|
176
|
-
}),
|
|
180
|
+
}), v), d(P, u(E, {
|
|
177
181
|
get when() {
|
|
178
182
|
return t.attachment;
|
|
179
183
|
},
|
|
180
184
|
get children() {
|
|
181
185
|
return [(() => {
|
|
182
|
-
var e =
|
|
186
|
+
var e = We();
|
|
183
187
|
e.addEventListener("change", (l) => {
|
|
184
|
-
|
|
185
|
-
});
|
|
186
|
-
var r =
|
|
187
|
-
return typeof r == "function" ?
|
|
188
|
-
var
|
|
189
|
-
return
|
|
188
|
+
Y(Array.from(l.currentTarget.files ?? [])), l.currentTarget.value = "";
|
|
189
|
+
}), e.addEventListener("cancel", Q);
|
|
190
|
+
var r = j;
|
|
191
|
+
return typeof r == "function" ? J(r, e) : j = e, N((l) => {
|
|
192
|
+
var b = t.attachment?.accept, x = c() || t.inputDisabled;
|
|
193
|
+
return b !== l.e && y(e, "accept", l.e = b), x !== l.t && (e.disabled = l.t = x), l;
|
|
190
194
|
}, {
|
|
191
195
|
e: void 0,
|
|
192
196
|
t: void 0
|
|
193
197
|
}), e;
|
|
194
|
-
})(), u(
|
|
198
|
+
})(), u(ee, {
|
|
195
199
|
variant: "ghost",
|
|
196
200
|
size: "icon",
|
|
197
|
-
icon:
|
|
201
|
+
icon: He,
|
|
198
202
|
class: "floe-prompt-card-attach",
|
|
199
203
|
get disabled() {
|
|
200
204
|
return c() || t.inputDisabled;
|
|
@@ -205,10 +209,10 @@ function nt(t) {
|
|
|
205
209
|
get title() {
|
|
206
210
|
return t.attachment?.label;
|
|
207
211
|
},
|
|
208
|
-
onClick: () =>
|
|
212
|
+
onClick: () => j?.click()
|
|
209
213
|
})];
|
|
210
214
|
}
|
|
211
|
-
}), null), d(
|
|
215
|
+
}), null), d(P, u(E, {
|
|
212
216
|
get when() {
|
|
213
217
|
return t.selection;
|
|
214
218
|
},
|
|
@@ -219,9 +223,10 @@ function nt(t) {
|
|
|
219
223
|
},
|
|
220
224
|
class: "floe-prompt-card-selection",
|
|
221
225
|
get open() {
|
|
222
|
-
return
|
|
226
|
+
return he();
|
|
223
227
|
},
|
|
224
|
-
onOpenChange:
|
|
228
|
+
onOpenChange: ae,
|
|
229
|
+
onOptionSelect: Q,
|
|
225
230
|
get zIndex() {
|
|
226
231
|
return (t.zIndex ?? 100) + 1;
|
|
227
232
|
},
|
|
@@ -252,10 +257,10 @@ function nt(t) {
|
|
|
252
257
|
}
|
|
253
258
|
});
|
|
254
259
|
}
|
|
255
|
-
}), null), d(
|
|
260
|
+
}), null), d(v, u(ee, {
|
|
256
261
|
variant: "primary",
|
|
257
262
|
size: "icon",
|
|
258
|
-
icon:
|
|
263
|
+
icon: qe,
|
|
259
264
|
class: "floe-prompt-card-submit",
|
|
260
265
|
get disabled() {
|
|
261
266
|
return t.submitDisabled;
|
|
@@ -272,18 +277,18 @@ function nt(t) {
|
|
|
272
277
|
get "aria-label"() {
|
|
273
278
|
return t.submitLabel;
|
|
274
279
|
},
|
|
275
|
-
onClick:
|
|
276
|
-
}), null), d(f, u(
|
|
280
|
+
onClick: re
|
|
281
|
+
}), null), d(f, u(E, {
|
|
277
282
|
get when() {
|
|
278
283
|
return t.feedback;
|
|
279
284
|
},
|
|
280
285
|
get children() {
|
|
281
|
-
var e =
|
|
286
|
+
var e = Xe();
|
|
282
287
|
return d(e, () => t.feedback), e;
|
|
283
288
|
}
|
|
284
289
|
}), null), N((e) => {
|
|
285
|
-
var r = H() ? "absolute" : "fixed", l = `${
|
|
286
|
-
return r !== e.e &&
|
|
290
|
+
var r = H() ? "absolute" : "fixed", l = `${ie().x}px`, b = `${ie().y}px`, x = `${S().availableWidth / A().x}px`, T = `${S().maxHeight / A().y}px`, I = `${S().originX / A().x}px`, G = t.zIndex ?? 100, R = fe("floe-prompt-card floe-floating-presence", t.class), V = S().side, _ = w.state(), oe = w.exiting(), le = w.exiting() ? "true" : void 0, ce = t.inputLabel, se = t.placeholder, de = c() || t.inputDisabled;
|
|
291
|
+
return r !== e.e && M(n, "position", e.e = r), l !== e.t && M(n, "left", e.t = l), b !== e.a && M(n, "top", e.a = b), x !== e.o && M(n, "--floe-prompt-max-width", e.o = x), T !== e.i && M(n, "--floe-prompt-max-height", e.i = T), I !== e.n && M(n, "--floe-prompt-origin-x", e.n = I), G !== e.s && M(n, "z-index", e.s = G), R !== e.h && Ce(a, e.h = R), V !== e.r && y(a, "data-floating-side", e.r = V), _ !== e.d && y(a, "data-floating-presence", e.d = _), oe !== e.l && (a.inert = e.l = oe), le !== e.u && y(a, "aria-hidden", e.u = le), ce !== e.c && y(o, "aria-label", e.c = ce), se !== e.w && y(o, "placeholder", e.w = se), de !== e.m && (o.disabled = e.m = de), e;
|
|
287
292
|
}, {
|
|
288
293
|
e: void 0,
|
|
289
294
|
t: void 0,
|
|
@@ -306,7 +311,7 @@ function nt(t) {
|
|
|
306
311
|
}
|
|
307
312
|
});
|
|
308
313
|
}
|
|
309
|
-
|
|
314
|
+
Me(["pointerdown", "focusin", "keydown", "input"]);
|
|
310
315
|
export {
|
|
311
|
-
|
|
316
|
+
at as PromptCard
|
|
312
317
|
};
|
|
@@ -24,6 +24,8 @@ export interface SelectBaseProps {
|
|
|
24
24
|
open?: boolean;
|
|
25
25
|
defaultOpen?: boolean;
|
|
26
26
|
onOpenChange?: (open: boolean) => void;
|
|
27
|
+
/** Runs after an enabled option is chosen, including reselecting its current value. */
|
|
28
|
+
onOptionSelect?: (option: SelectOption) => void;
|
|
27
29
|
loading?: boolean;
|
|
28
30
|
error?: string;
|
|
29
31
|
onRetry?: () => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createComponent as c, mergeProps as I, insert as o, spread as te, memo as z, effect as P, use as le, setAttribute as m, className as ve, template as w, delegateEvents as ge } from "solid-js/web";
|
|
2
2
|
import { createUniqueId as me, createSignal as B, createMemo as he, createEffect as N, untrack as be, onCleanup as ae, onMount as ye, Show as V, For as Q } from "solid-js";
|
|
3
|
-
import { cn as
|
|
3
|
+
import { cn as ne } from "../../utils/cn.js";
|
|
4
4
|
import { useFloeLocale as we } from "../../context/LocaleContext.js";
|
|
5
5
|
import { useOverlayMask as Ce } from "../../hooks/useOverlayMask.js";
|
|
6
6
|
import { SurfaceFloatingLayer as xe } from "./SurfaceFloatingLayer.js";
|
|
@@ -12,7 +12,7 @@ import { ChevronDown as $e, Check as Ee } from "../icons/index.js";
|
|
|
12
12
|
import { resolveSurfacePortalBoundaryRect as De, resolveSurfacePortalHost as Pe } from "./dialogSurfaceScope.js";
|
|
13
13
|
var Se = /* @__PURE__ */ w("<input>"), _e = /* @__PURE__ */ w("<option value>"), qe = /* @__PURE__ */ w('<div role=status class="px-2 py-2 text-caption">'), Ae = /* @__PURE__ */ w("<button type=button>"), Fe = /* @__PURE__ */ w('<div role=alert class="p-2 text-error">'), Te = /* @__PURE__ */ w('<div role=status class="p-2 text-caption">'), Be = /* @__PURE__ */ w('<div class="floe-floating-presence floe-floating-menu rounded-panel border border-[var(--floe-line)] bg-popover text-popover-foreground shadow-[var(--floe-elevation-float)] p-1"data-floe-surface=floating><div role=listbox class="max-h-64 overflow-y-auto"data-floe-local-interaction-surface=true>'), Ie = /* @__PURE__ */ w('<div class="relative min-w-0"><select tabindex=-1 aria-hidden=true class="sr-only pointer-events-none">'), Re = /* @__PURE__ */ w("<button><span class=truncate>"), ze = /* @__PURE__ */ w("<option selected>"), Ke = /* @__PURE__ */ w("<option>"), Me = /* @__PURE__ */ w('<div role=option><span class="h-3.5 w-3.5 shrink-0">');
|
|
14
14
|
function U(e) {
|
|
15
|
-
const u = we(), g = Le(), b = me(), W = () => e.id ?? g.id ?? "select-" + b, S = "options-" + b, _ = () => e.disabled ?? g.disabled, q = () => e.readOnly ?? g.readOnly, [h,
|
|
15
|
+
const u = we(), g = Le(), b = me(), W = () => e.id ?? g.id ?? "select-" + b, S = "options-" + b, _ = () => e.disabled ?? g.disabled, q = () => e.readOnly ?? g.readOnly, [h, re] = K({
|
|
16
16
|
value: () => e.open,
|
|
17
17
|
defaultValue: e.defaultOpen ?? !1,
|
|
18
18
|
onChange: (t) => e.onOpenChange?.(t)
|
|
@@ -31,19 +31,19 @@ function U(e) {
|
|
|
31
31
|
const t = M().toLocaleLowerCase(u.locale);
|
|
32
32
|
return e.options.filter((a) => [a.label, ...a.keywords ?? []].some((i) => i.toLocaleLowerCase(u.locale).includes(t)));
|
|
33
33
|
}), X = () => e.values.map((t) => e.options.find((a) => a.value === t)?.label ?? t).join(", "), y = (t) => {
|
|
34
|
-
t && (_() || q()) || (
|
|
34
|
+
t && (_() || q()) || (re(t), t || G(""));
|
|
35
35
|
}, j = (t) => {
|
|
36
36
|
_() || q() || t.disabled || (e.onValuesChange(e.multiple ? e.values.includes(t.value) ? e.values.filter((a) => a !== t.value) : [...e.values, t.value] : [t.value]), e.multiple || y(!1), x?.focus({
|
|
37
37
|
preventScroll: !0
|
|
38
|
-
}));
|
|
38
|
+
}), e.onOptionSelect?.(t));
|
|
39
39
|
}, Y = (t, a) => {
|
|
40
|
-
const i = C().map((v,
|
|
40
|
+
const i = C().map((v, n) => v.disabled ? -1 : n).filter((v) => v >= 0);
|
|
41
41
|
if (!i.length) {
|
|
42
42
|
E(-1);
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
45
|
-
const l = i.indexOf(L()),
|
|
46
|
-
E(i[
|
|
45
|
+
const l = i.indexOf(L()), r = a === "first" ? 0 : a === "last" ? i.length - 1 : l < 0 ? t < 0 ? i.length - 1 : 0 : (l + t + i.length) % i.length;
|
|
46
|
+
E(i[r]), k?.querySelector('[id="' + S + "-" + i[r] + '"]')?.scrollIntoView({
|
|
47
47
|
block: "nearest"
|
|
48
48
|
});
|
|
49
49
|
}, fe = () => {
|
|
@@ -101,7 +101,7 @@ function U(e) {
|
|
|
101
101
|
const i = (l) => {
|
|
102
102
|
clearTimeout(a), a = setTimeout(() => {
|
|
103
103
|
if (!l.defaultPrevented && (e.onValuesChange([...e.resetValues]), y(!1), O))
|
|
104
|
-
for (const
|
|
104
|
+
for (const r of O.options) r.selected = e.values.includes(r.value);
|
|
105
105
|
});
|
|
106
106
|
};
|
|
107
107
|
t?.addEventListener("reset", i), ae(() => {
|
|
@@ -152,7 +152,7 @@ function U(e) {
|
|
|
152
152
|
"data-floe-dropdown-trigger": "",
|
|
153
153
|
"data-floe-surface": "inset",
|
|
154
154
|
get class() {
|
|
155
|
-
return
|
|
155
|
+
return ne("floe-field flex w-full min-w-0 items-center justify-between gap-2 h-[var(--floe-control-height-md)] px-2.5 text-[length:var(--floe-type-control)]", e.class);
|
|
156
156
|
},
|
|
157
157
|
onKeyDown: (t) => {
|
|
158
158
|
if (!(_() || q() || t.isComposing)) {
|
|
@@ -198,11 +198,11 @@ function U(e) {
|
|
|
198
198
|
},
|
|
199
199
|
get fallback() {
|
|
200
200
|
return (() => {
|
|
201
|
-
var l = Re(),
|
|
201
|
+
var l = Re(), r = l.firstChild;
|
|
202
202
|
return te(l, I(Z, {
|
|
203
203
|
type: "button",
|
|
204
204
|
onClick: () => y(!h())
|
|
205
|
-
}), !1, !0), o(
|
|
205
|
+
}), !1, !0), o(r, () => X() || e.placeholder || u.t("selectPlaceholder")), o(l, c($e, {
|
|
206
206
|
class: "h-3.5 w-3.5 shrink-0"
|
|
207
207
|
}), null), l;
|
|
208
208
|
})();
|
|
@@ -223,12 +223,12 @@ function U(e) {
|
|
|
223
223
|
return z(() => !!h())() ? M() : X();
|
|
224
224
|
},
|
|
225
225
|
onClick: () => y(!0),
|
|
226
|
-
onInput: (
|
|
227
|
-
G(
|
|
226
|
+
onInput: (r) => {
|
|
227
|
+
G(r.currentTarget.value), E(-1), y(!0), e.onQueryChange?.(r.currentTarget.value);
|
|
228
228
|
}
|
|
229
229
|
}), !1, !1), l;
|
|
230
230
|
}
|
|
231
|
-
}), a), a.addEventListener("change", (l) => e.onValuesChange(Array.from(l.currentTarget.selectedOptions, (
|
|
231
|
+
}), a), a.addEventListener("change", (l) => e.onValuesChange(Array.from(l.currentTarget.selectedOptions, (r) => r.value))), a.addEventListener("invalid", (l) => {
|
|
232
232
|
l.preventDefault(), x?.focus();
|
|
233
233
|
});
|
|
234
234
|
var i = O;
|
|
@@ -242,25 +242,25 @@ function U(e) {
|
|
|
242
242
|
}
|
|
243
243
|
}), null), o(a, c(Q, {
|
|
244
244
|
get each() {
|
|
245
|
-
return e.values.filter((l) => l !== "" && !e.options.some((
|
|
245
|
+
return e.values.filter((l) => l !== "" && !e.options.some((r) => r.value === l));
|
|
246
246
|
},
|
|
247
247
|
children: (l) => (() => {
|
|
248
|
-
var
|
|
249
|
-
return
|
|
248
|
+
var r = ze();
|
|
249
|
+
return r.value = l, o(r, l), r;
|
|
250
250
|
})()
|
|
251
251
|
}), null), o(a, c(Q, {
|
|
252
252
|
get each() {
|
|
253
253
|
return e.options;
|
|
254
254
|
},
|
|
255
255
|
children: (l) => (() => {
|
|
256
|
-
var
|
|
257
|
-
return o(
|
|
258
|
-
var
|
|
259
|
-
return
|
|
256
|
+
var r = Ke();
|
|
257
|
+
return o(r, () => l.label), P((v) => {
|
|
258
|
+
var n = e.values.includes(l.value), f = l.disabled;
|
|
259
|
+
return n !== v.e && (r.selected = v.e = n), f !== v.t && (r.disabled = v.t = f), v;
|
|
260
260
|
}, {
|
|
261
261
|
e: void 0,
|
|
262
262
|
t: void 0
|
|
263
|
-
}), P(() =>
|
|
263
|
+
}), P(() => r.value = l.value), r;
|
|
264
264
|
})()
|
|
265
265
|
}), null), o(t, c(V, {
|
|
266
266
|
get when() {
|
|
@@ -287,22 +287,22 @@ function U(e) {
|
|
|
287
287
|
};
|
|
288
288
|
},
|
|
289
289
|
get children() {
|
|
290
|
-
var l = Be(),
|
|
290
|
+
var l = Be(), r = l.firstChild, v = k;
|
|
291
291
|
return typeof v == "function" ? le(v, l) : k = l, o(l, c(V, {
|
|
292
292
|
get when() {
|
|
293
293
|
return e.loading;
|
|
294
294
|
},
|
|
295
295
|
get children() {
|
|
296
|
-
var
|
|
297
|
-
return o(
|
|
296
|
+
var n = qe();
|
|
297
|
+
return o(n, () => u.t("loading")), n;
|
|
298
298
|
}
|
|
299
|
-
}),
|
|
299
|
+
}), r), o(l, c(V, {
|
|
300
300
|
get when() {
|
|
301
301
|
return e.error;
|
|
302
302
|
},
|
|
303
303
|
get children() {
|
|
304
|
-
var
|
|
305
|
-
return o(
|
|
304
|
+
var n = Fe();
|
|
305
|
+
return o(n, () => e.error, null), o(n, c(V, {
|
|
306
306
|
get when() {
|
|
307
307
|
return e.onRetry;
|
|
308
308
|
},
|
|
@@ -310,17 +310,17 @@ function U(e) {
|
|
|
310
310
|
var f = Ae();
|
|
311
311
|
return f.$$click = () => e.onRetry?.(), o(f, () => u.t("retry")), f;
|
|
312
312
|
}
|
|
313
|
-
}), null),
|
|
313
|
+
}), null), n;
|
|
314
314
|
}
|
|
315
|
-
}),
|
|
315
|
+
}), r), m(r, "id", S), o(r, c(Q, {
|
|
316
316
|
get each() {
|
|
317
317
|
return C();
|
|
318
318
|
},
|
|
319
|
-
children: (
|
|
319
|
+
children: (n, f) => (() => {
|
|
320
320
|
var s = Me(), $ = s.firstChild;
|
|
321
|
-
return s.$$click = () => j(
|
|
321
|
+
return s.$$click = () => j(n), s.$$pointermove = () => !n.disabled && E(f()), s.$$pointerdown = (d) => d.preventDefault(), o($, c(V, {
|
|
322
322
|
get when() {
|
|
323
|
-
return e.values.includes(
|
|
323
|
+
return e.values.includes(n.value);
|
|
324
324
|
},
|
|
325
325
|
get children() {
|
|
326
326
|
return c(Ee, {
|
|
@@ -329,9 +329,9 @@ function U(e) {
|
|
|
329
329
|
}
|
|
330
330
|
})), o(s, (() => {
|
|
331
331
|
var d = z(() => !!e.renderOption);
|
|
332
|
-
return () => d() ? e.renderOption(
|
|
332
|
+
return () => d() ? e.renderOption(n) : n.label;
|
|
333
333
|
})(), null), P((d) => {
|
|
334
|
-
var A = S + "-" + f(), F = e.values.includes(
|
|
334
|
+
var A = S + "-" + f(), F = e.values.includes(n.value), T = n.disabled || void 0, p = e.values.includes(n.value) ? "true" : void 0, ee = ne("flex min-h-[var(--floe-row-height)] items-center gap-2 rounded-sm px-2 text-[length:var(--floe-type-control)]", L() === f() && "bg-accent text-accent-foreground", n.disabled ? "opacity-50" : "cursor-pointer");
|
|
335
335
|
return A !== d.e && m(s, "id", d.e = A), F !== d.t && m(s, "aria-selected", d.t = F), T !== d.a && m(s, "aria-disabled", d.a = T), p !== d.o && m(s, "data-floe-selected", d.o = p), ee !== d.i && ve(s, d.i = ee), d;
|
|
336
336
|
}, {
|
|
337
337
|
e: void 0,
|
|
@@ -346,12 +346,12 @@ function U(e) {
|
|
|
346
346
|
return z(() => !C().length && !e.loading)() && !e.error;
|
|
347
347
|
},
|
|
348
348
|
get children() {
|
|
349
|
-
var
|
|
350
|
-
return o(
|
|
349
|
+
var n = Te();
|
|
350
|
+
return o(n, () => u.t("noResults")), n;
|
|
351
351
|
}
|
|
352
|
-
}), null), P((
|
|
352
|
+
}), null), P((n) => {
|
|
353
353
|
var f = D.state(), s = se(), $ = D.exiting(), d = D.exiting() ? "true" : void 0, A = e.ariaLabel, F = e.ariaLabelledBy ?? (e.ariaLabel ? void 0 : W()), T = e.multiple || void 0;
|
|
354
|
-
return f !==
|
|
354
|
+
return f !== n.e && m(l, "data-floating-presence", n.e = f), s !== n.t && m(l, "data-floating-side", n.t = s), $ !== n.a && (l.inert = n.a = $), d !== n.o && m(l, "aria-hidden", n.o = d), A !== n.i && m(r, "aria-label", n.i = A), F !== n.n && m(r, "aria-labelledby", n.n = F), T !== n.s && m(r, "aria-multiselectable", n.s = T), n;
|
|
355
355
|
}, {
|
|
356
356
|
e: void 0,
|
|
357
357
|
t: void 0,
|
|
@@ -365,8 +365,8 @@ function U(e) {
|
|
|
365
365
|
});
|
|
366
366
|
}
|
|
367
367
|
}), null), P((l) => {
|
|
368
|
-
var
|
|
369
|
-
return
|
|
368
|
+
var r = u.direction, v = e.name ?? g.name, n = e.form, f = e.required ?? g.required, s = _(), $ = e.multiple;
|
|
369
|
+
return r !== l.e && m(t, "dir", l.e = r), v !== l.t && m(a, "name", l.t = v), n !== l.a && m(a, "form", l.a = n), f !== l.o && (a.required = l.o = f), s !== l.i && (a.disabled = l.i = s), $ !== l.n && (a.multiple = l.n = $), l;
|
|
370
370
|
}, {
|
|
371
371
|
e: void 0,
|
|
372
372
|
t: void 0,
|
package/dist/floe.css
CHANGED
|
@@ -1055,7 +1055,8 @@
|
|
|
1055
1055
|
.floe-prompt-card-input {
|
|
1056
1056
|
display: block; width: 100%; min-height: 2.5rem; max-height: min(10rem, 30dvh);
|
|
1057
1057
|
padding: var(--floe-pad-tight) 0; border: 0; border-radius: 0;
|
|
1058
|
-
background: transparent;
|
|
1058
|
+
background: transparent; color: var(--floe-ink); caret-color: var(--floe-ink);
|
|
1059
|
+
font: inherit; line-height: 1.5;
|
|
1059
1060
|
field-sizing: content; resize: none;
|
|
1060
1061
|
}
|
|
1061
1062
|
.floe-prompt-card-input::placeholder { color: var(--floe-field-placeholder); }
|