@floegence/floe-webapp-core 0.36.13 → 0.36.15

package/dist/components/ui/Dropdown.js

@@ -1,11 +1,11 @@
-import { setAttribute as v, insert as f, createComponent as u, Portal as z, use as R, spread as U, mergeProps as H, effect as I, className as E, template as $, memo as K, delegateEvents as V } from "solid-js/web";
+import { setAttribute as v, insert as f, createComponent as a, Portal as N, use as R, spread as z, mergeProps as U, effect as I, className as E, template as $, memo as H, delegateEvents as V } from "solid-js/web";
 import { createSignal as O, createMemo as X, createEffect as Y, onCleanup as Z, Show as y, Index as W } from "solid-js";
 import { cn as S } from "../../utils/cn.js";
 import { deferNonBlocking as ee } from "../../utils/defer.js";
 import { ChevronDown as te, Check as ne, ChevronRight as re } from "../icons/index.js";
-import { focusMenuItem as P, MENU_ITEM_SELECTOR as oe, moveMenuFocus as N, calculateMenuPosition as ie, calculateSubmenuPosition as ae } from "./menuUtils.js";
+import { focusMenuItem as P, MENU_ITEM_SELECTOR as oe, moveMenuFocus as K, calculateMenuPosition as ie, calculateSubmenuPosition as ue } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as G } from "./localInteractionSurface.js";
-import { resolveSurfacePortalHost as ue, projectSurfacePortalPosition as le, resolveSurfacePortalBoundaryRect as de, isSurfacePortalMode as ce, resolveSurfacePortalMount as se } from "./dialogSurfaceScope.js";
+import { resolveSurfacePortalHost as ae, projectSurfacePortalPosition as le, resolveSurfacePortalBoundaryRect as de, isSurfacePortalMode as ce, resolveSurfacePortalMount as se } from "./dialogSurfaceScope.js";
 var F = /* @__PURE__ */ $("<div>"), fe = /* @__PURE__ */ $("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), J = /* @__PURE__ */ $('<div class="my-1 h-px bg-border"role=separator>'), me = /* @__PURE__ */ $('<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">'), ge = /* @__PURE__ */ $("<div class=relative>"), ve = /* @__PURE__ */ $('<span class="w-3.5 h-3.5 flex items-center justify-center">'), be = /* @__PURE__ */ $("<span>");
 let he = 0, we = 0;
 function ye(e, d) {
@@ -38,17 +38,19 @@ function xe(e) {
     y: -9999
   });
   let b, h;
-  const m = `floe-dropdown-${he += 1}`, w = `${m}-menu`, k = X(() => d() ? ue() : {
+  const m = `floe-dropdown-${he += 1}`, w = `${m}-menu`, k = X(() => d() ? ae() : {
     host: null,
+    boundaryHost: null,
+    mountHost: null,
     mode: "global"
-  }), a = {
+  }), u = {
     mount: () => se(k()),
     isSurfaceMode: () => ce(k()),
     boundaryRect: () => de(k()),
     projectPosition: (r) => le(r, k())
   }, M = () => {
     if (!b || !h) return;
-    const r = b.getBoundingClientRect(), n = h.getBoundingClientRect(), i = ie(r, n, e.align ?? "start", a.boundaryRect());
+    const r = b.getBoundingClientRect(), n = h.getBoundingClientRect(), i = ie(r, n, e.align ?? "start", u.boundaryRect());
     A(i);
   };
   Y(() => {
@@ -65,10 +67,10 @@ function xe(e) {
     }, n = (i) => {
       i.key === "Escape" && (c(!1), requestAnimationFrame(() => b?.focus()));
     };
-    document.addEventListener("mousedown", r), document.addEventListener("keydown", n), requestAnimationFrame(() => {
+    document.addEventListener("pointerdown", r, !0), document.addEventListener("keydown", n), requestAnimationFrame(() => {
       M(), P(h, e.value ? "selected" : "first");
     }), Z(() => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", n);
+      document.removeEventListener("pointerdown", r, !0), document.removeEventListener("keydown", n);
     });
   });
   const _ = (r) => {
@@ -95,10 +97,10 @@ function xe(e) {
     const n = r.target, i = n?.closest('[role="menu"]'), t = n?.closest(oe);
     switch (r.key) {
       case "ArrowDown":
-        r.preventDefault(), N(i, t, 1);
+        r.preventDefault(), K(i, t, 1);
         return;
       case "ArrowUp":
-        r.preventDefault(), N(i, t, -1);
+        r.preventDefault(), K(i, t, -1);
         return;
       case "Home":
         r.preventDefault(), P(i, "first");
@@ -125,38 +127,38 @@ function xe(e) {
       }
     };
     var i = b;
-    return typeof i == "function" ? R(i, n) : b = n, v(n, "aria-controls", w), f(n, () => e.trigger), f(r, u(y, {
+    return typeof i == "function" ? R(i, n) : b = n, v(n, "aria-controls", w), f(n, () => e.trigger), f(r, a(y, {
       get when() {
         return d();
       },
       get children() {
-        return u(z, {
+        return a(N, {
           get mount() {
-            return a.mount();
+            return u.mount();
           },
           get children() {
             var t = F(), g = h;
-            return typeof g == "function" ? R(g, t) : h = t, v(t, "data-floe-dropdown", m), U(t, H({
+            return typeof g == "function" ? R(g, t) : h = t, v(t, "data-floe-dropdown", m), z(t, U({
               get class() {
-                return S(a.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", "animate-in fade-in slide-in-from-top-2");
+                return S(u.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", "animate-in fade-in slide-in-from-top-2");
               }
             }, () => ({
-              [G]: a.isSurfaceMode() ? "true" : void 0
+              [G]: u.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${a.projectPosition(s()).x}px`,
-                  top: `${a.projectPosition(s()).y}px`
+                  left: `${u.projectPosition(s()).x}px`,
+                  top: `${u.projectPosition(s()).y}px`
                 };
               },
               role: "menu",
               id: w,
               onKeyDown: T
-            }), !1, !0), f(t, u(W, {
+            }), !1, !0), f(t, a(W, {
               get each() {
                 return e.items;
               },
-              children: (l) => u(y, {
+              children: (l) => a(y, {
                 get when() {
                   return !l().separator;
                 },
@@ -164,7 +166,7 @@ function xe(e) {
                   return J();
                 },
                 get children() {
-                  return u(Q, {
+                  return a(Q, {
                     get item() {
                       return l();
                     },
@@ -174,7 +176,7 @@ function xe(e) {
                     onSelect: _,
                     onCloseMenu: () => c(!1),
                     dropdownId: m,
-                    portalLayout: a
+                    portalLayout: u
                   });
                 }
               })
@@ -201,16 +203,16 @@ function Q(e) {
     y: -9999
   });
   let b, h, m, w;
-  const k = `floe-dropdown-item-${we += 1}`, a = () => e.item.children && e.item.children.length > 0, M = () => {
+  const k = `floe-dropdown-item-${we += 1}`, u = () => e.item.children && e.item.children.length > 0, M = () => {
     if (!b || !m) return;
-    const n = b.getBoundingClientRect(), i = m.getBoundingClientRect(), t = ae(n, i, e.portalLayout.boundaryRect());
+    const n = b.getBoundingClientRect(), i = m.getBoundingClientRect(), t = ue(n, i, e.portalLayout.boundaryRect());
     A(t);
   }, _ = () => {
-    a() && (clearTimeout(w), w = setTimeout(() => {
+    u() && (clearTimeout(w), w = setTimeout(() => {
       c(!0), requestAnimationFrame(M);
     }, 100));
   }, p = () => {
-    a() && (clearTimeout(w), w = void 0, !e.item.keepOpen && (w = setTimeout(() => {
+    u() && (clearTimeout(w), w = void 0, !e.item.keepOpen && (w = setTimeout(() => {
       c(!1);
     }, 150)));
   }, D = (n) => {
@@ -219,10 +221,10 @@ function Q(e) {
         n.stopPropagation();
         return;
       }
-      a() ? (c((i) => !i), requestAnimationFrame(M)) : e.item.content || e.onSelect(e.item);
+      u() ? (c((i) => !i), requestAnimationFrame(M)) : e.item.content || e.onSelect(e.item);
     }
   }, T = (n = "first") => {
-    a() && (c(!0), requestAnimationFrame(() => {
+    u() && (c(!0), requestAnimationFrame(() => {
       M(), P(m, n);
     }));
   }, r = () => {
@@ -232,7 +234,7 @@ function Q(e) {
     var n = ge();
     n.addEventListener("mouseleave", p), n.addEventListener("mouseenter", _);
     var i = b;
-    return typeof i == "function" ? R(i, n) : b = n, f(n, u(y, {
+    return typeof i == "function" ? R(i, n) : b = n, f(n, a(y, {
       get when() {
         return e.item.content;
       },
@@ -240,26 +242,26 @@ function Q(e) {
         var t = F();
         return t.$$click = D, f(t, e.item.content), I(() => E(t, S("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), t;
       }
-    }), null), f(n, u(y, {
+    }), null), f(n, a(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
         var t = me(), g = t.firstChild, l = g.nextSibling;
         t.$$keydown = (o) => {
-          e.item.disabled || a() && ((o.key === "ArrowRight" || o.key === "Enter" || o.key === " ") && (o.preventDefault(), T("first")), o.key === "ArrowLeft" && (o.preventDefault(), r()));
+          e.item.disabled || u() && ((o.key === "ArrowRight" || o.key === "Enter" || o.key === " ") && (o.preventDefault(), T("first")), o.key === "ArrowLeft" && (o.preventDefault(), r()));
         }, t.$$click = D;
         var C = h;
-        return typeof C == "function" ? R(C, t) : h = t, v(t, "id", k), f(g, u(y, {
+        return typeof C == "function" ? R(C, t) : h = t, v(t, "id", k), f(g, a(y, {
           get when() {
-            return K(() => !!e.selected)() && !a();
+            return H(() => !!e.selected)() && !u();
           },
           get children() {
-            return u(ne, {
+            return a(ne, {
               class: "w-3 h-3"
             });
           }
-        })), f(t, u(y, {
+        })), f(t, a(y, {
           get when() {
             return e.item.icon;
           },
@@ -268,17 +270,17 @@ function Q(e) {
             var x = ve();
             return f(x, o), x;
           })()
-        }), l), f(l, () => e.item.label), f(t, u(y, {
+        }), l), f(l, () => e.item.label), f(t, a(y, {
           get when() {
-            return a();
+            return u();
           },
           get children() {
-            return u(re, {
+            return a(re, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
         }), null), I((o) => {
-          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.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), L = e.item.disabled, j = a() ? "menu" : void 0, q = a() ? d() : void 0, B = e.selected && !a() ? "true" : void 0;
+          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.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), L = e.item.disabled, j = u() ? "menu" : void 0, q = u() ? d() : void 0, B = e.selected && !u() ? "true" : void 0;
           return x !== o.e && E(t, o.e = x), L !== o.t && (t.disabled = o.t = L), j !== o.a && v(t, "aria-haspopup", o.a = j), q !== o.o && v(t, "aria-expanded", o.o = q), B !== o.i && v(t, "data-floe-selected", o.i = B), o;
         }, {
           e: void 0,
@@ -288,18 +290,18 @@ function Q(e) {
           i: void 0
         }), t;
       }
-    }), null), f(n, u(y, {
+    }), null), f(n, a(y, {
       get when() {
-        return K(() => !!d())() && a();
+        return H(() => !!d())() && u();
       },
       get children() {
-        return u(z, {
+        return a(N, {
           get mount() {
             return e.portalLayout.mount();
           },
           get children() {
             var t = F(), g = m;
-            return typeof g == "function" ? R(g, t) : m = t, U(t, H({
+            return typeof g == "function" ? R(g, t) : m = t, z(t, U({
               get class() {
                 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", "animate-in fade-in slide-in-from-left-1");
               },
@@ -324,11 +326,11 @@ function Q(e) {
               onKeyDown: (l) => {
                 l.key !== "ArrowLeft" && l.key !== "Escape" || (l.preventDefault(), l.stopPropagation(), r());
               }
-            }), !1, !0), f(t, u(W, {
+            }), !1, !0), f(t, a(W, {
               get each() {
                 return e.item.children;
               },
-              children: (l) => u(y, {
+              children: (l) => a(y, {
                 get when() {
                   return !l().separator;
                 },
@@ -336,7 +338,7 @@ function Q(e) {
                   return J();
                 },
                 get children() {
-                  return u(Q, {
+                  return a(Q, {
                     get item() {
                       return l();
                     },
@@ -368,7 +370,7 @@ function Re(e) {
     id: s.value,
     label: s.label
   }));
-  return u(xe, {
+  return a(xe, {
     get triggerClass() {
       return S("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
     },
@@ -376,7 +378,7 @@ function Re(e) {
       return [(() => {
         var s = be();
         return f(s, () => d()?.label ?? e.placeholder ?? "Select..."), I(() => E(s, S("truncate", !d() && "text-muted-foreground"))), s;
-      })(), u(te, {
+      })(), a(te, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];
     },