@ui5/webcomponents 1.22.0 → 1.23.0-rc.0

package/dist/TabContainer.js

@@ -24,6 +24,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
 import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE, TABCONTAINER_END_OVERFLOW, TABCONTAINER_POPOVER_CANCEL_BUTTON, TABCONTAINER_SUBTABS_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
@@ -104,18 +105,18 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         });
     }
     onBeforeRendering() {
-        this._allItemsAndSubItems = this._getAllSubItems(this.items);
-        if (!this._allItemsAndSubItems.length) {
+        this._itemsFlat = this._flatten(this.items);
+        if (!this._itemsFlat.length) {
             return;
         }
         // update selected tab
-        const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
+        const selectedTabs = this._itemsFlat.filter(tab => tab.selected);
         if (selectedTabs.length) {
             this._selectedTab.forcedSelected = false;
             this._selectedTab = selectedTabs[0];
         }
         else {
-            this._selectedTab = this._allItemsAndSubItems[0];
+            this._selectedTab = this._itemsFlat[0];
             this._selectedTab.forcedSelected = true;
         }
         this._setItemsPrivateProperties(this.items);
@@ -135,6 +136,15 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             const focusStart = this._getRootTab(this._selectedTab);
             this._itemNavigation.setCurrentItem(focusStart);
         }
+        if (this.responsivePopover?.opened) {
+            const popoverItems = this._getPopoverItemsFor(this._getPopoverOwner(this.responsivePopover._opener));
+            if (popoverItems.length) {
+                this._setPopoverItems(popoverItems);
+            }
+            else {
+                this.responsivePopover.close();
+            }
+        }
     }
     onEnterDOM() {
         ResizeHandler.register(this._getHeader(), this._handleResizeBound);
@@ -160,12 +170,9 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             tab.forcedMixedMode = this.mixedMode;
             tab.forcedPosinset = index + 1;
             tab.forcedSetsize = arr.length;
-            tab.realTabReference = this._selectedTab;
             tab.isTopLevelTab = items.some(i => i === tab);
-            walk(items, _tab => {
-                _tab.realTabReference = tab.realTabReference;
-            });
         });
+        this._setIndentLevels(items);
     }
     _onHeaderFocusin(e) {
         const tab = getTab(e.target);
@@ -185,16 +192,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             return;
         }
         if (!tab.realTabReference.hasOwnContent && tab.realTabReference.tabs.length) {
-            this._overflowItems = tab.realTabReference.subTabs;
-            this._addStyleIndent(this._overflowItems);
-            this.responsivePopover = await this._respPopover();
-            if (this.responsivePopover.opened) {
-                this.responsivePopover.close();
-            }
-            else {
-                this._setPopoverInitialFocus();
-            }
-            this.responsivePopover.showAt(tab.realTabReference.getTabInStripDomRef());
+            await this._togglePopover(tab);
             return;
         }
         this._onHeaderItemSelect(tab);
@@ -202,30 +200,27 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     async _onTabExpandButtonClick(e) {
         e.stopPropagation();
         e.preventDefault();
-        let button = e.target;
-        let tabInstance = button.tab;
+        let tabInstance;
+        if (isTabInStrip(e.target)) {
+            tabInstance = e.target;
+        }
+        else {
+            tabInstance = e.target.tab;
+        }
+        let opener = e.target;
         if (tabInstance) {
             tabInstance.focus();
         }
         if (e.type === "keydown" && !e.target.realTabReference.isSingleClickArea) {
-            button = e.target.querySelectorAll(".ui5-tab-expand-button")[0];
+            opener = e.target.querySelector(".ui5-tab-expand-button [ui5-button]");
             tabInstance = e.target.realTabReference;
         }
         // if clicked between the expand button and the tab
         if (!tabInstance) {
-            this._onHeaderItemSelect(button.parentElement);
+            this._onHeaderItemSelect(opener.parentElement);
             return;
         }
-        this._overflowItems = tabInstance.subTabs;
-        this._addStyleIndent(this._overflowItems);
-        this.responsivePopover = await this._respPopover();
-        if (this.responsivePopover.isOpen()) {
-            this.responsivePopover.close();
-        }
-        else {
-            this._setPopoverInitialFocus();
-        }
-        this.responsivePopover.showAt(button);
+        await this._togglePopover(opener, true);
     }
     _setPopoverInitialFocus() {
         const selectedTabInOverflow = this._getSelectedTabInOverflow();
@@ -313,30 +308,37 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
      * @default []
      */
     get allItems() {
-        return this._getAllSubItems(this.items);
+        return this._flatten(this.items);
     }
-    _getAllSubItems(items, result = [], level = 1) {
+    _setIndentLevels(items, level = 1) {
         items.forEach(item => {
             if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
                 item.forcedLevel = level;
-                result.push(item);
                 if (item.subTabs) {
-                    this._getAllSubItems(item.subTabs, result, level + 1);
+                    this._setIndentLevels(item.subTabs, level + 1);
                 }
             }
         });
+    }
+    _flatten(items) {
+        const result = [];
+        walk(items, item => {
+            if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
+                result.push(item);
+            }
+        });
         return result;
     }
     _onItemSelect(selectedTabId) {
         const previousTab = this._selectedTab;
-        const selectedTabIndex = this._allItemsAndSubItems.findIndex(item => item.__id === selectedTabId);
-        const selectedTab = this._allItemsAndSubItems[selectedTabIndex];
+        const selectedTabIndex = this._itemsFlat.findIndex(item => item.__id === selectedTabId);
+        const selectedTab = this._itemsFlat[selectedTabIndex];
         const selectionSuccessful = this.selectTab(selectedTab, selectedTabIndex);
         if (!selectionSuccessful) {
             return;
         }
         // update selected property on all items
-        this._allItemsAndSubItems.forEach((item, index) => {
+        this._itemsFlat.forEach((item, index) => {
             const selected = selectedTabIndex === index;
             item.selected = selected;
             if (item.forcedSelected) {
@@ -409,12 +411,6 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
         const overflow = e.currentTarget;
         const isEndOverflow = overflow.classList.contains("ui5-tc__overflow--end");
-        const overflowAttr = isEndOverflow ? "end-overflow" : "start-overflow";
-        this._overflowItems = this.items.filter(item => {
-            const stripRef = item.getTabInStripDomRef();
-            return stripRef && stripRef.hasAttribute(overflowAttr);
-        });
-        this._addStyleIndent(this._overflowItems);
         let opener;
         if (isEndOverflow) {
             opener = this.overflowButton[0] || this._getEndOverflowBtnDOM();
@@ -422,25 +418,18 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         else {
             opener = this.startOverflowButton[0] || this._getStartOverflowBtnDOM();
         }
-        this.responsivePopover = await this._respPopover();
-        if (this.responsivePopover.opened) {
-            this.responsivePopover.close();
-        }
-        else {
-            this._setPopoverInitialFocus();
-            this.responsivePopover.showAt(opener);
-        }
+        await this._togglePopover(opener, true);
     }
-    _addStyleIndent(tabs) {
-        const extraIndent = this._getAllSubItems(tabs)
+    _addStyleIndent(itemsFlat) {
+        const extraIndent = itemsFlat
             .filter(tab => !tab.isSeparator)
             .some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral);
-        walk(tabs, tab => {
-            let level = tab.forcedLevel - 1;
-            if (tab.isSeparator) {
+        itemsFlat.forEach(item => {
+            let level = item.forcedLevel - 1;
+            if (item.isSeparator) {
                 level += 1;
             }
-            tab.forcedStyle = {
+            item.forcedStyle = {
                 [getScopedVarName("--_ui5-tab-indentation-level")]: level,
                 [getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null,
             };
@@ -702,6 +691,63 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _getTabs() {
         return this.items.filter((item) => !item.isSeparator);
     }
+    _getPopoverOwner(opener) {
+        if (opener === this._getStartOverflowBtnDOM() || opener.slot === "startOverflowButton") {
+            return "start-overflow";
+        }
+        if (opener === this._getEndOverflowBtnDOM() || opener.slot === "overflowButton") {
+            return "end-overflow";
+        }
+        if (opener instanceof Button) {
+            return opener.tab;
+        }
+        return opener;
+    }
+    _getPopoverItemsFor(targetOwner) {
+        if (targetOwner === "start-overflow") {
+            return this.items.filter(item => {
+                const stripRef = item.getTabInStripDomRef();
+                return stripRef && stripRef.hasAttribute("start-overflow");
+            });
+        }
+        if (targetOwner === "end-overflow") {
+            return this.items.filter(item => {
+                const stripRef = item.getTabInStripDomRef();
+                return stripRef && stripRef.hasAttribute("end-overflow");
+            });
+        }
+        if (isTabInStrip(targetOwner)) {
+            return targetOwner.realTabReference.subTabs;
+        }
+        return targetOwner.subTabs;
+    }
+    _setPopoverItems(items) {
+        const newItemsFlat = this._flatten(items);
+        if (!arraysAreEqual(this._popoverItemsFlat, newItemsFlat)) {
+            this._popoverItemsFlat = newItemsFlat;
+            this._addStyleIndent(this._popoverItemsFlat);
+        }
+    }
+    async _togglePopover(opener, setInitialFocus = false) {
+        this.responsivePopover = await this._respPopover();
+        if (this.responsivePopover.isOpen()) {
+            this.responsivePopover.close();
+        }
+        else {
+            this._showPopoverAt(opener, setInitialFocus);
+        }
+    }
+    async _showPopoverAt(opener, setInitialFocus = false) {
+        this._setPopoverItems(this._getPopoverItemsFor(this._getPopoverOwner(opener)));
+        this.responsivePopover = await this._respPopover();
+        if (this.responsivePopover.isOpen() && this.responsivePopover._opener !== opener) {
+            this.responsivePopover.close();
+        }
+        if (setInitialFocus) {
+            this._setPopoverInitialFocus();
+        }
+        this.responsivePopover.showAt(opener);
+    }
     get hasSubTabs() {
         const tabs = this._getTabs();
         for (let i = 0; i < tabs.length; i++) {
@@ -844,7 +890,7 @@ __decorate([
 ], TabContainer.prototype, "_endOverflowText", void 0);
 __decorate([
     property({ type: Object, multiple: true })
-], TabContainer.prototype, "_overflowItems", void 0);
+], TabContainer.prototype, "_popoverItemsFlat", void 0);
 __decorate([
     property({ validator: Integer, noAttribute: true })
 ], TabContainer.prototype, "_width", void 0);
@@ -855,7 +901,7 @@ __decorate([
         individualSlots: true,
         invalidateOnChildChange: {
             properties: true,
-            slots: false,
+            slots: true,
         },
     })
 ], TabContainer.prototype, "items", void 0);
@@ -904,10 +950,10 @@ TabContainer = TabContainer_1 = __decorate([
         },
     })
 ], TabContainer);
-const isTabDiv = (el) => el.localName === "div" && el.getAttribute("role") === "tab";
+const isTabInStrip = (el) => el.localName === "div" && el.getAttribute("role") === "tab";
 const getTab = (el) => {
     while (el) {
-        if (isTabDiv(el)) {
+        if (isTabInStrip(el)) {
             return el;
         }
         el = el.parentElement;