@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -5,25 +5,115 @@ import { spaceXSmall } from "@duetds/tokens";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { setOpenerExpanded } from "../../utils/a11y-utils";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
+import { getLanguage } from "../../utils/language-utils";
 import { Teleport } from "../../utils/teleport";
 export class DuetPopupMenu {
     constructor() {
-        this.setOpenButton = (element) => {
+        this.filterLabel = {
+            en: "Filter menu",
+            fi: "Suodata valikkoa",
+            sv: "Filtrera meny",
+        };
+        this.filterResultCountLabel = {
+            en: "items match filter",
+            fi: "kohtaa vastaa suodatinta",
+            sv: "menyalternativ matchar filtret",
+        };
+        this.disconnectController = new AbortController();
+        this.eventListenerController = new AbortController();
+        this.open = false;
+        this.language = getLanguage();
+        /**
+         * Accessible role.
+         */
+        this.accessibleRole = "menu";
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Placement of the popup menu relative to its controller.
+         * Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
+         */
+        this.placement = "bottom-start";
+        /**
+         * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute.
+         */
+        this.forcePlacement = false;
+        /**
+         * Allow vertical flip when there is not enough space
+         * below the controller.
+         */
+        this.allowVerticalFlip = true;
+        /**
+         * Position.
+         */
+        this.position = "absolute";
+        /**
+         * Main axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal.
+         */
+        this.mainAxisOffset = 0;
+        /**
+         * Cross axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
+         */
+        this.crossAxisOffset = 0;
+        /**
+         * By default Popup Menu adds "action-arrow-down-small" icon to the controller.
+         * This can be removed with controller-icon="".
+         */
+        this.controllerIcon = "action-arrow-down-small";
+        // duet-slideout has about the same code as this function
+        this.setOpenButton = (givenElement) => {
+            let element;
+            let addClickListener;
+            if (givenElement || givenElement === null) {
+                element = givenElement;
+                addClickListener = false;
+            }
+            else {
+                if (typeof this.controller === "string") {
+                    element = typeof this.controller === "string" ? document.getElementById(this.controller) : undefined;
+                }
+                else {
+                    element = this.controller;
+                }
+                if (element && this.openButton === element) {
+                    return;
+                }
+                addClickListener = true;
+            }
+            if (this.eventListenerController) {
+                this.eventListenerController.abort();
+            }
             if (!element) {
+                if (this.openButton && this.controllerIcon) {
+                    this.openButton.removeAttribute("trailing-icon");
+                }
+                this.openButton = undefined;
                 return;
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 if (this.controllerIcon) {
                     button.setAttribute("trailing-icon", "action-arrow-down-small");
                 }
                 this.openButton = button;
+                if (addClickListener && !this.disconnectController.signal.aborted) {
+                    this.eventListenerController = new AbortController();
+                    this.openButton.addEventListener("click", this.openButtonEventListener, {
+                        signal: this.eventListenerController.signal,
+                    });
+                }
+            }
+            catch (e) {
+                console.error(e);
             }
-            catch (_e) { }
         };
         this.openButtonEventListener = () => {
             this.toggle();
@@ -45,49 +135,36 @@ export class DuetPopupMenu {
             this.menuY = coordinates.y;
             this.menuX = coordinates.x;
         };
-        this.open = false;
-        this.menuY = undefined;
-        this.menuX = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menu";
-        this.theme = "";
-        this.skipTeleport = undefined;
-        this.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.allowVerticalFlip = true;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-        this.controllerIcon = "action-arrow-down-small";
-        this.scrollLimit = undefined;
-    }
-    /**
-     * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
-     * the component automatically sets the click event listener to open and close the popup-menu.
-     */
-    get controller() {
-        return this._controller;
-    }
-    set controller(value) {
-        if (this._controller === value) {
-            return;
-        }
-        this._controller = value;
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
+        this.getNonFilteredItems = () => {
+            return this.showFilterInput ? this.itemElements.filter(i => i.style.display !== "none") : this.itemElements;
+        };
+        this.filterItems = () => {
+            var _a;
+            const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
+            const items = this.itemElements;
+            items.forEach(item => {
+                var _a;
+                item.style.display =
+                    !filterText ||
+                        item.textContent.toLowerCase().includes(filterText) ||
+                        ((_a = item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterText))
+                        ? ""
+                        : "none";
+            });
+            this.filterResultCount = items.filter(i => i.style.display !== "none").length;
+        };
+        this.handleKeyDownOnFilter = (ev) => {
+            var _a;
+            if (isArrowDownKey(ev)) {
+                (_a = this.getNonFilteredItems()[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
             }
-        }
-        else {
-            this.setOpenButton(value);
-        }
+        };
     }
     /**
      * Alias for property controller.
      */
     get opener() {
-        return this._controller;
+        return this.controller;
     }
     set opener(value) {
         this.controller = value;
@@ -107,23 +184,27 @@ export class DuetPopupMenu {
         if (Build.isServer) {
             return;
         }
+        if (this.disconnectController && this.disconnectController.signal.aborted) {
+            this.disconnectController = new AbortController();
+        }
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
+        this.setOpenButton();
     }
     disconnectedCallback() {
         if (this.autoUpdateCleanup) {
             this.autoUpdateCleanup();
         }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-            if (this.controllerIcon) {
-                this.openButton.removeAttribute("trailing-icon");
-            }
+        if (this.disconnectController) {
+            this.disconnectController.abort();
         }
+        this.setOpenButton(null);
     }
     /**
      * Component event handling.
@@ -137,16 +218,17 @@ export class DuetPopupMenu {
         }
     }
     async handleKeyDown(evt) {
+        const items = this.getNonFilteredItems();
         if (this.open) {
             if (isArrowDownKey(evt)) {
                 evt.preventDefault();
                 const current = await this.getFocusedItemIndex();
                 if (current !== -1) {
-                    if (current < this.itemElements.length - 1) {
-                        this.itemElements[current + 1].setFocus();
+                    if (current < items.length - 1) {
+                        items[current + 1].setFocus();
                     }
                     else {
-                        this.itemElements[0].setFocus();
+                        items[0].setFocus();
                     }
                 }
             }
@@ -155,10 +237,15 @@ export class DuetPopupMenu {
                 const current = await this.getFocusedItemIndex();
                 if (current !== -1) {
                     if (current === 0) {
-                        this.itemElements[this.itemElements.length - 1].setFocus();
+                        if (this.showFilterInput) {
+                            this.filterInput.setFocus();
+                        }
+                        else {
+                            items[items.length - 1].setFocus();
+                        }
                     }
                     else {
-                        this.itemElements[current - 1].setFocus();
+                        items[current - 1].setFocus();
                     }
                 }
             }
@@ -210,17 +297,24 @@ export class DuetPopupMenu {
         if (!!newValue === !!oldValue) {
             return;
         }
+        if (this.openButton) {
+            setOpenerExpanded(this.openButton, this.open);
+        }
         if (this.open && !oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
+            const autoUpdateConfig = {
+                ancestorScroll: !this.forcePlacement,
+            };
             if (this.accessibleRole !== "listbox") {
                 this.teleport.makeSiblingsInert();
             }
             this.updatePlacement();
             // Start autoUpdate when menu is open
             if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
+                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement, autoUpdateConfig);
+            }
+            if (this.showFilterInput) {
+                this.filterInput.value = "";
+                this.filterItems();
             }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
@@ -230,9 +324,6 @@ export class DuetPopupMenu {
             }, 200);
         }
         else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
             // Clean up autoUpdate when closed
             if (this.autoUpdateCleanup) {
                 this.autoUpdateCleanup();
@@ -248,22 +339,58 @@ export class DuetPopupMenu {
             }, 200);
         }
     }
+    handleControllerChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.setOpenButton();
+        }
+        else {
+            this.setOpenButton(newValue);
+        }
+    }
     get itemElements() {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
+    getAllPrecedingMatchingSiblings(el, selector) {
+        const prev = el.previousElementSibling;
+        if (prev) {
+            const matches = this.getAllPrecedingMatchingSiblings(prev, selector);
+            if (prev === null || prev === void 0 ? void 0 : prev.matches(selector)) {
+                matches.push(prev);
+            }
+            return matches;
+        }
+        return [];
+    }
     get popupMenuStyleHeight() {
+        var _a;
         const selector = ":scope duet-popup-menu-item, :scope duet-notification";
         const elements = Array.from(this.element.querySelectorAll(selector));
-        if (elements.length > 0 && this.scrollLimit) {
+        // if we have filter, elements may be hidden
+        const visibleElements = elements.filter(el => el.style.display !== "none");
+        if (visibleElements.length > 0 && this.scrollLimit) {
+            // of the visible elements, we want to show at moist scrollLimit items
+            const itemsToShow = visibleElements.slice(0, this.scrollLimit - 1);
+            // use the actual heights of the items to show
+            const itemsToShowHeight = itemsToShow.reduce((acc, cur) => acc + cur.offsetHeight, 0);
+            // include possible filter input
+            const filterHeight = ((_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            // include all dividers that preced the last item to show
+            // as their height with margins can not be easily captured, use magic number 17, 1px height + 2 * 8px margin
+            const lastItemToShow = itemsToShow[itemsToShow.length - 1];
+            const dividerHeight = this.getAllPrecedingMatchingSiblings(lastItemToShow, "duet-divider").length * 17;
+            // popup-menu has spaceXSmall top and bottom paddings
             const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${elements[0].offsetHeight * this.scrollLimit + paddings}px`;
+            return `${itemsToShowHeight + filterHeight + dividerHeight + paddings}px`;
         }
         else {
             return "auto";
         }
     }
     async getFocusedItemIndex() {
-        const items = this.itemElements;
+        const items = this.getNonFilteredItems();
         for (let i = 0; i < items.length; i++) {
             if (await items[i].isFocused()) {
                 return i;
@@ -279,14 +406,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '90582d3282b14880a32333351bb6620f6d44eff1' }, h("div", { key: '78c0108809c63c62f3b5db7fdd5f9047d9638f11', ref: element => {
+        return (h(Host, { key: '3e4fe2a2ca40a34b5b8794f4c11051b48dc03417' }, h("div", { key: 'd9cbfb33282b072af2fef5172e6ff9c4fc3ee003', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '39d3acbfbd438343dd24939b4edcd5cd50eb9a24' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'f9acbac0a98487efc50dd5a132fe61bb1e411979' }, h("duet-input", { key: 'c3224672751c4a30074ffa79ea873a569706b4fa', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'daf978e63ae05c1396da1ca3cdf84ac138e47e03' }, h("span", { key: '1fdf706c20cd1dda3a6854aad9ee8de26c847721', role: "status" }, `
+                  ${this.filterResultCount}/${this.itemElements.length}
+                  ${this.filterResultCountLabel[this.language]}
+                `)), h("duet-spacer", { key: 'fbd2399dbd35a743f2e6df12e03ff896a157dcd4', size: "xx-small" }))), h("slot", { key: 'c8b5480636559d484b8ac47e4987c0d7baa17d0d' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -304,6 +434,7 @@ export class DuetPopupMenu {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -318,11 +449,11 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "\"menu\" | \"listbox\" | \"list\"",
@@ -337,12 +468,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menu\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -363,12 +494,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "skipTeleport": {
                 "type": "boolean",
+                "attribute": "skip-teleport",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -386,15 +517,15 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "skip-teleport",
                 "reflect": false
             },
             "controller": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "controller",
+                "mutable": true,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "| string\n    | HTMLDuetInputElement\n    | (HTMLElement & FocusableComponent & OpenerComponent)\n    | HTMLElement",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLDuetInputElement": {
                             "location": "global",
@@ -422,26 +553,26 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,\nthe component automatically sets the click event listener to open and close the popup-menu."
                 },
-                "getter": true,
-                "setter": true,
-                "attribute": "controller",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "opener": {
                 "type": "string",
+                "attribute": "opener",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
-                        "HTMLDuetInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLDuetInputElement"
-                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
                         },
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "FocusableComponent": {
                             "location": "import",
                             "path": "../../common",
@@ -462,11 +593,11 @@ export class DuetPopupMenu {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "opener",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "| \"top\"\n    | \"right\"\n    | \"bottom\"\n    | \"left\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"left-start\"\n    | \"left-end\"",
@@ -481,12 +612,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "\"bottom-start\""
             },
             "forcePlacement": {
                 "type": "boolean",
+                "attribute": "force-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -497,16 +628,16 @@ export class DuetPopupMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Force placement."
+                    "text": "Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force-placement",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "allowVerticalFlip": {
                 "type": "boolean",
+                "attribute": "allow-vertical-flip",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -521,12 +652,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allow-vertical-flip",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "\"absolute\" | \"fixed\"",
@@ -541,12 +672,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"absolute\""
             },
             "mainAxisOffset": {
                 "type": "number",
+                "attribute": "main-axis-offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -561,12 +692,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "main-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "crossAxisOffset": {
                 "type": "number",
+                "attribute": "cross-axis-offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -581,12 +712,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "cross-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "controllerIcon": {
                 "type": "string",
+                "attribute": "controller-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -601,12 +732,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controller-icon",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-down-small\""
             },
             "scrollLimit": {
                 "type": "number",
+                "attribute": "scroll-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -621,7 +752,25 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scroll-limit",
+                "reflect": false
+            },
+            "showFilterInput": {
+                "type": "boolean",
+                "attribute": "show-filter-input",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show input where user can type to filter popup-menu items to those that have a match in value or text content"
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };
@@ -630,7 +779,9 @@ export class DuetPopupMenu {
         return {
             "open": {},
             "menuY": {},
-            "menuX": {}
+            "menuX": {},
+            "filterResultCount": {},
+            "language": {}
         };
     }
     static get events() {
@@ -734,6 +885,9 @@ export class DuetPopupMenu {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
+            }, {
+                "propName": "controller",
+                "methodName": "handleControllerChange"
             }];
     }
     static get listeners() {