@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/chunks/{dropdown.c05678d0.js → dropdown.fd93f0ce.js}

@@ -1,80 +1,81 @@
-import { ref as b, watch as j, computed as d, defineComponent as A, toRefs as le, nextTick as S, toRef as O } from "vue";
-import { D as ae, a as C, b as R, c as se } from "./dropdown-default-textbox.819e43f7.js";
-import { n as $ } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ie, d as re, a as de } from "./index.56858f4e.js";
-import { g as L } from "./unique-id.a2a2b458.js";
-import { a as i, B as I, b as D } from "./listbox.116ed0c1.js";
-import { B as w, a as ue } from "./debounce.f8d92e44.js";
-import { u as ce } from "./use-form-layout-loading.d03e5d48.js";
-import { PopperContainer as T, PopperContainerPosition as W } from "../popper-container.js";
-import { u as V } from "./i18n.155748d6.js";
-import { BentoPopover as k, BentoPopoverPositions as z } from "../popover.js";
-import { c as q } from "./button-actions.bd397c79.js";
-import { E as fe } from "./error-message.0433b539.js";
-import { B as pe } from "./directive.0408e565.js";
+import { ref as b, watch as V, computed as c, defineComponent as F, toRefs as J, nextTick as C, toRef as L } from "vue";
+import { D as re, a as $, b as A, c as de } from "./dropdown-default-textbox.109c36d2.js";
+import { n as B } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as ue, d as ce } from "./index.45295dd3.js";
+import { g as R } from "./unique-id.a2a2b458.js";
+import { u as K } from "./i18n.155748d6.js";
+import { u as fe } from "./aria-label.ac9651a5.js";
+import { a as s, B as M, b as P } from "./listbox.e792d2d6.js";
+import { B as O, a as pe } from "./debounce.f8d92e44.js";
+import { u as ve } from "./use-form-layout-loading.d03e5d48.js";
+import { PopperContainer as N } from "../popper-container.js";
+import { BentoPopover as U } from "../popover.js";
+import { BentoButtonActionsLayout as _e } from "../button.js";
+import { E as be } from "./error-message.3b3c33d4.js";
+import { B as me } from "./directive.0408e565.js";
 import "../assets/dropdown.css";
 var E = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(E || {});
-const ve = {
+const ye = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, _e = (t, e, n) => {
-  const o = b(t.value), { t: l } = V();
-  j(t, () => {
-    o.value = t.value;
+}, ge = (t, e, n) => {
+  const l = b(t.value), { t: a } = K();
+  V(t, () => {
+    l.value = t.value;
   });
-  const a = d(
-    () => JSON.stringify(o.value) === JSON.stringify(t.value)
-  ), s = () => {
-    n(i.SELECT, o.value), n(i.CLOSE_DROPDOWN);
-  }, r = () => {
-    o.value = t.value, n(i.CLOSE_DROPDOWN);
-  }, u = d(() => [
+  const o = c(
+    () => JSON.stringify(l.value) === JSON.stringify(t.value)
+  ), r = () => {
+    n(s.SELECT, l.value), n(s.CLOSE_DROPDOWN);
+  }, d = () => {
+    l.value = t.value, n(s.CLOSE_DROPDOWN);
+  }, i = c(() => [
     {
-      title: l("apply"),
-      event: s,
-      disabled: a.value
+      title: a("apply"),
+      event: r,
+      disabled: o.value
     },
     {
-      title: l("cancel"),
-      event: r
+      title: a("cancel"),
+      event: d
     }
-  ]), c = (f) => {
-    o.value = f, e.value || n(i.SELECT, f);
-  }, _ = (f) => {
-    c(f), n(i.TAB);
-  }, m = (f) => {
-    c(f), n(i.ENTER);
-  }, x = (f) => {
-    c(f), n(i.SPACE);
-  }, p = () => {
-    r(), n(i.ESCAPE);
-  }, g = () => {
-    n(i.SHOW_MORE);
-  }, h = {
-    [i.SELECT]: c,
-    [i.SHOW_MORE]: g,
-    [i.TAB]: _,
-    [i.SPACE]: x,
-    [i.ENTER]: m
+  ]), p = (v) => {
+    l.value = v, e.value || n(s.SELECT, v);
+  }, h = (v) => {
+    p(v), n(s.TAB);
+  }, m = (v) => {
+    p(v), n(s.ENTER);
+  }, x = (v) => {
+    p(v), n(s.SPACE);
+  }, y = () => {
+    d(), n(s.ESCAPE);
+  }, w = () => {
+    n(s.SHOW_MORE);
+  }, S = {
+    [s.SELECT]: p,
+    [s.SHOW_MORE]: w,
+    [s.TAB]: h,
+    [s.SPACE]: x,
+    [s.ENTER]: m
   };
   return {
     // Values
-    actions: u,
-    internalSelectedValue: o,
+    actions: i,
+    internalSelectedValue: l,
     // Methods
-    listeners: h,
-    onEscapeKey: p
+    listeners: S,
+    onEscapeKey: y
   };
-}, me = A({
-  i18n: { messages: ve },
+}, xe = F({
+  i18n: { messages: ye },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: I,
-    PopperContainer: T,
-    BentoPopover: k
+    BentoListbox: M,
+    PopperContainer: N,
+    BentoPopover: U
   },
   props: {
     /**
@@ -108,7 +109,6 @@ const ve = {
     },
     /**
      * Dropdown input size
-     * @see BentoDropdownSize
      */
     inputSize: {
       type: String,
@@ -136,8 +136,8 @@ const ve = {
      */
     lazyLoadType: {
       type: String,
-      default: D.AUTOMATIC,
-      validator: (t) => Object.values(D).includes(t)
+      default: P.AUTOMATIC,
+      validator: (t) => Object.values(P).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -163,138 +163,137 @@ const ve = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: I.props.searching,
+    searching: M.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: T.props.targetElement.type, required: !0 }
+    targetElement: { type: N.props.targetElement.type, required: !0 }
   },
   emits: [
-    i.CLOSE_DROPDOWN,
-    i.SHOW_MORE,
-    i.SELECT,
-    i.ENTER,
-    i.ESCAPE,
-    i.SPACE,
-    i.TAB
+    s.CLOSE_DROPDOWN,
+    s.SHOW_MORE,
+    s.SELECT,
+    s.ENTER,
+    s.ESCAPE,
+    s.SPACE,
+    s.TAB
   ],
   setup(t, { emit: e, slots: n }) {
-    const { selectedValue: o, multiple: l } = le(t), a = b(null), { t: s } = V(), r = d(() => t.open && !t.disabled), u = d(() => s("noOptionsMatchThisSearch")), c = d(() => ({
+    const { selectedValue: l, multiple: a } = J(t), o = b(null), { t: r } = K(), d = c(() => t.open && !t.disabled), i = c(() => r("noOptionsMatchThisSearch")), p = c(() => ({
+      "b-dropdown-options-container--single": !(t != null && t.multiple)
+    })), h = c(() => ({
       "b-dropdown-options-container__listbox--small": t.inputSize === E.SMALL,
       "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: _, internalSelectedValue: m, listeners: x, onEscapeKey: p } = _e(
-      o,
+    })), { actions: m, internalSelectedValue: x, listeners: y, onEscapeKey: w } = ge(
       l,
+      a,
       e
-    ), g = d(
-      () => t != null && t.multiple ? k : T
-    ), h = d(
+    ), S = c(
+      () => t != null && t.multiple ? U : N
+    ), v = c(
       () => {
-        var f;
+        var D;
         return t != null && t.multiple ? {
-          actionsLayout: q.SPACE_BETWEEN,
-          actions: _.value,
+          actionsLayout: _e.SPACE_BETWEEN,
+          actions: m.value,
           divider: !0,
-          id: L(`dropdown-options-${t.id}`),
+          id: R(`dropdown-options-${t.id}`),
           open: t.open,
-          position: z.BOTTOM_START,
-          style: { width: `${(f = t == null ? void 0 : t.targetElement) == null ? void 0 : f.clientWidth}px` },
+          position: "bottom-start",
+          style: { width: `${(D = t == null ? void 0 : t.targetElement) == null ? void 0 : D.clientWidth}px` },
           targetElement: t.targetElement
         } : {
           matchWidth: !0,
           offset: [0, 8],
-          position: W.BOTTOM_START,
-          style: { display: r.value ? "block" : "none" },
+          position: "bottom-start",
+          style: { display: d.value ? "block" : "none" },
           targetElement: t.targetElement
         };
       }
     );
     return {
       // Values
-      isDropdownOpen: r,
-      conditionalListboxClasses: c,
-      noResultsMessage: u,
+      isDropdownOpen: d,
+      conditionalClasses: p,
+      conditionalListboxClasses: h,
+      noResultsMessage: i,
       slots: n,
-      actions: _,
-      internalSelectedValue: m,
+      actions: m,
+      internalSelectedValue: x,
       // Component wrapper
-      popperContainerOrPopoverComponent: g,
-      popperContainerOrPopoverProps: h,
+      popperContainerOrPopoverComponent: S,
+      popperContainerOrPopoverProps: v,
       // Refs
-      dropdownOptionsListboxRef: a,
-      // Enums
-      BentoButtonActionsLayout: q,
-      BentoPopoverPositions: z,
-      PopperContainerPosition: W,
+      dropdownOptionsListboxRef: o,
       // Events
-      onEscapeKey: p,
-      listeners: x
+      onEscapeKey: w,
+      listeners: y
     };
   }
 });
-var ye = function() {
+var he = function() {
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container" }, "component", e.popperContainerOrPopoverProps, !1), [n("div", { on: { keydown: function(o) {
-    return !o.type.indexOf("key") && e._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [n("bento-listbox", e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems }, scopedSlots: e._u([e._l(e.slots, function(o, l) {
-    return { key: l, fn: function(a) {
-      return [e._t(l, null, null, a)];
+  return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [n("div", { on: { keydown: function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
+  } } }, [n("bento-listbox", e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
+    return { key: a, fn: function(o) {
+      return [e._t(a, null, null, o)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, be = [], ge = /* @__PURE__ */ $(
-  me,
-  ye,
-  be,
+}, we = [], Se = /* @__PURE__ */ B(
+  xe,
+  he,
+  we,
   !1,
   null,
-  "5fc31fae",
+  "96a1f953",
   null,
   null
 );
-const xe = ge.exports;
-let U = 0;
-const he = {
+const Oe = Se.exports;
+let H = 0;
+const Ce = {
   beforeCreate() {
-    this.uuid = U.toString(), U += 1;
+    this.uuid = H.toString(), H += 1;
   }
 };
-var we = function() {
+var Ee = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ 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", "fill-rule": "evenodd", d: "M4.4697 5.96967C4.76259 5.67678 5.23747 5.67678 5.53036 5.96967L8.00003 8.43934L10.4697 5.96967C10.7626 5.67678 11.2375 5.67678 11.5304 5.96967C11.8233 6.26256 11.8233 6.73744 11.5304 7.03033L8.53036 10.0303C8.23747 10.3232 7.76259 10.3232 7.4697 10.0303L4.4697 7.03033C4.17681 6.73744 4.17681 6.26256 4.4697 5.96967Z", "clip-rule": "evenodd" } })]);
-}, Se = [], Ee = /* @__PURE__ */ $(
-  he,
-  we,
-  Se,
+}, Le = [], $e = /* @__PURE__ */ B(
+  Ce,
+  Ee,
+  Le,
   !1,
   null,
   "18645fe6",
   null,
   null
 );
-const Oe = Ee.exports;
-let H = 0;
-const Ce = {
+const De = $e.exports;
+let j = 0;
+const Re = {
   beforeCreate() {
-    this.uuid = H.toString(), H += 1;
+    this.uuid = j.toString(), j += 1;
   }
 };
-var Le = function() {
+var Be = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ 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", "fill-rule": "evenodd", d: "M11.5303 10.0303C11.2374 10.3232 10.7626 10.3232 10.4697 10.0303L8 7.56066L5.53033 10.0303C5.23744 10.3232 4.76256 10.3232 4.46967 10.0303C4.17678 9.73744 4.17678 9.26256 4.46967 8.96967L7.46967 5.96967C7.61032 5.82902 7.80109 5.75 8 5.75C8.19891 5.75 8.38968 5.82902 8.53033 5.96967L11.5303 8.96967C11.8232 9.26256 11.8232 9.73744 11.5303 10.0303Z", "clip-rule": "evenodd" } })]);
-}, $e = [], De = /* @__PURE__ */ $(
-  Ce,
-  Le,
-  $e,
+}, Ie = [], Te = /* @__PURE__ */ B(
+  Re,
+  Be,
+  Ie,
   !1,
   null,
   "6f20d431",
   null,
   null
 );
-const Be = De.exports, Re = A({
+const Ae = Te.exports, Ne = F({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Oe, ChevronUpSmallIcon: Be, DropdownBaseTextbox: ae },
+  components: { ChevronDownSmallIcon: De, ChevronUpSmallIcon: Ae, DropdownBaseTextbox: re },
   inheritAttrs: !1,
   props: {
     /**
@@ -366,160 +365,174 @@ const Be = De.exports, Re = A({
      */
     value: { type: String, default: "" }
   },
-  emits: [C.OPEN, C.CLOSE],
+  emits: [$.OPEN, $.CLOSE],
   setup(t, { emit: e }) {
-    const n = d(() => ({
-      [`b-dropdown-small-textbox--${R.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${R.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${R.OPENED}`]: t.open
-    })), o = d(() => t.open && !t.disabled && !t.readonly), l = () => {
-      e(C.OPEN);
-    }, a = () => {
-      e(C.CLOSE);
-    }, s = {
-      [C.OPEN]: l,
-      [C.CLOSE]: a
+    const n = c(() => ({
+      [`b-dropdown-small-textbox--${A.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${A.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${A.OPENED}`]: t.open
+    })), l = c(() => t.open && !t.disabled && !t.readonly), a = () => {
+      e($.OPEN);
+    }, o = () => {
+      e($.CLOSE);
+    }, r = {
+      [$.OPEN]: a,
+      [$.CLOSE]: o
     };
     return {
       // Values
       conditionalClasses: n,
-      isDropdownOpen: o,
+      isDropdownOpen: l,
       // Events
-      listeners: s
+      listeners: r
     };
   }
 });
-var Te = function() {
+var Me = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [n("dropdown-base-textbox", e._g(e._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: e._u([{ key: "icon", fn: function() {
     return [n("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [n("chevron-up-small-icon", { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), n("chevron-down-small-icon", { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), e.listeners))], 1);
-}, Ie = [], Ae = /* @__PURE__ */ $(
-  Re,
-  Te,
-  Ie,
+}, Pe = [], Fe = /* @__PURE__ */ B(
+  Ne,
+  Me,
+  Pe,
   !1,
   null,
   "d9e6eff4",
   null,
   null
 );
-const Ne = Ae.exports;
-function Pe(t, e, n) {
-  const o = b(t), l = b(e), a = (r, u = []) => u.flatMap((c) => c.label.toLocaleLowerCase().includes(r) ? [c, ...a(r, c.items)] : c.items ? [...a(r, c.items)] : []);
-  return j(o, () => {
-    n !== void 0 && n(o.value);
-  }), d(() => {
-    if (!o.value || n !== void 0)
-      return l.value;
-    const r = o.value.toLocaleLowerCase();
-    return a(r, l.value);
+const Ke = Fe.exports;
+function ke(t, e, n) {
+  const l = b(t), a = b(e), o = (d, i = []) => i.flatMap((p) => p.label.toLocaleLowerCase().includes(d) ? [p, ...o(d, p.items)] : p.items ? [...o(d, p.items)] : []);
+  return V(l, () => {
+    n !== void 0 && n(l.value);
+  }), c(() => {
+    if (!l.value || n !== void 0)
+      return a.value;
+    const d = l.value.toLocaleLowerCase();
+    return o(d, a.value);
   });
 }
-const Me = ({ items: t, placeholder: e, selectedValue: n }) => {
-  const o = t.value.find(({ value: l }) => l === n.value);
-  return (o == null ? void 0 : o.label) || e.value || null;
-}, Fe = ({ selectedValues: t, items: e, placeholder: n }) => t.value ? t.value.map((o) => {
-  const { label: l } = e.value.find(({ value: a }) => a === o);
-  return l;
-}).join(", ") : n.value || null, Ke = ({ selectedValues: t, items: e, placeholder: n }) => {
-  var o;
-  return (o = t.value) != null && o.length ? e.value.reduce((l, a) => {
-    if (a.items) {
-      const s = a.items.filter(
-        (u) => t.value.includes(u.value)
+const We = ({ items: t, placeholder: e, selectedValue: n }) => {
+  const l = t.value.find(({ value: a }) => a === n.value);
+  return (l == null ? void 0 : l.label) || e.value || null;
+}, ze = ({ selectedValues: t, items: e, placeholder: n }) => {
+  var l;
+  return !t.value || ((l = t.value) == null ? void 0 : l.length) === 0 ? n.value || null : t.value.map((a) => {
+    const { label: o } = e.value.find(({ value: r }) => r === a);
+    return o;
+  }).join(", ");
+}, qe = ({ selectedValues: t, items: e, placeholder: n }) => {
+  var l;
+  return !t.value || !((l = t.value) != null && l.length) ? n.value || null : e.value.reduce((a, o) => {
+    if (o.items) {
+      const r = o.items.filter(
+        (i) => t.value.includes(i.value)
       );
-      s.length === a.items.length ? l.push(a.label) : s.forEach(({ label: u }) => l.push(u));
+      r.length === o.items.length ? a.push(o.label) : r.forEach(({ label: i }) => a.push(i));
     }
-    return t.value.includes(a.value) && l.push(a.label), l;
-  }, []).join(", ") : n.value || null;
-}, We = ({ items: t, placeholder: e, value: n, multiple: o }) => {
-  const l = d(() => t.value.find((s) => {
-    var r;
-    return (r = s.items) == null ? void 0 : r.length;
+    return t.value.includes(o.value) && a.push(o.label), a;
+  }, []).join(", ");
+}, Ue = ({ items: t, placeholder: e, value: n, multiple: l }) => {
+  const a = c(() => t.value.find((r) => {
+    var d;
+    return (d = r.items) == null ? void 0 : d.length;
   }));
-  return d(() => o.value ? l.value ? Ke({ selectedValues: n, placeholder: e, items: t }) : Fe({ selectedValues: n, items: t, placeholder: e }) : Me({ items: t, placeholder: e, selectedValue: n }));
-}, ke = {
+  return c(() => l.value ? a.value ? qe({ selectedValues: n, placeholder: e, items: t }) : ze({ selectedValues: n, items: t, placeholder: e }) : We({ items: t, placeholder: e, selectedValue: n }));
+}, He = {
   "en-US": {
     optional: "optional",
     required: "required",
-    clearSearch: "Clear filter"
+    clearSearch: "Clear filter",
+    ariaLabelFallback: "Dropdown"
   }
-}, J = (t) => {
-  t.value.$children[0].$refs.textbox.focus();
-}, ze = ({
+}, Z = (t) => {
+  var e;
+  (e = t.value.$children) == null || e[0].$refs.textbox.focus();
+}, je = ({
   inputContainerRef: t,
   optionsContainerRef: e,
   selectedValueIndex: n,
-  isDropdownOpen: o,
-  isDynamicFltering: l,
-  items: a,
-  isMultiple: s
-}, r, u, c) => {
-  const _ = ({ detail: y }) => {
-    y.preventDefault(), o.value || (u(), S(() => {
-      s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
+  isDropdownOpen: l,
+  isDynamicFltering: a,
+  items: o,
+  isMultiple: r
+}, d, i, p) => {
+  const h = ({ detail: u }) => {
+    u.preventDefault(), l.value || (i(), C(() => {
+      var f, g;
+      r ? (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[n.value].$el.focus();
     }));
-  }, m = ({ detail: y }) => {
-    y.preventDefault(), o.value || (u(), S(() => {
-      e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
+  }, m = ({ detail: u }) => {
+    u.preventDefault(), l.value || (i(), C(() => {
+      var f;
+      (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     }));
   }, x = () => {
-    o.value || (u(), S(() => {
-      if (s) {
-        const y = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[y.length - 1].$children[a.length - 1].$el.focus();
+    l.value || (i(), C(() => {
+      var u, f;
+      if (r) {
+        const g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[g.length - 1].$children[o.length - 1].$el.focus();
       } else
-        e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[a.length - 1].$el.focus();
+        (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[o.length - 1].$el.focus();
     }));
-  }, p = () => {
-    o.value && (c(), J(t));
-  }, g = () => {
-    o.value || u(), S(() => {
-      e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
+  }, y = () => {
+    l.value && (p(), Z(t));
+  }, w = () => {
+    l.value || i(), C(() => {
+      var u;
+      (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
     });
-  }, h = ({ detail: y }) => {
-    y.preventDefault(), r(), o.value && S(() => {
-      s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
+  }, S = ({ detail: u }) => {
+    u.preventDefault(), d(), l.value && C(() => {
+      var f, g;
+      r ? (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[n.value].$el.focus();
     });
-  }, f = () => {
-    r(), o.value && S(() => {
-      s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
+  }, v = () => {
+    d(), l.value && C(() => {
+      var u, f;
+      r ? (u = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[n.value].$el.focus();
     });
   };
-  return d(() => ({
-    ...l.value ? {} : { [w.SPACE]: h },
-    [w.ENTER]: f,
-    [w.ARROW_DOWN]: _,
-    [w.ARROW_UP]: m,
-    [w.END]: x,
-    [w.ESCAPE]: p,
-    [w.HOME]: g
+  return c(() => ({
+    ...a.value ? {} : { [O.SPACE]: S },
+    [O.ENTER]: v,
+    [O.ARROW_DOWN]: h,
+    [O.ARROW_UP]: m,
+    [O.END]: x,
+    [O.ESCAPE]: y,
+    [O.HOME]: w
   }));
-}, qe = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
-  const o = () => {
-    e.value && n(), S(() => {
-      J(t);
+}, Ve = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
+  const l = () => {
+    e.value && n(), C(() => {
+      Z(t);
     });
   };
   return {
-    [i.ENTER]: o,
-    [i.ESCAPE]: o,
-    [i.TAB]: o,
-    [i.SPACE]: o
+    [s.ENTER]: l,
+    [s.ESCAPE]: l,
+    [s.TAB]: l,
+    [s.SPACE]: l
   };
-}, Ue = A({
-  i18n: { messages: ke },
+}, Je = F({
+  i18n: { messages: He },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: xe,
-    BentoTypography: ie,
-    DropdownInputDefault: se,
-    DropdownInputSmall: Ne,
-    ErrorMessage: fe
+    BentoDropdownOptionsContainer: Oe,
+    BentoTypography: ue,
+    DropdownInputDefault: de,
+    DropdownInputSmall: Ke,
+    ErrorMessage: be
   },
-  directives: { BentoClickOutsideDirective: pe, BentoKeyboardNavigationDirective: ue },
+  directives: { BentoClickOutsideDirective: me, BentoKeyboardNavigationDirective: pe },
   props: {
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Defines a string value that labels an interactive element.
      */
@@ -598,8 +611,8 @@ const Me = ({ items: t, placeholder: e, selectedValue: n }) => {
      */
     lazyLoadType: {
       type: String,
-      default: I.props.lazyLoadType.default,
-      validator: (t) => Object.values(D).includes(t)
+      default: M.props.lazyLoadType.default,
+      validator: (t) => Object.values(P).includes(t)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -623,7 +636,7 @@ const Me = ({ items: t, placeholder: e, selectedValue: n }) => {
     showSlotContentInMultiple: { type: Boolean, default: !1 },
     /**
      * Dropdown input size
-     * @see BentoDropdownSize
+     * * @see BentoDropdownSize
      */
     size: {
       type: String,
@@ -648,138 +661,141 @@ const Me = ({ items: t, placeholder: e, selectedValue: n }) => {
       default: void 0
     }
   },
-  emits: ["input", i.SHOW_MORE],
-  setup(t, { emit: e, slots: n }) {
-    var K;
-    const o = b(null), l = b(null), a = b(null), s = b(!1), r = L("bento-dropdown-options-container"), u = L("dropdown-label"), c = L("dropdown-description"), _ = L("dropdown-error"), { isReadOnly: m } = ce(O(t, "readonly")), x = d(() => ({
+  emits: ["input", s.SHOW_MORE],
+  setup(t, { attrs: e, emit: n, slots: l }) {
+    var q;
+    const { t: a } = K(), o = b(null), r = b(null), d = b(null), i = b(!1), p = R("bento-dropdown-options-container"), h = R("dropdown-label"), m = R("dropdown-description"), x = R("dropdown-error"), { isReadOnly: y } = ve(L(t, "readonly")), w = b(e["aria-label"]), { ariaLabel: S } = J(t), v = fe({
+      ariaLabel: w.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: S,
+      defaultFallback: a("ariaLabelFallback")
+    }), D = c(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), p = b(""), g = O(t, "items"), h = Pe(p, g, (K = t == null ? void 0 : t.search) == null ? void 0 : K.searchEvent), f = d(() => t.dynamicFiltering && !!p.value), N = We({
-      items: g,
-      multiple: O(t, "multiple"),
-      placeholder: O(t, "placeholder"),
-      value: O(t, "value")
-    }), y = d(
+    })), u = b(""), f = L(t, "items"), g = ke(u, f, (q = t == null ? void 0 : t.search) == null ? void 0 : q.searchEvent), I = c(() => t.dynamicFiltering && !!u.value), Y = Ue({
+      items: f,
+      multiple: L(t, "multiple"),
+      placeholder: L(t, "placeholder"),
+      value: L(t, "value")
+    }), G = c(() => t.size === E.DEFAULT), Q = c(
       () => t != null && t.multiple ? t.items.filter(
-        ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
-      ) : t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value))
-    ), Z = d(() => {
-      const v = t.items.findIndex(({ value: oe }) => t.value === oe);
-      return v > 0 ? v : 0;
-    }), Y = d(() => {
-      var v;
-      return t.multiple ? (v = t == null ? void 0 : t.value) == null ? void 0 : v.length : null;
-    }), G = d(
-      () => `${t.description ? c : ""} ${t.errorMessage ? _ : ""}`.trim() || null
-    ), Q = () => {
-      m.value || (s.value = !0);
-    }, B = () => {
-      s.value = !1;
-    }, P = () => {
-      m.value || (s.value = !s.value, f.value && (p.value = ""));
-    }, X = () => {
-      f.value && (p.value = ""), s.value && (s.value = !1);
-    }, M = (v) => {
-      t.multiple || (p.value = "", s.value = !1), e("input", v);
-    }, F = () => {
-      e(i.SHOW_MORE);
-    }, ee = ze(
+        ({ value: _ }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(_)
+      ) : t.items.find(({ value: _ }) => _ === (t == null ? void 0 : t.value))
+    ), X = c(() => {
+      const _ = t.items.findIndex(({ value: ie }) => t.value === ie);
+      return _ > 0 ? _ : 0;
+    }), ee = c(() => {
+      var _;
+      return t.multiple ? (_ = t == null ? void 0 : t.value) == null ? void 0 : _.length : null;
+    }), te = c(
+      () => `${t.description ? m : ""} ${t.errorMessage ? x : ""}`.trim() || null
+    ), ne = () => {
+      y.value || (i.value = !0);
+    }, T = () => {
+      i.value = !1;
+    }, k = () => {
+      y.value || (i.value = !i.value, I.value && (u.value = ""));
+    }, le = () => {
+      I.value && (u.value = ""), i.value && (i.value = !1);
+    }, W = (_) => {
+      t.multiple || (u.value = "", i.value = !1), n("input", _);
+    }, z = () => {
+      n(s.SHOW_MORE);
+    }, oe = je(
       {
         inputContainerRef: o,
-        optionsContainerRef: a,
-        selectedValueIndex: Z,
-        isDropdownOpen: s,
-        isDynamicFltering: O(t, "dynamicFiltering"),
+        optionsContainerRef: d,
+        selectedValueIndex: X,
+        isDropdownOpen: i,
+        isDynamicFltering: L(t, "dynamicFiltering"),
         items: t.items,
         isMultiple: t.multiple
       },
-      P,
-      Q,
-      B
-    ), te = qe(
+      k,
+      ne,
+      T
+    ), ae = Ve(
       {
         inputContainerRef: o,
-        isDropdownOpen: s
+        isDropdownOpen: i
       },
-      B
-    ), ne = {
-      [i.CLOSE_DROPDOWN]: B,
-      [i.SELECT]: M,
-      [i.SHOW_MORE]: F,
-      ...te
+      T
+    ), se = {
+      [s.CLOSE_DROPDOWN]: T,
+      [s.SELECT]: W,
+      [s.SHOW_MORE]: z,
+      ...ae
     };
-    return t.error && re(
+    return t.error && ce(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
-                    Having the field as "undefined" will hide/remove the error.
-                    <bento-dropdown errorMessage="Error message text" />`,
+                        Having the field as "undefined" will hide/remove the error.
+                        <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
     ), {
       // Values
-      additionalItemsSelected: Y,
-      isDropdownOpen: s,
-      displayValue: N,
-      dropdownOptionsContainerId: r,
-      filteredItems: h,
-      isSearching: f,
-      isReadOnly: m,
-      searchTerm: p,
-      labelId: u,
-      descriptionId: c,
-      errorId: _,
-      ariaDescribedBy: G,
-      selectedValueItem: y,
+      computedAriaLabel: v,
+      additionalItemsSelected: ee,
+      idDefaultSize: G,
+      isDropdownOpen: i,
+      displayValue: Y,
+      dropdownOptionsContainerId: p,
+      filteredItems: g,
+      isSearching: I,
+      isReadOnly: y,
+      searchTerm: u,
+      labelId: h,
+      descriptionId: m,
+      errorId: x,
+      ariaDescribedBy: te,
+      selectedValueItem: Q,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
       // The setup method and the "useSlots" composible define
       // { slots } as a proxy of $scopedSlots and $scopes in their
       // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
-      slots: n,
-      descriptionConditionalClasses: x,
+      slots: l,
+      descriptionConditionalClasses: D,
       // Refs
       inputContainerRef: o,
-      inputContainerRefWrapper: l,
-      optionsContainerRef: a,
+      inputContainerRefWrapper: r,
+      optionsContainerRef: d,
       // Events
-      closeOpenedDropdown: X,
-      toggleDropdown: P,
-      onOptionSelected: M,
-      emitShowMoreEvent: F,
-      textboxKeyboardNavigationListeners: ee,
-      listboxListeners: ne,
-      // Enums
-      BentoTypographyElement: de,
-      BentoDropdownSize: E,
-      BentoDropdownLazyLoadType: D
+      closeOpenedDropdown: le,
+      toggleDropdown: k,
+      onOptionSelected: W,
+      emitShowMoreEvent: z,
+      textboxKeyboardNavigationListeners: oe,
+      listboxListeners: se
     };
   }
 });
-var He = function() {
-  var o;
+var Ze = function() {
+  var l;
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeOpenedDropdown, expression: "closeOpenedDropdown" }], staticClass: "b-dropdown" }, [e.label ? n("div", { staticClass: "b-dropdown__label", attrs: { id: e.labelId } }, [n("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, ariaControls: e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.ariaLabel ? e.ariaLabel : null, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, disabled: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(l) {
-    e.searchTerm = l;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
-    return { key: a, fn: function(s) {
-      return [e._t(a, null, null, s)];
+  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeOpenedDropdown, expression: "closeOpenedDropdown" }], staticClass: "b-dropdown" }, [e.label ? n("div", { staticClass: "b-dropdown__label", attrs: { id: e.labelId } }, [n("bento-typography", { attrs: { el: "span", stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: "span" } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: "span" } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, ariaControls: e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, readonly: e.isReadOnly, disabled: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(a) {
+    e.searchTerm = a;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.ariaLabel, "debounce-time": (o = e.search) == null ? void 0 : o.debounceTime, disabled: e.disabled, "input-size": e.size, "is-option-disabled": e.isOptionDisabled, items: e.filteredItems, multiple: e.multiple, open: e.isDropdownOpen, "selected-value": e.value, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
-    return { key: a, fn: function(s) {
-      return [e._t(a, null, null, s)];
+  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "debounce-time": (l = e.search) == null ? void 0 : l.debounceTime, disabled: e.disabled, "input-size": e.size, "is-option-disabled": e.isOptionDisabled, items: e.filteredItems, multiple: e.multiple, open: e.isDropdownOpen, "selected-value": e.value, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
-  })], null, !0) }, e.listboxListeners)) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? n("bento-typography", { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
-}, je = [], Ve = /* @__PURE__ */ $(
-  Ue,
-  He,
-  je,
+  })], null, !0) }, e.listboxListeners)) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? n("bento-typography", { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
+}, Ye = [], Ge = /* @__PURE__ */ B(
+  Je,
+  Ze,
+  Ye,
   !1,
   null,
-  "ad005bba",
+  "ec4f9fd4",
   null,
   null
 );
-const rt = Ve.exports;
+const pt = Ge.exports;
 export {
-  rt as B,
+  pt as B,
   E as a,
-  Pe as u
+  ke as u
 };
-//# sourceMappingURL=dropdown.c05678d0.js.map
+//# sourceMappingURL=dropdown.fd93f0ce.js.map