@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/TabContainer.js

@@ -16,98 +16,87 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter, isDown, isRight, isLeft, isUp, } from "@ui5/webcomponents-base/dist/Keys.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 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 findClosestPosition from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
+import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
+import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
+import longDragOverHandler from "@ui5/webcomponents-base/dist/util/dragAndDrop/longDragOverHandler.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.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";
 import List from "./List.js";
+import DropIndicator from "./DropIndicator.js";
+import CustomListItem from "./CustomListItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 import SemanticColor from "./types/SemanticColor.js";
-import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
+import BackgroundDesign from "./types/BackgroundDesign.js";
 import TabLayout from "./types/TabLayout.js";
-import TabsOverflowMode from "./types/TabsOverflowMode.js";
+import OverflowMode from "./types/OverflowMode.js";
 // Templates
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
-import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopoverTemplate.lit.js";
 // Styles
 import tabContainerCss from "./generated/themes/TabContainer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 const tabStyles = [];
-const staticAreaTabStyles = [];
 const PAGE_UP_DOWN_SIZE = 5;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-tabcontainer</code> represents a collection of tabs with associated content.
+ * The `ui5-tabcontainer` represents a collection of tabs with associated content.
  * Navigation through the tabs changes the content display of the currently active content area.
  * A tab can be labeled with text only, or icons with text.
  *
- * <h3>Structure</h3>
+ * ### Structure
  *
- * The <code>ui5-tabcontainer</code> can hold two types of entities:
- * <ul>
- * <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li>
- * <li><code>ui5-tab-separator</code> - used to separate tabs with a line</li>
- * </ul>
+ * The `ui5-tabcontainer` can hold two types of entities:
  *
- * <h3>Hierarchies</h3>
+ * - `ui5-tab` - contains all the information on an item (text and icon)
+ * - `ui5-tab-separator` - used to separate tabs with a line
+ *
+ * ### Hierarchies
  * Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations
  * to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split
  * to allow the user to display the content or alternatively to expand / collapse the list of sub tabs.
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-tabcontainer</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>tabstrip - Used to style the tabstrip of the component</li>
- * <li>content - Used to style the content of the component</li>
- * </ul>
- *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <h3>ES6 Module Import</h3>
+ * ### ES6 Module Import
  *
- * <code>import "@ui5/webcomponents/dist/TabContainer";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/Tab";</code> (for <code>ui5-tab</code>)
- * <br>
- * <code>import "@ui5/webcomponents/dist/TabSeparator";</code> (for <code>ui5-tab-separator</code>)
+ * `import "@ui5/webcomponents/dist/TabContainer.js";`
  *
+ * `import "@ui5/webcomponents/dist/Tab.js";` (for `ui5-tab`)
+ *
+ * `import "@ui5/webcomponents/dist/TabSeparator.js";` (for `ui5-tab-separator`)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.TabContainer
- * @extends sap.ui.webc.base.UI5Element
- * @appenddocs sap.ui.webc.main.Tab sap.ui.webc.main.TabSeparator
- * @tagname ui5-tabcontainer
+ * @extends UI5Element
  * @public
+ * @csspart content - Used to style the content of the component
+ * @csspart tabstrip - Used to style the tabstrip of the component
  */
 let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     static registerTabStyles(styles) {
         tabStyles.push(styles);
     }
-    static registerStaticAreaTabStyles(styles) {
-        staticAreaTabStyles.push(styles);
-    }
     constructor() {
         super();
+        this._hasScheduledPopoverOpen = false;
         this._handleResizeBound = this._handleResize.bind(this);
         // Init ItemNavigation
         this._itemNavigation = new ItemNavigation(this, {
@@ -116,27 +105,27 @@ 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);
-        if (selectedTabs.length) {
-            this._selectedTab._selected = false;
-            this._selectedTab = selectedTabs[0];
+        const selectedTab = this._itemsFlat.find((tab) => !tab.isSeparator && tab.selected);
+        if (selectedTab) {
+            this._selectedTab = selectedTab;
         }
         else {
-            this._selectedTab = this._allItemsAndSubItems[0];
-            this._selectedTab._selected = true;
+            this._selectedTab = this._itemsFlat[0];
         }
-        this._setItemsPrivateProperties(this.items);
+        walk(this.items, item => {
+            if (!item.isSeparator) {
+                item._selectedTabReference = this._selectedTab;
+            }
+        });
+        this._sendStripPresentationInfos(this.items);
         if (!this._animationRunning) {
             this._contentCollapsed = this.collapsed;
         }
-        if (this.showOverflow) {
-            console.warn(`The "show-overflow" property is deprecated and will be removed in a future release.`); // eslint-disable-line
-        }
     }
     onAfterRendering() {
         if (!this.items.length) {
@@ -147,47 +136,197 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             const focusStart = this._getRootTab(this._selectedTab);
             this._itemNavigation.setCurrentItem(focusStart);
         }
+        if (this.responsivePopover?.open) {
+            const popoverItems = this._getPopoverItemsFor(this._getPopoverOwner(this.responsivePopover.opener));
+            if (popoverItems.length) {
+                this._setPopoverItems(popoverItems);
+            }
+            else {
+                this._closePopover();
+            }
+        }
     }
     onEnterDOM() {
         ResizeHandler.register(this._getHeader(), this._handleResizeBound);
+        DragRegistry.subscribe(this);
+        this._setDraggedElement = DragRegistry.addSelfManagedArea(this);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     onExitDOM() {
         ResizeHandler.deregister(this._getHeader(), this._handleResizeBound);
+        DragRegistry.unsubscribe(this);
+        DragRegistry.removeSelfManagedArea(this);
+        this._setDraggedElement = undefined;
     }
     _handleResize() {
-        if (this.responsivePopover && this.responsivePopover.opened) {
-            this.responsivePopover.close();
+        if (this.responsivePopover && this.responsivePopover.open) {
+            this._closePopover();
         }
         // invalidate
         this._width = this.offsetWidth;
+        this._updateMediaRange(this._width);
     }
-    _setItemsPrivateProperties(items) {
-        // set real dom ref to all items, then return only the tabs for further processing
-        const allTabs = items.filter(item => {
-            item._getElementInStrip = () => this.getDomRef().querySelector(`[id="${item._id}"]`);
-            return !item.isSeparator;
-        });
-        allTabs.forEach((tab, index, arr) => {
-            tab._isInline = this.tabLayout === TabLayout.Inline;
-            tab._mixedMode = this.mixedMode;
-            tab._posinset = index + 1;
-            tab._setsize = arr.length;
-            tab._realTab = this._selectedTab;
-            tab._isTopLevelTab = items.some(i => i === tab);
-            walk(items, _tab => {
-                _tab._realTab = tab._realTab;
-            });
+    _updateMediaRange(width) {
+        this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);
+    }
+    _sendStripPresentationInfos(items) {
+        const setsize = this._getTabs().length;
+        let posinset = 1;
+        items.forEach(item => {
+            let info = {
+                getElementInStrip: () => this.getDomRef().querySelector(`[id="${item._id}"]`),
+            };
+            if (!item.isSeparator) {
+                info = {
+                    ...info,
+                    isInline: this.tabLayout === TabLayout.Inline,
+                    mixedMode: this.mixedMode,
+                    posinset,
+                    setsize,
+                    isTopLevelTab: items.some(i => i === item),
+                };
+                posinset++;
+            }
+            item.receiveStripInfo(info);
         });
     }
     _onHeaderFocusin(e) {
-        const tab = getTab(e.target);
+        const tab = getTabInStrip(e.target);
         if (tab) {
-            this._itemNavigation.setCurrentItem(tab._realTab);
+            this._itemNavigation.setCurrentItem(tab.realTabReference);
+        }
+    }
+    _onDragStart(e) {
+        if (!e.dataTransfer || !(e.target instanceof HTMLElement)) {
+            return;
+        }
+        this._setDraggedElement(e.target.realTabReference);
+    }
+    _onHeaderDragEnter(e) {
+        e.preventDefault();
+    }
+    _onHeaderDragOver(e, isLongDragOver) {
+        if (!(e.target instanceof HTMLElement) || !e.target.closest("[data-ui5-stable=overflow-start],[data-ui5-stable=overflow-end],[role=tab],[role=separator]")) {
+            this.dropIndicatorDOM.targetReference = null;
+            return;
+        }
+        const draggedElement = DragRegistry.getDraggedElement();
+        const closestPosition = findClosestPosition([...this._getTabStrip().querySelectorAll(`[role="tab"]:not([hidden])`)], e.clientX, Orientation.Horizontal);
+        const overflowButton = e.target.closest("[data-ui5-stable=overflow-start],[data-ui5-stable=overflow-end]");
+        let popoverTarget = null;
+        if (overflowButton) {
+            popoverTarget = overflowButton;
+            e.preventDefault();
+        }
+        else if (closestPosition) {
+            const dropTarget = closestPosition.element.realTabReference;
+            let placements = closestPosition.placements;
+            if (dropTarget === draggedElement) {
+                placements = placements.filter(placement => placement !== MovePlacement.On);
+            }
+            const acceptedPlacement = placements.find(placement => {
+                const dragOverPrevented = !this.fireEvent("move-over", {
+                    source: {
+                        element: draggedElement,
+                    },
+                    destination: {
+                        element: dropTarget,
+                        placement,
+                    },
+                }, true);
+                if (dragOverPrevented) {
+                    e.preventDefault();
+                    this.dropIndicatorDOM.targetReference = closestPosition.element;
+                    this.dropIndicatorDOM.placement = placement;
+                    return true;
+                }
+                return false;
+            });
+            if (acceptedPlacement === MovePlacement.On && closestPosition.element.realTabReference.items.length) {
+                popoverTarget = closestPosition.element;
+            }
+            else if (!acceptedPlacement) {
+                this.dropIndicatorDOM.targetReference = null;
+            }
+        }
+        if (popoverTarget && isLongDragOver) {
+            this._showPopoverAt(popoverTarget, false, true);
+        }
+        else {
+            this._closePopover();
         }
     }
+    _onHeaderDrop(e) {
+        if (e.target === this._getStartOverflowBtnDOM() || e.target === this._getEndOverflowBtnDOM()) {
+            return;
+        }
+        e.preventDefault();
+        const draggedElement = DragRegistry.getDraggedElement();
+        this.fireEvent("move", {
+            source: {
+                element: draggedElement,
+            },
+            destination: {
+                element: this.dropIndicatorDOM.targetReference.realTabReference,
+                placement: this.dropIndicatorDOM.placement,
+            },
+        });
+        this.dropIndicatorDOM.targetReference = null;
+        draggedElement.focus();
+    }
+    _onHeaderDragLeave(e) {
+        if (e.relatedTarget instanceof Node && this.shadowRoot.contains(e.relatedTarget)) {
+            return;
+        }
+        this.dropIndicatorDOM.targetReference = null;
+    }
+    _onPopoverListMoveOver(e) {
+        const { destination } = e.detail;
+        const draggedElement = DragRegistry.getDraggedElement();
+        const dropTarget = destination.element.realTabReference;
+        if (destination.placement === MovePlacement.On && (dropTarget.isSeparator || draggedElement === dropTarget)) {
+            return;
+        }
+        if (draggedElement !== dropTarget && draggedElement.contains(dropTarget)) {
+            return;
+        }
+        const placementAccepted = !this.fireEvent("move-over", {
+            source: {
+                element: draggedElement,
+            },
+            destination: {
+                element: dropTarget,
+                placement: destination.placement,
+            },
+        }, true);
+        if (placementAccepted) {
+            e.preventDefault();
+        }
+        else {
+            this.dropIndicatorDOM.targetReference = null;
+        }
+    }
+    _onPopoverListMove(e) {
+        const { destination } = e.detail;
+        const draggedElement = DragRegistry.getDraggedElement();
+        e.preventDefault();
+        this.fireEvent("move", {
+            source: {
+                element: draggedElement,
+            },
+            destination: {
+                element: destination.element.realTabReference,
+                placement: destination.placement,
+            },
+        }, true);
+        this.dropIndicatorDOM.targetReference = null;
+        draggedElement.focus();
+    }
     async _onTabStripClick(e) {
-        const tab = getTab(e.target);
-        if (!tab || tab._realTab.disabled) {
+        const tab = getTabInStrip(e.target);
+        if (!tab || tab.realTabReference.disabled) {
             return;
         }
         e.stopPropagation();
@@ -196,17 +335,8 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             this._onTabExpandButtonClick(e);
             return;
         }
-        if (!tab._realTab._hasOwnContent && tab._realTab.tabs.length) {
-            this._overflowItems = tab._realTab.subTabs;
-            this._addStyleIndent(this._overflowItems);
-            this.responsivePopover = await this._respPopover();
-            if (this.responsivePopover.opened) {
-                this.responsivePopover.close();
-            }
-            else {
-                this._setPopoverInitialFocus();
-            }
-            this.responsivePopover.showAt(tab._realTab.getTabInStripDomRef());
+        if (!tab.realTabReference.hasOwnContent && tab.realTabReference.tabs.length) {
+            await this._togglePopover(tab);
             return;
         }
         this._onHeaderItemSelect(tab);
@@ -214,51 +344,53 @@ 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 = getTabInStrip(e.target);
+        }
         if (tabInstance) {
             tabInstance.focus();
         }
-        if (e.type === "keydown" && !e.target._realTab.isSingleClickArea) {
-            button = e.target.querySelectorAll(".ui5-tab-expand-button")[0];
-            tabInstance = e.target._realTab;
+        let opener = e.target;
+        if (e.type === "keydown" && !e.target.realTabReference.isSingleClickArea) {
+            opener = e.target.querySelector(".ui5-tab-expand-button [ui5-button]");
         }
         // 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();
         const tab = selectedTabInOverflow || this._getFirstFocusableItemInOverflow();
-        this.responsivePopover.initialFocus = `${tab._realTab._id}-li`;
+        this.responsivePopover.initialFocus = `${tab.realTabReference._id}-li`;
     }
     _getSelectedTabInOverflow() {
         return this.responsivePopover.content[0].items.find(item => {
-            return item._realTab && item._realTab.selected;
+            return item.realTabReference && item.realTabReference.selected;
         });
     }
     _getFirstFocusableItemInOverflow() {
         return this.responsivePopover.content[0].items.find(item => item.classList.contains("ui5-tab-overflow-item"));
     }
+    _findTabInOverflow(realTab) {
+        if (!this.responsivePopover.open) {
+            return undefined;
+        }
+        return this.responsivePopover.content[0].items.find(item => item.realTabReference === realTab);
+    }
     _onTabStripKeyDown(e) {
-        const tab = getTab(e.target);
-        if (!tab || tab._realTab.disabled) {
+        const tab = getTabInStrip(e.target);
+        if (!tab || tab.realTabReference.disabled) {
             return;
         }
         if (isEnter(e)) {
-            if (tab._realTab.isSingleClickArea) {
+            if (tab.realTabReference.isSingleClickArea) {
                 this._onTabStripClick(e);
             }
             else {
@@ -269,22 +401,22 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             e.preventDefault(); // prevent scrolling
         }
         if (isDown(e) || isUp(e)) {
-            if (tab._realTab.requiresExpandButton) {
+            if (tab.realTabReference.requiresExpandButton) {
                 this._onTabExpandButtonClick(e);
             }
-            if (tab._realTab.isSingleClickArea) {
+            if (tab.realTabReference.isSingleClickArea) {
                 this._onTabStripClick(e);
             }
         }
     }
     _onTabStripKeyUp(e) {
-        const tab = getTab(e.target);
-        if (!tab || tab._realTab.disabled) {
+        const tab = getTabInStrip(e.target);
+        if (!tab || tab.realTabReference.disabled) {
             return;
         }
         if (isSpace(e)) {
             e.preventDefault();
-            if (tab._realTab.isSingleClickArea) {
+            if (tab.realTabReference.isSingleClickArea) {
                 this._onTabStripClick(e);
             }
             else {
@@ -300,107 +432,51 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     async _onOverflowListItemClick(e) {
         e.preventDefault(); // cancel the item selection
         this._onItemSelect(e.detail.item.id.slice(0, -3)); // strip "-li" from end of id
-        this.responsivePopover.close();
+        this._closePopover();
         await renderFinished();
         const selectedTopLevel = this._getRootTab(this._selectedTab);
-        selectedTopLevel.getTabInStripDomRef().focus();
+        selectedTopLevel.getDomRefInStrip().focus();
     }
     /**
      * Returns all slotted tabs and their subTabs in a flattened array.
-     * The order of tabs is depth-first. For example, given the following slotted elements:
-     * <pre><code>
-     * 	&lt;ui5-tabcontainer&gt;
-     * 		&lt;ui5-tab id="First" text="First"&gt;
-     * 			...
-     * 			&lt;ui5-tab slot="subTabs" id="Nested" text="Nested"&gt;...&lt;/ui5-tab&gt;
-     * 		&lt;/ui5-tab&gt;
-     * 		&lt;ui5-tab id="Second" text="Second"&gt;...&lt;/ui5-tab&gt;
-     * 		&lt;ui5-tab-separator id="sep"&gt;&lt;/ui5-tab-separator&gt;
-     * 		&lt;ui5-tab id="Third" text="Third"&gt;...&lt;/ui5-tab&gt;
-     * 	&lt;/ui5-tabcontainer&gt;
-     * </code></pre>
-     * Calling <code>allItems</code> on this TabContainer will return the instances in the following order:
-     * <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>
+     * The order of tabs is depth-first.
+     *
      * @public
-     * @readonly
-     * @name sap.ui.webc.main.TabContainer.prototype.allItems
-     * @returns {sap.ui.webc.main.ITab[]}
+     * @default []
      */
     get allItems() {
-        return this._getAllSubItems(this.items);
+        return this._flatten(this.items);
     }
-    _getAllSubItems(items, result = [], level = 1) {
-        items.forEach(item => {
+    _flatten(items) {
+        const result = [];
+        walk(items, item => {
             if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
-                item._level = level;
                 result.push(item);
-                if (item.subTabs) {
-                    this._getAllSubItems(item.subTabs, result, level + 1);
-                }
             }
         });
         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) => {
-            const selected = selectedTabIndex === index;
-            item.selected = selected;
-            if (item._selected) {
-                item._selected = false;
+        this._itemsFlat.forEach(item => {
+            if (!item.isSeparator) {
+                item.selected = item === selectedTab;
             }
         });
-        if (this.fixed) {
-            return;
-        }
-        if (!this.shouldAnimate) {
-            this.toggle(selectedTab, previousTab);
-        }
-        else {
-            this.toggleAnimated(selectedTab, previousTab);
-        }
-    }
-    async toggleAnimated(selectedTab, previousTab) {
-        const content = this.shadowRoot.querySelector(".ui5-tc__content");
-        let animationPromise = null;
-        this._animationRunning = true;
-        if (selectedTab === previousTab) {
-            // click on already selected tab - animate both directions
-            this.collapsed = !this.collapsed;
-            animationPromise = this.collapsed ? this.slideContentUp(content) : this.slideContentDown(content);
-        }
-        else {
-            // click on new tab - animate if the content is currently collapsed
-            animationPromise = this.collapsed ? this.slideContentDown(content) : Promise.resolve();
-            this.collapsed = false;
-        }
-        await animationPromise;
-        this._contentCollapsed = this.collapsed;
-        this._animationRunning = false;
-    }
-    toggle(selectedTab, previousTab) {
-        if (selectedTab === previousTab) {
-            this.collapsed = !this.collapsed;
-        }
-        else {
-            this.collapsed = false;
-        }
     }
     /**
-     * Fires the <code>tab-select</code> event and changes the internal reference for the currently selected tab.
+     * Fires the `tab-select` event and changes the internal reference for the currently selected tab.
      * If the event is prevented, the current tab is not changed.
      * @private
-     *
-     * @param {sap.ui.webc.main.ITab} selectedTab selected tab instance
-     * @param {number} selectedTabIndex selected tab index for an array containing all tabs and sub tabs. <b>Note:</b> Use the method <code>allTabs</code> to get this array.
-     * @returns {boolean} true if the tab selection is successful, false if it was prevented
+     * @param selectedTab selected tab instance
+     * @param selectedTabIndex selected tab index for an array containing all tabs and sub tabs. **Note:** Use the method `allTabs` to get this array.
+     * @returns true if the tab selection is successful, false if it was prevented
      */
     selectTab(selectedTab, selectedTabIndex) {
         if (!this.fireEvent("tab-select", { tab: selectedTab, tabIndex: selectedTabIndex }, true)) {
@@ -423,12 +499,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();
@@ -436,28 +506,22 @@ 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)
-            .filter(tab => !tab.isSeparator)
+    _sendOverflowPresentationInfos(items) {
+        const extraIndent = items
+            .filter((item) => !item.isSeparator)
             .some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral);
-        walk(tabs, tab => {
-            let level = tab._level - 1;
-            if (tab.isSeparator) {
-                level += 1;
-            }
-            tab._style = {
-                [getScopedVarName("--_ui5-tab-indentation-level")]: level,
-                [getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null,
-            };
+        walk(items, (item, level) => {
+            item.receiveOverflowInfo({
+                getElementInOverflow: () => {
+                    return this._findTabInOverflow(item);
+                },
+                style: {
+                    [getScopedVarName("--_ui5-tab-indentation-level")]: item.isSeparator ? level + 1 : level,
+                    [getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null,
+                },
+            });
         });
     }
     async _onOverflowKeyDown(e) {
@@ -476,7 +540,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         if (!this._selectedTab) {
             return;
         }
-        const itemsDomRefs = this.items.map(item => item.getTabInStripDomRef());
+        const itemsDomRefs = this.items.map(item => item.getDomRefInStrip());
         // make sure the overflows are hidden
         this._getStartOverflow().setAttribute("hidden", "");
         this._getEndOverflow().setAttribute("hidden", "");
@@ -514,7 +578,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         // show end overflow
         this._getEndOverflow().removeAttribute("hidden");
         const selectedTab = this._getRootTab(this._selectedTab);
-        const selectedTabDomRef = selectedTab.getTabInStripDomRef();
+        const selectedTabDomRef = selectedTab.getDomRefInStrip();
         const containerWidth = this._getTabStrip().offsetWidth;
         const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
         const lastVisibleTabIndex = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
@@ -527,7 +591,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _updateStartAndEndOverflow(itemsDomRefs) {
         let containerWidth = this._getTabStrip().offsetWidth;
         const selectedTab = this._getRootTab(this._selectedTab);
-        const selectedTabDomRef = selectedTab.getTabInStripDomRef();
+        const selectedTabDomRef = selectedTab.getDomRefInStrip();
         const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
         const hasStartOverflow = this._hasStartOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
         const hasEndOverflow = this._hasEndOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
@@ -623,7 +687,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         let index = itemsDomRefs.indexOf(selectedTabDomRef);
         let width = selectedTabDomRef.offsetWidth;
         let selectedSeparator;
-        if (itemsDomRefs[index - 1] && itemsDomRefs[index - 1].isSeparator) {
+        if (itemsDomRefs[index - 1] && itemsDomRefs[index - 1].realTabReference.isSeparator) {
             selectedSeparator = itemsDomRefs[index - 1];
             width += this._getItemWidth(selectedSeparator);
         }
@@ -666,19 +730,19 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         }
         // if prev item is separator - hide it
         const prevItem = itemsDomRefs[index - 1];
-        if (prevItem && prevItem.isSeparator) {
+        if (prevItem && prevItem.realTabReference.isSeparator) {
             lastVisibleIndex -= 1;
         }
         return lastVisibleIndex;
     }
     get isModeStartAndEnd() {
-        return this.tabsOverflowMode === TabsOverflowMode.StartAndEnd;
+        return this.overflowMode === OverflowMode.StartAndEnd;
     }
     _updateOverflowCounters() {
         let startOverflowItemsCount = 0;
         let endOverflowItemsCount = 0;
         this._getTabs()
-            .map(tab => tab.getTabInStripDomRef())
+            .map(tab => tab.getDomRefInStrip())
             .forEach(tab => {
             if (tab.hasAttribute("start-overflow")) {
                 startOverflowItemsCount++;
@@ -699,7 +763,7 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
             focusableRefs.push(this.startOverflowButton[0] || this._getStartOverflowBtnDOM());
         }
         this._getTabs().forEach(tab => {
-            const ref = tab.getTabInStripDomRef();
+            const ref = tab.getDomRefInStrip();
             const focusable = ref && !ref.hasAttribute("hidden");
             if (focusable) {
                 focusableRefs.push(tab);
@@ -716,10 +780,63 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     _getTabs() {
         return this.items.filter((item) => !item.isSeparator);
     }
-    get hasSubTabs() {
+    _getPopoverOwner(opener) {
+        if (opener === this._getStartOverflowBtnDOM() || opener.slot === "startOverflowButton") {
+            return "start-overflow";
+        }
+        if (opener === this._getEndOverflowBtnDOM() || opener.slot === "overflowButton") {
+            return "end-overflow";
+        }
+        return getTabInStrip(opener);
+    }
+    _getPopoverItemsFor(targetOwner) {
+        if (targetOwner === "start-overflow") {
+            return this.items.filter(item => {
+                const stripRef = item.getDomRefInStrip();
+                return stripRef && stripRef.hasAttribute("start-overflow");
+            });
+        }
+        if (targetOwner === "end-overflow") {
+            return this.items.filter(item => {
+                const stripRef = item.getDomRefInStrip();
+                return stripRef && stripRef.hasAttribute("end-overflow");
+            });
+        }
+        return targetOwner.realTabReference.items;
+    }
+    _setPopoverItems(items) {
+        this._sendOverflowPresentationInfos(items);
+        const newItemsFlat = this._flatten(items);
+        if (!arraysAreEqual(this._popoverItemsFlat, newItemsFlat)) {
+            this._popoverItemsFlat = newItemsFlat;
+        }
+    }
+    async _togglePopover(opener, setInitialFocus = false) {
+        this.responsivePopover = await this._respPopover();
+        if (this.responsivePopover.open) {
+            this._closePopover();
+        }
+        else {
+            await this._showPopoverAt(opener, setInitialFocus);
+        }
+    }
+    async _showPopoverAt(opener, setInitialFocus = false, preventInitialFocus = false) {
+        this._hasScheduledPopoverOpen = true;
+        this._setPopoverItems(this._getPopoverItemsFor(this._getPopoverOwner(opener)));
+        this.responsivePopover = await this._respPopover();
+        if (setInitialFocus) {
+            this._setPopoverInitialFocus();
+        }
+        if (this._hasScheduledPopoverOpen) {
+            this.responsivePopover.preventInitialFocus = preventInitialFocus;
+            this.responsivePopover.opener = opener;
+            this.responsivePopover.open = true;
+        }
+    }
+    get hasItems() {
         const tabs = this._getTabs();
         for (let i = 0; i < tabs.length; i++) {
-            if (tabs[i].subTabs.length > 0) {
+            if (tabs[i].items.length > 0) {
                 return true;
             }
         }
@@ -741,12 +858,17 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         return this._getEndOverflow().querySelector("[ui5-button]");
     }
     async _respPopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
+        await renderFinished();
+        return this.shadowRoot.querySelector(`#${this._id}-overflowMenu`);
     }
-    async _closeRespPopover() {
-        this.responsivePopover = await this._respPopover();
-        this.responsivePopover.close();
+    _closePopover() {
+        this._hasScheduledPopoverOpen = false;
+        if (this.responsivePopover) {
+            this.responsivePopover.open = false;
+        }
+    }
+    get dropIndicatorDOM() {
+        return this.shadowRoot.querySelector("[ui5-drop-indicator]");
     }
     get classes() {
         return {
@@ -772,13 +894,14 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
         };
     }
     get mixedMode() {
-        return this.items.some(item => item.icon) && this.items.some(item => item.text);
+        const tabs = this._getTabs();
+        return tabs.some(item => item.icon) && tabs.some(item => item.text);
     }
     get textOnly() {
-        return this.items.every(item => !item.icon);
+        return this._getTabs().every(item => !item.icon);
     }
     get withAdditionalText() {
-        return this.items.some(item => !!item.additionalText);
+        return this._getTabs().some(item => !!item.additionalText);
     }
     get standardTabLayout() {
         return this.tabLayout === TabLayout.Standard;
@@ -807,40 +930,39 @@ let TabContainer = TabContainer_1 = class TabContainer extends UI5Element {
     get accInvisibleText() {
         return TabContainer_1.i18nBundle.getText(TABCONTAINER_SUBTABS_DESCRIPTION);
     }
-    get tablistAriaDescribedById() {
-        return this.hasSubTabs ? `${this._id}-invisibleText` : undefined;
+    get overflowBtnAccessibilityAttributes() {
+        return {
+            hasPopup: "menu",
+        };
     }
-    get shouldAnimate() {
-        return getAnimationMode() !== AnimationMode.None;
+    get tablistAriaDescribedById() {
+        return this.hasItems ? `${this._id}-invisibleText` : undefined;
     }
     static async onDefine() {
         TabContainer_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 };
-__decorate([
-    property({ type: Boolean })
-], TabContainer.prototype, "fixed", void 0);
 __decorate([
     property({ type: Boolean })
 ], TabContainer.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Boolean })
-], TabContainer.prototype, "showOverflow", void 0);
 __decorate([
     property({ type: TabLayout, defaultValue: TabLayout.Standard })
 ], TabContainer.prototype, "tabLayout", void 0);
 __decorate([
-    property({ type: TabsOverflowMode, defaultValue: TabsOverflowMode.End })
-], TabContainer.prototype, "tabsOverflowMode", void 0);
+    property({ type: OverflowMode, defaultValue: OverflowMode.End })
+], TabContainer.prototype, "overflowMode", void 0);
 __decorate([
-    property({ type: TabContainerBackgroundDesign, defaultValue: TabContainerBackgroundDesign.Solid })
+    property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Solid })
 ], TabContainer.prototype, "headerBackgroundDesign", void 0);
 __decorate([
-    property({ type: TabContainerBackgroundDesign, defaultValue: TabContainerBackgroundDesign.Solid })
+    property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Solid })
 ], TabContainer.prototype, "contentBackgroundDesign", void 0);
 __decorate([
     property({ type: TabContainerTabsPlacement, defaultValue: TabContainerTabsPlacement.Top })
 ], TabContainer.prototype, "tabsPlacement", void 0);
+__decorate([
+    property()
+], TabContainer.prototype, "mediaRange", void 0);
 __decorate([
     property({ type: Object })
 ], TabContainer.prototype, "_selectedTab", void 0);
@@ -858,7 +980,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);
@@ -869,7 +991,7 @@ __decorate([
         individualSlots: true,
         invalidateOnChildChange: {
             properties: true,
-            slots: false,
+            slots: true,
         },
     })
 ], TabContainer.prototype, "items", void 0);
@@ -879,58 +1001,118 @@ __decorate([
 __decorate([
     slot()
 ], TabContainer.prototype, "startOverflowButton", void 0);
+__decorate([
+    longDragOverHandler("[data-ui5-stable=overflow-start],[data-ui5-stable=overflow-end],[role=tab]")
+], TabContainer.prototype, "_onHeaderDragOver", null);
 TabContainer = TabContainer_1 = __decorate([
     customElement({
         tag: "ui5-tabcontainer",
         languageAware: true,
         fastNavigation: true,
-        styles: [tabStyles, tabContainerCss],
-        staticAreaStyles: [ResponsivePopoverCommonCss, staticAreaTabStyles],
+        styles: [
+            tabStyles,
+            tabContainerCss,
+            ResponsivePopoverCommonCss,
+        ],
         renderer: litRender,
         template: TabContainerTemplate,
-        staticAreaTemplate: TabContainerPopoverTemplate,
         dependencies: [
             Button,
             Icon,
             List,
             ResponsivePopover,
+            DropIndicator,
+            CustomListItem,
         ],
     })
     /**
      * Fired when a tab is selected.
-     *
-     * @event sap.ui.webc.main.TabContainer#tab-select
-     * @param {HTMLElement} tab The selected <code>tab</code>.
-     * @param {Integer} tabIndex The selected <code>tab</code> index in the flattened array of all tabs and their subTabs, provided by the <code>allItems</code> getter.
+     * @param {Tab} tab The selected `tab`.
+     * @param {Integer} tabIndex The selected `tab` index in the flattened array of all tabs and their subTabs, provided by the `allItems` getter.
      * @public
+     * @since 2.0.0
      * @allowPreventDefault
      */
     ,
     event("tab-select", {
         detail: {
+            /**
+             * @public
+             */
             tab: { type: HTMLElement },
+            /**
+             * @public
+             */
             tabIndex: { type: Number },
         },
     })
+    /**
+     * Fired when element is being moved over the tab container.
+     *
+     * If the new position is valid, prevent the default action of the event using `preventDefault()`.
+     * @param {object} source Contains information about the moved element under `element` property.
+     * @param {object} destination Contains information about the destination of the moved element. Has `element` and `placement` properties.
+     * @public
+     * @since 2.0.0
+     * @allowPreventDefault
+     */
+    ,
+    event("move-over", {
+        detail: {
+            /**
+             * @public
+             */
+            source: { type: Object },
+            /**
+             * @public
+             */
+            destination: { type: Object },
+        },
+    })
+    /**
+     * Fired when element is moved to the tab container.
+     *
+     * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
+     * @param {object} source Contains information about the moved element under `element` property.
+     * @param {object} destination Contains information about the destination of the moved element. Has `element` and `placement` properties.
+     * @public
+     * @allowPreventDefault
+     */
+    ,
+    event("move", {
+        detail: {
+            /**
+             * @public
+             */
+            source: { type: Object },
+            /**
+             * @public
+             */
+            destination: { type: Object },
+        },
+    })
 ], TabContainer);
-const isTabDiv = (el) => el.localName === "div" && el.getAttribute("role") === "tab";
-const getTab = (el) => {
+const isTabInStrip = (el) => el.localName === "div" && el.getAttribute("role") === "tab";
+const getTabInStrip = (el) => {
     while (el) {
-        if (isTabDiv(el)) {
+        if (isTabInStrip(el)) {
             return el;
         }
         el = el.parentElement;
     }
     return false;
 };
-const walk = (tabs, callback) => {
-    [...tabs].forEach(tab => {
-        callback(tab);
-        if (tab.subTabs) {
-            walk(tab.subTabs, callback);
+const _walk = (items, callback, level) => {
+    [...items].forEach(item => {
+        callback(item, level);
+        if (item.hasAttribute("ui5-tab") && item.items) {
+            _walk(item.items, callback, level + 1);
         }
     });
 };
+const walk = (items, callback) => {
+    _walk(items, callback, 0);
+};
 TabContainer.define();
 export default TabContainer;
 //# sourceMappingURL=TabContainer.js.map