@ui5/webcomponents 2.27.2 → 2.28.1

package/src/ComboBoxPopoverTemplate.tsx

@@ -10,6 +10,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
 import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 import type ComboBox from "./ComboBox.js";
+import { LOADING_DELAY } from "./features/ComboBoxLazyLoading.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
 	return (
@@ -33,74 +34,93 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				onKeyDown={this._handlePopoverKeydown}
 				onFocusOut={this._handlePopoverFocusout}
 			>
-				{this.loading &&
-					<BusyIndicator active={true} class="ui5-combobox-busy"/>
-				}
-
-				{!this.loading && this._isPhone &&
-				<>
-					<div slot="header" class="ui5-responsive-popover-header">
-						<div class="row">
-							<Title
-								level="H1"
-								wrappingType="None"
-								class="ui5-responsive-popover-header-text"
-							>
-								{this._headerTitleText}
-							</Title>
-						</div>
+				{this._isPhone && dialogHeader.call(this)}
+				{valueStateHeader.call(this)}
+				{content.call(this)}
+				{this._isPhone && dialogFooter.call(this)}
+			</ResponsivePopover>
 
-						<div class="row">
-							<Input
-								open={this.openOnMobile}
-								placeholder={this.placeholder}
-								valueState={this.valueState}
-								showClearIcon={this.showClearIcon}
-								noTypeahead={this.noTypeahead}
-								onKeyDown={this._handleMobileKeydown}
-								onInput={this._handleMobileInput}
-								onChange={this._inputChange}
-							>
-								{ this._filteredItems.flatMap(item => {
-									if (item.isGroupItem && item.items) {
-										// For group items, return all nested items
-										return item.items
-											.filter(nestedItem => !!nestedItem)
-											.map(nestedItem =>
-												<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
-											);
-									}
-									// For regular items
-									return <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
-								})}
-							</Input>
-						</div>
+			{this.shouldOpenValueStateMessagePopover &&
+				<Popover
+					preventFocusRestore={true}
+					preventInitialFocus={true}
+					hideArrow={true}
+					tabindex={-1}
+					class="ui5-valuestatemessage-popover"
+					horizontalAlign={PopoverHorizontalAlign.Start}
+					placement="Bottom"
+					opener={this}
+					open={this.valueStateOpen}
+					onClose={this._handleValueStatePopoverAfterClose}
+					onFocusOut={this._handleValueStatePopoverFocusout}
+				>
+					<div slot="header" class={this.classes.popoverValueState}>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon} />
+						{valueStateMessage.call(this)}
 					</div>
+				</Popover>
+			}
+		</>
+	);
+}
 
-					{this.hasValueStateText &&
-					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
-						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
-						{ this.open && valueStateMessage.call(this) }
-					</div>
-					}
-				</>
-				}
+function valueStateMessage(this: ComboBox) {
+	return (
+		<>
+			{this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>}
+		</>
+	);
+}
 
-				{!this._isPhone && this.hasValueStateText &&
-				<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={this._valueStateMessageIcon}/>
-					{ this.open && valueStateMessage.call(this) }
-				</div>
-				}
+function valueStateHeader(this: ComboBox) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	if (this._isPhone) {
+		return (
+			<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
+				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon} />
+				{this.open && valueStateMessage.call(this)}
+			</div>
+		);
+	}
+
+	return (
+		<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={this._valueStateMessageIcon} />
+			{this.open && valueStateMessage.call(this)}
+		</div>
+	);
+}
+
+function content(this: ComboBox) {
+	if (this.loading && (this._isPhone || !this.hasValueState)) {
+		return <BusyIndicator active={true} class="ui5-combobox-busy" delay={LOADING_DELAY} />;
+	}
 
-				{!this.loading && !!this._filteredItems.length &&
+	const loadingOnDesktopWithValueState = this.loading && !this._isPhone && this.hasValueState;
+	const hasFilteredItems = !this.loading && !!this._filteredItems?.length;
+
+	if (!loadingOnDesktopWithValueState && !hasFilteredItems) {
+		return;
+	}
+
+	return (
+		<>
+			{loadingOnDesktopWithValueState &&
+				<div class="ui5-combobox-busy-container">
+					<BusyIndicator active={true} class="ui5-combobox-busy" delay={LOADING_DELAY} />
+				</div>
+			}
+			{hasFilteredItems &&
 				<List
 					class="ui5-combobox-items-list"
 					separators="None"
@@ -110,55 +130,69 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					onItemFocused={this._onItemFocus}
 					onMouseDown={this._itemMousedown}
 				>
-					{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+					{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
-				}
-
-				{this._isPhone &&
-			<div slot="footer" class="ui5-responsive-popover-footer">
-				<Button
-					design="Emphasized"
-					onClick={this._closeRespPopover}
-				>{this._dialogOkButtonText}</Button>
-				<Button
-					class="ui5-responsive-popover-close-btn"
-					design="Transparent"
-					onClick={this._closeRespPopover}
-				>
-					{this._dialogCancelButtonText}
-				</Button>
-			</div>
-				}
-			</ResponsivePopover>
-
-			{this.shouldOpenValueStateMessagePopover &&
-		<Popover
-			preventFocusRestore={true}
-			preventInitialFocus={true}
-			hideArrow={true}
-			tabindex={-1}
-			class="ui5-valuestatemessage-popover"
-			horizontalAlign={PopoverHorizontalAlign.Start}
-			placement="Bottom"
-			opener={this}
-			open={this.valueStateOpen}
-			onClose={this._handleValueStatePopoverAfterClose}
-			onFocusOut={this._handleValueStatePopoverFocusout}
-		>
-			<div slot="header" class={this.classes.popoverValueState}>
-				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
-				{ valueStateMessage.call(this) }
-			</div>
-		</Popover>
 			}
 		</>
 	);
 }
 
-function valueStateMessage(this: ComboBox) {
+function dialogFooter(this: ComboBox) {
 	return (
-		<>
-			{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot> }
-		</>
+		<div slot="footer" class="ui5-responsive-popover-footer">
+			<Button
+				design="Emphasized"
+				onClick={this._closeRespPopover}
+			>{this._dialogOkButtonText}</Button>
+			<Button
+				class="ui5-responsive-popover-close-btn"
+				design="Transparent"
+				onClick={this._closeRespPopover}
+			>
+				{this._dialogCancelButtonText}
+			</Button>
+		</div>
 	);
 }
+
+function dialogHeader(this: ComboBox) {
+	return <>
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<Title
+					level="H1"
+					wrappingType="None"
+					class="ui5-responsive-popover-header-text"
+				>
+					{this._headerTitleText}
+				</Title>
+			</div>
+
+			<div class="row">
+				<Input
+					open={this.openOnMobile}
+					placeholder={this.placeholder}
+					valueState={this.valueState}
+					showClearIcon={this.showClearIcon}
+					noTypeahead={this.noTypeahead}
+					onKeyDown={this._handleMobileKeydown}
+					onInput={this._handleMobileInput}
+					onChange={this._inputChange}
+				>
+					{!this.loading && this._filteredItems.flatMap(item => {
+						if (item.isGroupItem && item.items) {
+							// For group items, return all nested items
+							return item.items
+								.filter(nestedItem => !!nestedItem)
+								.map(nestedItem =>
+									<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)} />
+								);
+						}
+						// For regular items
+						return <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)} />;
+					})}
+				</Input>
+			</div>
+		</div>
+	</>;
+}

package/src/ComboBoxTemplate.tsx

@@ -3,10 +3,12 @@ import Icon from "./Icon.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import ComboBoxPopoverTemplate from "./ComboBoxPopoverTemplate.js";
+import BusyIndicator from "./BusyIndicator.js";
 
 export default function ComboBoxTemplate(this: ComboBox) {
+	const inlineLoading = this.loading && !this.open && !this._isPhone;
 	return (
-		<>
+		<BusyIndicator class="ui5-combobox-busy-indicator" active={inlineLoading}>
 			<div class="ui5-combobox-root ui5-input-focusable-element">
 				{this.hasValueState &&
 				<span id="value-state-description" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
@@ -69,6 +71,6 @@ export default function ComboBoxTemplate(this: ComboBox) {
 			</div>
 
 			{ ComboBoxPopoverTemplate.call(this) }
-		</>
+		</BusyIndicator>
 	);
 }

package/src/FormTemplate.tsx

@@ -24,7 +24,7 @@ export default function FormTemplate(this: Form) {
 					{this.hasCustomHeader ?
 						<slot name="header"></slot>
 						:
-						<Title id={`${this._id}-header-text`} level={this.headerLevel}>{this.headerText}</Title>
+						<Title id={`${this._id}-header-text`} wrappingType="None" level={this.headerLevel}>{this.headerText}</Title>
 					}
 				</div>
 			}
@@ -55,7 +55,7 @@ function groupedItemsLayout(this: Form) {
 				>
 					{groupItem.headerText &&
 						<div class="ui5-form-group-heading">
-							<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
+							<Title id={`${groupItem._id}-group-header-text`} wrappingType="None" level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
 						</div>
 					}
 					{this.accessibleMode === "Edit" ?

package/src/{NumberInputTemplate.tsx → NumericInputTemplate.tsx}

@@ -1,15 +1,15 @@
-import type NumberInput from "./NumberInput.js";
+import type NumericInput from "./NumericInput.js";
 import Icon from "./Icon.js";
 import Input from "./Input.js";
 
 import less from "@ui5/webcomponents-icons/dist/less.js";
 import add from "@ui5/webcomponents-icons/dist/add.js";
 
-export default function NumberInputTemplate(this: NumberInput) {
+export default function NumericInputTemplate(this: NumericInput) {
 	return (
 		<div
 			id={`${this._id}`}
-			class={{ "ui5-number-input-root": true, "ui5-number-input-root--with-buttons": this._showStepButtons && !this.readonly }}
+			class={{ "ui5-numeric-input-root": true, "ui5-numeric-input-root--with-buttons": this._showStepButtons && !this.readonly }}
 			onKeyDown={this._onkeydown}
 			onFocusIn={this._onfocusin}
 			onFocusOut={this._onfocusout}
@@ -33,7 +33,7 @@ export default function NumberInputTemplate(this: NumberInput) {
 					onFocusOut={this._onButtonFocusOut}
 					class={{
 						"inputIcon": true,
-						"ui5-number-input-icon--clickable": this._decIconClickable,
+						"ui5-numeric-input-icon--clickable": this._decIconClickable,
 					}}
 					showTooltip={true}
 				/>
@@ -44,7 +44,7 @@ export default function NumberInputTemplate(this: NumberInput) {
 			<Input
 				id={`${this._id}-inner`}
 				data-sap-focus-ref
-				class="ui5-number-input-input"
+				class="ui5-numeric-input-input"
 				placeholder={this.placeholder}
 				type={this.type}
 				value={this._inputValue ?? this._displayValue}
@@ -79,7 +79,7 @@ export default function NumberInputTemplate(this: NumberInput) {
 						id={`${this._id}-inc`}
 						class={{
 							"inputIcon": true,
-							"ui5-number-input-icon--clickable": this._incIconClickable,
+							"ui5-numeric-input-icon--clickable": this._incIconClickable,
 						}}
 						name={add}
 						tabindex={-1}

package/src/PopoverTemplate.tsx

@@ -38,9 +38,28 @@ function afterContent(this: Popover) {
 		{this._showResizeHandle &&
 			<div class="ui5-popover-resize-handle"
 				 onMouseDown={this._onResizeMouseDown}
+				 title={this._resizeHandleTooltip}
 			>
 				<Icon name={resizeCorner} />
 			</div>
 		}
+
+		{this._showResizeHandle &&
+			<>
+				<span
+					id={`${this._id}-keyboardResizeHandle`}
+					class="ui5-popover-keyboard-resize-handle ui5-hidden-text"
+					tabIndex={0}
+					role="img"
+					aria-label={this._resizeHandleAriaLabel}
+					aria-roledescription={this._resizeHandleAriaRoleDescription}
+					aria-describedby={this._resizeHandleAriaDescribedBy}
+					onKeyDown={this._onResizeKeyDown}
+				></span>
+				{this._resizeHandleAriaDescribedByText &&
+					<span id={`${this._id}-resizeDescr`} aria-hidden="true" class="ui5-hidden-text">{this._resizeHandleAriaDescribedByText}</span>
+				}
+			</>
+		}
 	</>);
 }

package/src/RangeSliderTemplate.tsx

@@ -20,6 +20,7 @@ const startHandle = (slider: RangeSlider) => {
 				max={slider.max}
 				tabIndex={slider._tabIndex}
 				active={slider.rangePressed}
+				desktop={slider._isDesktop}
 				handleType={SliderHandleType.Start}
 				aria-orientation="horizontal"
 				part="handle"
@@ -55,6 +56,7 @@ const endHandle = (slider: RangeSlider) => {
 				max={slider.max}
 				tabIndex={slider._tabIndex}
 				active={slider.rangePressed}
+				desktop={slider._isDesktop}
 				handleType={SliderHandleType.End}
 				aria-orientation="horizontal"
 				part="handle"
@@ -147,6 +149,7 @@ export default function RangeSliderTemplate(this: RangeSlider) {
 					progressAriaDisabled={this._ariaDisabled}
 					progressPressed={this.rangePressed}
 					progressFocused={this._progressFocused}
+					desktop={this._isDesktop}
 					onFocusIn={this._onfocusin}
 					onFocusOut={this._onfocusout}
 					part="scale"

package/src/SliderScaleTemplate.tsx

@@ -29,7 +29,7 @@ export default function SliderScaleTemplate(this: SliderScale) {
 				class={{
 					"ui5-slider-scale-progress": true,
 					"ui5-slider-progress": true,
-					"ui5-slider-progress--focused": this.progressFocused || this.progressPressed,
+					"ui5-slider-progress--focused": this.desktop && (this.progressFocused || this.progressPressed),
 				}}
 				part="progress"
 				style={this._progressStyle}

package/src/SliderTemplate.tsx

@@ -20,6 +20,7 @@ const handle = (slider: Slider) => {
 				min={slider.min}
 				max={slider.max}
 				tabIndex={slider.disabled ? -1 : 0}
+				desktop={slider._isDesktop}
 				aria-orientation="horizontal"
 				part="handle"
 				exportparts="icon: handle-icon"

package/src/StepInputTemplate.tsx

@@ -1,9 +1,9 @@
 import type StepInput from "./StepInput.js";
-import NumberInput from "./NumberInput.js";
+import NumericInput from "./NumericInput.js";
 
 export default function StepInputTemplate(this: StepInput) {
 	return (
-		<NumberInput
+		<NumericInput
 			_showStepButtons={true}
 			_externalAriaLabel={this._associatedLabelText}
 			value={this.value}
@@ -26,6 +26,6 @@ export default function StepInputTemplate(this: StepInput) {
 			{this.valueStateMessage.length > 0 &&
 				<slot name="valueStateMessage" slot="valueStateMessage"></slot>
 			}
-		</NumberInput>
+		</NumericInput>
 	);
 }

package/src/TableHeaderRowTemplate.tsx

@@ -2,8 +2,6 @@ import TableHeaderCell from "./TableHeaderCell.js";
 import type TableHeaderRow from "./TableHeaderRow.js";
 
 export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColIndex: number = 1) {
-	const SelectionComponent = this._selectionComponent;
-	const ClearAllComponent = this._clearAllComponent;
 	return (
 		<>
 			{ this._hasSelector &&
@@ -15,30 +13,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 					data-ui5-table-selection-cell
 					data-ui5-acc-text=""
 				>
-					{ !this._isMultiSelect ?
-						<></>
-						:
-						this._shouldRenderClearAll ?
-							(ClearAllComponent &&
-								<ClearAllComponent
-									name={this._clearAllIcon}
-									mode="Decorative"
-									showTooltip={true}
-									accessibleName={this._i18nDeselectAllRows}
-									design={this._hasSelectedRows ? "Default" : "NonInteractive"}
-									onClick={this._onSelectionChange}
-								></ClearAllComponent>
-							)
-							:
-							SelectionComponent &&
-							<SelectionComponent id="selection-component"
-								tabindex={-1}
-								checked={this._isSelected}
-								onChange={this._onSelectionChange}
-								accessibleName={this._i18nRowSelector}
-								title={this._isSelected ? this._i18nDeselectAllRows : this._i18nSelectAllRows}
-							></SelectionComponent>
-					}
+					{ this._tableSelection!.renderHeaderSelectionCell(this) }
 				</TableHeaderCell>
 			}
 

package/src/TableRowTemplate.tsx

@@ -2,7 +2,6 @@ import TableCell from "./TableCell.js";
 import type TableRow from "./TableRow.js";
 
 export default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {
-	const SelectionComponent = this._selectionComponent;
 	const OverflowButton = this._overflowButtonComponent;
 	return (
 		<>
@@ -14,14 +13,7 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 					data-ui5-table-selection-cell
 					data-ui5-acc-text=""
 				>
-					{ SelectionComponent &&
-						<SelectionComponent id="selection-component"
-							tabindex={-1}
-							checked={this._isSelected}
-							onChange={this._onSelectionChange}
-							accessibleName={this._i18nRowSelector}
-						></SelectionComponent>
-					}
+					{ this._tableSelection!.renderRowSelectionCell(this) }
 				</TableCell>
 			}