@adyen/bento-vue2 1.34.0 → 1.35.0

package/dist/chunks/{dropdown.DpsQPLy-.js → dropdown.h_j0DsN2.js}

@@ -1,18 +1,19 @@
-import { ref as g, watch as le, computed as c, defineComponent as B, useSlots as ie, toRefs as re, nextTick as E, useAttrs as Le, toRef as O, inject as Se } from "vue";
+import { ref as g, watch as le, computed as u, defineComponent as B, useSlots as ie, toRefs as re, nextTick as E, useAttrs as Le, toRef as L, inject as Se } from "vue";
 import { d as oe, B as Oe } from "./typography.CqQaHXhq.js";
-import { g as N } from "./unique-id.XFfoKuc2.js";
+import { g as M } from "./unique-id.XFfoKuc2.js";
 import { u as Ce } from "./aria-label.CaUURpnB.js";
 import { u as U } from "./i18n.BQkEbtPM.js";
 import { u as $e } from "./use-form-layout-loading.D3lALhtC.js";
-import { a as K, b as A, B as M, c as Ee, D as De } from "./dropdown-default-textbox.kQ3pHsZe.js";
+import { a as K, b as A, B as N, c as Ee, D as De } from "./dropdown-default-textbox.BFx4TF5u.js";
 import { u as Be } from "./use-has-slot.C9lQZ6nz.js";
+/* empty css              */
 import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { s as z } from "./events.CMzGybJJ.js";
-import { a as d, B as W, b as j, c as Ie, u as Re } from "./use-cached-selected-values.B39-iEp4.js";
+import { a as c, B as W, b as j, c as Ie, u as Re } from "./use-cached-selected-values.it4ENg3q.js";
 import { B as C, a as Te } from "./keyboard-navigation.Clz1jOaA.js";
 import { P as se } from "./popper-container.CnWphJTN.js";
-import { B as Ae } from "./popover.UmNw_M-C.js";
-import { E as Ne, F as Me } from "./error-message.BnFyGbR7.js";
+import { B as Ae } from "./popover.DFWeWyxd.js";
+import { E as Me, F as Ne } from "./error-message.3tVTq0sW.js";
 import { B as ke } from "./directive.O3yEdalv.js";
 import "../assets/dropdown.css";
 const Pe = {
@@ -20,53 +21,61 @@ const Pe = {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    cancel: "Cancelar"
+  },
+  "ja-JP": {
+    apply: "適用",
+    cancel: "キャンセル"
   }
 }, Fe = (s, t, o, e) => {
-  const n = g(s.value), { t: l } = U();
+  const a = g(s.value), { t: l } = U();
   le(s, () => {
-    n.value = s.value;
+    a.value = s.value;
   });
-  const a = c(
-    () => JSON.stringify(n.value) === JSON.stringify(s.value)
-  ), u = () => {
-    e(d.SELECT, n.value), e(d.CLOSE_DROPDOWN);
-  }, r = () => {
-    n.value = s.value, e(d.CLOSE_DROPDOWN);
+  const n = u(
+    () => JSON.stringify(a.value) === JSON.stringify(s.value)
+  ), r = () => {
+    e(c.SELECT, a.value), e(c.CLOSE_DROPDOWN);
+  }, d = () => {
+    a.value = s.value, e(c.CLOSE_DROPDOWN);
   }, v = () => {
-    o.value && t.value && (n.value = s.value);
-  }, i = c(() => [
+    o.value && t.value && (a.value = s.value);
+  }, i = u(() => [
     {
       title: l("apply"),
-      event: u,
-      disabled: a.value
+      event: r,
+      disabled: n.value
     },
     {
       title: l("cancel"),
-      event: r
+      event: d
     }
   ]), p = (b) => {
-    n.value = b, t.value || e(d.SELECT, b);
+    a.value = b, t.value || e(c.SELECT, b);
   }, $ = (b) => {
-    p(b), e(d.TAB);
+    p(b), e(c.TAB);
   }, x = (b) => {
-    p(b), e(d.ENTER);
-  }, L = (b) => {
-    p(b), e(d.SPACE);
+    p(b), e(c.ENTER);
+  }, S = (b) => {
+    p(b), e(c.SPACE);
   }, h = () => {
-    r(), e(d.ESCAPE);
-  }, S = () => {
-    e(d.SHOW_MORE);
+    d(), e(c.ESCAPE);
+  }, O = () => {
+    e(c.SHOW_MORE);
   }, w = {
-    [d.SELECT]: p,
-    [d.SHOW_MORE]: S,
-    [d.TAB]: $,
-    [d.SPACE]: L,
-    [d.ENTER]: x
+    [c.SELECT]: p,
+    [c.SHOW_MORE]: O,
+    [c.TAB]: $,
+    [c.SPACE]: S,
+    [c.ENTER]: x
   };
   return {
     // Values
     actions: i,
-    internalSelectedValue: n,
+    internalSelectedValue: a,
     // Methods
     listeners: w,
     onEscapeKey: h,
@@ -183,11 +192,11 @@ const Pe = {
   },
   emits: [],
   setup(s, { expose: t, emit: o }) {
-    const e = s, n = ie(), { selectedValue: l, multiple: a } = re(e), u = g(null), { t: r } = U(), v = c(() => e.open && !e.disabled), i = c(() => r("noOptionsMatchThisSearch")), p = c(() => ({
+    const e = s, a = ie(), { selectedValue: l, multiple: n } = re(e), r = g(null), { t: d } = U(), v = u(() => e.open && !e.disabled), i = u(() => d("noOptionsMatchThisSearch")), p = u(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), $ = c(() => ({
+    })), $ = u(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: x, internalSelectedValue: L, listeners: h, onEscapeKey: S, onOutsideDropdownClick: w } = Fe(l, a, v, o), b = c(() => e != null && e.multiple ? Ae : se), f = c(() => {
+    })), { actions: x, internalSelectedValue: S, listeners: h, onEscapeKey: O, onOutsideDropdownClick: w } = Fe(l, n, v, o), b = u(() => e != null && e.multiple ? Ae : se), f = u(() => {
       var _;
       const m = {
         "min-width": `${(_ = e == null ? void 0 : e.targetElement) == null ? void 0 : _.clientWidth}px`,
@@ -198,7 +207,7 @@ const Pe = {
         actions: x.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: N(`dropdown-options-${e.id}`),
+        id: M(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
@@ -219,16 +228,16 @@ const Pe = {
     });
     return t({
       onOutsideDropdownClick: w
-    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: a, dropdownOptionsListboxRef: u, t: r, isDropdownOpen: v, noResultsMessage: i, conditionalClasses: p, conditionalListboxClasses: $, actions: x, internalSelectedValue: L, listeners: h, onEscapeKey: S, onOutsideDropdownClick: w, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: f, BentoListbox: j };
+    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: l, multiple: n, dropdownOptionsListboxRef: r, t: d, isDropdownOpen: v, noResultsMessage: i, conditionalClasses: p, conditionalListboxClasses: $, actions: x, internalSelectedValue: S, listeners: h, onEscapeKey: O, onOutsideDropdownClick: w, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: f, BentoListbox: j };
   }
 });
 var We = 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, attrs: { "aria-label": t.ariaLabel } }, "component", e.popperContainerOrPopoverProps, !1), [o("div", { on: { keydown: function(n) {
-    return !n.type.indexOf("key") && t._k(n.keyCode, "esc", 27, n.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, "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(n, l) {
-    return { key: l, fn: function(a) {
-      return [t._t(l, null, null, a)];
+  return o(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses, attrs: { "aria-label": t.ariaLabel } }, "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, "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(n) {
+      return [t._t(l, null, null, n)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
 }, je = [], Ue = /* @__PURE__ */ k(
@@ -240,28 +249,28 @@ var We = function() {
   "1f5636d7"
 );
 const qe = Ue.exports;
-let ne = 0;
+let ae = 0;
 const He = {
   beforeCreate() {
-    this.uuid = ne.toString(), ne += 1;
+    this.uuid = ae.toString(), ae += 1;
   }
 };
-var Ve = function() {
+var Je = 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: "#00112C", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, Je = [], Ye = /* @__PURE__ */ k(
+}, Ve = [], Ye = /* @__PURE__ */ k(
   He,
-  Ve,
   Je,
+  Ve,
   !1,
   null,
   null
 );
 const Ze = Ye.exports;
-let ae = 0;
+let ne = 0;
 const Qe = {
   beforeCreate() {
-    this.uuid = ae.toString(), ae += 1;
+    this.uuid = ne.toString(), ne += 1;
   }
 };
 var Xe = function() {
@@ -340,57 +349,59 @@ const tt = et.exports, ot = B({
   },
   emits: ["clear", "close", "input", "keydown", "open"],
   setup(s, { emit: t }) {
-    const o = s, e = c(() => ({
+    const o = s, e = u(() => ({
       [`b-dropdown-small-textbox--${K.DISABLED}`]: o.disabled,
       [`b-dropdown-small-textbox--${K.READONLY}`]: o.readonly,
       [`b-dropdown-small-textbox--${K.OPENED}`]: o.open
-    })), n = c(() => o.open && !o.disabled && !o.readonly), l = (p) => {
+    })), a = u(() => o.open && !o.disabled && !o.readonly), l = (p) => {
       t("input", p);
-    }, a = (p) => {
+    }, n = (p) => {
       t("keydown", p);
-    }, u = (p) => {
-      z(p), t("open");
     }, r = (p) => {
+      z(p), t("open");
+    }, d = (p) => {
       z(p), t("close");
     }, v = (p) => {
       z(p), t("clear");
     }, i = {
       [A.INPUT]: l,
-      [A.OPEN]: u,
-      [A.CLOSE]: r,
+      [A.OPEN]: r,
+      [A.CLOSE]: d,
       [A.CLEAR]: v,
-      [A.KEYDOWN]: a
+      [A.KEYDOWN]: n
     };
-    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: n, onInput: l, onKeyDown: a, openDropdown: u, closeDropdown: r, clearValue: v, listeners: i, BentoDropdownSize: M, DropdownBaseTextbox: Ee, ChevronDownSmallIcon: Ze, ChevronUpSmallIcon: tt };
+    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: a, onInput: l, onKeyDown: n, openDropdown: r, closeDropdown: d, clearValue: v, listeners: i, BentoDropdownSize: N, DropdownBaseTextbox: Ee, ChevronDownSmallIcon: Ze, ChevronUpSmallIcon: tt };
   }
 });
-var nt = function() {
+var at = 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({ 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);
-}, at = [], lt = /* @__PURE__ */ k(
+}, nt = [], lt = /* @__PURE__ */ k(
   st,
-  nt,
   at,
+  nt,
   !1,
   null,
   "ba322765"
 );
 const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
   if (e.items) {
-    const n = e.items.filter(
-      (a) => s.value.find((u) => u.value === a.value)
+    const a = e.items.filter(
+      (n) => s.value.find((r) => r.value === n.value)
     );
-    n.length === e.items.length ? o.push(e.label) : n.forEach(({ label: a }) => o.push(a));
+    a.length === e.items.length ? o.push(e.label) : a.forEach(({ label: n }) => o.push(n));
   }
-  return s.value.find((n) => n.value === e.value) && o.push(e.label), o;
-}, []).join(", "), dt = ({ items: s, placeholder: t, selectedValues: o }) => {
-  const e = c(() => s.value.find((l) => {
-    var a;
-    return (a = l.items) == null ? void 0 : a.length;
-  }));
-  return c(() => o.value.length ? e.value ? rt(o, s) : o.value.map(({ label: l }) => l).join(", ") : t.value || null);
+  return s.value.find((a) => a.value === e.value) && o.push(e.label), o;
+}, []).join(", "), dt = ({ items: s, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+  const a = u(
+    () => e.value && s.value.find((n) => {
+      var r;
+      return (r = n.items) == null ? void 0 : r.length;
+    })
+  );
+  return u(() => o.value.length ? a.value ? rt(o, s) : o.value.map(({ label: n }) => n).join(", ") : t.value || null);
 }, de = (s) => {
   var t;
   (t = s.value.$children) == null || t[0].$refs.textbox.focus();
@@ -399,27 +410,27 @@ const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
-  isDynamicFltering: n,
+  isDynamicFltering: a,
   items: l,
-  isMultiple: a
-}, u, r, v) => {
+  isMultiple: n
+}, r, d, v) => {
   const i = ({ detail: f }) => {
-    f.preventDefault(), e.value || r(), E(() => {
+    f.preventDefault(), e.value || d(), E(() => {
       var m;
-      a ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
+      n ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
         o.value
       ), t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[o.value].$el.focus());
     });
   }, p = ({ detail: f }) => {
-    f.preventDefault(), e.value || r(), E(() => {
+    f.preventDefault(), e.value || d(), E(() => {
       t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
         o.value
       ), t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[o.value].$el.focus();
     });
   }, $ = () => {
-    e.value || (r(), E(() => {
+    e.value || (d(), E(() => {
       var f, m;
-      if (a) {
+      if (n) {
         const _ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
         (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[_.length - 1].$children[l.length - 1].$el.focus();
       } else
@@ -427,33 +438,33 @@ const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
     }));
   }, x = () => {
     e.value && (v(), de(s));
-  }, L = () => {
+  }, S = () => {
     e.value && v();
   }, h = () => {
-    e.value || r(), E(() => {
+    e.value || d(), E(() => {
       var f;
       (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     });
-  }, S = ({ detail: f }) => {
-    f.preventDefault(), u(), e.value && E(() => {
+  }, O = ({ detail: f }) => {
+    f.preventDefault(), r(), e.value && E(() => {
       var m, _;
-      a ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (_ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[o.value].$el.focus();
+      n ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (_ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[o.value].$el.focus();
     });
   }, w = () => {
-    u(), e.value && E(() => {
+    r(), e.value && E(() => {
       var f, m;
-      a ? (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[o.value].$el.focus();
+      n ? (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[o.value].$el.focus();
     });
   };
-  return c(() => ({
-    ...n.value ? {} : { [C.SPACE]: S },
+  return u(() => ({
+    ...a.value ? {} : { [C.SPACE]: O },
     [C.ENTER]: w,
     [C.ARROW_DOWN]: i,
     [C.ARROW_UP]: p,
     [C.END]: $,
     [C.ESCAPE]: x,
     [C.HOME]: h,
-    [C.TAB]: L
+    [C.TAB]: S
   }));
 }, ut = ({ inputContainerRef: s, isDropdownOpen: t }, o) => {
   const e = () => {
@@ -462,21 +473,21 @@ const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
     });
   };
   return {
-    [d.ENTER]: e,
-    [d.ESCAPE]: e,
-    [d.TAB]: e,
-    [d.SPACE]: e
+    [c.ENTER]: e,
+    [c.ESCAPE]: e,
+    [c.TAB]: e,
+    [c.SPACE]: e
   };
 };
 function pt(s, t, o, e) {
-  const n = g(s), l = g(t), a = (r, v = []) => v.flatMap((i) => i.label.toLocaleLowerCase().includes(r) ? e != null && e.value && i.items ? [...a(r, i.items)] : [i, ...a(r, i.items)] : i.items ? [...a(r, i.items)] : []);
-  return le(n, () => {
-    o !== void 0 && o(n.value);
-  }), c(() => {
-    if (!n.value || o !== void 0)
+  const a = g(s), l = g(t), n = (d, v = []) => v.flatMap((i) => i.label.toLocaleLowerCase().includes(d) ? e != null && e.value && i.items ? [...n(d, i.items)] : [i, ...n(d, i.items)] : i.items ? [...n(d, i.items)] : []);
+  return le(a, () => {
+    o !== void 0 && o(a.value);
+  }), u(() => {
+    if (!a.value || o !== void 0)
       return l.value;
-    const r = n.value.toLocaleLowerCase();
-    return a(r, l.value);
+    const d = a.value.toLocaleLowerCase();
+    return n(d, l.value);
   });
 }
 const ft = {
@@ -484,6 +495,14 @@ const ft = {
     all: "All",
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
+  },
+  "pt-BR": {
+    all: "Todos",
+    clearFilter: "Limpar filtro"
+  },
+  "ja-JP": {
+    all: "すべて",
+    clearFilter: "フィルターをクリア"
   }
 }, vt = Symbol("input field component injection key"), mt = B({
   i18n: { messages: ft },
@@ -621,7 +640,7 @@ const ft = {
     size: {
       type: String,
       default: null,
-      validator: (s) => Object.values(M).includes(s)
+      validator: (s) => Object.values(N).includes(s)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -652,24 +671,25 @@ const ft = {
   emits: ["input", "show-more"],
   setup(s, { emit: t }) {
     var te;
-    const o = s, e = Le(), n = ie(), l = Be(n), { t: a } = U(), u = g(null), r = g(null), v = g(null), i = g(!1), p = N("bento-dropdown-options-container"), $ = N("dropdown-label"), x = N("dropdown-description"), L = N("dropdown-error"), { isReadOnly: h } = $e(O(o, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: w, setCachedValues: b } = Ie(
-      O(o, "items"),
-      O(o, "value"),
-      O(o, "multiple")
+    const o = s, e = Le(), a = ie(), l = Be(a), { t: n } = U(), r = g(null), d = g(null), v = g(null), i = g(!1), p = M("bento-dropdown-options-container"), $ = M("dropdown-label"), x = M("dropdown-description"), S = M("dropdown-error"), { isReadOnly: h } = $e(L(o, "readonly")), { cachedSelectedListboxOptions: O, cachedListboxSelectedValues: w, setCachedValues: b } = Ie(
+      L(o, "items"),
+      L(o, "value"),
+      L(o, "multiple")
     ), f = g(e["aria-label"]), { ariaLabel: m, label: _ } = re(o), ce = Ce({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: m || f,
       label: _,
-      defaultFallback: a("ariaLabelFallback")
-    }), q = o.size === M.SMALL || Se(vt, !1), ue = c(() => q ? M.SMALL : M.DEFAULT), pe = c(() => ({
+      defaultFallback: n("ariaLabelFallback")
+    }), q = o.size === N.SMALL || Se(vt, !1), ue = u(() => q ? N.SMALL : N.DEFAULT), pe = u(() => ({
       "b-dropdown--condensed": o.condensed
-    })), fe = c(() => ({
+    })), fe = u(() => ({
       "b-dropdown__description--error": !!o.errorMessage
-    })), D = g(""), I = O(o, "items"), H = O(o, "staticCategories"), ve = pt(D, I, (te = o == null ? void 0 : o.search) == null ? void 0 : te.searchEvent, H), F = c(() => o.dynamicFiltering && !!D.value), me = dt({
+    })), D = g(""), I = L(o, "items"), H = L(o, "staticCategories"), ve = pt(D, I, (te = o == null ? void 0 : o.search) == null ? void 0 : te.searchEvent, H), F = u(() => o.dynamicFiltering && !!D.value), me = dt({
       items: I,
-      placeholder: O(o, "placeholder"),
-      selectedValues: S
-    }), be = c(() => {
+      placeholder: L(o, "placeholder"),
+      isMultiSelect: L(o, "multiple"),
+      selectedValues: O
+    }), be = u(() => {
       if (o != null && o.multiple && Array.isArray(o.value))
         return o.items.filter(
           ({ value: y }) => (o == null ? void 0 : o.value) && (o == null ? void 0 : o.value).includes(y)
@@ -681,18 +701,18 @@ const ft = {
         return y ? y.items.find((T) => T.value === o.value) : null;
       }
       return o.items.find(({ value: y }) => y === (o == null ? void 0 : o.value));
-    }), V = c(() => {
+    }), J = u(() => {
       const y = o.items.findIndex(({ value: R }) => o.value === R);
       return y > 0 ? y : 0;
-    }), { isMultiLevelSelect: J, flattenedItemsList: Y } = Re(I), ye = c(() => {
+    }), { isMultiLevelSelect: V, flattenedItemsList: Y } = Re(I), ye = u(() => {
       var y;
       if (o.multiple) {
-        const R = (y = o == null ? void 0 : o.value) == null ? void 0 : y.length, T = J.value ? Y.value.length : I.value.length;
-        return !o.hasMoreItems && T === R ? a("all") : R;
+        const R = (y = o == null ? void 0 : o.value) == null ? void 0 : y.length, T = V.value ? Y.value.length : I.value.length;
+        return !o.hasMoreItems && T === R ? n("all") : R;
       }
       return null;
-    }), _e = c(
-      () => `${o.description ? x : ""} ${o.errorMessage ? L : ""}`.trim() || null
+    }), _e = u(
+      () => `${o.description ? x : ""} ${o.errorMessage ? S : ""}`.trim() || null
     ), Z = () => {
       h.value || (i.value = !0);
     }, P = () => {
@@ -704,14 +724,14 @@ const ft = {
     }, X = (y) => {
       o.multiple || (D.value = "", i.value = !1), b(y), t("input", w.value);
     }, G = () => {
-      t(d.SHOW_MORE);
+      t(c.SHOW_MORE);
     }, xe = ct(
       {
-        inputContainerRef: u,
+        inputContainerRef: r,
         optionsContainerRef: v,
-        selectedValueIndex: V,
+        selectedValueIndex: J,
         isDropdownOpen: i,
-        isDynamicFltering: O(o, "dynamicFiltering"),
+        isDynamicFltering: L(o, "dynamicFiltering"),
         items: o.items,
         isMultiple: o.multiple
       },
@@ -720,14 +740,14 @@ const ft = {
       P
     ), ee = ut(
       {
-        inputContainerRef: u,
+        inputContainerRef: r,
         isDropdownOpen: i
       },
       P
     ), he = {
-      [d.CLOSE_DROPDOWN]: P,
-      [d.SELECT]: X,
-      [d.SHOW_MORE]: G,
+      [c.CLOSE_DROPDOWN]: P,
+      [c.SELECT]: X,
+      [c.SHOW_MORE]: G,
       ...ee
     };
     return o.error && oe(
@@ -736,21 +756,21 @@ const ft = {
                         Having the field as "undefined" will hide/remove the error.
                         <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), o.size && oe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), { __sfc: !0, attrs: e, slots: n, hasSlot: l, props: o, emit: t, t: a, inputContainerRef: u, inputContainerRefWrapper: r, optionsContainerRef: v, isDropdownOpen: i, dropdownOptionsContainerId: p, labelId: $, descriptionId: x, errorId: L, isReadOnly: h, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: w, setCachedValues: b, ariaLabelAttribute: f, ariaLabel: m, label: _, computedAriaLabel: ce, isInputComponent: q, size: ue, conditionalClasses: pe, descriptionConditionalClasses: fe, searchTerm: D, items: I, staticCategories: H, filteredItems: ve, isSearching: F, displayValue: me, selectedValueItem: be, selectedValueIndex: V, isMultiLevelSelect: J, flattenedItemsList: Y, additionalItemsSelected: ye, ariaDescribedBy: _e, openDropdown: Z, closeDropdown: P, toggleDropdown: Q, clickOutsideDropdown: ge, onOptionSelected: X, emitShowMoreEvent: G, textboxKeyboardNavigationListeners: xe, listboxKeyboardNavigationListeners: ee, listboxListeners: he, BentoDropdownOptionsContainer: qe, BentoTypography: Oe, ErrorMessage: Ne, FieldLabel: Me, vBentoClickOutsideDirective: ke, vBentoKeyboardNavigationDirective: Te };
+    ), o.size && oe('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), { __sfc: !0, attrs: e, slots: a, hasSlot: l, props: o, emit: t, t: n, inputContainerRef: r, inputContainerRefWrapper: d, optionsContainerRef: v, isDropdownOpen: i, dropdownOptionsContainerId: p, labelId: $, descriptionId: x, errorId: S, isReadOnly: h, cachedSelectedListboxOptions: O, cachedListboxSelectedValues: w, setCachedValues: b, ariaLabelAttribute: f, ariaLabel: m, label: _, computedAriaLabel: ce, isInputComponent: q, size: ue, conditionalClasses: pe, descriptionConditionalClasses: fe, searchTerm: D, items: I, staticCategories: H, filteredItems: ve, isSearching: F, displayValue: me, selectedValueItem: be, selectedValueIndex: J, isMultiLevelSelect: V, flattenedItemsList: Y, additionalItemsSelected: ye, ariaDescribedBy: _e, openDropdown: Z, closeDropdown: P, toggleDropdown: Q, clickOutsideDropdown: ge, onOptionSelected: X, emitShowMoreEvent: G, textboxKeyboardNavigationListeners: xe, listboxKeyboardNavigationListeners: ee, listboxListeners: he, BentoDropdownOptionsContainer: qe, BentoTypography: Oe, ErrorMessage: Me, FieldLabel: Ne, vBentoClickOutsideDirective: ke, vBentoKeyboardNavigationDirective: Te };
   }
 });
 var yt = function() {
-  var n;
+  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.size, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.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: 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, a) {
-    return { key: a, fn: function(u) {
-      return [t._t(a, null, null, u)];
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(l, n) {
+    return { key: n, fn: function(r) {
+      return [t._t(n, null, null, r)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (n = t.search) == null ? void 0 : n.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, a) {
-    return { key: a, fn: function(u) {
-      return [t._t(a, null, null, u)];
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "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, n) {
+    return { key: n, fn: function(r) {
+      return [t._t(n, null, null, r)];
     } };
   })], 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) + " ")];
@@ -761,12 +781,12 @@ var yt = function() {
   _t,
   !1,
   null,
-  "243401aa"
+  "501c3a2e"
 );
-const Mt = gt.exports;
+const kt = gt.exports;
 export {
-  Mt as B,
+  kt as B,
   vt as I,
   pt as u
 };
-//# sourceMappingURL=dropdown.DpsQPLy-.js.map
+//# sourceMappingURL=dropdown.h_j0DsN2.js.map