diff --git a/packages/main/cypress/specs/Table.cy.tsx b/packages/main/cypress/specs/Table.cy.tsx index 4de1bc186f72..01929d00947e 100644 --- a/packages/main/cypress/specs/Table.cy.tsx +++ b/packages/main/cypress/specs/Table.cy.tsx @@ -780,6 +780,7 @@ describe("Table - HeaderCell", () => { cy.get("@headerCell1").contains("Column A"); cy.get("@headerCell2").should("have.attr", "aria-sort", "ascending"); cy.get("@headerCell2").find("ui5-table-header-cell-action-ai").as("actionB"); + cy.get("@actionB").should("not.have.attr", "_popin"); cy.get("@actionB").shadow().find("ui5-button").as("actionBbutton"); cy.get("@actionBbutton").should("have.attr", "icon", "ai"); cy.get("@actionBbutton").should("have.attr", "tooltip", "Generated by AI"); @@ -805,6 +806,7 @@ describe("Table - HeaderCell", () => { cy.get("@row1").find("ui5-table-cell[_popin]").as("row1popins"); cy.get("@row1popins").first().as("row1popinB"); cy.get("@row1popinB").shadow().find("ui5-table-header-cell-action-ai").as("row1popinBaction"); + cy.get("@row1popinBaction").should("have.attr", "_popin"); cy.get("@row1popinBaction").shadow().find("ui5-button").as("row1popinBbutton"); cy.get("@row1popinBbutton").should("have.attr", "icon", "ai"); cy.get("@row1popinBbutton").should("have.attr", "design", "Transparent"); diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index bece94735872..b86173073d81 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import { customElement, slot, property, eventStrict, i18n, } from "@ui5/webcomponents-base/dist/decorators.js"; +import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import TableTemplate from "./TableTemplate.js"; import TableStyles from "./generated/themes/Table.css.js"; @@ -251,6 +252,7 @@ class Table extends UI5Element { "move": TableMoveEventDetail; "row-action-click": TableRowActionClickEventDetail; } + /** * Defines the rows of the component. * @@ -327,7 +329,6 @@ class Table extends UI5Element { * Available options are: * * Scroll - Columns are shown as regular columns and horizontal scrolling is enabled. - * * Popin - Columns are shown as pop-ins instead of regular columns. * * @default "Scroll" @@ -340,6 +341,7 @@ class Table extends UI5Element { * Defines if the loading indicator should be shown. * * **Note:** When the component is loading, it is not interactive. + * * @default false * @public */ @@ -355,12 +357,6 @@ class Table extends UI5Element { @property({ type: Number }) loadingDelay = 1000; - /** - * Defines the sticky top offset of the table, if other sticky elements outside of the table exist. - */ - @property() - stickyTop = "0"; - /** * Defines the maximum number of row actions that is displayed, which determines the width of the row action column. * @@ -373,12 +369,39 @@ class Table extends UI5Element { @property({ type: Number }) rowActionCount = 0; + /** + * Defines the sticky top offset of the table, if other sticky elements outside of the table exist. + */ + @property() + stickyTop = "0"; + @property({ type: Number, noAttribute: true }) _invalidate = 0; @property({ type: Boolean, noAttribute: true }) _renderNavigated = false; + @query("[ui5-drop-indicator]") + dropIndicatorDOM!: DropIndicator; + + @query("#nodata-row") + _nodataRow?: TableRow; + + @query("#table-end-row") + _endRow!: TableRow; + + @query("#table") + _tableElement!: HTMLElement; + + @query("#before") + _beforeElement!: HTMLElement; + + @query("#after") + _afterElement!: HTMLElement; + + @query("#loading") + _loadingElement!: HTMLElement; + @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -417,10 +440,7 @@ class Table extends UI5Element { onBeforeRendering(): void { this._renderNavigated = this.rows.some(row => row.navigated); - if (this.headerRow[0]) { - this.headerRow[0]._rowActionCount = this.rowActionCount; - } - this.rows.forEach(row => { + [...this.headerRow, ...this.rows].forEach(row => { row._renderNavigated = this._renderNavigated; row._rowActionCount = this.rowActionCount; }); @@ -616,32 +636,14 @@ class Table extends UI5Element { return widths.join(" "); } - get _tableOverflowX() { - return (this.overflowMode === TableOverflowMode.Popin) ? "clip" : "auto"; - } - - get _tableOverflowY() { - return "auto"; - } - - get _nodataRow() { - return this.shadowRoot!.getElementById("nodata-row") as TableRow; - } - - get _beforeElement() { - return this.shadowRoot!.getElementById("before") as HTMLElement; - } - - get _afterElement() { - return this.shadowRoot!.getElementById("after") as HTMLElement; - } - - get _tableElement() { - return this.shadowRoot!.getElementById("table") as HTMLElement; + get _scrollContainer() { + return this._getVirtualizer() ? this._tableElement : findVerticalScrollContainer(this); } - get _loadingElement() { - return this.shadowRoot!.getElementById("loading") as HTMLElement; + get _stickyElements() { + const stickyRows = this.headerRow.filter(row => row.sticky); + const stickyColumns = this.headerRow[0]._stickyCells as TableHeaderCell[]; + return [...stickyRows, ...stickyColumns]; } get _effectiveNoDataText() { @@ -661,28 +663,9 @@ class Table extends UI5Element { return (selection?.isSelectable() && this.rows.length) ? selection.isMultiSelectable() : undefined; } - get _stickyElements() { - const stickyRows = this.headerRow.filter(row => row.sticky); - const stickyColumns = this.headerRow[0]._stickyCells as TableHeaderCell[]; - - return [...stickyRows, ...stickyColumns]; - } - - get _scrollContainer() { - return this._getVirtualizer() ? this._tableElement : findVerticalScrollContainer(this); - } - get isTable() { return true; } - - get dropIndicatorDOM(): DropIndicator | null { - return this.shadowRoot!.querySelector("[ui5-drop-indicator]"); - } - - get _hasRowActions() { - return this.rowActionCount > 0; - } } Table.define(); diff --git a/packages/main/src/TableCell.ts b/packages/main/src/TableCell.ts index 019f40d3a794..d141e083db6d 100644 --- a/packages/main/src/TableCell.ts +++ b/packages/main/src/TableCell.ts @@ -1,5 +1,4 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import TableCellTemplate from "./TableCellTemplate.js"; import TableCellStyles from "./generated/themes/TableCell.css.js"; import TableCellBase from "./TableCellBase.js"; @@ -27,7 +26,6 @@ import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js"; */ @customElement({ tag: "ui5-table-cell", - renderer: jsxRenderer, styles: [TableCellBase.styles, TableCellStyles], template: TableCellTemplate, }) diff --git a/packages/main/src/TableCellBase.ts b/packages/main/src/TableCellBase.ts index 224822c50b79..13af6ba3ddf8 100644 --- a/packages/main/src/TableCellBase.ts +++ b/packages/main/src/TableCellBase.ts @@ -1,11 +1,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import { + customElement, slot, property, i18n, +} from "@ui5/webcomponents-base/dist/decorators.js"; +import { toggleAttribute } from "./TableUtils.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js"; +import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js"; /** @@ -24,6 +24,7 @@ import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js"; abstract class TableCellBase extends UI5Element { /** * Defines the content of the component. + * * @public */ @slot({ type: Node, "default": true }) @@ -54,11 +55,7 @@ abstract class TableCellBase extends UI5Element { } onBeforeRendering() { - if (this._popin) { - this.removeAttribute("role"); - } else { - this.setAttribute("role", this.ariaRole); - } + toggleAttribute(this, "role", !this._popin, this.ariaRole); } getFocusDomRef() { diff --git a/packages/main/src/TableDragAndDrop.ts b/packages/main/src/TableDragAndDrop.ts index 63bcb6fd2b0d..b25a21ad16bc 100644 --- a/packages/main/src/TableDragAndDrop.ts +++ b/packages/main/src/TableDragAndDrop.ts @@ -3,9 +3,8 @@ import { findClosestPosition } from "@ui5/webcomponents-base/dist/util/dragAndDr import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js"; import handleDragOver from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js"; import handleDrop from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js"; - -import type Table from "./Table.js"; import TableExtension from "./TableExtension.js"; +import type Table from "./Table.js"; export default class TableDragAndDrop extends TableExtension { _table: Table; @@ -25,7 +24,7 @@ export default class TableDragAndDrop extends TableExtension { return; } - this._table.dropIndicatorDOM!.targetReference = null; + this._table.dropIndicatorDOM.targetReference = null; } _ondragover(e: DragEvent) { @@ -40,13 +39,13 @@ export default class TableDragAndDrop extends TableExtension { ); if (!closestPosition) { - this._table.dropIndicatorDOM!.targetReference = null; + this._table.dropIndicatorDOM.targetReference = null; return; } const { targetReference, placement } = handleDragOver(e, this._table, closestPosition, closestPosition.element, { crossDnD: true, originalEvent: true }); - this._table.dropIndicatorDOM!.targetReference = targetReference; - this._table.dropIndicatorDOM!.placement = placement; + this._table.dropIndicatorDOM.targetReference = targetReference; + this._table.dropIndicatorDOM.placement = placement; } _ondrop(e: DragEvent) { diff --git a/packages/main/src/TableGrowing.ts b/packages/main/src/TableGrowing.ts index 4a357ac54b16..ff30722cd232 100644 --- a/packages/main/src/TableGrowing.ts +++ b/packages/main/src/TableGrowing.ts @@ -1,21 +1,15 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; - -import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { - isSpace, - isEnter, -} from "@ui5/webcomponents-base/dist/Keys.js"; - -import type Table from "./Table.js"; -import type { ITableGrowing } from "./Table.js"; + customElement, property, eventStrict, i18n, +} from "@ui5/webcomponents-base/dist/decorators.js"; +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import TableGrowingMode from "./types/TableGrowingMode.js"; import TableGrowingTemplate from "./TableGrowingTemplate.js"; import TableGrowingCss from "./generated/themes/TableGrowing.css.js"; +import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import type Table from "./Table.js"; +import type { ITableGrowing } from "./Table.js"; +import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { TABLE_MORE, TABLE_MORE_DESCRIPTION, @@ -74,8 +68,8 @@ import { * * @public */ -@event("load-more", { - bubbles: true, +@eventStrict("load-more", { + bubbles: false, }) class TableGrowing extends UI5Element implements ITableGrowing { @@ -221,10 +215,7 @@ class TableGrowing extends UI5Element implements ITableGrowing { return; } - const lastElement = this._table.shadowRoot?.querySelector("#table-end-row"); - if (lastElement) { - this._getIntersectionObserver().observe(lastElement); - } + this._getIntersectionObserver().observe(this._table._endRow); } /** diff --git a/packages/main/src/TableHeaderCell.ts b/packages/main/src/TableHeaderCell.ts index c7df723c2f47..11212afe6694 100644 --- a/packages/main/src/TableHeaderCell.ts +++ b/packages/main/src/TableHeaderCell.ts @@ -1,4 +1,5 @@ import { customElement, property, slot } from "@ui5/webcomponents-base/dist/decorators.js"; +import { toggleAttribute } from "./TableUtils.js"; import TableCellBase from "./TableCellBase.js"; import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js"; import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js"; @@ -139,11 +140,7 @@ class TableHeaderCell extends TableCellBase { // overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`; } - if (this.sortIndicator !== SortOrder.None) { - this.setAttribute("aria-sort", this.sortIndicator.toLowerCase()); - } else if (this.hasAttribute("aria-sort")) { - this.removeAttribute("aria-sort"); - } + toggleAttribute(this, "aria-sort", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase()); } } diff --git a/packages/main/src/TableHeaderCellActionAI.ts b/packages/main/src/TableHeaderCellActionAI.ts index d5d5b117e403..d369e287743d 100644 --- a/packages/main/src/TableHeaderCellActionAI.ts +++ b/packages/main/src/TableHeaderCellActionAI.ts @@ -27,6 +27,11 @@ class TableHeaderCellActionAI extends TableHeaderCellActionBase { @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; + onAfterRendering() { + super.onAfterRendering(); + this.toggleAttribute("_popin", !this.parentElement?.hasAttribute("ui5-table-header-cell")); + } + getRenderInfo() { return { icon: "ai", diff --git a/packages/main/src/TableHeaderCellActionBaseTemplate.tsx b/packages/main/src/TableHeaderCellActionBaseTemplate.tsx index eab5a2429a78..c87cafb2ddc7 100644 --- a/packages/main/src/TableHeaderCellActionBaseTemplate.tsx +++ b/packages/main/src/TableHeaderCellActionBaseTemplate.tsx @@ -1,4 +1,5 @@ import Button from "./Button.js"; +import ButtonDesign from "./types/ButtonDesign.js"; import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js"; export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) { @@ -7,7 +8,7 @@ export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellA icon={this._icon} tooltip={this._tooltip} onClick={this._onClick} - design="Transparent" + design={ButtonDesign.Transparent} > ); } diff --git a/packages/main/src/TableHeaderCellTemplate.tsx b/packages/main/src/TableHeaderCellTemplate.tsx index ca4ee67b4a85..9f05d0ad74f1 100644 --- a/packages/main/src/TableHeaderCellTemplate.tsx +++ b/packages/main/src/TableHeaderCellTemplate.tsx @@ -1,9 +1,8 @@ import Icon from "./Icon.js"; import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js"; -import type TableHeaderCell from "./TableHeaderCell.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) { return ( diff --git a/packages/main/src/TableHeaderRow.ts b/packages/main/src/TableHeaderRow.ts index fd35310fe3c5..f72ada32320a 100644 --- a/packages/main/src/TableHeaderRow.ts +++ b/packages/main/src/TableHeaderRow.ts @@ -89,10 +89,6 @@ class TableHeaderRow extends TableRowBase { return true; } - get _hasRowActions() { - return this._table ? this._table._hasRowActions : false; - } - get _isSelectable() { return this._isMultiSelect; } diff --git a/packages/main/src/TableHeaderRowTemplate.tsx b/packages/main/src/TableHeaderRowTemplate.tsx index 7246df748884..8bfb300dac99 100644 --- a/packages/main/src/TableHeaderRowTemplate.tsx +++ b/packages/main/src/TableHeaderRowTemplate.tsx @@ -27,7 +27,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) { ))} - { this._hasRowActions && + { this._rowActionCount > 0 && diff --git a/packages/main/src/TableNavigation.ts b/packages/main/src/TableNavigation.ts index a9ae6372fa3e..4d0f32610914 100644 --- a/packages/main/src/TableNavigation.ts +++ b/packages/main/src/TableNavigation.ts @@ -4,10 +4,10 @@ import { import isElementHidden from "@ui5/webcomponents-base/dist/util/isElementHidden.js"; 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 type TableRowBase from "./TableRowBase.js"; import TableExtension from "./TableExtension.js"; import GridWalker from "./GridWalker.js"; +import type TableRowBase from "./TableRowBase.js"; +import type Table from "./Table.js"; /** * Handles the keyboard navigation for the ui5-table. @@ -55,7 +55,7 @@ class TableNavigation extends TableExtension { if (this._table.rows.length) { this._table.rows.forEach(row => items.push(this._getNavigationItemsOfRow(row))); - } else { + } else if (this._table._nodataRow) { items.push(this._getNavigationItemsOfRow(this._table._nodataRow)); } diff --git a/packages/main/src/TableRow.ts b/packages/main/src/TableRow.ts index 262bd8ae0aeb..5115f470291d 100644 --- a/packages/main/src/TableRow.ts +++ b/packages/main/src/TableRow.ts @@ -1,7 +1,6 @@ -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import { customElement, slot, property } from "@ui5/webcomponents-base/dist/decorators.js"; import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import { toggleAttribute } from "./TableUtils.js"; import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import TableRowTemplate from "./TableRowTemplate.js"; import TableRowBase from "./TableRowBase.js"; @@ -79,12 +78,12 @@ class TableRow extends TableRowBase { /** * Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used. * - * @default -1 + * @default undefined * @since 2.5.0 * @public */ @property({ type: Number }) - position = -1; + position?: number; /** * Defines the interactive state of the row. @@ -114,25 +113,12 @@ class TableRow extends TableRowBase { @property({ type: Boolean }) movable = false; - @property({ type: Boolean, noAttribute: true }) - _renderNavigated = false; - onBeforeRendering() { super.onBeforeRendering(); - this.toggleAttribute("_interactive", this._isInteractive); - if (this.position !== -1) { - this.setAttribute("aria-rowindex", `${this.position + 1}`); - } - if (this._renderNavigated && this.navigated) { - this.setAttribute("aria-current", "true"); - } else { - this.removeAttribute("aria-current"); - } - if (this.movable) { - this.setAttribute("draggable", "true"); - } else { - this.removeAttribute("draggable"); - } + toggleAttribute(this, "_interactive", this._isInteractive); + toggleAttribute(this, "aria-rowindex", this.position !== undefined, `${this.position! + 1}`); + toggleAttribute(this, "aria-current", this._renderNavigated && this.navigated, "true"); + toggleAttribute(this, "draggable", this.movable, "true"); } async focus(focusOptions?: FocusOptions | undefined): Promise { @@ -176,11 +162,6 @@ class TableRow extends TableRowBase { return this.interactive; } - get _hasRowActions() { - // even if there are no actions visible or fixed, we still need to render the action cell to ensure alignment - return this._rowActionCount > 0; - } - get _hasOverflowActions() { let renderedActionsCount = 0; return this.actions.some(action => { diff --git a/packages/main/src/TableRowActionBaseTemplate.tsx b/packages/main/src/TableRowActionBaseTemplate.tsx index bd9e6e01cb62..743ade06a9b6 100644 --- a/packages/main/src/TableRowActionBaseTemplate.tsx +++ b/packages/main/src/TableRowActionBaseTemplate.tsx @@ -1,5 +1,7 @@ import Button from "./Button.js"; +import ButtonDesign from "./types/ButtonDesign.js"; import Icon from "./Icon.js"; +import IconDesign from "./types/IconDesign.js"; import type TableRowActionBase from "./TableRowActionBase.js"; export default function TableRowActionBaseTemplate(this: TableRowActionBase) { @@ -13,14 +15,14 @@ export default function TableRowActionBaseTemplate(this: TableRowActionBase) { icon={this._icon} tooltip={this._text} onClick={this._onActionClick} - design="Transparent" + design={ButtonDesign.Transparent} > : } diff --git a/packages/main/src/TableRowActionNavigation.ts b/packages/main/src/TableRowActionNavigation.ts index b8ff23f2019a..db13c5fb8590 100644 --- a/packages/main/src/TableRowActionNavigation.ts +++ b/packages/main/src/TableRowActionNavigation.ts @@ -1,8 +1,8 @@ import { customElement, property, i18n } from "@ui5/webcomponents-base/dist/decorators.js"; import TableRowActionBase from "./TableRowActionBase.js"; -import { TABLE_NAVIGATION } from "./generated/i18n/i18n-defaults.js"; import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import { TABLE_NAVIGATION } from "./generated/i18n/i18n-defaults.js"; /** * @class @@ -36,6 +36,10 @@ class TableRowActionNavigation extends TableRowActionBase { @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; + isFixedAction() { + return true; + } + getRenderInfo() { return { text: this._i18nNavigation, @@ -44,10 +48,6 @@ class TableRowActionNavigation extends TableRowActionBase { }; } - isFixedAction() { - return true; - } - get _i18nNavigation() { return TableRowActionNavigation.i18nBundle.getText(TABLE_NAVIGATION); } diff --git a/packages/main/src/TableRowBase.ts b/packages/main/src/TableRowBase.ts index 47145d1a5678..051dd1c3a13b 100644 --- a/packages/main/src/TableRowBase.ts +++ b/packages/main/src/TableRowBase.ts @@ -1,14 +1,13 @@ 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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import TableRowBaseCss from "./generated/themes/TableRowBase.css.js"; +import query from "@ui5/webcomponents-base/dist/decorators/query.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type TableCellBase from "./TableCellBase.js"; -import TableRowBaseCss from "./generated/themes/TableRowBase.css.js"; import type Table from "./Table.js"; -import { isInstanceOfTable } from "./TableUtils.js"; import { TABLE_ROW_SELECTOR, } from "./generated/i18n/i18n-defaults.js"; @@ -35,6 +34,15 @@ abstract class TableRowBase extends UI5Element { @property({ type: Number, noAttribute: true }) _rowActionCount = 0; + @property({ type: Boolean, noAttribute: true }) + _renderNavigated = false; + + @query("#selection-cell") + _selectionCell?: HTMLElement; + + @query("#navigated-cell") + _navigatedCell?: HTMLElement; + @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -44,11 +52,7 @@ abstract class TableRowBase extends UI5Element { } onBeforeRendering() { - if (this._isSelectable) { - this.setAttribute("aria-selected", `${this._isSelected}`); - } else { - this.removeAttribute("aria-selected"); - } + toggleAttribute(this, "aria-selected", this._isSelectable, `${this._isSelected}`); } getFocusDomRef() { @@ -101,10 +105,6 @@ abstract class TableRowBase extends UI5Element { return !!this._tableSelection?.isRowSelectorRequired(); } - get _selectionCell() { - return this.shadowRoot!.getElementById("selection-cell"); - } - get _visibleCells() { return this.cells.filter(c => !c._popin); } @@ -114,11 +114,7 @@ abstract class TableRowBase extends UI5Element { } get _stickyCells() { - const selectionCell = this.shadowRoot?.querySelector("#selection-cell"), - navigatedCell = this.shadowRoot?.querySelector("#navigated-cell"); - - // filter out null/undefined - return [selectionCell, ...this.cells, navigatedCell].filter(cell => cell?.hasAttribute("fixed")); + return [this._selectionCell, ...this.cells, this._navigatedCell].filter(cell => cell?.hasAttribute("fixed")); } get _i18nRowSelector(): string { diff --git a/packages/main/src/TableRowTemplate.tsx b/packages/main/src/TableRowTemplate.tsx index 09ad01f5e028..f837da3bfb52 100644 --- a/packages/main/src/TableRowTemplate.tsx +++ b/packages/main/src/TableRowTemplate.tsx @@ -1,8 +1,9 @@ -import type TableRow from "./TableRow.js"; 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 type TableRow from "./TableRow.js"; export default function TableRowTemplate(this: TableRow) { return ( @@ -37,7 +38,7 @@ export default function TableRowTemplate(this: TableRow) { ))} - { this._hasRowActions && + { this._rowActionCount > 0 && { this._flexibleActions.map(action => ( @@ -47,7 +48,7 @@ export default function TableRowTemplate(this: TableRow) { } diff --git a/packages/main/src/TableUtils.ts b/packages/main/src/TableUtils.ts index bfc394adc4e9..9b2310616902 100644 --- a/packages/main/src/TableUtils.ts +++ b/packages/main/src/TableUtils.ts @@ -87,6 +87,18 @@ const throttle = (callback: () => void) => { }; }; +const toggleAttribute = (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => { + if (condition) { + if (value === undefined) { + element.toggleAttribute(attribute, true); + } else { + element.setAttribute(attribute, value); + } + } else if (element.hasAttribute(attribute)) { + element.removeAttribute(attribute); + } +}; + export { isInstanceOfTable, isSelectionCheckbox, @@ -96,4 +108,5 @@ export { scrollElementIntoView, isFeature, throttle, + toggleAttribute, }; diff --git a/packages/main/src/TableVirtualizer.ts b/packages/main/src/TableVirtualizer.ts index 0c200988f4d6..87f9f49f4acc 100644 --- a/packages/main/src/TableVirtualizer.ts +++ b/packages/main/src/TableVirtualizer.ts @@ -219,7 +219,7 @@ class TableVirtualizer extends UI5Element implements ITableFeature { } const firstRow = this._table.rows[0]; - if (firstRow && firstRow.position > 0) { + if (firstRow && firstRow.position !== undefined && firstRow.position > 0) { const transform = firstRow.position * this.rowHeight; return `translateY(${transform}px)`; }