@ui5/webcomponents 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.1](https://github.com/SAP/ui5-webcomponents/compare/v1.2.0...v1.2.1) (2022-03-02)
+
+
+### Bug Fixes
+
+* **ui5-multi-combobox:** Prevent scrolling on page up/down ([#4835](https://github.com/SAP/ui5-webcomponents/issues/4835)) ([6c85e8d](https://github.com/SAP/ui5-webcomponents/commit/6c85e8d))
+* **ui5-responsive-popover:** fix auto close during re-rendering ([#4828](https://github.com/SAP/ui5-webcomponents/issues/4828)) ([5859ce7](https://github.com/SAP/ui5-webcomponents/commit/5859ce7)), closes [#4816](https://github.com/SAP/ui5-webcomponents/issues/4816)
+* **ui5-segmented-button-item:** adopt inherited `tooltip` property ([#4843](https://github.com/SAP/ui5-webcomponents/issues/4843)) ([b04db63](https://github.com/SAP/ui5-webcomponents/commit/b04db63)), closes [#4840](https://github.com/SAP/ui5-webcomponents/issues/4840)
+
+
+### Features
+
+* **ui5-multi-combobox, ui5-tokenizer:** Full Home/End implementation ([#4796](https://github.com/SAP/ui5-webcomponents/issues/4796)) ([8d83d33](https://github.com/SAP/ui5-webcomponents/commit/8d83d33))
+
+
+
+
+
 # [1.2.0](https://github.com/SAP/ui5-webcomponents/compare/v1.1.2...v1.2.0) (2022-02-28)
 
 

package/dist/Button.js

@@ -113,9 +113,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the tooltip of the button.
+		 * Defines the tooltip of the component.
 		 * <br>
-		 * <b>Note:</b> Tooltips should only be set to icon-only buttons.
+		 * <b>Note:</b> We recommend setting tooltip to icon-only components.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public

package/dist/MultiComboBox.js

@@ -11,6 +11,8 @@ import {
 	isHome,
 	isTabNext,
 	isTabPrevious,
+	isHomeCtrl,
+	isEndCtrl,
 	isCtrlA,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -585,6 +587,14 @@ class MultiComboBox extends UI5Element {
 		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
 	}
 
+	_handlePageUp(event) {
+		event.preventDefault();
+	}
+
+	_handlePageDown(event) {
+		event.preventDefault();
+	}
+
 	_handleBackspace(event) {
 		if (event.target.value === "") {
 			event.preventDefault();
@@ -661,6 +671,16 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
+		if (isHomeCtrl(event)) {
+			this.list._itemNavigation._handleHome(event);
+			this.list.items[this.list._itemNavigation._currentIndex].focus();
+		}
+
+		if (isEndCtrl(event)) {
+			this.list._itemNavigation._handleEnd(event);
+			this.list.items[this.list._itemNavigation._currentIndex].focus();
+		}
+
 		event.preventDefault();
 
 		if (isCtrlA(event)) {

package/dist/ResponsivePopover.js

@@ -183,7 +183,7 @@ class ResponsivePopover extends Popover {
 		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
 	}
 
-	_afterDialogOpen(event) {
+	_beforeDialogOpen(event) {
 		this.open = true;
 		this.opened = true;
 		this._propagateDialogEvent(event);

package/dist/Tokenizer.js

@@ -15,6 +15,10 @@ import {
 	isRightShiftCtrl,
 	isEnd,
 	isHome,
+	isHomeShift,
+	isEndShift,
+	isHomeCtrl,
+	isEndCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -273,6 +277,14 @@ class Tokenizer extends UI5Element {
 			return this._handleTokenSelection(event, false);
 		}
 
+		if (isHomeShift(event)) {
+			this._handleHomeShift(event);
+		}
+
+		if (isEndShift(event)) {
+			this._handleEndShift(event);
+		}
+
 		this._handleItemNavigation(event, this.tokens);
 	}
 
@@ -293,8 +305,9 @@ class Tokenizer extends UI5Element {
 			return this._handleArrowShift(event.target, tokens, (isRightShift(event) || isRightShiftCtrl(event)));
 		}
 
-		if (isHome(event) || isEnd(event)) {
-			return this._handleHome(tokens, isEnd(event));
+		if (isHome(event) || isEnd(event) || isHomeCtrl(event) || isEndCtrl(event)) {
+			event.preventDefault();
+			return this._handleHome(tokens, isEnd(event) || isEndCtrl(event));
 		}
 
 		if (isCtrl && event.key.toLowerCase() === "a") {
@@ -315,6 +328,30 @@ class Tokenizer extends UI5Element {
 		this._itemNav.setCurrentItem(tokens[index]);
 	}
 
+	_handleHomeShift(event) {
+		const tokens = this.tokens;
+		const currentTokenIdx = tokens.indexOf(event.target);
+
+		tokens.filter((token, index) => index <= currentTokenIdx).forEach(token => {
+			token.selected = true;
+		});
+
+		tokens[0].focus();
+		this._itemNav.setCurrentItem(tokens[0]);
+	}
+
+	_handleEndShift(event) {
+		const tokens = this.tokens;
+		const currentTokenIdx = tokens.indexOf(event.target);
+
+		tokens.filter((token, index) => index >= currentTokenIdx).forEach(token => {
+			token.selected = true;
+		});
+
+		tokens[tokens.length - 1].focus();
+		this._itemNav.setCurrentItem(tokens[tokens.length - 1]);
+	}
+
 	_calcNextTokenIndex(focusedToken, tokens, backwards) {
 		if (!tokens.length) {
 			return -1;

package/dist/api.json

@@ -437,7 +437,7 @@
           "visibility": "public",
           "since": "1.2.0",
           "type": "string",
-          "description": "Defines the tooltip of the button. <br> <b>Note:</b> Tooltips should only be set to icon-only buttons."
+          "description": "Defines the tooltip of the component. <br> <b>Note:</b> We recommend setting tooltip to icon-only components."
         }
       ],
       "slots": [

package/dist/generated/templates/ResponsivePopoverTemplate.lit.js

@@ -2,7 +2,7 @@
 import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
 const block0 = (context, tags, suffix) => html`${ context._isPhone ? block1(context, tags, suffix) : block7(context, tags, suffix) }`;
-const block1 = (context, tags, suffix) => html`<${scopeTag("ui5-dialog", tags, suffix)} accessible-name=${ifDefined(context.accessibleName)} accessible-name-ref=${ifDefined(context.accessibleNameRef)} stretch _disable-initial-focus @ui5-before-open="${ifDefined(context._propagateDialogEvent)}" @ui5-after-open="${ifDefined(context._afterDialogOpen)}" @ui5-before-close="${ifDefined(context._propagateDialogEvent)}" @ui5-after-close="${ifDefined(context._afterDialogClose)}" exportparts="content, header, footer">${ !context._hideHeader ? block2(context, tags, suffix) : undefined }<slot></slot><slot slot="footer" name="footer"></slot></${scopeTag("ui5-dialog", tags, suffix)}>`;
+const block1 = (context, tags, suffix) => html`<${scopeTag("ui5-dialog", tags, suffix)} accessible-name=${ifDefined(context.accessibleName)} accessible-name-ref=${ifDefined(context.accessibleNameRef)} stretch _disable-initial-focus @ui5-before-open="${ifDefined(context._beforeDialogOpen)}" @ui5-after-open="${ifDefined(context._propagateDialogEvent)}" @ui5-before-close="${ifDefined(context._propagateDialogEvent)}" @ui5-after-close="${ifDefined(context._afterDialogClose)}" exportparts="content, header, footer">${ !context._hideHeader ? block2(context, tags, suffix) : undefined }<slot></slot><slot slot="footer" name="footer"></slot></${scopeTag("ui5-dialog", tags, suffix)}>`;
 const block2 = (context, tags, suffix) => html`${ context.header.length ? block3(context, tags, suffix) : block4(context, tags, suffix) }`;
 const block3 = (context, tags, suffix) => html`<slot slot="header" name="header"></slot>`;
 const block4 = (context, tags, suffix) => html`<div class="${classMap(context.classes.header)}" slot="header">${ context.headerText ? block5(context, tags, suffix) : undefined }${ !context._hideCloseButton ? block6(context, tags, suffix) : undefined }</div>`;

package/dist/generated/templates/SegmentedButtonItemTemplate.lit.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
-const block0 = (context, tags, suffix) => html`<li role="option" aria-roledescription="${ifDefined(context.ariaDescription)}" aria-posinset="${ifDefined(context.posInSet)}" aria-setsize="${ifDefined(context.sizeOfSet)}" aria-selected="${ifDefined(context.pressed)}" class="ui5-button-root" aria-disabled="${ifDefined(context.disabled)}" data-sap-focus-ref  dir="${ifDefined(context.effectiveDir)}" @focusout=${context._onfocusout} @focusin=${context._onfocusin} @click=${context._onclick} @mousedown=${context._onmousedown} @mouseup=${context._onmouseup} @keydown=${context._onkeydown} @keyup=${context._onkeyup} @touchstart="${context._ontouchstart}" @touchend="${context._ontouchend}" tabindex=${ifDefined(context.tabIndexValue)} aria-label="${ifDefined(context.ariaLabelText)}" title="${ifDefined(context.title)}">${ context.icon ? block1(context, tags, suffix) : undefined }<span id="${ifDefined(context._id)}-content" class="ui5-button-text"><bdi><slot></slot></bdi></span></li> `;
+const block0 = (context, tags, suffix) => html`<li role="option" aria-roledescription="${ifDefined(context.ariaDescription)}" aria-posinset="${ifDefined(context.posInSet)}" aria-setsize="${ifDefined(context.sizeOfSet)}" aria-selected="${ifDefined(context.pressed)}" class="ui5-button-root" aria-disabled="${ifDefined(context.disabled)}" data-sap-focus-ref  dir="${ifDefined(context.effectiveDir)}" @focusout=${context._onfocusout} @focusin=${context._onfocusin} @click=${context._onclick} @mousedown=${context._onmousedown} @mouseup=${context._onmouseup} @keydown=${context._onkeydown} @keyup=${context._onkeyup} @touchstart="${context._ontouchstart}" @touchend="${context._ontouchend}" tabindex=${ifDefined(context.tabIndexValue)} aria-label="${ifDefined(context.ariaLabelText)}" title="${ifDefined(context.tooltip)}">${ context.icon ? block1(context, tags, suffix) : undefined }<span id="${ifDefined(context._id)}-content" class="ui5-button-text"><bdi><slot></slot></bdi></span></li> `;
 const block1 = (context, tags, suffix) => html`<${scopeTag("ui5-icon", tags, suffix)} class="ui5-button-icon" name="${ifDefined(context.icon)}" part="icon" ?show-tooltip=${context.showIconTooltip}></${scopeTag("ui5-icon", tags, suffix)}>`;
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -42,14 +42,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.2.0",
-    "@ui5/webcomponents-icons": "1.2.0",
-    "@ui5/webcomponents-ie11": "1.2.0",
-    "@ui5/webcomponents-localization": "1.2.0",
-    "@ui5/webcomponents-theming": "1.2.0"
+    "@ui5/webcomponents-base": "1.2.1",
+    "@ui5/webcomponents-icons": "1.2.1",
+    "@ui5/webcomponents-ie11": "1.2.1",
+    "@ui5/webcomponents-localization": "1.2.1",
+    "@ui5/webcomponents-theming": "1.2.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.2.0",
+    "@ui5/webcomponents-tools": "1.2.1",
     "chromedriver": "98.0.0"
   }
 }

package/src/Button.js

@@ -113,9 +113,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the tooltip of the button.
+		 * Defines the tooltip of the component.
 		 * <br>
-		 * <b>Note:</b> Tooltips should only be set to icon-only buttons.
+		 * <b>Note:</b> We recommend setting tooltip to icon-only components.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public

package/src/MultiComboBox.js

@@ -11,6 +11,8 @@ import {
 	isHome,
 	isTabNext,
 	isTabPrevious,
+	isHomeCtrl,
+	isEndCtrl,
 	isCtrlA,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -585,6 +587,14 @@ class MultiComboBox extends UI5Element {
 		this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
 	}
 
+	_handlePageUp(event) {
+		event.preventDefault();
+	}
+
+	_handlePageDown(event) {
+		event.preventDefault();
+	}
+
 	_handleBackspace(event) {
 		if (event.target.value === "") {
 			event.preventDefault();
@@ -661,6 +671,16 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
+		if (isHomeCtrl(event)) {
+			this.list._itemNavigation._handleHome(event);
+			this.list.items[this.list._itemNavigation._currentIndex].focus();
+		}
+
+		if (isEndCtrl(event)) {
+			this.list._itemNavigation._handleEnd(event);
+			this.list.items[this.list._itemNavigation._currentIndex].focus();
+		}
+
 		event.preventDefault();
 
 		if (isCtrlA(event)) {

package/src/ResponsivePopover.hbs

@@ -4,8 +4,8 @@
 		accessible-name-ref={{accessibleNameRef}}
 		stretch
 		_disable-initial-focus
-		@ui5-before-open="{{_propagateDialogEvent}}"
-		@ui5-after-open="{{_afterDialogOpen}}"
+		@ui5-before-open="{{_beforeDialogOpen}}"
+		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
 		@ui5-after-close="{{_afterDialogClose}}"
 		exportparts="content, header, footer"

package/src/ResponsivePopover.js

@@ -183,7 +183,7 @@ class ResponsivePopover extends Popover {
 		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
 	}
 
-	_afterDialogOpen(event) {
+	_beforeDialogOpen(event) {
 		this.open = true;
 		this.opened = true;
 		this._propagateDialogEvent(event);

package/src/SegmentedButtonItem.hbs

@@ -20,7 +20,7 @@
 		@touchend="{{_ontouchend}}"
 		tabindex={{tabIndexValue}}
 		aria-label="{{ariaLabelText}}"
-		title="{{title}}"
+		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon

package/src/Tokenizer.js

@@ -15,6 +15,10 @@ import {
 	isRightShiftCtrl,
 	isEnd,
 	isHome,
+	isHomeShift,
+	isEndShift,
+	isHomeCtrl,
+	isEndCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -273,6 +277,14 @@ class Tokenizer extends UI5Element {
 			return this._handleTokenSelection(event, false);
 		}
 
+		if (isHomeShift(event)) {
+			this._handleHomeShift(event);
+		}
+
+		if (isEndShift(event)) {
+			this._handleEndShift(event);
+		}
+
 		this._handleItemNavigation(event, this.tokens);
 	}
 
@@ -293,8 +305,9 @@ class Tokenizer extends UI5Element {
 			return this._handleArrowShift(event.target, tokens, (isRightShift(event) || isRightShiftCtrl(event)));
 		}
 
-		if (isHome(event) || isEnd(event)) {
-			return this._handleHome(tokens, isEnd(event));
+		if (isHome(event) || isEnd(event) || isHomeCtrl(event) || isEndCtrl(event)) {
+			event.preventDefault();
+			return this._handleHome(tokens, isEnd(event) || isEndCtrl(event));
 		}
 
 		if (isCtrl && event.key.toLowerCase() === "a") {
@@ -315,6 +328,30 @@ class Tokenizer extends UI5Element {
 		this._itemNav.setCurrentItem(tokens[index]);
 	}
 
+	_handleHomeShift(event) {
+		const tokens = this.tokens;
+		const currentTokenIdx = tokens.indexOf(event.target);
+
+		tokens.filter((token, index) => index <= currentTokenIdx).forEach(token => {
+			token.selected = true;
+		});
+
+		tokens[0].focus();
+		this._itemNav.setCurrentItem(tokens[0]);
+	}
+
+	_handleEndShift(event) {
+		const tokens = this.tokens;
+		const currentTokenIdx = tokens.indexOf(event.target);
+
+		tokens.filter((token, index) => index >= currentTokenIdx).forEach(token => {
+			token.selected = true;
+		});
+
+		tokens[tokens.length - 1].focus();
+		this._itemNav.setCurrentItem(tokens[tokens.length - 1]);
+	}
+
 	_calcNextTokenIndex(focusedToken, tokens, backwards) {
 		if (!tokens.length) {
 			return -1;