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

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

@@ -1,137 +1,119 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_896b5344_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  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.js";
-import de from "../common/Option.vue.js";
-import B from "../../icon/Icon.vue.js";
-import oe from "../../search/v4/SearchV4.vue.js";
-import "../../typography/Heading.vue.js";
-import y from "../../typography/Text.vue.js";
-import { Dropdown as ie } from "floating-vue";
+ 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.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 ne } from "../common/Dropdown.common.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 = {
+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 = {
   key: 0,
-  class: "image-slot"
-}, me = { class: "angle-down" }, ye = {
-  key: 0,
-  ref: "listRef",
-  class: "dropdown-title"
-}, pe = ["data-testid"], he = ["data-testid"], be = {
+  class: "inline-search-wrapper"
+}, me = ["data-testid"], ye = {
   key: 0,
   class: "no-result-container"
-}, ke = {
+}, pe = {
   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({
+}, he = { key: 2 }, ge = ["aria-selected", "aria-disabled", "onClick"], be = {
+  key: 1,
+  class: "actions-wrapper"
+}, ke = { class: "actions-clear-all" }, ve = { class: "actions-apply-cancel" }, Le = /* @__PURE__ */ Z({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
+    selected: { default: null },
+    multi: { type: Boolean, default: !1 },
     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 },
+    testId: { default: "" },
+    isOpen: { type: Boolean },
+    options: null,
     showSelectAll: { type: Boolean },
     defaultOpen: { type: Boolean, default: !1 },
-    showButtonOnOpen: { type: Boolean, default: !0 },
-    autoFocus: { type: Boolean, default: !1 },
+    keepOpen: { type: Boolean, default: !1 },
+    autoSize: { type: Boolean, default: !1 },
+    disableKeyboardEvents: { type: Boolean, default: !1 },
+    isOnTop: { type: Boolean, default: !1 },
     distance: { default: 0 },
-    isOpen: { type: Boolean },
+    container: { default: "body" },
+    flip: { type: Boolean, default: !0 },
     skidding: { default: 0 },
     placement: { default: "bottom-start" },
-    clearable: { type: Boolean, default: !1 },
-    error: { default: "" },
+    triggerLabel: { default: "" },
+    triggerHelperText: { default: "" },
+    triggerFeedbackText: { default: "" },
+    triggerFeedbackVariant: { default: null },
     size: { default: "lg" },
-    displayValue: null,
-    options: null,
+    mandatory: { type: Boolean, default: !1 },
+    inlineSearch: { type: Boolean, default: !1 },
+    inlineSearchPlaceholder: { default: "Search" },
     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 },
+    noResultsText: { default: "No results found" },
+    searchAutoFocus: { type: Boolean, default: !0 },
+    onClear: { type: Function, default: () => !0 },
+    displayValue: null,
     multiOptionsPlaceholderPrefix: { default: "" },
     multiOptionsPlaceholderSuffix: { default: "" },
-    testId: { default: "" },
-    darkTheme: { type: Boolean, default: !0 },
-    valueToCopy: { default: "" }
+    theme: { default: "is-dropdown-v4" },
+    darkTheme: { type: Boolean, default: !1 }
   },
   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 }]),
+  setup(t, { expose: x, emit: N }) {
+    const R = t, L = {
+      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", {
+      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: a[7] || (a[7] = //@ts-ignore
-      (...l) => e(p) && e(p)(...l))
+      onKeydown: i[4] || (i[4] = //@ts-ignore
+      (...l) => e(m) && e(m)(...l))
     }, [
-      h(f.$slots, "label", {}, void 0, !0),
-      r("div", ue, [
-        s(e(ie), {
+      p(y.$slots, "label", {}, void 0, !0),
+      u("div", ce, [
+        a(e(ne), {
           theme: t.theme,
           "popper-class": [
             t.popperClass,
@@ -140,249 +122,195 @@ const se = (t) => (le("data-v-896b5344"), t = t(), ae(), t), re = ["tabindex", "
           ],
           placement: t.placement,
           skidding: t.isOnTop ? 0 : t.skidding,
-          distance: t.isOnTop ? -e(L) : t.distance,
+          distance: t.distance,
           flip: t.flip,
           triggers: [],
-          shown: !!e(m),
+          shown: !!e(r),
           "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", {
+          popper: n(() => [
+            a(_, null, {
+              default: n(() => [
+                e(r) ? (o(), d("div", {
+                  key: 0,
+                  ref_key: "listRef",
+                  ref: q,
+                  class: b(["light-theme-v4", {
+                    "dropdown--disabled": t.disabled,
+                    "inline-search": t.inlineSearch
+                  }])
+                }, [
+                  e(r) ? (o(), d("div", {
                     key: 0,
                     class: "dropdown",
-                    onKeydown: a[6] || (a[6] = //@ts-ignore
-                    (...l) => e(p) && e(p)(...l))
+                    onKeydown: i[3] || (i[3] = //@ts-ignore
+                    (...l) => e(m) && e(m)(...l))
                   }, [
-                    h(f.$slots, "input-list", { open: e(m) }, void 0, !0),
-                    r("div", P(e(H), {
+                    e(r) && t.inlineSearch ? (o(), d("div", fe, [
+                      a(e(de), {
+                        modelValue: e(h),
+                        "onUpdate:modelValue": [
+                          i[1] || (i[1] = (l) => ee(h) ? h.value = l : null),
+                          t.onClear
+                        ],
+                        placeholder: t.inlineSearchPlaceholder,
+                        variant: "transparent",
+                        size: "md",
+                        "auto-focus": t.searchAutoFocus,
+                        "test-id": `${t.testId}-${e(c).SEARCH}`,
+                        onKeydown: e(m)
+                      }, 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), {
                       class: ["list-container", { "list-container--multi": t.multi }],
-                      style: { height: `${e(F)}rem` },
+                      style: { height: `${e(D)}rem` },
                       "data-testid": `${t.testId}-${e(c).LIST_CONTAINER}`
                     }), [
-                      r("ul", P(e(M), {
+                      u("ul", A(e(w), {
+                        style: {
+                          height: Number(e(w).style.height) - 4
+                        },
                         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)
+                        !e(F).length && !t.loading ? (o(), d("li", ye, [
+                          a(e(O), { variant: "body2" }, {
+                            default: n(() => [
+                              f(te(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...")
+                        ])) : s("", !0),
+                        t.loading ? (o(), d("li", pe, [
+                          a(e(re)),
+                          a(e(O), null, {
+                            default: n(() => [
+                              f("Loading...")
                             ]),
                             _: 1
                           })
-                        ])) : i("", !0),
-                        t.showSelectAll ? (d(), n("li", we, [
-                          s(de, {
-                            "aria-selected": e(z),
+                        ])) : s("", !0),
+                        t.showSelectAll ? (o(), d("li", he, [
+                          a(e(oe), {
+                            "aria-selected": e(C),
                             "aria-disabled": !!t.disabled,
-                            "selected-prop": e(z),
-                            "is-indeterminate": e(X),
+                            "selected-prop": e(C),
+                            "is-indeterminate": e(K),
                             "select-all-option": "",
-                            onClick: a[5] || (a[5] = A((l) => e(q)(), ["stop"]))
+                            onClick: i[2] || (i[2] = B((l) => e(H)(), ["stop"]))
                           }, {
-                            default: o(() => [
-                              u("Select all ")
+                            default: n(() => [
+                              f("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),
+                        ])) : 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),
                           "aria-disabled": !!t.disabled,
-                          onClick: A(() => e(x)(l, w), ["stop"])
+                          onClick: B(() => e($)(l, g), ["stop"])
                         }, [
-                          h(f.$slots, "default", {
+                          p(y.$slots, "default", {
                             option: l,
-                            selected: e(R)(T(e(E)), l),
-                            active: T(e(U)) === w
+                            selected: e(I)(k(e(S)), l),
+                            active: k(e(M)) === g
                           }, void 0, !0)
-                        ], 8, $e))), 128)) : i("", !0)
+                        ], 8, ge))), 128)) : s("", !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)
+                    ], 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 ")
+                          ]),
+                          _: 1
+                        }, 8, ["test-id", "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 ")
+                          ]),
+                          _: 1
+                        }, 8, ["test-id", "onClick"]),
+                        a(e(v), {
+                          ref_key: "apply",
+                          ref: Y,
+                          "data-testid": "mutli-apply",
+                          size: "small",
+                          class: "apply-button",
+                          "test-id": `${t.testId}-${e(c).ACTION_APPLY}`,
+                          onClick: e(U)
+                        }, {
+                          default: n(() => [
+                            f("Apply ")
+                          ]),
+                          _: 1
+                        }, 8, ["test-id", "onClick"])
+                      ])
+                    ])) : s("", !0)
+                  ], 32)) : s("", !0)
+                ], 2)) : s("", !0)
               ]),
               _: 3
             })
           ]),
-          default: o(() => [
-            r("div", {
-              class: $(["button__container", {
-                "button__container--open": !!e(m),
+          default: n(() => [
+            u("div", {
+              class: b(["button__container", {
+                "button__container--open": !!e(r),
                 [`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))
+              p(y.$slots, "dropdown-trigger", {}, () => [
+                u("div", {
+                  ref_key: "buttonRef",
+                  ref: W
+                }, [
+                  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"])
+                ], 512)
+              ], !0)
             ], 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));
+        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"])
+      ])
+    ], 42, ue));
   }
 });
 export {
-  Pe as default
+  Le as default
 };