@floegence/floe-webapp-core 0.36.12 → 0.36.13

package/dist/components/ui/Dropdown.js

@@ -1,25 +1,27 @@
-import { setAttribute as m, insert as f, createComponent as l, Portal as U, use as L, effect as D, className as M, setStyleProperty as q, template as E, memo as K, delegateEvents as J } from "solid-js/web";
-import { createSignal as F, createEffect as Q, onCleanup as V, Show as $, Index as z } from "solid-js";
-import { cn as C } from "../../utils/cn.js";
-import { deferNonBlocking as X } from "../../utils/defer.js";
-import { ChevronDown as Y, Check as Z, ChevronRight as ee } from "../icons/index.js";
-import { focusMenuItem as O, MENU_ITEM_SELECTOR as te, moveMenuFocus as N, calculateMenuPosition as ne, calculateSubmenuPosition as re } from "./menuUtils.js";
-var H = /* @__PURE__ */ E("<div role=menu>"), oe = /* @__PURE__ */ E("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), W = /* @__PURE__ */ E('<div class="my-1 h-px bg-border"role=separator>'), ie = /* @__PURE__ */ E("<div>"), ae = /* @__PURE__ */ E('<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">'), le = /* @__PURE__ */ E("<div class=relative>"), ue = /* @__PURE__ */ E('<span class="w-3.5 h-3.5 flex items-center justify-center">'), de = /* @__PURE__ */ E("<span>");
-let se = 0, ce = 0;
-function fe(e, s) {
+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 { 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 { 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";
+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) {
   switch (e) {
     case "Enter":
     case " ":
-      return s.open ? {
+      return d.open ? {
         nextOpen: !1
       } : {
         nextOpen: !0,
-        focusMode: s.hasSelection ? "selected" : "first"
+        focusMode: d.hasSelection ? "selected" : "first"
       };
     case "ArrowDown":
       return {
         nextOpen: !0,
-        focusMode: s.hasSelection ? "selected" : "first"
+        focusMode: d.hasSelection ? "selected" : "first"
       };
     case "ArrowUp":
       return {
@@ -30,140 +32,159 @@ function fe(e, s) {
       return null;
   }
 }
-function me(e) {
-  const [s, u] = F(!1), [c, P] = F({
+function xe(e) {
+  const [d, c] = O(!1), [s, A] = O({
     x: -9999,
     y: -9999
   });
-  let y, x;
-  const h = `floe-dropdown-${se += 1}`, k = `${h}-menu`, R = () => {
-    if (!y || !x) return;
-    const o = y.getBoundingClientRect(), r = x.getBoundingClientRect(), d = ne(o, r, e.align ?? "start");
-    P(d);
+  let b, h;
+  const m = `floe-dropdown-${he += 1}`, w = `${m}-menu`, k = X(() => d() ? ue() : {
+    host: null,
+    mode: "global"
+  }), a = {
+    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());
+    A(i);
   };
-  Q(() => {
-    if (!s()) {
-      P({
+  Y(() => {
+    if (!d()) {
+      A({
         x: -9999,
         y: -9999
       });
       return;
     }
-    const o = (d) => {
-      const n = d.target;
-      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${h}"]`) || u(!1);
-    }, r = (d) => {
-      d.key === "Escape" && (u(!1), requestAnimationFrame(() => y?.focus()));
+    const r = (i) => {
+      const t = i.target;
+      t && typeof t.closest == "function" && t.closest(`[data-floe-dropdown="${m}"]`) || c(!1);
+    }, n = (i) => {
+      i.key === "Escape" && (c(!1), requestAnimationFrame(() => b?.focus()));
     };
-    document.addEventListener("mousedown", o), document.addEventListener("keydown", r), requestAnimationFrame(() => {
-      R(), O(x, e.value ? "selected" : "first");
-    }), V(() => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", r);
+    document.addEventListener("mousedown", r), document.addEventListener("keydown", n), requestAnimationFrame(() => {
+      M(), P(h, e.value ? "selected" : "first");
+    }), Z(() => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", n);
     });
   });
-  const v = (o) => {
-    const r = e.onSelect;
-    o.keepOpen || u(!1), X(() => r(o.id));
-  }, A = (o, r = "first") => {
-    e.disabled || (u(o), requestAnimationFrame(() => {
-      R(), O(x, r);
+  const _ = (r) => {
+    const n = e.onSelect;
+    r.keepOpen || c(!1), ee(() => n(r.id));
+  }, p = (r, n = "first") => {
+    e.disabled || (c(r), requestAnimationFrame(() => {
+      M(), P(h, n);
     }));
-  }, _ = (o) => {
+  }, D = (r) => {
     if (e.disabled) return;
-    const r = fe(o.key, {
-      open: s(),
+    const n = ye(r.key, {
+      open: d(),
       hasSelection: !!e.value
     });
-    if (r) {
-      if (o.preventDefault(), !r.nextOpen) {
-        u(!1);
+    if (n) {
+      if (r.preventDefault(), !n.nextOpen) {
+        c(!1);
         return;
       }
-      A(!0, r.focusMode ?? "first");
+      p(!0, n.focusMode ?? "first");
     }
-  }, T = (o) => {
-    const r = o.target, d = r?.closest('[role="menu"]'), n = r?.closest(te);
-    switch (o.key) {
+  }, T = (r) => {
+    const n = r.target, i = n?.closest('[role="menu"]'), t = n?.closest(oe);
+    switch (r.key) {
       case "ArrowDown":
-        o.preventDefault(), N(d, n, 1);
+        r.preventDefault(), N(i, t, 1);
         return;
       case "ArrowUp":
-        o.preventDefault(), N(d, n, -1);
+        r.preventDefault(), N(i, t, -1);
         return;
       case "Home":
-        o.preventDefault(), O(d, "first");
+        r.preventDefault(), P(i, "first");
         return;
       case "End":
-        o.preventDefault(), O(d, "last");
+        r.preventDefault(), P(i, "last");
         return;
       case "Tab":
-        u(!1);
+        c(!1);
         return;
       default:
         return;
     }
   };
   return (() => {
-    var o = oe(), r = o.firstChild;
-    m(o, "data-floe-dropdown", h), r.$$keydown = _, r.$$click = () => {
+    var r = fe(), n = r.firstChild;
+    v(r, "data-floe-dropdown", m), n.$$keydown = D, n.$$click = () => {
       if (!e.disabled) {
-        if (s()) {
-          u(!1);
+        if (d()) {
+          c(!1);
           return;
         }
-        A(!0, e.value ? "selected" : "first");
+        p(!0, e.value ? "selected" : "first");
       }
     };
-    var d = y;
-    return typeof d == "function" ? L(d, r) : y = r, m(r, "aria-controls", k), f(r, () => e.trigger), f(o, l($, {
+    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, {
       get when() {
-        return s();
+        return d();
       },
       get children() {
-        return l(U, {
+        return u(z, {
+          get mount() {
+            return a.mount();
+          },
           get children() {
-            var n = H();
-            n.$$keydown = T;
-            var g = x;
-            return typeof g == "function" ? L(g, n) : x = n, m(n, "data-floe-dropdown", h), m(n, "id", k), f(n, l(z, {
+            var t = F(), g = h;
+            return typeof g == "function" ? R(g, t) : h = t, v(t, "data-floe-dropdown", m), U(t, H({
+              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");
+              }
+            }, () => ({
+              [G]: a.isSurfaceMode() ? "true" : void 0
+            }), {
+              get style() {
+                return {
+                  left: `${a.projectPosition(s()).x}px`,
+                  top: `${a.projectPosition(s()).y}px`
+                };
+              },
+              role: "menu",
+              id: w,
+              onKeyDown: T
+            }), !1, !0), f(t, u(W, {
               get each() {
                 return e.items;
               },
-              children: (t) => l($, {
+              children: (l) => u(y, {
                 get when() {
-                  return !t().separator;
+                  return !l().separator;
                 },
                 get fallback() {
-                  return W();
+                  return J();
                 },
                 get children() {
-                  return l(G, {
+                  return u(Q, {
                     get item() {
-                      return t();
+                      return l();
                     },
                     get selected() {
-                      return e.value === t().id;
+                      return e.value === l().id;
                     },
-                    onSelect: v,
-                    onCloseMenu: () => u(!1),
-                    dropdownId: h
+                    onSelect: _,
+                    onCloseMenu: () => c(!1),
+                    dropdownId: m,
+                    portalLayout: a
                   });
                 }
               })
-            })), D((t) => {
-              var w = C("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"), i = `${c().x}px`, b = `${c().y}px`;
-              return w !== t.e && M(n, t.e = w), i !== t.t && q(n, "left", t.t = i), b !== t.a && q(n, "top", t.a = b), t;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0
-            }), n;
+            })), t;
           }
         });
       }
-    }), null), D((n) => {
-      var g = C("relative inline-block", e.class), t = C("cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), w = e.disabled ? -1 : 0, i = s(), b = e.triggerAriaLabel, a = e.disabled ? "true" : void 0;
-      return g !== n.e && M(o, n.e = g), t !== n.t && M(r, n.t = t), w !== n.a && m(r, "tabindex", n.a = w), i !== n.o && m(r, "aria-expanded", n.o = i), b !== n.i && m(r, "aria-label", n.i = b), a !== n.n && m(r, "aria-disabled", n.n = a), n;
+    }), null), I((t) => {
+      var g = S("relative inline-block", e.class), l = S("cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), C = e.disabled ? -1 : 0, o = d(), x = e.triggerAriaLabel, L = e.disabled ? "true" : void 0;
+      return g !== t.e && E(r, t.e = g), l !== t.t && E(n, t.t = l), C !== t.a && v(n, "tabindex", t.a = C), o !== t.o && v(n, "aria-expanded", t.o = o), x !== t.i && v(n, "aria-label", t.i = x), L !== t.n && v(n, "aria-disabled", t.n = L), t;
     }, {
       e: void 0,
       t: void 0,
@@ -171,94 +192,94 @@ function me(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), o;
+    }), r;
   })();
 }
-function G(e) {
-  const [s, u] = F(!1), [c, P] = F({
+function Q(e) {
+  const [d, c] = O(!1), [s, A] = O({
     x: -9999,
     y: -9999
   });
-  let y, x, h, k;
-  const R = `floe-dropdown-item-${ce += 1}`, v = () => e.item.children && e.item.children.length > 0, A = () => {
-    if (!y || !h) return;
-    const n = y.getBoundingClientRect(), g = h.getBoundingClientRect(), t = re(n, g);
-    P(t);
+  let b, h, m, w;
+  const k = `floe-dropdown-item-${we += 1}`, a = () => 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());
+    A(t);
   }, _ = () => {
-    v() && (clearTimeout(k), k = setTimeout(() => {
-      u(!0), requestAnimationFrame(A);
+    a() && (clearTimeout(w), w = setTimeout(() => {
+      c(!0), requestAnimationFrame(M);
     }, 100));
-  }, T = () => {
-    v() && (clearTimeout(k), k = void 0, !e.item.keepOpen && (k = setTimeout(() => {
-      u(!1);
+  }, p = () => {
+    a() && (clearTimeout(w), w = void 0, !e.item.keepOpen && (w = setTimeout(() => {
+      c(!1);
     }, 150)));
-  }, o = (n) => {
+  }, D = (n) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
         n.stopPropagation();
         return;
       }
-      v() ? (u((g) => !g), requestAnimationFrame(A)) : e.item.content || e.onSelect(e.item);
+      a() ? (c((i) => !i), requestAnimationFrame(M)) : e.item.content || e.onSelect(e.item);
     }
-  }, r = (n = "first") => {
-    v() && (u(!0), requestAnimationFrame(() => {
-      A(), O(h, n);
+  }, T = (n = "first") => {
+    a() && (c(!0), requestAnimationFrame(() => {
+      M(), P(m, n);
     }));
-  }, d = () => {
-    u(!1), requestAnimationFrame(() => x?.focus());
+  }, r = () => {
+    c(!1), requestAnimationFrame(() => h?.focus());
   };
   return (() => {
-    var n = le();
-    n.addEventListener("mouseleave", T), n.addEventListener("mouseenter", _);
-    var g = y;
-    return typeof g == "function" ? L(g, n) : y = n, f(n, l($, {
+    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, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = ie();
-        return t.$$click = o, f(t, e.item.content), D(() => M(t, C("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), t;
+        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, l($, {
+    }), null), f(n, u(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = ae(), w = t.firstChild, i = w.nextSibling;
-        t.$$keydown = (a) => {
-          e.item.disabled || v() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), r("first")), a.key === "ArrowLeft" && (a.preventDefault(), d()));
-        }, t.$$click = o;
-        var b = x;
-        return typeof b == "function" ? L(b, t) : x = t, m(t, "id", R), f(w, l($, {
+        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()));
+        }, t.$$click = D;
+        var C = h;
+        return typeof C == "function" ? R(C, t) : h = t, v(t, "id", k), f(g, u(y, {
           get when() {
-            return K(() => !!e.selected)() && !v();
+            return K(() => !!e.selected)() && !a();
           },
           get children() {
-            return l(Z, {
+            return u(ne, {
               class: "w-3 h-3"
             });
           }
-        })), f(t, l($, {
+        })), f(t, u(y, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (a) => (() => {
-            var S = ue();
-            return f(S, a), S;
+          children: (o) => (() => {
+            var x = ve();
+            return f(x, o), x;
           })()
-        }), i), f(i, () => e.item.label), f(t, l($, {
+        }), l), f(l, () => e.item.label), f(t, u(y, {
           get when() {
-            return v();
+            return a();
           },
           get children() {
-            return l(ee, {
+            return u(re, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), D((a) => {
-          var S = C("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"), I = e.item.disabled, B = v() ? "menu" : void 0, p = v() ? s() : void 0, j = e.selected && !v() ? "true" : void 0;
-          return S !== a.e && M(t, a.e = S), I !== a.t && (t.disabled = a.t = I), B !== a.a && m(t, "aria-haspopup", a.a = B), p !== a.o && m(t, "aria-expanded", a.o = p), j !== a.i && m(t, "data-floe-selected", a.i = j), a;
+        }), 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;
+          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,
           t: void 0,
@@ -267,35 +288,57 @@ function G(e) {
           i: void 0
         }), t;
       }
-    }), null), f(n, l($, {
+    }), null), f(n, u(y, {
       get when() {
-        return K(() => !!s())() && v();
+        return K(() => !!d())() && a();
       },
       get children() {
-        return l(U, {
+        return u(z, {
+          get mount() {
+            return e.portalLayout.mount();
+          },
           get children() {
-            var t = H();
-            t.$$keydown = (i) => {
-              i.key !== "ArrowLeft" && i.key !== "Escape" || (i.preventDefault(), i.stopPropagation(), d());
-            }, t.addEventListener("mouseleave", T), t.addEventListener("mouseenter", () => {
-              clearTimeout(k);
-            });
-            var w = h;
-            return typeof w == "function" ? L(w, t) : h = t, m(t, "aria-labelledby", R), f(t, l(z, {
+            var t = F(), g = m;
+            return typeof g == "function" ? R(g, t) : m = t, U(t, H({
+              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");
+              },
+              get "data-floe-dropdown"() {
+                return e.dropdownId;
+              }
+            }, () => ({
+              [G]: e.portalLayout.isSurfaceMode() ? "true" : void 0
+            }), {
+              get style() {
+                return {
+                  left: `${e.portalLayout.projectPosition(s()).x}px`,
+                  top: `${e.portalLayout.projectPosition(s()).y}px`
+                };
+              },
+              role: "menu",
+              "aria-labelledby": k,
+              onMouseEnter: () => {
+                clearTimeout(w);
+              },
+              onMouseLeave: p,
+              onKeyDown: (l) => {
+                l.key !== "ArrowLeft" && l.key !== "Escape" || (l.preventDefault(), l.stopPropagation(), r());
+              }
+            }), !1, !0), f(t, u(W, {
               get each() {
                 return e.item.children;
               },
-              children: (i) => l($, {
+              children: (l) => u(y, {
                 get when() {
-                  return !i().separator;
+                  return !l().separator;
                 },
                 get fallback() {
-                  return W();
+                  return J();
                 },
                 get children() {
-                  return l(G, {
+                  return u(Q, {
                     get item() {
-                      return i();
+                      return l();
                     },
                     selected: !1,
                     get onSelect() {
@@ -306,44 +349,39 @@ function G(e) {
                     },
                     get dropdownId() {
                       return e.dropdownId;
+                    },
+                    get portalLayout() {
+                      return e.portalLayout;
                     }
                   });
                 }
               })
-            })), D((i) => {
-              var b = C("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"), a = e.dropdownId, S = `${c().x}px`, I = `${c().y}px`;
-              return b !== i.e && M(t, i.e = b), a !== i.t && m(t, "data-floe-dropdown", i.t = a), S !== i.a && q(t, "left", i.a = S), I !== i.o && q(t, "top", i.o = I), i;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0,
-              o: void 0
-            }), t;
+            })), t;
           }
         });
       }
     }), null), n;
   })();
 }
-function xe(e) {
-  const s = () => e.options.find((c) => c.value === e.value), u = () => e.options.map((c) => ({
-    id: c.value,
-    label: c.label
+function Re(e) {
+  const d = () => e.options.find((s) => s.value === e.value), c = () => e.options.map((s) => ({
+    id: s.value,
+    label: s.label
   }));
-  return l(me, {
+  return u(xe, {
     get triggerClass() {
-      return C("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);
+      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);
     },
     get trigger() {
       return [(() => {
-        var c = de();
-        return f(c, () => s()?.label ?? e.placeholder ?? "Select..."), D(() => M(c, C("truncate", !s() && "text-muted-foreground"))), c;
-      })(), l(Y, {
+        var s = be();
+        return f(s, () => d()?.label ?? e.placeholder ?? "Select..."), I(() => E(s, S("truncate", !d() && "text-muted-foreground"))), s;
+      })(), u(te, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];
     },
     get items() {
-      return u();
+      return c();
     },
     get value() {
       return e.value;
@@ -356,9 +394,9 @@ function xe(e) {
     }
   });
 }
-J(["click", "keydown"]);
+V(["click", "keydown"]);
 export {
-  me as Dropdown,
-  xe as Select,
-  fe as resolveDropdownTriggerKeyAction
+  xe as Dropdown,
+  Re as Select,
+  ye as resolveDropdownTriggerKeyAction
 };

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

@@ -1,14 +1,39 @@
 export declare const DIALOG_SURFACE_HOST_ATTR = "data-floe-dialog-surface-host";
+export declare const SURFACE_PORTAL_HOST_ATTR = "data-floe-dialog-surface-host";
 export declare const DIALOG_SURFACE_BOUNDARY_ATTR = "data-floe-dialog-surface-boundary";
 export type DialogSurfaceInteractionSnapshot = Readonly<{
     target: Element | null;
     activeElement: Element | null;
     recordedAt: number;
 }>;
+export type SurfacePortalInteractionSnapshot = DialogSurfaceInteractionSnapshot;
+export type SurfacePortalMode = 'global' | 'surface';
 export type ResolvedDialogSurfaceHost = Readonly<{
     host: HTMLElement | null;
-    mode: 'global' | 'surface';
+    mode: SurfacePortalMode;
+}>;
+export type ResolvedSurfacePortalHost = ResolvedDialogSurfaceHost;
+export type SurfacePortalBoundaryRect = Readonly<{
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
 }>;
 export declare function ensureDialogSurfaceInteractionTracking(): void;
+export declare function ensureSurfacePortalInteractionTracking(): void;
 export declare function resolveDialogSurfaceHost(): ResolvedDialogSurfaceHost;
+export declare function resolveSurfacePortalHost(): ResolvedSurfacePortalHost;
+export declare function isSurfacePortalMode(surfaceHost: ResolvedSurfacePortalHost): boolean;
+export declare function resolveSurfacePortalMount(surfaceHost: ResolvedSurfacePortalHost): HTMLElement | undefined;
+export declare function resolveSurfacePortalBoundaryRect(surfaceHost: ResolvedSurfacePortalHost): SurfacePortalBoundaryRect;
+export declare function projectSurfacePortalPosition(position: Readonly<{
+    x: number;
+    y: number;
+}>, surfaceHost: ResolvedSurfacePortalHost): Readonly<{
+    x: number;
+    y: number;
+}>;
 export declare function __resetDialogSurfaceScopeForTests(): void;
+export declare function __resetSurfacePortalScopeForTests(): void;