@floegence/floe-webapp-core 0.86.4 → 0.86.5

package/dist/components/ui/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 export interface DropdownItem {
     id: string;
     label: string;
@@ -20,7 +20,7 @@ export interface DropdownProps {
     triggerAriaLabel?: string;
     /** Treat the existing trigger boundary as a field (used by Select). */
     triggerInputSurface?: boolean;
-    items: DropdownItem[];
+    items: DropdownItem[] | Accessor<DropdownItem[]>;
     value?: string;
     onSelect: (id: string) => void;
     align?: 'start' | 'center' | 'end';

package/dist/components/ui/Dropdown.js

@@ -1,14 +1,14 @@
-import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as O, spread as G, mergeProps as J, effect as F, className as D, template as P, memo as z, delegateEvents as te } from "solid-js/web";
-import { createSignal as _, createMemo as ne, createEffect as Q, onCleanup as re, Show as y, Index as V } from "solid-js";
-import { cn as k } from "../../utils/cn.js";
+import { setAttribute as d, insert as f, createComponent as l, Portal as W, use as D, spread as G, mergeProps as J, effect as B, className as p, template as P, memo as z, delegateEvents as te } from "solid-js/web";
+import { createSignal as j, createMemo as ne, createEffect as Q, onCleanup as re, Show as y, Index as V } from "solid-js";
+import { cn as S } from "../../utils/cn.js";
 import { deferNonBlocking as oe } from "../../utils/defer.js";
 import { ChevronDown as ae, Check as ie, ChevronRight as ue } from "../icons/index.js";
-import { focusMenuItem as I, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
+import { focusMenuItem as O, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as ce } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
 import { createFloatingPresence as Y } from "./floatingPresence.js";
-import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
+import { useOverlayMask as de } from "../../hooks/useOverlayMask.js";
 import { resolveSurfacePortalHost as fe, projectSurfacePortalPosition as me, resolveSurfacePortalBoundaryRect as ge, isSurfacePortalMode as ve, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
-var H = /* @__PURE__ */ P("<div>"), he = /* @__PURE__ */ P("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), Z = /* @__PURE__ */ P('<div class="my-1 h-px bg-border"role=separator>'), we = /* @__PURE__ */ P('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), ye = /* @__PURE__ */ P("<div class=relative>"), xe = /* @__PURE__ */ P('<span class="w-3.5 h-3.5 flex items-center justify-center">'), Se = /* @__PURE__ */ P("<span>");
+var K = /* @__PURE__ */ P("<div>"), he = /* @__PURE__ */ P("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), Z = /* @__PURE__ */ P('<div class="my-1 h-px bg-border"role=separator>'), we = /* @__PURE__ */ P('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), ye = /* @__PURE__ */ P("<div class=relative>"), xe = /* @__PURE__ */ P('<span class="w-3.5 h-3.5 flex items-center justify-center">'), Se = /* @__PURE__ */ P("<span>");
 let ke = 0, Me = 0;
 function Pe(e, c) {
   switch (e) {
@@ -35,34 +35,34 @@ function Pe(e, c) {
   }
 }
 function $e(e) {
-  const [c, d] = _(!1), o = Y({
+  const [c, s] = j(!1), a = Y({
     open: c
-  }), [B, M] = _({
+  }), [q, k] = j({
     x: -9999,
     y: -9999
   });
-  let v, h;
-  const b = `floe-dropdown-${ke += 1}`, $ = `${b}-menu`, w = ne(() => o.mounted() ? fe({
-    owner: v
+  let g, h;
+  const v = `floe-dropdown-${ke += 1}`, $ = `${v}-menu`, M = () => typeof e.items == "function" ? e.items() : e.items, b = ne(() => a.mounted() ? fe({
+    owner: g
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), m = {
-    mount: () => be(w()),
-    isSurfaceMode: () => ve(w()),
-    boundaryRect: () => ge(w()),
-    projectPosition: (r) => me(r, w())
-  }, A = () => {
-    d(!1), requestAnimationFrame(() => v?.focus());
+  }), w = {
+    mount: () => be(b()),
+    isSurfaceMode: () => ve(b()),
+    boundaryRect: () => ge(b()),
+    projectPosition: (t) => me(t, b())
+  }, C = () => {
+    s(!1), requestAnimationFrame(() => g?.focus());
   };
-  ce({
-    open: o.mounted,
+  de({
+    open: a.mounted,
     root: () => h,
-    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${b}"]`),
-    onClose: A,
-    onEscapeOutside: A,
+    containsTarget: (t) => !!(t instanceof Element ? t : document.activeElement)?.closest(`[data-floe-dropdown="${v}"]`),
+    onClose: C,
+    onEscapeOutside: C,
     lockBodyScroll: !1,
     trapFocus: !1,
     autoFocus: !1,
@@ -71,127 +71,127 @@ function $e(e) {
     closeOnEscape: "inside",
     escapeKeyPhase: "bubble"
   });
-  const C = () => {
-    if (!v || !h) return;
-    const r = v.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
-    M(i);
+  const T = () => {
+    if (!g || !h) return;
+    const t = g.getBoundingClientRect(), o = h.getBoundingClientRect(), n = se(t, o, e.align ?? "start", w.boundaryRect());
+    k(n);
   };
   Q(() => {
-    if (!o.mounted()) {
-      M({
+    if (!a.mounted()) {
+      k({
         x: -9999,
         y: -9999
       });
       return;
     }
     if (!c()) return;
-    const r = (n) => {
-      const i = n.target;
-      i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${b}"]`) || d(!1);
+    const t = (o) => {
+      const n = o.target;
+      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${v}"]`) || s(!1);
     };
-    document.addEventListener("pointerdown", r, !0), requestAnimationFrame(() => {
-      C(), I(h, e.value ? "selected" : "first");
+    document.addEventListener("pointerdown", t, !0), requestAnimationFrame(() => {
+      T(), O(h, e.value ? "selected" : "first");
     }), re(() => {
-      document.removeEventListener("pointerdown", r, !0);
+      document.removeEventListener("pointerdown", t, !0);
     });
   });
-  const j = (r) => {
-    const n = e.onSelect;
-    r.keepOpen || (d(!1), v?.focus({
+  const F = (t) => {
+    const o = e.onSelect;
+    t.keepOpen || (s(!1), g?.focus({
       preventScroll: !0
-    })), oe(() => n(r.id));
-  }, R = (r, n = "first") => {
-    e.disabled || (d(r), requestAnimationFrame(() => {
-      C(), I(h, n);
+    })), oe(() => o(t.id));
+  }, A = (t, o = "first") => {
+    e.disabled || (s(t), requestAnimationFrame(() => {
+      T(), O(h, o);
     }));
-  }, T = (r) => {
+  }, H = (t) => {
     if (e.disabled) return;
-    const n = Pe(r.key, {
+    const o = Pe(t.key, {
       open: c(),
       hasSelection: !!e.value
     });
-    if (n) {
-      if (r.preventDefault(), !n.nextOpen) {
-        d(!1);
+    if (o) {
+      if (t.preventDefault(), !o.nextOpen) {
+        s(!1);
         return;
       }
-      R(!0, n.focusMode ?? "first");
+      A(!0, o.focusMode ?? "first");
     }
-  }, q = (r) => {
-    const n = r.target, i = n?.closest('[role="menu"]'), t = n?.closest(le);
-    switch (r.key) {
+  }, _ = (t) => {
+    const o = t.target, n = o?.closest('[role="menu"]'), r = o?.closest(le);
+    switch (t.key) {
       case "ArrowDown":
-        r.preventDefault(), U(i, t, 1);
+        t.preventDefault(), U(n, r, 1);
         return;
       case "ArrowUp":
-        r.preventDefault(), U(i, t, -1);
+        t.preventDefault(), U(n, r, -1);
         return;
       case "Home":
-        r.preventDefault(), I(i, "first");
+        t.preventDefault(), O(n, "first");
         return;
       case "End":
-        r.preventDefault(), I(i, "last");
+        t.preventDefault(), O(n, "last");
         return;
       case "Tab":
-        r.preventDefault(), d(!1), v?.focus();
+        t.preventDefault(), s(!1), g?.focus();
         return;
       default:
         return;
     }
   };
   return (() => {
-    var r = he(), n = r.firstChild;
-    f(r, "data-floe-dropdown", b), n.$$keydown = T, n.$$click = () => {
+    var t = he(), o = t.firstChild;
+    d(t, "data-floe-dropdown", v), o.$$keydown = H, o.$$click = () => {
       if (!e.disabled) {
         if (c()) {
-          d(!1);
+          s(!1);
           return;
         }
-        R(!0, e.value ? "selected" : "first");
+        A(!0, e.value ? "selected" : "first");
       }
     };
-    var i = v;
-    return typeof i == "function" ? O(i, n) : v = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
+    var n = g;
+    return typeof n == "function" ? D(n, o) : g = o, d(o, "aria-controls", $), f(o, () => e.trigger), f(t, l(y, {
       get when() {
-        return o.mounted();
+        return a.mounted();
       },
       get children() {
         return l(W, {
           get mount() {
-            return m.mount();
+            return w.mount();
           },
           get children() {
-            var t = H(), s = h;
-            return typeof s == "function" ? O(s, t) : h = t, f(t, "data-floe-dropdown", b), G(t, J({
+            var r = K(), u = h;
+            return typeof u == "function" ? D(u, r) : h = r, d(r, "data-floe-dropdown", v), G(r, J({
               get class() {
-                return k(m.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
+                return S(w.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu");
               },
               get "data-floating-presence"() {
-                return o.state();
+                return a.state();
               },
               get "aria-hidden"() {
-                return o.exiting() ? "true" : void 0;
+                return a.exiting() ? "true" : void 0;
               }
             }, () => ({
-              [X]: m.isSurfaceMode() ? "true" : void 0
+              [X]: w.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${m.projectPosition(B()).x}px`,
-                  top: `${m.projectPosition(B()).y}px`
+                  left: `${w.projectPosition(q()).x}px`,
+                  top: `${w.projectPosition(q()).y}px`
                 };
               },
               role: "menu",
               "data-floe-surface": "floating",
               id: $,
-              onKeyDown: q
-            }), !1, !0), g(t, l(V, {
+              onKeyDown: _
+            }), !1, !0), f(r, l(V, {
               get each() {
-                return e.items;
+                return M();
               },
-              children: (u) => l(y, {
+              children: (m) => l(y, {
                 get when() {
-                  return !u().separator;
+                  return !m().separator;
                 },
                 get fallback() {
                   return Z();
@@ -199,25 +199,25 @@ function $e(e) {
                 get children() {
                   return l(ee, {
                     get item() {
-                      return u();
+                      return m();
                     },
                     get selected() {
-                      return e.value === u().id;
+                      return e.value === m().id;
                     },
-                    onSelect: j,
-                    onCloseMenu: () => d(!1),
-                    dropdownId: b,
-                    portalLayout: m
+                    onSelect: F,
+                    onCloseMenu: () => s(!1),
+                    dropdownId: v,
+                    portalLayout: w
                   });
                 }
               })
-            })), t;
+            })), r;
           }
         });
       }
-    }), null), F((t) => {
-      var s = k("relative inline-block", e.class), u = k("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, p = e.triggerInputSurface ? "true" : void 0, L = e.triggerInputSurface ? "inset" : void 0;
-      return s !== t.e && D(r, t.e = s), u !== t.t && D(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), p !== t.s && f(n, "data-floe-input-surface", t.s = p), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
+    }), null), B((r) => {
+      var u = S("relative inline-block", e.class), m = S("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), i = e.disabled ? -1 : 0, x = c(), R = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, L = e.triggerInputSurface ? "true" : void 0, I = e.triggerInputSurface ? "inset" : void 0;
+      return u !== r.e && p(t, r.e = u), m !== r.t && p(o, r.t = m), i !== r.a && d(o, "tabindex", r.a = i), x !== r.o && d(o, "aria-expanded", r.o = x), R !== r.i && d(o, "aria-label", r.i = R), E !== r.n && d(o, "aria-disabled", r.n = E), L !== r.s && d(o, "data-floe-input-surface", r.s = L), I !== r.h && d(o, "data-floe-surface", r.h = I), r;
     }, {
       e: void 0,
       t: void 0,
@@ -227,109 +227,109 @@ function $e(e) {
       n: void 0,
       s: void 0,
       h: void 0
-    }), r;
+    }), t;
   })();
 }
 function ee(e) {
-  const [c, d] = _(!1), o = () => e.item.children && e.item.children.length > 0, M = Y({
-    open: () => !!(c() && o())
-  }), [v, h] = _({
+  const [c, s] = j(!1), a = () => e.item.children && e.item.children.length > 0, k = Y({
+    open: () => !!(c() && a())
+  }), [g, h] = j({
     x: -9999,
     y: -9999
   });
-  let b, $, w, m;
-  const A = `floe-dropdown-item-${Me += 1}`;
+  let v, $, M, b;
+  const w = `floe-dropdown-item-${Me += 1}`;
   Q(() => {
-    M.mounted() || h({
+    k.mounted() || h({
       x: -9999,
       y: -9999
     });
   });
   const C = () => {
-    if (!b || !w) return;
-    const n = b.getBoundingClientRect(), i = w.getBoundingClientRect(), t = de(n, i, e.portalLayout.boundaryRect());
-    h(t);
-  }, j = () => {
-    o() && (clearTimeout(m), m = setTimeout(() => {
-      d(!0), requestAnimationFrame(C);
+    if (!v || !M) return;
+    const t = v.getBoundingClientRect(), o = M.getBoundingClientRect(), n = ce(t, o, e.portalLayout.boundaryRect());
+    h(n);
+  }, T = () => {
+    a() && (clearTimeout(b), b = setTimeout(() => {
+      s(!0), requestAnimationFrame(C);
     }, 100));
-  }, R = () => {
-    o() && (clearTimeout(m), m = void 0, !e.item.keepOpen && (m = setTimeout(() => {
-      d(!1);
+  }, F = () => {
+    a() && (clearTimeout(b), b = void 0, !e.item.keepOpen && (b = setTimeout(() => {
+      s(!1);
     }, 150)));
-  }, T = (n) => {
+  }, A = (t) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
-        n.stopPropagation();
+        t.stopPropagation();
         return;
       }
-      o() ? (d((i) => !i), requestAnimationFrame(C)) : e.item.content || e.onSelect(e.item);
+      a() ? (s((o) => !o), requestAnimationFrame(C)) : e.item.content || e.onSelect(e.item);
     }
-  }, q = (n = "first") => {
-    o() && (d(!0), requestAnimationFrame(() => {
-      C(), I(w, n);
+  }, H = (t = "first") => {
+    a() && (s(!0), requestAnimationFrame(() => {
+      C(), O(M, t);
     }));
-  }, r = () => {
-    d(!1), requestAnimationFrame(() => $?.focus());
+  }, _ = () => {
+    s(!1), requestAnimationFrame(() => $?.focus());
   };
   return (() => {
-    var n = ye();
-    n.addEventListener("mouseleave", R), n.addEventListener("mouseenter", j);
-    var i = b;
-    return typeof i == "function" ? O(i, n) : b = n, g(n, l(y, {
+    var t = ye();
+    t.addEventListener("mouseleave", F), t.addEventListener("mouseenter", T);
+    var o = v;
+    return typeof o == "function" ? D(o, t) : v = t, f(t, l(y, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = H();
-        return t.$$click = T, g(t, e.item.content), F((s) => {
-          var u = k("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), x = e.item.tone ?? "default";
-          return u !== s.e && D(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
+        var n = K();
+        return n.$$click = A, f(n, e.item.content), B((r) => {
+          var u = S("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), m = e.item.tone ?? "default";
+          return u !== r.e && p(n, r.e = u), m !== r.t && d(n, "data-tone", r.t = m), r;
         }, {
           e: void 0,
           t: void 0
-        }), t;
+        }), n;
       }
-    }), null), g(n, l(y, {
+    }), null), f(t, l(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = we(), s = t.firstChild, u = s.nextSibling;
-        t.$$keydown = (a) => {
-          e.item.disabled || o() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), q("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
-        }, t.$$click = T;
-        var x = $;
-        return typeof x == "function" ? O(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
+        var n = we(), r = n.firstChild, u = r.nextSibling;
+        n.$$keydown = (i) => {
+          e.item.disabled || a() && ((i.key === "ArrowRight" || i.key === "Enter" || i.key === " ") && (i.preventDefault(), H("first")), i.key === "ArrowLeft" && (i.preventDefault(), _()));
+        }, n.$$click = A;
+        var m = $;
+        return typeof m == "function" ? D(m, n) : $ = n, d(n, "id", w), f(r, l(y, {
           get when() {
-            return z(() => !!e.selected)() && !o();
+            return z(() => !!e.selected)() && !a();
           },
           get children() {
             return l(ie, {
               class: "w-3 h-3"
             });
           }
-        })), g(t, l(y, {
+        })), f(n, l(y, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (a) => (() => {
-            var S = xe();
-            return g(S, a), S;
+          children: (i) => (() => {
+            var x = xe();
+            return f(x, i), x;
           })()
-        }), u), g(u, () => e.item.label), g(t, l(y, {
+        }), u), f(u, () => e.item.label), f(n, l(y, {
           get when() {
-            return o();
+            return a();
           },
           get children() {
             return l(ue, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), F((a) => {
-          var S = k("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), E = e.item.disabled, p = o() ? "menu" : void 0, L = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
-          return S !== a.e && D(t, a.e = S), E !== a.t && (t.disabled = a.t = E), p !== a.a && f(t, "aria-haspopup", a.a = p), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
+        }), null), B((i) => {
+          var x = S("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.tone === "danger" && "text-destructive", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), R = e.item.disabled, E = a() ? "menu" : void 0, L = a() ? c() : void 0, I = e.selected && !a() ? "true" : void 0, N = e.item.tone ?? "default";
+          return x !== i.e && p(n, i.e = x), R !== i.t && (n.disabled = i.t = R), E !== i.a && d(n, "aria-haspopup", i.a = E), L !== i.o && d(n, "aria-expanded", i.o = L), I !== i.i && d(n, "data-floe-selected", i.i = I), N !== i.n && d(n, "data-tone", i.n = N), i;
         }, {
           e: void 0,
           t: void 0,
@@ -337,11 +337,11 @@ function ee(e) {
           o: void 0,
           i: void 0,
           n: void 0
-        }), t;
+        }), n;
       }
-    }), null), g(n, l(y, {
+    }), null), f(t, l(y, {
       get when() {
-        return z(() => !!M.mounted())() && o();
+        return z(() => !!k.mounted())() && a();
       },
       get children() {
         return l(W, {
@@ -349,40 +349,40 @@ function ee(e) {
             return e.portalLayout.mount();
           },
           get children() {
-            var t = H(), s = w;
-            return typeof s == "function" ? O(s, t) : w = t, G(t, J({
+            var n = K(), r = M;
+            return typeof r == "function" ? D(r, n) : M = n, G(n, J({
               get class() {
-                return k(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
+                return S(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36 py-0.5" : "fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "floe-floating-presence floe-floating-menu floe-floating-submenu");
               },
               get "data-floe-dropdown"() {
                 return e.dropdownId;
               },
               get "data-floating-presence"() {
-                return M.state();
+                return k.state();
               },
               get "aria-hidden"() {
-                return M.exiting() ? "true" : void 0;
+                return k.exiting() ? "true" : void 0;
               }
             }, () => ({
               [X]: e.portalLayout.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${e.portalLayout.projectPosition(v()).x}px`,
-                  top: `${e.portalLayout.projectPosition(v()).y}px`
+                  left: `${e.portalLayout.projectPosition(g()).x}px`,
+                  top: `${e.portalLayout.projectPosition(g()).y}px`
                 };
               },
               role: "menu",
               "data-floe-surface": "floating",
-              "aria-labelledby": A,
+              "aria-labelledby": w,
               onMouseEnter: () => {
-                clearTimeout(m);
+                clearTimeout(b);
               },
-              onMouseLeave: R,
+              onMouseLeave: F,
               onKeyDown: (u) => {
-                u.key !== "ArrowLeft" && u.key !== "Escape" || (u.preventDefault(), u.stopPropagation(), r());
+                u.key !== "ArrowLeft" && u.key !== "Escape" || (u.preventDefault(), u.stopPropagation(), _());
               }
-            }), !1, !0), g(t, l(V, {
+            }), !1, !0), f(n, l(V, {
               get each() {
                 return e.item.children;
               },
@@ -414,33 +414,33 @@ function ee(e) {
                   });
                 }
               })
-            })), t;
+            })), n;
           }
         });
       }
-    }), null), n;
+    }), null), t;
   })();
 }
 function Fe(e) {
-  const c = () => e.options.find((o) => o.value === e.value), d = () => e.options.map((o) => ({
-    id: o.value,
-    label: o.label
+  const c = () => e.options.find((a) => a.value === e.value), s = () => e.options.map((a) => ({
+    id: a.value,
+    label: a.label
   }));
   return l($e, {
     triggerInputSurface: !0,
     get triggerClass() {
-      return k("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-[length:var(--floe-type-control)] shadow-sm", "transition-colors duration-100", e.class);
+      return S("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-[length:var(--floe-type-control)] shadow-sm", "transition-colors duration-100", e.class);
     },
     get trigger() {
       return [(() => {
-        var o = Se();
-        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => D(o, k("truncate", !c() && "text-muted-foreground"))), o;
+        var a = Se();
+        return f(a, () => c()?.label ?? e.placeholder ?? "Select..."), B(() => p(a, S("truncate", !c() && "text-muted-foreground"))), a;
       })(), l(ae, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];
     },
     get items() {
-      return d();
+      return s();
     },
     get value() {
       return e.value;

package/dist/components/ui/FloatingWindow.js

@@ -34,13 +34,13 @@ function Gt(n) {
   }), [N, Me] = g(!0), h = () => !!(n.compactBelow && C().width < n.compactBelow), S = () => n.viewportInsets, P = () => k()?.fixedScale ?? 1, V = (e) => ({
     x: (e.x + (k()?.fixedOffset.left ?? 0)) / P(),
     y: (e.y + (k()?.fixedOffset.top ?? 0)) / P()
-  }), Le = () => n.zIndex ?? 100, Oe = nt(), Be = ot(), De = rt(), M = Be?.isMobile ?? lt(() => De.config.layout.mobileQuery), se = 16, de = () => `floating-window-${Oe}-title`, [j, Te] = g(n.defaultPosition ?? {
+  }), Oe = () => n.zIndex ?? 100, Le = nt(), Be = ot(), De = rt(), M = Be?.isMobile ?? lt(() => De.config.layout.mobileQuery), se = 16, de = () => `floating-window-${Le}-title`, [j, Te] = g(n.defaultPosition ?? {
     x: 0,
     y: 0
   }), [U, We] = g(n.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, ce] = g(!1), [L, ue] = g(!1), [O, fe] = g(!1), [qe, G] = g(!1), I = gt({
+  }), [d, ce] = g(!1), [O, ue] = g(!1), [L, fe] = g(!1), [qe, G] = g(!1), I = gt({
     open: () => n.open
   });
   let he = {
@@ -129,7 +129,7 @@ function Gt(n) {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
   }, K = (e) => !!s && e instanceof Node && s.contains(e), Ve = (e) => {
-    const o = (e instanceof Element ? e : null)?.closest('[role="menu"], [role="dialog"]')?.closest('[data-floe-surface-floating-layer="true"]');
+    const o = (e instanceof Element ? e : null)?.closest('[role="menu"], [role="dialog"]')?.closest('[data-floe-surface-floating-layer="true"], [data-floe-dropdown]');
     return !!(o && s?.contains(o));
   }, je = () => {
     if (!s) return null;
@@ -390,7 +390,7 @@ function Gt(n) {
             [Ee]: "true"
           }, {
             get class() {
-              return X("fixed left-0 top-0 z-[100] flex flex-col", (L() || O()) && "select-none", I.exiting() && "pointer-events-none");
+              return X("fixed left-0 top-0 z-[100] flex flex-col", (O() || L()) && "select-none", I.exiting() && "pointer-events-none");
             },
             get style() {
               return {
@@ -398,8 +398,8 @@ function Gt(n) {
                 width: `${U().width / P()}px`,
                 height: `${U().height / P()}px`,
                 transform: `translate3d(${V(j()).x}px, ${V(j()).y}px, 0)`,
-                "z-index": Le(),
-                "will-change": L() ? "transform" : O() ? "transform, width, height" : void 0
+                "z-index": Oe(),
+                "will-change": O() ? "transform" : L() ? "transform, width, height" : void 0
               };
             },
             role: "dialog",
@@ -414,7 +414,7 @@ function Gt(n) {
             "data-floe-floating-window-surface": "true",
             "data-floe-surface": "floating",
             get "data-floe-surface-interacting"() {
-              return L() || O() ? "true" : void 0;
+              return O() || L() ? "true" : void 0;
             },
             get "data-floe-floating-window-state"() {
               return qe() ? "active" : "inactive";
@@ -423,7 +423,7 @@ function Gt(n) {
             [Ee]: "true"
           }, {
             get class() {
-              return X("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (L() || O()) && "floe-floating-presence--suspended", d() && "rounded-none", n.class);
+              return X("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (O() || L()) && "floe-floating-presence--suspended", d() && "rounded-none", n.class);
             },
             get style() {
               return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.4",
+  "version": "0.86.5",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",