@haiilo/catalyst 14.5.1 → 14.5.2

package/dist/components/cat-dropdown2.js

@@ -1116,6 +1116,9 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
          * @internal
          */
         this.focusTrap = true;
+        this.boundWindowClickListener = this.windowClickListener.bind(this);
+        this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);
+        this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
     }
     /**
      * Whether the dropdown is open.
@@ -1137,6 +1140,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             path.includes(this.content) &&
             // check if click was not on a trigger for a sub-dropdown
             event.target?.slot !== 'trigger' &&
+            !event.target.subMenu &&
             // check if click was not an element marked with data-dropdown-no-close
             !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
             this.close();
@@ -1147,13 +1151,13 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.close();
         }
     }
-    globalClickHandler(event) {
+    windowClickListener(event) {
         this.handleClickOutside(event);
     }
-    globalMouseDownHandler(event) {
+    windowMousedownListener(event) {
         this.handleClickOutside(event);
     }
-    globalTouchStartHandler(event) {
+    windowTouchStartListener(event) {
         this.handleClickOutside(event);
     }
     /**
@@ -1191,6 +1195,8 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
                     : createFocusTrap(this.content, {
                         tabbableOptions: this.tabbableOptions,
                         allowOutsideClick: true,
+                        clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),
+                        onPostDeactivate: () => this.close(),
                         onPostActivate: () => this.catOpen.emit(),
                         setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
                         isKeyForward: event => {
@@ -1216,6 +1222,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
                 this.trap.activate();
             }
             else {
+                this.addListeners();
                 this.catOpen.emit();
             }
         });
@@ -1234,6 +1241,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         if (shouldReturnFocus) {
             this.trigger?.focus();
         }
+        this.removeListeners();
         // give CSS transition time to apply
         setTimeout(() => {
             this._isOpen = false;
@@ -1258,16 +1266,29 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.cleanupFloatingUi = undefined;
     }
     render() {
-        return (h(Host, { key: 'b3cd898551dc3e6d5396db1a4a14bc97cf4a2024' }, h("slot", { key: '6875cfad353891deb54ebcd5155d7ea466384131', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '93fdda4c49a7a956f72548699200feb309779081', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '13a68b5f706e61e87599c463e58f1bf932b2d261', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '06357a4a970241938900853d78c88427c6a9e69a', name: "content" }))));
+        return (h(Host, { key: 'bd6c2271fbd5a3f9222cb9eb8c59d7113dc72c7a' }, h("slot", { key: '26b1d2b753fffa0f91c8ee505209c46880e9233b', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'ac3b213022083bdb89edf4583cc216a5308bb1d2', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'c4849c420a3e248bc7192db3a059e3372b7612fb', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '1bbcaa8a86c2726e61aff6236e01b3f4ac6004e9', name: "content" }))));
+    }
+    addListeners() {
+        window.addEventListener('click', this.boundWindowClickListener);
+        window.addEventListener('mousedown', this.boundWindowMousedownListener);
+        window.addEventListener('touchstart', this.boundWindowTouchStartListener);
+    }
+    removeListeners() {
+        window.removeEventListener('click', this.boundWindowClickListener);
+        window.removeEventListener('mousedown', this.boundWindowMousedownListener);
+        window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
     }
     handleClickOutside(event) {
-        if (!this.noAutoClose &&
+        if (this.shouldCloseByClickEvent(event)) {
+            this.close();
+        }
+    }
+    shouldCloseByClickEvent(event) {
+        return (!this.noAutoClose &&
             // check if click was outside of the dropdown content
             !event.composedPath().includes(this.content) &&
             // check if click was not on an element marked with data-dropdown-no-close
-            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
-            this.close();
-        }
+            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1386,7 +1407,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         "toggle": [64],
         "open": [64],
         "close": [64]
-    }, [[0, "catClick", "clickHandler"], [0, "keydown", "keydownHandler"], [6, "click", "globalClickHandler"], [7, "mousedown", "globalMouseDownHandler"], [6, "touchstart", "globalTouchStartHandler"]]]);
+    }, [[0, "catClick", "clickHandler"], [0, "keydown", "keydownHandler"]]]);
 CatDropdown.OFFSET = 4;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {