@tempots/beatui 1.1.2 → 1.1.3

package/dist/menu-B60Q9j3-.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("@tempots/dom"),q=require("@tempots/ui"),K=require("@tempots/std"),W=require("./use-animated-toggle-cKcuItmz.cjs"),M=require("./session-id-B5lJMzbB.cjs");function H(u){const o={fade:!0,scale:!0};return u.startsWith("top")?(o.slide="down",o.transformOrigin="bottom"):u.startsWith("bottom")?(o.slide="up",o.transformOrigin="top"):u.startsWith("left")?(o.slide="right",o.transformOrigin="right"):u.startsWith("right")&&(o.slide="left",o.transformOrigin="left"),o}function $(u){const{content:o,placement:E="top",showDelay:A=250,hideDelay:D=500,mainAxisOffset:k=8,crossAxisOffset:F=0,showOn:d="hover-focus",closable:b=!0,arrow:P,role:p,hasPopup:I="dialog",open:y}=u;return q.PopOver((g,c)=>{const s=y??e.prop(!1),l=W.useAnimatedElementToggle({initialStatus:"closed"}),L=M.sessionId("flyout");let m=null,f=null,O=!1,v;function T(){t!=null&&(clearTimeout(t),t=null),a!=null&&(clearTimeout(a),a=null),f&&(f(),f=null),m&&(document.removeEventListener("keydown",m),m=null),O=!1}function S(){e.Value.get(b)&&(m=r=>{r.key==="Escape"&&s.set(!1)},document.addEventListener("keydown",m)),O=!0,g({placement:E??"top",mainAxisOffset:k,crossAxisOffset:F,arrow:P,content:e.WithElement(r=>{l.setElement(r);const h=typeof d=="function"?null:e.Value.get(d);(h==="hover"||h==="hover-focus")&&(r.addEventListener("mouseenter",()=>s.set(!0)),r.addEventListener("mouseleave",()=>s.set(!1))),f=K.delayedAnimationFrame(()=>{l.open(),f=null});const C=x=>{e.Value.get(b)&&x.key==="Escape"&&(x.preventDefault(),x.stopPropagation(),s.set(!1))};document.addEventListener("keydown",C,!0);let V=null;return e.Value.get(b)&&(V=x=>{const _=x.target;!r.contains(_)&&!v?.contains(_)&&s.set(!1)},document.addEventListener("click",V)),e.Fragment(e.OnDispose(()=>{V&&(document.removeEventListener("click",V),V=null),T(),document.removeEventListener("keydown",C,!0)}),e.attr.class("bc-flyout-container"),W.AnimatedToggleClass({animation:e.Value.map(E,H),status:l.status}),e.attr.id(L),e.attr.tabindex(-1),e.html.div(e.attr.class("bc-flyout"),p?e.attr.role(p):e.attr.role("dialog"),o()))})})}let t=null;function n(){if(t!=null&&(clearTimeout(t),t=null),a!=null&&(clearTimeout(a),a=null),l.isOpened.value||l.isOpening.value||l.isStartOpening.value)return;if(l.isClosing.value||l.isStartClosing.value){l.open();return}const r=e.Value.get(A);t=setTimeout(()=>{t=null,S()},r)}let a=null;function i(){if(!O&&t==null)return;if(t!=null&&(clearTimeout(t),t=null),a!=null&&(clearTimeout(a),a=null),f&&(f(),f=null,O)){c(),T();return}const r=e.Value.get(D);a=setTimeout(()=>{a=null,l.close(),l.listenOnClosed(()=>{c(),T()})},r)}const w=s.onChange(r=>{r?n():i()});return s.value&&n(),e.WithElement(r=>{v=r;const h=e.Fragment(e.aria.expanded(s),e.aria.controls(L),e.aria.haspopup(I));if(typeof d=="function")return e.Fragment(e.OnDispose(w),h,d(s));const C=d;return e.Fragment(e.OnDispose(w),h,e.OneOfValue(C,{"hover-focus":()=>e.Fragment(e.on.mouseenter(()=>s.set(!0)),e.on.mouseleave(()=>s.set(!1)),e.on.focus(()=>s.set(!0)),e.on.blur(()=>s.set(!1))),hover:()=>e.Fragment(e.on.mouseenter(()=>s.set(!0)),e.on.mouseleave(()=>s.set(!1))),focus:()=>e.Fragment(e.on.focus(()=>s.set(!0)),e.on.blur(()=>s.set(!1))),click:()=>e.on.click(()=>s.set(!s.value)),never:()=>null}))})})}function z(u){const{items:o,placement:E="bottom-start",showDelay:A=0,hideDelay:D=100,mainAxisOffset:k=4,crossAxisOffset:F=0,showOn:d="click",closable:b=!0,onClose:P,onAction:p,ariaLabel:I,ariaLabelledBy:y}=u,g=M.sessionId("menu"),c=e.prop(-1),s=e.prop([]),l=e.prop(!1);let L=null;return l.onChange(m=>{m||P?.()}),$({open:l,content:()=>e.WithElement(m=>{L=document.activeElement;const f=(t,n,a)=>{if(n.length===0)return-1;let i=t+a,w=0;for(;w<n.length;){i>=n.length&&(i=0),i<0&&(i=n.length-1);const r=n[i];if(r&&r.getAttribute("aria-disabled")!=="true")return i;i+=a,w++}return t},O=t=>{const n=s.value,a=c.value;switch(t.key){case"ArrowDown":t.preventDefault(),t.stopPropagation();const i=f(a,n,1);v(i,n);break;case"ArrowUp":t.preventDefault(),t.stopPropagation();const w=f(a,n,-1);v(w,n);break;case"Enter":case" ":if(t.preventDefault(),t.stopPropagation(),a>=0&&n[a]){const r=n[a];if(r.getAttribute("aria-disabled")==="true")return;const h=r.getAttribute("data-key");h&&p&&p(h),r.click(),l.set(!1)}break;case"Escape":l.set(!1);break;case"Home":t.preventDefault(),t.stopPropagation(),n.length>0&&v(0,n);break;case"End":t.preventDefault(),t.stopPropagation(),n.length>0&&v(n.length-1,n);break;case"ArrowRight":if(t.preventDefault(),t.stopPropagation(),a>=0&&n[a]){const r=n[a];r.classList.contains("bc-menu-item--has-submenu")&&r.dispatchEvent(new Event("mouseenter"))}break;case"ArrowLeft":t.preventDefault(),t.stopPropagation(),l.set(!1);break}},v=(t,n)=>{c.value>=0&&n[c.value]&&(n[c.value].classList.remove("bc-menu-item--focused"),n[c.value].removeAttribute("aria-selected")),t>=0&&n[t]&&(n[t].classList.add("bc-menu-item--focused"),n[t].setAttribute("aria-selected","true"),c.set(t),typeof n[t].scrollIntoView=="function"&&n[t].scrollIntoView({block:"nearest"}))},T=()=>{const t=Array.from(m.querySelectorAll('[role="menuitem"]'));if(s.set(t),t.length>0){const n=t.findIndex(a=>a.getAttribute("aria-disabled")!=="true");n>=0&&v(n,t)}},S=new MutationObserver(T);return S.observe(m,{childList:!0,subtree:!0}),setTimeout(()=>{T(),m.focus()},0),document.addEventListener("keydown",O,!0),e.Fragment(e.OnDispose(()=>{S.disconnect(),document.removeEventListener("keydown",O,!0),L&&L.focus()}),e.attr.class("bc-menu"),e.attr.id(g),e.attr.role("menu"),e.attr.tabindex(-1),e.aria.orientation("vertical"),I?e.aria.label(I):e.Empty,y?e.aria.labelledby(y):e.Empty,e.aria.activedescendant(c.map(t=>{const n=s.value;return t>=0&&n[t]?n[t].id||`${g}-item-${t}`:""})),e.on.click(t=>{const a=t.target.closest('[role="menuitem"]');if(a&&a.getAttribute("aria-disabled")!=="true"){const i=a.getAttribute("data-key");i&&p&&p(i),l.set(!1)}}),e.html.div(e.attr.class("sr-only"),e.aria.live("polite"),e.aria.atomic(!0),c.map(t=>{const n=s.value;if(t>=0&&n[t]){const a=n[t].textContent||"";return n[t].getAttribute("aria-disabled")==="true"?`${a}, disabled`:`${a}, ${t+1} of ${n.length}`}return""})),...o())}),placement:E,showDelay:A,hideDelay:D,mainAxisOffset:k,crossAxisOffset:F,showOn:d,closable:b,role:"menu"})}function B(u){const{key:o,content:E,before:A,after:D,disabled:k=!1,onClick:F,ariaLabel:d,submenu:b,submenuPlacement:P="right-start"}=u,p=o??M.sessionId("menu-item"),I=`menu-item-${p}`,y=b!=null;return e.html.div(e.attr.class(e.computedOf(k)(g=>`bc-menu-item ${g?"bc-menu-item--disabled":""} ${y?"bc-menu-item--has-submenu":""}`)),e.attr.id(I),e.attr.role("menuitem"),e.attr.tabindex(-1),e.dataAttr("key",p),e.aria.disabled(k),e.aria.selected(!1),y?e.aria.expanded(!1):e.Empty,d?e.aria.label(d):e.Empty,e.on.click(g=>{if(e.Value.get(k)){g.preventDefault(),g.stopPropagation();return}F?.()}),A&&e.html.span(e.attr.class("bc-menu-item__start"),A),e.html.span(e.attr.class("bc-menu-item__content"),E),D&&e.html.span(e.attr.class("bc-menu-item__end"),D),y&&b?$({content:()=>e.Fragment(e.attr.class("bc-menu bc-submenu"),e.attr.role("menu"),...b()),placement:P,showOn:"hover",hasPopup:"menu",showDelay:100,hideDelay:300,mainAxisOffset:0,crossAxisOffset:0,role:"menu"}):e.Empty)}function N(u={}){const{label:o}=u;return e.html.div(e.attr.class("bc-menu-separator"),e.attr.role("separator"),e.aria.orientation("horizontal"),o&&e.html.span(e.attr.class("bc-menu-separator__label"),o))}exports.Flyout=$;exports.Menu=z;exports.MenuItem=B;exports.MenuSeparator=N;

package/dist/menu-BkqFGcXg.js

@@ -0,0 +1,366 @@
+import { prop as q, WithElement as B, Fragment as k, aria as u, OnDispose as z, OneOfValue as j, on as p, Value as A, attr as a, html as E, Empty as W, computedOf as G, dataAttr as J } from "@tempots/dom";
+import { PopOver as Q } from "@tempots/ui";
+import { delayedAnimationFrame as X } from "@tempots/std";
+import { u as Y, A as Z } from "./use-animated-toggle-C3asw_Sg.js";
+import { s as N } from "./session-id-3KiilioY.js";
+function ee(c) {
+  const l = { fade: !0, scale: !0 };
+  return c.startsWith("top") ? (l.slide = "down", l.transformOrigin = "bottom") : c.startsWith("bottom") ? (l.slide = "up", l.transformOrigin = "top") : c.startsWith("left") ? (l.slide = "right", l.transformOrigin = "right") : c.startsWith("right") && (l.slide = "left", l.transformOrigin = "left"), l;
+}
+function U(c) {
+  const {
+    content: l,
+    placement: T = "top",
+    showDelay: P = 250,
+    hideDelay: x = 500,
+    mainAxisOffset: D = 8,
+    crossAxisOffset: _ = 0,
+    showOn: b = "hover-focus",
+    closable: h = !0,
+    arrow: F,
+    role: g,
+    hasPopup: C = "dialog",
+    open: w
+  } = c;
+  return Q((v, f) => {
+    const s = w ?? q(!1), r = Y({
+      initialStatus: "closed"
+    }), S = N("flyout");
+    let m = null, d = null, I = !1, O;
+    function $() {
+      e != null && (clearTimeout(e), e = null), n != null && (clearTimeout(n), n = null), d && (d(), d = null), m && (document.removeEventListener("keydown", m), m = null), I = !1;
+    }
+    function K() {
+      A.get(h) && (m = (o) => {
+        o.key === "Escape" && s.set(!1);
+      }, document.addEventListener("keydown", m)), I = !0, v({
+        placement: T ?? "top",
+        mainAxisOffset: D,
+        crossAxisOffset: _,
+        arrow: F,
+        content: B((o) => {
+          r.setElement(o);
+          const y = typeof b == "function" ? null : A.get(b);
+          (y === "hover" || y === "hover-focus") && (o.addEventListener("mouseenter", () => s.set(!0)), o.addEventListener("mouseleave", () => s.set(!1))), d = X(() => {
+            r.open(), d = null;
+          });
+          const H = (V) => {
+            A.get(h) && V.key === "Escape" && (V.preventDefault(), V.stopPropagation(), s.set(!1));
+          };
+          document.addEventListener("keydown", H, !0);
+          let M = null;
+          return A.get(h) && (M = (V) => {
+            const R = V.target;
+            !o.contains(R) && !O?.contains(R) && s.set(!1);
+          }, document.addEventListener("click", M)), k(
+            z(() => {
+              M && (document.removeEventListener("click", M), M = null), $(), document.removeEventListener("keydown", H, !0);
+            }),
+            a.class("bc-flyout-container"),
+            Z({
+              animation: A.map(T, ee),
+              status: r.status
+            }),
+            a.id(S),
+            a.tabindex(-1),
+            // Make focusable for screen readers
+            E.div(
+              a.class("bc-flyout"),
+              g ? a.role(g) : a.role("dialog"),
+              // Default to dialog role
+              l()
+            )
+          );
+        })
+      });
+    }
+    let e = null;
+    function t() {
+      if (e != null && (clearTimeout(e), e = null), n != null && (clearTimeout(n), n = null), r.isOpened.value || r.isOpening.value || r.isStartOpening.value)
+        return;
+      if (r.isClosing.value || r.isStartClosing.value) {
+        r.open();
+        return;
+      }
+      const o = A.get(P);
+      e = setTimeout(() => {
+        e = null, K();
+      }, o);
+    }
+    let n = null;
+    function i() {
+      if (!I && e == null)
+        return;
+      if (e != null && (clearTimeout(e), e = null), n != null && (clearTimeout(n), n = null), d && (d(), d = null, I)) {
+        f(), $();
+        return;
+      }
+      const o = A.get(x);
+      n = setTimeout(() => {
+        n = null, r.close(), r.listenOnClosed(() => {
+          f(), $();
+        });
+      }, o);
+    }
+    const L = s.onChange((o) => {
+      o ? t() : i();
+    });
+    return s.value && t(), B((o) => {
+      O = o;
+      const y = k(
+        u.expanded(s),
+        u.controls(S),
+        u.haspopup(
+          C
+        )
+      );
+      if (typeof b == "function")
+        return k(
+          z(L),
+          y,
+          b(s)
+        );
+      const H = b;
+      return k(
+        z(L),
+        y,
+        j(H, {
+          "hover-focus": () => k(
+            p.mouseenter(() => s.set(!0)),
+            p.mouseleave(() => s.set(!1)),
+            p.focus(() => s.set(!0)),
+            p.blur(() => s.set(!1))
+          ),
+          hover: () => k(
+            p.mouseenter(() => s.set(!0)),
+            p.mouseleave(() => s.set(!1))
+          ),
+          focus: () => k(
+            p.focus(() => s.set(!0)),
+            p.blur(() => s.set(!1))
+          ),
+          click: () => p.click(() => s.set(!s.value)),
+          never: () => null
+        })
+      );
+    });
+  });
+}
+function le(c) {
+  const {
+    items: l,
+    placement: T = "bottom-start",
+    showDelay: P = 0,
+    hideDelay: x = 100,
+    mainAxisOffset: D = 4,
+    crossAxisOffset: _ = 0,
+    showOn: b = "click",
+    closable: h = !0,
+    onClose: F,
+    onAction: g,
+    ariaLabel: C,
+    ariaLabelledBy: w
+  } = c, v = N("menu"), f = q(-1), s = q([]), r = q(!1);
+  let S = null;
+  return r.onChange((m) => {
+    m || F?.();
+  }), U({
+    open: r,
+    content: () => B((m) => {
+      S = document.activeElement;
+      const d = (e, t, n) => {
+        if (t.length === 0) return -1;
+        let i = e + n, L = 0;
+        for (; L < t.length; ) {
+          i >= t.length && (i = 0), i < 0 && (i = t.length - 1);
+          const o = t[i];
+          if (o && o.getAttribute("aria-disabled") !== "true")
+            return i;
+          i += n, L++;
+        }
+        return e;
+      }, I = (e) => {
+        const t = s.value, n = f.value;
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), e.stopPropagation();
+            const i = d(n, t, 1);
+            O(i, t);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), e.stopPropagation();
+            const L = d(n, t, -1);
+            O(L, t);
+            break;
+          case "Enter":
+          case " ":
+            if (e.preventDefault(), e.stopPropagation(), n >= 0 && t[n]) {
+              const o = t[n];
+              if (o.getAttribute("aria-disabled") === "true")
+                return;
+              const y = o.getAttribute("data-key");
+              y && g && g(y), o.click(), r.set(!1);
+            }
+            break;
+          case "Escape":
+            r.set(!1);
+            break;
+          case "Home":
+            e.preventDefault(), e.stopPropagation(), t.length > 0 && O(0, t);
+            break;
+          case "End":
+            e.preventDefault(), e.stopPropagation(), t.length > 0 && O(t.length - 1, t);
+            break;
+          case "ArrowRight":
+            if (e.preventDefault(), e.stopPropagation(), n >= 0 && t[n]) {
+              const o = t[n];
+              o.classList.contains(
+                "bc-menu-item--has-submenu"
+              ) && o.dispatchEvent(new Event("mouseenter"));
+            }
+            break;
+          case "ArrowLeft":
+            e.preventDefault(), e.stopPropagation(), r.set(!1);
+            break;
+        }
+      }, O = (e, t) => {
+        f.value >= 0 && t[f.value] && (t[f.value].classList.remove(
+          "bc-menu-item--focused"
+        ), t[f.value].removeAttribute("aria-selected")), e >= 0 && t[e] && (t[e].classList.add("bc-menu-item--focused"), t[e].setAttribute("aria-selected", "true"), f.set(e), typeof t[e].scrollIntoView == "function" && t[e].scrollIntoView({ block: "nearest" }));
+      }, $ = () => {
+        const e = Array.from(
+          m.querySelectorAll('[role="menuitem"]')
+        );
+        if (s.set(e), e.length > 0) {
+          const t = e.findIndex(
+            (n) => n.getAttribute("aria-disabled") !== "true"
+          );
+          t >= 0 && O(t, e);
+        }
+      }, K = new MutationObserver($);
+      return K.observe(m, { childList: !0, subtree: !0 }), setTimeout(() => {
+        $(), m.focus();
+      }, 0), document.addEventListener("keydown", I, !0), k(
+        z(() => {
+          K.disconnect(), document.removeEventListener("keydown", I, !0), S && S.focus();
+        }),
+        a.class("bc-menu"),
+        a.id(v),
+        a.role("menu"),
+        a.tabindex(-1),
+        u.orientation("vertical"),
+        C ? u.label(C) : W,
+        w ? u.labelledby(w) : W,
+        u.activedescendant(
+          f.map((e) => {
+            const t = s.value;
+            return e >= 0 && t[e] ? t[e].id || `${v}-item-${e}` : "";
+          })
+        ),
+        p.click((e) => {
+          const n = e.target.closest('[role="menuitem"]');
+          if (n && n.getAttribute("aria-disabled") !== "true") {
+            const i = n.getAttribute("data-key");
+            i && g && g(i), r.set(!1);
+          }
+        }),
+        // Live region for screen reader announcements
+        E.div(
+          a.class("sr-only"),
+          u.live("polite"),
+          u.atomic(!0),
+          f.map((e) => {
+            const t = s.value;
+            if (e >= 0 && t[e]) {
+              const n = t[e].textContent || "";
+              return t[e].getAttribute("aria-disabled") === "true" ? `${n}, disabled` : `${n}, ${e + 1} of ${t.length}`;
+            }
+            return "";
+          })
+        ),
+        ...l()
+      );
+    }),
+    placement: T,
+    showDelay: P,
+    hideDelay: x,
+    mainAxisOffset: D,
+    crossAxisOffset: _,
+    showOn: b,
+    closable: h,
+    role: "menu"
+  });
+}
+function re(c) {
+  const {
+    key: l,
+    content: T,
+    before: P,
+    after: x,
+    disabled: D = !1,
+    onClick: _,
+    ariaLabel: b,
+    submenu: h,
+    submenuPlacement: F = "right-start"
+  } = c, g = l ?? N("menu-item"), C = `menu-item-${g}`, w = h != null;
+  return E.div(
+    a.class(
+      G(D)(
+        (v) => `bc-menu-item ${v ? "bc-menu-item--disabled" : ""} ${w ? "bc-menu-item--has-submenu" : ""}`
+      )
+    ),
+    a.id(C),
+    a.role("menuitem"),
+    a.tabindex(-1),
+    J("key", g),
+    u.disabled(D),
+    u.selected(!1),
+    // Will be updated by focus management
+    w ? u.expanded(!1) : W,
+    b ? u.label(b) : W,
+    p.click((v) => {
+      if (A.get(D)) {
+        v.preventDefault(), v.stopPropagation();
+        return;
+      }
+      _?.();
+    }),
+    // Before content
+    P && E.span(a.class("bc-menu-item__start"), P),
+    // Main content
+    E.span(a.class("bc-menu-item__content"), T),
+    // After content
+    x && E.span(a.class("bc-menu-item__end"), x),
+    // Submenu (if present)
+    w && h ? U({
+      content: () => k(
+        a.class("bc-menu bc-submenu"),
+        a.role("menu"),
+        ...h()
+      ),
+      placement: F,
+      showOn: "hover",
+      hasPopup: "menu",
+      showDelay: 100,
+      hideDelay: 300,
+      mainAxisOffset: 0,
+      crossAxisOffset: 0,
+      role: "menu"
+    }) : W
+  );
+}
+function ie(c = {}) {
+  const { label: l } = c;
+  return E.div(
+    a.class("bc-menu-separator"),
+    a.role("separator"),
+    u.orientation("horizontal"),
+    l && E.span(a.class("bc-menu-separator__label"), l)
+  );
+}
+export {
+  U as F,
+  le as M,
+  re as a,
+  ie as b
+};

package/dist/types/components/navigation/flyout.d.ts

@@ -1,4 +1,4 @@
-import { Renderable, TNode, Value } from '@tempots/dom';
+import { Renderable, TNode, Value, Prop } from '@tempots/dom';
 import { Placement } from '@tempots/ui';
 /**
  * Built-in trigger modes that control how the {@link Flyout} is shown.
@@ -12,14 +12,13 @@ import { Placement } from '@tempots/ui';
 export type FlyoutTrigger = 'hover' | 'focus' | 'hover-focus' | 'click' | 'never';
 /**
  * Custom trigger function for the {@link Flyout} component.
- * Receives `show` and `hide` callbacks and returns trigger content that controls
+ * Receives the open state signal and returns trigger content that controls
  * when the flyout appears and disappears.
  *
- * @param show - Call to show the flyout
- * @param hide - Call to hide the flyout
+ * @param open - Writable signal representing the flyout's open state. Set to `true` to show, `false` to hide.
  * @returns A renderable node containing the trigger logic
  */
-export type FlyoutTriggerFunction = (show: () => void, hide: () => void) => TNode;
+export type FlyoutTriggerFunction = (open: Prop<boolean>) => TNode;
 /**
  * Positioning data for a popover arrow element, provided by the PopOver positioning engine.
  */
@@ -101,6 +100,17 @@ export interface FlyoutOptions {
      * @default 'dialog'
      */
     hasPopup?: Value<boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'>;
+    /**
+     * External signal controlling the flyout's open/closed state.
+     * When provided, this signal becomes the single source of truth:
+     * - Setting it to `true` opens the flyout (respecting `showDelay`)
+     * - Setting it to `false` closes the flyout (respecting `hideDelay`)
+     * - Internal close paths (click-outside, Escape) set this signal to `false`
+     * - Built-in and custom triggers toggle this signal
+     *
+     * When omitted, the flyout manages its own internal open state.
+     */
+    open?: Prop<boolean>;
 }
 /**
  * Flexible popover component with configurable trigger modes, animated transitions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",