@dso-toolkit/core 97.1.1 → 99.0.0

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

@@ -1,122 +1,100 @@
 import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
-import { Host, h } from "@stencil/core";
-import { tabbable } from "tabbable";
+import { Host, forceUpdate, h, } from "@stencil/core";
+import { createStore } from "@stencil/store";
 import { v4 as uuidv4 } from "uuid";
-import { getActiveElement } from "../../utils/get-active-element";
 export class DropdownMenu {
     constructor() {
         /**
-         * Whether the menu is open or closed.
-         * This attribute is reflected and mutable.
+         * The variant of the Button to toggle the menu
          */
+        this.variant = "secondary";
         this.open = false;
-        /**
-         * Alignment of the dropdown
-         */
-        this.dropdownAlign = "left";
-        /**
-         * Space between button and dropdown options
-         */
-        this.dropdownOptionsOffset = 2;
-        /**
-         * Whether the menu is checkable.
-         */
-        this.checkable = false;
         this.focusOutListener = (event) => {
-            if (this.open &&
-                (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+            if (this.open && !(event.relatedTarget instanceof HTMLElement)) {
                 this.toggleOptions(false);
             }
         };
-        this.keyDownListener = (event) => {
+        this.keyDownHandler = (event) => {
+            if (!(event.target instanceof HTMLElement)) {
+                return;
+            }
             if (event.defaultPrevented || !this.open) {
                 return;
             }
             switch (event.key) {
                 case "Tab":
                     if (event.shiftKey) {
-                        this.tabInPopup(this.tabbables(true), -1);
+                        this.moveFocusToPrevious(event.target);
                     }
                     else {
-                        this.tabInPopup(this.tabbables(true), 1);
+                        this.moveFocusToNext(event.target);
                     }
                     break;
                 case "ArrowDown":
-                    this.tabInPopup(this.tabbables(false), 1);
+                    this.moveFocusToNext(event.target, false);
                     break;
                 case "ArrowUp":
-                    this.tabInPopup(this.tabbables(false), -1);
+                    this.moveFocusToPrevious(event.target, false);
                     break;
                 case "Escape":
                     this.escape();
                     break;
-                case " ":
-                    if (event.target instanceof HTMLElement) {
-                        event.target.click();
-                    }
-                    break;
                 default:
                     return;
             }
             event.preventDefault();
         };
         this.escape = () => {
-            this.button.focus();
+            this.button?.focus();
             this.toggleOptions(false);
         };
+        const { state } = createStore({
+            checkable: false,
+        });
+        this.dropdownMenuState = state;
     }
-    get button() {
-        const button = this.host.querySelector('button[slot="toggle"]');
-        if (!(button instanceof HTMLButtonElement)) {
-            throw new ReferenceError("Mandatory toggle button not found");
-        }
-        return button;
+    /**
+     * Whether the menu items are checkable.
+     */
+    get checkable() {
+        return this.dropdownMenuState.checkable;
     }
-    tabbables(withButton) {
-        const tabbables = this.host.isConnected ? tabbable(this.host) : [];
-        return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
+    set checkable(value) {
+        this.dropdownMenuState.checkable = value || false;
+        forceUpdate(this.host);
     }
-    componentDidLoad() {
-        this.button.setAttribute("aria-haspopup", "menu");
-        this.button.setAttribute("aria-expanded", "false");
-        if (!this.button.id) {
-            this.button.id = uuidv4();
-        }
-        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
-        if (!(dropdownOptionsElement instanceof HTMLElement)) {
-            throw new Error("dropdown options element is not instanceof HTMLElement");
-        }
-        dropdownOptionsElement.setAttribute("role", "menu");
-        dropdownOptionsElement.setAttribute("aria-labelledby", this.button.id);
-        for (const ul of Array.from(this.host.getElementsByTagName("ul"))) {
-            ul.setAttribute("role", "group");
-            for (const li of Array.from(ul.getElementsByTagName("li"))) {
-                li.setAttribute("role", "none");
-            }
+    dsoClickHandler(event) {
+        event.stopPropagation();
+        if (this.open && event.target instanceof HTMLElement) {
+            this.toggleOptions(false);
         }
     }
+    /**
+     * @internal
+     */
+    async _getState() {
+        return this.dropdownMenuState;
+    }
+    dropdownMenuTabbables(withButton) {
+        const menuItems = this.host.isConnected
+            ? Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item"))
+            : [];
+        return withButton ? [this.host, ...menuItems] : menuItems;
+    }
     componentDidRender() {
-        for (const li of Array.from(this.host.getElementsByTagName("li"))) {
-            for (const tab of this.host.isConnected ? tabbable(li) : []) {
-                tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
-                if (this.checkable) {
-                    tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
-                }
-            }
-        }
-        this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-        if (this.popoverElement && !this.cleanUp) {
+        if (this.button && this.popoverElement && !this.cleanUp) {
             const element = this.popoverElement;
-            this.cleanUp = autoUpdate(this.button, element, () => {
-                computePosition(this.button, element, {
+            const referenceElement = this.button;
+            this.cleanUp = autoUpdate(referenceElement, element, () => {
+                computePosition(referenceElement, element, {
                     strategy: "fixed",
                     middleware: [
-                        offset(this.dropdownOptionsOffset),
+                        offset(2),
                         flip({
-                            padding: this.dropdownOptionsOffset,
+                            padding: 2,
                         }),
                     ],
-                    placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+                    placement: "bottom-start",
                 }).then(({ x, y }) => {
                     Object.assign(element.style, {
                         left: `${x}px`,
@@ -126,51 +104,55 @@ export class DropdownMenu {
             });
         }
     }
-    onClick(event) {
-        const composedPath = event.composedPath();
-        if (this.isToggleButtonEvent(composedPath)) {
-            this.toggleOptions();
-        }
-        else if (this.open && this.isMenuItemEvent(composedPath)) {
-            this.toggleOptions(false);
-        }
-    }
-    isToggleButtonEvent(composedPath) {
-        return composedPath.includes(this.button);
-    }
-    isMenuItemEvent(composedPath) {
-        return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
-    }
     toggleOptions(force) {
         this.open = force ?? !this.open;
         if (this.popoverElement?.isConnected) {
-            this.popoverElement?.togglePopover(this.open);
+            this.popoverElement.togglePopover(this.open);
+        }
+        if (this.open) {
+            requestAnimationFrame(() => this.moveFocusTo(this.firstItem(false)));
         }
         if (!this.open && this.cleanUp) {
             this.cleanUp();
             this.cleanUp = undefined;
         }
     }
-    connectedCallback() {
-        this.host.addEventListener("keydown", this.keyDownListener);
-    }
     disconnectedCallback() {
-        this.host.removeEventListener("keydown", this.keyDownListener);
         this.toggleOptions(false);
     }
-    tabInPopup(tabbables, direction) {
-        const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
-        let nextIndex = currentIndex + direction;
-        if (nextIndex >= tabbables.length) {
-            nextIndex = 0;
+    get lastItem() {
+        return this.dropdownMenuTabbables(true).at(-1);
+    }
+    firstItem(withButton) {
+        return this.dropdownMenuTabbables(withButton)[0];
+    }
+    moveFocusToPrevious(focussedElement, withButton = true) {
+        const tabbables = this.dropdownMenuTabbables(withButton);
+        const index = tabbables.findIndex((element) => element === focussedElement);
+        const next = this.dropdownMenuTabbables(withButton)[index - 1] ?? this.lastItem;
+        this.moveFocusTo(next);
+    }
+    moveFocusToNext(focussedElement, withButton = true) {
+        const tabbables = this.dropdownMenuTabbables(withButton);
+        const index = tabbables.findIndex((element) => element === focussedElement);
+        const next = this.dropdownMenuTabbables(withButton)[index + 1] ?? this.firstItem(withButton);
+        this.moveFocusTo(next);
+    }
+    moveFocusTo(element) {
+        if (!element) {
+            return;
+        }
+        if (element === this.host && this.button) {
+            this.button.focus();
+            return;
         }
-        else if (nextIndex < 0) {
-            nextIndex = tabbables.length - 1;
+        if ("_dsoFocus" in element) {
+            element._dsoFocus();
         }
-        tabbables[nextIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: '2b1a77a0d5ec49784f038af3540c6369d4c2cc2c', onFocusout: this.focusOutListener }, h("slot", { key: '32d8b7f6e23a5b11b5ab3bdeb78575fc6855322f', name: "toggle" }), h("div", { key: '262486ced58fb98375ccf8abc38959144fc9296d', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '2c76def3904869f1a6227430f6718d85eb9cfc30' }))));
+        const buttonId = uuidv4();
+        return (h(Host, { key: '04b9d28b55a06ae6f13811c0dd905c05ad92de25', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: 'c096f5279d24ad7969f9cc18c24db374d314204f', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '861e2eb587415cd092487e3de7438fc884ceffe4', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '8470a79b40f303020eb698c4f6727f1143fe398f', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '0832da4107efa630d368c171348da1b9fb47cab6' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -186,9 +168,9 @@ export class DropdownMenu {
     }
     static get properties() {
         return {
-            "open": {
+            "checkable": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -198,82 +180,95 @@ export class DropdownMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the menu is open or closed.\r\nThis attribute is reflected and mutable."
+                    "text": "Whether the menu items are checkable."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "checkable"
             },
-            "dropdownAlign": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"left\" | \"right\"",
-                    "resolved": "\"left\" | \"right\"",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Alignment of the dropdown"
+                    "text": "The label of the Dropdown Menu Button"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-align",
-                "defaultValue": "\"left\""
+                "reflect": true,
+                "attribute": "label"
             },
-            "dropdownOptionsOffset": {
-                "type": "number",
+            "variant": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Space between button and dropdown options"
+                    "text": "The variant of the Button to toggle the menu"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-options-offset",
-                "defaultValue": "2"
-            },
-            "checkable": {
-                "type": "boolean",
-                "mutable": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "\"secondary\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get methods() {
+        return {
+            "_getState": {
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "signature": "() => Promise<DropdownMenuInternalState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DropdownMenuInternalState": {
+                            "location": "import",
+                            "path": "./dropdown-menu.interfaces",
+                            "id": "src/components/dropdown-menu/dropdown-menu.interfaces.ts::DropdownMenuInternalState",
+                            "referenceLocation": "DropdownMenuInternalState"
+                        }
+                    },
+                    "return": "Promise<DropdownMenuInternalState>"
                 },
-                "required": false,
-                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Whether the menu is checkable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "checkable",
-                "defaultValue": "false"
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
-                "name": "click",
-                "method": "onClick",
-                "target": "window",
+                "name": "dsoClick",
+                "method": "dsoClickHandler",
+                "target": undefined,
                 "capture": false,
                 "passive": false
             }];

package/dist/collection/components/expandable/expandable.js

@@ -36,10 +36,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: 'cb4240aaf6c07bc54ffe334b2ba05a7471593dcd', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: '81871d9f6ecc0d82d23bc4053c56ae8e926103a0', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: '5e649127a1d0b41628bf5106f161d037cbc02d4e', class: "slot-container" }, h("slot", { key: '44ccc85c8af6b6fd368323bd04b22624227daa70' }))));
+            }) }, h("div", { key: '634796c608f209081fcf15656df273f1f2cc5d3b', class: "slot-container" }, h("slot", { key: '898f4edc0f9d35de7d8d35fdbcde576aeac9e503' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -86,11 +86,24 @@ export class Header {
         };
         this.menuItemElementRefs = [];
         this.text = i18n(() => this.host, translations);
-        this.resizeObserver = new ResizeObserver(() => {
+        this.flushResize = () => {
+            this.resizeFrameId = undefined;
+            if (!this.host.isConnected) {
+                return;
+            }
             this.resetVisibleMenuItems();
             this.toggleOptions(false);
             this.dropdownOptionsOffset = 0;
             forceUpdate(this.host);
+        };
+        this.scheduleResize = () => {
+            if (this.resizeFrameId !== undefined) {
+                return;
+            }
+            this.resizeFrameId = requestAnimationFrame(this.flushResize);
+        };
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleResize();
         });
         this.focusOutListener = (event) => {
             if (this.open &&
@@ -170,6 +183,10 @@ export class Header {
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
+        if (this.resizeFrameId !== undefined) {
+            cancelAnimationFrame(this.resizeFrameId);
+            this.resizeFrameId = undefined;
+        }
         this.toggleOptions(false);
     }
     componentDidRender() {
@@ -206,7 +223,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '049a7cd2e6c5beccbe9a1b23bcd505ce2cfbc1e4', "is-compact": this.isCompact }, h("div", { key: '69626521734262e4cb40369667b084bee23cec42', class: "dso-header" }, h("div", { key: '7e0106defaff8c5f6c0c8942c987d3416acb39bc', class: "logo-container" }, h("slot", { key: '7355a1f157c81f785bb101f7c5490aa6ae0330c4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '99c692979885d3c2bc1f0f6950b1395fdd233c85', "is-compact": this.isCompact }, h("div", { key: '328e012a746752be0d8531d0f5b0a905a07eb825', class: "dso-header" }, h("div", { key: 'f84877cdd45325fcc7b5a5093fd40f3de83f7a6e', class: "logo-container" }, h("slot", { key: '915ff23b15413931ab9f334b46b2b3f7740706d4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];