@floegence/floe-webapp-core 0.52.0 → 0.52.1

package/dist/components/ui/Dropdown.js

@@ -1,9 +1,9 @@
-import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as O, spread as G, mergeProps as J, effect as F, className as p, template as P, memo as z, delegateEvents as te } from "solid-js/web";
+import { setAttribute as f, insert as g, createComponent as l, Portal as W, use as I, spread as G, mergeProps as J, effect as F, className as O, 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 { cn as M } 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 I, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
+import { focusMenuItem as p, MENU_ITEM_SELECTOR as le, moveMenuFocus as U, calculateMenuPosition as se, calculateSubmenuPosition as de } from "./menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as X } from "./localInteractionSurface.js";
 import { createFloatingPresence as Y } from "./floatingPresence.js";
 import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
@@ -42,9 +42,9 @@ function $e(e) {
     x: -9999,
     y: -9999
   });
-  let b, h;
-  const v = `floe-dropdown-${Me += 1}`, $ = `${v}-menu`, w = ne(() => o.mounted() ? fe({
-    owner: b
+  let v, h;
+  const b = `floe-dropdown-${Me += 1}`, $ = `${b}-menu`, w = ne(() => o.mounted() ? fe({
+    owner: v
   }) : {
     host: null,
     boundaryHost: null,
@@ -56,12 +56,12 @@ function $e(e) {
     boundaryRect: () => ge(w()),
     projectPosition: (r) => me(r, w())
   }, A = () => {
-    d(!1), requestAnimationFrame(() => b?.focus());
+    d(!1), requestAnimationFrame(() => v?.focus());
   };
   ce({
     open: o.mounted,
     root: () => h,
-    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${v}"]`),
+    containsTarget: (r) => !!(r instanceof Element ? r : document.activeElement)?.closest(`[data-floe-dropdown="${b}"]`),
     onClose: A,
     onEscapeOutside: A,
     lockBodyScroll: !1,
@@ -73,8 +73,8 @@ function $e(e) {
     escapeKeyPhase: "bubble"
   });
   const C = () => {
-    if (!b || !h) return;
-    const r = b.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
+    if (!v || !h) return;
+    const r = v.getBoundingClientRect(), n = h.getBoundingClientRect(), i = se(r, n, e.align ?? "start", m.boundaryRect());
     k(i);
   };
   Q(() => {
@@ -88,20 +88,22 @@ function $e(e) {
     if (!c()) return;
     const r = (n) => {
       const i = n.target;
-      i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${v}"]`) || d(!1);
+      i && typeof i.closest == "function" && i.closest(`[data-floe-dropdown="${b}"]`) || d(!1);
     };
     document.addEventListener("pointerdown", r, !0), requestAnimationFrame(() => {
-      C(), I(h, e.value ? "selected" : "first");
+      C(), p(h, e.value ? "selected" : "first");
     }), re(() => {
       document.removeEventListener("pointerdown", r, !0);
     });
   });
   const j = (r) => {
     const n = e.onSelect;
-    r.keepOpen || d(!1), oe(() => n(r.id));
+    r.keepOpen || (d(!1), v?.focus({
+      preventScroll: !0
+    })), oe(() => n(r.id));
   }, R = (r, n = "first") => {
     e.disabled || (d(r), requestAnimationFrame(() => {
-      C(), I(h, n);
+      C(), p(h, n);
     }));
   }, T = (r) => {
     if (e.disabled) return;
@@ -126,13 +128,13 @@ function $e(e) {
         r.preventDefault(), U(i, t, -1);
         return;
       case "Home":
-        r.preventDefault(), I(i, "first");
+        r.preventDefault(), p(i, "first");
         return;
       case "End":
-        r.preventDefault(), I(i, "last");
+        r.preventDefault(), p(i, "last");
         return;
       case "Tab":
-        r.preventDefault(), d(!1), b?.focus();
+        r.preventDefault(), d(!1), v?.focus();
         return;
       default:
         return;
@@ -140,7 +142,7 @@ function $e(e) {
   };
   return (() => {
     var r = he(), n = r.firstChild;
-    f(r, "data-floe-dropdown", v), n.$$keydown = T, n.$$click = () => {
+    f(r, "data-floe-dropdown", b), n.$$keydown = T, n.$$click = () => {
       if (!e.disabled) {
         if (c()) {
           d(!1);
@@ -149,8 +151,8 @@ function $e(e) {
         R(!0, e.value ? "selected" : "first");
       }
     };
-    var i = b;
-    return typeof i == "function" ? O(i, n) : b = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
+    var i = v;
+    return typeof i == "function" ? I(i, n) : v = n, f(n, "aria-controls", $), g(n, () => e.trigger), g(r, l(y, {
       get when() {
         return o.mounted();
       },
@@ -161,7 +163,7 @@ function $e(e) {
           },
           get children() {
             var t = H(), s = h;
-            return typeof s == "function" ? O(s, t) : h = t, f(t, "data-floe-dropdown", v), G(t, J({
+            return typeof s == "function" ? I(s, t) : h = t, f(t, "data-floe-dropdown", b), G(t, J({
               get class() {
                 return M(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");
               },
@@ -205,7 +207,7 @@ function $e(e) {
                     },
                     onSelect: j,
                     onCloseMenu: () => d(!1),
-                    dropdownId: v,
+                    dropdownId: b,
                     portalLayout: m
                   });
                 }
@@ -216,7 +218,7 @@ function $e(e) {
       }
     }), null), F((t) => {
       var s = M("relative inline-block", e.class), u = M("cursor-pointer", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), x = e.disabled ? -1 : 0, a = c(), S = e.triggerAriaLabel, E = e.disabled ? "true" : void 0, D = e.triggerInputSurface ? "true" : void 0, L = e.triggerInputSurface ? "inset" : void 0;
-      return s !== t.e && p(r, t.e = s), u !== t.t && p(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), D !== t.s && f(n, "data-floe-input-surface", t.s = D), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
+      return s !== t.e && O(r, t.e = s), u !== t.t && O(n, t.t = u), x !== t.a && f(n, "tabindex", t.a = x), a !== t.o && f(n, "aria-expanded", t.o = a), S !== t.i && f(n, "aria-label", t.i = S), E !== t.n && f(n, "aria-disabled", t.n = E), D !== t.s && f(n, "data-floe-input-surface", t.s = D), L !== t.h && f(n, "data-floe-surface", t.h = L), t;
     }, {
       e: void 0,
       t: void 0,
@@ -233,11 +235,11 @@ function ee(e) {
   const [c, d] = _(!1), o = () => e.item.children && e.item.children.length > 0, k = Y({
     open: () => !!(c() && o()),
     exitDurationMs: 100
-  }), [b, h] = _({
+  }), [v, h] = _({
     x: -9999,
     y: -9999
   });
-  let v, $, w, m;
+  let b, $, w, m;
   const A = `floe-dropdown-item-${ke += 1}`;
   Q(() => {
     k.mounted() || h({
@@ -246,8 +248,8 @@ function ee(e) {
     });
   });
   const C = () => {
-    if (!v || !w) return;
-    const n = v.getBoundingClientRect(), i = w.getBoundingClientRect(), t = de(n, i, e.portalLayout.boundaryRect());
+    if (!b || !w) return;
+    const n = b.getBoundingClientRect(), i = w.getBoundingClientRect(), t = de(n, i, e.portalLayout.boundaryRect());
     h(t);
   }, j = () => {
     o() && (clearTimeout(m), m = setTimeout(() => {
@@ -267,7 +269,7 @@ function ee(e) {
     }
   }, q = (n = "first") => {
     o() && (d(!0), requestAnimationFrame(() => {
-      C(), I(w, n);
+      C(), p(w, n);
     }));
   }, r = () => {
     d(!1), requestAnimationFrame(() => $?.focus());
@@ -275,8 +277,8 @@ function ee(e) {
   return (() => {
     var n = ye();
     n.addEventListener("mouseleave", R), n.addEventListener("mouseenter", j);
-    var i = v;
-    return typeof i == "function" ? O(i, n) : v = n, g(n, l(y, {
+    var i = b;
+    return typeof i == "function" ? I(i, n) : b = n, g(n, l(y, {
       get when() {
         return e.item.content;
       },
@@ -284,7 +286,7 @@ function ee(e) {
         var t = H();
         return t.$$click = T, g(t, e.item.content), F((s) => {
           var u = M("w-full px-2 py-1.5", e.item.tone === "danger" && "text-destructive", e.item.disabled && "opacity-50 pointer-events-none"), x = e.item.tone ?? "default";
-          return u !== s.e && p(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
+          return u !== s.e && O(t, s.e = u), x !== s.t && f(t, "data-tone", s.t = x), s;
         }, {
           e: void 0,
           t: void 0
@@ -300,7 +302,7 @@ function ee(e) {
           e.item.disabled || o() && ((a.key === "ArrowRight" || a.key === "Enter" || a.key === " ") && (a.preventDefault(), q("first")), a.key === "ArrowLeft" && (a.preventDefault(), r()));
         }, t.$$click = T;
         var x = $;
-        return typeof x == "function" ? O(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
+        return typeof x == "function" ? I(x, t) : $ = t, f(t, "id", A), g(s, l(y, {
           get when() {
             return z(() => !!e.selected)() && !o();
           },
@@ -329,7 +331,7 @@ function ee(e) {
           }
         }), null), F((a) => {
           var S = M("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"), E = e.item.disabled, D = o() ? "menu" : void 0, L = o() ? c() : void 0, K = e.selected && !o() ? "true" : void 0, N = e.item.tone ?? "default";
-          return S !== a.e && p(t, a.e = S), E !== a.t && (t.disabled = a.t = E), D !== a.a && f(t, "aria-haspopup", a.a = D), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
+          return S !== a.e && O(t, a.e = S), E !== a.t && (t.disabled = a.t = E), D !== a.a && f(t, "aria-haspopup", a.a = D), L !== a.o && f(t, "aria-expanded", a.o = L), K !== a.i && f(t, "data-floe-selected", a.i = K), N !== a.n && f(t, "data-tone", a.n = N), a;
         }, {
           e: void 0,
           t: void 0,
@@ -350,7 +352,7 @@ function ee(e) {
           },
           get children() {
             var t = H(), s = w;
-            return typeof s == "function" ? O(s, t) : w = t, G(t, J({
+            return typeof s == "function" ? I(s, t) : w = t, G(t, J({
               get class() {
                 return M(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");
               },
@@ -368,8 +370,8 @@ function ee(e) {
             }), {
               get style() {
                 return {
-                  left: `${e.portalLayout.projectPosition(b()).x}px`,
-                  top: `${e.portalLayout.projectPosition(b()).y}px`
+                  left: `${e.portalLayout.projectPosition(v()).x}px`,
+                  top: `${e.portalLayout.projectPosition(v()).y}px`
                 };
               },
               role: "menu",
@@ -434,7 +436,7 @@ function Fe(e) {
     get trigger() {
       return [(() => {
         var o = Se();
-        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => p(o, M("truncate", !c() && "text-muted-foreground"))), o;
+        return g(o, () => c()?.label ?? e.placeholder ?? "Select..."), F(() => O(o, M("truncate", !c() && "text-muted-foreground"))), o;
       })(), l(ae, {
         class: "w-3.5 h-3.5 text-muted-foreground"
       })];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.52.0",
+  "version": "0.52.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",