@kong/kongponents 9.64.0 → 9.64.1

package/dist/{kongponents127.es.js → kongponents128.es.js}

@@ -1,41 +1,41 @@
-import { defineComponent as rt, useCssVars as dt, useAttrs as ct, useSlots as vt, watch as T, useTemplateRef as Z, computed as f, ref as h, useId as qe, nextTick as X, onMounted as ft, onBeforeUnmount as mt, openBlock as c, createElementBlock as y, normalizeStyle as ie, normalizeClass as ne, createBlock as V, mergeProps as re, createSlots as de, withCtx as k, createTextVNode as Y, toDisplayString as z, renderSlot as q, createCommentVNode as P, createElementVNode as L, createVNode as A, unref as I, withKeys as H, Fragment as Le, renderList as Ne, withModifiers as O } from "vue";
-import pt from "./kongponents183.es.js";
+import { defineComponent as dt, useCssVars as ct, useAttrs as vt, useSlots as ft, watch as B, useTemplateRef as Z, computed as m, ref as h, useId as qe, nextTick as X, onMounted as mt, onBeforeUnmount as pt, openBlock as f, createElementBlock as k, normalizeStyle as ie, normalizeClass as ne, createBlock as q, mergeProps as re, createSlots as de, withCtx as w, createTextVNode as Y, toDisplayString as z, renderSlot as L, createCommentVNode as P, createElementVNode as N, createVNode as $, unref as S, withKeys as H, Fragment as Le, renderList as Ne, withModifiers as O } from "vue";
+import ht from "./kongponents196.es.js";
 import _ from "./kongponents36.es.js";
-import Te from "./kongponents55.es.js";
-import ht from "./kongponents57.es.js";
-import gt from "./kongponents62.es.js";
+import Be from "./kongponents55.es.js";
+import gt from "./kongponents57.es.js";
+import yt from "./kongponents62.es.js";
 import bt from "./kongponents29.es.js";
-import yt from "./kongponents30.es.js";
+import kt from "./kongponents30.es.js";
 /* empty css                 */
-import kt from "./kongponents202.es.js";
-import wt from "./kongponents203.es.js";
-import It from "./kongponents197.es.js";
-import ce from "./kongponents193.es.js";
-import Ct from "./kongponents204.es.js";
-import { KUI_SPACE_40 as St, KUI_ICON_SIZE_40 as ve } from "./kongponents184.es.js";
-import { ResizeObserverHelper as At } from "./kongponents205.es.js";
-import { sanitizeInput as $t } from "./kongponents180.es.js";
-import { useEventListener as Et } from "./kongponents192.es.js";
-import { getUniqueStringId as xt } from "./kongponents160.es.js";
-import { normalizeSize as Be } from "./kongponents194.es.js";
-const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"], Pt = { key: 0 }, Kt = {
+import wt from "./kongponents240.es.js";
+import It from "./kongponents241.es.js";
+import St from "./kongponents205.es.js";
+import ce from "./kongponents200.es.js";
+import Ct from "./kongponents213.es.js";
+import { KUI_SPACE_40 as At, KUI_ICON_SIZE_40 as ve } from "./kongponents186.es.js";
+import { ResizeObserverHelper as $t } from "./kongponents223.es.js";
+import { sanitizeInput as Et } from "./kongponents180.es.js";
+import { useEventListener as xt } from "./kongponents202.es.js";
+import { getUniqueStringId as Ft } from "./kongponents161.es.js";
+import { normalizeSize as Te } from "./kongponents183.es.js";
+const zt = { "data-testid": "multiselect-container" }, Pt = ["id", "tabindex"], Kt = { key: 0 }, Mt = {
   key: 1,
   class: "expanded-selection-empty"
-}, Mt = { class: "multiselect-selection-badge-label" }, Vt = ["aria-label", "onClick"], qt = { class: "multiselect-icons-container" }, Lt = {
+}, Vt = { class: "multiselect-selection-badge-label" }, qt = ["aria-label", "onClick"], Lt = { class: "multiselect-icons-container" }, Nt = {
   key: 0,
   class: "multiselect-input-wrapper"
-}, Nt = {
+}, Bt = {
   key: 2,
   class: "multiselect-empty",
   "data-propagate-clicks": "false"
 }, Tt = {
   key: 1,
   class: "help-text"
-}, Bt = {
+}, Ut = {
   key: 2,
   "aria-hidden": "true",
   class: "staging-area"
-}, Ut = { class: "multiselect-selection-badge-label" }, Dt = 36, Rt = "Filter...", rl = /* @__PURE__ */ rt({
+}, Dt = { class: "multiselect-selection-badge-label" }, Rt = 36, Ht = "Filter...", dl = /* @__PURE__ */ dt({
   inheritAttrs: !1,
   __name: "KMultiselect",
   props: {
@@ -63,17 +63,17 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
   },
   emits: ["selected", "input", "change", "update:modelValue", "query-change", "item-added", "item-removed"],
   setup(o, { emit: ee }) {
-    dt((e) => ({
-      v24368ef4: _e.value
+    ct((e) => ({
+      fbe45d06: _e.value
     }));
     const Ue = (e) => {
-      const t = [], a = (l) => {
-        "value" in l ? t.push(l.value) : "items" in l && Array.isArray(l.items) && l.items.forEach((u) => t.push(u.value));
+      const t = [], l = (a) => {
+        "value" in a ? t.push(a.value) : "items" in a && Array.isArray(a.items) && a.items.forEach((u) => t.push(u.value));
       };
-      return e.forEach(a), t;
+      return e.forEach(l), t;
     }, De = (e) => {
-      const t = Ue(e), a = new Set(t);
-      return t.length === a.size;
+      const t = Ue(e), l = new Set(t);
+      return t.length === l.size;
     }, Re = (e) => {
       for (const t of e)
         if ("value" in t) {
@@ -82,46 +82,46 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
         } else if ("items" in t && Array.isArray(t.items)) {
           if (t.label === void 0)
             return !1;
-          for (const a of t.items)
-            if (a.label === void 0 || a.value === void 0)
+          for (const l of t.items)
+            if (l.label === void 0 || l.value === void 0)
               return !1;
         }
       return !0;
-    }, b = ct(), te = vt(), { cloneDeep: G, stripRequiredLabel: He } = pt();
-    T(() => o.items, (e) => {
+    }, y = vt(), te = ft(), { cloneDeep: G, stripRequiredLabel: He } = ht();
+    B(() => o.items, (e) => {
       !e.length || Re(e) && De(e) || console.warn("KMultiselect: Items must have a label & value and value must be unique");
     }, { immediate: !0 });
-    const w = ee, fe = Z("kMultiselectItems"), me = f(() => b.required !== void 0 && String(b.required) !== "false"), Oe = f(() => He(o.label, me.value)), Ge = () => !!(o.labelAttributes?.help || o.labelAttributes?.info || te["label-tooltip"]), pe = (e) => K.value || F.value || e?.disabled ? "neutral" : o.error ? "danger" : "info", he = {
+    const I = ee, fe = Z("kMultiselectItems"), me = m(() => y.required !== void 0 && String(y.required) !== "false"), Oe = m(() => He(o.label, me.value)), Ge = () => !!(o.labelAttributes?.help || o.labelAttributes?.info || te["label-tooltip"]), pe = (e) => K.value || F.value || e?.disabled ? "neutral" : o.error ? "danger" : "info", he = {
       hideCaret: !0,
       placement: "bottom-start",
       popoverTimeout: 0,
       popoverClasses: "k-multiselect-popover multiselect-popover"
-    }, W = h(0), B = h(0), We = qe(), ge = f(() => b.id ? String(b.id) : We), be = qe(), J = Z("multiselectElement"), Je = Z("multiselectDropdownInputElement"), ye = Z("multiselectSelectionsStagingElement"), le = f(() => o.selectedRowCount * Dt), m = h(""), ke = f(() => !(!m.value || n.value.filter((e) => e.label === m.value).length)), x = h(null), n = h([]), C = h([]), j = h([]), r = h([]), v = h([]), g = h([]), $ = /* @__PURE__ */ new Set(), ae = h([]), U = h([]), je = f(() => U.value.map((e) => e.label).join(", ")), we = h(!1), D = h(!1), oe = h(!1), K = f(() => b?.disabled !== void 0 && String(b?.disabled) !== "false"), F = f(() => b?.readonly !== void 0 && String(b?.readonly) !== "false"), Qe = f({
+    }, J = h(0), T = h(0), Je = qe(), ge = m(() => y.id ? String(y.id) : Je), ye = qe(), W = Z("multiselectElement"), We = Z("multiselectDropdownInputElement"), be = Z("multiselectSelectionsStagingElement"), le = m(() => o.selectedRowCount * Rt), p = h(""), ke = m(() => !(!p.value || n.value.filter((e) => e.label === p.value).length)), x = h(null), n = h([]), C = h([]), j = h([]), r = h([]), v = h([]), g = h([]), A = /* @__PURE__ */ new Set(), ae = h([]), U = h([]), je = m(() => U.value.map((e) => e.label).join(", ")), we = h(!1), D = h(!1), oe = h(!1), K = m(() => y?.disabled !== void 0 && String(y?.disabled) !== "false"), F = m(() => y?.readonly !== void 0 && String(y?.readonly) !== "false"), Qe = m({
       get() {
         return o.modelValue;
       },
       set(e) {
-        const t = n.value.filter((a) => e.includes(a.value));
+        const t = n.value.filter((l) => e.includes(l.value));
         t.length ? Ee(t) : e.length || ue();
       }
-    }), Ze = f(() => {
-      const e = { ...b };
+    }), Ze = m(() => {
+      const e = { ...y };
       return delete e.class, e;
-    }), Ie = () => !!(o.dropdownFooterText || te["dropdown-footer-text"] || te["dropdown-footer"]), Xe = f(() => o.dropdownFooterPosition ?? o.dropdownFooterTextPosition ?? "sticky"), Ye = () => ({
+    }), Ie = () => !!(o.dropdownFooterText || te["dropdown-footer-text"] || te["dropdown-footer"]), Xe = m(() => o.dropdownFooterPosition ?? o.dropdownFooterTextPosition ?? "sticky"), Ye = () => ({
       ...he,
       ...o.kpopAttributes,
       popoverClasses: `${he.popoverClasses} ${o.kpopAttributes?.popoverClasses ?? ""} ${Ie() ? "has-dropdown-footer" : ""}`,
       width: R.value + "px",
       maxWidth: R.value + "px",
-      disabled: b.disabled !== void 0 && String(b.disabled) !== "false" || b.readonly !== void 0 && String(b.readonly) !== "false"
-    }), _e = f(() => Be(o.dropdownMaxHeight)), et = f(() => {
+      disabled: y.disabled !== void 0 && String(y.disabled) !== "false" || y.readonly !== void 0 && String(y.readonly) !== "false"
+    }), _e = m(() => Te(o.dropdownMaxHeight)), et = m(() => {
       const e = o.width ? o.width : "300";
-      return Be(e);
-    }), tt = f(() => ({
+      return Te(e);
+    }), tt = m(() => ({
       width: et.value
-    })), Ce = f(() => ({
+    })), Se = m(() => ({
       width: R.value + "px"
-    })), Se = f(() => {
+    })), Ce = m(() => {
       if (r.value.length === 0) {
         if (!o.collapsedContext && o.placeholder)
           return o.placeholder;
@@ -129,252 +129,264 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
           return o.searchPlaceholder;
       }
       return r.value.length === 1 ? `${r.value.length} item selected` : `${r.value.length} items selected`;
-    }), lt = f(() => o.autosuggest ? n.value : o.filterFunction({ items: n.value, query: m.value })), Ae = f(() => {
-      if (o.autosuggest || !m.value)
+    }), lt = m(() => o.autosuggest ? n.value : o.filterFunction({ items: n.value, query: p.value })), Ae = m(() => {
+      if (o.autosuggest || !p.value)
         return C.value;
-      const e = lt.value, t = new Set(e.map((l) => l.value)), a = [];
-      for (const l of C.value)
-        if (E(l)) {
-          const u = l.items.filter((s) => t.has(s.value));
-          u.length > 0 && a.push({
-            label: l.label,
-            key: l.key,
+      const e = lt.value, t = new Set(e.map((a) => a.value)), l = [];
+      for (const a of C.value)
+        if (E(a)) {
+          const u = a.items.filter((s) => t.has(s.value));
+          u.length > 0 && l.push({
+            label: a.label,
+            key: a.key,
             items: u
           });
         } else
-          t.has(l.value) && a.push(l);
-      return a;
+          t.has(a.value) && l.push(a);
+      return l;
     }), at = (e) => {
       (K.value || e?.target?.dataset.propagateClicks === "false") && e.stopPropagation();
-    }, $e = async (e, t, a) => {
-      e ? t.value || (m.value = "", a(), ze(), await X(), Je.value?.$el?.querySelector("input")?.focus({ preventScroll: !0 })) : t.value && (m.value = "", a());
-    }, N = () => {
+    }, $e = async (e, t, l) => {
+      e ? t.value || (p.value = "", l(), ze(), await X(), We.value?.$el?.querySelector("input")?.focus({ preventScroll: !0 })) : t.value && (p.value = "", l());
+    }, M = () => {
       setTimeout(() => {
-        const e = ye.value;
+        const e = be.value;
         if (o.collapsedContext) {
-          B.value++;
+          T.value++;
           return;
         }
         if (e) {
           if (e.clientHeight > le.value) {
-            const a = Array.from(e.querySelectorAll(".multiselect-selection-badge")).filter((s) => s.offsetTop >= le.value), l = v.value.length - a.length, u = v.value.splice(l, a.length);
+            const l = Array.from(e.querySelectorAll(".multiselect-selection-badge")).filter((s) => s.offsetTop >= le.value), a = v.value.length - l.length, u = v.value.splice(a, l.length);
             for (const s of u)
-              $.has(s.value) || ($.add(s.value), g.value.push(s));
+              A.has(s.value) || (A.add(s.value), g.value.push(s));
           }
-          B.value++;
+          T.value++;
         }
       }, 0);
+    }, ot = (e) => {
+      const t = new Map(r.value.map((l) => [l.value, l]));
+      r.value = e.map((l) => t.get(l)).filter((l) => l !== void 0), v.value = [...r.value], g.value = [], A.clear(), M();
     }, Ee = (e) => {
       e.forEach((t) => {
-        const a = n.value.filter((l) => l.value === t.value)?.[0] || null;
-        a && (a.selected = !0, r.value.filter((l) => l.value === a.value).length || (r.value.push(a), v.value.push(a)));
-      }), N();
-    }, ot = (e, t = !1) => {
-      const a = new Set(e.map((l) => l.value));
-      r.value = r.value.filter((l) => !a.has(l.value)), v.value = v.value.filter((l) => !a.has(l.value)), g.value = g.value.filter((l) => !a.has(l.value)), e.forEach((l) => {
-        if ($.delete(l.value), l.selected = !1, g.value.length) {
+        const l = n.value.filter((a) => a.value === t.value)?.[0] || null;
+        l && (l.selected = !0, r.value.filter((a) => a.value === l.value).length || (r.value.push(l), v.value.push(l)));
+      }), M();
+    }, st = (e, t = !1) => {
+      const l = new Set(e.map((a) => a.value));
+      r.value = r.value.filter((a) => !l.has(a.value)), v.value = v.value.filter((a) => !l.has(a.value)), g.value = g.value.filter((a) => !l.has(a.value)), e.forEach((a) => {
+        if (A.delete(a.value), a.selected = !1, g.value.length) {
           const u = g.value.pop();
-          u && (v.value.push(u), $.delete(u.value));
+          u && (v.value.push(u), A.delete(u.value));
         }
-        o.enableItemCreation && l.custom && (n.value = n.value.filter((u) => u.value !== l.value), C.value = C.value.filter((u) => E(u) ? !0 : u.value !== l.value), w("item-removed", l));
-      }), t && N();
+        o.enableItemCreation && a.custom && (n.value = n.value.filter((u) => u.value !== a.value), C.value = C.value.filter((u) => E(u) ? !0 : u.value !== a.value), I("item-removed", a));
+      }), t && M();
     }, se = (e, t) => {
-      let a = !1, l = t ? e : n.value.filter((s) => s.value === e.value)?.[0] || null;
-      if (o.enableItemCreation && l?.custom && (a = !0), l === null && (l = r.value.filter((s) => s.value === e.value)?.[0] || null), l === null)
+      let l = !1, a = t ? e : n.value.filter((s) => s.value === e.value)?.[0] || null;
+      if (o.enableItemCreation && a?.custom && (l = !0), a === null && (a = r.value.filter((s) => s.value === e.value)?.[0] || null), a === null)
         return;
-      if (l.selected) {
-        if (r.value = r.value.filter((s) => s.value !== e.value), v.value.filter((s) => s.value === e.value).length ? v.value = v.value.filter((s) => s.value !== e.value) : $.delete(e.value) && (g.value = g.value.filter((s) => s.value !== e.value)), l.selected = !1, g.value.length) {
+      if (a.selected) {
+        if (r.value = r.value.filter((s) => s.value !== e.value), v.value.filter((s) => s.value === e.value).length ? v.value = v.value.filter((s) => s.value !== e.value) : A.delete(e.value) && (g.value = g.value.filter((s) => s.value !== e.value)), a.selected = !1, g.value.length) {
           const s = g.value.pop();
-          s && (v.value.push(s), $.delete(s.value));
+          s && (v.value.push(s), A.delete(s.value));
         }
-        a && (n.value = n.value.filter((s) => s.value !== e.value), C.value = C.value.filter((s) => E(s) ? !0 : s.value !== e.value), w("item-removed", e));
+        l && (n.value = n.value.filter((s) => s.value !== e.value), C.value = C.value.filter((s) => E(s) ? !0 : s.value !== e.value), I("item-removed", e));
       } else
-        l.selected = !0, r.value.push(l), v.value.push(l), t && (l.custom = !0, n.value.push(l), C.value.unshift(l));
-      N();
+        a.selected = !0, r.value.push(a), v.value.push(a), t && (a.custom = !0, n.value.push(a), C.value.unshift(a));
+      M();
       const u = r.value.map((s) => s.value);
-      w("selected", r.value), w("change", l), w("update:modelValue", u);
+      I("selected", r.value), I("change", a), I("update:modelValue", u);
     }, xe = (e) => {
       o.enableItemCreation && Fe(), e.preventDefault();
     }, Fe = () => {
-      if (!o.enableItemCreation || !m.value || !ke.value || !o.itemCreationValidator(m.value))
+      if (!o.enableItemCreation || !p.value || !ke.value || !o.itemCreationValidator(p.value))
         return;
       const e = n.value.length + 1, t = {
-        label: m.value.trim(),
-        value: xt(),
-        key: `${$t(m.value.trim()).replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${e}`
+        label: p.value.trim(),
+        value: Ft(),
+        key: `${Et(p.value.trim()).replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${e}`
       };
-      w("item-added", t), se(t, !0), m.value = "";
+      I("item-added", t), se(t, !0), p.value = "";
     }, E = (e) => "items" in e && Array.isArray(e.items), ze = () => {
-      const e = [], t = [], a = [];
+      const e = [], t = [], l = [];
       for (const s of Ae.value)
-        E(s) ? a.push(s) : t.push(s);
-      const l = t.filter((s) => s.selected), u = t.filter((s) => !s.selected);
-      e.push(...l, ...u);
-      for (const s of a) {
-        const i = s.items.filter((p) => p.selected), S = s.items.filter((p) => !p.selected);
+        E(s) ? l.push(s) : t.push(s);
+      const a = t.filter((s) => s.selected), u = t.filter((s) => !s.selected);
+      e.push(...a, ...u);
+      for (const s of l) {
+        const i = s.items.filter((d) => d.selected), b = s.items.filter((d) => !d.selected);
         e.push({
           label: s.label,
           key: s.key,
-          items: [...i, ...S]
+          items: [...i, ...b]
         });
       }
       j.value = e;
     }, ue = () => {
       n.value.forEach((t) => {
-        t.disabled || (t.selected = !1, t.custom && w("item-removed", t));
-      }), n.value = n.value.filter((t) => !(t.custom && !t.disabled)), C.value = C.value.filter((t) => E(t) ? !0 : !(t.custom && !t.disabled)), r.value = r.value.filter((t) => t.disabled), v.value = v.value.filter((t) => t.disabled), g.value = g.value.filter((t) => (t.disabled || $.delete(t.value), t.disabled)), m.value = "", N();
+        t.disabled || (t.selected = !1, t.custom && I("item-removed", t));
+      }), n.value = n.value.filter((t) => !(t.custom && !t.disabled)), C.value = C.value.filter((t) => E(t) ? !0 : !(t.custom && !t.disabled)), r.value = r.value.filter((t) => t.disabled), v.value = v.value.filter((t) => t.disabled), g.value = g.value.filter((t) => (t.disabled || A.delete(t.value), t.disabled)), p.value = "", M();
       const e = r.value.map((t) => t.value);
-      w("selected", r.value), w("update:modelValue", e), w("query-change", "");
+      I("selected", r.value), I("update:modelValue", e), I("query-change", "");
     }, Pe = (e) => {
-      m.value = e.trim(), w("query-change", e.trim());
-    }, st = (e, t) => {
+      p.value = e.trim(), I("query-change", e.trim());
+    }, ut = (e, t) => {
       e.keyCode === 27 && (t.value = !1), (e.key === "ArrowDown" || e.key === "ArrowUp") && fe.value?.setFocus(e.key === "ArrowDown" ? "down" : "up");
     }, Ke = () => {
       x.value?.showPopover();
-    }, ut = (e) => {
+    }, it = (e) => {
       (e.key === "ArrowDown" || e.key === "ArrowUp") && fe.value?.setFocus(e.key === "ArrowDown" ? "down" : "up");
-    }, it = async () => {
+    }, nt = async () => {
       oe.value = !0, Me();
     }, Me = () => {
-      we.value || (we.value = !0, w("query-change", ""));
+      we.value || (we.value = !0, I("query-change", ""));
     };
-    T(B, () => {
+    B(T, () => {
       setTimeout(() => {
-        const e = ye.value;
+        const e = be.value;
         if (o.collapsedContext) {
-          ae.value = G(v.value), U.value = [], W.value++;
+          ae.value = G(v.value), U.value = [], J.value++;
           return;
         }
         if (e)
           if (e.clientHeight > le.value) {
-            const a = v.value.pop();
-            a && !$.has(a.value) && (g.value.push(a), $.add(a.value)), B.value++;
+            const l = v.value.pop();
+            l && !A.has(l.value) && (g.value.push(l), A.add(l.value)), T.value++;
           } else
-            ae.value = G(v.value), U.value = G(g.value), W.value++;
+            ae.value = G(v.value), U.value = G(g.value), J.value++;
       }, 0);
-    }), T(W, async () => {
+    }), B(J, async () => {
       x.value && typeof x.value.updatePopper == "function" && (await X(), x.value.updatePopper());
-    }), T(Ae, () => {
+    }), B(Ae, () => {
       ze();
-    }), T(Qe, (e, t) => {
+    }), B(Qe, (e, t) => {
       if (JSON.stringify(e) !== JSON.stringify(t)) {
+        const l = r.value.map((d) => d.value);
+        if (JSON.stringify(l) === JSON.stringify(e))
+          return;
         if (!e.length) {
           ue();
           return;
         }
-        const a = new Set(t), l = new Set(e), u = n.value.filter((i) => l.has(i.value)), s = r.value.filter((i) => !l.has(i.value) && a.has(i.value));
-        s.length && ot(s), u.length && Ee(u);
+        const a = new Set(t), u = new Set(e), s = new Set(l), i = n.value.filter(
+          (d) => u.has(d.value) && !s.has(d.value)
+        ), b = r.value.filter((d) => !u.has(d.value) && a.has(d.value));
+        b.length && st(b), i.length && Ee(i), ot(e);
       }
-    }), T(() => o.items, (e, t) => {
+    }, {
+      // When items and modelValue change together, let the items watcher add new options
+      // before ordering the selected badges.
+      flush: "post"
+    }), B(() => o.items, (e, t) => {
       if (JSON.stringify(e) === JSON.stringify(t))
         return;
-      const a = G(o.items), l = a.some((i) => E(i)), u = [], s = [];
-      if (l)
-        for (const i of a)
+      const l = G(o.items), a = l.some((i) => E(i)), u = [], s = [];
+      if (a)
+        for (const i of l)
           E(i) ? u.push(...i.items) : u.push(i);
       else {
         const i = /* @__PURE__ */ new Map();
-        for (const d of a)
-          E(d) || (d.group && (i.has(d.group) || i.set(d.group, []), i.get(d.group).push(d)), u.push(d));
-        const S = Array.from(i.keys()).sort(
-          (d, M) => d.toLowerCase().localeCompare(M.toLowerCase())
-        ), p = u.filter((d) => !d.group);
-        s.push(...p);
-        for (const d of S)
+        for (const c of l)
+          E(c) || (c.group && (i.has(c.group) || i.set(c.group, []), i.get(c.group).push(c)), u.push(c));
+        const b = Array.from(i.keys()).sort(
+          (c, V) => c.toLowerCase().localeCompare(V.toLowerCase())
+        ), d = u.filter((c) => !c.group);
+        s.push(...d);
+        for (const c of b)
           s.push({
-            label: d,
-            items: i.get(d)
+            label: c,
+            items: i.get(c)
           });
       }
       n.value = u;
       for (let i = 0; i < n.value.length; i++) {
         n.value[i].selected === void 0 && (n.value[i].selected = !1);
-        let S = `${n.value[i].label?.replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${i}`;
-        if (S.includes("undefined") && (S = `multiselect-item-label-${i}`), n.value[i].key = S, o.modelValue.includes(n.value[i].value) || n.value[i].selected) {
-          const p = n.value[i];
-          p.selected = !0, r.value.filter((d) => d.value === p.value).length || r.value.push(p), v.value.filter((d) => d.value === p.value).length || v.value.push(p);
+        let b = `${n.value[i].label?.replace(/ /gi, "-")?.replace(/[^a-z0-9-_]/gi, "")}-${i}`;
+        if (b.includes("undefined") && (b = `multiselect-item-label-${i}`), n.value[i].key = b, o.modelValue.includes(n.value[i].value) || n.value[i].selected) {
+          const d = n.value[i];
+          d.selected = !0, r.value.filter((c) => c.value === d.value).length || r.value.push(d), v.value.filter((c) => c.value === d.value).length || v.value.push(d);
         }
       }
-      if (l) {
-        const i = [], S = [];
-        for (const p of a)
-          if (E(p)) {
-            const d = p.items.map((M) => n.value.find((nt) => nt.value === M.value)).filter((M) => M !== void 0);
-            S.push({
-              label: p.label,
-              key: p.key,
-              items: d
+      if (a) {
+        const i = [], b = [];
+        for (const d of l)
+          if (E(d)) {
+            const c = d.items.map((V) => n.value.find((rt) => rt.value === V.value)).filter((V) => V !== void 0);
+            b.push({
+              label: d.label,
+              key: d.key,
+              items: c
             });
           } else {
-            const d = n.value.find((M) => M.value === p.value);
-            d && i.push(d);
+            const c = n.value.find((V) => V.value === d.value);
+            c && i.push(c);
           }
-        s.push(...i, ...S);
+        s.push(...i, ...b);
       }
-      C.value = s, N(), x.value && typeof x.value.updatePopper == "function" && X(() => {
+      C.value = s, M(), x.value && typeof x.value.updatePopper == "function" && X(() => {
         x.value.updatePopper();
       });
     }, { deep: !0, immediate: !0 });
     const R = h(300), Ve = async () => {
-      R.value = 300, await X(), R.value = J.value?.clientWidth || 300, N();
+      R.value = 300, await X(), R.value = W.value?.clientWidth || 300, M();
     }, Q = h();
-    return ft(() => {
-      Et("resize", Ve), Q.value = At.create(Ve), Q.value.observe(J.value);
-    }), mt(() => {
-      Q.value && J.value && Q.value.unobserve(J.value);
-    }), (e, t) => (c(), y("div", {
+    return mt(() => {
+      xt("resize", Ve), Q.value = $t.create(Ve), Q.value.observe(W.value);
+    }), pt(() => {
+      Q.value && W.value && Q.value.unobserve(W.value);
+    }), (e, t) => (f(), k("div", {
       class: ne(["k-multiselect", [e.$attrs.class, { "multiselect-error": o.error }]]),
       style: ie(tt.value)
     }, [
-      o.label ? (c(), V(ht, re({ key: 0 }, o.labelAttributes, {
+      o.label ? (f(), q(gt, re({ key: 0 }, o.labelAttributes, {
         "data-testid": o.labelAttributes["data-testid"] ? o.labelAttributes["data-testid"] : "multiselect-label",
         for: ge.value,
         required: me.value
       }), de({
-        default: k(() => [
+        default: w(() => [
           Y(z(Oe.value) + " ", 1)
         ]),
         _: 2
       }, [
         Ge() ? {
           name: "tooltip",
-          fn: k(() => [
-            q(e.$slots, "label-tooltip", {}, void 0, !0)
+          fn: w(() => [
+            L(e.$slots, "label-tooltip", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0
       ]), 1040, ["data-testid", "for", "required"])) : P("", !0),
-      L("div", Ft, [
-        A(bt, null, {
-          default: k(({ isToggled: a, toggle: l }) => [
-            A(gt, re({
+      N("div", zt, [
+        $(bt, null, {
+          default: w(({ isToggled: l, toggle: a }) => [
+            $(yt, re({
               ref_key: "popper",
               ref: x,
               "hide-close-icon": "",
-              offset: `var(--kui-space-40, ${I(St)})`
+              offset: `var(--kui-space-40, ${S(At)})`
             }, Ye(), {
-              onClose: () => $e(!1, a, l),
-              onOpen: () => $e(!0, a, l)
+              onClose: () => $e(!1, l, a),
+              onOpen: () => $e(!0, l, a)
             }), {
-              content: k(() => [
-                L("div", {
+              content: w(() => [
+                N("div", {
                   class: "multiselect-list",
                   onClick: t[7] || (t[7] = O(() => {
                   }, ["stop"])),
                   onMouseenter: t[8] || (t[8] = () => D.value = !0),
                   onMouseleave: t[9] || (t[9] = () => D.value = !1)
                 }, [
-                  !o.collapsedContext && !F.value ? (c(), y("div", Lt, [
-                    A(Te, {
+                  !o.collapsedContext && !F.value ? (f(), k("div", Nt, [
+                    $(Be, {
                       ref: "multiselectDropdownInputElement",
                       autocapitalize: "off",
                       autocomplete: "off",
                       autocorrect: "off",
                       class: "multiselect-dropdown-input",
                       "data-testid": "multiselect-dropdown-input",
-                      "model-value": m.value,
+                      "model-value": p.value,
                       name: "multiselect-options-search",
-                      placeholder: o.searchPlaceholder || Rt,
+                      placeholder: o.searchPlaceholder || Ht,
                       spellcheck: "false",
                       type: "text",
                       onClick: t[5] || (t[5] = O(() => {
@@ -382,52 +394,52 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
                       onFocus: Me,
                       onKeydown: H(xe, ["enter"]),
                       onKeyup: [
-                        ut,
+                        it,
                         t[6] || (t[6] = H(O(() => {
                         }, ["stop"]), ["enter"]))
                       ],
                       "onUpdate:modelValue": Pe
                     }, null, 8, ["model-value", "placeholder"])
                   ])) : P("", !0),
-                  A(kt, {
+                  $(wt, {
                     ref: "kMultiselectItems",
-                    "filter-string": m.value,
+                    "filter-string": p.value,
                     "item-creation-enabled": o.enableItemCreation && ke.value,
-                    "item-creation-valid": o.itemCreationValidator(m.value),
+                    "item-creation-valid": o.itemCreationValidator(p.value),
                     items: j.value,
                     onAddItem: Fe,
                     onSelected: se
                   }, {
-                    content: k(({ item: u }) => [
-                      q(e.$slots, "item-template", {
+                    content: w(({ item: u }) => [
+                      L(e.$slots, "item-template", {
                         class: "multiselect-item",
                         item: u
                       }, void 0, !0)
                     ]),
                     _: 3
                   }, 8, ["filter-string", "item-creation-enabled", "item-creation-valid", "items"]),
-                  !j.value.length && !e.$slots.empty && !o.enableItemCreation ? (c(), V(wt, {
+                  !j.value.length && !e.$slots.empty && !o.enableItemCreation ? (f(), q(It, {
                     key: "multiselect-empty-item",
                     class: "multiselect-empty-item",
                     "data-testid": "multiselect-empty-item",
                     item: { label: "No results", value: "no_results", disabled: !0 }
                   })) : P("", !0),
-                  e.$slots.empty && !o.loading && !j.value.length ? (c(), y("div", Nt, [
-                    q(e.$slots, "empty", {}, void 0, !0)
+                  e.$slots.empty && !o.loading && !j.value.length ? (f(), k("div", Bt, [
+                    L(e.$slots, "empty", {}, void 0, !0)
                   ])) : P("", !0)
                 ], 32),
-                Ie() ? (c(), y("div", {
+                Ie() ? (f(), k("div", {
                   key: 0,
                   class: ne(["dropdown-footer", `dropdown-footer-${Xe.value}`]),
                   "data-testid": "dropdown-footer"
                 }, [
-                  e.$slots["dropdown-footer"] ? q(e.$slots, "dropdown-footer", { key: 0 }, void 0, !0) : q(e.$slots, "dropdown-footer-text", { key: 1 }, () => [
+                  e.$slots["dropdown-footer"] ? L(e.$slots, "dropdown-footer", { key: 0 }, void 0, !0) : L(e.$slots, "dropdown-footer-text", { key: 1 }, () => [
                     Y(z(o.dropdownFooterText), 1)
                   ], !0)
                 ], 2)) : P("", !0)
               ]),
-              default: k(() => [
-                L("div", re({
+              default: w(() => [
+                N("div", re({
                   id: ge.value,
                   ref: "multiselectElement",
                   class: ["multiselect-trigger", { focused: oe.value, hovered: D.value, disabled: K.value, readonly: F.value }],
@@ -441,39 +453,39 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
                     H(Ke, ["space"])
                   ]
                 }), [
-                  o.collapsedContext ? (c(), y("div", Pt, [
-                    A(Te, {
+                  o.collapsedContext ? (f(), k("div", Kt, [
+                    $(Be, {
                       autocapitalize: "off",
                       autocomplete: "off",
                       autocorrect: "off",
                       class: ne(["multiselect-input", { "is-readonly": F.value }]),
                       "data-testid": "multiselect-input",
                       disabled: K.value,
-                      "model-value": m.value,
+                      "model-value": p.value,
                       name: "multiselect-options-search",
-                      placeholder: Se.value,
+                      placeholder: Ce.value,
                       readonly: F.value ? !0 : void 0,
                       spellcheck: "false",
                       type: "text",
                       onBlur: t[0] || (t[0] = () => oe.value = !1),
                       onClick: (u) => {
-                        a.value && u.stopPropagation();
+                        l.value && u.stopPropagation();
                       },
-                      onFocus: it,
+                      onFocus: nt,
                       onKeydown: H(xe, ["enter"]),
-                      onKeyup: (u) => st(u, a),
+                      onKeyup: (u) => ut(u, l),
                       onMouseenter: t[1] || (t[1] = () => D.value = !0),
                       onMouseleave: t[2] || (t[2] = () => D.value = !1),
                       "onUpdate:modelValue": Pe
                     }, null, 8, ["class", "disabled", "model-value", "placeholder", "readonly", "onClick", "onKeyup"])
-                  ])) : r.value.length ? (c(), y("div", {
+                  ])) : r.value.length ? (f(), k("div", {
                     key: 2,
                     class: "selection-badges-container",
                     "data-testid": "selection-badges-container",
-                    style: ie(Ce.value)
+                    style: ie(Se.value)
                   }, [
-                    (c(!0), y(Le, null, Ne(ae.value, (u, s) => (c(), V(_, {
-                      key: `${I(be)}-${u.key ? u.key : s}-badge-${W.value}`,
+                    (f(!0), k(Le, null, Ne(ae.value, (u, s) => (f(), q(_, {
+                      key: `${S(ye)}-${u.key ? u.key : s}-badge-${J.value}`,
                       appearance: pe(u),
                       class: "multiselect-selection-badge",
                       "icon-before": !1,
@@ -482,43 +494,43 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
                       onClick: t[3] || (t[3] = O(() => {
                       }, ["stop"]))
                     }, de({
-                      default: k(() => [
-                        q(e.$slots, "item-badge-icon", { item: u }, void 0, !0),
-                        L("span", Mt, z(u.label), 1)
+                      default: w(() => [
+                        L(e.$slots, "item-badge-icon", { item: u }, void 0, !0),
+                        N("span", Vt, z(u.label), 1)
                       ]),
                       _: 2
                     }, [
                       u.selected && !u.disabled && !K.value && !F.value ? {
                         name: "icon",
-                        fn: k(() => [
-                          L("button", {
+                        fn: w(() => [
+                          N("button", {
                             "aria-label": `Unselect ${u.label}`,
                             class: "badge-dismiss-button",
                             "data-testid": "badge-dismiss-button",
                             type: "button",
                             onClick: (i) => se(u)
                           }, [
-                            A(I(ce), { decorative: "" })
-                          ], 8, Vt)
+                            $(S(ce), { decorative: "" })
+                          ], 8, qt)
                         ]),
                         key: "0"
                       } : void 0
                     ]), 1032, ["appearance", "tooltip"]))), 128)),
-                    U.value.length ? (c(), V(yt, {
+                    U.value.length ? (f(), q(kt, {
                       key: 0,
                       class: "hidden-selection-count-tooltip",
                       "max-width": "300",
                       text: je.value
                     }, {
-                      default: k(() => [
-                        A(_, {
+                      default: w(() => [
+                        $(_, {
                           appearance: pe(),
                           class: "hidden-selection-count",
                           "data-testid": "hidden-selection-count",
                           onClick: t[4] || (t[4] = O(() => {
                           }, ["stop"]))
                         }, {
-                          default: k(() => [
+                          default: w(() => [
                             Y(" +" + z(U.value.length), 1)
                           ]),
                           _: 1
@@ -526,9 +538,9 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
                       ]),
                       _: 1
                     }, 8, ["text"])) : P("", !0)
-                  ], 4)) : (c(), y("div", Kt, z(Se.value), 1)),
-                  L("div", qt, [
-                    !o.loading && r.value.length && a.value ? (c(), y("button", {
+                  ], 4)) : (f(), k("div", Mt, z(Ce.value), 1)),
+                  N("div", Lt, [
+                    !o.loading && r.value.length && l.value ? (f(), k("button", {
                       key: 0,
                       "aria-label": "Clear",
                       class: "multiselect-clear-icon",
@@ -536,22 +548,22 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
                       type: "button",
                       onClick: ue
                     }, [
-                      A(I(ce), {
-                        size: `var(--kui-icon-size-40, ${I(ve)})`
+                      $(S(ce), {
+                        size: `var(--kui-icon-size-40, ${S(ve)})`
                       }, null, 8, ["size"])
-                    ])) : o.loading ? (c(), V(I(Ct), {
+                    ])) : o.loading ? (f(), q(S(Ct), {
                       key: 1,
                       class: "multiselect-loading-icon",
-                      size: `var(--kui-icon-size-40, ${I(ve)})`,
+                      size: `var(--kui-icon-size-40, ${S(ve)})`,
                       title: "Loading"
-                    }, null, 8, ["size"])) : (c(), V(I(It), {
+                    }, null, 8, ["size"])) : (f(), q(S(St), {
                       key: 2,
                       class: "multiselect-chevron-icon",
                       decorative: "",
-                      size: `var(--kui-icon-size-40, ${I(ve)})`
+                      size: `var(--kui-icon-size-40, ${S(ve)})`
                     }, null, 8, ["size"]))
                   ])
-                ], 16, zt)
+                ], 16, Pt)
               ]),
               _: 2
             }, 1040, ["offset", "onClose", "onOpen"])
@@ -559,40 +571,40 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
           _: 3
         })
       ]),
-      o.help ? (c(), y("p", Tt, z(o.help), 1)) : P("", !0),
-      o.collapsedContext ? P("", !0) : (c(), y("div", Bt, [
-        (c(), y("div", {
-          key: B.value,
+      o.help ? (f(), k("p", Tt, z(o.help), 1)) : P("", !0),
+      o.collapsedContext ? P("", !0) : (f(), k("div", Ut, [
+        (f(), k("div", {
+          key: T.value,
           ref: "multiselectSelectionsStagingElement",
           class: "selection-badges-container staging",
-          style: ie(Ce.value),
+          style: ie(Se.value),
           tabindex: "-1"
         }, [
-          (c(!0), y(Le, null, Ne(v.value, (a, l) => (c(), V(_, {
-            key: `${I(be)}-${a.key ? a.key : l}-badge`,
+          (f(!0), k(Le, null, Ne(v.value, (l, a) => (f(), q(_, {
+            key: `${S(ye)}-${l.key ? l.key : a}-badge`,
             "aria-hidden": "true",
             class: "multiselect-selection-badge",
             "icon-before": !1
           }, de({
-            default: k(() => [
-              q(e.$slots, "item-badge-icon", { item: a }, void 0, !0),
-              L("span", Ut, z(a.label), 1)
+            default: w(() => [
+              L(e.$slots, "item-badge-icon", { item: l }, void 0, !0),
+              N("span", Dt, z(l.label), 1)
             ]),
             _: 2
           }, [
-            a.selected && !a.disabled && !K.value && !F.value ? {
+            l.selected && !l.disabled && !K.value && !F.value ? {
               name: "icon",
-              fn: k(() => [
-                A(I(ce), { "aria-hidden": "true" })
+              fn: w(() => [
+                $(S(ce), { "aria-hidden": "true" })
               ]),
               key: "0"
             } : void 0
           ]), 1024))), 128)),
-          A(_, {
+          $(_, {
             "aria-hidden": "true",
             class: "hidden-selection-count"
           }, {
-            default: k(() => [
+            default: w(() => [
               Y(" +" + z(g.value.length), 1)
             ]),
             _: 1
@@ -603,5 +615,5 @@ const Ft = { "data-testid": "multiselect-container" }, zt = ["id", "tabindex"],
   }
 });
 export {
-  rl as default
+  dl as default
 };