@eturnity/eturnity_reusable_components 9.25.4 → 9.25.5-QA-01-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.4",
+  "version": "9.25.5-QA-01-next.0",
   "files": [
     "dist",
     "src"

package/src/components/filterComponent/viewFilter.vue

@@ -107,7 +107,7 @@
                   </SelectOption>
                 </template>
               </SelectComponent>
-              <template v-if="item.column === 'updated'">
+              <template v-if="isDateColumn(item.column)">
                 <DatePickerContainer
                   :data-id="
                     rowDataId.dataId
@@ -201,11 +201,15 @@
                     >
                       <RcCheckbox
                         :is-checked="
-                          selectedSort[index].selectedOptions?.includes(
-                            option.value
+                          selectedSort[index].selectedOptions?.some(
+                            (selectedValue) =>
+                              filterOptionValuesMatch(
+                                selectedValue,
+                                option.value
+                              )
                           )
                         "
-                        :label="$gettext(option.label)"
+                        :label="getOptionLabel(option)"
                         size="small"
                         @on-event-handler="
                           onSelectFilter({
@@ -508,7 +512,24 @@
       document.removeEventListener('click', this.handleClickOutside)
     },
     methods: {
+      isDateColumn(column) {
+        if (column === 'updated') {
+          return true
+        }
+        const category = this.filterCategories.find(
+          (cat) => cat.name === column
+        )
+        return ['date', 'datetime', 'date_range'].includes(
+          category?.filter_type
+        )
+      },
       handleClickOutside(event) {
+        // A target detached by a re-render (e.g. the select trigger when its
+        // dropdown opens) has lost its ancestry — it cannot be attributed as
+        // an outside click
+        if (!event.target.isConnected) {
+          return
+        }
         const isClickInSelect =
           event.target.closest('.sort-dropdown') ||
           event.target.closest('.rc-select-dropdown') ||
@@ -542,10 +563,9 @@
         return this.selectedSort.filter((item) => {
           const hasColumn = !!item.column
           const hasConstraint = !!item.constraint
-          const hasSelectedOptions =
-            item.column === 'updated'
-              ? !!item.selectedDate
-              : !!item.selectedOptions?.length
+          const hasSelectedOptions = this.isDateColumn(item.column)
+            ? !!item.selectedDate
+            : !!item.selectedOptions?.length
           return hasColumn && hasConstraint && hasSelectedOptions
         }).length
       },
@@ -584,7 +604,7 @@
           },
         ]
 
-        if (this.selectedSort?.[index]?.column === 'updated') {
+        if (this.isDateColumn(this.selectedSort?.[index]?.column)) {
           return dateOptions
         }
 
@@ -602,6 +622,12 @@
           select.closeDropdown()
         })
       },
+      filterOptionValuesMatch(left, right) {
+        if (left == null || right == null) {
+          return left === right
+        }
+        return String(left) === String(right)
+      },
       getSelectedLabel({ type, value, index }) {
         if (!value) return
         if (type === 'column') {
@@ -621,10 +647,10 @@
           const optionsList = this.optionsList(index)
           const selectedLabels = selectedOptions
             .map((optionValue) => {
-              const option = optionsList.find(
-                (opt) => opt.value === optionValue
+              const option = optionsList.find((opt) =>
+                this.filterOptionValuesMatch(opt.value, optionValue)
               )
-              return option ? option.label : optionValue
+              return option ? this.getOptionLabel(option) : optionValue
             })
             .join(', ')
 
@@ -686,9 +712,15 @@
             ...option,
             value: option[selectedItem.valueSelector],
             label: option[selectedItem.labelSelector],
+            optionLabelsTranslated: !!selectedItem.optionLabelsTranslated,
           })
         )
       },
+      getOptionLabel(option) {
+        return option.optionLabelsTranslated
+          ? option.label
+          : this.$gettext(option.label)
+      },
     },
   }
 </script>

package/src/components/filterComponent/viewSettings.vue

@@ -261,6 +261,11 @@
         }
       },
       handleClickOutside(event) {
+        // Detached targets (removed by a re-render mid-click) cannot be
+        // attributed as outside clicks
+        if (!event.target.isConnected) {
+          return
+        }
         const buttonIcon = this.$el.querySelector('.button-icon')
         const boxContainer = this.$el.querySelector('.box-container')
 

package/src/components/filterComponent/viewSort.vue

@@ -266,6 +266,11 @@
     },
     methods: {
       handleClickOutside(event) {
+        // Detached targets (removed by a re-render mid-click) cannot be
+        // attributed as outside clicks
+        if (!event.target.isConnected) {
+          return
+        }
         const buttonIcon = this.$el.querySelector('.button-icon')
         const boxContainer = this.$el.querySelector('.box-container')
         const isClickInSelect =

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

@@ -125,8 +125,8 @@
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor
-        ? props.labelFontColor
-        : props.theme.colors.eturnityGrey};
+          ? props.labelFontColor
+          : props.theme.colors.eturnityGrey};
 
     font-size: ${(props) =>
       props.fontSize ? props.fontSize : inputLabelFontSize};
@@ -172,20 +172,20 @@
       props.noBorder
         ? 'none'
         : props.isError
-        ? '1px solid ' + props.theme.colors.red
-        : props.borderColor
-        ? props.theme.colors[props.borderColor]
-          ? '1px solid ' + props.theme.colors[props.borderColor]
-          : '1px solid ' + props.borderColor
-        : '1px solid ' + props.theme.colors.grey4};
+          ? '1px solid ' + props.theme.colors.red
+          : props.borderColor
+            ? props.theme.colors[props.borderColor]
+              ? '1px solid ' + props.theme.colors[props.borderColor]
+              : '1px solid ' + props.borderColor
+            : '1px solid ' + props.theme.colors.grey4};
     padding: ${(props) =>
       props.isError
         ? '11px 25px 11px 10px'
         : props.inputType === 'password'
-        ? '11px 25px 11px 10px'
-        : props.defaultPadding
-        ? '10px 35px 10px 15px'
-        : '11px 5px 11px 10px'};
+          ? '11px 25px 11px 10px'
+          : props.defaultPadding
+            ? '10px 35px 10px 15px'
+            : '11px 5px 11px 10px'};
     border-radius: 4px;
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '14px')};
@@ -193,8 +193,8 @@
       props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
-        ? props.fontColor + ' !important'
-        : props.theme.colors.black};
+          ? props.fontColor + ' !important'
+          : props.theme.semanticColors.grey[900]};
 
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
@@ -208,8 +208,8 @@
           ? props.disabledBackgroundColor + ' !important'
           : props.theme.colors.grey5
         : props.backgroundColor
-        ? props.backgroundColor + ' !important'
-        : props.theme.colors.white};
+          ? props.backgroundColor + ' !important'
+          : props.theme.colors.white};
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
     }
@@ -369,7 +369,7 @@
       },
       labelFontColor: {
         required: false,
-        default: 'black',
+        default: '',
         type: String,
       },
       backgroundColor: {
@@ -383,7 +383,7 @@
       },
       fontColor: {
         required: false,
-        default: 'black',
+        default: '',
         type: String,
       },
       hasFocus: {

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

@@ -49,10 +49,10 @@
             buttonBgColor
               ? buttonBgColor
               : colorMode == 'dark'
-              ? 'transparent'
-              : colorMode == 'transparent'
-              ? 'transparent'
-              : 'white'
+                ? 'transparent'
+                : colorMode == 'transparent'
+                  ? 'transparent'
+                  : 'white'
           "
           class="select-button"
           :color-mode="colorMode"
@@ -169,8 +169,8 @@
                 colorMode == 'dark'
                   ? '#000000'
                   : colorMode == 'transparent'
-                  ? 'grey6'
-                  : dropdownBgColor
+                    ? 'grey6'
+                    : dropdownBgColor
               "
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValueDomAttr"
@@ -307,14 +307,14 @@
       props.sidebarCaret
         ? '24px'
         : props.colorMode === 'transparent'
-        ? '15px'
-        : CARET_WIDTH};
+          ? '15px'
+          : CARET_WIDTH};
     min-width: ${(props) =>
       props.sidebarCaret
         ? '24px'
         : props.colorMode === 'transparent'
-        ? '15px'
-        : CARET_WIDTH};
+          ? '15px'
+          : CARET_WIDTH};
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -402,6 +402,9 @@
   }
   const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
     ${(props) => (props.disabled ? 'cursor: not-allowed' : 'cursor: pointer')};
+    /* Grid item: without this, nowrap selector text sets the automatic
+       minimum and the wrapper blows out a constrained track. */
+    min-width: 0;
   `
 
   const selectButtonAttrs = {
@@ -434,23 +437,23 @@
           ? 'padding: 10px 15px 10px 5px;'
           : 'padding: 10px 15px;'
         : props.isSearchBarVisible
-        ? ''
-        : `padding-left: ${
-            props.hasNoPadding
-              ? '0'
-              : props.tablePaddingLeft
-              ? props.tablePaddingLeft
-              : props.paddingLeft
-          }`};
+          ? ''
+          : `padding-left: ${
+              props.hasNoPadding
+                ? '0'
+                : props.tablePaddingLeft
+                  ? props.tablePaddingLeft
+                  : props.paddingLeft
+            }`};
     text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
         : props.selectMinHeight
-        ? props.selectMinHeight
-        : props.height
-        ? props.height
-        : '36px'};
+          ? props.selectMinHeight
+          : props.height
+            ? props.height
+            : '36px'};
     display: flex;
     align-items: center;
     ${(props) => (props.selectHeight ? `height: ${props.selectHeight};` : '')}
@@ -458,8 +461,8 @@
       showBorder &&
       `
     border: ${BORDER_WIDTH} solid ${
-        hasError ? theme.colors.red : theme.colors.grey4
-      }
+      hasError ? theme.colors.red : theme.colors.grey4
+    }
   `}
     opacity: ${(props) =>
       props.colorMode === 'transparent' && props.disabled ? '0.4' : '1'};
@@ -467,18 +470,18 @@
       props.colorMode === 'transparent'
         ? 'transparent'
         : props.disabled && props.showDisabledBackground
-        ? props.theme.colors.grey5
-        : props.theme.colors[props.bgColor]
-        ? props.theme.colors[props.bgColor]
-        : props.bgColor} !important;
+          ? props.theme.colors.grey5
+          : props.theme.colors[props.bgColor]
+            ? props.theme.colors[props.bgColor]
+            : props.bgColor} !important;
     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.theme.colors.black
+          : props.theme.colors[props.fontColor]
+            ? props.theme.colors[props.fontColor]
+            : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
     overflow: hidden;
     & > .handle {
@@ -486,8 +489,8 @@
           props.hasError
             ? props.theme.colors.red
             : props.colorMode === 'light'
-            ? props.theme.colors.grey4
-            : props.theme.colors.white}
+              ? props.theme.colors.grey4
+              : props.theme.colors.white}
         1px solid;
     }
   `
@@ -533,8 +536,8 @@
       props.minWidth
         ? props.minWidth
         : props.optionWidth
-        ? props.optionWidth
-        : '100%'};
+          ? props.optionWidth
+          : '100%'};
     background-color: ${(props) =>
       props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
@@ -1506,6 +1509,11 @@
         }
       },
       getDistanceBetweenSelectAndDropdownMenu() {
+        // Runs from a delayed watcher callback; the select may have closed or
+        // unmounted by the time it fires
+        if (!this.$refs.select?.$el) {
+          return
+        }
         const wholeSelectTopPosition =
           this.selectTopPosition + this.$refs.select.$el.clientHeight
         this.selectAndDropdownDistance =

package/src/components/tabsHeader/TabsHeader.spec.js

@@ -98,4 +98,146 @@ describe('TabsHeader', () => {
     const tabs = wrapper.findAll('[data-test-id="tab-item"]')
     expect(tabs.length).toBeGreaterThan(0)
   })
+
+  it('renders tab-menu slot when tab is active and showTabMenu', () => {
+    const wrapper = mount(TabsHeader, {
+      props: {
+        tabsData: [
+          { text: 'A', id: 'a', dataId: 'a', showTabMenu: true },
+          { text: 'B', id: 'b', dataId: 'b' },
+        ],
+        activeTab: 'a',
+        fullSize: false,
+      },
+      slots: {
+        'tab-menu': '<div data-slot-mark="tab-menu">menu</div>',
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+    expect(wrapper.find('[data-test-id="tab-menu-slot"]').exists()).toBe(true)
+    expect(wrapper.find('[data-slot-mark="tab-menu"]').exists()).toBe(true)
+  })
+
+  it('renders tab-menu slot for inactive tabs that have showTabMenu (revealed via hover styling)', () => {
+    const wrapper = mount(TabsHeader, {
+      props: {
+        tabsData: [
+          { text: 'A', id: 'a', dataId: 'a', showTabMenu: true },
+          { text: 'B', id: 'b', dataId: 'b' },
+        ],
+        activeTab: 'b',
+        fullSize: false,
+      },
+      slots: {
+        'tab-menu': '<div data-slot-mark="tab-menu">menu</div>',
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+    expect(wrapper.find('[data-test-id="tab-menu-slot"]').exists()).toBe(true)
+    expect(wrapper.find('[data-slot-mark="tab-menu"]').exists()).toBe(true)
+  })
+
+  it('does not render tab-menu slot when showTabMenu is false', () => {
+    const wrapper = mount(TabsHeader, {
+      props: {
+        tabsData: [
+          { text: 'A', id: 'a', dataId: 'a' },
+          { text: 'B', id: 'b', dataId: 'b' },
+        ],
+        activeTab: 'a',
+        fullSize: false,
+      },
+      slots: {
+        'tab-menu': '<div data-slot-mark="tab-menu">menu</div>',
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+    expect(wrapper.find('[data-test-id="tab-menu-slot"]').exists()).toBe(false)
+    expect(wrapper.find('[data-slot-mark="tab-menu"]').exists()).toBe(false)
+  })
+
+  it('passes is-active=true to the tab-menu slot scope when the slot tab is the active one', () => {
+    const wrapper = mount(TabsHeader, {
+      props: {
+        tabsData: [
+          { text: 'A', id: 'a', dataId: 'a', showTabMenu: true },
+          { text: 'B', id: 'b', dataId: 'b', showTabMenu: true },
+        ],
+        activeTab: 'a',
+        fullSize: false,
+      },
+      slots: {
+        'tab-menu': `
+          <template #default="{ item, isActive }">
+            <span :data-slot-mark="item.id" :data-active="isActive">menu</span>
+          </template>
+        `,
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+    expect(wrapper.find('[data-slot-mark="a"]').attributes('data-active')).toBe(
+      'true'
+    )
+    expect(wrapper.find('[data-slot-mark="b"]').attributes('data-active')).toBe(
+      'false'
+    )
+  })
+
+  it('renders after-tabs slot when provided', () => {
+    const wrapper = mount(TabsHeader, {
+      props: {
+        tabsData: mockTabsData,
+        activeTab: 0,
+        fullSize: false,
+      },
+      slots: {
+        'after-tabs': '<aside data-slot-mark="after-tabs">trail</aside>',
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+    expect(wrapper.find('[data-test-id="after-tabs-slot"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('[data-slot-mark="after-tabs"]').exists()).toBe(true)
+  })
+
+  it('keeps after-tabs outside the scroll area when scrollOverflow is enabled', () => {
+    const wrapper = mount(TabsHeader, {
+      props: {
+        tabsData: mockTabsData,
+        activeTab: 0,
+        fullSize: false,
+        scrollOverflow: true,
+      },
+      slots: {
+        'after-tabs': '<aside data-slot-mark="after-tabs">trail</aside>',
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+
+    const scrollArea = wrapper.find('[data-test-id="tabs-scroll-area"]')
+    const afterTabs = wrapper.find('[data-test-id="after-tabs-slot"]')
+    expect(scrollArea.exists()).toBe(true)
+    expect(afterTabs.exists()).toBe(true)
+    expect(scrollArea.find('[data-test-id="after-tabs-slot"]').exists()).toBe(
+      false
+    )
+  })
 })

package/src/components/tabsHeader/TabsHeader.stories.js

@@ -140,3 +140,66 @@ StringIds.args = {
   ],
   activeTab: 'tab1',
 }
+
+/**
+ * Tab menu (#tab-menu) and trailing “Create view” (#after-tabs) — consumes
+ * slots like ProjectList. The active tab shows the kebab persistently; inactive
+ * tabs flagged `showTabMenu: true` reveal it on hover.
+ */
+export const WithTabMenuAndAfterTabs = () => ({
+  components: { TabsHeader },
+  data() {
+    return {
+      activeTab: 'saved',
+      tabsData: [
+        {
+          text: 'Table view',
+          id: 'table',
+          icon: 'table_view',
+          dataId: 'kanban_tab_story_table',
+        },
+        {
+          text: 'My saved view',
+          id: 'saved',
+          icon: 'kanban_view',
+          dataId: 'kanban_tab_story_saved',
+          showTabMenu: true,
+        },
+        {
+          text: 'Inactive saved view (hover me)',
+          id: 'saved-2',
+          icon: 'table_view',
+          dataId: 'kanban_tab_story_saved_2',
+          showTabMenu: true,
+        },
+      ],
+    }
+  },
+  methods: {
+    onTabChange(id) {
+      this.activeTab = id
+    },
+  },
+  template: `
+    <TabsHeader
+      :tabs-data="tabsData"
+      :active-tab="activeTab"
+      :full-size="false"
+      @on-tab-change="onTabChange"
+    >
+      <template #tab-menu>
+        <span
+          data-test-id="story_tab_menu_trigger"
+          style="width: 26px; height: 26px; border-radius: 4px; background: #e8d8fe; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; color: #6f20dc;"
+        >
+          ⋮
+        </span>
+      </template>
+      <template #after-tabs>
+        <span style="margin-left: 4px; margin-bottom: 2px; color: #6f20dc; font-size: 14px;">
+          + Create view (story)
+        </span>
+      </template>
+    </TabsHeader>
+  `,
+})

package/src/components/tabsHeader/index.vue

@@ -1,100 +1,94 @@
 <template>
-  <PageContainer data-test-id="tabs-header-container">
-    <TabsContainer data-test-id="tabs-container">
-      <TabItem
-        v-for="item in tabsData"
-        :key="item.id"
-        :data-id="item.dataId"
-        :data-qa-id="item.dataId"
-        :data-test-active="activeTab === item.id"
-        data-test-id="tab-item"
-        :full-size="fullSize"
-        :is-active="activeTab === item.id"
-        :is-disabled="item.isDisabled"
-        @click="onTabClick({ id: item.id, isDisabled: item.isDisabled })"
+  <RootContainer data-test-id="tabs-header-container">
+    <TabsScrollArea
+      data-test-id="tabs-scroll-area"
+      :scroll-overflow="scrollOverflow"
+    >
+      <TabsContainer
+        data-test-id="tabs-container"
+        :scroll-overflow="scrollOverflow"
       >
-        <RCIcon
-          v-if="item.icon"
-          :color="
-            activeTab === item.id
-              ? theme.semanticColors.purple[500]
-              : theme.semanticColors.teal[800]
-          "
-          data-test-id="tab-icon"
-          :hovered-color="
-            activeTab === item.id
-              ? theme.semanticColors.purple[500]
-              : theme.semanticColors.teal[800]
-          "
-          :name="item.icon"
-          size="14px"
-        />
-        <TabText
-          data-test-id="tab-text"
+        <TabItem
+          v-for="item in tabsData"
+          :key="item.id"
+          :data-id="item.dataId"
+          :data-qa-id="item.dataId"
+          :data-test-active="activeTab === item.id"
+          data-test-id="tab-item"
+          :full-size="fullSize"
           :is-active="activeTab === item.id"
           :is-disabled="item.isDisabled"
-          >{{ item.text }}</TabText
+          :scroll-overflow="scrollOverflow"
+          @click="onTabClick({ id: item.id, isDisabled: item.isDisabled })"
         >
-        <DotIcon
-          v-if="item.subText"
-          data-test-id="dot-icon"
-          :is-active="activeTab === item.id"
-        />
-        <SubText v-if="item.subText" data-test-id="tab-subtext">{{
-          item.subText
-        }}</SubText>
-        <RCIcon
-          v-if="item.hasError"
-          data-test-id="warning-icon"
-          name="warning"
-          size="14px"
-        />
-        <RCIcon
-          v-if="item.closable"
-          :color="
-            activeTab === item.id
-              ? theme.semanticColors.red[500]
-              : theme.semanticColors.red[300]
-          "
-          data-test-id="tab-close-icon"
-          :hovered-color="theme.semanticColors.red[600]"
-          name="close"
-          size="12px"
-          @click.stop="$emit('on-tab-close', item.id)"
-        />
-        <ConversionTag
-          v-if="item.showUpgradeTag"
-          :data-id="
-            item.isTrialEnded || item.isTrialActive
-              ? `${item.upgradeName}_upgrade_only`
-              : `conversion_tag_import_${item.upgradeName}_available_trial_${item.isTrialAvailable}`
-          "
-          :is-capitalized="true"
-          :text="item.upgradeTagText"
-        />
-      </TabItem>
-    </TabsContainer>
-  </PageContainer>
+          <RCIcon
+            v-if="item.icon"
+            :color="
+              activeTab === item.id
+                ? theme.semanticColors.purple[500]
+                : theme.semanticColors.teal[800]
+            "
+            data-test-id="tab-icon"
+            :hovered-color="
+              activeTab === item.id
+                ? theme.semanticColors.purple[500]
+                : theme.semanticColors.teal[800]
+            "
+            :name="item.icon"
+            size="14px"
+          />
+          <TabText
+            data-test-id="tab-text"
+            :is-active="activeTab === item.id"
+            :is-disabled="item.isDisabled"
+            >{{ item.text }}</TabText
+          >
+          <TabMenuSlot
+            v-if="item.showTabMenu && $slots['tab-menu']"
+            class="rc-tabs-header__menu-slot"
+            data-test-id="tab-menu-slot"
+            :is-active="activeTab === item.id"
+          >
+            <slot
+              name="tab-menu"
+              :item="item"
+              :is-active="activeTab === item.id"
+            />
+          </TabMenuSlot>
+          <DotIcon
+            v-if="item.subText"
+            data-test-id="dot-icon"
+            :is-active="activeTab === item.id"
+          />
+          <SubText v-if="item.subText" data-test-id="tab-subtext">{{
+            item.subText
+          }}</SubText>
+          <RCIcon
+            v-if="item.hasError"
+            data-test-id="warning-icon"
+            name="warning"
+            size="14px"
+          />
+          <ConversionTag
+            v-if="item.showUpgradeTag"
+            :data-id="
+              item.isTrialEnded || item.isTrialActive
+                ? `${item.upgradeName}_upgrade_only`
+                : `conversion_tag_import_${item.upgradeName}_available_trial_${item.isTrialAvailable}`
+            "
+            :is-capitalized="true"
+            :text="item.upgradeTagText"
+          />
+        </TabItem>
+      </TabsContainer>
+    </TabsScrollArea>
+    <AfterTabsSlot v-if="$slots['after-tabs']" data-test-id="after-tabs-slot">
+      <slot name="after-tabs" />
+    </AfterTabsSlot>
+  </RootContainer>
 </template>
 
 <script>
-  // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
-  // To use:
-  // <RCTabsHeader
-  //   :activeTab="activeTabIndex" // should match the 'id'
-  // :tabsData="[
-  // {
-  //   text: 'Tab 1',
-  //   id: 0,
-  //   hasError: true // optional
-  // },
-  // {
-  //   text: 'Tab 1',
-  //   id: 1,
-  //   hasError: false // optional
-  // }
-  //  ]"
-  // />
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
   import theme from '@/assets/theme'
@@ -114,15 +108,60 @@
     color: ${(props) => props.theme.colors.black};
   `
 
-  const PageContainer = styled.div``
+  const RootContainer = styled.div`
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    min-width: 0;
+  `
+
+  const TabsScrollAreaAttrs = { scrollOverflow: Boolean }
+  const TabsScrollArea = styled('div', TabsScrollAreaAttrs)`
+    flex: 1 1 auto;
+    min-width: 0;
+    ${(props) =>
+      props.scrollOverflow
+        ? `
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      padding-bottom: 1px;
+      margin-bottom: -1px;
+    `
+        : ''}
+  `
 
-  const TabsContainer = styled.div`
+  const TabsContainerAttrs = { scrollOverflow: Boolean }
+  const TabsContainer = styled('div', TabsContainerAttrs)`
     display: flex;
+    flex-wrap: ${(props) => (props.scrollOverflow ? 'nowrap' : 'wrap')};
+    align-items: stretch;
     cursor: pointer;
-    width: 100%;
+    width: ${(props) => (props.scrollOverflow ? 'max-content' : '100%')};
+  `
+
+  const AfterTabsSlot = styled.div`
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
   `
 
-  const TabAttrs = { isActive: Boolean, fullSize: Boolean, isDisabled: Boolean }
+  const TabMenuSlotAttrs = { isActive: Boolean }
+  const TabMenuSlot = styled('div', TabMenuSlotAttrs)`
+    display: inline-flex;
+    align-items: center;
+    opacity: ${(props) => (props.isActive ? 1 : 0)};
+    transition: opacity 0.15s ease;
+    pointer-events: ${(props) => (props.isActive ? 'auto' : 'none')};
+  `
+
+  const TabAttrs = {
+    isActive: Boolean,
+    fullSize: Boolean,
+    isDisabled: Boolean,
+    scrollOverflow: Boolean,
+  }
   const TabItem = styled('div', TabAttrs)`
     display: flex;
     align-items: center;
@@ -136,12 +175,28 @@
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
-    flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
+    flex-grow: ${(props) => (props.fullSize && !props.scrollOverflow ? 1 : 0)};
+    flex-shrink: ${(props) => (props.scrollOverflow ? 0 : 1)};
+    white-space: ${(props) => (props.scrollOverflow ? 'nowrap' : 'normal')};
     background-color: ${(props) => props.theme.colors.white};
-    border-bottom: ${(props) =>
-      props.isActive
-        ? '2px solid' + props.theme.semanticColors.purple[400]
-        : '2px solid' + props.theme.semanticColors.grey[400]};
+    position: relative;
+    z-index: ${(props) => (props.isActive ? 1 : 0)};
+    border-bottom: ${(props) => {
+      if (props.scrollOverflow) {
+        return props.isActive
+          ? `1px solid ${props.theme.semanticColors.purple[400]}`
+          : '1px solid transparent'
+      }
+      if (props.isActive) {
+        return `2px solid ${props.theme.semanticColors.purple[400]}`
+      }
+      return `2px solid ${props.theme.semanticColors.grey[400]}`
+    }};
+    margin-bottom: ${(props) => (props.scrollOverflow && props.isActive ? '-1px' : '0')};
+    &:hover .rc-tabs-header__menu-slot {
+      opacity: 1;
+      pointer-events: auto;
+    }
   `
 
   const TabTextAttrs = { isActive: Boolean, isDisabled: Boolean }
@@ -152,17 +207,20 @@
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.isDisabled
-        ? props.theme.semanticColors.grey[600]
-        : props.theme.semanticColors.teal[700]};
+          ? props.theme.semanticColors.grey[600]
+          : props.theme.semanticColors.teal[700]};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   `
 
   export default {
     name: 'RCTabsHeader',
     components: {
-      PageContainer,
+      RootContainer,
+      TabsScrollArea,
       TabsContainer,
+      AfterTabsSlot,
       TabItem,
+      TabMenuSlot,
       SubText,
       DotIcon,
       RCIcon,
@@ -182,6 +240,11 @@
         type: Boolean,
         default: true,
       },
+      /** Horizontal scroll when tabs overflow; keeps tabs on one row. */
+      scrollOverflow: {
+        type: Boolean,
+        default: false,
+      },
       /** When true, emit on-tab-change even when clicking the currently active tab */
       emitWhenActiveTabClicked: {
         type: Boolean,