@ironsource/shared-ui 2.1.7 → 2.1.8-rc.1

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_1726ad49_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-1726ad49]{position:relative}.dropdown-trigger[data-v-1726ad49]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.25rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-1726ad49]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-1726ad49]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-1726ad49]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-1726ad49]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-1726ad49],.dropdown-trigger.disabled .caret-down[data-v-1726ad49]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-1726ad49]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-1726ad49]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-1726ad49]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-1726ad49],.dropdown-trigger.state-success[data-v-1726ad49],.dropdown-trigger.state-warning[data-v-1726ad49]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-1726ad49],.dropdown-trigger.state-success.small[data-v-1726ad49],.dropdown-trigger.state-warning.small[data-v-1726ad49]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-1726ad49],.dropdown-trigger.state-success.large[data-v-1726ad49],.dropdown-trigger.state-warning.large[data-v-1726ad49]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-1726ad49]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-1726ad49]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-1726ad49]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-1726ad49]{color:var(--action-active)}.content[data-v-1726ad49]{display:flex;flex:1;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-1726ad49]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-1726ad49]{width:20px;height:20px;flex:none}.content .image img[data-v-1726ad49]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-1726ad49]{display:flex;color:var(--action-active)}.content .status-dot[data-v-1726ad49]{padding-right:.25rem}.content .status-dot>div[data-v-1726ad49]{position:relative;top:-1px}.dropdown-field-label[data-v-1726ad49]{color:var(--text-primary)}.dropdown-field-help-text[data-v-1726ad49]{margin-top:4px;position:absolute}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css

@@ -0,0 +1 @@
+.child-options[data-v-a51b6929]{padding-left:1rem}

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

@@ -1,7 +1,7 @@
 import o from "./DefaultDropdownTrigger.vue2.js";
 /* empty css                             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_98819e5a_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-98819e5a"]]);
+// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_1726ad49_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-1726ad49"]]);
 export {
   p as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_98819e5a_lang.css"; import { defineComponent as O, computed as r, openBlock as o, createElementBlock as n, createBlock as k, createCommentVNode as d, createElementVNode as c, mergeProps as m, unref as l, renderSlot as u, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as w } from "vue";
+ import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_1726ad49_lang.css"; import { defineComponent as O, computed as r, openBlock as o, createElementBlock as n, createBlock as k, createCommentVNode as d, createElementVNode as c, mergeProps as m, unref as l, renderSlot as u, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as w } from "vue";
 import V from "../../typography/v4/Typography.vue.js";
 import { DropdownTestIdModifiers as p } from "../../../testids/index.js";
 import h from "../../icon/v4/IconV4.vue.js";

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_78ce1bbd_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-78ce1bbd"]]);
+// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a51b6929"]]);
 export {
   s as default
 };

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

@@ -1,19 +1,19 @@
- import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_78ce1bbd_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 "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_a51b6929_lang.css"; import { defineComponent as j, provide as F, ref as s, onMounted as R, watch as v, openBlock as m, createBlock as U, unref as a, withCtx as K, createVNode as k, normalizeProps as G, guardReactiveProps as H, createSlots as J, renderSlot as Q, withModifiers as q, createElementBlock as N, withDirectives as W, createElementVNode as X, Fragment as Y, renderList as Z, vShow as _, createCommentVNode as ee } from "vue";
+import ne from "./DropdownV4.vue.js";
+import le 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 N from "./OptionV4.vue.js";
-import { useChildOptions as ne } from "../composables/useChildOptions.js";
-import le from "../../search/v4/SearchV4.vue.js";
-const oe = {
+import z from "./OptionV4.vue.js";
+import { useChildOptions as oe } from "../composables/useChildOptions.js";
+import te from "../../search/v4/SearchV4.vue.js";
+const ie = {
   key: 0,
   class: "child-options"
-}, ve = /* @__PURE__ */ $({
+}, Ke = /* @__PURE__ */ j({
   __name: "TreeDropdown",
   props: {
     options: null,
@@ -39,23 +39,30 @@ const oe = {
   emits: ["update:selected", "update:isOpen"],
   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) => {
+    F("isTreeDropdown", !0);
+    const f = s([]), h = s([]), w = s({}), O = s(!1), i = s([...l.selected]), u = s(""), S = () => {
+      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(
+      }), f.value = [...l.options], h.value = [...l.options];
+    };
+    R(() => {
+      O.value || (S(), O.value = !0);
+    }), v(
+      () => l.options,
+      () => {
+        S();
+      }
+    ), v(
       () => l.selected,
       () => {
         i.value = [...l.selected];
       }
     );
-    const { hasChildren: p, getChildren: y, allChildrenSelected: K, someChildrenSelected: V } = ne(i, l.optionChildrenKey), S = (n) => {
+    const { hasChildren: p, getChildren: y, allChildrenSelected: g, someChildrenSelected: V } = oe(i, l.optionChildrenKey), b = (n) => {
       if (p(n)) {
-        K(n) ? i.value = i.value.filter(
+        g(n) ? i.value = i.value.filter(
           (t) => !y(n).includes(t)
         ) : i.value = [
           ...i.value.filter((t) => !y(n).includes(t)),
@@ -66,18 +73,18 @@ const oe = {
       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 = () => {
+    }, E = (n) => i.value.includes(n), D = (n) => 1 + (p(n) ? y(n).length : 0), B = () => {
       I("update:selected", i.value);
-    }, x = () => {
+    }, M = () => {
       i.value = [];
-    }, B = () => {
+    }, P = () => {
       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)) {
+          for (const r of e[l.optionChildrenKey])
+            if (l.selected?.includes(r)) {
               n.add(e);
               break;
             }
@@ -88,38 +95,38 @@ const oe = {
         !l.selected.includes(e) && !n.has(e) && t.push(e);
       }), t;
     };
-    C(
+    v(
       () => l.isOpen,
       () => {
-        l.isOpen ? f.value = B() : (i.value = [...l.selected], u.value = "");
+        l.isOpen ? f.value = P() : (i.value = [...l.selected], u.value = "");
       }
     );
-    const d = r({}), M = (n) => {
+    const d = s({}), x = (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 = [];
+    function A(n, t) {
+      const e = n.toLowerCase(), r = [];
       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)
+        const C = c[l.optionNameKey].toLowerCase().includes(e), T = w.value[c[l.optionUniqueIdKey]]?.filter(
+          ($) => $[l.optionNameKey].toLowerCase().includes(e)
         ) || [];
-        (g || E.length > 0) && (c[l.optionChildrenKey] = E, s.push(c));
-      }), s;
+        (C || T.length > 0) && (c[l.optionChildrenKey] = T, r.push(c));
+      }), r;
     }
-    const A = (n) => {
-      const t = P(n, h);
+    const L = (n) => {
+      const t = A(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(
+    return v(
       () => u.value,
       () => {
-        A(u.value);
+        L(u.value);
       }
-    ), (n, t) => (v(), T(a(_), {
+    ), (n, t) => (m(), U(a(ne), {
       multi: "",
       class: "tree-dropdown",
       "show-select-all": !1,
@@ -135,23 +142,26 @@ const oe = {
       "test-id": o.testId,
       disabled: o.disabled,
       "disable-virtual-scroll": "",
-      "override-option-count-calculation": z,
+      "override-option-count-calculation": D,
       "trigger-show-all-selected-text": !1,
       "predefined-trigger": "default",
       "onUpdate:isOpen": t[1] || (t[1] = (e) => I("update:isOpen", e)),
-      onApply: D,
-      onClear: x
+      onApply: B,
+      onClear: M
     }, {
-      "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)
+      "dropdown-trigger": K(({ defaultTriggerProps: e }) => [
+        k(a(le), G(H(e)), J({ _: 2 }, [
+          n.$slots["trigger-end-icon"] ? {
+            name: "end-icon",
+            fn: K(() => [
+              Q(n.$slots, "trigger-end-icon", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040)
       ]),
-      "inline-search": m(() => [
-        k(a(le), {
+      "inline-search": K(() => [
+        k(a(te), {
           modelValue: u.value,
           "onUpdate:modelValue": t[0] || (t[0] = (e) => u.value = e),
           placeholder: o.inlineSearchPlaceholder,
@@ -161,11 +171,11 @@ const oe = {
           "test-id": o.testId
         }, null, 8, ["modelValue", "placeholder", "test-id"])
       ]),
-      default: m(({ option: e, index: s }) => [
-        k(a(N), {
+      default: K(({ option: e, index: r }) => [
+        k(a(z), {
           option: e,
-          "selected-prop": a(p)(e) ? a(K)(e) : b(e),
-          "is-indeterminate": !a(K)(e) && a(V)(e),
+          "selected-prop": a(p)(e) ? a(g)(e) : E(e),
+          "is-indeterminate": !a(g)(e) && a(V)(e),
           disabled: e[o.disabledOptionKey],
           "name-key": o.optionNameKey,
           "image-key": o.optionImageKey,
@@ -176,15 +186,15 @@ const oe = {
           "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
+          onClick: q(() => b(e), ["stop"]),
+          onToggleTreeCollapse: x
         }, 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}`,
+        a(p)(e) ? (m(), N("div", ie, [
+          W(X("div", null, [
+            (m(!0), N(Y, null, Z(a(y)(e), (c, C) => (m(), U(a(z), {
+              key: `${r}-${C}`,
               option: c,
-              "selected-prop": b(c),
+              "selected-prop": E(c),
               disabled: c[o.disabledOptionKey],
               "name-key": o.optionNameKey,
               "image-key": o.optionImageKey,
@@ -194,17 +204,17 @@ const oe = {
               "end-icon-type": o.optionEndIconType,
               "tree-child-shown": d.value[e[o.optionUniqueIdKey]],
               "stop-option-click-event-propagation": "",
-              onClick: U(() => S(c), ["stop"])
+              onClick: q(() => b(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]]]
+            [_, d.value[e[o.optionUniqueIdKey]]]
           ])
-        ])) : Z("", !0)
+        ])) : ee("", !0)
       ]),
       _: 3
     }, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled"]));
   }
 });
 export {
-  ve as default
+  Ke as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.7",
+  "version": "2.1.8-rc.1",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_98819e5a_lang.css

@@ -1 +0,0 @@
-.default-dropdown-wrapper[data-v-98819e5a]{position:relative}.dropdown-trigger[data-v-98819e5a]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-98819e5a]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-98819e5a]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-98819e5a]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-98819e5a]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-98819e5a],.dropdown-trigger.disabled .caret-down[data-v-98819e5a]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-98819e5a]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-98819e5a]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-98819e5a]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-98819e5a],.dropdown-trigger.state-success[data-v-98819e5a],.dropdown-trigger.state-warning[data-v-98819e5a]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-98819e5a],.dropdown-trigger.state-success.small[data-v-98819e5a],.dropdown-trigger.state-warning.small[data-v-98819e5a]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-98819e5a],.dropdown-trigger.state-success.large[data-v-98819e5a],.dropdown-trigger.state-warning.large[data-v-98819e5a]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-98819e5a]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-98819e5a]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-98819e5a]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-98819e5a]{color:var(--action-active)}.content[data-v-98819e5a]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-98819e5a]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-98819e5a]{width:20px;height:20px;flex:none}.content .image img[data-v-98819e5a]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-98819e5a]{display:flex;color:var(--action-active)}.content .status-dot[data-v-98819e5a]{padding-right:.25rem}.content .status-dot>div[data-v-98819e5a]{position:relative;top:-1px}.dropdown-field-label[data-v-98819e5a]{color:var(--text-primary)}.dropdown-field-help-text[data-v-98819e5a]{margin-top:4px;position:absolute}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_78ce1bbd_lang.css

@@ -1 +0,0 @@
-.child-options[data-v-78ce1bbd]{padding-left:1rem}