@eturnity/eturnity_reusable_components 8.13.13-EPDM-14085.0 → 8.13.13-EPDM-9631.0

package/src/components/inputs/select/index.vue

@@ -1,968 +1,968 @@
-<template>
-  <Container
-    :no-relative="noRelative"
-    :select-width="selectWidth"
-    @mouseenter="mouseEnterHandler"
-    @mouseleave="mouseLeaveHandler"
-  >
-    <InputWrapper
-      :align-items="alignItems"
-      :has-label="!!label && label.length > 0"
-      :no-relative="noRelative"
-    >
-      <LabelWrapper
-        v-if="label"
-        :data-id="labelDataId"
-        :data-qa-id="dataQaId + '_label'"
-        :info-text-message="!!infoTextMessage || !!$slots.infoText"
-      >
-        <InputLabel
-          :font-color="
-            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
-              ? 'white'
-              : 'eturnityGrey'
-          "
-          :font-size="fontSize"
-          >{{ label }}
-          <OptionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})</OptionalLabel
-          >
-        </InputLabel>
-        <InfoText
-          v-if="infoTextMessage || !!$slots.infoText"
-          :align-arrow="infoTextAlignArrow"
-          :max-width="infoTextWidth"
-          :size="infoTextSize"
-          :text="infoTextMessage"
-          :width="infoTextWidth"
-        >
-          <slot name="infoText"></slot>
-        </InfoText>
-      </LabelWrapper>
-      <SelectButtonWrapper :disabled="disabled">
-        <SelectButton
-          ref="select"
-          :bg-color="
-            buttonBgColor || colorMode == 'dark'
-              ? 'transparentBlack1'
-              : colorMode == 'transparent'
-              ? 'transparent'
-              : 'white'
-          "
-          class="select-button"
-          :color-mode="colorMode"
-          :data-id="dataId"
-          :data-qa-id="dataQaId"
-          :disabled="disabled"
-          :font-color="
-            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
-              ? 'white'
-              : 'black'
-          "
-          :font-size="fontSize"
-          :has-error="hasError"
-          :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
-          :height="height"
-          :is-search-bar-visible="isSearchBarVisible"
-          :no-relative="noRelative"
-          :padding-left="paddingLeft"
-          :select-height="selectHeight"
-          :select-min-height="selectMinHeight"
-          :select-width="selectWidth"
-          :show-border="showBorder"
-          :show-disabled-background="showDisabledBackground"
-          :table-padding-left="tablePaddingLeft"
-          @click="toggleDropdown"
-          @keydown="onKeyDown"
-        >
-          <DraggableInputHandle
-            v-if="isDraggable && !isSearchBarVisible"
-            :height="selectHeight"
-          />
-          <InputText
-            v-if="isSearchBarVisible"
-            ref="searchInput"
-            background-color="transparent"
-            :font-color="
-              buttonFontColor ||
-              colorMode == 'dark' ||
-              colorMode == 'transparent'
-                ? 'white'
-                : 'black'
-            "
-            :font-size="fontSize"
-            input-height="34px"
-            :input-width="computedWidth"
-            :no-border="true"
-            tabindex="0"
-            :value="textSearch"
-            @click.stop
-            @input-change="searchChange"
-            @keydown.stop="onKeyDown"
-          />
-          <Selector
-            v-else
-            :disabled="disabled"
-            :padding-left="paddingLeft"
-            :select-width="selectWidth"
-            :show-border="showBorder"
-          >
-            <slot name="selector" :selected-value="selectedValue"></slot>
-          </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
-            <Icon
-              v-if="isDropdownOpen"
-              :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
-                  ? 'white'
-                  : 'transparentBlack1'
-              "
-              name="arrow_up"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
-            />
-            <Icon
-              v-else
-              :color="
-                caretColor || colorMode == 'dark' || colorMode == 'transparent'
-                  ? 'white'
-                  : 'transparentBlack1'
-              "
-              name="arrow_down"
-              :size="colorMode === 'transparent' ? '8px' : '12px'"
-            />
-          </Caret>
-        </SelectButton>
-        <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="body">
-            <SelectDropdown
-              v-show="isSelectDropdownShown"
-              ref="dropdown"
-              :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
-                  ? 'black'
-                  : 'white'
-              "
-              :dropdown-position="dropdownPosition"
-              :font-color="
-                dropdownFontColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
-                  ? 'white'
-                  : 'black'
-              "
-              :font-size="fontSize"
-              :hovered-bg-color="
-                colorMode == 'dark'
-                  ? '#000000'
-                  : colorMode == 'transparent'
-                  ? 'grey6'
-                  : dropdownBgColor
-              "
-              :hovered-index="hoveredIndex"
-              :hovered-value="hoveredValue"
-              :is-active="isActive"
-              :min-width="minWidth"
-              :no-relative="noRelative"
-              :option-width="getOptionWidth"
-              :selected-value="selectedValue"
-              @mouseleave="optionLeave"
-              @option-hovered="optionHovered"
-              @option-selected="optionSelected"
-            >
-              <slot name="dropdown"></slot>
-            </SelectDropdown>
-          </Teleport>
-        </DropdownWrapper>
-      </SelectButtonWrapper>
-    </InputWrapper>
-  </Container>
-</template>
-
-<script>
-  //How to use it
-  // <Select
-  //     hoverDropdown="true"
-  //     selectWidth="100%"
-  //     minWidth="220px"
-  //     optionWidth="50%"
-  //     label="that is a label"
-  //     alignItems="vertical"
-  //     label-data-id="test-label-data-id"
-  //     data-id="test-data-id"
-  //     :hasSelectButtonPadding="false"
-  //     >
-  //     <template #selector="{selectedValue}">
-  //     value selected: {{selectedValue}}
-  //     </template>
-  //     <template #dropdown>
-  //     <Option value="1">value one</Option>
-  //     <Option value="2">value two</Option>
-  //     <Option value="3">value three</Option>
-  //     <Option value="4">value four</Option>
-  //     </template>
-  // </Select>
-
-  import { Teleport } from 'vue'
-  import styled from 'vue3-styled-components'
-  import InfoText from '../../infoText'
-  import Icon from '../../icon'
-  import InputText from '../inputText'
-  import DraggableInputHandle from '../../draggableInputHandle'
-  import { debounce } from '../../../utils'
-
-  const CARET_WIDTH = '30px'
-  const BORDER_WIDTH = '1px'
-
-  const CaretAttrs = { colorMode: String }
-  const Caret = styled('div', CaretAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
-    min-width: ${(props) =>
-      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
-    height: 100%;
-    align-items: center;
-    cursor: pointer;
-    margin-left: auto;
-  `
-
-  const selectorProps = {
-    disabled: Boolean,
-    selectWidth: String,
-    paddingLeft: String,
-    showBorder: Boolean,
-  }
-  const Selector = styled('div', selectorProps)`
-    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
-    ${(props) =>
-      props.selectWidth === '100%'
-        ? 'width: 100%;'
-        : `width: calc(${props.selectWidth} -
-      (
-        ${CARET_WIDTH} +
-        ${props.paddingLeft}
-        ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
-      )
-    );
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;`}
-  `
-
-  const labelAttrs = { fontSize: String, fontColor: String }
-  const InputLabel = styled('div', labelAttrs)`
-    color: ${(props) =>
-      props.theme.colors[props.fontColor]
-        ? props.theme.colors[props.fontColor]
-        : props.fontColor};
-    font-size: ${(props) => props.fontSize};
-    font-weight: 700;
-  `
-  const OptionalLabel = styled.span`
-    font-weight: 300;
-    text-transform: lowercase;
-  `
-  const inputProps = {
-    selectWidth: String,
-    optionWidth: String,
-    noRelative: Boolean,
-  }
-  const Container = styled('div', inputProps)`
-    width: ${(props) => props.selectWidth};
-    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
-    display: inline-block;
-  `
-
-  const LabelWrapperAttrs = { infoTextMessage: Boolean }
-  const LabelWrapper = styled('div', LabelWrapperAttrs)`
-    display: inline-grid;
-    grid-template-columns: ${(props) =>
-      props.infoTextMessage ? 'auto auto' : 'auto'};
-    grid-gap: 12px;
-    align-items: center;
-    justify-content: start;
-  `
-
-  const SelectButtonWrapperAttrs = {
-    disabled: Boolean,
-  }
-  const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
-    ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
-  `
-
-  const selectButtonAttrs = {
-    bgColor: String,
-    fontColor: String,
-    hasError: Boolean,
-    disabled: Boolean,
-    selectHeight: String,
-    selectWidth: String,
-    height: String,
-    selectMinHeight: String,
-    hasNoPadding: Boolean,
-    showBorder: Boolean,
-    paddingLeft: String,
-    noRelative: Boolean,
-    tablePaddingLeft: String,
-    showDisabledBackground: Boolean,
-    colorMode: String,
-    isSearchBarVisible: Boolean,
-  }
-  const SelectButton = styled('div', selectButtonAttrs)`
-    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
-    box-sizing: border-box;
-    border-radius: 4px;
-    max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
-    ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.isSearchBarVisible
-          ? 'padding: 10px 15px 10px 5px;'
-          : 'padding: 10px 15px;'
-        : props.isSearchBarVisible
-        ? ''
-        : `padding-left: ${
-            props.hasNoPadding
-              ? '0'
-              : props.tablePaddingLeft
-              ? props.tablePaddingLeft
-              : props.paddingLeft
-          }`};
-    text-align: left;
-    min-height: ${(props) =>
-      props.selectHeight
-        ? props.selectHeight
-        : props.selectMinHeight
-        ? props.selectMinHeight
-        : props.height
-        ? props.height
-        : '36px'};
-    display: flex;
-    align-items: center;
-    height: ${(props) => props.selectHeight};
-    ${({ showBorder, theme, hasError }) =>
-      showBorder &&
-      `
-    border: ${BORDER_WIDTH} solid ${
-        hasError ? theme.colors.red : theme.colors.grey4
-      }
-  `}
-    opacity: ${(props) =>
-      props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
-    background-color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? 'transparent'
-        : props.disabled && props.showDisabledBackground
-        ? props.theme.colors.grey5
-        : props.theme.colors[props.bgColor]
-        ? props.theme.colors[props.bgColor]
-        : props.bgColor};
-    color: ${(props) =>
-      props.colorMode === 'transparent'
-        ? props.theme.colors.white
-        : props.disabled && props.showDisabledBackground
-        ? props.theme.colors.black
-        : props.theme.colors[props.fontColor]
-        ? props.theme.colors[props.fontColor]
-        : props.fontColor};
-    ${(props) => (props.disabled ? 'pointer-events: none' : '')};
-    overflow: hidden;
-    & > .handle {
-      border-right: ${(props) =>
-          props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
-        1px solid;
-    }
-  `
-  const selectDropdownAttrs = {
-    hoveredBgColor: String,
-    bgColor: String,
-    fontColor: String,
-    optionWidth: String,
-    hoveredIndex: Number,
-    fontSize: String,
-    dropdownPosition: Object,
-    hoveredValue: Number | String,
-    selectedValue: Number | String,
-    noRelative: Boolean,
-    minWidth: String,
-  }
-  const SelectDropdown = styled('div', selectDropdownAttrs)`
-    box-sizing: border-box;
-    z-index: ${(props) => (props.isActive ? '2' : '99999')};
-    position: absolute;
-    top: ${(props) =>
-      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
-    left: ${(props) => props.dropdownPosition?.left}px;
-    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0px;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
-    min-width: ${(props) =>
-      props.minWidth
-        ? props.minWidth
-        : props.optionWidth
-        ? props.optionWidth
-        : '100%'};
-    background-color: ${(props) =>
-      props.theme.colors[props.bgColor]
-        ? props.theme.colors[props.bgColor]
-        : props.bgColor};
-    color: ${(props) =>
-      props.theme.colors[props.fontColor]
-        ? props.theme.colors[props.fontColor]
-        : props.fontColor};
-    max-height: 300px;
-    overflow-y: auto;
-    & > div[data-value='${(props) => props.hoveredValue}'] {
-      background-color: ${(props) =>
-        props.theme.colors[props.hoveredBgColor]
-          ? props.theme.colors[props.hoveredBgColor]
-          : props.hoveredBgColor};
-    }
-    font-size: ${(props) => props.fontSize};
-  `
-  SelectDropdown.emits = ['option-hovered', 'option-selected']
-  const DropdownAttrs = { noRelative: Boolean }
-  const DropdownWrapper = styled('div', DropdownAttrs)`
-    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
-  `
-  const inputAttrs = {
-    alignItems: String,
-    hasLabel: Boolean,
-    noRelative: Boolean,
-  }
-  const InputWrapper = styled('div', inputAttrs)`
-    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
-    display: grid;
-    width: 100%;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
-    align-items: center;
-    gap: 8px;
-    grid-template-columns: ${(props) =>
-      props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
-  `
-
-  const DROPDOWN_HEIGHT_OFFSET = 4
-  const DROPDOWN_TOP_OFFSET = 21
-  const MIN_OPTION_LENGTH = 5
-
-  const DROPDOWN_MENU_POSITIONS = {
-    Automatic: 'automatic',
-    Bottom: 'bottom',
-  }
-
-  export default {
-    name: 'RCselect',
-
-    components: {
-      SelectButton,
-      SelectButtonWrapper,
-      SelectDropdown,
-      Container,
-      InputLabel,
-      LabelWrapper,
-      OptionalLabel,
-      InfoText,
-      InputWrapper,
-      DropdownWrapper,
-      Icon,
-      Caret,
-      Selector,
-      InputText,
-      Teleport,
-      DraggableInputHandle,
-    },
-
-    props: {
-      value: {
-        required: false,
-        default: null,
-      },
-      fontSize: {
-        required: false,
-        default: '13px',
-      },
-      noRelative: {
-        required: false,
-        default: false,
-      },
-      label: {
-        required: false,
-      },
-      labelOptional: {
-        required: false,
-        default: false,
-      },
-      labelDataId: {
-        required: false,
-        default: '',
-      },
-      infoTextMessage: {
-        required: false,
-      },
-      selectWidth: {
-        type: String,
-        required: false,
-        default: '100%',
-      },
-      minWidth: {
-        required: false,
-      },
-      maxWidth: {
-        required: false,
-      },
-      selectHeight: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      height: {
-        required: false,
-        default: null,
-      },
-      selectMinHeight: {
-        required: false,
-        default: '36px',
-      },
-      optionWidth: {
-        required: false,
-        default: null,
-      },
-      hoverDropdown: {
-        required: false,
-        default: false,
-      },
-      dropdownAutoClose: {
-        required: false,
-        default: false,
-      },
-      alignItems: {
-        required: false,
-        default: 'horizontal',
-      },
-      buttonBgColor: {
-        required: false,
-      },
-      buttonFontColor: {
-        required: false,
-      },
-      dropdownBgColor: {
-        required: false,
-        default: 'grey5',
-      },
-      dropdownFontColor: {
-        required: false,
-      },
-      dropDownArrowVisible: {
-        required: false,
-        default: true,
-      },
-      caretColor: {
-        required: false,
-      },
-      labelFontColor: {
-        required: false,
-      },
-      colorMode: {
-        required: false,
-        default: 'light',
-      },
-      isSearchable: {
-        required: false,
-        default: true,
-      },
-      hasError: {
-        required: false,
-        default: false,
-      },
-      disabled: {
-        required: false,
-        type: Boolean,
-        default: false,
-      },
-      isAutoSearch: {
-        required: false,
-        default: true,
-      },
-      showBorder: {
-        required: false,
-        default: true,
-      },
-      infoTextSize: {
-        required: false,
-        default: '14px',
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
-      hasSelectButtonPadding: {
-        required: false,
-        type: Boolean,
-        default: true,
-      },
-      isDraggable: {
-        type: Boolean,
-        default: false,
-      },
-      leftPadding: {
-        type: String,
-        default: '15px',
-      },
-      tablePaddingLeft: {
-        required: false,
-      },
-      showDisabledBackground: {
-        required: false,
-        default: true,
-      },
-      minOptionLength: {
-        type: Number,
-        default: MIN_OPTION_LENGTH,
-      },
-      dropdownMenuPosition: {
-        type: String,
-        default: DROPDOWN_MENU_POSITIONS.Automatic, // options: ['automatic', bottom]
-      },
-      infoTextWidth: {
-        type: String,
-        required: false,
-      },
-      infoTextAlignArrow: {
-        type: String,
-        required: false,
-      },
-    },
-
-    data() {
-      return {
-        selectedValue: null,
-        paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
-        isDropdownOpen: false,
-        isActive: false,
-        textSearch: '',
-        hoveredIndex: 0,
-        isClickOutsideActive: false,
-        dropdownPosition: {
-          left: null,
-          top: null,
-        },
-        dropdownWidth: null,
-        hoveredValue: null,
-      }
-    },
-    computed: {
-      optionLength() {
-        if (this.isDropdownOpen) {
-          return this.$refs.dropdown.$el.childElementCount > 1
-            ? this.$refs.dropdown.$el.childElementCount
-            : this.$refs.dropdown.$el.children[0]
-            ? this.$refs.dropdown.$el.children[0].childElementCount
-            : 0
-        }
-
-        return 0
-      },
-      isSearchBarVisible() {
-        return (
-          this.isSearchable &&
-          this.optionLength >= this.minOptionLength &&
-          this.isDropdownOpen
-        )
-      },
-      computedWidth() {
-        function removePX(item) {
-          return Number(item.replace('px', ''))
-        }
-
-        return this.selectWidth === '100%'
-          ? '100%'
-          : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
-      },
-      getOptionWidth() {
-        if (this.optionWidth) return this.optionWidth
-
-        return this.dropdownWidth
-      },
-      isSelectDropdownShown() {
-        return (
-          this.isDropdownOpen &&
-          this.dropdownPosition.left !== null &&
-          (!this.isSearchable || this.isSearchable)
-        )
-      },
-      isMobileDevice() {
-        const userAgent =
-          navigator.userAgent || navigator.vendor || window.opera
-        const touchCapable =
-          'ontouchstart' in window ||
-          navigator.maxTouchPoints > 0 ||
-          navigator.msMaxTouchPoints > 0
-
-        return (
-          /Android/i.test(userAgent) ||
-          /iPad|iPhone|iPod/.test(userAgent) ||
-          (/Macintosh/.test(userAgent) && touchCapable) ||
-          /windows phone/i.test(userAgent)
-        )
-      },
-    },
-    watch: {
-      value(val) {
-        this.selectedValue = val
-      },
-      async isDropdownOpen(val) {
-        if (val) {
-          this.$emit('on-dropdown-open')
-          setTimeout(() => {
-            this.isClickOutsideActive = true
-          }, 10)
-          await this.$nextTick()
-          this.handleSetDropdownOffet()
-        } else {
-          this.dropdownPosition.left = null
-          setTimeout(() => {
-            this.isClickOutsideActive = false
-          }, 10)
-        }
-        if (val && this.isSearchable) {
-          this.$nextTick(() => {
-            if (this.$refs.searchInput && !this.isMobileDevice) {
-              this.$refs.searchInput.$el.querySelector('input').focus()
-            }
-          })
-        }
-      },
-    },
-    mounted() {
-      this.observeDropdownHeight()
-      this.observeSelectWidth()
-      window.addEventListener('resize', this.handleSetDropdownOffet)
-    },
-    beforeMount() {
-      this.selectedValue = this.value
-      document.addEventListener('click', this.clickOutside)
-      this.getDropdownPosition()
-      window.removeEventListener('resize', this.handleSetDropdownOffet)
-      if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
-      if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-    },
-    unmounted() {
-      document.removeEventListener('click', this.clickOutside)
-    },
-    methods: {
-      focus() {
-        this.isActive = true
-      },
-      blur(e) {
-        this.isActive = false
-        this.$emit('blur', e)
-      },
-      toggleDropdown() {
-        this.isDropdownOpen = !this.isDropdownOpen
-      },
-      toggleCaretDropdown() {
-        this.isDropdownOpen = !this.isDropdownOpen
-      },
-      closeDropdown() {
-        this.blur()
-        this.clearSearch()
-        this.isDropdownOpen = false
-      },
-      clearSearch() {
-        this.textSearch = ''
-        this.searchChange('')
-      },
-      optionSelected(e) {
-        this.selectedValue = e
-        this.closeDropdown()
-        this.blur()
-        this.$emit('input-change', e)
-      },
-      optionHovered: debounce(function (e) {
-        this.hoveredValue = e
-      }, 300),
-      mouseEnterHandler() {
-        if (this.hoverDropdown) {
-          this.focus()
-          this.isDropdownOpen = true
-        }
-      },
-      mouseLeaveHandler() {
-        if (this.hoverDropdown) {
-          this.blur()
-        }
-      },
-      optionLeave() {
-        if (this.dropdownAutoClose) {
-          this.isDropdownOpen = false
-        }
-      },
-      searchChange(value) {
-        this.textSearch = value
-        this.$emit('search-change', value)
-        const dropdownChildren = [...this.$refs.dropdown.$el.children]
-        dropdownChildren.forEach((el) => {
-          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-            el.style.display = 'none'
-
-            return
-          }
-
-          el.style.display = 'inherit'
-        })
-      },
-      clickOutside(event) {
-        const dropdownRef = this.$refs.dropdown
-        // we need to prevent closing on selecting an option, because in the case of
-        // a disabled option, we don't want to close the dropdown
-        if (!this.isClickOutsideActive) return
-        if (
-          this.$refs.select.$el == event.target ||
-          this.$refs.select.$el.contains(event.target) ||
-          event.target.id === 'more-button' ||
-          event.target.parentNode === dropdownRef.$el
-        ) {
-          return
-        } else {
-          this.closeDropdown()
-        }
-      },
-      onKeyDown(e) {
-        if (e.key == 'ArrowDown') {
-          this.onArrowPress(1)
-        } else if (e.key == 'ArrowUp') {
-          this.onArrowPress(-1)
-        } else if (e.key == 'Enter') {
-          const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
-            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-          ]
-          this.optionSelected(optionHoveredComponent.$el.dataset.value)
-        }
-      },
-      // If some part of the dropdown menu is outside viewport of the bottom of the screen,
-      // we need to offset it and display it at the top of the select dropdown instead
-      async getDropdownPosition() {
-        if (
-          !this.$refs.dropdownWrapperRef ||
-          !this.$refs.select ||
-          !this.$refs.dropdown
-        ) {
-          return
-        }
-        await this.$nextTick()
-        const isDisplayedAtBottom = await this.generateDropdownPosition()
-        // If the dropdown menu is going to be displayed at the bottom,
-        // we need reverify its position after a dom update (nextTick)
-        await this.$nextTick()
-        if (isDisplayedAtBottom) this.generateDropdownPosition()
-      },
-      async generateDropdownPosition() {
-        const isDropdownNotCompletelyVisible =
-          await this.isBottomOfDropdownOutOfViewport()
-        const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
-        const selectButtonHeight = this.$refs.select.$el.clientHeight
-        const dropdownHeight = this.$refs.dropdown.$el.clientHeight
-        const dropdownWrapperRelativeHeight =
-          dropdownWrapperEl.getBoundingClientRect().top +
-          window.scrollY +
-          DROPDOWN_HEIGHT_OFFSET
-
-        const top =
-          isDropdownNotCompletelyVisible ||
-          (!isDropdownNotCompletelyVisible &&
-            this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom)
-            ? dropdownWrapperRelativeHeight
-            : dropdownWrapperRelativeHeight -
-              dropdownHeight -
-              selectButtonHeight -
-              DROPDOWN_TOP_OFFSET
-        const left = this.dropdownPosition.left
-          ? this.dropdownPosition.left
-          : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX
-
-        this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
-
-        return isDropdownNotCompletelyVisible
-      },
-      async isBottomOfDropdownOutOfViewport() {
-        if (
-          !this.$refs.dropdown ||
-          this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
-        ) {
-          return false
-        }
-
-        await this.$nextTick()
-        const rect = this.$refs.dropdown.$el.getBoundingClientRect()
-        const windowHeight =
-          window.innerHeight || document.documentElement.clientHeight
-
-        if (windowHeight <= 650) return true
-
-        // using Math.floor because the offsets may contain decimals we are not going to consider here
-        return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
-      },
-      observeDropdownHeight() {
-        if (!this.$refs.dropdown) return
-        this.dropdownResizeObserver = new ResizeObserver(() => {
-          this.$nextTick(() => this.getDropdownPosition())
-        })
-        this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
-      },
-      handleSetDropdownOffet() {
-        if (!this.$refs.select) return
-        this.dropdownPosition.left = Math.floor(
-          this.$refs.select.$el.getBoundingClientRect().left
-        )
-        this.getDropdownWidth()
-      },
-      observeSelectWidth() {
-        if (!this.$refs.select) return
-        this.selectResizeObserver = new ResizeObserver(() =>
-          // eslint-disable-next-line vue/valid-next-tick
-          this.$nextTick(() => this.getDropdownWidth())
-        )
-        this.selectResizeObserver.observe(this.$refs.dropdown.$el)
-      },
-      async getDropdownWidth() {
-        if (!this.$refs.select) return
-        await this.$nextTick()
-        this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
-      },
-      onArrowPress(dir) {
-        let newHoveredElem
-        const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
-          `[data-value="${this.hoveredValue}"]`
-        )
-        if (currentHoveredElem) {
-          if (dir > 0) {
-            newHoveredElem = currentHoveredElem.nextElementSibling
-          } else {
-            newHoveredElem = currentHoveredElem.previousElementSibling
-          }
-          if (newHoveredElem) {
-            this.hoveredValue = newHoveredElem.getAttribute('data-value')
-            const topPos = newHoveredElem.offsetTop
-            this.$refs.dropdown.$el.scrollTop = topPos
-          }
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <Container
+    :no-relative="noRelative"
+    :select-width="selectWidth"
+    @mouseenter="mouseEnterHandler"
+    @mouseleave="mouseLeaveHandler"
+  >
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="!!label && label.length > 0"
+      :no-relative="noRelative"
+    >
+      <LabelWrapper
+        v-if="label"
+        :data-id="labelDataId"
+        :data-qa-id="dataQaId + '_label'"
+        :info-text-message="!!infoTextMessage || !!$slots.infoText"
+      >
+        <InputLabel
+          :font-color="
+            labelFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'eturnityGrey'
+          "
+          :font-size="fontSize"
+          >{{ label }}
+          <OptionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</OptionalLabel
+          >
+        </InputLabel>
+        <InfoText
+          v-if="infoTextMessage || !!$slots.infoText"
+          :align-arrow="infoTextAlignArrow"
+          :max-width="infoTextWidth"
+          :size="infoTextSize"
+          :text="infoTextMessage"
+          :width="infoTextWidth"
+        >
+          <slot name="infoText"></slot>
+        </InfoText>
+      </LabelWrapper>
+      <SelectButtonWrapper :disabled="disabled">
+        <SelectButton
+          ref="select"
+          :bg-color="
+            buttonBgColor || colorMode == 'dark'
+              ? 'transparentBlack1'
+              : colorMode == 'transparent'
+              ? 'transparent'
+              : 'white'
+          "
+          class="select-button"
+          :color-mode="colorMode"
+          :data-id="dataId"
+          :data-qa-id="dataQaId"
+          :disabled="disabled"
+          :font-color="
+            buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
+              ? 'white'
+              : 'black'
+          "
+          :font-size="fontSize"
+          :has-error="hasError"
+          :has-no-padding="isSearchBarVisible || !hasSelectButtonPadding"
+          :height="height"
+          :is-search-bar-visible="isSearchBarVisible"
+          :no-relative="noRelative"
+          :padding-left="paddingLeft"
+          :select-height="selectHeight"
+          :select-min-height="selectMinHeight"
+          :select-width="selectWidth"
+          :show-border="showBorder"
+          :show-disabled-background="showDisabledBackground"
+          :table-padding-left="tablePaddingLeft"
+          @click="toggleDropdown"
+          @keydown="onKeyDown"
+        >
+          <DraggableInputHandle
+            v-if="isDraggable && !isSearchBarVisible"
+            :height="selectHeight"
+          />
+          <InputText
+            v-if="isSearchBarVisible"
+            ref="searchInput"
+            background-color="transparent"
+            :font-color="
+              buttonFontColor ||
+              colorMode == 'dark' ||
+              colorMode == 'transparent'
+                ? 'white'
+                : 'black'
+            "
+            :font-size="fontSize"
+            input-height="34px"
+            :input-width="computedWidth"
+            :no-border="true"
+            tabindex="0"
+            :value="textSearch"
+            @click.stop
+            @input-change="searchChange"
+            @keydown.stop="onKeyDown"
+          />
+          <Selector
+            v-else
+            :disabled="disabled"
+            :padding-left="paddingLeft"
+            :select-width="selectWidth"
+            :show-border="showBorder"
+          >
+            <slot name="selector" :selected-value="selectedValue"></slot>
+          </Selector>
+          <Caret
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
+            <Icon
+              v-if="isDropdownOpen"
+              :color="
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
+                  ? 'white'
+                  : 'transparentBlack1'
+              "
+              name="arrow_up"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
+            />
+            <Icon
+              v-else
+              :color="
+                caretColor || colorMode == 'dark' || colorMode == 'transparent'
+                  ? 'white'
+                  : 'transparentBlack1'
+              "
+              name="arrow_down"
+              :size="colorMode === 'transparent' ? '8px' : '12px'"
+            />
+          </Caret>
+        </SelectButton>
+        <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
+          <Teleport to="body">
+            <SelectDropdown
+              v-show="isSelectDropdownShown"
+              ref="dropdown"
+              :bg-color="
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'black'
+                  : 'white'
+              "
+              :dropdown-position="dropdownPosition"
+              :font-color="
+                dropdownFontColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
+                  ? 'white'
+                  : 'black'
+              "
+              :font-size="fontSize"
+              :hovered-bg-color="
+                colorMode == 'dark'
+                  ? '#000000'
+                  : colorMode == 'transparent'
+                  ? 'grey6'
+                  : dropdownBgColor
+              "
+              :hovered-index="hoveredIndex"
+              :hovered-value="hoveredValue"
+              :is-active="isActive"
+              :min-width="minWidth"
+              :no-relative="noRelative"
+              :option-width="getOptionWidth"
+              :selected-value="selectedValue"
+              @mouseleave="optionLeave"
+              @option-hovered="optionHovered"
+              @option-selected="optionSelected"
+            >
+              <slot name="dropdown"></slot>
+            </SelectDropdown>
+          </Teleport>
+        </DropdownWrapper>
+      </SelectButtonWrapper>
+    </InputWrapper>
+  </Container>
+</template>
+
+<script>
+  //How to use it
+  // <Select
+  //     hoverDropdown="true"
+  //     selectWidth="100%"
+  //     minWidth="220px"
+  //     optionWidth="50%"
+  //     label="that is a label"
+  //     alignItems="vertical"
+  //     label-data-id="test-label-data-id"
+  //     data-id="test-data-id"
+  //     :hasSelectButtonPadding="false"
+  //     >
+  //     <template #selector="{selectedValue}">
+  //     value selected: {{selectedValue}}
+  //     </template>
+  //     <template #dropdown>
+  //     <Option value="1">value one</Option>
+  //     <Option value="2">value two</Option>
+  //     <Option value="3">value three</Option>
+  //     <Option value="4">value four</Option>
+  //     </template>
+  // </Select>
+
+  import { Teleport } from 'vue'
+  import styled from 'vue3-styled-components'
+  import InfoText from '../../infoText'
+  import Icon from '../../icon'
+  import InputText from '../inputText'
+  import DraggableInputHandle from '../../draggableInputHandle'
+  import { debounce } from '../../../utils'
+
+  const CARET_WIDTH = '30px'
+  const BORDER_WIDTH = '1px'
+
+  const CaretAttrs = { colorMode: String }
+  const Caret = styled('div', CaretAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    min-width: ${(props) =>
+      props.colorMode === 'transparent' ? '15px' : CARET_WIDTH};
+    height: 100%;
+    align-items: center;
+    cursor: pointer;
+    margin-left: auto;
+  `
+
+  const selectorProps = {
+    disabled: Boolean,
+    selectWidth: String,
+    paddingLeft: String,
+    showBorder: Boolean,
+  }
+  const Selector = styled('div', selectorProps)`
+    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
+    ${(props) =>
+      props.selectWidth === '100%'
+        ? 'width: 100%;'
+        : `width: calc(${props.selectWidth} -
+      (
+        ${CARET_WIDTH} +
+        ${props.paddingLeft}
+        ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
+      )
+    );
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;`}
+  `
+
+  const labelAttrs = { fontSize: String, fontColor: String }
+  const InputLabel = styled('div', labelAttrs)`
+    color: ${(props) =>
+      props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
+    font-size: ${(props) => props.fontSize};
+    font-weight: 700;
+  `
+  const OptionalLabel = styled.span`
+    font-weight: 300;
+    text-transform: lowercase;
+  `
+  const inputProps = {
+    selectWidth: String,
+    optionWidth: String,
+    noRelative: Boolean,
+  }
+  const Container = styled('div', inputProps)`
+    width: ${(props) => props.selectWidth};
+    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+    display: inline-block;
+  `
+
+  const LabelWrapperAttrs = { infoTextMessage: Boolean }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
+    display: inline-grid;
+    grid-template-columns: ${(props) =>
+      props.infoTextMessage ? 'auto auto' : 'auto'};
+    grid-gap: 12px;
+    align-items: center;
+    justify-content: start;
+  `
+
+  const SelectButtonWrapperAttrs = {
+    disabled: Boolean,
+  }
+  const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
+    ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
+  `
+
+  const selectButtonAttrs = {
+    bgColor: String,
+    fontColor: String,
+    hasError: Boolean,
+    disabled: Boolean,
+    selectHeight: String,
+    selectWidth: String,
+    height: String,
+    selectMinHeight: String,
+    hasNoPadding: Boolean,
+    showBorder: Boolean,
+    paddingLeft: String,
+    noRelative: Boolean,
+    tablePaddingLeft: String,
+    showDisabledBackground: Boolean,
+    colorMode: String,
+    isSearchBarVisible: Boolean,
+  }
+  const SelectButton = styled('div', selectButtonAttrs)`
+    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+    box-sizing: border-box;
+    border-radius: 4px;
+    max-width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+    ${(props) =>
+      props.colorMode === 'transparent'
+        ? props.isSearchBarVisible
+          ? 'padding: 10px 15px 10px 5px;'
+          : 'padding: 10px 15px;'
+        : props.isSearchBarVisible
+        ? ''
+        : `padding-left: ${
+            props.hasNoPadding
+              ? '0'
+              : props.tablePaddingLeft
+              ? props.tablePaddingLeft
+              : props.paddingLeft
+          }`};
+    text-align: left;
+    min-height: ${(props) =>
+      props.selectHeight
+        ? props.selectHeight
+        : props.selectMinHeight
+        ? props.selectMinHeight
+        : props.height
+        ? props.height
+        : '36px'};
+    display: flex;
+    align-items: center;
+    height: ${(props) => props.selectHeight};
+    ${({ showBorder, theme, hasError }) =>
+      showBorder &&
+      `
+    border: ${BORDER_WIDTH} solid ${
+        hasError ? theme.colors.red : theme.colors.grey4
+      }
+  `}
+    opacity: ${(props) =>
+      props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
+    background-color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? 'transparent'
+        : props.disabled && props.showDisabledBackground
+        ? props.theme.colors.grey5
+        : props.theme.colors[props.bgColor]
+        ? props.theme.colors[props.bgColor]
+        : props.bgColor};
+    color: ${(props) =>
+      props.colorMode === 'transparent'
+        ? props.theme.colors.white
+        : props.disabled && props.showDisabledBackground
+        ? props.theme.colors.black
+        : props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
+    ${(props) => (props.disabled ? 'pointer-events: none' : '')};
+    overflow: hidden;
+    & > .handle {
+      border-right: ${(props) =>
+          props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+        1px solid;
+    }
+  `
+  const selectDropdownAttrs = {
+    hoveredBgColor: String,
+    bgColor: String,
+    fontColor: String,
+    optionWidth: String,
+    hoveredIndex: Number,
+    fontSize: String,
+    dropdownPosition: Object,
+    hoveredValue: Number | String,
+    selectedValue: Number | String,
+    noRelative: Boolean,
+    minWidth: String,
+  }
+  const SelectDropdown = styled('div', selectDropdownAttrs)`
+    box-sizing: border-box;
+    z-index: ${(props) => (props.isActive ? '2' : '99999')};
+    position: absolute;
+    top: ${(props) =>
+      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+    left: ${(props) => props.dropdownPosition?.left}px;
+    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+    min-width: ${(props) =>
+      props.minWidth
+        ? props.minWidth
+        : props.optionWidth
+        ? props.optionWidth
+        : '100%'};
+    background-color: ${(props) =>
+      props.theme.colors[props.bgColor]
+        ? props.theme.colors[props.bgColor]
+        : props.bgColor};
+    color: ${(props) =>
+      props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
+    max-height: 300px;
+    overflow-y: auto;
+    & > div[data-value='${(props) => props.hoveredValue}'] {
+      background-color: ${(props) =>
+        props.theme.colors[props.hoveredBgColor]
+          ? props.theme.colors[props.hoveredBgColor]
+          : props.hoveredBgColor};
+    }
+    font-size: ${(props) => props.fontSize};
+  `
+  SelectDropdown.emits = ['option-hovered', 'option-selected']
+  const DropdownAttrs = { noRelative: Boolean }
+  const DropdownWrapper = styled('div', DropdownAttrs)`
+    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+  `
+  const inputAttrs = {
+    alignItems: String,
+    hasLabel: Boolean,
+    noRelative: Boolean,
+  }
+  const InputWrapper = styled('div', inputAttrs)`
+    position: ${(props) => (props.noRelative ? 'static' : 'relative')};
+    display: grid;
+    width: 100%;
+    min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
+    align-items: center;
+    gap: 8px;
+    grid-template-columns: ${(props) =>
+      props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
+  `
+
+  const DROPDOWN_HEIGHT_OFFSET = 4
+  const DROPDOWN_TOP_OFFSET = 21
+  const MIN_OPTION_LENGTH = 5
+
+  const DROPDOWN_MENU_POSITIONS = {
+    Automatic: 'automatic',
+    Bottom: 'bottom',
+  }
+
+  export default {
+    name: 'RCselect',
+
+    components: {
+      SelectButton,
+      SelectButtonWrapper,
+      SelectDropdown,
+      Container,
+      InputLabel,
+      LabelWrapper,
+      OptionalLabel,
+      InfoText,
+      InputWrapper,
+      DropdownWrapper,
+      Icon,
+      Caret,
+      Selector,
+      InputText,
+      Teleport,
+      DraggableInputHandle,
+    },
+
+    props: {
+      value: {
+        required: false,
+        default: null,
+      },
+      fontSize: {
+        required: false,
+        default: '13px',
+      },
+      noRelative: {
+        required: false,
+        default: false,
+      },
+      label: {
+        required: false,
+      },
+      labelOptional: {
+        required: false,
+        default: false,
+      },
+      labelDataId: {
+        required: false,
+        default: '',
+      },
+      infoTextMessage: {
+        required: false,
+      },
+      selectWidth: {
+        type: String,
+        required: false,
+        default: '100%',
+      },
+      minWidth: {
+        required: false,
+      },
+      maxWidth: {
+        required: false,
+      },
+      selectHeight: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      height: {
+        required: false,
+        default: null,
+      },
+      selectMinHeight: {
+        required: false,
+        default: '36px',
+      },
+      optionWidth: {
+        required: false,
+        default: null,
+      },
+      hoverDropdown: {
+        required: false,
+        default: false,
+      },
+      dropdownAutoClose: {
+        required: false,
+        default: false,
+      },
+      alignItems: {
+        required: false,
+        default: 'horizontal',
+      },
+      buttonBgColor: {
+        required: false,
+      },
+      buttonFontColor: {
+        required: false,
+      },
+      dropdownBgColor: {
+        required: false,
+        default: 'grey5',
+      },
+      dropdownFontColor: {
+        required: false,
+      },
+      dropDownArrowVisible: {
+        required: false,
+        default: true,
+      },
+      caretColor: {
+        required: false,
+      },
+      labelFontColor: {
+        required: false,
+      },
+      colorMode: {
+        required: false,
+        default: 'light',
+      },
+      isSearchable: {
+        required: false,
+        default: true,
+      },
+      hasError: {
+        required: false,
+        default: false,
+      },
+      disabled: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
+      isAutoSearch: {
+        required: false,
+        default: true,
+      },
+      showBorder: {
+        required: false,
+        default: true,
+      },
+      infoTextSize: {
+        required: false,
+        default: '14px',
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
+      hasSelectButtonPadding: {
+        required: false,
+        type: Boolean,
+        default: true,
+      },
+      isDraggable: {
+        type: Boolean,
+        default: false,
+      },
+      leftPadding: {
+        type: String,
+        default: '15px',
+      },
+      tablePaddingLeft: {
+        required: false,
+      },
+      showDisabledBackground: {
+        required: false,
+        default: true,
+      },
+      minOptionLength: {
+        type: Number,
+        default: MIN_OPTION_LENGTH,
+      },
+      dropdownMenuPosition: {
+        type: String,
+        default: DROPDOWN_MENU_POSITIONS.Automatic, // options: ['automatic', bottom]
+      },
+      infoTextWidth: {
+        type: String,
+        required: false,
+      },
+      infoTextAlignArrow: {
+        type: String,
+        required: false,
+      },
+    },
+
+    data() {
+      return {
+        selectedValue: null,
+        paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
+        isDropdownOpen: false,
+        isActive: false,
+        textSearch: '',
+        hoveredIndex: 0,
+        isClickOutsideActive: false,
+        dropdownPosition: {
+          left: null,
+          top: null,
+        },
+        dropdownWidth: null,
+        hoveredValue: null,
+      }
+    },
+    computed: {
+      optionLength() {
+        if (this.isDropdownOpen) {
+          return this.$refs.dropdown.$el.childElementCount > 1
+            ? this.$refs.dropdown.$el.childElementCount
+            : this.$refs.dropdown.$el.children[0]
+            ? this.$refs.dropdown.$el.children[0].childElementCount
+            : 0
+        }
+
+        return 0
+      },
+      isSearchBarVisible() {
+        return (
+          this.isSearchable &&
+          this.optionLength >= this.minOptionLength &&
+          this.isDropdownOpen
+        )
+      },
+      computedWidth() {
+        function removePX(item) {
+          return Number(item.replace('px', ''))
+        }
+
+        return this.selectWidth === '100%'
+          ? '100%'
+          : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
+      },
+      getOptionWidth() {
+        if (this.optionWidth) return this.optionWidth
+
+        return this.dropdownWidth
+      },
+      isSelectDropdownShown() {
+        return (
+          this.isDropdownOpen &&
+          this.dropdownPosition.left !== null &&
+          (!this.isSearchable || this.isSearchable)
+        )
+      },
+      isMobileDevice() {
+        const userAgent =
+          navigator.userAgent || navigator.vendor || window.opera
+        const touchCapable =
+          'ontouchstart' in window ||
+          navigator.maxTouchPoints > 0 ||
+          navigator.msMaxTouchPoints > 0
+
+        return (
+          /Android/i.test(userAgent) ||
+          /iPad|iPhone|iPod/.test(userAgent) ||
+          (/Macintosh/.test(userAgent) && touchCapable) ||
+          /windows phone/i.test(userAgent)
+        )
+      },
+    },
+    watch: {
+      value(val) {
+        this.selectedValue = val
+      },
+      async isDropdownOpen(val) {
+        if (val) {
+          this.$emit('on-dropdown-open')
+          setTimeout(() => {
+            this.isClickOutsideActive = true
+          }, 10)
+          await this.$nextTick()
+          this.handleSetDropdownOffet()
+        } else {
+          this.dropdownPosition.left = null
+          setTimeout(() => {
+            this.isClickOutsideActive = false
+          }, 10)
+        }
+        if (val && this.isSearchable) {
+          this.$nextTick(() => {
+            if (this.$refs.searchInput && !this.isMobileDevice) {
+              this.$refs.searchInput.$el.querySelector('input').focus()
+            }
+          })
+        }
+      },
+    },
+    mounted() {
+      this.observeDropdownHeight()
+      this.observeSelectWidth()
+      window.addEventListener('resize', this.handleSetDropdownOffet)
+    },
+    beforeMount() {
+      this.selectedValue = this.value
+      document.addEventListener('click', this.clickOutside)
+      this.getDropdownPosition()
+      window.removeEventListener('resize', this.handleSetDropdownOffet)
+      if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
+      if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
+    },
+    unmounted() {
+      document.removeEventListener('click', this.clickOutside)
+    },
+    methods: {
+      focus() {
+        this.isActive = true
+      },
+      blur(e) {
+        this.isActive = false
+        this.$emit('blur', e)
+      },
+      toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen
+      },
+      toggleCaretDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen
+      },
+      closeDropdown() {
+        this.blur()
+        this.clearSearch()
+        this.isDropdownOpen = false
+      },
+      clearSearch() {
+        this.textSearch = ''
+        this.searchChange('')
+      },
+      optionSelected(e) {
+        this.selectedValue = e
+        this.closeDropdown()
+        this.blur()
+        this.$emit('input-change', e)
+      },
+      optionHovered: debounce(function (e) {
+        this.hoveredValue = e
+      }, 300),
+      mouseEnterHandler() {
+        if (this.hoverDropdown) {
+          this.focus()
+          this.isDropdownOpen = true
+        }
+      },
+      mouseLeaveHandler() {
+        if (this.hoverDropdown) {
+          this.blur()
+        }
+      },
+      optionLeave() {
+        if (this.dropdownAutoClose) {
+          this.isDropdownOpen = false
+        }
+      },
+      searchChange(value) {
+        this.textSearch = value
+        this.$emit('search-change', value)
+        const dropdownChildren = [...this.$refs.dropdown.$el.children]
+        dropdownChildren.forEach((el) => {
+          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+            el.style.display = 'none'
+
+            return
+          }
+
+          el.style.display = 'inherit'
+        })
+      },
+      clickOutside(event) {
+        const dropdownRef = this.$refs.dropdown
+        // we need to prevent closing on selecting an option, because in the case of
+        // a disabled option, we don't want to close the dropdown
+        if (!this.isClickOutsideActive) return
+        if (
+          this.$refs.select.$el == event.target ||
+          this.$refs.select.$el.contains(event.target) ||
+          event.target.id === 'more-button' ||
+          event.target.parentNode === dropdownRef.$el
+        ) {
+          return
+        } else {
+          this.closeDropdown()
+        }
+      },
+      onKeyDown(e) {
+        if (e.key == 'ArrowDown') {
+          this.onArrowPress(1)
+        } else if (e.key == 'ArrowUp') {
+          this.onArrowPress(-1)
+        } else if (e.key == 'Enter') {
+          const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
+            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+          ]
+          this.optionSelected(optionHoveredComponent.$el.dataset.value)
+        }
+      },
+      // If some part of the dropdown menu is outside viewport of the bottom of the screen,
+      // we need to offset it and display it at the top of the select dropdown instead
+      async getDropdownPosition() {
+        if (
+          !this.$refs.dropdownWrapperRef ||
+          !this.$refs.select ||
+          !this.$refs.dropdown
+        ) {
+          return
+        }
+        await this.$nextTick()
+        const isDisplayedAtBottom = await this.generateDropdownPosition()
+        // If the dropdown menu is going to be displayed at the bottom,
+        // we need reverify its position after a dom update (nextTick)
+        await this.$nextTick()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
+      },
+      async generateDropdownPosition() {
+        const isDropdownNotCompletelyVisible =
+          await this.isBottomOfDropdownOutOfViewport()
+        const dropdownWrapperEl = this.$refs.dropdownWrapperRef.$el
+        const selectButtonHeight = this.$refs.select.$el.clientHeight
+        const dropdownHeight = this.$refs.dropdown.$el.clientHeight
+        const dropdownWrapperRelativeHeight =
+          dropdownWrapperEl.getBoundingClientRect().top +
+          window.scrollY +
+          DROPDOWN_HEIGHT_OFFSET
+
+        const top =
+          isDropdownNotCompletelyVisible ||
+          (!isDropdownNotCompletelyVisible &&
+            this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom)
+            ? dropdownWrapperRelativeHeight
+            : dropdownWrapperRelativeHeight -
+              dropdownHeight -
+              selectButtonHeight -
+              DROPDOWN_TOP_OFFSET
+        const left = this.dropdownPosition.left
+          ? this.dropdownPosition.left
+          : dropdownWrapperEl.getBoundingClientRect().left + window.scrollX
+
+        this.dropdownPosition = { left: Math.floor(left), top: Math.floor(top) }
+
+        return isDropdownNotCompletelyVisible
+      },
+      async isBottomOfDropdownOutOfViewport() {
+        if (
+          !this.$refs.dropdown ||
+          this.dropdownMenuPosition === DROPDOWN_MENU_POSITIONS.Bottom
+        ) {
+          return false
+        }
+
+        await this.$nextTick()
+        const rect = this.$refs.dropdown.$el.getBoundingClientRect()
+        const windowHeight =
+          window.innerHeight || document.documentElement.clientHeight
+
+        if (windowHeight <= 650) return true
+
+        // using Math.floor because the offsets may contain decimals we are not going to consider here
+        return Math.floor(rect.top) + Math.floor(rect.height) <= windowHeight
+      },
+      observeDropdownHeight() {
+        if (!this.$refs.dropdown) return
+        this.dropdownResizeObserver = new ResizeObserver(() => {
+          this.$nextTick(() => this.getDropdownPosition())
+        })
+        this.dropdownResizeObserver.observe(this.$refs.dropdown.$el)
+      },
+      handleSetDropdownOffet() {
+        if (!this.$refs.select) return
+        this.dropdownPosition.left = Math.floor(
+          this.$refs.select.$el.getBoundingClientRect().left
+        )
+        this.getDropdownWidth()
+      },
+      observeSelectWidth() {
+        if (!this.$refs.select) return
+        this.selectResizeObserver = new ResizeObserver(() =>
+          // eslint-disable-next-line vue/valid-next-tick
+          this.$nextTick(() => this.getDropdownWidth())
+        )
+        this.selectResizeObserver.observe(this.$refs.dropdown.$el)
+      },
+      async getDropdownWidth() {
+        if (!this.$refs.select) return
+        await this.$nextTick()
+        this.dropdownWidth = `${this.$refs.select.$el.clientWidth}px`
+      },
+      onArrowPress(dir) {
+        let newHoveredElem
+        const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+          `[data-value="${this.hoveredValue}"]`
+        )
+        if (currentHoveredElem) {
+          if (dir > 0) {
+            newHoveredElem = currentHoveredElem.nextElementSibling
+          } else {
+            newHoveredElem = currentHoveredElem.previousElementSibling
+          }
+          if (newHoveredElem) {
+            this.hoveredValue = newHoveredElem.getAttribute('data-value')
+            const topPos = newHoveredElem.offsetTop
+            this.$refs.dropdown.$el.scrollTop = topPos
+          }
+        }
+      },
+    },
+  }
+</script>