@adyen/bento-vue2 1.51.0 → 1.53.0

package/dist/chunks/{dropdown.DFEGHxjw.js → dropdown.DzWXcJyF.js}

@@ -1,17 +1,17 @@
-import { ref as w, watch as ue, computed as p, defineComponent as A, useSlots as pe, toRefs as fe, nextTick as L, useAttrs as Le, toRef as x, inject as Oe } from "vue";
+import { ref as C, watch as ue, computed as p, defineComponent as R, useSlots as pe, toRefs as fe, nextTick as L, useAttrs as Le, toRef as x, inject as Oe } from "vue";
 import { d as ie, B as Ee } from "./typography.J1v_SPG3.js";
-import { g as P } from "./generate-uid.NJ8tVoha.js";
+import { g as k } from "./generate-uid.NJ8tVoha.js";
 import { u as De } from "./aria-label.CaUURpnB.js";
 import { u as V } from "./i18n.BQkEbtPM.js";
 import { u as Be } from "./use-form-layout-loading.D3lALhtC.js";
-import { a as U, b as k, c as Ie, B as F, D as Te } from "./dropdown-default-textbox.DzPBw4CV.js";
-import { u as Re } from "./use-has-slot.C9lQZ6nz.js";
-import { a as u, b as H, B as J, c as Ae, u as $e } from "./use-cached-selected-values.DVcpkFV3.js";
-import { B as D, a as Ne } from "./keyboard-navigation.pB8weElW.js";
-import { B as Me } from "./directive.O3yEdalv.js";
-import { F as ke, E as Pe } from "./error-message.B3oWB_HM.js";
-import { P as re } from "./popper-container.Bqy3oVj6.js";
-import { B as Fe } from "./popover.3sHql3nd.js";
+import { a as U, b as P, c as Ie, B as F, D as Te } from "./dropdown-default-textbox.CDTdHfTv.js";
+import { u as Ne } from "./use-has-slot.C9lQZ6nz.js";
+import { a as u, b as H, B as J, c as Re, u as Ae } from "./use-cached-selected-values.LVldNial.js";
+import { B as D, a as $e } from "./keyboard-navigation.pB8weElW.js";
+import { B as Me } from "./directive.Cbdox5VL.js";
+import { F as Pe, E as ke } from "./error-message.CzQf7YOD.js";
+import { P as re } from "./popper-container.LRQgzjRf.js";
+import { B as Fe } from "./popover.BvsqsZQ1.js";
 import { n as K } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 /* empty css              */
 import { s as q } from "./events.CMzGybJJ.js";
@@ -30,19 +30,19 @@ const Ke = {
     apply: "Aplicar",
     cancel: "Cancelar"
   }
-}, ze = (n, t, o, e) => {
-  const a = w(n.value), { t: l } = V();
-  ue(n, () => {
-    a.value = n.value;
+}, ze = (a, t, o, e) => {
+  const n = C(a.value), { t: l } = V();
+  ue(a, () => {
+    n.value = a.value;
   });
   const s = p(
-    () => JSON.stringify(a.value) === JSON.stringify(n.value)
+    () => JSON.stringify(n.value) === JSON.stringify(a.value)
   ), i = () => {
-    e(u.SELECT, a.value), e(u.CLOSE_DROPDOWN);
+    e(u.SELECT, n.value), e(u.CLOSE_DROPDOWN);
   }, c = () => {
-    a.value = n.value, e(u.CLOSE_DROPDOWN);
+    n.value = a.value, e(u.CLOSE_DROPDOWN);
   }, m = () => {
-    o.value && t.value && (a.value = n.value);
+    o.value && t.value && (n.value = a.value);
   }, r = p(() => [
     {
       title: l("apply"),
@@ -53,21 +53,21 @@ const Ke = {
       title: l("cancel"),
       event: c
     }
-  ]), d = (b) => {
-    a.value = b, t.value || e(u.SELECT, b);
-  }, g = (b) => {
-    d(b), e(u.TAB);
-  }, h = (b) => {
-    d(b), e(u.ENTER);
-  }, v = (b) => {
-    d(b), e(u.SPACE);
+  ]), d = (y) => {
+    n.value = y, t.value || e(u.SELECT, y);
+  }, g = (y) => {
+    d(y), e(u.TAB);
+  }, h = (y) => {
+    d(y), e(u.ENTER);
+  }, v = (y) => {
+    d(y), e(u.SPACE);
   }, O = () => {
     c(), e(u.ESCAPE);
-  }, C = () => {
+  }, w = () => {
     e(u.SHOW_MORE);
   }, S = {
     [u.SELECT]: d,
-    [u.SHOW_MORE]: C,
+    [u.SHOW_MORE]: w,
     [u.TAB]: g,
     [u.SPACE]: v,
     [u.ENTER]: h
@@ -75,22 +75,26 @@ const Ke = {
   return {
     // Values
     actions: r,
-    internalSelectedValue: a,
+    internalSelectedValue: n,
     // Methods
     listeners: S,
     onEscapeKey: O,
     onOutsideDropdownClick: m
   };
-}, We = A({
+}, je = R({
   i18n: { messages: Ke },
   name: "bento-dropdown-options-container"
-}), je = /* @__PURE__ */ A({
-  ...We,
+}), We = /* @__PURE__ */ R({
+  ...je,
   props: {
     /**
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Indicates that dropdown items are loading
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * Empty state props used with the inner empty state component which is displayed when no search results are found.
      */
@@ -141,10 +145,10 @@ const Ke = {
     lazyLoadType: {
       type: String,
       default: J.AUTOMATIC,
-      validator: (n) => Object.values(J).includes(n)
+      validator: (a) => Object.values(J).includes(a)
     },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
     /**
@@ -191,12 +195,12 @@ const Ke = {
     }
   },
   emits: [],
-  setup(n, { expose: t, emit: o }) {
-    const e = n, a = pe(), { selectedValue: l, multiple: s } = fe(e), i = w(null), { t: c } = V(), m = p(() => e.open && !e.disabled), r = p(() => c("noOptionsMatchThisSearch")), d = p(() => ({
+  setup(a, { expose: t, emit: o }) {
+    const e = a, n = pe(), { selectedValue: l, multiple: s } = fe(e), i = C(null), { t: c } = V(), m = p(() => e.open && !e.disabled), r = p(() => c("noOptionsMatchThisSearch")), d = p(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
     })), g = p(() => ({
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: C, onOutsideDropdownClick: S } = ze(l, s, m, o), b = p(() => e != null && e.multiple ? Fe : re), I = p(() => {
+    })), { actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: w, onOutsideDropdownClick: S } = ze(l, s, m, o), y = p(() => e != null && e.multiple ? Fe : re), I = p(() => {
       var T;
       const B = {
         "min-width": `${(T = e == null ? void 0 : e.targetElement) == null ? void 0 : T.clientWidth}px`,
@@ -207,7 +211,7 @@ const Ke = {
         actions: h.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: P(`dropdown-options-${e.id}`),
+        id: k(`dropdown-options-${e.id}`),
         open: e.open,
         position: "bottom-start",
         style: {
@@ -228,25 +232,25 @@ const Ke = {
     });
     return t({
       onOutsideDropdownClick: S
-    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: m, noResultsMessage: r, conditionalClasses: d, conditionalListboxClasses: g, actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: C, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: I, BentoListbox: H };
+    }), { __sfc: !0, slots: n, emit: o, props: e, selectedValue: l, multiple: s, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: m, noResultsMessage: r, conditionalClasses: d, conditionalListboxClasses: g, actions: h, internalSelectedValue: v, listeners: O, onEscapeKey: w, onOutsideDropdownClick: S, popperContainerOrPopoverComponent: y, popperContainerOrPopoverProps: I, BentoListbox: H };
   }
 });
 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 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, "component-loading": t.componentLoading, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(n, l) {
     return { key: l, fn: function(s) {
       return [t._t(l, null, null, s)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
 }, qe = [], He = /* @__PURE__ */ K(
-  je,
+  We,
   Ue,
   qe,
   !1,
   null,
-  "b7543bfc"
+  "35feb278"
 );
 const Je = He.exports;
 let de = 0;
@@ -284,11 +288,11 @@ var et = function() {
   null,
   null
 );
-const at = ot.exports, nt = A({
+const nt = ot.exports, at = R({
   name: "dropdown-small-textbox",
   inheritAttrs: !1
-}), st = /* @__PURE__ */ A({
-  ...nt,
+}), st = /* @__PURE__ */ R({
+  ...at,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -348,8 +352,8 @@ const at = ot.exports, nt = A({
     value: { type: String, default: "" }
   },
   emits: ["clear", "close", "input", "keydown", "open"],
-  setup(n, { expose: t, emit: o }) {
-    const e = n, a = w(null), l = p(() => ({
+  setup(a, { expose: t, emit: o }) {
+    const e = a, n = C(null), l = p(() => ({
       [`b-dropdown-small-textbox--${U.DISABLED}`]: e.disabled,
       [`b-dropdown-small-textbox--${U.READONLY}`]: e.readonly,
       [`b-dropdown-small-textbox--${U.OPENED}`]: e.open
@@ -364,17 +368,17 @@ const at = ot.exports, nt = A({
     }, d = (v) => {
       q(v), o("clear");
     }, g = {
-      [k.INPUT]: i,
-      [k.OPEN]: m,
-      [k.CLOSE]: r,
-      [k.CLEAR]: d,
-      [k.KEYDOWN]: c
+      [P.INPUT]: i,
+      [P.OPEN]: m,
+      [P.CLOSE]: r,
+      [P.CLEAR]: d,
+      [P.KEYDOWN]: c
     }, h = () => {
-      a.value.focus();
+      n.value.focus();
     };
     return t({
       focus: h
-    }), { __sfc: !0, emit: o, props: e, baseTextbox: a, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: m, closeDropdown: r, clearValue: d, listeners: g, focus: h, BentoDropdownSize: F, DropdownBaseTextbox: Ie, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: at };
+    }), { __sfc: !0, emit: o, props: e, baseTextbox: n, conditionalClasses: l, isDropdownOpen: s, onInput: i, onKeyDown: c, openDropdown: m, closeDropdown: r, clearValue: d, listeners: g, focus: h, BentoDropdownSize: F, DropdownBaseTextbox: Ie, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: nt };
   }
 });
 var lt = function() {
@@ -390,47 +394,47 @@ var lt = function() {
   null,
   "d0e53db8"
 );
-const dt = rt.exports, ct = (n, t) => t.value.reduce((o, e) => {
+const dt = rt.exports, ct = (a, t) => t.value.reduce((o, e) => {
   if (e.items) {
-    const a = e.items.filter(
-      (s) => n.value.find((i) => i.value === s.value)
+    const n = e.items.filter(
+      (s) => a.value.find((i) => i.value === s.value)
     );
-    a.length === e.items.length ? o.push(e.displayValue ?? e.label) : a.forEach(({ label: s, displayValue: i }) => o.push(i ?? s));
+    n.length === e.items.length ? o.push(e.displayValue ?? e.label) : n.forEach(({ label: s, displayValue: i }) => o.push(i ?? s));
   }
-  return n.value.find((a) => a.value === e.value) && o.push(e.displayValue ?? e.label), o;
-}, []).join(", "), ut = ({ items: n, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
-  const a = p(
-    () => e.value && n.value.find((s) => {
+  return a.value.find((n) => n.value === e.value) && o.push(e.displayValue ?? e.label), o;
+}, []).join(", "), ut = ({ items: a, placeholder: t, selectedValues: o, isMultiSelect: e }) => {
+  const n = p(
+    () => e.value && a.value.find((s) => {
       var i;
       return (i = s.items) == null ? void 0 : i.length;
     })
   );
-  return p(() => o.value.length ? a.value ? ct(o, n) : o.value.map(({ label: s, displayValue: i }) => i ?? s).join(", ") : t.value || null);
-}, ve = (n) => {
+  return p(() => o.value.length ? n.value ? ct(o, a) : o.value.map(({ label: s, displayValue: i }) => i ?? s).join(", ") : t.value || null);
+}, ve = (a) => {
   var t;
-  (t = n.value.$children) == null || t[0].$refs.textbox.focus();
+  (t = a.value.$children) == null || t[0].$refs.textbox.focus();
 }, pt = ({
-  inputContainerRef: n,
+  inputContainerRef: a,
   optionsContainerRef: t,
   selectedValueIndex: o,
   isDropdownOpen: e,
-  isDynamicFltering: a,
+  isDynamicFltering: n,
   items: l,
   isMultiple: s
 }, i, c, m) => {
   const r = async (f) => {
-    var y, E;
-    a.value && await L(), (E = (y = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : y.$el.querySelectorAll('[role="option"]')[f]) == null || E.focus();
+    var b, E;
+    n.value && await L(), (E = (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : b.$el.querySelectorAll('[role="option"]')[f]) == null || E.focus();
   }, d = async (f) => {
     var E, z;
-    a.value && await L();
-    const y = (E = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : E.$el.querySelectorAll(
+    n.value && await L();
+    const b = (E = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : E.$el.querySelectorAll(
       "button"
     );
-    y.length ? (z = y[f]) == null || z.focus() : r(f);
+    b.length ? (z = b[f]) == null || z.focus() : r(f);
   }, g = (f) => {
-    var y;
-    return (y = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : y.setListboxFocusedIndex(
+    var b;
+    return (b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : b.setListboxFocusedIndex(
       f
     );
   }, h = ({ detail: f }) => {
@@ -445,16 +449,16 @@ const dt = rt.exports, ct = (n, t) => t.value.reduce((o, e) => {
     e.value || (c(), L(() => {
       var f;
       if (s) {
-        const y = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (f = y == null ? void 0 : y[y.length - 1].$el.querySelectorAll('[role="option"]')[l.length - 1]) == null || f.focus();
+        const b = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (f = b == null ? void 0 : b[b.length - 1].$el.querySelectorAll('[role="option"]')[l.length - 1]) == null || f.focus();
       } else
         g(l.length - 1), r(l.length - 1);
     }));
-  }, C = () => {
-    e.value && (m(), ve(n));
+  }, w = () => {
+    e.value && (m(), ve(a));
   }, S = () => {
     e.value && m();
-  }, b = () => {
+  }, y = () => {
     e.value || c(), L(() => {
       s ? d(0) : r(0);
     });
@@ -468,19 +472,19 @@ const dt = rt.exports, ct = (n, t) => t.value.reduce((o, e) => {
     });
   };
   return p(() => ({
-    ...a.value ? {} : { [D.SPACE]: I },
+    ...n.value ? {} : { [D.SPACE]: I },
     [D.ENTER]: B,
     [D.ARROW_DOWN]: h,
     [D.ARROW_UP]: v,
     [D.END]: O,
-    [D.ESCAPE]: C,
-    [D.HOME]: b,
+    [D.ESCAPE]: w,
+    [D.HOME]: y,
     [D.TAB]: S
   }));
-}, ft = ({ inputContainerRef: n, isDropdownOpen: t }, o) => {
+}, ft = ({ inputContainerRef: a, isDropdownOpen: t }, o) => {
   const e = () => {
     t.value && o(), L(() => {
-      ve(n);
+      ve(a);
     });
   };
   return {
@@ -490,14 +494,14 @@ const dt = rt.exports, ct = (n, t) => t.value.reduce((o, e) => {
     [u.SPACE]: e
   };
 };
-function vt(n, t, o, e) {
-  const a = w(n), l = w(t), s = (c, m = []) => m.flatMap((r) => r.label.toLocaleLowerCase().includes(c) ? e != null && e.value && r.items ? [...s(c, r.items)] : [r, ...s(c, r.items)] : r.items ? [...s(c, r.items)] : []);
-  return ue(a, () => {
-    o !== void 0 && o(a.value);
+function vt(a, t, o, e) {
+  const n = C(a), l = C(t), s = (c, m = []) => m.flatMap((r) => r.label.toLocaleLowerCase().includes(c) ? e != null && e.value && r.items ? [...s(c, r.items)] : [r, ...s(c, r.items)] : r.items ? [...s(c, r.items)] : []);
+  return ue(n, () => {
+    o !== void 0 && o(n.value);
   }), p(() => {
-    if (!a.value || o !== void 0)
+    if (!n.value || o !== void 0)
       return l.value;
-    const c = a.value.toLocaleLowerCase();
+    const c = n.value.toLocaleLowerCase();
     return s(c, l.value);
   });
 }
@@ -515,15 +519,15 @@ const mt = {
     all: "Todos",
     clearFilter: "Limpar filtro"
   }
-}, bt = Symbol("input field component injection key"), Ft = Symbol("input field hint injection key"), yt = A({
+}, yt = Symbol("input field component injection key"), Ft = Symbol("input field hint injection key"), Kt = Symbol("input field parent component injection key"), bt = R({
   i18n: { messages: mt },
   name: "b-dropdown",
   components: {
     DropdownInputDefault: Te,
     DropdownInputSmall: dt
   }
-}), _t = /* @__PURE__ */ A({
-  ...yt,
+}), _t = /* @__PURE__ */ R({
+  ...bt,
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -600,9 +604,13 @@ const mt = {
      */
     label: { type: String, default: null },
     /**
-     * Indicates if new options are loading.
+     * Indicates if new options are lazy loading.
      */
     loading: { type: Boolean, default: !1 },
+    /**
+     * Indicates that dropdown items are loading
+     */
+    componentLoading: { type: Boolean, default: !1 },
     /**
      * The type of `Lazy Load`.
      * Type "automatic" will enable infinite scrolling
@@ -611,7 +619,7 @@ const mt = {
     lazyLoadType: {
       type: String,
       default: H.props.lazyLoadType.default,
-      validator: (n) => Object.values(J).includes(n)
+      validator: (a) => Object.values(J).includes(a)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -651,7 +659,7 @@ const mt = {
     size: {
       type: String,
       default: null,
-      validator: (n) => Object.values(F).includes(n)
+      validator: (a) => Object.values(F).includes(a)
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
@@ -680,23 +688,23 @@ const mt = {
     }
   },
   emits: ["input", "show-more"],
-  setup(n, { expose: t, emit: o }) {
+  setup(a, { expose: t, emit: o }) {
     var le;
-    const e = n, a = Le(), l = pe(), s = Re(l), { t: i } = V(), c = w(null), m = w(null), r = w(null), d = w(!1), g = P("bento-dropdown-options-container"), h = P("dropdown-label"), v = P("dropdown-description"), O = P("dropdown-error"), { isReadOnly: C } = Be(x(e, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: b, setCachedValues: I } = Ae(
+    const e = a, n = Le(), l = pe(), s = Ne(l), { t: i } = V(), c = C(null), m = C(null), r = C(null), d = C(!1), g = k("bento-dropdown-options-container"), h = k("dropdown-label"), v = k("dropdown-description"), O = k("dropdown-error"), { isReadOnly: w } = Be(x(e, "readonly")), { cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: I } = Re(
       x(e, "items"),
       x(e, "value"),
       x(e, "multiple")
-    ), B = w(a["aria-label"]), { ariaLabel: T, label: f } = fe(e), y = De({
+    ), B = C(n["aria-label"]), { ariaLabel: T, label: f } = fe(e), b = De({
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: T || B,
       label: f,
       defaultFallback: i("ariaLabelFallback")
-    }), E = e.size === F.SMALL || Oe(bt, !1), z = p(() => E ? F.SMALL : F.DEFAULT), me = p(() => ({
+    }), E = e.size === F.SMALL || Oe(yt, !1), z = p(() => E ? F.SMALL : F.DEFAULT), me = p(() => ({
       "b-dropdown--condensed": e.condensed
-    })), be = p(() => ({
+    })), ye = p(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), R = w(""), $ = x(e, "items"), Y = x(e, "staticCategories"), Z = vt(R, $, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent, Y), j = p(() => e.dynamicFiltering && !!R.value), ye = ut({
-      items: $,
+    })), N = C(""), A = x(e, "items"), Y = x(e, "staticCategories"), Z = vt(N, A, (le = e == null ? void 0 : e.search) == null ? void 0 : le.searchEvent, Y), W = p(() => e.dynamicFiltering && !!N.value), be = ut({
+      items: A,
       placeholder: x(e, "placeholder"),
       isMultiSelect: x(e, "multiple"),
       selectedValues: S
@@ -713,30 +721,30 @@ const mt = {
       }
       return e.items.find(({ value: _ }) => _ === (e == null ? void 0 : e.value));
     }), Q = p(() => {
-      const _ = Z.value.findIndex(({ value: N }) => e.value === N);
+      const _ = Z.value.findIndex(({ value: $ }) => e.value === $);
       return _ > 0 ? _ : 0;
-    }), { isMultiLevelSelect: X, flattenedItemsList: G } = $e($), ge = p(() => {
+    }), { isMultiLevelSelect: X, flattenedItemsList: G } = Ae(A), ge = p(() => {
       var _;
       if (e.multiple) {
-        const N = (_ = e == null ? void 0 : e.value) == null ? void 0 : _.length, M = X.value ? G.value.length : $.value.length;
-        return !e.hasMoreItems && M === N ? i("all") : N;
+        const $ = (_ = e == null ? void 0 : e.value) == null ? void 0 : _.length, M = X.value ? G.value.length : A.value.length;
+        return !e.hasMoreItems && M === $ ? i("all") : $;
       }
       return null;
     }), he = p(
       () => `${e.description ? v : ""} ${e.errorMessage ? O : ""}`.trim() || null
     ), ee = () => {
-      C.value || (d.value = !0);
-    }, W = () => {
+      w.value || (d.value = !0);
+    }, j = () => {
       d.value = !1;
     }, te = () => {
-      C.value || (d.value = !d.value, j.value && (R.value = ""));
-    }, we = () => {
-      j.value && (R.value = ""), d.value && (d.value = !1, r.value.onOutsideDropdownClick());
+      w.value || (d.value = !d.value, W.value && (N.value = ""));
+    }, Ce = () => {
+      W.value && (N.value = ""), d.value && (d.value = !1, r.value.onOutsideDropdownClick());
     }, oe = (_) => {
-      e.multiple || (R.value = "", d.value = !1), I(_), o("input", b.value);
-    }, ae = () => {
+      e.multiple || (N.value = "", d.value = !1), I(_), o("input", y.value);
+    }, ne = () => {
       o(u.SHOW_MORE);
-    }, Ce = pt(
+    }, we = pt(
       {
         inputContainerRef: c,
         optionsContainerRef: r,
@@ -748,18 +756,18 @@ const mt = {
       },
       te,
       ee,
-      W
-    ), ne = ft(
+      j
+    ), ae = ft(
       {
         inputContainerRef: c,
         isDropdownOpen: d
       },
-      W
+      j
     ), Se = {
-      [u.CLOSE_DROPDOWN]: W,
+      [u.CLOSE_DROPDOWN]: j,
       [u.SELECT]: oe,
-      [u.SHOW_MORE]: ae,
-      ...ne
+      [u.SHOW_MORE]: ne,
+      ...ae
     };
     e.error && ie(
       'BentoDropdown "error" property',
@@ -773,11 +781,11 @@ const mt = {
     };
     return t({
       focus: se
-    }), { __sfc: !0, attrs: a, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: r, isDropdownOpen: d, dropdownOptionsContainerId: g, labelId: h, descriptionId: v, errorId: O, isReadOnly: C, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: b, setCachedValues: I, ariaLabelAttribute: B, ariaLabel: T, label: f, computedAriaLabel: y, isInputComponent: E, size: z, conditionalClasses: me, descriptionConditionalClasses: be, searchTerm: R, items: $, staticCategories: Y, filteredItems: Z, isSearching: j, displayValue: ye, selectedValueItem: _e, selectedValueIndex: Q, isMultiLevelSelect: X, flattenedItemsList: G, additionalItemsSelected: ge, ariaDescribedBy: he, openDropdown: ee, closeDropdown: W, toggleDropdown: te, clickOutsideDropdown: we, onOptionSelected: oe, emitShowMoreEvent: ae, textboxKeyboardNavigationListeners: Ce, listboxKeyboardNavigationListeners: ne, listboxListeners: Se, focus: se, BentoDropdownOptionsContainer: Je, BentoTypography: Ee, ErrorMessage: Pe, FieldLabel: ke, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: Ne };
+    }), { __sfc: !0, attrs: n, slots: l, hasSlot: s, props: e, emit: o, t: i, inputContainerRef: c, inputContainerRefWrapper: m, optionsContainerRef: r, isDropdownOpen: d, dropdownOptionsContainerId: g, labelId: h, descriptionId: v, errorId: O, isReadOnly: w, cachedSelectedListboxOptions: S, cachedListboxSelectedValues: y, setCachedValues: I, ariaLabelAttribute: B, ariaLabel: T, label: f, computedAriaLabel: b, isInputComponent: E, size: z, conditionalClasses: me, descriptionConditionalClasses: ye, searchTerm: N, items: A, staticCategories: Y, filteredItems: Z, isSearching: W, displayValue: be, selectedValueItem: _e, selectedValueIndex: Q, isMultiLevelSelect: X, flattenedItemsList: G, additionalItemsSelected: ge, ariaDescribedBy: he, openDropdown: ee, closeDropdown: j, toggleDropdown: te, clickOutsideDropdown: Ce, onOptionSelected: oe, emitShowMoreEvent: ne, textboxKeyboardNavigationListeners: we, listboxKeyboardNavigationListeners: ae, listboxListeners: Se, focus: se, BentoDropdownOptionsContainer: Je, BentoTypography: Ee, ErrorMessage: ke, FieldLabel: Pe, vBentoClickOutsideDirective: Me, vBentoKeyboardNavigationDirective: $e };
   }
 });
 var gt = function() {
-  var a;
+  var n;
   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;
@@ -785,26 +793,27 @@ var gt = function() {
     return { key: s, fn: function(i) {
       return [t._t(s, null, null, i)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": t.emptyState, "debounce-time": (a = t.search) == null ? void 0 : a.debounceTime, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(l, s) {
+  })], null, !0) })], 1), e.inputContainerRef ? o(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "debounce-time": (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, s) {
     return { key: s, fn: function(i) {
       return [t._t(s, null, null, i)];
     } };
   })], null, !0) }, e.listboxListeners)) : t._e(), t.errorMessage ? o(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? o(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
   })], 2) : t._e()], 1);
-}, ht = [], wt = /* @__PURE__ */ K(
+}, ht = [], Ct = /* @__PURE__ */ K(
   _t,
   gt,
   ht,
   !1,
   null,
-  "de09bc83"
+  "03d843d8"
 );
-const Kt = wt.exports;
+const zt = Ct.exports;
 export {
-  Kt as B,
+  zt as B,
   Ft as I,
-  bt as a,
+  yt as a,
+  Kt as b,
   vt as u
 };
-//# sourceMappingURL=dropdown.DFEGHxjw.js.map
+//# sourceMappingURL=dropdown.DzWXcJyF.js.map