@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/TabContainer.d.ts

@@ -1,154 +1,117 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
+import type { AccessibilityAttributes, StyleData } from "@ui5/webcomponents-base/dist/types.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import type { SetDraggedElementFunction } from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import Button from "./Button.js";
+import DropIndicator from "./DropIndicator.js";
 import type Tab from "./Tab.js";
-import type { ListItemClickEventDetail } from "./List.js";
-import type CustomListItem from "./CustomListItem.js";
+import type { TabInStrip, TabInOverflow } from "./Tab.js";
+import type { TabSeparatorInOverflow, TabSeparatorInStrip } from "./TabSeparator.js";
+import type { ListItemClickEventDetail, ListMoveEventDetail } from "./List.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";
-interface ITab extends UI5Element {
-    isSeparator: boolean;
-    getTabInStripDomRef: () => ITab | null;
-    stableDomRef: string;
-    additionalText?: string;
-    design?: `${SemanticColor}`;
-    disabled?: boolean;
-    icon?: string;
-    isSingleClickArea?: boolean;
-    requiresExpandButton?: boolean;
-    selected?: boolean;
-    subTabs?: Array<ITab>;
-    tabs?: Array<ITab>;
-    text?: string;
-    _tabIndex?: string;
-    _hasOwnContent?: boolean;
-    _level?: number;
-    _selected?: boolean;
-    _getElementInStrip?: () => ITab | null;
-    _isInline?: boolean;
-    _mixedMode?: boolean;
-    _posinset?: number;
-    _setsize?: number;
-    _realTab?: Tab;
-    _isTopLevelTab?: boolean;
-    _style?: Record<string, any>;
-}
+import OverflowMode from "./types/OverflowMode.js";
+import type { IButton } from "./Button.js";
+type TabContainerPopoverOwner = "start-overflow" | "end-overflow" | TabInStrip;
+type TabContainerStripInfo = {
+    getElementInStrip: () => HTMLElement | undefined;
+    isInline?: boolean;
+    mixedMode?: boolean;
+    posinset?: number;
+    setsize?: number;
+    isTopLevelTab?: boolean;
+};
+type TabContainerOverflowInfo = {
+    getElementInOverflow: () => HTMLElement | undefined;
+    style: Record<string, any>;
+};
 type TabContainerTabSelectEventDetail = {
     tab: Tab;
     tabIndex: number;
 };
-interface TabContainerTabInOverflow extends CustomListItem {
-    _realTab: Tab;
+type TabContainerMoveEventDetail = {
+    source: {
+        element: HTMLElement;
+    };
+    destination: {
+        element: HTMLElement;
+        placement: `${MovePlacement}`;
+    };
+};
+/**
+ * Interface for components that may be slotted inside `ui5-tabcontainer` as items
+ *
+ * **Note:** Use directly `ui5-tab` or `ui5-tab-seprator`. Implementing the interface does not guarantee that the class can work as a tab.
+ * @public
+ */
+interface ITab extends UI5Element {
+    isSeparator: boolean;
+    receiveStripInfo: (arg0: TabContainerStripInfo) => void;
+    receiveOverflowInfo: (arg0: TabContainerOverflowInfo) => void;
+    getDomRefInStrip: () => HTMLElement | undefined;
+    items?: Array<ITab>;
 }
 /**
  * @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 `ui5-tabcontainer` can hold two types of entities:
  *
- * 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>
+ * - `ui5-tab` - contains all the information on an item (text and icon)
+ * - `ui5-tab-separator` - used to separate tabs with a line
  *
- * <h3>Hierarchies</h3>
+ * ### 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>
+ * ### Keyboard Handling
  *
- * <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>
- *
- * <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"`
+ *
+ * ### ES6 Module Import
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents/dist/TabContainer.js";`
  *
- * <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/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
  */
 declare class TabContainer extends UI5Element {
-    /**
-     * Defines whether the tabs are in a fixed state that is not
-     * expandable/collapsible by user interaction.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.TabContainer.prototype.fixed
-     * @defaultvalue false
-     * @public
-     */
-    fixed: boolean;
     /**
      * Defines whether the tab content is collapsed.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.TabContainer.prototype.collapsed
-     * @defaultvalue false
+     * @default false
      * @public
      */
     collapsed: boolean;
     /**
-     * Defines whether the overflow select list is displayed.
-     * <br><br>
-     * The overflow select list represents a list, where all tabs are displayed
-     * so that it's easier for the user to select a specific tab.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.TabContainer.prototype.showOverflow
-     * @defaultvalue false
-     * @public
-     * @deprecated Since the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs,
-     * all hidden tabs are moved to a select list in the respective overflows and are accessible via the <code>overflowButton</code> and / or <code>startOverflowButton</code> slots.
-     */
-    showOverflow: boolean;
-    /**
-     * Defines the alignment of the content and the <code>additionalText</code> of a tab.
-     *
-     * <br>
-     * <b>Note:</b>
-     * The content and the <code>additionalText</code> would be displayed vertically by default,
-     * but when set to <code>Inline</code>, they would be displayed horizontally.
+     * Defines the alignment of the content and the `additionalText` of a tab.
      *
-     * @type {sap.ui.webc.main.types.TabLayout}
-     * @name sap.ui.webc.main.TabContainer.prototype.tabLayout
-     * @defaultvalue "Standard"
+     * **Note:**
+     * The content and the `additionalText` would be displayed vertically by default,
+     * but when set to `Inline`, they would be displayed horizontally.
+     * @default "Standard"
      * @public
      */
     tabLayout: `${TabLayout}`;
@@ -156,98 +119,79 @@ declare class TabContainer extends UI5Element {
      * Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.
      * All other tabs that can 't fit on the screen are available in an overflow tab "More".
      *
-     * <br>
-     * <b>Note:</b>
+     * **Note:**
      * Only one overflow at the end would be displayed by default,
-     * but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.
-     *
-     * @type {sap.ui.webc.main.types.TabsOverflowMode}
-     * @name sap.ui.webc.main.TabContainer.prototype.tabsOverflowMode
-     * @defaultvalue "End"
+     * but when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.
+     * @default "End"
      * @since 1.1.0
      * @public
      */
-    tabsOverflowMode: `${TabsOverflowMode}`;
+    overflowMode: `${OverflowMode}`;
     /**
-     * Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
-     *
-     * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign}
-     * @name sap.ui.webc.main.TabContainer.prototype.headerBackgroundDesign
-     * @defaultvalue "Solid"
+     * Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.
+     * @default "Solid"
      * @since 1.10.0
      * @public
      */
-    headerBackgroundDesign: `${TabContainerBackgroundDesign}`;
+    headerBackgroundDesign: `${BackgroundDesign}`;
     /**
-     * Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>.
-     *
-     * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign}
-     * @name sap.ui.webc.main.TabContainer.prototype.contentBackgroundDesign
-     * @defaultvalue "Solid"
+     * Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.
+     * @default "Solid"
      * @since 1.10.0
      * @public
      */
-    contentBackgroundDesign: `${TabContainerBackgroundDesign}`;
+    contentBackgroundDesign: `${BackgroundDesign}`;
     /**
      * Defines the placement of the tab strip relative to the actual tabs' content.
-     * <br><br>
-     * <b>Note:</b> By default the tab strip is displayed above the tabs' content area and this is the recommended
-     * layout for most scenarios. Set to <code>Bottom</code> only when the component is at the
-     * bottom of the page and you want the tab strip to act as a menu.
      *
-     * @type {sap.ui.webc.main.types.TabContainerTabsPlacement}
-     * @name sap.ui.webc.main.TabContainer.prototype.tabsPlacement
-     * @defaultvalue "Top"
+     * **Note:** By default the tab strip is displayed above the tabs' content area and this is the recommended
+     * layout for most scenarios. Set to `Bottom` only when the component is at the
+     * bottom of the page and you want the tab strip to act as a menu.
+     * @default "Top"
      * @since 1.0.0-rc.7
      * @private
      */
     tabsPlacement: `${TabContainerTabsPlacement}`;
+    /**
+     * Defines the current media query size.
+     * @private
+     */
+    mediaRange: string;
     _selectedTab: Tab;
     _animationRunning: boolean;
     _contentCollapsed: boolean;
     _startOverflowText: string;
     _endOverflowText: string;
-    _overflowItems: Array<ITab>;
+    _popoverItemsFlat: Array<ITab>;
     _width?: number;
     /**
      * Defines the tabs.
-     * <br><br>
-     * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
      *
-     * @type {sap.ui.webc.main.ITab[]}
+     * **Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.
      * @public
-     * @slot items
-     * @name sap.ui.webc.main.TabContainer.prototype.default
      */
     items: Array<ITab>;
     /**
      * Defines the button which will open the overflow menu. If nothing is provided to this slot,
      * the default button will be used.
-     *
-     * @type {sap.ui.webc.main.IButton}
      * @public
-     * @slot
      * @since 1.0.0-rc.9
-     * @name sap.ui.webc.main.TabContainer.prototype.overflowButton
      */
-    overflowButton: Array<Button>;
+    overflowButton: Array<IButton>;
     /**
      * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,
      * the default button will be used.
-     *
-     * @type {sap.ui.webc.main.IButton}
      * @public
-     * @slot
      * @since 1.1.0
-     * @name sap.ui.webc.main.TabContainer.prototype.startOverflowButton
      */
-    startOverflowButton: Array<Button>;
+    startOverflowButton: Array<IButton>;
     _itemNavigation: ItemNavigation;
-    _allItemsAndSubItems?: Array<ITab>;
+    _itemsFlat?: Array<ITab>;
     responsivePopover?: ResponsivePopover;
+    _hasScheduledPopoverOpen: boolean;
     _handleResizeBound: () => void;
+    _setDraggedElement?: SetDraggedElementFunction;
     static registerTabStyles(styles: StyleData): void;
-    static registerStaticAreaTabStyles(styles: StyleData): void;
     static i18nBundle: I18nBundle;
     constructor();
     onBeforeRendering(): void;
@@ -255,90 +199,88 @@ declare class TabContainer extends UI5Element {
     onEnterDOM(): void;
     onExitDOM(): void;
     _handleResize(): void;
-    _setItemsPrivateProperties(items: Array<ITab>): void;
+    _updateMediaRange(width: number): void;
+    _sendStripPresentationInfos(items: Array<ITab>): void;
     _onHeaderFocusin(e: FocusEvent): void;
+    _onDragStart(e: DragEvent): void;
+    _onHeaderDragEnter(e: DragEvent): void;
+    _onHeaderDragOver(e: DragEvent, isLongDragOver: boolean): void;
+    _onHeaderDrop(e: DragEvent): void;
+    _onHeaderDragLeave(e: DragEvent): void;
+    _onPopoverListMoveOver(e: CustomEvent<ListMoveEventDetail>): void;
+    _onPopoverListMove(e: CustomEvent<ListMoveEventDetail>): void;
     _onTabStripClick(e: Event): Promise<void>;
     _onTabExpandButtonClick(e: Event): Promise<void>;
     _setPopoverInitialFocus(): void;
-    _getSelectedTabInOverflow(): TabContainerTabInOverflow;
-    _getFirstFocusableItemInOverflow(): TabContainerTabInOverflow;
+    _getSelectedTabInOverflow(): TabInOverflow;
+    _getFirstFocusableItemInOverflow(): TabInOverflow;
+    _findTabInOverflow(realTab: ITab): TabSeparatorInOverflow | TabInOverflow | undefined;
     _onTabStripKeyDown(e: KeyboardEvent): void;
     _onTabStripKeyUp(e: KeyboardEvent): void;
     _onHeaderItemSelect(tab: HTMLElement): void;
     _onOverflowListItemClick(e: CustomEvent<ListItemClickEventDetail>): Promise<void>;
     /**
      * 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(): ITab[];
-    _getAllSubItems(items: Array<ITab>, result?: Array<ITab>, level?: number): ITab[];
+    get allItems(): Array<ITab>;
+    _flatten(items: Array<ITab>): ITab[];
     _onItemSelect(selectedTabId: string): void;
-    toggleAnimated(selectedTab: Tab, previousTab: Tab): Promise<void>;
-    toggle(selectedTab: Tab, previousTab: Tab): void;
     /**
-     * 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: Tab, selectedTabIndex: number): boolean;
     slideContentDown(element: HTMLElement): Promise<void | Error>;
     slideContentUp(element: HTMLElement): Promise<void | Error>;
     _onOverflowClick(e: Event): Promise<void>;
-    _addStyleIndent(tabs: Array<ITab>): void;
+    _sendOverflowPresentationInfos(items: Array<ITab>): void;
     _onOverflowKeyDown(e: KeyboardEvent): Promise<void>;
     _setItemsForStrip(): void;
     _getRootTab(tab: Tab): Tab;
-    _updateEndOverflow(itemsDomRefs: Array<ITab>): void;
-    _updateStartAndEndOverflow(itemsDomRefs: Array<ITab>): void;
-    _hasStartOverflow(containerWidth: number, itemsDomRefs: Array<ITab>, selectedItemIndexAndWidth: {
+    _updateEndOverflow(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>): void;
+    _updateStartAndEndOverflow(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>): void;
+    _hasStartOverflow(containerWidth: number, itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, selectedItemIndexAndWidth: {
         width: number;
         index: number;
     }): boolean;
-    _hasEndOverflow(containerWidth: number, itemsDomRefs: Array<ITab>, selectedItemIndexAndWidth: {
+    _hasEndOverflow(containerWidth: number, itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, selectedItemIndexAndWidth: {
         width: number;
         index: number;
     }): boolean;
     _getItemWidth(itemDomRef: HTMLElement): number;
-    _getSelectedItemIndexAndWidth(itemsDomRefs: Array<ITab>, selectedTabDomRef: ITab): {
+    _getSelectedItemIndexAndWidth(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, selectedTabDomRef: TabInStrip): {
         index: number;
         width: number;
     };
-    _findFirstVisibleItem(itemsDomRefs: Array<ITab>, containerWidth: number, selectedItemWidth: number, startIndex?: number): number;
-    _findLastVisibleItem(itemsDomRefs: Array<ITab>, containerWidth: number, selectedItemWidth: number, startIndex?: number): number;
+    _findFirstVisibleItem(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, containerWidth: number, selectedItemWidth: number, startIndex?: number): number;
+    _findLastVisibleItem(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, containerWidth: number, selectedItemWidth: number, startIndex?: number): number;
     get isModeStartAndEnd(): boolean;
     _updateOverflowCounters(): void;
-    _getFocusableRefs(): Button[];
+    _getFocusableRefs(): IButton[];
     _getHeader(): HTMLElement;
     _getTabs(): Array<Tab>;
-    get hasSubTabs(): boolean;
+    _getPopoverOwner(opener: HTMLElement): TabContainerPopoverOwner;
+    _getPopoverItemsFor(targetOwner: TabContainerPopoverOwner): ITab[];
+    _setPopoverItems(items: Array<ITab>): void;
+    _togglePopover(opener: HTMLElement, setInitialFocus?: boolean): Promise<void>;
+    _showPopoverAt(opener: HTMLElement, setInitialFocus?: boolean, preventInitialFocus?: boolean): Promise<void>;
+    get hasItems(): boolean;
     _getTabStrip(): HTMLElement;
     _getStartOverflow(): HTMLElement;
     _getEndOverflow(): HTMLElement;
     _getStartOverflowBtnDOM(): Button | null;
     _getEndOverflowBtnDOM(): Button | null;
     _respPopover(): Promise<ResponsivePopover>;
-    _closeRespPopover(): Promise<void>;
+    _closePopover(): void;
+    get dropIndicatorDOM(): DropIndicator | null;
     get classes(): {
         root: {
             "ui5-tc-root": boolean;
@@ -372,9 +314,9 @@ declare class TabContainer extends UI5Element {
     get overflowButtonText(): string;
     get popoverCancelButtonText(): string;
     get accInvisibleText(): string;
+    get overflowBtnAccessibilityAttributes(): Pick<AccessibilityAttributes, "hasPopup">;
     get tablistAriaDescribedById(): string | undefined;
-    get shouldAnimate(): boolean;
     static onDefine(): Promise<void>;
 }
 export default TabContainer;
-export type { ITab, TabContainerTabSelectEventDetail, };
+export type { TabContainerTabSelectEventDetail, TabContainerMoveEventDetail, TabContainerStripInfo, TabContainerOverflowInfo, ITab, };