chore: correct docs hierarchy (#13187)

Author: nnaydenow

packages/main/cypress/specs/ToolbarItem.cy.tsx

@@ -523,7 +523,7 @@ describe("Toolbar Item Closing Events - closeOverflowSet functionality", () => {
 });
 
 /**
- * Custom component that implements IOverflowToolbarItem with overflowCloseEvents
+ * Custom component that implements IToolbarItemContent with overflowCloseEvents
  * This simulates a component that defines its own custom closing events
  */
 class CustomOverflowComponent extends HTMLElement {
@@ -535,7 +535,7 @@ class CustomOverflowComponent extends HTMLElement {
 		`;
 	}
 
-	// Implements IOverflowToolbarItem.overflowCloseEvents
+	// Implements IToolbarItemContent.overflowCloseEvents
 	get overflowCloseEvents(): string[] {
 		return ["custom-action", "custom-change"];
 	}
@@ -555,7 +555,7 @@ if (!customElements.get("custom-overflow-component")) {
 }
 
 /**
- * Custom component that implements IOverflowToolbarItem with additional custom events
+ * Custom component that implements IToolbarItemContent with additional custom events
  * Used to test combining predefined closeOverflowSet events with component's overflowCloseEvents
  */
 class CustomButtonWithExtraEvents extends HTMLElement {
@@ -582,7 +582,7 @@ if (!customElements.get("custom-button-extra")) {
 // @ts-ignore - Custom element JSX type
 const CustomOverflowComponentRenderer = (props: { id: string }) => <custom-overflow-component id={props.id} />;
 
-describe("Toolbar Item Closing Events - overflowCloseEvents functionality (IOverflowToolbarItem)", () => {
+describe("Toolbar Item Closing Events - overflowCloseEvents functionality (IToolbarItemContent)", () => {
 	it("Should close overflow popover when custom component fires 'custom-action' event from overflowCloseEvents", () => {
 		cy.viewport(300, 600);
 

packages/main/src/Breadcrumbs.ts

@@ -24,7 +24,7 @@ import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
 import "./BreadcrumbsItem.js";
 import type BreadcrumbsItem from "./BreadcrumbsItem.js";
 import type BreadcrumbsSeparator from "./types/BreadcrumbsSeparator.js";
-import type { IOverflowToolbarItem } from "./ToolbarItem.js";
+import type { IToolbarItemContent } from "./ToolbarItem.js";
 
 import {
 	BREADCRUMB_ITEM_POS,
@@ -85,7 +85,7 @@ type FocusAdaptor = ITabbable & {
  * - [End] - Navigates to the last item.
  * @constructor
  * @extends UI5Element
- * @implements {IOverflowToolbarItem}
+ * @implements {IToolbarItemContent}
  * @public
  * @since 1.0.0-rc.15
  */
@@ -111,7 +111,7 @@ type FocusAdaptor = ITabbable & {
 	bubbles: true,
 	cancelable: true,
 })
-class Breadcrumbs extends UI5Element implements IOverflowToolbarItem {
+class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 	eventDetails!: {
 		"item-click": BreadcrumbsItemClickEventDetail,
 	}

packages/main/src/Toolbar.ts

@@ -27,7 +27,7 @@ import type ToolbarAlign from "./types/ToolbarAlign.js";
 import type ToolbarDesign from "./types/ToolbarDesign.js";
 import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 
-import type ToolbarItem from "./ToolbarItem.js";
+import type ToolbarItemBase from "./ToolbarItemBase.js";
 import type ToolbarSeparator from "./ToolbarSeparator.js";
 
 import type Button from "./Button.js";
@@ -155,11 +155,11 @@ class Toolbar extends UI5Element {
 	@slot({
 		"default": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true,
 	})
-	items!: DefaultSlot<ToolbarItem>
+	items!: DefaultSlot<ToolbarItemBase>
 
 	_onResize!: ResizeObserverCallback;
 	_onCloseOverflow!: EventListener;
-	itemsToOverflow: Array<ToolbarItem> = [];
+	itemsToOverflow: Array<ToolbarItemBase> = [];
 	itemsWidth = 0;
 	minContentWidth = 0;
 
@@ -194,11 +194,11 @@ class Toolbar extends UI5Element {
 	}
 
 	get alwaysOverflowItems() {
-		return this.items.filter((item: ToolbarItem) => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);
+		return this.items.filter(item => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);
 	}
 
 	get movableItems() {
-		return this.items.filter((item: ToolbarItem) => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);
+		return this.items.filter(item => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);
 	}
 
 	get overflowItems() {
@@ -216,7 +216,7 @@ class Toolbar extends UI5Element {
 	}
 
 	get interactiveItems() {
-		return this.items.filter((item: ToolbarItem) => item.isInteractive);
+		return this.items.filter((item: ToolbarItemBase) => item.isInteractive);
 	}
 
 	/**
@@ -264,7 +264,7 @@ class Toolbar extends UI5Element {
 	}
 
 	get hasFlexibleSpacers() {
-		return this.items.some((item: ToolbarItem) => item.hasFlexibleWidth);
+		return this.items.some((item: ToolbarItemBase) => item.hasFlexibleWidth);
 	}
 
 	/**
@@ -306,7 +306,7 @@ class Toolbar extends UI5Element {
 		});
 	}
 
-	addItemsAdditionalProperties(item: ToolbarItem) {
+	addItemsAdditionalProperties(item: ToolbarItemBase) {
 		item.isOverflowed = this.overflowItems.indexOf(item) !== -1;
 		const itemWrapper = this.shadowRoot!.querySelector(`#${item._individualSlot}`) as HTMLElement;
 		if (item.hasOverflow && !item.isOverflowed && itemWrapper) {
@@ -386,7 +386,7 @@ class Toolbar extends UI5Element {
 		let totalWidth = 0,
 			minWidth = 0;
 
-		this.items.forEach((item: ToolbarItem) => {
+		this.items.forEach(item => {
 			const itemWidth = this.getItemWidth(item);
 			totalWidth += itemWidth;
 			if (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) {
@@ -437,7 +437,7 @@ class Toolbar extends UI5Element {
 	}
 
 	distributeItemsThatAlwaysOverflow() {
-		this.alwaysOverflowItems.forEach((item: ToolbarItem) => {
+		this.alwaysOverflowItems.forEach((item: ToolbarItemBase) => {
 			this.itemsToOverflow.push(item);
 		});
 	}
@@ -450,7 +450,7 @@ class Toolbar extends UI5Element {
 		});
 	}
 
-	shouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItem>) {
+	shouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItemBase>) {
 		let foundPrevNonSeparatorItem = false;
 		let foundNextNonSeperatorItem = false;
 
@@ -514,7 +514,7 @@ class Toolbar extends UI5Element {
 		this.contentWidth = 0; // re-render
 	}
 
-	getItemWidth(item: ToolbarItem): number {
+	getItemWidth(item: ToolbarItemBase): number {
 		// Spacer width - always 0 for flexible spacers, so that they shrink, otherwise - measure the width normally
 		if (item.ignoreSpace || item.isSeparator) {
 			return 0;

packages/main/src/ToolbarButton.ts

@@ -4,8 +4,10 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ButtonAccessibilityAttributes } from "./Button.js";
 import type ButtonDesign from "./types/ButtonDesign.js";
+import type ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
+import type { ToolbarItemEventDetail } from "./ToolbarItemBase.js";
 import ToolbarButtonTemplate from "./ToolbarButtonTemplate.js";
 import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
 
@@ -22,7 +24,7 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
  * `import "@ui5/webcomponents/dist/ToolbarButton.js";`
  * @constructor
  * @abstract
- * @extends ToolbarItem
+ * @extends ToolbarItemBase
  * @public
  * @since 1.17.0
  */
@@ -45,7 +47,37 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 	bubbles: true,
 	cancelable: true,
 })
-class ToolbarButton extends ToolbarItem {
+
+/**
+ * Fired when the overflow popover is closed.
+ * @public
+ */
+@event("close-overflow", {
+	bubbles: true,
+})
+class ToolbarButton extends ToolbarItemBase {
+	eventDetails!: ToolbarItemBase["eventDetails"] & {
+		click: ToolbarItemEventDetail,
+	}
+
+	/**
+	* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+	* the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+	* @public
+	* @default "Default"
+	*/
+	@property()
+	overflowPriority: `${ToolbarItemOverflowBehavior}` = "Default";
+
+	/**
+	 * Defines if the toolbar overflow popup should close upon interaction with the item.
+	 * It will close by default.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	preventOverflowClosing = false;
+
 	/**
 	 * Defines if the action is disabled.
 	 *