@ironsource/shared-ui 1.4.2-vite.1 → 1.4.3-andyk.1

package/components/dropdown/Dropdown.vue.js

@@ -1,6 +1,785 @@
-import o from "./Dropdown.vue2.js";
-/* empty css               *//* empty css               */import r from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0c581bae"]]);
-export {
-  _ as default
+import { defineComponent, ref, computed, watch, useSlots, nextTick, toRaw, provide, onMounted, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createVNode, withCtx, Transition, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, createBlock, mergeProps, withModifiers, Fragment, renderList, pushScopeId, popScopeId } from 'vue';
+import Button from '../button/Button.vue.js';
+import Icon from '../icon/Icon.vue.js';
+import { DropdownTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../typography/Text.vue.js';
+/* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                               */import { Dropdown as Dropdown$1 } from 'floating-vue';
+/* empty css                                                      *//* empty css                                                                      */import Option from './Option.vue.js';
+import Search from '../search/Search.vue.js';
+import { useToggle } from '../../composables/useToggle.vue.js';
+import { isObjectInArray } from '../../utils/array.vue.js';
+import { objectsEqual } from '../../utils/object.vue.js';
+import { useClamp, useVirtualList, onClickOutside } from '@vueuse/core';
+import { Mode, Type, DropdownContext } from './DropdownContext.vue.js';
+import { pxToRem } from '../../utils/style.vue.js';
+/* empty css                                                          *//* empty css                                              */
+import "../../Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css";import "../../Dropdown.vue_vue_type_style_index_1_lang.css";
+const _withScopeId = (n) => (pushScopeId("data-v-6b0dd6db"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["tabindex", "data-testid"];
+const _hoisted_2 = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"];
+const _hoisted_3 = {
+  key: 0,
+  class: "image-slot"
 };
+const _hoisted_4 = { class: "angle-down" };
+const _hoisted_5 = {
+  key: 0,
+  class: "dropdown-title"
+};
+const _hoisted_6 = ["data-testid"];
+const _hoisted_7 = ["data-testid"];
+const _hoisted_8 = {
+  key: 0,
+  class: "no-result-container"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "loader"
+};
+const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  width: "100",
+  height: "100",
+  viewBox: "0 0 100 100"
+}, [
+  /* @__PURE__ */ createElementVNode("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "6",
+    r: "35",
+    "stroke-dasharray": "164.93361431346415 56.97787143782138"
+  }, [
+    /* @__PURE__ */ createElementVNode("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;360 50 50",
+      keyTimes: "0;1"
+    })
+  ])
+], -1));
+const _hoisted_11 = { key: 2 };
+const _hoisted_12 = ["aria-selected", "aria-disabled", "onClick"];
+const _hoisted_13 = {
+  key: 0,
+  class: "actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Dropdown",
+  props: {
+    modelValue: { default: null },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: false },
+    mandatory: { type: Boolean, default: false },
+    helperText: { default: "" },
+    searchPlaceholder: { default: "" },
+    isOnTop: { type: Boolean, default: false },
+    multi: { type: Boolean, default: false },
+    title: { default: "" },
+    inlineSearch: { type: Boolean, default: false },
+    popperClass: { default: "" },
+    noResultsText: { default: "No results found" },
+    loading: { type: Boolean },
+    selected: { default: null },
+    showSelectAll: { type: Boolean },
+    defaultOpen: { type: Boolean, default: false },
+    showButtonOnOpen: { type: Boolean, default: true },
+    autoFocus: { type: Boolean, default: false },
+    distance: { default: 0 },
+    isOpen: { type: Boolean },
+    skidding: { default: 0 },
+    placement: { default: "bottom-start" },
+    clearable: { type: Boolean, default: false },
+    error: { default: "" },
+    size: { default: "lg" },
+    displayValue: null,
+    options: null,
+    onSearch: { type: Function, default: () => true },
+    theme: { default: "is-dropdown" },
+    container: { default: "body" },
+    flip: { type: Boolean, default: true },
+    keepOpen: { type: Boolean, default: false },
+    autoSize: { type: Boolean, default: false },
+    disableKeyboardEvents: { type: Boolean, default: false },
+    multiOptionsPlaceholderPrefix: { default: "" },
+    multiOptionsPlaceholderSuffix: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const isSelected = (arr, element) => {
+      if (props.multi) {
+        return isObjectInArray(arr, element);
+      }
+      return toRaw(arr) === element;
+    };
+    const MULTILINE_LIST_HEIGHT = 48;
+    const LIST_HEIGHT = 34;
+    const selectedOptionRef = ref(props.selected);
+    const selectedOption = computed({
+      get() {
+        return selectedOptionRef.value;
+      },
+      set(value) {
+        emit("update:selected", value);
+      }
+    });
+    watch(
+      () => props.selected,
+      () => {
+        selectedOptionRef.value = props.selected;
+      }
+    );
+    const slots = useSlots();
+    const listRef = ref(null);
+    const inputRef = ref(null);
+    const el = ref(null);
+    const activeOption = ref(null);
+    const labelRef = ref(null);
+    const buttonRef = ref(null);
+    const apply = ref(null);
+    const cancel = ref(null);
+    const IS_ON_TOP_PADDING = 8;
+    const location = computed(() => {
+      return buttonRef.value?.getBoundingClientRect().height + IS_ON_TOP_PADDING + props.distance;
+    });
+    const optionsIds = ref([]);
+    const selectedIndex = ref(-1);
+    const query = ref("");
+    const selectedOptionPrevious = ref([]);
+    const focusButton = () => buttonRef.value?.focus();
+    const [open, _toggle, disable] = useToggle({
+      disabled: props.disabled,
+      initialValue: props.defaultOpen
+    });
+    watch(
+      () => props.disabled,
+      (value) => {
+        if (value !== void 0) {
+          disable(value);
+        }
+      }
+    );
+    const toggle = (value) => {
+      isOpen.value = _toggle(value);
+    };
+    const isOpen = computed({
+      get() {
+        return props.isOpen;
+      },
+      set(value) {
+        emit("update:isOpen", value);
+      }
+    });
+    const maxClamped = computed(() => {
+      return filteredOptions.value.length - 1;
+    });
+    const activeIndex = useClamp(0, 0, maxClamped);
+    const selectedValue = computed(() => {
+      if (selectedOption.value) {
+        return props.displayValue(selectedOption.value);
+      }
+      return "";
+    });
+    const getMultiselectValueToShow = (selectedOption2) => {
+      if (!selectedOption2.value.length && !props.multiOptionsPlaceholderPrefix && !props.multiOptionsPlaceholderSuffix)
+        return props.placeholder;
+      const multipleOptionsPlaceholder = !props.multiOptionsPlaceholderPrefix && !props.multiOptionsPlaceholderSuffix ? `${selectedOption2.value.length} selected` : `${props.multiOptionsPlaceholderPrefix ?? ""}${selectedOption2.value.length ?? "0"}${props.multiOptionsPlaceholderSuffix ?? ""}`;
+      return selectedOption2.value.length == 1 && !!props.displayValue ? props.displayValue(selectedOption2.value[0]) : multipleOptionsPlaceholder;
+    };
+    const displayedValue = computed(() => {
+      if (!props.multi) {
+        return selectedOption.value ? props.displayValue(selectedOption.value) : props.placeholder;
+      }
+      if (!Array.isArray(selectedOptionRef.value)) {
+        return;
+      }
+      return getMultiselectValueToShow(selectedOptionRef);
+    });
+    const allSelected = computed(() => {
+      if (!Array.isArray(selectedOptionRef.value)) {
+        return;
+      }
+      return selectedOptionRef.value.length === filteredOptions.value.length;
+    });
+    const isIndeterminate = computed(() => {
+      if (!props.multi) {
+        return false;
+      }
+      if (!Array.isArray(selectedOptionRef.value)) {
+        return false;
+      }
+      return selectedOptionRef.value.length > 0 && selectedOptionRef.value.length < filteredOptions.value.length;
+    });
+    const queryChanged = (value) => {
+      query.value = value;
+    };
+    const filteredOptions = computed(
+      () => props.options.filter((option) => props.onSearch(option, query.value))
+    );
+    const hasSubtitle = computed(() => optionsIds.value[0]?.hasSubtitle);
+    const isMulti = computed(() => api.mode === Mode.Multi);
+    const itemHeight = computed(
+      () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
+    );
+    const {
+      list: virtualOptions,
+      containerProps,
+      wrapperProps,
+      scrollTo
+    } = useVirtualList(filteredOptions, {
+      itemHeight: itemHeight.value
+    });
+    watch(
+      () => props.isOpen,
+      (value) => {
+        toggle(value);
+      }
+    );
+    watch([selectedIndex], async () => {
+      await nextTick();
+    });
+    watch(
+      [open, activeIndex, selectedIndex],
+      async ([openNewValue], [openOldValue]) => {
+        if (!open.value) {
+          return;
+        }
+        await nextTick();
+        if (selectedIndex.value !== -1 && openNewValue !== openOldValue) {
+          setTimeout(() => {
+            scrollTo(selectedIndex.value);
+          });
+        }
+        if (activeIndex.value) {
+          setTimeout(() => {
+            scrollTo(activeIndex.value);
+          });
+        }
+      }
+    );
+    const toggleMenu = (value, withFocus = false) => {
+      if (props.disabled) {
+        return;
+      }
+      toggle(value);
+      nextTick(() => {
+        if (open.value) {
+          emit("opened");
+        }
+        if (!open.value) {
+          emit("closed");
+        }
+        if (listRef.value && withFocus) {
+          listRef.value.focus();
+        }
+      });
+    };
+    watch(open, (isOpen2) => {
+      if (isOpen2) {
+        if (isMulti.value && Array.isArray(selectedOption.value)) {
+          selectedOptionPrevious.value = toRaw(selectedOption.value).slice();
+        }
+        return;
+      }
+      focusButton();
+    });
+    const onSelectAll = () => {
+      selectAll();
+      selectedOption.value = selectedOptionRef.value;
+    };
+    const selectAll = () => {
+      if (allSelected.value) {
+        selectedOptionRef.value = [];
+        return;
+      }
+      if (!Array.isArray(selectedOptionRef.value)) {
+        return;
+      }
+      if (selectedOptionRef.value.length === filteredOptions.value.length) {
+        selectedOptionRef.value = [];
+        return;
+      }
+      selectedOptionRef.value = filteredOptions.value;
+    };
+    const onSelect = (option, index) => {
+      option = toRaw(option);
+      const isDisabled = optionsIds.value[index]?.disabled;
+      if (isDisabled) {
+        return;
+      }
+      selectedIndex.value = index;
+      if (api.mode !== Mode.Multi) {
+        if (!props.keepOpen) {
+          toggleMenu(false);
+        }
+        api.goToOption(0 /* None */);
+        selectedOption.value = option;
+        queryChanged("");
+        focusButton();
+        if (api.type === Type.Search && inputRef.value) {
+          inputRef.value.value = props.displayValue(option);
+        }
+        return;
+      }
+      if (!Array.isArray(selectedOptionRef.value)) {
+        return;
+      }
+      inputRef.value?.focus();
+      const rawSelectedOption = toRaw(selectedOptionRef.value);
+      if (isObjectInArray(rawSelectedOption, option)) {
+        selectedOptionRef.value = rawSelectedOption.filter(
+          (item) => !objectsEqual(item, option)
+        );
+        return;
+      } else {
+        selectedOptionRef.value = [...rawSelectedOption, option];
+        return;
+      }
+    };
+    const canFocus = (index) => {
+      return optionsIds.value[index]?.disabled;
+    };
+    const api = {
+      activeIndex,
+      options: optionsIds,
+      selectedOption,
+      labelRef,
+      activeOption,
+      listRef,
+      clearable: props.clearable,
+      type: slots.input ? Type.Search : Type.Dropdown,
+      mode: props.multi ? Mode.Multi : Mode.Single,
+      query,
+      selectedValue,
+      toggle: toggleMenu,
+      disabled: props.disabled,
+      open,
+      mandatory: props.mandatory,
+      size: props.size,
+      placeholder: props.placeholder,
+      select: onSelect,
+      clearSelection: () => {
+        queryChanged("");
+        selectedOption.value = api.mode === Mode.Single ? null : [];
+        if (inputRef.value) {
+          inputRef.value.value = "";
+        }
+      },
+      search: queryChanged,
+      goToOption: async (focus) => {
+        if (!open.value) {
+          return;
+        }
+        let index = activeIndex.value + focus;
+        const totalDisabled = optionsIds.value.filter(
+          (item) => item.disabled
+        ).length;
+        const total = filteredOptions.value.length - totalDisabled;
+        if (index > total) {
+          index = total + 1;
+        }
+        while (true) {
+          if (!optionsIds.value[index]?.disabled) {
+            activeOption.value = filteredOptions.value[index];
+            activeIndex.value = index;
+            return;
+          }
+          if (focus === 1 /* Next */ || focus === 10 /* NextPage */) {
+            index = index + 1 /* Next */;
+          }
+          if (focus === -1 /* Previous */ || focus === -10 /* PrevPage */) {
+            index = index + -1 /* Previous */;
+          }
+          if (!canFocus(activeIndex.value)) {
+            continue;
+          }
+          activeOption.value = filteredOptions.value[index];
+          activeIndex.value = index;
+          return;
+        }
+      },
+      registerInput: (ref2) => {
+        inputRef.value = ref2.value;
+      },
+      registerOption: (id, disabled, hasSubtitle2) => {
+        optionsIds.value = [...optionsIds.value, { id, disabled, hasSubtitle: hasSubtitle2 }];
+      },
+      unRegisterOption(id) {
+        optionsIds.value = optionsIds.value.filter((item) => item.id !== id);
+      }
+    };
+    provide(DropdownContext, api);
+    onClickOutside(
+      listRef,
+      () => {
+        if (open.value) {
+          onCancel();
+        }
+      },
+      {
+        ignore: [buttonRef, apply, cancel, inputRef, containerProps.ref]
+      }
+    );
+    const resetInput = () => {
+      if (!inputRef.value) {
+        return;
+      }
+      inputRef.value.value = api.query.value = "";
+    };
+    onMounted(async () => {
+      if (props.autoFocus) {
+        await nextTick();
+        setTimeout(() => {
+          el.value.focus();
+        });
+      }
+      api.goToOption(0);
+    });
+    const onApply = () => {
+      selectedOption.value = selectedOptionRef.value;
+      emit("apply", selectedOption.value);
+      toggleMenu(false);
+      resetInput();
+    };
+    const onCancel = () => {
+      if (isMulti.value && Array.isArray(selectedOptionPrevious.value)) {
+        selectedOption.value = toRaw(selectedOptionPrevious.value).slice();
+      }
+      toggleMenu(false);
+    };
+    const onButtonKeydown = (event) => {
+      if (props.disableKeyboardEvents)
+        return;
+      switch (event.key) {
+        case "Space":
+        case "Enter":
+        case "ArrowUp":
+        case "ArrowDown": {
+          toggleMenu(true);
+          event.preventDefault();
+        }
+      }
+    };
+    const onKeydown = (event) => {
+      if (props.disableKeyboardEvents)
+        return;
+      switch (event.key) {
+        case "ArrowUp": {
+          api.goToOption(-1 /* Previous */);
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        }
+        case "ArrowDown": {
+          api.goToOption(1 /* Next */);
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        }
+        case "Escape": {
+          toggleMenu(false);
+          event.preventDefault();
+          break;
+        }
+        case "PageUp": {
+          api.goToOption(10 /* NextPage */);
+          event.preventDefault();
+          break;
+        }
+        case "PageDown": {
+          api.goToOption(-10 /* PrevPage */);
+          event.preventDefault();
+          break;
+        }
+        case "Enter": {
+          if (!open.value) {
+            toggleMenu(true);
+            return;
+          }
+          onSelect(filteredOptions.value[activeIndex.value], activeIndex.value);
+          if (api.mode === Mode.Single && !props.keepOpen) {
+            toggleMenu(false);
+          }
+          event.preventDefault();
+          break;
+        }
+      }
+    };
+    const calculateTableHeight = computed(() => {
+      const MAX_NUMBER_OF_OPTIONS = 7;
+      const PADDING_PX = 8;
+      const optionsLength = virtualOptions.value.length;
+      const showSelectAllAddition = props.showSelectAll ? 1 : 0;
+      const isThereMoreOptionsThenMax = optionsLength > MAX_NUMBER_OF_OPTIONS;
+      const numberOfRows = optionsLength + showSelectAllAddition;
+      const numToCalculate = isThereMoreOptionsThenMax ? MAX_NUMBER_OF_OPTIONS + 0.5 : numberOfRows;
+      return pxToRem(numToCalculate * itemHeight.value + PADDING_PX);
+    });
+    expose({
+      selectItem: onSelect,
+      scrollTo
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass(["dropdown", { "dropdown--disabled": __props.disabled }]),
+        tabindex: __props.disabled ? -1 : 0,
+        "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).WRAPPER}`,
+        onKeydown
+      }, [
+        renderSlot(_ctx.$slots, "label", {}, void 0, true),
+        createVNode(unref(Dropdown$1), {
+          theme: __props.theme,
+          "popper-class": [
+            __props.popperClass,
+            __props.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+          ],
+          placement: __props.placement,
+          skidding: __props.isOnTop ? 0 : __props.skidding,
+          distance: __props.isOnTop ? -unref(location) : __props.distance,
+          flip: __props.flip,
+          triggers: [],
+          shown: !!unref(open),
+          "auto-hide": false,
+          container: __props.container,
+          "auto-size": __props.autoSize,
+          "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).TRIGGER}`
+        }, {
+          popper: withCtx(() => [
+            createVNode(Transition, null, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  ref_key: "listRef",
+                  ref: listRef
+                }, [
+                  __props.inlineSearch || __props.title ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    __props.title ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "dropdown-title__text",
+                      "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).TITLE}`
+                    }, [
+                      createVNode(unref(Text), { strong: "" }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(__props.title), 1)
+                        ]),
+                        _: 1
+                      })
+                    ], 8, _hoisted_6)) : createCommentVNode("", true),
+                    __props.inlineSearch ? (openBlock(), createBlock(unref(Search), {
+                      key: 1,
+                      modelValue: query.value,
+                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => query.value = $event),
+                      placeholder: __props.searchPlaceholder,
+                      class: "dropdown-title__search",
+                      variant: "transparent",
+                      size: "md",
+                      "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).SEARCH}`,
+                      onKeydown
+                    }, null, 8, ["modelValue", "placeholder", "test-id"])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true),
+                  unref(open) ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: "dropdown",
+                    onKeydown
+                  }, [
+                    renderSlot(_ctx.$slots, "input-list", { open: unref(open) }, void 0, true),
+                    createElementVNode("div", mergeProps(unref(containerProps), {
+                      class: ["list-container", { "list-container--multi": __props.multi }],
+                      style: { height: `${unref(calculateTableHeight)}rem` },
+                      "data-testid": `${__props.testId}-${unref(DropdownTestIdModifiers).LIST_CONTAINER}`
+                    }), [
+                      createElementVNode("ul", mergeProps(unref(wrapperProps), {
+                        role: "listbox",
+                        class: ["list", { "list--multi": __props.multi }]
+                      }), [
+                        !unref(filteredOptions).length && !__props.loading ? (openBlock(), createElementBlock("li", _hoisted_8, [
+                          createVNode(unref(Text), {
+                            size: "sm",
+                            class: "no-result"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(__props.noResultsText), 1)
+                            ]),
+                            _: 1
+                          })
+                        ])) : createCommentVNode("", true),
+                        __props.loading ? (openBlock(), createElementBlock("li", _hoisted_9, [
+                          createVNode(unref(Icon), {
+                            "font-size": "md",
+                            class: "loader-icon"
+                          }, {
+                            default: withCtx(() => [
+                              _hoisted_10
+                            ]),
+                            _: 1
+                          }),
+                          createVNode(unref(Text), null, {
+                            default: withCtx(() => [
+                              createTextVNode("Loading...")
+                            ]),
+                            _: 1
+                          })
+                        ])) : createCommentVNode("", true),
+                        __props.showSelectAll ? (openBlock(), createElementBlock("li", _hoisted_11, [
+                          createVNode(Option, {
+                            "aria-selected": unref(allSelected),
+                            "aria-disabled": !!__props.disabled,
+                            "selected-prop": unref(allSelected),
+                            "is-indeterminate": unref(isIndeterminate),
+                            "select-all-option": "",
+                            onClick: _cache[3] || (_cache[3] = withModifiers(($event) => onSelectAll(), ["stop"]))
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode("Select all ")
+                            ]),
+                            _: 1
+                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                        ])) : createCommentVNode("", true),
+                        unref(virtualOptions).length && !__props.loading ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(unref(virtualOptions), ({ data, index }) => {
+                          return openBlock(), createElementBlock("li", {
+                            key: index,
+                            "aria-selected": isSelected(toRaw(unref(selectedOption)), data),
+                            "aria-disabled": !!__props.disabled,
+                            onClick: withModifiers(() => onSelect(data, index), ["stop"])
+                          }, [
+                            renderSlot(_ctx.$slots, "default", {
+                              option: data,
+                              selected: isSelected(toRaw(unref(selectedOption)), data),
+                              active: toRaw(unref(activeIndex)) === index
+                            }, void 0, true)
+                          ], 8, _hoisted_12);
+                        }), 128)) : createCommentVNode("", true)
+                      ], 16)
+                    ], 16, _hoisted_7),
+                    __props.multi ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                      createVNode(unref(Button), {
+                        ref_key: "cancel",
+                        ref: cancel,
+                        size: "sm",
+                        variant: "border",
+                        theme: "third",
+                        "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).ACTION_CANCEL}`,
+                        onClick: onCancel
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(" Cancel ")
+                        ]),
+                        _: 1
+                      }, 8, ["test-id"]),
+                      createVNode(unref(Button), {
+                        ref_key: "apply",
+                        ref: apply,
+                        "data-testid": "mutli-apply",
+                        size: "sm",
+                        class: "apply-button",
+                        "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).ACTION_APPLY}`,
+                        onClick: onApply
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode("Apply ")
+                        ]),
+                        _: 1
+                      }, 8, ["test-id"])
+                    ])) : createCommentVNode("", true)
+                  ], 32)) : createCommentVNode("", true)
+                ], 512)
+              ]),
+              _: 3
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["button__container", {
+                "button__container--open": !!unref(open),
+                [`button__container--${__props.size}`]: true,
+                "button__container--disabled": __props.disabled
+              }])
+            }, [
+              _ctx.$slots.input ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "buttonRef",
+                ref: buttonRef,
+                onClick: _cache[0] || (_cache[0] = ($event) => toggleMenu()),
+                onKeydown: onButtonKeydown
+              }, [
+                renderSlot(_ctx.$slots, "input", {
+                  open: unref(open),
+                  value: unref(displayedValue),
+                  disabled: __props.disabled
+                }, void 0, true)
+              ], 544)) : createCommentVNode("", true),
+              !_ctx.$slots.input ? (openBlock(), createElementBlock("button", {
+                key: 1,
+                ref_key: "buttonRef",
+                ref: buttonRef,
+                disabled: __props.disabled,
+                "aria-haspopup": true,
+                "aria-expanded": !!unref(open),
+                "aria-labelledby": labelRef.value?.id,
+                "aria-disabled": __props.disabled,
+                class: normalizeClass([{
+                  "button--open": !!unref(open),
+                  [`button--${__props.size}`]: true,
+                  "button--disabled": __props.disabled
+                }, "button"]),
+                onKeydown: onButtonKeydown,
+                onClick: _cache[1] || (_cache[1] = ($event) => toggleMenu())
+              }, [
+                _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  renderSlot(_ctx.$slots, "image", {}, void 0, true)
+                ])) : createCommentVNode("", true),
+                createVNode(unref(Text), {
+                  size: "sm",
+                  "is-truncated": ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(displayedValue)), 1)
+                  ]),
+                  _: 1
+                }),
+                createElementVNode("div", _hoisted_4, [
+                  createVNode(unref(Icon), {
+                    name: "angle-down",
+                    "font-size": "sm"
+                  })
+                ])
+              ], 42, _hoisted_2)) : createCommentVNode("", true)
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
+        !__props.error && __props.helperText ? (openBlock(), createBlock(unref(Text), {
+          key: 0,
+          size: "caption",
+          class: "helper-text",
+          "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).HELPER_TEXT}`
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.helperText), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])) : createCommentVNode("", true),
+        __props.error ? (openBlock(), createBlock(unref(Text), {
+          key: 1,
+          size: "caption",
+          class: "helper-text helper-text--error",
+          "test-id": `${__props.testId}-${unref(DropdownTestIdModifiers).HELPER_TEXT_ERROR}`
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.error), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])) : createCommentVNode("", true)
+      ], 42, _hoisted_1);
+    };
+  }
+});
+var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6b0dd6db"]]);
+
+export { Dropdown as default };