@ironsource/shared-ui 2.1.7-test.7 → 2.1.7-test.9

package/components/dropdown/v4/OptionV4.vue2.js

@@ -1,27 +1,28 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_b6a06f00_lang.css"; import { defineComponent as B, ref as z, computed as V, openBlock as n, createBlock as y, unref as i, withCtx as d, createElementVNode as l, normalizeClass as T, createCommentVNode as o, createElementBlock as a, renderSlot as r, createVNode as s, toDisplayString as v, createTextVNode as h, withModifiers as L } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_77509f61_lang.css"; import { defineComponent as V, ref as x, watch as M, openBlock as i, createBlock as g, unref as o, withCtx as u, createElementVNode as s, normalizeClass as m, createCommentVNode as n, createElementBlock as l, renderSlot as f, createVNode as c, toDisplayString as k, createTextVNode as b, withModifiers as K } from "vue";
 import "../../typography/Heading.vue.js";
-import N from "../../typography/Text.vue.js";
-import O from "../../checkbox/v4/CheckboxV4.vue.js";
-import g from "../../icon/v4/IconV4.vue.js";
+import S from "../../typography/Text.vue.js";
+import L from "../../checkbox/v4/CheckboxV4.vue.js";
+import y from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import { NOOP as P } from "@vue/shared";
-import { optionCommon as S } from "../common/Option.common.js";
-import x from "../../typography/v4/Typography.vue.js";
-import E from "../../tooltip/v4/TooltipV4.vue.js";
-import { isElementTruncated as j } from "../../../utils/text.js";
-const M = {
+import { NOOP as N } from "@vue/shared";
+import { optionCommon as j } from "../common/Option.common.js";
+import w from "../../typography/v4/Typography.vue.js";
+import R from "../../tooltip/v4/TooltipV4.vue.js";
+import { isElementTruncated as A } from "../../../utils/text.js";
+import { promiseTimeout as D } from "@vueuse/core";
+const q = {
   key: 1,
   class: "image"
-}, R = ["src"], A = {
+}, F = ["src"], G = {
   key: 2,
   class: "start-icon"
-}, D = { class: "main-text" }, q = {
+}, H = { class: "main-text" }, J = {
   key: 0,
   class: "caption-text"
-}, F = {
+}, Q = {
   key: 3,
   class: "end-icon"
-}, G = { key: 0 }, ie = /* @__PURE__ */ B({
+}, U = ["onClick"], W = { key: 0 }, ce = /* @__PURE__ */ V({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -38,122 +39,144 @@ const M = {
     endIconKey: { default: null },
     endIconType: { default: "regular" },
     toolTipPlacement: { default: "right" },
+    treeMainOption: { type: Boolean, default: !1 },
+    treeMainOptionExpanded: { type: Boolean, default: !1 },
+    stopOptionClickEventPropagation: { type: Boolean, default: !1 },
     optionTwoLinesVariant: { default: void 0 },
-    optionTwoLinesKey: { default: void 0 }
+    optionTwoLinesKey: { default: void 0 },
+    treeChildShown: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const k = e, { selected: u, isMulti: m, id: p, onClick: I, api: b } = S(k), f = z(null), C = V(
-      () => f.value && j(f.value)
-    ), $ = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : C.value ? t[k.nameKey] : "", w = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
-    return (t, c) => (n(), y(i(E), {
-      text: $(e.option),
-      "test-id": w(e.option),
+  emits: ["toggleTreeCollapse"],
+  setup(e, { emit: I }) {
+    const a = e, { selected: p, isMulti: T, id: B, onClick: O, api: v } = j(a), $ = (t) => {
+      a.stopOptionClickEventPropagation && t.stopPropagation(), a.disabled ? N() : O(t);
+    }, d = x(null), h = x(!1);
+    M([() => a.treeChildShown, d], async () => {
+      await D(100), h.value = d.value && A(d.value);
+    });
+    const z = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : h.value ? t[a.nameKey] : "", E = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, P = () => {
+      I("toggleTreeCollapse", a.option);
+    };
+    return (t, r) => (i(), g(o(R), {
+      text: z(e.option),
+      "test-id": E(e.option),
       placement: e.toolTipPlacement,
       class: "tooltip-option"
     }, {
-      default: d(() => [
-        l("div", {
+      default: u(() => [
+        s("div", {
           ref: "el",
-          class: T(["item-container", {
+          class: m(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
-            "item-container--selected": i(u),
-            "item-container--multi": i(m)
+            "item-container--selected": o(p),
+            "item-container--multi": o(T)
           }])
         }, [
-          l("div", {
-            class: T(["item", {
-              "item--multi": i(m),
+          s("div", {
+            class: m(["item", {
+              "item--multi": o(T),
               "item--with-icon": t.$slots["icon-start"] || t.$slots.image
             }])
           }, [
-            i(m) ? (n(), y(i(O), {
+            o(T) ? (i(), g(o(L), {
               key: 0,
-              id: i(p).toString(),
+              id: o(B).toString(),
               tabindex: "-1",
               class: "checkbox",
-              "is-checked": i(u),
+              "is-checked": o(p),
               "is-indeterminate": e.isIndeterminate,
-              onClick: c[0] || (c[0] = (K) => e.disabled ? i(P)() : i(I)(K))
-            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : o("", !0),
-            t.$slots.image || e.imageKey ? (n(), a("div", M, [
-              r(t.$slots, "image", {}, () => [
-                e.imageKey ? (n(), a("img", {
+              onClick: r[0] || (r[0] = (C) => $(C))
+            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : n("", !0),
+            t.$slots.image || e.imageKey ? (i(), l("div", q, [
+              f(t.$slots, "image", {}, () => [
+                e.imageKey ? (i(), l("img", {
                   key: 0,
                   src: e.option[e.imageKey]
-                }, null, 8, R)) : o("", !0)
+                }, null, 8, F)) : n("", !0)
               ], !0)
-            ])) : o("", !0),
-            t.$slots["icon-start"] || e.iconKey ? (n(), a("div", A, [
-              r(t.$slots, "icon-start", {}, () => [
-                s(i(g), {
+            ])) : n("", !0),
+            t.$slots["icon-start"] || e.iconKey ? (i(), l("div", G, [
+              f(t.$slots, "icon-start", {}, () => [
+                c(o(y), {
                   type: e.iconType,
                   name: e.option[e.iconKey],
                   size: e.iconType === "regular" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
-            ])) : o("", !0),
-            l("div", {
+            ])) : n("", !0),
+            s("div", {
               ref_key: "textContainerRef",
-              ref: f,
+              ref: d,
               class: "text-container"
             }, [
-              s(i(x), {
+              c(o(w), {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: d(() => [
-                  r(t.$slots, "default", {}, () => [
-                    l("div", {
-                      class: T(`option-content-${e.optionTwoLinesVariant || "horizontal"}`)
+                default: u(() => [
+                  f(t.$slots, "default", {}, () => [
+                    s("div", {
+                      class: m(`option-content-${e.optionTwoLinesVariant || "horizontal"}`)
                     }, [
-                      l("div", D, v(e.option[e.nameKey]), 1),
-                      e.optionTwoLinesKey ? (n(), a("div", q, [
-                        s(i(x), { variant: "caption" }, {
-                          default: d(() => [
-                            h(v(e.option[e.optionTwoLinesKey]), 1)
+                      s("div", H, k(e.option[e.nameKey]), 1),
+                      e.optionTwoLinesKey ? (i(), l("div", J, [
+                        c(o(w), { variant: "caption" }, {
+                          default: u(() => [
+                            b(k(e.option[e.optionTwoLinesKey]), 1)
                           ]),
                           _: 1
                         })
-                      ])) : o("", !0)
+                      ])) : n("", !0)
                     ], 2)
                   ], !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (n(), y(i(N), {
+              e.subtitle ? (i(), g(o(S), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: d(() => [
-                  h(v(e.subtitle), 1)
+                default: u(() => [
+                  b(k(e.subtitle), 1)
                 ]),
                 _: 1
-              })) : o("", !0)
+              })) : n("", !0)
             ], 512),
-            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), a("div", F, [
-              r(t.$slots, "icon-end", {}, () => [
-                s(i(g), {
+            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (i(), l("div", Q, [
+              f(t.$slots, "icon-end", {}, () => [
+                c(o(y), {
                   type: e.endIconType,
                   name: e.option[e.endIconKey],
                   size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
-            ])) : o("", !0)
+            ])) : n("", !0),
+            e.treeMainOption ? (i(), l("div", {
+              key: 4,
+              class: "tree-main-arrow-wrapper",
+              onClick: K(P, ["stop"])
+            }, [
+              c(o(y), {
+                name: "caret-down",
+                size: "16px",
+                class: m(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
+              }, null, 8, ["class"])
+            ], 8, U)) : n("", !0)
           ], 2),
-          i(b).clearable && i(u) ? (n(), a("div", G, [
-            l("button", {
+          o(v).clearable && o(p) ? (i(), l("div", W, [
+            s("button", {
               class: "clear-button",
-              onClick: c[1] || (c[1] = L((K) => i(b).clearSelection(), ["prevent", "stop"]))
+              onClick: r[1] || (r[1] = K((C) => o(v).clearSelection(), ["prevent", "stop"]))
             }, [
-              s(i(g), {
+              c(o(y), {
                 name: "close",
                 width: "8",
                 height: "8"
               })
             ])
-          ])) : o("", !0)
+          ])) : n("", !0)
         ], 2)
       ]),
       _: 3
@@ -161,5 +184,5 @@ const M = {
   }
 });
 export {
-  ie as default
+  ce as default
 };

package/components/dropdown/v4/TreeDropdown.vue.d.ts

@@ -1,23 +1,23 @@
-import { IconTypes } from '@is-ssp/icon/v4/Icon.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     selected?: unknown[];
     isOpen?: boolean;
     placeholder?: string;
     inlineSearchPlaceholder?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     testId?: string;
     displayValue: (option: unknown) => string;
     optionNameKey?: string;
     optionIconKey?: string;
     optionImageKey?: string;
-    optionIconType?: IconTypes;
+    optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey?: string;
-    optionEndIconType?: IconTypes;
+    optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy?: string;
     disabledOptionKey?: string;
-    optionChildrenKey?: string;
+    optionChildrenKey: string;
+    optionUniqueIdKey: string;
 }>, {
     selected: any;
     placeholder: string;
@@ -33,7 +33,6 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionEndIconType: any;
     valueToCopy: any;
     disabledOptionKey: string;
-    optionChildrenKey: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: unknown) => void;
     "update:isOpen": (value: unknown) => void;
@@ -43,19 +42,20 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     isOpen?: boolean;
     placeholder?: string;
     inlineSearchPlaceholder?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     testId?: string;
     displayValue: (option: unknown) => string;
     optionNameKey?: string;
     optionIconKey?: string;
     optionImageKey?: string;
-    optionIconType?: IconTypes;
+    optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey?: string;
-    optionEndIconType?: IconTypes;
+    optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy?: string;
     disabledOptionKey?: string;
-    optionChildrenKey?: string;
+    optionChildrenKey: string;
+    optionUniqueIdKey: string;
 }>, {
     selected: any;
     placeholder: string;
@@ -71,13 +71,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionEndIconType: any;
     valueToCopy: any;
     disabledOptionKey: string;
-    optionChildrenKey: string;
 }>>> & {
     "onUpdate:selected"?: (value: unknown) => any;
     "onUpdate:isOpen"?: (value: unknown) => any;
 }, {
     disabled: boolean;
-    size: 'small' | 'medium' | 'large';
+    size: "small" | "medium" | "large";
     testId: string;
     selected: unknown[];
     placeholder: string;
@@ -85,12 +84,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     optionIconKey: string;
     optionImageKey: string;
-    optionIconType: IconTypes;
+    optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey: string;
-    optionEndIconType: IconTypes;
+    optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy: string;
     disabledOptionKey: string;
-    optionChildrenKey: string;
+}>, {
+    "trigger-end-icon"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -110,3 +110,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/v4/TreeDropdown.vue.js

@@ -1,7 +1,7 @@
-import o from "./TreeDropdown.vue2.js";
-/* empty css                   */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_142eab98_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-142eab98"]]);
+import e from "./TreeDropdown.vue2.js";
+/* empty css                   */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_5efe563d_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-5efe563d"]]);
 export {
   s as default
 };

package/components/dropdown/v4/TreeDropdown.vue2.js

@@ -1,18 +1,19 @@
- import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_142eab98_lang.css"; import { defineComponent as w, ref as S, watch as T, openBlock as u, createBlock as f, unref as o, withCtx as E, createVNode as N, withModifiers as k, createElementBlock as h, Fragment as B, renderList as x, createCommentVNode as z } from "vue";
-import V from "./DropdownV4.vue.js";
-import "./DefaultDropdownTrigger.vue.js";
+ import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_5efe563d_lang.css"; import { defineComponent as $, provide as j, ref as r, onMounted as F, watch as C, openBlock as v, createBlock as T, unref as a, withCtx as m, createVNode as k, normalizeProps as R, guardReactiveProps as G, renderSlot as H, withModifiers as U, createElementBlock as q, withDirectives as J, createElementVNode as Q, Fragment as W, renderList as X, vShow as Y, createCommentVNode as Z } from "vue";
+import _ from "./DropdownV4.vue.js";
+import ee from "./DefaultDropdownTrigger.vue.js";
 import "./IconButtonDropdownTrigger.vue.js";
 import "./ChipDropdownTrigger.vue.js";
 import "./AppDropdownTrigger.vue.js";
 import "./ButtonDropdownTrigger.vue.js";
 import "./ButtonFilterDropdownTrigger.vue.js";
 import "./TreeDropdown.vue.js";
-import v from "./OptionV4.vue.js";
-import { useChildOptions as D } from "../composables/useChildOptions.js";
-const P = {
+import N from "./OptionV4.vue.js";
+import { useChildOptions as ne } from "../composables/useChildOptions.js";
+import le from "../../search/v4/SearchV4.vue.js";
+const oe = {
   key: 0,
   class: "child-options"
-}, Q = /* @__PURE__ */ w({
+}, ve = /* @__PURE__ */ $({
   __name: "TreeDropdown",
   props: {
     options: null,
@@ -32,91 +33,178 @@ const P = {
     optionEndIconType: { default: null },
     valueToCopy: { default: null },
     disabledOptionKey: { default: "disabled" },
-    optionChildrenKey: { default: "" }
+    optionChildrenKey: null,
+    optionUniqueIdKey: null
   },
   emits: ["update:selected", "update:isOpen"],
-  setup(e, { emit: y }) {
-    const a = e, l = S(a.selected);
-    T(
-      () => a.selected,
+  setup(o, { emit: I }) {
+    const l = o;
+    j("isTreeDropdown", !0);
+    const f = r([]), h = r([]), w = r({}), O = r(!1), i = r(l.selected), u = r("");
+    F(() => {
+      O.value || (l.options.forEach((n) => {
+        n[l.optionChildrenKey] && n[l.optionChildrenKey].length && (w.value[n[l.optionUniqueIdKey]] = [
+          ...n[l.optionChildrenKey]
+        ]);
+      }), f.value = [...l.options], h.value = [...l.options], O.value = !0);
+    }), C(
+      () => l.selected,
       () => {
-        l.value = [...a.selected];
+        i.value = [...l.selected];
       }
     );
-    const { hasChildren: c, getChildren: d, allChildrenSelected: r, someChildrenSelected: K } = D(l, a.optionChildrenKey), p = (n) => {
-      if (c(n)) {
-        r(n) ? l.value = l.value.filter(
-          (i) => !d(n).includes(i)
-        ) : l.value = [
-          ...l.value.filter((i) => !d(n).includes(i)),
-          ...d(n)
+    const { hasChildren: p, getChildren: y, allChildrenSelected: K, someChildrenSelected: V } = ne(i, l.optionChildrenKey), S = (n) => {
+      if (p(n)) {
+        K(n) ? i.value = i.value.filter(
+          (t) => !y(n).includes(t)
+        ) : i.value = [
+          ...i.value.filter((t) => !y(n).includes(t)),
+          ...y(n)
         ];
         return;
       }
-      l.value.includes(n) ? l.value = l.value.filter(
-        (i) => i !== n
-      ) : l.value = [...l.value, n];
-    }, m = (n) => l.value.includes(n), C = (n) => 1 + (c(n) ? d(n).length : 0), I = () => {
-      y("update:selected", l.value);
-    }, g = () => {
-      l.value = [];
+      i.value.includes(n) ? i.value = i.value.filter(
+        (t) => t !== n
+      ) : i.value = [...i.value, n];
+    }, b = (n) => i.value.includes(n), z = (n) => 1 + (p(n) ? y(n).length : 0), D = () => {
+      I("update:selected", i.value);
+    }, x = () => {
+      i.value = [];
+    }, B = () => {
+      const n = /* @__PURE__ */ new Set([]);
+      h.value.forEach((e) => {
+        if (l.selected?.includes(e))
+          n.add(e);
+        else if (e[l.optionChildrenKey] && e[l.optionChildrenKey].length) {
+          for (const s of e[l.optionChildrenKey])
+            if (l.selected?.includes(s)) {
+              n.add(e);
+              break;
+            }
+        }
+      });
+      const t = Array.from(n);
+      return h.value.forEach((e) => {
+        !l.selected.includes(e) && !n.has(e) && t.push(e);
+      }), t;
     };
-    return (n, i) => (u(), f(o(V), {
+    C(
+      () => l.isOpen,
+      () => {
+        l.isOpen ? f.value = B() : (i.value = [...l.selected], u.value = "");
+      }
+    );
+    const d = r({}), M = (n) => {
+      d.value[n[l.optionUniqueIdKey]] ? delete d.value[n[l.optionUniqueIdKey]] : d.value[n[l.optionUniqueIdKey]] = 1;
+    };
+    function P(n, t) {
+      const e = n.toLowerCase(), s = [];
+      return t.value.forEach((c) => {
+        const g = c[l.optionNameKey].toLowerCase().includes(e), E = w.value[c[l.optionUniqueIdKey]]?.filter(
+          (L) => L[l.optionNameKey].toLowerCase().includes(e)
+        ) || [];
+        (g || E.length > 0) && (c[l.optionChildrenKey] = E, s.push(c));
+      }), s;
+    }
+    const A = (n) => {
+      const t = P(n, h);
+      n && (Object.keys(d.value).forEach((e) => {
+        delete d.value[e];
+      }), t.forEach((e) => {
+        Array.isArray(e[l.optionChildrenKey]) && e[l.optionChildrenKey].length && (d.value[e[l.optionUniqueIdKey]] = 1);
+      })), f.value = t;
+    };
+    return C(
+      () => u.value,
+      () => {
+        A(u.value);
+      }
+    ), (n, t) => (v(), T(a(_), {
       multi: "",
       class: "tree-dropdown",
       "show-select-all": !1,
-      "is-open": e.isOpen,
-      options: e.options,
-      selected: e.selected,
-      "display-value": e.displayValue,
-      placeholder: e.placeholder,
-      "inline-search-placeholder": e.inlineSearchPlaceholder,
-      "option-name-key": e.optionNameKey,
-      size: e.size,
-      "test-id": e.testId,
-      disabled: e.disabled,
+      "is-open": o.isOpen,
+      options: f.value,
+      selected: o.selected,
+      "display-value": o.displayValue,
+      placeholder: o.placeholder,
+      "inline-search": "",
+      "inline-search-placeholder": o.inlineSearchPlaceholder,
+      "option-name-key": o.optionNameKey,
+      size: o.size,
+      "test-id": o.testId,
+      disabled: o.disabled,
       "disable-virtual-scroll": "",
-      "override-option-count-calculation": C,
+      "override-option-count-calculation": z,
       "trigger-show-all-selected-text": !1,
-      "onUpdate:selected": i[0] || (i[0] = (t) => y("update:selected", t)),
-      "onUpdate:isOpen": i[1] || (i[1] = (t) => y("update:isOpen", t)),
-      onApply: I,
-      onClear: g
+      "predefined-trigger": "default",
+      "onUpdate:isOpen": t[1] || (t[1] = (e) => I("update:isOpen", e)),
+      onApply: D,
+      onClear: x
     }, {
-      default: E(({ option: t, index: b }) => [
-        N(o(v), {
-          option: t,
-          "selected-prop": o(c)(t) ? o(r)(t) : m(t),
-          "is-indeterminate": !o(r)(t) && o(K)(t),
-          disabled: t[e.disabledOptionKey],
-          "name-key": e.optionNameKey,
-          "image-key": e.optionImageKey,
-          "icon-key": e.optionIconKey,
-          "icon-type": e.optionIconType,
-          "end-icon-key": e.optionEndIconKey,
-          "end-icon-type": e.optionEndIconType,
-          onClick: k(() => p(t), ["stop"])
-        }, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "onClick"]),
-        o(c)(t) ? (u(), h("div", P, [
-          (u(!0), h(B, null, x(o(d)(t), (s, O) => (u(), f(o(v), {
-            key: `${b}-${O}`,
-            option: s,
-            "selected-prop": m(s),
-            disabled: s[e.disabledOptionKey],
-            "name-key": e.optionNameKey,
-            "image-key": e.optionImageKey,
-            "icon-key": e.optionIconKey,
-            "icon-type": e.optionIconType,
-            "end-icon-key": e.optionEndIconKey,
-            "end-icon-type": e.optionEndIconType,
-            onClick: k(() => p(s), ["stop"])
-          }, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "onClick"]))), 128))
-        ])) : z("", !0)
+      "dropdown-trigger": m(({ defaultTriggerProps: e }) => [
+        k(a(ee), R(G(e)), {
+          "end-icon": m(() => [
+            H(n.$slots, "trigger-end-icon", {}, void 0, !0)
+          ]),
+          _: 2
+        }, 1040)
+      ]),
+      "inline-search": m(() => [
+        k(a(le), {
+          modelValue: u.value,
+          "onUpdate:modelValue": t[0] || (t[0] = (e) => u.value = e),
+          placeholder: o.inlineSearchPlaceholder,
+          variant: "transparent",
+          size: "md",
+          "auto-focus": "",
+          "test-id": o.testId
+        }, null, 8, ["modelValue", "placeholder", "test-id"])
+      ]),
+      default: m(({ option: e, index: s }) => [
+        k(a(N), {
+          option: e,
+          "selected-prop": a(p)(e) ? a(K)(e) : b(e),
+          "is-indeterminate": !a(K)(e) && a(V)(e),
+          disabled: e[o.disabledOptionKey],
+          "name-key": o.optionNameKey,
+          "image-key": o.optionImageKey,
+          "icon-key": o.optionIconKey,
+          "icon-type": o.optionIconType,
+          "end-icon-key": o.optionEndIconKey,
+          "end-icon-type": o.optionEndIconType,
+          "tree-main-option": a(p)(e),
+          "tree-main-option-expanded": d.value[e[o.optionUniqueIdKey]],
+          "stop-option-click-event-propagation": "",
+          onClick: U(() => S(e), ["stop"]),
+          onToggleTreeCollapse: M
+        }, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-main-option", "tree-main-option-expanded", "onClick"]),
+        a(p)(e) ? (v(), q("div", oe, [
+          J(Q("div", null, [
+            (v(!0), q(W, null, X(a(y)(e), (c, g) => (v(), T(a(N), {
+              key: `${s}-${g}`,
+              option: c,
+              "selected-prop": b(c),
+              disabled: c[o.disabledOptionKey],
+              "name-key": o.optionNameKey,
+              "image-key": o.optionImageKey,
+              "icon-key": o.optionIconKey,
+              "icon-type": o.optionIconType,
+              "end-icon-key": o.optionEndIconKey,
+              "end-icon-type": o.optionEndIconType,
+              "tree-child-shown": d.value[e[o.optionUniqueIdKey]],
+              "stop-option-click-event-propagation": "",
+              onClick: U(() => S(c), ["stop"])
+            }, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "tree-child-shown", "onClick"]))), 128))
+          ], 512), [
+            [Y, d.value[e[o.optionUniqueIdKey]]]
+          ])
+        ])) : Z("", !0)
       ]),
-      _: 1
+      _: 3
     }, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled"]));
   }
 });
 export {
-  Q as default
+  ve as default
 };