@eturnity/eturnity_reusable_components 7.8.0 → 7.8.1-EPDM-8441.1

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

@@ -1,596 +1,622 @@
-<template>
-  <Container
-    :selectWidth="selectWidth"
-    @mouseenter="mouseEnterHandler"
-    @mouseleave="mouseLeaveHandler"
-  >
-    <input-wrapper
-      :hasLabel="!!label && label.length > 0"
-      :alignItems="alignItems"
-    >
-      <label-wrapper v-if="label" :data-id="labelDataId">
-        <input-label
-          :fontColor="
-            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
-          "
-          :fontSize="fontSize"
-          >{{ label }}
-          <optionalLabel v-if="labelOptional">
-            ({{ $gettext('Optional') }})</optionalLabel
-          >
-        </input-label>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          :size="infoTextSize"
-          :alignText="infoTextAlign"
-        />
-      </label-wrapper>
-      <select-button-wrapper :disabled="disabled">
-        <selectButton
-          ref="select"
-          @click="toggleDropdown"
-          :selectHeight="selectHeight"
-          :height="height"
-          :selectMinHeight="selectMinHeight"
-          :bgColor="
-            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
-          "
-          :fontColor="
-            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
-          "
-          :hasError="hasError"
-          :isSearchBarVisible="isSearchBarVisible"
-          :disabled="disabled"
-          @keydown.native="onKeyDown"
-          :showBorder="showBorder"
-          :data-id="dataId"
-        >
-          <inputText
-            v-if="isSearchBarVisible"
-            ref="searchInput"
-            tabindex="0"
-            inputHeight="34px"
-            :noBorder="true"
-            :fontSize="fontSize"
-            backgroundColor="transparent"
-            :fontColor="
-              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
-            "
-            :value="textSearch"
-            @keydown.stop="onKeyDown"
-            @input-change="searchChange"
-            @click.native.stop
-          />
-          <selector v-else>
-            <slot name="selector" :selectedValue="selectedValue"></slot>
-          </selector>
-          <Caret @click.stop="toggleCaretDropdown">
-            <icon
-              v-if="isDropdownOpen"
-              name="arrow_up"
-              size="12px"
-              :color="
-                caretColor || colorMode == 'dark'
-                  ? 'white'
-                  : 'transparentBlack1'
-              "
-            />
-            <icon
-              v-else
-              name="arrow_down"
-              size="12px"
-              :color="
-                caretColor || colorMode == 'dark'
-                  ? 'white'
-                  : 'transparentBlack1'
-              "
-            />
-          </Caret>
-        </selectButton>
-        <DropdownWrapper>
-          <selectDropdown
-            ref="dropdown"
-            v-show="isDropdownOpen"
-            :hoveredIndex="hoveredIndex"
-            :hoveredValue="hoveredValue"
-            :isActive="isActive"
-            :optionWidth="optionWidth"
-            :hoveredBgColor="colorMode == 'dark' ? '#000000' : dropdownBgColor"
-            :bgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
-            :fontColor="
-              dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
-            "
-            :selectedValue="selectedValue"
-            @option-selected="optionSelected"
-            @option-hovered="optionHovered"
-            @mouseleave="optionLeave"
-          >
-            <slot name="dropdown"></slot>
-          </selectDropdown>
-        </DropdownWrapper>
-      </select-button-wrapper>
-    </input-wrapper>
-  </Container>
-</template>
-
-<script>
-//How to use it
-// <Select
-//     hoverDropdown="true"
-//     selectWidth="100%"
-//     optionWidth="50%"
-//     label="that is a label"
-//     alignItems="vertical"
-//     label-data-id="test-label0data-id"
-//     data-id="test-data-id"
-//     >
-//     <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 styled from 'vue-styled-components'
-import InfoText from '../../infoText'
-import icon from '../../icon'
-import inputText from '../inputText'
-
-const Caret = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  min-width: 30px;
-  height: 100%;
-  align-items: stretch
-  cursor: pointer;
-  margin-left: auto;
-`
-
-const Selector = styled.div`
-  width: 100%;
-`
-
-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 ? props.fontSize : '13px')};
-  font-weight: 700;
-`
-const optionalLabel = styled.span`
-  font-weight: 300;
-`
-const inputProps = { selectWidth: String, optionWidth: String }
-const Container = styled('div', inputProps)`
-  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
-  position: relative;
-  display: inline-block;
-`
-const LabelWrapper = styled.div`
-  display: inline-grid;
-  grid-template-columns: 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,
-  height: String,
-  selectMinHeight: String,
-  isSearchBarVisible: Boolean,
-  showBorder: Boolean
-}
-const selectButton = styled('div', selectButtonAttrs)`
-  position: relative;
-  box-sizing: border-box;
-  border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
-  text-align: left;
-  border-radius: 4px;
-  min-height: ${(props) =>
-    props.selectHeight
-      ? props.selectHeight
-      : props.selectMinHeight
-      ? props.selectMinHeight
-      : props.height
-      ? props.height
-      : '36px'};
-  display: flex;
-  align-items: center;
-  max-height: ${(props) => props.selectHeight};
-  ${({ showBorder, theme, hasError }) =>
-    showBorder &&
-    `
-    border:1px solid ${hasError ? theme.colors.red : theme.colors.grey4}
-  `}
-  background-color:${(props) =>
-    props.disabled
-      ? props.theme.colors.grey5
-      : 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};
-  ${(props) => (props.disabled ? 'pointer-events: none' : '')};
-`
-const selectDropdownAttrs = {
-  hoveredBgColor: String,
-  bgColor: String,
-  fontColor: String,
-  selectWidth: String,
-  optionWidth: String,
-  hoveredIndex: Number,
-  hoveredValue: Number | String,
-  selectedValue: Number | String
-}
-const selectDropdown = styled('div', selectDropdownAttrs)`
-    box-sizing: border-box;
-    z-index:${(props) => (props.isActive ? '2' : '1')};
-    position:absolute;
-    top:5px;
-    border:1px 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%')};
-    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};
-    }
-`
-const DropdownWrapper = styled('div')`
-  position: relative;
-`
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
-  display: grid;
-  align-items: center;
-  gap: 8px;
-  grid-template-columns: ${(props) =>
-    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
-`
-export default {
-  name: 'RCselect',
-
-  props: {
-    value: {
-      required: false,
-      default: null
-    },
-    fontSize: {
-      required: false,
-      default: null
-    },
-    label: {
-      required: false
-    },
-    labelOptional: {
-      required: false,
-      default: false
-    },
-    labelDataId: {
-      required: false,
-      default: ''
-    },
-    infoTextMessage: {
-      required: false
-    },
-    infoTextAlign: {
-      required: false
-    },
-    selectWidth: {
-      required: false,
-      default: null
-    },
-    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
-    },
-    caretColor: {
-      required: false
-    },
-    labelFontColor: {
-      required: false
-    },
-    colorMode: {
-      required: false,
-      default: 'light'
-    },
-    isSearchable: {
-      required: false,
-      default: true
-    },
-    hasError: {
-      required: false,
-      default: false
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    isAutoSearch: {
-      required: false,
-      default: true
-    },
-    showBorder: {
-      required: false,
-      default: true
-    },
-    infoTextSize: {
-      required: false,
-      default: '14px'
-    },
-    dataId: {
-      type: String,
-      default: ''
-    }
-  },
-
-  components: {
-    selectButton,
-    SelectButtonWrapper,
-    selectDropdown,
-    Container,
-    InputLabel,
-    LabelWrapper,
-    optionalLabel,
-    InfoText,
-    InputWrapper,
-    DropdownWrapper,
-    icon,
-    Caret,
-    Selector,
-    inputText
-  },
-
-  data() {
-    return {
-      selectedValue: null,
-      isDropdownOpen: false,
-      isActive: false,
-      textSearch: '',
-      hoveredIndex: 0,
-      hoveredValue: null,
-      isClickOutsideActive: false
-    }
-  },
-  mounted() {
-    this.selectedValue = this.value
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
-  },
-  methods: {
-    focus() {
-      this.isActive = true
-    },
-    blur() {
-      this.isActive = false
-    },
-    toggleDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    toggleCaretDropdown() {
-      this.isDropdownOpen = !this.isDropdownOpen
-    },
-    openDropdown() {
-      this.focus()
-      this.isDropdownOpen = true
-    },
-    closeDropdown() {
-      this.blur()
-      this.isDropdownOpen = false
-    },
-    optionSelected(e) {
-      this.selectedValue = e
-      this.closeDropdown()
-      this.blur()
-      this.$emit('input-change', e)
-    },
-    optionHovered(e) {
-      this.hoveredValue = e
-    },
-    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)
-      this.$refs.dropdown.$children
-        .map((component) => component.$el)
-        .forEach((el) => {
-          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-            el.style.display = 'none'
-          } else {
-            el.style.display = 'inherit'
-          }
-        })
-    },
-    onSelectSlotClick() {
-      this.toggleDropdown()
-    },
-    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.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.$children[
-            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-          ]
-        this.optionSelected(optionHoveredComponent.$el.dataset.value)
-      }
-    },
-    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
-        }
-      }
-    }
-  },
-  computed: {
-    optionLength() {
-      if (this.isDropdownOpen) {
-        // this filterRef is needed to check for the # of children on Filter dropdowns
-        const filterRef =
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length > 1
-            ? this.$refs.dropdown.$children
-            : this.$refs.dropdown.$children[0].$children
-            ? this.$refs.dropdown.$children[0].$children
-            : this.$refs.dropdown.$children
-        return filterRef.length
-      } else {
-        return 0
-      }
-    },
-    isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
-    }
-  },
-  watch: {
-    value(val) {
-      this.selectedValue = val
-    },
-    isDropdownOpen(val) {
-      this.$emit('is-dropdown-open', val)
-      if (val) {
-        setTimeout(() => {
-          this.isClickOutsideActive = true
-        }, 10)
-      } else {
-        setTimeout(() => {
-          this.isClickOutsideActive = false
-        }, 10)
-      }
-      if (val && this.isSearchable) {
-        this.$nextTick(() => {
-          if (this.$refs.searchInput) {
-            this.$refs.searchInput.$el.querySelector('input').focus()
-          }
-        })
-      }
-    }
-  }
-}
-</script>
+<template>
+  <Container
+    :selectWidth="selectWidth"
+    @mouseenter="mouseEnterHandler"
+    @mouseleave="mouseLeaveHandler"
+  >
+    <input-wrapper
+      :hasLabel="!!label && label.length > 0"
+      :alignItems="alignItems"
+    >
+      <label-wrapper v-if="label" :data-id="labelDataId">
+        <input-label
+          :fontColor="
+            labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
+          "
+          :fontSize="fontSize"
+          >{{ label }}
+          <optionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</optionalLabel
+          >
+        </input-label>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          :size="infoTextSize"
+          :alignText="infoTextAlign"
+        />
+      </label-wrapper>
+      <select-button-wrapper :disabled="disabled">
+        <selectButton
+          ref="select"
+          @click="toggleDropdown"
+          :selectHeight="selectHeight"
+          :height="height"
+          :selectMinHeight="selectMinHeight"
+          :bgColor="
+            buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
+          "
+          :fontColor="
+            buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+          "
+          :hasError="hasError"
+          :isSearchBarVisible="isSearchBarVisible"
+          :disabled="disabled"
+          @keydown.native="onKeyDown"
+          :showBorder="showBorder"
+          :data-id="dataId"
+        >
+          <inputText
+            v-if="isSearchBarVisible"
+            ref="searchInput"
+            tabindex="0"
+            inputHeight="34px"
+            :noBorder="true"
+            :fontSize="fontSize"
+            backgroundColor="transparent"
+            :fontColor="
+              buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
+            "
+            :value="isSearchable ? textSearch : selectedOptionText"
+            :readonly="!isSearchable"
+            @keydown.stop="onKeyDown"
+            @input-change="searchChange"
+            @click.native.stop
+          />
+          <selector v-else>
+            <slot name="selector" :selectedValue="selectedValue"></slot>
+          </selector>
+          <Caret @click.stop="toggleCaretDropdown">
+            <icon
+              v-if="isDropdownOpen"
+              name="arrow_up"
+              size="12px"
+              :color="
+                caretColor || colorMode == 'dark'
+                  ? 'white'
+                  : 'transparentBlack1'
+              "
+            />
+            <icon
+              v-else
+              name="arrow_down"
+              size="12px"
+              :color="
+                caretColor || colorMode == 'dark'
+                  ? 'white'
+                  : 'transparentBlack1'
+              "
+            />
+          </Caret>
+        </selectButton>
+        <DropdownWrapper>
+          <selectDropdown
+            ref="dropdown"
+            v-show="isDropdownOpen"
+            :hoveredIndex="hoveredIndex"
+            :hoveredValue="hoveredValue"
+            :isActive="isActive"
+            :optionWidth="optionWidth"
+            :hoveredBgColor="colorMode == 'dark' ? '#000000' : dropdownBgColor"
+            :bgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
+            :fontColor="
+              dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
+            "
+            :selectedValue="selectedValue"
+            @option-selected="optionSelected"
+            @option-hovered="optionHovered"
+            @mouseleave="optionLeave"
+          >
+            <slot name="dropdown"></slot>
+          </selectDropdown>
+        </DropdownWrapper>
+      </select-button-wrapper>
+    </input-wrapper>
+  </Container>
+</template>
+
+<script>
+//How to use it
+// <Select
+//     hoverDropdown="true"
+//     selectWidth="100%"
+//     optionWidth="50%"
+//     label="that is a label"
+//     alignItems="vertical"
+//     label-data-id="test-label0data-id"
+//     data-id="test-data-id"
+//     >
+//     <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 styled from 'vue-styled-components'
+import InfoText from '../../infoText'
+import icon from '../../icon'
+import inputText from '../inputText'
+
+const Caret = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  min-width: 30px;
+  height: 100%;
+  align-items: stretch
+  cursor: pointer;
+  margin-left: auto;
+`
+
+const Selector = styled.div`
+  width: 100%;
+`
+
+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 ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
+const inputProps = { selectWidth: String, optionWidth: String }
+const Container = styled('div', inputProps)`
+  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+  position: relative;
+  display: inline-block;
+`
+const LabelWrapper = styled.div`
+  display: inline-grid;
+  grid-template-columns: 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,
+  height: String,
+  selectMinHeight: String,
+  isSearchBarVisible: Boolean,
+  showBorder: Boolean
+}
+const selectButton = styled('div', selectButtonAttrs)`
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
+  text-align: left;
+  border-radius: 4px;
+  min-height: ${(props) =>
+    props.selectHeight
+      ? props.selectHeight
+      : props.selectMinHeight
+      ? props.selectMinHeight
+      : props.height
+      ? props.height
+      : '36px'};
+  display: flex;
+  align-items: center;
+  max-height: ${(props) => props.selectHeight};
+  ${({ showBorder, theme, hasError }) =>
+    showBorder &&
+    `
+    border:1px solid ${hasError ? theme.colors.red : theme.colors.grey4}
+  `}
+  background-color:${(props) =>
+    props.disabled
+      ? props.theme.colors.grey5
+      : 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};
+  ${(props) => (props.disabled ? 'pointer-events: none' : '')};
+`
+const selectDropdownAttrs = {
+  hoveredBgColor: String,
+  bgColor: String,
+  fontColor: String,
+  selectWidth: String,
+  optionWidth: String,
+  hoveredIndex: Number,
+  hoveredValue: Number | String,
+  selectedValue: Number | String
+}
+const selectDropdown = styled('div', selectDropdownAttrs)`
+    box-sizing: border-box;
+    z-index:${(props) => (props.isActive ? '2' : '1')};
+    position:absolute;
+    top:5px;
+    border:1px 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%')};
+    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};
+    }
+`
+const DropdownWrapper = styled('div')`
+  position: relative;
+`
+const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const InputWrapper = styled('div', inputAttrs)`
+  position: relative;
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  grid-template-columns: ${(props) =>
+    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
+`
+export default {
+  name: 'RCselect',
+
+  props: {
+    value: {
+      required: false,
+      default: null
+    },
+    fontSize: {
+      required: false,
+      default: null
+    },
+    label: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    selectWidth: {
+      required: false,
+      default: null
+    },
+    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
+    },
+    caretColor: {
+      required: false
+    },
+    labelFontColor: {
+      required: false
+    },
+    colorMode: {
+      required: false,
+      default: 'light'
+    },
+    isSearchable: {
+      required: false,
+      default: true
+    },
+    hasError: {
+      required: false,
+      default: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    showBorder: {
+      required: false,
+      default: true
+    },
+    infoTextSize: {
+      required: false,
+      default: '14px'
+    },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  },
+
+  components: {
+    selectButton,
+    SelectButtonWrapper,
+    selectDropdown,
+    Container,
+    InputLabel,
+    LabelWrapper,
+    optionalLabel,
+    InfoText,
+    InputWrapper,
+    DropdownWrapper,
+    icon,
+    Caret,
+    Selector,
+    inputText
+  },
+
+  data() {
+    return {
+      selectedValue: null,
+      isDropdownOpen: false,
+      isActive: false,
+      textSearch: '',
+      hoveredIndex: 0,
+      hoveredValue: null,
+      isClickOutsideActive: false
+    }
+  },
+  mounted() {
+    this.selectedValue = this.value
+    this.resetHoveredOption()
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
+  },
+  methods: {
+    focus() {
+      this.isActive = true
+    },
+    blur() {
+      this.isActive = false
+    },
+    toggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen
+    },
+    toggleCaretDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen
+    },
+    resetHoveredOption() {
+      this.hoveredValue = this.selectedValue
+    },
+    openDropdown() {
+      this.focus()
+      this.isDropdownOpen = true
+    },
+    closeDropdown() {
+      this.blur()
+      this.isDropdownOpen = false
+    },
+    optionSelected(e) {
+      this.selectedValue = e
+      this.closeDropdown()
+      this.blur()
+      this.$emit('input-change', e)
+    },
+    optionHovered(e) {
+      this.hoveredValue = e
+    },
+    mouseEnterHandler() {
+      if (this.hoverDropdown) {
+        this.focus()
+        this.isDropdownOpen = true
+      }
+    },
+    mouseLeaveHandler() {
+      if (this.hoverDropdown) {
+        this.blur()
+      }
+    },
+    optionLeave() {
+      if (this.dropdownAutoClose) {
+        this.isDropdownOpen = false
+      }
+    },
+    searchChange(value) {
+      if (!this.isSearchable) {
+        return
+      }
+      this.textSearch = value
+      this.$emit('search-change', value)
+      this.dropdownChildrenElements.forEach((el) => {
+        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+          el.style.display = 'none'
+        } else {
+          el.style.display = 'inherit'
+        }
+      })
+      if (
+        value &&
+        !this.hoveredValue.toLowerCase().includes(value.toLowerCase())
+      ) {
+        this.hoverFirstFilteredOption()
+        this.scrollDropdownToHoveredOption()
+      } else if (!value) {
+        this.scrollDropdownToHoveredOption()
+      }
+    },
+    hoverFirstFilteredOption() {
+      const option = this.dropdownChildrenElements.find(
+        (el) => el.style.display !== 'none'
+      )
+
+      if (option) {
+        this.optionHovered(option.dataset.value)
+      }
+    },
+    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.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') {
+        this.optionSelected(this.hoveredValue)
+      } else if (e.key == 'Escape') {
+        this.closeDropdown()
+      }
+    },
+    onArrowPress(dir) {
+      let newHoveredElem
+      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+        `[data-value="${this.hoveredValue}"]`
+      )
+      if (currentHoveredElem) {
+        newHoveredElem = this.nextHighlightedOption(currentHoveredElem, dir)
+        if (newHoveredElem) {
+          this.hoveredValue = newHoveredElem.getAttribute('data-value')
+          this.scrollDropdownToHoveredOption()
+        }
+      }
+    },
+    nextHighlightedOption(currentFocusedElem, dir) {
+      let nextFocusedElem =
+        dir > 0
+          ? currentFocusedElem.nextElementSibling
+          : currentFocusedElem.previousElementSibling
+
+      if (nextFocusedElem && nextFocusedElem.style.display === 'none') {
+        nextFocusedElem = this.nextHighlightedOption(nextFocusedElem, dir)
+      }
+
+      return nextFocusedElem
+    },
+    scrollDropdownToHoveredOption() {
+      const option = this.dropdownChildrenElements.find(
+        (el) => el.dataset.value === this.hoveredValue
+      )
+
+      if (option) {
+        this.$refs.dropdown.$el.scrollTop = option.offsetTop
+      }
+    }
+  },
+  computed: {
+    isSearchBarVisible() {
+      return this.isDropdownOpen
+    },
+    dropdownChildrenElements() {
+      return this.$refs.dropdown.$children.map((component) => component.$el)
+    },
+    selectedOptionText() {
+      return this.$refs.dropdown.$el
+        .querySelector(`[data-value="${this.selectedValue}"]`)
+        .textContent.trim()
+    }
+  },
+  watch: {
+    value(val) {
+      this.selectedValue = val
+    },
+    isDropdownOpen(val) {
+      this.$emit('is-dropdown-open', val)
+      if (val) {
+        this.$nextTick(() => {
+          if (this.$refs.searchInput) {
+            this.$refs.searchInput.$el.querySelector('input').focus()
+          }
+        })
+        setTimeout(() => {
+          this.isClickOutsideActive = true
+        }, 10)
+      } else {
+        if (!this.textSearch) {
+          this.resetHoveredOption()
+        }
+        this.scrollDropdownToHoveredOption()
+        setTimeout(() => {
+          this.isClickOutsideActive = false
+        }, 10)
+      }
+    }
+  }
+}
+</script>