fix(ui5-table): remove circular dependency from table and row (#9261)

- remove cyclic import in TableRowBase of Table.ts
- add TableUtils.ts, which adds duck-typed instanceof checks for safe imports

packages/main/src/Table.ts

@@ -557,6 +557,10 @@ class Table extends UI5Element {
 	get _stickyElements() {
 		return [this.headerRow[0]].filter(row => row.sticky);
 	}
+
+	get isTable() {
+		return true;
+	}
 }
 
 Table.define();

packages/main/src/TableCellBase.ts

@@ -49,6 +49,10 @@ abstract class TableCellBase extends UI5Element {
 	getFocusDomRef() {
 		return this;
 	}
+
+	isTableCellBase() {
+		return true;
+	}
 }
 
 export default TableCellBase;

packages/main/src/TableNavigation.ts

@@ -15,10 +15,10 @@ import isElementHidden from "@ui5/webcomponents-base/dist/util/isElementHidden.j
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import type Table from "./Table.js";
-import TableRowBase from "./TableRowBase.js";
-import TableCellBase from "./TableCellBase.js";
+import type TableRowBase from "./TableRowBase.js";
 import TableExtension from "./TableExtension.js";
 import GridWalker from "./GridWalker.js";
+import { isInstanceOfTableCellBase, isInstanceOfTableRowBase } from "./TableUtils.js";
 
 /**
  * Handles the keyboard navigation for the ui5-table.
@@ -126,7 +126,7 @@ class TableNavigation extends TableExtension {
 	}
 
 	_handleEnter(e: KeyboardEvent, eventOrigin: HTMLElement) {
-		if (eventOrigin instanceof TableCellBase) {
+		if (isInstanceOfTableCellBase(eventOrigin)) {
 			this._handleF2(e, eventOrigin);
 		}
 	}
@@ -142,7 +142,7 @@ class TableNavigation extends TableExtension {
 	}
 
 	_handleF7(e: KeyboardEvent, eventOrigin: HTMLElement) {
-		if (eventOrigin instanceof TableRowBase) {
+		if (isInstanceOfTableRowBase(eventOrigin)) {
 			this._gridWalker.setColPos(this._colPosition);
 			let elementToFocus = this._gridWalker.getCurrent() as HTMLElement;
 			if (this._tabPosition > -1) {

packages/main/src/TableRowBase.ts

@@ -8,8 +8,9 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import type TableCellBase from "./TableCellBase.js";
 import TableRowBaseCss from "./generated/themes/TableRowBase.css.js";
-import Table from "./Table.js";
+import type Table from "./Table.js";
 import CheckBox from "./CheckBox.js";
+import { isInstanceOfTable } from "./TableUtils.js";
 import {
 	TABLE_ROW_SELECTOR,
 } from "./generated/i18n/i18n-defaults.js";
@@ -71,8 +72,8 @@ abstract class TableRowBase extends UI5Element {
 	}
 
 	get _table(): Table | undefined {
-		const table = this.parentElement;
-		return table instanceof Table ? table : undefined;
+		const element = this.parentElement;
+		return isInstanceOfTable(element) ? element : undefined;
 	}
 
 	get _tableId() {
@@ -114,6 +115,10 @@ abstract class TableRowBase extends UI5Element {
 	get _i18nRowSelector(): string {
 		return TableRowBase.i18nBundle.getText(TABLE_ROW_SELECTOR);
 	}
+
+	get isTableRowBase() {
+		return true;
+	}
 }
 
 export default TableRowBase;

packages/main/src/TableUtils.ts

@@ -0,0 +1,21 @@
+import type Table from "./Table";
+import type TableCellBase from "./TableCellBase";
+import type TableRowBase from "./TableRowBase";
+
+const isInstanceOfTable = (obj: any): obj is Table => {
+	return "isTable" in obj && !!obj.isTable;
+};
+
+const isInstanceOfTableCellBase = (obj: any): obj is TableCellBase => {
+	return "isTableCellBase" in obj && !!obj.isTableCellBase;
+};
+
+const isInstanceOfTableRowBase = (obj: any): obj is TableRowBase => {
+	return "isTableRowBase" in obj && !!obj.isTableRowBase;
+};
+
+export {
+	isInstanceOfTable,
+	isInstanceOfTableCellBase,
+	isInstanceOfTableRowBase,
+};