@floegence/floe-webapp-core 0.50.5 → 0.51.0

package/dist/components/ui/Dropdown.js

@@ -1,13 +1,13 @@
-import { setAttribute as v, insert as g, createComponent as l, Portal as W, use as E, spread as G, mergeProps as J, effect as T, 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 { setAttribute as m, insert as v, createComponent as l, Portal as W, use as I, spread as G, mergeProps as J, effect as F, className as O, template as $, 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 k } from "../../utils/cn.js";
 import { deferNonBlocking as oe } from "../../utils/defer.js";
-import { ChevronDown as ie, Check as ue, ChevronRight as ae } from "../icons/index.js";
-import { focusMenuItem as R, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as de, calculateSubmenuPosition as ce } from "./menuUtils.js";
+import { ChevronDown as ie, Check as ae, ChevronRight as ue } from "../icons/index.js";
+import { focusMenuItem as D, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as de, calculateSubmenuPosition as ce } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
 import { createFloatingPresence as Y } from "./floatingPresence.js";
 import { resolveSurfacePortalHost as se, projectSurfacePortalPosition as fe, resolveSurfacePortalBoundaryRect as me, isSurfacePortalMode as ge, resolveSurfacePortalMount as ve } from "./dialogSurfaceScope.js";
-var j = /* @__PURE__ */ P("<div>"), be = /* @__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>'), he = /* @__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">'), we = /* @__PURE__ */ P("<div class=relative>"), ye = /* @__PURE__ */ P('<span class="w-3.5 h-3.5 flex items-center justify-center">'), xe = /* @__PURE__ */ P("<span>");
+var B = /* @__PURE__ */ $("<div>"), he = /* @__PURE__ */ $("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), Z = /* @__PURE__ */ $('<div class="my-1 h-px bg-border"role=separator>'), be = /* @__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">'), we = /* @__PURE__ */ $("<div class=relative>"), ye = /* @__PURE__ */ $('<span class="w-3.5 h-3.5 flex items-center justify-center">'), xe = /* @__PURE__ */ $("<span>");
 let Se = 0, Me = 0;
 function ke(e, f) {
   switch (e) {
@@ -33,33 +33,33 @@ function ke(e, f) {
       return null;
   }
 }
-function $e(e) {
-  const [f, c] = _(!1), u = Y({
+function Pe(e) {
+  const [f, c] = j(!1), a = Y({
     open: f,
     exitDurationMs: 100
-  }), [F, $] = _({
+  }), [q, P] = j({
     x: -9999,
     y: -9999
   });
   let x, w;
-  const b = `floe-dropdown-${Se += 1}`, C = `${b}-menu`, h = ne(() => u.mounted() ? se() : {
+  const h = `floe-dropdown-${Se += 1}`, C = `${h}-menu`, b = ne(() => a.mounted() ? se() : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), m = {
-    mount: () => ve(h()),
-    isSurfaceMode: () => ge(h()),
-    boundaryRect: () => me(h()),
-    projectPosition: (o) => fe(o, h())
+  }), g = {
+    mount: () => ve(b()),
+    isSurfaceMode: () => ge(b()),
+    boundaryRect: () => me(b()),
+    projectPosition: (o) => fe(o, b())
   }, A = () => {
     if (!x || !w) return;
-    const o = x.getBoundingClientRect(), r = w.getBoundingClientRect(), i = de(o, r, e.align ?? "start", m.boundaryRect());
-    $(i);
+    const o = x.getBoundingClientRect(), r = w.getBoundingClientRect(), i = de(o, r, e.align ?? "start", g.boundaryRect());
+    P(i);
   };
   Q(() => {
-    if (!u.mounted()) {
-      $({
+    if (!a.mounted()) {
+      P({
         x: -9999,
         y: -9999
       });
@@ -67,13 +67,13 @@ function $e(e) {
     }
     if (!f()) return;
     const o = (i) => {
-      const n = i.target;
-      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${b}"]`) || c(!1);
+      const t = i.target;
+      t && typeof t.closest == "function" && t.closest(`[data-floe-dropdown="${h}"]`) || c(!1);
     }, r = (i) => {
       i.key === "Escape" && (c(!1), requestAnimationFrame(() => x?.focus()));
     };
     document.addEventListener("pointerdown", o, !0), document.addEventListener("keydown", r), requestAnimationFrame(() => {
-      A(), R(w, e.value ? "selected" : "first");
+      A(), D(w, e.value ? "selected" : "first");
     }), re(() => {
       document.removeEventListener("pointerdown", o, !0), document.removeEventListener("keydown", r);
     });
@@ -81,11 +81,11 @@ function $e(e) {
   const L = (o) => {
     const r = e.onSelect;
     o.keepOpen || c(!1), oe(() => r(o.id));
-  }, p = (o, r = "first") => {
+  }, T = (o, r = "first") => {
     e.disabled || (c(o), requestAnimationFrame(() => {
-      A(), R(w, r);
+      A(), D(w, r);
     }));
-  }, I = (o) => {
+  }, p = (o) => {
     if (e.disabled) return;
     const r = ke(o.key, {
       open: f(),
@@ -96,22 +96,22 @@ function $e(e) {
         c(!1);
         return;
       }
-      p(!0, r.focusMode ?? "first");
+      T(!0, r.focusMode ?? "first");
     }
-  }, O = (o) => {
-    const r = o.target, i = r?.closest('[role="menu"]'), n = r?.closest(le);
+  }, _ = (o) => {
+    const r = o.target, i = r?.closest('[role="menu"]'), t = r?.closest(le);
     switch (o.key) {
       case "ArrowDown":
-        o.preventDefault(), U(i, n, 1);
+        o.preventDefault(), U(i, t, 1);
         return;
       case "ArrowUp":
-        o.preventDefault(), U(i, n, -1);
+        o.preventDefault(), U(i, t, -1);
         return;
       case "Home":
-        o.preventDefault(), R(i, "first");
+        o.preventDefault(), D(i, "first");
         return;
       case "End":
-        o.preventDefault(), R(i, "last");
+        o.preventDefault(), D(i, "last");
         return;
       case "Tab":
         c(!1);
@@ -121,51 +121,52 @@ function $e(e) {
     }
   };
   return (() => {
-    var o = be(), r = o.firstChild;
-    v(o, "data-floe-dropdown", b), r.$$keydown = I, r.$$click = () => {
+    var o = he(), r = o.firstChild;
+    m(o, "data-floe-dropdown", h), r.$$keydown = p, r.$$click = () => {
       if (!e.disabled) {
         if (f()) {
           c(!1);
           return;
         }
-        p(!0, e.value ? "selected" : "first");
+        T(!0, e.value ? "selected" : "first");
       }
     };
     var i = x;
-    return typeof i == "function" ? E(i, r) : x = r, v(r, "aria-controls", C), g(r, () => e.trigger), g(o, l(y, {
+    return typeof i == "function" ? I(i, r) : x = r, m(r, "aria-controls", C), v(r, () => e.trigger), v(o, l(y, {
       get when() {
-        return u.mounted();
+        return a.mounted();
       },
       get children() {
         return l(W, {
           get mount() {
-            return m.mount();
+            return g.mount();
           },
           get children() {
-            var n = j(), t = w;
-            return typeof t == "function" ? E(t, n) : w = n, v(n, "data-floe-dropdown", b), G(n, J({
+            var t = B(), n = w;
+            return typeof n == "function" ? I(n, t) : w = t, m(t, "data-floe-dropdown", h), G(t, 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 k(g.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 u.state();
+                return a.state();
               },
               get "aria-hidden"() {
-                return u.exiting() ? "true" : void 0;
+                return a.exiting() ? "true" : void 0;
               }
             }, () => ({
-              [X]: m.isSurfaceMode() ? "true" : void 0
+              [X]: g.isSurfaceMode() ? "true" : void 0
             }), {
               get style() {
                 return {
-                  left: `${m.projectPosition(F()).x}px`,
-                  top: `${m.projectPosition(F()).y}px`
+                  left: `${g.projectPosition(q()).x}px`,
+                  top: `${g.projectPosition(q()).y}px`
                 };
               },
               role: "menu",
+              "data-floe-surface": "floating",
               id: C,
-              onKeyDown: O
-            }), !1, !0), g(n, l(V, {
+              onKeyDown: _
+            }), !1, !0), v(t, l(V, {
               get each() {
                 return e.items;
               },
@@ -186,129 +187,131 @@ function $e(e) {
                     },
                     onSelect: L,
                     onCloseMenu: () => c(!1),
-                    dropdownId: b,
-                    portalLayout: m
+                    dropdownId: h,
+                    portalLayout: g
                   });
                 }
               })
-            })), n;
+            })), t;
           }
         });
       }
-    }), null), T((n) => {
-      var t = k("relative inline-block", e.class), d = k("cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), s = e.disabled ? -1 : 0, S = f(), a = e.triggerAriaLabel, M = e.disabled ? "true" : void 0;
-      return t !== n.e && D(o, n.e = t), d !== n.t && D(r, n.t = d), s !== n.a && v(r, "tabindex", n.a = s), S !== n.o && v(r, "aria-expanded", n.o = S), a !== n.i && v(r, "aria-label", n.i = a), M !== n.n && v(r, "aria-disabled", n.n = M), n;
+    }), null), F((t) => {
+      var n = k("relative inline-block", e.class), d = k("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), s = e.disabled ? -1 : 0, S = f(), u = e.triggerAriaLabel, M = e.disabled ? "true" : void 0, R = e.triggerInputSurface ? "true" : void 0, E = e.triggerInputSurface ? "inset" : void 0;
+      return n !== t.e && O(o, t.e = n), d !== t.t && O(r, t.t = d), s !== t.a && m(r, "tabindex", t.a = s), S !== t.o && m(r, "aria-expanded", t.o = S), u !== t.i && m(r, "aria-label", t.i = u), M !== t.n && m(r, "aria-disabled", t.n = M), R !== t.s && m(r, "data-floe-input-surface", t.s = R), E !== t.h && m(r, "data-floe-surface", t.h = E), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0,
-      n: void 0
+      n: void 0,
+      s: void 0,
+      h: void 0
     }), o;
   })();
 }
 function ee(e) {
-  const [f, c] = _(!1), u = () => e.item.children && e.item.children.length > 0, $ = Y({
-    open: () => !!(f() && u()),
+  const [f, c] = j(!1), a = () => e.item.children && e.item.children.length > 0, P = Y({
+    open: () => !!(f() && a()),
     exitDurationMs: 100
-  }), [x, w] = _({
+  }), [x, w] = j({
     x: -9999,
     y: -9999
   });
-  let b, C, h, m;
+  let h, C, b, g;
   const A = `floe-dropdown-item-${Me += 1}`;
   Q(() => {
-    $.mounted() || w({
+    P.mounted() || w({
       x: -9999,
       y: -9999
     });
   });
   const L = () => {
-    if (!b || !h) return;
-    const i = b.getBoundingClientRect(), n = h.getBoundingClientRect(), t = ce(i, n, e.portalLayout.boundaryRect());
-    w(t);
-  }, p = () => {
-    u() && (clearTimeout(m), m = setTimeout(() => {
+    if (!h || !b) return;
+    const i = h.getBoundingClientRect(), t = b.getBoundingClientRect(), n = ce(i, t, e.portalLayout.boundaryRect());
+    w(n);
+  }, T = () => {
+    a() && (clearTimeout(g), g = setTimeout(() => {
       c(!0), requestAnimationFrame(L);
     }, 100));
-  }, I = () => {
-    u() && (clearTimeout(m), m = void 0, !e.item.keepOpen && (m = setTimeout(() => {
+  }, p = () => {
+    a() && (clearTimeout(g), g = void 0, !e.item.keepOpen && (g = setTimeout(() => {
       c(!1);
     }, 150)));
-  }, O = (i) => {
+  }, _ = (i) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
         i.stopPropagation();
         return;
       }
-      u() ? (c((n) => !n), requestAnimationFrame(L)) : e.item.content || e.onSelect(e.item);
+      a() ? (c((t) => !t), requestAnimationFrame(L)) : e.item.content || e.onSelect(e.item);
     }
   }, o = (i = "first") => {
-    u() && (c(!0), requestAnimationFrame(() => {
-      L(), R(h, i);
+    a() && (c(!0), requestAnimationFrame(() => {
+      L(), D(b, i);
     }));
   }, r = () => {
     c(!1), requestAnimationFrame(() => C?.focus());
   };
   return (() => {
     var i = we();
-    i.addEventListener("mouseleave", I), i.addEventListener("mouseenter", p);
-    var n = b;
-    return typeof n == "function" ? E(n, i) : b = i, g(i, l(y, {
+    i.addEventListener("mouseleave", p), i.addEventListener("mouseenter", T);
+    var t = h;
+    return typeof t == "function" ? I(t, i) : h = i, v(i, l(y, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = j();
-        return t.$$click = O, g(t, e.item.content), T((d) => {
+        var n = B();
+        return n.$$click = _, v(n, e.item.content), F((d) => {
           var s = k("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), S = e.item.tone ?? "default";
-          return s !== d.e && D(t, d.e = s), S !== d.t && v(t, "data-tone", d.t = S), d;
+          return s !== d.e && O(n, d.e = s), S !== d.t && m(n, "data-tone", d.t = S), d;
         }, {
           e: void 0,
           t: void 0
-        }), t;
+        }), n;
       }
-    }), null), g(i, l(y, {
+    }), null), v(i, l(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = he(), d = t.firstChild, s = d.nextSibling;
-        t.$$keydown = (a) => {
-          e.item.disabled || u() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), o("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
-        }, t.$$click = O;
+        var n = be(), d = n.firstChild, s = d.nextSibling;
+        n.$$keydown = (u) => {
+          e.item.disabled || a() && ((u.key === "ArrowRight" || u.key === "Enter" || u.key === " ") && (u.preventDefault(), o("first")), u.key === "ArrowLeft" && (u.preventDefault(), r()));
+        }, n.$$click = _;
         var S = C;
-        return typeof S == "function" ? E(S, t) : C = t, v(t, "id", A), g(d, l(y, {
+        return typeof S == "function" ? I(S, n) : C = n, m(n, "id", A), v(d, l(y, {
           get when() {
-            return z(() => !!e.selected)() && !u();
+            return z(() => !!e.selected)() && !a();
           },
           get children() {
-            return l(ue, {
+            return l(ae, {
               class: "w-3 h-3"
             });
           }
-        })), g(t, l(y, {
+        })), v(n, l(y, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (a) => (() => {
+          children: (u) => (() => {
             var M = ye();
-            return g(M, a), M;
+            return v(M, u), M;
           })()
-        }), s), g(s, () => e.item.label), g(t, l(y, {
+        }), s), v(s, () => e.item.label), v(n, l(y, {
           get when() {
-            return u();
+            return a();
           },
           get children() {
-            return l(ae, {
+            return l(ue, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), T((a) => {
-          var M = 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"), q = e.item.disabled, B = u() ? "menu" : void 0, H = u() ? f() : void 0, K = e.selected && !u() ? "true" : void 0, N = e.item.tone ?? "default";
-          return M !== a.e && D(t, a.e = M), q !== a.t && (t.disabled = a.t = q), B !== a.a && v(t, "aria-haspopup", a.a = B), H !== a.o && v(t, "aria-expanded", a.o = H), K !== a.i && v(t, "data-floe-selected", a.i = K), N !== a.n && v(t, "data-tone", a.n = N), a;
+        }), null), F((u) => {
+          var M = 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"), R = e.item.disabled, E = a() ? "menu" : void 0, H = a() ? f() : void 0, K = e.selected && !a() ? "true" : void 0, N = e.item.tone ?? "default";
+          return M !== u.e && O(n, u.e = M), R !== u.t && (n.disabled = u.t = R), E !== u.a && m(n, "aria-haspopup", u.a = E), H !== u.o && m(n, "aria-expanded", u.o = H), K !== u.i && m(n, "data-floe-selected", u.i = K), N !== u.n && m(n, "data-tone", u.n = N), u;
         }, {
           e: void 0,
           t: void 0,
@@ -316,11 +319,11 @@ function ee(e) {
           o: void 0,
           i: void 0,
           n: void 0
-        }), t;
+        }), n;
       }
-    }), null), g(i, l(y, {
+    }), null), v(i, l(y, {
       get when() {
-        return z(() => !!$.mounted())() && u();
+        return z(() => !!P.mounted())() && a();
       },
       get children() {
         return l(W, {
@@ -328,8 +331,8 @@ function ee(e) {
             return e.portalLayout.mount();
           },
           get children() {
-            var t = j(), d = h;
-            return typeof d == "function" ? E(d, t) : h = t, G(t, J({
+            var n = B(), d = b;
+            return typeof d == "function" ? I(d, n) : b = 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");
               },
@@ -337,10 +340,10 @@ function ee(e) {
                 return e.dropdownId;
               },
               get "data-floating-presence"() {
-                return $.state();
+                return P.state();
               },
               get "aria-hidden"() {
-                return $.exiting() ? "true" : void 0;
+                return P.exiting() ? "true" : void 0;
               }
             }, () => ({
               [X]: e.portalLayout.isSurfaceMode() ? "true" : void 0
@@ -352,15 +355,16 @@ function ee(e) {
                 };
               },
               role: "menu",
+              "data-floe-surface": "floating",
               "aria-labelledby": A,
               onMouseEnter: () => {
-                clearTimeout(m);
+                clearTimeout(g);
               },
-              onMouseLeave: I,
+              onMouseLeave: p,
               onKeyDown: (s) => {
                 s.key !== "ArrowLeft" && s.key !== "Escape" || (s.preventDefault(), s.stopPropagation(), r());
               }
-            }), !1, !0), g(t, l(V, {
+            }), !1, !0), v(n, l(V, {
               get each() {
                 return e.item.children;
               },
@@ -392,26 +396,27 @@ function ee(e) {
                   });
                 }
               })
-            })), t;
+            })), n;
           }
         });
       }
     }), null), i;
   })();
 }
-function Oe(e) {
-  const f = () => e.options.find((u) => u.value === e.value), c = () => e.options.map((u) => ({
-    id: u.value,
-    label: u.label
+function Te(e) {
+  const f = () => e.options.find((a) => a.value === e.value), c = () => e.options.map((a) => ({
+    id: a.value,
+    label: a.label
   }));
-  return l($e, {
+  return l(Pe, {
+    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-xs shadow-sm", "transition-colors duration-100", e.class);
     },
     get trigger() {
       return [(() => {
-        var u = xe();
-        return g(u, () => f()?.label ?? e.placeholder ?? "Select..."), T(() => D(u, k("truncate", !f() && "text-muted-foreground"))), u;
+        var a = xe();
+        return v(a, () => f()?.label ?? e.placeholder ?? "Select..."), F(() => O(a, k("truncate", !f() && "text-muted-foreground"))), a;
       })(), l(ie, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];
@@ -432,7 +437,7 @@ function Oe(e) {
 }
 te(["click", "keydown"]);
 export {
-  $e as Dropdown,
-  Oe as Select,
+  Pe as Dropdown,
+  Te as Select,
   ke as resolveDropdownTriggerKeyAction
 };