@ironsource/shared-ui 2.0.0-rc.0 → 2.0.0-rc.2

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

@@ -0,0 +1,12 @@
+import o from "./Dropdown.vue.vue.js";
+import r from "../common/Option.vue.vue.js";
+import p from "../common/Label.vue.vue.js";
+import m from "../common/SearchInput.vue.vue.js";
+const f = () => [o, r, p, m];
+export {
+  o as Dropdown,
+  f as DropdownTypes,
+  p as Label,
+  r as Option,
+  m as SearchInput
+};

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

@@ -0,0 +1,243 @@
+import { Placement } from 'floating-vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: unknown;
+    placeholder?: string;
+    disabled?: boolean;
+    mandatory?: boolean;
+    helperText?: string;
+    searchPlaceholder?: string;
+    isOnTop?: boolean;
+    multi?: boolean;
+    title?: string;
+    inlineSearch?: boolean;
+    popperClass?: string;
+    noResultsText?: string;
+    loading?: boolean;
+    selected?: unknown;
+    showSelectAll?: boolean;
+    defaultOpen?: boolean;
+    showButtonOnOpen?: boolean;
+    autoFocus?: boolean;
+    distance?: number;
+    isOpen?: boolean;
+    skidding?: number;
+    placement?: Placement;
+    clearable?: boolean;
+    error?: string;
+    size?: "sm" | "lg";
+    displayValue: (option: unknown) => string;
+    options: unknown[];
+    onSearch?: (option: any, term: string) => boolean;
+    theme?: string;
+    container?: string;
+    flip?: boolean;
+    keepOpen?: boolean;
+    autoSize?: boolean;
+    disableKeyboardEvents?: boolean;
+    multiOptionsPlaceholderPrefix?: string;
+    multiOptionsPlaceholderSuffix?: string;
+    testId?: string;
+    darkTheme?: boolean;
+    valueToCopy?: string;
+}>, {
+    multi: boolean;
+    searchPlaceholder: string;
+    title: string;
+    popperClass: string;
+    mandatory: boolean;
+    selected: any;
+    open: boolean;
+    showButtonOnOpen: boolean;
+    inlineSearch: boolean;
+    isOnTop: boolean;
+    distance: number;
+    skidding: number;
+    placement: string;
+    noResultsText: string;
+    autoFocus: boolean;
+    modelValue: any;
+    defaultOpen: boolean;
+    disabled: boolean;
+    placeholder: string;
+    size: string;
+    clearable: boolean;
+    onSearch: () => true;
+    helperText: string;
+    error: string;
+    theme: string;
+    container: string;
+    flip: boolean;
+    keepOpen: boolean;
+    autoSize: boolean;
+    disableKeyboardEvents: boolean;
+    multiOptionsPlaceholderPrefix: string;
+    multiOptionsPlaceholderSuffix: string;
+    testId: string;
+    darkTheme: boolean;
+    valueToCopy: string;
+}>, {
+    selectItem: (option: any, index?: number) => void;
+    scrollTo: (index: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: unknown) => void;
+    "update:isOpen": (value: unknown) => void;
+    closed: () => void;
+    opened: () => void;
+    apply: (value: unknown) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: unknown;
+    placeholder?: string;
+    disabled?: boolean;
+    mandatory?: boolean;
+    helperText?: string;
+    searchPlaceholder?: string;
+    isOnTop?: boolean;
+    multi?: boolean;
+    title?: string;
+    inlineSearch?: boolean;
+    popperClass?: string;
+    noResultsText?: string;
+    loading?: boolean;
+    selected?: unknown;
+    showSelectAll?: boolean;
+    defaultOpen?: boolean;
+    showButtonOnOpen?: boolean;
+    autoFocus?: boolean;
+    distance?: number;
+    isOpen?: boolean;
+    skidding?: number;
+    placement?: Placement;
+    clearable?: boolean;
+    error?: string;
+    size?: "sm" | "lg";
+    displayValue: (option: unknown) => string;
+    options: unknown[];
+    onSearch?: (option: any, term: string) => boolean;
+    theme?: string;
+    container?: string;
+    flip?: boolean;
+    keepOpen?: boolean;
+    autoSize?: boolean;
+    disableKeyboardEvents?: boolean;
+    multiOptionsPlaceholderPrefix?: string;
+    multiOptionsPlaceholderSuffix?: string;
+    testId?: string;
+    darkTheme?: boolean;
+    valueToCopy?: string;
+}>, {
+    multi: boolean;
+    searchPlaceholder: string;
+    title: string;
+    popperClass: string;
+    mandatory: boolean;
+    selected: any;
+    open: boolean;
+    showButtonOnOpen: boolean;
+    inlineSearch: boolean;
+    isOnTop: boolean;
+    distance: number;
+    skidding: number;
+    placement: string;
+    noResultsText: string;
+    autoFocus: boolean;
+    modelValue: any;
+    defaultOpen: boolean;
+    disabled: boolean;
+    placeholder: string;
+    size: string;
+    clearable: boolean;
+    onSearch: () => true;
+    helperText: string;
+    error: string;
+    theme: string;
+    container: string;
+    flip: boolean;
+    keepOpen: boolean;
+    autoSize: boolean;
+    disableKeyboardEvents: boolean;
+    multiOptionsPlaceholderPrefix: string;
+    multiOptionsPlaceholderSuffix: string;
+    testId: string;
+    darkTheme: boolean;
+    valueToCopy: string;
+}>>> & {
+    onApply?: (value: unknown) => any;
+    "onUpdate:selected"?: (value: unknown) => any;
+    "onUpdate:isOpen"?: (value: unknown) => any;
+    onOpened?: () => any;
+    onClosed?: () => any;
+}, {
+    title: string;
+    theme: string;
+    size: "sm" | "lg";
+    testId: string;
+    error: string;
+    placement: Placement;
+    disabled: boolean;
+    container: string;
+    selected: any;
+    modelValue: any;
+    placeholder: string;
+    mandatory: boolean;
+    helperText: string;
+    searchPlaceholder: string;
+    isOnTop: boolean;
+    multi: boolean;
+    inlineSearch: boolean;
+    popperClass: string;
+    noResultsText: string;
+    defaultOpen: boolean;
+    showButtonOnOpen: boolean;
+    autoFocus: boolean;
+    distance: number;
+    skidding: number;
+    clearable: boolean;
+    onSearch: (option: any, term: string) => boolean;
+    flip: boolean;
+    keepOpen: boolean;
+    autoSize: boolean;
+    disableKeyboardEvents: boolean;
+    multiOptionsPlaceholderPrefix: string;
+    multiOptionsPlaceholderSuffix: string;
+    darkTheme: boolean;
+    valueToCopy: string;
+}>, {
+    label?(_: {}): any;
+    input?(_: {
+        open: boolean;
+        value: any;
+        disabled: boolean;
+    }): any;
+    image?(_: {}): any;
+    "input-list"?(_: {
+        open: true;
+    }): any;
+    default?(_: {
+        option: unknown;
+        selected: boolean;
+        active: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+import o from "./DropdownV4.vue.vue2.js";
+/* empty css                     *//* empty css                     */import r from "../../../_virtual/_plugin-vue_export-helper.vue.js";
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-896b5344"]]);
+export {
+  a as default
+};

package/components/dropdown/v4/DropdownV4.vue.vue2.js

@@ -0,0 +1,387 @@
+import { defineComponent as Q, openBlock as d, createElementBlock as n, normalizeClass as $, unref as e, renderSlot as h, createElementVNode as r, createVNode as s, withCtx as o, Transition as Z, createTextVNode as u, toDisplayString as b, createCommentVNode as i, createBlock as g, isRef as _, mergeProps as P, withModifiers as A, Fragment as ee, renderList as te, toRaw as T, pushScopeId as le, popScopeId as ae } from "vue";
+import C from "../../button/v4/ButtonV4.vue.vue.js";
+import de from "../common/Option.vue.vue.js";
+import B from "../../icon/Icon.vue.vue.js";
+import oe from "../../search/v4/SearchV4.vue.vue.js";
+import { DropdownTestIdModifiers as c } from "../../../testids/index.vue.js";
+/* empty css                                 */import y from "../../typography/Text.vue.vue.js";
+import { Dropdown as ie } from "floating-vue";
+import { dropdownCommon as ne } from "../common/Dropdown.common.vue.js";
+const se = (t) => (le("data-v-896b5344"), t = t(), ae(), t), re = ["tabindex", "data-testid"], ue = { style: { display: "flex", width: "100%" } }, ce = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], fe = {
+  key: 0,
+  class: "image-slot"
+}, me = { class: "angle-down" }, ye = {
+  key: 0,
+  ref: "listRef",
+  class: "dropdown-title"
+}, pe = ["data-testid"], he = ["data-testid"], be = {
+  key: 0,
+  class: "no-result-container"
+}, ke = {
+  key: 1,
+  class: "loader"
+}, ve = /* @__PURE__ */ se(() => /* @__PURE__ */ r("svg", {
+  width: "100",
+  height: "100",
+  viewBox: "0 0 100 100"
+}, [
+  /* @__PURE__ */ r("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "6",
+    r: "35",
+    "stroke-dasharray": "164.93361431346415 56.97787143782138"
+  }, [
+    /* @__PURE__ */ r("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;360 50 50",
+      keyTimes: "0;1"
+    })
+  ])
+], -1)), we = { key: 2 }, $e = ["aria-selected", "aria-disabled", "onClick"], ge = {
+  key: 0,
+  class: "actions"
+}, Pe = /* @__PURE__ */ Q({
+  __name: "DropdownV4",
+  props: {
+    modelValue: { default: null },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    mandatory: { type: Boolean, default: !1 },
+    helperText: { default: "" },
+    searchPlaceholder: { default: "" },
+    isOnTop: { type: Boolean, default: !1 },
+    multi: { type: Boolean, default: !1 },
+    title: { default: "" },
+    inlineSearch: { type: Boolean, default: !1 },
+    popperClass: { default: "" },
+    noResultsText: { default: "No results found" },
+    loading: { type: Boolean },
+    selected: { default: null },
+    showSelectAll: { type: Boolean },
+    defaultOpen: { type: Boolean, default: !1 },
+    showButtonOnOpen: { type: Boolean, default: !0 },
+    autoFocus: { type: Boolean, default: !1 },
+    distance: { default: 0 },
+    isOpen: { type: Boolean },
+    skidding: { default: 0 },
+    placement: { default: "bottom-start" },
+    clearable: { type: Boolean, default: !1 },
+    error: { default: "" },
+    size: { default: "lg" },
+    displayValue: null,
+    options: null,
+    onSearch: { type: Function, default: () => !0 },
+    theme: { default: "is-dropdown" },
+    container: { default: "body" },
+    flip: { type: Boolean, default: !0 },
+    keepOpen: { type: Boolean, default: !1 },
+    autoSize: { type: Boolean, default: !1 },
+    disableKeyboardEvents: { type: Boolean, default: !1 },
+    multiOptionsPlaceholderPrefix: { default: "" },
+    multiOptionsPlaceholderSuffix: { default: "" },
+    testId: { default: "" },
+    darkTheme: { type: Boolean, default: !0 },
+    valueToCopy: { default: "" }
+  },
+  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
+  setup(t, { expose: V, emit: N }) {
+    const K = t, {
+      onKeydown: p,
+      location: L,
+      open: m,
+      toggleMenu: I,
+      onButtonKeydown: k,
+      displayedValue: S,
+      labelRef: D,
+      query: v,
+      containerProps: H,
+      calculateTableHeight: F,
+      wrapperProps: M,
+      filteredOptions: G,
+      allSelected: z,
+      isIndeterminate: X,
+      onSelectAll: q,
+      virtualOptions: O,
+      isSelected: R,
+      selectedOption: E,
+      onSelect: x,
+      activeIndex: U,
+      onCancel: W,
+      onApply: Y,
+      scrollTo: j
+    } = ne(K, N), J = () => {
+    };
+    return V({
+      selectItem: x,
+      scrollTo: j
+    }), (f, a) => (d(), n("div", {
+      ref: "el",
+      class: $(["dropdown", { "dropdown--disabled": t.disabled }]),
+      tabindex: t.disabled ? -1 : 0,
+      "data-testid": `${t.testId}-${e(c).WRAPPER}`,
+      onKeydown: a[7] || (a[7] = //@ts-ignore
+      (...l) => e(p) && e(p)(...l))
+    }, [
+      h(f.$slots, "label", {}, void 0, !0),
+      r("div", ue, [
+        s(e(ie), {
+          theme: t.theme,
+          "popper-class": [
+            t.popperClass,
+            t.darkTheme ? "dark-theme-v4" : "light-theme-v4",
+            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+          ],
+          placement: t.placement,
+          skidding: t.isOnTop ? 0 : t.skidding,
+          distance: t.isOnTop ? -e(L) : t.distance,
+          flip: t.flip,
+          triggers: [],
+          shown: !!e(m),
+          "auto-hide": !1,
+          container: t.container,
+          "auto-size": t.autoSize,
+          "data-testid": `${t.testId}-${e(c).TRIGGER}`
+        }, {
+          popper: o(() => [
+            s(Z, null, {
+              default: o(() => [
+                t.inlineSearch || t.title ? (d(), n("div", ye, [
+                  r("div", null, [
+                    t.title ? (d(), n("div", {
+                      key: 0,
+                      class: "dropdown-title__text",
+                      "data-testid": `${t.testId}-${e(c).TITLE}`
+                    }, [
+                      s(e(y), { strong: "" }, {
+                        default: o(() => [
+                          u(b(t.title), 1)
+                        ]),
+                        _: 1
+                      })
+                    ], 8, pe)) : i("", !0),
+                    t.inlineSearch ? (d(), g(e(oe), {
+                      key: 1,
+                      modelValue: e(v),
+                      "onUpdate:modelValue": a[4] || (a[4] = (l) => _(v) ? v.value = l : null),
+                      placeholder: t.searchPlaceholder,
+                      class: "dropdown-title__search",
+                      variant: "transparent",
+                      size: "md",
+                      "test-id": `${t.testId}-${e(c).SEARCH}`,
+                      onKeydown: e(p)
+                    }, null, 8, ["modelValue", "placeholder", "test-id", "onKeydown"])) : i("", !0)
+                  ]),
+                  e(m) ? (d(), n("div", {
+                    key: 0,
+                    class: "dropdown",
+                    onKeydown: a[6] || (a[6] = //@ts-ignore
+                    (...l) => e(p) && e(p)(...l))
+                  }, [
+                    h(f.$slots, "input-list", { open: e(m) }, void 0, !0),
+                    r("div", P(e(H), {
+                      class: ["list-container", { "list-container--multi": t.multi }],
+                      style: { height: `${e(F)}rem` },
+                      "data-testid": `${t.testId}-${e(c).LIST_CONTAINER}`
+                    }), [
+                      r("ul", P(e(M), {
+                        role: "listbox",
+                        class: ["list", { "list--multi": t.multi }]
+                      }), [
+                        !e(G).length && !t.loading ? (d(), n("li", be, [
+                          s(e(y), {
+                            size: "sm",
+                            class: "no-result"
+                          }, {
+                            default: o(() => [
+                              u(b(t.noResultsText), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])) : i("", !0),
+                        t.loading ? (d(), n("li", ke, [
+                          s(e(B), {
+                            "font-size": "md",
+                            class: "loader-icon"
+                          }, {
+                            default: o(() => [
+                              ve
+                            ]),
+                            _: 1
+                          }),
+                          s(e(y), null, {
+                            default: o(() => [
+                              u("Loading...")
+                            ]),
+                            _: 1
+                          })
+                        ])) : i("", !0),
+                        t.showSelectAll ? (d(), n("li", we, [
+                          s(de, {
+                            "aria-selected": e(z),
+                            "aria-disabled": !!t.disabled,
+                            "selected-prop": e(z),
+                            "is-indeterminate": e(X),
+                            "select-all-option": "",
+                            onClick: a[5] || (a[5] = A((l) => e(q)(), ["stop"]))
+                          }, {
+                            default: o(() => [
+                              u("Select all ")
+                            ]),
+                            _: 1
+                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                        ])) : i("", !0),
+                        e(O).length && !t.loading ? (d(!0), n(ee, { key: 3 }, te(e(O), ({ data: l, index: w }) => (d(), n("li", {
+                          key: w,
+                          "aria-selected": e(R)(T(e(E)), l),
+                          "aria-disabled": !!t.disabled,
+                          onClick: A(() => e(x)(l, w), ["stop"])
+                        }, [
+                          h(f.$slots, "default", {
+                            option: l,
+                            selected: e(R)(T(e(E)), l),
+                            active: T(e(U)) === w
+                          }, void 0, !0)
+                        ], 8, $e))), 128)) : i("", !0)
+                      ], 16)
+                    ], 16, he),
+                    t.multi ? (d(), n("div", ge, [
+                      s(e(C), {
+                        ref: "cancel",
+                        size: "small",
+                        variant: "outlined",
+                        color: "default",
+                        "test-id": `${t.testId}-${e(c).ACTION_CANCEL}`,
+                        onClick: e(W)
+                      }, {
+                        default: o(() => [
+                          u(" Cancel ")
+                        ]),
+                        _: 1
+                      }, 8, ["test-id", "onClick"]),
+                      s(e(C), {
+                        ref: "apply",
+                        "data-testid": "mutli-apply",
+                        size: "small",
+                        class: "apply-button",
+                        "test-id": `${t.testId}-${e(c).ACTION_APPLY}`,
+                        onClick: e(Y)
+                      }, {
+                        default: o(() => [
+                          u("Apply ")
+                        ]),
+                        _: 1
+                      }, 8, ["test-id", "onClick"])
+                    ])) : i("", !0)
+                  ], 32)) : i("", !0)
+                ], 512)) : i("", !0)
+              ]),
+              _: 3
+            })
+          ]),
+          default: o(() => [
+            r("div", {
+              class: $(["button__container", {
+                "button__container--open": !!e(m),
+                [`button__container--${t.size}`]: !0,
+                "button__container--disabled": t.disabled
+              }])
+            }, [
+              f.$slots.input ? (d(), n("div", {
+                key: 0,
+                ref: "buttonRef",
+                onClick: a[0] || (a[0] = (l) => e(I)()),
+                onKeydown: a[1] || (a[1] = //@ts-ignore
+                (...l) => e(k) && e(k)(...l))
+              }, [
+                h(f.$slots, "input", {
+                  open: e(m),
+                  value: e(S),
+                  disabled: t.disabled
+                }, void 0, !0)
+              ], 544)) : i("", !0),
+              f.$slots.input ? i("", !0) : (d(), n("button", {
+                key: 1,
+                ref: "buttonRef",
+                disabled: t.disabled,
+                "aria-haspopup": !0,
+                "aria-expanded": !!e(m),
+                "aria-labelledby": e(D)?.id,
+                "aria-disabled": t.disabled,
+                class: $([{
+                  "button--open": !!e(m),
+                  [`button--${t.size}`]: !0,
+                  "button--disabled": t.disabled
+                }, "button"]),
+                onKeydown: a[2] || (a[2] = //@ts-ignore
+                (...l) => e(k) && e(k)(...l)),
+                onClick: a[3] || (a[3] = (l) => e(I)())
+              }, [
+                f.$slots.image ? (d(), n("div", fe, [
+                  h(f.$slots, "image", {}, void 0, !0)
+                ])) : i("", !0),
+                s(e(y), {
+                  size: "sm",
+                  "is-truncated": ""
+                }, {
+                  default: o(() => [
+                    u(b(e(S)), 1)
+                  ]),
+                  _: 1
+                }),
+                r("div", me, [
+                  s(e(B), {
+                    name: "angle-down",
+                    "font-size": "sm"
+                  })
+                ])
+              ], 42, ce))
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
+        r("div", null, [
+          s(e(C), {
+            color: "default",
+            onClick: J
+          }, {
+            default: o(() => [
+              s(e(B), { name: "lock" })
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      !t.error && t.helperText ? (d(), g(e(y), {
+        key: 0,
+        size: "caption",
+        class: "helper-text",
+        "test-id": `${t.testId}-${e(c).HELPER_TEXT}`
+      }, {
+        default: o(() => [
+          u(b(t.helperText), 1)
+        ]),
+        _: 1
+      }, 8, ["test-id"])) : i("", !0),
+      t.error ? (d(), g(e(y), {
+        key: 1,
+        size: "caption",
+        class: "helper-text helper-text--error",
+        "test-id": `${t.testId}-${e(c).HELPER_TEXT_ERROR}`
+      }, {
+        default: o(() => [
+          u(b(t.error), 1)
+        ]),
+        _: 1
+      }, 8, ["test-id"])) : i("", !0)
+    ], 42, re));
+  }
+});
+export {
+  Pe as default
+};