@floegence/floe-webapp-core 0.39.6 → 0.39.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/layout/ActivityBar.d.ts +8 -0
  2. package/dist/components/layout/ActivityBar.js +68 -62
  3. package/dist/components/ui/Dialog.js +22 -22
  4. package/dist/styles.css +1 -1
  5. package/package.json +1 -1
package/dist/components/layout/ActivityBar.d.ts CHANGED
@@ -8,6 +8,14 @@ export interface ActivityBarItem {
8
8
  label: string;
9
9
  badge?: number | string | (() => number | string | undefined);
10
10
  onClick?: () => void;
11
+ /** Receives the concrete trigger button for anchored product surfaces. */
12
+ buttonRef?: (button: HTMLButtonElement | null) => void;
13
+ /** ARIA disclosure state for a surface controlled by this item. */
14
+ ariaExpanded?: boolean | (() => boolean | undefined);
15
+ /** ID of the surface controlled by this item. */
16
+ ariaControls?: string;
17
+ /** Semantic kind of popup opened by this item. */
18
+ ariaHasPopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean;
11
19
  /**
12
20
  * How this item should affect the sidebar collapsed state when clicked.
13
21
  *
package/dist/components/layout/ActivityBar.js CHANGED
@@ -1,110 +1,116 @@
1
- import { insert as c, createComponent as a, effect as f, className as g, setAttribute as m, template as s, Dynamic as k, memo as w, delegateEvents as I } from "solid-js/web";
2
- import { createMemo as b, For as C, Show as h } from "solid-js";
1
+ import { insert as c, createComponent as r, effect as g, className as h, setAttribute as u, template as s, use as I, Dynamic as B, memo as $, delegateEvents as E } from "solid-js/web";
2
+ import { createMemo as m, For as k, Show as x, onMount as S, onCleanup as _ } from "solid-js";
3
3
  import { cn as y } from "../../utils/cn.js";
4
- import { deferNonBlocking as $ } from "../../utils/defer.js";
5
- import { Tooltip as B } from "../ui/Tooltip.js";
6
- import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
7
- var S = /* @__PURE__ */ s('<div class="flex flex-col">'), j = /* @__PURE__ */ s('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), N = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), q = /* @__PURE__ */ s("<span>"), D = /* @__PURE__ */ s("<button type=button>");
8
- function z(e) {
9
- const o = b(() => e.activeId), n = b(() => e.collapsed ?? !1), t = b(() => e.onActiveChange), d = b(() => e.onCollapsedChange), v = (i) => {
10
- if (i.onClick) {
11
- $(() => i.onClick());
4
+ import { deferNonBlocking as j } from "../../utils/defer.js";
5
+ import { Tooltip as R } from "../ui/Tooltip.js";
6
+ import { resolveActivityBarClick as M } from "./activityBarBehavior.js";
7
+ var N = /* @__PURE__ */ s('<div class="flex flex-col">'), q = /* @__PURE__ */ s('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), D = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), F = /* @__PURE__ */ s("<span>"), H = /* @__PURE__ */ s("<button type=button>");
8
+ function J(t) {
9
+ const l = m(() => t.activeId), d = m(() => t.collapsed ?? !1), b = m(() => t.onActiveChange), i = m(() => t.onCollapsedChange), v = (e) => {
10
+ if (e.onClick) {
11
+ j(() => e.onClick());
12
12
  return;
13
13
  }
14
- const l = _({
15
- clickedId: i.id,
16
- activeId: o(),
17
- collapsed: n(),
18
- behavior: i.collapseBehavior
14
+ const a = M({
15
+ clickedId: e.id,
16
+ activeId: l(),
17
+ collapsed: d(),
18
+ behavior: e.collapseBehavior
19
19
  });
20
- l.nextActiveId !== o() && (typeof l.openSidebar == "boolean" ? t()(l.nextActiveId, {
21
- openSidebar: l.openSidebar
22
- }) : t()(l.nextActiveId)), typeof l.nextCollapsed == "boolean" && d()?.(l.nextCollapsed);
20
+ a.nextActiveId !== l() && (typeof a.openSidebar == "boolean" ? b()(a.nextActiveId, {
21
+ openSidebar: a.openSidebar
22
+ }) : b()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && i()?.(a.nextCollapsed);
23
23
  };
24
24
  return (() => {
25
- var i = j(), l = i.firstChild;
26
- return c(l, a(C, {
25
+ var e = q(), a = e.firstChild;
26
+ return c(a, r(k, {
27
27
  get each() {
28
- return e.items;
28
+ return t.items;
29
29
  },
30
- children: (r) => a(A, {
31
- item: r,
30
+ children: (n) => r(w, {
31
+ item: n,
32
32
  get isActive() {
33
- return o() === r.id;
33
+ return l() === n.id;
34
34
  },
35
- onClick: () => v(r)
35
+ onClick: () => v(n)
36
36
  })
37
- })), c(i, a(h, {
37
+ })), c(e, r(x, {
38
38
  get when() {
39
- return e.bottomItems?.length;
39
+ return t.bottomItems?.length;
40
40
  },
41
41
  get children() {
42
- var r = S();
43
- return c(r, a(C, {
42
+ var n = N();
43
+ return c(n, r(k, {
44
44
  get each() {
45
- return e.bottomItems;
45
+ return t.bottomItems;
46
46
  },
47
- children: (u) => a(A, {
48
- item: u,
47
+ children: (o) => r(w, {
48
+ item: o,
49
49
  isActive: !1,
50
- onClick: () => v(u)
50
+ onClick: () => v(o)
51
51
  })
52
- })), r;
52
+ })), n;
53
53
  }
54
- }), null), f((r) => {
55
- var u = y("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class), x = e.ariaLabel;
56
- return u !== r.e && g(i, r.e = u), x !== r.t && m(i, "aria-label", r.t = x), r;
54
+ }), null), g((n) => {
55
+ var o = y("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", t.class), f = t.ariaLabel;
56
+ return o !== n.e && h(e, n.e = o), f !== n.t && u(e, "aria-label", n.t = f), n;
57
57
  }, {
58
58
  e: void 0,
59
59
  t: void 0
60
- }), i;
60
+ }), e;
61
61
  })();
62
62
  }
63
- function A(e) {
64
- const o = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
65
- return a(B, {
63
+ function w(t) {
64
+ let l;
65
+ const d = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, b = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
66
+ return S(() => t.item.buttonRef?.(l ?? null)), _(() => t.item.buttonRef?.(null)), r(R, {
66
67
  get content() {
67
- return e.item.label;
68
+ return t.item.label;
68
69
  },
69
70
  placement: "right",
70
71
  delay: 0,
71
72
  get children() {
72
- var n = D();
73
- return n.$$click = () => e.onClick(), c(n, a(h, {
73
+ var i = H();
74
+ i.$$click = () => t.onClick();
75
+ var v = l;
76
+ return typeof v == "function" ? I(v, i) : l = i, c(i, r(x, {
74
77
  get when() {
75
- return e.isActive;
78
+ return t.isActive;
76
79
  },
77
80
  get children() {
78
- return N();
81
+ return D();
79
82
  }
80
- }), null), c(n, a(k, {
83
+ }), null), c(i, r(B, {
81
84
  get component() {
82
- return e.item.icon;
85
+ return t.item.icon;
83
86
  },
84
87
  class: "w-5 h-5"
85
- }), null), c(n, a(h, {
88
+ }), null), c(i, r(x, {
86
89
  get when() {
87
- return o();
90
+ return d();
88
91
  },
89
92
  get children() {
90
- var t = q();
91
- return c(t, (() => {
92
- var d = w(() => typeof o() == "number" && o() > 99);
93
- return () => d() ? "99+" : o();
94
- })()), f(() => g(t, y("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
93
+ var e = F();
94
+ return c(e, (() => {
95
+ var a = $(() => typeof d() == "number" && d() > 99);
96
+ return () => a() ? "99+" : d();
97
+ })()), g(() => h(e, y("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), e;
95
98
  }
96
- }), null), f((t) => {
97
- var d = y("relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/40"), v = e.item.label, i = e.isActive;
98
- return d !== t.e && g(n, t.e = d), v !== t.t && m(n, "aria-label", t.t = v), i !== t.a && m(n, "aria-pressed", t.a = i), t;
99
+ }), null), g((e) => {
100
+ var a = y("relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", t.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/40"), n = t.item.label, o = t.isActive, f = b(), C = t.item.ariaControls, A = t.item.ariaHasPopup;
101
+ return a !== e.e && h(i, e.e = a), n !== e.t && u(i, "aria-label", e.t = n), o !== e.a && u(i, "aria-pressed", e.a = o), f !== e.o && u(i, "aria-expanded", e.o = f), C !== e.i && u(i, "aria-controls", e.i = C), A !== e.n && u(i, "aria-haspopup", e.n = A), e;
99
102
  }, {
100
103
  e: void 0,
101
104
  t: void 0,
102
- a: void 0
103
- }), n;
105
+ a: void 0,
106
+ o: void 0,
107
+ i: void 0,
108
+ n: void 0
109
+ }), i;
104
110
  }
105
111
  });
106
112
  }
107
- I(["click"]);
113
+ E(["click"]);
108
114
  export {
109
- z as ActivityBar
115
+ J as ActivityBar
110
116
  };
package/dist/components/ui/Dialog.js CHANGED
@@ -5,11 +5,11 @@ import { Button as B } from "./Button.js";
5
5
  import { X as te } from "../icons/index.js";
6
6
  import { useResolvedFloeConfig as re } from "../../context/FloeConfigContext.js";
7
7
  import { useOverlayMask as ne } from "../../hooks/useOverlayMask.js";
8
- import { resolveSurfacePortalHost as oe, isSurfacePortalMode as F, DIALOG_SURFACE_BOUNDARY_ATTR as x, projectSurfacePortalRect as ie, resolveSurfacePortalBoundaryRect as le, resolveSurfacePortalMount as ae } from "./dialogSurfaceScope.js";
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 ue = /* @__PURE__ */ u("<span aria-hidden=true>"), se = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), fe = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), ge = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), me = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), he = /* @__PURE__ */ u('<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">'), ve = /* @__PURE__ */ u("<div>");
12
- const we = {
11
+ var ue = /* @__PURE__ */ u("<span aria-hidden=true>"), se = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), fe = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), ge = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), me = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), he = /* @__PURE__ */ u('<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__ */ u("<div>");
12
+ const ve = {
13
13
  display: "none"
14
14
  };
15
15
  function be(e) {
@@ -32,26 +32,26 @@ function pe(e) {
32
32
  }
33
33
  window.clearTimeout(e);
34
34
  }
35
- function $e(e) {
35
+ function xe(e) {
36
36
  const o = J(), T = () => `dialog-${o}-title`, D = () => `dialog-${o}-description`;
37
37
  let _;
38
- const [v, q] = P(null), [M, G] = P(0), [L, z] = P(0), E = () => e.open && !!v() && M() > 0, s = ce({
38
+ const [w, q] = P(null), [M, G] = P(0), [L, z] = P(0), E = () => e.open && !!w() && M() > 0, s = ce({
39
39
  open: E,
40
40
  exitDurationMs: 120
41
- }), C = () => s.mounted() && !!v() && M() > 0, U = (t) => {
41
+ }), C = () => s.mounted() && !!w() && M() > 0, U = (t) => {
42
42
  q(t), be(() => {
43
- ee(v) === t && G((l) => l + 1);
43
+ ee(w) === t && G((l) => l + 1);
44
44
  });
45
- }, w = N(() => C() ? oe({
46
- owner: v()
45
+ }, v = N(() => C() ? oe({
46
+ owner: w()
47
47
  }) : {
48
48
  host: null,
49
49
  boundaryHost: null,
50
50
  mountHost: null,
51
51
  mode: "global"
52
- }), b = () => `dialog-boundary-${o}`, r = () => F(w()), V = () => ae(w()), A = (t) => ie(le(t), t), K = () => A(w()), y = N(() => (L(), K())), W = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${x}="${b()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${x}="${b()}"]`) : !1;
52
+ }), b = () => `dialog-boundary-${o}`, r = () => F(v()), V = () => ae(v()), A = (t) => ie(le(t), t), K = () => A(v()), y = N(() => (L(), K())), W = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${$}="${b()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${$}="${b()}"]`) : !1;
53
53
  return Q(() => {
54
- const t = w();
54
+ const t = v();
55
55
  if (!C() || !F(t) || typeof window > "u")
56
56
  return;
57
57
  let l = !1, g = null, i = j(A(t));
@@ -59,7 +59,7 @@ function $e(e) {
59
59
  if (l || !F(t))
60
60
  return;
61
61
  const a = j(A(t));
62
- a !== i && (i = a, z(($) => $ + 1));
62
+ a !== i && (i = a, z((x) => x + 1));
63
63
  }, m = () => {
64
64
  l || (g = ye(() => {
65
65
  p(), m();
@@ -83,7 +83,7 @@ function $e(e) {
83
83
  restoreFocus: !0
84
84
  }), [(() => {
85
85
  var t = ue();
86
- return I(U, t), f(t, "data-floe-dialog-owner-anchor", o), Y(t, we), t;
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() {
89
89
  return C();
@@ -120,7 +120,7 @@ function $e(e) {
120
120
  } : void 0;
121
121
  }
122
122
  }), !1, !0), f(l, "data-floe-dialog-backdrop", o), O(l, R(() => ({
123
- [x]: b()
123
+ [$]: b()
124
124
  }), {
125
125
  get "data-floating-presence"() {
126
126
  return s.state();
@@ -132,7 +132,7 @@ function $e(e) {
132
132
  }), !1, !1);
133
133
  var m = _;
134
134
  return typeof m == "function" ? I(m, i) : _ = i, f(i, "data-floe-dialog-panel", o), O(i, R(() => ({
135
- [x]: b()
135
+ [$]: b()
136
136
  }), {
137
137
  get class() {
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);
@@ -156,8 +156,8 @@ function $e(e) {
156
156
  return e.title || e.description;
157
157
  },
158
158
  get children() {
159
- var a = ge(), $ = a.firstChild;
160
- return d($, n(h, {
159
+ var a = ge(), x = a.firstChild;
160
+ return d(x, n(h, {
161
161
  get when() {
162
162
  return e.title;
163
163
  },
@@ -165,7 +165,7 @@ function $e(e) {
165
165
  var c = se();
166
166
  return d(c, () => e.title), H(() => f(c, "id", T())), c;
167
167
  }
168
- }), null), d($, n(h, {
168
+ }), null), d(x, n(h, {
169
169
  get when() {
170
170
  return e.description;
171
171
  },
@@ -176,7 +176,7 @@ function $e(e) {
176
176
  }), null), d(a, n(B, {
177
177
  variant: "ghost-destructive",
178
178
  size: "icon",
179
- class: "h-6 w-6 -mr-1",
179
+ class: "-my-2 -mr-2 h-[46px] w-[46px] 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() {
@@ -202,7 +202,7 @@ function $e(e) {
202
202
  }
203
203
  function Be(e) {
204
204
  const o = re();
205
- return n($e, {
205
+ return n(xe, {
206
206
  get open() {
207
207
  return e.open;
208
208
  },
@@ -241,11 +241,11 @@ function Be(e) {
241
241
  })];
242
242
  },
243
243
  get children() {
244
- return e.children ?? ve();
244
+ return e.children ?? we();
245
245
  }
246
246
  });
247
247
  }
248
248
  export {
249
249
  Be as ConfirmDialog,
250
- $e as Dialog
250
+ xe as Dialog
251
251
  };