@floegence/floe-webapp-core 0.35.32 → 0.35.34

package/dist/components/ui/Dropdown.js

@@ -1,25 +1,25 @@
-import { setAttribute as b, insert as w, createComponent as m, Portal as U, use as P, effect as D, className as I, setStyleProperty as F, template as C, memo as j, delegateEvents as Y } from "solid-js/web";
-import { createSignal as _, createEffect as Z, onCleanup as R, Show as S, Index as z } from "solid-js";
-import { cn as A } 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";
-var G = /* @__PURE__ */ C("<div role=menu>"), ie = /* @__PURE__ */ C("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), V = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), oe = /* @__PURE__ */ C("<div>"), le = /* @__PURE__ */ C('<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">'), ae = /* @__PURE__ */ C("<div class=relative>"), ue = /* @__PURE__ */ C('<span class="w-3.5 h-3.5 flex items-center justify-center">'), de = /* @__PURE__ */ C("<span>");
-const h = 8, J = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+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, r) {
+function fe(e, s) {
   switch (e) {
     case "Enter":
     case " ":
-      return r.open ? {
+      return s.open ? {
         nextOpen: !1
       } : {
         nextOpen: !0,
-        focusMode: r.hasSelection ? "selected" : "first"
+        focusMode: s.hasSelection ? "selected" : "first"
       };
     case "ArrowDown":
       return {
         nextOpen: !0,
-        focusMode: r.hasSelection ? "selected" : "first"
+        focusMode: s.hasSelection ? "selected" : "first"
       };
     case "ArrowUp":
       return {
@@ -30,182 +30,129 @@ function fe(e, r) {
       return null;
   }
 }
-function me(e, r, i) {
-  return e <= 0 ? null : r < 0 ? i > 0 ? 0 : e - 1 : (r + i + e) % e;
-}
-function ve(e, r, i) {
-  const o = window.innerWidth, f = window.innerHeight;
-  let a;
-  switch (i) {
-    case "center":
-      a = e.left + e.width / 2 - r.width / 2;
-      break;
-    case "end":
-      a = e.right - r.width;
-      break;
-    default:
-      a = e.left;
-  }
-  let c = e.bottom + 4;
-  if (a + r.width > o - h && (a = o - r.width - h), a = Math.max(h, a), c + r.height > f - h) {
-    const g = e.top - h, k = f - e.bottom - h;
-    g > k && g >= r.height ? c = e.top - r.height - 4 : c = f - r.height - h;
-  }
-  return c = Math.max(h, c), {
-    x: a,
-    y: c
-  };
-}
-function he(e, r) {
-  const i = window.innerWidth, o = window.innerHeight;
-  let f = e.right, a = e.top;
-  if (f + r.width > i - h) {
-    const c = e.left - r.width;
-    c >= h ? f = c : f = i - r.width - h;
-  }
-  return a + r.height > o - h && (a = o - r.height - h), f = Math.max(h, f), a = Math.max(h, a), {
-    x: f,
-    y: a
-  };
-}
-function Q(e) {
-  return !e || typeof HTMLElement > "u" ? [] : Array.from(e.querySelectorAll(J)).filter((r) => r instanceof HTMLElement);
-}
-function p(e, r = "first") {
-  const i = Q(e);
-  if (!i.length) return !1;
-  let o = i[0];
-  return r === "last" ? o = i[i.length - 1] : r === "selected" && (o = i.find((f) => f.getAttribute("data-floe-selected") === "true") ?? i[0]), o.focus(), !0;
-}
-function K(e, r, i) {
-  const o = Q(e);
-  if (!o.length) return !1;
-  const f = r ? o.indexOf(r) : -1, a = me(o.length, f, i);
-  return a === null ? !1 : (o[a]?.focus(), !0);
-}
-function ge(e) {
-  const [r, i] = _(!1), [o, f] = _({
+function me(e) {
+  const [s, u] = F(!1), [c, P] = F({
     x: -9999,
     y: -9999
   });
-  let a, c;
-  const g = `floe-dropdown-${se += 1}`, k = `${g}-menu`, L = () => {
-    if (!a || !c) return;
-    const u = a.getBoundingClientRect(), l = c.getBoundingClientRect(), v = ve(u, l, e.align ?? "start");
-    f(v);
+  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);
   };
-  Z(() => {
-    if (!r()) {
-      f({
+  Q(() => {
+    if (!s()) {
+      P({
         x: -9999,
         y: -9999
       });
       return;
     }
-    const u = (v) => {
-      const n = v.target;
-      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${g}"]`) || i(!1);
-    }, l = (v) => {
-      v.key === "Escape" && (i(!1), requestAnimationFrame(() => a?.focus()));
+    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()));
     };
-    document.addEventListener("mousedown", u), document.addEventListener("keydown", l), requestAnimationFrame(() => {
-      L(), p(c, e.value ? "selected" : "first");
-    }), R(() => {
-      document.removeEventListener("mousedown", u), document.removeEventListener("keydown", l);
+    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);
     });
   });
-  const x = (u) => {
-    const l = e.onSelect;
-    u.keepOpen || i(!1), ee(() => l(u.id));
-  }, O = (u, l = "first") => {
-    e.disabled || (i(u), requestAnimationFrame(() => {
-      L(), p(c, l);
+  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);
     }));
-  }, B = (u) => {
+  }, _ = (o) => {
     if (e.disabled) return;
-    const l = fe(u.key, {
-      open: r(),
+    const r = fe(o.key, {
+      open: s(),
       hasSelection: !!e.value
     });
-    if (l) {
-      if (u.preventDefault(), !l.nextOpen) {
-        i(!1);
+    if (r) {
+      if (o.preventDefault(), !r.nextOpen) {
+        u(!1);
         return;
       }
-      O(!0, l.focusMode ?? "first");
+      A(!0, r.focusMode ?? "first");
     }
-  }, q = (u) => {
-    const l = u.target, v = l?.closest('[role="menu"]'), n = l?.closest(J);
-    switch (u.key) {
+  }, T = (o) => {
+    const r = o.target, d = r?.closest('[role="menu"]'), n = r?.closest(te);
+    switch (o.key) {
       case "ArrowDown":
-        u.preventDefault(), K(v, n, 1);
+        o.preventDefault(), N(d, n, 1);
         return;
       case "ArrowUp":
-        u.preventDefault(), K(v, n, -1);
+        o.preventDefault(), N(d, n, -1);
         return;
       case "Home":
-        u.preventDefault(), p(v, "first");
+        o.preventDefault(), O(d, "first");
         return;
       case "End":
-        u.preventDefault(), p(v, "last");
+        o.preventDefault(), O(d, "last");
         return;
       case "Tab":
-        i(!1);
+        u(!1);
         return;
       default:
         return;
     }
   };
   return (() => {
-    var u = ie(), l = u.firstChild;
-    b(u, "data-floe-dropdown", g), l.$$keydown = B, l.$$click = () => {
+    var o = oe(), r = o.firstChild;
+    m(o, "data-floe-dropdown", h), r.$$keydown = _, r.$$click = () => {
       if (!e.disabled) {
-        if (r()) {
-          i(!1);
+        if (s()) {
+          u(!1);
           return;
         }
-        O(!0, e.value ? "selected" : "first");
+        A(!0, e.value ? "selected" : "first");
       }
     };
-    var v = a;
-    return typeof v == "function" ? P(v, l) : a = l, b(l, "aria-controls", k), w(l, () => e.trigger), w(u, m(S, {
+    var d = y;
+    return typeof d == "function" ? L(d, r) : y = r, m(r, "aria-controls", k), f(r, () => e.trigger), f(o, l($, {
       get when() {
-        return r();
+        return s();
       },
       get children() {
-        return m(U, {
+        return l(U, {
           get children() {
-            var n = G();
-            n.$$keydown = q;
-            var y = c;
-            return typeof y == "function" ? P(y, n) : c = n, b(n, "data-floe-dropdown", g), b(n, "id", k), w(n, m(z, {
+            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, {
               get each() {
                 return e.items;
               },
-              children: (t) => m(S, {
+              children: (t) => l($, {
                 get when() {
                   return !t().separator;
                 },
                 get fallback() {
-                  return V();
+                  return W();
                 },
                 get children() {
-                  return m(X, {
+                  return l(G, {
                     get item() {
                       return t();
                     },
                     get selected() {
                       return e.value === t().id;
                     },
-                    onSelect: x,
-                    onCloseMenu: () => i(!1),
-                    dropdownId: g
+                    onSelect: v,
+                    onCloseMenu: () => u(!1),
+                    dropdownId: h
                   });
                 }
               })
             })), D((t) => {
-              var M = A("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"), d = `${o().x}px`, $ = `${o().y}px`;
-              return M !== t.e && I(n, t.e = M), d !== t.t && F(n, "left", t.t = d), $ !== t.a && F(n, "top", t.a = $), 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,
@@ -215,8 +162,8 @@ function ge(e) {
         });
       }
     }), null), D((n) => {
-      var y = A("relative inline-block", e.class), t = A("cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), M = e.disabled ? -1 : 0, d = r(), $ = e.triggerAriaLabel, s = e.disabled ? "true" : void 0;
-      return y !== n.e && I(u, n.e = y), t !== n.t && I(l, n.t = t), M !== n.a && b(l, "tabindex", n.a = M), d !== n.o && b(l, "aria-expanded", n.o = d), $ !== n.i && b(l, "aria-label", n.i = $), s !== n.n && b(l, "aria-disabled", n.n = s), 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;
     }, {
       e: void 0,
       t: void 0,
@@ -224,94 +171,94 @@ function ge(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), u;
+    }), o;
   })();
 }
-function X(e) {
-  const [r, i] = _(!1), [o, f] = _({
+function G(e) {
+  const [s, u] = F(!1), [c, P] = F({
     x: -9999,
     y: -9999
   });
-  let a, c, g, k;
-  const L = `floe-dropdown-item-${ce += 1}`, x = () => e.item.children && e.item.children.length > 0, O = () => {
-    if (!a || !g) return;
-    const n = a.getBoundingClientRect(), y = g.getBoundingClientRect(), t = he(n, y);
-    f(t);
-  }, B = () => {
-    x() && (clearTimeout(k), k = setTimeout(() => {
-      i(!0), requestAnimationFrame(O);
+  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);
+  }, _ = () => {
+    v() && (clearTimeout(k), k = setTimeout(() => {
+      u(!0), requestAnimationFrame(A);
     }, 100));
-  }, q = () => {
-    x() && (clearTimeout(k), k = void 0, !e.item.keepOpen && (k = setTimeout(() => {
-      i(!1);
+  }, T = () => {
+    v() && (clearTimeout(k), k = void 0, !e.item.keepOpen && (k = setTimeout(() => {
+      u(!1);
     }, 150)));
-  }, u = (n) => {
+  }, o = (n) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
         n.stopPropagation();
         return;
       }
-      x() ? (i((y) => !y), requestAnimationFrame(O)) : e.item.content || e.onSelect(e.item);
+      v() ? (u((g) => !g), requestAnimationFrame(A)) : e.item.content || e.onSelect(e.item);
     }
-  }, l = (n = "first") => {
-    x() && (i(!0), requestAnimationFrame(() => {
-      O(), p(g, n);
+  }, r = (n = "first") => {
+    v() && (u(!0), requestAnimationFrame(() => {
+      A(), O(h, n);
     }));
-  }, v = () => {
-    i(!1), requestAnimationFrame(() => c?.focus());
+  }, d = () => {
+    u(!1), requestAnimationFrame(() => x?.focus());
   };
   return (() => {
-    var n = ae();
-    n.addEventListener("mouseleave", q), n.addEventListener("mouseenter", B);
-    var y = a;
-    return typeof y == "function" ? P(y, n) : a = n, w(n, m(S, {
+    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($, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = oe();
-        return t.$$click = u, w(t, e.item.content), D(() => I(t, A("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), t;
+        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;
       }
-    }), null), w(n, m(S, {
+    }), null), f(n, l($, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = le(), M = t.firstChild, d = M.nextSibling;
-        t.$$keydown = (s) => {
-          e.item.disabled || x() && ((s.key === "ArrowRight" || s.key === "Enter" || s.key === " ") && (s.preventDefault(), l("first")), s.key === "ArrowLeft" && (s.preventDefault(), v()));
-        }, t.$$click = u;
-        var $ = c;
-        return typeof $ == "function" ? P($, t) : c = t, b(t, "id", L), w(M, m(S, {
+        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($, {
           get when() {
-            return j(() => !!e.selected)() && !x();
+            return K(() => !!e.selected)() && !v();
           },
           get children() {
-            return m(ne, {
+            return l(Z, {
               class: "w-3 h-3"
             });
           }
-        })), w(t, m(S, {
+        })), f(t, l($, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (s) => (() => {
-            var E = ue();
-            return w(E, s), E;
+          children: (a) => (() => {
+            var S = ue();
+            return f(S, a), S;
           })()
-        }), d), w(d, () => e.item.label), w(t, m(S, {
+        }), i), f(i, () => e.item.label), f(t, l($, {
           get when() {
-            return x();
+            return v();
           },
           get children() {
-            return m(re, {
+            return l(ee, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), D((s) => {
-          var E = A("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"), T = e.item.disabled, H = x() ? "menu" : void 0, W = x() ? r() : void 0, N = e.selected && !x() ? "true" : void 0;
-          return E !== s.e && I(t, s.e = E), T !== s.t && (t.disabled = s.t = T), H !== s.a && b(t, "aria-haspopup", s.a = H), W !== s.o && b(t, "aria-expanded", s.o = W), N !== s.i && b(t, "data-floe-selected", s.i = N), s;
+        }), 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;
         }, {
           e: void 0,
           t: void 0,
@@ -320,35 +267,35 @@ function X(e) {
           i: void 0
         }), t;
       }
-    }), null), w(n, m(S, {
+    }), null), f(n, l($, {
       get when() {
-        return j(() => !!r())() && x();
+        return K(() => !!s())() && v();
       },
       get children() {
-        return m(U, {
+        return l(U, {
           get children() {
-            var t = G();
-            t.$$keydown = (d) => {
-              d.key !== "ArrowLeft" && d.key !== "Escape" || (d.preventDefault(), d.stopPropagation(), v());
-            }, t.addEventListener("mouseleave", q), t.addEventListener("mouseenter", () => {
+            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 M = g;
-            return typeof M == "function" ? P(M, t) : g = t, b(t, "aria-labelledby", L), w(t, m(z, {
+            var w = h;
+            return typeof w == "function" ? L(w, t) : h = t, m(t, "aria-labelledby", R), f(t, l(z, {
               get each() {
                 return e.item.children;
               },
-              children: (d) => m(S, {
+              children: (i) => l($, {
                 get when() {
-                  return !d().separator;
+                  return !i().separator;
                 },
                 get fallback() {
-                  return V();
+                  return W();
                 },
                 get children() {
-                  return m(X, {
+                  return l(G, {
                     get item() {
-                      return d();
+                      return i();
                     },
                     selected: !1,
                     get onSelect() {
@@ -363,9 +310,9 @@ function X(e) {
                   });
                 }
               })
-            })), D((d) => {
-              var $ = A("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"), s = e.dropdownId, E = `${o().x}px`, T = `${o().y}px`;
-              return $ !== d.e && I(t, d.e = $), s !== d.t && b(t, "data-floe-dropdown", d.t = s), E !== d.a && F(t, "left", d.a = E), T !== d.o && F(t, "top", d.o = T), d;
+            })), 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,
@@ -378,25 +325,25 @@ function X(e) {
     }), null), n;
   })();
 }
-function Me(e) {
-  const r = () => e.options.find((o) => o.value === e.value), i = () => e.options.map((o) => ({
-    id: o.value,
-    label: o.label
+function xe(e) {
+  const s = () => e.options.find((c) => c.value === e.value), u = () => e.options.map((c) => ({
+    id: c.value,
+    label: c.label
   }));
-  return m(ge, {
+  return l(me, {
     get triggerClass() {
-      return A("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 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);
     },
     get trigger() {
       return [(() => {
-        var o = de();
-        return w(o, () => r()?.label ?? e.placeholder ?? "Select..."), D(() => I(o, A("truncate", !r() && "text-muted-foreground"))), o;
-      })(), m(te, {
+        var c = de();
+        return f(c, () => s()?.label ?? e.placeholder ?? "Select..."), D(() => M(c, C("truncate", !s() && "text-muted-foreground"))), c;
+      })(), l(Y, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];
     },
     get items() {
-      return i();
+      return u();
     },
     get value() {
       return e.value;
@@ -409,10 +356,9 @@ function Me(e) {
     }
   });
 }
-Y(["click", "keydown"]);
+J(["click", "keydown"]);
 export {
-  ge as Dropdown,
-  Me as Select,
-  me as getWrappedMenuItemIndex,
+  me as Dropdown,
+  xe as Select,
   fe as resolveDropdownTriggerKeyAction
 };

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

@@ -0,0 +1,15 @@
+export declare const VIEWPORT_MARGIN = 8;
+export declare const MENU_ITEM_SELECTOR = "[role=\"menuitem\"]:not([disabled]):not([aria-disabled=\"true\"])";
+export type MenuFocusMode = 'first' | 'last' | 'selected';
+export declare function calculateMenuPosition(triggerRect: DOMRect, menuRect: DOMRect, align: 'start' | 'center' | 'end'): {
+    x: number;
+    y: number;
+};
+export declare function calculateSubmenuPosition(parentRect: DOMRect, submenuRect: DOMRect): {
+    x: number;
+    y: number;
+};
+export declare function getWrappedMenuItemIndex(length: number, currentIndex: number, delta: 1 | -1): number | null;
+export declare function getMenuItems(root: ParentNode | null | undefined): HTMLElement[];
+export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode): boolean;
+export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1): boolean;

package/dist/components/ui/menuUtils.js

@@ -0,0 +1,60 @@
+const d = 8, r = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+function M(e, t, n) {
+  const o = window.innerWidth, f = window.innerHeight;
+  let i;
+  switch (n) {
+    case "center":
+      i = e.left + e.width / 2 - t.width / 2;
+      break;
+    case "end":
+      i = e.right - t.width;
+      break;
+    default:
+      i = e.left;
+  }
+  let l = e.bottom + 4;
+  if (i + t.width > o - 8 && (i = o - t.width - 8), i = Math.max(8, i), l + t.height > f - 8) {
+    const I = e.top - 8, h = f - e.bottom - 8;
+    I > h && I >= t.height ? l = e.top - t.height - 4 : l = f - t.height - 8;
+  }
+  return l = Math.max(8, l), { x: i, y: l };
+}
+function u(e, t) {
+  const n = window.innerWidth, o = window.innerHeight;
+  let f = e.right, i = e.top;
+  if (f + t.width > n - 8) {
+    const l = e.left - t.width;
+    l >= 8 ? f = l : f = n - t.width - 8;
+  }
+  return i + t.height > o - 8 && (i = o - t.height - 8), f = Math.max(8, f), i = Math.max(8, i), { x: f, y: i };
+}
+function a(e, t, n) {
+  return e <= 0 ? null : t < 0 ? n > 0 ? 0 : e - 1 : (t + n + e) % e;
+}
+function s(e) {
+  return !e || typeof HTMLElement > "u" ? [] : Array.from(e.querySelectorAll(r)).filter(
+    (t) => t instanceof HTMLElement
+  );
+}
+function w(e, t = "first") {
+  const n = s(e);
+  if (!n.length) return !1;
+  let o = n[0];
+  return t === "last" ? o = n[n.length - 1] : t === "selected" && (o = n.find((f) => f.getAttribute("data-floe-selected") === "true") ?? n[0]), o.focus(), !0;
+}
+function E(e, t, n) {
+  const o = s(e);
+  if (!o.length) return !1;
+  const f = t ? o.indexOf(t) : -1, i = a(o.length, f, n);
+  return i === null ? !1 : (o[i]?.focus(), !0);
+}
+export {
+  r as MENU_ITEM_SELECTOR,
+  d as VIEWPORT_MARGIN,
+  M as calculateMenuPosition,
+  u as calculateSubmenuPosition,
+  w as focusMenuItem,
+  s as getMenuItems,
+  a as getWrappedMenuItemIndex,
+  E as moveMenuFocus
+};