@kong/kongponents 9.49.9-pr.3075.6dc117e.0 → 9.50.0

package/dist/kongponents.es119.js

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