Merge remote-tracking branch 'upstream/main' into ui5-tree-active-state

packages/base/src/Device.ts

@@ -49,6 +49,12 @@ const internals = {
 		}
 		return navigator.platform.indexOf("Win") !== -1;
 	},
+	get macOS() {
+		if (isSSR) {
+			return false;
+		}
+		return !!navigator.userAgent.match(/Macintosh|Mac OS X/i);
+	},
 	get iOS() {
 		if (isSSR) {
 			return false;
@@ -184,6 +190,10 @@ const isIOS = (): boolean => {
 	return internals.iOS;
 };
 
+const isMac = (): boolean => {
+	return internals.macOS;
+};
+
 const isAndroid = (): boolean => {
 	return internals.android || internals.androidPhone;
 };
@@ -200,4 +210,5 @@ export {
 	isCombi,
 	isIOS,
 	isAndroid,
+	isMac,
 };

packages/main/src/ComboBox.ts

@@ -267,15 +267,6 @@ class ComboBox extends UI5Element {
 
 	/**
 	 * Defines the value state of the component.
-	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>None</code></li>
-	 * <li><code>Error</code></li>
-	 * <li><code>Warning</code></li>
-	 * <li><code>Success</code></li>
-	 * <li><code>Information</code></li>
-	 * </ul>
 	 *
 	 * @type {sap.ui.webc.base.types.ValueState}
 	 * @name sap.ui.webc.main.ComboBox.prototype.valueState
@@ -323,7 +314,6 @@ class ComboBox extends UI5Element {
 
 	/**
 	 * Defines the filter type of the component.
-	 * Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.
 	 *
 	 * @type {sap.ui.webc.main.types.ComboBoxFilter}
 	 * @name sap.ui.webc.main.ComboBox.prototype.filter
@@ -352,7 +342,7 @@ class ComboBox extends UI5Element {
 	 *
 	 * @type {string}
 	 * @name sap.ui.webc.main.ComboBox.prototype.accessibleName
-	 * @defaultvalue: ""
+	 * @defaultvalue ""
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */

packages/main/src/Select.ts

@@ -816,6 +816,19 @@ class Select extends UI5Element implements IFormElement {
 		this._toggleRespPopover();
 	}
 
+	_scrollSelectedItem() {
+		if (this._isPickerOpen) {
+			const itemRef = this._currentlySelectedOption.getDomRef();
+			if (itemRef) {
+				itemRef.scrollIntoView({
+					behavior: "auto",
+					block: "nearest",
+					inline: "nearest",
+				});
+			}
+		}
+	}
+
 	_handleArrowNavigation(e: KeyboardEvent) {
 		let nextIndex = -1;
 		const currentIndex = this._selectedIndex;
@@ -835,6 +848,7 @@ class Select extends UI5Element implements IFormElement {
 			// The aria-activedescendents attribute can't be used,
 			// because listitem elements are in different shadow dom
 			this.itemSelectionAnnounce();
+			this._scrollSelectedItem();
 		}
 	}
 
@@ -882,6 +896,7 @@ class Select extends UI5Element implements IFormElement {
 		this.opened = true;
 		this.fireEvent<CustomEvent>("open");
 		this.itemSelectionAnnounce();
+		this._scrollSelectedItem();
 	}
 
 	_afterClose() {

packages/main/src/TabContainer.ts

@@ -24,6 +24,7 @@ import {
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import {
@@ -812,8 +813,8 @@ class TabContainer extends UI5Element {
 			}
 
 			tab._style = {
-				"--_ui5-tab-indentation-level": level,
-				"--_ui5-tab-extra-indent": extraIndent ? 1 : null,
+				[getScopedVarName("--_ui5-tab-indentation-level")]: level,
+				[getScopedVarName("--_ui5-tab-extra-indent")]: extraIndent ? 1 : null,
 			};
 		});
 	}

packages/main/src/Table.ts

@@ -381,13 +381,7 @@ class Table extends UI5Element {
 
 	/**
 	 * Defines the mode of the component.
-	 * <br><br>
-	 * Available options are:
-	 * <ul>
-	 * <li><code>MultiSelect</code></li>
-	 * <li><code>SingleSelect</code></li>
-	 * <li><code>None</code></li>
-	 * <ul>
+	 *
 	 * @type {sap.ui.webc.main.types.TableMode}
 	 * @name sap.ui.webc.main.Table.prototype.mode
 	 * @defaultvalue "None"

packages/main/src/i18n/messagebundle_en_US_saprigi.properties

@@ -139,6 +139,8 @@ MESSAGE_STRIP_INFORMATION=‍‌​‍‍‍‌​‍​​​​‌‌
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=‌​‍‍‌‌‌​‌​‍‌‌‍‌​​‍‌‌​‍‍‌‌‍‍‌​‌​​‍​​‌​​​‍‍OK
 
+RADIO_BUTTON_GROUP_REQUIRED=‍‌​​‍‌​‌​‌‍‍‍​‍‍​‍‍‌‌‍‌​‍‍‍​‍​​‌‌‌‌‍​‍‌Select one of the available options.
+
 VALUE_STATE_ERROR_ALREADY_SELECTED=‌​‌‍‌‌‌‍‍‍‍‍​​‌‍‌​‌​​‌‍​​‌‍‌‍‍‍​‍​​​‍​‌‍‌This value is already selected.
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=‍‌​‍​​‍‍‍‌‌​‍‌‍​​‌​‍‍​‌​​​‌​​‌​​‌‍​​‍​​‌Multi Value Input

packages/main/test/specs/Select.spec.js

@@ -540,6 +540,24 @@ describe("Select general interaction", () => {
 		await firstItem.click();
 		assert.notOk(await popover.getProperty("opened"), "Select is closed.");
 	});
+
+	it("Tests if currently selected option is visible in the viewport when keyboard navigation is used", async () => {
+		await browser.setWindowSize(600, 100);
+
+		const select = await browser.$("#warningSelect");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#warningSelect");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+		await select.click();
+		assert.ok(await popover.getProperty("opened"), "Select is opened.");
+
+		await select.keys("ArrowDown");
+		await select.keys("ArrowDown");
+		await select.keys("ArrowDown");
+
+		const selectedOption = await popover.$("ui5-list").$("ui5-li[selected]");
+		assert.ok(await selectedOption.isClickable(), "Selected option is visible in the viewport.");
+	});
 });
 
 describe("Attributes propagation", () => {

packages/main/test/specs/Toolbar.spec.js

@@ -5,19 +5,6 @@ describe("Toolbar general interaction", () => {
 		await browser.url(`test/pages/Toolbar.html`);
 	});
 
-	it("Should open popover when pressing overflow button", async () => {
-		await browser.setWindowSize(500, 1080);
-		const otb = await browser.$("#otb_a");
-		const overflowButton = await otb.shadow$(".ui5-tb-overflow-btn");
-
-		await overflowButton.click();
-
-		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_a");
-		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
-		assert.strictEqual(await popover.getAttribute("open"), 'true', "overflow popover created and opened on click on overflow button");
-		await browser.setWindowSize(1920, 1080);
-	});
-
 	it("Should move button with alwaysOverflow priority to overflow popover", async () => {
 
 		const otb = await browser.$("#otb_d");
@@ -34,6 +21,19 @@ describe("Toolbar general interaction", () => {
 		assert.ok(await employee_button.hasClass("ui5-tb-popover-item"), "'Employee' button is moved in overflow popover since it has 'Always' priority");
 	});
 
+	it("Should open popover when pressing overflow button", async () => {
+		await browser.setWindowSize(500, 1080);
+		const otb = await browser.$("#otb_a");
+		const overflowButton = await otb.shadow$(".ui5-tb-overflow-btn");
+
+		await overflowButton.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_a");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+		assert.strictEqual(await popover.getAttribute("open"), 'true', "overflow popover created and opened on click on overflow button");
+		await browser.setWindowSize(1920, 1080);
+	});
+
 	it("Should not move button with neverOverflow priority to overflow popover", async () => {
 		const otb = await browser.$("#otb_c");
 

packages/playground/_stories/main/ComboBox/ComboBox.stories.ts

@@ -17,7 +17,7 @@ import ComboBoxFilter from "@ui5/webcomponents/dist/types/ComboBoxFilter.js";
 const component = "ui5-combobox";
 
 export default {
-	title: "Main/ComboBox",
+	title: "Main/Combo Box",
 	component: "ComboBox",
 	subcomponents: {
 		ComboBoxItem: "ComboBoxItem",
@@ -54,18 +54,14 @@ export const Basic = Template.bind({});
 Basic.args = {
 	placeholder: "Enter value",
 	default: `
-		<ui5-cb-item text="Item 1"></ui5-cb-item>
-		<ui5-cb-item text="Item 2"></ui5-cb-item>
-		<ui5-cb-item text="Item 3"></ui5-cb-item>
+	<ui5-cb-item text="Austria"></ui5-cb-item>
+	<ui5-cb-item text="Bulgaria"></ui5-cb-item>
+	<ui5-cb-item text="Germany"></ui5-cb-item>
+	<ui5-cb-item text="Italy"></ui5-cb-item>
+	<ui5-cb-item text="Spain"></ui5-cb-item>
 	`,
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-	disabled: true,
-	value: "Disabled",
-};
-
 export const Filters = Template.bind({});
 Filters.args = {
 	placeholder: "Contains Filtering",
@@ -74,30 +70,31 @@ Filters.args = {
 		<ui5-cb-item text="Austria"></ui5-cb-item>
 		<ui5-cb-item text="Bulgaria"></ui5-cb-item>
 		<ui5-cb-item text="Germany"></ui5-cb-item>
-		<ui5-cb-item text="United Kingdom"></ui5-cb-item>
 		<ui5-cb-item text="Kazakhstan"></ui5-cb-item>
+		<ui5-cb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-cb-item>
 	`,
 };
 
-export const TwoColumns = Template.bind({});
-TwoColumns.args = {
+export const TwoColumnsLayout = Template.bind({});
+TwoColumnsLayout.args = {
 	placeholder: "Two-column layout",
 	default: `
 		<ui5-cb-item text="Austria" additional-text="AT"></ui5-cb-item>
 		<ui5-cb-item text="Belgium" additional-text="BE"></ui5-cb-item>
 		<ui5-cb-item text="Brazil" additional-text="BR"></ui5-cb-item>
 		<ui5-cb-item text="Bulgaria" additional-text="BG"></ui5-cb-item>
 		<ui5-cb-item text="Canada" additional-text="CA"></ui5-cb-item>
+		<ui5-cb-item text="The United Kingdom of Great Britain and Northern Ireland" additional-text="UK"></ui5-cb-item>
 	`,
 };
 
-export const GroupingItems = Template.bind({});
-GroupingItems.args = {
-	placeholder: "ComboBox with grouping of suggestions",
+export const Grouping = Template.bind({});
+Grouping.args = {
+	placeholder: "Grouping of items",
 	default: `
 		<ui5-cb-group-item text="A"></ui5-cb-group-item>
 		<ui5-cb-item text="Argentina"></ui5-cb-item>
-		<ui5-cb-item text="Australia"></ui5-cb-item>
+		<ui5-cb-item text="Australia"></ui5-cb-item>	
 		<ui5-cb-item text="Austria"></ui5-cb-item>	
 		<ui5-cb-group-item text="B"></ui5-cb-group-item>
 		<ui5-cb-item text="Bahrain"></ui5-cb-item>