refactor(ui5-table): resolve row selector/action components lazily via features

packages/main/src/TableHeaderCell.ts

@@ -4,6 +4,9 @@ import TableCellBase from "./TableCellBase.js";
 import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
 import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
 import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import Icon from "./Icon.js";
+import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
+import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
 import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
 import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -132,6 +135,21 @@ class TableHeaderCell extends TableCellBase {
 	ariaRole: string = "columnheader";
 	_popinWidth: number = 0;
 
+	get _sortIconComponent(): typeof Icon | undefined {
+		return this.sortIndicator === SortOrder.None ? undefined : Icon;
+	}
+
+	get _sortIcon(): string | undefined {
+		switch (this.sortIndicator) {
+		case SortOrder.Ascending:
+			return SortAscending;
+		case SortOrder.Descending:
+			return SortDescending;
+		default:
+			return undefined;
+		}
+	}
+
 	onBeforeRendering() {
 		super.onBeforeRendering();
 		this.style.textAlign = this.horizontalAlign || "";

packages/main/src/TableHeaderCellTemplate.tsx

@@ -1,26 +1,14 @@
-import Icon from "./Icon.js";
-import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
-import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
-import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
 import type TableHeaderCell from "./TableHeaderCell.js";
 
 export default function TableHeaderCellTemplate(this: TableHeaderCell) {
+	const SortIconComponent = this._sortIconComponent;
 	return (
 		<>
 			<slot name="action"></slot>
 			<slot></slot>
-			{ sortIcon.call(this) }
+			{ SortIconComponent &&
+				<SortIconComponent name={this._sortIcon}></SortIconComponent>
+			}
 		</>
 	);
 }
-
-function sortIcon(this: TableHeaderCell) {
-	switch (this.sortIndicator) {
-	case SortOrder.Ascending:
-		return <Icon name={SortAscending}></Icon>;
-	case SortOrder.Descending:
-		return <Icon name={SortDescending}></Icon>;
-	default:
-		return <></>;
-	}
-}

packages/main/src/TableHeaderRow.ts

@@ -105,6 +105,14 @@ class TableHeaderRow extends TableRowBase<TableHeaderCell> {
 		return (this._tableSelection as TableSelectionMulti).headerSelector === "ClearAll";
 	}
 
+	get _clearAllComponent() {
+		return this._tableSelection?.getClearAllComponent();
+	}
+
+	get _clearAllIcon() {
+		return this._tableSelection?.getClearAllIcon();
+	}
+
 	get _selectionCellAriaDescription() {
 		return this._tableSelection?.getAriaDescriptionForColumnHeader();
 	}

packages/main/src/TableHeaderRowTemplate.tsx

@@ -1,12 +1,9 @@
-import CheckBox from "./CheckBox.js";
 import TableHeaderCell from "./TableHeaderCell.js";
-import Icon from "./Icon.js";
-import IconMode from "./types/IconMode.js";
-import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
-import IconDesign from "./types/IconDesign.js";
 import type TableHeaderRow from "./TableHeaderRow.js";
 
 export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColIndex: number = 1) {
+	const SelectionComponent = this._selectionComponent;
+	const ClearAllComponent = this._clearAllComponent;
 	return (
 		<>
 			{ this._hasSelector &&
@@ -22,22 +19,25 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 						<></>
 						:
 						this._shouldRenderClearAll ?
-							<Icon
-								name={ClearAll}
-								mode={IconMode.Decorative}
-								showTooltip={true}
-								accessibleName={this._i18nDeselectAllRows}
-								design={this._hasSelectedRows ? IconDesign.Default : IconDesign.NonInteractive}
-								onClick={this._onSelectionChange}
-							></Icon>
+							(ClearAllComponent &&
+								<ClearAllComponent
+									name={this._clearAllIcon}
+									mode="Decorative"
+									showTooltip={true}
+									accessibleName={this._i18nDeselectAllRows}
+									design={this._hasSelectedRows ? "Default" : "NonInteractive"}
+									onClick={this._onSelectionChange}
+								></ClearAllComponent>
+							)
 							:
-							<CheckBox id="selection-component"
+							SelectionComponent &&
+							<SelectionComponent id="selection-component"
 								tabindex={-1}
 								checked={this._isSelected}
 								onChange={this._onSelectionChange}
 								accessibleName={this._i18nRowSelector}
 								title={this._isSelected ? this._i18nDeselectAllRows : this._i18nSelectAllRows}
-							></CheckBox>
+							></SelectionComponent>
 					}
 				</TableHeaderCell>
 			}

packages/main/src/TableRow.ts

@@ -212,6 +212,14 @@ class TableRow extends TableRowBase<TableCell> {
 		return TableRowBase.i18nBundle.getText(TABLE_ROW_OVERFLOW_BUTTON);
 	}
 
+	get _overflowButtonComponent(): typeof Button | undefined {
+		return this.actions.at(0)?.overflowButtonComponent;
+	}
+
+	get _overflowButtonIcon(): string | undefined {
+		return this.actions.at(0)?.overflowButtonIcon;
+	}
+
 	get _flexibleActions() {
 		const flexibleActions = this.actions.filter(action => !action.isFixedAction());
 		const fixedActionsCount = this.actions.length - flexibleActions.length;

packages/main/src/TableRowActionBase.ts

@@ -5,12 +5,13 @@ import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 
 import TableRowActionBaseTemplate from "./TableRowActionBaseTemplate.js";
 import TableRowActionBaseStyles from "./generated/themes/TableRowActionBase.css.js";
+import Button from "./Button.js";
+import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
 import type Menu from "./Menu.js";
 import type MenuItem from "./MenuItem.js";
 import type Table from "./Table.js";
 import type TableRow from "./TableRow.js";
 import type TableRowAction from "./TableRowAction.js";
-import type Button from "./Button.js";
 
 let MenuConstructor: new () => Menu;
 let MenuItemConstructor: new () => MenuItem;
@@ -56,6 +57,14 @@ abstract class TableRowActionBase extends UI5Element {
 	@property({ type: Boolean })
 	invisible = false;
 
+	get overflowButtonComponent(): typeof Button {
+		return Button;
+	}
+
+	get overflowButtonIcon(): string {
+		return iconOverflow;
+	}
+
 	private static _menu: Menu;
 	private static _menuItems = new WeakMap();
 	static async showMenu(actions: TableRowActionBase[], opener: HTMLElement) {

packages/main/src/TableRowBase.ts

@@ -144,6 +144,10 @@ abstract class TableRowBase<TCell extends TableCellBase = TableCellBase> extends
 		return !!this._tableSelection?.isMultiSelectable();
 	}
 
+	get _selectionComponent() {
+		return this._tableSelection?.getSelectionComponent();
+	}
+
 	get _hasSelector() {
 		return this._table?._isRowSelectorRequired;
 	}

packages/main/src/TableRowTemplate.tsx

@@ -1,12 +1,9 @@
 import TableCell from "./TableCell.js";
-import CheckBox from "./CheckBox.js";
-import RadioButton from "./RadioButton.js";
-import Button from "./Button.js";
-import ButtonDesign from "./types/ButtonDesign.js";
-import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
 import type TableRow from "./TableRow.js";
 
 export default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {
+	const SelectionComponent = this._selectionComponent;
+	const OverflowButton = this._overflowButtonComponent;
 	return (
 		<>
 			{ this._hasSelector &&
@@ -17,20 +14,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 					data-ui5-table-selection-cell
 					data-ui5-acc-text=""
 				>
-					{ this._isMultiSelect ?
-						<CheckBox id="selection-component"
+					{ SelectionComponent &&
+						<SelectionComponent id="selection-component"
 							tabindex={-1}
 							checked={this._isSelected}
 							onChange={this._onSelectionChange}
 							accessibleName={this._i18nRowSelector}
-						></CheckBox>
-						:
-						<RadioButton id="selection-component"
-							tabindex={-1}
-							checked={this._isSelected}
-							onChange={this._onSelectionChange}
-							accessibleName={this._i18nRowSelector}
-						></RadioButton>
+						></SelectionComponent>
 					}
 				</TableCell>
 			}
@@ -62,13 +52,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 						<slot name={action._individualSlot}></slot>
 					))}
 
-					{ this._hasOverflowActions &&
-						<Button id="overflow"
-							icon={iconOverflow}
-							design={ButtonDesign.Transparent}
+					{ this._hasOverflowActions && OverflowButton &&
+						<OverflowButton id="overflow"
+							icon={this._overflowButtonIcon}
+							design="Transparent"
 							tooltip={this._overflowButtonTooltip}
 							onClick={this._onOverflowButtonClick}
-						></Button>
+						></OverflowButton>
 					}
 
 					{ this._fixedActions.map(action => (

packages/main/src/TableSelection.ts

@@ -7,6 +7,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import TableSelectionMode from "./types/TableSelectionMode.js";
+import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
 import { isSelectionCell, isHeaderSelectionCell, findRowInPath } from "./TableUtils.js";
 import type Table from "./Table.js";
 import type { ITableFeature } from "./Table.js";
@@ -135,6 +137,18 @@ class TableSelection extends UI5Element implements ITableFeature {
 		return this.mode !== TableSelectionMode.None;
 	}
 
+	getSelectionComponent(): typeof CheckBox | typeof RadioButton {
+		return this.isMultiSelectable() ? CheckBox : RadioButton;
+	}
+
+	getClearAllComponent(): undefined {
+		return undefined;
+	}
+
+	getClearAllIcon(): undefined {
+		return undefined;
+	}
+
 	getAriaDescriptionForTable(): string | undefined {
 		return undefined;
 	}

packages/main/src/TableSelectionBase.ts

@@ -1,6 +1,7 @@
 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 type Icon from "./Icon.js";
 import type Table from "./Table.js";
 import type TableRowBase from "./TableRowBase.js";
 import type TableRow from "./TableRow.js";
@@ -106,6 +107,27 @@ abstract class TableSelectionBase extends UI5Element implements ITableFeature {
 		return this.behavior === TableSelectionBehavior.RowSelector;
 	}
 
+	/**
+	 * Returns the component used to render the row selector (for example, `CheckBox` or `RadioButton`).
+	 */
+	getSelectionComponent(): typeof UI5Element | undefined {
+		return undefined;
+	}
+
+	/**
+	 * Returns the component used to render the "Clear All" selector in the column header.
+	 */
+	getClearAllComponent(): typeof Icon | undefined {
+		return undefined;
+	}
+
+	/**
+	 * Returns the icon name used for the "Clear All" selector in the column header.
+	 */
+	getClearAllIcon(): string | undefined {
+		return undefined;
+	}
+
 	/**
 	 * Returns the ARIA description of the Table as an alternative to aria-multiselectable.
 	 */

packages/main/src/TableSelectionMulti.ts

@@ -1,5 +1,8 @@
 import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
 import TableSelectionBase from "./TableSelectionBase.js";
+import CheckBox from "./CheckBox.js";
+import Icon from "./Icon.js";
+import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { isSelectionCell, isHeaderSelectionCell, findRowInPath } from "./TableUtils.js";
 import { isUpShift } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -94,6 +97,18 @@ class TableSelectionMulti extends TableSelectionBase {
 		return true;
 	}
 
+	getSelectionComponent(): typeof CheckBox {
+		return CheckBox;
+	}
+
+	getClearAllComponent(): typeof Icon {
+		return Icon;
+	}
+
+	getClearAllIcon(): string {
+		return ClearAll;
+	}
+
 	isSelected(row: TableRowBase): boolean {
 		if (row.isHeaderRow()) {
 			return this.headerSelector === "ClearAll" ? true : this.areAllRowsSelected();

packages/main/src/TableSelectionSingle.ts

@@ -1,5 +1,6 @@
 import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
 import TableSelectionBase from "./TableSelectionBase.js";
+import RadioButton from "./RadioButton.js";
 import type TableRow from "./TableRow.js";
 
 /**
@@ -48,6 +49,10 @@ class TableSelectionSingle extends TableSelectionBase {
 		return rowKey ? this.selected === rowKey : false;
 	}
 
+	getSelectionComponent(): typeof RadioButton {
+		return RadioButton;
+	}
+
 	setSelected(row: TableRow, selected: boolean, fireEvent: boolean = false) {
 		const rowKey = this.getRowKey(row);
 		if (rowKey) {