chore: use framework's debounce method

packages/fiori/src/DynamicPage.ts

@@ -11,7 +11,8 @@ import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
+
+import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 
 // Template
 import DynamicPageTemplate from "./generated/templates/DynamicPageTemplate.lit.js";
@@ -29,7 +30,7 @@ import {
 	DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
-const SCROLL_DEBOUNCE_RATE = 0; // ms
+const SCROLL_DEBOUNCE_RATE = 25; // ms
 
 /**
  * @class
@@ -186,9 +187,7 @@ class DynamicPage extends UI5Element {
 	@slot({ type: HTMLElement })
 	footer!: HTMLElement[];
 
-	isExpanding = false;
-	iPreviousScrollAmount = 0;
-	_debounceInterval?: Timeout | null;
+	skipSnapOnScroll = false;
 	showHeaderInStickArea = false;
 	_updateMediaRange: ResizeObserverCallback;
 
@@ -275,36 +274,29 @@ class DynamicPage extends UI5Element {
 	}
 
 	snapOnScroll() {
-		this._debounce(() => {
-			if (!this.dynamicPageTitle || !this.dynamicPageHeader) {
-				return;
-			}
-
-			const scrollTop = this.scrollContainer!.scrollTop;
-
-			if (this.iPreviousScrollAmount === scrollTop) {
-				return;
-			}
-
-			this.iPreviousScrollAmount = scrollTop;
-
-			if (this.headerPinned) {
-				return;
-			}
-
-			if (this.isExpanding) {
-				this.isExpanding = false;
-				return;
-			}
-
-			if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {
-				this.headerSnapped = true;
-				this.showHeaderInStickArea = false;
-			} else {
-				this.headerSnapped = false;
-			}
-			this.dynamicPageTitle.snapped = this.headerSnapped;
-		}, SCROLL_DEBOUNCE_RATE);
+		debounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);
+	}
+
+	snapTitleByScroll() {
+		if (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned) {
+			return;
+		}
+
+		const scrollTop = this.scrollContainer!.scrollTop;
+
+		if (this.skipSnapOnScroll) {
+			this.skipSnapOnScroll = false;
+			return;
+		}
+
+		if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {
+			this.headerSnapped = true;
+			this.showHeaderInStickArea = false;
+		} else {
+			this.headerSnapped = false;
+		}
+
+		this.dynamicPageTitle.snapped = this.headerSnapped;
 	}
 
 	async onExpandClick() {
@@ -330,20 +322,10 @@ class DynamicPage extends UI5Element {
 		this.showHeaderInStickArea = !this.showHeaderInStickArea;
 		this.headerSnapped = !this.headerSnapped;
 
-		this.isExpanding = true;
+		this.skipSnapOnScroll = true;
 		this.headerPinned = false;
 	}
 
-	///
-
-	_debounce(fn: () => void, delay: number) {
-		clearTimeout(this._debounceInterval!);
-		this._debounceInterval = setTimeout(() => {
-			this._debounceInterval = null;
-			fn();
-		}, delay);
-	}
-
 	updateMediaRange() {
 		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
 	}

packages/fiori/src/DynamicPageHeaderActions.ts

@@ -88,7 +88,7 @@ class DynamicPageHeaderActions extends UI5Element {
 	 * @default {}
 	 */
 	@property({ type: Object })
-	accessibilityAttributes!: {controls: string};
+	accessibilityAttributes!: { controls: string };
 
 	get classes() {
 		return {

packages/fiori/src/DynamicPageTitle.hbs

@@ -9,22 +9,18 @@
     role="button"
     aria-expanded="{{_headerExpanded}}"
     aria-labelledby="{{_ariaLabelledBy}}"
-    aria-describedby="toggle-description">
+    aria-describedby="{{_id}}-toggle-description">
   </span>
   <div class="{{classes.topArea}}">
-    {{#if hasBreadcrumb}}
-      <div class="{{classes.breadcrumbs}}">
-        <slot name="breadcrumbs"></slot>
-      </div>
-    {{/if}}
+    <slot name="breadcrumbs"></slot>
 
     {{#if mobileNavigationActions}}
       <slot name="navigationActions"></slot>
     {{/if}}
   </div>
 
   <div class="{{classes.wrapper}}"
-  @ui5-_min-content-width-change={{onMinContentWidthChange}}>
+    @ui5-_min-content-width-change={{onMinContentWidthChange}}>
     <div id="{{_id}}-heading" class="{{classes.heading}}">
       <slot name="{{headingSlotName}}"></slot>
     </div>
@@ -47,5 +43,5 @@
   </div>
 
   <slot name="{{contentSlotName}}"></slot>
-  <span id="toggle-description" class="ui5-hidden-text">{{_ariaDescribedbyText}}</span>
+  <span id="{{_id}}-toggle-description" class="ui5-hidden-text">{{_ariaDescribedbyText}}</span>
 </div>

packages/fiori/src/DynamicPageTitle.ts

@@ -10,6 +10,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
 import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js";
 
 // Template
 import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js";
@@ -174,10 +175,6 @@ class DynamicPageTitle extends UI5Element {
 		this._handleResize = this.handleResize.bind(this);
 	}
 
-	get hasBreadcrumb() {
-		return !!this.breadcrumbs.length;
-	}
-
 	get hasContent() {
 		return !!this.content.length;
 	}
@@ -226,9 +223,6 @@ class DynamicPageTitle extends UI5Element {
 			topArea: {
 				"ui5-dynamic-page-title--top-area": true,
 			},
-			breadcrumbs: {
-				"ui5-dynamic-page-title--breadcrumbs": true,
-			},
 			wrapper: {
 				"ui5-dynamic-page-title--wrapper": true,
 			},
@@ -277,7 +271,7 @@ class DynamicPageTitle extends UI5Element {
 			return;
 		}
 		navigationActions.items.forEach(action => {
-			action.overflowPriority = "NeverOverflow";
+			action.overflowPriority = ToolbarItemOverflowBehavior.NeverOverflow;
 		});
 	}
 

packages/fiori/src/themes/DynamicPageTitle.css

@@ -129,10 +129,6 @@
     align-items: center;
 }
 
-.ui5-dynamic-page-title--breadcrumbs {
-    width: 100%;
-}
-
 /* focus */
 :host([focused]) {
 /* separate change adds proper parameters */