@adyen/bento-vue3 1.9.0 → 1.11.0

package/dist/chunks/{dropdown.63de9aac.js → dropdown.96431c25.js}

@@ -1,81 +1,86 @@
-import { ref as L, watch as be, computed as u, defineComponent as oe, toRefs as ve, resolveComponent as E, openBlock as y, createBlock as A, resolveDynamicComponent as ye, mergeProps as B, withCtx as M, createElementVNode as x, withKeys as Te, createVNode as F, toHandlers as z, createSlots as V, renderList as J, renderSlot as Z, normalizeProps as Y, guardReactiveProps as G, createElementBlock as R, toDisplayString as ne, createCommentVNode as N, normalizeClass as Q, withDirectives as W, vShow as de, nextTick as _, toRef as I, resolveDirective as ue, createTextVNode as Ae } from "vue";
-import { B as Ne, d as Me } from "./index.75f3672e.js";
+import { ref as $, watch as ye, computed as f, defineComponent as le, toRefs as ge, resolveComponent as O, openBlock as g, createBlock as M, resolveDynamicComponent as he, mergeProps as I, withCtx as P, createElementVNode as j, withKeys as ke, createVNode as W, toHandlers as x, createSlots as Y, renderList as G, renderSlot as U, normalizeProps as Q, guardReactiveProps as X, createElementBlock as R, toDisplayString as ae, createCommentVNode as N, normalizeClass as ee, withDirectives as H, vShow as ce, nextTick as _, toRef as E, resolveDirective as fe, createTextVNode as Ke } from "vue";
+import { B as Fe, d as ze } from "./index.09f7f1b5.js";
+import { D as We, a as A, b as J, c as Ue } from "./dropdown-default-textbox.a731b5fb.js";
+import { _ as F } from "./_plugin-vue_export-helper.dad06003.js";
 import { g as K } from "./unique-id.a2a2b458.js";
-import { u as Pe } from "./aria-label.ac9651a5.js";
-import { u as le } from "./i18n.6c402773.js";
-import { u as Ke } from "./use-form-layout-loading.d03e5d48.js";
-import { B as C, a as ke } from "./keyboard-navigation.ca47dfa8.js";
-import { a as s, B as X, b as ee } from "./listbox.ac43f8ab.js";
-import { B as Fe } from "./directive.0408e565.js";
-import { a as H } from "./index.85832db5.js";
-import { a as ce } from "./index.98174339.js";
-import { _ as k } from "./_plugin-vue_export-helper.dad06003.js";
-import { D as ze, a as T, b as q, c as We } from "./dropdown-default-textbox.4108b289.js";
-import { E as xe, F as Ue } from "./field-label.3c19a29a.js";
+import { u as xe } from "./aria-label.ac9651a5.js";
+import { u as ie } from "./i18n.6c402773.js";
+import { u as He } from "./use-form-layout-loading.d03e5d48.js";
+import { B as D, a as je } from "./keyboard-navigation.ca47dfa8.js";
+import { a as r, B as te, b as oe, u as qe } from "./listbox.dd9883c5.js";
+import { B as we } from "./directive.0408e565.js";
+import { u as Ve } from "./use-has-slot.4d98bf29.js";
+import { a as Z } from "./index.a4a6e52f.js";
+import { a as pe } from "./index.03605cb0.js";
+import { E as Je, F as Ze } from "./field-label.b681234d.js";
 import "../assets/dropdown.css";
-var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(D || {});
-const te = {
+var B = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(B || {});
+const ne = {
   "en-US": {
     apply: "Apply",
     cancel: "Cancel",
     noOptionsMatchThisSearch: "No options match this search"
   }
-}, je = (e, o, n) => {
-  const t = L(e.value), { t: a } = le({ messages: te });
-  be(e, () => {
-    t.value = e.value;
+}, Ye = (e, o, i, t) => {
+  const n = $(e.value), { t: l } = ie({ messages: ne });
+  ye(e, () => {
+    n.value = e.value;
   });
-  const i = u(
-    () => JSON.stringify(t.value) === JSON.stringify(e.value)
-  ), d = () => {
-    n(s.SELECT, t.value), n(s.CLOSE_DROPDOWN);
-  }, r = () => {
-    t.value = e.value, n(s.CLOSE_DROPDOWN);
-  }, l = u(() => [
+  const d = f(
+    () => JSON.stringify(n.value) === JSON.stringify(e.value)
+  ), s = () => {
+    t(r.SELECT, n.value), t(r.CLOSE_DROPDOWN);
+  }, a = () => {
+    n.value = e.value, t(r.CLOSE_DROPDOWN);
+  }, p = () => {
+    i.value && o.value && (n.value = e.value);
+  }, L = f(() => [
     {
-      title: a("apply"),
-      event: d,
-      disabled: i.value
+      title: l("apply"),
+      event: s,
+      disabled: d.value
     },
     {
-      title: a("cancel"),
-      event: r
+      title: l("cancel"),
+      event: a
     }
-  ]), f = (m) => {
-    t.value = m, o.value || n(s.SELECT, m);
-  }, O = (m) => {
-    f(m), n(s.TAB);
-  }, g = (m) => {
-    f(m), n(s.ENTER);
-  }, h = (m) => {
-    f(m), n(s.SPACE);
-  }, b = () => {
-    r(), n(s.ESCAPE);
-  }, v = () => {
-    n(s.SHOW_MORE);
-  }, w = {
-    [s.SELECT]: f,
-    [s.SHOW_MORE]: v,
-    [s.TAB]: O,
-    [s.SPACE]: h,
-    [s.ENTER]: g
+  ]), m = (u) => {
+    n.value = u, o.value || t(r.SELECT, u);
+  }, w = (u) => {
+    m(u), t(r.TAB);
+  }, b = (u) => {
+    m(u), t(r.ENTER);
+  }, y = (u) => {
+    m(u), t(r.SPACE);
+  }, S = () => {
+    a(), t(r.ESCAPE);
+  }, C = () => {
+    t(r.SHOW_MORE);
+  }, T = {
+    [r.SELECT]: m,
+    [r.SHOW_MORE]: C,
+    [r.TAB]: w,
+    [r.SPACE]: y,
+    [r.ENTER]: b
   };
   return {
     // Values
-    actions: l,
-    internalSelectedValue: t,
+    actions: L,
+    internalSelectedValue: n,
     // Methods
-    listeners: w,
-    onEscapeKey: b
+    listeners: T,
+    onEscapeKey: S,
+    onOutsideDropdownClick: p
   };
-}, He = oe({
-  i18n: { messages: te },
+}, Ge = le({
+  i18n: { messages: ne },
   name: "bento-dropdown-options-container",
   components: {
-    BentoListbox: X,
-    PopperContainer: H,
-    BentoPopover: ce
+    BentoListbox: te,
+    PopperContainer: Z,
+    BentoPopover: pe
   },
+  directives: { BentoClickOutsideDirective: we },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -118,8 +123,8 @@ const te = {
      */
     inputSize: {
       type: String,
-      default: D.DEFAULT,
-      validator: (e) => Object.values(D).includes(e)
+      default: B.DEFAULT,
+      validator: (e) => Object.values(B).includes(e)
     },
     /**
      * The option elements to populate the dropdown with.
@@ -142,13 +147,17 @@ const te = {
      */
     lazyLoadType: {
       type: String,
-      default: ee.AUTOMATIC,
-      validator: (e) => Object.values(ee).includes(e)
+      default: oe.AUTOMATIC,
+      validator: (e) => Object.values(oe).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
      */
     multiple: { type: Boolean, default: !1 },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
     /**
      * Indicates if the dropdown is open so that
      * the container can be displayed.
@@ -169,12 +178,12 @@ const te = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: X.props.searching,
+    searching: te.props.searching,
     /**
      * Reference to the DOM element or Vue component for positioning
      * the Dropdown container.
      */
-    targetElement: { type: H.props.targetElement.type, required: !0 },
+    targetElement: { type: Z.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.
@@ -185,35 +194,31 @@ const te = {
     }
   },
   emits: [
-    s.CLOSE_DROPDOWN,
-    s.SHOW_MORE,
-    s.SELECT,
-    s.ENTER,
-    s.ESCAPE,
-    s.SPACE,
-    s.TAB
+    r.CLOSE_DROPDOWN,
+    r.SHOW_MORE,
+    r.SELECT,
+    r.ENTER,
+    r.ESCAPE,
+    r.SPACE,
+    r.TAB
   ],
-  setup(e, { emit: o, slots: n }) {
-    const { selectedValue: t, multiple: a } = ve(e), i = L(null), { t: d } = le({ messages: te }), r = u(() => e.open && !e.disabled), l = u(() => d("noOptionsMatchThisSearch")), f = u(() => ({
+  setup(e, { emit: o, slots: i }) {
+    const { selectedValue: t, multiple: n } = ge(e), l = $(null), { t: d } = ie({ messages: ne }), s = f(() => e.open && !e.disabled), a = f(() => d("noOptionsMatchThisSearch")), p = f(() => ({
       "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), O = u(() => ({
-      "b-dropdown-options-container__listbox--small": e.inputSize === D.SMALL,
+    })), L = f(() => ({
+      "b-dropdown-options-container__listbox--small": e.inputSize === B.SMALL,
       "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: g, internalSelectedValue: h, listeners: b, onEscapeKey: v } = je(
-      t,
-      a,
-      o
-    ), w = u(
-      () => e != null && e.multiple ? ce : H
-    ), m = u(() => {
-      var p;
-      const P = {
-        "min-width": `${(p = e == null ? void 0 : e.targetElement) == null ? void 0 : p.clientWidth}px`,
+    })), { actions: m, internalSelectedValue: w, listeners: b, onEscapeKey: y, onOutsideDropdownClick: S } = Ye(t, n, s, o), C = f(
+      () => e != null && e.multiple ? pe : Z
+    ), T = f(() => {
+      var c;
+      const u = {
+        "min-width": `${(c = e == null ? void 0 : e.targetElement) == null ? void 0 : c.clientWidth}px`,
         "max-width": "min(500px, 95%)"
       };
       return e != null && e.multiple ? {
         actionsLayout: "space-between",
-        actions: g.value,
+        actions: m.value,
         divider: !0,
         fallbackPosition: ["top-start"],
         id: K(`dropdown-options-${e.id}`),
@@ -221,7 +226,7 @@ const te = {
         position: "bottom-start",
         style: {
           width: "auto",
-          ...P
+          ...u
         },
         targetElement: e.targetElement
       } : {
@@ -229,42 +234,43 @@ const te = {
         offset: [0, 8],
         position: "bottom-start",
         style: {
-          display: r.value ? "block" : "none",
-          ...P
+          display: s.value ? "block" : "none",
+          ...u
         },
         targetElement: e.targetElement
       };
     });
     return {
       // Values
-      isDropdownOpen: r,
-      conditionalClasses: f,
-      conditionalListboxClasses: O,
-      noResultsMessage: l,
-      slots: n,
-      actions: g,
-      internalSelectedValue: h,
+      isDropdownOpen: s,
+      conditionalClasses: p,
+      conditionalListboxClasses: L,
+      noResultsMessage: a,
+      slots: i,
+      actions: m,
+      internalSelectedValue: w,
       // Component wrapper
-      popperContainerOrPopoverComponent: w,
-      popperContainerOrPopoverProps: m,
+      popperContainerOrPopoverComponent: C,
+      popperContainerOrPopoverProps: T,
       // Refs
-      dropdownOptionsListboxRef: i,
+      dropdownOptionsListboxRef: l,
       // Events
-      onEscapeKey: v,
+      onEscapeKey: y,
+      onOutsideDropdownClick: S,
       listeners: b
     };
   }
 });
-function qe(e, o, n, t, a, i) {
-  const d = E("bento-listbox");
-  return y(), A(ye(e.popperContainerOrPopoverComponent), B({
+function Qe(e, o, i, t, n, l) {
+  const d = O("bento-listbox");
+  return g(), M(he(e.popperContainerOrPopoverComponent), I({
     class: ["b-dropdown-options-container", e.conditionalClasses]
   }, e.popperContainerOrPopoverProps), {
-    default: M(() => [
-      x("div", {
-        onKeydown: o[0] || (o[0] = Te((...r) => e.onEscapeKey && e.onEscapeKey(...r), ["esc"]))
+    default: P(() => [
+      j("div", {
+        onKeydown: o[0] || (o[0] = ke((...s) => e.onEscapeKey && e.onEscapeKey(...s), ["esc"]))
       }, [
-        F(d, B({
+        W(d, I({
           id: e.id,
           ref: "dropdownOptionsListboxRef",
           "aria-label": e.ariaLabel,
@@ -274,78 +280,79 @@ function qe(e, o, n, t, a, i) {
           items: e.items,
           "selected-value": e.internalSelectedValue,
           multiple: e.multiple,
+          "static-categories": e.staticCategories,
           "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
-        }, z(e.listeners)), V({ _: 2 }, [
-          J(e.slots, (r, l) => ({
-            name: l,
-            fn: M((f) => [
-              Z(e.$slots, l, Y(G(f)), void 0, !0)
+        }, x(e.listeners)), Y({ _: 2 }, [
+          G(e.slots, (s, a) => ({
+            name: a,
+            fn: P((p) => [
+              U(e.$slots, a, Q(X(p)), void 0, !0)
             ])
           }))
-        ]), 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"])
+        ]), 1040, ["id", "aria-label", "class", "empty-state", "is-option-disabled", "items", "selected-value", "multiple", "static-categories", "no-results-message", "searching", "loading", "lazy-load-type", "has-more-items", "virtual-scroll"])
       ], 32)
     ]),
     _: 3
   }, 16, ["class"]);
 }
-const Ve = /* @__PURE__ */ k(He, [["render", qe], ["__scopeId", "data-v-470172b0"]]);
-let fe = 0;
-const Je = {
+const Xe = /* @__PURE__ */ F(Ge, [["render", Qe], ["__scopeId", "data-v-f073599e"]]);
+let me = 0;
+const et = {
   beforeCreate() {
-    this.uuid = fe.toString(), fe += 1;
+    this.uuid = me.toString(), me += 1;
   }
-}, Ze = { key: 0 }, Ye = /* @__PURE__ */ x("path", {
+}, tt = { key: 0 }, ot = /* @__PURE__ */ j("path", {
   fill: "#00112C",
   d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z"
 }, null, -1);
-function Ge(e, o, n, t, a, i) {
-  return y(), R("svg", B({ role: "img" }, e.$attrs, {
+function nt(e, o, i, t, n, l) {
+  return g(), R("svg", I({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (y(), R("title", Ze, ne(e.$attrs["svg-title"]), 1)) : N("", !0),
-    Ye
+    e.$attrs["svg-title"] ? (g(), R("title", tt, ae(e.$attrs["svg-title"]), 1)) : N("", !0),
+    ot
   ], 16);
 }
-const Qe = /* @__PURE__ */ k(Je, [["render", Ge]]);
-let pe = 0;
-const Xe = {
+const lt = /* @__PURE__ */ F(et, [["render", nt]]);
+let ve = 0;
+const at = {
   beforeCreate() {
-    this.uuid = pe.toString(), pe += 1;
+    this.uuid = ve.toString(), ve += 1;
   }
-}, et = { key: 0 }, tt = /* @__PURE__ */ x("path", {
+}, it = { key: 0 }, st = /* @__PURE__ */ j("path", {
   fill: "#00112C",
   d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z"
 }, null, -1);
-function ot(e, o, n, t, a, i) {
-  return y(), R("svg", B({ role: "img" }, e.$attrs, {
+function rt(e, o, i, t, n, l) {
+  return g(), R("svg", I({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (y(), R("title", et, ne(e.$attrs["svg-title"]), 1)) : N("", !0),
-    tt
+    e.$attrs["svg-title"] ? (g(), R("title", it, ae(e.$attrs["svg-title"]), 1)) : N("", !0),
+    st
   ], 16);
 }
-const nt = /* @__PURE__ */ k(Xe, [["render", ot]]), lt = oe({
+const dt = /* @__PURE__ */ F(at, [["render", rt]]), ut = le({
   name: "dropdown-small-textbox",
-  components: { ChevronDownSmallIcon: Qe, ChevronUpSmallIcon: nt, DropdownBaseTextbox: ze },
+  components: { ChevronDownSmallIcon: lt, ChevronUpSmallIcon: dt, DropdownBaseTextbox: We },
   inheritAttrs: !1,
   props: {
     /**
      * The number of additional items that have been selected in the dropdown.
      */
-    additionalItemsSelected: { type: Number, default: 0 },
+    additionalItemsSelected: { type: [Number, String], default: 0 },
     /**
      * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.
      */
@@ -411,43 +418,43 @@ const nt = /* @__PURE__ */ k(Xe, [["render", ot]]), lt = oe({
      */
     value: { type: String, default: "" }
   },
-  emits: [T.OPEN, T.CLOSE],
+  emits: [A.OPEN, A.CLOSE],
   setup(e, { emit: o }) {
-    const n = u(() => ({
-      [`b-dropdown-small-textbox--${q.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${q.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${q.OPENED}`]: e.open
-    })), t = u(() => e.open && !e.disabled && !e.readonly), a = () => {
-      o(T.OPEN);
-    }, i = () => {
-      o(T.CLOSE);
+    const i = 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), n = () => {
+      o(A.OPEN);
+    }, l = () => {
+      o(A.CLOSE);
     }, d = {
-      [T.OPEN]: a,
-      [T.CLOSE]: i
+      [A.OPEN]: n,
+      [A.CLOSE]: l
     };
     return {
       // Values
-      conditionalClasses: n,
+      conditionalClasses: i,
       isDropdownOpen: t,
       // Events
       listeners: d
     };
   }
 });
-const at = { class: "b-dropdown-small-textbox__chevron" };
-function it(e, o, n, t, a, i) {
-  const d = E("chevron-up-small-icon"), r = E("chevron-down-small-icon"), l = E("dropdown-base-textbox");
-  return y(), R("div", {
-    class: Q(["b-dropdown-small-textbox", e.conditionalClasses])
+const ct = { class: "b-dropdown-small-textbox__chevron" };
+function ft(e, o, i, t, n, l) {
+  const d = O("chevron-up-small-icon"), s = O("chevron-down-small-icon"), a = O("dropdown-base-textbox");
+  return g(), R("div", {
+    class: ee(["b-dropdown-small-textbox", e.conditionalClasses])
   }, [
-    F(l, B({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, z(e.listeners)), {
-      icon: M(() => [
-        x("div", at, [
-          W(F(d, { "svg-title": "opened" }, null, 512), [
-            [de, e.isDropdownOpen]
+    W(a, I({ ...e.$attrs, ...e.$props }, { class: "b-dropdown-small-textbox__textbox" }, x(e.listeners)), {
+      icon: P(() => [
+        j("div", ct, [
+          H(W(d, { "svg-title": "opened" }, null, 512), [
+            [ce, e.isDropdownOpen]
           ]),
-          W(F(r, { "svg-title": "closed" }, null, 512), [
-            [de, !e.isDropdownOpen]
+          H(W(s, { "svg-title": "closed" }, null, 512), [
+            [ce, !e.isDropdownOpen]
           ])
         ])
       ]),
@@ -455,131 +462,142 @@ function it(e, o, n, t, a, i) {
     }, 16)
   ], 2);
 }
-const st = /* @__PURE__ */ k(lt, [["render", it], ["__scopeId", "data-v-55bc3614"]]), rt = ({ 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;
-}, dt = ({ selectedValues: e, items: o, placeholder: n }) => {
+const pt = /* @__PURE__ */ F(ut, [["render", ft], ["__scopeId", "data-v-36f61648"]]), mt = ({ items: e, placeholder: o, selectedValue: i, staticCategories: t }) => {
+  let n;
+  if (t) {
+    const l = e.value.find((d) => d.items.some((s) => s.value === i.value));
+    n = l == null ? void 0 : l.items.find((d) => d.value === i.value);
+  } else
+    n = e.value.find(({ value: l }) => l === i.value);
+  return (n == null ? void 0 : n.label) || o.value || null;
+}, vt = ({ selectedValues: e, items: o, placeholder: i }) => {
   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: d }) => d === a);
-    return i;
+  return !e.value || ((t = e.value) == null ? void 0 : t.length) === 0 ? i.value || null : e.value.map((n) => {
+    const { label: l } = o.value.find(({ value: d }) => d === n);
+    return l;
   }).join(", ");
-}, ut = ({ selectedValues: e, items: o, placeholder: n }) => {
+}, bt = ({ selectedValues: e, items: o, placeholder: i }) => {
   var t;
-  return !e.value || !((t = e.value) != null && t.length) ? n.value || null : o.value.reduce((a, i) => {
-    if (i.items) {
-      const d = i.items.filter(
-        (l) => e.value.includes(l.value)
+  return !e.value || !((t = e.value) != null && t.length) ? i.value || null : o.value.reduce((n, l) => {
+    if (l.items) {
+      const d = l.items.filter(
+        (a) => e.value.includes(a.value)
       );
-      d.length === i.items.length ? a.push(i.label) : d.forEach(({ label: l }) => a.push(l));
+      d.length === l.items.length ? n.push(l.label) : d.forEach(({ label: a }) => n.push(a));
     }
-    return e.value.includes(i.value) && a.push(i.label), a;
+    return e.value.includes(l.value) && n.push(l.label), n;
   }, []).join(", ");
-}, ct = ({ items: e, placeholder: o, value: n, multiple: t }) => {
-  const a = u(() => e.value.find((d) => {
-    var r;
-    return (r = d.items) == null ? void 0 : r.length;
+}, yt = ({ items: e, placeholder: o, value: i, multiple: t, staticCategories: n }) => {
+  const l = f(() => e.value.find((s) => {
+    var a;
+    return (a = s.items) == null ? void 0 : a.length;
   }));
-  return u(() => t.value ? a.value ? ut({ selectedValues: n, placeholder: o, items: e }) : dt({ selectedValues: n, items: e, placeholder: o }) : rt({ items: e, placeholder: o, selectedValue: n }));
-}, ge = (e) => {
+  return f(() => t.value ? l.value ? bt({ selectedValues: i, placeholder: o, items: e }) : vt({ selectedValues: i, items: e, placeholder: o }) : mt({
+    items: e,
+    placeholder: o,
+    selectedValue: i,
+    staticCategories: n.value
+  }));
+}, Se = (e) => {
   var o;
   (o = e.value.$children) == null || o[0].$refs.textbox.focus();
-}, ft = ({
+}, gt = ({
   inputContainerRef: e,
   optionsContainerRef: o,
-  selectedValueIndex: n,
+  selectedValueIndex: i,
   isDropdownOpen: t,
-  isDynamicFltering: a,
-  items: i,
+  isDynamicFltering: n,
+  items: l,
   isMultiple: d
-}, r, l, f) => {
-  const O = ({ detail: p }) => {
-    p.preventDefault(), t.value || (l(), _(() => {
-      var c, $;
-      d ? (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : ($ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || $[n.value].$el.focus();
+}, s, a, p) => {
+  const L = ({ detail: u }) => {
+    u.preventDefault(), t.value || (a(), _(() => {
+      var c, h;
+      d ? (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (h = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || h[i.value].$el.focus();
     }));
-  }, g = ({ detail: p }) => {
-    p.preventDefault(), t.value || (l(), _(() => {
+  }, m = ({ detail: u }) => {
+    u.preventDefault(), t.value || (a(), _(() => {
       var c;
       (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus();
     }));
-  }, h = () => {
-    t.value || (l(), _(() => {
-      var p, c;
+  }, w = () => {
+    t.value || (a(), _(() => {
+      var u, c;
       if (d) {
-        const $ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
-        (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[$.length - 1].$children[i.length - 1].$el.focus();
+        const h = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;
+        (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[h.length - 1].$children[l.length - 1].$el.focus();
       } else
-        (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[i.length - 1].$el.focus();
+        (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[l.length - 1].$el.focus();
     }));
   }, b = () => {
-    t.value && (f(), ge(e));
-  }, v = () => {
-    t.value || l(), _(() => {
-      var p;
-      (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus();
+    t.value && (p(), Se(e));
+  }, y = () => {
+    t.value || a(), _(() => {
+      var u;
+      (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus();
     });
-  }, w = ({ detail: p }) => {
-    p.preventDefault(), r(), t.value && _(() => {
-      var c, $;
-      d ? (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : ($ = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || $[n.value].$el.focus();
+  }, S = ({ detail: u }) => {
+    u.preventDefault(), s(), t.value && _(() => {
+      var c, h;
+      d ? (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[0].$el.focus() : (h = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || h[i.value].$el.focus();
     });
-  }, m = () => {
-    r(), t.value && _(() => {
-      var p, c;
-      d ? (p = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || p[0].$el.focus() : (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[n.value].$el.focus();
+  }, C = () => {
+    s(), t.value && _(() => {
+      var u, c;
+      d ? (u = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || u[0].$el.focus() : (c = o.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children) == null || c[i.value].$el.focus();
     });
   };
-  return u(() => ({
-    ...a.value ? {} : { [C.SPACE]: w },
-    [C.ENTER]: m,
-    [C.ARROW_DOWN]: O,
-    [C.ARROW_UP]: g,
-    [C.END]: h,
-    [C.ESCAPE]: b,
-    [C.HOME]: v
+  return f(() => ({
+    ...n.value ? {} : { [D.SPACE]: S },
+    [D.ENTER]: C,
+    [D.ARROW_DOWN]: L,
+    [D.ARROW_UP]: m,
+    [D.END]: w,
+    [D.ESCAPE]: b,
+    [D.HOME]: y
   }));
-}, pt = ({ inputContainerRef: e, isDropdownOpen: o }, n) => {
+}, ht = ({ inputContainerRef: e, isDropdownOpen: o }, i) => {
   const t = () => {
-    o.value && n(), _(() => {
-      ge(e);
+    o.value && i(), _(() => {
+      Se(e);
     });
   };
   return {
-    [s.ENTER]: t,
-    [s.ESCAPE]: t,
-    [s.TAB]: t,
-    [s.SPACE]: t
+    [r.ENTER]: t,
+    [r.ESCAPE]: t,
+    [r.TAB]: t,
+    [r.SPACE]: t
   };
 };
-function mt(e, o, n) {
-  const t = L(e), a = L(o), i = (r, l = []) => l.flatMap((f) => f.label.toLocaleLowerCase().includes(r) ? [f, ...i(r, f.items)] : f.items ? [...i(r, f.items)] : []);
-  return be(t, () => {
-    n !== void 0 && n(t.value);
-  }), u(() => {
-    if (!t.value || n !== void 0)
-      return a.value;
-    const r = t.value.toLocaleLowerCase();
-    return i(r, a.value);
+function wt(e, o, i) {
+  const t = $(e), n = $(o), l = (s, a = []) => a.flatMap((p) => p.label.toLocaleLowerCase().includes(s) ? [p, ...l(s, p.items)] : p.items ? [...l(s, p.items)] : []);
+  return ye(t, () => {
+    i !== void 0 && i(t.value);
+  }), f(() => {
+    if (!t.value || i !== void 0)
+      return n.value;
+    const s = t.value.toLocaleLowerCase();
+    return l(s, n.value);
   });
 }
-const me = {
+const be = {
   "en-US": {
+    all: "All",
     clearSearch: "Clear filter",
     ariaLabelFallback: "Dropdown"
   }
-}, bt = oe({
-  i18n: { messages: me },
+}, St = le({
+  i18n: { messages: be },
   name: "b-dropdown",
   components: {
-    BentoDropdownOptionsContainer: Ve,
-    BentoTypography: Ne,
-    DropdownInputDefault: We,
-    DropdownInputSmall: st,
-    ErrorMessage: xe,
-    FieldLabel: Ue
+    BentoDropdownOptionsContainer: Xe,
+    BentoTypography: Fe,
+    DropdownInputDefault: Ue,
+    DropdownInputSmall: pt,
+    ErrorMessage: Je,
+    FieldLabel: Ze
   },
-  directives: { BentoClickOutsideDirective: Fe, BentoKeyboardNavigationDirective: ke },
+  directives: { BentoClickOutsideDirective: we, BentoKeyboardNavigationDirective: je },
   props: {
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -673,8 +691,8 @@ const me = {
      */
     lazyLoadType: {
       type: String,
-      default: X.props.lazyLoadType.default,
-      validator: (e) => Object.values(ee).includes(e)
+      default: te.props.lazyLoadType.default,
+      validator: (e) => Object.values(oe).includes(e)
     },
     /*
      * If enabled, the user will be able to select multiple items.
@@ -702,13 +720,17 @@ const me = {
      */
     size: {
       type: String,
-      default: D.DEFAULT,
-      validator: (e) => Object.values(D).includes(e)
+      default: B.DEFAULT,
+      validator: (e) => Object.values(B).includes(e)
     },
     /**
      * Adds a info icon next to the label to display the passed tooltip message.
      */
     tooltipText: { type: String, default: null },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
     /**
      * The `input` value.
      * Providing an empty string will select no options.
@@ -735,73 +757,86 @@ const me = {
       default: void 0
     }
   },
-  emits: ["input", s.SHOW_MORE],
-  setup(e, { attrs: o, emit: n, slots: t }) {
-    var re;
-    const { t: a } = le({ messages: me }), i = L(null), d = L(null), r = L(null), l = L(!1), f = K("bento-dropdown-options-container"), O = K("dropdown-label"), g = K("dropdown-description"), h = K("dropdown-error"), { isReadOnly: b } = Ke(I(e, "readonly")), v = L(o["aria-label"]), { ariaLabel: w } = ve(e), m = Pe({
-      ariaLabel: v.value,
+  emits: ["input", r.SHOW_MORE],
+  setup(e, { attrs: o, emit: i, slots: t }) {
+    var ue;
+    const { t: n } = ie({ messages: be }), l = $(null), d = $(null), s = $(null), a = $(!1), p = K("bento-dropdown-options-container"), L = K("dropdown-label"), m = K("dropdown-description"), w = K("dropdown-error"), { isReadOnly: b } = He(E(e, "readonly")), y = $(o["aria-label"]), { ariaLabel: S } = ge(e), C = xe({
+      ariaLabel: y.value,
       // TODO: take this line away when the aria-label props is removed
-      label: w,
-      defaultFallback: a("ariaLabelFallback")
-    }), P = u(() => ({
+      label: S,
+      defaultFallback: n("ariaLabelFallback")
+    }), T = f(() => ({
       "b-dropdown--condensed": e.condensed
-    })), p = u(() => ({
+    })), u = f(() => ({
       "b-dropdown__description--error": !!e.errorMessage
-    })), c = L(""), $ = I(e, "items"), he = mt(c, $, (re = e == null ? void 0 : e.search) == null ? void 0 : re.searchEvent), U = u(() => e.dynamicFiltering && !!c.value), we = ct({
-      items: $,
-      multiple: I(e, "multiple"),
-      placeholder: I(e, "placeholder"),
-      value: I(e, "value")
-    }), Se = u(() => e.size === D.DEFAULT), $e = u(
-      () => e != null && e.multiple ? e.items.filter(
-        ({ value: S }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(S)
-      ) : e.items.find(({ value: S }) => S === (e == null ? void 0 : e.value))
-    ), Le = u(() => {
-      const S = e.items.findIndex(({ value: Ie }) => e.value === Ie);
-      return S > 0 ? S : 0;
-    }), Oe = u(() => {
-      var S;
-      return e.multiple ? (S = e == null ? void 0 : e.value) == null ? void 0 : S.length : null;
-    }), Ee = u(
-      () => `${e.description ? g : ""} ${e.errorMessage ? h : ""}`.trim() || null
-    ), Ce = () => {
-      b.value || (l.value = !0);
-    }, j = () => {
-      l.value = !1;
-    }, ae = () => {
-      b.value || (l.value = !l.value, U.value && (c.value = ""));
-    }, _e = () => {
-      U.value && (c.value = ""), l.value && (l.value = !1);
-    }, ie = (S) => {
-      e.multiple || (c.value = "", l.value = !1), n("input", S);
+    })), c = $(""), h = E(e, "items"), $e = wt(c, h, (ue = e == null ? void 0 : e.search) == null ? void 0 : ue.searchEvent), q = f(() => e.dynamicFiltering && !!c.value), Le = yt({
+      items: h,
+      staticCategories: E(e, "staticCategories"),
+      multiple: E(e, "multiple"),
+      placeholder: E(e, "placeholder"),
+      value: E(e, "value")
+    }), Oe = f(() => e.size === B.DEFAULT), Ce = f(() => {
+      if (e != null && e.multiple)
+        return e.items.filter(
+          ({ value: v }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(v)
+        );
+      if (!e.multiple && e.staticCategories) {
+        const v = e.items.find(
+          (z) => z.items.some((Pe) => Pe.value === e.value)
+        );
+        return v ? v.items.find((z) => z.value === e.value) : null;
+      }
+      return e.items.find(({ value: v }) => v === (e == null ? void 0 : e.value));
+    }), Ee = f(() => {
+      const v = e.items.findIndex(({ value: k }) => e.value === k);
+      return v > 0 ? v : 0;
+    }), { isMultiLevelSelect: De, flattenedItemsList: _e } = qe(h), Be = f(() => {
+      var v;
+      if (e.multiple) {
+        const k = (v = e == null ? void 0 : e.value) == null ? void 0 : v.length;
+        return (De.value ? _e.value.length : h.value.length) === k ? n("all") : k;
+      }
+      return null;
+    }), Ie = f(
+      () => `${e.description ? m : ""} ${e.errorMessage ? w : ""}`.trim() || null
+    ), Re = () => {
+      b.value || (a.value = !0);
+    }, V = () => {
+      a.value = !1;
     }, se = () => {
-      n(s.SHOW_MORE);
-    }, De = ft(
+      b.value || (a.value = !a.value, q.value && (c.value = ""));
+    }, Te = () => {
+      q.value && (c.value = ""), a.value && (a.value = !1, s.value.onOutsideDropdownClick());
+    }, re = (v) => {
+      e.multiple || (c.value = "", a.value = !1), i("input", v);
+    }, de = () => {
+      i(r.SHOW_MORE);
+    }, Ae = gt(
       {
-        inputContainerRef: i,
-        optionsContainerRef: r,
-        selectedValueIndex: Le,
-        isDropdownOpen: l,
-        isDynamicFltering: I(e, "dynamicFiltering"),
+        inputContainerRef: l,
+        optionsContainerRef: s,
+        selectedValueIndex: Ee,
+        isDropdownOpen: a,
+        isDynamicFltering: E(e, "dynamicFiltering"),
         items: e.items,
         isMultiple: e.multiple
       },
-      ae,
-      Ce,
-      j
-    ), Be = pt(
+      se,
+      Re,
+      V
+    ), Me = ht(
       {
-        inputContainerRef: i,
-        isDropdownOpen: l
+        inputContainerRef: l,
+        isDropdownOpen: a
       },
-      j
-    ), Re = {
-      [s.CLOSE_DROPDOWN]: j,
-      [s.SELECT]: ie,
-      [s.SHOW_MORE]: se,
-      ...Be
+      V
+    ), Ne = {
+      [r.CLOSE_DROPDOWN]: V,
+      [r.SELECT]: re,
+      [r.SHOW_MORE]: de,
+      ...Me
     };
-    return e.error && Me(
+    return e.error && ze(
       '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.
@@ -809,49 +844,51 @@ const me = {
       "2.0.0"
     ), {
       // Values
-      conditionalClasses: P,
-      computedAriaLabel: m,
-      additionalItemsSelected: Oe,
-      idDefaultSize: Se,
-      isDropdownOpen: l,
-      displayValue: we,
-      dropdownOptionsContainerId: f,
-      filteredItems: he,
-      isSearching: U,
+      conditionalClasses: T,
+      computedAriaLabel: C,
+      additionalItemsSelected: Be,
+      idDefaultSize: Oe,
+      isDropdownOpen: a,
+      displayValue: Le,
+      dropdownOptionsContainerId: p,
+      filteredItems: $e,
+      isSearching: q,
       isReadOnly: b,
       searchTerm: c,
-      labelId: O,
-      descriptionId: g,
-      errorId: h,
-      ariaDescribedBy: Ee,
-      selectedValueItem: $e,
+      labelId: L,
+      descriptionId: m,
+      errorId: w,
+      ariaDescribedBy: Ie,
+      selectedValueItem: Ce,
       // 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: t,
-      descriptionConditionalClasses: p,
+      descriptionConditionalClasses: u,
+      // Methods
+      hasSlot: Ve(t),
       // Refs
-      inputContainerRef: i,
+      inputContainerRef: l,
       inputContainerRefWrapper: d,
-      optionsContainerRef: r,
+      optionsContainerRef: s,
       // Events
-      closeOpenedDropdown: _e,
-      toggleDropdown: ae,
-      onOptionSelected: ie,
-      emitShowMoreEvent: se,
-      textboxKeyboardNavigationListeners: De,
-      listboxListeners: Re
+      clickOutsideDropdown: Te,
+      toggleDropdown: se,
+      onOptionSelected: re,
+      emitShowMoreEvent: de,
+      textboxKeyboardNavigationListeners: Ae,
+      listboxListeners: Ne
     };
   }
 });
-function vt(e, o, n, t, a, i) {
-  var h;
-  const d = E("field-label"), r = E("bento-dropdown-options-container"), l = E("error-message"), f = E("bento-typography"), O = ue("bento-keyboard-navigation-directive"), g = ue("bento-click-outside-directive");
-  return W((y(), R("div", {
-    class: Q(["b-dropdown", e.conditionalClasses])
+function $t(e, o, i, t, n, l) {
+  var w;
+  const d = O("field-label"), s = O("bento-dropdown-options-container"), a = O("error-message"), p = O("bento-typography"), L = fe("bento-keyboard-navigation-directive"), m = fe("bento-click-outside-directive");
+  return H((g(), R("div", {
+    class: ee(["b-dropdown", e.conditionalClasses])
   }, [
-    e.label ? (y(), A(d, {
+    e.label ? (g(), M(d, {
       key: 0,
       id: e.labelId,
       condensed: e.condensed,
@@ -860,8 +897,8 @@ function vt(e, o, n, t, a, i) {
       optional: e.optional,
       required: e.required
     }, null, 8, ["id", "condensed", "label", "tooltip-text", "optional", "required"])) : N("", !0),
-    W((y(), R("div", B({ ref: "inputContainerRefWrapper" }, z(e.textboxKeyboardNavigationListeners, !0)), [
-      (y(), A(ye(e.size), {
+    H((g(), R("div", I({ ref: "inputContainerRefWrapper" }, x(e.textboxKeyboardNavigationListeners, !0)), [
+      (g(), M(he(e.size), {
         ref: "inputContainerRef",
         condensed: e.condensed,
         value: e.searchTerm,
@@ -884,29 +921,30 @@ function vt(e, o, n, t, a, i) {
         onInput: o[0] || (o[0] = (b) => e.searchTerm = b),
         onOpen: e.toggleDropdown,
         onClose: e.toggleDropdown
-      }, V({ _: 2 }, [
-        J(e.slots, (b, v) => ({
-          name: v,
-          fn: M((w) => [
-            Z(e.$slots, v, Y(G(w)), void 0, !0)
+      }, Y({ _: 2 }, [
+        G(e.slots, (b, y) => ({
+          name: y,
+          fn: P((S) => [
+            U(e.$slots, y, Q(X(S)), void 0, !0)
           ])
         }))
       ]), 1064, ["condensed", "value", "additional-items-selected", "ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-readonly", "readonly", "disabled", "display-value", "dynamic-filtering", "is-invalid", "multiple", "open", "selected-value-item", "show-slot-content-in-multiple", "onOpen", "onClose"]))
     ], 16)), [
-      [O]
+      [L]
     ]),
-    e.inputContainerRef ? (y(), A(r, B({
+    e.inputContainerRef ? (g(), M(s, I({
       key: 1,
       id: e.dropdownOptionsContainerId,
       ref: "optionsContainerRef",
       "aria-label": e.computedAriaLabel,
       "empty-state": e.emptyState,
-      "debounce-time": (h = e.search) == null ? void 0 : h.debounceTime,
+      "debounce-time": (w = e.search) == null ? void 0 : w.debounceTime,
       disabled: e.disabled,
       "input-size": e.size,
       "is-option-disabled": e.isOptionDisabled,
       items: e.filteredItems,
       multiple: e.multiple,
+      "static-categories": e.staticCategories,
       open: e.isDropdownOpen,
       "selected-value": e.value,
       searching: e.isSearching,
@@ -915,39 +953,41 @@ function vt(e, o, n, t, a, i) {
       "has-more-items": e.hasMoreItems,
       "lazy-load-type": e.lazyLoadType,
       "virtual-scroll": e.virtualScroll
-    }, z(e.listboxListeners)), V({ _: 2 }, [
-      J(e.slots, (b, v) => ({
-        name: v,
-        fn: M((w) => [
-          Z(e.$slots, v, Y(G(w)), void 0, !0)
+    }, x(e.listboxListeners)), Y({ _: 2 }, [
+      G(e.slots, (b, y) => ({
+        name: y,
+        fn: P((S) => [
+          U(e.$slots, y, Q(X(S)), void 0, !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"])) : N("", !0),
-    e.errorMessage ? (y(), A(l, {
+    ]), 1040, ["id", "aria-label", "empty-state", "debounce-time", "disabled", "input-size", "is-option-disabled", "items", "multiple", "static-categories", "open", "selected-value", "searching", "target-element", "loading", "has-more-items", "lazy-load-type", "virtual-scroll"])) : N("", !0),
+    e.errorMessage ? (g(), M(a, {
       key: 2,
       id: e.errorId,
       "error-message": e.errorMessage,
       class: "b-dropdown__error-message"
     }, null, 8, ["id", "error-message"])) : N("", !0),
-    e.description ? (y(), A(f, {
+    e.description || e.hasSlot("description") ? (g(), M(p, {
       key: 3,
       id: e.descriptionId,
-      class: Q(["b-dropdown__description", e.descriptionConditionalClasses]),
+      class: ee(["b-dropdown__description", e.descriptionConditionalClasses]),
       el: "span"
     }, {
-      default: M(() => [
-        Ae(ne(e.description), 1)
+      default: P(() => [
+        U(e.$slots, "description", {}, () => [
+          Ke(ae(e.description), 1)
+        ], !0)
       ]),
-      _: 1
+      _: 3
     }, 8, ["id", "class"])) : N("", !0)
   ], 2)), [
-    [g, e.closeOpenedDropdown]
+    [m, e.clickOutsideDropdown]
   ]);
 }
-const It = /* @__PURE__ */ k(bt, [["render", vt], ["__scopeId", "data-v-0defd8ce"]]);
+const Kt = /* @__PURE__ */ F(St, [["render", $t], ["__scopeId", "data-v-fbd05464"]]);
 export {
-  It as B,
-  D as a,
-  mt as u
+  Kt as B,
+  B as a,
+  wt as u
 };
-//# sourceMappingURL=dropdown.63de9aac.js.map
+//# sourceMappingURL=dropdown.96431c25.js.map