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

package/components/dropdown/{common → v3}/Option.vue2.js

@@ -1,10 +1,10 @@
- import "../../../Option.vue_vue_type_style_index_0_scoped_2432f13f_lang.css"; import { defineComponent as B, openBlock as o, createElementBlock as n, normalizeClass as f, unref as e, createElementVNode as d, createBlock as p, createCommentVNode as s, renderSlot as c, createVNode as k, withCtx as b, createTextVNode as $, toDisplayString as g, withModifiers as N } from "vue";
+ import "../../../Option.vue_vue_type_style_index_0_scoped_3d6ce2fc_lang.css"; import { defineComponent as B, openBlock as o, createElementBlock as n, normalizeClass as f, unref as e, createElementVNode as d, createBlock as p, createCommentVNode as s, renderSlot as c, createVNode as k, withCtx as b, createTextVNode as $, toDisplayString as g, withModifiers as N } from "vue";
 import "../../typography/Heading.vue.js";
 import v from "../../typography/Text.vue.js";
-import w from "../../checkbox/Checkbox.vue.js";
+import w from "../../checkbox/v3/Checkbox.vue.js";
 import z from "../../icon/v3/Icon.vue.js";
 import { NOOP as O } from "@vue/shared";
-import { optionCommon as S } from "./Option.common.js";
+import { optionCommon as S } from "../common/Option.common.js";
 const V = {
   key: 1,
   class: "image"

package/components/dropdown/{common → v3}/SearchInput.vue.js

@@ -1,7 +1,7 @@
 import e from "./SearchInput.vue2.js";
 /* empty css                  */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../SearchInput.vue_vue_type_style_index_0_scoped_0b1ea2f6_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-0b1ea2f6"]]);
+// import "../../../SearchInput.vue_vue_type_style_index_0_scoped_b256f8ef_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-b256f8ef"]]);
 export {
   s as default
 };

package/components/dropdown/{common → v3}/SearchInput.vue2.js

@@ -1,5 +1,5 @@
- import "../../../SearchInput.vue_vue_type_style_index_0_scoped_0b1ea2f6_lang.css"; import { defineComponent as I, useSlots as x, ref as v, onMounted as z, computed as r, watch as V, renderSlot as f, unref as t, createElementVNode as m, normalizeClass as s, openBlock as u, createElementBlock as $, createCommentVNode as i, createVNode as O, withCtx as A, createBlock as h } from "vue";
-import { useDropdownContext as B, Mode as b } from "./DropdownContext.js";
+ import "../../../SearchInput.vue_vue_type_style_index_0_scoped_b256f8ef_lang.css"; import { defineComponent as I, useSlots as x, ref as v, onMounted as z, computed as r, watch as V, renderSlot as f, unref as t, createElementVNode as m, normalizeClass as s, openBlock as u, createElementBlock as $, createCommentVNode as i, createVNode as O, withCtx as A, createBlock as h } from "vue";
+import { useDropdownContext as B, Mode as b } from "../common/DropdownContext.js";
 import g from "../../icon/v3/Icon.vue.js";
 import "../../button/v3/Button.vue.js";
 import E from "../../button/v3/IconButton.vue.js";

package/components/dropdown/v3/index.d.ts

@@ -1,7 +1,7 @@
 import Dropdown from './Dropdown.vue';
-import Option from '../common/Option.vue';
-import Label from '../common/Label.vue';
-import SearchInput from '../common/SearchInput.vue';
+import Option from './Option.vue';
+import Label from './Label.vue';
+import SearchInput from './SearchInput.vue';
 declare const DropdownTypes: () => (({
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -15,7 +15,9 @@ declare const DropdownTypes: () => (({
             placement: import("floating-vue").Placement;
             disabled: boolean;
             container: string;
+            popperClass: string;
             selected: any;
+            distance: number;
             mandatory: boolean;
             modelValue: any;
             placeholder: string;
@@ -25,11 +27,9 @@ declare const DropdownTypes: () => (({
             isOnTop: boolean;
             multi: boolean;
             inlineSearch: boolean;
-            popperClass: string;
             noResultsText: string;
             defaultOpen: boolean;
             showButtonOnOpen: boolean;
-            distance: number;
             skidding: number;
             clearable: boolean;
             onSearch: (option: any, term: string) => boolean;
@@ -77,6 +77,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            popperClass: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             selected: {
                 type: import("vue").PropType<unknown>;
                 default: any;
@@ -85,6 +89,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<any[]>;
                 required: true;
             };
+            distance: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             mandatory: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -121,10 +129,6 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            popperClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             noResultsText: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -140,10 +144,6 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            distance: {
-                type: import("vue").PropType<number>;
-                default: number;
-            };
             isOpen: {
                 type: import("vue").PropType<boolean>;
             };
@@ -201,7 +201,7 @@ declare const DropdownTypes: () => (({
             "onUpdate:isOpen"?: (value: unknown) => any;
             onOpened?: () => any;
             onClosed?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "theme" | "size" | "testId" | "error" | "placement" | "disabled" | "container" | "selected" | "mandatory" | "modelValue" | "placeholder" | "autoFocus" | "helperText" | "searchPlaceholder" | "isOnTop" | "multi" | "inlineSearch" | "popperClass" | "noResultsText" | "defaultOpen" | "showButtonOnOpen" | "distance" | "skidding" | "clearable" | "onSearch" | "flip" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "multiOptionsPlaceholderPrefix" | "multiOptionsPlaceholderSuffix" | "darkTheme" | "valueToCopy">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "theme" | "size" | "testId" | "error" | "placement" | "disabled" | "container" | "popperClass" | "selected" | "distance" | "mandatory" | "modelValue" | "placeholder" | "autoFocus" | "helperText" | "searchPlaceholder" | "isOnTop" | "multi" | "inlineSearch" | "noResultsText" | "defaultOpen" | "showButtonOnOpen" | "skidding" | "clearable" | "onSearch" | "flip" | "keepOpen" | "autoSize" | "disableKeyboardEvents" | "multiOptionsPlaceholderPrefix" | "multiOptionsPlaceholderSuffix" | "darkTheme" | "valueToCopy">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -213,7 +213,7 @@ declare const DropdownTypes: () => (({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: ((event: "update:selected", value: unknown) => void) & ((event: "apply", value: unknown) => void) & ((event: "update:isOpen", value: unknown) => void) & ((event: "opened") => void) & ((event: "closed") => void);
+        $emit: ((event: "apply", value: unknown) => void) & ((event: "update:selected", value: unknown) => void) & ((event: "update:isOpen", value: unknown) => void) & ((event: "opened") => void) & ((event: "closed") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             title: {
@@ -251,6 +251,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            popperClass: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             selected: {
                 type: import("vue").PropType<unknown>;
                 default: any;
@@ -259,6 +263,10 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<any[]>;
                 required: true;
             };
+            distance: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             mandatory: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -295,10 +303,6 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            popperClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             noResultsText: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -314,10 +318,6 @@ declare const DropdownTypes: () => (({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            distance: {
-                type: import("vue").PropType<number>;
-                default: number;
-            };
             isOpen: {
                 type: import("vue").PropType<boolean>;
             };
@@ -393,7 +393,9 @@ declare const DropdownTypes: () => (({
             placement: import("floating-vue").Placement;
             disabled: boolean;
             container: string;
+            popperClass: string;
             selected: any;
+            distance: number;
             mandatory: boolean;
             modelValue: any;
             placeholder: string;
@@ -403,11 +405,9 @@ declare const DropdownTypes: () => (({
             isOnTop: boolean;
             multi: boolean;
             inlineSearch: boolean;
-            popperClass: string;
             noResultsText: string;
             defaultOpen: boolean;
             showButtonOnOpen: boolean;
-            distance: number;
             skidding: number;
             clearable: boolean;
             onSearch: (option: any, term: string) => boolean;
@@ -475,6 +475,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<string>;
             default: string;
         };
+        popperClass: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         selected: {
             type: import("vue").PropType<unknown>;
             default: any;
@@ -483,6 +487,10 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<any[]>;
             required: true;
         };
+        distance: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
         mandatory: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -519,10 +527,6 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        popperClass: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         noResultsText: {
             type: import("vue").PropType<string>;
             default: string;
@@ -538,10 +542,6 @@ declare const DropdownTypes: () => (({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        distance: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
         isOpen: {
             type: import("vue").PropType<boolean>;
         };
@@ -642,6 +642,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<string>;
         default: string;
     };
+    popperClass: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     selected: {
         type: import("vue").PropType<unknown>;
         default: any;
@@ -650,6 +654,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<any[]>;
         required: true;
     };
+    distance: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     mandatory: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -686,10 +694,6 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    popperClass: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     noResultsText: {
         type: import("vue").PropType<string>;
         default: string;
@@ -705,10 +709,6 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    distance: {
-        type: import("vue").PropType<number>;
-        default: number;
-    };
     isOpen: {
         type: import("vue").PropType<boolean>;
     };
@@ -784,7 +784,9 @@ declare const DropdownTypes: () => (({
     placement: import("floating-vue").Placement;
     disabled: boolean;
     container: string;
+    popperClass: string;
     selected: any;
+    distance: number;
     mandatory: boolean;
     modelValue: any;
     placeholder: string;
@@ -794,11 +796,9 @@ declare const DropdownTypes: () => (({
     isOnTop: boolean;
     multi: boolean;
     inlineSearch: boolean;
-    popperClass: string;
     noResultsText: string;
     defaultOpen: boolean;
     showButtonOnOpen: boolean;
-    distance: number;
     skidding: number;
     clearable: boolean;
     onSearch: (option: any, term: string) => boolean;

package/components/dropdown/v3/index.js

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

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

@@ -0,0 +1,66 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    open: boolean;
+    testId?: string;
+    disabled?: boolean;
+    feedbackVariant?: string;
+    displayedValue: any;
+    options: unknown[];
+    selectedOption: unknown | unknown[];
+    displayValue: (option: unknown) => string;
+    multi: boolean;
+}>, {
+    label: string;
+    open: boolean;
+    testId: string;
+    disabled: boolean;
+    feedbackVariant: string;
+    displayedValue: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    open: boolean;
+    testId?: string;
+    disabled?: boolean;
+    feedbackVariant?: string;
+    displayedValue: any;
+    options: unknown[];
+    selectedOption: unknown | unknown[];
+    displayValue: (option: unknown) => string;
+    multi: boolean;
+}>, {
+    label: string;
+    open: boolean;
+    testId: string;
+    disabled: boolean;
+    feedbackVariant: string;
+    displayedValue: string;
+}>>> & {
+    onClear?: () => any;
+}, {
+    label: string;
+    testId: string;
+    disabled: boolean;
+    feedbackVariant: string;
+    open: boolean;
+    displayedValue: 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];
+} & {};

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

@@ -0,0 +1,7 @@
+import o from "./ChipDropdownTrigger.vue2.js";
+/* empty css                          */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_14dcdae5_lang.css"; //*');
+const d = /* @__PURE__ */ e(o, [["__scopeId", "data-v-14dcdae5"]]);
+export {
+  d as default
+};

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

@@ -0,0 +1,73 @@
+ import "../../../ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_14dcdae5_lang.css"; import { defineComponent as V, ref as b, computed as p, openBlock as _, createElementBlock as C, mergeProps as n, unref as t, createElementVNode as c, createVNode as d, withCtx as w, createTextVNode as k, toDisplayString as v, withDirectives as u, vShow as f, withModifiers as x } from "vue";
+import m from "../../icon/v4/IconV4.vue.js";
+import A from "../../typography/v4/Typography.vue.js";
+import { DropdownTestIdModifiers as o } from "../../../testids/index.js";
+import { useTestIdAttrs as B } from "../../../utils/testIds.js";
+const N = { class: "chip-trigger--content" }, I = { class: "chip-trigger--icon" }, $ = ["onClick"], L = /* @__PURE__ */ V({
+  __name: "ChipDropdownTrigger",
+  props: {
+    label: { default: "Status" },
+    open: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    feedbackVariant: { default: "" },
+    displayedValue: { default: "" },
+    options: null,
+    selectedOption: null,
+    displayValue: null,
+    multi: { type: Boolean }
+  },
+  emits: ["clear"],
+  setup(r, { emit: h }) {
+    const e = r, y = () => {
+      h("clear");
+    }, i = b(!0), g = (l) => {
+      let a = l;
+      return Array.isArray(l) && (l.length > 1 ? a = `${l[0]}, +${l[1]}` : a = l[0] ? `${l[0]}` : ""), i.value = !!a, a ? `${e.label}: ${a}` : e.label;
+    }, O = p(
+      () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
+    ), s = B(e.testId, o), T = p(() => {
+      if (!e.multi)
+        return e.selectedOption ? e.displayValue(e.selectedOption) : "";
+      if (Array.isArray(e.selectedOption))
+        return e.selectedOption.length ? e.options.length === e.selectedOption.length ? ["All"] : e.selectedOption.length == 1 && e.displayValue ? [e.displayValue(e.selectedOption[0])] : [
+          e.displayValue(e.selectedOption[0]),
+          e.selectedOption.length
+        ] : [];
+    });
+    return (l, a) => (_(), C("div", n({
+      class: ["chip-trigger", [t(O), { active: r.open || i.value, disabled: r.disabled }]]
+    }, t(s)[t(o).BUTTON]), [
+      c("div", N, [
+        d(t(A), n({ variant: "chipLabel" }, t(s)[t(o).BUTTON_CONTENT]), {
+          default: w(() => [
+            k(v(g(t(T))), 1)
+          ]),
+          _: 1
+        }, 16),
+        u(c("div", I, [
+          d(t(m), {
+            name: "caret-down",
+            size: "16px"
+          })
+        ], 512), [
+          [f, !i.value]
+        ]),
+        u(c("div", n({ class: "x-circle-wrapper" }, t(s)[t(o).BUTTON_CLEAR], {
+          onClick: x(y, ["stop"])
+        }), [
+          d(t(m), {
+            name: "x-circle",
+            size: "16px",
+            type: "fill"
+          })
+        ], 16, $), [
+          [f, i.value]
+        ])
+      ])
+    ], 16));
+  }
+});
+export {
+  L as default
+};

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

@@ -1,7 +1,7 @@
 import o from "./DefaultDropdownTrigger.vue2.js";
 /* empty css                             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_4cbcfcce_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4cbcfcce"]]);
+// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c218ef1f_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c218ef1f"]]);
 export {
-  t as default
+  p as default
 };

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

@@ -1,10 +1,11 @@
- import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_4cbcfcce_lang.css"; import { defineComponent as y, computed as h, openBlock as t, createElementBlock as l, Fragment as r, createBlock as c, createCommentVNode as a, createElementVNode as n, normalizeClass as k, unref as d, renderSlot as x, createVNode as s, withCtx as T, createTextVNode as p, toDisplayString as v } from "vue";
-import g from "../../typography/v4/Typography.vue.js";
-import { AppTriggerTestIdModifiers as I } from "../../../testids/index.js";
+ import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_c218ef1f_lang.css"; import { defineComponent as h, computed as p, openBlock as a, createElementBlock as d, Fragment as s, createBlock as f, createCommentVNode as l, createElementVNode as o, mergeProps as u, unref as t, renderSlot as x, createVNode as m, withCtx as v, createTextVNode as I, toDisplayString as g } from "vue";
+import B from "../../typography/v4/Typography.vue.js";
+import { DropdownTestIdModifiers as r } from "../../../testids/index.js";
 import V from "../../icon/v4/IconV4.vue.js";
-import B from "../../shared/FieldLabel.vue.js";
+import N from "../../shared/FieldLabel.vue.js";
 import C from "../../shared/FieldHelpText.vue.js";
-const H = ["data-testid"], $ = { class: "content" }, w = { key: 0 }, z = { key: 1 }, R = /* @__PURE__ */ y({
+import { useTestIdAttrs as w } from "../../../utils/testIds.js";
+const A = { class: "content" }, H = { key: 0 }, P = { key: 1 }, U = /* @__PURE__ */ h({
   __name: "DefaultDropdownTrigger",
   props: {
     placeholder: { default: "Select" },
@@ -25,14 +26,14 @@ const H = ["data-testid"], $ = { class: "content" }, w = { key: 0 }, z = { key:
     brandIconType: { default: null }
   },
   emits: ["click"],
-  setup(e, { emit: f }) {
-    const o = e, u = h(
-      () => o.feedbackVariant ? `state-${o.feedbackVariant}` : ""
-    ), m = () => {
-      f("click");
-    };
-    return (b, i) => (t(), l(r, null, [
-      e.label ? (t(), c(B, {
+  setup(e, { emit: b }) {
+    const n = e, T = p(
+      () => n.feedbackVariant ? `state-${n.feedbackVariant}` : ""
+    ), y = () => {
+      b("click");
+    }, i = w(n.testId, r);
+    return (k, c) => (a(), d(s, null, [
+      e.label ? (a(), f(N, {
         key: 0,
         label: e.label,
         mandatory: e.mandatory,
@@ -40,42 +41,42 @@ const H = ["data-testid"], $ = { class: "content" }, w = { key: 0 }, z = { key:
         "hover-help-text-placement": e.hoverHelpTextPlacement,
         disabled: e.disabled,
         "test-id": e.testId
-      }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : a("", !0),
-      n("div", {
-        class: k(["dropdown-trigger", [e.size, d(u), { open: e.open, disabled: e.disabled }]]),
-        "data-testid": `${e.testId}-${d(I).WRAPPER}`,
-        onClick: i[0] || (i[0] = (A) => m())
-      }, [
-        n("div", $, [
-          x(b.$slots, "brand-icon", {}, () => [
-            e.brandIconType ? (t(), l(r, { key: 0 }, [
-              e.brandIconType === "android" ? (t(), l("span", w, "A")) : a("", !0),
-              e.brandIconType === "ios" ? (t(), l("span", z, "I")) : a("", !0)
-            ], 64)) : a("", !0)
+      }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : l("", !0),
+      o("div", u({
+        class: ["dropdown-trigger", [e.size, t(T), { open: e.open, disabled: e.disabled }]]
+      }, t(i)[t(r).BUTTON_WRAPPER], {
+        onClick: c[0] || (c[0] = (D) => y())
+      }), [
+        o("div", A, [
+          x(k.$slots, "brand-icon", {}, () => [
+            e.brandIconType ? (a(), d(s, { key: 0 }, [
+              e.brandIconType === "android" ? (a(), d("span", H, "A")) : l("", !0),
+              e.brandIconType === "ios" ? (a(), d("span", P, "I")) : l("", !0)
+            ], 64)) : l("", !0)
           ], !0),
-          s(d(g), { variant: "body1" }, {
-            default: T(() => [
-              p(v(e.placeholder), 1)
+          m(t(B), u({ variant: "body1" }, t(i)[t(r).BUTTON_CONTENT]), {
+            default: v(() => [
+              I(g(e.placeholder), 1)
             ]),
             _: 1
-          })
+          }, 16)
         ]),
-        n("div", null, [
-          s(d(V), {
+        o("div", null, [
+          m(t(V), {
             name: "caret-down",
             size: "20px"
           })
         ])
-      ], 10, H),
-      e.feedbackText ? (t(), c(C, {
+      ], 16),
+      e.feedbackText ? (a(), f(C, {
         key: 1,
         text: e.feedbackText,
         variant: e.feedbackVariant,
         "test-id": e.testId
-      }, null, 8, ["text", "variant", "test-id"])) : a("", !0)
+      }, null, 8, ["text", "variant", "test-id"])) : l("", !0)
     ], 64));
   }
 });
 export {
-  R as default
+  U as default
 };

package/components/dropdown/v4/Dropdown.types.d.ts

@@ -0,0 +1,3 @@
+export declare const TRIGGER_TYPES: readonly ["default", "icon-button", "chip"];
+export type TriggerType = (typeof TRIGGER_TYPES)[number];
+export declare const TRIGGERS: Record<string, TriggerType>;

package/components/dropdown/v4/Dropdown.types.js

@@ -0,0 +1,8 @@
+const t = {
+  DEFAULT: "default",
+  ICON_BUTTON: "icon-button",
+  CHIP: "chip"
+};
+export {
+  t as TRIGGERS
+};