@ui5/webcomponents 2.25.1-rc.0 → 2.26.0-rc.0

package/dist/TableRowBase.js

@@ -121,7 +121,7 @@ let TableRowBase = TableRowBase_1 = class TableRowBase extends UI5Element {
         return (this._table?.rows.length ?? 0) > 0 && this.cells.some(c => c._popin && !c._popinHidden);
     }
     get _stickyCells() {
-        return [this._selectionCell, ...this.cells, this._navigatedCell].filter(cell => cell?.hasAttribute("fixed"));
+        return [this._selectionCell, this._actionsCell, this._navigatedCell].filter(Boolean);
     }
     get _i18nRowSelector() {
         return TableRowBase_1.i18nBundle.getText(TABLE_ROW_SELECTOR);
@@ -145,6 +145,9 @@ __decorate([
 __decorate([
     query("#selection-cell")
 ], TableRowBase.prototype, "_selectionCell", void 0);
+__decorate([
+    query("#actions-cell")
+], TableRowBase.prototype, "_actionsCell", void 0);
 __decorate([
     query("#navigated-cell")
 ], TableRowBase.prototype, "_navigatedCell", void 0);

package/dist/TableRowBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowBase.js","sourceRoot":"","sources":["../src/TableRowBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { customElement, property, i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isInstanceOfTable, toggleAttribute } from \"./TableUtils.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport TableRowBaseCss from \"./generated/themes/TableRowBase.css.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type TableCellBase from \"./TableCellBase.js\";\nimport type Table from \"./Table.js\";\nimport {\n\tTABLE_ROW_SELECTOR,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\trenderer: jsxRenderer,\n\tstyles: TableRowBaseCss,\n})\nabstract class TableRowBase<TCell extends TableCellBase = TableCellBase> extends UI5Element {\n\tcells!: Array<TCell>;\n\n\t@property({ type: Number, noAttribute: true })\n\t_invalidate = 0;\n\n\t@property({ type: Number, noAttribute: true })\n\t_rowActionCount = 0;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_renderNavigated = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_alternate = false;\n\n\t@property({ type: Boolean })\n\t_renderDummyCell = false;\n\n\t@query(\"#selection-cell\")\n\t_selectionCell?: HTMLElement;\n\n\t@query(\"#navigated-cell\")\n\t_navigatedCell?: HTMLElement;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tisHeaderRow(): boolean {\n\t\treturn false;\n\t}\n\n\tisGroupRow(): boolean {\n\t\treturn false;\n\t}\n\n\tonEnterDOM() {\n\t\t!this.role && this.setAttribute(\"role\", \"row\");\n\t\tthis.toggleAttribute(\"ui5-table-row-base\", true);\n\t}\n\n\tonBeforeRendering() {\n\t\ttoggleAttribute(this, \"aria-selected\", this._isSelectable, `${this._isSelected}`);\n\t\ttoggleAttribute(this, \"_has-popin\", this._hasPopin);\n\t}\n\n\tonAfterRendering() {\n\t\tthis._handleCustomFocusOutline();\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this;\n\t}\n\n\tasync focus(focusOptions?: FocusOptions | undefined): Promise<void> {\n\t\tthis.setAttribute(\"tabindex\", \"-1\");\n\t\tHTMLElement.prototype.focus.call(this, focusOptions);\n\t\tthis._handleCustomFocusOutline();\n\t\treturn Promise.resolve();\n\t}\n\n\t_handleCustomFocusOutline() {\n\t\tif (this._renderDummyCell && !this._hasPopin && document.activeElement === this) {\n\t\t\tconst cells = [...this.shadowRoot!.children].flatMap(element => {\n\t\t\t\treturn element.localName === \"slot\" ? (element as HTMLSlotElement).assignedElements() : [element];\n\t\t\t});\n\t\t\tconst customOutlineAttribute = \"data-ui5-custom-outline\";\n\t\t\tcells.forEach(cell => cell.removeAttribute(customOutlineAttribute));\n\t\t\tconst firstVisibleCell = cells.at(0);\n\t\t\tconst lastVisibleCell = cells.at(-2);\n\t\t\tif (firstVisibleCell === lastVisibleCell) {\n\t\t\t\tfirstVisibleCell?.setAttribute(customOutlineAttribute, \"startend\");\n\t\t\t} else {\n\t\t\t\tfirstVisibleCell?.setAttribute(customOutlineAttribute, \"start\");\n\t\t\t\tlastVisibleCell?.setAttribute(customOutlineAttribute, \"end\");\n\t\t\t}\n\t\t}\n\t}\n\n\t_onSelectionChange() {\n\t\tconst tableSelection = this._tableSelection!;\n\t\tconst selected = tableSelection.isMultiSelectable() ? !this._isSelected : true;\n\t\ttableSelection.setSelected(this, selected, true);\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif ((eventOrigin === this && this._isSelectable && isSpace(e)) || (eventOrigin === this._selectionCell && (isSpace(e) || isEnter(e)))) {\n\t\t\tthis._onSelectionChange();\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\tget _table(): Table | undefined {\n\t\tconst element = this.parentElement;\n\t\treturn isInstanceOfTable(element) ? element : undefined;\n\t}\n\n\tget _tableId() {\n\t\treturn this._table?._id;\n\t}\n\n\tget _tableSelection() {\n\t\treturn this._table?._getSelection();\n\t}\n\n\tget _isSelected() {\n\t\treturn this._tableSelection?.isSelected(this);\n\t}\n\n\tget _isSelectable() {\n\t\treturn this._tableSelection?.isSelectable();\n\t}\n\n\tget _isMultiSelect() {\n\t\treturn !!this._tableSelection?.isMultiSelectable();\n\t}\n\n\tget _hasSelector() {\n\t\treturn this._table?._isRowSelectorRequired;\n\t}\n\n\tget _visibleCells() {\n\t\treturn this.cells.filter(c => !c._popin);\n\t}\n\n\tget _firstVisibleCell() {\n\t\treturn this.cells.find(c => !c._popin);\n\t}\n\n\tget _popinCells() {\n\t\treturn this.cells.filter(c => c._popin && !c._popinHidden);\n\t}\n\n\tget _hasPopin() {\n\t\treturn (this._table?.rows.length ?? 0) > 0 && this.cells.some(c => c._popin && !c._popinHidden);\n\t}\n\n\tget _stickyCells() {\n\t\treturn [this._selectionCell, ...this.cells, this._navigatedCell].filter(cell => cell?.hasAttribute(\"fixed\"));\n\t}\n\n\tget _i18nRowSelector(): string {\n\t\treturn TableRowBase.i18nBundle.getText(TABLE_ROW_SELECTOR);\n\t}\n}\n\nexport default TableRowBase;\n"]}
+{"version":3,"file":"TableRowBase.js","sourceRoot":"","sources":["../src/TableRowBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { customElement, property, i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isInstanceOfTable, toggleAttribute } from \"./TableUtils.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport TableRowBaseCss from \"./generated/themes/TableRowBase.css.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type TableCellBase from \"./TableCellBase.js\";\nimport type Table from \"./Table.js\";\nimport {\n\tTABLE_ROW_SELECTOR,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\trenderer: jsxRenderer,\n\tstyles: TableRowBaseCss,\n})\nabstract class TableRowBase<TCell extends TableCellBase = TableCellBase> extends UI5Element {\n\tcells!: Array<TCell>;\n\n\t@property({ type: Number, noAttribute: true })\n\t_invalidate = 0;\n\n\t@property({ type: Number, noAttribute: true })\n\t_rowActionCount = 0;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_renderNavigated = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_alternate = false;\n\n\t@property({ type: Boolean })\n\t_renderDummyCell = false;\n\n\t@query(\"#selection-cell\")\n\t_selectionCell?: HTMLElement;\n\n\t@query(\"#actions-cell\")\n\t_actionsCell?: HTMLElement;\n\n\t@query(\"#navigated-cell\")\n\t_navigatedCell?: HTMLElement;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tisHeaderRow(): boolean {\n\t\treturn false;\n\t}\n\n\tisGroupRow(): boolean {\n\t\treturn false;\n\t}\n\n\tonEnterDOM() {\n\t\t!this.role && this.setAttribute(\"role\", \"row\");\n\t\tthis.toggleAttribute(\"ui5-table-row-base\", true);\n\t}\n\n\tonBeforeRendering() {\n\t\ttoggleAttribute(this, \"aria-selected\", this._isSelectable, `${this._isSelected}`);\n\t\ttoggleAttribute(this, \"_has-popin\", this._hasPopin);\n\t}\n\n\tonAfterRendering() {\n\t\tthis._handleCustomFocusOutline();\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this;\n\t}\n\n\tasync focus(focusOptions?: FocusOptions | undefined): Promise<void> {\n\t\tthis.setAttribute(\"tabindex\", \"-1\");\n\t\tHTMLElement.prototype.focus.call(this, focusOptions);\n\t\tthis._handleCustomFocusOutline();\n\t\treturn Promise.resolve();\n\t}\n\n\t_handleCustomFocusOutline() {\n\t\tif (this._renderDummyCell && !this._hasPopin && document.activeElement === this) {\n\t\t\tconst cells = [...this.shadowRoot!.children].flatMap(element => {\n\t\t\t\treturn element.localName === \"slot\" ? (element as HTMLSlotElement).assignedElements() : [element];\n\t\t\t});\n\t\t\tconst customOutlineAttribute = \"data-ui5-custom-outline\";\n\t\t\tcells.forEach(cell => cell.removeAttribute(customOutlineAttribute));\n\t\t\tconst firstVisibleCell = cells.at(0);\n\t\t\tconst lastVisibleCell = cells.at(-2);\n\t\t\tif (firstVisibleCell === lastVisibleCell) {\n\t\t\t\tfirstVisibleCell?.setAttribute(customOutlineAttribute, \"startend\");\n\t\t\t} else {\n\t\t\t\tfirstVisibleCell?.setAttribute(customOutlineAttribute, \"start\");\n\t\t\t\tlastVisibleCell?.setAttribute(customOutlineAttribute, \"end\");\n\t\t\t}\n\t\t}\n\t}\n\n\t_onSelectionChange() {\n\t\tconst tableSelection = this._tableSelection!;\n\t\tconst selected = tableSelection.isMultiSelectable() ? !this._isSelected : true;\n\t\ttableSelection.setSelected(this, selected, true);\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif ((eventOrigin === this && this._isSelectable && isSpace(e)) || (eventOrigin === this._selectionCell && (isSpace(e) || isEnter(e)))) {\n\t\t\tthis._onSelectionChange();\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\tget _table(): Table | undefined {\n\t\tconst element = this.parentElement;\n\t\treturn isInstanceOfTable(element) ? element : undefined;\n\t}\n\n\tget _tableId() {\n\t\treturn this._table?._id;\n\t}\n\n\tget _tableSelection() {\n\t\treturn this._table?._getSelection();\n\t}\n\n\tget _isSelected() {\n\t\treturn this._tableSelection?.isSelected(this);\n\t}\n\n\tget _isSelectable() {\n\t\treturn this._tableSelection?.isSelectable();\n\t}\n\n\tget _isMultiSelect() {\n\t\treturn !!this._tableSelection?.isMultiSelectable();\n\t}\n\n\tget _hasSelector() {\n\t\treturn this._table?._isRowSelectorRequired;\n\t}\n\n\tget _visibleCells() {\n\t\treturn this.cells.filter(c => !c._popin);\n\t}\n\n\tget _firstVisibleCell() {\n\t\treturn this.cells.find(c => !c._popin);\n\t}\n\n\tget _popinCells() {\n\t\treturn this.cells.filter(c => c._popin && !c._popinHidden);\n\t}\n\n\tget _hasPopin() {\n\t\treturn (this._table?.rows.length ?? 0) > 0 && this.cells.some(c => c._popin && !c._popinHidden);\n\t}\n\n\tget _stickyCells() {\n\t\treturn [this._selectionCell, this._actionsCell, this._navigatedCell].filter(Boolean) as HTMLElement[];\n\t}\n\n\tget _i18nRowSelector(): string {\n\t\treturn TableRowBase.i18nBundle.getText(TABLE_ROW_SELECTOR);\n\t}\n}\n\nexport default TableRowBase;\n"]}

package/dist/TableRowTemplate.js

@@ -22,7 +22,7 @@ export default function TableRowTemplate(ariaColIndex = 1) {
             }), this._renderDummyCell && this._hasPopin &&
                 _jsx(TableCell, { id: "dummy-cell", role: "none", "aria-hidden": true, "data-border-merged": "", "data-excluded-from-navigation": "" }), this._rowActionCount > 0 &&
                 _jsxs(TableCell, { id: "actions-cell", "aria-colindex": ariaColIndex++, "data-ui5-acc-text": this._actionCellAccText, children: [this._flexibleActions.map(action => (_jsx("slot", { name: action._individualSlot }))), this._hasOverflowActions &&
-                            _jsx(Button, { id: "overflow", icon: iconOverflow, design: ButtonDesign.Transparent, onClick: this._onOverflowButtonClick }), this._fixedActions.map(action => (_jsx("slot", { name: action._individualSlot })))] }), this._renderNavigated &&
+                            _jsx(Button, { id: "overflow", icon: iconOverflow, design: ButtonDesign.Transparent, tooltip: this._overflowButtonTooltip, onClick: this._onOverflowButtonClick }), this._fixedActions.map(action => (_jsx("slot", { name: action._individualSlot })))] }), this._renderNavigated &&
                 _jsx(TableCell, { id: "navigated-cell", "data-excluded-from-navigation": true, "aria-hidden": true, role: "none", children: _jsx("div", { id: "navigated" }) }), this._renderDummyCell && !this._hasPopin &&
                 _jsx(TableCell, { id: "dummy-cell", role: "none", "aria-hidden": true, "data-border-merged": "", "data-excluded-from-navigation": "nofocus" }), this._hasPopin &&
                 _jsx(TableCell, { id: "popin-cell", "data-ui5-table-popin-cell": true, "aria-colindex": ariaColIndex++, children: this._popinCells.map(cell => (_jsx("slot", { name: cell._individualSlot }))) })] }));

package/dist/TableRowTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowTemplate.js","sourceRoot":"","sources":["../src/TableRowTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import TableCell from \"./TableCell.js\";\nimport CheckBox from \"./CheckBox.js\";\nimport RadioButton from \"./RadioButton.js\";\nimport Button from \"./Button.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport iconOverflow from \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport type TableRow from \"./TableRow.js\";\n\nexport default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {\n\treturn (\n\t\t<>\n\t\t\t{ this._hasSelector &&\n\t\t\t\t<TableCell id=\"selection-cell\"\n\t\t\t\t\taria-selected={this._isSelected}\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t\tdata-border-merged={this._firstVisibleCell?.merged ? \"\" : null}\n\t\t\t\t\tdata-ui5-table-selection-cell\n\t\t\t\t\tdata-ui5-acc-text=\"\"\n\t\t\t\t>\n\t\t\t\t\t{ this._isMultiSelect ?\n\t\t\t\t\t\t<CheckBox id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></CheckBox>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<RadioButton id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></RadioButton>\n\t\t\t\t\t}\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this.cells.flatMap(cell => {\n\t\t\t\tif (cell._popin) {\n\t\t\t\t\tcell.role = null;\n\t\t\t\t\tcell.ariaColIndex = null;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\n\t\t\t\tcell.role ??= cell.ariaRole;\n\t\t\t\tcell.ariaColIndex = (cell.role === cell.ariaRole) ? `${ariaColIndex++}` : null;\n\t\t\t\treturn [<slot name={cell._individualSlot}></slot>];\n\t\t\t})}\n\n\t\t\t{ this._renderDummyCell && this._hasPopin &&\n\t\t\t\t<TableCell id=\"dummy-cell\" role=\"none\" aria-hidden={true} data-border-merged=\"\"\n\t\t\t\t\tdata-excluded-from-navigation=\"\">\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._rowActionCount > 0 &&\n\t\t\t\t<TableCell id=\"actions-cell\"\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t\tdata-ui5-acc-text={this._actionCellAccText}\n\t\t\t\t>\n\t\t\t\t\t{ this._flexibleActions.map(action => (\n\t\t\t\t\t\t<slot name={action._individualSlot}></slot>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{ this._hasOverflowActions &&\n\t\t\t\t\t\t<Button id=\"overflow\"\n\t\t\t\t\t\t\ticon={iconOverflow}\n\t\t\t\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\t\t\t\tonClick={this._onOverflowButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t}\n\n\t\t\t\t\t{ this._fixedActions.map(action => (\n\t\t\t\t\t\t<slot name={action._individualSlot}></slot>\n\t\t\t\t\t))}\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._renderNavigated &&\n\t\t\t\t<TableCell id=\"navigated-cell\"\n\t\t\t\t\tdata-excluded-from-navigation\n\t\t\t\t\taria-hidden={true}\n\t\t\t\t\trole=\"none\"\n\t\t\t\t>\n\t\t\t\t\t<div id=\"navigated\"></div>\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._renderDummyCell && !this._hasPopin &&\n\t\t\t\t<TableCell id=\"dummy-cell\" role=\"none\" aria-hidden={true} data-border-merged=\"\"\n\t\t\t\t\tdata-excluded-from-navigation=\"nofocus\">\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._hasPopin &&\n\t\t\t\t<TableCell id=\"popin-cell\"\n\t\t\t\t\tdata-ui5-table-popin-cell\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t>\n\t\t\t\t\t{ this._popinCells.map(cell => (\n\t\t\t\t\t\t<slot name={cell._individualSlot}></slot>\n\t\t\t\t\t))}\n\t\t\t\t</TableCell>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"TableRowTemplate.js","sourceRoot":"","sources":["../src/TableRowTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import TableCell from \"./TableCell.js\";\nimport CheckBox from \"./CheckBox.js\";\nimport RadioButton from \"./RadioButton.js\";\nimport Button from \"./Button.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport iconOverflow from \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport type TableRow from \"./TableRow.js\";\n\nexport default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {\n\treturn (\n\t\t<>\n\t\t\t{ this._hasSelector &&\n\t\t\t\t<TableCell id=\"selection-cell\"\n\t\t\t\t\taria-selected={this._isSelected}\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t\tdata-border-merged={this._firstVisibleCell?.merged ? \"\" : null}\n\t\t\t\t\tdata-ui5-table-selection-cell\n\t\t\t\t\tdata-ui5-acc-text=\"\"\n\t\t\t\t>\n\t\t\t\t\t{ this._isMultiSelect ?\n\t\t\t\t\t\t<CheckBox id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></CheckBox>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<RadioButton id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></RadioButton>\n\t\t\t\t\t}\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this.cells.flatMap(cell => {\n\t\t\t\tif (cell._popin) {\n\t\t\t\t\tcell.role = null;\n\t\t\t\t\tcell.ariaColIndex = null;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\n\t\t\t\tcell.role ??= cell.ariaRole;\n\t\t\t\tcell.ariaColIndex = (cell.role === cell.ariaRole) ? `${ariaColIndex++}` : null;\n\t\t\t\treturn [<slot name={cell._individualSlot}></slot>];\n\t\t\t})}\n\n\t\t\t{ this._renderDummyCell && this._hasPopin &&\n\t\t\t\t<TableCell id=\"dummy-cell\" role=\"none\" aria-hidden={true} data-border-merged=\"\"\n\t\t\t\t\tdata-excluded-from-navigation=\"\">\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._rowActionCount > 0 &&\n\t\t\t\t<TableCell id=\"actions-cell\"\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t\tdata-ui5-acc-text={this._actionCellAccText}\n\t\t\t\t>\n\t\t\t\t\t{ this._flexibleActions.map(action => (\n\t\t\t\t\t\t<slot name={action._individualSlot}></slot>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{ this._hasOverflowActions &&\n\t\t\t\t\t\t<Button id=\"overflow\"\n\t\t\t\t\t\t\ticon={iconOverflow}\n\t\t\t\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\t\t\t\ttooltip={this._overflowButtonTooltip}\n\t\t\t\t\t\t\tonClick={this._onOverflowButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t}\n\n\t\t\t\t\t{ this._fixedActions.map(action => (\n\t\t\t\t\t\t<slot name={action._individualSlot}></slot>\n\t\t\t\t\t))}\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._renderNavigated &&\n\t\t\t\t<TableCell id=\"navigated-cell\"\n\t\t\t\t\tdata-excluded-from-navigation\n\t\t\t\t\taria-hidden={true}\n\t\t\t\t\trole=\"none\"\n\t\t\t\t>\n\t\t\t\t\t<div id=\"navigated\"></div>\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._renderDummyCell && !this._hasPopin &&\n\t\t\t\t<TableCell id=\"dummy-cell\" role=\"none\" aria-hidden={true} data-border-merged=\"\"\n\t\t\t\t\tdata-excluded-from-navigation=\"nofocus\">\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._hasPopin &&\n\t\t\t\t<TableCell id=\"popin-cell\"\n\t\t\t\t\tdata-ui5-table-popin-cell\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t>\n\t\t\t\t\t{ this._popinCells.map(cell => (\n\t\t\t\t\t\t<slot name={cell._individualSlot}></slot>\n\t\t\t\t\t))}\n\t\t\t\t</TableCell>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}

package/dist/TableUtils.d.ts

@@ -4,8 +4,9 @@ declare const isInstanceOfTable: (object: any) => object is Table;
 declare const isSelectionCell: (e: Event) => boolean;
 declare const isHeaderSelectionCell: (e: Event) => boolean;
 declare const findRowInPath: (composedPath: Array<EventTarget>) => TableRow;
-declare const findVerticalScrollContainer: (element: HTMLElement) => HTMLElement;
-declare const scrollElementIntoView: (scrollContainer: HTMLElement, element: HTMLElement, stickyElements: HTMLElement[], isRtl: boolean) => void;
+declare const findVerticalScrollContainer: (element: HTMLElement, requireOverflow?: boolean) => HTMLElement;
+type Axis = "x" | "y";
+declare const computeAxisScrollDelta: (element: HTMLElement, scrollContainer: HTMLElement, stickyElements: HTMLElement[], axis: Axis) => number;
 declare const isFeature: <T>(element: any, identifier: string) => element is T;
 declare const throttle: (callback: () => void) => () => void;
 declare const toggleAttribute: (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => void;
@@ -16,4 +17,4 @@ declare const toggleAttribute: (element: HTMLElement, attribute: string, conditi
  * @returns {boolean} true if the width is valid, false otherwise
  */
 declare const isValidColumnWidth: (width: string | undefined) => width is string;
-export { isInstanceOfTable, isSelectionCell, isHeaderSelectionCell, findRowInPath, findVerticalScrollContainer, scrollElementIntoView, isFeature, throttle, toggleAttribute, isValidColumnWidth, };
+export { isInstanceOfTable, isSelectionCell, isHeaderSelectionCell, findRowInPath, findVerticalScrollContainer, computeAxisScrollDelta, isFeature, throttle, toggleAttribute, isValidColumnWidth, };

package/dist/TableUtils.js

@@ -9,10 +9,10 @@ const isHeaderSelectionCell = (e) => {
 const findRowInPath = (composedPath) => {
     return composedPath.find((el) => el instanceof HTMLElement && el.hasAttribute("ui5-table-row"));
 };
-const findVerticalScrollContainer = (element) => {
+const findVerticalScrollContainer = (element, requireOverflow = false) => {
     while (element) {
         const { overflowY } = window.getComputedStyle(element);
-        if (overflowY === "auto" || overflowY === "scroll") {
+        if ((overflowY === "auto" || overflowY === "scroll") && (!requireOverflow || element.scrollHeight > element.clientHeight)) {
             return element;
         }
         if (element.parentNode instanceof ShadowRoot) {
@@ -24,38 +24,47 @@ const findVerticalScrollContainer = (element) => {
     }
     return document.scrollingElement || document.documentElement;
 };
-const scrollElementIntoView = (scrollContainer, element, stickyElements, isRtl) => {
-    if (stickyElements.length === 0) {
-        return;
-    }
+const AXIS_PROPS = {
+    x: { start: "left", end: "right", size: "width" },
+    y: { start: "top", end: "bottom", size: "height" },
+};
+// Computes the scroll delta needed to bring an element into view within a scroll container, considering sticky elements that may be in the way
+const computeAxisScrollDelta = (element, scrollContainer, stickyElements, axis) => {
+    const { start, end, size } = AXIS_PROPS[axis];
     const elementRect = element.getBoundingClientRect();
-    const inline = isRtl ? "right" : "left";
-    const { x: stickyX, y: stickyY } = stickyElements.reduce(({ x, y }, stickyElement) => {
-        const { top, [inline]: inlineStart } = getComputedStyle(stickyElement);
-        const stickyElementRect = stickyElement.getBoundingClientRect();
-        if (top !== "auto" && stickyElementRect.bottom > elementRect.top) {
-            y = Math.max(y, stickyElementRect.bottom);
+    const scrollContainerRect = scrollContainer.getBoundingClientRect();
+    let pinStart = 0;
+    let pinEnd = 0;
+    stickyElements.forEach(sticky => {
+        if (sticky === element || sticky.contains(element)) {
+            return;
         }
-        if (inlineStart !== "auto") {
-            if (!isRtl && stickyElementRect.right > elementRect.left) {
-                x = Math.max(x, stickyElementRect.right);
-            }
-            else if (isRtl && stickyElementRect.left < elementRect.right) {
-                x = Math.min(x, stickyElementRect.left);
-            }
+        const stickyStyle = getComputedStyle(sticky);
+        const stickyRect = sticky.getBoundingClientRect();
+        if (stickyStyle[start] !== "auto") {
+            pinStart = Math.max(pinStart, stickyRect[end] - scrollContainerRect[start]);
+        }
+        if (stickyStyle[end] !== "auto") {
+            pinEnd = Math.max(pinEnd, scrollContainerRect[end] - stickyRect[start]);
         }
-        return { x, y };
-    }, { x: elementRect[inline], y: elementRect.top });
-    const scrollX = elementRect[inline] - stickyX;
-    const scrollY = elementRect.top - stickyY;
-    if (scrollX === 0 && scrollY === 0) {
-        // avoid unnecessary scroll call, when nothing changes
-        return;
-    }
-    scrollContainer.scrollBy({
-        top: scrollY,
-        left: scrollX,
     });
+    const viewportStart = scrollContainerRect[start] + pinStart;
+    const viewportEnd = scrollContainerRect[end] - pinEnd;
+    // Element already spans the whole container
+    if (elementRect[start] <= scrollContainerRect[start] && elementRect[end] >= scrollContainerRect[end]) {
+        return 0;
+    }
+    // Element larger than the visible viewport
+    if (elementRect[size] > viewportEnd - viewportStart) {
+        return (axis === "x" && element.matches(":dir(rtl)")) ? elementRect[end] - viewportEnd : elementRect[start] - viewportStart;
+    }
+    if (elementRect[start] < viewportStart) {
+        return elementRect[start] - viewportStart;
+    }
+    if (elementRect[end] > viewportEnd) {
+        return elementRect[end] - viewportEnd;
+    }
+    return 0;
 };
 const isFeature = (element, identifier) => {
     return element.identifier === identifier;
@@ -93,5 +102,5 @@ const isValidColumnWidth = (width) => {
     element.style.width = `max(3rem, ${width})`;
     return element.style.width !== "";
 };
-export { isInstanceOfTable, isSelectionCell, isHeaderSelectionCell, findRowInPath, findVerticalScrollContainer, scrollElementIntoView, isFeature, throttle, toggleAttribute, isValidColumnWidth, };
+export { isInstanceOfTable, isSelectionCell, isHeaderSelectionCell, findRowInPath, findVerticalScrollContainer, computeAxisScrollDelta, isFeature, throttle, toggleAttribute, isValidColumnWidth, };
 //# sourceMappingURL=TableUtils.js.map

package/dist/TableUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableUtils.js","sourceRoot":"","sources":["../src/TableUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import createInstanceChecker from \"@ui5/webcomponents-base/dist/util/createInstanceChecker.js\";\nimport type Table from \"./Table.js\";\nimport type TableRow from \"./TableRow.js\";\n\nconst isInstanceOfTable = createInstanceChecker<Table>(\"isTable\");\n\nconst isSelectionCell = (e: Event) => {\n\treturn e.composedPath().some((el: EventTarget) => (el as HTMLElement).hasAttribute?.(\"data-ui5-table-selection-cell\"));\n};\n\nconst isHeaderSelectionCell = (e: Event) => {\n\treturn isSelectionCell(e) && e.composedPath().some((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute(\"ui5-table-header-row\"));\n};\n\nconst findRowInPath = (composedPath: Array<EventTarget>) => {\n\treturn composedPath.find((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute(\"ui5-table-row\")) as TableRow;\n};\n\nconst findVerticalScrollContainer = (element: HTMLElement): HTMLElement => {\n\twhile (element) {\n\t\tconst { overflowY } = window.getComputedStyle(element);\n\t\tif (overflowY === \"auto\" || overflowY === \"scroll\") {\n\t\t\treturn element;\n\t\t}\n\n\t\tif (element.parentNode instanceof ShadowRoot) {\n\t\t\telement = element.parentNode.host as HTMLElement;\n\t\t} else {\n\t\t\telement = element.parentElement as HTMLElement;\n\t\t}\n\t}\n\n\treturn document.scrollingElement as HTMLElement || document.documentElement;\n};\n\nconst scrollElementIntoView = (scrollContainer: HTMLElement, element: HTMLElement, stickyElements: HTMLElement[], isRtl: boolean) => {\n\tif (stickyElements.length === 0) {\n\t\treturn;\n\t}\n\n\tconst elementRect = element.getBoundingClientRect();\n\tconst inline = isRtl ? \"right\" : \"left\";\n\n\tconst { x: stickyX, y: stickyY } = stickyElements.reduce(({ x, y }, stickyElement) => {\n\t\tconst { top, [inline]: inlineStart } = getComputedStyle(stickyElement);\n\t\tconst stickyElementRect = stickyElement.getBoundingClientRect();\n\t\tif (top !== \"auto\" && stickyElementRect.bottom > elementRect.top) {\n\t\t\ty = Math.max(y, stickyElementRect.bottom);\n\t\t}\n\t\tif (inlineStart !== \"auto\") {\n\t\t\tif (!isRtl && stickyElementRect.right > elementRect.left) {\n\t\t\t\tx = Math.max(x, stickyElementRect.right);\n\t\t\t} else if (isRtl && stickyElementRect.left < elementRect.right) {\n\t\t\t\tx = Math.min(x, stickyElementRect.left);\n\t\t\t}\n\t\t}\n\n\t\treturn { x, y };\n\t}, { x: elementRect[inline], y: elementRect.top });\n\n\tconst scrollX = elementRect[inline] - stickyX;\n\tconst scrollY = elementRect.top - stickyY;\n\n\tif (scrollX === 0 && scrollY === 0) {\n\t\t// avoid unnecessary scroll call, when nothing changes\n\t\treturn;\n\t}\n\n\tscrollContainer.scrollBy({\n\t\ttop: scrollY,\n\t\tleft: scrollX,\n\t});\n};\n\nconst isFeature = <T>(element: any, identifier: string): element is T => {\n\treturn element.identifier === identifier;\n};\n\nconst throttle = (callback: () => void) => {\n\tlet timer: number;\n\treturn () => {\n\t\tcancelAnimationFrame(timer);\n\t\ttimer = requestAnimationFrame(() => {\n\t\t\tcallback();\n\t\t});\n\t};\n};\n\nconst toggleAttribute = (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => {\n\tif (condition) {\n\t\tif (value === undefined) {\n\t\t\telement.toggleAttribute(attribute, true);\n\t\t} else {\n\t\t\telement.setAttribute(attribute, value);\n\t\t}\n\t} else if (element.hasAttribute(attribute)) {\n\t\telement.removeAttribute(attribute);\n\t}\n};\n\n/**\n * Checks if a given width is valid for a column.\n *\n * @param width Width string to check\n * @returns {boolean} true if the width is valid, false otherwise\n */\nconst isValidColumnWidth = (width: string | undefined): width is string => {\n\tconst element = document.createElement(\"div\");\n\telement.style.width = `max(3rem, ${width})`;\n\treturn element.style.width !== \"\";\n};\n\nexport {\n\tisInstanceOfTable,\n\tisSelectionCell,\n\tisHeaderSelectionCell,\n\tfindRowInPath,\n\tfindVerticalScrollContainer,\n\tscrollElementIntoView,\n\tisFeature,\n\tthrottle,\n\ttoggleAttribute,\n\tisValidColumnWidth,\n};\n"]}
+{"version":3,"file":"TableUtils.js","sourceRoot":"","sources":["../src/TableUtils.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,4DAA4D,CAAC;AAI/F,MAAM,iBAAiB,GAAG,qBAAqB,CAAQ,SAAS,CAAC,CAAC;AAElE,MAAM,eAAe,GAAG,CAAC,CAAQ,EAAE,EAAE;IACpC,OAAO,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAE,EAAkB,CAAC,YAAY,EAAE,CAAC,+BAA+B,CAAC,CAAC,CAAC;AACxH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,CAAQ,EAAE,EAAE;IAC1C,OAAO,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC;AAC/I,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,YAAgC,EAAE,EAAE;IAC1D,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAa,CAAC;AAC1H,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,OAAoB,EAAE,eAAe,GAAG,KAAK,EAAe,EAAE;IAClG,OAAO,OAAO,EAAE,CAAC;QAChB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,eAAe,IAAI,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;YAC3H,OAAO,OAAO,CAAC;QAChB,CAAC;QAED,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,EAAE,CAAC;YAC9C,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,IAAmB,CAAC;QAClD,CAAC;aAAM,CAAC;YACP,OAAO,GAAG,OAAO,CAAC,aAA4B,CAAC;QAChD,CAAC;IACF,CAAC;IAED,OAAO,QAAQ,CAAC,gBAA+B,IAAI,QAAQ,CAAC,eAAe,CAAC;AAC7E,CAAC,CAAC;AAIF,MAAM,UAAU,GAAG;IAClB,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;IACjD,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzC,CAAC;AAEX,+IAA+I;AAC/I,MAAM,sBAAsB,GAAG,CAC9B,OAAoB,EACpB,eAA4B,EAC5B,cAA6B,EAC7B,IAAU,EACD,EAAE;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACpD,MAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;IAEpE,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC/B,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YACpD,OAAO;QACR,CAAC;QAED,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC7C,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAClD,IAAI,WAAW,CAAC,KAAK,CAAC,KAAK,MAAM,EAAE,CAAC;YACnC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7E,CAAC;QACD,IAAI,WAAW,CAAC,GAAG,CAAC,KAAK,MAAM,EAAE,CAAC;YACjC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;QACzE,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IAC5D,MAAM,WAAW,GAAG,mBAAmB,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAEtD,4CAA4C;IAC5C,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,mBAAmB,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC;QACtG,OAAO,CAAC,CAAC;IACV,CAAC;IACD,2CAA2C;IAC3C,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,WAAW,GAAG,aAAa,EAAE,CAAC;QACrD,OAAO,CAAC,IAAI,KAAK,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC;IAC7H,CAAC;IACD,IAAI,WAAW,CAAC,KAAK,CAAC,GAAG,aAAa,EAAE,CAAC;QACxC,OAAO,WAAW,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC;IAC3C,CAAC;IACD,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,EAAE,CAAC;QACpC,OAAO,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;IACvC,CAAC;IACD,OAAO,CAAC,CAAC;AACV,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAI,OAAY,EAAE,UAAkB,EAAgB,EAAE;IACvE,OAAO,OAAO,CAAC,UAAU,KAAK,UAAU,CAAC;AAC1C,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,QAAoB,EAAE,EAAE;IACzC,IAAI,KAAa,CAAC;IAClB,OAAO,GAAG,EAAE;QACX,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC5B,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YAClC,QAAQ,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,OAAoB,EAAE,SAAiB,EAAE,SAA8B,EAAE,KAAc,EAAE,EAAE;IACnH,IAAI,SAAS,EAAE,CAAC;QACf,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACxC,CAAC;IACF,CAAC;SAAM,IAAI,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5C,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC;AACF,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG,CAAC,KAAyB,EAAmB,EAAE;IACzE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,aAAa,KAAK,GAAG,CAAC;IAC5C,OAAO,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,sBAAsB,EACtB,SAAS,EACT,QAAQ,EACR,eAAe,EACf,kBAAkB,GAClB,CAAC","sourcesContent":["import createInstanceChecker from \"@ui5/webcomponents-base/dist/util/createInstanceChecker.js\";\nimport type Table from \"./Table.js\";\nimport type TableRow from \"./TableRow.js\";\n\nconst isInstanceOfTable = createInstanceChecker<Table>(\"isTable\");\n\nconst isSelectionCell = (e: Event) => {\n\treturn e.composedPath().some((el: EventTarget) => (el as HTMLElement).hasAttribute?.(\"data-ui5-table-selection-cell\"));\n};\n\nconst isHeaderSelectionCell = (e: Event) => {\n\treturn isSelectionCell(e) && e.composedPath().some((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute(\"ui5-table-header-row\"));\n};\n\nconst findRowInPath = (composedPath: Array<EventTarget>) => {\n\treturn composedPath.find((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute(\"ui5-table-row\")) as TableRow;\n};\n\nconst findVerticalScrollContainer = (element: HTMLElement, requireOverflow = false): HTMLElement => {\n\twhile (element) {\n\t\tconst { overflowY } = window.getComputedStyle(element);\n\t\tif ((overflowY === \"auto\" || overflowY === \"scroll\") && (!requireOverflow || element.scrollHeight > element.clientHeight)) {\n\t\t\treturn element;\n\t\t}\n\n\t\tif (element.parentNode instanceof ShadowRoot) {\n\t\t\telement = element.parentNode.host as HTMLElement;\n\t\t} else {\n\t\t\telement = element.parentElement as HTMLElement;\n\t\t}\n\t}\n\n\treturn document.scrollingElement as HTMLElement || document.documentElement;\n};\n\ntype Axis = \"x\" | \"y\";\n\nconst AXIS_PROPS = {\n\tx: { start: \"left\", end: \"right\", size: \"width\" },\n\ty: { start: \"top\", end: \"bottom\", size: \"height\" },\n} as const;\n\n// Computes the scroll delta needed to bring an element into view within a scroll container, considering sticky elements that may be in the way\nconst computeAxisScrollDelta = (\n\telement: HTMLElement,\n\tscrollContainer: HTMLElement,\n\tstickyElements: HTMLElement[],\n\taxis: Axis,\n): number => {\n\tconst { start, end, size } = AXIS_PROPS[axis];\n\tconst elementRect = element.getBoundingClientRect();\n\tconst scrollContainerRect = scrollContainer.getBoundingClientRect();\n\n\tlet pinStart = 0;\n\tlet pinEnd = 0;\n\tstickyElements.forEach(sticky => {\n\t\tif (sticky === element || sticky.contains(element)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst stickyStyle = getComputedStyle(sticky);\n\t\tconst stickyRect = sticky.getBoundingClientRect();\n\t\tif (stickyStyle[start] !== \"auto\") {\n\t\t\tpinStart = Math.max(pinStart, stickyRect[end] - scrollContainerRect[start]);\n\t\t}\n\t\tif (stickyStyle[end] !== \"auto\") {\n\t\t\tpinEnd = Math.max(pinEnd, scrollContainerRect[end] - stickyRect[start]);\n\t\t}\n\t});\n\n\tconst viewportStart = scrollContainerRect[start] + pinStart;\n\tconst viewportEnd = scrollContainerRect[end] - pinEnd;\n\n\t// Element already spans the whole container\n\tif (elementRect[start] <= scrollContainerRect[start] && elementRect[end] >= scrollContainerRect[end]) {\n\t\treturn 0;\n\t}\n\t// Element larger than the visible viewport\n\tif (elementRect[size] > viewportEnd - viewportStart) {\n\t\treturn (axis === \"x\" && element.matches(\":dir(rtl)\")) ? elementRect[end] - viewportEnd : elementRect[start] - viewportStart;\n\t}\n\tif (elementRect[start] < viewportStart) {\n\t\treturn elementRect[start] - viewportStart;\n\t}\n\tif (elementRect[end] > viewportEnd) {\n\t\treturn elementRect[end] - viewportEnd;\n\t}\n\treturn 0;\n};\n\nconst isFeature = <T>(element: any, identifier: string): element is T => {\n\treturn element.identifier === identifier;\n};\n\nconst throttle = (callback: () => void) => {\n\tlet timer: number;\n\treturn () => {\n\t\tcancelAnimationFrame(timer);\n\t\ttimer = requestAnimationFrame(() => {\n\t\t\tcallback();\n\t\t});\n\t};\n};\n\nconst toggleAttribute = (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => {\n\tif (condition) {\n\t\tif (value === undefined) {\n\t\t\telement.toggleAttribute(attribute, true);\n\t\t} else {\n\t\t\telement.setAttribute(attribute, value);\n\t\t}\n\t} else if (element.hasAttribute(attribute)) {\n\t\telement.removeAttribute(attribute);\n\t}\n};\n\n/**\n * Checks if a given width is valid for a column.\n *\n * @param width Width string to check\n * @returns {boolean} true if the width is valid, false otherwise\n */\nconst isValidColumnWidth = (width: string | undefined): width is string => {\n\tconst element = document.createElement(\"div\");\n\telement.style.width = `max(3rem, ${width})`;\n\treturn element.style.width !== \"\";\n};\n\nexport {\n\tisInstanceOfTable,\n\tisSelectionCell,\n\tisHeaderSelectionCell,\n\tfindRowInPath,\n\tfindVerticalScrollContainer,\n\tcomputeAxisScrollDelta,\n\tisFeature,\n\tthrottle,\n\ttoggleAttribute,\n\tisValidColumnWidth,\n};\n"]}

package/dist/Tokenizer.js

@@ -861,22 +861,37 @@ let Tokenizer = Tokenizer_1 = class Tokenizer extends UI5Element {
             return [];
         }
         const tokensArray = this._tokens;
-        // Reset the overflow prop of the tokens first in order
-        // to use their dimensions for calculation because already
-        // hidden tokens are set to 'display: none'
+        // Reset overflow to measure all tokens
         tokensArray.forEach(token => {
             token.overflows = false;
         });
-        return tokensArray.filter(token => {
-            const parentRect = this.contentDom.getBoundingClientRect();
+        const parentRect = this.contentDom.getBoundingClientRect();
+        const parentEnd = Number(parentRect.right.toFixed(2));
+        const parentStart = Number(parentRect.left.toFixed(2));
+        // Measure "n more" width
+        let nMoreWidth = 0;
+        const nMoreElement = this.moreLink;
+        if (nMoreElement) {
+            nMoreWidth = nMoreElement.getBoundingClientRect().width;
+        }
+        // Calculate overflow sequentially: show tokens only if token + "n more" indicator both fit
+        let firstOverflowIndex = -1;
+        tokensArray.forEach((token, index) => {
             const tokenRect = token.getBoundingClientRect();
             const tokenEnd = Number(tokenRect.right.toFixed(2));
-            const parentEnd = Number(parentRect.right.toFixed(2));
             const tokenStart = Number(tokenRect.left.toFixed(2));
-            const parentStart = Number(parentRect.left.toFixed(2));
-            token.overflows = !this.expanded && ((tokenStart < parentStart) || (tokenEnd > parentEnd));
-            return token.overflows;
+            const isLastToken = index === tokensArray.length - 1;
+            // For the last token, check if it fits without "n more"
+            // For other tokens, check if token + "n more" fits together
+            const effectiveParentEnd = isLastToken ? parentEnd : Number((parentRect.right - nMoreWidth).toFixed(2));
+            const tokenOverflows = !this.expanded && ((tokenStart < parentStart) || (tokenEnd > effectiveParentEnd));
+            if (tokenOverflows && firstOverflowIndex === -1) {
+                firstOverflowIndex = index;
+            }
+            // Mark this and all subsequent tokens as overflow
+            token.overflows = firstOverflowIndex !== -1 && index >= firstOverflowIndex;
         });
+        return tokensArray.filter(token => token.overflows);
     }
     get _isPhone() {
         return isPhone();