@floegence/floe-webapp-core 0.14.1 → 0.14.2

package/dist/index24.js

@@ -1,278 +1,285 @@
-import { delegateEvents as j, insert as f, createComponent as l, Portal as B, effect as _, className as E, setStyleProperty as p, template as S, memo as T, use as L } from "solid-js/web";
-import { createSignal as O, createEffect as q, onCleanup as D, Show as $, For as A } from "solid-js";
-import { cn as M } from "./index110.js";
-import { deferNonBlocking as I } from "./index111.js";
-import { ChevronDown as N, Check as z, ChevronRight as G } from "./index40.js";
-var W = /* @__PURE__ */ S("<div role=menu>"), V = /* @__PURE__ */ S("<div><div class=cursor-pointer>"), F = /* @__PURE__ */ S('<div class="my-1 h-px bg-border"role=separator>'), J = /* @__PURE__ */ S("<div>"), K = /* @__PURE__ */ S('<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">'), Q = /* @__PURE__ */ S("<div class=relative>"), U = /* @__PURE__ */ S('<span class="w-3.5 h-3.5 flex items-center justify-center">'), X = /* @__PURE__ */ S("<button type=button><span>");
-const m = 8;
-function Y(e, i, u) {
-  const o = window.innerWidth, a = window.innerHeight;
-  let t;
-  switch (u) {
+import { delegateEvents as j, setAttribute as I, insert as m, createComponent as d, Portal as B, effect as E, className as S, setStyleProperty as _, template as C, memo as A, use as L } from "solid-js/web";
+import { createSignal as O, createEffect as D, onCleanup as N, Show as y, For as W } from "solid-js";
+import { cn as p } from "./index110.js";
+import { deferNonBlocking as z } from "./index111.js";
+import { ChevronDown as G, Check as V, ChevronRight as J } from "./index40.js";
+var q = /* @__PURE__ */ C("<div role=menu>"), K = /* @__PURE__ */ C("<div><div class=cursor-pointer>"), F = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), Q = /* @__PURE__ */ C("<div>"), U = /* @__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">'), X = /* @__PURE__ */ C("<div class=relative>"), Y = /* @__PURE__ */ C('<span class="w-3.5 h-3.5 flex items-center justify-center">'), Z = /* @__PURE__ */ C("<button type=button><span>");
+const h = 8;
+let R = 0;
+function ee(e, r, c) {
+  const i = window.innerWidth, a = window.innerHeight;
+  let n;
+  switch (c) {
     case "center":
-      t = e.left + e.width / 2 - i.width / 2;
+      n = e.left + e.width / 2 - r.width / 2;
       break;
     case "end":
-      t = e.right - i.width;
+      n = e.right - r.width;
       break;
     default:
-      t = e.left;
+      n = e.left;
   }
-  let r = e.bottom + 4;
-  if (t + i.width > o - m && (t = o - i.width - m), t = Math.max(m, t), r + i.height > a - m) {
-    const v = e.top - m, g = a - e.bottom - m;
-    v > g && v >= i.height ? r = e.top - i.height - 4 : r = a - i.height - m;
+  let l = e.bottom + 4;
+  if (n + r.width > i - h && (n = i - r.width - h), n = Math.max(h, n), l + r.height > a - h) {
+    const s = e.top - h, g = a - e.bottom - h;
+    s > g && s >= r.height ? l = e.top - r.height - 4 : l = a - r.height - h;
   }
-  return r = Math.max(m, r), {
-    x: t,
-    y: r
+  return l = Math.max(h, l), {
+    x: n,
+    y: l
   };
 }
-function Z(e, i) {
-  const u = window.innerWidth, o = window.innerHeight;
-  let a = e.right, t = e.top;
-  if (a + i.width > u - m) {
-    const r = e.left - i.width;
-    r >= m ? a = r : a = u - i.width - m;
+function te(e, r) {
+  const c = window.innerWidth, i = window.innerHeight;
+  let a = e.right, n = e.top;
+  if (a + r.width > c - h) {
+    const l = e.left - r.width;
+    l >= h ? a = l : a = c - r.width - h;
   }
-  return t + i.height > o - m && (t = o - i.height - m), a = Math.max(m, a), t = Math.max(m, t), {
+  return n + r.height > i - h && (n = i - r.height - h), a = Math.max(h, a), n = Math.max(h, n), {
     x: a,
-    y: t
+    y: n
   };
 }
-function R(e) {
-  const [i, u] = O(!1), [o, a] = O({
+function ne(e) {
+  const [r, c] = O(!1), [i, a] = O({
     x: -9999,
     y: -9999
   });
-  let t, r;
-  const v = () => {
-    if (!t || !r) return;
-    const h = t.getBoundingClientRect(), w = r.getBoundingClientRect(), b = Y(h, w, e.align ?? "start");
+  let n, l;
+  const s = `floe-dropdown-${R += 1}`, g = () => {
+    if (!n || !l) return;
+    const f = n.getBoundingClientRect(), v = l.getBoundingClientRect(), b = ee(f, v, e.align ?? "start");
     a(b);
   };
-  q(() => {
-    if (!i()) {
+  D(() => {
+    if (!r()) {
       a({
         x: -9999,
         y: -9999
       });
       return;
     }
-    const h = (b) => {
-      t && !t.contains(b.target) && r && !r.contains(b.target) && u(!1);
-    }, w = (b) => {
-      b.key === "Escape" && u(!1);
+    const f = (b) => {
+      const o = b.target;
+      o && typeof o.closest == "function" && o.closest(`[data-floe-dropdown="${s}"]`) || c(!1);
+    }, v = (b) => {
+      b.key === "Escape" && c(!1);
     };
-    document.addEventListener("mousedown", h), document.addEventListener("keydown", w), requestAnimationFrame(v), D(() => {
-      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", w);
+    document.addEventListener("mousedown", f), document.addEventListener("keydown", v), requestAnimationFrame(g), N(() => {
+      document.removeEventListener("mousedown", f), document.removeEventListener("keydown", v);
     });
   });
-  const g = (h) => {
-    const w = e.onSelect;
-    u(!1), I(() => w(h));
+  const P = (f) => {
+    const v = e.onSelect;
+    f.keepOpen || c(!1), z(() => v(f.id));
   };
   return (() => {
-    var h = V(), w = h.firstChild;
-    w.$$click = () => u((x) => !x);
-    var b = t;
-    return typeof b == "function" ? L(b, w) : t = w, f(w, () => e.trigger), f(h, l($, {
+    var f = K(), v = f.firstChild;
+    I(f, "data-floe-dropdown", s), v.$$click = () => c((o) => !o);
+    var b = n;
+    return typeof b == "function" ? L(b, v) : n = v, m(v, () => e.trigger), m(f, d(y, {
       get when() {
-        return i();
+        return r();
       },
       get children() {
-        return l(B, {
+        return d(B, {
           get children() {
-            var x = W(), c = r;
-            return typeof c == "function" ? L(c, x) : r = x, f(x, l(A, {
+            var o = q(), x = l;
+            return typeof x == "function" ? L(x, o) : l = o, I(o, "data-floe-dropdown", s), m(o, d(W, {
               get each() {
                 return e.items;
               },
-              children: (d) => l($, {
+              children: (t) => d(y, {
                 get when() {
-                  return !d.separator;
+                  return !t.separator;
                 },
                 get fallback() {
                   return F();
                 },
                 get children() {
-                  return l(H, {
-                    item: d,
+                  return d(H, {
+                    item: t,
                     get selected() {
-                      return e.value === d.id;
+                      return e.value === t.id;
                     },
-                    onSelect: g,
-                    onCloseMenu: () => u(!1)
+                    onSelect: P,
+                    onCloseMenu: () => c(!1),
+                    dropdownId: s
                   });
                 }
               })
-            })), _((d) => {
-              var n = M("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"), k = `${o().x}px`, s = `${o().y}px`;
-              return n !== d.e && E(x, d.e = n), k !== d.t && p(x, "left", d.t = k), s !== d.a && p(x, "top", d.a = s), d;
+            })), E((t) => {
+              var $ = p("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"), u = `${i().x}px`, w = `${i().y}px`;
+              return $ !== t.e && S(o, t.e = $), u !== t.t && _(o, "left", t.t = u), w !== t.a && _(o, "top", t.a = w), t;
             }, {
               e: void 0,
               t: void 0,
               a: void 0
-            }), x;
+            }), o;
           }
         });
       }
-    }), null), _(() => E(h, M("relative inline-block", e.class))), h;
+    }), null), E(() => S(f, p("relative inline-block", e.class))), f;
   })();
 }
 function H(e) {
-  const [i, u] = O(!1), [o, a] = O({
+  const [r, c] = O(!1), [i, a] = O({
     x: -9999,
     y: -9999
   });
-  let t, r, v;
-  const g = () => e.item.children && e.item.children.length > 0, h = () => {
-    if (!t || !r) return;
-    const c = t.getBoundingClientRect(), d = r.getBoundingClientRect(), n = Z(c, d);
-    a(n);
-  }, w = () => {
-    g() && (clearTimeout(v), v = setTimeout(() => {
-      u(!0), requestAnimationFrame(h);
+  let n, l, s;
+  const g = () => e.item.children && e.item.children.length > 0, P = () => {
+    if (!n || !l) return;
+    const o = n.getBoundingClientRect(), x = l.getBoundingClientRect(), t = te(o, x);
+    a(t);
+  }, f = () => {
+    g() && (clearTimeout(s), s = setTimeout(() => {
+      c(!0), requestAnimationFrame(P);
     }, 100));
-  }, b = () => {
-    g() && (clearTimeout(v), v = setTimeout(() => {
-      u(!1);
-    }, 150));
-  }, x = (c) => {
+  }, v = () => {
+    g() && (clearTimeout(s), s = void 0, !e.item.keepOpen && (s = setTimeout(() => {
+      c(!1);
+    }, 150)));
+  }, b = (o) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
-        c.stopPropagation();
+        o.stopPropagation();
         return;
       }
-      g() ? (u((d) => !d), requestAnimationFrame(h)) : e.item.content || e.onSelect(e.item.id);
+      g() ? (c((x) => !x), requestAnimationFrame(P)) : e.item.content || e.onSelect(e.item);
     }
   };
   return (() => {
-    var c = Q();
-    c.addEventListener("mouseleave", b), c.addEventListener("mouseenter", w);
-    var d = t;
-    return typeof d == "function" ? L(d, c) : t = c, f(c, l($, {
+    var o = X();
+    o.addEventListener("mouseleave", v), o.addEventListener("mouseenter", f);
+    var x = n;
+    return typeof x == "function" ? L(x, o) : n = o, m(o, d(y, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var n = J();
-        return n.$$click = x, f(n, e.item.content), _(() => E(n, M("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), n;
+        var t = Q();
+        return t.$$click = b, m(t, e.item.content), E(() => S(t, p("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), t;
       }
-    }), null), f(c, l($, {
+    }), null), m(o, d(y, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var n = K(), k = n.firstChild, s = k.nextSibling;
-        return n.$$click = x, f(k, l($, {
+        var t = U(), $ = t.firstChild, u = $.nextSibling;
+        return t.$$click = b, m($, d(y, {
           get when() {
-            return T(() => !!e.selected)() && !g();
+            return A(() => !!e.selected)() && !g();
           },
           get children() {
-            return l(z, {
+            return d(V, {
               class: "w-3 h-3"
             });
           }
-        })), f(n, l($, {
+        })), m(t, d(y, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (y) => (() => {
-            var C = U();
-            return f(C, y), C;
+          children: (w) => (() => {
+            var k = Y();
+            return m(k, w), k;
           })()
-        }), s), f(s, () => e.item.label), f(n, l($, {
+        }), u), m(u, () => e.item.label), m(t, d(y, {
           get when() {
             return g();
           },
           get children() {
-            return l(G, {
+            return d(J, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), _((y) => {
-          var C = 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.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), P = e.item.disabled;
-          return C !== y.e && E(n, y.e = C), P !== y.t && (n.disabled = y.t = P), y;
+        }), null), E((w) => {
+          var k = p("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"), M = e.item.disabled;
+          return k !== w.e && S(t, w.e = k), M !== w.t && (t.disabled = w.t = M), w;
         }, {
           e: void 0,
           t: void 0
-        }), n;
+        }), t;
       }
-    }), null), f(c, l($, {
+    }), null), m(o, d(y, {
       get when() {
-        return T(() => !!i())() && g();
+        return A(() => !!r())() && g();
       },
       get children() {
-        return l(B, {
+        return d(B, {
           get children() {
-            var n = W();
-            n.addEventListener("mouseleave", b), n.addEventListener("mouseenter", () => {
-              clearTimeout(v);
+            var t = q();
+            t.addEventListener("mouseleave", v), t.addEventListener("mouseenter", () => {
+              clearTimeout(s);
             });
-            var k = r;
-            return typeof k == "function" ? L(k, n) : r = n, f(n, l(A, {
+            var $ = l;
+            return typeof $ == "function" ? L($, t) : l = t, m(t, d(W, {
               get each() {
                 return e.item.children;
               },
-              children: (s) => l($, {
+              children: (u) => d(y, {
                 get when() {
-                  return !s.separator;
+                  return !u.separator;
                 },
                 get fallback() {
                   return F();
                 },
                 get children() {
-                  return l(H, {
-                    item: s,
+                  return d(H, {
+                    item: u,
                     selected: !1,
                     get onSelect() {
                       return e.onSelect;
                     },
                     get onCloseMenu() {
                       return e.onCloseMenu;
+                    },
+                    get dropdownId() {
+                      return e.dropdownId;
                     }
                   });
                 }
               })
-            })), _((s) => {
-              var y = M("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"), C = `${o().x}px`, P = `${o().y}px`;
-              return y !== s.e && E(n, s.e = y), C !== s.t && p(n, "left", s.t = C), P !== s.a && p(n, "top", s.a = P), s;
+            })), E((u) => {
+              var w = p("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"), k = e.dropdownId, M = `${i().x}px`, T = `${i().y}px`;
+              return w !== u.e && S(t, u.e = w), k !== u.t && I(t, "data-floe-dropdown", u.t = k), M !== u.a && _(t, "left", u.a = M), T !== u.o && _(t, "top", u.o = T), u;
             }, {
               e: void 0,
               t: void 0,
-              a: void 0
-            }), n;
+              a: void 0,
+              o: void 0
+            }), t;
           }
         });
       }
-    }), null), c;
+    }), null), o;
   })();
 }
-function oe(e) {
-  const i = () => e.options.find((o) => o.value === e.value), u = () => e.options.map((o) => ({
-    id: o.value,
-    label: o.label
+function ae(e) {
+  const r = () => e.options.find((i) => i.value === e.value), c = () => e.options.map((i) => ({
+    id: i.value,
+    label: i.label
   }));
-  return l(R, {
+  return d(ne, {
     get trigger() {
       return (() => {
-        var o = X(), a = o.firstChild;
-        return f(a, () => i()?.label ?? e.placeholder ?? "Select..."), f(o, l(N, {
+        var i = Z(), a = i.firstChild;
+        return m(a, () => r()?.label ?? e.placeholder ?? "Select..."), m(i, d(G, {
           class: "w-3.5 h-3.5 text-muted-foreground"
-        }), null), _((t) => {
-          var r = M("flex items-center justify-between gap-2 h-8 px-2.5 w-full cursor-pointer", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", e.class), v = e.disabled, g = M(!i() && "text-muted-foreground");
-          return r !== t.e && E(o, t.e = r), v !== t.t && (o.disabled = t.t = v), g !== t.a && E(a, t.a = g), t;
+        }), null), E((n) => {
+          var l = p("flex items-center justify-between gap-2 h-8 px-2.5 w-full cursor-pointer", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", e.class), s = e.disabled, g = p(!r() && "text-muted-foreground");
+          return l !== n.e && S(i, n.e = l), s !== n.t && (i.disabled = n.t = s), g !== n.a && S(a, n.a = g), n;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), o;
+        }), i;
       })();
     },
     get items() {
-      return u();
+      return c();
     },
     get value() {
       return e.value;
@@ -284,6 +291,6 @@ function oe(e) {
 }
 j(["click"]);
 export {
-  R as Dropdown,
-  oe as Select
+  ne as Dropdown,
+  ae as Select
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",