@adyen/bento-vue3 1.24.0 → 1.26.0

package/dist/chunks/{dropdown.170b43c4.js → dropdown.d8587f36.js}

@@ -1,81 +1,81 @@
-import { ref as w, watch as Se, computed as f, defineComponent as z, useSlots as xe, toRefs as we, openBlock as g, createBlock as P, resolveDynamicComponent as Le, unref as a, mergeProps as A, withCtx as F, createElementVNode as Q, withKeys as ze, createVNode as J, toHandlers as Z, createSlots as ae, renderList as oe, renderSlot as Y, normalizeProps as ne, guardReactiveProps as se, createElementBlock as M, toDisplayString as ue, createCommentVNode as K, normalizeClass as ie, withDirectives as G, vShow as ve, nextTick as T, useAttrs as We, toRef as _, inject as je, createTextVNode as Ue } from "vue";
-import { d as me, B as qe } from "./index.51fe0fc2.js";
-import { D as le, a as ye, b as He, B as Je, c as Ye } from "./dropdown-default-textbox.311443a8.js";
-import { _ as q } from "./_plugin-vue_export-helper.dad06003.js";
-import { g as U } from "./unique-id.a2a2b458.js";
-import { u as Ze } from "./aria-label.ac9651a5.js";
-import { u as ce } from "./i18n.f7e6533e.js";
-import { u as Ge } from "./use-form-layout-loading.d03e5d48.js";
-import { B as R, a as Qe } from "./keyboard-navigation.ca47dfa8.js";
-import { b as c, a as re, B as de, u as Xe } from "./listbox.b6a1aea2.js";
-import { u as Ve } from "./use-has-slot.4d98bf29.js";
-import { F as et, E as tt } from "./error-message.4678cbdc.js";
-import { a as be } from "./index.b3cb905c.js";
-import { a as lt } from "./index.920cc1ee.js";
+import { ref as S, watch as Le, computed as u, defineComponent as F, useSlots as we, toRefs as $e, openBlock as g, createBlock as k, resolveDynamicComponent as Oe, unref as a, mergeProps as A, withCtx as K, createElementVNode as Q, withKeys as Ue, createVNode as J, toHandlers as Z, createSlots as ne, renderList as se, renderSlot as Y, normalizeProps as ie, guardReactiveProps as re, createElementBlock as M, toDisplayString as fe, createCommentVNode as P, normalizeClass as de, withDirectives as G, vShow as ye, nextTick as T, useAttrs as qe, toRef as _, inject as He, createTextVNode as Ve } from "vue";
+import { d as be, B as Je } from "./index.a3d60e4f.js";
+import { D as oe, a as ge, b as Ye, B as Ze, c as Ge } from "./dropdown-default-textbox.ad5063c2.js";
+import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
+import { g as q } from "./unique-id.a2a2b458.js";
+import { u as Qe } from "./aria-label.ac9651a5.js";
+import { u as pe } from "./i18n.f7e6533e.js";
+import { u as Xe } from "./use-form-layout-loading.d03e5d48.js";
+import { B as R, a as et } from "./keyboard-navigation.ca47dfa8.js";
+import { c as d, b as ue, B as ce, a as tt, u as lt } from "./use-cached-selected-values.852aeafe.js";
+import { u as at } from "./use-has-slot.4d98bf29.js";
+import { F as ot, E as nt } from "./error-message.3fb5573a.js";
+import { a as he } from "./index.9bf04b01.js";
+import { a as st } from "./index.5bdebf9d.js";
 import "../assets/dropdown.css";
 var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(D || {});
-const fe = {
+const me = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, at = (e, o, t, l) => {
-  const n = w(e.value), { t: s } = ce({ messages: fe });
-  Se(e, () => {
+}, it = (e, o, t, l) => {
+  const n = S(e.value), { t: i } = pe({ messages: me });
+  Le(e, () => {
     n.value = e.value;
   });
-  const r = f(
+  const r = u(
     () => JSON.stringify(n.value) === JSON.stringify(e.value)
-  ), d = () => {
-    l(c.SELECT, n.value), l(c.CLOSE_DROPDOWN);
-  }, u = () => {
-    n.value = e.value, l(c.CLOSE_DROPDOWN);
+  ), c = () => {
+    l(d.SELECT, n.value), l(d.CLOSE_DROPDOWN);
+  }, f = () => {
+    n.value = e.value, l(d.CLOSE_DROPDOWN);
   }, y = () => {
     t.value && o.value && (n.value = e.value);
-  }, v = f(() => [
+  }, p = u(() => [
     {
-      title: s("apply"),
-      event: d,
+      title: i("apply"),
+      event: c,
       disabled: r.value
     },
     {
-      title: s("cancel"),
-      event: u
+      title: i("cancel"),
+      event: f
     }
-  ]), h = (i) => {
-    n.value = i, o.value || l(c.SELECT, i);
-  }, L = (i) => {
-    h(i), l(c.TAB);
-  }, $ = (i) => {
-    h(i), l(c.ENTER);
-  }, O = (i) => {
-    h(i), l(c.SPACE);
-  }, S = () => {
-    u(), l(c.ESCAPE);
-  }, E = () => {
-    l(c.SHOW_MORE);
+  ]), h = (s) => {
+    n.value = s, o.value || l(d.SELECT, s);
+  }, w = (s) => {
+    h(s), l(d.TAB);
+  }, $ = (s) => {
+    h(s), l(d.ENTER);
+  }, O = (s) => {
+    h(s), l(d.SPACE);
+  }, x = () => {
+    f(), l(d.ESCAPE);
+  }, L = () => {
+    l(d.SHOW_MORE);
   }, N = {
-    [c.SELECT]: h,
-    [c.SHOW_MORE]: E,
-    [c.TAB]: L,
-    [c.SPACE]: O,
-    [c.ENTER]: $
+    [d.SELECT]: h,
+    [d.SHOW_MORE]: L,
+    [d.TAB]: w,
+    [d.SPACE]: O,
+    [d.ENTER]: $
   };
   return {
     // Values
-    actions: v,
+    actions: p,
     internalSelectedValue: n,
     // Methods
     listeners: N,
-    onEscapeKey: S,
+    onEscapeKey: x,
     onOutsideDropdownClick: y
   };
-}, ot = z({
-  i18n: { messages: fe },
+}, rt = F({
+  i18n: { messages: me },
   name: "bento-dropdown-options-container"
-}), nt = /* @__PURE__ */ z({
-  ...ot,
+}), dt = /* @__PURE__ */ F({
+  ...rt,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -138,8 +138,8 @@ const fe = {
      */
     lazyLoadType: {
       type: String,
-      default: re.AUTOMATIC,
-      validator: (e) => Object.values(re).includes(e)
+      default: ue.AUTOMATIC,
+      validator: (e) => Object.values(ue).includes(e)
     },
     /**
      * Indicates if new options are loading.
@@ -160,7 +160,7 @@ const fe = {
      * Set to an empty string `''` if you don't want any of the available options to be selected for single select
      */
     selectedValue: {
-      type: [String, Number, Array],
+      type: Array,
       default: null
     },
     /**
@@ -169,7 +169,7 @@ const fe = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: de.props.searching,
+    searching: ce.props.searching,
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
@@ -178,7 +178,7 @@ const fe = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: be.props.targetElement.type, required: !0 },
+    targetElement: { type: he.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.
@@ -189,15 +189,15 @@ const fe = {
     }
   },
   setup(e, { expose: o, emit: t }) {
-    const l = e, n = xe(), { selectedValue: s, multiple: r } = we(l), d = w(null), { t: u } = ce({ messages: fe }), y = f(() => l.open && !l.disabled), v = f(() => u("noOptionsMatchThisSearch")), h = f(() => ({
+    const l = e, n = we(), { selectedValue: i, multiple: r } = $e(l), c = S(null), { t: f } = pe({ messages: me }), y = u(() => l.open && !l.disabled), p = u(() => f("noOptionsMatchThisSearch")), h = u(() => ({
       "b-dropdown-options-container--single": !(l != null && l.multiple)
-    })), L = f(() => ({
+    })), w = u(() => ({
       "b-dropdown-options-container__listbox--small": l.inputSize === D.SMALL,
       "b-dropdown-options-container__listbox--single": !(l != null && l.multiple)
-    })), { actions: $, internalSelectedValue: O, listeners: S, onEscapeKey: E, onOutsideDropdownClick: N } = at(s, r, y, t), i = f(() => l != null && l.multiple ? lt : be), p = f(() => {
-      var B;
+    })), { actions: $, internalSelectedValue: O, listeners: x, onEscapeKey: L, onOutsideDropdownClick: N } = it(i, r, y, t), s = u(() => l != null && l.multiple ? st : he), m = u(() => {
+      var E;
       const b = {
-        "min-width": `${(B = l == null ? void 0 : l.targetElement) == null ? void 0 : B.clientWidth}px`,
+        "min-width": `${(E = l == null ? void 0 : l.targetElement) == null ? void 0 : E.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return l != null && l.multiple ? {
@@ -205,7 +205,7 @@ const fe = {
         actions: $.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: U(`dropdown-options-${l.id}`),
+        id: q(`dropdown-options-${l.id}`),
         open: l.open,
         position: "bottom-start",
         style: {
@@ -226,40 +226,40 @@ const fe = {
     });
     return o({
       onOutsideDropdownClick: N
-    }), (b, B) => (g(), P(Le(a(i)), A({
+    }), (b, E) => (g(), k(Oe(a(s)), A({
       class: ["b-dropdown-options-container", a(h)]
-    }, a(p)), {
-      default: F(() => [
+    }, a(m)), {
+      default: K(() => [
         Q("div", {
-          onKeydown: B[0] || (B[0] = ze(
+          onKeydown: E[0] || (E[0] = Ue(
             //@ts-ignore
-            (...H) => a(E) && a(E)(...H),
+            (...z) => a(L) && a(L)(...z),
             ["esc"]
           ))
         }, [
-          J(a(de), A({
+          J(a(ce), A({
             id: e.id,
             ref_key: "dropdownOptionsListboxRef",
-            ref: d,
+            ref: c,
             "aria-label": e.ariaLabel,
-            class: ["b-dropdown-options-container__listbox", a(L)],
+            class: ["b-dropdown-options-container__listbox", a(w)],
             "empty-state": e.emptyState,
             "is-option-disabled": e.isOptionDisabled,
             items: e.items,
             "selected-value": a(O),
             multiple: a(r),
             "static-categories": e.staticCategories,
-            "no-results-message": a(v),
+            "no-results-message": a(p),
             searching: e.searching,
             loading: e.loading,
             "lazy-load-type": e.lazyLoadType,
             "has-more-items": e.hasMoreItems,
             "virtual-scroll": e.virtualScroll
-          }, Z(a(S))), ae({ _: 2 }, [
-            oe(a(n), (H, x) => ({
-              name: x,
-              fn: F((k) => [
-                Y(b.$slots, x, ne(se(k)), void 0, !0)
+          }, Z(a(x))), ne({ _: 2 }, [
+            se(a(n), (z, W) => ({
+              name: W,
+              fn: K((X) => [
+                Y(b.$slots, W, ie(re(X)), void 0, !0)
               ])
             }))
           ]), 1040, ["id", "aria-label", "class", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "static-categories", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
@@ -269,17 +269,17 @@ const fe = {
     }, 16, ["class"]));
   }
 });
-const st = /* @__PURE__ */ q(nt, [["__scopeId", "data-v-31e6ca61"]]);
-let ge = 0;
-const it = {
+const ut = /* @__PURE__ */ H(dt, [["__scopeId", "data-v-148aeb07"]]);
+let xe = 0;
+const ct = {
   beforeCreate() {
-    this.uuid = ge.toString(), ge += 1;
+    this.uuid = xe.toString(), xe += 1;
   }
-}, rt = { key: 0 }, dt = /* @__PURE__ */ Q("path", {
+}, ft = { key: 0 }, pt = /* @__PURE__ */ Q("path", {
   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"
 }, null, -1);
-function ut(e, o, t, l, n, s) {
+function mt(e, o, t, l, n, i) {
   return g(), M("svg", A({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -287,21 +287,21 @@ function ut(e, o, t, l, n, s) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), M("title", rt, ue(e.$attrs["svg-title"]), 1)) : K("", !0),
-    dt
+    e.$attrs["svg-title"] ? (g(), M("title", ft, fe(e.$attrs["svg-title"]), 1)) : P("", !0),
+    pt
   ], 16);
 }
-const ct = /* @__PURE__ */ q(it, [["render", ut]]);
-let he = 0;
-const ft = {
+const vt = /* @__PURE__ */ H(ct, [["render", mt]]);
+let Se = 0;
+const yt = {
   beforeCreate() {
-    this.uuid = he.toString(), he += 1;
+    this.uuid = Se.toString(), Se += 1;
   }
-}, pt = { key: 0 }, vt = /* @__PURE__ */ Q("path", {
+}, bt = { key: 0 }, gt = /* @__PURE__ */ Q("path", {
   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"
 }, null, -1);
-function mt(e, o, t, l, n, s) {
+function ht(e, o, t, l, n, i) {
   return g(), M("svg", A({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
@@ -309,15 +309,15 @@ function mt(e, o, t, l, n, s) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), M("title", pt, ue(e.$attrs["svg-title"]), 1)) : K("", !0),
-    vt
+    e.$attrs["svg-title"] ? (g(), M("title", bt, fe(e.$attrs["svg-title"]), 1)) : P("", !0),
+    gt
   ], 16);
 }
-const yt = /* @__PURE__ */ q(ft, [["render", mt]]), bt = { class: "b-dropdown-small-textbox__chevron" }, gt = z({
+const xt = /* @__PURE__ */ H(yt, [["render", ht]]), St = { class: "b-dropdown-small-textbox__chevron" }, Lt = F({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), ht = /* @__PURE__ */ z({
-  ...gt,
+}), wt = /* @__PURE__ */ F({
+  ...Lt,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -378,29 +378,29 @@ const yt = /* @__PURE__ */ q(ft, [["render", mt]]), bt = { class: "b-dropdown-sm
   },
   emits: ["open", "close"],
   setup(e, { emit: o }) {
-    const t = e, l = f(() => ({
-      [`b-dropdown-small-textbox--${le.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${le.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${le.OPENED}`]: t.open
-    })), n = f(() => t.open && !t.disabled && !t.readonly), s = () => {
+    const t = e, l = u(() => ({
+      [`b-dropdown-small-textbox--${oe.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${oe.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${oe.OPENED}`]: t.open
+    })), n = u(() => t.open && !t.disabled && !t.readonly), i = () => {
       o("open");
     }, r = () => {
       o("close");
-    }, d = {
-      [ye.OPEN]: s,
-      [ye.CLOSE]: r
+    }, c = {
+      [ge.OPEN]: i,
+      [ge.CLOSE]: r
     };
-    return (u, y) => (g(), M("div", {
-      class: ie(["b-dropdown-small-textbox", a(l)])
+    return (f, y) => (g(), M("div", {
+      class: de(["b-dropdown-small-textbox", a(l)])
     }, [
-      J(He, A({ ...u.$attrs, ...u.$props }, { class: "b-dropdown-small-textbox__textbox" }, Z(d)), {
-        icon: F(() => [
-          Q("div", bt, [
-            G(J(a(yt), { "svg-title": "opened" }, null, 512), [
-              [ve, a(n)]
+      J(Ye, A({ ...f.$attrs, ...f.$props }, { class: "b-dropdown-small-textbox__textbox" }, Z(c)), {
+        icon: K(() => [
+          Q("div", St, [
+            G(J(a(xt), { "svg-title": "opened" }, null, 512), [
+              [ye, a(n)]
             ]),
-            G(J(a(ct), { "svg-title": "closed" }, null, 512), [
-              [ve, !a(n)]
+            G(J(a(vt), { "svg-title": "closed" }, null, 512), [
+              [ye, !a(n)]
             ])
           ])
         ]),
@@ -409,141 +409,117 @@ const yt = /* @__PURE__ */ q(ft, [["render", mt]]), bt = { class: "b-dropdown-sm
     ], 2));
   }
 });
-const St = /* @__PURE__ */ q(ht, [["__scopeId", "data-v-4703b87f"]]), xt = ({ items: e, placeholder: o, selectedValue: t, staticCategories: l }) => {
-  if (t.value == null || t.value === "")
-    return o.value || null;
-  let n;
-  if (l) {
-    const s = e.value.find((r) => r.items.some((d) => d.value === t.value));
-    n = s == null ? void 0 : s.items.find((r) => r.value === t.value);
-  } else
-    n = e.value.find(({ value: s }) => s === t.value);
-  return n ? n.label : t.value.toString();
-}, wt = ({ selectedValues: e, items: o, placeholder: t }) => {
-  var l;
-  return !e.value || ((l = e.value) == null ? void 0 : l.length) === 0 ? t.value || null : e.value.map((n) => {
-    const s = o.value.find(({ value: r }) => r === n);
-    return s ? s.label : n;
-  }).join(", ");
-}, Lt = ({ selectedValues: e, items: o, placeholder: t }) => {
-  var l;
-  return !e.value || !((l = e.value) != null && l.length) ? t.value || null : o.value.reduce((n, s) => {
-    if (s.items) {
-      const r = s.items.filter(
-        (u) => e.value.includes(u.value)
-      );
-      r.length === s.items.length ? n.push(s.label) : r.forEach(({ label: u }) => n.push(u));
-    }
-    return e.value.includes(s.value) && n.push(s.label), n;
-  }, []).join(", ");
-}, $t = ({ items: e, placeholder: o, value: t, multiple: l, staticCategories: n }) => {
-  const s = f(() => e.value.find((d) => {
-    var u;
-    return (u = d.items) == null ? void 0 : u.length;
-  }));
-  return f(() => l.value ? s.value ? Lt({ selectedValues: t, placeholder: o, items: e }) : wt({ selectedValues: t, items: e, placeholder: o }) : xt({
-    items: e,
-    placeholder: o,
-    selectedValue: t,
-    staticCategories: n.value
+const $t = /* @__PURE__ */ H(wt, [["__scopeId", "data-v-4703b87f"]]), Ot = (e, o) => o.value.reduce((t, l) => {
+  if (l.items) {
+    const n = l.items.filter(
+      (r) => e.value.find((c) => c.value === r.value)
+    );
+    n.length === l.items.length ? t.push(l.label) : n.forEach(({ label: r }) => t.push(r));
+  }
+  return e.value.find((n) => n.value === l.value) && t.push(l.label), t;
+}, []).join(", "), Et = ({ items: e, placeholder: o, selectedValues: t }) => {
+  const l = u(() => e.value.find((i) => {
+    var r;
+    return (r = i.items) == null ? void 0 : r.length;
   }));
-}, $e = (e) => {
+  return u(() => t.value.length ? l.value ? Ot(t, e) : t.value.map(({ label: i }) => i).join(", ") : o.value || null);
+}, Ee = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
-}, Ot = ({
+}, Ct = ({
   inputContainerRef: e,
   optionsContainerRef: o,
   selectedValueIndex: t,
   isDropdownOpen: l,
   isDynamicFltering: n,
-  items: s,
+  items: i,
   isMultiple: r
-}, d, u, y) => {
-  const v = ({ detail: i }) => {
-    i.preventDefault(), l.value || (u(), T(() => {
-      var p, b;
-      r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[t.value].$el.focus();
+}, c, f, y) => {
+  const p = ({ detail: s }) => {
+    s.preventDefault(), l.value || (f(), T(() => {
+      var m, b;
+      r ? (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[t.value].$el.focus();
     }));
-  }, h = ({ detail: i }) => {
-    i.preventDefault(), l.value || (u(), T(() => {
-      var p;
-      (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
+  }, h = ({ detail: s }) => {
+    s.preventDefault(), l.value || (f(), T(() => {
+      var m;
+      (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus();
     }));
-  }, L = () => {
-    l.value || (u(), T(() => {
-      var i, p;
+  }, w = () => {
+    l.value || (f(), T(() => {
+      var s, m;
       if (r) {
         const b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (i = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[b.length - 1].$children[s.length - 1].$el.focus();
+        (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[b.length - 1].$children[i.length - 1].$el.focus();
       } else
-        (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[s.length - 1].$el.focus();
+        (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[i.length - 1].$el.focus();
     }));
   }, $ = () => {
-    l.value && (y(), $e(e));
+    l.value && (y(), Ee(e));
   }, O = () => {
-    l.value || u(), T(() => {
-      var i;
-      (i = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus();
+    l.value || f(), T(() => {
+      var s;
+      (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[0].$el.focus();
     });
-  }, S = ({ detail: i }) => {
-    i.preventDefault(), d(), l.value && T(() => {
-      var p, b;
-      r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[t.value].$el.focus();
+  }, x = ({ detail: s }) => {
+    s.preventDefault(), c(), l.value && T(() => {
+      var m, b;
+      r ? (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[0].$el.focus() : (b = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || b[t.value].$el.focus();
     });
-  }, E = () => {
-    d(), l.value && T(() => {
-      var i, p;
-      r ? (i = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || i[0].$el.focus() : (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[t.value].$el.focus();
+  }, L = () => {
+    c(), l.value && T(() => {
+      var s, m;
+      r ? (s = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || s[0].$el.focus() : (m = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || m[t.value].$el.focus();
     });
   };
-  return f(() => ({
-    ...n.value ? {} : { [R.SPACE]: S },
-    [R.ENTER]: E,
-    [R.ARROW_DOWN]: v,
+  return u(() => ({
+    ...n.value ? {} : { [R.SPACE]: x },
+    [R.ENTER]: L,
+    [R.ARROW_DOWN]: p,
     [R.ARROW_UP]: h,
-    [R.END]: L,
+    [R.END]: w,
     [R.ESCAPE]: $,
     [R.HOME]: O
   }));
-}, Et = ({ inputContainerRef: e, isDropdownOpen: o }, t) => {
+}, Dt = ({ inputContainerRef: e, isDropdownOpen: o }, t) => {
   const l = () => {
     o.value && t(), T(() => {
-      $e(e);
+      Ee(e);
     });
   };
   return {
-    [c.ENTER]: l,
-    [c.ESCAPE]: l,
-    [c.TAB]: l,
-    [c.SPACE]: l
+    [d.ENTER]: l,
+    [d.ESCAPE]: l,
+    [d.TAB]: l,
+    [d.SPACE]: l
   };
 };
-function Ct(e, o, t) {
-  const l = w(e), n = w(o), s = (d, u = []) => u.flatMap((y) => y.label.toLocaleLowerCase().includes(d) ? [y, ...s(d, y.items)] : y.items ? [...s(d, y.items)] : []);
-  return Se(l, () => {
+function Bt(e, o, t) {
+  const l = S(e), n = S(o), i = (c, f = []) => f.flatMap((y) => y.label.toLocaleLowerCase().includes(c) ? [y, ...i(c, y.items)] : y.items ? [...i(c, y.items)] : []);
+  return Le(l, () => {
     t !== void 0 && t(l.value);
-  }), f(() => {
+  }), u(() => {
     if (!l.value || t !== void 0)
       return n.value;
-    const d = l.value.toLocaleLowerCase();
-    return s(d, n.value);
+    const c = l.value.toLocaleLowerCase();
+    return i(c, n.value);
   });
 }
-const Oe = {
+const Ce = {
   "en-US": {
     all: "All",
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, Dt = Symbol("input field component injection key"), Bt = z({
-  i18n: { messages: Oe },
+}, It = Symbol("input field component injection key"), _t = F({
+  i18n: { messages: Ce },
   name: "b-dropdown",
   components: {
-    DropdownInputDefault: Ye,
-    DropdownInputSmall: St
+    DropdownInputDefault: Ge,
+    DropdownInputSmall: $t
   }
-}), It = /* @__PURE__ */ z({
-  ...Bt,
+}), Rt = /* @__PURE__ */ F({
+  ..._t,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -630,8 +606,8 @@ const Oe = {
      */
     lazyLoadType: {
       type: String,
-      default: de.props.lazyLoadType.default,
-      validator: (e) => Object.values(re).includes(e)
+      default: ce.props.lazyLoadType.default,
+      validator: (e) => Object.values(ue).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -701,202 +677,204 @@ const Oe = {
   },
   emits: ["input", "show-more"],
   setup(e, { emit: o }) {
-    var pe;
-    const t = e, l = We(), n = xe(), s = Ve(n), { t: r } = ce({ messages: Oe }), d = w(null), u = w(null), y = w(null), v = w(!1), h = U("bento-dropdown-options-container"), L = U("dropdown-label"), $ = U("dropdown-description"), O = U("dropdown-error"), { isReadOnly: S } = Ge(_(t, "readonly")), E = w(l["aria-label"]), { ariaLabel: N } = we(t), i = Ze({
-      ariaLabel: E.value,
+    var ve;
+    const t = e, l = qe(), n = we(), i = at(n), { t: r } = pe({ messages: Ce }), c = S(null), f = S(null), y = S(null), p = S(!1), h = q("bento-dropdown-options-container"), w = q("dropdown-label"), $ = q("dropdown-description"), O = q("dropdown-error"), { isReadOnly: x } = Xe(_(t, "readonly")), { cachedSelectedListboxOptions: L, cachedListboxSelectedValues: N, setCachedValues: s } = tt(
+      _(t, "items"),
+      _(t, "value"),
+      _(t, "multiple")
+    ), m = S(l["aria-label"]), { ariaLabel: b } = $e(t), E = Qe({
+      ariaLabel: m.value,
       // TODO: take this line away when the aria-label props is removed
-      label: N,
+      label: b,
       defaultFallback: r("ariaLabelFallback")
-    }), p = t.size === D.SMALL || je(Dt, !1), b = f(() => p ? D.SMALL : D.DEFAULT), B = f(() => ({
+    }), z = t.size === D.SMALL || He(It, !1), W = u(() => z ? D.SMALL : D.DEFAULT), X = u(() => ({
       "b-dropdown--condensed": t.condensed
-    })), H = f(() => ({
+    })), De = u(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), x = w(""), k = _(t, "items"), Ee = Ct(x, k, (pe = t == null ? void 0 : t.search) == null ? void 0 : pe.searchEvent), X = f(() => t.dynamicFiltering && !!x.value), Ce = $t({
-      items: k,
-      staticCategories: _(t, "staticCategories"),
-      multiple: _(t, "multiple"),
+    })), B = S(""), V = _(t, "items"), Be = Bt(B, V, (ve = t == null ? void 0 : t.search) == null ? void 0 : ve.searchEvent), ee = u(() => t.dynamicFiltering && !!B.value), Ie = Et({
+      items: V,
       placeholder: _(t, "placeholder"),
-      value: _(t, "value")
-    }), De = f(() => {
-      if (t != null && t.multiple)
+      selectedValues: L
+    }), _e = u(() => {
+      if (t != null && t.multiple && Array.isArray(t.value))
         return t.items.filter(
-          ({ value: m }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(m)
+          ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
         );
       if (!t.multiple && t.staticCategories) {
-        const m = t.items.find(
-          (I) => I.items.some((W) => W.value === t.value)
+        const v = t.items.find(
+          (I) => I.items.some((j) => j.value === t.value)
         );
-        return m ? m.items.find((I) => I.value === t.value) : null;
+        return v ? v.items.find((I) => I.value === t.value) : null;
       }
-      return t.items.find(({ value: m }) => m === (t == null ? void 0 : t.value));
-    }), Be = f(() => {
-      const m = t.items.findIndex(({ value: C }) => t.value === C);
-      return m > 0 ? m : 0;
-    }), { isMultiLevelSelect: Ie, flattenedItemsList: _e } = Xe(k), Re = f(() => {
-      var m;
-      if (t.multiple) {
-        const C = (m = t == null ? void 0 : t.value) == null ? void 0 : m.length;
-        return (Ie.value ? _e.value.length : k.value.length) === C ? r("all") : C;
+      return t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value));
+    }), Re = u(() => {
+      const v = t.items.findIndex(({ value: C }) => t.value === C);
+      return v > 0 ? v : 0;
+    }), { isMultiLevelSelect: Te, flattenedItemsList: Ae } = lt(V), Me = u(() => {
+      var v;
+      if (t.multiple && !t.hasMoreItems) {
+        const C = (v = t == null ? void 0 : t.value) == null ? void 0 : v.length;
+        return (Te.value ? Ae.value.length : V.value.length) === C ? r("all") : C;
       }
       return null;
-    }), Te = f(
+    }), Ne = u(
       () => `${t.description ? $ : ""} ${t.errorMessage ? O : ""}`.trim() || null
-    ), Ae = () => {
-      S.value || (v.value = !0);
-    }, V = () => {
-      v.value = !1;
-    }, ee = () => {
-      S.value || (v.value = !v.value, X.value && (x.value = ""));
-    }, Me = () => {
-      X.value && (x.value = ""), v.value && (v.value = !1, y.value.onOutsideDropdownClick());
-    }, Ne = (m) => {
-      t.multiple || (x.value = "", v.value = !1), o("input", m);
-    }, ke = () => {
-      o(c.SHOW_MORE);
-    }, Pe = Ot(
+    ), ke = () => {
+      x.value || (p.value = !0);
+    }, te = () => {
+      p.value = !1;
+    }, le = () => {
+      x.value || (p.value = !p.value, ee.value && (B.value = ""));
+    }, Pe = () => {
+      ee.value && (B.value = ""), p.value && (p.value = !1, y.value.onOutsideDropdownClick());
+    }, Ke = (v) => {
+      t.multiple || (B.value = "", p.value = !1), s(v), o("input", N.value);
+    }, Fe = () => {
+      o(d.SHOW_MORE);
+    }, ze = Ct(
       {
-        inputContainerRef: d,
+        inputContainerRef: c,
         optionsContainerRef: y,
-        selectedValueIndex: Be,
-        isDropdownOpen: v,
+        selectedValueIndex: Re,
+        isDropdownOpen: p,
         isDynamicFltering: _(t, "dynamicFiltering"),
         items: t.items,
         isMultiple: t.multiple
       },
-      ee,
-      Ae,
-      V
-    ), Ke = Et(
+      le,
+      ke,
+      te
+    ), We = Dt(
       {
-        inputContainerRef: d,
-        isDropdownOpen: v
+        inputContainerRef: c,
+        isDropdownOpen: p
       },
-      V
-    ), Fe = {
-      [c.CLOSE_DROPDOWN]: V,
-      [c.SELECT]: Ne,
-      [c.SHOW_MORE]: ke,
-      ...Ke
+      te
+    ), je = {
+      [d.CLOSE_DROPDOWN]: te,
+      [d.SELECT]: Ke,
+      [d.SHOW_MORE]: Fe,
+      ...We
     };
-    return t.error && me(
+    return t.error && be(
       '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"
-    ), t.size && me('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), (m, C) => {
+    ), t.size && be('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), (v, C) => {
       var I;
       return G((g(), M("div", {
-        class: ie(["b-dropdown", a(B)])
+        class: de(["b-dropdown", a(X)])
       }, [
-        e.label ? (g(), P(a(et), {
+        e.label ? (g(), k(a(ot), {
           key: 0,
-          id: a(L),
+          id: a(w),
           condensed: e.condensed,
           label: e.label,
           "tooltip-text": e.tooltipText,
           optional: e.optional,
           required: e.required
-        }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : K("", !0),
+        }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : P("", !0),
         G((g(), M("div", A({
           ref_key: "inputContainerRefWrapper",
-          ref: u
-        }, Z(a(Pe), !0)), [
-          (g(), P(Le(a(b)), {
+          ref: f
+        }, Z(a(ze), !0)), [
+          (g(), k(Oe(a(W)), {
             ref_key: "inputContainerRef",
-            ref: d,
+            ref: c,
             condensed: e.condensed,
-            value: x.value,
-            "additional-items-selected": a(Re),
+            value: B.value,
+            "additional-items-selected": a(Me),
             ariaControls: a(h),
-            ariaExpanded: v.value,
-            "aria-labelledby": e.label ? a(L) : null,
-            "aria-describedby": a(Te),
-            "aria-label": a(i),
-            "aria-readonly": a(S),
-            readonly: a(S),
+            ariaExpanded: p.value,
+            "aria-labelledby": e.label ? a(w) : null,
+            "aria-describedby": a(Ne),
+            "aria-label": a(E),
+            "aria-readonly": a(x),
+            readonly: a(x),
             disabled: e.disabled,
-            "display-value": a(Ce),
+            "display-value": a(Ie),
             "dynamic-filtering": e.dynamicFiltering,
             "is-invalid": !!e.errorMessage || e.error,
             multiple: e.multiple,
-            open: v.value,
-            "selected-value-item": a(p) ? void 0 : a(De),
+            open: p.value,
+            "selected-value-item": a(z) ? void 0 : a(_e),
             "show-slot-content-in-multiple": e.showSlotContentInMultiple,
-            onInput: C[0] || (C[0] = (W) => x.value = W),
-            onOpen: ee,
-            onClose: ee
-          }, ae({ _: 2 }, [
-            oe(a(n), (W, j) => ({
-              name: j,
-              fn: F((te) => [
-                Y(m.$slots, j, ne(se(te)), void 0, !0)
+            onInput: C[0] || (C[0] = (j) => B.value = j),
+            onOpen: le,
+            onClose: le
+          }, ne({ _: 2 }, [
+            se(a(n), (j, U) => ({
+              name: U,
+              fn: K((ae) => [
+                Y(v.$slots, U, ie(re(ae)), void 0, !0)
               ])
             }))
           ]), 1064, ["condensed", "value", "additional-items-selected", "ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple"]))
         ], 16)), [
-          [a(Qe)]
+          [a(et)]
         ]),
-        d.value ? (g(), P(a(st), A({
+        c.value ? (g(), k(a(ut), A({
           key: 1,
           id: a(h),
           ref_key: "optionsContainerRef",
           ref: y,
-          "aria-label": a(i),
+          "aria-label": a(E),
           "empty-state": e.emptyState,
           "debounce-time": (I = e.search) == null ? void 0 : I.debounceTime,
           disabled: e.disabled,
-          "input-size": a(b),
+          "input-size": a(W),
           "is-option-disabled": e.isOptionDisabled,
-          items: a(Ee),
+          items: a(Be),
           multiple: e.multiple,
           "static-categories": e.staticCategories,
-          open: v.value,
-          "selected-value": e.value,
-          searching: a(X),
-          "target-element": u.value,
+          open: p.value,
+          "selected-value": a(L),
+          searching: a(ee),
+          "target-element": f.value,
           loading: e.loading,
           "has-more-items": e.hasMoreItems,
           "lazy-load-type": e.lazyLoadType,
           "virtual-scroll": e.virtualScroll
-        }, Z(Fe)), ae({ _: 2 }, [
-          oe(a(n), (W, j) => ({
-            name: j,
-            fn: F((te) => [
-              Y(m.$slots, j, ne(se(te)), void 0, !0)
+        }, Z(je)), ne({ _: 2 }, [
+          se(a(n), (j, U) => ({
+            name: U,
+            fn: K((ae) => [
+              Y(v.$slots, U, ie(re(ae)), void 0, !0)
             ])
           }))
-        ]), 1040, ["id", "aria-label", "empty-state", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : K("", !0),
-        e.errorMessage ? (g(), P(a(tt), {
+        ]), 1040, ["id", "aria-label", "empty-state", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : P("", !0),
+        e.errorMessage ? (g(), k(a(nt), {
           key: 2,
           id: a(O),
           "error-message": e.errorMessage,
           class: "b-dropdown__error-message"
-        }, null, 8, ["id", "error-message"])) : K("", !0),
-        e.description || a(s)("description") ? (g(), P(a(qe), {
+        }, null, 8, ["id", "error-message"])) : P("", !0),
+        e.description || a(i)("description") ? (g(), k(a(Je), {
           key: 3,
           id: a($),
-          class: ie(["b-dropdown__description", a(H)]),
+          class: de(["b-dropdown__description", a(De)]),
           el: "span"
         }, {
-          default: F(() => [
-            Y(m.$slots, "description", {}, () => [
-              Ue(ue(e.description), 1)
+          default: K(() => [
+            Y(v.$slots, "description", {}, () => [
+              Ve(fe(e.description), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["id", "class"])) : K("", !0)
+        }, 8, ["id", "class"])) : P("", !0)
       ], 2)), [
-        [a(Je), Me]
+        [a(Ze), Pe]
       ]);
     };
   }
 });
-const qt = /* @__PURE__ */ q(It, [["__scopeId", "data-v-c9ecdfc9"]]);
+const Vt = /* @__PURE__ */ H(Rt, [["__scopeId", "data-v-d6374028"]]);
 export {
-  qt as B,
-  Dt as I,
+  Vt as B,
+  It as I,
   D as a,
-  Ct as u
+  Bt as u
 };
-//# sourceMappingURL=dropdown.170b43c4.js.map
+//# sourceMappingURL=dropdown.d8587f36.js.map