@adyen/bento-vue2 1.49.0 → 1.51.0

package/dist/chunks/{menu.lbODB0y3.js → menu.CzbkunwY.js}

@@ -1,19 +1,21 @@
-import { defineComponent as x, computed as C, ref as i, inject as P, onMounted as U, provide as W } from "vue";
-import { g as w } from "./generate-uid.NJ8tVoha.js";
-import { a as O, B as H } from "./popover.BQGNMbQN.js";
-import { B as D, D as j } from "./divider.Cc4JFWG_.js";
-import { B as q, u as G } from "./teleport.B5fwsT5y.js";
-import { u as V } from "./use-has-slot.C9lQZ6nz.js";
-import { u as J } from "./i18n.BQkEbtPM.js";
-import { n as g } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as Y, a as R } from "./chevron-left.PIu6yPqe.js";
-import { a as E, B as Z } from "./base-button.-gx_u8Bd.js";
-import { B as z } from "./typography.J1v_SPG3.js";
-import { B as Q } from "./toggle-button.BX_9vB0d.js";
+import { defineComponent as M, computed as b, ref as a, inject as N, onMounted as H, provide as j } from "vue";
+import { g as E } from "./generate-uid.NJ8tVoha.js";
+import { a as T, B as q } from "./popover.3sHql3nd.js";
+import { B as A, D as G } from "./divider.Cc4JFWG_.js";
+import { B as V, u as J } from "./teleport.B5fwsT5y.js";
+import { u as Y } from "./use-has-slot.C9lQZ6nz.js";
+import { u as Z } from "./i18n.BQkEbtPM.js";
+/* empty css              */
+import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "./index.Cl4_42j5.js";
+import { C as z, a as P } from "./chevron-left.DOMTgGel.js";
+import { a as D, B as Q } from "./base-button.-gx_u8Bd.js";
+import { B as X } from "./typography.J1v_SPG3.js";
+import { B as $ } from "./toggle-button.DgSFugBP.js";
 import "../assets/menu.css";
-const X = x({
+const ee = M({
   name: "menu-item",
-  components: { BaseButton: Z, BentoTypography: z, ChevronRightIcon: Y },
+  components: { BaseButton: Q, BentoTypography: X, ChevronRightIcon: z },
   props: {
     /**
      * menu-item text that gets displayed as the main label
@@ -81,22 +83,22 @@ const X = x({
       default: !1
     }
   },
-  emits: [E.CLICK],
+  emits: [D.CLICK],
   setup(s, { emit: e }) {
     return {
       // Values
-      conditionalClasses: C(() => ({
+      conditionalClasses: b(() => ({
         "b-menu-item--critical": s.critical,
         "b-menu-item--indent": s.indent
       })),
       // Methods
-      onClick: (o) => {
-        o.stopPropagation(), s.handler(), e(E.CLICK);
+      onClick: (u) => {
+        u.stopPropagation(), s.handler(), e(D.CLICK);
       }
     };
   }
 });
-var $ = function() {
+var te = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("base-button", { staticClass: "b-menu-item", class: e.conditionalClasses, attrs: { role: "menuitem", disabled: e.disabled, tabindex: "-1" }, on: { click: e.onClick }, scopedSlots: e._u([e.icon ? { key: "iconLeft", fn: function() {
     return [n(e.icon, { tag: "component", staticClass: "b-menu-item__icon-left", attrs: { "aria-hidden": "true" } })];
@@ -105,54 +107,54 @@ var $ = function() {
   }, proxy: !0 }, e.chevron ? { key: "iconRight", fn: function() {
     return [n("chevron-right-icon", { attrs: { "aria-hidden": "true" } })];
   }, proxy: !0 } : null], null, !0) });
-}, ee = [], te = /* @__PURE__ */ g(
-  X,
-  $,
+}, ne = [], se = /* @__PURE__ */ x(
   ee,
+  te,
+  ne,
   !1,
   null,
   "49e4a0fe"
 );
-const F = te.exports;
-var d = /* @__PURE__ */ ((s) => (s.BACK = "back", s.CLOSE = "close", s.OPEN = "open", s))(d || {});
-const ne = Symbol("menu registering injection key"), se = {
+const K = se.exports;
+var f = /* @__PURE__ */ ((s) => (s.BACK = "back", s.CLOSE = "close", s.OPEN = "open", s))(f || {});
+const oe = Symbol("menu registering injection key"), ue = {
   name: "bento-menu-list-container"
-}, oe = /* @__PURE__ */ x({
-  ...se,
+}, le = /* @__PURE__ */ M({
+  ...ue,
   setup(s) {
-    const e = i(), n = i({}), t = P(
-      ne,
+    const e = a(), n = a({}), t = N(
+      oe,
       !1
     );
     if (t) {
-      const { registerMenuContainerElement: o } = t;
-      o(e), n.value = {
+      const { registerMenuContainerElement: u } = t;
+      u(e), n.value = {
         mouseleave: t == null ? void 0 : t.menuMouseLeave
       };
     }
     return { __sfc: !0, menuListContainerRef: e, menuListContainerEvents: n, registeringAndMousingOut: t };
   }
 });
-var ue = function() {
+var ae = function() {
   var e = this, n = e._self._c, t = e._self._setupProxy;
   return n("div", e._g({ ref: "menuListContainerRef", staticClass: "b-menu-list-container", attrs: { "data-testid": "menu-list-container" } }, t.menuListContainerEvents), [e._t("default")], 2);
-}, le = [], ae = /* @__PURE__ */ g(
-  oe,
-  ue,
+}, re = [], ie = /* @__PURE__ */ x(
   le,
+  ae,
+  re,
   !1,
   null,
   "f5d01392"
 );
-const N = ae.exports, A = {
+const U = ie.exports, W = {
   "en-US": {
     backButton: "Go back",
     menuButton: "Open menu"
   }
-}, re = x({
-  i18n: { messages: A },
+}, ce = M({
+  i18n: { messages: W },
   name: "sub-menu-item-list",
-  components: { BentoDivider: D, MenuItem: F, MenuListContainer: N },
+  components: { BentoDivider: A, MenuItem: K, MenuListContainer: U },
   props: {
     items: {
       type: Array,
@@ -163,60 +165,60 @@ const N = ae.exports, A = {
       required: !0
     }
   },
-  emits: [d.CLOSE, d.BACK],
+  emits: [f.CLOSE, f.BACK],
   setup(s, { emit: e }) {
-    const n = i(null), t = i(0), o = i(s.items.length), u = () => e(d.CLOSE), r = () => e(d.BACK), l = C(() => {
-      var m;
-      const _ = (m = s.items) == null ? void 0 : m.map((y) => ({
-        ...y,
-        indent: !y.icon,
+    const n = a(null), t = a(0), u = a(s.items.length), d = () => e(f.CLOSE), m = () => e(f.BACK), l = b(() => {
+      var p;
+      const y = (p = s.items) == null ? void 0 : p.map((_) => ({
+        ..._,
+        indent: !_.icon,
         isTitle: !1,
-        clickHandler: u
+        clickHandler: d
       }));
       return [
         {
           text: s.title,
           secondaryText: null,
           critical: !1,
-          icon: R,
+          icon: P,
           isTitle: !0,
           disabled: !1,
           indent: !1,
-          handler: r,
-          clickHandler: r,
+          handler: m,
+          clickHandler: m,
           addDivider: !0
         },
-        ..._
+        ...y
       ];
-    }), p = async () => {
-      var _, m, y, k, v;
-      (v = (k = (y = (m = (_ = n.value) == null ? void 0 : _.children) == null ? void 0 : m[t.value]) == null ? void 0 : y.children) == null ? void 0 : k[0]) == null || v.focus();
+    }), r = async () => {
+      var y, p, _, v, h;
+      (h = (v = (_ = (p = (y = n.value) == null ? void 0 : y.children) == null ? void 0 : p[t.value]) == null ? void 0 : _.children) == null ? void 0 : v[0]) == null || h.focus();
     };
-    U(async () => {
-      setTimeout(() => p(), 150);
+    H(async () => {
+      setTimeout(() => r(), 150);
     });
-    const a = () => {
-      t.value > 0 ? (t.value -= 1, l.value[t.value].disabled && a()) : t.value = o.value, p();
-    }, b = () => {
-      t.value < o.value ? (t.value += 1, l.value[t.value].disabled && b()) : t.value = 0, p();
+    const o = () => {
+      t.value > 0 ? (t.value -= 1, l.value[t.value].disabled && o()) : t.value = u.value, r();
+    }, I = () => {
+      t.value < u.value ? (t.value += 1, l.value[t.value].disabled && I()) : t.value = 0, r();
     };
     return {
       // Enums
-      BentoMenuEvent: d,
+      BentoMenuEvent: f,
       // Values
       subMenuItemListRefLocal: n,
       subMenuFocusedIndex: t,
-      ChevronLeftIcon: R,
+      ChevronLeftIcon: P,
       computedItems: l,
       // Methods
-      closeMenu: u,
-      onBackButton: r,
-      focusPrevious: a,
-      focusNext: b
+      closeMenu: d,
+      onBackButton: m,
+      focusPrevious: o,
+      focusNext: I
     };
   }
 });
-var ie = function() {
+var fe = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("transition", { attrs: { name: "b-sub-menu-item-list__transition", appear: "" } }, [n("menu-list-container", { staticClass: "b-sub-menu-item-list" }, [n("ul", { ref: "subMenuItemListRefLocal", staticClass: "b-sub-menu-item-list__list", attrs: { role: "menu" }, on: { keydown: [function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : (t.stopPropagation(), e.focusNext.apply(null, arguments));
@@ -224,20 +226,20 @@ var ie = function() {
     return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : (t.stopPropagation(), e.focusPrevious.apply(null, arguments));
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : (t.stopPropagation(), e.onBackButton.apply(null, arguments));
-  }] } }, e._l(e.computedItems, function(t, o) {
-    return n("li", { key: `sub-menu-item-list-item-${o}`, attrs: { role: "none" } }, [n("menu-item", { attrs: { text: t.text, handler: t.handler, "secondary-text": t.secondaryText, icon: t.icon, "is-title": t.isTitle, disabled: t.disabled, critical: t.critical, indent: t.indent, tabindex: o === e.subMenuFocusedIndex ? "0" : "-1" }, on: { click: t.clickHandler } }), t.addDivider ? n("bento-divider", { staticClass: "b-sub-menu-item-list__divider" }) : e._e()], 1);
+  }] } }, e._l(e.computedItems, function(t, u) {
+    return n("li", { key: `sub-menu-item-list-item-${u}`, attrs: { role: "none" } }, [n("menu-item", { attrs: { text: t.text, handler: t.handler, "secondary-text": t.secondaryText, icon: t.icon, "is-title": t.isTitle, disabled: t.disabled, critical: t.critical, indent: t.indent, tabindex: u === e.subMenuFocusedIndex ? "0" : "-1" }, on: { click: t.clickHandler } }), t.addDivider ? n("bento-divider", { staticClass: "b-sub-menu-item-list__divider" }) : e._e()], 1);
   }), 0)])], 1);
-}, ce = [], fe = /* @__PURE__ */ g(
-  re,
-  ie,
+}, de = [], me = /* @__PURE__ */ x(
   ce,
+  fe,
+  de,
   !1,
   null,
   "25195627"
 );
-const de = fe.exports, me = x({
+const pe = me.exports, _e = M({
   name: "menu-item-list",
-  components: { BentoDivider: D, MenuItem: F, MenuListContainer: N, SubMenuItemList: de },
+  components: { BentoDivider: A, MenuItem: K, MenuListContainer: U, SubMenuItemList: pe },
   props: {
     /**
      * The data to be displayed in the list
@@ -268,62 +270,67 @@ const de = fe.exports, me = x({
       default: !0
     }
   },
-  emits: [d.CLOSE, "menu-item-click"],
-  setup(s, { emit: e }) {
-    const n = i(null), t = i(null), o = i(null), u = i(!1), r = i(null), l = i(s.focusLastElement ? s.data.length - 1 : 0), p = i(0), a = i(s.data.length - 1), b = C(() => s.data.some((c) => c.icon)), _ = C(() => s.indentItems || b.value ? s.data.map((c) => {
-      let f = !1;
-      return c.icon || (f = !0), {
-        ...c,
+  emits: [f.CLOSE, "menu-item-click"],
+  setup(s, { emit: e, expose: n }) {
+    const t = a(null), u = a(null), d = a(null), m = a(null), l = a(!1), r = a(null), o = a(s.focusLastElement ? s.data.length - 1 : 0), I = a(0), y = a(s.data.length - 1), p = b(() => s.data.some((i) => i.icon)), _ = b(() => s.indentItems || p.value ? s.data.map((i) => {
+      let c = !1;
+      return i.icon || (c = !0), {
+        ...i,
         // eslint-disable-next-line no-param-reassign
-        indent: f
+        indent: c
       };
-    }) : s.data), m = () => {
-      var c, f, h;
-      return (h = (f = (c = n.value) == null ? void 0 : c.children[l.value]) == null ? void 0 : f.children[0]) == null ? void 0 : h.focus();
-    }, y = () => e(d.CLOSE), k = (c, f) => {
-      if (c.items) {
-        r.value = f, u.value = !0;
+    }) : s.data), v = async () => {
+      var i, c, k;
+      (k = (c = (i = u.value) == null ? void 0 : i.children[o.value]) == null ? void 0 : c.children[0]) == null || k.focus();
+    }, h = () => e(f.CLOSE), B = (i, c) => {
+      if (i.items) {
+        r.value = c, l.value = !0;
         return;
       }
-      r.value = f, u.value = !1, s.closeMenuOnItemSelect && y(), e("menu-item-click");
-    }, v = () => {
-      l.value > 0 ? (l.value -= 1, _.value[l.value].disabled && v()) : l.value = a.value, m();
-    }, I = () => {
-      l.value < a.value ? (l.value += 1, _.value[l.value].disabled && I()) : l.value = 0, m();
-    }, B = (c, f) => {
-      var h;
-      (h = c == null ? void 0 : c.items) != null && h.length && (r.value = f, u.value = !0);
-    }, M = () => {
-      r.value && u.value && (r.value = null, u.value = !1);
-    }, L = () => {
-      u.value = !1, r.value = null, m();
-    }, S = C(() => {
-      var c, f, h;
-      return (h = (f = (c = o.value) == null ? void 0 : c[0]) == null ? void 0 : f.$el) == null ? void 0 : h.offsetHeight;
-    }), K = C(() => u.value ? `${S.value}px` : "");
+      r.value = c, l.value = !1, !i.skipClose && s.closeMenuOnItemSelect !== !1 && h(), e("menu-item-click");
+    }, g = () => {
+      o.value > 0 ? (o.value -= 1, _.value[o.value].disabled && g()) : o.value = y.value, v();
+    }, O = () => {
+      o.value < y.value ? (o.value += 1, _.value[o.value].disabled && O()) : o.value = 0, v();
+    }, R = (i, c) => {
+      var k;
+      (k = i == null ? void 0 : i.items) != null && k.length && (r.value = c, l.value = !0);
+    }, S = () => {
+      r.value && l.value && (r.value = null, l.value = !1);
+    }, w = () => {
+      l.value = !1, r.value = null, v();
+    };
+    n({
+      focusItem: v
+    });
+    const L = b(() => {
+      var i, c, k;
+      return (k = (c = (i = m.value) == null ? void 0 : i[0]) == null ? void 0 : c.$el) == null ? void 0 : k.offsetHeight;
+    }), C = b(() => l.value ? `${L.value}px` : "");
     return {
       // Values
-      menuItemListRef: n,
-      menuItemListWrapperRef: t,
-      subMenuItemListRef: o,
+      menuItemListRef: u,
+      menuItemListWrapperRef: d,
+      subMenuItemListRef: m,
+      menuItemRef: t,
       computedData: _,
-      computedHeight: K,
-      focusedIndex: l,
-      subMenuFocusedIndex: p,
-      showSubMenu: u,
+      computedHeight: C,
+      focusedIndex: o,
+      subMenuFocusedIndex: I,
+      showSubMenu: l,
       visibleSubMenuIndex: r,
       // Methods
-      menuItemClick: k,
-      closeMenu: y,
-      focusPrevious: v,
-      focusNext: I,
-      focusRight: B,
-      focusLeft: M,
-      onBackButton: L
+      menuItemClick: B,
+      closeMenu: h,
+      focusPrevious: g,
+      focusNext: O,
+      focusRight: R,
+      focusLeft: S,
+      onBackButton: w
     };
   }
 });
-var pe = function() {
+var ye = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("menu-list-container", { ref: "menuItemListWrapperRef", style: { height: e.computedHeight } }, [n("ul", { ref: "menuItemListRef", staticClass: "b-menu-item-list", attrs: { role: "menu" }, on: { keydown: [function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : e.focusNext.apply(null, arguments);
@@ -333,46 +340,46 @@ var pe = function() {
     return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.closeMenu.apply(null, arguments);
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.closeMenu.apply(null, arguments);
-  }] } }, e._l(e.computedData, function(t, o) {
-    var u, r, l, p;
-    return n("li", { key: `menu-item-${o}`, staticClass: "b-menu-item-list__item", attrs: { role: "none" }, on: { keydown: [function(a) {
-      return !a.type.indexOf("key") && e._k(a.keyCode, "right", 39, a.key, ["Right", "ArrowRight"]) || "button" in a && a.button !== 2 ? null : e.focusRight(t, o);
-    }, function(a) {
-      return !a.type.indexOf("key") && e._k(a.keyCode, "left", 37, a.key, ["Left", "ArrowLeft"]) || "button" in a && a.button !== 0 ? null : e.focusLeft();
-    }] } }, [n("menu-item", { attrs: { text: t.text, handler: (u = t.items) != null && u.length ? () => null : t.handler, "secondary-text": t.secondaryText, icon: t.icon, chevron: !!((r = t.items) != null && r.length), disabled: t.disabled, critical: t.critical, indent: t.indent, tabindex: o === e.subMenuFocusedIndex ? "0" : "-1", "aria-haspopup": !!((l = t.items) != null && l.length), "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === o }, on: { click: function(a) {
-      return e.menuItemClick(t, o);
-    } } }), t.addDivider ? n("bento-divider", { staticClass: "b-menu-item-list__divider" }) : e._e(), (p = t.items) != null && p.length && e.showSubMenu && e.visibleSubMenuIndex === o ? n("sub-menu-item-list", { ref: "subMenuItemListRef", refInFor: !0, attrs: { items: t.items, title: t.text }, on: { back: e.onBackButton, close: e.closeMenu } }) : e._e()], 1);
+  }] } }, e._l(e.computedData, function(t, u) {
+    var d, m, l, r;
+    return n("li", { key: `menu-item-${u}`, ref: "menuItemRef", refInFor: !0, staticClass: "b-menu-item-list__item", attrs: { role: "none" }, on: { keydown: [function(o) {
+      return !o.type.indexOf("key") && e._k(o.keyCode, "right", 39, o.key, ["Right", "ArrowRight"]) || "button" in o && o.button !== 2 ? null : e.focusRight(t, u);
+    }, function(o) {
+      return !o.type.indexOf("key") && e._k(o.keyCode, "left", 37, o.key, ["Left", "ArrowLeft"]) || "button" in o && o.button !== 0 ? null : e.focusLeft();
+    }] } }, [n("menu-item", { attrs: { text: t.text, handler: (d = t.items) != null && d.length ? () => null : t.handler, "secondary-text": t.secondaryText, icon: t.icon, chevron: !!((m = t.items) != null && m.length), disabled: t.disabled, critical: t.critical, indent: t.indent, tabindex: u === e.subMenuFocusedIndex ? "0" : "-1", "aria-haspopup": !!((l = t.items) != null && l.length), "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === u }, on: { click: function(o) {
+      return e.menuItemClick(t, u);
+    } } }), t.addDivider ? n("bento-divider", { staticClass: "b-menu-item-list__divider" }) : e._e(), (r = t.items) != null && r.length && e.showSubMenu && e.visibleSubMenuIndex === u ? n("sub-menu-item-list", { ref: "subMenuItemListRef", refInFor: !0, attrs: { items: t.items, title: t.text }, on: { back: e.onBackButton, close: e.closeMenu } }) : e._e()], 1);
   }), 0)]);
-}, _e = [], ye = /* @__PURE__ */ g(
-  me,
-  pe,
+}, ve = [], Ce = /* @__PURE__ */ x(
   _e,
+  ye,
+  ve,
   !1,
   null,
-  "f2e65437"
+  "855615f2"
 );
-const ve = ye.exports, Ce = Symbol("menu inverse style injection key");
-let T = 0;
-const be = {
+const be = Ce.exports, ke = Symbol("menu inverse style injection key");
+let F = 0;
+const he = {
   beforeCreate() {
-    this.uuid = T.toString(), T += 1;
+    this.uuid = F.toString(), F += 1;
   }
 };
-var ke = function() {
+var ge = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00167 0.970945 7.70006 1.00065 7.42598 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65803 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z" } }), n("path", { attrs: { fill: "#00112C", d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00167 11.9709 7.70006 12.0007 7.42598 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65803 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z" } }), n("path", { attrs: { fill: "#00112C", d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65803 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42598 6.61418C7.70006 6.50065 8.00167 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z" } })]);
-}, he = [], ge = /* @__PURE__ */ g(
-  be,
-  ke,
+}, Ie = [], xe = /* @__PURE__ */ x(
   he,
+  ge,
+  Ie,
   !1,
   null,
   null
 );
-const xe = ge.exports, Ie = x({
-  i18n: { messages: A },
+const Be = xe.exports, Me = M({
+  i18n: { messages: W },
   name: "bento-menu",
-  components: { BentoToggleButton: Q, BentoPopover: H, BentoTeleport: q, MenuItemList: ve, OptionsVerticalIcon: xe },
+  components: { BentoToggleButton: $, BentoPopover: q, BentoTeleport: V, MenuItemList: be, OptionsVerticalIcon: Be },
   props: {
     /**
      * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
@@ -403,8 +410,8 @@ const xe = ge.exports, Ie = x({
      */
     menuPosition: {
       type: String,
-      default: O.BOTTOM_START,
-      validator: (s) => Object.values(O).includes(s)
+      default: T.BOTTOM_START,
+      validator: (s) => Object.values(T).includes(s)
     },
     /**
      * Instructs the menu popover to be visible outside of the containing container.
@@ -437,67 +444,93 @@ const xe = ge.exports, Ie = x({
     teleport: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node
+     * (or `dialog` if popover is inside a dialog).
+     *
+     * @see {@link OnClickOutsideOptions}
+     */
+    closeOnClickOutsideOptions: {
+      type: Object,
+      default: void 0
     }
   },
-  emits: [d.CLOSE, d.OPEN, "menu-item-click"],
-  setup(s, { emit: e, slots: n }) {
-    const { t } = J(), o = i(null), u = i(!1), r = i(!1), l = i(null), p = w("menu"), a = w("menu-popover"), b = P(Ce, i(!1));
-    W(j, b);
-    const _ = C(() => ({
-      "b-menu--inverse": b.value
-    })), m = C(() => s.menuWidth ? { width: `${s.menuWidth}px` } : null), y = C(() => {
+  emits: [f.CLOSE, f.OPEN, "menu-item-click", "click-outside"],
+  setup(s, { emit: e, expose: n, slots: t }) {
+    var L;
+    const { t: u } = Z(), d = a(null), m = a(null), l = a(!1), r = a(!1), o = a(null), I = E("menu"), y = E("menu-popover"), p = N(ke, a(!1));
+    j(G, p);
+    const _ = b(() => ({
+      "b-menu--inverse": p.value
+    })), v = b(() => s.menuWidth ? { width: `${s.menuWidth}px` } : null), h = b(() => {
       if (s != null && s.button)
         return {
           variant: "secondary",
           ...s.button
         };
-    }), k = () => {
-      u.value = !0, e(d.OPEN);
-    }, v = () => {
-      u.value && (u.value = !1, s.revertFocusToButton && o.value.$el.focus(), e(d.CLOSE));
-    }, I = (S) => {
-      S.stopPropagation(), u.value ? v() : k();
-    }, B = () => {
-      r.value = !1, k();
-    }, M = () => {
-      r.value = !0, k();
-    }, L = () => {
+    }), B = () => {
+      l.value = !0, e(f.OPEN);
+    }, g = (C = s.revertFocusToButton) => {
+      l.value && (l.value = !1, C && d.value.$el.focus(), e(f.CLOSE));
+    }, O = (C) => {
+      C.stopPropagation(), l.value ? g() : B();
+    }, R = (C) => {
+      C.preventDefault(), r.value = !1, B();
+    }, S = (C) => {
+      C.preventDefault(), r.value = !0, B();
+    }, w = () => {
       e("menu-item-click");
     };
-    return G(l, v, { ignore: [o] }), {
+    return J(
+      o,
+      () => {
+        g(), e("click-outside");
+      },
+      {
+        ...s.closeOnClickOutsideOptions,
+        ignore: [d, ...((L = s.closeOnClickOutsideOptions) == null ? void 0 : L.ignore) ?? []]
+      }
+    ), n({
+      /**
+       * Control to enable programmatic closing of the menu
+       */
+      closeMenu: g
+    }), {
       // Refs
-      popoverRef: l,
-      menuButtonRef: o,
+      popoverRef: o,
+      menuButtonRef: d,
+      menuItemListRef: m,
       // Values
-      menuId: p,
-      popoverId: a,
-      showMenu: u,
-      computedButtonPropsWithDefaults: y,
-      computedMenuWidth: m,
+      menuId: I,
+      popoverId: y,
+      showMenu: l,
+      computedButtonPropsWithDefaults: h,
+      computedMenuWidth: v,
       isLastElementFocused: r,
       // Classes
       computedClasses: _,
-      isInverseColorSet: b,
+      isInverseColorSet: p,
       // Methods
-      hasSlot: V(n),
-      onKeyDown: B,
-      onKeyUp: M,
-      closeMenu: v,
-      menuItemClick: L,
-      toggleShowMenu: I,
+      hasSlot: Y(t),
+      onKeyDown: R,
+      onKeyUp: S,
+      closeMenu: g,
+      menuItemClick: w,
+      toggleShowMenu: O,
       // Translations
-      t
+      t: u
     };
   }
 });
-var Be = function() {
+var Oe = function() {
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { staticClass: "b-menu", class: e.computedClasses, on: { keydown: [function(t) {
+  return e._self._setupProxy, n("div", { staticClass: "b-menu", class: e.computedClasses, attrs: { "data-testid": "menu" }, on: { keydown: [function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : e.onKeyDown.apply(null, arguments);
   }, function(t) {
     return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : e.onKeyUp.apply(null, arguments);
   }, function(t) {
-    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.closeMenu.apply(null, arguments);
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.closeMenu();
   }] } }, [n("bento-toggle-button", e._b({ ref: "menuButtonRef", attrs: { "aria-haspopup": "true", "aria-controls": e.showMenu ? e.menuId : null, toggled: e.showMenu, inverse: e.isInverseColorSet }, on: { click: e.toggleShowMenu }, scopedSlots: e._u([!e.hasSlot("default") || e.hasSlot("iconLeft") ? { key: "iconLeft", fn: function() {
     return [e._t("iconLeft", function() {
       return [n("options-vertical-icon", { attrs: { title: e.t("menuButton") } })];
@@ -506,7 +539,7 @@ var Be = function() {
     return [e._t("default")];
   }, proxy: !0 } : null, e.hasSlot("iconRight") ? { key: "iconRight", fn: function() {
     return [e._t("iconRight")];
-  }, proxy: !0 } : null], null, !0) }, "bento-toggle-button", e.computedButtonPropsWithDefaults, !1)), e.menuButtonRef ? n("bento-teleport", { attrs: { disabled: !e.teleport } }, [e.menuButtonRef ? n("bento-popover", { ref: "popoverRef", staticClass: "b-menu__popover", style: e.computedMenuWidth, attrs: { id: e.menuId, open: e.showMenu, "target-element": e.menuButtonRef, position: e.menuPosition, "fixed-positioning": e.menuFixedPositioning, "fallback-position": [
+  }, proxy: !0 } : null], null, !0) }, "bento-toggle-button", e.computedButtonPropsWithDefaults, !1)), e.menuButtonRef ? n("bento-teleport", { attrs: { disabled: !e.teleport } }, [e.menuButtonRef ? n("bento-popover", { ref: "popoverRef", staticClass: "b-menu__popover", style: e.computedMenuWidth, attrs: { id: e.menuId, role: null, open: e.showMenu, "target-element": e.menuButtonRef, position: e.menuPosition, "fixed-positioning": e.menuFixedPositioning, "fallback-position": [
     "bottom-start",
     "bottom-end",
     "top-start",
@@ -515,21 +548,21 @@ var Be = function() {
     "right-end",
     "left-start",
     "left-end"
-  ], teleport: e.teleport, "without-space": "" } }, [n("menu-item-list", { attrs: { "close-menu-on-item-select": e.closeMenuOnItemSelect, data: e.data, "focus-last-element": e.isLastElementFocused }, on: { close: e.closeMenu, "menu-item-click": e.menuItemClick } })], 1) : e._e()], 1) : e._e()], 1);
-}, Me = [], Le = /* @__PURE__ */ g(
-  Ie,
-  Be,
+  ], teleport: e.teleport, "without-space": "" } }, [n("menu-item-list", { ref: "menuItemListRef", attrs: { "close-menu-on-item-select": e.closeMenuOnItemSelect, data: e.data, "focus-last-element": e.isLastElementFocused }, on: { close: e.closeMenu, "menu-item-click": e.menuItemClick } })], 1) : e._e()], 1) : e._e()], 1);
+}, Le = [], Re = /* @__PURE__ */ x(
   Me,
+  Oe,
+  Le,
   !1,
   null,
-  "0b7f4a1a"
+  "1d35f397"
 );
-const Ue = Le.exports;
+const qe = Re.exports;
 export {
-  Ue as B,
-  ne as D,
-  Ce as M,
-  xe as O,
-  d as a
+  qe as B,
+  oe as D,
+  ke as M,
+  Be as O,
+  f as a
 };
-//# sourceMappingURL=menu.lbODB0y3.js.map
+//# sourceMappingURL=menu.CzbkunwY.js.map