@adyen/bento-vue3 1.6.1 → 1.7.0

package/dist/chunks/{dropdown.7a104ce3.js → dropdown.afff433b.js}

@@ -1,17 +1,17 @@
-import { ref as $, watch as be, computed as f, defineComponent as ne, toRefs as ve, resolveComponent as R, openBlock as b, createBlock as I, resolveDynamicComponent as ye, mergeProps as A, withCtx as L, createElementVNode as U, withKeys as Ne, createVNode as k, toHandlers as W, createSlots as Z, renderList as Y, renderSlot as G, normalizeProps as Q, guardReactiveProps as X, createElementBlock as E, toDisplayString as P, createCommentVNode as O, pushScopeId as ge, popScopeId as he, normalizeClass as we, withDirectives as q, vShow as de, nextTick as B, toRef as N, resolveDirective as ue, createTextVNode as x } from "vue";
-import { a as s, B as ee, b as te } from "./listbox.0f25778d.js";
+import { ref as S, watch as be, computed as p, defineComponent as ne, toRefs as ve, resolveComponent as R, openBlock as b, createBlock as I, resolveDynamicComponent as ye, mergeProps as A, withCtx as O, createElementVNode as U, withKeys as Ne, createVNode as k, toHandlers as x, createSlots as Z, renderList as Y, renderSlot as G, normalizeProps as Q, guardReactiveProps as X, createElementBlock as E, toDisplayString as P, createCommentVNode as L, pushScopeId as ge, popScopeId as he, normalizeClass as we, withDirectives as q, vShow as de, nextTick as B, toRef as N, resolveDirective as ue, createTextVNode as W } from "vue";
+import { a as s, B as ee, b as te } from "./listbox.f6e5a11d.js";
 import { B as Me } from "./directive.0408e565.js";
 import { B as D, a as Pe } from "./keyboard-navigation.ca47dfa8.js";
-import { D as Ke, a as M, b as j, c as ke } from "./dropdown-default-textbox.0f878a8d.js";
+import { D as Ke, a as M, b as V, c as ke } from "./dropdown-default-textbox.0b38fac3.js";
 import { _ as z } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as ze, d as Fe } from "./index.7f24db66.js";
+import { B as ze, d as Fe } from "./index.2bd3812b.js";
 import { g as K } from "./unique-id.a2a2b458.js";
 import { u as le } from "./i18n.6c402773.js";
-import { u as xe } from "./aria-label.ac9651a5.js";
-import { u as We } from "./use-form-layout-loading.d03e5d48.js";
-import { PopperContainer as J } from "../popper-container.js";
+import { u as We } from "./aria-label.ac9651a5.js";
+import { u as xe } from "./use-form-layout-loading.d03e5d48.js";
+import { a as J } from "./index.bcc58fdd.js";
 import { BentoPopover as ce } from "../popover.js";
-import { E as qe } from "./error-message.b91afffc.js";
+import { E as qe } from "./error-message.64e1964b.js";
 import "../assets/dropdown.css";
 var T = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(T || {});
 const oe = {
@@ -21,17 +21,17 @@ const oe = {
     noOptionsMatchThisSearch: "No options match this search"
   }
 }, Ue = (e, o, n) => {
-  const t = $(e.value), { t: a } = le({ messages: oe });
+  const t = S(e.value), { t: a } = le({ messages: oe });
   be(e, () => {
     t.value = e.value;
   });
-  const i = f(
+  const i = p(
     () => JSON.stringify(t.value) === JSON.stringify(e.value)
   ), r = () => {
     n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
   }, d = () => {
     t.value = e.value, n(s.CLOSE_DROPDOWN);
-  }, l = f(() => [
+  }, l = p(() => [
     {
       title: a("apply"),
       event: r,
@@ -43,7 +43,7 @@ const oe = {
     }
   ]), c = (v) => {
     t.value = v, o.value || n(s.SELECT, v);
-  }, _ = (v) => {
+  }, $ = (v) => {
     c(v), n(s.TAB);
   }, g = (v) => {
     c(v), n(s.ENTER);
@@ -56,7 +56,7 @@ const oe = {
   }, C = {
     [s.SELECT]: c,
     [s.SHOW_MORE]: h,
-    [s.TAB]: _,
+    [s.TAB]: $,
     [s.SPACE]: y,
     [s.ENTER]: g
   };
@@ -68,7 +68,7 @@ const oe = {
     listeners: C,
     onEscapeKey: m
   };
-}, He = ne({
+}, je = ne({
   i18n: { messages: oe },
   name: "bento-dropdown-options-container",
   components: {
@@ -81,6 +81,13 @@ const oe = {
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Empty state props used with the inner empty state component which is displayed when no search results are found.
+     */
+    emptyState: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Disables dropdown functionality
      */
@@ -167,7 +174,15 @@ const oe = {
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: J.props.targetElement.type, required: !0 }
+    targetElement: { type: J.props.targetElement.type, required: !0 },
+    /**
+     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
+     * The itemHeight function is used to calculate the height of rendered item given it's index.
+     */
+    virtualScroll: {
+      type: [Boolean, Object],
+      default: !1
+    }
   },
   emits: [
     s.CLOSE_DROPDOWN,
@@ -180,21 +195,21 @@ const oe = {
   ],
   setup(e, { emit: o, slots: n }) {
     var u;
-    const { selectedValue: t, multiple: a } = ve(e), i = $(null), { t: r } = le({ messages: oe }), d = f(() => e.open && !e.disabled), l = f(() => r("noOptionsMatchThisSearch")), c = {
+    const { selectedValue: t, multiple: a } = ve(e), i = S(null), { t: r } = le({ messages: oe }), d = p(() => e.open && !e.disabled), l = p(() => r("noOptionsMatchThisSearch")), c = {
       "min-width": `${(u = e == null ? void 0 : e.targetElement) == null ? void 0 : u.clientWidth}px`,
       "max-width": "min(500px, 95%)"
-    }, _ = f(() => ({
+    }, $ = p(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), g = f(() => ({
+    })), g = p(() => ({
       "b-dropdown-options-container__listbox--small": e.inputSize === T.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
     })), { actions: y, internalSelectedValue: m, listeners: h, onEscapeKey: C } = Ue(
       t,
       a,
       o
-    ), v = f(
+    ), v = p(
       () => e != null && e.multiple ? ce : J
-    ), F = f(
+    ), F = p(
       () => e != null && e.multiple ? {
         actionsLayout: "space-between",
         actions: y.value,
@@ -222,7 +237,7 @@ const oe = {
     return {
       // Values
       isDropdownOpen: d,
-      conditionalClasses: _,
+      conditionalClasses: $,
       conditionalListboxClasses: g,
       noResultsMessage: l,
       slots: n,
@@ -239,12 +254,12 @@ const oe = {
     };
   }
 });
-function Ve(e, o, n, t, a, i) {
+function He(e, o, n, t, a, i) {
   const r = R("bento-listbox");
   return b(), I(ye(e.popperContainerOrPopoverComponent), A({
     class: ["b-dropdown-options-container", e.conditionalClasses]
   }, e.popperContainerOrPopoverProps), {
-    default: L(() => [
+    default: O(() => [
       U("div", {
         onKeydown: o[0] || (o[0] = Ne((...d) => e.onEscapeKey && e.onEscapeKey(...d), ["esc"]))
       }, [
@@ -253,6 +268,7 @@ function Ve(e, o, n, t, a, i) {
           ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
           class: ["b-dropdown-options-container__listbox", e.conditionalListboxClasses],
+          "empty-state": e.emptyState,
           "is-option-disabled": e.isOptionDisabled,
           items: e.items,
           "selected-value": e.internalSelectedValue,
@@ -261,25 +277,26 @@ function Ve(e, o, n, t, a, i) {
           searching: e.searching,
           loading: e.loading,
           "lazy-load-type": e.lazyLoadType,
-          "has-more-items": e.hasMoreItems
-        }, W(e.listeners)), Z({ _: 2 }, [
+          "has-more-items": e.hasMoreItems,
+          "virtual-scroll": e.virtualScroll
+        }, x(e.listeners)), Z({ _: 2 }, [
           Y(e.slots, (d, l) => ({
             name: l,
-            fn: L((c) => [
+            fn: O((c) => [
               G(e.$slots, l, Q(X(c)), void 0, !0)
             ])
           }))
-        ]), 1040, ["id", "aria-label", "class", "is-option-disabled", "items", "selected-value", "multiple", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items"])
+        ]), 1040, ["id", "aria-label", "class", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
       ], 32)
     ]),
     _: 3
   }, 16, ["class"]);
 }
-const je = /* @__PURE__ */ z(He, [["render", Ve], ["__scopeId", "data-v-2e5620d7"]]);
-let fe = 0;
+const Ve = /* @__PURE__ */ z(je, [["render", He], ["__scopeId", "data-v-7cdbf295"]]);
+let pe = 0;
 const Je = {
   beforeCreate() {
-    this.uuid = fe.toString(), fe += 1;
+    this.uuid = pe.toString(), pe += 1;
   }
 }, Ze = (e) => (ge("data-v-18645fe6"), e = e(), he(), e), Ye = { key: 0 }, Ge = /* @__PURE__ */ Ze(() => /* @__PURE__ */ U("path", {
   fill: "#00112C",
@@ -294,15 +311,15 @@ function Qe(e, o, n, t, a, i) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (b(), E("title", Ye, P(e.$attrs["svg-title"]), 1)) : O("", !0),
+    e.$attrs["svg-title"] ? (b(), E("title", Ye, P(e.$attrs["svg-title"]), 1)) : L("", !0),
     Ge
   ], 16);
 }
 const Xe = /* @__PURE__ */ z(Je, [["render", Qe], ["__scopeId", "data-v-18645fe6"]]);
-let pe = 0;
+let fe = 0;
 const et = {
   beforeCreate() {
-    this.uuid = pe.toString(), pe += 1;
+    this.uuid = fe.toString(), fe += 1;
   }
 }, tt = (e) => (ge("data-v-6f20d431"), e = e(), he(), e), ot = { key: 0 }, nt = /* @__PURE__ */ tt(() => /* @__PURE__ */ U("path", {
   fill: "#00112C",
@@ -317,7 +334,7 @@ function lt(e, o, n, t, a, i) {
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (b(), E("title", ot, P(e.$attrs["svg-title"]), 1)) : O("", !0),
+    e.$attrs["svg-title"] ? (b(), E("title", ot, P(e.$attrs["svg-title"]), 1)) : L("", !0),
     nt
   ], 16);
 }
@@ -397,11 +414,11 @@ const at = /* @__PURE__ */ z(et, [["render", lt], ["__scopeId", "data-v-6f20d431
   },
   emits: [M.OPEN, M.CLOSE],
   setup(e, { emit: o }) {
-    const n = f(() => ({
-      [`b-dropdown-small-textbox--${j.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${j.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${j.OPENED}`]: e.open
-    })), t = f(() => e.open && !e.disabled && !e.readonly), a = () => {
+    const n = p(() => ({
+      [`b-dropdown-small-textbox--${V.DISABLED}`]: e.disabled,
+      [`b-dropdown-small-textbox--${V.READONLY}`]: e.readonly,
+      [`b-dropdown-small-textbox--${V.OPENED}`]: e.open
+    })), t = p(() => e.open && !e.disabled && !e.readonly), a = () => {
       o(M.OPEN);
     }, i = () => {
       o(M.CLOSE);
@@ -424,8 +441,8 @@ function rt(e, o, n, t, a, i) {
   return b(), E("div", {
     class: we(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    k(l, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, W(e.listeners)), {
-      icon: L(() => [
+    k(l, A({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, x(e.listeners)), {
+      icon: O(() => [
         U("div", st, [
           q(k(r, { "svg-title": "opened" }, null, 512), [
             [de, e.isDropdownOpen]
@@ -441,10 +458,10 @@ function rt(e, o, n, t, a, i) {
 }
 const dt = /* @__PURE__ */ z(it, [["render", rt], ["__scopeId", "data-v-55bc3614"]]);
 function ut(e, o, n) {
-  const t = $(e), a = $(o), i = (d, l = []) => l.flatMap((c) => c.label.toLocaleLowerCase().includes(d) ? [c, ...i(d, c.items)] : c.items ? [...i(d, c.items)] : []);
+  const t = S(e), a = S(o), i = (d, l = []) => l.flatMap((c) => c.label.toLocaleLowerCase().includes(d) ? [c, ...i(d, c.items)] : c.items ? [...i(d, c.items)] : []);
   return be(t, () => {
     n !== void 0 && n(t.value);
-  }), f(() => {
+  }), p(() => {
     if (!t.value || n !== void 0)
       return a.value;
     const d = t.value.toLocaleLowerCase();
@@ -454,13 +471,13 @@ function ut(e, o, n) {
 const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   const t = e.value.find(({ value: a }) => a === n.value);
   return (t == null ? void 0 : t.label) || o.value || null;
-}, ft = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, pt = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return !e.value || ((t = e.value) == null ? void 0 : t.length) === 0 ? n.value || null : e.value.map((a) => {
     const { label: i } = o.value.find(({ value: r }) => r === a);
     return i;
   }).join(", ");
-}, pt = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, ft = ({ selectedValues: e, items: o, placeholder: n }) => {
   var t;
   return !e.value || !((t = e.value) != null && t.length) ? n.value || null : o.value.reduce((a, i) => {
     if (i.items) {
@@ -472,11 +489,11 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
     return e.value.includes(i.value) && a.push(i.label), a;
   }, []).join(", ");
 }, mt = ({ items: e, placeholder: o, value: n, multiple: t }) => {
-  const a = f(() => e.value.find((r) => {
+  const a = p(() => e.value.find((r) => {
     var d;
     return (d = r.items) == null ? void 0 : d.length;
   }));
-  return f(() => t.value ? a.value ? pt({ selectedValues: n, placeholder: o, items: e }) : ft({ selectedValues: n, items: e, placeholder: o }) : ct({ items: e, placeholder: o, selectedValue: n }));
+  return p(() => t.value ? a.value ? ft({ selectedValues: n, placeholder: o, items: e }) : pt({ selectedValues: n, items: e, placeholder: o }) : ct({ items: e, placeholder: o, selectedValue: n }));
 }, me = {
   "en-US": {
     optional: "optional",
@@ -484,7 +501,7 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, $e = (e) => {
+}, Se = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
 }, bt = ({
@@ -496,27 +513,27 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   items: i,
   isMultiple: r
 }, d, l, c) => {
-  const _ = ({ detail: u }) => {
+  const $ = ({ detail: u }) => {
     u.preventDefault(), t.value || (l(), B(() => {
-      var p, S;
-      r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
+      var f, _;
+      r ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (_ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[n.value].$el.focus();
     }));
   }, g = ({ detail: u }) => {
     u.preventDefault(), t.value || (l(), B(() => {
-      var p;
-      (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
+      var f;
+      (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus();
     }));
   }, y = () => {
     t.value || (l(), B(() => {
-      var u, p;
+      var u, f;
       if (r) {
-        const S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[S.length - 1].$children[i.length - 1].$el.focus();
+        const _ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[_.length - 1].$children[i.length - 1].$el.focus();
       } else
-        (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[i.length - 1].$el.focus();
+        (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[i.length - 1].$el.focus();
     }));
   }, m = () => {
-    t.value && (c(), $e(e));
+    t.value && (c(), Se(e));
   }, h = () => {
     t.value || l(), B(() => {
       var u;
@@ -524,19 +541,19 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
     });
   }, C = ({ detail: u }) => {
     u.preventDefault(), d(), t.value && B(() => {
-      var p, S;
-      r ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (S = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || S[n.value].$el.focus();
+      var f, _;
+      r ? (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[0].$el.focus() : (_ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || _[n.value].$el.focus();
     });
   }, v = () => {
     d(), t.value && B(() => {
-      var u, p;
-      r ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[n.value].$el.focus();
+      var u, f;
+      r ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (f = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || f[n.value].$el.focus();
     });
   };
-  return f(() => ({
+  return p(() => ({
     ...a.value ? {} : { [D.SPACE]: C },
     [D.ENTER]: v,
-    [D.ARROW_DOWN]: _,
+    [D.ARROW_DOWN]: $,
     [D.ARROW_UP]: g,
     [D.END]: y,
     [D.ESCAPE]: m,
@@ -545,7 +562,7 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
 }, vt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
   const t = () => {
     o.value && n(), B(() => {
-      $e(e);
+      Se(e);
     });
   };
   return {
@@ -558,7 +575,7 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   i18n: { messages: me },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: je,
+    BentoDropdownOptionsContainer: Ve,
     BentoTypography: ze,
     DropdownInputDefault: ke,
     DropdownInputSmall: dt,
@@ -573,6 +590,13 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
      * Defines a string value that labels an interactive element.
      */
     ariaLabel: { type: String, default: null },
+    /**
+     * Empty state props used with the inner empty state component which is displayed when no search results are found.
+     */
+    emptyState: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Disables dropdown functionality.
      */
@@ -688,6 +712,14 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
       type: [String, Number, Array],
       default: null
     },
+    /**
+     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
+     * The itemHeight function is used to calculate the height of rendered item given it's index.
+     */
+    virtualScroll: {
+      type: [Boolean, Object],
+      default: !1
+    },
     /**
      * Dropdown search options and events.
      * @see BentoDropdownSearchOptions
@@ -700,38 +732,38 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
   emits: ["input", s.SHOW_MORE],
   setup(e, { attrs: o, emit: n, slots: t }) {
     var re;
-    const { t: a } = le({ messages: me }), i = $(null), r = $(null), d = $(null), l = $(!1), c = K("bento-dropdown-options-container"), _ = K("dropdown-label"), g = K("dropdown-description"), y = K("dropdown-error"), { isReadOnly: m } = We(N(e, "readonly")), h = $(o["aria-label"]), { ariaLabel: C } = ve(e), v = xe({
+    const { t: a } = le({ messages: me }), i = S(null), r = S(null), d = S(null), l = S(!1), c = K("bento-dropdown-options-container"), $ = K("dropdown-label"), g = K("dropdown-description"), y = K("dropdown-error"), { isReadOnly: m } = xe(N(e, "readonly")), h = S(o["aria-label"]), { ariaLabel: C } = ve(e), v = We({
       ariaLabel: h.value,
       // TODO: take this line away when the aria-label props is removed
       label: C,
       defaultFallback: a("ariaLabelFallback")
-    }), F = f(() => ({
+    }), F = p(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), u = $(""), p = N(e, "items"), S = ut(u, p, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), H = f(() => e.dynamicFiltering && !!u.value), _e = mt({
-      items: p,
+    })), u = S(""), f = N(e, "items"), _ = ut(u, f, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), j = p(() => e.dynamicFiltering && !!u.value), $e = mt({
+      items: f,
       multiple: N(e, "multiple"),
       placeholder: N(e, "placeholder"),
       value: N(e, "value")
-    }), Se = f(() => e.size === T.DEFAULT), Le = f(
+    }), _e = p(() => e.size === T.DEFAULT), Oe = p(
       () => e != null && e.multiple ? e.items.filter(
         ({ value: w }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(w)
       ) : e.items.find(({ value: w }) => w === (e == null ? void 0 : e.value))
-    ), Oe = f(() => {
+    ), Le = p(() => {
       const w = e.items.findIndex(({ value: Ae }) => e.value === Ae);
       return w > 0 ? w : 0;
-    }), Ee = f(() => {
+    }), Ee = p(() => {
       var w;
       return e.multiple ? (w = e == null ? void 0 : e.value) == null ? void 0 : w.length : null;
-    }), Ce = f(
+    }), Ce = p(
       () => `${e.description ? g : ""} ${e.errorMessage ? y : ""}`.trim() || null
     ), De = () => {
       m.value || (l.value = !0);
-    }, V = () => {
+    }, H = () => {
       l.value = !1;
     }, ae = () => {
-      m.value || (l.value = !l.value, H.value && (u.value = ""));
+      m.value || (l.value = !l.value, j.value && (u.value = ""));
     }, Ie = () => {
-      H.value && (u.value = ""), l.value && (l.value = !1);
+      j.value && (u.value = ""), l.value && (l.value = !1);
     }, ie = (w) => {
       e.multiple || (u.value = "", l.value = !1), n("input", w);
     }, se = () => {
@@ -740,7 +772,7 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
       {
         inputContainerRef: i,
         optionsContainerRef: d,
-        selectedValueIndex: Oe,
+        selectedValueIndex: Le,
         isDropdownOpen: l,
         isDynamicFltering: N(e, "dynamicFiltering"),
         items: e.items,
@@ -748,15 +780,15 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
       },
       ae,
       De,
-      V
+      H
     ), Re = vt(
       {
         inputContainerRef: i,
         isDropdownOpen: l
       },
-      V
+      H
     ), Te = {
-      [s.CLOSE_DROPDOWN]: V,
+      [s.CLOSE_DROPDOWN]: H,
       [s.SELECT]: ie,
       [s.SHOW_MORE]: se,
       ...Re
@@ -771,19 +803,19 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
       // Values
       computedAriaLabel: v,
       additionalItemsSelected: Ee,
-      idDefaultSize: Se,
+      idDefaultSize: _e,
       isDropdownOpen: l,
-      displayValue: _e,
+      displayValue: $e,
       dropdownOptionsContainerId: c,
-      filteredItems: S,
-      isSearching: H,
+      filteredItems: _,
+      isSearching: j,
       isReadOnly: m,
       searchTerm: u,
-      labelId: _,
+      labelId: $,
       descriptionId: g,
       errorId: y,
       ariaDescribedBy: Ce,
-      selectedValueItem: Le,
+      selectedValueItem: Oe,
       // 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
@@ -807,7 +839,7 @@ const ct = ({ items: e, placeholder: o, selectedValue: n }) => {
 const gt = { class: "b-dropdown" }, ht = ["id"];
 function wt(e, o, n, t, a, i) {
   var g;
-  const r = R("bento-typography"), d = R("bento-dropdown-options-container"), l = R("error-message"), c = ue("bento-keyboard-navigation-directive"), _ = ue("bento-click-outside-directive");
+  const r = R("bento-typography"), d = R("bento-dropdown-options-container"), l = R("error-message"), c = ue("bento-keyboard-navigation-directive"), $ = ue("bento-click-outside-directive");
   return q((b(), E("div", gt, [
     e.label ? (b(), E("div", {
       key: 0,
@@ -818,8 +850,8 @@ function wt(e, o, n, t, a, i) {
         el: "span",
         stronger: ""
       }, {
-        default: L(() => [
-          x(P(e.label), 1)
+        default: O(() => [
+          W(P(e.label), 1)
         ]),
         _: 1
       }),
@@ -828,23 +860,23 @@ function wt(e, o, n, t, a, i) {
         class: "b-dropdown__label-requirement",
         el: "span"
       }, {
-        default: L(() => [
-          x(" (" + P(e.$t("optional")) + ") ", 1)
+        default: O(() => [
+          W(" (" + P(e.$t("optional")) + ") ", 1)
         ]),
         _: 1
-      })) : O("", !0),
+      })) : L("", !0),
       e.required ? (b(), I(r, {
         key: 1,
         class: "b-dropdown__label-requirement",
         el: "span"
       }, {
-        default: L(() => [
-          x(" (" + P(e.$t("required")) + ") ", 1)
+        default: O(() => [
+          W(" (" + P(e.$t("required")) + ") ", 1)
         ]),
         _: 1
-      })) : O("", !0)
-    ], 8, ht)) : O("", !0),
-    q((b(), E("div", A({ ref: "inputContainerRefWrapper" }, W(e.textboxKeyboardNavigationListeners, !0)), [
+      })) : L("", !0)
+    ], 8, ht)) : L("", !0),
+    q((b(), E("div", A({ ref: "inputContainerRefWrapper" }, x(e.textboxKeyboardNavigationListeners, !0)), [
       (b(), I(ye(e.size), {
         ref: "inputContainerRef",
         value: e.searchTerm,
@@ -870,7 +902,7 @@ function wt(e, o, n, t, a, i) {
       }, Z({ _: 2 }, [
         Y(e.slots, (y, m) => ({
           name: m,
-          fn: L((h) => [
+          fn: O((h) => [
             G(e.$slots, m, Q(X(h)), void 0, !0)
           ])
         }))
@@ -883,6 +915,7 @@ function wt(e, o, n, t, a, i) {
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
       "aria-label": e.computedAriaLabel,
+      "empty-state": e.emptyState,
       "debounce-time": (g = e.search) == null ? void 0 : g.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
@@ -895,40 +928,41 @@ function wt(e, o, n, t, a, i) {
       "target-element": e.inputContainerRefWrapper,
       loading: e.loading,
       "has-more-items": e.hasMoreItems,
-      "lazy-load-type": e.lazyLoadType
-    }, W(e.listboxListeners)), Z({ _: 2 }, [
+      "lazy-load-type": e.lazyLoadType,
+      "virtual-scroll": e.virtualScroll
+    }, x(e.listboxListeners)), Z({ _: 2 }, [
       Y(e.slots, (y, m) => ({
         name: m,
-        fn: L((h) => [
+        fn: O((h) => [
           G(e.$slots, m, Q(X(h)), void 0, !0)
         ])
       }))
-    ]), 1040, ["id", "aria-label", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type"])) : O("", !0),
+    ]), 1040, ["id", "aria-label", "empty-state", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : L("", !0),
     e.errorMessage ? (b(), I(l, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
-    }, null, 8, ["id", "error-message"])) : O("", !0),
+    }, null, 8, ["id", "error-message"])) : L("", !0),
     e.description ? (b(), I(r, {
       key: 3,
       id: e.descriptionId,
       class: we(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: "span"
     }, {
-      default: L(() => [
-        x(P(e.description), 1)
+      default: O(() => [
+        W(P(e.description), 1)
       ]),
       _: 1
-    }, 8, ["id", "class"])) : O("", !0)
+    }, 8, ["id", "class"])) : L("", !0)
   ])), [
-    [_, e.closeOpenedDropdown]
+    [$, e.closeOpenedDropdown]
   ]);
 }
-const Mt = /* @__PURE__ */ z(yt, [["render", wt], ["__scopeId", "data-v-79de8f04"]]);
+const Mt = /* @__PURE__ */ z(yt, [["render", wt], ["__scopeId", "data-v-e9e0b9c7"]]);
 export {
   Mt as B,
   T as a,
   ut as u
 };
-//# sourceMappingURL=dropdown.7a104ce3.js.map
+//# sourceMappingURL=dropdown.afff433b.js.map