@ui5/webcomponents 2.9.0-rc.2 → 2.9.0

package/package-scripts.cjs

@@ -5,6 +5,10 @@ const options = {
 	portStep: 2,
 	noWatchTS: true,
 	dev: true,
+	internal: {
+		cypress_code_coverage: false,
+		cypress_acc_tests: false,
+	},
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.9.0-rc.2",
+  "version": "2.9.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.9.0-rc.2",
-    "@ui5/webcomponents-icons": "2.9.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.9.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.9.0-rc.2",
-    "@ui5/webcomponents-localization": "2.9.0-rc.2",
-    "@ui5/webcomponents-theming": "2.9.0-rc.2"
+    "@ui5/webcomponents-base": "2.9.0",
+    "@ui5/webcomponents-icons": "2.9.0",
+    "@ui5/webcomponents-icons-business-suite": "2.9.0",
+    "@ui5/webcomponents-icons-tnt": "2.9.0",
+    "@ui5/webcomponents-localization": "2.9.0",
+    "@ui5/webcomponents-theming": "2.9.0"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.9.0-rc.2",
+    "@ui5/webcomponents-tools": "2.9.0",
     "chromedriver": "^133.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "17eb194560a6db21bab9da6eb69b599ac504fd78"
+  "gitHead": "d338528c02938d222dccd891ea82792d7a443f21"
 }

package/src/DatePickerInputTemplate.tsx

@@ -1,6 +1,6 @@
 import type DatePicker from "./DatePicker.js";
+import DateTimeInput from "./DateTimeInput.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
 
 export default function DatePickerInputTemplate(this: DatePicker) {
 	return (
@@ -10,7 +10,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				width: "100%",
 			}}
 		>
-			<Input
+			<DateTimeInput
 				data-sap-focus-ref
 				id={`${this._id}-inner`}
 				class="ui5-date-picker-input"
@@ -22,13 +22,14 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				readonly={this.readonly}
 				valueState={this.valueState}
 				_inputAccInfo={this.accInfo}
+				_shouldOpenValueStatePopover={!this.open}
 				onChange={this._onInputChange}
 				onInput={this._onInputInput}
 				onSubmit={this._onInputSubmit}
 				onKeyDown={this._onkeydown}
 			>
 
-				{this.valueStateMessage.length > 0 &&
+				{!this.open && this.valueStateMessage.length > 0 &&
 					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
 				}
 
@@ -48,7 +49,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 						onClick={this._togglePicker}
 					/>
 				}
-			</Input>
+			</DateTimeInput>
 		</div>
 	);
 }

package/src/DatePickerPopoverTemplate.tsx

@@ -1,9 +1,16 @@
 import type DatePicker from "./DatePicker.js";
 import Button from "./Button.js";
 import Calendar from "./Calendar.js";
+import Icon from "./Icon.js";
 import CalendarDate from "./CalendarDate.js";
 import ResponsivePopover from "./ResponsivePopover.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
@@ -15,6 +22,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 	return (
 		<ResponsivePopover
 			id={`${this._id}-responsive-popover`}
+			class="ui5-date-picker-popover"
 			opener={this}
 			open={this.open}
 			allowTargetOverlap
@@ -30,6 +38,8 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 		>
 			{ this.showHeader && header.call(this) }
 
+			{ valueStateTextHeader.call(this) }
+
 			{ content.call(this) }
 
 			{ this.showFooter && footer.call(this) }
@@ -77,4 +87,45 @@ function defaultContent(this: DatePicker) {
 	);
 }
 
+function valueStateMessage(this: DatePicker) {
+	return (
+		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
+	);
+}
+
+function valueStateTextHeader(this: DatePicker) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	return (
+		<div
+			slot={!isPhone() ? "header" : undefined}
+			class={{
+				"ui5-popover-header": true,
+				"ui5-valuestatemessage-header": true,
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+			}}
+		>
+			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
+			{ valueStateMessage.call(this) }
+		</div>
+	);
+}
+
+function valueStateMessageInputIcon(this: DatePicker) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}
+
 function defaultFooter() {}

package/src/DateTimePickerTemplate.tsx

@@ -12,14 +12,14 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { header, content, footer }),
+		DatePickerPopoverTemplate.call(this, { content, footer }),
 	];
 }
 
-function header(this: DateTimePicker) {
+function content(this: DateTimePicker) {
 	return (
 		<>
-			{ this.phone &&
+			{ this._phoneView &&
 				<div class="ui5-dt-picker-header">
 					<SegmentedButton class="ui5-dt-picker-toggle-button" onSelectionChange={this._dateTimeSwitchChange}>
 						<SegmentedButtonItem data-ui5-key="Date" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>
@@ -27,57 +27,54 @@ function header(this: DateTimePicker) {
 					</SegmentedButton>
 				</div>
 			}
-		</>
-	);
-}
-
-function content(this: DateTimePicker) {
-	return (
-		<div class={{
-			"ui5-dt-picker-content": true,
-			"ui5-dt-picker-content--phone": this.phone,
-		}}>
-			<Calendar
-				class={{
-					"ui5-dt-cal": true,
-					"ui5-dt-cal--hidden": this.phone && this.showTimeView,
-					"ui5-dt-time--hidden": this.phone && this.showDateView,
-				}}
-				id={`${this._id}-calendar`}
-				primaryCalendarType={this._primaryCalendarType}
-				secondaryCalendarType={this.secondaryCalendarType}
-				formatPattern={this._formatPattern}
-				selectionMode={this._calendarSelectionMode}
-				minDate={this.minDate}
-				maxDate={this.maxDate}
-				calendarWeekNumbering={this.calendarWeekNumbering}
-				onSelectionChange={this.onSelectedDatesChange}
-				onShowMonthView={this.onHeaderShowMonthPress}
-				onShowYearView={this.onHeaderShowYearPress}
-				hideWeekNumbers={this.hideWeekNumbers}
-				_currentPicker={this._calendarCurrentPicker}
-			>
-				{this._calendarSelectedDates.map(date =>
-					<CalendarDate value={date} />
-				)}
-			</Calendar>
 
-			{ !this.phone && <span class="ui5-dt-picker-separator"></span> }
-
-			{ this.showTimeView &&
-				<TimeSelectionClocks
-					id={`${this._id}-time-sel`}
+			<div class={{
+				"ui5-dt-picker-content": true,
+				"ui5-dt-picker-content--phone": this._phoneView,
+			}}>
+				<Calendar
 					class={{
-						"ui5-dt-time": true,
-						...this.classes.dateTimeView,
+						"ui5-dt-cal": true,
+						"ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+						"ui5-dt-time--hidden": this._phoneView && this.showDateView,
 					}}
+					id={`${this._id}-calendar`}
+					primaryCalendarType={this._primaryCalendarType}
+					secondaryCalendarType={this.secondaryCalendarType}
 					formatPattern={this._formatPattern}
-					value={this._timeSelectionValue}
-					onChange={this.onTimeSelectionChange}
-					_calendarType={this._primaryCalendarType}
-				/>
-			}
-		</div>
+					selectionMode={this._calendarSelectionMode}
+					minDate={this.minDate}
+					maxDate={this.maxDate}
+					calendarWeekNumbering={this.calendarWeekNumbering}
+					onSelectionChange={this.onSelectedDatesChange}
+					onShowMonthView={this.onHeaderShowMonthPress}
+					onShowYearView={this.onHeaderShowYearPress}
+					hideWeekNumbers={this.hideWeekNumbers}
+					_currentPicker={this._calendarCurrentPicker}
+				>
+					{this._calendarSelectedDates.map(date =>
+						<CalendarDate value={date} />
+					)}
+				</Calendar>
+
+				{ !this._phoneView && <span class="ui5-dt-picker-separator"></span> }
+
+				{ this.showTimeView &&
+					<TimeSelectionClocks
+						id={`${this._id}-time-sel`}
+						class={{
+							"ui5-dt-time": true,
+							"ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+							"ui5-dt-time--hidden": this._phoneView && this.showDateView,
+						}}
+						formatPattern={this._formatPattern}
+						value={this._timeSelectionValue}
+						onChange={this.onTimeSelectionChange}
+						_calendarType={this._primaryCalendarType}
+					/>
+				}
+			</div>
+		</>
 	);
 }
 
@@ -87,7 +84,7 @@ function footer(this: DateTimePicker) {
 			slot="footer"
 			class={{
 				"ui5-dt-picker-footer": true,
-				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView)
+				"ui5-dt-picker-footer-time-hidden": (this._phoneView && this.showTimeView) || (this._phoneView && this.showDateView)
 			}}>
 			<Button
 				id="ok"

package/src/MultiInputTemplate.tsx

@@ -14,6 +14,10 @@ function preContent(this: MultiInput) {
 	return (
 		<>
 			<span id="hiddenText-nMore" class="ui5-hidden-text">{this._tokensCountText}</span>
+
+			{this.showValueHelpIcon &&
+				<span id="hiddenText-value-help" class="ui5-hidden-text">{this._valueHelpText}</span>
+			}
 			<Tokenizer
 				class="ui5-multi-input-tokenizer"
 				opener={this.morePopoverOpener}

package/src/ResponsivePopoverTemplate.tsx

@@ -18,6 +18,7 @@ export default function ResponsivePopoverTemplate(this: ResponsivePopover) {
 			accessibleRole={this.accessibleRole}
 			stretch={true}
 			preventInitialFocus={this.preventInitialFocus}
+			preventFocusRestore={this.preventFocusRestore}
 			initialFocus={this.initialFocus}
 			onBeforeOpen={this._beforeDialogOpen}
 			onOpen={this._afterDialogOpen}

package/src/SelectPopoverTemplate.tsx

@@ -64,6 +64,7 @@ export default function SelectPopoverTemplate(this: Select) {
 						separators="None"
 						onMouseDown={this._itemMousedown}
 						onItemClick={this._handleItemPress}
+						accessibleRole="ListBox"
 					>
 						<slot></slot>
 					</List>

package/src/TableGrowingTemplate.tsx

@@ -3,7 +3,7 @@ import type TableGrowing from "./TableGrowing.js";
 export default function TableGrowingTemplate(this: TableGrowing) {
 	return (
 		<div
-			id="growing-button"
+			id="button"
 			tabindex={-1}
 			data-ui5-growing-active={this._activeState}
 			onClick={this.loadMore}
@@ -11,13 +11,13 @@ export default function TableGrowingTemplate(this: TableGrowing) {
 			onKeyUp={this._onKeyup}
 			onFocusOut={this._onFocusout}
 			role="button"
-			aria-labelledby="growing-text growing-subtext"
-			aria-describedby="growing-description">
-			<span id="growing-text">{this._growingButtonText}</span>
-			{ this.growingSubText &&
-				<span id="growing-subtext">{this.growingSubText}</span>
+			aria-labelledby="text subtext"
+			aria-describedby="description">
+			<span id="text">{this._buttonText}</span>
+			{ this.subtext &&
+				<span id="subtext">{this.subtext}</span>
 			}
-			<span id="growing-description" class="ui5-hidden-text" aria-hidden="true">{this._growingButtonDescription}</span>
+			<span id="description" class="ui5-hidden-text" aria-hidden="true">{this._buttonDescription}</span>
 		</div>
 	);
 }

package/src/TableTemplate.tsx

@@ -23,10 +23,10 @@ export default function TableTemplate(this: Table) {
 				</div>
 
 				{ this.rows.length === 0 &&
-					<TableRow id="nodata-row">
-						<TableCell id="nodata-cell" data-excluded-from-navigation horizontal-align="Center">
-							{ this.nodata.length > 0 ?
-								<slot name="nodata"></slot>
+					<TableRow id="no-data-row">
+						<TableCell id="no-data-cell" data-excluded-from-navigation horizontal-align="Center">
+							{ this.noData.length > 0 ?
+								<slot name="no-data"></slot>
 								:
 								this._effectiveNoDataText
 							}

package/src/TimePickerPopoverTemplate.tsx

@@ -31,7 +31,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
-				{this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this)}
+				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
 
 				<TimeSelectionClocks
 					id={`${this._id}-time-sel`}
@@ -61,7 +61,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, { "width": "100%" }) }
 
 					<div class="popover-content">
 						<TimeSelectionInputs
@@ -99,7 +99,12 @@ function valueStateTextHeader(this: TimePicker, style?: Record<string, string>)
 			slot="header"
 			class={{
 				"ui5-popover-header": true,
-				...this.classes.popoverValueState,
+				"ui5-valuestatemessage-header": true,
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			}}
 			style={style}
 		>

package/src/i18n/messagebundle.properties

@@ -336,9 +336,12 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=Multi Value Input
 #XFLD: Token number indicator which is used to show more tokens
 MULTIINPUT_SHOW_MORE_TOKENS={0} more
 
-#XACT: ARIA announcement for value help
+#XACT: ARIA announcement for value help icon
 MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_VALUE_HELP=Value help available
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 

package/src/i18n/messagebundle_ar.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=غامض
 
 LINK_EMPHASIZED=مؤكد
 
+LIST_ITEM_ACTIVE=نشط
+
 LIST_ITEM_POSITION=بند القائمة {0} لـ {1}
 
 LIST_ITEM_SELECTED=محدد

package/src/i18n/messagebundle_bg.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Блед
 
 LINK_EMPHASIZED=Подчертано
 
+LIST_ITEM_ACTIVE=Активно
+
 LIST_ITEM_POSITION=Позиция от списък {0} от {1}
 
 LIST_ITEM_SELECTED=Избрани

package/src/i18n/messagebundle_ca.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Discret
 
 LINK_EMPHASIZED=Destacat
 
+LIST_ITEM_ACTIVE=Està actiu
+
 LIST_ITEM_POSITION=Element de llista {0} de {1}
 
 LIST_ITEM_SELECTED=Seleccionat

package/src/i18n/messagebundle_cnr.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Suptilno
 
 LINK_EMPHASIZED=Naglašeno
 
+LIST_ITEM_ACTIVE=Aktivno
+
 LIST_ITEM_POSITION=Stavke liste {0} od {1}
 
 LIST_ITEM_SELECTED=Odabrano

package/src/i18n/messagebundle_cs.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Jemné
 
 LINK_EMPHASIZED=Zvýrazněné
 
+LIST_ITEM_ACTIVE=Je aktivní
+
 LIST_ITEM_POSITION=Položka seznamu {0} z {1}
 
 LIST_ITEM_SELECTED=Vybráno

package/src/i18n/messagebundle_cy.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Cynnil
 
 LINK_EMPHASIZED=Wedi’i Bwysleisio
 
+LIST_ITEM_ACTIVE=Yn Weithredol
+
 LIST_ITEM_POSITION=Rhestru eitem {0} o {1}
 
 LIST_ITEM_SELECTED=Wedi''i Ddewis

package/src/i18n/messagebundle_da.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Diskret
 
 LINK_EMPHASIZED=Fremhævet
 
+LIST_ITEM_ACTIVE=Er aktiv
+
 LIST_ITEM_POSITION=Listeelement {0} af {1}
 
 LIST_ITEM_SELECTED=Valgt

package/src/i18n/messagebundle_de.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Dezent
 
 LINK_EMPHASIZED=Hervorgehoben
 
+LIST_ITEM_ACTIVE=Ist aktiv
+
 LIST_ITEM_POSITION=Listenelement {0} von {1}
 
 LIST_ITEM_SELECTED=Ausgewählt

package/src/i18n/messagebundle_el.properties

@@ -166,6 +166,8 @@ LINK_SUBTLE=Διακριτικό
 
 LINK_EMPHASIZED=Τονισμένο
 
+LIST_ITEM_ACTIVE=Είναι Ενεργό
+
 LIST_ITEM_POSITION=Αναλ.γραμ.λίστας {0} από {1}
 
 LIST_ITEM_SELECTED=Επιλεγμένο