@ironsource/shared-ui 2.1.1 → 2.1.2

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

@@ -1,34 +1,34 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_19f8fedd_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ae, computed as P, openBlock as i, createElementBlock as n, mergeProps as s, unref as e, renderSlot as C, createElementVNode as p, createVNode as a, withCtx as u, Transition as de, normalizeClass as z, normalizeStyle as re, isRef as se, createCommentVNode as d, createTextVNode as g, toDisplayString as ue, withModifiers as V, Fragment as ce, renderList as fe, toRaw as T, createBlock as me, resolveDynamicComponent as pe } from "vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_258b9f7e_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ae, computed as V, openBlock as i, createElementBlock as n, mergeProps as s, unref as e, renderSlot as I, createElementVNode as p, createVNode as a, withCtx as u, Transition as de, normalizeClass as x, normalizeStyle as re, isRef as se, createCommentVNode as d, createTextVNode as g, toDisplayString as ue, withModifiers as F, Fragment as ce, renderList as fe, toRaw as k, createBlock as me, resolveDynamicComponent as pe } from "vue";
 import A from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "./DropdownV4.vue.js";
 import ye from "./DefaultDropdownTrigger.vue.js";
 import ge from "./IconButtonDropdownTrigger.vue.js";
 import he from "./ChipDropdownTrigger.vue.js";
-import ke from "./AppDropdownTrigger.vue.js";
-import x from "./OptionV4.vue.js";
-import Te from "../../search/v4/SearchV4.vue.js";
-import F from "../../typography/v4/Typography.vue.js";
+import Te from "./AppDropdownTrigger.vue.js";
+import $ from "./OptionV4.vue.js";
+import ke from "../../search/v4/SearchV4.vue.js";
+import H from "../../typography/v4/Typography.vue.js";
 import { Dropdown as ve } from "floating-vue";
 import { DropdownTestIdModifiers as c } from "../../../testids/index.js";
 import { dropdownCommon as be } from "../common/Dropdown.common.js";
-import Ce from "../../loader/v4/Loader.vue.js";
-import { useTestIdAttrs as we } from "../../../utils/testIds.js";
+import Ie from "../../loader/v4/Loader.vue.js";
+import { useTestIdAttrs as Ce } from "../../../utils/testIds.js";
 import { TRIGGERS as y } from "./Dropdown.types.js";
-import { useElementSize as Ie } from "@vueuse/core";
-const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le = { key: 0 }, Be = { key: 1 }, Ne = { key: 2 }, Oe = {
+import { useElementSize as we } from "@vueuse/core";
+const Se = ["tabindex"], Ae = { style: { width: "100%" } }, Le = { key: 0 }, Ne = { key: 1 }, Be = { key: 2 }, Oe = {
   key: 0,
   class: "inline-search-wrapper"
-}, Ee = {
+}, De = {
   key: 0,
   class: "no-result-container"
-}, Ke = {
+}, Ee = {
   key: 1,
   class: "loader"
-}, Re = { key: 2 }, De = ["aria-selected", "aria-disabled", "onClick"], Pe = {
+}, Re = { key: 2 }, Pe = ["aria-selected", "aria-disabled", "onClick"], ze = {
   key: 1,
   class: "actions-wrapper"
-}, ze = { class: "actions-clear-all" }, Ve = { class: "actions-apply-cancel" }, ot = /* @__PURE__ */ ae({
+}, Ke = { class: "actions-clear-all" }, Ve = { class: "actions-apply-cancel" }, ot = /* @__PURE__ */ ae({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
@@ -41,7 +41,7 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
     testId: { default: "" },
     isOpen: { type: Boolean },
     options: null,
-    showSelectAll: { type: Boolean },
+    showSelectAll: { type: Boolean, default: !0 },
     defaultOpen: { type: Boolean, default: !1 },
     keepOpen: { type: Boolean, default: !1 },
     autoSize: { type: Boolean, default: !1 },
@@ -56,7 +56,7 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
     triggerHelperText: { default: "" },
     triggerFeedbackText: { default: "" },
     triggerFeedbackVariant: { default: null },
-    size: { default: "lg" },
+    size: { default: "medium" },
     mandatory: { type: Boolean, default: !1 },
     predefinedTrigger: { default: y.DEFAULT },
     inlineSearch: { type: Boolean, default: !1 },
@@ -73,61 +73,63 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
     valueToCopy: { default: null },
     theme: { default: "light-theme-v4" },
     fullWidth: { type: Boolean, default: !0 },
-    optionsListWidth: { default: null }
+    optionsListWidth: { default: null },
+    statusType: { default: null }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
-  setup(t, { expose: $, emit: U }) {
-    const r = t, H = {
+  setup(t, { expose: U, emit: W }) {
+    const r = t, L = {
       MULTILINE_LIST_HEIGHT: 48,
       LIST_HEIGHT: 32 + 4,
-      MAX_NUMBER_OF_OPTIONS: 7,
-      PADDING_PX: -4
+      MAX_NUMBER_OF_OPTIONS: 7.5,
+      PADDING_PX: 0,
+      DROPLIST_MIN_WIDTH: 240
     }, {
       onKeydown: h,
       open: f,
-      toggleMenu: w,
-      onButtonKeydown: G,
-      query: I,
-      containerProps: W,
-      calculateTableHeight: M,
-      wrapperProps: L,
-      filteredOptions: X,
+      toggleMenu: C,
+      onButtonKeydown: M,
+      query: w,
+      containerProps: G,
+      calculateTableHeight: X,
+      wrapperProps: N,
+      filteredOptions: q,
       allSelected: B,
-      isIndeterminate: q,
-      onSelectAll: Y,
-      virtualOptions: N,
+      isIndeterminate: Y,
+      onSelectAll: j,
+      virtualOptions: O,
       isSelected: S,
-      selectedOption: k,
-      onSelect: O,
+      selectedOption: T,
+      onSelect: D,
       activeIndex: E,
-      onCancel: j,
-      onApply: J,
-      scrollTo: Q,
-      listRef: Z,
-      buttonRef: K,
-      apply: _,
-      cancel: ee,
-      el: te,
-      onClearAllSelections: R,
-      clearAll: le
-    } = be(r, U, H);
-    $({
-      selectItem: O,
-      scrollTo: Q
+      onCancel: J,
+      onApply: Q,
+      scrollTo: Z,
+      listRef: _,
+      buttonRef: R,
+      apply: ee,
+      cancel: te,
+      el: le,
+      onClearAllSelections: P,
+      clearAll: oe
+    } = be(r, W, L);
+    U({
+      selectItem: D,
+      scrollTo: Z
     });
-    const m = we(r.testId, c), D = P(() => !r.predefinedTrigger || r.predefinedTrigger === y.DEFAULT ? ye : r.predefinedTrigger === y.APP ? ke : null), { width: oe } = Ie(K), ie = P(() => r.optionsListWidth ? r.optionsListWidth : !r.predefinedTrigger || r.predefinedTrigger === y.DEFAULT || r.predefinedTrigger === y.APP ? `${oe.value - 2}px` : "auto"), ne = () => {
-      w();
+    const m = Ce(r.testId, c), z = V(() => !r.predefinedTrigger || r.predefinedTrigger === y.DEFAULT ? ye : r.predefinedTrigger === y.APP ? Te : null), { width: K } = we(R), ie = V(() => r.optionsListWidth ? r.optionsListWidth : !r.predefinedTrigger || r.predefinedTrigger === y.DEFAULT || r.predefinedTrigger === y.APP ? K.value - 2 > 240 ? `${K.value - 2}px` : `${L.DROPLIST_MIN_WIDTH}px` : "auto"), ne = () => {
+      C();
     };
     return (v, o) => (i(), n("div", s({
       ref_key: "el",
-      ref: te,
-      class: ["dropdown dropdown--main-wrapper", { "dropdown--disabled": t.disabled, "full-width": t.fullWidth }],
+      ref: le,
+      class: ["dropdown dropdown--main-wrapper", [{ "dropdown--disabled": t.disabled, "full-width": t.fullWidth }]],
       tabindex: t.disabled ? -1 : 0
     }, e(m)[e(c).WRAPPER], {
       onKeydown: o[6] || (o[6] = //@ts-ignore
       (...l) => e(h) && e(h)(...l))
     }), [
-      C(v.$slots, "label", {}, void 0, !0),
+      I(v.$slots, "label", {}, void 0, !0),
       p("div", Ae, [
         a(e(ve), s({
           theme: t.theme,
@@ -153,8 +155,8 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                 e(f) ? (i(), n("div", {
                   key: 0,
                   ref_key: "listRef",
-                  ref: Z,
-                  class: z(["light-theme-v4", {
+                  ref: _,
+                  class: x(["light-theme-v4", {
                     "dropdown--disabled": t.disabled,
                     "inline-search": t.inlineSearch
                   }]),
@@ -167,10 +169,10 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                     (...l) => e(h) && e(h)(...l))
                   }, [
                     e(f) && t.inlineSearch ? (i(), n("div", Oe, [
-                      a(e(Te), {
-                        modelValue: e(I),
+                      a(e(ke), {
+                        modelValue: e(w),
                         "onUpdate:modelValue": [
-                          o[3] || (o[3] = (l) => se(I) ? I.value = l : null),
+                          o[3] || (o[3] = (l) => se(w) ? w.value = l : null),
                           t.onClear
                         ],
                         placeholder: t.inlineSearchPlaceholder,
@@ -181,50 +183,50 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                         onKeydown: e(h)
                       }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
                     ])) : d("", !0),
-                    C(v.$slots, "input-list", { open: e(f) }, void 0, !0),
+                    I(v.$slots, "input-list", { open: e(f) }, void 0, !0),
                     p("div", s({
                       class: ["list-container", { "list-container--multi": t.multi }],
-                      style: { height: `${e(M)}rem` }
+                      style: { height: `${e(X)}rem` }
                     }, {
-                      ...e(W),
+                      ...e(G),
                       ...e(m)[e(c).LIST_CONTAINER]
                     }), [
-                      p("ul", s(e(L), {
+                      p("ul", s(e(N), {
                         style: {
-                          height: Number(e(L).style.height) - 4
+                          height: Number(e(N).style.height) - 4
                         },
                         role: "listbox",
                         class: ["list", { "list--multi": t.multi }]
                       }), [
-                        !e(X).length && !t.loading ? (i(), n("li", Ee, [
-                          a(e(F), s({ variant: "body2" }, e(m)[e(c).NO_RESULT]), {
+                        !e(q).length && !t.loading ? (i(), n("li", De, [
+                          a(e(H), s({ variant: "body2" }, e(m)[e(c).NO_RESULT]), {
                             default: u(() => [
                               g(ue(t.noResultsText), 1)
                             ]),
                             _: 1
                           }, 16)
                         ])) : d("", !0),
-                        t.loading ? (i(), n("li", Ke, [
-                          a(e(Ce)),
-                          a(e(F), null, {
+                        t.loading ? (i(), n("li", Ee, [
+                          a(e(Ie)),
+                          a(e(H), null, {
                             default: u(() => [
                               g("Loading...")
                             ]),
                             _: 1
                           })
                         ])) : d("", !0),
-                        t.showSelectAll ? (i(), n("li", Re, [
-                          a(e(x), s(
+                        t.showSelectAll !== !1 && t.multi ? (i(), n("li", Re, [
+                          a(e($), s(
                             {
                               "aria-selected": e(B),
                               "aria-disabled": !!t.disabled,
                               "selected-prop": e(B),
-                              "is-indeterminate": e(q),
+                              "is-indeterminate": e(Y),
                               "select-all-option": ""
                             },
                             e(m)[e(c).SELECT_ALL],
                             {
-                              onClick: o[4] || (o[4] = V((l) => e(Y)(), ["stop"]))
+                              onClick: o[4] || (o[4] = F((l) => e(j)(), ["stop"]))
                             }
                           ), {
                             default: u(() => [
@@ -233,42 +235,42 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                             _: 1
                           }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
                         ])) : d("", !0),
-                        e(N).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(N), ({ data: l, index: b }) => (i(), n("li", {
+                        e(O).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(O), ({ data: l, index: b }) => (i(), n("li", {
                           key: b,
-                          "aria-selected": e(S)(T(e(k)), l),
+                          "aria-selected": e(S)(k(e(T)), l),
                           "aria-disabled": !!t.disabled,
-                          onClick: V(() => e(O)(l, b), ["stop"])
+                          onClick: F(() => e(D)(l, b), ["stop"])
                         }, [
-                          C(v.$slots, "default", {
+                          I(v.$slots, "default", {
                             option: l,
-                            selected: e(S)(T(e(k)), l),
-                            active: T(e(E)) === b
+                            selected: e(S)(k(e(T)), l),
+                            active: k(e(E)) === b
                           }, () => [
-                            a(e(x), {
+                            a(e($), {
                               option: l,
-                              selected: e(S)(T(e(k)), l),
-                              active: T(e(E)) === b,
+                              selected: e(S)(k(e(T)), l),
+                              active: k(e(E)) === b,
                               "name-key": t.optionNameKey,
                               "image-key": t.optionImageKey,
                               "icon-key": t.optionIconKey,
                               "icon-type": t.optionIconType
                             }, null, 8, ["option", "selected", "active", "name-key", "image-key", "icon-key", "icon-type"])
                           ], !0)
-                        ], 8, De))), 128)) : d("", !0)
+                        ], 8, Pe))), 128)) : d("", !0)
                       ], 16)
                     ], 16),
-                    t.multi ? (i(), n("div", Pe, [
-                      p("div", ze, [
+                    t.multi ? (i(), n("div", ze, [
+                      p("div", Ke, [
                         a(e(A), s(
                           {
                             ref_key: "clearAll",
-                            ref: le,
+                            ref: oe,
                             size: "small",
                             variant: "text",
                             color: "primary"
                           },
                           e(m)[e(c).ACTION_CLEAR_ALL],
-                          { onClick: e(R) }
+                          { onClick: e(P) }
                         ), {
                           default: u(() => [
                             g(" Clear all ")
@@ -280,13 +282,13 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                         a(e(A), s(
                           {
                             ref_key: "cancel",
-                            ref: ee,
+                            ref: te,
                             size: "small",
                             variant: "outlined",
                             color: "primary"
                           },
                           e(m)[e(c).ACTION_CANCEL],
-                          { onClick: e(j) }
+                          { onClick: e(J) }
                         ), {
                           default: u(() => [
                             g(" Cancel ")
@@ -295,11 +297,11 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                         }, 16, ["onClick"]),
                         a(e(A), s({
                           ref_key: "apply",
-                          ref: _,
+                          ref: ee,
                           "data-testid": "mutli-apply",
                           size: "small",
                           class: "apply-button"
-                        }, e(m)[e(c).ACTION_APPLY], { onClick: e(J) }), {
+                        }, e(m)[e(c).ACTION_APPLY], { onClick: e(Q) }), {
                           default: u(() => [
                             g("Apply ")
                           ]),
@@ -315,19 +317,19 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
           ]),
           default: u(() => [
             p("div", {
-              class: z(["button__container", {
+              class: x(["button__container", {
                 "button__container--open": !!e(f),
                 [`button__container--${t.size}`]: !0,
                 "button__container--disabled": t.disabled
               }])
             }, [
-              C(v.$slots, "dropdown-trigger", {}, () => [
+              I(v.$slots, "dropdown-trigger", {}, () => [
                 p("div", {
                   ref_key: "buttonRef",
-                  ref: K
+                  ref: R
                 }, [
-                  e(D) ? (i(), n("div", Le, [
-                    (i(), me(pe(e(D)), {
+                  e(z) ? (i(), n("div", Le, [
+                    (i(), me(pe(e(z)), {
                       placeholder: t.placeholder,
                       open: e(f),
                       label: t.triggerLabel,
@@ -337,7 +339,8 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                       mandatory: t.mandatory,
                       "test-id": t.testId,
                       multi: t.multi,
-                      "selected-option": e(k),
+                      disabled: t.disabled,
+                      "selected-option": e(T),
                       "display-value": t.displayValue,
                       options: t.options,
                       "option-name-key": t.optionNameKey,
@@ -345,26 +348,28 @@ const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le
                       "option-icon-key": t.optionIconKey,
                       "option-icon-type": t.optionIconType,
                       "value-to-copy": t.valueToCopy,
-                      onKeydown: e(G),
+                      "status-dot-type": t.statusType,
+                      size: t.size,
+                      onKeydown: e(M),
                       onClick: ne
-                    }, null, 40, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "multi", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "value-to-copy", "onKeydown"]))
+                    }, null, 40, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "multi", "disabled", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "value-to-copy", "status-dot-type", "size", "onKeydown"]))
                   ])) : d("", !0),
-                  t.predefinedTrigger === e(y).ICON_BUTTON ? (i(), n("div", Be, [
+                  t.predefinedTrigger === e(y).ICON_BUTTON ? (i(), n("div", Ne, [
                     a(e(ge), {
-                      onClick: o[0] || (o[0] = (l) => e(w)())
+                      onClick: o[0] || (o[0] = (l) => e(C)())
                     })
                   ])) : d("", !0),
-                  t.predefinedTrigger === e(y).CHIP ? (i(), n("div", Ne, [
+                  t.predefinedTrigger === e(y).CHIP ? (i(), n("div", Be, [
                     a(e(he), {
                       open: e(f),
                       label: t.placeholder,
                       "test-id": t.testId,
                       options: t.options,
-                      "selected-option": e(k),
+                      "selected-option": e(T),
                       "display-value": t.displayValue,
                       multi: t.multi,
-                      onClick: o[1] || (o[1] = (l) => e(w)()),
-                      onClear: o[2] || (o[2] = (l) => e(R)())
+                      onClick: o[1] || (o[1] = (l) => e(C)()),
+                      onClear: o[2] || (o[2] = (l) => e(P)())
                     }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
                   ])) : d("", !0)
                 ], 512)