refactor(ui5-input): support suggestionList hook from Input template (#10840)

Author: ilhan007

packages/main/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

packages/main/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 }) }
 		</>
 	);
 }

packages/main/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}

packages/tools/components-package/nps.js

@@ -19,7 +19,7 @@ const getScripts = (options) => {
 	// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
     const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
 
-	const tsOption = !options.legacy;
+	const tsOption = !options.legacy || options.jsx;
 	const tsCommandOld = tsOption ? "tsc" : "";
 	let tsWatchCommandStandalone = tsOption ? "tsc --watch" : "";
 	// this command is only used for standalone projects. monorepo projects get their watch from vite, so opt-out here