@adyen/bento-vue2 1.7.0 → 1.8.0

package/dist/chunks/{dropdown.f1253a54.js → dropdown.ce937989.js}

@@ -1,31 +1,31 @@
-import { ref as m, watch as V, computed as c, defineComponent as F, toRefs as J, nextTick as C, toRef as E } from "vue";
-import { D as re, a as $, b as A, c as de } from "./dropdown-default-textbox.25134789.js";
-import { n as R } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as ue, d as ce } from "./index.965ac1af.js";
-import { g as D } from "./unique-id.a2a2b458.js";
-import { u as k } from "./i18n.155748d6.js";
+import { ref as m, watch as V, computed as c, defineComponent as F, toRefs as J, nextTick as L, toRef as E } from "vue";
+import { B as re, d as de } from "./index.965ac1af.js";
+import { D as ue, a as $, b as A, c as ce } from "./dropdown-default-textbox.25134789.js";
+import { n as B } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { g as R } from "./unique-id.a2a2b458.js";
 import { u as fe } from "./aria-label.ac9651a5.js";
-import { a as s, B as M, b as P } from "./listbox.73c38f38.js";
-import { B as O, a as pe } from "./keyboard-navigation.ca47dfa8.js";
-import { u as ve } from "./use-form-layout-loading.d03e5d48.js";
-import { a as N } from "./index.8ac70774.js";
-import { BentoPopover as U } from "../popover.js";
-import { E as be } from "./error-message.8302a46c.js";
-import { B as me } from "./directive.0408e565.js";
+import { u as k } from "./i18n.155748d6.js";
+import { u as pe } from "./use-form-layout-loading.d03e5d48.js";
+import { a as s, B as M, b as P } from "./listbox.d039b178.js";
+import { B as O, a as ve } from "./keyboard-navigation.ca47dfa8.js";
+import { a as N } from "./index.66503760.js";
+import { a as j } from "./index.210d2169.js";
+import { E as be, F as me } from "./field-label.330edb60.js";
+import { B as _e } from "./directive.0408e565.js";
 import "../assets/dropdown.css";
-var L = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(L || {});
-const _e = {
+var C = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(C || {});
+const ye = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, ye = (t, e, n) => {
-  const l = m(t.value), { t: o } = k();
+}, ge = (t, e, n) => {
+  const l = m(t.value), { t: a } = k();
   V(t, () => {
     l.value = t.value;
   });
-  const a = c(
+  const o = c(
     () => JSON.stringify(l.value) === JSON.stringify(t.value)
   ), r = () => {
     n(s.SELECT, l.value), n(s.CLOSE_DROPDOWN);
@@ -33,32 +33,32 @@ const _e = {
     l.value = t.value, n(s.CLOSE_DROPDOWN);
   }, i = c(() => [
     {
-      title: o("apply"),
+      title: a("apply"),
       event: r,
-      disabled: a.value
+      disabled: o.value
     },
     {
-      title: o("cancel"),
+      title: a("cancel"),
       event: u
     }
-  ]), f = (v) => {
+  ]), p = (v) => {
     l.value = v, e.value || n(s.SELECT, v);
   }, w = (v) => {
-    f(v), n(s.TAB);
-  }, x = (v) => {
-    f(v), n(s.ENTER);
+    p(v), n(s.TAB);
   }, _ = (v) => {
-    f(v), n(s.SPACE);
+    p(v), n(s.ENTER);
+  }, x = (v) => {
+    p(v), n(s.SPACE);
   }, y = () => {
     u(), n(s.ESCAPE);
   }, h = () => {
     n(s.SHOW_MORE);
   }, S = {
-    [s.SELECT]: f,
+    [s.SELECT]: p,
     [s.SHOW_MORE]: h,
     [s.TAB]: w,
-    [s.SPACE]: _,
-    [s.ENTER]: x
+    [s.SPACE]: x,
+    [s.ENTER]: _
   };
   return {
     // Values
@@ -68,13 +68,13 @@ const _e = {
     listeners: S,
     onEscapeKey: y
   };
-}, ge = F({
-  i18n: { messages: _e },
+}, xe = F({
+  i18n: { messages: ye },
   name: "bento-dropdown-options-container",
   components: {
     BentoListbox: M,
     PopperContainer: N,
-    BentoPopover: U
+    BentoPopover: j
   },
   props: {
     /**
@@ -118,8 +118,8 @@ const _e = {
      */
     inputSize: {
       type: String,
-      default: L.DEFAULT,
-      validator: (t) => Object.values(L).includes(t)
+      default: C.DEFAULT,
+      validator: (t) => Object.values(C).includes(t)
     },
     /**
      * The option elements to populate the dropdown with.
@@ -194,33 +194,34 @@ const _e = {
     s.TAB
   ],
   setup(t, { emit: e, slots: n }) {
-    var d;
-    const { selectedValue: l, multiple: o } = J(t), a = m(null), { t: r } = k(), u = c(() => t.open && !t.disabled), i = c(() => r("noOptionsMatchThisSearch")), f = {
-      "min-width": `${(d = t == null ? void 0 : t.targetElement) == null ? void 0 : d.clientWidth}px`,
-      "max-width": "min(500px, 95%)"
-    }, w = c(() => ({
+    const { selectedValue: l, multiple: a } = J(t), o = m(null), { t: r } = k(), u = c(() => t.open && !t.disabled), i = c(() => r("noOptionsMatchThisSearch")), p = c(() => ({
       "b-dropdown-options-container--single": !(t != null && t.multiple)
-    })), x = c(() => ({
-      "b-dropdown-options-container__listbox--small": t.inputSize === L.SMALL,
+    })), w = c(() => ({
+      "b-dropdown-options-container__listbox--small": t.inputSize === C.SMALL,
       "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: _, internalSelectedValue: y, listeners: h, onEscapeKey: S } = ye(
+    })), { actions: _, internalSelectedValue: x, listeners: y, onEscapeKey: h } = ge(
       l,
-      o,
+      a,
       e
-    ), v = c(
-      () => t != null && t.multiple ? U : N
-    ), B = c(
-      () => t != null && t.multiple ? {
+    ), S = c(
+      () => t != null && t.multiple ? j : N
+    ), v = c(() => {
+      var d;
+      const D = {
+        "min-width": `${(d = t == null ? void 0 : t.targetElement) == null ? void 0 : d.clientWidth}px`,
+        "max-width": "min(500px, 95%)"
+      };
+      return t != null && t.multiple ? {
         actionsLayout: "space-between",
         actions: _.value,
         divider: !0,
         fallbackPosition: ["top-start"],
-        id: D(`dropdown-options-${t.id}`),
+        id: R(`dropdown-options-${t.id}`),
         open: t.open,
         position: "bottom-start",
         style: {
           width: "auto",
-          ...f
+          ...D
         },
         targetElement: t.targetElement
       } : {
@@ -229,93 +230,93 @@ const _e = {
         position: "bottom-start",
         style: {
           display: u.value ? "block" : "none",
-          ...f
+          ...D
         },
         targetElement: t.targetElement
-      }
-    );
+      };
+    });
     return {
       // Values
       isDropdownOpen: u,
-      conditionalClasses: w,
-      conditionalListboxClasses: x,
+      conditionalClasses: p,
+      conditionalListboxClasses: w,
       noResultsMessage: i,
       slots: n,
       actions: _,
-      internalSelectedValue: y,
+      internalSelectedValue: x,
       // Component wrapper
-      popperContainerOrPopoverComponent: v,
-      popperContainerOrPopoverProps: B,
+      popperContainerOrPopoverComponent: S,
+      popperContainerOrPopoverProps: v,
       // Refs
-      dropdownOptionsListboxRef: a,
+      dropdownOptionsListboxRef: o,
       // Events
-      onEscapeKey: S,
-      listeners: h
+      onEscapeKey: h,
+      listeners: y
     };
   }
 });
-var xe = function() {
+var we = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [n("div", { on: { keydown: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [n("bento-listbox", e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(l, o) {
-    return { key: o, fn: function(a) {
-      return [e._t(o, null, null, a)];
+  } } }, [n("bento-listbox", e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "no-results-message": e.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
+    return { key: a, fn: function(o) {
+      return [e._t(a, null, null, o)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, we = [], he = /* @__PURE__ */ R(
-  ge,
+}, he = [], Se = /* @__PURE__ */ B(
   xe,
   we,
+  he,
   !1,
   null,
-  "f8a335c8",
+  "c9901f59",
   null,
   null
 );
-const Se = he.exports;
-let j = 0;
-const Oe = {
+const Oe = Se.exports;
+let H = 0;
+const Le = {
   beforeCreate() {
-    this.uuid = j.toString(), j += 1;
+    this.uuid = H.toString(), H += 1;
   }
 };
 var Ce = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M4.4697 5.96967C4.76259 5.67678 5.23747 5.67678 5.53036 5.96967L8.00003 8.43934L10.4697 5.96967C10.7626 5.67678 11.2375 5.67678 11.5304 5.96967C11.8233 6.26256 11.8233 6.73744 11.5304 7.03033L8.53036 10.0303C8.23747 10.3232 7.76259 10.3232 7.4697 10.0303L4.4697 7.03033C4.17681 6.73744 4.17681 6.26256 4.4697 5.96967Z", "clip-rule": "evenodd" } })]);
-}, Le = [], Ee = /* @__PURE__ */ R(
-  Oe,
-  Ce,
+}, Ee = [], $e = /* @__PURE__ */ B(
   Le,
+  Ce,
+  Ee,
   !1,
   null,
   "18645fe6",
   null,
   null
 );
-const $e = Ee.exports;
-let H = 0;
-const De = {
+const De = $e.exports;
+let q = 0;
+const Re = {
   beforeCreate() {
-    this.uuid = H.toString(), H += 1;
+    this.uuid = q.toString(), q += 1;
   }
 };
-var Re = function() {
+var Be = function() {
   var e = this, n = e._self._c;
   return n("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M11.5303 10.0303C11.2374 10.3232 10.7626 10.3232 10.4697 10.0303L8 7.56066L5.53033 10.0303C5.23744 10.3232 4.76256 10.3232 4.46967 10.0303C4.17678 9.73744 4.17678 9.26256 4.46967 8.96967L7.46967 5.96967C7.61032 5.82902 7.80109 5.75 8 5.75C8.19891 5.75 8.38968 5.82902 8.53033 5.96967L11.5303 8.96967C11.8232 9.26256 11.8232 9.73744 11.5303 10.0303Z", "clip-rule": "evenodd" } })]);
-}, Be = [], Ie = /* @__PURE__ */ R(
-  De,
+}, Ie = [], Te = /* @__PURE__ */ B(
   Re,
   Be,
+  Ie,
   !1,
   null,
   "6f20d431",
   null,
   null
 );
-const Te = Ie.exports, Ae = F({
+const Ae = Te.exports, Ne = F({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: $e, ChevronUpSmallIcon: Te, DropdownBaseTextbox: re },
+  components: { ChevronDownSmallIcon: De, ChevronUpSmallIcon: Ae, DropdownBaseTextbox: ue },
   inheritAttrs: !1,
   props: {
     /**
@@ -393,13 +394,13 @@ const Te = Ie.exports, Ae = F({
       [`b-dropdown-small-textbox--${A.DISABLED}`]: t.disabled,
       [`b-dropdown-small-textbox--${A.READONLY}`]: t.readonly,
       [`b-dropdown-small-textbox--${A.OPENED}`]: t.open
-    })), l = c(() => t.open && !t.disabled && !t.readonly), o = () => {
+    })), l = c(() => t.open && !t.disabled && !t.readonly), a = () => {
       e($.OPEN);
-    }, a = () => {
+    }, o = () => {
       e($.CLOSE);
     }, r = {
-      [$.OPEN]: o,
-      [$.CLOSE]: a
+      [$.OPEN]: a,
+      [$.CLOSE]: o
     };
     return {
       // Values
@@ -410,66 +411,47 @@ const Te = Ie.exports, Ae = F({
     };
   }
 });
-var Ne = function() {
+var Me = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [n("dropdown-base-textbox", e._g(e._b({ staticClass: "b-dropdown-small-textbox__textbox", scopedSlots: e._u([{ key: "icon", fn: function() {
     return [n("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [n("chevron-up-small-icon", { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), n("chevron-down-small-icon", { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
   }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), e.listeners))], 1);
-}, Me = [], Pe = /* @__PURE__ */ R(
-  Ae,
+}, Pe = [], Fe = /* @__PURE__ */ B(
   Ne,
   Me,
+  Pe,
   !1,
   null,
   "d9e6eff4",
   null,
   null
 );
-const Fe = Pe.exports;
-function ke(t, e, n) {
-  const l = m(t), o = m(e), a = (u, i = []) => i.flatMap((f) => f.label.toLocaleLowerCase().includes(u) ? [f, ...a(u, f.items)] : f.items ? [...a(u, f.items)] : []);
-  return V(l, () => {
-    n !== void 0 && n(l.value);
-  }), c(() => {
-    if (!l.value || n !== void 0)
-      return o.value;
-    const u = l.value.toLocaleLowerCase();
-    return a(u, o.value);
-  });
-}
-const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
-  const l = t.value.find(({ value: o }) => o === n.value);
+const ke = Fe.exports, Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
+  const l = t.value.find(({ value: a }) => a === n.value);
   return (l == null ? void 0 : l.label) || e.value || null;
 }, We = ({ selectedValues: t, items: e, placeholder: n }) => {
   var l;
-  return !t.value || ((l = t.value) == null ? void 0 : l.length) === 0 ? n.value || null : t.value.map((o) => {
-    const { label: a } = e.value.find(({ value: r }) => r === o);
-    return a;
+  return !t.value || ((l = t.value) == null ? void 0 : l.length) === 0 ? n.value || null : t.value.map((a) => {
+    const { label: o } = e.value.find(({ value: r }) => r === a);
+    return o;
   }).join(", ");
 }, ze = ({ selectedValues: t, items: e, placeholder: n }) => {
   var l;
-  return !t.value || !((l = t.value) != null && l.length) ? n.value || null : e.value.reduce((o, a) => {
-    if (a.items) {
-      const r = a.items.filter(
+  return !t.value || !((l = t.value) != null && l.length) ? n.value || null : e.value.reduce((a, o) => {
+    if (o.items) {
+      const r = o.items.filter(
         (i) => t.value.includes(i.value)
       );
-      r.length === a.items.length ? o.push(a.label) : r.forEach(({ label: i }) => o.push(i));
+      r.length === o.items.length ? a.push(o.label) : r.forEach(({ label: i }) => a.push(i));
     }
-    return t.value.includes(a.value) && o.push(a.label), o;
+    return t.value.includes(o.value) && a.push(o.label), a;
   }, []).join(", ");
-}, qe = ({ items: t, placeholder: e, value: n, multiple: l }) => {
-  const o = c(() => t.value.find((r) => {
+}, Ue = ({ items: t, placeholder: e, value: n, multiple: l }) => {
+  const a = c(() => t.value.find((r) => {
     var u;
     return (u = r.items) == null ? void 0 : u.length;
   }));
-  return c(() => l.value ? o.value ? ze({ selectedValues: n, placeholder: e, items: t }) : We({ selectedValues: n, items: t, placeholder: e }) : Ke({ items: t, placeholder: e, selectedValue: n }));
-}, Ue = {
-  "en-US": {
-    optional: "optional",
-    required: "required",
-    clearSearch: "Clear filter",
-    ariaLabelFallback: "Dropdown"
-  }
+  return c(() => l.value ? a.value ? ze({ selectedValues: n, placeholder: e, items: t }) : We({ selectedValues: n, items: t, placeholder: e }) : Ke({ items: t, placeholder: e, selectedValue: n }));
 }, Z = (t) => {
   var e;
   (e = t.value.$children) == null || e[0].$refs.textbox.focus();
@@ -478,59 +460,59 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
   optionsContainerRef: e,
   selectedValueIndex: n,
   isDropdownOpen: l,
-  isDynamicFltering: o,
-  items: a,
+  isDynamicFltering: a,
+  items: o,
   isMultiple: r
-}, u, i, f) => {
+}, u, i, p) => {
   const w = ({ detail: d }) => {
-    d.preventDefault(), l.value || (i(), C(() => {
-      var p, g;
-      r ? (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[n.value].$el.focus();
+    d.preventDefault(), l.value || (i(), L(() => {
+      var f, g;
+      r ? (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[n.value].$el.focus();
     }));
-  }, x = ({ detail: d }) => {
-    d.preventDefault(), l.value || (i(), C(() => {
-      var p;
-      (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
+  }, _ = ({ detail: d }) => {
+    d.preventDefault(), l.value || (i(), L(() => {
+      var f;
+      (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     }));
-  }, _ = () => {
-    l.value || (i(), C(() => {
-      var d, p;
+  }, x = () => {
+    l.value || (i(), L(() => {
+      var d, f;
       if (r) {
         const g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (d = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || d[g.length - 1].$children[a.length - 1].$el.focus();
+        (d = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || d[g.length - 1].$children[o.length - 1].$el.focus();
       } else
-        (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[a.length - 1].$el.focus();
+        (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[o.length - 1].$el.focus();
     }));
   }, y = () => {
-    l.value && (f(), Z(t));
+    l.value && (p(), Z(t));
   }, h = () => {
-    l.value || i(), C(() => {
+    l.value || i(), L(() => {
       var d;
       (d = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || d[0].$el.focus();
     });
   }, S = ({ detail: d }) => {
-    d.preventDefault(), u(), l.value && C(() => {
-      var p, g;
-      r ? (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[n.value].$el.focus();
+    d.preventDefault(), u(), l.value && L(() => {
+      var f, g;
+      r ? (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (g = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || g[n.value].$el.focus();
     });
   }, v = () => {
-    u(), l.value && C(() => {
-      var d, p;
-      r ? (d = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || d[0].$el.focus() : (p = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[n.value].$el.focus();
+    u(), l.value && L(() => {
+      var d, f;
+      r ? (d = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || d[0].$el.focus() : (f = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[n.value].$el.focus();
     });
   };
   return c(() => ({
-    ...o.value ? {} : { [O.SPACE]: S },
+    ...a.value ? {} : { [O.SPACE]: S },
     [O.ENTER]: v,
     [O.ARROW_DOWN]: w,
-    [O.ARROW_UP]: x,
-    [O.END]: _,
+    [O.ARROW_UP]: _,
+    [O.END]: x,
     [O.ESCAPE]: y,
     [O.HOME]: h
   }));
 }, He = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
   const l = () => {
-    e.value && n(), C(() => {
+    e.value && n(), L(() => {
       Z(t);
     });
   };
@@ -540,17 +522,35 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
     [s.TAB]: l,
     [s.SPACE]: l
   };
-}, Ve = F({
-  i18n: { messages: Ue },
+};
+function qe(t, e, n) {
+  const l = m(t), a = m(e), o = (u, i = []) => i.flatMap((p) => p.label.toLocaleLowerCase().includes(u) ? [p, ...o(u, p.items)] : p.items ? [...o(u, p.items)] : []);
+  return V(l, () => {
+    n !== void 0 && n(l.value);
+  }), c(() => {
+    if (!l.value || n !== void 0)
+      return a.value;
+    const u = l.value.toLocaleLowerCase();
+    return o(u, a.value);
+  });
+}
+const Ve = {
+  "en-US": {
+    clearSearch: "Clear filter",
+    ariaLabelFallback: "Dropdown"
+  }
+}, Je = F({
+  i18n: { messages: Ve },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Se,
-    BentoTypography: ue,
-    DropdownInputDefault: de,
-    DropdownInputSmall: Fe,
-    ErrorMessage: be
+    BentoDropdownOptionsContainer: Oe,
+    BentoTypography: re,
+    DropdownInputDefault: ce,
+    DropdownInputSmall: ke,
+    ErrorMessage: be,
+    FieldLabel: me
   },
-  directives: { BentoClickOutsideDirective: me, BentoKeyboardNavigationDirective: pe },
+  directives: { BentoClickOutsideDirective: _e, BentoKeyboardNavigationDirective: ve },
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -669,9 +669,13 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
      */
     size: {
       type: String,
-      default: L.DEFAULT,
-      validator: (t) => Object.values(L).includes(t)
+      default: C.DEFAULT,
+      validator: (t) => Object.values(C).includes(t)
     },
+    /**
+     * Adds a info icon next to the label to display the passed tooltip message.
+     */
+    tooltipText: { type: String, default: null },
     /**
      * The `input` value.
      * Providing an empty string will select no options.
@@ -700,20 +704,20 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
   },
   emits: ["input", s.SHOW_MORE],
   setup(t, { attrs: e, emit: n, slots: l }) {
-    var q;
-    const { t: o } = k(), a = m(null), r = m(null), u = m(null), i = m(!1), f = D("bento-dropdown-options-container"), w = D("dropdown-label"), x = D("dropdown-description"), _ = D("dropdown-error"), { isReadOnly: y } = ve(E(t, "readonly")), h = m(e["aria-label"]), { ariaLabel: S } = J(t), v = fe({
+    var U;
+    const { t: a } = k(), o = m(null), r = m(null), u = m(null), i = m(!1), p = R("bento-dropdown-options-container"), w = R("dropdown-label"), _ = R("dropdown-description"), x = R("dropdown-error"), { isReadOnly: y } = pe(E(t, "readonly")), h = m(e["aria-label"]), { ariaLabel: S } = J(t), v = fe({
       ariaLabel: h.value,
       // TODO: take this line away when the aria-label props is removed
       label: S,
-      defaultFallback: o("ariaLabelFallback")
-    }), B = c(() => ({
+      defaultFallback: a("ariaLabelFallback")
+    }), D = c(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), d = m(""), p = E(t, "items"), g = ke(d, p, (q = t == null ? void 0 : t.search) == null ? void 0 : q.searchEvent), I = c(() => t.dynamicFiltering && !!d.value), Y = qe({
-      items: p,
+    })), d = m(""), f = E(t, "items"), g = qe(d, f, (U = t == null ? void 0 : t.search) == null ? void 0 : U.searchEvent), I = c(() => t.dynamicFiltering && !!d.value), Y = Ue({
+      items: f,
       multiple: E(t, "multiple"),
       placeholder: E(t, "placeholder"),
       value: E(t, "value")
-    }), G = c(() => t.size === L.DEFAULT), Q = c(
+    }), G = c(() => t.size === C.DEFAULT), Q = c(
       () => t != null && t.multiple ? t.items.filter(
         ({ value: b }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(b)
       ) : t.items.find(({ value: b }) => b === (t == null ? void 0 : t.value))
@@ -724,7 +728,7 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       var b;
       return t.multiple ? (b = t == null ? void 0 : t.value) == null ? void 0 : b.length : null;
     }), te = c(
-      () => `${t.description ? x : ""} ${t.errorMessage ? _ : ""}`.trim() || null
+      () => `${t.description ? _ : ""} ${t.errorMessage ? x : ""}`.trim() || null
     ), ne = () => {
       y.value || (i.value = !0);
     }, T = () => {
@@ -737,9 +741,9 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       t.multiple || (d.value = "", i.value = !1), n("input", b);
     }, z = () => {
       n(s.SHOW_MORE);
-    }, ae = je(
+    }, oe = je(
       {
-        inputContainerRef: a,
+        inputContainerRef: o,
         optionsContainerRef: u,
         selectedValueIndex: X,
         isDropdownOpen: i,
@@ -750,9 +754,9 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       K,
       ne,
       T
-    ), oe = He(
+    ), ae = He(
       {
-        inputContainerRef: a,
+        inputContainerRef: o,
         isDropdownOpen: i
       },
       T
@@ -760,9 +764,9 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       [s.CLOSE_DROPDOWN]: T,
       [s.SELECT]: W,
       [s.SHOW_MORE]: z,
-      ...oe
+      ...ae
     };
-    return t.error && ce(
+    return t.error && de(
       'BentoDropdown "error" property',
       `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
                         Having the field as "undefined" will hide/remove the error.
@@ -775,14 +779,14 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       idDefaultSize: G,
       isDropdownOpen: i,
       displayValue: Y,
-      dropdownOptionsContainerId: f,
+      dropdownOptionsContainerId: p,
       filteredItems: g,
       isSearching: I,
       isReadOnly: y,
       searchTerm: d,
       labelId: w,
-      descriptionId: x,
-      errorId: _,
+      descriptionId: _,
+      errorId: x,
       ariaDescribedBy: te,
       selectedValueItem: Q,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
@@ -790,9 +794,9 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       // { slots } as a proxy of $scopedSlots and $scopes in their
       // respective Vue version. Source: https://github.com/vuejs/composition-api/issues/84#issuecomment-524885445
       slots: l,
-      descriptionConditionalClasses: B,
+      descriptionConditionalClasses: D,
       // Refs
-      inputContainerRef: a,
+      inputContainerRef: o,
       inputContainerRefWrapper: r,
       optionsContainerRef: u,
       // Events
@@ -800,39 +804,39 @@ const Ke = ({ items: t, placeholder: e, selectedValue: n }) => {
       toggleDropdown: K,
       onOptionSelected: W,
       emitShowMoreEvent: z,
-      textboxKeyboardNavigationListeners: ae,
+      textboxKeyboardNavigationListeners: oe,
       listboxListeners: se
     };
   }
 });
-var Je = function() {
+var Ze = function() {
   var l;
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeOpenedDropdown, expression: "closeOpenedDropdown" }], staticClass: "b-dropdown" }, [e.label ? n("div", { staticClass: "b-dropdown__label", attrs: { id: e.labelId } }, [n("bento-typography", { attrs: { el: "span", stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: "span" } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: "span" } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { 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: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(o) {
-    e.searchTerm = o;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeOpenedDropdown, expression: "closeOpenedDropdown" }], staticClass: "b-dropdown" }, [e.label ? n("field-label", { attrs: { id: e.labelId, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), n("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [n(e.size, { ref: "inputContainerRef", tag: "component", attrs: { 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: e.disabled, "display-value": e.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: e.isDropdownOpen, "selected-value-item": e.idDefaultSize ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(a) {
+    e.searchTerm = a;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": e.emptyState, "debounce-time": (l = e.search) == null ? void 0 : l.debounceTime, disabled: e.disabled, "input-size": e.size, "is-option-disabled": e.isOptionDisabled, items: e.filteredItems, multiple: e.multiple, open: e.isDropdownOpen, "selected-value": e.value, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
-    return { key: a, fn: function(r) {
-      return [e._t(a, null, null, r)];
+  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "empty-state": e.emptyState, "debounce-time": (l = e.search) == null ? void 0 : l.debounceTime, disabled: e.disabled, "input-size": e.size, "is-option-disabled": e.isOptionDisabled, items: e.filteredItems, multiple: e.multiple, open: e.isDropdownOpen, "selected-value": e.value, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(e.slots, function(a, o) {
+    return { key: o, fn: function(r) {
+      return [e._t(o, null, null, r)];
     } };
   })], null, !0) }, e.listboxListeners)) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? n("bento-typography", { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
-}, Ze = [], Ye = /* @__PURE__ */ R(
-  Ve,
+}, Ye = [], Ge = /* @__PURE__ */ B(
   Je,
   Ze,
+  Ye,
   !1,
   null,
-  "42420745",
+  "dff16eb9",
   null,
   null
 );
-const ct = Ye.exports;
+const ft = Ge.exports;
 export {
-  ct as B,
-  L as a,
-  ke as u
+  ft as B,
+  C as a,
+  qe as u
 };
-//# sourceMappingURL=dropdown.f1253a54.js.map
+//# sourceMappingURL=dropdown.ce937989.js.map