@adyen/bento-vue2 1.0.0 → 1.1.0

package/dist/chunks/{dropdown.45f3fad6.js → dropdown.e298bb6c.js}

@@ -1,81 +1,80 @@
-import { ref as b, watch as H, computed as d, defineComponent as R, toRefs as le, nextTick as x, toRef as O } from "vue";
-import { D as oe, a as w, b as T, c as ae } from "./dropdown-default-textbox.64b8861c.js";
-import { n as D } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as se, d as ie, c as re } from "./index.3aedb3dd.js";
+import { ref as b, watch as H, computed as d, defineComponent as I, toRefs as oe, nextTick as S, toRef as C } from "vue";
+import { D as le, a as O, b as B, c as ae } from "./dropdown-default-textbox.e425fc5b.js";
+import { n as $ } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as se, d as ie, a as re } from "./index.e1fcc9e0.js";
 import { g as L } from "./unique-id.a2a2b458.js";
-import { a as s, B as A, b as V } from "./listbox.13cefddb.js";
-import { B as E, a as de } from "./debounce.f8d92e44.js";
-import { PopperContainer as $, PopperContainerPosition as F } from "../popper-container.js";
-import { u as j } from "./i18n.36074534.js";
-import { BentoPopover as k, BentoPopoverPositions as z } from "../popover.js";
-import { c as W } from "./button-actions.c87eaee6.js";
-import { E as ue } from "./error-message.05450d5d.js";
+import { a as i, B as R, b as V } from "./listbox.99d23071.js";
+import { B as w, a as de } from "./debounce.f8d92e44.js";
+import { PopperContainer as T, PopperContainerPosition as F } from "../popper-container.js";
+import { u as j } from "./i18n.155748d6.js";
+import { BentoPopover as W, BentoPopoverPositions as k } from "../popover.js";
+import { c as z } from "./button-actions.03751d96.js";
+import { E as ue } from "./error-message.4269d92b.js";
 import { B as ce } from "./directive.0408e565.js";
 import "../assets/dropdown.css";
-var C = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(C || {});
-const N = {
+var E = /* @__PURE__ */ ((t) => (t.DEFAULT = "DropdownInputDefault", t.SMALL = "DropdownInputSmall", t))(E || {});
+const fe = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, fe = (t, e, n) => {
-  const l = b(t.value), { t: a } = j({ messages: N });
+}, pe = (t, e, n) => {
+  const o = b(t.value), { t: l } = j();
   H(t, () => {
-    l.value = t.value;
+    o.value = t.value;
   });
-  const o = d(
-    () => JSON.stringify(l.value) === JSON.stringify(t.value)
-  ), r = () => {
-    n(s.SELECT, l.value), n(s.CLOSE_DROPDOWN);
-  }, i = () => {
-    l.value = t.value, n(s.CLOSE_DROPDOWN);
-  }, c = d(() => [
+  const a = d(
+    () => JSON.stringify(o.value) === JSON.stringify(t.value)
+  ), s = () => {
+    n(i.SELECT, o.value), n(i.CLOSE_DROPDOWN);
+  }, r = () => {
+    o.value = t.value, n(i.CLOSE_DROPDOWN);
+  }, u = d(() => [
     {
-      title: a("apply"),
-      event: r,
-      disabled: o.value
+      title: l("apply"),
+      event: s,
+      disabled: a.value
     },
     {
-      title: a("cancel"),
-      event: i
+      title: l("cancel"),
+      event: r
     }
-  ]), u = (f) => {
-    l.value = f, e.value || n(s.SELECT, f);
-  }, y = (f) => {
-    u(f), n(s.TAB);
-  }, v = (f) => {
-    u(f), n(s.ENTER);
-  }, m = (f) => {
-    u(f), n(s.SPACE);
+  ]), c = (f) => {
+    o.value = f, e.value || n(i.SELECT, f);
+  }, _ = (f) => {
+    c(f), n(i.TAB);
+  }, x = (f) => {
+    c(f), n(i.ENTER);
+  }, p = (f) => {
+    c(f), n(i.SPACE);
   }, g = () => {
-    i(), n(s.ESCAPE);
-  }, _ = () => {
-    n(s.SHOW_MORE);
-  }, h = {
-    [s.SELECT]: u,
-    [s.SHOW_MORE]: _,
-    [s.TAB]: y,
-    [s.SPACE]: m,
-    [s.ENTER]: v
+    r(), n(i.ESCAPE);
+  }, h = () => {
+    n(i.SHOW_MORE);
+  }, m = {
+    [i.SELECT]: c,
+    [i.SHOW_MORE]: h,
+    [i.TAB]: _,
+    [i.SPACE]: p,
+    [i.ENTER]: x
   };
   return {
     // Values
-    actions: c,
-    internalSelectedValue: l,
+    actions: u,
+    internalSelectedValue: o,
     // Methods
-    listeners: h,
+    listeners: m,
     onEscapeKey: g
   };
-}, ve = R({
-  i18n: { messages: N },
+}, ve = I({
+  i18n: { messages: fe },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: A,
-    PopperContainer: $,
-    BentoPopover: k
+    BentoListbox: R,
+    PopperContainer: T,
+    BentoPopover: W
   },
-  inheritAttrs: !1,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -112,8 +111,8 @@ const N = {
      */
     inputSize: {
       type: String,
-      default: C.DEFAULT,
-      validator: (t) => Object.values(C).includes(t)
+      default: E.DEFAULT,
+      validator: (t) => Object.values(E).includes(t)
     },
     /**
      * The option elements to populate the dropdown with.
@@ -162,108 +161,108 @@ const N = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: A.props.searching,
+    searching: R.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: $.props.targetElement.type, required: !0 }
+    targetElement: { type: T.props.targetElement.type, required: !0 }
   },
   emits: [
-    s.CLOSE_DROPDOWN,
-    s.SHOW_MORE,
-    s.SELECT,
-    s.ENTER,
-    s.ESCAPE,
-    s.SPACE,
-    s.TAB
+    i.CLOSE_DROPDOWN,
+    i.SHOW_MORE,
+    i.SELECT,
+    i.ENTER,
+    i.ESCAPE,
+    i.SPACE,
+    i.TAB
   ],
   setup(t, { emit: e, slots: n }) {
-    const { selectedValue: l, multiple: a } = le(t), o = b(null), { t: r } = j({ messages: N }), i = d(() => t.open && !t.disabled), c = d(() => r("noOptionsMatchThisSearch")), u = d(() => ({
-      "b-dropdown-options-container__listbox--small": t.inputSize === C.SMALL,
+    const { selectedValue: o, multiple: l } = oe(t), a = b(null), { t: s } = j(), r = d(() => t.open && !t.disabled), u = d(() => s("noOptionsMatchThisSearch")), c = d(() => ({
+      "b-dropdown-options-container__listbox--small": t.inputSize === E.SMALL,
       "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
-    })), { actions: y, internalSelectedValue: v, listeners: m, onEscapeKey: g } = fe(
+    })), { actions: _, internalSelectedValue: x, listeners: p, onEscapeKey: g } = pe(
+      o,
       l,
-      a,
       e
-    ), _ = d(
-      () => t != null && t.multiple ? k : $
     ), h = d(
+      () => t != null && t.multiple ? W : T
+    ), m = d(
       () => {
         var f;
         return t != null && t.multiple ? {
-          actionsLayout: W.SPACE_BETWEEN,
-          actions: y.value,
+          actionsLayout: z.SPACE_BETWEEN,
+          actions: _.value,
           divider: !0,
           id: L(`dropdown-options-${t.id}`),
           open: t.open,
-          position: z.BOTTOM_START,
+          position: k.BOTTOM_START,
           style: { width: `${(f = t == null ? void 0 : t.targetElement) == null ? void 0 : f.clientWidth}px` },
           targetElement: t.targetElement
         } : {
           matchWidth: !0,
           offset: [0, 8],
           position: F.BOTTOM_START,
-          style: { display: i.value ? "block" : "none" },
+          style: { display: r.value ? "block" : "none" },
           targetElement: t.targetElement
         };
       }
     );
     return {
       // Values
-      isDropdownOpen: i,
-      conditionalListboxClasses: u,
-      noResultsMessage: c,
+      isDropdownOpen: r,
+      conditionalListboxClasses: c,
+      noResultsMessage: u,
       slots: n,
-      actions: y,
-      internalSelectedValue: v,
+      actions: _,
+      internalSelectedValue: x,
       // Component wrapper
-      popperContainerOrPopoverComponent: _,
-      popperContainerOrPopoverProps: h,
+      popperContainerOrPopoverComponent: h,
+      popperContainerOrPopoverProps: m,
       // Refs
-      listboxRef: o,
+      dropdownOptionsListboxRef: a,
       // Enums
-      BentoButtonActionsLayout: W,
-      BentoPopoverPositions: z,
+      BentoButtonActionsLayout: z,
+      BentoPopoverPositions: k,
       PopperContainerPosition: F,
       // Events
       onEscapeKey: g,
-      listeners: m
+      listeners: p
     };
   }
 });
-var pe = function() {
+var _e = function() {
   var e = this, n = e._self._c;
-  return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container" }, "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: "listboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "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 }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
-    return { key: a, fn: function(o) {
-      return [e._t(a, null, null, o)];
+  return e._self._setupProxy, n(e.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container" }, "component", e.popperContainerOrPopoverProps, !1), [n("div", { on: { keydown: function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "esc", 27, o.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, "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 }, scopedSlots: e._u([e._l(e.slots, function(o, l) {
+    return { key: l, fn: function(a) {
+      return [e._t(l, null, null, a)];
     } };
   })], null, !0) }, e.listeners))], 1)]);
-}, _e = [], ye = /* @__PURE__ */ D(
+}, me = [], ye = /* @__PURE__ */ $(
   ve,
-  pe,
   _e,
+  me,
   !1,
   null,
-  "43a2b24f",
+  "ad36a254",
   null,
   null
 );
-const me = ye.exports;
+const be = ye.exports;
 let q = 0;
-const be = {
+const ge = {
   beforeCreate() {
     this.uuid = q.toString(), q += 1;
   }
 };
-var ge = function() {
+var xe = 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" } })]);
-}, he = [], Se = /* @__PURE__ */ D(
-  be,
+}, he = [], we = /* @__PURE__ */ $(
   ge,
+  xe,
   he,
   !1,
   null,
@@ -271,29 +270,29 @@ var ge = function() {
   null,
   null
 );
-const Ee = Se.exports;
+const Se = we.exports;
 let U = 0;
-const xe = {
+const Ee = {
   beforeCreate() {
     this.uuid = U.toString(), U += 1;
   }
 };
-var Ce = function() {
+var Oe = 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" } })]);
-}, we = [], Oe = /* @__PURE__ */ D(
-  xe,
+}, Ce = [], Le = /* @__PURE__ */ $(
+  Ee,
+  Oe,
   Ce,
-  we,
   !1,
   null,
   "6f20d431",
   null,
   null
 );
-const Le = Oe.exports, De = R({
+const $e = Le.exports, De = I({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Ee, ChevronUpSmallIcon: Le, DropdownBaseTextbox: oe },
+  components: { ChevronDownSmallIcon: Se, ChevronUpSmallIcon: $e, DropdownBaseTextbox: le },
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
@@ -364,26 +363,26 @@ const Le = Oe.exports, De = R({
      */
     value: { type: String, default: "" }
   },
-  emits: [w.OPEN, w.CLOSE],
+  emits: [O.OPEN, O.CLOSE],
   setup(t, { emit: e }) {
     const n = d(() => ({
-      [`b-dropdown-small-textbox--${T.DISABLED}`]: t.disabled,
-      [`b-dropdown-small-textbox--${T.READONLY}`]: t.readonly,
-      [`b-dropdown-small-textbox--${T.OPENED}`]: t.open
-    })), l = d(() => t.open && !t.disabled && !t.readonly), a = () => {
-      e(w.OPEN);
-    }, o = () => {
-      e(w.CLOSE);
-    }, r = {
-      [w.OPEN]: a,
-      [w.CLOSE]: o
+      [`b-dropdown-small-textbox--${B.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${B.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${B.OPENED}`]: t.open
+    })), o = d(() => t.open && !t.disabled && !t.readonly), l = () => {
+      e(O.OPEN);
+    }, a = () => {
+      e(O.CLOSE);
+    }, s = {
+      [O.OPEN]: l,
+      [O.CLOSE]: a
     };
     return {
       // Values
       conditionalClasses: n,
-      isDropdownOpen: l,
+      isDropdownOpen: o,
       // Events
-      listeners: r
+      listeners: s
     };
   }
 });
@@ -392,7 +391,7 @@ var Be = function() {
   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);
-}, Te = [], $e = /* @__PURE__ */ D(
+}, Te = [], Re = /* @__PURE__ */ $(
   De,
   Be,
   Te,
@@ -402,42 +401,42 @@ var Be = function() {
   null,
   null
 );
-const Ae = $e.exports;
-function Ne(t, e, n) {
-  const l = b(t), a = b(e), o = (i, c = []) => c.flatMap((u) => u.label.toLocaleLowerCase().includes(i) ? [u, ...o(i, u.items)] : u.items ? [...o(i, u.items)] : []);
-  return H(l, () => {
-    n !== void 0 && n(l.value);
+const Ie = Re.exports;
+function Ae(t, e, n) {
+  const o = b(t), l = b(e), a = (r, u = []) => u.flatMap((c) => c.label.toLocaleLowerCase().includes(r) ? [c, ...a(r, c.items)] : c.items ? [...a(r, c.items)] : []);
+  return H(o, () => {
+    n !== void 0 && n(o.value);
   }), d(() => {
-    if (!l.value || n !== void 0)
-      return a.value;
-    const i = l.value.toLocaleLowerCase();
-    return o(i, a.value);
+    if (!o.value || n !== void 0)
+      return l.value;
+    const r = o.value.toLocaleLowerCase();
+    return a(r, l.value);
   });
 }
-const Re = ({ 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;
-}, Pe = ({ selectedValues: t, items: e, placeholder: n }) => t.value ? t.value.map((l) => {
-  const { label: a } = e.value.find(({ value: o }) => o === l);
-  return a;
+const Ne = ({ items: t, placeholder: e, selectedValue: n }) => {
+  const o = t.value.find(({ value: l }) => l === n.value);
+  return (o == null ? void 0 : o.label) || e.value || null;
+}, Pe = ({ selectedValues: t, items: e, placeholder: n }) => t.value ? t.value.map((o) => {
+  const { label: l } = e.value.find(({ value: a }) => a === o);
+  return l;
 }).join(", ") : n.value || null, Me = ({ selectedValues: t, items: e, placeholder: n }) => {
-  var l;
-  return (l = t.value) != null && l.length ? e.value.reduce((a, o) => {
-    if (o.items) {
-      const r = o.items.filter(
-        (c) => t.value.includes(c.value)
+  var o;
+  return (o = t.value) != null && o.length ? e.value.reduce((l, a) => {
+    if (a.items) {
+      const s = a.items.filter(
+        (u) => t.value.includes(u.value)
       );
-      r.length === o.items.length ? a.push(o.label) : r.forEach(({ label: c }) => a.push(c));
+      s.length === a.items.length ? l.push(a.label) : s.forEach(({ label: u }) => l.push(u));
     }
-    return t.value.includes(o.value) && a.push(o.label), a;
+    return t.value.includes(a.value) && l.push(a.label), l;
   }, []).join(", ") : n.value || null;
-}, Ie = ({ items: t, placeholder: e, value: n, multiple: l }) => {
-  const a = d(() => t.value.find((r) => {
-    var i;
-    return (i = r.items) == null ? void 0 : i.length;
+}, Ke = ({ items: t, placeholder: e, value: n, multiple: o }) => {
+  const l = d(() => t.value.find((s) => {
+    var r;
+    return (r = s.items) == null ? void 0 : r.length;
   }));
-  return d(() => l.value ? a.value ? Me({ selectedValues: n, placeholder: e, items: t }) : Pe({ selectedValues: n, items: t, placeholder: e }) : Re({ items: t, placeholder: e, selectedValue: n }));
-}, Ke = {
+  return d(() => o.value ? l.value ? Me({ selectedValues: n, placeholder: e, items: t }) : Pe({ selectedValues: n, items: t, placeholder: e }) : Ne({ items: t, placeholder: e, selectedValue: n }));
+}, Fe = {
   "en-US": {
     optional: "optional",
     required: "required",
@@ -445,75 +444,78 @@ const Re = ({ items: t, placeholder: e, selectedValue: n }) => {
   }
 }, J = (t) => {
   t.value.$children[0].$refs.textbox.focus();
-}, Fe = ({ inputContainerRef: t, optionsContainerRef: e, selectedValueIndex: n, isDropdownOpen: l, isDynamicFltering: a, items: o }, r, i, c) => {
-  const u = ({ detail: S }) => {
-    S.preventDefault(), l.value || (i(), x(() => {
-      e.value.$refs.listboxRef.$children[n.value].$el.focus();
+}, We = ({
+  inputContainerRef: t,
+  optionsContainerRef: e,
+  selectedValueIndex: n,
+  isDropdownOpen: o,
+  isDynamicFltering: l,
+  items: a,
+  isMultiple: s
+}, r, u, c) => {
+  const _ = ({ detail: y }) => {
+    y.preventDefault(), o.value || (u(), S(() => {
+      s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     }));
-  }, y = ({ detail: S }) => {
-    S.preventDefault(), l.value || (i(), x(() => {
-      e.value.$refs.listboxRef.$children[0].$el.focus();
+  }, x = ({ detail: y }) => {
+    y.preventDefault(), o.value || (u(), S(() => {
+      e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     }));
-  }, v = () => {
-    l.value || (i(), x(() => {
-      e.value.$refs.listboxRef.$children[o.length - 1].$el.focus();
+  }, p = () => {
+    o.value || (u(), S(() => {
+      if (s) {
+        const y = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[y.length - 1].$children[a.length - 1].$el.focus();
+      } else
+        e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[a.length - 1].$el.focus();
     }));
-  }, m = () => {
-    l.value && (c(), J(t));
   }, g = () => {
-    l.value || i(), x(() => {
-      e.value.$refs.listboxRef.$children[0].$el.focus();
+    o.value && (c(), J(t));
+  }, h = () => {
+    o.value || u(), S(() => {
+      e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus();
     });
-  }, _ = ({ detail: S }) => {
-    S.preventDefault(), r(), l.value && x(() => {
-      e.value.$refs.listboxRef.$children[n.value].$el.focus();
+  }, m = ({ detail: y }) => {
+    y.preventDefault(), r(), o.value && S(() => {
+      s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     });
-  }, h = () => {
-    r(), l.value && x(() => {
-      e.value.$refs.listboxRef.$children[n.value].$el.focus();
+  }, f = () => {
+    r(), o.value && S(() => {
+      s ? e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[0].$el.focus() : e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children[n.value].$el.focus();
     });
   };
   return d(() => ({
-    ...a.value ? {} : { [E.SPACE]: _ },
-    [E.ENTER]: h,
-    [E.ARROW_DOWN]: u,
-    [E.ARROW_UP]: y,
-    [E.END]: v,
-    [E.ESCAPE]: m,
-    [E.HOME]: g
+    ...l.value ? {} : { [w.SPACE]: m },
+    [w.ENTER]: f,
+    [w.ARROW_DOWN]: _,
+    [w.ARROW_UP]: x,
+    [w.END]: p,
+    [w.ESCAPE]: g,
+    [w.HOME]: h
   }));
 }, ke = ({ inputContainerRef: t, isDropdownOpen: e }, n) => {
-  const l = () => {
-    n(), x(() => {
+  const o = () => {
+    e.value && n(), S(() => {
       J(t);
     });
-  }, a = () => {
-    e.value && l();
-  }, o = () => {
-    e.value && l();
-  }, r = () => {
-    e.value && l();
-  }, i = () => {
-    l();
   };
   return {
-    [s.ENTER]: o,
-    [s.ESCAPE]: a,
-    [s.TAB]: r,
-    [s.SPACE]: i
+    [i.ENTER]: o,
+    [i.ESCAPE]: o,
+    [i.TAB]: o,
+    [i.SPACE]: o
   };
-}, ze = R({
-  i18n: { messages: Ke },
+}, ze = I({
+  i18n: { messages: Fe },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: me,
+    BentoDropdownOptionsContainer: be,
     BentoTypography: se,
     DropdownInputDefault: ae,
-    DropdownInputSmall: Ae,
+    DropdownInputSmall: Ie,
     ErrorMessage: ue
   },
   directives: { BentoClickOutsideDirective: ce, BentoKeyboardNavigationDirective: de },
-  inheritAttrs: !1,
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -538,7 +540,9 @@ const Re = ({ items: t, placeholder: e, selectedValue: n }) => {
       default: !1
     },
     /**
-     * @deprecated Highlights the dropdown in an erroneous state.
+     * Highlights the dropdown in an erroneous state.
+     *
+     * @deprecated Use "errorMessage" prop instead
      */
     error: { type: Boolean, default: !1 },
     /**
@@ -591,7 +595,7 @@ const Re = ({ items: t, placeholder: e, selectedValue: n }) => {
      */
     lazyLoadType: {
       type: String,
-      default: A.props.lazyLoadType.default
+      default: R.props.lazyLoadType.default
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -619,8 +623,8 @@ const Re = ({ items: t, placeholder: e, selectedValue: n }) => {
      */
     size: {
       type: String,
-      default: C.DEFAULT,
-      validator: (t) => Object.values(C).includes(t)
+      default: E.DEFAULT,
+      validator: (t) => Object.values(E).includes(t)
     },
     /**
      * The `input` value.
@@ -640,133 +644,137 @@ const Re = ({ items: t, placeholder: e, selectedValue: n }) => {
       default: void 0
     }
   },
-  emits: ["input", s.SHOW_MORE],
+  emits: ["input", i.SHOW_MORE],
   setup(t, { emit: e, slots: n }) {
     var K;
-    const l = b(null), a = b(null), o = b(!1), r = L("bento-dropdown-options-container"), i = L("dropdown-label"), c = L("dropdown-description"), u = L("dropdown-error"), y = d(() => ({
+    const o = b(null), l = b(null), a = b(null), s = b(!1), r = L("bento-dropdown-options-container"), u = L("dropdown-label"), c = L("dropdown-description"), _ = L("dropdown-error"), x = d(() => ({
       "b-dropdown__description--error": !!t.errorMessage
-    })), v = b(""), m = O(t, "items"), g = Ne(v, m, (K = t == null ? void 0 : t.search) == null ? void 0 : K.searchEvent), _ = d(() => t.dynamicFiltering && !!v.value), h = Ie({
-      items: m,
-      multiple: O(t, "multiple"),
-      placeholder: O(t, "placeholder"),
-      value: O(t, "value")
-    }), f = d(
+    })), p = b(""), g = C(t, "items"), h = Ae(p, g, (K = t == null ? void 0 : t.search) == null ? void 0 : K.searchEvent), m = d(() => t.dynamicFiltering && !!p.value), f = Ke({
+      items: g,
+      multiple: C(t, "multiple"),
+      placeholder: C(t, "placeholder"),
+      value: C(t, "value")
+    }), A = d(
       () => t != null && t.multiple ? t.items.filter(
-        ({ value: p }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(p)
-      ) : t.items.find(({ value: p }) => p === (t == null ? void 0 : t.value))
-    ), S = d(() => {
-      const p = t.items.findIndex(({ value: ne }) => t.value === ne);
-      return p > 0 ? p : 0;
+        ({ value: v }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(v)
+      ) : t.items.find(({ value: v }) => v === (t == null ? void 0 : t.value))
+    ), y = d(() => {
+      const v = t.items.findIndex(({ value: ne }) => t.value === ne);
+      return v > 0 ? v : 0;
     }), Z = d(() => {
-      var p;
-      return t.multiple ? (p = t == null ? void 0 : t.value) == null ? void 0 : p.length : null;
+      var v;
+      return t.multiple ? (v = t == null ? void 0 : t.value) == null ? void 0 : v.length : null;
     }), Y = d(
-      () => `${t.description ? c : ""} ${t.errorMessage ? u : ""}`.trim() || null
+      () => `${t.description ? c : ""} ${t.errorMessage ? _ : ""}`.trim() || null
     ), G = () => {
-      t.readonly || (o.value = !0);
-    }, B = () => {
-      o.value = !1;
-    }, P = () => {
-      t.readonly || (o.value = !o.value, _.value && (v.value = ""));
+      t.readonly || (s.value = !0);
+    }, D = () => {
+      s.value = !1;
+    }, N = () => {
+      t.readonly || (s.value = !s.value, m.value && (p.value = ""));
     }, Q = () => {
-      _.value && (v.value = ""), o.value && (o.value = !1);
-    }, M = (p) => {
-      t.multiple || (v.value = "", o.value = !1), e("input", p);
-    }, I = () => {
-      e(s.SHOW_MORE);
-    }, X = Fe(
+      m.value && (p.value = ""), s.value && (s.value = !1);
+    }, P = (v) => {
+      t.multiple || (p.value = "", s.value = !1), e("input", v);
+    }, M = () => {
+      e(i.SHOW_MORE);
+    }, X = We(
       {
-        inputContainerRef: l,
+        inputContainerRef: o,
         optionsContainerRef: a,
-        selectedValueIndex: S,
-        isDropdownOpen: o,
-        isDynamicFltering: O(t, "dynamicFiltering"),
-        items: t.items
+        selectedValueIndex: y,
+        isDropdownOpen: s,
+        isDynamicFltering: C(t, "dynamicFiltering"),
+        items: t.items,
+        isMultiple: t.multiple
       },
-      P,
+      N,
       G,
-      B
+      D
     ), ee = ke(
       {
-        inputContainerRef: l,
-        isDropdownOpen: o
+        inputContainerRef: o,
+        isDropdownOpen: s
       },
-      B
+      D
     ), te = {
-      [s.CLOSE_DROPDOWN]: B,
-      [s.SELECT]: M,
-      [s.SHOW_MORE]: I,
+      [i.CLOSE_DROPDOWN]: D,
+      [i.SELECT]: P,
+      [i.SHOW_MORE]: M,
       ...ee
     };
     return t.error && ie(
-      "BentoDropdown Error modifier",
-      "Please provide an error message using the errorMessage modifier.",
+      'BentoDropdown "error" property',
+      `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
+                    Having the field as "undefined" will hide/remove the error.
+                    <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
     ), {
       // Values
       additionalItemsSelected: Z,
-      isDropdownOpen: o,
-      displayValue: h,
+      isDropdownOpen: s,
+      displayValue: f,
       dropdownOptionsContainerId: r,
-      filteredItems: g,
-      isSearching: _,
-      searchTerm: v,
-      labelId: i,
+      filteredItems: h,
+      isSearching: m,
+      searchTerm: p,
+      labelId: u,
       descriptionId: c,
-      errorId: u,
+      errorId: _,
       ariaDescribedBy: Y,
-      selectedValueItem: f,
+      selectedValueItem: A,
       // Conciliation of Vue2 $scopedSlots and Vue3 $scopes.
       // The setup method and the "useSlots" composible define
       // { 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: n,
-      descriptionConditionalClasses: y,
+      descriptionConditionalClasses: x,
       // Refs
-      inputContainerRef: l,
+      inputContainerRef: o,
+      inputContainerRefWrapper: l,
       optionsContainerRef: a,
       // Events
       closeOpenedDropdown: Q,
-      toggleDropdown: P,
-      onOptionSelected: M,
-      emitShowMoreEvent: I,
+      toggleDropdown: N,
+      onOptionSelected: P,
+      emitShowMoreEvent: M,
       textboxKeyboardNavigationListeners: X,
       listboxListeners: te,
       // Enums
       BentoTypographyElement: re,
-      BentoDropdownSize: C,
+      BentoDropdownSize: E,
       BentoDropdownLazyLoadType: V
     };
   }
 });
-var We = function() {
-  var l;
+var qe = function() {
+  var o;
   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: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.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: "inputContainerRef" }, e.textboxKeyboardNavigationListeners), [n(e.size, { 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.ariaLabel ? e.ariaLabel : null, "aria-readonly": e.readonly, readonly: e.readonly, 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.size === e.BentoDropdownSize.DEFAULT ? 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)];
+  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: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-dropdown__label-requirement", attrs: { el: e.BentoTypographyElement.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.ariaLabel ? e.ariaLabel : null, "aria-readonly": e.readonly, readonly: e.readonly, 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.size === e.BentoDropdownSize.DEFAULT ? e.selectedValueItem : void 0, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(l) {
+    e.searchTerm = l;
+  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
+    return { key: a, fn: function(s) {
+      return [e._t(a, null, null, s)];
     } };
-  })], null, !0) })], 1), e.inputContainerRef ? n("bento-dropdown-options-container", e._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.ariaLabel, "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.inputContainerRef, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType }, 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.ariaLabel, "debounce-time": (o = e.search) == null ? void 0 : o.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 }, scopedSlots: e._u([e._l(e.slots, function(l, a) {
+    return { key: a, fn: function(s) {
+      return [e._t(a, null, null, s)];
     } };
   })], 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: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
-}, qe = [], Ue = /* @__PURE__ */ D(
+}, Ue = [], He = /* @__PURE__ */ $(
   ze,
-  We,
   qe,
+  Ue,
   !1,
   null,
-  "354801b6",
+  "cf54f117",
   null,
   null
 );
-const ot = Ue.exports;
+const at = He.exports;
 export {
-  ot as B,
-  C as a,
-  Ne as u
+  at as B,
+  E as a,
+  Ae as u
 };
-//# sourceMappingURL=dropdown.45f3fad6.js.map
+//# sourceMappingURL=dropdown.e298bb6c.js.map