@tempots/beatui 0.82.0 → 0.83.0

package/dist/menu-CX72LaZ3.cjs

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

package/dist/menu-D_slbwl8.js

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