@floegence/floe-webapp-core 0.39.6 → 0.39.7

package/dist/components/layout/ActivityBar.d.ts

@@ -8,6 +8,14 @@ export interface ActivityBarItem {
     label: string;
     badge?: number | string | (() => number | string | undefined);
     onClick?: () => void;
+    /** Receives the concrete trigger button for anchored product surfaces. */
+    buttonRef?: (button: HTMLButtonElement | null) => void;
+    /** ARIA disclosure state for a surface controlled by this item. */
+    ariaExpanded?: boolean | (() => boolean | undefined);
+    /** ID of the surface controlled by this item. */
+    ariaControls?: string;
+    /** Semantic kind of popup opened by this item. */
+    ariaHasPopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean;
     /**
      * How this item should affect the sidebar collapsed state when clicked.
      *

package/dist/components/layout/ActivityBar.js

@@ -1,110 +1,116 @@
-import { insert as c, createComponent as a, effect as f, className as g, setAttribute as m, template as s, Dynamic as k, memo as w, delegateEvents as I } from "solid-js/web";
-import { createMemo as b, For as C, Show as h } from "solid-js";
+import { insert as c, createComponent as r, effect as g, className as h, setAttribute as u, template as s, use as I, Dynamic as B, memo as $, delegateEvents as E } from "solid-js/web";
+import { createMemo as m, For as k, Show as x, onMount as S, onCleanup as _ } from "solid-js";
 import { cn as y } from "../../utils/cn.js";
-import { deferNonBlocking as $ } from "../../utils/defer.js";
-import { Tooltip as B } from "../ui/Tooltip.js";
-import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
-var S = /* @__PURE__ */ s('<div class="flex flex-col">'), j = /* @__PURE__ */ s('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), N = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), q = /* @__PURE__ */ s("<span>"), D = /* @__PURE__ */ s("<button type=button>");
-function z(e) {
-  const o = b(() => e.activeId), n = b(() => e.collapsed ?? !1), t = b(() => e.onActiveChange), d = b(() => e.onCollapsedChange), v = (i) => {
-    if (i.onClick) {
-      $(() => i.onClick());
+import { deferNonBlocking as j } from "../../utils/defer.js";
+import { Tooltip as R } from "../ui/Tooltip.js";
+import { resolveActivityBarClick as M } from "./activityBarBehavior.js";
+var N = /* @__PURE__ */ s('<div class="flex flex-col">'), q = /* @__PURE__ */ s('<nav data-floe-shell-slot=activity-bar style=border-right-color:var(--activity-bar-border)><div class="flex flex-col">'), D = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), F = /* @__PURE__ */ s("<span>"), H = /* @__PURE__ */ s("<button type=button>");
+function J(t) {
+  const l = m(() => t.activeId), d = m(() => t.collapsed ?? !1), b = m(() => t.onActiveChange), i = m(() => t.onCollapsedChange), v = (e) => {
+    if (e.onClick) {
+      j(() => e.onClick());
       return;
     }
-    const l = _({
-      clickedId: i.id,
-      activeId: o(),
-      collapsed: n(),
-      behavior: i.collapseBehavior
+    const a = M({
+      clickedId: e.id,
+      activeId: l(),
+      collapsed: d(),
+      behavior: e.collapseBehavior
     });
-    l.nextActiveId !== o() && (typeof l.openSidebar == "boolean" ? t()(l.nextActiveId, {
-      openSidebar: l.openSidebar
-    }) : t()(l.nextActiveId)), typeof l.nextCollapsed == "boolean" && d()?.(l.nextCollapsed);
+    a.nextActiveId !== l() && (typeof a.openSidebar == "boolean" ? b()(a.nextActiveId, {
+      openSidebar: a.openSidebar
+    }) : b()(a.nextActiveId)), typeof a.nextCollapsed == "boolean" && i()?.(a.nextCollapsed);
   };
   return (() => {
-    var i = j(), l = i.firstChild;
-    return c(l, a(C, {
+    var e = q(), a = e.firstChild;
+    return c(a, r(k, {
       get each() {
-        return e.items;
+        return t.items;
       },
-      children: (r) => a(A, {
-        item: r,
+      children: (n) => r(w, {
+        item: n,
         get isActive() {
-          return o() === r.id;
+          return l() === n.id;
         },
-        onClick: () => v(r)
+        onClick: () => v(n)
       })
-    })), c(i, a(h, {
+    })), c(e, r(x, {
       get when() {
-        return e.bottomItems?.length;
+        return t.bottomItems?.length;
       },
       get children() {
-        var r = S();
-        return c(r, a(C, {
+        var n = N();
+        return c(n, r(k, {
           get each() {
-            return e.bottomItems;
+            return t.bottomItems;
           },
-          children: (u) => a(A, {
-            item: u,
+          children: (o) => r(w, {
+            item: o,
             isActive: !1,
-            onClick: () => v(u)
+            onClick: () => v(o)
           })
-        })), r;
+        })), n;
       }
-    }), null), f((r) => {
-      var u = y("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class), x = e.ariaLabel;
-      return u !== r.e && g(i, r.e = u), x !== r.t && m(i, "aria-label", r.t = x), r;
+    }), null), g((n) => {
+      var o = y("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", t.class), f = t.ariaLabel;
+      return o !== n.e && h(e, n.e = o), f !== n.t && u(e, "aria-label", n.t = f), n;
     }, {
       e: void 0,
       t: void 0
-    }), i;
+    }), e;
   })();
 }
-function A(e) {
-  const o = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
-  return a(B, {
+function w(t) {
+  let l;
+  const d = () => typeof t.item.badge == "function" ? t.item.badge() : t.item.badge, b = () => typeof t.item.ariaExpanded == "function" ? t.item.ariaExpanded() : t.item.ariaExpanded;
+  return S(() => t.item.buttonRef?.(l ?? null)), _(() => t.item.buttonRef?.(null)), r(R, {
     get content() {
-      return e.item.label;
+      return t.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var n = D();
-      return n.$$click = () => e.onClick(), c(n, a(h, {
+      var i = H();
+      i.$$click = () => t.onClick();
+      var v = l;
+      return typeof v == "function" ? I(v, i) : l = i, c(i, r(x, {
         get when() {
-          return e.isActive;
+          return t.isActive;
         },
         get children() {
-          return N();
+          return D();
         }
-      }), null), c(n, a(k, {
+      }), null), c(i, r(B, {
         get component() {
-          return e.item.icon;
+          return t.item.icon;
         },
         class: "w-5 h-5"
-      }), null), c(n, a(h, {
+      }), null), c(i, r(x, {
         get when() {
-          return o();
+          return d();
         },
         get children() {
-          var t = q();
-          return c(t, (() => {
-            var d = w(() => typeof o() == "number" && o() > 99);
-            return () => d() ? "99+" : o();
-          })()), f(() => g(t, y("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
+          var e = F();
+          return c(e, (() => {
+            var a = $(() => typeof d() == "number" && d() > 99);
+            return () => a() ? "99+" : d();
+          })()), g(() => h(e, y("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), e;
         }
-      }), null), f((t) => {
-        var d = y("relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/40"), v = e.item.label, i = e.isActive;
-        return d !== t.e && g(n, t.e = d), v !== t.t && m(n, "aria-label", t.t = v), i !== t.a && m(n, "aria-pressed", t.a = i), t;
+      }), null), g((e) => {
+        var a = y("relative w-full aspect-square flex items-center justify-center cursor-pointer", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", t.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground transition-[color,background-color] duration-100 hover:text-activity-bar-foreground-active hover:bg-accent/40"), n = t.item.label, o = t.isActive, f = b(), C = t.item.ariaControls, A = t.item.ariaHasPopup;
+        return a !== e.e && h(i, e.e = a), n !== e.t && u(i, "aria-label", e.t = n), o !== e.a && u(i, "aria-pressed", e.a = o), f !== e.o && u(i, "aria-expanded", e.o = f), C !== e.i && u(i, "aria-controls", e.i = C), A !== e.n && u(i, "aria-haspopup", e.n = A), e;
       }, {
         e: void 0,
         t: void 0,
-        a: void 0
-      }), n;
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0
+      }), i;
     }
   });
 }
-I(["click"]);
+E(["click"]);
 export {
-  z as ActivityBar
+  J as ActivityBar
 };

package/package.json

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