@sapudex/web-components 0.143.0 → 0.172.0

package/src/SecondaryNavigation.hbs

@@ -58,6 +58,7 @@
         </div>
     </div>
     <udex-secondary-navigation-item
+        @keydown="{{handleKeyDown}}"
         class="udex-secondary-navigation__mobile-nav"
         role="button"
         aria-label="{{mobileMenuOpenerAriaLabel}}"

package/src/SecondaryNavigation.ts

@@ -8,18 +8,14 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
-  isLeft,
-  isRight,
-  isEscape,
+  isEscape, isLeft, isRight, isDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
-
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
-
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
@@ -229,30 +225,41 @@ class UDExSecondaryNavigation extends UI5Element {
 
   handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
+    const item = e.target as UDExSecondaryNavigationItem;
+
     if (isLeft(e)) {
-      this.focusPrevNavItem(e);
+      return this.focusPrevNavItem(e);
     }
     if (isRight(e)) {
-      this.focusNextNavItem(e);
+      return this.focusNextNavItem(e);
+    }
+    if (isEscape(e) && item.hasNestedItems) {
+      return item.closeDropdown();
     }
-    if (isEscape(e)) {
-      (e.target as UDExSecondaryNavigationItem).closeDropdown();
+    if (isDown(e) && item.hasNestedItems) {
+      item.openDropdown();
     }
   }
 
   focusPrevNavItem(e: KeyboardEvent): void {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const lastItemIndex = this.domNavItems.length - 1;
-    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    this.domNavItems[previousSelectIndex]?.focus();
+    const previousSelectIndex = currentSelectedIndex - 1;
+    if (currentSelectedIndex > 0) {
+      e.preventDefault();
+      this.domNavItems[previousSelectIndex]?.focus();
+    }
   }
 
   focusNextNavItem(e: KeyboardEvent): void {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.domNavItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    this.domNavItems[nextSelectIndex].focus();
+    const lastItemIndex = this.domNavItems.length - 1;
+    const nextSelectIndex = currentSelectedIndex + 1;
+    if (nextSelectIndex < lastItemIndex) {
+      e.preventDefault();
+      this.domNavItems[nextSelectIndex].focus();
+    }
   }
 
   getItemWidth(item: NavItem): number {
@@ -369,7 +376,7 @@ class UDExSecondaryNavigation extends UI5Element {
     document.addEventListener("mousedown", this.outsideClickListener);
   }
 
-  outsideClickListener = (e: MouseEvent): void => {
+  outsideClickListener = (e: Event): void => {
     if (this.isMobileScreen && e.target !== this) {
       this.closeMobileDropdown();
       return;
@@ -384,7 +391,7 @@ class UDExSecondaryNavigation extends UI5Element {
     this.mobileNav?.closeDropdown();
   }
 
-  handleDesktopDropdown(e: MouseEvent): void {
+  handleDesktopDropdown(e: Event): void {
     const isClickedNavItem = e.composedPath().includes(this._clickedNavItem);
     if (!isClickedNavItem && this._clickedNavItem) {
       this._clickedNavItem.closeDropdown();

package/src/SecondaryNavigationItem.hbs

@@ -6,19 +6,20 @@
         href="{{path}}"
         target="{{target}}"
         @keydown="{{handleItemLinkKeyDown}}"
-        @click="{{onItemClick}}">
+        @click="{{fireNavItemClickEvent}}">
         {{itemLabel}}
     </a>
 {{else}}
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
+        tabindex="0"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"
         aria-label="{{ariaLabel}}"
-        @keydown="{{handleItemButtonKeyDown}}"
-        @click="{{onItemClick}}">
+        @keydown="{{handleItemEnterOrSpaceKeys}}"
+        @click="{{openDropdown}}">
         <span class="udex-secondary-navigation__item-text-wrap">
             {{itemLabel}}
             {{#if _subTitle}}
@@ -37,10 +38,10 @@
     </button>
     {{#if isOpen}}
         <div
-            class="udex-secondary-navigation__dropdown"
-            @keydown="{{handleSubItemKeyDown}}">
+            class="udex-secondary-navigation__dropdown">
             <ul role="menu"
-                class="udex-secondary-navigation__dropdown-list">
+                class="udex-secondary-navigation__dropdown-list"
+                @keydown="{{handleSubItemKeyDown}}">
                 {{#each _processedItems}}
                     <li role="none">
                         <udex-secondary-navigation-sub-item
@@ -58,7 +59,9 @@
                     </li>
                 {{/each}}
             </ul>
-            <slot></slot>
+            <div @keydown="{{handleButtonsEscKey}}">
+                <slot></slot>
+            </div>
         </div>
     {{/if}}
 {{/if}}

package/src/SecondaryNavigationItem.ts

@@ -14,7 +14,7 @@ import {
   isSpace,
   isEnter,
   isHome,
-  isEnd,
+  isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
@@ -159,18 +159,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
-  onItemClick(): void {
-    if (this.hasNestedItems) {
-      this.setDropdownItems();
-      this.toggleDropdown();
-    }
-
-    this.fireEvent("nav-item-click", {
-      item: this,
-      index: this.index,
-    });
-  }
-
   onSubItemClick(e: Event): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
@@ -178,6 +166,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (clickedItem.items) {
       this.setDropdownHistory();
       this.setNestedItems(clickedItem);
+      this.onShouldFocusFirstSubItem();
     }
 
     this.fireEvent("sub-item-click", {
@@ -190,8 +179,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.setPrevNestedItems();
   }
 
-  toggleDropdown(): void {
-    this.isOpen = !this.isOpen;
+  openDropdown(): void {
+    if (this.hasNestedItems) {
+      this.setDropdownItems();
+      this.isOpen = !this.isOpen;
+      this.onShouldFocusFirstSubItem();
+    }
+
+    this.fireNavItemClickEvent();
   }
 
   closeDropdown(): void {
@@ -200,12 +195,11 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
-      e.preventDefault();
-      this.onItemClick();
+      this.openDropdown();
     }
   }
 
-  handleItemButtonKeyDown(e: KeyboardEvent): void {
+  handleItemEnterOrSpaceKeys(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
       this.onShouldFocusFirstSubItem();
     }
@@ -242,23 +236,41 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       e.preventDefault();
       this.handleEnterAndSpace(e);
     }
+    if (isTabPrevious(e) && this._isMobileView) {
+      this.closeDropdown();
+    }
+    if ((isTabPrevious(e) || isTabNext(e)) && !this._isMobileView) {
+      this.closeDropdown();
+    }
+  }
+
+  handleButtonsEscKey(e: KeyboardEvent): void {
+    if (isEscape(e) && this._isMobileView) {
+      this.handleEscapeKey();
+    }
   }
 
   handleUpArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const lastIndex = this.domNavItems.length - 1;
-    const previousIndex = index - 1 < 0 ? lastIndex : index - 1;
-    if (!(lastIndex === previousIndex)) {
-      this.domNavItems[previousIndex].focus();
-    }
+    const previousSelectIndex = index - 1 < 0 ? lastIndex : index - 1;
+    const previousItem = this.domNavItems[previousSelectIndex];
+    const currentItem = this.domNavItems[index];
+
+    this.unsetTabIndex(currentItem);
+    this.setTabIndex(previousItem);
+    previousItem.focus();
   }
 
   handleDownArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;
-    if (!(nextIndex === 0)) {
-      this.domNavItems[nextIndex].focus();
-    }
+    const nextItem = this.domNavItems[nextIndex];
+    const currentItem = this.domNavItems[index];
+
+    this.unsetTabIndex(currentItem);
+    this.setTabIndex(nextItem);
+    nextItem.focus();
   }
 
   handleLeftArrow(e: KeyboardEvent): void {
@@ -270,10 +282,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   handleRightArrow(e: KeyboardEvent): void {
-    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
+    const { hasItems, isBack, index } = e.target as UDExSecondaryNavigationSubItem;
     if (hasItems && !isBack) {
       this.onSubItemClick(e);
-      this.onShouldFocusFirstSubItem();
+      this.unsetTabIndex(this.domNavItems[index]);
     }
   }
 
@@ -300,6 +312,13 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.focus();
   }
 
+  fireNavItemClickEvent(): void {
+    this.fireEvent("nav-item-click", {
+      item: this,
+      index: this.index,
+    });
+  }
+
   setDropdownHistory(): void {
     this._dropdownHistory.push(this._processedItems);
   }
@@ -331,8 +350,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     }
   }
 
+  setTabIndex(item: UDExSecondaryNavigationSubItem): void {
+    item._tabIndex = "0";
+  }
+
+  unsetTabIndex(item: UDExSecondaryNavigationSubItem): void {
+    item._tabIndex = "-1";
+  }
+
   onFirstSubItemFocus(): void {
-    this.domNavItems[0].focus();
+    const firstSubItem = this.domNavItems[0];
+
+    firstSubItem.focus();
+    this.setTabIndex(firstSubItem);
   }
 
   onLastSubItemFocus(): void {

package/src/SecondaryNavigationSubItem.hbs

@@ -1,5 +1,6 @@
 {{#if isBack}}
     <button
+        tabindex="{{_tabIndex}}"
         @click="{{onBackItemClick}}"
         role="menuitem"
         aria-label="{{backButtonAriaLabel}}"
@@ -15,6 +16,7 @@
 {{else}}
     {{#if isButton}}
         <button
+            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
             role="menuitem"
             aria-haspopup="{{hasItems}}"
@@ -32,6 +34,7 @@
         </button>
     {{else}}
         <a
+            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
             role="menuitem"
             href="{{path}}"

package/src/SecondaryNavigationSubItem.ts

@@ -88,6 +88,9 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Object, multiple: true })
     nestedItems!: Array<NavItem>;
 
+  @property({ type: String, defaultValue: "-1" })
+    _tabIndex!: string;
+
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {

package/src/SegmentedButton.ts

@@ -72,7 +72,7 @@ class UDExSegmentedButton extends SegmentedButton {
     this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${items.length}`);
   }
 
-  _onmousedown(e: MouseEvent) {
+  _onmousedown(e: Event) {
     const eventTarget = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = eventTarget.hasAttribute("udex-segmented-button-item");
 
@@ -83,7 +83,7 @@ class UDExSegmentedButton extends SegmentedButton {
     }
   }
 
-  _selectItem(e: MouseEvent | KeyboardEvent) {
+  _selectItem(e: Event | KeyboardEvent) {
     // Method to be update with @ui5/webcomponents v.2.0 , due to ToggleButton dependency change (pressed -> selected)
     const target = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = target.hasAttribute("udex-segmented-button-item");

package/src/SelectBox.hbs

@@ -4,7 +4,7 @@
             <div
                 @click="{{getHandleSingleSelectOpen}}"
                 class="udex-text-field__input"
-                @ui5-iconClick="{{handleRemoveTag}}"
+                @ui5-tag-icon-click="{{handleRemoveTag}}"
                 @keydown="{{handleKeyDownTrigger}}"
                 ?open="{{_open}}"
                 tabindex="{{effectiveTabIndex}}"
@@ -38,31 +38,26 @@
                     </div>
                 {{/if}}
                 {{#if showMultiSelectedOptions}}
-                    <ui5-tokenizer
-                            part="tokenizer"
-                            show-more
-                            @ui5-selectionChange="{{handleTagPress}}"
-                            @keydown="{{handleKeydownTokenizer}}"
-                            prevent-popover-open
-                            class="{{tokenizerClass}}"
+                    <udex-tag-group
+                            class="udex-tag-group"
+                            ?displayonly="{{displayonly}}"
+                            ?readonly="{{readonly}}"
                             ?disabled="{{disabled}}"
-                            @ui5-show-more-items-press="{{getHandlerShowMoreItems}}"
+                            tooltip-placement="{{tooltipPlacement}}"
+                            @ui5-tag-click="{{handleTagPress}}"
+                            @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
+                            @ui5-tag-keydown="{{handleKeyDownTag}}"
                             ?expanded="{{tokenizerExpanded}}">
                         {{#each selectedItems}}
                             {{#unless this.isGroup}}
                                 <udex-tag
-                                        accessible-role="option"
-                                        class="udex-text-field__token"
-                                        @keydown="{{../handleKeyDownTag}}"
-                                        ?read-only="{{../isReadOrDisplayOnly}}"
-                                        data-id="{{this._id}}"
-                                        part="token-{{@index}}"
                                         text="{{this.label}}"
+                                        id="{{this._id}}"
                                         icon="decline">
                                 </udex-tag>
                             {{/unless}}
                         {{/each}}
-                    </ui5-tokenizer>
+                    </udex-tag-group>
                 {{/if}}
                 {{#if showTrigger}}
                     <udex-control-button
@@ -120,12 +115,4 @@
             {{searchableList}}
         {{/if}}
     </ui5-popover>
-    {{#if displayonly}}
-        <udex-tooltip
-            placement="{{tooltipPlacement}}">
-            {{#each overflowsTags}}
-                <ul class="udex-select-box__overflow-tags"><li>{{this.text}}</li></ul>
-            {{/each}}
-        </udex-tooltip>
-    {{/if}}
 </div>

package/src/SelectBox.ts

@@ -32,7 +32,7 @@ import UDExSelectBoxGroupHeader from "./SelectBoxGroupHeader.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExSearch from "./Search.js";
 import UDExTag from "./Tag.js";
-import UDExTooltip, { PlacementType } from "./Tooltip.js";
+import { PlacementType } from "./Tooltip.js";
 import UDExButton from "./Button.js";
 import ValueState from "./types/common.js";
 
@@ -46,6 +46,7 @@ import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import UDExStatusMessage from "./StatusMessage.js";
 import UDExControlButton from "./ControlButton.js";
+import UDExTagGroup from "./TagGroup.js";
 
 /**
  * @class
@@ -77,7 +78,6 @@ import UDExControlButton from "./ControlButton.js";
     UDExListSelectAll,
     UDExSelectBoxItem,
     UDExList,
-    UDExTooltip,
     UDExSearch,
     UDExButton,
     Tokenizer,
@@ -87,6 +87,7 @@ import UDExControlButton from "./ControlButton.js";
     UDExStatusMessage,
     UDExControlButton,
     ResponsivePopover,
+    UDExTagGroup,
   ],
 })
 
@@ -273,13 +274,16 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   onAfterRendering() {
-    this._tokenizer = this.getTokenizer();
+    this._tokenizer = this.getTagGroup()?._tokenizer;
     this._popover = this.getPopover();
     this._search = this.getSearch();
     this._trigger = this.getTrigger();
     this._tags = this.getTags();
     this.handleDirection();
     if (this._tokenizer?.tokens.length > 0) {
+      if (!this.displayonly) {
+        this._tokenizer.shadowRoot!.querySelector(".ui5-tokenizer-more-text")?.setAttribute("tabindex", "-1");
+      }
       this.handleOutsideClick();
       this.resetTagsTabIndexes();
     }
@@ -333,7 +337,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleFocusIn() {
-    if (this.disabled) {
+    if (this.isDisabled) {
       return;
     }
     this._focused = true;
@@ -364,17 +368,10 @@ class UDExSelectBox extends UDExSearchableListBase {
     this._showTagsDropdownContent = false;
     this.openDropdown();
     this.handleUnselectTruncatableTag();
-    this.fireEvent("show-more");
   }
 
-  showMoreReadOnlyItems() {
-    const tooltip = this.shadowRoot!.querySelector<UDExTooltip>("udex-tooltip")!;
-    const moreBtn = this._tokenizer.shadowRoot!.querySelector<HTMLElement>(".ui5-tokenizer-more-text")!;
-    tooltip.onOpen(moreBtn);
-  }
-
-  handleRemoveTag(e: Event) {
-    const tag = e.target as UI5Element;
+  handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
+    tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
     this.handleDropdownItemPress(tagId);
     this.fireEventRemove(tagId);
@@ -388,7 +385,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleTagPress(e: CustomEvent) {
-    const tag = e.target as UDExTag;
+    const tag = e.detail.tag as UDExTag;
     tag.selected = false;
     this.toggleTruncatedPopover(tag);
   }
@@ -399,60 +396,57 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
   }
 
-  handleKeydownTokenizer(e: KeyboardEvent) {
-    e.stopPropagation();
+  handleKeyDownTrigger(e: KeyboardEvent) {
+    if (!this.isDisabled && (isSpace(e) || isEnter(e))) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._showTagsDropdownContent = false;
+      this._openedByTrigger = true;
+      this.openDropdown();
+    }
+  }
+
+  handleKeyDownTag(e: CustomEvent) {
+    if (this.isDisabled) { return; }
+    const originalEvent: KeyboardEvent = e.detail.originalEvent;
+    const tag = originalEvent.target as UDExTag;
     this.getTagContent(this._tags[0]).tabIndex = this._inactiveTabIndex;
 
-    const target = e.target as Token;
-    const activeIndex = this._tokenizer.tokens?.indexOf(target);
+    const activeIndex = this._tokenizer.tokens?.indexOf(originalEvent.target as Token);
     const tagsCount = this._tokenizer._tokensCount;
-    const shouldNavigateTags = (isLeft(e) || isRight(e) || isBackSpace(e) || isDelete(e)) && tagsCount > 0;
-    this._tokenizer.expanded = shouldNavigateTags;
+    this._tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && tagsCount > 0;
 
-    if (isLeft(e) && activeIndex !== 0) {
+    if (isLeft(originalEvent) && activeIndex !== 0) {
       this.focusTag(activeIndex - 1);
       this.scrollToTag(activeIndex - 1);
     }
 
-    if (isRight(e) && tagsCount !== activeIndex + 1) {
+    if (isRight(originalEvent) && tagsCount !== activeIndex + 1) {
       this.focusTag(activeIndex + 1);
       this.scrollToTag(activeIndex + 1);
     }
 
-    if ((isDown(e) || isUp(e))) {
+    if ((isDown(originalEvent) || isUp(originalEvent))) {
       this._openedByTrigger = false;
       this.openDropdown();
     }
-  }
-
-  handleKeyDownTrigger(e: KeyboardEvent) {
-    if (isSpace(e) || isEnter(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      this._showTagsDropdownContent = false;
-      this._openedByTrigger = true;
-      this.openDropdown();
-    }
-  }
 
-  handleKeyDownTag(e: KeyboardEvent) {
-    const tag = e.target as UDExTag;
-    if (isSpace(e) || isShift(e) || isEnter(e)) {
-      e.preventDefault();
-      e.stopPropagation();
+    if (isSpace(originalEvent) || isShift(originalEvent) || isEnter(originalEvent)) {
+      originalEvent.preventDefault();
+      originalEvent.stopPropagation();
     }
 
-    if (tag.isTruncatable && this.validTruncatableKey(e)) {
+    if (tag.isTruncatable && this.validTruncatableKey(originalEvent)) {
       this.toggleTruncatedPopover(tag);
     } else {
       this._showTagsDropdownContent = false;
     }
 
-    if (isDelete(e) || isBackSpace(e)) {
-      this.handleRemoveTag(e);
-      const target = e.target as Token;
+    if (isDelete(originalEvent) || isBackSpace(originalEvent)) {
+      this.handleRemoveTag(null, tag);
+
       const tags = this._tokenizer.tokens;
-      const deletedTagIndex = tags.indexOf(target);
+      const deletedTagIndex = tags.indexOf(originalEvent.target as Token);
       let nextTokenIndex = deletedTagIndex + 1;
       if (this._tokenizer.tokens.length !== 1) {
         if (deletedTagIndex === tags.length - 1) {
@@ -488,7 +482,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
+    document.addEventListener("click", (e: Event) => {
       if (this._tokenizer?.tokens.length > 0 && e.target !== this) {
         this._tokenizer.expanded = false;
       }
@@ -574,8 +568,12 @@ class UDExSelectBox extends UDExSearchableListBase {
     return !this.isDisabled && this.modeSingleSelect ? this.handleOpenSingleSelect() : undefined;
   }
 
-  getHandlerShowMoreItems() {
-    return this.displayonly ? this.showMoreReadOnlyItems() : this.showMoreItems();
+  getHandlerShowMoreItems(e: CustomEvent) {
+    if (!this.displayonly) {
+      e.preventDefault();
+      this.showMoreItems();
+    }
+    this.fireEvent("show-more");
   }
 
   getPopover(): ResponsivePopover {
@@ -590,12 +588,15 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector(".udex-text-field__input")!;
   }
 
-  getTokenizer(): Tokenizer {
-    return this.shadowRoot!.querySelector<Tokenizer>("[ui5-tokenizer]")!;
+  getTagGroup(): UDExTagGroup {
+    return this.shadowRoot!.querySelector<UDExTagGroup>("udex-tag-group")!;
   }
 
   getTags(): Array<UDExTag> {
-    return Array.from(this.shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+    if (this.getTagGroup()) {
+      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+    }
+    return [];
   }
 
   getTagContent(tag: UDExTag): HTMLElement {
@@ -630,10 +631,6 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.readonly || this.displayonly || this.disabled;
   }
 
-  get overflowsTags() {
-    return this._tokenizer?.tokens?.filter(tag => tag.overflows) || [];
-  }
-
   get truncatableTagLabel(): string {
     return this._truncatableTag.text.replace(/<\/?b>/gi, "");
   }
@@ -656,12 +653,6 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.readonly || this.displayonly;
   }
 
-  get tokenizerClass(): string {
-    return `udex-text-field__tokenizer
-    ${this.displayonly ? "udex-text-field__tokenize_displayonly" : ""}
-    ${this.readonly ? "udex-text-field__tokenize_readonly" : ""}`;
-  }
-
   get tokenizerExpanded() {
     if (this._showTagsDropdownContent && this._truncatableTag) {
       return false;

package/src/SideNavigationGroup.ts

@@ -26,7 +26,6 @@ import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.j
   tag: "udex-side-navigation-group",
   renderer: litRender,
   styles: [SideNavigationGroup.styles, SideNavigationGroupCss],
-  dependencies: [],
 })
 
 class UDExSideNavigationGroup extends SideNavigationGroup {}