@adyen/bento-vue2 1.65.0 → 1.66.0

package/dist/chunks/{dropdown.DV7uhHNP.js → dropdown.BWsU98dn.js}

@@ -1,22 +1,22 @@
-import { ref as h, watch as Q, computed as u, defineComponent as A, useSlots as ve, toRefs as me, nextTick as g, useAttrs as De, toRef as w, inject as Be } from "vue";
-import { d as ce, B as Ie } from "./typography.J1v_SPG3.js";
-import { a as V, b as P, c as Te, B as k, D as Ne } from "./dropdown-default-textbox.BNuuA4ES.js";
+import { ref as S, watch as be, computed as d, defineComponent as N, useSlots as ye, toRefs as _e, nextTick as h, useAttrs as Te, toRef as w, inject as Ne } from "vue";
+import { d as pe, B as Ae } from "./typography.J1v_SPG3.js";
+import { a as V, b as $, c as Re, B as P, D as Me } from "./dropdown-default-textbox.BNuuA4ES.js";
 /* empty css              */
-import { n as K } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as F } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { s as J } from "./events.CMzGybJJ.js";
-import { g as F } from "./generate-uid.NJ8tVoha.js";
-import { u as Ae } from "./aria-label.CaUURpnB.js";
-import { u as X } from "./i18n.BQkEbtPM.js";
-import { u as Re } from "./use-form-layout-loading.D3lALhtC.js";
-import { u as Me } from "./use-has-slot.C9lQZ6nz.js";
-import { a as p, b as Y, B as Z, c as $e, u as Pe } from "./use-cached-selected-values.DNOmzQVy.js";
-import { B as D, a as ke } from "./keyboard-navigation.pB8weElW.js";
-import { B as Fe } from "./directive.Cbdox5VL.js";
-import { F as Ke, E as ze } from "./error-message.1Em7Lis3.js";
-import { P as ue } from "./popper-container.DIFqmRsp.js";
-import { B as je } from "./popover.B05xkQ4e.js";
+import { g as k } from "./generate-uid.NJ8tVoha.js";
+import { u as $e } from "./aria-label.CaUURpnB.js";
+import { u as Q } from "./i18n.BQkEbtPM.js";
+import { a as p, b as Y, B as Z, c as Pe, u as ke, d as Fe } from "./use-cached-selected-values.CusB5KBl.js";
+import { u as Ke } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as ze } from "./use-has-slot.C9lQZ6nz.js";
+import { B as E, a as je } from "./keyboard-navigation.pB8weElW.js";
+import { B as We } from "./directive.Cbdox5VL.js";
+import { F as Ue, E as qe } from "./error-message.BgxnwPLF.js";
+import { P as fe } from "./popper-container.DIFqmRsp.js";
+import { B as He } from "./popover.B05xkQ4e.js";
 import "../assets/dropdown.css";
-const We = {
+const Ve = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
@@ -30,47 +30,47 @@ const We = {
     apply: "Aplicar",
     cancel: "Cancelar"
   }
-}, Ue = (n, t, o, e) => {
-  const a = h(n.value), { t: s } = X();
-  Q(n, () => {
+}, Je = (n, t, o, e) => {
+  const a = S(n.value), { t: l } = Q();
+  be(n, () => {
     a.value = n.value;
   });
-  const l = u(
+  const s = d(
     () => JSON.stringify(a.value) === JSON.stringify(n.value)
   ), i = () => {
     e(p.SELECT, a.value), e(p.CLOSE_DROPDOWN);
-  }, d = () => {
+  }, c = () => {
     a.value = n.value, e(p.CLOSE_DROPDOWN);
-  }, y = () => {
+  }, b = () => {
     o.value && t.value && (a.value = n.value);
-  }, r = u(() => [
+  }, r = d(() => [
     {
-      title: s("apply"),
+      title: l("apply"),
       event: i,
-      disabled: l.value
+      disabled: s.value
     },
     {
-      title: s("cancel"),
-      event: d
+      title: l("cancel"),
+      event: c
     }
-  ]), c = (b) => {
-    a.value = b, t.value || e(p.SELECT, b);
-  }, _ = (b) => {
-    c(b), e(p.TAB);
-  }, C = (b) => {
-    c(b), e(p.ENTER);
-  }, v = (b) => {
-    c(b), e(p.SPACE);
+  ]), u = (y) => {
+    a.value = y, t.value || e(p.SELECT, y);
+  }, _ = (y) => {
+    u(y), e(p.TAB);
+  }, g = (y) => {
+    u(y), e(p.ENTER);
+  }, f = (y) => {
+    u(y), e(p.SPACE);
   }, O = () => {
-    d(), e(p.ESCAPE);
+    c(), e(p.ESCAPE);
   }, L = () => {
     e(p.SHOW_MORE);
   }, x = {
-    [p.SELECT]: c,
+    [p.SELECT]: u,
     [p.SHOW_MORE]: L,
     [p.TAB]: _,
-    [p.SPACE]: v,
-    [p.ENTER]: C
+    [p.SPACE]: f,
+    [p.ENTER]: g
   };
   return {
     // Values
@@ -79,13 +79,13 @@ const We = {
     // Methods
     listeners: x,
     onEscapeKey: O,
-    onOutsideDropdownClick: y
+    onOutsideDropdownClick: b
   };
-}, qe = A({
-  i18n: { messages: We },
+}, Ye = N({
+  i18n: { messages: Ve },
   name: "bento-dropdown-options-container"
-}), He = /* @__PURE__ */ A({
-  ...qe,
+}), Ze = /* @__PURE__ */ N({
+  ...Ye,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -184,7 +184,7 @@ const We = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: ue.props.targetElement.type, required: !0 },
+    targetElement: { type: fe.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.
@@ -196,28 +196,28 @@ const We = {
   },
   emits: [],
   setup(n, { expose: t, emit: o }) {
-    const e = n, a = ve(), { selectedValue: s, multiple: l } = me(e), i = h(null), { t: d } = X(), y = u(() => e.open && !e.disabled), r = u(() => d("noOptionsMatchThisSearch")), c = u(() => ({
+    const e = n, a = ye(), { selectedValue: l, multiple: s } = _e(e), i = S(null), { t: c } = Q(), b = d(() => e.open && !e.disabled), r = d(() => c("noOptionsMatchThisSearch")), u = d(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), _ = u(() => ({
+    })), _ = d(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: C, internalSelectedValue: v, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x } = Ue(s, l, y, o), b = u(() => e != null && e.multiple ? je : ue), I = u(() => {
-      var T;
-      const B = {
-        "min-width": `${(T = e == null ? void 0 : e.targetElement) == null ? void 0 : T.clientWidth}px`,
+    })), { actions: g, internalSelectedValue: f, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x } = Je(l, s, b, o), y = d(() => e != null && e.multiple ? He : fe), B = d(() => {
+      var I;
+      const D = {
+        "min-width": `${(I = e == null ? void 0 : e.targetElement) == null ? void 0 : I.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return e != null && e.multiple ? {
         actionsLayout: "space-between",
         ariaLabel: e.ariaLabel,
-        actions: C.value,
+        actions: g.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: F(`dropdown-options-${e.id}`),
+        id: k(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...B
+          ...D
         },
         targetElement: e.targetElement
       } : {
@@ -225,75 +225,75 @@ const We = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: y.value ? "block" : "none",
-          ...B
+          display: b.value ? "block" : "none",
+          ...D
         },
         targetElement: e.targetElement
       };
     });
     return t({
       onOutsideDropdownClick: x
-    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: s, multiple: l, dropdownOptionsListboxRef: i, t: d, isDropdownOpen: y, noResultsMessage: r, conditionalClasses: c, conditionalListboxClasses: _, actions: C, internalSelectedValue: v, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: I, BentoListbox: Y };
+    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: b, noResultsMessage: r, conditionalClasses: u, conditionalListboxClasses: _, actions: g, internalSelectedValue: f, listeners: O, onEscapeKey: L, onOutsideDropdownClick: x, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: B, BentoListbox: Y };
   }
 });
-var Ve = function() {
+var Qe = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(a) {
     return !a.type.indexOf("key") && t._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(a, s) {
-    return { key: s, fn: function(l) {
-      return [t._t(s, null, null, l)];
+  } } }, [o(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(a, l) {
+    return { key: l, fn: function(s) {
+      return [t._t(l, null, null, s)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, Je = [], Ye = /* @__PURE__ */ K(
-  He,
-  Ve,
-  Je,
+}, Xe = [], Ge = /* @__PURE__ */ F(
+  Ze,
+  Qe,
+  Xe,
   !1,
   null,
   "d774d15c"
 );
-const Ze = Ye.exports;
-let pe = 0;
-const Qe = {
+const et = Ge.exports;
+let ve = 0;
+const tt = {
   beforeCreate() {
-    this.uuid = pe.toString(), pe += 1;
+    this.uuid = ve.toString(), ve += 1;
   }
 };
-var Xe = function() {
+var ot = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#001222", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, Ge = [], et = /* @__PURE__ */ K(
-  Qe,
-  Xe,
-  Ge,
+}, at = [], nt = /* @__PURE__ */ F(
+  tt,
+  ot,
+  at,
   !1,
   null,
   null
 );
-const tt = et.exports;
-let fe = 0;
-const ot = {
+const st = nt.exports;
+let me = 0;
+const lt = {
   beforeCreate() {
-    this.uuid = fe.toString(), fe += 1;
+    this.uuid = me.toString(), me += 1;
   }
 };
-var at = function() {
+var it = function() {
   var t = this, o = t._self._c;
   return o("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? o("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), o("path", { attrs: { fill: "#001222", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, nt = [], lt = /* @__PURE__ */ K(
-  ot,
-  at,
-  nt,
+}, rt = [], dt = /* @__PURE__ */ F(
+  lt,
+  it,
+  rt,
   !1,
   null,
   null
 );
-const st = lt.exports, it = A({
+const ct = dt.exports, ut = N({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), rt = /* @__PURE__ */ A({
-  ...it,
+}), pt = /* @__PURE__ */ N({
+  ...ut,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -354,133 +354,133 @@ const st = lt.exports, it = A({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(n, { expose: t, emit: o }) {
-    const e = n, a = h(null), s = u(() => ({
+    const e = n, a = S(null), l = d(() => ({
       [`b-dropdown-small-textbox--${V.DISABLED}`]: e.disabled,
       [`b-dropdown-small-textbox--${V.READONLY}`]: e.readonly,
       [`b-dropdown-small-textbox--${V.OPENED}`]: e.open
-    })), l = u(() => e.open && !e.disabled && !e.readonly), i = (v) => {
-      o("input", v);
-    }, d = (v) => {
-      o("keydown", v);
-    }, y = (v) => {
-      J(v), o("open");
-    }, r = (v) => {
-      J(v), o("close");
-    }, c = (v) => {
-      J(v), o("clear");
+    })), s = d(() => e.open && !e.disabled && !e.readonly), i = (f) => {
+      o("input", f);
+    }, c = (f) => {
+      o("keydown", f);
+    }, b = (f) => {
+      J(f), o("open");
+    }, r = (f) => {
+      J(f), o("close");
+    }, u = (f) => {
+      J(f), o("clear");
     }, _ = {
-      [P.INPUT]: i,
-      [P.OPEN]: y,
-      [P.CLOSE]: r,
-      [P.CLEAR]: c,
-      [P.KEYDOWN]: d
-    }, C = () => {
+      [$.INPUT]: i,
+      [$.OPEN]: b,
+      [$.CLOSE]: r,
+      [$.CLEAR]: u,
+      [$.KEYDOWN]: c
+    }, g = () => {
       a.value.focus();
     };
     return t({
-      focus: C
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: a, conditionalClasses: s, isDropdownOpen: l, onInput: i, onKeyDown: d, openDropdown: y, closeDropdown: r, clearValue: c, listeners: _, focus: C, BentoDropdownSize: k, DropdownBaseTextbox: Te, ChevronDownSmallIcon: tt, ChevronUpSmallIcon: st };
+      focus: g
+    }), { __sfc: !0, emit: o, props: e, baseTextbox: a, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: b, closeDropdown: r, clearValue: u, listeners: _, focus: g, BentoDropdownSize: P, DropdownBaseTextbox: Re, ChevronDownSmallIcon: st, ChevronUpSmallIcon: ct };
   }
 });
-var dt = function() {
+var ft = function() {
   var t = this, o = t._self._c, e = t._self._setupProxy;
   return o("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [o(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: e.BentoDropdownSize.SMALL }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [o("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [o(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), o(e.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, ct = [], ut = /* @__PURE__ */ K(
-  rt,
-  dt,
-  ct,
+}, vt = [], mt = /* @__PURE__ */ F(
+  pt,
+  ft,
+  vt,
   !1,
   null,
   "d0e53db8"
 );
-const pt = ut.exports, ft = (n, t) => t.value.reduce((o, e) => {
+const bt = mt.exports, yt = (n, t) => t.value.reduce((o, e) => {
   if (e.items) {
     const a = e.items.filter(
-      (l) => n.value.find((i) => i.value === l.value)
+      (s) => n.value.find((i) => i.value === s.value)
     );
-    a.length === e.items.length ? o.push(e.displayValue ?? e.label) : a.forEach(({ label: l, displayValue: i }) => o.push(i ?? l));
+    a.length === e.items.length ? o.push(e.displayValue ?? e.label) : a.forEach(({ label: s, displayValue: i }) => o.push(i ?? s));
   }
   return n.value.find((a) => a.value === e.value) && o.push(e.displayValue ?? e.label), o;
-}, []).join(", "), vt = ({ items: n, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
-  const a = u(
-    () => e.value && n.value.find((l) => {
+}, []).join(", "), _t = ({ items: n, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+  const a = d(
+    () => e.value && n.value.find((s) => {
       var i;
-      return (i = l.items) == null ? void 0 : i.length;
+      return (i = s.items) == null ? void 0 : i.length;
     })
   );
-  return u(() => o.value.length ? a.value ? ft(o, n) : o.value.map(({ label: l, displayValue: i }) => i ?? l).join(", ") : t.value || null);
-}, ye = (n) => {
+  return d(() => o.value.length ? a.value ? yt(o, n) : o.value.map(({ label: s, displayValue: i }) => i ?? s).join(", ") : t.value || null);
+}, ge = (n) => {
   var t;
   (t = n.value.$children) == null || t[0].$refs.textbox.focus();
-}, mt = ({
+}, gt = ({
   inputContainerRef: n,
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
   isDynamicFltering: a,
-  items: s,
-  isMultiple: l
-}, i, d, y) => {
+  items: l,
+  isMultiple: s
+}, i, c, b) => {
   const r = async (m) => {
-    var S;
-    a.value && await g(), (S = s.value[m]) == null || S.focus();
-  }, c = async (m) => {
-    var z, R;
-    a.value && await g();
-    const S = (z = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : z.$el.querySelectorAll(
+    var C;
+    a.value && await h(), (C = l.value[m]) == null || C.focus();
+  }, u = async (m) => {
+    var K, A;
+    a.value && await h();
+    const C = (K = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : K.$el.querySelectorAll(
       "button"
     );
-    S.length ? (R = S[m]) == null || R.focus() : r(m);
+    C.length ? (A = C[m]) == null || A.focus() : r(m);
   }, _ = (m) => {
-    var S;
-    return (S = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : S.setListboxFocusedIndex(
+    var C;
+    return (C = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : C.setListboxFocusedIndex(
       m
     );
-  }, C = ({ detail: m }) => {
-    m.preventDefault(), e.value || d(), g(() => {
-      l ? c(0) : (_(o.value), r(o.value));
+  }, g = ({ detail: m }) => {
+    m.preventDefault(), e.value || c(), h(() => {
+      s ? u(0) : (_(o.value), r(o.value));
     });
-  }, v = ({ detail: m }) => {
-    m.preventDefault(), e.value || d(), g(() => {
-      l ? c(0) : (_(o.value), r(o.value));
+  }, f = ({ detail: m }) => {
+    m.preventDefault(), e.value || c(), h(() => {
+      s ? u(0) : (_(o.value), r(o.value));
     });
   }, O = () => {
-    e.value || (d(), g(() => {
-      _(s.value.length - 1), r(s.value.length - 1);
+    e.value || (c(), h(() => {
+      _(l.value.length - 1), r(l.value.length - 1);
     }));
   }, L = () => {
-    e.value && (y(), ye(n));
+    e.value && (b(), ge(n));
   }, x = () => {
-    e.value && y();
-  }, b = () => {
-    e.value || d(), g(() => {
+    e.value && b();
+  }, y = () => {
+    e.value || c(), h(() => {
       r(0);
     });
-  }, I = ({ detail: m }) => {
-    m.preventDefault(), i(), e.value && g(() => {
-      l ? c(0) : (_(o.value), r(o.value));
-    });
   }, B = ({ detail: m }) => {
-    m.preventDefault(), i(), e.value && g(() => {
-      l ? c(0) : (_(o.value), r(o.value));
+    m.preventDefault(), i(), e.value && h(() => {
+      s ? u(0) : (_(o.value), r(o.value));
+    });
+  }, D = ({ detail: m }) => {
+    m.preventDefault(), i(), e.value && h(() => {
+      s ? u(0) : (_(o.value), r(o.value));
     });
   };
-  return u(() => ({
-    ...a.value ? {} : { [D.SPACE]: I },
-    [D.ENTER]: B,
-    [D.ARROW_DOWN]: C,
-    [D.ARROW_UP]: v,
-    [D.END]: O,
-    [D.ESCAPE]: L,
-    [D.HOME]: b,
-    [D.TAB]: x
+  return d(() => ({
+    ...a.value ? {} : { [E.SPACE]: B },
+    [E.ENTER]: D,
+    [E.ARROW_DOWN]: g,
+    [E.ARROW_UP]: f,
+    [E.END]: O,
+    [E.ESCAPE]: L,
+    [E.HOME]: y,
+    [E.TAB]: x
   }));
-}, yt = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
+}, Ct = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
   const e = () => {
-    t.value && o(), g(() => {
-      ye(n);
+    t.value && o(), h(() => {
+      ge(n);
     });
   };
   return {
@@ -490,18 +490,18 @@ const pt = ut.exports, ft = (n, t) => t.value.reduce((o, e) => {
     [p.SPACE]: e
   };
 };
-function bt(n, t, o, e) {
-  const a = h(n), s = h(t), l = (d, y = []) => y.flatMap((r) => r.label.toLocaleLowerCase().includes(d) ? e != null && e.value && r.items ? [...l(d, r.items)] : [r, ...l(d, r.items)] : r.items ? [...l(d, r.items)] : []);
-  return Q(a, () => {
+function ht(n, t, o, e) {
+  const a = S(n), l = S(t), s = (c, b = []) => b.flatMap((r) => r.label.toLocaleLowerCase().includes(c) ? e != null && e.value && r.items ? [...s(c, r.items)] : [r, ...s(c, r.items)] : r.items ? [...s(c, r.items)] : []);
+  return be(a, () => {
     o !== void 0 && o(a.value);
-  }), u(() => {
+  }), d(() => {
     if (!a.value || o !== void 0)
-      return s.value;
-    const d = a.value.toLocaleLowerCase();
-    return l(d, s.value);
+      return l.value;
+    const c = a.value.toLocaleLowerCase();
+    return s(c, l.value);
   });
 }
-const _t = {
+const St = {
   "en-US": {
     all: "All",
     ariaLabelFallback: "Dropdown",
@@ -515,15 +515,15 @@ const _t = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, gt = Symbol("input field component injection key"), jt = Symbol("input field hint injection key"), Wt = Symbol("input field parent component injection key"), ht = A({
-  i18n: { messages: _t },
+}, wt = Symbol("input field component injection key"), Ht = Symbol("input field hint injection key"), Vt = Symbol("input field parent component injection key"), Lt = N({
+  i18n: { messages: St },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Ne,
-    DropdownInputSmall: pt
+    DropdownInputDefault: Me,
+    DropdownInputSmall: bt
   }
-}), Ct = /* @__PURE__ */ A({
-  ...ht,
+}), xt = /* @__PURE__ */ N({
+  ...Lt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -655,7 +655,7 @@ const _t = {
     size: {
       type: String,
       default: null,
-      validator: (n) => Object.values(k).includes(n)
+      validator: (n) => Object.values(P).includes(n)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -699,147 +699,142 @@ const _t = {
   },
   emits: ["input", "show-more"],
   setup(n, { expose: t, emit: o }) {
-    var de;
-    const e = n, a = De(), s = ve(), l = Me(s), { t: i } = X(), d = h(null), y = h(null), r = h(null), c = h(!1), _ = F("bento-dropdown-options-container"), C = F("dropdown-label"), v = F("dropdown-description"), O = F("dropdown-error"), { isReadOnly: L } = Re(w(e, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: b, setCachedValues: I } = $e(
+    var ue;
+    const e = n, a = Te(), l = ye(), s = ze(l), { t: i } = Q(), c = S(null), b = S(null), r = S(null), u = S(!1), _ = k("bento-dropdown-options-container"), g = k("dropdown-label"), f = k("dropdown-description"), O = k("dropdown-error"), { isReadOnly: L } = Ke(w(e, "readonly")), { cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: B } = Pe(
       w(e, "items"),
       w(e, "value"),
       w(e, "multiple"),
       w(e, "enableValueLabelPair")
-    ), B = h(a["aria-label"]), { ariaLabel: T, label: m } = me(e), S = u(() => i("ariaLabelFallback")), z = Ae({
+    ), D = S(a["aria-label"]), { ariaLabel: I, label: m } = _e(e), C = d(() => i("ariaLabelFallback")), K = $e({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: T.value || B,
+      ariaLabel: I.value || D,
       label: m,
-      defaultFallback: S
-    }), R = e.size === k.SMALL || Be(gt, !1), be = u(() => R ? k.SMALL : k.DEFAULT), _e = u(() => ({
+      defaultFallback: C
+    }), A = e.size === P.SMALL || Ne(wt, !1), Ce = d(() => A ? P.SMALL : P.DEFAULT), he = d(() => ({
       "b-dropdown--condensed": e.condensed
-    })), ge = u(() => ({
+    })), Se = d(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), N = h(""), M = w(e, "items"), G = w(e, "staticCategories"), U = bt(N, M, (de = e == null ? void 0 : e.search) == null ? void 0 : de.searchEvent, G), q = u(() => e.dynamicFiltering && !!N.value), he = vt({
-      items: M,
+    })), T = S(""), R = w(e, "items"), X = w(e, "staticCategories"), j = ht(T, R, (ue = e == null ? void 0 : e.search) == null ? void 0 : ue.searchEvent, X), W = d(() => e.dynamicFiltering && !!T.value), we = _t({
+      items: R,
       placeholder: w(e, "placeholder"),
       isMultiSelect: w(e, "multiple"),
       selectedValues: x
-    }), Ce = u(() => {
+    }), Le = d(() => {
       if (e != null && e.multiple && Array.isArray(e.value))
         return e.items.filter(
-          ({ value: f }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(f)
+          ({ value: v }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(v)
         );
       if (!e.multiple && e.staticCategories) {
-        const f = e.items.find(
-          ($) => $.items.some((Ee) => Ee.value === e.value)
+        const v = e.items.find(
+          (H) => H.items.some((Ie) => Ie.value === e.value)
         );
-        return f ? f.items.find(($) => $.value === e.value) : null;
+        return v ? v.items.find((H) => H.value === e.value) : null;
       }
-      return e.items.find(({ value: f }) => f === (e == null ? void 0 : e.value));
-    }), ee = u(() => {
-      const f = U.value.findIndex(({ value: E }) => e.value === E);
-      return f > -1 ? f : 0;
-    }), { isMultiLevelSelect: te, flattenedItemsList: oe } = Pe(M), Se = u(() => {
+      return e.items.find(({ value: v }) => v === (e == null ? void 0 : e.value));
+    }), G = d(() => {
+      const v = j.value.findIndex(({ value: M }) => e.value === M);
+      return v > -1 ? v : 0;
+    }), { isMultiLevelSelect: U, flattenedItemsList: ee } = ke(R), te = d(() => U.value && !e.staticCategories), oe = d(() => te.value ? "treeitem" : "option"), xe = d(() => {
       if (e.multiple) {
-        const f = Array.isArray(e.value) ? e.value.length : 0, E = te.value ? oe.value.length : M.value.length;
-        return f === 0 ? null : !e.hasMoreItems && E > 0 && E === f ? i("all") : f;
+        const v = Array.isArray(e.value) ? e.value.length : 0, M = U.value ? ee.value.length : R.value.length;
+        return v === 0 ? null : !e.hasMoreItems && M > 0 && M === v ? i("all") : v;
       }
       return null;
-    }), we = u(
-      () => `${e.description ? v : ""} ${e.errorMessage ? O : ""}`.trim() || null
-    ), ae = () => {
-      L.value || (c.value = !0, g(() => {
-        W();
+    }), Oe = d(
+      () => `${e.description ? f : ""} ${e.errorMessage ? O : ""}`.trim() || null
+    ), ae = d(() => {
+      var v;
+      return (v = r.value) == null ? void 0 : v.$el;
+    }), { visibleDomOptions: ne, updateVisibleDomOptions: q } = Fe(
+      ae,
+      j,
+      oe
+    ), se = () => {
+      L.value || (u.value = !0, h(() => {
+        q();
       }));
-    }, j = () => {
-      c.value = !1;
-    }, ne = () => {
-      L.value || (c.value = !c.value, g(() => {
-        W();
-      }), q.value && (N.value = ""));
-    }, Le = () => {
-      q.value && (N.value = ""), c.value && (c.value = !1, r.value.onOutsideDropdownClick());
-    }, le = (f) => {
-      e.multiple || (N.value = "", c.value = !1), I(f), o("input", b.value);
-    }, se = () => {
+    }, z = () => {
+      u.value = !1;
+    }, le = () => {
+      L.value || (u.value = !u.value, h(() => {
+        q();
+      }), W.value && (T.value = ""));
+    }, Ee = () => {
+      W.value && (T.value = ""), u.value && (u.value = !1, r.value.onOutsideDropdownClick());
+    }, ie = (v) => {
+      e.multiple || (T.value = "", u.value = !1), B(v), o("input", y.value);
+    }, re = () => {
       o(p.SHOW_MORE);
-    }, H = h([]), W = () => {
-      var E;
-      const f = (E = r.value) == null ? void 0 : E.$el;
-      !f || f.nodeType === Node.COMMENT_NODE || (H.value = Array.from(
-        f.querySelectorAll('[role="option"]')
-      ).filter(($) => $.checkVisibility()));
-    };
-    Q(U, () => {
-      g(() => {
-        W();
-      });
-    });
-    const xe = mt(
+    }, De = gt(
       {
-        inputContainerRef: d,
+        inputContainerRef: c,
         optionsContainerRef: r,
-        selectedValueIndex: ee,
-        isDropdownOpen: c,
+        selectedValueIndex: G,
+        isDropdownOpen: u,
         isDynamicFltering: w(e, "dynamicFiltering"),
-        items: H,
+        items: ne,
         isMultiple: e.multiple
       },
-      ne,
-      ae,
-      j
-    ), ie = yt(
+      le,
+      se,
+      z
+    ), de = Ct(
       {
-        inputContainerRef: d,
-        isDropdownOpen: c
+        inputContainerRef: c,
+        isDropdownOpen: u
       },
-      j
-    ), Oe = {
-      [p.CLOSE_DROPDOWN]: j,
-      [p.SELECT]: le,
-      [p.SHOW_MORE]: se,
-      ...ie
+      z
+    ), Be = {
+      [p.CLOSE_DROPDOWN]: z,
+      [p.SELECT]: ie,
+      [p.SHOW_MORE]: re,
+      ...de
     };
-    e.error && ce(
+    e.error && pe(
       '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" />`,
       "2.0.0"
-    ), e.size && ce('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
-    const re = () => {
-      d.value.focus();
+    ), e.size && pe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
+    const ce = () => {
+      c.value.focus();
     };
     return t({
-      focus: re
-    }), { __sfc: !0, attrs: a, slots: s, hasSlot: l, props: e, emit: o, t: i, inputContainerRef: d, inputContainerRefWrapper: y, optionsContainerRef: r, isDropdownOpen: c, dropdownOptionsContainerId: _, labelId: C, descriptionId: v, errorId: O, isReadOnly: L, cachedSelectedListboxOptions: x, cachedListboxSelectedValues: b, setCachedValues: I, ariaLabelAttribute: B, ariaLabel: T, label: m, computedAriaLabelFallbackMessage: S, computedAriaLabel: z, isInputComponent: R, computedSize: be, conditionalClasses: _e, descriptionConditionalClasses: ge, searchTerm: N, items: M, staticCategories: G, filteredItems: U, isSearching: q, displayValue: he, selectedValueItem: Ce, selectedValueIndex: ee, isMultiLevelSelect: te, flattenedItemsList: oe, additionalItemsSelected: Se, ariaDescribedBy: we, openDropdown: ae, closeDropdown: j, toggleDropdown: ne, clickOutsideDropdown: Le, onOptionSelected: le, emitShowMoreEvent: se, visibleDomOptions: H, updateVisibleDomOptions: W, textboxKeyboardNavigationListeners: xe, listboxKeyboardNavigationListeners: ie, listboxListeners: Oe, focus: re, BentoDropdownOptionsContainer: Ze, BentoTypography: Ie, ErrorMessage: ze, FieldLabel: Ke, vBentoClickOutsideDirective: Fe, vBentoKeyboardNavigationDirective: ke };
+      focus: ce
+    }), { __sfc: !0, attrs: a, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: b, optionsContainerRef: r, isDropdownOpen: u, dropdownOptionsContainerId: _, labelId: g, descriptionId: f, errorId: O, isReadOnly: L, cachedSelectedListboxOptions: x, cachedListboxSelectedValues: y, setCachedValues: B, ariaLabelAttribute: D, ariaLabel: I, label: m, computedAriaLabelFallbackMessage: C, computedAriaLabel: K, isInputComponent: A, computedSize: Ce, conditionalClasses: he, descriptionConditionalClasses: Se, searchTerm: T, items: R, staticCategories: X, filteredItems: j, isSearching: W, displayValue: we, selectedValueItem: Le, selectedValueIndex: G, isMultiLevelSelect: U, flattenedItemsList: ee, isTreePattern: te, computedOptionRole: oe, additionalItemsSelected: xe, ariaDescribedBy: Oe, listboxRef: ae, visibleDomOptions: ne, updateVisibleDomOptions: q, openDropdown: se, closeDropdown: z, toggleDropdown: le, clickOutsideDropdown: Ee, onOptionSelected: ie, emitShowMoreEvent: re, textboxKeyboardNavigationListeners: De, listboxKeyboardNavigationListeners: de, listboxListeners: Be, focus: ce, BentoDropdownOptionsContainer: et, BentoTypography: Ae, ErrorMessage: qe, FieldLabel: Ue, vBentoClickOutsideDirective: We, vBentoKeyboardNavigationDirective: je };
   }
 });
-var St = function() {
+var Ot = function() {
   var a;
   var t = this, o = t._self._c, e = t._self._setupProxy;
-  return o("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 ? o(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), o("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [o(e.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, "aria-controls": 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: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(s) {
-    e.searchTerm = s;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(s, l) {
-    return { key: l, fn: function(i) {
-      return [t._t(l, null, null, i)];
+  return o("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 ? o(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), o("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [o(e.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, "aria-controls": 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: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(l) {
+    e.searchTerm = l;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
+    return { key: s, fn: function(i) {
+      return [t._t(s, null, null, i)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "debounce-time": (a = t.search) == null ? void 0 : a.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(s, l) {
-    return { key: l, fn: function(i) {
-      return [t._t(l, null, null, i)];
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "debounce-time": (a = t.search) == null ? void 0 : a.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
+    return { key: s, fn: function(i) {
+      return [t._t(s, null, null, i)];
     } };
   })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? o(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
   })], 2) : t._e()], 1);
-}, wt = [], Lt = /* @__PURE__ */ K(
-  Ct,
-  St,
-  wt,
+}, Et = [], Dt = /* @__PURE__ */ F(
+  xt,
+  Ot,
+  Et,
   !1,
   null,
-  "443cef1f"
+  "0a1282c1"
 );
-const Ut = Lt.exports;
+const Jt = Dt.exports;
 export {
-  Ut as B,
-  jt as I,
-  gt as a,
-  Wt as b,
-  bt as u
+  Jt as B,
+  Ht as I,
+  wt as a,
+  Vt as b,
+  ht as u
 };
-//# sourceMappingURL=dropdown.DV7uhHNP.js.map
+//# sourceMappingURL=dropdown.BWsU98dn.js.map