@sapudex/web-components 2.42.0 → 2.43.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -929,6 +929,11 @@
               "description": "Allows to hide the flag images in the country selector.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of the component.",
@@ -971,6 +976,14 @@
               "name": "show-search-input",
               "description": "Defines if the search input is visible.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the list style type of the dropdown items.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -1039,6 +1052,11 @@
                 "description": "Allows to hide the flag images in the country selector.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of the component.",
@@ -1080,6 +1098,13 @@
                 "name": "show-search-input",
                 "description": "Defines if the search input is visible.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the list style type of the dropdown items.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               }
             ],
             "events": [
@@ -1720,6 +1745,11 @@
                 "default": "\"Left\""
               }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of the component.",
@@ -1783,6 +1813,14 @@
               "name": "trigger-accessible-role",
               "description": "Allows setting a custom role for dropdown trigger.",
               "value": { "type": "string", "default": "\"combobox\"" }
+            },
+            {
+              "name": "type",
+              "description": "Defines the list style type of the dropdown items.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [{ "name": "default", "description": "Slot for items." }],
@@ -1916,6 +1954,11 @@
                   "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
                 }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of the component.",
@@ -1974,6 +2017,13 @@
                 "name": "trigger-accessible-role",
                 "description": "Allows setting a custom role for dropdown trigger.",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "type",
+                "description": "Defines the list style type of the dropdown items.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               }
             ],
             "events": [
@@ -7092,6 +7142,11 @@
               "description": "Defines the language of voice search.",
               "value": { "type": "string", "default": "\"en-US\"" }
             },
+            {
+              "name": "maxlength",
+              "description": "Sets the maximum number of characters available in the input field.",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of component.\n<br><br>\n<b>Note:</b> accepts a string \"Standard\" or \"Home Search\".",
@@ -7222,6 +7277,11 @@
                 "description": "Defines the language of voice search.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "maxlength",
+                "description": "Sets the maximum number of characters available in the input field.",
+                "value": { "type": "number | undefined" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of component.\n<br><br>\n<b>Note:</b> accepts a string \"Standard\" or \"Home Search\".",
@@ -7759,6 +7819,11 @@
               "description": "Allows control over the height.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "mode",
               "description": "Defines the mode of the component.",
@@ -7804,6 +7869,14 @@
                 "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
                 "default": "\"Bottom\""
               }
+            },
+            {
+              "name": "type",
+              "description": "Defines the list style type of the dropdown items.",
+              "value": {
+                "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -7875,6 +7948,11 @@
                 "description": "Allows control over the height.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "mode",
                 "description": "Defines the mode of the component.",
@@ -7918,6 +7996,13 @@
                 "value": {
                   "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
                 }
+              },
+              {
+                "name": "type",
+                "description": "Defines the list style type of the dropdown items.",
+                "value": {
+                  "type": "\"Circle\" | \"Number\" | \"None\" | \"Icon\""
+                }
               }
             ],
             "events": [
@@ -8228,11 +8313,60 @@
               "description": "Defines whether a visual separator should be rendered after the item.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "flag",
+              "description": "Defines the image, displayed at the start of the item.",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "flag-position",
+              "description": "Defines the position for flag image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image",
+              "description": "Allows control over the image source.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Allows control over the alternative text of the image.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "image-badge-state",
+              "description": "Defines the image badge state of the component.",
+              "value": {
+                "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "image-shape",
+              "description": "Defines the shape of the image.",
+              "value": {
+                "type": "\"Circle\" | \"Square\"",
+                "default": "\"Circle\""
+              }
+            },
+            {
+              "name": "image-size",
+              "description": "Allows control over the size of the image.",
+              "value": {
+                "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"",
+                "default": "\"S\""
+              }
+            },
             {
               "name": "indeterminate",
               "description": "Defines whether the selection of a  list is displayed as partially selected.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "item-icon",
+              "description": "Defines the name of the UI5 Icon displayed for each item when type is Icon.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -8351,11 +8485,53 @@
                 "description": "Defines whether a visual separator should be rendered after the item.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "flag",
+                "description": "Defines the image, displayed at the start of the item.",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "flag-position",
+                "description": "Defines the position for flag image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image",
+                "description": "Allows control over the image source.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-alt",
+                "description": "Allows control over the alternative text of the image.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "image-badge-state",
+                "description": "Defines the image badge state of the component.",
+                "value": {
+                  "type": "\"Information\" | \"Warning\" | \"Success\" | \"Error\" | \"Edit\" | undefined"
+                }
+              },
+              {
+                "name": "image-shape",
+                "description": "Defines the shape of the image.",
+                "value": { "type": "\"Circle\" | \"Square\"" }
+              },
+              {
+                "name": "image-size",
+                "description": "Allows control over the size of the image.",
+                "value": { "type": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" }
+              },
               {
                 "name": "indeterminate",
                 "description": "Defines whether the selection of a  list is displayed as partially selected.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "item-icon",
+                "description": "Defines the name of the UI5 Icon displayed for each item when type is Icon.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.22.0",
-    "@ui5/webcomponents-base": "2.22.0",
-    "@ui5/webcomponents-fiori": "2.22.0",
-    "@ui5/webcomponents-icons": "2.22.0",
-    "@ui5/webcomponents-localization": "2.22.0",
-    "@ui5/webcomponents-theming": "2.22.0",
+    "@ui5/webcomponents": "2.23.0",
+    "@ui5/webcomponents-base": "2.23.0",
+    "@ui5/webcomponents-fiori": "2.23.0",
+    "@ui5/webcomponents-icons": "2.23.0",
+    "@ui5/webcomponents-localization": "2.23.0",
+    "@ui5/webcomponents-theming": "2.23.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.22.0",
+    "@ui5/webcomponents-tools": "2.23.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/ListGroupHeader.hbs

@@ -40,7 +40,7 @@
     {{#if isNonActiveHeader}}
         <header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap">
           <div class="udex-list__inactive-header-content">
-            <span class="udex-list__header-title">{{label}}</span>
+            <span class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text">{{supportingText}}</span>
             {{/if}}
@@ -75,7 +75,7 @@
         <header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="{{_effectiveTabIndex}}"
         aria-expanded="{{expanded}}" aria-controls="{{ariaControlsId}}">
           <div class="udex-list__inactive-header-content" >
-            <span class="udex-list__header-title">{{label}}</span>
+            <span class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text ">{{supportingText}}</span>
             {{/if}}
@@ -137,7 +137,7 @@
             </ui5-icon>
         {{/if}}
         <div class="udex-list__header">
-            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
+            <span id="group-heading" class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}
@@ -166,7 +166,7 @@
             </ui5-icon>
         {{/if}}
         <div class="udex-list__header">
-            <span id="group-heading" class="udex-list__header-title">{{label}}</span>
+            <span id="group-heading" class="udex-list__header-title">{{{label}}}</span>
             {{#if supportingText}}
                 <span class="udex-list__supporting-text {{sizeClass}}">{{supportingText}}</span>
             {{/if}}

package/src/MastheadCountrySelector.hbs

@@ -1,4 +1,4 @@
-<div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
+<div class="udex-masthead-country-selector">
     {{#if _isActiveRegionOpen}}
         <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}

package/src/MastheadCountrySelector.ts

@@ -8,9 +8,6 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import {
-  isEnd, isHome, isTabNext, isTabPrevious,
-} from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
 import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
@@ -238,6 +235,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   _mastheadShell!: UDExMastheadShell;
   _countriesListHolderClassName = "udex-masthead-country-selector__list-wrap";
   _itemClassName = "udex-masthead-country-selector__item";
+  _boundHandleActiveRegionClose!: () => void;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -245,12 +243,23 @@ class UDExMastheadCountrySelector extends UI5Element {
   constructor() {
     super();
     this._activeCountries = [];
+    this._boundHandleActiveRegionClose = this.handleActiveRegionClose.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+    this.closest("[udex-masthead-item]")?.addEventListener("dropdown-closed", this._boundHandleActiveRegionClose);
+  }
+
+  onExitDOM(): void {
+    this.closest("[udex-masthead-item]")?.removeEventListener("dropdown-closed", this._boundHandleActiveRegionClose);
   }
 
   onAfterRendering(): void {
     this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
-    this.setTabIndexForItems();
     this.handleOutsideClick();
 
     if (this.isSingleMode) {
@@ -262,9 +271,11 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
   }
 
-  onEnterDOM(): void {
-    if (isDesktop()) {
-      this.setAttribute("desktop", "");
+  handleActiveRegionClose(): void {
+    if (!this.isSingleMode) {
+      this.handleSearchReset();
+      this._isActiveRegionOpen = false;
+      this.setActiveRegion(null);
     }
   }
 
@@ -280,26 +291,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
   }
 
-  handleKeyDown(e: KeyboardEvent): void {
-    const item = e.target as UDExMastheadMenuItem;
-
-    if (item.hasAttribute("is-nav-item")) {
-      const isFirstItem = item === this.items[0];
-      const isLastItem = item === this.items[this.items.length - 1];
-
-      if (isTabNext(e) && !isLastItem) {
-        e.preventDefault();
-        this.focusNextItem(item);
-      }
-      if (isTabPrevious(e) && !isFirstItem) {
-        e.preventDefault();
-        this.focusPreviousItem(item);
-      }
-      this.handleHomeKey(e);
-      this.handleEndKey(e);
-    }
-  }
-
   handleSearch(e: CustomEvent): void {
     const searchTerm = e.detail.value.toLowerCase().trim() as string;
 
@@ -348,9 +339,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("mousedown", (e: Event): void => {
       if (e.target !== this && !this.isMobile) {
-        this.handleSearchReset();
-        this._isActiveRegionOpen = false;
-        this.setActiveRegion(null);
+        this.handleActiveRegionClose();
       }
     });
   }
@@ -392,50 +381,12 @@ class UDExMastheadCountrySelector extends UI5Element {
     prevItem.focus({ preventScroll: true });
   }
 
-  focusLastItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const lastItem = this.items[lastItemIndex];
-
-    this.items[currentIndex]._tabIndex = "-1";
-    lastItem._tabIndex = "0";
-    lastItem.scrollIntoView({ block: "end" });
-    lastItem.focus({ preventScroll: true });
-  }
-
-  focusFirstItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+  focusFirstItem(): void {
     const firstItem = this.items[0];
-
-    this.items[currentIndex]._tabIndex = "-1";
     firstItem._tabIndex = "0";
     firstItem.focus();
   }
 
-  handleEndKey(e: KeyboardEvent): void {
-    if (isEnd(e)) {
-      e.preventDefault();
-
-      if (this.isScrollableCountriesList) {
-        this.removeScrollableClassInCountryList();
-      }
-
-      this.focusLastItem(e);
-    }
-  }
-
-  handleHomeKey(e: KeyboardEvent): void {
-    if (isHome(e)) {
-      e.preventDefault();
-
-      if (this.isScrollableCountriesList) {
-        this.addScrollableClassToCountryList();
-      }
-
-      this.focusFirstItem(e);
-    }
-  }
-
   handleSingleRegionMode(): void {
     this.setActiveRegion(this.regionsData[0]);
     this.setActiveCountries([...this.regionsData[0].countries]);
@@ -490,17 +441,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._activeCountries = countries;
   }
 
-  setTabIndexForItems(): void {
-    this.items.forEach((item, index) => {
-      if (this._activeRegionIndex > 0 && this._shouldFocusRegionByIndex) {
-        item._tabIndex = index === this._activeRegionIndex ? "0" : "-1";
-        return;
-      }
-
-      item._tabIndex = index === 0 ? "0" : "-1";
-    });
-  }
-
   closeMenu():void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();

package/src/Search.ts

@@ -295,6 +295,15 @@ class UDExSearch extends UI5Element {
    */
   @property({ type: String })
     suggestionList!: string;
+
+  /**
+   * Sets the maximum number of characters available in the input field.
+   *
+   * @public
+   */
+  @property({ type: Number })
+    maxlength?: number;
+
   /**
    * Width of the search component
    * @private

package/src/SearchTemplate.tsx

@@ -189,6 +189,7 @@ function renderSearchInput(this: UDExSearch, placeholder: boolean = false) {
       aria-label={this.accInfo.ariaLabel}
       aria-describedby="search-description"
       {...(placeholder ? { placeholder: this.effectivePlaceholder } : {})}
+      maxlength={this.maxlength}
       value={this.value}
       onInput={this.handleSearchChange}
       onKeyDown={this.handleKeyDown}

package/src/SearchableListBase.ts

@@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { cleanLabel } from "./utils/listItemLabelUtils.js";
-import { UDExListMode } from "./types/List.js";
+import { UDExListMode, UDExListStyleType } from "./types/List.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
 import type { UDExProcessedItem } from "./types/SearchableListBase.js";
@@ -217,6 +217,24 @@ class UDExSearchableListBase extends UI5Element {
   @property()
     mode: `${UDExListMode}` = UDExListMode.SingleSelect;
 
+  /**
+   * Defines the list style type of the dropdown items.
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    type: `${UDExListStyleType}` = UDExListStyleType.None;
+
+  /**
+   * Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    itemIcon: string = "";
+
   /**
    * Slot for items.
    *
@@ -382,13 +400,20 @@ class UDExSearchableListBase extends UI5Element {
       const { isGroup, item } = preparedItem;
 
       if (isGroup) {
-        preparedItem.groupItems = this.filterItemsForLabel(preparedItem.groupItems, str);
+        const groupHeaderMatches = this.checkAndUpdateLabel(item, str);
+        const filteredChildren = this.filterItemsForLabel(preparedItem.groupItems, str);
+
+        if (groupHeaderMatches) {
+          preparedItem.groupItems.forEach(child => this.checkAndUpdateLabel(child, str));
+        } else {
+          preparedItem.groupItems = filteredChildren;
+        }
 
-        if (hasSearchQuery && preparedItem.groupItems.length > 0) {
+        if (hasSearchQuery && (groupHeaderMatches || preparedItem.groupItems.length > 0)) {
           item.collapsed = false;
         }
 
-        return preparedItem.groupItems.length > 0;
+        return !hasSearchQuery || groupHeaderMatches || preparedItem.groupItems.length > 0;
       }
 
       return this.checkAndUpdateLabel(item, str);
@@ -413,6 +438,8 @@ class UDExSearchableListBase extends UI5Element {
       item.label = this.addSearchTermTag(cleanedLabel, str);
       return true;
     }
+
+    item.label = cleanedLabel;
     return false;
   }
 

package/src/SearchableListBaseTemplate.tsx

@@ -51,7 +51,9 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           accessible-role={this.accessibleRoleForList}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
-          mode={this.mode}>
+          mode={this.mode}
+          type={this.type}
+          item-icon={this.itemIcon}>
           {this._filteredItems.map((processedItem, index) => (
             processedItem.isGroup
               ? renderGroup.call(this, processedItem, index)
@@ -99,6 +101,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
     <UDExListGroupHeader
       key={index}
       role="group"
+      {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
       non-interactive={header.nonInteractive}
@@ -149,6 +152,15 @@ function renderListItem(
       rating-count={item.ratingCount}
       rating-max={item.ratingMax}
       label={item.label}
+      image={item.image}
+      image-alt={item.imageAlt}
+      image-badge-state={item.imageBadgeState}
+      image-shape={item.imageShape}
+      image-size={item.imageSize}
+      flag={item.flag}
+      flag-position={item.flagPosition}
+      size={item.size}
+      type={item.type}
       {...(accessibleRole ? { "accessible-role": accessibleRole } : {})}
       {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>
     </UDExListItem>