@sapudex/web-components 2.21.0 → 2.23.0

package/src/SelectBox.ts

@@ -1,18 +1,21 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import {
-  isEnter, isSpace, isDelete, isTabPrevious, isTabNext, isLeft, isRight, isDown, isUp, isEscape, isBackSpace, isShift,
+  isEnter, isSpace, isDelete, isTabPrevious, isTabNext, isLeft, isRight, isDown, isUp, isBackSpace, isShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
+import type { UDExItemFromList } from "./SearchableListBase.js";
+import { UDExPopoverPart } from "./types/SearchableListBase.js";
+import { Placement } from "./types/Dropdown.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
-import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -20,30 +23,20 @@ import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExSelectBoxItem from "./SelectBoxItem.js";
 import UDExSelectBoxGroupHeader from "./SelectBoxGroupHeader.js";
-import type { UDExItemFromList, UDExSearchableListBaseEvents } from "./SearchableListBase.js";
-import UDExSearchableListBase from "./SearchableListBase.js";
-import type { UDExSearchKeydownEventDetail } from "./Search.js";
-import UDExSearch from "./Search.js";
 import UDExTag from "./Tag.js";
-import UDExButton from "./Button.js";
-import UDExValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import UDExControlButton from "./ControlButton.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
-import { Placement } from "./types/Dropdown.js";
-import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import UDExTagGroup from "./TagGroup.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import { SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
+import UDExSelectBase from "./SelectBase.js";
 import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import type { UDExSelectBaseEvents } from "./SelectBase.js";
 
 // Styles
-import SelectBoxCss from "./generated/themes/SelectBox.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
-import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import SelectBoxCss from "./generated/themes/SelectBox.css.js";
+import SelectBaseCss from "./generated/themes/SelectBase.css.js";
 
 export type SelectBoxAccessibilityAttributes = {
   controls?: string,
@@ -77,7 +70,13 @@ type UDExSelectBoxRemoveEventDetail = {
 @customElement({
   tag: "udex-select-box",
   renderer: litRender,
-  styles: [TextFieldCss, SelectBoxCss, SearchableListCss, getEffectiveScrollbarStyle()],
+  styles: [
+    TextFieldCss,
+    SelectBoxCss,
+    SelectBaseCss,
+    SearchableListCss,
+    getEffectiveScrollbarStyle(),
+  ],
   template: SelectBoxTemplate,
   dependencies: [
     UDExSelectBoxGroupHeader,
@@ -85,25 +84,23 @@ type UDExSelectBoxRemoveEventDetail = {
     UDExListSelectAll,
     UDExSelectBoxItem,
     UDExStatusMessage,
-    UDExControlButton,
-    UDExTagGroup,
     UDExBusyIndicator,
+    UDExTagGroup,
     UDExListItem,
     UDExList,
-    UDExSearch,
-    UDExButton,
     UDExTag,
     Tokenizer,
+    Popover,
     Token,
     Icon,
-    Popover,
   ],
 })
 
 /**
- * Fired event when the user clicks on the reset button in the search.
+ * Fired event when the user remove tag.
  *
  * @public
+ * @param {UDExItemFromList} item The removed item
  */
 @event("remove", { bubbles: true })
 
@@ -114,19 +111,12 @@ type UDExSelectBoxRemoveEventDetail = {
  */
 @event("show-more", { bubbles: true })
 
-/**
- * Fired before the dropdown pane is opened.
- *
- * @public
- */
-@event("before-open", { bubbles: true })
-
-class UDExSelectBox extends UDExSearchableListBase {
+class UDExSelectBox extends UDExSelectBase {
   eventDetails!: {
     "remove": UDExSelectBoxRemoveEventDetail,
     "show-more": void,
-    "before-open": void,
-  } & UDExSearchableListBaseEvents;
+  } & UDExSelectBaseEvents;
+
   /**
    * Determines if there is no enough space, the component can be placed
    * over the target.
@@ -137,86 +127,6 @@ class UDExSelectBox extends UDExSearchableListBase {
   @property({ type: Boolean })
     disableTargetOverlap?: boolean;
 
-  /**
-   * Defines whether the component is required.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    required!: boolean;
-
-  /**
-   * Defines whether the component is in disabled state.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    disabled!: boolean;
-
-  /**
-   * Defines label text for field container.
-   *
-   * @default ""
-   * @public
-   */
-  @property({ type: String })
-    label!: string;
-
-  /**
-   * Defines the accessible ARIA name of the component.
-   *
-   * @default undefined
-   * @public
-   */
-  @property()
-    accessibleName?: string;
-
-  /**
-   * Receives id (or many ids) of the elements that label the component.
-   * @default undefined
-   * @public
-   */
-  @property()
-    accessibleNameRef?: string;
-
-  /**
-   * Defines whether the component is read-only.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    readonly!: boolean;
-
-  /**
-   * Defines whether the component is display-only.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    displayonly!: boolean;
-
-  /**
-   * Defines the value state of the trigger container.
-   *
-   * @default "Standard"
-   * @public
-   */
-  @property()
-    valueState: `${UDExValueState}` = UDExValueState.Standard;
-
-  /**
-   * Defines supporting text under the trigger container.
-   *
-   * @default undefined
-   * @public
-   */
-  @property({ type: String })
-    supportingText?: string;
-
   /**
    * Determines on which side of the component the Tooltip is displayed.
    *
@@ -226,26 +136,6 @@ class UDExSelectBox extends UDExSearchableListBase {
   @property()
     tooltipPlacement: `${Placement}` = Placement.Bottom;
 
-  /**
-   * @private
-   */
-  @property({ type: String, noAttribute: true })
-    _direction?: string;
-
-  /**
-   * @default false
-   * @private
-   */
-  @property({ type: Boolean })
-    _focused!: boolean;
-
-  /**
-   * @default false
-   * @private
-   */
-  @property({ type: Boolean })
-    _open: boolean = false;
-
   /**
    * @default false
    * @private
@@ -253,78 +143,35 @@ class UDExSelectBox extends UDExSearchableListBase {
   @property({ type: Boolean })
     _showTagsDropdownContent!: boolean;
 
-  _trigger!: HTMLElement;
-  _triggerWrapper!: HTMLElement;
-  _popover!: Popover;
-  _tokenizer!: Tokenizer;
-  _search!: UDExSearch;
-  _singleSelectedOption!: string;
   _truncatableTag!: UDExTag;
-  _tags!: Array<UDExTag>;
   _inactiveTabIndex: number = -1;
-  _activeTabIndex: number = 0;
-  _openedByTrigger: boolean = true;
-  _shouldScrollToEnd: boolean = false;
-  _handleResizeBound: ResizeObserverCallback;
+  _handleResizeTokenizerBound: ResizeObserverCallback;
 
   constructor() {
     super();
-    this._shouldFilterItems = false;
-    this._handleResizeBound = this._handleResize.bind(this);
-    this._filteredItems = [];
+    this._handleResizeTokenizerBound = this.handleResizeTokenizer.bind(this);
   }
 
   onEnterDOM() {
-    ResizeHandler.register(this, this._handleResizeBound);
+    super.onEnterDOM();
+    ResizeHandler.register(this, this._handleResizeTokenizerBound);
   }
 
   onExitDOM() {
-    ResizeHandler.deregister(this, this._handleResizeBound);
+    super.onExitDOM();
+    ResizeHandler.deregister(this, this._handleResizeTokenizerBound);
   }
 
   onAfterRendering() {
-    this._tokenizer = this.getTagGroup()?._tokenizer;
-    this._popover = this.getPopover();
-    this._search = this.getSearch();
-    this._trigger = this.getTrigger();
-    this._triggerWrapper = this.getTriggerWrapper();
-    this._tags = this.getTags();
-    this.handleDirection();
-    if (this._tokenizer?.tokens.length > 0) {
-      if (!this.displayonly) {
-        this._tokenizer.moreLink?.setAttribute("tabindex", "-1");
-      }
-      if (this._shouldScrollToEnd) {
-        this._tokenizer.scrollToEnd();
-      }
-      this.resetTagsTabIndexes();
-    }
-    this.handleOutsideClick();
-  }
-
-  onBeforeRendering() {
-    super.onBeforeRendering();
-
-    if (this.modeSingleSelect && this.hasSelectedItems) {
-      this.handleSingleSelectMode();
+    super.onAfterRendering();
+    this.handleSelectBoxOutsideClick();
+    if (this.tagGroup) {
+      this.configureTokenizer();
     }
   }
 
-  _handleResize() {
-    this._popover.style.setProperty("--udex-dropdown-pane-width", `${this._triggerWrapper.offsetWidth}px`);
-  }
-
-  handleItemPress(e:CustomEvent) {
-    this.onItemPress(e);
-
-    if (this.modeSingleSelect) {
-      this.handleSingleSelectMode();
-      this.closeDropdown();
-    }
-  }
-
-  handleSingleSelectMode() {
-    this._singleSelectedOption = this.selectedItems[0]?.label;
+  handleResizeTokenizer() {
+    this.resizeTokenizer();
   }
 
   handleSelectAll(e:CustomEvent) {
@@ -332,33 +179,46 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleHeaderPress(e:CustomEvent) {
+    this._search.focus();
     this.onHeaderPress(e);
   }
 
-  handleValueSearch(e:CustomEvent) {
-    this.onSearch(e);
+  handleItemPress(e:CustomEvent) {
+    this.handleItemSelection(e);
   }
 
-  handleSubmitSearch() {
-    this.closeDropdown();
-    this.onSubmitSearch();
+  handlerShowMoreItems(e: CustomEvent) {
+    if (!this.displayonly) {
+      this.showMoreItems(e);
+      this.handleUnselectTruncatableTag();
+      this.openDropdown();
+    }
+    this.fireDecoratorEvent("show-more");
   }
 
-  handleResetSearch() {
-    this.onResetSearch();
-  }
+  handleInputFocusIn() {
+    this.inputFocusIn();
 
-  handleFocusIn() {
-    if (this.isDisabled) {
-      return;
-    }
-    this._focused = true;
-    if (this._tokenizer) {
-      this._tokenizer.expanded = false;
+    if (this.tokenizer) {
+      this.tokenizer.expanded = true;
+      this._requestRender = true;
     }
   }
 
-  handleFocusOut() {
+  handleInputFocusOut(e: FocusEvent) {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);
+    const hasTags = this.tokenizer?.tokens.length > 0;
+
+    if (!isInsideComponent) {
+      this.closeDropdown();
+      this.resetSearchState();
+
+      if (hasTags) {
+        this.collapseTokenizer();
+      }
+    }
+
     this._focused = false;
   }
 
@@ -367,35 +227,26 @@ class UDExSelectBox extends UDExSearchableListBase {
       this._managePopupListeners(UDExPopoverPart.Header, "addEventListener");
     }
 
-    if (this.height) {
-      this._setContentHeight();
-    }
-
-    this.fireDecoratorEvent("before-open");
+    this.dropdownBeforeOpen();
   }
 
-  handleDropdownAfterClose() {
+  handleDropdownClose() {
     if (this.preventPageScroll) {
       this._managePopupListeners(UDExPopoverPart.Header, "removeEventListener");
     }
 
-    if (this._tokenizer?._tokensCount > 0) {
-      this._tokenizer.expanded = false;
+    if (this.modeMultiSelect) {
+      this.handleUnselectTruncatableTag();
     }
-    this.handleUnselectTruncatableTag();
-    this._open = false;
-  }
 
-  showMoreItems() {
-    this._shouldScrollToEnd = true;
-    this._showTagsDropdownContent = false;
-    this.openDropdown();
-    this.handleUnselectTruncatableTag();
+    this._open = false;
+    this.fireEventDropdownClose();
   }
 
   handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
     tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
+    this.tokenizer.deleteToken(tag as Token, true);
     this.handleDropdownItemPress(tagId);
     this.fireDecoratorEventRemove(tagId);
   }
@@ -415,16 +266,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   handleUnselectTruncatableTag() {
     if (this._truncatableTag?.selected) {
       this._truncatableTag.selected = false;
-    }
-  }
-
-  handleKeyDownTrigger(e: KeyboardEvent) {
-    if (!this.isDisabled && (isSpace(e) || isEnter(e))) {
-      e.preventDefault();
-      e.stopPropagation();
       this._showTagsDropdownContent = false;
-      this._openedByTrigger = true;
-      this.openDropdown();
     }
   }
 
@@ -433,18 +275,17 @@ class UDExSelectBox extends UDExSearchableListBase {
     const originalEvent: KeyboardEvent = e.detail.originalEvent;
     const tag = originalEvent.target as UDExTag;
     const token = originalEvent.target as Token;
-    this.getTagContent(this._tags[0]).tabIndex = this._inactiveTabIndex;
-    const tagsCount = this._tokenizer._tokensCount;
-    this._tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && tagsCount > 0;
+    this.tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && this.tokenizer.tokens.length > 0;
+
     if (isTabNext(originalEvent)) {
-      this._trigger.focus();
+      originalEvent.preventDefault();
+      this._search.focus();
       return;
     }
 
     if ((isDown(originalEvent) || isUp(originalEvent))) {
-      this._tokenizer._preventCollapse = true;
-      this._openedByTrigger = false;
-      this.showMoreItems();
+      this._search.focus();
+      this.openDropdown();
     }
 
     if (isSpace(originalEvent) || isShift(originalEvent) || isEnter(originalEvent)) {
@@ -454,9 +295,9 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
 
     if (isLeft(originalEvent) || isRight(originalEvent)) {
-      const nextTokenIndex = this._tokenizer._calcNextTokenIndex(token, this._tokenizer.tokens, isRight(originalEvent));
-      this.focusTag(nextTokenIndex);
-      this.scrollToTag(nextTokenIndex);
+      const nextTokenIndex = this.tokenizer._calcNextTokenIndex(token, this.tokenizer.tokens, isRight(originalEvent));
+      this.focusTagByIndex(nextTokenIndex);
+      this.tokenizer._scrollToToken(this.tokenizer.tokens[nextTokenIndex]);
       return;
     }
 
@@ -468,70 +309,73 @@ class UDExSelectBox extends UDExSearchableListBase {
 
     if (isDelete(originalEvent) || isBackSpace(originalEvent)) {
       this.handleRemoveTag(null, tag);
-      if (this._tokenizer.tokens.length === 1) {
-        this._trigger.focus();
+      if (this.tokenizer.tokens.length === 1) {
+        this._search.focus();
       } else {
-        this._tokenizer.deleteToken(token);
+        this.tokenizer.deleteToken(token, true);
       }
     }
   }
 
-  handleKeyDownDropdown(e: KeyboardEvent) {
-    if (this.tabNavigationEnabled) {
+  handleKeyDownSearch(e: KeyboardEvent) {
+    const tokenizer = this.tokenizer;
+    const hasTags = tokenizer?.tokens.length > 0;
+    const lastTagIndex = tokenizer?.tokens.length - 1;
+
+    if (isTabPrevious(e)) {
+      this.resetTagsTabIndexes();
       return;
     }
 
-    const isTabPrevPress = isTabPrevious(e) && !this._search;
-    const isTabNextPress = isTabNext(e);
-    const isEscapePress = isEscape(e);
-    const isSearchResetTrigger = e.target === this._search;
-    if ((isTabNextPress && (!isSearchResetTrigger || this.isListEmpty)) || isTabPrevPress || isEscapePress) {
-      this.closeDropdown(e);
+    if (isLeft(e) && hasTags) {
+      e.preventDefault();
+      this.focusTagByIndex(lastTagIndex);
+      return;
     }
-  }
-
-  handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {
-    const { detail: { e } } = keyEvent;
 
-    if (isTabPrevious(e) || isEscape(e)) {
-      this.closeDropdown(e);
+    if (isBackSpace(e) && this._inputValue === "" && hasTags) {
+      this.focusTagByIndex(lastTagIndex);
+      return;
     }
+
+    this.onKeyDownSearch(e);
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
-      if (this._tokenizer?.tokens.length > 0 && e.target !== this) {
-        this._tokenizer.expanded = false;
+  handleSelectBoxOutsideClick() {
+    document.addEventListener("click", (e: Event) => {
+      if (e.target !== this) {
+        this._open = this._popover.open;
+        if (this.tokenizer?.tokens.length > 0) {
+          this.collapseTokenizer();
+        }
       }
-      this._open = this._popover.open;
     });
   }
 
-  openDropdown() {
-    this._popover.opener = this._trigger;
-    this._popover.open = true;
-    this._open = true;
-    if (this.showMultiSelectedOptions) {
-      this._tokenizer.expanded = true;
+  focusTagByIndex(index: number) {
+    const token = this.tokenizer.tokens[index];
+    if (token) {
+      token.focus();
+      token.forcedTabIndex = "0";
     }
   }
 
-  closeDropdown(e?: KeyboardEvent) {
-    if (this._popover.open) {
-      if (this._tokenizer) {
-        this._tokenizer._preventCollapse = false;
-        this._tokenizer.expanded = false;
-      }
+  fireDecoratorEventRemove(id: string) {
+    this.fireDecoratorEvent("remove", {
+      item: this.getItemFromList(id),
+    });
+  }
 
-      if (e && (isEscape(e) || isTabPrevious(e))) {
-        e.preventDefault();
-        if (this._openedByTrigger) {
-          this._trigger.focus();
-        }
-      }
-      this._open = false;
-      this._popover.open = false;
-    }
+  collapseTokenizer() {
+    this.tokenizer.expanded = false;
+    this._selectedOption = "";
+  }
+
+  showMoreItems(e: CustomEvent) {
+    e.preventDefault();
+    this._focused = true;
+    this._search.focus();
+    this._showTagsDropdownContent = false;
   }
 
   toggleTruncatedPopover(tag: UDExTag) {
@@ -548,86 +392,20 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
   }
 
-  scrollToTag(index: number) {
-    this._tokenizer._scrollToToken(this._tokenizer.tokens[index]);
-  }
-
-  focusTag(index: number) {
-    this._tokenizer.tokens[index].focus();
-    this._tokenizer.tokens[index].forcedTabIndex = "0";
+  configureTokenizer() {
+    this.tagGroup._scrollToEnd = true;
+    this.resetTagsTabIndexes();
   }
 
-  fireDecoratorEventRemove(id: string) {
-    this.fireDecoratorEvent("remove", {
-      item: this.getItemFromList(id),
+  resetTagsTabIndexes() {
+    this.tags.forEach(tag => {
+      this.getTagContent(tag).tabIndex = this._inactiveTabIndex;
     });
   }
 
-  handleOpenMultiSelect() {
-    if (this._popover.open) {
-      this.closeDropdown();
-    } else {
-      this._showTagsDropdownContent = false;
-      this.openDropdown();
-    }
-  }
-
-  handleOpenSingleSelect() {
-    if (this._popover.open) {
-      this.closeDropdown();
-    } else {
-      this.openDropdown();
-    }
-  }
-
-  getHandleMultiSelectOpen() {
-    return !this.isDisabled && this.modeMultiSelect ? this.handleOpenMultiSelect() : undefined;
-  }
-
-  getHandleSingleSelectOpen() {
-    return !this.isDisabled && this.modeSingleSelect ? this.handleOpenSingleSelect() : undefined;
-  }
-
-  getHandlerShowMoreItems(e: CustomEvent) {
-    if (!this.displayonly) {
-      e.preventDefault();
-      this.showMoreItems();
-    }
-    this.fireDecoratorEvent("show-more");
-  }
-
-  getTrigger(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-text-field__input")!;
-  }
-
-  getTriggerWrapper(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-text-field__wrap")!;
-  }
-
-  getTagGroup(): UDExTagGroup {
-    return this.shadowRoot!.querySelector<UDExTagGroup>("[udex-tag-group]")!;
-  }
-
-  getTags(): Array<UDExTag> {
-    if (this.getTagGroup()) {
-      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("[udex-tag]"));
-    }
-    return [];
-  }
-
-  getTagContent(tag: UDExTag): HTMLElement {
-    return tag.shadowRoot!.querySelector(".udex-tag")!;
-  }
-
-  handleDirection() {
-    const directionStyles: string = window
-      .getComputedStyle(this)
-      .getPropertyValue("direction");
-
-    if (!directionStyles) {
-      this._direction = "ltr";
-    } else {
-      this._direction = directionStyles;
+  resizeTokenizer() {
+    if (this.tokenizer) {
+      this.tokenizer._handleResize();
     }
   }
 
@@ -635,8 +413,8 @@ class UDExSelectBox extends UDExSearchableListBase {
     return isSpace(e) || isEnter(e);
   }
 
-  resetTagsTabIndexes() {
-    this._tags.forEach((tag, i) => { this.getTagContent(tag).tabIndex = (i === 0 && !this.isDisabled) ? this._activeTabIndex : this._inactiveTabIndex; });
+  getTagContent(tag: UDExTag): HTMLElement {
+    return tag.shadowRoot!.querySelector(".udex-tag")!;
   }
 
   /**
@@ -647,105 +425,38 @@ class UDExSelectBox extends UDExSearchableListBase {
     this.closeDropdown();
   }
 
-  get allowTargetOverlap(): boolean {
-    return !this.disableTargetOverlap;
+  get tokenizer(): Tokenizer {
+    return this.tagGroup?.tokenizer;
   }
 
-  get isDisabled(): boolean {
-    return this.readonly || this.displayonly || this.disabled;
+  get tagGroup(): UDExTagGroup {
+    return this.shadowRoot!.querySelector<UDExTagGroup>("[udex-tag-group]")!;
   }
 
-  get truncatableTagLabel(): string {
-    return this._truncatableTag.text.replace(/<\/?b>/gi, "");
+  get tags(): Array<UDExTag> {
+    return this.tagGroup ? Array.from(this.tagGroup.shadowRoot!.querySelectorAll<UDExTag>("[udex-tag]")) : [];
   }
 
-  get showSingleSelectedOption(): boolean {
-    return this._singleSelectedOption?.length > 0 && this.modeSingleSelect;
+  get truncatableTagLabel(): string {
+    return this._truncatableTag.text.replace(/<\/?b>/gi, "");
   }
 
   get showMultiSelectedOptions(): boolean {
     return this.hasSelectedItems && this.modeMultiSelect;
   }
 
-  get labelClass(): string {
-    const baseClass = "udex-text-field__label";
-    const isActive = this._open || this._singleSelectedOption || this.hasSelectedItems;
-    return isActive ? `${baseClass} ${baseClass}_active` : `${baseClass}`;
-  }
-
-  get isReadOrDisplayOnly(): boolean {
-    return this.readonly || this.displayonly;
+  get allowTargetOverlap(): boolean {
+    return !this.disableTargetOverlap;
   }
 
-  get tokenizerExpanded() {
+  get tokenizerExpanded(): boolean {
     if (this._showTagsDropdownContent && this._truncatableTag) {
       return false;
     }
 
-    if (this._tokenizer) {
-      return this._tokenizer.expanded;
-    }
-
-    return this._open;
-  }
-
-  get showTrigger(): boolean {
-    return !this.displayonly;
-  }
-
-  get hasSelectedItems(): boolean {
-    return this.selectedItems.length > 0;
-  }
-
-  get effectiveTabIndex(): string {
-    const tabindex = this.getAttribute("tabindex");
-    return this.disabled ? `${this._inactiveTabIndex}` : tabindex || `${this._inactiveTabIndex}`;
-  }
-
-  get triggerTabIndex(): string {
-    return this.disabled || this.readonly ? `${this._inactiveTabIndex}` : "";
-  }
-
-  get iconAccessibleNameText(): string {
-    const selectOptionsText = UDExSelectBox.i18nBundle.getText(SELECT_OPTIONS);
-    const iconAccessibleNameTextSingleMode = this._singleSelectedOption || selectOptionsText;
-    return this.modeMultiSelect ? selectOptionsText : iconAccessibleNameTextSingleMode;
-  }
-
-  get additionalClassName(): string {
-    return `udex-list__sticky`;
-  }
-
-  get searchableList() {
-    this.defaultAccessibleRole = "listbox";
-    return executeTemplate(UDExSelectBox.searchableListBaseTemplate, this);
-  }
-
-  get accInfo() {
-    return {
-      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || undefined,
-    };
-  }
-
-  get accessibilityAttributes(): SelectBoxAccessibilityAttributes {
-    return {
-      expanded: `${this._open}`,
-      controls: this.popoverId,
-      hasPopup: this.listboxRole,
-      ariaLabel: this.iconAccessibleNameText,
-    };
-  }
-
-  get popoverId(): string {
-    return `${this._id}_udex-select-box__dropdown`;
-  }
-
-  get listboxRole(): string {
-    return "listbox";
-  }
+    const isCurrentlyExpanded = this.tokenizer?.expanded;
 
-  static get searchableListBaseTemplate() {
-    return SearchableListBaseTemplate;
+    return this._focused || this._open || isCurrentlyExpanded;
   }
 }