@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/src/TableHeaderRowTemplate.tsx

@@ -16,8 +16,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 					aria-description={this._selectionCellAriaDescription}
 					aria-colindex={ariaColIndex++}
 					data-ui5-table-selection-cell
-					data-ui5-table-cell-fixed
-					data-ui5-table-acc-text=""
+					data-ui5-acc-text=""
 				>
 					{ !this._isMultiSelect ?
 						<></>
@@ -55,13 +54,35 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="">
+				</TableHeaderCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell" aria-colindex={ariaColIndex++}>
 					<div id="actions-cell-content">{this._i18nRowActions}</div>
 				</TableHeaderCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderNavigated &&
+				<TableHeaderCell id="navigated-cell"
+					data-excluded-from-navigation
+					aria-hidden={true}
+					role="none"
+				>
+					<div id="navigated"></div>
+				</TableHeaderCell>
+			}
+
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="nofocus">
+				</TableHeaderCell>
+			}
+
+			{ this._hasPopin &&
 				<TableHeaderCell id="popin-cell" aria-colindex={ariaColIndex++} data-excluded-from-navigation>
 					<div id="popin-cell-content">{this._i18nRowPopin}</div>
 				</TableHeaderCell>

package/src/TableRowTemplate.tsx

@@ -13,9 +13,9 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				<TableCell id="selection-cell"
 					aria-selected={this._isSelected}
 					aria-colindex={ariaColIndex++}
+					data-border-merged={this._firstVisibleCell?.merged ? "" : null}
 					data-ui5-table-selection-cell
-					data-ui5-table-cell-fixed
-					data-ui5-table-acc-text=""
+					data-ui5-acc-text=""
 				>
 					{ this._isMultiSelect ?
 						<CheckBox id="selection-component"
@@ -27,7 +27,6 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 						:
 						<RadioButton id="selection-component"
 							tabindex={-1}
-							name={this._tableId}
 							checked={this._isSelected}
 							onChange={this._onSelectionChange}
 							accessibleName={this._i18nRowSelector}
@@ -48,10 +47,16 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="">
+				</TableCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell"
 					aria-colindex={ariaColIndex++}
-					data-ui5-table-acc-text={this._actionCellAccText}
+					data-ui5-acc-text={this._actionCellAccText}
 				>
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
@@ -81,7 +86,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				</TableCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="nofocus">
+				</TableCell>
+			}
+
+			{ this._hasPopin &&
 				<TableCell id="popin-cell"
 					data-ui5-table-popin-cell
 					aria-colindex={ariaColIndex++}

package/src/TextAreaPopoverTemplate.tsx

@@ -1,4 +1,5 @@
 import Icon from "./Icon.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import type TextArea from "./TextArea.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
@@ -25,7 +26,7 @@ export default function TextAreaPopoverTemplate(this: TextArea) {
 				class="ui5-valuestatemessage-popover"
 				style={{ "max-width": `${this._width!}px` }}
 				placement="Bottom"
-				horizontalAlign={this._valueStatePopoverHorizontalAlign}
+				horizontalAlign={PopoverHorizontalAlign.Start}
 			>
 				<div slot="header" class={{
 					"ui5-valuestatemessage-root": true,

package/src/TimePickerPopoverTemplate.tsx

@@ -16,13 +16,13 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 		<>
 			<ResponsivePopover
 				id={`${this._id}-responsive-popover`}
-				class="ui5-time-picker-popover"
+				class="ui5-time-picker-popover ui5-popover-with-value-state-header-phone"
 				placement="Bottom"
 				horizontalAlign="Start"
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={!this.hasValueStateText}
+				_hideHeader={this._shouldHideHeader}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
@@ -31,6 +31,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{ !!this.showHeader && defaultHeader.call(this) }
+
 				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
 
 				<TimeSelectionClocks
@@ -61,7 +63,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
-					{ this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+					{ this.hasValueStateText && valueStateTextHeader.call(this) }
 
 					<div class="popover-content">
 						<TimeSelectionInputs
@@ -83,20 +85,30 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 	);
 }
 
+function defaultHeader(this: TimePicker) {
+	return (
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{this._headerTitleText}</span>
+			</div>
+		</div>
+	);
+}
+
 function valueStateMessage(this: TimePicker) {
 	return (
 		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
 	);
 }
 
-function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+function valueStateTextHeader(this: TimePicker) {
 	if (!this.hasValueStateText) {
 		return;
 	}
 
 	return (
 		<div
-			slot="header"
+			slot={!this.showHeader ? "header" : undefined}
 			class={{
 				"ui5-popover-header": true,
 				"ui5-valuestatemessage-header": true,
@@ -106,7 +118,6 @@ function valueStateTextHeader(this: TimePicker, style?: Record<string, string>)
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			}}
-			style={style}
 		>
 			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
 			{ valueStateMessage.call(this) }

package/src/TimePickerTemplate.tsx

@@ -12,7 +12,8 @@ export default function TimePickerTemplate(this: TimePicker) {
 					data-sap-focus-ref
 					id={`${this._id}-inner`}
 					class="ui5-time-picker-input"
-					value={this.value}
+					part="input"
+					value={this.displayValue}
 					placeholder={this._placeholder}
 					disabled={this.disabled}
 					readonly={this.readonly}
@@ -23,6 +24,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					onClick={this._handleInputClick}
 					onChange={this._handleInputChange}
 					onInput={this._handleInputLiveChange}
+					onui5-_request-submit={this._onInputRequestSubmit}
 					onFocusIn={this._onfocusin}
 					onKeyDown={this._onkeydown}
 				>
@@ -39,6 +41,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
+							accessibleName={this.openIconTitle}
 							mode={this._iconMode}
 							onClick={this._togglePicker}
 							class={{
@@ -51,7 +54,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 				</DateTimeInput>
 			</div>
 
-			{ TimePickerPopoverTemplate.call(this) }
+			{TimePickerPopoverTemplate.call(this)}
 		</>
 	);
 }

package/src/ToggleSpinButtonTemplate.tsx

@@ -4,7 +4,6 @@ import buttonTemplate from "./ButtonTemplate.js";
 export default function ToggleSpinButtonTemplate(this: ToggleSpinButton) {
 	return (<>
 		{ buttonTemplate.call(this, {
-			ariaPressed: this.pressed,
 			ariaValueMax: this.valueMax,
 			ariaValueMin: this.valueMin,
 			ariaValueNow: this.valueNow,

package/src/ToolbarButtonTemplate.tsx

@@ -22,7 +22,7 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
 			data-ui5-stable={this.stableDomRef}
 			onClick={(...args) => this.onClick(...args)}
 		>
-			{this.text}
+			{this.effectiveText}
 		</Button>
 	);
 }

package/src/ToolbarItemTemplate.tsx

@@ -0,0 +1,7 @@
+import type ToolbarItem from "./ToolbarItem.js";
+
+export default function ToolbarItemTemplate(this: ToolbarItem) {
+	return (
+		<slot></slot>
+	);
+}

package/src/ToolbarTemplate.tsx

@@ -14,15 +14,11 @@ export default function ToolbarTemplate(this: Toolbar) {
 			aria-label={this.accInfo.root.accessibleName}
 		>
 			{this.standardItems.map(item => {
-				if ("styles" in item) {
-					return (
-						<div class="ui5-tb-item" id={item._individualSlot} style={item.styles as string}>
-							<slot name={item._individualSlot}></slot>
-						</div>
-					);
-				}
 				return (
-					<div class="ui5-tb-item" id={item._individualSlot}>
+					<div class={{
+						"ui5-tb-item": !item.hasFlexibleWidth,
+						"ui5-tb-self-overflow": item.hasOverflow,
+					}} id={item._individualSlot} style={item.isSpacer ? item.styles : undefined}>
 						<slot name={item._individualSlot}></slot>
 					</div>
 				);
@@ -56,15 +52,12 @@ export default function ToolbarTemplate(this: Toolbar) {
 				"ui5-overflow-list": true
 			}}>
 				{this.overflowItems.map(item => {
-					if (item.isSeparator) {
-						return (
-							<div class="ui5-tb-popover-item ui5-tb-separator ui5-tb-separator-in-overflow" id={item._individualSlot}>
-								<slot name={item._individualSlot}></slot>
-							</div>
-						);
-					}
 					return (
-						<div class="ui5-tb-popover-item" id={item._individualSlot}>
+						<div class= {{
+							"ui5-tb-popover-item": true,
+							"ui5-tb-separator ui5-tb-separator-in-overflow": item.isSeparator,
+							"ui5-tb-popover-self-overflow": item.hasOverflow,
+						}}id={item._individualSlot}>
 							<slot name={item._individualSlot}></slot>
 						</div>
 					);

package/src/TreeItemBaseTemplate.tsx

@@ -2,7 +2,7 @@ import type TreeItemBase from "./TreeItemBase.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import Icon from "./Icon.js";
 import navigationDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import navigatioRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import navigationRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
 const predefinedHooks: Partial<ListItemHooks> = {
@@ -31,7 +31,7 @@ function listItemPreContent(this: TreeItemBase) {
 				<Icon
 					part="toggle-icon"
 					class="ui5-li-tree-toggle-icon"
-					name={this.expanded ? navigationDownArrow : navigatioRightArrow}
+					name={this.expanded ? navigationDownArrow : navigationRightArrow}
 					showTooltip={true}
 					accessibleName={this.iconAccessibleName}
 					// @ts-expect-error

package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx

@@ -10,8 +10,14 @@ export default function DateTimeRangeTemplate(this: DynamicDateRange) {
 	const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
 
 	const getDateFromValue = (index = 0) => {
-		if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
-			return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+		const source = this.currentValue?.operator === currentOperator && this.currentValue.values?.length === 2
+			? this.currentValue
+			: this.value?.operator === currentOperator && this.value.values?.length === 2
+				? this.value
+				: undefined;
+
+		if (source) {
+			return this.getOption(source.operator)?.format(source)?.split("-")[index].trim();
 		}
 		return undefined;
 	};

package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx

@@ -8,7 +8,7 @@ import type FromDateTimeOption from "./FromDateTime.js";
 
 export default function FromDateTime(this: DynamicDateRange) {
 	const currentOption = this._currentOption as FromDateTimeOption;
-	const currentValue = this.value?.values ? this.value.values[0] as Date : undefined;
+	const currentValue = (this.currentValue?.values ?? this.value?.values)?.[0] as Date | undefined;
 	return (
 		<div class="ui5-dynamic-date-range-option-datetime-container">
 			<div class="ui5-dt-picker-header">

package/src/features/InputSuggestionsTemplate.tsx

@@ -6,9 +6,12 @@ import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 import ListAccessibleRole from "../types/ListAccessibleRole.js";
+import Title from "../Title.js";
 
-export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
 	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	// Mobile header hook - intended only for MultiInput design scenario
+	const mobileHeader = hooks?.mobileHeader;
 	const valueStateMessage = hooks?.valueStateMessage;
 	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
 
@@ -33,7 +36,13 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 				<>
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
-							<span>{this._headerTitleText}</span>
+							<Title
+								level="H1"
+								wrappingType="None"
+								class="ui5-responsive-popover-header-text"
+							>
+								{this._headerTitleText}
+							</Title>
 						</div>
 						<div class="row">
 							<div class="input-root-phone native-input-wrapper">
@@ -45,34 +54,35 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 									placeholder={this.placeholder}
 									onInput={this._handleInput}
 								/>
+								{mobileHeader?.call(this)}
 							</div>
 						</div>
-					</div>
 
-					{this.hasValueStateMessage &&
-					<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
-						{ this.open && valueStateMessage?.call(this) }
+						{this.hasValueStateMessage &&
+							<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
+								<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+								{this.open && valueStateMessage?.call(this)}
+							</div>
+						}
 					</div>
-					}
 				</>
 			}
 
 			{!this._isPhone && this.hasValueStateMessage &&
-					<div
-						slot="header"
-						class={{
-							"ui5-responsive-popover-header": true,
-							...this.classes.popoverValueState,
-						}}
-						style={this.styles.suggestionPopoverHeader}
-					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
-						{ this.open && valueStateMessage?.call(this) }
-					</div>
+				<div
+					slot="header"
+					class={{
+						"ui5-responsive-popover-header": true,
+						...this.classes.popoverValueState,
+					}}
+					style={this.styles.suggestionPopoverHeader}
+				>
+					<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+					{this.open && valueStateMessage?.call(this)}
+				</div>
 			}
 
-			{ suggestionsList.call(this) }
+			{this.showSuggestions && suggestionsList.call(this)}
 
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">