@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/ui/Dropdown.js

@@ -1,14 +1,14 @@
-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 { setAttribute as d, insert as f, createComponent as u, Portal as W, use as D, spread as G, mergeProps as J, effect as q, className as p, template as P, memo as z, delegateEvents as te } from "solid-js/web";
+import { createSignal as B, 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 ae, Check as ie, ChevronRight as ue } from "../icons/index.js";
-import { focusMenuItem as O, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as ce } from "./menuUtils.js";
+import { ChevronDown as ae, Check as ie, ChevronRight as le } from "../icons/index.js";
+import { focusMenuItem as O, MENU_ITEM_SELECTOR as ue, 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 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 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>");
+import { resolveSurfacePortalHost as fe, projectSurfacePortalPosition as me, resolveSurfacePortalBoundaryRect as ge, isSurfacePortalMode as ve, resolveSurfacePortalMount as he } from "./dialogSurfaceScope.js";
+var K = /* @__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>'), we = /* @__PURE__ */ P('<button type=button data-floe-interactive=item 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,14 +35,15 @@ function Pe(e, c) {
   }
 }
 function $e(e) {
-  const [c, s] = j(!1), a = Y({
-    open: c
-  }), [q, k] = j({
+  const [c, s] = B(!1), a = Y({
+    open: c,
+    element: () => v
+  }), [j, M] = B({
     x: -9999,
     y: -9999
   });
-  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({
+  let g, v;
+  const h = `floe-dropdown-${ke += 1}`, $ = `${h}-menu`, x = () => typeof e.items == "function" ? e.items() : e.items, b = ne(() => a.mounted() ? fe({
     owner: g
   }) : {
     host: null,
@@ -50,7 +51,7 @@ function $e(e) {
     mountHost: null,
     mode: "global"
   }), w = {
-    mount: () => be(b()),
+    mount: () => he(b()),
     isSurfaceMode: () => ve(b()),
     boundaryRect: () => ge(b()),
     projectPosition: (t) => me(t, b())
@@ -59,8 +60,8 @@ function $e(e) {
   };
   de({
     open: a.mounted,
-    root: () => h,
-    containsTarget: (t) => !!(t instanceof Element ? t : document.activeElement)?.closest(`[data-floe-dropdown="${v}"]`),
+    root: () => v,
+    containsTarget: (t) => !!(t instanceof Element ? t : document.activeElement)?.closest(`[data-floe-dropdown="${h}"]`),
     onClose: C,
     onEscapeOutside: C,
     lockBodyScroll: !1,
@@ -72,13 +73,13 @@ function $e(e) {
     escapeKeyPhase: "bubble"
   });
   const T = () => {
-    if (!g || !h) return;
-    const t = g.getBoundingClientRect(), o = h.getBoundingClientRect(), n = se(t, o, e.align ?? "start", w.boundaryRect());
-    k(n);
+    if (!g || !v) return;
+    const t = g.getBoundingClientRect(), o = v.getBoundingClientRect(), n = se(t, o, e.align ?? "start", w.boundaryRect());
+    M(n);
   };
   Q(() => {
     if (!a.mounted()) {
-      k({
+      M({
         x: -9999,
         y: -9999
       });
@@ -87,10 +88,10 @@ function $e(e) {
     if (!c()) return;
     const t = (o) => {
       const n = o.target;
-      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${v}"]`) || s(!1);
+      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${h}"]`) || s(!1);
     };
     document.addEventListener("pointerdown", t, !0), requestAnimationFrame(() => {
-      T(), O(h, e.value ? "selected" : "first");
+      T(), O(v, e.value ? "selected" : "first");
     }), re(() => {
       document.removeEventListener("pointerdown", t, !0);
     });
@@ -102,7 +103,7 @@ function $e(e) {
     })), oe(() => o(t.id));
   }, A = (t, o = "first") => {
     e.disabled || (s(t), requestAnimationFrame(() => {
-      T(), O(h, o);
+      T(), O(v, o);
     }));
   }, H = (t) => {
     if (e.disabled) return;
@@ -118,7 +119,7 @@ function $e(e) {
       A(!0, o.focusMode ?? "first");
     }
   }, _ = (t) => {
-    const o = t.target, n = o?.closest('[role="menu"]'), r = o?.closest(le);
+    const o = t.target, n = o?.closest('[role="menu"]'), r = o?.closest(ue);
     switch (t.key) {
       case "ArrowDown":
         t.preventDefault(), U(n, r, 1);
@@ -140,8 +141,8 @@ function $e(e) {
     }
   };
   return (() => {
-    var t = he(), o = t.firstChild;
-    d(t, "data-floe-dropdown", v), o.$$keydown = H, o.$$click = () => {
+    var t = be(), o = t.firstChild;
+    d(t, "data-floe-dropdown", h), o.$$keydown = H, o.$$click = () => {
       if (!e.disabled) {
         if (c()) {
           s(!1);
@@ -151,20 +152,20 @@ function $e(e) {
       }
     };
     var n = g;
-    return typeof n == "function" ? D(n, o) : g = o, d(o, "aria-controls", $), f(o, () => e.trigger), f(t, l(y, {
+    return typeof n == "function" ? D(n, o) : g = o, d(o, "aria-controls", $), f(o, () => e.trigger), f(t, u(y, {
       get when() {
         return a.mounted();
       },
       get children() {
-        return l(W, {
+        return u(W, {
           get mount() {
             return w.mount();
           },
           get children() {
-            var r = K(), u = h;
-            return typeof u == "function" ? D(u, r) : h = r, d(r, "data-floe-dropdown", v), G(r, J({
+            var r = K(), l = v;
+            return typeof l == "function" ? D(l, r) : v = r, d(r, "data-floe-dropdown", h), G(r, J({
               get class() {
-                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");
+                return k(w.isSurfaceMode() ? "absolute z-20 min-w-36" : "fixed z-50 min-w-36", "bg-popover text-popover-foreground p-1", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu");
               },
               get "data-floating-presence"() {
                 return a.state();
@@ -177,19 +178,19 @@ function $e(e) {
             }), {
               get style() {
                 return {
-                  left: `${w.projectPosition(q()).x}px`,
-                  top: `${w.projectPosition(q()).y}px`
+                  left: `${w.projectPosition(j()).x}px`,
+                  top: `${w.projectPosition(j()).y}px`
                 };
               },
               role: "menu",
               "data-floe-surface": "floating",
               id: $,
               onKeyDown: _
-            }), !1, !0), f(r, l(V, {
+            }), !1, !0), f(r, u(V, {
               get each() {
-                return M();
+                return x();
               },
-              children: (m) => l(y, {
+              children: (m) => u(y, {
                 get when() {
                   return !m().separator;
                 },
@@ -197,7 +198,7 @@ function $e(e) {
                   return Z();
                 },
                 get children() {
-                  return l(ee, {
+                  return u(ee, {
                     get item() {
                       return m();
                     },
@@ -206,7 +207,7 @@ function $e(e) {
                     },
                     onSelect: F,
                     onCloseMenu: () => s(!1),
-                    dropdownId: v,
+                    dropdownId: h,
                     portalLayout: w
                   });
                 }
@@ -215,9 +216,9 @@ function $e(e) {
           }
         });
       }
-    }), 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;
+    }), null), q((r) => {
+      var l = k("relative inline-block", e.class), m = k("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), i = e.disabled ? -1 : 0, S = c(), R = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, L = e.triggerInputSurface ? "true" : void 0, I = e.triggerInputSurface ? "inset" : void 0;
+      return l !== r.e && p(t, r.e = l), m !== r.t && p(o, r.t = m), i !== r.a && d(o, "tabindex", r.a = i), S !== r.o && d(o, "aria-expanded", r.o = S), 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,
@@ -231,24 +232,25 @@ function $e(e) {
   })();
 }
 function ee(e) {
-  const [c, s] = j(!1), a = () => e.item.children && e.item.children.length > 0, k = Y({
-    open: () => !!(c() && a())
-  }), [g, h] = j({
+  const [c, s] = B(!1), a = () => e.item.children && e.item.children.length > 0, M = Y({
+    open: () => !!(c() && a()),
+    element: () => x
+  }), [g, v] = B({
     x: -9999,
     y: -9999
   });
-  let v, $, M, b;
+  let h, $, x, b;
   const w = `floe-dropdown-item-${Me += 1}`;
   Q(() => {
-    k.mounted() || h({
+    M.mounted() || v({
       x: -9999,
       y: -9999
     });
   });
   const C = () => {
-    if (!v || !M) return;
-    const t = v.getBoundingClientRect(), o = M.getBoundingClientRect(), n = ce(t, o, e.portalLayout.boundaryRect());
-    h(n);
+    if (!h || !x) return;
+    const t = h.getBoundingClientRect(), o = x.getBoundingClientRect(), n = ce(t, o, e.portalLayout.boundaryRect());
+    v(n);
   }, T = () => {
     a() && (clearTimeout(b), b = setTimeout(() => {
       s(!0), requestAnimationFrame(C);
@@ -267,7 +269,7 @@ function ee(e) {
     }
   }, H = (t = "first") => {
     a() && (s(!0), requestAnimationFrame(() => {
-      C(), O(M, t);
+      C(), O(x, t);
     }));
   }, _ = () => {
     s(!1), requestAnimationFrame(() => $?.focus());
@@ -275,61 +277,61 @@ function ee(e) {
   return (() => {
     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, {
+    var o = h;
+    return typeof o == "function" ? D(o, t) : h = t, f(t, u(y, {
       get when() {
         return e.item.content;
       },
       get children() {
         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;
+        return n.$$click = A, f(n, e.item.content), q((r) => {
+          var l = k("w-full px-2 py-1.5", e.item.tone === "danger" && "text-error", e.item.disabled && "opacity-50 pointer-events-none"), m = e.item.tone ?? "default";
+          return l !== r.e && p(n, r.e = l), m !== r.t && d(n, "data-tone", r.t = m), r;
         }, {
           e: void 0,
           t: void 0
         }), n;
       }
-    }), null), f(t, l(y, {
+    }), null), f(t, u(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var n = we(), r = n.firstChild, u = r.nextSibling;
+        var n = we(), r = n.firstChild, l = 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, {
+        return typeof m == "function" ? D(m, n) : $ = n, d(n, "id", w), f(r, u(y, {
           get when() {
             return z(() => !!e.selected)() && !a();
           },
           get children() {
-            return l(ie, {
+            return u(ie, {
               class: "w-3 h-3"
             });
           }
-        })), f(n, l(y, {
+        })), f(n, u(y, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
           children: (i) => (() => {
-            var x = xe();
-            return f(x, i), x;
+            var S = xe();
+            return f(S, i), S;
           })()
-        }), u), f(u, () => e.item.label), f(n, l(y, {
+        }), l), f(l, () => e.item.label), f(n, u(y, {
           get when() {
             return a();
           },
           get children() {
-            return l(ue, {
-              class: "w-3 h-3 text-muted-foreground"
+            return u(le, {
+              class: "w-3 h-3 text-[var(--floe-ink-quiet)]"
             });
           }
-        }), 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;
+        }), null), q((i) => {
+          var S = k("w-full flex items-center gap-2 px-2", "min-h-[var(--floe-row-height)] rounded-sm", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", "focus:outline-none", e.item.tone === "danger" ? "text-error" : "text-[var(--floe-ink-soft)]", e.item.disabled ? "opacity-50 cursor-not-allowed" : "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 S !== i.e && p(n, i.e = S), 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,
@@ -339,29 +341,29 @@ function ee(e) {
           n: void 0
         }), n;
       }
-    }), null), f(t, l(y, {
+    }), null), f(t, u(y, {
       get when() {
-        return z(() => !!k.mounted())() && a();
+        return z(() => !!M.mounted())() && a();
       },
       get children() {
-        return l(W, {
+        return u(W, {
           get mount() {
             return e.portalLayout.mount();
           },
           get children() {
-            var n = K(), r = M;
-            return typeof r == "function" ? D(r, n) : M = n, G(n, J({
+            var n = K(), r = x;
+            return typeof r == "function" ? D(r, n) : x = n, G(n, J({
               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", "floe-floating-presence floe-floating-menu floe-floating-submenu");
+                return k(e.portalLayout.isSurfaceMode() ? "absolute z-20 min-w-36" : "fixed z-50 min-w-36", "bg-popover text-popover-foreground p-1", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-elevation-float)]", "floe-floating-presence floe-floating-menu floe-floating-submenu");
               },
               get "data-floe-dropdown"() {
                 return e.dropdownId;
               },
               get "data-floating-presence"() {
-                return k.state();
+                return M.state();
               },
               get "aria-hidden"() {
-                return k.exiting() ? "true" : void 0;
+                return M.exiting() ? "true" : void 0;
               }
             }, () => ({
               [X]: e.portalLayout.isSurfaceMode() ? "true" : void 0
@@ -379,24 +381,24 @@ function ee(e) {
                 clearTimeout(b);
               },
               onMouseLeave: F,
-              onKeyDown: (u) => {
-                u.key !== "ArrowLeft" && u.key !== "Escape" || (u.preventDefault(), u.stopPropagation(), _());
+              onKeyDown: (l) => {
+                l.key !== "ArrowLeft" && l.key !== "Escape" || (l.preventDefault(), l.stopPropagation(), _());
               }
-            }), !1, !0), f(n, l(V, {
+            }), !1, !0), f(n, u(V, {
               get each() {
                 return e.item.children;
               },
-              children: (u) => l(y, {
+              children: (l) => u(y, {
                 get when() {
-                  return !u().separator;
+                  return !l().separator;
                 },
                 get fallback() {
                   return Z();
                 },
                 get children() {
-                  return l(ee, {
+                  return u(ee, {
                     get item() {
-                      return u();
+                      return l();
                     },
                     selected: !1,
                     get onSelect() {
@@ -426,17 +428,17 @@ function Fe(e) {
     id: a.value,
     label: a.label
   }));
-  return l($e, {
+  return u($e, {
     triggerInputSurface: !0,
     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-[length:var(--floe-type-control)] shadow-sm", "transition-colors duration-100", e.class);
+      return k("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "floe-field text-[length:var(--floe-type-control)]", e.class);
     },
     get trigger() {
       return [(() => {
         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"
+        return f(a, () => c()?.label ?? e.placeholder ?? "Select..."), q(() => p(a, k("truncate", !c() && "text-[var(--floe-ink-soft)]"))), a;
+      })(), u(ae, {
+        class: "w-3.5 h-3.5 text-[var(--floe-ink-quiet)]"
       })];
     },
     get items() {