refactor(ui5-select): change default slot from list items to options (#532)

This change makes the ui5-select web component use dedicated items: ui5-option instead of ui5-li

BREAKING CHANGE: Use ui5-option instead of ui5-li in ui5-select

Author: MapTo0

packages/base/src/UI5Element.js

@@ -39,7 +39,7 @@ class UI5Element extends HTMLElement {
 	}
 
 	onThemeChanged() {
-		if (window.ShadyDOM) {
+		if (window.ShadyDOM || this.constructor.getMetadata().getNoShadowDOM()) {
 			// polyfill theme handling is in head styles directly
 			return;
 		}

packages/main/bundle.esm.js

@@ -26,6 +26,7 @@ import Popover from "./dist/Popover.js";
 import Panel from "./dist/Panel.js";
 import RadioButton from "./dist/RadioButton.js";
 import Select from "./dist/Select.js";
+import Option from "./dist/Option.js";
 import ShellBar from "./dist/ShellBar.js";
 import ShellBarItem from "./dist/ShellBarItem.js";
 import Switch from "./dist/Switch.js";

packages/main/src/ListItem.js

@@ -80,8 +80,14 @@ class ListItem extends ListItemBase {
 		return [styles, ListItemBase.styles];
 	}
 
-	constructor() {
-		super();
+	constructor(props) {
+		super(props);
+
+		this.deactivateByKey = event => {
+			if (isEnter(event)) {
+				this.deactivate();
+			}
+		};
 
 		this.deactivate = () => {
 			if (this._active) {
@@ -94,10 +100,12 @@ class ListItem extends ListItemBase {
 
 	onEnterDOM() {
 		document.addEventListener("mouseup", this.deactivate);
+		document.addEventListener("keyup", this.deactivateByKey);
 	}
 
 	onExitDOM() {
 		document.removeEventListener("mouseup", this.deactivate);
+		document.removeEventListener("keyup", this.deactivateByKey);
 	}
 
 	onkeydown(event) {

packages/main/src/Option.js

@@ -0,0 +1,65 @@
+import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
+import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
+
+/**
+* @public
+*/
+const metadata = {
+	tag: "ui5-option",
+	noShadowDOM: true,
+	properties: /** @lends  sap.ui.webcomponents.main.Option.prototype */ {
+
+		/**
+		 * Defines the selected state of the <code>ui5-option</code>.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		selected: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the <code>icon</code> source URI.
+		 * </br></br>
+		 * <b>Note:</b>
+		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		icon: {
+			type: String,
+			defaultValue: null,
+		},
+	},
+
+	events: /** @lends sap.ui.webcomponents.main.Option.prototype */ {},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-option</code> component defines the content of an opton in the <code>ui5-select</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Option
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-option
+ * @public
+ */
+class Option extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+Bootstrap.boot().then(_ => {
+	Option.define();
+});
+
+export default Option;

packages/main/src/Select.hbs

@@ -2,28 +2,39 @@
 	class="{{classes.main}}"
 	tabindex="{{tabIndex}}"
 	dir="{{rtl}}"
+	@keydown="{{_keydown}}"
+	@keyup="{{_keyup}}"
 >
 	<div
 		class="sapWCSelectLabel"
-		@click="{{toggleList}}">
+		@click="{{_togglePopover}}">
 		<ui5-label>{{_text}}</ui5-label>
 	</div>
 
-	{{#if items}}
+	{{#if options}}
 		<ui5-popover
+			id="ui5-select--popover"
 			placement-type="Bottom"
 			no-header
 			no-arrow
-			horizontal-align="Stretch">
-				<ui5-list separators="None">
-					<slot></slot>
+			horizontal-align="Stretch"
+			@ui5-afterOpen="{{_applyFocusAfterOpen}}"
+			@ui5-beforeOpen="{{_beforeOpen}}"
+			@ui5-afterClose="{{_afterClose}}"
+		>
+				<ui5-list mode="SingleSelect" separators="None" @keydown="{{_handlePickerKeydown}}" @ui5-itemPress="{{_selectionChange}}">
+					{{#each _syncedOptions}}
+						<ui5-li ?selected="{{this.selected}}" icon="{{this.icon}}" id="{{this.id}}-li">
+							{{this.textContent}}
+						</ui5-li>
+					{{/each}}
 				</ui5-list>
 		</ui5-popover>
 	{{/if}}
 
 	<ui5-icon
 		src="sap-icon://slim-arrow-down"
 		class="sapWCSelectDropDownIcon"
-		@ui5-press="{{toggleList}}"
+		@ui5-press="{{_togglePopover}}"
 	></ui5-icon>
 </div>