@adyen/bento-vue2 1.10.0 → 1.11.1

package/dist/chunks/{dropdown.f784ac67.js → dropdown.7749c2d7.js}

@@ -1,82 +1,86 @@
-import { ref as y, watch as Z, computed as u, defineComponent as K, toRefs as Y, nextTick as C, toRef as L } from "vue";
-import { B as ve, d as pe } from "./index.858b0720.js";
+import { ref as y, watch as Z, computed as f, defineComponent as K, toRefs as Y, nextTick as C, toRef as O } from "vue";
+import { B as pe, d as me } from "./index.32095db1.js";
+import { D as be, a as D, b as N, c as ye } from "./dropdown-default-textbox.4b227b24.js";
+import { n as I } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import { g as B } from "./unique-id.a2a2b458.js";
-import { u as me } from "./aria-label.ac9651a5.js";
+import { u as _e } from "./aria-label.ac9651a5.js";
 import { u as W } from "./i18n.eb5b985b.js";
-import { u as be } from "./use-form-layout-loading.d03e5d48.js";
-import { a as s, B as F, b as k, u as ye } from "./listbox.163433c5.js";
-import { B as O, a as _e } from "./keyboard-navigation.ca47dfa8.js";
-import { u as ge } from "./use-has-slot.fbeb19ec.js";
-import { a as N } from "./index.7039d901.js";
-import { a as q } from "./index.ad4b770b.js";
-import { n as I } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { D as xe, a as $, b as P, c as he } from "./dropdown-default-textbox.a1240b9d.js";
-import { E as we, F as Se } from "./field-label.bdf22f47.js";
-import { B as Le } from "./directive.0408e565.js";
+import { u as ge } from "./use-form-layout-loading.d03e5d48.js";
+import { a as i, B as k, b as F, u as xe } from "./listbox.371743bc.js";
+import { B as L, a as we } from "./keyboard-navigation.ca47dfa8.js";
+import { u as he } from "./use-has-slot.fbeb19ec.js";
+import { a as P } from "./index.eede8742.js";
+import { a as q } from "./index.6a417137.js";
+import { B as G } from "./directive.0408e565.js";
+import { E as Se, F as Oe } from "./field-label.3019a2f3.js";
 import "../assets/dropdown.css";
 var E = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(E || {});
-const Oe = {
+const Le = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, Ce = (t, e, n) => {
-  const l = y(t.value), { t: o } = W();
+}, Ce = (t, e, n, l) => {
+  const a = y(t.value), { t: o } = W();
   Z(t, () => {
-    l.value = t.value;
+    a.value = t.value;
   });
-  const a = u(
-    () => 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 = u(() => [
+  const d = f(
+    () => JSON.stringify(a.value) === JSON.stringify(t.value)
+  ), u = () => {
+    l(i.SELECT, a.value), l(i.CLOSE_DROPDOWN);
+  }, s = () => {
+    a.value = t.value, l(i.CLOSE_DROPDOWN);
+  }, p = () => {
+    n.value && e.value && (a.value = t.value);
+  }, x = f(() => [
     {
       title: o("apply"),
-      event: r,
-      disabled: a.value
+      event: u,
+      disabled: d.value
     },
     {
       title: o("cancel"),
-      event: d
+      event: s
     }
-  ]), v = (p) => {
-    l.value = p, e.value || n(s.SELECT, p);
-  }, h = (p) => {
-    v(p), n(s.TAB);
-  }, _ = (p) => {
-    v(p), n(s.ENTER);
-  }, x = (p) => {
-    v(p), n(s.SPACE);
-  }, g = () => {
-    d(), n(s.ESCAPE);
-  }, w = () => {
-    n(s.SHOW_MORE);
-  }, S = {
-    [s.SELECT]: v,
-    [s.SHOW_MORE]: w,
-    [s.TAB]: h,
-    [s.SPACE]: x,
-    [s.ENTER]: _
+  ]), m = (r) => {
+    a.value = r, e.value || l(i.SELECT, r);
+  }, g = (r) => {
+    m(r), l(i.TAB);
+  }, _ = (r) => {
+    m(r), l(i.ENTER);
+  }, w = (r) => {
+    m(r), l(i.SPACE);
+  }, h = () => {
+    s(), l(i.ESCAPE);
+  }, S = () => {
+    l(i.SHOW_MORE);
+  }, $ = {
+    [i.SELECT]: m,
+    [i.SHOW_MORE]: S,
+    [i.TAB]: g,
+    [i.SPACE]: w,
+    [i.ENTER]: _
   };
   return {
     // Values
-    actions: i,
-    internalSelectedValue: l,
+    actions: x,
+    internalSelectedValue: a,
     // Methods
-    listeners: S,
-    onEscapeKey: g
+    listeners: $,
+    onEscapeKey: h,
+    onOutsideDropdownClick: p
   };
 }, Ee = K({
-  i18n: { messages: Oe },
+  i18n: { messages: Le },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: F,
-    PopperContainer: N,
+    BentoListbox: k,
+    PopperContainer: P,
     BentoPopover: q
   },
+  directives: { BentoClickOutsideDirective: G },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -143,8 +147,8 @@ const Oe = {
      */
     lazyLoadType: {
       type: String,
-      default: k.AUTOMATIC,
-      validator: (t) => Object.values(k).includes(t)
+      default: F.AUTOMATIC,
+      validator: (t) => Object.values(F).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -174,12 +178,12 @@ const Oe = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: F.props.searching,
+    searching: k.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: N.props.targetElement.type, required: !0 },
+    targetElement: { type: P.props.targetElement.type, required: !0 },
     /**
      * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
      * The itemHeight function is used to calculate the height of rendered item given it's index.
@@ -190,35 +194,31 @@ const Oe = {
     }
   },
   emits: [
-    s.CLOSE_DROPDOWN,
-    s.SHOW_MORE,
-    s.SELECT,
-    s.ENTER,
-    s.ESCAPE,
-    s.SPACE,
-    s.TAB
+    i.CLOSE_DROPDOWN,
+    i.SHOW_MORE,
+    i.SELECT,
+    i.ENTER,
+    i.ESCAPE,
+    i.SPACE,
+    i.TAB
   ],
   setup(t, { emit: e, slots: n }) {
-    const { selectedValue: l, multiple: o } = Y(t), a = y(null), { t: r } = W(), d = u(() => t.open && !t.disabled), i = u(() => r("noOptionsMatchThisSearch")), v = u(() => ({
+    const { selectedValue: l, multiple: a } = Y(t), o = y(null), { t: d } = W(), u = f(() => t.open && !t.disabled), s = f(() => d("noOptionsMatchThisSearch")), p = f(() => ({
       "b-dropdown-options-container--single": !(t != null && t.multiple)
-    })), h = u(() => ({
+    })), x = f(() => ({
       "b-dropdown-options-container__listbox--small": t.inputSize === E.SMALL,
       "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: _, internalSelectedValue: x, listeners: g, onEscapeKey: w } = Ce(
-      l,
-      o,
-      e
-    ), S = u(
-      () => t != null && t.multiple ? q : N
-    ), p = u(() => {
-      var f;
-      const D = {
-        "min-width": `${(f = t == null ? void 0 : t.targetElement) == null ? void 0 : f.clientWidth}px`,
+    })), { actions: m, internalSelectedValue: g, listeners: _, onEscapeKey: w, onOutsideDropdownClick: h } = Ce(l, a, u, e), S = f(
+      () => t != null && t.multiple ? q : P
+    ), $ = f(() => {
+      var c;
+      const r = {
+        "min-width": `${(c = t == null ? void 0 : t.targetElement) == null ? void 0 : c.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return t != null && t.multiple ? {
         actionsLayout: "space-between",
-        actions: _.value,
+        actions: m.value,
         divider: !0,
         fallbackPosition: ["top-start"],
         id: B(`dropdown-options-${t.id}`),
@@ -226,7 +226,7 @@ const Oe = {
         position: "bottom-start",
         style: {
           width: "auto",
-          ...D
+          ...r
         },
         targetElement: t.targetElement
       } : {
@@ -234,29 +234,30 @@ const Oe = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: d.value ? "block" : "none",
-          ...D
+          display: u.value ? "block" : "none",
+          ...r
         },
         targetElement: t.targetElement
       };
     });
     return {
       // Values
-      isDropdownOpen: d,
-      conditionalClasses: v,
-      conditionalListboxClasses: h,
-      noResultsMessage: i,
+      isDropdownOpen: u,
+      conditionalClasses: p,
+      conditionalListboxClasses: x,
+      noResultsMessage: s,
       slots: n,
-      actions: _,
-      internalSelectedValue: x,
+      actions: m,
+      internalSelectedValue: g,
       // Component wrapper
       popperContainerOrPopoverComponent: S,
-      popperContainerOrPopoverProps: p,
+      popperContainerOrPopoverProps: $,
       // Refs
-      dropdownOptionsListboxRef: a,
+      dropdownOptionsListboxRef: o,
       // Events
       onEscapeKey: w,
-      listeners: g
+      onOutsideDropdownClick: h,
+      listeners: _
     };
   }
 });
@@ -264,9 +265,9 @@ var $e = function() {
   var e = this, n = e._self._c;
   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, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": e.staticCategories, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(l, o) {
-    return { key: o, fn: function(a) {
-      return [e._t(o, null, null, a)];
+  } } }, [n("bento-listbox", e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": e.staticCategories, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, 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)]);
 }, De = [], Re = /* @__PURE__ */ I(
@@ -275,15 +276,15 @@ var $e = function() {
   De,
   !1,
   null,
-  "f198cd45",
+  "9f64e5d1",
   null,
   null
 );
 const Be = Re.exports;
-let V = 0;
+let J = 0;
 const Ie = {
   beforeCreate() {
-    this.uuid = V.toString(), V += 1;
+    this.uuid = J.toString(), J += 1;
   }
 };
 var Te = function() {
@@ -300,19 +301,19 @@ var Te = function() {
   null
 );
 const Ne = Me.exports;
-let J = 0;
+let V = 0;
 const Pe = {
   beforeCreate() {
-    this.uuid = J.toString(), J += 1;
+    this.uuid = V.toString(), V += 1;
   }
 };
-var Fe = function() {
+var ke = 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: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, ke = [], Ke = /* @__PURE__ */ I(
+}, Fe = [], Ke = /* @__PURE__ */ I(
   Pe,
-  Fe,
   ke,
+  Fe,
   !1,
   null,
   null,
@@ -321,7 +322,7 @@ var Fe = function() {
 );
 const We = Ke.exports, ze = K({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Ne, ChevronUpSmallIcon: We, DropdownBaseTextbox: xe },
+  components: { ChevronDownSmallIcon: Ne, ChevronUpSmallIcon: We, DropdownBaseTextbox: be },
   inheritAttrs: !1,
   props: {
     /**
@@ -393,26 +394,26 @@ const We = Ke.exports, ze = K({
      */
     value: { type: String, default: "" }
   },
-  emits: [$.OPEN, $.CLOSE],
+  emits: [D.OPEN, D.CLOSE],
   setup(t, { emit: e }) {
-    const n = u(() => ({
-      [`b-dropdown-small-textbox--${P.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${P.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${P.OPENED}`]: t.open
-    })), l = u(() => t.open && !t.disabled && !t.readonly), o = () => {
-      e($.OPEN);
-    }, a = () => {
-      e($.CLOSE);
-    }, r = {
-      [$.OPEN]: o,
-      [$.CLOSE]: a
+    const n = f(() => ({
+      [`b-dropdown-small-textbox--${N.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${N.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${N.OPENED}`]: t.open
+    })), l = f(() => t.open && !t.disabled && !t.readonly), a = () => {
+      e(D.OPEN);
+    }, o = () => {
+      e(D.CLOSE);
+    }, d = {
+      [D.OPEN]: a,
+      [D.CLOSE]: o
     };
     return {
       // Values
       conditionalClasses: n,
       isDropdownOpen: l,
       // Events
-      listeners: r
+      listeners: d
     };
   }
 });
@@ -431,43 +432,43 @@ var Ue = function() {
   null,
   null
 );
-const qe = He.exports, Ve = ({ items: t, placeholder: e, selectedValue: n, staticCategories: l }) => {
-  let o;
+const qe = He.exports, Je = ({ items: t, placeholder: e, selectedValue: n, staticCategories: l }) => {
+  let a;
   if (l) {
-    const a = t.value.find((r) => r.items.some((d) => d.value === n.value));
-    o = a == null ? void 0 : a.items.find((r) => r.value === n.value);
+    const o = t.value.find((d) => d.items.some((u) => u.value === n.value));
+    a = o == null ? void 0 : o.items.find((d) => d.value === n.value);
   } else
-    o = t.value.find(({ value: a }) => a === n.value);
-  return (o == null ? void 0 : o.label) || e.value || null;
-}, Je = ({ selectedValues: t, items: e, placeholder: n }) => {
+    a = t.value.find(({ value: o }) => o === n.value);
+  return (a == null ? void 0 : a.label) || e.value || null;
+}, Ve = ({ 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((o) => {
-    const { label: a } = e.value.find(({ value: r }) => r === o);
-    return a;
+  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: d }) => d === a);
+    return o;
   }).join(", ");
 }, Ze = ({ selectedValues: t, items: e, placeholder: n }) => {
   var l;
-  return !t.value || !((l = t.value) != null && l.length) ? n.value || null : e.value.reduce((o, a) => {
-    if (a.items) {
-      const r = a.items.filter(
-        (i) => t.value.includes(i.value)
+  return !t.value || !((l = t.value) != null && l.length) ? n.value || null : e.value.reduce((a, o) => {
+    if (o.items) {
+      const d = o.items.filter(
+        (s) => t.value.includes(s.value)
       );
-      r.length === a.items.length ? o.push(a.label) : r.forEach(({ label: i }) => o.push(i));
+      d.length === o.items.length ? a.push(o.label) : d.forEach(({ label: s }) => a.push(s));
     }
-    return t.value.includes(a.value) && o.push(a.label), o;
+    return t.value.includes(o.value) && a.push(o.label), a;
   }, []).join(", ");
-}, Ye = ({ items: t, placeholder: e, value: n, multiple: l, staticCategories: o }) => {
-  const a = u(() => t.value.find((d) => {
-    var i;
-    return (i = d.items) == null ? void 0 : i.length;
+}, Ye = ({ items: t, placeholder: e, value: n, multiple: l, staticCategories: a }) => {
+  const o = f(() => t.value.find((u) => {
+    var s;
+    return (s = u.items) == null ? void 0 : s.length;
   }));
-  return u(() => l.value ? a.value ? Ze({ selectedValues: n, placeholder: e, items: t }) : Je({ selectedValues: n, items: t, placeholder: e }) : Ve({
+  return f(() => l.value ? o.value ? Ze({ selectedValues: n, placeholder: e, items: t }) : Ve({ selectedValues: n, items: t, placeholder: e }) : Je({
     items: t,
     placeholder: e,
     selectedValue: n,
-    staticCategories: o.value
+    staticCategories: a.value
   }));
-}, G = (t) => {
+}, Q = (t) => {
   var e;
   (e = t.value.$children) == null || e[0].$refs.textbox.focus();
 }, Ge = ({
@@ -475,78 +476,78 @@ const qe = He.exports, Ve = ({ items: t, placeholder: e, selectedValue: n, stati
   optionsContainerRef: e,
   selectedValueIndex: n,
   isDropdownOpen: l,
-  isDynamicFltering: o,
-  items: a,
-  isMultiple: r
-}, d, i, v) => {
-  const h = ({ detail: f }) => {
-    f.preventDefault(), l.value || (i(), C(() => {
+  isDynamicFltering: a,
+  items: o,
+  isMultiple: d
+}, u, s, p) => {
+  const x = ({ detail: r }) => {
+    r.preventDefault(), l.value || (s(), C(() => {
       var c, b;
-      r ? (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
+      d ? (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
     }));
-  }, _ = ({ detail: f }) => {
-    f.preventDefault(), l.value || (i(), C(() => {
+  }, m = ({ detail: r }) => {
+    r.preventDefault(), l.value || (s(), C(() => {
       var c;
       (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
     }));
-  }, x = () => {
-    l.value || (i(), C(() => {
-      var f, c;
-      if (r) {
+  }, g = () => {
+    l.value || (s(), C(() => {
+      var r, c;
+      if (d) {
         const b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[b.length - 1].$children[a.length - 1].$el.focus();
+        (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[b.length - 1].$children[o.length - 1].$el.focus();
       } else
-        (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[a.length - 1].$el.focus();
+        (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[o.length - 1].$el.focus();
     }));
-  }, g = () => {
-    l.value && (v(), G(t));
+  }, _ = () => {
+    l.value && (p(), Q(t));
   }, w = () => {
-    l.value || i(), C(() => {
-      var f;
-      (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
+    l.value || s(), C(() => {
+      var r;
+      (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[0].$el.focus();
     });
-  }, S = ({ detail: f }) => {
-    f.preventDefault(), d(), l.value && C(() => {
+  }, h = ({ detail: r }) => {
+    r.preventDefault(), u(), l.value && C(() => {
       var c, b;
-      r ? (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
+      d ? (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (b = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[n.value].$el.focus();
     });
-  }, p = () => {
-    d(), l.value && C(() => {
-      var f, c;
-      r ? (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[n.value].$el.focus();
+  }, S = () => {
+    u(), l.value && C(() => {
+      var r, c;
+      d ? (r = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || r[0].$el.focus() : (c = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[n.value].$el.focus();
     });
   };
-  return u(() => ({
-    ...o.value ? {} : { [O.SPACE]: S },
-    [O.ENTER]: p,
-    [O.ARROW_DOWN]: h,
-    [O.ARROW_UP]: _,
-    [O.END]: x,
-    [O.ESCAPE]: g,
-    [O.HOME]: w
+  return f(() => ({
+    ...a.value ? {} : { [L.SPACE]: h },
+    [L.ENTER]: S,
+    [L.ARROW_DOWN]: x,
+    [L.ARROW_UP]: m,
+    [L.END]: g,
+    [L.ESCAPE]: _,
+    [L.HOME]: w
   }));
 }, Qe = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
   const l = () => {
     e.value && n(), C(() => {
-      G(t);
+      Q(t);
     });
   };
   return {
-    [s.ENTER]: l,
-    [s.ESCAPE]: l,
-    [s.TAB]: l,
-    [s.SPACE]: l
+    [i.ENTER]: l,
+    [i.ESCAPE]: l,
+    [i.TAB]: l,
+    [i.SPACE]: l
   };
 };
 function Xe(t, e, n) {
-  const l = y(t), o = y(e), a = (d, i = []) => i.flatMap((v) => v.label.toLocaleLowerCase().includes(d) ? [v, ...a(d, v.items)] : v.items ? [...a(d, v.items)] : []);
+  const l = y(t), a = y(e), o = (u, s = []) => s.flatMap((p) => p.label.toLocaleLowerCase().includes(u) ? [p, ...o(u, p.items)] : p.items ? [...o(u, p.items)] : []);
   return Z(l, () => {
     n !== void 0 && n(l.value);
-  }), u(() => {
+  }), f(() => {
     if (!l.value || n !== void 0)
-      return o.value;
-    const d = l.value.toLocaleLowerCase();
-    return a(d, o.value);
+      return a.value;
+    const u = l.value.toLocaleLowerCase();
+    return o(u, a.value);
   });
 }
 const et = {
@@ -560,13 +561,13 @@ const et = {
   name: "b-dropdown",
   components: {
     BentoDropdownOptionsContainer: Be,
-    BentoTypography: ve,
-    DropdownInputDefault: he,
+    BentoTypography: pe,
+    DropdownInputDefault: ye,
     DropdownInputSmall: qe,
-    ErrorMessage: we,
-    FieldLabel: Se
+    ErrorMessage: Se,
+    FieldLabel: Oe
   },
-  directives: { BentoClickOutsideDirective: Le, BentoKeyboardNavigationDirective: _e },
+  directives: { BentoClickOutsideDirective: G, BentoKeyboardNavigationDirective: we },
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -660,8 +661,8 @@ const et = {
      */
     lazyLoadType: {
       type: String,
-      default: F.props.lazyLoadType.default,
-      validator: (t) => Object.values(k).includes(t)
+      default: k.props.lazyLoadType.default,
+      validator: (t) => Object.values(F).includes(t)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -726,86 +727,86 @@ const et = {
       default: void 0
     }
   },
-  emits: ["input", s.SHOW_MORE],
+  emits: ["input", i.SHOW_MORE],
   setup(t, { attrs: e, emit: n, slots: l }) {
     var H;
-    const { t: o } = W(), a = y(null), r = y(null), d = y(null), i = y(!1), v = B("bento-dropdown-options-container"), h = B("dropdown-label"), _ = B("dropdown-description"), x = B("dropdown-error"), { isReadOnly: g } = be(L(t, "readonly")), w = y(e["aria-label"]), { ariaLabel: S } = Y(t), p = me({
+    const { t: a } = W(), o = y(null), d = y(null), u = y(null), s = y(!1), p = B("bento-dropdown-options-container"), x = B("dropdown-label"), m = B("dropdown-description"), g = B("dropdown-error"), { isReadOnly: _ } = ge(O(t, "readonly")), w = y(e["aria-label"]), { ariaLabel: h } = Y(t), S = _e({
       ariaLabel: w.value,
       // TODO: take this line away when the aria-label props is removed
-      label: S,
-      defaultFallback: o("ariaLabelFallback")
-    }), D = u(() => ({
+      label: h,
+      defaultFallback: a("ariaLabelFallback")
+    }), $ = f(() => ({
       "b-dropdown--condensed": t.condensed
-    })), f = u(() => ({
+    })), r = f(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), c = y(""), b = L(t, "items"), Q = Xe(c, b, (H = t == null ? void 0 : t.search) == null ? void 0 : H.searchEvent), A = u(() => t.dynamicFiltering && !!c.value), X = Ye({
+    })), c = y(""), b = O(t, "items"), X = Xe(c, b, (H = t == null ? void 0 : t.search) == null ? void 0 : H.searchEvent), A = f(() => t.dynamicFiltering && !!c.value), ee = Ye({
       items: b,
-      staticCategories: L(t, "staticCategories"),
-      multiple: L(t, "multiple"),
-      placeholder: L(t, "placeholder"),
-      value: L(t, "value")
-    }), ee = u(() => t.size === E.DEFAULT), te = u(() => {
+      staticCategories: O(t, "staticCategories"),
+      multiple: O(t, "multiple"),
+      placeholder: O(t, "placeholder"),
+      value: O(t, "value")
+    }), te = f(() => t.size === E.DEFAULT), ne = f(() => {
       if (t != null && t.multiple)
         return t.items.filter(
-          ({ value: m }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(m)
+          ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
         );
       if (!t.multiple && t.staticCategories) {
-        const m = t.items.find(
-          (T) => T.items.some((fe) => fe.value === t.value)
+        const v = t.items.find(
+          (T) => T.items.some((ve) => ve.value === t.value)
         );
-        return m ? m.items.find((T) => T.value === t.value) : null;
+        return v ? v.items.find((T) => T.value === t.value) : null;
       }
-      return t.items.find(({ value: m }) => m === (t == null ? void 0 : t.value));
-    }), ne = u(() => {
-      const m = t.items.findIndex(({ value: R }) => t.value === R);
-      return m > 0 ? m : 0;
-    }), { isMultiLevelSelect: le, flattenedItemsList: ae } = ye(b), oe = u(() => {
-      var m;
+      return t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value));
+    }), le = f(() => {
+      const v = t.items.findIndex(({ value: R }) => t.value === R);
+      return v > 0 ? v : 0;
+    }), { isMultiLevelSelect: ae, flattenedItemsList: oe } = xe(b), se = f(() => {
+      var v;
       if (t.multiple) {
-        const R = (m = t == null ? void 0 : t.value) == null ? void 0 : m.length;
-        return (le.value ? ae.value.length : b.value.length) === R ? o("all") : R;
+        const R = (v = t == null ? void 0 : t.value) == null ? void 0 : v.length;
+        return (ae.value ? oe.value.length : b.value.length) === R ? a("all") : R;
       }
       return null;
-    }), se = u(
-      () => `${t.description ? _ : ""} ${t.errorMessage ? x : ""}`.trim() || null
-    ), ie = () => {
-      g.value || (i.value = !0);
+    }), ie = f(
+      () => `${t.description ? m : ""} ${t.errorMessage ? g : ""}`.trim() || null
+    ), re = () => {
+      _.value || (s.value = !0);
     }, M = () => {
-      i.value = !1;
+      s.value = !1;
     }, z = () => {
-      g.value || (i.value = !i.value, A.value && (c.value = ""));
-    }, re = () => {
-      A.value && (c.value = ""), i.value && (i.value = !1);
-    }, U = (m) => {
-      t.multiple || (c.value = "", i.value = !1), n("input", m);
+      _.value || (s.value = !s.value, A.value && (c.value = ""));
+    }, de = () => {
+      A.value && (c.value = ""), s.value && (s.value = !1, u.value.onOutsideDropdownClick());
+    }, U = (v) => {
+      t.multiple || (c.value = "", s.value = !1), n("input", v);
     }, j = () => {
-      n(s.SHOW_MORE);
-    }, de = Ge(
+      n(i.SHOW_MORE);
+    }, ue = Ge(
       {
-        inputContainerRef: a,
-        optionsContainerRef: d,
-        selectedValueIndex: ne,
-        isDropdownOpen: i,
-        isDynamicFltering: L(t, "dynamicFiltering"),
+        inputContainerRef: o,
+        optionsContainerRef: u,
+        selectedValueIndex: le,
+        isDropdownOpen: s,
+        isDynamicFltering: O(t, "dynamicFiltering"),
         items: t.items,
         isMultiple: t.multiple
       },
       z,
-      ie,
+      re,
       M
-    ), ue = Qe(
+    ), ce = Qe(
       {
-        inputContainerRef: a,
-        isDropdownOpen: i
+        inputContainerRef: o,
+        isDropdownOpen: s
       },
       M
-    ), ce = {
-      [s.CLOSE_DROPDOWN]: M,
-      [s.SELECT]: U,
-      [s.SHOW_MORE]: j,
-      ...ue
+    ), fe = {
+      [i.CLOSE_DROPDOWN]: M,
+      [i.SELECT]: U,
+      [i.SHOW_MORE]: j,
+      ...ce
     };
-    return t.error && pe(
+    return t.error && me(
       '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.
@@ -813,56 +814,56 @@ const et = {
       "2.0.0"
     ), {
       // Values
-      conditionalClasses: D,
-      computedAriaLabel: p,
-      additionalItemsSelected: oe,
-      idDefaultSize: ee,
-      isDropdownOpen: i,
-      displayValue: X,
-      dropdownOptionsContainerId: v,
-      filteredItems: Q,
+      conditionalClasses: $,
+      computedAriaLabel: S,
+      additionalItemsSelected: se,
+      idDefaultSize: te,
+      isDropdownOpen: s,
+      displayValue: ee,
+      dropdownOptionsContainerId: p,
+      filteredItems: X,
       isSearching: A,
-      isReadOnly: g,
+      isReadOnly: _,
       searchTerm: c,
-      labelId: h,
-      descriptionId: _,
-      errorId: x,
-      ariaDescribedBy: se,
-      selectedValueItem: te,
+      labelId: x,
+      descriptionId: m,
+      errorId: g,
+      ariaDescribedBy: ie,
+      selectedValueItem: ne,
       // 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: l,
-      descriptionConditionalClasses: f,
+      descriptionConditionalClasses: r,
       // Methods
-      hasSlot: ge(l),
+      hasSlot: he(l),
       // Refs
-      inputContainerRef: a,
-      inputContainerRefWrapper: r,
-      optionsContainerRef: d,
+      inputContainerRef: o,
+      inputContainerRefWrapper: d,
+      optionsContainerRef: u,
       // Events
-      closeOpenedDropdown: re,
+      clickOutsideDropdown: de,
       toggleDropdown: z,
       onOptionSelected: U,
       emitShowMoreEvent: j,
-      textboxKeyboardNavigationListeners: de,
-      listboxListeners: ce
+      textboxKeyboardNavigationListeners: ue,
+      listboxListeners: fe
     };
   }
 });
 var nt = 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", class: e.conditionalClasses }, [e.label ? n("field-label", { attrs: { id: e.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : 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: { condensed: e.condensed, 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(o) {
-    e.searchTerm = o;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.clickOutsideDropdown, expression: "clickOutsideDropdown" }], staticClass: "b-dropdown", class: e.conditionalClasses }, [e.label ? n("field-label", { attrs: { id: e.labelId, condensed: e.condensed, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : 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: { condensed: e.condensed, 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(d) {
+      return [e._t(o, null, null, d)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": e.emptyState, "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, "static-categories": e.staticCategories, 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, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": e.emptyState, "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, "static-categories": e.staticCategories, 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, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
+    return { key: o, fn: function(d) {
+      return [e._t(o, null, null, d)];
     } };
   })], 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 || e.hasSlot("description") ? n("bento-typography", { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [e._t("description", function() {
     return [e._v(" " + e._s(e.description) + " ")];
@@ -873,7 +874,7 @@ var nt = function() {
   lt,
   !1,
   null,
-  "99b7ce4a",
+  "df383e41",
   null,
   null
 );
@@ -883,4 +884,4 @@ export {
   E as a,
   Xe as u
 };
-//# sourceMappingURL=dropdown.f784ac67.js.map
+//# sourceMappingURL=dropdown.7749c2d7.js.map