refactor(ui5-tabcontainer): delete ITab interface (#8593)

- Removes `ITab` interface. TabContainer already works only with Tab and TabSeparator, therefore `ITab` only adds extra complexity. - Replaces `isInline`, `forcedMixedMode`, `forcedPosinset`, `forcedSetsize`, `isTopLevelTab`, `getElementInStrip` with 2 new methods: `receiveStripInfo(info)` and `receiveOverflowInfo(info)`. This way it is clear that those properties are not expected to be set by the Tab or TabSeparator, but are provided by the TabContainer in specific point in time - Makes `getTabInStripDomRef` return type match `UI5Element#getDomRef` BREAKING CHANGE: You can no longer import and implement the `ITab` interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete. Fixes: #8461

Author: dimovpetar

packages/main/src/Tab.ts

@@ -24,7 +24,8 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import SemanticColor from "./types/SemanticColor.js";
 import ListItemType from "./types/ListItemType.js";
 import TabContainer from "./TabContainer.js";
-import type { ITab } from "./TabContainer.js";
+import type TabSeparator from "./TabSeparator.js";
+import type { TabContainerStripInfo, TabContainerOverflowInfo } from "./TabContainer.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
 import CustomListItem from "./CustomListItem.js";
@@ -47,6 +48,14 @@ const DESIGN_DESCRIPTIONS = {
 [SemanticColor.Critical]: TAB_ARIA_DESIGN_CRITICAL,
 };
 
+interface TabInStrip extends HTMLElement {
+realTabReference: Tab;
+}
+
+interface TabInOverflow extends CustomListItem {
+realTabReference: Tab;
+}
+
 /**
  * @class
  * The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.
@@ -55,7 +64,6 @@ const DESIGN_DESCRIPTIONS = {
  * @abstract
  * @constructor
  * @extends UI5Element
- * @implements {ITab}
  * @public
  */
 @customElement({
@@ -70,7 +78,7 @@ const DESIGN_DESCRIPTIONS = {
 CustomListItem,
 ],
 })
-class Tab extends UI5Element implements ITab, ITabbable {
+class Tab extends UI5Element implements ITabbable {
 /**
  * The text to be displayed for the item.
  * @default ""
@@ -143,11 +151,8 @@ class Tab extends UI5Element implements ITab, ITabbable {
 @property({ type: Boolean })
 forcedSelected!: boolean;
 
-@property({ type: Object, defaultValue: null })
-realTabReference!: Tab;
-
 @property({ type: Boolean })
-isTopLevelTab!: boolean;
+_isTopLevelTab!: boolean;
 
 @property({ type: Object, defaultValue: null })
 _selectedTabReference!: Tab;
@@ -180,12 +185,15 @@ class Tab extends UI5Element implements ITab, ITabbable {
 slots: false,
 },
 })
-items!: Array<ITab>
+items!: Array<Tab | TabSeparator>
 
-isInline?: boolean;
-forcedMixedMode?: boolean;
-getElementInStrip?: () => ITab | null;
+_isInline?: boolean;
+_forcedMixedMode?: boolean;
+_getElementInStrip?: () => HTMLElement | undefined;
 _individualSlot!: string;
+_forcedPosinset?: number;
+_forcedSetsize?: number;
+_forcedStyleInOverflow?: Record<string, any>;
 
 static i18nBundle: I18nBundle;
 
@@ -200,7 +208,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
 get displayText() {
 let text = this.text;
 
-if (this.isInline && this.additionalText) {
+if (this._isInline && this.additionalText) {
 text += ` (${this.additionalText})`;
 }
 
@@ -224,15 +232,15 @@ class Tab extends UI5Element implements ITab, ITabbable {
 }
 
 get requiresExpandButton() {
-return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
+return this.items.length > 0 && this._isTopLevelTab && this.hasOwnContent;
 }
 
 get isSingleClickArea() {
-return this.items.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
+return this.items.length > 0 && this._isTopLevelTab && !this.hasOwnContent;
 }
 
 get isTwoClickArea() {
-return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
+return this.items.length > 0 && this._isTopLevelTab && this.hasOwnContent;
 }
 
 get isOnSelectedTabPath(): boolean {
@@ -251,6 +259,21 @@ class Tab extends UI5Element implements ITab, ITabbable {
 return willShowContent(this.content);
 }
 
+receiveStripInfo({
+getElementInStrip, posinset, setsize, isInline, isTopLevelTab, mixedMode,
+}: TabContainerStripInfo) {
+this._getElementInStrip = getElementInStrip;
+this._forcedPosinset = posinset;
+this._forcedSetsize = setsize;
+this._forcedMixedMode = mixedMode;
+this._isInline = isInline;
+this._isTopLevelTab = !!isTopLevelTab;
+}
+
+receiveOverflowInfo({ style }: TabContainerOverflowInfo) {
+this._forcedStyleInOverflow = style;
+}
+
 /**
  * Returns the DOM reference of the tab that is placed in the header.
  *
@@ -260,19 +283,19 @@ class Tab extends UI5Element implements ITab, ITabbable {
  * @public
  * @since 1.0.0-rc.16
  */
-getTabInStripDomRef(): ITab | null {
-if (this.getElementInStrip) {
-return this.getElementInStrip();
+getTabInStripDomRef(): HTMLElement | undefined {
+if (this._getElementInStrip) {
+return this._getElementInStrip();
 }
 
-return null;
+return undefined;
 }
 
 getFocusDomRef() {
 let focusedDomRef = super.getFocusDomRef();
 
-if (this.getElementInStrip && this.getElementInStrip()) {
-focusedDomRef = this.getElementInStrip()!;
+if (this._getElementInStrip && this._getElementInStrip()) {
+focusedDomRef = this._getElementInStrip()!;
 }
 
 return focusedDomRef;
@@ -284,11 +307,11 @@ class Tab extends UI5Element implements ITab, ITabbable {
 }
 
 get isMixedModeTab() {
-return !this.icon && this.forcedMixedMode;
+return !this.icon && this._forcedMixedMode;
 }
 
 get isTextOnlyTab() {
-return !this.icon && !this.forcedMixedMode;
+return !this.icon && !this._forcedMixedMode;
 }
 
 get isIconTab() {
@@ -345,23 +368,23 @@ class Tab extends UI5Element implements ITab, ITabbable {
 classes.push("ui5-tab-strip-item--disabled");
 }
 
-if (this.isInline) {
+if (this._isInline) {
 classes.push("ui5-tab-strip-item--inline");
 }
 
 if (this.additionalText) {
 classes.push("ui5-tab-strip-item--withAdditionalText");
 }
 
-if (!this.icon && !this.forcedMixedMode) {
+if (!this.icon && !this._forcedMixedMode) {
 classes.push("ui5-tab-strip-item--textOnly");
 }
 
 if (this.icon) {
 classes.push("ui5-tab-strip-item--withIcon");
 }
 
-if (!this.icon && this.forcedMixedMode) {
+if (!this.icon && this._forcedMixedMode) {
 classes.push("ui5-tab-strip-item--mixedMode");
 }
 
@@ -493,3 +516,7 @@ TabContainer.registerTabStyles(draggableElementStyles);
 TabContainer.registerTabStyles(overflowCss);
 
 export default Tab;
+export type {
+TabInStrip,
+TabInOverflow,
+};