@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/src/ExpandableTextTemplate.tsx

@@ -23,7 +23,6 @@ export default function ExpandableTextTemplate(this: ExpandableText) {
 					accessibleName={this._accessibleNameForToggle}
 					accessibilityAttributes={this._accessibilityAttributesForToggle}
 					onClick={this._handleToggleClick}
-					onMouseDown={this._handleToggleMousedown}
 				>
 					{this._textForToggle}
 				</Link>

package/src/FormTemplate.tsx

@@ -6,6 +6,7 @@ export default function FormTemplate(this: Form) {
 		<div
 			class="ui5-form-root"
 			role={this.effectiveAccessibleRole}
+			aria-label={this.effectiveAccessibleName}
 			aria-labelledby={this.effectiveАccessibleNameRef}
 		>
 			{this.hasHeader &&
@@ -13,7 +14,7 @@ export default function FormTemplate(this: Form) {
 					{this.hasCustomHeader ?
 						<slot name="header"></slot>
 						:
-						<Title id={`${this._id}-header-text`} level="H4">{this.headerText}</Title>
+						<Title id={`${this._id}-header-text`} level={this.headerLevel}>{this.headerText}</Title>
 					}
 				</div>
 			}
@@ -38,7 +39,7 @@ export default function FormTemplate(this: Form) {
 											<div class="ui5-form-group" role="form" aria-labelledby={groupItemInfo.accessibleNameRef}>
 												{groupItem.headerText &&
 												<div class="ui5-form-group-heading">
-													<Title id={`${groupItem._id}-group-header-text`} level="H6">{groupItem.headerText}</Title>
+													<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
 												</div>
 												}
 

package/src/InputPopoverTemplate.tsx

@@ -1,3 +1,4 @@
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import type Input from "./Input.js";
 import Icon from "./Icon.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
@@ -8,10 +9,12 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
-export default function InputPopoverTemplate(this: Input) {
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+	const suggestionsList = hooks?.suggestionsList;
+
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, valueStateMessage, valueStateMessageInputIcon) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
 
 			{this.hasValueStateMessage &&
 				<Popover

package/src/InputTemplate.tsx

@@ -1,11 +1,13 @@
 import type Input from "./Input.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Icon from "./Icon.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
-type TemplateHook = () => void;
+type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+	const suggestionsList = hooks?.suggestionsList;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -34,6 +36,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
 						role={this.accInfo.role}
+						enterkeyhint={this.hint}
 						aria-controls={this.accInfo.ariaControls}
 						aria-invalid={this.accInfo.ariaInvalid}
 						aria-haspopup={this.accInfo.ariaHasPopup}
@@ -61,6 +64,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<div
 							tabindex={-1}
 							class="ui5-input-clear-icon-wrapper inputIcon"
+							part="clear-icon-wrapper"
 							onClick={this._clear}
 							onMouseDown={this._iconMouseDown}
 						>
@@ -75,7 +79,9 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 					}
 
 					{this.icon.length > 0 &&
-						<div class="ui5-input-icon-root">
+						<div class="ui5-input-icon-root"
+							tabindex={-1}
+						>
 							<slot name="icon"></slot>
 						</div>
 					}
@@ -98,13 +104,17 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
 					}
 
+					{this.accInfo.accessibleDescription &&
+						<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
+					}
+
 					{this.hasValueState &&
 						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 					}
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this) }
+			{ InputPopoverTemplate.call(this, { suggestionsList }) }
 		</>
 	);
 }

package/src/ListBoxItemGroupTemplate.tsx

@@ -0,0 +1,33 @@
+import type ListItemGroup from "./ListItemGroup.js";
+import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import DropIndicator from "./DropIndicator.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
+
+export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }) {
+	const items = hooks?.items || defaultItems;
+
+	return (
+		<ul
+			role="group"
+			class="ui5-group-li-root"
+			onDragEnter={this._ondragenter}
+			onDragOver={this._ondragover}
+			onDrop={this._ondrop}
+			onDragLeave={this._ondragleave}
+		>
+			{this.hasHeader &&
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group}>
+					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
+				</ListItemGroupHeader>
+			}
+
+			{ items.call(this) }
+
+			<DropIndicator orientation="Horizontal" ownerReference={this}/>
+		</ul>
+	);
+}
+
+function defaultItems(this: ListItemGroup) {
+	return <slot></slot>;
+}

package/src/ListItemGroupHeaderTemplate.tsx

@@ -2,9 +2,9 @@ import type ListItemGroupHeader from "./ListItemGroupHeader.js";
 
 export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 	return (
-		<ul
-			role="group"
+		<div
 			part="native-li"
+			role={this.effectiveAccRole}
 			tabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}
 			class={{
 				"ui5-ghli-root": true,
@@ -18,6 +18,8 @@ export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 			<div id={`${this._id}-content`} class="ui5-li-content">
 				<span class="ui5-ghli-title"><slot></slot></span>
 			</div>
-		</ul>
+
+			{this.hasSubItems && <slot name="subItems"></slot>}
+		</div>
 	);
 }

package/src/ListItemGroupTemplate.tsx

@@ -1,32 +1,34 @@
 import type ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
 import DropIndicator from "./DropIndicator.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
 
-export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }) {
-	const items = hooks?.items || defaultItems;
-
+export default function ListItemGroupTemplate(this: ListItemGroup) {
 	return (
-		<ul
-			role="group"
-			class="ui5-group-li-root"
-			onDragEnter={this._ondragenter}
-			onDragOver={this._ondragover}
-			onDrop={this._ondrop}
-			onDragLeave={this._ondragleave}
-		>
+		<>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header">
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
+					<div
+						role="list"
+						slot="subItems"
+						aria-owns={`${this._id}-content`}
+						aria-label={this.headerText}
+					></div>
 				</ListItemGroupHeader>
 			}
+			<div class="ui5-group-li-root"
+				onDragEnter={this._ondragenter}
+				onDragOver={this._ondragover}
+				onDrop={this._ondrop}
+				onDragLeave={this._ondragleave}
+				id={`${this._id}-content`}>
 
-			{ items.call(this) }
+				<slot></slot>
 
-			<DropIndicator orientation="Horizontal" ownerReference={this}/>
-		</ul>
-	);
-}
+				<DropIndicator orientation="Horizontal" ownerReference={this}/>
+			</div>
+		</>
 
-function defaultItems(this: ListItemGroup) {
-	return <slot></slot>;
+	);
 }

package/src/ListItemStandardTemplate.tsx

@@ -2,6 +2,7 @@ import Icon from "./Icon.js";
 import type ListItemStandard from "./ListItemStandard.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
+import WrappingType from "./types/WrappingType.js";
 
 const predefinedHooks: Partial<ListItemHooks> = {
 	imageBegin,
@@ -19,29 +20,67 @@ export default function ListItemStandardTemplate(this: ListItemStandard, hooks?:
 function listItemContent(this: ListItemStandard) {
 	return <>
 		<div class="ui5-li-text-wrapper">
-			<span part="title" class="ui5-li-title">
-				<slot></slot>
-			</span>
-			{this.description && (
-				<div class="ui5-li-description-info-wrapper">
-					<span part="description" class="ui5-li-desc">{this.description}</span>
-					{
-						this.additionalText && (
-							<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
-						)
-					}
-				</div>
-			)}
+			{renderTitle.call(this)}
+			{renderDescription.call(this)}
 
 			{!this.typeActive && <span class="ui5-hidden-text">{this.type}</span>}
 		</div>
 
-		{!this.description && this.additionalText && (
-			<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
-		)}
+		{!this.description && renderAdditionalText.call(this)}
 	</>;
 }
 
+function renderTitle(this: ListItemStandard) {
+	if (this.wrappingType === WrappingType.Normal) {
+		return this.expandableTextTemplate?.call(this, {
+			className: "ui5-li-title",
+			text: this._textContent,
+			maxCharacters: this._maxCharacters,
+			part: "title",
+		});
+	}
+
+	return (
+		<span part="title" class="ui5-li-title">
+			{this.text ? this.text : <slot></slot>}
+		</span>
+	);
+}
+
+function renderDescription(this: ListItemStandard) {
+	if (!this.description) {
+		return null;
+	}
+
+	if (this.wrappingType === WrappingType.Normal) {
+		return (
+			<div class="ui5-li-description-info-wrapper">
+				{this.expandableTextTemplate?.call(this, {
+					className: "ui5-li-desc",
+					text: this.description,
+					maxCharacters: this._maxCharacters,
+					part: "description",
+				})}
+				{renderAdditionalText.call(this)}
+			</div>
+		);
+	}
+
+	return (
+		<div class="ui5-li-description-info-wrapper">
+			<span part="description" class="ui5-li-desc">{this.description}</span>
+			{renderAdditionalText.call(this)}
+		</div>
+	);
+}
+
+function renderAdditionalText(this: ListItemStandard) {
+	if (!this.additionalText) {
+		return null;
+	}
+	return <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>;
+}
+
 function imageBegin(this: ListItemStandard) {
 	if (this.hasImage) {
 		return <div class="ui5-li-image">

package/src/ListItemTemplate.tsx

@@ -99,8 +99,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
 		<span
 			id={`${this._id}-invisibleText`}
 			class="ui5-hidden-text">
-			{this._accInfo.listItemAriaLabel}
-			{this.accessibleName}
+			{this.ariaLabelledByText}
 		</span>
 		<span
 			id={`${this._id}-invisibleText-describedby`}
@@ -145,7 +144,7 @@ function selectionElement(this: ListItem) {
 				onChange={this.onMultiSelectionComponentPress}
 			/>
 		);
-	case this.renderDeleteButton:
+	case this.modeDelete:
 		return (
 			<div class="ui5-li-deletebtn">
 				{
@@ -160,7 +159,6 @@ function selectionElement(this: ListItem) {
 								id={`${this._id}-deleteSelectionElement`}
 								design="Transparent"
 								icon={declineIcon}
-								disabled={this.disableDeleteButton}
 								onClick={this.onDelete}
 								tooltip={this.deleteText}
 							/>

package/src/ListTemplate.tsx

@@ -54,7 +54,7 @@ export default function ListTemplate(this: List) {
 						<slot></slot>
 
 						{this.showNoDataText &&
-							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata">
+							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
 								<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
 									{this.noDataText}
 								</div>
@@ -102,6 +102,7 @@ function moreRow(this: List) {
 				{this.loading &&
 					<BusyIndicator
 						delay={this.loadingDelay}
+						part="growing-button-busy-indicator"
 						class="ui5-list-growing-button-busy-indicator"
 						active>
 					</BusyIndicator>

package/src/MenuItemTemplate.tsx

@@ -1,4 +1,3 @@
-import type { JsxTemplate } from "@ui5/webcomponents-base";
 import type MenuItem from "./MenuItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
@@ -11,16 +10,12 @@ import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-export type MenuItemHooks = ListItemHooks & {
-	listItemPostContent: JsxTemplate,
-}
-
-const predefinedHooks: Partial<MenuItemHooks> = {
+const predefinedHooks: Partial<ListItemHooks> = {
 	listItemContent,
 	iconBegin,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
 
 	return <>
@@ -35,16 +30,6 @@ function listItemContent(this: MenuItem) {
 		{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
 
 		{rightContent.call(this)}
-
-		{this.hasSubmenu && (
-			<div class="ui5-menu-item-submenu-icon" >
-				<Icon
-					part="subicon"
-					name={slimArrowRight}
-					class="ui5-menu-item-icon-end"
-				/>
-			</div>
-		)}
 	</>);
 }
 
@@ -61,7 +46,7 @@ function rightContent(this: MenuItem) {
 			</div>
 		);
 	case this.hasEndContent:
-		return <slot name="endContent"></slot>;
+		return <slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>;
 	case !!this.additionalText:
 		return (
 			<span
@@ -88,7 +73,7 @@ function iconBegin(this: MenuItem) {
 function listItemPostContent(this: MenuItem) {
 	return this.hasSubmenu && <ResponsivePopover
 		id={`${this._id}-menu-rp`}
-		class="ui5-menu-rp .ui5-menu-rp-sub-menu"
+		class="ui5-menu-rp ui5-menu-rp-sub-menu"
 		preventInitialFocus={true}
 		preventFocusRestore={true}
 		hideArrow={true}
@@ -138,8 +123,11 @@ function listItemPostContent(this: MenuItem) {
 						accessibleRole="Menu"
 						loading={this.loading}
 						loadingDelay={this.loadingDelay}
+						onMouseOver={this._itemMouseOver}
+						onKeyDown={this._itemKeyDown}
 						// handles event from slotted children
 						onui5-close-menu={this._close}
+						onui5-exit-end-content={this._navigateOutOfEndContent}
 					>
 						<slot></slot>
 					</List>

package/src/MenuTemplate.tsx

@@ -12,6 +12,7 @@ export default function MenuTemplate(this: Menu) {
 			class="ui5-menu-rp"
 			placement="Bottom"
 			verticalAlign="Bottom"
+			horizontalAlign={this.horizontalAlign}
 			opener={this.opener}
 			open={this.open}
 			preventInitialFocus={true}
@@ -54,6 +55,7 @@ export default function MenuTemplate(this: Menu) {
 						onKeyDown={this._itemKeyDown}
 						// handles event from slotted children
 						onui5-close-menu={this._close}
+						onui5-exit-end-content={this._navigateOutOfEndContent}
 					>
 						<slot></slot>
 					</List>)

package/src/MessageStripTemplate.tsx

@@ -19,7 +19,7 @@ export default function MessageStripTemplate(this: MessageStrip) {
 				[this.designClasses]: true,
 			}}
 			role="note"
-			aria-labelledby={this._id}
+			aria-labelledby="hidden-text content-text"
 		>
 
 			{!this.shouldHideIcon &&
@@ -32,8 +32,8 @@ export default function MessageStripTemplate(this: MessageStrip) {
 				</div>
 			}
 
-			<span class="ui5-hidden-text">{this.hiddenText}</span>
-			<span class="ui5-message-strip-text"><slot></slot></span>
+			<span class="ui5-hidden-text" id="hidden-text">{this.hiddenText}</span>
+			<span class="ui5-message-strip-text" id="content-text"><slot></slot></span>
 
 			{!this.hideCloseButton &&
 				<Button
@@ -41,6 +41,7 @@ export default function MessageStripTemplate(this: MessageStrip) {
 					design="Transparent"
 					class="ui5-message-strip-close-button"
 					tooltip={this._closeButtonText}
+					accessibleName={this._closeButtonText}
 					onClick={this._closeClick}
 				/>
 			}

package/src/MultiComboBoxItemGroupTemplate.tsx

@@ -1,8 +1,8 @@
-import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
+import ListBoxItemGroupTemplate from "./ListBoxItemGroupTemplate.js";
 import type MultiComboBoxItemGroup from "./MultiComboBoxItemGroup.js";
 
 export default function MultiComboBoxItemGroupTemplate(this: MultiComboBoxItemGroup) {
-	return [ListItemGroupTemplate.call(this, { items })];
+	return [ListBoxItemGroupTemplate.call(this, { items })];
 }
 
 function items(this: MultiComboBoxItemGroup) {

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -0,0 +1,150 @@
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
+import type MultiComboBox from "./MultiComboBox.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import Input from "./Input.js";
+import ToggleButton from "./ToggleButton.js";
+import SuggestionItem from "./SuggestionItem.js";
+import Icon from "./Icon.js";
+import List from "./List.js";
+import Popover from "./Popover.js";
+import CheckBox from "./CheckBox.js";
+
+export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
+	return (<>
+		<ResponsivePopover
+			placement="Bottom"
+			horizontalAlign="Start"
+			class={this.classes.popover}
+			id={this.responsivePopoverId}
+			hideArrow={true}
+			preventInitialFocus={true}
+			style={this.styles.suggestionsPopover}
+			onui5-selection-change={this._listSelectionChange}
+			onClose={this._afterClose}
+			onBeforeOpen={this._beforeOpen}
+			onBeforeClose={this._beforeClose}
+			onOpen={this._afterOpen}
+			onFocusOut={this._onPopoverFocusOut}
+			accessibleName={this._popupLabel}
+			open={this.open}
+			opener={this}
+		>
+			{this._isPhone && <>
+				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
+					<div class="row">
+						<span>{this._headerTitleText}</span>
+						<Button
+							class="ui5-responsive-popover-close-btn"
+							icon={decline}
+							design="Transparent"
+							onClick={this.handleCancel}
+						>
+						</Button>
+					</div>
+					<div class="row">
+						<Input
+							onInput={this._handleMobileInput}
+							onKeyDown={this._onMobileInputKeydown}
+							placeholder={this.placeholder}
+							valueState={this._dialogInputValueState}
+							showClearIcon={this.showClearIcon}
+							noTypeahead={this.noTypeahead}
+						>
+							{this._filteredItems.map(item => (
+								<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>
+							))}
+						</Input>
+						<ToggleButton
+							slot="header"
+							class="ui5-multi-combobox-toggle-button"
+							icon={multiSelectAll}
+							design="Transparent"
+							pressed={this._showAllItemsButtonPressed}
+							onClick={this.filterSelectedItems}
+							accessibleName={this._showSelectedButtonAccessibleNameText}
+						></ToggleButton>
+					</div>
+				</div>				{this.hasValueStateMessage &&
+					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+						{this.open && valueStateMessage.call(this)}
+					</div>
+				}
+
+				{selectAllWrapper.call(this)}
+			</>}
+
+			{!this._isPhone && <>
+				{this.hasValueStateMessage &&
+					<div slot="header" onKeyDown={this._onListHeaderKeydown} tabIndex={0} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+						{this.open && valueStateMessage.call(this)}
+					</div>
+				}
+
+				{selectAllWrapper.call(this)}
+			</>}
+
+			{this.filterSelected ?
+				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
+					{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
+				</List>
+				:
+				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
+					{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+				</List>
+			}
+
+			{this._isPhone &&
+				<div slot="footer" class="ui5-responsive-popover-footer">
+					<Button
+						design="Transparent"
+						onClick={this.handleOK}
+					>{this._dialogOkButton}</Button>
+				</div>
+			}
+		</ResponsivePopover>
+
+		{this.hasValueStateMessage &&
+			<Popover
+				// skipRegistryUpdate={true}
+				preventInitialFocus={true}
+				preventFocusRestore={true}
+				hideArrow={true}
+				class="ui5-valuestatemessage-popover"
+				placement="Bottom"
+				horizontalAlign={this._valueStatePopoverHorizontalAlign}
+				tabIndex={-1}
+				open={this.valueStateOpen}
+				opener={this}
+			>
+				<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+					<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+					{this.valueStateOpen && valueStateMessage.call(this)}
+				</div>
+			</Popover>
+		}
+	</>);
+}
+
+function valueStateMessage(this: MultiComboBox) {
+	return this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>;
+}
+
+function selectAllWrapper(this: MultiComboBox) {
+	if (this.showSelectAll) {
+		return (
+			<div class="ui5-mcb-select-all-header" onKeyDown={this._onListHeaderKeydown} tabIndex={0}>
+				<CheckBox
+					disabled={this.readonly}
+					checked={this._allSelected}
+					class="ui5-mcb-select-all-checkbox"
+					text={this.selectAllCheckboxLabel}
+					onChange={this._handleSelectAllCheckboxClick}
+				></CheckBox>
+			</div>
+		);
+	}
+}