@ironsource/shared-ui 2.0.0-rc.5 → 2.0.0-rc.6

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

@@ -1,27 +1,32 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_34bd23a1_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as Z, openBlock as o, createElementBlock as d, normalizeClass as b, unref as e, renderSlot as p, createElementVNode as u, createVNode as a, withCtx as n, Transition as _, isRef as ee, createCommentVNode as s, mergeProps as A, createTextVNode as f, toDisplayString as te, withModifiers as B, Fragment as le, renderList as ae, toRaw as k } from "vue";
-import v from "../../button/v4/ButtonV4.vue.js";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_571b7c2f_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as te, openBlock as a, createElementBlock as i, mergeProps as r, unref as e, renderSlot as h, createElementVNode as m, createVNode as n, withCtx as s, Transition as le, normalizeClass as R, isRef as oe, createCommentVNode as d, createTextVNode as p, toDisplayString as ae, withModifiers as V, Fragment as ie, renderList as ne, toRaw as w } from "vue";
+import I from "../../button/v4/ButtonV4.vue.js";
+import "../../button/v4/IconButtonV4.vue.js";
 import "./DropdownV4.vue.js";
-import ie from "./DefaultDropdownTrigger.vue.js";
-import oe from "./OptionV4.vue.js";
-import de from "../../search/v4/SearchV4.vue.js";
-import O from "../../typography/v4/Typography.vue.js";
-import { Dropdown as ne } from "floating-vue";
-import { DropdownTestIdModifiers as c } from "../../../testids/index.js";
-import { dropdownCommon as se } from "../common/Dropdown.common.js";
-import re from "../../loader/v4/Loader.vue.js";
-const ue = ["tabindex", "data-testid"], ce = { style: { display: "flex", width: "100%" } }, fe = {
+import de from "./DefaultDropdownTrigger.vue.js";
+import re from "./IconButtonDropdownTrigger.vue.js";
+import se from "./ChipDropdownTrigger.vue.js";
+import ue from "./OptionV4.vue.js";
+import ce from "../../search/v4/SearchV4.vue.js";
+import x from "../../typography/v4/Typography.vue.js";
+import { Dropdown as fe } from "floating-vue";
+import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
+import { dropdownCommon as me } from "../common/Dropdown.common.js";
+import pe from "../../loader/v4/Loader.vue.js";
+import { useTestIdAttrs as ye } from "../../../utils/testIds.js";
+import { TRIGGERS as b } from "./Dropdown.types.js";
+const ge = ["tabindex"], he = { style: { display: "flex", width: "100%" } }, be = { key: 0 }, ke = { key: 1 }, Te = { key: 2 }, ve = {
   key: 0,
   class: "inline-search-wrapper"
-}, me = ["data-testid"], ye = {
+}, Ce = {
   key: 0,
   class: "no-result-container"
-}, pe = {
+}, we = {
   key: 1,
   class: "loader"
-}, he = { key: 2 }, ge = ["aria-selected", "aria-disabled", "onClick"], be = {
+}, Ie = { key: 2 }, Se = ["aria-selected", "aria-disabled", "onClick"], Ae = {
   key: 1,
   class: "actions-wrapper"
-}, ke = { class: "actions-clear-all" }, ve = { class: "actions-apply-cancel" }, Le = /* @__PURE__ */ Z({
+}, Be = { class: "actions-clear-all" }, Le = { class: "actions-apply-cancel" }, qe = /* @__PURE__ */ te({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
@@ -51,6 +56,7 @@ const ue = ["tabindex", "data-testid"], ce = { style: { display: "flex", width:
     triggerFeedbackVariant: { default: null },
     size: { default: "lg" },
     mandatory: { type: Boolean, default: !1 },
+    predefinedTrigger: { default: b.DEFAULT },
     inlineSearch: { type: Boolean, default: !1 },
     inlineSearchPlaceholder: { default: "Search" },
     onSearch: { type: Function, default: () => !0 },
@@ -58,259 +64,289 @@ const ue = ["tabindex", "data-testid"], ce = { style: { display: "flex", width:
     searchAutoFocus: { type: Boolean, default: !0 },
     onClear: { type: Function, default: () => !0 },
     displayValue: null,
-    multiOptionsPlaceholderPrefix: { default: "" },
-    multiOptionsPlaceholderSuffix: { default: "" },
-    theme: { default: "is-dropdown-v4" },
-    darkTheme: { type: Boolean, default: !1 }
+    theme: { default: "light-theme-v4" }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
-  setup(t, { expose: x, emit: N }) {
-    const R = t, L = {
+  setup(t, { expose: D, emit: z }) {
+    const S = t, P = {
       MULTILINE_LIST_HEIGHT: 48,
       LIST_HEIGHT: 32 + 4,
       MAX_NUMBER_OF_OPTIONS: 7,
       PADDING_PX: -4
     }, {
-      onKeydown: m,
-      open: r,
-      toggleMenu: P,
-      onButtonKeydown: V,
-      displayedValue: z,
-      query: h,
-      containerProps: E,
-      calculateTableHeight: D,
-      wrapperProps: w,
-      filteredOptions: F,
-      allSelected: C,
-      isIndeterminate: K,
-      onSelectAll: H,
-      virtualOptions: T,
-      isSelected: I,
-      selectedOption: S,
-      onSelect: $,
-      activeIndex: M,
-      onCancel: G,
-      onApply: U,
-      scrollTo: X,
-      listRef: q,
-      buttonRef: W,
-      apply: Y,
-      cancel: j,
-      el: J,
-      onClearAllSelections: Q
-    } = se(R, N, L);
-    return x({
-      selectItem: $,
-      scrollTo: X
-    }), (y, i) => (o(), d("div", {
+      onKeydown: y,
+      open: c,
+      toggleMenu: k,
+      onButtonKeydown: F,
+      displayedValue: $,
+      query: T,
+      containerProps: K,
+      calculateTableHeight: H,
+      wrapperProps: A,
+      filteredOptions: U,
+      allSelected: B,
+      isIndeterminate: G,
+      onSelectAll: M,
+      virtualOptions: L,
+      isSelected: O,
+      selectedOption: v,
+      onSelect: N,
+      activeIndex: X,
+      onCancel: q,
+      onApply: W,
+      scrollTo: Y,
+      listRef: j,
+      buttonRef: J,
+      apply: Q,
+      cancel: Z,
+      el: _,
+      onClearAllSelections: E,
+      clearAll: ee
+    } = me(S, z, P);
+    D({
+      selectItem: N,
+      scrollTo: Y
+    });
+    const f = ye(S.testId, u);
+    return (g, l) => (a(), i("div", r({
       ref_key: "el",
-      ref: J,
-      class: b(["dropdown", { "dropdown--disabled": t.disabled }]),
-      tabindex: t.disabled ? -1 : 0,
-      "data-testid": `${t.testId}-${e(c).WRAPPER}`,
-      onKeydown: i[4] || (i[4] = //@ts-ignore
-      (...l) => e(m) && e(m)(...l))
-    }, [
-      p(y.$slots, "label", {}, void 0, !0),
-      u("div", ce, [
-        a(e(ne), {
+      ref: _,
+      class: ["dropdown", { "dropdown--disabled": t.disabled }],
+      tabindex: t.disabled ? -1 : 0
+    }, e(f)[e(u).WRAPPER], {
+      onKeydown: l[7] || (l[7] = //@ts-ignore
+      (...o) => e(y) && e(y)(...o))
+    }), [
+      h(g.$slots, "label", {}, void 0, !0),
+      m("div", he, [
+        n(e(fe), r({
           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
+            t.theme,
+            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null,
+            "v4-dropdown"
           ],
           placement: t.placement,
           skidding: t.isOnTop ? 0 : t.skidding,
           distance: t.distance,
           flip: t.flip,
           triggers: [],
-          shown: !!e(r),
+          shown: !!e(c),
           "auto-hide": !1,
           container: t.container,
-          "auto-size": t.autoSize,
-          "data-testid": `${t.testId}-${e(c).TRIGGER}`
-        }, {
-          popper: n(() => [
-            a(_, null, {
-              default: n(() => [
-                e(r) ? (o(), d("div", {
+          "auto-size": t.autoSize
+        }, e(f)[e(u).TRIGGER]), {
+          popper: s(() => [
+            n(le, null, {
+              default: s(() => [
+                e(c) ? (a(), i("div", {
                   key: 0,
                   ref_key: "listRef",
-                  ref: q,
-                  class: b(["light-theme-v4", {
+                  ref: j,
+                  class: R(["light-theme-v4", {
                     "dropdown--disabled": t.disabled,
                     "inline-search": t.inlineSearch
                   }])
                 }, [
-                  e(r) ? (o(), d("div", {
+                  e(c) ? (a(), i("div", {
                     key: 0,
                     class: "dropdown",
-                    onKeydown: i[3] || (i[3] = //@ts-ignore
-                    (...l) => e(m) && e(m)(...l))
+                    onKeydown: l[6] || (l[6] = //@ts-ignore
+                    (...o) => e(y) && e(y)(...o))
                   }, [
-                    e(r) && t.inlineSearch ? (o(), d("div", fe, [
-                      a(e(de), {
-                        modelValue: e(h),
+                    e(c) && t.inlineSearch ? (a(), i("div", ve, [
+                      n(e(ce), {
+                        modelValue: e(T),
                         "onUpdate:modelValue": [
-                          i[1] || (i[1] = (l) => ee(h) ? h.value = l : null),
+                          l[4] || (l[4] = (o) => oe(T) ? T.value = o : null),
                           t.onClear
                         ],
                         placeholder: t.inlineSearchPlaceholder,
                         variant: "transparent",
                         size: "md",
                         "auto-focus": t.searchAutoFocus,
-                        "test-id": `${t.testId}-${e(c).SEARCH}`,
-                        onKeydown: e(m)
+                        "test-id": t.testId,
+                        onKeydown: e(y)
                       }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
-                    ])) : s("", !0),
-                    p(y.$slots, "input-list", { open: e(r) }, void 0, !0),
-                    u("div", A(e(E), {
+                    ])) : d("", !0),
+                    h(g.$slots, "input-list", { open: e(c) }, void 0, !0),
+                    m("div", r({
                       class: ["list-container", { "list-container--multi": t.multi }],
-                      style: { height: `${e(D)}rem` },
-                      "data-testid": `${t.testId}-${e(c).LIST_CONTAINER}`
+                      style: { height: `${e(H)}rem` }
+                    }, {
+                      ...e(K),
+                      ...e(f)[e(u).LIST_CONTAINER]
                     }), [
-                      u("ul", A(e(w), {
+                      m("ul", r(e(A), {
                         style: {
-                          height: Number(e(w).style.height) - 4
+                          height: Number(e(A).style.height) - 4
                         },
                         role: "listbox",
                         class: ["list", { "list--multi": t.multi }]
                       }), [
-                        !e(F).length && !t.loading ? (o(), d("li", ye, [
-                          a(e(O), { variant: "body2" }, {
-                            default: n(() => [
-                              f(te(t.noResultsText), 1)
+                        !e(U).length && !t.loading ? (a(), i("li", Ce, [
+                          n(e(x), r({ variant: "body2" }, e(f)[e(u).NO_RESULT]), {
+                            default: s(() => [
+                              p(ae(t.noResultsText), 1)
                             ]),
                             _: 1
-                          })
-                        ])) : s("", !0),
-                        t.loading ? (o(), d("li", pe, [
-                          a(e(re)),
-                          a(e(O), null, {
-                            default: n(() => [
-                              f("Loading...")
+                          }, 16)
+                        ])) : d("", !0),
+                        t.loading ? (a(), i("li", we, [
+                          n(e(pe)),
+                          n(e(x), null, {
+                            default: s(() => [
+                              p("Loading...")
                             ]),
                             _: 1
                           })
-                        ])) : s("", !0),
-                        t.showSelectAll ? (o(), d("li", he, [
-                          a(e(oe), {
-                            "aria-selected": e(C),
-                            "aria-disabled": !!t.disabled,
-                            "selected-prop": e(C),
-                            "is-indeterminate": e(K),
-                            "select-all-option": "",
-                            onClick: i[2] || (i[2] = B((l) => e(H)(), ["stop"]))
-                          }, {
-                            default: n(() => [
-                              f("Select all ")
+                        ])) : d("", !0),
+                        t.showSelectAll ? (a(), i("li", Ie, [
+                          n(e(ue), r(
+                            {
+                              "aria-selected": e(B),
+                              "aria-disabled": !!t.disabled,
+                              "selected-prop": e(B),
+                              "is-indeterminate": e(G),
+                              "select-all-option": ""
+                            },
+                            e(f)[e(u).SELECT_ALL],
+                            {
+                              onClick: l[5] || (l[5] = V((o) => e(M)(), ["stop"]))
+                            }
+                          ), {
+                            default: s(() => [
+                              p("Select all ")
                             ]),
                             _: 1
-                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
-                        ])) : s("", !0),
-                        e(T).length && !t.loading ? (o(!0), d(le, { key: 3 }, ae(e(T), ({ data: l, index: g }) => (o(), d("li", {
-                          key: g,
-                          "aria-selected": e(I)(k(e(S)), l),
+                          }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                        ])) : d("", !0),
+                        e(L).length && !t.loading ? (a(!0), i(ie, { key: 3 }, ne(e(L), ({ data: o, index: C }) => (a(), i("li", {
+                          key: C,
+                          "aria-selected": e(O)(w(e(v)), o),
                           "aria-disabled": !!t.disabled,
-                          onClick: B(() => e($)(l, g), ["stop"])
+                          onClick: V(() => e(N)(o, C), ["stop"])
                         }, [
-                          p(y.$slots, "default", {
-                            option: l,
-                            selected: e(I)(k(e(S)), l),
-                            active: k(e(M)) === g
+                          h(g.$slots, "default", {
+                            option: o,
+                            selected: e(O)(w(e(v)), o),
+                            active: w(e(X)) === C
                           }, void 0, !0)
-                        ], 8, ge))), 128)) : s("", !0)
+                        ], 8, Se))), 128)) : d("", !0)
                       ], 16)
-                    ], 16, me),
-                    t.multi ? (o(), d("div", be, [
-                      u("div", ke, [
-                        a(e(v), {
-                          ref: "clearAll",
-                          size: "small",
-                          variant: "text",
-                          color: "primary",
-                          "test-id": `${t.testId}-${e(c).ACTION_CLEAR_ALL}`,
-                          onClick: e(Q)
-                        }, {
-                          default: n(() => [
-                            f(" Clear all ")
+                    ], 16),
+                    t.multi ? (a(), i("div", Ae, [
+                      m("div", Be, [
+                        n(e(I), r(
+                          {
+                            ref_key: "clearAll",
+                            ref: ee,
+                            size: "small",
+                            variant: "text",
+                            color: "primary"
+                          },
+                          e(f)[e(u).ACTION_CLEAR_ALL],
+                          { onClick: e(E) }
+                        ), {
+                          default: s(() => [
+                            p(" Clear all ")
                           ]),
                           _: 1
-                        }, 8, ["test-id", "onClick"])
+                        }, 16, ["onClick"])
                       ]),
-                      u("div", ve, [
-                        a(e(v), {
-                          ref_key: "cancel",
-                          ref: j,
-                          size: "small",
-                          variant: "outlined",
-                          color: "primary",
-                          "test-id": `${t.testId}-${e(c).ACTION_CANCEL}`,
-                          onClick: e(G)
-                        }, {
-                          default: n(() => [
-                            f(" Cancel ")
+                      m("div", Le, [
+                        n(e(I), r(
+                          {
+                            ref_key: "cancel",
+                            ref: Z,
+                            size: "small",
+                            variant: "outlined",
+                            color: "primary"
+                          },
+                          e(f)[e(u).ACTION_CANCEL],
+                          { onClick: e(q) }
+                        ), {
+                          default: s(() => [
+                            p(" Cancel ")
                           ]),
                           _: 1
-                        }, 8, ["test-id", "onClick"]),
-                        a(e(v), {
+                        }, 16, ["onClick"]),
+                        n(e(I), r({
                           ref_key: "apply",
-                          ref: Y,
+                          ref: Q,
                           "data-testid": "mutli-apply",
                           size: "small",
-                          class: "apply-button",
-                          "test-id": `${t.testId}-${e(c).ACTION_APPLY}`,
-                          onClick: e(U)
-                        }, {
-                          default: n(() => [
-                            f("Apply ")
+                          class: "apply-button"
+                        }, e(f)[e(u).ACTION_APPLY], { onClick: e(W) }), {
+                          default: s(() => [
+                            p("Apply ")
                           ]),
                           _: 1
-                        }, 8, ["test-id", "onClick"])
+                        }, 16, ["onClick"])
                       ])
-                    ])) : s("", !0)
-                  ], 32)) : s("", !0)
-                ], 2)) : s("", !0)
+                    ])) : d("", !0)
+                  ], 32)) : d("", !0)
+                ], 2)) : d("", !0)
               ]),
               _: 3
             })
           ]),
-          default: n(() => [
-            u("div", {
-              class: b(["button__container", {
-                "button__container--open": !!e(r),
+          default: s(() => [
+            m("div", {
+              class: R(["button__container", {
+                "button__container--open": !!e(c),
                 [`button__container--${t.size}`]: !0,
                 "button__container--disabled": t.disabled
               }])
             }, [
-              p(y.$slots, "dropdown-trigger", {}, () => [
-                u("div", {
+              h(g.$slots, "dropdown-trigger", {}, () => [
+                m("div", {
                   ref_key: "buttonRef",
-                  ref: W
+                  ref: J
                 }, [
-                  a(e(ie), {
-                    placeholder: e(z),
-                    open: e(r),
-                    label: t.triggerLabel,
-                    "hover-help-text": t.triggerHelperText,
-                    "feedback-text": t.triggerFeedbackText,
-                    "feedback-variant": t.triggerFeedbackVariant,
-                    mandatory: t.mandatory,
-                    "test-id": `${t.testId}-trigger`,
-                    onKeydown: e(V),
-                    onClick: i[0] || (i[0] = (l) => e(P)())
-                  }, null, 8, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "onKeydown"])
+                  !t.predefinedTrigger || t.predefinedTrigger === e(b).DEFAULT ? (a(), i("div", be, [
+                    n(e(de), {
+                      placeholder: e($),
+                      open: e(c),
+                      label: t.triggerLabel,
+                      "hover-help-text": t.triggerHelperText,
+                      "feedback-text": t.triggerFeedbackText,
+                      "feedback-variant": t.triggerFeedbackVariant,
+                      mandatory: t.mandatory,
+                      "test-id": t.testId,
+                      onKeydown: e(F),
+                      onClick: l[0] || (l[0] = (o) => e(k)())
+                    }, null, 8, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "onKeydown"])
+                  ])) : d("", !0),
+                  t.predefinedTrigger === e(b).ICON_BUTTON ? (a(), i("div", ke, [
+                    n(e(re), {
+                      onClick: l[1] || (l[1] = (o) => e(k)())
+                    })
+                  ])) : d("", !0),
+                  t.predefinedTrigger === e(b).CHIP ? (a(), i("div", Te, [
+                    n(e(se), {
+                      open: e(c),
+                      label: t.placeholder,
+                      "test-id": t.testId,
+                      options: t.options,
+                      "selected-option": e(v),
+                      "display-value": t.displayValue,
+                      multi: t.multi,
+                      onClick: l[2] || (l[2] = (o) => e(k)()),
+                      onClear: l[3] || (l[3] = (o) => e(E)())
+                    }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
+                  ])) : d("", !0)
                 ], 512)
               ], !0)
             ], 2)
           ]),
           _: 3
-        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"])
+        }, 16, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"])
       ])
-    ], 42, ue));
+    ], 16, ge));
   }
 });
 export {
-  Le as default
+  qe as default
 };

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

@@ -0,0 +1,29 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    testId?: string;
+}>, {
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    testId?: string;
+}>, {
+    testId: string;
+}>>>, {
+    testId: string;
+}>;
+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];
+} & {};

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

@@ -0,0 +1,7 @@
+import o from "./IconButtonDropdownTrigger.vue2.js";
+/* empty css                                */import t from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_59fb505a_lang.css"; //*');
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-59fb505a"]]);
+export {
+  p as default
+};

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

@@ -0,0 +1,19 @@
+ import "../../../IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_59fb505a_lang.css"; import { defineComponent as t, openBlock as r, createBlock as n, unref as p, mergeProps as c } from "vue";
+import "../../button/v4/ButtonV4.vue.js";
+import m from "../../button/v4/IconButtonV4.vue.js";
+const i = /* @__PURE__ */ t({
+  __name: "IconButtonDropdownTrigger",
+  props: {
+    testId: { default: "" }
+  },
+  setup(o) {
+    const e = o;
+    return (s, u) => (r(), n(p(m), c({
+      "icon-name": "dots-three",
+      type: "bold"
+    }, e), null, 16));
+  }
+});
+export {
+  i as default
+};