@nectary/components 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.js

@@ -13,7 +13,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #$contentSlot;
   #$targetOpenWrapper;
   #targetActiveElement = null;
-  #controller = null;
+  #controller;
   #keydownContext;
   #visibilityContext;
   #targetStyleValue = null;
@@ -31,10 +31,13 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
     this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
     this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
+    this.#controller = new AbortController();
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#controller = new AbortController();
+    if (this.#controller === null) {
+      this.#controller = new AbortController();
+    }
     const {
       signal
     } = this.#controller;
@@ -58,6 +61,8 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
+    this.#controller = null;
+    this.#resizeThrottle.cancel();
     this.#onCollapse();
   }
   static get observedAttributes() {
@@ -102,7 +107,9 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         {
           if (isAttrTrue(newVal)) {
             requestAnimationFrame(() => {
-              this.#onExpand();
+              if (this.isConnected && getBooleanAttribute(this, 'open')) {
+                this.#onExpand();
+              }
             });
           } else {
             this.#onCollapse();
@@ -186,9 +193,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
-            this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
-            this.#targetActiveElement.focus();
-            this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            if (this.isConnected && this.#isOpen()) {
+              this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              this.#targetActiveElement.focus();
+              this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            }
           });
         }
       }
@@ -196,7 +205,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     disableScroll();
     window.addEventListener('resize', this.#onResize);
     requestAnimationFrame(() => {
-      if (this.#isOpen()) {
+      if (this.isConnected && this.#isOpen()) {
         this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
       }
     });
@@ -238,9 +247,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
-            this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
-            $targetEl.focus();
-            this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            if (this.isConnected && !this.#isOpen()) {
+              this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              $targetEl.focus();
+              this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+            }
           });
         }
         this.#targetActiveElement = null;