@sapudex/web-components 0.117.1 → 0.138.0

package/src/Dropdown.ts

@@ -7,8 +7,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import DropdownTemplate from "./generated/templates/DropdownTemplate.lit.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
+import { TRIGGER } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import DropdownCss from "./generated/themes/Dropdown.css";
@@ -24,7 +27,7 @@ import DropdownCss from "./generated/themes/Dropdown.css";
  * For the <code>udex-dropdown</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Dropdown.js";</code>
+ * <code>import "@udex/web-components/dist/Dropdown.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -120,12 +123,20 @@ class UDExDropdown extends UI5Element {
 
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })
     accessibleRole!: `${PopupAccessibleRole}`;
 
+  /**
+   * Allows setting a custom role for dropdown trigger.
+   * @default "combobox"
+   * @public
+   */
+  @property({ type: String, defaultValue: "combobox" })
+    triggerAccessibleRole!: string;
+
   /**
    * Defines the content of the Dropdown.
    *
@@ -188,6 +199,12 @@ class UDExDropdown extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExDropdown.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
   onAfterRendering() {
     this.handleDirection();
   }
@@ -233,6 +250,7 @@ class UDExDropdown extends UI5Element {
   onOpen(opener: HTMLElement): void {
     const dropdown = this.getDropdownPane();
     dropdown.showAt(opener);
+    this.open = true;
   }
 
   /**
@@ -241,8 +259,7 @@ class UDExDropdown extends UI5Element {
    * @public
    */
   onClose():void {
-    const dropdown = this.getDropdownPane();
-    dropdown.close(true);
+    this.open = false;
   }
 
   afterDropdownClose() {
@@ -283,9 +300,13 @@ class UDExDropdown extends UI5Element {
     return !!this.footer.length;
   }
 
-  get disableAllowTargetOverlap() {
+  get disableAllowTargetOverlap(): boolean {
     return this.disableTargetOverlap?.toString() !== "true";
   }
+
+  get triggerAccessibleName(): string {
+    return UDExDropdown.i18nBundle.getText(TRIGGER);
+  }
 }
 
 UDExDropdown.define();

package/src/FilterMenu.hbs

@@ -1,61 +1,63 @@
-<udex-dropdown
-    class="udex-filter-menu"
-    ?disable-target-overlap="{{disableTargetOverlap}}"
-    placement-type="{{placementType}}"
-    horizontal-align="{{horizontalAlign}}"
-    height="{{height}}"
-    accessible-role="{{accessibleRole}}"
-    @ui5-select-all="{{handleSelectAll}}"
-    @ui5-item-press="{{handleItemPress}}"
-    @ui5-header-press="{{handleHeaderPress}}"
-    @ui5-before-open="{{_dropdownBeforeOpen}}"
-    @ui5-after-open="{{_dropdownAfterOpen}}"
-    @ui5-before-close="{{_dropdownBeforeClose}}"
-    @ui5-after-close="{{_dropdownAfterClose}}"
-    @click-trigger="{{onDropdownClose}}"
-    @search-keydown="{{handleKeyDownSearch}}"
-    @keydown="{{handleKeyDownList}}"
-    @ui5-submit-search-value="{{handleSubmitSearch}}"
-    @ui5-handle-value-search="{{handleValueSearch}}"
-    @ui5-handle-value-reset="{{handleResetSearch}}">
-    {{> trigger}}
-    {{searchableList}}
-    {{#if modeMultiSelect}}
-        {{> buttons}}
-    {{/if}}
-</udex-dropdown>
-
-{{#*inline "trigger"}}
+<div>
     <button
-        aria-label="{{accessibleName}}"
-        aria-expanded="{{_open}}"
-        aria-haspopup="true"
-        ?disabled="{{disabled}}"
-        class="udex-filter-menu__trigger"
-        slot="trigger"
-        tabindex="0">
-        {{#if hasFilterNamePrefix}}
-            <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
+    id="filterMenuTrigger"
+    @click="{{handleTriggerClick}}"
+    @keydown="{{handleTriggerKeydown}}"
+    aria-label="{{triggerButtonAccessibleName}}"
+    aria-expanded="{{_open}}"
+    aria-haspopup="true"
+    role="{{triggerAccessibleRole}}"
+    aria-controls="{{this._id}}_udex-filter-menu-dropdown"
+    ?disabled="{{disabled}}"
+    class="udex-filter-menu__trigger"
+    tabindex="0">
+    {{#if hasFilterNamePrefix}}
+        <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
+    {{/if}}
+    <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
+        <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
+        {{#if badgeValue}}
+            <udex-badge
+                class="udex-filter-menu__badge"
+                type="Number"
+                design="Info"
+                size="Small">
+                {{badgeValue}}
+            </udex-badge>
         {{/if}}
-        <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
-            <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
-            {{#if badgeValue}}
-                <udex-badge
-                    class="udex-filter-menu__badge"
-                    type="Number"
-                    design="Info"
-                    size="Small">
-                    {{badgeValue}}
-                </udex-badge>
-            {{/if}}
-            <ui5-icon
-                class="udex-filter-menu__trigger-icon"
-                name="navigation-down-arrow"
-                accessible-name="{{_iconAccessibleNameText}}">
-            </ui5-icon>
-        </span>
-    </button>
-{{/inline}}
+        <ui5-icon
+            class="udex-filter-menu__trigger-icon"
+            name="navigation-down-arrow"
+            accessible-name="{{_iconAccessibleNameText}}">
+        </ui5-icon>
+    </span>
+</button>
+    <ui5-popover
+        id="{{this._id}}_udex-filter-menu-dropdown"
+        hide-arrow
+        ?allow-target-overlap="{{disableAllowTargetOverlap}}"
+        placement-type="{{placementType}}"
+        horizontal-align="{{horizontalAlign}}"
+        @ui5-item-press="{{handleItemPress}}"
+        @ui5-header-press="{{handleHeaderPress}}"
+        @keydown="{{handleKeyDownList}}"
+        @search-keydown="{{handleKeyDownSearch}}"
+        @ui5-before-open="{{_dropdownBeforeOpen}}"
+        @ui5-after-open="{{_dropdownAfterOpen}}"
+        @ui5-before-close="{{_dropdownBeforeClose}}"
+        @ui5-after-close="{{_dropdownAfterClose}}"
+        @ui5-select-all="{{handleSelectAll}}"
+        @ui5-submit-search-value="{{handleSubmitSearch}}"
+        @ui5-handle-value-search="{{handleValueSearch}}"
+        @ui5-handle-value-reset="{{handleResetSearch}}">
+        {{searchableList}}
+        {{#if modeMultiSelect}}
+            {{> buttons}}
+        {{/if}}
+    </ui5-popover>
+</div>
+
+
 
 {{#*inline "buttons"}}
     {{#unless hideActionBar}}

package/src/FilterMenu.ts

@@ -7,16 +7,18 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { isTabPrevious, isTabNext, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
-import UDExDropdown from "./Dropdown.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "./FilterMenuGroupHeader.js";
 import UDExSearch from "./Search.js";
-import UDEButton from "./Button.js";
+import UDExButton from "./Button.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
 import { ListMode } from "./types/List.js";
@@ -57,17 +59,17 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
   styles: [FilterMenuCss, SearchableListCss],
   template: FilterMenuTemplate,
   dependencies: [
+    ResponsivePopover,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,
-    UDExDropdown,
     UDExList,
     UDExListSelectAll,
     UDExListItem,
     UDExListGroupHeader,
     UDExBadge,
     UDExSearch,
-    UDEButton,
+    UDExButton,
   ],
 })
 
@@ -233,8 +235,14 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: Boolean })
     disabled!: boolean;
 
+  /**
+   * Defines whether the dropdown is open or not.
+   *
+   * @default false
+   * @private
+   */
   @property({ type: Boolean })
-    _open?: boolean = false;
+    _open!: boolean;
 
   /**
    * Hides the result button in the footer.
@@ -269,19 +277,29 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })
     accessibleRole!: `${PopupAccessibleRole}`;
 
-  _dropdown!: UDExDropdown;
+  /**
+   * Allows setting a custom role for dropdown trigger.
+   * @default "combobox"
+   * @public
+   */
+  @property({ type: String, defaultValue: "combobox" })
+    triggerAccessibleRole!: string;
+
+  _trigger!: UDExButton;
   _search!: UDExSearch;
   _hasFooterButtons!: boolean;
+  _popover!: ResponsivePopover;
 
   onAfterRendering() {
-    this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._popover = this.getPopover();
+    this._trigger = this.getTriggerButton();
     this._hasFooterButtons = this.hasFooterButtons;
   }
 
@@ -295,12 +313,12 @@ class UDExFilterMenu extends UDExSearchableListBase {
     super.onBeforeRendering();
   }
 
-  handleSelectAll(e:CustomEvent) {
+  handleSelectAll(e:CustomEvent): void {
     this.onFilterSelectAllHeaderPress(e);
     this.fireEvent("select-all");
   }
 
-  handleItemPress(e:CustomEvent) {
+  handleItemPress(e:CustomEvent): void {
     this.onItemPress(e);
 
     if (this.modeSingleSelect) {
@@ -308,101 +326,133 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  handleHeaderPress(e:CustomEvent) {
+  handleHeaderPress(e:CustomEvent): void {
     this.onHeaderPress(e);
   }
 
-  handleValueSearch(e:CustomEvent) {
+  handleValueSearch(e:CustomEvent): void {
     this.onSearch(e);
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onDropdownClose();
     this.onSubmitSearch();
   }
 
-  handleResetSearch() {
+  handleResetSearch(): void {
     this.onResetSearch();
   }
 
-  handleReset() {
+  handleReset(): void {
     this.fireEvent("reset-click", {
       restoredItems: this.selectedItems,
     });
     this.onReset();
   }
 
-  handleResult() {
+  handleResult(): void {
     if (!this.disabledResultBtn) {
-      this._dropdown.onClose();
+      this._popover.close();
       this.fireEvent("result-click", {
         selectedItems: this.selectedItems,
       });
     }
   }
 
-  handleKeyDownList(e: KeyboardEvent) {
+  handleKeyDownList(e: KeyboardEvent): void {
     const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
     const isTabPrevPress = isTabPrevious(e) && !this._search;
-
-    if (isTabNextPress || isTabPrevPress) {
-      this.onDropdownClose();
+    const target = e.target as HTMLElement;
+    const isSearchResetTrigger = target === this._search;
+    if ((isTabNextPress && (!isSearchResetTrigger || this.isListEmpty)) || isTabPrevPress) {
+      this.onDropdownClose(e);
     }
   }
 
-  handleKeyDownSearch(e: CustomEvent) {
+  handleKeyDownSearch(e: CustomEvent): void {
     const keyEvent = e.detail as KeyboardEvent;
     if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
-      this.onDropdownClose();
+      this.onDropdownClose(keyEvent);
     }
   }
 
-  handleKeyDownResultBtn(e: KeyboardEvent) {
+  handleKeyDownResultBtn(e: KeyboardEvent): void {
     e.stopPropagation();
     if (isTabNext(e) && !this.hasResetBtn) {
       this.onDropdownClose();
     }
   }
 
-  handleKeyDownResetBtn(e: KeyboardEvent) {
+  handleKeyDownResetBtn(e: KeyboardEvent): void {
     e.stopPropagation();
     if (isTabNext(e)) {
       this.onDropdownClose();
     }
   }
 
-  onDropdownClose() {
-    if (this._dropdown.open) {
-      this._dropdown.onClose();
+  handleTriggerClick(): void {
+    this.toggleDropdown();
+  }
+
+  handleTriggerKeydown(e: KeyboardEvent): void {
+    if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
+      this.toggleDropdown();
+    }
+  }
+
+  toggleDropdown(): void {
+    this._open = !this._open;
+
+    if (this._open) {
+      this._trigger.classList.add("udex-filter-menu__trigger-active");
+      this._popover.showAt(this._trigger);
+    } else {
+      this.onDropdownClose();
     }
   }
 
-  getDropdown(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
+  onDropdownClose(e?: KeyboardEvent): void {
+    if (this._popover.open) {
+      if (e && (isTabPrevious(e) || isEscape(e))) {
+        e.preventDefault();
+        this._popover.close(true);
+      } else {
+        this._popover.close();
+      }
+    }
   }
 
   getSearch(): UDExSearch {
     return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
   }
 
-  _dropdownBeforeOpen() {
-    this._open = true;
+  _dropdownBeforeOpen(): void {
+    if (this.height) {
+      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
+      content.style.maxHeight = this.height;
+    }
     this.fireEvent("before-open");
   }
 
-  _dropdownAfterOpen() {
+  _dropdownAfterOpen(): void {
     this.fireEvent("after-open");
   }
 
-  _dropdownBeforeClose() {
+  _dropdownBeforeClose(): void {
     this.fireEvent("before-close");
   }
 
-  _dropdownAfterClose() {
+  _dropdownAfterClose(): void {
     this._open = false;
+    this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireEvent("after-close");
   }
 
+  get disableAllowTargetOverlap(): boolean {
+    return !this.disableTargetOverlap;
+  }
+
   get hasFilterNamePrefix(): boolean {
     return !!this.filterNamePrefix?.length;
   }
@@ -417,14 +467,18 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledResultBtn() {
+  get disabledResultBtn(): boolean {
     return !this.selectedItems.length && !this.selectAll;
   }
 
-  get _iconAccessibleNameText() {
+  get _iconAccessibleNameText(): string {
     return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
   }
 
+  get triggerButtonAccessibleName(): string {
+    return this.accessibleName || UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
+  }
+
   get searchableList() {
     return executeTemplate(UDExFilterMenu.searchableListBaseTemplate, this);
   }
@@ -445,6 +499,14 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return !this.hideResetBtn;
   }
 
+  getTriggerButton(): UDExButton {
+    return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
+  }
+
+  getPopover(): ResponsivePopover {
+    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  }
+
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }