@ui5/webcomponents 2.7.2 → 2.7.3

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;
 
@@ -104,7 +106,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this) }
+			{ InputPopoverTemplate.call(this, { suggestionsList }) }
 		</>
 	);
 }

package/src/features/InputSuggestionsTemplate.tsx

@@ -7,7 +7,11 @@ import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 
-export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) {
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	const valueStateMessage = hooks?.valueStateMessage;
+	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
+
 	return (
 		<ResponsivePopover
 			class={this.classes.popover}
@@ -55,8 +59,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 
 					{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) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 					}
 				</>
@@ -72,8 +76,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 						}}
 						style={this.styles.suggestionPopoverHeader}
 					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 			}
 
@@ -93,7 +97,7 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 	);
 }
 
-function suggestionsList(this: Input) {
+function defaultSuggestionsList(this: Input) {
 	return (
 		<List
 			separators={this.suggestionSeparators}