@sapudex/web-components 2.20.1 → 2.22.0

package/src/MastheadProfileMenu.ts

@@ -101,6 +101,10 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
 /**
  * Fired when use click Logout link
  * @public
+ * @param {UDExMastheadMenuItem} item The clicked logout item
+ * @param {HTMLElement} sourceNode The HTML element of the clicked logout item
+ * @param {PointerEvent} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked logout item
  */
 @event("logout", { cancelable: true, bubbles: true })
 
@@ -108,6 +112,10 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  * Fires when profile menu item is clicked
  *
  * @public
+ * @param {UDExMastheadMenuItem} item The clicked profile menu item
+ * @param {PointerEvent} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked profile menu item
+ * @param {HTMLElement} sourceNode The HTML element of the clicked profile menu item
  */
 @event("profile-item-click", { cancelable: true, bubbles: true })
 
@@ -115,6 +123,7 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  * Fired when use click add or remove account button
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked add or remove account button
  */
 @event("add-or-remove-account-click", { cancelable: true, bubbles: true })
 
@@ -122,6 +131,8 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  * Fires when identity item is clicked
  *
  * @public
+ * @param {ExtendedUserIdentity} item The clicked identity item
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked identity item
  */
 @event("identity-item-click", { cancelable: true, bubbles: true })
 

package/src/MastheadShell.ts

@@ -96,6 +96,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the mobile menu button opener.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("mobile-menu-open", { bubbles: true })
 
@@ -103,6 +104,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the mobile menu button closer.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("mobile-menu-close", { bubbles: true })
 
@@ -110,6 +112,11 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the search button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
+ *
  */
 @event("search-click", { bubbles: true })
 
@@ -117,6 +124,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the search close button.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("search-close-click", { bubbles: true })
 
@@ -124,6 +135,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the search panel is opened.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("search-opened", { bubbles: true })
 
@@ -131,6 +143,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the search panel is closed.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("search-closed", { bubbles: true })
 
@@ -138,6 +151,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("cart-click", { bubbles: true })
 
@@ -145,6 +162,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the support button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("support-click", { bubbles: true })
 
@@ -152,6 +173,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("profile-click", { bubbles: true })
 
@@ -159,6 +184,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the country selector button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("country-selector-click", { bubbles: true })
 
@@ -166,6 +195,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the logo.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("logo-click", { bubbles: true })
 
@@ -173,6 +206,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the site label.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("site-label-click", { bubbles: true })
 
@@ -180,6 +217,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the co-brand.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("co-brand-click", { bubbles: true })
 

package/src/MediaPlayer.ts

@@ -93,6 +93,7 @@ type UDExMediaPlayerVideoProgressEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {number} progress percentage of video watched
  */
 @event("videoProgress", { bubbles: true })
 /**

package/src/MediaPlayerVimeo.ts

@@ -12,7 +12,7 @@ import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
 export type VimeoPlayer = Player;
 
-type UDExMediaPLayerViemeoPlayingEventDetail = {
+type UDExMediaPlayerVimeoPlayingEventDetail = {
   percentPlayed: number,
 }
 
@@ -65,6 +65,7 @@ type UDExMediaPLayerViemeoPlayingEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {number} percentPlayed Percentage of video played (0-100)
  */
 @event("playing", { bubbles: true })
 class UDExMediaPlayerVimeo extends UI5Element {
@@ -72,7 +73,7 @@ class UDExMediaPlayerVimeo extends UI5Element {
     "ready": void,
     "ended": void,
     "pause": void,
-    "playing": UDExMediaPLayerViemeoPlayingEventDetail,
+    "playing": UDExMediaPlayerVimeoPlayingEventDetail,
   };
   /**
  * Defines the source of the video  or audio
@@ -175,4 +176,4 @@ class UDExMediaPlayerVimeo extends UI5Element {
 UDExMediaPlayerVimeo.define();
 
 export default UDExMediaPlayerVimeo;
-export type { UDExMediaPLayerViemeoPlayingEventDetail };
+export type { UDExMediaPlayerVimeoPlayingEventDetail };

package/src/MediaPlayerYoutube.ts

@@ -73,6 +73,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  *
  * @allowPreventDefault
  * @public
+ * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event
  */
 @event("ended", { bubbles: true })
 /**
@@ -80,6 +81,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  *
  * @allowPreventDefault
  * @public
+ * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event
  */
 @event("pause", { bubbles: true })
 /**
@@ -87,6 +89,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  *
  * @allowPreventDefault
  * @public
+ * @param {number} percentPlayed Percentage of video played (0-100)
  */
 @event("playing", { bubbles: true })
 class UDExMediaPlayerYoutube extends UI5Element {

package/src/Pagination.ts

@@ -71,7 +71,7 @@ type UDExPaginationChangeEventDetail = {
  * Fires when pagination item was clicked.
  *
  * @allowPreventDefault
- * @param {Number}
+ * @param {number} currentPage The current page number.
  * @public
  */
 @event("change", { bubbles: true })

package/src/Search.ts

@@ -6,7 +6,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import {
@@ -42,12 +42,13 @@ import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
 import sanitizeString from "./utils/sanitizeString.js";
 import UDExButton from "./Button.js";
 
-import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
+import SearchTemplate from "./SearchTemplate.js";
 
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import type { Booleanish } from "@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js";
 
 const SearchIcon: string = "sap-icon://search";
 
@@ -126,7 +127,7 @@ type UDExSearchKeydownEventDetail = {
  */
 @customElement({
   tag: "udex-search",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SearchCss, SearchSuggestionsCss, getEffectiveScrollbarStyle()],
   template: SearchTemplate,
   get dependencies() {
@@ -139,12 +140,20 @@ type UDExSearchKeydownEventDetail = {
  * Fired event when the user submitted the value.
  *
  * @public
+ * @param {string} value The submitted search value
+ * @param {string} categoryName The category name if an item from the suggestion list is clicked
+ * @param {string} item The clicked item from the suggestion list
+ *
  */
 @event("submit-search-value", { bubbles: true })
 /**
  * Fired event when the user typed to search field.
  *
  * @public
+ * @param {string} value The current value of the search field
+ * @param {string} categoryName The category name if an item from the suggestion list is clicked
+ * @param {string} item The clicked item from the suggestion list
+ *
  */
 @event("handle-value-search", { bubbles: true })
 /**
@@ -157,18 +166,25 @@ type UDExSearchKeydownEventDetail = {
  * Fired event when the user clicks on the item inside the popover.
  *
  * @public
+ * @param {string} value The value of the clicked item
+ * @param {string} categoryName The category name of the clicked item
+ * @param {string} item The clicked item from the suggestion list
+ *
  */
 @event("dropdown-item-click", { bubbles: true })
 /**
  * Fired event when the user clicks on the intem inside the prefix dropdown.
  *
  * @public
+ * @param {ListItemBase} item The clicked item from the prefix dropdown
+ *
  */
 @event("prefix-item-click")
 /**
  * Fired event when the user clicks on the intem inside the prefix dropdown.
  *
  * @public
+ * @param {KeyboardEvent} e The keyboard event object
  */
 @event("search-keydown", { bubbles: true })
 class UDExSearch extends UI5Element {
@@ -1181,7 +1197,7 @@ class UDExSearch extends UI5Element {
     return !!(this.suggestedList?.length || this.recommendedList?.length);
   }
 
-  get getAriaHasPopup(): string {
+  get getAriaHasPopup(): "dialog" | Booleanish {
     return this.showSuggestedPopover ? "dialog" : "false";
   }
 

package/src/SearchTemplate.tsx

@@ -0,0 +1,353 @@
+import type UDExSearch from "./Search.js";
+import type { SuggestionList } from "./Search.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import search from "@ui5/webcomponents-icons/dist/search.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import microphone from "@ui5/webcomponents-icons/dist/microphone.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UI5IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UI5Popover from "@ui5/webcomponents/dist/Popover.js";
+import UI5PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import UI5PopoverHAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import UDExControlButton from "./ControlButton.js";
+import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
+import UI5Button from "@ui5/webcomponents/dist/Button.js";
+import UI5ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+
+export default function SearchTemplate(this: UDExSearch) {
+  return (
+    <>
+      <div class={`udex-search__root ${this.searchClasses}`}>
+        { this.isShowSearchHomePrefix ? renderSearchHomePrefix.call(this) : "" }
+
+        <form role="search" class={`udex-search__container ${this.focusClasses} ${this.isNotEmptyClass}`}>
+          { this.labelAnimationDisabled ? renderInputWithStaticLabel.call(this) : renderInputWithAnimatedLabel.call(this) }
+
+          {
+            this.open ? (
+              <span
+                aria-live="polite"
+                aria-atomic="true"
+                id="search-description"
+                class="hidden"
+                aria-hidden="true"
+              >
+                {this.suggestionsDescription}
+              </span>
+            ) : ""
+          }
+
+          <div class="udex-search__icons">
+            {
+              this.isShowHomeResetButton ? (
+                <UDExButton
+                  id="reset-button"
+                  class="udex-search__button udex-search__reset-button"
+                  size={UDExButtonSize.Small}
+                  design={UDExButtonDesign.Default}
+                  tooltip={this.tooltipInfo.tooltipResetButton}
+                  onClick={this.onReset as any}
+                  onKeyDown={this.handleKeyDownReset}
+                >
+                  <UI5Icon
+                    class="udex-search__button-icon"
+                    accessible-name={this.accInfo.accessibleNameResetIcon}
+                    accessible-role="presentation"
+                    name={decline}
+                  ></UI5Icon>
+                </UDExButton>
+              ) : ""
+            }
+
+            {
+              this.isShowResetButton ? (
+                <UDExControlButton
+                  id="reset-button"
+                  class="udex-search__reset-button"
+                  design={UDExControlButtonDesign.Default}
+                  tooltip={this.tooltipInfo.tooltipResetButton}
+                  icon={decline}
+                  size={UDExButtonSize.Large}
+                  accessible-name={this.accInfo.accessibleNameResetIcon}
+                  onClick={this.onReset as any}
+                  onKeyDown={this.handleKeyDownReset}
+                ></UDExControlButton>
+              ) : ""
+            }
+
+            {
+              this.isVoiceButton ? (
+                <UDExButton
+                  id="voice-button"
+                  class={`udex-search__button udex-search__voice-button ${this.voiceActiveClass}`}
+                  design={UDExButtonDesign.Default}
+                  size={UDExButtonSize.Small}
+                  icon={microphone}
+                  tooltip={this.tooltipInfo.tooltipVoiceButton}
+                  onClick={this.onVoice as any}
+                ></UDExButton>
+              ) : ""
+            }
+
+            {
+              this.showNonInteractiveButton ? (
+                <UI5Icon
+                  class="udex-search__icon"
+                  aria-hidden="true"
+                  accessible-name={this.accInfo.accessibleNameSearchIcon}
+                  name={search}
+                ></UI5Icon>
+              ) : ""
+            }
+
+            {
+              this.showSubmitHomeButton ? (
+                <UDExButton
+                  id="submit-button"
+                  class={`udex-search__button udex-search__submit-button ${this.searchButtonActiveClass}`}
+                  design={UDExButtonDesign.Default}
+                  icon={search}
+                  size={UDExButtonSize.Small}
+                  tooltip={this.tooltipInfo.tooltipSubmitButton}
+                  onClick={this.onSubmit as any}
+                ></UDExButton>
+              ) : ""
+            }
+
+            {
+              this.showSubmitStandardButton ? (
+                <UDExControlButton
+                  id="submit-button"
+                  class="udex-search__submit-button"
+                  size={UDExButtonSize.Large}
+                  design={UDExControlButtonDesign.Default}
+                  icon={search}
+                  tooltip={this.tooltipInfo.tooltipSubmitButton}
+                  onClick={this.onSubmit as any}
+                ></UDExControlButton>
+              ) : ""
+            }
+          </div>
+        </form>
+      </div>
+
+      { renderSearchSuggestionPopover.call(this) }
+    </>
+  );
+}
+
+function renderSearchHomePrefix(this: UDExSearch) {
+  return (
+    <div class={`udex-search__prefix ${this.prefixWrapperClasses}`}>
+      <button
+        type="button"
+        role="combobox"
+        aria-expanded={this._prefixDropdownExpanded}
+        aria-label={this.labelPrefix}
+        aria-haspopup="true"
+        aria-controls="udex-search-prefix"
+        class="udex-search__prefix-button"
+        onClick={this.handleDropdownClick}
+      >
+        <span class="udex-search__prefix-label">{this.labelPrefix}</span>
+        <UI5Icon
+          class="udex-search__prefix-icon"
+          name={slimArrowDown}
+          mode={UI5IconMode.Decorative}
+        ></UI5Icon>
+      </button>
+
+      <UI5Popover
+        id="udex-search-prefix"
+        class={this.prefixPopoverClasses}
+        hide-arrow
+        placement={UI5PopoverPlacement.Bottom}
+        horizontal-align={UI5PopoverHAlign.Start}
+        style={this.prefixPopoverStyles}
+        onClose={this.handleAfterClosePrefixPopover}
+      >
+        <slot></slot>
+      </UI5Popover>
+    </div>
+  );
+}
+
+function renderSearchInput(this: UDExSearch, placeholder: boolean = false) {
+  return (
+    <input
+      role="searchbox"
+      id="search-input"
+      type="search"
+      name="search"
+      class="udex-search__field"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup={this.getAriaHasPopup}
+      aria-label={this.accInfo.ariaLabel}
+      aria-describedby="search-description"
+      {...(placeholder ? { placeholder: this.effectivePlaceholder } : {})}
+      value={this.value}
+      onInput={this.handleSearchChange}
+      onKeyDown={this.handleKeyDown}
+      onFocus={this.handleFocus}
+      onFocusOut={this.handleFocusout}
+      onBlur={this.handleBlur}
+      onClick={this.handleInputClick}
+    />
+  );
+}
+
+function renderInputWithStaticLabel(this: UDExSearch) {
+  return renderSearchInput.call(this, true);
+}
+
+function renderInputWithAnimatedLabel(this: UDExSearch) {
+  return (
+    <>
+      {
+        this.label ? (
+          <label for="search-input" class={this.labelClasses}>
+            {this.label}
+          </label>
+        ) : ""
+      }
+
+      { renderSearchInput.call(this, false) }
+    </>
+  );
+}
+
+function renderSearchSuggestionPopover(this: UDExSearch) {
+  return (
+    <UI5Popover
+      class={`udex-search-suggestions__root ${this.homeSearchPopoverClass}`}
+      hide-arrow
+      prevent-initial-focus
+      placement={UI5PopoverPlacement.Bottom}
+      horizontal-align={UI5PopoverHAlign.End}
+      style={this.popoverStyles}
+      id={this.getSuggestionsPopoverId}
+      aria-orientation="vertical"
+      accessible-role="Dialog"
+      onKeyDown={this.handleKeyPressSuggestionList}
+      accessible-name={this.suggestionsAccessibleName}
+    >
+      {
+        this.showNoResultMessage ? (
+          <span class="udex-search-suggestions__message">{this.noResultMessage}</span>
+        ) : renderSearchSuggestionPopoverResults.call(this)
+      }
+    </UI5Popover>
+  );
+}
+
+function renderSearchSuggestionPopoverResults(this: UDExSearch) {
+  return (
+    <div role="tree">
+      {
+        this.isShowSuggestedList ? (
+          renderSearchSuggestionPopoverResultsSuggestedList.call(this)
+        ) : ""
+      }
+
+      {
+        this.isShowRecommendedList ? (
+          renderSearchSuggestionPopoverResultsRecommendedList.call(this)
+        ) : ""
+      }
+    </div>
+  );
+}
+
+function renderSearchSuggestionPopoverResultsSuggestedList(this: UDExSearch) {
+  return (
+    <div class="udex-search-suggestions__block" role="treeitem">
+      {
+        this.suggestedHeading ? (
+          <span class="udex-search-suggestions__heading" id="suggested-heading">
+            {this.suggestedHeading}
+          </span>
+        ) : ""
+      }
+
+      <div class="udex-search-suggestions__list"
+        role="listbox"
+        aria-labelledby="suggested-heading"
+        tabindex={0}
+        onKeyDown={this.handleKeyDownPopover}
+      >
+        {
+          this.suggestedList.map((item, i) => (
+            <UI5Button
+              key={i}
+              id={item.id}
+              icon={item.icon}
+              type="Button"
+              design={UI5ButtonDesign.Default}
+              accessible-name={item.suggestionDescription}
+              class="udex-search-suggestions__item-button"
+              title={item.title}
+              tabindex={-1}
+              role="option"
+              onClick={item.handleSelectItem}
+              dangerouslySetInnerHTML={{ __html: item.text }}
+            ></UI5Button>
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
+function renderSearchSuggestionPopoverResultsRecommendedList(this: UDExSearch) {
+  return (
+    <div class="udex-search-suggestions__block" role="treeitem">
+      {
+        this.recommendedHeading ? (
+          <span class="udex-search-suggestions__heading" id="recommended-heading">
+            {this.recommendedHeading}
+          </span>
+        ) : ""
+      }
+
+      <div class="udex-search-suggestions__list"
+        role="listbox"
+        aria-labelledby="recommended-heading"
+        tabindex={0}
+        onKeyDown={this.handleKeyDownPopover}
+      >
+        {
+          this.recommendedList.map((item, i) => (
+            item.hasCustomIcon ? (
+              renderSearchSuggestionPopoverResultsRecommendedListButton(item, i, item.icon)
+            ) : (
+              renderSearchSuggestionPopoverResultsRecommendedListButton(item, i)
+            )
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
+function renderSearchSuggestionPopoverResultsRecommendedListButton(button: SuggestionList, key: number, icon: string | undefined = undefined) {
+  return (
+    <UI5Button
+      key={key}
+      id={button.id}
+      {...(icon ? { "icon": icon } : {})}
+      type="Button"
+      design={UI5ButtonDesign.Default}
+      class="udex-search-suggestions__item-button"
+      accessible-name={button.suggestionDescription}
+      title={button.title}
+      tabindex={-1}
+      role="option"
+      onClick={button.handleSelectItem}
+      dangerouslySetInnerHTML={{ __html: button.text }}
+    ></UI5Button>
+  );
+}