@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-8441.0

package/src/components/tableDropdown/index.vue

@@ -1,638 +1,638 @@
-<template>
-  <dropdown-row
-    :colspan="colSpan"
-    :isOpen="isOpen"
-    @click="toggleOpen"
-    :disabled="disabled"
-  >
-    <component-container :colSpan="colSpan - 1" class="table-dropdown">
-      <component-item
-        v-for="(item, index) in tableItems"
-        :key="index"
-        ref="dropdownItem"
-        :isNested="isNested"
-        :class="{
-          'table-dropdown-item': item.type !== 'input'
-        }"
-      >
-        <nested-container :isNested="isNested">
-          <nested-icon
-            v-if="
-              isNested &&
-              (item.type === 'input' ||
-                item.type === 'no-template' ||
-                item.type === 'template')
-            "
-          />
-          <template-button
-            @click.stop="onTemplateClick(item.row)"
-            v-if="
-              item.type &&
-              item.type === 'template' &&
-              (item.value === '' || item.value === '-')
-            "
-            :key="index + '_button'"
-            >{{ $gettext('Use template...') }}</template-button
-          >
-          <template-link
-            v-else-if="
-              item.type && item.type === 'template' && item.value !== ''
-            "
-            @click.stop="onSelectedTemplateClick(item.row)"
-          >
-            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
-            <icon
-              name="template_icon_not_clickable"
-              :color="theme.colors.brightBlue"
-              size="14px"
-            />
-            <div>{{ item.value }}</div>
-          </template-link>
-          <no-template v-if="item.type && item.type === 'no-template'">
-            {{ $gettext('No main component template') }}
-          </no-template>
-          <input-container
-            v-if="item.type === 'input'"
-            @click.stop="onInputClick()"
-          >
-            <text-container
-              v-if="customInputDisabled"
-              class="input-placeholder"
-            >
-              <span> {{ item.value }}</span>
-            </text-container>
-            <input-text
-              v-else
-              class="inputField"
-              :value="item.value"
-              :noBorder="true"
-              :minWidth="item.value.length + 'ch'"
-              :disabled="customInputDisabled"
-              @input-change="onCustomInputChange($event)"
-            />
-          </input-container>
-          <text-container
-            v-else-if="
-              item.type !== 'input' &&
-              item.type !== 'no-template' &&
-              item.type !== 'template'
-            "
-          >
-            <span> {{ item.value }}</span>
-          </text-container>
-        </nested-container>
-      </component-item>
-      <arrow-container class="arrow-container" :isDisabled="disabled">
-        <arrow-wrapper :showArchived="showArchived">
-          <et-popover
-            v-if="showArchived"
-            button-class="error"
-            :text="
-              $gettext(`Component has been archived and shouldn't be used`)
-            "
-            triggerType="hover"
-          ></et-popover>
-          <arrow-down
-            @click.stop="toggleOpen"
-            v-if="!isOpen"
-            class="arrow-dropdown"
-          />
-          <arrow-up @click.stop="toggleOpen" v-else />
-        </arrow-wrapper>
-        <options-container v-if="isOpen" ref="optionsContainer">
-          <options-wrapper @click.prevent.stop>
-            <search-container @click.prevent.stop>
-              <search-input
-                :value="inputText"
-                :placeholder="$gettext('Keyword') + '...'"
-                @click.prevent.stop
-                @on-change="onSearch($event)"
-                ref="searchInput"
-              />
-            </search-container>
-            <spinner v-if="optionsLoading" />
-            <empty-text v-else-if="!optionsLoading && !optionItems.length">
-              {{ emptyText ? emptyText : $gettext('No components found.') }}
-            </empty-text>
-            <options-item
-              v-else
-              :colSpan="colSpan - 1"
-              :width="dynamicGridWidth"
-              v-for="(item, index) in optionItems"
-              :key="index"
-              @click="onItemClick(item)"
-              :tabindex="0"
-              @keyup.enter="onItemClick(item)"
-            >
-              <template v-for="(option, idx) in optionsDisplay" :key="idx">
-                <span v-if="option !== 'template'">
-                  {{ !!item[option] ? item[option] : '-' }}
-                </span>
-                <template-button
-                  @click.stop="onTemplateClick(item)"
-                  v-else-if="option === 'template' && item.has_template"
-                  >{{ $gettext('Use template...') }}</template-button
-                >
-                <no-template
-                  v-else-if="option === 'template' && !item.has_template"
-                >
-                  {{ $gettext('No main component template') }}
-                </no-template>
-              </template>
-            </options-item>
-          </options-wrapper>
-          <custom-container
-            v-if="inputText.length && allowFreeInputs"
-            @click="onCustomNameClick()"
-          >
-            <custom-name>{{ getCustomName }}</custom-name>
-            <custom-subtext
-              >({{ $gettext('custom_component') }})</custom-subtext
-            >
-          </custom-container>
-        </options-container>
-      </arrow-container>
-    </component-container>
-  </dropdown-row>
-</template>
-
-<script>
-// import TableDropdown from "@eturnity/eturnity_reusable_components/src/components/tableDropdown"
-// To use:
-// <table-dropdown
-//   :colSpan="2"
-//   :tableItems="getDropdownValues(row)"
-//   :showArchived="
-//     row.selectedValue
-//       ? row.selectedValue.status_active === false
-//       : row.status_active === false
-//   "
-//   @toggle-dropdown-open="toggleDropdownOpen(row.id, $event)"
-//   @dropdown-search="onDropdownSearch($event)"
-//   @item-selected="onItemSelected({ item: $event, index })"
-//   :isOpen="isDropdownOpen(row)"
-//   :optionItems="groupComponents" // list of options
-//   :optionsLoading="dropdownOptionsLoading"
-//   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
-//   :disabled="true"
-// />
-import styled from 'vue3-styled-components'
-import Spinner from '../spinner'
-import SearchInput from '../inputs/searchInput'
-import InputText from '../inputs/inputText'
-import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
-import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
-import fileIconPng from '../../assets/icons/file_icon.png'
-import Icon from '../icon'
-import theme from '@/assets/theme.js'
-
-const rowAttrs = { disabled: Boolean, isOpen: Boolean }
-const DropdownRow = styled('div', rowAttrs)`
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  display: contents;
-
-  input {
-    cursor: ${(props) => (!props.isOpen ? 'pointer !important' : 'inherit')};
-  }
-
-  .input-placeholder {
-    height: 25px;
-    padding-left: 12px;
-  }
-`
-
-const ItemAttrs = { isNested: Boolean }
-const ComponentItem = styled('td', ItemAttrs)`
-  padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 0 !important;
-
-  &.table-dropdown-item {
-    background-clip: content-box;
-    padding: 8px 0 7px 0 !important;
-    vertical-align: middle;
-
-    @media not all and (min-resolution: 0.001dpcm) {
-      @supports (-webkit-appearance: none) {
-        /* Safari Only CSS here */
-        padding: 8px 0 10px 0 !important;
-      }
-    }
-
-    span {
-      padding-left: 15px;
-    }
-  }
-`
-
-const containerAttrs = { colSpan: Number, width: String }
-const ComponentContainer = styled('div', containerAttrs)`
-  display: contents;
-  align-items: center;
-  background-color: ${(props) => props.theme.colors.white};
-  border-radius: 4px;
-  padding: 5px 4px;
-`
-
-const ArrowDown = styled(CollapseArrowIcon)`
-  width: 8px;
-  transition: transform 150ms ease;
-`
-
-const ArrowUp = styled.img`
-  width: 8px;
-  transform: rotate(180deg);
-  transition: transform 150ms ease;
-`
-
-const ArrowAttrs = { isDisabled: Boolean }
-const ArrowContainer = styled('td', ArrowAttrs)`
-  border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
-  background-clip: content-box;
-  padding: 8px 0 7px 0 !important;
-  border-radius: 0 4px 4px 0;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed !important' : 'auto')};
-
-  @media not all and (min-resolution: 0.001dpcm) {
-    @supports (-webkit-appearance: none) {
-      /* Safari Only CSS here */
-      padding: 8px 0 10px 0 !important;
-    }
-  }
-
-  .arrow-dropdown {
-    vertical-align: middle;
-    margin-left: 11px;
-  }
-`
-
-const arrowAttrs = { showArchived: Boolean }
-const ArrowWrapper = styled('div', arrowAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) =>
-    props.showArchived ? 'auto auto' : 'auto'};
-  align-items: center;
-  justify-items: center;
-  height: 100%;
-`
-
-const optionsAttrs = { top: Number, left: Number }
-const OptionsContainer = styled('div', optionsAttrs)`
-  position: absolute;
-  margin-top: 10px;
-  display: grid;
-  grid-template-rows: 1fr auto;
-  left: 20px;
-  width: auto;
-  max-height: 360px;
-  min-height: 200px;
-  overflow: auto;
-  border: 1px solid ${(props) => props.theme.colors.grey3};
-  z-index: 9999;
-  background: ${(props) => props.theme.colors.white};
-  border-radius: 4px;
-`
-
-const EmptyText = styled.div`
-  align-self: center;
-  justify-self: center;
-  height: 100px;
-  display: grid;
-  align-content: center;
-`
-
-const OptionsWrapper = styled.div`
-  display: grid;
-  position: relative;
-  padding: 12px;
-  grid-gap: 4px;
-  font-size: 13px;
-  grid-template-rows: max-content;
-  height: max-content;
-  min-width: 400px; // kind of an arbitrary number until we know all use cases
-`
-
-const OptionsItem = styled('div', containerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) => props.width};
-  grid-gap: 30px;
-  padding: 10px;
-  height: max-content;
-  justify-items: flex-start;
-
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-  }
-`
-
-const SearchContainer = styled.div`
-  position: sticky;
-  top: 0;
-  padding-top: 6px;
-  background: ${(props) => props.theme.colors.white};
-  height: 40px;
-`
-
-const TemplateButton = styled.div`
-  cursor: pointer;
-  background-color: #263238;
-  color: ${(props) => props.theme.colors.white};
-  padding: 4px 10px;
-  display: inline-block;
-  border-radius: 4px;
-  text-align: center;
-  margin-left: 15px;
-`
-
-const NoTemplate = styled.div`
-  color: ${(props) => props.theme.colors.gray1};
-  font-style: italic;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-left: 15px;
-`
-
-const TemplateLink = styled.div`
-  color: ${(props) => props.theme.colors.brightBlue};
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 12px;
-  padding-left: 15px;
-`
-
-const InputContainer = styled.div`
-  .inputField input {
-    border-radius: 4px 0 0 4px;
-  }
-`
-
-const CustomContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  padding: 10px 22px;
-  border-top: 1px solid ${(props) => props.theme.colors.grey3};
-  height: 37px;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-  }
-`
-
-const CustomName = styled.div`
-  justify-self: flex-start;
-`
-
-const CustomSubtext = styled.div`
-  justify-self: flex-end;
-  color: ${(props) => props.theme.colors.grey3};
-`
-
-const TextContainer = styled.div`
-  height: 100%;
-  display: grid;
-  align-items: center;
-`
-
-const NestedIcon = styled(SubpositionMarkerIcon)`
-  height: 10px;
-  width: 6px;
-`
-
-const NestedAttrs = { isNested: Boolean }
-const NestedContainer = styled('div', NestedAttrs)`
-  display: grid;
-  grid-gap: 5px;
-  grid-template-columns: ${(props) => (props.isNested ? 'auto 1fr' : '1fr')};
-  align-items: center;
-`
-
-export default {
-  name: 'table-dropdown',
-  components: {
-    DropdownRow,
-    ComponentItem,
-    ComponentContainer,
-    ArrowDown,
-    ArrowUp,
-    OptionsContainer,
-    Spinner,
-    EmptyText,
-    SearchInput,
-    ArrowWrapper,
-    OptionsWrapper,
-    OptionsItem,
-    SearchContainer,
-    TemplateButton,
-    NoTemplate,
-    TemplateLink,
-    InputText,
-    InputContainer,
-    CustomContainer,
-    CustomName,
-    CustomSubtext,
-    ArrowContainer,
-    TextContainer,
-    NestedIcon,
-    NestedContainer,
-    Icon
-  },
-  props: {
-    colSpan: {
-      required: false,
-      default: 1
-    },
-    customInputDisabled: {
-      // whether the input field should be disabled
-      required: false,
-      default: true
-    },
-    allowFreeInputs: {
-      // whether we allow the user to select a custom input
-      required: false,
-      default: false
-    },
-    tableItems: {
-      required: true
-    },
-    showArchived: {
-      required: false,
-      default: false
-    },
-    isOpen: {
-      required: true,
-      default: false
-    },
-    optionsLoading: {
-      required: false,
-      default: false
-    },
-    emptyText: {
-      required: false,
-      default: null
-    },
-    optionItems: {
-      required: true
-    },
-    optionsDisplay: {
-      required: true,
-      default: [] // should be like ['display_name', 'company_item_number', 'description']
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    isNested: {
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      inputText: '',
-      wasClicked: false, // prevents custom-name from being triggered on the <input-text />
-      dynamicWidth: [], // for numbers
-      dynamicGridWidth: [], // for grid values
-      fileIcon: fileIconPng
-    }
-  },
-  methods: {
-    toggleOpen(event) {
-      if (
-        this.disabled ||
-        (event &&
-          !(event.target === this.$el) &&
-          !this.$el.contains(event.target))
-      ) {
-        return
-      }
-      this.wasClicked = false
-      if (!this.isOpen) {
-        document.addEventListener('click', this.clickOutside)
-        this.$emit('dropdown-search', '')
-        this.$nextTick(() => {
-          this.scrollToItem()
-        })
-        this.$emit('toggle-dropdown-open', { close: false })
-        this.$nextTick(() => {
-          this.$refs.searchInput.$el.children[0].children[1].focus()
-        })
-      } else {
-        document.removeEventListener('click', this.clickOutside)
-        this.$emit('toggle-dropdown-open', { close: true })
-        this.inputText = ''
-      }
-    },
-    onInputClick() {
-      if (!this.isOpen) {
-        this.toggleOpen()
-      }
-    },
-    scrollToItem() {
-      if (this.$refs.optionsContainer) {
-        this.$refs.optionsContainer.$el.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center'
-        })
-      }
-    },
-    onTemplateClick(item) {
-      this.$emit('on-template-click', item)
-    },
-    onSelectedTemplateClick(item) {
-      this.$emit('on-selected-template-click', item)
-    },
-    onItemClick(item) {
-      this.wasClicked = true
-      this.$emit('item-selected', item)
-    },
-    onSearch(value) {
-      this.inputText = value
-      this.$emit('dropdown-search', value)
-    },
-    clickOutside(event) {
-      if (event.target === this.$el || this.$el.contains(event.target)) {
-        return
-      }
-      this.inputText = ''
-      // 'close: true' is needed in case a box is open and another box is clicked on
-      // so this one will close properly
-      document.removeEventListener('click', this.clickOutside)
-      this.$emit('toggle-dropdown-open', { close: true })
-    },
-    onCustomNameClick() {
-      this.wasClicked = true
-      this.$emit('on-custom-input-name', this.inputText)
-      this.$emit('toggle-dropdown-open', { close: true })
-      this.inputText = ''
-    },
-    onCustomInputChange(event) {
-      if (this.wasClicked) {
-        return
-      }
-      this.$emit('custom-input-change', event)
-    },
-    setDropdownWidth(options) {
-      this.dynamicWidth = []
-
-      options.forEach((item) => {
-        this.optionsDisplay.forEach((header, index) => {
-          let value =
-            header === 'template'
-              ? this.$gettext('No main component template')
-              : item[header]
-          value = value ? value : ''
-
-          // Update dynamicWidth with the maximum value
-          if (
-            !this.dynamicWidth[index] ||
-            value.length > this.dynamicWidth[index]
-          ) {
-            this.dynamicWidth[index] = value.length
-          }
-        })
-      })
-
-      this.dynamicGridWidth = this.dynamicWidth
-        .map((width) => width + 'ch')
-        .join(' ')
-    }
-  },
-  computed: {
-    getCustomName() {
-      return this.inputText
-    },
-    theme() {
-      return theme
-    }
-  },
-  watch: {
-    isOpen(newVal) {
-      if (newVal) {
-        document.addEventListener('click', this.clickOutside)
-        this.$emit('dropdown-search', '')
-        this.$nextTick(() => {
-          this.$refs.searchInput.$el.children[0].children[0].focus()
-        })
-        this.$nextTick(() => {
-          this.scrollToItem()
-        })
-      }
-    },
-    optionItems: {
-      immediate: true,
-      handler(val) {
-        if (val && val.length) {
-          this.setDropdownWidth(val)
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <dropdown-row
+    :colspan="colSpan"
+    :isOpen="isOpen"
+    @click="toggleOpen"
+    :disabled="disabled"
+  >
+    <component-container :colSpan="colSpan - 1" class="table-dropdown">
+      <component-item
+        v-for="(item, index) in tableItems"
+        :key="index"
+        ref="dropdownItem"
+        :isNested="isNested"
+        :class="{
+          'table-dropdown-item': item.type !== 'input'
+        }"
+      >
+        <nested-container :isNested="isNested">
+          <nested-icon
+            v-if="
+              isNested &&
+              (item.type === 'input' ||
+                item.type === 'no-template' ||
+                item.type === 'template')
+            "
+          />
+          <template-button
+            @click.stop="onTemplateClick(item.row)"
+            v-if="
+              item.type &&
+              item.type === 'template' &&
+              (item.value === '' || item.value === '-')
+            "
+            :key="index + '_button'"
+            >{{ $gettext('Use template...') }}</template-button
+          >
+          <template-link
+            v-else-if="
+              item.type && item.type === 'template' && item.value !== ''
+            "
+            @click.stop="onSelectedTemplateClick(item.row)"
+          >
+            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
+            <icon
+              name="template_icon_not_clickable"
+              :color="theme.colors.brightBlue"
+              size="14px"
+            />
+            <div>{{ item.value }}</div>
+          </template-link>
+          <no-template v-if="item.type && item.type === 'no-template'">
+            {{ $gettext('No main component template') }}
+          </no-template>
+          <input-container
+            v-if="item.type === 'input'"
+            @click.stop="onInputClick()"
+          >
+            <text-container
+              v-if="customInputDisabled"
+              class="input-placeholder"
+            >
+              <span> {{ item.value }}</span>
+            </text-container>
+            <input-text
+              v-else
+              class="inputField"
+              :value="item.value"
+              :noBorder="true"
+              :minWidth="item.value.length + 'ch'"
+              :disabled="customInputDisabled"
+              @input-change="onCustomInputChange($event)"
+            />
+          </input-container>
+          <text-container
+            v-else-if="
+              item.type !== 'input' &&
+              item.type !== 'no-template' &&
+              item.type !== 'template'
+            "
+          >
+            <span> {{ item.value }}</span>
+          </text-container>
+        </nested-container>
+      </component-item>
+      <arrow-container class="arrow-container" :isDisabled="disabled">
+        <arrow-wrapper :showArchived="showArchived">
+          <et-popover
+            v-if="showArchived"
+            button-class="error"
+            :text="
+              $gettext(`Component has been archived and shouldn't be used`)
+            "
+            triggerType="hover"
+          ></et-popover>
+          <arrow-down
+            @click.stop="toggleOpen"
+            v-if="!isOpen"
+            class="arrow-dropdown"
+          />
+          <arrow-up @click.stop="toggleOpen" v-else />
+        </arrow-wrapper>
+        <options-container v-if="isOpen" ref="optionsContainer">
+          <options-wrapper @click.prevent.stop>
+            <search-container @click.prevent.stop>
+              <search-input
+                :value="inputText"
+                :placeholder="$gettext('Keyword') + '...'"
+                @click.prevent.stop
+                @on-change="onSearch($event)"
+                ref="searchInput"
+              />
+            </search-container>
+            <spinner v-if="optionsLoading" />
+            <empty-text v-else-if="!optionsLoading && !optionItems.length">
+              {{ emptyText ? emptyText : $gettext('No components found.') }}
+            </empty-text>
+            <options-item
+              v-else
+              :colSpan="colSpan - 1"
+              :width="dynamicGridWidth"
+              v-for="(item, index) in optionItems"
+              :key="index"
+              @click="onItemClick(item)"
+              :tabindex="0"
+              @keyup.enter="onItemClick(item)"
+            >
+              <template v-for="(option, idx) in optionsDisplay" :key="idx">
+                <span v-if="option !== 'template'">
+                  {{ !!item[option] ? item[option] : '-' }}
+                </span>
+                <template-button
+                  @click.stop="onTemplateClick(item)"
+                  v-else-if="option === 'template' && item.has_template"
+                  >{{ $gettext('Use template...') }}</template-button
+                >
+                <no-template
+                  v-else-if="option === 'template' && !item.has_template"
+                >
+                  {{ $gettext('No main component template') }}
+                </no-template>
+              </template>
+            </options-item>
+          </options-wrapper>
+          <custom-container
+            v-if="inputText.length && allowFreeInputs"
+            @click="onCustomNameClick()"
+          >
+            <custom-name>{{ getCustomName }}</custom-name>
+            <custom-subtext
+              >({{ $gettext('custom_component') }})</custom-subtext
+            >
+          </custom-container>
+        </options-container>
+      </arrow-container>
+    </component-container>
+  </dropdown-row>
+</template>
+
+<script>
+// import TableDropdown from "@eturnity/eturnity_reusable_components/src/components/tableDropdown"
+// To use:
+// <table-dropdown
+//   :colSpan="2"
+//   :tableItems="getDropdownValues(row)"
+//   :showArchived="
+//     row.selectedValue
+//       ? row.selectedValue.status_active === false
+//       : row.status_active === false
+//   "
+//   @toggle-dropdown-open="toggleDropdownOpen(row.id, $event)"
+//   @dropdown-search="onDropdownSearch($event)"
+//   @item-selected="onItemSelected({ item: $event, index })"
+//   :isOpen="isDropdownOpen(row)"
+//   :optionItems="groupComponents" // list of options
+//   :optionsLoading="dropdownOptionsLoading"
+//   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
+//   :disabled="true"
+// />
+import styled from 'vue3-styled-components'
+import Spinner from '../spinner'
+import SearchInput from '../inputs/searchInput'
+import InputText from '../inputs/inputText'
+import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
+import SubpositionMarkerIcon from '../../assets/icons/subposition_marker.svg'
+import fileIconPng from '../../assets/icons/file_icon.png'
+import Icon from '../icon'
+import theme from '@/assets/theme.js'
+
+const rowAttrs = { disabled: Boolean, isOpen: Boolean }
+const DropdownRow = styled('div', rowAttrs)`
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  display: contents;
+
+  input {
+    cursor: ${(props) => (!props.isOpen ? 'pointer !important' : 'inherit')};
+  }
+
+  .input-placeholder {
+    height: 25px;
+    padding-left: 12px;
+  }
+`
+
+const ItemAttrs = { isNested: Boolean }
+const ComponentItem = styled('td', ItemAttrs)`
+  padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 0 !important;
+
+  &.table-dropdown-item {
+    background-clip: content-box;
+    padding: 8px 0 7px 0 !important;
+    vertical-align: middle;
+
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) {
+        /* Safari Only CSS here */
+        padding: 8px 0 10px 0 !important;
+      }
+    }
+
+    span {
+      padding-left: 15px;
+    }
+  }
+`
+
+const containerAttrs = { colSpan: Number, width: String }
+const ComponentContainer = styled('div', containerAttrs)`
+  display: contents;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 5px 4px;
+`
+
+const ArrowDown = styled(CollapseArrowIcon)`
+  width: 8px;
+  transition: transform 150ms ease;
+`
+
+const ArrowUp = styled.img`
+  width: 8px;
+  transform: rotate(180deg);
+  transition: transform 150ms ease;
+`
+
+const ArrowAttrs = { isDisabled: Boolean }
+const ArrowContainer = styled('td', ArrowAttrs)`
+  border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+  background-clip: content-box;
+  padding: 8px 0 7px 0 !important;
+  border-radius: 0 4px 4px 0;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed !important' : 'auto')};
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      /* Safari Only CSS here */
+      padding: 8px 0 10px 0 !important;
+    }
+  }
+
+  .arrow-dropdown {
+    vertical-align: middle;
+    margin-left: 11px;
+  }
+`
+
+const arrowAttrs = { showArchived: Boolean }
+const ArrowWrapper = styled('div', arrowAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) =>
+    props.showArchived ? 'auto auto' : 'auto'};
+  align-items: center;
+  justify-items: center;
+  height: 100%;
+`
+
+const optionsAttrs = { top: Number, left: Number }
+const OptionsContainer = styled('div', optionsAttrs)`
+  position: absolute;
+  margin-top: 10px;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  left: 20px;
+  width: auto;
+  max-height: 360px;
+  min-height: 200px;
+  overflow: auto;
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  z-index: 9999;
+  background: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+`
+
+const EmptyText = styled.div`
+  align-self: center;
+  justify-self: center;
+  height: 100px;
+  display: grid;
+  align-content: center;
+`
+
+const OptionsWrapper = styled.div`
+  display: grid;
+  position: relative;
+  padding: 12px;
+  grid-gap: 4px;
+  font-size: 13px;
+  grid-template-rows: max-content;
+  height: max-content;
+  min-width: 400px; // kind of an arbitrary number until we know all use cases
+`
+
+const OptionsItem = styled('div', containerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) => props.width};
+  grid-gap: 30px;
+  padding: 10px;
+  height: max-content;
+  justify-items: flex-start;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const SearchContainer = styled.div`
+  position: sticky;
+  top: 0;
+  padding-top: 6px;
+  background: ${(props) => props.theme.colors.white};
+  height: 40px;
+`
+
+const TemplateButton = styled.div`
+  cursor: pointer;
+  background-color: #263238;
+  color: ${(props) => props.theme.colors.white};
+  padding: 4px 10px;
+  display: inline-block;
+  border-radius: 4px;
+  text-align: center;
+  margin-left: 15px;
+`
+
+const NoTemplate = styled.div`
+  color: ${(props) => props.theme.colors.gray1};
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 15px;
+`
+
+const TemplateLink = styled.div`
+  color: ${(props) => props.theme.colors.brightBlue};
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 12px;
+  padding-left: 15px;
+`
+
+const InputContainer = styled.div`
+  .inputField input {
+    border-radius: 4px 0 0 4px;
+  }
+`
+
+const CustomContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 10px 22px;
+  border-top: 1px solid ${(props) => props.theme.colors.grey3};
+  height: 37px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const CustomName = styled.div`
+  justify-self: flex-start;
+`
+
+const CustomSubtext = styled.div`
+  justify-self: flex-end;
+  color: ${(props) => props.theme.colors.grey3};
+`
+
+const TextContainer = styled.div`
+  height: 100%;
+  display: grid;
+  align-items: center;
+`
+
+const NestedIcon = styled(SubpositionMarkerIcon)`
+  height: 10px;
+  width: 6px;
+`
+
+const NestedAttrs = { isNested: Boolean }
+const NestedContainer = styled('div', NestedAttrs)`
+  display: grid;
+  grid-gap: 5px;
+  grid-template-columns: ${(props) => (props.isNested ? 'auto 1fr' : '1fr')};
+  align-items: center;
+`
+
+export default {
+  name: 'table-dropdown',
+  components: {
+    DropdownRow,
+    ComponentItem,
+    ComponentContainer,
+    ArrowDown,
+    ArrowUp,
+    OptionsContainer,
+    Spinner,
+    EmptyText,
+    SearchInput,
+    ArrowWrapper,
+    OptionsWrapper,
+    OptionsItem,
+    SearchContainer,
+    TemplateButton,
+    NoTemplate,
+    TemplateLink,
+    InputText,
+    InputContainer,
+    CustomContainer,
+    CustomName,
+    CustomSubtext,
+    ArrowContainer,
+    TextContainer,
+    NestedIcon,
+    NestedContainer,
+    Icon
+  },
+  props: {
+    colSpan: {
+      required: false,
+      default: 1
+    },
+    customInputDisabled: {
+      // whether the input field should be disabled
+      required: false,
+      default: true
+    },
+    allowFreeInputs: {
+      // whether we allow the user to select a custom input
+      required: false,
+      default: false
+    },
+    tableItems: {
+      required: true
+    },
+    showArchived: {
+      required: false,
+      default: false
+    },
+    isOpen: {
+      required: true,
+      default: false
+    },
+    optionsLoading: {
+      required: false,
+      default: false
+    },
+    emptyText: {
+      required: false,
+      default: null
+    },
+    optionItems: {
+      required: true
+    },
+    optionsDisplay: {
+      required: true,
+      default: [] // should be like ['display_name', 'company_item_number', 'description']
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    isNested: {
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      inputText: '',
+      wasClicked: false, // prevents custom-name from being triggered on the <input-text />
+      dynamicWidth: [], // for numbers
+      dynamicGridWidth: [], // for grid values
+      fileIcon: fileIconPng
+    }
+  },
+  methods: {
+    toggleOpen(event) {
+      if (
+        this.disabled ||
+        (event &&
+          !(event.target === this.$el) &&
+          !this.$el.contains(event.target))
+      ) {
+        return
+      }
+      this.wasClicked = false
+      if (!this.isOpen) {
+        document.addEventListener('click', this.clickOutside)
+        this.$emit('dropdown-search', '')
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+        this.$emit('toggle-dropdown-open', { close: false })
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[1].focus()
+        })
+      } else {
+        document.removeEventListener('click', this.clickOutside)
+        this.$emit('toggle-dropdown-open', { close: true })
+        this.inputText = ''
+      }
+    },
+    onInputClick() {
+      if (!this.isOpen) {
+        this.toggleOpen()
+      }
+    },
+    scrollToItem() {
+      if (this.$refs.optionsContainer) {
+        this.$refs.optionsContainer.$el.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        })
+      }
+    },
+    onTemplateClick(item) {
+      this.$emit('on-template-click', item)
+    },
+    onSelectedTemplateClick(item) {
+      this.$emit('on-selected-template-click', item)
+    },
+    onItemClick(item) {
+      this.wasClicked = true
+      this.$emit('item-selected', item)
+    },
+    onSearch(value) {
+      this.inputText = value
+      this.$emit('dropdown-search', value)
+    },
+    clickOutside(event) {
+      if (event.target === this.$el || this.$el.contains(event.target)) {
+        return
+      }
+      this.inputText = ''
+      // 'close: true' is needed in case a box is open and another box is clicked on
+      // so this one will close properly
+      document.removeEventListener('click', this.clickOutside)
+      this.$emit('toggle-dropdown-open', { close: true })
+    },
+    onCustomNameClick() {
+      this.wasClicked = true
+      this.$emit('on-custom-input-name', this.inputText)
+      this.$emit('toggle-dropdown-open', { close: true })
+      this.inputText = ''
+    },
+    onCustomInputChange(event) {
+      if (this.wasClicked) {
+        return
+      }
+      this.$emit('custom-input-change', event)
+    },
+    setDropdownWidth(options) {
+      this.dynamicWidth = []
+
+      options.forEach((item) => {
+        this.optionsDisplay.forEach((header, index) => {
+          let value =
+            header === 'template'
+              ? this.$gettext('No main component template')
+              : item[header]
+          value = value ? value : ''
+
+          // Update dynamicWidth with the maximum value
+          if (
+            !this.dynamicWidth[index] ||
+            value.length > this.dynamicWidth[index]
+          ) {
+            this.dynamicWidth[index] = value.length
+          }
+        })
+      })
+
+      this.dynamicGridWidth = this.dynamicWidth
+        .map((width) => width + 'ch')
+        .join(' ')
+    }
+  },
+  computed: {
+    getCustomName() {
+      return this.inputText
+    },
+    theme() {
+      return theme
+    }
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        document.addEventListener('click', this.clickOutside)
+        this.$emit('dropdown-search', '')
+        this.$nextTick(() => {
+          this.$refs.searchInput.$el.children[0].children[0].focus()
+        })
+        this.$nextTick(() => {
+          this.scrollToItem()
+        })
+      }
+    },
+    optionItems: {
+      immediate: true,
+      handler(val) {
+        if (val && val.length) {
+          this.setDropdownWidth(val)
+        }
+      }
+    }
+  }
+}
+</script>