@adyen/bento-vue3 1.60.0 → 1.60.1

package/dist/chunks/menu.BcXV6WhV.js

@@ -0,0 +1,768 @@
+import { defineComponent as N, computed as _, resolveComponent as C, createBlock as B, openBlock as v, normalizeClass as Q, createSlots as x, withCtx as I, createVNode as E, createCommentVNode as O, createTextVNode as G, toDisplayString as U, resolveDynamicComponent as ie, ref as d, inject as ee, createElementBlock as L, mergeProps as j, toHandlers as ae, renderSlot as K, onMounted as re, Transition as de, createElementVNode as R, withKeys as g, withModifiers as H, Fragment as te, renderList as ne, watch as ce, nextTick as q, normalizeStyle as oe, provide as me } from "vue";
+import { g as X } from "./generate-uid.NJ8tVoha.js";
+import { a as Y, B as fe } from "./popover.KFyR9BXF.js";
+import { B as se, D as pe } from "./divider.qUOSAbU6.js";
+import { u as ve } from "./use-click-outside.BnhTgpSt.js";
+import { u as be } from "./use-has-slot.B7eQSabc.js";
+import { u as ye } from "./i18n.B6g5VX0q.js";
+/* empty css              */
+import { _ as T } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { a as Ce, C as z } from "./chevron-left.BF63HtOH.js";
+import { a as J, B as he } from "./base-button.DdNFlbgH.js";
+import { B as Ie } from "./typography.DN5eC5ch.js";
+import { t as ge } from "./truncate.BfIl_-71.js";
+import { B as Me } from "./teleport.CfGWjxe2.js";
+import { B as ke } from "./toggle-button.Dv1t15yj.js";
+import "../assets/menu.css";
+const Be = Symbol("menu inverse style injection key"), _e = N({
+  name: "menu-item",
+  components: { BaseButton: he, BentoTypography: Ie, ChevronRightIcon: Ce },
+  props: {
+    /**
+     * menu-item text that gets displayed as the main label
+     */
+    text: {
+      type: String,
+      required: !0
+    },
+    /**
+     * menu-item action that gets executed when the MeniItem is clicked
+     */
+    handler: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * menu-item text that gets displayed as the secondary label
+     */
+    secondaryText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Optional chevron icon displayed to the right of the menu-item
+     */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optional icon displayed to the left of the menu-item
+     */
+    icon: {
+      // Types for Vue2 (Object) and Vue3 (Function)
+      // TODO: Remove Object when fully migrated to Vue3
+      type: [Object, Function],
+      default: null
+    },
+    /**
+     * Disables menu-item button functionality
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays an indent variant od the menu-item
+     */
+    indent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays menu-item button as critical
+     */
+    critical: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the text in a bold variant
+     */
+    isTitle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [J.CLICK],
+  setup(e, { emit: t }) {
+    const u = _(() => ({
+      "b-menu-item--critical": e.critical,
+      "b-menu-item--indent": e.indent
+    })), m = _(() => ge(e.secondaryText, 10));
+    return {
+      // Values
+      conditionalClasses: u,
+      computedSecondaryText: m,
+      // Methods
+      onClick: (i) => {
+        i.stopPropagation(), e.handler(), t(J.CLICK);
+      }
+    };
+  }
+});
+function Se(e, t, p, u, m, c) {
+  const i = C("bento-typography"), l = C("chevron-right-icon"), a = C("base-button");
+  return v(), B(a, {
+    class: Q(["b-menu-item", e.conditionalClasses]),
+    role: "menuitem",
+    disabled: e.disabled,
+    tabindex: "-1",
+    onClick: e.onClick
+  }, x({
+    default: I(() => [
+      E(i, {
+        el: "span",
+        variant: "body",
+        stronger: e.isTitle,
+        class: "b-menu-item__primary-text"
+      }, {
+        default: I(() => [
+          G(U(e.text), 1)
+        ]),
+        _: 1
+      }, 8, ["stronger"]),
+      e.computedSecondaryText ? (v(), B(i, {
+        key: 0,
+        el: "span",
+        variant: "body",
+        class: "b-menu-item__secondary-text"
+      }, {
+        default: I(() => [
+          G(U(e.computedSecondaryText), 1)
+        ]),
+        _: 1
+      })) : O("", !0)
+    ]),
+    _: 2
+  }, [
+    e.icon ? {
+      name: "iconLeft",
+      fn: I(() => [
+        (v(), B(ie(e.icon), {
+          class: "b-menu-item__icon-left",
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0,
+    e.chevron ? {
+      name: "iconRight",
+      fn: I(() => [
+        E(l, { "aria-hidden": "true" })
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1032, ["class", "disabled", "onClick"]);
+}
+const ue = /* @__PURE__ */ T(_e, [["render", Se], ["__scopeId", "data-v-4cecac65"]]);
+var M = /* @__PURE__ */ ((e) => (e.BACK = "back", e.CLOSE = "close", e.OPEN = "open", e))(M || {});
+const $e = Symbol("menu registering injection key"), Ee = {
+  name: "bento-menu-list-container"
+}, Le = /* @__PURE__ */ N({
+  ...Ee,
+  setup(e) {
+    const t = d(), p = d({}), u = ee(
+      $e,
+      !1
+    );
+    if (u) {
+      const { registerMenuContainerElement: m } = u;
+      m(t), p.value = {
+        mouseleave: u == null ? void 0 : u.menuMouseLeave
+      };
+    }
+    return (m, c) => (v(), L("div", j({
+      ref_key: "menuListContainerRef",
+      ref: t,
+      class: "b-menu-list-container",
+      "data-testid": "menu-list-container"
+    }, ae(p.value, !0)), [
+      K(m.$slots, "default", {}, void 0, !0)
+    ], 16));
+  }
+}), le = /* @__PURE__ */ T(Le, [["__scopeId", "data-v-02a3ca45"]]), V = {
+  "en-US": {
+    backButton: "Go back",
+    menuButton: "Open menu"
+  }
+}, we = N({
+  i18n: { messages: V },
+  name: "sub-menu-item-list",
+  components: { BentoDivider: se, MenuItem: ue, MenuListContainer: le },
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [M.CLOSE, M.BACK],
+  setup(e, { emit: t }) {
+    const p = d(null), u = d(0), m = d(e.items.length), c = () => t(M.CLOSE), i = () => t(M.BACK), l = _(() => {
+      var f;
+      const s = (f = e.items) == null ? void 0 : f.map((b) => ({
+        ...b,
+        indent: !b.icon,
+        isTitle: !1,
+        clickHandler: c
+      }));
+      return [
+        {
+          text: e.title,
+          secondaryText: null,
+          critical: !1,
+          icon: z,
+          isTitle: !0,
+          disabled: !1,
+          indent: !1,
+          handler: i,
+          clickHandler: i,
+          addDivider: !0
+        },
+        ...s
+      ];
+    }), a = async () => {
+      var s, f, b, y, k;
+      (k = (y = (b = (f = (s = p.value) == null ? void 0 : s.children) == null ? void 0 : f[u.value]) == null ? void 0 : b.children) == null ? void 0 : y[0]) == null || k.focus();
+    };
+    re(async () => {
+      setTimeout(() => a(), 150);
+    });
+    const n = () => {
+      u.value > 0 ? (u.value -= 1, l.value[u.value].disabled && n()) : u.value = m.value, a();
+    }, o = () => {
+      u.value < m.value ? (u.value += 1, l.value[u.value].disabled && o()) : u.value = 0, a();
+    };
+    return {
+      // Enums
+      BentoMenuEvent: M,
+      // Values
+      subMenuItemListRefLocal: p,
+      subMenuFocusedIndex: u,
+      ChevronLeftIcon: z,
+      computedItems: l,
+      // Methods
+      closeMenu: c,
+      onBackButton: i,
+      focusPrevious: n,
+      focusNext: o
+    };
+  }
+});
+function Oe(e, t, p, u, m, c) {
+  const i = C("menu-item"), l = C("bento-divider"), a = C("menu-list-container");
+  return v(), B(de, {
+    name: "b-sub-menu-item-list__transition",
+    appear: ""
+  }, {
+    default: I(() => [
+      E(a, { class: "b-sub-menu-item-list" }, {
+        default: I(() => [
+          R("ul", {
+            ref: "subMenuItemListRefLocal",
+            role: "menu",
+            class: "b-sub-menu-item-list__list",
+            onKeydown: [
+              t[0] || (t[0] = g(H((...n) => e.focusNext && e.focusNext(...n), ["stop"]), ["down"])),
+              t[1] || (t[1] = g(H((...n) => e.focusPrevious && e.focusPrevious(...n), ["stop"]), ["up"])),
+              t[2] || (t[2] = g(H((...n) => e.onBackButton && e.onBackButton(...n), ["stop"]), ["esc"]))
+            ]
+          }, [
+            (v(!0), L(te, null, ne(e.computedItems, (n, o) => (v(), L("li", {
+              key: `sub-menu-item-list-item-${o}`,
+              role: "none"
+            }, [
+              E(i, {
+                text: n.text,
+                handler: n.handler,
+                "secondary-text": n.secondaryText,
+                icon: n.icon,
+                "is-title": n.isTitle,
+                disabled: n.disabled,
+                critical: n.critical,
+                indent: n.indent,
+                tabindex: o === e.subMenuFocusedIndex ? "0" : "-1",
+                onClick: n.clickHandler
+              }, null, 8, ["text", "handler", "secondary-text", "icon", "is-title", "disabled", "critical", "indent", "tabindex", "onClick"]),
+              n.addDivider ? (v(), B(l, {
+                key: 0,
+                class: "b-sub-menu-item-list__divider"
+              })) : O("", !0)
+            ]))), 128))
+          ], 544)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const Te = /* @__PURE__ */ T(we, [["render", Oe], ["__scopeId", "data-v-621db243"]]);
+function Re(e, t, p) {
+  const c = d(0), i = d(0), l = (n) => {
+    if (!n || !n.parentElement)
+      return;
+    const o = n.parentElement, s = n.cloneNode(!0);
+    s.style.position = "absolute", s.style.visibility = "hidden", o.appendChild(s), s.style.width = "max-content";
+    const f = s.offsetWidth, b = Math.max(150, Math.min(f, 350));
+    c.value = b, s.style.width = `${b}px`;
+    const y = s.offsetHeight;
+    i.value = y, o.removeChild(s), i.value = y;
+  };
+  return ce([t, p], async ([n]) => {
+    var o, s;
+    if (n !== null) {
+      await q();
+      const f = (s = (o = e.value) == null ? void 0 : o[0]) == null ? void 0 : s.$el;
+      f && l(f);
+    } else
+      c.value = 0, i.value = 0;
+  }), { computedStyle: _(() => {
+    const n = { width: "max-content" };
+    return p.value && (i.value > 0 && (n.height = `${i.value}px`), c.value > 0 && (n.width = `${c.value}px`)), n;
+  }) };
+}
+const Ne = N({
+  name: "menu-item-list",
+  components: { BentoDivider: se, MenuItem: ue, MenuListContainer: le, SubMenuItemList: Te },
+  props: {
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left.
+     */
+    indentItems: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key.
+     */
+    focusLastElement: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If set to true, closes the menu when an item is clicked.
+     */
+    closeMenuOnItemSelect: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [M.CLOSE, "menu-item-click"],
+  setup(e, { emit: t, expose: p }) {
+    const u = d(null), m = d(null), c = d(null), i = d(null), l = d(!1), a = d(null), n = d(e.focusLastElement ? e.data.length - 1 : 0), o = d(0), s = d(e.data.length - 1), f = _(() => e.data.some((r) => r.icon)), b = _(() => e.indentItems || f.value ? e.data.map((r) => {
+      let h = !1;
+      return r.icon || (h = !0), {
+        ...r,
+        indent: h
+      };
+    }) : e.data), y = async () => {
+      var r, h, $;
+      await q(), ($ = (h = (r = m.value) == null ? void 0 : r.children[n.value]) == null ? void 0 : h.children[0]) == null || $.focus();
+    }, k = () => t(M.CLOSE), S = (r, h) => {
+      if (r.items) {
+        a.value = h, l.value = !0;
+        return;
+      }
+      a.value = h, l.value = !1, !r.skipClose && e.closeMenuOnItemSelect !== !1 && k(), t("menu-item-click");
+    }, w = () => {
+      n.value > 0 ? (n.value -= 1, b.value[n.value].disabled && w()) : n.value = s.value, y();
+    }, D = () => {
+      n.value < s.value ? (n.value += 1, b.value[n.value].disabled && D()) : n.value = 0, y();
+    }, W = (r, h) => {
+      var $;
+      ($ = r == null ? void 0 : r.items) != null && $.length && (a.value = h, l.value = !0);
+    }, A = () => {
+      a.value && l.value && (a.value = null, l.value = !1);
+    }, F = () => {
+      l.value = !1, a.value = null, y();
+    };
+    p({
+      focusItem: y
+    });
+    const { computedStyle: P } = Re(i, a, l);
+    return {
+      // Values
+      menuItemListRef: m,
+      menuItemListWrapperRef: c,
+      subMenuItemListRef: i,
+      menuItemRef: u,
+      computedData: b,
+      computedStyle: P,
+      focusedIndex: n,
+      subMenuFocusedIndex: o,
+      showSubMenu: l,
+      visibleSubMenuIndex: a,
+      // Methods
+      menuItemClick: S,
+      closeMenu: k,
+      focusPrevious: w,
+      focusNext: D,
+      focusRight: W,
+      focusLeft: A,
+      onBackButton: F
+    };
+  }
+}), De = ["onKeydown"];
+function Pe(e, t, p, u, m, c) {
+  const i = C("menu-item"), l = C("bento-divider"), a = C("sub-menu-item-list"), n = C("menu-list-container");
+  return v(), B(n, {
+    ref: "menuItemListWrapperRef",
+    style: oe(e.computedStyle)
+  }, {
+    default: I(() => [
+      R("ul", {
+        ref: "menuItemListRef",
+        class: "b-menu-item-list",
+        role: "menu",
+        onKeydown: [
+          t[1] || (t[1] = g((...o) => e.focusNext && e.focusNext(...o), ["down"])),
+          t[2] || (t[2] = g((...o) => e.focusPrevious && e.focusPrevious(...o), ["up"])),
+          t[3] || (t[3] = g((...o) => e.closeMenu && e.closeMenu(...o), ["esc"])),
+          t[4] || (t[4] = g((...o) => e.closeMenu && e.closeMenu(...o), ["tab"]))
+        ]
+      }, [
+        (v(!0), L(te, null, ne(e.computedData, (o, s) => {
+          var f, b, y, k;
+          return v(), L("li", {
+            key: `menu-item-${s}`,
+            ref_for: !0,
+            ref: "menuItemRef",
+            class: "b-menu-item-list__item",
+            role: "none",
+            onKeydown: [
+              g((S) => e.focusRight(o, s), ["right"]),
+              t[0] || (t[0] = g((S) => e.focusLeft(), ["left"]))
+            ]
+          }, [
+            E(i, {
+              text: o.text,
+              handler: (f = o.items) != null && f.length ? () => null : o.handler,
+              "secondary-text": o.secondaryText,
+              icon: o.icon,
+              chevron: !!((b = o.items) != null && b.length),
+              disabled: o.disabled,
+              critical: o.critical,
+              indent: o.indent,
+              tabindex: s === e.subMenuFocusedIndex ? "0" : "-1",
+              "aria-haspopup": !!((y = o.items) != null && y.length),
+              "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === s,
+              onClick: (S) => e.menuItemClick(o, s)
+            }, null, 8, ["text", "handler", "secondary-text", "icon", "chevron", "disabled", "critical", "indent", "tabindex", "aria-haspopup", "aria-expanded", "onClick"]),
+            o.addDivider ? (v(), B(l, {
+              key: 0,
+              class: "b-menu-item-list__divider"
+            })) : O("", !0),
+            (k = o.items) != null && k.length && e.showSubMenu && e.visibleSubMenuIndex === s ? (v(), B(a, {
+              key: 1,
+              ref_for: !0,
+              ref: "subMenuItemListRef",
+              items: o.items,
+              title: o.text,
+              onBack: e.onBackButton,
+              onClose: e.closeMenu
+            }, null, 8, ["items", "title", "onBack", "onClose"])) : O("", !0)
+          ], 40, De);
+        }), 128))
+      ], 544)
+    ]),
+    _: 1
+  }, 8, ["style"]);
+}
+const Ke = /* @__PURE__ */ T(Ne, [["render", Pe], ["__scopeId", "data-v-999aa4e9"]]);
+let Z = 0;
+const We = {
+  beforeCreate() {
+    this.uuid = Z.toString(), Z += 1;
+  }
+}, Ae = { key: 0 };
+function Fe(e, t, p, u, m, c) {
+  return v(), L("svg", j({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (v(), L("title", Ae, U(e.$attrs["svg-title"]), 1)) : O("", !0),
+    t[0] || (t[0] = R("path", {
+      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"
+    }, null, -1)),
+    t[1] || (t[1] = R("path", {
+      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"
+    }, null, -1)),
+    t[2] || (t[2] = R("path", {
+      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"
+    }, null, -1))
+  ], 16);
+}
+const He = /* @__PURE__ */ T(We, [["render", Fe]]), Ue = N({
+  i18n: { messages: V },
+  name: "bento-menu",
+  components: { BentoToggleButton: ke, BentoPopover: fe, BentoTeleport: Me, MenuItemList: Ke, OptionsVerticalIcon: He },
+  props: {
+    /**
+     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
+     */
+    button: {
+      type: Object,
+      default: () => ({
+        variant: "secondary"
+      })
+    },
+    /**
+     * Controls if the menu should close when an item is clicked.
+     * Defaults to `true`.
+     */
+    closeMenuOnItemSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Disables opening the menu when the down arrow key is pressed.
+     */
+    disableArrowDownOpeningMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The position of where the menu should open.
+     */
+    menuPosition: {
+      type: String,
+      default: Y.BOTTOM_START,
+      validator: (e) => Object.values(Y).includes(e)
+    },
+    /**
+     * Instructs the menu popover to be visible outside of the containing container.
+     * @see {@link https://floating-ui.com/docs/usefloating#strategy}
+     */
+    menuFixedPositioning: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets a custom width for the menu popover.
+     */
+    menuWidth: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Returns focus to the menu button after popover is closed.
+     * Disable if focus management is delegated to the parent component.
+     * Defaults to `true`.
+     */
+    revertFocusToButton: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * 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).
+     */
+    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: [M.CLOSE, M.OPEN, "menu-item-click", "click-outside"],
+  setup(e, { emit: t, expose: p, slots: u }) {
+    var P;
+    const { t: m } = ye({ messages: V }), c = d(null), i = d(null), l = d(!1), a = d(!1), n = d(null), o = X("menu"), s = X("menu-popover"), f = ee(Be, d(!1));
+    me(pe, f);
+    const b = _(() => ({
+      "b-menu--inverse": f.value
+    })), y = _(() => e.menuWidth ? { width: `${e.menuWidth}px` } : null), k = _(() => {
+      if (e != null && e.button)
+        return {
+          variant: "secondary",
+          ...e.button
+        };
+    }), S = () => {
+      l.value = !0, t(M.OPEN);
+    }, w = async (r = e.revertFocusToButton) => {
+      var h, $;
+      l.value && (l.value = !1, r && (await q(), ($ = (h = c.value) == null ? void 0 : h.$el) == null || $.focus()), t(M.CLOSE));
+    }, D = (r) => {
+      r.stopPropagation(), l.value ? w() : S();
+    }, W = (r) => {
+      r.preventDefault(), a.value = !1, e.disableArrowDownOpeningMenu || S();
+    }, A = (r) => {
+      r.preventDefault(), a.value = !0, S();
+    }, F = () => {
+      t("menu-item-click");
+    };
+    return ve(
+      n,
+      () => {
+        w(), t("click-outside");
+      },
+      {
+        ...e.closeOnClickOutsideOptions,
+        ignore: [c, ...((P = e.closeOnClickOutsideOptions) == null ? void 0 : P.ignore) ?? []]
+      }
+    ), p({
+      /**
+       * Control to enable programmatic closing of the menu
+       */
+      closeMenu: w
+    }), {
+      // Refs
+      popoverRef: n,
+      menuButtonRef: c,
+      menuItemListRef: i,
+      // Values
+      menuId: o,
+      popoverId: s,
+      showMenu: l,
+      computedButtonPropsWithDefaults: k,
+      computedMenuWidth: y,
+      isLastElementFocused: a,
+      // Classes
+      computedClasses: b,
+      isInverseColorSet: f,
+      // Methods
+      hasSlot: be(u),
+      onKeyDown: W,
+      onKeyUp: A,
+      closeMenu: w,
+      menuItemClick: F,
+      toggleShowMenu: D,
+      // Translations
+      t: m
+    };
+  }
+});
+function Ve(e, t, p, u, m, c) {
+  const i = C("options-vertical-icon"), l = C("bento-toggle-button"), a = C("menu-item-list"), n = C("bento-popover"), o = C("bento-teleport");
+  return v(), L("div", {
+    class: Q([e.computedClasses, "b-menu"]),
+    "data-testid": "menu",
+    onKeydown: [
+      t[0] || (t[0] = g((...s) => e.onKeyDown && e.onKeyDown(...s), ["down"])),
+      t[1] || (t[1] = g((...s) => e.onKeyUp && e.onKeyUp(...s), ["up"])),
+      t[2] || (t[2] = g((s) => e.closeMenu(), ["esc"]))
+    ]
+  }, [
+    E(l, j({
+      ref: "menuButtonRef",
+      "aria-haspopup": "true"
+    }, e.computedButtonPropsWithDefaults, {
+      "aria-controls": e.showMenu ? e.menuId : null,
+      toggled: e.showMenu,
+      inverse: e.isInverseColorSet,
+      onClick: e.toggleShowMenu
+    }), x({ _: 2 }, [
+      !e.hasSlot("default") || e.hasSlot("iconLeft") ? {
+        name: "iconLeft",
+        fn: I(() => [
+          K(e.$slots, "iconLeft", {}, () => [
+            E(i, {
+              title: e.t("menuButton")
+            }, null, 8, ["title"])
+          ], !0)
+        ]),
+        key: "0"
+      } : void 0,
+      e.hasSlot("default") ? {
+        name: "default",
+        fn: I(() => [
+          K(e.$slots, "default", {}, void 0, !0)
+        ]),
+        key: "1"
+      } : void 0,
+      e.hasSlot("iconRight") ? {
+        name: "iconRight",
+        fn: I(() => [
+          K(e.$slots, "iconRight", {}, void 0, !0)
+        ]),
+        key: "2"
+      } : void 0
+    ]), 1040, ["aria-controls", "toggled", "inverse", "onClick"]),
+    e.menuButtonRef ? (v(), B(o, {
+      key: 0,
+      disabled: !e.teleport
+    }, {
+      default: I(() => [
+        e.menuButtonRef ? (v(), B(n, {
+          key: 0,
+          id: e.menuId,
+          ref: "popoverRef",
+          role: null,
+          open: e.showMenu,
+          class: "b-menu__popover",
+          style: oe(e.computedMenuWidth),
+          "target-element": e.menuButtonRef,
+          position: e.menuPosition,
+          "fixed-positioning": e.menuFixedPositioning,
+          "fallback-position": [
+            "bottom-start",
+            "bottom-end",
+            "top-start",
+            "top-end",
+            "right-start",
+            "right-end",
+            "left-start",
+            "left-end"
+          ],
+          teleport: e.teleport,
+          "without-space": ""
+        }, {
+          default: I(() => [
+            E(a, {
+              ref: "menuItemListRef",
+              "close-menu-on-item-select": e.closeMenuOnItemSelect,
+              data: e.data,
+              "focus-last-element": e.isLastElementFocused,
+              onClose: e.closeMenu,
+              onMenuItemClick: e.menuItemClick
+            }, null, 8, ["close-menu-on-item-select", "data", "focus-last-element", "onClose", "onMenuItemClick"])
+          ]),
+          _: 1
+        }, 8, ["id", "open", "style", "target-element", "position", "fixed-positioning", "teleport"])) : O("", !0)
+      ]),
+      _: 1
+    }, 8, ["disabled"])) : O("", !0)
+  ], 34);
+}
+const ut = /* @__PURE__ */ T(Ue, [["render", Ve], ["__scopeId", "data-v-e0770132"]]);
+export {
+  ut as B,
+  $e as D,
+  Be as M,
+  He as O,
+  M as a
+};
+//# sourceMappingURL=menu.BcXV6WhV.js.map