@tempots/beatui 1.1.1 → 1.1.3

package/dist/menu-B8yoDMRS.js

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

package/dist/menu-B92oSDct.cjs

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