@adyen/bento-vue2 1.44.0 → 1.45.0

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

@@ -1,19 +1,19 @@
 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.Bu_WAKdf.js";
-import { a as K, b as N, B as A, c as Ee, D as De } from "./dropdown-default-textbox.ZAFh7KqG.js";
+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 { 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 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.BiqVX5O7.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 { P as ne } from "./popper-container.CnWphJTN.js";
-import { B as Me } from "./popover.ZlmaSYms.js";
-import { E as ke, F as Pe } from "./error-message.B7uoqQpq.js";
-import { B as Fe } from "./directive.O3yEdalv.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 Ke = {
   "en-US": {
@@ -36,21 +36,21 @@ const Ke = {
   });
   const n = u(
     () => JSON.stringify(a.value) === JSON.stringify(s.value)
-  ), d = () => {
+  ), r = () => {
     e(c.SELECT, a.value), e(c.CLOSE_DROPDOWN);
-  }, r = () => {
+  }, d = () => {
     a.value = s.value, e(c.CLOSE_DROPDOWN);
   }, m = () => {
     o.value && t.value && (a.value = s.value);
   }, p = u(() => [
     {
       title: i("apply"),
-      event: d,
+      event: r,
       disabled: n.value
     },
     {
       title: i("cancel"),
-      event: r
+      event: d
     }
   ]), l = (b) => {
     a.value = b, t.value || e(c.SELECT, b);
@@ -61,7 +61,7 @@ const Ke = {
   }, S = (b) => {
     l(b), e(c.SPACE);
   }, O = () => {
-    r(), e(c.ESCAPE);
+    d(), e(c.ESCAPE);
   }, x = () => {
     e(c.SHOW_MORE);
   }, h = {
@@ -139,8 +139,8 @@ const Ke = {
      */
     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 Ke = {
      *
      * 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
      */
@@ -191,11 +191,11 @@ const Ke = {
   },
   emits: [],
   setup(s, { expose: t, emit: o }) {
-    const e = s, a = de(), { selectedValue: i, multiple: n } = ce(e), d = g(null), { t: r } = U(), m = u(() => e.open && !e.disabled), p = u(() => r("noOptionsMatchThisSearch")), l = 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: L, internalSelectedValue: S, listeners: O, onEscapeKey: x, onOutsideDropdownClick: h } = ze(i, n, m, o), b = u(() => e != null && e.multiple ? Me : ne), 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 v = {
         "min-width": `${(_ = e == null ? void 0 : e.targetElement) == null ? void 0 : _.clientWidth}px`,
@@ -227,7 +227,7 @@ const Ke = {
     });
     return t({
       onOutsideDropdownClick: h
-    }), { __sfc: !0, slots: a, emit: o, props: e, selectedValue: i, multiple: n, dropdownOptionsListboxRef: d, t: r, isDropdownOpen: m, noResultsMessage: p, conditionalClasses: l, conditionalListboxClasses: $, actions: L, internalSelectedValue: S, listeners: O, onEscapeKey: x, onOutsideDropdownClick: h, popperContainerOrPopoverComponent: b, popperContainerOrPopoverProps: f, BentoListbox: j };
+    }), { __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 Ue = function() {
@@ -247,9 +247,9 @@ var Ue = function() {
   null,
   "b7543bfc"
 );
-const Je = qe.exports;
+const Ve = qe.exports;
 let le = 0;
-const Ve = {
+const Je = {
   beforeCreate() {
     this.uuid = le.toString(), le += 1;
   }
@@ -258,7 +258,7 @@ 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" } })]);
 }, Ze = [], Qe = /* @__PURE__ */ k(
-  Ve,
+  Je,
   Ye,
   Ze,
   !1,
@@ -356,20 +356,20 @@ const st = ot.exports, at = I({
       t("input", l);
     }, n = (l) => {
       t("keydown", l);
-    }, d = (l) => {
-      z(l), t("open");
     }, r = (l) => {
+      z(l), t("open");
+    }, d = (l) => {
       z(l), t("close");
     }, m = (l) => {
       z(l), t("clear");
     }, p = {
       [N.INPUT]: i,
-      [N.OPEN]: d,
-      [N.CLOSE]: r,
+      [N.OPEN]: r,
+      [N.CLOSE]: d,
       [N.CLEAR]: m,
       [N.KEYDOWN]: n
     };
-    return { __sfc: !0, emit: t, props: o, conditionalClasses: e, isDropdownOpen: a, onInput: i, onKeyDown: n, openDropdown: d, closeDropdown: r, clearValue: m, listeners: p, BentoDropdownSize: A, DropdownBaseTextbox: Ee, ChevronDownSmallIcon: Xe, ChevronUpSmallIcon: st };
+    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 lt = function() {
@@ -388,19 +388,19 @@ var lt = function() {
 const dt = rt.exports, ct = (s, t) => t.value.reduce((o, e) => {
   if (e.items) {
     const a = e.items.filter(
-      (n) => s.value.find((d) => d.value === n.value)
+      (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;
+  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 d;
-      return (d = n.items) == null ? void 0 : d.length;
+      var r;
+      return (r = n.items) == null ? void 0 : r.length;
     })
   );
-  return u(() => o.value.length ? a.value ? ct(o, s) : o.value.map(({ label: n }) => n).join(", ") : t.value || null);
+  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();
@@ -412,22 +412,22 @@ const dt = rt.exports, ct = (s, t) => t.value.reduce((o, e) => {
   isDynamicFltering: a,
   items: i,
   isMultiple: n
-}, d, r, m) => {
+}, r, d, m) => {
   const p = ({ detail: f }) => {
-    f.preventDefault(), e.value || r(), E(() => {
+    f.preventDefault(), e.value || d(), E(() => {
       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());
     });
   }, l = ({ detail: f }) => {
-    f.preventDefault(), e.value || r(), E(() => {
+    f.preventDefault(), e.value || d(), E(() => {
       t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(
         o.value
       ), t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[o.value].$el.focus();
     });
   }, $ = () => {
-    e.value || (r(), E(() => {
+    e.value || (d(), E(() => {
       var f, v;
       if (n) {
         const _ = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
@@ -440,17 +440,17 @@ const dt = rt.exports, ct = (s, t) => t.value.reduce((o, e) => {
   }, S = () => {
     e.value && m();
   }, O = () => {
-    e.value || r(), E(() => {
+    e.value || d(), E(() => {
       var f;
       (f = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     });
   }, x = ({ detail: f }) => {
-    f.preventDefault(), d(), e.value && E(() => {
+    f.preventDefault(), r(), e.value && E(() => {
       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();
     });
   }, h = () => {
-    d(), e.value && E(() => {
+    r(), e.value && E(() => {
       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();
     });
@@ -479,14 +479,14 @@ const dt = rt.exports, ct = (s, t) => t.value.reduce((o, e) => {
   };
 };
 function vt(s, t, o, e) {
-  const a = g(s), i = g(t), n = (r, m = []) => m.flatMap((p) => p.label.toLocaleLowerCase().includes(r) ? e != null && e.value && p.items ? [...n(r, p.items)] : [p, ...n(r, p.items)] : p.items ? [...n(r, p.items)] : []);
+  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 i.value;
-    const r = a.value.toLocaleLowerCase();
-    return n(r, i.value);
+    const d = a.value.toLocaleLowerCase();
+    return n(d, i.value);
   });
 }
 const mt = {
@@ -598,8 +598,8 @@ const mt = {
      */
     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.
@@ -670,7 +670,7 @@ const mt = {
   emits: ["input", "show-more"],
   setup(s, { expose: t, emit: o }) {
     var se;
-    const e = s, a = Oe(), i = de(), n = Re(i), { t: d } = U(), r = 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(
+    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")
@@ -678,12 +678,12 @@ const mt = {
       // TODO: take ariaLabel ref away when aria-label prop is removed
       ariaLabel: _ || v,
       label: H,
-      defaultFallback: d("ariaLabelFallback")
+      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"), J = w(e, "staticCategories"), be = vt(D, B, (se = e == null ? void 0 : e.search) == null ? void 0 : se.searchEvent, J), F = u(() => e.dynamicFiltering && !!D.value), ye = ut({
+    })), 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: w(e, "placeholder"),
       isMultiSelect: w(e, "multiple"),
@@ -700,14 +700,14 @@ const mt = {
         return y ? y.items.find((T) => T.value === e.value) : null;
       }
       return e.items.find(({ value: y }) => y === (e == null ? void 0 : e.value));
-    }), V = u(() => {
+    }), J = u(() => {
       const y = e.items.findIndex(({ value: R }) => e.value === R);
       return y > 0 ? y : 0;
     }), { isMultiLevelSelect: Y, flattenedItemsList: Z } = Ne(B), ge = u(() => {
       var y;
       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 ? d("all") : R;
+        return !e.hasMoreItems && T === R ? r("all") : R;
       }
       return null;
     }), xe = u(
@@ -726,9 +726,9 @@ const mt = {
       o(c.SHOW_MORE);
     }, we = pt(
       {
-        inputContainerRef: r,
+        inputContainerRef: d,
         optionsContainerRef: p,
-        selectedValueIndex: V,
+        selectedValueIndex: J,
         isDropdownOpen: l,
         isDynamicFltering: w(e, "dynamicFiltering"),
         items: e.items,
@@ -739,7 +739,7 @@ const mt = {
       P
     ), te = ft(
       {
-        inputContainerRef: r,
+        inputContainerRef: d,
         isDropdownOpen: l
       },
       P
@@ -757,11 +757,11 @@ const mt = {
       "2.0.0"
     ), e.size && ae('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0");
     const oe = () => {
-      r.value.focus();
+      d.value.focus();
     };
     return t({
       focus: oe
-    }), { __sfc: !0, attrs: a, slots: i, hasSlot: n, props: e, emit: o, t: d, inputContainerRef: r, 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: J, filteredItems: be, isSearching: F, displayValue: ye, selectedValueItem: _e, selectedValueIndex: V, 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: Je, BentoTypography: $e, ErrorMessage: ke, FieldLabel: Pe, vBentoClickOutsideDirective: Fe, vBentoKeyboardNavigationDirective: Ae };
+    }), { __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 gt = function() {
@@ -770,12 +770,12 @@ var gt = function() {
   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(d) {
-      return [t._t(n, null, null, d)];
+    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(i, n) {
-    return { key: n, fn: function(d) {
-      return [t._t(n, null, null, d)];
+    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) + " ")];
@@ -795,4 +795,4 @@ export {
   bt as a,
   vt as u
 };
-//# sourceMappingURL=dropdown.DC9un4VJ.js.map
+//# sourceMappingURL=dropdown.BqsoncJr.js.map

package/dist/chunks/dropdown.BqsoncJr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.BqsoncJr.js","sources":["../../src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.ts","../../src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-down-small.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-up-small.vue","../../src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue","../../src/components/dropdown/composables/use-display-value.ts","../../src/components/dropdown/composables/use-keyboard-navigation.ts","../../src/components/search-bar/useSearchBarDataFilter.ts","../../src/components/input-field/input-field.keys.ts","../../src/components/dropdown/dropdown.vue"],"sourcesContent":["import { computed, ref, Ref, watch } from 'vue';\nimport { BentoListboxEvent, BentoListboxOptions } from '@/types';\nimport { BentoDropdownEvent } from '../../../dropdown.types';\nimport { useI18n } from '@/utils/ts/i18n';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * A composable that handles all dropdown options option selecting logic & listeners.\n * If single select dropdown then emits straight up to dropdown.\n * If multi select dropdown then stores selections in internal state and only emits when Apply button is pressed.\n *\n * @param selectedValue The selectedValue property passed into the dropdown options container component.\n * @param multiple The multiple property  passed into the dropdown options container component.\n * @param isOpen The isOpen property passed into the dropdown options container component.\n * @param emit The emit function for the dropdown options container component.\n */\nexport const useDropdownOptionsListbox = (\n    selectedValue: Ref<BentoListboxOptions>,\n    multiple: Ref<boolean>,\n    isOpen: Ref<boolean>,\n    emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void\n) => {\n    const internalSelectedValue = ref(selectedValue.value);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    watch(selectedValue, () => {\n        internalSelectedValue.value = selectedValue.value;\n    });\n\n    // Multi-select dropdown cancel and apply button logic\n    const isApplyButtonDisabled = computed(\n        () => JSON.stringify(internalSelectedValue.value) === JSON.stringify(selectedValue.value)\n    );\n\n    const onApplyClick = () => {\n        emit(BentoListboxEvent.SELECT, internalSelectedValue.value);\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onCancelClick = () => {\n        internalSelectedValue.value = selectedValue.value;\n        emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n    };\n\n    const onOutsideDropdownClick = () => {\n        if (isOpen.value && multiple.value) {\n            internalSelectedValue.value = selectedValue.value;\n        }\n    };\n\n    const actions = computed(() => [\n        {\n            title: t('apply') as string,\n            event: onApplyClick,\n            disabled: isApplyButtonDisabled.value,\n        },\n        {\n            title: t('cancel') as string,\n            event: onCancelClick,\n        },\n    ]);\n\n    // Click and keyboard navigation event listners\n    const onOptionSelected = (newSelectedValue: BentoListboxOptions) => {\n        internalSelectedValue.value = newSelectedValue;\n        if (!multiple.value) {\n            emit(BentoDropdownEvent.SELECT, newSelectedValue);\n        }\n    };\n\n    const onTabKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.TAB);\n    };\n\n    const onEnterKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.ENTER);\n    };\n\n    const onSpaceKey = (newSelectedValue: BentoListboxOptions) => {\n        onOptionSelected(newSelectedValue);\n        emit(BentoDropdownEvent.SPACE);\n    };\n\n    const onEscapeKey = () => {\n        onCancelClick();\n        emit(BentoListboxEvent.ESCAPE);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const listeners = {\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        [BentoListboxEvent.TAB]: onTabKey,\n        [BentoListboxEvent.SPACE]: onSpaceKey,\n        [BentoListboxEvent.ENTER]: onEnterKey,\n    };\n\n    return {\n        // Values\n        actions,\n        internalSelectedValue,\n\n        // Methods\n        listeners,\n        onEscapeKey,\n        onOutsideDropdownClick,\n    };\n};\n","<template>\n    <component\n        :is=\"popperContainerOrPopoverComponent\"\n        class=\"b-dropdown-options-container\"\n        :aria-label=\"ariaLabel\"\n        :class=\"conditionalClasses\"\n        v-bind=\"popperContainerOrPopoverProps\"\n    >\n        <div @keydown.esc=\"onEscapeKey\">\n            <bento-listbox\n                :id=\"id\"\n                ref=\"dropdownOptionsListboxRef\"\n                :aria-label=\"ariaLabel\"\n                class=\"b-dropdown-options-container__listbox\"\n                :class=\"conditionalListboxClasses\"\n                :empty-state=\"emptyState\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :items=\"items\"\n                :selected-value=\"internalSelectedValue\"\n                :multiple=\"multiple\"\n                :static-categories=\"staticCategories\"\n                :no-results-message=\"noResultsMessage\"\n                :searching=\"searching\"\n                :loading=\"loading\"\n                :lazy-load-type=\"lazyLoadType\"\n                :has-more-items=\"hasMoreItems\"\n                :virtual-scroll=\"virtualScroll\"\n                v-on=\"listeners\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, useSlots } from 'vue';\n    import { BentoListbox } from '@/internal';\n    import { BentoListboxEvent, BentoListboxIsOptionDisabled, BentoListboxOptions } from '@/types';\n    import { PopperContainer } from '@/components/popper-container';\n    import {\n        BentoDropdownEmptyStateProps,\n        BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        BentoDropdownVirtulisationOptions,\n    } from '../../dropdown.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoPopover } from '@/components/popover';\n    import { useDropdownOptionsListbox } from './composables/use-dropdown-options-listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n\n    const emit = defineEmits([]);\n\n    const props = defineProps({\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Empty state props used with the inner empty state component which is displayed when no search results are found.\n         */\n        emptyState: {\n            type: Object as PropType<BentoDropdownEmptyStateProps>,\n            default: undefined,\n        },\n\n        /**\n         * Disables dropdown functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Indicates whether there are more items to load\n         */\n        hasMoreItems: { type: Boolean, default: false },\n\n        /**\n         *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.\n         */\n        id: { type: String, required: true },\n\n        /**\n         * Function that allows the options to be disabled\n         *\n         * @type {BentoDropdownIsOptionDisabled}\n         * @param {BentoDropdownOptionItem} option - Dropdown option object\n         * @param {string} option.label - Option's label text\n         * @param {string|number} option.value - Option's value\n         * @param {unknown} option.data - Option's extra data to be passed to the default slot\n         */\n        isOptionDisabled: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: undefined,\n        },\n\n        /**\n         * The option elements to populate the dropdown with.\n         * It must be an array of {@see BentoDropdownOptionItem }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         */\n        items: {\n            type: Array as PropType<BentoListboxOptions>,\n            required: true,\n        },\n\n        /**\n         * The type of `Lazy Load`.\n         * Type \"automatic\" will enable infinite scrolling\n         * Type \"button\" will enable lazy loading with \"Show more\" button\n         */\n        lazyLoadType: {\n            type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n            default: BentoDropdownLazyLoadType.AUTOMATIC,\n            validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n        },\n\n        /**\n         * Indicates if new options are loading.\n         */\n        loading: { type: Boolean, default: false },\n\n        /**\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the container can be displayed.\n         */\n        open: { type: Boolean, required: true },\n\n        /**\n         * The `input` value.\n         * Providing an empty string or empty array will select no options.\n         * Set to an empty string `''` if you don't want any of the available options to be selected for single select\n         */\n        selectedValue: {\n            type: Array as PropType<BentoListboxOptions>,\n            default: null,\n        },\n\n        /**\n         * Flag that indicates that an external search it's being made\n         * to filter out the items inside the the multi-select listbox\n         *\n         * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n         */\n        searching: BentoListbox.props.searching,\n\n        /**\n         * If enabled, dropdown will display non-selectable, static categories\n         */\n        staticCategories: { type: Boolean, default: false },\n\n        /**\n         * Reference to the DOM element or Vue component for positioning\n         * the Dropdown container.\n         */\n        targetElement: { type: PopperContainer.props.targetElement.type, required: true },\n\n        /**\n         * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n         * The itemHeight function is used to calculate the height of rendered item given it's index.\n         */\n        virtualScroll: {\n            type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n            default: false,\n        },\n    });\n\n    const { selectedValue, multiple } = toRefs(props);\n    const dropdownOptionsListboxRef = ref(null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isDropdownOpen = computed(() => props.open && !props.disabled);\n    const noResultsMessage = computed(() => t('noOptionsMatchThisSearch') as string);\n\n    const conditionalClasses = computed(() => ({\n        'b-dropdown-options-container--single': !props?.multiple,\n    }));\n\n    const conditionalListboxClasses = computed(() => ({\n        'b-dropdown-options-container__listbox--single': !props?.multiple,\n    }));\n\n    const { actions, internalSelectedValue, listeners, onEscapeKey, onOutsideDropdownClick } =\n        useDropdownOptionsListbox(selectedValue, multiple, isDropdownOpen, emit);\n\n    // Use different components depending on if the dropdown is a single or multi-select\n    const popperContainerOrPopoverComponent = computed(() => (props?.multiple ? BentoPopover : PopperContainer));\n\n    const popperContainerOrPopoverProps = computed(() => {\n        const containerMinAndMaxWidth = {\n            'min-width': `${(props?.targetElement as HTMLElement)?.clientWidth}px`,\n            'max-width': 'min(500px, 95%)',\n        };\n\n        return props?.multiple\n            ? ({\n                  actionsLayout: 'space-between',\n                  actions: actions.value,\n                  divider: true,\n                  fallbackPosition: ['top-start'],\n                  id: generateUid(`dropdown-options-${props.id}`),\n                  open: props.open,\n                  position: 'bottom-start',\n                  style: {\n                      width: 'auto',\n                      ...containerMinAndMaxWidth,\n                  },\n                  targetElement: props.targetElement,\n              } as InstanceType<typeof BentoPopover>['$props'])\n            : ({\n                  fallbackPosition: ['top-start'],\n                  offset: [0, 8],\n                  position: 'bottom-start',\n                  style: {\n                      display: isDropdownOpen.value ? 'block' : 'none',\n                      ...containerMinAndMaxWidth,\n                  },\n                  targetElement: props.targetElement,\n              } as InstanceType<typeof PopperContainer>['$props']);\n    });\n\n    defineExpose({\n        onOutsideDropdownClick,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dropdown options container.\n     * It lists all the available options.\n     *\n     * @example\n     * <bento-dropdown-options-container\n     *      v-if=\"inputContainerRef\" <!-- Ref to the input to match the width -->\n     *      :id=\"dropdownOptionsContainerId\"\n     *      :target-element=\"inputContainerRef\"\n     *      :aria-label=\"ariaLabel\"\n     *      :open=\"isDropdownOpen\"\n     *      :disabled=\"disabled\"\n     *      :multiple=\"multiple\"\n     *      :selected=\"value\"\n     *      :isOptionDisabled=\"option => option.value === 2\"\n     *      :items=\"[{\n     *         { label: 'Option 1', value: 1 },\n     *         { label: 'Option 2', value: 2 },\n     *      }]\"\n     *      @select=\"onOptionSelected\"\n     * />\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-dropdown-options-container',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-options-container.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><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\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><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\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-dropdown-small-textbox\" :class=\"conditionalClasses\">\n        <dropdown-base-textbox\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-small-textbox__textbox\"\n            :size=\"BentoDropdownSize.SMALL\"\n            v-on=\"listeners\"\n        >\n            <template #icon>\n                <div class=\"b-dropdown-small-textbox__chevron\">\n                    <chevron-up-small-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-small-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types';\n    import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\n    import { Booleanish } from '@/types';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import ChevronDownSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-down-small';\n    import ChevronUpSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-up-small';\n    import { stopEventPropagation } from '@/utils/ts/events';\n\n    const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\n\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: { type: String, required: true },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: { type: String, default: null },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox\n         */\n        dynamicFiltering: { type: Boolean, default: false },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n    });\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-small-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component in its small variant used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-small-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-small-textbox.scss\" />\n","import { computed, Ref } from 'vue';\nimport { UseDisplayValueOptions } from './use-display-value.types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Generates the `displayValue` for the Category Multi Select based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * @param options Multi select options\n * @returns The text to be displayed by the dropdown\n */\nconst categoryMultiSelect = (selectedValues: Ref<BentoListboxOptions>, items: Ref<BentoListboxOptions>) =>\n    items.value\n        .reduce((acc, option) => {\n            // Category items\n            if (option.items) {\n                const selectedCategoryOptions = option.items.filter(categoryOption =>\n                    selectedValues.value.find(selectedOption => selectedOption.value === categoryOption.value)\n                );\n\n                // If the category is fully selected add the category name\n                const isCategoryFullySelected = selectedCategoryOptions.length === option.items.length;\n                if (isCategoryFullySelected) {\n                    acc.push(option.displayValue ?? option.label);\n                } else {\n                    // If category is partially selected add each selected option and category\n                    selectedCategoryOptions.forEach(({ label, displayValue }) => acc.push(displayValue ?? label));\n                }\n            }\n\n            // Non-category option\n            if (selectedValues.value.find(selectedOption => selectedOption.value === option.value)) {\n                acc.push(option.displayValue ?? option.label);\n            }\n\n            return acc;\n        }, [])\n        .join(', ');\n\n/**\n * Generates the `displayValue` for the Dropdown based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * When there is a selected value but the value is not present in the list, the\n * value is then returned as there is no way to know what the text/label is.\n *\n * @param options Options needed to calculate the display value based on the type of Dropdown (single, multi, category)\n * @returns The text to be displayed by the dropdown\n */\nexport const useDisplayValue = ({ items, placeholder, selectedValues, isMultiSelect }: UseDisplayValueOptions) => {\n    const isCategoryMultilevel = computed(\n        () => isMultiSelect.value && items.value.find(option => option.items?.length)\n    );\n\n    const computedDisplayValue = computed(() => {\n        // If no value selected, return placeholder or nothing\n        if (!selectedValues.value.length) {\n            return placeholder.value || null;\n        }\n\n        // Category multi select\n        if (isCategoryMultilevel.value) {\n            return categoryMultiSelect(selectedValues, items);\n        }\n\n        return selectedValues.value.map(({ label, displayValue }) => displayValue ?? label).join(', ');\n    });\n\n    return computedDisplayValue;\n};\n","import { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport { BentoListboxEvent } from '@/types/listbox';\nimport { computed, nextTick, Ref } from 'vue';\nimport {\n    UseListboxKeyboardNavigationOptions,\n    UseTextboxKeyboardNavigationOptions,\n} from './use-keyboard-navigation.types';\n\n/**\n * Returns the focus to the textbox of the dropdown if it exists\n * when the dropdown is being closed.\n * @param elementToFocusOn Reference to the input container\n */\nconst focusOnTextbox = (elementToFocusOn: Ref) => {\n    elementToFocusOn.value.$children?.[0].$refs.textbox.focus();\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's textbox for Single and Multi select.\n * Adds support for the keys:\n *\n * - Arrow up\n * - Arrow Down\n * - End key\n * - Home key\n * - Escape key\n * - Space key\n * - Enter Key\n *\n * @param options Options from the Dropdown to handle the navigation\n * @param toggleDropdown Function to open/close the Dropdown\n * @param openDropdown Function to open the Dropdown\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's textbox\n */\nexport const useTextboxKeyboardNavigation = (\n    {\n        inputContainerRef,\n        optionsContainerRef,\n        selectedValueIndex,\n        isDropdownOpen,\n        isDynamicFltering,\n        items,\n        isMultiple,\n    }: UseTextboxKeyboardNavigationOptions,\n    toggleDropdown: () => void,\n    openDropdown: () => void,\n    closeDropdown: () => void\n) => {\n    const onArrowDown = ({ detail: event }) => {\n        event.preventDefault();\n\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n\n        // user may click on the dropdown via mouse, then use arrow keys - dropdown already open\n        // this ensure it works when use first navigate to dropdown via mouse or arrow keys\n        nextTick(() => {\n            if (isMultiple) {\n                optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n            } else {\n                // ensures focus management in listbox is in-sync\n                optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(\n                    selectedValueIndex.value\n                );\n\n                optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[\n                    selectedValueIndex.value\n                ].$el.focus();\n            }\n        });\n    };\n    const onArrowUp = ({ detail: event }) => {\n        event.preventDefault();\n\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n\n        // user may click on the dropdown via mouse, then use arrow keys - dropdown already open\n        // ensures it works when use first navigate to dropdown via mouse or arrow keys\n        nextTick(() => {\n            // ensures focus management in listbox is in-sync\n            optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(\n                selectedValueIndex.value\n            );\n\n            optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[\n                selectedValueIndex.value\n            ].$el.focus();\n        });\n    };\n\n    const onEndKey = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n            nextTick(() => {\n                if (isMultiple) {\n                    const firstLayer =\n                        optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        firstLayer.length - 1\n                    ].$children[items.length - 1].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        items.length - 1\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const onEscapeKey = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n            focusOnTextbox(inputContainerRef);\n        }\n    };\n\n    const onTab = () => {\n        // tab should not navigate through a combobox\n        if (isDropdownOpen.value) {\n            closeDropdown();\n        }\n    };\n\n    const onHomeKey = () => {\n        if (!isDropdownOpen.value) {\n            openDropdown();\n        }\n        nextTick(() => {\n            optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n        });\n    };\n\n    const onSpaceKey = ({ detail: event }) => {\n        event.preventDefault();\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const onEnterKey = () => {\n        toggleDropdown();\n        if (isDropdownOpen.value) {\n            nextTick(() => {\n                if (isMultiple) {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n                } else {\n                    optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n                        selectedValueIndex.value\n                    ].$el.focus();\n                }\n            });\n        }\n    };\n\n    const textboxKeyboardNavigationListeners = computed(() => ({\n        ...(!isDynamicFltering.value ? { [BentoKeyboardNavigationKeyDownEvent.SPACE]: onSpaceKey } : {}),\n        [BentoKeyboardNavigationKeyDownEvent.ENTER]: onEnterKey,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: onArrowDown,\n        [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: onArrowUp,\n        [BentoKeyboardNavigationKeyDownEvent.END]: onEndKey,\n        [BentoKeyboardNavigationKeyDownEvent.ESCAPE]: onEscapeKey,\n        [BentoKeyboardNavigationKeyDownEvent.HOME]: onHomeKey,\n        [BentoKeyboardNavigationKeyDownEvent.TAB]: onTab,\n    }));\n\n    return textboxKeyboardNavigationListeners;\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's listbox container for Single and Multi select.\n * Adds support for the keys:\n *\n * - Escape key\n * - Enter Key\n * - Tab\n * - Space key\n *\n * @param options Options from the Dropdown to handle the navigation inside the listbox\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's listbox container\n */\nexport const useListboxKeyboardNavigation = (\n    { inputContainerRef, isDropdownOpen }: UseListboxKeyboardNavigationOptions,\n    closeDropdown: () => void\n) => {\n    const closeDropdownAndFocusOnTextbox = () => {\n        if (isDropdownOpen.value) {\n            closeDropdown();\n        }\n        nextTick(() => {\n            focusOnTextbox(inputContainerRef);\n        });\n    };\n\n    const listboxKeyboardNavigationListeners = {\n        [BentoListboxEvent.ENTER]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.ESCAPE]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.TAB]: closeDropdownAndFocusOnTextbox,\n        [BentoListboxEvent.SPACE]: closeDropdownAndFocusOnTextbox,\n    };\n\n    return listboxKeyboardNavigationListeners;\n};\n","import { computed, ref, Ref, watch } from 'vue';\nimport { BentoSearchBarItem } from './search-bar.types';\n\n/**\n * Filters an array {@see BentoSearchBarData} containing elements of type {@see BentoSearchBarItem}\n * by the {@param searchTerm}.\n *\n * @param {Ref<String>} searchTerm - Text that satisfies the search criteria.\n * @param {Ref<BentoSearchBarData>} data - Array to be filtered by {@param searchTerm}\n * @returns {Ref<BentoSearchBarData>} New instance of the array filtered by the {@param searchTerm} text\n * @param {Ref<Boolean>} ignoreGroups - Boolean that determines if search returns items with subitems\n */\nexport function useSearchBarFilter<T extends BentoSearchBarItem>(\n    searchTerm: Ref<string>,\n    data: Ref<T[]>,\n    searchEvent?: (searchValue: string) => void,\n    ignoreGroups?: Ref<boolean>\n) {\n    const searchTermRef = ref(searchTerm);\n    const dataRef = ref(data);\n\n    const findHits = (searchTermLowerCased: string, options: Array<BentoSearchBarItem> = []) =>\n        options.flatMap(option => {\n            if (option.label.toLocaleLowerCase().includes(searchTermLowerCased)) {\n                if (ignoreGroups?.value && option.items) {\n                    return [...findHits(searchTermLowerCased, option.items)];\n                }\n                return [option, ...findHits(searchTermLowerCased, option.items)];\n            }\n\n            if (option.items) {\n                return [...findHits(searchTermLowerCased, option.items)];\n            }\n\n            return [];\n        });\n\n    // If search event exists trigger it on the search term changing\n    watch(searchTermRef, () => {\n        if (searchEvent !== undefined) {\n            searchEvent(searchTermRef.value);\n        }\n    });\n\n    const filterInputData = computed(() => {\n        if (!searchTermRef.value) {\n            return dataRef.value;\n        }\n        // If search event exists, emit the new search value into the event and do not manipulate data.\n        if (searchEvent !== undefined) {\n            return dataRef.value;\n        }\n\n        const searchTermLowerCased = searchTermRef.value.toLocaleLowerCase();\n        const filtered = findHits(searchTermLowerCased, dataRef.value);\n        return filtered;\n    });\n\n    return filterInputData;\n}\n","export const INPUT_FIELD_COMPONENT_INJECTION_KEY = Symbol('input field component injection key');\nexport const INPUT_FIELD_HINT_INJECTION_KEY = Symbol('input field hint injection key');\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n    <div v-bento-click-outside-directive=\"clickOutsideDropdown\" class=\"b-dropdown\" :class=\"conditionalClasses\">\n        <field-label\n            v-if=\"label\"\n            :id=\"labelId\"\n            :condensed=\"condensed\"\n            :label=\"label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n        />\n        <div\n            ref=\"inputContainerRefWrapper\"\n            v-bento-keyboard-navigation-directive\n            v-on=\"textboxKeyboardNavigationListeners\"\n        >\n            <component\n                :is=\"size\"\n                ref=\"inputContainerRef\"\n                :condensed=\"condensed\"\n                :value=\"searchTerm\"\n                :additional-items-selected=\"additionalItemsSelected\"\n                :ariaControls=\"dropdownOptionsContainerId\"\n                :ariaExpanded=\"isDropdownOpen\"\n                :aria-labelledby=\"label ? labelId : null\"\n                :aria-describedby=\"ariaDescribedBy\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-readonly=\"isReadOnly\"\n                :readonly=\"isReadOnly\"\n                :disabled=\"disabled\"\n                :display-value=\"displayValue\"\n                :dynamic-filtering=\"dynamicFiltering\"\n                :is-invalid=\"!!errorMessage || error\"\n                :multiple=\"multiple\"\n                :open=\"isDropdownOpen\"\n                :selected-value-item=\"!isInputComponent ? selectedValueItem : undefined\"\n                :show-slot-content-in-multiple=\"showSlotContentInMultiple\"\n                @input=\"searchTerm = $event\"\n                @open=\"toggleDropdown\"\n                @close=\"toggleDropdown\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </component>\n        </div>\n        <bento-dropdown-options-container\n            v-if=\"inputContainerRef\"\n            :id=\"dropdownOptionsContainerId\"\n            ref=\"optionsContainerRef\"\n            :aria-label=\"computedAriaLabel\"\n            :empty-state=\"emptyState\"\n            :debounce-time=\"search?.debounceTime\"\n            :disabled=\"disabled\"\n            :is-option-disabled=\"isOptionDisabled\"\n            :items=\"filteredItems\"\n            :multiple=\"multiple\"\n            :static-categories=\"staticCategories\"\n            :open=\"isDropdownOpen\"\n            :selected-value=\"cachedSelectedListboxOptions\"\n            :searching=\"isSearching\"\n            :target-element=\"inputContainerRefWrapper\"\n            :loading=\"loading\"\n            :has-more-items=\"hasMoreItems\"\n            :lazy-load-type=\"lazyLoadType\"\n            :virtual-scroll=\"virtualScroll\"\n            v-on=\"listboxListeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope\" />\n            </template>\n        </bento-dropdown-options-container>\n        <error-message\n            v-if=\"!!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-dropdown__error-message\"\n        />\n        <bento-typography\n            v-if=\"description || hasSlot('description')\"\n            :id=\"descriptionId\"\n            class=\"b-dropdown__description\"\n            :class=\"descriptionConditionalClasses\"\n            el=\"span\"\n        >\n            <slot name=\"description\">\n                {{ description }}\n            </slot>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, PropType, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdownOptionsContainer } from './components/dropdown-options-container';\n    import { BentoTypography } from '@/components/typography';\n    import { DropdownInputDefault, DropdownInputSmall } from './components';\n    import { BentoListbox, ErrorMessage, FieldLabel, useCachedSelectedValues, useMultiLevelItems } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Composables\n    import { useDisplayValue, useListboxKeyboardNavigation, useTextboxKeyboardNavigation } from './composables';\n\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n    import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n\n    // Directives\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n    import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives';\n\n    // Types\n    import {\n        BentoDropdownEmptyStateProps,\n        BentoDropdownEvent,\n        BentoDropdownLazyLoadType,\n        BentoDropdownSearchOptions,\n        BentoDropdownSize,\n        BentoDropdownVirtulisationOptions,\n    } from './dropdown.types';\n    import {\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n    } from '@/types';\n\n    import messages from './messages.json';\n    import { useHasSlot } from '@/composables';\n    import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that labels an interactive element.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Empty state props used with the inner empty state component which is displayed when no search results are found.\n         */\n        emptyState: {\n            type: Object as PropType<BentoDropdownEmptyStateProps>,\n            default: undefined,\n        },\n\n        /**\n         * Disables dropdown functionality.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Highlights the dropdown in an erroneous state.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        error: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown in an erroneous state with an error message.\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * Descriptive supporting text visbile underneath the dropdown.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * Indicates whether there are more items to load\n         */\n        hasMoreItems: { type: Boolean, default: false },\n\n        /**\n         * Function that dertermines which options are disabled from interaction.\n         *\n         * @type {BentoListboxIsOptionDisabled}\n         * @param {BentoListboxOptionItem} option - Dropdown option object\n         * @param {string} option.label - Option's label text\n         * @param {string|number} option.value - Option's value\n         * @param {unknown} option.data - Option's extra data to be passed to the default slot\n         */\n        isOptionDisabled: {\n            type: Function as PropType<BentoListboxIsOptionDisabled>,\n            default: undefined,\n        },\n\n        /**\n         * The option elements to populate the dropdown with.\n         * It must be an array of {@see BentoListboxOptionItem }\n         *  * @property {string} value.label - Text to be displayed in the option\n         *  * @property {string,number} value.value - Value of the option\n         */\n        items: {\n            type: Array as PropType<BentoListboxOptions>,\n            default: () => [],\n        },\n\n        /**\n         * Text that is displayed as a label above the element.\n         */\n        label: { type: String, default: null },\n\n        /**\n         * Indicates if new options are loading.\n         */\n        loading: { type: Boolean, default: false },\n\n        /**\n         * The type of `Lazy Load`.\n         * Type \"automatic\" will enable infinite scrolling\n         * Type \"button\" will enable lazy loading with \"Show more\" button\n         */\n        lazyLoadType: {\n            type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n            default: BentoListbox.props.lazyLoadType.default,\n            validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n        },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text that appears in the form control when it has no value set\n         */\n        placeholder: { type: String, default: null },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Highlights the dropdown is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Dropdown search options and events.\n         * @see BentoDropdownSearchOptions\n         */\n        search: {\n            type: Object as PropType<BentoDropdownSearchOptions>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * @deprecated Do not use. Only 'default' size should be used.\n         */\n        size: {\n            type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n            default: null,\n            validator: (value: BentoDropdownSize) => Object.values(BentoDropdownSize).includes(value),\n        },\n\n        /**\n         * If enabled, dropdown will display non-selectable, static categories\n         */\n        staticCategories: { type: Boolean, default: false },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * The `input` value.\n         * Providing an empty string will select no options.\n         * Set to an empty string `''` if you don't want any of the available options to be selected.\n         */\n        value: {\n            type: [String, Number, Array] as PropType<BentoListboxSelectedValue>,\n            default: null,\n        },\n\n        /**\n         * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n         * The itemHeight function is used to calculate the height of rendered item given it's index.\n         */\n        virtualScroll: {\n            type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"input\", \"show-more\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const inputContainerRef = ref(null);\n    const inputContainerRefWrapper = ref(null);\n    const optionsContainerRef: Ref<InstanceType<typeof BentoDropdownOptionsContainer>> = ref(null);\n    const isDropdownOpen = ref(false);\n    const dropdownOptionsContainerId = generateUid('bento-dropdown-options-container');\n    const labelId = generateUid('dropdown-label');\n    const descriptionId = generateUid('dropdown-description');\n    const errorId = generateUid('dropdown-error');\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const { cachedSelectedListboxOptions, cachedListboxSelectedValues, setCachedValues } = useCachedSelectedValues(\n        toRef(props, 'items'),\n        toRef(props, 'value'),\n        toRef(props, 'multiple')\n    );\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        // TODO: take ariaLabel ref away when aria-label prop is removed\n        ariaLabel: ariaLabel || (ariaLabelAttribute as Ref<string>),\n        label,\n        defaultFallback: t('ariaLabelFallback'),\n    });\n\n    // Inject input field component key to change the dropdown size\n    const isInputComponent =\n        props.size === BentoDropdownSize.SMALL || inject(INPUT_FIELD_COMPONENT_INJECTION_KEY, false);\n    const size = computed(() => (isInputComponent ? BentoDropdownSize.SMALL : BentoDropdownSize.DEFAULT));\n\n    const conditionalClasses = computed(() => ({\n        'b-dropdown--condensed': props.condensed,\n    }));\n\n    // Description styles\n    const descriptionConditionalClasses = computed(() => ({\n        'b-dropdown__description--error': !!props.errorMessage,\n    }));\n\n    // Filtering\n    const searchTerm = ref('');\n    const items = toRef(props, 'items');\n    const staticCategories = toRef(props, 'staticCategories');\n    const filteredItems = useSearchBarFilter(searchTerm, items, props?.search?.searchEvent, staticCategories);\n    const isSearching = computed(() => props.dynamicFiltering && !!searchTerm.value);\n\n    const displayValue = useDisplayValue({\n        items,\n        placeholder: toRef(props, 'placeholder'),\n        isMultiSelect: toRef(props, 'multiple'),\n        selectedValues: cachedSelectedListboxOptions,\n    });\n\n    const selectedValueItem = computed(() => {\n        if (props?.multiple && Array.isArray(props.value)) {\n            return props.items.filter(\n                ({ value }) => props?.value && (props?.value as BentoListboxMultiSelectValue).includes(value)\n            );\n        }\n        if (!props.multiple && props.staticCategories) {\n            // Find the category that holds the selected value\n            const category = props.items.find(categoryItem =>\n                categoryItem.items.some(item => item.value === props.value)\n            );\n            // Find the specific item within the category\n            const selectedCategoryItem = category ? category.items.find(item => item.value === props.value) : null;\n\n            return selectedCategoryItem;\n        }\n\n        return props.items.find(({ value }) => value === props?.value);\n    });\n\n    const selectedValueIndex = computed(() => {\n        const index = props.items.findIndex(({ value }) => props.value === value);\n        return index > 0 ? index : 0;\n    });\n\n    const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(items);\n\n    const additionalItemsSelected = computed(() => {\n        if (props.multiple) {\n            const selectedItems = (props?.value as BentoListboxMultiSelectValue)?.length;\n            const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length;\n\n            // Display count always - show \"all\" only when is not external filtering (hasMoreItems = true)\n            return !props.hasMoreItems && total === selectedItems ? t('all') : selectedItems;\n        }\n\n        return null;\n    });\n\n    // ARIA\n    const ariaDescribedBy = computed(\n        () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null\n    );\n\n    const openDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = true;\n    };\n\n    const closeDropdown = () => {\n        isDropdownOpen.value = false;\n    };\n\n    const toggleDropdown = () => {\n        if (isReadOnly.value) {\n            return;\n        }\n        isDropdownOpen.value = !isDropdownOpen.value;\n\n        // Clear search\n        if (isSearching.value) {\n            searchTerm.value = '';\n        }\n    };\n\n    const clickOutsideDropdown = () => {\n        if (isSearching.value) {\n            searchTerm.value = '';\n        }\n\n        if (isDropdownOpen.value) {\n            isDropdownOpen.value = false;\n            // Reset the internal dropdown options state\n            optionsContainerRef.value.onOutsideDropdownClick();\n        }\n    };\n\n    const onOptionSelected = (selectedValue: BentoListboxOptions) => {\n        // Clear and close the dropdown on single selection\n        if (!props.multiple) {\n            searchTerm.value = '';\n            isDropdownOpen.value = false;\n        }\n\n        setCachedValues(selectedValue);\n        emit('input', cachedListboxSelectedValues.value);\n    };\n\n    const emitShowMoreEvent = () => {\n        emit(BentoDropdownEvent.SHOW_MORE);\n    };\n\n    const textboxKeyboardNavigationListeners = useTextboxKeyboardNavigation(\n        {\n            inputContainerRef,\n            optionsContainerRef,\n            selectedValueIndex,\n            isDropdownOpen,\n            isDynamicFltering: toRef(props, 'dynamicFiltering'),\n            items: props.items,\n            isMultiple: props.multiple,\n        },\n        toggleDropdown,\n        openDropdown,\n        closeDropdown\n    );\n\n    const listboxKeyboardNavigationListeners = useListboxKeyboardNavigation(\n        {\n            inputContainerRef,\n            isDropdownOpen,\n        },\n        closeDropdown\n    );\n\n    const listboxListeners = {\n        [BentoListboxEvent.CLOSE_DROPDOWN]: closeDropdown,\n        [BentoListboxEvent.SELECT]: onOptionSelected,\n        [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n        ...listboxKeyboardNavigationListeners,\n    };\n\n    if (props.error) {\n        deprecate(\n            'BentoDropdown \"error\" property',\n            `Use the BentoDropdown \"errorMessage\" property instead to indicate that there is a modifier error.\n                        Having the field as \"undefined\" will hide/remove the error.\n                        <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (props.size) {\n        deprecate('BentoDropdown \"size\" property', `Do not use. Only 'default' size should be used.`, '2.0.0');\n    }\n\n    const focus = () => {\n        inputContainerRef.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Dropdown shows a selected option's.\n     * Use a dropdown when you want users to select options\n     * from a list of pre-defined options.\n     *\n     * @example\n     * import { BentoDropdown } from '@adyen/bento-vue2';\n     * import type { BentoDropdownOptions } from '@adyen/bento-vue2'\n     *\n     * export default {\n     *     components: { BentoDropdown },\n     *     template: `\n     *          <bento-dropdown\n     *              v-model=\"selectedValue\"\n     *              :disabled=\"false\"\n     *              :multiple=\"true\"\n     *              :isOptionsDisabled=\"option => option.value === 2\"\n     *              :items=\"options\"\n     *          />\n     *     `,\n     *     setup() {\n     *         const selectedValue = ref(2) // Default value\n     *         const options: BentoDropdownOptions = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { options, selectedValue };\n     *     }\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'b-dropdown',\n        components: {\n            DropdownInputDefault,\n            DropdownInputSmall,\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown.scss\" />\n"],"names":["useDropdownOptionsListbox","selectedValue","multiple","isOpen","emit","internalSelectedValue","ref","t","useI18n","watch","isApplyButtonDisabled","computed","onApplyClick","BentoListboxEvent","onCancelClick","onOutsideDropdownClick","actions","onOptionSelected","newSelectedValue","onTabKey","onEnterKey","onSpaceKey","onEscapeKey","emitShowMoreEvent","listeners","__default__$2","defineComponent","messages$1","slots","useSlots","toRefs","props","dropdownOptionsListboxRef","isDropdownOpen","noResultsMessage","conditionalClasses","conditionalListboxClasses","popperContainerOrPopoverComponent","BentoPopover","PopperContainer","popperContainerOrPopoverProps","containerMinAndMaxWidth","_a","generateUid","expose","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","DropdownBaseTextboxState","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","DropdownBaseTextboxEvent","categoryMultiSelect","selectedValues","items","acc","option","selectedCategoryOptions","categoryOption","selectedOption","label","displayValue","useDisplayValue","placeholder","isMultiSelect","isCategoryMultilevel","focusOnTextbox","elementToFocusOn","useTextboxKeyboardNavigation","inputContainerRef","optionsContainerRef","selectedValueIndex","isDynamicFltering","isMultiple","toggleDropdown","onArrowDown","event","nextTick","onArrowUp","onEndKey","firstLayer","_b","onTab","onHomeKey","BentoKeyboardNavigationKeyDownEvent","useListboxKeyboardNavigation","closeDropdownAndFocusOnTextbox","useSearchBarFilter","searchTerm","data","searchEvent","ignoreGroups","searchTermRef","dataRef","findHits","searchTermLowerCased","options","INPUT_FIELD_COMPONENT_INJECTION_KEY","INPUT_FIELD_HINT_INJECTION_KEY","__default__","messages","DropdownInputDefault","DropdownInputSmall","attrs","useAttrs","hasSlot","useHasSlot","inputContainerRefWrapper","dropdownOptionsContainerId","labelId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","cachedSelectedListboxOptions","cachedListboxSelectedValues","setCachedValues","useCachedSelectedValues","ariaLabelAttribute","ariaLabel","computedAriaLabel","useAriaLabel","isInputComponent","BentoDropdownSize","inject","size","descriptionConditionalClasses","staticCategories","filteredItems","isSearching","selectedValueItem","value","category","categoryItem","item","index","isMultiLevelSelect","flattenedItemsList","useMultiLevelItems","additionalItemsSelected","selectedItems","total","ariaDescribedBy","clickOutsideDropdown","textboxKeyboardNavigationListeners","listboxKeyboardNavigationListeners","listboxListeners","deprecate","focus"],"mappings":"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","x_google_ignoreList":[2,3]}

package/dist/chunks/{empty-state.B8ZeRgDi.js → empty-state.1TyzB5ju.js}

@@ -1,6 +1,6 @@
 import { defineComponent as D, ref as v, computed as l, watch as d } from "vue";
-import { B as L } from "./button.CufUNBkv.js";
-import { c as C, B as b } from "./typography.Bu_WAKdf.js";
+import { B as L } from "./button.BX6ZJxF7.js";
+import { B as C, c as b } from "./typography.J1v_SPG3.js";
 import { o as A } from "./resize.Bqks3WUm.js";
 import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/empty-state.css";
@@ -46,7 +46,7 @@ const O = {}, h = /* @__PURE__ */ D({
     headingEl: {
       type: String,
       default: null,
-      validator: (e) => Object.values(C).includes(e)
+      validator: (e) => Object.values(b).includes(e)
     },
     /**
      * Name of the illustration for the empty state.
@@ -121,7 +121,7 @@ const O = {}, h = /* @__PURE__ */ D({
       A(n.value, () => {
         n.value && (o.value = n.value.offsetWidth);
       });
-    }), { __sfc: !0, WIDTH_BREAKPOINT: r, HEADING_ELEMENT_MAP: a, props: s, rootRef: n, containerWidth: o, isBelowBreakpoint: u, imageVariant: i, imageSvg: g, imageConditionalClasses: f, headingElement: m, headingProps: E, actionVariant: N, BentoButton: L, BentoTypography: b };
+    }), { __sfc: !0, WIDTH_BREAKPOINT: r, HEADING_ELEMENT_MAP: a, props: s, rootRef: n, containerWidth: o, isBelowBreakpoint: u, imageVariant: i, imageSvg: g, imageConditionalClasses: f, headingElement: m, headingProps: E, actionVariant: N, BentoButton: L, BentoTypography: C };
   }
 });
 var R = function() {
@@ -148,4 +148,4 @@ export {
   _ as b,
   c
 };
-//# sourceMappingURL=empty-state.B8ZeRgDi.js.map
+//# sourceMappingURL=empty-state.1TyzB5ju.js.map