@ironsource/shared-ui 1.4.2-test.7 → 1.4.2

package/components/table/Table.vue.js

@@ -1,35 +1,37 @@
-import { defineComponent, useCssVars, ref, provide, computed, useSlots, onMounted, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, normalizeClass, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, mergeProps, withDirectives, vShow } from 'vue';
-import '../typography/Heading.vue.js';
+import { defineComponent, useCssVars, unref, ref, provide, computed, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, Fragment, renderList, createBlock, mergeProps, withDirectives, vShow } from 'vue';
+import { TableTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
-import '../button/Button.vue.js';
-import '../button/IconButton.vue.js';
-import ScrollButton from '../button/ScrollButton.vue.js';
+/* empty css                                                            *//* empty css                                                                    *//* empty css                                                                *//* empty css                                                                    */import ScrollButton from '../button/ScrollButton.vue.js';
 import Skeleton from '../skeleton/Skeleton.vue.js';
 import EmptyState from '../emptyState/EmptyState.vue.js';
 import TableHeaderSorter from './TableHeaderSorter.vue.js';
 import { useVirtualList, useInfiniteScroll } from '@vueuse/core';
 import { TableContext } from './TableContext.vue.js';
-/* empty css                                                       *//* empty css                                           */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
+/* empty css                                                       *//* empty css                                           */
 import "../../Table.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = { class: "table-title" };
-const _hoisted_2 = { class: "table-header-actions" };
-const _hoisted_3 = { class: "sections" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = { class: "table-head-container" };
-const _hoisted_6 = ["onMouseenter"];
-const _hoisted_7 = { key: 1 };
-const _hoisted_8 = { key: 1 };
-const _sfc_main = defineComponent({
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = ["data-testid"];
+const _hoisted_4 = ["data-testid"];
+const _hoisted_5 = ["data-testid"];
+const _hoisted_6 = ["data-testid"];
+const _hoisted_7 = ["data-testid"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "table-head-container" };
+const _hoisted_10 = ["data-testid"];
+const _hoisted_11 = ["onMouseenter"];
+const _hoisted_12 = { key: 1 };
+const _hoisted_13 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Table",
   props: {
-    title: {},
-    columns: {},
-    rows: {},
+    title: null,
+    columns: null,
+    rows: null,
     sections: { default: null },
-    sort: {},
+    sort: null,
     isSticky: { type: Boolean, default: true },
-    isStickyHeader: { type: Boolean, default: false },
     isLoading: { type: Boolean, default: false },
     emptyStateTitle: { default: "No results found" },
     emptyStateSubtitle: { default: "Try again with different filters" },
@@ -37,13 +39,13 @@ const _sfc_main = defineComponent({
     infiniteScrollThreshold: { default: 100 },
     rowHeight: { type: [Number, Function], default: 48 },
     loadingRowCount: { default: 3 },
-    defaultScrollPosition: { default: null }
+    testId: { default: "" }
   },
   emits: ["update:sort", "saveRow", "loadMore"],
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "3dbbd311": gridColumnTemplate.value
+      "04775a54": unref(gridColumnTemplate)
     }));
     const savingRows = ref([]);
     provide(TableContext, {
@@ -81,22 +83,12 @@ const _sfc_main = defineComponent({
     });
     const floatingActionRef = ref(null);
     const floatingActionPosition = ref(0);
-    const slots = useSlots();
-    const hasSearchSlot = computed(() => !!slots.search);
     const onScroll = (event) => {
       containerProps.onScroll();
       floatingActionPosition.value = event.target.scrollLeft + event.target.getBoundingClientRect().width;
     };
     onMounted(() => {
       floatingActionPosition.value = containerProps.ref.value?.getBoundingClientRect().width;
-      if (props.defaultScrollPosition) {
-        setTimeout(() => {
-          containerProps.ref.value.scrollTo({
-            top: props.defaultScrollPosition,
-            behavior: "smooth"
-          });
-        }, 1e3);
-      }
     });
     const showBackToTopButton = computed(() => {
       const [firstListItem] = list.value;
@@ -158,44 +150,57 @@ const _sfc_main = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "table-container",
+        "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).CONTAINER}`,
         onMouseleave: _cache[0] || (_cache[0] = ($event) => activeRow.value = null)
       }, [
         createElementVNode("table", {
           ref: unref(containerProps).ref,
-          style: normalizeStyle(containerStyle.value),
+          style: normalizeStyle(unref(containerStyle)),
+          "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).TABLE}`,
           onScrollPassive: onScroll
         }, [
-          _ctx.title || _ctx.$slots["search"] ? (openBlock(), createElementBlock("div", {
+          __props.title || _ctx.$slots["search"] ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: normalizeClass(["table-header", { isStickyHeader: _ctx.isStickyHeader }])
+            class: "table-header",
+            "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).HEADER}`
           }, [
-            createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", {
+              class: "table-title",
+              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).TITLE}`
+            }, [
               renderSlot(_ctx.$slots, "title", {}, () => [
                 createVNode(unref(Text), {
                   size: "md",
                   strong: ""
                 }, {
                   default: withCtx(() => [
-                    createTextVNode(toDisplayString(_ctx.title), 1)
+                    createTextVNode(toDisplayString(__props.title), 1)
                   ]),
                   _: 1
                 })
               ], true)
-            ]),
+            ], 8, _hoisted_4),
             createElementVNode("div", {
-              class: normalizeClass(["table-header-right", hasSearchSlot.value ? "border-search" : ""])
+              class: "table-header-right",
+              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).HEADER_RIGHT}`
             }, [
               renderSlot(_ctx.$slots, "search", {}, void 0, true)
-            ], 2),
-            createElementVNode("div", _hoisted_2, [
+            ], 8, _hoisted_5),
+            createElementVNode("div", {
+              class: "table-header-actions",
+              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).ACTIONS}`
+            }, [
               renderSlot(_ctx.$slots, "table-header-actions", {}, void 0, true)
-            ])
-          ], 2)) : createCommentVNode("", true),
+            ], 8, _hoisted_6)
+          ], 8, _hoisted_3)) : createCommentVNode("", true),
           createElementVNode("thead", {
-            class: normalizeClass({ sticky: _ctx.isSticky, isStickyHeader: _ctx.isStickyHeader })
+            class: normalizeClass({ sticky: __props.isSticky })
           }, [
-            createElementVNode("div", _hoisted_3, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sections, (section) => {
+            createElementVNode("div", {
+              class: "sections",
+              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).SECTIONS}`
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.sections, (section) => {
                 return openBlock(), createElementBlock("div", {
                   key: section.id,
                   class: normalizeClass(["section-container", { sticky: section.isSticky }])
@@ -215,21 +220,16 @@ const _sfc_main = defineComponent({
                   ], true)
                 ], 2);
               }), 128))
-            ]),
+            ], 8, _hoisted_7),
             createElementVNode("tr", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
                 return openBlock(), createElementBlock("th", {
                   key: column.id,
-                  class: normalizeClass({
-                    sticky: column.isSticky,
-                    bordered: column.isBordered,
-                    isTextRight: column.isTextRight,
-                    isSortable: column.isSortable
-                  }),
-                  style: normalizeStyle(column.isSticky ? columnsStickyPositions.value[column.id] : null),
+                  class: normalizeClass({ sticky: column.isSticky, bordered: column.isBordered }),
+                  style: normalizeStyle(column.isSticky ? unref(columnsStickyPositions)[column.id] : null),
                   onClick: ($event) => toggleSortOrder(column)
                 }, [
-                  createElementVNode("div", _hoisted_5, [
+                  createElementVNode("div", _hoisted_9, [
                     renderSlot(_ctx.$slots, `header-${column.id}`, { column }, () => [
                       createVNode(unref(Text), {
                         size: "sm",
@@ -242,26 +242,27 @@ const _sfc_main = defineComponent({
                         _: 2
                       }, 1024)
                     ], true),
-                    column.id === _ctx.sort.sortBy ? (openBlock(), createBlock(TableHeaderSorter, {
+                    column.id === __props.sort.sortBy ? (openBlock(), createBlock(TableHeaderSorter, {
                       key: 0,
                       class: "table-head-sorter",
-                      "sort-order": _ctx.sort.sortOrder
+                      "sort-order": __props.sort.sortOrder
                     }, null, 8, ["sort-order"])) : createCommentVNode("", true)
                   ])
-                ], 14, _hoisted_4);
+                ], 14, _hoisted_8);
               }), 128))
             ])
           ], 2),
           createElementVNode("tbody", null, [
             unref(list).length > 0 ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
-              class: "table-body-wrapper"
+              class: "table-body-wrapper",
+              "data-testid": `${__props.testId}-${unref(TableTestIdModifiers).BODY_WRAPPER}`
             }, unref(wrapperProps)), [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (row) => {
                 return openBlock(), createElementBlock("tr", {
                   key: row.index,
                   class: normalizeClass(["table-row", {
-                    loading: _ctx.isLoading || _ctx.isLoading && !row.data || savingRows.value.includes(row.index),
+                    loading: __props.isLoading || __props.isLoading && !row.data || savingRows.value.includes(row.index),
                     active: activeRow.value === row.index
                   }]),
                   onMouseenter: ($event) => activeRow.value = row.index
@@ -277,22 +278,21 @@ const _sfc_main = defineComponent({
                   ], 4), [
                     [
                       vShow,
-                      _ctx.$slots["floating-actions"] && activeRow.value === row.index && !_ctx.isLoading
+                      _ctx.$slots["floating-actions"] && activeRow.value === row.index && !__props.isLoading
                     ]
                   ]),
                   (openBlock(true), createElementBlock(Fragment, null, renderList(row.data, (cell, cellIndex) => {
                     return openBlock(), createElementBlock("td", {
                       key: cellIndex,
                       class: normalizeClass({
-                        sticky: _ctx.columns[cellIndex].isSticky,
-                        bordered: _ctx.columns[cellIndex].isBordered,
-                        isTextRight: _ctx.columns[cellIndex].isTextRight
+                        sticky: __props.columns[cellIndex].isSticky,
+                        bordered: __props.columns[cellIndex].isBordered
                       }),
                       style: normalizeStyle(
-                        _ctx.columns[cellIndex].isSticky ? columnsStickyPositions.value[_ctx.columns[cellIndex].id] : null
+                        __props.columns[cellIndex].isSticky ? unref(columnsStickyPositions)[__props.columns[cellIndex].id] : null
                       )
                     }, [
-                      !_ctx.isLoading || _ctx.isLoading && !!cell ? (openBlock(), createElementBlock("div", {
+                      !__props.isLoading || __props.isLoading && !!cell ? (openBlock(), createElementBlock("div", {
                         key: 0,
                         class: normalizeClass({
                           last: cellIndex === row.data.length - 1,
@@ -300,7 +300,7 @@ const _sfc_main = defineComponent({
                           floating: _ctx.$slots["floating-actions"]
                         })
                       }, [
-                        renderSlot(_ctx.$slots, `cell-${_ctx.columns[cellIndex].id}`, {
+                        renderSlot(_ctx.$slots, `cell-${__props.columns[cellIndex].id}`, {
                           cell,
                           isLoading: savingRows.value.includes(row.index),
                           cellIndex,
@@ -319,27 +319,28 @@ const _sfc_main = defineComponent({
                       ], true)
                     ], 6);
                   }), 128))
-                ], 42, _hoisted_6);
+                ], 42, _hoisted_11);
               }), 128))
-            ], 16)) : (openBlock(), createElementBlock("div", _hoisted_7, [
+            ], 16, _hoisted_10)) : (openBlock(), createElementBlock("div", _hoisted_12, [
               renderSlot(_ctx.$slots, "empty-state", {}, () => [
                 createVNode(unref(EmptyState), {
-                  title: _ctx.emptyStateTitle,
-                  subtitle: _ctx.emptyStateSubtitle
-                }, null, 8, ["title", "subtitle"])
+                  title: __props.emptyStateTitle,
+                  subtitle: __props.emptyStateSubtitle,
+                  "test-id": `${__props.testId}-${unref(TableTestIdModifiers).EMPTY_STATE}`
+                }, null, 8, ["title", "subtitle", "test-id"])
               ], true)
             ]))
           ]),
-          unref(list).length > 0 ? (openBlock(), createElementBlock("tfoot", _hoisted_8)) : createCommentVNode("", true)
-        ], 36),
+          unref(list).length > 0 ? (openBlock(), createElementBlock("tfoot", _hoisted_13)) : createCommentVNode("", true)
+        ], 44, _hoisted_2),
         createVNode(unref(ScrollButton), {
-          show: showBackToTopButton.value,
+          show: unref(showBackToTopButton),
           onScrolled: scrollToTop
         }, null, 8, ["show"])
-      ], 32);
+      ], 40, _hoisted_1);
     };
   }
 });
-var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-207d9674"]]);
+var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-392e31d7"]]);
 
 export { Table as default };

package/components/table/TableHeaderSorter.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     sortOrder: 'asc' | 'desc';
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     sortOrder: 'asc' | 'desc';
-}>>>, {}, {}>;
+}>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/components/table/TableHeaderSorter.vue.js

@@ -4,21 +4,21 @@ import SortOrderIcon from './SortOrderIcon.vue.js';
 
 import "../../TableHeaderSorter.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = { class: "table-head-sorter-container" };
-const _sfc_main = defineComponent({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TableHeaderSorter",
   props: {
-    sortOrder: {}
+    sortOrder: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(SortOrderIcon, {
           name: "sort-order",
-          class: normalizeClass({ "table-head-sorter-selected": _ctx.sortOrder === "asc" })
+          class: normalizeClass({ "table-head-sorter-selected": __props.sortOrder === "asc" })
         }, null, 8, ["class"]),
         createVNode(SortOrderIcon, {
           name: "sort-order",
-          class: normalizeClass(["table-head-sorter-desc", { "table-head-sorter-selected": _ctx.sortOrder === "desc" }])
+          class: normalizeClass(["table-head-sorter-desc", { "table-head-sorter-selected": __props.sortOrder === "desc" }])
         }, null, 8, ["class"])
       ]);
     };

package/components/table/index.d.ts

@@ -7,6 +7,11 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
         type: import("vue").PropType<string>;
         required: true;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     columns: {
         type: import("vue").PropType<import("./Table.types").Column[]>;
         required: true;
@@ -21,11 +26,6 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
     } & {
         default: boolean;
     };
-    isStickyHeader: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     sections: {
         type: import("vue").PropType<import("./Table.types").Section[]>;
     } & {
@@ -61,11 +61,6 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
     } & {
         default: number;
     };
-    defaultScrollPosition: {
-        type: import("vue").PropType<number>;
-    } & {
-        default: any;
-    };
     rows: {
         type: import("vue").PropType<unknown[][]>;
         required: true;
@@ -90,6 +85,11 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
         type: import("vue").PropType<string>;
         required: true;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     columns: {
         type: import("vue").PropType<import("./Table.types").Column[]>;
         required: true;
@@ -104,11 +104,6 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
     } & {
         default: boolean;
     };
-    isStickyHeader: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     sections: {
         type: import("vue").PropType<import("./Table.types").Section[]>;
     } & {
@@ -144,11 +139,6 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
     } & {
         default: number;
     };
-    defaultScrollPosition: {
-        type: import("vue").PropType<number>;
-    } & {
-        default: any;
-    };
     rows: {
         type: import("vue").PropType<unknown[][]>;
         required: true;
@@ -163,9 +153,9 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
     }) => any;
     onLoadMore?: () => any;
 }, {
+    testId: string;
     isLoading: boolean;
     isSticky: boolean;
-    isStickyHeader: boolean;
     sections: import("./Table.types").Section[];
     emptyStateTitle: string;
     emptyStateSubtitle: string;
@@ -173,8 +163,7 @@ declare const TableTypes: () => (import("vue").InjectionKey<import("./TableConte
     infiniteScrollThreshold: number;
     rowHeight: number | ((index: number) => number);
     loadingRowCount: number;
-    defaultScrollPosition: number;
-}, {}>)[];
+}>)[];
 export { default as Table } from './Table.vue';
 export { TableContext } from './TableContext';
 export type { Column, Sort } from './Table.types';

package/components/table-cells/Editable.vue.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     isLoading: boolean;
     isEditing: boolean;
     validateFunction: (value: unknown) => string | boolean;
-}, {}>;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/components/table-cells/Editable.vue.js

@@ -11,15 +11,15 @@ const _hoisted_2 = {
   key: 1,
   class: "editable-content"
 };
-const _sfc_main = defineComponent({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Editable",
   props: {
     cell: { default: "" },
     isEditing: { type: Boolean, default: false },
     validateFunction: { type: Function, default: () => false },
     isLoading: { type: Boolean, default: false },
-    rowIndex: {},
-    cellIndex: {}
+    rowIndex: null,
+    cellIndex: null
   },
   setup(__props) {
     const props = __props;
@@ -73,7 +73,7 @@ const _sfc_main = defineComponent({
             renderSlot(_ctx.$slots, "content", {}, () => [
               createVNode(Text, { size: "sm" }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.cell), 1)
+                  createTextVNode(toDisplayString(__props.cell), 1)
                 ]),
                 _: 1
               })

package/components/table-cells/index.d.ts

@@ -61,7 +61,7 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("./Editabl
     isLoading: boolean;
     isEditing: boolean;
     validateFunction: (value: unknown) => string | boolean;
-}, {}>)[];
+}>)[];
 export { default as Editable } from './Editable.vue';
 export { EditableContext, useEditableContext } from './EditableContext';
 export { EditableTypes };

package/components/tabs/Tabs.vue.d.ts

@@ -8,10 +8,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     selectedTab: number | string;
     variant?: 'fix' | 'fill';
     size?: 'sm' | 'md' | 'lg' | 'xl';
+    testId?: string;
 }>, {
     tabsList: () => any[];
     variant: string;
     size: string;
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedTab": (tabId: string | number) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -24,14 +26,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     selectedTab: number | string;
     variant?: 'fix' | 'fill';
     size?: 'sm' | 'md' | 'lg' | 'xl';
+    testId?: string;
 }>, {
     tabsList: () => any[];
     variant: string;
     size: string;
+    testId: string;
 }>>> & {
     "onUpdate:selectedTab"?: (tabId: string | number) => any;
 }, {
     size: 'sm' | 'md' | 'lg' | 'xl';
+    testId: string;
     variant: 'fix' | 'fill';
     tabsList: {
         id: number | string;
@@ -39,7 +44,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         iconName: string;
         disabled?: boolean;
     }[];
-}, {}>;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/components/tabs/Tabs.vue.js

@@ -1,37 +1,39 @@
-import { defineComponent, useCssVars, ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, unref, createCommentVNode, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from 'vue';
-import '../typography/Heading.vue.js';
+import { defineComponent, useCssVars, unref, ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createBlock, createCommentVNode, withCtx, createTextVNode, toDisplayString, pushScopeId, popScopeId, createElementVNode } from 'vue';
+import { TabsTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
 import Icon from '../icon/Icon.vue.js';
-/* empty css                                                      */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
+/* empty css                                                      */
 import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-43f1459d"), n = n(), popScopeId(), n);
-const _hoisted_1 = ["onClick", "onMouseover"];
-const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
-const _hoisted_3 = {
+const _withScopeId = (n) => (pushScopeId("data-v-c22c2836"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["data-testid", "onClick", "onMouseover"];
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
+const _hoisted_4 = {
   key: 0,
   class: "tabs-border-line-hover"
 };
-const fixUnderlineLength = 12;
-const _sfc_main = defineComponent({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Tabs",
   props: {
     tabsList: { default: () => [] },
-    selectedTab: {},
+    selectedTab: null,
     variant: { default: "fill" },
-    size: { default: "sm" }
+    size: { default: "sm" },
+    testId: { default: "" }
   },
   emits: ["update:selectedTab"],
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "87ea7e12": selectedTabPosition.value,
-      "fb546e90": selectedTabWidth.value,
-      "b3e2e0ba": selectedTabCenter.value,
-      "2213a50a": hoveredTabCenter.value
+      "99d50838": unref(selectedTabPosition),
+      "1eedbceb": unref(selectedTabWidth),
+      "c715bc60": unref(selectedTabCenter),
+      "e8e3bca4": unref(hoveredTabCenter)
     }));
     const tabsNewList = ref([]);
     const hoveredTab = ref(null);
+    const fixUnderlineLength = 12;
     const skipUnwrap = { tabsNewList };
     const isHovered = computed(
       () => hoveredTab.value && hoveredTab.value !== props.selectedTab
@@ -77,17 +79,19 @@ const _sfc_main = defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("ul", {
-        class: normalizeClass(["tabs-wrap", [_ctx.size, _ctx.variant]])
+        class: normalizeClass(["tabs-wrap", [__props.size, __props.variant]]),
+        "data-testid": `${__props.testId}-${unref(TabsTestIdModifiers).WRAPPER}`
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabsList, (tab) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabsList, (tab) => {
           return openBlock(), createElementBlock("li", {
             ref_for: true,
             ref: skipUnwrap.tabsNewList,
             key: tab.id,
             class: normalizeClass(["tab-item", {
               "disabled-tab": tab.disabled,
-              "selected-tab": tab.id === _ctx.selectedTab
+              "selected-tab": tab.id === __props.selectedTab
             }]),
+            "data-testid": `${__props.testId}-${unref(TabsTestIdModifiers).TAB}-${tab.id}`,
             onClick: ($event) => selectTab(tab),
             onMouseover: ($event) => setHover(tab),
             onMouseleave: clearHover
@@ -97,7 +101,7 @@ const _sfc_main = defineComponent({
                 key: 0,
                 name: tab.iconName,
                 class: normalizeClass(["tab-icon", {
-                  size: _ctx.size,
+                  size: __props.size,
                   "lone-icon": !tab.name
                 }])
               }, null, 8, ["name", "class"])) : createCommentVNode("", true),
@@ -112,14 +116,14 @@ const _sfc_main = defineComponent({
                 _: 2
               }, 1024)) : createCommentVNode("", true)
             ], true)
-          ], 42, _hoisted_1);
+          ], 42, _hoisted_2);
         }), 128)),
-        _hoisted_2,
-        isHovered.value ? (openBlock(), createElementBlock("div", _hoisted_3)) : createCommentVNode("", true)
-      ], 2);
+        _hoisted_3,
+        unref(isHovered) ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
     };
   }
 });
-var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43f1459d"]]);
+var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c22c2836"]]);
 
 export { Tabs as default };