@floegence/floe-webapp-core 0.39.8 → 0.39.10
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createComponent as n, use as I, setAttribute as f, style as Y, Portal as X, spread as O, mergeProps as R, memo as k, insert as d, effect as H, template as
|
|
1
|
+
import { createComponent as n, use as I, setAttribute as f, style as Y, Portal as X, spread as O, mergeProps as R, memo as k, insert as d, effect as H, template as s } from "solid-js/web";
|
|
2
2
|
import { createUniqueId as J, createSignal as P, createMemo as N, createEffect as Q, onCleanup as Z, Show as h, untrack as ee } from "solid-js";
|
|
3
3
|
import { cn as S } from "../../utils/cn.js";
|
|
4
4
|
import { Button as B } from "./Button.js";
|
|
@@ -8,7 +8,7 @@ import { useOverlayMask as ne } from "../../hooks/useOverlayMask.js";
|
|
|
8
8
|
import { resolveSurfacePortalHost as oe, isSurfacePortalMode as F, DIALOG_SURFACE_BOUNDARY_ATTR as $, projectSurfacePortalRect as ie, resolveSurfacePortalBoundaryRect as le, resolveSurfacePortalMount as ae } from "./dialogSurfaceScope.js";
|
|
9
9
|
import { LOCAL_INTERACTION_SURFACE_ATTR as de } from "./localInteractionSurface.js";
|
|
10
10
|
import { createFloatingPresence as ce } from "./floatingPresence.js";
|
|
11
|
-
var
|
|
11
|
+
var se = /* @__PURE__ */ s("<span aria-hidden=true>"), ue = /* @__PURE__ */ s('<h2 class="text-sm font-semibold">'), fe = /* @__PURE__ */ s('<p class="mt-0.5 text-xs text-muted-foreground">'), ge = /* @__PURE__ */ s('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), me = /* @__PURE__ */ s('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), he = /* @__PURE__ */ s('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), we = /* @__PURE__ */ s("<div>");
|
|
12
12
|
const ve = {
|
|
13
13
|
display: "none"
|
|
14
14
|
};
|
|
@@ -35,10 +35,10 @@ function pe(e) {
|
|
|
35
35
|
function xe(e) {
|
|
36
36
|
const o = J(), T = () => `dialog-${o}-title`, D = () => `dialog-${o}-description`;
|
|
37
37
|
let _;
|
|
38
|
-
const [w, q] = P(null), [M, G] = P(0), [L, z] = P(0), E = () => e.open && !!w() && M() > 0,
|
|
38
|
+
const [w, q] = P(null), [M, G] = P(0), [L, z] = P(0), E = () => e.open && !!w() && M() > 0, u = ce({
|
|
39
39
|
open: E,
|
|
40
40
|
exitDurationMs: 120
|
|
41
|
-
}), C = () =>
|
|
41
|
+
}), C = () => u.mounted() && !!w() && M() > 0, U = (t) => {
|
|
42
42
|
q(t), be(() => {
|
|
43
43
|
ee(w) === t && G((l) => l + 1);
|
|
44
44
|
});
|
|
@@ -82,7 +82,7 @@ function xe(e) {
|
|
|
82
82
|
blockTouchMove: () => r() ? "none" : "outside",
|
|
83
83
|
restoreFocus: !0
|
|
84
84
|
}), [(() => {
|
|
85
|
-
var t =
|
|
85
|
+
var t = se();
|
|
86
86
|
return I(U, t), f(t, "data-floe-dialog-owner-anchor", o), Y(t, ve), t;
|
|
87
87
|
})(), n(h, {
|
|
88
88
|
get when() {
|
|
@@ -100,16 +100,16 @@ function xe(e) {
|
|
|
100
100
|
return r() ? "surface" : "global";
|
|
101
101
|
},
|
|
102
102
|
get "data-floating-presence"() {
|
|
103
|
-
return
|
|
103
|
+
return u.state();
|
|
104
104
|
},
|
|
105
105
|
get "aria-hidden"() {
|
|
106
|
-
return
|
|
106
|
+
return u.exiting() ? "true" : void 0;
|
|
107
107
|
}
|
|
108
108
|
}, () => ({
|
|
109
109
|
[de]: r() ? "true" : void 0
|
|
110
110
|
}), {
|
|
111
111
|
get class() {
|
|
112
|
-
return S(r() ? "absolute z-20 box-border p-3" : "fixed inset-0 box-border z-50 p-4",
|
|
112
|
+
return S(r() ? "absolute z-20 box-border p-3" : "fixed inset-0 box-border z-50 p-4", u.exiting() && "pointer-events-none");
|
|
113
113
|
},
|
|
114
114
|
get style() {
|
|
115
115
|
return k(() => !!r())() ? {
|
|
@@ -123,7 +123,7 @@ function xe(e) {
|
|
|
123
123
|
[$]: b()
|
|
124
124
|
}), {
|
|
125
125
|
get "data-floating-presence"() {
|
|
126
|
-
return
|
|
126
|
+
return u.state();
|
|
127
127
|
},
|
|
128
128
|
get class() {
|
|
129
129
|
return S("absolute inset-0 cursor-pointer floe-floating-presence floe-floating-backdrop", r() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
|
|
@@ -138,7 +138,7 @@ function xe(e) {
|
|
|
138
138
|
return S(r() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence floe-floating-dialog-panel", "flex flex-col", e.class);
|
|
139
139
|
},
|
|
140
140
|
get "data-floating-presence"() {
|
|
141
|
-
return
|
|
141
|
+
return u.state();
|
|
142
142
|
},
|
|
143
143
|
role: "dialog",
|
|
144
144
|
get "aria-modal"() {
|
|
@@ -162,7 +162,7 @@ function xe(e) {
|
|
|
162
162
|
return e.title;
|
|
163
163
|
},
|
|
164
164
|
get children() {
|
|
165
|
-
var c =
|
|
165
|
+
var c = ue();
|
|
166
166
|
return d(c, () => e.title), H(() => f(c, "id", T())), c;
|
|
167
167
|
}
|
|
168
168
|
}), null), d(x, n(h, {
|
|
@@ -176,7 +176,7 @@ function xe(e) {
|
|
|
176
176
|
}), null), d(a, n(B, {
|
|
177
177
|
variant: "ghost-destructive",
|
|
178
178
|
size: "icon",
|
|
179
|
-
class: "-my-2 -mr-2 h-[46px] w-[46px] sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
|
|
179
|
+
class: "-my-2 -mr-2 h-[46px] w-[46px] shrink-0 sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
|
|
180
180
|
onClick: () => e.onOpenChange(!1),
|
|
181
181
|
"aria-label": "Close",
|
|
182
182
|
get children() {
|
|
@@ -9,6 +9,8 @@ export type SurfaceFloatingLayerSize = Readonly<{
|
|
|
9
9
|
}>;
|
|
10
10
|
export interface SurfaceFloatingLayerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'ref'> {
|
|
11
11
|
position: SurfaceFloatingLayerPosition;
|
|
12
|
+
/** Stable trigger or anchor used to resolve the owning projected surface. */
|
|
13
|
+
owner?: Element | null;
|
|
12
14
|
estimatedSize?: SurfaceFloatingLayerSize;
|
|
13
15
|
clamp?: boolean;
|
|
14
16
|
class?: string;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { createComponent as m, Portal as d, use as y, spread as S, mergeProps as P, insert as R, template as v } from "solid-js/web";
|
|
2
|
-
import { splitProps as _, createMemo as
|
|
2
|
+
import { splitProps as _, createMemo as a } from "solid-js";
|
|
3
3
|
import { cn as g } from "../../utils/cn.js";
|
|
4
4
|
import { LOCAL_INTERACTION_SURFACE_ATTR as h } from "./localInteractionSurface.js";
|
|
5
5
|
import { clampMenuPosition as A } from "./menuUtils.js";
|
|
6
6
|
import { resolveSurfacePortalHost as T, SURFACE_FLOATING_LAYER_ATTR as z, resolveSurfacePortalMount as C, resolveSurfacePortalBoundaryRect as x, isSurfacePortalMode as L, projectSurfacePortalPosition as M } from "./dialogSurfaceScope.js";
|
|
7
7
|
var $ = /* @__PURE__ */ v("<div>");
|
|
8
|
-
function
|
|
8
|
+
function w() {
|
|
9
9
|
return {
|
|
10
10
|
left: 0,
|
|
11
11
|
top: 0,
|
|
@@ -15,22 +15,24 @@ function E() {
|
|
|
15
15
|
height: 0
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
const [e, l] = _(
|
|
18
|
+
function O(i) {
|
|
19
|
+
const [e, l] = _(i, ["position", "owner", "estimatedSize", "clamp", "class", "style", "children", "layerRef"]), o = a(() => T({
|
|
20
|
+
owner: e.owner ?? null
|
|
21
|
+
})), r = () => L(o()), c = () => x(o()) ?? w(), u = () => e.clamp !== !1 && !!e.estimatedSize, p = a(() => {
|
|
20
22
|
const t = e.position;
|
|
21
23
|
return !u() || !e.estimatedSize ? t : A(t, e.estimatedSize, c());
|
|
22
|
-
}),
|
|
24
|
+
}), n = () => M(p(), o()), f = () => ({
|
|
23
25
|
...e.style ?? {},
|
|
24
|
-
left: `${
|
|
25
|
-
top: `${
|
|
26
|
+
left: `${n().x}px`,
|
|
27
|
+
top: `${n().y}px`
|
|
26
28
|
});
|
|
27
29
|
return m(d, {
|
|
28
30
|
get mount() {
|
|
29
31
|
return C(o());
|
|
30
32
|
},
|
|
31
33
|
get children() {
|
|
32
|
-
var t = $(),
|
|
33
|
-
return typeof
|
|
34
|
+
var t = $(), s = e.layerRef;
|
|
35
|
+
return typeof s == "function" ? y(s, t) : e.layerRef = t, S(t, P(l, {
|
|
34
36
|
get class() {
|
|
35
37
|
return g(r() ? "absolute z-20" : "fixed z-50", e.class);
|
|
36
38
|
},
|
|
@@ -46,5 +48,5 @@ function j(n) {
|
|
|
46
48
|
});
|
|
47
49
|
}
|
|
48
50
|
export {
|
|
49
|
-
|
|
51
|
+
O as SurfaceFloatingLayer
|
|
50
52
|
};
|