@ironsource/shared-ui 2.1.3-rc.1 → 2.1.3-rc.11

package/components/chip/v4/index.d.ts

@@ -6,8 +6,8 @@ declare const ChipTypes: () => ({
             disabled: boolean;
             testId: string;
             selected: boolean;
-            clearable: boolean;
             prefix: string;
+            clearable: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             disabled: {
                 type: import("vue").PropType<boolean>;
@@ -21,17 +21,17 @@ declare const ChipTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            clearable: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             prefix: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            clearable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onCleared?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "testId" | "selected" | "clearable" | "prefix">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "testId" | "selected" | "prefix" | "clearable">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -58,14 +58,14 @@ declare const ChipTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            clearable: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             prefix: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            clearable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onCleared?: (...args: any[]) => any;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -74,8 +74,8 @@ declare const ChipTypes: () => ({
             disabled: boolean;
             testId: string;
             selected: boolean;
-            clearable: boolean;
             prefix: string;
+            clearable: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -109,14 +109,14 @@ declare const ChipTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        clearable: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
         prefix: {
             type: import("vue").PropType<string>;
             default: any;
         };
+        clearable: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onCleared?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
@@ -136,14 +136,14 @@ declare const ChipTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    clearable: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     prefix: {
         type: import("vue").PropType<string>;
         default: any;
     };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     onCleared?: (...args: any[]) => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -152,8 +152,8 @@ declare const ChipTypes: () => ({
     disabled: boolean;
     testId: string;
     selected: boolean;
-    clearable: boolean;
     prefix: string;
+    clearable: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         "icon-start"?(_: {}): any;

package/components/dialog/v4/index.d.ts

@@ -40,14 +40,14 @@ declare const DialogTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            subtitle: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             modelValue: {
                 type: import("vue").PropType<boolean>;
                 required: true;
             };
+            subtitle: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             appendToBody: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -122,7 +122,7 @@ declare const DialogTypes: () => ({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: ((event: "open") => void) & ((event: "cancel") => void) & ((event: "close", reason: import("../v3").Reason) => void) & ((event: "update:modelValue", value: boolean) => void) & ((event: "save") => void);
+        $emit: ((event: "open") => void) & ((event: "close", reason: import("../v3").Reason) => void) & ((event: "cancel") => void) & ((event: "update:modelValue", value: boolean) => void) & ((event: "save") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             title: {
@@ -141,14 +141,14 @@ declare const DialogTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            subtitle: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             modelValue: {
                 type: import("vue").PropType<boolean>;
                 required: true;
             };
+            subtitle: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             appendToBody: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -274,14 +274,14 @@ declare const DialogTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
-        subtitle: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         modelValue: {
             type: import("vue").PropType<boolean>;
             required: true;
         };
+        subtitle: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         appendToBody: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -365,14 +365,14 @@ declare const DialogTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
-    subtitle: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     modelValue: {
         type: import("vue").PropType<boolean>;
         required: true;
     };
+    subtitle: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     appendToBody: {
         type: import("vue").PropType<boolean>;
         default: boolean;

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

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

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

@@ -182,25 +182,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     selected: any;
     modelValue: any;
     placeholder: string;
-    helperText: string;
-    searchPlaceholder: string;
-    isOnTop: boolean;
+    autoFocus: boolean;
     multi: boolean;
-    inlineSearch: boolean;
-    noResultsText: string;
     defaultOpen: boolean;
-    showButtonOnOpen: boolean;
-    autoFocus: boolean;
-    skidding: number;
-    clearable: boolean;
-    onSearch: (option: any, term: string) => boolean;
     keepOpen: boolean;
     autoSize: boolean;
     disableKeyboardEvents: boolean;
+    isOnTop: boolean;
+    skidding: number;
+    inlineSearch: boolean;
+    onSearch: (option: any, term: string) => boolean;
+    noResultsText: string;
+    valueToCopy: string;
+    helperText: string;
+    searchPlaceholder: string;
+    showButtonOnOpen: boolean;
+    clearable: boolean;
     multiOptionsPlaceholderPrefix: string;
     multiOptionsPlaceholderSuffix: string;
     darkTheme: boolean;
-    valueToCopy: string;
 }>, {
     label?(_: {}): any;
     input?(_: {