@onereach/ui-components 25.1.2 → 25.1.3-beta.5772.0

package/dist/esm/{OrSelect-DU7MIxsd.mjs → OrSelect-DPoXgLko.mjs}

@@ -1,24 +1,24 @@
-import { DropdownClose as Te, DropdownOpen as Ee } from "@onereach/ui-components-common/directives";
-import { searchItemsByLabel as Pe } from "@onereach/ui-components-common/helpers";
-import { useProxyModelValue as ee, useResponsive as Le } from "@onereach/ui-components-common/hooks";
-import { isNil as Re, toArray as Z, isEqual as pe, isEmpty as ce, include as de, exclude as ie } from "@onereach/ui-components-common/utils";
-import { O as De } from "./OrCheckbox-WPBzlvaV.mjs";
-import { O as Fe } from "./OrError-B5ihH6-3.mjs";
+import { DropdownClose as Ee, DropdownOpen as Pe } from "@onereach/ui-components-common/directives";
+import { searchItemsByLabel as Le } from "@onereach/ui-components-common/helpers";
+import { useProxyModelValue as ee, useResponsive as Re } from "@onereach/ui-components-common/hooks";
+import { isNil as De, toArray as Z, isEqual as ce, isEmpty as me, include as de, exclude as ie } from "@onereach/ui-components-common/utils";
+import { O as Fe } from "./OrCheckbox-WPBzlvaV.mjs";
+import { O as Ae } from "./OrError-B5ihH6-3.mjs";
 import { O as Ue } from "./OrExpansionPanel-BNGPdEnp.mjs";
-import { O as ze } from "./OrHint-NvbZyURY.mjs";
-import { O as Ne } from "./OrIconButton-BlHCLpeW.mjs";
-import { O as qe } from "./OrIcon-k8cyvh-D.mjs";
-import { O as Ae } from "./OrInputBox-6ciokFdU.mjs";
-import { a as He } from "./OrInputBox.vue_vue_type_script_lang-q2L7rmth.mjs";
-import { O as je } from "./OrInput-BqDsy3wR.mjs";
-import { O as We } from "./OrLabel-K7_HgvcK.mjs";
-import { O as Ge } from "./OrLoader-2SaTMxmZ.mjs";
-import { O as Je } from "./OrMenuItem-puiy5rFO.mjs";
-import { O as Ke } from "./OrPopover-DbygLPtT.mjs";
-import { O as Qe, T as ae } from "./OrTags-DxQDW443.mjs";
-import { defineComponent as W, ref as m, toRefs as oe, computed as a, withDirectives as N, openBlock as n, createElementBlock as g, normalizeStyle as Xe, normalizeClass as y, vModelDynamic as Ye, renderSlot as C, watch as _, resolveComponent as i, createVNode as L, createSlots as Ze, withCtx as b, createTextVNode as T, toDisplayString as E, createElementVNode as z, vShow as x, createBlock as k, createCommentVNode as j, Fragment as F, getCurrentInstance as xe, nextTick as _e, resolveDirective as ue, withModifiers as Y, renderList as H } from "vue";
+import { O as qe } from "./OrHint-NvbZyURY.mjs";
+import { O as ze } from "./OrIconButton-BlHCLpeW.mjs";
+import { O as Ne } from "./OrIcon-k8cyvh-D.mjs";
+import { O as He } from "./OrInputBox-6ciokFdU.mjs";
+import { a as je } from "./OrInputBox.vue_vue_type_script_lang-q2L7rmth.mjs";
+import { O as We } from "./OrInput-BqDsy3wR.mjs";
+import { O as Ge } from "./OrLabel-K7_HgvcK.mjs";
+import { O as Je } from "./OrLoader-2SaTMxmZ.mjs";
+import { O as Ke } from "./OrMenuItem-puiy5rFO.mjs";
+import { O as Qe } from "./OrPopover-DbygLPtT.mjs";
+import { O as Xe, T as ae } from "./OrTags-DxQDW443.mjs";
+import { defineComponent as G, ref as m, toRefs as oe, computed as a, withDirectives as z, openBlock as r, createElementBlock as O, normalizeStyle as Ye, normalizeClass as y, vModelDynamic as Ze, renderSlot as C, watch as _, resolveComponent as i, createVNode as L, createSlots as xe, withCtx as h, createTextVNode as T, toDisplayString as E, createElementVNode as q, vShow as x, createBlock as k, createCommentVNode as W, Fragment as F, getCurrentInstance as _e, nextTick as ue, resolveDirective as pe, withModifiers as Y, renderList as j } from "vue";
 import { useFocus as eo } from "@vueuse/core";
-import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
 import { O as oo } from "./OrTooltip-DqwjoE82.mjs";
 const lo = [
   // Base
@@ -30,7 +30,7 @@ const lo = [
   "dark:placeholder:theme-foreground-outline-dark",
   "theme-background-transparent",
   "outline-none"
-], to = W({
+], to = G({
   name: "OrSelectControlInput",
   model: {
     prop: "modelValue",
@@ -63,13 +63,13 @@ const lo = [
     "focused"
   ],
   setup(e, o) {
-    const w = m(), { placeholder: f, modelValue: v } = oe(e), u = ee(v, o.emit), { focused: p } = eo(w), h = a(() => [
+    const w = m(), { placeholder: f, modelValue: v } = oe(e), u = ee(v, o.emit), { focused: p } = eo(w), S = a(() => [
       ...lo
-    ]), O = a(() => {
+    ]), V = a(() => {
       var M;
-      const S = u.value.length > 0 ? u.value.length : (M = f.value) == null ? void 0 : M.length;
+      const g = u.value.length > 0 ? u.value.length : (M = f.value) == null ? void 0 : M.length;
       return {
-        width: `${Math.max(S + 1 || 0, 2)}ch`
+        width: `${Math.max(g + 1 || 0, 2)}ch`
       };
     });
     function s() {
@@ -78,18 +78,18 @@ const lo = [
     return {
       root: w,
       proxyModelValue: u,
-      controlStyles: h,
-      controlInlineStyles: O,
+      controlStyles: S,
+      controlInlineStyles: V,
       focused: p,
       focus: s
     };
   }
 }), ao = ["placeholder", "readonly", "disabled"];
 function no(e, o, w, f, v, u) {
-  return N((n(), g("input", {
+  return z((r(), O("input", {
     ref: "root",
     "onUpdate:modelValue": o[0] || (o[0] = (p) => e.proxyModelValue = p),
-    style: Xe(e.controlInlineStyles),
+    style: Ye(e.controlInlineStyles),
     class: y(e.controlStyles),
     type: "text",
     placeholder: e.placeholder,
@@ -99,10 +99,10 @@ function no(e, o, w, f, v, u) {
     minlength: void 0,
     maxlength: void 0
   }, null, 14, ao)), [
-    [Ye, e.proxyModelValue]
+    [Ze, e.proxyModelValue]
   ]);
 }
-const me = /* @__PURE__ */ G(to, [["render", no]]), ro = [
+const fe = /* @__PURE__ */ J(to, [["render", no]]), ro = [
   // Interactivity
   "interactivity-click",
   // Typography
@@ -110,7 +110,7 @@ const me = /* @__PURE__ */ G(to, [["render", no]]), ro = [
   // Theme
   "theme-foreground-outline",
   "dark:theme-foreground-outline-dark"
-], so = W({
+], so = G({
   name: "OrSelectPlaceholder",
   props: {
     disabled: {
@@ -133,7 +133,7 @@ const me = /* @__PURE__ */ G(to, [["render", no]]), ro = [
   }
 }), io = ["disabled"];
 function uo(e, o, w, f, v, u) {
-  return n(), g("div", {
+  return r(), O("div", {
     ref: "root",
     class: y(e.rootStyles),
     disabled: e.disabled
@@ -141,16 +141,16 @@ function uo(e, o, w, f, v, u) {
     C(e.$slots, "default")
   ], 10, io);
 }
-const fe = /* @__PURE__ */ G(so, [["render", uo]]), po = [
+const ve = /* @__PURE__ */ J(so, [["render", uo]]), po = [
   // Layout
   "layout-row",
   "w-full"
-], co = W({
+], co = G({
   name: "OrSelectMultipleControl",
   components: {
-    OrSelectPlaceholder: fe,
-    OrSelectControlInput: me,
-    OrTags: Qe
+    OrSelectPlaceholder: ve,
+    OrSelectControlInput: fe,
+    OrTags: Xe
   },
   model: {
     prop: "modelValue",
@@ -204,21 +204,21 @@ const fe = /* @__PURE__ */ G(so, [["render", uo]]), po = [
     "focused"
   ],
   setup(e, o) {
-    const w = m(), f = m(), v = m(), { modelValue: u, model: p, options: h, overflow: O } = oe(e), s = ee(u, o.emit), S = a(() => {
+    const w = m(), f = m(), v = m(), { modelValue: u, model: p, options: S, overflow: V } = oe(e), s = ee(u, o.emit), g = a(() => {
       var c;
       return (c = f.value) == null ? void 0 : c.focused;
     }), M = a(() => [
       "or-select-multiple-control-v3",
       ...po
-    ]), I = a(() => Re(p.value) ? [] : Z(p.value)), P = a(() => I.value.length === 0), $ = a(() => p.value === void 0 || p.value === null ? [] : I.value.map((c) => h.value.find((B) => pe(B.value, c))).filter((c) => !!c).map((c) => ({
+    ]), I = a(() => De(p.value) ? [] : Z(p.value)), P = a(() => I.value.length === 0), $ = a(() => p.value === void 0 || p.value === null ? [] : I.value.map((c) => S.value.find((B) => ce(B.value, c))).filter((c) => !!c).map((c) => ({
       value: c.value,
       label: c.label,
       tagProps: c.disabled && { disabled: c.disabled }
     })));
     _($, (c, B) => {
-      c.length != B.length && O.value === ae.Scroll && v.value && v.value.scrollToEnd();
+      c.length != B.length && V.value === ae.Scroll && v.value && v.value.scrollToEnd();
     });
-    function U() {
+    function A() {
       f.value && f.value.focus();
     }
     return {
@@ -230,18 +230,18 @@ const fe = /* @__PURE__ */ G(so, [["render", uo]]), po = [
       isEmpty: P,
       selection: $,
       value: I,
-      focus: U,
-      focused: S
+      focus: A,
+      focused: g
     };
   }
 }), mo = { class: "inline-flex w-fit max-w-full" };
 function fo(e, o, w, f, v, u) {
-  const p = i("OrSelectControlInput"), h = i("OrTags"), O = i("OrSelectPlaceholder");
-  return n(), g("div", {
+  const p = i("OrSelectControlInput"), S = i("OrTags"), V = i("OrSelectPlaceholder");
+  return r(), O("div", {
     ref: "root",
     class: y(e.rootStyles)
   }, [
-    N(L(h, {
+    z(L(S, {
       ref: "tags",
       items: e.selection,
       class: "grow",
@@ -252,8 +252,8 @@ function fo(e, o, w, f, v, u) {
       },
       overflow: e.overflow,
       onReset: o[1] || (o[1] = (s) => e.$emit("reset", s))
-    }, Ze({
-      tag: b(({ item: s }) => [
+    }, xe({
+      tag: h(({ item: s }) => [
         C(e.$slots, "tag", { item: s }, () => [
           T(E(s.label), 1)
         ])
@@ -262,8 +262,8 @@ function fo(e, o, w, f, v, u) {
     }, [
       e.enableSearch ? {
         name: "tail",
-        fn: b(() => [
-          z("div", mo, [
+        fn: h(() => [
+          q("div", mo, [
             L(p, {
               ref: "searchControl",
               modelValue: e.searchModelValue,
@@ -279,25 +279,25 @@ function fo(e, o, w, f, v, u) {
     ]), 1032, ["items", "disabled", "tag-props", "overflow"]), [
       [x, !e.isEmpty || e.enableSearch]
     ]),
-    e.isEmpty && !e.enableSearch ? (n(), k(O, {
+    e.isEmpty && !e.enableSearch ? (r(), k(V, {
       key: 0,
       disabled: e.disabled
     }, {
-      default: b(() => [
+      default: h(() => [
         T(E(e.placeholder), 1)
       ]),
       _: 1
-    }, 8, ["disabled"])) : j("", !0)
+    }, 8, ["disabled"])) : W("", !0)
   ], 2);
 }
-const vo = /* @__PURE__ */ G(co, [["render", fo]]), yo = [
+const vo = /* @__PURE__ */ J(co, [["render", fo]]), yo = [
   // Layout
   "w-full"
-], bo = W({
+], bo = G({
   name: "OrSelectSingleControl",
   components: {
-    OrSelectPlaceholder: fe,
-    OrSelectControlInput: me,
+    OrSelectPlaceholder: ve,
+    OrSelectControlInput: fe,
     OrTooltip: oo
   },
   model: {
@@ -343,23 +343,23 @@ const vo = /* @__PURE__ */ G(co, [["render", fo]]), yo = [
     "focused"
   ],
   setup(e, o) {
-    const w = m(), f = m(), v = m(), u = m(), { modelValue: p, model: h, options: O } = oe(e), s = ee(p, o.emit), S = a(() => ce(h.value)), M = a(() => O.value.find((r) => pe(r.value, h.value))), I = a(() => {
-      var r;
-      return (r = M.value) == null ? void 0 : r.label;
+    const w = m(), f = m(), v = m(), u = m(), { modelValue: p, model: S, options: V } = oe(e), s = ee(p, o.emit), g = a(() => me(S.value)), M = a(() => V.value.find((n) => ce(n.value, S.value))), I = a(() => {
+      var n;
+      return (n = M.value) == null ? void 0 : n.label;
     });
     _(
       () => e.isOpen,
       () => {
-        var r;
-        (r = u.value) == null || r.close();
+        var n;
+        (n = u.value) == null || n.close();
       }
     );
     const P = a(() => {
-      var r;
-      return (r = f.value) == null ? void 0 : r.focused;
+      var n;
+      return (n = f.value) == null ? void 0 : n.focused;
     }), $ = () => {
       u.value && u.value.open();
-    }, U = () => {
+    }, A = () => {
       u.value && u.value.close();
     }, c = a(() => [
       "or-select-single-control-v3",
@@ -368,7 +368,7 @@ const vo = /* @__PURE__ */ G(co, [["render", fo]]), yo = [
     function B() {
       f.value && f.value.focus();
     }
-    function q() {
+    function N() {
       if (!v.value) return;
       v.value.scrollWidth > v.value.clientWidth && $();
     }
@@ -377,7 +377,7 @@ const vo = /* @__PURE__ */ G(co, [["render", fo]]), yo = [
       rootStyles: c,
       searchControl: f,
       searchModelValue: s,
-      isEmptyModelValue: S,
+      isEmptyModelValue: g,
       selection: M,
       selectionLabel: I,
       focus: B,
@@ -385,8 +385,8 @@ const vo = /* @__PURE__ */ G(co, [["render", fo]]), yo = [
       selectionLabelRef: v,
       tooltipRef: u,
       openTooltip: $,
-      closeTooltip: U,
-      checkTooltip: q
+      closeTooltip: A,
+      checkTooltip: N
     };
   }
 }), ho = {
@@ -394,34 +394,34 @@ const vo = /* @__PURE__ */ G(co, [["render", fo]]), yo = [
   class: "flex"
 };
 function So(e, o, w, f, v, u) {
-  const p = i("OrSelectControlInput"), h = i("OrSelectPlaceholder"), O = i("OrTooltip");
-  return n(), g("div", {
+  const p = i("OrSelectControlInput"), S = i("OrSelectPlaceholder"), V = i("OrTooltip");
+  return r(), O("div", {
     ref: "root",
     class: y(e.rootStyles)
   }, [
-    e.isOpen && e.enableSearch ? (n(), k(p, {
+    e.isOpen && e.enableSearch ? (r(), k(p, {
       key: 0,
       ref: "searchControl",
       modelValue: e.searchModelValue,
       "onUpdate:modelValue": o[0] || (o[0] = (s) => e.searchModelValue = s),
       placeholder: e.isEmptyModelValue ? e.placeholder : e.selectionLabel
-    }, null, 8, ["modelValue", "placeholder"])) : (n(), g(F, { key: 1 }, [
-      e.isEmptyModelValue ? (n(), k(h, {
+    }, null, 8, ["modelValue", "placeholder"])) : (r(), O(F, { key: 1 }, [
+      e.isEmptyModelValue ? (r(), k(S, {
         key: 0,
         disabled: e.disabled
       }, {
-        default: b(() => [
+        default: h(() => [
           T(E(e.placeholder), 1)
         ]),
         _: 1
-      }, 8, ["disabled"])) : (n(), g("div", ho, [
-        z("div", {
+      }, 8, ["disabled"])) : (r(), O("div", ho, [
+        q("div", {
           ref: "selectionLabelRef",
           class: "truncate w-full",
           onMouseenter: o[1] || (o[1] = (...s) => e.checkTooltip && e.checkTooltip(...s)),
           onMouseleave: o[2] || (o[2] = (...s) => e.closeTooltip && e.closeTooltip(...s))
         }, E(e.selectionLabel), 545),
-        L(O, {
+        L(V, {
           ref: "tooltipRef",
           content: e.selectionLabel,
           trigger: e.selectionLabelRef
@@ -430,7 +430,7 @@ function So(e, o, w, f, v, u) {
     ], 64))
   ], 2);
 }
-const go = /* @__PURE__ */ G(bo, [["render", So]]), Oo = [
+const go = /* @__PURE__ */ J(bo, [["render", So]]), Oo = [
   // Layout
   "layout-column",
   // Spacing
@@ -508,27 +508,27 @@ const go = /* @__PURE__ */ G(bo, [["render", So]]), Oo = [
   "typography-body-2-regular",
   // Theme
   "text-outline dark:text-outline-dark"
-], Lo = W({
+], Lo = G({
   name: "OrSelect",
   components: {
-    OrCheckbox: De,
-    OrError: Fe,
+    OrCheckbox: Fe,
+    OrError: Ae,
     OrExpansionPanel: Ue,
-    OrHint: ze,
-    OrIcon: qe,
-    OrIconButton: Ne,
-    OrInput: je,
-    OrInputBox: Ae,
-    OrLabel: We,
-    OrMenuItem: Je,
-    OrPopover: Ke,
+    OrHint: qe,
+    OrIcon: Ne,
+    OrIconButton: ze,
+    OrInput: We,
+    OrInputBox: He,
+    OrLabel: Ge,
+    OrMenuItem: Ke,
+    OrPopover: Qe,
     OrSelectMultipleControl: vo,
     OrSelectSingleControl: go,
-    OrLoader: Ge
+    OrLoader: Je
   },
   directives: {
-    DropdownClose: Te,
-    DropdownOpen: Ee
+    DropdownClose: Ee,
+    DropdownOpen: Pe
   },
   model: {
     prop: "modelValue",
@@ -609,7 +609,7 @@ const go = /* @__PURE__ */ G(bo, [["render", So]]), Oo = [
     },
     searchFunction: {
       type: Function,
-      default: Pe
+      default: Le
     },
     groupByFunction: {
       type: Function,
@@ -637,151 +637,159 @@ const go = /* @__PURE__ */ G(bo, [["render", So]]), Oo = [
     "popoverState"
   ],
   setup(e, o) {
-    const w = xe(), f = m(), v = m(), u = a(() => {
+    const w = _e(), f = m(), v = m(), u = a(() => {
       var l;
       return (l = v.value) == null ? void 0 : l.root;
-    }), p = m(), h = m(), O = m(), s = m(), S = m(), M = a(() => {
+    }), p = m(), S = m(), V = m(), s = m(), g = m(), M = a(() => {
       var l;
-      return (l = S.value) == null ? void 0 : l.root;
+      return (l = g.value) == null ? void 0 : l.root;
     }), I = a(() => {
       var l;
-      return (l = S.value) == null ? void 0 : l.state;
-    }), P = a(() => I.value === "open"), { enableClear: $, enableSearch: U, modelValue: c, multiple: B } = oe(e), q = m(o.attrs.id ?? w.uid.toString()), r = ee(c, o.emit), le = a(() => {
-      var l, V;
-      return (V = (l = S.value) == null ? void 0 : l.bottomSheet) == null ? void 0 : V.fullscreen;
-    }), J = a(() => ce(r.value)), t = a(() => $.value && !J.value), R = a(() => {
-      var l, V;
-      return B.value ? (l = h.value) == null ? void 0 : l.focused : (V = O.value) == null ? void 0 : V.focused;
-    }), d = a(() => o.attrs.readonly), D = m(e.options), K = a(() => e.externalControl ? e.searchOptions : D.value), te = m("");
+      return (l = g.value) == null ? void 0 : l.state;
+    }), P = a(() => I.value === "open"), { enableClear: $, enableSearch: A, modelValue: c, multiple: B } = oe(e), N = m(o.attrs.id ?? w.uid.toString()), n = ee(c, o.emit), le = a(() => {
+      var l, b;
+      return (b = (l = g.value) == null ? void 0 : l.bottomSheet) == null ? void 0 : b.fullscreen;
+    }), K = a(() => me(n.value)), t = a(() => $.value && !K.value), R = a(() => {
+      var l, b;
+      return B.value ? (l = S.value) == null ? void 0 : l.focused : (b = V.value) == null ? void 0 : b.focused;
+    }), d = a(() => o.attrs.readonly), D = m(e.options), Q = a(() => e.externalControl ? e.searchOptions : D.value), te = m("");
     _([
       () => e.externalControl,
       te,
       () => e.options
-    ], async ([l, V, X]) => {
-      l ? o.emit("search", V) : D.value = await e.searchFunction(V, X);
+    ], async ([l, b, U]) => {
+      l ? o.emit("search", b) : D.value = await e.searchFunction(b, U);
     }, { deep: !0 }), _(P, (l) => {
-      l || Q();
+      l || X();
     });
-    const ve = a(() => {
+    const ye = a(() => {
       const l = e.groupByFunction;
-      return l ? D.value.reduce((V, X) => {
-        const se = l(X);
+      return l ? D.value.reduce((b, U) => {
+        const se = l(U);
         return {
-          ...V,
+          ...b,
           [se]: [
-            ...V[se] ?? [],
-            X
+            ...b[se] ?? [],
+            U
           ]
         };
       }, {}) : {
         "": e.options
       };
-    }), ye = a(() => [
+    }), be = a(() => [
       "or-select-v3",
       ...Oo,
-      ...e.variant === He.Embedded ? ["grow"] : []
-    ]), be = a(() => [
-      ...Vo
+      ...e.variant === je.Embedded ? ["grow"] : []
     ]), he = a(() => [
+      ...Vo
+    ]), Se = a(() => [
       ...ko
-    ]), Se = a(() => {
+    ]), ge = a(() => {
       var l;
       return [
         "or-select-popover-v3",
-        ...A.value ? [] : [
+        ...H.value ? [] : [
           ...wo,
-          ...(l = S.value) != null && l.isFlipped ? $o : Co
+          ...(l = g.value) != null && l.isFlipped ? $o : Co
         ]
       ];
-    }), ge = a(() => [
-      A.value ? "layout-column" : "contains",
+    }), Oe = a(() => [
+      H.value ? "layout-column" : "contains",
       le.value ? "overflow-y-auto" : "overflow-hidden"
-    ]), Oe = a(() => [
+    ]), Ve = a(() => [
       ...Mo,
       ...e.multiple ? Bo : Io,
-      ...A.value ? To : []
-    ]), Ve = a(() => [
-      ...Eo
+      ...H.value ? To : []
     ]), ke = a(() => [
+      ...Eo
+    ]), we = a(() => [
       ...Po
     ]);
-    function we() {
-      !d.value && !e.disabled && S.value && (I.value === "open" && !R.value ? re() : (ne(), setTimeout(() => {
-        Ce();
+    function Ce() {
+      !d.value && !e.disabled && g.value && (I.value === "open" && !R.value ? re() : (ne(), setTimeout(() => {
+        $e();
       })));
     }
     function ne() {
-      const l = S.value;
-      l && l.open();
+      const l = g.value;
+      l && l.open(), ue(() => {
+        if (n.value) {
+          const b = Array.isArray(n.value) ? n.value[0] : n.value, U = document.querySelector(`[data-value="${b}"]`);
+          U && U.scrollIntoView({
+            behavior: "auto",
+            block: "start"
+          });
+        }
+      });
     }
     function re() {
-      const l = S.value;
+      const l = g.value;
       l && l.close();
     }
-    function Ce() {
-      if (U.value) {
-        const l = A.value ? s.value : B.value ? h.value : O.value;
+    function $e() {
+      if (A.value) {
+        const l = H.value ? s.value : B.value ? S.value : V.value;
         l && l.focus();
       }
     }
-    function $e(l) {
-      e.multiple ? r.value = de(l, Z(r.value)) : r.value = l, Q();
-    }
     function Me(l) {
-      e.multiple ? r.value = ie(l, Z(r.value)) : r.value = void 0;
+      e.multiple ? n.value = de(l, Z(n.value)) : n.value = l, X();
     }
     function Ie(l) {
+      e.multiple ? n.value = ie(l, Z(n.value)) : n.value = void 0;
+    }
+    function Be(l) {
       if (e.multiple) {
-        const V = Z(r.value);
-        V.includes(l) ? r.value = ie(l, V) : r.value = de(l, V);
+        const b = Z(n.value);
+        b.includes(l) ? n.value = ie(l, b) : n.value = de(l, b);
       } else
-        r.value = r.value !== l ? l : void 0;
-      Q();
+        n.value = n.value !== l ? l : void 0;
+      X();
     }
-    function Q() {
-      _e(() => {
+    function X() {
+      ue(() => {
         setTimeout(() => te.value = "");
       });
     }
-    const { isDesktop: Be, isMobile: A } = Le();
+    const { isDesktop: Te, isMobile: H } = Re();
     return {
       root: f,
       inputBox: v,
       inputBoxRoot: u,
       control: p,
-      multipleControl: h,
-      singleControl: O,
+      multipleControl: S,
+      singleControl: V,
       searchControl: s,
-      popover: S,
+      popover: g,
       popoverRoot: M,
       popoverState: I,
-      rootStyles: ye,
-      controlStyles: be,
-      searchControlStyles: he,
-      dropdownStyles: Se,
-      dropdownContainerStyles: ge,
-      dropdownItemStyles: Oe,
-      noSearchResultsStyles: Ve,
-      loaderStyles: ke,
-      controlId: q,
-      proxyModelValue: r,
+      rootStyles: be,
+      controlStyles: he,
+      searchControlStyles: Se,
+      dropdownStyles: ge,
+      dropdownContainerStyles: Oe,
+      dropdownItemStyles: Ve,
+      noSearchResultsStyles: ke,
+      loaderStyles: we,
+      controlId: N,
+      proxyModelValue: n,
       readonly: d,
-      isEmptyModelValue: J,
+      isEmptyModelValue: K,
       isOpen: P,
       showClear: t,
       searchText: te,
       internalSearchOptions: D,
-      resolvedSearchOptions: K,
-      groupedOptions: ve,
-      toggle: we,
+      resolvedSearchOptions: Q,
+      groupedOptions: ye,
+      toggle: Ce,
       close: re,
       open: ne,
-      selectOption: $e,
-      deselectOption: Me,
-      toggleOption: Ie,
-      resetSearch: Q,
-      isDesktop: Be,
-      isMobile: A
+      selectOption: Me,
+      deselectOption: Ie,
+      toggleOption: Be,
+      resetSearch: X,
+      isDesktop: Te,
+      isMobile: H
     };
   }
 }), Ro = ["id", "disabled"], Do = {
@@ -789,31 +797,31 @@ const go = /* @__PURE__ */ G(bo, [["render", So]]), Oo = [
 }, Fo = {
   key: 0,
   class: /* @__PURE__ */ y(["px-sm+", "py-xs"])
-}, Uo = ["onClick"];
-function zo(e, o, w, f, v, u) {
-  const p = i("OrLabel"), h = i("OrSelectMultipleControl"), O = i("OrSelectSingleControl"), s = i("OrIconButton"), S = i("OrIcon"), M = i("OrInput"), I = i("OrLoader"), P = i("OrCheckbox"), $ = i("OrMenuItem"), U = i("OrExpansionPanel"), c = i("OrPopover"), B = i("OrInputBox"), q = i("OrHint"), r = i("OrError"), le = ue("dropdown-open"), J = ue("dropdown-close");
-  return n(), g("div", {
+}, Ao = ["onClick"];
+function Uo(e, o, w, f, v, u) {
+  const p = i("OrLabel"), S = i("OrSelectMultipleControl"), V = i("OrSelectSingleControl"), s = i("OrIconButton"), g = i("OrIcon"), M = i("OrInput"), I = i("OrLoader"), P = i("OrCheckbox"), $ = i("OrMenuItem"), A = i("OrExpansionPanel"), c = i("OrPopover"), B = i("OrInputBox"), N = i("OrHint"), n = i("OrError"), le = pe("dropdown-open"), K = pe("dropdown-close");
+  return r(), O("div", {
     ref: "root",
     class: y(e.rootStyles)
   }, [
-    e.$slots.label || e.$slots.addon || e.label ? (n(), k(p, {
+    e.$slots.label || e.$slots.addon || e.label ? (r(), k(p, {
       key: 0,
       "control-id": e.controlId,
       variant: "input",
       required: e.required,
       disabled: e.disabled
     }, {
-      addon: b(() => [
+      addon: h(() => [
         C(e.$slots, "addon")
       ]),
-      default: b(() => [
+      default: h(() => [
         C(e.$slots, "label", {}, () => [
           T(E(e.label), 1)
         ])
       ]),
       _: 3
-    }, 8, ["control-id", "required", "disabled"])) : j("", !0),
-    N((n(), k(B, {
+    }, 8, ["control-id", "required", "disabled"])) : W("", !0),
+    z((r(), k(B, {
       ref: "inputBox",
       class: y(["interactivity-click", [e.popoverState === "open" && (e.popover && e.popover.isFlipped ? "rounded-t-0" : "rounded-b-0"), { "outline-none": e.variant === "embedded" }]]),
       variant: e.variant,
@@ -824,8 +832,8 @@ function zo(e, o, w, f, v, u) {
       "force-state": e.isOpen ? "focus-within" : void 0,
       tabindex: e.disabled ? null : 0
     }, {
-      default: b(() => [
-        z("div", {
+      default: h(() => [
+        q("div", {
           id: e.controlId,
           ref: "control",
           class: y(e.controlStyles),
@@ -834,7 +842,7 @@ function zo(e, o, w, f, v, u) {
           onBlur: o[4] || (o[4] = (t) => e.$emit("blur", t))
         }, [
           C(e.$slots, "valueTemplate", { model: e.proxyModelValue }, () => [
-            e.multiple ? (n(), k(h, {
+            e.multiple ? (r(), k(S, {
               key: 0,
               ref: "multipleControl",
               modelValue: e.searchText,
@@ -849,11 +857,11 @@ function zo(e, o, w, f, v, u) {
               "is-open": e.popoverState === "open",
               onReset: o[1] || (o[1] = (t) => e.deselectOption(t))
             }, {
-              tag: b(({ item: t }) => [
+              tag: h(({ item: t }) => [
                 C(e.$slots, "tag", { item: t })
               ]),
               _: 3
-            }, 8, ["modelValue", "model", "options", "overflow", "placeholder", "readonly", "disabled", "enable-search", "is-open"])) : (n(), k(O, {
+            }, 8, ["modelValue", "model", "options", "overflow", "placeholder", "readonly", "disabled", "enable-search", "is-open"])) : (r(), k(V, {
               key: 1,
               ref: "singleControl",
               modelValue: e.searchText,
@@ -867,16 +875,16 @@ function zo(e, o, w, f, v, u) {
             }, null, 8, ["modelValue", "model", "options", "placeholder", "disabled", "enable-search", "is-open"]))
           ])
         ], 42, Ro),
-        z("div", Do, [
-          e.showClear ? (n(), k(s, {
+        q("div", Do, [
+          e.showClear ? (r(), k(s, {
             key: 0,
             icon: "close",
             color: "inherit",
             "additional-styles": ["!text-outline", "!dark:text-outline-dark"],
             disabled: e.readonly || e.disabled,
             onClick: o[5] || (o[5] = Y((t) => e.$emit("update:modelValue", e.multiple ? [] : void 0), ["stop"]))
-          }, null, 8, ["disabled"])) : j("", !0),
-          N(L(S, {
+          }, null, 8, ["disabled"])) : W("", !0),
+          z(L(g, {
             icon: e.popoverState === "open" ? e.enableSearch ? "search" : "arrow_drop_up" : "arrow_drop_down",
             class: y(e.popoverState === "open" && e.enableSearch ? "!text-outline !dark:text-outline-dark" : ""),
             variant: "outlined"
@@ -893,11 +901,11 @@ function zo(e, o, w, f, v, u) {
           "full-width": !0,
           "disable-default-styles": !0
         }, {
-          default: b(() => [
-            z("div", {
+          default: h(() => [
+            q("div", {
               class: y(e.dropdownStyles)
             }, [
-              e.popoverState === "open" && e.enableSearch && e.isMobile ? (n(), k(M, {
+              e.popoverState === "open" && e.enableSearch && e.isMobile ? (r(), k(M, {
                 key: 0,
                 ref: "searchControl",
                 modelValue: e.searchText,
@@ -905,11 +913,11 @@ function zo(e, o, w, f, v, u) {
                 class: y(e.searchControlStyles),
                 type: "search",
                 placeholder: e.placeholder
-              }, null, 8, ["modelValue", "class", "placeholder"])) : j("", !0),
-              z("div", {
+              }, null, 8, ["modelValue", "class", "placeholder"])) : W("", !0),
+              q("div", {
                 class: y(e.dropdownContainerStyles)
               }, [
-                e.loading ? (n(), g("div", Fo, [
+                e.loading ? (r(), O("div", Fo, [
                   C(e.$slots, "loading", {}, () => [
                     L(I, {
                       class: y(e.loaderStyles),
@@ -917,26 +925,26 @@ function zo(e, o, w, f, v, u) {
                       text: e.loadingText
                     }, null, 8, ["class", "text"])
                   ])
-                ])) : e.resolvedSearchOptions.length > 0 ? (n(), g(F, { key: 1 }, [
-                  e.groupByFunction ? (n(!0), g(F, { key: 0 }, H(e.groupedOptions, (t, R) => (n(), k(U, {
+                ])) : e.resolvedSearchOptions.length > 0 ? (r(), O(F, { key: 1 }, [
+                  e.groupByFunction ? (r(!0), O(F, { key: 0 }, j(e.groupedOptions, (t, R) => (r(), k(A, {
                     key: R,
                     label: R
                   }, {
-                    default: b(() => [
-                      e.multiple ? (n(!0), g(F, { key: 0 }, H(t, (d, D) => (n(), k($, {
+                    default: h(() => [
+                      e.multiple ? (r(!0), O(F, { key: 0 }, j(t, (d, D) => (r(), k($, {
                         key: D,
                         "tooltip-text": d.label,
                         selected: e.proxyModelValue && e.proxyModelValue.includes(d.value),
                         disabled: d.disabled
                       }, {
-                        default: b(() => [
+                        default: h(() => [
                           C(e.$slots, "optionTemplate", {
                             model: e.proxyModelValue,
                             option: d
                           }, () => [
                             L(P, {
                               modelValue: e.proxyModelValue,
-                              "onUpdate:modelValue": o[7] || (o[7] = (K) => e.proxyModelValue = K),
+                              "onUpdate:modelValue": o[7] || (o[7] = (Q) => e.proxyModelValue = Q),
                               value: d.value,
                               label: d.label,
                               "label-variant": "menu-item",
@@ -945,15 +953,15 @@ function zo(e, o, w, f, v, u) {
                           ])
                         ]),
                         _: 2
-                      }, 1032, ["tooltip-text", "selected", "disabled"]))), 128)) : (n(!0), g(F, { key: 1 }, H(t, (d, D) => (n(), k($, {
+                      }, 1032, ["tooltip-text", "selected", "disabled"]))), 128)) : (r(!0), O(F, { key: 1 }, j(t, (d, D) => (r(), k($, {
                         key: D,
                         class: y(e.dropdownItemStyles),
                         "tooltip-text": d.label,
                         selected: e.proxyModelValue === d.value,
                         disabled: d.disabled,
-                        onClick: Y((K) => e.selectOption(d.value), ["stop"])
+                        onClick: Y((Q) => e.selectOption(d.value), ["stop"])
                       }, {
-                        default: b(() => [
+                        default: h(() => [
                           C(e.$slots, "optionTemplate", {
                             model: e.proxyModelValue,
                             option: d
@@ -965,24 +973,25 @@ function zo(e, o, w, f, v, u) {
                       }, 1032, ["class", "tooltip-text", "selected", "disabled", "onClick"]))), 128))
                     ]),
                     _: 2
-                  }, 1032, ["label"]))), 128)) : (n(), g(F, { key: 1 }, [
-                    e.multiple ? (n(!0), g(F, { key: 0 }, H(e.resolvedSearchOptions, (t, R) => (n(), k($, {
+                  }, 1032, ["label"]))), 128)) : (r(), O(F, { key: 1 }, [
+                    e.multiple ? (r(!0), O(F, { key: 0 }, j(e.resolvedSearchOptions, (t, R) => (r(), k($, {
                       key: R,
                       "tooltip-text": t.label,
                       class: y(e.dropdownItemStyles),
                       selected: e.proxyModelValue && e.proxyModelValue.includes(t.value),
                       disabled: t.disabled,
+                      "data-value": t.value,
                       onClick: Y((d) => !t.disabled && e.toggleOption(t.value), ["stop"])
                     }, {
-                      default: b(() => [
+                      default: h(() => [
                         L(P, {
                           "model-value": e.proxyModelValue,
                           value: t.value,
                           "label-variant": "menu-item",
                           disabled: t.disabled
                         }, {
-                          default: b(() => [
-                            z("div", {
+                          default: h(() => [
+                            q("div", {
                               onClick: (d) => !t.disabled && e.toggleOption(t.value)
                             }, [
                               C(e.$slots, "optionTemplate", {
@@ -991,23 +1000,24 @@ function zo(e, o, w, f, v, u) {
                               }, () => [
                                 T(E(t.label), 1)
                               ])
-                            ], 8, Uo)
+                            ], 8, Ao)
                           ]),
                           _: 2
                         }, 1032, ["model-value", "value", "disabled"])
                       ]),
                       _: 2
-                    }, 1032, ["tooltip-text", "class", "selected", "disabled", "onClick"]))), 128)) : (n(!0), g(F, { key: 1 }, H(e.resolvedSearchOptions, (t, R) => (n(), k($, {
+                    }, 1032, ["tooltip-text", "class", "selected", "disabled", "data-value", "onClick"]))), 128)) : (r(!0), O(F, { key: 1 }, j(e.resolvedSearchOptions, (t, R) => (r(), k($, {
                       key: R,
                       class: y(e.dropdownItemStyles),
                       selected: e.proxyModelValue === t.value,
                       "tooltip-text": t.label,
+                      "data-value": t.value,
                       disabled: t.disabled,
                       onClick: Y((d) => {
                         e.selectOption(t.value), e.close();
                       }, ["stop"])
                     }, {
-                      default: b(() => [
+                      default: h(() => [
                         C(e.$slots, "optionTemplate", {
                           model: e.proxyModelValue,
                           option: t
@@ -1016,9 +1026,9 @@ function zo(e, o, w, f, v, u) {
                         ])
                       ]),
                       _: 2
-                    }, 1032, ["class", "selected", "tooltip-text", "disabled", "onClick"]))), 128))
+                    }, 1032, ["class", "selected", "tooltip-text", "data-value", "disabled", "onClick"]))), 128))
                   ], 64))
-                ], 64)) : (n(), g("div", {
+                ], 64)) : (r(), O("div", {
                   key: 2,
                   class: y(e.noSearchResultsStyles)
                 }, [
@@ -1035,13 +1045,13 @@ function zo(e, o, w, f, v, u) {
       _: 3
     }, 8, ["class", "variant", "size", "invalid", "readonly", "disabled", "force-state", "tabindex"])), [
       [le, e.toggle],
-      [J, e.close]
+      [K, e.close]
     ]),
-    e.$slots.hint || e.hint ? N((n(), k(q, {
+    e.$slots.hint || e.hint ? z((r(), k(N, {
       key: 1,
       disabled: e.disabled
     }, {
-      default: b(() => [
+      default: h(() => [
         C(e.$slots, "hint", {}, () => [
           T(E(e.hint), 1)
         ])
@@ -1049,9 +1059,9 @@ function zo(e, o, w, f, v, u) {
       _: 3
     }, 8, ["disabled"])), [
       [x, !e.error]
-    ]) : j("", !0),
-    N(L(r, { disabled: e.disabled }, {
-      default: b(() => [
+    ]) : W("", !0),
+    z(L(n, { disabled: e.disabled }, {
+      default: h(() => [
         T(E(e.error), 1)
       ]),
       _: 1
@@ -1060,8 +1070,8 @@ function zo(e, o, w, f, v, u) {
     ])
   ], 2);
 }
-const sl = /* @__PURE__ */ G(Lo, [["render", zo]]);
+const sl = /* @__PURE__ */ J(Lo, [["render", Uo]]);
 export {
   sl as O
 };
-//# sourceMappingURL=OrSelect-DU7MIxsd.mjs.map
+//# sourceMappingURL=OrSelect-DPoXgLko.mjs.map