chore: improve instance checks

packages/base/src/util/createInstanceChecker.ts

@@ -0,0 +1,7 @@
+function createChecker<T, P extends keyof T = keyof T>(prop: P) {
+	return (object: any): object is T => {
+		return object !== undefined && prop in object && object[prop] === true;
+	};
+}
+
+export default createChecker;

packages/fiori/src/SideNavigation.ts

@@ -14,11 +14,13 @@ import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNaviga
 
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import type SideNavigationItemBase from "./SideNavigationItemBase.js";
-import { isInstanceOfSideNavigationSelectableItemBase } from "./SideNavigationSelectableItemBase.js";
-import { isInstanceOfSideNavigationItemBase } from "./SideNavigationItemBase.js";
+import {
+	isInstanceOfSideNavigationSelectableItemBase,
+	isInstanceOfSideNavigationItemBase,
+	isInstanceOfSideNavigationItem,
+	isInstanceOfSideNavigationGroup,
+} from "./utils/InstanceChecks.js";
 import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
-import { isInstanceOfSideNavigationItem } from "./SideNavigationItem.js";
-import { isInstanceOfSideNavigationGroup } from "./SideNavigationGroup.js";
 import type SideNavigationItem from "./SideNavigationItem.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 import type SideNavigationGroup from "./SideNavigationGroup.js";

packages/fiori/src/SideNavigationGroup.ts

@@ -196,9 +196,4 @@ class SideNavigationGroup extends SideNavigationItemBase {
 
 SideNavigationGroup.define();
 
-const isInstanceOfSideNavigationGroup = (object: any): object is SideNavigationGroup => {
-	return "isSideNavigationGroup" in object;
-};
-
 export default SideNavigationGroup;
-export { isInstanceOfSideNavigationGroup };

packages/fiori/src/SideNavigationItem.ts

@@ -337,9 +337,4 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 
 SideNavigationItem.define();
 
-const isInstanceOfSideNavigationItem = (object: any): object is SideNavigationItem => {
-	return "isSideNavigationItem" in object;
-};
-
 export default SideNavigationItem;
-export { isInstanceOfSideNavigationItem };

packages/fiori/src/SideNavigationItemBase.ts

@@ -154,12 +154,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 	}
 }
 
-const isInstanceOfSideNavigationItemBase = (object: any): object is SideNavigationItemBase => {
-	return "isSideNavigationItemBase" in object;
-};
-
 export default SideNavigationItemBase;
 export type {
 	SideNavigationItemClickEventDetail,
 };
-export { isInstanceOfSideNavigationItemBase };

packages/fiori/src/SideNavigationSelectableItemBase.ts

@@ -334,14 +334,7 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	}
 }
 
-const isInstanceOfSideNavigationSelectableItemBase = (object: any): object is SideNavigationSelectableItemBase => {
-	return "isSideNavigationSelectableItemBase" in object;
-};
-
 export default SideNavigationSelectableItemBase;
-export {
-	isInstanceOfSideNavigationSelectableItemBase,
-};
 export type {
 	SideNavigationItemAccessibilityAttributes,
 };

packages/fiori/src/UserMenu.ts

@@ -13,7 +13,7 @@ import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { PopupScrollEventDetail } from "@ui5/webcomponents/dist/Popup.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { isInstanceOfMenuItem } from "@ui5/webcomponents/dist/MenuItem.js";
+import { isInstanceOfMenuItem } from "@ui5/webcomponents/dist/utils/InstanceChecks.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import type UserMenuAccount from "./UserMenuAccount.js";
 import type UserMenuItem from "./UserMenuItem.js";

packages/fiori/src/UserMenuItem.ts

@@ -1,6 +1,6 @@
 import { customElement, slot } from "@ui5/webcomponents-base/dist/decorators.js";
-import MenuItem, { isInstanceOfMenuItem } from "@ui5/webcomponents/dist/MenuItem.js";
-
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import { isInstanceOfMenuItem } from "@ui5/webcomponents/dist/utils/InstanceChecks.js";
 import UserMenuItemTemplate from "./UserMenuItemTemplate.js";
 
 // Styles

packages/fiori/src/UserMenuItemGroup.ts

@@ -39,14 +39,6 @@ import UserMenuItemGroupTemplate from "./UserMenuItemGroupTemplate.js";
 class UserMenuItemGroup extends MenuItemGroup {
 }
 
-const isInstanceOfUserMenuItemGroup = (object: any): object is UserMenuItemGroup => {
-	return "isGroup" in object;
-};
-
 UserMenuItemGroup.define();
 
 export default UserMenuItemGroup;
-
-export {
-	isInstanceOfUserMenuItemGroup,
-};

packages/fiori/src/utils/InstanceChecks.ts

@@ -0,0 +1,12 @@
+import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js";
+import type SideNavigationGroup from "../SideNavigationGroup.js";
+import type SideNavigationItem from "../SideNavigationItem.js";
+import type SideNavigationItemBase from "../SideNavigationItemBase.js";
+import type SideNavigationSelectableItemBase from "../SideNavigationSelectableItemBase.js";
+import type UserMenuItemGroup from "../UserMenuItemGroup.js";
+
+export const isInstanceOfSideNavigationGroup = createInstanceChecker<SideNavigationGroup>("isSideNavigationGroup");
+export const isInstanceOfSideNavigationItem = createInstanceChecker<SideNavigationItem>("isSideNavigationItem");
+export const isInstanceOfSideNavigationItemBase = createInstanceChecker<SideNavigationItemBase>("isSideNavigationItemBase");
+export const isInstanceOfSideNavigationSelectableItemBase = createInstanceChecker<SideNavigationSelectableItemBase>("isSideNavigationSelectableItemBase");
+export const isInstanceOfUserMenuItemGroup = createInstanceChecker<UserMenuItemGroup>("isGroup");

packages/main/cypress/specs/TableUtils.cy.tsx

@@ -1,4 +1,5 @@
-import { isInstanceOfTable, isValidColumnWidth } from "../../src/TableUtils.js";
+import { isValidColumnWidth } from "../../src/TableUtils.js";
+import { isInstanceOfTable } from "../../src/utils/InstanceChecks.js";
 import Table from "../../src/Table.js";
 import TableRow from "../../src/TableRow.js";
 

packages/main/src/ComboBox.ts

@@ -85,7 +85,7 @@ import type { ListItemClickEventDetail } from "./List.js";
 // eslint-disable-next-line
 import "./ComboBoxItemGroup.js";
 // eslint-disable-next-line
-import { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
+import { isInstanceOfComboBoxItemGroup } from "./utils/InstanceChecks.js";
 import type ComboBoxFilter from "./types/ComboBoxFilter.js";
 import type Input from "./Input.js";
 import type { InputEventDetail } from "./Input.js";

packages/main/src/ComboBoxItemGroup.ts

@@ -34,9 +34,8 @@ class ComboBoxItemGroup extends ListItemGroup implements IComboBoxItem {
 	})
 	items!: Array<ComboBoxItem>;
 
-	get isGroupItem(): boolean {
-		return true;
-	}
+	// for instance checking
+	readonly isGroupItem = true;
 
 	get _isVisible() {
 		return this.items.some(item => item._isVisible);
@@ -45,9 +44,4 @@ class ComboBoxItemGroup extends ListItemGroup implements IComboBoxItem {
 
 ComboBoxItemGroup.define();
 
-const isInstanceOfComboBoxItemGroup = (object: any): object is ComboBoxItemGroup => {
-	return "isGroupItem" in object;
-};
-
-export { isInstanceOfComboBoxItemGroup };
 export default ComboBoxItemGroup;

packages/main/src/List.ts

@@ -71,7 +71,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import type CheckBox from "./CheckBox.js";
 import type RadioButton from "./RadioButton.js";
-import { isInstanceOfListItemGroup } from "./ListItemGroup.js";
+import { isInstanceOfListItemGroup } from "./utils/InstanceChecks.js";
 import type ListItemGroup from "./ListItemGroup.js";
 
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms

packages/main/src/ListItemGroup.ts

@@ -213,10 +213,5 @@ class ListItemGroup extends UI5Element {
 
 ListItemGroup.define();
 
-const isInstanceOfListItemGroup = (object: any): object is ListItemGroup => {
-	return "isListItemGroup" in object;
-};
-
 export default ListItemGroup;
-export { isInstanceOfListItemGroup };
 export type { ListItemGroupMoveEventDetail };

packages/main/src/Menu.ts

@@ -25,9 +25,7 @@ import type List from "./List.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
 import type MenuItem from "./MenuItem.js";
 // The import below should be kept, as MenuItem is part of the Menu component.
-import { isInstanceOfMenuItem } from "./MenuItem.js";
-import { isInstanceOfMenuItemGroup } from "./MenuItemGroup.js";
-import { isInstanceOfMenuSeparator } from "./MenuSeparator.js";
+import { isInstanceOfMenuItem, isInstanceOfMenuItemGroup, isInstanceOfMenuSeparator } from "./utils/InstanceChecks.js";
 import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type PopoverPlacement from "./types/PopoverPlacement.js";
 import type {

packages/main/src/MenuItem.ts

@@ -30,8 +30,7 @@ import type { ListItemAccessibilityAttributes } from "./ListItem.js";
 import type List from "./List.js";
 import ListItem from "./ListItem.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
-import { isInstanceOfMenuSeparator } from "./MenuSeparator.js";
-import { isInstanceOfMenuItemGroup } from "./MenuItemGroup.js";
+import { isInstanceOfMenuSeparator, isInstanceOfMenuItem, isInstanceOfMenuItemGroup } from "./utils/InstanceChecks.js";
 import MenuItemTemplate from "./MenuItemTemplate.js";
 import {
 	MENU_BACK_BUTTON_ARIA_LABEL,
@@ -663,18 +662,10 @@ class MenuItem extends ListItem implements IMenuItem {
 
 MenuItem.define();
 
-const isInstanceOfMenuItem = (object: any): object is MenuItem => {
-	return "isMenuItem" in object;
-};
-
 export default MenuItem;
 
 export type {
 	MenuBeforeCloseEventDetail,
 	MenuBeforeOpenEventDetail,
 	MenuItemAccessibilityAttributes,
 };
-
-export {
-	isInstanceOfMenuItem,
-};

packages/main/src/MenuItemGroup.ts

@@ -6,7 +6,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type MenuItem from "./MenuItem.js";
-import { isInstanceOfMenuItem } from "./MenuItem.js";
+import { isInstanceOfMenuItem } from "./utils/InstanceChecks.js";
 import MenuItemGroupTemplate from "./MenuItemGroupTemplate.js";
 import MenuItemGroupCheckMode from "./types/MenuItemGroupCheckMode.js";
 import type { IMenuItem } from "./Menu.js";
@@ -148,14 +148,6 @@ class MenuItemGroup extends UI5Element implements IMenuItem {
 	}
 }
 
-const isInstanceOfMenuItemGroup = (object: any): object is MenuItemGroup => {
-	return "isGroup" in object;
-};
-
 MenuItemGroup.define();
 
 export default MenuItemGroup;
-
-export {
-	isInstanceOfMenuItemGroup,
-};

packages/main/src/MenuSeparator.ts

@@ -51,14 +51,6 @@ class MenuSeparator extends ListItemBase implements IMenuItem {
 	}
 }
 
-const isInstanceOfMenuSeparator = (object: any): object is MenuSeparator => {
-	return "isSeparator" in object;
-};
-
 MenuSeparator.define();
 
 export default MenuSeparator;
-
-export {
-	isInstanceOfMenuSeparator,
-};

packages/main/src/MultiComboBox.ts

@@ -58,8 +58,9 @@ import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js"
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
-import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
+import MultiComboBoxItem from "./MultiComboBoxItem.js";
+import MultiComboBoxItemGroup from "./MultiComboBoxItemGroup.js";
+import { isInstanceOfMultiComboBoxItem, isInstanceOfMultiComboBoxItemGroup } from "./utils/InstanceChecks.js";
 import ListItemGroup from "./ListItemGroup.js";
 import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
 import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js";

packages/main/src/MultiComboBoxItem.ts

@@ -83,11 +83,6 @@ class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
 	}
 }
 
-const isInstanceOfMultiComboBoxItem = (object: any): object is MultiComboBoxItem => {
-	return "isMultiComboBoxItem" in object;
-};
-
 MultiComboBoxItem.define();
 
 export default MultiComboBoxItem;
-export { isInstanceOfMultiComboBoxItem };

packages/main/src/MultiComboBoxItemGroup.ts

@@ -38,9 +38,7 @@ class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBox
 	 * Used to avoid tag name checks
 	 * @protected
 	 */
-	get isGroupItem() {
-		return true;
-	}
+	readonly isGroupItem = true;
 
 	get selected() {
 		return false;
@@ -57,10 +55,4 @@ class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBox
 
 MultiComboBoxItemGroup.define();
 
-const isInstanceOfMultiComboBoxItemGroup = (object: any): object is MultiComboBoxItemGroup => {
-	return "isGroupItem" in object;
-};
-
 export default MultiComboBoxItemGroup;
-
-export { isInstanceOfMultiComboBoxItemGroup };

packages/main/src/Popover.ts

@@ -241,6 +241,9 @@ class Popover extends Popup {
 		this._popoverResize = new PopoverResize(this);
 	}
 
+	// for instance checking
+	readonly isPopover = true;
+
 	/**
 	 * Defines the ID or DOM Reference of the element at which the popover is shown.
 	 * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
@@ -971,12 +974,8 @@ class Popover extends Popup {
 	}
 }
 
-const instanceOfPopover = (object: any): object is Popover => {
-	return "opener" in object;
-};
-
 Popover.define();
 
 export default Popover;
 
-export { instanceOfPopover, PopoverActualPlacement, PopoverActualHorizontalAlign };
+export { PopoverActualPlacement, PopoverActualHorizontalAlign };

packages/main/src/Popup.ts

@@ -707,6 +707,9 @@ abstract class Popup extends UI5Element {
 			},
 		};
 	}
+
+	// for instance checks
+	readonly isPopup = true;
 }
 
 export default Popup;

packages/main/src/TableRowBase.ts

@@ -1,7 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { customElement, property, i18n } from "@ui5/webcomponents-base/dist/decorators.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isInstanceOfTable, toggleAttribute } from "./TableUtils.js";
+import { toggleAttribute } from "./TableUtils.js";
+import { isInstanceOfTable } from "./utils/InstanceChecks.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TableRowBaseCss from "./generated/themes/TableRowBase.css.js";
 import query from "@ui5/webcomponents-base/dist/decorators/query.js";

packages/main/src/TableSelectionBase.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { property, eventStrict } from "@ui5/webcomponents-base/dist/decorators.js";
-import { isInstanceOfTable } from "./TableUtils.js";
+import { isInstanceOfTable } from "./utils/InstanceChecks.js";
 import type Table from "./Table.js";
 import type TableRowBase from "./TableRowBase.js";
 import type TableRow from "./TableRow.js";

packages/main/src/TableUtils.ts

@@ -1,10 +1,5 @@
-import type Table from "./Table.js";
 import type TableRow from "./TableRow.js";
 
-const isInstanceOfTable = (obj: any): obj is Table => {
-	return !!obj && "isTable" in obj && !!obj.isTable;
-};
-
 const isSelectionCell = (e: Event) => {
 	return e.composedPath().some((el: EventTarget) => (el as HTMLElement).hasAttribute?.("data-ui5-table-selection-cell"));
 };
@@ -112,7 +107,6 @@ const isValidColumnWidth = (width: string | undefined): width is string => {
 };
 
 export {
-	isInstanceOfTable,
 	isSelectionCell,
 	isHeaderSelectionCell,
 	findRowInPath,

packages/main/src/Tree.ts

@@ -6,6 +6,7 @@ import DragAndDropHandler from "./delegate/DragAndDropHandler.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import createChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js";
 import type DropIndicator from "./DropIndicator.js";
 import "./TreeItem.js";
 import type TreeItemBase from "./TreeItemBase.js";
@@ -524,9 +525,7 @@ class Tree extends UI5Element {
 		return placements;
 	}
 
-	_isInstanceOfTreeItemBase(object: any): object is TreeItemBase {
-		return "isTreeItem" in object;
-	}
+	_isInstanceOfTreeItemBase = createChecker<TreeItemBase>("isTreeItem");
 }
 
 const walkTree = (el: Tree | TreeItemBase, level: number, callback: WalkCallback) => {