@duetds/components 6.10.3 → 6.11.0

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

@@ -4,20 +4,21 @@
 import { computePosition, flip, offset } from "@floating-ui/dom";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { isEscapeKey } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
+import { Teleport } from "../../utils/teleport";
 export class DuetPopupMenu {
   constructor() {
     this.updatePlacement = async () => {
       if (!this.controller) {
         return;
       }
-      const position = await computePosition(this.controller, this.element, {
+      const coordinates = await computePosition(this.controller, this.element, {
         middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
         placement: this.placement,
-        strategy: "fixed",
+        strategy: this.position,
       });
-      this.menuY = position.y;
-      this.menuX = position.x;
+      this.menuY = coordinates.y;
+      this.menuX = coordinates.x;
     };
     this.open = false;
     this.menuY = undefined;
@@ -26,6 +27,7 @@ export class DuetPopupMenu {
     this.theme = "";
     this.controller = undefined;
     this.placement = "bottom-start";
+    this.position = "absolute";
     this.mainAxisOffset = 0;
     this.crossAxisOffset = 0;
   }
@@ -34,6 +36,7 @@ export class DuetPopupMenu {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.teleport = new Teleport(this.element);
   }
   componentDidLoad() {
     if (!Build.isServer) {
@@ -45,8 +48,39 @@ export class DuetPopupMenu {
    */
   handleKeyUp(evt) {
     if (this.open) {
-      // When Esc is pressed the modal should be closed
+      // When Esc is pressed the menu should be closed
       if (isEscapeKey(evt)) {
+        this.focusController();
+        this.hide();
+      }
+    }
+  }
+  async handleKeyDown(evt) {
+    if (this.open) {
+      if (isArrowDownKey(evt)) {
+        const current = await this.getFocusedItemIndex();
+        if (current !== -1) {
+          if (current < this.itemElements.length - 1) {
+            this.itemElements[current + 1].setFocus();
+          }
+          else {
+            this.itemElements[0].setFocus();
+          }
+        }
+      }
+      if (isArrowUpKey(evt)) {
+        const current = await this.getFocusedItemIndex();
+        if (current !== -1) {
+          if (current === 0) {
+            this.itemElements[this.itemElements.length - 1].setFocus();
+          }
+          else {
+            this.itemElements[current - 1].setFocus();
+          }
+        }
+      }
+      if (isTabKey(evt)) {
+        evt.preventDefault();
         this.hide();
       }
     }
@@ -68,6 +102,9 @@ export class DuetPopupMenu {
    */
   async show() {
     this.open = true;
+    this.teleport.go();
+    this.itemElements[0].setFocus();
+    this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
     this.updatePlacement();
   }
   /**
@@ -75,6 +112,9 @@ export class DuetPopupMenu {
    */
   async hide() {
     this.open = false;
+    this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+    this.focusController();
+    this.teleport.resume(200);
   }
   /**
    * Toggle.
@@ -87,12 +127,34 @@ export class DuetPopupMenu {
       this.show();
     }
   }
+  focusController() {
+    if (this.controller) {
+      if ("setFocus" in this.controller) {
+        this.controller.setFocus();
+      }
+      else {
+        this.controller.focus();
+      }
+    }
+  }
+  get itemElements() {
+    return Array.from(this.element.querySelectorAll(":scope > duet-popup-menu-item"));
+  }
+  async getFocusedItemIndex() {
+    const items = this.itemElements;
+    for (let i = 0; i < items.length; i++) {
+      if (await items[i].isFocused()) {
+        return i;
+      }
+    }
+    return -1;
+  }
   render() {
     const positionStyles = {
       top: `${this.menuY}px`,
       left: `${this.menuX}px`,
     };
-    return (h(Host, null, h("div", { style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true }, role: "menu", "aria-label": this.accessibleLabel }, h("slot", null))));
+    return (h(Host, { class: this.position }, h("div", { style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: "menu", "aria-label": this.accessibleLabel }, h("slot", null))));
   }
   static get is() { return "duet-popup-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -152,8 +214,8 @@ export class DuetPopupMenu {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement",
+          "original": "HTMLElement | (HTMLElement & { setFocus(): void })",
+          "resolved": "HTMLElement | HTMLElement & { setFocus(): void; }",
           "references": {
             "HTMLElement": {
               "location": "global"
@@ -185,6 +247,24 @@ export class DuetPopupMenu {
         "reflect": false,
         "defaultValue": "\"bottom-start\""
       },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
+      },
       "mainAxisOffset": {
         "type": "number",
         "mutable": false,
@@ -230,6 +310,29 @@ export class DuetPopupMenu {
       "menuX": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "duetToggle",
+        "name": "duetToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the popup menu is opened or closed."
+        },
+        "complexType": {
+          "original": "DuetPopupMenuEvent",
+          "resolved": "{ open: boolean; component: \"duet-popup-menu\"; }",
+          "references": {
+            "DuetPopupMenuEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx"
+            }
+          }
+        }
+      }];
+  }
   static get methods() {
     return {
       "isOpen": {
@@ -306,6 +409,12 @@ export class DuetPopupMenu {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "click",
         "method": "handleClick",

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

@@ -5,10 +5,31 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetPopupMenuItem {
   constructor() {
+    /**
+     * Component event handling.
+     */
+    this.onFocus = (ev) => {
+      this.focus = true;
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-popup-menu-item",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.focus = false;
+      this.duetBlur.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-popup-menu-item",
+      });
+    };
+    this.focus = false;
     this.accessibleLabel = undefined;
     this.theme = "";
     this.url = undefined;
     this.external = false;
+    this.value = undefined;
     this.leadingIcon = undefined;
     this.trailingIcon = undefined;
     this.trailingText = undefined;
@@ -20,13 +41,23 @@ export class DuetPopupMenuItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  /**
+   * Sets focus. Use this method instead of the global focus().
+   */
+  async setFocus(options) {
+    setTimeout(() => this.itemElement.focus(options), 200);
+  }
+  async isFocused() {
+    return this.focus;
+  }
   render() {
     const TagName = this.url ? "a" : "button";
     const classes = {
       "duet-popup-menu-item": true,
       active: this.active,
+      "duet-theme-turva": this.theme === "turva",
     };
-    return (h(Host, null, h(TagName, { role: "menuitem", "aria-label": this.accessibleLabel, class: classes, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "xx-small", color: "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "xx-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+    return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "xx-small", color: "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "xx-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
   }
   static get is() { return "duet-popup-menu-item"; }
   static get encapsulation() { return "shadow"; }
@@ -117,6 +148,24 @@ export class DuetPopupMenuItem {
         "reflect": false,
         "defaultValue": "false"
       },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
       "leadingIcon": {
         "type": "string",
         "mutable": false,
@@ -201,5 +250,95 @@ export class DuetPopupMenuItem {
       }
     };
   }
+  static get states() {
+    return {
+      "focus": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the item receives focus."
+        },
+        "complexType": {
+          "original": "DuetPopupMenuItemEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-popup-menu-item\"; }",
+          "references": {
+            "DuetPopupMenuItemEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the item loses focus."
+        },
+        "complexType": {
+          "original": "DuetPopupMenuItemEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-popup-menu-item\"; }",
+          "references": {
+            "DuetPopupMenuItemEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus. Use this method instead of the global focus().",
+          "tags": []
+        }
+      },
+      "isFocused": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-scrollable/duet-scrollable.css

@@ -46,7 +46,7 @@
   right: -12px;
 }
 :host .duet-scrollable-items .duet-scrollable-button--occluded {
-  display: none;
+  visibility: hidden;
 }
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;