refactor: use ItemNavigation optimally (SAP#2585)

packages/fiori/src/ProductSwitch.js

@@ -62,12 +62,10 @@ class ProductSwitch extends UI5Element {
 	constructor() {
 		super();
 
-		this.initItemNavigation();
-	}
-
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this, { rowSize: 4 });
-		this._itemNavigation.getItemsCallback = () => this.items;
+		this._itemNavigation = new ItemNavigation(this, {
+			rowSize: 4,
+			getItemsCallback: () => this.items,
+		});
 	}
 
 	static get metadata() {

packages/fiori/src/Timeline.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-timeline-root">
+<div class="ui5-timeline-root" @focusin={{_onfocusin}}>
 	<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{ariaLabel}}">
 		{{#each items}}
 			<li class="ui5-timeline-list-item" style="list-style-type: none;">

packages/fiori/src/Timeline.js

@@ -72,7 +72,10 @@ class Timeline extends UI5Element {
 	constructor() {
 		super();
 
-		this.initItemNavigation();
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this.items,
+		});
+
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
@@ -84,14 +87,15 @@ class Timeline extends UI5Element {
 		await fetchI18nBundle("@ui5/webcomponents-fiori");
 	}
 
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this.items;
-	}
-
 	get ariaLabel() {
 		return this.i18nBundle.getText(TIMELINE_ARIA_LABEL);
 	}
+
+	_onfocusin(event) {
+		const target = event.target;
+
+		this._itemNavigation.update(target);
+	}
 }
 
 Timeline.define();

packages/fiori/src/Wizard.js

@@ -197,7 +197,10 @@ class Wizard extends UI5Element {
 		// due to user scroll.
 		this.selectionRequestedByScroll = false;
 
-		this.initItemNavigation();
+		this._itemNavigation = new ItemNavigation(this, {
+			navigationMode: NavigationMode.Horizontal,
+			getItemsCallback: () => this.enabledStepsInHeaderDOM,
+		});
 
 		this._onResize = this.onResize.bind(this);
 
@@ -824,19 +827,6 @@ class Wizard extends UI5Element {
 		}
 	}
 
-	/**
-	 * Initializes the <code>ItemNavigation</code>
-	 * that controls the navigation between the steps in the navigation header.
-	 * @private
-	 */
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this, {
-			navigationMode: NavigationMode.Horizontal,
-		});
-
-		this._itemNavigation.getItemsCallback = () => this.enabledStepsInHeaderDOM;
-	}
-
 	/**
 	 * Delays function execution by given threshold - used to delay the scroll event handling.
 	 * @private

packages/main/src/AvatarGroup.js

@@ -181,7 +181,12 @@ const metadata = {
 class AvatarGroup extends UI5Element {
 	constructor() {
 		super();
-		this._itemNavigation = new ItemNavigation(this);
+
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => {
+				return this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);
+			},
+		});
 
 		this._colorIndex = 0;
 		this._hiddenItems = 0;
@@ -289,12 +294,6 @@ class AvatarGroup extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this._isGroup) {
-			this._itemNavigation.getItemsCallback = () => [];
-		} else {
-			this._itemNavigation.getItemsCallback = () => this.items.slice(0, this._hiddenStartIndex);
-		}
-
 		this._prepareAvatars();
 	}
 

packages/main/src/List.js

@@ -416,9 +416,8 @@ class List extends UI5Element {
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			navigationMode: NavigationMode.Vertical,
+			getItemsCallback: () => this.getSlottedNodes("items"),
 		});
-
-		this._itemNavigation.getItemsCallback = () => this.getSlottedNodes("items");
 	}
 
 	prepareListItems() {

packages/main/src/SegmentedButton.js

@@ -106,7 +106,10 @@ class SegmentedButton extends UI5Element {
 
 	constructor() {
 		super();
-		this.initItemNavigation();
+
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this.getSlottedNodes("buttons"),
+		});
 
 		this.absoluteWidthSet = false; // set to true whenever we set absolute width to the component
 		this.percentageWidthSet = false; //  set to true whenever we set 100% width to the component
@@ -157,12 +160,6 @@ class SegmentedButton extends UI5Element {
 		});
 	}
 
-	initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-
-		this._itemNavigation.getItemsCallback = () => this.getSlottedNodes("buttons");
-	}
-
 	normalizeSelection() {
 		this._selectedButton = this.buttons.filter(button => button.pressed).pop();
 

packages/main/src/TabContainer.js

@@ -274,7 +274,9 @@ class TabContainer extends UI5Element {
 		this._scrollEnablement.attachEvent("scroll", this._updateScrolling.bind(this));
 
 		// Init ItemNavigation
-		this._initItemNavigation();
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this._getTabs(),
+		});
 
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
@@ -346,11 +348,6 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	_initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this._getTabs();
-	}
-
 	_onHeaderItemSelect(tab) {
 		if (!tab.hasAttribute("disabled")) {
 			this._onItemSelect(tab);
@@ -375,7 +372,7 @@ class TabContainer extends UI5Element {
 				item.selected = selected;
 
 				if (selected) {
-					this._itemNavigation.current = selectedTabIndex;
+					this._itemNavigation.update(item);
 				}
 			}
 		}, this);

packages/main/src/Tokenizer.js

@@ -133,8 +133,12 @@ class Tokenizer extends UI5Element {
 		super();
 
 		this._resizeHandler = this._handleResize.bind(this);
-		this._itemNav = new ItemNavigation(this, { currentIndex: "-1" });
-		this._itemNav.getItemsCallback = this._getVisibleTokens.bind(this);
+
+		this._itemNav = new ItemNavigation(this, {
+			currentIndex: "-1",
+			getItemsCallback: this._getVisibleTokens.bind(this),
+		});
+
 		this._scrollEnablement = new ScrollEnablement(this);
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
@@ -192,11 +196,23 @@ class Tokenizer extends UI5Element {
 	}
 
 	_tokenDelete(event) {
-		if (event.detail && event.detail.backSpace) {
-			this._deleteByBackspace();
+		let nextTokenIndex; // The index of the next token that needs to be focused next due to the deletion
+		const deletedTokenIndex = this._getVisibleTokens().indexOf(event.target); // The index of the token that just got deleted
+
+		if (event.detail && event.detail.backSpace) { // on backspace key select the previous item (unless deleting the first)
+			nextTokenIndex = deletedTokenIndex === 0 ? deletedTokenIndex + 1 : deletedTokenIndex - 1;
+		} else { // on delete key or mouse click on the "x" select the next item (unless deleting the last)
+			nextTokenIndex = deletedTokenIndex === this._getVisibleTokens().length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
+		}
+		const nextToken = this._getVisibleTokens()[nextTokenIndex]; // if the last item was deleted this will be undefined
+		this._itemNav.update(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
+
+		if (nextToken) {
+			setTimeout(() => {
+				nextToken.focus();
+			}, 0);
 		}
 
-		this._updateAndFocus();
 		this.fireEvent("token-delete", { ref: event.target });
 	}
 
@@ -232,28 +248,6 @@ class Tokenizer extends UI5Element {
 		}
 	}
 
-	/* Keyboard handling */
-
-	_updateAndFocus() {
-		if (this._tokens.length) {
-			this._itemNav.update();
-
-			setTimeout(() => {
-				this._itemNav.focusCurrent();
-			}, 0);
-		}
-	}
-
-	_deleteByBackspace() {
-		const newIndex = this._itemNav.currentIndex - 1;
-
-		if (newIndex < 0) {
-			this._itemNav.currentIndex = 0;
-		} else {
-			this._itemNav.currentIndex = newIndex;
-		}
-	}
-
 	/**
 	 * Scrolls the container of the tokens to its beginning.
 	 * This method is used by MultiInput and MultiComboBox.