@sapudex/web-components 2.39.0 → 2.41.0

package/src/SelectBase.ts

@@ -1,8 +1,9 @@
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import {
-  isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious,
+  isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious, isLeft, isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { UDExListItemBase } from "./List.js";
@@ -163,6 +164,16 @@ class UDExSelectBase extends UDExSearchableListBase {
   @property({ type: Boolean, noAttribute: true })
     _requestRender = false;
 
+  /**
+   * Defines the footer content for the component dropdown.
+   * Place any content (e.g. an action button) here. Clicking footer content does not close the dropdown —
+   * use the <code>close</code> method if needed.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    footer!: Slot<HTMLElement>;
+
   _paneWidthVariableName = "--udex-dropdown-pane-width";
   _labelBaseClass = "udex-text-field__label";
   _dropdownClass = "udex-select-box__dropdown";
@@ -177,10 +188,13 @@ class UDExSelectBase extends UDExSearchableListBase {
   _inputValue: string = "";
   _lastSelectedItemId: string = "";
   _handleResizeBound: ResizeObserverCallback;
+  _handleListKeyDownBound: (e: KeyboardEvent) => void;
+  _listKeyDownListenerAdded: boolean = false;
 
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
+    this._handleListKeyDownBound = this._handleListKeyDownCapture.bind(this);
   }
 
   onEnterDOM() {
@@ -192,6 +206,10 @@ class UDExSelectBase extends UDExSearchableListBase {
 
   onExitDOM() {
     ResizeHandler.deregister(this, this._handleResizeBound);
+    if (this._list && this._listKeyDownListenerAdded) {
+      this._list.removeEventListener("keydown", this._handleListKeyDownBound, { capture: true });
+      this._listKeyDownListenerAdded = false;
+    }
   }
 
   onInvalidation({ name }: ChangeInfo): void {
@@ -210,6 +228,11 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (this._requestRender) {
       this._requestRender = false;
     }
+
+    if (!this._listKeyDownListenerAdded && this._list) {
+      this._list.addEventListener("keydown", this._handleListKeyDownBound, { capture: true });
+      this._listKeyDownListenerAdded = true;
+    }
   }
 
   _handleResize() {
@@ -224,14 +247,44 @@ class UDExSelectBase extends UDExSearchableListBase {
       return;
     }
 
-    if (isTabPrevious(e) && !this.tabNavigationEnabled) {
+    if (this.hasFooter) {
+      const isInFooter = (e.target as HTMLElement).closest?.("[slot=\"footer\"]");
+      if (isInFooter) {
+        if (isEscape(e)) {
+          this.handleEscKeyPress(e);
+          return;
+        }
+        if (isTabNext(e)) {
+          e.preventDefault();
+          this.closeDropdown();
+          this._moveFocusAfterComponent();
+          return;
+        }
+        if (isTabPrevious(e)) {
+          e.preventDefault();
+          this._focusLastListItem();
+          return;
+        }
+        return;
+      }
+
+      if (isTabNext(e)) {
+        e.preventDefault();
+        (this._firstFocusableIn(this.footer[0]) ?? this.footer[0])?.focus();
+        return;
+      }
+    }
+
+    if (isTabPrevious(e)) {
       e.preventDefault();
       this._search.focus();
       return;
     }
 
-    if (isTabNext(e) && !this.tabNavigationEnabled) {
+    if (isTabNext(e)) {
+      e.preventDefault();
       this.closeDropdown();
+      this._moveFocusAfterComponent();
       return;
     }
 
@@ -240,15 +293,32 @@ class UDExSelectBase extends UDExSearchableListBase {
       return;
     }
 
-    if (!items || this.tabNavigationEnabled) {
+    if (!items) {
+      return;
+    }
+
+    if (isRight(e)) {
+      e.preventDefault();
+      this._handleArrowRightInRow(e.target as HTMLElement);
+      return;
+    }
+
+    if (isLeft(e)) {
+      e.preventDefault();
+      this._handleArrowLeftInRow(e.target as HTMLElement);
       return;
     }
 
-    this.handleListNavigationKeys(e, items);
+    const iconSlot = this._getIconButtonSlot(e.target as HTMLElement);
+    const effectiveTarget = iconSlot
+      ? (e.target as HTMLElement).parentElement as UDExListItemBase | undefined
+      : undefined;
+
+    this.handleListNavigationKeys(e, items, effectiveTarget);
   }
 
-  handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[]) {
-    const currentSelectedIndex = this._list?.getCurrentIndex(items, e.target as UDExListItemBase);
+  handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[], effectiveTarget?: UDExListItemBase) {
+    const currentSelectedIndex = this._list?.getCurrentIndex(items, effectiveTarget ?? e.target as UDExListItemBase);
     const lastItemIndex = items.length - 1;
 
     if (isDown(e)) {
@@ -352,10 +422,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     e.stopPropagation();
     this.closeDropdown();
     this._search.focus();
-
-    if (!this.tabNavigationEnabled) {
-      this._selectedOption = "";
-    }
+    this._selectedOption = "";
   }
 
   handleItemSelection(e:CustomEvent) {
@@ -412,10 +479,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
     const firstItem = items[firstIndex];
     this._list.setTabIndexByIndex(items, firstIndex);
-
-    if (!this.tabNavigationEnabled) {
-      this._selectedOption = firstItem.label;
-    }
+    this._selectedOption = firstItem.label;
 
     if (firstItem.isGroup) {
       this._list.focusHeader(firstItem);
@@ -537,6 +601,129 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
   }
 
+  get hasFooter(): boolean {
+    return this.footer.length > 0;
+  }
+
+  _getIconButtonSlot(el: HTMLElement): string | null {
+    const iconSlot = el.getAttribute?.("slot");
+    return (iconSlot === "firstIcon" || iconSlot === "secondIcon") ? iconSlot : null;
+  }
+
+  _handleArrowRightInRow(target: HTMLElement): void {
+    const iconSlot = this._getIconButtonSlot(target);
+    if (!iconSlot) {
+      const firstIcon = target.querySelector<HTMLElement>("[slot=\"firstIcon\"]");
+      firstIcon?.focus();
+      return;
+    }
+    if (iconSlot === "firstIcon") {
+      const parentItem = target.parentElement;
+      if (parentItem) {
+        const secondIcon = parentItem.querySelector<HTMLElement>("[slot=\"secondIcon\"]");
+        secondIcon?.focus();
+      }
+    }
+  }
+
+  _handleArrowLeftInRow(target: HTMLElement): void {
+    const iconSlot = this._getIconButtonSlot(target);
+    if (!iconSlot) { return; }
+    const parentItem = target.parentElement;
+    if (!parentItem) { return; }
+    if (iconSlot === "secondIcon") {
+      const firstIcon = parentItem.querySelector<HTMLElement>("[slot=\"firstIcon\"]");
+      firstIcon?.focus();
+    } else if (iconSlot === "firstIcon") {
+      (parentItem as UDExListItemBase).focus();
+    }
+  }
+
+  _handleListKeyDownCapture(e: KeyboardEvent): void {
+    const target = e.target as HTMLElement;
+    if (!this._getIconButtonSlot(target)) { return; }
+    if (!isDown(e) && !isUp(e)) { return; }
+
+    const items = this._list?.getKeyboardNavigationItems();
+    if (!items?.length) { return; }
+
+    e.stopImmediatePropagation();
+    e.preventDefault();
+
+    const parentItem = target.parentElement as UDExListItemBase | null;
+    if (!parentItem) { return; }
+
+    const currentIndex = this._list.getCurrentIndex(items, parentItem);
+    if (currentIndex < 0) { return; }
+
+    const lastItemIndex = items.length - 1;
+    let targetIndex: number;
+
+    if (isDown(e)) {
+      const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;
+      const isNonInteractive = items[nextIndex].nonInteractive && !items[nextIndex].collapsible;
+      const wrappedNext = nextIndex + 1 > lastItemIndex ? 0 : nextIndex + 1;
+      targetIndex = isNonInteractive ? wrappedNext : nextIndex;
+    } else {
+      const prevIndex = currentIndex - 1 < 0 ? lastItemIndex : currentIndex - 1;
+      const isNonInteractive = items[prevIndex].nonInteractive && !items[prevIndex].collapsible;
+      const wrappedPrev = prevIndex === 0 ? lastItemIndex : prevIndex - 1;
+      targetIndex = isNonInteractive ? wrappedPrev : prevIndex;
+    }
+
+    this._list.unsetTabIndexByIndex(items, currentIndex);
+    this._list.setTabIndexByIndex(items, targetIndex);
+    items[targetIndex].focus();
+    this._selectedOption = items[targetIndex].label;
+  }
+
+  _focusLastListItem() {
+    const items = this._list?.getKeyboardNavigationItems();
+    if (!items || items.length === 0) {
+      this._search.focus();
+      return;
+    }
+    const lastIndex = items.length - 1;
+    const lastItem = items[lastIndex];
+    this._list.setTabIndexByIndex(items, lastIndex);
+    this._selectedOption = lastItem.label;
+    if (lastItem.isGroup) {
+      this._list.focusHeader(lastItem);
+    } else {
+      lastItem.focus();
+    }
+  }
+
+  _firstFocusableIn(el: Element | undefined): HTMLElement | null {
+    if (!(el instanceof HTMLElement)) { return null; }
+    if (el.tabIndex >= 0 && !el.hidden && !(el as HTMLElement & { disabled?: boolean }).disabled && (!!el.offsetParent || el.matches("body"))) {
+      return el;
+    }
+    return Array.from(el.children).reduce<HTMLElement | null>(
+      (found, child) => found ?? this._firstFocusableIn(child), null,
+    );
+  }
+
+  _moveFocusAfterComponent() {
+    const findAndFocus = (from: Element) => {
+      let node: Element | null = from;
+      while (node && node !== document.documentElement) {
+        let sibling = node.nextElementSibling;
+        while (sibling) {
+          const focusable = this._firstFocusableIn(sibling);
+          if (focusable) {
+            focusable.focus();
+            return;
+          }
+          sibling = sibling.nextElementSibling;
+        }
+        node = node.parentElement;
+      }
+    };
+
+    findAndFocus(this);
+  }
+
   get ariaDescribedbyText(): string {
     if (this.modeSingleSelect) {
       return this._selectedOption;

package/src/SelectBox.ts

@@ -211,9 +211,10 @@ class UDExSelectBox extends UDExSelectBase {
   handleInputFocusOut(e: FocusEvent) {
     const relatedTarget = e.relatedTarget as HTMLElement;
     const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);
+    const isFooterElement = this.hasFooter && !!relatedTarget && this.footer.some(el => el === relatedTarget || el.contains(relatedTarget));
     const hasTags = this.tokenizer?.tokens.length > 0;
 
-    if (!isInsideComponent) {
+    if (!isInsideComponent && !isFooterElement) {
       this.closeDropdown();
       this.resetSearchState();
 

package/src/SelectBoxTemplate.tsx

@@ -95,6 +95,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
               {this._showTagsDropdownContent
                 ? renderTruncatableTagContent.call(this)
                 : this.searchableList}
+              {this.hasFooter && <slot name="footer" slot="footer" />}
             </UI5Popover>
             <span aria-live="polite" aria-atomic="true" class="hidden">{this._accSearchResultInfo}</span>
           </div>

package/src/TextField.ts

@@ -280,7 +280,7 @@ class UDExTextField extends UI5Element {
    */
 
   @property({ type: String })
-    showButtonTooltip: string = "";
+    buttonTooltip: string = "";
 
   /**
    * Defines the inner stored class of the label.

package/src/TextFieldTemplate.tsx

@@ -49,7 +49,7 @@ export default function TextFieldTemplate(this: TextField) {
             part="textfield-control-btn"
             class={`${rootClass}__icon-container`}
             size="Large"
-            tooltip={this.showButtonTooltip}
+            tooltip={this.buttonTooltip}
             active={this.active}
             disabled={this.disabled}
             readonly={this.readonly}

package/src/features/SearchSuggestionsPopover.ts

@@ -10,7 +10,7 @@ interface SuggestionComponent extends UI5Element {
   open: boolean;
   value?: string;
   suggestionItems?: string;
-  openSuggestionPopup?: boolean;
+  openSuggestionPopup: boolean;
 }
 
 type SearchInputSuggestion = {
@@ -32,8 +32,6 @@ class Suggestion {
   focusabledList?: HTMLDivElement;
   lists?: Array<HTMLDivElement>;
   _focusHandler: UDExListWithFirstLetterFocus = new UDExFirstLetterFocusHandler();
-  _tabEscapedFromPopover: boolean = false;
-  _shiftTabEscapedFromPopover: boolean = false;
 
   constructor(component: SuggestionComponent) {
     this.component = component;
@@ -76,22 +74,15 @@ class Suggestion {
       this._focusHandler.focusMatchingListItem(key);
     }
   }
-  initLists(): void {
-    const list = this.popover?.querySelectorAll(".udex-search-suggestions__list") ? this.popover?.querySelectorAll<HTMLDivElement>(".udex-search-suggestions__list") : [];
-    const newLists = Array.from(list);
-
-    if (this.focusabledList && this.lists?.length && newLists.length) {
-      const oldIndex = this.lists.indexOf(this.focusabledList);
-      if (oldIndex >= 0 && oldIndex < newLists.length) {
-        this.focusabledList = newLists[oldIndex];
-      }
-    }
 
-    this.lists = newLists;
+  initLists(): void {
+    const list = this.popover?.querySelectorAll<HTMLDivElement>(".udex-search-suggestions__list") ?? [];
+    this.lists = Array.from(list);
   }
 
   close(): void {
     this._getSuggestionPopover();
+    this.getAllFocusableItems().forEach(item => item.removeAttribute("aria-selected"));
     this._getComponent().open = false;
     this.popover!.open = false;
     this.selectedItemIndex = -1;
@@ -114,192 +105,79 @@ class Suggestion {
     }
   }
 
-  onTab(e: KeyboardEvent) {
-    if (this._tabEscapedFromPopover) {
-      this._tabEscapedFromPopover = false;
-      return;
-    }
-    if (this.lists?.length && this._getComponent().open) {
-      this._shiftTabEscapedFromPopover = false;
-      e.preventDefault();
-      this.focusabledList = this.lists[0];
-      this.selectedItemIndex = -1;
-      this.focusabledList.focus();
-    }
+  getAllFocusableItems(): Element[] {
+    return Array.from(this.popover?.querySelectorAll<Button>("[ui5-button]") ?? []);
   }
 
-  getFocusableItems(): Element[] {
-    const items = this.focusabledList?.children ? this.focusabledList?.querySelectorAll<Button>("[ui5-button]") : [];
-    return Array.from(items);
-  }
-
-  onShiftTab(e: KeyboardEvent): void {
-    if (this._shiftTabEscapedFromPopover) {
-      this._shiftTabEscapedFromPopover = false;
-      return;
-    }
-    const keepOpen = !!this.component.openSuggestionPopup;
-    if (keepOpen && this.lists?.length && this._getComponent().open) {
-      this._tabEscapedFromPopover = false;
-      e.preventDefault();
-      this.focusabledList = this.lists[this.lists.length - 1];
-      this.focusabledList.focus();
-      this.selectedItemIndex = -1;
+  private _updateItemSelection(items: Element[], nextIndex: number): void {
+    if (this.selectedItemIndex >= 0 && this.selectedItemIndex < items.length) {
+      items[this.selectedItemIndex].removeAttribute("aria-selected");
     }
+    const button = items[nextIndex] as UI5Element;
+    button.setAttribute("aria-selected", "true");
+    button.focus();
+    this.selectedItemIndex = nextIndex;
   }
 
-  onEscape(e: KeyboardEvent) {
+  onKeyDown(e: KeyboardEvent): void {
     e.preventDefault();
-    this.close();
-    this.onFocusInput();
-  }
+    const items = this.getAllFocusableItems();
+    if (!items.length) {
+      return;
+    }
 
-  onKeyTabList(e: KeyboardEvent) {
-    const keepOpen = !!this.component.openSuggestionPopup;
+    const nextIndex = this.selectedItemIndex < 0 || this.selectedItemIndex >= items.length - 1
+      ? 0
+      : this.selectedItemIndex + 1;
 
-    if (this.lists?.length === 2) {
-      if (this.focusabledList === this.lists[1]) {
-        e.preventDefault();
-        if (keepOpen) {
-          this.focusabledList = undefined;
-          this.selectedItemIndex = -1;
-          this._tabEscapedFromPopover = true;
-          this.onFocusInput();
-          return;
-        }
-        this.close();
-        this.onFocusInput();
-        return;
-      }
-      if (this.focusabledList === this.lists[0]) {
-        e.preventDefault();
-        this.focusabledList = this.lists[1];
-        this.focusabledList.focus();
-        this.selectedItemIndex = -1;
-      }
-    }
-    if (this.lists?.length === 1) {
-      e.preventDefault();
-      if (keepOpen) {
-        this.focusabledList = undefined;
-        this.selectedItemIndex = -1;
-        this._tabEscapedFromPopover = true;
-        this.onFocusInput();
-        return;
-      }
-      this.close();
-      this.onFocusInput();
-    }
+    this._updateItemSelection(items, nextIndex);
   }
 
-  onPrevKeyTabList(e: KeyboardEvent) {
-    const keepOpen = !!this.component.openSuggestionPopup;
+  onKeyUp(e: KeyboardEvent): void {
     e.preventDefault();
-    if (this.lists?.length === 2) {
-      if (this.focusabledList === this.lists[0]) {
-        if (keepOpen) {
-          this.focusabledList = undefined;
-          this.selectedItemIndex = -1;
-          this._shiftTabEscapedFromPopover = true;
-        }
-        this.onFocusInput();
-        return;
-      }
-      if (this.focusabledList === this.lists[1]) {
-        this.focusabledList = this.lists[0];
-        this.focusabledList.focus();
-        this.selectedItemIndex = -1;
-      }
-    }
-    if (this.lists?.length === 1) {
-      if (keepOpen) {
-        this.focusabledList = undefined;
-        this.selectedItemIndex = -1;
-        this._shiftTabEscapedFromPopover = true;
-      }
-      this.onFocusInput();
+    const items = this.getAllFocusableItems();
+    if (!items.length) {
+      return;
     }
-  }
 
-  onKeyDown(e: KeyboardEvent) {
-    e.preventDefault();
-    const nextSelectedIdx = this.selectedItemIndex;
-    const focusabledItems = this.getFocusableItems();
-    const itemCount = focusabledItems.length - 1;
+    const prevIndex = this.selectedItemIndex <= 0
+      ? items.length - 1
+      : this.selectedItemIndex - 1;
 
-    if (this.lists?.length) {
-      if (nextSelectedIdx === -1) {
-        const button = focusabledItems[0] as UI5Element;
-
-        button.setAttribute("aria-selected", "true");
-        button.focus();
-        this.selectedItemIndex = 0;
-        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-        return true;
-      }
-      if (nextSelectedIdx >= 0 && nextSelectedIdx !== itemCount) {
-        const button = focusabledItems[nextSelectedIdx + 1] as UI5Element;
+    this._updateItemSelection(items, prevIndex);
+  }
 
-        focusabledItems[nextSelectedIdx].removeAttribute("aria-selected");
-        button.setAttribute("aria-selected", "true");
-        button.focus();
-        this.selectedItemIndex = nextSelectedIdx + 1;
-        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-        return true;
-      }
-      if (nextSelectedIdx === itemCount && this.focusabledList === this.lists[0] && this.lists.length === 2) {
-        focusabledItems[nextSelectedIdx].removeAttribute("aria-selected");
-        this.focusabledList?.removeAttribute("aria-activedescendant");
-        this.focusabledList = this.lists[1];
-        this.focusabledList.focus();
-        this.selectedItemIndex = -1;
-        return true;
-      }
+  onTab(): void {
+    if (!this._getComponent().openSuggestionPopup) {
+      this.close();
     }
+    this.resetFocusState();
   }
 
-  onKeyUp(e: KeyboardEvent) {
+  onEscape(e: KeyboardEvent): void {
     e.preventDefault();
-    const focusabledItems = this.getFocusableItems();
-    const itemCount = focusabledItems.length - 1;
-    const previousSelectedIdx = this.selectedItemIndex;
-
-    if (this.lists?.length) {
-      if (previousSelectedIdx === -1) {
-        const button = focusabledItems[0] as UI5Element;
-
-        button.setAttribute("aria-selected", "true");
-        button.focus();
-        this.selectedItemIndex = 0;
-        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-        return true;
-      }
-      if (previousSelectedIdx > 0 && previousSelectedIdx <= itemCount) {
-        const button = focusabledItems[previousSelectedIdx - 1] as UI5Element;
+    this.close();
+    this.onFocusInput();
+  }
 
-        focusabledItems[previousSelectedIdx].removeAttribute("aria-selected");
-        button.setAttribute("aria-selected", "true");
-        button.focus();
-        this.selectedItemIndex = previousSelectedIdx - 1;
-        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
-        return true;
-      }
-      if (previousSelectedIdx === 0 && this.lists.length === 2 && this.focusabledList === this.lists[1]) {
-        focusabledItems[previousSelectedIdx].removeAttribute("aria-selected");
-        this.focusabledList?.removeAttribute("aria-activedescendant");
-        this.focusabledList = this.lists[0];
-        this.focusabledList.focus();
-        this.selectedItemIndex = -1;
-        return true;
-      }
+  onKeyTabList(e: KeyboardEvent): void {
+    e.preventDefault();
+    this.close();
+    this.resetFocusState();
+    const shadow = this._getComponent().shadowRoot;
+    const firstBtn = shadow?.querySelector<HTMLElement>("#reset-button, #voice-button, #submit-button");
+    if (firstBtn) {
+      firstBtn.focus();
+    } else {
+      this.onFocusInput();
     }
   }
 
-  handlePrevTabReset(e: KeyboardEvent) {
-    if (this.focusabledList) {
-      e.preventDefault();
-      this.focusabledList.focus();
-    }
+  onPrevKeyTabList(e: KeyboardEvent): void {
+    e.preventDefault();
+    this.close();
+    this.resetFocusState();
+    this.onFocusInput();
   }
 
   static get dependencies() {