@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/menu-category/menu-category.js

@@ -7,25 +7,52 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconChevronDownSmall } from "@siemens/ix-icons/icons";
-import { h, Host, } from "@stencil/core";
+import { h, Host, Mixin, } from "@stencil/core";
 import { animate } from "animejs";
 import { closestIxMenu } from "../utils/application-layout/context";
 import { createMutationObserver } from "../utils/mutation-observer";
-import { createEnterLeaveDebounce } from "./enter-leave";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
+import { DefaultMixins } from "../utils/internal/component";
+import { getComposedPath } from "../utils/shadow-dom";
+import { makeRef } from "../utils/make-ref";
+import { dropdownController } from "../dropdown/dropdown-controller";
 const DefaultIxMenuItemHeight = 40;
 const DefaultAnimationTimeout = 150;
-export class MenuCategory {
+export class MenuCategory extends Mixin(...DefaultMixins) {
     constructor() {
-        this.menuExpand = false;
-        this.showItems = false;
-        this.showDropdown = false;
-        this.nestedItems = [];
-        this.enterLeaveDebounce = createEnterLeaveDebounce(() => {
-            this.onPointerEnter();
-        }, () => {
-            this.onPointerLeave();
-        });
+        super();
     }
+    hostElement;
+    /**
+     * Display name of the category
+     */
+    label;
+    /**
+     * Icon of the category
+     */
+    icon;
+    /**
+     * Show notification count on the category
+     */
+    notifications;
+    /**
+     * Will be shown as tooltip text, if not provided menu text content will be used.
+     *
+     * @since 4.0.0
+     */
+    tooltipText;
+    /** @internal */
+    closeOtherCategories;
+    menuExpand = false;
+    showItems = false;
+    showDropdown = false;
+    nestedItems = [];
+    observer;
+    menuItemsContainer;
+    ixMenu;
+    dropdownRef = makeRef();
+    categoryParentRef = makeRef();
     isNestedItemActive() {
         return this.getNestedItems().some((item) => item.active);
     }
@@ -60,35 +87,88 @@ export class MenuCategory {
         });
     }
     animateFadeIn() {
+        this.showItems = true;
+        this.showDropdown = false;
         animate(this.menuItemsContainer, {
             duration: DefaultAnimationTimeout,
             easing: 'easeInSine',
             opacity: [0, 1],
             maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
-            onBegin: () => {
-                this.showItems = true;
-                this.showDropdown = false;
-            },
         });
     }
-    onPointerEnter() {
-        var _a;
-        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+    showMenuItemDropdown() {
+        if (this.ixMenu?.expand) {
             return;
         }
         this.closeOtherCategories.emit();
-        this.showDropdown = true;
+        if (this.dropdownRef.current) {
+            const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
+            if (ref) {
+                dropdownController.present(ref);
+            }
+        }
     }
-    onPointerLeave() {
-        this.showDropdown = false;
+    hideMenuItemDropdown() {
+        if (this.dropdownRef.current) {
+            const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
+            if (ref) {
+                dropdownController.dismiss(ref);
+            }
+        }
     }
-    onCategoryClick(e) {
-        var _a;
-        e.stopPropagation();
-        if ((_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.expand) {
+    handleCategoryVisibility() {
+        if (this.ixMenu?.expand) {
             this.onExpandCategory(!this.showItems);
             return;
         }
+        this.showMenuItemDropdown();
+    }
+    onCategoryClick(event) {
+        event.stopPropagation();
+        this.handleCategoryVisibility();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const isClosingPanel = this.ixMenu?.expand && this.showItems;
+            this.handleCategoryVisibility();
+            if (!isClosingPanel) {
+                const items = this.getNestedItems();
+                const firstItem = items[0];
+                if (firstItem) {
+                    requestAnimationFrameNoNgZone(() => requestAnimationFrameNoNgZone(() => firstItem.focus()));
+                }
+            }
+        }
+    }
+    onMenuItemsKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.categoryParentRef.current?.focus();
+            this.handleCategoryVisibility();
+            return;
+        }
+        if (event.key !== 'ArrowDown' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'Tab') {
+            return;
+        }
+        const items = this.getNestedItems();
+        if (items.length === 0) {
+            return;
+        }
+        const path = event.composedPath();
+        const currentIndex = items.findIndex((item) => path.includes(item));
+        if (currentIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        if (event.key === 'ArrowDown' || (event.key === 'Tab' && !event.shiftKey)) {
+            items[(currentIndex + 1) % items.length].focus();
+        }
+        else {
+            items[(currentIndex - 1 + items.length) % items.length].focus();
+        }
     }
     onNestedItemsChanged(mutations) {
         const oldNestedItemsLength = this.nestedItems.length;
@@ -101,7 +181,7 @@ export class MenuCategory {
         if (!this.menuExpand || this.showItems || !mutations) {
             return;
         }
-        for (const mutation of mutations !== null && mutations !== void 0 ? mutations : []) {
+        for (const mutation of mutations ?? []) {
             if (mutation.attributeName === 'class' &&
                 mutation.target instanceof HTMLElement &&
                 mutation.target.classList.contains('active')) {
@@ -124,17 +204,18 @@ export class MenuCategory {
         this.showItems = this.isCategoryItemListVisible();
     }
     componentDidLoad() {
-        var _a;
         this.observer = createMutationObserver((mutations) => this.onNestedItemsChanged(mutations));
         this.observer.observe(this.hostElement, {
             attributes: true,
+            attributeFilter: ['class'],
             childList: true,
             subtree: true,
         });
-        requestAnimationFrame(() => {
+        requestAnimationFrameNoNgZone(() => {
             this.onNestedItemsChanged();
+            this.onShowItemsChange();
         });
-        (_a = this.ixMenu) === null || _a === void 0 ? void 0 : _a.addEventListener('expandChange', ({ detail: menuExpand }) => {
+        this.ixMenu?.addEventListener('expandChange', ({ detail: menuExpand }) => {
             this.menuExpand = menuExpand;
             if (!menuExpand) {
                 this.clearMenuItemStyles();
@@ -143,9 +224,13 @@ export class MenuCategory {
         });
     }
     clearMenuItemStyles() {
-        var _a, _b;
-        (_a = this.menuItemsContainer) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
-        (_b = this.menuItemsContainer) === null || _b === void 0 ? void 0 : _b.style.removeProperty('opacity');
+        this.menuItemsContainer?.style.removeProperty('max-height');
+        this.menuItemsContainer?.style.removeProperty('opacity');
+    }
+    onShowItemsChange() {
+        this.getNestedItems().forEach((item) => {
+            item.hidden = !this.showItems && !this.showDropdown;
+        });
     }
     disconnectedCallback() {
         if (this.observer) {
@@ -153,27 +238,39 @@ export class MenuCategory {
         }
     }
     render() {
-        return (h(Host, { key: 'edd1e65e5cd1cc96d1da1decfa666654d3926f6d', class: {
+        return (h(Host, { key: 'e775a045a05963df9bf1cad8af41cde3ba0024fc', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
-                this.enterLeaveDebounce.onEnter();
+                this.showMenuItemDropdown();
             }, onPointerLeave: (event) => {
                 if (event.pointerType === 'touch') {
                     return;
                 }
-                this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: 'bd7b6f2c2bef925249db2b73ad14e1454a291939', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("span", { key: '23c9e797cc2ef3a788866de2851d2d7fa8c1db83', class: "category" }, h("span", { key: 'b15dd87212ebbf9d2ceb6212ec9c85bdf27c4624', class: "category-text" }, this.label), h("ix-icon", { key: '6381529eccd7caa09f9361de68564969a56ffa3f', name: iconChevronDownSmall, class: {
+                this.hideMenuItemDropdown();
+            } }, h("ix-menu-item", { key: '55481bde3309e80823c3e1efcbd079b4c149607f', "aria-haspopup": 'true', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', ref: this.categoryParentRef, class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onKeyDown: (event) => this.onKeyDown(event), tooltipText: this.tooltipText, isCategory: true }, h("span", { key: '5d12c486d64aa42633db1250016d8471c9f4d63a', class: "category" }, h("span", { key: '3a7b5b3cb0bb27a140ea0d3522aa4b0735aff00b', class: "category-text" }, this.label), h("ix-icon", { key: '2fffdfadde0f86b453746cd785a69bcf72523f92', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            }, "aria-hidden": "true" }))), h("div", { key: 'dc0a076803031b9e2f725adaa0b5d2a1ad6b8c19', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '005a89c89004c7cf7a7f6621fbcdcf19f1d98fb6', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '1d9fdeceee2eaf0f5d6ab29b1a5adfa8dba0c9a2', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            }, role: "menu", onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'b8fbeea12f40ad51d832be57644672f69a2c61fb', ref: this.dropdownRef, hostRole: "menu", "aria-label": this.label, closeBehavior: 'both', show: this.showDropdown, onShowChange: ({ detail: dropdownShow }) => {
+                if (dropdownShow) {
+                    return;
+                }
+                const activeElement = document.activeElement;
+                const isFocused = getComposedPath(activeElement).includes(this.hostElement);
+                if (hasKeyboardMode() && isFocused) {
+                    // Ugly workaround to restore focus to the category after the dropdown is closed,
+                    // because focus gets lost when the dropdown is removed from the DOM.
+                    // This is needed to ensure keyboard users can continue navigating after closing the dropdown with the keyboard.
+                    requestAnimationFrameNoNgZone(() => requestAnimationFrameNoNgZone(() => this.hostElement.focus()));
+                }
+            }, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
-            }, onClick: (e) => {
+            }, focusHost: this.hostElement, onClick: (e) => {
                 if (e.target instanceof HTMLElement) {
                     if (e.target.tagName === 'IX-MENU-ITEM') {
                         this.showDropdown = false;
@@ -182,10 +279,18 @@ export class MenuCategory {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '2344605c05f8bd39b29928584fe8130fde99a252', class: 'category-dropdown-header' }, h("ix-typography", { key: '619da17167ac283092b899b44bfac92417ce38f1', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '0c5c0fb54666edd6d2680f39819042056a5e8a83' }), h("slot", { key: '1ed415049caaadf3347ff60cf8c241a8ab29b266' }))));
+            }, onFocusout: (event) => {
+                const relatedTarget = event.relatedTarget;
+                if (relatedTarget &&
+                    relatedTarget !== this.hostElement &&
+                    !this.hostElement.contains(relatedTarget)) {
+                    this.showDropdown = false;
+                }
+            } }, h("ix-dropdown-item", { key: 'cec1683aa36e2c5db9abe748e6fcb2f901b61028', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: 'ea96b374abdc5e8dd79ac993782749bc217bfd0a', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'aa0cae17e78ddcaa6db6822c3f3e27ca35977e07' }), h("slot", { key: '8fe5b81ea58e6f9ec316c06f002a5ff84552d3ff' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["menu-category.scss"]
@@ -309,10 +414,19 @@ export class MenuCategory {
             }];
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "showDropdown",
+                "methodName": "onShowItemsChange"
+            }, {
+                "propName": "showItems",
+                "methodName": "onShowItemsChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "closeOtherCategories",
-                "method": "onPointerLeave",
+                "method": "hideMenuItemDropdown",
                 "target": "window",
                 "capture": false,
                 "passive": false

package/dist/collection/components/menu-item/menu-item.js

@@ -18,57 +18,89 @@ let sequenceId = 0;
  * @slot menu-item-label Custom label
  */
 export class MenuItem {
-    constructor() {
-        /**
-         * Move the Tab to a top position.
-         */
-        this.home = false;
-        /**
-         * Caution: this is no longer working. Please use slot="bottom" instead.
-         *
-         * Place tab on bottom
-         */
-        this.bottom = false;
-        /**
-         * State to display active
-         */
-        this.active = false;
-        /**
-         * Disable tab and remove event handlers
-         */
-        this.disabled = false;
-        /**
-         * Specifies where to open the linked document when href is provided.
-         *
-         * @since 4.0.0
-         */
-        this.target = '_self';
-        /** @internal */
-        this.isCategory = false;
-        this.ariaHiddenTooltip = false;
-        this.menuExpanded = false;
-        this.internalItemId = createSequentialId('ix-menu-item-', sequenceId++);
-        this.buttonRef = makeRef();
-        this.isHostedInsideCategory = false;
-        this.observer = createMutationObserver(() => {
-            this.setTooltip();
-        });
-    }
+    /**
+     * Label of the menu item. Will also be used as tooltip text
+     */
+    label;
+    /**
+     * Move the Tab to a top position.
+     */
+    home = false;
+    /**
+     * Caution: this is no longer working. Please use slot="bottom" instead.
+     *
+     * Place tab on bottom
+     */
+    bottom = false;
+    /**
+     * Name of the icon you want to display. Icon names can be resolved from the documentation {@link https://ix.siemens.io/docs/icon-library/icons}
+     */
+    icon;
+    /**
+     * Show notification count on tab
+     */
+    notifications;
+    /**
+     * State to display active
+     */
+    active = false;
+    /**
+     * Disable tab and remove event handlers
+     */
+    disabled = false;
+    /**
+     * Will be shown as tooltip text, if not provided menu text content will be used.
+     *
+     * @since 4.0.0
+     */
+    tooltipText;
+    /**
+     * URL for the button link. When provided, the button will render as an anchor tag.
+     *
+     * @since 4.0.0
+     */
+    href;
+    /**
+     * Specifies where to open the linked document when href is provided.
+     *
+     * @since 4.0.0
+     */
+    target = '_self';
+    /**
+     * Specifies the relationship between the current document and the linked document when href is provided.
+     *
+     * @since 4.0.0
+     */
+    rel;
+    /** @internal */
+    isCategory = false;
+    hostElement;
+    tooltip;
+    ariaHiddenTooltip = false;
+    menuExpanded = false;
+    internalItemId = createSequentialId('ix-menu-item-', sequenceId++);
+    buttonRef = makeRef();
+    isHostedInsideCategory = false;
+    menuExpandedDisposer;
+    observer = createMutationObserver(() => {
+        this.setTooltip();
+    });
     componentWillLoad() {
-        var _a;
         this.isHostedInsideCategory =
             !!this.hostElement.closest('ix-menu-category');
         this.onIconChange();
-        this.menuExpanded = ((_a = menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
+        this.menuExpanded = menuController.nativeElement?.expand || false;
         this.menuExpandedDisposer = menuController.expandChange.on((expand) => (this.menuExpanded = expand));
     }
     componentWillRender() {
         this.setTooltip();
     }
     setTooltip() {
-        var _a, _b, _c;
         this.tooltip =
-            (_c = (_b = (_a = this.tooltipText) !== null && _a !== void 0 ? _a : this.label) !== null && _b !== void 0 ? _b : this.hostElement.textContent) !== null && _c !== void 0 ? _c : undefined;
+            this.tooltipText ??
+                this.label ??
+                this.hostElement.textContent ??
+                undefined;
         this.ariaHiddenTooltip =
             this.tooltipText === this.label ||
                 this.tooltipText === this.hostElement.textContent;
@@ -93,6 +125,17 @@ export class MenuItem {
             this.icon = iconDocument;
         }
     }
+    handleCategoryKeyDown(e) {
+        if ((e.key === 'Enter' || e.key === ' ') && this.isHostedInsideCategory) {
+            this.returnFocusToParentCategoryMenuItem();
+        }
+    }
+    returnFocusToParentCategoryMenuItem() {
+        const categoryMenuItem = this.hostElement
+            .closest('ix-menu-category')
+            ?.shadowRoot?.querySelector('ix-menu-item.category-parent');
+        categoryMenuItem?.focus();
+    }
     render() {
         let extendedAttributes = {};
         if (this.home) {
@@ -106,27 +149,32 @@ export class MenuItem {
             };
         }
         const hostA11y = a11yHostAttributes(this.hostElement);
-        const commonAttributes = Object.assign({ class: 'tab', tabIndex: this.disabled ? -1 : 0 }, hostA11y);
+        const commonAttributes = {
+            class: 'tab',
+            ...hostA11y,
+        };
         const menuContent = [
-            this.icon && (h("ix-icon", { key: '3235cdce2773d33e6f1a75b4df395079246fa993', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
+            this.icon && (h("ix-icon", { key: 'ede9e4b1fa44d9e04403a52de0d76d68b2632c1d', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: '704284ed9ae6b83b2b2d65ebc103e5e8ff766c1b', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '6b79e39fb7e616088d11bd8b9c57f4406fdd94b6' })),
+            h("span", { key: '4a936a1ec12559ea2aad0f18bfffa2c63113377e', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '342c1995e13133c3f359e1d485ac604aea4f49ae' })),
         ];
-        return (h(Host, Object.assign({ key: '331694d5c502b1ed77035e591ffa5748777d8a81', class: {
+        return (h(Host, { key: 'df2f4deb5b013e2d34b971ee532c9d0a10859372', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            }, "aria-disabled": this.disabled ? 'true' : null }, extendedAttributes), this.href ? (h("a", Object.assign({}, commonAttributes, { href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
+                'ix-focusable': !this.disabled,
+            }, "aria-disabled": this.disabled ? 'true' : null, tabIndex: this.disabled ? -1 : 0, role: this.isHostedInsideCategory ? 'menuitem' : undefined, ...extendedAttributes }, this.href ? (h("a", { ...commonAttributes, href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), onClick: (e) => {
                 if (this.disabled) {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: 'd282a68bce72435079cbfea5234b227c92027643', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }, menuContent)) : (h("button", { ...commonAttributes, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e) }, menuContent)), h("ix-tooltip", { key: '58a9cc7702130b9a1c023ec55b85bda0cff48ea7', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["menu-item.scss"]

package/dist/collection/components/menu-settings/menu-settings.css

@@ -271,7 +271,4 @@ a {
 }
 :host ix-tabs {
   margin-bottom: 1.5rem;
-}
-:host .settings-tabs {
-  margin-bottom: 1.5rem;
 }