@dso-toolkit/core 62.11.0 → 62.11.1

package/dist/components/dropdown-menu.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createFocusTrap, t as tabbable } from './focus-trap.esm.js';
+import { t as tabbable } from './index.esm.js';
 import { h as hasOverflow, c as createPopper } from './has-overflow.js';
 import { v as v4 } from './v4.js';
 
@@ -10,29 +10,13 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.keyDownListener = (event) => {
-      if (event.defaultPrevented) {
+    this.focusOutListener = (event) => {
+      if (!(event.relatedTarget instanceof HTMLElement)) {
         return;
       }
-      switch (event.key) {
-        case "ArrowDown":
-          this.tabInPopup(1);
-          break;
-        case "ArrowUp":
-          this.tabInPopup(-1);
-          break;
-        case "Escape":
-          this.escape();
-          break;
-        case " ":
-          if (event.target instanceof HTMLElement) {
-            event.target.click();
-          }
-          break;
-        default:
-          return;
+      if (!this.tabbables(true).includes(event.relatedTarget)) {
+        this.open = false;
       }
-      event.preventDefault();
     };
     this.escape = () => {
       this.button.focus();
@@ -70,32 +54,6 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
   watchStrategy() {
     this.setStrategy();
   }
-  createTrap() {
-    var _a, _b;
-    this.trap = createFocusTrap(this.host, {
-      clickOutsideDeactivates: () => {
-        var _a;
-        this.open = false;
-        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-        delete this.trap;
-        return true;
-      },
-      escapeDeactivates: (event) => {
-        var _a;
-        if (event instanceof KeyboardEvent) {
-          this.open = false;
-          (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-          delete this.trap;
-        }
-        return true;
-      },
-      tabbableOptions: {
-        getShadowRoot: true,
-      },
-      setReturnFocus: (_a = this.button) !== null && _a !== void 0 ? _a : false,
-      initialFocus: (_b = this.button) !== null && _b !== void 0 ? _b : false,
-    }).activate();
-  }
   setStrategy() {
     if (!this.popper) {
       return;
@@ -128,8 +86,9 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     }
     return button;
   }
-  get tabbables() {
-    return tabbable(this.host).filter((e) => e !== this.button);
+  tabbables(withButton) {
+    const tabbables = tabbable(this.host);
+    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
   }
   componentDidLoad() {
     this.button.setAttribute("aria-haspopup", "menu");
@@ -179,15 +138,10 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     });
   }
   componentDidRender() {
-    var _a, _b;
+    var _a;
     this.setStrategy();
     if (this.open) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
-      this.createTrap();
-    }
-    else {
-      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
-      delete this.trap;
     }
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
@@ -197,22 +151,52 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
         }
       }
     }
-    this.host.removeEventListener("keydown", this.keyDownListener);
     this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-    if (this.open) {
-      this.host.addEventListener("keydown", this.keyDownListener);
+  }
+  onClick(event) {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+    if (this.open && (!this.host.contains(event.target) || this.tabbables(false).includes(event.target))) {
+      this.open = false;
     }
-    this.tabbables.forEach((focusableElement) => {
-      focusableElement.removeEventListener("click", this.escape);
-      if (this.open) {
-        focusableElement.addEventListener("click", this.escape);
-      }
-    });
   }
   disconnectedCallback() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
   }
+  keyDownListener(event) {
+    if (event.defaultPrevented || !this.open) {
+      return;
+    }
+    switch (event.key) {
+      case "Tab":
+        if (event.shiftKey) {
+          this.tabInPopup(this.tabbables(true), -1);
+        }
+        else {
+          this.tabInPopup(this.tabbables(true), 1);
+        }
+        break;
+      case "ArrowDown":
+        this.tabInPopup(this.tabbables(false), 1);
+        break;
+      case "ArrowUp":
+        this.tabInPopup(this.tabbables(false), -1);
+        break;
+      case "Escape":
+        this.escape();
+        break;
+      case " ":
+        if (event.target instanceof HTMLElement) {
+          event.target.click();
+        }
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
     if (!activeEl) {
@@ -223,21 +207,20 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     }
     return activeEl;
   }
-  tabInPopup(direction) {
+  tabInPopup(tabbables, direction) {
     var _a;
-    const tabs = this.tabbables;
-    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());
+    const currentIndex = tabbables.findIndex((e) => e === this.getActiveElement());
     let nextIndex = currentIndex + direction;
-    if (nextIndex >= tabs.length) {
+    if (nextIndex >= tabbables.length) {
       nextIndex = 0;
     }
     else if (nextIndex < 0) {
-      nextIndex = tabs.length - 1;
+      nextIndex = tabbables.length - 1;
     }
-    (_a = tabs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
-    return (h(Host, { tabindex: this.open ? "-1" : undefined }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
+    return (h(Host, { onFocusout: this.focusOutListener }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -255,7 +238,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     "boundary": [1],
     "placement": [1],
     "strategy": [1]
-  }, undefined, {
+  }, [[8, "click", "onClick"], [8, "keydown", "keyDownListener"]], {
     "placement": ["watchPosition"],
     "dropdownAlign": ["watchPosition"],
     "dropdownOptionsOffset": ["watchOptionsOffset"],

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

@@ -1 +1 @@
-{"file":"dropdown-menu.js","mappings":"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","names":["uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  private trap?: FocusTrap;\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: () => {\r\n        this.open = false;\r\n        this.trap?.deactivate();\r\n        delete this.trap;\r\n\r\n        return true;\r\n      },\r\n      escapeDeactivates: (event) => {\r\n        if (event instanceof KeyboardEvent) {\r\n          this.open = false;\r\n          this.trap?.deactivate();\r\n          delete this.trap;\r\n        }\r\n\r\n        return true;\r\n      },\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      setReturnFocus: this.button ?? false,\r\n      initialFocus: this.button ?? false,\r\n    }).activate();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  get tabbables(): FocusableElement[] {\r\n    return tabbable(this.host).filter((e) => e !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    this.button.addEventListener(\"click\", () => {\r\n      this.open = !this.open;\r\n    });\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n      this.createTrap();\r\n    } else {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n    if (this.open) {\r\n      this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    }\r\n\r\n    this.tabbables.forEach((focusableElement) => {\r\n      focusableElement.removeEventListener(\"click\", this.escape);\r\n      if (this.open) {\r\n        focusableElement.addEventListener(\"click\", this.escape);\r\n      }\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(-1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private getActiveElement(root: Document | ShadowRoot = document): Element | null {\r\n    const activeEl = root.activeElement;\r\n\r\n    if (!activeEl) {\r\n      return null;\r\n    }\r\n\r\n    if (activeEl.shadowRoot) {\r\n      return this.getActiveElement(activeEl.shadowRoot);\r\n    }\r\n\r\n    return activeEl;\r\n  }\r\n\r\n  private tabInPopup(direction: number) {\r\n    const tabs = this.tabbables;\r\n    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabs.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabs.length - 1;\r\n    }\r\n\r\n    tabs[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabindex={this.open ? \"-1\" : undefined}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dropdown-menu.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,wDAAwD;;MCYnE,YAAY;;;;;IA6Nf,qBAAgB,GAAG,CAAC,KAAiB;MAC3C,IAAI,EAAE,KAAK,CAAC,aAAa,YAAY,WAAW,CAAC,EAAE;QACjD,OAAO;OACR;MAED,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;QACvD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;OACnB;KACF,CAAC;IAsEM,WAAM,GAAG;MACf,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;MACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB,CAAC;gBAxSK,KAAK;yBAMsB,MAAM;iCAMhB,CAAC;qBAMb,KAAK;;;oBAoByB,MAAM;;EAIhD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,OAAO;KACR;IAED,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;MACrB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,YAAY,GAAG,cAAc,CAAC;KAC9F,CAAC,CAAC;GACJ;EAGD,kBAAkB;;IAChB,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC;MACtB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;WACxC;SACF;OACF;KACF,CAAC,CAAC;GACJ;EAGD,aAAa;IACX,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAEO,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,OAAO;KACR;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE;MAC7D,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MAEH,OAAO;KACR;IAED,IAAI,OAAO,GAAmB,IAAI,CAAC,IAAI,CAAC;IAExC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC;IAE3C,OAAO,OAAO,IAAI,OAAO,CAAC,UAAU,KAAK,QAAQ,EAAE;MACjD,OAAO,GAAG,OAAO,CAAC,UAAU,YAAY,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC;MACrG,IAAI,OAAO,KAAK,IAAI,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE;QAC5C,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;UACrB,QAAQ,EAAE,OAAO;SAClB,CAAC,CAAC;QAEH,OAAO;OACR;KACF;IAED,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;MACrB,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;GACJ;EAOD,IAAI,MAAM;IACR,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAEhE,IAAI,EAAE,MAAM,YAAY,iBAAiB,CAAC,EAAE;MAC1C,MAAM,IAAI,cAAc,CAAC,mCAAmC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;GACf;EAEO,SAAS,CAAC,UAAmB;IACnC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;GACxF;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAClD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IACnD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE;MACnB,IAAI,CAAC,MAAM,CAAC,EAAE,GAAGA,EAAM,EAAE,CAAC;KAC3B;IAED,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE;MACpC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACjE,IAAI,CAAC,OAAO,EAAE;MACZ,MAAM,IAAI,cAAc,CAAC,4BAA4B,CAAC,CAAC;KACxD;IAED,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAExD,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE;MACjE,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;MACjC,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE;QAC1D,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;OACjC;KACF;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,OAAO;KACR;IAED,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAEhF,IAAI,EAAE,sBAAsB,YAAY,WAAW,CAAC,EAAE;MACpD,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;KAC3E;IAED,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,sBAAsB,EAAE;MAC9D,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,YAAY,GAAG,cAAc,CAAC;MAC7F,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;WACxC;SACF;QACD;UACE,IAAI,EAAE,iBAAiB;UACvB,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI;WACvE;UACD,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS;SACrC;OACF;KACF,CAAC,CAAC;GACJ;EAED,kBAAkB;;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;KACvB;IAED,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE;MACjE,KAAK,MAAM,GAAG,IAAI,QAAQ,CAAC,EAAE,CAAC,EAAE;QAC9B,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;QAExE,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;SACnF;OACF;KACF;IAED,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;GACzE;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,EAAE,KAAK,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE;MAC1C,OAAO;KACR;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE;MACpG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;GACxB;EAaD,eAAe,CAAC,KAAoB;IAClC,IAAI,KAAK,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACxC,OAAO;KACR;IAED,QAAQ,KAAK,CAAC,GAAG;MACf,KAAK,KAAK;QACR,IAAI,KAAK,CAAC,QAAQ,EAAE;UAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAC3C;aAAM;UACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;SAC1C;QAED,MAAM;MACR,KAAK,WAAW;QACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1C,MAAM;MAER,KAAK,SAAS;QACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM;MAER,KAAK,QAAQ;QACX,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,MAAM;MAER,KAAK,GAAG;QACN,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;UACvC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;SACtB;QAED,MAAM;MAER;QACE,OAAO;KACV;IAED,KAAK,CAAC,cAAc,EAAE,CAAC;GACxB;EAEO,gBAAgB,CAAC,OAA8B,QAAQ;IAC7D,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;IAEpC,IAAI,CAAC,QAAQ,EAAE;MACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,QAAQ,CAAC,UAAU,EAAE;MACvB,OAAO,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;KACnD;IAED,OAAO,QAAQ,CAAC;GACjB;EAEO,UAAU,CAAC,SAA6B,EAAE,SAAiB;;IACjE,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAE/E,IAAI,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;IACzC,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,EAAE;MACjC,SAAS,GAAG,CAAC,CAAC;KACf;SAAM,IAAI,SAAS,GAAG,CAAC,EAAE;MACxB,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;KAClC;IAED,MAAA,SAAS,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;GAC/B;EAOD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,IACrC,YAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,WAAK,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACrB,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  /**\r\n   * Selector for the element the dropdown options should not be overflowing.\r\n   */\r\n  @Prop()\r\n  boundary?: string;\r\n\r\n  /**\r\n   * Force placement of dropdown.\r\n   *\r\n   * This property overrides `dropdownAlign`.\r\n   */\r\n  @Prop()\r\n  placement?: Placement;\r\n\r\n  /**\r\n   * Set position strategy of dropdown options\r\n   */\r\n  @Prop()\r\n  strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n  @Watch(\"placement\")\r\n  @Watch(\"dropdownAlign\")\r\n  watchPosition() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n    });\r\n  }\r\n\r\n  @Watch(\"dropdownOptionsOffset\")\r\n  watchOptionsOffset() {\r\n    this.popper?.setOptions({\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  @Watch(\"strategy\")\r\n  watchStrategy() {\r\n    this.setStrategy();\r\n  }\r\n\r\n  private setStrategy() {\r\n    if (!this.popper) {\r\n      return;\r\n    }\r\n\r\n    if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n      this.popper.setOptions({\r\n        strategy: this.strategy,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    let element: Element | null = this.host;\r\n\r\n    const boundary = this.boundary || document;\r\n\r\n    while (element && element.parentNode !== boundary) {\r\n      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n      if (element !== null && hasOverflow(element)) {\r\n        this.popper.setOptions({\r\n          strategy: \"fixed\",\r\n        });\r\n\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.popper.setOptions({\r\n      strategy: \"absolute\",\r\n    });\r\n  }\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private popper: PopperInstance | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = tabbable(this.host);\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    this.button.addEventListener(\"click\", () => {\r\n      this.open = !this.open;\r\n    });\r\n\r\n    const options = this.host.querySelector(\".dso-dropdown-options\");\r\n    if (!options) {\r\n      throw new ReferenceError(\"Dropdown options not found\");\r\n    }\r\n\r\n    options.setAttribute(\"role\", \"menu\");\r\n    options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n\r\n    if (this.popper) {\r\n      return;\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n      placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n      modifiers: [\r\n        {\r\n          name: \"offset\",\r\n          options: {\r\n            offset: [0, this.dropdownOptionsOffset],\r\n          },\r\n        },\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: {\r\n            boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n          },\r\n          enabled: this.boundary !== undefined,\r\n        },\r\n      ],\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setStrategy();\r\n    if (this.open) {\r\n      this.popper?.update();\r\n    }\r\n\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of tabbable(li)) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    if (this.open && (!this.host.contains(event.target) || this.tabbables(false).includes(event.target))) {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.popper?.destroy();\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!(event.relatedTarget instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    if (!this.tabbables(true).includes(event.relatedTarget)) {\r\n      this.open = false;\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  }\r\n\r\n  private getActiveElement(root: Document | ShadowRoot = document): Element | null {\r\n    const activeEl = root.activeElement;\r\n\r\n    if (!activeEl) {\r\n      return null;\r\n    }\r\n\r\n    if (activeEl.shadowRoot) {\r\n      return this.getActiveElement(activeEl.shadowRoot);\r\n    }\r\n\r\n    return activeEl;\r\n  }\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === this.getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div hidden={!this.open}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}