Merge remote-tracking branch 'upstream/main' into ui5-select-fix

.github/workflows/test-storybook.yaml

@@ -0,0 +1,23 @@
+name: CI - Storybook
+
+on:
+  pull_request:
+  push:
+    branches:
+      - 'main'
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'yarn'
+
+    - name: Install and Build
+      run: |
+        export NODE_OPTIONS="--max_old_space_size=4096"
+        yarn install
+        yarn build:playground

packages/base/index.js

@@ -1,7 +1,7 @@
 // animations/
 import scroll from "./dist/animations/scroll.js";
 import slideDown from "./dist/animations/slideDown.js";
-import slideUp from "./dist/animations/slideup.js";
+import slideUp from "./dist/animations/slideUp.js";
 
 // config/
 import { getAnimationMode, setAnimationMode } from "./dist/config/AnimationMode.js";

packages/base/package.json

@@ -38,7 +38,7 @@
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.116.0",
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0",
+    "chromedriver": "116.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

packages/base/src/connectToComponent.ts

@@ -0,0 +1,77 @@
+import type UI5Element from "./UI5Element.js";
+import { renderDeferred } from "./Render.js";
+import { Interval } from "./types.js";
+
+const MISSING_ELEMENT_POLL_TIMEOUT = 500; // how often to poll for not-yet-in-DOM friend elements
+const connections = new Map<string, HTMLElement>();
+const intervals = new Map<string, Interval>();
+
+type ConnectOptions = {
+	host: UI5Element;
+	propName: string;
+	onConnect?: (friend: HTMLElement) => void;
+	onDisconnect?: (friend: HTMLElement) => void;
+}
+
+const connectToComponent = (options: ConnectOptions): HTMLElement | undefined => {
+	const host = options.host;
+	const propName = options.propName;
+	const friend = host[propName as keyof typeof host] as HTMLElement | string | undefined;
+
+	let connectedTo: HTMLElement | undefined;
+	if (friend === undefined || friend === "") {
+		connectedTo = undefined; // do not return early even if a "menu" property is not set - it may have been set before and cleanup must run
+	} else if (friend instanceof HTMLElement) {
+		connectedTo = friend;
+	} else {
+		const rootNode = host.getRootNode() as Document;
+		connectedTo = (rootNode.getElementById && rootNode.getElementById(friend)) || undefined;
+	}
+
+	const key = `${host._id}-${propName}`;
+	const prevConnectedTo = connections.get(key);
+
+	// Not connected - return undefined
+	if (!connectedTo) {
+		if (prevConnectedTo) { // but first disconnect, if needed
+			options.onDisconnect && options.onDisconnect(prevConnectedTo);
+			connections.delete(key);
+		}
+
+		// if friend element not in DOM yet, start polling
+		if (typeof friend === "string" && friend && !intervals.has(key)) {
+			const interval = setInterval(() => {
+				const rootNode = host.getRootNode() as Document;
+				const found = (rootNode.getElementById && rootNode.getElementById(friend));
+
+				if (found) {
+					clearInterval(intervals.get(key));
+					intervals.delete(key);
+					renderDeferred(host);
+				}
+			}, MISSING_ELEMENT_POLL_TIMEOUT);
+			intervals.set(key, interval);
+		}
+
+		return;
+	}
+
+	// If connected, but still polling, stop polling
+	if (intervals.has(key)) {
+		clearInterval(intervals.get(key));
+		intervals.delete(key);
+	}
+
+	// Connected - either for the first time, or to something else
+	if (prevConnectedTo !== connectedTo) {
+		if (prevConnectedTo) {
+			options.onDisconnect && options.onDisconnect(prevConnectedTo);
+		}
+		options.onConnect && options.onConnect(connectedTo);
+		connections.set(key, connectedTo);
+	}
+
+	return connections.get(key);
+};
+
+export default connectToComponent;

packages/base/src/theming/applyTheme.ts

@@ -4,7 +4,7 @@ import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
-import OpenUI5Support from "../features/OpenUI5Support.js";
+import type OpenUI5Support from "../features/OpenUI5Support.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { getCurrentRuntimeIndex } from "../Runtimes.js";
 
@@ -56,7 +56,7 @@ const detectExternalTheme = async (theme: string) => {
 
 	// If OpenUI5Support is enabled, try to find out if it loaded variables
 	const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
-	if (openUI5Support && OpenUI5Support.isOpenUI5Detected()) {
+	if (openUI5Support && openUI5Support.isOpenUI5Detected()) {
 		const varsLoaded = openUI5Support.cssVariablesLoaded();
 		if (varsLoaded) {
 			return {

packages/fiori/package.json

@@ -49,6 +49,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0"
+    "chromedriver": "116.0.0"
   }
 }

packages/fiori/src/ShellBarItem.ts

@@ -32,7 +32,6 @@ type ShellBarItemClickEventDetail = {
  * @allowPreventDefault
  * @param {HTMLElement} targetRef DOM ref of the clicked element
  * @public
- * @native
  */
 @event("click", {
 	detail: {
@@ -53,6 +52,8 @@ class ShellBarItem extends UI5Element {
 
 	/**
 	 * Defines the item text.
+     * <br><br>
+     * <b>Note:</b> The text is only displayed inside the overflow popover list view.
 	 * @type {string}
 	 * @defaultvalue ""
 	 * @name sap.ui.webc.fiori.ShellBarItem.prototype.text

packages/localization/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@openui5/sap.ui.core": "1.116.0",
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0",
+    "chromedriver": "116.0.0",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },

packages/main/bundle.common.js

@@ -60,6 +60,8 @@ import ResponsivePopover from "./dist/ResponsivePopover.js";
 import SegmentedButton from "./dist/SegmentedButton.js";
 import SegmentedButtonItem from "./dist/SegmentedButtonItem.js";
 import Select from "./dist/Select.js";
+import SelectMenu from "./dist/SelectMenu.js";
+import SelectMenuOption from "./dist/SelectMenuOption.js";
 import Slider from "./dist/Slider.js";
 import SplitButton from "./dist/SplitButton.js";
 import StepInput from "./dist/StepInput.js";
@@ -85,6 +87,11 @@ import TimeSelectionClocks from "./dist/TimeSelectionClocks.js";
 import Title from "./dist/Title.js";
 import Toast from "./dist/Toast.js";
 import ToggleButton from "./dist/ToggleButton.js";
+import Toolbar from "./dist/Toolbar.js";
+import ToolbarButton from "./dist/ToolbarButton.js";
+import ToolbarSeparator from "./dist/ToolbarSeparator.js";
+import ToolbarSpacer from "./dist/ToolbarSpacer.js";
+import ToolbarSelect from "./dist/ToolbarSelect.js";
 import Tree from "./dist/Tree.js";
 import TreeList from "./dist/TreeList.js";
 import TreeItem from "./dist/TreeItem.js";

packages/main/package.json

@@ -50,6 +50,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.17.0-rc.2",
-    "chromedriver": "114.0.0"
+    "chromedriver": "116.0.0"
   }
 }

packages/main/src/CustomListItem.ts

@@ -16,6 +16,20 @@ import customListItemCss from "./generated/themes/CustomListItem.css.js";
  *
  * The component accepts arbitrary HTML content to allow full customization.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-li-custom</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>native-li - Used to style the main li tag of the list item</li>
+ * <li>content - Used to style the content area of the list item</li>
+ * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+ * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+ * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+ * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.CustomListItem

packages/main/src/Interfaces.ts

@@ -133,6 +133,15 @@ const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem";
  */
 const ISelectOption = "sap.ui.webc.main.ISelectOption";
 
+/**
+ * Interface for components that may be slotted inside <code>ui5-select-menu</code> as options
+ *
+ * @name sap.ui.webc.main.ISelectMenuOption
+ * @interface
+ * @public
+ */
+const ISelectMenuOption = "sap.ui.webc.main.ISelectMenuOption";
+
 /**
  * Interface for components that may be slotted inside <code>ui5-tabcontainer</code>
  *
@@ -187,6 +196,24 @@ const IToken = "sap.ui.webc.main.IToken";
  */
 const ITreeItem = "sap.ui.webc.main.ITreeItem";
 
+/**
+ * Interface for toolbar items for the purpose of <code>ui5-toolbar</code>
+ *
+ * @name sap.ui.webc.main.IToolbarItem
+ * @interface
+ * @public
+ */
+const IToolbarItem = "sap.ui.webc.main.IToolbarItem";
+
+/**
+ * Interface for toolbar select items for the purpose of <code>ui5-toolbar-select</code>
+ *
+ * @name sap.ui.webc.main.IToolbarSelectOption
+ * @interface
+ * @public
+ */
+const IToolbarSelectOption = "sap.ui.webc.main.IToolbarSelectOption";
+
 export {
 	IAvatar,
 	IBreadcrumbsItem,
@@ -203,10 +230,13 @@ export {
 	IMultiComboBoxItem,
 	ISegmentedButtonItem,
 	ISelectOption,
+	ISelectMenuOption,
 	ITab,
 	ITableCell,
 	ITableColumn,
 	ITableRow,
 	IToken,
 	ITreeItem,
+	IToolbarItem,
+	IToolbarSelectOption,
 };

packages/main/src/ListItem.hbs

@@ -43,7 +43,7 @@
 		{{#if typeDetail}}
 			<div class="ui5-li-detailbtn">
 				<ui5-button
-					part="edit-button"
+					part="detail-button"
 					design="Transparent"
 					icon="edit"
 					@click="{{onDetailClick}}"

packages/main/src/ListItem.ts

@@ -536,4 +536,5 @@ export type {
 	IAccessibleListItem,
 	SelectionRequestEventDetail,
 	PressEventDetail,
+	AccessibilityAttributes,
 };

packages/main/src/Select.hbs

@@ -27,7 +27,11 @@
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 	>
-		{{_text}}
+		{{#if hasCustomLabel}}
+			<slot name="label"></slot>
+		{{else}}
+			{{_text}}
+		{{/if}}
 	</div>
 
 	<ui5-icon