@ironsource/shared-ui 2.0.0-test.9 → 2.0.1

package/components/dropdown/common/Dropdown.common.js

@@ -1,17 +1,17 @@
-import { useToggle as me } from "../../../composables/useToggle.js";
-import { ref as i, computed as r, watch as m, useSlots as ye, nextTick as w, toRaw as T, provide as Oe, onMounted as be } from "vue";
-import { isObjectInArray as X } from "../../../utils/array.js";
-import { objectsEqual as Pe } from "../../../utils/object.js";
-import { useClamp as Te, useVirtualList as Ae, onClickOutside as Se } from "@vueuse/core";
-import { Mode as y, Type as E, DropdownContext as we } from "./DropdownContext.js";
+import { useToggle as Oe } from "../../../composables/useToggle.js";
+import { ref as n, computed as r, watch as b, useSlots as Ae, nextTick as D, toRaw as x, provide as Pe, onMounted as Se } from "vue";
+import { isObjectInArray as z } from "../../../utils/array.js";
+import { objectsEqual as Te } from "../../../utils/object.js";
+import { useClamp as we, useVirtualList as xe, onClickOutside as J } from "@vueuse/core";
+import { Mode as m, Type as k, DropdownContext as De } from "./DropdownContext.js";
 import { pxToRem as Ie } from "../../../utils/style.js";
-const He = (l, O) => {
-  const q = (e, t) => l.multi ? X(e, t) : T(e) === t;
-  let p;
+const Ve = (l, O, A) => {
+  const Q = (e, t) => l.multi ? z(e, t) : x(e) === t;
+  let E;
   ((e) => {
     e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
-  })(p || (p = {}));
-  const a = i(
+  })(E || (E = {}));
+  const a = n(
     l.selected
   ), u = r({
     get() {
@@ -21,91 +21,91 @@ const He = (l, O) => {
       O("update:selected", e);
     }
   });
-  m(
+  b(
     () => l.selected,
     () => {
       a.value = l.selected;
     }
   );
-  const K = ye(), A = i(null), d = i(null), $ = i(null), I = i(null), R = i(null), D = i(null), j = i(null), z = i(null), J = 8, Q = r(() => D.value?.getBoundingClientRect().height + J + l.distance), c = i([]), b = i(-1), S = i(""), _ = i([]), k = () => D.value?.focus(), [v, W, Y] = me({
+  const W = Ae(), P = n(null), f = n(null), C = n(null), I = n(null), V = n(null), S = n(null), Y = n(), H = n(null), L = n(null), U = n(null), Z = 8, F = r(() => S.value ? S.value.getBoundingClientRect().height + Z + l.distance : 0), c = n([]), T = n(-1), w = n(""), M = n([]), p = () => S.value?.focus(), [v, ee, le] = Oe({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
-  m(
+  b(
     () => l.disabled,
     (e) => {
-      e !== void 0 && Y(e);
+      e !== void 0 && le(e);
     }
   );
-  const H = (e) => {
-    Z.value = W(e);
-  }, Z = r({
+  const B = (e) => {
+    te.value = ee(e);
+  }, te = r({
     get() {
       return l.isOpen;
     },
     set(e) {
       O("update:isOpen", e);
     }
-  }), F = r(() => s.value.length - 1), o = Te(0, 0, F), ee = r(() => u.value ? l.displayValue(u.value) : ""), le = (e) => {
+  }), ae = r(() => s.value.length - 1), o = we(0, 0, ae), ue = r(() => u.value ? l.displayValue(u.value) : ""), ne = (e) => {
     if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
       return l.placeholder;
     const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
     return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : t;
-  }, te = r(() => {
+  }, ie = r(() => {
     if (!l.multi)
       return u.value ? l.displayValue(u.value) : l.placeholder;
     if (Array.isArray(a.value))
-      return le(a);
-  }), L = r(() => {
+      return ne(a);
+  }), q = r(() => {
     if (Array.isArray(a.value))
       return a.value.length === s.value.length;
-  }), ae = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), x = (e) => {
-    S.value = e;
-  }, s = r(
-    () => l.options.filter((e) => l.onSearch(e, S.value))
-  ), ue = r(() => c.value[0]?.hasSubtitle), V = r(() => n.mode === y.Multi), C = r(
-    () => ue.value ? 48 : 34
+  }), re = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), N = (e) => {
+    w.value = e;
+  }, s = r(() => l.onSearch ? l.options.filter(
+    (e) => l.onSearch(e, w.value)
+  ) : l.options), oe = r(() => c.value[0]?.hasSubtitle), G = r(() => i.mode === m.Multi), K = r(
+    () => oe.value ? A.MULTILINE_LIST_HEIGHT : A.LIST_HEIGHT
   ), {
-    list: U,
-    containerProps: G,
-    wrapperProps: ne,
-    scrollTo: M
-  } = Ae(s, {
-    itemHeight: C.value
+    list: $,
+    containerProps: X,
+    wrapperProps: se,
+    scrollTo: R
+  } = xe(s, {
+    itemHeight: K.value
   });
-  m(
+  b(
     () => l.isOpen,
     (e) => {
-      H(e);
+      B(e);
     }
-  ), m([b], async () => {
-    await w();
-  }), m(
-    [v, o, b],
+  ), b([T], async () => {
+    await D();
+  }), b(
+    [v, o, T],
     async ([e], [t]) => {
-      v.value && (await w(), b.value !== -1 && e !== t && setTimeout(() => {
-        M(b.value);
+      v.value && (await D(), T.value !== -1 && e !== t && setTimeout(() => {
+        R(T.value);
       }), o.value && setTimeout(() => {
-        M(o.value);
+        R(o.value);
       }));
     }
   );
-  const f = (e, t = !1) => {
-    l.disabled || (H(e), w(() => {
-      v.value && O("opened"), v.value || O("closed"), A.value && t && A.value.focus();
+  const d = (e, t = !1) => {
+    l.disabled || (B(e), D(() => {
+      v.value && O("opened"), v.value || O("closed"), P.value && t && P.value.focus();
     }));
   };
-  m(v, (e) => {
+  b(v, (e) => {
     if (e) {
-      V.value && Array.isArray(u.value) && (_.value = T(u.value).slice());
+      G.value && Array.isArray(u.value) && (M.value = x(u.value).slice());
       return;
     }
-    k();
+    p();
   });
-  const ie = () => {
-    re(), u.value = a.value;
-  }, re = () => {
-    if (L.value) {
+  const ce = () => {
+    ve(), u.value = a.value;
+  }, ve = () => {
+    if (q.value) {
       a.value = [];
       return;
     }
@@ -116,140 +116,149 @@ const He = (l, O) => {
       }
       a.value = s.value;
     }
-  }, N = (e, t) => {
-    if (e = T(e), c.value[t]?.disabled)
+  }, fe = () => {
+    a.value = [], u.value = [];
+  }, _ = (e, t) => {
+    if (e = x(e), c.value[t]?.disabled)
       return;
-    if (b.value = t, n.mode !== y.Multi) {
-      l.keepOpen || f(!1), n.goToOption(
+    if (T.value = t, i.mode !== m.Multi) {
+      l.keepOpen || d(!1), i.goToOption(
         0
         /* None */
-      ), u.value = e, x(""), k(), n.type === E.Search && d.value && (d.value.value = l.displayValue(e));
+      ), u.value = e, N(""), p(), i.type === k.Search && f.value && (f.value.value = l.displayValue(e));
       return;
     }
     if (!Array.isArray(a.value))
       return;
-    d.value?.focus();
-    const g = T(a.value);
-    if (X(g, e)) {
+    f.value?.focus();
+    const g = x(a.value);
+    if (z(g, e)) {
       a.value = g.filter(
-        (P) => !Pe(P, e)
+        (h) => !Te(h, e)
       );
       return;
     } else {
       a.value = [...g, e];
       return;
     }
-  }, oe = (e) => c.value[e]?.disabled, n = {
+  }, de = (e) => c.value[e]?.disabled, i = {
     activeIndex: o,
     options: c,
     selectedOption: u,
-    labelRef: R,
+    labelRef: V,
     activeOption: I,
-    listRef: A,
+    listRef: P,
     clearable: l.clearable,
-    type: K.input ? E.Search : E.Dropdown,
-    mode: l.multi ? y.Multi : y.Single,
-    query: S,
-    selectedValue: ee,
-    toggle: f,
+    type: W.input ? k.Search : k.Dropdown,
+    mode: l.multi ? m.Multi : m.Single,
+    query: w,
+    selectedValue: ue,
+    toggle: d,
     disabled: l.disabled,
     open: v,
     mandatory: l.mandatory,
     size: l.size,
     placeholder: l.placeholder,
-    select: N,
+    select: _,
     clearSelection: () => {
-      x(""), u.value = n.mode === y.Single ? null : [], d.value && (d.value.value = "");
+      N(""), u.value = i.mode === m.Single ? null : [], f.value && (f.value.value = "");
     },
-    search: x,
+    search: N,
     goToOption: async (e) => {
       if (!v.value)
         return;
       let t = o.value + e;
-      const h = c.value.filter(
-        (P) => P.disabled
-      ).length, g = s.value.length - h;
+      const y = c.value.filter(
+        (h) => h.disabled
+      ).length, g = s.value.length - y;
       for (t > g && (t = g + 1); ; ) {
         if (!c.value[t]?.disabled) {
           I.value = s.value[t], o.value = t;
           return;
         }
-        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!oe(o.value)) {
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!de(o.value)) {
           I.value = s.value[t], o.value = t;
           return;
         }
       }
     },
     registerInput: (e) => {
-      d.value = e.value;
+      f.value = e.value;
     },
-    registerOption: (e, t, h) => {
-      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: h }];
+    registerOption: (e, t, y) => {
+      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: y }];
     },
     unRegisterOption(e) {
       c.value = c.value.filter((t) => t.id !== e);
     }
   };
-  Oe(we, n), Se(
-    A,
+  Pe(De, i), J(
+    P,
     () => {
-      v.value && B();
+      v.value && j();
     },
     {
-      ignore: [D, j, z, d, G.ref]
+      ignore: [
+        S,
+        H,
+        L,
+        U,
+        f,
+        X.ref
+      ]
     }
   );
-  const se = () => {
-    d.value && (d.value.value = n.query.value = "");
+  const ge = () => {
+    f.value && (f.value.value = i.query.value = "");
   };
-  be(async () => {
-    l.autoFocus && (await w(), setTimeout(() => {
-      $.value.focus();
-    })), n.goToOption(0);
+  Se(async () => {
+    l.autoFocus && (await D(), setTimeout(() => {
+      C.value.focus();
+    })), i.goToOption(0);
   });
-  const ce = () => {
-    u.value = a.value, O("apply", u.value), f(!1), se();
-  }, B = () => {
-    V.value && Array.isArray(_.value) && (u.value = T(_.value).slice()), f(!1);
-  }, ve = (e) => {
+  const he = () => {
+    u.value = a.value, O("apply", u.value), d(!1), ge();
+  }, j = () => {
+    G.value && Array.isArray(M.value) && (u.value = x(M.value).slice()), w.value = "", d(!1);
+  }, ye = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
         case "Space":
         case "Enter":
         case "ArrowUp":
         case "ArrowDown":
-          f(!0), e.preventDefault();
+          d(!0), e.preventDefault();
       }
-  }, de = (e) => {
+  }, be = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
         case "ArrowUp": {
-          n.goToOption(
+          i.goToOption(
             -1
             /* Previous */
           ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "ArrowDown": {
-          n.goToOption(
+          i.goToOption(
             1
             /* Next */
           ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "Escape": {
-          f(!1), e.preventDefault();
+          d(!1), e.preventDefault();
           break;
         }
         case "PageUp": {
-          n.goToOption(
+          i.goToOption(
             10
             /* NextPage */
           ), e.preventDefault();
           break;
         }
         case "PageDown": {
-          n.goToOption(
+          i.goToOption(
             -10
             /* PrevPage */
           ), e.preventDefault();
@@ -257,43 +266,55 @@ const He = (l, O) => {
         }
         case "Enter": {
           if (!v.value) {
-            f(!0);
+            d(!0);
             return;
           }
-          N(s.value[o.value], o.value), n.mode === y.Single && !l.keepOpen && f(!1), e.preventDefault();
+          _(s.value[o.value], o.value), i.mode === m.Single && !l.keepOpen && d(!1), e.preventDefault();
           break;
         }
       }
-  }, fe = r(() => {
-    const h = U.value.length, g = l.showSelectAll ? 1 : 0, P = h > 7, ge = h + g, he = P ? 7 + 0.5 : ge;
-    return Ie(he * C.value + 8);
+  }, me = r(() => {
+    const e = $.value.length, t = l.showSelectAll ? 1 : 0, y = e > A.MAX_NUMBER_OF_OPTIONS, g = e + t;
+    let h = y ? A.MAX_NUMBER_OF_OPTIONS + 0.5 : g;
+    return l.noResultsText && h === 0 && (h = h + 1), Ie(
+      h * K.value + A.PADDING_PX
+    );
   });
   return {
-    onKeydown: de,
-    location: Q,
+    onKeydown: be,
+    location: F,
     open: v,
-    toggleMenu: f,
-    onButtonKeydown: ve,
-    displayedValue: te,
-    labelRef: R,
-    query: S,
-    containerProps: G,
-    calculateTableHeight: fe,
-    wrapperProps: ne,
+    toggleMenu: d,
+    onButtonKeydown: ye,
+    displayedValue: ie,
+    labelRef: V,
+    query: w,
+    containerProps: X,
+    calculateTableHeight: me,
+    wrapperProps: se,
     filteredOptions: s,
-    allSelected: L,
-    isIndeterminate: ae,
-    onSelectAll: ie,
-    virtualOptions: U,
-    isSelected: q,
+    allSelected: q,
+    isIndeterminate: re,
+    onSelectAll: ce,
+    virtualOptions: $,
+    isSelected: Q,
     selectedOption: u,
-    onSelect: N,
+    onSelect: _,
     activeIndex: o,
-    onCancel: B,
-    onApply: ce,
-    scrollTo: M
+    onCancel: j,
+    onApply: he,
+    scrollTo: R,
+    onClickOutside: J,
+    listRef: P,
+    buttonRef: S,
+    apply: H,
+    cancel: L,
+    el: C,
+    triggerRef: Y,
+    clearAll: U,
+    onClearAllSelections: fe
   };
 };
 export {
-  He as dropdownCommon
+  Ve as dropdownCommon
 };

package/components/dropdown/common/Option.common.d.ts

@@ -0,0 +1,9 @@
+export declare const optionCommon: (props: any) => {
+    selected: import("vue").ComputedRef<boolean>;
+    isMulti: import("vue").ComputedRef<boolean>;
+    id: string;
+    onClick: (event: Event) => void;
+    api: import("./DropdownContext").DropdownContextProps;
+    el: import("vue").Ref<HTMLDivElement>;
+    active: import("vue").ComputedRef<any>;
+};

package/components/dropdown/common/Option.common.js

@@ -0,0 +1,24 @@
+import { ref as s, onMounted as m, onUnmounted as v, computed as o, toRaw as i } from "vue";
+import { useId as f } from "../../../composables/useId.js";
+import { useDropdownContext as O, Mode as l } from "./DropdownContext.js";
+const A = (t) => {
+  const e = O("Option"), n = f().value, u = s(null), c = (d) => {
+    t.selectAllOption ? d.stopPropagation() : e.select(t.option);
+  };
+  m(() => e.registerOption(n, t.disabled, !!t.subtitle)), v(() => {
+    e.unRegisterOption(n);
+  });
+  const r = o(() => e.mode === l.Multi), a = o(() => t.active !== null ? t.active : e.activeIndex.value !== null ? e.activeOption.value === t.option : !1);
+  return {
+    selected: o(() => t.selectedProp ? !0 : e.mode === l.Multi && Array.isArray(e.selectedOption.value) ? i(e.selectedOption.value.includes(t.option)) : i(e.selectedOption.value) === i(t.option)),
+    isMulti: r,
+    id: n,
+    onClick: c,
+    api: e,
+    el: u,
+    active: a
+  };
+};
+export {
+  A as optionCommon
+};

package/components/dropdown/v3/Dropdown.vue.d.ts

@@ -170,11 +170,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title: string;
     theme: string;
     size: "sm" | "lg";
-    testId: string;
     error: string;
+    testId: string;
     placement: Placement;
     disabled: boolean;
     container: string;
+    popperClass: string;
     selected: any;
     modelValue: any;
     placeholder: string;
@@ -184,7 +185,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isOnTop: boolean;
     multi: boolean;
     inlineSearch: boolean;
-    popperClass: string;
     noResultsText: string;
     defaultOpen: boolean;
     showButtonOnOpen: boolean;
@@ -213,7 +213,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         open: true;
     }): any;
     default?(_: {
-        option: any;
+        option: unknown;
         selected: boolean;
         active: boolean;
     }): any;

package/components/dropdown/v3/Dropdown.vue.js

@@ -1,8 +1,8 @@
 import o from "./Dropdown.vue2.js";
-/* empty css               *//* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_0f9d5331_lang.css"; //*');
+/* empty css               *//* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Dropdown.vue_vue_type_style_index_0_scoped_d4f8e790_lang.css"; //*');
 // import "../../../Dropdown.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-0f9d5331"]]);
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-d4f8e790"]]);
 export {
   r as default
 };