@ni/nimble-components 30.1.4 → 30.1.5

package/dist/esm/menu/index.d.ts

@@ -1,4 +1,4 @@
-import { Menu as FoundationMenu } from '@microsoft/fast-foundation';
+import { Menu as FoundationMenu } from './menu.foundation';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-menu': Menu;

package/dist/esm/menu/index.js

@@ -1,4 +1,6 @@
-import { DesignSystem, Menu as FoundationMenu, menuTemplate as template } from '@microsoft/fast-foundation';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { Menu as FoundationMenu } from './menu.foundation';
+import { template } from './template';
 import { styles } from './styles';
 /**
  * A nimble-styled menu

package/dist/esm/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EACtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,cAAc;CAAG;AAE3C;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import {\n    DesignSystem,\n    Menu as FoundationMenu,\n    menuTemplate as template\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu': Menu;\n    }\n}\n\n/**\n * A nimble-styled menu\n */\nexport class Menu extends FoundationMenu {}\n\n/**\n * A function that returns a nimble-menu registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#menuTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-menu\\>\n *\n */\nconst nimbleMenu = Menu.compose({\n    baseName: 'menu',\n    baseClass: FoundationMenu,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());\nexport const menuTag = 'nimble-menu';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,IAAI,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,cAAc;CAAG;AAE3C;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { Menu as FoundationMenu } from './menu.foundation';\nimport { template } from './template';\nimport { styles } from './styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-menu': Menu;\n    }\n}\n\n/**\n * A nimble-styled menu\n */\nexport class Menu extends FoundationMenu {}\n\n/**\n * A function that returns a nimble-menu registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#menuTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-menu\\>\n *\n */\nconst nimbleMenu = Menu.compose({\n    baseName: 'menu',\n    baseClass: FoundationMenu,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());\nexport const menuTag = 'nimble-menu';\n"]}

package/dist/esm/menu/menu.foundation.d.ts

@@ -0,0 +1,83 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
+ * @public
+ */
+export declare class Menu extends FoundationElement {
+    private static readonly focusableElementRoles;
+    /**
+     * @internal
+     */
+    items: HTMLSlotElement;
+    /**
+     * @internal
+     */
+    itemIcons?: Element[];
+    private menuItems;
+    private expandedItem;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * Collapses any expanded menu items.
+     *
+     * @public
+     */
+    collapseExpandedItem(): void;
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e: KeyboardEvent): boolean;
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    handleFocusOut: (e: FocusEvent) => void;
+    private readonly handleItemFocus;
+    private readonly handleExpandedChanged;
+    private readonly removeItemListeners;
+    private itemsChanged;
+    private itemIconsChanged;
+    private readonly setItems;
+    /**
+     * handle change from child element
+     */
+    private readonly changeHandler;
+    /**
+     * get an array of valid DOM children
+     */
+    private domChildren;
+    /**
+     * check if the item is a menu item
+     */
+    private readonly isMenuItemElement;
+    /**
+     * check if the item is focusable
+     */
+    private readonly isFocusableElement;
+    private setFocus;
+}

package/dist/esm/menu/menu.foundation.js

@@ -0,0 +1,306 @@
+import { __decorate } from "tslib";
+/**
+ * Based on implementation in FAST repo: https://github.com/microsoft/fast/blob/9c6dbb66615e6d229fc0ebf8065a67f109139f26/packages/web-components/fast-foundation/src/menu/menu.ts
+ */
+import { DOM, observable } from '@microsoft/fast-element';
+import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome } from '@microsoft/fast-web-utilities';
+import { FoundationElement, MenuItem, MenuItemRole, roleForMenuItem } from '@microsoft/fast-foundation';
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
+ * @public
+ */
+export class Menu extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.expandedItem = null;
+        /**
+         * The index of the focusable element in the items array
+         * defaults to -1
+         */
+        this.focusIndex = -1;
+        /**
+         * @internal
+         */
+        this.isNestedMenu = () => {
+            return (this.parentElement !== null
+                && isHTMLElement(this.parentElement)
+                && this.parentElement.getAttribute('role') === 'menuitem');
+        };
+        /**
+         * if focus is moving out of the menu, reset to a stable initial state
+         * @internal
+         */
+        this.handleFocusOut = (e) => {
+            if (!this.contains(e.relatedTarget)
+                && this.menuItems !== undefined) {
+                this.collapseExpandedItem();
+                // find our first focusable element
+                const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+                // set the current focus index's tabindex to -1
+                this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                // set the first focusable element tabindex to 0
+                this.menuItems[focusIndex]?.setAttribute('tabindex', '0');
+                // set the focus index
+                this.focusIndex = focusIndex;
+            }
+        };
+        this.handleItemFocus = (e) => {
+            const targetItem = e.target;
+            if (this.menuItems !== undefined
+                && targetItem !== this.menuItems[this.focusIndex]) {
+                this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                this.focusIndex = this.menuItems.indexOf(targetItem);
+                targetItem.setAttribute('tabindex', '0');
+            }
+        };
+        this.handleExpandedChanged = (e) => {
+            if (e.defaultPrevented
+                || e.target === null
+                || this.menuItems === undefined
+                || !this.menuItems.includes(e.target)) {
+                return;
+            }
+            e.preventDefault();
+            const changedItem = e.target;
+            // closing an expanded item without opening another
+            if (this.expandedItem !== null
+                && changedItem === this.expandedItem
+                && changedItem.expanded === false) {
+                this.expandedItem = null;
+                return;
+            }
+            if (changedItem.expanded) {
+                if (this.expandedItem !== null
+                    && this.expandedItem !== changedItem) {
+                    this.expandedItem.expanded = false;
+                }
+                this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                this.expandedItem = changedItem;
+                this.focusIndex = this.menuItems.indexOf(changedItem);
+                changedItem.setAttribute('tabindex', '0');
+            }
+        };
+        this.removeItemListeners = () => {
+            if (this.menuItems !== undefined) {
+                this.menuItems.forEach((item) => {
+                    item.removeEventListener('expanded-change', this.handleExpandedChanged);
+                    item.removeEventListener('focus', this.handleItemFocus);
+                });
+            }
+        };
+        this.setItems = () => {
+            const newItems = this.domChildren();
+            this.removeItemListeners();
+            this.menuItems = newItems;
+            const menuItems = this.menuItems.filter(this.isMenuItemElement);
+            // if our focus index is not -1 we have items
+            if (menuItems.length) {
+                this.focusIndex = 0;
+            }
+            function elementIndent(el) {
+                const role = el.getAttribute('role');
+                const startSlot = el.querySelector('[slot=start]');
+                if (role !== MenuItemRole.menuitem && startSlot === null) {
+                    return 1;
+                }
+                if (role === MenuItemRole.menuitem && startSlot !== null) {
+                    return 1;
+                }
+                if (role !== MenuItemRole.menuitem && startSlot !== null) {
+                    return 2;
+                }
+                return 0;
+            }
+            const indent = menuItems.reduce((accum, current) => {
+                const elementValue = elementIndent(current);
+                return accum > elementValue ? accum : elementValue;
+            }, 0);
+            menuItems.forEach((item, index) => {
+                item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+                item.addEventListener('expanded-change', this.handleExpandedChanged);
+                item.addEventListener('focus', this.handleItemFocus);
+                if (item instanceof MenuItem || 'startColumnCount' in item) {
+                    item.startColumnCount = indent;
+                }
+            });
+        };
+        /**
+         * handle change from child element
+         */
+        this.changeHandler = (e) => {
+            if (this.menuItems === undefined) {
+                return;
+            }
+            const changedMenuItem = e.target;
+            const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+            if (changeItemIndex === -1) {
+                return;
+            }
+            if (changedMenuItem.role === 'menuitemradio'
+                && changedMenuItem.checked === true) {
+                for (let i = changeItemIndex - 1; i >= 0; --i) {
+                    const item = this.menuItems[i];
+                    const role = item.getAttribute('role');
+                    if (role === MenuItemRole.menuitemradio) {
+                        item.checked = false;
+                    }
+                    if (role === 'separator') {
+                        break;
+                    }
+                }
+                const maxIndex = this.menuItems.length - 1;
+                for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+                    const item = this.menuItems[i];
+                    const role = item.getAttribute('role');
+                    if (role === MenuItemRole.menuitemradio) {
+                        item.checked = false;
+                    }
+                    if (role === 'separator') {
+                        break;
+                    }
+                }
+            }
+        };
+        /**
+         * check if the item is a menu item
+         */
+        this.isMenuItemElement = (el) => {
+            return (isHTMLElement(el)
+                && Object.prototype.hasOwnProperty.call(Menu.focusableElementRoles, el.getAttribute('role')));
+        };
+        /**
+         * check if the item is focusable
+         */
+        this.isFocusableElement = (el) => {
+            return this.isMenuItemElement(el);
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        DOM.queueUpdate(() => {
+            // wait until children have had a chance to
+            // connect before setting/checking their props/attributes
+            this.setItems();
+        });
+        this.addEventListener('change', this.changeHandler);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeItemListeners();
+        this.menuItems = undefined;
+        this.removeEventListener('change', this.changeHandler);
+    }
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus() {
+        this.setFocus(0, 1);
+    }
+    /**
+     * Collapses any expanded menu items.
+     *
+     * @public
+     */
+    collapseExpandedItem() {
+        if (this.expandedItem !== null) {
+            this.expandedItem.expanded = false;
+            this.expandedItem = null;
+        }
+    }
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e) {
+        if (e.defaultPrevented || this.menuItems === undefined) {
+            return false;
+        }
+        switch (e.key) {
+            case keyArrowDown:
+                // go forward one index
+                this.setFocus(this.focusIndex + 1, 1);
+                return false;
+            case keyArrowUp:
+                // go back one index
+                this.setFocus(this.focusIndex - 1, -1);
+                return false;
+            case keyEnd:
+                // set focus on last item
+                this.setFocus(this.menuItems.length - 1, -1);
+                return false;
+            case keyHome:
+                // set focus on first item
+                this.setFocus(0, 1);
+                return false;
+            default:
+                // if we are not handling the event, do not prevent default
+                return true;
+        }
+    }
+    itemsChanged() {
+        // only update children after the component is connected and
+        // the setItems has run on connectedCallback
+        // (menuItems is undefined until then)
+        if (this.$fastController.isConnected && this.menuItems !== undefined) {
+            this.setItems();
+        }
+    }
+    itemIconsChanged(oldIcons, newIcons) {
+        // must check if set of icon elements is actually different
+        if (this.$fastController.isConnected
+            && this.menuItems !== undefined
+            && (oldIcons.length !== newIcons.length
+                || new Set(oldIcons.concat(newIcons)).size !== oldIcons.length)) {
+            this.setItems();
+        }
+    }
+    /**
+     * get an array of valid DOM children
+     */
+    domChildren() {
+        return Array.from(this.children).filter(child => !child.hasAttribute('hidden'));
+    }
+    setFocus(focusIndex, adjustment) {
+        if (this.menuItems === undefined) {
+            return;
+        }
+        let updatedIndex = focusIndex;
+        while (updatedIndex >= 0 && updatedIndex < this.menuItems.length) {
+            const child = this.menuItems[updatedIndex];
+            if (this.isFocusableElement(child)) {
+                // change the previous index to -1
+                if (this.focusIndex > -1
+                    && this.menuItems.length >= this.focusIndex - 1) {
+                    this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');
+                }
+                // update the focus index
+                this.focusIndex = updatedIndex;
+                // update the tabindex of next focusable element
+                child.setAttribute('tabindex', '0');
+                // focus the element
+                child.focus();
+                break;
+            }
+            updatedIndex += adjustment;
+        }
+    }
+}
+Menu.focusableElementRoles = roleForMenuItem;
+__decorate([
+    observable
+], Menu.prototype, "items", void 0);
+__decorate([
+    observable
+], Menu.prototype, "itemIcons", void 0);
+//# sourceMappingURL=menu.foundation.js.map

package/dist/esm/menu/menu.foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.foundation.js","sourceRoot":"","sources":["../../../src/menu/menu.foundation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Based on implementation in FAST repo: https://github.com/microsoft/fast/blob/9c6dbb66615e6d229fc0ebf8065a67f109139f26/packages/web-components/fast-foundation/src/menu/menu.ts\n */\nimport { DOM, observable } from '@microsoft/fast-element';\nimport {\n    isHTMLElement,\n    keyArrowDown,\n    keyArrowUp,\n    keyEnd,\n    keyHome\n} from '@microsoft/fast-web-utilities';\nimport {\n    FoundationElement,\n    MenuItem,\n    MenuItemColumnCount,\n    MenuItemRole,\n    roleForMenuItem\n} from '@microsoft/fast-foundation';\n\n/**\n * A Menu Custom HTML Element.\n * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.\n *\n * @slot - The default slot for the menu items\n *\n * @public\n */\nexport class Menu extends FoundationElement {\n    private static readonly focusableElementRoles: { [key: string]: string } = roleForMenuItem;\n\n    /**\n     * @internal\n     */\n    @observable\n    public items!: HTMLSlotElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public itemIcons?: Element[];\n\n    private menuItems: Element[] | undefined;\n\n    private expandedItem: MenuItem | null = null;\n\n    /**\n     * The index of the focusable element in the items array\n     * defaults to -1\n     */\n    private focusIndex = -1;\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        DOM.queueUpdate(() => {\n            // wait until children have had a chance to\n            // connect before setting/checking their props/attributes\n            this.setItems();\n        });\n\n        this.addEventListener('change', this.changeHandler);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.removeItemListeners();\n        this.menuItems = undefined;\n        this.removeEventListener('change', this.changeHandler);\n    }\n\n    /**\n     * @internal\n     */\n    public readonly isNestedMenu = (): boolean => {\n        return (\n            this.parentElement !== null\n            && isHTMLElement(this.parentElement)\n            && this.parentElement.getAttribute('role') === 'menuitem'\n        );\n    };\n\n    /**\n     * Focuses the first item in the menu.\n     *\n     * @public\n     */\n    public override focus(): void {\n        this.setFocus(0, 1);\n    }\n\n    /**\n     * Collapses any expanded menu items.\n     *\n     * @public\n     */\n    public collapseExpandedItem(): void {\n        if (this.expandedItem !== null) {\n            this.expandedItem.expanded = false;\n            this.expandedItem = null;\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public handleMenuKeyDown(e: KeyboardEvent): boolean {\n        if (e.defaultPrevented || this.menuItems === undefined) {\n            return false;\n        }\n        switch (e.key) {\n            case keyArrowDown:\n                // go forward one index\n                this.setFocus(this.focusIndex + 1, 1);\n                return false;\n            case keyArrowUp:\n                // go back one index\n                this.setFocus(this.focusIndex - 1, -1);\n                return false;\n            case keyEnd:\n                // set focus on last item\n                this.setFocus(this.menuItems.length - 1, -1);\n                return false;\n            case keyHome:\n                // set focus on first item\n                this.setFocus(0, 1);\n                return false;\n\n            default:\n                // if we are not handling the event, do not prevent default\n                return true;\n        }\n    }\n\n    /**\n     * if focus is moving out of the menu, reset to a stable initial state\n     * @internal\n     */\n    public handleFocusOut = (e: FocusEvent): void => {\n        if (\n            !this.contains(e.relatedTarget as Element)\n            && this.menuItems !== undefined\n        ) {\n            this.collapseExpandedItem();\n            // find our first focusable element\n            const focusIndex: number = this.menuItems.findIndex(\n                this.isFocusableElement\n            );\n            // set the current focus index's tabindex to -1\n            this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');\n            // set the first focusable element tabindex to 0\n            this.menuItems[focusIndex]?.setAttribute('tabindex', '0');\n            // set the focus index\n            this.focusIndex = focusIndex;\n        }\n    };\n\n    private readonly handleItemFocus = (e: Event): void => {\n        const targetItem: HTMLElement = e.target as HTMLElement;\n\n        if (\n            this.menuItems !== undefined\n            && targetItem !== this.menuItems[this.focusIndex]\n        ) {\n            this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');\n            this.focusIndex = this.menuItems.indexOf(targetItem);\n            targetItem.setAttribute('tabindex', '0');\n        }\n    };\n\n    private readonly handleExpandedChanged = (e: Event): void => {\n        if (\n            e.defaultPrevented\n            || e.target === null\n            || this.menuItems === undefined\n            || !this.menuItems.includes(e.target as Element)\n        ) {\n            return;\n        }\n\n        e.preventDefault();\n        const changedItem: MenuItem = e.target as MenuItem;\n\n        // closing an expanded item without opening another\n        if (\n            this.expandedItem !== null\n            && changedItem === this.expandedItem\n            && changedItem.expanded === false\n        ) {\n            this.expandedItem = null;\n            return;\n        }\n\n        if (changedItem.expanded) {\n            if (\n                this.expandedItem !== null\n                && this.expandedItem !== changedItem\n            ) {\n                this.expandedItem.expanded = false;\n            }\n            this.menuItems[this.focusIndex]?.setAttribute('tabindex', '-1');\n            this.expandedItem = changedItem;\n            this.focusIndex = this.menuItems.indexOf(changedItem);\n            changedItem.setAttribute('tabindex', '0');\n        }\n    };\n\n    private readonly removeItemListeners = (): void => {\n        if (this.menuItems !== undefined) {\n            this.menuItems.forEach((item: Element) => {\n                item.removeEventListener(\n                    'expanded-change',\n                    this.handleExpandedChanged\n                );\n                item.removeEventListener('focus', this.handleItemFocus);\n            });\n        }\n    };\n\n    private itemsChanged(): void {\n        // only update children after the component is connected and\n        // the setItems has run on connectedCallback\n        // (menuItems is undefined until then)\n        if (this.$fastController.isConnected && this.menuItems !== undefined) {\n            this.setItems();\n        }\n    }\n\n    private itemIconsChanged(oldIcons: Element[], newIcons: Element[]): void {\n        // must check if set of icon elements is actually different\n        if (\n            this.$fastController.isConnected\n            && this.menuItems !== undefined\n            && (oldIcons.length !== newIcons.length\n                || new Set(oldIcons.concat(newIcons)).size !== oldIcons.length)\n        ) {\n            this.setItems();\n        }\n    }\n\n    private readonly setItems = (): void => {\n        const newItems: Element[] = this.domChildren();\n\n        this.removeItemListeners();\n        this.menuItems = newItems;\n\n        const menuItems = this.menuItems.filter(this.isMenuItemElement);\n\n        // if our focus index is not -1 we have items\n        if (menuItems.length) {\n            this.focusIndex = 0;\n        }\n\n        function elementIndent(el: HTMLElement): MenuItemColumnCount {\n            const role = el.getAttribute('role');\n            const startSlot = el.querySelector('[slot=start]');\n\n            if (role !== MenuItemRole.menuitem && startSlot === null) {\n                return 1;\n            }\n            if (role === MenuItemRole.menuitem && startSlot !== null) {\n                return 1;\n            }\n            if (role !== MenuItemRole.menuitem && startSlot !== null) {\n                return 2;\n            }\n            return 0;\n        }\n\n        const indent: MenuItemColumnCount = menuItems.reduce<MenuItemColumnCount>((accum, current) => {\n            const elementValue = elementIndent(current);\n\n            return accum > elementValue ? accum : elementValue;\n        }, 0);\n\n        menuItems.forEach((item: HTMLElement, index: number) => {\n            item.setAttribute('tabindex', index === 0 ? '0' : '-1');\n            item.addEventListener(\n                'expanded-change',\n                this.handleExpandedChanged\n            );\n            item.addEventListener('focus', this.handleItemFocus);\n\n            if (item instanceof MenuItem || 'startColumnCount' in item) {\n                (item as unknown as MenuItem).startColumnCount = indent;\n            }\n        });\n    };\n\n    /**\n     * handle change from child element\n     */\n    private readonly changeHandler = (e: Event): void => {\n        if (this.menuItems === undefined) {\n            return;\n        }\n        const changedMenuItem: MenuItem = e.target as MenuItem;\n        const changeItemIndex: number = this.menuItems.indexOf(changedMenuItem);\n\n        if (changeItemIndex === -1) {\n            return;\n        }\n\n        if (\n            changedMenuItem.role === 'menuitemradio'\n            && changedMenuItem.checked === true\n        ) {\n            for (let i = changeItemIndex - 1; i >= 0; --i) {\n                const item: Element = this.menuItems[i]!;\n                const role: string | null = item.getAttribute('role');\n                if (role === MenuItemRole.menuitemradio) {\n                    (item as MenuItem).checked = false;\n                }\n                if (role === 'separator') {\n                    break;\n                }\n            }\n            const maxIndex: number = this.menuItems.length - 1;\n            for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {\n                const item: Element = this.menuItems[i]!;\n                const role: string | null = item.getAttribute('role');\n                if (role === MenuItemRole.menuitemradio) {\n                    (item as MenuItem).checked = false;\n                }\n                if (role === 'separator') {\n                    break;\n                }\n            }\n        }\n    };\n\n    /**\n     * get an array of valid DOM children\n     */\n    private domChildren(): Element[] {\n        return Array.from(this.children).filter(\n            child => !child.hasAttribute('hidden')\n        );\n    }\n\n    /**\n     * check if the item is a menu item\n     */\n    private readonly isMenuItemElement = (el: Element): el is HTMLElement => {\n        return (\n            isHTMLElement(el)\n            && Object.prototype.hasOwnProperty.call(\n                Menu.focusableElementRoles,\n                el.getAttribute('role')!\n            )\n        );\n    };\n\n    /**\n     * check if the item is focusable\n     */\n    private readonly isFocusableElement = (el: Element): el is HTMLElement => {\n        return this.isMenuItemElement(el);\n    };\n\n    private setFocus(focusIndex: number, adjustment: number): void {\n        if (this.menuItems === undefined) {\n            return;\n        }\n\n        let updatedIndex = focusIndex;\n        while (updatedIndex >= 0 && updatedIndex < this.menuItems.length) {\n            const child: Element = this.menuItems[updatedIndex]!;\n\n            if (this.isFocusableElement(child)) {\n                // change the previous index to -1\n                if (\n                    this.focusIndex > -1\n                    && this.menuItems.length >= this.focusIndex - 1\n                ) {\n                    this.menuItems[this.focusIndex]?.setAttribute(\n                        'tabindex',\n                        '-1'\n                    );\n                }\n\n                // update the focus index\n                this.focusIndex = updatedIndex;\n\n                // update the tabindex of next focusable element\n                child.setAttribute('tabindex', '0');\n\n                // focus the element\n                child.focus();\n\n                break;\n            }\n\n            updatedIndex += adjustment;\n        }\n    }\n}\n"]}

package/dist/esm/menu/template.d.ts

@@ -0,0 +1,4 @@
+import { type ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Menu } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<Menu>>;

package/dist/esm/menu/template.js

@@ -0,0 +1,21 @@
+import { children, html, slotted } from '@microsoft/fast-element';
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = () => html `
+    <template
+        slot="${x => {
+    if (x.slot) {
+        return x.slot;
+    }
+    return x.isNestedMenu() ? 'submenu' : undefined;
+}}"
+        role="menu"
+        @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+        @focusout="${(x, c) => x.handleFocusOut(c.event)}"
+        ${children({ property: 'itemIcons', subtree: true, attributeFilter: ['slot'], selector: ':scope > * > [slot="start"]' })}
+    >
+        <slot ${slotted('items')}></slot>
+    </template>
+`;
+/* eslint-enable @typescript-eslint/indent */
+//# sourceMappingURL=template.js.map

package/dist/esm/menu/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,IAAI,EACJ,OAAO,EAEV,MAAM,yBAAyB,CAAC;AAIjC,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAEjB,GAAG,EAAE,CAAC,IAAI,CAAA;;gBAEE,CAAC,CAAC,EAAE;IACR,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;QACT,OAAO,CAAC,CAAC,IAAI,CAAC;IAClB,CAAC;IACD,OAAO,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC;;oBAEW,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAsB,CAAC;qBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;UAC5D,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,6BAA6B,EAAE,CAAC;;gBAEhH,OAAO,CAAC,OAAO,CAAC;;CAE/B,CAAC;AACF,6CAA6C","sourcesContent":["import {\n    children,\n    html,\n    slotted,\n    type ViewTemplate\n} from '@microsoft/fast-element';\nimport type { FoundationElementTemplate } from '@microsoft/fast-foundation';\nimport type { Menu } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Menu>\n> = () => html`\n    <template\n        slot=\"${x => {\n            if (x.slot) {\n                return x.slot;\n            }\n            return x.isNestedMenu() ? 'submenu' : undefined;\n        }}\"\n        role=\"menu\"\n        @keydown=\"${(x, c) => x.handleMenuKeyDown(c.event as KeyboardEvent)}\"\n        @focusout=\"${(x, c) => x.handleFocusOut(c.event as FocusEvent)}\"\n        ${children({ property: 'itemIcons', subtree: true, attributeFilter: ['slot'], selector: ':scope > * > [slot=\"start\"]' })}\n    >\n        <slot ${slotted('items')}></slot>\n    </template>\n`;\n/* eslint-enable @typescript-eslint/indent */\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "30.1.4",
+  "version": "30.1.5",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",