@adyen/bento-vue2 1.43.0 → 1.45.0

package/dist/chunks/{dropdown.BfzsI2Th.js → dropdown.BqsoncJr.js}

@@ -1,21 +1,21 @@
-import { ref as g, watch as le, computed as u, defineComponent as I, 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.Bu_WAKdf.js";
-import { a as K, b as N, B as A, c as Ce, D as $e } from "./dropdown-default-textbox.DPZmj7xJ.js";
+import { ref as g, watch as re, computed as u, defineComponent as I, useSlots as de, toRefs as ce, nextTick as E, useAttrs as Oe, toRef as w, inject as Ce } from "vue";
+import { d as ae, B as $e } from "./typography.J1v_SPG3.js";
+import { a as K, b as N, c as Ee, B as A, D as De } from "./dropdown-default-textbox.DBoSso4J.js";
 import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { s as z } from "./events.CMzGybJJ.js";
-import { g as M } from "./generate-uid.D-HFI38h.js";
-import { u as Ee } from "./aria-label.CaUURpnB.js";
+import { g as M } from "./generate-uid.NJ8tVoha.js";
+import { u as Ie } from "./aria-label.CaUURpnB.js";
 import { u as U } from "./i18n.BQkEbtPM.js";
-import { u as De } from "./use-form-layout-loading.D3lALhtC.js";
-import { u as Ie } from "./use-has-slot.C9lQZ6nz.js";
-import { a as c, B as W, b as j, c as Be, u as Re } from "./use-cached-selected-values.CAlfyb_L.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 Ne } from "./popover.Uy-vuQq5.js";
-import { E as Ae, F as Me } from "./error-message.B7uoqQpq.js";
-import { B as ke } from "./directive.O3yEdalv.js";
+import { u as Be } from "./use-form-layout-loading.D3lALhtC.js";
+import { u as Re } from "./use-has-slot.C9lQZ6nz.js";
+import { a as c, b as W, B as j, c as Te, u as Ne } from "./use-cached-selected-values.impKjAIS.js";
+import { B as C, a as Ae } from "./keyboard-navigation.Clz1jOaA.js";
+import { B as Me } from "./directive.O3yEdalv.js";
+import { F as ke, E as Pe } from "./error-message.Ccc1sTTp.js";
+import { P as ne } from "./popper-container.B1iB2ovW.js";
+import { B as Fe } from "./popover.DsUymZWJ.js";
 import "../assets/dropdown.css";
-const Pe = {
+const Ke = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
@@ -29,9 +29,9 @@ const Pe = {
     apply: "適用",
     cancel: "キャンセル"
   }
-}, Fe = (s, t, o, e) => {
-  const a = g(s.value), { t: l } = U();
-  le(s, () => {
+}, ze = (s, t, o, e) => {
+  const a = g(s.value), { t: i } = U();
+  re(s, () => {
     a.value = s.value;
   });
   const n = u(
@@ -40,51 +40,51 @@ const Pe = {
     e(c.SELECT, a.value), e(c.CLOSE_DROPDOWN);
   }, d = () => {
     a.value = s.value, e(c.CLOSE_DROPDOWN);
-  }, v = () => {
+  }, m = () => {
     o.value && t.value && (a.value = s.value);
-  }, i = u(() => [
+  }, p = u(() => [
     {
-      title: l("apply"),
+      title: i("apply"),
       event: r,
       disabled: n.value
     },
     {
-      title: l("cancel"),
+      title: i("cancel"),
       event: d
     }
-  ]), p = (b) => {
+  ]), l = (b) => {
     a.value = b, t.value || e(c.SELECT, b);
   }, $ = (b) => {
-    p(b), e(c.TAB);
-  }, x = (b) => {
-    p(b), e(c.ENTER);
+    l(b), e(c.TAB);
+  }, L = (b) => {
+    l(b), e(c.ENTER);
   }, S = (b) => {
-    p(b), e(c.SPACE);
-  }, h = () => {
-    d(), e(c.ESCAPE);
+    l(b), e(c.SPACE);
   }, O = () => {
+    d(), e(c.ESCAPE);
+  }, x = () => {
     e(c.SHOW_MORE);
-  }, w = {
-    [c.SELECT]: p,
-    [c.SHOW_MORE]: O,
+  }, h = {
+    [c.SELECT]: l,
+    [c.SHOW_MORE]: x,
     [c.TAB]: $,
     [c.SPACE]: S,
-    [c.ENTER]: x
+    [c.ENTER]: L
   };
   return {
     // Values
-    actions: i,
+    actions: p,
     internalSelectedValue: a,
     // Methods
-    listeners: w,
-    onEscapeKey: h,
-    onOutsideDropdownClick: v
+    listeners: h,
+    onEscapeKey: O,
+    onOutsideDropdownClick: m
   };
-}, Ke = I({
-  i18n: { messages: Pe },
+}, We = I({
+  i18n: { messages: Ke },
   name: "bento-dropdown-options-container"
-}), ze = /* @__PURE__ */ I({
-  ...Ke,
+}), je = /* @__PURE__ */ I({
+  ...We,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -139,8 +139,8 @@ const Pe = {
      */
     lazyLoadType: {
       type: String,
-      default: W.AUTOMATIC,
-      validator: (s) => Object.values(W).includes(s)
+      default: j.AUTOMATIC,
+      validator: (s) => Object.values(j).includes(s)
     },
     /**
      * Indicates if new options are loading.
@@ -170,7 +170,7 @@ const Pe = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: j.props.searching,
+    searching: W.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -179,7 +179,7 @@ const Pe = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: se.props.targetElement.type, required: !0 },
+    targetElement: { type: ne.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.
@@ -191,19 +191,19 @@ const Pe = {
   },
   emits: [],
   setup(s, { expose: t, emit: o }) {
-    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(() => ({
+    const e = s, a = de(), { selectedValue: i, multiple: n } = ce(e), r = g(null), { t: d } = U(), m = u(() => e.open && !e.disabled), p = u(() => d("noOptionsMatchThisSearch")), l = u(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
     })), $ = u(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: x, internalSelectedValue: S, listeners: h, onEscapeKey: O, onOutsideDropdownClick: w } = Fe(l, n, v, o), b = u(() => e != null && e.multiple ? Ne : se), f = u(() => {
+    })), { actions: L, internalSelectedValue: S, listeners: O, onEscapeKey: x, onOutsideDropdownClick: h } = ze(i, n, m, o), b = u(() => e != null && e.multiple ? Fe : ne), f = u(() => {
       var _;
-      const m = {
+      const v = {
         "min-width": `${(_ = e == null ? void 0 : e.targetElement) == null ? void 0 : _.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return e != null && e.multiple ? {
         actionsLayout: "space-between",
-        actions: x.value,
+        actions: L.value,
         divider: !0,
         fallbackPosition: ["top-start"],
         id: M(`dropdown-options-${e.id}`),
@@ -211,7 +211,7 @@ const Pe = {
         position: "bottom-start",
         style: {
           width: "auto",
-          ...m
+          ...v
         },
         targetElement: e.targetElement
       } : {
@@ -219,75 +219,75 @@ const Pe = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: v.value ? "block" : "none",
-          ...m
+          display: m.value ? "block" : "none",
+          ...v
         },
         targetElement: e.targetElement
       };
     });
     return t({
-      onOutsideDropdownClick: w
-    }), { __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 };
+      onOutsideDropdownClick: h
+    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: i, multiple: n, dropdownOptionsListboxRef: r, t: d, isDropdownOpen: m, noResultsMessage: p, conditionalClasses: l, conditionalListboxClasses: $, actions: L, internalSelectedValue: S, listeners: O, onEscapeKey: x, onOutsideDropdownClick: h, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: f, BentoListbox: W };
   }
 });
-var We = function() {
+var Ue = 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(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)];
+  } } }, [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, i) {
+    return { key: i, fn: function(n) {
+      return [t._t(i, null, null, n)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, je = [], Ue = /* @__PURE__ */ k(
-  ze,
-  We,
+}, He = [], qe = /* @__PURE__ */ k(
   je,
+  Ue,
+  He,
   !1,
   null,
   "b7543bfc"
 );
-const He = Ue.exports;
-let ae = 0;
-const qe = {
+const Ve = qe.exports;
+let le = 0;
+const Je = {
   beforeCreate() {
-    this.uuid = ae.toString(), ae += 1;
+    this.uuid = le.toString(), le += 1;
   }
 };
-var Je = function() {
+var Ye = 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" } })]);
-}, Ve = [], Ye = /* @__PURE__ */ k(
-  qe,
+}, Ze = [], Qe = /* @__PURE__ */ k(
   Je,
-  Ve,
+  Ye,
+  Ze,
   !1,
   null,
   null
 );
-const Ze = Ye.exports;
-let ne = 0;
-const Qe = {
+const Xe = Qe.exports;
+let ie = 0;
+const Ge = {
   beforeCreate() {
-    this.uuid = ne.toString(), ne += 1;
+    this.uuid = ie.toString(), ie += 1;
   }
 };
-var Xe = function() {
+var et = 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: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, Ge = [], et = /* @__PURE__ */ k(
-  Qe,
-  Xe,
+}, tt = [], ot = /* @__PURE__ */ k(
   Ge,
+  et,
+  tt,
   !1,
   null,
   null
 );
-const tt = et.exports, ot = I({
+const st = ot.exports, at = I({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), st = /* @__PURE__ */ I({
-  ...ot,
+}), nt = /* @__PURE__ */ I({
+  ...at,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -352,75 +352,75 @@ const tt = et.exports, ot = I({
       [`b-dropdown-small-textbox--${K.DISABLED}`]: o.disabled,
       [`b-dropdown-small-textbox--${K.READONLY}`]: o.readonly,
       [`b-dropdown-small-textbox--${K.OPENED}`]: o.open
-    })), a = u(() => o.open && !o.disabled && !o.readonly), l = (p) => {
-      t("input", p);
-    }, n = (p) => {
-      t("keydown", p);
-    }, r = (p) => {
-      z(p), t("open");
-    }, d = (p) => {
-      z(p), t("close");
-    }, v = (p) => {
-      z(p), t("clear");
-    }, i = {
-      [N.INPUT]: l,
+    })), a = u(() => o.open && !o.disabled && !o.readonly), i = (l) => {
+      t("input", l);
+    }, n = (l) => {
+      t("keydown", l);
+    }, r = (l) => {
+      z(l), t("open");
+    }, d = (l) => {
+      z(l), t("close");
+    }, m = (l) => {
+      z(l), t("clear");
+    }, p = {
+      [N.INPUT]: i,
       [N.OPEN]: r,
       [N.CLOSE]: d,
-      [N.CLEAR]: v,
+      [N.CLEAR]: m,
       [N.KEYDOWN]: n
     };
-    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: a, onInput: l, onKeyDown: n, openDropdown: r, closeDropdown: d, clearValue: v, listeners: i, BentoDropdownSize: A, DropdownBaseTextbox: Ce, ChevronDownSmallIcon: Ze, ChevronUpSmallIcon: tt };
+    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: a, onInput: i, onKeyDown: n, openDropdown: r, closeDropdown: d, clearValue: m, listeners: p, BentoDropdownSize: A, DropdownBaseTextbox: Ee, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: st };
   }
 });
-var at = function() {
+var lt = 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);
-}, nt = [], lt = /* @__PURE__ */ k(
-  st,
-  at,
+}, it = [], rt = /* @__PURE__ */ k(
   nt,
+  lt,
+  it,
   !1,
   null,
   "ba322765"
 );
-const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
+const dt = rt.exports, ct = (s, t) => t.value.reduce((o, e) => {
   if (e.items) {
     const a = e.items.filter(
       (n) => s.value.find((r) => r.value === n.value)
     );
-    a.length === e.items.length ? o.push(e.label) : a.forEach(({ label: n }) => o.push(n));
+    a.length === e.items.length ? o.push(e.displayValue ?? e.label) : a.forEach(({ label: n, displayValue: r }) => o.push(r ?? n));
   }
-  return s.value.find((a) => a.value === e.value) && o.push(e.label), o;
-}, []).join(", "), dt = ({ items: s, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+  return s.value.find((a) => a.value === e.value) && o.push(e.displayValue ?? e.label), o;
+}, []).join(", "), ut = ({ 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) => {
+  return u(() => o.value.length ? a.value ? ct(o, s) : o.value.map(({ label: n, displayValue: r }) => r ?? n).join(", ") : t.value || null);
+}, ue = (s) => {
   var t;
   (t = s.value.$children) == null || t[0].$refs.textbox.focus();
-}, ct = ({
+}, pt = ({
   inputContainerRef: s,
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
   isDynamicFltering: a,
-  items: l,
+  items: i,
   isMultiple: n
-}, r, d, v) => {
-  const i = ({ detail: f }) => {
+}, r, d, m) => {
+  const p = ({ detail: f }) => {
     f.preventDefault(), e.value || d(), E(() => {
-      var m;
-      n ? (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
+      var v;
+      n ? (v = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[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 }) => {
+  }, l = ({ detail: f }) => {
     f.preventDefault(), e.value || d(), E(() => {
       t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
         o.value
@@ -428,47 +428,47 @@ const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
     });
   }, $ = () => {
     e.value || (d(), E(() => {
-      var f, m;
+      var f, v;
       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();
+        (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[_.length - 1].$children[i.length - 1].$el.focus();
       } else
-        (m = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[l.length - 1].$el.focus();
+        (v = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[i.length - 1].$el.focus();
     }));
-  }, x = () => {
-    e.value && (v(), de(s));
+  }, L = () => {
+    e.value && (m(), ue(s));
   }, S = () => {
-    e.value && v();
-  }, h = () => {
+    e.value && m();
+  }, O = () => {
     e.value || d(), E(() => {
       var f;
       (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     });
-  }, O = ({ detail: f }) => {
+  }, x = ({ detail: f }) => {
     f.preventDefault(), r(), e.value && E(() => {
-      var m, _;
-      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();
+      var v, _;
+      n ? (v = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[0].$el.focus() : (_ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[o.value].$el.focus();
     });
-  }, w = () => {
+  }, h = () => {
     r(), e.value && E(() => {
-      var f, m;
-      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();
+      var f, v;
+      n ? (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (v = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || v[o.value].$el.focus();
     });
   };
   return u(() => ({
-    ...a.value ? {} : { [C.SPACE]: O },
-    [C.ENTER]: w,
-    [C.ARROW_DOWN]: i,
-    [C.ARROW_UP]: p,
+    ...a.value ? {} : { [C.SPACE]: x },
+    [C.ENTER]: h,
+    [C.ARROW_DOWN]: p,
+    [C.ARROW_UP]: l,
     [C.END]: $,
-    [C.ESCAPE]: x,
-    [C.HOME]: h,
+    [C.ESCAPE]: L,
+    [C.HOME]: O,
     [C.TAB]: S
   }));
-}, ut = ({ inputContainerRef: s, isDropdownOpen: t }, o) => {
+}, ft = ({ inputContainerRef: s, isDropdownOpen: t }, o) => {
   const e = () => {
     t.value && o(), E(() => {
-      de(s);
+      ue(s);
     });
   };
   return {
@@ -478,18 +478,18 @@ const it = lt.exports, rt = (s, t) => t.value.reduce((o, e) => {
     [c.SPACE]: e
   };
 };
-function pt(s, t, o, e) {
-  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, () => {
+function vt(s, t, o, e) {
+  const a = g(s), i = g(t), n = (d, m = []) => m.flatMap((p) => p.label.toLocaleLowerCase().includes(d) ? e != null && e.value && p.items ? [...n(d, p.items)] : [p, ...n(d, p.items)] : p.items ? [...n(d, p.items)] : []);
+  return re(a, () => {
     o !== void 0 && o(a.value);
   }), u(() => {
     if (!a.value || o !== void 0)
-      return l.value;
+      return i.value;
     const d = a.value.toLocaleLowerCase();
-    return n(d, l.value);
+    return n(d, i.value);
   });
 }
-const ft = {
+const mt = {
   "en-US": {
     all: "All",
     clearSearch: "Clear filter",
@@ -503,15 +503,15 @@ const ft = {
     all: "すべて",
     clearFilter: "フィルターをクリア"
   }
-}, vt = Symbol("input field component injection key"), Mt = Symbol("input field hint injection key"), mt = I({
-  i18n: { messages: ft },
+}, bt = Symbol("input field component injection key"), Pt = Symbol("input field hint injection key"), yt = I({
+  i18n: { messages: mt },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: $e,
-    DropdownInputSmall: it
+    DropdownInputDefault: De,
+    DropdownInputSmall: dt
   }
-}), bt = /* @__PURE__ */ I({
-  ...mt,
+}), _t = /* @__PURE__ */ I({
+  ...yt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -598,8 +598,8 @@ const ft = {
      */
     lazyLoadType: {
       type: String,
-      default: j.props.lazyLoadType.default,
-      validator: (s) => Object.values(W).includes(s)
+      default: W.props.lazyLoadType.default,
+      validator: (s) => Object.values(j).includes(s)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -668,125 +668,131 @@ const ft = {
     }
   },
   emits: ["input", "show-more"],
-  setup(s, { emit: t }) {
-    var te;
-    const o = s, e = Le(), a = ie(), l = Ie(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 } = De(L(o, "readonly")), { cachedSelectedListboxOptions: O, cachedListboxSelectedValues: w, setCachedValues: b } = Be(
-      L(o, "items"),
-      L(o, "value"),
-      L(o, "multiple")
-    ), f = g(e["aria-label"]), { ariaLabel: m, label: _ } = re(o), ce = Ee({
+  setup(s, { expose: t, emit: o }) {
+    var se;
+    const e = s, a = Oe(), i = de(), n = Re(i), { t: r } = U(), d = g(null), m = g(null), p = g(null), l = g(!1), $ = M("bento-dropdown-options-container"), L = M("dropdown-label"), S = M("dropdown-description"), O = M("dropdown-error"), { isReadOnly: x } = Be(w(e, "readonly")), { cachedSelectedListboxOptions: h, cachedListboxSelectedValues: b, setCachedValues: f } = Te(
+      w(e, "items"),
+      w(e, "value"),
+      w(e, "multiple")
+    ), v = g(a["aria-label"]), { ariaLabel: _, label: H } = ce(e), pe = Ie({
       // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: m || f,
-      label: _,
-      defaultFallback: n("ariaLabelFallback")
-    }), H = o.size === A.SMALL || Se(vt, !1), ue = u(() => H ? A.SMALL : A.DEFAULT), pe = u(() => ({
-      "b-dropdown--condensed": o.condensed
-    })), fe = u(() => ({
-      "b-dropdown__description--error": !!o.errorMessage
-    })), D = g(""), B = L(o, "items"), q = L(o, "staticCategories"), ve = pt(D, B, (te = o == null ? void 0 : o.search) == null ? void 0 : te.searchEvent, q), F = u(() => o.dynamicFiltering && !!D.value), me = dt({
+      ariaLabel: _ || v,
+      label: H,
+      defaultFallback: r("ariaLabelFallback")
+    }), q = e.size === A.SMALL || Ce(bt, !1), fe = u(() => q ? A.SMALL : A.DEFAULT), ve = u(() => ({
+      "b-dropdown--condensed": e.condensed
+    })), me = u(() => ({
+      "b-dropdown__description--error": !!e.errorMessage
+    })), D = g(""), B = w(e, "items"), V = w(e, "staticCategories"), be = vt(D, B, (se = e == null ? void 0 : e.search) == null ? void 0 : se.searchEvent, V), F = u(() => e.dynamicFiltering && !!D.value), ye = ut({
       items: B,
-      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)
+      placeholder: w(e, "placeholder"),
+      isMultiSelect: w(e, "multiple"),
+      selectedValues: h
+    }), _e = u(() => {
+      if (e != null && e.multiple && Array.isArray(e.value))
+        return e.items.filter(
+          ({ value: y }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(y)
         );
-      if (!o.multiple && o.staticCategories) {
-        const y = o.items.find(
-          (T) => T.items.some((we) => we.value === o.value)
+      if (!e.multiple && e.staticCategories) {
+        const y = e.items.find(
+          (T) => T.items.some((Se) => Se.value === e.value)
         );
-        return y ? y.items.find((T) => T.value === o.value) : null;
+        return y ? y.items.find((T) => T.value === e.value) : null;
       }
-      return o.items.find(({ value: y }) => y === (o == null ? void 0 : o.value));
+      return e.items.find(({ value: y }) => y === (e == null ? void 0 : e.value));
     }), J = u(() => {
-      const y = o.items.findIndex(({ value: R }) => o.value === R);
+      const y = e.items.findIndex(({ value: R }) => e.value === R);
       return y > 0 ? y : 0;
-    }), { isMultiLevelSelect: V, flattenedItemsList: Y } = Re(B), ye = u(() => {
+    }), { isMultiLevelSelect: Y, flattenedItemsList: Z } = Ne(B), ge = u(() => {
       var y;
-      if (o.multiple) {
-        const R = (y = o == null ? void 0 : o.value) == null ? void 0 : y.length, T = V.value ? Y.value.length : B.value.length;
-        return !o.hasMoreItems && T === R ? n("all") : R;
+      if (e.multiple) {
+        const R = (y = e == null ? void 0 : e.value) == null ? void 0 : y.length, T = Y.value ? Z.value.length : B.value.length;
+        return !e.hasMoreItems && T === R ? r("all") : R;
       }
       return null;
-    }), _e = u(
-      () => `${o.description ? x : ""} ${o.errorMessage ? S : ""}`.trim() || null
-    ), Z = () => {
-      h.value || (i.value = !0);
+    }), xe = u(
+      () => `${e.description ? S : ""} ${e.errorMessage ? O : ""}`.trim() || null
+    ), Q = () => {
+      x.value || (l.value = !0);
     }, P = () => {
-      i.value = !1;
-    }, Q = () => {
-      h.value || (i.value = !i.value, F.value && (D.value = ""));
-    }, ge = () => {
-      F.value && (D.value = ""), i.value && (i.value = !1, v.value.onOutsideDropdownClick());
-    }, X = (y) => {
-      o.multiple || (D.value = "", i.value = !1), b(y), t("input", w.value);
-    }, G = () => {
-      t(c.SHOW_MORE);
-    }, xe = ct(
+      l.value = !1;
+    }, X = () => {
+      x.value || (l.value = !l.value, F.value && (D.value = ""));
+    }, he = () => {
+      F.value && (D.value = ""), l.value && (l.value = !1, p.value.onOutsideDropdownClick());
+    }, G = (y) => {
+      e.multiple || (D.value = "", l.value = !1), f(y), o("input", b.value);
+    }, ee = () => {
+      o(c.SHOW_MORE);
+    }, we = pt(
       {
-        inputContainerRef: r,
-        optionsContainerRef: v,
+        inputContainerRef: d,
+        optionsContainerRef: p,
         selectedValueIndex: J,
-        isDropdownOpen: i,
-        isDynamicFltering: L(o, "dynamicFiltering"),
-        items: o.items,
-        isMultiple: o.multiple
+        isDropdownOpen: l,
+        isDynamicFltering: w(e, "dynamicFiltering"),
+        items: e.items,
+        isMultiple: e.multiple
       },
+      X,
       Q,
-      Z,
       P
-    ), ee = ut(
+    ), te = ft(
       {
-        inputContainerRef: r,
-        isDropdownOpen: i
+        inputContainerRef: d,
+        isDropdownOpen: l
       },
       P
-    ), he = {
+    ), Le = {
       [c.CLOSE_DROPDOWN]: P,
-      [c.SELECT]: X,
-      [c.SHOW_MORE]: G,
-      ...ee
+      [c.SELECT]: G,
+      [c.SHOW_MORE]: ee,
+      ...te
     };
-    return o.error && oe(
+    e.error && ae(
       '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"
-    ), 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: H, size: ue, conditionalClasses: pe, descriptionConditionalClasses: fe, searchTerm: D, items: B, staticCategories: q, 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: He, BentoTypography: Oe, ErrorMessage: Ae, FieldLabel: Me, vBentoClickOutsideDirective: ke, vBentoKeyboardNavigationDirective: Te };
+    ), e.size && ae('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
+    const oe = () => {
+      d.value.focus();
+    };
+    return t({
+      focus: oe
+    }), { __sfc: !0, attrs: a, slots: i, hasSlot: n, props: e, emit: o, t: r, inputContainerRef: d, inputContainerRefWrapper: m, optionsContainerRef: p, isDropdownOpen: l, dropdownOptionsContainerId: $, labelId: L, descriptionId: S, errorId: O, isReadOnly: x, cachedSelectedListboxOptions: h, cachedListboxSelectedValues: b, setCachedValues: f, ariaLabelAttribute: v, ariaLabel: _, label: H, computedAriaLabel: pe, isInputComponent: q, size: fe, conditionalClasses: ve, descriptionConditionalClasses: me, searchTerm: D, items: B, staticCategories: V, filteredItems: be, isSearching: F, displayValue: ye, selectedValueItem: _e, selectedValueIndex: J, isMultiLevelSelect: Y, flattenedItemsList: Z, additionalItemsSelected: ge, ariaDescribedBy: xe, openDropdown: Q, closeDropdown: P, toggleDropdown: X, clickOutsideDropdown: he, onOptionSelected: G, emitShowMoreEvent: ee, textboxKeyboardNavigationListeners: we, listboxKeyboardNavigationListeners: te, listboxListeners: Le, focus: oe, BentoDropdownOptionsContainer: Ve, BentoTypography: $e, ErrorMessage: Pe, FieldLabel: ke, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: Ae };
   }
 });
-var yt = function() {
+var gt = 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.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, n) {
+  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(i) {
+    e.searchTerm = i;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(i, 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": (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) {
+  })], 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(i, 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) + " ")];
   })], 2) : t._e()], 1);
-}, _t = [], gt = /* @__PURE__ */ k(
-  bt,
-  yt,
+}, xt = [], ht = /* @__PURE__ */ k(
   _t,
+  gt,
+  xt,
   !1,
   null,
-  "39ab2f8e"
+  "fe533f08"
 );
-const kt = gt.exports;
+const Ft = ht.exports;
 export {
-  kt as B,
-  Mt as I,
-  vt as a,
-  pt as u
+  Ft as B,
+  Pt as I,
+  bt as a,
+  vt as u
 };
-//# sourceMappingURL=dropdown.BfzsI2Th.js.map
+//# sourceMappingURL=dropdown.BqsoncJr.js.map