@ironsource/shared-ui 2.1.8-test.1 → 2.1.9

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

@@ -1,339 +1,368 @@
-import { useToggle as Ie } from "../../../composables/useToggle.js";
-import { inject as xe, ref as n, computed as r, watch as P, useSlots as De, toRaw as A, nextTick as C, provide as Ce, onMounted as Ne } from "vue";
-import { isObjectInArray as W } from "../../../utils/array.js";
-import { objectsEqual as Re } from "../../../utils/object.js";
-import { useClamp as Ee, useVirtualList as Me, onClickOutside as Y } from "@vueuse/core";
-import { Mode as T, Type as V, DropdownContext as Ve } from "./DropdownContext.js";
-import { pxToRem as _e } from "../../../utils/style.js";
-import { useEditableContext as ke } from "../../table-cells/common/EditableContext.js";
-const je = (l, b, O) => {
-  const Z = xe("isTreeDropdown", !1), F = (e, t) => l.multi ? W(e, t) : A(e) === t;
-  let _;
+import { useToggle as ke } from "../../../composables/useToggle.js";
+import { inject as Ve, ref as n, computed as i, watch as m, useSlots as _e, toRaw as P, nextTick as N, provide as Ge, onMounted as He } from "vue";
+import { isObjectInArray as Z } from "../../../utils/array.js";
+import { objectsEqual as Be } from "../../../utils/object.js";
+import { useClamp as Le, useVirtualList as Ue, onClickOutside as F } from "@vueuse/core";
+import { Mode as T, Type as V, DropdownContext as qe } from "./DropdownContext.js";
+import { pxToRem as Ke } from "../../../utils/style.js";
+import { useEditableContext as $e } from "../../table-cells/common/EditableContext.js";
+import { useGroupedOptions as je } from "./useGroupedOptions.js";
+const el = (l, A, b) => {
+  const ee = Ve("isTreeDropdown", !1), {
+    sortOutGroups: _,
+    flattenAndMarkGroupOptions: le,
+    isGroup: G,
+    selectAllWithGroups: te,
+    isIndeterminateGrouped: ae,
+    allSelectedGrouped: ue,
+    areAllPreviousSelected: ne
+  } = je(l), ie = (e, t) => l.multi ? Z(e, t) : P(e) === t;
+  let H;
   ((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";
-  })(_ || (_ = {}));
+  })(H || (H = {}));
   const a = n(
     l.selected
-  ), N = ke(), u = r({
+  ), R = $e(), u = i({
     get() {
-      return N?.value?.value ?? a.value;
+      return R?.value?.value ?? a.value;
     },
     set(e) {
-      N.onChange?.(e), N.onClose?.(), b("update:selected", e);
+      R.onChange?.(e), R.onClose?.(), A("update:selected", e);
     }
   });
-  P(
+  m(
     () => l.selected,
     () => {
-      a.value = l.selected, v.value = l.selected;
+      a.value = l.selected, c.value = l.selected;
     }
   );
-  const p = De(), w = n(null), g = n(null), k = n(null), R = n(null), H = n(null), I = n(null), ee = n(), B = n(null), L = n(null), U = n(null), le = 8, te = r(() => I.value ? I.value.getBoundingClientRect().height + le + l.distance : 0), c = n([]), x = n(-1), m = n(""), v = n(l.selected || []), q = () => I.value?.focus(), [d, ae, ue] = Ie({
+  const re = _e(), w = n(null), h = n(null), B = n(null), E = n(null), L = n(null), I = n(null), oe = n(), U = n(null), q = n(null), K = n(null), se = 8, ce = i(() => I.value ? I.value.getBoundingClientRect().height + se + l.distance : 0), d = n([]), x = n(-1), y = n(""), c = n(l.selected || []), $ = () => I.value?.focus(), [f, ve, de] = ke({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
-  P(
+  m(
     () => l.disabled,
     (e) => {
-      e !== void 0 && ue(e);
+      e !== void 0 && de(e);
     }
   );
-  const G = (e) => {
-    ne.value = ae(e);
-  }, ne = r({
+  const j = (e) => {
+    fe.value = ve(e);
+  }, fe = i({
     get() {
       return l.isOpen;
     },
     set(e) {
-      b("update:isOpen", e);
+      A("update:isOpen", e);
     }
-  }), ie = r(() => s.value.length - 1), o = Ee(0, 0, ie), K = r(() => u.value ? l.displayValue(u.value) : ""), re = (e) => {
+  }), ge = i(() => r.value.length - 1), v = Le(0, 0, ge), X = i(() => u.value ? l.displayValue(u.value) : ""), he = (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;
-  }, oe = r(() => {
+  }, ye = i(() => {
     if (!l.multi)
       return u.value ? l.displayValue(u.value) : l.placeholder;
     if (Array.isArray(a.value))
-      return re(a);
-  }), $ = r(() => {
+      return he(a);
+  }), p = i(() => {
     if (Array.isArray(a.value))
-      return a.value.length === s.value.length;
-  }), se = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), E = (e) => {
-    m.value = e;
-  }, ce = r(() => {
-    const e = A(v.value), t = {
+      return l.groupedOptions ? ue(r, a) : a.value.length === r.value.length;
+  }), Oe = i(() => !l.multi || !Array.isArray(a.value) ? !1 : l.groupedOptions ? ae(
+    r,
+    a
+  ) : a.value.length > 0 && a.value.length < r.value.length), M = (e) => {
+    y.value = e;
+  }, D = i(() => l.groupedOptions ? le(l.options) : l.options), Se = i(() => {
+    if (ne(
+      D,
+      c
+    ))
+      return D.value;
+    const e = {
       selected: [],
       notSelected: []
     };
-    return A(l.options).forEach((y) => {
-      const f = e.includes(y) ? "selected" : "notSelected";
-      t[f].push(y);
-    }), [].concat(t.selected, t.notSelected);
-  }), s = r(() => {
-    const e = Array.isArray(v.value) && l.multi && O.VERSION === 4 && !Z ? ce.value : l.options;
-    return l.onSearch ? e.filter((t) => l.onSearch(t, m.value)) : e;
-  }), ve = r(() => c.value[0]?.hasSubtitle), j = r(() => i.mode === T.Multi), X = r(
-    () => ve.value ? O.MULTILINE_LIST_HEIGHT : O.LIST_HEIGHT
+    P(D).value.forEach((s) => {
+      const g = c.value.includes(s) ? "selected" : "notSelected";
+      e[g].push(s);
+    });
+    const t = l.groupedOptions ? _(e.notSelected) : e.notSelected;
+    return [].concat(e.selected, t);
+  }), r = i(() => {
+    const e = Array.isArray(c.value) && l.multi && b.VERSION === 4 && !ee ? Se.value : D.value;
+    if (l.onSearch) {
+      const t = e.filter((s) => l.groupedOptions && G(s) ? s : l.onSearch(s, y.value));
+      return l.groupedOptions ? _(t) : t;
+    } else
+      return e;
+  }), Ae = i(() => d.value[0]?.hasSubtitle), z = i(() => o.mode === T.Multi), W = i(
+    () => Ae.value ? b.MULTILINE_LIST_HEIGHT : b.LIST_HEIGHT
   ), {
-    list: z,
-    containerProps: J,
-    wrapperProps: de,
-    scrollTo: D
-  } = Me(s, {
-    itemHeight: X.value,
+    list: J,
+    containerProps: Q,
+    wrapperProps: be,
+    scrollTo: C
+  } = Ue(r, {
+    itemHeight: W.value,
     overscan: l.disableVirtualScroll ? 1 / 0 : 2
   });
-  P(
+  m(
     () => l.isOpen,
     (e) => {
-      G(e);
+      j(e);
     }
-  ), P([x], async () => {
-    await C();
-  }), P(
-    [d, o, x],
+  ), m([x], async () => {
+    await N();
+  }), m(
+    [f, v, x],
     async ([e], [t]) => {
-      d.value && (await C(), x.value !== -1 && e !== t && setTimeout(() => {
-        l.multi && O.VERSION === 4 || D(x.value);
-      }), o.value && setTimeout(() => {
-        D(o.value);
+      f.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
+        l.multi && b.VERSION === 4 || C(x.value);
+      }), v.value && setTimeout(() => {
+        C(v.value);
       }));
     }
-  ), P(m, () => {
-    b("onsearch", m.value), D(0);
+  ), m(y, () => {
+    A("onsearch", y.value), C(0);
   });
-  const h = (e, t = !1) => {
-    l.disabled || (G(e), C(() => {
-      d.value && b("opened"), d.value || b("closed"), w.value && t && w.value.focus();
+  const O = (e, t = !1) => {
+    l.disabled || (j(e), N(() => {
+      f.value && A("opened"), f.value || A("closed"), w.value && t && w.value.focus();
     }));
   };
-  P(d, (e) => {
+  m(f, (e) => {
     if (e) {
-      j.value && Array.isArray(u.value) && (v.value = A(u.value).slice());
+      y.value = "", z.value && Array.isArray(u.value) && (c.value = P(u.value).slice());
       return;
     }
-    q();
+    $();
   });
-  const fe = () => {
-    if ($.value) {
+  const me = () => {
+    if (p.value) {
       a.value = [];
       return;
     }
     if (Array.isArray(a.value)) {
-      if (a.value.length === s.value.length) {
-        a.value = [];
-        return;
+      if (l.groupedOptions)
+        te(r, a);
+      else {
+        if (a.value.length === r.value.length) {
+          a.value = [];
+          return;
+        }
+        a.value = r.value;
       }
-      a.value = s.value, b("selectAll");
+      A("selectAll");
     }
-  }, ge = () => {
-    fe(), O.VERSION !== 4 && (u.value = a.value);
-  }, he = (e = !0) => {
-    a.value = [], e && (u.value = [], v.value = []), b("clear");
-  }, M = (e, t) => {
-    if (e = A(e), c.value[t]?.disabled)
+  }, Pe = () => {
+    me(), b.VERSION !== 4 && (u.value = a.value);
+  }, Te = (e = !0) => {
+    a.value = [], e && (u.value = [], c.value = []), A("clear");
+  }, k = (e, t) => {
+    if (e = P(e), d.value[t]?.disabled)
       return;
-    if (x.value = t, i.mode !== T.Multi) {
-      l.keepOpen || h(!1), i.goToOption(
+    if (x.value = t, o.mode !== T.Multi) {
+      l.keepOpen || O(!1), o.goToOption(
         0
         /* None */
-      ), u.value = e, E(""), q(), i.type === V.Search && g.value && (g.value.value = l.displayValue(e));
+      ), u.value = e, M(""), $(), o.type === V.Search && h.value && (h.value.value = l.displayValue(e));
       return;
     }
     if (!Array.isArray(a.value))
       return;
-    g.value?.focus();
-    const S = A(a.value);
-    if (W(S, e)) {
+    h.value?.focus();
+    const S = P(a.value);
+    if (Z(S, e)) {
       a.value = S.filter(
-        (f) => !Re(f, e)
+        (g) => !Be(g, e)
       );
       return;
     } else {
       a.value = [...S, e];
       return;
     }
-  }, ye = (e) => c.value[e]?.disabled, i = {
-    activeIndex: o,
-    options: c,
+  }, we = (e) => d.value[e]?.disabled, o = {
+    activeIndex: v,
+    options: d,
     selectedOption: u,
-    labelRef: H,
-    activeOption: R,
+    labelRef: L,
+    activeOption: E,
     listRef: w,
     clearable: l.clearable,
-    type: p.input ? V.Search : V.Dropdown,
+    type: re.input ? V.Search : V.Dropdown,
     mode: l.multi ? T.Multi : T.Single,
-    query: m,
-    selectedValue: K,
-    toggle: h,
+    query: y,
+    selectedValue: X,
+    toggle: O,
     disabled: l.disabled,
-    open: d,
+    open: f,
     mandatory: l.mandatory,
     size: l.size,
     placeholder: l.placeholder,
-    select: M,
+    select: k,
     clearSelection: () => {
-      E(""), u.value = i.mode === T.Single ? null : [], v.value = i.mode === T.Single ? null : [], g.value && (g.value.value = "");
+      M(""), u.value = o.mode === T.Single ? null : [], c.value = o.mode === T.Single ? null : [], h.value && (h.value.value = "");
     },
-    search: E,
+    search: M,
     goToOption: async (e) => {
-      if (!d.value)
+      if (!f.value)
         return;
-      let t = o.value + e;
-      const y = c.value.filter(
-        (f) => f.disabled
-      ).length, S = s.value.length - y;
+      let t = v.value + e;
+      const s = d.value.filter(
+        (g) => g.disabled
+      ).length, S = r.value.length - s;
       for (t > S && (t = S + 1); ; ) {
-        if (!c.value[t]?.disabled) {
-          R.value = s.value[t], o.value = t;
+        if (!d.value[t]?.disabled) {
+          E.value = r.value[t], v.value = t;
           return;
         }
-        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!ye(o.value)) {
-          R.value = s.value[t], o.value = t;
+        if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!we(v.value)) {
+          E.value = r.value[t], v.value = t;
           return;
         }
       }
     },
     registerInput: (e) => {
-      g.value = e.value;
+      h.value = e.value;
     },
-    registerOption: (e, t, y) => {
-      c.value = [...c.value, { id: e, disabled: t, hasSubtitle: y }];
+    registerOption: (e, t, s) => {
+      d.value = [...d.value, { id: e, disabled: t, hasSubtitle: s }];
     },
     unRegisterOption(e) {
-      c.value = c.value.filter((t) => t.id !== e);
+      d.value = d.value.filter((t) => t.id !== e);
     }
   };
-  Ce(Ve, i), Y(
+  Ge(qe, o), F(
     w,
     () => {
-      d.value && Q();
+      f.value && Y();
     },
     {
       ignore: [
         I,
-        B,
-        L,
         U,
-        g,
-        J.ref
+        q,
+        K,
+        h,
+        Q.ref
       ]
     }
   );
-  const Se = () => {
-    g.value && (g.value.value = i.query.value = "");
+  const Ie = () => {
+    h.value && (h.value.value = o.query.value = "");
   };
-  Ne(async () => {
-    l.autoFocus && (await C(), setTimeout(() => {
-      k.value.focus();
-    })), i.goToOption(0);
+  He(async () => {
+    l.autoFocus && (await N(), setTimeout(() => {
+      B.value.focus();
+    })), o.goToOption(0);
   });
-  const be = () => {
-    u.value = a.value, Array.isArray(u.value) && (v.value = A(u.value).slice()), b("apply", u.value), h(!1), Se();
-  }, Q = () => {
-    j.value && Array.isArray(v.value) && (u.value = A(v.value).slice()), m.value = "", h(!1);
-  }, Oe = (e) => {
+  const xe = () => {
+    u.value = a.value, Array.isArray(u.value) && (c.value = P(u.value).slice()), A("apply", u.value), O(!1), Ie();
+  }, Y = () => {
+    z.value && Array.isArray(c.value) && (u.value = P(c.value).slice()), y.value = "", O(!1);
+  }, De = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
         case "Space":
         case "Enter":
         case "ArrowUp":
         case "ArrowDown":
-          h(!0), e.preventDefault();
+          O(!0), e.preventDefault();
       }
-  }, Ae = (e) => {
+  }, Ce = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
         case "ArrowUp": {
-          i.goToOption(
+          o.goToOption(
             -1
             /* Previous */
           ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "ArrowDown": {
-          i.goToOption(
+          o.goToOption(
             1
             /* Next */
           ), e.preventDefault(), e.stopPropagation();
           break;
         }
         case "Escape": {
-          h(!1), e.preventDefault();
+          O(!1), e.preventDefault();
           break;
         }
         case "PageUp": {
-          i.goToOption(
+          o.goToOption(
             10
             /* NextPage */
           ), e.preventDefault();
           break;
         }
         case "PageDown": {
-          i.goToOption(
+          o.goToOption(
             -10
             /* PrevPage */
           ), e.preventDefault();
           break;
         }
         case "Enter": {
-          if (!d.value) {
-            h(!0);
+          if (!f.value) {
+            O(!0);
             return;
           }
-          M(s.value[o.value], o.value), i.mode === T.Single && !l.keepOpen && h(!1), e.preventDefault();
+          k(r.value[v.value], v.value), o.mode === T.Single && !l.keepOpen && O(!1), e.preventDefault();
           break;
         }
       }
-  }, me = r(() => {
-    const e = z.value.reduce((Pe, Te) => {
-      const we = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Te.data) : 1;
-      return Pe + we;
-    }, 0), t = l.multi && l.showSelectAll ? 1 : 0, y = e > O.MAX_NUMBER_OF_OPTIONS, S = e + t;
-    let f = y ? O.MAX_NUMBER_OF_OPTIONS + 0.1 : S;
-    return l.noResultsText && f === 0 && (f = f + 1), _e(
-      f * X.value + O.PADDING_PX
+  }, Ne = i(() => {
+    const e = J.value.reduce((Re, Ee) => {
+      const Me = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Ee.data) : 1;
+      return Re + Me;
+    }, 0), t = l.multi && l.showSelectAll && !y.value ? 1 : 0, s = e > b.MAX_NUMBER_OF_OPTIONS, S = e + t;
+    let g = s ? b.MAX_NUMBER_OF_OPTIONS + 0.1 : S;
+    return l.noResultsText && g === 0 && (g = g + 1), Ke(
+      g * W.value + b.PADDING_PX
     );
   });
   return {
-    onKeydown: Ae,
-    location: te,
-    open: d,
-    toggleMenu: h,
-    onButtonKeydown: Oe,
-    displayedValue: oe,
-    labelRef: H,
-    query: m,
-    containerProps: J,
-    calculateTableHeight: me,
-    wrapperProps: de,
-    filteredOptions: s,
-    allSelected: $,
-    isIndeterminate: se,
-    onSelectAll: ge,
-    virtualOptions: z,
-    isSelected: F,
+    onKeydown: Ce,
+    location: ce,
+    open: f,
+    toggleMenu: O,
+    onButtonKeydown: De,
+    displayedValue: ye,
+    labelRef: L,
+    query: y,
+    containerProps: Q,
+    calculateTableHeight: Ne,
+    wrapperProps: be,
+    filteredOptions: r,
+    allSelected: p,
+    isIndeterminate: Oe,
+    onSelectAll: Pe,
+    virtualOptions: J,
+    isSelected: ie,
     selectedOption: u,
-    selectedOptionPrevious: v,
-    selectedValue: K,
-    onSelect: M,
-    activeIndex: o,
-    onCancel: Q,
-    onApply: be,
-    scrollTo: D,
-    onClickOutside: Y,
+    selectedOptionPrevious: c,
+    selectedValue: X,
+    onSelect: k,
+    activeIndex: v,
+    onCancel: Y,
+    onApply: xe,
+    scrollTo: C,
+    onClickOutside: F,
     listRef: w,
     buttonRef: I,
-    apply: B,
-    cancel: L,
-    el: k,
-    triggerRef: ee,
-    clearAll: U,
-    onClearAllSelections: he
+    apply: U,
+    cancel: q,
+    el: B,
+    triggerRef: oe,
+    clearAll: K,
+    onClearAllSelections: Te,
+    isGroup: G
   };
 };
 export {
-  je as dropdownCommon
+  el as dropdownCommon
 };

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

@@ -0,0 +1 @@
+export declare const GROUP_OPTION_FLAG = "__IS_GROUP";

package/components/dropdown/common/consts.js

@@ -0,0 +1,4 @@
+const _ = "__IS_GROUP";
+export {
+  _ as GROUP_OPTION_FLAG
+};

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

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+export declare const useGroupedOptions: (props: any) => {
+    isGroup: (option: any) => boolean;
+    sortOutGroups: (options: any) => any;
+    flattenAndMarkGroupOptions: (options: any) => any;
+    selectAllWithGroups: (filteredOptions: Ref<unknown[]>, selectedOptionRef: Ref<unknown[]>) => void;
+    isIndeterminateGrouped: (filteredOptions: any, selectedOptionRef: Ref<unknown[]>) => boolean;
+    allSelectedGrouped: (filteredOptions: any, selectedOptionRef: Ref<unknown[]>) => boolean;
+    areAllPreviousSelected: (flatOptions: Ref<unknown[]>, selectedOptionPrevious: Ref<unknown[]>) => boolean;
+};

package/components/dropdown/common/useGroupedOptions.js

@@ -0,0 +1,57 @@
+import { GROUP_OPTION_FLAG as i } from "./consts.js";
+const O = (r) => {
+  const u = (e) => e && !!e[i], p = (e) => e.reduce((t, n) => {
+    const { options: o = [], ...l } = n, g = {
+      ...l,
+      [i]: !0
+    };
+    return [...t, g, ...o];
+  }, []), c = (e) => {
+    const t = r.groupedOptions ? [] : e;
+    if (r.groupedOptions)
+      for (let n = 0; n < e.length; n++) {
+        const o = e[n];
+        if (u(o)) {
+          const l = e[n + 1];
+          if (u(l) || !l)
+            continue;
+          t.push(o);
+        } else
+          t.push(o);
+      }
+    return t;
+  }, h = (e, t) => {
+    const n = r.options.length;
+    if (t.value.length === e.value.length - n) {
+      t.value = [];
+      return;
+    }
+    t.value = e.value.filter(
+      (o) => !u(o)
+    );
+  }, s = (e) => e.value.reduce(
+    (t, n) => t + (u(n) ? 0 : 1),
+    0
+  );
+  return {
+    isGroup: u,
+    sortOutGroups: c,
+    flattenAndMarkGroupOptions: p,
+    selectAllWithGroups: h,
+    isIndeterminateGrouped: (e, t) => {
+      const n = s(e);
+      return t.value.length > 0 && t.value.length < n;
+    },
+    allSelectedGrouped: (e, t) => {
+      const n = s(e);
+      return t.value.length === n;
+    },
+    areAllPreviousSelected: (e, t) => {
+      const n = r.options.length;
+      return e.value.length - n === t.value.length;
+    }
+  };
+};
+export {
+  O as useGroupedOptions
+};